@contractspec/bundle.library 3.9.6 → 3.9.8

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

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