@contractspec/bundle.library 3.8.12 → 3.9.2

package/dist/node/components/docs/libraries/index.js

@@ -1,4 +1,4 @@
-import{CodeBlock as de,InstallCommand as Ke}from"@contractspec/lib.design-system";import pe from"@contractspec/lib.ui-link";import{ChevronRight as Ze}from"lucide-react";import{jsx as c,jsxs as g}from"react/jsx-runtime";function Je(){return g("div",{className:"space-y-8",children:[g("div",{className:"space-y-4",children:[c("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.accessibility"}),c("p",{className:"text-muted-foreground",children:"Stable exports of accessibility primitives for LSSM web apps, ensuring WCAG compliance and inclusive design."})]}),g("div",{className:"space-y-4",children:[c("h2",{className:"font-bold text-2xl",children:"Installation"}),c(Ke,{package:"@contractspec/lib.accessibility"})]}),g("div",{className:"space-y-4",children:[c("h2",{className:"font-bold text-2xl",children:"Exports"}),g("ul",{className:"space-y-2 text-muted-foreground",children:[g("li",{children:[c("code",{className:"rounded bg-background/50 px-2 py-1",children:"SkipLink"}),": A link to skip navigation, visible on focus"]}),g("li",{children:[c("code",{className:"rounded bg-background/50 px-2 py-1",children:"VisuallyHidden"}),": Hide content visually but keep it for screen readers"]}),g("li",{children:[c("code",{className:"rounded bg-background/50 px-2 py-1",children:"SRLiveRegionProvider"}),","," ",c("code",{className:"rounded bg-background/50 px-2 py-1",children:"useSRLiveRegion"}),": Manage live region announcements"]}),g("li",{children:[c("code",{className:"rounded bg-background/50 px-2 py-1",children:"RouteAnnouncer"}),": Announce page title/path changes on navigation"]}),g("li",{children:[c("code",{className:"rounded bg-background/50 px-2 py-1",children:"FocusOnRouteChange"}),": Reset focus to body or main content on navigation"]}),g("li",{children:[c("code",{className:"rounded bg-background/50 px-2 py-1",children:"useReducedMotion"}),": Detect if the user prefers reduced motion"]})]})]}),g("div",{className:"space-y-4",children:[c("h2",{className:"font-bold text-2xl",children:"Example: App Setup"}),c(de,{language:"tsx",code:`import {
+var ft=Object.defineProperty;var bt=(t)=>t;function vt(t,w){this[t]=bt.bind(null,w)}var po=(t,w)=>{for(var me in w)ft(t,me,{get:w[me],enumerable:!0,configurable:!0,set:vt.bind(w,me)})};var mo=(t,w)=>()=>(t&&(w=t(t=0)),w);import{CodeBlock as ke,InstallCommand as yt}from"@contractspec/lib.design-system";import Se from"@contractspec/lib.ui-link";import{ChevronRight as Nt}from"lucide-react";import{jsx as l,jsxs as b}from"react/jsx-runtime";function wt(){return b("div",{className:"space-y-8",children:[b("div",{className:"space-y-4",children:[l("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.accessibility"}),l("p",{className:"text-muted-foreground",children:"Stable exports of accessibility primitives for LSSM web apps, ensuring WCAG compliance and inclusive design."})]}),b("div",{className:"space-y-4",children:[l("h2",{className:"font-bold text-2xl",children:"Installation"}),l(yt,{package:"@contractspec/lib.accessibility"})]}),b("div",{className:"space-y-4",children:[l("h2",{className:"font-bold text-2xl",children:"Exports"}),b("ul",{className:"space-y-2 text-muted-foreground",children:[b("li",{children:[l("code",{className:"rounded bg-background/50 px-2 py-1",children:"SkipLink"}),": A link to skip navigation, visible on focus"]}),b("li",{children:[l("code",{className:"rounded bg-background/50 px-2 py-1",children:"VisuallyHidden"}),": Hide content visually but keep it for screen readers"]}),b("li",{children:[l("code",{className:"rounded bg-background/50 px-2 py-1",children:"SRLiveRegionProvider"}),","," ",l("code",{className:"rounded bg-background/50 px-2 py-1",children:"useSRLiveRegion"}),": Manage live region announcements"]}),b("li",{children:[l("code",{className:"rounded bg-background/50 px-2 py-1",children:"RouteAnnouncer"}),": Announce page title/path changes on navigation"]}),b("li",{children:[l("code",{className:"rounded bg-background/50 px-2 py-1",children:"FocusOnRouteChange"}),": Reset focus to body or main content on navigation"]}),b("li",{children:[l("code",{className:"rounded bg-background/50 px-2 py-1",children:"useReducedMotion"}),": Detect if the user prefers reduced motion"]})]})]}),b("div",{className:"space-y-4",children:[l("h2",{className:"font-bold text-2xl",children:"Example: App Setup"}),l(ke,{language:"tsx",code:`import {
   SRLiveRegionProvider,
   RouteAnnouncer,
   SkipLink
@@ -18,7 +18,7 @@ export function RootLayout({ children }) {
       </body>
     </html>
   );
-}`})]}),g("div",{className:"space-y-4",children:[c("h2",{className:"font-bold text-2xl",children:"Example: Live Announcements"}),c(de,{language:"tsx",code:`import { useSRLiveRegion } from '@contractspec/lib.accessibility';
+}`})]}),b("div",{className:"space-y-4",children:[l("h2",{className:"font-bold text-2xl",children:"Example: Live Announcements"}),l(ke,{language:"tsx",code:`import { useSRLiveRegion } from '@contractspec/lib.accessibility';
 
 export function TodoList() {
   const { announce } = useSRLiveRegion();
@@ -29,7 +29,7 @@ export function TodoList() {
   };
 
   return <button onClick={addTodo}>Add Todo</button>;
-}`})]}),g("div",{className:"space-y-4",children:[c("h2",{className:"font-bold text-2xl",children:"WCAG Compliance"}),g("p",{className:"text-muted-foreground",children:["These components map directly to WCAG 2.1 Level AA requirements documented in ",c("code",{children:"docs/accessibility_wcag_compliance_specs.md"}),":"]}),g("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[c("li",{children:"2.4.1 Bypass Blocks (SkipLink)"}),c("li",{children:"4.1.3 Status Messages (LiveRegion)"}),c("li",{children:"2.4.3 Focus Order (FocusOnRouteChange)"}),c("li",{children:"2.3.3 Animation from Interactions (useReducedMotion)"})]})]}),g("div",{className:"flex items-center gap-4 pt-4",children:[c(pe,{href:"/docs/libraries/design-system",className:"btn-ghost",children:"Previous: Design System"}),g(pe,{href:"/docs/libraries",className:"btn-primary",children:["Back to Libraries ",c(Ze,{size:16})]})]})]})}import{CodeBlock as me,InstallCommand as Ye}from"@contractspec/lib.design-system";import ue from"@contractspec/lib.ui-link";import{ChevronRight as Xe}from"lucide-react";import{jsx as f,jsxs as z}from"react/jsx-runtime";function $e(){return z("div",{className:"space-y-8",children:[z("div",{className:"space-y-4",children:[f("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ai-agent"}),f("p",{className:"text-lg text-muted-foreground",children:"Define AI agents in TypeScript, run them with deterministic tool calling, capture working memory, and route low-confidence decisions to human reviewers."})]}),z("div",{className:"space-y-4",children:[f("h2",{className:"font-bold text-2xl",children:"Installation"}),f(Ye,{package:"@contractspec/lib.ai-agent"})]}),z("div",{className:"space-y-3",children:[f("h2",{className:"font-bold text-2xl",children:"Define & register"}),f(me,{language:"typescript",code:`import { defineAgent, AgentRegistry } from '@contractspec/lib.contracts-spec/agent';
+}`})]}),b("div",{className:"space-y-4",children:[l("h2",{className:"font-bold text-2xl",children:"WCAG Compliance"}),b("p",{className:"text-muted-foreground",children:["These components map directly to WCAG 2.1 Level AA requirements documented in ",l("code",{children:"docs/accessibility_wcag_compliance_specs.md"}),":"]}),b("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[l("li",{children:"2.4.1 Bypass Blocks (SkipLink)"}),l("li",{children:"4.1.3 Status Messages (LiveRegion)"}),l("li",{children:"2.4.3 Focus Order (FocusOnRouteChange)"}),l("li",{children:"2.3.3 Animation from Interactions (useReducedMotion)"})]})]}),b("div",{className:"flex items-center gap-4 pt-4",children:[l(Se,{href:"/docs/libraries/design-system",className:"btn-ghost",children:"Previous: Design System"}),b(Se,{href:"/docs/libraries",className:"btn-primary",children:["Back to Libraries ",l(Nt,{size:16})]})]})]})}import{CodeBlock as Ce,InstallCommand as kt}from"@contractspec/lib.design-system";import Te from"@contractspec/lib.ui-link";import{ChevronRight as St}from"lucide-react";import{jsx as v,jsxs as U}from"react/jsx-runtime";function Ct(){return U("div",{className:"space-y-8",children:[U("div",{className:"space-y-4",children:[v("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ai-agent"}),v("p",{className:"text-lg text-muted-foreground",children:"Define AI agents in TypeScript, run them with deterministic tool calling, capture working memory, and route low-confidence decisions to human reviewers."})]}),U("div",{className:"space-y-4",children:[v("h2",{className:"font-bold text-2xl",children:"Installation"}),v(kt,{package:"@contractspec/lib.ai-agent"})]}),U("div",{className:"space-y-3",children:[v("h2",{className:"font-bold text-2xl",children:"Define & register"}),v(Ce,{language:"typescript",code:`import { defineAgent, AgentRegistry } from '@contractspec/lib.contracts-spec/agent';
 
 const SupportBot = defineAgent({
   meta: {
@@ -48,7 +48,7 @@ const SupportBot = defineAgent({
   },
 });
 
-const registry = new AgentRegistry().register(SupportBot);`})]}),z("div",{className:"space-y-3",children:[f("h2",{className:"font-bold text-2xl",children:"Run with approvals"}),f(me,{language:"typescript",code:`import { createUnifiedAgent, ApprovalWorkflow } from '@contractspec/lib.ai-agent';
+const registry = new AgentRegistry().register(SupportBot);`})]}),U("div",{className:"space-y-3",children:[v("h2",{className:"font-bold text-2xl",children:"Run with approvals"}),v(Ce,{language:"typescript",code:`import { createUnifiedAgent, ApprovalWorkflow } from '@contractspec/lib.ai-agent';
 
 const approvals = new ApprovalWorkflow();
 const agent = createUnifiedAgent(SupportBot, {
@@ -58,7 +58,7 @@ const agent = createUnifiedAgent(SupportBot, {
 
 const result = await agent.run(ticket.body);
 // Route low-confidence or manual-review flows through approvals when needed.
-`})]}),z("div",{className:"space-y-3",children:[f("h2",{className:"font-bold text-2xl",children:"What's inside"}),z("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[z("li",{children:[f("code",{children:"createUnifiedAgent"}),", ",f("code",{children:"ContractSpecAgent"}),","," ",f("code",{children:"UnifiedAgent"})]}),f("li",{children:"MCP, operation-backed, memory, and subagent tool adapters"}),z("li",{children:[f("code",{children:"InMemoryAgentMemory"})," plus interfaces for custom stores"]}),z("li",{children:[f("code",{children:"ApprovalWorkflow"})," + ",f("code",{children:"ApprovalStore"})," for human-in-the-loop reviews"]})]})]}),z("div",{className:"flex items-center gap-4 pt-4",children:[f(ue,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),z(ue,{href:"/docs/libraries/support-bot",className:"btn-primary",children:["Next: Support Bot ",f(Xe,{size:16})]})]})]})}import{CodeBlock as oe,InstallCommand as xe}from"@contractspec/lib.design-system";import{jsx as G,jsxs as ee}from"react/jsx-runtime";function je(){return ee("div",{className:"space-y-8",children:[ee("div",{className:"space-y-4",children:[G("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.analytics"}),G("p",{className:"text-lg text-muted-foreground",children:"Work directly with telemetry events to understand conversion, retention, churn, and growth opportunities."})]}),ee("div",{className:"space-y-4",children:[G("h2",{className:"font-bold text-2xl",children:"Installation"}),G(xe,{package:"@contractspec/lib.analytics"})]}),ee("div",{className:"space-y-3",children:[G("h2",{className:"font-bold text-2xl",children:"Funnels in memory"}),G(oe,{language:"typescript",code:`import { FunnelAnalyzer } from '@contractspec/lib.analytics/funnel';
+`})]}),U("div",{className:"space-y-3",children:[v("h2",{className:"font-bold text-2xl",children:"What's inside"}),U("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[U("li",{children:[v("code",{children:"createUnifiedAgent"}),", ",v("code",{children:"ContractSpecAgent"}),","," ",v("code",{children:"UnifiedAgent"})]}),v("li",{children:"MCP, operation-backed, memory, and subagent tool adapters"}),U("li",{children:[v("code",{children:"InMemoryAgentMemory"})," plus interfaces for custom stores"]}),U("li",{children:[v("code",{children:"ApprovalWorkflow"})," + ",v("code",{children:"ApprovalStore"})," for human-in-the-loop reviews"]})]})]}),U("div",{className:"flex items-center gap-4 pt-4",children:[v(Te,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),U(Te,{href:"/docs/libraries/support-bot",className:"btn-primary",children:["Next: Support Bot ",v(St,{size:16})]})]})]})}import{CodeBlock as ue,InstallCommand as Tt}from"@contractspec/lib.design-system";import{jsx as H,jsxs as ne}from"react/jsx-runtime";function Lt(){return ne("div",{className:"space-y-8",children:[ne("div",{className:"space-y-4",children:[H("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.analytics"}),H("p",{className:"text-lg text-muted-foreground",children:"Work directly with telemetry events to understand conversion, retention, churn, and growth opportunities."})]}),ne("div",{className:"space-y-4",children:[H("h2",{className:"font-bold text-2xl",children:"Installation"}),H(Tt,{package:"@contractspec/lib.analytics"})]}),ne("div",{className:"space-y-3",children:[H("h2",{className:"font-bold text-2xl",children:"Funnels in memory"}),H(ue,{language:"typescript",code:`import { FunnelAnalyzer } from '@contractspec/lib.analytics/funnel';
 
 const analyzer = new FunnelAnalyzer();
 const report = analyzer.analyze(events, {
@@ -68,16 +68,16 @@ const report = analyzer.analyze(events, {
     { id: 'submit', eventName: 'signup.submit' },
     { id: 'verified', eventName: 'account.verified' },
   ],
-});`})]}),ee("div",{className:"space-y-3",children:[G("h2",{className:"font-bold text-2xl",children:"Cohorts & churn"}),G(oe,{language:"typescript",code:`import { CohortTracker } from '@contractspec/lib.analytics/cohort';
+});`})]}),ne("div",{className:"space-y-3",children:[H("h2",{className:"font-bold text-2xl",children:"Cohorts & churn"}),H(ue,{language:"typescript",code:`import { CohortTracker } from '@contractspec/lib.analytics/cohort';
 import { ChurnPredictor } from '@contractspec/lib.analytics/churn';
 
 const cohorts = new CohortTracker().analyze(events, { bucket: 'week', periods: 8 });
-const churn = new ChurnPredictor().score(events);`})]}),ee("div",{className:"space-y-3",children:[G("h2",{className:"font-bold text-2xl",children:"Growth hypotheses"}),G(oe,{language:"typescript",code:`import { GrowthHypothesisGenerator } from '@contractspec/lib.analytics/growth';
+const churn = new ChurnPredictor().score(events);`})]}),ne("div",{className:"space-y-3",children:[H("h2",{className:"font-bold text-2xl",children:"Growth hypotheses"}),H(ue,{language:"typescript",code:`import { GrowthHypothesisGenerator } from '@contractspec/lib.analytics/growth';
 
 const ideas = new GrowthHypothesisGenerator().generate([
   { name: 'Activation rate', current: 0.42, previous: 0.55, target: 0.6 },
   { name: 'Expansion ARPU', current: 1.2, previous: 0.9 },
-]);`})]})]})}import{CodeBlock as et,InstallCommand as tt}from"@contractspec/lib.design-system";import ge from"@contractspec/lib.ui-link";import{ChevronRight as at}from"lucide-react";import{jsx as A,jsxs as J}from"react/jsx-runtime";function ot(){return J("div",{className:"space-y-8",children:[J("div",{className:"space-y-4",children:[A("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.content-gen"}),A("p",{className:"text-lg text-muted-foreground",children:"Feed a single ContentBrief and produce cohesive marketing assets without touching a CMS."})]}),J("div",{className:"space-y-4",children:[A("h2",{className:"font-bold text-2xl",children:"Installation"}),A(tt,{package:"@contractspec/lib.content-gen"})]}),J("div",{className:"space-y-3",children:[A("h2",{className:"font-bold text-2xl",children:"One brief, many assets"}),A(et,{language:"typescript",code:`import {
+]);`})]})]})}import{CodeBlock as Rt,InstallCommand as It}from"@contractspec/lib.design-system";import Le from"@contractspec/lib.ui-link";import{ChevronRight as At}from"lucide-react";import{jsx as O,jsxs as j}from"react/jsx-runtime";function Pt(){return j("div",{className:"space-y-8",children:[j("div",{className:"space-y-4",children:[O("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.content-gen"}),O("p",{className:"text-lg text-muted-foreground",children:"Feed a single ContentBrief and produce cohesive marketing assets without touching a CMS."})]}),j("div",{className:"space-y-4",children:[O("h2",{className:"font-bold text-2xl",children:"Installation"}),O(It,{package:"@contractspec/lib.content-gen"})]}),j("div",{className:"space-y-3",children:[O("h2",{className:"font-bold text-2xl",children:"One brief, many assets"}),O(Rt,{language:"typescript",code:`import {
   BlogGenerator,
   LandingPageGenerator,
   EmailCampaignGenerator,
@@ -97,29 +97,54 @@ const blog = await new BlogGenerator().generate(brief);
 const landing = await new LandingPageGenerator().generate(brief);
 const email = await new EmailCampaignGenerator().generate({ brief, variant: 'announcement' });
 const social = await new SocialPostGenerator().generate(brief);
-const seo = new SeoOptimizer().optimize(brief);`})]}),J("div",{className:"space-y-3",children:[A("h2",{className:"font-bold text-2xl",children:"When to use"}),J("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[A("li",{children:"Ship landing page refreshes whenever specs change."}),A("li",{children:"Automate release emails + nurture sequences per vertical."}),A("li",{children:"Create social snippets that stay on-message with the same brief."}),A("li",{children:"Generate SEO metadata + Schema.org markup alongside content."})]})]}),J("div",{className:"flex items-center gap-4 pt-4",children:[A(ge,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),J(ge,{href:"/docs/libraries/support-bot",className:"btn-primary",children:["Next: Support Bot ",A(at,{size:16})]})]})]})}import{CodeBlock as it,InstallCommand as rt}from"@contractspec/lib.design-system";import fe from"@contractspec/lib.ui-link";import{ChevronRight as nt}from"lucide-react";import{jsx as o,jsxs as i}from"react/jsx-runtime";function ct(){return i("div",{className:"space-y-8",children:[i("div",{className:"space-y-4",children:[o("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.contracts-spec"}),o("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."})]}),i("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Installation"}),o(rt,{package:["@contractspec/lib.contracts-spec","@contractspec/lib.schema"]})]}),i("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"What lives where"}),i("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[i("li",{children:[o("strong",{children:"@contractspec/lib.contracts-spec"})," (root): The core contracts definitions (OperationSpec, PresentationSpec, Registry)."]}),i("li",{children:[o("strong",{children:"@contractspec/lib.contracts-runtime-client-react"}),": Browser-safe helpers (React renderers, client SDK). Import this for web/React Native."]}),i("li",{children:[o("strong",{children:"@contractspec/lib.contracts-runtime-server-rest"}),": HTTP/MCP adapters, registries, integrations (Node-only)."]}),i("li",{children:[o("strong",{children:"@contractspec/lib.schema"}),": Schema dictionary (SchemaModel, FieldType) for I/O definitions."]})]})]}),i("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Quick Example"}),o(it,{language:"typescript",code:`import { defineCommand } from '@contractspec/lib.contracts-spec';
-import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
+const seo = new SeoOptimizer().optimize(brief);`})]}),j("div",{className:"space-y-3",children:[O("h2",{className:"font-bold text-2xl",children:"When to use"}),j("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[O("li",{children:"Ship landing page refreshes whenever specs change."}),O("li",{children:"Automate release emails + nurture sequences per vertical."}),O("li",{children:"Create social snippets that stay on-message with the same brief."}),O("li",{children:"Generate SEO metadata + Schema.org markup alongside content."})]})]}),j("div",{className:"flex items-center gap-4 pt-4",children:[O(Le,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),j(Le,{href:"/docs/libraries/support-bot",className:"btn-primary",children:["Next: Support Bot ",O(At,{size:16})]})]})]})}import{CodeBlock as Dt,InstallCommand as Et}from"@contractspec/lib.design-system";import ge from"@contractspec/lib.ui-link";import{ChevronRight as Bt}from"lucide-react";import{jsx as r,jsxs as n}from"react/jsx-runtime";var Ot=`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',
   },
-  io: {
-    input: CreateUserInput,
-    output: /* ... */,
+  source: {
+    primary: {
+      key: ListDataGridShowcaseRowsQuery.meta.key,
+      version: ListDataGridShowcaseRowsQuery.meta.version,
+    },
+  },
+  view: {
+    kind: 'table',
+    executionMode: 'client',
+    selection: 'multiple',
+    columnVisibility: true,
+    columnResizing: true,
+    columnPinning: true,
+    rowExpansion: {
+      fields: ['notes', 'renewalDate', 'lastActivityAt'],
+    },
+    initialState: {
+      pageSize: 4,
+      hiddenColumns: ['notes'],
+      pinnedColumns: {
+        left: ['account'],
+      },
+      sorting: [{ field: 'arr', desc: true }],
+    },
+    fields: [
+      { key: 'account', label: 'Account', dataPath: 'account', sortable: true },
+      { key: 'owner', label: 'Owner', dataPath: 'owner', sortable: true },
+      { key: 'status', label: 'Status', dataPath: 'status', sortable: true },
+      { key: 'notes', label: 'Notes', dataPath: 'notes' },
+    ],
   },
-  policy: { auth: 'admin' },
-});`})]}),i("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Core Concepts"}),i("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[i("li",{children:[o("strong",{children:"OperationSpec"}),": Immutable description of an operation (Command or Query). Defines I/O, policy, and metadata."]}),i("li",{children:[o("strong",{children:"OperationSpecRegistry"}),": Registry of specs + handlers. Use ",o("code",{className:"font-mono text-xs",children:"installOp"})," ","to attach a handler."]}),i("li",{children:[o("strong",{children:"CapabilitySpec"}),": Canonical capability declaration (requires/provides)."]}),i("li",{children:[o("strong",{children:"PolicySpec"}),": Declarative policy rules (ABAC/ReBAC, rate limits)."]}),i("li",{children:[o("strong",{children:"TelemetrySpec"}),": Analytics definitions and privacy levels."]}),i("li",{children:[o("strong",{children:"PresentationSpec (V2)"}),": Describes how data is rendered (Web Components, Markdown, Data)."]})]})]}),i("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Lifecycle"}),i("ol",{className:"list-inside list-decimal space-y-2 text-muted-foreground",children:[i("li",{children:[o("strong",{children:"Define"})," the spec (I/O via SchemaModel or Zod)."]}),i("li",{children:[o("strong",{children:"Register"})," it:"," ",o("code",{className:"font-mono text-xs",children:"installOp(registry, spec, handler)"}),"."]}),i("li",{children:[o("strong",{children:"Expose"})," it via an adapter (REST, GraphQL, MCP)."]}),i("li",{children:[o("strong",{children:"Validate"})," at runtime automatically."]})]})]}),i("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Adapters"}),i("ul",{className:"space-y-2 text-muted-foreground",children:[i("li",{children:[o("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/rest-next-app"}),": Next.js App Router adapter"]}),i("li",{children:[o("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/provider-mcp"}),": Model Context Protocol (MCP) for AI agents"]}),i("li",{children:[o("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/graphql-pothos"}),": GraphQL schema generator"]})]})]}),i("div",{className:"flex items-center gap-4 pt-4",children:[i(fe,{href:"/docs/libraries/schema",className:"btn-primary",children:["Next: Schema ",o(nt,{size:16})]}),o(fe,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Core Concepts"})]})]})}import{CodeBlock as he,InstallCommand as lt}from"@contractspec/lib.design-system";import be from"@contractspec/lib.ui-link";import{ChevronRight as st}from"lucide-react";import{jsx as M,jsxs as F}from"react/jsx-runtime";function dt(){return F("div",{className:"space-y-8",children:[F("div",{className:"space-y-4",children:[M("h1",{className:"font-bold text-4xl",children:"Cost Tracking Library"}),F("p",{className:"text-lg text-muted-foreground",children:[M("code",{children:"@contractspec/lib.cost-tracking"})," transforms raw telemetry into dollars: DB/API/compute costs per operation, budget alerts per tenant, and actionable optimization tips."]})]}),F("div",{className:"space-y-4",children:[M("h2",{className:"font-bold text-2xl",children:"Installation"}),M(lt,{package:"@contractspec/lib.cost-tracking"})]}),F("div",{className:"space-y-4",children:[M("h2",{className:"font-bold text-2xl",children:"Record Samples"}),M(he,{language:"typescript",code:`const tracker = new CostTracker();
+});`;function Mt(){return n("div",{className:"space-y-8",children:[n("div",{className:"space-y-4",children:[r("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.contracts-spec"}),r("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."})]}),n("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Installation"}),r(Et,{package:["@contractspec/lib.contracts-spec","@contractspec/lib.schema"]})]}),n("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"What lives where"}),n("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[n("li",{children:[r("strong",{children:"@contractspec/lib.contracts-spec"})," (root): The core contracts definitions (OperationSpec, PresentationSpec, Registry)."]}),n("li",{children:[r("strong",{children:"@contractspec/lib.contracts-runtime-client-react"}),": Browser-safe helpers (React renderers, client SDK). Import this for web/React Native."]}),n("li",{children:[r("strong",{children:"@contractspec/lib.contracts-runtime-server-rest"}),": HTTP/MCP adapters, registries, integrations (Node-only)."]}),n("li",{children:[r("strong",{children:"@contractspec/lib.schema"}),": Schema dictionary (SchemaModel, FieldType) for I/O definitions."]})]})]}),n("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Data table contract example"}),n("p",{className:"text-muted-foreground",children:["The canonical account-grid example starts here in"," ",r("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."]}),r(Dt,{language:"typescript",code:Ot}),n("p",{className:"text-muted-foreground text-sm",children:["See the live version in"," ",r(ge,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"/docs/examples/data-grid-showcase"}),"."]})]}),n("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Core Concepts"}),n("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[n("li",{children:[r("strong",{children:"OperationSpec"}),": Immutable description of an operation (Command or Query). Defines I/O, policy, and metadata."]}),n("li",{children:[r("strong",{children:"OperationSpecRegistry"}),": Registry of specs + handlers. Use ",r("code",{className:"font-mono text-xs",children:"installOp"})," ","to attach a handler."]}),n("li",{children:[r("strong",{children:"CapabilitySpec"}),": Canonical capability declaration (requires/provides)."]}),n("li",{children:[r("strong",{children:"PolicySpec"}),": Declarative policy rules (ABAC/ReBAC, rate limits)."]}),n("li",{children:[r("strong",{children:"TelemetrySpec"}),": Analytics definitions and privacy levels."]}),n("li",{children:[r("strong",{children:"PresentationSpec (V2)"}),": Describes how data is rendered (Web Components, Markdown, Data)."]}),n("li",{children:[r("strong",{children:"DataViewSpec"}),": Declarative list, table, grid, and detail contracts that the table showcase uses as its canonical account-grid example."]})]})]}),n("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Lifecycle"}),n("ol",{className:"list-inside list-decimal space-y-2 text-muted-foreground",children:[n("li",{children:[r("strong",{children:"Define"})," the spec (I/O via SchemaModel or Zod)."]}),n("li",{children:[r("strong",{children:"Register"})," it:"," ",r("code",{className:"font-mono text-xs",children:"installOp(registry, spec, handler)"}),"."]}),n("li",{children:[r("strong",{children:"Expose"})," it via an adapter (REST, GraphQL, MCP)."]}),n("li",{children:[r("strong",{children:"Validate"})," at runtime automatically."]})]})]}),n("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Adapters"}),n("ul",{className:"space-y-2 text-muted-foreground",children:[n("li",{children:[r("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/rest-next-app"}),": Next.js App Router adapter"]}),n("li",{children:[r("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/provider-mcp"}),": Model Context Protocol (MCP) for AI agents"]}),n("li",{children:[r("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/graphql-pothos"}),": GraphQL schema generator"]})]})]}),n("div",{className:"flex items-center gap-4 pt-4",children:[n(ge,{href:"/docs/libraries/schema",className:"btn-primary",children:["Next: Schema ",r(Bt,{size:16})]}),r(ge,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Core Concepts"})]})]})}import{CodeBlock as Re,InstallCommand as Wt}from"@contractspec/lib.design-system";import Ie from"@contractspec/lib.ui-link";import{ChevronRight as zt}from"lucide-react";import{jsx as G,jsxs as q}from"react/jsx-runtime";function Ut(){return q("div",{className:"space-y-8",children:[q("div",{className:"space-y-4",children:[G("h1",{className:"font-bold text-4xl",children:"Cost Tracking Library"}),q("p",{className:"text-lg text-muted-foreground",children:[G("code",{children:"@contractspec/lib.cost-tracking"})," transforms raw telemetry into dollars: DB/API/compute costs per operation, budget alerts per tenant, and actionable optimization tips."]})]}),q("div",{className:"space-y-4",children:[G("h2",{className:"font-bold text-2xl",children:"Installation"}),G(Wt,{package:"@contractspec/lib.cost-tracking"})]}),q("div",{className:"space-y-4",children:[G("h2",{className:"font-bold text-2xl",children:"Record Samples"}),G(Re,{language:"typescript",code:`const tracker = new CostTracker();
 tracker.recordSample({
   operation: 'orders.list',
   tenantId: 'acme',
@@ -127,12 +152,96 @@ tracker.recordSample({
   dbWrites: 4,
   computeMs: 180,
   externalCalls: [{ provider: 'stripe', cost: 0.02 }],
-});`})]}),F("div",{className:"space-y-4",children:[M("h2",{className:"font-bold text-2xl",children:"Budget Alerts"}),M(he,{language:"typescript",code:`const budgets = new BudgetAlertManager({
+});`})]}),q("div",{className:"space-y-4",children:[G("h2",{className:"font-bold text-2xl",children:"Budget Alerts"}),G(Re,{language:"typescript",code:`const budgets = new BudgetAlertManager({
   budgets: [{ tenantId: 'acme', monthlyLimit: 150 }],
   onAlert: ({ tenantId, total }) => notifyFinance(tenantId, total),
 });
 
-tracker.getTotals({ tenantId: 'acme' }).forEach((summary) => budgets.track(summary));`})]}),F("div",{className:"space-y-4",children:[M("h2",{className:"font-bold text-2xl",children:"Optimization Suggestions"}),F("p",{className:"text-muted-foreground text-sm",children:["Feed summaries into ",M("code",{children:"OptimizationRecommender"})," to surface N+1 queries, compute-heavy steps, or expensive external calls. Store the generated suggestions in the new Prisma model to power Ops playbooks."]})]}),F("div",{className:"flex items-center gap-4 pt-4",children:[M(be,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),F(be,{href:"/docs/libraries/slo",className:"btn-primary",children:["Next: SLO ",M(st,{size:16})]})]})]})}import{CodeBlock as pt}from"@contractspec/lib.design-system";import ve from"@contractspec/lib.ui-link";import{ChevronRight as mt}from"lucide-react";import{jsx as h,jsxs as b}from"react/jsx-runtime";function ut(){return b("div",{className:"space-y-8",children:[b("div",{className:"space-y-4",children:[h("h1",{className:"font-bold text-4xl",children:"Data & Backend"}),h("p",{className:"text-muted-foreground",children:"A collection of robust, platform-agnostic libraries for building the backend infrastructure of your LSSM applications."})]}),b("div",{className:"space-y-4",children:[h("h2",{className:"font-bold text-2xl",children:"Libraries"}),b("div",{className:"space-y-6",children:[b("div",{className:"card-subtle p-6",children:[h("h3",{className:"font-bold text-lg",children:"@contractspec/app.cli-database"}),b("p",{className:"mt-2 text-muted-foreground text-sm",children:[h("strong",{children:"Prisma Wrapper & CLI"}),". Provides a unified way to manage database schemas, migrations, and clients. Includes seeders and factory patterns for testing."]})]}),b("div",{className:"card-subtle p-6",children:[h("h3",{className:"font-bold text-lg",children:"@contractspec/lib.bus"}),b("p",{className:"mt-2 text-muted-foreground text-sm",children:[h("strong",{children:"Type-Safe Event Bus"}),". Decouple your architecture with typed events. Supports in-memory dispatch for monoliths and can be extended for distributed message queues (Redis, SQS)."]})]}),b("div",{className:"card-subtle p-6",children:[h("h3",{className:"font-bold text-lg",children:"@contractspec/lib.logger"}),b("p",{className:"mt-2 text-muted-foreground text-sm",children:[h("strong",{children:"High-Performance Logging"}),". Optimized for Bun and structured JSON output. Includes plugins for ElysiaJS to log HTTP requests automatically."]})]}),b("div",{className:"card-subtle p-6",children:[h("h3",{className:"font-bold text-lg",children:"@contractspec/lib.error"}),b("p",{className:"mt-2 text-muted-foreground text-sm",children:[h("strong",{children:"Standardized Errors"}),". Use `AppError` with standard codes (NOT_FOUND, UNAUTHORIZED) to ensure consistent HTTP responses and error handling across services."]})]}),b("div",{className:"card-subtle p-6",children:[h("h3",{className:"font-bold text-lg",children:"@contractspec/lib.exporter"}),b("p",{className:"mt-2 text-muted-foreground text-sm",children:[h("strong",{children:"Data Export"}),". Generate CSV and XML files from your data. Platform-agnostic and streaming-friendly."]})]})]})]}),b("div",{className:"space-y-4",children:[h("h2",{className:"font-bold text-2xl",children:"Example: Unified Backend Flow"}),h(pt,{language:"typescript",code:`import { logger } from '@contractspec/lib.logger';
+tracker.getTotals({ tenantId: 'acme' }).forEach((summary) => budgets.track(summary));`})]}),q("div",{className:"space-y-4",children:[G("h2",{className:"font-bold text-2xl",children:"Optimization Suggestions"}),q("p",{className:"text-muted-foreground text-sm",children:["Feed summaries into ",G("code",{children:"OptimizationRecommender"})," to surface N+1 queries, compute-heavy steps, or expensive external calls. Store the generated suggestions in the new Prisma model to power Ops playbooks."]})]}),q("div",{className:"flex items-center gap-4 pt-4",children:[G(Ie,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),q(Ie,{href:"/docs/libraries/slo",className:"btn-primary",children:["Next: SLO ",G(zt,{size:16})]})]})]})}var Ae=[{title:"@contractspec/lib.presentation-runtime-core",body:"Shared state, table models, workflow logic, visualization helpers, and the alias helpers consumed by web and native builds."},{title:"@contractspec/lib.presentation-runtime-react",body:"React-facing hooks such as useContractTable, useDataViewTable, and useWorkflow. This is the shared hook surface most product code starts from."},{title:"@contractspec/lib.presentation-runtime-react-native",body:"Native entrypoint for mobile apps. It re-exports the shared table and data-view hooks so the controller API stays aligned with the React package."},{title:"@contractspec/lib.ui-kit-web",body:"Browser-first primitives and accessibility helpers. Reach for this layer when you want direct control over the web renderer."},{title:"@contractspec/lib.ui-kit",body:"Native-first primitives for Expo and React Native. Reach for this layer when the render surface should stay mobile-native."},{title:"@contractspec/lib.design-system",body:"Composed components, ThemeSpec/TranslationSpec-aware controls, token helpers, and paired web/mobile implementations that sit on top of both UI kits."}],Pe=[{title:"useContractTable",body:"Use this when your rows and column definitions already live in product code and you want one headless controller for sorting, pagination, selection, visibility, pinning, sizing, and expansion."},{title:"useDataViewTable",body:"Use this when the table should stay driven by a DataViewSpec instead of hand-authored columns. It adapts the spec to the same generic controller model."},{title:"Native re-export boundary",body:"On native apps, import the same hook names from @contractspec/lib.presentation-runtime-react-native when you want the import path itself to signal a mobile boundary."}],De=[{title:"Next.js / Turbopack",body:"Use withPresentationTurbopackAliases as the default path in current Next.js apps. It patches nextConfig.turbopack instead of mutating a webpack config object."},{title:"Next.js / Webpack fallback",body:"Use withPresentationWebpackAliases only when a Next.js app explicitly opts back into webpack via the CLI flags."},{title:"Expo / Metro",body:"Use withPresentationMetroAliases on Metro when native platforms should resolve web ui-kit /ui imports and the shared React runtime root to native implementations."}],Ee=[{title:"withPlatformUI",body:"Use this lightweight adapter when a design-system surface needs one object that carries the current platform, tokens, and breakpoints."},{title:"mapTokensForPlatform",body:"Use this when resolved tokens need to be mapped into platform-specific token shapes before the final renderer consumes them."}],Be=[{title:"What Webpack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Prepends .web.js, .web.jsx, .web.ts, and .web.tsx to webpack resolve.extensions"]},{title:"What Turbopack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Initializes or merges turbopack.resolveExtensions with a web-first extension list"]},{title:"What Metro remaps",items:["@contractspec/lib.ui-kit-web/ui/* -> @contractspec/lib.ui-kit/ui/* on ios/android/native/mobile","Root @contractspec/lib.presentation-runtime-react -> @contractspec/lib.presentation-runtime-react-native","Enables package exports and expands platform resolution ordering"]}],Oe=["Set gap, align, justify, and wrap explicitly in shared code because defaults are not identical between web and native.","Shared-safe subset: VStack, HStack, and Box with className, gap, align, justify, and wrap.","Web-only feature: as lets stack primitives emit semantic elements such as section, header, main, or article.","Native-only extras: spacing, width, and padding exist on the native stack primitives and should stay out of shared renderer code.","HStack and Box reverse-wrap tokens differ: wrapReverse on web, reverse on native. Prefer nowrap or wrap in shared code.","Box defaults to nowrap on web and wrap on native, so shared code should set wrap intentionally."],Me=["withPresentationNextAliases no longer exists. Use withPresentationTurbopackAliases for the default Next.js path or withPresentationWebpackAliases for explicit webpack fallback.","Prefer root runtime imports when alias helpers matter. Metro remaps the root @contractspec/lib.presentation-runtime-react package, not arbitrary deep hook subpaths.","Metro only rewrites @contractspec/lib.ui-kit-web/ui/* imports. Router-specific web packages and other web-only helpers still need platform-aware imports.","presentation-runtime-core is headless. It owns models and config helpers, not rendered React components.","design-system compatibility comes from paired .tsx / .mobile.tsx implementations and token helpers such as withPlatformUI and mapTokensForPlatform.","Form controls should come from @contractspec/lib.design-system when product code needs ThemeSpec or TranslationSpec support.","Stack primitives are similar across platforms, but the prop surface is not identical. Stay inside the common subset for shared renderers.","Alias helpers solve module resolution only. They do not replace app-level monorepo watchFolders, Expo Router setup, or other Next configuration."],We="Copy these markdown snippets into your own AGENTS.md, LLM guide, README, or engineering playbook when you want to enforce the same cross-surface rules across customer projects.",ze=`import { withPresentationTurbopackAliases } from '@contractspec/lib.presentation-runtime-core';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = withPresentationTurbopackAliases({
+  turbopack: {
+    resolveAlias: {
+      fs: { browser: 'browserify-fs' },
+    },
+  },
+});
+
+export default nextConfig;`,Ue=`import { withPresentationWebpackAliases } from '@contractspec/lib.presentation-runtime-core';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config) => withPresentationWebpackAliases(config),
+};
+
+export default nextConfig;`,Ge=`const { getDefaultConfig } = require('expo/metro-config');
+const {
+  withPresentationMetroAliases,
+} = require('@contractspec/lib.presentation-runtime-core');
+
+const projectRoot = __dirname;
+const config = getDefaultConfig(projectRoot);
+
+module.exports = withPresentationMetroAliases(config);`,Fe=["import {","  defaultTokens,","  mapTokensForPlatform,","  withPlatformUI,","} from '@contractspec/lib.design-system';","","const nativeTokens = mapTokensForPlatform('native', defaultTokens);","","const ui = withPlatformUI({","  tokens: defaultTokens,","  platform: 'web',","});","","// ui is a lightweight config object for design-system consumers.","// nativeTokens is the mapped token shape for a native renderer."].join(`
+`),Ve=`import { Box, HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+
+export function AccountSummaryHeader() {
+  return (
+    <VStack gap="lg" align="stretch" className="w-full">
+      <HStack gap="sm" align="center" justify="between" wrap="wrap">
+        <Box gap="xs" align="center" justify="start" wrap="nowrap">
+          <StatusDot />
+          <Title />
+        </Box>
+        <Actions />
+      </HStack>
+      <Filters />
+    </VStack>
+  );
+}
+
+// In native-only files, swap the import to:
+// @contractspec/lib.ui-kit/ui/stack
+//
+// On web-only pages, VStack / HStack / Box also support:
+// <VStack as="section">...</VStack>`,_e=`import { DataTable as DesignSystemTable } from '@contractspec/lib.design-system';
+import { DataTable as NativeTable } from '@contractspec/lib.ui-kit/ui/data-table';
+import { DataTable as WebTable } from '@contractspec/lib.ui-kit-web/ui/data-table';
+import { useContractTable } from '@contractspec/lib.presentation-runtime-react';
+
+export function useAccountsController(data, columns) {
+  return useContractTable({
+    data,
+    columns,
+    selectionMode: 'single',
+    initialState: {
+      sorting: [{ id: 'arr', desc: true }],
+      pagination: { pageIndex: 0, pageSize: 5 },
+    },
+  });
+}
+
+export function WebAccounts({ controller }) {
+  return <WebTable controller={controller} />;
+}
+
+export function NativeAccounts({ controller }) {
+  return <NativeTable controller={controller} />;
+}
+
+export function ProductAccounts({ controller }) {
+  return (
+    <DesignSystemTable
+      controller={controller}
+      title="Accounts"
+      description="Same controller, composed ContractSpec shell."
+    />
+  );
+}
+
+// If the table is spec-driven instead of hand-authored,
+// swap useContractTable for useDataViewTable.`,He="# Cross-Surface Rendering Policy\n\n- Import runtime bundler helpers from `@contractspec/lib.presentation-runtime-core` root only.\n- Use `withPresentationTurbopackAliases` for default Next.js projects.\n- Use `withPresentationWebpackAliases` only when the app explicitly opts into webpack.\n- Use `withPresentationMetroAliases` for Expo and Metro builds.\n- Prefer `@contractspec/lib.design-system` for shared product-facing surfaces.\n- Use design-system controls when a field must respect ThemeSpec component variants or TranslationSpec messages.\n- Use `@contractspec/lib.ui-kit-web` only for web-specific primitive lanes.\n- Use `@contractspec/lib.ui-kit` only for native-specific primitive lanes.\n- Keep shared layout code inside the common `VStack` / `HStack` / `Box` subset.\n- Do not use removed `withPresentationNextAliases`.\n- Treat `.tsx` / `.mobile.tsx` pairs as the standard design-system compatibility boundary.",qe="# Cross-Surface Rendering Checklist\n\n1. Configure the bundler aliases before sharing any UI code.\n2. Choose the controller layer:\n   - use `useContractTable` for app-owned rows and columns\n   - use `useDataViewTable` for DataViewSpec-driven tables\n3. Choose the renderer lane:\n   - web primitive: `@contractspec/lib.ui-kit-web`\n   - native primitive: `@contractspec/lib.ui-kit`\n   - shared product surface: `@contractspec/lib.design-system`\n4. Verify mirrored `.tsx` / `.mobile.tsx` implementations where the design-system owns the surface.\n5. Wrap product surfaces in `DesignSystemThemeProvider` and `DesignSystemTranslationProvider` when ThemeSpec or TranslationSpec data is available.\n6. In shared layout code, set `gap`, `align`, `justify`, and `wrap` explicitly.\n7. Check docs and examples for root imports and current helper names before copying them into product code.";import{CodeBlock as ee}from"@contractspec/lib.design-system";import ce from"@contractspec/lib.ui-link";import{ChevronRight as Gt}from"lucide-react";import{jsx as e,jsxs as h}from"react/jsx-runtime";function Ft(){return h("div",{className:"space-y-8",children:[h("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"Cross-platform UI"}),e("p",{className:"text-lg text-muted-foreground",children:"How ContractSpec keeps React and React Native components compatible by splitting responsibility across shared runtime models, platform primitives, resolver aliases, and the composed design-system layer."})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What cross-platform means here"}),e("p",{className:"text-muted-foreground",children:"The shared rendering story is layered: the core package owns models and resolver helpers, the React packages own hook APIs, the UI kits own raw primitives, and the design-system owns the higher-level product surfaces that pair web and mobile implementations."}),e("div",{className:"grid gap-4 md:grid-cols-2",children:Ae.map((t)=>h("div",{className:"rounded-[20px] border border-border/70 p-4",children:[e("h3",{className:"font-semibold text-base",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),e("div",{className:"grid gap-4 md:grid-cols-3",children:Pe.map((t)=>h("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),h("div",{className:"grid gap-4 lg:grid-cols-[1.1fr_0.9fr]",children:[e("div",{className:"grid gap-4 md:grid-cols-2",children:Ee.map((t)=>h("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),e(ee,{language:"typescript",filename:"design-system-platform.ts",code:Fe})]})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Resolver and alias setup"}),h("p",{className:"text-muted-foreground",children:["Teach the bundler what “web” and “native” mean before you try to share component code. These helpers are public from the root",e("code",{children:" @contractspec/lib.presentation-runtime-core "}),"entrypoint."]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:De.map((t)=>h("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),h("div",{className:"grid gap-4 xl:grid-cols-3",children:[e(ee,{language:"typescript",filename:"next.config.mjs",code:ze}),e(ee,{language:"typescript",filename:"next.config.mjs",code:Ue}),e(ee,{language:"javascript",filename:"metro.config.js",code:Ge})]})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"How the remapping works"}),e("p",{className:"text-muted-foreground",children:"The helpers are intentionally asymmetric because Turbopack patches the Next config object, Webpack mutates a resolver config, and Metro maps modules at request time for native platforms."}),e("div",{className:"grid gap-4 xl:grid-cols-3",children:Be.map((t)=>h("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("ul",{className:"mt-2 space-y-2 text-muted-foreground text-sm leading-7",children:t.items.map((w)=>e("li",{children:w},w))})]},t.title))})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Layout primitives"}),h("p",{className:"text-muted-foreground",children:[e("code",{children:"VStack"}),", ",e("code",{children:"HStack"}),", and ",e("code",{children:"Box"})," are the closest thing to a shared layout vocabulary, but their defaults and a few props still differ across the web and native packages."]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:Oe.map((t)=>e("div",{className:"card-subtle p-4 text-muted-foreground text-sm leading-7",children:t},t))}),e(ee,{language:"tsx",filename:"stack-layout.tsx",code:Ve})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Rendering patterns"}),e("p",{className:"text-muted-foreground",children:"Keep the controller stable, then decide whether the final surface should be a raw web primitive, a raw native primitive, or a composed design-system wrapper."}),e(ee,{language:"tsx",filename:"cross-platform-rendering.tsx",code:_e}),h("div",{className:"card-subtle p-4 text-muted-foreground text-sm leading-7",children:["For higher-level shared rendering, use the design-system surfaces that already ship paired implementations such as"," ",e("code",{children:"DataViewRenderer"}),", ",e("code",{children:"ListTablePage"}),", and"," ",e("code",{children:"DataTable"}),". The web and mobile files stay separate inside the package while your app imports one design-system boundary."]})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Gotchas and boundaries"}),e("ul",{className:"space-y-2 text-muted-foreground leading-7",children:Me.map((t)=>e("li",{children:t},t))})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Customer markdown kit"}),e("p",{className:"text-muted-foreground",children:We}),h("div",{className:"grid gap-4 xl:grid-cols-2",children:[e(ee,{language:"markdown",filename:"cross-surface-policy.md",code:He}),e(ee,{language:"markdown",filename:"cross-surface-checklist.md",code:qe})]})]}),h("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[e(ce,{href:"/docs/libraries/runtime",className:"btn-ghost",children:"Runtime libraries"}),e(ce,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"UI Kit"}),e(ce,{href:"/docs/libraries/ui-kit-web",className:"btn-ghost",children:"UI Kit Web"}),h(ce,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Design System ",e(Gt,{size:16})]})]})]})}import{CodeBlock as Vt}from"@contractspec/lib.design-system";import Qe from"@contractspec/lib.ui-link";import{ChevronRight as _t}from"lucide-react";import{jsx as y,jsxs as N}from"react/jsx-runtime";function Ht(){return N("div",{className:"space-y-8",children:[N("div",{className:"space-y-4",children:[y("h1",{className:"font-bold text-4xl",children:"Data & Backend"}),y("p",{className:"text-muted-foreground",children:"A collection of robust, platform-agnostic libraries for building the backend infrastructure of your LSSM applications."})]}),N("div",{className:"space-y-4",children:[y("h2",{className:"font-bold text-2xl",children:"Libraries"}),N("div",{className:"space-y-6",children:[N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/app.cli-database"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"Prisma Wrapper & CLI"}),". Provides a unified way to manage database schemas, migrations, and clients. Includes seeders and factory patterns for testing."]})]}),N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/lib.bus"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"Type-Safe Event Bus"}),". Decouple your architecture with typed events. Supports in-memory dispatch for monoliths and can be extended for distributed message queues (Redis, SQS)."]})]}),N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/lib.logger"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"High-Performance Logging"}),". Optimized for Bun and structured JSON output. Includes plugins for ElysiaJS to log HTTP requests automatically."]})]}),N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/lib.error"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"Standardized Errors"}),". Use `AppError` with standard codes (NOT_FOUND, UNAUTHORIZED) to ensure consistent HTTP responses and error handling across services."]})]}),N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/lib.exporter"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"Data Export"}),". Generate CSV and XML files from your data. Platform-agnostic and streaming-friendly."]})]})]})]}),N("div",{className:"space-y-4",children:[y("h2",{className:"font-bold text-2xl",children:"Example: Unified Backend Flow"}),y(Vt,{language:"typescript",code:`import { logger } from '@contractspec/lib.logger';
 import { AppError } from '@contractspec/lib.error';
 import { db } from '@contractspec/app.cli-database';
 import { EventBus } from '@contractspec/lib.bus';
@@ -150,7 +259,7 @@ export async function createUser(email: string) {
   await EventBus.publish('user.created', { userId: user.id });
   
   return user;
-}`})]}),b("div",{className:"flex items-center gap-4 pt-4",children:[b(ve,{href:"/docs/libraries/runtime",className:"btn-primary",children:["Next: Runtime ",h(mt,{size:16})]}),h(ve,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"})]})]})}import{CodeBlock as ye,InstallCommand as gt}from"@contractspec/lib.design-system";import Ne from"@contractspec/lib.ui-link";import{ChevronRight as ft}from"lucide-react";import{jsx as l,jsxs as v}from"react/jsx-runtime";function ht(){return v("div",{className:"space-y-8",children:[v("div",{className:"space-y-4",children:[l("h1",{className:"font-bold text-4xl",children:"DataViews Runtime Library"}),v("p",{className:"text-lg text-muted-foreground",children:["The ",l("code",{children:"@contractspec/lib.contracts-spec/data-views"})," and"," ",l("code",{children:"@contractspec/lib.design-system"})," libraries provide the runtime logic and UI components to render DataViews in your application."]})]}),v("div",{className:"space-y-4",children:[l("h2",{className:"font-bold text-2xl",children:"Installation"}),l(gt,{package:["@contractspec/lib.contracts-spec","@contractspec/lib.design-system"]})]}),v("div",{className:"space-y-4",children:[l("h2",{className:"font-bold text-2xl",children:"DataViewRenderer"}),l("p",{className:"text-muted-foreground",children:"The primary component for rendering any DataView. It automatically selects the correct layout (List, Table, Grid, Detail) based on the spec."}),l(ye,{language:"tsx",code:`import { DataViewRenderer } from '@contractspec/lib.design-system';
+}`})]}),N("div",{className:"flex items-center gap-4 pt-4",children:[N(Qe,{href:"/docs/libraries/runtime",className:"btn-primary",children:["Next: Runtime ",y(_t,{size:16})]}),y(Qe,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"})]})]})}import{CodeBlock as Ke,InstallCommand as qt}from"@contractspec/lib.design-system";import Je from"@contractspec/lib.ui-link";import{ChevronRight as Qt}from"lucide-react";import{jsx as m,jsxs as k}from"react/jsx-runtime";function Kt(){return k("div",{className:"space-y-8",children:[k("div",{className:"space-y-4",children:[m("h1",{className:"font-bold text-4xl",children:"DataViews Runtime Library"}),k("p",{className:"text-lg text-muted-foreground",children:["The ",m("code",{children:"@contractspec/lib.contracts-spec/data-views"})," and"," ",m("code",{children:"@contractspec/lib.design-system"})," libraries provide the runtime logic and UI components to render DataViews in your application."]})]}),k("div",{className:"space-y-4",children:[m("h2",{className:"font-bold text-2xl",children:"Installation"}),m(qt,{package:["@contractspec/lib.contracts-spec","@contractspec/lib.design-system"]})]}),k("div",{className:"space-y-4",children:[m("h2",{className:"font-bold text-2xl",children:"DataViewRenderer"}),m("p",{className:"text-muted-foreground",children:"The primary component for rendering any DataView. It automatically selects the correct layout (List, Table, Grid, Detail) based on the spec."}),m(Ke,{language:"tsx",code:`import { DataViewRenderer } from '@contractspec/lib.design-system';
 import { MyUserList } from './specs/users.data-view';
 
 export function UserPage() {
@@ -162,7 +271,7 @@ export function UserPage() {
       onPageChange={(page) => fetchPage(page)}
     />
   );
-}`}),l("h3",{className:"font-semibold text-xl",children:"Props"}),v("ul",{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:[v("li",{children:[l("code",{children:"spec"}),": The DataViewSpec definition."]}),v("li",{children:[l("code",{children:"items"}),": Array of data items to render."]}),v("li",{children:[l("code",{children:"filters"}),": Current filter state object."]}),v("li",{children:[l("code",{children:"onFilterChange"}),": Callback when filters change."]}),v("li",{children:[l("code",{children:"pagination"}),": Object with ",l("code",{children:"page"}),","," ",l("code",{children:"pageSize"}),", ",l("code",{children:"total"}),"."]}),v("li",{children:[l("code",{children:"onPageChange"}),": Callback when page changes."]})]})]}),v("div",{className:"space-y-4",children:[l("h2",{className:"font-bold text-2xl",children:"Query Generation"}),v("p",{className:"text-muted-foreground",children:["The ",l("code",{children:"DataViewQueryGenerator"})," utility helps translate DataView parameters (filters, sorting, pagination) into query arguments for your backend."]}),l(ye,{language:"typescript",code:`import { DataViewQueryGenerator } from '@contractspec/lib.contracts-spec/data-views/query-generator';
+}`}),m("h3",{className:"font-semibold text-xl",children:"Props"}),k("ul",{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:[k("li",{children:[m("code",{children:"spec"}),": The DataViewSpec definition."]}),k("li",{children:[m("code",{children:"items"}),": Array of data items to render."]}),k("li",{children:[m("code",{children:"filters"}),": Current filter state object."]}),k("li",{children:[m("code",{children:"onFilterChange"}),": Callback when filters change."]}),k("li",{children:[m("code",{children:"pagination"}),": Object with ",m("code",{children:"page"}),","," ",m("code",{children:"pageSize"}),", ",m("code",{children:"total"}),"."]}),k("li",{children:[m("code",{children:"onPageChange"}),": Callback when page changes."]})]})]}),k("div",{className:"space-y-4",children:[m("h2",{className:"font-bold text-2xl",children:"Query Generation"}),k("p",{className:"text-muted-foreground",children:["The ",m("code",{children:"DataViewQueryGenerator"})," utility helps translate DataView parameters (filters, sorting, pagination) into query arguments for your backend."]}),m(Ke,{language:"typescript",code:`import { DataViewQueryGenerator } from '@contractspec/lib.contracts-spec/data-views/query-generator';
 
 const generator = new DataViewQueryGenerator(MyUserList);
 const query = generator.generate({
@@ -170,43 +279,91 @@ const query = generator.generate({
   filters: { role: 'admin' }
 });
 
-// query.input contains { skip: 0, take: 20, role: 'admin' }`})]}),v("div",{className:"flex items-center gap-4 pt-4",children:[l(Ne,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),v(Ne,{href:"/docs/libraries/data-backend",className:"btn-primary",children:["Next: Data & Backend ",l(ft,{size:16})]})]})]})}import{CodeBlock as ie,InstallCommand as bt}from"@contractspec/lib.design-system";import ke from"@contractspec/lib.ui-link";import{ChevronRight as vt}from"lucide-react";import{jsx as t,jsxs as n}from"react/jsx-runtime";function yt(){return n("div",{className:"space-y-8",children:[n("div",{className:"space-y-4",children:[t("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.design-system"}),n("p",{className:"text-muted-foreground",children:["High-level design system components, patterns, and layouts for LSSM applications. Built on top of ",t("code",{children:"@contractspec/lib.ui-kit"}),"."]})]}),n("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Installation"}),t(bt,{package:"@contractspec/lib.design-system"})]}),n("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"What It Provides"}),n("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[n("li",{children:[t("strong",{children:"Composite Components"}),": Molecules and Organisms that solve common UI problems"]}),n("li",{children:[t("strong",{children:"Layouts"}),": Ready-to-use page structures for dashboards, marketing sites, and lists"]}),n("li",{children:[t("strong",{children:"Data Views"}),": Standardized renderers for lists, tables, and detail views"]}),n("li",{children:[t("strong",{children:"Forms"}),": Zod-integrated form layouts and components"]}),n("li",{children:[t("strong",{children:"Code Display"}),": Syntax-highlighted code blocks with package manager tabs"]}),n("li",{children:[t("strong",{children:"Platform Utilities"}),": Hooks for responsive and adaptive design"]}),n("li",{children:[t("strong",{children:"Legal Templates"}),": Compliant templates for Terms, Privacy, and GDPR"]})]})]}),n("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Example: App Layout"}),t(ie,{language:"tsx",code:`import { AppLayout } from '@contractspec/lib.design-system';
-import { AppSidebar } from '@contractspec/lib.design-system';
+// query.input contains { skip: 0, take: 20, role: 'admin' }`})]}),k("div",{className:"flex items-center gap-4 pt-4",children:[m(Je,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),k(Je,{href:"/docs/libraries/data-backend",className:"btn-primary",children:["Next: Data & Backend ",m(Qt,{size:16})]})]})]})}import{CodeBlock as he,InstallCommand as Jt}from"@contractspec/lib.design-system";import se from"@contractspec/lib.ui-link";import{ChevronRight as Zt}from"lucide-react";import{jsx as o,jsxs as c}from"react/jsx-runtime";var Xt=`import { Button, DataTable } from '@contractspec/lib.design-system';
+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 AccountHealthTable() {
+  const columns = useShowcaseColumns();
+
+  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 Layout({ children }) {
   return (
-    <AppLayout sidebar={<AppSidebar />}>
-      {children}
-    </AppLayout>
+    <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}\`}
+    />
   );
-}`})]}),n("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Example: Zod Form"}),t(ie,{language:"tsx",code:`import { ZodForm } from '@contractspec/lib.design-system';
-import * as z from "zod";
-
-const schema = z.object({
-  name: z.string().min(1),
-  email: z.string().email(),
+}`,$t=`import {
+  DesignSystemThemeProvider,
+  resolveThemeModeTokens,
+  themeSpecToCssVariables,
+  themeSpecToTailwindCss,
+  themeSpecToTailwindPreset,
+} from '@contractspec/lib.design-system';
+
+const tokens = resolveThemeModeTokens(themeSpec, 'light', {
+  targets: ['tenant:acme'],
 });
 
-export function SignupForm() {
+export default themeSpecToTailwindPreset(tokens);
+
+const css = themeSpecToTailwindCss(
+  themeSpecToCssVariables(themeSpec, { targets: ['tenant:acme'] }),
+  { includeCustomVariant: true }
+);
+
+export function TenantSurface({ children }: { children: React.ReactNode }) {
   return (
-    <ZodForm
-      schema={schema}
-      onSubmit={(data) => console.log(data)}
-      submitLabel="Submit"
-    />
+    <DesignSystemThemeProvider
+      theme={themeSpec}
+      targets={['tenant:acme']}
+      mode="dark"
+      applyCssVariables
+    >
+      {children}
+    </DesignSystemThemeProvider>
   );
-}`})]}),n("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Example: Code Block with Package Manager Tabs"}),t(ie,{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"
-/>`})]}),n("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Key Exports"}),n("div",{className:"grid gap-4 md:grid-cols-2",children:[n("div",{className:"card-subtle p-4",children:[t("h3",{className:"mb-2 font-semibold",children:"Organisms"}),n("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[t("li",{children:"AppLayout, AppHeader, AppSidebar"}),t("li",{children:"MarketingLayout, HeroSection"}),t("li",{children:"ListCardPage, ListTablePage"})]})]}),n("div",{className:"card-subtle p-4",children:[t("h3",{className:"mb-2 font-semibold",children:"Data & Forms"}),n("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[t("li",{children:"DataViewRenderer"}),t("li",{children:"ZodForm"}),t("li",{children:"FormLayout, FormDialog"})]})]}),n("div",{className:"card-subtle p-4",children:[t("h3",{className:"mb-2 font-semibold",children:"Code Display"}),n("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[t("li",{children:"CodeBlock (syntax highlighting)"}),t("li",{children:"CommandTabs (package manager tabs)"}),t("li",{children:"InstallCommand (convenience wrapper)"}),t("li",{children:"CopyButton"})]})]}),n("div",{className:"card-subtle p-4",children:[t("h3",{className:"mb-2 font-semibold",children:"Providers"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:t("li",{children:"PackageManagerProvider"})})]})]})]}),n("div",{className:"flex items-center gap-4 pt-4",children:[t(ke,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"Previous: UI Kit"}),n(ke,{href:"/docs/libraries/accessibility",className:"btn-primary",children:["Next: Accessibility ",t(vt,{size:16})]})]})]})}import{CodeBlock as re,InstallCommand as Nt}from"@contractspec/lib.design-system";import we from"@contractspec/lib.ui-link";import{ChevronRight as kt}from"lucide-react";import{jsx as k,jsxs as V}from"react/jsx-runtime";function wt(){return V("div",{className:"space-y-8",children:[V("div",{className:"space-y-4",children:[k("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.evolution"}),k("p",{className:"text-lg text-muted-foreground",children:"Analyze production telemetry, surface anomalies, and turn them into AI-reviewed spec proposals that can be approved, rolled out, or reverted."})]}),V("div",{className:"space-y-4",children:[k("h2",{className:"font-bold text-2xl",children:"Installation"}),k(Nt,{package:"@contractspec/lib.evolution"})]}),V("div",{className:"space-y-3",children:[k("h2",{className:"font-bold text-2xl",children:"From telemetry to intent"}),k(re,{language:"typescript",code:`import { SpecAnalyzer } from '@contractspec/lib.evolution/analyzer';
+}`,Yt=`import { themeSpecToTailwindPreset } from '@contractspec/lib.design-system/theme';
+import { Select } from '@contractspec/lib.design-system/controls';
+import { FormDialog } from '@contractspec/lib.design-system/forms';
+import { HStack } from '@contractspec/lib.design-system/layout';
+
+// Root imports remain supported:
+import { Button, DataTable } from '@contractspec/lib.design-system';`;function xt(){return c("div",{className:"space-y-8",children:[c("div",{className:"space-y-4",children:[o("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.design-system"}),c("p",{className:"text-muted-foreground",children:["High-level design system components, patterns, and layouts for LSSM applications. Built on top of ",o("code",{children:"@contractspec/lib.ui-kit"}),"."]})]}),c("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Installation"}),o(Jt,{package:"@contractspec/lib.design-system"})]}),c("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"What It Provides"}),c("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[c("li",{children:[o("strong",{children:"Composite Components"}),": Molecules and Organisms that solve common UI problems"]}),c("li",{children:[o("strong",{children:"Layouts"}),": Ready-to-use page structures for dashboards, marketing sites, and lists"]}),c("li",{children:[o("strong",{children:"Data Views"}),": Standardized renderers for lists, tables, and detail views"]}),c("li",{children:[o("strong",{children:"Forms"}),": Zod-integrated form layouts and components"]}),c("li",{children:[o("strong",{children:"Code Display"}),": Syntax-highlighted code blocks with package manager tabs"]}),c("li",{children:[o("strong",{children:"Platform Utilities"}),": Hooks for responsive and adaptive design"]}),c("li",{children:[o("strong",{children:"Theme Bridge"}),": ThemeSpec to Tailwind variables, presets, CSS text, and runtime light/dark mode"]}),c("li",{children:[o("strong",{children:"Legal Templates"}),": Compliant templates for Terms, Privacy, and GDPR"]})]})]}),c("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"ThemeSpec to Tailwind"}),c("p",{className:"text-muted-foreground",children:["The theme bridge keeps ",o("code",{children:"ThemeSpec"})," as the source of truth and exposes no-generation Tailwind helpers, optional CSS text serialization, runtime CSS variables, light/dark modes, and OKLCH color pass-through."]}),o(he,{language:"tsx",code:$t})]}),c("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Focused import surfaces"}),o("p",{className:"text-muted-foreground",children:"New code can use focused subpaths for theme, controls, forms, and layout while existing root imports remain compatible."}),o(he,{language:"tsx",code:Yt})]}),c("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Data table example"}),c("p",{className:"text-muted-foreground",children:["This is the composed lane from the canonical"," ",o(se,{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."]}),o(he,{language:"tsx",code:Xt})]}),c("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Key Exports"}),c("div",{className:"grid gap-4 md:grid-cols-2",children:[c("div",{className:"card-subtle p-4",children:[o("h3",{className:"mb-2 font-semibold",children:"Organisms"}),c("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[o("li",{children:"AppLayout, AppHeader, AppSidebar"}),o("li",{children:"MarketingLayout, HeroSection"}),o("li",{children:"ListCardPage, ListTablePage"})]})]}),c("div",{className:"card-subtle p-4",children:[o("h3",{className:"mb-2 font-semibold",children:"Data & Forms"}),c("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[o("li",{children:"DataTable"}),o("li",{children:"DataViewTable"}),o("li",{children:"DataViewRenderer"}),o("li",{children:"ZodForm"}),o("li",{children:"FormLayout, FormDialog"})]})]}),c("div",{className:"card-subtle p-4",children:[o("h3",{className:"mb-2 font-semibold",children:"Code Display"}),c("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[o("li",{children:"CodeBlock (syntax highlighting)"}),o("li",{children:"CommandTabs (package manager tabs)"}),o("li",{children:"InstallCommand (convenience wrapper)"}),o("li",{children:"CopyButton"})]})]}),c("div",{className:"card-subtle p-4",children:[o("h3",{className:"mb-2 font-semibold",children:"Providers"}),o("ul",{className:"space-y-1 text-muted-foreground text-sm",children:o("li",{children:"PackageManagerProvider"})})]})]})]}),c("div",{className:"card-subtle space-y-3 p-6",children:[o("h2",{className:"font-bold text-2xl",children:"Where this layer fits"}),c("p",{className:"text-muted-foreground",children:["Read"," ",o(se,{href:"/docs/libraries/cross-platform-ui",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Cross-platform UI"})," ","for the package split between shared runtime controllers, leaf platform primitives, and this composed design-system layer."]})]}),c("div",{className:"flex items-center gap-4 pt-4",children:[o(se,{href:"/docs/libraries/ui-kit-web",className:"btn-ghost",children:"Previous: UI Kit Web"}),c(se,{href:"/docs/libraries/accessibility",className:"btn-primary",children:["Next: Accessibility ",o(Zt,{size:16})]})]})]})}import{CodeBlock as fe,InstallCommand as jt}from"@contractspec/lib.design-system";import Ze from"@contractspec/lib.ui-link";import{ChevronRight as ea}from"lucide-react";import{jsx as T,jsxs as X}from"react/jsx-runtime";function ta(){return X("div",{className:"space-y-8",children:[X("div",{className:"space-y-4",children:[T("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.evolution"}),T("p",{className:"text-lg text-muted-foreground",children:"Analyze production telemetry, surface anomalies, and turn them into AI-reviewed spec proposals that can be approved, rolled out, or reverted."})]}),X("div",{className:"space-y-4",children:[T("h2",{className:"font-bold text-2xl",children:"Installation"}),T(jt,{package:"@contractspec/lib.evolution"})]}),X("div",{className:"space-y-3",children:[T("h2",{className:"font-bold text-2xl",children:"From telemetry to intent"}),T(fe,{language:"typescript",code:`import { SpecAnalyzer } from '@contractspec/lib.evolution/analyzer';
 import { EvolutionPipeline } from '@contractspec/lib.observability';
 
 const analyzer = new SpecAnalyzer();
@@ -221,7 +378,7 @@ pipeline.ingest({
   success: false,
   timestamp: new Date(),
   errorCode: 'VALIDATION_FAILED',
-});`})]}),V("div",{className:"space-y-3",children:[k("h2",{className:"font-bold text-2xl",children:"Generate & approve suggestions"}),k(re,{language:"typescript",code:`import {
+});`})]}),X("div",{className:"space-y-3",children:[T("h2",{className:"font-bold text-2xl",children:"Generate & approve suggestions"}),T(fe,{language:"typescript",code:`import {
   SpecGenerator,
   SpecSuggestionOrchestrator,
   InMemorySpecSuggestionRepository,
@@ -235,7 +392,7 @@ const suggestion = generator.generateFromIntent(intentPattern, {
   summary: 'Add PO number requirement for acme.corp',
 });
 
-await orchestrator.submit(suggestion, sessionState);`})]}),V("div",{className:"space-y-3",children:[k("h2",{className:"font-bold text-2xl",children:"Write approved specs back to git"}),k(re,{language:"typescript",code:`import { FileSystemSuggestionWriter } from '@contractspec/lib.evolution/approval';
+await orchestrator.submit(suggestion, sessionState);`})]}),X("div",{className:"space-y-3",children:[T("h2",{className:"font-bold text-2xl",children:"Write approved specs back to git"}),T(fe,{language:"typescript",code:`import { FileSystemSuggestionWriter } from '@contractspec/lib.evolution/approval';
 
 const writer = new FileSystemSuggestionWriter({
   outputDir:
@@ -246,7 +403,7 @@ await writer.write({
   ...suggestion,
   status: 'approved',
   approvals: { reviewer: 'ops@contractspec', decidedAt: new Date() },
-});`})]}),k("div",{className:"grid gap-4 md:grid-cols-2",children:[{title:"Approvals by default",description:"Every suggestion flows through @contractspec/lib.ai-agent's ApprovalWorkflow. Tune auto-approval thresholds per environment."},{title:"Pluggable storage",description:"Use the Prisma repository in production, in-memory for tests, or stream serialized suggestions into your own queue."}].map((E)=>V("div",{className:"card-subtle space-y-2 p-4",children:[k("h3",{className:"font-semibold text-lg",children:E.title}),k("p",{className:"text-muted-foreground text-sm",children:E.description})]},E.title))}),V("div",{className:"flex items-center gap-4 pt-4",children:[k(we,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),V(we,{href:"/docs/libraries/observability",className:"btn-primary",children:["Next: Observability ",k(kt,{size:16})]})]})]})}import{CodeBlock as Ct,InstallCommand as St}from"@contractspec/lib.design-system";import Ce from"@contractspec/lib.ui-link";import{ChevronRight as Lt}from"lucide-react";import{jsx as u,jsxs as y}from"react/jsx-runtime";function Rt(){return y("div",{className:"space-y-8",children:[y("div",{className:"space-y-4",children:[u("h1",{className:"font-bold text-4xl",children:"GraphQL Libraries"}),u("p",{className:"text-muted-foreground",children:"This suite of libraries enables seamless GraphQL integration, transforming your ContractSpecs into a type-safe Pothos schema, connecting with Prisma, and enabling Apollo Federation."})]}),y("div",{className:"space-y-4",children:[u("h2",{className:"font-bold text-2xl",children:"Libraries"}),y("div",{className:"grid gap-4 md:grid-cols-1",children:[y("div",{className:"card-subtle p-6",children:[u("h3",{className:"font-bold text-lg",children:"@contractspec/lib.graphql-core"}),u("p",{className:"mt-2 text-muted-foreground text-sm",children:"The foundation. Provides a configured Pothos builder, common scalars (JSON, DateTime), and utilities for mapping ContractSpec I/O to Pothos types."})]}),y("div",{className:"card-subtle p-6",children:[u("h3",{className:"font-bold text-lg",children:"@contractspec/lib.graphql-prisma"}),u("p",{className:"mt-2 text-muted-foreground text-sm",children:"Connects Pothos to Prisma. Automatically generates GraphQL types from your Prisma schema and optimizes queries to prevent N+1 issues."})]}),y("div",{className:"card-subtle p-6",children:[u("h3",{className:"font-bold text-lg",children:"@contractspec/lib.graphql-federation"}),u("p",{className:"mt-2 text-muted-foreground text-sm",children:"Adds Apollo Federation V2 support. Allows your subgraph to define keys and entities, making it ready for a supergraph."})]})]})]}),y("div",{className:"space-y-4",children:[u("h2",{className:"font-bold text-2xl",children:"Installation"}),u(St,{package:["@contractspec/lib.graphql-core","@contractspec/lib.graphql-prisma","@contractspec/lib.graphql-federation"]})]}),y("div",{className:"space-y-4",children:[u("h2",{className:"font-bold text-2xl",children:"Usage: Building a Schema"}),u("p",{className:"text-muted-foreground",children:"Here's how to assemble a federated GraphQL schema from your specs:"}),u(Ct,{language:"typescript",code:`import { builder } from '@contractspec/lib.graphql-core';
+});`})]}),T("div",{className:"grid gap-4 md:grid-cols-2",children:[{title:"Approvals by default",description:"Every suggestion flows through @contractspec/lib.ai-agent's ApprovalWorkflow. Tune auto-approval thresholds per environment."},{title:"Pluggable storage",description:"Use the Prisma repository in production, in-memory for tests, or stream serialized suggestions into your own queue."}].map((t)=>X("div",{className:"card-subtle space-y-2 p-4",children:[T("h3",{className:"font-semibold text-lg",children:t.title}),T("p",{className:"text-muted-foreground text-sm",children:t.description})]},t.title))}),X("div",{className:"flex items-center gap-4 pt-4",children:[T(Ze,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),X(Ze,{href:"/docs/libraries/observability",className:"btn-primary",children:["Next: Observability ",T(ea,{size:16})]})]})]})}import{CodeBlock as aa,InstallCommand as oa}from"@contractspec/lib.design-system";import Xe from"@contractspec/lib.ui-link";import{ChevronRight as ia}from"lucide-react";import{jsx as f,jsxs as S}from"react/jsx-runtime";function ra(){return S("div",{className:"space-y-8",children:[S("div",{className:"space-y-4",children:[f("h1",{className:"font-bold text-4xl",children:"GraphQL Libraries"}),f("p",{className:"text-muted-foreground",children:"This suite of libraries enables seamless GraphQL integration, transforming your ContractSpecs into a type-safe Pothos schema, connecting with Prisma, and enabling Apollo Federation."})]}),S("div",{className:"space-y-4",children:[f("h2",{className:"font-bold text-2xl",children:"Libraries"}),S("div",{className:"grid gap-4 md:grid-cols-1",children:[S("div",{className:"card-subtle p-6",children:[f("h3",{className:"font-bold text-lg",children:"@contractspec/lib.graphql-core"}),f("p",{className:"mt-2 text-muted-foreground text-sm",children:"The foundation. Provides a configured Pothos builder, common scalars (JSON, DateTime), and utilities for mapping ContractSpec I/O to Pothos types."})]}),S("div",{className:"card-subtle p-6",children:[f("h3",{className:"font-bold text-lg",children:"@contractspec/lib.graphql-prisma"}),f("p",{className:"mt-2 text-muted-foreground text-sm",children:"Connects Pothos to Prisma. Automatically generates GraphQL types from your Prisma schema and optimizes queries to prevent N+1 issues."})]}),S("div",{className:"card-subtle p-6",children:[f("h3",{className:"font-bold text-lg",children:"@contractspec/lib.graphql-federation"}),f("p",{className:"mt-2 text-muted-foreground text-sm",children:"Adds Apollo Federation V2 support. Allows your subgraph to define keys and entities, making it ready for a supergraph."})]})]})]}),S("div",{className:"space-y-4",children:[f("h2",{className:"font-bold text-2xl",children:"Installation"}),f(oa,{package:["@contractspec/lib.graphql-core","@contractspec/lib.graphql-prisma","@contractspec/lib.graphql-federation"]})]}),S("div",{className:"space-y-4",children:[f("h2",{className:"font-bold text-2xl",children:"Usage: Building a Schema"}),f("p",{className:"text-muted-foreground",children:"Here's how to assemble a federated GraphQL schema from your specs:"}),f(aa,{language:"typescript",code:`import { builder } from '@contractspec/lib.graphql-core';
 import { registerContractsOnBuilder } from '@contractspec/lib.contracts-runtime-server-graphql/graphql-pothos';
 import { OperationSpecRegistry } from '@contractspec/lib.contracts-spec';
 import { MySpecs } from './specs';
@@ -260,7 +417,7 @@ registerContractsOnBuilder(builder, registry);
 
 // 3. Build and print schema
 const schema = builder.toSchema();
-console.log(printSchema(schema));`})]}),y("div",{className:"space-y-4",children:[u("h2",{className:"font-bold text-2xl",children:"Features"}),y("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[y("li",{children:[u("strong",{children:"Code-First"}),": Define schema in TypeScript (Pothos), get SDL as artifact."]}),y("li",{children:[u("strong",{children:"Spec Integration"}),": `registerContractsOnBuilder` automatically converts Command/Query specs into Mutations/Queries."]}),y("li",{children:[u("strong",{children:"Federation Ready"}),": Just add `provider: 'federation'` to your config."]})]})]}),y("div",{className:"flex items-center gap-4 pt-4",children:[y(Ce,{href:"/docs/libraries/data-backend",className:"btn-primary",children:["Next: Data & Backend ",u(Lt,{size:16})]}),u(Ce,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"})]})]})}import{CodeBlock as Se,InstallCommand as It}from"@contractspec/lib.design-system";import Le from"@contractspec/lib.ui-link";import{ChevronRight as Tt}from"lucide-react";import{jsx as U,jsxs as x}from"react/jsx-runtime";function At(){return x("div",{className:"space-y-8",children:[x("div",{className:"space-y-4",children:[U("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.growth"}),U("p",{className:"text-lg text-muted-foreground",children:"Launch experiments without third-party SDKs. Register variants, assign users deterministically, track exposures, and compute significance."})]}),x("div",{className:"space-y-4",children:[U("h2",{className:"font-bold text-2xl",children:"Installation"}),U(It,{package:"@contractspec/lib.growth"})]}),x("div",{className:"space-y-3",children:[U("h2",{className:"font-bold text-2xl",children:"Register + assign"}),U(Se,{language:"typescript",code:`import { ExperimentRegistry, ExperimentRunner } from '@contractspec/lib.growth/experiments';
+console.log(printSchema(schema));`})]}),S("div",{className:"space-y-4",children:[f("h2",{className:"font-bold text-2xl",children:"Features"}),S("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[S("li",{children:[f("strong",{children:"Code-First"}),": Define schema in TypeScript (Pothos), get SDL as artifact."]}),S("li",{children:[f("strong",{children:"Spec Integration"}),": `registerContractsOnBuilder` automatically converts Command/Query specs into Mutations/Queries."]}),S("li",{children:[f("strong",{children:"Federation Ready"}),": Just add `provider: 'federation'` to your config."]})]})]}),S("div",{className:"flex items-center gap-4 pt-4",children:[S(Xe,{href:"/docs/libraries/data-backend",className:"btn-primary",children:["Next: Data & Backend ",f(ia,{size:16})]}),f(Xe,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"})]})]})}import{CodeBlock as $e,InstallCommand as na}from"@contractspec/lib.design-system";import Ye from"@contractspec/lib.ui-link";import{ChevronRight as ca}from"lucide-react";import{jsx as Q,jsxs as ie}from"react/jsx-runtime";function sa(){return ie("div",{className:"space-y-8",children:[ie("div",{className:"space-y-4",children:[Q("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.growth"}),Q("p",{className:"text-lg text-muted-foreground",children:"Launch experiments without third-party SDKs. Register variants, assign users deterministically, track exposures, and compute significance."})]}),ie("div",{className:"space-y-4",children:[Q("h2",{className:"font-bold text-2xl",children:"Installation"}),Q(na,{package:"@contractspec/lib.growth"})]}),ie("div",{className:"space-y-3",children:[Q("h2",{className:"font-bold text-2xl",children:"Register + assign"}),Q($e,{language:"typescript",code:`import { ExperimentRegistry, ExperimentRunner } from '@contractspec/lib.growth/experiments';
 
 const registry = new ExperimentRegistry().register({
   key: 'pricing.cta',
@@ -274,7 +431,7 @@ const registry = new ExperimentRegistry().register({
 });
 
 const runner = new ExperimentRunner();
-const assignment = runner.assign(registry.get('pricing.cta')!, 'user_123');`})]}),x("div",{className:"space-y-3",children:[U("h2",{className:"font-bold text-2xl",children:"Track + analyze"}),U(Se,{language:"typescript",code:`import { ExperimentTracker } from '@contractspec/lib.growth/tracker';
+const assignment = runner.assign(registry.get('pricing.cta')!, 'user_123');`})]}),ie("div",{className:"space-y-3",children:[Q("h2",{className:"font-bold text-2xl",children:"Track + analyze"}),Q($e,{language:"typescript",code:`import { ExperimentTracker } from '@contractspec/lib.growth/tracker';
 import { StatsEngine } from '@contractspec/lib.growth/stats';
 
 const tracker = new ExperimentTracker(new InMemoryTrackerStore());
@@ -290,11 +447,11 @@ await tracker.recordSample({
 const stats = new StatsEngine().summarize(
   await tracker.getSamples(assignment.experimentKey, 'demo_booked'),
   'demo_booked'
-);`})]}),x("div",{className:"flex items-center gap-4 pt-4",children:[U(Le,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),x(Le,{href:"/docs/libraries/analytics",className:"btn-primary",children:["Next: Analytics ",U(Tt,{size:16})]})]})]})}import{CodeBlock as Re,InstallCommand as Bt}from"@contractspec/lib.design-system";import Ie from"@contractspec/lib.ui-link";import{ChevronRight as Pt}from"lucide-react";import{jsx as D,jsxs as Q}from"react/jsx-runtime";function Ot(){return Q("div",{className:"space-y-8",children:[Q("div",{className:"space-y-4",children:[D("h1",{className:"font-bold text-4xl",children:"Multi-Tenancy Library"}),Q("p",{className:"text-lg text-muted-foreground",children:["The ",D("code",{children:"@contractspec/lib.multi-tenancy"})," library provides the core building blocks for secure SaaS applications."]})]}),Q("div",{className:"space-y-4",children:[D("h2",{className:"font-bold text-2xl",children:"Installation"}),D(Bt,{package:"@contractspec/lib.multi-tenancy"})]}),Q("div",{className:"space-y-4",children:[D("h2",{className:"font-bold text-2xl",children:"Prisma RLS Middleware"}),Q("p",{className:"text-muted-foreground",children:["Automatically injects ",D("code",{children:"tenantId"})," into all queries."]}),D(Re,{language:"typescript",code:`import { createRlsMiddleware } from '@contractspec/lib.multi-tenancy/rls';
+);`})]}),ie("div",{className:"flex items-center gap-4 pt-4",children:[Q(Ye,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),ie(Ye,{href:"/docs/libraries/analytics",className:"btn-primary",children:["Next: Analytics ",Q(ca,{size:16})]})]})]})}import{CodeBlock as xe,InstallCommand as la}from"@contractspec/lib.design-system";import je from"@contractspec/lib.ui-link";import{ChevronRight as da}from"lucide-react";import{jsx as F,jsxs as $}from"react/jsx-runtime";function pa(){return $("div",{className:"space-y-8",children:[$("div",{className:"space-y-4",children:[F("h1",{className:"font-bold text-4xl",children:"Multi-Tenancy Library"}),$("p",{className:"text-lg text-muted-foreground",children:["The ",F("code",{children:"@contractspec/lib.multi-tenancy"})," library provides the core building blocks for secure SaaS applications."]})]}),$("div",{className:"space-y-4",children:[F("h2",{className:"font-bold text-2xl",children:"Installation"}),F(la,{package:"@contractspec/lib.multi-tenancy"})]}),$("div",{className:"space-y-4",children:[F("h2",{className:"font-bold text-2xl",children:"Prisma RLS Middleware"}),$("p",{className:"text-muted-foreground",children:["Automatically injects ",F("code",{children:"tenantId"})," into all queries."]}),F(xe,{language:"typescript",code:`import { createRlsMiddleware } from '@contractspec/lib.multi-tenancy/rls';
 import { prisma } from './db';
 import { getTenantId } from './context';
 
-prisma.$use(createRlsMiddleware(() => getTenantId()));`})]}),Q("div",{className:"space-y-4",children:[D("h2",{className:"font-bold text-2xl",children:"Provisioning Service"}),D("p",{className:"text-muted-foreground",children:"Automates the creation of new tenants, including database setup and default user creation."}),D(Re,{language:"typescript",code:`import { TenantProvisioningService } from '@contractspec/lib.multi-tenancy/provisioning';
+prisma.$use(createRlsMiddleware(() => getTenantId()));`})]}),$("div",{className:"space-y-4",children:[F("h2",{className:"font-bold text-2xl",children:"Provisioning Service"}),F("p",{className:"text-muted-foreground",children:"Automates the creation of new tenants, including database setup and default user creation."}),F(xe,{language:"typescript",code:`import { TenantProvisioningService } from '@contractspec/lib.multi-tenancy/provisioning';
 
 const service = new TenantProvisioningService({ db: prisma });
 await service.provision({
@@ -302,20 +459,20 @@ await service.provision({
   name: 'Acme Corp',
   slug: 'acme',
   ownerEmail: 'admin@acme.com'
-});`})]}),Q("div",{className:"flex items-center gap-4 pt-4",children:[D(Ie,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),Q(Ie,{href:"/docs/libraries/progressive-delivery",className:"btn-primary",children:["Next: Progressive Delivery ",D(Pt,{size:16})]})]})]})}import{CodeBlock as ae,InstallCommand as Et}from"@contractspec/lib.design-system";import Te from"@contractspec/lib.ui-link";import{ChevronRight as zt}from"lucide-react";import{jsx as N,jsxs as q}from"react/jsx-runtime";function Mt(){return q("div",{className:"space-y-8",children:[q("div",{className:"space-y-4",children:[N("h1",{className:"font-bold text-4xl",children:"Observability Library"}),q("p",{className:"text-lg text-muted-foreground",children:["The ",N("code",{children:"@contractspec/lib.observability"})," library provides a thin wrapper around OpenTelemetry to simplify instrumentation."]})]}),q("div",{className:"space-y-4",children:[N("h2",{className:"font-bold text-2xl",children:"Installation"}),N(Et,{package:"@contractspec/lib.observability"})]}),q("div",{className:"space-y-4",children:[N("h2",{className:"font-bold text-2xl",children:"Tracing"}),N(ae,{language:"typescript",code:`import { traceAsync, traceSync } from '@contractspec/lib.observability/tracing';
+});`})]}),$("div",{className:"flex items-center gap-4 pt-4",children:[F(je,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),$(je,{href:"/docs/libraries/progressive-delivery",className:"btn-primary",children:["Next: Progressive Delivery ",F(da,{size:16})]})]})]})}import{CodeBlock as le,InstallCommand as ma}from"@contractspec/lib.design-system";import et from"@contractspec/lib.ui-link";import{ChevronRight as ua}from"lucide-react";import{jsx as C,jsxs as K}from"react/jsx-runtime";function ga(){return K("div",{className:"space-y-8",children:[K("div",{className:"space-y-4",children:[C("h1",{className:"font-bold text-4xl",children:"Observability Library"}),K("p",{className:"text-lg text-muted-foreground",children:["The ",C("code",{children:"@contractspec/lib.observability"})," library provides a thin wrapper around OpenTelemetry to simplify instrumentation."]})]}),K("div",{className:"space-y-4",children:[C("h2",{className:"font-bold text-2xl",children:"Installation"}),C(ma,{package:"@contractspec/lib.observability"})]}),K("div",{className:"space-y-4",children:[C("h2",{className:"font-bold text-2xl",children:"Tracing"}),C(le,{language:"typescript",code:`import { traceAsync, traceSync } from '@contractspec/lib.observability/tracing';
 
 await traceAsync('process_order', async (span) => {
   span.setAttribute('order_id', order.id);
   await db.save(order);
-});`})]}),q("div",{className:"space-y-4",children:[N("h2",{className:"font-bold text-2xl",children:"Metrics"}),N(ae,{language:"typescript",code:`import { createCounter, createHistogram } from '@contractspec/lib.observability/metrics';
+});`})]}),K("div",{className:"space-y-4",children:[C("h2",{className:"font-bold text-2xl",children:"Metrics"}),C(le,{language:"typescript",code:`import { createCounter, createHistogram } from '@contractspec/lib.observability/metrics';
 
 const ordersCounter = createCounter('orders_total');
 const latencyHistogram = createHistogram('request_duration_seconds');
 
 ordersCounter.add(1, { status: 'success' });
-latencyHistogram.record(0.123);`})]}),q("div",{className:"space-y-4",children:[N("h2",{className:"font-bold text-2xl",children:"Middleware"}),N("p",{className:"text-muted-foreground",children:"Automatically instrument your HTTP handlers:"}),N(ae,{language:"typescript",code:`import { createTracingMiddleware } from '@contractspec/lib.observability/tracing/middleware';
+latencyHistogram.record(0.123);`})]}),K("div",{className:"space-y-4",children:[C("h2",{className:"font-bold text-2xl",children:"Middleware"}),C("p",{className:"text-muted-foreground",children:"Automatically instrument your HTTP handlers:"}),C(le,{language:"typescript",code:`import { createTracingMiddleware } from '@contractspec/lib.observability/tracing/middleware';
 
-app.use(createTracingMiddleware());`})]}),q("div",{className:"space-y-4",children:[N("h2",{className:"font-bold text-2xl",children:"Anomaly Detection"}),N("p",{className:"text-muted-foreground text-sm",children:"Includes baseline calculation and anomaly detection helpers for auto-rollback without writing custom math."}),N(ae,{language:"typescript",code:`import { AnomalyDetector, RootCauseAnalyzer, AlertManager } from '@contractspec/lib.observability';
+app.use(createTracingMiddleware());`})]}),K("div",{className:"space-y-4",children:[C("h2",{className:"font-bold text-2xl",children:"Anomaly Detection"}),C("p",{className:"text-muted-foreground text-sm",children:"Includes baseline calculation and anomaly detection helpers for auto-rollback without writing custom math."}),C(le,{language:"typescript",code:`import { AnomalyDetector, RootCauseAnalyzer, AlertManager } from '@contractspec/lib.observability';
 
 const detector = new AnomalyDetector({ errorRateDelta: 0.4 });
 const analyzer = new RootCauseAnalyzer();
@@ -325,7 +482,7 @@ const signals = detector.evaluate(point);
 signals.forEach((signal) => {
   const analysis = analyzer.analyze(signal, recentDeployments);
   alertManager.notify(signal, analysis);
-});`})]}),q("div",{className:"flex items-center gap-4 pt-4",children:[N(Te,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),q(Te,{href:"/docs/libraries/slo",className:"btn-primary",children:["Next: SLO ",N(zt,{size:16})]})]})]})}import{CodeBlock as ne,InstallCommand as Dt}from"@contractspec/lib.design-system";import Ae from"@contractspec/lib.ui-link";import{ChevronRight as Wt}from"lucide-react";import{jsx as I,jsxs as Y}from"react/jsx-runtime";function Gt(){return Y("div",{className:"space-y-8",children:[Y("div",{className:"space-y-4",children:[I("h1",{className:"font-bold text-4xl",children:"Overlay Engine"}),I("p",{className:"text-lg text-muted-foreground",children:"`@contractspec/lib.overlay-engine` keeps OverlaySpecs typed, signed, and auditable across tenants, roles, users, and devices."})]}),Y("div",{className:"space-y-4",children:[I("h2",{className:"font-bold text-2xl",children:"Installation"}),I(Dt,{package:"@contractspec/lib.overlay-engine"})]}),Y("div",{className:"space-y-4",children:[I("h2",{className:"font-bold text-2xl",children:"Define + Sign"}),I(ne,{language:"typescript",code:`import { defineOverlay } from '@contractspec/lib.overlay-engine/spec';
+});`})]}),K("div",{className:"flex items-center gap-4 pt-4",children:[C(et,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),K(et,{href:"/docs/libraries/slo",className:"btn-primary",children:["Next: SLO ",C(ua,{size:16})]})]})]})}import{CodeBlock as be,InstallCommand as ha}from"@contractspec/lib.design-system";import tt from"@contractspec/lib.ui-link";import{ChevronRight as fa}from"lucide-react";import{jsx as E,jsxs as te}from"react/jsx-runtime";function ba(){return te("div",{className:"space-y-8",children:[te("div",{className:"space-y-4",children:[E("h1",{className:"font-bold text-4xl",children:"Overlay Engine"}),E("p",{className:"text-lg text-muted-foreground",children:"`@contractspec/lib.overlay-engine` keeps OverlaySpecs typed, signed, and auditable across tenants, roles, users, and devices."})]}),te("div",{className:"space-y-4",children:[E("h2",{className:"font-bold text-2xl",children:"Installation"}),E(ha,{package:"@contractspec/lib.overlay-engine"})]}),te("div",{className:"space-y-4",children:[E("h2",{className:"font-bold text-2xl",children:"Define + Sign"}),E(be,{language:"typescript",code:`import { defineOverlay } from '@contractspec/lib.overlay-engine/spec';
 import { signOverlay } from '@contractspec/lib.overlay-engine/signer';
 
 const overlay = defineOverlay({
@@ -335,7 +492,7 @@ const overlay = defineOverlay({
   modifications: [{ type: 'hideField', field: 'internalNotes' }],
 });
 
-const signed = await signOverlay(overlay, privateKeyPem);`})]}),Y("div",{className:"space-y-4",children:[I("h2",{className:"font-bold text-2xl",children:"Runtime"}),I("p",{className:"text-muted-foreground",children:"`OverlayRegistry` stores signed overlays with specificity scoring. `OverlayEngine` merges modifications and emits audit events."}),I(ne,{language:"typescript",code:`const registry = new OverlayRegistry();
+const signed = await signOverlay(overlay, privateKeyPem);`})]}),te("div",{className:"space-y-4",children:[E("h2",{className:"font-bold text-2xl",children:"Runtime"}),E("p",{className:"text-muted-foreground",children:"`OverlayRegistry` stores signed overlays with specificity scoring. `OverlayEngine` merges modifications and emits audit events."}),E(be,{language:"typescript",code:`const registry = new OverlayRegistry();
 registry.register(signed);
 
 const engine = new OverlayEngine({
@@ -347,13 +504,13 @@ const result = engine.apply({
   target: { fields },
   capability: 'billing.createOrder',
   tenantId: 'acme',
-});`})]}),Y("div",{className:"space-y-4",children:[I("h2",{className:"font-bold text-2xl",children:"React Hooks"}),I("p",{className:"text-muted-foreground",children:"Render overlays in React/React Native via `useOverlay`."}),I(ne,{language:"typescript",code:`import { useOverlay } from '@contractspec/lib.overlay-engine/react';
+});`})]}),te("div",{className:"space-y-4",children:[E("h2",{className:"font-bold text-2xl",children:"React Hooks"}),E("p",{className:"text-muted-foreground",children:"Render overlays in React/React Native via `useOverlay`."}),E(be,{language:"typescript",code:`import { useOverlay } from '@contractspec/lib.overlay-engine/react';
 
 const { target } = useOverlay(engine, {
   target: { fields },
   capability: 'billing.createOrder',
   tenantId: 'acme',
-});`})]}),Y("div",{className:"flex items-center gap-4 pt-4",children:[I(Ae,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),Y(Ae,{href:"/docs/libraries/workflow-composer",className:"btn-primary",children:["Next: Workflow Composer ",I(Wt,{size:16})]})]})]})}import Ft from"@contractspec/lib.ui-link";import{ChevronRight as Ut}from"lucide-react";import{jsx as B,jsxs as X}from"react/jsx-runtime";var qt=[{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 _t(){return X("div",{className:"space-y-10",children:[X("div",{className:"space-y-3",children:[B("p",{className:"editorial-kicker",children:"Build"}),B("h1",{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"The OSS foundation is a library system, not a closed platform."}),B("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."})]}),X("div",{className:"editorial-proof-strip",children:[X("div",{className:"editorial-stat",children:[B("span",{className:"editorial-label",children:"Layering rule"}),B("span",{className:"editorial-stat-value",children:"libs → bundles → apps"})]}),B("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."})]}),B("div",{className:"space-y-6",children:qt.map((E)=>X("section",{className:"editorial-panel space-y-5",children:[X("div",{className:"space-y-2",children:[B("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:E.title}),B("p",{className:"text-muted-foreground text-sm leading-7",children:E.body})]}),B("div",{className:"grid gap-4 md:grid-cols-2",children:E.items.map((te)=>X(Ft,{href:te.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:[B("h3",{className:"font-semibold text-lg",children:te.title}),B("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:te.description}),X("div",{className:"mt-3 flex items-center gap-2 text-[color:var(--rust)] text-sm",children:["Learn more ",B(Ut,{size:14})]})]},te.title))})]},E.title))})]})}import{CodeBlock as ce,InstallCommand as Ht}from"@contractspec/lib.design-system";import Be from"@contractspec/lib.ui-link";import{ChevronRight as Vt}from"lucide-react";import{jsx as w,jsxs as $}from"react/jsx-runtime";function Qt(){return $("div",{className:"space-y-8",children:[$("div",{className:"space-y-4",children:[w("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.personalization"}),w("p",{className:"text-lg text-muted-foreground",children:"Track field/feature/workflow usage, analyze drop-offs, and convert insights into OverlaySpecs or workflow tweaks."})]}),$("div",{className:"space-y-4",children:[w("h2",{className:"font-bold text-2xl",children:"Installation"}),w(Ht,{package:"@contractspec/lib.personalization"})]}),$("div",{className:"space-y-4",children:[w("h2",{className:"font-bold text-2xl",children:"Tracker"}),w("p",{className:"text-muted-foreground",children:"Buffer events per tenant/user and emit OpenTelemetry counters automatically."}),w(ce,{language:"typescript",code:`import { createBehaviorTracker } from '@contractspec/lib.personalization';
+});`})]}),te("div",{className:"flex items-center gap-4 pt-4",children:[E(tt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),te(tt,{href:"/docs/libraries/workflow-composer",className:"btn-primary",children:["Next: Workflow Composer ",E(fa,{size:16})]})]})]})}import va from"@contractspec/lib.ui-link";import{ChevronRight as ya}from"lucide-react";import{jsx as M,jsxs as ae}from"react/jsx-runtime";var Na=[{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:"Cross-platform UI",description:"See how the presentation runtimes, ui-kit-web, ui-kit, and design-system stay compatible across React and React Native.",href:"/docs/libraries/cross-platform-ui"},{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 wa(){return ae("div",{className:"space-y-10",children:[ae("div",{className:"space-y-3",children:[M("p",{className:"editorial-kicker",children:"Build"}),M("h1",{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"The OSS foundation is a library system, not a closed platform."}),M("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."})]}),ae("div",{className:"editorial-proof-strip",children:[ae("div",{className:"editorial-stat",children:[M("span",{className:"editorial-label",children:"Layering rule"}),M("span",{className:"editorial-stat-value",children:"libs → bundles → apps"})]}),M("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."})]}),M("div",{className:"space-y-6",children:Na.map((t)=>ae("section",{className:"editorial-panel space-y-5",children:[ae("div",{className:"space-y-2",children:[M("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:t.title}),M("p",{className:"text-muted-foreground text-sm leading-7",children:t.body})]}),M("div",{className:"grid gap-4 md:grid-cols-2",children:t.items.map((w)=>ae(va,{href:w.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:[M("h3",{className:"font-semibold text-lg",children:w.title}),M("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:w.description}),ae("div",{className:"mt-3 flex items-center gap-2 text-[color:var(--rust)] text-sm",children:["Learn more ",M(ya,{size:14})]})]},w.title))})]},t.title))})]})}import{CodeBlock as ve,InstallCommand as ka}from"@contractspec/lib.design-system";import at from"@contractspec/lib.ui-link";import{ChevronRight as Sa}from"lucide-react";import{jsx as L,jsxs as oe}from"react/jsx-runtime";function Ca(){return oe("div",{className:"space-y-8",children:[oe("div",{className:"space-y-4",children:[L("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.personalization"}),L("p",{className:"text-lg text-muted-foreground",children:"Track field/feature/workflow usage, analyze drop-offs, and convert insights into OverlaySpecs or workflow tweaks."})]}),oe("div",{className:"space-y-4",children:[L("h2",{className:"font-bold text-2xl",children:"Installation"}),L(ka,{package:"@contractspec/lib.personalization"})]}),oe("div",{className:"space-y-4",children:[L("h2",{className:"font-bold text-2xl",children:"Tracker"}),L("p",{className:"text-muted-foreground",children:"Buffer events per tenant/user and emit OpenTelemetry counters automatically."}),L(ve,{language:"typescript",code:`import { createBehaviorTracker } from '@contractspec/lib.personalization';
 
 const tracker = createBehaviorTracker({
   store,
@@ -361,17 +518,17 @@ const tracker = createBehaviorTracker({
 });
 
 tracker.trackFieldAccess({ operation: 'billing.createOrder', field: 'items' });
-tracker.trackWorkflowStep({ workflow: 'invoice', step: 'review', status: 'entered' });`})]}),$("div",{className:"space-y-4",children:[w("h2",{className:"font-bold text-2xl",children:"Analyzer"}),w("p",{className:"text-muted-foreground",children:"Summarize events and highlight unused UI, frequent fields, and workflow bottlenecks."}),w(ce,{language:"typescript",code:`import { BehaviorAnalyzer } from '@contractspec/lib.personalization/analyzer';
+tracker.trackWorkflowStep({ workflow: 'invoice', step: 'review', status: 'entered' });`})]}),oe("div",{className:"space-y-4",children:[L("h2",{className:"font-bold text-2xl",children:"Analyzer"}),L("p",{className:"text-muted-foreground",children:"Summarize events and highlight unused UI, frequent fields, and workflow bottlenecks."}),L(ve,{language:"typescript",code:`import { BehaviorAnalyzer } from '@contractspec/lib.personalization/analyzer';
 
 const analyzer = new BehaviorAnalyzer(store);
 const insights = await analyzer.analyze({ tenantId: 'acme', userId: 'ops-42' });
-// { unusedFields: ['internalNotes'], workflowBottlenecks: [...] }`})]}),$("div",{className:"space-y-4",children:[w("h2",{className:"font-bold text-2xl",children:"Adapter"}),w("p",{className:"text-muted-foreground",children:"Convert insights into overlays or workflow extension hints."}),w(ce,{language:"typescript",code:`import { insightsToOverlaySuggestion } from '@contractspec/lib.personalization/adapter';
+// { unusedFields: ['internalNotes'], workflowBottlenecks: [...] }`})]}),oe("div",{className:"space-y-4",children:[L("h2",{className:"font-bold text-2xl",children:"Adapter"}),L("p",{className:"text-muted-foreground",children:"Convert insights into overlays or workflow extension hints."}),L(ve,{language:"typescript",code:`import { insightsToOverlaySuggestion } from '@contractspec/lib.personalization/adapter';
 
 const overlay = insightsToOverlaySuggestion(insights, {
   overlayId: 'acme-order-form',
   tenantId: 'acme',
   capability: 'billing.createOrder',
-});`})]}),$("div",{className:"flex items-center gap-4 pt-4",children:[w(Be,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),$(Be,{href:"/docs/libraries/overlay-engine",className:"btn-primary",children:["Next: Overlay Engine ",w(Vt,{size:16})]})]})]})}import{CodeBlock as Pe,InstallCommand as Kt}from"@contractspec/lib.design-system";import Oe from"@contractspec/lib.ui-link";import{ChevronRight as Zt}from"lucide-react";import{jsx as C,jsxs as W}from"react/jsx-runtime";function Jt(){return W("div",{className:"space-y-8",children:[W("div",{className:"space-y-4",children:[C("h1",{className:"font-bold text-4xl",children:"Progressive Delivery Library"}),W("p",{className:"text-lg text-muted-foreground",children:["The ",C("code",{children:"@contractspec/lib.progressive-delivery"})," package helps you ship new specs with confidence: canary + blue-green strategies, metric guardrails, and rollback hooks in one place."]})]}),W("div",{className:"space-y-4",children:[C("h2",{className:"font-bold text-2xl",children:"Installation"}),C(Kt,{package:"@contractspec/lib.progressive-delivery"})]}),W("div",{className:"space-y-4",children:[C("h2",{className:"font-bold text-2xl",children:"Define a Strategy"}),C(Pe,{language:"typescript",code:`import { DeploymentCoordinator, createDefaultCanaryController, TrafficShifter, RollbackManager } from '@contractspec/lib.progressive-delivery';
+});`})]}),oe("div",{className:"flex items-center gap-4 pt-4",children:[L(at,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),oe(at,{href:"/docs/libraries/overlay-engine",className:"btn-primary",children:["Next: Overlay Engine ",L(Sa,{size:16})]})]})]})}import{CodeBlock as ot,InstallCommand as Ta}from"@contractspec/lib.design-system";import it from"@contractspec/lib.ui-link";import{ChevronRight as La}from"lucide-react";import{jsx as R,jsxs as V}from"react/jsx-runtime";function Ra(){return V("div",{className:"space-y-8",children:[V("div",{className:"space-y-4",children:[R("h1",{className:"font-bold text-4xl",children:"Progressive Delivery Library"}),V("p",{className:"text-lg text-muted-foreground",children:["The ",R("code",{children:"@contractspec/lib.progressive-delivery"})," package helps you ship new specs with confidence: canary + blue-green strategies, metric guardrails, and rollback hooks in one place."]})]}),V("div",{className:"space-y-4",children:[R("h2",{className:"font-bold text-2xl",children:"Installation"}),R(Ta,{package:"@contractspec/lib.progressive-delivery"})]}),V("div",{className:"space-y-4",children:[R("h2",{className:"font-bold text-2xl",children:"Define a Strategy"}),R(ot,{language:"typescript",code:`import { DeploymentCoordinator, createDefaultCanaryController, TrafficShifter, RollbackManager } from '@contractspec/lib.progressive-delivery';
 
 const strategy = {
   target: { name: 'billing.createInvoice', version: 7 },
@@ -381,7 +538,7 @@ const strategy = {
     latencyP99: 500,
     latencyP95: 250,
   },
-};`})]}),W("div",{className:"space-y-4",children:[C("h2",{className:"font-bold text-2xl",children:"Run the Coordinator"}),C(Pe,{language:"typescript",code:`const eventBus = new DeploymentEventBus();
+};`})]}),V("div",{className:"space-y-4",children:[R("h2",{className:"font-bold text-2xl",children:"Run the Coordinator"}),R(ot,{language:"typescript",code:`const eventBus = new DeploymentEventBus();
 const controller = createDefaultCanaryController(strategy, fetchMetrics, eventBus);
 const coordinator = new DeploymentCoordinator({
   strategy,
@@ -392,7 +549,7 @@ const coordinator = new DeploymentCoordinator({
   eventBus,
 });
 
-const result = await coordinator.run();`}),W("p",{className:"text-muted-foreground text-sm",children:["The coordinator emits ",C("code",{children:"stage_started"}),","," ",C("code",{children:"stage_failed"}),", and ",C("code",{children:"rolled_back"})," events, making it easy to power dashboards or alerting workflows."]})]}),W("div",{className:"space-y-4",children:[C("h2",{className:"font-bold text-2xl",children:"Blue-Green Swap"}),W("p",{className:"text-muted-foreground text-sm",children:["Switch to ",C("code",{children:"mode: 'blue-green'"})," to warm up the new stack in parallel and cut over once smoke tests pass. The same guardrails apply before the final swap."]})]}),W("div",{className:"flex items-center gap-4 pt-4",children:[C(Oe,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),W(Oe,{href:"/docs/libraries/resilience",className:"btn-primary",children:["Next: Resilience ",C(Zt,{size:16})]})]})]})}import{CodeBlock as le,InstallCommand as Yt}from"@contractspec/lib.design-system";import Ee from"@contractspec/lib.ui-link";import{ChevronRight as Xt}from"lucide-react";import{jsx as S,jsxs as K}from"react/jsx-runtime";function $t(){return K("div",{className:"space-y-8",children:[K("div",{className:"space-y-4",children:[S("h1",{className:"font-bold text-4xl",children:"Resilience Library"}),K("p",{className:"text-lg text-muted-foreground",children:["The ",S("code",{children:"@contractspec/lib.resilience"})," library provides primitives to handle failures gracefully."]})]}),K("div",{className:"space-y-4",children:[S("h2",{className:"font-bold text-2xl",children:"Installation"}),S(Yt,{package:"@contractspec/lib.resilience"})]}),K("div",{className:"space-y-4",children:[S("h2",{className:"font-bold text-2xl",children:"Circuit Breaker"}),S("p",{className:"text-muted-foreground",children:"Prevent cascading failures by stopping calls to a failing dependency."}),S(le,{language:"typescript",code:`import { CircuitBreaker } from '@contractspec/lib.resilience/circuit-breaker';
+const result = await coordinator.run();`}),V("p",{className:"text-muted-foreground text-sm",children:["The coordinator emits ",R("code",{children:"stage_started"}),","," ",R("code",{children:"stage_failed"}),", and ",R("code",{children:"rolled_back"})," events, making it easy to power dashboards or alerting workflows."]})]}),V("div",{className:"space-y-4",children:[R("h2",{className:"font-bold text-2xl",children:"Blue-Green Swap"}),V("p",{className:"text-muted-foreground text-sm",children:["Switch to ",R("code",{children:"mode: 'blue-green'"})," to warm up the new stack in parallel and cut over once smoke tests pass. The same guardrails apply before the final swap."]})]}),V("div",{className:"flex items-center gap-4 pt-4",children:[R(it,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),V(it,{href:"/docs/libraries/resilience",className:"btn-primary",children:["Next: Resilience ",R(La,{size:16})]})]})]})}import{CodeBlock as ye,InstallCommand as Ia}from"@contractspec/lib.design-system";import rt from"@contractspec/lib.ui-link";import{ChevronRight as Aa}from"lucide-react";import{jsx as I,jsxs as Y}from"react/jsx-runtime";function Pa(){return Y("div",{className:"space-y-8",children:[Y("div",{className:"space-y-4",children:[I("h1",{className:"font-bold text-4xl",children:"Resilience Library"}),Y("p",{className:"text-lg text-muted-foreground",children:["The ",I("code",{children:"@contractspec/lib.resilience"})," library provides primitives to handle failures gracefully."]})]}),Y("div",{className:"space-y-4",children:[I("h2",{className:"font-bold text-2xl",children:"Installation"}),I(Ia,{package:"@contractspec/lib.resilience"})]}),Y("div",{className:"space-y-4",children:[I("h2",{className:"font-bold text-2xl",children:"Circuit Breaker"}),I("p",{className:"text-muted-foreground",children:"Prevent cascading failures by stopping calls to a failing dependency."}),I(ye,{language:"typescript",code:`import { CircuitBreaker } from '@contractspec/lib.resilience/circuit-breaker';
 
 const breaker = new CircuitBreaker({
   failureThreshold: 5,
@@ -401,19 +558,19 @@ const breaker = new CircuitBreaker({
 
 const result = await breaker.execute(async () => {
   return await fetch('https://api.stripe.com/v1/charges');
-});`})]}),K("div",{className:"space-y-4",children:[S("h2",{className:"font-bold text-2xl",children:"Retry"}),S("p",{className:"text-muted-foreground",children:"Automatically retry transient failures with exponential backoff."}),S(le,{language:"typescript",code:`import { retry } from '@contractspec/lib.resilience/retry';
+});`})]}),Y("div",{className:"space-y-4",children:[I("h2",{className:"font-bold text-2xl",children:"Retry"}),I("p",{className:"text-muted-foreground",children:"Automatically retry transient failures with exponential backoff."}),I(ye,{language:"typescript",code:`import { retry } from '@contractspec/lib.resilience/retry';
 
 const result = await retry(
   async () => fetchUser(id),
   3, // retries
   1000, // initial delay
   true // backoff
-);`})]}),K("div",{className:"space-y-4",children:[S("h2",{className:"font-bold text-2xl",children:"Timeout & Fallback"}),S("p",{className:"text-muted-foreground",children:"Set hard limits on execution time and provide default values on failure."}),S(le,{language:"typescript",code:`import { timeout, fallback } from '@contractspec/lib.resilience';
+);`})]}),Y("div",{className:"space-y-4",children:[I("h2",{className:"font-bold text-2xl",children:"Timeout & Fallback"}),I("p",{className:"text-muted-foreground",children:"Set hard limits on execution time and provide default values on failure."}),I(ye,{language:"typescript",code:`import { timeout, fallback } from '@contractspec/lib.resilience';
 
 const result = await fallback(
   () => timeout(slowOperation, 5000),
   defaultValue
-);`})]}),K("div",{className:"flex items-center gap-4 pt-4",children:[S(Ee,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),K(Ee,{href:"/docs/libraries/testing",className:"btn-primary",children:["Next: Testing ",S(Xt,{size:16})]})]})]})}import{CodeBlock as xt,InstallCommand as jt}from"@contractspec/lib.design-system";import ze from"@contractspec/lib.ui-link";import{ChevronRight as ea}from"lucide-react";import{jsx as d,jsxs as p}from"react/jsx-runtime";function ta(){return p("div",{className:"space-y-8",children:[p("div",{className:"space-y-4",children:[d("h1",{className:"font-bold text-4xl",children:"Runtime Libraries"}),d("p",{className:"text-muted-foreground",children:"The presentation runtime libraries provide the engine for rendering ContractSpec-defined UIs. They handle state management, validation, step navigation, and component rendering for Workflows and DataViews."})]}),p("div",{className:"space-y-4",children:[d("h2",{className:"font-bold text-2xl",children:"Installation"}),d(jt,{package:"@contractspec/lib.presentation-runtime-react"})]}),p("div",{className:"space-y-4",children:[d("h2",{className:"font-bold text-2xl",children:"Libraries"}),p("div",{className:"space-y-6",children:[p("div",{className:"card-subtle p-6",children:[d("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-core"}),p("p",{className:"mt-2 text-muted-foreground text-sm",children:[d("strong",{children:"Framework-Agnostic Core"}),". Contains the state machines, validation logic, and navigation rules for workflows. Can be used to build renderers for any platform (Vue, Svelte, CLI)."]})]}),p("div",{className:"card-subtle p-6",children:[d("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-react"}),p("p",{className:"mt-2 text-muted-foreground text-sm",children:[d("strong",{children:"React Bindings"}),". Hooks (`useWorkflow`) and components (`WorkflowStepper`, `WorkflowStepRenderer`) for React Web applications. Integrates with `ui-kit-web`."]})]}),p("div",{className:"card-subtle p-6",children:[d("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-react-native"}),p("p",{className:"mt-2 text-muted-foreground text-sm",children:[d("strong",{children:"React Native Bindings"}),". Optimized for mobile experiences. Handles native navigation integration and uses universal components from `ui-kit`."]})]})]})]}),p("div",{className:"space-y-4",children:[d("h2",{className:"font-bold text-2xl",children:"Example: React Workflow"}),d(xt,{language:"tsx",code:`import { useWorkflow, WorkflowStepRenderer } from '@contractspec/lib.presentation-runtime-react';
+);`})]}),Y("div",{className:"flex items-center gap-4 pt-4",children:[I(rt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),Y(rt,{href:"/docs/libraries/testing",className:"btn-primary",children:["Next: Testing ",I(Aa,{size:16})]})]})]})}import{CodeBlock as Da,InstallCommand as Ea}from"@contractspec/lib.design-system";import Ne from"@contractspec/lib.ui-link";import{ChevronRight as Ba}from"lucide-react";import{jsx as d,jsxs as u}from"react/jsx-runtime";function Oa(){return u("div",{className:"space-y-8",children:[u("div",{className:"space-y-4",children:[d("h1",{className:"font-bold text-4xl",children:"Runtime Libraries"}),d("p",{className:"text-muted-foreground",children:"The presentation runtime libraries provide the engine for rendering ContractSpec-defined UIs. They handle state management, validation, step navigation, and component rendering for Workflows and DataViews."})]}),u("div",{className:"space-y-4",children:[d("h2",{className:"font-bold text-2xl",children:"Installation"}),d(Ea,{package:"@contractspec/lib.presentation-runtime-react"})]}),u("div",{className:"space-y-4",children:[d("h2",{className:"font-bold text-2xl",children:"Libraries"}),u("div",{className:"space-y-6",children:[u("div",{className:"card-subtle p-6",children:[d("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-core"}),u("p",{className:"mt-2 text-muted-foreground text-sm",children:[d("strong",{children:"Framework-Agnostic Core"}),". Contains the state machines, validation logic, and navigation rules for workflows. Can be used to build renderers for any platform (Vue, Svelte, CLI)."]})]}),u("div",{className:"card-subtle p-6",children:[d("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-react"}),u("p",{className:"mt-2 text-muted-foreground text-sm",children:[d("strong",{children:"React Bindings"}),". Hooks (`useWorkflow`) and components (`WorkflowStepper`, `WorkflowStepRenderer`) for React Web applications. Integrates with `ui-kit-web`."]})]}),u("div",{className:"card-subtle p-6",children:[d("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-react-native"}),u("p",{className:"mt-2 text-muted-foreground text-sm",children:[d("strong",{children:"React Native Bindings"}),". Optimized for mobile experiences. Handles native navigation integration and uses universal components from `ui-kit`."]})]})]})]}),u("div",{className:"space-y-4",children:[d("h2",{className:"font-bold text-2xl",children:"Example: React Workflow"}),d(Da,{language:"tsx",code:`import { useWorkflow, WorkflowStepRenderer } from '@contractspec/lib.presentation-runtime-react';
 import { OnboardingFlow } from './specs/onboarding';
 
 export function OnboardingPage() {
@@ -453,7 +610,7 @@ export function OnboardingPage() {
       </div>
     </div>
   );
-}`})]}),p("div",{className:"space-y-4",children:[d("h2",{className:"font-bold text-2xl",children:"Architecture"}),d("p",{className:"text-muted-foreground",children:'The runtime follows a "render-loop" pattern:'}),p("ol",{className:"list-inside list-decimal space-y-2 text-muted-foreground",children:[p("li",{children:[d("strong",{children:"Spec"}),": Defines the flow, fields, and validation rules."]}),p("li",{children:[d("strong",{children:"Core"}),": Tracks current step, data state, and validation errors."]}),p("li",{children:[d("strong",{children:"Renderer"}),": Maps spec fields to UI components (Input, Select, etc.)."]}),p("li",{children:[d("strong",{children:"User"}),": Interacts with components, updating core state."]}),p("li",{children:[d("strong",{children:"Policy"}),": (Optional) Re-evaluates visibility on every change."]})]})]}),p("div",{className:"flex items-center gap-4 pt-4",children:[d(ze,{href:"/docs/libraries/data-backend",className:"btn-ghost",children:"Previous: Data & Backend"}),p(ze,{href:"/docs/libraries",className:"btn-primary",children:["Back to Libraries ",d(ea,{size:16})]})]})]})}import{CodeBlock as Me,InstallCommand as aa}from"@contractspec/lib.design-system";import De from"@contractspec/lib.ui-link";import{ChevronRight as oa}from"lucide-react";import{jsx as e,jsxs as s}from"react/jsx-runtime";function ia(){return s("div",{className:"space-y-8",children:[s("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.schema"}),e("p",{className:"text-muted-foreground",children:"A small schema dictionary to describe operation I/O once and export to Zod (runtime validation), Pothos (GraphQL type refs), and JSON Schema."})]}),s("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(aa,{package:"@contractspec/lib.schema"})]}),s("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Core Exports"}),s("ul",{className:"space-y-2 text-muted-foreground",children:[s("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"SchemaModel"}),": Compose fields into typed object models"]}),s("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"ScalarTypeEnum"}),": Common scalar types (NonEmptyString, Email, DateTime, etc.)"]}),s("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"defineEnum"}),": Create type-safe enums"]}),s("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"FieldType"}),": Wrap scalars with Zod/GraphQL/JSON Schema"]})]})]}),s("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Example: Basic Schema"}),e(Me,{language:"typescript",code:`import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
+}`})]}),u("div",{className:"space-y-4",children:[d("h2",{className:"font-bold text-2xl",children:"Architecture"}),d("p",{className:"text-muted-foreground",children:'The runtime follows a "render-loop" pattern:'}),u("ol",{className:"list-inside list-decimal space-y-2 text-muted-foreground",children:[u("li",{children:[d("strong",{children:"Spec"}),": Defines the flow, fields, and validation rules."]}),u("li",{children:[d("strong",{children:"Core"}),": Tracks current step, data state, and validation errors."]}),u("li",{children:[d("strong",{children:"Renderer"}),": Maps spec fields to UI components (Input, Select, etc.)."]}),u("li",{children:[d("strong",{children:"User"}),": Interacts with components, updating core state."]}),u("li",{children:[d("strong",{children:"Policy"}),": (Optional) Re-evaluates visibility on every change."]})]})]}),u("div",{className:"card-subtle space-y-3 p-6",children:[d("h2",{className:"font-bold text-2xl",children:"Related reading"}),u("p",{className:"text-muted-foreground",children:["For the full React and React Native layering story across runtime, primitives, and composed components, read"," ",d(Ne,{href:"/docs/libraries/cross-platform-ui",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Cross-platform UI"}),"."]})]}),u("div",{className:"flex items-center gap-4 pt-4",children:[d(Ne,{href:"/docs/libraries/data-backend",className:"btn-ghost",children:"Previous: Data & Backend"}),u(Ne,{href:"/docs/libraries",className:"btn-primary",children:["Back to Libraries ",d(Ba,{size:16})]})]})]})}import{CodeBlock as nt,InstallCommand as Ma}from"@contractspec/lib.design-system";import ct from"@contractspec/lib.ui-link";import{ChevronRight as Wa}from"lucide-react";import{jsx as a,jsxs as g}from"react/jsx-runtime";function za(){return g("div",{className:"space-y-8",children:[g("div",{className:"space-y-4",children:[a("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.schema"}),a("p",{className:"text-muted-foreground",children:"A small schema dictionary to describe operation I/O once and export to Zod (runtime validation), Pothos (GraphQL type refs), and JSON Schema."})]}),g("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Installation"}),a(Ma,{package:"@contractspec/lib.schema"})]}),g("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Core Exports"}),g("ul",{className:"space-y-2 text-muted-foreground",children:[g("li",{children:[a("code",{className:"rounded bg-background/50 px-2 py-1",children:"SchemaModel"}),": Compose fields into typed object models"]}),g("li",{children:[a("code",{className:"rounded bg-background/50 px-2 py-1",children:"ScalarTypeEnum"}),": Common scalar types (NonEmptyString, Email, DateTime, etc.)"]}),g("li",{children:[a("code",{className:"rounded bg-background/50 px-2 py-1",children:"defineEnum"}),": Create type-safe enums"]}),g("li",{children:[a("code",{className:"rounded bg-background/50 px-2 py-1",children:"FieldType"}),": Wrap scalars with Zod/GraphQL/JSON Schema"]})]})]}),g("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Example: Basic Schema"}),a(nt,{language:"typescript",code:`import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
 
 export const CreateSpotInput = new SchemaModel({
   name: 'CreateSpotInput',
@@ -471,7 +628,7 @@ const zodSchema = CreateSpotInput.getZod();
 const pothosName = CreateSpotInput.getPothosInput();
 
 // Get JSON Schema
-const jsonSchema = CreateSpotInput.getJsonSchema();`})]}),s("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Example: Enums"}),e(Me,{language:"typescript",code:`import { defineEnum, SchemaModel } from '@contractspec/lib.schema';
+const jsonSchema = CreateSpotInput.getJsonSchema();`})]}),g("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Example: Enums"}),a(nt,{language:"typescript",code:`import { defineEnum, SchemaModel } from '@contractspec/lib.schema';
 
 const Weekday = defineEnum('Weekday', [
   'MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU',
@@ -486,19 +643,19 @@ const RecurrenceRule = new SchemaModel({
     },
     byWeekday: { type: Weekday, isOptional: true, isArray: true },
   },
-});`})]}),s("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Available Scalars"}),s("div",{className:"grid gap-4 md:grid-cols-2",children:[s("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Strings"}),s("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:e("code",{children:"NonEmptyString()"})}),e("li",{children:e("code",{children:"Email()"})}),e("li",{children:e("code",{children:"PhoneNumber()"})}),e("li",{children:e("code",{children:"CountryCode()"})}),e("li",{children:e("code",{children:"Locale()"})}),e("li",{children:e("code",{children:"TimeZone()"})})]})]}),s("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Numbers"}),s("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:e("code",{children:"PositiveNumber()"})}),e("li",{children:e("code",{children:"Latitude()"})}),e("li",{children:e("code",{children:"Longitude()"})})]})]}),s("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Dates & Times"}),s("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:e("code",{children:"Date()"})}),e("li",{children:e("code",{children:"DateTime()"})})]})]}),s("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Generic"}),s("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:e("code",{children:"String()"})}),e("li",{children:e("code",{children:"JSON()"})})]})]})]})]}),s("div",{className:"flex items-center gap-4 pt-4",children:[e(De,{href:"/docs/libraries/contracts",className:"btn-ghost",children:"Previous: Contracts"}),s(De,{href:"/docs/libraries/ui-kit",className:"btn-primary",children:["Next: UI Kit ",e(oa,{size:16})]})]})]})}import{CodeBlock as We,InstallCommand as ra}from"@contractspec/lib.design-system";import Ge from"@contractspec/lib.ui-link";import{ChevronRight as na}from"lucide-react";import{jsx as P,jsxs as _}from"react/jsx-runtime";function ca(){return _("div",{className:"space-y-8",children:[_("div",{className:"space-y-4",children:[P("h1",{className:"font-bold text-4xl",children:"SLO Library"}),_("p",{className:"text-lg text-muted-foreground",children:[P("code",{children:"@contractspec/lib.slo"})," keeps service level objectives front and center—declarative definitions, rolling snapshots, burn-rate math, and automated incidents."]})]}),_("div",{className:"space-y-4",children:[P("h2",{className:"font-bold text-2xl",children:"Installation"}),P(ra,{package:"@contractspec/lib.slo"})]}),_("div",{className:"space-y-4",children:[P("h2",{className:"font-bold text-2xl",children:"Define Targets"}),P(We,{language:"typescript",code:`const definition: SLODefinition = {
+});`})]}),g("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Available Scalars"}),g("div",{className:"grid gap-4 md:grid-cols-2",children:[g("div",{className:"card-subtle p-4",children:[a("h3",{className:"mb-2 font-semibold",children:"Strings"}),g("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[a("li",{children:a("code",{children:"NonEmptyString()"})}),a("li",{children:a("code",{children:"Email()"})}),a("li",{children:a("code",{children:"PhoneNumber()"})}),a("li",{children:a("code",{children:"CountryCode()"})}),a("li",{children:a("code",{children:"Locale()"})}),a("li",{children:a("code",{children:"TimeZone()"})})]})]}),g("div",{className:"card-subtle p-4",children:[a("h3",{className:"mb-2 font-semibold",children:"Numbers"}),g("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[a("li",{children:a("code",{children:"PositiveNumber()"})}),a("li",{children:a("code",{children:"Latitude()"})}),a("li",{children:a("code",{children:"Longitude()"})})]})]}),g("div",{className:"card-subtle p-4",children:[a("h3",{className:"mb-2 font-semibold",children:"Dates & Times"}),g("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[a("li",{children:a("code",{children:"Date()"})}),a("li",{children:a("code",{children:"DateTime()"})})]})]}),g("div",{className:"card-subtle p-4",children:[a("h3",{className:"mb-2 font-semibold",children:"Generic"}),g("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[a("li",{children:a("code",{children:"String()"})}),a("li",{children:a("code",{children:"JSON()"})})]})]})]})]}),g("div",{className:"flex items-center gap-4 pt-4",children:[a(ct,{href:"/docs/libraries/contracts",className:"btn-ghost",children:"Previous: Contracts"}),g(ct,{href:"/docs/libraries/ui-kit",className:"btn-primary",children:["Next: UI Kit ",a(Wa,{size:16})]})]})]})}import{CodeBlock as st,InstallCommand as Ua}from"@contractspec/lib.design-system";import lt from"@contractspec/lib.ui-link";import{ChevronRight as Ga}from"lucide-react";import{jsx as W,jsxs as J}from"react/jsx-runtime";function Fa(){return J("div",{className:"space-y-8",children:[J("div",{className:"space-y-4",children:[W("h1",{className:"font-bold text-4xl",children:"SLO Library"}),J("p",{className:"text-lg text-muted-foreground",children:[W("code",{children:"@contractspec/lib.slo"})," keeps service level objectives front and center—declarative definitions, rolling snapshots, burn-rate math, and automated incidents."]})]}),J("div",{className:"space-y-4",children:[W("h2",{className:"font-bold text-2xl",children:"Installation"}),W(Ua,{package:"@contractspec/lib.slo"})]}),J("div",{className:"space-y-4",children:[W("h2",{className:"font-bold text-2xl",children:"Define Targets"}),W(st,{language:"typescript",code:`const definition: SLODefinition = {
   id: 'billing.createInvoice.availability',
   targetAvailability: 0.999,
   latencyP99TargetMs: 500,
   rollingWindowMs: 7 * 24 * 60 * 60 * 1000,
   alerts: { fastBurnThreshold: 14, slowBurnThreshold: 6 },
-};`})]}),_("div",{className:"space-y-4",children:[P("h2",{className:"font-bold text-2xl",children:"Monitor Burn Rate"}),P(We,{language:"typescript",code:`const monitor = new SLOMonitor({ definition, incidentManager });
+};`})]}),J("div",{className:"space-y-4",children:[W("h2",{className:"font-bold text-2xl",children:"Monitor Burn Rate"}),W(st,{language:"typescript",code:`const monitor = new SLOMonitor({ definition, incidentManager });
 const { snapshot, burnRate } = monitor.recordWindow({
   good: 12500,
   bad: 3,
   latencyP99: 420,
   latencyP95: 210,
-});`}),_("p",{className:"text-muted-foreground text-sm",children:["When burn rate exceeds the configured thresholds the monitor calls your",P("code",{children:"IncidentManager"}),", providing the snapshot that triggered the alert."]})]}),_("div",{className:"space-y-4",children:[P("h2",{className:"font-bold text-2xl",children:"History & Reporting"}),P("p",{className:"text-muted-foreground text-sm",children:"`SLOTracker.getHistory()` returns the latest snapshots so dashboards can show trends without hitting a warehouse. Prisma models persist everything for long-term audits."})]}),_("div",{className:"flex items-center gap-4 pt-4",children:[P(Ge,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),_(Ge,{href:"/docs/libraries/cost-tracking",className:"btn-primary",children:["Next: Cost Tracking ",P(na,{size:16})]})]})]})}import{CodeBlock as Fe,InstallCommand as la}from"@contractspec/lib.design-system";import Ue from"@contractspec/lib.ui-link";import{ChevronRight as sa}from"lucide-react";import{jsx as L,jsxs as O}from"react/jsx-runtime";function da(){return O("div",{className:"space-y-8",children:[O("div",{className:"space-y-4",children:[L("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.support-bot"}),L("p",{className:"text-lg text-muted-foreground",children:"Build AI-first support flows using drop-in classifiers, knowledge-grounded resolvers, and tone-aware responders—all wired into the agent runner."})]}),O("div",{className:"space-y-4",children:[L("h2",{className:"font-bold text-2xl",children:"Installation"}),L(la,{package:"@contractspec/lib.support-bot"})]}),O("div",{className:"space-y-3",children:[L("h2",{className:"font-bold text-2xl",children:"Wire the primitives"}),L(Fe,{language:"typescript",code:`import { TicketClassifier, TicketResolver, AutoResponder } from '@contractspec/lib.support-bot';
+});`}),J("p",{className:"text-muted-foreground text-sm",children:["When burn rate exceeds the configured thresholds the monitor calls your",W("code",{children:"IncidentManager"}),", providing the snapshot that triggered the alert."]})]}),J("div",{className:"space-y-4",children:[W("h2",{className:"font-bold text-2xl",children:"History & Reporting"}),W("p",{className:"text-muted-foreground text-sm",children:"`SLOTracker.getHistory()` returns the latest snapshots so dashboards can show trends without hitting a warehouse. Prisma models persist everything for long-term audits."})]}),J("div",{className:"flex items-center gap-4 pt-4",children:[W(lt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),J(lt,{href:"/docs/libraries/cost-tracking",className:"btn-primary",children:["Next: Cost Tracking ",W(Ga,{size:16})]})]})]})}import{CodeBlock as dt,InstallCommand as Va}from"@contractspec/lib.design-system";import pt from"@contractspec/lib.ui-link";import{ChevronRight as _a}from"lucide-react";import{jsx as A,jsxs as z}from"react/jsx-runtime";function Ha(){return z("div",{className:"space-y-8",children:[z("div",{className:"space-y-4",children:[A("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.support-bot"}),A("p",{className:"text-lg text-muted-foreground",children:"Build AI-first support flows using drop-in classifiers, knowledge-grounded resolvers, and tone-aware responders—all wired into the agent runner."})]}),z("div",{className:"space-y-4",children:[A("h2",{className:"font-bold text-2xl",children:"Installation"}),A(Va,{package:"@contractspec/lib.support-bot"})]}),z("div",{className:"space-y-3",children:[A("h2",{className:"font-bold text-2xl",children:"Wire the primitives"}),A(dt,{language:"typescript",code:`import { TicketClassifier, TicketResolver, AutoResponder } from '@contractspec/lib.support-bot';
 
 const classifier = new TicketClassifier();
 const resolver = new TicketResolver({ knowledge });
