@contractspec/bundle.library 1.11.1 → 1.13.0

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

@@ -0,0 +1,2081 @@
+// src/components/docs/specs/SpecsOverviewPage.tsx
+import Link from "@contractspec/lib.ui-link";
+import { ChevronRight } from "lucide-react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function SpecsOverviewPage() {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h1", {
+            className: "text-4xl font-bold",
+            children: "Specifications Overview"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: [
+              "ContractSpec is built on a ",
+              /* @__PURE__ */ jsxDEV("strong", {
+                children: "spec-first"
+              }, undefined, false, undefined, this),
+              " philosophy. You define declarative TypeScript specifications that describe what your application can do. Runtime adapters automatically serve these specs as type-safe API endpoints (REST, GraphQL, MCP), enforce policies, and validate inputs/outputs—no code generation required."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Why spec-first matters"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "Traditional development requires writing and maintaining separate code for APIs, databases, UI components, validation logic, and access control. This approach leads to:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Duplication across front-end and back-end"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Type mismatches and runtime errors"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Security vulnerabilities from inconsistent policy enforcement"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "High maintenance burden when requirements change"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: [
+              "With ContractSpec, you define your application's operations (Commands/Queries), workflows, and policies in pure TypeScript. Runtime adapters ensure consistency, type safety, and policy enforcement across your entire stack—the spec ",
+              /* @__PURE__ */ jsxDEV("em", {
+                children: "is"
+              }, undefined, false, undefined, this),
+              " the implementation."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Specification types"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "border-border/50 overflow-x-auto rounded-lg border",
+            children: /* @__PURE__ */ jsxDEV("table", {
+              className: "w-full text-left text-sm",
+              children: [
+                /* @__PURE__ */ jsxDEV("thead", {
+                  className: "bg-card/50",
+                  children: /* @__PURE__ */ jsxDEV("tr", {
+                    className: "border-border/50 border-b",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 font-semibold",
+                        children: "Spec Type"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 font-semibold",
+                        children: "Purpose"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 font-semibold",
+                        children: "Generates"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("tbody", {
+                  className: "divide-border/50 divide-y",
+                  children: [
+                    /* @__PURE__ */ jsxDEV("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: /* @__PURE__ */ jsxDEV(Link, {
+                            href: "/docs/specs/capabilities",
+                            className: "text-violet-400 hover:text-violet-300",
+                            children: /* @__PURE__ */ jsxDEV("strong", {
+                              children: "CapabilitySpec"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Defines what your application can do: operations (Commands/Queries), their inputs, outputs, policies, and side effects."
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Runtime-served REST/GraphQL/MCP endpoints, Zod validation, policy enforcement"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: /* @__PURE__ */ jsxDEV("strong", {
+                            children: "DataViewSpec"
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Describes how data should be queried, filtered, sorted, and presented to users."
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Database queries, list/detail views, search interfaces"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: /* @__PURE__ */ jsxDEV(Link, {
+                            href: "/docs/specs/workflows",
+                            className: "text-violet-400 hover:text-violet-300",
+                            children: /* @__PURE__ */ jsxDEV("strong", {
+                              children: "WorkflowSpec"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Orchestrates multi-step processes with retries, compensation, and monitoring."
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Workflow engine, state machines, retry logic, observability hooks"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: /* @__PURE__ */ jsxDEV("strong", {
+                            children: "PolicySpec"
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Defines who can do what, when, and under what conditions. Supports ABAC and PII rules."
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Policy decision points, access control middleware, audit logs"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: /* @__PURE__ */ jsxDEV("strong", {
+                            children: "OverlaySpec"
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Allows safe, signed customization of UI layouts and field visibility by tenants or users."
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Personalized UI components, layout variations, conditional rendering"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: /* @__PURE__ */ jsxDEV("strong", {
+                            children: "TelemetrySpec"
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Specifies what metrics, logs, and traces to collect for observability."
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Instrumentation code, dashboards, alerting rules"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: /* @__PURE__ */ jsxDEV(Link, {
+                            href: "/docs/safety/migrations",
+                            className: "text-violet-400 hover:text-violet-300",
+                            children: /* @__PURE__ */ jsxDEV("strong", {
+                              children: "MigrationSpec"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Manages incremental, reversible schema and data migrations."
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Migration scripts, rollback procedures, version tracking"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "How specs work together"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: [
+              "Specs compose naturally. A ",
+              /* @__PURE__ */ jsxDEV("strong", {
+                children: "WorkflowSpec"
+              }, undefined, false, undefined, this),
+              " can invoke multiple ",
+              /* @__PURE__ */ jsxDEV("strong", {
+                children: "CapabilitySpecs"
+              }, undefined, false, undefined, this),
+              ". A",
+              " ",
+              /* @__PURE__ */ jsxDEV("strong", {
+                children: "DataViewSpec"
+              }, undefined, false, undefined, this),
+              " respects ",
+              /* @__PURE__ */ jsxDEV("strong", {
+                children: "PolicySpecs"
+              }, undefined, false, undefined, this),
+              " to filter sensitive fields. An ",
+              /* @__PURE__ */ jsxDEV("strong", {
+                children: "OverlaySpec"
+              }, undefined, false, undefined, this),
+              " can hide or rearrange UI elements generated from a ",
+              /* @__PURE__ */ jsxDEV("strong", {
+                children: "CapabilitySpec"
+              }, undefined, false, undefined, this),
+              ", but only within the bounds allowed by the underlying policy."
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "This composability means you can build complex applications from simple, reusable building blocks—all while maintaining type safety and policy enforcement."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Next steps"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "Explore each specification type in detail using the links in the table above, or continue with the core concepts:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "flex flex-wrap gap-4 pt-4",
+            children: [
+              /* @__PURE__ */ jsxDEV(Link, {
+                href: "/docs/specs/capabilities",
+                className: "btn-primary",
+                children: [
+                  "Capabilities ",
+                  /* @__PURE__ */ jsxDEV(ChevronRight, {
+                    size: 16,
+                    className: "inline"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV(Link, {
+                href: "/docs/specs/workflows",
+                className: "btn-ghost",
+                children: [
+                  "Workflows ",
+                  /* @__PURE__ */ jsxDEV(ChevronRight, {
+                    size: 16,
+                    className: "inline"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV(Link, {
+                href: "/docs/safety",
+                className: "btn-ghost",
+                children: [
+                  "Safety Features ",
+                  /* @__PURE__ */ jsxDEV(ChevronRight, {
+                    size: 16,
+                    className: "inline"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/specs/SpecsCapabilitiesPage.tsx
+import Link2 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight2 } from "lucide-react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function SpecsCapabilitiesPage() {
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h1", {
+            className: "text-4xl font-bold",
+            children: "Capabilities"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground text-lg",
+            children: "Capabilities are the core building block of ContractSpec. They define what your app can do."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-6",
+        children: [
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h2", {
+                className: "text-2xl font-bold",
+                children: "Overview"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("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."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h2", {
+                className: "text-2xl font-bold",
+                children: "Defining a Command (Write)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+                children: /* @__PURE__ */ jsxDEV2("pre", {
+                  children: `import { defineCommand } from '@contractspec/lib.contracts';
+import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
+
+const TransferFundsInput = new SchemaModel({
+  name: 'TransferFundsInput',
+  fields: {
+    recipient: { type: ScalarTypeEnum.NonEmptyString(), isOptional: false },
+    amount: { type: ScalarTypeEnum.PositiveNumber(), isOptional: false },
+  },
+});
+
+const TransferFundsOutput = new SchemaModel({
+  name: 'TransferFundsOutput',
+  fields: {
+    transactionId: { type: ScalarTypeEnum.String(), isOptional: false },
+    timestamp: { type: ScalarTypeEnum.DateTime(), isOptional: false },
+  },
+});
+
+export const TransferFunds = defineCommand({
+  meta: {
+    key: 'wallet.transferFunds',
+    version: '1.0.0',
+    description: 'Transfer funds to another user',
+    goal: 'Enable peer-to-peer payments',
+    context: 'Requires sufficient balance',
+    owners: ['team-payments'],
+    tags: ['payments'],
+    stability: 'stable',
+  },
+  io: {
+    input: TransferFundsInput,
+    output: TransferFundsOutput,
+  },
+  policy: {
+    auth: 'user',
+    flags: ['payments_enabled'],
+  },
+});`
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h2", {
+                className: "text-2xl font-bold",
+                children: "Schema Types"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "ContractSpec uses ",
+                  /* @__PURE__ */ jsxDEV2("code", {
+                    children: "@contractspec/lib.schema"
+                  }, undefined, false, undefined, this),
+                  " for I/O definitions. This provides Zod validation, GraphQL types, and JSON Schema from a single source."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("ul", {
+                className: "text-muted-foreground space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: [
+                      "•",
+                      " ",
+                      /* @__PURE__ */ jsxDEV2("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "ScalarTypeEnum.NonEmptyString()"
+                      }, undefined, false, undefined, this),
+                      " ",
+                      "- Non-empty text"
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: [
+                      "•",
+                      " ",
+                      /* @__PURE__ */ jsxDEV2("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "ScalarTypeEnum.PositiveNumber()"
+                      }, undefined, false, undefined, this),
+                      " ",
+                      "- Positive numbers"
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: [
+                      "•",
+                      " ",
+                      /* @__PURE__ */ jsxDEV2("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "ScalarTypeEnum.DateTime()"
+                      }, undefined, false, undefined, this),
+                      " ",
+                      "- ISO 8601 timestamps"
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: [
+                      "•",
+                      " ",
+                      /* @__PURE__ */ jsxDEV2("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "ScalarTypeEnum.Email()"
+                      }, undefined, false, undefined, this),
+                      " ",
+                      "- Valid email addresses"
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("li", {
+                    children: [
+                      "•",
+                      " ",
+                      /* @__PURE__ */ jsxDEV2("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "defineEnum(...)"
+                      }, undefined, false, undefined, this),
+                      " ",
+                      "- Type-safe enums"
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "flex items-center gap-4 pt-4",
+            children: /* @__PURE__ */ jsxDEV2(Link2, {
+              href: "/docs/specs/dataviews",
+              className: "btn-primary",
+              children: [
+                "Next: DataViews ",
+                /* @__PURE__ */ jsxDEV2(ChevronRight2, {
+                  size: 16
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/specs/SpecsDataViewsPage.tsx
+import Link3 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight3 } from "lucide-react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function SpecsDataViewsPage() {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h1", {
+            className: "text-4xl font-bold",
+            children: "DataViews"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground",
+            children: [
+              "A ",
+              /* @__PURE__ */ jsxDEV3("strong", {
+                children: "DataViewSpec"
+              }, undefined, false, undefined, this),
+              " 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."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "Core concepts"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV3("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Data sources"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("p", {
+                    className: "text-muted-foreground",
+                    children: "A DataView connects to one or more data sources—databases, APIs, or other capabilities. You specify the source and the fields you want to expose."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Filtering"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("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").`
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Sorting"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("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."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Pagination"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("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."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Aggregations"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("p", {
+                    className: "text-muted-foreground",
+                    children: "Compute aggregates like counts, sums, averages, and group-by operations. These are useful for dashboards and summary views."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "Example DataViewSpec"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground",
+            children: "Here's a DataView for listing orders in TypeScript:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV3("pre", {
+              children: `import { defineDataView } from '@contractspec/lib.contracts';
+import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
+
+export const OrderList = defineDataView({
+  meta: {
+    key: 'order.list',
+    version: '1.0.0',
+    description: 'List of recent orders',
+  },
+  source: {
+    type: 'database',
+    table: 'orders',
+  },
+  fields: [
+    { name: 'orderId', type: 'uuid', sortable: true },
+    { name: 'customerName', type: 'string', searchable: true },
+    { name: 'total', type: 'number', sortable: true },
+    { 
+      name: 'status', 
+      type: 'enum', 
+      values: ['pending', 'processing', 'shipped'],
+      filterable: true 
+    },
+    { 
+      name: 'createdAt', 
+      type: 'timestamp', 
+      sortable: true, 
+      defaultSort: 'desc' 
+    },
+  ],
+  filters: [
+    { name: 'status', field: 'status', operator: 'in' },
+    { name: 'dateRange', field: 'createdAt', operator: 'between' },
+    { name: 'minTotal', field: 'total', operator: 'gte' },
+  ],
+  pagination: {
+    type: 'cursor',
+    defaultPageSize: 50,
+    maxPageSize: 200,
+  },
+});`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "Policy integration"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground",
+            children: [
+              "DataViews automatically enforce",
+              " ",
+              /* @__PURE__ */ jsxDEV3(Link3, {
+                href: "/docs/specs/policy",
+                className: "text-violet-400 hover:text-violet-300",
+                children: "PolicySpecs"
+              }, undefined, false, undefined, this),
+              ". 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."
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("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—no need to write separate queries for different roles."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "Served outputs"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground",
+            children: "From a DataViewSpec, ContractSpec serves:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("strong", {
+                    children: "Database queries"
+                  }, undefined, false, undefined, this),
+                  " – Optimized SQL or NoSQL queries executed at runtime"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("strong", {
+                    children: "API endpoints"
+                  }, undefined, false, undefined, this),
+                  " – RESTful or GraphQL endpoints for fetching data"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("strong", {
+                    children: "UI components"
+                  }, undefined, false, undefined, this),
+                  " – List views, tables, cards, and detail views"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("strong", {
+                    children: "Search interfaces"
+                  }, undefined, false, undefined, this),
+                  " – Full-text search with autocomplete"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("strong", {
+                    children: "Export functions"
+                  }, undefined, false, undefined, this),
+                  " – CSV, JSON, or Excel exports"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Only expose fields that users actually need—this improves performance and security."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Use appropriate indexes for sortable and filterable fields."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Set reasonable pagination limits to prevent performance issues."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Use aggregations sparingly—they can be expensive on large datasets."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Test DataViews with realistic data volumes to ensure they perform well."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3(Link3, {
+            href: "/docs/specs/capabilities",
+            className: "btn-ghost",
+            children: "Previous: Capabilities"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(Link3, {
+            href: "/docs/specs/workflows",
+            className: "btn-primary",
+            children: [
+              "Next: Workflows ",
+              /* @__PURE__ */ jsxDEV3(ChevronRight3, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/specs/SpecsWorkflowsPage.tsx
+import Link4 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight4 } from "lucide-react";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function SpecsWorkflowsPage() {
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h1", {
+            className: "text-4xl font-bold",
+            children: "Workflows"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground",
+            children: [
+              "A ",
+              /* @__PURE__ */ jsxDEV4("strong", {
+                children: "WorkflowSpec"
+              }, undefined, false, undefined, this),
+              " orchestrates multi-step processes. It defines the sequence of operations, handles failures with retries and compensation, and provides observability into long-running tasks."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-2xl font-bold",
+            children: "Core concepts"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Identifiers"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("p", {
+                    className: "text-muted-foreground",
+                    children: [
+                      "Each workflow has a unique",
+                      " ",
+                      /* @__PURE__ */ jsxDEV4("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "workflowId"
+                      }, undefined, false, undefined, this),
+                      " ",
+                      "and a",
+                      " ",
+                      /* @__PURE__ */ jsxDEV4("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "version"
+                      }, undefined, false, undefined, this),
+                      ". This allows you to run multiple versions of the same workflow simultaneously during migrations or A/B tests."
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Steps"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("p", {
+                    className: "text-muted-foreground",
+                    children: [
+                      "A workflow is composed of ",
+                      /* @__PURE__ */ jsxDEV4("strong", {
+                        children: "steps"
+                      }, undefined, false, undefined, this),
+                      ". Each step invokes a",
+                      " ",
+                      /* @__PURE__ */ jsxDEV4(Link4, {
+                        href: "/docs/specs/capabilities",
+                        className: "text-violet-400 hover:text-violet-300",
+                        children: "CapabilitySpec"
+                      }, undefined, false, undefined, this),
+                      ", passes inputs, and receives outputs. Steps can run sequentially or in parallel."
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Transitions"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("p", {
+                    className: "text-muted-foreground",
+                    children: [
+                      /* @__PURE__ */ jsxDEV4("strong", {
+                        children: "Transitions"
+                      }, undefined, false, undefined, this),
+                      ' 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.'
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Retries"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("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."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Compensation"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("p", {
+                    className: "text-muted-foreground",
+                    children: [
+                      "When a workflow fails partway through,",
+                      " ",
+                      /* @__PURE__ */ jsxDEV4("strong", {
+                        children: "compensation"
+                      }, undefined, false, undefined, this),
+                      " steps undo the effects of completed steps (e.g., refunding a payment, releasing a reservation). This ensures consistency even in failure scenarios."
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("h3", {
+                    className: "text-lg font-semibold",
+                    children: "SLAs"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("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."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-2xl font-bold",
+            children: "Example WorkflowSpec (TypeScript)"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground",
+            children: "Here's a simplified example of a payment workflow in TypeScript:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV4("pre", {
+              children: `import { defineWorkflow } from '@contractspec/lib.contracts';
+import { ValidatePaymentMethod, ChargePayment, SendEmail } from './specs';
+
+export const PaymentFlow = defineWorkflow({
+  meta: {
+    key: 'payment.flow',
+    version: '1.0.0',
+    description: 'End-to-end payment processing',
+    owners: ['team-payments'],
+    tags: ['payments'],
+    stability: 'stable',
+  },
+  steps: [
+    {
+      id: 'validate-payment',
+      operation: ValidatePaymentMethod,
+      inputs: (ctx, input) => ({
+        userId: ctx.userId,
+        paymentMethodId: input.paymentMethodId,
+      }),
+      retry: {
+        maxAttempts: 3,
+        backoff: 'exponential',
+      },
+      onSuccess: 'charge-payment',
+      onFailure: 'notify-user',
+    },
+    {
+      id: 'charge-payment',
+      operation: ChargePayment,
+      inputs: (ctx, input, steps) => ({
+        amount: input.amount,
+        paymentMethodId: input.paymentMethodId,
+      }),
+      compensation: 'refund-payment',
+      onSuccess: 'send-receipt',
+      onFailure: 'notify-admin',
+    },
+    {
+      id: 'send-receipt',
+      operation: SendEmail,
+      inputs: (ctx, input, steps) => ({
+        to: ctx.userEmail,
+        template: 'payment-receipt',
+        data: steps['charge-payment'].output,
+      }),
+    },
+  ],
+  sla: {
+    maxDuration: 30000, // milliseconds
+    alertOnBreach: true,
+  },
+});`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-2xl font-bold",
+            children: "Triggers"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground",
+            children: "Workflows can be triggered in several ways:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("strong", {
+                    children: "Manual invocation"
+                  }, undefined, false, undefined, this),
+                  " – A user or system calls the workflow via an API endpoint."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("strong", {
+                    children: "Event-driven"
+                  }, undefined, false, undefined, this),
+                  " – The workflow starts automatically when a specific event occurs (e.g., a new order is created)."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("strong", {
+                    children: "Scheduled"
+                  }, undefined, false, undefined, this),
+                  " – The workflow runs on a cron schedule (e.g., nightly batch processing)."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("strong", {
+                    children: "Chained"
+                  }, undefined, false, undefined, this),
+                  " – One workflow can invoke another as a step."
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-2xl font-bold",
+            children: "Monitoring and versioning"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground",
+            children: "ContractSpec automatically instruments workflows with telemetry. You can view:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Real-time execution status for each step"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Historical run data and success/failure rates"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Latency distributions and SLA compliance"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Compensation events and retry attempts"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4("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."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Keep steps idempotent – they should be safe to retry without side effects."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Define compensation for any step that modifies external state."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Use meaningful step IDs that describe the operation."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Set realistic SLAs and monitor them in production."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Test failure scenarios locally before deploying."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4(Link4, {
+            href: "/docs/specs/capabilities",
+            className: "btn-ghost",
+            children: "Previous: Capabilities"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4(Link4, {
+            href: "/docs/safety",
+            className: "btn-primary",
+            children: [
+              "Next: Safety Features ",
+              /* @__PURE__ */ jsxDEV4(ChevronRight4, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/specs/SpecsPolicyPage.tsx
+import Link5 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight5 } from "lucide-react";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function SpecsPolicyPage() {
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h1", {
+            className: "text-4xl font-bold",
+            children: "Policy"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: [
+              "A ",
+              /* @__PURE__ */ jsxDEV5("strong", {
+                children: "PolicySpec"
+              }, undefined, false, undefined, this),
+              " defines who can do what, when, and under what conditions. ContractSpec uses attribute-based access control (ABAC) to enforce policies across your entire application—from API endpoints to UI components."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Why policies matter"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "Traditional access control relies on roles (RBAC), which can become unwieldy as applications grow. ABAC is more flexible—it evaluates policies based on attributes of the user, resource, action, and context."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("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—the",
+              " ",
+              /* @__PURE__ */ jsxDEV5(Link5, {
+                href: "/docs/safety/pdp",
+                className: "text-violet-400 hover:text-violet-300",
+                children: "Policy Decision Point"
+              }, undefined, false, undefined, this),
+              " ",
+              "enforces policies automatically."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Policy structure"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "A PolicySpec contains one or more rules. Each rule has:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Effect"
+                  }, undefined, false, undefined, this),
+                  " – PERMIT, DENY, or REDACT"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Condition"
+                  }, undefined, false, undefined, this),
+                  " – A boolean expression that determines when the rule applies"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Scope"
+                  }, undefined, false, undefined, this),
+                  " – Which resources, actions, or fields the rule applies to"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Priority"
+                  }, undefined, false, undefined, this),
+                  " – Rules are evaluated in priority order; the first matching rule wins"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Example PolicySpec"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "Here's a policy that controls access to customer data in TypeScript:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV5("pre", {
+              children: `import { definePolicy } from '@contractspec/lib.contracts';
+
+export const CustomerDataAccess = definePolicy({
+  meta: {
+    key: 'customer.data.access',
+    version: '1.0.0',
+  },
+  rules: [
+    {
+      id: 'admin-full-access',
+      priority: 100,
+      effect: 'PERMIT',
+      condition: (ctx) => ctx.user.role === 'admin',
+      scope: {
+        resources: ['customer'],
+        actions: ['read', 'write', 'delete'],
+      },
+    },
+    {
+      id: 'sales-read-assigned',
+      priority: 200,
+      effect: 'PERMIT',
+      condition: (ctx) => 
+        ctx.user.role === 'sales' && 
+        ctx.resource.assignedTo === ctx.user.id,
+      scope: {
+        resources: ['customer'],
+        actions: ['read', 'write'],
+      },
+    },
+    {
+      id: 'support-read-redacted',
+      priority: 300,
+      effect: 'REDACT',
+      condition: (ctx) => ctx.user.role === 'support',
+      scope: {
+        resources: ['customer'],
+        actions: ['read'],
+      },
+      redactFields: ['creditCard', 'ssn', 'bankAccount'],
+    },
+  ],
+});`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Attributes"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "Policy conditions can reference attributes from four categories:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV5("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("h3", {
+                    className: "text-lg font-semibold",
+                    children: "User attributes"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("p", {
+                    className: "text-muted-foreground",
+                    children: [
+                      /* @__PURE__ */ jsxDEV5("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "user.id"
+                      }, undefined, false, undefined, this),
+                      ",",
+                      " ",
+                      /* @__PURE__ */ jsxDEV5("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "user.role"
+                      }, undefined, false, undefined, this),
+                      ",",
+                      " ",
+                      /* @__PURE__ */ jsxDEV5("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "user.groups"
+                      }, undefined, false, undefined, this),
+                      ",",
+                      " ",
+                      /* @__PURE__ */ jsxDEV5("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "user.department"
+                      }, undefined, false, undefined, this),
+                      ", custom attributes"
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Resource attributes"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("p", {
+                    className: "text-muted-foreground",
+                    children: [
+                      /* @__PURE__ */ jsxDEV5("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "resource.type"
+                      }, undefined, false, undefined, this),
+                      ",",
+                      " ",
+                      /* @__PURE__ */ jsxDEV5("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "resource.owner"
+                      }, undefined, false, undefined, this),
+                      ",",
+                      " ",
+                      /* @__PURE__ */ jsxDEV5("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "resource.sensitivity"
+                      }, undefined, false, undefined, this),
+                      ", custom attributes"
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Action attributes"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("p", {
+                    className: "text-muted-foreground",
+                    children: [
+                      /* @__PURE__ */ jsxDEV5("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "action"
+                      }, undefined, false, undefined, this),
+                      " ",
+                      "(read, write, delete, execute, export, etc.)"
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Context attributes"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("p", {
+                    className: "text-muted-foreground",
+                    children: [
+                      /* @__PURE__ */ jsxDEV5("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "time.hour"
+                      }, undefined, false, undefined, this),
+                      ",",
+                      " ",
+                      /* @__PURE__ */ jsxDEV5("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "time.dayOfWeek"
+                      }, undefined, false, undefined, this),
+                      ",",
+                      " ",
+                      /* @__PURE__ */ jsxDEV5("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "request.ipAddress"
+                      }, undefined, false, undefined, this),
+                      ",",
+                      " ",
+                      /* @__PURE__ */ jsxDEV5("code", {
+                        className: "bg-background/50 rounded px-2 py-1",
+                        children: "request.userAgent"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Data classification"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: [
+              "You can tag fields with sensitivity levels in your",
+              " ",
+              /* @__PURE__ */ jsxDEV5(Link5, {
+                href: "/docs/specs/capabilities",
+                className: "text-violet-400 hover:text-violet-300",
+                children: "CapabilitySpecs"
+              }, undefined, false, undefined, this),
+              " ",
+              "and",
+              " ",
+              /* @__PURE__ */ jsxDEV5(Link5, {
+                href: "/docs/specs/dataviews",
+                className: "text-violet-400 hover:text-violet-300",
+                children: "DataViewSpecs"
+              }, undefined, false, undefined, this),
+              ":"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV5("pre", {
+              children: `fields:
+  - name: email
+    type: string
+    sensitivity: PII
+  - name: creditCard
+    type: string
+    sensitivity: PII
+    encrypted: true
+  - name: diagnosis
+    type: string
+    sensitivity: PHI
+  - name: salary
+    type: number
+    sensitivity: confidential`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("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."'
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Testing policies"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "ContractSpec provides tools for testing policies before deployment:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Policy simulator"
+                  }, undefined, false, undefined, this),
+                  " – Test how policies evaluate for different users and scenarios"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Coverage analysis"
+                  }, undefined, false, undefined, this),
+                  " – Identify resources or actions that aren't covered by any policy"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Conflict detection"
+                  }, undefined, false, undefined, this),
+                  " – Find rules that might conflict or produce unexpected results"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Audit mode"
+                  }, undefined, false, undefined, this),
+                  " – Run policies in audit-only mode to see what would be blocked without actually blocking it"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: "Start with a deny-by-default policy—explicitly permit what should be allowed."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: "Use clear, descriptive rule IDs that explain what the rule does."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: "Set priorities carefully to ensure rules are evaluated in the right order."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: "Test policies thoroughly with realistic user scenarios before deploying."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  "Monitor policy decisions in production using",
+                  " ",
+                  /* @__PURE__ */ jsxDEV5(Link5, {
+                    href: "/docs/safety/auditing",
+                    className: "text-violet-400 hover:text-violet-300",
+                    children: "audit logs"
+                  }, undefined, false, undefined, this),
+                  "."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: "Review and update policies regularly as your application and requirements evolve."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5(Link5, {
+            href: "/docs/specs/workflows",
+            className: "btn-ghost",
+            children: "Previous: Workflows"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(Link5, {
+            href: "/docs/specs/overlays",
+            className: "btn-primary",
+            children: [
+              "Next: Overlays ",
+              /* @__PURE__ */ jsxDEV5(ChevronRight5, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/specs/SpecsOverlaysPage.tsx
+import Link6 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight6 } from "lucide-react";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function SpecsOverlaysPage() {
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h1", {
+            className: "text-4xl font-bold",
+            children: "Overlays"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            className: "text-muted-foreground",
+            children: [
+              "An ",
+              /* @__PURE__ */ jsxDEV6("strong", {
+                children: "OverlaySpec"
+              }, undefined, false, undefined, this),
+              " 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."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "Why overlays matter"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("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."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("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."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "What overlays can do"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Hide or show fields"
+                  }, undefined, false, undefined, this),
+                  " – Remove fields from forms or detail views (but only if the user has permission to see them in the first place)"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Reorder fields"
+                  }, undefined, false, undefined, this),
+                  " – Change the order in which fields appear"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Rename labels"
+                  }, undefined, false, undefined, this),
+                  " – Use different terminology that's more familiar to the user"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Change layouts"
+                  }, undefined, false, undefined, this),
+                  " – Switch between list, grid, or card views"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Add help text"
+                  }, undefined, false, undefined, this),
+                  " – Provide context-specific guidance"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Set default values"
+                  }, undefined, false, undefined, this),
+                  " – Pre-fill forms with tenant-specific defaults"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Apply branding"
+                  }, undefined, false, undefined, this),
+                  " – Customize colors, logos, and styling (within approved themes)"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "Example OverlaySpec"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            className: "text-muted-foreground",
+            children: "Here's an overlay that customizes an order form:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV6("pre", {
+              children: `overlayId: acme-order-form
+version: '1.0.0'.0.0
+appliesTo:
+  capability: createOrder
+  tenantId: acme-corp
+  
+modifications:
+  - type: hideField
+    field: internalNotes
+    reason: "ACME doesn't use internal notes"
+    
+  - type: renameLabel
+    field: customerReference
+    newLabel: "PO Number"
+    
+  - type: reorderFields
+    fields:
+      - customerReference
+      - items
+      - shippingAddress
+      - billingAddress
+      - paymentMethod
+      
+  - type: setDefault
+    field: paymentMethod
+    value: "net30"
+    
+  - type: addHelpText
+    field: customerReference
+    text: "Enter your purchase order number from your procurement system"
+    
+  - type: makeRequired
+    field: customerReference
+    
+signature:
+  algorithm: EdDSA
+  publicKey: "acme-corp-overlay-key"
+  signature: "base64-encoded-signature"`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "Safety guarantees"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            className: "text-muted-foreground",
+            children: "Overlays are powerful, but they must not compromise security or data integrity. ContractSpec enforces several guarantees:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Overlays cannot grant new permissions"
+                  }, undefined, false, undefined, this),
+                  " – They can only hide or rearrange what the user is already allowed to see"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Overlays cannot bypass validation"
+                  }, undefined, false, undefined, this),
+                  " – Field types, constraints, and business rules from the underlying spec still apply"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Overlays must be signed"
+                  }, undefined, false, undefined, this),
+                  " – Only authorized parties (typically tenant admins) can create overlays"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Overlays are versioned"
+                  }, undefined, false, undefined, this),
+                  " – Changes to overlays are tracked and can be rolled back"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Overlays are audited"
+                  }, undefined, false, undefined, this),
+                  " – Every overlay application is logged"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "Creating overlays"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            className: "text-muted-foreground",
+            children: "Overlays can be created through:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Visual editor"
+                  }, undefined, false, undefined, this),
+                  " – A drag-and-drop interface for non-technical users"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "TypeScript/JSON"
+                  }, undefined, false, undefined, this),
+                  " – For developers who prefer code"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "API"
+                  }, undefined, false, undefined, this),
+                  " – Programmatically create overlays for automation"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV6("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."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            className: "text-muted-foreground",
+            children: [
+              "See",
+              " ",
+              /* @__PURE__ */ jsxDEV6(Link6, {
+                href: "/docs/libraries/overlay-engine",
+                className: "text-violet-400 underline",
+                children: "Overlay Engine docs"
+              }, undefined, false, undefined, this),
+              " ",
+              "and the",
+              " ",
+              /* @__PURE__ */ jsxDEV6(Link6, {
+                href: "/docs/advanced/overlay-editor",
+                className: "text-violet-400 underline",
+                children: "Overlay Editor guide"
+              }, undefined, false, undefined, this),
+              " ",
+              "for end-to-end workflows."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "Overlay scope"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            className: "text-muted-foreground",
+            children: "Overlays can be scoped to:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Tenant"
+                  }, undefined, false, undefined, this),
+                  " – All users in a tenant see the same overlay"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "User"
+                  }, undefined, false, undefined, this),
+                  " – Individual users can have personal overlays"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Role"
+                  }, undefined, false, undefined, this),
+                  " – All users with a specific role see the overlay"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV6("strong", {
+                    children: "Device"
+                  }, undefined, false, undefined, this),
+                  " – Different overlays for mobile vs desktop"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV6("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)."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Start with the default UI and only create overlays when users request specific changes."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Document why each overlay modification was made—this helps when reviewing or updating overlays."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Test overlays thoroughly to ensure they don't break workflows or confuse users."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Use tenant-level overlays for organizational customizations and user-level overlays for personal preferences."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Regularly review overlays to remove ones that are no longer needed."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Protect overlay signing keys carefully—they control what customizations are allowed."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6(Link6, {
+            href: "/docs/specs/policy",
+            className: "btn-ghost",
+            children: "Previous: Policy"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6(Link6, {
+            href: "/docs/safety",
+            className: "btn-primary",
+            children: [
+              "Next: Safety ",
+              /* @__PURE__ */ jsxDEV6(ChevronRight6, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  SpecsWorkflowsPage,
+  SpecsPolicyPage,
+  SpecsOverviewPage,
+  SpecsOverlaysPage,
+  SpecsDataViewsPage,
+  SpecsCapabilitiesPage
+};