// 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 { jsx, jsxs } from "react/jsx-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__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-2",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "ContractSpec CLI"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground text-lg",
            children: "Command-line interface for creating, building, and validating contract specifications with AI-powered code generation."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-6",
        children: [
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Installation"
              }),
              /* @__PURE__ */ jsx(InstallCommand, {
                package: "contractspec",
                dev: true
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Quick Start"
              }),
              /* @__PURE__ */ jsx(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`
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-4",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Commands"
              }),
              /* @__PURE__ */ jsx("div", {
                className: "grid gap-4",
                children: commands.map((cmd) => /* @__PURE__ */ jsxs("div", {
                  className: "card-subtle space-y-2 p-4",
                  children: [
                    /* @__PURE__ */ jsx("h3", {
                      className: "font-mono font-bold text-violet-400",
                      children: cmd.name
                    }),
                    /* @__PURE__ */ jsx("p", {
                      className: "text-muted-foreground text-sm",
                      children: cmd.description
                    }),
                    /* @__PURE__ */ jsx(CodeBlock, {
                      language: "bash",
                      code: cmd.usage,
                      showCopyButton: false
                    })
                  ]
                }, cmd.name))
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "AI Agent Modes"
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground",
                children: "The CLI supports multiple AI agent modes for different use cases:"
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "grid gap-3 md:grid-cols-2",
                children: [
                  /* @__PURE__ */ jsxs("div", {
                    className: "card-subtle p-4",
                    children: [
                      /* @__PURE__ */ jsx("h4", {
                        className: "font-bold",
                        children: "simple"
                      }),
                      /* @__PURE__ */ jsx("p", {
                        className: "text-muted-foreground text-sm",
                        children: "Direct LLM API calls, fast and straightforward. Best for rapid prototyping."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs("div", {
                    className: "card-subtle p-4",
                    children: [
                      /* @__PURE__ */ jsx("h4", {
                        className: "font-bold",
                        children: "claude-code"
                      }),
                      /* @__PURE__ */ jsx("p", {
                        className: "text-muted-foreground text-sm",
                        children: "Extended thinking with Claude. Best for production-quality code."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs("div", {
                    className: "card-subtle p-4",
                    children: [
                      /* @__PURE__ */ jsx("h4", {
                        className: "font-bold",
                        children: "openai-codex"
                      }),
                      /* @__PURE__ */ jsx("p", {
                        className: "text-muted-foreground text-sm",
                        children: "GPT-4o/o1 models. Excellent for algorithms and optimization."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs("div", {
                    className: "card-subtle p-4",
                    children: [
                      /* @__PURE__ */ jsx("h4", {
                        className: "font-bold",
                        children: "cursor"
                      }),
                      /* @__PURE__ */ jsx("p", {
                        className: "text-muted-foreground text-sm",
                        children: "Leverages Cursor agentic capabilities. Requires Cursor environment."
                      })
                    ]
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "CI/CD Integration"
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground",
                children: "Run all validation checks in CI/CD with machine-readable output:"
              }),
              /* @__PURE__ */ jsx(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`
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "card-subtle space-y-4 p-6",
            children: [
              /* @__PURE__ */ jsx("h3", {
                className: "font-bold",
                children: "Configuration"
              }),
              /* @__PURE__ */ jsxs("p", {
                className: "text-muted-foreground text-sm",
                children: [
                  "Create a ",
                  /* @__PURE__ */ jsx("code", {
                    children: ".contractsrc.json"
                  }),
                  " file in your project root:"
                ]
              }),
              /* @__PURE__ */ jsx(CodeBlock, {
                language: "json",
                filename: ".contractsrc.json",
                code: `{
  "aiProvider": "claude",
  "agentMode": "claude-code",
  "outputDir": "./src",
  "conventions": {
    "operations": "interactions/commands|queries",
    "events": "events"
  }
}`
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/getting-started/tools/vscode",
            className: "btn-primary",
            children: [
              "Next: VS Code Extension ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          }),
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/getting-started/tools",
            className: "btn-ghost",
            children: "Back to Tools"
          })
        ]
      })
    ]
  });
}

