@signalflare-ai/ui 1.2.0 → 1.3.0

package/dist/{dist-B6iWiWwp.js → dist-6AtBsaJE.js}

@@ -1,30 +1,30 @@
 "use client";
-import { t as Loader } from "./loader-DAcc-Uag.js";
-import { t as Text } from "./text-Cqryz7rk.js";
-import { t as Tooltip } from "./tooltip-g9lFsvcT.js";
-import { t as Badge } from "./badge-BheXjMc8.js";
-import { t as Banner } from "./banner-CcsjunJg.js";
-import { t as Button } from "./button-CO6-qPax.js";
-import { t as Checkbox } from "./checkbox-D7p4QKsC.js";
-import { t as Field } from "./field-B_yVof52.js";
-import { t as Input } from "./input-B2bbijRh.js";
-import { n as InputArea } from "./input-ClB_E4Lb.js";
-import { t as Code } from "./code-BN8InC0G.js";
-import { t as Surface } from "./surface-DGwRlC0o.js";
-import { t as Dialog } from "./dialog-Bv1oSFOd.js";
-import { t as Collapsible } from "./collapsible-D_ueZ0jz.js";
-import { t as LayerCard } from "./layer-card-BK7eYfwn.js";
-import { t as Meter } from "./meter-BFFe9l5b.js";
-import { t as Select } from "./select-DMhdoHMa.js";
-import { r as Switch } from "./switch-BxAMfHdt.js";
-import { t as Tabs } from "./tabs-CeHu7Scn.js";
-import { r as Table } from "./table-BBeAtYVZ.js";
-import { t as Popover } from "./popover-SRoJaCZr.js";
-import { t as Empty } from "./empty-DZnN0zKX.js";
-import { t as Radio } from "./radio-BcwhwYNB.js";
+import { t as Loader } from "./loader-BEMz8pJO.js";
+import { t as Text } from "./text-iQ0YUFNg.js";
+import { t as Tooltip } from "./tooltip-uobk6Oh-.js";
+import { t as Badge } from "./badge-Beb-6uut.js";
+import { t as Banner } from "./banner-CCEksxPg.js";
+import { t as Button } from "./button-BHOgXJRU.js";
+import { t as Checkbox } from "./checkbox-Cy_OCyay.js";
+import { t as Field } from "./field-DBpFzzBS.js";
+import { t as Input } from "./input-GkfMQZC_.js";
+import { n as InputArea } from "./input-COmx2M_R.js";
+import { t as Code } from "./code-JsQz-0G_.js";
+import { t as Surface } from "./surface-CWdSFVUx.js";
+import { t as Dialog } from "./dialog-DYqu4aDO.js";
+import { t as Collapsible } from "./collapsible-1kOZ-89L.js";
+import { t as LayerCard } from "./layer-card-8l8GuLQr.js";
+import { t as Meter } from "./meter-Pf_VOl59.js";
+import { t as Select } from "./select-BFifYqHA.js";
+import { r as Switch } from "./switch-TA4cByCJ.js";
+import { t as Tabs } from "./tabs-bnH2vGLv.js";
+import { r as Table } from "./table-BM8JBGBs.js";
+import { t as Popover } from "./popover-BY-e9co1.js";
+import { t as Empty } from "./empty-C1tAkawe.js";
+import { t as Radio } from "./radio-DZwL13j0.js";
 import { Link } from "./components/link.js";
