@contractspec/bundle.library 3.9.6 → 3.9.8

package/dist/components/docs/specs/SpecsDataViewsPage.js

@@ -43,7 +43,43 @@ export const DataGridShowcaseDataView = defineDataView({
       { key: 'account', label: 'Account', dataPath: 'account', sortable: true },
       { key: 'owner', label: 'Owner', dataPath: 'owner', sortable: true },
       { key: 'status', label: 'Status', dataPath: 'status', sortable: true },
+      {
+        key: 'arr',
+        label: 'ARR',
+        dataPath: 'arr',
+        sortable: true,
+        format: { type: 'currency', currency: 'USD', rounded: true },
+      },
+      {
+        key: 'healthScore',
+        label: 'Health score',
+        dataPath: 'healthScore',
+        format: { type: 'percent', valueScale: 'fraction', maximumFractionDigits: 1 },
+      },
+      {
+        key: 'lastActivityAt',
+        label: 'Last activity',
+        dataPath: 'lastActivityAt',
+        format: { type: 'datetime', dateStyle: 'medium', timeStyle: 'short' },
+      },
       { key: 'notes', label: 'Notes', dataPath: 'notes' },
     ],
+    filters: [
+      { key: 'status', label: 'Status', field: 'status', type: 'enum' },
+      {
+        key: 'arr',
+        label: 'ARR',
+        field: 'arr',
+        type: 'currency',
+        valueMode: 'range',
+      },
+      {
+        key: 'lastActivityAt',
+        label: 'Last activity',
+        field: 'lastActivityAt',
+        type: 'datetime',
+        valueMode: 'range',
+      },
+    ],
   },
