@contractspec/bundle.marketing 3.8.8 → 3.8.9

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@contractspec/bundle.marketing",
-  "version": "3.8.8",
+  "version": "3.8.9",
   "type": "module",
   "scripts": {
     "clean": "rm -rf dist",
     "lint": "bun run lint:fix",
     "lint:fix": "biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .",
     "lint:check": "biome check .",
-    "build": "bun run prebuild && bun run build:bundle && bun run build:types",
+    "build": "bun run build:bundle && bun run build:types",
     "build:bundle": "contractspec-bun-build transpile",
     "build:types": "contractspec-bun-build types",
     "publish:pkg": "bun publish --tolerate-republish --ignore-scripts --verbose",
@@ -204,6 +204,69 @@
       "node": "./dist/node/components/templates/index.js",
       "default": "./dist/components/templates/index.js"
     },
+    "./components/templates/template-catalog": {
+      "types": "./dist/components/templates/template-catalog.d.ts",
+      "browser": "./dist/browser/components/templates/template-catalog.js",
+      "bun": "./dist/components/templates/template-catalog.js",
+      "node": "./dist/node/components/templates/template-catalog.js",
+      "default": "./dist/components/templates/template-catalog.js"
+    },
+    "./components/templates/template-new": {
+      "types": "./dist/components/templates/template-new.d.ts",
+      "browser": "./dist/browser/components/templates/template-new.js",
+      "bun": "./dist/components/templates/template-new.js",
+      "node": "./dist/node/components/templates/template-new.js",
+      "default": "./dist/components/templates/template-new.js"
+    },
+    "./components/templates/template-preview": {
+      "types": "./dist/components/templates/template-preview.d.ts",
+      "browser": "./dist/browser/components/templates/template-preview.js",
+      "bun": "./dist/components/templates/template-preview.js",
+      "node": "./dist/node/components/templates/template-preview.js",
+      "default": "./dist/components/templates/template-preview.js"
+    },
+    "./components/templates/template-source": {
+      "types": "./dist/components/templates/template-source.d.ts",
+      "browser": "./dist/browser/components/templates/template-source.js",
+      "bun": "./dist/components/templates/template-source.js",
+      "node": "./dist/node/components/templates/template-source.js",
+      "default": "./dist/components/templates/template-source.js"
+    },
+    "./components/templates/TemplateCard": {
+      "types": "./dist/components/templates/TemplateCard.d.ts",
+      "browser": "./dist/browser/components/templates/TemplateCard.js",
+      "bun": "./dist/components/templates/TemplateCard.js",
+      "node": "./dist/node/components/templates/TemplateCard.js",
+      "default": "./dist/components/templates/TemplateCard.js"
+    },
+    "./components/templates/TemplateCommandDialog": {
+      "types": "./dist/components/templates/TemplateCommandDialog.d.ts",
+      "browser": "./dist/browser/components/templates/TemplateCommandDialog.js",
+      "bun": "./dist/components/templates/TemplateCommandDialog.js",
+      "node": "./dist/node/components/templates/TemplateCommandDialog.js",
+      "default": "./dist/components/templates/TemplateCommandDialog.js"
+    },
+    "./components/templates/TemplatePreviewContent": {
+      "types": "./dist/components/templates/TemplatePreviewContent.d.ts",
+      "browser": "./dist/browser/components/templates/TemplatePreviewContent.js",
+      "bun": "./dist/components/templates/TemplatePreviewContent.js",
+      "node": "./dist/node/components/templates/TemplatePreviewContent.js",
+      "default": "./dist/components/templates/TemplatePreviewContent.js"
+    },
+    "./components/templates/TemplatesBrowseControls": {
+      "types": "./dist/components/templates/TemplatesBrowseControls.d.ts",
+      "browser": "./dist/browser/components/templates/TemplatesBrowseControls.js",
+      "bun": "./dist/components/templates/TemplatesBrowseControls.js",
+      "node": "./dist/node/components/templates/TemplatesBrowseControls.js",
+      "default": "./dist/components/templates/TemplatesBrowseControls.js"
+    },
+    "./components/templates/TemplatesCatalogSection": {
+      "types": "./dist/components/templates/TemplatesCatalogSection.d.ts",
+      "browser": "./dist/browser/components/templates/TemplatesCatalogSection.js",
+      "bun": "./dist/components/templates/TemplatesCatalogSection.js",
+      "node": "./dist/node/components/templates/TemplatesCatalogSection.js",
+      "default": "./dist/components/templates/TemplatesCatalogSection.js"
+    },
     "./components/templates/TemplatesClientPage": {
       "types": "./dist/components/templates/TemplatesClientPage.d.ts",
       "browser": "./dist/browser/components/templates/TemplatesClientPage.js",
@@ -211,6 +274,20 @@
       "node": "./dist/node/components/templates/TemplatesClientPage.js",
       "default": "./dist/components/templates/TemplatesClientPage.js"
     },