-import { t as Grid } from "./grid-CEd64Lnh.js";
-import { i as ChartPalette, t as Chart } from "./echart-CdOUaT-r.js";
+import { t as Grid } from "./grid-CifjQL-5.js";
+import { i as ChartPalette, t as Chart } from "./echart-DGBIVAv1.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";
@@ -153,7 +153,7 @@ function processChartData(rawItems, xKey, yKey, aggregate) {
 	};
 }
 function passthrough(Component) {
-	return ({ props, children }) => children != null ? React.createElement(Component, props, children) : React.createElement(Component, props);
+	return ({ props, children }) => children == null ? React.createElement(Component, props) : React.createElement(Component, props, children);
 }
 var sfComponents = {
 	Stack: ({ props, children }) => {
@@ -237,13 +237,13 @@ var sfComponents = {
 	Field: passthrough(Field),
 	Tabs: ({ props, children }) => {
 		const { defaultValue, ...rest } = props;
-		return children != null ? React.createElement(Tabs, {
+		return children == null ? React.createElement(Tabs, {
 			...rest,
 			selectedValue: defaultValue ?? rest.tabs?.[0]?.value
-		}, children) : React.createElement(Tabs, {
+		}) : React.createElement(Tabs, {
 			...rest,
 			selectedValue: defaultValue ?? rest.tabs?.[0]?.value
-		});
+		}, children);
 	},
 	Dialog: ({ props, children }) => {
 		const { trigger, title, description } = props;
@@ -252,7 +252,7 @@ var sfComponents = {
 	Collapsible: passthrough(Collapsible),
 	Tooltip: ({ props, children }) => {
 		const { content } = props;
-		return children != null ? React.createElement(Tooltip, { content }, children) : React.createElement(Tooltip, { content });
+		return children == null ? React.createElement(Tooltip, { content }) : React.createElement(Tooltip, { content }, children);
 	},
 	Popover: ({ props, children }) => {
 		const { trigger } = props;
@@ -354,7 +354,7 @@ var sfComponents = {
 	}
 };
 //#endregion
-//#region ../../node_modules/.bun/@json-render+core@0.18.0/node_modules/@json-render/core/dist/chunk-AFLK3Q4T.mjs
+//#region ../../node_modules/.bun/@json-render+core@0.19.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.18.0/node_modules/@json-render/core/dist/index.mjs
+//#region ../../node_modules/.bun/@json-render+core@0.19.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(),
@@ -759,6 +759,20 @@ function evaluateVisibility(condition, ctx) {
 	if (isOrCondition(condition)) return condition.$or.some((child) => evaluateVisibility(child, ctx));
 	return evaluateCondition(condition, ctx);
 }
+function createDirectiveRegistry(directives) {
+	const registry = /* @__PURE__ */ new Map();
+	for (const d of directives) registry.set(d.name, d);
+	return registry;
+}
+function findDirective(value, directives) {
+	if (!directives || directives.size === 0) return void 0;
+	let match;
+	for (const [key, def] of directives) if (key in value) {
+		if (match) throw new Error(`Ambiguous directive: object has multiple directive keys ("${match.name}" and "${key}")`);
+		match = def;
+	}
+	return match;
+}
 function isStateExpression(value) {
 	return typeof value === "object" && value !== null && "$state" in value && typeof value.$state === "string";
 }
@@ -835,6 +849,8 @@ function resolvePropValue(value, ctx) {
 	});
 	if (Array.isArray(value)) return value.map((item) => resolvePropValue(item, ctx));
 	if (typeof value === "object") {
+		const directive = findDirective(value, ctx.directives);
+		if (directive) return directive.resolve(value, ctx);
 		const resolved = {};
 		for (const [key, val] of Object.entries(value)) resolved[key] = resolvePropValue(val, ctx);
 		return resolved;
@@ -982,28 +998,43 @@ var matchesImpl = (value, args) => {
 	return value === args?.other;
 };
 var builtInValidationFunctions = {
+	/**
+	* Check if value is not null, undefined, or empty string
+	*/
 	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;
 	},
+	/**
+	* Check if value is a valid email address
+	*/
 	email: (value) => {
 		if (typeof value !== "string") return false;
 		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
 	},
+	/**
+	* Check minimum string length
+	*/
 	minLength: (value, args) => {
 		if (typeof value !== "string") return false;
 		const min = args?.min;
 		if (typeof min !== "number") return false;
 		return value.length >= min;
 	},
+	/**
+	* Check maximum string length
+	*/
 	maxLength: (value, args) => {
 		if (typeof value !== "string") return false;
 		const max = args?.max;
 		if (typeof max !== "number") return false;
 		return value.length <= max;
 	},
+	/**
+	* Check if string matches a regex pattern
+	*/
 	pattern: (value, args) => {
 		if (typeof value !== "string") return false;
 		const pattern = args?.pattern;
@@ -1014,23 +1045,35 @@ var builtInValidationFunctions = {
 			return false;
 		}
 	},
+	/**
+	* Check minimum numeric value
+	*/
 	min: (value, args) => {
 		if (typeof value !== "number") return false;
 		const min = args?.min;
 		if (typeof min !== "number") return false;
 		return value >= min;
 	},
+	/**
+	* Check maximum numeric value
+	*/
 	max: (value, args) => {
 		if (typeof value !== "number") return false;
 		const max = args?.max;
 		if (typeof max !== "number") return false;
 		return value <= max;
 	},
+	/**
+	* Check if value is a number
+	*/
 	numeric: (value) => {
 		if (typeof value === "number") return !isNaN(value);
 		if (typeof value === "string") return !isNaN(parseFloat(value));
 		return false;
 	},
+	/**
+	* Check if value is a valid URL
+	*/
 	url: (value) => {
 		if (typeof value !== "string") return false;
 		try {
@@ -1040,8 +1083,19 @@ var builtInValidationFunctions = {
 			return false;
 		}
 	},
+	/**
+	* Check if value matches another field
+	*/
 	matches: matchesImpl,
+	/**
+	* Alias for matches with a more descriptive name for cross-field equality
+	*/
 	equalTo: matchesImpl,
+	/**
+	* Check if value is less than another field's value.
+	* Supports numbers, strings (useful for ISO date comparison), and
+	* cross-type numeric coercion (e.g. string "3" vs number 5).
+	*/
 	lessThan: (value, args) => {
 		const other = args?.other;
 		if (value == null || other == null || value === "" || other === "") return false;
@@ -1052,6 +1106,11 @@ var builtInValidationFunctions = {
 		if (!isNaN(numVal) && !isNaN(numOther)) return numVal < numOther;
 		return false;
 	},
+	/**
+	* Check if value is greater than another field's value.
+	* Supports numbers, strings (useful for ISO date comparison), and
+	* cross-type numeric coercion (e.g. string "7" vs number 5).
+	*/
 	greaterThan: (value, args) => {
 		const other = args?.other;
 		if (value == null || other == null || value === "" || other === "") return false;
@@ -1062,6 +1121,12 @@ var builtInValidationFunctions = {
 		if (!isNaN(numVal) && !isNaN(numOther)) return numVal > numOther;
 		return false;
 	},
+	/**
+	* Required only when a condition is met.
+	* Uses JS truthiness: 0, false, "", null, and undefined are all
+	* treated as "condition not met" (field not required), matching
+	* the visibility system's bare-condition semantics.
+	*/
 	requiredIf: (value, args) => {
 		if (!args?.field) return true;
 		if (value === null || value === void 0) return false;
@@ -1851,6 +1916,18 @@ Note: state patches appear right after the elements that use them, so the UI fil
 		for (const name of Object.keys(catalogFunctions)) lines.push(`   - ${name}`);
 		lines.push("");
 	}
+	const directives = options.directives;
+	if (directives && directives.length > 0) {
+		lines.push("CUSTOM DYNAMIC VALUES:");
+		lines.push("");
+		for (const d of directives) {
+			const desc = d.description ? ` (${d.description})` : "";
+			lines.push(`- ${d.name}${desc}: ${formatZodType(d.schema)}`);
+		}
+		lines.push("");
+		lines.push("Directives compose: any value field can contain another directive or a $state expression, resolved inside-out.");
+		lines.push("");
+	}
 	if (allComponents ? Object.entries(allComponents).some(([, def]) => {
 		if (!def.props) return false;
 		return formatZodType(def.props).includes("checks");
@@ -2277,26 +2354,40 @@ function diffToPatches(oldObj, newObj, basePath = "") {
 	return patches;
 }
 //#endregion
-//#region ../../node_modules/.bun/@json-render+react@0.18.0+3f10a4be4e334a9b/node_modules/@json-render/react/dist/chunk-WYDS23XB.mjs
+//#region ../../node_modules/.bun/@json-render+react@0.19.0+e14d3f224186685e/node_modules/@json-render/react/dist/chunk-WYDS23XB.mjs
 var schema = defineSchema((s) => ({
 	spec: s.object({
+		/** Root element key */
 		root: s.string(),
+		/** Flat map of elements by key */
 		elements: s.record(s.object({
+			/** Component type from catalog */
 			type: s.ref("catalog.components"),
+			/** Component props */
 			props: s.propsOf("catalog.components"),
+			/** Child element keys (flat reference) */
 			children: s.array(s.string()),
+			/** Visibility condition */
 			visible: s.any()
 		}))
 	}),
 	catalog: s.object({
+		/** Component definitions */
 		components: s.map({
+			/** Zod schema for component props */
 			props: s.zod(),
+			/** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */
 			slots: s.array(s.string()),
+			/** Description for AI generation hints */
 			description: s.string(),
+			/** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */
 			example: s.any()
 		}),
+		/** Action definitions (optional) */
 		actions: s.map({
+			/** Zod schema for action params */
 			params: s.zod(),
+			/** Description for AI generation hints */
 			description: s.string()
 		})
 	})
@@ -2332,7 +2423,7 @@ var schema = defineSchema((s) => ({
 	]
 });
 //#endregion
-//#region ../../node_modules/.bun/@json-render+react@0.18.0+3f10a4be4e334a9b/node_modules/@json-render/react/dist/index.mjs
+//#region ../../node_modules/.bun/@json-render+react@0.19.0+e14d3f224186685e/node_modules/@json-render/react/dist/index.mjs
 var StateContext = createContext(null);
 function computeInitialFlat(isControlled, initialState) {
 	if (isControlled) return null;
@@ -2894,6 +2985,10 @@ var FunctionsContext = React.createContext(EMPTY_FUNCTIONS);
 function useFunctions() {
 	return React.useContext(FunctionsContext);
 }
+var DirectivesContext = React.createContext(void 0);
+function useDirectives() {
+	return React.useContext(DirectivesContext);
+}
 function useDevtoolsActive() {
 	return React.useSyncExternalStore(subscribeDevtoolsActive, isDevtoolsActive, () => false);
 }
@@ -2904,6 +2999,7 @@ var ElementRenderer = React.memo(function ElementRenderer2({ element, elementKey
 	const { execute } = useActions();
 	const { getSnapshot, state: watchState } = useStateStore();
 	const functions = useFunctions();
+	const directives = useDirectives();
 	const fullCtx = useMemo(() => {
 		const base = repeatScope ? {
 			...ctx,
@@ -2912,11 +3008,13 @@ var ElementRenderer = React.memo(function ElementRenderer2({ element, elementKey
 			repeatBasePath: repeatScope.basePath
 		} : { ...ctx };
 		base.functions = functions;
+		base.directives = directives;
 		return base;
 	}, [
 		ctx,
 		repeatScope,
-		functions
+		functions,
+		directives
 	]);
 	const isVisible = element.visible === void 0 ? true : evaluateVisibility(element.visible, fullCtx);
 	const onBindings = element.on;
@@ -3113,7 +3211,8 @@ function Renderer({ spec, registry, loading, fallback }) {
 		fallback
 	});
 }
-function JSONUIProvider({ registry, store, initialState, handlers, navigate, validationFunctions, functions, onStateChange, children }) {
+function JSONUIProvider({ registry, store, initialState, handlers, navigate, validationFunctions, functions, directives, onStateChange, children }) {
+	const directiveRegistry = useMemo(() => directives ? createDirectiveRegistry(directives) : void 0, [directives]);
 	return /* @__PURE__ */ jsx(StateProvider, {
 		store,
 		initialState,
@@ -3123,9 +3222,12 @@ function JSONUIProvider({ registry, store, initialState, handlers, navigate, val
 			children: /* @__PURE__ */ jsx(ActionProvider, {
 				handlers,
 				navigate,
-				children: /* @__PURE__ */ jsxs(FunctionsContext.Provider, {
+				children: /* @__PURE__ */ jsx(FunctionsContext.Provider, {
 					value: functions ?? EMPTY_FUNCTIONS,
-					children: [children, /* @__PURE__ */ jsx(ConfirmationDialogManager, {})]
+					children: /* @__PURE__ */ jsxs(DirectivesContext.Provider, {
+						value: directiveRegistry,
+						children: [children, /* @__PURE__ */ jsx(ConfirmationDialogManager, {})]
+					})
 				})
 			})
 		}) })
@@ -3175,7 +3277,8 @@ function defineRegistry(_catalog, options) {
 }
 function createRenderer(catalog, components) {
 	const registry = components;
-	return function CatalogRenderer({ spec, store, state, onAction, onStateChange, functions, loading, fallback }) {
+	return function CatalogRenderer({ spec, store, state, onAction, onStateChange, functions, directives, loading, fallback }) {
+		const directiveRegistry = useMemo(() => directives ? createDirectiveRegistry(directives) : void 0, [directives]);
 		return /* @__PURE__ */ jsx(StateProvider, {
 			store,
 			initialState: state,
@@ -3187,14 +3290,17 @@ function createRenderer(catalog, components) {
 					},
 					has: () => true
 				}) : void 0,
-				children: /* @__PURE__ */ jsxs(FunctionsContext.Provider, {
+				children: /* @__PURE__ */ jsx(FunctionsContext.Provider, {
 					value: functions ?? EMPTY_FUNCTIONS,
-					children: [/* @__PURE__ */ jsx(Renderer, {
-						spec,
-						registry,
-						loading,
-						fallback
-					}), /* @__PURE__ */ jsx(ConfirmationDialogManager, {})]
+					children: /* @__PURE__ */ jsxs(DirectivesContext.Provider, {
+						value: directiveRegistry,
+						children: [/* @__PURE__ */ jsx(Renderer, {
+							spec,
+							registry,
+							loading,
+							fallback
+						}), /* @__PURE__ */ jsx(ConfirmationDialogManager, {})]
+					})
 				})
 			}) }) })
 		});
@@ -3632,4 +3738,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-B6iWiWwp.js.map
+//# sourceMappingURL=dist-6AtBsaJE.js.map