// @bun
// src/components/docs/architecture/ArchitectureOverviewPage.tsx
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function ArchitectureOverviewPage() {
  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: "Architecture"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "ContractSpec's architecture is built on a foundation of typed specifications served by runtime adapters. This section covers the core architectural concepts: app configuration, integration binding, control-plane governance, and knowledge management."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Core layers"
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-6",
            children: [
              /* @__PURE__ */ jsxs("div", {
                className: "space-y-3",
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "text-xl font-semibold",
                    children: "1. Specification Layer"
                  }),
                  /* @__PURE__ */ jsx("p", {
                    className: "text-muted-foreground",
                    children: "The foundation of ContractSpec. Typed specifications define what your application can do:"
                  }),
                  /* @__PURE__ */ jsxs("ul", {
                    className: "text-muted-foreground ml-4 list-inside list-disc space-y-2",
                    children: [
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx(Link, {
                            href: "/docs/specs/capabilities",
                            className: "text-violet-400 hover:text-violet-300",
                            children: "CapabilitySpec"
                          }),
                          " ",
                          "- Operations and their inputs/outputs"
                        ]
                      }),
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx(Link, {
                            href: "/docs/specs/dataviews",
                            className: "text-violet-400 hover:text-violet-300",
                            children: "DataViewSpec"
                          }),
                          " ",
                          "- Data queries and presentation"
                        ]
                      }),
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx(Link, {
                            href: "/docs/specs/workflows",
                            className: "text-violet-400 hover:text-violet-300",
                            children: "WorkflowSpec"
                          }),
                          " ",
                          "- Multi-step processes"
                        ]
                      }),
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx(Link, {
                            href: "/docs/specs/policy",
                            className: "text-violet-400 hover:text-violet-300",
                            children: "PolicySpec"
                          }),
                          " ",
                          "- Access control and data protection"
                        ]
                      }),
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx(Link, {
                            href: "/docs/integrations/spec-model",
                            className: "text-violet-400 hover:text-violet-300",
                            children: "IntegrationSpec"
                          }),
                          " ",
                          "- External service providers"
                        ]
                      }),
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx(Link, {
                            href: "/docs/knowledge/spaces",
                            className: "text-violet-400 hover:text-violet-300",
                            children: "KnowledgeSpaceSpec"
                          }),
                          " ",
                          "- Knowledge and context management"
                        ]
                      })
                    ]
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "space-y-3",
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "text-xl font-semibold",
                    children: "2. Configuration Layer"
                  }),
                  /* @__PURE__ */ jsx("p", {
                    className: "text-muted-foreground",
                    children: "How applications are configured and customized:"
                  }),
                  /* @__PURE__ */ jsxs("ul", {
                    className: "text-muted-foreground ml-4 list-inside list-disc space-y-2",
                    children: [
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx(Link, {
                            href: "/docs/architecture/app-config",
                            className: "text-violet-400 hover:text-violet-300",
                            children: "AppBlueprintSpec"
                          }),
                          " ",
                          "- Global, versioned app definition"
                        ]
                      }),
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx(Link, {
                            href: "/docs/architecture/app-config",
                            className: "text-violet-400 hover:text-violet-300",
                            children: "TenantAppConfig"
                          }),
                          " ",
                          "- Per-tenant, per-environment configuration"
                        ]
                      }),
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx(Link, {
                            href: "/docs/architecture/integration-binding",
                            className: "text-violet-400 hover:text-violet-300",
                            children: "AppIntegrationBinding"
                          }),
                          " ",
                          "- How apps use integrations"
                        ]
                      }),
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx(Link, {
                            href: "/docs/architecture/knowledge-binding",
                            className: "text-violet-400 hover:text-violet-300",
                            children: "AppKnowledgeBinding"
                          }),
                          " ",
                          "- How apps access knowledge"
                        ]
                      })
                    ]
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "space-y-3",
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "text-xl font-semibold",
                    children: "3. Runtime Layer"
                  }),
                  /* @__PURE__ */ jsx("p", {
                    className: "text-muted-foreground",
                    children: "How specifications are executed at runtime:"
                  }),
                  /* @__PURE__ */ jsxs("ul", {
                    className: "text-muted-foreground ml-4 list-inside list-disc space-y-2",
                    children: [
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx("strong", {
                            children: "ResolvedAppConfig"
                          }),
                          " - Merged blueprint + tenant config"
                        ]
                      }),
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx("strong", {
                            children: "Policy Decision Point (PDP)"
                          }),
                          " - Enforces policies on every operation"
                        ]
                      }),
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx(Link, {
                            href: "/docs/architecture/control-plane",
                            className: "text-violet-400 hover:text-violet-300",
                            children: "Control Plane Runtime"
                          }),
                          " ",
                          "- Deterministic intent to plan to policy to execution loop"
                        ]
                      }),
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx("strong", {
                            children: "Presentation Runtime"
                          }),
                          " - React and React Native renderers"
                        ]
                      }),
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx("strong", {
                            children: "Integration Connectors"
                          }),
                          " - Execute external API calls"
                        ]
                      }),
                      /* @__PURE__ */ jsxs("li", {
                        children: [
                          /* @__PURE__ */ jsx("strong", {
                            children: "Knowledge Retrieval"
                          }),
                          " - Query vector databases and knowledge sources"
                        ]
                      })
                    ]
                  })
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Configuration model"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "ContractSpec uses a three-tier configuration model:"
          }),
          /* @__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: "Layer"
                      }),
                      /* @__PURE__ */ jsx("th", {
                        className: "px-4 py-3 font-semibold",
                        children: "Type"
                      }),
                      /* @__PURE__ */ jsx("th", {
                        className: "px-4 py-3 font-semibold",
                        children: "Scope"
                      }),
                      /* @__PURE__ */ jsx("th", {
                        className: "px-4 py-3 font-semibold",
                        children: "Storage"
                      })
                    ]
                  })
                }),
                /* @__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("strong", {
                            children: "Blueprint"
                          })
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top font-mono text-xs",
                          children: "AppBlueprintSpec"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Global, versioned, no tenant info"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Version control, immutable"
                        })
                      ]
                    }),
                    /* @__PURE__ */ jsxs("tr", {
                      children: [
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: /* @__PURE__ */ jsx("strong", {
                            children: "Tenant Config"
                          })
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top font-mono text-xs",
                          children: "TenantAppConfig"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Per-tenant, per-environment"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Database, mutable"
                        })
                      ]
                    }),
                    /* @__PURE__ */ jsxs("tr", {
                      children: [
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: /* @__PURE__ */ jsx("strong", {
                            children: "Resolved Config"
                          })
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top font-mono text-xs",
                          children: "ResolvedAppConfig"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Runtime, ephemeral"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "In-memory, not persisted"
                        })
                      ]
                    })
                  ]
                })
              ]
            })
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Key architectural principles"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Spec-first"
                  }),
                  " - Everything is defined declaratively before code generation"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Type-safe"
                  }),
                  " - All specifications are strongly typed and validated at compile time"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Policy-enforced"
                  }),
                  " - Every operation passes through the PDP"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Multi-tenant by default"
                  }),
                  " - Tenant isolation is built-in, not bolted on"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Environment-aware"
                  }),
                  " - Separate configurations for sandbox, staging, production"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Auditable"
                  }),
                  " - All operations are logged for compliance and debugging"
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/architecture/app-config",
            className: "btn-primary",
            children: [
              "App Configuration ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          }),
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/architecture/control-plane",
            className: "btn-ghost",
            children: "Control Plane Runtime"
          }),
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/integrations",
            className: "btn-ghost",
            children: "Integrations"
          }),
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/knowledge",
            className: "btn-ghost",
            children: "Knowledge & Context"
          })
        ]
      })
    ]
  });
}
export {
  ArchitectureOverviewPage
};
