@contractspec/bundle.library 3.7.6 → 3.7.7

package/dist/components/docs/integrations/IntegrationsOverviewPage.js

@@ -1,774 +1,157 @@
 // @bun
 // src/components/docs/integrations/IntegrationsOverviewPage.tsx
 import Link from "@contractspec/lib.ui-link";
-import { ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var groups = [
+  {
+    title: "Models and voice",
+    items: [
+      { title: "OpenAI", href: "/docs/integrations/openai" },
+      { title: "Mistral", href: "/docs/integrations/mistral" },
+      { title: "ElevenLabs", href: "/docs/integrations/elevenlabs" }
+    ]
+  },
+  {
+    title: "Messaging and product operations",
+    items: [
+      { title: "GitHub", href: "/docs/integrations/github" },
+      { title: "Slack", href: "/docs/integrations/slack" },
+      { title: "Twilio", href: "/docs/integrations/twilio" },
+      { title: "Postmark", href: "/docs/integrations/postmark" }
+    ]
+  },
+  {
+    title: "Data, storage, and retrieval",
+    items: [
+      { title: "Qdrant", href: "/docs/integrations/qdrant" },
+      { title: "S3 storage", href: "/docs/integrations/s3" },
+      { title: "Gmail", href: "/docs/integrations/gmail" },
+      { title: "Google Calendar", href: "/docs/integrations/google-calendar" }
+    ]
+  },
+  {
+    title: "Payments and external workflows",
+    items: [
+      { title: "Stripe", href: "/docs/integrations/stripe" },
+      { title: "Powens", href: "/docs/integrations/powens" },
+      {
+        title: "Circuit breakers",
+        href: "/docs/integrations/circuit-breakers"
+      },
+      {
+        title: "Health routing",
+        href: "/docs/integrations/health-routing"
+      }
+    ]
+  }
+];
 function IntegrationsOverviewPage() {
   return /* @__PURE__ */ jsxs("div", {
-    className: "space-y-8",
+    className: "space-y-10",
     children: [
       /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
+        className: "space-y-3",
         children: [
-          /* @__PURE__ */ jsx("h1", {
-            className: "text-4xl font-bold",
+          /* @__PURE__ */ jsx("p", {
+            className: "editorial-kicker",
             children: "Integrations"
           }),
-          /* @__PURE__ */ jsx("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."
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "text-2xl font-bold",
-            children: "Spec-first architecture"
+          /* @__PURE__ */ jsx("h1", {
+            className: "font-serif text-4xl tracking-[-0.04em] md:text-5xl",
+            children: "Integrations stay explicit: spec what a provider offers, then bind it per tenant and per app."
           }),
           /* @__PURE__ */ jsx("p", {
-            className: "text-muted-foreground",
-            children: "Integrations in ContractSpec follow a three-layer model:"
-          }),
-          /* @__PURE__ */ jsxs("div", {
-            className: "space-y-3",
-            children: [
-              /* @__PURE__ */ jsxs("div", {
-                className: "card-subtle p-4",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "mb-2 font-semibold",
-                    children: "1. IntegrationSpec (Global)"
-                  }),
-                  /* @__PURE__ */ jsx("p", {
-                    className: "text-muted-foreground text-sm",
-                    children: "Defines what an integration provides: capabilities, configuration schema, secrets, webhooks, and requirements."
-                  }),
-                  /* @__PURE__ */ jsx(Link, {
-                    href: "/docs/integrations/spec-model",
-                    className: "mt-2 inline-block text-sm text-violet-400 hover:text-violet-300",
-                    children: "Learn more \u2192"
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "card-subtle p-4",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "mb-2 font-semibold",
-                    children: "2. IntegrationConnection (Per-Tenant)"
-                  }),
-                  /* @__PURE__ */ jsx("p", {
-                    className: "text-muted-foreground text-sm",
-                    children: "A tenant's configured connection with credentials, environment (sandbox/production), and health status."
-                  }),
-                  /* @__PURE__ */ jsx(Link, {
-                    href: "/docs/architecture/integration-binding",
-                    className: "mt-2 inline-block text-sm text-violet-400 hover:text-violet-300",
-                    children: "Learn more \u2192"
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "card-subtle p-4",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "mb-2 font-semibold",
-                    children: "3. AppIntegrationBinding (Per-App)"
-                  }),
-                  /* @__PURE__ */ jsx("p", {
-                    className: "text-muted-foreground text-sm",
-                    children: "Maps tenant connections to app capabilities and workflows, defining which operations can use which integrations."
-                  }),
-                  /* @__PURE__ */ jsx(Link, {
-                    href: "/docs/architecture/integration-binding",
-                    className: "mt-2 inline-block text-sm text-violet-400 hover:text-violet-300",
-                    children: "Learn more \u2192"
-                  })
-                ]
-              })
-            ]
+            className: "max-w-3xl text-lg text-muted-foreground leading-8",
+            children: "The integration model keeps provider behavior out of ad hoc glue code. Define the capability contract first, configure the provider connection explicitly, then bind the integration into app workflows and runtime surfaces with clear ownership."
           })
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
+        className: "editorial-proof-strip",
         children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "text-2xl font-bold",
-            children: "Integration categories"
-          }),
-          /* @__PURE__ */ jsx("div", {
-            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
-            children: /* @__PURE__ */ jsx("pre", {
-              children: `type IntegrationCategory =
-  | "payments"      // Stripe
-  | "open-banking"  // Powens
-  | "email"         // Postmark, Resend, Gmail
-  | "calendar"      // Google Calendar
-  | "sms"           // Twilio
-  | "messaging"     // Slack, GitHub, WhatsApp
-  | "health"        // Whoop, Oura, Strava, Fitbit
-  | "ai-llm"        // OpenAI, Mistral
-  | "ai-voice-tts"  // ElevenLabs
-  | "ai-voice-stt"  // OpenAI Whisper, Mistral Voxtral
-  | "ai-voice-conversational" // OpenAI Realtime, Mistral Voice
-  | "ai-image"      // OpenAI Image, Fal
-  | "vector-db"     // Qdrant
-  | "database"      // Supabase Postgres
-  | "storage"       // S3-compatible
-  | "meeting-recorder" // Fireflies, tl;dv
-  | "project-management" // Linear, Jira, Notion
-  | "accounting"    // Coming soon
-  | "crm"           // Coming soon
-  | "helpdesk"      // Coming soon
-  | "custom";       // User-defined`
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "text-2xl font-bold",
-            children: "Available integrations"
-          }),
           /* @__PURE__ */ jsxs("div", {
-            className: "space-y-6",
+            className: "editorial-stat",
             children: [
-              /* @__PURE__ */ jsxs("div", {
-                className: "space-y-3",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "Payments"
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    className: "grid gap-4 md:grid-cols-2",
-                    children: /* @__PURE__ */ jsxs(Link, {
-                      href: "/docs/integrations/stripe",
-                      className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                      children: [
-                        /* @__PURE__ */ jsx("h4", {
-                          className: "font-bold transition-colors group-hover:text-violet-400",
-                          children: "Stripe"
-                        }),
-                        /* @__PURE__ */ jsx("p", {
-                          className: "text-muted-foreground mt-1 text-sm",
-                          children: "Payment processing, subscriptions, and invoicing"
-                        })
-                      ]
-                    })
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "space-y-3",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "Open Banking"
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    className: "grid gap-4 md:grid-cols-2",
-                    children: /* @__PURE__ */ jsxs(Link, {
-                      href: "/docs/integrations/powens",
-                      className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                      children: [
-                        /* @__PURE__ */ jsx("h4", {
-                          className: "font-bold transition-colors group-hover:text-violet-400",
-                          children: "Powens (Read-Only)"
-                        }),
-                        /* @__PURE__ */ jsx("p", {
-                          className: "text-muted-foreground mt-1 text-sm",
-                          children: "Account, transaction, and balance synchronisation via Powens with tenant-owned credentials."
-                        })
-                      ]
-                    })
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "space-y-3",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "Email"
-                  }),
-                  /* @__PURE__ */ jsxs("div", {
-                    className: "grid gap-4 md:grid-cols-2",
-                    children: [
-                      /* @__PURE__ */ jsxs(Link, {
-                        href: "/docs/integrations/postmark",
-                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                        children: [
-                          /* @__PURE__ */ jsx("h4", {
-                            className: "font-bold transition-colors group-hover:text-violet-400",
-                            children: "Postmark"
-                          }),
-                          /* @__PURE__ */ jsx("p", {
-                            className: "text-muted-foreground mt-1 text-sm",
-                            children: "Transactional email delivery with high deliverability"
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs(Link, {
-                        href: "/docs/integrations/resend",
-                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                        children: [
-                          /* @__PURE__ */ jsx("h4", {
-                            className: "font-bold transition-colors group-hover:text-violet-400",
-                            children: "Resend"
-                          }),
-                          /* @__PURE__ */ jsx("p", {
-                            className: "text-muted-foreground mt-1 text-sm",
-                            children: "Modern email API for developers"
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs(Link, {
-                        href: "/docs/integrations/gmail",
-                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                        children: [
-                          /* @__PURE__ */ jsx("h4", {
-                            className: "font-bold transition-colors group-hover:text-violet-400",
-                            children: "Gmail API"
-                          }),
-                          /* @__PURE__ */ jsx("p", {
-                            className: "text-muted-foreground mt-1 text-sm",
-                            children: "Inbound email processing and thread management"
-                          })
-                        ]
-                      })
-                    ]
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "space-y-3",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "Calendar & Scheduling"
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    className: "grid gap-4 md:grid-cols-2",
-                    children: /* @__PURE__ */ jsxs(Link, {
-                      href: "/docs/integrations/google-calendar",
-                      className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                      children: [
-                        /* @__PURE__ */ jsx("h4", {
-                          className: "font-bold transition-colors group-hover:text-violet-400",
-                          children: "Google Calendar"
-                        }),
-                        /* @__PURE__ */ jsx("p", {
-                          className: "text-muted-foreground mt-1 text-sm",
-                          children: "Event scheduling and calendar management"
-                        })
-                      ]
-                    })
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "space-y-3",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "AI & Machine Learning"
-                  }),
-                  /* @__PURE__ */ jsxs("div", {
-                    className: "grid gap-4 md:grid-cols-2",
-                    children: [
-                      /* @__PURE__ */ jsxs(Link, {
-                        href: "/docs/integrations/openai",
-                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                        children: [
-                          /* @__PURE__ */ jsx("h4", {
-                            className: "font-bold transition-colors group-hover:text-violet-400",
-                            children: "OpenAI"
-                          }),
-                          /* @__PURE__ */ jsx("p", {
-                            className: "text-muted-foreground mt-1 text-sm",
-                            children: "LLMs, embeddings, and Whisper speech-to-text"
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs(Link, {
-                        href: "/docs/integrations/mistral",
-                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                        children: [
-                          /* @__PURE__ */ jsx("h4", {
-                            className: "font-bold transition-colors group-hover:text-violet-400",
-                            children: "Mistral"
-                          }),
-                          /* @__PURE__ */ jsx("p", {
-                            className: "text-muted-foreground mt-1 text-sm",
-                            children: "LLMs, embeddings, Voxtral STT, and conversational voice"
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs(Link, {
-                        href: "/docs/integrations/elevenlabs",
-                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                        children: [
-                          /* @__PURE__ */ jsx("h4", {
-                            className: "font-bold transition-colors group-hover:text-violet-400",
-                            children: "ElevenLabs"
-                          }),
-                          /* @__PURE__ */ jsx("p", {
-                            className: "text-muted-foreground mt-1 text-sm",
-                            children: "Text-to-speech and voice synthesis"
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs(Link, {
-                        href: "/docs/integrations/qdrant",
-                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                        children: [
-                          /* @__PURE__ */ jsx("h4", {
-                            className: "font-bold transition-colors group-hover:text-violet-400",
-                            children: "Qdrant"
-                          }),
-                          /* @__PURE__ */ jsx("p", {
-                            className: "text-muted-foreground mt-1 text-sm",
-                            children: "Vector database for semantic search and RAG"
-                          })
-                        ]
-                      })
-                    ]
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "space-y-3",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "Storage"
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    className: "grid gap-4 md:grid-cols-2",
-                    children: /* @__PURE__ */ jsxs(Link, {
-                      href: "/docs/integrations/s3",
-                      className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                      children: [
-                        /* @__PURE__ */ jsx("h4", {
-                          className: "font-bold transition-colors group-hover:text-violet-400",
-                          children: "S3-Compatible Storage"
-                        }),
-                        /* @__PURE__ */ jsx("p", {
-                          className: "text-muted-foreground mt-1 text-sm",
-                          children: "Object storage (AWS S3, Scaleway, MinIO, etc.)"
-                        })
-                      ]
-                    })
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "space-y-3",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "SMS"
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    className: "grid gap-4 md:grid-cols-2",
-                    children: /* @__PURE__ */ jsxs(Link, {
-                      href: "/docs/integrations/twilio",
-                      className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                      children: [
-                        /* @__PURE__ */ jsx("h4", {
-                          className: "font-bold transition-colors group-hover:text-violet-400",
-                          children: "Twilio"
-                        }),
-                        /* @__PURE__ */ jsx("p", {
-                          className: "text-muted-foreground mt-1 text-sm",
-                          children: "SMS notifications and transactional messaging"
-                        })
-                      ]
-                    })
-                  })
-                ]
+              /* @__PURE__ */ jsx("span", {
+                className: "editorial-label",
+                children: "Binding model"
               }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "space-y-3",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "Messaging channels"
-                  }),
-                  /* @__PURE__ */ jsxs("div", {
-                    className: "grid gap-4 md:grid-cols-2",
-                    children: [
-                      /* @__PURE__ */ jsxs(Link, {
-                        href: "/docs/integrations/slack",
-                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                        children: [
-                          /* @__PURE__ */ jsx("h4", {
-                            className: "font-bold transition-colors group-hover:text-violet-400",
-                            children: "Slack"
-                          }),
-                          /* @__PURE__ */ jsx("p", {
-                            className: "text-muted-foreground mt-1 text-sm",
-                            children: "Signed event ingestion and outbox-backed replies"
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs(Link, {
-                        href: "/docs/integrations/github",
-                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                        children: [
-                          /* @__PURE__ */ jsx("h4", {
-                            className: "font-bold transition-colors group-hover:text-violet-400",
-                            children: "GitHub"
-                          }),
-                          /* @__PURE__ */ jsx("p", {
-                            className: "text-muted-foreground mt-1 text-sm",
-                            children: "Issue and PR comment workflows with webhook verification"
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs(Link, {
-                        href: "/docs/integrations/whatsapp-meta",
-                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                        children: [
-                          /* @__PURE__ */ jsx("h4", {
-                            className: "font-bold transition-colors group-hover:text-violet-400",
-                            children: "WhatsApp Meta"
-                          }),
-                          /* @__PURE__ */ jsx("p", {
-                            className: "text-muted-foreground mt-1 text-sm",
-                            children: "Primary WhatsApp Business API transport for inbound and outbound"
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs(Link, {
-                        href: "/docs/integrations/whatsapp-twilio",
-                        className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                        children: [
-                          /* @__PURE__ */ jsx("h4", {
-                            className: "font-bold transition-colors group-hover:text-violet-400",
-                            children: "WhatsApp Twilio"
-                          }),
-                          /* @__PURE__ */ jsx("p", {
-                            className: "text-muted-foreground mt-1 text-sm",
-                            children: "Fallback WhatsApp route with Twilio signature validation"
-                          })
-                        ]
-                      })
-                    ]
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "space-y-3",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "Health & wearables"
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    className: "grid gap-4 md:grid-cols-2",
-                    children: /* @__PURE__ */ jsxs(Link, {
-                      href: "/docs/integrations/health-routing",
-                      className: "card-subtle group p-4 transition-colors hover:border-violet-500/50",
-                      children: [
-                        /* @__PURE__ */ jsx("h4", {
-                          className: "font-bold transition-colors group-hover:text-violet-400",
-                          children: "Health routing strategy"
-                        }),
-                        /* @__PURE__ */ jsx("p", {
-                          className: "text-muted-foreground mt-1 text-sm",
-                          children: "Official vs aggregator transport order, unofficial gating, and OAuth refresh config"
-                        })
-                      ]
-                    })
-                  })
-                ]
+              /* @__PURE__ */ jsx("span", {
+                className: "editorial-stat-value",
+                children: "Integration spec \u2192 tenant connection \u2192 app binding"
               })
             ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "text-2xl font-bold",
-            children: "How integrations work"
-          }),
-          /* @__PURE__ */ jsxs("p", {
-            className: "text-muted-foreground",
-            children: [
-              "ContractSpec integrations are implemented as",
-              " ",
-              /* @__PURE__ */ jsx(Link, {
-                href: "/docs/specs/capabilities",
-                className: "text-violet-400 hover:text-violet-300",
-                children: "capability providers"
-              }),
-              ". This means:"
-            ]
           }),
-          /* @__PURE__ */ jsxs("ul", {
-            className: "text-muted-foreground list-inside list-disc space-y-2",
-            children: [
-              /* @__PURE__ */ jsxs("li", {
-                children: [
-                  /* @__PURE__ */ jsx("strong", {
-                    children: "Type safety"
-                  }),
-                  " \u2013 All API calls are type-checked by TypeScript and validated at runtime via Zod"
-                ]
-              }),
-              /* @__PURE__ */ jsxs("li", {
-                children: [
-                  /* @__PURE__ */ jsx("strong", {
-                    children: "Policy enforcement"
-                  }),
-                  " \u2013 Access to external services is governed by your",
-                  " ",
-                  /* @__PURE__ */ jsx(Link, {
-                    href: "/docs/specs/policy",
-                    className: "text-violet-400 hover:text-violet-300",
-                    children: "PolicySpecs"
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs("li", {
-                children: [
-                  /* @__PURE__ */ jsx("strong", {
-                    children: "Audit logging"
-                  }),
-                  " \u2013 All integration calls are automatically logged"
-                ]
-              }),
-              /* @__PURE__ */ jsxs("li", {
-                children: [
-                  /* @__PURE__ */ jsx("strong", {
-                    children: "Error handling"
-                  }),
-                  " \u2013 Built-in retries and fallback strategies"
-                ]
-              }),
-              /* @__PURE__ */ jsxs("li", {
-                children: [
-                  /* @__PURE__ */ jsx("strong", {
-                    children: "Environment-based config"
-                  }),
-                  " \u2013 API keys and secrets are managed through environment variables"
-                ]
-              })
-            ]
+          /* @__PURE__ */ jsx("p", {
+            className: "max-w-2xl text-muted-foreground text-sm leading-7",
+            children: "That separation is what makes reuse, tenant isolation, and provider swaps practical without rewriting every surface."
           })
         ]
       }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "text-2xl font-bold",
-            children: "Secret management"
-          }),
-          /* @__PURE__ */ jsx("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."
-          }),
-          /* @__PURE__ */ jsxs("div", {
-            className: "grid gap-4 md:grid-cols-2",
-            children: [
-              /* @__PURE__ */ jsxs("div", {
-                className: "card-subtle p-4",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "Environment variables"
-                  }),
-                  /* @__PURE__ */ jsxs("p", {
-                    className: "text-muted-foreground mt-2 text-sm",
-                    children: [
-                      "Perfect for local development and secure staging overrides. Use the ",
-                      /* @__PURE__ */ jsx("code", {
-                        children: "env://"
-                      }),
-                      " scheme or append ",
-                      /* @__PURE__ */ jsx("code", {
-                        children: "?env="
-                      }),
-                      " to another reference to map an explicit variable."
-                    ]
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    className: "bg-background/60 border-border mt-3 overflow-auto rounded-lg border p-3 font-mono text-xs",
-                    children: /* @__PURE__ */ jsx("pre", {
-                      className: "whitespace-pre-wrap",
-                      children: `# Override a production secret locally
-CONTRACTSPEC__SECRET__STRIPE=sk_test_123
-
-# Reference
-env://CONTRACTSPEC__SECRET__STRIPE`
+      /* @__PURE__ */ jsx("section", {
+        className: "editorial-panel space-y-5",
+        children: /* @__PURE__ */ jsxs("div", {
+          className: "space-y-2",
+          children: [
+            /* @__PURE__ */ jsx("h2", {
+              className: "font-serif text-3xl tracking-[-0.03em]",
+              children: "Start with the model, then pick a provider"
+            }),
+            /* @__PURE__ */ jsxs("div", {
+              className: "grid gap-4 md:grid-cols-2",
+              children: [
+                /* @__PURE__ */ jsxs(Link, {
+                  href: "/docs/integrations/spec-model",
+                  className: "docs-footer-link",
+                  children: [
+                    /* @__PURE__ */ jsx("h3", {
+                      className: "font-semibold text-lg",
+                      children: "Integration spec model"
+                    }),
+                    /* @__PURE__ */ jsx("p", {
+                      className: "text-muted-foreground text-sm leading-7",
+                      children: "Define what the provider offers, what configuration it needs, and how the runtime should treat it."
                     })
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                className: "card-subtle p-4",
-                children: [
-                  /* @__PURE__ */ jsx("h3", {
-                    className: "text-xl font-semibold",
-                    children: "GCP Secret Manager"
-                  }),
-                  /* @__PURE__ */ jsxs("p", {
-                    className: "text-muted-foreground mt-2 text-sm",
-                    children: [
-                      "Used in production to store versioned credentials with rotation support. References follow the",
-                      " ",
-                      /* @__PURE__ */ jsx("code", {
-                        children: "gcp://projects/.../secrets/.../versions/latest"
-                      }),
-                      " ",
-                      "format."
-                    ]
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    className: "bg-background/60 border-border mt-3 overflow-auto rounded-lg border p-3 font-mono text-xs",
-                    children: /* @__PURE__ */ jsx("pre", {
-                      className: "whitespace-pre-wrap",
-                      children: `# Production reference
-gcp://projects/tenant/secrets/stripe-secret-key/versions/latest`
+                  ]
+                }),
+                /* @__PURE__ */ jsxs(Link, {
+                  href: "/docs/architecture/integration-binding",
+                  className: "docs-footer-link",
+                  children: [
+                    /* @__PURE__ */ jsx("h3", {
+                      className: "font-semibold text-lg",
+                      children: "Integration binding"
+                    }),
+                    /* @__PURE__ */ jsx("p", {
+                      className: "text-muted-foreground text-sm leading-7",
+                      children: "Understand how tenant connections get mapped into concrete app surfaces and workflows."
                     })
-                  })
-                ]
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx("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."
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "text-2xl font-bold",
-            children: "Configuration"
-          }),
-          /* @__PURE__ */ jsx("p", {
-            className: "text-muted-foreground",
-            children: "Integrations are configured through environment variables and secret references. Here's a typical setup:"
-          }),
-          /* @__PURE__ */ jsx("div", {
-            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
-            children: /* @__PURE__ */ jsx("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-...
-
-MISTRAL_API_KEY=...
-
-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`
+                  ]
+                })
+              ]
             })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "text-2xl font-bold",
-            children: "Integration categories"
-          }),
-          /* @__PURE__ */ jsx("p", {
-            className: "text-muted-foreground",
-            children: "ContractSpec supports the following integration categories:"
-          }),
-          /* @__PURE__ */ jsx("div", {
-            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
-            children: /* @__PURE__ */ jsx("pre", {
-              children: `type IntegrationCategory =
-  | "payments"        // Stripe, PayPal, etc.
-  | "open-banking"    // Powens and open banking providers
-  | "email"           // Postmark, Resend, Gmail
-  | "calendar"        // Google Calendar, Outlook
-  | "sms"             // Twilio, MessageBird
-  | "messaging"       // Slack, GitHub, WhatsApp
-  | "health"          // Whoop, Oura, Strava, Fitbit
-  | "ai-llm"          // OpenAI, Anthropic, Cohere, Mistral
-  | "ai-voice-tts"    // ElevenLabs, Google TTS
-  | "ai-voice-stt"    // OpenAI Whisper, Google STT, Mistral Voxtral
-  | "ai-voice-conversational" // OpenAI Realtime, Mistral Voice
-  | "ai-image"        // OpenAI Image, Fal
-  | "vector-db"       // Qdrant, Pinecone, Weaviate
-  | "database"        // Supabase, Postgres
-  | "storage"         // S3, GCS, Azure Blob
-  | "meeting-recorder" // Fireflies, tl;dv, Granola
-  | "project-management" // Linear, Jira, Notion
-  | "accounting"      // QuickBooks, Xero (coming soon)
-  | "crm"             // Salesforce, HubSpot (coming soon)
-  | "helpdesk"        // Zendesk, Intercom (coming soon)
-  | "custom";         // Your own integrations`
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsx("h2", {
-            className: "text-2xl font-bold",
-            children: "Custom integrations"
-          }),
-          /* @__PURE__ */ jsxs("p", {
-            className: "text-muted-foreground",
-            children: [
-              "You can create custom integrations by implementing a capability provider. See the",
-              " ",
-              /* @__PURE__ */ jsx(Link, {
-                href: "/docs/advanced/custom-providers",
-                className: "text-violet-400 hover:text-violet-300",
-                children: "Custom Providers"
-              }),
-              " ",
-              "guide for details."
-            ]
-          })
-        ]
+          ]
+        })
       }),
       /* @__PURE__ */ jsx("div", {
-        className: "flex items-center gap-4 pt-4",
-        children: /* @__PURE__ */ jsxs(Link, {
-          href: "/docs/integrations/stripe",
-          className: "btn-primary",
+        className: "grid gap-5 md:grid-cols-2",
+        children: groups.map((group) => /* @__PURE__ */ jsxs("section", {
+          className: "editorial-panel space-y-4",
           children: [
-            "Get Started with Stripe ",
-            /* @__PURE__ */ jsx(ChevronRight, {
-              size: 16
+            /* @__PURE__ */ jsx("h2", {
+              className: "font-serif text-2xl tracking-[-0.03em]",
+              children: group.title
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: "space-y-3",
+              children: group.items.map((item) => /* @__PURE__ */ jsx(Link, {
+                href: item.href,
+                className: "docs-chip-link",
+                children: item.title
+              }, item.href))
             })
           ]
-        })
+        }, group.title))
       })
     ]
   });