// src/components/docs/specs/SpecsOverviewPage.tsx
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function SpecsOverviewPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "Specifications Overview"
          }),
          /* @__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—no code generation required."
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        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",
            children: [
              /* @__PURE__ */ jsx("li", {
                children: "Duplication across front-end and back-end"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Type mismatches and runtime errors"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Security vulnerabilities from inconsistent policy enforcement"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "High maintenance burden when requirements change"
              })
            ]
          }),
          /* @__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—the spec ",
              /* @__PURE__ */ jsx("em", {
                children: "is"
              }),
              " the implementation."
            ]
          })
        ]
      }),
      /* @__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",
              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",
                  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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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—all while maintaining type safety and policy enforcement."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        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",
            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__ */ jsxs(Link, {
                href: "/docs/safety",
                className: "btn-ghost",
                children: [
                  "Safety Features ",
                  /* @__PURE__ */ jsx(ChevronRight, {
                    size: 16,
                    className: "inline"
                  })
                ]
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  SpecsOverviewPage
};
