@json-render/react-native 0.4.3

package/dist/index.mjs

@@ -0,0 +1,2232 @@
+import {
+  standardActionDefinitions,
+  standardComponentDefinitions
+} from "./chunk-MP3Y6GEF.mjs";
+import {
+  elementTreeSchema,
+  schema
+} from "./chunk-VBNJFRLI.mjs";
+
+// 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 = {},
+  authState,
+  onStateChange,
+  children
+}) {
+  const [state, setStateInternal] = useState(initialState);
+  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(state, path), [state]);
+  const set = useCallback(
+    (path, value2) => {
+      setStateInternal((prev) => {
+        const next = { ...prev };
+        setByPath(next, path, value2);
+        return next;
+      });
+      onStateChange?.(path, value2);
+    },
+    [onStateChange]
+  );
+  const update = useCallback(
+    (updates) => {
+      setStateInternal((prev) => {
+        const next = { ...prev };
+        for (const [path, value2] of Object.entries(updates)) {
+          setByPath(next, path, value2);
+          onStateChange?.(path, value2);
+        }
+        return next;
+      });
+    },
+    [onStateChange]
+  );
+  const value = useMemo(
+    () => ({
+      state,
+      authState,
+      get,
+      set,
+      update
+    }),
+    [state, authState, 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];
+}
+
+// src/contexts/visibility.tsx
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useMemo as useMemo2
+} from "react";
+import {
+  evaluateVisibility
+} from "@json-render/core";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var VisibilityContext = createContext2(null);
+function VisibilityProvider({ children }) {
+  const { state, authState } = useStateStore();
+  const ctx = useMemo2(
+    () => ({
+      stateModel: state,
+      authState
+    }),
+    [state, authState]
+  );
+  const isVisible = useMemo2(
+    () => (condition) => evaluateVisibility(condition, ctx),
+    [ctx]
+  );
+  const value = useMemo2(
+    () => ({ isVisible, ctx }),
+    [isVisible, ctx]
+  );
+  return /* @__PURE__ */ jsx2(VisibilityContext.Provider, { value, children });
+}
+function useVisibility() {
+  const ctx = useContext2(VisibilityContext);
+  if (!ctx) {
+    throw new Error("useVisibility must be used within a VisibilityProvider");
+  }
+  return ctx;
+}
+function useIsVisible(condition) {
+  const { isVisible } = useVisibility();
+  return isVisible(condition);
+}
+
+// src/contexts/actions.tsx
+import {
+  createContext as createContext3,
+  useContext as useContext3,
+  useState as useState2,
+  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 jsx3, jsxs } from "react/jsx-runtime";
+var idCounter = 0;
+function generateUniqueId() {
+  idCounter += 1;
+  return `${Date.now()}-${idCounter}`;
+}
+function deepResolveValue(value, get) {
+  if (value === null || value === void 0) return value;
+  if (value === "$id") {
+    return generateUniqueId();
+  }
+  if (typeof value === "object" && !Array.isArray(value)) {
+    const obj = value;
+    const keys = Object.keys(obj);
+    if (keys.length === 1 && typeof obj.path === "string") {
+      return get(obj.path);
+    }
+    if (keys.length === 1 && "$id" in obj) {
+      return generateUniqueId();
+    }
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => deepResolveValue(item, get));
+  }
+  if (typeof value === "object") {
+    const resolved = {};
+    for (const [key, val] of Object.entries(value)) {
+      resolved[key] = deepResolveValue(val, get);
+    }
+    return resolved;
+  }
+  return value;
+}
+var ActionContext = createContext3(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(
+    (name, handler) => {
+      setHandlers((prev) => ({ ...prev, [name]: handler }));
+    },
+    []
+  );
+  const execute = useCallback2(
+    async (binding) => {
+      const resolved = resolveAction(binding, state);
+      if (resolved.action === "setState" && resolved.params) {
+        const path = resolved.params.path;
+        const value2 = resolved.params.value;
+        if (path) {
+          set(path, value2);
+        }
+        return;
+      }
+      if (resolved.action === "pushState" && resolved.params) {
+        const path = resolved.params.path;
+        const rawValue = resolved.params.value;
+        if (path) {
+          const resolvedValue = deepResolveValue(rawValue, get);
+          const arr = get(path) ?? [];
+          set(path, [...arr, resolvedValue]);
+          const clearPath = resolved.params.clearPath;
+          if (clearPath) {
+            set(clearPath, "");
+          }
+        }
+        return;
+      }
+      if (resolved.action === "removeState" && resolved.params) {
+        const path = resolved.params.path;
+        const index = resolved.params.index;
+        if (path !== void 0 && index !== void 0) {
+          const arr = get(path) ?? [];
+          set(
+            path,
+            arr.filter((_, i) => i !== index)
+          );
+        }
+        return;
+      }
+      if (resolved.action === "push" && resolved.params) {
+        const screen = resolved.params.screen;
+        if (screen) {
+          const currentScreen = get("/currentScreen");
+          const navStack = get("/navStack") ?? [];
+          if (currentScreen) {
+            set("/navStack", [...navStack, currentScreen]);
+          } else {
+            set("/navStack", [...navStack, ""]);
+          }
+          set("/currentScreen", screen);
+        }
+        return;
+      }
+      if (resolved.action === "pop") {
+        const navStack = get("/navStack") ?? [];
+        if (navStack.length > 0) {
+          const previousScreen = navStack[navStack.length - 1];
+          set("/navStack", navStack.slice(0, -1));
+          if (previousScreen) {
+            set("/currentScreen", previousScreen);
+          } else {
+            set("/currentScreen", void 0);
+          }
+        }
+        return;
+      }
+      const handler = handlers[resolved.action];
+      if (!handler) {
+        console.warn(`No handler registered for action: ${resolved.action}`);
+        return;
+      }
+      if (resolved.confirm) {
+        return new Promise((resolve, reject) => {
+          setPendingConfirmation({
+            action: resolved,
+            handler,
+            resolve: () => {
+              setPendingConfirmation(null);
+              resolve();
+            },
+            reject: () => {
+              setPendingConfirmation(null);
+              reject(new Error("Action cancelled"));
+            }
+          });
+        }).then(async () => {
+          setLoadingActions((prev) => new Set(prev).add(resolved.action));
+          try {
+            await executeAction({
+              action: resolved,
+              handler,
+              setState: set,
+              navigate,
+              executeAction: async (name) => {
+                const subBinding = { action: name };
+                await execute(subBinding);
+              }
+            });
+          } finally {
+            setLoadingActions((prev) => {
+              const next = new Set(prev);
+              next.delete(resolved.action);
+              return next;
+            });
+          }
+        });
+      }
+      setLoadingActions((prev) => new Set(prev).add(resolved.action));
+      try {
+        await executeAction({
+          action: resolved,
+          handler,
+          setState: set,
+          navigate,
+          executeAction: async (name) => {
+            const subBinding = { action: name };
+            await execute(subBinding);
+          }
+        });
+      } finally {
+        setLoadingActions((prev) => {
+          const next = new Set(prev);
+          next.delete(resolved.action);
+          return next;
+        });
+      }
+    },
+    [state, handlers, get, set, navigate]
+  );
+  const confirm = useCallback2(() => {
+    pendingConfirmation?.resolve();
+  }, [pendingConfirmation]);
+  const cancel = useCallback2(() => {
+    pendingConfirmation?.reject();
+  }, [pendingConfirmation]);
+  const value = useMemo3(
+    () => ({
+      handlers,
+      loadingActions,
+      pendingConfirmation,
+      execute,
+      confirm,
+      cancel,
+      registerHandler
+    }),
+    [
+      handlers,
+      loadingActions,
+      pendingConfirmation,
+      execute,
+      confirm,
+      cancel,
+      registerHandler
+    ]
+  );
+  return /* @__PURE__ */ jsx3(ActionContext.Provider, { value, children });
+}
+function useActions() {
+  const ctx = useContext3(ActionContext);
+  if (!ctx) {
+    throw new Error("useActions must be used within an ActionProvider");
+  }
+  return ctx;
+}
+function useAction(binding) {
+  const { execute, loadingActions } = useActions();
+  const isLoading = loadingActions.has(binding.action);
+  const executeAction2 = useCallback2(() => execute(binding), [execute, binding]);
+  return { execute: executeAction2, isLoading };
+}
+function ConfirmDialog({
+  confirm,
+  onConfirm,
+  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: () => {
+  }, children: [
+    /* @__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__ */ jsx3(Pressable, { style: styles.cancelButton, onPress: onCancel, children: /* @__PURE__ */ jsx3(Text, { style: styles.cancelButtonText, children: confirm.cancelLabel ?? "Cancel" }) }),
+      /* @__PURE__ */ jsx3(
+        Pressable,
+        {
+          style: [
+            styles.confirmButton,
+            isDanger && styles.confirmButtonDanger
+          ],
+          onPress: onConfirm,
+          children: /* @__PURE__ */ jsx3(Text, { style: styles.confirmButtonText, children: confirm.confirmLabel ?? "Confirm" })
+        }
+      )
+    ] })
+  ] }) }) });
+}
+var styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dialog: {
+    backgroundColor: "white",
+    borderRadius: 8,
+    padding: 24,
+    maxWidth: 400,
+    width: "90%",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 20 },
+    shadowOpacity: 0.1,
+    shadowRadius: 25,
+    elevation: 10
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 8
+  },
+  message: {
+    fontSize: 14,
+    color: "#6b7280",
+    marginBottom: 24
+  },
+  buttons: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 12
+  },
+  cancelButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: "#d1d5db",
+    backgroundColor: "white"
+  },
+  cancelButtonText: {
+    fontSize: 14,
+    color: "#374151"
+  },
+  confirmButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 6,
+    backgroundColor: "#3b82f6"
+  },
+  confirmButtonDanger: {
+    backgroundColor: "#dc2626"
+  },
+  confirmButtonText: {
+    fontSize: 14,
+    color: "white"
+  }
+});
+
+// src/contexts/validation.tsx
+import React4, {
+  createContext as createContext4,
+  useContext as useContext4,
+  useState as useState3,
+  useCallback as useCallback3,
+  useMemo as useMemo4
+} from "react";
+import {
+  runValidation
+} from "@json-render/core";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ValidationContext = createContext4(null);
+function ValidationProvider({
+  customFunctions = {},
+  children
+}) {
+  const { state, authState } = useStateStore();
+  const [fieldStates, setFieldStates] = useState3({});
+  const [fieldConfigs, setFieldConfigs] = useState3({});
+  const registerField = useCallback3(
+    (path, config) => {
+      setFieldConfigs((prev) => ({ ...prev, [path]: config }));
+    },
+    []
+  );
+  const validate = useCallback3(
+    (path, config) => {
+      const value2 = state[path.split("/").filter(Boolean).join(".")];
+      const result = runValidation(config, {
+        value: value2,
+        stateModel: state,
+        customFunctions,
+        authState
+      });
+      setFieldStates((prev) => ({
+        ...prev,
+        [path]: {
+          touched: prev[path]?.touched ?? true,
+          validated: true,
+          result
+        }
+      }));
+      return result;
+    },
+    [state, customFunctions, authState]
+  );
+  const touch = useCallback3((path) => {
+    setFieldStates((prev) => ({
+      ...prev,
+      [path]: {
+        ...prev[path],
+        touched: true,
+        validated: prev[path]?.validated ?? false,
+        result: prev[path]?.result ?? null
+      }
+    }));
+  }, []);
+  const clear = useCallback3((path) => {
+    setFieldStates((prev) => {
+      const { [path]: _, ...rest } = prev;
+      return rest;
+    });
+  }, []);
+  const validateAll = useCallback3(() => {
+    let allValid = true;
+    for (const [path, config] of Object.entries(fieldConfigs)) {
+      const result = validate(path, config);
+      if (!result.valid) {
+        allValid = false;
+      }
+    }
+    return allValid;
+  }, [fieldConfigs, validate]);
+  const value = useMemo4(
+    () => ({
+      customFunctions,
+      fieldStates,
+      validate,
+      touch,
+      clear,
+      validateAll,
+      registerField
+    }),
+    [
+      customFunctions,
+      fieldStates,
+      validate,
+      touch,
+      clear,
+      validateAll,
+      registerField
+    ]
+  );
+  return /* @__PURE__ */ jsx4(ValidationContext.Provider, { value, children });
+}
+function useValidation() {
+  const ctx = useContext4(ValidationContext);
+  if (!ctx) {
+    throw new Error("useValidation must be used within a ValidationProvider");
+  }
+  return ctx;
+}
+function useFieldValidation(path, config) {
+  const {
+    fieldStates,
+    validate: validateField,
+    touch: touchField,
+    clear: clearField,
+    registerField
+  } = useValidation();
+  React4.useEffect(() => {
+    if (config) {
+      registerField(path, config);
+    }
+  }, [path, config, registerField]);
+  const state = fieldStates[path] ?? {
+    touched: false,
+    validated: false,
+    result: null
+  };
+  const validate = useCallback3(
+    () => validateField(path, config ?? { checks: [] }),
+    [path, config, validateField]
+  );
+  const touch = useCallback3(() => touchField(path), [path, touchField]);
+  const clear = useCallback3(() => clearField(path), [path, clearField]);
+  return {
+    state,
+    validate,
+    touch,
+    clear,
+    errors: state.result?.errors ?? [],
+    isValid: state.result?.valid ?? true
+  };
+}
+
+// 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);
+function RepeatScopeProvider({
+  basePath,
+  index,
+  children
+}) {
+  return /* @__PURE__ */ jsx5(RepeatScopeContext.Provider, { value: { basePath, index }, children });
+}
+function useRepeatScope() {
+  return useContext5(RepeatScopeContext);
+}
+function rewriteRepeatTokens(value, basePath, index) {
+  if (typeof value === "string") {
+    if (value === "$index") return index;
+    if (value === "$item") return basePath;
+    if (value.startsWith("$item/"))
+      return basePath + value.slice("$item".length);
+    return value;
+  }
+  if (Array.isArray(value)) {
+    let changed = false;
+    const result = value.map((item) => {
+      const rewritten = rewriteRepeatTokens(item, basePath, index);
+      if (rewritten !== item) changed = true;
+      return rewritten;
+    });
+    return changed ? result : value;
+  }
+  if (typeof value === "object" && value !== null) {
+    let changed = false;
+    const result = {};
+    for (const [key, val] of Object.entries(value)) {
+      const rewritten = rewriteRepeatTokens(val, basePath, index);
+      if (rewritten !== val) changed = true;
+      result[key] = rewritten;
+    }
+    return changed ? result : value;
+  }
+  return value;
+}
+
+// src/renderer.tsx
+import {
+  useCallback as useCallback4,
+  useMemo as useMemo5
+} from "react";
+import { resolveElementProps, getByPath as getByPath2 } from "@json-render/core";
+
+// src/components/standard.tsx
+import {
+  View as View2,
+  Text as Text2,
+  Image as RNImage,
+  ScrollView,
+  SafeAreaView,
+  Pressable as Pressable2,
+  TextInput as RNTextInput,
+  Switch as RNSwitch,
+  ActivityIndicator,
+  Modal as RNModal,
+  StyleSheet as StyleSheet2,
+  Alert,
+  Share,
+  Linking
+} from "react-native";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function ContainerComponent({ element, children }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx6(
+    View2,
+    {
+      style: {
+        padding: p.padding ?? void 0,
+        paddingHorizontal: p.paddingHorizontal ?? void 0,
+        paddingVertical: p.paddingVertical ?? void 0,
+        margin: p.margin ?? void 0,
+        backgroundColor: p.backgroundColor ?? void 0,
+        borderRadius: p.borderRadius ?? void 0,
+        flex: p.flex ?? void 0
+      },
+      children
+    }
+  );
+}
+function RowComponent({ element, children }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx6(
+    View2,
+    {
+      style: {
+        flexDirection: "row",
+        gap: p.gap ?? void 0,
+        alignItems: p.alignItems ?? void 0,
+        justifyContent: p.justifyContent ?? void 0,
+        flexWrap: p.flexWrap ?? void 0,
+        padding: p.padding ?? void 0,
+        flex: p.flex ?? void 0
+      },
+      children
+    }
+  );
+}
+function ColumnComponent({ element, children }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx6(
+    View2,
+    {
+      style: {
+        flexDirection: "column",
+        gap: p.gap ?? void 0,
+        alignItems: p.alignItems ?? void 0,
+        justifyContent: p.justifyContent ?? void 0,
+        padding: p.padding ?? void 0,
+        flex: p.flex ?? void 0
+      },
+      children
+    }
+  );
+}
+function ScrollContainerComponent({ element, children }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx6(
+    ScrollView,
+    {
+      horizontal: p.horizontal ?? false,
+      showsVerticalScrollIndicator: p.showsScrollIndicator ?? true,
+      showsHorizontalScrollIndicator: p.showsScrollIndicator ?? true,
+      contentContainerStyle: {
+        padding: p.padding ?? void 0
+      },
+      style: {
+        flex: p.flex ?? 1,
+        backgroundColor: p.backgroundColor ?? void 0
+      },
+      children
+    }
+  );
+}
+function SafeAreaComponent({ element, children }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx6(
+    SafeAreaView,
+    {
+      style: {
+        flex: 1,
+        backgroundColor: p.backgroundColor ?? void 0
+      },
+      children
+    }
+  );
+}
+function SpacerComponent({ element }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx6(
+    View2,
+    {
+      style: {
+        width: p.size ?? void 0,
+        height: p.size ?? void 0,
+        flex: p.flex ?? void 0
+      }
+    }
+  );
+}
+function PressableComponent({ children, emit }) {
+  return /* @__PURE__ */ jsx6(
+    Pressable2,
+    {
+      onPress: () => emit?.("press"),
+      onLongPress: () => emit?.("longPress"),
+      style: ({ pressed }) => ({
+        opacity: pressed ? 0.7 : 1
+      }),
+      children
+    }
+  );
+}
+function DividerComponent({ element }) {
+  const p = element.props;
+  const isVertical = p.direction === "vertical";
+  const thickness = p.thickness ?? 1;
+  const color = p.color ?? "#e5e7eb";
+  return /* @__PURE__ */ jsx6(
+    View2,
+    {
+      style: {
+        width: isVertical ? thickness : "100%",
+        height: isVertical ? "100%" : thickness,
+        backgroundColor: color,
+        marginVertical: isVertical ? 0 : p.margin ?? 8,
+        marginHorizontal: isVertical ? p.margin ?? 8 : 0
+      }
+    }
+  );
+}
+var headingSizes = {
+  h1: 32,
+  h2: 24,
+  h3: 20,
+  h4: 16
+};
+function HeadingComponent({ element }) {
+  const p = element.props;
+  const level = p.level ?? "h2";
+  return /* @__PURE__ */ jsx6(
+    Text2,
+    {
+      style: {
+        fontSize: headingSizes[level],
+        fontWeight: "700",
+        color: p.color ?? "#111827",
+        textAlign: p.align ?? "left"
+      },
+      children: p.text
+    }
+  );
+}
+function ParagraphComponent({ element }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx6(
+    Text2,
+    {
+      numberOfLines: p.numberOfLines ?? void 0,
+      style: {
+        fontSize: p.fontSize ?? 16,
+        lineHeight: (p.fontSize ?? 16) * 1.5,
+        color: p.color ?? "#374151",
+        textAlign: p.align ?? "left"
+      },
+      children: p.text
+    }
+  );
+}
+var labelSizes = {
+  xs: 10,
+  sm: 12,
+  md: 14
+};
+function LabelComponent({ element }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx6(
+    Text2,
+    {
+      style: {
+        fontSize: labelSizes[p.size ?? "sm"],
+        fontWeight: p.bold ? "600" : "400",
+        color: p.color ?? "#6b7280"
+      },
+      children: p.text
+    }
+  );
+}
+function ImageComponent({ element }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx6(
+    RNImage,
+    {
+      source: { uri: p.src },
+      accessibilityLabel: p.alt ?? void 0,
+      resizeMode: p.resizeMode ?? "cover",
+      style: {
+        width: p.width ?? "100%",
+        height: p.height ?? 200,
+        borderRadius: p.borderRadius ?? 0
+      }
+    }
+  );
+}
+var avatarSizeMap = {
+  sm: 32,
+  md: 48,
+  lg: 64,
+  xl: 96
+};
+function AvatarComponent({ element }) {
+  const p = element.props;
+  const size = avatarSizeMap[p.size ?? "md"];
+  const bgColor = p.backgroundColor ?? "#6366f1";
+  if (p.src) {
+    return /* @__PURE__ */ jsx6(
+      RNImage,
+      {
+        source: { uri: p.src },
+        style: {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: "#e5e7eb"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6(
+    View2,
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: bgColor,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsx6(
+        Text2,
+        {
+          style: {
+            color: "#ffffff",
+            fontSize: size * 0.4,
+            fontWeight: "600"
+          },
+          children: p.initials ?? "?"
+        }
+      )
+    }
+  );
+}
+var badgeVariantColors = {
+  default: { bg: "#e5e7eb", text: "#374151" },
+  info: { bg: "#dbeafe", text: "#1d4ed8" },
+  success: { bg: "#dcfce7", text: "#15803d" },
+  warning: { bg: "#fef3c7", text: "#92400e" },
+  error: { bg: "#fee2e2", text: "#dc2626" }
+};
+function BadgeComponent({ element }) {
+  const p = element.props;
+  const colors = badgeVariantColors[p.variant ?? "default"] ?? {
+    bg: "#e5e7eb",
+    text: "#374151"
+  };
+  return /* @__PURE__ */ jsx6(
+    View2,
+    {
+      style: {
+        backgroundColor: colors.bg,
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+        borderRadius: 9999,
+        alignSelf: "flex-start"
+      },
+      children: /* @__PURE__ */ jsx6(
+        Text2,
+        {
+          style: {
+            fontSize: 12,
+            fontWeight: "600",
+            color: colors.text
+          },
+          children: p.label
+        }
+      )
+    }
+  );
+}
+function ChipComponent({ element, emit }) {
+  const p = element.props;
+  const bgColor = p.selected ? "#6366f1" : p.backgroundColor ?? "#f3f4f6";
+  const textColor = p.selected ? "#ffffff" : "#374151";
+  const hasRemove = !!element.on?.remove;
+  return /* @__PURE__ */ jsxs2(
+    Pressable2,
+    {
+      onPress: () => emit?.("press"),
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: bgColor,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 9999,
+        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" }) })
+      ]
+    }
+  );
+}
+var buttonVariantStyles = {
+  primary: { bg: "#3b82f6", text: "#ffffff" },
+  secondary: { bg: "#6b7280", text: "#ffffff" },
+  danger: { bg: "#dc2626", text: "#ffffff" },
+  outline: { bg: "transparent", text: "#3b82f6", border: "#3b82f6" },
+  ghost: { bg: "transparent", text: "#374151" }
+};
+var buttonSizeStyles = {
+  sm: { paddingH: 12, paddingV: 6, fontSize: 13 },
+  md: { paddingH: 16, paddingV: 10, fontSize: 15 },
+  lg: { paddingH: 24, paddingV: 14, fontSize: 17 }
+};
+function ButtonComponent({ element, emit }) {
+  const p = element.props;
+  const variant = buttonVariantStyles[p.variant ?? "primary"] ?? {
+    bg: "#3b82f6",
+    text: "#ffffff"
+  };
+  const size = buttonSizeStyles[p.size ?? "md"] ?? {
+    paddingH: 16,
+    paddingV: 10,
+    fontSize: 15
+  };
+  const disabled = p.disabled || p.loading;
+  return /* @__PURE__ */ jsxs2(
+    Pressable2,
+    {
+      disabled,
+      onPress: () => emit?.("press"),
+      style: ({ pressed }) => ({
+        backgroundColor: variant.bg,
+        paddingHorizontal: size.paddingH,
+        paddingVertical: size.paddingV,
+        borderRadius: 8,
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "row",
+        opacity: disabled ? 0.5 : pressed ? 0.8 : 1,
+        borderWidth: variant.border ? 1 : 0,
+        borderColor: variant.border,
+        alignSelf: "flex-start"
+      }),
+      children: [
+        p.loading && /* @__PURE__ */ jsx6(
+          ActivityIndicator,
+          {
+            size: "small",
+            color: variant.text,
+            style: { marginRight: 8 }
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          Text2,
+          {
+            style: {
+              color: variant.text,
+              fontSize: size.fontSize,
+              fontWeight: "600"
+            },
+            children: p.label
+          }
+        )
+      ]
+    }
+  );
+}
+function TextInputComponent({ element }) {
+  const p = element.props;
+  const [boundValue, setBoundValue] = useStateBinding(
+    p.statePath ?? ""
+  );
+  const displayValue = p.statePath ? boundValue ?? "" : p.value ?? "";
+  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(
+      RNTextInput,
+      {
+        placeholder: p.placeholder ?? void 0,
+        value: displayValue,
+        onChangeText: p.statePath ? setBoundValue : void 0,
+        secureTextEntry: p.secureTextEntry ?? false,
+        keyboardType: p.keyboardType ?? "default",
+        multiline: p.multiline ?? false,
+        numberOfLines: p.numberOfLines ?? void 0,
+        style: [
+          inputStyles.input,
+          p.multiline && {
+            minHeight: (p.numberOfLines ?? 3) * 20,
+            textAlignVertical: "top"
+          }
+        ]
+      }
+    )
+  ] });
+}
+function SwitchComponent({ element }) {
+  const p = element.props;
+  const [boundValue, setBoundValue] = useStateBinding(
+    p.statePath ?? ""
+  );
+  const displayValue = p.statePath ? boundValue ?? false : p.value ?? false;
+  return /* @__PURE__ */ jsxs2(View2, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ jsx6(
+      RNSwitch,
+      {
+        value: displayValue,
+        onValueChange: p.statePath ? setBoundValue : void 0,
+        disabled: p.disabled ?? false
+      }
+    ),
+    p.label && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
+  ] });
+}
+function CheckboxComponent({ element }) {
+  const p = element.props;
+  const [boundValue, setBoundValue] = useStateBinding(
+    p.statePath ?? ""
+  );
+  const checked = p.statePath ? boundValue ?? false : p.checked ?? false;
+  return /* @__PURE__ */ jsxs2(
+    Pressable2,
+    {
+      disabled: p.disabled ?? false,
+      onPress: () => {
+        if (p.statePath) {
+          setBoundValue(!checked);
+        }
+      },
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        opacity: p.disabled ? 0.5 : 1
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
+          View2,
+          {
+            style: {
+              width: 20,
+              height: 20,
+              borderRadius: 4,
+              borderWidth: 2,
+              borderColor: checked ? "#3b82f6" : "#d1d5db",
+              backgroundColor: checked ? "#3b82f6" : "transparent",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: checked && /* @__PURE__ */ jsx6(Text2, { style: { color: "#ffffff", fontSize: 12, fontWeight: "700" }, children: "\u2713" })
+          }
+        ),
+        p.label && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
+      ]
+    }
+  );
+}
+function SliderComponent({ element }) {
+  const p = element.props;
+  const min = p.min ?? 0;
+  const max = p.max ?? 100;
+  const value = p.value ?? min;
+  const progress = max > min ? (value - min) / (max - min) : 0;
+  const trackColor = p.color ?? "#3b82f6";
+  return /* @__PURE__ */ jsxs2(View2, { children: [
+    p.label && /* @__PURE__ */ jsxs2(
+      View2,
+      {
+        style: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          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__ */ jsx6(
+      View2,
+      {
+        style: {
+          height: 6,
+          backgroundColor: "#e5e7eb",
+          borderRadius: 3,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx6(
+          View2,
+          {
+            style: {
+              width: `${Math.min(Math.max(progress * 100, 0), 100)}%`,
+              height: "100%",
+              backgroundColor: trackColor,
+              borderRadius: 3
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function SearchBarComponent({ element, emit }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsxs2(
+    View2,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: "#f3f4f6",
+        borderRadius: 8,
+        paddingHorizontal: 12
+      },
+      children: [
+        /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#9ca3af", marginRight: 8 }, children: "Search" }),
+        /* @__PURE__ */ jsx6(
+          RNTextInput,
+          {
+            placeholder: p.placeholder ?? "Search...",
+            value: p.value ?? void 0,
+            returnKeyType: "search",
+            onSubmitEditing: () => emit?.("submit"),
+            style: {
+              flex: 1,
+              paddingVertical: 10,
+              fontSize: 16,
+              color: "#111827"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function SpinnerComponent({ element }) {
+  const p = element.props;
+  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__ */ jsx6(
+    View2,
+    {
+      style: {
+        height,
+        backgroundColor: p.trackColor ?? "#e5e7eb",
+        borderRadius: height / 2,
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsx6(
+        View2,
+        {
+          style: {
+            width: `${progress * 100}%`,
+            height: "100%",
+            backgroundColor: p.color ?? "#3b82f6",
+            borderRadius: height / 2
+          }
+        }
+      )
+    }
+  );
+}
+function CardComponent({ element, children }) {
+  const p = element.props;
+  const elevated = p.elevated !== false;
+  const padding = p.padding ?? 16;
+  return /* @__PURE__ */ jsxs2(
+    View2,
+    {
+      style: [
+        {
+          backgroundColor: p.backgroundColor ?? "#ffffff",
+          borderRadius: p.borderRadius ?? 12,
+          padding
+        },
+        elevated && {
+          shadowColor: "#000",
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.1,
+          shadowRadius: 8,
+          elevation: 3
+        }
+      ],
+      children: [
+        p.title && /* @__PURE__ */ jsx6(
+          Text2,
+          {
+            style: {
+              fontSize: 18,
+              fontWeight: "600",
+              color: "#111827",
+              marginBottom: p.subtitle ? 2 : 12
+            },
+            children: p.title
+          }
+        ),
+        p.subtitle && /* @__PURE__ */ jsx6(
+          Text2,
+          {
+            style: {
+              fontSize: 14,
+              color: "#6b7280",
+              marginBottom: 12
+            },
+            children: p.subtitle
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function ListItemComponent({ element, emit }) {
+  const p = element.props;
+  const hasPress = !!element.on?.press;
+  const content = /* @__PURE__ */ jsxs2(
+    View2,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: 12,
+        paddingHorizontal: 16
+      },
+      children: [
+        p.leading && /* @__PURE__ */ jsx6(
+          Text2,
+          {
+            style: {
+              fontSize: 16,
+              color: "#6b7280",
+              marginRight: 12,
+              width: 24,
+              textAlign: "center"
+            },
+            children: p.leading
+          }
+        ),
+        /* @__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 })
+        ] }),
+        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__ */ jsx6(
+      Pressable2,
+      {
+        onPress: () => emit?.("press"),
+        style: ({ pressed }) => ({
+          opacity: pressed ? 0.7 : 1,
+          backgroundColor: pressed ? "#f9fafb" : "transparent"
+        }),
+        children: content
+      }
+    );
+  }
+  return content;
+}
+function ModalComponent({ element, children }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx6(
+    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
+      ] }) })
+    }
+  );
+}
+function createStandardActionHandlers(options) {
+  return {
+    navigate: async (params) => {
+      const screen = params.screen;
+      const navParams = params.params;
+      options?.navigate?.(screen, navParams ?? void 0);
+    },
+    goBack: async () => {
+      options?.goBack?.();
+    },
+    showAlert: async (params) => {
+      const title = params.title;
+      const message = params.message ?? void 0;
+      const buttons = params.buttons;
+      const alertButtons = buttons?.map((btn) => ({
+        text: btn.text,
+        style: btn.style
+      }));
+      Alert.alert(title, message, alertButtons);
+    },
+    share: async (params) => {
+      const message = params.message;
+      const url = params.url ?? void 0;
+      const title = params.title ?? void 0;
+      await Share.share({ message, url, title });
+    },
+    openURL: async (params) => {
+      const url = params.url;
+      const canOpen = await Linking.canOpenURL(url);
+      if (canOpen) {
+        await Linking.openURL(url);
+      }
+    },
+    setData: async (params) => {
+      const path = params.path;
+      const value = params.value;
+      options?.onSetData?.(path, value);
+    },
+    refresh: async (params) => {
+      const target = params.target ?? void 0;
+      options?.onRefresh?.(target);
+    }
+  };
+}
+var standardComponents = {
+  // Layout
+  Container: ContainerComponent,
+  Row: RowComponent,
+  Column: ColumnComponent,
+  ScrollContainer: ScrollContainerComponent,
+  SafeArea: SafeAreaComponent,
+  Pressable: PressableComponent,
+  Spacer: SpacerComponent,
+  Divider: DividerComponent,
+  // Content
+  Heading: HeadingComponent,
+  Paragraph: ParagraphComponent,
+  Label: LabelComponent,
+  Image: ImageComponent,
+  Avatar: AvatarComponent,
+  Badge: BadgeComponent,
+  Chip: ChipComponent,
+  // Input
+  Button: ButtonComponent,
+  TextInput: TextInputComponent,
+  Switch: SwitchComponent,
+  Checkbox: CheckboxComponent,
+  Slider: SliderComponent,
+  SearchBar: SearchBarComponent,
+  // Feedback
+  Spinner: SpinnerComponent,
+  ProgressBar: ProgressBarComponent,
+  // Composite
+  Card: CardComponent,
+  ListItem: ListItemComponent,
+  Modal: ModalComponent
+};
+var inputStyles = StyleSheet2.create({
+  label: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#374151",
+    marginBottom: 4
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#d1d5db",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 16,
+    color: "#111827",
+    backgroundColor: "#ffffff"
+  }
+});
+var modalStyles = StyleSheet2.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "flex-end"
+  },
+  content: {
+    backgroundColor: "#ffffff",
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    padding: 24,
+    maxHeight: "80%"
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "600",
+    color: "#111827",
+    marginBottom: 16
+  }
+});
+
+// src/renderer.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function ElementRenderer({
+  element,
+  spec,
+  registry,
+  loading,
+  fallback
+}) {
+  const repeatScope = useRepeatScope();
+  const { ctx } = useVisibility();
+  const { execute } = useActions();
+  let effectiveElement = element;
+  if (repeatScope) {
+    const rewrittenProps = rewriteRepeatTokens(
+      element.props,
+      repeatScope.basePath,
+      repeatScope.index
+    );
+    const rewrittenVisible = element.visible !== void 0 ? rewriteRepeatTokens(
+      element.visible,
+      repeatScope.basePath,
+      repeatScope.index
+    ) : element.visible;
+    const rewrittenOn = element.on !== void 0 ? rewriteRepeatTokens(
+      element.on,
+      repeatScope.basePath,
+      repeatScope.index
+    ) : element.on;
+    if (rewrittenProps !== element.props || rewrittenVisible !== element.visible || rewrittenOn !== element.on) {
+      effectiveElement = {
+        ...element,
+        props: rewrittenProps,
+        visible: rewrittenVisible,
+        on: rewrittenOn
+      };
+    }
+  }
+  const isVisible = useIsVisible(effectiveElement.visible);
+  const onBindings = effectiveElement.on;
+  const emit = useCallback4(
+    (eventName) => {
+      const binding = onBindings?.[eventName];
+      if (!binding) return;
+      const bindings = Array.isArray(binding) ? binding : [binding];
+      for (const b of bindings) {
+        execute(b);
+      }
+    },
+    [onBindings, execute]
+  );
+  if (!isVisible) {
+    return null;
+  }
+  const resolvedProps = resolveElementProps(
+    effectiveElement.props,
+    ctx
+  );
+  const resolvedElement = resolvedProps !== effectiveElement.props ? { ...effectiveElement, props: resolvedProps } : effectiveElement;
+  const Component = registry[resolvedElement.type] ?? fallback;
+  if (!Component) {
+    console.warn(`No renderer for component type: ${resolvedElement.type}`);
+    return null;
+  }
+  const children = resolvedElement.repeat ? /* @__PURE__ */ jsx7(
+    RepeatChildren,
+    {
+      element: resolvedElement,
+      spec,
+      registry,
+      loading,
+      fallback
+    }
+  ) : resolvedElement.children?.map((childKey) => {
+    const childElement = spec.elements[childKey];
+    if (!childElement) {
+      if (!loading) {
+        console.warn(
+          `[json-render] Missing element "${childKey}" referenced as child of "${resolvedElement.type}". This element will not render.`
+        );
+      }
+      return null;
+    }
+    return /* @__PURE__ */ jsx7(
+      ElementRenderer,
+      {
+        element: childElement,
+        spec,
+        registry,
+        loading,
+        fallback
+      },
+      childKey
+    );
+  });
+  return /* @__PURE__ */ jsx7(Component, { element: resolvedElement, emit, loading, children });
+}
+function RepeatChildren({
+  element,
+  spec,
+  registry,
+  loading,
+  fallback
+}) {
+  const { state } = useStateStore();
+  const repeat = element.repeat;
+  const statePath = repeat.path;
+  const items = getByPath2(state, statePath) ?? [];
+  return /* @__PURE__ */ jsx7(Fragment, { children: items.map((item, index) => {
+    const key = repeat.key && typeof item === "object" && item !== null ? String(item[repeat.key] ?? index) : String(index);
+    return /* @__PURE__ */ jsx7(
+      RepeatScopeProvider,
+      {
+        basePath: `${statePath}/${index}`,
+        index,
+        children: element.children?.map((childKey) => {
+          const childElement = spec.elements[childKey];
+          if (!childElement) {
+            if (!loading) {
+              console.warn(
+                `[json-render] Missing element "${childKey}" referenced as child of "${element.type}" (repeat). This element will not render.`
+              );
+            }
+            return null;
+          }
+          return /* @__PURE__ */ jsx7(
+            ElementRenderer,
+            {
+              element: childElement,
+              spec,
+              registry,
+              loading,
+              fallback
+            },
+            childKey
+          );
+        })
+      },
+      key
+    );
+  }) });
+}
+function Renderer({
+  spec,
+  registry: customRegistry,
+  includeStandard = true,
+  loading,
+  fallback
+}) {
+  const registry = useMemo5(
+    () => ({
+      ...includeStandard ? standardComponents : {},
+      ...customRegistry
+    }),
+    [customRegistry, includeStandard]
+  );
+  if (!spec || !spec.root) {
+    return null;
+  }
+  const rootElement = spec.elements[spec.root];
+  if (!rootElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx7(
+    ElementRenderer,
+    {
+      element: rootElement,
+      spec,
+      registry,
+      loading,
+      fallback
+    }
+  );
+}
+function JSONUIProvider({
+  registry,
+  initialState,
+  authState,
+  actionHandlers,
+  navigate,
+  validationFunctions,
+  onStateChange,
+  children
+}) {
+  return /* @__PURE__ */ jsx7(
+    StateProvider,
+    {
+      initialState,
+      authState,
+      onStateChange,
+      children: /* @__PURE__ */ jsx7(VisibilityProvider, { children: /* @__PURE__ */ jsx7(ActionProvider, { handlers: actionHandlers, navigate, children: /* @__PURE__ */ jsxs3(ValidationProvider, { customFunctions: validationFunctions, children: [
+        children,
+        /* @__PURE__ */ jsx7(ConfirmationDialogManager, {})
+      ] }) }) })
+    }
+  );
+}
+function ConfirmationDialogManager() {
+  const { pendingConfirmation, confirm, cancel } = useActions();
+  if (!pendingConfirmation?.action.confirm) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx7(
+    ConfirmDialog,
+    {
+      confirm: pendingConfirmation.action.confirm,
+      onConfirm: confirm,
+      onCancel: cancel
+    }
+  );
+}
+function createRendererFromCatalog(_catalog, registry) {
+  return function CatalogRenderer(props) {
+    return /* @__PURE__ */ jsx7(Renderer, { ...props, registry });
+  };
+}
+function defineRegistry(_catalog, options) {
+  const registry = {};
+  if (options.components) {
+    for (const [name, componentFn] of Object.entries(options.components)) {
+      registry[name] = ({
+        element,
+        children,
+        emit,
+        loading
+      }) => {
+        return componentFn({
+          props: element.props,
+          children,
+          emit,
+          loading
+        });
+      };
+    }
+  }
+  const actionMap = options.actions ? Object.entries(options.actions) : [];
+  const handlers = (getSetState, getState) => {
+    const result = {};
+    for (const [name, actionFn] of actionMap) {
+      result[name] = async (params) => {
+        const setState = getSetState();
+        const state = getState();
+        if (setState) {
+          await actionFn(params, setState, state);
+        }
+      };
+    }
+    return result;
+  };
+  const executeAction2 = async (actionName, params, setState, state = {}) => {
+    const entry = actionMap.find(([name]) => name === actionName);
+    if (entry) {
+      await entry[1](params, setState, state);
+    } else {
+      console.warn(`Unknown action: ${actionName}`);
+    }
+  };
+  return { registry, handlers, executeAction: executeAction2 };
+}
+function createRenderer(catalog, components) {
+  const registry = components;
+  return function CatalogRenderer({
+    spec,
+    state,
+    onAction,
+    onStateChange,
+    loading,
+    authState,
+    fallback
+  }) {
+    const actionHandlers = onAction ? {
+      __default__: (params) => {
+        const actionName = params.__actionName__;
+        const actionParams = params.__actionParams__;
+        return onAction(actionName, actionParams);
+      }
+    } : void 0;
+    return /* @__PURE__ */ jsx7(
+      StateProvider,
+      {
+        initialState: state,
+        authState,
+        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, {})
+        ] }) }) })
+      }
+    );
+  };
+}
+
+// src/hooks.ts
+import { useState as useState4, useCallback as useCallback5, useRef as useRef2, useEffect as useEffect2 } from "react";
+import {
+  setByPath as setByPath2,
+  getByPath as getByPath3,
+  removeByPath,
+  validateSpec,
+  autoFixSpec,
+  formatSpecIssues
+} from "@json-render/core";
+function looksLikeJson(line) {
+  return line.startsWith("{") || line.startsWith("[");
+}
+function parsePatchLine(line) {
+  const trimmed = line.trim();
+  if (!trimmed || trimmed.startsWith("//")) {
+    return { patch: null, malformed: false };
+  }
+  if (!looksLikeJson(trimmed)) {
+    return { patch: null, malformed: false };
+  }
+  try {
+    return { patch: JSON.parse(trimmed), malformed: false };
+  } catch {
+  }
+  let attempt = trimmed;
+  for (let i = 0; i < 3; i++) {
+    const last = attempt[attempt.length - 1];
+    if (last === "}" || last === "]") {
+      attempt = attempt.slice(0, -1);
+      try {
+        const result = JSON.parse(attempt);
+        console.warn(
+          `[json-render] Recovered malformed JSONL line by removing ${i + 1} trailing '${last}'`
+        );
+        return { patch: result, malformed: false };
+      } catch {
+      }
+    } else {
+      break;
+    }
+  }
+  return { patch: null, malformed: true };
+}
+function setSpecValue(newSpec, path, value) {
+  if (path === "/root") {
+    newSpec.root = value;
+    return;
+  }
+  if (path === "/state") {
+    newSpec.state = value;
+    return;
+  }
+  if (path.startsWith("/state/")) {
+    if (!newSpec.state) newSpec.state = {};
+    const statePath = path.slice("/state".length);
+    setByPath2(newSpec.state, statePath, value);
+    return;
+  }
+  if (path.startsWith("/elements/")) {
+    const pathParts = path.slice("/elements/".length).split("/");
+    const elementKey = pathParts[0];
+    if (!elementKey) return;
+    if (pathParts.length === 1) {
+      newSpec.elements[elementKey] = value;
+    } else {
+      const element = newSpec.elements[elementKey];
+      if (element) {
+        const propPath = "/" + pathParts.slice(1).join("/");
+        const newElement = { ...element };
+        setByPath2(
+          newElement,
+          propPath,
+          value
+        );
+        newSpec.elements[elementKey] = newElement;
+      }
+    }
+  }
+}
+function removeSpecValue(newSpec, path) {
+  if (path === "/state") {
+    newSpec.state = void 0;
+    return;
+  }
+  if (path.startsWith("/state/") && newSpec.state) {
+    const statePath = path.slice("/state".length);
+    removeByPath(newSpec.state, statePath);
+    return;
+  }
+  if (path.startsWith("/elements/")) {
+    const pathParts = path.slice("/elements/".length).split("/");
+    const elementKey = pathParts[0];
+    if (!elementKey) return;
+    if (pathParts.length === 1) {
+      const { [elementKey]: _, ...rest } = newSpec.elements;
+      newSpec.elements = rest;
+    } else {
+      const element = newSpec.elements[elementKey];
+      if (element) {
+        const propPath = "/" + pathParts.slice(1).join("/");
+        const newElement = { ...element };
+        removeByPath(
+          newElement,
+          propPath
+        );
+        newSpec.elements[elementKey] = newElement;
+      }
+    }
+  }
+}
+function getSpecValue(spec, path) {
+  if (path === "/root") return spec.root;
+  return getByPath3(spec, path);
+}
+function applyPatch(spec, patch) {
+  const newSpec = { ...spec, elements: { ...spec.elements } };
+  switch (patch.op) {
+    case "add":
+    case "replace": {
+      setSpecValue(newSpec, patch.path, patch.value);
+      break;
+    }
+    case "remove": {
+      removeSpecValue(newSpec, patch.path);
+      break;
+    }
+    case "move": {
+      if (!patch.from) break;
+      const moveValue = getSpecValue(newSpec, patch.from);
+      removeSpecValue(newSpec, patch.from);
+      setSpecValue(newSpec, patch.path, moveValue);
+      break;
+    }
+    case "copy": {
+      if (!patch.from) break;
+      const copyValue = getSpecValue(newSpec, patch.from);
+      setSpecValue(newSpec, patch.path, copyValue);
+      break;
+    }
+    case "test": {
+      break;
+    }
+  }
+  return newSpec;
+}
+function useUIStream({
+  api,
+  onComplete,
+  onError,
+  fetch: fetchFn = globalThis.fetch,
+  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 = useCallback5(() => {
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = null;
+    setIsStreaming(false);
+  }, []);
+  const clear = useCallback5(() => {
+    setSpec(null);
+    setError(null);
+    setRawLines([]);
+  }, []);
+  const streamRequest = useCallback5(
+    async (prompt, context, initialSpec, abortOnMalformed) => {
+      let currentSpec = initialSpec;
+      setSpec(currentSpec);
+      const malformedLines = [];
+      const response = await fetchFn(api, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          prompt,
+          context,
+          currentSpec
+        }),
+        signal: abortControllerRef.current.signal
+      });
+      console.log("[useUIStream] response status:", response.status);
+      if (!response.ok) {
+        let errorMessage = `HTTP error: ${response.status}`;
+        try {
+          const errorData = await response.json();
+          if (errorData.message) {
+            errorMessage = errorData.message;
+          } else if (errorData.error) {
+            errorMessage = errorData.error;
+          }
+        } catch {
+        }
+        throw new Error(errorMessage);
+      }
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error("No response body");
+      }
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let chunkCount = 0;
+      let totalBytes = 0;
+      let aborted = false;
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          console.log(
+            "[useUIStream] stream done. Total chunks:",
+            chunkCount,
+            "bytes:",
+            totalBytes
+          );
+          break;
+        }
+        chunkCount++;
+        totalBytes += value?.byteLength ?? 0;
+        const decoded = decoder.decode(value, { stream: true });
+        buffer += decoded;
+        if (chunkCount <= 5) {
+          console.log(
+            `[useUIStream] chunk #${chunkCount} (${value?.byteLength ?? 0}b):`,
+            decoded.slice(0, 200)
+          );
+        }
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+        const newLines = [];
+        for (const line of lines) {
+          if (line.trim()) {
+            newLines.push(line);
+          }
+          const { patch, malformed } = parsePatchLine(line);
+          if (patch) {
+            console.log("[useUIStream] applied patch:", patch.op, patch.path);
+            currentSpec = applyPatch(currentSpec, patch);
+            setSpec({ ...currentSpec });
+          } else if (malformed) {
+            malformedLines.push(line.trim());
+            console.warn(
+              "[useUIStream] malformed JSON line:",
+              line.trim().slice(0, 200)
+            );
+            if (abortOnMalformed) {
+              console.warn(
+                "[useUIStream] aborting stream due to malformed JSON, will retry"
+              );
+              await reader.cancel();
+              aborted = true;
+              break;
+            }
+          }
+        }
+        if (aborted) break;
+        if (newLines.length > 0) {
+          setRawLines((prev) => [...prev, ...newLines]);
+        }
+      }
+      if (!aborted && buffer.trim()) {
+        console.log("[useUIStream] remaining buffer:", buffer.slice(0, 200));
+        setRawLines((prev) => [...prev, buffer]);
+        const { patch, malformed } = parsePatchLine(buffer);
+        if (patch) {
+          currentSpec = applyPatch(currentSpec, patch);
+          setSpec({ ...currentSpec });
+        } else if (malformed) {
+          malformedLines.push(buffer.trim());
+        }
+      }
+      console.log(
+        "[useUIStream] spec state - root:",
+        currentSpec.root,
+        "elements:",
+        Object.keys(currentSpec.elements).length,
+        "completed:",
+        !aborted,
+        "malformed:",
+        malformedLines.length
+      );
+      return { spec: currentSpec, completed: !aborted, malformedLines };
+    },
+    [api, fetchFn]
+  );
+  const send = useCallback5(
+    async (prompt, context) => {
+      abortControllerRef.current?.abort();
+      abortControllerRef.current = new AbortController();
+      setIsStreaming(true);
+      setError(null);
+      setRawLines([]);
+      const previousSpec = context?.previousSpec;
+      let currentSpec = previousSpec && previousSpec.root ? { ...previousSpec, elements: { ...previousSpec.elements } } : { root: "", elements: {} };
+      let retriesUsed = 0;
+      let currentPrompt = prompt;
+      let currentContext = context;
+      try {
+        while (retriesUsed <= maxRetries) {
+          const result = await streamRequest(
+            currentPrompt,
+            currentContext,
+            currentSpec,
+            enableValidation
+            // only abort on malformed when validation is on
+          );
+          currentSpec = result.spec;
+          if (!result.completed && result.malformedLines.length > 0) {
+            if (retriesUsed >= maxRetries) {
+              console.warn(
+                "[useUIStream] malformed lines but max retries exhausted"
+              );
+              break;
+            }
+            retriesUsed++;
+            console.warn(
+              `[useUIStream] mid-stream retry ${retriesUsed}/${maxRetries} due to malformed JSON`
+            );
+            currentContext = { ...context, previousSpec: currentSpec };
+            currentPrompt = `The previous generation contained malformed JSON that could not be parsed. The line was:
+${result.malformedLines[result.malformedLines.length - 1]?.slice(0, 500)}
+
+The current spec state is provided. Continue generating from where you left off. Output ONLY the remaining patches needed to complete the UI.`;
+            continue;
+          }
+          if (!enableValidation || !currentSpec.root) {
+            break;
+          }
+          const { spec: fixedSpec, fixes } = autoFixSpec(currentSpec);
+          if (fixes.length > 0) {
+            console.log("[useUIStream] auto-fixed spec issues:", fixes);
+            currentSpec = fixedSpec;
+            setSpec({ ...currentSpec });
+          }
+          const validation = validateSpec(currentSpec);
+          if (validation.valid) {
+            console.log("[useUIStream] spec validation passed");
+            break;
+          }
+          const errors = validation.issues.filter(
+            (i) => i.severity === "error"
+          );
+          if (retriesUsed >= maxRetries) {
+            console.warn(
+              "[useUIStream] spec validation failed, max retries exhausted:",
+              errors.map((e) => e.message)
+            );
+            break;
+          }
+          retriesUsed++;
+          const issueText = formatSpecIssues(validation.issues);
+          console.warn(
+            `[useUIStream] post-stream retry ${retriesUsed}/${maxRetries}:`,
+            errors.map((e) => e.message)
+          );
+          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.
+
+` + issueText;
+        }
+        onComplete?.(currentSpec);
+      } catch (err) {
+        if (err.name === "AbortError") {
+          return;
+        }
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        setError(error2);
+        onError?.(error2);
+      } finally {
+        setIsStreaming(false);
+      }
+    },
+    [
+      api,
+      fetchFn,
+      onComplete,
+      onError,
+      enableValidation,
+      maxRetries,
+      streamRequest
+    ]
+  );
+  useEffect2(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+  return {
+    spec,
+    isStreaming,
+    error,
+    rawLines,
+    send,
+    stop,
+    clear
+  };
+}
+function flatToTree(elements) {
+  const elementMap = {};
+  let root = "";
+  for (const element of elements) {
+    elementMap[element.key] = {
+      type: element.type,
+      props: element.props,
+      children: [],
+      visible: element.visible
+    };
+  }
+  for (const element of elements) {
+    if (element.parentKey) {
+      const parent = elementMap[element.parentKey];
+      if (parent) {
+        if (!parent.children) {
+          parent.children = [];
+        }
+        parent.children.push(element.key);
+      }
+    } else {
+      root = element.key;
+    }
+  }
+  return { root, elements: elementMap };
+}
+export {
+  ActionProvider,
+  ConfirmDialog,
+  JSONUIProvider,
+  Renderer,
+  RepeatScopeProvider,
+  StateProvider,
+  ValidationProvider,
+  VisibilityProvider,
+  createRenderer,
+  createRendererFromCatalog,
+  createStandardActionHandlers,
+  defineRegistry,
+  elementTreeSchema,
+  flatToTree,
+  rewriteRepeatTokens,
+  schema,
+  standardActionDefinitions,
+  standardComponentDefinitions,
+  standardComponents,
+  useAction,
+  useActions,
+  useFieldValidation,
+  useIsVisible,
+  useRepeatScope,
+  useStateBinding,
+  useStateStore,
+  useStateValue,
+  useUIStream,
+  useValidation,
+  useVisibility
+};
+//# sourceMappingURL=index.mjs.map