@contractspec/bundle.marketing 3.8.8 → 3.8.9

package/dist/components/templates/TemplatesHeroSection.d.ts

@@ -0,0 +1,5 @@
+export interface TemplatesHeroSectionProps {
+    localTemplateCount: number;
+    sourceCount: number;
+}
+export declare function TemplatesHeroSection({ localTemplateCount, sourceCount, }: TemplatesHeroSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/templates/TemplatesHeroSection.js

@@ -0,0 +1,82 @@
+// @bun
+var __require = import.meta.require;
+
+// src/components/templates/TemplatesHeroSection.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+function TemplatesHeroSection({
+  localTemplateCount,
+  sourceCount
+}) {
+  return /* @__PURE__ */ jsxDEV("section", {
+    className: "section-padding hero-gradient border-border/70 border-b",
+    children: /* @__PURE__ */ jsxDEV("div", {
+      className: "editorial-shell space-y-8",
+      children: [
+        /* @__PURE__ */ jsxDEV("div", {
+          className: "max-w-4xl space-y-5",
+          children: [
+            /* @__PURE__ */ jsxDEV("p", {
+              className: "editorial-kicker",
+              children: "Proof through real scenarios"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("h1", {
+              className: "editorial-title",
+              children: "Templates that show the open system in practice."
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
+          className: "editorial-proof-strip",
+          children: [
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "editorial-stat",
+              children: [
+                /* @__PURE__ */ jsxDEV("span", {
+                  className: "editorial-stat-value",
+                  children: localTemplateCount
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("span", {
+                  className: "editorial-label",
+                  children: "curated scenarios"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "editorial-stat",
+              children: [
+                /* @__PURE__ */ jsxDEV("span", {
+                  className: "editorial-stat-value",
+                  children: sourceCount
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("span", {
+                  className: "editorial-label",
+                  children: "entry paths"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "editorial-stat",
+              children: [
+                /* @__PURE__ */ jsxDEV("span", {
+                  className: "editorial-stat-value",
+                  children: "OSS"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("span", {
+                  className: "editorial-label",
+                  children: "first, Studio second"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  TemplatesHeroSection
+};

package/dist/components/templates/TemplatesNextStepsSection.d.ts

@@ -0,0 +1 @@
+export declare function TemplatesNextStepsSection(): import("react/jsx-runtime").JSX.Element;

package/dist/components/templates/TemplatesNextStepsSection.js

@@ -0,0 +1,121 @@
+// @bun
+var __require = import.meta.require;
+
+// src/components/templates/TemplatesNextStepsSection.tsx
+import Link from "next/link";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function TemplatesNextStepsSection() {
+  return /* @__PURE__ */ jsxDEV("section", {
+    className: "editorial-section bg-striped",
+    children: /* @__PURE__ */ jsxDEV("div", {
+      className: "editorial-shell space-y-8",
+      children: [
+        /* @__PURE__ */ jsxDEV("div", {
+          className: "max-w-3xl space-y-4",
+          children: [
+            /* @__PURE__ */ jsxDEV("p", {
+              className: "editorial-kicker",
+              children: "From template to real system"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("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__ */ jsxDEV("div", {
+          className: "grid gap-6 md:grid-cols-3",
+          children: [
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "editorial-panel space-y-4",
+              children: [
+                /* @__PURE__ */ jsxDEV("div", {
+                  className: "text-3xl",
+                  children: "\uD83D\uDCB3"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("h3", {
+                  className: "font-serif text-2xl tracking-[-0.03em]",
+                  children: "Add payments"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(Link, {
+                  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__ */ jsxDEV("div", {
+              className: "editorial-panel space-y-4",
+              children: [
+                /* @__PURE__ */ jsxDEV("div", {
+                  className: "text-3xl",
+                  children: "\uD83D\uDCE7"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("h3", {
+                  className: "font-serif text-2xl tracking-[-0.03em]",
+                  children: "Add notifications"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(Link, {
+                  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__ */ jsxDEV("div", {
+              className: "editorial-panel space-y-4",
+              children: [
+                /* @__PURE__ */ jsxDEV("div", {
+                  className: "text-3xl",
+                  children: "\uD83E\uDDE0"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("h3", {
+                  className: "font-serif text-2xl tracking-[-0.03em]",
+                  children: "Add AI and knowledge"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(Link, {
+                  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__ */ jsxDEV("div", {
+          className: "pt-4 text-center",
+          children: [
+            /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(Link, {
+              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);
+}
+export {
+  TemplatesNextStepsSection
+};

package/dist/components/templates/TemplatesPreviewModal.d.ts

@@ -1,7 +1,6 @@
 import type { TemplateId } from '@contractspec/lib.example-shared-ui';
-interface TemplatePreviewModalProps {
-    templateId: TemplateId | null;
+export interface TemplatePreviewModalProps {
+    templateId: TemplateId;
     onClose: () => void;
 }
-export declare const TemplatePreviewModal: ({ templateId, onClose, }: TemplatePreviewModalProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function TemplatePreviewModal({ templateId, onClose, }: TemplatePreviewModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/templates/TemplatesPreviewModal.js

@@ -1,143 +1,153 @@
 // @bun
 var __require = import.meta.require;
 
-// src/components/templates/TemplatesPreviewModal.tsx
+// 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 { Dialog, DialogContent } 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";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
-var TemplateShell = dynamic(() => import("@contractspec/lib.example-shared-ui").then((mod) => mod.TemplateShell), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var TodosTaskList = dynamic(() => import("@contractspec/bundle.library/components/templates/todos/TaskList").then((mod) => mod.TaskList), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var MessagingWorkspace = dynamic(() => import("@contractspec/bundle.library/components/templates/messaging/MessagingWorkspace").then((mod) => mod.MessagingWorkspace), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var RecipesExperience = dynamic(() => import("@contractspec/bundle.library/components/templates/recipes/RecipeList").then((mod) => mod.RecipeList), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var SaasDashboard = dynamic(() => import("@contractspec/example.saas-boilerplate").then((mod) => mod.SaasDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var CrmDashboard = dynamic(() => import("@contractspec/example.crm-pipeline").then((mod) => mod.CrmDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var DataGridShowcase = dynamic(() => import("@contractspec/example.data-grid-showcase/ui").then((mod) => mod.DataGridShowcase), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var VisualizationShowcase = dynamic(() => import("@contractspec/example.visualization-showcase/ui").then((mod) => mod.VisualizationShowcase), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var AgentDashboard = dynamic(() => import("@contractspec/example.agent-console/ui").then((mod) => mod.AgentDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var WorkflowDashboard = dynamic(() => import("@contractspec/example.workflow-system/ui").then((mod) => mod.WorkflowDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var MarketplaceDashboard = dynamic(() => import("@contractspec/example.marketplace/ui").then((mod) => mod.MarketplaceDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var IntegrationDashboard = dynamic(() => import("@contractspec/example.integration-hub/ui").then((mod) => mod.IntegrationDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var AnalyticsDashboard = dynamic(() => import("@contractspec/example.analytics-dashboard").then((mod) => mod.AnalyticsDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var AiChatAssistantDashboard = dynamic(() => import("@contractspec/example.ai-chat-assistant").then((mod) => mod.AiChatAssistantDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
-var TemplatePreviewModal = ({
+var SaasDashboard = dynamic(() => import("@contractspec/example.saas-boilerplate").then((module) => module.SaasDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var CrmDashboard = dynamic(() => import("@contractspec/example.crm-pipeline").then((module) => module.CrmDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var DataGridShowcase = dynamic(() => import("@contractspec/example.data-grid-showcase/ui").then((module) => module.DataGridShowcase), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var VisualizationShowcase = dynamic(() => import("@contractspec/example.visualization-showcase/ui").then((module) => module.VisualizationShowcase), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var AgentDashboard = dynamic(() => import("@contractspec/example.agent-console/ui").then((module) => module.AgentDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var AiChatAssistantDashboard = dynamic(() => import("@contractspec/example.ai-chat-assistant").then((module) => module.AiChatAssistantDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var WorkflowDashboard = dynamic(() => import("@contractspec/example.workflow-system/ui").then((module) => module.WorkflowDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var MarketplaceDashboard = dynamic(() => import("@contractspec/example.marketplace/ui").then((module) => module.MarketplaceDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var IntegrationDashboard = dynamic(() => import("@contractspec/example.integration-hub/ui").then((module) => module.IntegrationDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var AnalyticsDashboard = dynamic(() => import("@contractspec/example.analytics-dashboard").then((module) => module.AnalyticsDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var PREVIEW_DEFINITIONS = {
+  "saas-boilerplate": {
+    title: "SaaS Boilerplate",
+    description: "Multi-tenant organizations, projects, settings, and billing usage tracking.",
+    component: SaasDashboard
+  },
+  "crm-pipeline": {
+    title: "CRM Pipeline",
+    description: "Sales CRM with contacts, companies, deals, and pipeline stages.",
+    component: CrmDashboard
+  },
+  "data-grid-showcase": {
+    title: "Data Grid Showcase",
+    description: "Shared ContractSpec table primitives with client, server, and DataView-driven lanes.",
+    component: DataGridShowcase
+  },
+  "visualization-showcase": {
+    title: "Visualization Showcase",
+    description: "ContractSpec-owned chart primitives rendered through shared visualization contracts and design-system wrappers.",
+    component: VisualizationShowcase
+  },
+  "agent-console": {
+    title: "AI Agent Console",
+    description: "AI agent orchestration with tools, agents, runs, and execution logs.",
+    component: AgentDashboard
+  },
+  "ai-chat-assistant": {
+    title: "AI Chat Assistant",
+    description: "Focused assistant surface with reasoning, sources, suggestions, and MCP-aware tools.",
+    component: AiChatAssistantDashboard
+  },
+  "workflow-system": {
+    title: "Workflow System",
+    description: "Multi-step workflows with role-based approvals.",
+    component: WorkflowDashboard
+  },
+  marketplace: {
+    title: "Marketplace",
+    description: "Two-sided marketplace with stores, products, orders, and payouts.",
+    component: MarketplaceDashboard
+  },
+  "integration-hub": {
+    title: "Integration Hub",
+    description: "Third-party integrations with connections, sync configs, and field mapping.",
+    component: IntegrationDashboard
+  },
+  "analytics-dashboard": {
+    title: "Analytics Dashboard",
+    description: "Custom dashboards with widgets and queries.",
+    component: AnalyticsDashboard
+  }
+};
+function TemplatePreviewContent({
+  templateId
+}) {
+  const preview = PREVIEW_DEFINITIONS[templateId];
+  if (!preview) {
+    return null;
+  }
+  const PreviewComponent = preview.component;
+  return /* @__PURE__ */ jsxDEV(TemplateShell, {
+    title: preview.title,
+    description: preview.description,
+    showSaveAction: false,
+    children: /* @__PURE__ */ jsxDEV(PreviewComponent, {}, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// 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/TemplatesPreviewModal.tsx
+import { Dialog, DialogContent } 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 jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function TemplatePreviewModal({
   templateId,
   onClose
-}) => {
-  const previewComponent = useMemo(() => {
-    switch (templateId) {
-      case "todos-app":
-        return /* @__PURE__ */ jsxDEV(TemplateShell, {
-          title: "Starter tasks",
-          description: "Track work items with filters, priorities, and per-tenant data isolation.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV(TodosTaskList, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "messaging-app":
-        return /* @__PURE__ */ jsxDEV(TemplateShell, {
-          title: "Messaging workspace",
-          description: "Realtime-ready messaging surface with optimistic delivery.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV(MessagingWorkspace, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "recipe-app-i18n":
-        return /* @__PURE__ */ jsxDEV(TemplateShell, {
-          title: "Ceremony recipes",
-          description: "Switch locales and preview how rituals translate across teams.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV(RecipesExperience, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "saas-boilerplate":
-        return /* @__PURE__ */ jsxDEV(TemplateShell, {
-          title: "SaaS Boilerplate",
-          description: "Multi-tenant organizations, projects, settings, and billing usage tracking.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV(SaasDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "crm-pipeline":
-        return /* @__PURE__ */ jsxDEV(TemplateShell, {
-          title: "CRM Pipeline",
-          description: "Sales CRM with contacts, companies, deals, and pipeline stages.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV(CrmDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "data-grid-showcase":
-        return /* @__PURE__ */ jsxDEV(TemplateShell, {
-          title: "Data Grid Showcase",
-          description: "Shared ContractSpec table primitives with client, server, and DataView-driven lanes.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV(DataGridShowcase, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "visualization-showcase":
-        return /* @__PURE__ */ jsxDEV(TemplateShell, {
-          title: "Visualization Showcase",
-          description: "ContractSpec-owned chart primitives rendered through shared visualization contracts and design-system wrappers.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV(VisualizationShowcase, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "agent-console":
-        return /* @__PURE__ */ jsxDEV(TemplateShell, {
-          title: "AI Agent Console",
-          description: "AI agent orchestration with tools, agents, runs, and execution logs.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV(AgentDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "ai-chat-assistant":
-        return /* @__PURE__ */ jsxDEV(TemplateShell, {
-          title: "AI Chat Assistant",
-          description: "Focused assistant surface with reasoning, sources, suggestions, and MCP-aware tools.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV(AiChatAssistantDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "workflow-system":
-        return /* @__PURE__ */ jsxDEV(TemplateShell, {
-          title: "Workflow System",
-          description: "Multi-step workflows with role-based approvals.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV(WorkflowDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "marketplace":
-        return /* @__PURE__ */ jsxDEV(TemplateShell, {
-          title: "Marketplace",
-          description: "Two-sided marketplace with stores, products, and orders.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV(MarketplaceDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "integration-hub":
-        return /* @__PURE__ */ jsxDEV(TemplateShell, {
-          title: "Integration Hub",
-          description: "Third-party integrations with sync and field mapping.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV(IntegrationDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case "analytics-dashboard":
-        return /* @__PURE__ */ jsxDEV(TemplateShell, {
-          title: "Analytics Dashboard",
-          description: "Custom dashboards with widgets and queries.",
-          showSaveAction: false,
-          children: /* @__PURE__ */ jsxDEV(AnalyticsDashboard, {}, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
-      case null:
-        return null;
-      default:
-        return null;
-    }
-  }, [templateId]);
-  return /* @__PURE__ */ jsxDEV(Dialog, {
-    open: !!previewComponent,
-    onOpenChange: onClose,
-    children: /* @__PURE__ */ jsxDEV(DialogContent, {
+}) {
+  if (!supportsInlineTemplatePreview(templateId)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxDEV2(Dialog, {
+    open: true,
+    onOpenChange: (open) => !open && onClose(),
+    children: /* @__PURE__ */ jsxDEV2(DialogContent, {
       className: "mb-8 flex h-[calc(100vh-2rem)] min-w-[calc(100vw-2rem)] flex-col justify-between gap-0 p-0",
-      children: /* @__PURE__ */ jsxDEV(ScrollArea, {
+      children: /* @__PURE__ */ jsxDEV2(ScrollArea, {
         className: "flex flex-col justify-between overflow-hidden",
-        children: previewComponent
+        children: /* @__PURE__ */ jsxDEV2(TemplateRuntimeProvider, {
+          templateId,
+          projectId: `marketing-preview-${templateId}`,
+          children: /* @__PURE__ */ jsxDEV2(TemplatePreviewContent, {
+            templateId
+          }, undefined, false, undefined, this)
+        }, templateId, false, undefined, this)
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
-};
+}
 export {
   TemplatePreviewModal
 };