@@ -506,10 +663,10 @@ const responder = new AutoResponder();
 
 const classification = await classifier.classify(ticket);
 const resolution = await resolver.resolve(ticket);
-const draft = await responder.draft(ticket, resolution, classification);`})]}),O("div",{className:"space-y-3",children:[L("h2",{className:"font-bold text-2xl",children:"Expose as agent tools"}),L(Fe,{language:"typescript",code:`import { createSupportTools } from '@contractspec/lib.support-bot/bot';
+const draft = await responder.draft(ticket, resolution, classification);`})]}),z("div",{className:"space-y-3",children:[A("h2",{className:"font-bold text-2xl",children:"Expose as agent tools"}),A(dt,{language:"typescript",code:`import { createSupportTools } from '@contractspec/lib.support-bot/bot';
 
 const tools = createSupportTools({ resolver, classifier, responder });
-// Pass these tools into your host runtime or agent adapter.`})]}),O("div",{className:"space-y-3",children:[L("h2",{className:"font-bold text-2xl",children:"Included modules"}),O("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[O("li",{children:[L("strong",{children:"TicketClassifier"}),": heuristics + optional LLM validation for category/priority."]}),O("li",{children:[L("strong",{children:"TicketResolver"}),": RAG resolver that can plug into any knowledge retriever."]}),O("li",{children:[L("strong",{children:"AutoResponder"}),": generates drafts, citations, and tone-aware copy."]}),O("li",{children:[L("strong",{children:"SupportFeedbackLoop"}),": track auto-resolution rates and sentiment trends."]})]})]}),O("div",{className:"flex items-center gap-4 pt-4",children:[L(Ue,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),O(Ue,{href:"/docs/libraries/growth",className:"btn-primary",children:["Next: Growth ",L(sa,{size:16})]})]})]})}import{CodeBlock as se,InstallCommand as pa}from"@contractspec/lib.design-system";import qe from"@contractspec/lib.ui-link";import{ChevronRight as ma}from"lucide-react";import{jsx as R,jsxs as Z}from"react/jsx-runtime";function ua(){return Z("div",{className:"space-y-8",children:[Z("div",{className:"space-y-4",children:[R("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.testing"}),R("p",{className:"text-lg text-muted-foreground",children:"Golden tests ensure new rollouts behave exactly like the traffic that inspired them. Record requests in production, replay them locally, and ship with confidence."})]}),Z("div",{className:"space-y-4",children:[R("h2",{className:"font-bold text-2xl",children:"Installation"}),R(pa,{package:"@contractspec/lib.testing"})]}),Z("div",{className:"space-y-3",children:[R("h2",{className:"font-bold text-2xl",children:"Record traffic"}),R(se,{language:"typescript",code:`import {
+// Pass these tools into your host runtime or agent adapter.`})]}),z("div",{className:"space-y-3",children:[A("h2",{className:"font-bold text-2xl",children:"Included modules"}),z("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[z("li",{children:[A("strong",{children:"TicketClassifier"}),": heuristics + optional LLM validation for category/priority."]}),z("li",{children:[A("strong",{children:"TicketResolver"}),": RAG resolver that can plug into any knowledge retriever."]}),z("li",{children:[A("strong",{children:"AutoResponder"}),": generates drafts, citations, and tone-aware copy."]}),z("li",{children:[A("strong",{children:"SupportFeedbackLoop"}),": track auto-resolution rates and sentiment trends."]})]})]}),z("div",{className:"flex items-center gap-4 pt-4",children:[A(pt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),z(pt,{href:"/docs/libraries/growth",className:"btn-primary",children:["Next: Growth ",A(_a,{size:16})]})]})]})}import{CodeBlock as we,InstallCommand as qa}from"@contractspec/lib.design-system";import mt from"@contractspec/lib.ui-link";import{ChevronRight as Qa}from"lucide-react";import{jsx as P,jsxs as x}from"react/jsx-runtime";function Ka(){return x("div",{className:"space-y-8",children:[x("div",{className:"space-y-4",children:[P("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.testing"}),P("p",{className:"text-lg text-muted-foreground",children:"Golden tests ensure new rollouts behave exactly like the traffic that inspired them. Record requests in production, replay them locally, and ship with confidence."})]}),x("div",{className:"space-y-4",children:[P("h2",{className:"font-bold text-2xl",children:"Installation"}),P(qa,{package:"@contractspec/lib.testing"})]}),x("div",{className:"space-y-3",children:[P("h2",{className:"font-bold text-2xl",children:"Record traffic"}),P(we,{language:"typescript",code:`import {
   TrafficRecorder,
   InMemoryTrafficStore,
 } from '@contractspec/lib.testing/recorder';