// src/components/docs/getting-started/CompatibilityPage.tsx
import Link2 from "@contractspec/lib.ui-link";
import { ChevronRight as ChevronRight2 } from "lucide-react";
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
function CompatibilityPage() {
  return /* @__PURE__ */ jsxs2("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs2("div", {
        className: "space-y-2",
        children: [
          /* @__PURE__ */ jsx2("h1", {
            className: "text-4xl font-bold",
            children: "Compatibility"
          }),
          /* @__PURE__ */ jsx2("p", {
            className: "text-muted-foreground text-lg",
            children: "Supported runtimes, frameworks, and agent modes for ContractSpec."
          })
        ]
      }),
      /* @__PURE__ */ jsxs2("div", {
        className: "space-y-6",
        children: [
          /* @__PURE__ */ jsxs2("div", {
            className: "card-subtle space-y-3 p-6",
            children: [
              /* @__PURE__ */ jsx2("h2", {
                className: "text-2xl font-bold",
                children: "Runtimes"
              }),
              /* @__PURE__ */ jsxs2("ul", {
                className: "text-muted-foreground space-y-2",
                children: [
                  /* @__PURE__ */ jsx2("li", {
                    children: "Node.js 20+"
                  }),
                  /* @__PURE__ */ jsx2("li", {
                    children: "Bun 1.0+"
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs2("div", {
            className: "card-subtle space-y-3 p-6",
            children: [
              /* @__PURE__ */ jsx2("h2", {
                className: "text-2xl font-bold",
                children: "Frameworks"
              }),
              /* @__PURE__ */ jsxs2("ul", {
                className: "text-muted-foreground space-y-2",
                children: [
                  /* @__PURE__ */ jsx2("li", {
                    children: "Next.js 14+ (App Router preferred)"
                  }),
                  /* @__PURE__ */ jsx2("li", {
                    children: "Bun + Elysia or compatible HTTP servers"
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs2("div", {
            className: "card-subtle space-y-3 p-6",
            children: [
              /* @__PURE__ */ jsx2("h2", {
                className: "text-2xl font-bold",
                children: "Package managers"
              }),
              /* @__PURE__ */ jsxs2("ul", {
                className: "text-muted-foreground space-y-2",
                children: [
                  /* @__PURE__ */ jsx2("li", {
                    children: "bun (recommended)"
                  }),
                  /* @__PURE__ */ jsx2("li", {
                    children: "npm"
                  }),
                  /* @__PURE__ */ jsx2("li", {
                    children: "pnpm"
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs2("div", {
            className: "card-subtle space-y-3 p-6",
            children: [
              /* @__PURE__ */ jsx2("h2", {
                className: "text-2xl font-bold",
                children: "AI agent modes"
              }),
              /* @__PURE__ */ jsxs2("ul", {
                className: "text-muted-foreground space-y-2",
                children: [
                  /* @__PURE__ */ jsx2("li", {
                    children: "claude-code"
                  }),
                  /* @__PURE__ */ jsx2("li", {
                    children: "openai-codex"
                  }),
                  /* @__PURE__ */ jsx2("li", {
                    children: "cursor"
                  }),
                  /* @__PURE__ */ jsx2("li", {
                    children: "opencode"
                  }),
                  /* @__PURE__ */ jsx2("li", {
                    children: "simple (direct LLM)"
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs2("div", {
            className: "card-subtle space-y-3 p-6",
            children: [
              /* @__PURE__ */ jsx2("h2", {
                className: "text-2xl font-bold",
                children: "Datastores"
              }),
              /* @__PURE__ */ jsx2("p", {
                className: "text-muted-foreground",
                children: "ContractSpec ships with Prisma-friendly defaults and can integrate with custom adapters for other databases."
              }),
              /* @__PURE__ */ jsxs2("ul", {
                className: "text-muted-foreground space-y-2",
                children: [
                  /* @__PURE__ */ jsx2("li", {
                    children: "PostgreSQL via Prisma"
                  }),
                  /* @__PURE__ */ jsx2("li", {
                    children: "Custom adapters for other SQL/NoSQL stores"
                  })
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs2("div", {
        className: "flex flex-wrap items-center gap-3 pt-2",
        children: [
          /* @__PURE__ */ jsx2(Link2, {
            href: "/docs/getting-started/start-here",
            className: "btn-ghost",
            children: "Start here"
          }),
          /* @__PURE__ */ jsx2(Link2, {
            href: "/docs/getting-started/troubleshooting",
            className: "btn-ghost",
            children: "Troubleshooting"
          }),
          /* @__PURE__ */ jsxs2(Link2, {
            href: "/docs/getting-started/installation",
            className: "btn-primary",
            children: [
              "Next: Installation ",
              /* @__PURE__ */ jsx2(ChevronRight2, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}

// 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 { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
function DataViewTutorialPage() {
  return /* @__PURE__ */ jsxs3("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs3("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx3("h1", {
            className: "text-4xl font-bold",
            children: "Display Data with DataViews"
          }),
          /* @__PURE__ */ jsx3("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."
          })
        ]
      }),
      /* @__PURE__ */ jsxs3("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx3("h2", {
            className: "text-2xl font-bold",
            children: "1. Define the underlying query"
          }),
          /* @__PURE__ */ jsx3("p", {
            className: "text-muted-foreground",
            children: "First, create a query operation to fetch the data:"
          }),
          /* @__PURE__ */ jsx3(CodeBlock2, {
            language: "typescript",
            filename: "lib/specs/billing/list-transactions.ts",
            code: `import { defineQuery } from '@contractspec/lib.contracts-spec';

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' },
});`
          })
        ]
      }),
      /* @__PURE__ */ jsxs3("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx3("h2", {
            className: "text-2xl font-bold",
            children: "2. Define the DataView spec"
          }),
          /* @__PURE__ */ jsx3("p", {
            className: "text-muted-foreground",
            children: "Wrap your query with presentation metadata:"
          }),
          /* @__PURE__ */ jsx3(CodeBlock2, {
            language: "typescript",
            filename: "lib/specs/billing/transaction-history.data-view.ts",
            code: `import { defineDataView } from '@contractspec/lib.contracts-spec';
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 },
  },
});`
          })
        ]
      }),
      /* @__PURE__ */ jsxs3("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx3("h2", {
            className: "text-2xl font-bold",
            children: "3. Render on the frontend"
          }),
          /* @__PURE__ */ jsx3("p", {
            className: "text-muted-foreground",
            children: "Use the runtime renderer in your React or React Native app:"
          }),
          /* @__PURE__ */ jsx3(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>
  );
}`
          })
        ]
      }),
      /* @__PURE__ */ jsxs3("div", {
        className: "card-subtle space-y-4 p-6",
        children: [
          /* @__PURE__ */ jsx3("h3", {
            className: "font-bold",
            children: "Why DataViews?"
          }),
          /* @__PURE__ */ jsxs3("ul", {
            className: "text-muted-foreground space-y-2 text-sm",
            children: [
              /* @__PURE__ */ jsx3("li", {
                children: "Same spec renders on web (React) and mobile (React Native)"
              }),
              /* @__PURE__ */ jsx3("li", {
                children: "Filters, sorting, and pagination handled automatically"
              }),
              /* @__PURE__ */ jsx3("li", {
                children: "Format rules (currency, dates, badges) applied consistently"
              }),
              /* @__PURE__ */ jsx3("li", {
                children: "Export to CSV/PDF using the same spec"
              }),
              /* @__PURE__ */ jsx3("li", {
                children: "A/B test different layouts without touching the backend"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs3("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsxs3(Link3, {
            href: "/docs/libraries/data-views",
            className: "btn-primary",
            children: [
              "DataView API Reference ",
              /* @__PURE__ */ jsx3(ChevronRight3, {
                size: 16
              })
            ]
          }),
          /* @__PURE__ */ jsx3(Link3, {
            href: "/docs/specs/workflows",
            className: "btn-ghost",
            children: "Next: Workflows"
          })
        ]
      })
    ]
  });
}

// 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 { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-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: "AI-powered product decision engine that turns product signals into spec-first deliverables.",
      icon: Layers,
      status: "available",
      highlights: [
        "Evidence-to-decision loop",
        "Compiled spec diffs and task packs",
        "Exports to Linear, Jira, Notion, and GitHub"
      ]
    },
    {
      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__ */ jsxs4("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs4("div", {
        className: "space-y-2",
        children: [
          /* @__PURE__ */ jsx4("h1", {
            className: "text-4xl font-bold",
            children: "Developer Tools"
          }),
          /* @__PURE__ */ jsx4("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."
          })
        ]
      }),
      /* @__PURE__ */ jsx4("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__ */ jsxs4("div", {
            className: `card-subtle relative space-y-4 p-6 ${isComingSoon ? "opacity-75" : ""}`,
            children: [
              isComingSoon && /* @__PURE__ */ jsx4("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"
              }),
              /* @__PURE__ */ jsxs4("div", {
                className: "flex items-center gap-3",
                children: [
                  /* @__PURE__ */ jsx4("div", {
                    className: "flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10",
                    children: /* @__PURE__ */ jsx4(IconComponent, {
                      className: "h-5 w-5 text-violet-400"
                    })
                  }),
                  /* @__PURE__ */ jsx4("h3", {
                    className: "text-lg font-bold",
                    children: tool.name
                  })
                ]
              }),
              /* @__PURE__ */ jsx4("p", {
                className: "text-muted-foreground text-sm",
                children: tool.description
              }),
              /* @__PURE__ */ jsx4("ul", {
                className: "space-y-1",
                children: tool.highlights.map((highlight) => /* @__PURE__ */ jsxs4("li", {
                  className: "text-muted-foreground flex items-center gap-2 text-sm",
                  children: [
                    /* @__PURE__ */ jsx4("span", {
                      className: "text-violet-400",
                      children: "-"
                    }),
                    highlight
                  ]
                }, highlight))
              }),
              !isComingSoon && /* @__PURE__ */ jsxs4(Link4, {
                href: tool.href,
                className: "btn-ghost inline-flex items-center gap-1 text-sm",
                children: [
                  "Learn more ",
                  /* @__PURE__ */ jsx4(ChevronRight4, {
                    size: 14
                  })
                ]
              })
            ]
          }, tool.name);
        })
      }),
      /* @__PURE__ */ jsxs4("div", {
        className: "card-subtle space-y-4 p-6",
        children: [
          /* @__PURE__ */ jsx4("h3", {
            className: "font-bold",
            children: "Quick Install"
          }),
          /* @__PURE__ */ jsxs4("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsxs4("div", {
                children: [
                  /* @__PURE__ */ jsx4("p", {
                    className: "text-muted-foreground mb-2 text-xs font-medium",
                    children: "CLI"
                  }),
                  /* @__PURE__ */ jsx4(InstallCommand2, {
                    package: "contractspec",
                    dev: true
                  })
                ]
              }),
              /* @__PURE__ */ jsxs4("div", {
                children: [
                  /* @__PURE__ */ jsx4("p", {
                    className: "text-muted-foreground mb-2 text-xs font-medium",
                    children: "VS Code Extension"
                  }),
                  /* @__PURE__ */ jsx4(CodeBlock3, {
                    language: "bash",
                    code: "code --install-extension lssm.vscode-contractspec"
                  })
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs4("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsxs4(Link4, {
            href: "/docs/getting-started/tools/cli",
            className: "btn-primary",
            children: [
              "Get Started with CLI ",
              /* @__PURE__ */ jsx4(ChevronRight4, {
                size: 16
              })
            ]
          }),
          /* @__PURE__ */ jsx4(Link4, {
            href: "/docs/getting-started/tools/vscode",
            className: "btn-ghost",
            children: "VS Code Extension"
          })
        ]
      })
    ]
  });
}

// 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 { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
function HelloWorldPage() {
  return /* @__PURE__ */ jsxs5("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs5("div", {
        className: "space-y-2",
        children: [
          /* @__PURE__ */ jsx5("h1", {
            className: "text-4xl font-bold",
            children: "Your First Operation"
          }),
          /* @__PURE__ */ jsx5("p", {
            className: "text-muted-foreground text-lg",
            children: "Build a payment capture operation with policy enforcement in under 10 minutes."
          })
        ]
      }),
      /* @__PURE__ */ jsxs5("div", {
        className: "space-y-6",
        children: [
          /* @__PURE__ */ jsxs5("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx5("h2", {
                className: "text-2xl font-bold",
                children: "What you'll build"
              }),
              /* @__PURE__ */ jsx5("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."
              })
            ]
          }),
          /* @__PURE__ */ jsxs5("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx5("h2", {
                className: "text-2xl font-bold",
                children: "1. Define the operation spec"
              }),
              /* @__PURE__ */ jsxs5("p", {
                className: "text-muted-foreground",
                children: [
                  "Create ",
                  /* @__PURE__ */ jsx5("code", {
                    children: "lib/specs/billing/capture-payment.ts"
                  }),
                  ":"
                ]
              }),
              /* @__PURE__ */ jsx5(CodeBlock4, {
                language: "typescript",
                filename: "lib/specs/billing/capture-payment.ts",
                code: `import { defineCommand } from '@contractspec/lib.contracts-spec';
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' },
    ],
  },
});`
              })
            ]
          }),
          /* @__PURE__ */ jsxs5("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx5("h2", {
                className: "text-2xl font-bold",
                children: "2. Implement the handler"
              }),
              /* @__PURE__ */ jsxs5("p", {
                className: "text-muted-foreground",
                children: [
                  "Create ",
                  /* @__PURE__ */ jsx5("code", {
                    children: "lib/handlers/billing/capture-payment.ts"
                  }),
                  ":"
                ]
              }),
              /* @__PURE__ */ jsx5(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,
  };
}`
              })
            ]
          }),
          /* @__PURE__ */ jsxs5("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx5("h2", {
                className: "text-2xl font-bold",
                children: "3. Register and serve"
              }),
              /* @__PURE__ */ jsxs5("p", {
                className: "text-muted-foreground",
                children: [
                  "Wire it up in ",
                  /* @__PURE__ */ jsx5("code", {
                    children: "lib/registry.ts"
                  }),
                  " and",
                  " ",
                  /* @__PURE__ */ jsx5("code", {
                    children: "app/api/ops/[...route]/route.ts"
                  }),
                  ":"
                ]
              }),
              /* @__PURE__ */ jsx5(CodeBlock4, {
                language: "typescript",
                filename: "lib/registry.ts",
                code: `import { OperationSpecRegistry, installOp } from '@contractspec/lib.contracts-spec';
import { CapturePayment } from './specs/billing/capture-payment';
import { handleCapturePayment } from './handlers/billing/capture-payment';

export const registry = new OperationSpecRegistry();
installOp(registry, CapturePayment, handleCapturePayment);`
              }),
              /* @__PURE__ */ jsx5(CodeBlock4, {
                language: "typescript",
                filename: "app/api/ops/[...route]/route.ts",
                code: `import { makeNextAppHandler } from '@contractspec/lib.contracts-runtime-server-rest/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 };`
              })
            ]
          }),
          /* @__PURE__ */ jsxs5("div", {
            className: "card-subtle space-y-4 p-6",
            children: [
              /* @__PURE__ */ jsx5("h3", {
                className: "font-bold",
                children: "What you just built:"
              }),
              /* @__PURE__ */ jsxs5("ul", {
                className: "text-muted-foreground space-y-2 text-sm",
                children: [
                  /* @__PURE__ */ jsxs5("li", {
                    children: [
                      "Type-safe API endpoint at",
                      " ",
                      /* @__PURE__ */ jsx5("code", {
                        children: "/api/ops/billing.capturePayment"
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsx5("li", {
                    children: "Automatic input validation (amount must be positive, IDs required)"
                  }),
                  /* @__PURE__ */ jsx5("li", {
                    children: "Policy enforcement—only invoice owner can pay"
                  }),
                  /* @__PURE__ */ jsx5("li", {
                    children: "Stripe integration with error handling"
                  }),
                  /* @__PURE__ */ jsx5("li", {
                    children: "Database transaction with audit trail"
                  }),
                  /* @__PURE__ */ jsx5("li", {
                    children: "Same spec works with GraphQL, MCP, or webhooks"
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsx5("div", {
            className: "flex items-center gap-4 pt-4",
            children: /* @__PURE__ */ jsxs5(Link5, {
              href: "/docs/getting-started/dataviews",
              className: "btn-primary",
              children: [
                "Next: Display Data with DataViews ",
                /* @__PURE__ */ jsx5(ChevronRight5, {
                  size: 16
                })
              ]
            })
          })
        ]
      })
    ]
  });
}

// 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 { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
function InstallationPage() {
  return /* @__PURE__ */ jsxs6("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs6("div", {
        className: "space-y-2",
        children: [
          /* @__PURE__ */ jsx6("h1", {
            className: "text-4xl font-bold",
            children: "Installation"
          }),
          /* @__PURE__ */ jsx6("p", {
            className: "text-muted-foreground text-lg",
            children: "Add ContractSpec to your existing Next.js or Bun project, or start fresh."
          })
        ]
      }),
      /* @__PURE__ */ jsxs6("div", {
        className: "space-y-6",
        children: [
          /* @__PURE__ */ jsxs6("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx6("h2", {
                className: "text-2xl font-bold",
                children: "Prerequisites"
              }),
              /* @__PURE__ */ jsxs6("ul", {
                className: "text-muted-foreground space-y-2",
                children: [
                  /* @__PURE__ */ jsx6("li", {
                    children: "Node.js 20+ (or Bun 1.0+)"
                  }),
                  /* @__PURE__ */ jsx6("li", {
                    children: "Existing Next.js app or Bun HTTP server"
                  }),
                  /* @__PURE__ */ jsx6("li", {
                    children: "PostgreSQL database (for persistence)"
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs6("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx6("h2", {
                className: "text-2xl font-bold",
                children: "Install Core Libraries"
              }),
              /* @__PURE__ */ jsx6("p", {
                className: "text-muted-foreground",
                children: "Add the contracts runtime and your choice of adapter:"
              }),
              /* @__PURE__ */ jsx6(InstallCommand3, {
                package: [
                  "@contractspec/lib.contracts-spec",
                  "@contractspec/lib.schema"
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs6("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx6("h2", {
                className: "text-2xl font-bold",
                children: "For Next.js projects"
              }),
              /* @__PURE__ */ jsx6(InstallCommand3, {
                package: "@contractspec/lib.contracts-spec"
              })
            ]
          }),
          /* @__PURE__ */ jsxs6("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx6("h2", {
                className: "text-2xl font-bold",
                children: "For database models"
              }),
              /* @__PURE__ */ jsx6(InstallCommand3, {
                package: [
                  "@contractspec/app.cli-database",
                  "prisma",
                  "@prisma/client"
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs6("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx6("h2", {
                className: "text-2xl font-bold",
                children: "Set up your project"
              }),
              /* @__PURE__ */ jsx6("p", {
                className: "text-muted-foreground",
                children: "Initialize a new ContractSpec project structure:"
              }),
              /* @__PURE__ */ jsx6(CodeBlock5, {
                language: "bash",
                filename: "installation-init",
                code: `bunx contractspec init
# Follow the interactive prompts to configure your project`
              })
            ]
          }),
          /* @__PURE__ */ jsxs6("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx6("h2", {
                className: "text-2xl font-bold",
                children: "Initialize the database"
              }),
              /* @__PURE__ */ jsx6("p", {
                className: "text-muted-foreground",
                children: "If using Prisma, set up your schema and generate the client:"
              }),
              /* @__PURE__ */ jsx6(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`
              })
            ]
          }),
          /* @__PURE__ */ jsx6("div", {
            className: "flex items-center gap-4 pt-4",
            children: /* @__PURE__ */ jsxs6(Link6, {
              href: "/docs/getting-started/hello-world",
              className: "btn-primary",
              children: [
                "Next: First Operation ",
                /* @__PURE__ */ jsx6(ChevronRight6, {
                  size: 16
                })
              ]
            })
          })
        ]
      })
    ]
  });
}

// 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 { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
function StartHerePage() {
  return /* @__PURE__ */ jsxs7("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs7("div", {
        className: "space-y-2",
        children: [
          /* @__PURE__ */ jsx7("h1", {
            className: "text-4xl font-bold",
            children: "Start here"
          }),
          /* @__PURE__ */ jsx7("p", {
            className: "text-muted-foreground text-lg",
            children: "A fast onboarding path from install to your first generated contract."
          })
        ]
      }),
      /* @__PURE__ */ jsxs7("div", {
        className: "space-y-6",
        children: [
          /* @__PURE__ */ jsxs7("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx7("h2", {
                className: "text-2xl font-bold",
                children: "Install the CLI"
              }),
              /* @__PURE__ */ jsx7(InstallCommand4, {
                package: "contractspec",
                dev: true
              })
            ]
          }),
          /* @__PURE__ */ jsxs7("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx7("h2", {
                className: "text-2xl font-bold",
                children: "Add core libraries"
              }),
              /* @__PURE__ */ jsx7(InstallCommand4, {
                package: [
                  "@contractspec/lib.contracts-spec",
                  "@contractspec/lib.schema"
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs7("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx7("h2", {
                className: "text-2xl font-bold",
                children: "Initialize your project"
              }),
              /* @__PURE__ */ jsx7(CodeBlock6, {
                language: "bash",
                filename: "start-here-init",
                code: `bunx contractspec init`
              })
            ]
          }),
          /* @__PURE__ */ jsxs7("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx7("h2", {
                className: "text-2xl font-bold",
                children: "Create your first contract"
              }),
              /* @__PURE__ */ jsx7(CodeBlock6, {
                language: "bash",
                filename: "start-here-create",
                code: `contractspec create --type operation`
              })
            ]
          }),
          /* @__PURE__ */ jsxs7("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx7("h2", {
                className: "text-2xl font-bold",
                children: "Generate implementation"
              }),
              /* @__PURE__ */ jsx7(CodeBlock6, {
                language: "bash",
                filename: "start-here-build",
                code: `contractspec build src/contracts/mySpec.ts
contractspec validate src/contracts/mySpec.ts`
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs7("div", {
        className: "flex flex-wrap items-center gap-3 pt-2",
        children: [
          /* @__PURE__ */ jsxs7(Link7, {
            href: "/docs/getting-started/hello-world",
            className: "btn-primary",
            children: [
              "Next: Hello World ",
              /* @__PURE__ */ jsx7(ChevronRight7, {
                size: 16
              })
            ]
          }),
          /* @__PURE__ */ jsx7(Link7, {
            href: "/docs/getting-started/troubleshooting",
            className: "btn-ghost",
            children: "Troubleshooting"
          }),
          /* @__PURE__ */ jsx7(Link7, {
            href: "/docs/getting-started/compatibility",
            className: "btn-ghost",
            children: "Compatibility"
          })
        ]
      })
    ]
  });
}

// 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 { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
function TroubleshootingPage() {
  return /* @__PURE__ */ jsxs8("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs8("div", {
        className: "space-y-2",
        children: [
          /* @__PURE__ */ jsx8("h1", {
            className: "text-4xl font-bold",
            children: "Troubleshooting"
          }),
          /* @__PURE__ */ jsx8("p", {
            className: "text-muted-foreground text-lg",
            children: "Common issues and fixes when installing or generating with ContractSpec."
          })
        ]
      }),
      /* @__PURE__ */ jsxs8("div", {
        className: "space-y-6",
        children: [
          /* @__PURE__ */ jsxs8("div", {
            className: "card-subtle space-y-3 p-6",
            children: [
              /* @__PURE__ */ jsx8("h2", {
                className: "text-2xl font-bold",
                children: "Command not found"
              }),
              /* @__PURE__ */ jsxs8("ul", {
                className: "text-muted-foreground space-y-2",
                children: [
                  /* @__PURE__ */ jsx8("li", {
                    children: "Reinstall the CLI and ensure it is in your PATH."
                  }),
                  /* @__PURE__ */ jsx8("li", {
                    children: "Confirm Node.js 20+ or Bun 1.0+ is installed."
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs8("div", {
            className: "card-subtle space-y-3 p-6",
            children: [
              /* @__PURE__ */ jsx8("h2", {
                className: "text-2xl font-bold",
                children: "Specs not discovered"
              }),
              /* @__PURE__ */ jsxs8("ul", {
                className: "text-muted-foreground space-y-2",
                children: [
                  /* @__PURE__ */ jsxs8("li", {
                    children: [
                      "Run ",
                      /* @__PURE__ */ jsx8("code", {
                        children: "contractspec list"
                      }),
                      " to see discovered specs."
                    ]
                  }),
                  /* @__PURE__ */ jsx8("li", {
                    children: "Verify your spec path conventions in .contractsrc.json."
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs8("div", {
            className: "card-subtle space-y-3 p-6",
            children: [
              /* @__PURE__ */ jsx8("h2", {
                className: "text-2xl font-bold",
                children: "Build or validate fails"
              }),
              /* @__PURE__ */ jsxs8("ul", {
                className: "text-muted-foreground space-y-2",
                children: [
                  /* @__PURE__ */ jsxs8("li", {
                    children: [
                      "Run ",
                      /* @__PURE__ */ jsx8("code", {
                        children: "contractspec validate"
                      }),
                      " to surface schema errors."
                    ]
                  }),
                  /* @__PURE__ */ jsx8("li", {
                    children: "Check that generated files were not manually edited."
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs8("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx8("h2", {
                className: "text-2xl font-bold",
                children: "Diagnostics"
              }),
              /* @__PURE__ */ jsx8(CodeBlock7, {
                language: "bash",
                filename: "troubleshooting-diagnostics",
                code: `contractspec --version
contractspec list
contractspec validate src/contracts/mySpec.ts`
              })
            ]
          }),
          /* @__PURE__ */ jsxs8("div", {
            className: "card-subtle space-y-3 p-6",
            children: [
              /* @__PURE__ */ jsx8("h2", {
                className: "text-2xl font-bold",
                children: "Still blocked?"
              }),
              /* @__PURE__ */ jsxs8("ul", {
                className: "text-muted-foreground space-y-2",
                children: [
                  /* @__PURE__ */ jsx8("li", {
                    children: "Confirm compatibility requirements for runtime and framework."
                  }),
                  /* @__PURE__ */ jsx8("li", {
                    children: "Re-run builds on a clean branch to isolate changes."
                  }),
                  /* @__PURE__ */ jsx8("li", {
                    children: "Use a new spec and minimal adapter to validate setup."
                  })
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs8("div", {
        className: "flex flex-wrap items-center gap-3 pt-2",
        children: [
          /* @__PURE__ */ jsx8(Link8, {
            href: "/docs/getting-started/start-here",
            className: "btn-ghost",
            children: "Start here"
          }),
          /* @__PURE__ */ jsx8(Link8, {
            href: "/docs/getting-started/compatibility",
            className: "btn-ghost",
            children: "Compatibility"
          }),
          /* @__PURE__ */ jsxs8(Link8, {
            href: "/docs/getting-started/installation",
            className: "btn-primary",
            children: [
              "Next: Installation ",
              /* @__PURE__ */ jsx8(ChevronRight8, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}

// 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 { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-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__ */ jsxs9("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs9("div", {
        className: "space-y-2",
        children: [
          /* @__PURE__ */ jsx9("h1", {
            className: "text-4xl font-bold",
            children: "VS Code Extension"
          }),
          /* @__PURE__ */ jsx9("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."
          })
        ]
      }),
      /* @__PURE__ */ jsxs9("div", {
        className: "flex flex-wrap gap-3",
        children: [
          /* @__PURE__ */ jsxs9("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__ */ jsx9(ExternalLink, {
                size: 16
              })
            ]
          }),
          /* @__PURE__ */ jsx9("a", {
            href: "vscode:extension/lssm.vscode-contractspec",
            className: "btn-ghost inline-flex items-center gap-2",
            children: "Open in VS Code"
          })
        ]
      }),
      /* @__PURE__ */ jsxs9("div", {
        className: "space-y-6",
        children: [
          /* @__PURE__ */ jsxs9("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx9("h2", {
                className: "text-2xl font-bold",
                children: "Installation"
              }),
              /* @__PURE__ */ jsxs9("div", {
                className: "space-y-2",
                children: [
                  /* @__PURE__ */ jsxs9("p", {
                    className: "text-muted-foreground text-sm",
                    children: [
                      /* @__PURE__ */ jsx9("strong", {
                        children: "Option 1:"
                      }),
                      " Install from VS Code Marketplace"
                    ]
                  }),
                  /* @__PURE__ */ jsx9(CodeBlock8, {
                    language: "bash",
                    code: "code --install-extension lssm.vscode-contractspec"
                  }),
                  /* @__PURE__ */ jsxs9("p", {
                    className: "text-muted-foreground mt-4 text-sm",
                    children: [
                      /* @__PURE__ */ jsx9("strong", {
                        children: "Option 2:"
                      }),
                      ' Search for "ContractSpec" in VS Code Extensions (Ctrl/Cmd+Shift+X)'
                    ]
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs9("div", {
            className: "space-y-4",
            children: [
              /* @__PURE__ */ jsx9("h2", {
                className: "text-2xl font-bold",
                children: "Features"
              }),
              /* @__PURE__ */ jsx9("div", {
                className: "grid gap-4 md:grid-cols-3",
                children: features.map((section) => /* @__PURE__ */ jsxs9("div", {
                  className: "card-subtle space-y-3 p-4",
                  children: [
                    /* @__PURE__ */ jsx9("h3", {
                      className: "font-bold text-violet-400",
                      children: section.category
                    }),
                    /* @__PURE__ */ jsx9("ul", {
                      className: "space-y-2",
                      children: section.items.map((item) => /* @__PURE__ */ jsxs9("li", {
                        className: "text-muted-foreground flex items-start gap-2 text-sm",
                        children: [
                          /* @__PURE__ */ jsx9("span", {
                            className: "mt-1 text-violet-400",
                            children: "-"
                          }),
                          /* @__PURE__ */ jsx9("span", {
                            children: item
                          })
                        ]
                      }, item))
                    })
                  ]
                }, section.category))
              })
            ]
          }),
          /* @__PURE__ */ jsxs9("div", {
            className: "space-y-4",
            children: [
              /* @__PURE__ */ jsx9("h2", {
                className: "text-2xl font-bold",
                children: "Commands"
              }),
              /* @__PURE__ */ jsxs9("p", {
                className: "text-muted-foreground",
                children: [
                  "Access commands via Command Palette (Ctrl/Cmd+Shift+P) with prefix",
                  " ",
                  /* @__PURE__ */ jsx9("code", {
                    children: "ContractSpec:"
                  })
                ]
              }),
              /* @__PURE__ */ jsx9("div", {
                className: "grid gap-3 md:grid-cols-2",
                children: commands.map((cmd) => /* @__PURE__ */ jsx9("div", {
                  className: "card-subtle flex items-center gap-3 p-3",
                  children: /* @__PURE__ */ jsxs9("div", {
                    className: "flex-1",
                    children: [
                      /* @__PURE__ */ jsx9("p", {
                        className: "font-mono text-sm font-medium",
                        children: cmd.name
                      }),
                      /* @__PURE__ */ jsx9("p", {
                        className: "text-muted-foreground text-xs",
                        children: cmd.description
                      })
                    ]
                  })
                }, cmd.name))
              })
            ]
          }),
          /* @__PURE__ */ jsxs9("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx9("h2", {
                className: "text-2xl font-bold",
                children: "Sidebar Views"
              }),
              /* @__PURE__ */ jsx9("p", {
                className: "text-muted-foreground",
                children: "The extension adds a ContractSpec activity bar (icon in sidebar) with three views:"
              }),
              /* @__PURE__ */ jsxs9("div", {
                className: "grid gap-4 md:grid-cols-3",
                children: [
                  /* @__PURE__ */ jsxs9("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx9("h4", {
                        className: "font-bold",
                        children: "Specs Explorer"
                      }),
                      /* @__PURE__ */ jsx9("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."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs9("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx9("h4", {
                        className: "font-bold",
                        children: "Dependencies"
                      }),
                      /* @__PURE__ */ jsx9("p", {
                        className: "text-muted-foreground text-sm",
                        children: "Visualize spec relationships. Detect circular dependencies. Navigate to referenced specs."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs9("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx9("h4", {
                        className: "font-bold",
                        children: "Build Results"
                      }),
                      /* @__PURE__ */ jsx9("p", {
                        className: "text-muted-foreground text-sm",
                        children: "Track build history (last 20). Success/failure indicators. Click to open generated files."
                      })
                    ]
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs9("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx9("h2", {
                className: "text-2xl font-bold",
                children: "Getting Started"
              }),
              /* @__PURE__ */ jsxs9("ol", {
                className: "text-muted-foreground list-inside list-decimal space-y-2",
                children: [
                  /* @__PURE__ */ jsx9("li", {
                    children: "Install the extension from VS Code Marketplace"
                  }),
                  /* @__PURE__ */ jsx9("li", {
                    children: "Open a workspace with ContractSpec files (or create one)"
                  }),
                  /* @__PURE__ */ jsx9("li", {
                    children: "Start the walkthrough: Help - Welcome - ContractSpec"
                  }),
                  /* @__PURE__ */ jsxs9("li", {
                    children: [
                      "Create your first spec: Click ",
                      /* @__PURE__ */ jsx9("strong", {
                        children: "+"
                      }),
                      " in Specs Explorer or run ",
                      /* @__PURE__ */ jsx9("code", {
                        children: "ContractSpec: Create New Spec"
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsx9("li", {
                    children: "Build from it: Click the build icon in the editor title bar"
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs9("div", {
            className: "card-subtle space-y-4 p-6",
            children: [
              /* @__PURE__ */ jsx9("h3", {
                className: "font-bold",
                children: "Configuration"
              }),
              /* @__PURE__ */ jsx9("p", {
                className: "text-muted-foreground text-sm",
                children: "Configure the extension in VS Code Settings:"
              }),
              /* @__PURE__ */ jsx9("div", {
                className: "overflow-x-auto",
                children: /* @__PURE__ */ jsxs9("table", {
                  className: "text-muted-foreground w-full text-sm",
                  children: [
                    /* @__PURE__ */ jsx9("thead", {
                      children: /* @__PURE__ */ jsxs9("tr", {
                        className: "border-border border-b",
                        children: [
                          /* @__PURE__ */ jsx9("th", {
                            className: "p-2 text-left font-medium",
                            children: "Setting"
                          }),
                          /* @__PURE__ */ jsx9("th", {
                            className: "p-2 text-left font-medium",
                            children: "Description"
                          }),
                          /* @__PURE__ */ jsx9("th", {
                            className: "p-2 text-left font-medium",
                            children: "Default"
                          })
                        ]
                      })
                    }),
                    /* @__PURE__ */ jsxs9("tbody", {
                      children: [
                        /* @__PURE__ */ jsxs9("tr", {
                          className: "border-border border-b",
                          children: [
                            /* @__PURE__ */ jsx9("td", {
                              className: "p-2 font-mono text-xs",
                              children: "validation.onSave"
                            }),
                            /* @__PURE__ */ jsx9("td", {
                              className: "p-2",
                              children: "Run validation on save"
                            }),
                            /* @__PURE__ */ jsx9("td", {
                              className: "p-2",
                              children: "true"
                            })
                          ]
                        }),
                        /* @__PURE__ */ jsxs9("tr", {
                          className: "border-border border-b",
                          children: [
                            /* @__PURE__ */ jsx9("td", {
                              className: "p-2 font-mono text-xs",
                              children: "validation.onOpen"
                            }),
                            /* @__PURE__ */ jsx9("td", {
                              className: "p-2",
                              children: "Run validation on open"
                            }),
                            /* @__PURE__ */ jsx9("td", {
                              className: "p-2",
                              children: "true"
                            })
                          ]
                        }),
                        /* @__PURE__ */ jsxs9("tr", {
                          className: "border-border border-b",
                          children: [
                            /* @__PURE__ */ jsx9("td", {
                              className: "p-2 font-mono text-xs",
                              children: "api.baseUrl"
                            }),
                            /* @__PURE__ */ jsx9("td", {
                              className: "p-2",
                              children: "Base URL for ContractSpec API"
                            }),
                            /* @__PURE__ */ jsx9("td", {
                              className: "p-2",
                              children: "(empty)"
                            })
                          ]
                        })
                      ]
                    })
                  ]
                })
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs9("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx9(Link9, {
            href: "/docs/getting-started/tools/cli",
            className: "btn-ghost",
            children: "Back: CLI"
          }),
          /* @__PURE__ */ jsxs9(Link9, {
            href: "/docs/specs",
            className: "btn-primary",
            children: [
              "Next: Core Concepts ",
              /* @__PURE__ */ jsx9(ChevronRight9, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}

// src/components/docs/getting-started/getting-started.docblocks.ts
import { registerDocBlocks } from "@contractspec/lib.contracts-spec/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-spec @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
};
