@contractspec/bundle.marketing 3.8.8 → 3.8.10

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/TemplatesOverlays.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from '@contractspec/lib.ui-kit-web/ui/dialog';
+import { StudioSignupSection } from '../marketing';
+import { TemplateCommandDialog } from './TemplateCommandDialog';
+import { TemplatePreviewModal } from './TemplatesPreviewModal';
+
+export interface TemplatesOverlaysProps {
+	previewTemplateId: string | null;
+	onPreviewClose: () => void;
+	studioSignupModalOpen: boolean;
+	onStudioSignupModalOpenChange: (open: boolean) => void;
+	selectedTemplateId: string | null;
+	onTemplateCommandClose: () => void;
+	onDeployStudio: () => void;
+}
+
+export function TemplatesOverlays({
+	previewTemplateId,
+	onPreviewClose,
+	studioSignupModalOpen,
+	onStudioSignupModalOpenChange,
+	selectedTemplateId,
+	onTemplateCommandClose,
+	onDeployStudio,
+}: TemplatesOverlaysProps) {
+	return (
+		<>
+			{previewTemplateId ? (
+				<TemplatePreviewModal
+					templateId={previewTemplateId}
+					onClose={onPreviewClose}
+				/>
+			) : null}
+
+			<Dialog
+				open={studioSignupModalOpen}
+				onOpenChange={onStudioSignupModalOpenChange}
+			>
+				<DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
+					<DialogHeader>
+						<DialogTitle>Deploy in Studio</DialogTitle>
+						<DialogDescription>
+							Deploy templates in ContractSpec Studio and run the full
+							evidence-to-spec loop with your team.
+						</DialogDescription>
+					</DialogHeader>
+					<StudioSignupSection variant="compact" />
+				</DialogContent>
+			</Dialog>
+
+			<TemplateCommandDialog
+				templateId={selectedTemplateId}
+				onClose={onTemplateCommandClose}
+				onDeployStudio={onDeployStudio}
+			/>
+		</>
+	);
+}

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,162 @@
+import { describe, expect, test } from 'bun:test';
+import { listExamples, listTemplates } from '@contractspec/module.examples';
+import {
+	buildLocalTemplateCatalog,
+	matchesTemplateFilters,
+} from './template-catalog';
+import { buildTemplateFilterState } from './template-filters';
+import { NEW_TEMPLATE_IDS } from './template-new';
+import {
+	getAvailableTemplateSources,
+	isRegistryConfigured,
+} from './template-source';
+import {
+	DEFAULT_VISIBLE_TEMPLATE_TAGS,
+	getVisibleTemplateTagFacets,
+} from './template-tag-visibility';
+
+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);
+	});
+
+	test('derives tag facets from the templates remaining after search', () => {
+		const catalog = buildLocalTemplateCatalog(listExamples(), listTemplates());
+		const state = buildTemplateFilterState(
+			catalog,
+			'agent',
+			null,
+			(template) => template
+		);
+		const tags = state.tagFacets.map((facet) => facet.tag);
+
+		expect(state.searchScopedTemplates.length).toBeGreaterThan(0);
+		expect(tags).toContain('agents');
+		expect(tags).not.toContain('billing');
+	});
+
+	test('applies selected tags after search scoping', () => {
+		const catalog = buildLocalTemplateCatalog(listExamples(), listTemplates());
+		const state = buildTemplateFilterState(
+			catalog,
+			'agent',
+			'telegram',
+			(template) => template
+		);
+
+		expect(state.searchScopedTemplates.length).toBeGreaterThan(
+			state.finalTemplates.length
+		);
+		expect(
+			state.finalTemplates.every((template) =>
+				template.tags.includes('telegram')
+			)
+		).toBe(true);
+	});
+
+	test('caps default tag visibility and keeps selected hidden tags visible', () => {
+		const tagFacets = Array.from(
+			{ length: DEFAULT_VISIBLE_TEMPLATE_TAGS + 2 },
+			(_, index) => ({
+				tag: `tag-${index}`,
+				count: DEFAULT_VISIBLE_TEMPLATE_TAGS + 2 - index,
+			})
+		);
+		const { visibleTagFacets, hiddenTagFacets } = getVisibleTemplateTagFacets(
+			tagFacets,
+			'tag-11',
+			false
+		);
+
+		expect(visibleTagFacets).toHaveLength(DEFAULT_VISIBLE_TEMPLATE_TAGS + 1);
+		expect(visibleTagFacets.some((facet) => facet.tag === 'tag-11')).toBe(true);
+		expect(hiddenTagFacets.some((facet) => facet.tag === 'tag-11')).toBe(false);
+	});
+
+	test('recomputes source-specific tags from the active source only', () => {
+		const localTemplates = [
+			{
+				title: 'Local agent console',
+				description: 'Agent workflows',
+				tags: ['agents', 'local'],
+			},
+		];
+		const registryTemplates = [
+			{
+				title: 'Registry recipe app',
+				description: 'Cooking workflows',
+				tags: ['recipes', 'community'],
+			},
+		];
+		const localState = buildTemplateFilterState(
+			localTemplates,
+			'',
+			null,
+			(template) => template
+		);
+		const registryState = buildTemplateFilterState(
+			registryTemplates,
+			'',
+			null,
+			(template) => template
+		);
+
+		expect(localState.tagFacets.map((facet) => facet.tag)).toEqual([
+			'agents',
+			'local',
+		]);
+		expect(registryState.tagFacets.map((facet) => facet.tag)).toEqual([
+			'community',
+			'recipes',
+		]);
+	});
+});
+
+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']);
+	});
+});