@contractspec/bundle.marketing 3.8.9 → 3.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/bundle.marketing",
-  "version": "3.8.9",
+  "version": "3.8.10",
   "type": "module",
   "scripts": {
     "clean": "rm -rf dist",
@@ -211,6 +211,13 @@
       "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",
@@ -232,6 +239,13 @@
       "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",
@@ -288,6 +302,13 @@
       "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",
@@ -302,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",
@@ -417,29 +445,29 @@
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@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",
+    "@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",
@@ -454,9 +482,9 @@
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
-    "@contractspec/tool.typescript": "3.7.12",
+    "@contractspec/tool.typescript": "3.7.13",
     "typescript": "^5.9.3",
-    "@contractspec/tool.bun": "3.7.12"
+    "@contractspec/tool.bun": "3.7.13"
   },
   "publishConfig": {
     "access": "public",
@@ -651,6 +679,13 @@
         "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",
@@ -672,6 +707,13 @@
         "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",
@@ -728,6 +770,13 @@
         "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",
@@ -742,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/TemplatesBrowseControls.tsx

@@ -3,6 +3,7 @@
 import { cn } from '@contractspec/lib.ui-kit-core/utils';
 import { Search } from 'lucide-react';
 import type { TemplateSource } from './template-source';
+import type { TemplateTagFacet } from './template-tag-visibility';
 
 export interface TemplatesBrowseControlsProps {
 	registryConfigured: boolean;
@@ -13,7 +14,11 @@ export interface TemplatesBrowseControlsProps {
 	onSearchChange: (value: string) => void;
 	selectedTag: string | null;
 	onTagChange: (tag: string | null) => void;
-	availableTags: readonly string[];
+	showTagFilters: boolean;
+	visibleTagFacets: readonly TemplateTagFacet[];
+	hiddenTagFacets: readonly TemplateTagFacet[];
+	showAllTags: boolean;
+	onShowAllTagsChange: (expanded: boolean) => void;
 }
 
 export function TemplatesBrowseControls({
@@ -25,7 +30,11 @@ export function TemplatesBrowseControls({
 	onSearchChange,
 	selectedTag,
 	onTagChange,
-	availableTags,
+	showTagFilters,
+	visibleTagFacets,
+	hiddenTagFacets,
+	showAllTags,
+	onShowAllTagsChange,
 }: TemplatesBrowseControlsProps) {
 	return (
 		<section className="editorial-section">
@@ -80,39 +89,54 @@ export function TemplatesBrowseControls({
 							aria-label="Search templates"
 						/>
 					</div>
-					<div className="flex flex-wrap gap-2">
-						<button
-							onClick={() => onTagChange(null)}
-							className={cn(
-								'rounded-full px-4 py-2 font-medium text-sm transition-colors',
-								{
-									'bg-primary text-primary-foreground': selectedTag === null,
-									'border border-border bg-card hover:bg-card/80':
-										selectedTag !== null,
-								}
-							)}
-							aria-pressed={selectedTag === null}
-						>
-							All
-						</button>
-						{availableTags.map((tag) => (
-							<button
-								key={tag}
-								onClick={() => onTagChange(tag)}
-								className={cn(
-									'rounded-full px-4 py-2 font-medium text-sm transition-colors',
-									{
-										'bg-primary text-primary-foreground': selectedTag === tag,
-										'border border-border bg-card hover:bg-card/80':
-											selectedTag !== tag,
-									}
-								)}
-								aria-pressed={selectedTag === tag}
-							>
-								{tag}
-							</button>
-						))}
-					</div>
+					{showTagFilters ? (
+						<div className="space-y-3">
+							<div className="flex flex-wrap gap-2">
+								<button
+									onClick={() => onTagChange(null)}
+									className={cn(
+										'rounded-full px-4 py-2 font-medium text-sm transition-colors',
+										{
+											'bg-primary text-primary-foreground':
+												selectedTag === null,
+											'border border-border bg-card hover:bg-card/80':
+												selectedTag !== null,
+										}
+									)}
+									aria-pressed={selectedTag === null}
+								>
+									All
+								</button>
+								{visibleTagFacets.map((facet) => (
+									<button
+										key={facet.tag}
+										onClick={() => onTagChange(facet.tag)}
+										className={cn(
+											'rounded-full px-4 py-2 font-medium text-sm transition-colors',
+											{
+												'bg-primary text-primary-foreground':
+													selectedTag === facet.tag,
+												'border border-border bg-card hover:bg-card/80':
+													selectedTag !== facet.tag,
+											}
+										)}
+										aria-pressed={selectedTag === facet.tag}
+									>
+										{facet.tag}
+									</button>
+								))}
+							</div>
+							{hiddenTagFacets.length > 0 || showAllTags ? (
+								<button
+									type="button"
+									onClick={() => onShowAllTagsChange(!showAllTags)}
+									className="text-muted-foreground text-sm transition-colors hover:text-foreground"
+								>
+									{showAllTags ? 'Show fewer' : 'More tags'}
+								</button>
+							) : null}
+						</div>
+					) : null}
 				</div>
 			</div>
 		</section>

package/src/components/templates/TemplatesCatalogSection.tsx

@@ -18,24 +18,31 @@ export interface TemplatesCatalogSectionProps {
 	source: TemplateSource;
 	registryConfigured: boolean;
 	registryLoading: boolean;
+	registryHasTemplates: boolean;
 	localTemplates: readonly LocalTemplateCatalogItem[];
 	registryTemplates: readonly RegistryTemplate[];
 	localTemplateById: ReadonlyMap<string, LocalTemplateCatalogItem>;
 	onPreview: (templateId: string) => void;
 	onUseTemplate: (templateId: string, source: TemplateSource) => void;
+	hasSearch: boolean;
+	selectedTag: string | null;
 }
 
 export function TemplatesCatalogSection({
 	source,
 	registryConfigured,
 	registryLoading,
+	registryHasTemplates,
 	localTemplates,
 	registryTemplates,
 	localTemplateById,
 	onPreview,
 	onUseTemplate,
+	hasSearch,
+	selectedTag,
 }: TemplatesCatalogSectionProps) {
 	const showRegistry = source === 'registry' && registryConfigured;
+	const emptyStateMessage = getEmptyStateMessage(hasSearch, selectedTag);
 
 	return (
 		<section className="section-padding">
@@ -47,12 +54,16 @@ export function TemplatesCatalogSection({
 								Loading community templates…
 							</p>
 						</div>
-					) : registryTemplates.length === 0 ? (
+					) : !registryHasTemplates ? (
 						<div className="py-12 text-center">
 							<p className="text-muted-foreground">
 								No community templates found.
 							</p>
 						</div>
+					) : registryTemplates.length === 0 ? (
+						<div className="py-12 text-center">
+							<p className="text-muted-foreground">{emptyStateMessage}</p>
+						</div>
 					) : (
 						<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
 							{registryTemplates.map((template) => {
@@ -109,9 +120,7 @@ export function TemplatesCatalogSection({
 					)
 				) : localTemplates.length === 0 ? (
 					<div className="py-12 text-center">
-						<p className="text-muted-foreground">
-							No templates match your filters. Try a different search.
-						</p>
+						<p className="text-muted-foreground">{emptyStateMessage}</p>
 					</div>
 				) : (
 					<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
@@ -164,3 +173,19 @@ export function TemplatesCatalogSection({
 		</section>
 	);
 }
+
+function getEmptyStateMessage(
+	hasSearch: boolean,
+	selectedTag: string | null
+): string {
+	if (selectedTag !== null && hasSearch) {
+		return 'No templates match this tag for the current search.';
+	}
+	if (selectedTag !== null) {
+		return 'No templates match this tag. Try another tag or reset filters.';
+	}
+	if (hasSearch) {
+		return 'No templates match your search. Try a different keyword.';
+	}
+	return 'No templates match your filters. Try a different search.';
+}

package/src/components/templates/TemplatesClientPage.tsx

@@ -4,37 +4,15 @@ import {
 	analyticsEventNames,
 	captureAnalyticsEvent,
 } from '@contractspec/bundle.library/libs/posthog/client';
-import { useRegistryTemplates } from '@contractspec/lib.example-shared-ui';
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-} from '@contractspec/lib.ui-kit-web/ui/dialog';
-import { useMemo, useState } from 'react';
-import { StudioSignupSection } from '../marketing';
-import { TemplateCommandDialog } from './TemplateCommandDialog';
+import { useState } from 'react';
 import { TemplatesBrowseControls } from './TemplatesBrowseControls';
 import { TemplatesCatalogSection } from './TemplatesCatalogSection';
 import { TemplatesHeroSection } from './TemplatesHeroSection';
 import { TemplatesNextStepsSection } from './TemplatesNextStepsSection';
-import { TemplatePreviewModal } from './TemplatesPreviewModal';
-import {
-	buildLocalTemplateCatalog,
-	matchesTemplateFilters,
-} from './template-catalog';
-import {
-	getAvailableTemplateSources,
-	isRegistryConfigured,
-	type TemplateSource,
-} from './template-source';
-
-const REGISTRY_URL = process.env.NEXT_PUBLIC_CONTRACTSPEC_REGISTRY_URL;
+import { TemplatesOverlays } from './TemplatesOverlays';
+import { useTemplateBrowseState } from './useTemplateBrowseState';
 
 export const TemplatesPage = () => {
-	const [selectedTag, setSelectedTag] = useState<string | null>(null);
-	const [search, setSearch] = useState('');
 	const [previewTemplateId, setPreviewTemplateId] = useState<string | null>(
 		null
 	);
@@ -42,49 +20,27 @@ export const TemplatesPage = () => {
 	const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(
 		null
 	);
-	const [source, setSource] = useState<TemplateSource>('local');
-
-	const registryConfigured = isRegistryConfigured(REGISTRY_URL);
-	const availableSources = getAvailableTemplateSources(REGISTRY_URL);
-	const localTemplates = useMemo(() => buildLocalTemplateCatalog(), []);
-	const localTemplateById = useMemo(
-		() => new Map(localTemplates.map((template) => [template.id, template])),
-		[localTemplates]
-	);
-	const availableTags = useMemo(
-		() =>
-			Array.from(
-				new Set(localTemplates.flatMap((template) => template.tags))
-			).sort((left, right) => left.localeCompare(right)),
-		[localTemplates]
-	);
-
-	const { data: registryTemplates = [], isLoading: registryLoading } =
-		useRegistryTemplates();
-
-	const filteredLocalTemplates = useMemo(
-		() =>
-			localTemplates.filter((template) =>
-				matchesTemplateFilters(template, search, selectedTag)
-			),
-		[localTemplates, search, selectedTag]
-	);
-
-	const filteredRegistryTemplates = useMemo(
-		() =>
-			registryTemplates.filter((template) =>
-				matchesTemplateFilters(
-					{
-						title: template.name,
-						description: template.description,
-						tags: template.tags,
-					},
-					search,
-					selectedTag
-				)
-			),
-		[registryTemplates, search, selectedTag]
-	);
+	const {
+		selectedTag,
+		setSelectedTag,
+		search,
+		setSearch,
+		source,
+		setSource,
+		showAllTags,
+		setShowAllTags,
+		registryConfigured,
+		availableSources,
+		localTemplates,
+		localTemplateById,
+		registryTemplates,
+		registryLoading,
+		localFilterState,
+		registryFilterState,
+		visibleTagFacets,
+		hiddenTagFacets,
+		showTagFilters,
+	} = useTemplateBrowseState();
 
 	return (
 		<>
@@ -102,14 +58,19 @@ export const TemplatesPage = () => {
 					onSearchChange={setSearch}
 					selectedTag={selectedTag}
 					onTagChange={setSelectedTag}
-					availableTags={availableTags}
+					showTagFilters={showTagFilters}
+					visibleTagFacets={visibleTagFacets}
+					hiddenTagFacets={hiddenTagFacets}
+					showAllTags={showAllTags}
+					onShowAllTagsChange={setShowAllTags}
 				/>
 				<TemplatesCatalogSection
 					source={source}
 					registryConfigured={registryConfigured}
 					registryLoading={registryLoading}
-					localTemplates={filteredLocalTemplates}
-					registryTemplates={filteredRegistryTemplates}
+					registryHasTemplates={registryTemplates.length > 0}
+					localTemplates={localFilterState.finalTemplates}
+					registryTemplates={registryFilterState.finalTemplates}
 					localTemplateById={localTemplateById}
 					onPreview={setPreviewTemplateId}
 					onUseTemplate={(templateId, templateSource) => {
@@ -120,36 +81,19 @@ export const TemplatesPage = () => {
 						});
 						setSelectedTemplateId(templateId);
 					}}
+					hasSearch={search.trim().length > 0}
+					selectedTag={selectedTag}
 				/>
 				<TemplatesNextStepsSection />
 			</main>
 
-			{previewTemplateId ? (
-				<TemplatePreviewModal
-					templateId={previewTemplateId}
-					onClose={() => setPreviewTemplateId(null)}
-				/>
-			) : null}
-
-			<Dialog
-				open={studioSignupModalOpen}
-				onOpenChange={setStudioSignupModalOpen}
-			>
-				<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={() => setSelectedTemplateId(null)}
+			<TemplatesOverlays
+				previewTemplateId={previewTemplateId}
+				onPreviewClose={() => setPreviewTemplateId(null)}
+				studioSignupModalOpen={studioSignupModalOpen}
+				onStudioSignupModalOpenChange={setStudioSignupModalOpen}
+				selectedTemplateId={selectedTemplateId}
+				onTemplateCommandClose={() => setSelectedTemplateId(null)}
 				onDeployStudio={() => {
 					setSelectedTemplateId(null);
 					setStudioSignupModalOpen(true);

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}
+			/>
+		</>
+	);
+}