@contractspec/bundle.library 1.12.0 → 1.13.0

package/dist/components/docs/guides/GuideContractTypesPage.js

@@ -1,104 +1,141 @@
-import { StudioPrompt } from "../shared/StudioPrompt.js";
-import { ChevronRight, Globe, Layers, Shield, Zap } from "lucide-react";
-import { CodeBlock } from "@contractspec/lib.design-system";
-import { jsx, jsxs } from "react/jsx-runtime";
+// @bun
+// src/components/docs/shared/StudioPrompt.tsx
 import Link from "@contractspec/lib.ui-link";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function StudioPrompt({
+  title = "Need managed policy gates and approvals?",
+  body = "ContractSpec Studio adds policy gates, remote registry workflows, and audit trails when you are ready to scale adoption.",
+  ctaLabel = "Join Studio waitlist",
+  href = "/contact#waitlist"
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "card-subtle space-y-3 p-6",
+    children: [
+      /* @__PURE__ */ jsxDEV("h3", {
+        className: "text-lg font-semibold",
+        children: title
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("p", {
+        className: "text-muted-foreground text-sm",
+        children: body
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Link, {
+        href,
+        className: "btn-primary",
+        children: ctaLabel
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
 
-//#region src/components/docs/guides/GuideContractTypesPage.tsx
-const contractTypes = [
-	{
-		name: "Operations",
-		factory: "defineCommand / defineQuery",
-		description: "API endpoints with input/output schemas, validation, and policy.",
-		icon: Zap,
-		color: "text-blue-400"
-	},
-	{
-		name: "Events",
-		factory: "defineEvent",
-		description: "Domain events with typed payloads and PII handling.",
-		icon: Layers,
-		color: "text-green-400"
-	},
-	{
-		name: "Capabilities",
-		factory: "defineCapability",
-		description: "Feature groupings that link operations, events, and UIs.",
-		icon: Shield,
-		color: "text-purple-400"
-	},
-	{
-		name: "Presentations",
-		factory: "definePresentation",
-		description: "UI specifications for rendering data and handling interactions.",
-		icon: Globe,
-		color: "text-orange-400"
-	}
+// src/components/docs/guides/GuideContractTypesPage.tsx
+import { CodeBlock } from "@contractspec/lib.design-system";
+import Link2 from "@contractspec/lib.ui-link";
+import { ChevronRight, Layers, Zap, Shield, Globe } from "lucide-react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var contractTypes = [
+  {
+    name: "Operations",
+    factory: "defineCommand / defineQuery",
+    description: "API endpoints with input/output schemas, validation, and policy.",
+    icon: Zap,
+    color: "text-blue-400"
+  },
+  {
+    name: "Events",
+    factory: "defineEvent",
+    description: "Domain events with typed payloads and PII handling.",
+    icon: Layers,
+    color: "text-green-400"
+  },
+  {
+    name: "Capabilities",
+    factory: "defineCapability",
+    description: "Feature groupings that link operations, events, and UIs.",
+    icon: Shield,
+    color: "text-purple-400"
+  },
+  {
+    name: "Presentations",
+    factory: "definePresentation",
+    description: "UI specifications for rendering data and handling interactions.",
+    icon: Globe,
+    color: "text-orange-400"
+  }
 ];
 function GuideContractTypesPage() {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-8",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "space-y-3",
-				children: [/* @__PURE__ */ jsx("h1", {
-					className: "text-4xl font-bold",
-					children: "Contract Types Overview"
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground text-lg",
-					children: "Learn about the different contract types in ContractSpec and when to use each one for spec-first development."
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "card-subtle space-y-4 p-6",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-2xl font-bold",
-					children: "Core Contract Types"
-				}), /* @__PURE__ */ jsx("div", {
-					className: "grid gap-3 md:grid-cols-2",
-					children: contractTypes.map((type) => /* @__PURE__ */ jsxs("div", {
-						className: "flex items-start gap-3 rounded-lg border border-white/10 p-4",
-						children: [/* @__PURE__ */ jsx(type.icon, {
-							className: type.color,
-							size: 20
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "space-y-1",
-							children: [
-								/* @__PURE__ */ jsx("h3", {
-									className: "font-semibold",
-									children: type.name
-								}),
-								/* @__PURE__ */ jsx("p", {
-									className: "text-muted-foreground text-xs",
-									children: type.description
-								}),
-								/* @__PURE__ */ jsx("code", {
-									className: "text-xs text-violet-400",
-									children: type.factory
-								})
-							]
-						})]
-					}, type.name))
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "space-y-6",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "space-y-3",
-						children: [
-							/* @__PURE__ */ jsx("h2", {
-								className: "text-2xl font-bold",
-								children: "1) Operations (Commands & Queries)"
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "text-muted-foreground text-sm",
-								children: "Operations are the backbone of your API. Commands mutate state, queries read state. Both have typed input/output schemas."
-							}),
-							/* @__PURE__ */ jsx(CodeBlock, {
-								language: "typescript",
-								filename: "src/contracts/user.operation.ts",
-								code: `import { defineCommand, defineQuery } from "@contractspec/lib.contracts";
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h1", {
+            className: "text-4xl font-bold",
+            children: "Contract Types Overview"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground text-lg",
+            children: "Learn about the different contract types in ContractSpec and when to use each one for spec-first development."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "card-subtle space-y-4 p-6",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-2xl font-bold",
+            children: "Core Contract Types"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "grid gap-3 md:grid-cols-2",
+            children: contractTypes.map((type) => /* @__PURE__ */ jsxDEV2("div", {
+              className: "flex items-start gap-3 rounded-lg border border-white/10 p-4",
+              children: [
+                /* @__PURE__ */ jsxDEV2(type.icon, {
+                  className: type.color,
+                  size: 20
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV2("div", {
+                  className: "space-y-1",
+                  children: [
+                    /* @__PURE__ */ jsxDEV2("h3", {
+                      className: "font-semibold",
+                      children: type.name
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV2("p", {
+                      className: "text-muted-foreground text-xs",
+                      children: type.description
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV2("code", {
+                      className: "text-xs text-violet-400",
+                      children: type.factory
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, type.name, true, undefined, this))
+          }, 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: "1) Operations (Commands & Queries)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Operations are the backbone of your API. Commands mutate state, queries read state. Both have typed input/output schemas."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2(CodeBlock, {
+                language: "typescript",
+                filename: "src/contracts/user.operation.ts",
+                code: `import { defineCommand, defineQuery } from "@contractspec/lib.contracts";
 import { SchemaModel, ScalarTypeEnum } from "@contractspec/lib.schema";
 
 // Command: Mutates state (creates a user)
@@ -165,24 +202,24 @@ export const GetUserQuery = defineQuery({
   },
   policy: { auth: "user" },
 });`
-							})
-						]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "space-y-3",
-						children: [
-							/* @__PURE__ */ jsx("h2", {
-								className: "text-2xl font-bold",
-								children: "2) Events"
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "text-muted-foreground text-sm",
-								children: "Events represent domain occurrences. They have typed payloads with PII field marking for compliance."
-							}),
-							/* @__PURE__ */ jsx(CodeBlock, {
-								language: "typescript",
-								filename: "src/contracts/user.event.ts",
-								code: `import { defineEvent } from "@contractspec/lib.contracts";
+              }, 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: "2) Events"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Events represent domain occurrences. They have typed payloads with PII field marking for compliance."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2(CodeBlock, {
+                language: "typescript",
+                filename: "src/contracts/user.event.ts",
+                code: `import { defineEvent } from "@contractspec/lib.contracts";
 import { SchemaModel, ScalarTypeEnum } from "@contractspec/lib.schema";
 
 export const UserCreatedEvent = defineEvent({
@@ -224,24 +261,24 @@ export const UserDeletedEvent = defineEvent({
     },
   }),
 });`
-							})
-						]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "space-y-3",
-						children: [
-							/* @__PURE__ */ jsx("h2", {
-								className: "text-2xl font-bold",
-								children: "3) Capabilities"
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "text-muted-foreground text-sm",
-								children: "Capabilities group related operations, events, and presentations. They define feature boundaries and dependencies."
-							}),
-							/* @__PURE__ */ jsx(CodeBlock, {
-								language: "typescript",
-								filename: "src/contracts/user-management.capability.ts",
-								code: `import { defineCapability } from "@contractspec/lib.contracts";
+              }, 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: "3) Capabilities"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Capabilities group related operations, events, and presentations. They define feature boundaries and dependencies."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2(CodeBlock, {
+                language: "typescript",
+                filename: "src/contracts/user-management.capability.ts",
+                code: `import { defineCapability } from "@contractspec/lib.contracts";
 
 export const UserManagementCapability = defineCapability({
   meta: {
@@ -285,24 +322,24 @@ export const AdminUserCapability = defineCapability({
     { surface: "operation", key: "user.impersonate", version: "1.0.0" },
   ],
 });`
-							})
-						]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "space-y-3",
-						children: [
-							/* @__PURE__ */ jsx("h2", {
-								className: "text-2xl font-bold",
-								children: "4) Presentations"
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "text-muted-foreground text-sm",
-								children: "Presentations define UI specifications. They link to capabilities and specify how data should be displayed."
-							}),
-							/* @__PURE__ */ jsx(CodeBlock, {
-								language: "typescript",
-								filename: "src/contracts/user-list.presentation.ts",
-								code: `import { definePresentation } from "@contractspec/lib.contracts";
+              }, 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: "4) Presentations"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Presentations define UI specifications. They link to capabilities and specify how data should be displayed."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2(CodeBlock, {
+                language: "typescript",
+                filename: "src/contracts/user-list.presentation.ts",
+                code: `import { definePresentation } from "@contractspec/lib.contracts";
 
 export const UserListPresentation = definePresentation({
   meta: {
@@ -325,178 +362,178 @@ export const UserListPresentation = definePresentation({
     search: { fields: ["name", "email"] },
   },
 });`
-							})
-						]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "space-y-3",
-						children: [
-							/* @__PURE__ */ jsx("h2", {
-								className: "text-2xl font-bold",
-								children: "5) Additional Contract Types"
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "text-muted-foreground text-sm",
-								children: "ContractSpec provides specialized contracts for different concerns:"
-							}),
-							/* @__PURE__ */ jsxs("div", {
-								className: "grid gap-4 md:grid-cols-2",
-								children: [
-									/* @__PURE__ */ jsxs("div", {
-										className: "card-subtle space-y-2 p-4",
-										children: [
-											/* @__PURE__ */ jsx("h3", {
-												className: "font-semibold",
-												children: "Policy"
-											}),
-											/* @__PURE__ */ jsx("code", {
-												className: "text-xs text-violet-400",
-												children: "definePolicy"
-											}),
-											/* @__PURE__ */ jsx("p", {
-												className: "text-muted-foreground text-xs",
-												children: "RBAC/ABAC rules, rate limits, and access control."
-											})
-										]
-									}),
-									/* @__PURE__ */ jsxs("div", {
-										className: "card-subtle space-y-2 p-4",
-										children: [
-											/* @__PURE__ */ jsx("h3", {
-												className: "font-semibold",
-												children: "Workflow"
-											}),
-											/* @__PURE__ */ jsx("code", {
-												className: "text-xs text-violet-400",
-												children: "defineWorkflow"
-											}),
-											/* @__PURE__ */ jsx("p", {
-												className: "text-muted-foreground text-xs",
-												children: "Multi-step processes with states, transitions, and SLAs."
-											})
-										]
-									}),
-									/* @__PURE__ */ jsxs("div", {
-										className: "card-subtle space-y-2 p-4",
-										children: [
-											/* @__PURE__ */ jsx("h3", {
-												className: "font-semibold",
-												children: "Translation"
-											}),
-											/* @__PURE__ */ jsx("code", {
-												className: "text-xs text-violet-400",
-												children: "defineTranslation"
-											}),
-											/* @__PURE__ */ jsx("p", {
-												className: "text-muted-foreground text-xs",
-												children: "i18n messages with ICU format and locale fallbacks."
-											})
-										]
-									}),
-									/* @__PURE__ */ jsxs("div", {
-										className: "card-subtle space-y-2 p-4",
-										children: [
-											/* @__PURE__ */ jsx("h3", {
-												className: "font-semibold",
-												children: "Integration"
-											}),
-											/* @__PURE__ */ jsx("code", {
-												className: "text-xs text-violet-400",
-												children: "defineIntegration"
-											}),
-											/* @__PURE__ */ jsx("p", {
-												className: "text-muted-foreground text-xs",
-												children: "External service connections and API adapters."
-											})
-										]
-									}),
-									/* @__PURE__ */ jsxs("div", {
-										className: "card-subtle space-y-2 p-4",
-										children: [
-											/* @__PURE__ */ jsx("h3", {
-												className: "font-semibold",
-												children: "Form"
-											}),
-											/* @__PURE__ */ jsx("code", {
-												className: "text-xs text-violet-400",
-												children: "defineFormSpec"
-											}),
-											/* @__PURE__ */ jsx("p", {
-												className: "text-muted-foreground text-xs",
-												children: "Form definitions with fields, validation, and layouts."
-											})
-										]
-									}),
-									/* @__PURE__ */ jsxs("div", {
-										className: "card-subtle space-y-2 p-4",
-										children: [
-											/* @__PURE__ */ jsx("h3", {
-												className: "font-semibold",
-												children: "Data View"
-											}),
-											/* @__PURE__ */ jsx("code", {
-												className: "text-xs text-violet-400",
-												children: "defineDataView"
-											}),
-											/* @__PURE__ */ jsx("p", {
-												className: "text-muted-foreground text-xs",
-												children: "Read-only data projections and aggregations."
-											})
-										]
-									}),
-									/* @__PURE__ */ jsxs("div", {
-										className: "card-subtle space-y-2 p-4",
-										children: [
-											/* @__PURE__ */ jsx("h3", {
-												className: "font-semibold",
-												children: "Feature"
-											}),
-											/* @__PURE__ */ jsx("code", {
-												className: "text-xs text-violet-400",
-												children: "defineFeature"
-											}),
-											/* @__PURE__ */ jsx("p", {
-												className: "text-muted-foreground text-xs",
-												children: "Feature flags and progressive rollout configurations."
-											})
-										]
-									}),
-									/* @__PURE__ */ jsxs("div", {
-										className: "card-subtle space-y-2 p-4",
-										children: [
-											/* @__PURE__ */ jsx("h3", {
-												className: "font-semibold",
-												children: "Test"
-											}),
-											/* @__PURE__ */ jsx("code", {
-												className: "text-xs text-violet-400",
-												children: "defineTestSpec"
-											}),
-											/* @__PURE__ */ jsx("p", {
-												className: "text-muted-foreground text-xs",
-												children: "Contract-driven test scenarios and fixtures."
-											})
-										]
-									})
-								]
-							})
-						]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "space-y-3",
-						children: [
-							/* @__PURE__ */ jsx("h2", {
-								className: "text-2xl font-bold",
-								children: "6) Registering Contracts"
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "text-muted-foreground text-sm",
-								children: "Each contract type has a registry for lookup and validation."
-							}),
-							/* @__PURE__ */ jsx(CodeBlock, {
-								language: "typescript",
-								filename: "src/contracts/registry.ts",
-								code: `import {
+              }, 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: "5) Additional Contract Types"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground text-sm",
+                children: "ContractSpec provides specialized contracts for different concerns:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "grid gap-4 md:grid-cols-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "card-subtle space-y-2 p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("h3", {
+                        className: "font-semibold",
+                        children: "Policy"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("code", {
+                        className: "text-xs text-violet-400",
+                        children: "definePolicy"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("p", {
+                        className: "text-muted-foreground text-xs",
+                        children: "RBAC/ABAC rules, rate limits, and access control."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "card-subtle space-y-2 p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("h3", {
+                        className: "font-semibold",
+                        children: "Workflow"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("code", {
+                        className: "text-xs text-violet-400",
+                        children: "defineWorkflow"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("p", {
+                        className: "text-muted-foreground text-xs",
+                        children: "Multi-step processes with states, transitions, and SLAs."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "card-subtle space-y-2 p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("h3", {
+                        className: "font-semibold",
+                        children: "Translation"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("code", {
+                        className: "text-xs text-violet-400",
+                        children: "defineTranslation"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("p", {
+                        className: "text-muted-foreground text-xs",
+                        children: "i18n messages with ICU format and locale fallbacks."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "card-subtle space-y-2 p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("h3", {
+                        className: "font-semibold",
+                        children: "Integration"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("code", {
+                        className: "text-xs text-violet-400",
+                        children: "defineIntegration"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("p", {
+                        className: "text-muted-foreground text-xs",
+                        children: "External service connections and API adapters."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "card-subtle space-y-2 p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("h3", {
+                        className: "font-semibold",
+                        children: "Form"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("code", {
+                        className: "text-xs text-violet-400",
+                        children: "defineFormSpec"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("p", {
+                        className: "text-muted-foreground text-xs",
+                        children: "Form definitions with fields, validation, and layouts."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "card-subtle space-y-2 p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("h3", {
+                        className: "font-semibold",
+                        children: "Data View"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("code", {
+                        className: "text-xs text-violet-400",
+                        children: "defineDataView"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("p", {
+                        className: "text-muted-foreground text-xs",
+                        children: "Read-only data projections and aggregations."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "card-subtle space-y-2 p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("h3", {
+                        className: "font-semibold",
+                        children: "Feature"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("code", {
+                        className: "text-xs text-violet-400",
+                        children: "defineFeature"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("p", {
+                        className: "text-muted-foreground text-xs",
+                        children: "Feature flags and progressive rollout configurations."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "card-subtle space-y-2 p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("h3", {
+                        className: "font-semibold",
+                        children: "Test"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("code", {
+                        className: "text-xs text-violet-400",
+                        children: "defineTestSpec"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("p", {
+                        className: "text-muted-foreground text-xs",
+                        children: "Contract-driven test scenarios and fixtures."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h2", {
+                className: "text-2xl font-bold",
+                children: "6) Registering Contracts"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Each contract type has a registry for lookup and validation."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2(CodeBlock, {
+                language: "typescript",
+                filename: "src/contracts/registry.ts",
+                code: `import {
   OperationSpecRegistry,
   installOp,
 } from "@contractspec/lib.contracts/operations";
@@ -527,121 +564,176 @@ installOp(operationRegistry, GetUserQuery, async (input) => {
 // Register events and capabilities
 eventRegistry.register(UserCreatedEvent);
 capabilityRegistry.register(UserManagementCapability);`
-							})
-						]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "card-subtle space-y-3 p-6",
-						children: [/* @__PURE__ */ jsx("h3", {
-							className: "text-lg font-semibold",
-							children: "Contract Type Decision Guide"
-						}), /* @__PURE__ */ jsxs("table", {
-							className: "w-full text-sm",
-							children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
-								className: "border-b border-white/10",
-								children: [/* @__PURE__ */ jsx("th", {
-									className: "py-2 text-left",
-									children: "When you need..."
-								}), /* @__PURE__ */ jsx("th", {
-									className: "py-2 text-left",
-									children: "Use this contract"
-								})]
-							}) }), /* @__PURE__ */ jsxs("tbody", {
-								className: "text-muted-foreground",
-								children: [
-									/* @__PURE__ */ jsxs("tr", {
-										className: "border-b border-white/5",
-										children: [/* @__PURE__ */ jsx("td", {
-											className: "py-2",
-											children: "An API endpoint that changes data"
-										}), /* @__PURE__ */ jsx("td", {
-											className: "py-2",
-											children: /* @__PURE__ */ jsx("code", { children: "defineCommand" })
-										})]
-									}),
-									/* @__PURE__ */ jsxs("tr", {
-										className: "border-b border-white/5",
-										children: [/* @__PURE__ */ jsx("td", {
-											className: "py-2",
-											children: "An API endpoint that reads data"
-										}), /* @__PURE__ */ jsx("td", {
-											className: "py-2",
-											children: /* @__PURE__ */ jsx("code", { children: "defineQuery" })
-										})]
-									}),
-									/* @__PURE__ */ jsxs("tr", {
-										className: "border-b border-white/5",
-										children: [/* @__PURE__ */ jsx("td", {
-											className: "py-2",
-											children: "Async notification of something that happened"
-										}), /* @__PURE__ */ jsx("td", {
-											className: "py-2",
-											children: /* @__PURE__ */ jsx("code", { children: "defineEvent" })
-										})]
-									}),
-									/* @__PURE__ */ jsxs("tr", {
-										className: "border-b border-white/5",
-										children: [/* @__PURE__ */ jsx("td", {
-											className: "py-2",
-											children: "Group related specs under a feature"
-										}), /* @__PURE__ */ jsx("td", {
-											className: "py-2",
-											children: /* @__PURE__ */ jsx("code", { children: "defineCapability" })
-										})]
-									}),
-									/* @__PURE__ */ jsxs("tr", {
-										className: "border-b border-white/5",
-										children: [/* @__PURE__ */ jsx("td", {
-											className: "py-2",
-											children: "Define UI rendering specifications"
-										}), /* @__PURE__ */ jsx("td", {
-											className: "py-2",
-											children: /* @__PURE__ */ jsx("code", { children: "definePresentation" })
-										})]
-									}),
-									/* @__PURE__ */ jsxs("tr", {
-										className: "border-b border-white/5",
-										children: [/* @__PURE__ */ jsx("td", {
-											className: "py-2",
-											children: "Access control and rate limiting"
-										}), /* @__PURE__ */ jsx("td", {
-											className: "py-2",
-											children: /* @__PURE__ */ jsx("code", { children: "definePolicy" })
-										})]
-									}),
-									/* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", {
-										className: "py-2",
-										children: "Multi-step business processes"
-									}), /* @__PURE__ */ jsx("td", {
-										className: "py-2",
-										children: /* @__PURE__ */ jsx("code", { children: "defineWorkflow" })
-									})] })
-								]
-							})]
-						})]
-					}),
-					/* @__PURE__ */ jsx(StudioPrompt, {
-						title: "Want visual contract design?",
-						body: "Studio provides a visual editor for creating and managing contracts with team collaboration and version control."
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-4 pt-4",
-				children: [/* @__PURE__ */ jsxs(Link, {
-					href: "/docs/guides/nextjs-one-endpoint",
-					className: "btn-primary",
-					children: ["Next: Add your first endpoint ", /* @__PURE__ */ jsx(ChevronRight, { size: 16 })]
-				}), /* @__PURE__ */ jsx(Link, {
-					href: "/docs/guides",
-					className: "btn-ghost",
-					children: "Back to guides"
-				})]
-			})
-		]
-	});
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "card-subtle space-y-3 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h3", {
+                className: "text-lg font-semibold",
+                children: "Contract Type Decision Guide"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("table", {
+                className: "w-full text-sm",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("thead", {
+                    children: /* @__PURE__ */ jsxDEV2("tr", {
+                      className: "border-b border-white/10",
+                      children: [
+                        /* @__PURE__ */ jsxDEV2("th", {
+                          className: "py-2 text-left",
+                          children: "When you need..."
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV2("th", {
+                          className: "py-2 text-left",
+                          children: "Use this contract"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("tbody", {
+                    className: "text-muted-foreground",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("tr", {
+                        className: "border-b border-white/5",
+                        children: [
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: "An API endpoint that changes data"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: /* @__PURE__ */ jsxDEV2("code", {
+                              children: "defineCommand"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("tr", {
+                        className: "border-b border-white/5",
+                        children: [
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: "An API endpoint that reads data"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: /* @__PURE__ */ jsxDEV2("code", {
+                              children: "defineQuery"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("tr", {
+                        className: "border-b border-white/5",
+                        children: [
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: "Async notification of something that happened"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: /* @__PURE__ */ jsxDEV2("code", {
+                              children: "defineEvent"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("tr", {
+                        className: "border-b border-white/5",
+                        children: [
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: "Group related specs under a feature"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: /* @__PURE__ */ jsxDEV2("code", {
+                              children: "defineCapability"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("tr", {
+                        className: "border-b border-white/5",
+                        children: [
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: "Define UI rendering specifications"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: /* @__PURE__ */ jsxDEV2("code", {
+                              children: "definePresentation"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("tr", {
+                        className: "border-b border-white/5",
+                        children: [
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: "Access control and rate limiting"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: /* @__PURE__ */ jsxDEV2("code", {
+                              children: "definePolicy"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("tr", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: "Multi-step business processes"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2("td", {
+                            className: "py-2",
+                            children: /* @__PURE__ */ jsxDEV2("code", {
+                              children: "defineWorkflow"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2(StudioPrompt, {
+            title: "Want visual contract design?",
+            body: "Studio provides a visual editor for creating and managing contracts with team collaboration and version control."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2(Link2, {
+            href: "/docs/guides/nextjs-one-endpoint",
+            className: "btn-primary",
+            children: [
+              "Next: Add your first endpoint ",
+              /* @__PURE__ */ jsxDEV2(ChevronRight, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2(Link2, {
+            href: "/docs/guides",
+            className: "btn-ghost",
+            children: "Back to guides"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
-
-//#endregion
-export { GuideContractTypesPage };
-//# sourceMappingURL=GuideContractTypesPage.js.map
+export {
+  GuideContractTypesPage
+};