// @bun
import{CodeBlock as C,InstallCommand as q}from"@contractspec/lib.design-system";import V from"@contractspec/lib.ui-link";import{ChevronRight as F}from"lucide-react";import{jsx as a,jsxs as l}from"react/jsx-runtime";function H(){return l("div",{className:"space-y-8",children:[l("div",{className:"space-y-2",children:[a("h1",{className:"font-bold text-4xl",children:"ContractSpec CLI"}),a("p",{className:"text-lg text-muted-foreground",children:"Command-line interface for creating, building, and validating contract specifications with AI-powered code generation."})]}),l("div",{className:"space-y-6",children:[l("div",{className:"space-y-3",children:[a("h2",{className:"font-bold text-2xl",children:"Installation"}),a(q,{package:"contractspec",dev:!0})]}),l("div",{className:"space-y-3",children:[a("h2",{className:"font-bold text-2xl",children:"Quick Start"}),a(C,{language:"bash",code:`# Initialize project
contractspec onboard
bunx contractspec init

# Create a spec
contractspec create --type operation

# Generate code
contractspec generate

# Validate
contractspec validate`})]}),l("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Commands"}),a("div",{className:"grid gap-4",children:[{name:"onboard",description:"Primary OSS onboarding flow that recommends tracks, examples, and repo-local guides",usage:"contractspec onboard [track...] [--example <key>] [--dry-run] [--json]"},{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]"}].map((u)=>l("div",{className:"card-subtle space-y-2 p-4",children:[a("h3",{className:"font-bold font-mono text-violet-400",children:u.name}),a("p",{className:"text-muted-foreground text-sm",children:u.description}),a(C,{language:"bash",code:u.usage,showCopyButton:!1})]},u.name))})]}),l("div",{className:"space-y-3",children:[a("h2",{className:"font-bold text-2xl",children:"AI Agent Modes"}),a("p",{className:"text-muted-foreground",children:"The CLI supports multiple AI agent modes for different use cases:"}),l("div",{className:"grid gap-3 md:grid-cols-2",children:[l("div",{className:"card-subtle p-4",children:[a("h4",{className:"font-bold",children:"simple"}),a("p",{className:"text-muted-foreground text-sm",children:"Direct LLM API calls, fast and straightforward. Best for rapid prototyping."})]}),l("div",{className:"card-subtle p-4",children:[a("h4",{className:"font-bold",children:"claude-code"}),a("p",{className:"text-muted-foreground text-sm",children:"Extended thinking with Claude. Best for production-quality code."})]}),l("div",{className:"card-subtle p-4",children:[a("h4",{className:"font-bold",children:"openai-codex"}),a("p",{className:"text-muted-foreground text-sm",children:"GPT-4o/o1 models. Excellent for algorithms and optimization."})]}),l("div",{className:"card-subtle p-4",children:[a("h4",{className:"font-bold",children:"cursor"}),a("p",{className:"text-muted-foreground text-sm",children:"Leverages Cursor agentic capabilities. Requires Cursor environment."})]})]})]}),l("div",{className:"space-y-3",children:[a("h2",{className:"font-bold text-2xl",children:"CI/CD Integration"}),a("p",{className:"text-muted-foreground",children:"Run all validation checks in CI/CD with machine-readable output:"}),a(C,{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`})]}),l("div",{className:"card-subtle space-y-4 p-6",children:[a("h3",{className:"font-bold",children:"Configuration"}),l("p",{className:"text-muted-foreground text-sm",children:["Create a ",a("code",{children:".contractsrc.json"})," file in your project root:"]}),a(C,{language:"json",filename:".contractsrc.json",code:`{
  "aiProvider": "claude",
  "agentMode": "claude-code",
  "outputDir": "./src",
  "conventions": {
    "operations": "interactions/commands|queries",
    "events": "events"
  }
}`})]})]}),l("div",{className:"flex items-center gap-4 pt-4",children:[l(V,{href:"/docs/getting-started/tools/vscode",className:"btn-primary",children:["Next: VS Code Extension ",a(F,{size:16})]}),a(V,{href:"/docs/getting-started/tools",className:"btn-ghost",children:"Back to Tools"})]})]})}import I from"@contractspec/lib.ui-link";import{ChevronRight as M}from"lucide-react";import{jsx as i,jsxs as p}from"react/jsx-runtime";function W(){return p("div",{className:"space-y-8",children:[p("div",{className:"space-y-2",children:[i("h1",{className:"font-bold text-4xl",children:"Compatibility"}),i("p",{className:"text-lg text-muted-foreground",children:"Supported runtimes, frameworks, and agent modes for ContractSpec."})]}),p("div",{className:"space-y-6",children:[p("div",{className:"card-subtle space-y-3 p-6",children:[i("h2",{className:"font-bold text-2xl",children:"Runtimes"}),p("ul",{className:"space-y-2 text-muted-foreground",children:[i("li",{children:"Node.js 20+"}),i("li",{children:"Bun 1.0+"})]})]}),p("div",{className:"card-subtle space-y-3 p-6",children:[i("h2",{className:"font-bold text-2xl",children:"Frameworks"}),p("ul",{className:"space-y-2 text-muted-foreground",children:[i("li",{children:"Next.js 14+ (App Router preferred)"}),i("li",{children:"Bun + Elysia or compatible HTTP servers"})]})]}),p("div",{className:"card-subtle space-y-3 p-6",children:[i("h2",{className:"font-bold text-2xl",children:"Package managers"}),p("ul",{className:"space-y-2 text-muted-foreground",children:[i("li",{children:"bun (recommended)"}),i("li",{children:"npm"}),i("li",{children:"pnpm"})]})]}),p("div",{className:"card-subtle space-y-3 p-6",children:[i("h2",{className:"font-bold text-2xl",children:"AI agent modes"}),p("ul",{className:"space-y-2 text-muted-foreground",children:[i("li",{children:"claude-code"}),i("li",{children:"openai-codex"}),i("li",{children:"cursor"}),i("li",{children:"opencode"}),i("li",{children:"simple (direct LLM)"})]})]}),p("div",{className:"card-subtle space-y-3 p-6",children:[i("h2",{className:"font-bold text-2xl",children:"Datastores"}),i("p",{className:"text-muted-foreground",children:"ContractSpec ships with Prisma-friendly defaults and can integrate with custom adapters for other databases."}),p("ul",{className:"space-y-2 text-muted-foreground",children:[i("li",{children:"PostgreSQL via Prisma"}),i("li",{children:"Custom adapters for other SQL/NoSQL stores"})]})]})]}),p("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[i(I,{href:"/docs/getting-started/start-here",className:"btn-ghost",children:"Start here"}),i(I,{href:"/docs/getting-started/troubleshooting",className:"btn-ghost",children:"Troubleshooting"}),p(I,{href:"/docs/getting-started/installation",className:"btn-primary",children:["Next: Installation ",i(M,{size:16})]})]})]})}import{CodeBlock as P}from"@contractspec/lib.design-system";import L from"@contractspec/lib.ui-link";import{ChevronRight as G}from"lucide-react";import{jsx as n,jsxs as v}from"react/jsx-runtime";var U=`import { defineDataView } from '@contractspec/lib.contracts-spec/data-views';
import { ListTransactions } from './list-transactions';

export const TransactionHistory = defineDataView({
  meta: {
    key: 'billing.transactionHistory',
    version: '1.0.0',
    entity: 'transaction',
    title: 'Transaction History',
    description: 'Customer payment history',
    domain: 'billing',
    owners: ['team-billing'],
    tags: ['payments'],
    stability: 'stable',
  },
  source: {
    primary: {
      key: ListTransactions.meta.key,
      version: ListTransactions.meta.version,
    },
  },
  view: {
    kind: 'table',
    executionMode: 'client',
    selection: 'multiple',
    columnVisibility: true,
    columnResizing: true,
    columnPinning: true,
    rowExpansion: {
      fields: ['notes', 'renewalDate', 'lastActivityAt'],
    },
    initialState: {
      pageSize: 4,
      hiddenColumns: ['notes'],
      pinnedColumns: {
        left: ['account'],
      },
      sorting: [{ field: 'arr', desc: true }],
    },
    fields: [
      { key: 'account', label: 'Account', dataPath: 'account', sortable: true },
      { key: 'owner', label: 'Owner', dataPath: 'owner', sortable: true },
      { key: 'status', label: 'Status', dataPath: 'status', sortable: true },
      { key: 'notes', label: 'Notes', dataPath: 'notes' },
    ],
  },
});`;function Q(){return v("div",{className:"space-y-8",children:[v("div",{className:"space-y-4",children:[n("h1",{className:"font-bold text-4xl",children:"Display Data with DataViews"}),n("p",{className:"text-lg text-muted-foreground",children:"Define a filterable, sortable transaction history view that works across web and mobile without duplicating UI code."})]}),v("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"1. Define the underlying query"}),n("p",{className:"text-muted-foreground",children:"First, create a query operation to fetch the data:"}),n(P,{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' },
});`})]}),v("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"2. Define the DataView spec"}),n("p",{className:"text-muted-foreground",children:"Wrap your query with presentation metadata:"}),n(P,{language:"typescript",filename:"lib/specs/billing/transaction-history.data-view.ts",code:U}),v("p",{className:"text-muted-foreground text-sm",children:["The live version of this pattern is available in the canonical"," ",n(L,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),"."]})]}),v("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"3. Render on the frontend"}),n("p",{className:"text-muted-foreground",children:"Use the runtime renderer in your React or React Native app:"}),n(P,{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>
  );
}`})]}),v("div",{className:"card-subtle space-y-4 p-6",children:[n("h3",{className:"font-bold",children:"Why DataViews?"}),v("ul",{className:"space-y-2 text-muted-foreground text-sm",children:[n("li",{children:"Same spec renders on web (React) and mobile (React Native)"}),n("li",{children:"Filters, sorting, and pagination handled automatically"}),n("li",{children:"Column visibility, pinning, resizing, and row expansion stay contract-driven"}),n("li",{children:"Format rules (currency, dates, badges) applied consistently"}),n("li",{children:"Export to CSV/PDF using the same spec"}),n("li",{children:"A/B test different layouts without touching the backend"})]})]}),v("div",{className:"flex items-center gap-4 pt-4",children:[v(L,{href:"/docs/libraries/data-views",className:"btn-primary",children:["DataView API Reference ",n(G,{size:16})]}),n(L,{href:"/docs/specs/workflows",className:"btn-ghost",children:"Next: Workflows"})]})]})}import{CodeBlock as _,InstallCommand as J}from"@contractspec/lib.design-system";import T from"@contractspec/lib.ui-link";import{ChevronRight as B,Code2 as X,Cpu as K,Layers as Y,Terminal as $}from"lucide-react";import{jsx as s,jsxs as h}from"react/jsx-runtime";function De(){return h("div",{className:"space-y-8",children:[h("div",{className:"space-y-2",children:[s("h1",{className:"font-bold text-4xl",children:"Developer Tools"}),s("p",{className:"text-lg text-muted-foreground",children:"Use the OSS toolchain to define contracts, validate changes, inspect generated surfaces, and adopt the system incrementally across different environments."})]}),s("div",{className:"grid gap-6 md:grid-cols-2",children:[{name:"CLI",href:"/docs/getting-started/tools/cli",description:"Command-line interface for spec creation, building, validation, and CI/CD integration.",icon:$,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:X,status:"available",highlights:["Specs Explorer sidebar","Watch mode","Interactive walkthroughs"]},{name:"ContractSpec Studio",href:"https://www.contractspec.studio",description:"The operating layer on top of OSS ContractSpec for teams that want evidence-backed decisions, workflow automation, and managed delivery loops.",icon:Y,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:K,status:"coming-soon",highlights:["Code navigation","Inline validation","Refactoring support"]}].map((u)=>{let b=u.icon,N=u.status==="coming-soon";return h("div",{className:`card-subtle relative space-y-4 p-6 ${N?"opacity-75":""}`,children:[N&&s("span",{className:"absolute -top-2 right-4 rounded-full bg-violet-500/20 px-2 py-0.5 font-medium text-violet-400 text-xs",children:"Coming Soon"}),h("div",{className:"flex items-center gap-3",children:[s("div",{className:"flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10",children:s(b,{className:"h-5 w-5 text-violet-400"})}),s("h3",{className:"font-bold text-lg",children:u.name})]}),s("p",{className:"text-muted-foreground text-sm",children:u.description}),s("ul",{className:"space-y-1",children:u.highlights.map((E)=>h("li",{className:"flex items-center gap-2 text-muted-foreground text-sm",children:[s("span",{className:"text-violet-400",children:"-"}),E]},E))}),!N&&h(T,{href:u.href,className:"btn-ghost inline-flex items-center gap-1 text-sm",children:["Learn more ",s(B,{size:14})]})]},u.name)})}),h("div",{className:"card-subtle space-y-4 p-6",children:[s("h3",{className:"font-bold",children:"Quick Install"}),h("div",{className:"space-y-3",children:[h("div",{children:[s("p",{className:"mb-2 font-medium text-muted-foreground text-xs",children:"CLI"}),s(J,{package:"contractspec",dev:!0})]}),h("div",{children:[s("p",{className:"mb-2 font-medium text-muted-foreground text-xs",children:"VS Code Extension"}),s(_,{language:"bash",code:"code --install-extension lssm.vscode-contractspec"})]})]})]}),h("div",{className:"flex items-center gap-4 pt-4",children:[h(T,{href:"/docs/getting-started/tools/cli",className:"btn-primary",children:["Get Started with CLI ",s(B,{size:16})]}),s(T,{href:"/docs/getting-started/tools/vscode",className:"btn-ghost",children:"VS Code Extension"})]})]})}import{CodeBlock as w}from"@contractspec/lib.design-system";import Z from"@contractspec/lib.ui-link";import{ChevronRight as x}from"lucide-react";import{jsx as o,jsxs as f}from"react/jsx-runtime";function j(){return f("div",{className:"space-y-8",children:[f("div",{className:"space-y-2",children:[o("h1",{className:"font-bold text-4xl",children:"Your First Operation"}),o("p",{className:"text-lg text-muted-foreground",children:"Build a payment capture operation with policy enforcement in under 10 minutes."})]}),f("div",{className:"space-y-6",children:[f("div",{className:"space-y-3",children:[o("h2",{className:"font-bold text-2xl",children:"What you'll build"}),o("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."})]}),f("div",{className:"space-y-3",children:[o("h2",{className:"font-bold text-2xl",children:"1. Define the operation spec"}),f("p",{className:"text-muted-foreground",children:["Create ",o("code",{children:"lib/specs/billing/capture-payment.ts"}),":"]}),o(w,{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' },
    ],
  },
});`})]}),f("div",{className:"space-y-3",children:[o("h2",{className:"font-bold text-2xl",children:"2. Implement the handler"}),f("p",{className:"text-muted-foreground",children:["Create ",o("code",{children:"lib/handlers/billing/capture-payment.ts"}),":"]}),o(w,{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,
  };
}`})]}),f("div",{className:"space-y-3",children:[o("h2",{className:"font-bold text-2xl",children:"3. Register and serve"}),f("p",{className:"text-muted-foreground",children:["Wire it up in ",o("code",{children:"lib/registry.ts"})," and"," ",o("code",{children:"app/api/ops/[...route]/route.ts"}),":"]}),o(w,{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);`}),o(w,{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 };`})]}),f("div",{className:"card-subtle space-y-4 p-6",children:[o("h3",{className:"font-bold",children:"What you just built:"}),f("ul",{className:"space-y-2 text-muted-foreground text-sm",children:[f("li",{children:["Type-safe API endpoint at"," ",o("code",{children:"/api/ops/billing.capturePayment"})]}),o("li",{children:"Automatic input validation (amount must be positive, IDs required)"}),o("li",{children:"Policy enforcement\u2014only invoice owner can pay"}),o("li",{children:"Stripe integration with error handling"}),o("li",{children:"Database transaction with audit trail"}),o("li",{children:"Same spec works with GraphQL, MCP, or webhooks"})]})]}),o("div",{className:"flex items-center gap-4 pt-4",children:f(Z,{href:"/docs/getting-started/dataviews",className:"btn-primary",children:["Next: Display Data with DataViews ",o(x,{size:16})]})})]})]})}import{CodeBlock as z,InstallCommand as R}from"@contractspec/lib.design-system";import ee from"@contractspec/lib.ui-link";import{ChevronRight as te}from"lucide-react";import{jsx as r,jsxs as g}from"react/jsx-runtime";function ae(){return g("div",{className:"space-y-8",children:[g("div",{className:"space-y-2",children:[r("h1",{className:"font-bold text-4xl",children:"Installation"}),r("p",{className:"text-lg text-muted-foreground",children:"Add ContractSpec to your existing Next.js or Bun project, or start fresh."})]}),g("div",{className:"space-y-6",children:[g("div",{className:"space-y-3",children:[r("h2",{className:"font-bold text-2xl",children:"Prerequisites"}),g("ul",{className:"space-y-2 text-muted-foreground",children:[r("li",{children:"Node.js 20+ (or Bun 1.0+)"}),r("li",{children:"Existing Next.js app or Bun HTTP server"}),r("li",{children:"PostgreSQL database (for persistence)"})]})]}),g("div",{className:"space-y-3",children:[r("h2",{className:"font-bold text-2xl",children:"Install Core Libraries"}),r("p",{className:"text-muted-foreground",children:"Add the contracts runtime and your choice of adapter:"}),r(R,{package:["@contractspec/lib.contracts-spec","@contractspec/lib.schema"]})]}),g("div",{className:"space-y-3",children:[r("h2",{className:"font-bold text-2xl",children:"For Next.js projects"}),r(R,{package:"@contractspec/lib.contracts-spec"})]}),g("div",{className:"space-y-3",children:[r("h2",{className:"font-bold text-2xl",children:"For database models"}),r(R,{package:["@contractspec/app.cli-database","prisma","@prisma/client"]})]}),g("div",{className:"space-y-3",children:[r("h2",{className:"font-bold text-2xl",children:"Set up your project"}),r("p",{className:"text-muted-foreground",children:"Initialize a new ContractSpec project structure:"}),r(z,{language:"bash",filename:"installation-init",code:`bunx contractspec init
# Follow the interactive prompts to configure your project`})]}),g("div",{className:"space-y-3",children:[r("h2",{className:"font-bold text-2xl",children:"Initialize the database"}),r("p",{className:"text-muted-foreground",children:"If using Prisma, set up your schema and generate the client:"}),r(z,{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`})]}),r("div",{className:"flex items-center gap-4 pt-4",children:g(ee,{href:"/docs/getting-started/hello-world",className:"btn-primary",children:["Next: First Operation ",r(te,{size:16})]})})]})]})}import{CodeBlock as S,InstallCommand as ie}from"@contractspec/lib.design-system";import A from"@contractspec/lib.ui-link";import{ChevronRight as oe}from"lucide-react";import{jsx as m,jsxs as y}from"react/jsx-runtime";function ne(){return y("div",{className:"space-y-8",children:[y("div",{className:"space-y-2",children:[m("h1",{className:"font-bold text-4xl",children:"Start here"}),m("p",{className:"text-lg text-muted-foreground",children:"A fast onboarding path from install to your first generated contract."})]}),y("div",{className:"space-y-6",children:[y("div",{className:"space-y-3",children:[m("h2",{className:"font-bold text-2xl",children:"Install the CLI"}),m(ie,{package:"contractspec",dev:!0})]}),y("div",{className:"space-y-3",children:[m("h2",{className:"font-bold text-2xl",children:"Generate repo-local guidance"}),m(S,{language:"bash",filename:"start-here-onboard",code:`contractspec onboard
# optional focused track
contractspec onboard knowledge --example knowledge-canon`})]}),y("div",{className:"space-y-3",children:[m("h2",{className:"font-bold text-2xl",children:"Initialize your project"}),m(S,{language:"bash",filename:"start-here-init",code:"bunx contractspec init"})]}),y("div",{className:"space-y-3",children:[m("h2",{className:"font-bold text-2xl",children:"Author your first contract"}),m(S,{language:"bash",filename:"start-here-create",code:"contractspec create --type operation"})]}),y("div",{className:"space-y-3",children:[m("h2",{className:"font-bold text-2xl",children:"Generate implementation"}),m(S,{language:"bash",filename:"start-here-build",code:`contractspec generate
contractspec validate`})]})]}),y("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[y(A,{href:"/docs/getting-started/hello-world",className:"btn-primary",children:["Next: Hello World ",m(oe,{size:16})]}),m(A,{href:"/docs/getting-started/troubleshooting",className:"btn-ghost",children:"Troubleshooting"}),m(A,{href:"/docs/getting-started/compatibility",className:"btn-ghost",children:"Compatibility"})]})]})}import{CodeBlock as re}from"@contractspec/lib.design-system";import D from"@contractspec/lib.ui-link";import{ChevronRight as ce}from"lucide-react";import{jsx as c,jsxs as d}from"react/jsx-runtime";function le(){return d("div",{className:"space-y-8",children:[d("div",{className:"space-y-2",children:[c("h1",{className:"font-bold text-4xl",children:"Troubleshooting"}),c("p",{className:"text-lg text-muted-foreground",children:"Common issues and fixes when installing or generating with ContractSpec."})]}),d("div",{className:"space-y-6",children:[d("div",{className:"card-subtle space-y-3 p-6",children:[c("h2",{className:"font-bold text-2xl",children:"Command not found"}),d("ul",{className:"space-y-2 text-muted-foreground",children:[c("li",{children:"Reinstall the CLI and ensure it is in your PATH."}),c("li",{children:"Confirm Node.js 20+ or Bun 1.0+ is installed."})]})]}),d("div",{className:"card-subtle space-y-3 p-6",children:[c("h2",{className:"font-bold text-2xl",children:"Specs not discovered"}),d("ul",{className:"space-y-2 text-muted-foreground",children:[d("li",{children:["Run ",c("code",{children:"contractspec list"})," to see discovered specs."]}),c("li",{children:"Verify your spec path conventions in .contractsrc.json."})]})]}),d("div",{className:"card-subtle space-y-3 p-6",children:[c("h2",{className:"font-bold text-2xl",children:"Build or validate fails"}),d("ul",{className:"space-y-2 text-muted-foreground",children:[d("li",{children:["Run ",c("code",{children:"contractspec validate"})," to surface schema errors."]}),c("li",{children:"Check that generated files were not manually edited."})]})]}),d("div",{className:"space-y-3",children:[c("h2",{className:"font-bold text-2xl",children:"Diagnostics"}),c(re,{language:"bash",filename:"troubleshooting-diagnostics",code:`contractspec --version
contractspec list
contractspec validate src/contracts/mySpec.ts`})]}),d("div",{className:"card-subtle space-y-3 p-6",children:[c("h2",{className:"font-bold text-2xl",children:"Still blocked?"}),d("ul",{className:"space-y-2 text-muted-foreground",children:[c("li",{children:"Confirm compatibility requirements for runtime and framework."}),c("li",{children:"Re-run builds on a clean branch to isolate changes."}),c("li",{children:"Use a new spec and minimal adapter to validate setup."})]})]})]}),d("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[c(D,{href:"/docs/getting-started/start-here",className:"btn-ghost",children:"Start here"}),c(D,{href:"/docs/getting-started/compatibility",className:"btn-ghost",children:"Compatibility"}),d(D,{href:"/docs/getting-started/installation",className:"btn-primary",children:["Next: Installation ",c(ce,{size:16})]})]})]})}import{CodeBlock as se}from"@contractspec/lib.design-system";import O from"@contractspec/lib.ui-link";import{ChevronRight as de,ExternalLink as pe}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";function it(){let k=[{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"]}],u=[{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 t("div",{className:"space-y-8",children:[t("div",{className:"space-y-2",children:[e("h1",{className:"font-bold text-4xl",children:"VS Code Extension"}),e("p",{className:"text-lg text-muted-foreground",children:"Spec-first development directly in VS Code. Validate, scaffold, and explore your contract specifications with real-time feedback."})]}),t("div",{className:"flex flex-wrap gap-3",children:[t("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 ",e(pe,{size:16})]}),e("a",{href:"vscode:extension/lssm.vscode-contractspec",className:"btn-ghost inline-flex items-center gap-2",children:"Open in VS Code"})]}),t("div",{className:"space-y-6",children:[t("div",{className:"space-y-3",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),t("div",{className:"space-y-2",children:[t("p",{className:"text-muted-foreground text-sm",children:[e("strong",{children:"Option 1:"})," Install from VS Code Marketplace"]}),e(se,{language:"bash",code:"code --install-extension lssm.vscode-contractspec"}),t("p",{className:"mt-4 text-muted-foreground text-sm",children:[e("strong",{children:"Option 2:"}),' Search for "ContractSpec" in VS Code Extensions (Ctrl/Cmd+Shift+X)']})]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Features"}),e("div",{className:"grid gap-4 md:grid-cols-3",children:k.map((b)=>t("div",{className:"card-subtle space-y-3 p-4",children:[e("h3",{className:"font-bold text-violet-400",children:b.category}),e("ul",{className:"space-y-2",children:b.items.map((N)=>t("li",{className:"flex items-start gap-2 text-muted-foreground text-sm",children:[e("span",{className:"mt-1 text-violet-400",children:"-"}),e("span",{children:N})]},N))})]},b.category))})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Commands"}),t("p",{className:"text-muted-foreground",children:["Access commands via Command Palette (Ctrl/Cmd+Shift+P) with prefix"," ",e("code",{children:"ContractSpec:"})]}),e("div",{className:"grid gap-3 md:grid-cols-2",children:u.map((b)=>e("div",{className:"card-subtle flex items-center gap-3 p-3",children:t("div",{className:"flex-1",children:[e("p",{className:"font-medium font-mono text-sm",children:b.name}),e("p",{className:"text-muted-foreground text-xs",children:b.description})]})},b.name))})]}),t("div",{className:"space-y-3",children:[e("h2",{className:"font-bold text-2xl",children:"Sidebar Views"}),e("p",{className:"text-muted-foreground",children:"The extension adds a ContractSpec activity bar (icon in sidebar) with three views:"}),t("div",{className:"grid gap-4 md:grid-cols-3",children:[t("div",{className:"card-subtle space-y-2 p-4",children:[e("h4",{className:"font-bold",children:"Specs Explorer"}),e("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."})]}),t("div",{className:"card-subtle space-y-2 p-4",children:[e("h4",{className:"font-bold",children:"Dependencies"}),e("p",{className:"text-muted-foreground text-sm",children:"Visualize spec relationships. Detect circular dependencies. Navigate to referenced specs."})]}),t("div",{className:"card-subtle space-y-2 p-4",children:[e("h4",{className:"font-bold",children:"Build Results"}),e("p",{className:"text-muted-foreground text-sm",children:"Track build history (last 20). Success/failure indicators. Click to open generated files."})]})]})]}),t("div",{className:"space-y-3",children:[e("h2",{className:"font-bold text-2xl",children:"Getting Started"}),t("ol",{className:"list-inside list-decimal space-y-2 text-muted-foreground",children:[e("li",{children:"Install the extension from VS Code Marketplace"}),e("li",{children:"Open a workspace with ContractSpec files (or create one)"}),e("li",{children:"Start the walkthrough: Help - Welcome - ContractSpec"}),t("li",{children:["Create your first spec: Click ",e("strong",{children:"+"})," in Specs Explorer or run ",e("code",{children:"ContractSpec: Create New Spec"})]}),e("li",{children:"Build from it: Click the build icon in the editor title bar"})]})]}),t("div",{className:"card-subtle space-y-4 p-6",children:[e("h3",{className:"font-bold",children:"Configuration"}),e("p",{className:"text-muted-foreground text-sm",children:"Configure the extension in VS Code Settings:"}),e("div",{className:"overflow-x-auto",children:t("table",{className:"w-full text-muted-foreground text-sm",children:[e("thead",{children:t("tr",{className:"border-border border-b",children:[e("th",{className:"p-2 text-left font-medium",children:"Setting"}),e("th",{className:"p-2 text-left font-medium",children:"Description"}),e("th",{className:"p-2 text-left font-medium",children:"Default"})]})}),t("tbody",{children:[t("tr",{className:"border-border border-b",children:[e("td",{className:"p-2 font-mono text-xs",children:"validation.onSave"}),e("td",{className:"p-2",children:"Run validation on save"}),e("td",{className:"p-2",children:"true"})]}),t("tr",{className:"border-border border-b",children:[e("td",{className:"p-2 font-mono text-xs",children:"validation.onOpen"}),e("td",{className:"p-2",children:"Run validation on open"}),e("td",{className:"p-2",children:"true"})]}),t("tr",{className:"border-border border-b",children:[e("td",{className:"p-2 font-mono text-xs",children:"api.baseUrl"}),e("td",{className:"p-2",children:"Base URL for ContractSpec API"}),e("td",{className:"p-2",children:"(empty)"})]})]})]})})]})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[e(O,{href:"/docs/getting-started/tools/cli",className:"btn-ghost",children:"Back: CLI"}),t(O,{href:"/docs/specs",className:"btn-primary",children:["Next: Core Concepts ",e(de,{size:16})]})]})]})}import{registerDocBlocks as me}from"@contractspec/lib.contracts-spec/docs";var ue=[{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
`}];me(ue);export{it as VSCodeExtensionPage,le as TroubleshootingPage,ne as StartHerePage,ae as InstallationPage,j as HelloWorldPage,De as DeveloperToolsPage,Q as DataViewTutorialPage,W as CompatibilityPage,H as CLIPage};