+    "./components/templates/TemplatesHeroSection": {
+      "types": "./dist/components/templates/TemplatesHeroSection.d.ts",
+      "browser": "./dist/browser/components/templates/TemplatesHeroSection.js",
+      "bun": "./dist/components/templates/TemplatesHeroSection.js",
+      "node": "./dist/node/components/templates/TemplatesHeroSection.js",
+      "default": "./dist/components/templates/TemplatesHeroSection.js"
+    },
+    "./components/templates/TemplatesNextStepsSection": {
+      "types": "./dist/components/templates/TemplatesNextStepsSection.d.ts",
+      "browser": "./dist/browser/components/templates/TemplatesNextStepsSection.js",
+      "bun": "./dist/components/templates/TemplatesNextStepsSection.js",
+      "node": "./dist/node/components/templates/TemplatesNextStepsSection.js",
+      "default": "./dist/components/templates/TemplatesNextStepsSection.js"
+    },
     "./components/templates/TemplatesPage": {
       "types": "./dist/components/templates/TemplatesPage.d.ts",
       "browser": "./dist/browser/components/templates/TemplatesPage.js",
@@ -340,28 +417,29 @@
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@contractspec/bundle.library": "3.8.8",
-    "@contractspec/lib.surface-runtime": "0.5.15",
-    "@contractspec/example.agent-console": "3.8.7",
-    "@contractspec/example.analytics-dashboard": "3.9.7",
-    "@contractspec/example.crm-pipeline": "3.7.15",
-    "@contractspec/example.data-grid-showcase": "3.8.7",
-    "@contractspec/example.integration-hub": "3.8.7",
-    "@contractspec/example.marketplace": "3.8.7",
-    "@contractspec/example.saas-boilerplate": "3.8.7",
-    "@contractspec/example.visualization-showcase": "3.9.7",
-    "@contractspec/example.workflow-system": "3.8.7",
-    "@contractspec/lib.contracts-spec": "5.0.3",
-    "@contractspec/lib.contracts-runtime-client-react": "3.8.3",
-    "@contractspec/lib.design-system": "3.8.8",
-    "@contractspec/lib.email": "3.7.11",
-    "@contractspec/lib.example-shared-ui": "6.0.15",
-    "@contractspec/lib.logger": "3.7.11",
-    "@contractspec/lib.runtime-sandbox": "2.7.12",
-    "@contractspec/lib.ui-kit-core": "3.7.11",
-    "@contractspec/lib.ui-kit-web": "3.9.7",
-    "@contractspec/lib.ui-link": "3.7.11",
-    "@contractspec/module.examples": "3.8.7",
+    "@contractspec/bundle.library": "3.8.9",
+    "@contractspec/lib.surface-runtime": "0.5.16",
+    "@contractspec/example.agent-console": "3.8.8",
+    "@contractspec/example.ai-chat-assistant": "3.8.8",
+    "@contractspec/example.analytics-dashboard": "3.9.8",
+    "@contractspec/example.crm-pipeline": "3.7.16",
+    "@contractspec/example.data-grid-showcase": "3.8.8",
+    "@contractspec/example.integration-hub": "3.8.8",
+    "@contractspec/example.marketplace": "3.8.8",
+    "@contractspec/example.saas-boilerplate": "3.8.8",
+    "@contractspec/example.visualization-showcase": "3.9.8",
+    "@contractspec/example.workflow-system": "3.8.8",
+    "@contractspec/lib.contracts-spec": "5.0.4",
+    "@contractspec/lib.contracts-runtime-client-react": "3.8.4",
+    "@contractspec/lib.design-system": "3.8.9",
+    "@contractspec/lib.email": "3.7.12",
+    "@contractspec/lib.example-shared-ui": "6.0.16",
+    "@contractspec/lib.logger": "3.7.12",
+    "@contractspec/lib.runtime-sandbox": "2.7.13",
+    "@contractspec/lib.ui-kit-core": "3.7.12",
+    "@contractspec/lib.ui-kit-web": "3.9.8",
+    "@contractspec/lib.ui-link": "3.7.12",
+    "@contractspec/module.examples": "3.8.8",
     "@electric-sql/pglite": "^0.4.2",
     "@hookform/resolvers": "^5.2.2",
     "@scaleway/sdk": "^3.4.1",
@@ -376,9 +454,9 @@
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
-    "@contractspec/tool.typescript": "3.7.11",
+    "@contractspec/tool.typescript": "3.7.12",
     "typescript": "^5.9.3",
-    "@contractspec/tool.bun": "3.7.11"
+    "@contractspec/tool.bun": "3.7.12"
   },
   "publishConfig": {
     "access": "public",
@@ -566,6 +644,69 @@
         "node": "./dist/node/components/templates/index.js",
         "default": "./dist/components/templates/index.js"
       },
