@signalflare-ai/ui 0.5.0 → 1.0.0

package/dist/{dist-BNlyONdD.js → dist-1-gcEL2L.js}

@@ -4,27 +4,27 @@ 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 Checkbox } from "./checkbox-DYhUmZNw.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 Input } from "./input-DXYUjGgD.js";
+import { n as InputArea } from "./input-DddtBN-g.js";
+import { t as Code } from "./code-Cx-QSoOT.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 { t as Select } from "./select-1w2aebGQ.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 { r as Table } from "./table-Rv4JMy0B.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 { t as Radio } from "./radio-BNSwOt3B.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 { i as ChartPalette, t as Chart } from "./echart-DURZEyai.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";
@@ -44,7 +44,7 @@ echarts.use([
 	CanvasRenderer
 ]);
 /**
-* Hardcoded SF theme color tokens for ECharts canvas rendering.
+* Hardcoded SignalFlare 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.
@@ -354,7 +354,7 @@ var sfComponents = {
 	}
 };
 //#endregion
-//#region ../../node_modules/.bun/@json-render+core@0.15.0/node_modules/@json-render/core/dist/chunk-AFLK3Q4T.mjs
+//#region ../../node_modules/.bun/@json-render+core@0.18.0/node_modules/@json-render/core/dist/chunk-AFLK3Q4T.mjs
 var DynamicValueSchema = z.union([
 	z.string(),
 	z.number(),
@@ -670,7 +670,7 @@ function flattenToPointers(obj, prefix = "", _depth = 0, _seen, _warned) {
 	return result;
 }
 //#endregion
-//#region ../../node_modules/.bun/@json-render+core@0.15.0/node_modules/@json-render/core/dist/index.mjs
+//#region ../../node_modules/.bun/@json-render+core@0.18.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(),
@@ -785,8 +785,6 @@ function isTemplateExpression(value) {
 }
 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}"`);
@@ -824,15 +822,15 @@ function resolvePropValue(value, 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;
+		if (rawPath.startsWith("/")) {
+			const resolved2 = getByPath(ctx.stateModel, rawPath);
+			return resolved2 != null ? String(resolved2) : "";
+		}
+		if (ctx.repeatItem !== void 0) {
+			const fromItem = getByPath(ctx.repeatItem, rawPath);
+			if (fromItem != null) return String(fromItem);
 		}
-		const resolved = getByPath(ctx.stateModel, path);
+		const resolved = getByPath(ctx.stateModel, "/" + rawPath);
 		return resolved != null ? String(resolved) : "";
 	});
 	if (Array.isArray(value)) return value.map((item) => resolvePropValue(item, ctx));
@@ -867,6 +865,45 @@ function resolveActionParam(value, ctx) {
 	if (isIndexExpression(value)) return ctx.repeatIndex;
 	return resolvePropValue(value, ctx);
 }
+var observers = /* @__PURE__ */ new Set();
+function notifyActionDispatch(evt) {
+	for (const o of observers) {
+		const fn = o.onDispatch;
+		if (!fn) continue;
+		try {
+			fn(evt);
+		} catch (err) {
+			if (process.env.NODE_ENV !== "production") console.error("[json-render] action observer threw in onDispatch:", err);
+		}
+	}
+}
+function notifyActionSettle(evt) {
+	for (const o of observers) {
+		const fn = o.onSettle;
+		if (!fn) continue;
+		try {
+			fn(evt);
+		} catch (err) {
+			if (process.env.NODE_ENV !== "production") console.error("[json-render] action observer threw in onSettle:", err);
+		}
+	}
+}
+var dispatchCounter = 0;
+function nextActionDispatchId() {
+	dispatchCounter += 1;
+	return `${Date.now()}-${dispatchCounter}`;
+}
+var activeCount = 0;
+var listeners = /* @__PURE__ */ new Set();
+function isDevtoolsActive() {
+	return activeCount > 0;
+}
+function subscribeDevtoolsActive(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
 var ActionConfirmSchema = z.object({
 	title: z.string(),
 	message: z.string(),
@@ -1803,8 +1840,8 @@ Note: state patches appear right after the elements that use them, so the UI fil
 	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("4. Template: `{ \"$template\": \"Hello, ${/name}!\" }` - interpolates references in the string. Absolute paths like `${/path}` resolve against the state model. Bare names like `${field}` resolve against the current repeat item first, then fall back to the state model at `/<field>`.");
+	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. Inside a repeat, `{ \"$template\": \"${name} - ${email}\" }` reads name and email from each item.");
 	lines.push("");
 	const catalogFunctions = catalog.data.functions;
 	if (catalogFunctions && Object.keys(catalogFunctions).length > 0) {
@@ -1994,7 +2031,10 @@ function formatZodType(schema) {
 		case "ZodBoolean":
 		case "boolean": return "boolean";
 		case "ZodLiteral":
-		case "literal": return JSON.stringify(def.value);
+		case "literal": {
+			const litValue = def.values?.[0] ?? def.value;
+			return JSON.stringify(litValue);
+		}
 		case "ZodEnum":
 		case "enum": {
 			let values;
@@ -2029,6 +2069,17 @@ function formatZodType(schema) {
 			const options = def.options;
 			return options ? options.map((opt) => formatZodType(opt)).join(" | ") : "unknown";
 		}
+		case "ZodRecord":
+		case "record": {
+			const keyType = def.keyType ?? void 0;
+			const valueType = def.valueType ?? def.element ?? void 0;
+			return `Record<${keyType ? formatZodType(keyType) : "string"}, ${valueType ? formatZodType(valueType) : "unknown"}>`;
+		}
+		case "ZodDefault":
+		case "default": {
+			const inner = def.innerType ?? def.wrapped;
+			return inner ? formatZodType(inner) : "unknown";
+		}
 		default: return "unknown";
 	}
 }
@@ -2226,7 +2277,7 @@ function diffToPatches(oldObj, newObj, basePath = "") {
 	return patches;
 }
 //#endregion
-//#region ../../node_modules/.bun/@json-render+react@0.15.0+b1ab299f0a400331/node_modules/@json-render/react/dist/chunk-WYDS23XB.mjs
+//#region ../../node_modules/.bun/@json-render+react@0.18.0+3f10a4be4e334a9b/node_modules/@json-render/react/dist/chunk-WYDS23XB.mjs
 var schema = defineSchema((s) => ({
 	spec: s.object({
 		root: s.string(),
@@ -2281,7 +2332,7 @@ var schema = defineSchema((s) => ({
 	]
 });
 //#endregion
-//#region ../../node_modules/.bun/@json-render+react@0.15.0+b1ab299f0a400331/node_modules/@json-render/react/dist/index.mjs
+//#region ../../node_modules/.bun/@json-render+react@0.18.0+3f10a4be4e334a9b/node_modules/@json-render/react/dist/index.mjs
 var StateContext = createContext(null);
 function computeInitialFlat(isControlled, initialState) {
 	if (isControlled) return null;
@@ -2554,84 +2605,114 @@ function ActionProvider({ handlers: initialHandlers = {}, navigate, children })
 	}, []);
 	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, "");
+		const dispatchId = nextActionDispatchId();
+		const dispatchedAt = Date.now();
+		notifyActionDispatch({
+			id: dispatchId,
+			name: resolved.action,
+			params: resolved.params,
+			at: dispatchedAt
+		});
+		let __ok = true;
+		let __error = void 0;
+		try {
+			if (resolved.action === "setState" && resolved.params) {
+				const statePath = resolved.params.statePath;
+				const value2 = resolved.params.value;
+				if (statePath) set(statePath, value2);
+				return;
 			}
-			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");
+			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 (currentScreen) set("/navStack", [...navStack, currentScreen]);
-				else set("/navStack", [...navStack, ""]);
-				set("/currentScreen", screen);
+				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;
 			}
-			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);
+			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;
 			}
-			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.");
+			const handler = handlers[resolved.action];
+			if (!handler) {
+				console.warn(`No handler registered for action: ${resolved.action}`);
 				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"));
+			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;
+					});
 				}
 			});
-		}).then(async () => {
 			setLoadingActions((prev) => new Set(prev).add(resolved.action));
 			try {
 				await executeAction({
@@ -2650,23 +2731,19 @@ function ActionProvider({ handlers: initialHandlers = {}, navigate, children })
 					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 });
-				}
-			});
+		} catch (err) {
+			__ok = false;
+			__error = err;
+			throw err;
 		} finally {
-			setLoadingActions((prev) => {
-				const next = new Set(prev);
-				next.delete(resolved.action);
-				return next;
+			const now = Date.now();
+			notifyActionSettle({
+				id: dispatchId,
+				name: resolved.action,
+				ok: __ok,
+				at: now,
+				durationMs: now - dispatchedAt,
+				error: __error
 			});
 		}
 	}, [
@@ -2817,7 +2894,11 @@ var FunctionsContext = React.createContext(EMPTY_FUNCTIONS);
 function useFunctions() {
 	return React.useContext(FunctionsContext);
 }
-var ElementRenderer = React.memo(function ElementRenderer2({ element, spec, registry, loading, fallback }) {
+function useDevtoolsActive() {
+	return React.useSyncExternalStore(subscribeDevtoolsActive, isDevtoolsActive, () => false);
+}
+var ElementRenderer = React.memo(function ElementRenderer2({ element, elementKey, spec, registry, loading, fallback }) {
+	const devtoolsActive = useDevtoolsActive();
 	const repeatScope = useRepeatScope();
 	const { ctx } = useVisibility();
 	const { execute } = useActions();
@@ -2953,36 +3034,42 @@ var ElementRenderer = React.memo(function ElementRenderer2({ element, spec, regi
 		console.warn(`No renderer for component type: ${resolvedElement.type}`);
 		return null;
 	}
-	const children = resolvedElement.repeat ? /* @__PURE__ */ jsx(RepeatChildren, {
+	const rendered = /* @__PURE__ */ jsx(Component, {
 		element: resolvedElement,
-		spec,
-		registry,
+		emit,
+		on,
+		bindings: elementBindings,
 		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,
+		children: resolvedElement.repeat ? /* @__PURE__ */ jsx(RepeatChildren, {
+			element: resolvedElement,
 			spec,
 			registry,
 			loading,
 			fallback
-		}, childKey);
+		}) : 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,
+				elementKey: childKey,
+				spec,
+				registry,
+				loading,
+				fallback
+			}, childKey);
+		})
 	});
+	const tagged = devtoolsActive && elementKey ? /* @__PURE__ */ jsx("span", {
+		"data-jr-key": elementKey,
+		style: { display: "contents" },
+		children: rendered
+	}) : rendered;
 	return /* @__PURE__ */ jsx(ElementErrorBoundary, {
 		elementType: resolvedElement.type,
-		children: /* @__PURE__ */ jsx(Component, {
-			element: resolvedElement,
-			emit,
-			on,
-			bindings: elementBindings,
-			loading,
-			children
-		})
+		children: tagged
 	});
 });
 function RepeatChildren({ element, spec, registry, loading, fallback }) {
@@ -3003,6 +3090,7 @@ function RepeatChildren({ element, spec, registry, loading, fallback }) {
 				}
 				return /* @__PURE__ */ jsx(ElementRenderer, {
 					element: childElement,
+					elementKey: childKey,
 					spec,
 					registry,
 					loading,
@@ -3018,6 +3106,7 @@ function Renderer({ spec, registry, loading, fallback }) {
 	if (!rootElement) return null;
 	return /* @__PURE__ */ jsx(ElementRenderer, {
 		element: rootElement,
+		elementKey: spec.root,
 		spec,
 		registry,
 		loading,
@@ -3543,4 +3632,4 @@ function useChatUI({ api, onComplete, onError }) {
 //#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
+//# sourceMappingURL=dist-1-gcEL2L.js.map