@@ -529,7 +686,7 @@ await recorder.record({
   output,
   success: true,
   tenantId: ctx.organizationId ?? undefined,
-});`})]}),Z("div",{className:"space-y-3",children:[R("h2",{className:"font-bold text-2xl",children:"Generate suites"}),R(se,{language:"typescript",code:`import { GoldenTestGenerator } from '@contractspec/lib.testing';
+});`})]}),x("div",{className:"space-y-3",children:[P("h2",{className:"font-bold text-2xl",children:"Generate suites"}),P(we,{language:"typescript",code:`import { GoldenTestGenerator } from '@contractspec/lib.testing';
 
 const generator = new GoldenTestGenerator();
 const code = generator.generate(snapshots, {
@@ -537,25 +694,96 @@ const code = generator.generate(snapshots, {
   runnerImport: './tests/run-operation',
   runnerFunction: 'runOrdersCommand',
   framework: 'vitest',
-});`})]}),Z("div",{className:"space-y-3",children:[R("h2",{className:"font-bold text-2xl",children:"CLI workflow"}),R(se,{language:"bash",code:"contractspec test generate \\\n  --operation orders.create \\\n  --output tests/orders.create.golden.test.ts \\\n  --runner-import ./tests/run-operation \\\n  --runner-fn runOrdersCommand \\\n  --from-production \\\n  --days 7 \\\n  --sample-rate 0.05"})]}),R("div",{className:"grid gap-4 md:grid-cols-2",children:[{title:"Framework agnostic",description:"Vitest by default, Jest via `generateJestSuite`, or call `runGoldenTests` manually inside CI."},{title:"Sanitize & sample",description:"Scrub payloads before persistence and control sample rates per operation to stay within compliance limits."}].map((E)=>Z("div",{className:"card-subtle space-y-2 p-4",children:[R("h3",{className:"font-semibold text-lg",children:E.title}),R("p",{className:"text-muted-foreground text-sm",children:E.description})]},E.title))}),Z("div",{className:"flex items-center gap-4 pt-4",children:[R(qe,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),Z(qe,{href:"/docs/libraries/resilience",className:"btn-primary",children:["Next: Resilience ",R(ma,{size:16})]})]})]})}import{CodeBlock as ga,InstallCommand as fa}from"@contractspec/lib.design-system";import _e from"@contractspec/lib.ui-link";import{ChevronRight as ha}from"lucide-react";import{jsx as a,jsxs as m}from"react/jsx-runtime";function ba(){return m("div",{className:"space-y-8",children:[m("div",{className:"space-y-4",children:[a("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ui-kit"}),m("p",{className:"text-muted-foreground",children:["Universal UI components for React Native and Web, built on top of",a("code",{children:"nativewind"})," and ",a("code",{children:"@rn-primitives"}),"."]})]}),m("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Installation"}),a(fa,{package:"@contractspec/lib.ui-kit"})]}),m("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Key Features"}),m("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[m("li",{children:[a("strong",{children:"Universal"}),": Components render natively on iOS/Android and as standard HTML on web"]}),m("li",{children:[a("strong",{children:"Styled with NativeWind"}),": Uses Tailwind CSS classes for styling"]}),m("li",{children:[a("strong",{children:"Accessible"}),": Leverages ",a("code",{children:"@rn-primitives"})," ","(Radix UI for Native)"]}),m("li",{children:[a("strong",{children:"Atomic Design"}),": Exports atoms, molecules, and organisms"]})]})]}),m("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Example Usage"}),a(ga,{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';
+});`})]}),x("div",{className:"space-y-3",children:[P("h2",{className:"font-bold text-2xl",children:"CLI workflow"}),P(we,{language:"bash",code:"contractspec test generate \\\n  --operation orders.create \\\n  --output tests/orders.create.golden.test.ts \\\n  --runner-import ./tests/run-operation \\\n  --runner-fn runOrdersCommand \\\n  --from-production \\\n  --days 7 \\\n  --sample-rate 0.05"})]}),P("div",{className:"grid gap-4 md:grid-cols-2",children:[{title:"Framework agnostic",description:"Vitest by default, Jest via `generateJestSuite`, or call `runGoldenTests` manually inside CI."},{title:"Sanitize & sample",description:"Scrub payloads before persistence and control sample rates per operation to stay within compliance limits."}].map((t)=>x("div",{className:"card-subtle space-y-2 p-4",children:[P("h3",{className:"font-semibold text-lg",children:t.title}),P("p",{className:"text-muted-foreground text-sm",children:t.description})]},t.title))}),x("div",{className:"flex items-center gap-4 pt-4",children:[P(mt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),x(mt,{href:"/docs/libraries/resilience",className:"btn-primary",children:["Next: Resilience ",P(Qa,{size:16})]})]})]})}import{CodeBlock as Ja,InstallCommand as Za}from"@contractspec/lib.design-system";import de from"@contractspec/lib.ui-link";import{ChevronRight as Xa}from"lucide-react";import{jsx as i,jsxs as p}from"react/jsx-runtime";var $a=`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}\`}
+    />
+  );
+}`;function Ya(){return p("div",{className:"space-y-8",children:[p("div",{className:"space-y-4",children:[i("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ui-kit"}),p("p",{className:"text-muted-foreground",children:["Universal UI components for React Native and Web, built on top of",i("code",{children:"nativewind"})," and ",i("code",{children:"@rn-primitives"}),"."]})]}),p("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"Installation"}),i(Za,{package:"@contractspec/lib.ui-kit"})]}),p("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"Key Features"}),p("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[p("li",{children:[i("strong",{children:"Universal"}),": Components render natively on iOS/Android and as standard HTML on web"]}),p("li",{children:[i("strong",{children:"Styled with NativeWind"}),": Uses Tailwind CSS classes for styling"]}),p("li",{children:[i("strong",{children:"Accessible"}),": Leverages ",i("code",{children:"@rn-primitives"})," ","(Radix UI for Native)"]}),p("li",{children:[i("strong",{children:"Atomic Design"}),": Exports atoms, molecules, and organisms"]})]})]}),p("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"Data table example"}),p("p",{className:"text-muted-foreground",children:["The canonical"," ",i(de,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"})," ","uses ",i("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."]}),i(Ja,{language:"tsx",code:$a})]}),p("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"Core Components"}),p("div",{className:"grid gap-4 md:grid-cols-3",children:[p("div",{className:"card-subtle p-4",children:[i("h3",{className:"mb-2 font-semibold",children:"Form Controls"}),p("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[i("li",{children:"Button"}),i("li",{children:"Input"}),i("li",{children:"Checkbox"}),i("li",{children:"Switch"}),i("li",{children:"Select"})]})]}),p("div",{className:"card-subtle p-4",children:[i("h3",{className:"mb-2 font-semibold",children:"Layout"}),p("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[i("li",{children:"Card"}),i("li",{children:"Stack"}),i("li",{children:"Separator"}),i("li",{children:"Sheet"})]})]}),p("div",{className:"card-subtle p-4",children:[i("h3",{className:"mb-2 font-semibold",children:"Feedback"}),p("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[i("li",{children:"Alert"}),i("li",{children:"Skeleton"}),i("li",{children:"Progress"}),i("li",{children:"Tooltip"})]})]})]})]}),p("div",{className:"card-subtle space-y-3 p-6",children:[i("h2",{className:"font-bold text-2xl",children:"Where this layer fits"}),p("p",{className:"text-muted-foreground",children:["Read"," ",i(de,{href:"/docs/libraries/cross-platform-ui",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Cross-platform UI"})," ","for the full React and React Native compatibility model around this native-first primitive lane."]})]}),p("div",{className:"flex items-center gap-4 pt-4",children:[i(de,{href:"/docs/libraries/schema",className:"btn-ghost",children:"Previous: Schema"}),p(de,{href:"/docs/libraries/ui-kit-web",className:"btn-primary",children:["Next: UI Kit Web ",i(Xa,{size:16})]})]})]})}import{CodeBlock as xa,InstallCommand as ja}from"@contractspec/lib.design-system";import pe from"@contractspec/lib.ui-link";import{ChevronRight as eo}from"lucide-react";import{jsx as D,jsxs as _}from"react/jsx-runtime";var to=`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}\`}
+    />
   );
-}`})]}),m("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Core Components"}),m("div",{className:"grid gap-4 md:grid-cols-3",children:[m("div",{className:"card-subtle p-4",children:[a("h3",{className:"mb-2 font-semibold",children:"Form Controls"}),m("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[a("li",{children:"Button"}),a("li",{children:"Input"}),a("li",{children:"Checkbox"}),a("li",{children:"Switch"}),a("li",{children:"Select"})]})]}),m("div",{className:"card-subtle p-4",children:[a("h3",{className:"mb-2 font-semibold",children:"Layout"}),m("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[a("li",{children:"Card"}),a("li",{children:"Stack"}),a("li",{children:"Separator"}),a("li",{children:"Sheet"})]})]}),m("div",{className:"card-subtle p-4",children:[a("h3",{className:"mb-2 font-semibold",children:"Feedback"}),m("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[a("li",{children:"Alert"}),a("li",{children:"Skeleton"}),a("li",{children:"Progress"}),a("li",{children:"Tooltip"})]})]})]})]}),m("div",{className:"flex items-center gap-4 pt-4",children:[a(_e,{href:"/docs/libraries/schema",className:"btn-ghost",children:"Previous: Schema"}),m(_e,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Next: Design System ",a(ha,{size:16})]})]})]})}import{CodeBlock as He,InstallCommand as va}from"@contractspec/lib.design-system";import Ve from"@contractspec/lib.ui-link";import{ChevronRight as ya}from"lucide-react";import{jsx as H,jsxs as j}from"react/jsx-runtime";function Na(){return j("div",{className:"space-y-8",children:[j("div",{className:"space-y-4",children:[H("h1",{className:"font-bold text-4xl",children:"Workflow Composer"}),H("p",{className:"text-lg text-muted-foreground",children:"`@contractspec/lib.workflow-composer` injects tenant-/role-/device-specific steps into base WorkflowSpecs and keeps transitions valid."})]}),j("div",{className:"space-y-4",children:[H("h2",{className:"font-bold text-2xl",children:"Installation"}),H(va,{package:"@contractspec/lib.workflow-composer"})]}),j("div",{className:"space-y-4",children:[H("h2",{className:"font-bold text-2xl",children:"Register extensions"}),H(He,{language:"typescript",code:`const composer = new WorkflowComposer();
+}`;function ao(){return _("div",{className:"space-y-8",children:[_("div",{className:"space-y-4",children:[D("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ui-kit-web"}),D("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."})]}),_("div",{className:"space-y-4",children:[D("h2",{className:"font-bold text-2xl",children:"Installation"}),D(ja,{package:"@contractspec/lib.ui-kit-web"})]}),_("div",{className:"space-y-4",children:[D("h2",{className:"font-bold text-2xl",children:"Data table example"}),_("p",{className:"text-muted-foreground",children:["This is the raw browser lane from the canonical"," ",D(pe,{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."]}),D(xa,{language:"tsx",filename:"web-account-grid.tsx",code:to})]}),_("div",{className:"space-y-4",children:[D("h2",{className:"font-bold text-2xl",children:"What this layer owns"}),_("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[D("li",{children:"The raw table renderer and browser interaction model."}),D("li",{children:"Pagination, column visibility menus, pin menus, resize handles, and empty/loading states."}),D("li",{children:"Accessibility helpers and other web-specific primitives that stay outside the native-first package."})]})]}),_("div",{className:"card-subtle space-y-3 p-6",children:[D("h2",{className:"font-bold text-2xl",children:"Where this layer fits"}),_("p",{className:"text-muted-foreground",children:["Read"," ",D(pe,{href:"/docs/libraries/cross-platform-ui",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Cross-platform UI"})," ","for the shared runtime story behind the web and native render lanes."]})]}),_("div",{className:"flex items-center gap-4 pt-4",children:[D(pe,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"Previous: UI Kit"}),_(pe,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Next: Design System ",D(eo,{size:16})]})]})]})}import{CodeBlock as ut,InstallCommand as oo}from"@contractspec/lib.design-system";import gt from"@contractspec/lib.ui-link";import{ChevronRight as io}from"lucide-react";import{jsx as Z,jsxs as re}from"react/jsx-runtime";function ro(){return re("div",{className:"space-y-8",children:[re("div",{className:"space-y-4",children:[Z("h1",{className:"font-bold text-4xl",children:"Workflow Composer"}),Z("p",{className:"text-lg text-muted-foreground",children:"`@contractspec/lib.workflow-composer` injects tenant-/role-/device-specific steps into base WorkflowSpecs and keeps transitions valid."})]}),re("div",{className:"space-y-4",children:[Z("h2",{className:"font-bold text-2xl",children:"Installation"}),Z(oo,{package:"@contractspec/lib.workflow-composer"})]}),re("div",{className:"space-y-4",children:[Z("h2",{className:"font-bold text-2xl",children:"Register extensions"}),Z(ut,{language:"typescript",code:`const composer = new WorkflowComposer();
 
 composer.register({
   workflow: 'billing.invoiceApproval',
@@ -572,12 +800,12 @@ composer.register({
     },
   ],
   hiddenSteps: ['internal-audit'],
-});`})]}),j("div",{className:"space-y-4",children:[H("h2",{className:"font-bold text-2xl",children:"Compose at runtime"}),H(He,{language:"typescript",code:`const tenantWorkflow = composer.compose({
+});`})]}),re("div",{className:"space-y-4",children:[Z("h2",{className:"font-bold text-2xl",children:"Compose at runtime"}),Z(ut,{language:"typescript",code:`const tenantWorkflow = composer.compose({
   base: BaseInvoiceWorkflow,
   tenantId: 'acme',
 });
 
-workflowRunner.execute(tenantWorkflow, ctx);`})]}),j("div",{className:"flex items-center gap-4 pt-4",children:[H(Ve,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),j(Ve,{href:"/docs/libraries/workflows",className:"btn-primary",children:["Next: Workflow Runtime ",H(ya,{size:16})]})]})]})}import{CodeBlock as ka,InstallCommand as wa}from"@contractspec/lib.design-system";import Qe from"@contractspec/lib.ui-link";import{ChevronRight as Ca}from"lucide-react";import{jsx as r,jsxs as T}from"react/jsx-runtime";function Sa(){return T("div",{className:"space-y-8",children:[T("div",{className:"space-y-4",children:[r("h1",{className:"font-bold text-4xl",children:"Workflow Runtime Library"}),T("p",{className:"text-lg text-muted-foreground",children:["The ",r("code",{children:"@contractspec/lib.contracts-spec/workflow"})," library provides the core ",r("code",{children:"WorkflowRunner"})," for executing stateful, durable workflows."]})]}),T("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Installation"}),r(wa,{package:"@contractspec/lib.contracts-spec"})]}),T("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"WorkflowRunner"}),r("p",{className:"text-muted-foreground",children:"The runner manages execution state, step transitions, retries, and compensation."}),r(ka,{language:"typescript",code:`import { WorkflowRunner } from '@contractspec/lib.contracts-spec/workflow/runner';
+workflowRunner.execute(tenantWorkflow, ctx);`})]}),re("div",{className:"flex items-center gap-4 pt-4",children:[Z(gt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),re(gt,{href:"/docs/libraries/workflows",className:"btn-primary",children:["Next: Workflow Runtime ",Z(io,{size:16})]})]})]})}import{CodeBlock as no,InstallCommand as co}from"@contractspec/lib.design-system";import ht from"@contractspec/lib.ui-link";import{ChevronRight as so}from"lucide-react";import{jsx as s,jsxs as B}from"react/jsx-runtime";function lo(){return B("div",{className:"space-y-8",children:[B("div",{className:"space-y-4",children:[s("h1",{className:"font-bold text-4xl",children:"Workflow Runtime Library"}),B("p",{className:"text-lg text-muted-foreground",children:["The ",s("code",{children:"@contractspec/lib.contracts-spec/workflow"})," library provides the core ",s("code",{children:"WorkflowRunner"})," for executing stateful, durable workflows."]})]}),B("div",{className:"space-y-4",children:[s("h2",{className:"font-bold text-2xl",children:"Installation"}),s(co,{package:"@contractspec/lib.contracts-spec"})]}),B("div",{className:"space-y-4",children:[s("h2",{className:"font-bold text-2xl",children:"WorkflowRunner"}),s("p",{className:"text-muted-foreground",children:"The runner manages execution state, step transitions, retries, and compensation."}),s(no,{language:"typescript",code:`import { WorkflowRunner } from '@contractspec/lib.contracts-spec/workflow/runner';
 import { InMemoryStateStore } from '@contractspec/lib.contracts-spec/workflow/adapters/memory-store';
 import { WorkflowRegistry } from '@contractspec/lib.contracts-spec/workflow/spec';
 
@@ -597,4 +825,4 @@ const runner = new WorkflowRunner({
 const workflowId = await runner.start('my.workflow', 1, { userId: '123' });
 
 // Execute next step (usually called by a worker or queue consumer)
-await runner.executeStep(workflowId);`})]}),T("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"State Persistence"}),T("p",{className:"text-muted-foreground",children:["The runner relies on a ",r("code",{children:"StateStore"})," to persist workflow execution history. ContractSpec ships with:"]}),T("ul",{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:[T("li",{children:[r("code",{children:"InMemoryStateStore"})," - for testing and development."]}),T("li",{children:[r("code",{children:"PrismaStateStore"})," - for production using Prisma ORM."]})]})]}),T("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Events"}),r("p",{className:"text-muted-foreground",children:"The runner emits events that you can subscribe to for monitoring:"}),T("ul",{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:[r("li",{children:r("code",{children:"workflow.started"})}),r("li",{children:r("code",{children:"workflow.step_completed"})}),r("li",{children:r("code",{children:"workflow.step_failed"})}),r("li",{children:r("code",{children:"workflow.step_retrying"})}),r("li",{children:r("code",{children:"workflow.completed"})}),r("li",{children:r("code",{children:"workflow.cancelled"})}),r("li",{children:r("code",{children:"workflow.compensation_step_completed"})})]})]}),T("div",{className:"flex items-center gap-4 pt-4",children:[r(Qe,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),T(Qe,{href:"/docs/libraries/data-views",className:"btn-primary",children:["Next: Data Views ",r(Ca,{size:16})]})]})]})}export{Sa as LibrariesWorkflowsPage,Na as LibrariesWorkflowComposerPage,ba as LibrariesUIKitPage,ua as LibrariesTestingPage,da as LibrariesSupportBotPage,ia as LibrariesSchemaPage,ca as LibrariesSLOPage,ta as LibrariesRuntimePage,$t as LibrariesResiliencePage,Jt as LibrariesProgressiveDeliveryPage,Qt as LibrariesPersonalizationPage,_t as LibrariesOverviewPage,Gt as LibrariesOverlayEnginePage,Mt as LibrariesObservabilityPage,Ot as LibrariesMultiTenancyPage,At as LibrariesGrowthPage,Rt as LibrariesGraphQLPage,wt as LibrariesEvolutionPage,yt as LibrariesDesignSystemPage,ht as LibrariesDataViewsPage,ut as LibrariesDataBackendPage,dt as LibrariesCostTrackingPage,ct as LibrariesContractsPage,ot as LibrariesContentGenPage,je as LibrariesAnalyticsPage,$e as LibrariesAiAgentPage,Je as LibrariesAccessibilityPage};
+await runner.executeStep(workflowId);`})]}),B("div",{className:"space-y-4",children:[s("h2",{className:"font-bold text-2xl",children:"State Persistence"}),B("p",{className:"text-muted-foreground",children:["The runner relies on a ",s("code",{children:"StateStore"})," to persist workflow execution history. ContractSpec ships with:"]}),B("ul",{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:[B("li",{children:[s("code",{children:"InMemoryStateStore"})," - for testing and development."]}),B("li",{children:[s("code",{children:"PrismaStateStore"})," - for production using Prisma ORM."]})]})]}),B("div",{className:"space-y-4",children:[s("h2",{className:"font-bold text-2xl",children:"Events"}),s("p",{className:"text-muted-foreground",children:"The runner emits events that you can subscribe to for monitoring:"}),B("ul",{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:[s("li",{children:s("code",{children:"workflow.started"})}),s("li",{children:s("code",{children:"workflow.step_completed"})}),s("li",{children:s("code",{children:"workflow.step_failed"})}),s("li",{children:s("code",{children:"workflow.step_retrying"})}),s("li",{children:s("code",{children:"workflow.completed"})}),s("li",{children:s("code",{children:"workflow.cancelled"})}),s("li",{children:s("code",{children:"workflow.compensation_step_completed"})})]})]}),B("div",{className:"flex items-center gap-4 pt-4",children:[s(ht,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),B(ht,{href:"/docs/libraries/data-views",className:"btn-primary",children:["Next: Data Views ",s(so,{size:16})]})]})]})}export{lo as LibrariesWorkflowsPage,ro as LibrariesWorkflowComposerPage,ao as LibrariesUIKitWebPage,Ya as LibrariesUIKitPage,Ka as LibrariesTestingPage,Ha as LibrariesSupportBotPage,za as LibrariesSchemaPage,Fa as LibrariesSLOPage,Oa as LibrariesRuntimePage,Pa as LibrariesResiliencePage,Ra as LibrariesProgressiveDeliveryPage,Ca as LibrariesPersonalizationPage,wa as LibrariesOverviewPage,ba as LibrariesOverlayEnginePage,ga as LibrariesObservabilityPage,pa as LibrariesMultiTenancyPage,sa as LibrariesGrowthPage,ra as LibrariesGraphQLPage,ta as LibrariesEvolutionPage,xt as LibrariesDesignSystemPage,Kt as LibrariesDataViewsPage,Ht as LibrariesDataBackendPage,Ft as LibrariesCrossPlatformUIPage,Ut as LibrariesCostTrackingPage,Mt as LibrariesContractsPage,Pt as LibrariesContentGenPage,Lt as LibrariesAnalyticsPage,Ct as LibrariesAiAgentPage,wt as LibrariesAccessibilityPage};