@json-render/react-native 0.7.0 → 0.9.0

package/dist/index.mjs

@@ -9,129 +9,43 @@ import {
 
 // src/contexts/state.tsx
 import {
-  createContext,
-  useContext,
-  useState,
-  useCallback,
-  useMemo,
-  useEffect,
-  useRef
-} from "react";
-import { getByPath, setByPath } from "@json-render/core";
-import { jsx } from "react/jsx-runtime";
-var StateContext = createContext(null);
-function StateProvider({
-  initialState = {},
-  onStateChange,
-  children
-}) {
-  const [state, setStateInternal] = useState(initialState);
-  const stateRef = useRef(state);
-  stateRef.current = state;
-  const initialStateJsonRef = useRef(JSON.stringify(initialState));
-  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 = useCallback(
-    (path) => getByPath(stateRef.current, path),
-    []
-  );
-  const set = useCallback(
-    (path, value2) => {
-      setStateInternal((prev) => {
-        const next = { ...prev };
-        setByPath(next, path, value2);
-        return next;
-      });
-      onStateChange?.(path, value2);
-    },
-    [onStateChange]
-  );
-  const update = useCallback(
-    (updates) => {
-      const entries = Object.entries(updates);
-      setStateInternal((prev) => {
-        const next = { ...prev };
-        for (const [path, value2] of entries) {
-          setByPath(next, path, value2);
-        }
-        return next;
-      });
-      for (const [path, value2] of entries) {
-        onStateChange?.(path, value2);
-      }
-    },
-    [onStateChange]
-  );
-  const value = useMemo(
-    () => ({
-      state,
-      get,
-      set,
-      update
-    }),
-    [state, get, set, update]
-  );
-  return /* @__PURE__ */ jsx(StateContext.Provider, { value, children });
-}
-function useStateStore() {
-  const ctx = useContext(StateContext);
-  if (!ctx) {
-    throw new Error("useStateStore must be used within a StateProvider");
-  }
-  return ctx;
-}
-function useStateValue(path) {
-  const { state } = useStateStore();
-  return getByPath(state, path);
-}
-function useStateBinding(path) {
-  const { state, set } = useStateStore();
-  const value = getByPath(state, path);
-  const setValue = useCallback(
-    (newValue) => set(path, newValue),
-    [path, set]
-  );
-  return [value, setValue];
-}
+  StateProvider,
+  useStateStore,
+  useStateValue,
+  useStateBinding
+} from "@internal/react-state";
 
 // src/contexts/visibility.tsx
 import {
-  createContext as createContext2,
-  useContext as useContext2,
-  useMemo as useMemo2
+  createContext,
+  useContext,
+  useMemo
 } from "react";
 import {
   evaluateVisibility
 } from "@json-render/core";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var VisibilityContext = createContext2(null);
