@contractspec/bundle.marketing 3.8.7 → 3.8.9

package/dist/components/templates/TemplatesClientPage.js

@@ -2561,989 +2561,912 @@ function PricingThinkingModal({
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 }
-// src/components/templates/TemplatesPreviewModal.tsx
-import { LoadingSpinner } from "@contractspec/lib.ui-kit-web/ui/atoms/LoadingSpinner";
-import { Dialog as Dialog2, DialogContent as DialogContent2 } from "@contractspec/lib.ui-kit-web/ui/dialog";
-import { ScrollArea } from "@contractspec/lib.ui-kit-web/ui/scroll-area";
-import dynamic from "next/dynamic";
-import { useMemo } from "react";
+// src/components/templates/TemplateCard.tsx
 import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
 "use client";
-var TemplateShell = dynamic(() => import("@contractspec/lib.example-shared-ui").then((mod) => mod.TemplateShell), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var TodosTaskList = dynamic(() => import("@contractspec/bundle.library/components/templates/todos/TaskList").then((mod) => mod.TaskList), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var MessagingWorkspace = dynamic(() => import("@contractspec/bundle.library/components/templates/messaging/MessagingWorkspace").then((mod) => mod.MessagingWorkspace), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var RecipesExperience = dynamic(() => import("@contractspec/bundle.library/components/templates/recipes/RecipeList").then((mod) => mod.RecipeList), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var SaasDashboard = dynamic(() => import("@contractspec/example.saas-boilerplate").then((mod) => mod.SaasDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var CrmDashboard = dynamic(() => import("@contractspec/example.crm-pipeline").then((mod) => mod.CrmDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var DataGridShowcase = dynamic(() => import("@contractspec/example.data-grid-showcase/ui").then((mod) => mod.DataGridShowcase), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var VisualizationShowcase = dynamic(() => import("@contractspec/example.visualization-showcase/ui").then((mod) => mod.VisualizationShowcase), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var AgentDashboard = dynamic(() => import("@contractspec/example.agent-console/ui").then((mod) => mod.AgentDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var WorkflowDashboard = dynamic(() => import("@contractspec/example.workflow-system/ui").then((mod) => mod.WorkflowDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var MarketplaceDashboard = dynamic(() => import("@contractspec/example.marketplace/ui").then((mod) => mod.MarketplaceDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var IntegrationDashboard = dynamic(() => import("@contractspec/example.integration-hub/ui").then((mod) => mod.IntegrationDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var AnalyticsDashboard = dynamic(() => import("@contractspec/example.analytics-dashboard").then((mod) => mod.AnalyticsDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var AiChatAssistantDashboard = dynamic(() => import("@contractspec/example.ai-chat-assistant").then((mod) => mod.AiChatAssistantDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV11(LoadingSpinner, {}, undefined, false, undefined, this) });
-var TemplatePreviewModal = ({
-  templateId,
-  onClose
-}) => {
-  const previewComponent = useMemo(() => {
-    switch (templateId) {
-      case "todos-app":
-        return /* @__PURE__ */ jsxDEV11(TemplateShell, {
-          title: "Starter tasks",
-          description: "Track work items with filters, priorities, and per-tenant data isolation.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV11(TodosTaskList, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "messaging-app":
-        return /* @__PURE__ */ jsxDEV11(TemplateShell, {
-          title: "Messaging workspace",
-          description: "Realtime-ready messaging surface with optimistic delivery.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV11(MessagingWorkspace, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "recipe-app-i18n":
-        return /* @__PURE__ */ jsxDEV11(TemplateShell, {
-          title: "Ceremony recipes",
-          description: "Switch locales and preview how rituals translate across teams.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV11(RecipesExperience, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "saas-boilerplate":
-        return /* @__PURE__ */ jsxDEV11(TemplateShell, {
-          title: "SaaS Boilerplate",
-          description: "Multi-tenant organizations, projects, settings, and billing usage tracking.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV11(SaasDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "crm-pipeline":
-        return /* @__PURE__ */ jsxDEV11(TemplateShell, {
-          title: "CRM Pipeline",
-          description: "Sales CRM with contacts, companies, deals, and pipeline stages.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV11(CrmDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "data-grid-showcase":
-        return /* @__PURE__ */ jsxDEV11(TemplateShell, {
-          title: "Data Grid Showcase",
-          description: "Shared ContractSpec table primitives with client, server, and DataView-driven lanes.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV11(DataGridShowcase, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "visualization-showcase":
-        return /* @__PURE__ */ jsxDEV11(TemplateShell, {
-          title: "Visualization Showcase",
-          description: "ContractSpec-owned chart primitives rendered through shared visualization contracts and design-system wrappers.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV11(VisualizationShowcase, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "agent-console":
-        return /* @__PURE__ */ jsxDEV11(TemplateShell, {
-          title: "AI Agent Console",
-          description: "AI agent orchestration with tools, agents, runs, and execution logs.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV11(AgentDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "ai-chat-assistant":
-        return /* @__PURE__ */ jsxDEV11(TemplateShell, {
-          title: "AI Chat Assistant",
-          description: "Focused assistant surface with reasoning, sources, suggestions, and MCP-aware tools.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV11(AiChatAssistantDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "workflow-system":
-        return /* @__PURE__ */ jsxDEV11(TemplateShell, {
-          title: "Workflow System",
-          description: "Multi-step workflows with role-based approvals.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV11(WorkflowDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "marketplace":
-        return /* @__PURE__ */ jsxDEV11(TemplateShell, {
-          title: "Marketplace",
-          description: "Two-sided marketplace with stores, products, and orders.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV11(MarketplaceDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "integration-hub":
-        return /* @__PURE__ */ jsxDEV11(TemplateShell, {
-          title: "Integration Hub",
-          description: "Third-party integrations with sync and field mapping.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV11(IntegrationDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "analytics-dashboard":
-        return /* @__PURE__ */ jsxDEV11(TemplateShell, {
-          title: "Analytics Dashboard",
-          description: "Custom dashboards with widgets and queries.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV11(AnalyticsDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case null:
-        return null;
-      default:
-        return null;
-    }
-  }, [templateId]);
-  return /* @__PURE__ */ jsxDEV11(Dialog2, {
-    open: !!previewComponent,
-    onOpenChange: onClose,
-    children: /* @__PURE__ */ jsxDEV11(DialogContent2, {
-      className: "mb-8 flex h-[calc(100vh-2rem)] min-w-[calc(100vw-2rem)] flex-col justify-between gap-0 p-0",
-      children: /* @__PURE__ */ jsxDEV11(ScrollArea, {
-        className: "flex flex-col justify-between overflow-hidden",
-        children: previewComponent
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-};
+function TemplateCard({
+  title,
+  description,
+  metaBadges,
+  tags,
+  featureList = [],
+  isNew = false,
+  previewAction,
+  useAction
+}) {
+  return /* @__PURE__ */ jsxDEV11("div", {
+    className: "editorial-panel relative flex flex-col space-y-4 transition-colors hover:border-[color:rgb(162_79_42_/_0.55)]",
+    children: [
+      isNew ? /* @__PURE__ */ jsxDEV11("span", {
+        className: "absolute top-4 right-4 rounded-full bg-[color:var(--success)] px-2.5 py-1 font-medium text-[11px] text-white uppercase",
+        children: "New"
+      }, undefined, false, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV11("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV11("h3", {
+            className: "font-serif text-2xl tracking-[-0.03em]",
+            children: title
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11("p", {
+            className: "mt-1 text-muted-foreground text-sm",
+            children: description
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV11("div", {
+        className: "flex-1 space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV11("div", {
+            className: "flex flex-wrap gap-2",
+            children: metaBadges.map((badge) => /* @__PURE__ */ jsxDEV11("span", {
+              className: "rounded-full border border-border bg-background px-3 py-1 text-[11px] text-foreground",
+              children: badge
+            }, badge, false, undefined, this))
+          }, undefined, false, undefined, this),
+          featureList.length > 0 ? /* @__PURE__ */ jsxDEV11("p", {
+            className: "text-muted-foreground text-xs",
+            children: [
+              /* @__PURE__ */ jsxDEV11("span", {
+                className: "font-medium text-foreground",
+                children: "Features:"
+              }, undefined, false, undefined, this),
+              " ",
+              featureList.join(", ")
+            ]
+          }, undefined, true, undefined, this) : null,
+          /* @__PURE__ */ jsxDEV11("div", {
+            className: "flex flex-wrap gap-1",
+            children: tags.map((tag) => /* @__PURE__ */ jsxDEV11("span", {
+              className: "rounded-full border border-border bg-muted px-3 py-1 text-[11px] text-muted-foreground",
+              children: tag
+            }, tag, false, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV11("div", {
+        className: "flex gap-2 pt-4",
+        children: [
+          previewAction,
+          useAction
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
 
-// src/components/templates/TemplatesClientPage.tsx
+// src/components/templates/TemplateCommandDialog.tsx
 import {
   analyticsEventNames as analyticsEventNames2,
   captureAnalyticsEvent as captureAnalyticsEvent2
 } from "@contractspec/bundle.library/libs/posthog/client";
-import { useRegistryTemplates } from "@contractspec/lib.example-shared-ui";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import {
-  Dialog as Dialog3,
-  DialogContent as DialogContent3,
+  Dialog as Dialog2,
+  DialogContent as DialogContent2,
   DialogDescription as DialogDescription2,
   DialogHeader as DialogHeader2,
   DialogTitle as DialogTitle2
 } from "@contractspec/lib.ui-kit-web/ui/dialog";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from "@contractspec/lib.ui-kit-web/ui/tooltip";
-import { getTemplate } from "@contractspec/module.examples";
-import { Search } from "lucide-react";
-import Link8 from "next/link";
-import { useState as useState2 } from "react";
 import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
 "use client";
-var templates = [
-  {
-    id: "minimal-example",
-    templateId: "todos-app",
-    title: "Minimal Example",
-    description: "A minimal template to get you running in minutes. Perfect for exploring the engine.",
-    tags: ["Getting Started"],
-    capabilities: "Basic Forms, Auth",
-    isStarter: true,
-    previewUrl: "/sandbox?template=minimal-example",
-    docsUrl: "/docs/getting-started/hello-world"
-  },
-  {
-    id: "saas-boilerplate",
-    templateId: "saas-boilerplate",
+function TemplateCommandDialog({
+  templateId,
+  onClose,
+  onDeployStudio
+}) {
+  const command = templateId ? `npx contractspec init --template ${templateId}` : "";
+  return /* @__PURE__ */ jsxDEV12(Dialog2, {
+    open: !!templateId,
+    onOpenChange: (open) => !open && onClose(),
+    children: /* @__PURE__ */ jsxDEV12(DialogContent2, {
+      className: "max-w-md",
+      children: [
+        /* @__PURE__ */ jsxDEV12(DialogHeader2, {
+          children: [
+            /* @__PURE__ */ jsxDEV12(DialogTitle2, {
+              children: "Use this template"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV12(DialogDescription2, {
+              children: "Initialize a new project with this template using the CLI."
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV12("div", {
+          className: "space-y-4 pt-4",
+          children: [
+            /* @__PURE__ */ jsxDEV12("div", {
+              className: "rounded-md border border-zinc-800 bg-zinc-950 p-4 font-mono text-sm text-zinc-50",
+              children: command
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV12("div", {
+              className: "flex gap-2",
+              children: /* @__PURE__ */ jsxDEV12("button", {
+                className: "btn-secondary w-full",
+                onClick: () => {
+                  if (!templateId) {
+                    return;
+                  }
+                  navigator.clipboard.writeText(command);
+                  captureAnalyticsEvent2(analyticsEventNames2.COPY_COMMAND_CLICK, {
+                    surface: "templates",
+                    templateId,
+                    filename: "templates-cli"
+                  });
+                },
+                children: "Copy Command"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV12("div", {
+              className: "relative",
+              children: [
+                /* @__PURE__ */ jsxDEV12("div", {
+                  className: "absolute inset-0 flex items-center",
+                  children: /* @__PURE__ */ jsxDEV12("span", {
+                    className: "w-full border-border border-t"
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV12("div", {
+                  className: "relative flex justify-center text-xs uppercase",
+                  children: /* @__PURE__ */ jsxDEV12("span", {
+                    className: "bg-background px-2 text-muted-foreground",
+                    children: "Or"
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV12("button", {
+              className: "btn-ghost w-full text-sm",
+              onClick: () => {
+                if (!templateId) {
+                  return;
+                }
+                captureAnalyticsEvent2(analyticsEventNames2.CTA_STUDIO_CLICK, {
+                  surface: "templates",
+                  templateId
+                });
+                onDeployStudio();
+              },
+              children: "Deploy to Studio"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/templates/TemplatePreviewContent.tsx
+import {
+  TemplateShell
+} from "@contractspec/lib.example-shared-ui";
+import { LoadingSpinner } from "@contractspec/lib.ui-kit-web/ui/atoms/LoadingSpinner";
+import dynamic from "next/dynamic";
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+"use client";
+var SaasDashboard = dynamic(() => import("@contractspec/example.saas-boilerplate").then((module) => module.SaasDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV13(LoadingSpinner, {}, undefined, false, undefined, this) });
+var CrmDashboard = dynamic(() => import("@contractspec/example.crm-pipeline").then((module) => module.CrmDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV13(LoadingSpinner, {}, undefined, false, undefined, this) });
+var DataGridShowcase = dynamic(() => import("@contractspec/example.data-grid-showcase/ui").then((module) => module.DataGridShowcase), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV13(LoadingSpinner, {}, undefined, false, undefined, this) });
+var VisualizationShowcase = dynamic(() => import("@contractspec/example.visualization-showcase/ui").then((module) => module.VisualizationShowcase), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV13(LoadingSpinner, {}, undefined, false, undefined, this) });
+var AgentDashboard = dynamic(() => import("@contractspec/example.agent-console/ui").then((module) => module.AgentDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV13(LoadingSpinner, {}, undefined, false, undefined, this) });
+var AiChatAssistantDashboard = dynamic(() => import("@contractspec/example.ai-chat-assistant").then((module) => module.AiChatAssistantDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV13(LoadingSpinner, {}, undefined, false, undefined, this) });
+var WorkflowDashboard = dynamic(() => import("@contractspec/example.workflow-system/ui").then((module) => module.WorkflowDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV13(LoadingSpinner, {}, undefined, false, undefined, this) });
+var MarketplaceDashboard = dynamic(() => import("@contractspec/example.marketplace/ui").then((module) => module.MarketplaceDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV13(LoadingSpinner, {}, undefined, false, undefined, this) });
+var IntegrationDashboard = dynamic(() => import("@contractspec/example.integration-hub/ui").then((module) => module.IntegrationDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV13(LoadingSpinner, {}, undefined, false, undefined, this) });
+var AnalyticsDashboard = dynamic(() => import("@contractspec/example.analytics-dashboard").then((module) => module.AnalyticsDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV13(LoadingSpinner, {}, undefined, false, undefined, this) });
+var PREVIEW_DEFINITIONS = {
+  "saas-boilerplate": {
     title: "SaaS Boilerplate",
-    description: "Complete SaaS foundation with multi-tenant orgs, projects, settings, and billing usage.",
-    tags: ["Getting Started", "SaaS", "Business"],
-    capabilities: "Multi-tenancy, RBAC, Projects, Billing",
-    isNew: true,
-    previewUrl: "/sandbox?template=saas-boilerplate",
-    docsUrl: "/docs/templates/saas-boilerplate"
+    description: "Multi-tenant organizations, projects, settings, and billing usage tracking.",
+    component: SaasDashboard
   },
-  {
-    id: "crm-pipeline",
-    templateId: "crm-pipeline",
+  "crm-pipeline": {
     title: "CRM Pipeline",
-    description: "Sales CRM with contacts, companies, deals, pipeline stages, and task management.",
-    tags: ["CRM", "Business"],
-    capabilities: "Contacts, Deals, Pipelines, Tasks",
-    isNew: true,
-    previewUrl: "/sandbox?template=crm-pipeline",
-    docsUrl: "/docs/templates/crm-pipeline"
+    description: "Sales CRM with contacts, companies, deals, and pipeline stages.",
+    component: CrmDashboard
   },
-  {
-    id: "data-grid-showcase",
-    templateId: "data-grid-showcase",
+  "data-grid-showcase": {
     title: "Data Grid Showcase",
-    description: "Focused example for ContractSpec headless tables across client, server, and DataView-driven lanes.",
-    tags: ["Ops", "Business"],
-    capabilities: "Tables, Sorting, Pagination, Column Controls",
-    isNew: true,
-    previewUrl: "/sandbox?template=data-grid-showcase",
-    docsUrl: "/docs/examples/data-grid-showcase"
+    description: "Shared ContractSpec table primitives with client, server, and DataView-driven lanes.",
+    component: DataGridShowcase
   },
-  {
-    id: "visualization-showcase",
-    templateId: "visualization-showcase",
+  "visualization-showcase": {
     title: "Visualization Showcase",
-    description: "Canonical ContractSpec example for chart primitives, shared visualization contracts, and opinionated dashboard blocks.",
-    tags: ["Ops", "Visualization"],
-    capabilities: "Metrics, Charts, Timelines, Comparisons",
-    isNew: true,
-    previewUrl: "/sandbox?template=visualization-showcase",
-    docsUrl: "/docs/examples/visualization-showcase"
+    description: "ContractSpec-owned chart primitives rendered through shared visualization contracts and design-system wrappers.",
+    component: VisualizationShowcase
   },
-  {
-    id: "agent-console",
-    templateId: "agent-console",
+  "agent-console": {
     title: "AI Agent Console",
-    description: "AI agent orchestration platform with tools, agents, runs, and execution logs.",
-    tags: ["AI", "Ops"],
-    capabilities: "Tools, Agents, Runs, Metrics",
-    isNew: true,
-    previewUrl: "/sandbox?template=agent-console",
-    docsUrl: "/docs/examples/agent-console"
+    description: "AI agent orchestration with tools, agents, runs, and execution logs.",
+    component: AgentDashboard
   },
-  {
-    id: "ai-chat-assistant",
-    templateId: "ai-chat-assistant",
+  "ai-chat-assistant": {
     title: "AI Chat Assistant",
-    description: "Focused assistant template with reasoning, sources, suggestions, and MCP-aware tooling.",
-    tags: ["AI", "Ops"],
-    capabilities: "Chat UX, Sources, Suggestions, MCP",
-    isNew: true,
-    previewUrl: "/sandbox?template=ai-chat-assistant",
-    docsUrl: "/docs/examples/ai-chat-assistant"
+    description: "Focused assistant surface with reasoning, sources, suggestions, and MCP-aware tools.",
+    component: AiChatAssistantDashboard
   },
-  {
-    id: "workflow-system",
-    templateId: "workflow-system",
-    title: "Workflow / Approval System",
-    description: "Multi-step workflows with role-based approvals and state transitions.",
-    tags: ["Business", "Ops"],
-    capabilities: "Workflows, Approvals, State Machine",
-    isNew: true,
-    previewUrl: "/sandbox?template=workflow-system",
-    docsUrl: "/docs/examples/workflow-system"
+  "workflow-system": {
+    title: "Workflow System",
+    description: "Multi-step workflows with role-based approvals.",
+    component: WorkflowDashboard
   },
-  {
-    id: "marketplace",
-    templateId: "marketplace",
+  marketplace: {
     title: "Marketplace",
     description: "Two-sided marketplace with stores, products, orders, and payouts.",
-    tags: ["Business", "Payments"],
-    capabilities: "Stores, Products, Orders, Payouts",
-    isNew: true,
-    previewUrl: "/sandbox?template=marketplace",
-    docsUrl: "/docs/templates/marketplace"
+    component: MarketplaceDashboard
   },
-  {
-    id: "integration-hub",
-    templateId: "integration-hub",
+  "integration-hub": {
     title: "Integration Hub",
     description: "Third-party integrations with connections, sync configs, and field mapping.",
-    tags: ["Ops", "AI"],
-    capabilities: "Integrations, Connections, Sync",
-    isNew: true,
-    previewUrl: "/sandbox?template=integration-hub",
-    docsUrl: "/docs/templates/integration-hub"
+    component: IntegrationDashboard
   },
-  {
-    id: "learning-journey-studio-onboarding",
-    templateId: "learning-journey-studio-onboarding",
-    title: "Learning Journey \u2014 Studio Getting Started",
-    description: "First 30 minutes in Studio: choose template, edit spec, regenerate, playground, evolution.",
-    tags: ["Learning", "Onboarding"],
-    capabilities: "Spec-first onboarding, XP/streak, progress widget",
-    isNew: true,
-    previewUrl: "/sandbox?template=learning-journey-studio-onboarding",
-    docsUrl: "/docs/templates/learning-journey-studio-onboarding"
-  },
-  {
-    id: "learning-journey-platform-tour",
-    templateId: "learning-journey-platform-tour",
-    title: "Learning Journey \u2014 Platform Primitives Tour",
-    description: "Touch identity, audit, notifications, jobs, flags, files, metering once with guided steps.",
-    tags: ["Learning", "Platform"],
-    capabilities: "Cross-module tour with event-driven completion",
-    isNew: true,
-    previewUrl: "/sandbox?template=learning-journey-platform-tour",
-    docsUrl: "/docs/templates/learning-journey-platform-tour"
-  },
-  {
-    id: "learning-journey-crm-onboarding",
-    templateId: "learning-journey-crm-onboarding",
-    title: "Learning Journey \u2014 CRM First Win",
-    description: "Get to first closed-won deal: pipeline, contact/company, deal, stages, follow-up.",
-    tags: ["Learning", "CRM"],
-    capabilities: "CRM onboarding with XP/streak/badge",
-    isNew: true,
-    previewUrl: "/sandbox?template=learning-journey-crm-onboarding",
-    docsUrl: "/docs/templates/learning-journey-crm-onboarding"
-  },
-  {
-    id: "analytics-dashboard",
-    templateId: "analytics-dashboard",
+  "analytics-dashboard": {
     title: "Analytics Dashboard",
-    description: "Custom dashboards with widgets, saved queries, and real-time visualization.",
-    tags: ["Business", "Ops"],
-    capabilities: "Dashboards, Widgets, Queries",
-    isNew: true,
-    previewUrl: "/sandbox?template=analytics-dashboard",
-    docsUrl: "/docs/templates/analytics-dashboard"
-  },
-  {
-    id: "plumber-ops",
-    templateId: "messaging-app",
-    title: "Plumber Ops",
-    description: "Complete workflow: Quotes \u2192 Deposit \u2192 Job \u2192 Invoice \u2192 Payment. Policy-enforced approvals.",
-    tags: ["Trades", "Payments"],
-    capabilities: "Quotes, Jobs, Invoicing, Payments",
-    previewUrl: "/sandbox?template=plumber-ops",
-    docsUrl: "/docs/specs/workflows"
-  },
-  {
-    id: "coliving-management",
-    templateId: "recipe-app-i18n",
-    title: "Coliving Management",
-    description: "Coliving management: Onboarding, chores, shared wallet. Multi-party approvals built-in.",
-    tags: ["Coliving", "Finance"],
-    capabilities: "Tasks, Approvals, Payments",
-    previewUrl: "/sandbox?template=coliving-management",
-    docsUrl: "/docs/specs/workflows"
-  },
-  {
-    id: "chores-allowance",
-    templateId: "todos-app",
-    title: "Chores & Allowance",
-    description: "Family task management with approval workflows. Teach financial accountability safely.",
-    tags: ["Family", "Ops"],
-    capabilities: "Tasks, Approvals, Notifications",
-    previewUrl: "/sandbox?template=chores-allowance",
-    docsUrl: "/docs/specs/workflows"
-  },
-  {
-    id: "service-dispatch",
-    templateId: "messaging-app",
-    title: "Service Dispatch",
-    description: "Field service scheduling, routing, and invoicing. Real-time coordination with policy gates.",
-    tags: ["Ops", "Trades"],
-    capabilities: "Scheduling, Maps, Invoicing",
-    previewUrl: "/sandbox?template=service-dispatch",
-    docsUrl: "/docs/specs/workflows"
-  },
-  {
-    id: "content-review",
-    templateId: "todos-app",
-    title: "Content Review",
-    description: "Multi-stage approval workflow for content. Audit trail for every decision.",
-    tags: ["Ops"],
-    capabilities: "Workflows, Approvals, Comments",
-    previewUrl: "/sandbox?template=content-review",
-    docsUrl: "/docs/specs/workflows"
+    description: "Custom dashboards with widgets and queries.",
+    component: AnalyticsDashboard
   }
-];
-var allTags = [
-  "Getting Started",
-  "SaaS",
-  "Business",
-  "CRM",
-  "AI",
-  "Trades",
-  "Coliving",
-  "Family",
-  "Ops",
-  "Payments",
-  "Learning",
-  "Platform"
-];
-var TemplatesPage = () => {
-  const [selectedTag, setSelectedTag] = useState2(null);
-  const [search, setSearch] = useState2("");
-  const [preview, setPreview] = useState2(null);
-  const [studioSignupModalOpen, setStudioSignupModalOpen] = useState2(false);
-  const [source, setSource] = useState2("local");
-  const [selectedTemplateForCommand, setSelectedTemplateForCommand] = useState2(null);
-  const { data: registryTemplates = [], isLoading: registryLoading } = useRegistryTemplates();
-  const filtered = templates.filter((t) => {
-    const matchTag = !selectedTag || t.tags.includes(selectedTag);
-    const matchSearch = !search || t.title.toLowerCase().includes(search.toLowerCase()) || t.description.toLowerCase().includes(search.toLowerCase());
-    return matchTag && matchSearch;
-  });
-  const commandId = selectedTemplateForCommand ? "templateId" in selectedTemplateForCommand ? selectedTemplateForCommand.templateId : selectedTemplateForCommand.id : "";
-  return /* @__PURE__ */ jsxDEV12(TooltipProvider, {
-    children: [
-      /* @__PURE__ */ jsxDEV12("main", {
-        children: [
-          /* @__PURE__ */ jsxDEV12("section", {
-            className: "section-padding hero-gradient border-border/70 border-b",
-            children: /* @__PURE__ */ jsxDEV12("div", {
-              className: "editorial-shell space-y-8",
+};
+function TemplatePreviewContent({
+  templateId
+}) {
+  const preview = PREVIEW_DEFINITIONS[templateId];
+  if (!preview) {
+    return null;
+  }
+  const PreviewComponent = preview.component;
+  return /* @__PURE__ */ jsxDEV13(TemplateShell, {
+    title: preview.title,
+    description: preview.description,
+    showSaveAction: false,
+    children: /* @__PURE__ */ jsxDEV13(PreviewComponent, {}, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/templates/TemplatesBrowseControls.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { Search } from "lucide-react";
+import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+"use client";
+function TemplatesBrowseControls({
+  registryConfigured,
+  availableSources,
+  source,
+  onSourceChange,
+  search,
+  onSearchChange,
+  selectedTag,
+  onTagChange,
+  availableTags
+}) {
+  return /* @__PURE__ */ jsxDEV14("section", {
+    className: "editorial-section",
+    children: /* @__PURE__ */ jsxDEV14("div", {
+      className: "editorial-shell space-y-6",
+      children: [
+        /* @__PURE__ */ jsxDEV14("div", {
+          className: "flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between",
+          children: [
+            /* @__PURE__ */ jsxDEV14("div", {
+              className: "max-w-3xl space-y-3",
               children: [
-                /* @__PURE__ */ jsxDEV12("div", {
-                  className: "max-w-4xl space-y-5",
-                  children: [
-                    /* @__PURE__ */ jsxDEV12("p", {
-                      className: "editorial-kicker",
-                      children: "Proof through real scenarios"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("h1", {
-                      className: "editorial-title",
-                      children: "Templates that show the open system in practice."
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("p", {
-                      className: "editorial-subtitle",
-                      children: "These scenarios are the fastest way to understand ContractSpec: explicit contracts, aligned surfaces, and an adoption path from OSS exploration into Studio deployment."
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV12("div", {
-                  className: "editorial-proof-strip",
-                  children: [
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "editorial-stat",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("span", {
-                          className: "editorial-stat-value",
-                          children: templates.length
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("span", {
-                          className: "editorial-label",
-                          children: "curated scenarios"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "editorial-stat",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("span", {
-                          className: "editorial-stat-value",
-                          children: "2"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("span", {
-                          className: "editorial-label",
-                          children: "entry paths"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "editorial-stat",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("span", {
-                          className: "editorial-stat-value",
-                          children: "OSS"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("span", {
-                          className: "editorial-label",
-                          children: "first, Studio second"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
+                /* @__PURE__ */ jsxDEV14("p", {
+                  className: "editorial-kicker",
+                  children: "Browse by source"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV14("h2", {
+                  className: "font-serif text-4xl tracking-[-0.04em]",
+                  children: "Use local scenarios for core proof, then scan the community."
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV14("p", {
+                  className: "text-muted-foreground text-sm leading-7",
+                  children: registryConfigured ? "Local templates show the official adoption path. Community templates show where the ecosystem is pushing the system next." : "Local templates show the official adoption path. Community browsing appears automatically when a registry URL is configured."
+                }, undefined, false, undefined, this)
               ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV12("section", {
-            className: "editorial-section",
-            children: /* @__PURE__ */ jsxDEV12("div", {
-              className: "editorial-shell space-y-6",
+            }, undefined, true, undefined, this),
+            registryConfigured ? /* @__PURE__ */ jsxDEV14("div", {
+              className: "flex gap-2",
+              children: availableSources.map((option) => /* @__PURE__ */ jsxDEV14("button", {
+                onClick: () => onSourceChange(option),
+                className: cn("rounded-full px-4 py-2 font-medium text-sm transition-colors", {
+                  "bg-primary text-primary-foreground": source === option,
+                  "border border-border bg-card hover:bg-card/80": source !== option
+                }),
+                "aria-pressed": source === option,
+                children: option === "local" ? "Local" : "Community"
+              }, option, false, undefined, this))
+            }, undefined, false, undefined, this) : null
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV14("div", {
+          className: "editorial-panel space-y-5",
+          children: [
+            /* @__PURE__ */ jsxDEV14("div", {
+              className: "relative",
               children: [
-                /* @__PURE__ */ jsxDEV12("div", {
-                  className: "flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between",
-                  children: [
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "max-w-3xl space-y-3",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("p", {
-                          className: "editorial-kicker",
-                          children: "Browse by source"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("h2", {
-                          className: "font-serif text-4xl tracking-[-0.04em]",
-                          children: "Use local scenarios for core proof, then scan the community."
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("p", {
-                          className: "text-muted-foreground text-sm leading-7",
-                          children: "Local templates show the official adoption path. Community templates show where the ecosystem is pushing the system next."
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "flex gap-2",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("button", {
-                          onClick: () => setSource("local"),
-                          className: cn("rounded-full px-4 py-2 font-medium text-sm transition-colors", {
-                            "bg-primary text-primary-foreground": source === "local",
-                            "border border-border bg-card hover:bg-card/80": source !== "local"
-                          }),
-                          "aria-pressed": source === "local",
-                          children: "Local"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("button", {
-                          onClick: () => setSource("registry"),
-                          className: cn("rounded-full px-4 py-2 font-medium text-sm transition-colors", {
-                            "bg-primary text-primary-foreground": source === "registry",
-                            "border border-border bg-card hover:bg-card/80": source !== "registry"
-                          }),
-                          "aria-pressed": source === "registry",
-                          children: "Community"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV12("div", {
-                  className: "editorial-panel space-y-5",
-                  children: [
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "relative",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12(Search, {
-                          className: "absolute top-3.5 left-4 text-muted-foreground",
-                          size: 18
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("input", {
-                          type: "text",
-                          placeholder: "Search scenarios, industries, or capabilities",
-                          value: search,
-                          onChange: (e) => setSearch(e.target.value),
-                          className: "w-full rounded-full border border-border bg-background px-12 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring",
-                          "aria-label": "Search templates"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "flex flex-wrap gap-2",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("button", {
-                          onClick: () => setSelectedTag(null),
-                          className: cn("rounded-full px-4 py-2 font-medium text-sm transition-colors", {
-                            "bg-primary text-primary-foreground": selectedTag === null,
-                            "border border-border bg-card hover:bg-card/80": selectedTag !== null
-                          }),
-                          "aria-pressed": selectedTag === null,
-                          children: "All"
-                        }, undefined, false, undefined, this),
-                        allTags.map((tag) => /* @__PURE__ */ jsxDEV12("button", {
-                          onClick: () => setSelectedTag(tag),
-                          className: cn("rounded-full px-4 py-2 font-medium text-sm transition-colors", {
-                            "bg-primary text-primary-foreground": selectedTag === tag,
-                            "border border-border bg-card hover:bg-card/80": selectedTag !== tag
-                          }),
-                          "aria-pressed": selectedTag === tag,
-                          children: tag
-                        }, tag, false, undefined, this))
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
+                /* @__PURE__ */ jsxDEV14(Search, {
+                  className: "absolute top-3.5 left-4 text-muted-foreground",
+                  size: 18
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV14("input", {
+                  type: "text",
+                  placeholder: "Search scenarios, industries, or tags",
+                  value: search,
+                  onChange: (event) => onSearchChange(event.target.value),
+                  className: "w-full rounded-full border border-border bg-background px-12 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring",
+                  "aria-label": "Search templates"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV14("div", {
+              className: "flex flex-wrap gap-2",
+              children: [
+                /* @__PURE__ */ jsxDEV14("button", {
+                  onClick: () => onTagChange(null),
+                  className: cn("rounded-full px-4 py-2 font-medium text-sm transition-colors", {
+                    "bg-primary text-primary-foreground": selectedTag === null,
+                    "border border-border bg-card hover:bg-card/80": selectedTag !== null
+                  }),
+                  "aria-pressed": selectedTag === null,
+                  children: "All"
+                }, undefined, false, undefined, this),
+                availableTags.map((tag) => /* @__PURE__ */ jsxDEV14("button", {
+                  onClick: () => onTagChange(tag),
+                  className: cn("rounded-full px-4 py-2 font-medium text-sm transition-colors", {
+                    "bg-primary text-primary-foreground": selectedTag === tag,
+                    "border border-border bg-card hover:bg-card/80": selectedTag !== tag
+                  }),
+                  "aria-pressed": selectedTag === tag,
+                  children: tag
+                }, tag, false, undefined, this))
               ]
             }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV12("section", {
-            className: "section-padding",
-            children: /* @__PURE__ */ jsxDEV12("div", {
-              className: "editorial-shell",
-              children: source === "registry" ? registryLoading ? /* @__PURE__ */ jsxDEV12("div", {
-                className: "py-12 text-center",
-                children: /* @__PURE__ */ jsxDEV12("p", {
-                  className: "text-muted-foreground",
-                  children: "Loading community templates\u2026"
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/templates/template-new.ts
+var NEW_TEMPLATE_IDS = [
+  "minimal",
+  "messaging-agent-actions",
+  "policy-safe-knowledge-assistant",
+  "visualization-showcase"
+];
+var NEW_TEMPLATE_ID_SET = new Set(NEW_TEMPLATE_IDS);
+function isNewTemplateId(templateId) {
+  return NEW_TEMPLATE_ID_SET.has(templateId);
+}
+
+// src/components/templates/template-catalog.ts
+import { listExamples, listTemplates } from "@contractspec/module.examples";
+var NEW_TEMPLATE_INDEX = new Map(NEW_TEMPLATE_IDS.map((templateId, index) => [templateId, index]));
+function buildLocalTemplateCatalog(examples = listExamples(), templates = listTemplates()) {
+  const templatesById = new Map(templates.map((template) => [template.id, template]));
+  return examples.filter((example) => example.meta.visibility === "public" && example.surfaces.templates).map((example) => {
+    const template = templatesById.get(example.meta.key);
+    const tags = Array.from(new Set(example.meta.tags.map((tag) => tag.trim()).filter(Boolean))).sort((left, right) => left.localeCompare(right));
+    return {
+      id: example.meta.key,
+      title: example.meta.title ?? template?.name ?? example.meta.key,
+      description: example.meta.summary ?? example.meta.description,
+      tags,
+      kind: example.meta.kind,
+      stability: example.meta.stability,
+      previewUrl: template?.preview?.demoUrl ?? `/sandbox?template=${encodeURIComponent(example.meta.key)}`,
+      featureList: [...template?.features ?? []],
+      sandboxModes: example.surfaces.sandbox.modes,
+      renderTargets: [...template?.renderTargets ?? []],
+      isNew: isNewTemplateId(example.meta.key),
+      packageName: example.entrypoints.packageName
+    };
+  }).sort(compareLocalTemplateCatalogItems);
+}
+function matchesTemplateFilters(template, search, selectedTag) {
+  const haystack = [
+    template.title,
+    template.description,
+    template.tags.join(" ")
+  ].join(" ").toLowerCase();
+  const searchTokens = search.trim().toLowerCase().split(/\s+/).filter(Boolean);
+  const matchesSearch = searchTokens.length === 0 || searchTokens.every((token) => haystack.includes(token));
+  const matchesTag = selectedTag === null || template.tags.includes(selectedTag);
+  return matchesSearch && matchesTag;
+}
+function formatExampleKindLabel(kind) {
+  return kind.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
+function formatStabilityLabel(stability) {
+  return stability.split("_").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
+function compareLocalTemplateCatalogItems(left, right) {
+  const leftNewIndex = NEW_TEMPLATE_INDEX.get(left.id);
+  const rightNewIndex = NEW_TEMPLATE_INDEX.get(right.id);
+  if (leftNewIndex !== undefined || rightNewIndex !== undefined) {
+    if (leftNewIndex === undefined) {
+      return 1;
+    }
+    if (rightNewIndex === undefined) {
+      return -1;
+    }
+    return leftNewIndex - rightNewIndex;
+  }
+  return left.title.localeCompare(right.title);
+}
+
+// src/components/templates/template-preview.ts
+var INLINE_TEMPLATE_PREVIEW_IDS = [
+  "agent-console",
+  "ai-chat-assistant",
+  "analytics-dashboard",
+  "crm-pipeline",
+  "data-grid-showcase",
+  "integration-hub",
+  "marketplace",
+  "saas-boilerplate",
+  "visualization-showcase",
+  "workflow-system"
+];
+var INLINE_TEMPLATE_PREVIEW_SET = new Set(INLINE_TEMPLATE_PREVIEW_IDS);
+function supportsInlineTemplatePreview(templateId) {
+  return INLINE_TEMPLATE_PREVIEW_SET.has(templateId);
+}
+function getLocalTemplatePreviewAction(template) {
+  if (supportsInlineTemplatePreview(template.id)) {
+    return { kind: "modal", templateId: template.id };
+  }
+  return { kind: "sandbox", href: template.previewUrl };
+}
+function getRegistryTemplatePreviewAction(template, localTemplate) {
+  if (!localTemplate) {
+    return { kind: "disabled" };
+  }
+  return getLocalTemplatePreviewAction(localTemplate);
+}
+
+// src/components/templates/TemplatesCatalogSection.tsx
+import Link8 from "next/link";
+import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
+"use client";
+function TemplatesCatalogSection({
+  source,
+  registryConfigured,
+  registryLoading,
+  localTemplates,
+  registryTemplates,
+  localTemplateById,
+  onPreview,
+  onUseTemplate
+}) {
+  const showRegistry = source === "registry" && registryConfigured;
+  return /* @__PURE__ */ jsxDEV15("section", {
+    className: "section-padding",
+    children: /* @__PURE__ */ jsxDEV15("div", {
+      className: "editorial-shell",
+      children: showRegistry ? registryLoading ? /* @__PURE__ */ jsxDEV15("div", {
+        className: "py-12 text-center",
+        children: /* @__PURE__ */ jsxDEV15("p", {
+          className: "text-muted-foreground",
+          children: "Loading community templates\u2026"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this) : registryTemplates.length === 0 ? /* @__PURE__ */ jsxDEV15("div", {
+        className: "py-12 text-center",
+        children: /* @__PURE__ */ jsxDEV15("p", {
+          className: "text-muted-foreground",
+          children: "No community templates found."
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV15("div", {
+        className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+        children: registryTemplates.map((template) => {
+          const localTemplate = localTemplateById.get(template.id);
+          const previewAction = getRegistryTemplatePreviewAction(template, localTemplate);
+          return /* @__PURE__ */ jsxDEV15(TemplateCard, {
+            title: template.name,
+            description: template.description,
+            metaBadges: ["Community"],
+            tags: template.tags,
+            previewAction: previewAction.kind === "modal" ? /* @__PURE__ */ jsxDEV15("button", {
+              className: "btn-ghost flex-1 text-center text-xs",
+              onClick: () => onPreview(template.id),
+              children: "Preview"
+            }, undefined, false, undefined, this) : previewAction.kind === "sandbox" ? /* @__PURE__ */ jsxDEV15(Link8, {
+              href: previewAction.href,
+              className: "btn-ghost flex-1 text-center text-xs",
+              children: "Open Sandbox"
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV15("button", {
+              className: "btn-ghost flex-1 cursor-not-allowed text-center text-xs opacity-60",
+              type: "button",
+              disabled: true,
+              children: "Preview Unavailable"
+            }, undefined, false, undefined, this),
+            useAction: /* @__PURE__ */ jsxDEV15("button", {
+              className: "btn-primary flex-1 text-center text-xs",
+              onClick: () => onUseTemplate(template.id, "registry"),
+              children: "Use Template"
+            }, undefined, false, undefined, this)
+          }, template.id, false, undefined, this);
+        })
+      }, undefined, false, undefined, this) : localTemplates.length === 0 ? /* @__PURE__ */ jsxDEV15("div", {
+        className: "py-12 text-center",
+        children: /* @__PURE__ */ jsxDEV15("p", {
+          className: "text-muted-foreground",
+          children: "No templates match your filters. Try a different search."
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV15("div", {
+        className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+        children: localTemplates.map((template) => {
+          const previewAction = getLocalTemplatePreviewAction(template);
+          return /* @__PURE__ */ jsxDEV15(TemplateCard, {
+            title: template.title,
+            description: template.description,
+            isNew: template.isNew,
+            metaBadges: [
+              formatExampleKindLabel(template.kind),
+              formatStabilityLabel(template.stability)
+            ],
+            tags: template.tags,
+            featureList: template.featureList,
+            previewAction: previewAction.kind === "modal" ? /* @__PURE__ */ jsxDEV15("button", {
+              className: "btn-ghost flex-1 text-center text-xs",
+              onClick: () => onPreview(template.id),
+              children: "Preview"
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV15(Link8, {
+              href: previewAction.href,
+              className: "btn-ghost flex-1 text-center text-xs",
+              children: "Open Sandbox"
+            }, undefined, false, undefined, this),
+            useAction: /* @__PURE__ */ jsxDEV15("button", {
+              className: "btn-primary flex-1 text-center text-xs",
+              onClick: () => onUseTemplate(template.id, "local"),
+              children: "Use Template"
+            }, undefined, false, undefined, this)
+          }, template.id, false, undefined, this);
+        })
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/templates/TemplatesHeroSection.tsx
+import { jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
+function TemplatesHeroSection({
+  localTemplateCount,
+  sourceCount
+}) {
+  return /* @__PURE__ */ jsxDEV16("section", {
+    className: "section-padding hero-gradient border-border/70 border-b",
+    children: /* @__PURE__ */ jsxDEV16("div", {
+      className: "editorial-shell space-y-8",
+      children: [
+        /* @__PURE__ */ jsxDEV16("div", {
+          className: "max-w-4xl space-y-5",
+          children: [
+            /* @__PURE__ */ jsxDEV16("p", {
+              className: "editorial-kicker",
+              children: "Proof through real scenarios"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV16("h1", {
+              className: "editorial-title",
+              children: "Templates that show the open system in practice."
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV16("p", {
+              className: "editorial-subtitle",
+              children: "These scenarios are the fastest way to understand ContractSpec: explicit contracts, aligned surfaces, and an adoption path from OSS exploration into Studio deployment."
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV16("div", {
+          className: "editorial-proof-strip",
+          children: [
+            /* @__PURE__ */ jsxDEV16("div", {
+              className: "editorial-stat",
+              children: [
+                /* @__PURE__ */ jsxDEV16("span", {
+                  className: "editorial-stat-value",
+                  children: localTemplateCount
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV16("span", {
+                  className: "editorial-label",
+                  children: "curated scenarios"
                 }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this) : registryTemplates.length === 0 ? /* @__PURE__ */ jsxDEV12("div", {
-                className: "py-12 text-center",
-                children: /* @__PURE__ */ jsxDEV12("p", {
-                  className: "text-muted-foreground",
-                  children: "No community templates found (configure `NEXT_PUBLIC_CONTRACTSPEC_REGISTRY_URL`)."
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV16("div", {
+              className: "editorial-stat",
+              children: [
+                /* @__PURE__ */ jsxDEV16("span", {
+                  className: "editorial-stat-value",
+                  children: sourceCount
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV16("span", {
+                  className: "editorial-label",
+                  children: "entry paths"
                 }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV12("div", {
-                className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
-                children: registryTemplates.map((t) => /* @__PURE__ */ jsxDEV12("div", {
-                  className: "editorial-panel relative flex flex-col space-y-4 transition-colors hover:border-[color:rgb(162_79_42_/_0.55)]",
-                  children: [
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("h3", {
-                          className: "font-serif text-2xl tracking-[-0.03em]",
-                          children: t.name
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("p", {
-                          className: "mt-1 text-muted-foreground text-sm",
-                          children: t.description
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "flex-1 space-y-2",
-                      children: /* @__PURE__ */ jsxDEV12("div", {
-                        className: "flex flex-wrap gap-1",
-                        children: t.tags.map((tag) => /* @__PURE__ */ jsxDEV12("span", {
-                          className: "rounded-full border border-border bg-muted px-3 py-1 text-[11px] text-muted-foreground",
-                          children: tag
-                        }, tag, false, undefined, this))
-                      }, undefined, false, undefined, this)
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "flex gap-2 pt-4",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12(Tooltip, {
-                          children: [
-                            /* @__PURE__ */ jsxDEV12(TooltipTrigger, {
-                              asChild: true,
-                              children: /* @__PURE__ */ jsxDEV12("button", {
-                                className: "btn-ghost flex-1 text-center text-xs",
-                                onClick: () => {
-                                  const local = getTemplate(t.id);
-                                  if (!local) {
-                                    setSelectedTemplateForCommand(t);
-                                    return;
-                                  }
-                                  setPreview(t.id);
-                                },
-                                children: "Preview"
-                              }, undefined, false, undefined, this)
-                            }, undefined, false, undefined, this),
-                            /* @__PURE__ */ jsxDEV12(TooltipContent, {
-                              children: /* @__PURE__ */ jsxDEV12("p", {
-                                children: "Preview this template (if available locally)"
-                              }, undefined, false, undefined, this)
-                            }, undefined, false, undefined, this)
-                          ]
-                        }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV12(Tooltip, {
-                          children: [
-                            /* @__PURE__ */ jsxDEV12(TooltipTrigger, {
-                              asChild: true,
-                              children: /* @__PURE__ */ jsxDEV12("button", {
-                                className: "btn-primary flex-1 text-center text-xs",
-                                onClick: () => {
-                                  captureAnalyticsEvent2(analyticsEventNames2.EXAMPLE_REPO_OPEN, {
-                                    surface: "templates",
-                                    templateId: t.id,
-                                    source: "registry"
-                                  });
-                                  setSelectedTemplateForCommand(t);
-                                },
-                                children: "Use Template"
-                              }, undefined, false, undefined, this)
-                            }, undefined, false, undefined, this),
-                            /* @__PURE__ */ jsxDEV12(TooltipContent, {
-                              children: /* @__PURE__ */ jsxDEV12("p", {
-                                children: "Get CLI command"
-                              }, undefined, false, undefined, this)
-                            }, undefined, false, undefined, this)
-                          ]
-                        }, undefined, true, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, t.id, true, undefined, this))
-              }, undefined, false, undefined, this) : filtered.length === 0 ? /* @__PURE__ */ jsxDEV12("div", {
-                className: "py-12 text-center",
-                children: /* @__PURE__ */ jsxDEV12("p", {
-                  className: "text-muted-foreground",
-                  children: "No templates match your filters. Try a different search."
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV16("div", {
+              className: "editorial-stat",
+              children: [
+                /* @__PURE__ */ jsxDEV16("span", {
+                  className: "editorial-stat-value",
+                  children: "OSS"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV16("span", {
+                  className: "editorial-label",
+                  children: "first, Studio second"
                 }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV12("div", {
-                className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
-                children: filtered.map((template, i) => /* @__PURE__ */ jsxDEV12("div", {
-                  className: "editorial-panel relative flex flex-col space-y-4 transition-colors hover:border-[color:rgb(162_79_42_/_0.55)]",
-                  children: [
-                    "isNew" in template && template.isNew && /* @__PURE__ */ jsxDEV12("span", {
-                      className: "absolute top-4 right-4 rounded-full bg-[color:var(--success)] px-2.5 py-1 font-medium text-[11px] text-white uppercase",
-                      children: "New"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("h3", {
-                          className: "font-serif text-2xl tracking-[-0.03em]",
-                          children: template.title
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("p", {
-                          className: "mt-1 text-muted-foreground text-sm",
-                          children: template.description
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "flex-1 space-y-2",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("p", {
-                          className: "text-muted-foreground text-xs",
-                          children: [
-                            /* @__PURE__ */ jsxDEV12("span", {
-                              className: "font-medium text-foreground",
-                              children: "Capabilities:"
-                            }, undefined, false, undefined, this),
-                            " ",
-                            template.capabilities
-                          ]
-                        }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("div", {
-                          className: "flex flex-wrap gap-1",
-                          children: template.tags.map((tag) => /* @__PURE__ */ jsxDEV12("span", {
-                            className: "rounded-full border border-border bg-muted px-3 py-1 text-[11px] text-muted-foreground",
-                            children: tag
-                          }, tag, false, undefined, this))
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "flex gap-2 pt-4",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12(Tooltip, {
-                          children: [
-                            /* @__PURE__ */ jsxDEV12(TooltipTrigger, {
-                              asChild: true,
-                              children: /* @__PURE__ */ jsxDEV12("button", {
-                                className: "btn-ghost flex-1 text-center text-xs",
-                                onClick: () => setPreview(template.templateId),
-                                children: "Preview"
-                              }, undefined, false, undefined, this)
-                            }, undefined, false, undefined, this),
-                            /* @__PURE__ */ jsxDEV12(TooltipContent, {
-                              children: /* @__PURE__ */ jsxDEV12("p", {
-                                children: "Preview this template in a modal"
-                              }, undefined, false, undefined, this)
-                            }, undefined, false, undefined, this)
-                          ]
-                        }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV12(Tooltip, {
-                          children: [
-                            /* @__PURE__ */ jsxDEV12(TooltipTrigger, {
-                              asChild: true,
-                              children: /* @__PURE__ */ jsxDEV12("button", {
-                                className: "btn-primary flex-1 text-center text-xs",
-                                onClick: () => {
-                                  captureAnalyticsEvent2(analyticsEventNames2.EXAMPLE_REPO_OPEN, {
-                                    surface: "templates",
-                                    templateId: template.templateId,
-                                    source: "local"
-                                  });
-                                  setSelectedTemplateForCommand(template);
-                                },
-                                children: "Use Template"
-                              }, undefined, false, undefined, this)
-                            }, undefined, false, undefined, this),
-                            /* @__PURE__ */ jsxDEV12(TooltipContent, {
-                              children: /* @__PURE__ */ jsxDEV12("p", {
-                                children: "Get CLI command"
-                              }, undefined, false, undefined, this)
-                            }, undefined, false, undefined, this)
-                          ]
-                        }, undefined, true, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, i, true, undefined, this))
-              }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/templates/TemplatesNextStepsSection.tsx
+import Link9 from "next/link";
+import { jsxDEV as jsxDEV17 } from "react/jsx-dev-runtime";
+function TemplatesNextStepsSection() {
+  return /* @__PURE__ */ jsxDEV17("section", {
+    className: "editorial-section bg-striped",
+    children: /* @__PURE__ */ jsxDEV17("div", {
+      className: "editorial-shell space-y-8",
+      children: [
+        /* @__PURE__ */ jsxDEV17("div", {
+          className: "max-w-3xl space-y-4",
+          children: [
+            /* @__PURE__ */ jsxDEV17("p", {
+              className: "editorial-kicker",
+              children: "From template to real system"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV17("h2", {
+              className: "font-serif text-4xl tracking-[-0.04em] md:text-5xl",
+              children: "Templates become useful when the system can absorb more context."
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV17("p", {
+              className: "editorial-copy",
+              children: "Use templates to prove the base flow, then layer integrations, knowledge, and runtime behavior on top without losing the same contract source."
             }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV12("section", {
-            className: "editorial-section bg-striped",
-            children: /* @__PURE__ */ jsxDEV12("div", {
-              className: "editorial-shell space-y-8",
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV17("div", {
+          className: "grid gap-6 md:grid-cols-3",
+          children: [
+            /* @__PURE__ */ jsxDEV17("div", {
+              className: "editorial-panel space-y-4",
               children: [
-                /* @__PURE__ */ jsxDEV12("div", {
-                  className: "max-w-3xl space-y-4",
-                  children: [
-                    /* @__PURE__ */ jsxDEV12("p", {
-                      className: "editorial-kicker",
-                      children: "From template to real system"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("h2", {
-                      className: "font-serif text-4xl tracking-[-0.04em] md:text-5xl",
-                      children: "Templates become useful when the system can absorb more context."
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("p", {
-                      className: "editorial-copy",
-                      children: "Use templates to prove the base flow, then layer integrations, knowledge, and runtime behavior on top without losing the same contract source."
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV12("div", {
-                  className: "grid gap-6 md:grid-cols-3",
-                  children: [
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "editorial-panel space-y-4",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("div", {
-                          className: "text-3xl",
-                          children: "\uD83D\uDCB3"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("h3", {
-                          className: "font-serif text-2xl tracking-[-0.03em]",
-                          children: "Add payments"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("p", {
-                          className: "text-muted-foreground text-sm",
-                          children: "Connect Stripe to any template for payment processing, subscriptions, and invoicing. Type-safe and policy-enforced."
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12(Link8, {
-                          href: "/docs/integrations/stripe",
-                          className: "font-medium text-[color:var(--blue)] text-sm hover:opacity-80",
-                          children: "Learn more \u2192"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "editorial-panel space-y-4",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("div", {
-                          className: "text-3xl",
-                          children: "\uD83D\uDCE7"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("h3", {
-                          className: "font-serif text-2xl tracking-[-0.03em]",
-                          children: "Add notifications"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("p", {
-                          className: "text-muted-foreground text-sm",
-                          children: "Send transactional emails via Postmark or Resend. Process inbound emails with Gmail API. SMS via Twilio."
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12(Link8, {
-                          href: "/docs/integrations",
-                          className: "font-medium text-[color:var(--blue)] text-sm hover:opacity-80",
-                          children: "View integrations \u2192"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "editorial-panel space-y-4",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("div", {
-                          className: "text-3xl",
-                          children: "\uD83E\uDDE0"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("h3", {
-                          className: "font-serif text-2xl tracking-[-0.03em]",
-                          children: "Add AI and knowledge"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("p", {
-                          className: "text-muted-foreground text-sm",
-                          children: "Power templates with OpenAI, vector search via Qdrant, and structured knowledge spaces for context-aware workflows."
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12(Link8, {
-                          href: "/docs/knowledge",
-                          className: "font-medium text-[color:var(--blue)] text-sm hover:opacity-80",
-                          children: "Learn about knowledge \u2192"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV12("div", {
-                  className: "pt-4 text-center",
-                  children: [
-                    /* @__PURE__ */ jsxDEV12("p", {
-                      className: "mb-4 text-muted-foreground text-sm",
-                      children: "All integrations are configured per-tenant with automatic health checks and credential rotation."
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12(Link8, {
-                      href: "/docs/architecture",
-                      className: "btn-primary",
-                      children: "View Architecture"
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
+                /* @__PURE__ */ jsxDEV17("div", {
+                  className: "text-3xl",
+                  children: "\uD83D\uDCB3"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV17("h3", {
+                  className: "font-serif text-2xl tracking-[-0.03em]",
+                  children: "Add payments"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV17("p", {
+                  className: "text-muted-foreground text-sm",
+                  children: "Connect Stripe to any template for payment processing, subscriptions, and invoicing. Type-safe and policy-enforced."
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV17(Link9, {
+                  href: "/docs/integrations/stripe",
+                  className: "font-medium text-[color:var(--blue)] text-sm hover:opacity-80",
+                  children: "Learn more \u2192"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV17("div", {
+              className: "editorial-panel space-y-4",
+              children: [
+                /* @__PURE__ */ jsxDEV17("div", {
+                  className: "text-3xl",
+                  children: "\uD83D\uDCE7"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV17("h3", {
+                  className: "font-serif text-2xl tracking-[-0.03em]",
+                  children: "Add notifications"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV17("p", {
+                  className: "text-muted-foreground text-sm",
+                  children: "Send transactional emails via Postmark or Resend. Process inbound emails with Gmail API. SMS via Twilio."
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV17(Link9, {
+                  href: "/docs/integrations",
+                  className: "font-medium text-[color:var(--blue)] text-sm hover:opacity-80",
+                  children: "View integrations \u2192"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV17("div", {
+              className: "editorial-panel space-y-4",
+              children: [
+                /* @__PURE__ */ jsxDEV17("div", {
+                  className: "text-3xl",
+                  children: "\uD83E\uDDE0"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV17("h3", {
+                  className: "font-serif text-2xl tracking-[-0.03em]",
+                  children: "Add AI and knowledge"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV17("p", {
+                  className: "text-muted-foreground text-sm",
+                  children: "Power templates with OpenAI, vector search via Qdrant, and structured knowledge spaces for context-aware workflows."
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV17(Link9, {
+                  href: "/docs/knowledge",
+                  className: "font-medium text-[color:var(--blue)] text-sm hover:opacity-80",
+                  children: "Learn about knowledge \u2192"
+                }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV17("div", {
+          className: "pt-4 text-center",
+          children: [
+            /* @__PURE__ */ jsxDEV17("p", {
+              className: "mb-4 text-muted-foreground text-sm",
+              children: "All integrations are configured per-tenant with automatic health checks and credential rotation."
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV17(Link9, {
+              href: "/docs/architecture",
+              className: "btn-primary",
+              children: "View Architecture"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/templates/TemplatesPreviewModal.tsx
+import { Dialog as Dialog3, DialogContent as DialogContent3 } from "@contractspec/lib.ui-kit-web/ui/dialog";
+import { ScrollArea } from "@contractspec/lib.ui-kit-web/ui/scroll-area";
+import { TemplateRuntimeProvider } from "@contractspec/module.examples";
+import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
+"use client";
+function TemplatePreviewModal({
+  templateId,
+  onClose
+}) {
+  if (!supportsInlineTemplatePreview(templateId)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxDEV18(Dialog3, {
+    open: true,
+    onOpenChange: (open) => !open && onClose(),
+    children: /* @__PURE__ */ jsxDEV18(DialogContent3, {
+      className: "mb-8 flex h-[calc(100vh-2rem)] min-w-[calc(100vw-2rem)] flex-col justify-between gap-0 p-0",
+      children: /* @__PURE__ */ jsxDEV18(ScrollArea, {
+        className: "flex flex-col justify-between overflow-hidden",
+        children: /* @__PURE__ */ jsxDEV18(TemplateRuntimeProvider, {
+          templateId,
+          projectId: `marketing-preview-${templateId}`,
+          children: /* @__PURE__ */ jsxDEV18(TemplatePreviewContent, {
+            templateId
           }, undefined, false, undefined, this)
+        }, templateId, false, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/templates/template-source.ts
+function isRegistryConfigured(registryUrl) {
+  return Boolean(registryUrl?.trim());
+}
+function getAvailableTemplateSources(registryUrl) {
+  return isRegistryConfigured(registryUrl) ? ["local", "registry"] : ["local"];
+}
+
+// src/components/templates/TemplatesClientPage.tsx
+import {
+  analyticsEventNames as analyticsEventNames3,
+  captureAnalyticsEvent as captureAnalyticsEvent3
+} from "@contractspec/bundle.library/libs/posthog/client";
+import { useRegistryTemplates } from "@contractspec/lib.example-shared-ui";
+import {
+  Dialog as Dialog4,
+  DialogContent as DialogContent4,
+  DialogDescription as DialogDescription3,
+  DialogHeader as DialogHeader3,
+  DialogTitle as DialogTitle3
+} from "@contractspec/lib.ui-kit-web/ui/dialog";
+import { useMemo, useState as useState2 } from "react";
+import { jsxDEV as jsxDEV19, Fragment } from "react/jsx-dev-runtime";
+"use client";
+var REGISTRY_URL = process.env.NEXT_PUBLIC_CONTRACTSPEC_REGISTRY_URL;
+var TemplatesPage = () => {
+  const [selectedTag, setSelectedTag] = useState2(null);
+  const [search, setSearch] = useState2("");
+  const [previewTemplateId, setPreviewTemplateId] = useState2(null);
+  const [studioSignupModalOpen, setStudioSignupModalOpen] = useState2(false);
+  const [selectedTemplateId, setSelectedTemplateId] = useState2(null);
+  const [source, setSource] = useState2("local");
+  const registryConfigured = isRegistryConfigured(REGISTRY_URL);
+  const availableSources = getAvailableTemplateSources(REGISTRY_URL);
+  const localTemplates = useMemo(() => buildLocalTemplateCatalog(), []);
+  const localTemplateById = useMemo(() => new Map(localTemplates.map((template) => [template.id, template])), [localTemplates]);
+  const availableTags = useMemo(() => Array.from(new Set(localTemplates.flatMap((template) => template.tags))).sort((left, right) => left.localeCompare(right)), [localTemplates]);
+  const { data: registryTemplates = [], isLoading: registryLoading } = useRegistryTemplates();
+  const filteredLocalTemplates = useMemo(() => localTemplates.filter((template) => matchesTemplateFilters(template, search, selectedTag)), [localTemplates, search, selectedTag]);
+  const filteredRegistryTemplates = useMemo(() => registryTemplates.filter((template) => matchesTemplateFilters({
+    title: template.name,
+    description: template.description,
+    tags: template.tags
+  }, search, selectedTag)), [registryTemplates, search, selectedTag]);
+  return /* @__PURE__ */ jsxDEV19(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxDEV19("main", {
+        children: [
+          /* @__PURE__ */ jsxDEV19(TemplatesHeroSection, {
+            localTemplateCount: localTemplates.length,
+            sourceCount: availableSources.length
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV19(TemplatesBrowseControls, {
+            registryConfigured,
+            availableSources,
+            source,
+            onSourceChange: setSource,
+            search,
+            onSearchChange: setSearch,
+            selectedTag,
+            onTagChange: setSelectedTag,
+            availableTags
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV19(TemplatesCatalogSection, {
+            source,
+            registryConfigured,
+            registryLoading,
+            localTemplates: filteredLocalTemplates,
+            registryTemplates: filteredRegistryTemplates,
+            localTemplateById,
+            onPreview: setPreviewTemplateId,
+            onUseTemplate: (templateId, templateSource) => {
+              captureAnalyticsEvent3(analyticsEventNames3.EXAMPLE_REPO_OPEN, {
+                surface: "templates",
+                templateId,
+                source: templateSource
+              });
+              setSelectedTemplateId(templateId);
+            }
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV19(TemplatesNextStepsSection, {}, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV12(TemplatePreviewModal, {
-        templateId: preview,
-        onClose: () => {
-          setPreview(null);
-        }
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12(Dialog3, {
+      previewTemplateId ? /* @__PURE__ */ jsxDEV19(TemplatePreviewModal, {
+        templateId: previewTemplateId,
+        onClose: () => setPreviewTemplateId(null)
+      }, undefined, false, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV19(Dialog4, {
         open: studioSignupModalOpen,
         onOpenChange: setStudioSignupModalOpen,
-        children: /* @__PURE__ */ jsxDEV12(DialogContent3, {
+        children: /* @__PURE__ */ jsxDEV19(DialogContent4, {
           className: "max-h-[90vh] max-w-2xl overflow-y-auto",
           children: [
-            /* @__PURE__ */ jsxDEV12(DialogHeader2, {
+            /* @__PURE__ */ jsxDEV19(DialogHeader3, {
               children: [
-                /* @__PURE__ */ jsxDEV12(DialogTitle2, {
+                /* @__PURE__ */ jsxDEV19(DialogTitle3, {
                   children: "Deploy in Studio"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV12(DialogDescription2, {
+                /* @__PURE__ */ jsxDEV19(DialogDescription3, {
                   children: "Deploy templates in ContractSpec Studio and run the full evidence-to-spec loop with your team."
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV12(StudioSignupSection, {
+            /* @__PURE__ */ jsxDEV19(StudioSignupSection, {
               variant: "compact"
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12(Dialog3, {
-        open: !!selectedTemplateForCommand,
-        onOpenChange: () => setSelectedTemplateForCommand(null),
-        children: /* @__PURE__ */ jsxDEV12(DialogContent3, {
-          className: "max-w-md",
-          children: [
-            /* @__PURE__ */ jsxDEV12(DialogHeader2, {
-              children: [
-                /* @__PURE__ */ jsxDEV12(DialogTitle2, {
-                  children: "Use this template"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV12(DialogDescription2, {
-                  children: "Initialize a new project with this template using the CLI."
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV12("div", {
-              className: "space-y-4 pt-4",
-              children: [
-                /* @__PURE__ */ jsxDEV12("div", {
-                  className: "rounded-md border border-zinc-800 bg-zinc-950 p-4 font-mono text-sm text-zinc-50",
-                  children: [
-                    "npx contractspec init --template ",
-                    commandId
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV12("div", {
-                  className: "flex gap-2",
-                  children: /* @__PURE__ */ jsxDEV12("button", {
-                    className: "btn-secondary w-full",
-                    onClick: () => {
-                      navigator.clipboard.writeText(`npx contractspec init --template ${commandId}`);
-                      captureAnalyticsEvent2(analyticsEventNames2.COPY_COMMAND_CLICK, {
-                        surface: "templates",
-                        templateId: commandId,
-                        filename: "templates-cli"
-                      });
-                    },
-                    children: "Copy Command"
-                  }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV12("div", {
-                  className: "relative",
-                  children: [
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "absolute inset-0 flex items-center",
-                      children: /* @__PURE__ */ jsxDEV12("span", {
-                        className: "w-full border-border border-t"
-                      }, undefined, false, undefined, this)
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "relative flex justify-center text-xs uppercase",
-                      children: /* @__PURE__ */ jsxDEV12("span", {
-                        className: "bg-background px-2 text-muted-foreground",
-                        children: "Or"
-                      }, undefined, false, undefined, this)
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV12("button", {
-                  className: "btn-ghost w-full text-sm",
-                  onClick: () => {
-                    captureAnalyticsEvent2(analyticsEventNames2.CTA_STUDIO_CLICK, {
-                      surface: "templates",
-                      templateId: commandId
-                    });
-                    setSelectedTemplateForCommand(null);
-                    setStudioSignupModalOpen(true);
-                  },
-                  children: "Deploy to Studio"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
+      /* @__PURE__ */ jsxDEV19(TemplateCommandDialog, {
+        templateId: selectedTemplateId,
+        onClose: () => setSelectedTemplateId(null),
+        onDeployStudio: () => {
+          setSelectedTemplateId(null);
+          setStudioSignupModalOpen(true);
+        }
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);