<ApiEndpoint
  method="POST"
  path="/v1/clusters/{cluster_id}/replicate"
  description="Triggers immediate Raft write-ahead log replication across active quorum peers."
  badge="Idempotent"
  params={[
    { name: "cluster_id", type: "string", required: true, description: "Unique target cluster identifier" },
    { name: "fsync", type: "boolean", required: false, description: "Block until disk sync completes" },
    { name: "timeout_ms", type: "uint32", required: false, description: "RPC timeout limit (default: 500ms)" },
  ]}
  responses={[
    { status: 200, label: "OK", body: '{\n  "replicated_index": 45091,\n  "peers_acknowledged": 3,\n  "latency_ms": 1.4\n}' },
    { status: 409, label: "Conflict", body: '{\n  "error": "LEADER_DEPOSED",\n  "current_term": 5\n}' },
  ]}
/>

<FeatureMatrix
  columns={[
    { key: "lsm", label: "LSM-Tree (Pebbles/Rocks)" },
    { key: "btree", label: "B+ Tree (Postgres/InnoDB)" },
  ]}
  rows={[
    { category: "Storage & Latency" },
    { name: "Write Amplification", values: { lsm: "Low (Sequential I/O)", btree: "High (Random Pages)" } },
    { name: "Point Lookups", values: { lsm: "partial", btree: true } },
    { name: "Range Scans", values: { lsm: true, btree: true } },
    { category: "Hardware Characteristics" },
    { name: "NVMe SSD Optimization", values: { lsm: true, btree: "partial" } },
    { name: "Zero-Allocation Compaction", values: { lsm: true, btree: false } },
  ]}
/>

<MemoryLayout
  title="TCP Segment Header (20 Bytes)"
  totalBytes={20}
  segments={[
    { name: "Source Port", bytes: 2, offset: "0x00 - 0x01", type: "uint16", value: "0x1F90 (8080)", color: "crimson", description: "Origin port transmitting payload packet." },
    { name: "Dest Port", bytes: 2, offset: "0x02 - 0x03", type: "uint16", value: "0x01BB (443)", color: "emerald", description: "Target service destination port." },
    { name: "Sequence No", bytes: 4, offset: "0x04 - 0x07", type: "uint32", value: "0x28B49001", color: "blue", description: "Initial Sequence Number (ISN) for data stream ordering." },
    { name: "Ack Number", bytes: 4, offset: "0x08 - 0x0B", type: "uint32", value: "0x00000000", color: "amber", description: "Next expected sequence number from peer." },
    { name: "Data Offset & Flags", bytes: 2, offset: "0x0C - 0x0D", type: "uint16", value: "0x5002 (SYN)", color: "violet", description: "Header length and TCP control flags (SYN, ACK, FIN)." },
    { name: "Window Size", bytes: 2, offset: "0x0E - 0x0F", type: "uint16", value: "0xFFFF (65535)", color: "neutral", description: "Receive window size for flow control buffer." },
    { name: "Checksum & Urgent", bytes: 4, offset: "0x10 - 0x13", type: "uint32", value: "0x3A210000", color: "neutral", description: "Error detection checksum and urgent pointer offset." },
  ]}
/>

<PipelineFlow
  animated={true}
  stages={[
    { title: "Ingress Gateway", badge: "HTTP/3", description: "TLS termination and routing", metric: "142k req/s" },
    { title: "Write-Ahead Log", badge: "NVMe", description: "Sequential disk append fsync", metric: "0.28ms flush", active: true },
    { title: "MemTable", badge: "SkipList", description: "Lock-free key-value sort", metric: "64MB cap" },
    { title: "SSTable Level-0", badge: "Disk", description: "Immutable sorted strings table", metric: "Compacting" },
  ]}
/>

<DiffBlock
  file="migrations/0042_cluster_status.sql"
  status="modified"
  diff={`@@ -12,7 +12,8 @@
 id: uuid PRIMARY KEY,
 created_at: timestamp NOT NULL DEFAULT now(),
-status: varchar(32) DEFAULT 'pending',
+status: cluster_status NOT NULL DEFAULT 'provisioning',
+replicas: integer NOT NULL DEFAULT 3,
 region: text NOT NULL`}
/>

<DiffBlock
  file="raft/log.go"
  status="modified"
  view="split"
  collapseContext={1}
  showCoverage
  diff={patch}
  lines={linesWithCoverageAndNotes}
/>

// Standard architecture diagram
<ArchitectureCanvas
  title="Checkout Service"
  direction="LR"
  routing="smoothstep"
  showControls
  groups={[
    { id: "core", label: "Core", kind: "service" },
    { id: "data", label: "Data", kind: "layer" },
  ]}
  nodes={[
    { id: "web", label: "Web App" },
    { id: "api", label: "API Gateway", group: "core" },
    { id: "orders", label: "Orders", group: "core" },
    { id: "pg", label: "Postgres", group: "data" },
  ]}
  connections={[
    { from: "web", to: "api", label: "HTTPS", animated: true },
    { from: "api", to: "orders", label: "gRPC" },
    { from: "orders", to: "pg", label: "SQL" },
  ]}
