@contractspec/bundle.library 1.12.0 → 1.14.0

package/dist/components/docs/architecture/index.js

@@ -1,7 +1,1914 @@
-import { ArchitectureOverviewPage } from "./ArchitectureOverviewPage.js";
-import { ArchitectureAppConfigPage } from "./ArchitectureAppConfigPage.js";
-import { ArchitectureMultiTenancyPage } from "./ArchitectureMultiTenancyPage.js";
-import { ArchitectureIntegrationBindingPage } from "./ArchitectureIntegrationBindingPage.js";
-import { ArchitectureKnowledgeBindingPage } from "./ArchitectureKnowledgeBindingPage.js";
+// @bun
+// src/components/docs/architecture/ArchitectureAppConfigPage.tsx
+import { CodeBlock } from "@contractspec/lib.design-system";
+import Link from "@contractspec/lib.ui-link";
+import { ChevronRight } from "lucide-react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function ArchitectureAppConfigPage() {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h1", {
+            className: "text-4xl font-bold",
+            children: "App Configuration"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "ContractSpec uses a three-tier configuration model that separates global app definitions from tenant-specific settings and runtime resolution."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "AppBlueprintSpec"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: [
+              "The ",
+              /* @__PURE__ */ jsxDEV("strong", {
+                children: "AppBlueprintSpec"
+              }, undefined, false, undefined, this),
+              " is the global, versioned definition of your application. It contains no tenant-specific information and is stored in version control."
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(CodeBlock, {
+            language: "typescript",
+            code: `type AppBlueprintSpec = {
+  id: string;
+  version: string;
+  name: string;
+  description: string;
+  
+  // Core specs
+  capabilities: CapabilitySpec[];
+  dataViews: DataViewSpec[];
+  workflows: WorkflowSpec[];
+  policies: PolicySpec[];
+  
+  // Required integrations
+  requiredIntegrations: {
+    integrationId: string;
+    category: IntegrationCategory;
+    purpose: string;
+    optional?: boolean;
+  }[];
+  
+  // Expected knowledge spaces
+  knowledgeSpaces: {
+    spaceId: string;
+    category: KnowledgeCategory;
+    required: boolean;
+    purpose: string;
+  }[];
+  
+  // UI/UX
+  theme: ThemeSpec;
+  overlays: OverlaySpec[];
+  
+  // Observability
+  telemetry: TelemetrySpec;
+  
+  // Schema evolution
+  migrations: MigrationSpec[];
+};`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "TenantAppConfig"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: [
+              "The ",
+              /* @__PURE__ */ jsxDEV("strong", {
+                children: "TenantAppConfig"
+              }, undefined, false, undefined, this),
+              " is the per-tenant, per-environment configuration that customizes how a specific tenant uses the app."
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(CodeBlock, {
+            language: "typescript",
+            code: `type TenantAppConfig = {
+  tenantId: string;
+  blueprintId: string;
+  blueprintVersion: string;
+  environment: "sandbox" | "staging" | "production";
+  status: "draft" | "preview" | "published" | "archived" | "superseded";
+  
+  // Integration bindings
+  integrationBindings: AppIntegrationBinding[];
+  
+  // Knowledge bindings
+  knowledgeBindings: AppKnowledgeBinding[];
+  
+  // Tenant-specific overrides
+  featureFlags: Record<string, boolean>;
+  limits: {
+    maxUsers?: number;
+    maxStorage?: number;
+    rateLimit?: number;
+  };
+  
+  // Tenant customization
+  branding: {
+    logo?: string;
+    colors?: Record<string, string>;
+    domain?: string;
+  };
+  
+  metadata: Record<string, unknown>;
+  createdAt: string;
+  updatedAt: string;
+};`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "AppIntegrationBinding"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "Defines how a tenant connects specific integration instances to satisfy capabilities and workflows."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(CodeBlock, {
+            language: "typescript",
+            code: `type AppIntegrationBinding = {
+  slotId: string;          // References AppIntegrationSlot.slotId
+  connectionId: string;    // References IntegrationConnection.meta.id
+  scope?: {
+    workflows?: string[];
+    operations?: string[];
+    features?: string[];
+  };
+  priority?: number;       // Lower number = higher priority
+};
 
-export { ArchitectureAppConfigPage, ArchitectureIntegrationBindingPage, ArchitectureKnowledgeBindingPage, ArchitectureMultiTenancyPage, ArchitectureOverviewPage };
+// Example:
+{
+  slotId: "payments.primary",
+  connectionId: "conn_stripe_acme_prod",
+  scope: {
+    workflows: ["checkout", "subscription-renewal"],
+    operations: ["payments.stripe.*"]
+  },
+  priority: 1
+}`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "AppKnowledgeBinding"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "Defines which knowledge spaces a tenant's app can access and how."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(CodeBlock, {
+            language: "typescript",
+            code: `type AppKnowledgeBinding = {
+  spaceId: string;
+  enabled: boolean;
+  
+  // Which workflows/agents can read this space
+  allowedConsumers: {
+    workflowIds?: string[];
+    agentIds?: string[];
+    roles?: string[];
+  };
+  
+  // Category-based access control
+  allowedCategories: KnowledgeCategory[];
+  
+  // Sources feeding this space for this tenant
+  sources: string[];  // References KnowledgeSourceConfig IDs
+  
+  metadata?: Record<string, unknown>;
+};
+
+// Example:
+{
+  spaceId: "product-canon",
+  enabled: true,
+  allowedConsumers: {
+    workflowIds: ["invoice-generation", "quote-creation"],
+    agentIds: ["support-agent"]
+  },
+  allowedCategories: ["canonical", "operational"],
+  sources: ["src_notion_product_docs", "src_database_schema"]
+}`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "ResolvedAppConfig"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: [
+              "The ",
+              /* @__PURE__ */ jsxDEV("strong", {
+                children: "ResolvedAppConfig"
+              }, undefined, false, undefined, this),
+              " is the runtime result of merging AppBlueprintSpec with TenantAppConfig. It's computed on-demand and never persisted."
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(CodeBlock, {
+            language: "typescript",
+            code: `type ResolvedAppConfig = {
+  appId: string;
+  tenantId: string;
+  blueprintName: string;
+  blueprintVersion: number;
+  environment?: string;
+  configVersion: number;
+
+  capabilities: { enabled: CapabilityRef[]; disabled: CapabilityRef[] };
+  features: { include: FeatureRef[]; exclude: FeatureRef[] };
+  dataViews: Record<string, SpecPointer>;
+  workflows: Record<string, SpecPointer>;
+  policies: PolicyRef[];
+  theme?: AppThemeBinding;
+  telemetry?: TelemetryBinding;
+  experiments: {
+    catalog: ExperimentRef[];
+    active: ExperimentRef[];
+    paused: ExperimentRef[];
+  };
+  featureFlags: FeatureFlagState[];
+  routes: AppRouteConfig[];
+
+  integrations: ResolvedIntegration[]; // [{ slot, binding, connection, spec }]
+  knowledge: ResolvedKnowledge[];       // [{ binding, space, sources }]
+  branding: ResolvedBranding;           // { appName, assets, colors, domain }
+  notes?: string;
+};`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Configuration flow"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "Here's how configuration flows from definition to runtime:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("ol", {
+            className: "text-muted-foreground list-inside list-decimal space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("strong", {
+                    children: "Development"
+                  }, undefined, false, undefined, this),
+                  " - Define AppBlueprintSpec with required integrations and knowledge spaces"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("strong", {
+                    children: "Deployment"
+                  }, undefined, false, undefined, this),
+                  " - Deploy blueprint to environment (sandbox, staging, production)"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("strong", {
+                    children: "Tenant Setup"
+                  }, undefined, false, undefined, this),
+                  " - Create TenantAppConfig with specific integration connections and knowledge sources"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("strong", {
+                    children: "Runtime"
+                  }, undefined, false, undefined, this),
+                  " - Resolve configuration on-demand when tenant accesses the app"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("strong", {
+                    children: "Execution"
+                  }, undefined, false, undefined, this),
+                  " - Use ResolvedAppConfig to execute capabilities, workflows, and enforce policies"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Keep AppBlueprintSpec environment-agnostic - no secrets or tenant-specific data"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Use TenantAppConfig for all tenant-specific settings and connections"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Cache ResolvedAppConfig per request to avoid repeated resolution"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Version blueprints carefully - migrations affect all tenants"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Test blueprint changes in sandbox before promoting to production"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: "/docs/architecture",
+            className: "btn-ghost",
+            children: "Back to Architecture"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: "/docs/architecture/integration-binding",
+            className: "btn-primary",
+            children: [
+              "Integration Binding ",
+              /* @__PURE__ */ jsxDEV(ChevronRight, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/architecture/ArchitectureIntegrationBindingPage.tsx
+import { CodeBlock as CodeBlock2 } from "@contractspec/lib.design-system";
+import Link2 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight2 } from "lucide-react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function ArchitectureIntegrationBindingPage() {
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h1", {
+            className: "text-4xl font-bold",
+            children: "Integration Binding"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground",
+            children: "Integration binding connects your app's capabilities to external service providers. Each tenant can configure their own integration connections while sharing the same app blueprint."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-2xl font-bold",
+            children: "How it works"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground",
+            children: "Integration binding follows a three-layer model:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("ol", {
+            className: "text-muted-foreground list-inside list-decimal space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV2("strong", {
+                    children: "IntegrationSpec"
+                  }, undefined, false, undefined, this),
+                  " (global) - Defines what an integration provides"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV2("strong", {
+                    children: "IntegrationConnection"
+                  }, undefined, false, undefined, this),
+                  " (per-tenant) - A tenant's configured connection"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV2("strong", {
+                    children: "AppIntegrationBinding"
+                  }, undefined, false, undefined, this),
+                  " (per-app) - Maps named slots to concrete tenant connections"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-2xl font-bold",
+            children: "Example: Payment processing"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground",
+            children: "Let's walk through a complete example of binding Stripe for payments."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h3", {
+                className: "text-lg font-semibold",
+                children: "Step 1: Blueprint declares requirement"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2(CodeBlock2, {
+                language: "typescript",
+                code: `// AppBlueprintSpec
+{
+  meta: { name: "invoice-app", version: '1.0.0', appId: "invoice" },
+  integrationSlots: [
+    {
+      slotId: "payments.primary",
+      requiredCategory: "payments",
+      allowedModes: ["managed", "byok"],
+      requiredCapabilities: [
+        { key: "payments.createPaymentIntent", version: '1.0.0' },
+        { key: "payments.createRefund", version: '1.0.0' }
+      ],
+      required: true,
+      description: "Primary PSP used for Checkout and Subscription flows"
+    }
+  ],
+  workflows: {
+    checkout: { name: "invoice.checkout", version: '1.0.0' }
+  },
+  branding: {
+    appNameKey: "invoice.appName",
+    assets: [{ type: "logo", url: "https://cdn.acme.dev/logo.png" }],
+    colorTokens: { primary: "colors.brand.primary" }
+  }
+}`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h3", {
+                className: "text-lg font-semibold",
+                children: "Step 2: Tenant creates connection"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2(CodeBlock2, {
+                language: "typescript",
+                code: `// IntegrationConnection
+{
+  meta: {
+    id: "conn_stripe_acme_prod",
+    tenantId: "acme-corp",
+    integrationKey: "payments.stripe",
+    integrationVersion: 1,
+    label: "Stripe Production",
+    environment: "production",
+    createdAt: "2025-01-15T09:00:00Z",
+    updatedAt: "2025-01-15T10:30:00Z"
+  },
+  ownershipMode: "byok",
+  externalAccountId: "acct_123",
+  config: {
+    accountId: "acct_123",
+    webhookUrl: "https://acme.app/webhooks/stripe"
+  },
+  secretRef: "vault://integrations/acme/conn_stripe_acme_prod",
+  status: "active"
+}`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h3", {
+                className: "text-lg font-semibold",
+                children: "Step 3: TenantAppConfig binds connection"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2(CodeBlock2, {
+                language: "typescript",
+                code: `// TenantAppConfig
+{
+  meta: {
+    tenantId: "acme-corp",
+    blueprintName: "invoice-app",
+    blueprintVersion: 1,
+    environment: "production",
+    version: 4,
+    status: "published"
+  },
+  integrations: [
+    {
+      slotId: "payments.primary",
+      connectionId: "conn_stripe_acme_prod",
+      scope: {
+        workflows: ["checkout", "subscription-renewal", "refund-process"],
+        operations: ["payments.stripe.*"]
+      },
+      priority: 1
+    }
+  ],
+  branding: {
+    appName: { en: "Acme Billing Portal" },
+    customDomain: "billing.acme.com",
+    assets: [{ type: "logo", url: "https://assets.acme.com/logo.svg" }]
+  }
+}`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h3", {
+                className: "text-lg font-semibold",
+                children: "Step 4: Runtime resolves and executes"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2(CodeBlock2, {
+                language: "typescript",
+                code: `// ResolvedAppConfig (runtime)
+{
+  integrations: {
+    "payments.createPaymentIntent": {
+      provider: { /* IntegrationSpec for Stripe */ },
+      connection: { /* IntegrationConnection */ },
+      config: { /* Merged configuration */ }
+    }
+  }
+}
+
+// When workflow executes:
+const result = await executeCapability(
+  "payments.createPaymentIntent",
+  { amount: 5000, currency: "usd" },
+  resolvedConfig
+);
+// \u2192 Uses Stripe connection automatically`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-2xl font-bold",
+            children: "Multi-integration scenarios"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground",
+            children: "A single app can use multiple integrations across different categories:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2(CodeBlock2, {
+            language: "typescript",
+            code: `integrations: [
+  {
+    slotId: "payments.primary",
+    connectionId: "conn_stripe_prod",
+    scope: {
+      workflows: ["checkout", "subscription-*"]
+    }
+  },
+  {
+    slotId: "email.outbound",
+    connectionId: "conn_postmark_prod"
+  },
+  {
+    slotId: "email.inbound",
+    connectionId: "conn_gmail_support",
+    scope: {
+      workflows: ["support-ticket-creation"]
+    }
+  },
+  {
+    slotId: "knowledge.vector-store",
+    connectionId: "conn_qdrant_prod",
+    scope: {
+      workflows: ["semantic-search", "rag-query"]
+    }
+  }
+]`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-2xl font-bold",
+            children: "Sandbox vs Production"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground",
+            children: "Tenants typically maintain separate connections for sandbox and production environments:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2(CodeBlock2, {
+            language: "typescript",
+            code: `// Sandbox environment
+{
+  meta: { environment: "sandbox", status: "preview" },
+  integrations: [
+    {
+      slotId: "payments.primary",
+      connectionId: "conn_stripe_acme_test"
+    }
+  ]
+}
+
+// Production environment
+{
+  meta: { environment: "production", status: "published" },
+  integrations: [
+    {
+      slotId: "payments.primary",
+      connectionId: "conn_stripe_acme_prod"
+    }
+  ]
+}`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-2xl font-bold",
+            children: "Security & validation"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Integration connections are validated before binding - health checks ensure connectivity"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Secrets are never stored in TenantAppConfig - only references to encrypted secrets"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Policy Decision Point (PDP) enforces which workflows can use which integrations"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "All integration calls are audited with full request/response logging"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Rate limiting and quotas are enforced per connection"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: [
+                  "Use wildcard patterns sparingly in ",
+                  /* @__PURE__ */ jsxDEV2("code", {
+                    children: "allowedWorkflows"
+                  }, undefined, false, undefined, this),
+                  " - be explicit about access"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Always maintain separate sandbox and production connections"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Monitor integration health checks and set up alerts for failures"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Document the purpose of each integration binding for your team"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Test integration changes in sandbox before promoting to production"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2(Link2, {
+            href: "/docs/architecture/app-config",
+            className: "btn-ghost",
+            children: "Previous: App Configuration"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2(Link2, {
+            href: "/docs/architecture/knowledge-binding",
+            className: "btn-primary",
+            children: [
+              "Knowledge Binding ",
+              /* @__PURE__ */ jsxDEV2(ChevronRight2, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/architecture/ArchitectureKnowledgeBindingPage.tsx
+import { CodeBlock as CodeBlock3 } from "@contractspec/lib.design-system";
+import Link3 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight3 } from "lucide-react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function ArchitectureKnowledgeBindingPage() {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h1", {
+            className: "text-4xl font-bold",
+            children: "Knowledge Binding"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground",
+            children: "Knowledge binding connects your app's workflows and agents to structured knowledge spaces. This enables semantic search, RAG (Retrieval-Augmented Generation), and context-aware decision-making."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "How it works"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground",
+            children: "Knowledge binding follows a three-layer model:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("ol", {
+            className: "text-muted-foreground list-inside list-decimal space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("strong", {
+                    children: "KnowledgeSpaceSpec"
+                  }, undefined, false, undefined, this),
+                  " (global) - Defines a logical knowledge domain"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("strong", {
+                    children: "KnowledgeSourceConfig"
+                  }, undefined, false, undefined, this),
+                  " (per-tenant) - Tenant's data sources feeding spaces"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("strong", {
+                    children: "AppKnowledgeBinding"
+                  }, undefined, false, undefined, this),
+                  " (per-app) - Maps spaces to workflows/agents"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "Example: Support agent with RAG"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground",
+            children: "Let's build a support agent that uses canonical product documentation and operational support history."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV3("h3", {
+                className: "text-lg font-semibold",
+                children: "Step 1: Blueprint declares knowledge needs"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3(CodeBlock3, {
+                language: "typescript",
+                code: `// AppBlueprintSpec
+{
+  id: "support-app",
+  version: "1.0.0",
+  knowledgeSpaces: [
+    {
+      spaceId: "product-canon",
+      category: "canonical",
+      required: true,
+      purpose: "Official product documentation and specs"
+    },
+    {
+      spaceId: "support-history",
+      category: "operational",
+      required: true,
+      purpose: "Past support tickets and resolutions"
+    },
+    {
+      spaceId: "external-docs",
+      category: "external",
+      required: false,
+      purpose: "Third-party integration documentation"
+    }
+  ]
+}`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV3("h3", {
+                className: "text-lg font-semibold",
+                children: "Step 2: Tenant configures sources"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3(CodeBlock3, {
+                language: "typescript",
+                code: `// KnowledgeSourceConfig (per-tenant)
+[
+  {
+    id: "src_notion_product_docs",
+    tenantId: "acme-corp",
+    spaceId: "product-canon",
+    kind: "notion",
+    location: "https://notion.so/acme/product-docs",
+    syncPolicy: { interval: "1h" },
+    lastSyncedAt: "2025-01-15T10:00:00Z"
+  },
+  {
+    id: "src_gmail_support_threads",
+    tenantId: "acme-corp",
+    spaceId: "support-history",
+    kind: "gmail",
+    location: "support@acme.com",
+    syncPolicy: { webhook: true },
+    lastSyncedAt: "2025-01-15T10:30:00Z"
+  },
+  {
+    id: "src_stripe_docs",
+    tenantId: "acme-corp",
+    spaceId: "external-docs",
+    kind: "url",
+    location: "https://stripe.com/docs",
+    syncPolicy: { interval: "24h" },
+    lastSyncedAt: "2025-01-15T00:00:00Z"
+  }
+]`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV3("h3", {
+                className: "text-lg font-semibold",
+                children: "Step 3: TenantAppConfig binds spaces"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3(CodeBlock3, {
+                language: "typescript",
+                code: `// TenantAppConfig
+{
+  tenantId: "acme-corp",
+  blueprintId: "support-app",
+  blueprintVersion: "1.0.0",
+  knowledgeBindings: [
+    {
+      spaceId: "product-canon",
+      enabled: true,
+      allowedConsumers: {
+        workflowIds: ["answer-question", "generate-docs"],
+        agentIds: ["support-agent", "docs-agent"]
+      },
+      allowedCategories: ["canonical"],
+      sources: ["src_notion_product_docs"]
+    },
+    {
+      spaceId: "support-history",
+      enabled: true,
+      allowedConsumers: {
+        workflowIds: ["answer-question", "escalate-ticket"],
+        agentIds: ["support-agent"]
+      },
+      allowedCategories: ["operational"],
+      sources: ["src_gmail_support_threads"]
+    },
+    {
+      spaceId: "external-docs",
+      enabled: true,
+      allowedConsumers: {
+        agentIds: ["support-agent"]
+      },
+      allowedCategories: ["external"],
+      sources: ["src_stripe_docs"]
+    }
+  ]
+}`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV3("h3", {
+                className: "text-lg font-semibold",
+                children: "Step 4: Workflow uses knowledge"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3(CodeBlock3, {
+                language: "yaml",
+                code: `// WorkflowSpec
+workflowId: answer-question
+version: '1.0.0'.0.0
+
+steps:
+  - id: generate-embedding
+    capability: openai-embeddings
+    inputs:
+      text: \${input.question}
+  
+  - id: search-canonical
+    capability: vector.search
+    inputs:
+      collection: "product-canon"
+      vector: \${steps.generate-embedding.output.embedding}
+      limit: 5
+  
+  - id: search-support-history
+    capability: vector.search
+    inputs:
+      collection: "support-history"
+      vector: \${steps.generate-embedding.output.embedding}
+      limit: 3
+  
+  - id: generate-answer
+    capability: openai-chat
+    inputs:
+      messages:
+        - role: "system"
+          content: |
+            You are a support agent. Answer based on:
+            1. Canonical docs (authoritative)
+            2. Support history (helpful context)
+            Only use external docs for integration questions.
+        - role: "user"
+          content: |
+            Question: \${input.question}
+            
+            Canonical docs:
+            \${steps.search-canonical.output.results}
+            
+            Support history:
+            \${steps.search-support-history.output.results}`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "Category-based access control"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground",
+            children: "Different knowledge categories have different trust levels and access patterns:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "border-border/50 overflow-x-auto rounded-lg border",
+            children: /* @__PURE__ */ jsxDEV3("table", {
+              className: "w-full text-left text-sm",
+              children: [
+                /* @__PURE__ */ jsxDEV3("thead", {
+                  className: "bg-card/50",
+                  children: /* @__PURE__ */ jsxDEV3("tr", {
+                    className: "border-border/50 border-b",
+                    children: [
+                      /* @__PURE__ */ jsxDEV3("th", {
+                        className: "px-4 py-3 font-semibold",
+                        children: "Category"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV3("th", {
+                        className: "px-4 py-3 font-semibold",
+                        children: "Trust Level"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV3("th", {
+                        className: "px-4 py-3 font-semibold",
+                        children: "Use Cases"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV3("th", {
+                        className: "px-4 py-3 font-semibold",
+                        children: "Policy Impact"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV3("tbody", {
+                  className: "divide-border/50 divide-y",
+                  children: [
+                    /* @__PURE__ */ jsxDEV3("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3 font-mono text-xs",
+                          children: "canonical"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3",
+                          children: "Highest"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3",
+                          children: "Product specs, schemas, official policies"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3",
+                          children: "Can drive policy decisions"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV3("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3 font-mono text-xs",
+                          children: "operational"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3",
+                          children: "High"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3",
+                          children: "Support tickets, sales docs, internal runbooks"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3",
+                          children: "Can inform decisions"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV3("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3 font-mono text-xs",
+                          children: "external"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3",
+                          children: "Medium"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3",
+                          children: "Third-party docs, regulations, PSP guides"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3",
+                          children: "Reference only, not authoritative"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV3("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3 font-mono text-xs",
+                          children: "ephemeral"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3",
+                          children: "Low"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3",
+                          children: "Agent scratchpads, session context, drafts"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("td", {
+                          className: "px-4 py-3",
+                          children: "Never used for decisions"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "Multi-space workflows"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground",
+            children: "Workflows can query multiple knowledge spaces and combine results:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(CodeBlock3, {
+            language: "typescript",
+            code: `knowledgeBindings: [
+  {
+    spaceId: "product-canon",
+    enabled: true,
+    allowedConsumers: {
+      workflowIds: ["invoice-generation", "quote-creation"]
+    },
+    allowedCategories: ["canonical"],
+    sources: ["src_database_schema", "src_product_catalog"]
+  },
+  {
+    spaceId: "pricing-rules",
+    enabled: true,
+    allowedConsumers: {
+      workflowIds: ["invoice-generation", "quote-creation"]
+    },
+    allowedCategories: ["canonical", "operational"],
+    sources: ["src_pricing_database", "src_discount_policies"]
+  },
+  {
+    spaceId: "customer-history",
+    enabled: true,
+    allowedConsumers: {
+      workflowIds: ["quote-creation"]
+    },
+    allowedCategories: ["operational"],
+    sources: ["src_crm_data", "src_past_invoices"]
+  }
+]`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "Security & validation"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Knowledge sources are validated before sync - credentials and permissions checked"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "PDP enforces which workflows/agents can access which spaces"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "All knowledge queries are audited with search terms and results"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Canonical knowledge is immutable once indexed - changes require re-sync"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Ephemeral knowledge is automatically purged based on retention policies"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Use canonical spaces for policy-critical decisions, operational for suggestions"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Never allow workflows to write to canonical spaces - maintain read-only access"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Set up monitoring for sync failures and stale knowledge sources"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Document the purpose and trust level of each knowledge space"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Test knowledge queries in sandbox before promoting to production"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: [
+                  "Use explicit ",
+                  /* @__PURE__ */ jsxDEV3("code", {
+                    children: "allowedConsumers"
+                  }, undefined, false, undefined, this),
+                  " - avoid wildcard access"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3(Link3, {
+            href: "/docs/architecture/integration-binding",
+            className: "btn-ghost",
+            children: "Previous: Integration Binding"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(Link3, {
+            href: "/docs/knowledge",
+            className: "btn-primary",
+            children: [
+              "Knowledge & Context ",
+              /* @__PURE__ */ jsxDEV3(ChevronRight3, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/architecture/ArchitectureMultiTenancyPage.tsx
+import { CodeBlock as CodeBlock4 } from "@contractspec/lib.design-system";
+import Link4 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight4 } from "lucide-react";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function ArchitectureMultiTenancyPage() {
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h1", {
+            className: "text-4xl font-bold",
+            children: "Multi-Tenancy"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground",
+            children: "ContractSpec is designed from the ground up for multi-tenancy. Apps built with ContractSpec can serve multiple organizations (tenants) from a single deployment, while ensuring strict data isolation and configuration separation."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-2xl font-bold",
+            children: "Core Concepts"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("strong", {
+                    children: "Tenant"
+                  }, undefined, false, undefined, this),
+                  ": An organization or customer that uses your app. Each tenant has a unique ",
+                  /* @__PURE__ */ jsxDEV4("code", {
+                    children: "tenantId"
+                  }, undefined, false, undefined, this),
+                  "."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("strong", {
+                    children: "Tenant Isolation"
+                  }, undefined, false, undefined, this),
+                  ": Data and configuration for one tenant is never accessible to another tenant unless explicitly shared."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("strong", {
+                    children: "Tenant Context"
+                  }, undefined, false, undefined, this),
+                  ": Every request and operation runs within the context of a specific tenant."
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-2xl font-bold",
+            children: "Tenant Resolution"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground",
+            children: "The runtime automatically resolves the tenant context for every request based on:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: [
+                  "Subdomain (e.g., ",
+                  /* @__PURE__ */ jsxDEV4("code", {
+                    children: "acme.app.com"
+                  }, undefined, false, undefined, this),
+                  ")"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: [
+                  "Custom Domain (e.g., ",
+                  /* @__PURE__ */ jsxDEV4("code", {
+                    children: "portal.acme.com"
+                  }, undefined, false, undefined, this),
+                  ")"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: [
+                  "Header (e.g., ",
+                  /* @__PURE__ */ jsxDEV4("code", {
+                    children: "x-tenant-id: acme-corp"
+                  }, undefined, false, undefined, this),
+                  ")"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Authentication Token (embedded tenant claim)"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-2xl font-bold",
+            children: "Configuration Isolation"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground",
+            children: [
+              "Each tenant has its own ",
+              /* @__PURE__ */ jsxDEV4("code", {
+                children: "TenantAppConfig"
+              }, undefined, false, undefined, this),
+              " which defines:"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4(CodeBlock4, {
+            language: "typescript",
+            code: `type TenantAppConfig = {
+  tenantId: string;
+  blueprintId: string;
+  // ...
+  integrationBindings: AppIntegrationBinding[];
+  knowledgeBindings: AppKnowledgeBinding[];
+  featureFlags: Record<string, boolean>;
+};`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground mt-2",
+            children: "This allows you to customize feature flags, integration connections, and knowledge sources per tenant without changing the application code."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4(Link4, {
+            href: "/docs/architecture",
+            className: "btn-ghost",
+            children: "Back to Architecture"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4(Link4, {
+            href: "/docs/libraries/multi-tenancy",
+            className: "btn-primary",
+            children: [
+              "Multi-Tenancy Library ",
+              /* @__PURE__ */ jsxDEV4(ChevronRight4, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/architecture/ArchitectureOverviewPage.tsx
+import Link5 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight5 } from "lucide-react";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function ArchitectureOverviewPage() {
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h1", {
+            className: "text-4xl font-bold",
+            children: "Architecture"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("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, and knowledge management."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Core layers"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "space-y-6",
+            children: [
+              /* @__PURE__ */ jsxDEV5("div", {
+                className: "space-y-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV5("h3", {
+                    className: "text-xl font-semibold",
+                    children: "1. Specification Layer"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("p", {
+                    className: "text-muted-foreground",
+                    children: "The foundation of ContractSpec. Typed specifications define what your application can do:"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("ul", {
+                    className: "text-muted-foreground ml-4 list-inside list-disc space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5(Link5, {
+                            href: "/docs/specs/capabilities",
+                            className: "text-violet-400 hover:text-violet-300",
+                            children: "CapabilitySpec"
+                          }, undefined, false, undefined, this),
+                          " ",
+                          "- Operations and their inputs/outputs"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5(Link5, {
+                            href: "/docs/specs/dataviews",
+                            className: "text-violet-400 hover:text-violet-300",
+                            children: "DataViewSpec"
+                          }, undefined, false, undefined, this),
+                          " ",
+                          "- Data queries and presentation"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5(Link5, {
+                            href: "/docs/specs/workflows",
+                            className: "text-violet-400 hover:text-violet-300",
+                            children: "WorkflowSpec"
+                          }, undefined, false, undefined, this),
+                          " ",
+                          "- Multi-step processes"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5(Link5, {
+                            href: "/docs/specs/policy",
+                            className: "text-violet-400 hover:text-violet-300",
+                            children: "PolicySpec"
+                          }, undefined, false, undefined, this),
+                          " ",
+                          "- Access control and data protection"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5(Link5, {
+                            href: "/docs/integrations/spec-model",
+                            className: "text-violet-400 hover:text-violet-300",
+                            children: "IntegrationSpec"
+                          }, undefined, false, undefined, this),
+                          " ",
+                          "- External service providers"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5(Link5, {
+                            href: "/docs/knowledge/spaces",
+                            className: "text-violet-400 hover:text-violet-300",
+                            children: "KnowledgeSpaceSpec"
+                          }, undefined, false, undefined, this),
+                          " ",
+                          "- Knowledge and context management"
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("div", {
+                className: "space-y-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV5("h3", {
+                    className: "text-xl font-semibold",
+                    children: "2. Configuration Layer"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("p", {
+                    className: "text-muted-foreground",
+                    children: "How applications are configured and customized:"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("ul", {
+                    className: "text-muted-foreground ml-4 list-inside list-disc space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5(Link5, {
+                            href: "/docs/architecture/app-config",
+                            className: "text-violet-400 hover:text-violet-300",
+                            children: "AppBlueprintSpec"
+                          }, undefined, false, undefined, this),
+                          " ",
+                          "- Global, versioned app definition"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5(Link5, {
+                            href: "/docs/architecture/app-config",
+                            className: "text-violet-400 hover:text-violet-300",
+                            children: "TenantAppConfig"
+                          }, undefined, false, undefined, this),
+                          " ",
+                          "- Per-tenant, per-environment configuration"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5(Link5, {
+                            href: "/docs/architecture/integration-binding",
+                            className: "text-violet-400 hover:text-violet-300",
+                            children: "AppIntegrationBinding"
+                          }, undefined, false, undefined, this),
+                          " ",
+                          "- How apps use integrations"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5(Link5, {
+                            href: "/docs/architecture/knowledge-binding",
+                            className: "text-violet-400 hover:text-violet-300",
+                            children: "AppKnowledgeBinding"
+                          }, undefined, false, undefined, this),
+                          " ",
+                          "- How apps access knowledge"
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("div", {
+                className: "space-y-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV5("h3", {
+                    className: "text-xl font-semibold",
+                    children: "3. Runtime Layer"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("p", {
+                    className: "text-muted-foreground",
+                    children: "How specifications are executed at runtime:"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("ul", {
+                    className: "text-muted-foreground ml-4 list-inside list-disc space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5("strong", {
+                            children: "ResolvedAppConfig"
+                          }, undefined, false, undefined, this),
+                          " - Merged blueprint + tenant config"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5("strong", {
+                            children: "Policy Decision Point (PDP)"
+                          }, undefined, false, undefined, this),
+                          " - Enforces policies on every operation"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5("strong", {
+                            children: "Presentation Runtime"
+                          }, undefined, false, undefined, this),
+                          " - React and React Native renderers"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5("strong", {
+                            children: "Integration Connectors"
+                          }, undefined, false, undefined, this),
+                          " - Execute external API calls"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV5("strong", {
+                            children: "Knowledge Retrieval"
+                          }, undefined, false, undefined, this),
+                          " - Query vector databases and knowledge sources"
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Configuration model"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "ContractSpec uses a three-tier configuration model:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "border-border/50 overflow-x-auto rounded-lg border",
+            children: /* @__PURE__ */ jsxDEV5("table", {
+              className: "w-full text-left text-sm",
+              children: [
+                /* @__PURE__ */ jsxDEV5("thead", {
+                  className: "bg-card/50",
+                  children: /* @__PURE__ */ jsxDEV5("tr", {
+                    className: "border-border/50 border-b",
+                    children: [
+                      /* @__PURE__ */ jsxDEV5("th", {
+                        className: "px-4 py-3 font-semibold",
+                        children: "Layer"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("th", {
+                        className: "px-4 py-3 font-semibold",
+                        children: "Type"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("th", {
+                        className: "px-4 py-3 font-semibold",
+                        children: "Scope"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("th", {
+                        className: "px-4 py-3 font-semibold",
+                        children: "Storage"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("tbody", {
+                  className: "divide-border/50 divide-y",
+                  children: [
+                    /* @__PURE__ */ jsxDEV5("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV5("td", {
+                          className: "px-4 py-3 align-top",
+                          children: /* @__PURE__ */ jsxDEV5("strong", {
+                            children: "Blueprint"
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV5("td", {
+                          className: "px-4 py-3 align-top font-mono text-xs",
+                          children: "AppBlueprintSpec"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV5("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Global, versioned, no tenant info"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV5("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Version control, immutable"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV5("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV5("td", {
+                          className: "px-4 py-3 align-top",
+                          children: /* @__PURE__ */ jsxDEV5("strong", {
+                            children: "Tenant Config"
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV5("td", {
+                          className: "px-4 py-3 align-top font-mono text-xs",
+                          children: "TenantAppConfig"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV5("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Per-tenant, per-environment"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV5("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Database, mutable"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV5("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV5("td", {
+                          className: "px-4 py-3 align-top",
+                          children: /* @__PURE__ */ jsxDEV5("strong", {
+                            children: "Resolved Config"
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV5("td", {
+                          className: "px-4 py-3 align-top font-mono text-xs",
+                          children: "ResolvedAppConfig"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV5("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "Runtime, ephemeral"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV5("td", {
+                          className: "px-4 py-3 align-top",
+                          children: "In-memory, not persisted"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Key architectural principles"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Spec-first"
+                  }, undefined, false, undefined, this),
+                  " - Everything is defined declaratively before code generation"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Type-safe"
+                  }, undefined, false, undefined, this),
+                  " - All specifications are strongly typed and validated at compile time"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Policy-enforced"
+                  }, undefined, false, undefined, this),
+                  " - Every operation passes through the PDP"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Multi-tenant by default"
+                  }, undefined, false, undefined, this),
+                  " - Tenant isolation is built-in, not bolted on"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Environment-aware"
+                  }, undefined, false, undefined, this),
+                  " - Separate configurations for sandbox, staging, production"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Auditable"
+                  }, undefined, false, undefined, this),
+                  " - All operations are logged for compliance and debugging"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5(Link5, {
+            href: "/docs/architecture/app-config",
+            className: "btn-primary",
+            children: [
+              "App Configuration ",
+              /* @__PURE__ */ jsxDEV5(ChevronRight5, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5(Link5, {
+            href: "/docs/integrations",
+            className: "btn-ghost",
+            children: "Integrations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(Link5, {
+            href: "/docs/knowledge",
+            className: "btn-ghost",
+            children: "Knowledge & Context"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  ArchitectureOverviewPage,
+  ArchitectureMultiTenancyPage,
+  ArchitectureKnowledgeBindingPage,
+  ArchitectureIntegrationBindingPage,
+  ArchitectureAppConfigPage
+};