@contractspec/bundle.library 3.7.6 → 3.7.7

package/dist/node/components/docs/architecture/ArchitectureOverviewPage.js

@@ -1,460 +1,139 @@
 // 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";
+var layers = [
+  {
+    title: "Contracts and schemas",
+    body: "Explicit specs define the durable boundary for behavior, data, and governance."
+  },
+  {
+    title: "Bindings and configuration",
+    body: "Apps, tenants, integrations, and knowledge sources are wired through explicit configuration instead of hidden glue."
+  },
+  {
+    title: "Runtimes and generators",
+    body: "Serve or generate aligned surfaces for API, UI, workflows, docs, and agent-facing interfaces."
+  },
+  {
+    title: "Operate and observe",
+    body: "Carry auditability, policy, tracing, migrations, and tenant isolation through the same model."
+  }
+];
 function ArchitectureOverviewPage() {
   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: "Build"
+          }),
           /* @__PURE__ */ jsx("h1", {
-            className: "text-4xl font-bold",
-            children: "Architecture"
+            className: "font-serif text-4xl tracking-[-0.04em] md:text-5xl",
+            children: "The architecture keeps contracts, runtime behavior, and operations in the same system."
           }),
           /* @__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."
+            className: "max-w-3xl text-lg text-muted-foreground leading-8",
+            children: "ContractSpec is not a single runtime. It is a layered system that lets you define explicit boundaries, bind real-world configuration, and then serve or generate aligned surfaces without losing control of the output."
           })
         ]
       }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
+      /* @__PURE__ */ jsx("div", {
+        className: "grid gap-4 md:grid-cols-2",
+        children: layers.map((layer) => /* @__PURE__ */ jsxs("article", {
+          className: "editorial-panel space-y-3",
+          children: [
+            /* @__PURE__ */ jsx("h2", {
+              className: "font-semibold text-xl",
+              children: layer.title
+            }),
+            /* @__PURE__ */ jsx("p", {
+              className: "text-muted-foreground text-sm leading-7",
+              children: layer.body
+            })
+          ]
+        }, layer.title))
+      }),
+      /* @__PURE__ */ jsxs("section", {
+        className: "editorial-panel space-y-5",
         children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "text-2xl font-bold",
-            children: "Core layers"
+          /* @__PURE__ */ jsxs("div", {
+            className: "space-y-2",
+            children: [
+              /* @__PURE__ */ jsx("h2", {
+                className: "font-serif text-3xl tracking-[-0.03em]",
+                children: "Follow the architecture by responsibility"
+              }),
+              /* @__PURE__ */ jsx("p", {
+                className: "text-muted-foreground text-sm leading-7",
+                children: "Use the architecture pages when you need to understand how the pieces snap together in a real deployment."
+              })
+            ]
           }),
           /* @__PURE__ */ jsxs("div", {
-            className: "space-y-6",
+            className: "grid gap-4 md:grid-cols-2",
             children: [
-              /* @__PURE__ */ jsxs("div", {
-                className: "space-y-3",
+              /* @__PURE__ */ jsxs(Link, {
+                href: "/docs/architecture/app-config",
+                className: "docs-footer-link",
                 children: [
                   /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "1. Specification Layer"
+                    className: "font-semibold text-lg",
+                    children: "App configuration"
                   }),
                   /* @__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"
-                        ]
-                      })
-                    ]
+                    className: "text-muted-foreground text-sm leading-7",
+                    children: "How blueprint-level and tenant-level config stay explicit and merge safely."
                   })
                 ]
               }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "space-y-3",
+              /* @__PURE__ */ jsxs(Link, {
+                href: "/docs/architecture/integration-binding",
+                className: "docs-footer-link",
                 children: [
                   /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "2. Configuration Layer"
+                    className: "font-semibold text-lg",
+                    children: "Integration binding"
                   }),
                   /* @__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"
-                        ]
-                      })
-                    ]
+                    className: "text-muted-foreground text-sm leading-7",
+                    children: "How apps connect to tenant-owned integrations without leaking provider logic everywhere."
                   })
                 ]
               }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "space-y-3",
+              /* @__PURE__ */ jsxs(Link, {
+                href: "/docs/architecture/knowledge-binding",
+                className: "docs-footer-link",
                 children: [
                   /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "3. Runtime Layer"
+                    className: "font-semibold text-lg",
+                    children: "Knowledge binding"
                   }),
                   /* @__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"
-                        ]
-                      })
-                    ]
+                    className: "text-muted-foreground text-sm leading-7",
+                    children: "How trusted knowledge enters the system and stays isolated by context and tenant."
                   })
                 ]
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__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", {
+              /* @__PURE__ */ jsxs(Link, {
+                href: "/docs/architecture/control-plane",
+                className: "docs-footer-link",
                 children: [
-                  /* @__PURE__ */ jsx("strong", {
-                    children: "Auditable"
+                  /* @__PURE__ */ jsx("h3", {
+                    className: "font-semibold text-lg",
+                    children: "Control plane runtime"
                   }),
-                  " - All operations are logged for compliance and debugging"
+                  /* @__PURE__ */ jsx("p", {
+                    className: "text-muted-foreground text-sm leading-7",
+                    children: "How intent, policy, planning, and execution flow through the system runtime."
+                  })
                 ]
               })
             ]
           })
         ]
-      }),
-      /* @__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"
-          })
-        ]
       })
     ]
   });