@json-render/react-native 0.9.0 → 0.9.1

package/dist/index.mjs

@@ -7,45 +7,170 @@ import {
   schema
 } from "./chunk-T27PQA6P.mjs";
 
-// src/contexts/state.tsx
+// ../react-state/dist/index.mjs
 import {
-  StateProvider,
-  useStateStore,
-  useStateValue,
-  useStateBinding
-} from "@internal/react-state";
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore
+} from "react";
+import {
+  getByPath,
+  createStateStore
+} from "@json-render/core";
+import { flattenToPointers } from "@json-render/core/store-utils";
+import { jsx } from "react/jsx-runtime";
+var StateContext = createContext(null);
+function computeInitialFlat(isControlled, initialState) {
+  if (isControlled) return null;
+  if (Object.keys(initialState).length === 0) return {};
+  return flattenToPointers(initialState);
+}
+function StateProvider({
+  store: externalStore,
+  initialState = {},
+  onStateChange,
+  children
+}) {
+  const internalStoreRef = useRef(void 0);
+  if (!externalStore && !internalStoreRef.current) {
+    internalStoreRef.current = createStateStore(initialState);
+  }
+  const store = externalStore ?? internalStoreRef.current;
+  const storeRef = useRef(store);
+  storeRef.current = store;
+  const isControlledRef = useRef(!!externalStore);
+  isControlledRef.current = !!externalStore;
+  const initialModeRef = useRef(externalStore ? "controlled" : "uncontrolled");
+  const modeWarnedRef = useRef(false);
+  if (process.env.NODE_ENV !== "production") {
+    const currentMode = externalStore ? "controlled" : "uncontrolled";
+    if (currentMode !== initialModeRef.current && !modeWarnedRef.current) {
+      modeWarnedRef.current = true;
+      console.warn(
+        `StateProvider: switching from ${initialModeRef.current} to ${currentMode} mode is not supported.`
+      );
+    }
+  }
+  const prevInitialStateRef = useRef(initialState);
+  const prevFlatRef = useRef(
+    computeInitialFlat(!!externalStore, initialState)
+  );
+  useEffect(() => {
+    if (externalStore) return;
+    if (initialState === prevInitialStateRef.current) return;
+    prevInitialStateRef.current = initialState;
+    const nextFlat = initialState && Object.keys(initialState).length > 0 ? flattenToPointers(initialState) : {};
+    const prevFlat = prevFlatRef.current ?? {};
+    const allKeys = /* @__PURE__ */ new Set([
+      ...Object.keys(prevFlat),
+      ...Object.keys(nextFlat)
+    ]);
+    const updates = {};
+    for (const key of allKeys) {
+      if (prevFlat[key] !== nextFlat[key]) {
+        updates[key] = key in nextFlat ? nextFlat[key] : void 0;
+      }
+    }
+    prevFlatRef.current = nextFlat;
+    if (Object.keys(updates).length > 0) {
+      store.update(updates);
+    }
+  }, [externalStore, initialState, store]);
+  const state = useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    store.getServerSnapshot ?? store.getSnapshot
+  );
+  const onStateChangeRef = useRef(onStateChange);
+  onStateChangeRef.current = onStateChange;
+  const set = useCallback((path, value2) => {
+    const s = storeRef.current;
+    const prev = s.getSnapshot();
+    s.set(path, value2);
+    if (!isControlledRef.current && s.getSnapshot() !== prev) {
+      onStateChangeRef.current?.([{ path, value: value2 }]);
+    }
+  }, []);
+  const update = useCallback((updates) => {
+    const s = storeRef.current;
+    const prev = s.getSnapshot();
+    s.update(updates);
+    if (!isControlledRef.current && s.getSnapshot() !== prev) {
+      const changes = [];
+      for (const [path, value2] of Object.entries(updates)) {
+        if (getByPath(prev, path) !== value2) {
+          changes.push({ path, value: value2 });
+        }
+      }
+      if (changes.length > 0) {
+        onStateChangeRef.current?.(changes);
+      }
+    }
+  }, []);
+  const get = useCallback((path) => storeRef.current.get(path), []);
+  const getSnapshot = useCallback(() => storeRef.current.getSnapshot(), []);
+  const value = useMemo(
+    () => ({ state, get, set, update, getSnapshot }),
+    [state, get, set, update, getSnapshot]
+  );
+  return /* @__PURE__ */ jsx(StateContext.Provider, { value, children });
+}
+function useStateStore() {
+  const ctx = useContext(StateContext);
+  if (!ctx) {
+    throw new Error("useStateStore must be used within a StateProvider");
+  }
+  return ctx;
+}
+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];
+}
 
 // src/contexts/visibility.tsx
 import {
-  createContext,
-  useContext,
-  useMemo
+  createContext as createContext2,
+  useContext as useContext2,
+  useMemo as useMemo2
 } from "react";
 import {
   evaluateVisibility
 } from "@json-render/core";
