@contractspec/bundle.library 3.8.12 → 3.9.0

package/dist/components/docs/libraries/LibrariesContractsPage.js

@@ -1,24 +1,49 @@
 // @bun
-import{CodeBlock as o,InstallCommand as i}from"@contractspec/lib.design-system";import a from"@contractspec/lib.ui-link";import{ChevronRight as r}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";function s(){return t("div",{className:"space-y-8",children:[t("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.contracts-spec"}),e("p",{className:"text-lg text-muted-foreground",children:"The core library for defining what your application can do. Unified specifications for Operations, Events, Presentations, and Features."})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(i,{package:["@contractspec/lib.contracts-spec","@contractspec/lib.schema"]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What lives where"}),t("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[t("li",{children:[e("strong",{children:"@contractspec/lib.contracts-spec"})," (root): The core contracts definitions (OperationSpec, PresentationSpec, Registry)."]}),t("li",{children:[e("strong",{children:"@contractspec/lib.contracts-runtime-client-react"}),": Browser-safe helpers (React renderers, client SDK). Import this for web/React Native."]}),t("li",{children:[e("strong",{children:"@contractspec/lib.contracts-runtime-server-rest"}),": HTTP/MCP adapters, registries, integrations (Node-only)."]}),t("li",{children:[e("strong",{children:"@contractspec/lib.schema"}),": Schema dictionary (SchemaModel, FieldType) for I/O definitions."]})]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Quick Example"}),e(o,{language:"typescript",code:`import { defineCommand } from '@contractspec/lib.contracts-spec';
-import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
+import{CodeBlock as o,InstallCommand as i}from"@contractspec/lib.design-system";import a from"@contractspec/lib.ui-link";import{ChevronRight as r}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";var c=`import { defineDataView } from '@contractspec/lib.contracts-spec/data-views';
+import { ListDataGridShowcaseRowsQuery } from '@contractspec/example.data-grid-showcase/contracts/data-grid-showcase.operation';
 
-const CreateUserInput = new SchemaModel({
-  name: 'CreateUserInput',
-  fields: {
-    email: { type: ScalarTypeEnum.Email(), isOptional: false },
-    name: { type: ScalarTypeEnum.NonEmptyString(), isOptional: false },
-  },
-});
-
-export const CreateUser = defineCommand({
+export const DataGridShowcaseDataView = defineDataView({
   meta: {
-    key: 'users.createUser',
+    key: 'examples.data-grid-showcase.table',
     version: '1.0.0',
-    description: 'Create a new user account',
+    entity: 'account',
+    title: 'Data Grid Showcase Table',
+    description:
+      'Declarative DataViewSpec for the ContractSpec table showcase.',
+    domain: 'examples',
+    owners: ['@platform.core'],
+    tags: ['examples', 'table', 'data-grid'],
+    stability: 'experimental',
+  },
+  source: {
+    primary: {
+      key: ListDataGridShowcaseRowsQuery.meta.key,
+      version: ListDataGridShowcaseRowsQuery.meta.version,
+    },
   },
-  io: {
-    input: CreateUserInput,
-    output: /* ... */,
+  view: {
+    kind: 'table',
+    executionMode: 'client',
+    selection: 'multiple',
+    columnVisibility: true,
+    columnResizing: true,
+    columnPinning: true,
+    rowExpansion: {
+      fields: ['notes', 'renewalDate', 'lastActivityAt'],
+    },
+    initialState: {
+      pageSize: 4,
+      hiddenColumns: ['notes'],
+      pinnedColumns: {
+        left: ['account'],
+      },
+      sorting: [{ field: 'arr', desc: true }],
+    },
+    fields: [
+      { key: 'account', label: 'Account', dataPath: 'account', sortable: true },
+      { key: 'owner', label: 'Owner', dataPath: 'owner', sortable: true },
+      { key: 'status', label: 'Status', dataPath: 'status', sortable: true },
+      { key: 'notes', label: 'Notes', dataPath: 'notes' },
+    ],
   },
-  policy: { auth: 'admin' },
-});`})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Core Concepts"}),t("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[t("li",{children:[e("strong",{children:"OperationSpec"}),": Immutable description of an operation (Command or Query). Defines I/O, policy, and metadata."]}),t("li",{children:[e("strong",{children:"OperationSpecRegistry"}),": Registry of specs + handlers. Use ",e("code",{className:"font-mono text-xs",children:"installOp"})," ","to attach a handler."]}),t("li",{children:[e("strong",{children:"CapabilitySpec"}),": Canonical capability declaration (requires/provides)."]}),t("li",{children:[e("strong",{children:"PolicySpec"}),": Declarative policy rules (ABAC/ReBAC, rate limits)."]}),t("li",{children:[e("strong",{children:"TelemetrySpec"}),": Analytics definitions and privacy levels."]}),t("li",{children:[e("strong",{children:"PresentationSpec (V2)"}),": Describes how data is rendered (Web Components, Markdown, Data)."]})]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Lifecycle"}),t("ol",{className:"list-inside list-decimal space-y-2 text-muted-foreground",children:[t("li",{children:[e("strong",{children:"Define"})," the spec (I/O via SchemaModel or Zod)."]}),t("li",{children:[e("strong",{children:"Register"})," it:"," ",e("code",{className:"font-mono text-xs",children:"installOp(registry, spec, handler)"}),"."]}),t("li",{children:[e("strong",{children:"Expose"})," it via an adapter (REST, GraphQL, MCP)."]}),t("li",{children:[e("strong",{children:"Validate"})," at runtime automatically."]})]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Adapters"}),t("ul",{className:"space-y-2 text-muted-foreground",children:[t("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/rest-next-app"}),": Next.js App Router adapter"]}),t("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/provider-mcp"}),": Model Context Protocol (MCP) for AI agents"]}),t("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/graphql-pothos"}),": GraphQL schema generator"]})]})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[t(a,{href:"/docs/libraries/schema",className:"btn-primary",children:["Next: Schema ",e(r,{size:16})]}),e(a,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Core Concepts"})]})]})}export{s as LibrariesContractsPage};
+});`;function d(){return t("div",{className:"space-y-8",children:[t("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.contracts-spec"}),e("p",{className:"text-lg text-muted-foreground",children:"The core library for defining what your application can do. Unified specifications for Operations, Events, Presentations, and Features."})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(i,{package:["@contractspec/lib.contracts-spec","@contractspec/lib.schema"]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What lives where"}),t("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[t("li",{children:[e("strong",{children:"@contractspec/lib.contracts-spec"})," (root): The core contracts definitions (OperationSpec, PresentationSpec, Registry)."]}),t("li",{children:[e("strong",{children:"@contractspec/lib.contracts-runtime-client-react"}),": Browser-safe helpers (React renderers, client SDK). Import this for web/React Native."]}),t("li",{children:[e("strong",{children:"@contractspec/lib.contracts-runtime-server-rest"}),": HTTP/MCP adapters, registries, integrations (Node-only)."]}),t("li",{children:[e("strong",{children:"@contractspec/lib.schema"}),": Schema dictionary (SchemaModel, FieldType) for I/O definitions."]})]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Data table contract example"}),t("p",{className:"text-muted-foreground",children:["The canonical account-grid example starts here in"," ",e("code",{children:"@contractspec/lib.contracts-spec"}),". The contract declares table execution mode, selection, pinning, resizing, row expansion, and initial state before any renderer is chosen."]}),e(o,{language:"typescript",code:c}),t("p",{className:"text-muted-foreground text-sm",children:["See the live version in"," ",e(a,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"/docs/examples/data-grid-showcase"}),"."]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Core Concepts"}),t("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[t("li",{children:[e("strong",{children:"OperationSpec"}),": Immutable description of an operation (Command or Query). Defines I/O, policy, and metadata."]}),t("li",{children:[e("strong",{children:"OperationSpecRegistry"}),": Registry of specs + handlers. Use ",e("code",{className:"font-mono text-xs",children:"installOp"})," ","to attach a handler."]}),t("li",{children:[e("strong",{children:"CapabilitySpec"}),": Canonical capability declaration (requires/provides)."]}),t("li",{children:[e("strong",{children:"PolicySpec"}),": Declarative policy rules (ABAC/ReBAC, rate limits)."]}),t("li",{children:[e("strong",{children:"TelemetrySpec"}),": Analytics definitions and privacy levels."]}),t("li",{children:[e("strong",{children:"PresentationSpec (V2)"}),": Describes how data is rendered (Web Components, Markdown, Data)."]}),t("li",{children:[e("strong",{children:"DataViewSpec"}),": Declarative list, table, grid, and detail contracts that the table showcase uses as its canonical account-grid example."]})]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Lifecycle"}),t("ol",{className:"list-inside list-decimal space-y-2 text-muted-foreground",children:[t("li",{children:[e("strong",{children:"Define"})," the spec (I/O via SchemaModel or Zod)."]}),t("li",{children:[e("strong",{children:"Register"})," it:"," ",e("code",{className:"font-mono text-xs",children:"installOp(registry, spec, handler)"}),"."]}),t("li",{children:[e("strong",{children:"Expose"})," it via an adapter (REST, GraphQL, MCP)."]}),t("li",{children:[e("strong",{children:"Validate"})," at runtime automatically."]})]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Adapters"}),t("ul",{className:"space-y-2 text-muted-foreground",children:[t("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/rest-next-app"}),": Next.js App Router adapter"]}),t("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/provider-mcp"}),": Model Context Protocol (MCP) for AI agents"]}),t("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/graphql-pothos"}),": GraphQL schema generator"]})]})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[t(a,{href:"/docs/libraries/schema",className:"btn-primary",children:["Next: Schema ",e(r,{size:16})]}),e(a,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Core Concepts"})]})]})}export{d as LibrariesContractsPage};