/>

// Compact walkthrough variant (for sidebars & split panes)
<ArchitectureCanvas compact wrapLabels nodes={steps} connections={edges} />

<ReactFlowCanvas
  title="Interactive Pipeline Topology"
  direction="LR"
  defaultRouting="smoothstep"
  groups={[
    { id: "core", label: "Core Services", kind: "service" },
  ]}
  nodes={[
    { id: "ingest", label: "Ingest Gateway", badge: "Go", description: "Edge TLS termination & rate limit" },
    { id: "worker", label: "Stream Worker", group: "core", badge: "Rust", description: "Partitioned event processor" },
    { id: "store", label: "Storage Engine", group: "core", badge: "LSM", status: "ok", description: "Append-only commit ledger" },
  ]}
  connections={[
    { from: "ingest", to: "worker", label: "gRPC", animated: true },
    { from: "worker", to: "store", label: "WAL", animated: true },
  ]}
  height={420}
/>

<FileTree
  data={[
    {
      name: "src",
      type: "folder",
      defaultOpen: true,
      children: [
        { name: "Button.tsx", type: "file", badge: "React" },
        { name: "DiffBlock.tsx", type: "file", badge: "React" },
        { name: "PingStatus.astro", type: "file", badge: "Astro" },
      ],
    },
    { name: "package.json", type: "file", badge: "0.1.3" },
    { name: "README.md", type: "file" },
  ]}
/>

<PackageManager pkg="array-ui" defaultManager="pnpm" />

<Button variant="primary" size="md">Deploy</Button>
<Button variant="primary" icon={<PlusIcon />}>New Cluster</Button>
<Button variant="secondary" rightIcon={<ArrowRightIcon />}>Continue</Button>
<Button variant="primary" loading>Deploying...</Button>
<Button variant="secondary" size="icon" icon={<PlusIcon />} />

<SearchBox placeholder="Search writings and topics…" shortcut="⌘K" />

<Switch label="Auto-deploy on push" defaultChecked />
<Checkbox label="Require quorum confirmation" defaultChecked />

<Alert variant="warning" title="Replication Lag Detected">
  Replica lag above 200ms in region eu-west-1. Compaction deferred.
</Alert>

<EmptyState
  title="No deployments yet"
  description="Connect a repository to ship your first production build."
>
  <Button size="sm" variant="primary">Connect repo</Button>
</EmptyState>

<StatCard value="99.98%" label="Availability" description="last 30 days rolling" />
<StatCard value="+412" label="Lines added" accent="emerald" />
<StatCard value="−89" label="Lines removed" accent="rose" />

<Table
  columns={[
    { header: "Service", accessor: "service", sortable: true },
    { header: "Region", accessor: "region" },
    { header: "P99 Latency", accessor: "p99" },
    { header: "Status", accessor: "status" },
  ]}
  data={[
    { service: "auth-gateway", region: "us-east-1", p99: "1.2ms", status: "Healthy" },
    { service: "raft-ledger", region: "eu-west-1", p99: "2.4ms", status: "Healthy" },
    { service: "wal-storage", region: "ap-south-1", p99: "8.1ms", status: "Degraded" },
  ]}
  dense
/>

<Terminal
  title="cluster-deploy"
  lines={[
    "git checkout master && git pull",
    { text: "Fast-forward to 8c2f10b", kind: "out" },
    "pnpm build && pnpm test",
    { text: "142 tests passed, 0 failures", kind: "ok" },
    "kubectl apply -f k8s/prod.yaml",
    { text: "deployment.apps/api-server configured", kind: "out" },
    { text: "canary rollout degraded in eu-west-1", kind: "err" },
  ]}
/>

<StepNav
  current={currentStep}
  total={totalSteps}
  onPrev={() => setStep(s => s - 1)}
  onNext={() => setStep(s => s + 1)}
  badge={<Badge variant="primary">Core logic</Badge>}
  showKeyboardHints
/>

<TableOfContents
  headings={[
    { depth: 2, slug: "overview", text: "Overview & Features" },
    { depth: 2, slug: "architecture", text: "Architecture & Storage Engine" },
    { depth: 3, slug: "storage-engine", text: "LSM Tree & MemTable Compaction" },
    { depth: 3, slug: "wal-internals", text: "Write-Ahead Log Durability" },
    { depth: 2, slug: "benchmarks", text: "Performance & Recovery Benchmarks" },
  ]}
/>

<SideNav
  side="left" // "left" | "right"
  brand={{
    logo: "A",
    name: "Console",
    subtitle: "quorum v2.4",
    badge: "PRO",
  }}
  items={[
    { label: "Overview", icon: "⌂", active: true },
    { label: "Clusters", icon: "◎", badge: "3" },
    { label: "Deployments", icon: "▲" },
    { label: "Settings", icon: "⚙" },
  ]}
  user={{
    name: "Arpit Bhayani",
    email: "arpit@arpitbhayani.me",
    role: "Principal SRE",
  }}
  onLogout={() => handleLogout()}
