@contractspec/bundle.library 1.12.0 → 1.14.0

package/dist/node/components/docs/integrations/index.js

@@ -0,0 +1,3311 @@
+// src/components/docs/integrations/IntegrationsOverviewPage.tsx
+import Link from "@contractspec/lib.ui-link";
+import { ChevronRight } from "lucide-react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function IntegrationsOverviewPage() {
+  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: "Integrations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "ContractSpec provides first-class integration support through a spec-first architecture. Integrations are defined globally, connected per-tenant, and bound to apps through typed specifications, ensuring type-safe, policy-enforced access to external services."
+          }, 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: "Spec-first architecture"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "Integrations in ContractSpec follow a three-layer model:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "card-subtle p-4",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "mb-2 font-semibold",
+                    children: "1. IntegrationSpec (Global)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "text-muted-foreground text-sm",
+                    children: "Defines what an integration provides: capabilities, configuration schema, secrets, webhooks, and requirements."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Link, {
+                    href: "/docs/integrations/spec-model",
+                    className: "mt-2 inline-block text-sm text-violet-400 hover:text-violet-300",
+                    children: "Learn more →"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "card-subtle p-4",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "mb-2 font-semibold",
+                    children: "2. IntegrationConnection (Per-Tenant)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "text-muted-foreground text-sm",
+                    children: "A tenant's configured connection with credentials, environment (sandbox/production), and health status."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Link, {
+                    href: "/docs/architecture/integration-binding",
+                    className: "mt-2 inline-block text-sm text-violet-400 hover:text-violet-300",
+                    children: "Learn more →"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "card-subtle p-4",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "mb-2 font-semibold",
+                    children: "3. AppIntegrationBinding (Per-App)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "text-muted-foreground text-sm",
+                    children: "Maps tenant connections to app capabilities and workflows, defining which operations can use which integrations."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Link, {
+                    href: "/docs/architecture/integration-binding",
+                    className: "mt-2 inline-block text-sm text-violet-400 hover:text-violet-300",
+                    children: "Learn more →"
+                  }, undefined, false, undefined, this)
+                ]
+              }, 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: "Integration categories"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV("pre", {
+              children: `type IntegrationCategory =
+  | "payments"      // Stripe
+  | "email"         // Postmark, Resend, Gmail
+  | "calendar"      // Google Calendar
+  | "sms"           // Twilio
+  | "ai-llm"        // OpenAI
+  | "ai-voice"      // ElevenLabs
+  | "speech-to-text" // OpenAI Whisper
+  | "vector-db"     // Qdrant
+  | "storage"       // S3-compatible
+  | "open-banking"  // Powens (read-only)
+  | "accounting"    // Coming soon
+  | "crm"           // Coming soon
+  | "helpdesk"      // Coming soon
+  | "custom";       // User-defined`
+            }, undefined, false, undefined, this)
+          }, 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: "Available integrations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-6",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-xl font-semibold",
+                    children: "Payments"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "grid gap-4 md:grid-cols-2",
+                    children: /* @__PURE__ */ jsxDEV(Link, {
+                      href: "/docs/integrations/stripe",
+                      className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
+                      children: [
+                        /* @__PURE__ */ jsxDEV("h4", {
+                          className: "font-bold transition-colors group-hover:text-violet-400",
+                          children: "Stripe"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("p", {
+                          className: "text-muted-foreground mt-1 text-sm",
+                          children: "Payment processing, subscriptions, and invoicing"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-xl font-semibold",
+                    children: "Open Banking"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "grid gap-4 md:grid-cols-2",
+                    children: /* @__PURE__ */ jsxDEV(Link, {
+                      href: "/docs/integrations/powens",
+                      className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
+                      children: [
+                        /* @__PURE__ */ jsxDEV("h4", {
+                          className: "font-bold transition-colors group-hover:text-violet-400",
+                          children: "Powens (Read-Only)"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("p", {
+                          className: "text-muted-foreground mt-1 text-sm",
+                          children: "Account, transaction, and balance synchronisation via Powens with tenant-owned credentials."
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-xl font-semibold",
+                    children: "Email"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "grid gap-4 md:grid-cols-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Link, {
+                        href: "/docs/integrations/postmark",
+                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
+                        children: [
+                          /* @__PURE__ */ jsxDEV("h4", {
+                            className: "font-bold transition-colors group-hover:text-violet-400",
+                            children: "Postmark"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("p", {
+                            className: "text-muted-foreground mt-1 text-sm",
+                            children: "Transactional email delivery with high deliverability"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Link, {
+                        href: "/docs/integrations/resend",
+                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
+                        children: [
+                          /* @__PURE__ */ jsxDEV("h4", {
+                            className: "font-bold transition-colors group-hover:text-violet-400",
+                            children: "Resend"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("p", {
+                            className: "text-muted-foreground mt-1 text-sm",
+                            children: "Modern email API for developers"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Link, {
+                        href: "/docs/integrations/gmail",
+                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
+                        children: [
+                          /* @__PURE__ */ jsxDEV("h4", {
+                            className: "font-bold transition-colors group-hover:text-violet-400",
+                            children: "Gmail API"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("p", {
+                            className: "text-muted-foreground mt-1 text-sm",
+                            children: "Inbound email processing and thread management"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-xl font-semibold",
+                    children: "Calendar & Scheduling"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "grid gap-4 md:grid-cols-2",
+                    children: /* @__PURE__ */ jsxDEV(Link, {
+                      href: "/docs/integrations/google-calendar",
+                      className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
+                      children: [
+                        /* @__PURE__ */ jsxDEV("h4", {
+                          className: "font-bold transition-colors group-hover:text-violet-400",
+                          children: "Google Calendar"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("p", {
+                          className: "text-muted-foreground mt-1 text-sm",
+                          children: "Event scheduling and calendar management"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-xl font-semibold",
+                    children: "AI & Machine Learning"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "grid gap-4 md:grid-cols-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Link, {
+                        href: "/docs/integrations/openai",
+                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
+                        children: [
+                          /* @__PURE__ */ jsxDEV("h4", {
+                            className: "font-bold transition-colors group-hover:text-violet-400",
+                            children: "OpenAI"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("p", {
+                            className: "text-muted-foreground mt-1 text-sm",
+                            children: "LLMs, embeddings, and Whisper speech-to-text"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Link, {
+                        href: "/docs/integrations/elevenlabs",
+                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
+                        children: [
+                          /* @__PURE__ */ jsxDEV("h4", {
+                            className: "font-bold transition-colors group-hover:text-violet-400",
+                            children: "ElevenLabs"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("p", {
+                            className: "text-muted-foreground mt-1 text-sm",
+                            children: "Text-to-speech and voice synthesis"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Link, {
+                        href: "/docs/integrations/qdrant",
+                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
+                        children: [
+                          /* @__PURE__ */ jsxDEV("h4", {
+                            className: "font-bold transition-colors group-hover:text-violet-400",
+                            children: "Qdrant"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("p", {
+                            className: "text-muted-foreground mt-1 text-sm",
+                            children: "Vector database for semantic search and RAG"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-xl font-semibold",
+                    children: "Storage"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "grid gap-4 md:grid-cols-2",
+                    children: /* @__PURE__ */ jsxDEV(Link, {
+                      href: "/docs/integrations/s3",
+                      className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
+                      children: [
+                        /* @__PURE__ */ jsxDEV("h4", {
+                          className: "font-bold transition-colors group-hover:text-violet-400",
+                          children: "S3-Compatible Storage"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("p", {
+                          className: "text-muted-foreground mt-1 text-sm",
+                          children: "Object storage (AWS S3, Scaleway, MinIO, etc.)"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-xl font-semibold",
+                    children: "SMS & Messaging"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "grid gap-4 md:grid-cols-2",
+                    children: /* @__PURE__ */ jsxDEV(Link, {
+                      href: "/docs/integrations/twilio",
+                      className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
+                      children: [
+                        /* @__PURE__ */ jsxDEV("h4", {
+                          className: "font-bold transition-colors group-hover:text-violet-400",
+                          children: "Twilio"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("p", {
+                          className: "text-muted-foreground mt-1 text-sm",
+                          children: "SMS notifications and messaging"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, 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: "How integrations work"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: [
+              "ContractSpec integrations are implemented as",
+              " ",
+              /* @__PURE__ */ jsxDEV(Link, {
+                href: "/docs/specs/capabilities",
+                className: "text-violet-400 hover:text-violet-300",
+                children: "capability providers"
+              }, undefined, false, undefined, this),
+              ". This means:"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("strong", {
+                    children: "Type safety"
+                  }, undefined, false, undefined, this),
+                  " – All API calls are type-checked by TypeScript and validated at runtime via Zod"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("strong", {
+                    children: "Policy enforcement"
+                  }, undefined, false, undefined, this),
+                  " – Access to external services is governed by your",
+                  " ",
+                  /* @__PURE__ */ jsxDEV(Link, {
+                    href: "/docs/specs/policy",
+                    className: "text-violet-400 hover:text-violet-300",
+                    children: "PolicySpecs"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("strong", {
+                    children: "Audit logging"
+                  }, undefined, false, undefined, this),
+                  " – All integration calls are automatically logged"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("strong", {
+                    children: "Error handling"
+                  }, undefined, false, undefined, this),
+                  " – Built-in retries and fallback strategies"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("strong", {
+                    children: "Environment-based config"
+                  }, undefined, false, undefined, this),
+                  " – API keys and secrets are managed through environment variables"
+                ]
+              }, 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: "Secret management"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "Secrets are resolved through a layered secret provider manager. It checks lightweight environment overrides first, then falls back to a managed vault (Google Cloud Secret Manager) for production."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "grid gap-4 md:grid-cols-2",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "card-subtle p-4",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-xl font-semibold",
+                    children: "Environment variables"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "text-muted-foreground mt-2 text-sm",
+                    children: [
+                      "Perfect for local development and secure staging overrides. Use the ",
+                      /* @__PURE__ */ jsxDEV("code", {
+                        children: "env://"
+                      }, undefined, false, undefined, this),
+                      " scheme or append ",
+                      /* @__PURE__ */ jsxDEV("code", {
+                        children: "?env="
+                      }, undefined, false, undefined, this),
+                      " to another reference to map an explicit variable."
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "bg-background/60 border-border mt-3 overflow-auto rounded-lg border p-3 font-mono text-xs",
+                    children: /* @__PURE__ */ jsxDEV("pre", {
+                      className: "whitespace-pre-wrap",
+                      children: `# Override a production secret locally
+CONTRACTSPEC__SECRET__STRIPE=sk_test_123
+
+# Reference
+env://CONTRACTSPEC__SECRET__STRIPE`
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "card-subtle p-4",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-xl font-semibold",
+                    children: "GCP Secret Manager"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "text-muted-foreground mt-2 text-sm",
+                    children: [
+                      "Used in production to store versioned credentials with rotation support. References follow the",
+                      " ",
+                      /* @__PURE__ */ jsxDEV("code", {
+                        children: "gcp://projects/.../secrets/.../versions/latest"
+                      }, undefined, false, undefined, this),
+                      " ",
+                      "format."
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "bg-background/60 border-border mt-3 overflow-auto rounded-lg border p-3 font-mono text-xs",
+                    children: /* @__PURE__ */ jsxDEV("pre", {
+                      className: "whitespace-pre-wrap",
+                      children: `# Production reference
+gcp://projects/tenant/secrets/stripe-secret-key/versions/latest`
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-sm",
+            children: "The secret manager chooses the first provider that can resolve a reference, so local environment variables can override the managed vault without changing blueprints or tenant configs."
+          }, 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"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "Integrations are configured through environment variables and secret references. Here's a typical setup:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV("pre", {
+              children: `# .env
+STRIPE_SECRET_KEY=sk_test_...
+STRIPE_WEBHOOK_SECRET=whsec_...
+
+POSTMARK_API_TOKEN=...
+POSTMARK_FROM_EMAIL=noreply@example.com
+
+OPENAI_API_KEY=sk-...
+OPENAI_ORGANIZATION=org-...
+
+QDRANT_URL=https://...
+QDRANT_API_KEY=...
+
+S3_ENDPOINT=https://s3.fr-par.scw.cloud
+S3_ACCESS_KEY_ID=...
+S3_SECRET_ACCESS_KEY=...
+S3_BUCKET=my-bucket
+S3_REGION=fr-par
+
+# Secret references
+STRIPE_SECRET_REF=gcp://projects/tenant/secrets/stripe-secret-key/versions/latest
+STRIPE_SECRET_OVERRIDE=env://STRIPE_SECRET_KEY`
+            }, undefined, false, undefined, this)
+          }, 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: "Integration categories"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "ContractSpec supports the following integration categories:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV("pre", {
+              children: `type IntegrationCategory =
+  | "payments"        // Stripe, PayPal, etc.
+  | "email"           // Postmark, Resend, Gmail
+  | "calendar"        // Google Calendar, Outlook
+  | "sms"             // Twilio, MessageBird
+  | "ai-llm"          // OpenAI, Anthropic, Cohere
+  | "ai-voice"        // ElevenLabs, Google TTS
+  | "speech-to-text"  // OpenAI Whisper, Google STT
+  | "vector-db"       // Qdrant, Pinecone, Weaviate
+  | "storage"         // S3, GCS, Azure Blob
+  | "accounting"      // QuickBooks, Xero (coming soon)
+  | "crm"             // Salesforce, HubSpot (coming soon)
+  | "helpdesk"        // Zendesk, Intercom (coming soon)
+  | "custom";         // Your own integrations`
+            }, undefined, false, undefined, this)
+          }, 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: "Custom integrations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: [
+              "You can create custom integrations by implementing a capability provider. See the",
+              " ",
+              /* @__PURE__ */ jsxDEV(Link, {
+                href: "/docs/advanced/custom-providers",
+                className: "text-violet-400 hover:text-violet-300",
+                children: "Custom Providers"
+              }, undefined, false, undefined, this),
+              " ",
+              "guide for details."
+            ]
+          }, 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/integrations/stripe",
+          className: "btn-primary",
+          children: [
+            "Get Started with Stripe ",
+            /* @__PURE__ */ jsxDEV(ChevronRight, {
+              size: 16
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/integrations/IntegrationsCircuitBreakersPage.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function IntegrationsCircuitBreakersPage() {
+  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 Circuit Breakers"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground text-lg",
+            children: "External APIs are the most common source of instability. Wrap every integration call in a circuit breaker to protect your system."
+          }, 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: "Pattern"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            children: "Create a dedicated circuit breaker instance for each external service. This ensures that a failure in Stripe doesn't trigger the circuit breaker for Twilio."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("pre", {
+            className: "bg-muted rounded-lg border p-4 text-sm",
+            children: `// integrations/stripe.ts
+import { CircuitBreaker } from '@contractspec/lib.resilience/circuit-breaker';
+
+const stripeBreaker = new CircuitBreaker({
+  failureThreshold: 10,
+  resetTimeoutMs: 60000,
+});
+
+export async function createCharge(amount: number) {
+  return stripeBreaker.execute(() => stripe.charges.create({ amount }));
+}`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/integrations/IntegrationsElevenLabsPage.tsx
+import Link2 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight2 } from "lucide-react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function IntegrationsElevenLabsPage() {
+  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: "ElevenLabs"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground",
+            children: "ElevenLabs provides state-of-the-art text-to-speech and voice cloning technology. Create natural-sounding voiceovers, audiobooks, and voice assistants."
+          }, 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: "Setup"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV3("pre", {
+              children: `# .env
+ELEVENLABS_API_KEY=...`
+            }, undefined, false, 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: "Text-to-Speech"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV3("pre", {
+              children: `capabilityId: elevenlabs-tts
+provider:
+  type: elevenlabs
+  operation: textToSpeech
+
+inputs:
+  text:
+    type: string
+  voiceId:
+    type: string
+    default: "21m00Tcm4TlvDq8ikWAM"
+  modelId:
+    type: string
+    default: "eleven_monolingual_v1"
+
+outputs:
+  audioUrl:
+    type: string
+  audioData:
+    type: buffer`
+            }, undefined, false, 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: "Use cases"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Generate voiceovers for videos"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Create audio versions of articles"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Build voice assistants"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("li", {
+                children: "Produce audiobooks"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3(Link2, {
+            href: "/docs/integrations/openai",
+            className: "btn-ghost",
+            children: "Previous: OpenAI"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(Link2, {
+            href: "/docs/integrations/qdrant",
+            className: "btn-primary",
+            children: [
+              "Next: Qdrant ",
+              /* @__PURE__ */ jsxDEV3(ChevronRight2, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/integrations/IntegrationsGmailPage.tsx
+import Link3 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight3 } from "lucide-react";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function IntegrationsGmailPage() {
+  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: "Gmail API"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground",
+            children: "The Gmail API integration allows you to read inbound emails, manage threads, and build email-based workflows. Perfect for support tickets, email parsing, and automated responses."
+          }, 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: "Setup"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground",
+            children: "Configure OAuth 2.0 credentials in Google Cloud Console:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV4("pre", {
+              children: `# .env
+GOOGLE_CLIENT_ID=...
+GOOGLE_CLIENT_SECRET=...
+GOOGLE_REDIRECT_URI=https://your-app.com/auth/google/callback`
+            }, undefined, false, undefined, this)
+          }, 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: "Reading emails"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV4("pre", {
+              children: `capabilityId: gmail-list-messages
+provider:
+  type: gmail
+  operation: listMessages
+
+inputs:
+  query:
+    type: string
+    description: "Gmail search query"
+  maxResults:
+    type: number
+    default: 10
+
+outputs:
+  messages:
+    type: array
+    items:
+      type: object
+      properties:
+        id: string
+        threadId: string
+        snippet: string`
+            }, undefined, false, undefined, this)
+          }, 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: "Use cases"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Parse support emails and create tickets"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Extract attachments and process them"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Build email-to-task workflows"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("li", {
+                children: "Monitor specific email threads"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4(Link3, {
+            href: "/docs/integrations/resend",
+            className: "btn-ghost",
+            children: "Previous: Resend"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4(Link3, {
+            href: "/docs/integrations/google-calendar",
+            className: "btn-primary",
+            children: [
+              "Next: Google Calendar ",
+              /* @__PURE__ */ jsxDEV4(ChevronRight3, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/integrations/IntegrationsGoogleCalendarPage.tsx
+import Link4 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight4 } from "lucide-react";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function IntegrationsGoogleCalendarPage() {
+  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: "Google Calendar"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "Integrate Google Calendar to schedule appointments, manage availability, and sync events with your application."
+          }, 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: "Setup"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV5("pre", {
+              children: `# .env
+GOOGLE_CLIENT_ID=...
+GOOGLE_CLIENT_SECRET=...
+GOOGLE_CALENDAR_ID=primary`
+            }, undefined, false, 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: "Creating events"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV5("pre", {
+              children: `capabilityId: calendar-create-event
+provider:
+  type: google-calendar
+  operation: createEvent
+
+inputs:
+  summary:
+    type: string
+  description:
+    type: string
+    optional: true
+  startTime:
+    type: timestamp
+  endTime:
+    type: timestamp
+  attendees:
+    type: array
+    items:
+      type: string
+
+outputs:
+  eventId:
+    type: string
+  htmlLink:
+    type: string`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5(Link4, {
+            href: "/docs/integrations/gmail",
+            className: "btn-ghost",
+            children: "Previous: Gmail API"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(Link4, {
+            href: "/docs/integrations/openai",
+            className: "btn-primary",
+            children: [
+              "Next: OpenAI ",
+              /* @__PURE__ */ jsxDEV5(ChevronRight4, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/integrations/IntegrationsOpenAIPage.tsx
+import Link5 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight5 } from "lucide-react";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function IntegrationsOpenAIPage() {
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h1", {
+            className: "text-4xl font-bold",
+            children: "OpenAI"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            className: "text-muted-foreground",
+            children: "Integrate OpenAI's powerful AI models for chat completion, embeddings, and speech-to-text. Build intelligent features with GPT-4, generate embeddings for semantic search, and transcribe audio with Whisper."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "Setup"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV6("pre", {
+              children: `# .env
+OPENAI_API_KEY=sk-...
+OPENAI_ORGANIZATION=org-...`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "Chat completions"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV6("pre", {
+              children: `capabilityId: openai-chat
+provider:
+  type: openai
+  operation: chatCompletion
+
+inputs:
+  messages:
+    type: array
+    items:
+      type: object
+      properties:
+        role: string
+        content: string
+  model:
+    type: string
+    default: "gpt-4"
+  temperature:
+    type: number
+    default: 0.7
+    optional: true
+
+outputs:
+  content:
+    type: string
+  usage:
+    type: object`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "Embeddings"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV6("pre", {
+              children: `capabilityId: openai-embeddings
+provider:
+  type: openai
+  operation: createEmbedding
+
+inputs:
+  text:
+    type: string
+  model:
+    type: string
+    default: "text-embedding-3-small"
+
+outputs:
+  embedding:
+    type: array
+    items:
+      type: number`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "Whisper (Speech-to-Text)"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV6("pre", {
+              children: `capabilityId: openai-transcribe
+provider:
+  type: openai
+  operation: transcribe
+
+inputs:
+  audioFile:
+    type: file
+  language:
+    type: string
+    optional: true
+
+outputs:
+  text:
+    type: string
+  language:
+    type: string`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Use streaming for real-time chat responses"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Cache embeddings to reduce API costs"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Implement rate limiting to avoid quota issues"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Store conversation history for context"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Monitor token usage and costs"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6(Link5, {
+            href: "/docs/integrations/google-calendar",
+            className: "btn-ghost",
+            children: "Previous: Google Calendar"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6(Link5, {
+            href: "/docs/integrations/elevenlabs",
+            className: "btn-primary",
+            children: [
+              "Next: ElevenLabs ",
+              /* @__PURE__ */ jsxDEV6(ChevronRight5, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/integrations/IntegrationsPostmarkPage.tsx
+import Link6 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight6 } from "lucide-react";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+function IntegrationsPostmarkPage() {
+  return /* @__PURE__ */ jsxDEV7("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV7("h1", {
+            className: "text-4xl font-bold",
+            children: "Postmark"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("p", {
+            className: "text-muted-foreground",
+            children: "Postmark is a transactional email service with industry-leading deliverability. Use it to send order confirmations, password resets, notifications, and other critical emails."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV7("h2", {
+            className: "text-2xl font-bold",
+            children: "Setup"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("p", {
+            className: "text-muted-foreground",
+            children: "Add your Postmark credentials to your environment variables:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV7("pre", {
+              children: `# .env
+POSTMARK_API_TOKEN=...
+POSTMARK_FROM_EMAIL=noreply@example.com
+POSTMARK_FROM_NAME="Your App Name"`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("p", {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Get your API token from the",
+              " ",
+              /* @__PURE__ */ jsxDEV7("a", {
+                href: "https://account.postmarkapp.com/servers",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "text-violet-400 hover:text-violet-300",
+                children: "Postmark Dashboard"
+              }, undefined, false, undefined, this),
+              "."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV7("h2", {
+            className: "text-2xl font-bold",
+            children: "Sending emails"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV7("pre", {
+              children: `capabilityId: send-email
+provider:
+  type: postmark
+  operation: sendEmail
+
+inputs:
+  to:
+    type: string
+    description: "Recipient email address"
+  subject:
+    type: string
+  htmlBody:
+    type: string
+    optional: true
+  textBody:
+    type: string
+    optional: true
+  templateId:
+    type: string
+    optional: true
+  templateData:
+    type: object
+    optional: true
+
+outputs:
+  messageId:
+    type: string
+  submittedAt:
+    type: timestamp`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV7("h2", {
+            className: "text-2xl font-bold",
+            children: "Using templates"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("p", {
+            className: "text-muted-foreground",
+            children: "Postmark templates allow you to design emails in their dashboard and populate them with data:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV7("pre", {
+              children: `capabilityId: send-welcome-email
+provider:
+  type: postmark
+  operation: sendEmail
+
+inputs:
+  to:
+    type: string
+  userName:
+    type: string
+
+config:
+  templateId: "welcome-email"
+  templateData:
+    user_name: \${input.userName}
+    login_url: "https://app.example.com/login"`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV7("h2", {
+            className: "text-2xl font-bold",
+            children: "Webhooks"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("p", {
+            className: "text-muted-foreground",
+            children: "Postmark can notify your app about delivery, bounces, and opens:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV7("pre", {
+              children: `https://your-app.com/api/webhooks/postmark`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("p", {
+            className: "text-muted-foreground",
+            children: "ContractSpec automatically processes these webhook events:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV7("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV7("strong", {
+                    children: "Delivery"
+                  }, undefined, false, undefined, this),
+                  " – Email was successfully delivered"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV7("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV7("strong", {
+                    children: "Bounce"
+                  }, undefined, false, undefined, this),
+                  " – Email bounced (hard or soft)"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV7("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV7("strong", {
+                    children: "SpamComplaint"
+                  }, undefined, false, undefined, this),
+                  " – Recipient marked email as spam"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV7("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV7("strong", {
+                    children: "Open"
+                  }, undefined, false, undefined, this),
+                  " – Recipient opened the email"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV7("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV7("strong", {
+                    children: "Click"
+                  }, undefined, false, undefined, this),
+                  " – Recipient clicked a link"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV7("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV7("li", {
+                children: "Use templates for consistent branding"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7("li", {
+                children: "Always provide both HTML and plain text versions"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7("li", {
+                children: "Monitor bounce rates and remove invalid addresses"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7("li", {
+                children: "Use message streams to separate different email types"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7("li", {
+                children: "Test emails in the Postmark sandbox before going live"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7("li", {
+                children: "Set up DKIM and SPF records for your domain"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV7(Link6, {
+            href: "/docs/integrations/stripe",
+            className: "btn-ghost",
+            children: "Previous: Stripe"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7(Link6, {
+            href: "/docs/integrations/resend",
+            className: "btn-primary",
+            children: [
+              "Next: Resend ",
+              /* @__PURE__ */ jsxDEV7(ChevronRight6, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/integrations/IntegrationsPowensPage.tsx
+import Link7 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight7 } from "lucide-react";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+function IntegrationsPowensPage() {
+  return /* @__PURE__ */ jsxDEV8("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV8("h1", {
+            className: "text-4xl font-bold",
+            children: "Powens Open Banking"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("p", {
+            className: "text-muted-foreground",
+            children: "Powens provides read-only open banking connectivity for ContractSpec applications. The reference integration powers Pocket Family Office by synchronising household bank accounts, transactions, and balances while keeping all raw PII protected."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV8("h2", {
+            className: "text-2xl font-bold",
+            children: "Setup"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("p", {
+            className: "text-muted-foreground",
+            children: "Create a Powens BYOK project, then store the credentials in your secret manager. The ContractSpec integration expects the following fields:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV8("pre", {
+              children: `{
+  "clientId": "powens-client-id",
+  "clientSecret": "powens-client-secret",
+  "apiKey": "optional-api-key",
+  "webhookSecret": "optional-webhook-secret"
+}`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("p", {
+            className: "text-muted-foreground text-sm",
+            children: "Configure non-secret settings on the integration connection:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV8("pre", {
+              children: `environment: sandbox | production
+baseUrl?: https://api-sandbox.powens.com/v2
+region?: eu-west-1
+pollingIntervalMs?: 300000`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("p", {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "See the",
+              " ",
+              /* @__PURE__ */ jsxDEV8("a", {
+                href: "https://docs.powens.com/documentation/integration-guides/quick-start/api-overview",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "text-violet-400 hover:text-violet-300",
+                children: "Powens API documentation"
+              }, undefined, false, undefined, this),
+              " ",
+              "for information on generating credentials and managing BYOK projects."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV8("h2", {
+            className: "text-2xl font-bold",
+            children: "Capabilities"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV8("pre", {
+              children: `capabilityId: openbanking.accounts.read
+provider:
+  type: openbanking.powens
+  operation: listAccounts
+
+outputs:
+  accounts:
+    type: BankAccountRecord[]
+    description: "Canonical bank account metadata (institution, currency, balances)"
+
+---
+
+capabilityId: openbanking.transactions.read
+provider:
+  type: openbanking.powens
+  operation: listTransactions
+
+inputs:
+  accountId:
+    type: string
+  from?:
+    type: string
+    description: "ISO timestamp lower bound"
+  to?:
+    type: string
+
+outputs:
+  transactions:
+    type: BankTransactionRecord[]
+    description: "Canonical transaction ledger entries"
+
+---
+
+capabilityId: openbanking.balances.read
+provider:
+  type: openbanking.powens
+  operation: getBalances
+
+inputs:
+  accountId:
+    type: string
+  balanceTypes?:
+    type: string[]
+
+outputs:
+  balances:
+    type: AccountBalanceRecord[]
+    description: "Current/available balances with timestamps"`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV8("h2", {
+            className: "text-2xl font-bold",
+            children: "Primary workflows"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV8("h3", {
+                className: "text-lg font-semibold",
+                children: "Account sync"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "The workflow",
+                  " ",
+                  /* @__PURE__ */ jsxDEV8("code", {
+                    className: "bg-background/50 rounded px-2 py-1",
+                    children: "pfo.workflow.sync-openbanking-accounts"
+                  }, undefined, false, undefined, this),
+                  " ",
+                  "refreshes account metadata, then surfaces canonical records to other automations."
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV8("h3", {
+                className: "text-lg font-semibold",
+                children: "Transaction sync"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("p", {
+                className: "text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsxDEV8("code", {
+                    className: "bg-background/50 rounded px-2 py-1",
+                    children: "pfo.workflow.sync-openbanking-transactions"
+                  }, undefined, false, undefined, this),
+                  " ",
+                  "ingests incremental transactions for each linked account and stores them in the canonical ledger."
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV8("h3", {
+                className: "text-lg font-semibold",
+                children: "Balance refresh"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("p", {
+                className: "text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsxDEV8("code", {
+                    className: "bg-background/50 rounded px-2 py-1",
+                    children: "pfo.workflow.refresh-openbanking-balances"
+                  }, undefined, false, undefined, this),
+                  " ",
+                  "retrieves current and available balances to power dashboards and anomaly detection."
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV8("h3", {
+                className: "text-lg font-semibold",
+                children: "Derived financial overview"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("p", {
+                className: "text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsxDEV8("code", {
+                    className: "bg-background/50 rounded px-2 py-1",
+                    children: "pfo.workflow.generate-openbanking-overview"
+                  }, undefined, false, undefined, this),
+                  " ",
+                  "aggregates balances, category breakdowns, and cashflow trends into the ",
+                  /* @__PURE__ */ jsxDEV8("code", {
+                    children: "knowledge.financial-overview"
+                  }, undefined, false, undefined, this),
+                  " space. Only derived summaries are exposed to LLMs."
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV8("h2", {
+            className: "text-2xl font-bold",
+            children: "Telemetry & guardrails"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV8("li", {
+                children: [
+                  "Telemetry events such as",
+                  " ",
+                  /* @__PURE__ */ jsxDEV8("code", {
+                    className: "bg-background/50 rounded px-2 py-1",
+                    children: "openbanking.accounts.synced"
+                  }, undefined, false, undefined, this),
+                  " ",
+                  "and",
+                  " ",
+                  /* @__PURE__ */ jsxDEV8("code", {
+                    className: "bg-background/50 rounded px-2 py-1",
+                    children: "openbanking.transactions.synced"
+                  }, undefined, false, undefined, this),
+                  " ",
+                  "are emitted automatically with tenant, slot, and config metadata."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV8("li", {
+                children: [
+                  "Guard helpers ensure the",
+                  " ",
+                  /* @__PURE__ */ jsxDEV8("code", {
+                    className: "bg-background/50 rounded px-2 py-1",
+                    children: "primaryOpenBanking"
+                  }, undefined, false, undefined, this),
+                  " ",
+                  "slot is bound and healthy before workflows execute."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV8("li", {
+                children: [
+                  "PII fields (IBAN, counterparty names, descriptions) are redacted via",
+                  " ",
+                  /* @__PURE__ */ jsxDEV8("code", {
+                    className: "bg-background/50 rounded px-2 py-1",
+                    children: "redactOpenBankingTelemetryPayload"
+                  }, undefined, false, undefined, this),
+                  " ",
+                  "before logging or sending telemetry."
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV8("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV8("li", {
+                children: "Use BYOK credentials per tenant to avoid cross-tenant exposure."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("li", {
+                children: "Store only canonical entities (BankAccountRecord, BankTransactionRecord). Never persist raw Powens payloads or customer PII in logs."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("li", {
+                children: "Run the transaction sync on a schedule appropriate for banking SLAs (e.g. every 15 minutes for cashflow dashboards)."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("li", {
+                children: "Pair ledger updates with derived summaries to feed the knowledge layer instead of exposing raw transactions to agents."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("li", {
+                children: [
+                  "Monitor telemetry for",
+                  " ",
+                  /* @__PURE__ */ jsxDEV8("code", {
+                    className: "bg-background/50 rounded px-2 py-1",
+                    children: "openbanking.*.sync_failed"
+                  }, undefined, false, undefined, this),
+                  " ",
+                  "events to detect credential issues early."
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV8(Link7, {
+            href: "/docs/integrations",
+            className: "btn-ghost",
+            children: "Back to Integrations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8(Link7, {
+            href: "/docs/integrations/stripe",
+            className: "btn-primary",
+            children: [
+              "Next: Stripe ",
+              /* @__PURE__ */ jsxDEV8(ChevronRight7, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/integrations/IntegrationsQdrantPage.tsx
+import Link8 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight8 } from "lucide-react";
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+function IntegrationsQdrantPage() {
+  return /* @__PURE__ */ jsxDEV9("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV9("h1", {
+            className: "text-4xl font-bold",
+            children: "Qdrant"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("p", {
+            className: "text-muted-foreground",
+            children: "Qdrant is a high-performance vector database for semantic search, recommendations, and RAG (Retrieval-Augmented Generation) applications."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV9("h2", {
+            className: "text-2xl font-bold",
+            children: "Setup"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV9("pre", {
+              children: `# .env
+QDRANT_URL=https://...
+QDRANT_API_KEY=...
+QDRANT_COLLECTION=documents`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV9("h2", {
+            className: "text-2xl font-bold",
+            children: "Storing vectors"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV9("pre", {
+              children: `capabilityId: qdrant-upsert
+provider:
+  type: qdrant
+  operation: upsert
+
+inputs:
+  collection:
+    type: string
+  points:
+    type: array
+    items:
+      type: object
+      properties:
+        id: string
+        vector: array
+        payload: object
+
+outputs:
+  status:
+    type: string`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV9("h2", {
+            className: "text-2xl font-bold",
+            children: "Semantic search"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV9("pre", {
+              children: `capabilityId: qdrant-search
+provider:
+  type: qdrant
+  operation: search
+
+inputs:
+  collection:
+    type: string
+  vector:
+    type: array
+    items:
+      type: number
+  limit:
+    type: number
+    default: 10
+
+outputs:
+  results:
+    type: array
+    items:
+      type: object
+      properties:
+        id: string
+        score: number
+        payload: object`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV9("h2", {
+            className: "text-2xl font-bold",
+            children: "RAG workflow example"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV9("pre", {
+              children: `workflowId: rag-query
+version: '1.0.0'.0.0
+
+steps:
+  - id: generate-embedding
+    capability: openai-embeddings
+    inputs:
+      text: \${input.query}
+
+  - id: search-documents
+    capability: qdrant-search
+    inputs:
+      collection: "documents"
+      vector: \${steps.generate-embedding.output.embedding}
+      limit: 5
+
+  - id: generate-answer
+    capability: openai-chat
+    inputs:
+      messages:
+        - role: "system"
+          content: "Answer based on the context provided"
+        - role: "user"
+          content: |
+            Context: \${steps.search-documents.output.results}
+            Question: \${input.query}`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV9(Link8, {
+            href: "/docs/integrations/elevenlabs",
+            className: "btn-ghost",
+            children: "Previous: ElevenLabs"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Link8, {
+            href: "/docs/integrations/s3",
+            className: "btn-primary",
+            children: [
+              "Next: S3 Storage ",
+              /* @__PURE__ */ jsxDEV9(ChevronRight8, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/integrations/IntegrationsResendPage.tsx
+import Link9 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight9 } from "lucide-react";
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+function IntegrationsResendPage() {
+  return /* @__PURE__ */ jsxDEV10("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV10("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV10("h1", {
+            className: "text-4xl font-bold",
+            children: "Resend"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV10("p", {
+            className: "text-muted-foreground",
+            children: "Resend is a modern email API built for developers. It provides a simple, reliable way to send transactional emails with React Email templates."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV10("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV10("h2", {
+            className: "text-2xl font-bold",
+            children: "Setup"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV10("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV10("pre", {
+              children: `# .env
+RESEND_API_KEY=re_...
+RESEND_FROM_EMAIL=onboarding@resend.dev`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV10("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV10("h2", {
+            className: "text-2xl font-bold",
+            children: "Sending emails"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV10("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV10("pre", {
+              children: `capabilityId: resend-send-email
+provider:
+  type: resend
+  operation: sendEmail
+
+inputs:
+  to:
+    type: string
+  subject:
+    type: string
+  html:
+    type: string
+  text:
+    type: string
+    optional: true
+  replyTo:
+    type: string
+    optional: true
+
+outputs:
+  id:
+    type: string`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV10("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV10("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV10("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV10("li", {
+                children: "Use React Email for type-safe templates"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("li", {
+                children: "Verify your domain for better deliverability"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("li", {
+                children: "Monitor email analytics in the Resend dashboard"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV10("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV10(Link9, {
+            href: "/docs/integrations/postmark",
+            className: "btn-ghost",
+            children: "Previous: Postmark"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV10(Link9, {
+            href: "/docs/integrations/gmail",
+            className: "btn-primary",
+            children: [
+              "Next: Gmail API ",
+              /* @__PURE__ */ jsxDEV10(ChevronRight9, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/integrations/IntegrationsS3Page.tsx
+import Link10 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight10 } from "lucide-react";
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+function IntegrationsS3Page() {
+  return /* @__PURE__ */ jsxDEV11("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV11("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV11("h1", {
+            className: "text-4xl font-bold",
+            children: "S3-Compatible Storage"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11("p", {
+            className: "text-muted-foreground",
+            children: "Store files, images, and documents using any S3-compatible object storage service including AWS S3, Scaleway Object Storage, MinIO, DigitalOcean Spaces, and more."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV11("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV11("h2", {
+            className: "text-2xl font-bold",
+            children: "Setup"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV11("pre", {
+              children: `# .env
+S3_ENDPOINT=https://s3.fr-par.scw.cloud
+S3_ACCESS_KEY_ID=...
+S3_SECRET_ACCESS_KEY=...
+S3_BUCKET=my-bucket
+S3_REGION=fr-par`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV11("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV11("h2", {
+            className: "text-2xl font-bold",
+            children: "Uploading files"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV11("pre", {
+              children: `capabilityId: s3-upload
+provider:
+  type: s3
+  operation: upload
+
+inputs:
+  key:
+    type: string
+    description: "File path in bucket"
+  file:
+    type: file
+  contentType:
+    type: string
+    optional: true
+  metadata:
+    type: object
+    optional: true
+
+outputs:
+  url:
+    type: string
+  etag:
+    type: string`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV11("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV11("h2", {
+            className: "text-2xl font-bold",
+            children: "Generating presigned URLs"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV11("pre", {
+              children: `capabilityId: s3-presigned-url
+provider:
+  type: s3
+  operation: getPresignedUrl
+
+inputs:
+  key:
+    type: string
+  expiresIn:
+    type: number
+    default: 3600
+    description: "Expiration in seconds"
+
+outputs:
+  url:
+    type: string`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV11("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV11("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV11("li", {
+                children: "Use presigned URLs for secure, temporary access"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("li", {
+                children: "Set appropriate CORS policies for browser uploads"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("li", {
+                children: "Enable versioning for important files"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("li", {
+                children: "Use lifecycle policies to archive old files"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("li", {
+                children: "Organize files with a clear key structure"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV11("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV11(Link10, {
+            href: "/docs/integrations/qdrant",
+            className: "btn-ghost",
+            children: "Previous: Qdrant"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11(Link10, {
+            href: "/docs/integrations/twilio",
+            className: "btn-primary",
+            children: [
+              "Next: Twilio ",
+              /* @__PURE__ */ jsxDEV11(ChevronRight10, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/integrations/IntegrationsSpecModelPage.tsx
+import Link11 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight11 } from "lucide-react";
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
+function IntegrationsSpecModelPage() {
+  return /* @__PURE__ */ jsxDEV12("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV12("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV12("h1", {
+            className: "text-4xl font-bold",
+            children: "Integration Spec Model"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12("p", {
+            className: "text-muted-foreground",
+            children: "Integrations in ContractSpec are defined through typed specifications that declare capabilities, configuration requirements, and connection details. This page covers IntegrationSpec and IntegrationConnection."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV12("h2", {
+            className: "text-2xl font-bold",
+            children: "IntegrationSpec"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12("p", {
+            className: "text-muted-foreground",
+            children: [
+              "The ",
+              /* @__PURE__ */ jsxDEV12("strong", {
+                children: "IntegrationSpec"
+              }, undefined, false, undefined, this),
+              " is a global definition of an integration provider. It declares what the integration provides and what it requires."
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV12("pre", {
+              children: `type IntegrationSpec = {
+  id: string;
+  label: string;
+  description: string;
+  category: IntegrationCategory;
+  
+  // Capabilities this integration provides
+  providesCapabilities: {
+    capabilityId: string;
+    operation: string;
+    description: string;
+  }[];
+  
+  // Dependencies
+  requirements: {
+    capabilities?: string[];  // e.g., ["billing.core", "auth.session"]
+    minVersion?: string;
+  };
+  
+  // Configuration schema (non-secret)
+  configSchema: {
+    [key: string]: {
+      type: string;
+      description: string;
+      required?: boolean;
+      default?: unknown;
+    };
+  };
+  
+  // Secret schema (for keys, tokens)
+  secretSchema: {
+    [key: string]: {
+      type: string;
+      description: string;
+      required: boolean;
+    };
+  };
+  
+  // Webhook support
+  webhooks?: {
+    supported: boolean;
+    events: string[];
+    signatureHeader?: string;
+  };
+  
+  // Documentation
+  docsUrl?: string;
+  setupGuideUrl?: string;
+  
+  // Metadata
+  version: string;
+  createdAt: string;
+  updatedAt: string;
+};`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV12("h2", {
+            className: "text-2xl font-bold",
+            children: "Example: Stripe IntegrationSpec"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV12("pre", {
+              children: `{
+  id: "stripe",
+  label: "Stripe",
+  description: "Payment processing and subscription management",
+  category: "payments",
+  
+  providesCapabilities: [
+    {
+      capabilityId: "payments.createPaymentIntent",
+      operation: "createPaymentIntent",
+      description: "Create a payment intent for checkout"
+    },
+    {
+      capabilityId: "payments.createSubscription",
+      operation: "createSubscription",
+      description: "Create a recurring subscription"
+    },
+    {
+      capabilityId: "payments.refund",
+      operation: "refund",
+      description: "Refund a payment"
+    }
+  ],
+  
+  requirements: {
+    capabilities: ["billing.core"],
+    minVersion: "1.0.0"
+  },
+  
+  configSchema: {
+    webhookUrl: {
+      type: "string",
+      description: "URL to receive Stripe webhooks",
+      required: false
+    }
+  },
+  
+  secretSchema: {
+    apiKey: {
+      type: "string",
+      description: "Stripe secret API key (sk_...)",
+      required: true
+    },
+    webhookSecret: {
+      type: "string",
+      description: "Webhook signing secret (whsec_...)",
+      required: false
+    }
+  },
+  
+  webhooks: {
+    supported: true,
+    events: [
+      "payment_intent.succeeded",
+      "payment_intent.payment_failed",
+      "customer.subscription.created",
+      "customer.subscription.updated",
+      "customer.subscription.deleted"
+    ],
+    signatureHeader: "stripe-signature"
+  },
+  
+  docsUrl: "https://docs.contractspec.com/integrations/stripe",
+  setupGuideUrl: "https://stripe.com/docs/keys",
+  version: "1.0.0"
+}`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV12("h2", {
+            className: "text-2xl font-bold",
+            children: "IntegrationConnection"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12("p", {
+            className: "text-muted-foreground",
+            children: [
+              "An ",
+              /* @__PURE__ */ jsxDEV12("strong", {
+                children: "IntegrationConnection"
+              }, undefined, false, undefined, this),
+              " is a per-tenant instance of an integration with configured credentials and environment settings."
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV12("pre", {
+              children: `type IntegrationConnection = {
+  id: string;
+  tenantId: string;
+  integrationId: string;
+  
+  // Environment
+  environment: "sandbox" | "production";
+  
+  // Configuration (non-secret)
+  config: Record<string, unknown>;
+  
+  // Secret reference (encrypted, never exposed)
+  secretRef: string;
+  
+  // Status
+  status: "connected" | "disconnected" | "error";
+  lastHealthCheck?: string;
+  lastHealthCheckStatus?: "success" | "failure";
+  lastErrorMessage?: string;
+  
+  // Metadata
+  createdAt: string;
+  updatedAt: string;
+  createdBy: string;
+};`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV12("h2", {
+            className: "text-2xl font-bold",
+            children: "Example: Stripe IntegrationConnection"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV12("pre", {
+              children: `// Production connection
+{
+  id: "conn_stripe_acme_prod",
+  tenantId: "acme-corp",
+  integrationId: "stripe",
+  environment: "production",
+  config: {
+    webhookUrl: "https://acme.app/webhooks/stripe"
+  },
+  secretRef: "secret_stripe_acme_prod_v1",
+  status: "connected",
+  lastHealthCheck: "2025-01-15T10:30:00Z",
+  lastHealthCheckStatus: "success",
+  createdAt: "2025-01-01T00:00:00Z",
+  updatedAt: "2025-01-15T10:30:00Z",
+  createdBy: "admin@acme.com"
+}
+
+// Sandbox connection
+{
+  id: "conn_stripe_acme_test",
+  tenantId: "acme-corp",
+  integrationId: "stripe",
+  environment: "sandbox",
+  config: {
+    webhookUrl: "https://sandbox.acme.app/webhooks/stripe"
+  },
+  secretRef: "secret_stripe_acme_test_v1",
+  status: "connected",
+  lastHealthCheck: "2025-01-15T10:25:00Z",
+  lastHealthCheckStatus: "success",
+  createdAt: "2025-01-01T00:00:00Z",
+  updatedAt: "2025-01-15T10:25:00Z",
+  createdBy: "dev@acme.com"
+}`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV12("h2", {
+            className: "text-2xl font-bold",
+            children: "Health checks"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12("p", {
+            className: "text-muted-foreground",
+            children: "IntegrationConnections are periodically health-checked to ensure they remain valid:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV12("strong", {
+                    children: "API key validation"
+                  }, undefined, false, undefined, this),
+                  " - Test that credentials are still valid"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV12("strong", {
+                    children: "Connectivity check"
+                  }, undefined, false, undefined, this),
+                  " - Verify network access to the provider"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV12("strong", {
+                    children: "Permission verification"
+                  }, undefined, false, undefined, this),
+                  " - Ensure required scopes are granted"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV12("strong", {
+                    children: "Webhook validation"
+                  }, undefined, false, undefined, this),
+                  " - Test webhook endpoint reachability"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("p", {
+            className: "text-muted-foreground",
+            children: 'Failed health checks update the connection status to "error" and trigger alerts.'
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV12("h2", {
+            className: "text-2xl font-bold",
+            children: "Secret management"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12("p", {
+            className: "text-muted-foreground",
+            children: "Secrets (API keys, tokens) are never stored in plaintext:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12("ol", {
+            className: "text-muted-foreground list-inside list-decimal space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: "User provides secrets through secure UI or API"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: "Secrets are encrypted using tenant-specific keys"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: "Encrypted secrets are stored in secure vault (e.g., AWS Secrets Manager)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: "IntegrationConnection stores only a reference (secretRef)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: "At runtime, secrets are decrypted on-demand and never logged"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV12("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: "Always maintain separate sandbox and production connections"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: "Use descriptive connection IDs that include tenant and environment"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: "Monitor health check status and set up alerts for failures"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: "Rotate secrets regularly and update secretRef accordingly"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: "Document the purpose and ownership of each connection"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12("li", {
+                children: "Test connections in sandbox before enabling in production"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV12(Link11, {
+            href: "/docs/integrations",
+            className: "btn-ghost",
+            children: "Back to Integrations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12(Link11, {
+            href: "/docs/architecture/integration-binding",
+            className: "btn-primary",
+            children: [
+              "Integration Binding ",
+              /* @__PURE__ */ jsxDEV12(ChevronRight11, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/integrations/IntegrationsStripePage.tsx
+import Link12 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight12 } from "lucide-react";
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+function IntegrationsStripePage() {
+  return /* @__PURE__ */ jsxDEV13("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV13("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV13("h1", {
+            className: "text-4xl font-bold",
+            children: "Stripe"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("p", {
+            className: "text-muted-foreground",
+            children: "The Stripe integration enables payment processing, subscription management, and invoicing in your ContractSpec applications. All Stripe operations are type-safe, policy-enforced, and automatically logged."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV13("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV13("h2", {
+            className: "text-2xl font-bold",
+            children: "Setup"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("p", {
+            className: "text-muted-foreground",
+            children: "Add your Stripe credentials to your environment variables:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV13("pre", {
+              children: `# .env
+STRIPE_SECRET_KEY=sk_test_...
+STRIPE_PUBLISHABLE_KEY=pk_test_...
+STRIPE_WEBHOOK_SECRET=whsec_...`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("p", {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Get your API keys from the",
+              " ",
+              /* @__PURE__ */ jsxDEV13("a", {
+                href: "https://dashboard.stripe.com/apikeys",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "text-violet-400 hover:text-violet-300",
+                children: "Stripe Dashboard"
+              }, undefined, false, undefined, this),
+              "."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV13("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV13("h2", {
+            className: "text-2xl font-bold",
+            children: "Available capabilities"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV13("h3", {
+                className: "text-lg font-semibold",
+                children: "Payment Intents"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("div", {
+                className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+                children: /* @__PURE__ */ jsxDEV13("pre", {
+                  children: `capabilityId: stripe-create-payment-intent
+provider:
+  type: stripe
+  operation: createPaymentIntent
+
+inputs:
+  amount:
+    type: number
+    description: "Amount in cents"
+  currency:
+    type: string
+    default: "usd"
+  customerId:
+    type: string
+    optional: true
+  metadata:
+    type: object
+    optional: true
+
+outputs:
+  paymentIntentId:
+    type: string
+  clientSecret:
+    type: string
+  status:
+    type: string`
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV13("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV13("h3", {
+                className: "text-lg font-semibold",
+                children: "Customers"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("div", {
+                className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+                children: /* @__PURE__ */ jsxDEV13("pre", {
+                  children: `capabilityId: stripe-create-customer
+provider:
+  type: stripe
+  operation: createCustomer
+
+inputs:
+  email:
+    type: string
+  name:
+    type: string
+    optional: true
+  metadata:
+    type: object
+    optional: true
+
+outputs:
+  customerId:
+    type: string
+  email:
+    type: string`
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV13("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV13("h3", {
+                className: "text-lg font-semibold",
+                children: "Subscriptions"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("div", {
+                className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+                children: /* @__PURE__ */ jsxDEV13("pre", {
+                  children: `capabilityId: stripe-create-subscription
+provider:
+  type: stripe
+  operation: createSubscription
+
+inputs:
+  customerId:
+    type: string
+  priceId:
+    type: string
+  trialDays:
+    type: number
+    optional: true
+
+outputs:
+  subscriptionId:
+    type: string
+  status:
+    type: string
+  currentPeriodEnd:
+    type: timestamp`
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV13("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV13("h2", {
+            className: "text-2xl font-bold",
+            children: "Webhooks"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("p", {
+            className: "text-muted-foreground",
+            children: "ContractSpec automatically handles Stripe webhooks. Configure your webhook endpoint in the Stripe Dashboard:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV13("pre", {
+              children: `https://your-app.com/api/webhooks/stripe`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("p", {
+            className: "text-muted-foreground",
+            children: "Subscribe to these events:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV13("li", {
+                children: /* @__PURE__ */ jsxDEV13("code", {
+                  className: "bg-background/50 rounded px-2 py-1",
+                  children: "payment_intent.succeeded"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("li", {
+                children: /* @__PURE__ */ jsxDEV13("code", {
+                  className: "bg-background/50 rounded px-2 py-1",
+                  children: "payment_intent.payment_failed"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("li", {
+                children: /* @__PURE__ */ jsxDEV13("code", {
+                  className: "bg-background/50 rounded px-2 py-1",
+                  children: "customer.subscription.created"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("li", {
+                children: /* @__PURE__ */ jsxDEV13("code", {
+                  className: "bg-background/50 rounded px-2 py-1",
+                  children: "customer.subscription.updated"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("li", {
+                children: /* @__PURE__ */ jsxDEV13("code", {
+                  className: "bg-background/50 rounded px-2 py-1",
+                  children: "customer.subscription.deleted"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV13("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV13("h2", {
+            className: "text-2xl font-bold",
+            children: "Example workflow"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("p", {
+            className: "text-muted-foreground",
+            children: "Here's a complete payment workflow using Stripe:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV13("pre", {
+              children: `workflowId: process-payment
+version: '1.0.0'.0.0
+
+steps:
+  - id: create-customer
+    capability: stripe-create-customer
+    inputs:
+      email: \${input.customerEmail}
+      name: \${input.customerName}
+    onSuccess: create-payment-intent
+    onFailure: notify-error
+
+  - id: create-payment-intent
+    capability: stripe-create-payment-intent
+    inputs:
+      amount: \${input.amount}
+      currency: "usd"
+      customerId: \${steps.create-customer.output.customerId}
+    onSuccess: send-payment-link
+    onFailure: notify-error
+
+  - id: send-payment-link
+    capability: send-email
+    inputs:
+      to: \${input.customerEmail}
+      template: "payment-link"
+      data:
+        clientSecret: \${steps.create-payment-intent.output.clientSecret}
+        amount: \${input.amount}
+
+  - id: notify-error
+    capability: send-email
+    inputs:
+      to: "admin@example.com"
+      template: "payment-error"
+      data:
+        error: \${error.message}`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV13("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV13("h2", {
+            className: "text-2xl font-bold",
+            children: "Testing"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("p", {
+            className: "text-muted-foreground",
+            children: "Use Stripe's test cards for development:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("div", {
+            className: "border-border/50 overflow-x-auto rounded-lg border",
+            children: /* @__PURE__ */ jsxDEV13("table", {
+              className: "w-full text-left text-sm",
+              children: [
+                /* @__PURE__ */ jsxDEV13("thead", {
+                  className: "bg-card/50",
+                  children: /* @__PURE__ */ jsxDEV13("tr", {
+                    className: "border-border/50 border-b",
+                    children: [
+                      /* @__PURE__ */ jsxDEV13("th", {
+                        className: "px-4 py-3 font-semibold",
+                        children: "Card Number"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV13("th", {
+                        className: "px-4 py-3 font-semibold",
+                        children: "Scenario"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV13("tbody", {
+                  className: "divide-border/50 divide-y",
+                  children: [
+                    /* @__PURE__ */ jsxDEV13("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV13("td", {
+                          className: "px-4 py-3 font-mono",
+                          children: "4242 4242 4242 4242"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV13("td", {
+                          className: "px-4 py-3",
+                          children: "Successful payment"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV13("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV13("td", {
+                          className: "px-4 py-3 font-mono",
+                          children: "4000 0000 0000 9995"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV13("td", {
+                          className: "px-4 py-3",
+                          children: "Insufficient funds"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV13("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV13("td", {
+                          className: "px-4 py-3 font-mono",
+                          children: "4000 0000 0000 0002"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV13("td", {
+                          className: "px-4 py-3",
+                          children: "Card declined"
+                        }, 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__ */ jsxDEV13("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV13("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV13("li", {
+                children: "Always use test mode during development"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("li", {
+                children: "Verify webhook signatures to prevent fraud"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("li", {
+                children: "Handle idempotency for payment operations"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("li", {
+                children: "Store customer IDs for recurring payments"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("li", {
+                children: "Use metadata to link Stripe objects to your application records"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("li", {
+                children: "Monitor failed payments and retry logic"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV13("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV13(Link12, {
+            href: "/docs/integrations",
+            className: "btn-ghost",
+            children: "Back to Integrations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13(Link12, {
+            href: "/docs/integrations/postmark",
+            className: "btn-primary",
+            children: [
+              "Next: Postmark ",
+              /* @__PURE__ */ jsxDEV13(ChevronRight12, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/integrations/IntegrationsTwilioPage.tsx
+import Link13 from "@contractspec/lib.ui-link";
+import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+function IntegrationsTwilioPage() {
+  return /* @__PURE__ */ jsxDEV14("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV14("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV14("h1", {
+            className: "text-4xl font-bold",
+            children: "Twilio"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV14("p", {
+            className: "text-muted-foreground",
+            children: "Send SMS notifications, alerts, and two-factor authentication codes using Twilio's reliable messaging platform."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV14("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV14("h2", {
+            className: "text-2xl font-bold",
+            children: "Setup"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV14("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV14("pre", {
+              children: `# .env
+TWILIO_ACCOUNT_SID=...
+TWILIO_AUTH_TOKEN=...
+TWILIO_PHONE_NUMBER=+1234567890`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV14("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV14("h2", {
+            className: "text-2xl font-bold",
+            children: "Sending SMS"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV14("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV14("pre", {
+              children: `capabilityId: twilio-send-sms
+provider:
+  type: twilio
+  operation: sendSMS
+
+inputs:
+  to:
+    type: string
+    description: "Phone number in E.164 format"
+  body:
+    type: string
+    description: "Message content (max 1600 chars)"
+
+outputs:
+  messageSid:
+    type: string
+  status:
+    type: string`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV14("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV14("h2", {
+            className: "text-2xl font-bold",
+            children: "Use cases"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV14("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV14("li", {
+                children: "Order confirmations and shipping updates"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV14("li", {
+                children: "Two-factor authentication codes"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV14("li", {
+                children: "Appointment reminders"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV14("li", {
+                children: "Alert notifications"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV14("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV14("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV14("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV14("li", {
+                children: "Always use E.164 format for phone numbers (+1234567890)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV14("li", {
+                children: "Keep messages under 160 characters to avoid splitting"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV14("li", {
+                children: "Implement rate limiting to prevent spam"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV14("li", {
+                children: "Handle delivery failures gracefully"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV14("li", {
+                children: "Respect opt-out requests"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV14("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV14(Link13, {
+            href: "/docs/integrations/s3",
+            className: "btn-ghost",
+            children: "Previous: S3 Storage"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV14(Link13, {
+            href: "/docs/integrations",
+            className: "btn-primary",
+            children: "Back to Integrations"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  IntegrationsTwilioPage,
+  IntegrationsStripePage,
+  IntegrationsSpecModelPage,
+  IntegrationsS3Page,
+  IntegrationsResendPage,
+  IntegrationsQdrantPage,
+  IntegrationsPowensPage,
+  IntegrationsPostmarkPage,
+  IntegrationsOverviewPage,
+  IntegrationsOpenAIPage,
+  IntegrationsGoogleCalendarPage,
+  IntegrationsGmailPage,
+  IntegrationsElevenLabsPage,
+  IntegrationsCircuitBreakersPage
+};