+      "./components/templates/template-catalog": {
+        "types": "./dist/components/templates/template-catalog.d.ts",
+        "browser": "./dist/browser/components/templates/template-catalog.js",
+        "bun": "./dist/components/templates/template-catalog.js",
+        "node": "./dist/node/components/templates/template-catalog.js",
+        "default": "./dist/components/templates/template-catalog.js"
+      },
+      "./components/templates/template-new": {
+        "types": "./dist/components/templates/template-new.d.ts",
+        "browser": "./dist/browser/components/templates/template-new.js",
+        "bun": "./dist/components/templates/template-new.js",
+        "node": "./dist/node/components/templates/template-new.js",
+        "default": "./dist/components/templates/template-new.js"
+      },
+      "./components/templates/template-preview": {
+        "types": "./dist/components/templates/template-preview.d.ts",
+        "browser": "./dist/browser/components/templates/template-preview.js",
+        "bun": "./dist/components/templates/template-preview.js",
+        "node": "./dist/node/components/templates/template-preview.js",
+        "default": "./dist/components/templates/template-preview.js"
+      },
+      "./components/templates/template-source": {
+        "types": "./dist/components/templates/template-source.d.ts",
+        "browser": "./dist/browser/components/templates/template-source.js",
+        "bun": "./dist/components/templates/template-source.js",
+        "node": "./dist/node/components/templates/template-source.js",
+        "default": "./dist/components/templates/template-source.js"
+      },
+      "./components/templates/TemplateCard": {
+        "types": "./dist/components/templates/TemplateCard.d.ts",
+        "browser": "./dist/browser/components/templates/TemplateCard.js",
+        "bun": "./dist/components/templates/TemplateCard.js",
+        "node": "./dist/node/components/templates/TemplateCard.js",
+        "default": "./dist/components/templates/TemplateCard.js"
+      },
+      "./components/templates/TemplateCommandDialog": {
+        "types": "./dist/components/templates/TemplateCommandDialog.d.ts",
+        "browser": "./dist/browser/components/templates/TemplateCommandDialog.js",
+        "bun": "./dist/components/templates/TemplateCommandDialog.js",
+        "node": "./dist/node/components/templates/TemplateCommandDialog.js",
+        "default": "./dist/components/templates/TemplateCommandDialog.js"
+      },
+      "./components/templates/TemplatePreviewContent": {
+        "types": "./dist/components/templates/TemplatePreviewContent.d.ts",
+        "browser": "./dist/browser/components/templates/TemplatePreviewContent.js",
+        "bun": "./dist/components/templates/TemplatePreviewContent.js",
+        "node": "./dist/node/components/templates/TemplatePreviewContent.js",
+        "default": "./dist/components/templates/TemplatePreviewContent.js"
+      },
+      "./components/templates/TemplatesBrowseControls": {
+        "types": "./dist/components/templates/TemplatesBrowseControls.d.ts",
+        "browser": "./dist/browser/components/templates/TemplatesBrowseControls.js",
+        "bun": "./dist/components/templates/TemplatesBrowseControls.js",
+        "node": "./dist/node/components/templates/TemplatesBrowseControls.js",
+        "default": "./dist/components/templates/TemplatesBrowseControls.js"
+      },
+      "./components/templates/TemplatesCatalogSection": {
+        "types": "./dist/components/templates/TemplatesCatalogSection.d.ts",
+        "browser": "./dist/browser/components/templates/TemplatesCatalogSection.js",
+        "bun": "./dist/components/templates/TemplatesCatalogSection.js",
+        "node": "./dist/node/components/templates/TemplatesCatalogSection.js",
+        "default": "./dist/components/templates/TemplatesCatalogSection.js"
+      },
       "./components/templates/TemplatesClientPage": {
         "types": "./dist/components/templates/TemplatesClientPage.d.ts",
         "browser": "./dist/browser/components/templates/TemplatesClientPage.js",
@@ -573,6 +714,20 @@
         "node": "./dist/node/components/templates/TemplatesClientPage.js",
         "default": "./dist/components/templates/TemplatesClientPage.js"
       },
