@signalflare-ai/ui 0.5.0

package/dist/dist-BNlyONdD.js

@@ -0,0 +1,3546 @@
+"use client";
+import { t as Loader } from "./loader-DAcc-Uag.js";
+import { t as Tooltip } from "./tooltip-Cb7QW-7H.js";
+import { t as Badge } from "./badge-D_eaA6wv.js";
+import { t as Banner } from "./banner-B_6oBrsu.js";
+import { t as Button } from "./button-De0267YU.js";
+import { t as Checkbox } from "./checkbox-CPX7lBaU.js";
+import { t as Field } from "./field-Y_UK1_Cg.js";
+import { t as Input } from "./input-BxQAnXki.js";
+import { n as InputArea } from "./input-Cn25I4o5.js";
+import { t as Code } from "./code-DE1Yy1Cu.js";
+import { t as Surface } from "./surface-BduI7Ehl.js";
+import { t as Dialog } from "./dialog-CyHEQXEY.js";
+import { t as Collapsible } from "./collapsible-DWsXeXmS.js";
+import { t as LayerCard } from "./layer-card-BME0eljh.js";
+import { t as Meter } from "./meter-CpmTenEr.js";
+import { t as Select } from "./select-9p721G00.js";
+import { r as Switch } from "./switch-CzZBRBL7.js";
+import { t as Tabs } from "./tabs-1cHrYoel.js";
+import { r as Table } from "./table-CIMx0Oq0.js";
+import { t as Popover } from "./popover-BRQZ2b6z.js";
+import { t as Empty } from "./empty-D2TypIId.js";
+import { t as Text } from "./text-KJmGkwnf.js";
+import { t as Radio } from "./radio-B7zg1wUI.js";
+import { Link } from "./components/link.js";
+import { t as Grid } from "./grid-qUAN9hFx.js";
+import { i as ChartPalette, r as Chart } from "./chart-Bes4MN3C.js";
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { z } from "zod";
+import { BarChart, LineChart, PieChart } from "echarts/charts";
+import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from "echarts/components";
+import * as echarts from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+//#region src/catalog/sf-registry.ts
+echarts.use([
+	BarChart,
+	LineChart,
+	PieChart,
+	GridComponent,
+	TooltipComponent,
+	LegendComponent,
+	TitleComponent,
+	CanvasRenderer
+]);
+/**
+* Hardcoded SF theme color tokens for ECharts canvas rendering.
+* ECharts draws on <canvas> so it cannot resolve CSS custom properties
+* or `light-dark()`.  We detect `data-mode` and return matching hex values
+* derived from theme-sf.css oklch fallbacks.
+*/
+var SF_CHART_THEME = {
+	light: {
+		text: "#6b6b6b",
+		mutedText: "#a3a3a3",
+		line: "#e5e5e5",
+		bg: "#ffffff"
+	},
+	dark: {
+		text: "#a1a1a1",
+		mutedText: "#636363",
+		line: "#333840",
+		bg: "#2a2d35"
+	}
+};
+function isDarkMode() {
+	if (typeof document === "undefined") return false;
+	return document.documentElement.dataset.mode === "dark";
+}
+function getChartThemeColors() {
+	return isDarkMode() ? SF_CHART_THEME.dark : SF_CHART_THEME.light;
+}
+/** Shared ECharts option overrides for axis / text / grid styling */
+function chartBaseOptions() {
+	const c = getChartThemeColors();
+	return {
+		textStyle: {
+			color: c.mutedText,
+			fontFamily: "inherit",
+			fontSize: 12
+		},
+		title: { textStyle: {
+			color: c.text,
+			fontWeight: 500,
+			fontSize: 14
+		} },
+		legend: { textStyle: { color: c.mutedText } },
+		xAxis: {
+			axisLine: { lineStyle: { color: c.line } },
+			axisTick: { lineStyle: { color: c.line } },
+			axisLabel: { color: c.mutedText },
+			splitLine: { lineStyle: {
+				color: c.line,
+				type: "dashed"
+			} }
+		},
+		yAxis: {
+			axisLine: { show: false },
+			axisTick: { show: false },
+			axisLabel: { color: c.mutedText },
+			splitLine: { lineStyle: {
+				color: c.line,
+				type: "dashed"
+			} }
+		},
+		tooltip: {
+			backgroundColor: c.bg,
+			borderColor: c.line,
+			textStyle: { color: c.text }
+		}
+	};
+}
+/** Deep-merge base chart styling under user options (user wins on conflict) */
+function mergeChartOptions(base, user) {
+	const result = {};
+	const keys = new Set([...Object.keys(base), ...Object.keys(user)]);
+	for (const key of keys) {
+		const bv = base[key];
+		const uv = user[key];
+		if (uv === void 0) result[key] = bv;
+		else if (bv === void 0 || typeof bv !== "object" || typeof uv !== "object" || Array.isArray(uv)) result[key] = uv;
+		else result[key] = mergeChartOptions(bv, uv);
+	}
+	return result;
+}
+/** Aggregate data by xKey: sum, count, or avg */
+function processChartData(rawItems, xKey, yKey, aggregate) {
+	if (!aggregate) return {
+		labels: rawItems.map((item) => {
+			const v = item[xKey];
+			return typeof v === "string" || typeof v === "number" ? String(v) : "";
+		}),
+		values: rawItems.map((item) => Number(item[yKey]) || 0)
+	};
+	const groups = /* @__PURE__ */ new Map();
+	for (const item of rawItems) {
+		const raw = item[xKey];
+		const key = typeof raw === "string" || typeof raw === "number" ? String(raw) : "";
+		if (!groups.has(key)) groups.set(key, []);
+		groups.get(key).push(Number(item[yKey]) || 0);
+	}
+	const labels = [];
+	const values = [];
+	for (const [key, vals] of groups) {
+		labels.push(key);
+		if (aggregate === "count") values.push(vals.length);
+		else if (aggregate === "avg") values.push(vals.reduce((a, b) => a + b, 0) / vals.length);
+		else values.push(vals.reduce((a, b) => a + b, 0));
+	}
+	return {
+		labels,
+		values
+	};
+}
+function passthrough(Component) {
+	return ({ props, children }) => children != null ? React.createElement(Component, props, children) : React.createElement(Component, props);
+}
+var sfComponents = {
+	Stack: ({ props, children }) => {
+		const { direction, gap, align, wrap } = props;
+		const cn = ["flex"];
+		cn.push(direction === "horizontal" ? "flex-row" : "flex-col");
+		if (gap === "sm") cn.push("gap-2");
+		else if (gap === "lg") cn.push("gap-6");
+		else cn.push("gap-4");
+		if (align === "center") cn.push("items-center");
+		else if (align === "end") cn.push("items-end");
+		else if (align === "start") cn.push("items-start");
+		if (wrap) cn.push("flex-wrap");
+		return React.createElement("div", { className: cn.join(" ") }, children);
+	},
+	Surface: ({ props, children }) => {
+		const { padding, border, ...rest } = props;
+		const cn = [];
+		if (padding === "sm") cn.push("p-3");
+		else if (padding === "lg") cn.push("p-8");
+		else if (padding === "base") cn.push("p-5");
+		if (border) cn.push("border border-sf-line rounded-lg");
+		return React.createElement(Surface, {
+			...rest,
+			className: cn.length ? cn.join(" ") : void 0
+		}, children);
+	},
+	Grid: passthrough(Grid),
+	LayerCard: passthrough(LayerCard),
+	Text: ({ props }) => {
+		const { text, ...rest } = props;
+		return React.createElement(Text, rest, text);
+	},
+	Code: passthrough(Code),
+	Button: ({ props }) => {
+		const { label, ...rest } = props;
+		return React.createElement(Button, rest, label);
+	},
+	Link: ({ props }) => {
+		const { text, ...rest } = props;
+		return React.createElement(Link, rest, text);
+	},
+	Badge: ({ props }) => {
+		const { text, ...rest } = props;
+		return React.createElement(Badge, rest, text);
+	},
+	Banner: ({ props }) => {
+		const { title, description, variant } = props;
+		return React.createElement(Banner, { variant }, React.createElement("strong", null, title), description ? React.createElement("p", null, description) : null);
+	},
+	Meter: passthrough(Meter),
+	Empty: passthrough(Empty),
+	Loader: passthrough(Loader),
+	Table: ({ props }) => {
+		const { data, columns } = props;
+		if (!columns?.length) return null;
+		const rows = Array.isArray(data) ? data : [];
+		return React.createElement(Table, null, React.createElement(Table.Header, null, React.createElement(Table.Row, null, columns.map((col) => React.createElement(Table.Head, { key: col.key }, col.label)))), React.createElement(Table.Body, null, rows.length > 0 ? rows.map((row, i) => React.createElement(Table.Row, { key: i }, columns.map((col) => React.createElement(Table.Cell, { key: col.key }, String(row[col.key] ?? ""))))) : React.createElement(Table.Row, null, React.createElement(Table.Cell, { colSpan: columns.length }, "No data"))));
+	},
+	Input: passthrough(Input),
+	InputArea: passthrough(InputArea),
+	Select: ({ props }) => {
+		const { options, ...rest } = props;
+		const items = Array.isArray(options) ? options : [];
+		return React.createElement(Select, rest, items.map((opt) => React.createElement(Select.Option, {
+			key: opt.value,
+			value: opt.value
+		}, opt.label)));
+	},
+	Checkbox: passthrough(Checkbox),
+	Switch: passthrough(Switch),
+	Radio: ({ props }) => {
+		const { options, ...rest } = props;
+		const items = Array.isArray(options) ? options : [];
+		return React.createElement(Radio.Group, rest, items.map((opt) => React.createElement(Radio.Item, {
+			key: opt.value,
+			value: opt.value,
+			label: opt.label
+		})));
+	},
+	Field: passthrough(Field),
+	Tabs: ({ props, children }) => {
+		const { defaultValue, ...rest } = props;
+		return children != null ? React.createElement(Tabs, {
+			...rest,
+			selectedValue: defaultValue ?? rest.tabs?.[0]?.value
+		}, children) : React.createElement(Tabs, {
+			...rest,
+			selectedValue: defaultValue ?? rest.tabs?.[0]?.value
+		});
+	},
+	Dialog: ({ props, children }) => {
+		const { trigger, title, description } = props;
+		return React.createElement(Dialog.Root, null, React.createElement(Dialog.Trigger, null, React.createElement(Button, null, trigger)), React.createElement(Dialog, null, title && React.createElement(Dialog.Title, null, title), description && React.createElement(Dialog.Description, null, description), children));
+	},
+	Collapsible: passthrough(Collapsible),
+	Tooltip: ({ props, children }) => {
+		const { content } = props;
+		return children != null ? React.createElement(Tooltip, { content }, children) : React.createElement(Tooltip, { content });
+	},
+	Popover: ({ props, children }) => {
+		const { trigger } = props;
+		return React.createElement(Popover, null, React.createElement(Popover.Trigger, null, React.createElement(Button, { variant: "outline" }, trigger)), React.createElement(Popover.Content, null, children));
+	},
+	BarChart: ({ props }) => {
+		const { title, data, xKey, yKey, aggregate, color, height } = props;
+		const { labels, values } = processChartData(Array.isArray(data) ? data : [], xKey, yKey, aggregate);
+		const chartColor = color ?? ChartPalette.color(0);
+		const userOpts = {
+			...title ? { title: {
+				text: title,
+				left: "center"
+			} } : {},
+			tooltip: { trigger: "axis" },
+			xAxis: {
+				type: "category",
+				data: labels
+			},
+			yAxis: { type: "value" },
+			series: [{
+				type: "bar",
+				data: values,
+				itemStyle: { color: chartColor }
+			}]
+		};
+		return React.createElement(Chart, {
+			echarts,
+			options: mergeChartOptions(chartBaseOptions(), userOpts),
+			height: height ?? 350
+		});
+	},
+	LineChart: ({ props }) => {
+		const { title, data, xKey, yKey, aggregate, color, height } = props;
+		const { labels, values } = processChartData(Array.isArray(data) ? data : [], xKey, yKey, aggregate);
+		const chartColor = color ?? ChartPalette.color(0);
+		const userOpts = {
+			...title ? { title: {
+				text: title,
+				left: "center"
+			} } : {},
+			tooltip: { trigger: "axis" },
+			xAxis: {
+				type: "category",
+				data: labels
+			},
+			yAxis: { type: "value" },
+			series: [{
+				type: "line",
+				data: values,
+				smooth: true,
+				lineStyle: { color: chartColor },
+				itemStyle: { color: chartColor }
+			}]
+		};
+		return React.createElement(Chart, {
+			echarts,
+			options: mergeChartOptions(chartBaseOptions(), userOpts),
+			height: height ?? 350
+		});
+	},
+	PieChart: ({ props }) => {
+		const { title, data, nameKey, valueKey, height } = props;
+		const pieData = (Array.isArray(data) ? data : []).map((item, i) => ({
+			name: typeof item[nameKey] === "string" || typeof item[nameKey] === "number" ? String(item[nameKey]) : "",
+			value: Number(item[valueKey]) || 0,
+			itemStyle: { color: ChartPalette.color(i) }
+		}));
+		const userOpts = {
+			...title ? { title: {
+				text: title,
+				left: "center"
+			} } : {},
+			tooltip: { trigger: "item" },
+			legend: {
+				orient: "horizontal",
+				bottom: 0
+			},
+			series: [{
+				type: "pie",
+				radius: ["40%", "70%"],
+				data: pieData,
+				label: { color: getChartThemeColors().mutedText }
+			}]
+		};
+		return React.createElement(Chart, {
+			echarts,
+			options: mergeChartOptions(chartBaseOptions(), userOpts),
+			height: height ?? 350
+		});
+	},
+	Chart: ({ props }) => {
+		const { options, height } = props;
+		return React.createElement(Chart, {
+			echarts,
+			options: mergeChartOptions(chartBaseOptions(), options ?? {}),
+			height: height ?? 350
+		});
+	}
+};
+//#endregion
+//#region ../../node_modules/.bun/@json-render+core@0.15.0/node_modules/@json-render/core/dist/chunk-AFLK3Q4T.mjs
+var DynamicValueSchema = z.union([
+	z.string(),
+	z.number(),
+	z.boolean(),
+	z.null(),
+	z.object({ $state: z.string() })
+]);
+z.union([z.string(), z.object({ $state: z.string() })]);
+z.union([z.number(), z.object({ $state: z.string() })]);
+z.union([z.boolean(), z.object({ $state: z.string() })]);
+function resolveDynamicValue(value, stateModel) {
+	if (value === null || value === void 0) return;
+	if (typeof value === "object" && "$state" in value) return getByPath(stateModel, value.$state);
+	return value;
+}
+function unescapeJsonPointer(token) {
+	return token.replace(/~1/g, "/").replace(/~0/g, "~");
+}
+function parseJsonPointer(path) {
+	return (path.startsWith("/") ? path.slice(1).split("/") : path.split("/")).map(unescapeJsonPointer);
+}
+function getByPath(obj, path) {
+	if (!path || path === "/") return obj;
+	const segments = parseJsonPointer(path);
+	let current = obj;
+	for (const segment of segments) {
+		if (current === null || current === void 0) return;
+		if (Array.isArray(current)) current = current[parseInt(segment, 10)];
+		else if (typeof current === "object") current = current[segment];
+		else return;
+	}
+	return current;
+}
+function isNumericIndex(str) {
+	return /^\d+$/.test(str);
+}
+function setByPath(obj, path, value) {
+	const segments = parseJsonPointer(path);
+	if (segments.length === 0) return;
+	let current = obj;
+	for (let i = 0; i < segments.length - 1; i++) {
+		const segment = segments[i];
+		const nextSegment = segments[i + 1];
+		const nextIsNumeric = nextSegment !== void 0 && (isNumericIndex(nextSegment) || nextSegment === "-");
+		if (Array.isArray(current)) {
+			const index = parseInt(segment, 10);
+			if (current[index] === void 0 || typeof current[index] !== "object") current[index] = nextIsNumeric ? [] : {};
+			current = current[index];
+		} else {
+			if (!(segment in current) || typeof current[segment] !== "object") current[segment] = nextIsNumeric ? [] : {};
+			current = current[segment];
+		}
+	}
+	const lastSegment = segments[segments.length - 1];
+	if (Array.isArray(current)) if (lastSegment === "-") current.push(value);
+	else {
+		const index = parseInt(lastSegment, 10);
+		current[index] = value;
+	}
+	else current[lastSegment] = value;
+}
+function addByPath(obj, path, value) {
+	const segments = parseJsonPointer(path);
+	if (segments.length === 0) return;
+	let current = obj;
+	for (let i = 0; i < segments.length - 1; i++) {
+		const segment = segments[i];
+		const nextSegment = segments[i + 1];
+		const nextIsNumeric = nextSegment !== void 0 && (isNumericIndex(nextSegment) || nextSegment === "-");
+		if (Array.isArray(current)) {
+			const index = parseInt(segment, 10);
+			if (current[index] === void 0 || typeof current[index] !== "object") current[index] = nextIsNumeric ? [] : {};
+			current = current[index];
+		} else {
+			if (!(segment in current) || typeof current[segment] !== "object") current[segment] = nextIsNumeric ? [] : {};
+			current = current[segment];
+		}
+	}
+	const lastSegment = segments[segments.length - 1];
+	if (Array.isArray(current)) if (lastSegment === "-") current.push(value);
+	else {
+		const index = parseInt(lastSegment, 10);
+		current.splice(index, 0, value);
+	}
+	else current[lastSegment] = value;
+}
+function removeByPath(obj, path) {
+	const segments = parseJsonPointer(path);
+	if (segments.length === 0) return;
+	let current = obj;
+	for (let i = 0; i < segments.length - 1; i++) {
+		const segment = segments[i];
+		if (Array.isArray(current)) {
+			const index = parseInt(segment, 10);
+			if (current[index] === void 0 || typeof current[index] !== "object") return;
+			current = current[index];
+		} else {
+			if (!(segment in current) || typeof current[segment] !== "object") return;
+			current = current[segment];
+		}
+	}
+	const lastSegment = segments[segments.length - 1];
+	if (Array.isArray(current)) {
+		const index = parseInt(lastSegment, 10);
+		if (index >= 0 && index < current.length) current.splice(index, 1);
+	} else delete current[lastSegment];
+}
+function deepEqual(a, b) {
+	if (a === b) return true;
+	if (a === null || b === null) return false;
+	if (typeof a !== typeof b) return false;
+	if (typeof a !== "object") return false;
+	if (Array.isArray(a)) {
+		if (!Array.isArray(b)) return false;
+		if (a.length !== b.length) return false;
+		return a.every((item, i) => deepEqual(item, b[i]));
+	}
+	const aObj = a;
+	const bObj = b;
+	const aKeys = Object.keys(aObj);
+	const bKeys = Object.keys(bObj);
+	if (aKeys.length !== bKeys.length) return false;
+	return aKeys.every((key) => deepEqual(aObj[key], bObj[key]));
+}
+function parseSpecStreamLine(line) {
+	const trimmed = line.trim();
+	if (!trimmed || !trimmed.startsWith("{")) return null;
+	try {
+		const patch = JSON.parse(trimmed);
+		if (patch.op && patch.path !== void 0) return patch;
+		return null;
+	} catch {
+		return null;
+	}
+}
+function applySpecStreamPatch(obj, patch) {
+	switch (patch.op) {
+		case "add":
+			addByPath(obj, patch.path, patch.value);
+			break;
+		case "replace":
+			setByPath(obj, patch.path, patch.value);
+			break;
+		case "remove":
+			removeByPath(obj, patch.path);
+			break;
+		case "move": {
+			if (!patch.from) break;
+			const moveValue = getByPath(obj, patch.from);
+			removeByPath(obj, patch.from);
+			addByPath(obj, patch.path, moveValue);
+			break;
+		}
+		case "copy": {
+			if (!patch.from) break;
+			const copyValue = getByPath(obj, patch.from);
+			addByPath(obj, patch.path, copyValue);
+			break;
+		}
+		case "test":
+			if (!deepEqual(getByPath(obj, patch.path), patch.value)) throw new Error(`Test operation failed: value at "${patch.path}" does not match`);
+			break;
+	}
+	return obj;
+}
+function applySpecPatch(spec, patch) {
+	applySpecStreamPatch(spec, patch);
+	return spec;
+}
+function nestedToFlat(nested) {
+	const elements = {};
+	let counter = 0;
+	function walk(node) {
+		const key = `el-${counter++}`;
+		const { type, props, children: rawChildren, ...rest } = node;
+		const childKeys = [];
+		if (Array.isArray(rawChildren)) {
+			for (const child of rawChildren) if (child && typeof child === "object" && "type" in child) childKeys.push(walk(child));
+		}
+		const element = {
+			type: type ?? "unknown",
+			props: props ?? {},
+			children: childKeys
+		};
+		for (const [k, v] of Object.entries(rest)) if (k !== "state" && v !== void 0) element[k] = v;
+		elements[key] = element;
+		return key;
+	}
+	const spec = {
+		root: walk(nested),
+		elements
+	};
+	if (nested.state && typeof nested.state === "object" && !Array.isArray(nested.state)) spec.state = nested.state;
+	return spec;
+}
+function createMixedStreamParser(callbacks) {
+	let buffer = "";
+	let inSpecFence = false;
+	function processLine(line) {
+		const trimmed = line.trim();
+		if (!inSpecFence && trimmed.startsWith("```spec")) {
+			inSpecFence = true;
+			return;
+		}
+		if (inSpecFence && trimmed === "```") {
+			inSpecFence = false;
+			return;
+		}
+		if (!trimmed) return;
+		if (inSpecFence) {
+			const patch2 = parseSpecStreamLine(trimmed);
+			if (patch2) callbacks.onPatch(patch2);
+			return;
+		}
+		const patch = parseSpecStreamLine(trimmed);
+		if (patch) callbacks.onPatch(patch);
+		else callbacks.onText(line);
+	}
+	return {
+		push(chunk) {
+			buffer += chunk;
+			const lines = buffer.split("\n");
+			buffer = lines.pop() || "";
+			for (const line of lines) processLine(line);
+		},
+		flush() {
+			if (buffer.trim()) processLine(buffer);
+			buffer = "";
+		}
+	};
+}
+var SPEC_DATA_PART_TYPE = `data-spec`;
+function immutableSetByPath(root, path, value) {
+	const segments = parseJsonPointer(path);
+	if (segments.length === 0) return root;
+	const result = { ...root };
+	let current = result;
+	for (let i = 0; i < segments.length - 1; i++) {
+		const seg = segments[i];
+		const child = current[seg];
+		if (Array.isArray(child)) current[seg] = [...child];
+		else if (child !== null && typeof child === "object") current[seg] = { ...child };
+		else {
+			const nextSeg = segments[i + 1];
+			current[seg] = nextSeg !== void 0 && /^\d+$/.test(nextSeg) ? [] : {};
+		}
+		current = current[seg];
+	}
+	const lastSeg = segments[segments.length - 1];
+	if (Array.isArray(current)) if (lastSeg === "-") current.push(value);
+	else current[parseInt(lastSeg, 10)] = value;
+	else current[lastSeg] = value;
+	return result;
+}
+function createStateStore(initialState = {}) {
+	let state = { ...initialState };
+	const listeners = /* @__PURE__ */ new Set();
+	function notify() {
+		for (const listener of listeners) listener();
+	}
+	return {
+		get(path) {
+			return getByPath(state, path);
+		},
+		set(path, value) {
+			if (getByPath(state, path) === value) return;
+			state = immutableSetByPath(state, path, value);
+			notify();
+		},
+		update(updates) {
+			let changed = false;
+			let next = state;
+			for (const [path, value] of Object.entries(updates)) if (getByPath(next, path) !== value) {
+				next = immutableSetByPath(next, path, value);
+				changed = true;
+			}
+			if (!changed) return;
+			state = next;
+			notify();
+		},
+		getSnapshot() {
+			return state;
+		},
+		getServerSnapshot() {
+			return state;
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+}
+var MAX_FLATTEN_DEPTH = 20;
+function flattenToPointers(obj, prefix = "", _depth = 0, _seen, _warned) {
+	const seen = _seen ?? /* @__PURE__ */ new Set();
+	const warned = _warned ?? { current: false };
+	const result = {};
+	for (const [key, value] of Object.entries(obj)) {
+		const pointer = `${prefix}/${key}`;
+		if (_depth < MAX_FLATTEN_DEPTH && value !== null && typeof value === "object" && !Array.isArray(value) && Object.getPrototypeOf(value) === Object.prototype && !seen.has(value)) {
+			seen.add(value);
+			Object.assign(result, flattenToPointers(value, pointer, _depth + 1, seen, warned));
+		} else {
+			if (process.env.NODE_ENV !== "production" && !warned.current && _depth >= MAX_FLATTEN_DEPTH && value !== null && typeof value === "object" && !Array.isArray(value) && Object.getPrototypeOf(value) === Object.prototype && !seen.has(value)) {
+				warned.current = true;
+				console.warn(`flattenToPointers: depth limit (${MAX_FLATTEN_DEPTH}) reached. Nested state beyond this depth will be treated as a leaf value.`);
+			}
+			result[pointer] = value;
+		}
+	}
+	return result;
+}
+//#endregion
+//#region ../../node_modules/.bun/@json-render+core@0.15.0/node_modules/@json-render/core/dist/index.mjs
+var numericOrStateRef = z.union([z.number(), z.object({ $state: z.string() })]);
+var comparisonOps = {
+	eq: z.unknown().optional(),
+	neq: z.unknown().optional(),
+	gt: numericOrStateRef.optional(),
+	gte: numericOrStateRef.optional(),
+	lt: numericOrStateRef.optional(),
+	lte: numericOrStateRef.optional(),
+	not: z.literal(true).optional()
+};
+var StateConditionSchema = z.object({
+	$state: z.string(),
+	...comparisonOps
+});
+var ItemConditionSchema = z.object({
+	$item: z.string(),
+	...comparisonOps
+});
+var IndexConditionSchema = z.object({
+	$index: z.literal(true),
+	...comparisonOps
+});
+var SingleConditionSchema = z.union([
+	StateConditionSchema,
+	ItemConditionSchema,
+	IndexConditionSchema
+]);
+var VisibilityConditionSchema = z.lazy(() => z.union([
+	z.boolean(),
+	SingleConditionSchema,
+	z.array(SingleConditionSchema),
+	z.object({ $and: z.array(VisibilityConditionSchema) }),
+	z.object({ $or: z.array(VisibilityConditionSchema) })
+]));
+function resolveComparisonValue(value, ctx) {
+	if (typeof value === "object" && value !== null) {
+		if ("$state" in value && typeof value.$state === "string") return getByPath(ctx.stateModel, value.$state);
+	}
+	return value;
+}
+function isItemCondition(cond) {
+	return "$item" in cond;
+}
+function isIndexCondition(cond) {
+	return "$index" in cond;
+}
+function resolveConditionValue(cond, ctx) {
+	if (isIndexCondition(cond)) return ctx.repeatIndex;
+	if (isItemCondition(cond)) {
+		if (ctx.repeatItem === void 0) return void 0;
+		return cond.$item === "" ? ctx.repeatItem : getByPath(ctx.repeatItem, cond.$item);
+	}
+	return getByPath(ctx.stateModel, cond.$state);
+}
+function evaluateCondition(cond, ctx) {
+	const value = resolveConditionValue(cond, ctx);
+	let result;
+	if (cond.eq !== void 0) result = value === resolveComparisonValue(cond.eq, ctx);
+	else if (cond.neq !== void 0) result = value !== resolveComparisonValue(cond.neq, ctx);
+	else if (cond.gt !== void 0) {
+		const rhs = resolveComparisonValue(cond.gt, ctx);
+		result = typeof value === "number" && typeof rhs === "number" ? value > rhs : false;
+	} else if (cond.gte !== void 0) {
+		const rhs = resolveComparisonValue(cond.gte, ctx);
+		result = typeof value === "number" && typeof rhs === "number" ? value >= rhs : false;
+	} else if (cond.lt !== void 0) {
+		const rhs = resolveComparisonValue(cond.lt, ctx);
+		result = typeof value === "number" && typeof rhs === "number" ? value < rhs : false;
+	} else if (cond.lte !== void 0) {
+		const rhs = resolveComparisonValue(cond.lte, ctx);
+		result = typeof value === "number" && typeof rhs === "number" ? value <= rhs : false;
+	} else result = Boolean(value);
+	return cond.not === true ? !result : result;
+}
+function isAndCondition(condition) {
+	return typeof condition === "object" && condition !== null && !Array.isArray(condition) && "$and" in condition;
+}
+function isOrCondition(condition) {
+	return typeof condition === "object" && condition !== null && !Array.isArray(condition) && "$or" in condition;
+}
+function evaluateVisibility(condition, ctx) {
+	if (condition === void 0) return true;
+	if (typeof condition === "boolean") return condition;
+	if (Array.isArray(condition)) return condition.every((c) => evaluateCondition(c, ctx));
+	if (isAndCondition(condition)) return condition.$and.every((child) => evaluateVisibility(child, ctx));
+	if (isOrCondition(condition)) return condition.$or.some((child) => evaluateVisibility(child, ctx));
+	return evaluateCondition(condition, ctx);
+}
+function isStateExpression(value) {
+	return typeof value === "object" && value !== null && "$state" in value && typeof value.$state === "string";
+}
+function isItemExpression(value) {
+	return typeof value === "object" && value !== null && "$item" in value && typeof value.$item === "string";
+}
+function isIndexExpression(value) {
+	return typeof value === "object" && value !== null && "$index" in value && value.$index === true;
+}
+function isBindStateExpression(value) {
+	return typeof value === "object" && value !== null && "$bindState" in value && typeof value.$bindState === "string";
+}
+function isBindItemExpression(value) {
+	return typeof value === "object" && value !== null && "$bindItem" in value && typeof value.$bindItem === "string";
+}
+function isCondExpression(value) {
+	return typeof value === "object" && value !== null && "$cond" in value && "$then" in value && "$else" in value;
+}
+function isComputedExpression(value) {
+	return typeof value === "object" && value !== null && "$computed" in value && typeof value.$computed === "string";
+}
+function isTemplateExpression(value) {
+	return typeof value === "object" && value !== null && "$template" in value && typeof value.$template === "string";
+}
+var WARNED_COMPUTED_MAX = 100;
+var warnedComputedFns = /* @__PURE__ */ new Set();
+var WARNED_TEMPLATE_MAX = 100;
+var warnedTemplatePaths = /* @__PURE__ */ new Set();
+function resolveBindItemPath(itemPath, ctx) {
+	if (ctx.repeatBasePath == null) {
+		console.warn(`$bindItem used outside repeat scope: "${itemPath}"`);
+		return;
+	}
+	if (itemPath === "") return ctx.repeatBasePath;
+	return ctx.repeatBasePath + "/" + itemPath;
+}
+function resolvePropValue(value, ctx) {
+	if (value === null || value === void 0) return value;
+	if (isStateExpression(value)) return getByPath(ctx.stateModel, value.$state);
+	if (isItemExpression(value)) {
+		if (ctx.repeatItem === void 0) return void 0;
+		return value.$item === "" ? ctx.repeatItem : getByPath(ctx.repeatItem, value.$item);
+	}
+	if (isIndexExpression(value)) return ctx.repeatIndex;
+	if (isBindStateExpression(value)) return getByPath(ctx.stateModel, value.$bindState);
+	if (isBindItemExpression(value)) {
+		const resolvedPath = resolveBindItemPath(value.$bindItem, ctx);
+		if (resolvedPath === void 0) return void 0;
+		return getByPath(ctx.stateModel, resolvedPath);
+	}
+	if (isCondExpression(value)) return resolvePropValue(evaluateVisibility(value.$cond, ctx) ? value.$then : value.$else, ctx);
+	if (isComputedExpression(value)) {
+		const fn = ctx.functions?.[value.$computed];
+		if (!fn) {
+			if (!warnedComputedFns.has(value.$computed)) {
+				if (warnedComputedFns.size < WARNED_COMPUTED_MAX) warnedComputedFns.add(value.$computed);
+				console.warn(`Unknown $computed function: "${value.$computed}"`);
+			}
+			return;
+		}
+		const resolvedArgs = {};
+		if (value.args) for (const [key, arg] of Object.entries(value.args)) resolvedArgs[key] = resolvePropValue(arg, ctx);
+		return fn(resolvedArgs);
+	}
+	if (isTemplateExpression(value)) return value.$template.replace(/\$\{([^}]+)\}/g, (_match, rawPath) => {
+		let path = rawPath;
+		if (!path.startsWith("/")) {
+			if (!warnedTemplatePaths.has(path)) {
+				if (warnedTemplatePaths.size < WARNED_TEMPLATE_MAX) warnedTemplatePaths.add(path);
+				console.warn(`$template path "${path}" should be a JSON Pointer starting with "/". Automatically resolving as "/${path}".`);
+			}
+			path = "/" + path;
+		}
+		const resolved = getByPath(ctx.stateModel, path);
+		return resolved != null ? String(resolved) : "";
+	});
+	if (Array.isArray(value)) return value.map((item) => resolvePropValue(item, ctx));
+	if (typeof value === "object") {
+		const resolved = {};
+		for (const [key, val] of Object.entries(value)) resolved[key] = resolvePropValue(val, ctx);
+		return resolved;
+	}
+	return value;
+}
+function resolveElementProps(props, ctx) {
+	const resolved = {};
+	for (const [key, value] of Object.entries(props)) resolved[key] = resolvePropValue(value, ctx);
+	return resolved;
+}
+function resolveBindings(props, ctx) {
+	let bindings;
+	for (const [key, value] of Object.entries(props)) if (isBindStateExpression(value)) {
+		if (!bindings) bindings = {};
+		bindings[key] = value.$bindState;
+	} else if (isBindItemExpression(value)) {
+		const resolved = resolveBindItemPath(value.$bindItem, ctx);
+		if (resolved !== void 0) {
+			if (!bindings) bindings = {};
+			bindings[key] = resolved;
+		}
+	}
+	return bindings;
+}
+function resolveActionParam(value, ctx) {
+	if (isItemExpression(value)) return resolveBindItemPath(value.$item, ctx);
+	if (isIndexExpression(value)) return ctx.repeatIndex;
+	return resolvePropValue(value, ctx);
+}
+var ActionConfirmSchema = z.object({
+	title: z.string(),
+	message: z.string(),
+	confirmLabel: z.string().optional(),
+	cancelLabel: z.string().optional(),
+	variant: z.enum(["default", "danger"]).optional()
+});
+var ActionOnSuccessSchema = z.union([
+	z.object({ navigate: z.string() }),
+	z.object({ set: z.record(z.string(), z.unknown()) }),
+	z.object({ action: z.string() })
+]);
+var ActionOnErrorSchema = z.union([z.object({ set: z.record(z.string(), z.unknown()) }), z.object({ action: z.string() })]);
+z.object({
+	action: z.string(),
+	params: z.record(z.string(), DynamicValueSchema).optional(),
+	confirm: ActionConfirmSchema.optional(),
+	onSuccess: ActionOnSuccessSchema.optional(),
+	onError: ActionOnErrorSchema.optional(),
+	preventDefault: z.boolean().optional()
+});
+function resolveAction(binding, stateModel) {
+	const resolvedParams = {};
+	if (binding.params) for (const [key, value] of Object.entries(binding.params)) resolvedParams[key] = resolveDynamicValue(value, stateModel);
+	let confirm = binding.confirm;
+	if (confirm) confirm = {
+		...confirm,
+		message: interpolateString(confirm.message, stateModel),
+		title: interpolateString(confirm.title, stateModel)
+	};
+	return {
+		action: binding.action,
+		params: resolvedParams,
+		confirm,
+		onSuccess: binding.onSuccess,
+		onError: binding.onError
+	};
+}
+function interpolateString(template, stateModel) {
+	return template.replace(/\$\{([^}]+)\}/g, (_, path) => {
+		const value = resolveDynamicValue({ $state: path }, stateModel);
+		return String(value ?? "");
+	});
+}
+async function executeAction(ctx) {
+	const { action: action2, handler, setState, navigate, executeAction: executeAction2 } = ctx;
+	try {
+		await handler(action2.params);
+		if (action2.onSuccess) {
+			if ("navigate" in action2.onSuccess && navigate) navigate(action2.onSuccess.navigate);
+			else if ("set" in action2.onSuccess) for (const [path, value] of Object.entries(action2.onSuccess.set)) setState(path, value);
+			else if ("action" in action2.onSuccess && executeAction2) await executeAction2(action2.onSuccess.action);
+		}
+	} catch (error) {
+		if (action2.onError) {
+			if ("set" in action2.onError) for (const [path, value] of Object.entries(action2.onError.set)) setState(path, typeof value === "string" && value === "$error.message" ? error.message : value);
+			else if ("action" in action2.onError && executeAction2) await executeAction2(action2.onError.action);
+		} else throw error;
+	}
+}
+var ValidationCheckSchema = z.object({
+	type: z.string(),
+	args: z.record(z.string(), DynamicValueSchema).optional(),
+	message: z.string()
+});
+z.object({
+	checks: z.array(ValidationCheckSchema).optional(),
+	validateOn: z.enum([
+		"change",
+		"blur",
+		"submit"
+	]).optional(),
+	enabled: VisibilityConditionSchema.optional()
+});
+var matchesImpl = (value, args) => {
+	return value === args?.other;
+};
+var builtInValidationFunctions = {
+	required: (value) => {
+		if (value === null || value === void 0) return false;
+		if (typeof value === "string") return value.trim().length > 0;
+		if (Array.isArray(value)) return value.length > 0;
+		return true;
+	},
+	email: (value) => {
+		if (typeof value !== "string") return false;
+		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+	},
+	minLength: (value, args) => {
+		if (typeof value !== "string") return false;
+		const min = args?.min;
+		if (typeof min !== "number") return false;
+		return value.length >= min;
+	},
+	maxLength: (value, args) => {
+		if (typeof value !== "string") return false;
+		const max = args?.max;
+		if (typeof max !== "number") return false;
+		return value.length <= max;
+	},
+	pattern: (value, args) => {
+		if (typeof value !== "string") return false;
+		const pattern = args?.pattern;
+		if (typeof pattern !== "string") return false;
+		try {
+			return new RegExp(pattern).test(value);
+		} catch {
+			return false;
+		}
+	},
+	min: (value, args) => {
+		if (typeof value !== "number") return false;
+		const min = args?.min;
+		if (typeof min !== "number") return false;
+		return value >= min;
+	},
+	max: (value, args) => {
+		if (typeof value !== "number") return false;
+		const max = args?.max;
+		if (typeof max !== "number") return false;
+		return value <= max;
+	},
+	numeric: (value) => {
+		if (typeof value === "number") return !isNaN(value);
+		if (typeof value === "string") return !isNaN(parseFloat(value));
+		return false;
+	},
+	url: (value) => {
+		if (typeof value !== "string") return false;
+		try {
+			new URL(value);
+			return true;
+		} catch {
+			return false;
+		}
+	},
+	matches: matchesImpl,
+	equalTo: matchesImpl,
+	lessThan: (value, args) => {
+		const other = args?.other;
+		if (value == null || other == null || value === "" || other === "") return false;
+		if (typeof value === "number" && typeof other === "number") return value < other;
+		if (typeof value === "string" && typeof other === "string") return value < other;
+		const numVal = Number(value);
+		const numOther = Number(other);
+		if (!isNaN(numVal) && !isNaN(numOther)) return numVal < numOther;
+		return false;
+	},
+	greaterThan: (value, args) => {
+		const other = args?.other;
+		if (value == null || other == null || value === "" || other === "") return false;
+		if (typeof value === "number" && typeof other === "number") return value > other;
+		if (typeof value === "string" && typeof other === "string") return value > other;
+		const numVal = Number(value);
+		const numOther = Number(other);
+		if (!isNaN(numVal) && !isNaN(numOther)) return numVal > numOther;
+		return false;
+	},
+	requiredIf: (value, args) => {
+		if (!args?.field) return true;
+		if (value === null || value === void 0) return false;
+		if (typeof value === "string") return value.trim().length > 0;
+		if (Array.isArray(value)) return value.length > 0;
+		return true;
+	}
+};
+function runValidationCheck(check2, ctx) {
+	const { value, stateModel, customFunctions } = ctx;
+	const resolvedArgs = {};
+	if (check2.args) for (const [key, argValue] of Object.entries(check2.args)) resolvedArgs[key] = resolvePropValue(argValue, { stateModel });
+	const validationFn = builtInValidationFunctions[check2.type] ?? customFunctions?.[check2.type];
+	if (!validationFn) {
+		console.warn(`Unknown validation function: ${check2.type}`);
+		return {
+			type: check2.type,
+			valid: true,
+			message: check2.message
+		};
+	}
+	const valid = validationFn(value, resolvedArgs);
+	return {
+		type: check2.type,
+		valid,
+		message: check2.message
+	};
+}
+function runValidation(config, ctx) {
+	const checks = [];
+	const errors = [];
+	if (config.enabled) {
+		if (!evaluateVisibility(config.enabled, { stateModel: ctx.stateModel })) return {
+			valid: true,
+			errors: [],
+			checks: []
+		};
+	}
+	if (config.checks) for (const check2 of config.checks) {
+		const result = runValidationCheck(check2, ctx);
+		checks.push(result);
+		if (!result.valid) errors.push(result.message);
+	}
+	return {
+		valid: errors.length === 0,
+		errors,
+		checks
+	};
+}
+function validateSpec(spec, options = {}) {
+	const { checkOrphans = false } = options;
+	const issues = [];
+	if (!spec.root) {
+		issues.push({
+			severity: "error",
+			message: "Spec has no root element defined.",
+			code: "missing_root"
+		});
+		return {
+			valid: false,
+			issues
+		};
+	}
+	if (!spec.elements[spec.root]) issues.push({
+		severity: "error",
+		message: `Root element "${spec.root}" not found in elements map.`,
+		code: "root_not_found"
+	});
+	if (Object.keys(spec.elements).length === 0) {
+		issues.push({
+			severity: "error",
+			message: "Spec has no elements.",
+			code: "empty_spec"
+		});
+		return {
+			valid: false,
+			issues
+		};
+	}
+	for (const [key, element] of Object.entries(spec.elements)) {
+		if (element.children) {
+			for (const childKey of element.children) if (!spec.elements[childKey]) issues.push({
+				severity: "error",
+				message: `Element "${key}" references child "${childKey}" which does not exist in the elements map.`,
+				elementKey: key,
+				code: "missing_child"
+			});
+		}
+		const props = element.props;
+		if (props && "visible" in props && props.visible !== void 0) issues.push({
+			severity: "error",
+			message: `Element "${key}" has "visible" inside "props". It should be a top-level field on the element (sibling of type/props/children).`,
+			elementKey: key,
+			code: "visible_in_props"
+		});
+		if (props && "on" in props && props.on !== void 0) issues.push({
+			severity: "error",
+			message: `Element "${key}" has "on" inside "props". It should be a top-level field on the element (sibling of type/props/children).`,
+			elementKey: key,
+			code: "on_in_props"
+		});
+		if (props && "repeat" in props && props.repeat !== void 0) issues.push({
+			severity: "error",
+			message: `Element "${key}" has "repeat" inside "props". It should be a top-level field on the element (sibling of type/props/children).`,
+			elementKey: key,
+			code: "repeat_in_props"
+		});
+		if (props && "watch" in props && props.watch !== void 0) issues.push({
+			severity: "error",
+			message: `Element "${key}" has "watch" inside "props". It should be a top-level field on the element (sibling of type/props/children).`,
+			elementKey: key,
+			code: "watch_in_props"
+		});
+	}
+	if (checkOrphans) {
+		const reachable = /* @__PURE__ */ new Set();
+		const walk = (key) => {
+			if (reachable.has(key)) return;
+			reachable.add(key);
+			const el = spec.elements[key];
+			if (el?.children) {
+				for (const childKey of el.children) if (spec.elements[childKey]) walk(childKey);
+			}
+		};
+		if (spec.elements[spec.root]) walk(spec.root);
+		for (const key of Object.keys(spec.elements)) if (!reachable.has(key)) issues.push({
+			severity: "warning",
+			message: `Element "${key}" is not reachable from root "${spec.root}".`,
+			elementKey: key,
+			code: "orphaned_element"
+		});
+	}
+	return {
+		valid: !issues.some((i) => i.severity === "error"),
+		issues
+	};
+}
+function autoFixSpec(spec) {
+	const fixes = [];
+	const fixedElements = {};
+	for (const [key, element] of Object.entries(spec.elements)) {
+		const props = element.props;
+		let fixed = element;
+		if (props && "visible" in props && props.visible !== void 0) {
+			const { visible, ...restProps } = fixed.props;
+			fixed = {
+				...fixed,
+				props: restProps,
+				visible
+			};
+			fixes.push(`Moved "visible" from props to element level on "${key}".`);
+		}
+		let currentProps = fixed.props;
+		if (currentProps && "on" in currentProps && currentProps.on !== void 0) {
+			const { on, ...restProps } = currentProps;
+			fixed = {
+				...fixed,
+				props: restProps,
+				on
+			};
+			fixes.push(`Moved "on" from props to element level on "${key}".`);
+		}
+		currentProps = fixed.props;
+		if (currentProps && "repeat" in currentProps && currentProps.repeat !== void 0) {
+			const { repeat, ...restProps } = currentProps;
+			fixed = {
+				...fixed,
+				props: restProps,
+				repeat
+			};
+			fixes.push(`Moved "repeat" from props to element level on "${key}".`);
+		}
+		currentProps = fixed.props;
+		if (currentProps && "watch" in currentProps && currentProps.watch !== void 0) {
+			const { watch, ...restProps } = currentProps;
+			fixed = {
+				...fixed,
+				props: restProps,
+				watch
+			};
+			fixes.push(`Moved "watch" from props to element level on "${key}".`);
+		}
+		fixedElements[key] = fixed;
+	}
+	return {
+		spec: {
+			root: spec.root,
+			elements: fixedElements,
+			state: spec.state
+		},
+		fixes
+	};
+}
+var DEFAULT_MODES = ["patch"];
+function normalizeModes(config) {
+	if (!config?.modes?.length) return DEFAULT_MODES;
+	return config.modes;
+}
+function jsonPatchInstructions() {
+	return [
+		"PATCH MODE (RFC 6902 JSON Patch):",
+		"Output one JSON object per line. Each line is a patch operation.",
+		"- Add: {\"op\":\"add\",\"path\":\"/elements/new-key\",\"value\":{...}}",
+		"- Replace: {\"op\":\"replace\",\"path\":\"/elements/existing-key\",\"value\":{...}}",
+		"- Remove: {\"op\":\"remove\",\"path\":\"/elements/old-key\"}",
+		"Only output patches for what needs to change."
+	].join("\n");
+}
+function jsonMergeInstructions() {
+	return [
+		"MERGE MODE (RFC 7396 JSON Merge Patch):",
+		"Output a single JSON object on one line with __json_edit set to true.",
+		"Include only the keys that changed. Unmentioned keys are preserved.",
+		"Set a key to null to delete it.",
+		"",
+		"Example (update a title and add an element):",
+		"{\"__json_edit\":true,\"elements\":{\"main\":{\"props\":{\"title\":\"New Title\"}},\"new-el\":{\"type\":\"Card\",\"props\":{},\"children\":[]}}}",
+		"",
+		"Example (delete an element):",
+		"{\"__json_edit\":true,\"elements\":{\"old-widget\":null}}"
+	].join("\n");
+}
+function jsonDiffInstructions() {
+	return [
+		"DIFF MODE (unified diff):",
+		"Output a unified diff inside a ```diff code fence.",
+		"The diff applies against the JSON-serialized current spec.",
+		"",
+		"Example:",
+		"```diff",
+		"--- a/spec.json",
+		"+++ b/spec.json",
+		"@@ -3,1 +3,1 @@",
+		"-      \"title\": \"Login\"",
+		"+      \"title\": \"Welcome Back\"",
+		"```"
+	].join("\n");
+}
+function yamlPatchInstructions() {
+	return [
+		"PATCH MODE (RFC 6902 JSON Patch):",
+		"Output RFC 6902 JSON Patch lines inside a ```yaml-patch code fence.",
+		"Each line is one JSON patch operation.",
+		"",
+		"Example:",
+		"```yaml-patch",
+		"{\"op\":\"replace\",\"path\":\"/elements/main/props/title\",\"value\":\"New Title\"}",
+		"{\"op\":\"add\",\"path\":\"/elements/new-el\",\"value\":{\"type\":\"Card\",\"props\":{},\"children\":[]}}",
+		"```"
+	].join("\n");
+}
+function yamlMergeInstructions() {
+	return [
+		"MERGE MODE (RFC 7396 JSON Merge Patch):",
+		"Output only the changed parts in a ```yaml-edit code fence.",
+		"Uses deep merge semantics: only keys you include are updated. Unmentioned elements and props are preserved.",
+		"Set a key to null to delete it.",
+		"",
+		"Example edit (update title, add a new element):",
+		"```yaml-edit",
+		"elements:",
+		"  main:",
+		"    props:",
+		"      title: Updated Title",
+		"  new-chart:",
+		"    type: Card",
+		"    props: {}",
+		"    children: []",
+		"```",
+		"",
+		"Example deletion:",
+		"```yaml-edit",
+		"elements:",
+		"  old-widget: null",
+		"```"
+	].join("\n");
+}
+function yamlDiffInstructions() {
+	return [
+		"DIFF MODE (unified diff):",
+		"Output a unified diff inside a ```diff code fence.",
+		"The diff applies against the YAML-serialized current spec.",
+		"",
+		"Example:",
+		"```diff",
+		"--- a/spec.yaml",
+		"+++ b/spec.yaml",
+		"@@ -6,1 +6,1 @@",
+		"-      title: Login",
+		"+      title: Welcome Back",
+		"```"
+	].join("\n");
+}
+function modeSelectionGuidance(modes) {
+	if (modes.length === 1) return "";
+	const parts = ["Choose the best edit strategy for the requested change:"];
+	if (modes.includes("patch")) parts.push("- PATCH: best for precise, targeted single-field updates");
+	if (modes.includes("merge")) parts.push("- MERGE: best for structural changes (add/remove elements, reparent children, update multiple props at once)");
+	if (modes.includes("diff")) parts.push("- DIFF: best for small text-level changes when you can see the exact lines to change");
+	return parts.join("\n");
+}
+function buildEditInstructions(config, format) {
+	const modes = normalizeModes(config);
+	const sections = [];
+	sections.push("EDITING EXISTING SPECS:");
+	sections.push("");
+	const guidance = modeSelectionGuidance(modes);
+	if (guidance) {
+		sections.push(guidance);
+		sections.push("");
+	}
+	for (const mode of modes) {
+		if (format === "json") switch (mode) {
+			case "patch":
+				sections.push(jsonPatchInstructions());
+				break;
+			case "merge":
+				sections.push(jsonMergeInstructions());
+				break;
+			case "diff":
+				sections.push(jsonDiffInstructions());
+				break;
+		}
+		else switch (mode) {
+			case "patch":
+				sections.push(yamlPatchInstructions());
+				break;
+			case "merge":
+				sections.push(yamlMergeInstructions());
+				break;
+			case "diff":
+				sections.push(yamlDiffInstructions());
+				break;
+		}
+		sections.push("");
+	}
+	return sections.join("\n");
+}
+function addLineNumbers(text) {
+	const lines = text.split("\n");
+	const width = String(lines.length).length;
+	return lines.map((line, i) => `${String(i + 1).padStart(width)}| ${line}`).join("\n");
+}
+function isNonEmptySpec(spec) {
+	if (!spec || typeof spec !== "object") return false;
+	const s = spec;
+	return typeof s.root === "string" && typeof s.elements === "object" && s.elements !== null && Object.keys(s.elements).length > 0;
+}
+function buildEditUserPrompt(options) {
+	const { prompt, currentSpec, config, format, maxPromptLength, serializer } = options;
+	let userText = String(prompt || "");
+	if (maxPromptLength !== void 0 && maxPromptLength > 0) userText = userText.slice(0, maxPromptLength);
+	if (!isNonEmptySpec(currentSpec)) return userText;
+	const modes = normalizeModes(config);
+	const showLineNumbers = modes.includes("diff");
+	const specText = (serializer ?? ((s) => JSON.stringify(s, null, 2)))(currentSpec);
+	const parts = [];
+	if (showLineNumbers) {
+		parts.push("CURRENT UI STATE (line numbers for reference):");
+		parts.push("```");
+		parts.push(addLineNumbers(specText));
+		parts.push("```");
+	} else {
+		parts.push("CURRENT UI STATE (already loaded, DO NOT recreate existing elements):");
+		parts.push("```");
+		parts.push(specText);
+		parts.push("```");
+	}
+	parts.push("");
+	parts.push(`USER REQUEST: ${userText}`);
+	parts.push("");
+	if (modes.length === 1) switch (modes[0]) {
+		case "patch":
+			parts.push(format === "yaml" ? "Output ONLY the patches in a ```yaml-patch fence." : "Output ONLY the JSON Patch lines needed for the change.");
+			break;
+		case "merge":
+			parts.push(format === "yaml" ? "Output ONLY the changes in a ```yaml-edit fence. Include only keys that need to change." : "Output ONLY a single JSON merge line with __json_edit set to true. Include only keys that need to change.");
+			break;
+		case "diff":
+			parts.push("Output ONLY the unified diff in a ```diff fence.");
+			break;
+	}
+	else {
+		const modeNames = modes.map((m) => {
+			switch (m) {
+				case "patch": return format === "yaml" ? "```yaml-patch fence" : "JSON Patch lines";
+				case "merge": return format === "yaml" ? "```yaml-edit fence" : "JSON merge line (__json_edit)";
+				case "diff": return "```diff fence";
+			}
+		});
+		parts.push(`Choose the best edit strategy and output using one of: ${modeNames.join(", ")}`);
+	}
+	return parts.join("\n");
+}
+function createBuilder() {
+	return {
+		string: () => ({ kind: "string" }),
+		number: () => ({ kind: "number" }),
+		boolean: () => ({ kind: "boolean" }),
+		array: (item) => ({
+			kind: "array",
+			inner: item
+		}),
+		object: (shape) => ({
+			kind: "object",
+			inner: shape
+		}),
+		record: (value) => ({
+			kind: "record",
+			inner: value
+		}),
+		any: () => ({ kind: "any" }),
+		zod: () => ({ kind: "zod" }),
+		ref: (path) => ({
+			kind: "ref",
+			inner: path
+		}),
+		propsOf: (path) => ({
+			kind: "propsOf",
+			inner: path
+		}),
+		map: (entryShape) => ({
+			kind: "map",
+			inner: entryShape
+		}),
+		optional: () => ({ optional: true })
+	};
+}
+function defineSchema(builder, options) {
+	return {
+		definition: builder(createBuilder()),
+		promptTemplate: options?.promptTemplate,
+		defaultRules: options?.defaultRules,
+		builtInActions: options?.builtInActions,
+		createCatalog(catalog) {
+			return createCatalogFromSchema(this, catalog);
+		}
+	};
+}
+function createCatalogFromSchema(schema, catalogData) {
+	const components = catalogData.components;
+	const actions = catalogData.actions;
+	const componentNames = components ? Object.keys(components) : [];
+	const actionNames = actions ? Object.keys(actions) : [];
+	const zodSchema = buildZodSchemaFromDefinition(schema.definition, catalogData);
+	return {
+		schema,
+		data: catalogData,
+		componentNames,
+		actionNames,
+		prompt(options = {}) {
+			return generatePrompt(this, options);
+		},
+		jsonSchema(options = {}) {
+			return zodToJsonSchema(zodSchema, options.strict ?? false);
+		},
+		validate(spec) {
+			const result = zodSchema.safeParse(spec);
+			if (result.success) return {
+				success: true,
+				data: result.data
+			};
+			return {
+				success: false,
+				error: result.error
+			};
+		},
+		zodSchema() {
+			return zodSchema;
+		},
+		get _specType() {
+			throw new Error("_specType is only for type inference");
+		}
+	};
+}
+function buildZodSchemaFromDefinition(definition, catalogData) {
+	return buildZodType(definition.spec, catalogData);
+}
+function buildZodType(schemaType, catalogData) {
+	switch (schemaType.kind) {
+		case "string": return z.string();
+		case "number": return z.number();
+		case "boolean": return z.boolean();
+		case "any": return z.any();
+		case "array": {
+			const inner = buildZodType(schemaType.inner, catalogData);
+			return z.array(inner);
+		}
+		case "object": {
+			const shape = schemaType.inner;
+			const zodShape = {};
+			for (const [key, value] of Object.entries(shape)) {
+				let zodType = buildZodType(value, catalogData);
+				if (value.optional) zodType = zodType.optional();
+				zodShape[key] = zodType;
+			}
+			return z.object(zodShape);
+		}
+		case "record": {
+			const inner = buildZodType(schemaType.inner, catalogData);
+			return z.record(z.string(), inner);
+		}
+		case "ref": {
+			const path = schemaType.inner;
+			const keys = getKeysFromPath(path, catalogData);
+			if (keys.length === 0) return z.string();
+			if (keys.length === 1) return z.literal(keys[0]);
+			return z.enum(keys);
+		}
+		case "propsOf": {
+			const path = schemaType.inner;
+			const propsSchemas = getPropsFromPath(path, catalogData);
+			if (propsSchemas.length === 0) return z.record(z.string(), z.unknown());
+			if (propsSchemas.length === 1) return propsSchemas[0];
+			return z.record(z.string(), z.unknown());
+		}
+		default: return z.unknown();
+	}
+}
+function getKeysFromPath(path, catalogData) {
+	const parts = path.split(".");
+	let current = { catalog: catalogData };
+	for (const part of parts) if (current && typeof current === "object") current = current[part];
+	else return [];
+	if (current && typeof current === "object") return Object.keys(current);
+	return [];
+}
+function getPropsFromPath(path, catalogData) {
+	const parts = path.split(".");
+	let current = { catalog: catalogData };
+	for (const part of parts) if (current && typeof current === "object") current = current[part];
+	else return [];
+	if (current && typeof current === "object") return Object.values(current).map((entry) => entry.props).filter((props) => props !== void 0);
+	return [];
+}
+function generatePrompt(catalog, options) {
+	if (catalog.schema.promptTemplate) {
+		const context = {
+			catalog: catalog.data,
+			componentNames: catalog.componentNames,
+			actionNames: catalog.actionNames,
+			options,
+			formatZodType
+		};
+		return catalog.schema.promptTemplate(context);
+	}
+	const { system = "You are a UI generator that outputs JSON.", customRules = [], mode: rawMode = "standalone" } = options;
+	const mode = rawMode === "chat" ? (console.warn("[json-render] mode \"chat\" is deprecated, use \"inline\" instead"), "inline") : rawMode === "generate" ? (console.warn("[json-render] mode \"generate\" is deprecated, use \"standalone\" instead"), "standalone") : rawMode;
+	const lines = [];
+	lines.push(system);
+	lines.push("");
+	if (mode === "inline") {
+		lines.push("OUTPUT FORMAT (text + JSONL, RFC 6902 JSON Patch):");
+		lines.push("You respond conversationally. When generating UI, first write a brief explanation (1-3 sentences), then output JSONL patch lines wrapped in a ```spec code fence.");
+		lines.push("The JSONL lines use RFC 6902 JSON Patch operations to build a UI tree. Always wrap them in a ```spec fence block:");
+		lines.push("  ```spec");
+		lines.push("  {\"op\":\"add\",\"path\":\"/root\",\"value\":\"main\"}");
+		lines.push("  {\"op\":\"add\",\"path\":\"/elements/main\",\"value\":{\"type\":\"Card\",\"props\":{\"title\":\"Hello\"},\"children\":[]}}");
+		lines.push("  ```");
+		lines.push("If the user's message does not require a UI (e.g. a greeting or clarifying question), respond with text only — no JSONL.");
+	} else {
+		lines.push("OUTPUT FORMAT (JSONL, RFC 6902 JSON Patch):");
+		lines.push("Output JSONL (one JSON object per line) using RFC 6902 JSON Patch operations to build a UI tree.");
+	}
+	lines.push("Each line is a JSON patch operation (add, remove, replace). Start with /root, then stream /elements and /state patches interleaved so the UI fills in progressively as it streams.");
+	lines.push("");
+	lines.push("Example output (each line is a separate JSON object):");
+	lines.push("");
+	const allComponents = catalog.data.components;
+	const cn = catalog.componentNames;
+	const comp1 = cn[0] || "Component";
+	const comp2 = cn.length > 1 ? cn[1] : comp1;
+	const comp1Def = allComponents?.[comp1];
+	const comp2Def = allComponents?.[comp2];
+	const comp1Props = comp1Def ? getExampleProps(comp1Def) : {};
+	const comp2Props = comp2Def ? getExampleProps(comp2Def) : {};
+	const dynamicPropName = comp2Def?.props ? findFirstStringProp(comp2Def.props) : null;
+	const dynamicProps = dynamicPropName ? {
+		...comp2Props,
+		[dynamicPropName]: { $item: "title" }
+	} : comp2Props;
+	const exampleOutput = [
+		JSON.stringify({
+			op: "add",
+			path: "/root",
+			value: "main"
+		}),
+		JSON.stringify({
+			op: "add",
+			path: "/elements/main",
+			value: {
+				type: comp1,
+				props: comp1Props,
+				children: ["child-1", "list"]
+			}
+		}),
+		JSON.stringify({
+			op: "add",
+			path: "/elements/child-1",
+			value: {
+				type: comp2,
+				props: comp2Props,
+				children: []
+			}
+		}),
+		JSON.stringify({
+			op: "add",
+			path: "/elements/list",
+			value: {
+				type: comp1,
+				props: comp1Props,
+				repeat: {
+					statePath: "/items",
+					key: "id"
+				},
+				children: ["item"]
+			}
+		}),
+		JSON.stringify({
+			op: "add",
+			path: "/elements/item",
+			value: {
+				type: comp2,
+				props: dynamicProps,
+				children: []
+			}
+		}),
+		JSON.stringify({
+			op: "add",
+			path: "/state/items",
+			value: []
+		}),
+		JSON.stringify({
+			op: "add",
+			path: "/state/items/0",
+			value: {
+				id: "1",
+				title: "First Item"
+			}
+		}),
+		JSON.stringify({
+			op: "add",
+			path: "/state/items/1",
+			value: {
+				id: "2",
+				title: "Second Item"
+			}
+		})
+	].join("\n");
+	lines.push(`${exampleOutput}
+
+Note: state patches appear right after the elements that use them, so the UI fills in as it streams. ONLY use component types from the AVAILABLE COMPONENTS list below.`);
+	lines.push("");
+	lines.push("INITIAL STATE:");
+	lines.push("Specs include a /state field to seed the state model. Components with { $bindState } or { $bindItem } read from and write to this state, and $state expressions read from it.");
+	lines.push("CRITICAL: You MUST include state patches whenever your UI displays data via $state, $bindState, $bindItem, $item, or $index expressions, or uses repeat to iterate over arrays. Without state, these references resolve to nothing and repeat lists render zero items.");
+	lines.push("Output state patches right after the elements that reference them, so the UI fills in progressively as it streams.");
+	lines.push("Stream state progressively - output one patch per array item instead of one giant blob:");
+	lines.push("  For arrays: {\"op\":\"add\",\"path\":\"/state/posts/0\",\"value\":{\"id\":\"1\",\"title\":\"First Post\",...}} then /state/posts/1, /state/posts/2, etc.");
+	lines.push("  For scalars: {\"op\":\"add\",\"path\":\"/state/newTodoText\",\"value\":\"\"}");
+	lines.push("  Initialize the array first if needed: {\"op\":\"add\",\"path\":\"/state/posts\",\"value\":[]}");
+	lines.push("When content comes from the state model, use { \"$state\": \"/some/path\" } dynamic props to display it instead of hardcoding the same value in both state and props. The state model is the single source of truth.");
+	lines.push("Include realistic sample data in state. For blogs: 3-4 posts with titles, excerpts, authors, dates. For product lists: 3-5 items with names, prices, descriptions. Never leave arrays empty.");
+	lines.push("");
+	lines.push("DYNAMIC LISTS (repeat field):");
+	lines.push("Any element can have a top-level \"repeat\" field to render its children once per item in a state array: { \"repeat\": { \"statePath\": \"/arrayPath\", \"key\": \"id\" } }.");
+	lines.push("The element itself renders once (as the container), and its children are expanded once per array item. \"statePath\" is the state array path. \"key\" is an optional field name on each item for stable React keys.");
+	lines.push(`Example: ${JSON.stringify({
+		type: comp1,
+		props: comp1Props,
+		repeat: {
+			statePath: "/todos",
+			key: "id"
+		},
+		children: ["todo-item"]
+	})}`);
+	lines.push("Inside children of a repeated element, use { \"$item\": \"field\" } to read a field from the current item, and { \"$index\": true } to get the current array index. For two-way binding to an item field use { \"$bindItem\": \"completed\" } on the appropriate prop.");
+	lines.push("ALWAYS use the repeat field for lists backed by state arrays. NEVER hardcode individual elements for each array item.");
+	lines.push("IMPORTANT: \"repeat\" is a top-level field on the element (sibling of type/props/children), NOT inside props.");
+	lines.push("");
+	lines.push("ARRAY STATE ACTIONS:");
+	lines.push("Use action \"pushState\" to append items to arrays. Params: { statePath: \"/arrayPath\", value: { ...item }, clearStatePath: \"/inputPath\" }.");
+	lines.push("Values inside pushState can contain { \"$state\": \"/statePath\" } references to read current state (e.g. the text from an input field).");
+	lines.push("Use \"$id\" inside a pushState value to auto-generate a unique ID.");
+	lines.push("Example: on: { \"press\": { \"action\": \"pushState\", \"params\": { \"statePath\": \"/todos\", \"value\": { \"id\": \"$id\", \"title\": { \"$state\": \"/newTodoText\" }, \"completed\": false }, \"clearStatePath\": \"/newTodoText\" } } }");
+	lines.push(`Use action "removeState" to remove items from arrays by index. Params: { statePath: "/arrayPath", index: N }. Inside a repeated element's children, use { "$index": true } for the current item index. Action params support the same expressions as props: { "$item": "field" } resolves to the absolute state path, { "$index": true } resolves to the index number, and { "$state": "/path" } reads a value from state.`);
+	lines.push("For lists where users can add/remove items (todos, carts, etc.), use pushState and removeState instead of hardcoding with setState.");
+	lines.push("");
+	lines.push("IMPORTANT: State paths use RFC 6901 JSON Pointer syntax (e.g. \"/todos/0/title\"). Do NOT use JavaScript-style dot notation (e.g. \"/todos.length\" is WRONG). To generate unique IDs for new items, use \"$id\" instead of trying to read array length.");
+	lines.push("");
+	const components = allComponents;
+	if (components) {
+		lines.push(`AVAILABLE COMPONENTS (${catalog.componentNames.length}):`);
+		lines.push("");
+		for (const [name, def] of Object.entries(components)) {
+			const propsStr = def.props ? formatZodType(def.props) : "{}";
+			const childrenStr = def.slots && def.slots.length > 0 ? " [accepts children]" : "";
+			const eventsStr = def.events && def.events.length > 0 ? ` [events: ${def.events.join(", ")}]` : "";
+			const descStr = def.description ? ` - ${def.description}` : "";
+			lines.push(`- ${name}: ${propsStr}${descStr}${childrenStr}${eventsStr}`);
+		}
+		lines.push("");
+	}
+	const actions = catalog.data.actions;
+	const builtInActions = catalog.schema.builtInActions ?? [];
+	const hasCustomActions = actions && catalog.actionNames.length > 0;
+	const hasBuiltInActions = builtInActions.length > 0;
+	if (hasCustomActions || hasBuiltInActions) {
+		lines.push("AVAILABLE ACTIONS:");
+		lines.push("");
+		for (const action2 of builtInActions) lines.push(`- ${action2.name}: ${action2.description} [built-in]`);
+		if (hasCustomActions) for (const [name, def] of Object.entries(actions)) lines.push(`- ${name}${def.description ? `: ${def.description}` : ""}`);
+		lines.push("");
+	}
+	lines.push("EVENTS (the `on` field):");
+	lines.push("Elements can have an optional `on` field to bind events to actions. The `on` field is a top-level field on the element (sibling of type/props/children), NOT inside props.");
+	lines.push("Each key in `on` is an event name (from the component's supported events), and the value is an action binding: `{ \"action\": \"<actionName>\", \"params\": { ... } }`.");
+	lines.push("");
+	lines.push("Example:");
+	lines.push(`  ${JSON.stringify({
+		type: comp1,
+		props: comp1Props,
+		on: { press: {
+			action: "setState",
+			params: {
+				statePath: "/saved",
+				value: true
+			}
+		} },
+		children: []
+	})}`);
+	lines.push("");
+	lines.push("Action params can use dynamic references to read from state: { \"$state\": \"/statePath\" }.");
+	lines.push("IMPORTANT: Do NOT put action/actionParams inside props. Always use the `on` field for event bindings.");
+	lines.push("");
+	lines.push("VISIBILITY CONDITIONS:");
+	lines.push("Elements can have an optional `visible` field to conditionally show/hide based on state. IMPORTANT: `visible` is a top-level field on the element object (sibling of type/props/children), NOT inside props.");
+	lines.push(`Correct: ${JSON.stringify({
+		type: comp1,
+		props: comp1Props,
+		visible: {
+			$state: "/activeTab",
+			eq: "home"
+		},
+		children: ["..."]
+	})}`);
+	lines.push("- `{ \"$state\": \"/path\" }` - visible when state at path is truthy");
+	lines.push("- `{ \"$state\": \"/path\", \"not\": true }` - visible when state at path is falsy");
+	lines.push("- `{ \"$state\": \"/path\", \"eq\": \"value\" }` - visible when state equals value");
+	lines.push("- `{ \"$state\": \"/path\", \"neq\": \"value\" }` - visible when state does not equal value");
+	lines.push("- `{ \"$state\": \"/path\", \"gt\": N }` / `gte` / `lt` / `lte` - numeric comparisons");
+	lines.push("- Use ONE operator per condition (eq, neq, gt, gte, lt, lte). Do not combine multiple operators.");
+	lines.push("- Any condition can add `\"not\": true` to invert its result");
+	lines.push("- `[condition, condition]` - all conditions must be true (implicit AND)");
+	lines.push("- `{ \"$and\": [condition, condition] }` - explicit AND (use when nesting inside $or)");
+	lines.push("- `{ \"$or\": [condition, condition] }` - at least one must be true (OR)");
+	lines.push("- `true` / `false` - always visible/hidden");
+	lines.push("");
+	lines.push("Use a component with on.press bound to setState to update state and drive visibility.");
+	lines.push(`Example: A ${comp1} with on: { "press": { "action": "setState", "params": { "statePath": "/activeTab", "value": "home" } } } sets state, then a container with visible: { "$state": "/activeTab", "eq": "home" } shows only when that tab is active.`);
+	lines.push("");
+	lines.push("For tab patterns where the first/default tab should be visible when no tab is selected yet, use $or to handle both cases: visible: { \"$or\": [{ \"$state\": \"/activeTab\", \"eq\": \"home\" }, { \"$state\": \"/activeTab\", \"not\": true }] }. This ensures the first tab is visible both when explicitly selected AND when /activeTab is not yet set.");
+	lines.push("");
+	lines.push("DYNAMIC PROPS:");
+	lines.push("Any prop value can be a dynamic expression that resolves based on state. Three forms are supported:");
+	lines.push("");
+	lines.push("1. Read-only state: `{ \"$state\": \"/statePath\" }` - resolves to the value at that state path (one-way read).");
+	lines.push("   Example: `\"color\": { \"$state\": \"/theme/primary\" }` reads the color from state.");
+	lines.push("");
+	lines.push("2. Two-way binding: `{ \"$bindState\": \"/statePath\" }` - resolves to the value at the state path AND enables write-back. Use on form input props (value, checked, pressed, etc.).");
+	lines.push("   Example: `\"value\": { \"$bindState\": \"/form/email\" }` binds the input value to /form/email.");
+	lines.push("   Inside repeat scopes: `\"checked\": { \"$bindItem\": \"completed\" }` binds to the current item's completed field.");
+	lines.push("");
+	lines.push("3. Conditional: `{ \"$cond\": <condition>, \"$then\": <value>, \"$else\": <value> }` - evaluates the condition (same syntax as visibility conditions) and picks the matching value.");
+	lines.push("   Example: `\"color\": { \"$cond\": { \"$state\": \"/activeTab\", \"eq\": \"home\" }, \"$then\": \"#007AFF\", \"$else\": \"#8E8E93\" }`");
+	lines.push("");
+	lines.push("Use $bindState for form inputs (text fields, checkboxes, selects, sliders, etc.) and $state for read-only data display. Inside repeat scopes, use $bindItem for form inputs bound to the current item. Use dynamic props instead of duplicating elements with opposing visible conditions when only prop values differ.");
+	lines.push("");
+	lines.push("4. Template: `{ \"$template\": \"Hello, ${/name}!\" }` - interpolates `${/path}` references in the string with values from the state model.");
+	lines.push("   Example: `\"label\": { \"$template\": \"Items: ${/cart/count} | Total: ${/cart/total}\" }` renders \"Items: 3 | Total: 42.00\" when /cart/count is 3 and /cart/total is 42.00.");
+	lines.push("");
+	const catalogFunctions = catalog.data.functions;
+	if (catalogFunctions && Object.keys(catalogFunctions).length > 0) {
+		lines.push("5. Computed: `{ \"$computed\": \"<functionName>\", \"args\": { \"key\": <expression> } }` - calls a registered function with resolved args and returns the result.");
+		lines.push("   Example: `\"value\": { \"$computed\": \"fullName\", \"args\": { \"first\": { \"$state\": \"/form/firstName\" }, \"last\": { \"$state\": \"/form/lastName\" } } }`");
+		lines.push("   Available functions:");
+		for (const name of Object.keys(catalogFunctions)) lines.push(`   - ${name}`);
+		lines.push("");
+	}
+	if (allComponents ? Object.entries(allComponents).some(([, def]) => {
+		if (!def.props) return false;
+		return formatZodType(def.props).includes("checks");
+	}) : false) {
+		lines.push("VALIDATION:");
+		lines.push("Form components that accept a `checks` prop support client-side validation.");
+		lines.push("Each check is an object: { \"type\": \"<name>\", \"message\": \"...\", \"args\": { ... } }");
+		lines.push("");
+		lines.push("Built-in validation types:");
+		lines.push("  - required — value must be non-empty");
+		lines.push("  - email — valid email format");
+		lines.push("  - minLength — minimum string length (args: { \"min\": N })");
+		lines.push("  - maxLength — maximum string length (args: { \"max\": N })");
+		lines.push("  - pattern — match a regex (args: { \"pattern\": \"regex\" })");
+		lines.push("  - min — minimum numeric value (args: { \"min\": N })");
+		lines.push("  - max — maximum numeric value (args: { \"max\": N })");
+		lines.push("  - numeric — value must be a number");
+		lines.push("  - url — valid URL format");
+		lines.push("  - matches — must equal another field (args: { \"other\": { \"$state\": \"/path\" } })");
+		lines.push("  - equalTo — alias for matches (args: { \"other\": { \"$state\": \"/path\" } })");
+		lines.push("  - lessThan — value must be less than another field (args: { \"other\": { \"$state\": \"/path\" } })");
+		lines.push("  - greaterThan — value must be greater than another field (args: { \"other\": { \"$state\": \"/path\" } })");
+		lines.push("  - requiredIf — required only when another field is truthy (args: { \"field\": { \"$state\": \"/path\" } })");
+		lines.push("");
+		lines.push("Example:");
+		lines.push("  \"checks\": [{ \"type\": \"required\", \"message\": \"Email is required\" }, { \"type\": \"email\", \"message\": \"Invalid email\" }]");
+		lines.push("");
+		lines.push("IMPORTANT: When using checks, the component must also have a { $bindState } or { $bindItem } on its value/checked prop for two-way binding.");
+		lines.push("Always include validation checks on form inputs for a good user experience (e.g. required, email, minLength).");
+		lines.push("");
+	}
+	if (hasCustomActions || hasBuiltInActions) {
+		lines.push("STATE WATCHERS:");
+		lines.push("Elements can have an optional `watch` field to react to state changes and trigger actions. The `watch` field is a top-level field on the element (sibling of type/props/children), NOT inside props.");
+		lines.push("Maps state paths (JSON Pointers) to action bindings. When the value at a watched path changes, the bound actions fire automatically.");
+		lines.push("");
+		lines.push("Example (cascading select — country changes trigger city loading):");
+		lines.push(`  ${JSON.stringify({
+			type: "Select",
+			props: {
+				value: { $bindState: "/form/country" },
+				options: [
+					"US",
+					"Canada",
+					"UK"
+				]
+			},
+			watch: { "/form/country": {
+				action: "loadCities",
+				params: { country: { $state: "/form/country" } }
+			} },
+			children: []
+		})}`);
+		lines.push("");
+		lines.push("Use `watch` for cascading dependencies where changing one field should trigger side effects (loading data, resetting dependent fields, computing derived values).");
+		lines.push("IMPORTANT: `watch` is a top-level field on the element (sibling of type/props/children), NOT inside props. Watchers only fire when the value changes, not on initial render.");
+		lines.push("");
+	}
+	const editModes = options.editModes;
+	if (editModes && editModes.length > 0) lines.push(buildEditInstructions({ modes: editModes }, "json"));
+	lines.push("RULES:");
+	const baseRules = mode === "inline" ? [
+		"When generating UI, wrap all JSONL patches in a ```spec code fence - one JSON object per line inside the fence",
+		"Write a brief conversational response before any JSONL output",
+		"First set root: {\"op\":\"add\",\"path\":\"/root\",\"value\":\"<root-key>\"}",
+		"Then add each element: {\"op\":\"add\",\"path\":\"/elements/<key>\",\"value\":{...}}",
+		"Output /state patches right after the elements that use them, one per array item for progressive loading. REQUIRED whenever using $state, $bindState, $bindItem, $item, $index, or repeat.",
+		"ONLY use components listed above",
+		"Each element value needs: type, props, children (array of child keys)",
+		"Use unique keys for the element map entries (e.g., 'header', 'metric-1', 'chart-revenue')"
+	] : [
+		"Output ONLY JSONL patches - one JSON object per line, no markdown, no code fences",
+		"First set root: {\"op\":\"add\",\"path\":\"/root\",\"value\":\"<root-key>\"}",
+		"Then add each element: {\"op\":\"add\",\"path\":\"/elements/<key>\",\"value\":{...}}",
+		"Output /state patches right after the elements that use them, one per array item for progressive loading. REQUIRED whenever using $state, $bindState, $bindItem, $item, $index, or repeat.",
+		"ONLY use components listed above",
+		"Each element value needs: type, props, children (array of child keys)",
+		"Use unique keys for the element map entries (e.g., 'header', 'metric-1', 'chart-revenue')"
+	];
+	const schemaRules = catalog.schema.defaultRules ?? [];
+	[
+		...baseRules,
+		...schemaRules,
+		...customRules
+	].forEach((rule, i) => {
+		lines.push(`${i + 1}. ${rule}`);
+	});
+	return lines.join("\n");
+}
+function getExampleProps(def) {
+	if (def.example && Object.keys(def.example).length > 0) return def.example;
+	if (def.props) return generateExamplePropsFromZod(def.props);
+	return {};
+}
+function generateExamplePropsFromZod(schema) {
+	if (!schema || !schema._def) return {};
+	const def = schema._def;
+	const typeName = getZodTypeName(schema);
+	if (typeName !== "ZodObject" && typeName !== "object") return {};
+	const shape = typeof def.shape === "function" ? def.shape() : def.shape;
+	if (!shape) return {};
+	const result = {};
+	for (const [key, value] of Object.entries(shape)) {
+		const innerTypeName = getZodTypeName(value);
+		if (innerTypeName === "ZodOptional" || innerTypeName === "optional" || innerTypeName === "ZodNullable" || innerTypeName === "nullable") continue;
+		result[key] = generateExampleValue(value);
+	}
+	return result;
+}
+function generateExampleValue(schema) {
+	if (!schema || !schema._def) return "...";
+	const def = schema._def;
+	switch (getZodTypeName(schema)) {
+		case "ZodString":
+		case "string": return "example";
+		case "ZodNumber":
+		case "number": return 0;
+		case "ZodBoolean":
+		case "boolean": return true;
+		case "ZodLiteral":
+		case "literal": return def.value;
+		case "ZodEnum":
+		case "enum":
+			if (Array.isArray(def.values) && def.values.length > 0) return def.values[0];
+			if (def.entries && typeof def.entries === "object") {
+				const values = Object.values(def.entries);
+				return values.length > 0 ? values[0] : "example";
+			}
+			return "example";
+		case "ZodOptional":
+		case "optional":
+		case "ZodNullable":
+		case "nullable":
+		case "ZodDefault":
+		case "default": {
+			const inner = def.innerType ?? def.wrapped;
+			return inner ? generateExampleValue(inner) : null;
+		}
+		case "ZodArray":
+		case "array": return [];
+		case "ZodObject":
+		case "object": return generateExamplePropsFromZod(schema);
+		case "ZodUnion":
+		case "union": {
+			const options = def.options;
+			return options && options.length > 0 ? generateExampleValue(options[0]) : "...";
+		}
+		default: return "...";
+	}
+}
+function findFirstStringProp(schema) {
+	if (!schema || !schema._def) return null;
+	const def = schema._def;
+	const typeName = getZodTypeName(schema);
+	if (typeName !== "ZodObject" && typeName !== "object") return null;
+	const shape = typeof def.shape === "function" ? def.shape() : def.shape;
+	if (!shape) return null;
+	for (const [key, value] of Object.entries(shape)) {
+		const innerTypeName = getZodTypeName(value);
+		if (innerTypeName === "ZodOptional" || innerTypeName === "optional" || innerTypeName === "ZodNullable" || innerTypeName === "nullable") continue;
+		if (innerTypeName === "ZodString" || innerTypeName === "string") return key;
+	}
+	return null;
+}
+function getZodTypeName(schema) {
+	if (!schema || !schema._def) return "";
+	const def = schema._def;
+	return def.typeName ?? def.type ?? "";
+}
+function formatZodType(schema) {
+	if (!schema || !schema._def) return "unknown";
+	const def = schema._def;
+	switch (getZodTypeName(schema)) {
+		case "ZodString":
+		case "string": return "string";
+		case "ZodNumber":
+		case "number": return "number";
+		case "ZodBoolean":
+		case "boolean": return "boolean";
+		case "ZodLiteral":
+		case "literal": return JSON.stringify(def.value);
+		case "ZodEnum":
+		case "enum": {
+			let values;
+			if (Array.isArray(def.values)) values = def.values;
+			else if (def.entries && typeof def.entries === "object") values = Object.values(def.entries);
+			else return "enum";
+			return values.map((v) => `"${v}"`).join(" | ");
+		}
+		case "ZodArray":
+		case "array": {
+			const inner = typeof def.element === "object" ? def.element : typeof def.type === "object" ? def.type : void 0;
+			return inner ? `Array<${formatZodType(inner)}>` : "Array<unknown>";
+		}
+		case "ZodObject":
+		case "object": {
+			const shape = typeof def.shape === "function" ? def.shape() : def.shape;
+			if (!shape) return "object";
+			return `{ ${Object.entries(shape).map(([key, value]) => {
+				const innerTypeName = getZodTypeName(value);
+				return `${key}${innerTypeName === "ZodOptional" || innerTypeName === "ZodNullable" || innerTypeName === "optional" || innerTypeName === "nullable" ? "?" : ""}: ${formatZodType(value)}`;
+			}).join(", ")} }`;
+		}
+		case "ZodOptional":
+		case "optional":
+		case "ZodNullable":
+		case "nullable": {
+			const inner = def.innerType ?? def.wrapped;
+			return inner ? formatZodType(inner) : "unknown";
+		}
+		case "ZodUnion":
+		case "union": {
+			const options = def.options;
+			return options ? options.map((opt) => formatZodType(opt)).join(" | ") : "unknown";
+		}
+		default: return "unknown";
+	}
+}
+function zodTypeName(def) {
+	if (typeof def.type === "string") return def.type;
+	if (typeof def.typeName === "string") return def.typeName;
+	return "";
+}
+function normalizeTypeName(raw) {
+	if (raw.startsWith("Zod")) return raw.slice(3).toLowerCase();
+	return raw.toLowerCase();
+}
+function zodToJsonSchema(schema, strict = false) {
+	const def = schema._def;
+	switch (normalizeTypeName(zodTypeName(def))) {
+		case "string": return { type: "string" };
+		case "number": return { type: "number" };
+		case "boolean": return { type: "boolean" };
+		case "literal": {
+			const values = def.values;
+			return { const: values ? values[0] : def.value };
+		}
+		case "enum": {
+			const entries = def.entries;
+			return { enum: (entries ? Object.values(entries) : def.values) ?? [] };
+		}
+		case "array": {
+			const inner = def.element ?? def.type;
+			return {
+				type: "array",
+				items: inner ? zodToJsonSchema(inner, strict) : {}
+			};
+		}
+		case "object": {
+			const rawShape = def.shape;
+			const shape = typeof rawShape === "function" ? rawShape() : rawShape;
+			if (!shape) {
+				if (strict) return {
+					type: "object",
+					properties: {},
+					required: [],
+					additionalProperties: false
+				};
+				return { type: "object" };
+			}
+			const properties = {};
+			const required = [];
+			for (const [key, value] of Object.entries(shape)) {
+				const innerDef = value._def;
+				const innerKind = normalizeTypeName(zodTypeName(innerDef));
+				const isOptional = innerKind === "optional" || innerKind === "nullable";
+				if (strict) {
+					required.push(key);
+					if (isOptional) properties[key] = { anyOf: [zodToJsonSchema(value, strict), { type: "null" }] };
+					else properties[key] = zodToJsonSchema(value, strict);
+				} else {
+					properties[key] = zodToJsonSchema(value);
+					if (!isOptional) required.push(key);
+				}
+			}
+			return {
+				type: "object",
+				properties,
+				required: required.length > 0 ? required : void 0,
+				additionalProperties: false
+			};
+		}
+		case "record": {
+			const valueType = def.valueType;
+			if (strict) return {
+				type: "object",
+				properties: {},
+				required: [],
+				additionalProperties: false
+			};
+			return {
+				type: "object",
+				additionalProperties: valueType ? zodToJsonSchema(valueType) : true
+			};
+		}
+		case "optional":
+		case "nullable": {
+			const inner = def.innerType;
+			return inner ? zodToJsonSchema(inner, strict) : {};
+		}
+		case "union": {
+			const options = def.options;
+			return options ? { anyOf: options.map((o) => zodToJsonSchema(o, strict)) } : {};
+		}
+		case "any":
+		case "unknown":
+			if (strict) return {
+				type: "object",
+				properties: {},
+				required: [],
+				additionalProperties: false
+			};
+			return {};
+		default: return {};
+	}
+}
+function defineCatalog(schema, catalog) {
+	return schema.createCatalog(catalog);
+}
+function buildUserPrompt(options) {
+	const { prompt, currentSpec, state, maxPromptLength, editModes, format, serializer } = options;
+	let userText = String(prompt || "");
+	if (maxPromptLength !== void 0 && maxPromptLength > 0) userText = userText.slice(0, maxPromptLength);
+	if (isNonEmptySpec(currentSpec)) {
+		const editPrompt = buildEditUserPrompt({
+			prompt: userText,
+			currentSpec,
+			config: { modes: editModes ?? ["patch"] },
+			format: format ?? "json",
+			serializer
+		});
+		if (state && Object.keys(state).length > 0) return `${editPrompt}
+
+AVAILABLE STATE:
+${JSON.stringify(state, null, 2)}`;
+		return editPrompt;
+	}
+	const parts = [userText];
+	if (state && Object.keys(state).length > 0) parts.push(`
+AVAILABLE STATE:
+${JSON.stringify(state, null, 2)}`);
+	if (format === "yaml") parts.push(`
+Output the full spec in a \`\`\`yaml-spec fence. Stream progressively \u2014 output elements one at a time.`);
+	else parts.push(`
+Remember: Output /root first, then interleave /elements and /state patches so the UI fills in progressively as it streams. Output each state patch right after the elements that use it, one per array item.`);
+	return parts.join("\n");
+}
+function isPlainObject(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function deepMergeSpec(base, patch) {
+	const result = { ...base };
+	for (const key of Object.keys(patch)) {
+		const patchVal = patch[key];
+		if (patchVal === null) {
+			delete result[key];
+			continue;
+		}
+		const baseVal = result[key];
+		if (isPlainObject(patchVal) && isPlainObject(baseVal)) result[key] = deepMergeSpec(baseVal, patchVal);
+		else result[key] = patchVal;
+	}
+	return result;
+}
+function escapeToken(token) {
+	return token.replace(/~/g, "~0").replace(/\//g, "~1");
+}
+function buildPath(basePath, key) {
+	return `${basePath}/${escapeToken(key)}`;
+}
+function isPlainObject2(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function arraysEqual(a, b) {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
+function diffToPatches(oldObj, newObj, basePath = "") {
+	const patches = [];
+	for (const key of Object.keys(newObj)) {
+		const path = buildPath(basePath, key);
+		const oldVal = oldObj[key];
+		const newVal = newObj[key];
+		if (!(key in oldObj)) {
+			patches.push({
+				op: "add",
+				path,
+				value: newVal
+			});
+			continue;
+		}
+		if (isPlainObject2(oldVal) && isPlainObject2(newVal)) patches.push(...diffToPatches(oldVal, newVal, path));
+		else if (Array.isArray(oldVal) && Array.isArray(newVal)) {
+			if (!arraysEqual(oldVal, newVal)) patches.push({
+				op: "replace",
+				path,
+				value: newVal
+			});
+		} else if (oldVal !== newVal) patches.push({
+			op: "replace",
+			path,
+			value: newVal
+		});
+	}
+	for (const key of Object.keys(oldObj)) if (!(key in newObj)) patches.push({
+		op: "remove",
+		path: buildPath(basePath, key)
+	});
+	return patches;
+}
+//#endregion
+//#region ../../node_modules/.bun/@json-render+react@0.15.0+b1ab299f0a400331/node_modules/@json-render/react/dist/chunk-WYDS23XB.mjs
+var schema = defineSchema((s) => ({
+	spec: s.object({
+		root: s.string(),
+		elements: s.record(s.object({
+			type: s.ref("catalog.components"),
+			props: s.propsOf("catalog.components"),
+			children: s.array(s.string()),
+			visible: s.any()
+		}))
+	}),
+	catalog: s.object({
+		components: s.map({
+			props: s.zod(),
+			slots: s.array(s.string()),
+			description: s.string(),
+			example: s.any()
+		}),
+		actions: s.map({
+			params: s.zod(),
+			description: s.string()
+		})
+	})
+}), {
+	builtInActions: [
+		{
+			name: "setState",
+			description: "Update a value in the state model at the given statePath. Params: { statePath: string, value: any }"
+		},
+		{
+			name: "pushState",
+			description: "Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {\"$state\":\"/path\"} refs and \"$id\" for auto IDs."
+		},
+		{
+			name: "removeState",
+			description: "Remove an item from an array in state by index. Params: { statePath: string, index: number }"
+		},
+		{
+			name: "validateForm",
+			description: "Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }."
+		}
+	],
+	defaultRules: [
+		"CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.",
+		"SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.",
+		"CRITICAL: The \"visible\" field goes on the ELEMENT object, NOT inside \"props\". Correct: {\"type\":\"<ComponentName>\",\"props\":{},\"visible\":{\"$state\":\"/tab\",\"eq\":\"home\"},\"children\":[...]}.",
+		"CRITICAL: The \"on\" field goes on the ELEMENT object, NOT inside \"props\". Use on.press, on.change, on.submit etc. NEVER put action/actionParams inside props.",
+		"When the user asks for a UI that displays data (e.g. blog posts, products, users), ALWAYS include a state field with realistic sample data. The state field is a top-level field on the spec (sibling of root/elements).",
+		"When building repeating content backed by a state array (e.g. posts, products, items), use the \"repeat\" field on a container element. Example: { \"type\": \"<ContainerComponent>\", \"props\": {}, \"repeat\": { \"statePath\": \"/posts\", \"key\": \"id\" }, \"children\": [\"post-card\"] }. Replace <ContainerComponent> with an appropriate component from the AVAILABLE COMPONENTS list. Inside repeated children, use { \"$item\": \"field\" } to read a field from the current item, and { \"$index\": true } for the current array index. For two-way binding to an item field use { \"$bindItem\": \"completed\" }. Do NOT hardcode individual elements for each array item.",
+		"Design with visual hierarchy: use container components to group content, heading components for section titles, proper spacing, and status indicators. ONLY use components from the AVAILABLE COMPONENTS list.",
+		"For data-rich UIs, use multi-column layout components if available. For forms and single-column content, use vertical layout components. ONLY use components from the AVAILABLE COMPONENTS list.",
+		"Always include realistic, professional-looking sample data. For blogs include 3-4 posts with varied titles, authors, dates, categories. For products include names, prices, images. Never leave data empty."
+	]
+});
+//#endregion
+//#region ../../node_modules/.bun/@json-render+react@0.15.0+b1ab299f0a400331/node_modules/@json-render/react/dist/index.mjs
+var StateContext = createContext(null);
+function computeInitialFlat(isControlled, initialState) {
+	if (isControlled) return null;
+	if (Object.keys(initialState).length === 0) return {};
+	return flattenToPointers(initialState);
+}
+function StateProvider({ store: externalStore, initialState = {}, onStateChange, children }) {
+	const internalStoreRef = useRef(void 0);
+	if (!externalStore && !internalStoreRef.current) internalStoreRef.current = createStateStore(initialState);
+	const store = externalStore ?? internalStoreRef.current;
+	const storeRef = useRef(store);
+	storeRef.current = store;
+	const isControlledRef = useRef(!!externalStore);
+	isControlledRef.current = !!externalStore;
+	const initialModeRef = useRef(externalStore ? "controlled" : "uncontrolled");
+	const modeWarnedRef = useRef(false);
+	if (process.env.NODE_ENV !== "production") {
+		const currentMode = externalStore ? "controlled" : "uncontrolled";
+		if (currentMode !== initialModeRef.current && !modeWarnedRef.current) {
+			modeWarnedRef.current = true;
+			console.warn(`StateProvider: switching from ${initialModeRef.current} to ${currentMode} mode is not supported.`);
+		}
+	}
+	const prevInitialStateRef = useRef(initialState);
+	const prevFlatRef = useRef(computeInitialFlat(!!externalStore, initialState));
+	useEffect(() => {
+		if (externalStore) return;
+		if (initialState === prevInitialStateRef.current) return;
+		prevInitialStateRef.current = initialState;
+		const nextFlat = initialState && Object.keys(initialState).length > 0 ? flattenToPointers(initialState) : {};
+		const prevFlat = prevFlatRef.current ?? {};
+		const allKeys = /* @__PURE__ */ new Set([...Object.keys(prevFlat), ...Object.keys(nextFlat)]);
+		const updates = {};
+		for (const key of allKeys) if (prevFlat[key] !== nextFlat[key]) updates[key] = key in nextFlat ? nextFlat[key] : void 0;
+		prevFlatRef.current = nextFlat;
+		if (Object.keys(updates).length > 0) store.update(updates);
+	}, [
+		externalStore,
+		initialState,
+		store
+	]);
+	const state = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot ?? store.getSnapshot);
+	const onStateChangeRef = useRef(onStateChange);
+	onStateChangeRef.current = onStateChange;
+	const set = useCallback((path, value2) => {
+		const s = storeRef.current;
+		const prev = s.getSnapshot();
+		s.set(path, value2);
+		if (!isControlledRef.current && s.getSnapshot() !== prev) onStateChangeRef.current?.([{
+			path,
+			value: value2
+		}]);
+	}, []);
+	const update = useCallback((updates) => {
+		const s = storeRef.current;
+		const prev = s.getSnapshot();
+		s.update(updates);
+		if (!isControlledRef.current && s.getSnapshot() !== prev) {
+			const changes = [];
+			for (const [path, value2] of Object.entries(updates)) if (getByPath(prev, path) !== value2) changes.push({
+				path,
+				value: value2
+			});
+			if (changes.length > 0) onStateChangeRef.current?.(changes);
+		}
+	}, []);
+	const get = useCallback((path) => storeRef.current.get(path), []);
+	const getSnapshot = useCallback(() => storeRef.current.getSnapshot(), []);
+	const value = useMemo(() => ({
+		state,
+		get,
+		set,
+		update,
+		getSnapshot
+	}), [
+		state,
+		get,
+		set,
+		update,
+		getSnapshot
+	]);
+	return /* @__PURE__ */ jsx(StateContext.Provider, {
+		value,
+		children
+	});
+}
+function useStateStore() {
+	const ctx = useContext(StateContext);
+	if (!ctx) throw new Error("useStateStore must be used within a StateProvider");
+	return ctx;
+}
+var VisibilityContext = createContext(null);
+function VisibilityProvider({ children }) {
+	const { state } = useStateStore();
+	const ctx = useMemo(() => ({ stateModel: state }), [state]);
+	const isVisible = useMemo(() => (condition) => evaluateVisibility(condition, ctx), [ctx]);
+	const value = useMemo(() => ({
+		isVisible,
+		ctx
+	}), [isVisible, ctx]);
+	return /* @__PURE__ */ jsx(VisibilityContext.Provider, {
+		value,
+		children
+	});
+}
+function useVisibility() {
+	const ctx = useContext(VisibilityContext);
+	if (!ctx) throw new Error("useVisibility must be used within a VisibilityProvider");
+	return ctx;
+}
+var ValidationContext = createContext(null);
+function dynamicArgsEqual(a, b) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	for (const key of keysA) {
+		const va = a[key];
+		const vb = b[key];
+		if (va === vb) continue;
+		if (typeof va === "object" && va !== null && typeof vb === "object" && vb !== null) {
+			const sa = va.$state;
+			const sb = vb.$state;
+			if (typeof sa === "string" && sa === sb) continue;
+		}
+		return false;
+	}
+	return true;
+}
+function validationConfigEqual(a, b) {
+	if (a === b) return true;
+	if (a.validateOn !== b.validateOn) return false;
+	const ac = a.checks ?? [];
+	const bc = b.checks ?? [];
+	if (ac.length !== bc.length) return false;
+	for (let i = 0; i < ac.length; i++) {
+		const ca = ac[i];
+		const cb = bc[i];
+		if (ca.type !== cb.type) return false;
+		if (ca.message !== cb.message) return false;
+		if (!dynamicArgsEqual(ca.args, cb.args)) return false;
+	}
+	return true;
+}
+function ValidationProvider({ customFunctions = {}, children }) {
+	const { state, getSnapshot } = useStateStore();
+	const [fieldStates, setFieldStates] = useState({});
+	const fieldStatesRef = useRef({});
+	const [fieldConfigs, setFieldConfigs] = useState({});
+	const registerField = useCallback((path, config) => {
+		setFieldConfigs((prev) => {
+			const existing = prev[path];
+			if (existing && validationConfigEqual(existing, config)) return prev;
+			return {
+				...prev,
+				[path]: config
+			};
+		});
+	}, []);
+	const validate = useCallback((path, config) => {
+		const currentState = getSnapshot();
+		const segments = path.split("/").filter(Boolean);
+		let value2 = currentState;
+		for (const seg of segments) if (value2 != null && typeof value2 === "object") value2 = value2[seg];
+		else {
+			value2 = void 0;
+			break;
+		}
+		const result = runValidation(config, {
+			value: value2,
+			stateModel: currentState,
+			customFunctions
+		});
+		const newFieldState = {
+			touched: fieldStatesRef.current[path]?.touched ?? true,
+			validated: true,
+			result
+		};
+		fieldStatesRef.current = {
+			...fieldStatesRef.current,
+			[path]: newFieldState
+		};
+		setFieldStates(fieldStatesRef.current);
+		return result;
+	}, [customFunctions, getSnapshot]);
+	const touch = useCallback((path) => {
+		fieldStatesRef.current = {
+			...fieldStatesRef.current,
+			[path]: {
+				...fieldStatesRef.current[path],
+				touched: true,
+				validated: fieldStatesRef.current[path]?.validated ?? false,
+				result: fieldStatesRef.current[path]?.result ?? null
+			}
+		};
+		setFieldStates(fieldStatesRef.current);
+	}, []);
+	const clear = useCallback((path) => {
+		const { [path]: _, ...rest } = fieldStatesRef.current;
+		fieldStatesRef.current = rest;
+		setFieldStates(rest);
+	}, []);
+	const validateAll = useCallback(() => {
+		let allValid = true;
+		for (const [path, config] of Object.entries(fieldConfigs)) if (!validate(path, config).valid) allValid = false;
+		return allValid;
+	}, [fieldConfigs, validate]);
+	const value = useMemo(() => ({
+		customFunctions,
+		get fieldStates() {
+			return fieldStatesRef.current;
+		},
+		validate,
+		touch,
+		clear,
+		validateAll,
+		registerField
+	}), [
+		customFunctions,
+		fieldStates,
+		validate,
+		touch,
+		clear,
+		validateAll,
+		registerField
+	]);
+	return /* @__PURE__ */ jsx(ValidationContext.Provider, {
+		value,
+		children
+	});
+}
+function useOptionalValidation() {
+	return useContext(ValidationContext);
+}
+var idCounter = 0;
+function generateUniqueId() {
+	idCounter += 1;
+	return `${Date.now()}-${idCounter}`;
+}
+function deepResolveValue(value, get) {
+	if (value === null || value === void 0) return value;
+	if (value === "$id") return generateUniqueId();
+	if (typeof value === "object" && !Array.isArray(value)) {
+		const obj = value;
+		const keys = Object.keys(obj);
+		if (keys.length === 1 && typeof obj.$state === "string") return get(obj.$state);
+		if (keys.length === 1 && "$id" in obj) return generateUniqueId();
+	}
+	if (Array.isArray(value)) return value.map((item) => deepResolveValue(item, get));
+	if (typeof value === "object") {
+		const resolved = {};
+		for (const [key, val] of Object.entries(value)) resolved[key] = deepResolveValue(val, get);
+		return resolved;
+	}
+	return value;
+}
+var ActionContext = createContext(null);
+function ActionProvider({ handlers: initialHandlers = {}, navigate, children }) {
+	const { get, set, getSnapshot } = useStateStore();
+	const validation = useOptionalValidation();
+	const [handlers, setHandlers] = useState(initialHandlers);
+	const [loadingActions, setLoadingActions] = useState(/* @__PURE__ */ new Set());
+	const [pendingConfirmation, setPendingConfirmation] = useState(null);
+	const registerHandler = useCallback((name, handler) => {
+		setHandlers((prev) => ({
+			...prev,
+			[name]: handler
+		}));
+	}, []);
+	const execute = useCallback(async (binding) => {
+		const resolved = resolveAction(binding, getSnapshot());
+		if (resolved.action === "setState" && resolved.params) {
+			const statePath = resolved.params.statePath;
+			const value2 = resolved.params.value;
+			if (statePath) set(statePath, value2);
+			return;
+		}
+		if (resolved.action === "pushState" && resolved.params) {
+			const statePath = resolved.params.statePath;
+			const rawValue = resolved.params.value;
+			if (statePath) {
+				const resolvedValue = deepResolveValue(rawValue, get);
+				set(statePath, [...get(statePath) ?? [], resolvedValue]);
+				const clearStatePath = resolved.params.clearStatePath;
+				if (clearStatePath) set(clearStatePath, "");
+			}
+			return;
+		}
+		if (resolved.action === "removeState" && resolved.params) {
+			const statePath = resolved.params.statePath;
+			const index = resolved.params.index;
+			if (statePath !== void 0 && index !== void 0) set(statePath, (get(statePath) ?? []).filter((_, i) => i !== index));
+			return;
+		}
+		if (resolved.action === "push" && resolved.params) {
+			const screen = resolved.params.screen;
+			if (screen) {
+				const currentScreen = get("/currentScreen");
+				const navStack = get("/navStack") ?? [];
+				if (currentScreen) set("/navStack", [...navStack, currentScreen]);
+				else set("/navStack", [...navStack, ""]);
+				set("/currentScreen", screen);
+			}
+			return;
+		}
+		if (resolved.action === "pop") {
+			const navStack = get("/navStack") ?? [];
+			if (navStack.length > 0) {
+				const previousScreen = navStack[navStack.length - 1];
+				set("/navStack", navStack.slice(0, -1));
+				if (previousScreen) set("/currentScreen", previousScreen);
+				else set("/currentScreen", void 0);
+			}
+			return;
+		}
+		if (resolved.action === "validateForm") {
+			const validateAll = validation?.validateAll;
+			if (!validateAll) {
+				console.warn("validateForm action was dispatched but no ValidationProvider is connected. Ensure ValidationProvider is rendered inside the provider tree.");
+				return;
+			}
+			const valid = validateAll();
+			const errors = {};
+			for (const [path, fs] of Object.entries(validation.fieldStates)) if (fs.result && !fs.result.valid) errors[path] = fs.result.errors;
+			set(resolved.params?.statePath || "/formValidation", {
+				valid,
+				errors
+			});
+			return;
+		}
+		const handler = handlers[resolved.action];
+		if (!handler) {
+			console.warn(`No handler registered for action: ${resolved.action}`);
+			return;
+		}
+		if (resolved.confirm) return new Promise((resolve, reject) => {
+			setPendingConfirmation({
+				action: resolved,
+				handler,
+				resolve: () => {
+					setPendingConfirmation(null);
+					resolve();
+				},
+				reject: () => {
+					setPendingConfirmation(null);
+					reject(/* @__PURE__ */ new Error("Action cancelled"));
+				}
+			});
+		}).then(async () => {
+			setLoadingActions((prev) => new Set(prev).add(resolved.action));
+			try {
+				await executeAction({
+					action: resolved,
+					handler,
+					setState: set,
+					navigate,
+					executeAction: async (name) => {
+						await execute({ action: name });
+					}
+				});
+			} finally {
+				setLoadingActions((prev) => {
+					const next = new Set(prev);
+					next.delete(resolved.action);
+					return next;
+				});
+			}
+		});
+		setLoadingActions((prev) => new Set(prev).add(resolved.action));
+		try {
+			await executeAction({
+				action: resolved,
+				handler,
+				setState: set,
+				navigate,
+				executeAction: async (name) => {
+					await execute({ action: name });
+				}
+			});
+		} finally {
+			setLoadingActions((prev) => {
+				const next = new Set(prev);
+				next.delete(resolved.action);
+				return next;
+			});
+		}
+	}, [
+		handlers,
+		get,
+		set,
+		getSnapshot,
+		navigate,
+		validation
+	]);
+	const confirm = useCallback(() => {
+		pendingConfirmation?.resolve();
+	}, [pendingConfirmation]);
+	const cancel = useCallback(() => {
+		pendingConfirmation?.reject();
+	}, [pendingConfirmation]);
+	const value = useMemo(() => ({
+		handlers,
+		loadingActions,
+		pendingConfirmation,
+		execute,
+		confirm,
+		cancel,
+		registerHandler
+	}), [
+		handlers,
+		loadingActions,
+		pendingConfirmation,
+		execute,
+		confirm,
+		cancel,
+		registerHandler
+	]);
+	return /* @__PURE__ */ jsx(ActionContext.Provider, {
+		value,
+		children
+	});
+}
+function useActions() {
+	const ctx = useContext(ActionContext);
+	if (!ctx) throw new Error("useActions must be used within an ActionProvider");
+	return ctx;
+}
+function ConfirmDialog({ confirm, onConfirm, onCancel }) {
+	const isDanger = confirm.variant === "danger";
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "fixed",
+			inset: 0,
+			backgroundColor: "rgba(0, 0, 0, 0.5)",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			zIndex: 50
+		},
+		onClick: onCancel,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				backgroundColor: "white",
+				borderRadius: "8px",
+				padding: "24px",
+				maxWidth: "400px",
+				width: "100%",
+				boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1)"
+			},
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					style: {
+						margin: "0 0 8px 0",
+						fontSize: "18px",
+						fontWeight: 600
+					},
+					children: confirm.title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					style: {
+						margin: "0 0 24px 0",
+						color: "#6b7280"
+					},
+					children: confirm.message
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						gap: "12px",
+						justifyContent: "flex-end"
+					},
+					children: [/* @__PURE__ */ jsx("button", {
+						onClick: onCancel,
+						style: {
+							padding: "8px 16px",
+							borderRadius: "6px",
+							border: "1px solid #d1d5db",
+							backgroundColor: "white",
+							cursor: "pointer"
+						},
+						children: confirm.cancelLabel ?? "Cancel"
+					}), /* @__PURE__ */ jsx("button", {
+						onClick: onConfirm,
+						style: {
+							padding: "8px 16px",
+							borderRadius: "6px",
+							border: "none",
+							backgroundColor: isDanger ? "#dc2626" : "#3b82f6",
+							color: "white",
+							cursor: "pointer"
+						},
+						children: confirm.confirmLabel ?? "Confirm"
+					})]
+				})
+			]
+		})
+	});
+}
+var RepeatScopeContext = createContext(null);
+function RepeatScopeProvider({ item, index, basePath, children }) {
+	return /* @__PURE__ */ jsx(RepeatScopeContext.Provider, {
+		value: {
+			item,
+			index,
+			basePath
+		},
+		children
+	});
+}
+function useRepeatScope() {
+	return useContext(RepeatScopeContext);
+}
+var ElementErrorBoundary = class extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = { hasError: false };
+	}
+	static getDerivedStateFromError() {
+		return { hasError: true };
+	}
+	componentDidCatch(error, info) {
+		console.error(`[json-render] Rendering error in <${this.props.elementType}>:`, error, info.componentStack);
+	}
+	render() {
+		if (this.state.hasError) return null;
+		return this.props.children;
+	}
+};
+var EMPTY_FUNCTIONS = {};
+var FunctionsContext = React.createContext(EMPTY_FUNCTIONS);
+function useFunctions() {
+	return React.useContext(FunctionsContext);
+}
+var ElementRenderer = React.memo(function ElementRenderer2({ element, spec, registry, loading, fallback }) {
+	const repeatScope = useRepeatScope();
+	const { ctx } = useVisibility();
+	const { execute } = useActions();
+	const { getSnapshot, state: watchState } = useStateStore();
+	const functions = useFunctions();
+	const fullCtx = useMemo(() => {
+		const base = repeatScope ? {
+			...ctx,
+			repeatItem: repeatScope.item,
+			repeatIndex: repeatScope.index,
+			repeatBasePath: repeatScope.basePath
+		} : { ...ctx };
+		base.functions = functions;
+		return base;
+	}, [
+		ctx,
+		repeatScope,
+		functions
+	]);
+	const isVisible = element.visible === void 0 ? true : evaluateVisibility(element.visible, fullCtx);
+	const onBindings = element.on;
+	const emit = useCallback(async (eventName) => {
+		const binding = onBindings?.[eventName];
+		if (!binding) return;
+		const actionBindings = Array.isArray(binding) ? binding : [binding];
+		for (const b of actionBindings) {
+			if (!b.params) {
+				await execute(b);
+				continue;
+			}
+			const liveCtx = {
+				...fullCtx,
+				stateModel: getSnapshot()
+			};
+			const resolved = {};
+			for (const [key, val] of Object.entries(b.params)) resolved[key] = resolveActionParam(val, liveCtx);
+			await execute({
+				...b,
+				params: resolved
+			});
+		}
+	}, [
+		onBindings,
+		execute,
+		fullCtx,
+		getSnapshot
+	]);
+	const on = useCallback((eventName) => {
+		const binding = onBindings?.[eventName];
+		if (!binding) return {
+			emit: () => {},
+			shouldPreventDefault: false,
+			bound: false
+		};
+		return {
+			emit: () => emit(eventName),
+			shouldPreventDefault: (Array.isArray(binding) ? binding : [binding]).some((b) => b.preventDefault),
+			bound: true
+		};
+	}, [onBindings, emit]);
+	const watchConfig = element.watch;
+	const prevWatchValues = useRef(null);
+	const stableWatchRef = useRef(void 0);
+	const watchedValues = useMemo(() => {
+		if (!watchConfig) return void 0;
+		const values = {};
+		for (const path of Object.keys(watchConfig)) values[path] = getByPath(watchState, path);
+		const prev = stableWatchRef.current;
+		if (prev) {
+			const keys = Object.keys(values);
+			if (keys.length === Object.keys(prev).length && keys.every((k) => values[k] === prev[k])) return prev;
+		}
+		stableWatchRef.current = values;
+		return values;
+	}, [watchConfig, watchState]);
+	useEffect(() => {
+		if (!watchConfig || !watchedValues) return;
+		const paths = Object.keys(watchConfig);
+		if (paths.length === 0) return;
+		const prev = prevWatchValues.current;
+		prevWatchValues.current = watchedValues;
+		if (prev === null) return;
+		let cancelled = false;
+		(async () => {
+			for (const path of paths) {
+				if (cancelled) break;
+				if (watchedValues[path] !== prev[path]) {
+					const binding = watchConfig[path];
+					if (!binding) continue;
+					const bindings = Array.isArray(binding) ? binding : [binding];
+					for (const b of bindings) {
+						if (cancelled) break;
+						if (!b.params) {
+							await execute(b);
+							if (cancelled) break;
+							continue;
+						}
+						const liveCtx = {
+							...fullCtx,
+							stateModel: getSnapshot()
+						};
+						const resolved = {};
+						for (const [key, val] of Object.entries(b.params)) resolved[key] = resolveActionParam(val, liveCtx);
+						await execute({
+							...b,
+							params: resolved
+						});
+						if (cancelled) break;
+					}
+				}
+			}
+		})().catch(console.error);
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		watchConfig,
+		watchedValues,
+		execute,
+		fullCtx,
+		getSnapshot
+	]);
+	if (!isVisible) return null;
+	const rawProps = element.props;
+	const elementBindings = resolveBindings(rawProps, fullCtx);
+	const resolvedProps = resolveElementProps(rawProps, fullCtx);
+	const resolvedElement = resolvedProps !== element.props ? {
+		...element,
+		props: resolvedProps
+	} : element;
+	const Component = registry[resolvedElement.type] ?? fallback;
+	if (!Component) {
+		console.warn(`No renderer for component type: ${resolvedElement.type}`);
+		return null;
+	}
+	const children = resolvedElement.repeat ? /* @__PURE__ */ jsx(RepeatChildren, {
+		element: resolvedElement,
+		spec,
+		registry,
+		loading,
+		fallback
+	}) : resolvedElement.children?.map((childKey) => {
+		const childElement = spec.elements[childKey];
+		if (!childElement) {
+			if (!loading) console.warn(`[json-render] Missing element "${childKey}" referenced as child of "${resolvedElement.type}". This element will not render.`);
+			return null;
+		}
+		return /* @__PURE__ */ jsx(ElementRenderer2, {
+			element: childElement,
+			spec,
+			registry,
+			loading,
+			fallback
+		}, childKey);
+	});
+	return /* @__PURE__ */ jsx(ElementErrorBoundary, {
+		elementType: resolvedElement.type,
+		children: /* @__PURE__ */ jsx(Component, {
+			element: resolvedElement,
+			emit,
+			on,
+			bindings: elementBindings,
+			loading,
+			children
+		})
+	});
+});
+function RepeatChildren({ element, spec, registry, loading, fallback }) {
+	const { state } = useStateStore();
+	const repeat = element.repeat;
+	const statePath = repeat.statePath;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: (getByPath(state, statePath) ?? []).map((itemValue, index) => {
+		const key = repeat.key && typeof itemValue === "object" && itemValue !== null ? String(itemValue[repeat.key] ?? index) : String(index);
+		return /* @__PURE__ */ jsx(RepeatScopeProvider, {
+			item: itemValue,
+			index,
+			basePath: `${statePath}/${index}`,
+			children: element.children?.map((childKey) => {
+				const childElement = spec.elements[childKey];
+				if (!childElement) {
+					if (!loading) console.warn(`[json-render] Missing element "${childKey}" referenced as child of "${element.type}" (repeat). This element will not render.`);
+					return null;
+				}
+				return /* @__PURE__ */ jsx(ElementRenderer, {
+					element: childElement,
+					spec,
+					registry,
+					loading,
+					fallback
+				}, childKey);
+			})
+		}, key);
+	}) });
+}
+function Renderer({ spec, registry, loading, fallback }) {
+	if (!spec || !spec.root) return null;
+	const rootElement = spec.elements[spec.root];
+	if (!rootElement) return null;
+	return /* @__PURE__ */ jsx(ElementRenderer, {
+		element: rootElement,
+		spec,
+		registry,
+		loading,
+		fallback
+	});
+}
+function JSONUIProvider({ registry, store, initialState, handlers, navigate, validationFunctions, functions, onStateChange, children }) {
+	return /* @__PURE__ */ jsx(StateProvider, {
+		store,
+		initialState,
+		onStateChange,
+		children: /* @__PURE__ */ jsx(VisibilityProvider, { children: /* @__PURE__ */ jsx(ValidationProvider, {
+			customFunctions: validationFunctions,
+			children: /* @__PURE__ */ jsx(ActionProvider, {
+				handlers,
+				navigate,
+				children: /* @__PURE__ */ jsxs(FunctionsContext.Provider, {
+					value: functions ?? EMPTY_FUNCTIONS,
+					children: [children, /* @__PURE__ */ jsx(ConfirmationDialogManager, {})]
+				})
+			})
+		}) })
+	});
+}
+function ConfirmationDialogManager() {
+	const { pendingConfirmation, confirm, cancel } = useActions();
+	if (!pendingConfirmation?.action.confirm) return null;
+	return /* @__PURE__ */ jsx(ConfirmDialog, {
+		confirm: pendingConfirmation.action.confirm,
+		onConfirm: confirm,
+		onCancel: cancel
+	});
+}
+function defineRegistry(_catalog, options) {
+	const registry = {};
+	if (options.components) for (const [name, componentFn] of Object.entries(options.components)) registry[name] = ({ element, children, emit, on, bindings, loading }) => {
+		return componentFn({
+			props: element.props,
+			children,
+			emit,
+			on,
+			bindings,
+			loading
+		});
+	};
+	const actionMap = options.actions ? Object.entries(options.actions) : [];
+	const handlers = (getSetState, getState) => {
+		const result = {};
+		for (const [name, actionFn] of actionMap) result[name] = async (params) => {
+			const setState = getSetState();
+			const state = getState();
+			if (setState) await actionFn(params, setState, state);
+		};
+		return result;
+	};
+	const executeAction2 = async (actionName, params, setState, state = {}) => {
+		const entry = actionMap.find(([name]) => name === actionName);
+		if (entry) await entry[1](params, setState, state);
+		else console.warn(`Unknown action: ${actionName}`);
+	};
+	return {
+		registry,
+		handlers,
+		executeAction: executeAction2
+	};
+}
+function createRenderer(catalog, components) {
+	const registry = components;
+	return function CatalogRenderer({ spec, store, state, onAction, onStateChange, functions, loading, fallback }) {
+		return /* @__PURE__ */ jsx(StateProvider, {
+			store,
+			initialState: state,
+			onStateChange,
+			children: /* @__PURE__ */ jsx(VisibilityProvider, { children: /* @__PURE__ */ jsx(ValidationProvider, { children: /* @__PURE__ */ jsx(ActionProvider, {
+				handlers: onAction ? new Proxy({}, {
+					get: (_target, prop) => {
+						return (params) => onAction(prop, params);
+					},
+					has: () => true
+				}) : void 0,
+				children: /* @__PURE__ */ jsxs(FunctionsContext.Provider, {
+					value: functions ?? EMPTY_FUNCTIONS,
+					children: [/* @__PURE__ */ jsx(Renderer, {
+						spec,
+						registry,
+						loading,
+						fallback
+					}), /* @__PURE__ */ jsx(ConfirmationDialogManager, {})]
+				})
+			}) }) })
+		});
+	};
+}
+function parseLine(line) {
+	try {
+		const trimmed = line.trim();
+		if (!trimmed || trimmed.startsWith("//")) return null;
+		const parsed = JSON.parse(trimmed);
+		if (parsed.__meta === "usage") return {
+			type: "usage",
+			usage: {
+				promptTokens: parsed.promptTokens ?? 0,
+				completionTokens: parsed.completionTokens ?? 0,
+				totalTokens: parsed.totalTokens ?? 0
+			}
+		};
+		return {
+			type: "patch",
+			patch: parsed
+		};
+	} catch {
+		return null;
+	}
+}
+function setSpecValue(newSpec, path, value) {
+	if (path === "/root") {
+		newSpec.root = value;
+		return;
+	}
+	if (path === "/state") {
+		newSpec.state = value;
+		return;
+	}
+	if (path.startsWith("/state/")) {
+		if (!newSpec.state) newSpec.state = {};
+		const statePath = path.slice(6);
+		setByPath(newSpec.state, statePath, value);
+		return;
+	}
+	if (path.startsWith("/elements/")) {
+		const pathParts = path.slice(10).split("/");
+		const elementKey = pathParts[0];
+		if (!elementKey) return;
+		if (pathParts.length === 1) newSpec.elements[elementKey] = value;
+		else {
+			const element = newSpec.elements[elementKey];
+			if (element) {
+				const propPath = "/" + pathParts.slice(1).join("/");
+				const newElement = { ...element };
+				setByPath(newElement, propPath, value);
+				newSpec.elements[elementKey] = newElement;
+			}
+		}
+	}
+}
+function removeSpecValue(newSpec, path) {
+	if (path === "/state") {
+		delete newSpec.state;
+		return;
+	}
+	if (path.startsWith("/state/") && newSpec.state) {
+		const statePath = path.slice(6);
+		removeByPath(newSpec.state, statePath);
+		return;
+	}
+	if (path.startsWith("/elements/")) {
+		const pathParts = path.slice(10).split("/");
+		const elementKey = pathParts[0];
+		if (!elementKey) return;
+		if (pathParts.length === 1) {
+			const { [elementKey]: _, ...rest } = newSpec.elements;
+			newSpec.elements = rest;
+		} else {
+			const element = newSpec.elements[elementKey];
+			if (element) {
+				const propPath = "/" + pathParts.slice(1).join("/");
+				const newElement = { ...element };
+				removeByPath(newElement, propPath);
+				newSpec.elements[elementKey] = newElement;
+			}
+		}
+	}
+}
+function getSpecValue(spec, path) {
+	if (path === "/root") return spec.root;
+	if (path === "/state") return spec.state;
+	if (path.startsWith("/state/") && spec.state) {
+		const statePath = path.slice(6);
+		return getByPath(spec.state, statePath);
+	}
+	return getByPath(spec, path);
+}
+function applyPatch(spec, patch) {
+	const newSpec = {
+		...spec,
+		elements: { ...spec.elements },
+		...spec.state ? { state: { ...spec.state } } : {}
+	};
+	switch (patch.op) {
+		case "add":
+		case "replace":
+			setSpecValue(newSpec, patch.path, patch.value);
+			break;
+		case "remove":
+			removeSpecValue(newSpec, patch.path);
+			break;
+		case "move": {
+			if (!patch.from) break;
+			const moveValue = getSpecValue(newSpec, patch.from);
+			removeSpecValue(newSpec, patch.from);
+			setSpecValue(newSpec, patch.path, moveValue);
+			break;
+		}
+		case "copy": {
+			if (!patch.from) break;
+			const copyValue = getSpecValue(newSpec, patch.from);
+			setSpecValue(newSpec, patch.path, copyValue);
+			break;
+		}
+		case "test": break;
+	}
+	return newSpec;
+}
+function useUIStream({ api, onComplete, onError }) {
+	const [spec, setSpec] = useState(null);
+	const [isStreaming, setIsStreaming] = useState(false);
+	const [error, setError] = useState(null);
+	const [usage, setUsage] = useState(null);
+	const [rawLines, setRawLines] = useState([]);
+	const abortControllerRef = useRef(null);
+	const onCompleteRef = useRef(onComplete);
+	onCompleteRef.current = onComplete;
+	const onErrorRef = useRef(onError);
+	onErrorRef.current = onError;
+	const clear = useCallback(() => {
+		setSpec(null);
+		setError(null);
+	}, []);
+	const send = useCallback(async (prompt, context) => {
+		abortControllerRef.current?.abort();
+		abortControllerRef.current = new AbortController();
+		setIsStreaming(true);
+		setError(null);
+		setUsage(null);
+		setRawLines([]);
+		const previousSpec = context?.previousSpec;
+		let currentSpec = previousSpec && previousSpec.root ? {
+			...previousSpec,
+			elements: { ...previousSpec.elements }
+		} : {
+			root: "",
+			elements: {}
+		};
+		setSpec(currentSpec);
+		try {
+			const response = await fetch(api, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					prompt,
+					context,
+					currentSpec
+				}),
+				signal: abortControllerRef.current.signal
+			});
+			if (!response.ok) {
+				let errorMessage = `HTTP error: ${response.status}`;
+				try {
+					const errorData = await response.json();
+					if (errorData.message) errorMessage = errorData.message;
+					else if (errorData.error) errorMessage = errorData.error;
+				} catch {}
+				throw new Error(errorMessage);
+			}
+			const reader = response.body?.getReader();
+			if (!reader) throw new Error("No response body");
+			const decoder = new TextDecoder();
+			let buffer = "";
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+				buffer += decoder.decode(value, { stream: true });
+				const lines = buffer.split("\n");
+				buffer = lines.pop() ?? "";
+				for (const line of lines) {
+					const trimmed = line.trim();
+					if (!trimmed) continue;
+					const result = parseLine(trimmed);
+					if (!result) continue;
+					if (result.type === "usage") setUsage(result.usage);
+					else {
+						setRawLines((prev) => [...prev, trimmed]);
+						currentSpec = applyPatch(currentSpec, result.patch);
+						setSpec({ ...currentSpec });
+					}
+				}
+			}
+			if (buffer.trim()) {
+				const trimmed = buffer.trim();
+				const result = parseLine(trimmed);
+				if (result) if (result.type === "usage") setUsage(result.usage);
+				else {
+					setRawLines((prev) => [...prev, trimmed]);
+					currentSpec = applyPatch(currentSpec, result.patch);
+					setSpec({ ...currentSpec });
+				}
+			}
+			onCompleteRef.current?.(currentSpec);
+		} catch (err) {
+			if (err.name === "AbortError") return;
+			const error2 = err instanceof Error ? err : new Error(String(err));
+			setError(error2);
+			onErrorRef.current?.(error2);
+		} finally {
+			setIsStreaming(false);
+		}
+	}, [api]);
+	useEffect(() => {
+		return () => {
+			abortControllerRef.current?.abort();
+		};
+	}, []);
+	return {
+		spec,
+		isStreaming,
+		error,
+		usage,
+		rawLines,
+		send,
+		clear
+	};
+}
+function useBoundProp(propValue, bindingPath) {
+	const { set } = useStateStore();
+	return [propValue, useCallback((value) => {
+		if (bindingPath) set(bindingPath, value);
+	}, [bindingPath, set])];
+}
+function isSpecDataPart(data) {
+	if (typeof data !== "object" || data === null) return false;
+	const obj = data;
+	switch (obj.type) {
+		case "patch": return typeof obj.patch === "object" && obj.patch !== null;
+		case "flat":
+		case "nested": return typeof obj.spec === "object" && obj.spec !== null;
+		default: return false;
+	}
+}
+function buildSpecFromParts(parts) {
+	const spec = {
+		root: "",
+		elements: {}
+	};
+	let hasSpec = false;
+	for (const part of parts) if (part.type === SPEC_DATA_PART_TYPE) {
+		if (!isSpecDataPart(part.data)) continue;
+		const payload = part.data;
+		if (payload.type === "patch") {
+			hasSpec = true;
+			applySpecPatch(spec, payload.patch);
+		} else if (payload.type === "flat") {
+			hasSpec = true;
+			Object.assign(spec, payload.spec);
+		} else if (payload.type === "nested") {
+			hasSpec = true;
+			const flat = nestedToFlat(payload.spec);
+			Object.assign(spec, flat);
+		}
+	}
+	return hasSpec ? spec : null;
+}
+function getTextFromParts(parts) {
+	return parts.filter((p) => p.type === "text" && typeof p.text === "string").map((p) => p.text.trim()).filter(Boolean).join("\n\n");
+}
+function useJsonRenderMessage(parts) {
+	const prevPartsRef = useRef([]);
+	const prevResultRef = useRef({
+		spec: null,
+		text: ""
+	});
+	if (parts !== prevPartsRef.current && (parts.length !== prevPartsRef.current.length || parts[parts.length - 1] !== prevPartsRef.current[prevPartsRef.current.length - 1]) || prevPartsRef.current.length === 0) {
+		prevPartsRef.current = parts;
+		prevResultRef.current = {
+			spec: buildSpecFromParts(parts),
+			text: getTextFromParts(parts)
+		};
+	}
+	const { spec, text } = prevResultRef.current;
+	return {
+		spec,
+		text,
+		hasSpec: spec !== null && Object.keys(spec.elements || {}).length > 0
+	};
+}
+var chatMessageIdCounter = 0;
+function generateChatId() {
+	if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID();
+	chatMessageIdCounter += 1;
+	return `msg-${Date.now()}-${chatMessageIdCounter}`;
+}
+function useChatUI({ api, onComplete, onError }) {
+	const [messages, setMessages] = useState([]);
+	const [isStreaming, setIsStreaming] = useState(false);
+	const [error, setError] = useState(null);
+	const abortControllerRef = useRef(null);
+	const messagesRef = useRef(messages);
+	messagesRef.current = messages;
+	const onCompleteRef = useRef(onComplete);
+	onCompleteRef.current = onComplete;
+	const onErrorRef = useRef(onError);
+	onErrorRef.current = onError;
+	const clear = useCallback(() => {
+		setMessages([]);
+		setError(null);
+	}, []);
+	const send = useCallback(async (text) => {
+		if (!text.trim()) return;
+		abortControllerRef.current?.abort();
+		abortControllerRef.current = new AbortController();
+		const userMessage = {
+			id: generateChatId(),
+			role: "user",
+			text: text.trim(),
+			spec: null
+		};
+		const assistantId = generateChatId();
+		const assistantMessage = {
+			id: assistantId,
+			role: "assistant",
+			text: "",
+			spec: null
+		};
+		setMessages((prev) => [
+			...prev,
+			userMessage,
+			assistantMessage
+		]);
+		setIsStreaming(true);
+		setError(null);
+		const historyForApi = [...messagesRef.current.map((m) => ({
+			role: m.role,
+			content: m.text
+		})), {
+			role: "user",
+			content: text.trim()
+		}];
+		let accumulatedText = "";
+		let currentSpec = {
+			root: "",
+			elements: {}
+		};
+		let hasSpec = false;
+		try {
+			const response = await fetch(api, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ messages: historyForApi }),
+				signal: abortControllerRef.current.signal
+			});
+			if (!response.ok) {
+				let errorMessage = `HTTP error: ${response.status}`;
+				try {
+					const errorData = await response.json();
+					if (errorData.message) errorMessage = errorData.message;
+					else if (errorData.error) errorMessage = errorData.error;
+				} catch {}
+				throw new Error(errorMessage);
+			}
+			const reader = response.body?.getReader();
+			if (!reader) throw new Error("No response body");
+			const decoder = new TextDecoder();
+			const parser = createMixedStreamParser({
+				onPatch(patch) {
+					hasSpec = true;
+					applySpecPatch(currentSpec, patch);
+					setMessages((prev) => prev.map((m) => m.id === assistantId ? {
+						...m,
+						spec: {
+							root: currentSpec.root,
+							elements: { ...currentSpec.elements },
+							...currentSpec.state ? { state: { ...currentSpec.state } } : {}
+						}
+					} : m));
+				},
+				onText(line) {
+					accumulatedText += (accumulatedText ? "\n" : "") + line;
+					setMessages((prev) => prev.map((m) => m.id === assistantId ? {
+						...m,
+						text: accumulatedText
+					} : m));
+				}
+			});
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+				parser.push(decoder.decode(value, { stream: true }));
+			}
+			parser.flush();
+			const finalMessage = {
+				id: assistantId,
+				role: "assistant",
+				text: accumulatedText,
+				spec: hasSpec ? {
+					root: currentSpec.root,
+					elements: { ...currentSpec.elements },
+					...currentSpec.state ? { state: { ...currentSpec.state } } : {}
+				} : null
+			};
+			onCompleteRef.current?.(finalMessage);
+		} catch (err) {
+			if (err.name === "AbortError") return;
+			const resolvedError = err instanceof Error ? err : new Error(String(err));
+			setError(resolvedError);
+			setMessages((prev) => prev.filter((m) => m.id !== assistantId || m.text.length > 0));
+			onErrorRef.current?.(resolvedError);
+		} finally {
+			setIsStreaming(false);
+		}
+	}, [api]);
+	useEffect(() => {
+		return () => {
+			abortControllerRef.current?.abort();
+		};
+	}, []);
+	return {
+		messages,
+		isStreaming,
+		error,
+		send,
+		clear
+	};
+}
+//#endregion
+export { resolveDynamicValue as C, getByPath as S, sfComponents as T, defineCatalog as _, ValidationProvider as a, validateSpec as b, defineRegistry as c, useJsonRenderMessage as d, useUIStream as f, deepMergeSpec as g, buildUserPrompt as h, StateProvider as i, useBoundProp as l, autoFixSpec as m, JSONUIProvider as n, VisibilityProvider as o, schema as p, Renderer as r, createRenderer as s, ActionProvider as t, useChatUI as u, diffToPatches as v, setByPath as w, createStateStore as x, evaluateVisibility as y };
+
+//# sourceMappingURL=dist-BNlyONdD.js.map