@contractspec/bundle.library 3.9.6 → 3.9.8

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

@@ -1,4 +1,4 @@
-var q=Object.defineProperty;var F=(h)=>h;function H(h,n){this[h]=F.bind(null,n)}var ve=(h,n)=>{for(var g in n)q(h,g,{get:n[g],enumerable:!0,configurable:!0,set:H.bind(n,g)})};var ye=(h,n)=>()=>(h&&(n=h(h=0)),n);import{CodeBlock as w,InstallCommand as M}from"@contractspec/lib.design-system";import V from"@contractspec/lib.ui-link";import{ChevronRight as W}from"lucide-react";import{jsx as a,jsxs as s}from"react/jsx-runtime";function U(){return s("div",{className:"space-y-8",children:[s("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."})]}),s("div",{className:"space-y-6",children:[s("div",{className:"space-y-3",children:[a("h2",{className:"font-bold text-2xl",children:"Installation"}),a(M,{package:"contractspec",dev:!0})]}),s("div",{className:"space-y-3",children:[a("h2",{className:"font-bold text-2xl",children:"Quick Start"}),a(w,{language:"bash",code:`# Initialize project
+var M=Object.defineProperty;var q=(h)=>h;function H(h,n){this[h]=q.bind(null,n)}var ve=(h,n)=>{for(var g in n)M(h,g,{get:n[g],enumerable:!0,configurable:!0,set:H.bind(n,g)})};var ye=(h,n)=>()=>(h&&(n=h(h=0)),n);import{CodeBlock as w,InstallCommand as F}from"@contractspec/lib.design-system";import V from"@contractspec/lib.ui-link";import{ChevronRight as U}from"lucide-react";import{jsx as a,jsxs as s}from"react/jsx-runtime";function W(){return s("div",{className:"space-y-8",children:[s("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."})]}),s("div",{className:"space-y-6",children:[s("div",{className:"space-y-3",children:[a("h2",{className:"font-bold text-2xl",children:"Installation"}),a(F,{package:"contractspec",dev:!0})]}),s("div",{className:"space-y-3",children:[a("h2",{className:"font-bold text-2xl",children:"Quick Start"}),a(w,{language:"bash",code:`# Initialize project
 contractspec onboard
 bunx contractspec init
 
@@ -23,7 +23,7 @@ contractspec validate`})]}),s("div",{className:"space-y-4",children:[a("h2",{cla
     "operations": "interactions/commands|queries",
     "events": "events"
   }
-}`})]})]}),s("div",{className:"flex items-center gap-4 pt-4",children:[s(V,{href:"/docs/getting-started/tools/vscode",className:"btn-primary",children:["Next: VS Code Extension ",a(W,{size:16})]}),a(V,{href:"/docs/getting-started/tools",className:"btn-ghost",children:"Back to Tools"})]})]})}import S from"@contractspec/lib.ui-link";import{ChevronRight as G}from"lucide-react";import{jsx as i,jsxs as p}from"react/jsx-runtime";function Q(){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:"card-subtle space-y-3 p-6",children:[i("h2",{className:"font-bold text-2xl",children:"Cross-platform UI architecture"}),p("p",{className:"text-muted-foreground",children:["Need the React and React Native component compatibility story? Read"," ",i(S,{href:"/docs/libraries/cross-platform-ui",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Cross-platform UI"})," ","for the runtime and UI-layer split."]})]})]}),p("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[i(S,{href:"/docs/getting-started/start-here",className:"btn-ghost",children:"Start here"}),i(S,{href:"/docs/getting-started/troubleshooting",className:"btn-ghost",children:"Troubleshooting"}),p(S,{href:"/docs/getting-started/installation",className:"btn-primary",children:["Next: Installation ",i(G,{size:16})]})]})]})}import{CodeBlock as P}from"@contractspec/lib.design-system";import L from"@contractspec/lib.ui-link";import{ChevronRight as _}from"lucide-react";import{jsx as r,jsxs as b}from"react/jsx-runtime";var J=`import { defineDataView } from '@contractspec/lib.contracts-spec/data-views';
+}`})]})]}),s("div",{className:"flex items-center gap-4 pt-4",children:[s(V,{href:"/docs/getting-started/tools/vscode",className:"btn-primary",children:["Next: VS Code Extension ",a(U,{size:16})]}),a(V,{href:"/docs/getting-started/tools",className:"btn-ghost",children:"Back to Tools"})]})]})}import k from"@contractspec/lib.ui-link";import{ChevronRight as G}from"lucide-react";import{jsx as i,jsxs as p}from"react/jsx-runtime";function Q(){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:"card-subtle space-y-3 p-6",children:[i("h2",{className:"font-bold text-2xl",children:"Cross-platform UI architecture"}),p("p",{className:"text-muted-foreground",children:["Need the React and React Native component compatibility story? Read"," ",i(k,{href:"/docs/libraries/cross-platform-ui",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Cross-platform UI"})," ","for the runtime and UI-layer split."]})]})]}),p("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[i(k,{href:"/docs/getting-started/start-here",className:"btn-ghost",children:"Start here"}),i(k,{href:"/docs/getting-started/troubleshooting",className:"btn-ghost",children:"Troubleshooting"}),p(k,{href:"/docs/getting-started/installation",className:"btn-primary",children:["Next: Installation ",i(G,{size:16})]})]})]})}import{CodeBlock as P}from"@contractspec/lib.design-system";import L from"@contractspec/lib.ui-link";import{ChevronRight as _}from"lucide-react";import{jsx as r,jsxs as b}from"react/jsx-runtime";var J=`import { defineDataView } from '@contractspec/lib.contracts-spec/data-views';
 import { ListTransactions } from './list-transactions';
 
 export const TransactionHistory = defineDataView({
@@ -66,8 +66,44 @@ export const TransactionHistory = defineDataView({
       { 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: 'amount',
+        label: 'Amount',
+        dataPath: 'amount',
+        sortable: true,
+        format: { type: 'currency', currency: 'EUR', rounded: true },
+      },
+      {
+        key: 'renewalDate',
+        label: 'Renewal',
+        dataPath: 'renewalDate',
+        format: { type: 'date', dateStyle: 'medium' },
+      },
+      {
+        key: 'processingTime',
+        label: 'Processing time',
+        dataPath: 'processingMinutes',
+        format: { type: 'duration', unit: 'minute', display: 'digital' },
+      },
       { key: 'notes', label: 'Notes', dataPath: 'notes' },
     ],
+    filters: [
+      { key: 'status', label: 'Status', field: 'status', type: 'enum' },
+      {
+        key: 'amount',
+        label: 'Amount',
+        field: 'amount',
+        type: 'currency',
+        valueMode: 'range',
+      },
+      {
+        key: 'renewalDate',
+        label: 'Renewal',
+        field: 'renewalDate',
+        type: 'date',
+        valueMode: 'range',
+      },
+    ],
   },
 });`;function X(){return b("div",{className:"space-y-8",children:[b("div",{className:"space-y-4",children:[r("h1",{className:"font-bold text-4xl",children:"Display Data with DataViews"}),r("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."})]}),b("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"1. Define the underlying query"}),r("p",{className:"text-muted-foreground",children:"First, create a query operation to fetch the data:"}),r(P,{language:"typescript",filename:"lib/specs/billing/list-transactions.ts",code:`import { defineQuery } from '@contractspec/lib.contracts-spec';
 
@@ -107,7 +143,7 @@ export function TransactionsPage() {
       />
     </div>
   );
-}`})]}),b("div",{className:"card-subtle space-y-4 p-6",children:[r("h3",{className:"font-bold",children:"Why DataViews?"}),b("ul",{className:"space-y-2 text-muted-foreground text-sm",children:[r("li",{children:"Same spec renders on web (React) and mobile (React Native)"}),r("li",{children:"Filters, sorting, and pagination handled automatically"}),r("li",{children:"Column visibility, pinning, resizing, and row expansion stay contract-driven"}),r("li",{children:"Format rules (currency, dates, badges) applied consistently"}),r("li",{children:"Export to CSV/PDF using the same spec"}),r("li",{children:"A/B test different layouts without touching the backend"})]})]}),b("div",{className:"flex items-center gap-4 pt-4",children:[b(L,{href:"/docs/libraries/data-views",className:"btn-primary",children:["DataView API Reference ",r(_,{size:16})]}),r(L,{href:"/docs/specs/workflows",className:"btn-ghost",children:"Next: Workflows"})]})]})}import{CodeBlock as K,InstallCommand as Y}from"@contractspec/lib.design-system";import T from"@contractspec/lib.ui-link";import{ChevronRight as B,Code2 as $,Cpu as Z,Layers as x,Terminal as j}from"lucide-react";import{jsx as d,jsxs as v}from"react/jsx-runtime";function qe(){return v("div",{className:"space-y-8",children:[v("div",{className:"space-y-2",children:[d("h1",{className:"font-bold text-4xl",children:"Developer Tools"}),d("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."})]}),d("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:j,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:$,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:x,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:Z,status:"coming-soon",highlights:["Code navigation","Inline validation","Refactoring support"]}].map((n)=>{let g=n.icon,C=n.status==="coming-soon";return v("div",{className:`card-subtle relative space-y-4 p-6 ${C?"opacity-75":""}`,children:[C&&d("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"}),v("div",{className:"flex items-center gap-3",children:[d("div",{className:"flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10",children:d(g,{className:"h-5 w-5 text-violet-400"})}),d("h3",{className:"font-bold text-lg",children:n.name})]}),d("p",{className:"text-muted-foreground text-sm",children:n.description}),d("ul",{className:"space-y-1",children:n.highlights.map((E)=>v("li",{className:"flex items-center gap-2 text-muted-foreground text-sm",children:[d("span",{className:"text-violet-400",children:"-"}),E]},E))}),!C&&v(T,{href:n.href,className:"btn-ghost inline-flex items-center gap-1 text-sm",children:["Learn more ",d(B,{size:14})]})]},n.name)})}),v("div",{className:"card-subtle space-y-4 p-6",children:[d("h3",{className:"font-bold",children:"Quick Install"}),v("div",{className:"space-y-3",children:[v("div",{children:[d("p",{className:"mb-2 font-medium text-muted-foreground text-xs",children:"CLI"}),d(Y,{package:"contractspec",dev:!0})]}),v("div",{children:[d("p",{className:"mb-2 font-medium text-muted-foreground text-xs",children:"VS Code Extension"}),d(K,{language:"bash",code:"code --install-extension lssm.vscode-contractspec"})]})]})]}),v("div",{className:"flex items-center gap-4 pt-4",children:[v(T,{href:"/docs/getting-started/tools/cli",className:"btn-primary",children:["Get Started with CLI ",d(B,{size:16})]}),d(T,{href:"/docs/getting-started/tools/vscode",className:"btn-ghost",children:"VS Code Extension"})]})]})}import{CodeBlock as k}from"@contractspec/lib.design-system";import ee from"@contractspec/lib.ui-link";import{ChevronRight as te}from"lucide-react";import{jsx as o,jsxs as f}from"react/jsx-runtime";function ae(){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(k,{language:"typescript",filename:"lib/specs/billing/capture-payment.ts",code:`import { defineCommand } from '@contractspec/lib.contracts-spec';
+}`})]}),b("div",{className:"card-subtle space-y-4 p-6",children:[r("h3",{className:"font-bold",children:"Why DataViews?"}),b("ul",{className:"space-y-2 text-muted-foreground text-sm",children:[r("li",{children:"Same spec renders on web (React) and mobile (React Native)"}),r("li",{children:"Filters, sorting, and pagination handled automatically"}),r("li",{children:"Column visibility, pinning, resizing, and row expansion stay contract-driven"}),r("li",{children:"Typed format rules for numbers, percent values, currency, dates, times, datetimes, and durations applied consistently"}),r("li",{children:"Export to CSV/PDF using the same spec"}),r("li",{children:"A/B test different layouts without touching the backend"})]})]}),b("div",{className:"flex items-center gap-4 pt-4",children:[b(L,{href:"/docs/libraries/data-views",className:"btn-primary",children:["DataView API Reference ",r(_,{size:16})]}),r(L,{href:"/docs/specs/workflows",className:"btn-ghost",children:"Next: Workflows"})]})]})}import{CodeBlock as K,InstallCommand as Y}from"@contractspec/lib.design-system";import T from"@contractspec/lib.ui-link";import{ChevronRight as B,Code2 as $,Cpu as Z,Layers as x,Terminal as j}from"lucide-react";import{jsx as d,jsxs as v}from"react/jsx-runtime";function Me(){return v("div",{className:"space-y-8",children:[v("div",{className:"space-y-2",children:[d("h1",{className:"font-bold text-4xl",children:"Developer Tools"}),d("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."})]}),d("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:j,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:$,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:x,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:Z,status:"coming-soon",highlights:["Code navigation","Inline validation","Refactoring support"]}].map((n)=>{let g=n.icon,C=n.status==="coming-soon";return v("div",{className:`card-subtle relative space-y-4 p-6 ${C?"opacity-75":""}`,children:[C&&d("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"}),v("div",{className:"flex items-center gap-3",children:[d("div",{className:"flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10",children:d(g,{className:"h-5 w-5 text-violet-400"})}),d("h3",{className:"font-bold text-lg",children:n.name})]}),d("p",{className:"text-muted-foreground text-sm",children:n.description}),d("ul",{className:"space-y-1",children:n.highlights.map((E)=>v("li",{className:"flex items-center gap-2 text-muted-foreground text-sm",children:[d("span",{className:"text-violet-400",children:"-"}),E]},E))}),!C&&v(T,{href:n.href,className:"btn-ghost inline-flex items-center gap-1 text-sm",children:["Learn more ",d(B,{size:14})]})]},n.name)})}),v("div",{className:"card-subtle space-y-4 p-6",children:[d("h3",{className:"font-bold",children:"Quick Install"}),v("div",{className:"space-y-3",children:[v("div",{children:[d("p",{className:"mb-2 font-medium text-muted-foreground text-xs",children:"CLI"}),d(Y,{package:"contractspec",dev:!0})]}),v("div",{children:[d("p",{className:"mb-2 font-medium text-muted-foreground text-xs",children:"VS Code Extension"}),d(K,{language:"bash",code:"code --install-extension lssm.vscode-contractspec"})]})]})]}),v("div",{className:"flex items-center gap-4 pt-4",children:[v(T,{href:"/docs/getting-started/tools/cli",className:"btn-primary",children:["Get Started with CLI ",d(B,{size:16})]}),d(T,{href:"/docs/getting-started/tools/vscode",className:"btn-ghost",children:"VS Code Extension"})]})]})}import{CodeBlock as S}from"@contractspec/lib.design-system";import ee from"@contractspec/lib.ui-link";import{ChevronRight as te}from"lucide-react";import{jsx as o,jsxs as f}from"react/jsx-runtime";function ae(){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(S,{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({
@@ -150,7 +186,7 @@ export const CapturePayment = defineCommand({
       { 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(k,{language:"typescript",filename:"lib/handlers/billing/capture-payment.ts",code:`import { CapturePayment } from '@/lib/specs/billing/capture-payment';
+});`})]}),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(S,{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';
 
@@ -187,12 +223,12 @@ export async function handleCapturePayment(input, ctx) {
     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(k,{language:"typescript",filename:"lib/registry.ts",code:`import { OperationSpecRegistry, installOp } from '@contractspec/lib.contracts-spec';
+}`})]}),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(S,{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(k,{language:"typescript",filename:"app/api/ops/[...route]/route.ts",code:`import { makeNextAppHandler } from '@contractspec/lib.contracts-runtime-server-rest/rest-next-app';
+installOp(registry, CapturePayment, handleCapturePayment);`}),o(S,{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';
 
@@ -205,12 +241,12 @@ export { handler as GET, handler as POST };`})]}),f("div",{className:"card-subtl
 # Follow the interactive prompts to configure your project`})]}),y("div",{className:"space-y-3",children:[c("h2",{className:"font-bold text-2xl",children:"Initialize the database"}),c("p",{className:"text-muted-foreground",children:"If using Prisma, set up your schema and generate the client:"}),c(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`})]}),c("div",{className:"flex items-center gap-4 pt-4",children:y(ie,{href:"/docs/getting-started/hello-world",className:"btn-primary",children:["Next: First Operation ",c(oe,{size:16})]})})]})]})}import{CodeBlock as I,InstallCommand as re}from"@contractspec/lib.design-system";import A from"@contractspec/lib.ui-link";import{ChevronRight as ce}from"lucide-react";import{jsx as u,jsxs as N}from"react/jsx-runtime";function le(){return N("div",{className:"space-y-8",children:[N("div",{className:"space-y-2",children:[u("h1",{className:"font-bold text-4xl",children:"Start here"}),u("p",{className:"text-lg text-muted-foreground",children:"A fast onboarding path from install to your first generated contract."})]}),N("div",{className:"space-y-6",children:[N("div",{className:"space-y-3",children:[u("h2",{className:"font-bold text-2xl",children:"Install the CLI"}),u(re,{package:"contractspec",dev:!0})]}),N("div",{className:"space-y-3",children:[u("h2",{className:"font-bold text-2xl",children:"Generate repo-local guidance"}),u(I,{language:"bash",filename:"start-here-onboard",code:`contractspec onboard
+bunx prisma migrate dev --name init`})]}),c("div",{className:"flex items-center gap-4 pt-4",children:y(ie,{href:"/docs/getting-started/hello-world",className:"btn-primary",children:["Next: First Operation ",c(oe,{size:16})]})})]})]})}import{CodeBlock as I,InstallCommand as re}from"@contractspec/lib.design-system";import D from"@contractspec/lib.ui-link";import{ChevronRight as ce}from"lucide-react";import{jsx as u,jsxs as N}from"react/jsx-runtime";function le(){return N("div",{className:"space-y-8",children:[N("div",{className:"space-y-2",children:[u("h1",{className:"font-bold text-4xl",children:"Start here"}),u("p",{className:"text-lg text-muted-foreground",children:"A fast onboarding path from install to your first generated contract."})]}),N("div",{className:"space-y-6",children:[N("div",{className:"space-y-3",children:[u("h2",{className:"font-bold text-2xl",children:"Install the CLI"}),u(re,{package:"contractspec",dev:!0})]}),N("div",{className:"space-y-3",children:[u("h2",{className:"font-bold text-2xl",children:"Generate repo-local guidance"}),u(I,{language:"bash",filename:"start-here-onboard",code:`contractspec onboard
 # optional focused track
 contractspec onboard knowledge --example knowledge-canon`})]}),N("div",{className:"space-y-3",children:[u("h2",{className:"font-bold text-2xl",children:"Initialize your project"}),u(I,{language:"bash",filename:"start-here-init",code:"bunx contractspec init"})]}),N("div",{className:"space-y-3",children:[u("h2",{className:"font-bold text-2xl",children:"Author your first contract"}),u(I,{language:"bash",filename:"start-here-create",code:"contractspec create --type operation"})]}),N("div",{className:"space-y-3",children:[u("h2",{className:"font-bold text-2xl",children:"Generate implementation"}),u(I,{language:"bash",filename:"start-here-build",code:`contractspec generate
-contractspec validate`})]})]}),N("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[N(A,{href:"/docs/getting-started/hello-world",className:"btn-primary",children:["Next: Hello World ",u(ce,{size:16})]}),u(A,{href:"/docs/getting-started/troubleshooting",className:"btn-ghost",children:"Troubleshooting"}),u(A,{href:"/docs/getting-started/compatibility",className:"btn-ghost",children:"Compatibility"})]})]})}import{CodeBlock as se}from"@contractspec/lib.design-system";import D from"@contractspec/lib.ui-link";import{ChevronRight as de}from"lucide-react";import{jsx as l,jsxs as m}from"react/jsx-runtime";function pe(){return m("div",{className:"space-y-8",children:[m("div",{className:"space-y-2",children:[l("h1",{className:"font-bold text-4xl",children:"Troubleshooting"}),l("p",{className:"text-lg text-muted-foreground",children:"Common issues and fixes when installing or generating with ContractSpec."})]}),m("div",{className:"space-y-6",children:[m("div",{className:"card-subtle space-y-3 p-6",children:[l("h2",{className:"font-bold text-2xl",children:"Command not found"}),m("ul",{className:"space-y-2 text-muted-foreground",children:[l("li",{children:"Reinstall the CLI and ensure it is in your PATH."}),l("li",{children:"Confirm Node.js 20+ or Bun 1.0+ is installed."})]})]}),m("div",{className:"card-subtle space-y-3 p-6",children:[l("h2",{className:"font-bold text-2xl",children:"Specs not discovered"}),m("ul",{className:"space-y-2 text-muted-foreground",children:[m("li",{children:["Run ",l("code",{children:"contractspec list"})," to see discovered specs."]}),l("li",{children:"Verify your spec path conventions in .contractsrc.json."})]})]}),m("div",{className:"card-subtle space-y-3 p-6",children:[l("h2",{className:"font-bold text-2xl",children:"Build or validate fails"}),m("ul",{className:"space-y-2 text-muted-foreground",children:[m("li",{children:["Run ",l("code",{children:"contractspec validate"})," to surface schema errors."]}),l("li",{children:"Check that generated files were not manually edited."})]})]}),m("div",{className:"space-y-3",children:[l("h2",{className:"font-bold text-2xl",children:"Diagnostics"}),l(se,{language:"bash",filename:"troubleshooting-diagnostics",code:`contractspec --version
+contractspec validate`})]})]}),N("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[N(D,{href:"/docs/getting-started/hello-world",className:"btn-primary",children:["Next: Hello World ",u(ce,{size:16})]}),u(D,{href:"/docs/getting-started/troubleshooting",className:"btn-ghost",children:"Troubleshooting"}),u(D,{href:"/docs/getting-started/compatibility",className:"btn-ghost",children:"Compatibility"})]})]})}import{CodeBlock as se}from"@contractspec/lib.design-system";import A from"@contractspec/lib.ui-link";import{ChevronRight as de}from"lucide-react";import{jsx as l,jsxs as m}from"react/jsx-runtime";function pe(){return m("div",{className:"space-y-8",children:[m("div",{className:"space-y-2",children:[l("h1",{className:"font-bold text-4xl",children:"Troubleshooting"}),l("p",{className:"text-lg text-muted-foreground",children:"Common issues and fixes when installing or generating with ContractSpec."})]}),m("div",{className:"space-y-6",children:[m("div",{className:"card-subtle space-y-3 p-6",children:[l("h2",{className:"font-bold text-2xl",children:"Command not found"}),m("ul",{className:"space-y-2 text-muted-foreground",children:[l("li",{children:"Reinstall the CLI and ensure it is in your PATH."}),l("li",{children:"Confirm Node.js 20+ or Bun 1.0+ is installed."})]})]}),m("div",{className:"card-subtle space-y-3 p-6",children:[l("h2",{className:"font-bold text-2xl",children:"Specs not discovered"}),m("ul",{className:"space-y-2 text-muted-foreground",children:[m("li",{children:["Run ",l("code",{children:"contractspec list"})," to see discovered specs."]}),l("li",{children:"Verify your spec path conventions in .contractsrc.json."})]})]}),m("div",{className:"card-subtle space-y-3 p-6",children:[l("h2",{className:"font-bold text-2xl",children:"Build or validate fails"}),m("ul",{className:"space-y-2 text-muted-foreground",children:[m("li",{children:["Run ",l("code",{children:"contractspec validate"})," to surface schema errors."]}),l("li",{children:"Check that generated files were not manually edited."})]})]}),m("div",{className:"space-y-3",children:[l("h2",{className:"font-bold text-2xl",children:"Diagnostics"}),l(se,{language:"bash",filename:"troubleshooting-diagnostics",code:`contractspec --version
 contractspec list
-contractspec validate src/contracts/mySpec.ts`})]}),m("div",{className:"card-subtle space-y-3 p-6",children:[l("h2",{className:"font-bold text-2xl",children:"Still blocked?"}),m("ul",{className:"space-y-2 text-muted-foreground",children:[l("li",{children:"Confirm compatibility requirements for runtime and framework."}),l("li",{children:"Re-run builds on a clean branch to isolate changes."}),l("li",{children:"Use a new spec and minimal adapter to validate setup."})]})]})]}),m("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[l(D,{href:"/docs/getting-started/start-here",className:"btn-ghost",children:"Start here"}),l(D,{href:"/docs/getting-started/compatibility",className:"btn-ghost",children:"Compatibility"}),m(D,{href:"/docs/getting-started/installation",className:"btn-primary",children:["Next: Installation ",l(de,{size:16})]})]})]})}import{CodeBlock as me}from"@contractspec/lib.design-system";import O from"@contractspec/lib.ui-link";import{ChevronRight as ue,ExternalLink as fe}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";function st(){let h=[{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"]}],n=[{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(fe,{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(me,{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:h.map((g)=>t("div",{className:"card-subtle space-y-3 p-4",children:[e("h3",{className:"font-bold text-violet-400",children:g.category}),e("ul",{className:"space-y-2",children:g.items.map((C)=>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:C})]},C))})]},g.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:n.map((g)=>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:g.name}),e("p",{className:"text-muted-foreground text-xs",children:g.description})]})},g.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(ue,{size:16})]})]})]})}import{registerDocBlocks as he}from"@contractspec/lib.contracts-spec/docs";var ge=[{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
+contractspec validate src/contracts/mySpec.ts`})]}),m("div",{className:"card-subtle space-y-3 p-6",children:[l("h2",{className:"font-bold text-2xl",children:"Still blocked?"}),m("ul",{className:"space-y-2 text-muted-foreground",children:[l("li",{children:"Confirm compatibility requirements for runtime and framework."}),l("li",{children:"Re-run builds on a clean branch to isolate changes."}),l("li",{children:"Use a new spec and minimal adapter to validate setup."})]})]})]}),m("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[l(A,{href:"/docs/getting-started/start-here",className:"btn-ghost",children:"Start here"}),l(A,{href:"/docs/getting-started/compatibility",className:"btn-ghost",children:"Compatibility"}),m(A,{href:"/docs/getting-started/installation",className:"btn-primary",children:["Next: Installation ",l(de,{size:16})]})]})]})}import{CodeBlock as me}from"@contractspec/lib.design-system";import O from"@contractspec/lib.ui-link";import{ChevronRight as ue,ExternalLink as fe}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";function st(){let h=[{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"]}],n=[{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(fe,{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(me,{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:h.map((g)=>t("div",{className:"card-subtle space-y-3 p-4",children:[e("h3",{className:"font-bold text-violet-400",children:g.category}),e("ul",{className:"space-y-2",children:g.items.map((C)=>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:C})]},C))})]},g.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:n.map((g)=>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:g.name}),e("p",{className:"text-muted-foreground text-xs",children:g.description})]})},g.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(ue,{size:16})]})]})]})}import{registerDocBlocks as he}from"@contractspec/lib.contracts-spec/docs";var ge=[{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.
 
@@ -309,4 +345,4 @@ ContractSpec supports modern TypeScript stacks with spec-first workflows.
 
 - PostgreSQL via Prisma
 - Bring your own adapter for other databases
-`}];he(ge);export{st as VSCodeExtensionPage,pe as TroubleshootingPage,le as StartHerePage,ne as InstallationPage,ae as HelloWorldPage,qe as DeveloperToolsPage,X as DataViewTutorialPage,Q as CompatibilityPage,U as CLIPage};
+`}];he(ge);export{st as VSCodeExtensionPage,pe as TroubleshootingPage,le as StartHerePage,ne as InstallationPage,ae as HelloWorldPage,Me as DeveloperToolsPage,X as DataViewTutorialPage,Q as CompatibilityPage,W as CLIPage};

package/dist/node/components/docs/guides/GuideContractDrivenFormsPage.content.js

@@ -0,0 +1,94 @@
+var a=Object.defineProperty;var r=(e)=>e;function n(e,t){this[e]=r.bind(null,t)}var l=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0,configurable:!0,set:n.bind(t,o)})};var i=(e,t)=>()=>(e&&(t=e(e=0)),t);var s=`import {
+  defineFormSpec,
+  FormRegistry,
+  responsiveFormColumns,
+} from "@contractspec/lib.contracts-spec/forms";
+import { fromZod } from "@contractspec/lib.schema";
+import { z } from "zod";
+
+const LeadCaptureModel = fromZod(
+  z.object({
+    fullName: z.string().min(1),
+    email: z.string().email(),
+    company: z.string().min(1),
+    intent: z.enum(["demo", "pricing", "pilot"]),
+    notes: z.string().max(1000).optional(),
+    newsletter: z.boolean().optional(),
+  }),
+  { name: "LeadCaptureModel" },
+);
+
+export const LeadCaptureForm = defineFormSpec({
+  meta: {
+    key: "marketing.lead.form",
+    version: "1.0.0",
+    title: "Lead capture form",
+    description: "Collect qualified OSS and Studio leads.",
+    domain: "marketing",
+    owners: ["@growth"],
+    tags: ["forms", "leads"],
+    stability: "experimental",
+  },
+  model: LeadCaptureModel,
+  layout: {
+    columns: responsiveFormColumns(2),
+    gap: "md",
+    flow: {
+      kind: "sections",
+      sections: [
+        { key: "identity", titleI18n: "Who you are", fieldNames: ["fullName", "email", "company"] },
+        { key: "request", titleI18n: "What you need", fieldNames: ["intent", "notes", "newsletter"] },
+      ],
+    },
+  },
+  fields: [
+    { kind: "text", name: "fullName", labelI18n: "Full name", required: true, autoComplete: "name" },
+    { kind: "email", name: "email", labelI18n: "Work email", required: true, autoComplete: "email" },
+    { kind: "text", name: "company", labelI18n: "Company", required: true, autoComplete: "organization" },
+    {
+      kind: "select",
+      name: "intent",
+      labelI18n: "Primary goal",
+      required: true,
+      options: [
+        { labelI18n: "Book a demo", value: "demo" },
+        { labelI18n: "Understand pricing", value: "pricing" },
+        { labelI18n: "Plan a pilot", value: "pilot" },
+      ],
+    },
+    { kind: "textarea", name: "notes", labelI18n: "Context", rows: 4, layout: { colSpan: "full" } },
+    { kind: "checkbox", name: "newsletter", labelI18n: "Send product updates" },
+  ],
+  actions: [{ key: "submit", labelI18n: "Send request", op: { name: "lead.create", version: "1.0.0" } }],
+  policy: { flags: ["lead-capture"], pii: ["fullName", "email", "company", "notes"] },
+  renderHints: { ui: "shadcn", form: "react-hook-form" },
+});
+
+export const formRegistry = new FormRegistry().register(LeadCaptureForm);`,d=`"use client";
+
+import { formRenderer } from "@contractspec/lib.design-system/renderers/form-contract";
+import { LeadCaptureForm } from "../contracts/forms/lead-capture.form";
+
+export function LeadCapturePanel() {
+  return formRenderer.render(LeadCaptureForm, {
+    defaultValues: { newsletter: true },
+    overrides: {
+      onSubmitOverride: async (values, actionKey) => {
+        await fetch("/api/leads", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ actionKey, values }),
+        });
+      },
+    },
+  });
+}`,p=`bun add @contractspec/example.form-showcase
+
+# Full form-only example docs
+open https://www.contractspec.io/docs/examples/form-showcase
+
+# Template catalog filtered to forms
+open https://www.contractspec.io/templates?tag=forms
+
+# Sandbox spec preview
+open https://www.contractspec.io/sandbox?template=form-showcase`;export{d as leadCapturePanelCode,s as leadCaptureFormCode,p as formShowcaseTemplateCode};

