@contractspec/lib.example-shared-ui 0.0.0-canary-20260113170453

package/dist/index.mjs

@@ -0,0 +1,3121 @@
+import { RefreshCw, Shield, Sparkles } from "lucide-react";
+import * as React from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, ErrorState, LoaderBlock } from "@contractspec/lib.design-system";
+import { Card } from "@contractspec/lib.ui-kit-web/ui/card";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { useQuery } from "@tanstack/react-query";
+
+//#region src/lib/runtime-context.tsx
+const TemplateRuntimeContext = createContext(null);
+function useTemplateRuntime() {
+	const context = useContext(TemplateRuntimeContext);
+	if (!context) throw new Error("useTemplateRuntime must be used within a TemplateRuntimeProvider");
+	return context;
+}
+
+//#endregion
+//#region src/LocalDataIndicator.tsx
+function LocalDataIndicator() {
+	const { projectId, templateId, template, installer } = useTemplateRuntime();
+	const [isResetting, setIsResetting] = useState(false);
+	const handleReset = async () => {
+		setIsResetting(true);
+		try {
+			await installer.install(templateId, { projectId });
+		} finally {
+			setIsResetting(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-border bg-muted/40 text-muted-foreground inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs",
+		children: [
+			/* @__PURE__ */ jsx(Shield, { className: "h-3.5 w-3.5 text-violet-400" }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				"Local runtime ·",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "text-foreground font-semibold",
+					children: template.name
+				})
+			] }),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "border-border text-muted-foreground hover:text-foreground inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-semibold",
+				onClick: handleReset,
+				disabled: isResetting,
+				children: [/* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" }), isResetting ? "Resetting…" : "Reset data"]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/SaveToStudioButton.tsx
+function SaveToStudioButton({ organizationId = "demo-org", projectName, endpoint, token }) {
+	const { installer, templateId, template } = useTemplateRuntime();
+	const [status, setStatus] = useState("idle");
+	const [error, setError] = useState(null);
+	const handleSave = async () => {
+		setStatus("saving");
+		setError(null);
+		try {
+			await installer.saveToStudio({
+				templateId,
+				projectName: projectName ?? `${template.name} demo`,
+				organizationId,
+				endpoint,
+				token
+			});
+			setStatus("saved");
+			setTimeout(() => setStatus("idle"), 3e3);
+		} catch (err) {
+			setStatus("error");
+			setError(err instanceof Error ? err.message : "Unknown error");
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-end gap-1",
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "btn-primary inline-flex items-center gap-2 text-sm",
+				onClick: handleSave,
+				disabled: status === "saving",
+				children: [/* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4" }), status === "saving" ? "Publishing…" : "Save to Studio"]
+			}),
+			status === "error" && error ? /* @__PURE__ */ jsx("p", {
+				className: "text-destructive text-xs",
+				children: error
+			}) : null,
+			status === "saved" ? /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-emerald-400",
+				children: "Template sent to Studio."
+			}) : null
+		]
+	});
+}
+
+//#endregion
+//#region src/TemplateShell.tsx
+const TemplateShell = ({ title, description, sidebar, actions, showSaveAction = true, saveProps, children }) => /* @__PURE__ */ jsxs("div", {
+	className: "space-y-6",
+	children: [/* @__PURE__ */ jsxs("header", {
+		className: "border-border bg-card rounded-2xl border p-6 shadow-sm",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center justify-between gap-4",
+			children: [/* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
+					children: "ContractSpec Templates"
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					className: "text-3xl font-bold",
+					children: title
+				}),
+				description ? /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mt-2 max-w-2xl text-sm",
+					children: description
+				}) : null
+			] }), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-end gap-2",
+				children: [/* @__PURE__ */ jsx(LocalDataIndicator, {}), showSaveAction ? /* @__PURE__ */ jsx(SaveToStudioButton, { ...saveProps }) : null]
+			})]
+		}), actions ? /* @__PURE__ */ jsx("div", {
+			className: "mt-4",
+			children: actions
+		}) : null]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: sidebar ? "grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]" : "w-full",
+		children: [/* @__PURE__ */ jsx("main", {
+			className: "space-y-4 p-2",
+			children
+		}), sidebar ? /* @__PURE__ */ jsx("aside", {
+			className: "border-border bg-card rounded-2xl border p-4",
+			children: sidebar
+		}) : null]
+	})]
+});
+
+//#endregion
+//#region src/MarkdownView.tsx
+/**
+* MarkdownView renders template presentations as markdown using TransformEngine.
+* It allows switching between available presentations for the template.
+*/
+function MarkdownView({ templateId: propTemplateId, presentationId, className }) {
+	const { engine, template, templateId: contextTemplateId, resolvePresentation, fetchData } = useTemplateRuntime();
+	const templateId = propTemplateId ?? contextTemplateId;
+	const presentations = template?.presentations ?? [];
+	const [selectedPresentation, setSelectedPresentation] = useState("");
+	const [markdownContent, setMarkdownContent] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		if (presentationId && presentations.includes(presentationId)) setSelectedPresentation(presentationId);
+		else if (presentations.length > 0 && !selectedPresentation) setSelectedPresentation(presentations[0] ?? "");
+	}, [
+		presentationId,
+		presentations,
+		selectedPresentation
+	]);
+	const renderMarkdown = useCallback(async () => {
+		if (!selectedPresentation || !engine) return;
+		setLoading(true);
+		setError(null);
+		try {
+			if (!resolvePresentation) throw new Error("resolvePresentation not available in runtime context");
+			const descriptor = resolvePresentation(selectedPresentation);
+			if (!descriptor) throw new Error(`Presentation descriptor not found: ${selectedPresentation}`);
+			const dataResult = await fetchData(selectedPresentation);
+			setMarkdownContent((await engine.render("markdown", descriptor, { data: dataResult.data })).body);
+		} catch (err) {
+			setError(err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to render markdown"));
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		selectedPresentation,
+		templateId,
+		engine,
+		resolvePresentation,
+		fetchData
+	]);
+	useEffect(() => {
+		renderMarkdown();
+	}, [renderMarkdown]);
+	if (!presentations.length) return /* @__PURE__ */ jsx(Card, {
+		className,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "p-6 text-center",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: "No presentations available for this template."
+			})
+		})
+	});
+	const handleCopy = useCallback(() => {
+		if (markdownContent) navigator.clipboard.writeText(markdownContent);
+	}, [markdownContent]);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-4 flex flex-wrap items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-sm font-medium",
+					children: "Presentation:"
+				}),
+				presentations.map((name) => /* @__PURE__ */ jsx(Button, {
+					variant: selectedPresentation === name ? "default" : "outline",
+					size: "sm",
+					onPress: () => setSelectedPresentation(name),
+					children: formatPresentationName(name)
+				}, name)),
+				/* @__PURE__ */ jsxs("div", {
+					className: "ml-auto flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						children: "LLM-friendly"
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						onPress: handleCopy,
+						disabled: !markdownContent || loading,
+						children: "Copy"
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsxs(Card, {
+			className: "overflow-hidden",
+			children: [
+				loading && /* @__PURE__ */ jsx(LoaderBlock, { label: "Rendering markdown..." }),
+				error && /* @__PURE__ */ jsx(ErrorState, {
+					title: "Render failed",
+					description: error.message,
+					onRetry: renderMarkdown,
+					retryLabel: "Retry"
+				}),
+				!loading && !error && markdownContent && /* @__PURE__ */ jsx("div", {
+					className: "p-6",
+					children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: markdownContent })
+				}),
+				!loading && !error && !markdownContent && /* @__PURE__ */ jsx("div", {
+					className: "p-6 text-center",
+					children: /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "Select a presentation to view its markdown output."
+					})
+				})
+			]
+		})]
+	});
+}
+/**
+* Simple markdown renderer using pre-formatted display
+* For production, consider using react-markdown or similar
+*/
+function MarkdownRenderer({ content }) {
+	const lines = content.split("\n");
+	const rendered = [];
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i] ?? "";
+		if (line.startsWith("|") && lines[i + 1]?.match(/^\|[\s-|]+\|$/)) {
+			const tableLines = [line];
+			i++;
+			while (i < lines.length && (lines[i]?.startsWith("|") ?? false)) {
+				tableLines.push(lines[i] ?? "");
+				i++;
+			}
+			rendered.push(renderTable(tableLines, rendered.length));
+			continue;
+		}
+		if (line.startsWith("# ")) rendered.push(/* @__PURE__ */ jsx("h1", {
+			className: "mb-4 text-2xl font-bold",
+			children: line.slice(2)
+		}, i));
+		else if (line.startsWith("## ")) rendered.push(/* @__PURE__ */ jsx("h2", {
+			className: "mt-6 mb-3 text-xl font-semibold",
+			children: line.slice(3)
+		}, i));
+		else if (line.startsWith("### ")) rendered.push(/* @__PURE__ */ jsx("h3", {
+			className: "mt-4 mb-2 text-lg font-medium",
+			children: line.slice(4)
+		}, i));
+		else if (line.startsWith("> ")) rendered.push(/* @__PURE__ */ jsx("blockquote", {
+			className: "text-muted-foreground my-2 border-l-4 border-violet-500/50 pl-4 italic",
+			children: line.slice(2)
+		}, i));
+		else if (line.startsWith("- ")) rendered.push(/* @__PURE__ */ jsx("li", {
+			className: "ml-4 list-disc",
+			children: formatInlineMarkdown(line.slice(2))
+		}, i));
+		else if (line.startsWith("**") && line.includes(":**")) {
+			const [label, ...rest] = line.split(":**");
+			rendered.push(/* @__PURE__ */ jsxs("p", {
+				className: "my-1",
+				children: [/* @__PURE__ */ jsxs("strong", { children: [label?.slice(2), ":"] }), rest.join(":**")]
+			}, i));
+		} else if (line.startsWith("_") && line.endsWith("_")) rendered.push(/* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground my-1 italic",
+			children: line.slice(1, -1)
+		}, i));
+		else if (!line.trim()) rendered.push(/* @__PURE__ */ jsx("div", { className: "h-2" }, i));
+		else rendered.push(/* @__PURE__ */ jsx("p", {
+			className: "my-1",
+			children: formatInlineMarkdown(line)
+		}, i));
+		i++;
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "prose prose-sm dark:prose-invert max-w-none",
+		children: rendered
+	});
+}
+/**
+* Render a markdown table
+*/
+function renderTable(lines, keyPrefix) {
+	if (lines.length < 2) return null;
+	const parseRow = (row) => row.split("|").slice(1, -1).map((cell) => cell.trim());
+	const headers = parseRow(lines[0] ?? "");
+	const dataRows = lines.slice(2).map(parseRow);
+	return /* @__PURE__ */ jsx("div", {
+		className: "my-4 overflow-x-auto",
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "border-border min-w-full border-collapse border text-sm",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
+				className: "bg-muted/50",
+				children: headers.map((header, idx) => /* @__PURE__ */ jsx("th", {
+					className: "border-border border px-3 py-2 text-left font-semibold",
+					children: header
+				}, idx))
+			}) }), /* @__PURE__ */ jsx("tbody", { children: dataRows.map((row, rowIdx) => /* @__PURE__ */ jsx("tr", {
+				className: "hover:bg-muted/30",
+				children: row.map((cell, cellIdx) => /* @__PURE__ */ jsx("td", {
+					className: "border-border border px-3 py-2",
+					children: formatInlineMarkdown(cell)
+				}, cellIdx))
+			}, rowIdx)) })]
+		})
+	}, `table-${keyPrefix}`);
+}
+/**
+* Format inline markdown (bold, code)
+*/
+function formatInlineMarkdown(text) {
+	return text.split(/(\*\*[^*]+\*\*)/g).map((part, i) => {
+		if (part.startsWith("**") && part.endsWith("**")) return /* @__PURE__ */ jsx("strong", { children: part.slice(2, -2) }, i);
+		if (part.includes("`")) return part.split(/(`[^`]+`)/g).map((cp, j) => {
+			if (cp.startsWith("`") && cp.endsWith("`")) return /* @__PURE__ */ jsx("code", {
+				className: "rounded bg-violet-500/10 px-1.5 py-0.5 font-mono text-sm",
+				children: cp.slice(1, -1)
+			}, `${i}-${j}`);
+			return cp;
+		});
+		return part;
+	});
+}
+/**
+* Format presentation name for display
+*/
+function formatPresentationName(name) {
+	const parts = name.split(".");
+	return (parts[parts.length - 1] ?? name).split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+
+//#endregion
+//#region src/utils/generateSpecFromTemplate.ts
+/**
+* Generate TypeScript spec code from a template's definition.
+* Converts FeatureModuleSpec contracts to TypeScript spec code.
+*/
+function generateSpecFromTemplate(template) {
+	const templateId = template?.id ?? "unknown";
+	if (!template) return generateDefaultSpec(templateId);
+	switch (templateId) {
+		case "crm-pipeline": return generateCrmPipelineSpec(template.schema.contracts);
+		case "saas-boilerplate": return generateSaasBoilerplateSpec(template.schema.contracts);
+		case "agent-console": return generateAgentConsoleSpec(template.schema.contracts);
+		case "todos-app": return generateTodosSpec(template.schema.contracts);
+		case "messaging-app": return generateMessagingSpec(template.schema.contracts);
+		case "recipe-app-i18n": return generateRecipeSpec(template.schema.contracts);
+		default: return generateDefaultSpec(templateId);
+	}
+}
+/**
+* CRM Pipeline spec
+*/
+function generateCrmPipelineSpec(contracts) {
+	return `// CRM Pipeline Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("crm.deal.updateStage.v1", {
+  goal: "Move a deal to a different pipeline stage",
+  transport: { gql: { mutation: "updateDealStage" } },
+  io: {
+    input: { 
+      dealId: "string",
+      stageId: "string",
+      notes: "string?"
+    },
+    output: { 
+      deal: {
+        id: "string",
+        stage: "string",
+        probability: "number",
+        value: "number"
+      }
+    }
+  },
+  events: ["deal.stage.changed"],
+  policy: { auth: "user", rbac: "org:sales" }
+});
+
+contractSpec("crm.deal.create.v1", {
+  goal: "Create a new deal in the pipeline",
+  transport: { gql: { mutation: "createDeal" } },
+  io: {
+    input: { 
+      title: "string",
+      value: "number",
+      contactId: "string",
+      stageId: "string",
+      ownerId: "string?"
+    },
+    output: { 
+      deal: {
+        id: "string",
+        title: "string",
+        value: "number",
+        stage: "string",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["deal.created"]
+});
+
+contractSpec("crm.contact.list.v1", {
+  goal: "List contacts with filtering and pagination",
+  transport: { gql: { query: "listContacts" } },
+  io: {
+    input: { 
+      filter: {
+        search: "string?",
+        companyId: "string?",
+        tags: "string[]?"
+      },
+      pagination: {
+        page: "number",
+        limit: "number"
+      }
+    },
+    output: { 
+      contacts: "array<Contact>",
+      total: "number",
+      hasMore: "boolean"
+    }
+  }
+});`;
+}
+/**
+* SaaS Boilerplate spec
+*/
+function generateSaasBoilerplateSpec(contracts) {
+	return `// SaaS Boilerplate Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("saas.project.create.v1", {
+  goal: "Create a new project in an organization",
+  transport: { gql: { mutation: "createProject" } },
+  io: {
+    input: { 
+      orgId: "string",
+      name: "string",
+      description: "string?"
+    },
+    output: { 
+      project: {
+        id: "string",
+        name: "string",
+        description: "string?",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  policy: { auth: "user", rbac: "org:member" }
+});
+
+contractSpec("saas.billing.recordUsage.v1", {
+  goal: "Record usage for billing purposes",
+  transport: { gql: { mutation: "recordUsage" } },
+  io: {
+    input: { 
+      orgId: "string",
+      metric: "enum<'api_calls'|'storage_gb'|'seats'>",
+      quantity: "number",
+      timestamp: "ISO8601?"
+    },
+    output: { 
+      usage: {
+        id: "string",
+        metric: "string",
+        quantity: "number",
+        recordedAt: "ISO8601"
+      }
+    }
+  },
+  events: ["billing.usage.recorded"]
+});
+
+contractSpec("saas.settings.update.v1", {
+  goal: "Update organization or user settings",
+  transport: { gql: { mutation: "updateSettings" } },
+  io: {
+    input: { 
+      scope: "enum<'org'|'user'>",
+      targetId: "string",
+      settings: "Record<string, unknown>"
+    },
+    output: { 
+      settings: {
+        scope: "string",
+        values: "Record<string, unknown>",
+        updatedAt: "ISO8601"
+      }
+    }
+  },
+  events: ["settings.updated"]
+});`;
+}
+/**
+* Agent Console spec
+*/
+function generateAgentConsoleSpec(contracts) {
+	return `// Agent Console Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("agent.run.execute.v1", {
+  goal: "Execute an agent run with specified tools",
+  transport: { gql: { mutation: "executeAgentRun" } },
+  io: {
+    input: { 
+      agentId: "string",
+      input: "string",
+      tools: "string[]?",
+      maxSteps: "number?"
+    },
+    output: { 
+      runId: "string",
+      status: "enum<'running'|'completed'|'failed'>",
+      steps: "number"
+    }
+  },
+  events: ["run.started", "run.completed", "run.failed"]
+});
+
+contractSpec("agent.tool.create.v1", {
+  goal: "Register a new tool in the tool registry",
+  transport: { gql: { mutation: "createTool" } },
+  io: {
+    input: { 
+      name: "string",
+      description: "string",
+      category: "enum<'code'|'data'|'api'|'file'|'custom'>",
+      schema: "JSONSchema",
+      handler: "string"
+    },
+    output: { 
+      tool: {
+        id: "string",
+        name: "string",
+        category: "string",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["tool.created"]
+});
+
+contractSpec("agent.agent.create.v1", {
+  goal: "Create a new AI agent configuration",
+  transport: { gql: { mutation: "createAgent" } },
+  io: {
+    input: { 
+      name: "string",
+      description: "string",
+      model: "string",
+      systemPrompt: "string?",
+      tools: "string[]?"
+    },
+    output: { 
+      agent: {
+        id: "string",
+        name: "string",
+        model: "string",
+        toolCount: "number",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["agent.created"]
+});`;
+}
+/**
+* Todos App spec
+*/
+function generateTodosSpec(contracts) {
+	return `// To-dos App Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("tasks.board.v1", {
+  goal: "Assign and approve craft work",
+  transport: { gql: { field: "tasksBoard" } },
+  io: {
+    input: { 
+      tenantId: "string", 
+      assignee: "string?",
+      status: "enum<'pending'|'in_progress'|'completed'>?"
+    },
+    output: { 
+      tasks: "array<Task>",
+      summary: {
+        total: "number",
+        completed: "number",
+        overdue: "number"
+      }
+    }
+  }
+});
+
+contractSpec("tasks.create.v1", {
+  goal: "Create a new task",
+  transport: { gql: { mutation: "createTask" } },
+  io: {
+    input: { 
+      title: "string",
+      description: "string?",
+      assignee: "string?",
+      priority: "enum<'low'|'medium'|'high'>",
+      dueDate: "ISO8601?"
+    },
+    output: { 
+      task: {
+        id: "string",
+        title: "string",
+        status: "string",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["task.created"]
+});
+
+contractSpec("tasks.complete.v1", {
+  goal: "Mark a task as completed",
+  transport: { gql: { mutation: "completeTask" } },
+  io: {
+    input: { taskId: "string" },
+    output: { 
+      task: {
+        id: "string",
+        status: "string",
+        completedAt: "ISO8601"
+      }
+    }
+  },
+  events: ["task.completed"]
+});`;
+}
+/**
+* Messaging App spec
+*/
+function generateMessagingSpec(contracts) {
+	return `// Messaging App Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("messaging.send.v1", {
+  goal: "Deliver intent-rich updates",
+  io: {
+    input: { 
+      conversationId: "string", 
+      body: "richtext",
+      attachments: "array<Attachment>?"
+    },
+    output: { 
+      messageId: "string", 
+      deliveredAt: "ISO8601"
+    }
+  },
+  events: ["message.sent", "message.delivered"]
+});
+
+contractSpec("messaging.conversation.create.v1", {
+  goal: "Start a new conversation",
+  transport: { gql: { mutation: "createConversation" } },
+  io: {
+    input: { 
+      participants: "string[]",
+      title: "string?",
+      type: "enum<'direct'|'group'>"
+    },
+    output: { 
+      conversation: {
+        id: "string",
+        title: "string?",
+        participantCount: "number",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["conversation.created"]
+});
+
+contractSpec("messaging.read.v1", {
+  goal: "Mark messages as read",
+  transport: { gql: { mutation: "markRead" } },
+  io: {
+    input: { 
+      conversationId: "string",
+      messageIds: "string[]"
+    },
+    output: { 
+      readCount: "number",
+      readAt: "ISO8601"
+    }
+  },
+  events: ["message.read"]
+});`;
+}
+/**
+* Recipe App spec
+*/
+function generateRecipeSpec(contracts) {
+	return `// Recipe App (i18n) Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("recipes.lookup.v1", {
+  goal: "Serve bilingual rituals",
+  io: {
+    input: { 
+      locale: "enum<'EN'|'FR'>", 
+      slug: "string" 
+    },
+    output: { 
+      title: "string", 
+      content: "markdown",
+      ingredients: "array<Ingredient>",
+      instructions: "array<Instruction>"
+    }
+  }
+});
+
+contractSpec("recipes.list.v1", {
+  goal: "Browse recipes with filtering",
+  transport: { gql: { query: "listRecipes" } },
+  io: {
+    input: { 
+      locale: "enum<'EN'|'FR'>",
+      category: "string?",
+      search: "string?",
+      favorites: "boolean?"
+    },
+    output: { 
+      recipes: "array<RecipeSummary>",
+      categories: "array<Category>",
+      total: "number"
+    }
+  }
+});
+
+contractSpec("recipes.favorite.toggle.v1", {
+  goal: "Toggle recipe favorite status",
+  transport: { gql: { mutation: "toggleFavorite" } },
+  io: {
+    input: { recipeId: "string" },
+    output: { 
+      isFavorite: "boolean",
+      totalFavorites: "number"
+    }
+  },
+  events: ["recipe.favorited", "recipe.unfavorited"]
+});`;
+}
+/**
+* Default spec for unknown templates
+*/
+function generateDefaultSpec(templateId) {
+	return `// ${templateId} Specs
+
+contractSpec("${templateId}.main.v1", {
+  goal: "Main operation for ${templateId}",
+  transport: { gql: { query: "main" } },
+  io: {
+    input: { 
+      id: "string"
+    },
+    output: { 
+      result: "unknown"
+    }
+  }
+});`;
+}
+
+//#endregion
+//#region src/hooks/useSpecContent.ts
+/**
+* Storage key prefix for spec content persistence
+*/
+const SPEC_STORAGE_KEY = "contractspec-spec-content";
+/**
+* Hook for managing spec content with persistence for a template.
+* Uses localStorage for persistence in the sandbox environment.
+*/
+function useSpecContent(templateId) {
+	const { template } = useTemplateRuntime();
+	const [content, setContentState] = useState("");
+	const [savedContent, setSavedContent] = useState("");
+	const [loading, setLoading] = useState(true);
+	const [validation, setValidation] = useState(null);
+	const [lastSaved, setLastSaved] = useState(null);
+	useEffect(() => {
+		setLoading(true);
+		try {
+			const stored = localStorage.getItem(`${SPEC_STORAGE_KEY}-${templateId}`);
+			if (stored) {
+				const parsed = JSON.parse(stored);
+				if (parsed.content) {
+					setContentState(parsed.content);
+					setSavedContent(parsed.content);
+					setLastSaved(parsed.savedAt);
+				} else {
+					const generated = generateSpecFromTemplate(template);
+					setContentState(generated);
+					setSavedContent(generated);
+				}
+			} else {
+				const generated = generateSpecFromTemplate(template);
+				setContentState(generated);
+				setSavedContent(generated);
+			}
+		} catch {
+			const generated = generateSpecFromTemplate(template);
+			setContentState(generated);
+			setSavedContent(generated);
+		}
+		setLoading(false);
+	}, [templateId]);
+	/**
+	* Update spec content (in-memory only until save)
+	*/
+	const setContent = useCallback((newContent) => {
+		setContentState(newContent);
+		setValidation(null);
+	}, []);
+	/**
+	* Save spec content to storage
+	*/
+	const save = useCallback(() => {
+		try {
+			const savedAt = (/* @__PURE__ */ new Date()).toISOString();
+			localStorage.setItem(`${SPEC_STORAGE_KEY}-${templateId}`, JSON.stringify({
+				content,
+				savedAt
+			}));
+			setSavedContent(content);
+			setLastSaved(savedAt);
+		} catch {}
+	}, [content, templateId]);
+	/**
+	* Validate spec content
+	* Performs basic syntax validation
+	*/
+	const validate = useCallback(() => {
+		const errors = [];
+		const lines = content.split("\n");
+		if (!content.includes("contractSpec(")) errors.push({
+			line: 1,
+			message: "Spec must contain a contractSpec() definition",
+			severity: "error"
+		});
+		if (!content.includes("goal:")) errors.push({
+			line: 1,
+			message: "Spec should have a goal field",
+			severity: "warning"
+		});
+		if (!content.includes("io:")) errors.push({
+			line: 1,
+			message: "Spec should define io (input/output)",
+			severity: "warning"
+		});
+		const openBraces = (content.match(/{/g) ?? []).length;
+		const closeBraces = (content.match(/}/g) ?? []).length;
+		if (openBraces !== closeBraces) errors.push({
+			line: lines.length,
+			message: `Unbalanced braces: ${openBraces} opening, ${closeBraces} closing`,
+			severity: "error"
+		});
+		const openParens = (content.match(/\(/g) ?? []).length;
+		const closeParens = (content.match(/\)/g) ?? []).length;
+		if (openParens !== closeParens) errors.push({
+			line: lines.length,
+			message: `Unbalanced parentheses: ${openParens} opening, ${closeParens} closing`,
+			severity: "error"
+		});
+		lines.forEach((line, index) => {
+			const singleQuotes = (line.match(/'/g) ?? []).length;
+			const doubleQuotes = (line.match(/"/g) ?? []).length;
+			if (singleQuotes % 2 !== 0) errors.push({
+				line: index + 1,
+				message: "Unclosed single quote",
+				severity: "error"
+			});
+			if (doubleQuotes % 2 !== 0) errors.push({
+				line: index + 1,
+				message: "Unclosed double quote",
+				severity: "error"
+			});
+		});
+		const result = {
+			valid: errors.filter((e) => e.severity === "error").length === 0,
+			errors
+		};
+		setValidation(result);
+		return result;
+	}, [content]);
+	/**
+	* Reset to template default
+	*/
+	const reset = useCallback(() => {
+		const generated = generateSpecFromTemplate(template);
+		setContentState(generated);
+		setSavedContent(generated);
+		setValidation(null);
+		setLastSaved(null);
+		try {
+			localStorage.removeItem(`${SPEC_STORAGE_KEY}-${templateId}`);
+		} catch {}
+	}, [templateId]);
+	return {
+		content,
+		loading,
+		isDirty: content !== savedContent,
+		validation,
+		setContent,
+		save,
+		validate,
+		reset,
+		lastSaved
+	};
+}
+
+//#endregion
+//#region src/SpecEditorPanel.tsx
+/**
+* Spec editor panel that wraps SpecEditor with persisted spec content.
+* Uses useSpecContent hook to manage spec persistence and validation.
+*/
+function SpecEditorPanel({ templateId, SpecEditor, onLog }) {
+	const { content, loading, isDirty, validation, setContent, save, validate, reset, lastSaved } = useSpecContent(templateId);
+	useEffect(() => {
+		if (!loading && content) onLog?.(`Spec loaded for ${templateId}`);
+	}, [
+		loading,
+		content,
+		templateId,
+		onLog
+	]);
+	const handleSave = useCallback(() => {
+		save();
+		onLog?.("Spec saved locally");
+	}, [save, onLog]);
+	const handleValidate = useCallback(() => {
+		const result = validate();
+		if (result.valid) onLog?.("Spec validation passed");
+		else {
+			const errorCount = result.errors.filter((e) => e.severity === "error").length;
+			const warnCount = result.errors.filter((e) => e.severity === "warning").length;
+			onLog?.(`Spec validation: ${errorCount} errors, ${warnCount} warnings`);
+		}
+	}, [validate, onLog]);
+	const handleReset = useCallback(() => {
+		reset();
+		onLog?.("Spec reset to template defaults");
+	}, [reset, onLog]);
+	if (loading) return /* @__PURE__ */ jsx(LoaderBlock, { label: "Loading spec..." });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "default",
+							size: "sm",
+							onClick: handleSave,
+							children: "Save"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: handleValidate,
+							children: "Validate"
+						}),
+						isDirty && /* @__PURE__ */ jsx(Badge, {
+							variant: "secondary",
+							className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
+							children: "Unsaved changes"
+						}),
+						validation && /* @__PURE__ */ jsx(Badge, {
+							variant: validation.valid ? "default" : "destructive",
+							className: validation.valid ? "border-green-500/30 bg-green-500/20 text-green-400" : "",
+							children: validation.valid ? "Valid" : `${validation.errors.filter((e) => e.severity === "error").length} errors`
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [lastSaved && /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground text-xs",
+						children: ["Last saved: ", new Date(lastSaved).toLocaleTimeString()]
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						onPress: handleReset,
+						children: "Reset"
+					})]
+				})]
+			}),
+			validation && validation.errors.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "rounded-lg border border-amber-500/50 bg-amber-500/10 p-3",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "mb-2 text-xs font-semibold text-amber-400 uppercase",
+					children: "Validation Issues"
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "space-y-1",
+					children: validation.errors.map((error, index) => /* @__PURE__ */ jsxs("li", {
+						className: `text-xs ${error.severity === "error" ? "text-red-400" : "text-amber-400"}`,
+						children: [
+							"Line ",
+							error.line,
+							": ",
+							error.message
+						]
+					}, `${error.line}-${error.message}-${index}`))
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "border-border bg-card rounded-2xl border p-4",
+				children: /* @__PURE__ */ jsx(SpecEditor, {
+					projectId: "sandbox",
+					type: "CAPABILITY",
+					content,
+					onChange: setContent,
+					metadata: { template: templateId },
+					onSave: handleSave,
+					onValidate: handleValidate
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/hooks/useEvolution.ts
+/**
+* Storage key for evolution data persistence
+*/
+const EVOLUTION_STORAGE_KEY = "contractspec-evolution-data";
+/**
+* Hook for AI-powered spec evolution analysis and suggestions.
+* Tracks sandbox operations, detects anomalies, and generates improvement suggestions.
+*/
+function useEvolution(templateId) {
+	const [usageStats, setUsageStats] = useState([]);
+	const [anomalies, setAnomalies] = useState([]);
+	const [suggestions, setSuggestions] = useState([]);
+	const [hints, setHints] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const metricsRef = useRef([]);
+	const [operationCount, setOperationCount] = useState(0);
+	useEffect(() => {
+		try {
+			const stored = localStorage.getItem(`${EVOLUTION_STORAGE_KEY}-${templateId}`);
+			if (stored) setSuggestions(JSON.parse(stored).suggestions.map((s) => ({
+				...s,
+				createdAt: new Date(s.createdAt)
+			})));
+		} catch {}
+	}, [templateId]);
+	useEffect(() => {
+		try {
+			localStorage.setItem(`${EVOLUTION_STORAGE_KEY}-${templateId}`, JSON.stringify({ suggestions }));
+		} catch {}
+	}, [suggestions, templateId]);
+	/**
+	* Track a new operation metric
+	*/
+	const trackOperation = useCallback((operationName, durationMs, success, errorCode) => {
+		const sample = {
+			operation: {
+				name: operationName,
+				version: "1.0.0",
+				tenantId: "sandbox"
+			},
+			durationMs,
+			success,
+			timestamp: /* @__PURE__ */ new Date(),
+			errorCode
+		};
+		metricsRef.current.push(sample);
+		setOperationCount((prev) => prev + 1);
+	}, []);
+	/**
+	* Analyze tracked operations to generate usage stats and anomalies
+	*/
+	const analyzeUsage = useCallback(() => {
+		const samples = metricsRef.current;
+		if (samples.length < 5) return;
+		const groups = /* @__PURE__ */ new Map();
+		for (const sample of samples) {
+			const key = `${sample.operation.name}.v${sample.operation.version}`;
+			const arr = groups.get(key) ?? [];
+			arr.push(sample);
+			groups.set(key, arr);
+		}
+		const stats = [];
+		const detectedAnomalies = [];
+		groups.forEach((opSamples) => {
+			if (opSamples.length < 3) return;
+			const durations = opSamples.map((s) => s.durationMs).sort((a, b) => a - b);
+			const errors = opSamples.filter((s) => !s.success);
+			const totalCalls = opSamples.length;
+			const errorRate = errors.length / totalCalls;
+			const averageLatencyMs = durations.reduce((sum, value) => sum + value, 0) / totalCalls;
+			const timestamps = opSamples.map((s) => s.timestamp.getTime());
+			const firstSample = opSamples[0];
+			if (!firstSample) return;
+			const stat = {
+				operation: firstSample.operation,
+				totalCalls,
+				successRate: 1 - errorRate,
+				errorRate,
+				averageLatencyMs,
+				p95LatencyMs: percentile(durations, .95),
+				p99LatencyMs: percentile(durations, .99),
+				maxLatencyMs: Math.max(...durations),
+				lastSeenAt: new Date(Math.max(...timestamps)),
+				windowStart: new Date(Math.min(...timestamps)),
+				windowEnd: new Date(Math.max(...timestamps)),
+				topErrors: errors.reduce((acc, s) => {
+					if (s.errorCode) acc[s.errorCode] = (acc[s.errorCode] ?? 0) + 1;
+					return acc;
+				}, {})
+			};
+			stats.push(stat);
+			if (errorRate > .1) detectedAnomalies.push({
+				operation: stat.operation,
+				severity: errorRate > .3 ? "high" : errorRate > .2 ? "medium" : "low",
+				metric: "error-rate",
+				description: `Error rate ${(errorRate * 100).toFixed(1)}% exceeds threshold`,
+				detectedAt: /* @__PURE__ */ new Date(),
+				threshold: .1,
+				observedValue: errorRate
+			});
+			if (stat.p99LatencyMs > 500) detectedAnomalies.push({
+				operation: stat.operation,
+				severity: stat.p99LatencyMs > 1e3 ? "high" : stat.p99LatencyMs > 750 ? "medium" : "low",
+				metric: "latency",
+				description: `P99 latency ${stat.p99LatencyMs.toFixed(0)}ms exceeds threshold`,
+				detectedAt: /* @__PURE__ */ new Date(),
+				threshold: 500,
+				observedValue: stat.p99LatencyMs
+			});
+		});
+		setUsageStats(stats);
+		setAnomalies(detectedAnomalies);
+		setHints(detectedAnomalies.map((anomaly) => ({
+			operation: anomaly.operation,
+			category: anomaly.metric === "latency" ? "performance" : "error-handling",
+			summary: anomaly.metric === "latency" ? "Latency regression detected" : "Error spike detected",
+			justification: anomaly.description,
+			recommendedActions: anomaly.metric === "latency" ? [
+				"Add caching layer",
+				"Optimize database queries",
+				"Consider pagination"
+			] : [
+				"Add retry logic",
+				"Improve error handling",
+				"Add circuit breaker"
+			]
+		})));
+	}, []);
+	/**
+	* Generate AI suggestions from anomalies (mock for sandbox)
+	*/
+	const generateSuggestions = useCallback(async () => {
+		if (anomalies.length === 0) return;
+		setLoading(true);
+		await new Promise((resolve) => setTimeout(resolve, 800));
+		const newSuggestions = anomalies.map((anomaly) => ({
+			id: `suggestion-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+			intent: {
+				id: `intent-${anomaly.operation.name}`,
+				type: anomaly.metric === "latency" ? "latency-regression" : anomaly.metric === "error-rate" ? "error-spike" : "throughput-drop",
+				description: anomaly.description,
+				operation: anomaly.operation,
+				confidence: {
+					score: anomaly.severity === "high" ? .9 : anomaly.severity === "medium" ? .7 : .5,
+					sampleSize: usageStats.find((s) => s.operation.name === anomaly.operation.name)?.totalCalls ?? 0
+				}
+			},
+			target: anomaly.operation,
+			proposal: {
+				summary: generateSuggestionSummary(anomaly),
+				rationale: generateSuggestionRationale(anomaly),
+				changeType: anomaly.metric === "error-rate" ? "policy-update" : "revision",
+				recommendedActions: generateRecommendedActions(anomaly)
+			},
+			confidence: anomaly.severity === "high" ? .85 : anomaly.severity === "medium" ? .7 : .55,
+			createdAt: /* @__PURE__ */ new Date(),
+			createdBy: "ai-evolution-agent",
+			status: "pending",
+			priority: anomaly.severity
+		}));
+		setSuggestions((prev) => [...prev, ...newSuggestions]);
+		setLoading(false);
+	}, [anomalies, usageStats]);
+	/**
+	* Approve a suggestion
+	*/
+	const approveSuggestion = useCallback((id, _notes) => {
+		setSuggestions((prev) => prev.map((s) => s.id === id ? {
+			...s,
+			status: "approved"
+		} : s));
+	}, []);
+	/**
+	* Reject a suggestion
+	*/
+	const rejectSuggestion = useCallback((id, _notes) => {
+		setSuggestions((prev) => prev.map((s) => s.id === id ? {
+			...s,
+			status: "rejected"
+		} : s));
+	}, []);
+	/**
+	* Clear all evolution data
+	*/
+	const clear = useCallback(() => {
+		metricsRef.current = [];
+		setOperationCount(0);
+		setUsageStats([]);
+		setAnomalies([]);
+		setSuggestions([]);
+		setHints([]);
+		localStorage.removeItem(`${EVOLUTION_STORAGE_KEY}-${templateId}`);
+	}, [templateId]);
+	return useMemo(() => ({
+		usageStats,
+		anomalies,
+		suggestions,
+		hints,
+		loading,
+		trackOperation,
+		analyzeUsage,
+		generateSuggestions,
+		approveSuggestion,
+		rejectSuggestion,
+		clear,
+		operationCount
+	}), [
+		usageStats,
+		anomalies,
+		suggestions,
+		hints,
+		loading,
+		trackOperation,
+		analyzeUsage,
+		generateSuggestions,
+		approveSuggestion,
+		rejectSuggestion,
+		clear,
+		operationCount
+	]);
+}
+/**
+* Utility functions for generating mock AI content
+*/
+function percentile(values, p) {
+	if (!values.length) return 0;
+	if (values.length === 1) return values[0] ?? 0;
+	return values[Math.min(values.length - 1, Math.floor(p * values.length))] ?? 0;
+}
+function generateSuggestionSummary(anomaly) {
+	if (anomaly.metric === "latency") return `Add caching and pagination to ${anomaly.operation.name} to reduce latency`;
+	if (anomaly.metric === "error-rate") return `Add retry policy and circuit breaker to ${anomaly.operation.name}`;
+	return `Optimize ${anomaly.operation.name} for improved throughput`;
+}
+function generateSuggestionRationale(anomaly) {
+	if (anomaly.metric === "latency") return `The operation ${anomaly.operation.name} is experiencing P99 latency of ${anomaly.observedValue?.toFixed(0)}ms, which is above the recommended threshold of ${anomaly.threshold}ms. This can impact user experience and downstream operations.`;
+	if (anomaly.metric === "error-rate") return `The error rate for ${anomaly.operation.name} is ${((anomaly.observedValue ?? 0) * 100).toFixed(1)}%, indicating potential issues with input validation, external dependencies, or resource limits.`;
+	return `Throughput for ${anomaly.operation.name} has dropped significantly, suggesting potential bottlenecks or reduced demand that should be investigated.`;
+}
+function generateRecommendedActions(anomaly) {
+	if (anomaly.metric === "latency") return [
+		"Add response caching for frequently accessed data",
+		"Implement pagination for large result sets",
+		"Optimize database queries with proper indexing",
+		"Consider adding a GraphQL DataLoader for batching"
+	];
+	if (anomaly.metric === "error-rate") return [
+		"Add input validation at the contract level",
+		"Implement retry policy with exponential backoff",
+		"Add circuit breaker for external dependencies",
+		"Enhance error logging for better debugging"
+	];
+	return [
+		"Review resource allocation and scaling policies",
+		"Check for upstream routing or load balancer issues",
+		"Validate feature flag configurations",
+		"Monitor dependency health metrics"
+	];
+}
+
+//#endregion
+//#region src/EvolutionDashboard.tsx
+/**
+* Dashboard for AI-powered spec evolution.
+* Shows usage statistics, anomalies, AI suggestions, and optimization hints.
+*/
+function EvolutionDashboard({ templateId, onLog }) {
+	const { usageStats, anomalies, suggestions, hints, loading, trackOperation, analyzeUsage, generateSuggestions, approveSuggestion, rejectSuggestion, clear, operationCount } = useEvolution(templateId);
+	const handleSimulateOperations = useCallback(() => {
+		const operations = [
+			{
+				name: `${templateId}.list`,
+				duration: 150,
+				success: true
+			},
+			{
+				name: `${templateId}.list`,
+				duration: 180,
+				success: true
+			},
+			{
+				name: `${templateId}.create`,
+				duration: 350,
+				success: true
+			},
+			{
+				name: `${templateId}.create`,
+				duration: 420,
+				success: false,
+				error: "VALIDATION_ERROR"
+			},
+			{
+				name: `${templateId}.list`,
+				duration: 200,
+				success: true
+			},
+			{
+				name: `${templateId}.get`,
+				duration: 80,
+				success: true
+			},
+			{
+				name: `${templateId}.update`,
+				duration: 280,
+				success: true
+			},
+			{
+				name: `${templateId}.list`,
+				duration: 950,
+				success: true
+			},
+			{
+				name: `${templateId}.delete`,
+				duration: 150,
+				success: false,
+				error: "NOT_FOUND"
+			},
+			{
+				name: `${templateId}.create`,
+				duration: 380,
+				success: true
+			}
+		];
+		for (const op of operations) trackOperation(op.name, op.duration, op.success, op.error);
+		onLog?.(`Simulated ${operations.length} operations`);
+		setTimeout(() => {
+			analyzeUsage();
+			onLog?.("Analysis complete");
+		}, 100);
+	}, [
+		templateId,
+		trackOperation,
+		analyzeUsage,
+		onLog
+	]);
+	const handleGenerateSuggestions = useCallback(async () => {
+		await generateSuggestions();
+		onLog?.("AI suggestions generated");
+	}, [generateSuggestions, onLog]);
+	const handleApproveSuggestion = useCallback((id) => {
+		approveSuggestion(id);
+		onLog?.(`Suggestion ${id.slice(0, 8)} approved`);
+	}, [approveSuggestion, onLog]);
+	const handleRejectSuggestion = useCallback((id) => {
+		rejectSuggestion(id);
+		onLog?.(`Suggestion ${id.slice(0, 8)} rejected`);
+	}, [rejectSuggestion, onLog]);
+	const handleClear = useCallback(() => {
+		clear();
+		onLog?.("Evolution data cleared");
+	}, [clear, onLog]);
+	const pendingSuggestions = useMemo(() => suggestions.filter((s) => s.status === "pending"), [suggestions]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-semibold",
+					children: "AI Evolution Engine"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: "Analyze usage patterns and get AI-powered suggestions"
+				})] }), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsxs(Badge, {
+						variant: "secondary",
+						children: [operationCount, " ops tracked"]
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						onPress: handleClear,
+						children: "Clear"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Card, {
+				className: "p-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-3",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "default",
+							size: "sm",
+							onPress: handleSimulateOperations,
+							children: "Simulate Operations"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onPress: analyzeUsage,
+							disabled: operationCount < 5,
+							children: "Analyze Usage"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onPress: handleGenerateSuggestions,
+							disabled: anomalies.length === 0 || loading,
+							children: loading ? "Generating..." : "Generate AI Suggestions"
+						})
+					]
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mt-2 text-xs",
+					children: "Simulate sandbox operations, analyze patterns, and generate AI improvement suggestions."
+				})]
+			}),
+			loading && /* @__PURE__ */ jsx(LoaderBlock, { label: "Generating AI suggestions..." }),
+			usageStats.length > 0 && /* @__PURE__ */ jsxs(Card, {
+				className: "p-4",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "mb-3 font-semibold",
+					children: "Usage Statistics"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "grid gap-3 md:grid-cols-2 lg:grid-cols-3",
+					children: usageStats.map((stat) => /* @__PURE__ */ jsx(UsageStatCard, { stat }, stat.operation.name))
+				})]
+			}),
+			anomalies.length > 0 && /* @__PURE__ */ jsxs(Card, {
+				className: "p-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "mb-3 flex items-center justify-between",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "font-semibold",
+						children: "Detected Anomalies"
+					}), /* @__PURE__ */ jsxs(Badge, {
+						variant: "secondary",
+						className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
+						children: [anomalies.length, " issues"]
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "space-y-2",
+					children: anomalies.map((anomaly, index) => /* @__PURE__ */ jsx(AnomalyCard, { anomaly }, `${anomaly.operation.name}-${index}`))
+				})]
+			}),
+			suggestions.length > 0 && /* @__PURE__ */ jsxs(Card, {
+				className: "p-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "mb-3 flex items-center justify-between",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "font-semibold",
+						children: "AI Suggestions"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex items-center gap-2",
+						children: pendingSuggestions.length > 0 && /* @__PURE__ */ jsxs(Badge, {
+							variant: "secondary",
+							className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
+							children: [pendingSuggestions.length, " pending"]
+						})
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "space-y-3",
+					children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(SuggestionCard, {
+						suggestion,
+						onApprove: handleApproveSuggestion,
+						onReject: handleRejectSuggestion
+					}, suggestion.id))
+				})]
+			}),
+			hints.length > 0 && /* @__PURE__ */ jsxs(Card, {
+				className: "p-4",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "mb-3 font-semibold",
+					children: "Optimization Hints"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "space-y-2",
+					children: hints.map((hint, index) => /* @__PURE__ */ jsx(HintCard, { hint }, `${hint.operation.name}-${index}`))
+				})]
+			}),
+			usageStats.length === 0 && anomalies.length === 0 && suggestions.length === 0 && /* @__PURE__ */ jsx(Card, {
+				className: "p-8 text-center",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground",
+					children: "Click \"Simulate Operations\" to generate sample data for analysis."
+				})
+			})
+		]
+	});
+}
+/**
+* Usage statistics card component
+*/
+function UsageStatCard({ stat }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-lg border border-violet-500/20 bg-violet-500/5 p-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-2 flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-mono text-sm font-medium",
+				children: stat.operation.name
+			}), /* @__PURE__ */ jsxs(Badge, {
+				variant: stat.errorRate > .1 ? "destructive" : "default",
+				className: stat.errorRate > .1 ? "" : "border-green-500/30 bg-green-500/20 text-green-400",
+				children: [((1 - stat.errorRate) * 100).toFixed(0), "% success"]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-2 gap-2 text-xs",
+			children: [
+				/* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "Total Calls:"
+					}),
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: stat.totalCalls
+					})
+				] }),
+				/* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "Avg Latency:"
+					}),
+					" ",
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-medium",
+						children: [stat.averageLatencyMs.toFixed(0), "ms"]
+					})
+				] }),
+				/* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "P95:"
+					}),
+					" ",
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-medium",
+						children: [stat.p95LatencyMs.toFixed(0), "ms"]
+					})
+				] }),
+				/* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "P99:"
+					}),
+					" ",
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-medium",
+						children: [stat.p99LatencyMs.toFixed(0), "ms"]
+					})
+				] })
+			]
+		})]
+	});
+}
+/**
+* Anomaly card component
+*/
+function AnomalyCard({ anomaly }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between rounded-lg border border-amber-500/30 bg-amber-500/5 p-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: `text-lg ${{
+					low: "text-amber-400",
+					medium: "text-orange-400",
+					high: "text-red-400"
+				}[anomaly.severity]}`,
+				title: `${anomaly.severity} severity`,
+				children: anomaly.severity === "high" ? "🔴" : anomaly.severity === "medium" ? "🟠" : "🟡"
+			}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium",
+				children: anomaly.description
+			}), /* @__PURE__ */ jsxs("p", {
+				className: "text-muted-foreground text-xs",
+				children: [
+					anomaly.operation.name,
+					" • ",
+					anomaly.metric
+				]
+			})] })]
+		}), /* @__PURE__ */ jsx(Badge, {
+			variant: anomaly.severity === "high" ? "destructive" : "secondary",
+			className: anomaly.severity === "medium" ? "border-amber-500/30 bg-amber-500/20 text-amber-400" : "",
+			children: anomaly.severity
+		})]
+	});
+}
+/**
+* Suggestion card component
+*/
+function SuggestionCard({ suggestion, onApprove, onReject }) {
+	const getStatusStyles = (status) => {
+		switch (status) {
+			case "pending": return {
+				variant: "secondary",
+				className: "bg-amber-500/20 text-amber-400 border-amber-500/30"
+			};
+			case "approved": return {
+				variant: "default",
+				className: "bg-green-500/20 text-green-400 border-green-500/30"
+			};
+			case "rejected": return {
+				variant: "destructive",
+				className: ""
+			};
+			default: return {
+				variant: "secondary",
+				className: ""
+			};
+		}
+	};
+	const statusStyle = getStatusStyles(suggestion.status);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-lg border border-violet-500/30 bg-violet-500/5 p-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-2 flex items-start justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex-1",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-lg",
+							children: suggestion.intent.type === "latency-regression" ? "⚡" : suggestion.intent.type === "error-spike" ? "🔥" : "📉"
+						}), /* @__PURE__ */ jsx("h4", {
+							className: "font-medium",
+							children: suggestion.proposal.summary
+						})]
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground mt-1 text-sm",
+						children: suggestion.proposal.rationale
+					})]
+				}), /* @__PURE__ */ jsx(Badge, {
+					variant: statusStyle.variant,
+					className: statusStyle.className,
+					children: suggestion.status
+				})]
+			}),
+			suggestion.proposal.recommendedActions && suggestion.proposal.recommendedActions.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "mt-3",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "mb-1 text-xs font-semibold text-violet-400 uppercase",
+					children: "Recommended Actions"
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "list-inside list-disc space-y-1 text-xs",
+					children: suggestion.proposal.recommendedActions.slice(0, 3).map((action, i) => /* @__PURE__ */ jsx("li", { children: action }, i))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex items-center justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-xs",
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground",
+							children: [
+								"Confidence: ",
+								(suggestion.confidence * 100).toFixed(0),
+								"%"
+							]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: "•"
+						}),
+						/* @__PURE__ */ jsx(Badge, {
+							variant: "secondary",
+							children: suggestion.priority
+						})
+					]
+				}), suggestion.status === "pending" && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						onPress: () => onReject(suggestion.id),
+						children: "Reject"
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "default",
+						size: "sm",
+						onPress: () => onApprove(suggestion.id),
+						children: "Approve"
+					})]
+				})]
+			})
+		]
+	});
+}
+/**
+* Optimization hint card component
+*/
+function HintCard({ hint }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border border-blue-500/20 bg-blue-500/5 p-3",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-lg",
+				children: {
+					schema: "📐",
+					policy: "🔒",
+					performance: "⚡",
+					"error-handling": "🛡️"
+				}[hint.category]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "font-medium",
+						children: hint.summary
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground mt-1 text-xs",
+						children: hint.justification
+					}),
+					hint.recommendedActions.length > 0 && /* @__PURE__ */ jsx("ul", {
+						className: "mt-2 list-inside list-disc text-xs",
+						children: hint.recommendedActions.slice(0, 2).map((action, i) => /* @__PURE__ */ jsx("li", { children: action }, i))
+					})
+				]
+			})]
+		})
+	});
+}
+
+//#endregion
+//#region src/EvolutionSidebar.tsx
+/**
+* Compact sidebar for Evolution Engine.
+* Shows top anomalies, pending suggestions, and quick actions.
+* Collapsible by default.
+*/
+function EvolutionSidebar({ templateId, expanded = false, onToggle, onLog, onOpenEvolution }) {
+	const { anomalies, suggestions, loading, approveSuggestion, rejectSuggestion, operationCount } = useEvolution(templateId);
+	const pendingSuggestions = useMemo(() => suggestions.filter((s) => s.status === "pending"), [suggestions]);
+	const topAnomalies = useMemo(() => anomalies.sort((a, b) => {
+		const severityOrder = {
+			high: 0,
+			medium: 1,
+			low: 2
+		};
+		return severityOrder[a.severity] - severityOrder[b.severity];
+	}).slice(0, 3), [anomalies]);
+	const handleApprove = useCallback((id) => {
+		approveSuggestion(id);
+		onLog?.(`Approved suggestion ${id.slice(0, 8)}`);
+	}, [approveSuggestion, onLog]);
+	const handleReject = useCallback((id) => {
+		rejectSuggestion(id);
+		onLog?.(`Rejected suggestion ${id.slice(0, 8)}`);
+	}, [rejectSuggestion, onLog]);
+	if (!expanded) return /* @__PURE__ */ jsxs("button", {
+		onClick: onToggle,
+		className: "flex items-center gap-2 rounded-lg border border-violet-500/30 bg-violet-500/10 px-3 py-2 text-sm transition hover:bg-violet-500/20",
+		type: "button",
+		children: [
+			/* @__PURE__ */ jsx("span", { children: "🤖" }),
+			/* @__PURE__ */ jsx("span", { children: "Evolution" }),
+			pendingSuggestions.length > 0 && /* @__PURE__ */ jsx(Badge, {
+				variant: "secondary",
+				className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
+				children: pendingSuggestions.length
+			}),
+			anomalies.length > 0 && pendingSuggestions.length === 0 && /* @__PURE__ */ jsx(Badge, {
+				variant: "destructive",
+				children: anomalies.length
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "w-80 overflow-hidden",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between border-b border-violet-500/20 bg-violet-500/5 px-3 py-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", { children: "🤖" }), /* @__PURE__ */ jsx("span", {
+						className: "text-sm font-semibold",
+						children: "Evolution"
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [onOpenEvolution && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						onPress: onOpenEvolution,
+						children: "Expand"
+					}), /* @__PURE__ */ jsx("button", {
+						onClick: onToggle,
+						className: "text-muted-foreground hover:text-foreground p-1",
+						type: "button",
+						title: "Collapse",
+						children: "✕"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "max-h-96 overflow-y-auto p-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "mb-3 flex items-center justify-between text-xs",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground",
+							children: [operationCount, " ops tracked"]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [anomalies.length > 0 && /* @__PURE__ */ jsxs(Badge, {
+								variant: "destructive",
+								children: [anomalies.length, " anomalies"]
+							}), pendingSuggestions.length > 0 && /* @__PURE__ */ jsxs(Badge, {
+								variant: "secondary",
+								className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
+								children: [pendingSuggestions.length, " pending"]
+							})]
+						})]
+					}),
+					loading && /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground py-4 text-center text-sm",
+						children: "Generating suggestions..."
+					}),
+					topAnomalies.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "mb-4",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "mb-2 text-xs font-semibold text-violet-400 uppercase",
+							children: "Top Issues"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "space-y-2",
+							children: topAnomalies.map((anomaly, index) => /* @__PURE__ */ jsxs("div", {
+								className: "rounded border border-amber-500/20 bg-amber-500/5 p-2 text-xs",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("span", { children: anomaly.severity === "high" ? "🔴" : anomaly.severity === "medium" ? "🟠" : "🟡" }), /* @__PURE__ */ jsx("span", {
+										className: "truncate font-medium",
+										children: anomaly.operation.name
+									})]
+								}), /* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground mt-1 truncate",
+									children: anomaly.description
+								})]
+							}, `${anomaly.operation.name}-${index}`))
+						})]
+					}),
+					pendingSuggestions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+						className: "mb-2 text-xs font-semibold text-violet-400 uppercase",
+						children: "Pending Suggestions"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						children: [pendingSuggestions.slice(0, 3).map((suggestion) => /* @__PURE__ */ jsx(CompactSuggestionCard, {
+							suggestion,
+							onApprove: handleApprove,
+							onReject: handleReject
+						}, suggestion.id)), pendingSuggestions.length > 3 && /* @__PURE__ */ jsxs("p", {
+							className: "text-muted-foreground text-center text-xs",
+							children: [
+								"+",
+								pendingSuggestions.length - 3,
+								" more suggestions"
+							]
+						})]
+					})] }),
+					anomalies.length === 0 && pendingSuggestions.length === 0 && !loading && /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground py-4 text-center text-xs",
+						children: "No issues detected. Keep coding!"
+					})
+				]
+			}),
+			onOpenEvolution && /* @__PURE__ */ jsx("div", {
+				className: "border-t border-violet-500/20 p-2",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					className: "w-full",
+					onPress: onOpenEvolution,
+					children: "Open Evolution Dashboard →"
+				})
+			})
+		]
+	});
+}
+/**
+* Compact suggestion card for sidebar
+*/
+function CompactSuggestionCard({ suggestion, onApprove, onReject }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded border border-violet-500/20 bg-violet-500/5 p-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex items-start justify-between gap-2",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "truncate text-xs font-medium",
+					children: suggestion.proposal.summary
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "mt-1 flex items-center gap-2 text-xs",
+					children: [/* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						children: suggestion.priority
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground",
+						children: [(suggestion.confidence * 100).toFixed(0), "%"]
+					})]
+				})]
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-2 flex justify-end gap-1",
+			children: [/* @__PURE__ */ jsx("button", {
+				onClick: () => onReject(suggestion.id),
+				className: "rounded px-2 py-0.5 text-xs text-red-400 hover:bg-red-400/10",
+				type: "button",
+				children: "Reject"
+			}), /* @__PURE__ */ jsx("button", {
+				onClick: () => onApprove(suggestion.id),
+				className: "rounded bg-violet-500/20 px-2 py-0.5 text-xs text-violet-400 hover:bg-violet-500/30",
+				type: "button",
+				children: "Approve"
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/OverlayContextProvider.tsx
+const OverlayContext = React.createContext(null);
+/**
+* Provider for overlay engine context.
+* Loads template-specific overlays and provides helper functions.
+*/
+function OverlayContextProvider({ templateId, role = "user", device = "desktop", children }) {
+	const overlays = useMemo(() => getTemplateOverlays(templateId, role), [templateId, role]);
+	const activeOverlays = useMemo(() => {
+		return overlays.filter((overlay) => {
+			const conditions = overlay.conditions;
+			if (!conditions) return true;
+			if (conditions.role && !conditions.role.includes(role)) return false;
+			if (conditions.device && conditions.device !== "any" && conditions.device !== device) return false;
+			return true;
+		});
+	}, [
+		overlays,
+		role,
+		device
+	]);
+	const overlayMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const overlay of activeOverlays) map.set(overlay.target, overlay);
+		return map;
+	}, [activeOverlays]);
+	const applyOverlay = useMemo(() => (path, target) => {
+		const overlay = overlayMap.get(path);
+		if (!overlay) return target;
+		let result = { ...target };
+		for (const mod of overlay.modifications) switch (mod.op) {
+			case "hide":
+				result = {
+					...result,
+					hidden: true
+				};
+				break;
+			case "relabel":
+				result = {
+					...result,
+					label: mod.label
+				};
+				break;
+			case "reorder":
+				result = {
+					...result,
+					position: mod.position
+				};
+				break;
+			case "restyle":
+				result = {
+					...result,
+					className: mod.className,
+					variant: mod.variant
+				};
+				break;
+			case "set-default":
+				result = {
+					...result,
+					defaultValue: mod.value
+				};
+				break;
+		}
+		return result;
+	}, [overlayMap]);
+	const isHidden = useMemo(() => (path) => {
+		return overlayMap.get(path)?.modifications.some((m) => m.op === "hide") ?? false;
+	}, [overlayMap]);
+	const getLabel = useMemo(() => (path, defaultLabel) => {
+		const relabel = overlayMap.get(path)?.modifications.find((m) => m.op === "relabel");
+		return relabel && relabel.op === "relabel" ? relabel.label : defaultLabel;
+	}, [overlayMap]);
+	const getPosition = useMemo(() => (path, defaultPosition) => {
+		const reorder = overlayMap.get(path)?.modifications.find((m) => m.op === "reorder");
+		return reorder && reorder.op === "reorder" ? reorder.position : defaultPosition;
+	}, [overlayMap]);
+	const getStyle = useMemo(() => (path) => {
+		const restyle = overlayMap.get(path)?.modifications.find((m) => m.op === "restyle");
+		if (restyle && restyle.op === "restyle") return {
+			className: restyle.className,
+			variant: restyle.variant
+		};
+		return {};
+	}, [overlayMap]);
+	const getDefault = useMemo(() => (path, defaultValue) => {
+		const setDefault = overlayMap.get(path)?.modifications.find((m) => m.op === "set-default");
+		return setDefault && setDefault.op === "set-default" ? setDefault.value : defaultValue;
+	}, [overlayMap]);
+	const value = useMemo(() => ({
+		overlays: activeOverlays,
+		applyOverlay,
+		isHidden,
+		getLabel,
+		getPosition,
+		getStyle,
+		getDefault,
+		role,
+		device
+	}), [
+		activeOverlays,
+		applyOverlay,
+		isHidden,
+		getLabel,
+		getPosition,
+		getStyle,
+		getDefault,
+		role,
+		device
+	]);
+	return /* @__PURE__ */ jsx(OverlayContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Hook to access overlay context
+*/
+function useOverlayContext() {
+	const context = useContext(OverlayContext);
+	if (!context) throw new Error("useOverlayContext must be used within an OverlayContextProvider");
+	return context;
+}
+/**
+* Hook to check if within overlay context
+*/
+function useIsInOverlayContext() {
+	return useContext(OverlayContext) !== null;
+}
+/**
+* Get template-specific overlays
+*/
+function getTemplateOverlays(templateId, _role) {
+	return {
+		"crm-pipeline": [{
+			id: "crm-hide-internal-fields",
+			target: "deal.internalNotes",
+			modifications: [{ op: "hide" }],
+			conditions: { role: ["viewer", "user"] }
+		}, {
+			id: "crm-relabel-value",
+			target: "deal.value",
+			modifications: [{
+				op: "relabel",
+				label: "Deal Amount"
+			}]
+		}],
+		"saas-boilerplate": [{
+			id: "saas-hide-billing",
+			target: "settings.billing",
+			modifications: [{ op: "hide" }],
+			conditions: { role: ["viewer"] }
+		}, {
+			id: "saas-restyle-plan",
+			target: "settings.plan",
+			modifications: [{
+				op: "restyle",
+				variant: "premium"
+			}],
+			conditions: { role: ["admin"] }
+		}],
+		"agent-console": [{
+			id: "agent-hide-cost",
+			target: "run.cost",
+			modifications: [{ op: "hide" }],
+			conditions: { role: ["viewer"] }
+		}, {
+			id: "agent-relabel-tokens",
+			target: "run.tokens",
+			modifications: [{
+				op: "relabel",
+				label: "Token Usage"
+			}]
+		}],
+		"todos-app": [{
+			id: "todos-hide-assignee",
+			target: "task.assignee",
+			modifications: [{ op: "hide" }],
+			conditions: { device: "mobile" }
+		}],
+		"messaging-app": [{
+			id: "messaging-reorder-timestamp",
+			target: "message.timestamp",
+			modifications: [{
+				op: "reorder",
+				position: 0
+			}]
+		}],
+		"recipe-app-i18n": [{
+			id: "recipe-relabel-servings",
+			target: "recipe.servings",
+			modifications: [{
+				op: "relabel",
+				label: "Portions"
+			}]
+		}]
+	}[templateId] ?? [];
+}
+
+//#endregion
+//#region src/hooks/useBehaviorTracking.ts
+/**
+* Storage key for behavior data
+*/
+const BEHAVIOR_STORAGE_KEY = "contractspec-behavior-data";
+/**
+* All available features in the sandbox
+*/
+const ALL_FEATURES = [
+	"playground",
+	"specs",
+	"builder",
+	"markdown",
+	"evolution",
+	"canvas_add",
+	"canvas_delete",
+	"spec_save",
+	"spec_validate",
+	"ai_suggestions"
+];
+/**
+* Hook for tracking user behavior in the sandbox.
+* Provides insights into usage patterns and feature adoption.
+*/
+function useBehaviorTracking(templateId) {
+	const [events, setEvents] = useState([]);
+	const sessionStartRef = useRef(/* @__PURE__ */ new Date());
+	const [eventCount, setEventCount] = useState(0);
+	useEffect(() => {
+		try {
+			const stored = localStorage.getItem(BEHAVIOR_STORAGE_KEY);
+			if (stored) {
+				const data = JSON.parse(stored);
+				setEvents(data.events.map((e) => ({
+					...e,
+					timestamp: new Date(e.timestamp)
+				})));
+				sessionStartRef.current = new Date(data.sessionStart);
+			}
+		} catch {}
+	}, []);
+	useEffect(() => {
+		if (events.length > 0) try {
+			localStorage.setItem(BEHAVIOR_STORAGE_KEY, JSON.stringify({
+				events: events.map((e) => ({
+					...e,
+					timestamp: e.timestamp.toISOString()
+				})),
+				sessionStart: sessionStartRef.current.toISOString()
+			}));
+		} catch {}
+	}, [events]);
+	/**
+	* Track a behavior event
+	*/
+	const trackEvent = useCallback((type, metadata) => {
+		const event = {
+			type,
+			timestamp: /* @__PURE__ */ new Date(),
+			templateId,
+			metadata
+		};
+		setEvents((prev) => [...prev, event]);
+		setEventCount((prev) => prev + 1);
+	}, [templateId]);
+	/**
+	* Get events by type
+	*/
+	const getEventsByType = useCallback((type) => {
+		return events.filter((e) => e.type === type);
+	}, [events]);
+	/**
+	* Get behavior summary
+	*/
+	const getSummary = useCallback(() => {
+		const sessionDuration = (/* @__PURE__ */ new Date()).getTime() - sessionStartRef.current.getTime();
+		const templateCounts = /* @__PURE__ */ new Map();
+		for (const event of events) {
+			const count = templateCounts.get(event.templateId) ?? 0;
+			templateCounts.set(event.templateId, count + 1);
+		}
+		const mostUsedTemplates = Array.from(templateCounts.entries()).map(([templateId$1, count]) => ({
+			templateId: templateId$1,
+			count
+		})).sort((a, b) => b.count - a.count).slice(0, 3);
+		const modeCounts = /* @__PURE__ */ new Map();
+		for (const event of events) if (event.type === "mode_change" && event.metadata?.mode) {
+			const mode = event.metadata.mode;
+			const count = modeCounts.get(mode) ?? 0;
+			modeCounts.set(mode, count + 1);
+		}
+		const mostUsedModes = Array.from(modeCounts.entries()).map(([mode, count]) => ({
+			mode,
+			count
+		})).sort((a, b) => b.count - a.count);
+		const featuresUsed = /* @__PURE__ */ new Set();
+		for (const event of events) {
+			if (event.type === "mode_change" && event.metadata?.mode) featuresUsed.add(event.metadata.mode);
+			if (event.type === "feature_usage" && event.metadata?.feature) featuresUsed.add(event.metadata.feature);
+			if (event.type === "canvas_interaction") {
+				const action = event.metadata?.action;
+				if (action === "add") featuresUsed.add("canvas_add");
+				if (action === "delete") featuresUsed.add("canvas_delete");
+			}
+			if (event.type === "spec_edit") {
+				const action = event.metadata?.action;
+				if (action === "save") featuresUsed.add("spec_save");
+				if (action === "validate") featuresUsed.add("spec_validate");
+			}
+		}
+		const unusedFeatures = ALL_FEATURES.filter((f) => !featuresUsed.has(f));
+		const errorCount = events.filter((e) => e.type === "error").length;
+		const recommendations = generateRecommendations(Array.from(featuresUsed), unusedFeatures, mostUsedModes, events.length);
+		return {
+			totalEvents: events.length,
+			sessionDuration,
+			mostUsedTemplates,
+			mostUsedModes,
+			featuresUsed: Array.from(featuresUsed),
+			unusedFeatures,
+			errorCount,
+			recommendations
+		};
+	}, [events]);
+	/**
+	* Clear all tracking data
+	*/
+	const clear = useCallback(() => {
+		setEvents([]);
+		setEventCount(0);
+		sessionStartRef.current = /* @__PURE__ */ new Date();
+		localStorage.removeItem(BEHAVIOR_STORAGE_KEY);
+	}, []);
+	return useMemo(() => ({
+		trackEvent,
+		getSummary,
+		getEventsByType,
+		eventCount,
+		sessionStart: sessionStartRef.current,
+		clear
+	}), [
+		trackEvent,
+		getSummary,
+		getEventsByType,
+		eventCount,
+		clear
+	]);
+}
+/**
+* Generate recommendations based on behavior
+*/
+function generateRecommendations(featuresUsed, unusedFeatures, mostUsedModes, totalEvents) {
+	const recommendations = [];
+	if (unusedFeatures.includes("evolution")) recommendations.push("Try the AI Evolution mode to get automated improvement suggestions");
+	if (unusedFeatures.includes("markdown")) recommendations.push("Use Markdown preview to see documentation for your specs");
+	if (unusedFeatures.includes("builder")) recommendations.push("Explore the Visual Builder to design your UI components");
+	if (!featuresUsed.includes("spec_validate") && featuresUsed.includes("specs")) recommendations.push("Don't forget to validate your specs before saving");
+	if (featuresUsed.includes("evolution") && !featuresUsed.includes("ai_suggestions")) recommendations.push("Generate AI suggestions to get actionable improvement recommendations");
+	if (totalEvents > 50) recommendations.push("Great engagement! Consider saving your work regularly");
+	if (mostUsedModes.length === 1) recommendations.push("Try different modes to explore all sandbox capabilities");
+	return recommendations;
+}
+
+//#endregion
+//#region src/PersonalizationInsights.tsx
+/**
+* Component showing personalization insights based on user behavior.
+* Displays usage patterns, recommendations, and feature adoption.
+*/
+function PersonalizationInsights({ templateId, collapsed = false, onToggle }) {
+	const { getSummary, eventCount, clear, sessionStart } = useBehaviorTracking(templateId);
+	const [showDetails, setShowDetails] = useState(false);
+	const summary = useMemo(() => getSummary(), [getSummary]);
+	const formatDuration = useCallback((ms) => {
+		const seconds = Math.floor(ms / 1e3);
+		const minutes = Math.floor(seconds / 60);
+		const hours = Math.floor(minutes / 60);
+		if (hours > 0) return `${hours}h ${minutes % 60}m`;
+		if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
+		return `${seconds}s`;
+	}, []);
+	const handleClear = useCallback(() => {
+		clear();
+	}, [clear]);
+	if (collapsed) return /* @__PURE__ */ jsxs("button", {
+		onClick: onToggle,
+		className: "flex items-center gap-2 rounded-lg border border-blue-500/30 bg-blue-500/10 px-3 py-2 text-sm transition hover:bg-blue-500/20",
+		type: "button",
+		children: [
+			/* @__PURE__ */ jsx("span", { children: "📊" }),
+			/* @__PURE__ */ jsx("span", { children: "Insights" }),
+			/* @__PURE__ */ jsx(Badge, {
+				variant: "secondary",
+				children: eventCount
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "overflow-hidden",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between border-b border-blue-500/20 bg-blue-500/5 px-4 py-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", { children: "📊" }), /* @__PURE__ */ jsx("span", {
+					className: "font-semibold",
+					children: "Personalization Insights"
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					onPress: () => setShowDetails(!showDetails),
+					children: showDetails ? "Hide Details" : "Show Details"
+				}), onToggle && /* @__PURE__ */ jsx("button", {
+					onClick: onToggle,
+					className: "text-muted-foreground hover:text-foreground p-1",
+					type: "button",
+					title: "Collapse",
+					children: "✕"
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "p-4",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "mb-4 grid grid-cols-2 gap-3 md:grid-cols-4",
+					children: [
+						/* @__PURE__ */ jsx(StatCard, {
+							label: "Session Time",
+							value: formatDuration(summary.sessionDuration),
+							icon: "⏱️"
+						}),
+						/* @__PURE__ */ jsx(StatCard, {
+							label: "Events Tracked",
+							value: summary.totalEvents.toString(),
+							icon: "📈"
+						}),
+						/* @__PURE__ */ jsx(StatCard, {
+							label: "Features Used",
+							value: `${summary.featuresUsed.length}/${summary.featuresUsed.length + summary.unusedFeatures.length}`,
+							icon: "✨"
+						}),
+						/* @__PURE__ */ jsx(StatCard, {
+							label: "Errors",
+							value: summary.errorCount.toString(),
+							icon: "⚠️",
+							variant: summary.errorCount > 0 ? "warning" : "success"
+						})
+					]
+				}),
+				summary.recommendations.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "mb-4",
+					children: [/* @__PURE__ */ jsx("h4", {
+						className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+						children: "Recommendations"
+					}), /* @__PURE__ */ jsx("ul", {
+						className: "space-y-1",
+						children: summary.recommendations.map((rec, index) => /* @__PURE__ */ jsxs("li", {
+							className: "flex items-start gap-2 text-sm",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-blue-400",
+								children: "💡"
+							}), /* @__PURE__ */ jsx("span", { children: rec })]
+						}, index))
+					})]
+				}),
+				summary.unusedFeatures.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "mb-4",
+					children: [/* @__PURE__ */ jsx("h4", {
+						className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+						children: "Try These Features"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap gap-2",
+						children: summary.unusedFeatures.slice(0, 5).map((feature) => /* @__PURE__ */ jsx(Badge, {
+							variant: "secondary",
+							children: formatFeatureName(feature)
+						}, feature))
+					})]
+				}),
+				showDetails && /* @__PURE__ */ jsx(DetailedInsights, {
+					summary,
+					sessionStart
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-4 flex justify-end border-t border-blue-500/10 pt-4",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						onPress: handleClear,
+						children: "Clear Data"
+					})
+				})
+			]
+		})]
+	});
+}
+/**
+* Stat card component
+*/
+function StatCard({ label, value, icon, variant = "default" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `rounded-lg border p-3 text-center ${{
+			default: "bg-blue-500/5 border-blue-500/20",
+			warning: "bg-amber-500/5 border-amber-500/20",
+			success: "bg-green-500/5 border-green-500/20"
+		}[variant]}`,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-1 text-lg",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-lg font-bold",
+				children: value
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground text-xs",
+				children: label
+			})
+		]
+	});
+}
+/**
+* Detailed insights section
+*/
+function DetailedInsights({ summary, sessionStart }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-4 space-y-4 border-t border-blue-500/10 pt-4",
+		children: [
+			summary.mostUsedTemplates.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
+				className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+				children: "Most Used Templates"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "space-y-1",
+				children: summary.mostUsedTemplates.map(({ templateId, count }) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between text-sm",
+					children: [/* @__PURE__ */ jsx("span", { children: formatTemplateId(templateId) }), /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground",
+						children: [count, " events"]
+					})]
+				}, templateId))
+			})] }),
+			summary.mostUsedModes.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
+				className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+				children: "Mode Usage"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "space-y-1",
+				children: summary.mostUsedModes.map(({ mode, count }) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between text-sm",
+					children: [/* @__PURE__ */ jsx("span", { children: formatFeatureName(mode) }), /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground",
+						children: [count, " switches"]
+					})]
+				}, mode))
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
+				className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+				children: "Features Used"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-2",
+				children: summary.featuresUsed.map((feature) => /* @__PURE__ */ jsxs(Badge, {
+					variant: "default",
+					className: "border-green-500/30 bg-green-500/20 text-green-400",
+					children: ["✓ ", formatFeatureName(feature)]
+				}, feature))
+			})] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground text-xs",
+				children: ["Session started: ", sessionStart.toLocaleString()]
+			})
+		]
+	});
+}
+/**
+* Format feature name for display
+*/
+function formatFeatureName(feature) {
+	return feature.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+/**
+* Format template ID for display
+*/
+function formatTemplateId(id) {
+	return id.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+//#endregion
+//#region src/hooks/useWorkflowComposer.ts
+/**
+* Hook for composing workflows in the sandbox.
+* Provides workflow selection, extension management, and code generation.
+*/
+function useWorkflowComposer(templateId) {
+	const [selectedWorkflow, setSelectedWorkflow] = useState(null);
+	const [extensions, setExtensions] = useState([]);
+	const [loading, _setLoading] = useState(false);
+	const [error, _setError] = useState(null);
+	const baseWorkflows = useMemo(() => getTemplateWorkflows(templateId), [templateId]);
+	useEffect(() => {
+		const firstWorkflow = baseWorkflows[0];
+		if (baseWorkflows.length > 0 && !selectedWorkflow && firstWorkflow) setSelectedWorkflow(firstWorkflow.meta.key);
+	}, [baseWorkflows, selectedWorkflow]);
+	const currentBase = useMemo(() => {
+		return baseWorkflows.find((w) => w.meta.key === selectedWorkflow) ?? null;
+	}, [baseWorkflows, selectedWorkflow]);
+	/**
+	* Compose workflow with extensions
+	*/
+	const compose = useCallback((scope) => {
+		if (!currentBase) return null;
+		const applicableExtensions = extensions.filter((ext) => ext.workflow === currentBase.meta.key).filter((ext) => matchesScope(ext, scope)).sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
+		if (applicableExtensions.length === 0) return currentBase;
+		let composedWorkflow = {
+			...currentBase,
+			steps: [...currentBase.steps]
+		};
+		for (const extension of applicableExtensions) composedWorkflow = applyExtension(composedWorkflow, extension);
+		return composedWorkflow;
+	}, [currentBase, extensions]);
+	const workflow = useMemo(() => compose(), [compose]);
+	return {
+		workflow,
+		baseWorkflows,
+		extensions,
+		selectWorkflow: useCallback((workflowName) => {
+			setSelectedWorkflow(workflowName);
+		}, []),
+		addExtension: useCallback((extension) => {
+			setExtensions((prev) => [...prev, extension]);
+		}, []),
+		removeExtension: useCallback((workflowName, index) => {
+			setExtensions((prev) => {
+				const forWorkflow = prev.filter((e) => e.workflow === workflowName);
+				const others = prev.filter((e) => e.workflow !== workflowName);
+				forWorkflow.splice(index, 1);
+				return [...others, ...forWorkflow];
+			});
+		}, []),
+		compose,
+		generateSpecCode: useCallback(() => {
+			const composed = workflow;
+			if (!composed) return "// No workflow selected";
+			const stepsCode = composed.steps.map((step) => `    {
+      id: '${step.id}',
+      name: '${step.name}',
+      type: '${step.type}',${step.description ? `\n      description: '${step.description}',` : ""}${step.next ? `\n      next: ${JSON.stringify(step.next)},` : ""}${step.condition ? `\n      condition: '${step.condition}',` : ""}${step.timeout ? `\n      timeout: ${step.timeout},` : ""}${step.retries ? `\n      retries: ${step.retries},` : ""}${step.onError ? `\n      onError: '${step.onError}',` : ""}
+    }`).join(",\n");
+			const extensionsCode = extensions.length > 0 ? `
+
+// Extensions applied:
+${extensions.map((ext) => `// - ${ext.workflow} (priority: ${ext.priority ?? 0})${ext.customSteps?.length ? ` +${ext.customSteps.length} steps` : ""}${ext.hiddenSteps?.length ? ` -${ext.hiddenSteps.length} hidden` : ""}`).join("\n")}` : "";
+			return `// Workflow Spec: ${composed.meta.key} v${composed.meta.version}
+// Generated from ${templateId} template
+${extensionsCode}
+
+import { workflowSpec } from '@contractspec/lib.contracts/workflow';
+
+export const ${toCamelCase(composed.meta.key)}Workflow = workflowSpec({
+  meta: {
+    key: '${composed.meta.key}',
+    version: ${composed.meta.version},${composed.meta.description ? `\n    description: '${composed.meta.description}',` : ""}
+  },
+  start: '${composed.start}',
+  steps: [
+${stepsCode}
+  ],${composed.context ? `\n  context: ${JSON.stringify(composed.context, null, 2)},` : ""}
+});
+`;
+		}, [
+			workflow,
+			extensions,
+			templateId
+		]),
+		loading,
+		error
+	};
+}
+/**
+* Check if extension matches the scope
+*/
+function matchesScope(extension, scope) {
+	if (!scope) return true;
+	if (extension.tenantId && extension.tenantId !== scope.tenantId) return false;
+	if (extension.role && extension.role !== scope.role) return false;
+	if (extension.device && extension.device !== scope.device) return false;
+	return true;
+}
+/**
+* Apply extension to workflow
+*/
+function applyExtension(workflow, extension) {
+	let steps = [...workflow.steps];
+	if (extension.hiddenSteps) steps = steps.filter((s) => !extension.hiddenSteps?.includes(s.id));
+	if (extension.customSteps) for (const injection of extension.customSteps) {
+		const stepToInject = {
+			...injection.inject,
+			id: injection.id ?? injection.inject.id
+		};
+		if (injection.after) {
+			const afterIndex = steps.findIndex((s) => s.id === injection.after);
+			if (afterIndex !== -1) steps.splice(afterIndex + 1, 0, stepToInject);
+		} else if (injection.before) {
+			const beforeIndex = steps.findIndex((s) => s.id === injection.before);
+			if (beforeIndex !== -1) steps.splice(beforeIndex, 0, stepToInject);
+		} else steps.push(stepToInject);
+	}
+	return {
+		...workflow,
+		steps
+	};
+}
+/**
+* Convert string to camelCase
+*/
+function toCamelCase(str) {
+	return str.replace(/[^a-zA-Z0-9]+(.)/g, (_, c) => c.toUpperCase()).replace(/^./, (c) => c.toLowerCase());
+}
+/**
+* Get template-specific workflows
+*/
+function getTemplateWorkflows(templateId) {
+	return {
+		"crm-pipeline": [{
+			meta: {
+				key: "deal.qualification",
+				version: "1.0.0",
+				description: "Deal qualification workflow"
+			},
+			start: "lead-received",
+			steps: [
+				{
+					id: "lead-received",
+					name: "Lead Received",
+					type: "action",
+					description: "New lead enters the pipeline",
+					next: "qualify-lead"
+				},
+				{
+					id: "qualify-lead",
+					name: "Qualify Lead",
+					type: "decision",
+					description: "Determine if lead meets qualification criteria",
+					next: ["qualified", "disqualified"],
+					condition: "lead.score >= threshold"
+				},
+				{
+					id: "qualified",
+					name: "Lead Qualified",
+					type: "action",
+					next: "assign-rep"
+				},
+				{
+					id: "disqualified",
+					name: "Lead Disqualified",
+					type: "end"
+				},
+				{
+					id: "assign-rep",
+					name: "Assign Sales Rep",
+					type: "action",
+					next: "complete"
+				},
+				{
+					id: "complete",
+					name: "Workflow Complete",
+					type: "end"
+				}
+			]
+		}, {
+			meta: {
+				key: "deal.closing",
+				version: "1.0.0",
+				description: "Deal closing workflow"
+			},
+			start: "proposal-sent",
+			steps: [
+				{
+					id: "proposal-sent",
+					name: "Proposal Sent",
+					type: "action",
+					next: "wait-response"
+				},
+				{
+					id: "wait-response",
+					name: "Wait for Response",
+					type: "wait",
+					timeout: 6048e5,
+					next: "negotiate",
+					onError: "follow-up"
+				},
+				{
+					id: "follow-up",
+					name: "Follow Up",
+					type: "action",
+					next: "wait-response",
+					retries: 3
+				},
+				{
+					id: "negotiate",
+					name: "Negotiation",
+					type: "action",
+					next: "finalize"
+				},
+				{
+					id: "finalize",
+					name: "Finalize Deal",
+					type: "decision",
+					next: ["won", "lost"],
+					condition: "deal.accepted"
+				},
+				{
+					id: "won",
+					name: "Deal Won",
+					type: "end"
+				},
+				{
+					id: "lost",
+					name: "Deal Lost",
+					type: "end"
+				}
+			]
+		}],
+		"saas-boilerplate": [{
+			meta: {
+				key: "user.onboarding",
+				version: "1.0.0",
+				description: "User onboarding workflow"
+			},
+			start: "signup",
+			steps: [
+				{
+					id: "signup",
+					name: "User Signup",
+					type: "action",
+					next: "verify-email"
+				},
+				{
+					id: "verify-email",
+					name: "Verify Email",
+					type: "wait",
+					timeout: 864e5,
+					next: "profile-setup",
+					onError: "resend-verification"
+				},
+				{
+					id: "resend-verification",
+					name: "Resend Verification",
+					type: "action",
+					next: "verify-email",
+					retries: 2
+				},
+				{
+					id: "profile-setup",
+					name: "Setup Profile",
+					type: "action",
+					next: "onboarding-tour"
+				},
+				{
+					id: "onboarding-tour",
+					name: "Onboarding Tour",
+					type: "action",
+					next: "complete"
+				},
+				{
+					id: "complete",
+					name: "Onboarding Complete",
+					type: "end"
+				}
+			]
+		}],
+		"agent-console": [{
+			meta: {
+				key: "agent.execution",
+				version: "1.0.0",
+				description: "Agent execution workflow"
+			},
+			start: "receive-task",
+			steps: [
+				{
+					id: "receive-task",
+					name: "Receive Task",
+					type: "action",
+					next: "plan-execution"
+				},
+				{
+					id: "plan-execution",
+					name: "Plan Execution",
+					type: "action",
+					next: "execute-steps"
+				},
+				{
+					id: "execute-steps",
+					name: "Execute Steps",
+					type: "parallel",
+					next: [
+						"tool-call",
+						"observe",
+						"reason"
+					]
+				},
+				{
+					id: "tool-call",
+					name: "Tool Call",
+					type: "action",
+					next: "evaluate"
+				},
+				{
+					id: "observe",
+					name: "Observe",
+					type: "action",
+					next: "evaluate"
+				},
+				{
+					id: "reason",
+					name: "Reason",
+					type: "action",
+					next: "evaluate"
+				},
+				{
+					id: "evaluate",
+					name: "Evaluate Result",
+					type: "decision",
+					condition: "task.isComplete",
+					next: ["complete", "execute-steps"]
+				},
+				{
+					id: "complete",
+					name: "Task Complete",
+					type: "end"
+				}
+			]
+		}],
+		"todos-app": [{
+			meta: {
+				key: "task.lifecycle",
+				version: "1.0.0",
+				description: "Task lifecycle workflow"
+			},
+			start: "created",
+			steps: [
+				{
+					id: "created",
+					name: "Task Created",
+					type: "action",
+					next: "in-progress"
+				},
+				{
+					id: "in-progress",
+					name: "In Progress",
+					type: "action",
+					next: "review"
+				},
+				{
+					id: "review",
+					name: "Review",
+					type: "decision",
+					condition: "task.approved",
+					next: ["done", "in-progress"]
+				},
+				{
+					id: "done",
+					name: "Done",
+					type: "end"
+				}
+			]
+		}],
+		"messaging-app": [{
+			meta: {
+				key: "message.delivery",
+				version: "1.0.0",
+				description: "Message delivery workflow"
+			},
+			start: "compose",
+			steps: [
+				{
+					id: "compose",
+					name: "Compose Message",
+					type: "action",
+					next: "send"
+				},
+				{
+					id: "send",
+					name: "Send Message",
+					type: "action",
+					next: "deliver"
+				},
+				{
+					id: "deliver",
+					name: "Deliver",
+					type: "decision",
+					condition: "recipient.online",
+					next: ["delivered", "queue"]
+				},
+				{
+					id: "queue",
+					name: "Queue for Delivery",
+					type: "wait",
+					next: "deliver"
+				},
+				{
+					id: "delivered",
+					name: "Message Delivered",
+					type: "action",
+					next: "read"
+				},
+				{
+					id: "read",
+					name: "Message Read",
+					type: "end"
+				}
+			]
+		}],
+		"recipe-app-i18n": [{
+			meta: {
+				key: "recipe.creation",
+				version: "1.0.0",
+				description: "Recipe creation workflow"
+			},
+			start: "draft",
+			steps: [
+				{
+					id: "draft",
+					name: "Draft Recipe",
+					type: "action",
+					next: "add-ingredients"
+				},
+				{
+					id: "add-ingredients",
+					name: "Add Ingredients",
+					type: "action",
+					next: "add-steps"
+				},
+				{
+					id: "add-steps",
+					name: "Add Steps",
+					type: "action",
+					next: "review"
+				},
+				{
+					id: "review",
+					name: "Review Recipe",
+					type: "decision",
+					condition: "recipe.isComplete",
+					next: ["publish", "draft"]
+				},
+				{
+					id: "publish",
+					name: "Publish Recipe",
+					type: "end"
+				}
+			]
+		}]
+	}[templateId] ?? [];
+}
+
+//#endregion
+//#region src/hooks/useRegistryTemplates.ts
+function useRegistryTemplates() {
+	return useQuery({
+		queryKey: ["registryTemplates"],
+		queryFn: async () => {
+			const registryUrl = process.env.NEXT_PUBLIC_CONTRACTSPEC_REGISTRY_URL ?? "";
+			if (!registryUrl) return [];
+			const res = await fetch(`${registryUrl.replace(/\/$/, "")}/r/contractspec.json`, {
+				method: "GET",
+				headers: { Accept: "application/json" }
+			});
+			if (!res.ok) return [];
+			return ((await res.json()).items ?? []).filter((i) => i.type === "contractspec:template").map((i) => ({
+				id: i.name,
+				name: i.title ?? i.name,
+				description: i.description,
+				tags: i.meta?.tags ?? [],
+				source: "registry",
+				registryUrl
+			}));
+		}
+	});
+}
+
+//#endregion
+//#region src/utils/fetchPresentationData.ts
+/**
+* @deprecated Use fetchData from TemplateRuntimeContext instead.
+*/
+/**
+* @deprecated Use fetchData from TemplateRuntimeContext instead.
+*/
+async function fetchPresentationData(_presentationName, _templateId) {
+	throw new Error("fetchPresentationData is deprecated. Use fetchData from TemplateRuntimeContext.");
+}
+/**
+* @deprecated
+*/
+function hasPresentationDataFetcher(_presentationName) {
+	return false;
+}
+/**
+* @deprecated
+*/
+function getRegisteredPresentationFetchers() {
+	return [];
+}
+
+//#endregion
+//#region src/lib/component-registry.tsx
+var TemplateComponentRegistry = class {
+	components = /* @__PURE__ */ new Map();
+	listeners = /* @__PURE__ */ new Set();
+	register(templateId, registration) {
+		this.components.set(templateId, registration);
+		this.listeners.forEach((l) => l(templateId));
+	}
+	get(templateId) {
+		return this.components.get(templateId);
+	}
+	subscribe(listener) {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	}
+};
+const templateComponentRegistry = new TemplateComponentRegistry();
+function registerTemplateComponents(templateId, components) {
+	templateComponentRegistry.register(templateId, components);
+}
+function useTemplateComponents(templateId) {
+	const [components, setComponents] = useState(() => templateComponentRegistry.get(templateId));
+	useEffect(() => {
+		return templateComponentRegistry.subscribe((updatedId) => {
+			if (updatedId === templateId) setComponents(templateComponentRegistry.get(templateId));
+		});
+	}, [templateId]);
+	return components;
+}
+
+//#endregion
+export { EvolutionDashboard, EvolutionSidebar, LocalDataIndicator, MarkdownView, OverlayContextProvider, PersonalizationInsights, SaveToStudioButton, SpecEditorPanel, TemplateComponentRegistry, TemplateRuntimeContext, TemplateShell, fetchPresentationData, generateSpecFromTemplate, getRegisteredPresentationFetchers, hasPresentationDataFetcher, registerTemplateComponents, templateComponentRegistry, useBehaviorTracking, useEvolution, useIsInOverlayContext, useOverlayContext, useRegistryTemplates, useSpecContent, useTemplateComponents, useTemplateRuntime, useWorkflowComposer };