@contractspec/bundle.library 3.8.9 → 3.8.11

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

@@ -1,52 +1,37 @@
 // @bun
-// src/components/docs/specs/SpecsCapabilitiesPage.tsx
-import Link from "@contractspec/lib.ui-link";
-import { ChevronRight } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function SpecsCapabilitiesPage() {
-  return /* @__PURE__ */ jsxs("div", {
-    className: "space-y-8",
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-2",
-        children: [
-          /* @__PURE__ */ jsx("h1", {
-            className: "font-bold text-4xl",
-            children: "Capabilities"
-          }),
-          /* @__PURE__ */ jsx("p", {
-            className: "text-lg text-muted-foreground",
-            children: "Capabilities are the core building block of ContractSpec. They define what your app can do."
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-6",
-        children: [
-          /* @__PURE__ */ jsxs("div", {
-            className: "space-y-3",
-            children: [
-              /* @__PURE__ */ jsx("h2", {
-                className: "font-bold text-2xl",
-                children: "Overview"
-              }),
-              /* @__PURE__ */ jsx("p", {
-                className: "text-muted-foreground",
-                children: "A ContractSpec (or Capability) is a typed, declarative description of an operation. It defines the operation's name, version, inputs, outputs, policies, and side effects. Runtime adapters automatically serve these as REST/GraphQL/MCP endpoints with full validation and policy enforcement."
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsxs("div", {
-            className: "space-y-3",
-            children: [
-              /* @__PURE__ */ jsx("h2", {
-                className: "font-bold text-2xl",
-                children: "Defining a Command (Write)"
-              }),
-              /* @__PURE__ */ jsx("div", {
-                className: "overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",
-                children: /* @__PURE__ */ jsx("pre", {
-                  children: `import { defineCommand } from '@contractspec/lib.contracts-spec';
+import{CodeBlock as S}from"@contractspec/lib.design-system";import P from"@contractspec/lib.ui-link";import{jsx as n,jsxs as u}from"react/jsx-runtime";var D=[{title:"Managed",body:"Best when the team wants the platform to own setup, routing, readiness, and mobile-safe defaults."},{title:"Local",body:"Best for power users who want tenant-local execution providers and tighter data-locality control."},{title:"Hybrid",body:"Best when some work should stay local while preview, review, or export flows still use managed coordination."}],O=["Capture prompts, files, voice, and other inbound sources into a typed workspace instead of relying on a single chat transcript.","Fuse the sources into decisions, assumptions, and blueprint updates with provenance and approval memory.","Compile authoring work into execution lanes, then route the work to explicit provider profiles and runtime targets.","Create previews, run readiness gates, and record receipts before export becomes an operator action.","Keep mobile review parity so approvals, incidents, and patch proposals can be inspected away from the desktop workbench."];function W(){return u("div",{className:"space-y-10",children:[u("section",{className:"space-y-3",children:[n("p",{className:"editorial-kicker",children:"Spec pack"}),n("h1",{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"Builder is a governed authoring control plane, not a frontier coding agent."}),u("p",{className:"max-w-3xl text-lg text-muted-foreground leading-8",children:["The implemented Builder stack sits across"," ",n("code",{children:"@contractspec/lib.builder-spec"}),","," ",n("code",{children:"@contractspec/lib.builder-runtime"}),","," ",n("code",{children:"@contractspec/lib.provider-spec"}),", and the reusable workbench/mobile modules. It orchestrates inputs, provider routing, readiness, and export decisions on top of the OSS ContractSpec foundation and the Studio operating layer."]})]}),u("section",{className:"editorial-proof-strip",children:[u("div",{className:"editorial-stat",children:[n("span",{className:"editorial-label",children:"What Builder owns"}),n("span",{className:"editorial-stat-value",children:"fusion, routing, readiness, export"})]}),n("p",{className:"max-w-2xl text-muted-foreground text-sm leading-7",children:"Builder delegates synthesis and coding to external execution providers. Its job is to keep those runs policy-aware, provenance-rich, and usable from both desktop and mobile operator surfaces."})]}),u("section",{className:"editorial-panel space-y-5",children:[u("div",{className:"space-y-2",children:[n("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"Implemented stack and entrypoints"}),n("p",{className:"text-muted-foreground text-sm leading-7",children:"You can use the type surfaces directly in code, or start from the already wired workbench and mobile review routes in the public app shell."})]}),n(S,{language:"text",filename:"builder-stack",code:`Packages
+- @contractspec/lib.builder-spec
+- @contractspec/lib.builder-runtime
+- @contractspec/lib.provider-spec
+- @contractspec/module.builder-workbench
+- @contractspec/module.mobile-review
+
+Web app routes
+- /operate/builder/workspaces/:workspaceId
+- /operate/builder/workspaces/:workspaceId/mobile-review/:cardId
+
+Operate API proxy
+- /api/operate/builder/queries/builder.workspace.snapshot
+- /api/operate/builder/commands/builder.blueprint.patch
+- /api/operate/builder/commands/builder.export.execute`})]}),n("section",{className:"grid gap-4 md:grid-cols-3",children:D.map((c)=>u("article",{className:"editorial-panel space-y-3",children:[n("h2",{className:"font-semibold text-xl",children:c.title}),n("p",{className:"text-muted-foreground text-sm leading-7",children:c.body})]},c.title))}),u("section",{className:"grid gap-5 lg:grid-cols-2",children:[u("article",{className:"editorial-panel space-y-4",children:[n("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"Typical Builder loop"}),n("ol",{className:"list-inside list-decimal space-y-3 text-muted-foreground text-sm leading-7",children:O.map((c)=>n("li",{children:c},c))})]}),u("article",{className:"editorial-panel space-y-4",children:[n("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"What Builder should not become"}),u("ul",{className:"editorial-list",children:[u("li",{children:[n("span",{className:"editorial-list-marker"}),n("span",{children:"Not a competitor to specialized coding agents such as Codex or Claude Code."})]}),u("li",{children:[n("span",{className:"editorial-list-marker"}),n("span",{children:"Not a managed-only product that traps teams away from OSS-local runtime paths."})]}),u("li",{children:[n("span",{className:"editorial-list-marker"}),n("span",{children:"Not a hidden routing layer that obscures provider provenance, receipts, or runtime mode."})]}),u("li",{children:[n("span",{className:"editorial-list-marker"}),n("span",{children:"Not a desktop-only surface. Mobile review parity is part of the control-plane contract."})]})]})]})]}),u("section",{className:"editorial-panel space-y-5",children:[u("div",{className:"space-y-2",children:[n("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"Use the workbench UI as the host surface"}),n("p",{className:"text-muted-foreground text-sm leading-7",children:"The reusable module already exposes the desktop workbench shell. Your host app keeps control of action wiring, runtime mode selection, and approval flows."})]}),n(S,{language:"tsx",filename:"BuilderWorkbenchHost.tsx",code:`import { BuilderWorkbench, useBuilderWorkbenchState } from "@contractspec/module.builder-workbench";
+
+const state = useBuilderWorkbenchState({
+  workspace: initialSnapshot.workspace,
+  initialSnapshot,
+});
+
+<BuilderWorkbench
+  snapshot={state.snapshot}
+  promptDraft={state.promptDraft}
+  onPromptDraftChange={state.setPromptDraft}
+  onCapturePrompt={capturePrompt}
+  onGenerateBlueprint={generateBlueprint}
+  onCompilePlan={compilePlan}
+  onCreatePreview={createPreview}
+  onRunReadiness={runReadiness}
+  onExecuteExport={executeExport}
+  selectedExportRuntimeMode="hybrid"
+/>;`})]}),u("section",{className:"editorial-panel space-y-4",children:[n("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"Read this with the Studio bridge in mind"}),n("p",{className:"text-muted-foreground text-sm leading-7",children:"Builder is where the OSS foundation meets the richer operating layer. Use the Studio overview when you want the higher-level product posture and team workflows on top of these contracts."}),u("div",{className:"flex flex-wrap gap-3",children:[n(P,{href:"/docs/studio",className:"btn-primary",children:"Studio overview"}),n(P,{href:"/docs/architecture/control-plane",className:"btn-ghost",children:"Control-plane runtime"})]})]})]})}import M from"@contractspec/lib.ui-link";import{ChevronRight as R}from"lucide-react";import{jsx as g,jsxs as v}from"react/jsx-runtime";function z(){return v("div",{className:"space-y-8",children:[v("div",{className:"space-y-2",children:[g("h1",{className:"font-bold text-4xl",children:"Capabilities"}),g("p",{className:"text-lg text-muted-foreground",children:"Capabilities are the core building block of ContractSpec. They define what your app can do."})]}),v("div",{className:"space-y-6",children:[v("div",{className:"space-y-3",children:[g("h2",{className:"font-bold text-2xl",children:"Overview"}),g("p",{className:"text-muted-foreground",children:"A ContractSpec (or Capability) is a typed, declarative description of an operation. It defines the operation's name, version, inputs, outputs, policies, and side effects. Runtime adapters automatically serve these as REST/GraphQL/MCP endpoints with full validation and policy enforcement."})]}),v("div",{className:"space-y-3",children:[g("h2",{className:"font-bold text-2xl",children:"Defining a Command (Write)"}),g("div",{className:"overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",children:g("pre",{children:`import { defineCommand } from '@contractspec/lib.contracts-spec';
 import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
 
 const TransferFundsInput = new SchemaModel({
@@ -84,230 +69,13 @@ export const TransferFunds = defineCommand({
     auth: 'user',
     flags: ['payments_enabled'],
   },
-});`
-                })
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsxs("div", {
-            className: "space-y-3",
-            children: [
-              /* @__PURE__ */ jsx("h2", {
-                className: "font-bold text-2xl",
-                children: "Schema Types"
-              }),
-              /* @__PURE__ */ jsxs("p", {
-                className: "text-muted-foreground",
-                children: [
-                  "ContractSpec uses ",
-                  /* @__PURE__ */ jsx("code", {
-                    children: "@contractspec/lib.schema"
-                  }),
-                  " for I/O definitions. This provides Zod validation, GraphQL types, and JSON Schema from a single source."
-                ]
-              }),
-              /* @__PURE__ */ jsxs("ul", {
-                className: "space-y-2 text-muted-foreground",
-                children: [
-                  /* @__PURE__ */ jsxs("li", {
-                    children: [
-                      "\u2022",
-                      " ",
-                      /* @__PURE__ */ jsx("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "ScalarTypeEnum.NonEmptyString()"
-                      }),
-                      " ",
-                      "- Non-empty text"
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs("li", {
-                    children: [
-                      "\u2022",
-                      " ",
-                      /* @__PURE__ */ jsx("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "ScalarTypeEnum.PositiveNumber()"
-                      }),
-                      " ",
-                      "- Positive numbers"
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs("li", {
-                    children: [
-                      "\u2022",
-                      " ",
-                      /* @__PURE__ */ jsx("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "ScalarTypeEnum.DateTime()"
-                      }),
-                      " ",
-                      "- ISO 8601 timestamps"
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs("li", {
-                    children: [
-                      "\u2022",
-                      " ",
-                      /* @__PURE__ */ jsx("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "ScalarTypeEnum.Email()"
-                      }),
-                      " ",
-                      "- Valid email addresses"
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs("li", {
-                    children: [
-                      "\u2022",
-                      " ",
-                      /* @__PURE__ */ jsx("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "defineEnum(...)"
-                      }),
-                      " ",
-                      "- Type-safe enums"
-                    ]
-                  })
-                ]
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx("div", {
-            className: "flex items-center gap-4 pt-4",
-            children: /* @__PURE__ */ jsxs(Link, {
-              href: "/docs/specs/dataviews",
-              className: "btn-primary",
-              children: [
-                "Next: DataViews ",
-                /* @__PURE__ */ jsx(ChevronRight, {
-                  size: 16
-                })
-              ]
-            })
-          })
-        ]
-      })
-    ]
-  });
-}
-
-// src/components/docs/specs/SpecsDataViewsPage.tsx
-import Link2 from "@contractspec/lib.ui-link";
-import { ChevronRight as ChevronRight2 } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function SpecsDataViewsPage() {
-  return /* @__PURE__ */ jsxs2("div", {
-    className: "space-y-8",
-    children: [
-      /* @__PURE__ */ jsxs2("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx2("h1", {
-            className: "font-bold text-4xl",
-            children: "DataViews"
-          }),
-          /* @__PURE__ */ jsxs2("p", {
-            className: "text-muted-foreground",
-            children: [
-              "A ",
-              /* @__PURE__ */ jsx2("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."
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs2("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx2("h2", {
-            className: "font-bold text-2xl",
-            children: "Core concepts"
-          }),
-          /* @__PURE__ */ jsxs2("div", {
-            className: "space-y-3",
-            children: [
-              /* @__PURE__ */ jsxs2("div", {
-                children: [
-                  /* @__PURE__ */ jsx2("h3", {
-                    className: "font-semibold text-lg",
-                    children: "Data sources"
-                  }),
-                  /* @__PURE__ */ jsx2("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."
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs2("div", {
-                children: [
-                  /* @__PURE__ */ jsx2("h3", {
-                    className: "font-semibold text-lg",
-                    children: "Filtering"
-                  }),
-                  /* @__PURE__ */ jsx2("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").`
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs2("div", {
-                children: [
-                  /* @__PURE__ */ jsx2("h3", {
-                    className: "font-semibold text-lg",
-                    children: "Sorting"
-                  }),
-                  /* @__PURE__ */ jsx2("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."
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs2("div", {
-                children: [
-                  /* @__PURE__ */ jsx2("h3", {
-                    className: "font-semibold text-lg",
-                    children: "Pagination"
-                  }),
-                  /* @__PURE__ */ jsx2("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."
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs2("div", {
-                children: [
-                  /* @__PURE__ */ jsx2("h3", {
-                    className: "font-semibold text-lg",
-                    children: "Aggregations"
-                  }),
-                  /* @__PURE__ */ jsx2("p", {
-                    className: "text-muted-foreground",
-                    children: "Compute aggregates like counts, sums, averages, and group-by operations. These are useful for dashboards and summary views."
-                  })
-                ]
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs2("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx2("h2", {
-            className: "font-bold text-2xl",
-            children: "Example DataViewSpec"
-          }),
-          /* @__PURE__ */ jsx2("p", {
-            className: "text-muted-foreground",
-            children: "Here's a DataView for listing orders in TypeScript:"
-          }),
-          /* @__PURE__ */ jsx2("div", {
-            className: "overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",
-            children: /* @__PURE__ */ jsx2("pre", {
-              children: `import { defineDataView } from '@contractspec/lib.contracts-spec';
+});`})})]}),v("div",{className:"space-y-3",children:[g("h2",{className:"font-bold text-2xl",children:"Schema Types"}),v("p",{className:"text-muted-foreground",children:["ContractSpec uses ",g("code",{children:"@contractspec/lib.schema"})," for I/O definitions. This provides Zod validation, GraphQL types, and JSON Schema from a single source."]}),v("ul",{className:"space-y-2 text-muted-foreground",children:[v("li",{children:["\u2022"," ",g("code",{className:"rounded bg-background/50 px-2 py-1",children:"ScalarTypeEnum.NonEmptyString()"})," ","- Non-empty text"]}),v("li",{children:["\u2022"," ",g("code",{className:"rounded bg-background/50 px-2 py-1",children:"ScalarTypeEnum.PositiveNumber()"})," ","- Positive numbers"]}),v("li",{children:["\u2022"," ",g("code",{className:"rounded bg-background/50 px-2 py-1",children:"ScalarTypeEnum.DateTime()"})," ","- ISO 8601 timestamps"]}),v("li",{children:["\u2022"," ",g("code",{className:"rounded bg-background/50 px-2 py-1",children:"ScalarTypeEnum.Email()"})," ","- Valid email addresses"]}),v("li",{children:["\u2022"," ",g("code",{className:"rounded bg-background/50 px-2 py-1",children:"defineEnum(...)"})," ","- Type-safe enums"]})]})]}),g("div",{className:"flex items-center gap-4 pt-4",children:v(M,{href:"/docs/specs/dataviews",className:"btn-primary",children:["Next: DataViews ",g(R,{size:16})]})})]})]})}import{CodeBlock as U}from"@contractspec/lib.design-system";import B from"@contractspec/lib.ui-link";import{jsx as s,jsxs as y}from"react/jsx-runtime";var E=[{title:"ContextPack",body:"Projects the current repo state, impacted contracts, canon packs, policy bindings, and acceptance checks into one task-scoped envelope."},{title:"PlanPacket",body:"Compiles a candidate objective into ACP-aware steps plus explicit refs back to control-plane intent, plan compile, and plan verify contracts."},{title:"PatchVerdict",body:"Classifies one file edit or shell command as permit, rewrite, require_review, or deny, with runtime-linked control-plane state when available."},{title:"ReviewPacket",body:"Persists the evidence a human needs when Connect escalates, while keeping the local artifact trail authoritative in OSS mode."}],q=["Enable `connect` in `.contractsrc.json` and keep your protected, immutable, generated, and smoke-check policies explicit.","Run `contractspec connect context` and `contractspec connect plan` before risky work so the agent is operating on task-scoped evidence, not ambient repo assumptions.","Gate file and shell mutations through `contractspec connect verify` or the host hook commands instead of inventing editor-specific approval logic.","Inspect pending review packets locally first, then sync them to the Studio bridge only if your team wants centralized operator workflows.","Use replay and harness evaluation to prove whether a prior decision stayed safe when the workspace changed."],G=["Connect is not a second control plane or a second package family.","Verdicts are projections over existing `controlPlane.*`, ACP, workspace, and harness primitives.","Studio is optional for baseline enforcement. Local artifacts remain the OSS source of truth.","Destructive commands, protected paths, drift, and unknown impact stay visible instead of being hidden behind adapter magic."];function H(){return y("div",{className:"space-y-10",children:[y("section",{className:"space-y-3",children:[s("p",{className:"editorial-kicker",children:"Spec pack"}),s("h1",{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"ContractSpec Connect puts coding-agent actions behind explicit, local-first governance."}),s("p",{className:"max-w-3xl text-lg text-muted-foreground leading-8",children:"Connect is the adapter layer between agent-native actions and the existing ContractSpec stack. It reuses control-plane, ACP, workspace, knowledge, and harness primitives to explain what the agent is trying to do before a file edit or shell command lands."})]}),y("section",{className:"editorial-proof-strip",children:[y("div",{className:"editorial-stat",children:[s("span",{className:"editorial-label",children:"Authoritative surfaces"}),s("span",{className:"editorial-stat-value",children:"control plane, ACP, workspace, harness"})]}),s("p",{className:"max-w-2xl text-muted-foreground text-sm leading-7",children:"Connect stays narrow on purpose. It projects local evidence, maps its verdicts back to runtime semantics, and leaves the canonical system contracts where they already live."})]}),y("section",{className:"editorial-panel space-y-5",children:[y("div",{className:"space-y-2",children:[s("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"What you use in practice"}),s("p",{className:"text-muted-foreground text-sm leading-7",children:"The CLI and the workspace service already implement the pack. The main workflow is local initialization, task projection, verification, then optional review sync."})]}),s(U,{language:"bash",filename:"contractspec-connect",code:`contractspec connect init --scope workspace
+contractspec connect context --task refactor-docs --paths packages/libs/contracts-spec/src/control-plane/contracts.ts --json
+printf '{"objective":"Document the control-plane contract surface","commands":["bun run typecheck"]}' | contractspec connect plan --task refactor-docs --stdin --json
+printf '{"operation":"edit","path":"packages/libs/contracts-spec/src/control-plane/contracts.ts"}' | contractspec connect verify --task refactor-docs --tool acp.fs.access --stdin --json
+printf 'bun run typecheck' | contractspec connect verify --task refactor-docs --tool acp.terminal.exec --stdin --json
+contractspec connect review list --json
+contractspec connect replay <decisionId> --json`})]}),y("section",{className:"space-y-5",children:[y("div",{className:"space-y-2",children:[s("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"The four core artifacts"}),s("p",{className:"text-muted-foreground text-sm leading-7",children:"Every Connect command is there to emit or inspect one of these reviewable objects under `.contractspec/connect/*`."})]}),s("div",{className:"grid gap-4 md:grid-cols-2",children:E.map((c)=>y("article",{className:"editorial-panel space-y-3",children:[s("h3",{className:"font-semibold text-xl",children:c.title}),s("p",{className:"text-muted-foreground text-sm leading-7",children:c.body})]},c.title))})]}),y("section",{className:"grid gap-5 lg:grid-cols-2",children:[y("article",{className:"editorial-panel space-y-4",children:[s("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"Adopt Connect in this order"}),s("ol",{className:"list-inside list-decimal space-y-3 text-muted-foreground text-sm leading-7",children:q.map((c)=>s("li",{children:c},c))})]}),y("article",{className:"editorial-panel space-y-4",children:[s("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"Boundaries that keep it trustworthy"}),s("ul",{className:"editorial-list",children:G.map((c)=>y("li",{children:[s("span",{className:"editorial-list-marker"}),s("span",{children:c})]},c))})]})]}),y("section",{className:"editorial-panel space-y-4",children:[s("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"Where Connect fits in the rest of the docs"}),s("p",{className:"text-muted-foreground text-sm leading-7",children:"Read the control-plane runtime page when you want the underlying governance contracts, then use the Studio bridge only if your team wants centralized review queues on top of the OSS-local evidence path."}),y("div",{className:"flex flex-wrap gap-3",children:[s(B,{href:"/docs/architecture/control-plane",className:"btn-primary",children:"Control-plane runtime"}),s(B,{href:"/docs/studio",className:"btn-ghost",children:"Studio bridge"})]})]})]})}import N from"@contractspec/lib.ui-link";import{ChevronRight as V}from"lucide-react";import{jsx as r,jsxs as m}from"react/jsx-runtime";function _(){return m("div",{className:"space-y-8",children:[m("div",{className:"space-y-4",children:[r("h1",{className:"font-bold text-4xl",children:"DataViews"}),m("p",{className:"text-muted-foreground",children:["A ",r("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:[r("h2",{className:"font-bold text-2xl",children:"Core concepts"}),m("div",{className:"space-y-3",children:[m("div",{children:[r("h3",{className:"font-semibold text-lg",children:"Data sources"}),r("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:[r("h3",{className:"font-semibold text-lg",children:"Filtering"}),r("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:[r("h3",{className:"font-semibold text-lg",children:"Sorting"}),r("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:[r("h3",{className:"font-semibold text-lg",children:"Pagination"}),r("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:[r("h3",{className:"font-semibold text-lg",children:"Aggregations"}),r("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:[r("h2",{className:"font-bold text-2xl",children:"Example DataViewSpec"}),r("p",{className:"text-muted-foreground",children:"Here's a DataView for listing orders in TypeScript:"}),r("div",{className:"overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",children:r("pre",{children:`import { defineDataView } from '@contractspec/lib.contracts-spec';
 import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
 
 export const OrderList = defineDataView({
@@ -347,277 +115,72 @@ export const OrderList = defineDataView({
     defaultPageSize: 50,
     maxPageSize: 200,
   },
-});`
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs2("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx2("h2", {
-            className: "font-bold text-2xl",
-            children: "Policy integration"
-          }),
-          /* @__PURE__ */ jsxs2("p", {
-            className: "text-muted-foreground",
-            children: [
-              "DataViews automatically enforce",
-              " ",
-              /* @__PURE__ */ jsx2(Link2, {
-                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."
-            ]
-          }),
-          /* @__PURE__ */ jsx2("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."
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs2("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx2("h2", {
-            className: "font-bold text-2xl",
-            children: "Served outputs"
-          }),
-          /* @__PURE__ */ jsx2("p", {
-            className: "text-muted-foreground",
-            children: "From a DataViewSpec, ContractSpec serves:"
-          }),
-          /* @__PURE__ */ jsxs2("ul", {
-            className: "list-inside list-disc space-y-2 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsxs2("li", {
-                children: [
-                  /* @__PURE__ */ jsx2("strong", {
-                    children: "Database queries"
-                  }),
-                  " \u2013 Optimized SQL or NoSQL queries executed at runtime"
-                ]
-              }),
-              /* @__PURE__ */ jsxs2("li", {
-                children: [
-                  /* @__PURE__ */ jsx2("strong", {
-                    children: "API endpoints"
-                  }),
-                  " \u2013 RESTful or GraphQL endpoints for fetching data"
-                ]
-              }),
-              /* @__PURE__ */ jsxs2("li", {
-                children: [
-                  /* @__PURE__ */ jsx2("strong", {
-                    children: "UI components"
-                  }),
-                  " \u2013 List views, tables, cards, and detail views"
-                ]
-              }),
-              /* @__PURE__ */ jsxs2("li", {
-                children: [
-                  /* @__PURE__ */ jsx2("strong", {
-                    children: "Search interfaces"
-                  }),
-                  " \u2013 Full-text search with autocomplete"
-                ]
-              }),
-              /* @__PURE__ */ jsxs2("li", {
-                children: [
-                  /* @__PURE__ */ jsx2("strong", {
-                    children: "Export functions"
-                  }),
-                  " \u2013 CSV, JSON, or Excel exports"
-                ]
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs2("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx2("h2", {
-            className: "font-bold text-2xl",
-            children: "Best practices"
-          }),
-          /* @__PURE__ */ jsxs2("ul", {
-            className: "list-inside list-disc space-y-2 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsx2("li", {
-                children: "Only expose fields that users actually need\u2014this improves performance and security."
-              }),
-              /* @__PURE__ */ jsx2("li", {
-                children: "Use appropriate indexes for sortable and filterable fields."
-              }),
-              /* @__PURE__ */ jsx2("li", {
-                children: "Set reasonable pagination limits to prevent performance issues."
-              }),
-              /* @__PURE__ */ jsx2("li", {
-                children: "Use aggregations sparingly\u2014they can be expensive on large datasets."
-              }),
-              /* @__PURE__ */ jsx2("li", {
-                children: "Test DataViews with realistic data volumes to ensure they perform well."
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs2("div", {
-        className: "flex items-center gap-4 pt-4",
-        children: [
-          /* @__PURE__ */ jsx2(Link2, {
-            href: "/docs/specs/capabilities",
-            className: "btn-ghost",
-            children: "Previous: Capabilities"
-          }),
-          /* @__PURE__ */ jsxs2(Link2, {
-            href: "/docs/specs/workflows",
-            className: "btn-primary",
-            children: [
-              "Next: Workflows ",
-              /* @__PURE__ */ jsx2(ChevronRight2, {
-                size: 16
-              })
-            ]
-          })
-        ]
-      })
-    ]
-  });
-}
+});`})})]}),m("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Policy integration"}),m("p",{className:"text-muted-foreground",children:["DataViews automatically enforce"," ",r(N,{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."]}),r("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:[r("h2",{className:"font-bold text-2xl",children:"Served outputs"}),r("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:[r("strong",{children:"Database queries"})," \u2013 Optimized SQL or NoSQL queries executed at runtime"]}),m("li",{children:[r("strong",{children:"API endpoints"})," \u2013 RESTful or GraphQL endpoints for fetching data"]}),m("li",{children:[r("strong",{children:"UI components"})," \u2013 List views, tables, cards, and detail views"]}),m("li",{children:[r("strong",{children:"Search interfaces"})," \u2013 Full-text search with autocomplete"]}),m("li",{children:[r("strong",{children:"Export functions"})," \u2013 CSV, JSON, or Excel exports"]})]})]}),m("div",{className:"space-y-4",children:[r("h2",{className:"font-bold text-2xl",children:"Best practices"}),m("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[r("li",{children:"Only expose fields that users actually need\u2014this improves performance and security."}),r("li",{children:"Use appropriate indexes for sortable and filterable fields."}),r("li",{children:"Set reasonable pagination limits to prevent performance issues."}),r("li",{children:"Use aggregations sparingly\u2014they can be expensive on large datasets."}),r("li",{children:"Test DataViews with realistic data volumes to ensure they perform well."})]})]}),m("div",{className:"flex items-center gap-4 pt-4",children:[r(N,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Previous: Capabilities"}),m(N,{href:"/docs/specs/workflows",className:"btn-primary",children:["Next: Workflows ",r(V,{size:16})]})]})]})}import{CodeBlock as C}from"@contractspec/lib.design-system";import I from"@contractspec/lib.ui-link";import{jsx as l,jsxs as h}from"react/jsx-runtime";var K=["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"],Y=["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 F(){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:K.map((c)=>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:c})]},c))}),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(C,{language:"typescript",filename:"support.workbench.bundle.ts",code:`import { defineModuleBundle } from "@contractspec/lib.surface-runtime/spec/define-module-bundle";
 
-// src/components/docs/specs/SpecsOverlaysPage.tsx
-import Link3 from "@contractspec/lib.ui-link";
-import { ChevronRight as ChevronRight3 } from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function SpecsOverlaysPage() {
-  return /* @__PURE__ */ jsxs3("div", {
-    className: "space-y-8",
-    children: [
-      /* @__PURE__ */ jsxs3("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx3("h1", {
-            className: "font-bold text-4xl",
-            children: "Overlays"
-          }),
-          /* @__PURE__ */ jsxs3("p", {
-            className: "text-muted-foreground",
-            children: [
-              "An ",
-              /* @__PURE__ */ jsx3("strong", {
-                children: "OverlaySpec"
-              }),
-              " allows tenants or users to customize UI layouts and field visibility without modifying the underlying application code. Overlays are cryptographically signed to ensure they respect policy boundaries and cannot introduce security vulnerabilities."
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs3("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx3("h2", {
-            className: "font-bold text-2xl",
-            children: "Why overlays matter"
-          }),
-          /* @__PURE__ */ jsx3("p", {
-            className: "text-muted-foreground",
-            children: "Different users have different needs. A power user might want to see all available fields and actions, while a casual user prefers a simplified interface. A tenant in a multi-tenant application might want to brand the UI or hide features they don't use."
-          }),
-          /* @__PURE__ */ jsx3("p", {
-            className: "text-muted-foreground",
-            children: "Traditional approaches require either building multiple UIs or adding complex configuration logic throughout the codebase. OverlaySpecs provide a safer, more maintainable solution: users can customize their experience, but only within the bounds allowed by the underlying specs and policies."
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs3("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx3("h2", {
-            className: "font-bold text-2xl",
-            children: "What overlays can do"
-          }),
-          /* @__PURE__ */ jsxs3("ul", {
-            className: "list-inside list-disc space-y-2 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Hide or show fields"
-                  }),
-                  " \u2013 Remove fields from forms or detail views (but only if the user has permission to see them in the first place)"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Reorder fields"
-                  }),
-                  " \u2013 Change the order in which fields appear"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Rename labels"
-                  }),
-                  " \u2013 Use different terminology that's more familiar to the user"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Change layouts"
-                  }),
-                  " \u2013 Switch between list, grid, or card views"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Add help text"
-                  }),
-                  " \u2013 Provide context-specific guidance"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Set default values"
-                  }),
-                  " \u2013 Pre-fill forms with tenant-specific defaults"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Apply branding"
-                  }),
-                  " \u2013 Customize colors, logos, and styling (within approved themes)"
-                ]
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs3("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx3("h2", {
-            className: "font-bold text-2xl",
-            children: "Example OverlaySpec"
-          }),
-          /* @__PURE__ */ jsx3("p", {
-            className: "text-muted-foreground",
-            children: "Here's an overlay that customizes an order form:"
-          }),
-          /* @__PURE__ */ jsx3("div", {
-            className: "overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",
-            children: /* @__PURE__ */ jsx3("pre", {
-              children: `overlayId: acme-order-form
+export const SupportWorkbenchBundle = defineModuleBundle({
+  meta: {
+    key: "support.workbench",
+    version: "0.1.0",
+    title: "Support Workbench",
+  },
+  routes: [
+    {
+      routeId: "support-ticket",
+      path: "/operate/support/tickets/:ticketId",
+      defaultSurface: "ticket-workbench",
+    },
+  ],
+  surfaces: {
+    "ticket-workbench": {
+      surfaceId: "ticket-workbench",
+      kind: "workbench",
+      slots: [{ slotId: "primary", role: "primary", accepts: ["entity-section"], cardinality: "many" }],
+      layouts: [{ layoutId: "balanced", title: "Balanced", root: { type: "slot", slotId: "primary" } }],
+      data: [{ recipeId: "ticket-core", source: { kind: "entity", entityType: "support.ticket" }, hydrateInto: "ticket" }],
+      verification: {
+        dimensions: {
+          guidance: "Surface can reveal walkthrough or inline help states.",
+          density: "Layout supports compact and balanced detail modes.",
+          dataDepth: "Resolver can hydrate summary or detailed ticket context.",
+          control: "Advanced actions stay policy-gated.",
+          media: "Surface supports text-first and hybrid assist modes.",
+          pace: "Transitions and confirmations adapt to operator pace.",
+          narrative: "Summary and evidence ordering stay explicit.",
+        },
+      },
+    },
+  },
+});`})]}),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:"2) Resolve and render the plan"}),l("p",{className:"text-muted-foreground text-sm leading-7",children:"The app renders the resolved plan, not the raw spec. That keeps layout choice, data hydration, overlays, and AI proposals auditable."})]}),l(C,{language:"tsx",filename:"SurfaceHost.tsx",code:`import { BundleProvider, BundleRenderer } from "@contractspec/lib.surface-runtime/react";
+import { resolveBundle } from "@contractspec/lib.surface-runtime/runtime/resolve-bundle";
+
+const plan = await resolveBundle(SupportWorkbenchBundle, {
+  tenantId: "tenant_demo",
+  workspaceId: "workspace_ops",
+  actorId: "user_42",
+  route: "/operate/support/tickets/123",
+  params: { ticketId: "123" },
+  query: {},
+  device: "desktop",
+  locale: "en",
+  preferences: {
+    guidance: "hints",
+    density: "compact",
+    dataDepth: "detailed",
+    control: "advanced",
+    media: "hybrid",
+    pace: "balanced",
+    narrative: "top-down",
+  },
+  capabilities: ["tickets.read", "tickets.update"],
+});
+
+export function SurfaceHost() {
+  return (
+    <BundleProvider plan={plan}>
+      <BundleRenderer assistantSlotId="assistant" />
+    </BundleProvider>
+  );
+}`})]}),h("section",{className:"grid gap-5 lg:grid-cols-2",children:[h("article",{className:"editorial-panel space-y-4",children:[l("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"Adoption loop"}),l("ol",{className:"list-inside list-decimal space-y-3 text-muted-foreground text-sm leading-7",children:Y.map((c)=>l("li",{children:c},c))})]}),h("article",{className:"editorial-panel space-y-4",children:[l("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"Guardrails that matter"}),h("ul",{className:"editorial-list",children:[h("li",{children:[l("span",{className:"editorial-list-marker"}),l("span",{children:"Do not stuff this behavior back into `lib.ui-kit`."})]}),h("li",{children:[l("span",{className:"editorial-list-marker"}),l("span",{children:"Do not let AI invent undeclared components or mutate raw DOM state."})]}),h("li",{children:[l("span",{className:"editorial-list-marker"}),l("span",{children:"Keep third-party UI libraries behind adapter subpaths only."})]}),h("li",{children:[l("span",{className:"editorial-list-marker"}),l("span",{children:"Every surface still needs explicit verification coverage for the seven preference dimensions."})]})]})]})]}),h("section",{className:"editorial-panel space-y-4",children:[l("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"Continue with overlays and runtime architecture"}),l("p",{className:"text-muted-foreground text-sm leading-7",children:"Once the bundle resolves deterministically, move into safe customization and the wider architecture that surrounds it."}),h("div",{className:"flex flex-wrap gap-3",children:[l(I,{href:"/docs/specs/overlays",className:"btn-primary",children:"Overlays"}),l(I,{href:"/docs/architecture",className:"btn-ghost",children:"Architecture overview"})]})]})]})}import b from"@contractspec/lib.ui-link";import{ChevronRight as J}from"lucide-react";import{jsx as t,jsxs as o}from"react/jsx-runtime";function X(){return o("div",{className:"space-y-8",children:[o("div",{className:"space-y-4",children:[t("h1",{className:"font-bold text-4xl",children:"Overlays"}),o("p",{className:"text-muted-foreground",children:["An ",t("strong",{children:"OverlaySpec"})," allows tenants or users to customize UI layouts and field visibility without modifying the underlying application code. Overlays are cryptographically signed to ensure they respect policy boundaries and cannot introduce security vulnerabilities."]})]}),o("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Why overlays matter"}),t("p",{className:"text-muted-foreground",children:"Different users have different needs. A power user might want to see all available fields and actions, while a casual user prefers a simplified interface. A tenant in a multi-tenant application might want to brand the UI or hide features they don't use."}),t("p",{className:"text-muted-foreground",children:"Traditional approaches require either building multiple UIs or adding complex configuration logic throughout the codebase. OverlaySpecs provide a safer, more maintainable solution: users can customize their experience, but only within the bounds allowed by the underlying specs and policies."})]}),o("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"What overlays can do"}),o("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[o("li",{children:[t("strong",{children:"Hide or show fields"})," \u2013 Remove fields from forms or detail views (but only if the user has permission to see them in the first place)"]}),o("li",{children:[t("strong",{children:"Reorder fields"})," \u2013 Change the order in which fields appear"]}),o("li",{children:[t("strong",{children:"Rename labels"})," \u2013 Use different terminology that's more familiar to the user"]}),o("li",{children:[t("strong",{children:"Change layouts"})," \u2013 Switch between list, grid, or card views"]}),o("li",{children:[t("strong",{children:"Add help text"})," \u2013 Provide context-specific guidance"]}),o("li",{children:[t("strong",{children:"Set default values"})," \u2013 Pre-fill forms with tenant-specific defaults"]}),o("li",{children:[t("strong",{children:"Apply branding"})," \u2013 Customize colors, logos, and styling (within approved themes)"]})]})]}),o("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Example OverlaySpec"}),t("p",{className:"text-muted-foreground",children:"Here's an overlay that customizes an order form:"}),t("div",{className:"overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",children:t("pre",{children:`overlayId: acme-order-form
 version: '1.0.0'.0.0
 appliesTo:
   capability: createOrder
@@ -654,550 +217,7 @@ modifications:
 signature:
   algorithm: EdDSA
   publicKey: "acme-corp-overlay-key"
-  signature: "base64-encoded-signature"`
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs3("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx3("h2", {
-            className: "font-bold text-2xl",
-            children: "Safety guarantees"
-          }),
-          /* @__PURE__ */ jsx3("p", {
-            className: "text-muted-foreground",
-            children: "Overlays are powerful, but they must not compromise security or data integrity. ContractSpec enforces several guarantees:"
-          }),
-          /* @__PURE__ */ jsxs3("ul", {
-            className: "list-inside list-disc space-y-2 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Overlays cannot grant new permissions"
-                  }),
-                  " \u2013 They can only hide or rearrange what the user is already allowed to see"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Overlays cannot bypass validation"
-                  }),
-                  " \u2013 Field types, constraints, and business rules from the underlying spec still apply"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Overlays must be signed"
-                  }),
-                  " \u2013 Only authorized parties (typically tenant admins) can create overlays"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Overlays are versioned"
-                  }),
-                  " \u2013 Changes to overlays are tracked and can be rolled back"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Overlays are audited"
-                  }),
-                  " \u2013 Every overlay application is logged"
-                ]
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs3("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx3("h2", {
-            className: "font-bold text-2xl",
-            children: "Creating overlays"
-          }),
-          /* @__PURE__ */ jsx3("p", {
-            className: "text-muted-foreground",
-            children: "Overlays can be created through:"
-          }),
-          /* @__PURE__ */ jsxs3("ul", {
-            className: "list-inside list-disc space-y-2 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Visual editor"
-                  }),
-                  " \u2013 A drag-and-drop interface for non-technical users"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "TypeScript/JSON"
-                  }),
-                  " \u2013 For developers who prefer code"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "API"
-                  }),
-                  " \u2013 Programmatically create overlays for automation"
-                ]
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx3("p", {
-            className: "text-muted-foreground",
-            children: "Once created, overlays must be signed using a private key. The corresponding public key is registered with ContractSpec, which verifies the signature before applying the overlay."
-          }),
-          /* @__PURE__ */ jsxs3("p", {
-            className: "text-muted-foreground",
-            children: [
-              "See",
-              " ",
-              /* @__PURE__ */ jsx3(Link3, {
-                href: "/docs/libraries/overlay-engine",
-                className: "text-violet-400 underline",
-                children: "Overlay Engine docs"
-              }),
-              " ",
-              "and the",
-              " ",
-              /* @__PURE__ */ jsx3(Link3, {
-                href: "/docs/advanced/overlay-editor",
-                className: "text-violet-400 underline",
-                children: "Overlay Editor guide"
-              }),
-              " ",
-              "for end-to-end workflows."
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs3("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx3("h2", {
-            className: "font-bold text-2xl",
-            children: "Overlay scope"
-          }),
-          /* @__PURE__ */ jsx3("p", {
-            className: "text-muted-foreground",
-            children: "Overlays can be scoped to:"
-          }),
-          /* @__PURE__ */ jsxs3("ul", {
-            className: "list-inside list-disc space-y-2 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Tenant"
-                  }),
-                  " \u2013 All users in a tenant see the same overlay"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "User"
-                  }),
-                  " \u2013 Individual users can have personal overlays"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Role"
-                  }),
-                  " \u2013 All users with a specific role see the overlay"
-                ]
-              }),
-              /* @__PURE__ */ jsxs3("li", {
-                children: [
-                  /* @__PURE__ */ jsx3("strong", {
-                    children: "Device"
-                  }),
-                  " \u2013 Different overlays for mobile vs desktop"
-                ]
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx3("p", {
-            className: "text-muted-foreground",
-            children: "If multiple overlays apply to the same user, they are merged in order of specificity (user overlays override role overlays, which override tenant overlays)."
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs3("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx3("h2", {
-            className: "font-bold text-2xl",
-            children: "Best practices"
-          }),
-          /* @__PURE__ */ jsxs3("ul", {
-            className: "list-inside list-disc space-y-2 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsx3("li", {
-                children: "Start with the default UI and only create overlays when users request specific changes."
-              }),
-              /* @__PURE__ */ jsx3("li", {
-                children: "Document why each overlay modification was made\u2014this helps when reviewing or updating overlays."
-              }),
-              /* @__PURE__ */ jsx3("li", {
-                children: "Test overlays thoroughly to ensure they don't break workflows or confuse users."
-              }),
-              /* @__PURE__ */ jsx3("li", {
-                children: "Use tenant-level overlays for organizational customizations and user-level overlays for personal preferences."
-              }),
-              /* @__PURE__ */ jsx3("li", {
-                children: "Regularly review overlays to remove ones that are no longer needed."
-              }),
-              /* @__PURE__ */ jsx3("li", {
-                children: "Protect overlay signing keys carefully\u2014they control what customizations are allowed."
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs3("div", {
-        className: "flex items-center gap-4 pt-4",
-        children: [
-          /* @__PURE__ */ jsx3(Link3, {
-            href: "/docs/specs/policy",
-            className: "btn-ghost",
-            children: "Previous: Policy"
-          }),
-          /* @__PURE__ */ jsxs3(Link3, {
-            href: "/docs/safety",
-            className: "btn-primary",
-            children: [
-              "Next: Safety ",
-              /* @__PURE__ */ jsx3(ChevronRight3, {
-                size: 16
-              })
-            ]
-          })
-        ]
-      })
-    ]
-  });
-}
-
-// src/components/docs/specs/SpecsOverviewPage.tsx
-import Link4 from "@contractspec/lib.ui-link";
-import { ChevronRight as ChevronRight4 } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var specTypes = [
-  {
-    title: "Capabilities",
-    body: "Model operations, events, and presentations as explicit system behavior.",
-    href: "/docs/specs/capabilities"
-  },
-  {
-    title: "Data views",
-    body: "Describe query, filtering, and presentation behavior from the same source model.",
-    href: "/docs/specs/dataviews"
-  },
-  {
-    title: "Workflows",
-    body: "Coordinate multi-step execution, retries, monitoring, and hand-offs.",
-    href: "/docs/specs/workflows"
-  },
-  {
-    title: "Policy",
-    body: "Carry governance and access rules through every generated and runtime-served surface.",
-    href: "/docs/specs/policy"
-  },
-  {
-    title: "Overlays",
-    body: "Customize generated surfaces safely instead of forking them permanently.",
-    href: "/docs/specs/overlays"
-  },
-  {
-    title: "Safety and migration",
-    body: "Keep change safe with signing, audits, rollbacks, and explicit migration behavior.",
-    href: "/docs/safety"
-  }
-];
-function SpecsOverviewPage() {
-  return /* @__PURE__ */ jsxs4("div", {
-    className: "space-y-10",
-    children: [
-      /* @__PURE__ */ jsxs4("div", {
-        className: "space-y-3",
-        children: [
-          /* @__PURE__ */ jsx4("p", {
-            className: "editorial-kicker",
-            children: "Core model"
-          }),
-          /* @__PURE__ */ jsx4("h1", {
-            className: "font-serif text-4xl tracking-[-0.04em] md:text-5xl",
-            children: "Contracts are the durable system boundary."
-          }),
-          /* @__PURE__ */ jsx4("p", {
-            className: "max-w-3xl text-lg text-muted-foreground leading-8",
-            children: "ContractSpec uses explicit TypeScript specs to describe behavior before it spreads across APIs, UI, data models, events, and operator flows. The goal is not to hide implementation. The goal is to make the system boundary explicit enough that generation, validation, runtime enforcement, and regeneration can stay coherent."
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs4("div", {
-        className: "editorial-proof-strip",
-        children: [
-          /* @__PURE__ */ jsxs4("div", {
-            className: "editorial-stat",
-            children: [
-              /* @__PURE__ */ jsx4("span", {
-                className: "editorial-label",
-                children: "System promise"
-              }),
-              /* @__PURE__ */ jsx4("span", {
-                className: "editorial-stat-value",
-                children: "one contract \u2192 many surfaces"
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx4("p", {
-            className: "max-w-2xl text-muted-foreground text-sm leading-7",
-            children: "Use the contract layer to keep surface behavior aligned, then let runtimes and generators do the repetitive work without inventing a closed platform."
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx4("section", {
-        className: "editorial-panel space-y-5",
-        children: /* @__PURE__ */ jsxs4("div", {
-          className: "space-y-2",
-          children: [
-            /* @__PURE__ */ jsx4("h2", {
-              className: "font-serif text-3xl tracking-[-0.03em]",
-              children: "What the contract layer owns"
-            }),
-            /* @__PURE__ */ jsxs4("ul", {
-              className: "editorial-list",
-              children: [
-                /* @__PURE__ */ jsxs4("li", {
-                  children: [
-                    /* @__PURE__ */ jsx4("span", {
-                      className: "editorial-list-marker"
-                    }),
-                    /* @__PURE__ */ jsx4("span", {
-                      children: "Behavior: operations, events, presentations, workflows."
-                    })
-                  ]
-                }),
-                /* @__PURE__ */ jsxs4("li", {
-                  children: [
-                    /* @__PURE__ */ jsx4("span", {
-                      className: "editorial-list-marker"
-                    }),
-                    /* @__PURE__ */ jsx4("span", {
-                      children: "Validation: input, output, and schema boundaries."
-                    })
-                  ]
-                }),
-                /* @__PURE__ */ jsxs4("li", {
-                  children: [
-                    /* @__PURE__ */ jsx4("span", {
-                      className: "editorial-list-marker"
-                    }),
-                    /* @__PURE__ */ jsx4("span", {
-                      children: "Governance: policy, auditability, and migration rules."
-                    })
-                  ]
-                }),
-                /* @__PURE__ */ jsxs4("li", {
-                  children: [
-                    /* @__PURE__ */ jsx4("span", {
-                      className: "editorial-list-marker"
-                    }),
-                    /* @__PURE__ */ jsx4("span", {
-                      children: "Surface alignment: generated or served behavior across API, UI, data, and agent-facing interfaces."
-                    })
-                  ]
-                })
-              ]
-            })
-          ]
-        })
-      }),
-      /* @__PURE__ */ jsxs4("section", {
-        className: "space-y-5",
-        children: [
-          /* @__PURE__ */ jsxs4("div", {
-            className: "space-y-2",
-            children: [
-              /* @__PURE__ */ jsx4("h2", {
-                className: "font-serif text-3xl tracking-[-0.03em]",
-                children: "Specification types"
-              }),
-              /* @__PURE__ */ jsx4("p", {
-                className: "text-muted-foreground text-sm leading-7",
-                children: "You can adopt the model one part at a time. Not every system needs every spec type on day one."
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx4("div", {
-            className: "grid gap-4 md:grid-cols-2",
-            children: specTypes.map((item) => /* @__PURE__ */ jsxs4(Link4, {
-              href: item.href,
-              className: "editorial-panel",
-              children: [
-                /* @__PURE__ */ jsx4("h3", {
-                  className: "font-semibold text-xl",
-                  children: item.title
-                }),
-                /* @__PURE__ */ jsx4("p", {
-                  className: "mt-2 text-muted-foreground text-sm leading-7",
-                  children: item.body
-                }),
-                /* @__PURE__ */ jsxs4("div", {
-                  className: "mt-4 flex items-center gap-2 text-[color:var(--rust)] text-sm",
-                  children: [
-                    "Open section ",
-                    /* @__PURE__ */ jsx4(ChevronRight4, {
-                      size: 14
-                    })
-                  ]
-                })
-              ]
-            }, item.title))
-          })
-        ]
-      })
-    ]
-  });
-}
-
-// src/components/docs/specs/SpecsPolicyPage.tsx
-import Link5 from "@contractspec/lib.ui-link";
-import { ChevronRight as ChevronRight5 } from "lucide-react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function SpecsPolicyPage() {
-  return /* @__PURE__ */ jsxs5("div", {
-    className: "space-y-8",
-    children: [
-      /* @__PURE__ */ jsxs5("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx5("h1", {
-            className: "font-bold text-4xl",
-            children: "Policy"
-          }),
-          /* @__PURE__ */ jsxs5("p", {
-            className: "text-muted-foreground",
-            children: [
-              "A ",
-              /* @__PURE__ */ jsx5("strong", {
-                children: "PolicySpec"
-              }),
-              " defines who can do what, when, and under what conditions. ContractSpec uses attribute-based access control (ABAC) to enforce policies across your entire application\u2014from API endpoints to UI components."
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs5("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx5("h2", {
-            className: "font-bold text-2xl",
-            children: "Why policies matter"
-          }),
-          /* @__PURE__ */ jsx5("p", {
-            className: "text-muted-foreground",
-            children: "Traditional access control relies on roles (RBAC), which can become unwieldy as applications grow. ABAC is more flexible\u2014it evaluates policies based on attributes of the user, resource, action, and context."
-          }),
-          /* @__PURE__ */ jsxs5("p", {
-            className: "text-muted-foreground",
-            children: [
-              "ContractSpec's policy engine ensures that access control is consistent across all surfaces. You don't have to remember to add authorization checks in every API endpoint or UI component\u2014the",
-              " ",
-              /* @__PURE__ */ jsx5(Link5, {
-                href: "/docs/safety/pdp",
-                className: "text-violet-400 hover:text-violet-300",
-                children: "Policy Decision Point"
-              }),
-              " ",
-              "enforces policies automatically."
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs5("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx5("h2", {
-            className: "font-bold text-2xl",
-            children: "Policy structure"
-          }),
-          /* @__PURE__ */ jsx5("p", {
-            className: "text-muted-foreground",
-            children: "A PolicySpec contains one or more rules. Each rule has:"
-          }),
-          /* @__PURE__ */ jsxs5("ul", {
-            className: "list-inside list-disc space-y-2 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsxs5("li", {
-                children: [
-                  /* @__PURE__ */ jsx5("strong", {
-                    children: "Effect"
-                  }),
-                  " \u2013 PERMIT, DENY, or REDACT"
-                ]
-              }),
-              /* @__PURE__ */ jsxs5("li", {
-                children: [
-                  /* @__PURE__ */ jsx5("strong", {
-                    children: "Condition"
-                  }),
-                  " \u2013 A boolean expression that determines when the rule applies"
-                ]
-              }),
-              /* @__PURE__ */ jsxs5("li", {
-                children: [
-                  /* @__PURE__ */ jsx5("strong", {
-                    children: "Scope"
-                  }),
-                  " \u2013 Which resources, actions, or fields the rule applies to"
-                ]
-              }),
-              /* @__PURE__ */ jsxs5("li", {
-                children: [
-                  /* @__PURE__ */ jsx5("strong", {
-                    children: "Priority"
-                  }),
-                  " \u2013 Rules are evaluated in priority order; the first matching rule wins"
-                ]
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs5("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx5("h2", {
-            className: "font-bold text-2xl",
-            children: "Example PolicySpec"
-          }),
-          /* @__PURE__ */ jsx5("p", {
-            className: "text-muted-foreground",
-            children: "Here's a policy that controls access to customer data in TypeScript:"
-          }),
-          /* @__PURE__ */ jsx5("div", {
-            className: "overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",
-            children: /* @__PURE__ */ jsx5("pre", {
-              children: `import { definePolicy } from '@contractspec/lib.contracts-spec';
+  signature: "base64-encoded-signature"`})})]}),o("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Safety guarantees"}),t("p",{className:"text-muted-foreground",children:"Overlays are powerful, but they must not compromise security or data integrity. ContractSpec enforces several guarantees:"}),o("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[o("li",{children:[t("strong",{children:"Overlays cannot grant new permissions"})," \u2013 They can only hide or rearrange what the user is already allowed to see"]}),o("li",{children:[t("strong",{children:"Overlays cannot bypass validation"})," \u2013 Field types, constraints, and business rules from the underlying spec still apply"]}),o("li",{children:[t("strong",{children:"Overlays must be signed"})," \u2013 Only authorized parties (typically tenant admins) can create overlays"]}),o("li",{children:[t("strong",{children:"Overlays are versioned"})," \u2013 Changes to overlays are tracked and can be rolled back"]}),o("li",{children:[t("strong",{children:"Overlays are audited"})," \u2013 Every overlay application is logged"]})]})]}),o("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Creating overlays"}),t("p",{className:"text-muted-foreground",children:"Overlays can be created through:"}),o("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[o("li",{children:[t("strong",{children:"Visual editor"})," \u2013 A drag-and-drop interface for non-technical users"]}),o("li",{children:[t("strong",{children:"TypeScript/JSON"})," \u2013 For developers who prefer code"]}),o("li",{children:[t("strong",{children:"API"})," \u2013 Programmatically create overlays for automation"]})]}),t("p",{className:"text-muted-foreground",children:"Once created, overlays must be signed using a private key. The corresponding public key is registered with ContractSpec, which verifies the signature before applying the overlay."}),o("p",{className:"text-muted-foreground",children:["See"," ",t(b,{href:"/docs/libraries/overlay-engine",className:"text-violet-400 underline",children:"Overlay Engine docs"})," ","and the"," ",t(b,{href:"/docs/advanced/overlay-editor",className:"text-violet-400 underline",children:"Overlay Editor guide"})," ","for end-to-end workflows."]})]}),o("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Overlay scope"}),t("p",{className:"text-muted-foreground",children:"Overlays can be scoped to:"}),o("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[o("li",{children:[t("strong",{children:"Tenant"})," \u2013 All users in a tenant see the same overlay"]}),o("li",{children:[t("strong",{children:"User"})," \u2013 Individual users can have personal overlays"]}),o("li",{children:[t("strong",{children:"Role"})," \u2013 All users with a specific role see the overlay"]}),o("li",{children:[t("strong",{children:"Device"})," \u2013 Different overlays for mobile vs desktop"]})]}),t("p",{className:"text-muted-foreground",children:"If multiple overlays apply to the same user, they are merged in order of specificity (user overlays override role overlays, which override tenant overlays)."})]}),o("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Best practices"}),o("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[t("li",{children:"Start with the default UI and only create overlays when users request specific changes."}),t("li",{children:"Document why each overlay modification was made\u2014this helps when reviewing or updating overlays."}),t("li",{children:"Test overlays thoroughly to ensure they don't break workflows or confuse users."}),t("li",{children:"Use tenant-level overlays for organizational customizations and user-level overlays for personal preferences."}),t("li",{children:"Regularly review overlays to remove ones that are no longer needed."}),t("li",{children:"Protect overlay signing keys carefully\u2014they control what customizations are allowed."})]})]}),o("div",{className:"space-y-4",children:[t("h2",{className:"font-bold text-2xl",children:"Where overlays fit in the runtime"}),t("p",{className:"text-muted-foreground",children:"Overlays are safest when they sit on top of a declared bundle surface instead of ad hoc page code. Use the module-bundles docs first, then apply overlays as auditable customization on top of the resolved surface plan."}),o("div",{className:"flex flex-wrap gap-3",children:[t(b,{href:"/docs/specs/module-bundles",className:"btn-primary",children:"Module bundles"}),t(b,{href:"/docs/guides/first-module-bundle",className:"btn-ghost",children:"Build a first module bundle"})]})]}),o("div",{className:"flex items-center gap-4 pt-4",children:[t(b,{href:"/docs/specs/policy",className:"btn-ghost",children:"Previous: Policy"}),o(b,{href:"/docs/safety",className:"btn-primary",children:["Next: Safety ",t(J,{size:16})]})]})]})}import A from"@contractspec/lib.ui-link";import{ChevronRight as T}from"lucide-react";import{jsx as p,jsxs as f}from"react/jsx-runtime";var Q=[{title:"Capabilities",body:"Model operations, events, and presentations as explicit system behavior.",href:"/docs/specs/capabilities"},{title:"Data views",body:"Describe query, filtering, and presentation behavior from the same source model.",href:"/docs/specs/dataviews"},{title:"Workflows",body:"Coordinate multi-step execution, retries, monitoring, and hand-offs.",href:"/docs/specs/workflows"},{title:"Policy",body:"Carry governance and access rules through every generated and runtime-served surface.",href:"/docs/specs/policy"},{title:"Overlays",body:"Customize generated surfaces safely instead of forking them permanently.",href:"/docs/specs/overlays"},{title:"Safety and migration",body:"Keep change safe with signing, audits, rollbacks, and explicit migration behavior.",href:"/docs/safety"}],Z=[{title:"Module bundles",body:"Define typed surface bundles that resolve into auditable runtime plans instead of hand-built page logic.",href:"/docs/specs/module-bundles"},{title:"ContractSpec Connect",body:"Put coding-agent edits and commands behind local-first context, verification, replay, and review artifacts.",href:"/docs/specs/connect"},{title:"Builder control plane",body:"Coordinate multimodal authoring, provider routing, readiness, export, and mobile review on top of OSS and Studio.",href:"/docs/specs/builder-control-plane"}];function $(){return f("div",{className:"space-y-10",children:[f("div",{className:"space-y-3",children:[p("p",{className:"editorial-kicker",children:"Core model"}),p("h1",{className:"font-serif text-4xl tracking-[-0.04em] md:text-5xl",children:"Contracts are the durable system boundary."}),p("p",{className:"max-w-3xl text-lg text-muted-foreground leading-8",children:"ContractSpec uses explicit TypeScript specs to describe behavior before it spreads across APIs, UI, data models, events, and operator flows. The goal is not to hide implementation. The goal is to make the system boundary explicit enough that generation, validation, runtime enforcement, and regeneration can stay coherent."})]}),f("div",{className:"editorial-proof-strip",children:[f("div",{className:"editorial-stat",children:[p("span",{className:"editorial-label",children:"System promise"}),p("span",{className:"editorial-stat-value",children:"one contract \u2192 many surfaces"})]}),p("p",{className:"max-w-2xl text-muted-foreground text-sm leading-7",children:"Use the contract layer to keep surface behavior aligned, then let runtimes and generators do the repetitive work without inventing a closed platform."})]}),p("section",{className:"editorial-panel space-y-5",children:f("div",{className:"space-y-2",children:[p("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"What the contract layer owns"}),f("ul",{className:"editorial-list",children:[f("li",{children:[p("span",{className:"editorial-list-marker"}),p("span",{children:"Behavior: operations, events, presentations, workflows."})]}),f("li",{children:[p("span",{className:"editorial-list-marker"}),p("span",{children:"Validation: input, output, and schema boundaries."})]}),f("li",{children:[p("span",{className:"editorial-list-marker"}),p("span",{children:"Governance: policy, auditability, and migration rules."})]}),f("li",{children:[p("span",{className:"editorial-list-marker"}),p("span",{children:"Surface alignment: generated or served behavior across API, UI, data, and agent-facing interfaces."})]})]})]})}),f("section",{className:"space-y-5",children:[f("div",{className:"space-y-2",children:[p("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"Specification types"}),p("p",{className:"text-muted-foreground text-sm leading-7",children:"You can adopt the model one part at a time. Not every system needs every spec type on day one."})]}),p("div",{className:"grid gap-4 md:grid-cols-2",children:Q.map((c)=>f(A,{href:c.href,className:"editorial-panel",children:[p("h3",{className:"font-semibold text-xl",children:c.title}),p("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:c.body}),f("div",{className:"mt-4 flex items-center gap-2 text-[color:var(--rust)] text-sm",children:["Open section ",p(T,{size:14})]})]},c.title))})]}),f("section",{className:"space-y-5",children:[f("div",{className:"space-y-2",children:[p("h2",{className:"font-serif text-3xl tracking-[-0.03em]",children:"Implemented spec packs"}),p("p",{className:"text-muted-foreground text-sm leading-7",children:"These packs combine multiple contract surfaces into higher-order systems you can use directly today: agent enforcement, AI-native surface runtime, and governed Builder authoring."})]}),p("div",{className:"grid gap-4 md:grid-cols-2 xl:grid-cols-3",children:Z.map((c)=>f(A,{href:c.href,className:"editorial-panel",children:[p("h3",{className:"font-semibold text-xl",children:c.title}),p("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:c.body}),f("div",{className:"mt-4 flex items-center gap-2 text-[color:var(--rust)] text-sm",children:["Open pack ",p(T,{size:14})]})]},c.title))})]})]})}import k from"@contractspec/lib.ui-link";import{ChevronRight as L}from"lucide-react";import{jsx as e,jsxs as i}from"react/jsx-runtime";function x(){return i("div",{className:"space-y-8",children:[i("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"Policy"}),i("p",{className:"text-muted-foreground",children:["A ",e("strong",{children:"PolicySpec"})," defines who can do what, when, and under what conditions. ContractSpec uses attribute-based access control (ABAC) to enforce policies across your entire application\u2014from API endpoints to UI components."]})]}),i("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Why policies matter"}),e("p",{className:"text-muted-foreground",children:"Traditional access control relies on roles (RBAC), which can become unwieldy as applications grow. ABAC is more flexible\u2014it evaluates policies based on attributes of the user, resource, action, and context."}),i("p",{className:"text-muted-foreground",children:["ContractSpec's policy engine ensures that access control is consistent across all surfaces. You don't have to remember to add authorization checks in every API endpoint or UI component\u2014the"," ",e(k,{href:"/docs/safety/pdp",className:"text-violet-400 hover:text-violet-300",children:"Policy Decision Point"})," ","enforces policies automatically."]})]}),i("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Policy structure"}),e("p",{className:"text-muted-foreground",children:"A PolicySpec contains one or more rules. Each rule has:"}),i("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[i("li",{children:[e("strong",{children:"Effect"})," \u2013 PERMIT, DENY, or REDACT"]}),i("li",{children:[e("strong",{children:"Condition"})," \u2013 A boolean expression that determines when the rule applies"]}),i("li",{children:[e("strong",{children:"Scope"})," \u2013 Which resources, actions, or fields the rule applies to"]}),i("li",{children:[e("strong",{children:"Priority"})," \u2013 Rules are evaluated in priority order; the first matching rule wins"]})]})]}),i("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Example PolicySpec"}),e("p",{className:"text-muted-foreground",children:"Here's a policy that controls access to customer data in TypeScript:"}),e("div",{className:"overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",children:e("pre",{children:`import { definePolicy } from '@contractspec/lib.contracts-spec';
 
 export const CustomerDataAccess = definePolicy({
   meta: {
@@ -1239,181 +259,7 @@ export const CustomerDataAccess = definePolicy({
       redactFields: ['creditCard', 'ssn', 'bankAccount'],
     },
   ],
-});`
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs5("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx5("h2", {
-            className: "font-bold text-2xl",
-            children: "Attributes"
-          }),
-          /* @__PURE__ */ jsx5("p", {
-            className: "text-muted-foreground",
-            children: "Policy conditions can reference attributes from four categories:"
-          }),
-          /* @__PURE__ */ jsxs5("div", {
-            className: "space-y-3",
-            children: [
-              /* @__PURE__ */ jsxs5("div", {
-                children: [
-                  /* @__PURE__ */ jsx5("h3", {
-                    className: "font-semibold text-lg",
-                    children: "User attributes"
-                  }),
-                  /* @__PURE__ */ jsxs5("p", {
-                    className: "text-muted-foreground",
-                    children: [
-                      /* @__PURE__ */ jsx5("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "user.id"
-                      }),
-                      ",",
-                      " ",
-                      /* @__PURE__ */ jsx5("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "user.role"
-                      }),
-                      ",",
-                      " ",
-                      /* @__PURE__ */ jsx5("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "user.groups"
-                      }),
-                      ",",
-                      " ",
-                      /* @__PURE__ */ jsx5("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "user.department"
-                      }),
-                      ", custom attributes"
-                    ]
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs5("div", {
-                children: [
-                  /* @__PURE__ */ jsx5("h3", {
-                    className: "font-semibold text-lg",
-                    children: "Resource attributes"
-                  }),
-                  /* @__PURE__ */ jsxs5("p", {
-                    className: "text-muted-foreground",
-                    children: [
-                      /* @__PURE__ */ jsx5("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "resource.type"
-                      }),
-                      ",",
-                      " ",
-                      /* @__PURE__ */ jsx5("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "resource.owner"
-                      }),
-                      ",",
-                      " ",
-                      /* @__PURE__ */ jsx5("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "resource.sensitivity"
-                      }),
-                      ", custom attributes"
-                    ]
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs5("div", {
-                children: [
-                  /* @__PURE__ */ jsx5("h3", {
-                    className: "font-semibold text-lg",
-                    children: "Action attributes"
-                  }),
-                  /* @__PURE__ */ jsxs5("p", {
-                    className: "text-muted-foreground",
-                    children: [
-                      /* @__PURE__ */ jsx5("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "action"
-                      }),
-                      " ",
-                      "(read, write, delete, execute, export, etc.)"
-                    ]
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs5("div", {
-                children: [
-                  /* @__PURE__ */ jsx5("h3", {
-                    className: "font-semibold text-lg",
-                    children: "Context attributes"
-                  }),
-                  /* @__PURE__ */ jsxs5("p", {
-                    className: "text-muted-foreground",
-                    children: [
-                      /* @__PURE__ */ jsx5("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "time.hour"
-                      }),
-                      ",",
-                      " ",
-                      /* @__PURE__ */ jsx5("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "time.dayOfWeek"
-                      }),
-                      ",",
-                      " ",
-                      /* @__PURE__ */ jsx5("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "request.ipAddress"
-                      }),
-                      ",",
-                      " ",
-                      /* @__PURE__ */ jsx5("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "request.userAgent"
-                      })
-                    ]
-                  })
-                ]
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs5("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx5("h2", {
-            className: "font-bold text-2xl",
-            children: "Data classification"
-          }),
-          /* @__PURE__ */ jsxs5("p", {
-            className: "text-muted-foreground",
-            children: [
-              "You can tag fields with sensitivity levels in your",
-              " ",
-              /* @__PURE__ */ jsx5(Link5, {
-                href: "/docs/specs/capabilities",
-                className: "text-violet-400 hover:text-violet-300",
-                children: "CapabilitySpecs"
-              }),
-              " ",
-              "and",
-              " ",
-              /* @__PURE__ */ jsx5(Link5, {
-                href: "/docs/specs/dataviews",
-                className: "text-violet-400 hover:text-violet-300",
-                children: "DataViewSpecs"
-              }),
-              ":"
-            ]
-          }),
-          /* @__PURE__ */ jsx5("div", {
-            className: "overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",
-            children: /* @__PURE__ */ jsx5("pre", {
-              children: `fields:
+});`})})]}),i("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Attributes"}),e("p",{className:"text-muted-foreground",children:"Policy conditions can reference attributes from four categories:"}),i("div",{className:"space-y-3",children:[i("div",{children:[e("h3",{className:"font-semibold text-lg",children:"User attributes"}),i("p",{className:"text-muted-foreground",children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"user.id"}),","," ",e("code",{className:"rounded bg-background/50 px-2 py-1",children:"user.role"}),","," ",e("code",{className:"rounded bg-background/50 px-2 py-1",children:"user.groups"}),","," ",e("code",{className:"rounded bg-background/50 px-2 py-1",children:"user.department"}),", custom attributes"]})]}),i("div",{children:[e("h3",{className:"font-semibold text-lg",children:"Resource attributes"}),i("p",{className:"text-muted-foreground",children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"resource.type"}),","," ",e("code",{className:"rounded bg-background/50 px-2 py-1",children:"resource.owner"}),","," ",e("code",{className:"rounded bg-background/50 px-2 py-1",children:"resource.sensitivity"}),", custom attributes"]})]}),i("div",{children:[e("h3",{className:"font-semibold text-lg",children:"Action attributes"}),i("p",{className:"text-muted-foreground",children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"action"})," ","(read, write, delete, execute, export, etc.)"]})]}),i("div",{children:[e("h3",{className:"font-semibold text-lg",children:"Context attributes"}),i("p",{className:"text-muted-foreground",children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"time.hour"}),","," ",e("code",{className:"rounded bg-background/50 px-2 py-1",children:"time.dayOfWeek"}),","," ",e("code",{className:"rounded bg-background/50 px-2 py-1",children:"request.ipAddress"}),","," ",e("code",{className:"rounded bg-background/50 px-2 py-1",children:"request.userAgent"})]})]})]})]}),i("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Data classification"}),i("p",{className:"text-muted-foreground",children:["You can tag fields with sensitivity levels in your"," ",e(k,{href:"/docs/specs/capabilities",className:"text-violet-400 hover:text-violet-300",children:"CapabilitySpecs"})," ","and"," ",e(k,{href:"/docs/specs/dataviews",className:"text-violet-400 hover:text-violet-300",children:"DataViewSpecs"}),":"]}),e("div",{className:"overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",children:e("pre",{children:`fields:
   - name: email
     type: string
     sensitivity: PII
@@ -1426,298 +272,7 @@ export const CustomerDataAccess = definePolicy({
     sensitivity: PHI
   - name: salary
     type: number
-    sensitivity: confidential`
-            })
-          }),
-          /* @__PURE__ */ jsx5("p", {
-            className: "text-muted-foreground",
-            children: 'Policies can then reference these tags to enforce blanket rules like "support staff cannot see PII" or "PHI can only be accessed from approved IP addresses."'
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs5("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx5("h2", {
-            className: "font-bold text-2xl",
-            children: "Testing policies"
-          }),
-          /* @__PURE__ */ jsx5("p", {
-            className: "text-muted-foreground",
-            children: "ContractSpec provides tools for testing policies before deployment:"
-          }),
-          /* @__PURE__ */ jsxs5("ul", {
-            className: "list-inside list-disc space-y-2 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsxs5("li", {
-                children: [
-                  /* @__PURE__ */ jsx5("strong", {
-                    children: "Policy simulator"
-                  }),
-                  " \u2013 Test how policies evaluate for different users and scenarios"
-                ]
-              }),
-              /* @__PURE__ */ jsxs5("li", {
-                children: [
-                  /* @__PURE__ */ jsx5("strong", {
-                    children: "Coverage analysis"
-                  }),
-                  " \u2013 Identify resources or actions that aren't covered by any policy"
-                ]
-              }),
-              /* @__PURE__ */ jsxs5("li", {
-                children: [
-                  /* @__PURE__ */ jsx5("strong", {
-                    children: "Conflict detection"
-                  }),
-                  " \u2013 Find rules that might conflict or produce unexpected results"
-                ]
-              }),
-              /* @__PURE__ */ jsxs5("li", {
-                children: [
-                  /* @__PURE__ */ jsx5("strong", {
-                    children: "Audit mode"
-                  }),
-                  " \u2013 Run policies in audit-only mode to see what would be blocked without actually blocking it"
-                ]
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs5("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx5("h2", {
-            className: "font-bold text-2xl",
-            children: "Best practices"
-          }),
-          /* @__PURE__ */ jsxs5("ul", {
-            className: "list-inside list-disc space-y-2 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsx5("li", {
-                children: "Start with a deny-by-default policy\u2014explicitly permit what should be allowed."
-              }),
-              /* @__PURE__ */ jsx5("li", {
-                children: "Use clear, descriptive rule IDs that explain what the rule does."
-              }),
-              /* @__PURE__ */ jsx5("li", {
-                children: "Set priorities carefully to ensure rules are evaluated in the right order."
-              }),
-              /* @__PURE__ */ jsx5("li", {
-                children: "Test policies thoroughly with realistic user scenarios before deploying."
-              }),
-              /* @__PURE__ */ jsxs5("li", {
-                children: [
-                  "Monitor policy decisions in production using",
-                  " ",
-                  /* @__PURE__ */ jsx5(Link5, {
-                    href: "/docs/safety/auditing",
-                    className: "text-violet-400 hover:text-violet-300",
-                    children: "audit logs"
-                  }),
-                  "."
-                ]
-              }),
-              /* @__PURE__ */ jsx5("li", {
-                children: "Review and update policies regularly as your application and requirements evolve."
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs5("div", {
-        className: "flex items-center gap-4 pt-4",
-        children: [
-          /* @__PURE__ */ jsx5(Link5, {
-            href: "/docs/specs/workflows",
-            className: "btn-ghost",
-            children: "Previous: Workflows"
-          }),
-          /* @__PURE__ */ jsxs5(Link5, {
-            href: "/docs/specs/overlays",
-            className: "btn-primary",
-            children: [
-              "Next: Overlays ",
-              /* @__PURE__ */ jsx5(ChevronRight5, {
-                size: 16
-              })
-            ]
-          })
-        ]
-      })
-    ]
-  });
-}
-
-// src/components/docs/specs/SpecsWorkflowsPage.tsx
-import Link6 from "@contractspec/lib.ui-link";
-import { ChevronRight as ChevronRight6 } from "lucide-react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function SpecsWorkflowsPage() {
-  return /* @__PURE__ */ jsxs6("div", {
-    className: "space-y-8",
-    children: [
-      /* @__PURE__ */ jsxs6("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx6("h1", {
-            className: "font-bold text-4xl",
-            children: "Workflows"
-          }),
-          /* @__PURE__ */ jsxs6("p", {
-            className: "text-muted-foreground",
-            children: [
-              "A ",
-              /* @__PURE__ */ jsx6("strong", {
-                children: "WorkflowSpec"
-              }),
-              " orchestrates multi-step processes. It defines the sequence of operations, handles failures with retries and compensation, and provides observability into long-running tasks."
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs6("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx6("h2", {
-            className: "font-bold text-2xl",
-            children: "Core concepts"
-          }),
-          /* @__PURE__ */ jsxs6("div", {
-            className: "space-y-3",
-            children: [
-              /* @__PURE__ */ jsxs6("div", {
-                children: [
-                  /* @__PURE__ */ jsx6("h3", {
-                    className: "font-semibold text-lg",
-                    children: "Identifiers"
-                  }),
-                  /* @__PURE__ */ jsxs6("p", {
-                    className: "text-muted-foreground",
-                    children: [
-                      "Each workflow has a unique",
-                      " ",
-                      /* @__PURE__ */ jsx6("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "workflowId"
-                      }),
-                      " ",
-                      "and a",
-                      " ",
-                      /* @__PURE__ */ jsx6("code", {
-                        className: "rounded bg-background/50 px-2 py-1",
-                        children: "version"
-                      }),
-                      ". This allows you to run multiple versions of the same workflow simultaneously during migrations or A/B tests."
-                    ]
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs6("div", {
-                children: [
-                  /* @__PURE__ */ jsx6("h3", {
-                    className: "font-semibold text-lg",
-                    children: "Steps"
-                  }),
-                  /* @__PURE__ */ jsxs6("p", {
-                    className: "text-muted-foreground",
-                    children: [
-                      "A workflow is composed of ",
-                      /* @__PURE__ */ jsx6("strong", {
-                        children: "steps"
-                      }),
-                      ". Each step invokes a",
-                      " ",
-                      /* @__PURE__ */ jsx6(Link6, {
-                        href: "/docs/specs/capabilities",
-                        className: "text-violet-400 hover:text-violet-300",
-                        children: "CapabilitySpec"
-                      }),
-                      ", passes inputs, and receives outputs. Steps can run sequentially or in parallel."
-                    ]
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs6("div", {
-                children: [
-                  /* @__PURE__ */ jsx6("h3", {
-                    className: "font-semibold text-lg",
-                    children: "Transitions"
-                  }),
-                  /* @__PURE__ */ jsxs6("p", {
-                    className: "text-muted-foreground",
-                    children: [
-                      /* @__PURE__ */ jsx6("strong", {
-                        children: "Transitions"
-                      }),
-                      ' define the flow between steps. They can be conditional (e.g., "if payment succeeds, go to step 3; otherwise, go to step 5") or unconditional.'
-                    ]
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs6("div", {
-                children: [
-                  /* @__PURE__ */ jsx6("h3", {
-                    className: "font-semibold text-lg",
-                    children: "Retries"
-                  }),
-                  /* @__PURE__ */ jsx6("p", {
-                    className: "text-muted-foreground",
-                    children: "If a step fails, the workflow can retry it with exponential backoff. You specify the maximum number of retries and the backoff strategy in the spec."
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs6("div", {
-                children: [
-                  /* @__PURE__ */ jsx6("h3", {
-                    className: "font-semibold text-lg",
-                    children: "Compensation"
-                  }),
-                  /* @__PURE__ */ jsxs6("p", {
-                    className: "text-muted-foreground",
-                    children: [
-                      "When a workflow fails partway through,",
-                      " ",
-                      /* @__PURE__ */ jsx6("strong", {
-                        children: "compensation"
-                      }),
-                      " steps undo the effects of completed steps (e.g., refunding a payment, releasing a reservation). This ensures consistency even in failure scenarios."
-                    ]
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs6("div", {
-                children: [
-                  /* @__PURE__ */ jsx6("h3", {
-                    className: "font-semibold text-lg",
-                    children: "SLAs"
-                  }),
-                  /* @__PURE__ */ jsx6("p", {
-                    className: "text-muted-foreground",
-                    children: "You can define Service Level Agreements (SLAs) for each step or the entire workflow. If a step exceeds its SLA, the system can trigger alerts or escalations."
-                  })
-                ]
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs6("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx6("h2", {
-            className: "font-bold text-2xl",
-            children: "Example WorkflowSpec (TypeScript)"
-          }),
-          /* @__PURE__ */ jsx6("p", {
-            className: "text-muted-foreground",
-            children: "Here's a simplified example of a payment workflow in TypeScript:"
-          }),
-          /* @__PURE__ */ jsx6("div", {
-            className: "overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",
-            children: /* @__PURE__ */ jsx6("pre", {
-              children: `import { defineWorkflow } from '@contractspec/lib.contracts-spec/workflow';
+    sensitivity: confidential`})}),e("p",{className:"text-muted-foreground",children:'Policies can then reference these tags to enforce blanket rules like "support staff cannot see PII" or "PHI can only be accessed from approved IP addresses."'})]}),i("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Testing policies"}),e("p",{className:"text-muted-foreground",children:"ContractSpec provides tools for testing policies before deployment:"}),i("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[i("li",{children:[e("strong",{children:"Policy simulator"})," \u2013 Test how policies evaluate for different users and scenarios"]}),i("li",{children:[e("strong",{children:"Coverage analysis"})," \u2013 Identify resources or actions that aren't covered by any policy"]}),i("li",{children:[e("strong",{children:"Conflict detection"})," \u2013 Find rules that might conflict or produce unexpected results"]}),i("li",{children:[e("strong",{children:"Audit mode"})," \u2013 Run policies in audit-only mode to see what would be blocked without actually blocking it"]})]})]}),i("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Best practices"}),i("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[e("li",{children:"Start with a deny-by-default policy\u2014explicitly permit what should be allowed."}),e("li",{children:"Use clear, descriptive rule IDs that explain what the rule does."}),e("li",{children:"Set priorities carefully to ensure rules are evaluated in the right order."}),e("li",{children:"Test policies thoroughly with realistic user scenarios before deploying."}),i("li",{children:["Monitor policy decisions in production using"," ",e(k,{href:"/docs/safety/auditing",className:"text-violet-400 hover:text-violet-300",children:"audit logs"}),"."]}),e("li",{children:"Review and update policies regularly as your application and requirements evolve."})]})]}),i("div",{className:"flex items-center gap-4 pt-4",children:[e(k,{href:"/docs/specs/workflows",className:"btn-ghost",children:"Previous: Workflows"}),i(k,{href:"/docs/specs/overlays",className:"btn-primary",children:["Next: Overlays ",e(L,{size:16})]})]})]})}import w from"@contractspec/lib.ui-link";import{ChevronRight as j}from"lucide-react";import{jsx as a,jsxs as d}from"react/jsx-runtime";function ee(){return d("div",{className:"space-y-8",children:[d("div",{className:"space-y-4",children:[a("h1",{className:"font-bold text-4xl",children:"Workflows"}),d("p",{className:"text-muted-foreground",children:["A ",a("strong",{children:"WorkflowSpec"})," orchestrates multi-step processes. It defines the sequence of operations, handles failures with retries and compensation, and provides observability into long-running tasks."]})]}),d("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Core concepts"}),d("div",{className:"space-y-3",children:[d("div",{children:[a("h3",{className:"font-semibold text-lg",children:"Identifiers"}),d("p",{className:"text-muted-foreground",children:["Each workflow has a unique"," ",a("code",{className:"rounded bg-background/50 px-2 py-1",children:"workflowId"})," ","and a"," ",a("code",{className:"rounded bg-background/50 px-2 py-1",children:"version"}),". This allows you to run multiple versions of the same workflow simultaneously during migrations or A/B tests."]})]}),d("div",{children:[a("h3",{className:"font-semibold text-lg",children:"Steps"}),d("p",{className:"text-muted-foreground",children:["A workflow is composed of ",a("strong",{children:"steps"}),". Each step invokes a"," ",a(w,{href:"/docs/specs/capabilities",className:"text-violet-400 hover:text-violet-300",children:"CapabilitySpec"}),", passes inputs, and receives outputs. Steps can run sequentially or in parallel."]})]}),d("div",{children:[a("h3",{className:"font-semibold text-lg",children:"Transitions"}),d("p",{className:"text-muted-foreground",children:[a("strong",{children:"Transitions"}),' define the flow between steps. They can be conditional (e.g., "if payment succeeds, go to step 3; otherwise, go to step 5") or unconditional.']})]}),d("div",{children:[a("h3",{className:"font-semibold text-lg",children:"Retries"}),a("p",{className:"text-muted-foreground",children:"If a step fails, the workflow can retry it with exponential backoff. You specify the maximum number of retries and the backoff strategy in the spec."})]}),d("div",{children:[a("h3",{className:"font-semibold text-lg",children:"Compensation"}),d("p",{className:"text-muted-foreground",children:["When a workflow fails partway through,"," ",a("strong",{children:"compensation"})," steps undo the effects of completed steps (e.g., refunding a payment, releasing a reservation). This ensures consistency even in failure scenarios."]})]}),d("div",{children:[a("h3",{className:"font-semibold text-lg",children:"SLAs"}),a("p",{className:"text-muted-foreground",children:"You can define Service Level Agreements (SLAs) for each step or the entire workflow. If a step exceeds its SLA, the system can trigger alerts or escalations."})]})]})]}),d("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Example WorkflowSpec (TypeScript)"}),a("p",{className:"text-muted-foreground",children:"Here's a simplified example of a payment workflow in TypeScript:"}),d("p",{className:"text-muted-foreground text-sm",children:["For Vercel Workflow and other VM-evaluated runtimes, author workflow specs from"," ",a("code",{className:"rounded bg-background/50 px-2 py-1",children:"@contractspec/lib.contracts-spec/workflow/spec"})," ","rather than the broad workflow barrel."]}),a("div",{className:"overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",children:a("pre",{children:`import { defineWorkflow } from '@contractspec/lib.contracts-spec/workflow/spec';
 import { ValidatePaymentMethod, ChargePayment, SendEmail } from './specs';
 
 export const PaymentFlow = defineWorkflow({
@@ -1769,152 +324,4 @@ export const PaymentFlow = defineWorkflow({
     maxDuration: 30000, // milliseconds
     alertOnBreach: true,
   },
-});`
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs6("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx6("h2", {
-            className: "font-bold text-2xl",
-            children: "Triggers"
-          }),
-          /* @__PURE__ */ jsx6("p", {
-            className: "text-muted-foreground",
-            children: "Workflows can be triggered in several ways:"
-          }),
-          /* @__PURE__ */ jsxs6("ul", {
-            className: "list-inside list-disc space-y-2 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsxs6("li", {
-                children: [
-                  /* @__PURE__ */ jsx6("strong", {
-                    children: "Manual invocation"
-                  }),
-                  " \u2013 A user or system calls the workflow via an API endpoint."
-                ]
-              }),
-              /* @__PURE__ */ jsxs6("li", {
-                children: [
-                  /* @__PURE__ */ jsx6("strong", {
-                    children: "Event-driven"
-                  }),
-                  " \u2013 The workflow starts automatically when a specific event occurs (e.g., a new order is created)."
-                ]
-              }),
-              /* @__PURE__ */ jsxs6("li", {
-                children: [
-                  /* @__PURE__ */ jsx6("strong", {
-                    children: "Scheduled"
-                  }),
-                  " \u2013 The workflow runs on a cron schedule (e.g., nightly batch processing)."
-                ]
-              }),
-              /* @__PURE__ */ jsxs6("li", {
-                children: [
-                  /* @__PURE__ */ jsx6("strong", {
-                    children: "Chained"
-                  }),
-                  " \u2013 One workflow can invoke another as a step."
-                ]
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs6("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx6("h2", {
-            className: "font-bold text-2xl",
-            children: "Monitoring and versioning"
-          }),
-          /* @__PURE__ */ jsx6("p", {
-            className: "text-muted-foreground",
-            children: "ContractSpec automatically instruments workflows with telemetry. You can view:"
-          }),
-          /* @__PURE__ */ jsxs6("ul", {
-            className: "list-inside list-disc space-y-2 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsx6("li", {
-                children: "Real-time execution status for each step"
-              }),
-              /* @__PURE__ */ jsx6("li", {
-                children: "Historical run data and success/failure rates"
-              }),
-              /* @__PURE__ */ jsx6("li", {
-                children: "Latency distributions and SLA compliance"
-              }),
-              /* @__PURE__ */ jsx6("li", {
-                children: "Compensation events and retry attempts"
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx6("p", {
-            className: "text-muted-foreground",
-            children: "When you update a workflow, you increment its version. Running workflows continue on their original version, while new invocations use the latest version. This allows safe, zero-downtime deployments."
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs6("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx6("h2", {
-            className: "font-bold text-2xl",
-            children: "Best practices"
-          }),
-          /* @__PURE__ */ jsxs6("ul", {
-            className: "list-inside list-disc space-y-2 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsx6("li", {
-                children: "Keep steps idempotent \u2013 they should be safe to retry without side effects."
-              }),
-              /* @__PURE__ */ jsx6("li", {
-                children: "Define compensation for any step that modifies external state."
-              }),
-              /* @__PURE__ */ jsx6("li", {
-                children: "Use meaningful step IDs that describe the operation."
-              }),
-              /* @__PURE__ */ jsx6("li", {
-                children: "Set realistic SLAs and monitor them in production."
-              }),
-              /* @__PURE__ */ jsx6("li", {
-                children: "Test failure scenarios locally before deploying."
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs6("div", {
-        className: "flex items-center gap-4 pt-4",
-        children: [
-          /* @__PURE__ */ jsx6(Link6, {
-            href: "/docs/specs/capabilities",
-            className: "btn-ghost",
-            children: "Previous: Capabilities"
-          }),
-          /* @__PURE__ */ jsxs6(Link6, {
-            href: "/docs/safety",
-            className: "btn-primary",
-            children: [
-              "Next: Safety Features ",
-              /* @__PURE__ */ jsx6(ChevronRight6, {
-                size: 16
-              })
-            ]
-          })
-        ]
-      })
-    ]
-  });
-}
-export {
-  SpecsWorkflowsPage,
-  SpecsPolicyPage,
-  SpecsOverviewPage,
-  SpecsOverlaysPage,
-  SpecsDataViewsPage,
-  SpecsCapabilitiesPage
-};
+});`})})]}),d("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Triggers"}),a("p",{className:"text-muted-foreground",children:"Workflows can be triggered in several ways:"}),d("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[d("li",{children:[a("strong",{children:"Manual invocation"})," \u2013 A user or system calls the workflow via an API endpoint."]}),d("li",{children:[a("strong",{children:"Event-driven"})," \u2013 The workflow starts automatically when a specific event occurs (e.g., a new order is created)."]}),d("li",{children:[a("strong",{children:"Scheduled"})," \u2013 The workflow runs on a cron schedule (e.g., nightly batch processing)."]}),d("li",{children:[a("strong",{children:"Chained"})," \u2013 One workflow can invoke another as a step."]})]})]}),d("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Monitoring and versioning"}),a("p",{className:"text-muted-foreground",children:"ContractSpec automatically instruments workflows with telemetry. You can view:"}),d("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[a("li",{children:"Real-time execution status for each step"}),a("li",{children:"Historical run data and success/failure rates"}),a("li",{children:"Latency distributions and SLA compliance"}),a("li",{children:"Compensation events and retry attempts"})]}),a("p",{className:"text-muted-foreground",children:"When you update a workflow, you increment its version. Running workflows continue on their original version, while new invocations use the latest version. This allows safe, zero-downtime deployments."})]}),d("div",{className:"space-y-4",children:[a("h2",{className:"font-bold text-2xl",children:"Best practices"}),d("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[a("li",{children:"Keep steps idempotent \u2013 they should be safe to retry without side effects."}),a("li",{children:"Define compensation for any step that modifies external state."}),a("li",{children:"Use meaningful step IDs that describe the operation."}),a("li",{children:"Set realistic SLAs and monitor them in production."}),a("li",{children:"Test failure scenarios locally before deploying."})]})]}),d("div",{className:"flex items-center gap-4 pt-4",children:[a(w,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Previous: Capabilities"}),d(w,{href:"/docs/safety",className:"btn-primary",children:["Next: Safety Features ",a(j,{size:16})]})]})]})}export{ee as SpecsWorkflowsPage,x as SpecsPolicyPage,$ as SpecsOverviewPage,X as SpecsOverlaysPage,F as SpecsModuleBundlesPage,_ as SpecsDataViewsPage,H as SpecsConnectPage,z as SpecsCapabilitiesPage,W as SpecsBuilderControlPlanePage};