package/dist/node/components/docs/guides/GuideContractDrivenFormsPage.js

@@ -0,0 +1,94 @@
+var v=Object.defineProperty;var N=(o)=>o;function F(o,r){this[o]=N.bind(null,r)}var L=(o,r)=>{for(var i in r)v(o,i,{get:r[i],enumerable:!0,configurable:!0,set:F.bind(r,i)})};var R=(o,r)=>()=>(o&&(r=o(o=0)),r);import S from"@contractspec/lib.ui-link";import{jsx as c,jsxs as z}from"react/jsx-runtime";function s({title:o="Need the operating layer on top of OSS ContractSpec?",body:r="ContractSpec Studio helps teams turn evidence into proposed spec changes, governed delivery loops, and execution-ready task packs while keeping the open contract system as the source of truth.",ctaLabel:i="See what Studio adds",href:h="https://www.contractspec.studio/docs"}){return z("div",{className:"card-subtle space-y-3 p-6",children:[c("h3",{className:"font-semibold text-lg",children:o}),c("p",{className:"text-muted-foreground text-sm",children:r}),c(S,{href:h,className:"btn-primary",children:i})]})}var f=`import {
+  defineFormSpec,
+  FormRegistry,
+  responsiveFormColumns,
+} from "@contractspec/lib.contracts-spec/forms";
+import { fromZod } from "@contractspec/lib.schema";
+import { z } from "zod";
+
+const LeadCaptureModel = fromZod(
+  z.object({
+    fullName: z.string().min(1),
+    email: z.string().email(),
+    company: z.string().min(1),
+    intent: z.enum(["demo", "pricing", "pilot"]),
+    notes: z.string().max(1000).optional(),
+    newsletter: z.boolean().optional(),
+  }),
+  { name: "LeadCaptureModel" },
+);
+
+export const LeadCaptureForm = defineFormSpec({
+  meta: {
+    key: "marketing.lead.form",
+    version: "1.0.0",
+    title: "Lead capture form",
+    description: "Collect qualified OSS and Studio leads.",
+    domain: "marketing",
+    owners: ["@growth"],
+    tags: ["forms", "leads"],
+    stability: "experimental",
+  },
+  model: LeadCaptureModel,
+  layout: {
+    columns: responsiveFormColumns(2),
+    gap: "md",
+    flow: {
+      kind: "sections",
+      sections: [
+        { key: "identity", titleI18n: "Who you are", fieldNames: ["fullName", "email", "company"] },
+        { key: "request", titleI18n: "What you need", fieldNames: ["intent", "notes", "newsletter"] },
+      ],
+    },
+  },
+  fields: [
+    { kind: "text", name: "fullName", labelI18n: "Full name", required: true, autoComplete: "name" },
+    { kind: "email", name: "email", labelI18n: "Work email", required: true, autoComplete: "email" },
+    { kind: "text", name: "company", labelI18n: "Company", required: true, autoComplete: "organization" },
+    {
+      kind: "select",
+      name: "intent",
+      labelI18n: "Primary goal",
+      required: true,
+      options: [
+        { labelI18n: "Book a demo", value: "demo" },
+        { labelI18n: "Understand pricing", value: "pricing" },
+        { labelI18n: "Plan a pilot", value: "pilot" },
+      ],
+    },
+    { kind: "textarea", name: "notes", labelI18n: "Context", rows: 4, layout: { colSpan: "full" } },
+    { kind: "checkbox", name: "newsletter", labelI18n: "Send product updates" },
+  ],
+  actions: [{ key: "submit", labelI18n: "Send request", op: { name: "lead.create", version: "1.0.0" } }],
+  policy: { flags: ["lead-capture"], pii: ["fullName", "email", "company", "notes"] },
+  renderHints: { ui: "shadcn", form: "react-hook-form" },
+});
+
+export const formRegistry = new FormRegistry().register(LeadCaptureForm);`,y=`"use client";
+
+import { formRenderer } from "@contractspec/lib.design-system/renderers/form-contract";
+import { LeadCaptureForm } from "../contracts/forms/lead-capture.form";
+
+export function LeadCapturePanel() {
+  return formRenderer.render(LeadCaptureForm, {
+    defaultValues: { newsletter: true },
+    overrides: {
+      onSubmitOverride: async (values, actionKey) => {
+        await fetch("/api/leads", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ actionKey, values }),
+        });
+      },
+    },
+  });
+}`,g=`bun add @contractspec/example.form-showcase
+
+# Full form-only example docs
+open https://www.contractspec.io/docs/examples/form-showcase
+
+# Template catalog filtered to forms
+open https://www.contractspec.io/templates?tag=forms
+
+# Sandbox spec preview
+open https://www.contractspec.io/sandbox?template=form-showcase`;import{CodeBlock as l}from"@contractspec/lib.design-system";import{HStack as C,VStack as a}from"@contractspec/lib.design-system/layout";import{List as I,ListItem as u}from"@contractspec/lib.design-system/list";import{Code as b,H1 as q,H2 as p,H3 as w,P as n,Text as m}from"@contractspec/lib.design-system/typography";import d from"@contractspec/lib.ui-link";import{ChevronRight as O}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";function _(){return t(a,{className:"space-y-8",children:[t(a,{className:"space-y-3",children:[e(q,{className:"font-bold text-4xl",children:"Build a contract-driven form"}),e(n,{className:"text-lg text-muted-foreground",children:"Define form data, fields, layout, policy, and submit behavior once, then let your app render from the same ContractSpec surface."})]}),t(a,{className:"card-subtle space-y-4 p-6",children:[e(p,{className:"font-bold text-2xl",children:"What you'll build"}),t(I,{className:"space-y-2 text-muted-foreground text-sm",children:[e(u,{children:e(m,{children:"A schema-backed FormSpec for a lead capture form."})}),e(u,{children:e(m,{children:"A FormRegistry that exposes the latest version by stable key."})}),e(u,{children:e(m,{children:"A React renderer that keeps UI, validation, and policy aligned."})})]})]}),t(a,{className:"space-y-6",children:[t(a,{className:"space-y-3",children:[e(p,{className:"font-bold text-2xl",children:"1) Define the form spec"}),t(n,{className:"text-muted-foreground text-sm",children:["Create ",e(b,{children:"src/contracts/forms/lead-capture.form.ts"}),":"]}),e(l,{language:"typescript",filename:"src/contracts/forms/lead-capture.form.ts",code:f})]}),t(a,{className:"card-subtle space-y-3 p-6",children:[e(w,{className:"font-semibold text-lg",children:"Need every form field?"}),t(n,{className:"text-muted-foreground text-sm",children:["Start from the"," ",e(d,{href:"/docs/examples/form-showcase",children:"Form Showcase example"})," ","or the"," ",e(d,{href:"/templates?tag=forms",children:"form template catalog"}),". It is focused only on forms and covers field kinds, section layouts, step layouts, arrays, groups, conditionals, and validation hints."]}),e(l,{language:"bash",filename:"form-showcase-template",code:g})]}),t(a,{className:"space-y-3",children:[e(p,{className:"font-bold text-2xl",children:"2) Render from the contract"}),e(n,{className:"text-muted-foreground text-sm",children:"Use the shared renderer, or provide your own driver if your app uses a different component library."}),e(l,{language:"tsx",filename:"src/components/LeadCapturePanel.tsx",code:y})]}),t(a,{className:"space-y-3",children:[e(p,{className:"font-bold text-2xl",children:"3) Validate and evolve"}),e(l,{language:"bash",filename:"validate-form",code:"contractspec validate src/contracts/forms/lead-capture.form.ts"}),t(n,{className:"text-muted-foreground text-sm",children:["Expected output: ",e(b,{children:"Validation passed"}),". When the form becomes public contract surface, version changes deliberately instead of editing field meaning in place."]})]}),t(a,{className:"card-subtle space-y-3 p-6",children:[e(w,{className:"font-semibold text-lg",children:"Repo tutorial"}),e(n,{className:"text-muted-foreground text-sm",children:"The repository guide adds the longer implementation checklist, custom renderer notes, and rollout rules."}),e(l,{language:"bash",filename:"repo-guide",code:"open docs/tutorials/contract-driven-forms.md"})]}),e(s,{title:"Need governed form changes?",body:"Studio can connect form edits to customer evidence, approval packets, and rollout checks before teams regenerate public surfaces."})]}),t(C,{className:"flex items-center gap-4 pt-4",children:[t(d,{href:"/docs/guides/generate-docs-clients-schemas",className:"btn-primary",children:[e(m,{children:"Next: Generate docs + clients"}),e(O,{size:16})]}),e(d,{href:"/docs/guides",className:"btn-ghost",children:e(m,{children:"Back to guides"})})]})]})}export{_ as GuideContractDrivenFormsPage};

