@contractspec/bundle.library 3.7.5 → 3.7.7

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

@@ -3,341 +3,179 @@
 import Link from "@contractspec/lib.ui-link";
 import { ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var specTypes = [
+  {
+    title: "Capabilities",
+    body: "Model operations, events, and presentations as explicit system behavior.",
+    href: "/docs/specs/capabilities"
+  },
+  {
+    title: "Data views",
+    body: "Describe query, filtering, and presentation behavior from the same source model.",
+    href: "/docs/specs/dataviews"
+  },
+  {
+    title: "Workflows",
+    body: "Coordinate multi-step execution, retries, monitoring, and hand-offs.",
+    href: "/docs/specs/workflows"
+  },
+  {
+    title: "Policy",
+    body: "Carry governance and access rules through every generated and runtime-served surface.",
+    href: "/docs/specs/policy"
+  },
+  {
+    title: "Overlays",
+    body: "Customize generated surfaces safely instead of forking them permanently.",
+    href: "/docs/specs/overlays"
+  },
+  {
+    title: "Safety and migration",
+    body: "Keep change safe with signing, audits, rollbacks, and explicit migration behavior.",
+    href: "/docs/safety"
+  }
+];
 function SpecsOverviewPage() {
   return /* @__PURE__ */ jsxs("div", {
-    className: "space-y-8",
+    className: "space-y-10",
     children: [
       /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
+        className: "space-y-3",
         children: [
+          /* @__PURE__ */ jsx("p", {
+            className: "editorial-kicker",
+            children: "Core model"
+          }),
           /* @__PURE__ */ jsx("h1", {
-            className: "text-4xl font-bold",
-            children: "Specifications Overview"
+            className: "font-serif text-4xl tracking-[-0.04em] md:text-5xl",
+            children: "Contracts are the durable system boundary."
           }),
-          /* @__PURE__ */ jsxs("p", {
-            className: "text-muted-foreground",
-            children: [
-              "ContractSpec is built on a ",
-              /* @__PURE__ */ jsx("strong", {
-                children: "spec-first"
-              }),
-              " 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\u2014no code generation required."
-            ]
+          /* @__PURE__ */ jsx("p", {
+            className: "max-w-3xl text-lg text-muted-foreground leading-8",
+            children: "ContractSpec uses explicit TypeScript specs to describe behavior before it spreads across APIs, UI, data models, events, and operator flows. The goal is not to hide implementation. The goal is to make the system boundary explicit enough that generation, validation, runtime enforcement, and regeneration can stay coherent."
           })
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
+        className: "editorial-proof-strip",
         children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "text-2xl font-bold",
-            children: "Why spec-first matters"
-          }),
-          /* @__PURE__ */ jsx("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:"
-          }),
-          /* @__PURE__ */ jsxs("ul", {
-            className: "text-muted-foreground list-inside list-disc space-y-2",
+          /* @__PURE__ */ jsxs("div", {
+            className: "editorial-stat",
             children: [
-              /* @__PURE__ */ jsx("li", {
-                children: "Duplication across front-end and back-end"
-              }),
-              /* @__PURE__ */ jsx("li", {
-                children: "Type mismatches and runtime errors"
+              /* @__PURE__ */ jsx("span", {
+                className: "editorial-label",
+                children: "System promise"
               }),
-              /* @__PURE__ */ jsx("li", {
-                children: "Security vulnerabilities from inconsistent policy enforcement"
-              }),
-              /* @__PURE__ */ jsx("li", {
-                children: "High maintenance burden when requirements change"
+              /* @__PURE__ */ jsx("span", {
+                className: "editorial-stat-value",
+                children: "one contract \u2192 many surfaces"
               })
             ]
           }),
-          /* @__PURE__ */ jsxs("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\u2014the spec ",
-              /* @__PURE__ */ jsx("em", {
-                children: "is"
-              }),
-              " the implementation."
-            ]
+          /* @__PURE__ */ jsx("p", {
+            className: "max-w-2xl text-muted-foreground text-sm leading-7",
+            children: "Use the contract layer to keep surface behavior aligned, then let runtimes and generators do the repetitive work without inventing a closed platform."
           })
         ]
       }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "text-2xl font-bold",
-            children: "Specification types"
-          }),
-          /* @__PURE__ */ jsx("div", {
-            className: "border-border/50 overflow-x-auto rounded-lg border",
-            children: /* @__PURE__ */ jsxs("table", {
-              className: "w-full text-left text-sm",
+      /* @__PURE__ */ jsx("section", {
+        className: "editorial-panel space-y-5",
+        children: /* @__PURE__ */ jsxs("div", {
+          className: "space-y-2",
+          children: [
+            /* @__PURE__ */ jsx("h2", {
+              className: "font-serif text-3xl tracking-[-0.03em]",
+              children: "What the contract layer owns"
+            }),
+            /* @__PURE__ */ jsxs("ul", {
+              className: "editorial-list",
               children: [
-                /* @__PURE__ */ jsx("thead", {
-                  className: "bg-card/50",
-                  children: /* @__PURE__ */ jsxs("tr", {
-                    className: "border-border/50 border-b",
-                    children: [
-                      /* @__PURE__ */ jsx("th", {
-                        className: "px-4 py-3 font-semibold",
-                        children: "Spec Type"
-                      }),
-                      /* @__PURE__ */ jsx("th", {
-                        className: "px-4 py-3 font-semibold",
-                        children: "Purpose"
-                      }),
-                      /* @__PURE__ */ jsx("th", {
-                        className: "px-4 py-3 font-semibold",
-                        children: "Generates"
-                      })
-                    ]
-                  })
-                }),
-                /* @__PURE__ */ jsxs("tbody", {
-                  className: "divide-border/50 divide-y",
+                /* @__PURE__ */ jsxs("li", {
                   children: [
-                    /* @__PURE__ */ jsxs("tr", {
-                      children: [
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsx(Link, {
-                            href: "/docs/specs/capabilities",
-                            className: "text-violet-400 hover:text-violet-300",
-                            children: /* @__PURE__ */ jsx("strong", {
-                              children: "CapabilitySpec"
-                            })
-                          })
-                        }),
-                        /* @__PURE__ */ jsx("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."
-                        }),
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: "Runtime-served REST/GraphQL/MCP endpoints, Zod validation, policy enforcement"
-                        })
-                      ]
-                    }),
-                    /* @__PURE__ */ jsxs("tr", {
-                      children: [
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsx("strong", {
-                            children: "DataViewSpec"
-                          })
-                        }),
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: "Describes how data should be queried, filtered, sorted, and presented to users."
-                        }),
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: "Database queries, list/detail views, search interfaces"
-                        })
-                      ]
+                    /* @__PURE__ */ jsx("span", {
+                      className: "editorial-list-marker"
                     }),
-                    /* @__PURE__ */ jsxs("tr", {
-                      children: [
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsx(Link, {
-                            href: "/docs/specs/workflows",
-                            className: "text-violet-400 hover:text-violet-300",
-                            children: /* @__PURE__ */ jsx("strong", {
-                              children: "WorkflowSpec"
-                            })
-                          })
-                        }),
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: "Orchestrates multi-step processes with retries, compensation, and monitoring."
-                        }),
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: "Workflow engine, state machines, retry logic, observability hooks"
-                        })
-                      ]
-                    }),
-                    /* @__PURE__ */ jsxs("tr", {
-                      children: [
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsx("strong", {
-                            children: "PolicySpec"
-                          })
-                        }),
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: "Defines who can do what, when, and under what conditions. Supports ABAC and PII rules."
-                        }),
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: "Policy decision points, access control middleware, audit logs"
-                        })
-                      ]
+                    /* @__PURE__ */ jsx("span", {
+                      children: "Behavior: operations, events, presentations, workflows."
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsxs("li", {
+                  children: [
+                    /* @__PURE__ */ jsx("span", {
+                      className: "editorial-list-marker"
                     }),
-                    /* @__PURE__ */ jsxs("tr", {
-                      children: [
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsx("strong", {
-                            children: "OverlaySpec"
-                          })
-                        }),
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: "Allows safe, signed customization of UI layouts and field visibility by tenants or users."
-                        }),
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: "Personalized UI components, layout variations, conditional rendering"
-                        })
-                      ]
+                    /* @__PURE__ */ jsx("span", {
+                      children: "Validation: input, output, and schema boundaries."
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsxs("li", {
+                  children: [
+                    /* @__PURE__ */ jsx("span", {
+                      className: "editorial-list-marker"
                     }),
-                    /* @__PURE__ */ jsxs("tr", {
-                      children: [
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsx("strong", {
-                            children: "TelemetrySpec"
-                          })
-                        }),
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: "Specifies what metrics, logs, and traces to collect for observability."
-                        }),
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: "Instrumentation code, dashboards, alerting rules"
-                        })
-                      ]
+                    /* @__PURE__ */ jsx("span", {
+                      children: "Governance: policy, auditability, and migration rules."
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsxs("li", {
+                  children: [
+                    /* @__PURE__ */ jsx("span", {
+                      className: "editorial-list-marker"
                     }),
-                    /* @__PURE__ */ jsxs("tr", {
-                      children: [
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsx(Link, {
-                            href: "/docs/safety/migrations",
-                            className: "text-violet-400 hover:text-violet-300",
-                            children: /* @__PURE__ */ jsx("strong", {
-                              children: "MigrationSpec"
-                            })
-                          })
-                        }),
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: "Manages incremental, reversible schema and data migrations."
-                        }),
-                        /* @__PURE__ */ jsx("td", {
-                          className: "px-4 py-3 align-top",
-                          children: "Migration scripts, rollback procedures, version tracking"
-                        })
-                      ]
+                    /* @__PURE__ */ jsx("span", {
+                      children: "Surface alignment: generated or served behavior across API, UI, data, and agent-facing interfaces."
                     })
                   ]
                 })
               ]
             })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "text-2xl font-bold",
-            children: "How specs work together"
-          }),
-          /* @__PURE__ */ jsxs("p", {
-            className: "text-muted-foreground",
-            children: [
-              "Specs compose naturally. A ",
-              /* @__PURE__ */ jsx("strong", {
-                children: "WorkflowSpec"
-              }),
-              " can invoke multiple ",
-              /* @__PURE__ */ jsx("strong", {
-                children: "CapabilitySpecs"
-              }),
-              ". A",
-              " ",
-              /* @__PURE__ */ jsx("strong", {
-                children: "DataViewSpec"
-              }),
-              " respects ",
-              /* @__PURE__ */ jsx("strong", {
-                children: "PolicySpecs"
-              }),
-              " to filter sensitive fields. An ",
-              /* @__PURE__ */ jsx("strong", {
-                children: "OverlaySpec"
-              }),
-              " can hide or rearrange UI elements generated from a ",
-              /* @__PURE__ */ jsx("strong", {
-                children: "CapabilitySpec"
-              }),
-              ", but only within the bounds allowed by the underlying policy."
-            ]
-          }),
-          /* @__PURE__ */ jsx("p", {
-            className: "text-muted-foreground",
-            children: "This composability means you can build complex applications from simple, reusable building blocks\u2014all while maintaining type safety and policy enforcement."
-          })
-        ]
+          ]
+        })
       }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
