@contractspec/bundle.library 1.12.0 → 1.14.0

package/dist/components/docs/getting-started/index.js

@@ -1,12 +1,2184 @@
-import "./getting-started.docblocks.js";
-import { InstallationPage } from "./InstallationPage.js";
-import { HelloWorldPage } from "./HelloWorldPage.js";
-import { CLIPage } from "./CLIPage.js";
-import { VSCodeExtensionPage } from "./VSCodeExtensionPage.js";
-import { DeveloperToolsPage } from "./DeveloperToolsPage.js";
-import { DataViewTutorialPage } from "./DataViewTutorialPage.js";
-import { StartHerePage } from "./StartHerePage.js";
-import { TroubleshootingPage } from "./TroubleshootingPage.js";
-import { CompatibilityPage } from "./CompatibilityPage.js";
-
-export { CLIPage, CompatibilityPage, DataViewTutorialPage, DeveloperToolsPage, HelloWorldPage, InstallationPage, StartHerePage, TroubleshootingPage, VSCodeExtensionPage };
+// @bun
+// src/components/docs/getting-started/CLIPage.tsx
+import Link from "@contractspec/lib.ui-link";
+import { ChevronRight } from "lucide-react";
+import { CodeBlock, InstallCommand } from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function CLIPage() {
+  const commands = [
+    {
+      name: "create",
+      description: "Interactive wizard to create contract specifications",
+      usage: "contractspec create [--type operation] [--ai]"
+    },
+    {
+      name: "build",
+      description: "Generate implementation code from contract specs using AI agents",
+      usage: "contractspec build <spec-file> [--agent-mode claude-code]"
+    },
+    {
+      name: "validate",
+      description: "Validate contract specifications and implementations",
+      usage: "contractspec validate <spec-file> [--check-implementation]"
+    },
+    {
+      name: "list",
+      description: "List all contract specifications in the project",
+      usage: "contractspec list [--type operation] [--json]"
+    },
+    {
+      name: "watch",
+      description: "Watch specs and auto-regenerate on changes",
+      usage: "contractspec watch [--build] [--validate]"
+    },
+    {
+      name: "sync",
+      description: "Sync contracts by building all discovered specs",
+      usage: "contractspec sync [--dry-run]"
+    },
+    {
+      name: "ci",
+      description: "Run all validation checks for CI/CD pipelines",
+      usage: "contractspec ci [--format sarif] [--output results.sarif]"
+    },
+    {
+      name: "deps",
+      description: "Analyze contract dependencies and relationships",
+      usage: "contractspec deps [--circular] [--format dot]"
+    },
+    {
+      name: "diff",
+      description: "Compare contract specifications and show differences",
+      usage: "contractspec diff <spec1> <spec2> [--breaking]"
+    }
+  ];
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV("h1", {
+            className: "text-4xl font-bold",
+            children: "ContractSpec CLI"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-lg",
+            children: "Command-line interface for creating, building, and validating contract specifications with AI-powered code generation."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-6",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV("h2", {
+                className: "text-2xl font-bold",
+                children: "Installation"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(InstallCommand, {
+                package: "contractspec",
+                dev: true
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV("h2", {
+                className: "text-2xl font-bold",
+                children: "Quick Start"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(CodeBlock, {
+                language: "bash",
+                code: `# Initialize project
+bunx contractspec init
+
+# Create a spec
+contractspec create --type operation
+
+# Generate code
+contractspec build src/contracts/mySpec.ts
+
+# Validate
+contractspec validate src/contracts/mySpec.ts`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("h2", {
+                className: "text-2xl font-bold",
+                children: "Commands"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "grid gap-4",
+                children: commands.map((cmd) => /* @__PURE__ */ jsxDEV("div", {
+                  className: "card-subtle space-y-2 p-4",
+                  children: [
+                    /* @__PURE__ */ jsxDEV("h3", {
+                      className: "font-mono font-bold text-violet-400",
+                      children: cmd.name
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV("p", {
+                      className: "text-muted-foreground text-sm",
+                      children: cmd.description
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV(CodeBlock, {
+                      language: "bash",
+                      code: cmd.usage,
+                      showCopyButton: false
+                    }, undefined, false, undefined, this)
+                  ]
+                }, cmd.name, true, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV("h2", {
+                className: "text-2xl font-bold",
+                children: "AI Agent Modes"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground",
+                children: "The CLI supports multiple AI agent modes for different use cases:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "grid gap-3 md:grid-cols-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "card-subtle p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("h4", {
+                        className: "font-bold",
+                        children: "simple"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "text-muted-foreground text-sm",
+                        children: "Direct LLM API calls, fast and straightforward. Best for rapid prototyping."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "card-subtle p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("h4", {
+                        className: "font-bold",
+                        children: "claude-code"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "text-muted-foreground text-sm",
+                        children: "Extended thinking with Claude. Best for production-quality code."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "card-subtle p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("h4", {
+                        className: "font-bold",
+                        children: "openai-codex"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "text-muted-foreground text-sm",
+                        children: "GPT-4o/o1 models. Excellent for algorithms and optimization."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "card-subtle p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("h4", {
+                        className: "font-bold",
+                        children: "cursor"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "text-muted-foreground text-sm",
+                        children: "Leverages Cursor agentic capabilities. Requires Cursor environment."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV("h2", {
+                className: "text-2xl font-bold",
+                children: "CI/CD Integration"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground",
+                children: "Run all validation checks in CI/CD with machine-readable output:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(CodeBlock, {
+                language: "yaml",
+                filename: ".github/workflows/validate.yml",
+                code: `- name: Validate Contracts
+  run: contractspec ci --format sarif --output results.sarif
+
+- name: Upload SARIF
+  uses: github/codeql-action/upload-sarif@v3
+  with:
+    sarif_file: results.sarif`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "card-subtle space-y-4 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV("h3", {
+                className: "font-bold",
+                children: "Configuration"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground text-sm",
+                children: [
+                  "Create a ",
+                  /* @__PURE__ */ jsxDEV("code", {
+                    children: ".contractsrc.json"
+                  }, undefined, false, undefined, this),
+                  " file in your project root:"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV(CodeBlock, {
+                language: "json",
+                filename: ".contractsrc.json",
+                code: `{
+  "aiProvider": "claude",
+  "agentMode": "claude-code",
+  "outputDir": "./src",
+  "conventions": {
+    "operations": "interactions/commands|queries",
+    "events": "events"
+  }
+}`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: "/docs/getting-started/tools/vscode",
+            className: "btn-primary",
+            children: [
+              "Next: VS Code Extension ",
+              /* @__PURE__ */ jsxDEV(ChevronRight, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: "/docs/getting-started/tools",
+            className: "btn-ghost",
+            children: "Back to Tools"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/getting-started/CompatibilityPage.tsx
+import Link2 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight2 } from "lucide-react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function CompatibilityPage() {
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h1", {
+            className: "text-4xl font-bold",
+            children: "Compatibility"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground text-lg",
+            children: "Supported runtimes, frameworks, and agent modes for ContractSpec."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-6",
+        children: [
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "card-subtle space-y-3 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h2", {
+                className: "text-2xl font-bold",
+                children: "Runtimes"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("ul", {
+                className: "text-muted-foreground space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "Node.js 20+"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "Bun 1.0+"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "card-subtle space-y-3 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h2", {
+                className: "text-2xl font-bold",
+                children: "Frameworks"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("ul", {
+                className: "text-muted-foreground space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "Next.js 14+ (App Router preferred)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "Bun + Elysia or compatible HTTP servers"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "card-subtle space-y-3 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h2", {
+                className: "text-2xl font-bold",
+                children: "Package managers"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("ul", {
+                className: "text-muted-foreground space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "bun (recommended)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "npm"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "pnpm"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "card-subtle space-y-3 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h2", {
+                className: "text-2xl font-bold",
+                children: "AI agent modes"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("ul", {
+                className: "text-muted-foreground space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "claude-code"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "openai-codex"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "cursor"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "opencode"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "simple (direct LLM)"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "card-subtle space-y-3 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h2", {
+                className: "text-2xl font-bold",
+                children: "Datastores"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground",
+                children: "ContractSpec ships with Prisma-friendly defaults and can integrate with custom adapters for other databases."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("ul", {
+                className: "text-muted-foreground space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "PostgreSQL via Prisma"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: "Custom adapters for other SQL/NoSQL stores"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "flex flex-wrap items-center gap-3 pt-2",
+        children: [
+          /* @__PURE__ */ jsxDEV2(Link2, {
+            href: "/docs/getting-started/start-here",
+            className: "btn-ghost",
+            children: "Start here"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2(Link2, {
+            href: "/docs/getting-started/troubleshooting",
+            className: "btn-ghost",
+            children: "Troubleshooting"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2(Link2, {
+            href: "/docs/getting-started/installation",
+            className: "btn-primary",
+            children: [
+              "Next: Installation ",
+              /* @__PURE__ */ jsxDEV2(ChevronRight2, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/getting-started/DataViewTutorialPage.tsx
+import Link3 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight3 } from "lucide-react";
+import { CodeBlock as CodeBlock2 } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function DataViewTutorialPage() {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h1", {
+            className: "text-4xl font-bold",
+            children: "Display Data with DataViews"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground text-lg",
+            children: "Define a filterable, sortable transaction history view that works across web and mobile without duplicating UI code."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "1. Define the underlying query"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground",
+            children: "First, create a query operation to fetch the data:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(CodeBlock2, {
+            language: "typescript",
+            filename: "lib/specs/billing/list-transactions.ts",
+            code: `import { defineQuery } from '@contractspec/lib.contracts';
+
+export const ListTransactions = defineQuery({
+  meta: {
+    key: 'billing.listTransactions',
+    version: '1.0.0',
+    description: 'Fetch customer transaction history',
+  },
+  io: {
+    input: /* pagination + filters */,
+    output: /* array of transactions */,
+  },
+  policy: { auth: 'user' },
+});`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "2. Define the DataView spec"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground",
+            children: "Wrap your query with presentation metadata:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(CodeBlock2, {
+            language: "typescript",
+            filename: "lib/specs/billing/transaction-history.data-view.ts",
+            code: `import { defineDataView } from '@contractspec/lib.contracts';
+import { ListTransactions } from './list-transactions';
+
+export const TransactionHistory = defineDataView({
+  meta: {
+    key: 'billing.transactionHistory',
+    version: '1.0.0',
+    entity: 'transaction',
+    description: 'Customer payment history',
+    goal: 'Help customers track spending',
+    context: 'Account dashboard',
+    owners: ['team-billing'],
+    stability: 'stable',
+    tags: ['payments'],
+  },
+  source: {
+    primary: ListTransactions,
+  },
+  view: {
+    kind: 'list',
+    fields: [
+      {
+        key: 'date',
+        label: 'Date',
+        dataPath: 'createdAt',
+        format: 'date',
+        sortable: true
+      },
+      {
+        key: 'description',
+        label: 'Description',
+        dataPath: 'description'
+      },
+      {
+        key: 'amount',
+        label: 'Amount',
+        dataPath: 'amount',
+        format: 'currency',
+        sortable: true
+      },
+      {
+        key: 'status',
+        label: 'Status',
+        dataPath: 'status',
+        format: 'badge'
+      },
+    ],
+    filters: [
+      {
+        key: 'status',
+        label: 'Status',
+        field: 'status',
+        type: 'enum',
+        options: [
+          { value: 'succeeded', label: 'Paid' },
+          { value: 'pending', label: 'Pending' },
+          { value: 'failed', label: 'Failed' },
+        ],
+      },
+      {
+        key: 'dateRange',
+        label: 'Date Range',
+        field: 'createdAt',
+        type: 'dateRange',
+      },
+    ],
+    defaultSort: { field: 'date', direction: 'desc' },
+    pagination: { pageSize: 25 },
+  },
+});`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "3. Render on the frontend"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground",
+            children: "Use the runtime renderer in your React or React Native app:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(CodeBlock2, {
+            language: "tsx",
+            filename: "app/dashboard/transactions/page.tsx",
+            code: `'use client';
+
+import { DataViewRenderer } from '@contractspec/lib.design-system';
+import { TransactionHistory } from '@/lib/specs/billing/transaction-history.data-view';
+import { useQuery } from '@tanstack/react-query';
+
+export function TransactionsPage() {
+  const { data, isLoading } = useQuery({
+    queryKey: ['transactions'],
+    queryFn: () => fetch('/api/ops/billing.listTransactions').then(r => r.json()),
+  });
+
+  return (
+    <div className="container py-8">
+      <h1 className="text-3xl font-bold mb-6">Payment History</h1>
+      <DataViewRenderer
+        spec={TransactionHistory}
+        data={data?.items ?? []}
+        loading={isLoading}
+        onFilterChange={(filters) => {
+          // refetch with new filters
+        }}
+      />
+    </div>
+  );
+}`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "card-subtle space-y-4 p-6",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h3", {
+            className: "font-bold",
+            children: "Why DataViews?"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("ul", {
+            className: "text-muted-foreground space-y-2 text-sm",
+            children: [
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Same spec renders on web (React) and mobile (React Native)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Filters, sorting, and pagination handled automatically"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Format rules (currency, dates, badges) applied consistently"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Export to CSV/PDF using the same spec"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "A/B test different layouts without touching the backend"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3(Link3, {
+            href: "/docs/libraries/data-views",
+            className: "btn-primary",
+            children: [
+              "DataView API Reference ",
+              /* @__PURE__ */ jsxDEV3(ChevronRight3, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3(Link3, {
+            href: "/docs/specs/workflows",
+            className: "btn-ghost",
+            children: "Next: Workflows"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/getting-started/DeveloperToolsPage.tsx
+import Link4 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight4, Code2, Cpu, Layers, Terminal } from "lucide-react";
+import { CodeBlock as CodeBlock3, InstallCommand as InstallCommand2 } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function DeveloperToolsPage() {
+  const tools = [
+    {
+      name: "CLI",
+      href: "/docs/getting-started/tools/cli",
+      description: "Command-line interface for spec creation, building, validation, and CI/CD integration.",
+      icon: Terminal,
+      status: "available",
+      highlights: [
+        "AI-powered code generation",
+        "Multiple agent modes",
+        "SARIF/JSON output"
+      ]
+    },
+    {
+      name: "VS Code Extension",
+      href: "/docs/getting-started/tools/vscode",
+      description: "Real-time validation, scaffolding, and navigation directly in your editor.",
+      icon: Code2,
+      status: "available",
+      highlights: [
+        "Specs Explorer sidebar",
+        "Watch mode",
+        "Interactive walkthroughs"
+      ]
+    },
+    {
+      name: "ContractSpec Studio",
+      href: "https://www.contractspec.studio",
+      description: "Visual builder, lifecycle management, and deployment orchestration.",
+      icon: Layers,
+      status: "coming-soon",
+      highlights: [
+        "Visual spec editor",
+        "Deployment pipelines",
+        "Analytics dashboard"
+      ]
+    },
+    {
+      name: "JetBrains Plugin",
+      href: "#",
+      description: "Full ContractSpec support for IntelliJ, WebStorm, and other JetBrains IDEs.",
+      icon: Cpu,
+      status: "coming-soon",
+      highlights: [
+        "Code navigation",
+        "Inline validation",
+        "Refactoring support"
+      ]
+    }
+  ];
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h1", {
+            className: "text-4xl font-bold",
+            children: "Developer Tools"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground text-lg",
+            children: "ContractSpec provides a suite of tools to help you build, validate, and manage your specifications across different environments."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "grid gap-6 md:grid-cols-2",
+        children: tools.map((tool) => {
+          const IconComponent = tool.icon;
+          const isComingSoon = tool.status === "coming-soon";
+          return /* @__PURE__ */ jsxDEV4("div", {
+            className: `card-subtle relative space-y-4 p-6 ${isComingSoon ? "opacity-75" : ""}`,
+            children: [
+              isComingSoon && /* @__PURE__ */ jsxDEV4("span", {
+                className: "absolute -top-2 right-4 rounded-full bg-violet-500/20 px-2 py-0.5 text-xs font-medium text-violet-400",
+                children: "Coming Soon"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                className: "flex items-center gap-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV4("div", {
+                    className: "flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10",
+                    children: /* @__PURE__ */ jsxDEV4(IconComponent, {
+                      className: "h-5 w-5 text-violet-400"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("h3", {
+                    className: "text-lg font-bold",
+                    children: tool.name
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("p", {
+                className: "text-muted-foreground text-sm",
+                children: tool.description
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("ul", {
+                className: "space-y-1",
+                children: tool.highlights.map((highlight) => /* @__PURE__ */ jsxDEV4("li", {
+                  className: "text-muted-foreground flex items-center gap-2 text-sm",
+                  children: [
+                    /* @__PURE__ */ jsxDEV4("span", {
+                      className: "text-violet-400",
+                      children: "-"
+                    }, undefined, false, undefined, this),
+                    highlight
+                  ]
+                }, highlight, true, undefined, this))
+              }, undefined, false, undefined, this),
+              !isComingSoon && /* @__PURE__ */ jsxDEV4(Link4, {
+                href: tool.href,
+                className: "btn-ghost inline-flex items-center gap-1 text-sm",
+                children: [
+                  "Learn more ",
+                  /* @__PURE__ */ jsxDEV4(ChevronRight4, {
+                    size: 14
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, tool.name, true, undefined, this);
+        })
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "card-subtle space-y-4 p-6",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h3", {
+            className: "font-bold",
+            children: "Quick Install"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("p", {
+                    className: "text-muted-foreground mb-2 text-xs font-medium",
+                    children: "CLI"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4(InstallCommand2, {
+                    package: "contractspec",
+                    dev: true
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("p", {
+                    className: "text-muted-foreground mb-2 text-xs font-medium",
+                    children: "VS Code Extension"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4(CodeBlock3, {
+                    language: "bash",
+                    code: "code --install-extension lssm.vscode-contractspec"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4(Link4, {
+            href: "/docs/getting-started/tools/cli",
+            className: "btn-primary",
+            children: [
+              "Get Started with CLI ",
+              /* @__PURE__ */ jsxDEV4(ChevronRight4, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4(Link4, {
+            href: "/docs/getting-started/tools/vscode",
+            className: "btn-ghost",
+            children: "VS Code Extension"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/getting-started/HelloWorldPage.tsx
+import Link5 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight5 } from "lucide-react";
+import { CodeBlock as CodeBlock4 } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function HelloWorldPage() {
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h1", {
+            className: "text-4xl font-bold",
+            children: "Your First Operation"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground text-lg",
+            children: "Build a payment capture operation with policy enforcement in under 10 minutes."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-6",
+        children: [
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV5("h2", {
+                className: "text-2xl font-bold",
+                children: "What you'll build"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("p", {
+                className: "text-muted-foreground",
+                children: "A real-world payment processing operation that validates input, enforces business rules, integrates with Stripe, and audits every transaction. This is production-ready code, not a toy example."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV5("h2", {
+                className: "text-2xl font-bold",
+                children: "1. Define the operation spec"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "Create ",
+                  /* @__PURE__ */ jsxDEV5("code", {
+                    children: "lib/specs/billing/capture-payment.ts"
+                  }, undefined, false, undefined, this),
+                  ":"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5(CodeBlock4, {
+                language: "typescript",
+                filename: "lib/specs/billing/capture-payment.ts",
+                code: `import { defineCommand } from '@contractspec/lib.contracts';
+import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
+
+const CapturePaymentInput = new SchemaModel({
+  name: 'CapturePaymentInput',
+  fields: {
+    invoiceId: { type: ScalarTypeEnum.NonEmptyString(), isOptional: false },
+    amount: { type: ScalarTypeEnum.PositiveNumber(), isOptional: false },
+    currency: { type: ScalarTypeEnum.String(), isOptional: false },
+    paymentMethodId: { type: ScalarTypeEnum.NonEmptyString(), isOptional: false },
+  },
+});
+
+const PaymentResult = new SchemaModel({
+  name: 'PaymentResult',
+  fields: {
+    transactionId: { type: ScalarTypeEnum.String(), isOptional: false },
+    status: { type: ScalarTypeEnum.String(), isOptional: false },
+    receiptUrl: { type: ScalarTypeEnum.String(), isOptional: true },
+  },
+});
+
+export const CapturePayment = defineCommand({
+  meta: {
+    key: 'billing.capturePayment',
+    version: '1.0.0',
+    description: 'Process a payment for an invoice',
+    goal: 'Capture funds from customer payment method',
+    context: 'Called when customer confirms purchase',
+    owners: ['team-billing'],
+    tags: ['payments', 'stripe', 'critical'],
+    stability: 'stable',
+  },
+  io: {
+    input: CapturePaymentInput,
+    output: PaymentResult,
+  },
+  policy: {
+    auth: 'user',
+    rules: [
+      { resource: 'invoice', action: 'pay', condition: 'owner' },
+    ],
+  },
+});`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV5("h2", {
+                className: "text-2xl font-bold",
+                children: "2. Implement the handler"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "Create ",
+                  /* @__PURE__ */ jsxDEV5("code", {
+                    children: "lib/handlers/billing/capture-payment.ts"
+                  }, undefined, false, undefined, this),
+                  ":"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5(CodeBlock4, {
+                language: "typescript",
+                filename: "lib/handlers/billing/capture-payment.ts",
+                code: `import { CapturePayment } from '@/lib/specs/billing/capture-payment';
+import { stripe } from '@/lib/integrations/stripe';
+import { db } from '@/lib/db';
+
+export async function handleCapturePayment(input, ctx) {
+  // 1. Verify invoice exists and belongs to user
+  const invoice = await db.invoice.findUnique({
+    where: { id: input.invoiceId, userId: ctx.userId },
+  });
+
+  if (!invoice) throw new Error('Invoice not found');
+  if (invoice.status === 'paid') throw new Error('Already paid');
+
+  // 2. Create Stripe payment intent
+  const paymentIntent = await stripe.paymentIntents.create({
+    amount: Math.round(input.amount * 100),
+    currency: input.currency,
+    payment_method: input.paymentMethodId,
+    confirm: true,
+    metadata: { invoiceId: input.invoiceId },
+  });
+
+  // 3. Update invoice status
+  await db.invoice.update({
+    where: { id: input.invoiceId },
+    data: {
+      status: 'paid',
+      paidAt: new Date(),
+      transactionId: paymentIntent.id,
+    },
+  });
+
+  return {
+    transactionId: paymentIntent.id,
+    status: paymentIntent.status,
+    receiptUrl: paymentIntent.charges.data[0]?.receipt_url,
+  };
+}`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV5("h2", {
+                className: "text-2xl font-bold",
+                children: "3. Register and serve"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "Wire it up in ",
+                  /* @__PURE__ */ jsxDEV5("code", {
+                    children: "lib/registry.ts"
+                  }, undefined, false, undefined, this),
+                  " and",
+                  " ",
+                  /* @__PURE__ */ jsxDEV5("code", {
+                    children: "app/api/ops/[...route]/route.ts"
+                  }, undefined, false, undefined, this),
+                  ":"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5(CodeBlock4, {
+                language: "typescript",
+                filename: "lib/registry.ts",
+                code: `import { OperationSpecRegistry, installOp } from '@contractspec/lib.contracts';
+import { CapturePayment } from './specs/billing/capture-payment';
+import { handleCapturePayment } from './handlers/billing/capture-payment';
+
+export const registry = new OperationSpecRegistry();
+installOp(registry, CapturePayment, handleCapturePayment);`
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5(CodeBlock4, {
+                language: "typescript",
+                filename: "app/api/ops/[...route]/route.ts",
+                code: `import { makeNextAppHandler } from '@contractspec/lib.contracts/server/rest-next-app';
+import { registry } from '@/lib/registry';
+import { auth } from '@/lib/auth';
+
+const handler = makeNextAppHandler(registry, async (req) => {
+  const session = await auth(req);
+  return { actor: 'user', userId: session.userId, tenantId: session.tenantId };
+});
+
+export { handler as GET, handler as POST };`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "card-subtle space-y-4 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV5("h3", {
+                className: "font-bold",
+                children: "What you just built:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("ul", {
+                className: "text-muted-foreground space-y-2 text-sm",
+                children: [
+                  /* @__PURE__ */ jsxDEV5("li", {
+                    children: [
+                      "Type-safe API endpoint at",
+                      " ",
+                      /* @__PURE__ */ jsxDEV5("code", {
+                        children: "/api/ops/billing.capturePayment"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("li", {
+                    children: "Automatic input validation (amount must be positive, IDs required)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("li", {
+                    children: "Policy enforcement\u2014only invoice owner can pay"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("li", {
+                    children: "Stripe integration with error handling"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("li", {
+                    children: "Database transaction with audit trail"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("li", {
+                    children: "Same spec works with GraphQL, MCP, or webhooks"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "flex items-center gap-4 pt-4",
+            children: /* @__PURE__ */ jsxDEV5(Link5, {
+              href: "/docs/getting-started/dataviews",
+              className: "btn-primary",
+              children: [
+                "Next: Display Data with DataViews ",
+                /* @__PURE__ */ jsxDEV5(ChevronRight5, {
+                  size: 16
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/getting-started/InstallationPage.tsx
+import Link6 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight6 } from "lucide-react";
+import { CodeBlock as CodeBlock5, InstallCommand as InstallCommand3 } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function InstallationPage() {
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h1", {
+            className: "text-4xl font-bold",
+            children: "Installation"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            className: "text-muted-foreground text-lg",
+            children: "Add ContractSpec to your existing Next.js or Bun project, or start fresh."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-6",
+        children: [
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV6("h2", {
+                className: "text-2xl font-bold",
+                children: "Prerequisites"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("ul", {
+                className: "text-muted-foreground space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV6("li", {
+                    children: "Node.js 20+ (or Bun 1.0+)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV6("li", {
+                    children: "Existing Next.js app or Bun HTTP server"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV6("li", {
+                    children: "PostgreSQL database (for persistence)"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV6("h2", {
+                className: "text-2xl font-bold",
+                children: "Install Core Libraries"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("p", {
+                className: "text-muted-foreground",
+                children: "Add the contracts runtime and your choice of adapter:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6(InstallCommand3, {
+                package: [
+                  "@contractspec/lib.contracts",
+                  "@contractspec/lib.schema"
+                ]
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV6("h2", {
+                className: "text-2xl font-bold",
+                children: "For Next.js projects"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6(InstallCommand3, {
+                package: "@contractspec/lib.contracts"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV6("h2", {
+                className: "text-2xl font-bold",
+                children: "For database models"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6(InstallCommand3, {
+                package: [
+                  "@contractspec/app.cli-database",
+                  "prisma",
+                  "@prisma/client"
+                ]
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV6("h2", {
+                className: "text-2xl font-bold",
+                children: "Set up your project"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("p", {
+                className: "text-muted-foreground",
+                children: "Initialize a new ContractSpec project structure:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6(CodeBlock5, {
+                language: "bash",
+                filename: "installation-init",
+                code: `bunx contractspec init
+# Follow the interactive prompts to configure your project`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV6("h2", {
+                className: "text-2xl font-bold",
+                children: "Initialize the database"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("p", {
+                className: "text-muted-foreground",
+                children: "If using Prisma, set up your schema and generate the client:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6(CodeBlock5, {
+                language: "bash",
+                filename: "installation-prisma",
+                code: `bunx prisma init
+# Edit prisma/schema.prisma with your models
+bunx prisma generate
+bunx prisma migrate dev --name init`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "flex items-center gap-4 pt-4",
+            children: /* @__PURE__ */ jsxDEV6(Link6, {
+              href: "/docs/getting-started/hello-world",
+              className: "btn-primary",
+              children: [
+                "Next: First Operation ",
+                /* @__PURE__ */ jsxDEV6(ChevronRight6, {
+                  size: 16
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/getting-started/StartHerePage.tsx
+import Link7 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight7 } from "lucide-react";
+import { CodeBlock as CodeBlock6, InstallCommand as InstallCommand4 } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+function StartHerePage() {
+  return /* @__PURE__ */ jsxDEV7("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV7("h1", {
+            className: "text-4xl font-bold",
+            children: "Start here"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("p", {
+            className: "text-muted-foreground text-lg",
+            children: "A fast onboarding path from install to your first generated contract."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "space-y-6",
+        children: [
+          /* @__PURE__ */ jsxDEV7("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV7("h2", {
+                className: "text-2xl font-bold",
+                children: "Install the CLI"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7(InstallCommand4, {
+                package: "contractspec",
+                dev: true
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV7("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV7("h2", {
+                className: "text-2xl font-bold",
+                children: "Add core libraries"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7(InstallCommand4, {
+                package: [
+                  "@contractspec/lib.contracts",
+                  "@contractspec/lib.schema"
+                ]
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV7("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV7("h2", {
+                className: "text-2xl font-bold",
+                children: "Initialize your project"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7(CodeBlock6, {
+                language: "bash",
+                filename: "start-here-init",
+                code: `bunx contractspec init`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV7("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV7("h2", {
+                className: "text-2xl font-bold",
+                children: "Create your first contract"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7(CodeBlock6, {
+                language: "bash",
+                filename: "start-here-create",
+                code: `contractspec create --type operation`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV7("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV7("h2", {
+                className: "text-2xl font-bold",
+                children: "Generate implementation"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7(CodeBlock6, {
+                language: "bash",
+                filename: "start-here-build",
+                code: `contractspec build src/contracts/mySpec.ts
+contractspec validate src/contracts/mySpec.ts`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "flex flex-wrap items-center gap-3 pt-2",
+        children: [
+          /* @__PURE__ */ jsxDEV7(Link7, {
+            href: "/docs/getting-started/hello-world",
+            className: "btn-primary",
+            children: [
+              "Next: Hello World ",
+              /* @__PURE__ */ jsxDEV7(ChevronRight7, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV7(Link7, {
+            href: "/docs/getting-started/troubleshooting",
+            className: "btn-ghost",
+            children: "Troubleshooting"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7(Link7, {
+            href: "/docs/getting-started/compatibility",
+            className: "btn-ghost",
+            children: "Compatibility"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/getting-started/TroubleshootingPage.tsx
+import Link8 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight8 } from "lucide-react";
+import { CodeBlock as CodeBlock7 } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+function TroubleshootingPage() {
+  return /* @__PURE__ */ jsxDEV8("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV8("h1", {
+            className: "text-4xl font-bold",
+            children: "Troubleshooting"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("p", {
+            className: "text-muted-foreground text-lg",
+            children: "Common issues and fixes when installing or generating with ContractSpec."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "space-y-6",
+        children: [
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "card-subtle space-y-3 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV8("h2", {
+                className: "text-2xl font-bold",
+                children: "Command not found"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("ul", {
+                className: "text-muted-foreground space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV8("li", {
+                    children: "Reinstall the CLI and ensure it is in your PATH."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV8("li", {
+                    children: "Confirm Node.js 20+ or Bun 1.0+ is installed."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "card-subtle space-y-3 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV8("h2", {
+                className: "text-2xl font-bold",
+                children: "Specs not discovered"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("ul", {
+                className: "text-muted-foreground space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV8("li", {
+                    children: [
+                      "Run ",
+                      /* @__PURE__ */ jsxDEV8("code", {
+                        children: "contractspec list"
+                      }, undefined, false, undefined, this),
+                      " to see discovered specs."
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV8("li", {
+                    children: "Verify your spec path conventions in .contractsrc.json."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "card-subtle space-y-3 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV8("h2", {
+                className: "text-2xl font-bold",
+                children: "Build or validate fails"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("ul", {
+                className: "text-muted-foreground space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV8("li", {
+                    children: [
+                      "Run ",
+                      /* @__PURE__ */ jsxDEV8("code", {
+                        children: "contractspec validate"
+                      }, undefined, false, undefined, this),
+                      " to surface schema errors."
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV8("li", {
+                    children: "Check that generated files were not manually edited."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV8("h2", {
+                className: "text-2xl font-bold",
+                children: "Diagnostics"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8(CodeBlock7, {
+                language: "bash",
+                filename: "troubleshooting-diagnostics",
+                code: `contractspec --version
+contractspec list
+contractspec validate src/contracts/mySpec.ts`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "card-subtle space-y-3 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV8("h2", {
+                className: "text-2xl font-bold",
+                children: "Still blocked?"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("ul", {
+                className: "text-muted-foreground space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV8("li", {
+                    children: "Confirm compatibility requirements for runtime and framework."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV8("li", {
+                    children: "Re-run builds on a clean branch to isolate changes."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV8("li", {
+                    children: "Use a new spec and minimal adapter to validate setup."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "flex flex-wrap items-center gap-3 pt-2",
+        children: [
+          /* @__PURE__ */ jsxDEV8(Link8, {
+            href: "/docs/getting-started/start-here",
+            className: "btn-ghost",
+            children: "Start here"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8(Link8, {
+            href: "/docs/getting-started/compatibility",
+            className: "btn-ghost",
+            children: "Compatibility"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8(Link8, {
+            href: "/docs/getting-started/installation",
+            className: "btn-primary",
+            children: [
+              "Next: Installation ",
+              /* @__PURE__ */ jsxDEV8(ChevronRight8, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/getting-started/VSCodeExtensionPage.tsx
+import Link9 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight9, ExternalLink } from "lucide-react";
+import { CodeBlock as CodeBlock8 } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+function VSCodeExtensionPage() {
+  const features = [
+    {
+      category: "Core Functionality",
+      items: [
+        "Real-time validation with instant feedback on spec errors",
+        "Build/Scaffold handlers and components from specs",
+        "Interactive spec creation wizard",
+        "Watch mode for auto-rebuild on changes",
+        "Sync all specs in workspace with one command"
+      ]
+    },
+    {
+      category: "Visual Navigation",
+      items: [
+        "Specs Explorer sidebar with organized tree view",
+        "Dependencies view to visualize spec relationships",
+        "Build Results tracking with history",
+        "Circular dependency detection"
+      ]
+    },
+    {
+      category: "Comparison & Export",
+      items: [
+        "Semantic and text diff between specs",
+        "Git comparison with baseline branches",
+        "OpenAPI 3.1 specification export"
+      ]
+    }
+  ];
+  const commands = [
+    {
+      name: "Create New Spec",
+      description: "Interactive wizard to create specs"
+    },
+    {
+      name: "Validate Current Spec",
+      description: "Validate the currently open spec"
+    },
+    {
+      name: "Build/Scaffold from Current Spec",
+      description: "Generate handler/component"
+    },
+    { name: "Toggle Watch Mode", description: "Auto-rebuild on changes" },
+    { name: "Sync All Specs", description: "Build all specs in workspace" },
+    {
+      name: "Analyze Spec Dependencies",
+      description: "Visualize spec dependencies"
+    },
+    {
+      name: "Compare Specs",
+      description: "Semantic or text diff between specs"
+    },
+    {
+      name: "Export to OpenAPI",
+      description: "Generate OpenAPI specification"
+    }
+  ];
+  return /* @__PURE__ */ jsxDEV9("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV9("h1", {
+            className: "text-4xl font-bold",
+            children: "VS Code Extension"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("p", {
+            className: "text-muted-foreground text-lg",
+            children: "Spec-first development directly in VS Code. Validate, scaffold, and explore your contract specifications with real-time feedback."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "flex flex-wrap gap-3",
+        children: [
+          /* @__PURE__ */ jsxDEV9("a", {
+            href: "https://marketplace.visualstudio.com/items?itemName=lssm.vscode-contractspec",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "btn-primary inline-flex items-center gap-2",
+            children: [
+              "Install Extension ",
+              /* @__PURE__ */ jsxDEV9(ExternalLink, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV9("a", {
+            href: "vscode:extension/lssm.vscode-contractspec",
+            className: "btn-ghost inline-flex items-center gap-2",
+            children: "Open in VS Code"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "space-y-6",
+        children: [
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV9("h2", {
+                className: "text-2xl font-bold",
+                children: "Installation"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9("div", {
+                className: "space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV9("p", {
+                    className: "text-muted-foreground text-sm",
+                    children: [
+                      /* @__PURE__ */ jsxDEV9("strong", {
+                        children: "Option 1:"
+                      }, undefined, false, undefined, this),
+                      " Install from VS Code Marketplace"
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV9(CodeBlock8, {
+                    language: "bash",
+                    code: "code --install-extension lssm.vscode-contractspec"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV9("p", {
+                    className: "text-muted-foreground mt-4 text-sm",
+                    children: [
+                      /* @__PURE__ */ jsxDEV9("strong", {
+                        children: "Option 2:"
+                      }, undefined, false, undefined, this),
+                      ' Search for "ContractSpec" in VS Code Extensions (Ctrl/Cmd+Shift+X)'
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV9("h2", {
+                className: "text-2xl font-bold",
+                children: "Features"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9("div", {
+                className: "grid gap-4 md:grid-cols-3",
+                children: features.map((section) => /* @__PURE__ */ jsxDEV9("div", {
+                  className: "card-subtle space-y-3 p-4",
+                  children: [
+                    /* @__PURE__ */ jsxDEV9("h3", {
+                      className: "font-bold text-violet-400",
+                      children: section.category
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV9("ul", {
+                      className: "space-y-2",
+                      children: section.items.map((item) => /* @__PURE__ */ jsxDEV9("li", {
+                        className: "text-muted-foreground flex items-start gap-2 text-sm",
+                        children: [
+                          /* @__PURE__ */ jsxDEV9("span", {
+                            className: "mt-1 text-violet-400",
+                            children: "-"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV9("span", {
+                            children: item
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, item, true, undefined, this))
+                    }, undefined, false, undefined, this)
+                  ]
+                }, section.category, true, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV9("h2", {
+                className: "text-2xl font-bold",
+                children: "Commands"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "Access commands via Command Palette (Ctrl/Cmd+Shift+P) with prefix",
+                  " ",
+                  /* @__PURE__ */ jsxDEV9("code", {
+                    children: "ContractSpec:"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV9("div", {
+                className: "grid gap-3 md:grid-cols-2",
+                children: commands.map((cmd) => /* @__PURE__ */ jsxDEV9("div", {
+                  className: "card-subtle flex items-center gap-3 p-3",
+                  children: /* @__PURE__ */ jsxDEV9("div", {
+                    className: "flex-1",
+                    children: [
+                      /* @__PURE__ */ jsxDEV9("p", {
+                        className: "font-mono text-sm font-medium",
+                        children: cmd.name
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV9("p", {
+                        className: "text-muted-foreground text-xs",
+                        children: cmd.description
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, cmd.name, false, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV9("h2", {
+                className: "text-2xl font-bold",
+                children: "Sidebar Views"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9("p", {
+                className: "text-muted-foreground",
+                children: "The extension adds a ContractSpec activity bar (icon in sidebar) with three views:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9("div", {
+                className: "grid gap-4 md:grid-cols-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV9("div", {
+                    className: "card-subtle space-y-2 p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV9("h4", {
+                        className: "font-bold",
+                        children: "Specs Explorer"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV9("p", {
+                        className: "text-muted-foreground text-sm",
+                        children: "Browse all specs organized by type. Shows name, version, and stability. Click to open, right-click for actions."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV9("div", {
+                    className: "card-subtle space-y-2 p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV9("h4", {
+                        className: "font-bold",
+                        children: "Dependencies"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV9("p", {
+                        className: "text-muted-foreground text-sm",
+                        children: "Visualize spec relationships. Detect circular dependencies. Navigate to referenced specs."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV9("div", {
+                    className: "card-subtle space-y-2 p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV9("h4", {
+                        className: "font-bold",
+                        children: "Build Results"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV9("p", {
+                        className: "text-muted-foreground text-sm",
+                        children: "Track build history (last 20). Success/failure indicators. Click to open generated files."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV9("h2", {
+                className: "text-2xl font-bold",
+                children: "Getting Started"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9("ol", {
+                className: "text-muted-foreground list-inside list-decimal space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV9("li", {
+                    children: "Install the extension from VS Code Marketplace"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV9("li", {
+                    children: "Open a workspace with ContractSpec files (or create one)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV9("li", {
+                    children: "Start the walkthrough: Help - Welcome - ContractSpec"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV9("li", {
+                    children: [
+                      "Create your first spec: Click ",
+                      /* @__PURE__ */ jsxDEV9("strong", {
+                        children: "+"
+                      }, undefined, false, undefined, this),
+                      " in Specs Explorer or run ",
+                      /* @__PURE__ */ jsxDEV9("code", {
+                        children: "ContractSpec: Create New Spec"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV9("li", {
+                    children: "Build from it: Click the build icon in the editor title bar"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "card-subtle space-y-4 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV9("h3", {
+                className: "font-bold",
+                children: "Configuration"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Configure the extension in VS Code Settings:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9("div", {
+                className: "overflow-x-auto",
+                children: /* @__PURE__ */ jsxDEV9("table", {
+                  className: "text-muted-foreground w-full text-sm",
+                  children: [
+                    /* @__PURE__ */ jsxDEV9("thead", {
+                      children: /* @__PURE__ */ jsxDEV9("tr", {
+                        className: "border-border border-b",
+                        children: [
+                          /* @__PURE__ */ jsxDEV9("th", {
+                            className: "p-2 text-left font-medium",
+                            children: "Setting"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV9("th", {
+                            className: "p-2 text-left font-medium",
+                            children: "Description"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV9("th", {
+                            className: "p-2 text-left font-medium",
+                            children: "Default"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV9("tbody", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV9("tr", {
+                          className: "border-border border-b",
+                          children: [
+                            /* @__PURE__ */ jsxDEV9("td", {
+                              className: "p-2 font-mono text-xs",
+                              children: "validation.onSave"
+                            }, undefined, false, undefined, this),
+                            /* @__PURE__ */ jsxDEV9("td", {
+                              className: "p-2",
+                              children: "Run validation on save"
+                            }, undefined, false, undefined, this),
+                            /* @__PURE__ */ jsxDEV9("td", {
+                              className: "p-2",
+                              children: "true"
+                            }, undefined, false, undefined, this)
+                          ]
+                        }, undefined, true, undefined, this),
+                        /* @__PURE__ */ jsxDEV9("tr", {
+                          className: "border-border border-b",
+                          children: [
+                            /* @__PURE__ */ jsxDEV9("td", {
+                              className: "p-2 font-mono text-xs",
+                              children: "validation.onOpen"
+                            }, undefined, false, undefined, this),
+                            /* @__PURE__ */ jsxDEV9("td", {
+                              className: "p-2",
+                              children: "Run validation on open"
+                            }, undefined, false, undefined, this),
+                            /* @__PURE__ */ jsxDEV9("td", {
+                              className: "p-2",
+                              children: "true"
+                            }, undefined, false, undefined, this)
+                          ]
+                        }, undefined, true, undefined, this),
+                        /* @__PURE__ */ jsxDEV9("tr", {
+                          className: "border-border border-b",
+                          children: [
+                            /* @__PURE__ */ jsxDEV9("td", {
+                              className: "p-2 font-mono text-xs",
+                              children: "api.baseUrl"
+                            }, undefined, false, undefined, this),
+                            /* @__PURE__ */ jsxDEV9("td", {
+                              className: "p-2",
+                              children: "Base URL for ContractSpec API"
+                            }, undefined, false, undefined, this),
+                            /* @__PURE__ */ jsxDEV9("td", {
+                              className: "p-2",
+                              children: "(empty)"
+                            }, undefined, false, undefined, this)
+                          ]
+                        }, undefined, true, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV9(Link9, {
+            href: "/docs/getting-started/tools/cli",
+            className: "btn-ghost",
+            children: "Back: CLI"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Link9, {
+            href: "/docs/specs",
+            className: "btn-primary",
+            children: [
+              "Next: Core Concepts ",
+              /* @__PURE__ */ jsxDEV9(ChevronRight9, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/getting-started/getting-started.docblocks.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
+var gettingStartedDocBlocks = [
+  {
+    id: "docs.getting-started.start-here",
+    title: "Start here",
+    summary: "Fast onboarding path from install to first generated contract.",
+    kind: "usage",
+    visibility: "public",
+    route: "/docs/getting-started/start-here",
+    tags: ["getting-started", "onboarding"],
+    body: `# Start Here
+
+Get ContractSpec running quickly and generate your first contract-backed code.
+
+## 1. Install the CLI
+
+\`\`\`bash
+bun add -D contractspec
+bun add @contractspec/lib.contracts @contractspec/lib.schema
+\`\`\`
+
+## 2. Initialize your project
+
+\`\`\`bash
+bunx contractspec init
+\`\`\`
+
+## 3. Create your first contract
+
+\`\`\`bash
+contractspec create --type operation
+\`\`\`
+
+## 4. Generate implementation
+
+\`\`\`bash
+contractspec build src/contracts/mySpec.ts
+contractspec validate src/contracts/mySpec.ts
+\`\`\`
+
+## Next steps
+
+- Follow the Hello World tutorial for a full walkthrough.
+- Install the VS Code extension for inline validation.
+- Review compatibility notes before deploying to production.
+`
+  },
+  {
+    id: "docs.getting-started.troubleshooting",
+    title: "Troubleshooting",
+    summary: "Resolve common install, spec discovery, and build issues.",
+    kind: "faq",
+    visibility: "public",
+    route: "/docs/getting-started/troubleshooting",
+    tags: ["getting-started", "troubleshooting"],
+    body: `# Troubleshooting
+
+Common issues and quick fixes when getting started with ContractSpec.
+
+## Command not found
+
+- Reinstall the CLI and ensure it is in your PATH.
+- Confirm Node.js 20+ or Bun 1.0+ is installed.
+
+## Specs not discovered
+
+- Run \`contractspec list\` to see discovered specs.
+- Verify your spec path conventions in \`.contractsrc.json\`.
+
+## Build or validate fails
+
+- Run \`contractspec validate\` to surface schema errors.
+- Check that generated files were not manually edited.
+
+## Diagnostics
+
+\`\`\`bash
+contractspec --version
+contractspec list
+contractspec validate src/contracts/mySpec.ts
+\`\`\`
+
+## Still blocked?
+
+- Confirm compatibility requirements (runtime, framework, package manager).
+- Re-run \`contractspec build\` with a clean working tree.
+`
+  },
+  {
+    id: "docs.getting-started.compatibility",
+    title: "Compatibility",
+    summary: "Supported runtimes, frameworks, package managers, and AI modes.",
+    kind: "reference",
+    visibility: "public",
+    route: "/docs/getting-started/compatibility",
+    tags: ["getting-started", "compatibility"],
+    body: `# Compatibility
+
+ContractSpec supports modern TypeScript stacks with spec-first workflows.
+
+## Runtimes
+
+- Node.js 20+
+- Bun 1.0+
+
+## Frameworks
+
+- Next.js 14+ (App Router preferred)
+- Bun + Elysia or other HTTP servers
+
+## Package managers
+
+- bun (recommended)
+- npm
+- yarn
+- pnpm
+
+## AI agent modes
+
+- claude-code
+- openai-codex
+- cursor
+- opencode
+- simple (direct LLM)
+
+## Datastores
+
+- PostgreSQL via Prisma
+- Bring your own adapter for other databases
+`
+  }
+];
+registerDocBlocks(gettingStartedDocBlocks);
+export {
+  VSCodeExtensionPage,
+  TroubleshootingPage,
+  StartHerePage,
+  InstallationPage,
+  HelloWorldPage,
+  DeveloperToolsPage,
+  DataViewTutorialPage,
+  CompatibilityPage,
+  CLIPage
+};