package/dist/node/components/docs/guides/GuideSpecValidationTypingPage.js

@@ -60,4 +60,4 @@ export const ContactCreateCommand = defineCommand({
 cd packages/examples/crm-pipeline
 bun install
 bun run build
-bun run validate`})]}),e(r,{title:"Need validation tied to real outcomes?",body:"Studio links checks to evidence, focus decisions, and post-release verification so specs evolve with product truth."})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[t(s,{href:"/docs/guides/generate-docs-clients-schemas",className:"btn-primary",children:["Next: Generate docs + clients ",e(f,{size:16})]}),e(s,{href:"/docs/guides",className:"btn-ghost",children:"Back to guides"})]})]})}export{O as GuideSpecValidationTypingPage};
+bun run validate`})]}),e(r,{title:"Need validation tied to real outcomes?",body:"Studio links checks to evidence, focus decisions, and post-release verification so specs evolve with product truth."})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[t(s,{href:"/docs/guides/contract-driven-forms",className:"btn-primary",children:["Next: Contract-driven forms ",e(f,{size:16})]}),e(s,{href:"/docs/guides",className:"btn-ghost",children:"Back to guides"})]})]})}export{O as GuideSpecValidationTypingPage};

package/dist/node/components/docs/guides/GuidesIndexPage.js

