@contractspec/bundle.library 1.11.1 → 1.13.0

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

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

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

@@ -0,0 +1,238 @@
+// src/components/docs/getting-started/DataViewTutorialPage.tsx
+import Link from "@contractspec/lib.ui-link";
+import { ChevronRight } from "lucide-react";
+import { CodeBlock } from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function DataViewTutorialPage() {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h1", {
+            className: "text-4xl font-bold",
+            children: "Display Data with DataViews"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-lg",
+            children: "Define a filterable, sortable transaction history view that works across web and mobile without duplicating UI code."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "1. Define the underlying query"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "First, create a query operation to fetch the data:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(CodeBlock, {
+            language: "typescript",
+            filename: "lib/specs/billing/list-transactions.ts",
+            code: `import { defineQuery } from '@contractspec/lib.contracts';
+
+export const ListTransactions = defineQuery({
+  meta: {
+    key: 'billing.listTransactions',
+    version: '1.0.0',
+    description: 'Fetch customer transaction history',
+  },
+  io: {
+    input: /* pagination + filters */,
+    output: /* array of transactions */,
+  },
+  policy: { auth: 'user' },
+});`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "2. Define the DataView spec"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "Wrap your query with presentation metadata:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(CodeBlock, {
+            language: "typescript",
+            filename: "lib/specs/billing/transaction-history.data-view.ts",
+            code: `import { defineDataView } from '@contractspec/lib.contracts';
+import { ListTransactions } from './list-transactions';
+
+export const TransactionHistory = defineDataView({
+  meta: {
+    key: 'billing.transactionHistory',
+    version: '1.0.0',
+    entity: 'transaction',
+    description: 'Customer payment history',
+    goal: 'Help customers track spending',
+    context: 'Account dashboard',
+    owners: ['team-billing'],
+    stability: 'stable',
+    tags: ['payments'],
+  },
+  source: {
+    primary: ListTransactions,
+  },
+  view: {
+    kind: 'list',
+    fields: [
+      {
+        key: 'date',
+        label: 'Date',
+        dataPath: 'createdAt',
+        format: 'date',
+        sortable: true
+      },
+      {
+        key: 'description',
+        label: 'Description',
+        dataPath: 'description'
+      },
+      {
+        key: 'amount',
+        label: 'Amount',
+        dataPath: 'amount',
+        format: 'currency',
+        sortable: true
+      },
+      {
+        key: 'status',
+        label: 'Status',
+        dataPath: 'status',
+        format: 'badge'
+      },
+    ],
+    filters: [
+      {
+        key: 'status',
+        label: 'Status',
+        field: 'status',
+        type: 'enum',
+        options: [
+          { value: 'succeeded', label: 'Paid' },
+          { value: 'pending', label: 'Pending' },
+          { value: 'failed', label: 'Failed' },
+        ],
+      },
+      {
+        key: 'dateRange',
+        label: 'Date Range',
+        field: 'createdAt',
+        type: 'dateRange',
+      },
+    ],
+    defaultSort: { field: 'date', direction: 'desc' },
+    pagination: { pageSize: 25 },
+  },
+});`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "3. Render on the frontend"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "Use the runtime renderer in your React or React Native app:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(CodeBlock, {
+            language: "tsx",
+            filename: "app/dashboard/transactions/page.tsx",
+            code: `'use client';
+
+import { DataViewRenderer } from '@contractspec/lib.design-system';
+import { TransactionHistory } from '@/lib/specs/billing/transaction-history.data-view';
+import { useQuery } from '@tanstack/react-query';
+
+export function TransactionsPage() {
+  const { data, isLoading } = useQuery({
+    queryKey: ['transactions'],
+    queryFn: () => fetch('/api/ops/billing.listTransactions').then(r => r.json()),
+  });
+
+  return (
+    <div className="container py-8">
+      <h1 className="text-3xl font-bold mb-6">Payment History</h1>
+      <DataViewRenderer
+        spec={TransactionHistory}
+        data={data?.items ?? []}
+        loading={isLoading}
+        onFilterChange={(filters) => {
+          // refetch with new filters
+        }}
+      />
+    </div>
+  );
+}`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "card-subtle space-y-4 p-6",
+        children: [
+          /* @__PURE__ */ jsxDEV("h3", {
+            className: "font-bold",
+            children: "Why DataViews?"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("ul", {
+            className: "text-muted-foreground space-y-2 text-sm",
+            children: [
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Same spec renders on web (React) and mobile (React Native)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Filters, sorting, and pagination handled automatically"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Format rules (currency, dates, badges) applied consistently"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Export to CSV/PDF using the same spec"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "A/B test different layouts without touching the backend"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: "/docs/libraries/data-views",
+            className: "btn-primary",
+            children: [
+              "DataView API Reference ",
+              /* @__PURE__ */ jsxDEV(ChevronRight, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: "/docs/specs/workflows",
+            className: "btn-ghost",
+            children: "Next: Workflows"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  DataViewTutorialPage
+};

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

@@ -0,0 +1,194 @@
+// src/components/docs/getting-started/DeveloperToolsPage.tsx
+import Link from "@contractspec/lib.ui-link";
+import { ChevronRight, Code2, Cpu, Layers, Terminal } from "lucide-react";
+import { CodeBlock, InstallCommand } from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function DeveloperToolsPage() {
+  const tools = [
+    {
+      name: "CLI",
+      href: "/docs/getting-started/tools/cli",
+      description: "Command-line interface for spec creation, building, validation, and CI/CD integration.",
+      icon: Terminal,
+      status: "available",
+      highlights: [
+        "AI-powered code generation",
+        "Multiple agent modes",
+        "SARIF/JSON output"
+      ]
+    },
+    {
+      name: "VS Code Extension",
+      href: "/docs/getting-started/tools/vscode",
+      description: "Real-time validation, scaffolding, and navigation directly in your editor.",
+      icon: Code2,
+      status: "available",
+      highlights: [
+        "Specs Explorer sidebar",
+        "Watch mode",
+        "Interactive walkthroughs"
+      ]
+    },
+    {
+      name: "ContractSpec Studio",
+      href: "https://www.contractspec.studio",
+      description: "Visual builder, lifecycle management, and deployment orchestration.",
+      icon: Layers,
+      status: "coming-soon",
+      highlights: [
+        "Visual spec editor",
+        "Deployment pipelines",
+        "Analytics dashboard"
+      ]
+    },
+    {
+      name: "JetBrains Plugin",
+      href: "#",
+      description: "Full ContractSpec support for IntelliJ, WebStorm, and other JetBrains IDEs.",
+      icon: Cpu,
+      status: "coming-soon",
+      highlights: [
+        "Code navigation",
+        "Inline validation",
+        "Refactoring support"
+      ]
+    }
+  ];
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV("h1", {
+            className: "text-4xl font-bold",
+            children: "Developer Tools"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-lg",
+            children: "ContractSpec provides a suite of tools to help you build, validate, and manage your specifications across different environments."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "grid gap-6 md:grid-cols-2",
+        children: tools.map((tool) => {
+          const IconComponent = tool.icon;
+          const isComingSoon = tool.status === "coming-soon";
+          return /* @__PURE__ */ jsxDEV("div", {
+            className: `card-subtle relative space-y-4 p-6 ${isComingSoon ? "opacity-75" : ""}`,
+            children: [
+              isComingSoon && /* @__PURE__ */ jsxDEV("span", {
+                className: "absolute -top-2 right-4 rounded-full bg-violet-500/20 px-2 py-0.5 text-xs font-medium text-violet-400",
+                children: "Coming Soon"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "flex items-center gap-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10",
+                    children: /* @__PURE__ */ jsxDEV(IconComponent, {
+                      className: "h-5 w-5 text-violet-400"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-lg font-bold",
+                    children: tool.name
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground text-sm",
+                children: tool.description
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("ul", {
+                className: "space-y-1",
+                children: tool.highlights.map((highlight) => /* @__PURE__ */ jsxDEV("li", {
+                  className: "text-muted-foreground flex items-center gap-2 text-sm",
+                  children: [
+                    /* @__PURE__ */ jsxDEV("span", {
+                      className: "text-violet-400",
+                      children: "-"
+                    }, undefined, false, undefined, this),
+                    highlight
+                  ]
+                }, highlight, true, undefined, this))
+              }, undefined, false, undefined, this),
+              !isComingSoon && /* @__PURE__ */ jsxDEV(Link, {
+                href: tool.href,
+                className: "btn-ghost inline-flex items-center gap-1 text-sm",
+                children: [
+                  "Learn more ",
+                  /* @__PURE__ */ jsxDEV(ChevronRight, {
+                    size: 14
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, tool.name, true, undefined, this);
+        })
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "card-subtle space-y-4 p-6",
+        children: [
+          /* @__PURE__ */ jsxDEV("h3", {
+            className: "font-bold",
+            children: "Quick Install"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "text-muted-foreground mb-2 text-xs font-medium",
+                    children: "CLI"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(InstallCommand, {
+                    package: "contractspec",
+                    dev: true
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "text-muted-foreground mb-2 text-xs font-medium",
+                    children: "VS Code Extension"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(CodeBlock, {
+                    language: "bash",
+                    code: "code --install-extension lssm.vscode-contractspec"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: "/docs/getting-started/tools/cli",
+            className: "btn-primary",
+            children: [
+              "Get Started with CLI ",
+              /* @__PURE__ */ jsxDEV(ChevronRight, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: "/docs/getting-started/tools/vscode",
+            className: "btn-ghost",
+            children: "VS Code Extension"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  DeveloperToolsPage
+};