@contractspec/bundle.marketing 3.8.8 → 3.8.10

package/dist/browser/components/templates/TemplatesPreviewModal.js

@@ -6,143 +6,153 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
-// 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
 };