+import { jsx } from "react/jsx-runtime";
+var VisibilityContext = createContext(null);
 function VisibilityProvider({ children }) {
   const { state } = useStateStore();
-  const ctx = useMemo2(
+  const ctx = useMemo(
     () => ({
       stateModel: state
     }),
     [state]
   );
-  const isVisible = useMemo2(
+  const isVisible = useMemo(
     () => (condition) => evaluateVisibility(condition, ctx),
     [ctx]
   );
-  const value = useMemo2(
+  const value = useMemo(
     () => ({ isVisible, ctx }),
     [isVisible, ctx]
   );
-  return /* @__PURE__ */ jsx2(VisibilityContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(VisibilityContext.Provider, { value, children });
 }
 function useVisibility() {
-  const ctx = useContext2(VisibilityContext);
+  const ctx = useContext(VisibilityContext);
   if (!ctx) {
     throw new Error("useVisibility must be used within a VisibilityProvider");
   }
@@ -144,18 +58,18 @@ function useIsVisible(condition) {
 
 // src/contexts/actions.tsx
 import {
-  createContext as createContext3,
-  useContext as useContext3,
-  useState as useState2,
-  useCallback as useCallback2,
-  useMemo as useMemo3
+  createContext as createContext2,
+  useContext as useContext2,
+  useState,
+  useCallback,
+  useMemo as useMemo2
 } from "react";
 import { Modal, View, Text, Pressable, StyleSheet } from "react-native";
 import {
   resolveAction,
   executeAction
 } from "@json-render/core";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var idCounter = 0;
 function generateUniqueId() {
   idCounter += 1;
@@ -188,25 +102,25 @@ function deepResolveValue(value, get) {
   }
   return value;
 }
-var ActionContext = createContext3(null);
+var ActionContext = createContext2(null);
 function ActionProvider({
   handlers: initialHandlers = {},
   navigate,
   children
 }) {
-  const { state, get, set } = useStateStore();
-  const [handlers, setHandlers] = useState2(initialHandlers);
-  const [loadingActions, setLoadingActions] = useState2(/* @__PURE__ */ new Set());
-  const [pendingConfirmation, setPendingConfirmation] = useState2(null);
-  const registerHandler = useCallback2(
+  const { get, set, getSnapshot } = useStateStore();
+  const [handlers, setHandlers] = useState(initialHandlers);
+  const [loadingActions, setLoadingActions] = useState(/* @__PURE__ */ new Set());
+  const [pendingConfirmation, setPendingConfirmation] = useState(null);
+  const registerHandler = useCallback(
     (name, handler) => {
       setHandlers((prev) => ({ ...prev, [name]: handler }));
     },
     []
   );
-  const execute = useCallback2(
+  const execute = useCallback(
     async (binding) => {
-      const resolved = resolveAction(binding, state);
+      const resolved = resolveAction(binding, getSnapshot());
       if (resolved.action === "setState" && resolved.params) {
         const statePath = resolved.params.statePath;
         const value2 = resolved.params.value;
@@ -329,15 +243,15 @@ function ActionProvider({
         });
       }
     },
-    [state, handlers, get, set, navigate]
+    [handlers, get, set, getSnapshot, navigate]
   );
-  const confirm = useCallback2(() => {
+  const confirm = useCallback(() => {
     pendingConfirmation?.resolve();
   }, [pendingConfirmation]);
-  const cancel = useCallback2(() => {
+  const cancel = useCallback(() => {
     pendingConfirmation?.reject();
   }, [pendingConfirmation]);
-  const value = useMemo3(
+  const value = useMemo2(
     () => ({
       handlers,
       loadingActions,
@@ -357,10 +271,10 @@ function ActionProvider({
       registerHandler
     ]
   );
-  return /* @__PURE__ */ jsx3(ActionContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx2(ActionContext.Provider, { value, children });
 }
 function useActions() {
-  const ctx = useContext3(ActionContext);
+  const ctx = useContext2(ActionContext);
   if (!ctx) {
     throw new Error("useActions must be used within an ActionProvider");
   }
@@ -369,7 +283,7 @@ function useActions() {
 function useAction(binding) {
   const { execute, loadingActions } = useActions();
   const isLoading = loadingActions.has(binding.action);
-  const executeAction2 = useCallback2(() => execute(binding), [execute, binding]);
+  const executeAction2 = useCallback(() => execute(binding), [execute, binding]);
   return { execute: executeAction2, isLoading };
 }
 function ConfirmDialog({
@@ -378,13 +292,13 @@ function ConfirmDialog({
   onCancel
 }) {
   const isDanger = confirm.variant === "danger";
-  return /* @__PURE__ */ jsx3(Modal, { transparent: true, animationType: "fade", visible: true, onRequestClose: onCancel, children: /* @__PURE__ */ jsx3(Pressable, { style: styles.overlay, onPress: onCancel, children: /* @__PURE__ */ jsxs(Pressable, { style: styles.dialog, onPress: () => {
+  return /* @__PURE__ */ jsx2(Modal, { transparent: true, animationType: "fade", visible: true, onRequestClose: onCancel, children: /* @__PURE__ */ jsx2(Pressable, { style: styles.overlay, onPress: onCancel, children: /* @__PURE__ */ jsxs(Pressable, { style: styles.dialog, onPress: () => {
   }, children: [
-    /* @__PURE__ */ jsx3(Text, { style: styles.title, children: confirm.title }),
-    /* @__PURE__ */ jsx3(Text, { style: styles.message, children: confirm.message }),
+    /* @__PURE__ */ jsx2(Text, { style: styles.title, children: confirm.title }),
+    /* @__PURE__ */ jsx2(Text, { style: styles.message, children: confirm.message }),
     /* @__PURE__ */ jsxs(View, { style: styles.buttons, children: [
-      /* @__PURE__ */ jsx3(Pressable, { style: styles.cancelButton, onPress: onCancel, children: /* @__PURE__ */ jsx3(Text, { style: styles.cancelButtonText, children: confirm.cancelLabel ?? "Cancel" }) }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx2(Pressable, { style: styles.cancelButton, onPress: onCancel, children: /* @__PURE__ */ jsx2(Text, { style: styles.cancelButtonText, children: confirm.cancelLabel ?? "Cancel" }) }),
+      /* @__PURE__ */ jsx2(
         Pressable,
         {
           style: [
@@ -392,7 +306,7 @@ function ConfirmDialog({
             isDanger && styles.confirmButtonDanger
           ],
           onPress: onConfirm,
-          children: /* @__PURE__ */ jsx3(Text, { style: styles.confirmButtonText, children: confirm.confirmLabel ?? "Confirm" })
+          children: /* @__PURE__ */ jsx2(Text, { style: styles.confirmButtonText, children: confirm.confirmLabel ?? "Confirm" })
         }
       )
     ] })
@@ -460,18 +374,18 @@ var styles = StyleSheet.create({
 });
 
 // src/contexts/validation.tsx
-import React4, {
-  createContext as createContext4,
-  useContext as useContext4,
-  useState as useState3,
-  useCallback as useCallback3,
-  useMemo as useMemo4
+import React3, {
+  createContext as createContext3,
+  useContext as useContext3,
+  useState as useState2,
+  useCallback as useCallback2,
+  useMemo as useMemo3
 } from "react";
 import {
   runValidation
 } from "@json-render/core";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var ValidationContext = createContext4(null);
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ValidationContext = createContext3(null);
 function dynamicArgsEqual(a, b) {
   if (a === b) return true;
   if (!a || !b) return false;
@@ -511,9 +425,9 @@ function ValidationProvider({
   children
 }) {
   const { state } = useStateStore();
-  const [fieldStates, setFieldStates] = useState3({});
-  const [fieldConfigs, setFieldConfigs] = useState3({});
-  const registerField = useCallback3(
+  const [fieldStates, setFieldStates] = useState2({});
+  const [fieldConfigs, setFieldConfigs] = useState2({});
+  const registerField = useCallback2(
     (path, config) => {
       setFieldConfigs((prev) => {
         const existing = prev[path];
@@ -525,7 +439,7 @@ function ValidationProvider({
     },
     []
   );
-  const validate = useCallback3(
+  const validate = useCallback2(
     (path, config) => {
       const segments = path.split("/").filter(Boolean);
       let value2 = state;
@@ -554,7 +468,7 @@ function ValidationProvider({
     },
     [state, customFunctions]
   );
-  const touch = useCallback3((path) => {
+  const touch = useCallback2((path) => {
     setFieldStates((prev) => ({
       ...prev,
       [path]: {
@@ -565,13 +479,13 @@ function ValidationProvider({
       }
     }));
   }, []);
-  const clear = useCallback3((path) => {
+  const clear = useCallback2((path) => {
     setFieldStates((prev) => {
       const { [path]: _, ...rest } = prev;
       return rest;
     });
   }, []);
-  const validateAll = useCallback3(() => {
+  const validateAll = useCallback2(() => {
     let allValid = true;
     for (const [path, config] of Object.entries(fieldConfigs)) {
       const result = validate(path, config);
@@ -581,7 +495,7 @@ function ValidationProvider({
     }
     return allValid;
   }, [fieldConfigs, validate]);
-  const value = useMemo4(
+  const value = useMemo3(
     () => ({
       customFunctions,
       fieldStates,
@@ -601,10 +515,10 @@ function ValidationProvider({
       registerField
     ]
   );
-  return /* @__PURE__ */ jsx4(ValidationContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx3(ValidationContext.Provider, { value, children });
 }
 function useValidation() {
-  const ctx = useContext4(ValidationContext);
+  const ctx = useContext3(ValidationContext);
   if (!ctx) {
     throw new Error("useValidation must be used within a ValidationProvider");
   }
@@ -618,7 +532,7 @@ function useFieldValidation(path, config) {
     clear: clearField,
     registerField
   } = useValidation();
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (config) {
       registerField(path, config);
     }
@@ -628,12 +542,12 @@ function useFieldValidation(path, config) {
     validated: false,
     result: null
   };
-  const validate = useCallback3(
+  const validate = useCallback2(
     () => validateField(path, config ?? { checks: [] }),
     [path, config, validateField]
   );
-  const touch = useCallback3(() => touchField(path), [path, touchField]);
-  const clear = useCallback3(() => clearField(path), [path, clearField]);
+  const touch = useCallback2(() => touchField(path), [path, touchField]);
+  const clear = useCallback2(() => clearField(path), [path, clearField]);
   return {
     state,
     validate,
@@ -645,32 +559,35 @@ function useFieldValidation(path, config) {
 }
 
 // src/contexts/repeat-scope.tsx
-import { createContext as createContext5, useContext as useContext5 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var RepeatScopeContext = createContext5(null);
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var RepeatScopeContext = createContext4(null);
 function RepeatScopeProvider({
   item,
   index,
   basePath,
   children
 }) {
-  return /* @__PURE__ */ jsx5(RepeatScopeContext.Provider, { value: { item, index, basePath }, children });
+  return /* @__PURE__ */ jsx4(RepeatScopeContext.Provider, { value: { item, index, basePath }, children });
 }
 function useRepeatScope() {
-  return useContext5(RepeatScopeContext);
+  return useContext4(RepeatScopeContext);
 }
 
+// src/index.ts
+import { createStateStore } from "@json-render/core";
+
 // src/renderer.tsx
-import React6, {
-  useCallback as useCallback5,
-  useMemo as useMemo5
+import React5, {
+  useCallback as useCallback4,
+  useMemo as useMemo4
 } from "react";
 import {
   resolveElementProps,
   resolveBindings,
   resolveActionParam,
   evaluateVisibility as evaluateVisibility2,
-  getByPath as getByPath3
+  getByPath as getByPath2
 } from "@json-render/core";
 
 // src/components/standard.tsx
@@ -692,10 +609,10 @@ import {
 } from "react-native";
 
 // src/hooks.ts
-import { useState as useState4, useCallback as useCallback4, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { useState as useState3, useCallback as useCallback3, useRef, useEffect } from "react";
 import {
-  setByPath as setByPath2,
-  getByPath as getByPath2,
+  setByPath,
+  getByPath,
   removeByPath,
   validateSpec,
   autoFixSpec,
@@ -703,7 +620,7 @@ import {
 } from "@json-render/core";
 function useBoundProp(propValue, bindingPath) {
   const { set } = useStateStore();
-  const setValue = useCallback4(
+  const setValue = useCallback3(
     (value) => {
       if (bindingPath) set(bindingPath, value);
     },
@@ -757,7 +674,7 @@ function setSpecValue(newSpec, path, value) {
   if (path.startsWith("/state/")) {
     if (!newSpec.state) newSpec.state = {};
     const statePath = path.slice("/state".length);
-    setByPath2(newSpec.state, statePath, value);
+    setByPath(newSpec.state, statePath, value);
     return;
   }
   if (path.startsWith("/elements/")) {
@@ -771,7 +688,7 @@ function setSpecValue(newSpec, path, value) {
       if (element) {
         const propPath = "/" + pathParts.slice(1).join("/");
         const newElement = { ...element };
-        setByPath2(
+        setByPath(
           newElement,
           propPath,
           value
@@ -814,7 +731,7 @@ function removeSpecValue(newSpec, path) {
 }
 function getSpecValue(spec, path) {
   if (path === "/root") return spec.root;
-  return getByPath2(spec, path);
+  return getByPath(spec, path);
 }
 function applyPatch(spec, patch) {
   const newSpec = { ...spec, elements: { ...spec.elements } };
@@ -855,22 +772,22 @@ function useUIStream({
   validate: enableValidation = false,
   maxRetries = 5
 }) {
-  const [spec, setSpec] = useState4(null);
-  const [isStreaming, setIsStreaming] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [rawLines, setRawLines] = useState4([]);
-  const abortControllerRef = useRef2(null);
-  const stop = useCallback4(() => {
+  const [spec, setSpec] = useState3(null);
+  const [isStreaming, setIsStreaming] = useState3(false);
+  const [error, setError] = useState3(null);
+  const [rawLines, setRawLines] = useState3([]);
+  const abortControllerRef = useRef(null);
+  const stop = useCallback3(() => {
     abortControllerRef.current?.abort();
     abortControllerRef.current = null;
     setIsStreaming(false);
   }, []);
-  const clear = useCallback4(() => {
+  const clear = useCallback3(() => {
     setSpec(null);
     setError(null);
     setRawLines([]);
   }, []);
-  const streamRequest = useCallback4(
+  const streamRequest = useCallback3(
     async (prompt, context, initialSpec, abortOnMalformed) => {
       let currentSpec = initialSpec;
       setSpec(currentSpec);
@@ -951,7 +868,7 @@ function useUIStream({
     },
     [api, fetchFn]
   );
-  const send = useCallback4(
+  const send = useCallback3(
     async (prompt, context) => {
       abortControllerRef.current?.abort();
       abortControllerRef.current = new AbortController();
@@ -1032,7 +949,7 @@ The current spec state is provided. Continue generating from where you left off.
       streamRequest
     ]
   );
-  useEffect2(() => {
+  useEffect(() => {
     return () => {
       abortControllerRef.current?.abort();
     };
@@ -1075,10 +992,10 @@ function flatToTree(elements) {
 }
 
 // src/components/standard.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function ContainerComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     View2,
     {
       style: {
@@ -1096,7 +1013,7 @@ function ContainerComponent({ element, children }) {
 }
 function RowComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     View2,
     {
       style: {
@@ -1114,7 +1031,7 @@ function RowComponent({ element, children }) {
 }
 function ColumnComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     View2,
     {
       style: {
@@ -1131,7 +1048,7 @@ function ColumnComponent({ element, children }) {
 }
 function ScrollContainerComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     ScrollView,
     {
       horizontal: p.horizontal ?? false,
@@ -1150,7 +1067,7 @@ function ScrollContainerComponent({ element, children }) {
 }
 function SafeAreaComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     SafeAreaView,
     {
       style: {
@@ -1163,7 +1080,7 @@ function SafeAreaComponent({ element, children }) {
 }
 function SpacerComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     View2,
     {
       style: {
@@ -1175,7 +1092,7 @@ function SpacerComponent({ element }) {
   );
 }
 function PressableComponent({ children, emit }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     Pressable2,
     {
       onPress: () => emit("press"),
@@ -1192,7 +1109,7 @@ function DividerComponent({ element }) {
   const isVertical = p.direction === "vertical";
   const thickness = p.thickness ?? 1;
   const color = p.color ?? "#e5e7eb";
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     View2,
     {
       style: {
@@ -1214,7 +1131,7 @@ var headingSizes = {
 function HeadingComponent({ element }) {
   const p = element.props;
   const level = p.level ?? "h2";
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     Text2,
     {
       style: {
@@ -1229,7 +1146,7 @@ function HeadingComponent({ element }) {
 }
 function ParagraphComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     Text2,
     {
       numberOfLines: p.numberOfLines ?? void 0,
@@ -1250,7 +1167,7 @@ var labelSizes = {
 };
 function LabelComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     Text2,
     {
       style: {
@@ -1264,7 +1181,7 @@ function LabelComponent({ element }) {
 }
 function ImageComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     RNImage,
     {
       source: { uri: p.src },
@@ -1289,7 +1206,7 @@ function AvatarComponent({ element }) {
   const size = avatarSizeMap[p.size ?? "md"];
   const bgColor = p.backgroundColor ?? "#6366f1";
   if (p.src) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx5(
       RNImage,
       {
         source: { uri: p.src },
@@ -1302,7 +1219,7 @@ function AvatarComponent({ element }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     View2,
     {
       style: {
@@ -1313,7 +1230,7 @@ function AvatarComponent({ element }) {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx5(
         Text2,
         {
           style: {
@@ -1340,7 +1257,7 @@ function BadgeComponent({ element }) {
     bg: "#e5e7eb",
     text: "#374151"
   };
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     View2,
     {
       style: {
@@ -1350,7 +1267,7 @@ function BadgeComponent({ element }) {
         borderRadius: 9999,
         alignSelf: "flex-start"
       },
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx5(
         Text2,
         {
           style: {
@@ -1383,8 +1300,8 @@ function ChipComponent({ element, emit }) {
         alignSelf: "flex-start"
       },
       children: [
-        /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: textColor }, children: p.label }),
-        hasRemove && /* @__PURE__ */ jsx6(Pressable2, { onPress: () => emit("remove"), style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: textColor, fontWeight: "700" }, children: "x" }) })
+        /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 14, color: textColor }, children: p.label }),
+        hasRemove && /* @__PURE__ */ jsx5(Pressable2, { onPress: () => emit("remove"), style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 14, color: textColor, fontWeight: "700" }, children: "x" }) })
       ]
     }
   );
@@ -1432,7 +1349,7 @@ function ButtonComponent({ element, emit }) {
         alignSelf: "flex-start"
       }),
       children: [
-        p.loading && /* @__PURE__ */ jsx6(
+        p.loading && /* @__PURE__ */ jsx5(
           ActivityIndicator,
           {
             size: "small",
@@ -1440,7 +1357,7 @@ function ButtonComponent({ element, emit }) {
             style: { marginRight: 8 }
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           Text2,
           {
             style: {
@@ -1463,8 +1380,8 @@ function TextInputComponent({ element, bindings }) {
   );
   const displayValue = boundValue ?? "";
   return /* @__PURE__ */ jsxs2(View2, { style: p.flex != null ? { flex: p.flex } : void 0, children: [
-    p.label && /* @__PURE__ */ jsx6(Text2, { style: inputStyles.label, children: p.label }),
-    /* @__PURE__ */ jsx6(
+    p.label && /* @__PURE__ */ jsx5(Text2, { style: inputStyles.label, children: p.label }),
+    /* @__PURE__ */ jsx5(
       RNTextInput,
       {
         placeholder: p.placeholder ?? void 0,
@@ -1493,7 +1410,7 @@ function SwitchComponent({ element, bindings }) {
   );
   const displayValue = checked ?? false;
   return /* @__PURE__ */ jsxs2(View2, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx5(
       RNSwitch,
       {
         value: displayValue,
@@ -1501,7 +1418,7 @@ function SwitchComponent({ element, bindings }) {
         disabled: p.disabled ?? false
       }
     ),
-    p.label && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
+    p.label && /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
   ] });
 }
 function CheckboxComponent({ element, bindings }) {
@@ -1527,7 +1444,7 @@ function CheckboxComponent({ element, bindings }) {
         opacity: p.disabled ? 0.5 : 1
       },
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           View2,
           {
             style: {
@@ -1540,10 +1457,10 @@ function CheckboxComponent({ element, bindings }) {
               alignItems: "center",
               justifyContent: "center"
             },
-            children: isChecked && /* @__PURE__ */ jsx6(Text2, { style: { color: "#ffffff", fontSize: 12, fontWeight: "700" }, children: "\u2713" })
+            children: isChecked && /* @__PURE__ */ jsx5(Text2, { style: { color: "#ffffff", fontSize: 12, fontWeight: "700" }, children: "\u2713" })
           }
         ),
-        p.label && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
+        p.label && /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
       ]
     }
   );
@@ -1565,12 +1482,12 @@ function SliderComponent({ element }) {
           marginBottom: 4
         },
         children: [
-          /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#374151" }, children: p.label }),
-          /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#6b7280" }, children: value })
+          /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 14, color: "#374151" }, children: p.label }),
+          /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 14, color: "#6b7280" }, children: value })
         ]
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx5(
       View2,
       {
         style: {
@@ -1579,7 +1496,7 @@ function SliderComponent({ element }) {
           borderRadius: 3,
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx5(
           View2,
           {
             style: {
@@ -1607,8 +1524,8 @@ function SearchBarComponent({ element, emit }) {
         paddingHorizontal: 12
       },
       children: [
-        /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#9ca3af", marginRight: 8 }, children: "Search" }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 16, color: "#9ca3af", marginRight: 8 }, children: "Search" }),
+        /* @__PURE__ */ jsx5(
           RNTextInput,
           {
             placeholder: p.placeholder ?? "Search...",
@@ -1629,13 +1546,13 @@ function SearchBarComponent({ element, emit }) {
 }
 function SpinnerComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx6(ActivityIndicator, { size: p.size ?? "small", color: p.color ?? "#3b82f6" });
+  return /* @__PURE__ */ jsx5(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__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     View2,
     {
       style: {
@@ -1644,7 +1561,7 @@ function ProgressBarComponent({ element }) {
         borderRadius: height / 2,
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx5(
         View2,
         {
           style: {
@@ -1680,7 +1597,7 @@ function CardComponent({ element, children }) {
         }
       ],
       children: [
-        p.title && /* @__PURE__ */ jsx6(
+        p.title && /* @__PURE__ */ jsx5(
           Text2,
           {
             style: {
@@ -1692,7 +1609,7 @@ function CardComponent({ element, children }) {
             children: p.title
           }
         ),
-        p.subtitle && /* @__PURE__ */ jsx6(
+        p.subtitle && /* @__PURE__ */ jsx5(
           Text2,
           {
             style: {
@@ -1721,7 +1638,7 @@ function ListItemComponent({ element, emit }) {
         paddingHorizontal: 16
       },
       children: [
-        p.leading && /* @__PURE__ */ jsx6(
+        p.leading && /* @__PURE__ */ jsx5(
           Text2,
           {
             style: {
@@ -1735,16 +1652,16 @@ function ListItemComponent({ element, emit }) {
           }
         ),
         /* @__PURE__ */ jsxs2(View2, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#111827" }, children: p.title }),
-          p.subtitle && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#6b7280", marginTop: 2 }, children: p.subtitle })
+          /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 16, color: "#111827" }, children: p.title }),
+          p.subtitle && /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 14, color: "#6b7280", marginTop: 2 }, children: p.subtitle })
         ] }),
-        p.trailing && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#6b7280", marginLeft: 8 }, children: p.trailing }),
-        p.showChevron && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#9ca3af", marginLeft: 8 }, children: ">" })
+        p.trailing && /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 14, color: "#6b7280", marginLeft: 8 }, children: p.trailing }),
+        p.showChevron && /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 16, color: "#9ca3af", marginLeft: 8 }, children: ">" })
       ]
     }
   );
   if (hasPress) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx5(
       Pressable2,
       {
         onPress: () => emit("press"),
@@ -1760,14 +1677,14 @@ function ListItemComponent({ element, emit }) {
 }
 function ModalComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     RNModal,
     {
       visible: p.visible,
       animationType: p.animationType ?? "slide",
       transparent: true,
-      children: /* @__PURE__ */ jsx6(View2, { style: modalStyles.overlay, children: /* @__PURE__ */ jsxs2(View2, { style: modalStyles.content, children: [
-        p.title && /* @__PURE__ */ jsx6(Text2, { style: modalStyles.title, children: p.title }),
+      children: /* @__PURE__ */ jsx5(View2, { style: modalStyles.overlay, children: /* @__PURE__ */ jsxs2(View2, { style: modalStyles.content, children: [
+        p.title && /* @__PURE__ */ jsx5(Text2, { style: modalStyles.title, children: p.title }),
         children
       ] }) })
     }
@@ -1890,8 +1807,8 @@ var modalStyles = StyleSheet2.create({
 });
 
 // src/renderer.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var ElementErrorBoundary = class extends React6.Component {
+import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var ElementErrorBoundary = class extends React5.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -1913,7 +1830,7 @@ var ElementErrorBoundary = class extends React6.Component {
     return this.props.children;
   }
 };
-var ElementRenderer = React6.memo(function ElementRenderer2({
+var ElementRenderer = React5.memo(function ElementRenderer2({
   element,
   spec,
   registry,
@@ -1923,7 +1840,8 @@ var ElementRenderer = React6.memo(function ElementRenderer2({
   const repeatScope = useRepeatScope();
   const { ctx } = useVisibility();
   const { execute } = useActions();
-  const fullCtx = useMemo5(
+  const { getSnapshot } = useStateStore();
+  const fullCtx = useMemo4(
     () => repeatScope ? {
       ...ctx,
       repeatItem: repeatScope.item,
@@ -1934,24 +1852,28 @@ var ElementRenderer = React6.memo(function ElementRenderer2({
   );
   const isVisible = element.visible === void 0 ? true : evaluateVisibility2(element.visible, fullCtx);
   const onBindings = element.on;
-  const emit = useCallback5(
-    (eventName) => {
+  const emit = useCallback4(
+    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] = resolveActionParam(val, fullCtx);
+          resolved[key] = resolveActionParam(val, liveCtx);
         }
-        execute({ ...b, params: resolved });
+        await execute({ ...b, params: resolved });
       }
     },
-    [onBindings, execute, fullCtx]
+    [onBindings, execute, fullCtx, getSnapshot]
   );
   if (!isVisible) {
     return null;
@@ -1965,7 +1887,7 @@ var ElementRenderer = React6.memo(function ElementRenderer2({
     console.warn(`No renderer for component type: ${resolvedElement.type}`);
     return null;
   }
-  const children = resolvedElement.repeat ? /* @__PURE__ */ jsx7(
+  const children = resolvedElement.repeat ? /* @__PURE__ */ jsx6(
     RepeatChildren,
     {
       element: resolvedElement,
@@ -1984,7 +1906,7 @@ var ElementRenderer = React6.memo(function ElementRenderer2({
       }
       return null;
     }
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(
       ElementRenderer2,
       {
         element: childElement,
@@ -1996,7 +1918,7 @@ var ElementRenderer = React6.memo(function ElementRenderer2({
       childKey
     );
   });
-  return /* @__PURE__ */ jsx7(ElementErrorBoundary, { elementType: resolvedElement.type, children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(ElementErrorBoundary, { elementType: resolvedElement.type, children: /* @__PURE__ */ jsx6(
     Component,
     {
       element: resolvedElement,
@@ -2017,12 +1939,12 @@ function RepeatChildren({
   const { state } = useStateStore();
   const repeat = element.repeat;
   const statePath = repeat.statePath;
-  const items = getByPath3(state, statePath) ?? [];
-  return /* @__PURE__ */ jsx7(Fragment, { children: items.map((itemValue, index) => {
+  const items = getByPath2(state, statePath) ?? [];
+  return /* @__PURE__ */ jsx6(Fragment, { children: items.map((itemValue, index) => {
     const key = repeat.key && typeof itemValue === "object" && itemValue !== null ? String(
       itemValue[repeat.key] ?? index
     ) : String(index);
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(
       RepeatScopeProvider,
       {
         item: itemValue,
@@ -2038,7 +1960,7 @@ function RepeatChildren({
             }
             return null;
           }
-          return /* @__PURE__ */ jsx7(
+          return /* @__PURE__ */ jsx6(
             ElementRenderer,
             {
               element: childElement,
@@ -2062,7 +1984,7 @@ function Renderer({
   loading,
   fallback
 }) {
-  const registry = useMemo5(
+  const registry = useMemo4(
     () => ({
       ...includeStandard ? standardComponents : {},
       ...customRegistry
@@ -2076,7 +1998,7 @@ function Renderer({
   if (!rootElement) {
     return null;
   }
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     ElementRenderer,
     {
       element: rootElement,
@@ -2089,6 +2011,7 @@ function Renderer({
 }
 function JSONUIProvider({
   registry,
+  store,
   initialState,
   handlers,
   navigate,
@@ -2096,17 +2019,25 @@ function JSONUIProvider({
   onStateChange,
   children
 }) {
-  return /* @__PURE__ */ jsx7(StateProvider, { initialState, onStateChange, children: /* @__PURE__ */ jsx7(VisibilityProvider, { children: /* @__PURE__ */ jsx7(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ jsxs3(ValidationProvider, { customFunctions: validationFunctions, children: [
-    children,
-    /* @__PURE__ */ jsx7(ConfirmationDialogManager, {})
-  ] }) }) }) });
+  return /* @__PURE__ */ jsx6(
+    StateProvider,
+    {
+      store,
+      initialState,
+      onStateChange,
+      children: /* @__PURE__ */ jsx6(VisibilityProvider, { children: /* @__PURE__ */ jsx6(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ jsxs3(ValidationProvider, { customFunctions: validationFunctions, children: [
+        children,
+        /* @__PURE__ */ jsx6(ConfirmationDialogManager, {})
+      ] }) }) })
+    }
+  );
 }
 function ConfirmationDialogManager() {
   const { pendingConfirmation, confirm, cancel } = useActions();
   if (!pendingConfirmation?.action.confirm) {
     return null;
   }
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     ConfirmDialog,
     {
       confirm: pendingConfirmation.action.confirm,
@@ -2164,6 +2095,7 @@ function createRenderer(catalog, components) {
   const registry = components;
   return function CatalogRenderer({
     spec,
+    store,
     state,
     onAction,
     onStateChange,
@@ -2179,18 +2111,26 @@ function createRenderer(catalog, components) {
         has: () => true
       }
     ) : void 0;
-    return /* @__PURE__ */ jsx7(StateProvider, { initialState: state, onStateChange, children: /* @__PURE__ */ jsx7(VisibilityProvider, { children: /* @__PURE__ */ jsx7(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ jsxs3(ValidationProvider, { children: [
-      /* @__PURE__ */ jsx7(
-        Renderer,
-        {
-          spec,
-          registry,
-          loading,
-          fallback
-        }
-      ),
-      /* @__PURE__ */ jsx7(ConfirmationDialogManager, {})
-    ] }) }) }) });
+    return /* @__PURE__ */ jsx6(
+      StateProvider,
+      {
+        store,
+        initialState: state,
+        onStateChange,
+        children: /* @__PURE__ */ jsx6(VisibilityProvider, { children: /* @__PURE__ */ jsx6(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ jsxs3(ValidationProvider, { children: [
+          /* @__PURE__ */ jsx6(
+            Renderer,
+            {
+              spec,
+              registry,
+              loading,
+              fallback
+            }
+          ),
+          /* @__PURE__ */ jsx6(ConfirmationDialogManager, {})
+        ] }) }) })
+      }
+    );
   };
 }
 export {
@@ -2204,6 +2144,7 @@ export {
   VisibilityProvider,
   createRenderer,
   createStandardActionHandlers,
+  createStateStore,
   defineRegistry,
   elementTreeSchema,
   flatToTree,