/>

<TopNav
  brand={{
    logo: <LogoIcon />,
    title: "Array Control Plane",
    subtitle: "us-east-1 · primary",
    badge: <Badge variant="green">Live</Badge>,
  }}
  links={[
    { label: "Quorum", active: true },
    {
      label: "Resources",
      items: [
        { label: "Architecture Docs", description: "Consensus specifications" },
        { label: "REST / gRPC Reference", description: "Endpoints & parameters" },
      ],
    },
    { label: "Telemetry" },
  ]}
  rightActions={<Button variant="primary" size="sm">+ New Node</Button>}
  user={{
    name: "Arpit Bhayani",
    email: "arpit@arpitbhayani.me",
    role: "Principal Engineer",
  }}
  onLogout={() => handleLogout()}
  showThemeToggle={true}
/>

<Sidebar
  groups={[
    {
      title: "Primitives",
      links: [
        { label: "Buttons", href: "#buttons", badge: "Core" },
        { label: "Terminal", href: "#terminal", badge: "Dev" },
      ],
    },
    {
      title: "Explorables",
      links: [
        { label: "Cluster State", href: "#cluster-state" },
        { label: "Memory Layout", href: "#memory-layout" },
      ],
    },
  ]}
/>

<Hero
  title="Hey, I am Arpit"
  subtitle="engineering, databases, and systems."
  avatarUrl="https://edge.arpitbhayani.me/img/arpit-6.jpg"
  avatarAlt="Arpit Bhayani"
>
  <p>Principal engineer writing about the internals of systems that scale.</p>
  <div slot="actions" class="aui-btn-group">
    <Button variant="primary" size="sm">Read essays</Button>
    <Button variant="secondary" size="sm">Watch videos</Button>
  </div>
</Hero>

<SplitPane aside={<AsideContent />} stickyFirst ratio="1/1">
  <MainContent />
</SplitPane>

<Stack gap="sm">
  <Row justify="between" align="center">
    <span>Row</span>
    <Badge variant="green">Active</Badge>
  </Row>
  <Grid cols={3} gap="xs">
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
  </Grid>
</Stack>

<Heading level={3}>PR Walkthrough: Core Engine</Heading>
<Lead>A guided architectural walkthrough of storage engine changes across 4 files.</Lead>

<Newsletter
  title="Stay in the loop"
  description="No-fluff engineering essays, database teardowns, and system design insights delivered straight to your inbox."
  action="/api/subscribe"
  buttonText="Subscribe"
  linkedinUrl="https://linkedin.com/in/arpitbhayani"
  substackUrl="https://arpitbhayani.substack.com"
/>

<VideoEmbed
  src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
  title="Array UI Video Player Demo"
  aspectRatio="16 / 9"
/>

<CourseCard
  title="System Design Masterclass"
  description="Consensus, storage engines, cache consistency, sharding, and real-world architectures."
  href="https://arpitbhayani.me/courses"
  badge="Cohort 12"
  tags={["Distributed Systems", "Consensus", "Databases"]}
  ctaText="View curriculum →"
/>

<CoverCard
  title="Designing a Distributed Key-Value Store"
  description="Consensus, partition tolerance, WAL internals, and storage engine layout for extreme write throughput."
  category="SYSTEM DESIGN"
  path="posts/distributed-kv-store.md"
  badge="DEEP DIVE"
  author={{
    name: "Arpit Bhayani",
    handle: "@arpit · Principal Engineer",
    avatarUrl: "https://edge.arpitbhayani.me/img/arpit-6.jpg",
  }}
  tags={["raft", "storage", "consensus", "go"]}
  readingTime="14 min read"
  date="Oct 2026"
  theme="dark"
  pattern="dots"
/>

<AreaChart
  data={[
    { date: "00:00", active: 24, queued: 4 },
    { date: "04:00", active: 18, queued: 2 },
    { date: "08:00", active: 65, queued: 12 },
    { date: "12:00", active: 89, queued: 28 },
    { date: "16:00", active: 72, queued: 15 },
    { date: "20:00", active: 45, queued: 6 },
  ]}
  index="date"
  categories={["active", "queued"]}
  height={220}
/>

<DataTable
  data={[
    { id: "ws-01", name: "prod-ledger", region: "eu-west-1", status: "Active", nodes: 5 },
    { id: "ws-02", name: "staging-ingest", region: "us-east-1", status: "Provisioning", nodes: 3 },
    { id: "ws-03", name: "analytics-sink", region: "ap-south-1", status: "Active", nodes: 7 },
  ]}
  columns={[
    { key: "id", header: "Workspace ID", sortable: true },
    { key: "name", header: "Name", sortable: true },
    { key: "region", header: "Region" },
    { key: "nodes", header: "Nodes" },
    { key: "status", header: "Status" },
  ]}
  selectable
  pageSize={10}
/>