@contractspec/bundle.marketing 3.8.7 → 3.8.9

package/src/components/templates/TemplatesHeroSection.tsx

@@ -0,0 +1,41 @@
+export interface TemplatesHeroSectionProps {
+	localTemplateCount: number;
+	sourceCount: number;
+}
+
+export function TemplatesHeroSection({
+	localTemplateCount,
+	sourceCount,
+}: TemplatesHeroSectionProps) {
+	return (
+		<section className="section-padding hero-gradient border-border/70 border-b">
+			<div className="editorial-shell space-y-8">
+				<div className="max-w-4xl space-y-5">
+					<p className="editorial-kicker">Proof through real scenarios</p>
+					<h1 className="editorial-title">
+						Templates that show the open system in practice.
+					</h1>
+					<p className="editorial-subtitle">
+						These scenarios are the fastest way to understand ContractSpec:
+						explicit contracts, aligned surfaces, and an adoption path from OSS
+						exploration into Studio deployment.
+					</p>
+				</div>
+				<div className="editorial-proof-strip">
+					<div className="editorial-stat">
+						<span className="editorial-stat-value">{localTemplateCount}</span>
+						<span className="editorial-label">curated scenarios</span>
+					</div>
+					<div className="editorial-stat">
+						<span className="editorial-stat-value">{sourceCount}</span>
+						<span className="editorial-label">entry paths</span>
+					</div>
+					<div className="editorial-stat">
+						<span className="editorial-stat-value">OSS</span>
+						<span className="editorial-label">first, Studio second</span>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}

package/src/components/templates/TemplatesNextStepsSection.tsx

@@ -0,0 +1,80 @@
+import Link from 'next/link';
+
+export function TemplatesNextStepsSection() {
+	return (
+		<section className="editorial-section bg-striped">
+			<div className="editorial-shell space-y-8">
+				<div className="max-w-3xl space-y-4">
+					<p className="editorial-kicker">From template to real system</p>
+					<h2 className="font-serif text-4xl tracking-[-0.04em] md:text-5xl">
+						Templates become useful when the system can absorb more context.
+					</h2>
+					<p className="editorial-copy">
+						Use templates to prove the base flow, then layer integrations,
+						knowledge, and runtime behavior on top without losing the same
+						contract source.
+					</p>
+				</div>
+				<div className="grid gap-6 md:grid-cols-3">
+					<div className="editorial-panel space-y-4">
+						<div className="text-3xl">💳</div>
+						<h3 className="font-serif text-2xl tracking-[-0.03em]">
+							Add payments
+						</h3>
+						<p className="text-muted-foreground text-sm">
+							Connect Stripe to any template for payment processing,
+							subscriptions, and invoicing. Type-safe and policy-enforced.
+						</p>
+						<Link
+							href="/docs/integrations/stripe"
+							className="font-medium text-[color:var(--blue)] text-sm hover:opacity-80"
+						>
+							Learn more →
+						</Link>
+					</div>
+					<div className="editorial-panel space-y-4">
+						<div className="text-3xl">📧</div>
+						<h3 className="font-serif text-2xl tracking-[-0.03em]">
+							Add notifications
+						</h3>
+						<p className="text-muted-foreground text-sm">
+							Send transactional emails via Postmark or Resend. Process inbound
+							emails with Gmail API. SMS via Twilio.
+						</p>
+						<Link
+							href="/docs/integrations"
+							className="font-medium text-[color:var(--blue)] text-sm hover:opacity-80"
+						>
+							View integrations →
+						</Link>
+					</div>
+					<div className="editorial-panel space-y-4">
+						<div className="text-3xl">🧠</div>
+						<h3 className="font-serif text-2xl tracking-[-0.03em]">
+							Add AI and knowledge
+						</h3>
+						<p className="text-muted-foreground text-sm">
+							Power templates with OpenAI, vector search via Qdrant, and
+							structured knowledge spaces for context-aware workflows.
+						</p>
+						<Link
+							href="/docs/knowledge"
+							className="font-medium text-[color:var(--blue)] text-sm hover:opacity-80"
+						>
+							Learn about knowledge →
+						</Link>
+					</div>
+				</div>
+				<div className="pt-4 text-center">
+					<p className="mb-4 text-muted-foreground text-sm">
+						All integrations are configured per-tenant with automatic health
+						checks and credential rotation.
+					</p>
+					<Link href="/docs/architecture" className="btn-primary">
+						View Architecture
+					</Link>
+				</div>
+			</div>
+		</section>
+	);
+}

package/src/components/templates/TemplatesPreviewModal.tsx

@@ -1,313 +1,38 @@
 'use client';
 
 import type { TemplateId } 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 { TemplateRuntimeProvider } from '@contractspec/module.examples';
+import { TemplatePreviewContent } from './TemplatePreviewContent';
+import { supportsInlineTemplatePreview } from './template-preview';
 
-// Dynamically import template components with ssr: false
-const TemplateShell = dynamic(
-	() =>
-		import('@contractspec/lib.example-shared-ui').then(
-			(mod) => mod.TemplateShell
-		),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-const TodosTaskList = dynamic(
-	() =>
-		import(
-			'@contractspec/bundle.library/components/templates/todos/TaskList'
-		).then((mod) => mod.TaskList),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-const MessagingWorkspace = dynamic(
-	() =>
-		import(
-			'@contractspec/bundle.library/components/templates/messaging/MessagingWorkspace'
-		).then((mod) => mod.MessagingWorkspace),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-const RecipesExperience = dynamic(
-	() =>
-		import(
-			'@contractspec/bundle.library/components/templates/recipes/RecipeList'
-		).then((mod) => mod.RecipeList),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-const SaasDashboard = dynamic(
-	() =>
-		import('@contractspec/example.saas-boilerplate').then(
-			(mod) => mod.SaasDashboard
-		),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-const CrmDashboard = dynamic(
-	() =>
-		import('@contractspec/example.crm-pipeline').then(
-			(mod) => mod.CrmDashboard
-		),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-const DataGridShowcase = dynamic(
-	() =>
-		import('@contractspec/example.data-grid-showcase/ui').then(
-			(mod) => mod.DataGridShowcase
-		),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-const VisualizationShowcase = dynamic(
-	() =>
-		import('@contractspec/example.visualization-showcase/ui').then(
-			(mod) => mod.VisualizationShowcase
-		),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-const AgentDashboard = dynamic(
-	() =>
-		import('@contractspec/example.agent-console/ui').then(
-			(mod) => mod.AgentDashboard
-		),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-const WorkflowDashboard = dynamic(
-	() =>
-		import('@contractspec/example.workflow-system/ui').then(
-			(mod) => mod.WorkflowDashboard
-		),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-const MarketplaceDashboard = dynamic(
-	() =>
-		import('@contractspec/example.marketplace/ui').then(
-			(mod) => mod.MarketplaceDashboard
-		),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-const IntegrationDashboard = dynamic(
-	() =>
-		import('@contractspec/example.integration-hub/ui').then(
-			(mod) => mod.IntegrationDashboard
-		),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-const AnalyticsDashboard = dynamic(
-	() =>
-		import('@contractspec/example.analytics-dashboard').then(
-			(mod) => mod.AnalyticsDashboard
-		),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-const AiChatAssistantDashboard = dynamic(
-	() =>
-		import('@contractspec/example.ai-chat-assistant').then(
-			(mod) => mod.AiChatAssistantDashboard
-		),
-	{ ssr: false, loading: () => <LoadingSpinner /> }
-);
-
-interface TemplatePreviewModalProps {
-	templateId: TemplateId | null;
+export interface TemplatePreviewModalProps {
+	templateId: TemplateId;
 	onClose: () => void;
 }
-//
-//   return (
-//     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4 py-10">
-//       <div className="bg-background relative h-full max-h-[90vh] w-full max-w-5xl overflow-y-auto rounded-3xl p-6 shadow-2xl">
-//         <button
-//           type="button"
-//           className="btn-ghost absolute top-4 right-4 text-sm"
-//           onClick={onClose}
-//         >
-//           Close
-//         </button>
-//         {previewComponent}
-//       </div>
-//     </div>
-//   );
-// };
 
-export const TemplatePreviewModal = ({
+export function TemplatePreviewModal({
 	templateId,
 	onClose,
-}: TemplatePreviewModalProps) => {
-	const previewComponent = useMemo(() => {
-		switch (templateId) {
-			case 'todos-app':
-				return (
-					<TemplateShell
-						title="Starter tasks"
-						description="Track work items with filters, priorities, and per-tenant data isolation."
-						showSaveAction={false}
-					>
-						<TodosTaskList />
-					</TemplateShell>
-				);
-			case 'messaging-app':
-				return (
-					<TemplateShell
-						title="Messaging workspace"
-						description="Realtime-ready messaging surface with optimistic delivery."
-						showSaveAction={false}
-					>
-						<MessagingWorkspace />
-					</TemplateShell>
-				);
-			case 'recipe-app-i18n':
-				return (
-					<TemplateShell
-						title="Ceremony recipes"
-						description="Switch locales and preview how rituals translate across teams."
-						showSaveAction={false}
-					>
-						<RecipesExperience />
-					</TemplateShell>
-				);
-			case 'saas-boilerplate':
-				return (
-					<TemplateShell
-						title="SaaS Boilerplate"
-						description="Multi-tenant organizations, projects, settings, and billing usage tracking."
-						showSaveAction={false}
-					>
-						<SaasDashboard />
-					</TemplateShell>
-				);
-			case 'crm-pipeline':
-				return (
-					<TemplateShell
-						title="CRM Pipeline"
-						description="Sales CRM with contacts, companies, deals, and pipeline stages."
-						showSaveAction={false}
-					>
-						<CrmDashboard />
-					</TemplateShell>
-				);
-			case 'data-grid-showcase':
-				return (
-					<TemplateShell
-						title="Data Grid Showcase"
-						description="Shared ContractSpec table primitives with client, server, and DataView-driven lanes."
-						showSaveAction={false}
-					>
-						<DataGridShowcase />
-					</TemplateShell>
-				);
-			case 'visualization-showcase':
-				return (
-					<TemplateShell
-						title="Visualization Showcase"
-						description="ContractSpec-owned chart primitives rendered through shared visualization contracts and design-system wrappers."
-						showSaveAction={false}
-					>
-						<VisualizationShowcase />
-					</TemplateShell>
-				);
-			case 'agent-console':
-				return (
-					<TemplateShell
-						title="AI Agent Console"
-						description="AI agent orchestration with tools, agents, runs, and execution logs."
-						showSaveAction={false}
-					>
-						<AgentDashboard />
-					</TemplateShell>
-				);
-			case 'ai-chat-assistant':
-				return (
-					<TemplateShell
-						title="AI Chat Assistant"
-						description="Focused assistant surface with reasoning, sources, suggestions, and MCP-aware tools."
-						showSaveAction={false}
-					>
-						<AiChatAssistantDashboard />
-					</TemplateShell>
-				);
-			case 'workflow-system':
-				return (
-					<TemplateShell
-						title="Workflow System"
-						description="Multi-step workflows with role-based approvals."
-						showSaveAction={false}
-					>
-						<WorkflowDashboard />
-					</TemplateShell>
-				);
-			case 'marketplace':
-				return (
-					<TemplateShell
-						title="Marketplace"
-						description="Two-sided marketplace with stores, products, and orders."
-						showSaveAction={false}
-					>
-						<MarketplaceDashboard />
-					</TemplateShell>
-				);
-			case 'integration-hub':
-				return (
-					<TemplateShell
-						title="Integration Hub"
-						description="Third-party integrations with sync and field mapping."
-						showSaveAction={false}
-					>
-						<IntegrationDashboard />
-					</TemplateShell>
-				);
-			case 'analytics-dashboard':
-				return (
-					<TemplateShell
-						title="Analytics Dashboard"
-						description="Custom dashboards with widgets and queries."
-						showSaveAction={false}
-					>
-						<AnalyticsDashboard />
-					</TemplateShell>
-				);
-			case null:
-				return null;
-			default:
-				return null;
-		}
-	}, [templateId]);
+}: TemplatePreviewModalProps) {
+	if (!supportsInlineTemplatePreview(templateId)) {
+		return null;
+	}
 
 	return (
-		<Dialog open={!!previewComponent} onOpenChange={onClose}>
-			{/*<DialogTrigger asChild>*/}
-			{/*  <Button variant="outline">Fullscreen Dialog</Button>*/}
-			{/*</DialogTrigger>*/}
+		<Dialog open onOpenChange={(open) => !open && onClose()}>
 			<DialogContent className="mb-8 flex h-[calc(100vh-2rem)] min-w-[calc(100vw-2rem)] flex-col justify-between gap-0 p-0">
 				<ScrollArea className="flex flex-col justify-between overflow-hidden">
-					{/*<DialogHeader className="contents space-y-0 text-left">*/}
-					{/*  <DialogTitle className="px-6 pt-6">Product Information</DialogTitle>*/}
-					{/*  <DialogDescription asChild>*/}
-					{/*  </DialogDescription>*/}
-					{/*</DialogHeader>*/}
-					{previewComponent}
+					<TemplateRuntimeProvider
+						key={templateId}
+						templateId={templateId}
+						projectId={`marketing-preview-${templateId}`}
+					>
+						<TemplatePreviewContent templateId={templateId} />
+					</TemplateRuntimeProvider>
 				</ScrollArea>
-				{/*<DialogFooter className="px-6 pb-6 sm:justify-end">*/}
-				{/*  <DialogClose asChild>*/}
-				{/*    <Button variant="outline">*/}
-				{/*      <ChevronLeftIcon />*/}
-				{/*      Back*/}
-				{/*    </Button>*/}
-				{/*  </DialogClose>*/}
-				{/*  <Button type="button">Read More</Button>*/}
-				{/*</DialogFooter>*/}
 			</DialogContent>
 		</Dialog>
 	);
-};
+}

package/src/components/templates/template-catalog.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, test } from 'bun:test';
+import { listExamples, listTemplates } from '@contractspec/module.examples';
+import {
+	buildLocalTemplateCatalog,
+	matchesTemplateFilters,
+} from './template-catalog';
+import { NEW_TEMPLATE_IDS } from './template-new';
+import {
+	getAvailableTemplateSources,
+	isRegistryConfigured,
+} from './template-source';
+
+describe('template catalog', () => {
+	test('includes every public example exposed as a template', () => {
+		const catalog = buildLocalTemplateCatalog(listExamples(), listTemplates());
+		const actualIds = [...catalog].map((template) => template.id).sort();
+		const expectedIds = listExamples()
+			.filter(
+				(example) =>
+					example.meta.visibility === 'public' && example.surfaces.templates
+			)
+			.map((example) => example.meta.key)
+			.sort();
+
+		expect(actualIds).toEqual(expectedIds);
+	});
+
+	test('drops legacy conceptual cards and applies curated new badges', () => {
+		const catalog = buildLocalTemplateCatalog(listExamples(), listTemplates());
+		const ids = new Set(catalog.map((template) => template.id));
+		const newIds = catalog
+			.filter((template) => template.isNew)
+			.map((template) => template.id)
+			.sort();
+
+		expect(ids.has('plumber-ops')).toBe(false);
+		expect(ids.has('coliving-management')).toBe(false);
+		expect(ids.has('content-review')).toBe(false);
+		expect(newIds).toEqual([...NEW_TEMPLATE_IDS].sort());
+	});
+
+	test('derives searchable tags from real example metadata', () => {
+		const catalog = buildLocalTemplateCatalog(listExamples(), listTemplates());
+		const tags = new Set(catalog.flatMap((template) => template.tags));
+
+		expect(tags.has('quickstart')).toBe(true);
+		expect(tags.has('gradium')).toBe(true);
+		expect(
+			catalog.some((template) =>
+				matchesTemplateFilters(template, 'voice gradium', null)
+			)
+		).toBe(true);
+	});
+});
+
+describe('template source configuration', () => {
+	test('only exposes community source when a registry url is configured', () => {
+		expect(isRegistryConfigured(undefined)).toBe(false);
+		expect(isRegistryConfigured('   ')).toBe(false);
+		expect(isRegistryConfigured('https://registry.contractspec.io')).toBe(true);
+		expect(getAvailableTemplateSources(undefined)).toEqual(['local']);
+		expect(
+			getAvailableTemplateSources('https://registry.contractspec.io')
+		).toEqual(['local', 'registry']);
+	});
+});

package/src/components/templates/template-catalog.ts

@@ -0,0 +1,132 @@
+import type {
+	ExampleKind,
+	ExampleSandboxMode,
+	ExampleSpec,
+} from '@contractspec/lib.contracts-spec/examples/types';
+import type { Stability } from '@contractspec/lib.contracts-spec/ownership';
+import type {
+	TemplateDefinition,
+	TemplateId,
+} from '@contractspec/lib.example-shared-ui';
+import { listExamples, listTemplates } from '@contractspec/module.examples';
+import { isNewTemplateId, NEW_TEMPLATE_IDS } from './template-new';
+
+export interface LocalTemplateCatalogItem {
+	id: TemplateId;
+	title: string;
+	description: string;
+	tags: string[];
+	kind: ExampleKind;
+	stability: Stability;
+	previewUrl: string;
+	featureList: string[];
+	sandboxModes: readonly ExampleSandboxMode[];
+	renderTargets: string[];
+	isNew: boolean;
+	packageName: string;
+}
+
+interface TemplateFilterCandidate {
+	title: string;
+	description: string;
+	tags: readonly string[];
+}
+
+const NEW_TEMPLATE_INDEX = new Map<string, number>(
+	NEW_TEMPLATE_IDS.map((templateId, index) => [templateId, index] as const)
+);
+
+export function buildLocalTemplateCatalog(
+	examples: readonly ExampleSpec[] = listExamples(),
+	templates: readonly TemplateDefinition[] = listTemplates()
+): LocalTemplateCatalogItem[] {
+	const templatesById = new Map(
+		templates.map((template) => [template.id, template])
+	);
+
+	return examples
+		.filter(
+			(example) =>
+				example.meta.visibility === 'public' && example.surfaces.templates
+		)
+		.map((example) => {
+			const template = templatesById.get(example.meta.key);
+			const tags = Array.from(
+				new Set(example.meta.tags.map((tag) => tag.trim()).filter(Boolean))
+			).sort((left, right) => left.localeCompare(right));
+
+			return {
+				id: example.meta.key,
+				title: example.meta.title ?? template?.name ?? example.meta.key,
+				description: example.meta.summary ?? example.meta.description,
+				tags,
+				kind: example.meta.kind,
+				stability: example.meta.stability,
+				previewUrl:
+					template?.preview?.demoUrl ??
+					`/sandbox?template=${encodeURIComponent(example.meta.key)}`,
+				featureList: [...(template?.features ?? [])],
+				sandboxModes: example.surfaces.sandbox.modes,
+				renderTargets: [...(template?.renderTargets ?? [])],
+				isNew: isNewTemplateId(example.meta.key),
+				packageName: example.entrypoints.packageName,
+			};
+		})
+		.sort(compareLocalTemplateCatalogItems);
+}
+
+export function matchesTemplateFilters(
+	template: TemplateFilterCandidate,
+	search: string,
+	selectedTag: string | null
+): boolean {
+	const haystack = [
+		template.title,
+		template.description,
+		template.tags.join(' '),
+	]
+		.join(' ')
+		.toLowerCase();
+	const searchTokens = search.trim().toLowerCase().split(/\s+/).filter(Boolean);
+	const matchesSearch =
+		searchTokens.length === 0 ||
+		searchTokens.every((token) => haystack.includes(token));
+	const matchesTag =
+		selectedTag === null || template.tags.includes(selectedTag);
+
+	return matchesSearch && matchesTag;
+}
+
+export function formatExampleKindLabel(kind: ExampleKind): string {
+	return kind
+		.split('-')
+		.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+		.join(' ');
+}
+
+export function formatStabilityLabel(stability: Stability): string {
+	return stability
+		.split('_')
+		.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+		.join(' ');
+}
+
+function compareLocalTemplateCatalogItems(
+	left: LocalTemplateCatalogItem,
+	right: LocalTemplateCatalogItem
+): number {
+	const leftNewIndex = NEW_TEMPLATE_INDEX.get(left.id);
+	const rightNewIndex = NEW_TEMPLATE_INDEX.get(right.id);
+
+	if (leftNewIndex !== undefined || rightNewIndex !== undefined) {
+		if (leftNewIndex === undefined) {
+			return 1;
+		}
+		if (rightNewIndex === undefined) {
+			return -1;
+		}
+		return leftNewIndex - rightNewIndex;
+	}
+
+	return left.title.localeCompare(right.title);
+}

package/src/components/templates/template-new.ts

@@ -0,0 +1,12 @@
+export const NEW_TEMPLATE_IDS = [
+	'minimal',
+	'messaging-agent-actions',
+	'policy-safe-knowledge-assistant',
+	'visualization-showcase',
+] as const;
+
+const NEW_TEMPLATE_ID_SET = new Set<string>(NEW_TEMPLATE_IDS);
+
+export function isNewTemplateId(templateId: string): boolean {
+	return NEW_TEMPLATE_ID_SET.has(templateId);
+}