+      "./components/templates/TemplatesHeroSection": {
+        "types": "./dist/components/templates/TemplatesHeroSection.d.ts",
+        "browser": "./dist/browser/components/templates/TemplatesHeroSection.js",
+        "bun": "./dist/components/templates/TemplatesHeroSection.js",
+        "node": "./dist/node/components/templates/TemplatesHeroSection.js",
+        "default": "./dist/components/templates/TemplatesHeroSection.js"
+      },
+      "./components/templates/TemplatesNextStepsSection": {
+        "types": "./dist/components/templates/TemplatesNextStepsSection.d.ts",
+        "browser": "./dist/browser/components/templates/TemplatesNextStepsSection.js",
+        "bun": "./dist/components/templates/TemplatesNextStepsSection.js",
+        "node": "./dist/node/components/templates/TemplatesNextStepsSection.js",
+        "default": "./dist/components/templates/TemplatesNextStepsSection.js"
+      },
       "./components/templates/TemplatesPage": {
         "types": "./dist/components/templates/TemplatesPage.d.ts",
         "browser": "./dist/browser/components/templates/TemplatesPage.js",

package/src/components/templates/TemplateCard.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+export interface TemplateCardProps {
+	title: string;
+	description: string;
+	metaBadges: readonly string[];
+	tags: readonly string[];
+	featureList?: readonly string[];
+	isNew?: boolean;
+	previewAction: ReactNode;
+	useAction: ReactNode;
+}
+
+export function TemplateCard({
+	title,
+	description,
+	metaBadges,
+	tags,
+	featureList = [],
+	isNew = false,
+	previewAction,
+	useAction,
+}: TemplateCardProps) {
+	return (
+		<div className="editorial-panel relative flex flex-col space-y-4 transition-colors hover:border-[color:rgb(162_79_42_/_0.55)]">
+			{isNew ? (
+				<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">
+					New
+				</span>
+			) : null}
+
+			<div>
+				<h3 className="font-serif text-2xl tracking-[-0.03em]">{title}</h3>
+				<p className="mt-1 text-muted-foreground text-sm">{description}</p>
+			</div>
+
+			<div className="flex-1 space-y-3">
+				<div className="flex flex-wrap gap-2">
+					{metaBadges.map((badge) => (
+						<span
+							key={badge}
+							className="rounded-full border border-border bg-background px-3 py-1 text-[11px] text-foreground"
+						>
+							{badge}
+						</span>
+					))}
+				</div>
+				{featureList.length > 0 ? (
+					<p className="text-muted-foreground text-xs">
+						<span className="font-medium text-foreground">Features:</span>{' '}
+						{featureList.join(', ')}
+					</p>
+				) : null}
+				<div className="flex flex-wrap gap-1">
+					{tags.map((tag) => (
+						<span
+							key={tag}
+							className="rounded-full border border-border bg-muted px-3 py-1 text-[11px] text-muted-foreground"
+						>
+							{tag}
+						</span>
+					))}
+				</div>
+			</div>
+
+			<div className="flex gap-2 pt-4">
+				{previewAction}
+				{useAction}
+			</div>
+		</div>
+	);
+}

package/src/components/templates/TemplateCommandDialog.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import {
+	analyticsEventNames,
+	captureAnalyticsEvent,
+} from '@contractspec/bundle.library/libs/posthog/client';
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from '@contractspec/lib.ui-kit-web/ui/dialog';
+
+export interface TemplateCommandDialogProps {
+	templateId: string | null;
+	onClose: () => void;
+	onDeployStudio: () => void;
+}
+
+export function TemplateCommandDialog({
+	templateId,
+	onClose,
+	onDeployStudio,
+}: TemplateCommandDialogProps) {
+	const command = templateId
+		? `npx contractspec init --template ${templateId}`
+		: '';
+
+	return (
+		<Dialog open={!!templateId} onOpenChange={(open) => !open && onClose()}>
+			<DialogContent className="max-w-md">
+				<DialogHeader>
+					<DialogTitle>Use this template</DialogTitle>
+					<DialogDescription>
+						Initialize a new project with this template using the CLI.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="space-y-4 pt-4">
+					<div className="rounded-md border border-zinc-800 bg-zinc-950 p-4 font-mono text-sm text-zinc-50">
+						{command}
+					</div>
+					<div className="flex gap-2">
+						<button
+							className="btn-secondary w-full"
+							onClick={() => {
+								if (!templateId) {
+									return;
+								}
+
+								void navigator.clipboard.writeText(command);
+								captureAnalyticsEvent(analyticsEventNames.COPY_COMMAND_CLICK, {
+									surface: 'templates',
+									templateId,
+									filename: 'templates-cli',
+								});
+							}}
+						>
+							Copy Command
+						</button>
+					</div>
+					<div className="relative">
+						<div className="absolute inset-0 flex items-center">
+							<span className="w-full border-border border-t" />
+						</div>
+						<div className="relative flex justify-center text-xs uppercase">
+							<span className="bg-background px-2 text-muted-foreground">
+								Or
+							</span>
+						</div>
+					</div>
+					<button
+						className="btn-ghost w-full text-sm"
+						onClick={() => {
+							if (!templateId) {
+								return;
+							}
+
+							captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
+								surface: 'templates',
+								templateId,
+							});
+							onDeployStudio();
+						}}
+					>
+						Deploy to Studio
+					</button>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}

