@contractspec/bundle.marketing 3.8.8 → 3.8.10

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@contractspec/bundle.marketing",
-  "version": "3.8.8",
+  "version": "3.8.10",
   "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,83 @@
       "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-filters": {
+      "types": "./dist/components/templates/template-filters.d.ts",
+      "browser": "./dist/browser/components/templates/template-filters.js",
+      "bun": "./dist/components/templates/template-filters.js",
+      "node": "./dist/node/components/templates/template-filters.js",
+      "default": "./dist/components/templates/template-filters.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/template-tag-visibility": {
+      "types": "./dist/components/templates/template-tag-visibility.d.ts",
+      "browser": "./dist/browser/components/templates/template-tag-visibility.js",
+      "bun": "./dist/components/templates/template-tag-visibility.js",
+      "node": "./dist/node/components/templates/template-tag-visibility.js",
+      "default": "./dist/components/templates/template-tag-visibility.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 +288,27 @@
       "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/TemplatesOverlays": {
+      "types": "./dist/components/templates/TemplatesOverlays.d.ts",
+      "browser": "./dist/browser/components/templates/TemplatesOverlays.js",
+      "bun": "./dist/components/templates/TemplatesOverlays.js",
+      "node": "./dist/node/components/templates/TemplatesOverlays.js",
+      "default": "./dist/components/templates/TemplatesOverlays.js"
+    },
     "./components/templates/TemplatesPage": {
       "types": "./dist/components/templates/TemplatesPage.d.ts",
       "browser": "./dist/browser/components/templates/TemplatesPage.js",
@@ -225,6 +323,13 @@
       "node": "./dist/node/components/templates/TemplatesPreviewModal.js",
       "default": "./dist/components/templates/TemplatesPreviewModal.js"
     },
+    "./components/templates/useTemplateBrowseState": {
+      "types": "./dist/components/templates/useTemplateBrowseState.d.ts",
+      "browser": "./dist/browser/components/templates/useTemplateBrowseState.js",
+      "bun": "./dist/components/templates/useTemplateBrowseState.js",
+      "node": "./dist/node/components/templates/useTemplateBrowseState.js",
+      "default": "./dist/components/templates/useTemplateBrowseState.js"
+    },
     "./libs/email/client": {
       "types": "./dist/libs/email/client.d.ts",
       "browser": "./dist/browser/libs/email/client.js",
@@ -340,28 +445,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.10",
+    "@contractspec/lib.surface-runtime": "0.5.17",
+    "@contractspec/example.agent-console": "3.8.9",
+    "@contractspec/example.ai-chat-assistant": "3.8.9",
+    "@contractspec/example.analytics-dashboard": "3.9.9",
+    "@contractspec/example.crm-pipeline": "3.7.17",
+    "@contractspec/example.data-grid-showcase": "3.8.9",
+    "@contractspec/example.integration-hub": "3.8.9",
+    "@contractspec/example.marketplace": "3.8.9",
+    "@contractspec/example.saas-boilerplate": "3.8.9",
+    "@contractspec/example.visualization-showcase": "3.9.9",
+    "@contractspec/example.workflow-system": "3.8.9",
+    "@contractspec/lib.contracts-spec": "5.1.0",
+    "@contractspec/lib.contracts-runtime-client-react": "3.8.5",
+    "@contractspec/lib.design-system": "3.8.10",
+    "@contractspec/lib.email": "3.7.13",
+    "@contractspec/lib.example-shared-ui": "6.0.17",
+    "@contractspec/lib.logger": "3.7.13",
+    "@contractspec/lib.runtime-sandbox": "2.7.14",
+    "@contractspec/lib.ui-kit-core": "3.7.13",
+    "@contractspec/lib.ui-kit-web": "3.9.9",
+    "@contractspec/lib.ui-link": "3.7.13",
+    "@contractspec/module.examples": "3.8.9",
     "@electric-sql/pglite": "^0.4.2",
     "@hookform/resolvers": "^5.2.2",
     "@scaleway/sdk": "^3.4.1",
@@ -376,9 +482,9 @@
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
-    "@contractspec/tool.typescript": "3.7.11",
+    "@contractspec/tool.typescript": "3.7.13",
     "typescript": "^5.9.3",
-    "@contractspec/tool.bun": "3.7.11"
+    "@contractspec/tool.bun": "3.7.13"
   },
   "publishConfig": {
     "access": "public",
@@ -566,6 +672,83 @@
         "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-filters": {
+        "types": "./dist/components/templates/template-filters.d.ts",
+        "browser": "./dist/browser/components/templates/template-filters.js",
+        "bun": "./dist/components/templates/template-filters.js",
+        "node": "./dist/node/components/templates/template-filters.js",
+        "default": "./dist/components/templates/template-filters.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/template-tag-visibility": {
+        "types": "./dist/components/templates/template-tag-visibility.d.ts",
+        "browser": "./dist/browser/components/templates/template-tag-visibility.js",
+        "bun": "./dist/components/templates/template-tag-visibility.js",
+        "node": "./dist/node/components/templates/template-tag-visibility.js",
+        "default": "./dist/components/templates/template-tag-visibility.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 +756,27 @@
         "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/TemplatesOverlays": {
+        "types": "./dist/components/templates/TemplatesOverlays.d.ts",
+        "browser": "./dist/browser/components/templates/TemplatesOverlays.js",
+        "bun": "./dist/components/templates/TemplatesOverlays.js",
+        "node": "./dist/node/components/templates/TemplatesOverlays.js",
+        "default": "./dist/components/templates/TemplatesOverlays.js"
+      },
       "./components/templates/TemplatesPage": {
         "types": "./dist/components/templates/TemplatesPage.d.ts",
         "browser": "./dist/browser/components/templates/TemplatesPage.js",
@@ -587,6 +791,13 @@
         "node": "./dist/node/components/templates/TemplatesPreviewModal.js",
         "default": "./dist/components/templates/TemplatesPreviewModal.js"
       },
+      "./components/templates/useTemplateBrowseState": {
+        "types": "./dist/components/templates/useTemplateBrowseState.d.ts",
+        "browser": "./dist/browser/components/templates/useTemplateBrowseState.js",
+        "bun": "./dist/components/templates/useTemplateBrowseState.js",
+        "node": "./dist/node/components/templates/useTemplateBrowseState.js",
+        "default": "./dist/components/templates/useTemplateBrowseState.js"
+      },
       "./libs/email/client": {
         "types": "./dist/libs/email/client.d.ts",
         "browser": "./dist/browser/libs/email/client.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>
+	);
+}