@@ -1,5 +1,5 @@
-var r=Object.defineProperty;var s=(t)=>t;function o(t,a){this[t]=s.bind(null,a)}var u=(t,a)=>{for(var n in a)r(t,n,{get:a[n],enumerable:!0,configurable:!0,set:o.bind(a,n)})};var f=(t,a)=>()=>(t&&(a=t(t=0)),a);import{CodeBlock as d}from"@contractspec/lib.design-system";import c from"@contractspec/lib.ui-link";import{ArrowRight as l,CheckCircle2 as m,GitBranch as p}from"lucide-react";import{jsx as e,jsxs as i}from"react/jsx-runtime";var h=[{title:"Adopt one endpoint in Next.js",description:"Start inside a live app with one operation, one generated surface, and one clearly bounded change.",href:"/docs/guides/nextjs-one-endpoint",time:"25 min"},{title:"Import an existing codebase",description:"Stabilize what already exists instead of treating adoption as a rewrite project.",href:"/docs/guides/import-existing-codebases",time:"20 min"},{title:"Validation and typing",description:"Keep runtime validation and TypeScript behavior aligned from the same source definitions.",href:"/docs/guides/spec-validation-and-typing",time:"20 min"},{title:"Generate docs and clients",description:"Publish stable docs, schemas, and client-facing artifacts from the contract layer.",href:"/docs/guides/generate-docs-clients-schemas",time:"20 min"},{title:"Docs pipeline",description:"Feed generated reference material into the docs site without confusing ownership.",href:"/docs/guides/docs-generation-pipeline",time:"20 min"},{title:"Build a first module bundle",description:"Define one bundle spec, resolve a surface plan, and render it through the React host layer.",href:"/docs/guides/first-module-bundle",time:"20 min"},{title:"Host the Builder workbench",description:"Wire a Builder workspace snapshot, common commands, runtime modes, and mobile review links into the reusable host.",href:"/docs/guides/host-builder-workbench",time:"20 min"},{title:"Use Connect in a repo",description:"Enable Connect, verify agent actions locally, and inspect the resulting review and replay artifacts.",href:"/docs/guides/connect-in-a-repo",time:"15 min"},{title:"Author release capsules",description:"Pair changesets with structured release capsules and generate the artifacts that changelog and upgrade flows consume.",href:"/docs/guides/release-capsules",time:"15 min"},{title:"CI diff gating",description:"Use deterministic checks to catch drift and risky changes before they ship.",href:"/docs/guides/ci-contract-diff-gating",time:"15 min"}];function w(){return i("div",{className:"space-y-10",children:[i("div",{className:"space-y-3",children:[e("p",{className:"editorial-kicker",children:"Build"}),e("h1",{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"Adoption guides for teams that want to keep their code."}),e("p",{className:"max-w-3xl text-lg text-muted-foreground leading-8",children:"These guides assume you are introducing ContractSpec into a real code base. Start with a narrow surface, verify the generated outputs, and expand only after the contract loop feels trustworthy."})]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:h.map((t)=>i(c,{href:t.href,className:"editorial-panel",children:[i("div",{className:"flex items-start justify-between gap-4",children:[i("div",{children:[e("h2",{className:"font-semibold text-xl",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.description})]}),e(l,{className:"mt-1 shrink-0",size:18})]}),i("div",{className:"mt-4 flex items-center gap-2 text-muted-foreground text-xs",children:[e(m,{size:14}),i("span",{children:["Target time: ",t.time]})]})]},t.href))}),i("div",{className:"editorial-panel space-y-4",children:[i("div",{className:"flex items-center gap-2 font-semibold text-[color:var(--rust)] text-sm uppercase tracking-[0.2em]",children:[e(p,{size:16}),"Working style"]}),i("ul",{className:"editorial-list",children:[i("li",{children:[e("span",{className:"editorial-list-marker"}),e("span",{children:"Run each guide in a branch or sandboxed workspace."})]}),i("li",{children:[e("span",{className:"editorial-list-marker"}),e("span",{children:"Prefer one bounded surface at a time: one endpoint, one workflow, one integration, one unsafe module."})]}),i("li",{children:[e("span",{className:"editorial-list-marker"}),e("span",{children:"Use the example and reference outputs to verify what changed, not just the narrative page."})]})]}),e(d,{language:"bash",filename:"guides-quickstart",code:`# list example systems
+var r=Object.defineProperty;var s=(t)=>t;function o(t,a){this[t]=s.bind(null,a)}var u=(t,a)=>{for(var n in a)r(t,n,{get:a[n],enumerable:!0,configurable:!0,set:o.bind(a,n)})};var f=(t,a)=>()=>(t&&(a=t(t=0)),a);import{CodeBlock as d}from"@contractspec/lib.design-system";import c from"@contractspec/lib.ui-link";import{ArrowRight as l,CheckCircle2 as m,GitBranch as p}from"lucide-react";import{jsx as e,jsxs as i}from"react/jsx-runtime";var h=[{title:"Adopt one endpoint in Next.js",description:"Start inside a live app with one operation, one generated surface, and one clearly bounded change.",href:"/docs/guides/nextjs-one-endpoint",time:"25 min"},{title:"Import an existing codebase",description:"Stabilize what already exists instead of treating adoption as a rewrite project.",href:"/docs/guides/import-existing-codebases",time:"20 min"},{title:"Validation and typing",description:"Keep runtime validation and TypeScript behavior aligned from the same source definitions.",href:"/docs/guides/spec-validation-and-typing",time:"20 min"},{title:"Build a contract-driven form",description:"Use FormSpec to keep data shape, fields, layout, policy, and submit behavior aligned.",href:"/docs/guides/contract-driven-forms",time:"25 min"},{title:"Generate docs and clients",description:"Publish stable docs, schemas, and client-facing artifacts from the contract layer.",href:"/docs/guides/generate-docs-clients-schemas",time:"20 min"},{title:"Docs pipeline",description:"Feed generated reference material into the docs site without confusing ownership.",href:"/docs/guides/docs-generation-pipeline",time:"20 min"},{title:"Build a first module bundle",description:"Define one bundle spec, resolve a surface plan, and render it through the React host layer.",href:"/docs/guides/first-module-bundle",time:"20 min"},{title:"Host the Builder workbench",description:"Wire a Builder workspace snapshot, common commands, runtime modes, and mobile review links into the reusable host.",href:"/docs/guides/host-builder-workbench",time:"20 min"},{title:"Use Connect in a repo",description:"Enable Connect, verify agent actions locally, and inspect the resulting review and replay artifacts.",href:"/docs/guides/connect-in-a-repo",time:"15 min"},{title:"Author release capsules",description:"Pair changesets with structured release capsules and generate the artifacts that changelog and upgrade flows consume.",href:"/docs/guides/release-capsules",time:"15 min"},{title:"CI diff gating",description:"Use deterministic checks to catch drift and risky changes before they ship.",href:"/docs/guides/ci-contract-diff-gating",time:"15 min"}];function y(){return i("div",{className:"space-y-10",children:[i("div",{className:"space-y-3",children:[e("p",{className:"editorial-kicker",children:"Build"}),e("h1",{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"Adoption guides for teams that want to keep their code."}),e("p",{className:"max-w-3xl text-lg text-muted-foreground leading-8",children:"These guides assume you are introducing ContractSpec into a real code base. Start with a narrow surface, verify the generated outputs, and expand only after the contract loop feels trustworthy."})]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:h.map((t)=>i(c,{href:t.href,className:"editorial-panel",children:[i("div",{className:"flex items-start justify-between gap-4",children:[i("div",{children:[e("h2",{className:"font-semibold text-xl",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.description})]}),e(l,{className:"mt-1 shrink-0",size:18})]}),i("div",{className:"mt-4 flex items-center gap-2 text-muted-foreground text-xs",children:[e(m,{size:14}),i("span",{children:["Target time: ",t.time]})]})]},t.href))}),i("div",{className:"editorial-panel space-y-4",children:[i("div",{className:"flex items-center gap-2 font-semibold text-[color:var(--rust)] text-sm uppercase tracking-[0.2em]",children:[e(p,{size:16}),"Working style"]}),i("ul",{className:"editorial-list",children:[i("li",{children:[e("span",{className:"editorial-list-marker"}),e("span",{children:"Run each guide in a branch or sandboxed workspace."})]}),i("li",{children:[e("span",{className:"editorial-list-marker"}),e("span",{children:"Prefer one bounded surface at a time: one endpoint, one workflow, one integration, one unsafe module."})]}),i("li",{children:[e("span",{className:"editorial-list-marker"}),e("span",{children:"Use the example and reference outputs to verify what changed, not just the narrative page."})]})]}),e(d,{language:"bash",filename:"guides-quickstart",code:`# list example systems
 contractspec examples list
 
 # validate the examples in this workspace
-contractspec examples validate --repo-root .`})]})]})}export{w as GuidesIndexPage};
+contractspec examples validate --repo-root .`})]})]})}export{y as GuidesIndexPage};

