@contractspec/bundle.marketing 1.12.0

package/dist/components/templates/TemplatesClientPage.js

@@ -0,0 +1,625 @@
+'use client';
+
+import { WaitlistSection } from "../marketing/waitlist-section.js";
+import "../marketing/index.js";
+import { TemplatePreviewModal } from "./TemplatesPreviewModal.js";
+import { analyticsEventNames, captureAnalyticsEvent } from "@contractspec/bundle.library/libs/posthog/client";
+import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "next/link";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@contractspec/lib.ui-kit-web/ui/dialog";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { useRegistryTemplates } from "@contractspec/lib.example-shared-ui";
+import { getTemplate } from "@contractspec/module.examples";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@contractspec/lib.ui-kit-web/ui/tooltip";
+
+//#region src/components/templates/TemplatesClientPage.tsx
+const templates = [
+	{
+		id: "minimal-example",
+		templateId: "todos-app",
+		title: "Minimal Example",
+		description: "A minimal template to get you running in minutes. Perfect for exploring the engine.",
+		tags: ["Getting Started"],
+		capabilities: "Basic Forms, Auth",
+		isStarter: true,
+		previewUrl: "/sandbox?template=minimal-example",
+		docsUrl: "/docs/getting-started/hello-world"
+	},
+	{
+		id: "saas-boilerplate",
+		templateId: "saas-boilerplate",
+		title: "SaaS Boilerplate",
+		description: "Complete SaaS foundation with multi-tenant orgs, projects, settings, and billing usage.",
+		tags: [
+			"Getting Started",
+			"SaaS",
+			"Business"
+		],
+		capabilities: "Multi-tenancy, RBAC, Projects, Billing",
+		isNew: true,
+		previewUrl: "/sandbox?template=saas-boilerplate",
+		docsUrl: "/docs/templates/saas-boilerplate"
+	},
+	{
+		id: "crm-pipeline",
+		templateId: "crm-pipeline",
+		title: "CRM Pipeline",
+		description: "Sales CRM with contacts, companies, deals, pipeline stages, and task management.",
+		tags: ["CRM", "Business"],
+		capabilities: "Contacts, Deals, Pipelines, Tasks",
+		isNew: true,
+		previewUrl: "/sandbox?template=crm-pipeline",
+		docsUrl: "/docs/templates/crm-pipeline"
+	},
+	{
+		id: "agent-console",
+		templateId: "agent-console",
+		title: "AI Agent Console",
+		description: "AI agent orchestration platform with tools, agents, runs, and execution logs.",
+		tags: ["AI", "Ops"],
+		capabilities: "Tools, Agents, Runs, Metrics",
+		isNew: true,
+		previewUrl: "/sandbox?template=agent-console",
+		docsUrl: "/docs/templates/agent-console"
+	},
+	{
+		id: "workflow-system",
+		templateId: "workflow-system",
+		title: "Workflow / Approval System",
+		description: "Multi-step workflows with role-based approvals and state transitions.",
+		tags: ["Business", "Ops"],
+		capabilities: "Workflows, Approvals, State Machine",
+		isNew: true,
+		previewUrl: "/sandbox?template=workflow-system",
+		docsUrl: "/docs/templates/workflow-system"
+	},
+	{
+		id: "marketplace",
+		templateId: "marketplace",
+		title: "Marketplace",
+		description: "Two-sided marketplace with stores, products, orders, and payouts.",
+		tags: ["Business", "Payments"],
+		capabilities: "Stores, Products, Orders, Payouts",
+		isNew: true,
+		previewUrl: "/sandbox?template=marketplace",
+		docsUrl: "/docs/templates/marketplace"
+	},
+	{
+		id: "integration-hub",
+		templateId: "integration-hub",
+		title: "Integration Hub",
+		description: "Third-party integrations with connections, sync configs, and field mapping.",
+		tags: ["Ops", "AI"],
+		capabilities: "Integrations, Connections, Sync",
+		isNew: true,
+		previewUrl: "/sandbox?template=integration-hub",
+		docsUrl: "/docs/templates/integration-hub"
+	},
+	{
+		id: "learning-journey-studio-onboarding",
+		templateId: "learning-journey-studio-onboarding",
+		title: "Learning Journey — Studio Getting Started",
+		description: "First 30 minutes in Studio: choose template, edit spec, regenerate, playground, evolution.",
+		tags: ["Learning", "Onboarding"],
+		capabilities: "Spec-first onboarding, XP/streak, progress widget",
+		isNew: true,
+		previewUrl: "/sandbox?template=learning-journey-studio-onboarding",
+		docsUrl: "/docs/templates/learning-journey-studio-onboarding"
+	},
+	{
+		id: "learning-journey-platform-tour",
+		templateId: "learning-journey-platform-tour",
+		title: "Learning Journey — Platform Primitives Tour",
+		description: "Touch identity, audit, notifications, jobs, flags, files, metering once with guided steps.",
+		tags: ["Learning", "Platform"],
+		capabilities: "Cross-module tour with event-driven completion",
+		isNew: true,
+		previewUrl: "/sandbox?template=learning-journey-platform-tour",
+		docsUrl: "/docs/templates/learning-journey-platform-tour"
+	},
+	{
+		id: "learning-journey-crm-onboarding",
+		templateId: "learning-journey-crm-onboarding",
+		title: "Learning Journey — CRM First Win",
+		description: "Get to first closed-won deal: pipeline, contact/company, deal, stages, follow-up.",
+		tags: ["Learning", "CRM"],
+		capabilities: "CRM onboarding with XP/streak/badge",
+		isNew: true,
+		previewUrl: "/sandbox?template=learning-journey-crm-onboarding",
+		docsUrl: "/docs/templates/learning-journey-crm-onboarding"
+	},
+	{
+		id: "analytics-dashboard",
+		templateId: "analytics-dashboard",
+		title: "Analytics Dashboard",
+		description: "Custom dashboards with widgets, saved queries, and real-time visualization.",
+		tags: ["Business", "Ops"],
+		capabilities: "Dashboards, Widgets, Queries",
+		isNew: true,
+		previewUrl: "/sandbox?template=analytics-dashboard",
+		docsUrl: "/docs/templates/analytics-dashboard"
+	},
+	{
+		id: "plumber-ops",
+		templateId: "messaging-app",
+		title: "Plumber Ops",
+		description: "Complete workflow: Quotes → Deposit → Job → Invoice → Payment. Policy-enforced approvals.",
+		tags: ["Trades", "Payments"],
+		capabilities: "Quotes, Jobs, Invoicing, Payments",
+		previewUrl: "/sandbox?template=plumber-ops",
+		docsUrl: "/docs/specs/workflows"
+	},
+	{
+		id: "coliving-management",
+		templateId: "recipe-app-i18n",
+		title: "Coliving Management",
+		description: "Coliving management: Onboarding, chores, shared wallet. Multi-party approvals built-in.",
+		tags: ["Coliving", "Finance"],
+		capabilities: "Tasks, Approvals, Payments",
+		previewUrl: "/sandbox?template=coliving-management",
+		docsUrl: "/docs/specs/workflows"
+	},
+	{
+		id: "chores-allowance",
+		templateId: "todos-app",
+		title: "Chores & Allowance",
+		description: "Family task management with approval workflows. Teach financial accountability safely.",
+		tags: ["Family", "Ops"],
+		capabilities: "Tasks, Approvals, Notifications",
+		previewUrl: "/sandbox?template=chores-allowance",
+		docsUrl: "/docs/specs/workflows"
+	},
+	{
+		id: "service-dispatch",
+		templateId: "messaging-app",
+		title: "Service Dispatch",
+		description: "Field service scheduling, routing, and invoicing. Real-time coordination with policy gates.",
+		tags: ["Ops", "Trades"],
+		capabilities: "Scheduling, Maps, Invoicing",
+		previewUrl: "/sandbox?template=service-dispatch",
+		docsUrl: "/docs/specs/workflows"
+	},
+	{
+		id: "content-review",
+		templateId: "todos-app",
+		title: "Content Review",
+		description: "Multi-stage approval workflow for content. Audit trail for every decision.",
+		tags: ["Ops"],
+		capabilities: "Workflows, Approvals, Comments",
+		previewUrl: "/sandbox?template=content-review",
+		docsUrl: "/docs/specs/workflows"
+	}
+];
+const allTags = [
+	"Getting Started",
+	"SaaS",
+	"Business",
+	"CRM",
+	"AI",
+	"Trades",
+	"Coliving",
+	"Family",
+	"Ops",
+	"Payments",
+	"Learning",
+	"Platform"
+];
+const TemplatesPage = () => {
+	const [selectedTag, setSelectedTag] = useState(null);
+	const [search, setSearch] = useState("");
+	const [preview, setPreview] = useState(null);
+	const [waitlistModalOpen, setWaitlistModalOpen] = useState(false);
+	const [source, setSource] = useState("local");
+	const [selectedTemplateForCommand, setSelectedTemplateForCommand] = useState(null);
+	const { data: registryTemplates = [], isLoading: registryLoading } = useRegistryTemplates();
+	const filtered = templates.filter((t) => {
+		const matchTag = !selectedTag || t.tags.includes(selectedTag);
+		const matchSearch = !search || t.title.toLowerCase().includes(search.toLowerCase()) || t.description.toLowerCase().includes(search.toLowerCase());
+		return matchTag && matchSearch;
+	});
+	const commandId = selectedTemplateForCommand ? "templateId" in selectedTemplateForCommand ? selectedTemplateForCommand.templateId : selectedTemplateForCommand.id : "";
+	return /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+		/* @__PURE__ */ jsxs("main", {
+			className: "",
+			children: [
+				/* @__PURE__ */ jsx("section", {
+					className: "section-padding hero-gradient border-border relative border-b",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "mx-auto max-w-4xl space-y-6 text-center",
+						children: [/* @__PURE__ */ jsx("h1", {
+							className: "text-5xl leading-tight font-bold md:text-6xl",
+							children: "Recipe templates"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-lg",
+							children: "Ready-to-use, customizable recipes. Policies built in. One-click deploy."
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsx("section", {
+					className: "section-padding border-border border-b",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "mx-auto max-w-6xl space-y-6",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between gap-3",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-muted-foreground text-sm",
+									children: "Source:"
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex gap-2",
+									children: [/* @__PURE__ */ jsx("button", {
+										onClick: () => setSource("local"),
+										className: cn("rounded-full px-4 py-2 text-sm font-medium transition-colors", {
+											"bg-violet-500 text-white": source === "local",
+											"bg-card border-border hover:bg-card/80 border": source !== "local"
+										}),
+										"aria-pressed": source === "local",
+										children: "Local"
+									}), /* @__PURE__ */ jsx("button", {
+										onClick: () => setSource("registry"),
+										className: cn("rounded-full px-4 py-2 text-sm font-medium transition-colors", {
+											"bg-violet-500 text-white": source === "registry",
+											"bg-card border-border hover:bg-card/80 border": source !== "registry"
+										}),
+										"aria-pressed": source === "registry",
+										children: "Community"
+									})]
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "relative",
+								children: [/* @__PURE__ */ jsx(Search, {
+									className: "text-muted-foreground absolute top-3 left-3",
+									size: 20
+								}), /* @__PURE__ */ jsx("input", {
+									type: "text",
+									placeholder: "Search templates...",
+									value: search,
+									onChange: (e) => setSearch(e.target.value),
+									className: "bg-card border-border w-full rounded-lg border py-3 pr-4 pl-10 focus:ring-2 focus:ring-violet-500 focus:outline-none",
+									"aria-label": "Search templates"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-wrap gap-2",
+								children: [/* @__PURE__ */ jsx("button", {
+									onClick: () => setSelectedTag(null),
+									className: `rounded-full px-4 py-2 text-sm font-medium transition-colors ${selectedTag === null ? "bg-violet-500 text-white" : "bg-card border-border hover:bg-card/80 border"}`,
+									"aria-pressed": selectedTag === null,
+									children: "All"
+								}), allTags.map((tag) => /* @__PURE__ */ jsx("button", {
+									onClick: () => setSelectedTag(tag),
+									className: cn(`rounded-full px-4 py-2 text-sm font-medium transition-colors`, {
+										"bg-violet-500 text-white": selectedTag === tag,
+										"bg-card border-border hover:bg-card/80 border": selectedTag !== tag
+									}),
+									"aria-pressed": selectedTag === tag,
+									children: tag
+								}, tag))]
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx("section", {
+					className: "section-padding",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "mx-auto max-w-6xl",
+						children: source === "registry" ? registryLoading ? /* @__PURE__ */ jsx("div", {
+							className: "py-12 text-center",
+							children: /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground",
+								children: "Loading community templates…"
+							})
+						}) : registryTemplates.length === 0 ? /* @__PURE__ */ jsx("div", {
+							className: "py-12 text-center",
+							children: /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground",
+								children: "No community templates found (configure `NEXT_PUBLIC_CONTRACTSPEC_REGISTRY_URL`)."
+							})
+						}) : /* @__PURE__ */ jsx("div", {
+							className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+							children: registryTemplates.map((t) => /* @__PURE__ */ jsxs("div", {
+								className: "card-subtle relative flex flex-col space-y-4 p-6 transition-colors hover:border-violet-500/50",
+								children: [
+									/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+										className: "text-lg font-bold",
+										children: t.name
+									}), /* @__PURE__ */ jsx("p", {
+										className: "text-muted-foreground mt-1 text-sm",
+										children: t.description
+									})] }),
+									/* @__PURE__ */ jsx("div", {
+										className: "flex-1 space-y-2",
+										children: /* @__PURE__ */ jsx("div", {
+											className: "flex flex-wrap gap-1",
+											children: t.tags.map((tag) => /* @__PURE__ */ jsx("span", {
+												className: "rounded border border-violet-500/20 bg-violet-500/10 px-2 py-1 text-xs text-violet-300",
+												children: tag
+											}, tag))
+										})
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex gap-2 pt-4",
+										children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+											asChild: true,
+											children: /* @__PURE__ */ jsx("button", {
+												className: "btn-ghost flex-1 text-center text-xs",
+												onClick: () => {
+													if (!getTemplate(t.id)) {
+														setSelectedTemplateForCommand(t);
+														return;
+													}
+													setPreview(t.id);
+												},
+												children: "Preview"
+											})
+										}), /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Preview this template (if available locally)" }) })] }), /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+											asChild: true,
+											children: /* @__PURE__ */ jsx("button", {
+												className: "btn-primary flex-1 text-center text-xs",
+												onClick: () => {
+													captureAnalyticsEvent(analyticsEventNames.EXAMPLE_REPO_OPEN, {
+														surface: "templates",
+														templateId: t.id,
+														source: "registry"
+													});
+													setSelectedTemplateForCommand(t);
+												},
+												children: "Use Template"
+											})
+										}), /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Get CLI command" }) })] })]
+									})
+								]
+							}, t.id))
+						}) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", {
+							className: "py-12 text-center",
+							children: /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground",
+								children: "No templates match your filters. Try a different search."
+							})
+						}) : /* @__PURE__ */ jsx("div", {
+							className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+							children: filtered.map((template, i) => /* @__PURE__ */ jsxs("div", {
+								className: "card-subtle relative flex flex-col space-y-4 p-6 transition-colors hover:border-violet-500/50",
+								children: [
+									"isNew" in template && template.isNew && /* @__PURE__ */ jsx("span", {
+										className: "absolute top-3 right-3 rounded-full bg-green-500 px-2 py-0.5 text-xs font-semibold text-white",
+										children: "New"
+									}),
+									/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+										className: "text-lg font-bold",
+										children: template.title
+									}), /* @__PURE__ */ jsx("p", {
+										className: "text-muted-foreground mt-1 text-sm",
+										children: template.description
+									})] }),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex-1 space-y-2",
+										children: [/* @__PURE__ */ jsxs("p", {
+											className: "text-muted-foreground text-xs",
+											children: [
+												/* @__PURE__ */ jsx("span", {
+													className: "text-foreground font-medium",
+													children: "Capabilities:"
+												}),
+												" ",
+												template.capabilities
+											]
+										}), /* @__PURE__ */ jsx("div", {
+											className: "flex flex-wrap gap-1",
+											children: template.tags.map((tag) => /* @__PURE__ */ jsx("span", {
+												className: "rounded border border-violet-500/20 bg-violet-500/10 px-2 py-1 text-xs text-violet-300",
+												children: tag
+											}, tag))
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex gap-2 pt-4",
+										children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+											asChild: true,
+											children: /* @__PURE__ */ jsx("button", {
+												className: "btn-ghost flex-1 text-center text-xs",
+												onClick: () => setPreview(template.templateId),
+												children: "Preview"
+											})
+										}), /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Preview this template in a modal" }) })] }), /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+											asChild: true,
+											children: /* @__PURE__ */ jsx("button", {
+												className: "btn-primary flex-1 text-center text-xs",
+												onClick: () => {
+													captureAnalyticsEvent(analyticsEventNames.EXAMPLE_REPO_OPEN, {
+														surface: "templates",
+														templateId: template.templateId,
+														source: "local"
+													});
+													setSelectedTemplateForCommand(template);
+												},
+												children: "Use Template"
+											})
+										}), /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Get CLI command" }) })] })]
+									})
+								]
+							}, i))
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx("section", {
+					className: "section-padding border-border bg-striped border-t",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "mx-auto max-w-6xl space-y-8",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "space-y-4 text-center",
+								children: [/* @__PURE__ */ jsx("h2", {
+									className: "text-3xl font-bold md:text-4xl",
+									children: "Extend templates with integrations & knowledge"
+								}), /* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground mx-auto max-w-2xl",
+									children: "Every template can be enhanced with built-in integrations and knowledge spaces. Add payments, email, AI, and structured knowledge without writing integration code."
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "grid gap-6 md:grid-cols-3",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "card-subtle space-y-4 p-6",
+										children: [
+											/* @__PURE__ */ jsx("div", {
+												className: "text-3xl",
+												children: "💳"
+											}),
+											/* @__PURE__ */ jsx("h3", {
+												className: "font-bold",
+												children: "Add Payments"
+											}),
+											/* @__PURE__ */ jsx("p", {
+												className: "text-muted-foreground text-sm",
+												children: "Connect Stripe to any template for payment processing, subscriptions, and invoicing. Type-safe and policy-enforced."
+											}),
+											/* @__PURE__ */ jsx(Link, {
+												href: "/docs/integrations/stripe",
+												className: "inline-flex items-center gap-1 text-sm text-violet-400 hover:text-violet-300",
+												children: "Learn more →"
+											})
+										]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "card-subtle space-y-4 p-6",
+										children: [
+											/* @__PURE__ */ jsx("div", {
+												className: "text-3xl",
+												children: "📧"
+											}),
+											/* @__PURE__ */ jsx("h3", {
+												className: "font-bold",
+												children: "Add Notifications"
+											}),
+											/* @__PURE__ */ jsx("p", {
+												className: "text-muted-foreground text-sm",
+												children: "Send transactional emails via Postmark or Resend. Process inbound emails with Gmail API. SMS via Twilio."
+											}),
+											/* @__PURE__ */ jsx(Link, {
+												href: "/docs/integrations",
+												className: "inline-flex items-center gap-1 text-sm text-violet-400 hover:text-violet-300",
+												children: "View integrations →"
+											})
+										]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "card-subtle space-y-4 p-6",
+										children: [
+											/* @__PURE__ */ jsx("div", {
+												className: "text-3xl",
+												children: "🧠"
+											}),
+											/* @__PURE__ */ jsx("h3", {
+												className: "font-bold",
+												children: "Add AI & Knowledge"
+											}),
+											/* @__PURE__ */ jsx("p", {
+												className: "text-muted-foreground text-sm",
+												children: "Power templates with OpenAI, vector search via Qdrant, and structured knowledge spaces for context-aware workflows."
+											}),
+											/* @__PURE__ */ jsx(Link, {
+												href: "/docs/knowledge",
+												className: "inline-flex items-center gap-1 text-sm text-violet-400 hover:text-violet-300",
+												children: "Learn about knowledge →"
+											})
+										]
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "pt-4 text-center",
+								children: [/* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground mb-4 text-sm",
+									children: "All integrations are configured per-tenant with automatic health checks and credential rotation."
+								}), /* @__PURE__ */ jsx(Link, {
+									href: "/docs/architecture",
+									className: "btn-primary",
+									children: "View Architecture"
+								})]
+							})
+						]
+					})
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx(TemplatePreviewModal, {
+			templateId: preview,
+			onClose: () => {
+				setPreview(null);
+			}
+		}),
+		/* @__PURE__ */ jsx(Dialog, {
+			open: waitlistModalOpen,
+			onOpenChange: setWaitlistModalOpen,
+			children: /* @__PURE__ */ jsxs(DialogContent, {
+				className: "max-h-[90vh] max-w-2xl overflow-y-auto",
+				children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Early Access Required" }), /* @__PURE__ */ jsx(DialogDescription, { children: "ContractSpec Studio is in early access. Join the waitlist to deploy projects to our managed cloud." })] }), /* @__PURE__ */ jsx(WaitlistSection, { variant: "compact" })]
+			})
+		}),
+		/* @__PURE__ */ jsx(Dialog, {
+			open: !!selectedTemplateForCommand,
+			onOpenChange: () => setSelectedTemplateForCommand(null),
+			children: /* @__PURE__ */ jsxs(DialogContent, {
+				className: "max-w-md",
+				children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Use this template" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Initialize a new project with this template using the CLI." })] }), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-4 pt-4",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "rounded-md border border-zinc-800 bg-zinc-950 p-4 font-mono text-sm text-zinc-50",
+							children: ["npx contractspec init --template ", commandId]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex gap-2",
+							children: /* @__PURE__ */ jsx("button", {
+								className: "btn-secondary w-full",
+								onClick: () => {
+									navigator.clipboard.writeText(`npx contractspec init --template ${commandId}`);
+									captureAnalyticsEvent(analyticsEventNames.COPY_COMMAND_CLICK, {
+										surface: "templates",
+										templateId: commandId,
+										filename: "templates-cli"
+									});
+								},
+								children: "Copy Command"
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "relative",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "absolute inset-0 flex items-center",
+								children: /* @__PURE__ */ jsx("span", { className: "border-border w-full border-t" })
+							}), /* @__PURE__ */ jsx("div", {
+								className: "relative flex justify-center text-xs uppercase",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "bg-background text-muted-foreground px-2",
+									children: "Or"
+								})
+							})]
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: "btn-ghost w-full text-sm",
+							onClick: () => {
+								captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
+									surface: "templates",
+									templateId: commandId
+								});
+								setSelectedTemplateForCommand(null);
+								setWaitlistModalOpen(true);
+							},
+							children: "Deploy to Studio (Waitlist)"
+						})
+					]
+				})]
+			})
+		})
+	] });
+};
+
+//#endregion
+export { TemplatesPage };
+//# sourceMappingURL=TemplatesClientPage.js.map