@contractspec/bundle.library 3.9.6 → 3.9.8

package/dist/node/components/docs/libraries/LibrariesApplicationShellPage.content.js

@@ -0,0 +1,147 @@
+var n=Object.defineProperty;var o=(e)=>e;function i(e,t){this[e]=o.bind(null,t)}var s=(e,t)=>{for(var a in t)n(e,a,{get:t[a],enumerable:!0,configurable:!0,set:i.bind(t,a)})};var r=(e,t)=>()=>(e&&(t=e(e=0)),t);var c=`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>
+  );
+}`,d=`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.`,p=`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.`,m=[{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."}];export{c as shellUsageExample,m as shellParts,d as scratchPrompt,p as refactorPrompt};

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

@@ -0,0 +1,147 @@
+var v=Object.defineProperty;var f=(t)=>t;function y(t,n){this[t]=f.bind(null,n)}var k=(t,n)=>{for(var s in n)v(t,s,{get:n[s],enumerable:!0,configurable:!0,set:y.bind(n,s)})};var N=(t,n)=>()=>(t&&(n=t(t=0)),n);var d=`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>
+  );
+}`,p=`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.`,m=`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.`,u=[{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 l,InstallCommand as w}from"@contractspec/lib.design-system";import{Box as h,HStack as O,VStack as o}from"@contractspec/lib.design-system/layout";import{Code as c,H1 as A,H2 as i,H3 as P,P as r,Text as b}from"@contractspec/lib.design-system/typography";import g from"@contractspec/lib.ui-link";import{ChevronRight as E}from"lucide-react";import{jsx as e,jsxs as a}from"react/jsx-runtime";function K(){return a(o,{className:"space-y-8",children:[a(o,{className:"space-y-4",children:[e(A,{className:"font-bold text-4xl",children:"Application shell"}),a(r,{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 ",e(c,{children:"PageOutline"})," for page sections."]})]}),a(o,{className:"space-y-4",children:[e(i,{className:"font-bold text-2xl",children:"Installation"}),e(w,{package:"@contractspec/lib.design-system"})]}),a(o,{className:"space-y-4",children:[e(i,{className:"font-bold text-2xl",children:"What It Standardizes"}),e(h,{className:"grid gap-4 md:grid-cols-2",children:u.map((t)=>a(h,{className:"card-subtle p-4",children:[e(P,{className:"font-semibold",children:t.title}),e(r,{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))})]}),a(o,{className:"space-y-4",children:[e(i,{className:"font-bold text-2xl",children:"Import Surface"}),e(r,{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."}),e(l,{language:"tsx",filename:"app-shell-example.tsx",code:d})]}),a(o,{className:"space-y-4",children:[e(i,{className:"font-bold text-2xl",children:"AI Prompt: Build From Scratch"}),e(r,{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."}),e(l,{language:"markdown",filename:"implement-application-shell.md",code:p})]}),a(o,{className:"space-y-4",children:[e(i,{className:"font-bold text-2xl",children:"AI Prompt: Refactor An App"}),e(r,{className:"text-muted-foreground",children:"Use this prompt when an app already has custom navigation chrome and needs to migrate without breaking route behavior."}),e(l,{language:"markdown",filename:"refactor-to-application-shell.md",code:m})]}),a(o,{className:"card-subtle space-y-3 p-6",children:[e(i,{className:"font-bold text-2xl",children:"Naming"}),a(r,{className:"text-muted-foreground",children:["Use ",e(c,{children:"AppShell"})," for the whole navigation frame and"," ",e(c,{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."]})]}),a(O,{className:"flex flex-wrap items-center gap-3 pt-2",children:[e(g,{href:"/docs/libraries/cross-platform-ui",className:"btn-ghost",children:e(b,{children:"Cross-platform UI"})}),a(g,{href:"/docs/libraries/design-system",className:"btn-primary",children:[e(b,{children:"Design System"})," ",e(E,{size:16})]})]})]})}export{K as LibrariesApplicationShellPage};

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

@@ -1,4 +1,4 @@
-var n=Object.defineProperty;var l=(t)=>t;function d(t,i){this[t]=l.bind(null,i)}var m=(t,i)=>{for(var o in i)n(t,o,{get:i[o],enumerable:!0,configurable:!0,set:d.bind(i,o)})};var g=(t,i)=>()=>(t&&(i=t(t=0)),i);import{CodeBlock as r,InstallCommand as s}from"@contractspec/lib.design-system";import c from"@contractspec/lib.ui-link";import{ChevronRight as p}from"lucide-react";import{jsx as e,jsxs as a}from"react/jsx-runtime";function b(){return a("div",{className:"space-y-8",children:[a("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"DataViews Runtime Library"}),a("p",{className:"text-lg text-muted-foreground",children:["The ",e("code",{children:"@contractspec/lib.contracts-spec/data-views"})," and"," ",e("code",{children:"@contractspec/lib.design-system"})," libraries provide the runtime logic and UI components to render DataViews in your application."]})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(s,{package:["@contractspec/lib.contracts-spec","@contractspec/lib.design-system"]})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"DataViewRenderer"}),e("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."}),e(r,{language:"tsx",code:`import { DataViewRenderer } from '@contractspec/lib.design-system';
+var n=Object.defineProperty;var d=(t)=>t;function l(t,o){this[t]=d.bind(null,o)}var m=(t,o)=>{for(var i in o)n(t,i,{get:o[i],enumerable:!0,configurable:!0,set:l.bind(o,i)})};var g=(t,o)=>()=>(t&&(o=t(t=0)),o);import{CodeBlock as r,InstallCommand as s}from"@contractspec/lib.design-system";import c from"@contractspec/lib.ui-link";import{ChevronRight as p}from"lucide-react";import{jsx as e,jsxs as a}from"react/jsx-runtime";function b(){return a("div",{className:"space-y-8",children:[a("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"DataViews Runtime Library"}),a("p",{className:"text-lg text-muted-foreground",children:["The ",e("code",{children:"@contractspec/lib.contracts-spec/data-views"})," and"," ",e("code",{children:"@contractspec/lib.design-system"})," libraries provide the runtime logic and UI components to render DataViews in your application."]})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(s,{package:["@contractspec/lib.contracts-spec","@contractspec/lib.design-system"]})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"DataViewRenderer"}),e("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."}),e(r,{language:"tsx",code:`import { DataViewRenderer } from '@contractspec/lib.design-system';
 import { MyUserList } from './specs/users.data-view';
 
 export function UserPage() {
@@ -10,12 +10,19 @@ export function UserPage() {
       onPageChange={(page) => fetchPage(page)}
     />
   );
-}`}),e("h3",{className:"font-semibold text-xl",children:"Props"}),a("ul",{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:[a("li",{children:[e("code",{children:"spec"}),": The DataViewSpec definition."]}),a("li",{children:[e("code",{children:"items"}),": Array of data items to render."]}),a("li",{children:[e("code",{children:"filters"}),": Current filter state object."]}),a("li",{children:[e("code",{children:"onFilterChange"}),": Callback when filters change."]}),a("li",{children:[e("code",{children:"pagination"}),": Object with ",e("code",{children:"page"}),","," ",e("code",{children:"pageSize"}),", ",e("code",{children:"total"}),"."]}),a("li",{children:[e("code",{children:"onPageChange"}),": Callback when page changes."]})]})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Query Generation"}),a("p",{className:"text-muted-foreground",children:["The ",e("code",{children:"DataViewQueryGenerator"})," utility helps translate DataView parameters (filters, sorting, pagination) into query arguments for your backend."]}),e(r,{language:"typescript",code:`import { DataViewQueryGenerator } from '@contractspec/lib.contracts-spec/data-views/query-generator';
+}`}),e("h3",{className:"font-semibold text-xl",children:"Props"}),a("ul",{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:[a("li",{children:[e("code",{children:"spec"}),": The DataViewSpec definition."]}),a("li",{children:[e("code",{children:"items"}),": Array of data items to render."]}),a("li",{children:[e("code",{children:"filters"}),": Current filter state object."]}),a("li",{children:[e("code",{children:"onFilterChange"}),": Callback when typed filters change. Renderers emit ",e("code",{children:"DataViewFilterValue"})," objects for numeric, percent, currency, temporal, duration, and boolean filters."]}),a("li",{children:[e("code",{children:"pagination"}),": Object with ",e("code",{children:"page"}),","," ",e("code",{children:"pageSize"}),", ",e("code",{children:"total"}),"."]}),a("li",{children:[e("code",{children:"onPageChange"}),": Callback when page changes."]}),a("li",{children:[e("code",{children:"viewMode"})," / ",e("code",{children:"defaultViewMode"}),": Controlled or initial collection mode for specs that allow ",e("code",{children:"list"}),","," ",e("code",{children:"grid"}),", or ",e("code",{children:"table"})," projections through"," ",e("code",{children:"view.collection.viewModes"}),"."]}),a("li",{children:[e("code",{children:"density"})," / ",e("code",{children:"defaultDensity"}),": Controlled or initial density for collection renderers, seeded by"," ",e("code",{children:"view.collection.density"})," and table"," ",e("code",{children:"view.density"}),"."]})]})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Query Generation"}),a("p",{className:"text-muted-foreground",children:["The ",e("code",{children:"DataViewQueryGenerator"})," utility helps translate DataView parameters (filters, sorting, pagination) into query arguments for your backend."]}),e(r,{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' }
+  }
+};
 
-// query.input contains { skip: 0, take: 20, role: 'admin' }`})]}),a("div",{className:"flex items-center gap-4 pt-4",children:[e(c,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),a(c,{href:"/docs/libraries/data-backend",className:"btn-primary",children:["Next: Data & Backend ",e(p,{size:16})]})]})]})}export{b as LibrariesDataViewsPage};
+const errors = generator.validateParams(params);
+const query = generator.generate(params);
+
+// query.input contains skip/take plus the typed filter payloads.`})]}),a("div",{className:"flex items-center gap-4 pt-4",children:[e(c,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),a(c,{href:"/docs/libraries/data-backend",className:"btn-primary",children:["Next: Data & Backend ",e(p,{size:16})]})]})]})}export{b as LibrariesDataViewsPage};

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

@@ -1,4 +1,4 @@
-var s=Object.defineProperty;var n=(a)=>a;function c(a,o){this[a]=n.bind(null,o)}var h=(a,o)=>{for(var r in o)s(a,r,{get:o[r],enumerable:!0,configurable:!0,set:c.bind(o,r)})};var f=(a,o)=>()=>(a&&(o=a(a=0)),o);import{CodeBlock as l,InstallCommand as d}from"@contractspec/lib.design-system";import i from"@contractspec/lib.ui-link";import{ChevronRight as m}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";var p=`import { Button, DataTable } from '@contractspec/lib.design-system';
+var s=Object.defineProperty;var n=(a)=>a;function c(a,o){this[a]=n.bind(null,o)}var g=(a,o)=>{for(var l in o)s(a,l,{get:o[l],enumerable:!0,configurable:!0,set:c.bind(o,l)})};var f=(a,o)=>()=>(a&&(o=a(a=0)),o);import{CodeBlock as r,InstallCommand as d}from"@contractspec/lib.design-system";import i from"@contractspec/lib.ui-link";import{ChevronRight as m}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";var p=`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';
@@ -76,10 +76,10 @@ export function TenantSurface({ children }: { children: React.ReactNode }) {
       {children}
     </DesignSystemThemeProvider>
   );
-}`,g=`import { themeSpecToTailwindPreset } from '@contractspec/lib.design-system/theme';
+}`,h=`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 T(){return t("div",{className:"space-y-8",children:[t("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.design-system"}),t("p",{className:"text-muted-foreground",children:["High-level design system components, patterns, and layouts for LSSM applications. Built on top of ",e("code",{children:"@contractspec/lib.ui-kit"}),"."]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(d,{package:"@contractspec/lib.design-system"})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What It Provides"}),t("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[t("li",{children:[e("strong",{children:"Composite Components"}),": Molecules and Organisms that solve common UI problems"]}),t("li",{children:[e("strong",{children:"Layouts"}),": Ready-to-use page structures for dashboards, marketing sites, and lists"]}),t("li",{children:[e("strong",{children:"Data Views"}),": Standardized renderers for lists, tables, and detail views"]}),t("li",{children:[e("strong",{children:"Forms"}),": Zod-integrated form layouts and components"]}),t("li",{children:[e("strong",{children:"Code Display"}),": Syntax-highlighted code blocks with package manager tabs"]}),t("li",{children:[e("strong",{children:"Platform Utilities"}),": Hooks for responsive and adaptive design"]}),t("li",{children:[e("strong",{children:"Theme Bridge"}),": ThemeSpec to Tailwind variables, presets, CSS text, and runtime light/dark mode"]}),t("li",{children:[e("strong",{children:"Legal Templates"}),": Compliant templates for Terms, Privacy, and GDPR"]})]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"ThemeSpec to Tailwind"}),t("p",{className:"text-muted-foreground",children:["The theme bridge keeps ",e("code",{children:"ThemeSpec"})," as the source of truth and exposes no-generation Tailwind helpers, optional CSS text serialization, runtime CSS variables, light/dark modes, and OKLCH color pass-through."]}),e(l,{language:"tsx",code:u})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Focused import surfaces"}),e("p",{className:"text-muted-foreground",children:"New code can use focused subpaths for theme, controls, forms, and layout while existing root imports remain compatible."}),e(l,{language:"tsx",code:g})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Data table example"}),t("p",{className:"text-muted-foreground",children:["This is the composed lane from the canonical"," ",e(i,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),". The design-system wrapper owns title, description, header actions, and the opinionated card shell on top of the raw web primitive."]}),e(l,{language:"tsx",code:p})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Key Exports"}),t("div",{className:"grid gap-4 md:grid-cols-2",children:[t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Organisms"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"AppLayout, AppHeader, AppSidebar"}),e("li",{children:"MarketingLayout, HeroSection"}),e("li",{children:"ListCardPage, ListTablePage"})]})]}),t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Data & Forms"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"DataTable"}),e("li",{children:"DataViewTable"}),e("li",{children:"DataViewRenderer"}),e("li",{children:"ZodForm"}),e("li",{children:"FormLayout, FormDialog"})]})]}),t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Code Display"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"CodeBlock (syntax highlighting)"}),e("li",{children:"CommandTabs (package manager tabs)"}),e("li",{children:"InstallCommand (convenience wrapper)"}),e("li",{children:"CopyButton"})]})]}),t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Providers"}),e("ul",{className:"space-y-1 text-muted-foreground text-sm",children:e("li",{children:"PackageManagerProvider"})})]})]})]}),t("div",{className:"card-subtle space-y-3 p-6",children:[e("h2",{className:"font-bold text-2xl",children:"Where this layer fits"}),t("p",{className:"text-muted-foreground",children:["Read"," ",e(i,{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."]})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[e(i,{href:"/docs/libraries/ui-kit-web",className:"btn-ghost",children:"Previous: UI Kit Web"}),t(i,{href:"/docs/libraries/accessibility",className:"btn-primary",children:["Next: Accessibility ",e(m,{size:16})]})]})]})}export{T as LibrariesDesignSystemPage};
+import { Button, DataTable } from '@contractspec/lib.design-system';`;function T(){return t("div",{className:"space-y-8",children:[t("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.design-system"}),t("p",{className:"text-muted-foreground",children:["High-level design system components, patterns, and layouts for LSSM applications. Built on top of ",e("code",{children:"@contractspec/lib.ui-kit"}),"."]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(d,{package:"@contractspec/lib.design-system"})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What It Provides"}),t("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[t("li",{children:[e("strong",{children:"Composite Components"}),": Molecules and Organisms that solve common UI problems"]}),t("li",{children:[e("strong",{children:"Layouts"}),": Ready-to-use page structures for dashboards, marketing sites, and lists"]}),t("li",{children:[e("strong",{children:"Data Views"}),": Standardized renderers for lists, tables, and detail views"]}),t("li",{children:[e("strong",{children:"Forms"}),": Zod-integrated form layouts and components"]}),t("li",{children:[e("strong",{children:"Code Display"}),": Syntax-highlighted code blocks with package manager tabs"]}),t("li",{children:[e("strong",{children:"Platform Utilities"}),": Hooks for responsive and adaptive design"]}),t("li",{children:[e("strong",{children:"Theme Bridge"}),": ThemeSpec to Tailwind variables, presets, CSS text, and runtime light/dark mode"]}),t("li",{children:[e("strong",{children:"Legal Templates"}),": Compliant templates for Terms, Privacy, and GDPR"]})]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"ThemeSpec to Tailwind"}),t("p",{className:"text-muted-foreground",children:["The theme bridge keeps ",e("code",{children:"ThemeSpec"})," as the source of truth and exposes no-generation Tailwind helpers, optional CSS text serialization, runtime CSS variables, light/dark modes, and OKLCH color pass-through."]}),e(r,{language:"tsx",code:u})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Focused import surfaces"}),e("p",{className:"text-muted-foreground",children:"New code can use focused subpaths for theme, controls, forms, and layout while existing root imports remain compatible."}),e(r,{language:"tsx",code:h})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Data table example"}),t("p",{className:"text-muted-foreground",children:["This is the composed lane from the canonical"," ",e(i,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),". The design-system wrapper owns title, description, header actions, and the opinionated card shell on top of the raw web primitive."]}),e(r,{language:"tsx",code:p})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Key Exports"}),t("div",{className:"grid gap-4 md:grid-cols-2",children:[t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Organisms"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"AppShell, PageOutline"}),e("li",{children:"AppLayout, AppHeader, AppSidebar"}),e("li",{children:"MarketingLayout, HeroSection"}),e("li",{children:"ListCardPage, ListTablePage"})]})]}),t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Data & Forms"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"DataTable"}),e("li",{children:"DataViewTable"}),e("li",{children:"DataViewRenderer"}),e("li",{children:"ZodForm"}),e("li",{children:"FormLayout, FormDialog"})]})]}),t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Code Display"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"CodeBlock (syntax highlighting)"}),e("li",{children:"CommandTabs (package manager tabs)"}),e("li",{children:"InstallCommand (convenience wrapper)"}),e("li",{children:"CopyButton"})]})]}),t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Providers"}),e("ul",{className:"space-y-1 text-muted-foreground text-sm",children:e("li",{children:"PackageManagerProvider"})})]})]})]}),t("div",{className:"card-subtle space-y-3 p-6",children:[e("h2",{className:"font-bold text-2xl",children:"Where this layer fits"}),t("p",{className:"text-muted-foreground",children:["Read"," ",e(i,{href:"/docs/libraries/application-shell",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Application shell"})," ","for the shared sidebar, topbar, command search, mobile navigation, and"," ",e("code",{children:"PageOutline"})," pattern. Read"," ",e(i,{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."]})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[e(i,{href:"/docs/libraries/ui-kit-web",className:"btn-ghost",children:"Previous: UI Kit Web"}),t(i,{href:"/docs/libraries/accessibility",className:"btn-primary",children:["Next: Accessibility ",e(m,{size:16})]})]})]})}export{T as LibrariesDesignSystemPage};

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

@@ -1 +1 @@
-var s=Object.defineProperty;var o=(e)=>e;function c(e,t){this[e]=o.bind(null,t)}var p=(e,t)=>{for(var r in t)s(e,r,{get:t[r],enumerable:!0,configurable:!0,set:c.bind(t,r)})};var m=(e,t)=>()=>(e&&(t=e(e=0)),t);import n from"@contractspec/lib.ui-link";import{ChevronRight as l}from"lucide-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";var d=[{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 f(){return a("div",{className:"space-y-10",children:[a("div",{className:"space-y-3",children:[i("p",{className:"editorial-kicker",children:"Build"}),i("h1",{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"The OSS foundation is a library system, not a closed platform."}),i("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."})]}),a("div",{className:"editorial-proof-strip",children:[a("div",{className:"editorial-stat",children:[i("span",{className:"editorial-label",children:"Layering rule"}),i("span",{className:"editorial-stat-value",children:"libs → bundles → apps"})]}),i("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."})]}),i("div",{className:"space-y-6",children:d.map((e)=>a("section",{className:"editorial-panel space-y-5",children:[a("div",{className:"space-y-2",children:[i("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:e.title}),i("p",{className:"text-muted-foreground text-sm leading-7",children:e.body})]}),i("div",{className:"grid gap-4 md:grid-cols-2",children:e.items.map((t)=>a(n,{href:t.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:[i("h3",{className:"font-semibold text-lg",children:t.title}),i("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.description}),a("div",{className:"mt-3 flex items-center gap-2 text-[color:var(--rust)] text-sm",children:["Learn more ",i(l,{size:14})]})]},t.title))})]},e.title))})]})}export{f as LibrariesOverviewPage};
+var s=Object.defineProperty;var o=(e)=>e;function c(e,t){this[e]=o.bind(null,t)}var p=(e,t)=>{for(var r in t)s(e,r,{get:t[r],enumerable:!0,configurable:!0,set:c.bind(t,r)})};var m=(e,t)=>()=>(e&&(t=e(e=0)),t);import n from"@contractspec/lib.ui-link";import{ChevronRight as l}from"lucide-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";var d=[{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 f(){return a("div",{className:"space-y-10",children:[a("div",{className:"space-y-3",children:[i("p",{className:"editorial-kicker",children:"Build"}),i("h1",{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"The OSS foundation is a library system, not a closed platform."}),i("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."})]}),a("div",{className:"editorial-proof-strip",children:[a("div",{className:"editorial-stat",children:[i("span",{className:"editorial-label",children:"Layering rule"}),i("span",{className:"editorial-stat-value",children:"libs → bundles → apps"})]}),i("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."})]}),i("div",{className:"space-y-6",children:d.map((e)=>a("section",{className:"editorial-panel space-y-5",children:[a("div",{className:"space-y-2",children:[i("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:e.title}),i("p",{className:"text-muted-foreground text-sm leading-7",children:e.body})]}),i("div",{className:"grid gap-4 md:grid-cols-2",children:e.items.map((t)=>a(n,{href:t.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:[i("h3",{className:"font-semibold text-lg",children:t.title}),i("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.description}),a("div",{className:"mt-3 flex items-center gap-2 text-[color:var(--rust)] text-sm",children:["Learn more ",i(l,{size:14})]})]},t.title))})]},e.title))})]})}export{f as LibrariesOverviewPage};