package/dist/node/components/docs/guides/guides.docblocks.js

@@ -4,7 +4,9 @@ Hands-on, runnable guides that map to real adoption scenarios. Each guide includ
 
 Create a single OperationSpec, register it, and expose it through a Next.js App Router handler.`},{id:"docs.guides.spec-validation-typing",title:"Spec validation and typing",summary:"Define an operation spec with validation and types, no rewrites.",kind:"usage",visibility:"public",route:"/docs/guides/spec-validation-and-typing",tags:["guides","validation","typing"],body:`# Spec-driven validation and typing
 
-Define command/query specs that enforce validation and generate types without rewriting your app.`},{id:"docs.guides.docs-clients-schemas",title:"Generate docs, clients, schemas",summary:"Generate docs and OpenAPI for client SDKs from specs.",kind:"usage",visibility:"public",route:"/docs/guides/generate-docs-clients-schemas",tags:["guides","docs","openapi"],body:`# Generate docs and client schemas
+Define command/query specs that enforce validation and generate types without rewriting your app.`},{id:"docs.guides.contract-driven-forms",title:"Contract-driven forms",summary:"Define schema-backed FormSpec surfaces and render them safely.",kind:"usage",visibility:"public",route:"/docs/guides/contract-driven-forms",tags:["guides","forms","ui"],body:`# Build a contract-driven form
+
+Define a FormSpec with model, fields, layout, policy, and actions, then render it through a shared or app-specific renderer.`},{id:"docs.guides.docs-clients-schemas",title:"Generate docs, clients, schemas",summary:"Generate docs and OpenAPI for client SDKs from specs.",kind:"usage",visibility:"public",route:"/docs/guides/generate-docs-clients-schemas",tags:["guides","docs","openapi"],body:`# Generate docs and client schemas
 
 Use ContractSpec to generate documentation and OpenAPI exports for client SDKs.