package/dist/components/docs/libraries/LibrariesDesignSystemPage.js

@@ -1,38 +1,50 @@
 // @bun
-import{CodeBlock as t,InstallCommand as o}from"@contractspec/lib.design-system";import i from"@contractspec/lib.ui-link";import{ChevronRight as l}from"lucide-react";import{jsx as e,jsxs as a}from"react/jsx-runtime";function n(){return a("div",{className:"space-y-8",children:[a("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.design-system"}),a("p",{className:"text-muted-foreground",children:["High-level design system components, patterns, and layouts for LSSM applications. Built on top of ",e("code",{children:"@contractspec/lib.ui-kit"}),"."]})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(o,{package:"@contractspec/lib.design-system"})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What It Provides"}),a("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[a("li",{children:[e("strong",{children:"Composite Components"}),": Molecules and Organisms that solve common UI problems"]}),a("li",{children:[e("strong",{children:"Layouts"}),": Ready-to-use page structures for dashboards, marketing sites, and lists"]}),a("li",{children:[e("strong",{children:"Data Views"}),": Standardized renderers for lists, tables, and detail views"]}),a("li",{children:[e("strong",{children:"Forms"}),": Zod-integrated form layouts and components"]}),a("li",{children:[e("strong",{children:"Code Display"}),": Syntax-highlighted code blocks with package manager tabs"]}),a("li",{children:[e("strong",{children:"Platform Utilities"}),": Hooks for responsive and adaptive design"]}),a("li",{children:[e("strong",{children:"Legal Templates"}),": Compliant templates for Terms, Privacy, and GDPR"]})]})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Example: App Layout"}),e(t,{language:"tsx",code:`import { AppLayout } from '@contractspec/lib.design-system';
-import { AppSidebar } from '@contractspec/lib.design-system';
+import{CodeBlock as o,InstallCommand as i}from"@contractspec/lib.design-system";import t from"@contractspec/lib.ui-link";import{ChevronRight as l}from"lucide-react";import{jsx as e,jsxs as a}from"react/jsx-runtime";var r=`import { Button, DataTable } from '@contractspec/lib.design-system';
+import { useContractTable } from '@contractspec/lib.presentation-runtime-react';
 
-export function Layout({ children }) {
-  return (
-    <AppLayout sidebar={<AppSidebar />}>
-      {children}
-    </AppLayout>
-  );
-}`})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Example: Zod Form"}),e(t,{language:"tsx",code:`import { ZodForm } from '@contractspec/lib.design-system';
-import * as z from "zod";
+import { SHOWCASE_ROWS } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.data';
+import { useShowcaseColumns } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.columns';
+import {
+  ExpandedRowContent,
+  ShowcaseToolbar,
+} from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.parts';
+
+export function AccountHealthTable() {
+  const columns = useShowcaseColumns();
 
-const schema = z.object({
-  name: z.string().min(1),
-  email: z.string().email(),
-});
+  const controller = useContractTable({
+    data: SHOWCASE_ROWS,
+    columns,
+    selectionMode: 'multiple',
+    initialState: {
+      sorting: [{ id: 'arr', desc: true }],
+      pagination: { pageIndex: 0, pageSize: 4 },
+      columnVisibility: { notes: false },
+      columnPinning: { left: ['account'], right: [] },
+    },
+    renderExpandedContent: (row) => <ExpandedRowContent row={row} />,
+    getCanExpand: () => true,
+  });
 
-export function SignupForm() {
   return (
-    <ZodForm
-      schema={schema}
-      onSubmit={(data) => console.log(data)}
-      submitLabel="Submit"
+    <DataTable
+      controller={controller}
+      title="Account health"
+      description="Composed table surface for the canonical account grid."
+      headerActions={<Button variant="outline">Reset</Button>}
+      toolbar={
+        <ShowcaseToolbar
+          controller={controller}
+          label="Client mode"
+          primaryColumnId="account"
+          toggleColumnId="notes"
+          pinColumnId="owner"
+          sortColumnIds={['arr', 'renewalDate']}
+        />
+      }
+      loading={false}
+      emptyState={<div>No rows available.</div>}
+      footer={\`Page \${controller.pageIndex + 1} of \${controller.pageCount}\`}
     />
   );
-}`})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Example: Code Block with Package Manager Tabs"}),e(t,{language:"tsx",code:`import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
-
-// For installation commands with package manager tabs
-<InstallCommand package="my-package" />
-<InstallCommand package={["react", "react-dom"]} dev />
-
-// For code examples with syntax highlighting
-<CodeBlock
-  language="typescript"
-  code={\`const hello = "world";\`}
-  filename="example.ts"
-/>`})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Key Exports"}),a("div",{className:"grid gap-4 md:grid-cols-2",children:[a("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Organisms"}),a("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"AppLayout, AppHeader, AppSidebar"}),e("li",{children:"MarketingLayout, HeroSection"}),e("li",{children:"ListCardPage, ListTablePage"})]})]}),a("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Data & Forms"}),a("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"DataViewRenderer"}),e("li",{children:"ZodForm"}),e("li",{children:"FormLayout, FormDialog"})]})]}),a("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Code Display"}),a("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"CodeBlock (syntax highlighting)"}),e("li",{children:"CommandTabs (package manager tabs)"}),e("li",{children:"InstallCommand (convenience wrapper)"}),e("li",{children:"CopyButton"})]})]}),a("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Providers"}),e("ul",{className:"space-y-1 text-muted-foreground text-sm",children:e("li",{children:"PackageManagerProvider"})})]})]})]}),a("div",{className:"flex items-center gap-4 pt-4",children:[e(i,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"Previous: UI Kit"}),a(i,{href:"/docs/libraries/accessibility",className:"btn-primary",children:["Next: Accessibility ",e(l,{size:16})]})]})]})}export{n as LibrariesDesignSystemPage};
+}`;function d(){return a("div",{className:"space-y-8",children:[a("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.design-system"}),a("p",{className:"text-muted-foreground",children:["High-level design system components, patterns, and layouts for LSSM applications. Built on top of ",e("code",{children:"@contractspec/lib.ui-kit"}),"."]})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(i,{package:"@contractspec/lib.design-system"})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What It Provides"}),a("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[a("li",{children:[e("strong",{children:"Composite Components"}),": Molecules and Organisms that solve common UI problems"]}),a("li",{children:[e("strong",{children:"Layouts"}),": Ready-to-use page structures for dashboards, marketing sites, and lists"]}),a("li",{children:[e("strong",{children:"Data Views"}),": Standardized renderers for lists, tables, and detail views"]}),a("li",{children:[e("strong",{children:"Forms"}),": Zod-integrated form layouts and components"]}),a("li",{children:[e("strong",{children:"Code Display"}),": Syntax-highlighted code blocks with package manager tabs"]}),a("li",{children:[e("strong",{children:"Platform Utilities"}),": Hooks for responsive and adaptive design"]}),a("li",{children:[e("strong",{children:"Legal Templates"}),": Compliant templates for Terms, Privacy, and GDPR"]})]})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Data table example"}),a("p",{className:"text-muted-foreground",children:["This is the composed lane from the canonical"," ",e(t,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),". The design-system wrapper owns title, description, header actions, and the opinionated card shell on top of the raw web primitive."]}),e(o,{language:"tsx",code:r})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Key Exports"}),a("div",{className:"grid gap-4 md:grid-cols-2",children:[a("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Organisms"}),a("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"AppLayout, AppHeader, AppSidebar"}),e("li",{children:"MarketingLayout, HeroSection"}),e("li",{children:"ListCardPage, ListTablePage"})]})]}),a("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Data & Forms"}),a("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"DataTable"}),e("li",{children:"DataViewTable"}),e("li",{children:"DataViewRenderer"}),e("li",{children:"ZodForm"}),e("li",{children:"FormLayout, FormDialog"})]})]}),a("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Code Display"}),a("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"CodeBlock (syntax highlighting)"}),e("li",{children:"CommandTabs (package manager tabs)"}),e("li",{children:"InstallCommand (convenience wrapper)"}),e("li",{children:"CopyButton"})]})]}),a("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Providers"}),e("ul",{className:"space-y-1 text-muted-foreground text-sm",children:e("li",{children:"PackageManagerProvider"})})]})]})]}),a("div",{className:"flex items-center gap-4 pt-4",children:[e(t,{href:"/docs/libraries/ui-kit-web",className:"btn-ghost",children:"Previous: UI Kit Web"}),a(t,{href:"/docs/libraries/accessibility",className:"btn-primary",children:["Next: Accessibility ",e(l,{size:16})]})]})]})}export{d as LibrariesDesignSystemPage};

package/dist/components/docs/libraries/LibrariesOverviewPage.js

@@ -1,2 +1,2 @@
 // @bun
-import r from"@contractspec/lib.ui-link";import{ChevronRight as s}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";var o=[{title:"Contract and schema foundation",body:"Use these packages to define explicit contracts, schemas, and generated artifacts without inventing a new platform-specific language.",items:[{title:"@contractspec/lib.contracts-spec",description:"Define operations, events, policies, and generated surfaces in TypeScript.",href:"/docs/libraries/contracts"},{title:"@contractspec/lib.schema",description:"Share type-safe schema definitions across validation, clients, and runtime adapters.",href:"/docs/libraries/schema"}]},{title:"Runtime and surface libraries",body:"These packages execute the contract model across UI, data, observability, workflows, and generated runtime behavior.",items:[{title:"@contractspec/lib.runtime",description:"Run typed capability surfaces, execute policies, and connect runtime adapters.",href:"/docs/libraries/runtime"},{title:"@contractspec/lib.ui-kit",description:"Render shared surfaces across web and React Native without forking the contract layer.",href:"/docs/libraries/ui-kit"},{title:"@contractspec/lib.design-system",description:"Build higher-level product surfaces and documented marketing/docs primitives on top of the UI kit.",href:"/docs/libraries/design-system"},{title:"@contractspec/lib.data-views",description:"Generate and render list/detail style surfaces that stay aligned with data contracts.",href:"/docs/libraries/data-views"}]},{title:"Operator and system packages",body:"These packages matter once the system is live and you need governance, resilience, and observability.",items:[{title:"@contractspec/lib.observability",description:"Trace, log, and measure contract execution using the same system boundaries.",href:"/docs/libraries/observability"},{title:"@contractspec/lib.resilience",description:"Add circuit breakers, retries, and failure controls without hiding the integration model.",href:"/docs/libraries/resilience"},{title:"@contractspec/lib.multi-tenancy",description:"Keep tenant-specific config, policy, and surface resolution explicit.",href:"/docs/libraries/multi-tenancy"},{title:"@contractspec/lib.workflow-composer",description:"Compose and extend workflows without smearing orchestration concerns across apps.",href:"/docs/libraries/workflow-composer"}]}];function l(){return t("div",{className:"space-y-10",children:[t("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:"The OSS foundation is a library system, not a closed platform."}),e("p",{className:"max-w-3xl text-lg text-muted-foreground leading-8",children:"ContractSpec is assembled from libraries that remain useful on their own and stronger together. Start with the contract and schema foundation, then add runtime, UI, integration, and operator packages as your system grows."})]}),t("div",{className:"editorial-proof-strip",children:[t("div",{className:"editorial-stat",children:[e("span",{className:"editorial-label",children:"Layering rule"}),e("span",{className:"editorial-stat-value",children:"libs \u2192 bundles \u2192 apps"})]}),e("p",{className:"max-w-2xl text-muted-foreground text-sm leading-7",children:"Keep reusable behavior in libraries, compose it into bundle-level surfaces, and reserve app packages for concrete delivery shells."})]}),e("div",{className:"space-y-6",children:o.map((i)=>t("section",{className:"editorial-panel space-y-5",children:[t("div",{className:"space-y-2",children:[e("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:i.title}),e("p",{className:"text-muted-foreground text-sm leading-7",children:i.body})]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:i.items.map((a)=>t(r,{href:a.href,className:"rounded-[24px] border border-border/75 bg-background/70 p-5 transition-colors hover:border-[color:rgb(162_79_42_/_0.45)]",children:[e("h3",{className:"font-semibold text-lg",children:a.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:a.description}),t("div",{className:"mt-3 flex items-center gap-2 text-[color:var(--rust)] text-sm",children:["Learn more ",e(s,{size:14})]})]},a.title))})]},i.title))})]})}export{l as LibrariesOverviewPage};
+import r from"@contractspec/lib.ui-link";import{ChevronRight as s}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";var c=[{title:"Contract and schema foundation",body:"Use these packages to define explicit contracts, schemas, and generated artifacts without inventing a new platform-specific language.",items:[{title:"@contractspec/lib.contracts-spec",description:"Define operations, events, policies, and generated surfaces in TypeScript.",href:"/docs/libraries/contracts"},{title:"@contractspec/lib.schema",description:"Share type-safe schema definitions across validation, clients, and runtime adapters.",href:"/docs/libraries/schema"}]},{title:"Runtime and surface libraries",body:"These packages execute the contract model across UI, data, observability, workflows, and generated runtime behavior.",items:[{title:"@contractspec/lib.runtime",description:"Run typed capability surfaces, execute policies, and connect runtime adapters.",href:"/docs/libraries/runtime"},{title:"@contractspec/lib.ui-kit",description:"Render shared surfaces across web and React Native without forking the contract layer.",href:"/docs/libraries/ui-kit"},{title:"@contractspec/lib.ui-kit-web",description:"Use the raw web primitive layer directly when you want the browser table, accessibility, and interaction model without the design-system shell.",href:"/docs/libraries/ui-kit-web"},{title:"@contractspec/lib.design-system",description:"Build higher-level product surfaces and documented marketing/docs primitives on top of the web and native UI packages.",href:"/docs/libraries/design-system"},{title:"@contractspec/lib.data-views",description:"Generate and render list/detail style surfaces that stay aligned with data contracts.",href:"/docs/libraries/data-views"}]},{title:"Operator and system packages",body:"These packages matter once the system is live and you need governance, resilience, and observability.",items:[{title:"@contractspec/lib.observability",description:"Trace, log, and measure contract execution using the same system boundaries.",href:"/docs/libraries/observability"},{title:"@contractspec/lib.resilience",description:"Add circuit breakers, retries, and failure controls without hiding the integration model.",href:"/docs/libraries/resilience"},{title:"@contractspec/lib.multi-tenancy",description:"Keep tenant-specific config, policy, and surface resolution explicit.",href:"/docs/libraries/multi-tenancy"},{title:"@contractspec/lib.workflow-composer",description:"Compose and extend workflows without smearing orchestration concerns across apps.",href:"/docs/libraries/workflow-composer"}]}];function l(){return t("div",{className:"space-y-10",children:[t("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:"The OSS foundation is a library system, not a closed platform."}),e("p",{className:"max-w-3xl text-lg text-muted-foreground leading-8",children:"ContractSpec is assembled from libraries that remain useful on their own and stronger together. Start with the contract and schema foundation, then add runtime, UI, integration, and operator packages as your system grows."})]}),t("div",{className:"editorial-proof-strip",children:[t("div",{className:"editorial-stat",children:[e("span",{className:"editorial-label",children:"Layering rule"}),e("span",{className:"editorial-stat-value",children:"libs \u2192 bundles \u2192 apps"})]}),e("p",{className:"max-w-2xl text-muted-foreground text-sm leading-7",children:"Keep reusable behavior in libraries, compose it into bundle-level surfaces, and reserve app packages for concrete delivery shells."})]}),e("div",{className:"space-y-6",children:c.map((i)=>t("section",{className:"editorial-panel space-y-5",children:[t("div",{className:"space-y-2",children:[e("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:i.title}),e("p",{className:"text-muted-foreground text-sm leading-7",children:i.body})]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:i.items.map((a)=>t(r,{href:a.href,className:"rounded-[24px] border border-border/75 bg-background/70 p-5 transition-colors hover:border-[color:rgb(162_79_42_/_0.45)]",children:[e("h3",{className:"font-semibold text-lg",children:a.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:a.description}),t("div",{className:"mt-3 flex items-center gap-2 text-[color:var(--rust)] text-sm",children:["Learn more ",e(s,{size:14})]})]},a.title))})]},i.title))})]})}export{l as LibrariesOverviewPage};

package/dist/components/docs/libraries/LibrariesUIKitPage.js

@@ -1,20 +1,46 @@
 // @bun
-import{CodeBlock as a,InstallCommand as l}from"@contractspec/lib.design-system";import i from"@contractspec/lib.ui-link";import{ChevronRight as o}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";function c(){return t("div",{className:"space-y-8",children:[t("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ui-kit"}),t("p",{className:"text-muted-foreground",children:["Universal UI components for React Native and Web, built on top of",e("code",{children:"nativewind"})," and ",e("code",{children:"@rn-primitives"}),"."]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(l,{package:"@contractspec/lib.ui-kit"})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Key Features"}),t("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[t("li",{children:[e("strong",{children:"Universal"}),": Components render natively on iOS/Android and as standard HTML on web"]}),t("li",{children:[e("strong",{children:"Styled with NativeWind"}),": Uses Tailwind CSS classes for styling"]}),t("li",{children:[e("strong",{children:"Accessible"}),": Leverages ",e("code",{children:"@rn-primitives"})," ","(Radix UI for Native)"]}),t("li",{children:[e("strong",{children:"Atomic Design"}),": Exports atoms, molecules, and organisms"]})]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Example Usage"}),e(a,{language:"tsx",code:`import { Button } from '@contractspec/lib.ui-kit/ui/button';
-import { Text } from '@contractspec/lib.ui-kit/ui/text';
-import { Card, CardHeader, CardTitle, CardContent } from '@contractspec/lib.ui-kit/ui/card';
+import{CodeBlock as o,InstallCommand as i}from"@contractspec/lib.design-system";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";var r=`import { DataTable } from '@contractspec/lib.ui-kit/ui/data-table';
+import { useContractTable } from '@contractspec/lib.presentation-runtime-react';
+
+import { SHOWCASE_ROWS } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.data';
+import { useShowcaseColumns } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.columns';
+import {
+  ExpandedRowContent,
+  ShowcaseToolbar,
+} from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.parts';
+
+export function NativeAccountGrid() {
+  const columns = useShowcaseColumns();
+
+  const controller = useContractTable({
+    data: SHOWCASE_ROWS,
+    columns,
+    selectionMode: 'single',
+    initialState: {
+      sorting: [{ id: 'arr', desc: true }],
+      pagination: { pageIndex: 0, pageSize: 4 },
+      columnVisibility: { notes: false },
+      columnPinning: { left: ['account'], right: [] },
+    },
+    renderExpandedContent: (row) => <ExpandedRowContent row={row} />,
+    getCanExpand: () => true,
+  });
 
-export function MyComponent() {
   return (
-    <Card className="w-full max-w-md">
-      <CardHeader>
-        <CardTitle>Welcome</CardTitle>
-      </CardHeader>
-      <CardContent className="gap-4">
-        <Text>This works on Web and Native.</Text>
-        <Button onPress={() => console.log('Clicked!')}>
-          Click me
-        </Button>
-      </CardContent>
-    </Card>
+    <DataTable
+      controller={controller}
+      toolbar={
+        <ShowcaseToolbar
+          controller={controller}
+          label="Native primitive"
+          primaryColumnId="account"
+          toggleColumnId="notes"
+          pinColumnId="owner"
+          sortColumnIds={['arr', 'renewalDate']}
+        />
+      }
+      loading={false}
+      footer={\`Rows \${controller.rows.length}\`}
+    />
   );
-}`})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Core Components"}),t("div",{className:"grid gap-4 md:grid-cols-3",children:[t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Form Controls"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"Button"}),e("li",{children:"Input"}),e("li",{children:"Checkbox"}),e("li",{children:"Switch"}),e("li",{children:"Select"})]})]}),t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Layout"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"Card"}),e("li",{children:"Stack"}),e("li",{children:"Separator"}),e("li",{children:"Sheet"})]})]}),t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Feedback"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"Alert"}),e("li",{children:"Skeleton"}),e("li",{children:"Progress"}),e("li",{children:"Tooltip"})]})]})]})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[e(i,{href:"/docs/libraries/schema",className:"btn-ghost",children:"Previous: Schema"}),t(i,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Next: Design System ",e(o,{size:16})]})]})]})}export{c as LibrariesUIKitPage};
+}`;function s(){return t("div",{className:"space-y-8",children:[t("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ui-kit"}),t("p",{className:"text-muted-foreground",children:["Universal UI components for React Native and Web, built on top of",e("code",{children:"nativewind"})," and ",e("code",{children:"@rn-primitives"}),"."]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(i,{package:"@contractspec/lib.ui-kit"})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Key Features"}),t("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[t("li",{children:[e("strong",{children:"Universal"}),": Components render natively on iOS/Android and as standard HTML on web"]}),t("li",{children:[e("strong",{children:"Styled with NativeWind"}),": Uses Tailwind CSS classes for styling"]}),t("li",{children:[e("strong",{children:"Accessible"}),": Leverages ",e("code",{children:"@rn-primitives"})," ","(Radix UI for Native)"]}),t("li",{children:[e("strong",{children:"Atomic Design"}),": Exports atoms, molecules, and organisms"]})]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Data table example"}),t("p",{className:"text-muted-foreground",children:["The canonical"," ",e(a,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"})," ","uses ",e("code",{children:"@contractspec/lib.ui-kit/ui/data-table"})," as the native-first primitive lane. It shares the same controller model as the web renderer while keeping the React Native / Expo surface explicit."]}),e(o,{language:"tsx",code:r})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Core Components"}),t("div",{className:"grid gap-4 md:grid-cols-3",children:[t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Form Controls"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"Button"}),e("li",{children:"Input"}),e("li",{children:"Checkbox"}),e("li",{children:"Switch"}),e("li",{children:"Select"})]})]}),t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Layout"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"Card"}),e("li",{children:"Stack"}),e("li",{children:"Separator"}),e("li",{children:"Sheet"})]})]}),t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Feedback"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"Alert"}),e("li",{children:"Skeleton"}),e("li",{children:"Progress"}),e("li",{children:"Tooltip"})]})]})]})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[e(a,{href:"/docs/libraries/schema",className:"btn-ghost",children:"Previous: Schema"}),t(a,{href:"/docs/libraries/ui-kit-web",className:"btn-primary",children:["Next: UI Kit Web ",e(l,{size:16})]})]})]})}export{s as LibrariesUIKitPage};

package/dist/components/docs/libraries/LibrariesUIKitWebPage.d.ts

@@ -0,0 +1 @@
+export declare function LibrariesUIKitWebPage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/docs/libraries/LibrariesUIKitWebPage.js

@@ -0,0 +1,47 @@
+// @bun
+import{CodeBlock as i,InstallCommand as o}from"@contractspec/lib.design-system";import a from"@contractspec/lib.ui-link";import{ChevronRight as n}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";var r=`import { DataTable } from '@contractspec/lib.ui-kit-web/ui/data-table';
+import { useContractTable } from '@contractspec/lib.presentation-runtime-react';
+
+import { SHOWCASE_ROWS } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.data';
+import { useShowcaseColumns } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.columns';
+import {
+  ExpandedRowContent,
+  ShowcaseToolbar,
+} from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.parts';
+
+export function WebAccountGrid() {
+  const columns = useShowcaseColumns();
+
+  const controller = useContractTable({
+    data: SHOWCASE_ROWS,
+    columns,
+    selectionMode: 'single',
+    initialState: {
+      sorting: [{ id: 'lastActivityAt', desc: true }],
+      pagination: { pageIndex: 0, pageSize: 4 },
+      columnVisibility: { notes: false },
+      columnPinning: { left: ['account'], right: [] },
+    },
+    renderExpandedContent: (row) => <ExpandedRowContent row={row} />,
+    getCanExpand: () => true,
+  });
+
+  return (
+    <DataTable
+      controller={controller}
+      toolbar={
+        <ShowcaseToolbar
+          controller={controller}
+          label="Web primitive"
+          primaryColumnId="account"
+          toggleColumnId="notes"
+          pinColumnId="owner"
+          sortColumnIds={['arr', 'renewalDate']}
+        />
+      }
+      loading={false}
+      emptyState={<div>No rows available.</div>}
+      footer={\`Rows \${controller.totalItems}\`}
+    />
+  );
+}`;function d(){return t("div",{className:"space-y-8",children:[t("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ui-kit-web"}),e("p",{className:"text-muted-foreground",children:"Web-first React and Next primitives for ContractSpec. The canonical data-table example uses this package to render the raw browser table layer directly, without the design-system shell on top."})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(o,{package:"@contractspec/lib.ui-kit-web"})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Data table example"}),t("p",{className:"text-muted-foreground",children:["This is the raw browser lane from the canonical"," ",e(a,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),". It demonstrates the primitive renderer with sorting, pagination, single selection, column visibility, column resizing, left/right pinning, row expansion, loading, and empty-state slots."]}),e(i,{language:"tsx",filename:"web-account-grid.tsx",code:r})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What this layer owns"}),t("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[e("li",{children:"The raw table renderer and browser interaction model."}),e("li",{children:"Pagination, column visibility menus, pin menus, resize handles, and empty/loading states."}),e("li",{children:"Accessibility helpers and other web-specific primitives that stay outside the native-first package."})]})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[e(a,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"Previous: UI Kit"}),t(a,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Next: Design System ",e(n,{size:16})]})]})]})}export{d as LibrariesUIKitWebPage};

package/dist/components/docs/libraries/index.d.ts

@@ -23,5 +23,6 @@ export { LibrariesSLOPage } from './LibrariesSLOPage';
 export { LibrariesSupportBotPage } from './LibrariesSupportBotPage';
 export { LibrariesTestingPage } from './LibrariesTestingPage';
 export { LibrariesUIKitPage } from './LibrariesUIKitPage';
+export { LibrariesUIKitWebPage } from './LibrariesUIKitWebPage';
 export { LibrariesWorkflowComposerPage } from './LibrariesWorkflowComposerPage';
 export { LibrariesWorkflowsPage } from './LibrariesWorkflowsPage';