@json-render/react-native 0.7.0 → 0.9.0

package/dist/index.js

@@ -35,11 +35,12 @@ __export(index_exports, {
   JSONUIProvider: () => JSONUIProvider,
   Renderer: () => Renderer,
   RepeatScopeProvider: () => RepeatScopeProvider,
-  StateProvider: () => StateProvider,
+  StateProvider: () => import_react_state.StateProvider,
   ValidationProvider: () => ValidationProvider,
   VisibilityProvider: () => VisibilityProvider,
   createRenderer: () => createRenderer,
   createStandardActionHandlers: () => createStandardActionHandlers,
+  createStateStore: () => import_core7.createStateStore,
   defineRegistry: () => defineRegistry,
   elementTreeSchema: () => elementTreeSchema,
   flatToTree: () => flatToTree,
@@ -53,9 +54,9 @@ __export(index_exports, {
   useFieldValidation: () => useFieldValidation,
   useIsVisible: () => useIsVisible,
   useRepeatScope: () => useRepeatScope,
-  useStateBinding: () => useStateBinding,
-  useStateStore: () => useStateStore,
-  useStateValue: () => useStateValue,
+  useStateBinding: () => import_react_state.useStateBinding,
+  useStateStore: () => import_react_state.useStateStore,
+  useStateValue: () => import_react_state.useStateValue,
   useUIStream: () => useUIStream,
   useValidation: () => useValidation,
   useVisibility: () => useVisibility
@@ -63,116 +64,33 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/contexts/state.tsx
+var import_react_state = require("@internal/react-state");
+
+// src/contexts/visibility.tsx
 var import_react = require("react");
 var import_core = require("@json-render/core");
 var import_jsx_runtime = require("react/jsx-runtime");
-var StateContext = (0, import_react.createContext)(null);
-function StateProvider({
-  initialState = {},
-  onStateChange,
-  children
-}) {
-  const [state, setStateInternal] = (0, import_react.useState)(initialState);
-  const stateRef = (0, import_react.useRef)(state);
-  stateRef.current = state;
-  const initialStateJsonRef = (0, import_react.useRef)(JSON.stringify(initialState));
-  (0, import_react.useEffect)(() => {
-    const newJson = JSON.stringify(initialState);
-    if (newJson !== initialStateJsonRef.current) {
-      initialStateJsonRef.current = newJson;
-      if (initialState && Object.keys(initialState).length > 0) {
-        setStateInternal((prev) => ({ ...prev, ...initialState }));
-      }
-    }
-  }, [initialState]);
-  const get = (0, import_react.useCallback)(
-    (path) => (0, import_core.getByPath)(stateRef.current, path),
-    []
-  );
-  const set = (0, import_react.useCallback)(
-    (path, value2) => {
-      setStateInternal((prev) => {
-        const next = { ...prev };
-        (0, import_core.setByPath)(next, path, value2);
-        return next;
-      });
-      onStateChange?.(path, value2);
-    },
-    [onStateChange]
-  );
-  const update = (0, import_react.useCallback)(
-    (updates) => {
-      const entries = Object.entries(updates);
-      setStateInternal((prev) => {
-        const next = { ...prev };
-        for (const [path, value2] of entries) {
-          (0, import_core.setByPath)(next, path, value2);
-        }
-        return next;
-      });
-      for (const [path, value2] of entries) {
-        onStateChange?.(path, value2);
-      }
-    },
-    [onStateChange]
-  );
-  const value = (0, import_react.useMemo)(
-    () => ({
-      state,
-      get,
-      set,
-      update
-    }),
-    [state, get, set, update]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StateContext.Provider, { value, children });
-}
-function useStateStore() {
-  const ctx = (0, import_react.useContext)(StateContext);
-  if (!ctx) {
-    throw new Error("useStateStore must be used within a StateProvider");
-  }
-  return ctx;
-}
-function useStateValue(path) {
-  const { state } = useStateStore();
-  return (0, import_core.getByPath)(state, path);
-}
-function useStateBinding(path) {
-  const { state, set } = useStateStore();
-  const value = (0, import_core.getByPath)(state, path);
-  const setValue = (0, import_react.useCallback)(
-    (newValue) => set(path, newValue),
-    [path, set]
-  );
-  return [value, setValue];
-}
-
-// src/contexts/visibility.tsx
-var import_react2 = require("react");
-var import_core2 = require("@json-render/core");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var VisibilityContext = (0, import_react2.createContext)(null);
+var VisibilityContext = (0, import_react.createContext)(null);
 function VisibilityProvider({ children }) {
-  const { state } = useStateStore();
-  const ctx = (0, import_react2.useMemo)(
+  const { state } = (0, import_react_state.useStateStore)();
+  const ctx = (0, import_react.useMemo)(
     () => ({
       stateModel: state
     }),
     [state]
   );
-  const isVisible = (0, import_react2.useMemo)(
-    () => (condition) => (0, import_core2.evaluateVisibility)(condition, ctx),
+  const isVisible = (0, import_react.useMemo)(
+    () => (condition) => (0, import_core.evaluateVisibility)(condition, ctx),
     [ctx]
   );
-  const value = (0, import_react2.useMemo)(
+  const value = (0, import_react.useMemo)(
     () => ({ isVisible, ctx }),
     [isVisible, ctx]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VisibilityContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VisibilityContext.Provider, { value, children });
 }
 function useVisibility() {
-  const ctx = (0, import_react2.useContext)(VisibilityContext);
+  const ctx = (0, import_react.useContext)(VisibilityContext);
   if (!ctx) {
     throw new Error("useVisibility must be used within a VisibilityProvider");
   }
@@ -184,10 +102,10 @@ function useIsVisible(condition) {
 }
 
 // src/contexts/actions.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_react_native = require("react-native");
-var import_core3 = require("@json-render/core");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_core2 = require("@json-render/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var idCounter = 0;
 function generateUniqueId() {
   idCounter += 1;
@@ -220,25 +138,25 @@ function deepResolveValue(value, get) {
   }
   return value;
 }
-var ActionContext = (0, import_react3.createContext)(null);
+var ActionContext = (0, import_react2.createContext)(null);
 function ActionProvider({
   handlers: initialHandlers = {},
   navigate,
   children
 }) {
-  const { state, get, set } = useStateStore();
-  const [handlers, setHandlers] = (0, import_react3.useState)(initialHandlers);
-  const [loadingActions, setLoadingActions] = (0, import_react3.useState)(/* @__PURE__ */ new Set());
-  const [pendingConfirmation, setPendingConfirmation] = (0, import_react3.useState)(null);
-  const registerHandler = (0, import_react3.useCallback)(
+  const { get, set, getSnapshot } = (0, import_react_state.useStateStore)();
+  const [handlers, setHandlers] = (0, import_react2.useState)(initialHandlers);
+  const [loadingActions, setLoadingActions] = (0, import_react2.useState)(/* @__PURE__ */ new Set());
+  const [pendingConfirmation, setPendingConfirmation] = (0, import_react2.useState)(null);
+  const registerHandler = (0, import_react2.useCallback)(
     (name, handler) => {
       setHandlers((prev) => ({ ...prev, [name]: handler }));
     },
     []
   );
-  const execute = (0, import_react3.useCallback)(
+  const execute = (0, import_react2.useCallback)(
     async (binding) => {
-      const resolved = (0, import_core3.resolveAction)(binding, state);
+      const resolved = (0, import_core2.resolveAction)(binding, getSnapshot());
       if (resolved.action === "setState" && resolved.params) {
         const statePath = resolved.params.statePath;
         const value2 = resolved.params.value;
@@ -322,7 +240,7 @@ function ActionProvider({
         }).then(async () => {
           setLoadingActions((prev) => new Set(prev).add(resolved.action));
           try {
-            await (0, import_core3.executeAction)({
+            await (0, import_core2.executeAction)({
               action: resolved,
               handler,
               setState: set,
@@ -343,7 +261,7 @@ function ActionProvider({
       }
       setLoadingActions((prev) => new Set(prev).add(resolved.action));
       try {
-        await (0, import_core3.executeAction)({
+        await (0, import_core2.executeAction)({
           action: resolved,
           handler,
           setState: set,
@@ -361,15 +279,15 @@ function ActionProvider({
         });
       }
     },
-    [state, handlers, get, set, navigate]
+    [handlers, get, set, getSnapshot, navigate]
   );
-  const confirm = (0, import_react3.useCallback)(() => {
+  const confirm = (0, import_react2.useCallback)(() => {
     pendingConfirmation?.resolve();
   }, [pendingConfirmation]);
-  const cancel = (0, import_react3.useCallback)(() => {
+  const cancel = (0, import_react2.useCallback)(() => {
     pendingConfirmation?.reject();
   }, [pendingConfirmation]);
-  const value = (0, import_react3.useMemo)(
+  const value = (0, import_react2.useMemo)(
     () => ({
       handlers,
       loadingActions,
@@ -389,10 +307,10 @@ function ActionProvider({
       registerHandler
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ActionContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ActionContext.Provider, { value, children });
 }
 function useActions() {
-  const ctx = (0, import_react3.useContext)(ActionContext);
+  const ctx = (0, import_react2.useContext)(ActionContext);
   if (!ctx) {
     throw new Error("useActions must be used within an ActionProvider");
   }
@@ -401,7 +319,7 @@ function useActions() {
 function useAction(binding) {
   const { execute, loadingActions } = useActions();
   const isLoading = loadingActions.has(binding.action);
-  const executeAction2 = (0, import_react3.useCallback)(() => execute(binding), [execute, binding]);
+  const executeAction2 = (0, import_react2.useCallback)(() => execute(binding), [execute, binding]);
   return { execute: executeAction2, isLoading };
 }
 function ConfirmDialog({
@@ -410,13 +328,13 @@ function ConfirmDialog({
   onCancel
 }) {
   const isDanger = confirm.variant === "danger";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Modal, { transparent: true, animationType: "fade", visible: true, onRequestClose: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Pressable, { style: styles.overlay, onPress: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native.Pressable, { style: styles.dialog, onPress: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Modal, { transparent: true, animationType: "fade", visible: true, onRequestClose: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Pressable, { style: styles.overlay, onPress: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native.Pressable, { style: styles.dialog, onPress: () => {
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Text, { style: styles.title, children: confirm.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Text, { style: styles.message, children: confirm.message }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native.View, { style: styles.buttons, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Pressable, { style: styles.cancelButton, onPress: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Text, { style: styles.cancelButtonText, children: confirm.cancelLabel ?? "Cancel" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.title, children: confirm.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.message, children: confirm.message }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native.View, { style: styles.buttons, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Pressable, { style: styles.cancelButton, onPress: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.cancelButtonText, children: confirm.cancelLabel ?? "Cancel" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_react_native.Pressable,
         {
           style: [
@@ -424,7 +342,7 @@ function ConfirmDialog({
             isDanger && styles.confirmButtonDanger
           ],
           onPress: onConfirm,
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Text, { style: styles.confirmButtonText, children: confirm.confirmLabel ?? "Confirm" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.confirmButtonText, children: confirm.confirmLabel ?? "Confirm" })
         }
       )
     ] })
@@ -492,10 +410,10 @@ var styles = import_react_native.StyleSheet.create({
 });
 
 // src/contexts/validation.tsx
-var import_react4 = __toESM(require("react"));
-var import_core4 = require("@json-render/core");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ValidationContext = (0, import_react4.createContext)(null);
+var import_react3 = __toESM(require("react"));
+var import_core3 = require("@json-render/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ValidationContext = (0, import_react3.createContext)(null);
 function dynamicArgsEqual(a, b) {
   if (a === b) return true;
   if (!a || !b) return false;
@@ -534,10 +452,10 @@ function ValidationProvider({
   customFunctions = {},
   children
 }) {
-  const { state } = useStateStore();
-  const [fieldStates, setFieldStates] = (0, import_react4.useState)({});
-  const [fieldConfigs, setFieldConfigs] = (0, import_react4.useState)({});
-  const registerField = (0, import_react4.useCallback)(
+  const { state } = (0, import_react_state.useStateStore)();
+  const [fieldStates, setFieldStates] = (0, import_react3.useState)({});
+  const [fieldConfigs, setFieldConfigs] = (0, import_react3.useState)({});
+  const registerField = (0, import_react3.useCallback)(
     (path, config) => {
       setFieldConfigs((prev) => {
         const existing = prev[path];
@@ -549,7 +467,7 @@ function ValidationProvider({
     },
     []
   );
-  const validate = (0, import_react4.useCallback)(
+  const validate = (0, import_react3.useCallback)(
     (path, config) => {
       const segments = path.split("/").filter(Boolean);
       let value2 = state;
@@ -561,7 +479,7 @@ function ValidationProvider({
           break;
         }
       }
-      const result = (0, import_core4.runValidation)(config, {
+      const result = (0, import_core3.runValidation)(config, {
         value: value2,
         stateModel: state,
         customFunctions
@@ -578,7 +496,7 @@ function ValidationProvider({
     },
     [state, customFunctions]
   );
-  const touch = (0, import_react4.useCallback)((path) => {
+  const touch = (0, import_react3.useCallback)((path) => {
     setFieldStates((prev) => ({
       ...prev,
       [path]: {
@@ -589,13 +507,13 @@ function ValidationProvider({
       }
     }));
   }, []);
-  const clear = (0, import_react4.useCallback)((path) => {
+  const clear = (0, import_react3.useCallback)((path) => {
     setFieldStates((prev) => {
       const { [path]: _, ...rest } = prev;
       return rest;
     });
   }, []);
-  const validateAll = (0, import_react4.useCallback)(() => {
+  const validateAll = (0, import_react3.useCallback)(() => {
     let allValid = true;
     for (const [path, config] of Object.entries(fieldConfigs)) {
       const result = validate(path, config);
@@ -605,7 +523,7 @@ function ValidationProvider({
     }
     return allValid;
   }, [fieldConfigs, validate]);
-  const value = (0, import_react4.useMemo)(
+  const value = (0, import_react3.useMemo)(
     () => ({
       customFunctions,
       fieldStates,
@@ -625,10 +543,10 @@ function ValidationProvider({
       registerField
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ValidationContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ValidationContext.Provider, { value, children });
 }
 function useValidation() {
-  const ctx = (0, import_react4.useContext)(ValidationContext);
+  const ctx = (0, import_react3.useContext)(ValidationContext);
   if (!ctx) {
     throw new Error("useValidation must be used within a ValidationProvider");
   }
@@ -642,7 +560,7 @@ function useFieldValidation(path, config) {
     clear: clearField,
     registerField
   } = useValidation();
-  import_react4.default.useEffect(() => {
+  import_react3.default.useEffect(() => {
     if (config) {
       registerField(path, config);
     }
@@ -652,12 +570,12 @@ function useFieldValidation(path, config) {
     validated: false,
     result: null
   };
-  const validate = (0, import_react4.useCallback)(
+  const validate = (0, import_react3.useCallback)(
     () => validateField(path, config ?? { checks: [] }),
     [path, config, validateField]
   );
-  const touch = (0, import_react4.useCallback)(() => touchField(path), [path, touchField]);
-  const clear = (0, import_react4.useCallback)(() => clearField(path), [path, clearField]);
+  const touch = (0, import_react3.useCallback)(() => touchField(path), [path, touchField]);
+  const clear = (0, import_react3.useCallback)(() => clearField(path), [path, clearField]);
   return {
     state,
     validate,
@@ -669,24 +587,24 @@ function useFieldValidation(path, config) {
 }
 
 // src/contexts/repeat-scope.tsx
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var RepeatScopeContext = (0, import_react5.createContext)(null);
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var RepeatScopeContext = (0, import_react4.createContext)(null);
 function RepeatScopeProvider({
   item,
   index,
   basePath,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RepeatScopeContext.Provider, { value: { item, index, basePath }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RepeatScopeContext.Provider, { value: { item, index, basePath }, children });
 }
 function useRepeatScope() {
-  return (0, import_react5.useContext)(RepeatScopeContext);
+  return (0, import_react4.useContext)(RepeatScopeContext);
 }
 
 // src/schema.ts
-var import_core5 = require("@json-render/core");
-var schema = (0, import_core5.defineSchema)(
+var import_core4 = require("@json-render/core");
+var schema = (0, import_core4.defineSchema)(
   (s) => ({
     // What the AI-generated SPEC looks like
     spec: s.object({
@@ -762,19 +680,22 @@ var schema = (0, import_core5.defineSchema)(
 );
 var elementTreeSchema = schema;
 
-// src/renderer.tsx
-var import_react7 = __toESM(require("react"));
+// src/index.ts
 var import_core7 = require("@json-render/core");
 
+// src/renderer.tsx
+var import_react6 = __toESM(require("react"));
+var import_core6 = require("@json-render/core");
+
 // src/components/standard.tsx
 var import_react_native2 = require("react-native");
 
 // src/hooks.ts
-var import_react6 = require("react");
-var import_core6 = require("@json-render/core");
+var import_react5 = require("react");
+var import_core5 = require("@json-render/core");
 function useBoundProp(propValue, bindingPath) {
-  const { set } = useStateStore();
-  const setValue = (0, import_react6.useCallback)(
+  const { set } = (0, import_react_state.useStateStore)();
+  const setValue = (0, import_react5.useCallback)(
     (value) => {
       if (bindingPath) set(bindingPath, value);
     },
@@ -828,7 +749,7 @@ function setSpecValue(newSpec, path, value) {
   if (path.startsWith("/state/")) {
     if (!newSpec.state) newSpec.state = {};
     const statePath = path.slice("/state".length);
-    (0, import_core6.setByPath)(newSpec.state, statePath, value);
+    (0, import_core5.setByPath)(newSpec.state, statePath, value);
     return;
   }
   if (path.startsWith("/elements/")) {
@@ -842,7 +763,7 @@ function setSpecValue(newSpec, path, value) {
       if (element) {
         const propPath = "/" + pathParts.slice(1).join("/");
         const newElement = { ...element };
-        (0, import_core6.setByPath)(
+        (0, import_core5.setByPath)(
           newElement,
           propPath,
           value
@@ -859,7 +780,7 @@ function removeSpecValue(newSpec, path) {
   }
   if (path.startsWith("/state/") && newSpec.state) {
     const statePath = path.slice("/state".length);
-    (0, import_core6.removeByPath)(newSpec.state, statePath);
+    (0, import_core5.removeByPath)(newSpec.state, statePath);
     return;
   }
   if (path.startsWith("/elements/")) {
@@ -874,7 +795,7 @@ function removeSpecValue(newSpec, path) {
       if (element) {
         const propPath = "/" + pathParts.slice(1).join("/");
         const newElement = { ...element };
-        (0, import_core6.removeByPath)(
+        (0, import_core5.removeByPath)(
           newElement,
           propPath
         );
@@ -885,7 +806,7 @@ function removeSpecValue(newSpec, path) {
 }
 function getSpecValue(spec, path) {
   if (path === "/root") return spec.root;
-  return (0, import_core6.getByPath)(spec, path);
+  return (0, import_core5.getByPath)(spec, path);
 }
 function applyPatch(spec, patch) {
   const newSpec = { ...spec, elements: { ...spec.elements } };
@@ -926,22 +847,22 @@ function useUIStream({
   validate: enableValidation = false,
   maxRetries = 5
 }) {
-  const [spec, setSpec] = (0, import_react6.useState)(null);
-  const [isStreaming, setIsStreaming] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const [rawLines, setRawLines] = (0, import_react6.useState)([]);
-  const abortControllerRef = (0, import_react6.useRef)(null);
-  const stop = (0, import_react6.useCallback)(() => {
+  const [spec, setSpec] = (0, import_react5.useState)(null);
+  const [isStreaming, setIsStreaming] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const [rawLines, setRawLines] = (0, import_react5.useState)([]);
+  const abortControllerRef = (0, import_react5.useRef)(null);
+  const stop = (0, import_react5.useCallback)(() => {
     abortControllerRef.current?.abort();
     abortControllerRef.current = null;
     setIsStreaming(false);
   }, []);
-  const clear = (0, import_react6.useCallback)(() => {
+  const clear = (0, import_react5.useCallback)(() => {
     setSpec(null);
     setError(null);
     setRawLines([]);
   }, []);
-  const streamRequest = (0, import_react6.useCallback)(
+  const streamRequest = (0, import_react5.useCallback)(
     async (prompt, context, initialSpec, abortOnMalformed) => {
       let currentSpec = initialSpec;
       setSpec(currentSpec);
@@ -1022,7 +943,7 @@ function useUIStream({
     },
     [api, fetchFn]
   );
-  const send = (0, import_react6.useCallback)(
+  const send = (0, import_react5.useCallback)(
     async (prompt, context) => {
       abortControllerRef.current?.abort();
       abortControllerRef.current = new AbortController();
@@ -1059,12 +980,12 @@ The current spec state is provided. Continue generating from where you left off.
           if (!enableValidation || !currentSpec.root) {
             break;
           }
-          const { spec: fixedSpec, fixes } = (0, import_core6.autoFixSpec)(currentSpec);
+          const { spec: fixedSpec, fixes } = (0, import_core5.autoFixSpec)(currentSpec);
           if (fixes.length > 0) {
             currentSpec = fixedSpec;
             setSpec({ ...currentSpec });
           }
-          const validation = (0, import_core6.validateSpec)(currentSpec);
+          const validation = (0, import_core5.validateSpec)(currentSpec);
           if (validation.valid) {
             break;
           }
@@ -1075,7 +996,7 @@ The current spec state is provided. Continue generating from where you left off.
             break;
           }
           retriesUsed++;
-          const issueText = (0, import_core6.formatSpecIssues)(validation.issues);
+          const issueText = (0, import_core5.formatSpecIssues)(validation.issues);
           currentContext = { ...context, previousSpec: currentSpec };
           currentPrompt = `FIX THE FOLLOWING ERRORS in the current UI spec. Output ONLY the patches needed to fix these issues, do not recreate the entire UI.
 
@@ -1103,7 +1024,7 @@ The current spec state is provided. Continue generating from where you left off.
       streamRequest
     ]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     return () => {
       abortControllerRef.current?.abort();
     };
@@ -1146,10 +1067,10 @@ function flatToTree(elements) {
 }
 
 // src/components/standard.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ContainerComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.View,
     {
       style: {
@@ -1167,7 +1088,7 @@ function ContainerComponent({ element, children }) {
 }
 function RowComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.View,
     {
       style: {
@@ -1185,7 +1106,7 @@ function RowComponent({ element, children }) {
 }
 function ColumnComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.View,
     {
       style: {
@@ -1202,7 +1123,7 @@ function ColumnComponent({ element, children }) {
 }
 function ScrollContainerComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.ScrollView,
     {
       horizontal: p.horizontal ?? false,
@@ -1221,7 +1142,7 @@ function ScrollContainerComponent({ element, children }) {
 }
 function SafeAreaComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.SafeAreaView,
     {
       style: {
@@ -1234,7 +1155,7 @@ function SafeAreaComponent({ element, children }) {
 }
 function SpacerComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.View,
     {
       style: {
@@ -1246,7 +1167,7 @@ function SpacerComponent({ element }) {
   );
 }
 function PressableComponent({ children, emit }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.Pressable,
     {
       onPress: () => emit("press"),
@@ -1263,7 +1184,7 @@ function DividerComponent({ element }) {
   const isVertical = p.direction === "vertical";
   const thickness = p.thickness ?? 1;
   const color = p.color ?? "#e5e7eb";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.View,
     {
       style: {
@@ -1285,7 +1206,7 @@ var headingSizes = {
 function HeadingComponent({ element }) {
   const p = element.props;
   const level = p.level ?? "h2";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.Text,
     {
       style: {
@@ -1300,7 +1221,7 @@ function HeadingComponent({ element }) {
 }
 function ParagraphComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.Text,
     {
       numberOfLines: p.numberOfLines ?? void 0,
@@ -1321,7 +1242,7 @@ var labelSizes = {
 };
 function LabelComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.Text,
     {
       style: {
@@ -1335,7 +1256,7 @@ function LabelComponent({ element }) {
 }
 function ImageComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.Image,
     {
       source: { uri: p.src },
@@ -1360,7 +1281,7 @@ function AvatarComponent({ element }) {
   const size = avatarSizeMap[p.size ?? "md"];
   const bgColor = p.backgroundColor ?? "#6366f1";
   if (p.src) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_react_native2.Image,
       {
         source: { uri: p.src },
@@ -1373,7 +1294,7 @@ function AvatarComponent({ element }) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.View,
     {
       style: {
@@ -1384,7 +1305,7 @@ function AvatarComponent({ element }) {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_react_native2.Text,
         {
           style: {
@@ -1411,7 +1332,7 @@ function BadgeComponent({ element }) {
     bg: "#e5e7eb",
     text: "#374151"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.View,
     {
       style: {
@@ -1421,7 +1342,7 @@ function BadgeComponent({ element }) {
         borderRadius: 9999,
         alignSelf: "flex-start"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_react_native2.Text,
         {
           style: {
@@ -1440,7 +1361,7 @@ function ChipComponent({ element, emit }) {
   const bgColor = p.selected ? "#6366f1" : p.backgroundColor ?? "#f3f4f6";
   const textColor = p.selected ? "#ffffff" : "#374151";
   const hasRemove = !!element.on?.remove;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_react_native2.Pressable,
     {
       onPress: () => emit("press"),
@@ -1454,8 +1375,8 @@ function ChipComponent({ element, emit }) {
         alignSelf: "flex-start"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: textColor }, children: p.label }),
-        hasRemove && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Pressable, { onPress: () => emit("remove"), style: { marginLeft: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: textColor, fontWeight: "700" }, children: "x" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: textColor }, children: p.label }),
+        hasRemove && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Pressable, { onPress: () => emit("remove"), style: { marginLeft: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: textColor, fontWeight: "700" }, children: "x" }) })
       ]
     }
   );
@@ -1484,7 +1405,7 @@ function ButtonComponent({ element, emit }) {
     fontSize: 15
   };
   const disabled = p.disabled || p.loading;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_react_native2.Pressable,
     {
       disabled,
@@ -1503,7 +1424,7 @@ function ButtonComponent({ element, emit }) {
         alignSelf: "flex-start"
       }),
       children: [
-        p.loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        p.loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_react_native2.ActivityIndicator,
           {
             size: "small",
@@ -1511,7 +1432,7 @@ function ButtonComponent({ element, emit }) {
             style: { marginRight: 8 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_react_native2.Text,
           {
             style: {
@@ -1533,9 +1454,9 @@ function TextInputComponent({ element, bindings }) {
     bindings?.value
   );
   const displayValue = boundValue ?? "";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: p.flex != null ? { flex: p.flex } : void 0, children: [
-    p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: inputStyles.label, children: p.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native2.View, { style: p.flex != null ? { flex: p.flex } : void 0, children: [
+    p.label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: inputStyles.label, children: p.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_react_native2.TextInput,
       {
         placeholder: p.placeholder ?? void 0,
@@ -1563,8 +1484,8 @@ function SwitchComponent({ element, bindings }) {
     bindings?.checked
   );
   const displayValue = checked ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native2.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_react_native2.Switch,
       {
         value: displayValue,
@@ -1572,7 +1493,7 @@ function SwitchComponent({ element, bindings }) {
         disabled: p.disabled ?? false
       }
     ),
-    p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#374151" }, children: p.label })
+    p.label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#374151" }, children: p.label })
   ] });
 }
 function CheckboxComponent({ element, bindings }) {
@@ -1582,7 +1503,7 @@ function CheckboxComponent({ element, bindings }) {
     bindings?.checked
   );
   const isChecked = checked ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_react_native2.Pressable,
     {
       disabled: p.disabled ?? false,
@@ -1598,7 +1519,7 @@ function CheckboxComponent({ element, bindings }) {
         opacity: p.disabled ? 0.5 : 1
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_react_native2.View,
           {
             style: {
@@ -1611,10 +1532,10 @@ function CheckboxComponent({ element, bindings }) {
               alignItems: "center",
               justifyContent: "center"
             },
-            children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { color: "#ffffff", fontSize: 12, fontWeight: "700" }, children: "\u2713" })
+            children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { color: "#ffffff", fontSize: 12, fontWeight: "700" }, children: "\u2713" })
           }
         ),
-        p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#374151" }, children: p.label })
+        p.label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#374151" }, children: p.label })
       ]
     }
   );
@@ -1626,8 +1547,8 @@ function SliderComponent({ element }) {
   const value = p.value ?? min;
   const progress = max > min ? (value - min) / (max - min) : 0;
   const trackColor = p.color ?? "#3b82f6";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { children: [
-    p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native2.View, { children: [
+    p.label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       import_react_native2.View,
       {
         style: {
@@ -1636,12 +1557,12 @@ function SliderComponent({ element }) {
           marginBottom: 4
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#374151" }, children: p.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280" }, children: value })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#374151" }, children: p.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280" }, children: value })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_react_native2.View,
       {
         style: {
@@ -1650,7 +1571,7 @@ function SliderComponent({ element }) {
           borderRadius: 3,
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_react_native2.View,
           {
             style: {
@@ -1667,7 +1588,7 @@ function SliderComponent({ element }) {
 }
 function SearchBarComponent({ element, emit }) {
   const p = element.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_react_native2.View,
     {
       style: {
@@ -1678,8 +1599,8 @@ function SearchBarComponent({ element, emit }) {
         paddingHorizontal: 12
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#9ca3af", marginRight: 8 }, children: "Search" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#9ca3af", marginRight: 8 }, children: "Search" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_react_native2.TextInput,
           {
             placeholder: p.placeholder ?? "Search...",
@@ -1700,13 +1621,13 @@ function SearchBarComponent({ element, emit }) {
 }
 function SpinnerComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.ActivityIndicator, { size: p.size ?? "small", color: p.color ?? "#3b82f6" });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.ActivityIndicator, { size: p.size ?? "small", color: p.color ?? "#3b82f6" });
 }
 function ProgressBarComponent({ element }) {
   const p = element.props;
   const height = p.height ?? 6;
   const progress = Math.min(Math.max(p.progress, 0), 1);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.View,
     {
       style: {
@@ -1715,7 +1636,7 @@ function ProgressBarComponent({ element }) {
         borderRadius: height / 2,
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_react_native2.View,
         {
           style: {
@@ -1733,7 +1654,7 @@ function CardComponent({ element, children }) {
   const p = element.props;
   const elevated = p.elevated !== false;
   const padding = p.padding ?? 16;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_react_native2.View,
     {
       style: [
@@ -1751,7 +1672,7 @@ function CardComponent({ element, children }) {
         }
       ],
       children: [
-        p.title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        p.title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_react_native2.Text,
           {
             style: {
@@ -1763,7 +1684,7 @@ function CardComponent({ element, children }) {
             children: p.title
           }
         ),
-        p.subtitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        p.subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_react_native2.Text,
           {
             style: {
@@ -1782,7 +1703,7 @@ function CardComponent({ element, children }) {
 function ListItemComponent({ element, emit }) {
   const p = element.props;
   const hasPress = !!element.on?.press;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_react_native2.View,
     {
       style: {
@@ -1792,7 +1713,7 @@ function ListItemComponent({ element, emit }) {
         paddingHorizontal: 16
       },
       children: [
-        p.leading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        p.leading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_react_native2.Text,
           {
             style: {
@@ -1805,17 +1726,17 @@ function ListItemComponent({ element, emit }) {
             children: p.leading
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#111827" }, children: p.title }),
-          p.subtitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280", marginTop: 2 }, children: p.subtitle })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native2.View, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#111827" }, children: p.title }),
+          p.subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280", marginTop: 2 }, children: p.subtitle })
         ] }),
-        p.trailing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280", marginLeft: 8 }, children: p.trailing }),
-        p.showChevron && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#9ca3af", marginLeft: 8 }, children: ">" })
+        p.trailing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280", marginLeft: 8 }, children: p.trailing }),
+        p.showChevron && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#9ca3af", marginLeft: 8 }, children: ">" })
       ]
     }
   );
   if (hasPress) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_react_native2.Pressable,
       {
         onPress: () => emit("press"),
@@ -1831,14 +1752,14 @@ function ListItemComponent({ element, emit }) {
 }
 function ModalComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_native2.Modal,
     {
       visible: p.visible,
       animationType: p.animationType ?? "slide",
       transparent: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.View, { style: modalStyles.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: modalStyles.content, children: [
-        p.title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: modalStyles.title, children: p.title }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.View, { style: modalStyles.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native2.View, { style: modalStyles.content, children: [
+        p.title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: modalStyles.title, children: p.title }),
         children
       ] }) })
     }
@@ -1961,8 +1882,8 @@ var modalStyles = import_react_native2.StyleSheet.create({
 });
 
 // src/renderer.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var ElementErrorBoundary = class extends import_react7.default.Component {
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ElementErrorBoundary = class extends import_react6.default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -1984,7 +1905,7 @@ var ElementErrorBoundary = class extends import_react7.default.Component {
     return this.props.children;
   }
 };
-var ElementRenderer = import_react7.default.memo(function ElementRenderer2({
+var ElementRenderer = import_react6.default.memo(function ElementRenderer2({
   element,
   spec,
   registry,
@@ -1994,7 +1915,8 @@ var ElementRenderer = import_react7.default.memo(function ElementRenderer2({
   const repeatScope = useRepeatScope();
   const { ctx } = useVisibility();
   const { execute } = useActions();
-  const fullCtx = (0, import_react7.useMemo)(
+  const { getSnapshot } = (0, import_react_state.useStateStore)();
+  const fullCtx = (0, import_react6.useMemo)(
     () => repeatScope ? {
       ...ctx,
       repeatItem: repeatScope.item,
@@ -2003,40 +1925,44 @@ var ElementRenderer = import_react7.default.memo(function ElementRenderer2({
     } : ctx,
     [ctx, repeatScope]
   );
-  const isVisible = element.visible === void 0 ? true : (0, import_core7.evaluateVisibility)(element.visible, fullCtx);
+  const isVisible = element.visible === void 0 ? true : (0, import_core6.evaluateVisibility)(element.visible, fullCtx);
   const onBindings = element.on;
-  const emit = (0, import_react7.useCallback)(
-    (eventName) => {
+  const emit = (0, import_react6.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) {
-          execute(b);
+          await execute(b);
           continue;
         }
+        const liveCtx = {
+          ...fullCtx,
+          stateModel: getSnapshot()
+        };
         const resolved = {};
         for (const [key, val] of Object.entries(b.params)) {
-          resolved[key] = (0, import_core7.resolveActionParam)(val, fullCtx);
+          resolved[key] = (0, import_core6.resolveActionParam)(val, liveCtx);
         }
-        execute({ ...b, params: resolved });
+        await execute({ ...b, params: resolved });
       }
     },
-    [onBindings, execute, fullCtx]
+    [onBindings, execute, fullCtx, getSnapshot]
   );
   if (!isVisible) {
     return null;
   }
   const rawProps = element.props;
-  const elementBindings = (0, import_core7.resolveBindings)(rawProps, fullCtx);
-  const resolvedProps = (0, import_core7.resolveElementProps)(rawProps, fullCtx);
+  const elementBindings = (0, import_core6.resolveBindings)(rawProps, fullCtx);
+  const resolvedProps = (0, import_core6.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__ */ (0, import_jsx_runtime7.jsx)(
+  const children = resolvedElement.repeat ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     RepeatChildren,
     {
       element: resolvedElement,
@@ -2055,7 +1981,7 @@ var ElementRenderer = import_react7.default.memo(function ElementRenderer2({
       }
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ElementRenderer2,
       {
         element: childElement,
@@ -2067,7 +1993,7 @@ var ElementRenderer = import_react7.default.memo(function ElementRenderer2({
       childKey
     );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ElementErrorBoundary, { elementType: resolvedElement.type, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ElementErrorBoundary, { elementType: resolvedElement.type, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Component,
     {
       element: resolvedElement,
@@ -2085,15 +2011,15 @@ function RepeatChildren({
   loading,
   fallback
 }) {
-  const { state } = useStateStore();
+  const { state } = (0, import_react_state.useStateStore)();
   const repeat = element.repeat;
   const statePath = repeat.statePath;
-  const items = (0, import_core7.getByPath)(state, statePath) ?? [];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: items.map((itemValue, index) => {
+  const items = (0, import_core6.getByPath)(state, statePath) ?? [];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: items.map((itemValue, index) => {
     const key = repeat.key && typeof itemValue === "object" && itemValue !== null ? String(
       itemValue[repeat.key] ?? index
     ) : String(index);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       RepeatScopeProvider,
       {
         item: itemValue,
@@ -2109,7 +2035,7 @@ function RepeatChildren({
             }
             return null;
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             ElementRenderer,
             {
               element: childElement,
@@ -2133,7 +2059,7 @@ function Renderer({
   loading,
   fallback
 }) {
-  const registry = (0, import_react7.useMemo)(
+  const registry = (0, import_react6.useMemo)(
     () => ({
       ...includeStandard ? standardComponents : {},
       ...customRegistry
@@ -2147,7 +2073,7 @@ function Renderer({
   if (!rootElement) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     ElementRenderer,
     {
       element: rootElement,
@@ -2160,6 +2086,7 @@ function Renderer({
 }
 function JSONUIProvider({
   registry,
+  store,
   initialState,
   handlers,
   navigate,
@@ -2167,17 +2094,25 @@ function JSONUIProvider({
   onStateChange,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StateProvider, { initialState, onStateChange, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ValidationProvider, { customFunctions: validationFunctions, children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmationDialogManager, {})
-  ] }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_state.StateProvider,
+    {
+      store,
+      initialState,
+      onStateChange,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ValidationProvider, { customFunctions: validationFunctions, children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ConfirmationDialogManager, {})
+      ] }) }) })
+    }
+  );
 }
 function ConfirmationDialogManager() {
   const { pendingConfirmation, confirm, cancel } = useActions();
   if (!pendingConfirmation?.action.confirm) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     ConfirmDialog,
     {
       confirm: pendingConfirmation.action.confirm,
@@ -2235,6 +2170,7 @@ function createRenderer(catalog, components) {
   const registry = components;
   return function CatalogRenderer({
     spec,
+    store,
     state,
     onAction,
     onStateChange,
@@ -2250,18 +2186,26 @@ function createRenderer(catalog, components) {
         has: () => true
       }
     ) : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StateProvider, { initialState: state, onStateChange, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ValidationProvider, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        Renderer,
-        {
-          spec,
-          registry,
-          loading,
-          fallback
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmationDialogManager, {})
-    ] }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_state.StateProvider,
+      {
+        store,
+        initialState: state,
+        onStateChange,
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ValidationProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Renderer,
+            {
+              spec,
+              registry,
+              loading,
+              fallback
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ConfirmationDialogManager, {})
+        ] }) }) })
+      }
+    );
   };
 }
 
@@ -2671,6 +2615,7 @@ var standardActionDefinitions = {
   VisibilityProvider,
   createRenderer,
   createStandardActionHandlers,
+  createStateStore,
   defineRegistry,
   elementTreeSchema,
   flatToTree,