+      /* @__PURE__ */ jsxs("section", {
+        className: "space-y-5",
         children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "text-2xl font-bold",
-            children: "Next steps"
-          }),
-          /* @__PURE__ */ jsx("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:"
-          }),
           /* @__PURE__ */ jsxs("div", {
-            className: "flex flex-wrap gap-4 pt-4",
+            className: "space-y-2",
             children: [
-              /* @__PURE__ */ jsxs(Link, {
-                href: "/docs/specs/capabilities",
-                className: "btn-primary",
-                children: [
-                  "Capabilities ",
-                  /* @__PURE__ */ jsx(ChevronRight, {
-                    size: 16,
-                    className: "inline"
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs(Link, {
-                href: "/docs/specs/workflows",
-                className: "btn-ghost",
-                children: [
-                  "Workflows ",
-                  /* @__PURE__ */ jsx(ChevronRight, {
-                    size: 16,
-                    className: "inline"
-                  })
-                ]
+              /* @__PURE__ */ jsx("h2", {
+                className: "font-serif text-3xl tracking-[-0.03em]",
+                children: "Specification types"
               }),
-              /* @__PURE__ */ jsxs(Link, {
-                href: "/docs/safety",
-                className: "btn-ghost",
-                children: [
-                  "Safety Features ",
-                  /* @__PURE__ */ jsx(ChevronRight, {
-                    size: 16,
-                    className: "inline"
-                  })
-                ]
+              /* @__PURE__ */ jsx("p", {
+                className: "text-muted-foreground text-sm leading-7",
+                children: "You can adopt the model one part at a time. Not every system needs every spec type on day one."
               })
             ]
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: "grid gap-4 md:grid-cols-2",
+            children: specTypes.map((item) => /* @__PURE__ */ jsxs(Link, {
+              href: item.href,
+              className: "editorial-panel",
+              children: [
+                /* @__PURE__ */ jsx("h3", {
+                  className: "font-semibold text-xl",
+                  children: item.title
+                }),
+                /* @__PURE__ */ jsx("p", {
+                  className: "mt-2 text-muted-foreground text-sm leading-7",
+                  children: item.body
+                }),
+                /* @__PURE__ */ jsxs("div", {
+                  className: "mt-4 flex items-center gap-2 text-[color:var(--rust)] text-sm",
+                  children: [
+                    "Open section ",
+                    /* @__PURE__ */ jsx(ChevronRight, {
+                      size: 14
+                    })
+                  ]
+                })
+              ]
+            }, item.title))
           })
         ]
       })