@contractspec/bundle.library 3.9.8 → 3.9.9

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

@@ -1,5 +1,5 @@
 // @bun
-var Pt=Object.defineProperty;var Dt=(e)=>e;function Ot(e,S){this[e]=Dt.bind(null,S)}var Do=(e,S)=>{for(var be in S)Pt(e,be,{get:S[be],enumerable:!0,configurable:!0,set:Ot.bind(S,be)})};var Oo=(e,S)=>()=>(e&&(S=e(e=0)),S);import{CodeBlock as Ae,InstallCommand as Et}from"@contractspec/lib.design-system";import Pe from"@contractspec/lib.ui-link";import{ChevronRight as Bt}from"lucide-react";import{jsx as d,jsxs as v}from"react/jsx-runtime";function Mt(){return v("div",{className:"space-y-8",children:[v("div",{className:"space-y-4",children:[d("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.accessibility"}),d("p",{className:"text-muted-foreground",children:"Stable exports of accessibility primitives for LSSM web apps, ensuring WCAG compliance and inclusive design."})]}),v("div",{className:"space-y-4",children:[d("h2",{className:"font-bold text-2xl",children:"Installation"}),d(Et,{package:"@contractspec/lib.accessibility"})]}),v("div",{className:"space-y-4",children:[d("h2",{className:"font-bold text-2xl",children:"Exports"}),v("ul",{className:"space-y-2 text-muted-foreground",children:[v("li",{children:[d("code",{className:"rounded bg-background/50 px-2 py-1",children:"SkipLink"}),": A link to skip navigation, visible on focus"]}),v("li",{children:[d("code",{className:"rounded bg-background/50 px-2 py-1",children:"VisuallyHidden"}),": Hide content visually but keep it for screen readers"]}),v("li",{children:[d("code",{className:"rounded bg-background/50 px-2 py-1",children:"SRLiveRegionProvider"}),","," ",d("code",{className:"rounded bg-background/50 px-2 py-1",children:"useSRLiveRegion"}),": Manage live region announcements"]}),v("li",{children:[d("code",{className:"rounded bg-background/50 px-2 py-1",children:"RouteAnnouncer"}),": Announce page title/path changes on navigation"]}),v("li",{children:[d("code",{className:"rounded bg-background/50 px-2 py-1",children:"FocusOnRouteChange"}),": Reset focus to body or main content on navigation"]}),v("li",{children:[d("code",{className:"rounded bg-background/50 px-2 py-1",children:"useReducedMotion"}),": Detect if the user prefers reduced motion"]})]})]}),v("div",{className:"space-y-4",children:[d("h2",{className:"font-bold text-2xl",children:"Example: App Setup"}),d(Ae,{language:"tsx",code:`import {
+var ca=Object.defineProperty;var sa=(a)=>a;function la(a,A){this[a]=sa.bind(null,A)}var Ii=(a,A)=>{for(var Ge in A)ca(a,Ge,{get:A[Ge],enumerable:!0,configurable:!0,set:la.bind(A,Ge)})};var Pi=(a,A)=>()=>(a&&(A=a(a=0)),A);import{CodeBlock as $e,InstallCommand as da}from"@contractspec/lib.design-system";import xe from"@contractspec/lib.ui-link";import{ChevronRight as pa}from"lucide-react";import{jsx as h,jsxs as k}from"react/jsx-runtime";function ma(){return k("div",{className:"space-y-8",children:[k("div",{className:"space-y-4",children:[h("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.accessibility"}),h("p",{className:"text-muted-foreground",children:"Stable exports of accessibility primitives for LSSM web apps, ensuring WCAG compliance and inclusive design."})]}),k("div",{className:"space-y-4",children:[h("h2",{className:"font-bold text-2xl",children:"Installation"}),h(da,{package:"@contractspec/lib.accessibility"})]}),k("div",{className:"space-y-4",children:[h("h2",{className:"font-bold text-2xl",children:"Exports"}),k("ul",{className:"space-y-2 text-muted-foreground",children:[k("li",{children:[h("code",{className:"rounded bg-background/50 px-2 py-1",children:"SkipLink"}),": A link to skip navigation, visible on focus"]}),k("li",{children:[h("code",{className:"rounded bg-background/50 px-2 py-1",children:"VisuallyHidden"}),": Hide content visually but keep it for screen readers"]}),k("li",{children:[h("code",{className:"rounded bg-background/50 px-2 py-1",children:"SRLiveRegionProvider"}),","," ",h("code",{className:"rounded bg-background/50 px-2 py-1",children:"useSRLiveRegion"}),": Manage live region announcements"]}),k("li",{children:[h("code",{className:"rounded bg-background/50 px-2 py-1",children:"RouteAnnouncer"}),": Announce page title/path changes on navigation"]}),k("li",{children:[h("code",{className:"rounded bg-background/50 px-2 py-1",children:"FocusOnRouteChange"}),": Reset focus to body or main content on navigation"]}),k("li",{children:[h("code",{className:"rounded bg-background/50 px-2 py-1",children:"useReducedMotion"}),": Detect if the user prefers reduced motion"]})]})]}),k("div",{className:"space-y-4",children:[h("h2",{className:"font-bold text-2xl",children:"Example: App Setup"}),h($e,{language:"tsx",code:`import {
   SRLiveRegionProvider,
   RouteAnnouncer,
   SkipLink
@@ -19,7 +19,7 @@ export function RootLayout({ children }) {
       </body>
     </html>
   );
-}`})]}),v("div",{className:"space-y-4",children:[d("h2",{className:"font-bold text-2xl",children:"Example: Live Announcements"}),d(Ae,{language:"tsx",code:`import { useSRLiveRegion } from '@contractspec/lib.accessibility';
+}`})]}),k("div",{className:"space-y-4",children:[h("h2",{className:"font-bold text-2xl",children:"Example: Live Announcements"}),h($e,{language:"tsx",code:`import { useSRLiveRegion } from '@contractspec/lib.accessibility';
 
 export function TodoList() {
   const { announce } = useSRLiveRegion();
@@ -30,7 +30,7 @@ export function TodoList() {
   };
 
   return <button onClick={addTodo}>Add Todo</button>;
-}`})]}),v("div",{className:"space-y-4",children:[d("h2",{className:"font-bold text-2xl",children:"WCAG Compliance"}),v("p",{className:"text-muted-foreground",children:["These components map directly to WCAG 2.1 Level AA requirements documented in ",d("code",{children:"docs/accessibility_wcag_compliance_specs.md"}),":"]}),v("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[d("li",{children:"2.4.1 Bypass Blocks (SkipLink)"}),d("li",{children:"4.1.3 Status Messages (LiveRegion)"}),d("li",{children:"2.4.3 Focus Order (FocusOnRouteChange)"}),d("li",{children:"2.3.3 Animation from Interactions (useReducedMotion)"})]})]}),v("div",{className:"flex items-center gap-4 pt-4",children:[d(Pe,{href:"/docs/libraries/design-system",className:"btn-ghost",children:"Previous: Design System"}),v(Pe,{href:"/docs/libraries",className:"btn-primary",children:["Back to Libraries ",d(Bt,{size:16})]})]})]})}import{CodeBlock as De,InstallCommand as Wt}from"@contractspec/lib.design-system";import Oe from"@contractspec/lib.ui-link";import{ChevronRight as zt}from"lucide-react";import{jsx as y,jsxs as F}from"react/jsx-runtime";function Ut(){return F("div",{className:"space-y-8",children:[F("div",{className:"space-y-4",children:[y("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ai-agent"}),y("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."})]}),F("div",{className:"space-y-4",children:[y("h2",{className:"font-bold text-2xl",children:"Installation"}),y(Wt,{package:"@contractspec/lib.ai-agent"})]}),F("div",{className:"space-y-3",children:[y("h2",{className:"font-bold text-2xl",children:"Define & register"}),y(De,{language:"typescript",code:`import { defineAgent, AgentRegistry } from '@contractspec/lib.contracts-spec/agent';
+}`})]}),k("div",{className:"space-y-4",children:[h("h2",{className:"font-bold text-2xl",children:"WCAG Compliance"}),k("p",{className:"text-muted-foreground",children:["These components map directly to WCAG 2.1 Level AA requirements documented in ",h("code",{children:"docs/accessibility_wcag_compliance_specs.md"}),":"]}),k("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[h("li",{children:"2.4.1 Bypass Blocks (SkipLink)"}),h("li",{children:"4.1.3 Status Messages (LiveRegion)"}),h("li",{children:"2.4.3 Focus Order (FocusOnRouteChange)"}),h("li",{children:"2.3.3 Animation from Interactions (useReducedMotion)"})]})]}),k("div",{className:"flex items-center gap-4 pt-4",children:[h(xe,{href:"/docs/libraries/design-system",className:"btn-ghost",children:"Previous: Design System"}),k(xe,{href:"/docs/libraries",className:"btn-primary",children:["Back to Libraries ",h(pa,{size:16})]})]})]})}import{CodeBlock as je,InstallCommand as ua}from"@contractspec/lib.design-system";import et from"@contractspec/lib.ui-link";import{ChevronRight as ha}from"lucide-react";import{jsx as S,jsxs as K}from"react/jsx-runtime";function ga(){return K("div",{className:"space-y-8",children:[K("div",{className:"space-y-4",children:[S("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ai-agent"}),S("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."})]}),K("div",{className:"space-y-4",children:[S("h2",{className:"font-bold text-2xl",children:"Installation"}),S(ua,{package:"@contractspec/lib.ai-agent"})]}),K("div",{className:"space-y-3",children:[S("h2",{className:"font-bold text-2xl",children:"Define & register"}),S(je,{language:"typescript",code:`import { defineAgent, AgentRegistry } from '@contractspec/lib.contracts-spec/agent';
 
 const SupportBot = defineAgent({
   meta: {
@@ -49,7 +49,7 @@ const SupportBot = defineAgent({
   },
 });
 
-const registry = new AgentRegistry().register(SupportBot);`})]}),F("div",{className:"space-y-3",children:[y("h2",{className:"font-bold text-2xl",children:"Run with approvals"}),y(De,{language:"typescript",code:`import { createUnifiedAgent, ApprovalWorkflow } from '@contractspec/lib.ai-agent';
+const registry = new AgentRegistry().register(SupportBot);`})]}),K("div",{className:"space-y-3",children:[S("h2",{className:"font-bold text-2xl",children:"Run with approvals"}),S(je,{language:"typescript",code:`import { createUnifiedAgent, ApprovalWorkflow } from '@contractspec/lib.ai-agent';
 
 const approvals = new ApprovalWorkflow();
 const agent = createUnifiedAgent(SupportBot, {
@@ -59,7 +59,7 @@ const agent = createUnifiedAgent(SupportBot, {
 
 const result = await agent.run(ticket.body);
 // Route low-confidence or manual-review flows through approvals when needed.
-`})]}),F("div",{className:"space-y-3",children:[y("h2",{className:"font-bold text-2xl",children:"What's inside"}),F("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[F("li",{children:[y("code",{children:"createUnifiedAgent"}),", ",y("code",{children:"ContractSpecAgent"}),","," ",y("code",{children:"UnifiedAgent"})]}),y("li",{children:"MCP, operation-backed, memory, and subagent tool adapters"}),F("li",{children:[y("code",{children:"InMemoryAgentMemory"})," plus interfaces for custom stores"]}),F("li",{children:[y("code",{children:"ApprovalWorkflow"})," + ",y("code",{children:"ApprovalStore"})," for human-in-the-loop reviews"]})]})]}),F("div",{className:"flex items-center gap-4 pt-4",children:[y(Oe,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),F(Oe,{href:"/docs/libraries/support-bot",className:"btn-primary",children:["Next: Support Bot ",y(zt,{size:16})]})]})]})}import{CodeBlock as ve,InstallCommand as Gt}from"@contractspec/lib.design-system";import{jsx as Q,jsxs as le}from"react/jsx-runtime";function Ft(){return le("div",{className:"space-y-8",children:[le("div",{className:"space-y-4",children:[Q("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.analytics"}),Q("p",{className:"text-lg text-muted-foreground",children:"Work directly with telemetry events to understand conversion, retention, churn, and growth opportunities."})]}),le("div",{className:"space-y-4",children:[Q("h2",{className:"font-bold text-2xl",children:"Installation"}),Q(Gt,{package:"@contractspec/lib.analytics"})]}),le("div",{className:"space-y-3",children:[Q("h2",{className:"font-bold text-2xl",children:"Funnels in memory"}),Q(ve,{language:"typescript",code:`import { FunnelAnalyzer } from '@contractspec/lib.analytics/funnel';
+`})]}),K("div",{className:"space-y-3",children:[S("h2",{className:"font-bold text-2xl",children:"What's inside"}),K("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[K("li",{children:[S("code",{children:"createUnifiedAgent"}),", ",S("code",{children:"ContractSpecAgent"}),","," ",S("code",{children:"UnifiedAgent"})]}),S("li",{children:"MCP, operation-backed, memory, and subagent tool adapters"}),K("li",{children:[S("code",{children:"InMemoryAgentMemory"})," plus interfaces for custom stores"]}),K("li",{children:[S("code",{children:"ApprovalWorkflow"})," + ",S("code",{children:"ApprovalStore"})," for human-in-the-loop reviews"]})]})]}),K("div",{className:"flex items-center gap-4 pt-4",children:[S(et,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),K(et,{href:"/docs/libraries/support-bot",className:"btn-primary",children:["Next: Support Bot ",S(ha,{size:16})]})]})]})}import{CodeBlock as Fe,InstallCommand as fa}from"@contractspec/lib.design-system";import{jsx as X,jsxs as Re}from"react/jsx-runtime";function ba(){return Re("div",{className:"space-y-8",children:[Re("div",{className:"space-y-4",children:[X("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.analytics"}),X("p",{className:"text-lg text-muted-foreground",children:"Work directly with telemetry events to understand conversion, retention, churn, and growth opportunities."})]}),Re("div",{className:"space-y-4",children:[X("h2",{className:"font-bold text-2xl",children:"Installation"}),X(fa,{package:"@contractspec/lib.analytics"})]}),Re("div",{className:"space-y-3",children:[X("h2",{className:"font-bold text-2xl",children:"Funnels in memory"}),X(Fe,{language:"typescript",code:`import { FunnelAnalyzer } from '@contractspec/lib.analytics/funnel';
 
 const analyzer = new FunnelAnalyzer();
 const report = analyzer.analyze(events, {
@@ -69,23 +69,24 @@ const report = analyzer.analyze(events, {
     { id: 'submit', eventName: 'signup.submit' },
     { id: 'verified', eventName: 'account.verified' },
   ],
-});`})]}),le("div",{className:"space-y-3",children:[Q("h2",{className:"font-bold text-2xl",children:"Cohorts & churn"}),Q(ve,{language:"typescript",code:`import { CohortTracker } from '@contractspec/lib.analytics/cohort';
+});`})]}),Re("div",{className:"space-y-3",children:[X("h2",{className:"font-bold text-2xl",children:"Cohorts & churn"}),X(Fe,{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);`})]}),le("div",{className:"space-y-3",children:[Q("h2",{className:"font-bold text-2xl",children:"Growth hypotheses"}),Q(ve,{language:"typescript",code:`import { GrowthHypothesisGenerator } from '@contractspec/lib.analytics/growth';
+const churn = new ChurnPredictor().score(events);`})]}),Re("div",{className:"space-y-3",children:[X("h2",{className:"font-bold text-2xl",children:"Growth hypotheses"}),X(Fe,{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 },
-]);`})]})]})}var Ee=`import {
+]);`})]})]})}var tt=`import {
   AppShell,
-  PageOutline,
-  type AppShellNavigationSection,
+  type ShellCommandGroup,
+  type ShellNavSection,
+  type ShellNotificationCenter,
   type PageOutlineItem,
 } from "@contractspec/lib.design-system/shell";
 
-const navigation: AppShellNavigationSection[] = [
+const navigation: ShellNavSection[] = [
   {
     title: "Workspace",
     items: [
@@ -102,6 +103,16 @@ const navigation: AppShellNavigationSection[] = [
   },
 ];
 
+const commands: ShellCommandGroup[] = [
+  {
+    heading: "Quick actions",
+    items: [
+      { id: "new-contract", label: "New contract", shortcut: "N" },
+      { id: "import", label: "Import existing app" },
+    ],
+  },
+];
+
 const outline: PageOutlineItem[] = [
   {
     id: "architecture",
@@ -114,41 +125,104 @@ const outline: PageOutlineItem[] = [
   },
 ];
 
+const notifications: ShellNotificationCenter = {
+  label: "Notifications",
+  loading: false,
+  unreadCount: 2,
+  items: [
+    {
+      id: "contract-approved",
+      title: "Contract approved",
+      body: "Billing.create is ready to publish.",
+      status: "unread",
+      createdAt: "2026-04-29T09:30:00Z",
+      actionUrl: "/contracts/billing.create",
+      category: "Review",
+    },
+  ],
+  onSelect: (item) => openNotificationTarget(item),
+  onMarkRead: (item) => markNotificationRead(item.id),
+  onMarkAllRead: () => markAllNotificationsRead(),
+};
+
 export function WorkspacePage() {
   return (
     <AppShell
-      brand={{ label: "ContractSpec", href: "/dashboard" }}
+      title="ContractSpec"
+      homeHref="/dashboard"
       navigation={navigation}
+      commands={commands}
       breadcrumbs={[
         { label: "Workspace", href: "/dashboard" },
         { label: "Contracts" },
       ]}
-      command={{
-        placeholder: "Search contracts or run an action",
-        groups: [
-          {
-            title: "Quick actions",
-            actions: [
-              { id: "new-contract", label: "New contract" },
-              { id: "import", label: "Import existing app" },
-            ],
-          },
-        ],
-      }}
-      user={{
-        name: "Ada Lovelace",
-        email: "ada@example.com",
-        actions: [{ label: "Sign out", onSelect: () => signOut() }],
-      }}
-      pageOutline={<PageOutline items={outline} activeId="desktop" />}
+      notifications={notifications}
+      pageOutline={outline}
+      activeHref="/contracts"
+      activeOutlineId="desktop"
+      userMenu={<UserMenu onSignOut={() => signOut()} />}
     >
       <main>{/* route content */}</main>
     </AppShell>
   );
-}`,Be=`You are implementing a modern application shell from scratch.
+}`,at=`import {
+  ListNotificationsOutputModel,
+  MarkNotificationReadInputModel,
+} from "@contractspec/lib.contracts-spec/notifications";
+import {
+  notificationsSchemaContribution,
+  renderNotificationTemplate,
+} from "@contractspec/lib.notification";
+import type { ShellNotificationCenter } from "@contractspec/lib.design-system/shell";
+
+type NotificationListResult = {
+  unreadCount: number;
+  notifications: Array<{
+    id: string;
+    title: string;
+    body: string;
+    type: string;
+    status: string;
+    readAt?: string | Date | null;
+    createdAt: string | Date;
+    actionUrl?: string;
+    metadata?: Record<string, unknown>;
+  }>;
+};
+
+export function toShellNotifications(
+  data: NotificationListResult,
+  actions: {
+    open: (id: string) => void;
+    markRead: (input: { notificationId: string }) => void;
+    markAllRead: () => void;
+  }
+): ShellNotificationCenter {
+  return {
+    unreadCount: data.unreadCount,
+    items: data.notifications.map((notification) => ({
+      id: notification.id,
+      title: notification.title,
+      body: notification.body,
+      status: notification.status,
+      createdAt: notification.createdAt,
+      actionUrl: notification.actionUrl,
+      category: notification.type,
+      metadata: notification.metadata,
+    })),
+    onSelect: (item) => actions.open(item.id),
+    onMarkRead: (item) => actions.markRead({ notificationId: item.id }),
+    onMarkAllRead: actions.markAllRead,
+  };
+}
+
+void ListNotificationsOutputModel;
+void MarkNotificationReadInputModel;
+void notificationsSchemaContribution;
+void renderNotificationTemplate;`,ot=`You are implementing a modern application shell from scratch.
 
 Goal:
-Build a reusable application shell for a React/Next.js web app and an Expo React Native app. The shell must provide a desktop sidebar, desktop topbar, command search, breadcrumbs, nested navigation, user/auth actions, and an in-page section navigator called PageOutline.
+Build a reusable application shell for a React/Next.js web app and an Expo React Native app. The shell must provide a desktop sidebar, desktop topbar, command search, breadcrumbs, nested navigation, user/auth actions, in-app notifications, and an in-page section navigator called PageOutline.
 
 Use this architecture:
 - Keep route content independent from navigation chrome.
@@ -156,29 +230,37 @@ Use this architecture:
 - Create a command model with search input, grouped suggestions, quick actions, keyboard shortcut labels, empty state, and loading state.
 - Create a breadcrumb model for the topbar.
 - Create a PageOutline model for right-side in-page navigation with exactly three supported levels. It should render anchors, support active section state, and degrade gracefully when no sections exist.
+- Create a ShellNotificationCenter model with render-ready items, unread count, loading and empty states, onSelect, onMarkRead, onMarkAllRead, and optional custom item rendering.
 - Expose the system from the design system or a dedicated shell module, not from a single app route.
 
+Notification boundary:
+- Use @contractspec/lib.contracts-spec/notifications as the canonical source for notification contracts, operation models, and feature metadata.
+- Use @contractspec/lib.notification for reusable notification entities, schema contribution, channels, templates, and i18n helpers.
+- Keep persistence, polling/subscriptions, delivery providers, and optimistic mutations in the host application or notification runtime layer.
+- Pass only render-ready ShellNotificationCenter state into AppShell so the design system does not import or own notification runtime behavior.
+
 Desktop behavior:
 - Persistent left sidebar with app logo/title, command trigger, grouped navigation, nested submenus, and current user/auth/logout area.
 - Topbar with breadcrumbs and an optional command trigger.
+- Topbar notification trigger with unread badge, loading/empty states, mark-read actions, and item selection.
 - Content area with optional right PageOutline.
 - Keep dimensions stable. Navigation labels must not resize layout on hover or active state.
 
 Mobile web behavior:
 - Use bottom navigation for the primary destinations.
-- Put deeper navigation, command search, auth actions, and secondary actions behind a menu or drawer.
+- Put deeper navigation, command search, notifications, auth actions, and secondary actions behind a menu or drawer when the topbar cannot safely hold them.
 - Keep route content first and make the shell controls reachable without covering important content.
 
 Native behavior:
 - Add .native.tsx entrypoints for Expo/React Native.
-- Prefer bottom tabs for primary destinations and a menu/sheet for deeper navigation and account actions.
-- Keep the same typed navigation, command, breadcrumb, and PageOutline data contracts across web and native.
+- Prefer bottom tabs for primary destinations and a menu/sheet for deeper navigation, notifications, and account actions.
+- Keep the same typed navigation, command, breadcrumb, notification, and PageOutline data contracts across web and native.
 
 Implementation constraints:
 - Reuse the existing design-system primitives, tokens, icons, and accessibility patterns.
 - Do not hardcode app-specific routes in the shell component.
 - Do not introduce a new dependency unless the repo already uses it for dialogs, menus, icons, or navigation.
-- Include tests for navigation rendering, nested items, command filtering, breadcrumbs, PageOutline level handling, active section state, and mobile/native adaptation contracts.
+- Include tests for navigation rendering, nested items, command filtering, breadcrumbs, notification unread badge/loading/empty/callback behavior, PageOutline level handling, active section state, and mobile/native adaptation contracts.
 - Update docs and exports so developers can import the shell from a stable public API.
 
 Deliverables:
@@ -186,15 +268,18 @@ Deliverables:
 - Web shell components.
 - Native shell components or adapters.
 - PageOutline component with three-level support.
+- ShellNotifications or equivalent notification center component for web and native shell placement.
 - Usage example.
-- Focused tests and typecheck/build evidence.`,Me=`You are refactoring an existing application to use the shared application shell system.
+- Focused tests and typecheck/build evidence.`,it=`You are refactoring an existing application to use the shared application shell system.
 
 Goal:
-Replace app-specific sidebar, topbar, breadcrumb, command palette, account menu, mobile navigation, and in-page table-of-contents code with the shared AppShell and PageOutline system.
+Replace app-specific sidebar, topbar, breadcrumb, command palette, notification badge/inbox, account menu, mobile navigation, and in-page table-of-contents code with the shared AppShell, ShellNotifications, and PageOutline system.
 
 Start by auditing:
 - Current layout wrappers and route groups.
 - Sidebar, topbar, breadcrumb, command/search, auth menu, and mobile navigation implementations.
+- Existing notification badges, inbox panels, toasts that represent durable in-app items, unread count queries, mark-read actions, and delivery modules.
+- Imports from @contractspec/module.notifications that should migrate to @contractspec/lib.contracts-spec/notifications or @contractspec/lib.notification.
 - Any duplicated navigation arrays, route labels, icon maps, access-control checks, and active-state logic.
 - Any in-page summary/table-of-contents components that should become PageOutline data.
 - Web-only assumptions that would block Expo/React Native adaptation.
@@ -203,28 +288,31 @@ Refactor plan:
 1. Define a single typed navigation source for primary nav, grouped sidebar nav, nested children, labels, icons, badges, disabled states, and permissions.
 2. Map existing command/search behavior into grouped command actions with search text and quick actions.
 3. Map existing route metadata into breadcrumbs.
-4. Convert page table-of-contents or section summary data into PageOutline items with a maximum of three levels.
-5. Wrap app routes in AppShell while keeping page content components route-local.
-6. Move primary mobile destinations into bottom navigation and deeper/account actions into a menu or drawer.
-7. Add or preserve .native.tsx adapters when the app targets Expo.
+4. Move canonical notification contracts to @contractspec/lib.contracts-spec/notifications and reusable helpers to @contractspec/lib.notification; keep the old module shim only for compatibility imports that still need the legacy module id.
+5. Convert notification query results into ShellNotificationCenter items with unreadCount, loading, empty state, onSelect, onMarkRead, and onMarkAllRead callbacks.
+6. Convert page table-of-contents or section summary data into PageOutline items with a maximum of three levels.
+7. Wrap app routes in AppShell while keeping page content components route-local.
+8. Move primary mobile destinations into bottom navigation and deeper/account/notification actions into a menu or drawer.
+9. Add or preserve .native.tsx adapters when the app targets Expo.
 
 Preserve behavior:
 - Existing route URLs and access rules.
 - Existing keyboard shortcuts where they are public behavior.
 - Existing analytics or telemetry events on navigation and command actions.
+- Existing notification delivery semantics, unread count semantics, deep links, and mark-read behavior.
 - Existing auth/logout behavior.
 - Existing responsive breakpoints unless there is a documented design-system breakpoint to adopt.
 
 Quality gates:
 - Add regression tests around current visible navigation before removing old shell code when coverage is missing.
-- Test active nav state, nested nav expansion, command search/action invocation, breadcrumbs, auth menu, mobile bottom navigation, and PageOutline anchor behavior.
+- Test active nav state, nested nav expansion, command search/action invocation, breadcrumbs, notification unread badge/loading/empty/callback behavior, auth menu, mobile bottom navigation, and PageOutline anchor behavior.
 - Run lint, typecheck, and the app's relevant test/build command.
 - Remove dead app-specific shell components only after the shared shell path is verified.
 
 Output:
 - List old shell files removed or simplified.
 - List new shared shell integration points.
-- Include before/after route coverage and verification commands.`,We=[{title:"Sidebar",body:"Desktop owns brand, command entry, grouped navigation, nested items, and account actions in one persistent scanning area."},{title:"Topbar",body:"Breadcrumbs stay visible while the current route changes. The command trigger can live here when the sidebar is collapsed or hidden."},{title:"PageOutline",body:"The right-side in-page navigator replaces ad hoc tables of contents. It supports three levels of section anchors and active state."},{title:"Mobile adapters",body:"Small web and native surfaces move primary destinations to bottom navigation and reserve drawers or menus for deep navigation and account actions."}];import{CodeBlock as ye,InstallCommand as _t}from"@contractspec/lib.design-system";import{Box as ze,HStack as Vt,VStack as te}from"@contractspec/lib.design-system/layout";import{Code as Ne,H1 as qt,H2 as de,H3 as Ht,P as pe,Text as Ue}from"@contractspec/lib.design-system/typography";import Ge from"@contractspec/lib.ui-link";import{ChevronRight as Qt}from"lucide-react";import{jsx as p,jsxs as M}from"react/jsx-runtime";function Kt(){return M(te,{className:"space-y-8",children:[M(te,{className:"space-y-4",children:[p(qt,{className:"font-bold text-4xl",children:"Application shell"}),M(pe,{className:"text-lg text-muted-foreground",children:["A reusable navigation system for product apps: desktop sidebar, topbar breadcrumbs, command search, account actions, mobile adapters, and a Notion-style ",p(Ne,{children:"PageOutline"})," for page sections."]})]}),M(te,{className:"space-y-4",children:[p(de,{className:"font-bold text-2xl",children:"Installation"}),p(_t,{package:"@contractspec/lib.design-system"})]}),M(te,{className:"space-y-4",children:[p(de,{className:"font-bold text-2xl",children:"What It Standardizes"}),p(ze,{className:"grid gap-4 md:grid-cols-2",children:We.map((e)=>M(ze,{className:"card-subtle p-4",children:[p(Ht,{className:"font-semibold",children:e.title}),p(pe,{className:"mt-2 text-muted-foreground text-sm leading-7",children:e.body})]},e.title))})]}),M(te,{className:"space-y-4",children:[p(de,{className:"font-bold text-2xl",children:"Import Surface"}),p(pe,{className:"text-muted-foreground",children:"The shell is exposed as a focused design-system subpath so apps can adopt navigation chrome without pulling unrelated documentation or marketing helpers."}),p(ye,{language:"tsx",filename:"app-shell-example.tsx",code:Ee})]}),M(te,{className:"space-y-4",children:[p(de,{className:"font-bold text-2xl",children:"AI Prompt: Build From Scratch"}),p(pe,{className:"text-muted-foreground",children:"Use this prompt when the app does not already have a shell or when the design-system package needs the reusable primitive first."}),p(ye,{language:"markdown",filename:"implement-application-shell.md",code:Be})]}),M(te,{className:"space-y-4",children:[p(de,{className:"font-bold text-2xl",children:"AI Prompt: Refactor An App"}),p(pe,{className:"text-muted-foreground",children:"Use this prompt when an app already has custom navigation chrome and needs to migrate without breaking route behavior."}),p(ye,{language:"markdown",filename:"refactor-to-application-shell.md",code:Me})]}),M(te,{className:"card-subtle space-y-3 p-6",children:[p(de,{className:"font-bold text-2xl",children:"Naming"}),M(pe,{className:"text-muted-foreground",children:["Use ",p(Ne,{children:"AppShell"})," for the whole navigation frame and"," ",p(Ne,{children:"PageOutline"})," for the in-page navigation helper. The latter is the product-app equivalent of a table of contents, but it is intentionally named for live page sections rather than static documentation."]})]}),M(Vt,{className:"flex flex-wrap items-center gap-3 pt-2",children:[p(Ge,{href:"/docs/libraries/cross-platform-ui",className:"btn-ghost",children:p(Ue,{children:"Cross-platform UI"})}),M(Ge,{href:"/docs/libraries/design-system",className:"btn-primary",children:[p(Ue,{children:"Design System"})," ",p(Qt,{size:16})]})]})]})}import{CodeBlock as Jt,InstallCommand as Zt}from"@contractspec/lib.design-system";import Fe from"@contractspec/lib.ui-link";import{ChevronRight as Xt}from"lucide-react";import{jsx as W,jsxs as ae}from"react/jsx-runtime";function Yt(){return ae("div",{className:"space-y-8",children:[ae("div",{className:"space-y-4",children:[W("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.content-gen"}),W("p",{className:"text-lg text-muted-foreground",children:"Feed a single ContentBrief and produce cohesive marketing assets without touching a CMS."})]}),ae("div",{className:"space-y-4",children:[W("h2",{className:"font-bold text-2xl",children:"Installation"}),W(Zt,{package:"@contractspec/lib.content-gen"})]}),ae("div",{className:"space-y-3",children:[W("h2",{className:"font-bold text-2xl",children:"One brief, many assets"}),W(Jt,{language:"typescript",code:`import {
+- Include before/after route coverage and verification commands.`,rt=[{title:"Contracts stay canonical",body:"Use @contractspec/lib.contracts-spec/notifications for operation models, feature metadata, and contract-level compatibility."},{title:"Runtime helpers stay reusable",body:"Use @contractspec/lib.notification for schema contribution, channel adapters, templates, and i18n without importing the deprecated module shim in new code."},{title:"Apps own live state",body:"Fetch, subscribe, persist, mutate, and reconcile notification state in the host app or runtime layer where auth and tenancy are known."},{title:"Shell receives view state",body:"Pass AppShell a ShellNotificationCenter with render-ready items, counts, loading state, and callbacks; the design system only renders affordances."}],nt=[{title:"Sidebar",body:"Desktop owns brand, command entry, grouped navigation, nested items, and account actions in one persistent scanning area."},{title:"Topbar",body:"Breadcrumbs stay visible while the current route changes. Command search and notification affordances can live here when the sidebar is collapsed or hidden."},{title:"PageOutline",body:"The right-side in-page navigator replaces ad hoc tables of contents. It supports three levels of section anchors and active state."},{title:"Notifications",body:"The shell renders unread badges, item lists, loading/empty states, mark-read actions, and deep-link selection from host-owned notification state."},{title:"Mobile adapters",body:"Small web and native surfaces move primary destinations to bottom navigation and reserve drawers or menus for deep navigation, notifications, and account actions."}];import{CodeBlock as De,InstallCommand as va}from"@contractspec/lib.design-system";import{Box as Me,HStack as ya,VStack as ae}from"@contractspec/lib.design-system/layout";import{Code as pe,H1 as Na,H2 as ve,H3 as ct,P as me,Text as st}from"@contractspec/lib.design-system/typography";import lt from"@contractspec/lib.ui-link";import{ChevronRight as wa}from"lucide-react";import{jsx as c,jsxs as L}from"react/jsx-runtime";function ka(){return L(ae,{className:"space-y-8",children:[L(ae,{className:"space-y-4",children:[c(Na,{className:"font-bold text-4xl",children:"Application shell"}),L(me,{className:"text-lg text-muted-foreground",children:["A reusable navigation system for product apps: desktop sidebar, topbar breadcrumbs, command search, account actions, mobile adapters, and a Notion-style ",c(pe,{children:"PageOutline"})," for page sections, with prop-driven in-app notifications for web and native shells."]})]}),L(ae,{className:"space-y-4",children:[c(ve,{className:"font-bold text-2xl",children:"Installation"}),c(va,{package:"@contractspec/lib.design-system"})]}),L(ae,{className:"space-y-4",children:[c(ve,{className:"font-bold text-2xl",children:"What It Standardizes"}),c(Me,{className:"grid gap-4 md:grid-cols-2",children:nt.map((a)=>L(Me,{className:"card-subtle p-4",children:[c(ct,{className:"font-semibold",children:a.title}),c(me,{className:"mt-2 text-muted-foreground text-sm leading-7",children:a.body})]},a.title))})]}),L(ae,{className:"space-y-4",children:[c(ve,{className:"font-bold text-2xl",children:"Import Surface"}),c(me,{className:"text-muted-foreground",children:"The shell is exposed as a focused design-system subpath so apps can adopt navigation chrome without pulling unrelated documentation or marketing helpers."}),c(De,{language:"tsx",filename:"app-shell-example.tsx",code:tt})]}),L(ae,{className:"space-y-4",children:[c(ve,{className:"font-bold text-2xl",children:"Notification Center Boundary"}),L(me,{className:"text-muted-foreground",children:["Notifications are part of the shell experience, but the design system only renders the affordance. Contracts, runtime helpers, persistence, delivery, auth, and subscriptions stay outside the shell and feed a render-ready ",c(pe,{children:"ShellNotificationCenter"})," into"," ",c(pe,{children:"AppShell"}),"."]}),c(Me,{className:"grid gap-4 md:grid-cols-2",children:rt.map((a)=>L(Me,{className:"card-subtle p-4",children:[c(ct,{className:"font-semibold",children:a.title}),c(me,{className:"mt-2 text-muted-foreground text-sm leading-7",children:a.body})]},a.title))}),c(De,{language:"tsx",filename:"notification-center-boundary.ts",code:at})]}),L(ae,{className:"space-y-4",children:[c(ve,{className:"font-bold text-2xl",children:"AI Prompt: Build From Scratch"}),c(me,{className:"text-muted-foreground",children:"Use this prompt when the app does not already have a shell, command surface, page outline, or in-app notification center."}),c(De,{language:"markdown",filename:"implement-application-shell.md",code:ot})]}),L(ae,{className:"space-y-4",children:[c(ve,{className:"font-bold text-2xl",children:"AI Prompt: Refactor An App"}),c(me,{className:"text-muted-foreground",children:"Use this prompt when an app already has custom navigation chrome and notification UI that need to migrate without breaking route behavior, unread counts, or delivery semantics."}),c(De,{language:"markdown",filename:"refactor-to-application-shell.md",code:it})]}),L(ae,{className:"card-subtle space-y-3 p-6",children:[c(ve,{className:"font-bold text-2xl",children:"Naming"}),L(me,{className:"text-muted-foreground",children:["Use ",c(pe,{children:"AppShell"})," for the whole navigation frame and"," ",c(pe,{children:"PageOutline"})," for the in-page navigation helper. The latter is the product-app equivalent of a table of contents, but it is intentionally named for live page sections rather than static documentation. Use ",c(pe,{children:"ShellNotifications"})," for the notification affordance when it is rendered directly, or pass the same data contract through ",c(pe,{children:"AppShell"})," with the"," ",c(pe,{children:"notifications"})," prop."]})]}),L(ya,{className:"flex flex-wrap items-center gap-3 pt-2",children:[c(lt,{href:"/docs/libraries/cross-platform-ui",className:"btn-ghost",children:c(st,{children:"Cross-platform UI"})}),L(lt,{href:"/docs/libraries/design-system",className:"btn-primary",children:[c(st,{children:"Design System"})," ",c(wa,{size:16})]})]})]})}import{CodeBlock as Sa,InstallCommand as Ra}from"@contractspec/lib.design-system";import dt from"@contractspec/lib.ui-link";import{ChevronRight as Ca}from"lucide-react";import{jsx as G,jsxs as ue}from"react/jsx-runtime";function Ta(){return ue("div",{className:"space-y-8",children:[ue("div",{className:"space-y-4",children:[G("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.content-gen"}),G("p",{className:"text-lg text-muted-foreground",children:"Feed a single ContentBrief and produce cohesive marketing assets without touching a CMS."})]}),ue("div",{className:"space-y-4",children:[G("h2",{className:"font-bold text-2xl",children:"Installation"}),G(Ra,{package:"@contractspec/lib.content-gen"})]}),ue("div",{className:"space-y-3",children:[G("h2",{className:"font-bold text-2xl",children:"One brief, many assets"}),G(Sa,{language:"typescript",code:`import {
   BlogGenerator,
   LandingPageGenerator,
   EmailCampaignGenerator,
@@ -244,7 +332,7 @@ 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);`})]}),ae("div",{className:"space-y-3",children:[W("h2",{className:"font-bold text-2xl",children:"When to use"}),ae("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[W("li",{children:"Ship landing page refreshes whenever specs change."}),W("li",{children:"Automate release emails + nurture sequences per vertical."}),W("li",{children:"Create social snippets that stay on-message with the same brief."}),W("li",{children:"Generate SEO metadata + Schema.org markup alongside content."})]})]}),ae("div",{className:"flex items-center gap-4 pt-4",children:[W(Fe,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),ae(Fe,{href:"/docs/libraries/support-bot",className:"btn-primary",children:["Next: Support Bot ",W(Xt,{size:16})]})]})]})}import{CodeBlock as $t,InstallCommand as xt}from"@contractspec/lib.design-system";import we from"@contractspec/lib.ui-link";import{ChevronRight as jt}from"lucide-react";import{jsx as r,jsxs as n}from"react/jsx-runtime";var ea=`import { defineDataView } from '@contractspec/lib.contracts-spec/data-views';
+const seo = new SeoOptimizer().optimize(brief);`})]}),ue("div",{className:"space-y-3",children:[G("h2",{className:"font-bold text-2xl",children:"When to use"}),ue("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[G("li",{children:"Ship landing page refreshes whenever specs change."}),G("li",{children:"Automate release emails + nurture sequences per vertical."}),G("li",{children:"Create social snippets that stay on-message with the same brief."}),G("li",{children:"Generate SEO metadata + Schema.org markup alongside content."})]})]}),ue("div",{className:"flex items-center gap-4 pt-4",children:[G(dt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),ue(dt,{href:"/docs/libraries/support-bot",className:"btn-primary",children:["Next: Support Bot ",G(Ca,{size:16})]})]})]})}import{CodeBlock as Aa,InstallCommand as La}from"@contractspec/lib.design-system";import _e from"@contractspec/lib.ui-link";import{ChevronRight as Ia}from"lucide-react";import{jsx as s,jsxs as l}from"react/jsx-runtime";var Pa=`import { defineDataView } from '@contractspec/lib.contracts-spec/data-views';
 import { ListDataGridShowcaseRowsQuery } from '@contractspec/example.data-grid-showcase/contracts/data-grid-showcase.operation';
 
 export const DataGridShowcaseDataView = defineDataView({
@@ -291,7 +379,7 @@ export const DataGridShowcaseDataView = defineDataView({
       { key: 'notes', label: 'Notes', dataPath: 'notes' },
     ],
   },
-});`;function ta(){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(xt,{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($t,{language:"typescript",code:ea}),n("p",{className:"text-muted-foreground text-sm",children:["See the live version in"," ",r(we,{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(we,{href:"/docs/libraries/schema",className:"btn-primary",children:["Next: Schema ",r(jt,{size:16})]}),r(we,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Core Concepts"})]})]})}import{CodeBlock as _e,InstallCommand as aa}from"@contractspec/lib.design-system";import Ve from"@contractspec/lib.ui-link";import{ChevronRight as oa}from"lucide-react";import{jsx as _,jsxs as K}from"react/jsx-runtime";function ia(){return K("div",{className:"space-y-8",children:[K("div",{className:"space-y-4",children:[_("h1",{className:"font-bold text-4xl",children:"Cost Tracking Library"}),K("p",{className:"text-lg text-muted-foreground",children:[_("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."]})]}),K("div",{className:"space-y-4",children:[_("h2",{className:"font-bold text-2xl",children:"Installation"}),_(aa,{package:"@contractspec/lib.cost-tracking"})]}),K("div",{className:"space-y-4",children:[_("h2",{className:"font-bold text-2xl",children:"Record Samples"}),_(_e,{language:"typescript",code:`const tracker = new CostTracker();
+});`;function Oa(){return l("div",{className:"space-y-8",children:[l("div",{className:"space-y-4",children:[s("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.contracts-spec"}),s("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."})]}),l("div",{className:"space-y-4",children:[s("h2",{className:"font-bold text-2xl",children:"Installation"}),s(La,{package:["@contractspec/lib.contracts-spec","@contractspec/lib.schema"]})]}),l("div",{className:"space-y-4",children:[s("h2",{className:"font-bold text-2xl",children:"What lives where"}),l("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[l("li",{children:[s("strong",{children:"@contractspec/lib.contracts-spec"})," (root): The core contracts definitions (OperationSpec, PresentationSpec, Registry)."]}),l("li",{children:[s("strong",{children:"@contractspec/lib.contracts-runtime-client-react"}),": Browser-safe helpers (React renderers, client SDK). Import this for web/React Native."]}),l("li",{children:[s("strong",{children:"@contractspec/lib.contracts-runtime-server-rest"}),": HTTP/MCP adapters, registries, integrations (Node-only)."]}),l("li",{children:[s("strong",{children:"@contractspec/lib.schema"}),": Schema dictionary (SchemaModel, FieldType) for I/O definitions."]})]})]}),l("div",{className:"space-y-4",children:[s("h2",{className:"font-bold text-2xl",children:"Data table contract example"}),l("p",{className:"text-muted-foreground",children:["The canonical account-grid example starts here in"," ",s("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."]}),s(Aa,{language:"typescript",code:Pa}),l("p",{className:"text-muted-foreground text-sm",children:["See the live version in"," ",s(_e,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"/docs/examples/data-grid-showcase"}),"."]})]}),l("div",{className:"space-y-4",children:[s("h2",{className:"font-bold text-2xl",children:"Core Concepts"}),l("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[l("li",{children:[s("strong",{children:"OperationSpec"}),": Immutable description of an operation (Command or Query). Defines I/O, policy, and metadata."]}),l("li",{children:[s("strong",{children:"OperationSpecRegistry"}),": Registry of specs + handlers. Use ",s("code",{className:"font-mono text-xs",children:"installOp"})," ","to attach a handler."]}),l("li",{children:[s("strong",{children:"CapabilitySpec"}),": Canonical capability declaration (requires/provides)."]}),l("li",{children:[s("strong",{children:"PolicySpec"}),": Declarative policy rules (ABAC/ReBAC, rate limits)."]}),l("li",{children:[s("strong",{children:"TelemetrySpec"}),": Analytics definitions and privacy levels."]}),l("li",{children:[s("strong",{children:"PresentationSpec (V2)"}),": Describes how data is rendered (Web Components, Markdown, Data)."]}),l("li",{children:[s("strong",{children:"DataViewSpec"}),": Declarative list, table, grid, and detail contracts that the table showcase uses as its canonical account-grid example."]})]})]}),l("div",{className:"space-y-4",children:[s("h2",{className:"font-bold text-2xl",children:"Lifecycle"}),l("ol",{className:"list-inside list-decimal space-y-2 text-muted-foreground",children:[l("li",{children:[s("strong",{children:"Define"})," the spec (I/O via SchemaModel or Zod)."]}),l("li",{children:[s("strong",{children:"Register"})," it:"," ",s("code",{className:"font-mono text-xs",children:"installOp(registry, spec, handler)"}),"."]}),l("li",{children:[s("strong",{children:"Expose"})," it via an adapter (REST, GraphQL, MCP)."]}),l("li",{children:[s("strong",{children:"Validate"})," at runtime automatically."]})]})]}),l("div",{className:"space-y-4",children:[s("h2",{className:"font-bold text-2xl",children:"Adapters"}),l("ul",{className:"space-y-2 text-muted-foreground",children:[l("li",{children:[s("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/rest-next-app"}),": Next.js App Router adapter"]}),l("li",{children:[s("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/provider-mcp"}),": Model Context Protocol (MCP) for AI agents"]}),l("li",{children:[s("code",{className:"rounded bg-background/50 px-2 py-1",children:"server/graphql-pothos"}),": GraphQL schema generator"]})]})]}),l("div",{className:"flex items-center gap-4 pt-4",children:[l(_e,{href:"/docs/libraries/schema",className:"btn-primary",children:["Next: Schema ",s(Ia,{size:16})]}),s(_e,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Core Concepts"})]})]})}import{CodeBlock as pt,InstallCommand as Da}from"@contractspec/lib.design-system";import mt from"@contractspec/lib.ui-link";import{ChevronRight as Ma}from"lucide-react";import{jsx as Q,jsxs as $}from"react/jsx-runtime";function Ea(){return $("div",{className:"space-y-8",children:[$("div",{className:"space-y-4",children:[Q("h1",{className:"font-bold text-4xl",children:"Cost Tracking Library"}),$("p",{className:"text-lg text-muted-foreground",children:[Q("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."]})]}),$("div",{className:"space-y-4",children:[Q("h2",{className:"font-bold text-2xl",children:"Installation"}),Q(Da,{package:"@contractspec/lib.cost-tracking"})]}),$("div",{className:"space-y-4",children:[Q("h2",{className:"font-bold text-2xl",children:"Record Samples"}),Q(pt,{language:"typescript",code:`const tracker = new CostTracker();
 tracker.recordSample({
   operation: 'orders.list',
   tenantId: 'acme',
@@ -299,12 +387,12 @@ tracker.recordSample({
   dbWrites: 4,
   computeMs: 180,
   externalCalls: [{ provider: 'stripe', cost: 0.02 }],
-});`})]}),K("div",{className:"space-y-4",children:[_("h2",{className:"font-bold text-2xl",children:"Budget Alerts"}),_(_e,{language:"typescript",code:`const budgets = new BudgetAlertManager({
+});`})]}),$("div",{className:"space-y-4",children:[Q("h2",{className:"font-bold text-2xl",children:"Budget Alerts"}),Q(pt,{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));`})]}),K("div",{className:"space-y-4",children:[_("h2",{className:"font-bold text-2xl",children:"Optimization Suggestions"}),K("p",{className:"text-muted-foreground text-sm",children:["Feed summaries into ",_("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."]})]}),K("div",{className:"flex items-center gap-4 pt-4",children:[_(Ve,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),K(Ve,{href:"/docs/libraries/slo",className:"btn-primary",children:["Next: SLO ",_(oa,{size:16})]})]})]})}var qe=[{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."}],He=[{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."}],Qe=[{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."}],Ke=[{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."}],Je=[{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"]}],Ze=["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."],Xe=["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 / .native.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."],Ye="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.",$e=`import { withPresentationTurbopackAliases } from '@contractspec/lib.presentation-runtime-core';
+tracker.getTotals({ tenantId: 'acme' }).forEach((summary) => budgets.track(summary));`})]}),$("div",{className:"space-y-4",children:[Q("h2",{className:"font-bold text-2xl",children:"Optimization Suggestions"}),$("p",{className:"text-muted-foreground text-sm",children:["Feed summaries into ",Q("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."]})]}),$("div",{className:"flex items-center gap-4 pt-4",children:[Q(mt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),$(mt,{href:"/docs/libraries/slo",className:"btn-primary",children:["Next: SLO ",Q(Ma,{size:16})]})]})]})}var ut=[{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."}],ht=[{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."}],gt=[{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."}],ft=[{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."}],bt=[{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"]}],vt=["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."],yt=["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 / .native.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."],Nt="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.",wt=`import { withPresentationTurbopackAliases } from '@contractspec/lib.presentation-runtime-core';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = withPresentationTurbopackAliases({
@@ -315,14 +403,14 @@ const nextConfig = withPresentationTurbopackAliases({
   },
 });
 
-export default nextConfig;`,xe=`import { withPresentationWebpackAliases } from '@contractspec/lib.presentation-runtime-core';
+export default nextConfig;`,kt=`import { withPresentationWebpackAliases } from '@contractspec/lib.presentation-runtime-core';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   webpack: (config) => withPresentationWebpackAliases(config),
 };
 
-export default nextConfig;`,je=`const { getDefaultConfig } = require('expo/metro-config');
+export default nextConfig;`,St=`const { getDefaultConfig } = require('expo/metro-config');
 const {
   withPresentationMetroAliases,
 } = require('@contractspec/lib.presentation-runtime-core');
@@ -330,8 +418,8 @@ const {
 const projectRoot = __dirname;
 const config = getDefaultConfig(projectRoot);
 
-module.exports = withPresentationMetroAliases(config);`,et=["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(`
-`),tt=`import { Box, HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+module.exports = withPresentationMetroAliases(config);`,Rt=["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(`
+`),Ct=`import { Box, HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
 
 export function AccountSummaryHeader() {
   return (
@@ -352,7 +440,7 @@ export function AccountSummaryHeader() {
 // @contractspec/lib.ui-kit/ui/stack
 //
 // On web-only pages, VStack / HStack / Box also support:
-// <VStack as="section">...</VStack>`,at=`import { DataTable as DesignSystemTable } from '@contractspec/lib.design-system';
+// <VStack as="section">...</VStack>`,Tt=`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';
@@ -388,7 +476,7 @@ export function ProductAccounts({ controller }) {
 }
 
 // If the table is spec-driven instead of hand-authored,
-// swap useContractTable for useDataViewTable.`,ot="# 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` / `.native.tsx` pairs as the standard design-system compatibility boundary.",it="# 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` / `.native.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 oe}from"@contractspec/lib.design-system";import ue from"@contractspec/lib.ui-link";import{ChevronRight as ra}from"lucide-react";import{jsx as t,jsxs as f}from"react/jsx-runtime";function na(){return f("div",{className:"space-y-8",children:[f("div",{className:"space-y-4",children:[t("h1",{className:"font-bold text-4xl",children:"Cross-platform UI"}),t("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."})]}),f("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"What cross-platform means here"}),t("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."}),t("div",{className:"grid gap-4 md:grid-cols-2",children:qe.map((e)=>f("div",{className:"rounded-[20px] border border-border/70 p-4",children:[t("h3",{className:"font-semibold text-base",children:e.title}),t("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:e.body})]},e.title))}),t("div",{className:"grid gap-4 md:grid-cols-3",children:He.map((e)=>f("div",{className:"card-subtle p-4",children:[t("h3",{className:"font-semibold",children:e.title}),t("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:e.body})]},e.title))}),f("div",{className:"grid gap-4 lg:grid-cols-[1.1fr_0.9fr]",children:[t("div",{className:"grid gap-4 md:grid-cols-2",children:Ke.map((e)=>f("div",{className:"card-subtle p-4",children:[t("h3",{className:"font-semibold",children:e.title}),t("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:e.body})]},e.title))}),t(oe,{language:"typescript",filename:"design-system-platform.ts",code:et})]})]}),f("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Resolver and alias setup"}),f("p",{className:"text-muted-foreground",children:["Teach the bundler what \u201Cweb\u201D and \u201Cnative\u201D mean before you try to share component code. These helpers are public from the root",t("code",{children:" @contractspec/lib.presentation-runtime-core "}),"entrypoint."]}),t("div",{className:"grid gap-4 md:grid-cols-2",children:Qe.map((e)=>f("div",{className:"card-subtle p-4",children:[t("h3",{className:"font-semibold",children:e.title}),t("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:e.body})]},e.title))}),f("div",{className:"grid gap-4 xl:grid-cols-3",children:[t(oe,{language:"typescript",filename:"next.config.mjs",code:$e}),t(oe,{language:"typescript",filename:"next.config.mjs",code:xe}),t(oe,{language:"javascript",filename:"metro.config.js",code:je})]})]}),f("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"How the remapping works"}),t("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."}),t("div",{className:"grid gap-4 xl:grid-cols-3",children:Je.map((e)=>f("div",{className:"card-subtle p-4",children:[t("h3",{className:"font-semibold",children:e.title}),t("ul",{className:"mt-2 space-y-2 text-muted-foreground text-sm leading-7",children:e.items.map((S)=>t("li",{children:S},S))})]},e.title))})]}),f("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Layout primitives"}),f("p",{className:"text-muted-foreground",children:[t("code",{children:"VStack"}),", ",t("code",{children:"HStack"}),", and ",t("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."]}),t("div",{className:"grid gap-4 md:grid-cols-2",children:Ze.map((e)=>t("div",{className:"card-subtle p-4 text-muted-foreground text-sm leading-7",children:e},e))}),t(oe,{language:"tsx",filename:"stack-layout.tsx",code:tt})]}),f("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Rendering patterns"}),t("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."}),t(oe,{language:"tsx",filename:"cross-platform-rendering.tsx",code:at}),f("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"," ",t("code",{children:"DataViewRenderer"}),", ",t("code",{children:"ListTablePage"}),", and"," ",t("code",{children:"DataTable"}),". The web and mobile files stay separate inside the package while your app imports one design-system boundary."]})]}),f("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Gotchas and boundaries"}),t("ul",{className:"space-y-2 text-muted-foreground leading-7",children:Xe.map((e)=>t("li",{children:e},e))})]}),f("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Customer markdown kit"}),t("p",{className:"text-muted-foreground",children:Ye}),f("div",{className:"grid gap-4 xl:grid-cols-2",children:[t(oe,{language:"markdown",filename:"cross-surface-policy.md",code:ot}),t(oe,{language:"markdown",filename:"cross-surface-checklist.md",code:it})]})]}),f("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[t(ue,{href:"/docs/libraries/runtime",className:"btn-ghost",children:"Runtime libraries"}),t(ue,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"UI Kit"}),t(ue,{href:"/docs/libraries/ui-kit-web",className:"btn-ghost",children:"UI Kit Web"}),f(ue,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Design System ",t(ra,{size:16})]})]})]})}import{CodeBlock as ca}from"@contractspec/lib.design-system";import rt from"@contractspec/lib.ui-link";import{ChevronRight as sa}from"lucide-react";import{jsx as w,jsxs as k}from"react/jsx-runtime";function la(){return k("div",{className:"space-y-8",children:[k("div",{className:"space-y-4",children:[w("h1",{className:"font-bold text-4xl",children:"Data & Backend"}),w("p",{className:"text-muted-foreground",children:"A collection of robust, platform-agnostic libraries for building the backend infrastructure of your LSSM applications."})]}),k("div",{className:"space-y-4",children:[w("h2",{className:"font-bold text-2xl",children:"Libraries"}),k("div",{className:"space-y-6",children:[k("div",{className:"card-subtle p-6",children:[w("h3",{className:"font-bold text-lg",children:"@contractspec/app.cli-database"}),k("p",{className:"mt-2 text-muted-foreground text-sm",children:[w("strong",{children:"Prisma Wrapper & CLI"}),". Provides a unified way to manage database schemas, migrations, and clients. Includes seeders and factory patterns for testing."]})]}),k("div",{className:"card-subtle p-6",children:[w("h3",{className:"font-bold text-lg",children:"@contractspec/lib.bus"}),k("p",{className:"mt-2 text-muted-foreground text-sm",children:[w("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)."]})]}),k("div",{className:"card-subtle p-6",children:[w("h3",{className:"font-bold text-lg",children:"@contractspec/lib.logger"}),k("p",{className:"mt-2 text-muted-foreground text-sm",children:[w("strong",{children:"High-Performance Logging"}),". Optimized for Bun and structured JSON output. Includes plugins for ElysiaJS to log HTTP requests automatically."]})]}),k("div",{className:"card-subtle p-6",children:[w("h3",{className:"font-bold text-lg",children:"@contractspec/lib.error"}),k("p",{className:"mt-2 text-muted-foreground text-sm",children:[w("strong",{children:"Standardized Errors"}),". Use `AppError` with standard codes (NOT_FOUND, UNAUTHORIZED) to ensure consistent HTTP responses and error handling across services."]})]}),k("div",{className:"card-subtle p-6",children:[w("h3",{className:"font-bold text-lg",children:"@contractspec/lib.exporter"}),k("p",{className:"mt-2 text-muted-foreground text-sm",children:[w("strong",{children:"Data Export"}),". Generate CSV and XML files from your data. Platform-agnostic and streaming-friendly."]})]})]})]}),k("div",{className:"space-y-4",children:[w("h2",{className:"font-bold text-2xl",children:"Example: Unified Backend Flow"}),w(ca,{language:"typescript",code:`import { logger } from '@contractspec/lib.logger';
+// swap useContractTable for useDataViewTable.`,At="# 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` / `.native.tsx` pairs as the standard design-system compatibility boundary.",Lt="# 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` / `.native.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 he}from"@contractspec/lib.design-system";import Ee from"@contractspec/lib.ui-link";import{ChevronRight as Ba}from"lucide-react";import{jsx as i,jsxs as N}from"react/jsx-runtime";function Ua(){return N("div",{className:"space-y-8",children:[N("div",{className:"space-y-4",children:[i("h1",{className:"font-bold text-4xl",children:"Cross-platform UI"}),i("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."})]}),N("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"What cross-platform means here"}),i("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."}),i("div",{className:"grid gap-4 md:grid-cols-2",children:ut.map((a)=>N("div",{className:"rounded-[20px] border border-border/70 p-4",children:[i("h3",{className:"font-semibold text-base",children:a.title}),i("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:a.body})]},a.title))}),i("div",{className:"grid gap-4 md:grid-cols-3",children:ht.map((a)=>N("div",{className:"card-subtle p-4",children:[i("h3",{className:"font-semibold",children:a.title}),i("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:a.body})]},a.title))}),N("div",{className:"grid gap-4 lg:grid-cols-[1.1fr_0.9fr]",children:[i("div",{className:"grid gap-4 md:grid-cols-2",children:ft.map((a)=>N("div",{className:"card-subtle p-4",children:[i("h3",{className:"font-semibold",children:a.title}),i("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:a.body})]},a.title))}),i(he,{language:"typescript",filename:"design-system-platform.ts",code:Rt})]})]}),N("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"Resolver and alias setup"}),N("p",{className:"text-muted-foreground",children:["Teach the bundler what \u201Cweb\u201D and \u201Cnative\u201D mean before you try to share component code. These helpers are public from the root",i("code",{children:" @contractspec/lib.presentation-runtime-core "}),"entrypoint."]}),i("div",{className:"grid gap-4 md:grid-cols-2",children:gt.map((a)=>N("div",{className:"card-subtle p-4",children:[i("h3",{className:"font-semibold",children:a.title}),i("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:a.body})]},a.title))}),N("div",{className:"grid gap-4 xl:grid-cols-3",children:[i(he,{language:"typescript",filename:"next.config.mjs",code:wt}),i(he,{language:"typescript",filename:"next.config.mjs",code:kt}),i(he,{language:"javascript",filename:"metro.config.js",code:St})]})]}),N("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"How the remapping works"}),i("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."}),i("div",{className:"grid gap-4 xl:grid-cols-3",children:bt.map((a)=>N("div",{className:"card-subtle p-4",children:[i("h3",{className:"font-semibold",children:a.title}),i("ul",{className:"mt-2 space-y-2 text-muted-foreground text-sm leading-7",children:a.items.map((A)=>i("li",{children:A},A))})]},a.title))})]}),N("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"Layout primitives"}),N("p",{className:"text-muted-foreground",children:[i("code",{children:"VStack"}),", ",i("code",{children:"HStack"}),", and ",i("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."]}),i("div",{className:"grid gap-4 md:grid-cols-2",children:vt.map((a)=>i("div",{className:"card-subtle p-4 text-muted-foreground text-sm leading-7",children:a},a))}),i(he,{language:"tsx",filename:"stack-layout.tsx",code:Ct})]}),N("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"Rendering patterns"}),i("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."}),i(he,{language:"tsx",filename:"cross-platform-rendering.tsx",code:Tt}),N("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"," ",i("code",{children:"DataViewRenderer"}),", ",i("code",{children:"ListTablePage"}),", and"," ",i("code",{children:"DataTable"}),". The web and mobile files stay separate inside the package while your app imports one design-system boundary."]})]}),N("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"Gotchas and boundaries"}),i("ul",{className:"space-y-2 text-muted-foreground leading-7",children:yt.map((a)=>i("li",{children:a},a))})]}),N("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"Customer markdown kit"}),i("p",{className:"text-muted-foreground",children:Nt}),N("div",{className:"grid gap-4 xl:grid-cols-2",children:[i(he,{language:"markdown",filename:"cross-surface-policy.md",code:At}),i(he,{language:"markdown",filename:"cross-surface-checklist.md",code:Lt})]})]}),N("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[i(Ee,{href:"/docs/libraries/runtime",className:"btn-ghost",children:"Runtime libraries"}),i(Ee,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"UI Kit"}),i(Ee,{href:"/docs/libraries/ui-kit-web",className:"btn-ghost",children:"UI Kit Web"}),N(Ee,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Design System ",i(Ba,{size:16})]})]})]})}import{CodeBlock as Wa}from"@contractspec/lib.design-system";import It from"@contractspec/lib.ui-link";import{ChevronRight as za}from"lucide-react";import{jsx as R,jsxs as C}from"react/jsx-runtime";function Ga(){return C("div",{className:"space-y-8",children:[C("div",{className:"space-y-4",children:[R("h1",{className:"font-bold text-4xl",children:"Data & Backend"}),R("p",{className:"text-muted-foreground",children:"A collection of robust, platform-agnostic libraries for building the backend infrastructure of your LSSM applications."})]}),C("div",{className:"space-y-4",children:[R("h2",{className:"font-bold text-2xl",children:"Libraries"}),C("div",{className:"space-y-6",children:[C("div",{className:"card-subtle p-6",children:[R("h3",{className:"font-bold text-lg",children:"@contractspec/app.cli-database"}),C("p",{className:"mt-2 text-muted-foreground text-sm",children:[R("strong",{children:"Prisma Wrapper & CLI"}),". Provides a unified way to manage database schemas, migrations, and clients. Includes seeders and factory patterns for testing."]})]}),C("div",{className:"card-subtle p-6",children:[R("h3",{className:"font-bold text-lg",children:"@contractspec/lib.bus"}),C("p",{className:"mt-2 text-muted-foreground text-sm",children:[R("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)."]})]}),C("div",{className:"card-subtle p-6",children:[R("h3",{className:"font-bold text-lg",children:"@contractspec/lib.logger"}),C("p",{className:"mt-2 text-muted-foreground text-sm",children:[R("strong",{children:"High-Performance Logging"}),". Optimized for Bun and structured JSON output. Includes plugins for ElysiaJS to log HTTP requests automatically."]})]}),C("div",{className:"card-subtle p-6",children:[R("h3",{className:"font-bold text-lg",children:"@contractspec/lib.error"}),C("p",{className:"mt-2 text-muted-foreground text-sm",children:[R("strong",{children:"Standardized Errors"}),". Use `AppError` with standard codes (NOT_FOUND, UNAUTHORIZED) to ensure consistent HTTP responses and error handling across services."]})]}),C("div",{className:"card-subtle p-6",children:[R("h3",{className:"font-bold text-lg",children:"@contractspec/lib.exporter"}),C("p",{className:"mt-2 text-muted-foreground text-sm",children:[R("strong",{children:"Data Export"}),". Generate CSV and XML files from your data. Platform-agnostic and streaming-friendly."]})]})]})]}),C("div",{className:"space-y-4",children:[R("h2",{className:"font-bold text-2xl",children:"Example: Unified Backend Flow"}),R(Wa,{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';
@@ -406,7 +494,124 @@ export async function createUser(email: string) {
   await EventBus.publish('user.created', { userId: user.id });
   
   return user;
-}`})]}),k("div",{className:"flex items-center gap-4 pt-4",children:[k(rt,{href:"/docs/libraries/runtime",className:"btn-primary",children:["Next: Runtime ",w(sa,{size:16})]}),w(rt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"})]})]})}import{CodeBlock as nt,InstallCommand as da}from"@contractspec/lib.design-system";import ct from"@contractspec/lib.ui-link";import{ChevronRight as pa}from"lucide-react";import{jsx as c,jsxs as N}from"react/jsx-runtime";function ma(){return N("div",{className:"space-y-8",children:[N("div",{className:"space-y-4",children:[c("h1",{className:"font-bold text-4xl",children:"DataViews Runtime Library"}),N("p",{className:"text-lg text-muted-foreground",children:["The ",c("code",{children:"@contractspec/lib.contracts-spec/data-views"})," and"," ",c("code",{children:"@contractspec/lib.design-system"})," libraries provide the runtime logic and UI components to render DataViews in your application."]})]}),N("div",{className:"space-y-4",children:[c("h2",{className:"font-bold text-2xl",children:"Installation"}),c(da,{package:["@contractspec/lib.contracts-spec","@contractspec/lib.design-system"]})]}),N("div",{className:"space-y-4",children:[c("h2",{className:"font-bold text-2xl",children:"DataViewRenderer"}),c("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."}),c(nt,{language:"tsx",code:`import { DataViewRenderer } from '@contractspec/lib.design-system';
+}`})]}),C("div",{className:"flex items-center gap-4 pt-4",children:[C(It,{href:"/docs/libraries/runtime",className:"btn-primary",children:["Next: Runtime ",R(za,{size:16})]}),R(It,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"})]})]})}import{CodeBlock as Pe,InstallCommand as Fa}from"@contractspec/lib.design-system";import{HStack as _a,VStack as ge}from"@contractspec/lib.design-system/layout";import{List as qa,ListItem as oe}from"@contractspec/lib.design-system/list";import{Code as d,H1 as Ha,H2 as Ce,H3 as Ka,P as Te,Text as J}from"@contractspec/lib.design-system/typography";import qe from"@contractspec/lib.ui-link";import{ChevronRight as Qa}from"lucide-react";import{jsx as t,jsxs as g}from"react/jsx-runtime";var Ja=`import { defineDataView } from '@contractspec/lib.contracts-spec/data-views';
+
+export const AccountsDataView = defineDataView({
+  meta: {
+    key: 'crm.accounts',
+    version: '1.0.0',
+    title: 'Accounts',
+    description: 'Customer account workspace',
+    domain: 'crm',
+    entity: 'account',
+    owners: ['@crm'],
+    tags: ['crm', 'accounts'],
+    stability: 'stable',
+  },
+  source: {
+    primary: { key: 'crm.accounts.list', version: '1.0.0' },
+  },
+  view: {
+    kind: 'table',
+    fields: [
+      { key: 'name', label: 'Name', dataPath: 'name', sortable: true },
+      { key: 'owner', label: 'Owner', dataPath: 'owner' },
+      { key: 'arr', label: 'ARR', dataPath: 'arr', format: { type: 'currency', currency: 'EUR' } },
+      {
+        key: 'internalNotes',
+        label: 'Internal notes',
+        dataPath: 'internalNotes',
+        visibility: { minDataDepth: 'detailed' },
+      },
+    ],
+    columns: [
+      { field: 'name' },
+      { field: 'owner' },
+      { field: 'arr' },
+      { field: 'internalNotes' },
+    ],
+    collection: {
+      viewModes: {
+        defaultMode: 'table',
+        allowedModes: ['list', 'grid', 'table'],
+      },
+      pagination: {
+        pageSize: 25,
+        pageSizeOptions: [10, 25, 50],
+      },
+      toolbar: {
+        search: true,
+        viewMode: true,
+        filters: true,
+        density: true,
+        dataDepth: true,
+      },
+      density: 'comfortable',
+      dataDepth: 'standard',
+      personalization: {
+        enabled: true,
+        persist: {
+          viewMode: true,
+          density: true,
+          dataDepth: true,
+          pageSize: true,
+        },
+      },
+    },
+  },
+});`,Za=`import { DataViewRenderer } from '@contractspec/lib.design-system';
+import { resolveDataViewPreferences } from '@contractspec/lib.personalization/data-view-preferences';
+
+const resolved = resolveDataViewPreferences({
+  spec: AccountsDataView,
+  preferences: profile.canonical,
+  insights,
+  record: savedDataViewPreference,
+});
+
+<DataViewRenderer
+  spec={AccountsDataView}
+  items={accounts}
+  defaultViewMode={resolved.viewMode}
+  defaultDensity={resolved.density}
+  defaultDataDepth={resolved.dataDepth}
+  pagination={{
+    page,
+    pageSize: resolved.pageSize ?? 25,
+    total,
+  }}
+  onViewModeChange={(viewMode) => {
+    tracker.trackDataViewInteraction({
+      dataViewKey: AccountsDataView.meta.key,
+      dataViewVersion: AccountsDataView.meta.version,
+      action: 'view_mode_changed',
+      viewMode,
+    });
+  }}
+  onDensityChange={(density) => {
+    tracker.trackDataViewInteraction({
+      dataViewKey: AccountsDataView.meta.key,
+      action: 'density_changed',
+      density,
+    });
+  }}
+  onDataDepthChange={(dataDepth) => {
+    tracker.trackDataViewInteraction({
+      dataViewKey: AccountsDataView.meta.key,
+      action: 'data_depth_changed',
+      dataDepth,
+    });
+  }}
+/>;
+`,Va=`Implement a production DataView for <entity>.
+
+Requirements:
+- Define one canonical DataViewSpec with kind 'table', collection viewModes for list/grid/table, pagination defaults, toolbar search/filter/view mode/density/dataDepth controls, and personalization persist hints.
+- Mark fields that should only appear in richer experiences with visibility.minDataDepth.
+- Render it with DataViewRenderer using plain props from resolveDataViewPreferences.
+- Track user interactions with trackDataViewInteraction for view mode, density, data depth, search, filters, sorting, and pagination.
+- Keep @contractspec/lib.design-system independent from @contractspec/lib.personalization.
+- Add focused tests for default resolution, invalid-mode fallback, data-depth projection, and behavior-derived preferred view mode.`;function Ya(){return g(ge,{className:"space-y-8",children:[g(ge,{className:"space-y-4",children:[t(Ha,{className:"font-bold text-4xl",children:"DataViews Runtime Library"}),g(Te,{className:"text-lg text-muted-foreground",children:["The ",t(d,{children:"@contractspec/lib.contracts-spec/data-views"})," and"," ",t(d,{children:"@contractspec/lib.design-system"})," libraries provide the runtime logic and UI components to render DataViews in your application."]})]}),g(ge,{className:"space-y-4",children:[t(Ce,{className:"font-bold text-2xl",children:"Installation"}),t(Fa,{package:["@contractspec/lib.contracts-spec","@contractspec/lib.design-system"]})]}),g(ge,{className:"space-y-4",children:[t(Ce,{className:"font-bold text-2xl",children:"DataViewRenderer"}),t(Te,{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."}),t(Pe,{language:"tsx",code:`import { DataViewRenderer } from '@contractspec/lib.design-system';
 import { MyUserList } from './specs/users.data-view';
 
 export function UserPage() {
@@ -418,7 +623,7 @@ export function UserPage() {
       onPageChange={(page) => fetchPage(page)}
     />
   );
-}`}),c("h3",{className:"font-semibold text-xl",children:"Props"}),N("ul",{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:[N("li",{children:[c("code",{children:"spec"}),": The DataViewSpec definition."]}),N("li",{children:[c("code",{children:"items"}),": Array of data items to render."]}),N("li",{children:[c("code",{children:"filters"}),": Current filter state object."]}),N("li",{children:[c("code",{children:"onFilterChange"}),": Callback when typed filters change. Renderers emit ",c("code",{children:"DataViewFilterValue"})," objects for numeric, percent, currency, temporal, duration, and boolean filters."]}),N("li",{children:[c("code",{children:"pagination"}),": Object with ",c("code",{children:"page"}),","," ",c("code",{children:"pageSize"}),", ",c("code",{children:"total"}),"."]}),N("li",{children:[c("code",{children:"onPageChange"}),": Callback when page changes."]}),N("li",{children:[c("code",{children:"viewMode"})," / ",c("code",{children:"defaultViewMode"}),": Controlled or initial collection mode for specs that allow ",c("code",{children:"list"}),","," ",c("code",{children:"grid"}),", or ",c("code",{children:"table"})," projections through"," ",c("code",{children:"view.collection.viewModes"}),"."]}),N("li",{children:[c("code",{children:"density"})," / ",c("code",{children:"defaultDensity"}),": Controlled or initial density for collection renderers, seeded by"," ",c("code",{children:"view.collection.density"})," and table"," ",c("code",{children:"view.density"}),"."]})]})]}),N("div",{className:"space-y-4",children:[c("h2",{className:"font-bold text-2xl",children:"Query Generation"}),N("p",{className:"text-muted-foreground",children:["The ",c("code",{children:"DataViewQueryGenerator"})," utility helps translate DataView parameters (filters, sorting, pagination) into query arguments for your backend."]}),c(nt,{language:"typescript",code:`import { DataViewQueryGenerator } from '@contractspec/lib.contracts-spec/data-views/query-generator';
+}`}),t(Ka,{className:"font-semibold text-xl",children:"Props"}),g(qa,{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:[t(oe,{children:g(J,{children:[t(d,{children:"spec"}),": The DataViewSpec definition."]})}),t(oe,{children:g(J,{children:[t(d,{children:"items"}),": Array of data items to render."]})}),t(oe,{children:g(J,{children:[t(d,{children:"filters"}),": Current filter state object."]})}),t(oe,{children:g(J,{children:[t(d,{children:"onFilterChange"}),": Callback when typed filters change. Renderers emit ",t(d,{children:"DataViewFilterValue"})," objects for numeric, percent, currency, temporal, duration, and boolean filters."]})}),t(oe,{children:g(J,{children:[t(d,{children:"pagination"}),": Object with ",t(d,{children:"page"}),","," ",t(d,{children:"pageSize"}),", ",t(d,{children:"total"}),"."]})}),t(oe,{children:g(J,{children:[t(d,{children:"onPageChange"}),": Callback when page changes."]})}),t(oe,{children:g(J,{children:[t(d,{children:"viewMode"})," / ",t(d,{children:"defaultViewMode"}),": Controlled or initial collection mode for specs that allow ",t(d,{children:"list"}),","," ",t(d,{children:"grid"}),", or ",t(d,{children:"table"})," projections through"," ",t(d,{children:"view.collection.viewModes"}),"."]})}),t(oe,{children:g(J,{children:[t(d,{children:"density"})," / ",t(d,{children:"defaultDensity"}),": Controlled or initial density for collection renderers. Host apps can seed this from ",t(d,{children:"@contractspec/lib.personalization"})," while specs can declare ",t(d,{children:"view.collection.density"})," and table"," ",t(d,{children:"view.density"})," defaults."]})}),t(oe,{children:g(J,{children:[t(d,{children:"dataDepth"})," / ",t(d,{children:"defaultDataDepth"}),": Controlled or initial summary/standard/detailed/exhaustive projection. Fields can declare ",t(d,{children:"visibility.minDataDepth"}),", and collection specs can opt into ",t(d,{children:"view.collection.personalization"})," ","persistence hints."]})})]})]}),g(ge,{className:"space-y-4",children:[t(Ce,{className:"font-bold text-2xl",children:"Collection Defaults And Data Depth"}),g(Te,{className:"text-muted-foreground",children:["Use one authored ",t(d,{children:"DataViewSpec"})," for list, grid, and table experiences. ",t(d,{children:"view.collection"})," declares allowed modes, toolbar controls, pagination defaults, density, data depth, and persistence hints. ",t(d,{children:"visibility.minDataDepth"})," lets a field appear only when the renderer is in a detailed or exhaustive mode."]}),t(Pe,{language:"typescript",code:Ja})]}),g(ge,{className:"space-y-4",children:[t(Ce,{className:"font-bold text-2xl",children:"Personalization Bridge"}),g(Te,{className:"text-muted-foreground",children:["Resolve user preferences in the host app, then pass ordinary renderer props into ",t(d,{children:"DataViewRenderer"}),". The bridge helper lives in"," ",t(d,{children:"@contractspec/lib.personalization"}),", so the design-system renderer stays portable for apps that do not use personalization. See the"," ",t(qe,{href:"/docs/libraries/personalization",className:"text-[color:var(--rust)] underline underline-offset-4",children:t(J,{children:"personalization library guide"})})," ","for the behavior tracker, analyzer, and DataView preference resolver."]}),t(Pe,{language:"tsx",code:Za})]}),g(ge,{className:"space-y-4",children:[t(Ce,{className:"font-bold text-2xl",children:"Agent Prompt"}),t(Te,{className:"text-muted-foreground",children:"Use this prompt when asking an implementation agent to add a preference-aware collection DataView without breaking package boundaries."}),t(Pe,{language:"markdown",code:Va})]}),g(ge,{className:"space-y-4",children:[t(Ce,{className:"font-bold text-2xl",children:"Query Generation"}),g(Te,{className:"text-muted-foreground",children:["The ",t(d,{children:"DataViewQueryGenerator"})," utility helps translate DataView parameters (filters, sorting, pagination) into query arguments for your backend."]}),t(Pe,{language:"typescript",code:`import { DataViewQueryGenerator } from '@contractspec/lib.contracts-spec/data-views/query-generator';
 
 const generator = new DataViewQueryGenerator(MyUserList);
 const params = {
@@ -433,7 +638,7 @@ const params = {
 const errors = generator.validateParams(params);
 const query = generator.generate(params);
 
-// query.input contains skip/take plus the typed filter payloads.`})]}),N("div",{className:"flex items-center gap-4 pt-4",children:[c(ct,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),N(ct,{href:"/docs/libraries/data-backend",className:"btn-primary",children:["Next: Data & Backend ",c(pa,{size:16})]})]})]})}import{CodeBlock as ke,InstallCommand as ua}from"@contractspec/lib.design-system";import me from"@contractspec/lib.ui-link";import{ChevronRight as ga}from"lucide-react";import{jsx as a,jsxs as s}from"react/jsx-runtime";var ha=`import { Button, DataTable } from '@contractspec/lib.design-system';
+// query.input contains skip/take plus the typed filter payloads.`})]}),g(_a,{className:"items-center gap-4 pt-4",children:[t(qe,{href:"/docs/libraries",className:"btn-ghost",children:t(J,{children:"Back to Libraries"})}),g(qe,{href:"/docs/libraries/data-backend",className:"btn-primary",children:[t(J,{children:"Next: Data & Backend"})," ",t(Qa,{size:16})]})]})]})}import{CodeBlock as Ae,InstallCommand as Xa}from"@contractspec/lib.design-system";import Oe from"@contractspec/lib.ui-link";import{ChevronRight as $a}from"lucide-react";import{jsx as e,jsxs as o}from"react/jsx-runtime";var xa=`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';
@@ -481,7 +686,7 @@ export function AccountHealthTable() {
       footer={\`Page \${controller.pageIndex + 1} of \${controller.pageCount}\`}
     />
   );
-}`,fa=`import {
+}`,ja=`import {
   DesignSystemThemeProvider,
   resolveThemeModeTokens,
   themeSpecToCssVariables,
@@ -511,13 +716,112 @@ export function TenantSurface({ children }: { children: React.ReactNode }) {
       {children}
     </DesignSystemThemeProvider>
   );
-}`,ba=`import { themeSpecToTailwindPreset } from '@contractspec/lib.design-system/theme';
+}`,eo=`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';
+import { AdaptivePanel } from '@contractspec/lib.design-system/components/overlays';
+import { ObjectReferenceHandler } from '@contractspec/lib.design-system/components/object-reference';
 
 // Root imports remain supported:
-import { Button, DataTable } from '@contractspec/lib.design-system';`;function va(){return s("div",{className:"space-y-8",children:[s("div",{className:"space-y-4",children:[a("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.design-system"}),s("p",{className:"text-muted-foreground",children:["High-level design system components, patterns, and layouts for LSSM applications. Built on top of ",a("code",{children:"@contractspec/lib.ui-kit"}),"."]})]}),s("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Installation"}),a(ua,{package:"@contractspec/lib.design-system"})]}),s("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"What It Provides"}),s("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[s("li",{children:[a("strong",{children:"Composite Components"}),": Molecules and Organisms that solve common UI problems"]}),s("li",{children:[a("strong",{children:"Layouts"}),": Ready-to-use page structures for dashboards, marketing sites, and lists"]}),s("li",{children:[a("strong",{children:"Data Views"}),": Standardized renderers for lists, tables, and detail views"]}),s("li",{children:[a("strong",{children:"Forms"}),": Zod-integrated form layouts and components"]}),s("li",{children:[a("strong",{children:"Code Display"}),": Syntax-highlighted code blocks with package manager tabs"]}),s("li",{children:[a("strong",{children:"Platform Utilities"}),": Hooks for responsive and adaptive design"]}),s("li",{children:[a("strong",{children:"Theme Bridge"}),": ThemeSpec to Tailwind variables, presets, CSS text, and runtime light/dark mode"]}),s("li",{children:[a("strong",{children:"Legal Templates"}),": Compliant templates for Terms, Privacy, and GDPR"]})]})]}),s("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"ThemeSpec to Tailwind"}),s("p",{className:"text-muted-foreground",children:["The theme bridge keeps ",a("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."]}),a(ke,{language:"tsx",code:fa})]}),s("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Focused import surfaces"}),a("p",{className:"text-muted-foreground",children:"New code can use focused subpaths for theme, controls, forms, and layout while existing root imports remain compatible."}),a(ke,{language:"tsx",code:ba})]}),s("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Data table example"}),s("p",{className:"text-muted-foreground",children:["This is the composed lane from the canonical"," ",a(me,{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."]}),a(ke,{language:"tsx",code:ha})]}),s("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Key Exports"}),s("div",{className:"grid gap-4 md:grid-cols-2",children:[s("div",{className:"card-subtle p-4",children:[a("h3",{className:"mb-2 font-semibold",children:"Organisms"}),s("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[a("li",{children:"AppShell, PageOutline"}),a("li",{children:"AppLayout, AppHeader, AppSidebar"}),a("li",{children:"MarketingLayout, HeroSection"}),a("li",{children:"ListCardPage, ListTablePage"})]})]}),s("div",{className:"card-subtle p-4",children:[a("h3",{className:"mb-2 font-semibold",children:"Data & Forms"}),s("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[a("li",{children:"DataTable"}),a("li",{children:"DataViewTable"}),a("li",{children:"DataViewRenderer"}),a("li",{children:"ZodForm"}),a("li",{children:"FormLayout, FormDialog"})]})]}),s("div",{className:"card-subtle p-4",children:[a("h3",{className:"mb-2 font-semibold",children:"Code Display"}),s("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[a("li",{children:"CodeBlock (syntax highlighting)"}),a("li",{children:"CommandTabs (package manager tabs)"}),a("li",{children:"InstallCommand (convenience wrapper)"}),a("li",{children:"CopyButton"})]})]}),s("div",{className:"card-subtle p-4",children:[a("h3",{className:"mb-2 font-semibold",children:"Providers"}),a("ul",{className:"space-y-1 text-muted-foreground text-sm",children:a("li",{children:"PackageManagerProvider"})})]})]})]}),s("div",{className:"card-subtle space-y-3 p-6",children:[a("h2",{className:"font-bold text-2xl",children:"Where this layer fits"}),s("p",{className:"text-muted-foreground",children:["Read"," ",a(me,{href:"/docs/libraries/application-shell",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Application shell"})," ","for the shared sidebar, topbar, command search, mobile navigation, and"," ",a("code",{children:"PageOutline"})," pattern. Read"," ",a(me,{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."]})]}),s("div",{className:"flex items-center gap-4 pt-4",children:[a(me,{href:"/docs/libraries/ui-kit-web",className:"btn-ghost",children:"Previous: UI Kit Web"}),s(me,{href:"/docs/libraries/accessibility",className:"btn-primary",children:["Next: Accessibility ",a(ga,{size:16})]})]})]})}import{CodeBlock as Se,InstallCommand as ya}from"@contractspec/lib.design-system";import st from"@contractspec/lib.ui-link";import{ChevronRight as Na}from"lucide-react";import{jsx as L,jsxs as $}from"react/jsx-runtime";function wa(){return $("div",{className:"space-y-8",children:[$("div",{className:"space-y-4",children:[L("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.evolution"}),L("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."})]}),$("div",{className:"space-y-4",children:[L("h2",{className:"font-bold text-2xl",children:"Installation"}),L(ya,{package:"@contractspec/lib.evolution"})]}),$("div",{className:"space-y-3",children:[L("h2",{className:"font-bold text-2xl",children:"From telemetry to intent"}),L(Se,{language:"typescript",code:`import { SpecAnalyzer } from '@contractspec/lib.evolution/analyzer';
+import { Button, DataTable } from '@contractspec/lib.design-system';`,to=`import {
+  ObjectReferenceHandler,
+  createDefaultObjectReferenceActions,
+  createMapsReferenceActions,
+  type ObjectReferenceDescriptor,
+  type ObjectReferenceOpenHrefHandler,
+} from '@contractspec/lib.design-system';
+
+const customerContact: ObjectReferenceDescriptor = {
+  id: 'user.amina',
+  kind: 'user',
+  label: 'Amina Laurent',
+  description: 'Customer success owner',
+  href: '/customers/acme/users/amina',
+  properties: [
+    {
+      id: 'user.amina.email',
+      kind: 'email',
+      label: 'Email',
+      value: 'amina@example.com',
+    },
+    {
+      id: 'user.amina.phone',
+      kind: 'phone',
+      label: 'Phone',
+      value: '+33 1 23 45 67 89',
+    },
+  ],
+  sections: [
+    {
+      id: 'customer-site',
+      title: 'Primary site',
+      properties: [
+        {
+          id: 'customer-site.address',
+          kind: 'address',
+          label: 'Paris office',
+          value: '10 rue de Rivoli, 75001 Paris',
+          actions: createMapsReferenceActions({
+            id: 'customer-site.address',
+            kind: 'address',
+            label: 'Paris office',
+            value: '10 rue de Rivoli, 75001 Paris',
+          }),
+        },
+      ],
+    },
+  ],
+};
+
+const openHref: ObjectReferenceOpenHrefHandler = (href, _event, options) => {
+  if (options.target === 'new-page') {
+    window.open(href, '_blank', 'noopener,noreferrer');
+    return;
+  }
+
+  window.location.assign(href);
+};
+
+<ObjectReferenceHandler
+  reference={customerContact}
+  actions={createDefaultObjectReferenceActions(customerContact)}
+  interactivityVisibility="icon"
+  openTarget="same-page"
+  panelMode="responsive"
+  mobilePanelMode="drawer"
+  desktopPanelMode="sheet"
+  responsiveBreakpoint="md"
+  openHref={openHref}
+/>;`,ao=`import { AdaptivePanel } from '@contractspec/lib.design-system/components/overlays';
+
+<AdaptivePanel
+  open={open}
+  onOpenChange={setOpen}
+  trigger={<button type="button">Edit</button>}
+  title="Edit customer"
+  description="Update contact and site details."
+  mode="responsive"
+  mobileMode="drawer"
+  desktopMode="sheet"
+  breakpoint="md"
+  sheetSide="right"
+  drawerDirection="bottom"
+>
+  {content}
+</AdaptivePanel>;`,oo=`Find every user-facing address, phone number, email, user, customer, file, URL, and tenant-specific object reference currently rendered as inert text.
+
+Replace each one with ObjectReferenceHandler from @contractspec/lib.design-system. Keep descriptors data-only: id, kind, label, value, href, openTarget, properties, sections, metadata, iconKey, and ariaLabel are allowed; React callbacks belong in handler props only.
+
+Use properties and sections for rich references. For example, a user reference can expose email, phone, address, files, and customer links in one panel instead of rendering separate disconnected strings.
+
+Use panelMode="responsive" by default. Let desktop render a sheet and small screens render a bottom drawer through AdaptivePanel. Do not call Sheet or Drawer directly for this interaction unless a lower-level primitive is being implemented.
+
+Use openTarget="same-page" unless product requirements explicitly require a new page. Put custom copy, navigation, analytics, permissions, or tenant-specific actions in copyHandler, openHref, actionHandlers, onAction, and onActionError.
+
+For addresses, use createMapsReferenceActions so users can choose Google Maps, Apple Maps, or Waze. For email and phone references, prefer createDefaultObjectReferenceActions unless a product-specific action set is required.
+
+After replacing references, verify keyboard access, visible affordance choice (none, underline, or icon), safe href behavior, mobile drawer layout, and desktop sheet layout.`;function io(){return o("div",{className:"space-y-8",children:[o("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.design-system"}),o("p",{className:"text-muted-foreground",children:["High-level design system components, patterns, and layouts for LSSM applications. Built on top of ",e("code",{children:"@contractspec/lib.ui-kit"}),"."]})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(Xa,{package:"@contractspec/lib.design-system"})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What It Provides"}),o("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[o("li",{children:[e("strong",{children:"Composite Components"}),": Molecules and Organisms that solve common UI problems"]}),o("li",{children:[e("strong",{children:"Layouts"}),": Ready-to-use page structures for dashboards, marketing sites, and lists"]}),o("li",{children:[e("strong",{children:"Data Views"}),": Standardized renderers for lists, tables, and detail views"]}),o("li",{children:[e("strong",{children:"Forms"}),": Zod-integrated form layouts and components"]}),o("li",{children:[e("strong",{children:"Code Display"}),": Syntax-highlighted code blocks with package manager tabs"]}),o("li",{children:[e("strong",{children:"Platform Utilities"}),": Hooks for responsive and adaptive design"]}),o("li",{children:[e("strong",{children:"Object References"}),": Clickable references for addresses, phone numbers, users, customers, files, URLs, and custom objects"]}),o("li",{children:[e("strong",{children:"Adaptive Panels"}),": One panel API that resolves to a desktop sheet or mobile drawer"]}),o("li",{children:[e("strong",{children:"Theme Bridge"}),": ThemeSpec to Tailwind variables, presets, CSS text, and runtime light/dark mode"]}),o("li",{children:[e("strong",{children:"Legal Templates"}),": Compliant templates for Terms, Privacy, and GDPR"]})]})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"ThemeSpec to Tailwind"}),o("p",{className:"text-muted-foreground",children:["The theme bridge keeps ",e("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."]}),e(Ae,{language:"tsx",code:ja})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Focused import surfaces"}),e("p",{className:"text-muted-foreground",children:"New code can use focused subpaths for theme, controls, forms, and layout while existing root imports remain compatible."}),e(Ae,{language:"tsx",code:eo})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Actionable object references"}),o("p",{className:"text-muted-foreground",children:["Use ",e("code",{children:"ObjectReferenceHandler"})," whenever a product surface renders an object that may need quick interaction: addresses, phone numbers, emails, users, customers, files, URLs, and tenant-specific objects. The goal is to avoid inert references while keeping the descriptor contract declarative enough for OSS consumers and future contract-generated surfaces."]}),o("div",{className:"grid gap-4 md:grid-cols-2",children:[o("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Descriptor model"}),o("ul",{className:"list-inside list-disc space-y-1 text-muted-foreground text-sm",children:[o("li",{children:["References use data-only descriptors: ",e("code",{children:"id"}),","," ",e("code",{children:"kind"}),", ",e("code",{children:"label"}),", ",e("code",{children:"value"}),","," ",e("code",{children:"href"}),", ",e("code",{children:"openTarget"}),","," ",e("code",{children:"metadata"}),", ",e("code",{children:"iconKey"}),", and"," ",e("code",{children:"ariaLabel"}),"."]}),o("li",{children:["Rich references use nested ",e("code",{children:"properties"})," and"," ",e("code",{children:"sections"}),", so one user or customer can expose email, phone, address, files, and links inside the same panel."]}),o("li",{children:["Reference kinds are ",e("code",{children:"address"}),", ",e("code",{children:"email"}),","," ",e("code",{children:"phone"}),", ",e("code",{children:"user"}),", ",e("code",{children:"customer"}),","," ",e("code",{children:"file"}),", ",e("code",{children:"url"}),", and ",e("code",{children:"custom"}),"."]})]})]}),o("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Runtime behavior"}),o("ul",{className:"list-inside list-disc space-y-1 text-muted-foreground text-sm",children:[o("li",{children:["Choose visibility with ",e("code",{children:"interactivityVisibility"}),":",e("code",{children:"none"}),", ",e("code",{children:"underline"}),", or ",e("code",{children:"icon"}),"."]}),o("li",{children:["Detail navigation defaults to ",e("code",{children:"same-page"}),"; set"," ",e("code",{children:'openTarget="new-page"'})," on the handler, reference, or action when a new page is required."]}),o("li",{children:["Host apps provide behavior through ",e("code",{children:"copyHandler"}),","," ",e("code",{children:"openHref"}),", ",e("code",{children:"actionHandlers"}),","," ",e("code",{children:"onAction"}),", and ",e("code",{children:"onActionError"}),"."]})]})]}),o("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Default actions"}),o("ul",{className:"list-inside list-disc space-y-1 text-muted-foreground text-sm",children:[o("li",{children:[e("code",{children:"createDefaultObjectReferenceActions"})," adds copy, open, email, phone, and map actions when the descriptor supports them."]}),o("li",{children:[e("code",{children:"createMapsReferenceActions"})," creates Google Maps, Apple Maps, Waze, or geo actions for address references."]}),e("li",{children:"Safe href handling allows expected app, web, email, phone, and map URLs while rejecting unsafe schemes."})]})]}),o("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Extension points"}),o("ul",{className:"list-inside list-disc space-y-1 text-muted-foreground text-sm",children:[o("li",{children:["Use ",e("code",{children:"renderTrigger"}),", ",e("code",{children:"renderDetail"}),","," ",e("code",{children:"renderAction"}),", ",e("code",{children:"renderProperty"}),","," ",e("code",{children:"renderSection"}),", and ",e("code",{children:"iconRenderer"})," to wrap or overload presentation."]}),e("li",{children:"Keep tenant-specific permissions, analytics, and integration side effects at the host boundary through runtime handlers."})]})]})]}),e(Ae,{language:"tsx",code:to})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Adaptive panels"}),o("p",{className:"text-muted-foreground",children:[e("code",{children:"AdaptivePanel"})," is the shared overlay decision for surfaces that should feel native on both desktop and small screens. Its default responsive mode renders a sheet at the configured desktop breakpoint and a drawer below it. ",e("code",{children:"ObjectReferenceHandler"})," uses this panel contract through ",e("code",{children:"panelMode"}),","," ",e("code",{children:"mobilePanelMode"}),", ",e("code",{children:"desktopPanelMode"}),", and"," ",e("code",{children:"responsiveBreakpoint"}),"."]}),e(Ae,{language:"tsx",code:ao})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Prompt for adoption work"}),e("p",{className:"text-muted-foreground",children:"Use this prompt when asking an agent or downstream OSS consumer to replace inert references across an application."}),e(Ae,{language:"text",code:oo})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Data table example"}),o("p",{className:"text-muted-foreground",children:["This is the composed lane from the canonical"," ",e(Oe,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),". The design-system wrapper owns title, description, header actions, and the opinionated card shell on top of the raw web primitive."]}),e(Ae,{language:"tsx",code:xa})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Key Exports"}),o("div",{className:"grid gap-4 md:grid-cols-2",children:[o("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Organisms"}),o("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"AppShell, PageOutline"}),e("li",{children:"AppLayout, AppHeader, AppSidebar"}),e("li",{children:"MarketingLayout, HeroSection"}),e("li",{children:"ListCardPage, ListTablePage"})]})]}),o("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Data & Forms"}),o("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"DataTable"}),e("li",{children:"DataViewTable"}),e("li",{children:"DataViewRenderer"}),e("li",{children:"ZodForm"}),e("li",{children:"FormLayout, FormDialog"})]})]}),o("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Code Display"}),o("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"CodeBlock (syntax highlighting)"}),e("li",{children:"CommandTabs (package manager tabs)"}),e("li",{children:"InstallCommand (convenience wrapper)"}),e("li",{children:"CopyButton"})]})]}),o("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Providers"}),e("ul",{className:"space-y-1 text-muted-foreground text-sm",children:e("li",{children:"PackageManagerProvider"})})]}),o("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"References & Overlays"}),o("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"ObjectReferenceHandler"}),e("li",{children:"createDefaultObjectReferenceActions"}),e("li",{children:"createMapsReferenceActions"}),e("li",{children:"AdaptivePanel"})]})]})]})]}),o("div",{className:"card-subtle space-y-3 p-6",children:[e("h2",{className:"font-bold text-2xl",children:"Where this layer fits"}),o("p",{className:"text-muted-foreground",children:["Read"," ",e(Oe,{href:"/docs/libraries/application-shell",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Application shell"})," ","for the shared sidebar, topbar, command search, mobile navigation, and"," ",e("code",{children:"PageOutline"})," pattern. Read"," ",e(Oe,{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."]})]}),o("div",{className:"flex items-center gap-4 pt-4",children:[e(Oe,{href:"/docs/libraries/ui-kit-web",className:"btn-ghost",children:"Previous: UI Kit Web"}),o(Oe,{href:"/docs/libraries/accessibility",className:"btn-primary",children:["Next: Accessibility ",e($a,{size:16})]})]})]})}import{CodeBlock as He,InstallCommand as ro}from"@contractspec/lib.design-system";import Pt from"@contractspec/lib.ui-link";import{ChevronRight as no}from"lucide-react";import{jsx as O,jsxs as ie}from"react/jsx-runtime";function co(){return ie("div",{className:"space-y-8",children:[ie("div",{className:"space-y-4",children:[O("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.evolution"}),O("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."})]}),ie("div",{className:"space-y-4",children:[O("h2",{className:"font-bold text-2xl",children:"Installation"}),O(ro,{package:"@contractspec/lib.evolution"})]}),ie("div",{className:"space-y-3",children:[O("h2",{className:"font-bold text-2xl",children:"From telemetry to intent"}),O(He,{language:"typescript",code:`import { SpecAnalyzer } from '@contractspec/lib.evolution/analyzer';
 import { EvolutionPipeline } from '@contractspec/lib.observability';
 
 const analyzer = new SpecAnalyzer();
@@ -532,7 +836,7 @@ pipeline.ingest({
   success: false,
   timestamp: new Date(),
   errorCode: 'VALIDATION_FAILED',
-});`})]}),$("div",{className:"space-y-3",children:[L("h2",{className:"font-bold text-2xl",children:"Generate & approve suggestions"}),L(Se,{language:"typescript",code:`import {
+});`})]}),ie("div",{className:"space-y-3",children:[O("h2",{className:"font-bold text-2xl",children:"Generate & approve suggestions"}),O(He,{language:"typescript",code:`import {
   SpecGenerator,
   SpecSuggestionOrchestrator,
   InMemorySpecSuggestionRepository,
@@ -546,7 +850,7 @@ const suggestion = generator.generateFromIntent(intentPattern, {
   summary: 'Add PO number requirement for acme.corp',
 });
 
-await orchestrator.submit(suggestion, sessionState);`})]}),$("div",{className:"space-y-3",children:[L("h2",{className:"font-bold text-2xl",children:"Write approved specs back to git"}),L(Se,{language:"typescript",code:`import { FileSystemSuggestionWriter } from '@contractspec/lib.evolution/approval';
+await orchestrator.submit(suggestion, sessionState);`})]}),ie("div",{className:"space-y-3",children:[O("h2",{className:"font-bold text-2xl",children:"Write approved specs back to git"}),O(He,{language:"typescript",code:`import { FileSystemSuggestionWriter } from '@contractspec/lib.evolution/approval';
 
 const writer = new FileSystemSuggestionWriter({
   outputDir:
@@ -557,7 +861,7 @@ await writer.write({
   ...suggestion,
   status: 'approved',
   approvals: { reviewer: 'ops@contractspec', decidedAt: new Date() },
-});`})]}),L("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)=>$("div",{className:"card-subtle space-y-2 p-4",children:[L("h3",{className:"font-semibold text-lg",children:e.title}),L("p",{className:"text-muted-foreground text-sm",children:e.description})]},e.title))}),$("div",{className:"flex items-center gap-4 pt-4",children:[L(st,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),$(st,{href:"/docs/libraries/observability",className:"btn-primary",children:["Next: Observability ",L(Na,{size:16})]})]})]})}import{CodeBlock as ka,InstallCommand as Sa}from"@contractspec/lib.design-system";import lt from"@contractspec/lib.ui-link";import{ChevronRight as Ca}from"lucide-react";import{jsx as b,jsxs as C}from"react/jsx-runtime";function Ta(){return C("div",{className:"space-y-8",children:[C("div",{className:"space-y-4",children:[b("h1",{className:"font-bold text-4xl",children:"GraphQL Libraries"}),b("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."})]}),C("div",{className:"space-y-4",children:[b("h2",{className:"font-bold text-2xl",children:"Libraries"}),C("div",{className:"grid gap-4 md:grid-cols-1",children:[C("div",{className:"card-subtle p-6",children:[b("h3",{className:"font-bold text-lg",children:"@contractspec/lib.graphql-core"}),b("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."})]}),C("div",{className:"card-subtle p-6",children:[b("h3",{className:"font-bold text-lg",children:"@contractspec/lib.graphql-prisma"}),b("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."})]}),C("div",{className:"card-subtle p-6",children:[b("h3",{className:"font-bold text-lg",children:"@contractspec/lib.graphql-federation"}),b("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."})]})]})]}),C("div",{className:"space-y-4",children:[b("h2",{className:"font-bold text-2xl",children:"Installation"}),b(Sa,{package:["@contractspec/lib.graphql-core","@contractspec/lib.graphql-prisma","@contractspec/lib.graphql-federation"]})]}),C("div",{className:"space-y-4",children:[b("h2",{className:"font-bold text-2xl",children:"Usage: Building a Schema"}),b("p",{className:"text-muted-foreground",children:"Here's how to assemble a federated GraphQL schema from your specs:"}),b(ka,{language:"typescript",code:`import { builder } from '@contractspec/lib.graphql-core';
+});`})]}),O("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((a)=>ie("div",{className:"card-subtle space-y-2 p-4",children:[O("h3",{className:"font-semibold text-lg",children:a.title}),O("p",{className:"text-muted-foreground text-sm",children:a.description})]},a.title))}),ie("div",{className:"flex items-center gap-4 pt-4",children:[O(Pt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),ie(Pt,{href:"/docs/libraries/observability",className:"btn-primary",children:["Next: Observability ",O(no,{size:16})]})]})]})}import{CodeBlock as so,InstallCommand as lo}from"@contractspec/lib.design-system";import Ot from"@contractspec/lib.ui-link";import{ChevronRight as po}from"lucide-react";import{jsx as w,jsxs as I}from"react/jsx-runtime";function mo(){return I("div",{className:"space-y-8",children:[I("div",{className:"space-y-4",children:[w("h1",{className:"font-bold text-4xl",children:"GraphQL Libraries"}),w("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."})]}),I("div",{className:"space-y-4",children:[w("h2",{className:"font-bold text-2xl",children:"Libraries"}),I("div",{className:"grid gap-4 md:grid-cols-1",children:[I("div",{className:"card-subtle p-6",children:[w("h3",{className:"font-bold text-lg",children:"@contractspec/lib.graphql-core"}),w("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."})]}),I("div",{className:"card-subtle p-6",children:[w("h3",{className:"font-bold text-lg",children:"@contractspec/lib.graphql-prisma"}),w("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."})]}),I("div",{className:"card-subtle p-6",children:[w("h3",{className:"font-bold text-lg",children:"@contractspec/lib.graphql-federation"}),w("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."})]})]})]}),I("div",{className:"space-y-4",children:[w("h2",{className:"font-bold text-2xl",children:"Installation"}),w(lo,{package:["@contractspec/lib.graphql-core","@contractspec/lib.graphql-prisma","@contractspec/lib.graphql-federation"]})]}),I("div",{className:"space-y-4",children:[w("h2",{className:"font-bold text-2xl",children:"Usage: Building a Schema"}),w("p",{className:"text-muted-foreground",children:"Here's how to assemble a federated GraphQL schema from your specs:"}),w(so,{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';
@@ -571,7 +875,7 @@ registerContractsOnBuilder(builder, registry);
 
 // 3. Build and print schema
 const schema = builder.toSchema();
-console.log(printSchema(schema));`})]}),C("div",{className:"space-y-4",children:[b("h2",{className:"font-bold text-2xl",children:"Features"}),C("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[C("li",{children:[b("strong",{children:"Code-First"}),": Define schema in TypeScript (Pothos), get SDL as artifact."]}),C("li",{children:[b("strong",{children:"Spec Integration"}),": `registerContractsOnBuilder` automatically converts Command/Query specs into Mutations/Queries."]}),C("li",{children:[b("strong",{children:"Federation Ready"}),": Just add `provider: 'federation'` to your config."]})]})]}),C("div",{className:"flex items-center gap-4 pt-4",children:[C(lt,{href:"/docs/libraries/data-backend",className:"btn-primary",children:["Next: Data & Backend ",b(Ca,{size:16})]}),b(lt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"})]})]})}import{CodeBlock as dt,InstallCommand as La}from"@contractspec/lib.design-system";import pt from"@contractspec/lib.ui-link";import{ChevronRight as Ra}from"lucide-react";import{jsx as J,jsxs as ce}from"react/jsx-runtime";function Ia(){return ce("div",{className:"space-y-8",children:[ce("div",{className:"space-y-4",children:[J("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.growth"}),J("p",{className:"text-lg text-muted-foreground",children:"Launch experiments without third-party SDKs. Register variants, assign users deterministically, track exposures, and compute significance."})]}),ce("div",{className:"space-y-4",children:[J("h2",{className:"font-bold text-2xl",children:"Installation"}),J(La,{package:"@contractspec/lib.growth"})]}),ce("div",{className:"space-y-3",children:[J("h2",{className:"font-bold text-2xl",children:"Register + assign"}),J(dt,{language:"typescript",code:`import { ExperimentRegistry, ExperimentRunner } from '@contractspec/lib.growth/experiments';
+console.log(printSchema(schema));`})]}),I("div",{className:"space-y-4",children:[w("h2",{className:"font-bold text-2xl",children:"Features"}),I("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[I("li",{children:[w("strong",{children:"Code-First"}),": Define schema in TypeScript (Pothos), get SDL as artifact."]}),I("li",{children:[w("strong",{children:"Spec Integration"}),": `registerContractsOnBuilder` automatically converts Command/Query specs into Mutations/Queries."]}),I("li",{children:[w("strong",{children:"Federation Ready"}),": Just add `provider: 'federation'` to your config."]})]})]}),I("div",{className:"flex items-center gap-4 pt-4",children:[I(Ot,{href:"/docs/libraries/data-backend",className:"btn-primary",children:["Next: Data & Backend ",w(po,{size:16})]}),w(Ot,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"})]})]})}import{CodeBlock as Dt,InstallCommand as uo}from"@contractspec/lib.design-system";import Mt from"@contractspec/lib.ui-link";import{ChevronRight as ho}from"lucide-react";import{jsx as x,jsxs as ye}from"react/jsx-runtime";function go(){return ye("div",{className:"space-y-8",children:[ye("div",{className:"space-y-4",children:[x("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.growth"}),x("p",{className:"text-lg text-muted-foreground",children:"Launch experiments without third-party SDKs. Register variants, assign users deterministically, track exposures, and compute significance."})]}),ye("div",{className:"space-y-4",children:[x("h2",{className:"font-bold text-2xl",children:"Installation"}),x(uo,{package:"@contractspec/lib.growth"})]}),ye("div",{className:"space-y-3",children:[x("h2",{className:"font-bold text-2xl",children:"Register + assign"}),x(Dt,{language:"typescript",code:`import { ExperimentRegistry, ExperimentRunner } from '@contractspec/lib.growth/experiments';
 
 const registry = new ExperimentRegistry().register({
   key: 'pricing.cta',
@@ -585,7 +889,7 @@ const registry = new ExperimentRegistry().register({
 });
 
 const runner = new ExperimentRunner();
-const assignment = runner.assign(registry.get('pricing.cta')!, 'user_123');`})]}),ce("div",{className:"space-y-3",children:[J("h2",{className:"font-bold text-2xl",children:"Track + analyze"}),J(dt,{language:"typescript",code:`import { ExperimentTracker } from '@contractspec/lib.growth/tracker';
+const assignment = runner.assign(registry.get('pricing.cta')!, 'user_123');`})]}),ye("div",{className:"space-y-3",children:[x("h2",{className:"font-bold text-2xl",children:"Track + analyze"}),x(Dt,{language:"typescript",code:`import { ExperimentTracker } from '@contractspec/lib.growth/tracker';
 import { StatsEngine } from '@contractspec/lib.growth/stats';
 
 const tracker = new ExperimentTracker(new InMemoryTrackerStore());
@@ -601,11 +905,11 @@ await tracker.recordSample({
 const stats = new StatsEngine().summarize(
   await tracker.getSamples(assignment.experimentKey, 'demo_booked'),
   'demo_booked'
-);`})]}),ce("div",{className:"flex items-center gap-4 pt-4",children:[J(pt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),ce(pt,{href:"/docs/libraries/analytics",className:"btn-primary",children:["Next: Analytics ",J(Ra,{size:16})]})]})]})}import{CodeBlock as mt,InstallCommand as Aa}from"@contractspec/lib.design-system";import ut from"@contractspec/lib.ui-link";import{ChevronRight as Pa}from"lucide-react";import{jsx as V,jsxs as x}from"react/jsx-runtime";function Da(){return x("div",{className:"space-y-8",children:[x("div",{className:"space-y-4",children:[V("h1",{className:"font-bold text-4xl",children:"Multi-Tenancy Library"}),x("p",{className:"text-lg text-muted-foreground",children:["The ",V("code",{children:"@contractspec/lib.multi-tenancy"})," library provides the core building blocks for secure SaaS applications."]})]}),x("div",{className:"space-y-4",children:[V("h2",{className:"font-bold text-2xl",children:"Installation"}),V(Aa,{package:"@contractspec/lib.multi-tenancy"})]}),x("div",{className:"space-y-4",children:[V("h2",{className:"font-bold text-2xl",children:"Prisma RLS Middleware"}),x("p",{className:"text-muted-foreground",children:["Automatically injects ",V("code",{children:"tenantId"})," into all queries."]}),V(mt,{language:"typescript",code:`import { createRlsMiddleware } from '@contractspec/lib.multi-tenancy/rls';
+);`})]}),ye("div",{className:"flex items-center gap-4 pt-4",children:[x(Mt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),ye(Mt,{href:"/docs/libraries/analytics",className:"btn-primary",children:["Next: Analytics ",x(ho,{size:16})]})]})]})}import{CodeBlock as Et,InstallCommand as fo}from"@contractspec/lib.design-system";import Bt from"@contractspec/lib.ui-link";import{ChevronRight as bo}from"lucide-react";import{jsx as Z,jsxs as re}from"react/jsx-runtime";function vo(){return re("div",{className:"space-y-8",children:[re("div",{className:"space-y-4",children:[Z("h1",{className:"font-bold text-4xl",children:"Multi-Tenancy Library"}),re("p",{className:"text-lg text-muted-foreground",children:["The ",Z("code",{children:"@contractspec/lib.multi-tenancy"})," library provides the core building blocks for secure SaaS applications."]})]}),re("div",{className:"space-y-4",children:[Z("h2",{className:"font-bold text-2xl",children:"Installation"}),Z(fo,{package:"@contractspec/lib.multi-tenancy"})]}),re("div",{className:"space-y-4",children:[Z("h2",{className:"font-bold text-2xl",children:"Prisma RLS Middleware"}),re("p",{className:"text-muted-foreground",children:["Automatically injects ",Z("code",{children:"tenantId"})," into all queries."]}),Z(Et,{language:"typescript",code:`import { createRlsMiddleware } from '@contractspec/lib.multi-tenancy/rls';
 import { prisma } from './db';
 import { getTenantId } from './context';
 
-prisma.$use(createRlsMiddleware(() => getTenantId()));`})]}),x("div",{className:"space-y-4",children:[V("h2",{className:"font-bold text-2xl",children:"Provisioning Service"}),V("p",{className:"text-muted-foreground",children:"Automates the creation of new tenants, including database setup and default user creation."}),V(mt,{language:"typescript",code:`import { TenantProvisioningService } from '@contractspec/lib.multi-tenancy/provisioning';
+prisma.$use(createRlsMiddleware(() => getTenantId()));`})]}),re("div",{className:"space-y-4",children:[Z("h2",{className:"font-bold text-2xl",children:"Provisioning Service"}),Z("p",{className:"text-muted-foreground",children:"Automates the creation of new tenants, including database setup and default user creation."}),Z(Et,{language:"typescript",code:`import { TenantProvisioningService } from '@contractspec/lib.multi-tenancy/provisioning';
 
 const service = new TenantProvisioningService({ db: prisma });
 await service.provision({
@@ -613,20 +917,20 @@ await service.provision({
   name: 'Acme Corp',
   slug: 'acme',
   ownerEmail: 'admin@acme.com'
-});`})]}),x("div",{className:"flex items-center gap-4 pt-4",children:[V(ut,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),x(ut,{href:"/docs/libraries/progressive-delivery",className:"btn-primary",children:["Next: Progressive Delivery ",V(Pa,{size:16})]})]})]})}import{CodeBlock as ge,InstallCommand as Oa}from"@contractspec/lib.design-system";import gt from"@contractspec/lib.ui-link";import{ChevronRight as Ea}from"lucide-react";import{jsx as T,jsxs as Z}from"react/jsx-runtime";function Ba(){return Z("div",{className:"space-y-8",children:[Z("div",{className:"space-y-4",children:[T("h1",{className:"font-bold text-4xl",children:"Observability Library"}),Z("p",{className:"text-lg text-muted-foreground",children:["The ",T("code",{children:"@contractspec/lib.observability"})," library provides a thin wrapper around OpenTelemetry to simplify instrumentation."]})]}),Z("div",{className:"space-y-4",children:[T("h2",{className:"font-bold text-2xl",children:"Installation"}),T(Oa,{package:"@contractspec/lib.observability"})]}),Z("div",{className:"space-y-4",children:[T("h2",{className:"font-bold text-2xl",children:"Tracing"}),T(ge,{language:"typescript",code:`import { traceAsync, traceSync } from '@contractspec/lib.observability/tracing';
+});`})]}),re("div",{className:"flex items-center gap-4 pt-4",children:[Z(Bt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),re(Bt,{href:"/docs/libraries/progressive-delivery",className:"btn-primary",children:["Next: Progressive Delivery ",Z(bo,{size:16})]})]})]})}import{CodeBlock as Be,InstallCommand as yo}from"@contractspec/lib.design-system";import Ut from"@contractspec/lib.ui-link";import{ChevronRight as No}from"lucide-react";import{jsx as P,jsxs as j}from"react/jsx-runtime";function wo(){return j("div",{className:"space-y-8",children:[j("div",{className:"space-y-4",children:[P("h1",{className:"font-bold text-4xl",children:"Observability Library"}),j("p",{className:"text-lg text-muted-foreground",children:["The ",P("code",{children:"@contractspec/lib.observability"})," library provides a thin wrapper around OpenTelemetry to simplify instrumentation."]})]}),j("div",{className:"space-y-4",children:[P("h2",{className:"font-bold text-2xl",children:"Installation"}),P(yo,{package:"@contractspec/lib.observability"})]}),j("div",{className:"space-y-4",children:[P("h2",{className:"font-bold text-2xl",children:"Tracing"}),P(Be,{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);
-});`})]}),Z("div",{className:"space-y-4",children:[T("h2",{className:"font-bold text-2xl",children:"Metrics"}),T(ge,{language:"typescript",code:`import { createCounter, createHistogram } from '@contractspec/lib.observability/metrics';
+});`})]}),j("div",{className:"space-y-4",children:[P("h2",{className:"font-bold text-2xl",children:"Metrics"}),P(Be,{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);`})]}),Z("div",{className:"space-y-4",children:[T("h2",{className:"font-bold text-2xl",children:"Middleware"}),T("p",{className:"text-muted-foreground",children:"Automatically instrument your HTTP handlers:"}),T(ge,{language:"typescript",code:`import { createTracingMiddleware } from '@contractspec/lib.observability/tracing/middleware';
+latencyHistogram.record(0.123);`})]}),j("div",{className:"space-y-4",children:[P("h2",{className:"font-bold text-2xl",children:"Middleware"}),P("p",{className:"text-muted-foreground",children:"Automatically instrument your HTTP handlers:"}),P(Be,{language:"typescript",code:`import { createTracingMiddleware } from '@contractspec/lib.observability/tracing/middleware';
 
-app.use(createTracingMiddleware());`})]}),Z("div",{className:"space-y-4",children:[T("h2",{className:"font-bold text-2xl",children:"Anomaly Detection"}),T("p",{className:"text-muted-foreground text-sm",children:"Includes baseline calculation and anomaly detection helpers for auto-rollback without writing custom math."}),T(ge,{language:"typescript",code:`import { AnomalyDetector, RootCauseAnalyzer, AlertManager } from '@contractspec/lib.observability';
+app.use(createTracingMiddleware());`})]}),j("div",{className:"space-y-4",children:[P("h2",{className:"font-bold text-2xl",children:"Anomaly Detection"}),P("p",{className:"text-muted-foreground text-sm",children:"Includes baseline calculation and anomaly detection helpers for auto-rollback without writing custom math."}),P(Be,{language:"typescript",code:`import { AnomalyDetector, RootCauseAnalyzer, AlertManager } from '@contractspec/lib.observability';
 
 const detector = new AnomalyDetector({ errorRateDelta: 0.4 });
 const analyzer = new RootCauseAnalyzer();
@@ -636,7 +940,7 @@ const signals = detector.evaluate(point);
 signals.forEach((signal) => {
   const analysis = analyzer.analyze(signal, recentDeployments);
   alertManager.notify(signal, analysis);
-});`})]}),Z("div",{className:"flex items-center gap-4 pt-4",children:[T(gt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),Z(gt,{href:"/docs/libraries/slo",className:"btn-primary",children:["Next: SLO ",T(Ea,{size:16})]})]})]})}import{CodeBlock as Ce,InstallCommand as Ma}from"@contractspec/lib.design-system";import ht from"@contractspec/lib.ui-link";import{ChevronRight as Wa}from"lucide-react";import{jsx as E,jsxs as ie}from"react/jsx-runtime";function za(){return ie("div",{className:"space-y-8",children:[ie("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."})]}),ie("div",{className:"space-y-4",children:[E("h2",{className:"font-bold text-2xl",children:"Installation"}),E(Ma,{package:"@contractspec/lib.overlay-engine"})]}),ie("div",{className:"space-y-4",children:[E("h2",{className:"font-bold text-2xl",children:"Define + Sign"}),E(Ce,{language:"typescript",code:`import { defineOverlay } from '@contractspec/lib.overlay-engine/spec';
+});`})]}),j("div",{className:"flex items-center gap-4 pt-4",children:[P(Ut,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),j(Ut,{href:"/docs/libraries/slo",className:"btn-primary",children:["Next: SLO ",P(No,{size:16})]})]})]})}import{CodeBlock as Ke,InstallCommand as ko}from"@contractspec/lib.design-system";import Wt from"@contractspec/lib.ui-link";import{ChevronRight as So}from"lucide-react";import{jsx as W,jsxs as fe}from"react/jsx-runtime";function Ro(){return fe("div",{className:"space-y-8",children:[fe("div",{className:"space-y-4",children:[W("h1",{className:"font-bold text-4xl",children:"Overlay Engine"}),W("p",{className:"text-lg text-muted-foreground",children:"`@contractspec/lib.overlay-engine` keeps OverlaySpecs typed, signed, and auditable across tenants, roles, users, and devices."})]}),fe("div",{className:"space-y-4",children:[W("h2",{className:"font-bold text-2xl",children:"Installation"}),W(ko,{package:"@contractspec/lib.overlay-engine"})]}),fe("div",{className:"space-y-4",children:[W("h2",{className:"font-bold text-2xl",children:"Define + Sign"}),W(Ke,{language:"typescript",code:`import { defineOverlay } from '@contractspec/lib.overlay-engine/spec';
 import { signOverlay } from '@contractspec/lib.overlay-engine/signer';
 
 const overlay = defineOverlay({
@@ -646,7 +950,7 @@ const overlay = defineOverlay({
   modifications: [{ type: 'hideField', field: 'internalNotes' }],
 });
 
-const signed = await signOverlay(overlay, privateKeyPem);`})]}),ie("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(Ce,{language:"typescript",code:`const registry = new OverlayRegistry();
+const signed = await signOverlay(overlay, privateKeyPem);`})]}),fe("div",{className:"space-y-4",children:[W("h2",{className:"font-bold text-2xl",children:"Runtime"}),W("p",{className:"text-muted-foreground",children:"`OverlayRegistry` stores signed overlays with specificity scoring. `OverlayEngine` merges modifications and emits audit events."}),W(Ke,{language:"typescript",code:`const registry = new OverlayRegistry();
 registry.register(signed);
 
 const engine = new OverlayEngine({
@@ -658,13 +962,61 @@ const result = engine.apply({
   target: { fields },
   capability: 'billing.createOrder',
   tenantId: 'acme',
-});`})]}),ie("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(Ce,{language:"typescript",code:`import { useOverlay } from '@contractspec/lib.overlay-engine/react';
+});`})]}),fe("div",{className:"space-y-4",children:[W("h2",{className:"font-bold text-2xl",children:"React Hooks"}),W("p",{className:"text-muted-foreground",children:"Render overlays in React/React Native via `useOverlay`."}),W(Ke,{language:"typescript",code:`import { useOverlay } from '@contractspec/lib.overlay-engine/react';
 
 const { target } = useOverlay(engine, {
   target: { fields },
   capability: 'billing.createOrder',
   tenantId: 'acme',
-});`})]}),ie("div",{className:"flex items-center gap-4 pt-4",children:[E(ht,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),ie(ht,{href:"/docs/libraries/workflow-composer",className:"btn-primary",children:["Next: Workflow Composer ",E(Wa,{size:16})]})]})]})}import Ua from"@contractspec/lib.ui-link";import{ChevronRight as Ga}from"lucide-react";import{jsx as z,jsxs as re}from"react/jsx-runtime";var Fa=[{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:"Application shell",description:"Adopt the shared sidebar, topbar, command search, mobile navigation, and PageOutline patterns for product apps.",href:"/docs/libraries/application-shell"},{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 _a(){return re("div",{className:"space-y-10",children:[re("div",{className:"space-y-3",children:[z("p",{className:"editorial-kicker",children:"Build"}),z("h1",{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"The OSS foundation is a library system, not a closed platform."}),z("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."})]}),re("div",{className:"editorial-proof-strip",children:[re("div",{className:"editorial-stat",children:[z("span",{className:"editorial-label",children:"Layering rule"}),z("span",{className:"editorial-stat-value",children:"libs \u2192 bundles \u2192 apps"})]}),z("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."})]}),z("div",{className:"space-y-6",children:Fa.map((e)=>re("section",{className:"editorial-panel space-y-5",children:[re("div",{className:"space-y-2",children:[z("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:e.title}),z("p",{className:"text-muted-foreground text-sm leading-7",children:e.body})]}),z("div",{className:"grid gap-4 md:grid-cols-2",children:e.items.map((S)=>re(Ua,{href:S.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:[z("h3",{className:"font-semibold text-lg",children:S.title}),z("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:S.description}),re("div",{className:"mt-3 flex items-center gap-2 text-[color:var(--rust)] text-sm",children:["Learn more ",z(Ga,{size:14})]})]},S.title))})]},e.title))})]})}import{CodeBlock as Te,InstallCommand as Va}from"@contractspec/lib.design-system";import ft from"@contractspec/lib.ui-link";import{ChevronRight as qa}from"lucide-react";import{jsx as R,jsxs as ne}from"react/jsx-runtime";function Ha(){return ne("div",{className:"space-y-8",children:[ne("div",{className:"space-y-4",children:[R("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.personalization"}),R("p",{className:"text-lg text-muted-foreground",children:"Track field/feature/workflow usage, analyze drop-offs, and convert insights into OverlaySpecs or workflow tweaks."})]}),ne("div",{className:"space-y-4",children:[R("h2",{className:"font-bold text-2xl",children:"Installation"}),R(Va,{package:"@contractspec/lib.personalization"})]}),ne("div",{className:"space-y-4",children:[R("h2",{className:"font-bold text-2xl",children:"Tracker"}),R("p",{className:"text-muted-foreground",children:"Buffer events per tenant/user and emit OpenTelemetry counters automatically."}),R(Te,{language:"typescript",code:`import { createBehaviorTracker } from '@contractspec/lib.personalization';
+});`})]}),fe("div",{className:"flex items-center gap-4 pt-4",children:[W(Wt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),fe(Wt,{href:"/docs/libraries/workflow-composer",className:"btn-primary",children:["Next: Workflow Composer ",W(So,{size:16})]})]})]})}import Co from"@contractspec/lib.ui-link";import{ChevronRight as To}from"lucide-react";import{jsx as F,jsxs as be}from"react/jsx-runtime";var Ao=[{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.translation-runtime",description:"Resolve ContractSpec TranslationSpec catalogs with ICU formatting, SSR snapshots, BCP 47 locales, overrides, and optional i18next projection.",href:"/docs/libraries/translation-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, actionable object references, adaptive panels, and documented marketing/docs primitives on top of the web and native UI packages.",href:"/docs/libraries/design-system"},{title:"Application shell",description:"Adopt the shared sidebar, topbar, command search, notifications, mobile navigation, and PageOutline patterns for product apps.",href:"/docs/libraries/application-shell"},{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 Lo(){return be("div",{className:"space-y-10",children:[be("div",{className:"space-y-3",children:[F("p",{className:"editorial-kicker",children:"Build"}),F("h1",{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"The OSS foundation is a library system, not a closed platform."}),F("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."})]}),be("div",{className:"editorial-proof-strip",children:[be("div",{className:"editorial-stat",children:[F("span",{className:"editorial-label",children:"Layering rule"}),F("span",{className:"editorial-stat-value",children:"libs \u2192 bundles \u2192 apps"})]}),F("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."})]}),F("div",{className:"space-y-6",children:Ao.map((a)=>be("section",{className:"editorial-panel space-y-5",children:[be("div",{className:"space-y-2",children:[F("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:a.title}),F("p",{className:"text-muted-foreground text-sm leading-7",children:a.body})]}),F("div",{className:"grid gap-4 md:grid-cols-2",children:a.items.map((A)=>be(Co,{href:A.href,className:"rounded-[24px] border border-border/75 bg-background/70 p-5 transition-colors hover:border-[color:rgb(162_79_42_/_0.45)]",children:[F("h3",{className:"font-semibold text-lg",children:A.title}),F("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:A.description}),be("div",{className:"mt-3 flex items-center gap-2 text-[color:var(--rust)] text-sm",children:["Learn more ",F(To,{size:14})]})]},A.title))})]},a.title))})]})}import{CodeBlock as Le,InstallCommand as Io}from"@contractspec/lib.design-system";import{HStack as Po,VStack as ne}from"@contractspec/lib.design-system/layout";import{Code as zt,H1 as Oo,H2 as Ne,P as we,Text as Qe}from"@contractspec/lib.design-system/typography";import Je from"@contractspec/lib.ui-link";import{ChevronRight as Do}from"lucide-react";import{jsx as u,jsxs as _}from"react/jsx-runtime";var Mo=`import { DataViewRenderer } from '@contractspec/lib.design-system';
+import { resolveDataViewPreferences } from '@contractspec/lib.personalization/data-view-preferences';
+
+const resolved = resolveDataViewPreferences({
+  spec: AccountsDataView,
+  preferences: profile.canonical,
+  insights,
+  record: savedAccountViewPreference,
+});
+
+return (
+  <DataViewRenderer
+    spec={AccountsDataView}
+    items={accounts}
+    defaultViewMode={resolved.viewMode}
+    defaultDensity={resolved.density}
+    defaultDataDepth={resolved.dataDepth}
+    pagination={{
+      page,
+      pageSize: resolved.pageSize ?? 25,
+      total,
+    }}
+  />
+);`,Eo=`tracker.trackDataViewInteraction({
+  dataViewKey: AccountsDataView.meta.key,
+  dataViewVersion: AccountsDataView.meta.version,
+  action: 'view_mode_changed',
+  viewMode: 'grid',
+});
+
+tracker.trackDataViewInteraction({
+  dataViewKey: AccountsDataView.meta.key,
+  action: 'data_depth_changed',
+  dataDepth: 'detailed',
+});
+
+tracker.trackDataViewInteraction({
+  dataViewKey: AccountsDataView.meta.key,
+  action: 'filter_changed',
+  filterKey: 'status',
+});`,Bo=`Add DataView personalization for <screen>.
+
+Acceptance criteria:
+- Resolve viewMode, density, dataDepth, and pageSize with resolveDataViewPreferences.
+- Apply resolved values to DataViewRenderer as default or controlled props.
+- Track opened, view_mode_changed, density_changed, data_depth_changed, search_changed, filter_changed, sort_changed, and page_changed actions with trackDataViewInteraction.
+- Persist only the dimensions allowed by view.collection.personalization.persist.
+- Ignore behavior-derived modes that are not allowed by view.collection.viewModes.allowedModes.
+- Do not import React or design-system code into @contractspec/lib.personalization helpers.`;function Uo(){return _(ne,{className:"space-y-8",children:[_(ne,{className:"space-y-4",children:[u(Oo,{className:"font-bold text-4xl",children:"@contractspec/lib.personalization"}),u(we,{className:"text-lg text-muted-foreground",children:"Track field/feature/workflow usage, analyze drop-offs, and convert insights into OverlaySpecs or workflow tweaks."})]}),_(ne,{className:"space-y-4",children:[u(Ne,{className:"font-bold text-2xl",children:"Installation"}),u(Io,{package:"@contractspec/lib.personalization"})]}),_(ne,{className:"space-y-4",children:[u(Ne,{className:"font-bold text-2xl",children:"Tracker"}),u(we,{className:"text-muted-foreground",children:"Buffer events per tenant/user and emit OpenTelemetry counters automatically."}),u(Le,{language:"typescript",code:`import { createBehaviorTracker } from '@contractspec/lib.personalization';
 
 const tracker = createBehaviorTracker({
   store,
@@ -672,17 +1024,23 @@ const tracker = createBehaviorTracker({
 });
 
 tracker.trackFieldAccess({ operation: 'billing.createOrder', field: 'items' });
-tracker.trackWorkflowStep({ workflow: 'invoice', step: 'review', status: 'entered' });`})]}),ne("div",{className:"space-y-4",children:[R("h2",{className:"font-bold text-2xl",children:"Analyzer"}),R("p",{className:"text-muted-foreground",children:"Summarize events and highlight unused UI, frequent fields, and workflow bottlenecks."}),R(Te,{language:"typescript",code:`import { BehaviorAnalyzer } from '@contractspec/lib.personalization/analyzer';
+tracker.trackWorkflowStep({ workflow: 'invoice', step: 'review', status: 'entered' });`})]}),_(ne,{className:"space-y-4",children:[u(Ne,{className:"font-bold text-2xl",children:"DataView Preferences"}),_(we,{className:"text-muted-foreground",children:["Use ",u(zt,{children:"resolveDataViewPreferences"})," when a collection DataView should honor a user's preferred list/grid/table mode, compact or comfortable density, data depth, and page size. The helper returns plain values that can be passed into the renderer without coupling the design-system package to personalization. Start from the"," ",u(Je,{href:"/docs/libraries/data-views",className:"text-[color:var(--rust)] underline underline-offset-4",children:u(Qe,{children:"DataViews runtime guide"})})," ","when you need the contract and renderer shape."]}),u(Le,{language:"tsx",code:Mo})]}),_(ne,{className:"space-y-4",children:[u(Ne,{className:"font-bold text-2xl",children:"DataView Interaction Events"}),_(we,{className:"text-muted-foreground",children:["Track ",u(zt,{children:"data_view_interaction"})," events for view mode, density, data depth, search, filters, sorting, and pagination. The in-memory store summarizes those events, and the analyzer can derive a scoped preferred collection mode from valid interaction counts."]}),u(Le,{language:"typescript",code:Eo})]}),_(ne,{className:"space-y-4",children:[u(Ne,{className:"font-bold text-2xl",children:"Analyzer"}),u(we,{className:"text-muted-foreground",children:"Summarize events and highlight unused UI, frequent fields, and workflow bottlenecks."}),u(Le,{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: [...] }`})]}),ne("div",{className:"space-y-4",children:[R("h2",{className:"font-bold text-2xl",children:"Adapter"}),R("p",{className:"text-muted-foreground",children:"Convert insights into overlays or workflow extension hints."}),R(Te,{language:"typescript",code:`import { insightsToOverlaySuggestion } from '@contractspec/lib.personalization/adapter';
+// {
+//   unusedFields: ['internalNotes'],
+//   workflowBottlenecks: [...],
+//   dataViewPreferences: {
+//     'crm.accounts': { preferredViewMode: 'grid' }
+//   }
+// }`})]}),_(ne,{className:"space-y-4",children:[u(Ne,{className:"font-bold text-2xl",children:"Adapter"}),u(we,{className:"text-muted-foreground",children:"Convert insights into overlays or workflow extension hints."}),u(Le,{language:"typescript",code:`import { insightsToOverlaySuggestion } from '@contractspec/lib.personalization/adapter';
 
 const overlay = insightsToOverlaySuggestion(insights, {
   overlayId: 'acme-order-form',
   tenantId: 'acme',
   capability: 'billing.createOrder',
-});`})]}),ne("div",{className:"flex items-center gap-4 pt-4",children:[R(ft,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),ne(ft,{href:"/docs/libraries/overlay-engine",className:"btn-primary",children:["Next: Overlay Engine ",R(qa,{size:16})]})]})]})}import{CodeBlock as bt,InstallCommand as Qa}from"@contractspec/lib.design-system";import vt from"@contractspec/lib.ui-link";import{ChevronRight as Ka}from"lucide-react";import{jsx as I,jsxs as q}from"react/jsx-runtime";function Ja(){return q("div",{className:"space-y-8",children:[q("div",{className:"space-y-4",children:[I("h1",{className:"font-bold text-4xl",children:"Progressive Delivery Library"}),q("p",{className:"text-lg text-muted-foreground",children:["The ",I("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."]})]}),q("div",{className:"space-y-4",children:[I("h2",{className:"font-bold text-2xl",children:"Installation"}),I(Qa,{package:"@contractspec/lib.progressive-delivery"})]}),q("div",{className:"space-y-4",children:[I("h2",{className:"font-bold text-2xl",children:"Define a Strategy"}),I(bt,{language:"typescript",code:`import { DeploymentCoordinator, createDefaultCanaryController, TrafficShifter, RollbackManager } from '@contractspec/lib.progressive-delivery';
+});`})]}),_(ne,{className:"space-y-4",children:[u(Ne,{className:"font-bold text-2xl",children:"Agent Prompt"}),u(we,{className:"text-muted-foreground",children:"Use this when asking an agent to wire DataView preferences while preserving the personalization/design-system boundary."}),u(Le,{language:"markdown",code:Bo})]}),_(Po,{className:"items-center gap-4 pt-4",children:[u(Je,{href:"/docs/libraries",className:"btn-ghost",children:u(Qe,{children:"Back to Libraries"})}),_(Je,{href:"/docs/libraries/overlay-engine",className:"btn-primary",children:[u(Qe,{children:"Next: Overlay Engine"})," ",u(Do,{size:16})]})]})]})}import{CodeBlock as Gt,InstallCommand as Wo}from"@contractspec/lib.design-system";import Ft from"@contractspec/lib.ui-link";import{ChevronRight as zo}from"lucide-react";import{jsx as D,jsxs as V}from"react/jsx-runtime";function Go(){return V("div",{className:"space-y-8",children:[V("div",{className:"space-y-4",children:[D("h1",{className:"font-bold text-4xl",children:"Progressive Delivery Library"}),V("p",{className:"text-lg text-muted-foreground",children:["The ",D("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:[D("h2",{className:"font-bold text-2xl",children:"Installation"}),D(Wo,{package:"@contractspec/lib.progressive-delivery"})]}),V("div",{className:"space-y-4",children:[D("h2",{className:"font-bold text-2xl",children:"Define a Strategy"}),D(Gt,{language:"typescript",code:`import { DeploymentCoordinator, createDefaultCanaryController, TrafficShifter, RollbackManager } from '@contractspec/lib.progressive-delivery';
 
 const strategy = {
   target: { name: 'billing.createInvoice', version: 7 },
@@ -692,7 +1050,7 @@ const strategy = {
     latencyP99: 500,
     latencyP95: 250,
   },
-};`})]}),q("div",{className:"space-y-4",children:[I("h2",{className:"font-bold text-2xl",children:"Run the Coordinator"}),I(bt,{language:"typescript",code:`const eventBus = new DeploymentEventBus();
+};`})]}),V("div",{className:"space-y-4",children:[D("h2",{className:"font-bold text-2xl",children:"Run the Coordinator"}),D(Gt,{language:"typescript",code:`const eventBus = new DeploymentEventBus();
 const controller = createDefaultCanaryController(strategy, fetchMetrics, eventBus);
 const coordinator = new DeploymentCoordinator({
   strategy,
@@ -703,7 +1061,7 @@ const coordinator = new DeploymentCoordinator({
   eventBus,
 });
 
-const result = await coordinator.run();`}),q("p",{className:"text-muted-foreground text-sm",children:["The coordinator emits ",I("code",{children:"stage_started"}),","," ",I("code",{children:"stage_failed"}),", and ",I("code",{children:"rolled_back"})," events, making it easy to power dashboards or alerting workflows."]})]}),q("div",{className:"space-y-4",children:[I("h2",{className:"font-bold text-2xl",children:"Blue-Green Swap"}),q("p",{className:"text-muted-foreground text-sm",children:["Switch to ",I("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."]})]}),q("div",{className:"flex items-center gap-4 pt-4",children:[I(vt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),q(vt,{href:"/docs/libraries/resilience",className:"btn-primary",children:["Next: Resilience ",I(Ka,{size:16})]})]})]})}import{CodeBlock as Le,InstallCommand as Za}from"@contractspec/lib.design-system";import yt from"@contractspec/lib.ui-link";import{ChevronRight as Xa}from"lucide-react";import{jsx as A,jsxs as j}from"react/jsx-runtime";function Ya(){return j("div",{className:"space-y-8",children:[j("div",{className:"space-y-4",children:[A("h1",{className:"font-bold text-4xl",children:"Resilience Library"}),j("p",{className:"text-lg text-muted-foreground",children:["The ",A("code",{children:"@contractspec/lib.resilience"})," library provides primitives to handle failures gracefully."]})]}),j("div",{className:"space-y-4",children:[A("h2",{className:"font-bold text-2xl",children:"Installation"}),A(Za,{package:"@contractspec/lib.resilience"})]}),j("div",{className:"space-y-4",children:[A("h2",{className:"font-bold text-2xl",children:"Circuit Breaker"}),A("p",{className:"text-muted-foreground",children:"Prevent cascading failures by stopping calls to a failing dependency."}),A(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 ",D("code",{children:"stage_started"}),","," ",D("code",{children:"stage_failed"}),", and ",D("code",{children:"rolled_back"})," events, making it easy to power dashboards or alerting workflows."]})]}),V("div",{className:"space-y-4",children:[D("h2",{className:"font-bold text-2xl",children:"Blue-Green Swap"}),V("p",{className:"text-muted-foreground text-sm",children:["Switch to ",D("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:[D(Ft,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),V(Ft,{href:"/docs/libraries/resilience",className:"btn-primary",children:["Next: Resilience ",D(zo,{size:16})]})]})]})}import{CodeBlock as Ze,InstallCommand as Fo}from"@contractspec/lib.design-system";import _t from"@contractspec/lib.ui-link";import{ChevronRight as _o}from"lucide-react";import{jsx as M,jsxs as ce}from"react/jsx-runtime";function qo(){return ce("div",{className:"space-y-8",children:[ce("div",{className:"space-y-4",children:[M("h1",{className:"font-bold text-4xl",children:"Resilience Library"}),ce("p",{className:"text-lg text-muted-foreground",children:["The ",M("code",{children:"@contractspec/lib.resilience"})," library provides primitives to handle failures gracefully."]})]}),ce("div",{className:"space-y-4",children:[M("h2",{className:"font-bold text-2xl",children:"Installation"}),M(Fo,{package:"@contractspec/lib.resilience"})]}),ce("div",{className:"space-y-4",children:[M("h2",{className:"font-bold text-2xl",children:"Circuit Breaker"}),M("p",{className:"text-muted-foreground",children:"Prevent cascading failures by stopping calls to a failing dependency."}),M(Ze,{language:"typescript",code:`import { CircuitBreaker } from '@contractspec/lib.resilience/circuit-breaker';
 
 const breaker = new CircuitBreaker({
   failureThreshold: 5,
@@ -712,19 +1070,19 @@ const breaker = new CircuitBreaker({
 
 const result = await breaker.execute(async () => {
   return await fetch('https://api.stripe.com/v1/charges');
-});`})]}),j("div",{className:"space-y-4",children:[A("h2",{className:"font-bold text-2xl",children:"Retry"}),A("p",{className:"text-muted-foreground",children:"Automatically retry transient failures with exponential backoff."}),A(Le,{language:"typescript",code:`import { retry } from '@contractspec/lib.resilience/retry';
+});`})]}),ce("div",{className:"space-y-4",children:[M("h2",{className:"font-bold text-2xl",children:"Retry"}),M("p",{className:"text-muted-foreground",children:"Automatically retry transient failures with exponential backoff."}),M(Ze,{language:"typescript",code:`import { retry } from '@contractspec/lib.resilience/retry';
 
 const result = await retry(
   async () => fetchUser(id),
   3, // retries
   1000, // initial delay
   true // backoff
-);`})]}),j("div",{className:"space-y-4",children:[A("h2",{className:"font-bold text-2xl",children:"Timeout & Fallback"}),A("p",{className:"text-muted-foreground",children:"Set hard limits on execution time and provide default values on failure."}),A(Le,{language:"typescript",code:`import { timeout, fallback } from '@contractspec/lib.resilience';
+);`})]}),ce("div",{className:"space-y-4",children:[M("h2",{className:"font-bold text-2xl",children:"Timeout & Fallback"}),M("p",{className:"text-muted-foreground",children:"Set hard limits on execution time and provide default values on failure."}),M(Ze,{language:"typescript",code:`import { timeout, fallback } from '@contractspec/lib.resilience';
 
 const result = await fallback(
   () => timeout(slowOperation, 5000),
   defaultValue
-);`})]}),j("div",{className:"flex items-center gap-4 pt-4",children:[A(yt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),j(yt,{href:"/docs/libraries/testing",className:"btn-primary",children:["Next: Testing ",A(Xa,{size:16})]})]})]})}import{CodeBlock as $a,InstallCommand as xa}from"@contractspec/lib.design-system";import Re from"@contractspec/lib.ui-link";import{ChevronRight as ja}from"lucide-react";import{jsx as m,jsxs as g}from"react/jsx-runtime";function eo(){return g("div",{className:"space-y-8",children:[g("div",{className:"space-y-4",children:[m("h1",{className:"font-bold text-4xl",children:"Runtime Libraries"}),m("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."})]}),g("div",{className:"space-y-4",children:[m("h2",{className:"font-bold text-2xl",children:"Installation"}),m(xa,{package:"@contractspec/lib.presentation-runtime-react"})]}),g("div",{className:"space-y-4",children:[m("h2",{className:"font-bold text-2xl",children:"Libraries"}),g("div",{className:"space-y-6",children:[g("div",{className:"card-subtle p-6",children:[m("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-core"}),g("p",{className:"mt-2 text-muted-foreground text-sm",children:[m("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)."]})]}),g("div",{className:"card-subtle p-6",children:[m("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-react"}),g("p",{className:"mt-2 text-muted-foreground text-sm",children:[m("strong",{children:"React Bindings"}),". Hooks (`useWorkflow`) and components (`WorkflowStepper`, `WorkflowStepRenderer`) for React Web applications. Integrates with `ui-kit-web`."]})]}),g("div",{className:"card-subtle p-6",children:[m("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-react-native"}),g("p",{className:"mt-2 text-muted-foreground text-sm",children:[m("strong",{children:"React Native Bindings"}),". Optimized for mobile experiences. Handles native navigation integration and uses universal components from `ui-kit`."]})]})]})]}),g("div",{className:"space-y-4",children:[m("h2",{className:"font-bold text-2xl",children:"Example: React Workflow"}),m($a,{language:"tsx",code:`import { useWorkflow, WorkflowStepRenderer } from '@contractspec/lib.presentation-runtime-react';
+);`})]}),ce("div",{className:"flex items-center gap-4 pt-4",children:[M(_t,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),ce(_t,{href:"/docs/libraries/testing",className:"btn-primary",children:["Next: Testing ",M(_o,{size:16})]})]})]})}import{CodeBlock as Ho,InstallCommand as Ko}from"@contractspec/lib.design-system";import Ve from"@contractspec/lib.ui-link";import{ChevronRight as Qo}from"lucide-react";import{jsx as f,jsxs as v}from"react/jsx-runtime";function Jo(){return v("div",{className:"space-y-8",children:[v("div",{className:"space-y-4",children:[f("h1",{className:"font-bold text-4xl",children:"Runtime Libraries"}),f("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."})]}),v("div",{className:"space-y-4",children:[f("h2",{className:"font-bold text-2xl",children:"Installation"}),f(Ko,{package:"@contractspec/lib.presentation-runtime-react"})]}),v("div",{className:"space-y-4",children:[f("h2",{className:"font-bold text-2xl",children:"Libraries"}),v("div",{className:"space-y-6",children:[v("div",{className:"card-subtle p-6",children:[f("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-core"}),v("p",{className:"mt-2 text-muted-foreground text-sm",children:[f("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)."]})]}),v("div",{className:"card-subtle p-6",children:[f("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-react"}),v("p",{className:"mt-2 text-muted-foreground text-sm",children:[f("strong",{children:"React Bindings"}),". Hooks (`useWorkflow`) and components (`WorkflowStepper`, `WorkflowStepRenderer`) for React Web applications. Integrates with `ui-kit-web`."]})]}),v("div",{className:"card-subtle p-6",children:[f("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-react-native"}),v("p",{className:"mt-2 text-muted-foreground text-sm",children:[f("strong",{children:"React Native Bindings"}),". Optimized for mobile experiences. Handles native navigation integration and uses universal components from `ui-kit`."]})]})]})]}),v("div",{className:"space-y-4",children:[f("h2",{className:"font-bold text-2xl",children:"Example: React Workflow"}),f(Ho,{language:"tsx",code:`import { useWorkflow, WorkflowStepRenderer } from '@contractspec/lib.presentation-runtime-react';
 import { OnboardingFlow } from './specs/onboarding';
 
 export function OnboardingPage() {
@@ -764,7 +1122,7 @@ export function OnboardingPage() {
       </div>
     </div>
   );
-}`})]}),g("div",{className:"space-y-4",children:[m("h2",{className:"font-bold text-2xl",children:"Architecture"}),m("p",{className:"text-muted-foreground",children:'The runtime follows a "render-loop" pattern:'}),g("ol",{className:"list-inside list-decimal space-y-2 text-muted-foreground",children:[g("li",{children:[m("strong",{children:"Spec"}),": Defines the flow, fields, and validation rules."]}),g("li",{children:[m("strong",{children:"Core"}),": Tracks current step, data state, and validation errors."]}),g("li",{children:[m("strong",{children:"Renderer"}),": Maps spec fields to UI components (Input, Select, etc.)."]}),g("li",{children:[m("strong",{children:"User"}),": Interacts with components, updating core state."]}),g("li",{children:[m("strong",{children:"Policy"}),": (Optional) Re-evaluates visibility on every change."]})]})]}),g("div",{className:"card-subtle space-y-3 p-6",children:[m("h2",{className:"font-bold text-2xl",children:"Related reading"}),g("p",{className:"text-muted-foreground",children:["For the full React and React Native layering story across runtime, primitives, and composed components, read"," ",m(Re,{href:"/docs/libraries/cross-platform-ui",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Cross-platform UI"}),"."]})]}),g("div",{className:"flex items-center gap-4 pt-4",children:[m(Re,{href:"/docs/libraries/data-backend",className:"btn-ghost",children:"Previous: Data & Backend"}),g(Re,{href:"/docs/libraries",className:"btn-primary",children:["Back to Libraries ",m(ja,{size:16})]})]})]})}import{CodeBlock as Nt,InstallCommand as to}from"@contractspec/lib.design-system";import wt from"@contractspec/lib.ui-link";import{ChevronRight as ao}from"lucide-react";import{jsx as o,jsxs as h}from"react/jsx-runtime";function oo(){return h("div",{className:"space-y-8",children:[h("div",{className:"space-y-4",children:[o("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.schema"}),o("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."})]}),h("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Installation"}),o(to,{package:"@contractspec/lib.schema"})]}),h("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Core Exports"}),h("ul",{className:"space-y-2 text-muted-foreground",children:[h("li",{children:[o("code",{className:"rounded bg-background/50 px-2 py-1",children:"SchemaModel"}),": Compose fields into typed object models"]}),h("li",{children:[o("code",{className:"rounded bg-background/50 px-2 py-1",children:"ScalarTypeEnum"}),": Common scalar types (NonEmptyString, Email, DateTime, etc.)"]}),h("li",{children:[o("code",{className:"rounded bg-background/50 px-2 py-1",children:"defineEnum"}),": Create type-safe enums"]}),h("li",{children:[o("code",{className:"rounded bg-background/50 px-2 py-1",children:"FieldType"}),": Wrap scalars with Zod/GraphQL/JSON Schema"]})]})]}),h("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Example: Basic Schema"}),o(Nt,{language:"typescript",code:`import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
+}`})]}),v("div",{className:"space-y-4",children:[f("h2",{className:"font-bold text-2xl",children:"Architecture"}),f("p",{className:"text-muted-foreground",children:'The runtime follows a "render-loop" pattern:'}),v("ol",{className:"list-inside list-decimal space-y-2 text-muted-foreground",children:[v("li",{children:[f("strong",{children:"Spec"}),": Defines the flow, fields, and validation rules."]}),v("li",{children:[f("strong",{children:"Core"}),": Tracks current step, data state, and validation errors."]}),v("li",{children:[f("strong",{children:"Renderer"}),": Maps spec fields to UI components (Input, Select, etc.)."]}),v("li",{children:[f("strong",{children:"User"}),": Interacts with components, updating core state."]}),v("li",{children:[f("strong",{children:"Policy"}),": (Optional) Re-evaluates visibility on every change."]})]})]}),v("div",{className:"card-subtle space-y-3 p-6",children:[f("h2",{className:"font-bold text-2xl",children:"Related reading"}),v("p",{className:"text-muted-foreground",children:["For the full React and React Native layering story across runtime, primitives, and composed components, read"," ",f(Ve,{href:"/docs/libraries/cross-platform-ui",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Cross-platform UI"}),"."]})]}),v("div",{className:"flex items-center gap-4 pt-4",children:[f(Ve,{href:"/docs/libraries/data-backend",className:"btn-ghost",children:"Previous: Data & Backend"}),v(Ve,{href:"/docs/libraries",className:"btn-primary",children:["Back to Libraries ",f(Qo,{size:16})]})]})]})}import{CodeBlock as qt,InstallCommand as Zo}from"@contractspec/lib.design-system";import Ht from"@contractspec/lib.ui-link";import{ChevronRight as Vo}from"lucide-react";import{jsx as r,jsxs as y}from"react/jsx-runtime";function Yo(){return y("div",{className:"space-y-8",children:[y("div",{className:"space-y-4",children:[r("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.schema"}),r("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."})]}),y("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Installation"}),r(Zo,{package:"@contractspec/lib.schema"})]}),y("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Core Exports"}),y("ul",{className:"space-y-2 text-muted-foreground",children:[y("li",{children:[r("code",{className:"rounded bg-background/50 px-2 py-1",children:"SchemaModel"}),": Compose fields into typed object models"]}),y("li",{children:[r("code",{className:"rounded bg-background/50 px-2 py-1",children:"ScalarTypeEnum"}),": Common scalar types (NonEmptyString, Email, DateTime, etc.)"]}),y("li",{children:[r("code",{className:"rounded bg-background/50 px-2 py-1",children:"defineEnum"}),": Create type-safe enums"]}),y("li",{children:[r("code",{className:"rounded bg-background/50 px-2 py-1",children:"FieldType"}),": Wrap scalars with Zod/GraphQL/JSON Schema"]})]})]}),y("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Example: Basic Schema"}),r(qt,{language:"typescript",code:`import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
 
 export const CreateSpotInput = new SchemaModel({
   name: 'CreateSpotInput',
@@ -782,7 +1140,7 @@ const zodSchema = CreateSpotInput.getZod();
 const pothosName = CreateSpotInput.getPothosInput();
 
 // Get JSON Schema
-const jsonSchema = CreateSpotInput.getJsonSchema();`})]}),h("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Example: Enums"}),o(Nt,{language:"typescript",code:`import { defineEnum, SchemaModel } from '@contractspec/lib.schema';
+const jsonSchema = CreateSpotInput.getJsonSchema();`})]}),y("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Example: Enums"}),r(qt,{language:"typescript",code:`import { defineEnum, SchemaModel } from '@contractspec/lib.schema';
 
 const Weekday = defineEnum('Weekday', [
   'MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU',
@@ -797,19 +1155,19 @@ const RecurrenceRule = new SchemaModel({
     },
     byWeekday: { type: Weekday, isOptional: true, isArray: true },
   },
-});`})]}),h("div",{className:"space-y-4",children:[o("h2",{className:"font-bold text-2xl",children:"Available Scalars"}),h("div",{className:"grid gap-4 md:grid-cols-2",children:[h("div",{className:"card-subtle p-4",children:[o("h3",{className:"mb-2 font-semibold",children:"Strings"}),h("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[o("li",{children:o("code",{children:"NonEmptyString()"})}),o("li",{children:o("code",{children:"Email()"})}),o("li",{children:o("code",{children:"PhoneNumber()"})}),o("li",{children:o("code",{children:"CountryCode()"})}),o("li",{children:o("code",{children:"Locale()"})}),o("li",{children:o("code",{children:"TimeZone()"})})]})]}),h("div",{className:"card-subtle p-4",children:[o("h3",{className:"mb-2 font-semibold",children:"Numbers"}),h("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[o("li",{children:o("code",{children:"PositiveNumber()"})}),o("li",{children:o("code",{children:"Latitude()"})}),o("li",{children:o("code",{children:"Longitude()"})})]})]}),h("div",{className:"card-subtle p-4",children:[o("h3",{className:"mb-2 font-semibold",children:"Dates & Times"}),h("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[o("li",{children:o("code",{children:"Date()"})}),o("li",{children:o("code",{children:"DateTime()"})})]})]}),h("div",{className:"card-subtle p-4",children:[o("h3",{className:"mb-2 font-semibold",children:"Generic"}),h("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[o("li",{children:o("code",{children:"String()"})}),o("li",{children:o("code",{children:"JSON()"})})]})]})]})]}),h("div",{className:"flex items-center gap-4 pt-4",children:[o(wt,{href:"/docs/libraries/contracts",className:"btn-ghost",children:"Previous: Contracts"}),h(wt,{href:"/docs/libraries/ui-kit",className:"btn-primary",children:["Next: UI Kit ",o(ao,{size:16})]})]})]})}import{CodeBlock as kt,InstallCommand as io}from"@contractspec/lib.design-system";import St from"@contractspec/lib.ui-link";import{ChevronRight as ro}from"lucide-react";import{jsx as U,jsxs as X}from"react/jsx-runtime";function no(){return X("div",{className:"space-y-8",children:[X("div",{className:"space-y-4",children:[U("h1",{className:"font-bold text-4xl",children:"SLO Library"}),X("p",{className:"text-lg text-muted-foreground",children:[U("code",{children:"@contractspec/lib.slo"})," keeps service level objectives front and center\u2014declarative definitions, rolling snapshots, burn-rate math, and automated incidents."]})]}),X("div",{className:"space-y-4",children:[U("h2",{className:"font-bold text-2xl",children:"Installation"}),U(io,{package:"@contractspec/lib.slo"})]}),X("div",{className:"space-y-4",children:[U("h2",{className:"font-bold text-2xl",children:"Define Targets"}),U(kt,{language:"typescript",code:`const definition: SLODefinition = {
+});`})]}),y("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Available Scalars"}),y("div",{className:"grid gap-4 md:grid-cols-2",children:[y("div",{className:"card-subtle p-4",children:[r("h3",{className:"mb-2 font-semibold",children:"Strings"}),y("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[r("li",{children:r("code",{children:"NonEmptyString()"})}),r("li",{children:r("code",{children:"Email()"})}),r("li",{children:r("code",{children:"PhoneNumber()"})}),r("li",{children:r("code",{children:"CountryCode()"})}),r("li",{children:r("code",{children:"Locale()"})}),r("li",{children:r("code",{children:"TimeZone()"})})]})]}),y("div",{className:"card-subtle p-4",children:[r("h3",{className:"mb-2 font-semibold",children:"Numbers"}),y("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[r("li",{children:r("code",{children:"PositiveNumber()"})}),r("li",{children:r("code",{children:"Latitude()"})}),r("li",{children:r("code",{children:"Longitude()"})})]})]}),y("div",{className:"card-subtle p-4",children:[r("h3",{className:"mb-2 font-semibold",children:"Dates & Times"}),y("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[r("li",{children:r("code",{children:"Date()"})}),r("li",{children:r("code",{children:"DateTime()"})})]})]}),y("div",{className:"card-subtle p-4",children:[r("h3",{className:"mb-2 font-semibold",children:"Generic"}),y("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[r("li",{children:r("code",{children:"String()"})}),r("li",{children:r("code",{children:"JSON()"})})]})]})]})]}),y("div",{className:"flex items-center gap-4 pt-4",children:[r(Ht,{href:"/docs/libraries/contracts",className:"btn-ghost",children:"Previous: Contracts"}),y(Ht,{href:"/docs/libraries/ui-kit",className:"btn-primary",children:["Next: UI Kit ",r(Vo,{size:16})]})]})]})}import{CodeBlock as Kt,InstallCommand as Xo}from"@contractspec/lib.design-system";import Qt from"@contractspec/lib.ui-link";import{ChevronRight as $o}from"lucide-react";import{jsx as q,jsxs as ee}from"react/jsx-runtime";function xo(){return ee("div",{className:"space-y-8",children:[ee("div",{className:"space-y-4",children:[q("h1",{className:"font-bold text-4xl",children:"SLO Library"}),ee("p",{className:"text-lg text-muted-foreground",children:[q("code",{children:"@contractspec/lib.slo"})," keeps service level objectives front and center\u2014declarative definitions, rolling snapshots, burn-rate math, and automated incidents."]})]}),ee("div",{className:"space-y-4",children:[q("h2",{className:"font-bold text-2xl",children:"Installation"}),q(Xo,{package:"@contractspec/lib.slo"})]}),ee("div",{className:"space-y-4",children:[q("h2",{className:"font-bold text-2xl",children:"Define Targets"}),q(Kt,{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 },
-};`})]}),X("div",{className:"space-y-4",children:[U("h2",{className:"font-bold text-2xl",children:"Monitor Burn Rate"}),U(kt,{language:"typescript",code:`const monitor = new SLOMonitor({ definition, incidentManager });
+};`})]}),ee("div",{className:"space-y-4",children:[q("h2",{className:"font-bold text-2xl",children:"Monitor Burn Rate"}),q(Kt,{language:"typescript",code:`const monitor = new SLOMonitor({ definition, incidentManager });
 const { snapshot, burnRate } = monitor.recordWindow({
   good: 12500,
   bad: 3,
   latencyP99: 420,
   latencyP95: 210,
-});`}),X("p",{className:"text-muted-foreground text-sm",children:["When burn rate exceeds the configured thresholds the monitor calls your",U("code",{children:"IncidentManager"}),", providing the snapshot that triggered the alert."]})]}),X("div",{className:"space-y-4",children:[U("h2",{className:"font-bold text-2xl",children:"History & Reporting"}),U("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."})]}),X("div",{className:"flex items-center gap-4 pt-4",children:[U(St,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),X(St,{href:"/docs/libraries/cost-tracking",className:"btn-primary",children:["Next: Cost Tracking ",U(ro,{size:16})]})]})]})}import{CodeBlock as Ct,InstallCommand as co}from"@contractspec/lib.design-system";import Tt from"@contractspec/lib.ui-link";import{ChevronRight as so}from"lucide-react";import{jsx as P,jsxs as G}from"react/jsx-runtime";function lo(){return G("div",{className:"space-y-8",children:[G("div",{className:"space-y-4",children:[P("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.support-bot"}),P("p",{className:"text-lg text-muted-foreground",children:"Build AI-first support flows using drop-in classifiers, knowledge-grounded resolvers, and tone-aware responders\u2014all wired into the agent runner."})]}),G("div",{className:"space-y-4",children:[P("h2",{className:"font-bold text-2xl",children:"Installation"}),P(co,{package:"@contractspec/lib.support-bot"})]}),G("div",{className:"space-y-3",children:[P("h2",{className:"font-bold text-2xl",children:"Wire the primitives"}),P(Ct,{language:"typescript",code:`import { TicketClassifier, TicketResolver, AutoResponder } from '@contractspec/lib.support-bot';
+});`}),ee("p",{className:"text-muted-foreground text-sm",children:["When burn rate exceeds the configured thresholds the monitor calls your",q("code",{children:"IncidentManager"}),", providing the snapshot that triggered the alert."]})]}),ee("div",{className:"space-y-4",children:[q("h2",{className:"font-bold text-2xl",children:"History & Reporting"}),q("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."})]}),ee("div",{className:"flex items-center gap-4 pt-4",children:[q(Qt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),ee(Qt,{href:"/docs/libraries/cost-tracking",className:"btn-primary",children:["Next: Cost Tracking ",q($o,{size:16})]})]})]})}import{CodeBlock as Jt,InstallCommand as jo}from"@contractspec/lib.design-system";import Zt from"@contractspec/lib.ui-link";import{ChevronRight as ei}from"lucide-react";import{jsx as E,jsxs as H}from"react/jsx-runtime";function ti(){return H("div",{className:"space-y-8",children:[H("div",{className:"space-y-4",children:[E("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.support-bot"}),E("p",{className:"text-lg text-muted-foreground",children:"Build AI-first support flows using drop-in classifiers, knowledge-grounded resolvers, and tone-aware responders\u2014all wired into the agent runner."})]}),H("div",{className:"space-y-4",children:[E("h2",{className:"font-bold text-2xl",children:"Installation"}),E(jo,{package:"@contractspec/lib.support-bot"})]}),H("div",{className:"space-y-3",children:[E("h2",{className:"font-bold text-2xl",children:"Wire the primitives"}),E(Jt,{language:"typescript",code:`import { TicketClassifier, TicketResolver, AutoResponder } from '@contractspec/lib.support-bot';
 
 const classifier = new TicketClassifier();
 const resolver = new TicketResolver({ knowledge });
@@ -817,10 +1175,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);`})]}),G("div",{className:"space-y-3",children:[P("h2",{className:"font-bold text-2xl",children:"Expose as agent tools"}),P(Ct,{language:"typescript",code:`import { createSupportTools } from '@contractspec/lib.support-bot/bot';
+const draft = await responder.draft(ticket, resolution, classification);`})]}),H("div",{className:"space-y-3",children:[E("h2",{className:"font-bold text-2xl",children:"Expose as agent tools"}),E(Jt,{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.`})]}),G("div",{className:"space-y-3",children:[P("h2",{className:"font-bold text-2xl",children:"Included modules"}),G("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[G("li",{children:[P("strong",{children:"TicketClassifier"}),": heuristics + optional LLM validation for category/priority."]}),G("li",{children:[P("strong",{children:"TicketResolver"}),": RAG resolver that can plug into any knowledge retriever."]}),G("li",{children:[P("strong",{children:"AutoResponder"}),": generates drafts, citations, and tone-aware copy."]}),G("li",{children:[P("strong",{children:"SupportFeedbackLoop"}),": track auto-resolution rates and sentiment trends."]})]})]}),G("div",{className:"flex items-center gap-4 pt-4",children:[P(Tt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),G(Tt,{href:"/docs/libraries/growth",className:"btn-primary",children:["Next: Growth ",P(so,{size:16})]})]})]})}import{CodeBlock as Ie,InstallCommand as po}from"@contractspec/lib.design-system";import Lt from"@contractspec/lib.ui-link";import{ChevronRight as mo}from"lucide-react";import{jsx as D,jsxs as ee}from"react/jsx-runtime";function uo(){return ee("div",{className:"space-y-8",children:[ee("div",{className:"space-y-4",children:[D("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.testing"}),D("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."})]}),ee("div",{className:"space-y-4",children:[D("h2",{className:"font-bold text-2xl",children:"Installation"}),D(po,{package:"@contractspec/lib.testing"})]}),ee("div",{className:"space-y-3",children:[D("h2",{className:"font-bold text-2xl",children:"Record traffic"}),D(Ie,{language:"typescript",code:`import {
+// Pass these tools into your host runtime or agent adapter.`})]}),H("div",{className:"space-y-3",children:[E("h2",{className:"font-bold text-2xl",children:"Included modules"}),H("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[H("li",{children:[E("strong",{children:"TicketClassifier"}),": heuristics + optional LLM validation for category/priority."]}),H("li",{children:[E("strong",{children:"TicketResolver"}),": RAG resolver that can plug into any knowledge retriever."]}),H("li",{children:[E("strong",{children:"AutoResponder"}),": generates drafts, citations, and tone-aware copy."]}),H("li",{children:[E("strong",{children:"SupportFeedbackLoop"}),": track auto-resolution rates and sentiment trends."]})]})]}),H("div",{className:"flex items-center gap-4 pt-4",children:[E(Zt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),H(Zt,{href:"/docs/libraries/growth",className:"btn-primary",children:["Next: Growth ",E(ei,{size:16})]})]})]})}import{CodeBlock as Ye,InstallCommand as ai}from"@contractspec/lib.design-system";import Vt from"@contractspec/lib.ui-link";import{ChevronRight as oi}from"lucide-react";import{jsx as B,jsxs as se}from"react/jsx-runtime";function ii(){return se("div",{className:"space-y-8",children:[se("div",{className:"space-y-4",children:[B("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.testing"}),B("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."})]}),se("div",{className:"space-y-4",children:[B("h2",{className:"font-bold text-2xl",children:"Installation"}),B(ai,{package:"@contractspec/lib.testing"})]}),se("div",{className:"space-y-3",children:[B("h2",{className:"font-bold text-2xl",children:"Record traffic"}),B(Ye,{language:"typescript",code:`import {
   TrafficRecorder,
   InMemoryTrafficStore,
 } from '@contractspec/lib.testing/recorder';
@@ -840,7 +1198,7 @@ await recorder.record({
   output,
   success: true,
   tenantId: ctx.organizationId ?? undefined,
-});`})]}),ee("div",{className:"space-y-3",children:[D("h2",{className:"font-bold text-2xl",children:"Generate suites"}),D(Ie,{language:"typescript",code:`import { GoldenTestGenerator } from '@contractspec/lib.testing';
+});`})]}),se("div",{className:"space-y-3",children:[B("h2",{className:"font-bold text-2xl",children:"Generate suites"}),B(Ye,{language:"typescript",code:`import { GoldenTestGenerator } from '@contractspec/lib.testing';
 
 const generator = new GoldenTestGenerator();
 const code = generator.generate(snapshots, {
@@ -848,7 +1206,48 @@ const code = generator.generate(snapshots, {
   runnerImport: './tests/run-operation',
   runnerFunction: 'runOrdersCommand',
   framework: 'vitest',
-});`})]}),ee("div",{className:"space-y-3",children:[D("h2",{className:"font-bold text-2xl",children:"CLI workflow"}),D(Ie,{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"})]}),D("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)=>ee("div",{className:"card-subtle space-y-2 p-4",children:[D("h3",{className:"font-semibold text-lg",children:e.title}),D("p",{className:"text-muted-foreground text-sm",children:e.description})]},e.title))}),ee("div",{className:"flex items-center gap-4 pt-4",children:[D(Lt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),ee(Lt,{href:"/docs/libraries/resilience",className:"btn-primary",children:["Next: Resilience ",D(mo,{size:16})]})]})]})}import{CodeBlock as go,InstallCommand as ho}from"@contractspec/lib.design-system";import he from"@contractspec/lib.ui-link";import{ChevronRight as fo}from"lucide-react";import{jsx as i,jsxs as u}from"react/jsx-runtime";var bo=`import { DataTable } from '@contractspec/lib.ui-kit/ui/data-table';
+});`})]}),se("div",{className:"space-y-3",children:[B("h2",{className:"font-bold text-2xl",children:"CLI workflow"}),B(Ye,{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"})]}),B("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((a)=>se("div",{className:"card-subtle space-y-2 p-4",children:[B("h3",{className:"font-semibold text-lg",children:a.title}),B("p",{className:"text-muted-foreground text-sm",children:a.description})]},a.title))}),se("div",{className:"flex items-center gap-4 pt-4",children:[B(Vt,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),se(Vt,{href:"/docs/libraries/resilience",className:"btn-primary",children:["Next: Resilience ",B(oi,{size:16})]})]})]})}var Yt=["@contractspec/lib.contracts-spec","@contractspec/lib.translation-runtime"],Xt=`import { createTranslationRuntime } from '@contractspec/lib.translation-runtime';
+import { checkoutMessages } from './translations/checkout.messages';
+
+const runtime = createTranslationRuntime({
+  catalogs: [checkoutMessages],
+  locale: 'fr-FR',
+  fallbackLocales: ['fr', 'en-US'],
+  onDiagnostic: (diagnostic) => reportTranslationIssue(diagnostic),
+});
+
+const label = runtime.t('checkout.pay', {
+  amount: 4200,
+  currency: 'EUR',
+});`,$t=`import { createInstance } from 'i18next';
+import {
+  createI18nextInitOptions,
+  exportContractSpecToI18next,
+} from '@contractspec/lib.translation-runtime/i18next';
+
+const exported = exportContractSpecToI18next([checkoutMessages], {
+  locale: 'en-US',
+  assumeIcuFormatter: true,
+});
+const { options, diagnostics } = createI18nextInitOptions(exported, {
+  lng: 'en-US',
+});
+
+const i18next = createInstance();
+await i18next.init(options);
+reportAdapterDiagnostics(diagnostics);`,xt=`// Server: negotiate once, preload catalogs, and serialize the runtime snapshot.
+const runtime = createTranslationRuntime({
+  catalogs,
+  locale: negotiatedLocale,
+  fallbackLocales,
+});
+const snapshot = runtime.createSnapshot();
+
+// Client: hydrate from the same snapshot so locale, resources, and fallback state match.
+const hydratedRuntime = createTranslationRuntime({ snapshot });`,jt=["Keep TranslationSpec as the source of truth; do not flatten metadata into i18next JSON as the canonical model.","Keep stable bundle identity in TranslationSpec.meta.key and keep BCP 47 language tags in TranslationSpec.locale.","Use ICU messages for plural, select, selectordinal, number, date, currency, list, and relative-time formatting.","Create one runtime per SSR request when tenant, project, or user overrides are involved.","Serialize the same runtime snapshot or exported adapter resources used by the server for hydration.","Configure an ICU-capable i18next formatter plugin when rendering ContractSpec ICU messages through i18next.","Treat adapter diagnostics as release blockers in production pipelines instead of silently rendering raw keys."],ea=`You are integrating ContractSpec translations into a production app.
+Use @contractspec/lib.contracts-spec/translations as the canonical contract layer and @contractspec/lib.translation-runtime as the runtime layer.
+Keep locale variants separate from stable bundle keys, support BCP 47 tags, preserve ICU plural/select/selectordinal messages, and use request-scoped runtime instances for SSR.
+If the app already uses i18next, use @contractspec/lib.translation-runtime/i18next only as a downstream adapter. Do not make i18next the canonical translation model. Include diagnostics, fallback behavior, tenant/user override isolation, and hydration snapshot handling in the implementation and tests.`,ta=[{title:"Spec layer",body:"TranslationSpec owns keys, locales, domains, versions, owners, fallback declarations, direction, and validation metadata."},{title:"Runtime layer",body:"Runtime instances negotiate locales, apply fallback chains, resolve overrides, cache compiled messages, report diagnostics, and serialize SSR snapshots."},{title:"Adapter layer",body:"The i18next adapter projects ContractSpec specs or snapshots to resources and manifests for caller-owned i18next instances."}];import{CodeBlock as Ue,InstallCommand as ri}from"@contractspec/lib.design-system";import{HStack as aa,VStack as le}from"@contractspec/lib.design-system/layout";import{List as ni,ListItem as ci}from"@contractspec/lib.design-system/list";import{Code as Xe,H1 as si,H2 as Ie,H3 as li,P as ke,Text as de}from"@contractspec/lib.design-system/typography";import oa from"@contractspec/lib.ui-link";import{ChevronRight as di}from"lucide-react";import{jsx as p,jsxs as T}from"react/jsx-runtime";function pi(){return T(le,{className:"space-y-8",children:[T(le,{className:"space-y-4",children:[p(de,{className:"editorial-kicker",children:"Runtime and adapters"}),p(si,{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"Translation runtime and i18next adapter"}),p(ke,{className:"max-w-3xl text-lg text-muted-foreground leading-8",children:"Use ContractSpec as the canonical translation contract layer, then resolve and format messages through a framework-independent runtime. i18next is supported as an optional downstream adapter, not as the source of truth."})]}),T(le,{className:"space-y-4",children:[p(Ie,{className:"font-bold text-2xl",children:"Install the runtime"}),p(ri,{package:Yt}),T(ke,{className:"text-muted-foreground",children:[p(de,{children:"Add "}),p(Xe,{children:"i18next"}),T(de,{children:[" ","only when an app imports the adapter subpath. Core server, React, React Native, CLI, and test code can use the runtime without loading i18next."]})]})]}),p(aa,{className:"grid gap-4 md:grid-cols-3",children:ta.map((a)=>T(le,{className:"card-subtle space-y-2 p-5",children:[p(li,{className:"font-semibold text-lg",children:a.title}),p(ke,{className:"text-muted-foreground text-sm leading-7",children:a.body})]},a.title))}),T(le,{className:"space-y-4",children:[p(Ie,{className:"font-bold text-2xl",children:"Use the ContractSpec runtime"}),T(ke,{className:"text-muted-foreground",children:[p(de,{children:"The runtime consumes canonical "}),p(Xe,{children:"TranslationSpec[]"}),T(de,{children:[" ","catalogs, supports BCP 47 tags such as en-US, ar-EG, and zh-Hans, and delegates ICU parsing/formatting to a mature formatter engine instead of a custom parser."]})]}),p(Ue,{language:"typescript",code:Xt})]}),T(le,{className:"space-y-4",children:[p(Ie,{className:"font-bold text-2xl",children:"Project to i18next when needed"}),T(ke,{className:"text-muted-foreground",children:[p(de,{children:"Import from "}),p(Xe,{children:"@contractspec/lib.translation-runtime/i18next"}),T(de,{children:[" ","to export resources by locale, namespace, and message key. The namespace defaults to the stable bundle key, dotted message keys stay flat with keySeparator false, and metadata remains in a sidecar manifest."]})]}),p(Ue,{language:"typescript",code:$t})]}),T(le,{className:"space-y-4",children:[p(Ie,{className:"font-bold text-2xl",children:"SSR, streaming, and hydration"}),p(ke,{className:"text-muted-foreground",children:"Negotiate locale on the server, preload catalogs needed for streamed content, and hydrate the client from the same serialized state. Never let client-only language detection choose a different locale after the server has rendered."}),p(Ue,{language:"typescript",code:xt})]}),T(le,{className:"space-y-4",children:[p(Ie,{className:"font-bold text-2xl",children:"Production checklist"}),p(ni,{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:jt.map((a)=>p(ci,{children:a},a))})]}),T(le,{className:"space-y-4 rounded-xl border border-border p-6",children:[p(Ie,{className:"font-bold text-2xl",children:"Agent implementation prompt"}),p(ke,{className:"text-muted-foreground",children:"Use this prompt when asking an agent to wire translations into a web, server, or React Native surface without losing ContractSpec ownership."}),p(Ue,{language:"markdown",code:ea})]}),T(aa,{className:"flex flex-wrap items-center gap-4 pt-4",children:[p(oa,{href:"/docs/libraries/contracts",className:"btn-ghost",children:p(de,{children:"Translation contracts"})}),T(oa,{href:"/docs/libraries/design-system",className:"btn-primary",children:[p(de,{children:"Design-system integration"}),p(di,{size:16})]})]})]})}import{CodeBlock as mi,InstallCommand as ui}from"@contractspec/lib.design-system";import We from"@contractspec/lib.ui-link";import{ChevronRight as hi}from"lucide-react";import{jsx as n,jsxs as b}from"react/jsx-runtime";var gi=`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';
@@ -892,7 +1291,7 @@ export function NativeAccountGrid() {
       footer={\`Rows \${controller.rows.length}\`}
     />
   );
-}`;function vo(){return u("div",{className:"space-y-8",children:[u("div",{className:"space-y-4",children:[i("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ui-kit"}),u("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"}),"."]})]}),u("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"Installation"}),i(ho,{package:"@contractspec/lib.ui-kit"})]}),u("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"Key Features"}),u("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[u("li",{children:[i("strong",{children:"Universal"}),": Components render natively on iOS/Android and as standard HTML on web"]}),u("li",{children:[i("strong",{children:"Styled with NativeWind"}),": Uses Tailwind CSS classes for styling"]}),u("li",{children:[i("strong",{children:"Accessible"}),": Leverages ",i("code",{children:"@rn-primitives"})," ","(Radix UI for Native)"]}),u("li",{children:[i("strong",{children:"Atomic Design"}),": Exports atoms, molecules, and organisms"]})]})]}),u("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"Data table example"}),u("p",{className:"text-muted-foreground",children:["The canonical"," ",i(he,{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(go,{language:"tsx",code:bo})]}),u("div",{className:"space-y-4",children:[i("h2",{className:"font-bold text-2xl",children:"Core Components"}),u("div",{className:"grid gap-4 md:grid-cols-3",children:[u("div",{className:"card-subtle p-4",children:[i("h3",{className:"mb-2 font-semibold",children:"Form Controls"}),u("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"})]})]}),u("div",{className:"card-subtle p-4",children:[i("h3",{className:"mb-2 font-semibold",children:"Layout"}),u("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"})]})]}),u("div",{className:"card-subtle p-4",children:[i("h3",{className:"mb-2 font-semibold",children:"Feedback"}),u("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"})]})]})]})]}),u("div",{className:"card-subtle space-y-3 p-6",children:[i("h2",{className:"font-bold text-2xl",children:"Where this layer fits"}),u("p",{className:"text-muted-foreground",children:["Read"," ",i(he,{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."]})]}),u("div",{className:"flex items-center gap-4 pt-4",children:[i(he,{href:"/docs/libraries/schema",className:"btn-ghost",children:"Previous: Schema"}),u(he,{href:"/docs/libraries/ui-kit-web",className:"btn-primary",children:["Next: UI Kit Web ",i(fo,{size:16})]})]})]})}import{CodeBlock as yo,InstallCommand as No}from"@contractspec/lib.design-system";import fe from"@contractspec/lib.ui-link";import{ChevronRight as wo}from"lucide-react";import{jsx as O,jsxs as H}from"react/jsx-runtime";var ko=`import { DataTable } from '@contractspec/lib.ui-kit-web/ui/data-table';
+}`;function fi(){return b("div",{className:"space-y-8",children:[b("div",{className:"space-y-4",children:[n("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ui-kit"}),b("p",{className:"text-muted-foreground",children:["Universal UI components for React Native and Web, built on top of",n("code",{children:"nativewind"})," and ",n("code",{children:"@rn-primitives"}),"."]})]}),b("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Installation"}),n(ui,{package:"@contractspec/lib.ui-kit"})]}),b("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Key Features"}),b("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[b("li",{children:[n("strong",{children:"Universal"}),": Components render natively on iOS/Android and as standard HTML on web"]}),b("li",{children:[n("strong",{children:"Styled with NativeWind"}),": Uses Tailwind CSS classes for styling"]}),b("li",{children:[n("strong",{children:"Accessible"}),": Leverages ",n("code",{children:"@rn-primitives"})," ","(Radix UI for Native)"]}),b("li",{children:[n("strong",{children:"Atomic Design"}),": Exports atoms, molecules, and organisms"]})]})]}),b("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Data table example"}),b("p",{className:"text-muted-foreground",children:["The canonical"," ",n(We,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"})," ","uses ",n("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."]}),n(mi,{language:"tsx",code:gi})]}),b("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Core Components"}),b("div",{className:"grid gap-4 md:grid-cols-3",children:[b("div",{className:"card-subtle p-4",children:[n("h3",{className:"mb-2 font-semibold",children:"Form Controls"}),b("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[n("li",{children:"Button"}),n("li",{children:"Input"}),n("li",{children:"Checkbox"}),n("li",{children:"Switch"}),n("li",{children:"Select"})]})]}),b("div",{className:"card-subtle p-4",children:[n("h3",{className:"mb-2 font-semibold",children:"Layout"}),b("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[n("li",{children:"Card"}),n("li",{children:"Stack"}),n("li",{children:"Separator"}),n("li",{children:"Sheet"})]})]}),b("div",{className:"card-subtle p-4",children:[n("h3",{className:"mb-2 font-semibold",children:"Feedback"}),b("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[n("li",{children:"Alert"}),n("li",{children:"Skeleton"}),n("li",{children:"Progress"}),n("li",{children:"Tooltip"})]})]})]})]}),b("div",{className:"card-subtle space-y-3 p-6",children:[n("h2",{className:"font-bold text-2xl",children:"Where this layer fits"}),b("p",{className:"text-muted-foreground",children:["Read"," ",n(We,{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."]})]}),b("div",{className:"flex items-center gap-4 pt-4",children:[n(We,{href:"/docs/libraries/schema",className:"btn-ghost",children:"Previous: Schema"}),b(We,{href:"/docs/libraries/ui-kit-web",className:"btn-primary",children:["Next: UI Kit Web ",n(hi,{size:16})]})]})]})}import{CodeBlock as bi,InstallCommand as vi}from"@contractspec/lib.design-system";import ze from"@contractspec/lib.ui-link";import{ChevronRight as yi}from"lucide-react";import{jsx as U,jsxs as Y}from"react/jsx-runtime";var Ni=`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';
@@ -937,7 +1336,7 @@ export function WebAccountGrid() {
       footer={\`Rows \${controller.totalItems}\`}
     />
   );
-}`;function So(){return H("div",{className:"space-y-8",children:[H("div",{className:"space-y-4",children:[O("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ui-kit-web"}),O("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."})]}),H("div",{className:"space-y-4",children:[O("h2",{className:"font-bold text-2xl",children:"Installation"}),O(No,{package:"@contractspec/lib.ui-kit-web"})]}),H("div",{className:"space-y-4",children:[O("h2",{className:"font-bold text-2xl",children:"Data table example"}),H("p",{className:"text-muted-foreground",children:["This is the raw browser lane from the canonical"," ",O(fe,{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."]}),O(yo,{language:"tsx",filename:"web-account-grid.tsx",code:ko})]}),H("div",{className:"space-y-4",children:[O("h2",{className:"font-bold text-2xl",children:"What this layer owns"}),H("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[O("li",{children:"The raw table renderer and browser interaction model."}),O("li",{children:"Pagination, column visibility menus, pin menus, resize handles, and empty/loading states."}),O("li",{children:"Accessibility helpers and other web-specific primitives that stay outside the native-first package."})]})]}),H("div",{className:"card-subtle space-y-3 p-6",children:[O("h2",{className:"font-bold text-2xl",children:"Where this layer fits"}),H("p",{className:"text-muted-foreground",children:["Read"," ",O(fe,{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."]})]}),H("div",{className:"flex items-center gap-4 pt-4",children:[O(fe,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"Previous: UI Kit"}),H(fe,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Next: Design System ",O(wo,{size:16})]})]})]})}import{CodeBlock as Rt,InstallCommand as Co}from"@contractspec/lib.design-system";import It from"@contractspec/lib.ui-link";import{ChevronRight as To}from"lucide-react";import{jsx as Y,jsxs as se}from"react/jsx-runtime";function Lo(){return se("div",{className:"space-y-8",children:[se("div",{className:"space-y-4",children:[Y("h1",{className:"font-bold text-4xl",children:"Workflow Composer"}),Y("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."})]}),se("div",{className:"space-y-4",children:[Y("h2",{className:"font-bold text-2xl",children:"Installation"}),Y(Co,{package:"@contractspec/lib.workflow-composer"})]}),se("div",{className:"space-y-4",children:[Y("h2",{className:"font-bold text-2xl",children:"Register extensions"}),Y(Rt,{language:"typescript",code:`const composer = new WorkflowComposer();
+}`;function wi(){return Y("div",{className:"space-y-8",children:[Y("div",{className:"space-y-4",children:[U("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ui-kit-web"}),U("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."})]}),Y("div",{className:"space-y-4",children:[U("h2",{className:"font-bold text-2xl",children:"Installation"}),U(vi,{package:"@contractspec/lib.ui-kit-web"})]}),Y("div",{className:"space-y-4",children:[U("h2",{className:"font-bold text-2xl",children:"Data table example"}),Y("p",{className:"text-muted-foreground",children:["This is the raw browser lane from the canonical"," ",U(ze,{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."]}),U(bi,{language:"tsx",filename:"web-account-grid.tsx",code:Ni})]}),Y("div",{className:"space-y-4",children:[U("h2",{className:"font-bold text-2xl",children:"What this layer owns"}),Y("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[U("li",{children:"The raw table renderer and browser interaction model."}),U("li",{children:"Pagination, column visibility menus, pin menus, resize handles, and empty/loading states."}),U("li",{children:"Accessibility helpers and other web-specific primitives that stay outside the native-first package."})]})]}),Y("div",{className:"card-subtle space-y-3 p-6",children:[U("h2",{className:"font-bold text-2xl",children:"Where this layer fits"}),Y("p",{className:"text-muted-foreground",children:["Read"," ",U(ze,{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."]})]}),Y("div",{className:"flex items-center gap-4 pt-4",children:[U(ze,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"Previous: UI Kit"}),Y(ze,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Next: Design System ",U(yi,{size:16})]})]})]})}import{CodeBlock as ia,InstallCommand as ki}from"@contractspec/lib.design-system";import ra from"@contractspec/lib.ui-link";import{ChevronRight as Si}from"lucide-react";import{jsx as te,jsxs as Se}from"react/jsx-runtime";function Ri(){return Se("div",{className:"space-y-8",children:[Se("div",{className:"space-y-4",children:[te("h1",{className:"font-bold text-4xl",children:"Workflow Composer"}),te("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."})]}),Se("div",{className:"space-y-4",children:[te("h2",{className:"font-bold text-2xl",children:"Installation"}),te(ki,{package:"@contractspec/lib.workflow-composer"})]}),Se("div",{className:"space-y-4",children:[te("h2",{className:"font-bold text-2xl",children:"Register extensions"}),te(ia,{language:"typescript",code:`const composer = new WorkflowComposer();
 
 composer.register({
   workflow: 'billing.invoiceApproval',
@@ -954,12 +1353,12 @@ composer.register({
     },
   ],
   hiddenSteps: ['internal-audit'],
-});`})]}),se("div",{className:"space-y-4",children:[Y("h2",{className:"font-bold text-2xl",children:"Compose at runtime"}),Y(Rt,{language:"typescript",code:`const tenantWorkflow = composer.compose({
+});`})]}),Se("div",{className:"space-y-4",children:[te("h2",{className:"font-bold text-2xl",children:"Compose at runtime"}),te(ia,{language:"typescript",code:`const tenantWorkflow = composer.compose({
   base: BaseInvoiceWorkflow,
   tenantId: 'acme',
 });
 
-workflowRunner.execute(tenantWorkflow, ctx);`})]}),se("div",{className:"flex items-center gap-4 pt-4",children:[Y(It,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),se(It,{href:"/docs/libraries/workflows",className:"btn-primary",children:["Next: Workflow Runtime ",Y(To,{size:16})]})]})]})}import{CodeBlock as Ro,InstallCommand as Io}from"@contractspec/lib.design-system";import At from"@contractspec/lib.ui-link";import{ChevronRight as Ao}from"lucide-react";import{jsx as l,jsxs as B}from"react/jsx-runtime";function Po(){return B("div",{className:"space-y-8",children:[B("div",{className:"space-y-4",children:[l("h1",{className:"font-bold text-4xl",children:"Workflow Runtime Library"}),B("p",{className:"text-lg text-muted-foreground",children:["The ",l("code",{children:"@contractspec/lib.contracts-spec/workflow"})," library provides the core ",l("code",{children:"WorkflowRunner"})," for executing stateful, durable workflows."]})]}),B("div",{className:"space-y-4",children:[l("h2",{className:"font-bold text-2xl",children:"Installation"}),l(Io,{package:"@contractspec/lib.contracts-spec"})]}),B("div",{className:"space-y-4",children:[l("h2",{className:"font-bold text-2xl",children:"WorkflowRunner"}),l("p",{className:"text-muted-foreground",children:"The runner manages execution state, step transitions, retries, and compensation."}),l(Ro,{language:"typescript",code:`import { WorkflowRunner } from '@contractspec/lib.contracts-spec/workflow/runner';
+workflowRunner.execute(tenantWorkflow, ctx);`})]}),Se("div",{className:"flex items-center gap-4 pt-4",children:[te(ra,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),Se(ra,{href:"/docs/libraries/workflows",className:"btn-primary",children:["Next: Workflow Runtime ",te(Si,{size:16})]})]})]})}import{CodeBlock as Ci,InstallCommand as Ti}from"@contractspec/lib.design-system";import na from"@contractspec/lib.ui-link";import{ChevronRight as Ai}from"lucide-react";import{jsx as m,jsxs as z}from"react/jsx-runtime";function Li(){return z("div",{className:"space-y-8",children:[z("div",{className:"space-y-4",children:[m("h1",{className:"font-bold text-4xl",children:"Workflow Runtime Library"}),z("p",{className:"text-lg text-muted-foreground",children:["The ",m("code",{children:"@contractspec/lib.contracts-spec/workflow"})," library provides the core ",m("code",{children:"WorkflowRunner"})," for executing stateful, durable workflows."]})]}),z("div",{className:"space-y-4",children:[m("h2",{className:"font-bold text-2xl",children:"Installation"}),m(Ti,{package:"@contractspec/lib.contracts-spec"})]}),z("div",{className:"space-y-4",children:[m("h2",{className:"font-bold text-2xl",children:"WorkflowRunner"}),m("p",{className:"text-muted-foreground",children:"The runner manages execution state, step transitions, retries, and compensation."}),m(Ci,{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';
 
@@ -979,4 +1378,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);`})]}),B("div",{className:"space-y-4",children:[l("h2",{className:"font-bold text-2xl",children:"State Persistence"}),B("p",{className:"text-muted-foreground",children:["The runner relies on a ",l("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:[l("code",{children:"InMemoryStateStore"})," - for testing and development."]}),B("li",{children:[l("code",{children:"PrismaStateStore"})," - for production using Prisma ORM."]})]})]}),B("div",{className:"space-y-4",children:[l("h2",{className:"font-bold text-2xl",children:"Events"}),l("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:[l("li",{children:l("code",{children:"workflow.started"})}),l("li",{children:l("code",{children:"workflow.step_completed"})}),l("li",{children:l("code",{children:"workflow.step_failed"})}),l("li",{children:l("code",{children:"workflow.step_retrying"})}),l("li",{children:l("code",{children:"workflow.completed"})}),l("li",{children:l("code",{children:"workflow.cancelled"})}),l("li",{children:l("code",{children:"workflow.compensation_step_completed"})})]})]}),B("div",{className:"flex items-center gap-4 pt-4",children:[l(At,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),B(At,{href:"/docs/libraries/data-views",className:"btn-primary",children:["Next: Data Views ",l(Ao,{size:16})]})]})]})}export{Po as LibrariesWorkflowsPage,Lo as LibrariesWorkflowComposerPage,So as LibrariesUIKitWebPage,vo as LibrariesUIKitPage,uo as LibrariesTestingPage,lo as LibrariesSupportBotPage,oo as LibrariesSchemaPage,no as LibrariesSLOPage,eo as LibrariesRuntimePage,Ya as LibrariesResiliencePage,Ja as LibrariesProgressiveDeliveryPage,Ha as LibrariesPersonalizationPage,_a as LibrariesOverviewPage,za as LibrariesOverlayEnginePage,Ba as LibrariesObservabilityPage,Da as LibrariesMultiTenancyPage,Ia as LibrariesGrowthPage,Ta as LibrariesGraphQLPage,wa as LibrariesEvolutionPage,va as LibrariesDesignSystemPage,ma as LibrariesDataViewsPage,la as LibrariesDataBackendPage,na as LibrariesCrossPlatformUIPage,ia as LibrariesCostTrackingPage,ta as LibrariesContractsPage,Yt as LibrariesContentGenPage,Kt as LibrariesApplicationShellPage,Ft as LibrariesAnalyticsPage,Ut as LibrariesAiAgentPage,Mt as LibrariesAccessibilityPage};
+await runner.executeStep(workflowId);`})]}),z("div",{className:"space-y-4",children:[m("h2",{className:"font-bold text-2xl",children:"State Persistence"}),z("p",{className:"text-muted-foreground",children:["The runner relies on a ",m("code",{children:"StateStore"})," to persist workflow execution history. ContractSpec ships with:"]}),z("ul",{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:[z("li",{children:[m("code",{children:"InMemoryStateStore"})," - for testing and development."]}),z("li",{children:[m("code",{children:"PrismaStateStore"})," - for production using Prisma ORM."]})]})]}),z("div",{className:"space-y-4",children:[m("h2",{className:"font-bold text-2xl",children:"Events"}),m("p",{className:"text-muted-foreground",children:"The runner emits events that you can subscribe to for monitoring:"}),z("ul",{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:[m("li",{children:m("code",{children:"workflow.started"})}),m("li",{children:m("code",{children:"workflow.step_completed"})}),m("li",{children:m("code",{children:"workflow.step_failed"})}),m("li",{children:m("code",{children:"workflow.step_retrying"})}),m("li",{children:m("code",{children:"workflow.completed"})}),m("li",{children:m("code",{children:"workflow.cancelled"})}),m("li",{children:m("code",{children:"workflow.compensation_step_completed"})})]})]}),z("div",{className:"flex items-center gap-4 pt-4",children:[m(na,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),z(na,{href:"/docs/libraries/data-views",className:"btn-primary",children:["Next: Data Views ",m(Ai,{size:16})]})]})]})}export{Li as LibrariesWorkflowsPage,Ri as LibrariesWorkflowComposerPage,wi as LibrariesUIKitWebPage,fi as LibrariesUIKitPage,pi as LibrariesTranslationRuntimePage,ii as LibrariesTestingPage,ti as LibrariesSupportBotPage,Yo as LibrariesSchemaPage,xo as LibrariesSLOPage,Jo as LibrariesRuntimePage,qo as LibrariesResiliencePage,Go as LibrariesProgressiveDeliveryPage,Uo as LibrariesPersonalizationPage,Lo as LibrariesOverviewPage,Ro as LibrariesOverlayEnginePage,wo as LibrariesObservabilityPage,vo as LibrariesMultiTenancyPage,go as LibrariesGrowthPage,mo as LibrariesGraphQLPage,co as LibrariesEvolutionPage,io as LibrariesDesignSystemPage,Ya as LibrariesDataViewsPage,Ga as LibrariesDataBackendPage,Ua as LibrariesCrossPlatformUIPage,Ea as LibrariesCostTrackingPage,Oa as LibrariesContractsPage,Ta as LibrariesContentGenPage,ka as LibrariesApplicationShellPage,ba as LibrariesAnalyticsPage,ga as LibrariesAiAgentPage,ma as LibrariesAccessibilityPage};