package/src/components/templates/TemplatePreviewContent.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import {
+	type TemplateId,
+	TemplateShell,
+} from '@contractspec/lib.example-shared-ui';
+import { LoadingSpinner } from '@contractspec/lib.ui-kit-web/ui/atoms/LoadingSpinner';
+import dynamic from 'next/dynamic';
+import type { ComponentType } from 'react';
+
+const SaasDashboard = dynamic(
+	() =>
+		import('@contractspec/example.saas-boilerplate').then(
+			(module) => module.SaasDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const CrmDashboard = dynamic(
+	() =>
+		import('@contractspec/example.crm-pipeline').then(
+			(module) => module.CrmDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const DataGridShowcase = dynamic(
+	() =>
+		import('@contractspec/example.data-grid-showcase/ui').then(
+			(module) => module.DataGridShowcase
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const VisualizationShowcase = dynamic(
+	() =>
+		import('@contractspec/example.visualization-showcase/ui').then(
+			(module) => module.VisualizationShowcase
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const AgentDashboard = dynamic(
+	() =>
+		import('@contractspec/example.agent-console/ui').then(
+			(module) => module.AgentDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const AiChatAssistantDashboard = dynamic(
+	() =>
+		import('@contractspec/example.ai-chat-assistant').then(
+			(module) => module.AiChatAssistantDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const WorkflowDashboard = dynamic(
+	() =>
+		import('@contractspec/example.workflow-system/ui').then(
+			(module) => module.WorkflowDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const MarketplaceDashboard = dynamic(
+	() =>
+		import('@contractspec/example.marketplace/ui').then(
+			(module) => module.MarketplaceDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const IntegrationDashboard = dynamic(
+	() =>
+		import('@contractspec/example.integration-hub/ui').then(
+			(module) => module.IntegrationDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const AnalyticsDashboard = dynamic(
+	() =>
+		import('@contractspec/example.analytics-dashboard').then(
+			(module) => module.AnalyticsDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+interface PreviewDefinition {
+	title: string;
+	description: string;
+	component: ComponentType;
+}
+
+const PREVIEW_DEFINITIONS: Partial<Record<TemplateId, PreviewDefinition>> = {
+	'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,
+	},
+};
+
+export interface TemplatePreviewContentProps {
+	templateId: TemplateId;
+}
+
+export function TemplatePreviewContent({
+	templateId,
+}: TemplatePreviewContentProps) {
+	const preview = PREVIEW_DEFINITIONS[templateId];
+
+	if (!preview) {
+		return null;
+	}
+
+	const PreviewComponent = preview.component;
+
+	return (
+		<TemplateShell
+			title={preview.title}
+			description={preview.description}
+			showSaveAction={false}
+		>
+			<PreviewComponent />
+		</TemplateShell>
+	);
+}