@contractspec/bundle.library 3.8.10 → 3.8.11

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

@@ -1,98 +1,4 @@
-// src/components/docs/getting-started/CLIPage.tsx
-import { CodeBlock, InstallCommand } from "@contractspec/lib.design-system";
-import Link from "@contractspec/lib.ui-link";
-import { ChevronRight } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function CLIPage() {
-  const commands = [
-    {
-      name: "create",
-      description: "Interactive wizard to create contract specifications",
-      usage: "contractspec create [--type operation] [--ai]"
-    },
-    {
-      name: "build",
-      description: "Generate implementation code from contract specs using AI agents",
-      usage: "contractspec build <spec-file> [--agent-mode claude-code]"
-    },
-    {
-      name: "validate",
-      description: "Validate contract specifications and implementations",
-      usage: "contractspec validate <spec-file> [--check-implementation]"
-    },
-    {
-      name: "list",
-      description: "List all contract specifications in the project",
-      usage: "contractspec list [--type operation] [--json]"
-    },
-    {
-      name: "watch",
-      description: "Watch specs and auto-regenerate on changes",
-      usage: "contractspec watch [--build] [--validate]"
-    },
-    {
-      name: "sync",
-      description: "Sync contracts by building all discovered specs",
-      usage: "contractspec sync [--dry-run]"
-    },
-    {
-      name: "ci",
-      description: "Run all validation checks for CI/CD pipelines",
-      usage: "contractspec ci [--format sarif] [--output results.sarif]"
-    },
-    {
-      name: "deps",
-      description: "Analyze contract dependencies and relationships",
-      usage: "contractspec deps [--circular] [--format dot]"
-    },
-    {
-      name: "diff",
-      description: "Compare contract specifications and show differences",
-      usage: "contractspec diff <spec1> <spec2> [--breaking]"
-    }
-  ];
-  return /* @__PURE__ */ jsxs("div", {
-    className: "space-y-8",
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-2",
-        children: [
-          /* @__PURE__ */ jsx("h1", {
-            className: "font-bold text-4xl",
-            children: "ContractSpec CLI"
-          }),
-          /* @__PURE__ */ jsx("p", {
-            className: "text-lg text-muted-foreground",
-            children: "Command-line interface for creating, building, and validating contract specifications with AI-powered code generation."
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-6",
-        children: [
-          /* @__PURE__ */ jsxs("div", {
-            className: "space-y-3",
-            children: [
-              /* @__PURE__ */ jsx("h2", {
-                className: "font-bold text-2xl",
-                children: "Installation"
-              }),
-              /* @__PURE__ */ jsx(InstallCommand, {
-                package: "contractspec",
-                dev: true
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsxs("div", {
-            className: "space-y-3",
-            children: [
-              /* @__PURE__ */ jsx("h2", {
-                className: "font-bold text-2xl",
-                children: "Quick Start"
-              }),
-              /* @__PURE__ */ jsx(CodeBlock, {
-                language: "bash",
-                code: `# Initialize project
+import{CodeBlock as c,InstallCommand as i}from"@contractspec/lib.design-system";import o from"@contractspec/lib.ui-link";import{ChevronRight as n}from"lucide-react";import{jsx as e,jsxs as a}from"react/jsx-runtime";function p(){return a("div",{className:"space-y-8",children:[a("div",{className:"space-y-2",children:[e("h1",{className:"font-bold text-4xl",children:"ContractSpec CLI"}),e("p",{className:"text-lg text-muted-foreground",children:"Command-line interface for creating, building, and validating contract specifications with AI-powered code generation."})]}),a("div",{className:"space-y-6",children:[a("div",{className:"space-y-3",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(i,{package:"contractspec",dev:!0})]}),a("div",{className:"space-y-3",children:[e("h2",{className:"font-bold text-2xl",children:"Quick Start"}),e(c,{language:"bash",code:`# Initialize project
 bunx contractspec init
 
 # Create a spec
@@ -102,155 +8,13 @@ contractspec create --type operation
 contractspec build src/contracts/mySpec.ts
 
 # Validate
-contractspec validate src/contracts/mySpec.ts`
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsxs("div", {
-            className: "space-y-4",
-            children: [
-              /* @__PURE__ */ jsx("h2", {
-                className: "font-bold text-2xl",
-                children: "Commands"
-              }),
-              /* @__PURE__ */ jsx("div", {
-                className: "grid gap-4",
-                children: commands.map((cmd) => /* @__PURE__ */ jsxs("div", {
-                  className: "card-subtle space-y-2 p-4",
-                  children: [
-                    /* @__PURE__ */ jsx("h3", {
-                      className: "font-bold font-mono text-violet-400",
-                      children: cmd.name
-                    }),
-                    /* @__PURE__ */ jsx("p", {
-                      className: "text-muted-foreground text-sm",
-                      children: cmd.description
-                    }),
-                    /* @__PURE__ */ jsx(CodeBlock, {
-                      language: "bash",
-                      code: cmd.usage,
-                      showCopyButton: false
-                    })
-                  ]
-                }, cmd.name))
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsxs("div", {
-            className: "space-y-3",
-            children: [
-              /* @__PURE__ */ jsx("h2", {
-                className: "font-bold text-2xl",
-                children: "AI Agent Modes"
-              }),
-              /* @__PURE__ */ jsx("p", {
-                className: "text-muted-foreground",
-                children: "The CLI supports multiple AI agent modes for different use cases:"
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "grid gap-3 md:grid-cols-2",
-                children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    className: "card-subtle p-4",
-                    children: [
-                      /* @__PURE__ */ jsx("h4", {
-                        className: "font-bold",
-                        children: "simple"
-                      }),
-                      /* @__PURE__ */ jsx("p", {
-                        className: "text-muted-foreground text-sm",
-                        children: "Direct LLM API calls, fast and straightforward. Best for rapid prototyping."
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs("div", {
-                    className: "card-subtle p-4",
-                    children: [
-                      /* @__PURE__ */ jsx("h4", {
-                        className: "font-bold",
-                        children: "claude-code"
-                      }),
-                      /* @__PURE__ */ jsx("p", {
-                        className: "text-muted-foreground text-sm",
-                        children: "Extended thinking with Claude. Best for production-quality code."
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs("div", {
-                    className: "card-subtle p-4",
-                    children: [
-                      /* @__PURE__ */ jsx("h4", {
-                        className: "font-bold",
-                        children: "openai-codex"
-                      }),
-                      /* @__PURE__ */ jsx("p", {
-                        className: "text-muted-foreground text-sm",
-                        children: "GPT-4o/o1 models. Excellent for algorithms and optimization."
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs("div", {
-                    className: "card-subtle p-4",
-                    children: [
-                      /* @__PURE__ */ jsx("h4", {
-                        className: "font-bold",
-                        children: "cursor"
-                      }),
-                      /* @__PURE__ */ jsx("p", {
-                        className: "text-muted-foreground text-sm",
-                        children: "Leverages Cursor agentic capabilities. Requires Cursor environment."
-                      })
-                    ]
-                  })
-                ]
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsxs("div", {
-            className: "space-y-3",
-            children: [
-              /* @__PURE__ */ jsx("h2", {
-                className: "font-bold text-2xl",
-                children: "CI/CD Integration"
-              }),
-              /* @__PURE__ */ jsx("p", {
-                className: "text-muted-foreground",
-                children: "Run all validation checks in CI/CD with machine-readable output:"
-              }),
-              /* @__PURE__ */ jsx(CodeBlock, {
-                language: "yaml",
-                filename: ".github/workflows/validate.yml",
-                code: `- name: Validate Contracts
+contractspec validate src/contracts/mySpec.ts`})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Commands"}),e("div",{className:"grid gap-4",children:[{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((t)=>a("div",{className:"card-subtle space-y-2 p-4",children:[e("h3",{className:"font-bold font-mono text-violet-400",children:t.name}),e("p",{className:"text-muted-foreground text-sm",children:t.description}),e(c,{language:"bash",code:t.usage,showCopyButton:!1})]},t.name))})]}),a("div",{className:"space-y-3",children:[e("h2",{className:"font-bold text-2xl",children:"AI Agent Modes"}),e("p",{className:"text-muted-foreground",children:"The CLI supports multiple AI agent modes for different use cases:"}),a("div",{className:"grid gap-3 md:grid-cols-2",children:[a("div",{className:"card-subtle p-4",children:[e("h4",{className:"font-bold",children:"simple"}),e("p",{className:"text-muted-foreground text-sm",children:"Direct LLM API calls, fast and straightforward. Best for rapid prototyping."})]}),a("div",{className:"card-subtle p-4",children:[e("h4",{className:"font-bold",children:"claude-code"}),e("p",{className:"text-muted-foreground text-sm",children:"Extended thinking with Claude. Best for production-quality code."})]}),a("div",{className:"card-subtle p-4",children:[e("h4",{className:"font-bold",children:"openai-codex"}),e("p",{className:"text-muted-foreground text-sm",children:"GPT-4o/o1 models. Excellent for algorithms and optimization."})]}),a("div",{className:"card-subtle p-4",children:[e("h4",{className:"font-bold",children:"cursor"}),e("p",{className:"text-muted-foreground text-sm",children:"Leverages Cursor agentic capabilities. Requires Cursor environment."})]})]})]}),a("div",{className:"space-y-3",children:[e("h2",{className:"font-bold text-2xl",children:"CI/CD Integration"}),e("p",{className:"text-muted-foreground",children:"Run all validation checks in CI/CD with machine-readable output:"}),e(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`
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsxs("div", {
-            className: "card-subtle space-y-4 p-6",
-            children: [
-              /* @__PURE__ */ jsx("h3", {
-                className: "font-bold",
-                children: "Configuration"
-              }),
-              /* @__PURE__ */ jsxs("p", {
-                className: "text-muted-foreground text-sm",
-                children: [
-                  "Create a ",
-                  /* @__PURE__ */ jsx("code", {
-                    children: ".contractsrc.json"
-                  }),
-                  " file in your project root:"
-                ]
-              }),
-              /* @__PURE__ */ jsx(CodeBlock, {
-                language: "json",
-                filename: ".contractsrc.json",
-                code: `{
+    sarif_file: results.sarif`})]}),a("div",{className:"card-subtle space-y-4 p-6",children:[e("h3",{className:"font-bold",children:"Configuration"}),a("p",{className:"text-muted-foreground text-sm",children:["Create a ",e("code",{children:".contractsrc.json"})," file in your project root:"]}),e(c,{language:"json",filename:".contractsrc.json",code:`{
   "aiProvider": "claude",
   "agentMode": "claude-code",
   "outputDir": "./src",
@@ -258,35 +22,4 @@ contractspec validate src/contracts/mySpec.ts`
     "operations": "interactions/commands|queries",
     "events": "events"
   }
-}`
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "flex items-center gap-4 pt-4",
-        children: [
-          /* @__PURE__ */ jsxs(Link, {
-            href: "/docs/getting-started/tools/vscode",
-            className: "btn-primary",
-            children: [
-              "Next: VS Code Extension ",
-              /* @__PURE__ */ jsx(ChevronRight, {
-                size: 16
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx(Link, {
-            href: "/docs/getting-started/tools",
-            className: "btn-ghost",
-            children: "Back to Tools"
-          })
-        ]
-      })
-    ]
-  });
-}
-export {
-  CLIPage
-};
+}`})]})]}),a("div",{className:"flex items-center gap-4 pt-4",children:[a(o,{href:"/docs/getting-started/tools/vscode",className:"btn-primary",children:["Next: VS Code Extension ",e(n,{size:16})]}),e(o,{href:"/docs/getting-started/tools",className:"btn-ghost",children:"Back to Tools"})]})]})}export{p as CLIPage};

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

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

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

@@ -1,40 +1,4 @@
-// src/components/docs/getting-started/DataViewTutorialPage.tsx
-import { CodeBlock } from "@contractspec/lib.design-system";
-import Link from "@contractspec/lib.ui-link";
-import { ChevronRight } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function DataViewTutorialPage() {
-  return /* @__PURE__ */ jsxs("div", {
-    className: "space-y-8",
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx("h1", {
-            className: "font-bold text-4xl",
-            children: "Display Data with DataViews"
-          }),
-          /* @__PURE__ */ jsx("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."
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "font-bold text-2xl",
-            children: "1. Define the underlying query"
-          }),
-          /* @__PURE__ */ jsx("p", {
-            className: "text-muted-foreground",
-            children: "First, create a query operation to fetch the data:"
-          }),
-          /* @__PURE__ */ jsx(CodeBlock, {
-            language: "typescript",
-            filename: "lib/specs/billing/list-transactions.ts",
-            code: `import { defineQuery } from '@contractspec/lib.contracts-spec';
+import{CodeBlock as a}from"@contractspec/lib.design-system";import i from"@contractspec/lib.ui-link";import{ChevronRight as s}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";function l(){return t("div",{className:"space-y-8",children:[t("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"Display Data with DataViews"}),e("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."})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"1. Define the underlying query"}),e("p",{className:"text-muted-foreground",children:"First, create a query operation to fetch the data:"}),e(a,{language:"typescript",filename:"lib/specs/billing/list-transactions.ts",code:`import { defineQuery } from '@contractspec/lib.contracts-spec';
 
 export const ListTransactions = defineQuery({
   meta: {
@@ -47,25 +11,7 @@ export const ListTransactions = defineQuery({
     output: /* array of transactions */,
   },
   policy: { auth: 'user' },
-});`
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "font-bold text-2xl",
-            children: "2. Define the DataView spec"
-          }),
-          /* @__PURE__ */ jsx("p", {
-            className: "text-muted-foreground",
-            children: "Wrap your query with presentation metadata:"
-          }),
-          /* @__PURE__ */ jsx(CodeBlock, {
-            language: "typescript",
-            filename: "lib/specs/billing/transaction-history.data-view.ts",
-            code: `import { defineDataView } from '@contractspec/lib.contracts-spec';
+});`})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"2. Define the DataView spec"}),e("p",{className:"text-muted-foreground",children:"Wrap your query with presentation metadata:"}),e(a,{language:"typescript",filename:"lib/specs/billing/transaction-history.data-view.ts",code:`import { defineDataView } from '@contractspec/lib.contracts-spec';
 import { ListTransactions } from './list-transactions';
 
 export const TransactionHistory = defineDataView({
@@ -134,25 +80,7 @@ export const TransactionHistory = defineDataView({
     defaultSort: { field: 'date', direction: 'desc' },
     pagination: { pageSize: 25 },
   },
-});`
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "font-bold text-2xl",
-            children: "3. Render on the frontend"
-          }),
-          /* @__PURE__ */ jsx("p", {
-            className: "text-muted-foreground",
-            children: "Use the runtime renderer in your React or React Native app:"
-          }),
-          /* @__PURE__ */ jsx(CodeBlock, {
-            language: "tsx",
-            filename: "app/dashboard/transactions/page.tsx",
-            code: `'use client';
+});`})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"3. Render on the frontend"}),e("p",{className:"text-muted-foreground",children:"Use the runtime renderer in your React or React Native app:"}),e(a,{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';
@@ -177,62 +105,4 @@ export function TransactionsPage() {
       />
     </div>
   );
-}`
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "card-subtle space-y-4 p-6",
-        children: [
-          /* @__PURE__ */ jsx("h3", {
-            className: "font-bold",
-            children: "Why DataViews?"
-          }),
-          /* @__PURE__ */ jsxs("ul", {
-            className: "space-y-2 text-muted-foreground text-sm",
-            children: [
-              /* @__PURE__ */ jsx("li", {
-                children: "Same spec renders on web (React) and mobile (React Native)"
-              }),
-              /* @__PURE__ */ jsx("li", {
-                children: "Filters, sorting, and pagination handled automatically"
-              }),
-              /* @__PURE__ */ jsx("li", {
-                children: "Format rules (currency, dates, badges) applied consistently"
-              }),
-              /* @__PURE__ */ jsx("li", {
-                children: "Export to CSV/PDF using the same spec"
-              }),
-              /* @__PURE__ */ jsx("li", {
-                children: "A/B test different layouts without touching the backend"
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "flex items-center gap-4 pt-4",
-        children: [
-          /* @__PURE__ */ jsxs(Link, {
-            href: "/docs/libraries/data-views",
-            className: "btn-primary",
-            children: [
-              "DataView API Reference ",
-              /* @__PURE__ */ jsx(ChevronRight, {
-                size: 16
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx(Link, {
-            href: "/docs/specs/workflows",
-            className: "btn-ghost",
-            children: "Next: Workflows"
-          })
-        ]
-      })
-    ]
-  });
-}
-export {
-  DataViewTutorialPage
-};
+}`})]}),t("div",{className:"card-subtle space-y-4 p-6",children:[e("h3",{className:"font-bold",children:"Why DataViews?"}),t("ul",{className:"space-y-2 text-muted-foreground text-sm",children:[e("li",{children:"Same spec renders on web (React) and mobile (React Native)"}),e("li",{children:"Filters, sorting, and pagination handled automatically"}),e("li",{children:"Format rules (currency, dates, badges) applied consistently"}),e("li",{children:"Export to CSV/PDF using the same spec"}),e("li",{children:"A/B test different layouts without touching the backend"})]})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[t(i,{href:"/docs/libraries/data-views",className:"btn-primary",children:["DataView API Reference ",e(s,{size:16})]}),e(i,{href:"/docs/specs/workflows",className:"btn-ghost",children:"Next: Workflows"})]})]})}export{l as DataViewTutorialPage};