-});`;function q(){return B("div",{className:"space-y-8",children:[B("div",{className:"space-y-4",children:[z("h1",{className:"font-bold text-4xl",children:"DataViews"}),B("p",{className:"text-muted-foreground",children:["A ",z("strong",{children:"DataViewSpec"})," describes how data should be queried, filtered, sorted, and presented to users. Runtime adapters execute optimized database queries and serve list views, detail views, and search interfaces while respecting policy constraints."]})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Core concepts"}),B("div",{className:"space-y-3",children:[B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Data sources"}),z("p",{className:"text-muted-foreground",children:"A DataView connects to one or more data sources\u2014databases, APIs, or other capabilities. You specify the source and the fields you want to expose."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Filtering"}),z("p",{className:"text-muted-foreground",children:`Define filters that users can apply to narrow down results. Filters can be simple (e.g., "status equals 'active'") or complex (e.g., "created within the last 30 days AND assigned to current user").`})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Sorting"}),z("p",{className:"text-muted-foreground",children:"Specify which fields can be sorted and the default sort order. ContractSpec generates efficient database queries with proper indexes."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Pagination"}),z("p",{className:"text-muted-foreground",children:"DataViews automatically support pagination to handle large datasets. You can configure page size limits and cursor-based or offset-based pagination."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Aggregations"}),z("p",{className:"text-muted-foreground",children:"Compute aggregates like counts, sums, averages, and group-by operations. These are useful for dashboards and summary views."})]})]})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Example DataViewSpec"}),B("p",{className:"text-muted-foreground",children:["Here is the canonical table contract used by the live"," ",z(H,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),":"]}),z("div",{className:"overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",children:z("pre",{children:U})}),z("p",{className:"text-muted-foreground text-sm",children:"This one contract drives the DataView lane, while the same rows and controller also feed the raw web primitive, native-first primitive, and composed design-system demos."})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Policy integration"}),B("p",{className:"text-muted-foreground",children:["DataViews automatically enforce"," ",z(H,{href:"/docs/specs/policy",className:"text-violet-400 hover:text-violet-300",children:"PolicySpecs"}),". If a user doesn't have permission to see certain fields, those fields are automatically filtered out or redacted. If a user can only see their own data, the query is automatically scoped."]}),z("p",{className:"text-muted-foreground",children:"This means you define the data view once, and it works correctly for all users based on their permissions\u2014no need to write separate queries for different roles."})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Served outputs"}),z("p",{className:"text-muted-foreground",children:"From a DataViewSpec, ContractSpec serves:"}),B("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[B("li",{children:[z("strong",{children:"Database queries"})," \u2013 Optimized SQL or NoSQL queries executed at runtime"]}),B("li",{children:[z("strong",{children:"API endpoints"})," \u2013 RESTful or GraphQL endpoints for fetching data"]}),B("li",{children:[z("strong",{children:"UI components"})," \u2013 List views, tables, cards, and detail views"]}),B("li",{children:[z("strong",{children:"Search interfaces"})," \u2013 Full-text search with autocomplete"]}),B("li",{children:[z("strong",{children:"Export functions"})," \u2013 CSV, JSON, or Excel exports"]})]})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Best practices"}),B("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[z("li",{children:"Only expose fields that users actually need\u2014this improves performance and security."}),z("li",{children:"Use appropriate indexes for sortable and filterable fields."}),z("li",{children:"Set reasonable pagination limits to prevent performance issues."}),z("li",{children:"Use aggregations sparingly\u2014they can be expensive on large datasets."}),z("li",{children:"Test DataViews with realistic data volumes to ensure they perform well."})]})]}),B("div",{className:"flex items-center gap-4 pt-4",children:[z(H,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Previous: Capabilities"}),B(H,{href:"/docs/specs/workflows",className:"btn-primary",children:["Next: Workflows ",z(Q,{size:16})]})]})]})}export{q as SpecsDataViewsPage};
+});`;function q(){return B("div",{className:"space-y-8",children:[B("div",{className:"space-y-4",children:[z("h1",{className:"font-bold text-4xl",children:"DataViews"}),B("p",{className:"text-muted-foreground",children:["A ",z("strong",{children:"DataViewSpec"})," describes how data should be queried, filtered, sorted, and presented to users. Runtime adapters execute optimized database queries and serve list views, detail views, and search interfaces while respecting policy constraints."]})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Core concepts"}),B("div",{className:"space-y-3",children:[B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Data sources"}),z("p",{className:"text-muted-foreground",children:"A DataView connects to one or more data sources\u2014databases, APIs, or other capabilities. You specify the source and the fields you want to expose."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Filtering"}),z("p",{className:"text-muted-foreground",children:"Define filters that users can apply to narrow down results. Filters are typed as search, enum, number, percent, currency, date, time, datetime, duration, or boolean so renderers and query helpers can validate values before execution."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Sorting"}),z("p",{className:"text-muted-foreground",children:"Specify which fields can be sorted and the default sort order. ContractSpec generates efficient database queries with proper indexes."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Pagination"}),z("p",{className:"text-muted-foreground",children:"DataViews automatically support pagination to handle large datasets. You can configure page size limits and cursor-based or offset-based pagination."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Aggregations"}),z("p",{className:"text-muted-foreground",children:"Compute aggregates like counts, sums, averages, and group-by operations. These are useful for dashboards and summary views."})]})]})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Example DataViewSpec"}),B("p",{className:"text-muted-foreground",children:["Here is the canonical table contract used by the live"," ",z(H,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),":"]}),z("div",{className:"overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",children:z("pre",{children:U})}),z("p",{className:"text-muted-foreground text-sm",children:"This one contract drives the DataView lane, while the same rows and controller also feed the raw web primitive, native-first primitive, and composed design-system demos."})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Policy integration"}),B("p",{className:"text-muted-foreground",children:["DataViews automatically enforce"," ",z(H,{href:"/docs/specs/policy",className:"text-violet-400 hover:text-violet-300",children:"PolicySpecs"}),". If a user doesn't have permission to see certain fields, those fields are automatically filtered out or redacted. If a user can only see their own data, the query is automatically scoped."]}),z("p",{className:"text-muted-foreground",children:"This means you define the data view once, and it works correctly for all users based on their permissions\u2014no need to write separate queries for different roles."})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Served outputs"}),z("p",{className:"text-muted-foreground",children:"From a DataViewSpec, ContractSpec serves:"}),B("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[B("li",{children:[z("strong",{children:"Database queries"})," \u2013 Optimized SQL or NoSQL queries executed at runtime"]}),B("li",{children:[z("strong",{children:"API endpoints"})," \u2013 RESTful or GraphQL endpoints for fetching data"]}),B("li",{children:[z("strong",{children:"UI components"})," \u2013 List views, tables, cards, and detail views"]}),B("li",{children:[z("strong",{children:"Search interfaces"})," \u2013 Full-text search with autocomplete"]}),B("li",{children:[z("strong",{children:"Export functions"})," \u2013 CSV, JSON, or Excel exports"]})]})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Best practices"}),B("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[z("li",{children:"Only expose fields that users actually need\u2014this improves performance and security."}),z("li",{children:"Use appropriate indexes for sortable and filterable fields."}),z("li",{children:"Set reasonable pagination limits to prevent performance issues."}),z("li",{children:"Use aggregations sparingly\u2014they can be expensive on large datasets."}),z("li",{children:"Test DataViews with realistic data volumes to ensure they perform well."})]})]}),B("div",{className:"flex items-center gap-4 pt-4",children:[z(H,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Previous: Capabilities"}),B(H,{href:"/docs/specs/workflows",className:"btn-primary",children:["Next: Workflows ",z(Q,{size:16})]})]})]})}export{q as SpecsDataViewsPage};

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

@@ -136,10 +136,46 @@ export const DataGridShowcaseDataView = defineDataView({
       { key: 'account', label: 'Account', dataPath: 'account', sortable: true },
       { key: 'owner', label: 'Owner', dataPath: 'owner', sortable: true },
       { key: 'status', label: 'Status', dataPath: 'status', sortable: true },
+      {
+        key: 'arr',
+        label: 'ARR',
+        dataPath: 'arr',
+        sortable: true,
+        format: { type: 'currency', currency: 'USD', rounded: true },
+      },
+      {
+        key: 'healthScore',
+        label: 'Health score',
+        dataPath: 'healthScore',
+        format: { type: 'percent', valueScale: 'fraction', maximumFractionDigits: 1 },
+      },
+      {
+        key: 'lastActivityAt',
+        label: 'Last activity',
+        dataPath: 'lastActivityAt',
+        format: { type: 'datetime', dateStyle: 'medium', timeStyle: 'short' },
+      },
       { key: 'notes', label: 'Notes', dataPath: 'notes' },
     ],
+    filters: [
+      { key: 'status', label: 'Status', field: 'status', type: 'enum' },
+      {
+        key: 'arr',
+        label: 'ARR',
+        field: 'arr',
+        type: 'currency',
+        valueMode: 'range',
+      },
+      {
+        key: 'lastActivityAt',
+        label: 'Last activity',
+        field: 'lastActivityAt',
+        type: 'datetime',
+        valueMode: 'range',
+      },
+    ],
   },
-});`;function $(){return m("div",{className:"space-y-8",children:[m("div",{className:"space-y-4",children:[n("h1",{className:"font-bold text-4xl",children:"DataViews"}),m("p",{className:"text-muted-foreground",children:["A ",n("strong",{children:"DataViewSpec"})," describes how data should be queried, filtered, sorted, and presented to users. Runtime adapters execute optimized database queries and serve list views, detail views, and search interfaces while respecting policy constraints."]})]}),m("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Core concepts"}),m("div",{className:"space-y-3",children:[m("div",{children:[n("h3",{className:"font-semibold text-lg",children:"Data sources"}),n("p",{className:"text-muted-foreground",children:"A DataView connects to one or more data sources\u2014databases, APIs, or other capabilities. You specify the source and the fields you want to expose."})]}),m("div",{children:[n("h3",{className:"font-semibold text-lg",children:"Filtering"}),n("p",{className:"text-muted-foreground",children:`Define filters that users can apply to narrow down results. Filters can be simple (e.g., "status equals 'active'") or complex (e.g., "created within the last 30 days AND assigned to current user").`})]}),m("div",{children:[n("h3",{className:"font-semibold text-lg",children:"Sorting"}),n("p",{className:"text-muted-foreground",children:"Specify which fields can be sorted and the default sort order. ContractSpec generates efficient database queries with proper indexes."})]}),m("div",{children:[n("h3",{className:"font-semibold text-lg",children:"Pagination"}),n("p",{className:"text-muted-foreground",children:"DataViews automatically support pagination to handle large datasets. You can configure page size limits and cursor-based or offset-based pagination."})]}),m("div",{children:[n("h3",{className:"font-semibold text-lg",children:"Aggregations"}),n("p",{className:"text-muted-foreground",children:"Compute aggregates like counts, sums, averages, and group-by operations. These are useful for dashboards and summary views."})]})]})]}),m("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Example DataViewSpec"}),m("p",{className:"text-muted-foreground",children:["Here is the canonical table contract used by the live"," ",n(w,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),":"]}),n("div",{className:"overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",children:n("pre",{children:Z})}),n("p",{className:"text-muted-foreground text-sm",children:"This one contract drives the DataView lane, while the same rows and controller also feed the raw web primitive, native-first primitive, and composed design-system demos."})]}),m("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Policy integration"}),m("p",{className:"text-muted-foreground",children:["DataViews automatically enforce"," ",n(w,{href:"/docs/specs/policy",className:"text-violet-400 hover:text-violet-300",children:"PolicySpecs"}),". If a user doesn't have permission to see certain fields, those fields are automatically filtered out or redacted. If a user can only see their own data, the query is automatically scoped."]}),n("p",{className:"text-muted-foreground",children:"This means you define the data view once, and it works correctly for all users based on their permissions\u2014no need to write separate queries for different roles."})]}),m("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Served outputs"}),n("p",{className:"text-muted-foreground",children:"From a DataViewSpec, ContractSpec serves:"}),m("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[m("li",{children:[n("strong",{children:"Database queries"})," \u2013 Optimized SQL or NoSQL queries executed at runtime"]}),m("li",{children:[n("strong",{children:"API endpoints"})," \u2013 RESTful or GraphQL endpoints for fetching data"]}),m("li",{children:[n("strong",{children:"UI components"})," \u2013 List views, tables, cards, and detail views"]}),m("li",{children:[n("strong",{children:"Search interfaces"})," \u2013 Full-text search with autocomplete"]}),m("li",{children:[n("strong",{children:"Export functions"})," \u2013 CSV, JSON, or Excel exports"]})]})]}),m("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Best practices"}),m("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[n("li",{children:"Only expose fields that users actually need\u2014this improves performance and security."}),n("li",{children:"Use appropriate indexes for sortable and filterable fields."}),n("li",{children:"Set reasonable pagination limits to prevent performance issues."}),n("li",{children:"Use aggregations sparingly\u2014they can be expensive on large datasets."}),n("li",{children:"Test DataViews with realistic data volumes to ensure they perform well."})]})]}),m("div",{className:"flex items-center gap-4 pt-4",children:[n(w,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Previous: Capabilities"}),m(w,{href:"/docs/specs/workflows",className:"btn-primary",children:["Next: Workflows ",n(X,{size:16})]})]})]})}import{CodeBlock as T}from"@contractspec/lib.design-system";import O from"@contractspec/lib.ui-link";import{jsx as l,jsxs as h}from"react/jsx-runtime";var L=["declared routes, surfaces, layouts, slots, actions, and data recipes","entity registries and field renderers for relation-heavy workbenches","preference-aware adaptation across guidance, density, data depth, control, media, pace, and narrative","auditable overlays and bounded AI patch proposals instead of free-form JSX generation"],x=["Define one `ModuleBundleSpec` with `defineModuleBundle` and keep the route and surface map explicit.","Resolve the bundle with `resolveBundle` for a real user, route, device, and preference profile.","Render the plan through `BundleProvider` and `BundleRenderer` so the UI stays downstream of the resolved spec.","Add overlays, policy hooks, planner proposals, and telemetry only after the base route resolves cleanly.","Pilot one dense domain first, such as a PM or operations workbench, before expanding the abstraction across the app."];function j(){return h("div",{className:"space-y-10",children:[h("section",{className:"space-y-3",children:[l("p",{className:"editorial-kicker",children:"Spec pack"}),l("h1",{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"Module bundles turn surface composition into a typed ContractSpec runtime instead of a pile of bespoke page code."}),h("p",{className:"max-w-3xl text-lg text-muted-foreground leading-8",children:["The implemented package is"," ",l("code",{children:"@contractspec/lib.surface-runtime"}),". It lets you define a bundle spec once, resolve it into a personalized surface plan, then render that plan through React without letting AI or per-route custom code bypass the declared system boundary."]})]}),h("section",{className:"editorial-proof-strip",children:[h("div",{className:"editorial-stat",children:[l("span",{className:"editorial-label",children:"Runtime promise"}),l("span",{className:"editorial-stat-value",children:"bundle spec \u2192 resolved surface plan"})]}),l("p",{className:"max-w-2xl text-muted-foreground text-sm leading-7",children:"The bundle spec owns what can render, where it can render, which preferences matter, and how overlays and AI proposals stay bounded."})]}),l("section",{className:"grid gap-4 md:grid-cols-2",children:L.map((t)=>h("article",{className:"editorial-panel space-y-3",children:[l("h2",{className:"font-semibold text-xl",children:"Bundle capability"}),l("p",{className:"text-muted-foreground text-sm leading-7",children:t})]},t))}),h("section",{className:"editorial-panel space-y-5",children:[h("div",{className:"space-y-2",children:[l("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"1) Define the bundle"}),l("p",{className:"text-muted-foreground text-sm leading-7",children:"Start with a typed route and one surface. The runtime validates that you declared routes, surfaces, and verification coverage for all seven preference dimensions."})]}),l(T,{language:"typescript",filename:"support.workbench.bundle.ts",code:`import { defineModuleBundle } from "@contractspec/lib.surface-runtime/spec/define-module-bundle";
+});`;function $(){return m("div",{className:"space-y-8",children:[m("div",{className:"space-y-4",children:[n("h1",{className:"font-bold text-4xl",children:"DataViews"}),m("p",{className:"text-muted-foreground",children:["A ",n("strong",{children:"DataViewSpec"})," describes how data should be queried, filtered, sorted, and presented to users. Runtime adapters execute optimized database queries and serve list views, detail views, and search interfaces while respecting policy constraints."]})]}),m("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Core concepts"}),m("div",{className:"space-y-3",children:[m("div",{children:[n("h3",{className:"font-semibold text-lg",children:"Data sources"}),n("p",{className:"text-muted-foreground",children:"A DataView connects to one or more data sources\u2014databases, APIs, or other capabilities. You specify the source and the fields you want to expose."})]}),m("div",{children:[n("h3",{className:"font-semibold text-lg",children:"Filtering"}),n("p",{className:"text-muted-foreground",children:"Define filters that users can apply to narrow down results. Filters are typed as search, enum, number, percent, currency, date, time, datetime, duration, or boolean so renderers and query helpers can validate values before execution."})]}),m("div",{children:[n("h3",{className:"font-semibold text-lg",children:"Sorting"}),n("p",{className:"text-muted-foreground",children:"Specify which fields can be sorted and the default sort order. ContractSpec generates efficient database queries with proper indexes."})]}),m("div",{children:[n("h3",{className:"font-semibold text-lg",children:"Pagination"}),n("p",{className:"text-muted-foreground",children:"DataViews automatically support pagination to handle large datasets. You can configure page size limits and cursor-based or offset-based pagination."})]}),m("div",{children:[n("h3",{className:"font-semibold text-lg",children:"Aggregations"}),n("p",{className:"text-muted-foreground",children:"Compute aggregates like counts, sums, averages, and group-by operations. These are useful for dashboards and summary views."})]})]})]}),m("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Example DataViewSpec"}),m("p",{className:"text-muted-foreground",children:["Here is the canonical table contract used by the live"," ",n(w,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),":"]}),n("div",{className:"overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",children:n("pre",{children:Z})}),n("p",{className:"text-muted-foreground text-sm",children:"This one contract drives the DataView lane, while the same rows and controller also feed the raw web primitive, native-first primitive, and composed design-system demos."})]}),m("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Policy integration"}),m("p",{className:"text-muted-foreground",children:["DataViews automatically enforce"," ",n(w,{href:"/docs/specs/policy",className:"text-violet-400 hover:text-violet-300",children:"PolicySpecs"}),". If a user doesn't have permission to see certain fields, those fields are automatically filtered out or redacted. If a user can only see their own data, the query is automatically scoped."]}),n("p",{className:"text-muted-foreground",children:"This means you define the data view once, and it works correctly for all users based on their permissions\u2014no need to write separate queries for different roles."})]}),m("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Served outputs"}),n("p",{className:"text-muted-foreground",children:"From a DataViewSpec, ContractSpec serves:"}),m("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[m("li",{children:[n("strong",{children:"Database queries"})," \u2013 Optimized SQL or NoSQL queries executed at runtime"]}),m("li",{children:[n("strong",{children:"API endpoints"})," \u2013 RESTful or GraphQL endpoints for fetching data"]}),m("li",{children:[n("strong",{children:"UI components"})," \u2013 List views, tables, cards, and detail views"]}),m("li",{children:[n("strong",{children:"Search interfaces"})," \u2013 Full-text search with autocomplete"]}),m("li",{children:[n("strong",{children:"Export functions"})," \u2013 CSV, JSON, or Excel exports"]})]})]}),m("div",{className:"space-y-4",children:[n("h2",{className:"font-bold text-2xl",children:"Best practices"}),m("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[n("li",{children:"Only expose fields that users actually need\u2014this improves performance and security."}),n("li",{children:"Use appropriate indexes for sortable and filterable fields."}),n("li",{children:"Set reasonable pagination limits to prevent performance issues."}),n("li",{children:"Use aggregations sparingly\u2014they can be expensive on large datasets."}),n("li",{children:"Test DataViews with realistic data volumes to ensure they perform well."})]})]}),m("div",{className:"flex items-center gap-4 pt-4",children:[n(w,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Previous: Capabilities"}),m(w,{href:"/docs/specs/workflows",className:"btn-primary",children:["Next: Workflows ",n(X,{size:16})]})]})]})}import{CodeBlock as T}from"@contractspec/lib.design-system";import O from"@contractspec/lib.ui-link";import{jsx as l,jsxs as h}from"react/jsx-runtime";var L=["declared routes, surfaces, layouts, slots, actions, and data recipes","entity registries and field renderers for relation-heavy workbenches","preference-aware adaptation across guidance, density, data depth, control, media, pace, and narrative","auditable overlays and bounded AI patch proposals instead of free-form JSX generation"],x=["Define one `ModuleBundleSpec` with `defineModuleBundle` and keep the route and surface map explicit.","Resolve the bundle with `resolveBundle` for a real user, route, device, and preference profile.","Render the plan through `BundleProvider` and `BundleRenderer` so the UI stays downstream of the resolved spec.","Add overlays, policy hooks, planner proposals, and telemetry only after the base route resolves cleanly.","Pilot one dense domain first, such as a PM or operations workbench, before expanding the abstraction across the app."];function j(){return h("div",{className:"space-y-10",children:[h("section",{className:"space-y-3",children:[l("p",{className:"editorial-kicker",children:"Spec pack"}),l("h1",{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"Module bundles turn surface composition into a typed ContractSpec runtime instead of a pile of bespoke page code."}),h("p",{className:"max-w-3xl text-lg text-muted-foreground leading-8",children:["The implemented package is"," ",l("code",{children:"@contractspec/lib.surface-runtime"}),". It lets you define a bundle spec once, resolve it into a personalized surface plan, then render that plan through React without letting AI or per-route custom code bypass the declared system boundary."]})]}),h("section",{className:"editorial-proof-strip",children:[h("div",{className:"editorial-stat",children:[l("span",{className:"editorial-label",children:"Runtime promise"}),l("span",{className:"editorial-stat-value",children:"bundle spec \u2192 resolved surface plan"})]}),l("p",{className:"max-w-2xl text-muted-foreground text-sm leading-7",children:"The bundle spec owns what can render, where it can render, which preferences matter, and how overlays and AI proposals stay bounded."})]}),l("section",{className:"grid gap-4 md:grid-cols-2",children:L.map((t)=>h("article",{className:"editorial-panel space-y-3",children:[l("h2",{className:"font-semibold text-xl",children:"Bundle capability"}),l("p",{className:"text-muted-foreground text-sm leading-7",children:t})]},t))}),h("section",{className:"editorial-panel space-y-5",children:[h("div",{className:"space-y-2",children:[l("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"1) Define the bundle"}),l("p",{className:"text-muted-foreground text-sm leading-7",children:"Start with a typed route and one surface. The runtime validates that you declared routes, surfaces, and verification coverage for all seven preference dimensions."})]}),l(T,{language:"typescript",filename:"support.workbench.bundle.ts",code:`import { defineModuleBundle } from "@contractspec/lib.surface-runtime/spec/define-module-bundle";
 
 export const SupportWorkbenchBundle = defineModuleBundle({
   meta: {