-import { jsx } from "react/jsx-runtime";
-var VisibilityContext = createContext(null);
+import { jsx as jsx2 } from "react/jsx-runtime";
+var VisibilityContext = createContext2(null);
 function VisibilityProvider({ children }) {
   const { state } = useStateStore();
-  const ctx = useMemo(
+  const ctx = useMemo2(
     () => ({
       stateModel: state
     }),
     [state]
   );
-  const isVisible = useMemo(
+  const isVisible = useMemo2(
     () => (condition) => evaluateVisibility(condition, ctx),
     [ctx]
   );
-  const value = useMemo(
+  const value = useMemo2(
     () => ({ isVisible, ctx }),
     [isVisible, ctx]
   );
-  return /* @__PURE__ */ jsx(VisibilityContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx2(VisibilityContext.Provider, { value, children });
 }
 function useVisibility() {
-  const ctx = useContext(VisibilityContext);
+  const ctx = useContext2(VisibilityContext);
   if (!ctx) {
     throw new Error("useVisibility must be used within a VisibilityProvider");
   }
@@ -58,18 +183,18 @@ function useIsVisible(condition) {
 
 // src/contexts/actions.tsx
 import {
-  createContext as createContext2,
-  useContext as useContext2,
+  createContext as createContext3,
+  useContext as useContext3,
   useState,
-  useCallback,
-  useMemo as useMemo2
+  useCallback as useCallback2,
+  useMemo as useMemo3
 } from "react";
 import { Modal, View, Text, Pressable, StyleSheet } from "react-native";
 import {
   resolveAction,
   executeAction
 } from "@json-render/core";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var idCounter = 0;
 function generateUniqueId() {
   idCounter += 1;
@@ -102,7 +227,7 @@ function deepResolveValue(value, get) {
   }
   return value;
 }
-var ActionContext = createContext2(null);
+var ActionContext = createContext3(null);
 function ActionProvider({
   handlers: initialHandlers = {},
   navigate,
@@ -112,13 +237,13 @@ function ActionProvider({
   const [handlers, setHandlers] = useState(initialHandlers);
   const [loadingActions, setLoadingActions] = useState(/* @__PURE__ */ new Set());
   const [pendingConfirmation, setPendingConfirmation] = useState(null);
-  const registerHandler = useCallback(
+  const registerHandler = useCallback2(
     (name, handler) => {
       setHandlers((prev) => ({ ...prev, [name]: handler }));
     },
     []
   );
-  const execute = useCallback(
+  const execute = useCallback2(
     async (binding) => {
       const resolved = resolveAction(binding, getSnapshot());
       if (resolved.action === "setState" && resolved.params) {
@@ -245,13 +370,13 @@ function ActionProvider({
     },
     [handlers, get, set, getSnapshot, navigate]
   );
-  const confirm = useCallback(() => {
+  const confirm = useCallback2(() => {
     pendingConfirmation?.resolve();
   }, [pendingConfirmation]);
-  const cancel = useCallback(() => {
+  const cancel = useCallback2(() => {
     pendingConfirmation?.reject();
   }, [pendingConfirmation]);
-  const value = useMemo2(
+  const value = useMemo3(
     () => ({
       handlers,
       loadingActions,
@@ -271,10 +396,10 @@ function ActionProvider({
       registerHandler
     ]
   );
-  return /* @__PURE__ */ jsx2(ActionContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx3(ActionContext.Provider, { value, children });
 }
 function useActions() {
-  const ctx = useContext2(ActionContext);
+  const ctx = useContext3(ActionContext);
   if (!ctx) {
     throw new Error("useActions must be used within an ActionProvider");
   }
@@ -283,7 +408,7 @@ function useActions() {
 function useAction(binding) {
   const { execute, loadingActions } = useActions();
   const isLoading = loadingActions.has(binding.action);
-  const executeAction2 = useCallback(() => execute(binding), [execute, binding]);
+  const executeAction2 = useCallback2(() => execute(binding), [execute, binding]);
   return { execute: executeAction2, isLoading };
 }
 function ConfirmDialog({
@@ -292,13 +417,13 @@ function ConfirmDialog({
   onCancel
 }) {
   const isDanger = confirm.variant === "danger";
-  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: () => {
+  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: () => {
   }, children: [
-    /* @__PURE__ */ jsx2(Text, { style: styles.title, children: confirm.title }),
-    /* @__PURE__ */ jsx2(Text, { style: styles.message, children: confirm.message }),
+    /* @__PURE__ */ jsx3(Text, { style: styles.title, children: confirm.title }),
+    /* @__PURE__ */ jsx3(Text, { style: styles.message, children: confirm.message }),
     /* @__PURE__ */ jsxs(View, { style: styles.buttons, children: [
-      /* @__PURE__ */ jsx2(Pressable, { style: styles.cancelButton, onPress: onCancel, children: /* @__PURE__ */ jsx2(Text, { style: styles.cancelButtonText, children: confirm.cancelLabel ?? "Cancel" }) }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(Pressable, { style: styles.cancelButton, onPress: onCancel, children: /* @__PURE__ */ jsx3(Text, { style: styles.cancelButtonText, children: confirm.cancelLabel ?? "Cancel" }) }),
+      /* @__PURE__ */ jsx3(
         Pressable,
         {
           style: [
@@ -306,7 +431,7 @@ function ConfirmDialog({
             isDanger && styles.confirmButtonDanger
           ],
           onPress: onConfirm,
-          children: /* @__PURE__ */ jsx2(Text, { style: styles.confirmButtonText, children: confirm.confirmLabel ?? "Confirm" })
+          children: /* @__PURE__ */ jsx3(Text, { style: styles.confirmButtonText, children: confirm.confirmLabel ?? "Confirm" })
         }
       )
     ] })
@@ -375,17 +500,17 @@ var styles = StyleSheet.create({
 
 // src/contexts/validation.tsx
 import React3, {
-  createContext as createContext3,
-  useContext as useContext3,
+  createContext as createContext4,
+  useContext as useContext4,
   useState as useState2,
-  useCallback as useCallback2,
-  useMemo as useMemo3
+  useCallback as useCallback3,
+  useMemo as useMemo4
 } from "react";
 import {
   runValidation
 } from "@json-render/core";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var ValidationContext = createContext3(null);
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ValidationContext = createContext4(null);
 function dynamicArgsEqual(a, b) {
   if (a === b) return true;
   if (!a || !b) return false;
@@ -427,7 +552,7 @@ function ValidationProvider({
   const { state } = useStateStore();
   const [fieldStates, setFieldStates] = useState2({});
   const [fieldConfigs, setFieldConfigs] = useState2({});
-  const registerField = useCallback2(
+  const registerField = useCallback3(
     (path, config) => {
       setFieldConfigs((prev) => {
         const existing = prev[path];
@@ -439,7 +564,7 @@ function ValidationProvider({
     },
     []
   );
-  const validate = useCallback2(
+  const validate = useCallback3(
     (path, config) => {
       const segments = path.split("/").filter(Boolean);
       let value2 = state;
@@ -468,7 +593,7 @@ function ValidationProvider({
     },
     [state, customFunctions]
   );
-  const touch = useCallback2((path) => {
+  const touch = useCallback3((path) => {
     setFieldStates((prev) => ({
       ...prev,
       [path]: {
@@ -479,13 +604,13 @@ function ValidationProvider({
       }
     }));
   }, []);
-  const clear = useCallback2((path) => {
+  const clear = useCallback3((path) => {
     setFieldStates((prev) => {
       const { [path]: _, ...rest } = prev;
       return rest;
     });
   }, []);
-  const validateAll = useCallback2(() => {
+  const validateAll = useCallback3(() => {
     let allValid = true;
     for (const [path, config] of Object.entries(fieldConfigs)) {
       const result = validate(path, config);
@@ -495,7 +620,7 @@ function ValidationProvider({
     }
     return allValid;
   }, [fieldConfigs, validate]);
-  const value = useMemo3(
+  const value = useMemo4(
     () => ({
       customFunctions,
       fieldStates,
@@ -515,10 +640,10 @@ function ValidationProvider({
       registerField
     ]
   );
-  return /* @__PURE__ */ jsx3(ValidationContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx4(ValidationContext.Provider, { value, children });
 }
 function useValidation() {
-  const ctx = useContext3(ValidationContext);
+  const ctx = useContext4(ValidationContext);
   if (!ctx) {
     throw new Error("useValidation must be used within a ValidationProvider");
   }
@@ -542,12 +667,12 @@ function useFieldValidation(path, config) {
     validated: false,
     result: null
   };
-  const validate = useCallback2(
+  const validate = useCallback3(
     () => validateField(path, config ?? { checks: [] }),
     [path, config, validateField]
   );
-  const touch = useCallback2(() => touchField(path), [path, touchField]);
-  const clear = useCallback2(() => clearField(path), [path, clearField]);
+  const touch = useCallback3(() => touchField(path), [path, touchField]);
+  const clear = useCallback3(() => clearField(path), [path, clearField]);
   return {
     state,
     validate,
@@ -559,35 +684,35 @@ function useFieldValidation(path, config) {
 }
 
 // src/contexts/repeat-scope.tsx
-import { createContext as createContext4, useContext as useContext4 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var RepeatScopeContext = createContext4(null);
+import { createContext as createContext5, useContext as useContext5 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var RepeatScopeContext = createContext5(null);
 function RepeatScopeProvider({
   item,
   index,
   basePath,
   children
 }) {
-  return /* @__PURE__ */ jsx4(RepeatScopeContext.Provider, { value: { item, index, basePath }, children });
+  return /* @__PURE__ */ jsx5(RepeatScopeContext.Provider, { value: { item, index, basePath }, children });
 }
 function useRepeatScope() {
-  return useContext4(RepeatScopeContext);
+  return useContext5(RepeatScopeContext);
 }
 
 // src/index.ts
-import { createStateStore } from "@json-render/core";
+import { createStateStore as createStateStore2 } from "@json-render/core";
 
 // src/renderer.tsx
 import React5, {
-  useCallback as useCallback4,
-  useMemo as useMemo4
+  useCallback as useCallback5,
+  useMemo as useMemo5
 } from "react";
 import {
   resolveElementProps,
   resolveBindings,
   resolveActionParam,
   evaluateVisibility as evaluateVisibility2,
-  getByPath as getByPath2
+  getByPath as getByPath3
 } from "@json-render/core";
 
 // src/components/standard.tsx
@@ -609,10 +734,10 @@ import {
 } from "react-native";
 
 // src/hooks.ts
-import { useState as useState3, useCallback as useCallback3, useRef, useEffect } from "react";
+import { useState as useState3, useCallback as useCallback4, useRef as useRef2, useEffect as useEffect2 } from "react";
 import {
   setByPath,
-  getByPath,
+  getByPath as getByPath2,
   removeByPath,
   validateSpec,
   autoFixSpec,
@@ -620,7 +745,7 @@ import {
 } from "@json-render/core";
 function useBoundProp(propValue, bindingPath) {
   const { set } = useStateStore();
-  const setValue = useCallback3(
+  const setValue = useCallback4(
     (value) => {
       if (bindingPath) set(bindingPath, value);
     },
@@ -731,7 +856,7 @@ function removeSpecValue(newSpec, path) {
 }
 function getSpecValue(spec, path) {
   if (path === "/root") return spec.root;
-  return getByPath(spec, path);
+  return getByPath2(spec, path);
 }
 function applyPatch(spec, patch) {
   const newSpec = { ...spec, elements: { ...spec.elements } };
@@ -776,18 +901,18 @@ function useUIStream({
   const [isStreaming, setIsStreaming] = useState3(false);
   const [error, setError] = useState3(null);
   const [rawLines, setRawLines] = useState3([]);
-  const abortControllerRef = useRef(null);
-  const stop = useCallback3(() => {
+  const abortControllerRef = useRef2(null);
+  const stop = useCallback4(() => {
     abortControllerRef.current?.abort();
     abortControllerRef.current = null;
     setIsStreaming(false);
   }, []);
-  const clear = useCallback3(() => {
+  const clear = useCallback4(() => {
     setSpec(null);
     setError(null);
     setRawLines([]);
   }, []);
-  const streamRequest = useCallback3(
+  const streamRequest = useCallback4(
     async (prompt, context, initialSpec, abortOnMalformed) => {
       let currentSpec = initialSpec;
       setSpec(currentSpec);
@@ -868,7 +993,7 @@ function useUIStream({
     },
     [api, fetchFn]
   );
-  const send = useCallback3(
+  const send = useCallback4(
     async (prompt, context) => {
       abortControllerRef.current?.abort();
       abortControllerRef.current = new AbortController();
@@ -949,7 +1074,7 @@ The current spec state is provided. Continue generating from where you left off.
       streamRequest
     ]
   );
-  useEffect(() => {
+  useEffect2(() => {
     return () => {
       abortControllerRef.current?.abort();
     };
@@ -992,10 +1117,10 @@ function flatToTree(elements) {
 }
 
 // src/components/standard.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function ContainerComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     View2,
     {
       style: {
@@ -1013,7 +1138,7 @@ function ContainerComponent({ element, children }) {
 }
 function RowComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     View2,
     {
       style: {
@@ -1031,7 +1156,7 @@ function RowComponent({ element, children }) {
 }
 function ColumnComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     View2,
     {
       style: {
@@ -1048,7 +1173,7 @@ function ColumnComponent({ element, children }) {
 }
 function ScrollContainerComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     ScrollView,
     {
       horizontal: p.horizontal ?? false,
@@ -1067,7 +1192,7 @@ function ScrollContainerComponent({ element, children }) {
 }
 function SafeAreaComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     SafeAreaView,
     {
       style: {
@@ -1080,7 +1205,7 @@ function SafeAreaComponent({ element, children }) {
 }
 function SpacerComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     View2,
     {
       style: {
@@ -1092,7 +1217,7 @@ function SpacerComponent({ element }) {
   );
 }
 function PressableComponent({ children, emit }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     Pressable2,
     {
       onPress: () => emit("press"),
@@ -1109,7 +1234,7 @@ function DividerComponent({ element }) {
   const isVertical = p.direction === "vertical";
   const thickness = p.thickness ?? 1;
   const color = p.color ?? "#e5e7eb";
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     View2,
     {
       style: {
@@ -1131,7 +1256,7 @@ var headingSizes = {
 function HeadingComponent({ element }) {
   const p = element.props;
   const level = p.level ?? "h2";
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     Text2,
     {
       style: {
@@ -1146,7 +1271,7 @@ function HeadingComponent({ element }) {
 }
 function ParagraphComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     Text2,
     {
       numberOfLines: p.numberOfLines ?? void 0,
@@ -1167,7 +1292,7 @@ var labelSizes = {
 };
 function LabelComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     Text2,
     {
       style: {
@@ -1181,7 +1306,7 @@ function LabelComponent({ element }) {
 }
 function ImageComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     RNImage,
     {
       source: { uri: p.src },
@@ -1206,7 +1331,7 @@ function AvatarComponent({ element }) {
   const size = avatarSizeMap[p.size ?? "md"];
   const bgColor = p.backgroundColor ?? "#6366f1";
   if (p.src) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       RNImage,
       {
         source: { uri: p.src },
@@ -1219,7 +1344,7 @@ function AvatarComponent({ element }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     View2,
     {
       style: {
@@ -1230,7 +1355,7 @@ function AvatarComponent({ element }) {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx6(
         Text2,
         {
           style: {
@@ -1257,7 +1382,7 @@ function BadgeComponent({ element }) {
     bg: "#e5e7eb",
     text: "#374151"
   };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     View2,
     {
       style: {
@@ -1267,7 +1392,7 @@ function BadgeComponent({ element }) {
         borderRadius: 9999,
         alignSelf: "flex-start"
       },
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx6(
         Text2,
         {
           style: {
@@ -1300,8 +1425,8 @@ function ChipComponent({ element, emit }) {
         alignSelf: "flex-start"
       },
       children: [
-        /* @__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" }) })
+        /* @__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" }) })
       ]
     }
   );
@@ -1349,7 +1474,7 @@ function ButtonComponent({ element, emit }) {
         alignSelf: "flex-start"
       }),
       children: [
-        p.loading && /* @__PURE__ */ jsx5(
+        p.loading && /* @__PURE__ */ jsx6(
           ActivityIndicator,
           {
             size: "small",
@@ -1357,7 +1482,7 @@ function ButtonComponent({ element, emit }) {
             style: { marginRight: 8 }
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           Text2,
           {
             style: {
@@ -1380,8 +1505,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__ */ jsx5(Text2, { style: inputStyles.label, children: p.label }),
-    /* @__PURE__ */ jsx5(
+    p.label && /* @__PURE__ */ jsx6(Text2, { style: inputStyles.label, children: p.label }),
+    /* @__PURE__ */ jsx6(
       RNTextInput,
       {
         placeholder: p.placeholder ?? void 0,
@@ -1410,7 +1535,7 @@ function SwitchComponent({ element, bindings }) {
   );
   const displayValue = checked ?? false;
   return /* @__PURE__ */ jsxs2(View2, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       RNSwitch,
       {
         value: displayValue,
@@ -1418,7 +1543,7 @@ function SwitchComponent({ element, bindings }) {
         disabled: p.disabled ?? false
       }
     ),
-    p.label && /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
+    p.label && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
   ] });
 }
 function CheckboxComponent({ element, bindings }) {
@@ -1444,7 +1569,7 @@ function CheckboxComponent({ element, bindings }) {
         opacity: p.disabled ? 0.5 : 1
       },
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           View2,
           {
             style: {
@@ -1457,10 +1582,10 @@ function CheckboxComponent({ element, bindings }) {
               alignItems: "center",
               justifyContent: "center"
             },
-            children: isChecked && /* @__PURE__ */ jsx5(Text2, { style: { color: "#ffffff", fontSize: 12, fontWeight: "700" }, children: "\u2713" })
+            children: isChecked && /* @__PURE__ */ jsx6(Text2, { style: { color: "#ffffff", fontSize: 12, fontWeight: "700" }, children: "\u2713" })
           }
         ),
-        p.label && /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
+        p.label && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
       ]
     }
   );
@@ -1482,12 +1607,12 @@ function SliderComponent({ element }) {
           marginBottom: 4
         },
         children: [
-          /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 14, color: "#374151" }, children: p.label }),
-          /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 14, color: "#6b7280" }, children: value })
+          /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#374151" }, children: p.label }),
+          /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#6b7280" }, children: value })
         ]
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       View2,
       {
         style: {
@@ -1496,7 +1621,7 @@ function SliderComponent({ element }) {
           borderRadius: 3,
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsx5(
+        children: /* @__PURE__ */ jsx6(
           View2,
           {
             style: {
@@ -1524,8 +1649,8 @@ function SearchBarComponent({ element, emit }) {
         paddingHorizontal: 12
       },
       children: [
-        /* @__PURE__ */ jsx5(Text2, { style: { fontSize: 16, color: "#9ca3af", marginRight: 8 }, children: "Search" }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#9ca3af", marginRight: 8 }, children: "Search" }),
+        /* @__PURE__ */ jsx6(
           RNTextInput,
           {
             placeholder: p.placeholder ?? "Search...",
@@ -1546,13 +1671,13 @@ function SearchBarComponent({ element, emit }) {
 }
 function SpinnerComponent({ element }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx5(ActivityIndicator, { size: p.size ?? "small", color: p.color ?? "#3b82f6" });
+  return /* @__PURE__ */ jsx6(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__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     View2,
     {
       style: {
@@ -1561,7 +1686,7 @@ function ProgressBarComponent({ element }) {
         borderRadius: height / 2,
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx6(
         View2,
         {
           style: {
@@ -1597,7 +1722,7 @@ function CardComponent({ element, children }) {
         }
       ],
       children: [
-        p.title && /* @__PURE__ */ jsx5(
+        p.title && /* @__PURE__ */ jsx6(
           Text2,
           {
             style: {
@@ -1609,7 +1734,7 @@ function CardComponent({ element, children }) {
             children: p.title
           }
         ),
-        p.subtitle && /* @__PURE__ */ jsx5(
+        p.subtitle && /* @__PURE__ */ jsx6(
           Text2,
           {
             style: {
@@ -1638,7 +1763,7 @@ function ListItemComponent({ element, emit }) {
         paddingHorizontal: 16
       },
       children: [
-        p.leading && /* @__PURE__ */ jsx5(
+        p.leading && /* @__PURE__ */ jsx6(
           Text2,
           {
             style: {
@@ -1652,16 +1777,16 @@ function ListItemComponent({ element, emit }) {
           }
         ),
         /* @__PURE__ */ jsxs2(View2, { style: { flex: 1 }, children: [
-          /* @__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 })
+          /* @__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 })
         ] }),
-        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: ">" })
+        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: ">" })
       ]
     }
   );
   if (hasPress) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       Pressable2,
       {
         onPress: () => emit("press"),
@@ -1677,14 +1802,14 @@ function ListItemComponent({ element, emit }) {
 }
 function ModalComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     RNModal,
     {
       visible: p.visible,
       animationType: p.animationType ?? "slide",
       transparent: true,
-      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: /* @__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
       ] }) })
     }
@@ -1807,7 +1932,7 @@ var modalStyles = StyleSheet2.create({
 });
 
 // src/renderer.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var ElementErrorBoundary = class extends React5.Component {
   constructor(props) {
     super(props);
@@ -1841,7 +1966,7 @@ var ElementRenderer = React5.memo(function ElementRenderer2({
   const { ctx } = useVisibility();
   const { execute } = useActions();
   const { getSnapshot } = useStateStore();
-  const fullCtx = useMemo4(
+  const fullCtx = useMemo5(
     () => repeatScope ? {
       ...ctx,
       repeatItem: repeatScope.item,
@@ -1852,7 +1977,7 @@ var ElementRenderer = React5.memo(function ElementRenderer2({
   );
   const isVisible = element.visible === void 0 ? true : evaluateVisibility2(element.visible, fullCtx);
   const onBindings = element.on;
-  const emit = useCallback4(
+  const emit = useCallback5(
     async (eventName) => {
       const binding = onBindings?.[eventName];
       if (!binding) return;
@@ -1887,7 +2012,7 @@ var ElementRenderer = React5.memo(function ElementRenderer2({
     console.warn(`No renderer for component type: ${resolvedElement.type}`);
     return null;
   }
-  const children = resolvedElement.repeat ? /* @__PURE__ */ jsx6(
+  const children = resolvedElement.repeat ? /* @__PURE__ */ jsx7(
     RepeatChildren,
     {
       element: resolvedElement,
@@ -1906,7 +2031,7 @@ var ElementRenderer = React5.memo(function ElementRenderer2({
       }
       return null;
     }
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       ElementRenderer2,
       {
         element: childElement,
@@ -1918,7 +2043,7 @@ var ElementRenderer = React5.memo(function ElementRenderer2({
       childKey
     );
   });
-  return /* @__PURE__ */ jsx6(ElementErrorBoundary, { elementType: resolvedElement.type, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(ElementErrorBoundary, { elementType: resolvedElement.type, children: /* @__PURE__ */ jsx7(
     Component,
     {
       element: resolvedElement,
@@ -1939,12 +2064,12 @@ function RepeatChildren({
   const { state } = useStateStore();
   const repeat = element.repeat;
   const statePath = repeat.statePath;
-  const items = getByPath2(state, statePath) ?? [];
-  return /* @__PURE__ */ jsx6(Fragment, { children: items.map((itemValue, index) => {
+  const items = getByPath3(state, statePath) ?? [];
+  return /* @__PURE__ */ jsx7(Fragment, { children: items.map((itemValue, index) => {
     const key = repeat.key && typeof itemValue === "object" && itemValue !== null ? String(
       itemValue[repeat.key] ?? index
     ) : String(index);
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       RepeatScopeProvider,
       {
         item: itemValue,
@@ -1960,7 +2085,7 @@ function RepeatChildren({
             }
             return null;
           }
-          return /* @__PURE__ */ jsx6(
+          return /* @__PURE__ */ jsx7(
             ElementRenderer,
             {
               element: childElement,
@@ -1984,7 +2109,7 @@ function Renderer({
   loading,
   fallback
 }) {
-  const registry = useMemo4(
+  const registry = useMemo5(
     () => ({
       ...includeStandard ? standardComponents : {},
       ...customRegistry
@@ -1998,7 +2123,7 @@ function Renderer({
   if (!rootElement) {
     return null;
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     ElementRenderer,
     {
       element: rootElement,
@@ -2019,15 +2144,15 @@ function JSONUIProvider({
   onStateChange,
   children
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     StateProvider,
     {
       store,
       initialState,
       onStateChange,
-      children: /* @__PURE__ */ jsx6(VisibilityProvider, { children: /* @__PURE__ */ jsx6(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ jsxs3(ValidationProvider, { customFunctions: validationFunctions, children: [
+      children: /* @__PURE__ */ jsx7(VisibilityProvider, { children: /* @__PURE__ */ jsx7(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ jsxs3(ValidationProvider, { customFunctions: validationFunctions, children: [
         children,
-        /* @__PURE__ */ jsx6(ConfirmationDialogManager, {})
+        /* @__PURE__ */ jsx7(ConfirmationDialogManager, {})
       ] }) }) })
     }
   );
@@ -2037,7 +2162,7 @@ function ConfirmationDialogManager() {
   if (!pendingConfirmation?.action.confirm) {
     return null;
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     ConfirmDialog,
     {
       confirm: pendingConfirmation.action.confirm,
@@ -2111,14 +2236,14 @@ function createRenderer(catalog, components) {
         has: () => true
       }
     ) : void 0;
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       StateProvider,
       {
         store,
         initialState: state,
         onStateChange,
-        children: /* @__PURE__ */ jsx6(VisibilityProvider, { children: /* @__PURE__ */ jsx6(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ jsxs3(ValidationProvider, { children: [
-          /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx7(VisibilityProvider, { children: /* @__PURE__ */ jsx7(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ jsxs3(ValidationProvider, { children: [
+          /* @__PURE__ */ jsx7(
             Renderer,
             {
               spec,
@@ -2127,7 +2252,7 @@ function createRenderer(catalog, components) {
               fallback
             }
           ),
-          /* @__PURE__ */ jsx6(ConfirmationDialogManager, {})
+          /* @__PURE__ */ jsx7(ConfirmationDialogManager, {})
         ] }) }) })
       }
     );
@@ -2144,7 +2269,7 @@ export {
   VisibilityProvider,
   createRenderer,
   createStandardActionHandlers,
-  createStateStore,
+  createStateStore2 as createStateStore,
   defineRegistry,
   elementTreeSchema,
   flatToTree,