@json-render/react-native 0.4.3

package/dist/index.js

@@ -0,0 +1,2682 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ActionProvider: () => ActionProvider,
+  ConfirmDialog: () => ConfirmDialog,
+  JSONUIProvider: () => JSONUIProvider,
+  Renderer: () => Renderer,
+  RepeatScopeProvider: () => RepeatScopeProvider,
+  StateProvider: () => StateProvider,
+  ValidationProvider: () => ValidationProvider,
+  VisibilityProvider: () => VisibilityProvider,
+  createRenderer: () => createRenderer,
+  createRendererFromCatalog: () => createRendererFromCatalog,
+  createStandardActionHandlers: () => createStandardActionHandlers,
+  defineRegistry: () => defineRegistry,
+  elementTreeSchema: () => elementTreeSchema,
+  flatToTree: () => flatToTree,
+  rewriteRepeatTokens: () => rewriteRepeatTokens,
+  schema: () => schema,
+  standardActionDefinitions: () => standardActionDefinitions,
+  standardComponentDefinitions: () => standardComponentDefinitions,
+  standardComponents: () => standardComponents,
+  useAction: () => useAction,
+  useActions: () => useActions,
+  useFieldValidation: () => useFieldValidation,
+  useIsVisible: () => useIsVisible,
+  useRepeatScope: () => useRepeatScope,
+  useStateBinding: () => useStateBinding,
+  useStateStore: () => useStateStore,
+  useStateValue: () => useStateValue,
+  useUIStream: () => useUIStream,
+  useValidation: () => useValidation,
+  useVisibility: () => useVisibility
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/contexts/state.tsx
+var import_react = require("react");
+var import_core = require("@json-render/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StateContext = (0, import_react.createContext)(null);
+function StateProvider({
+  initialState = {},
+  authState,
+  onStateChange,
+  children
+}) {
+  const [state, setStateInternal] = (0, import_react.useState)(initialState);
+  const initialStateJsonRef = (0, import_react.useRef)(JSON.stringify(initialState));
+  (0, import_react.useEffect)(() => {
+    const newJson = JSON.stringify(initialState);
+    if (newJson !== initialStateJsonRef.current) {
+      initialStateJsonRef.current = newJson;
+      if (initialState && Object.keys(initialState).length > 0) {
+        setStateInternal((prev) => ({ ...prev, ...initialState }));
+      }
+    }
+  }, [initialState]);
+  const get = (0, import_react.useCallback)((path) => (0, import_core.getByPath)(state, path), [state]);
+  const set = (0, import_react.useCallback)(
+    (path, value2) => {
+      setStateInternal((prev) => {
+        const next = { ...prev };
+        (0, import_core.setByPath)(next, path, value2);
+        return next;
+      });
+      onStateChange?.(path, value2);
+    },
+    [onStateChange]
+  );
+  const update = (0, import_react.useCallback)(
+    (updates) => {
+      setStateInternal((prev) => {
+        const next = { ...prev };
+        for (const [path, value2] of Object.entries(updates)) {
+          (0, import_core.setByPath)(next, path, value2);
+          onStateChange?.(path, value2);
+        }
+        return next;
+      });
+    },
+    [onStateChange]
+  );
+  const value = (0, import_react.useMemo)(
+    () => ({
+      state,
+      authState,
+      get,
+      set,
+      update
+    }),
+    [state, authState, get, set, update]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StateContext.Provider, { value, children });
+}
+function useStateStore() {
+  const ctx = (0, import_react.useContext)(StateContext);
+  if (!ctx) {
+    throw new Error("useStateStore must be used within a StateProvider");
+  }
+  return ctx;
+}
+function useStateValue(path) {
+  const { state } = useStateStore();
+  return (0, import_core.getByPath)(state, path);
+}
+function useStateBinding(path) {
+  const { state, set } = useStateStore();
+  const value = (0, import_core.getByPath)(state, path);
+  const setValue = (0, import_react.useCallback)(
+    (newValue) => set(path, newValue),
+    [path, set]
+  );
+  return [value, setValue];
+}
+
+// src/contexts/visibility.tsx
+var import_react2 = require("react");
+var import_core2 = require("@json-render/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var VisibilityContext = (0, import_react2.createContext)(null);
+function VisibilityProvider({ children }) {
+  const { state, authState } = useStateStore();
+  const ctx = (0, import_react2.useMemo)(
+    () => ({
+      stateModel: state,
+      authState
+    }),
+    [state, authState]
+  );
+  const isVisible = (0, import_react2.useMemo)(
+    () => (condition) => (0, import_core2.evaluateVisibility)(condition, ctx),
+    [ctx]
+  );
+  const value = (0, import_react2.useMemo)(
+    () => ({ isVisible, ctx }),
+    [isVisible, ctx]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VisibilityContext.Provider, { value, children });
+}
+function useVisibility() {
+  const ctx = (0, import_react2.useContext)(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
+var import_react3 = require("react");
+var import_react_native = require("react-native");
+var import_core3 = require("@json-render/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var 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 = (0, import_react3.createContext)(null);
+function ActionProvider({
+  handlers: initialHandlers = {},
+  navigate,
+  children
+}) {
+  const { state, get, set } = useStateStore();
+  const [handlers, setHandlers] = (0, import_react3.useState)(initialHandlers);
+  const [loadingActions, setLoadingActions] = (0, import_react3.useState)(/* @__PURE__ */ new Set());
+  const [pendingConfirmation, setPendingConfirmation] = (0, import_react3.useState)(null);
+  const registerHandler = (0, import_react3.useCallback)(
+    (name, handler) => {
+      setHandlers((prev) => ({ ...prev, [name]: handler }));
+    },
+    []
+  );
+  const execute = (0, import_react3.useCallback)(
+    async (binding) => {
+      const resolved = (0, import_core3.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 (0, import_core3.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 (0, import_core3.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 = (0, import_react3.useCallback)(() => {
+    pendingConfirmation?.resolve();
+  }, [pendingConfirmation]);
+  const cancel = (0, import_react3.useCallback)(() => {
+    pendingConfirmation?.reject();
+  }, [pendingConfirmation]);
+  const value = (0, import_react3.useMemo)(
+    () => ({
+      handlers,
+      loadingActions,
+      pendingConfirmation,
+      execute,
+      confirm,
+      cancel,
+      registerHandler
+    }),
+    [
+      handlers,
+      loadingActions,
+      pendingConfirmation,
+      execute,
+      confirm,
+      cancel,
+      registerHandler
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ActionContext.Provider, { value, children });
+}
+function useActions() {
+  const ctx = (0, import_react3.useContext)(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 = (0, import_react3.useCallback)(() => execute(binding), [execute, binding]);
+  return { execute: executeAction2, isLoading };
+}
+function ConfirmDialog({
+  confirm,
+  onConfirm,
+  onCancel
+}) {
+  const isDanger = confirm.variant === "danger";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Modal, { transparent: true, animationType: "fade", visible: true, onRequestClose: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Pressable, { style: styles.overlay, onPress: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native.Pressable, { style: styles.dialog, onPress: () => {
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Text, { style: styles.title, children: confirm.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Text, { style: styles.message, children: confirm.message }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native.View, { style: styles.buttons, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Pressable, { style: styles.cancelButton, onPress: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Text, { style: styles.cancelButtonText, children: confirm.cancelLabel ?? "Cancel" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native.Pressable,
+        {
+          style: [
+            styles.confirmButton,
+            isDanger && styles.confirmButtonDanger
+          ],
+          onPress: onConfirm,
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Text, { style: styles.confirmButtonText, children: confirm.confirmLabel ?? "Confirm" })
+        }
+      )
+    ] })
+  ] }) }) });
+}
+var styles = import_react_native.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
+var import_react4 = __toESM(require("react"));
+var import_core4 = require("@json-render/core");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ValidationContext = (0, import_react4.createContext)(null);
+function ValidationProvider({
+  customFunctions = {},
+  children
+}) {
+  const { state, authState } = useStateStore();
+  const [fieldStates, setFieldStates] = (0, import_react4.useState)({});
+  const [fieldConfigs, setFieldConfigs] = (0, import_react4.useState)({});
+  const registerField = (0, import_react4.useCallback)(
+    (path, config) => {
+      setFieldConfigs((prev) => ({ ...prev, [path]: config }));
+    },
+    []
+  );
+  const validate = (0, import_react4.useCallback)(
+    (path, config) => {
+      const value2 = state[path.split("/").filter(Boolean).join(".")];
+      const result = (0, import_core4.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 = (0, import_react4.useCallback)((path) => {
+    setFieldStates((prev) => ({
+      ...prev,
+      [path]: {
+        ...prev[path],
+        touched: true,
+        validated: prev[path]?.validated ?? false,
+        result: prev[path]?.result ?? null
+      }
+    }));
+  }, []);
+  const clear = (0, import_react4.useCallback)((path) => {
+    setFieldStates((prev) => {
+      const { [path]: _, ...rest } = prev;
+      return rest;
+    });
+  }, []);
+  const validateAll = (0, import_react4.useCallback)(() => {
+    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 = (0, import_react4.useMemo)(
+    () => ({
+      customFunctions,
+      fieldStates,
+      validate,
+      touch,
+      clear,
+      validateAll,
+      registerField
+    }),
+    [
+      customFunctions,
+      fieldStates,
+      validate,
+      touch,
+      clear,
+      validateAll,
+      registerField
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ValidationContext.Provider, { value, children });
+}
+function useValidation() {
+  const ctx = (0, import_react4.useContext)(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();
+  import_react4.default.useEffect(() => {
+    if (config) {
+      registerField(path, config);
+    }
+  }, [path, config, registerField]);
+  const state = fieldStates[path] ?? {
+    touched: false,
+    validated: false,
+    result: null
+  };
+  const validate = (0, import_react4.useCallback)(
+    () => validateField(path, config ?? { checks: [] }),
+    [path, config, validateField]
+  );
+  const touch = (0, import_react4.useCallback)(() => touchField(path), [path, touchField]);
+  const clear = (0, import_react4.useCallback)(() => clearField(path), [path, clearField]);
+  return {
+    state,
+    validate,
+    touch,
+    clear,
+    errors: state.result?.errors ?? [],
+    isValid: state.result?.valid ?? true
+  };
+}
+
+// src/contexts/repeat-scope.tsx
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var RepeatScopeContext = (0, import_react5.createContext)(null);
+function RepeatScopeProvider({
+  basePath,
+  index,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RepeatScopeContext.Provider, { value: { basePath, index }, children });
+}
+function useRepeatScope() {
+  return (0, import_react5.useContext)(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/schema.ts
+var import_core5 = require("@json-render/core");
+var schema = (0, import_core5.defineSchema)(
+  (s) => ({
+    // What the AI-generated SPEC looks like
+    spec: s.object({
+      /** Root element key */
+      root: s.string(),
+      /** Flat map of elements by key */
+      elements: s.record(
+        s.object({
+          /** Component type from catalog */
+          type: s.ref("catalog.components"),
+          /** Component props */
+          props: s.propsOf("catalog.components"),
+          /** Child element keys (flat reference) */
+          children: s.array(s.string()),
+          /** Visibility condition */
+          visible: s.any()
+        })
+      )
+    }),
+    // What the CATALOG must provide
+    catalog: s.object({
+      /** Component definitions */
+      components: s.map({
+        /** Zod schema for component props */
+        props: s.zod(),
+        /** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */
+        slots: s.array(s.string()),
+        /** Description for AI generation hints */
+        description: s.string()
+      }),
+      /** Action definitions (optional) */
+      actions: s.map({
+        /** Zod schema for action params */
+        params: s.zod(),
+        /** Description for AI generation hints */
+        description: s.string()
+      })
+    })
+  }),
+  {
+    defaultRules: [
+      // Layout patterns
+      "FIXED BOTTOM BAR PATTERN: When building a screen with a fixed header and/or fixed bottom tab bar, the outermost Column must have flex:1 so it fills the SafeArea. The scrollable content area must also have flex:1. Structure: SafeArea > Column(flex:1, gap:0) > [header, Container(flex:1) > [ScrollContainer(...)], bottom-tabs]. Both the outer Column AND the content Container need flex:1.",
+      "NEVER place a bottom tab bar or fixed footer inside a ScrollContainer. It must be a sibling AFTER the flex:1 container that holds the ScrollContainer.",
+      // Element integrity
+      "CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.",
+      "SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.",
+      'When building repeating content backed by a state array (e.g. todos, posts, cart items), use the "repeat" field on the container element. Example: { "type": "Column", "props": { "gap": 8 }, "repeat": { "path": "/todos", "key": "id" }, "children": ["todo-item"] }. Inside repeated children, use "$item/field" for per-item state paths and "$index" for the current array index. Do NOT hardcode individual elements for each array item.',
+      // Visible field placement
+      'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"Column","props":{"gap":8},"visible":{"eq":[{"path":"/activeTab"},"home"]},"children":[...]}. WRONG: {"type":"Column","props":{"gap":8,"visible":{...}},"children":[...]}.',
+      // Tab navigation pattern
+      "TAB NAVIGATION PATTERN: When building a UI with multiple tabs, use Pressable + setState action + visible conditions to make tabs functional.",
+      'Each tab button should be a Pressable wrapping its icon/label children, with action "setState" and actionParams { "path": "/activeTab", "value": "tabName" }.',
+      `Each tab's content section should have a visible condition: { "eq": [{ "path": "/activeTab" }, "tabName"] }.`,
+      "The first tab's content should NOT have a visible condition (so it shows by default when no tab is selected yet). All other tabs MUST have a visible condition.",
+      // Tab active state highlighting (using dynamic props)
+      "TAB ACTIVE STYLING: Use $cond dynamic props on the Icon inside each tab Pressable so a single Icon changes appearance based on the active tab.",
+      '  - For the icon name: { "$cond": { "eq": [{ "path": "/activeTab" }, "thisTabName"] }, "$then": "home", "$else": "home-outline" }',
+      '  - For the icon color: { "$cond": { "eq": [{ "path": "/activeTab" }, "thisTabName"] }, "$then": "#007AFF", "$else": "#8E8E93" }',
+      "  - For labels, use $cond on the color prop similarly.",
+      '  - For the FIRST/DEFAULT tab, use { "$cond": { "or": [{ "eq": [{ "path": "/activeTab" }, "thisTabName"] }, { "not": { "path": "/activeTab" } }] }, "$then": "#007AFF", "$else": "#8E8E93" } so it appears active before any tab is tapped.',
+      // Push/pop screen navigation (all screens in one spec)
+      'SCREEN NAVIGATION: Use Pressable with action "push" and actionParams { "screen": "screenName" } to navigate to a new screen. Use action "pop" to go back. All screens must be defined in the SAME spec.',
+      'Each screen section uses a visible condition on /currentScreen: { "eq": [{ "path": "/currentScreen" }, "screenName"] }. The default/home screen should also be visible when /currentScreen is not set: { "or": [{ "eq": [{ "path": "/currentScreen" }, "home"] }, { "not": { "path": "/currentScreen" } }] }.',
+      "push automatically maintains a /navStack in the state model so pop always returns to the previous screen.",
+      'Include a back button on pushed screens using action "pop". Example: Pressable(action:"pop") > Row > Icon(name:"chevron-back") + Label(text:"Back").',
+      "Use push/pop for drill-down flows: tapping a list item to see details, opening a profile, etc. Use setState + visible conditions for tab switching within a screen.",
+      'Example: A list screen with items that push to detail: Pressable(action:"push", actionParams:{screen:"repo-detail"}) wrapping each list item card. The detail screen section has visible:{"eq":[{"path":"/currentScreen"},"repo-detail"]} and contains a back button with action:"pop".'
+    ]
+  }
+);
+var elementTreeSchema = schema;
+
+// src/renderer.tsx
+var import_react6 = require("react");
+var import_core6 = require("@json-render/core");
+
+// src/components/standard.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ContainerComponent({ element, children }) {
+  const p = element.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.View,
+    {
+      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__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.View,
+    {
+      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__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.View,
+    {
+      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__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.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__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.SafeAreaView,
+    {
+      style: {
+        flex: 1,
+        backgroundColor: p.backgroundColor ?? void 0
+      },
+      children
+    }
+  );
+}
+function SpacerComponent({ element }) {
+  const p = element.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.View,
+    {
+      style: {
+        width: p.size ?? void 0,
+        height: p.size ?? void 0,
+        flex: p.flex ?? void 0
+      }
+    }
+  );
+}
+function PressableComponent({ children, emit }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.Pressable,
+    {
+      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__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.View,
+    {
+      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__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.Text,
+    {
+      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__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.Text,
+    {
+      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__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.Text,
+    {
+      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__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.Image,
+    {
+      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__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native2.Image,
+      {
+        source: { uri: p.src },
+        style: {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: "#e5e7eb"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.View,
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: bgColor,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_react_native2.Text,
+        {
+          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__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.View,
+    {
+      style: {
+        backgroundColor: colors.bg,
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+        borderRadius: 9999,
+        alignSelf: "flex-start"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_react_native2.Text,
+        {
+          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__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react_native2.Pressable,
+    {
+      onPress: () => emit?.("press"),
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: bgColor,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 9999,
+        alignSelf: "flex-start"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: textColor }, children: p.label }),
+        hasRemove && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Pressable, { onPress: () => emit?.("remove"), style: { marginLeft: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: textColor, fontWeight: "700" }, children: "x" }) })
+      ]
+    }
+  );
+}
+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__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react_native2.Pressable,
+    {
+      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__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_native2.ActivityIndicator,
+          {
+            size: "small",
+            color: variant.text,
+            style: { marginRight: 8 }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_native2.Text,
+          {
+            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__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: p.flex != null ? { flex: p.flex } : void 0, children: [
+    p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: inputStyles.label, children: p.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native2.TextInput,
+      {
+        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__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native2.Switch,
+      {
+        value: displayValue,
+        onValueChange: p.statePath ? setBoundValue : void 0,
+        disabled: p.disabled ?? false
+      }
+    ),
+    p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { 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__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react_native2.Pressable,
+    {
+      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__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_native2.View,
+          {
+            style: {
+              width: 20,
+              height: 20,
+              borderRadius: 4,
+              borderWidth: 2,
+              borderColor: checked ? "#3b82f6" : "#d1d5db",
+              backgroundColor: checked ? "#3b82f6" : "transparent",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: checked && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { color: "#ffffff", fontSize: 12, fontWeight: "700" }, children: "\u2713" })
+          }
+        ),
+        p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#374151" }, children: p.label })
+      ]
+    }
+  );
+}
+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__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { children: [
+    p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      import_react_native2.View,
+      {
+        style: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          marginBottom: 4
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#374151" }, children: p.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280" }, children: value })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native2.View,
+      {
+        style: {
+          height: 6,
+          backgroundColor: "#e5e7eb",
+          borderRadius: 3,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_native2.View,
+          {
+            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__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react_native2.View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: "#f3f4f6",
+        borderRadius: 8,
+        paddingHorizontal: 12
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#9ca3af", marginRight: 8 }, children: "Search" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_native2.TextInput,
+          {
+            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__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.ActivityIndicator, { size: p.size ?? "small", color: p.color ?? "#3b82f6" });
+}
+function ProgressBarComponent({ element }) {
+  const p = element.props;
+  const height = p.height ?? 6;
+  const progress = Math.min(Math.max(p.progress, 0), 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.View,
+    {
+      style: {
+        height,
+        backgroundColor: p.trackColor ?? "#e5e7eb",
+        borderRadius: height / 2,
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_react_native2.View,
+        {
+          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__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react_native2.View,
+    {
+      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__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_native2.Text,
+          {
+            style: {
+              fontSize: 18,
+              fontWeight: "600",
+              color: "#111827",
+              marginBottom: p.subtitle ? 2 : 12
+            },
+            children: p.title
+          }
+        ),
+        p.subtitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_native2.Text,
+          {
+            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__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react_native2.View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: 12,
+        paddingHorizontal: 16
+      },
+      children: [
+        p.leading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_native2.Text,
+          {
+            style: {
+              fontSize: 16,
+              color: "#6b7280",
+              marginRight: 12,
+              width: 24,
+              textAlign: "center"
+            },
+            children: p.leading
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#111827" }, children: p.title }),
+          p.subtitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280", marginTop: 2 }, children: p.subtitle })
+        ] }),
+        p.trailing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280", marginLeft: 8 }, children: p.trailing }),
+        p.showChevron && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#9ca3af", marginLeft: 8 }, children: ">" })
+      ]
+    }
+  );
+  if (hasPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native2.Pressable,
+      {
+        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__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native2.Modal,
+    {
+      visible: p.visible,
+      animationType: p.animationType ?? "slide",
+      transparent: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.View, { style: modalStyles.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: modalStyles.content, children: [
+        p.title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: modalStyles.title, children: p.title }),
+        children
+      ] }) })
+    }
+  );
+}
+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
+      }));
+      import_react_native2.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 import_react_native2.Share.share({ message, url, title });
+    },
+    openURL: async (params) => {
+      const url = params.url;
+      const canOpen = await import_react_native2.Linking.canOpenURL(url);
+      if (canOpen) {
+        await import_react_native2.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 = import_react_native2.StyleSheet.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 = import_react_native2.StyleSheet.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
+var import_jsx_runtime7 = require("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 = (0, import_react6.useCallback)(
+    (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 = (0, import_core6.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__ */ (0, import_jsx_runtime7.jsx)(
+    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__ */ (0, import_jsx_runtime7.jsx)(
+      ElementRenderer,
+      {
+        element: childElement,
+        spec,
+        registry,
+        loading,
+        fallback
+      },
+      childKey
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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 = (0, import_core6.getByPath)(state, statePath) ?? [];
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: items.map((item, index) => {
+    const key = repeat.key && typeof item === "object" && item !== null ? String(item[repeat.key] ?? index) : String(index);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      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__ */ (0, import_jsx_runtime7.jsx)(
+            ElementRenderer,
+            {
+              element: childElement,
+              spec,
+              registry,
+              loading,
+              fallback
+            },
+            childKey
+          );
+        })
+      },
+      key
+    );
+  }) });
+}
+function Renderer({
+  spec,
+  registry: customRegistry,
+  includeStandard = true,
+  loading,
+  fallback
+}) {
+  const registry = (0, import_react6.useMemo)(
+    () => ({
+      ...includeStandard ? standardComponents : {},
+      ...customRegistry
+    }),
+    [customRegistry, includeStandard]
+  );
+  if (!spec || !spec.root) {
+    return null;
+  }
+  const rootElement = spec.elements[spec.root];
+  if (!rootElement) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ElementRenderer,
+    {
+      element: rootElement,
+      spec,
+      registry,
+      loading,
+      fallback
+    }
+  );
+}
+function JSONUIProvider({
+  registry,
+  initialState,
+  authState,
+  actionHandlers,
+  navigate,
+  validationFunctions,
+  onStateChange,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    StateProvider,
+    {
+      initialState,
+      authState,
+      onStateChange,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionProvider, { handlers: actionHandlers, navigate, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ValidationProvider, { customFunctions: validationFunctions, children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmationDialogManager, {})
+      ] }) }) })
+    }
+  );
+}
+function ConfirmationDialogManager() {
+  const { pendingConfirmation, confirm, cancel } = useActions();
+  if (!pendingConfirmation?.action.confirm) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ConfirmDialog,
+    {
+      confirm: pendingConfirmation.action.confirm,
+      onConfirm: confirm,
+      onCancel: cancel
+    }
+  );
+}
+function createRendererFromCatalog(_catalog, registry) {
+  return function CatalogRenderer(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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__ */ (0, import_jsx_runtime7.jsx)(
+      StateProvider,
+      {
+        initialState: state,
+        authState,
+        onStateChange,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ValidationProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            Renderer,
+            {
+              spec,
+              registry,
+              loading,
+              fallback
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmationDialogManager, {})
+        ] }) }) })
+      }
+    );
+  };
+}
+
+// src/hooks.ts
+var import_react7 = require("react");
+var import_core7 = require("@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);
+    (0, import_core7.setByPath)(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 };
+        (0, import_core7.setByPath)(
+          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);
+    (0, import_core7.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 };
+        (0, import_core7.removeByPath)(
+          newElement,
+          propPath
+        );
+        newSpec.elements[elementKey] = newElement;
+      }
+    }
+  }
+}
+function getSpecValue(spec, path) {
+  if (path === "/root") return spec.root;
+  return (0, import_core7.getByPath)(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] = (0, import_react7.useState)(null);
+  const [isStreaming, setIsStreaming] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [rawLines, setRawLines] = (0, import_react7.useState)([]);
+  const abortControllerRef = (0, import_react7.useRef)(null);
+  const stop = (0, import_react7.useCallback)(() => {
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = null;
+    setIsStreaming(false);
+  }, []);
+  const clear = (0, import_react7.useCallback)(() => {
+    setSpec(null);
+    setError(null);
+    setRawLines([]);
+  }, []);
+  const streamRequest = (0, import_react7.useCallback)(
+    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 = (0, import_react7.useCallback)(
+    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 } = (0, import_core7.autoFixSpec)(currentSpec);
+          if (fixes.length > 0) {
+            console.log("[useUIStream] auto-fixed spec issues:", fixes);
+            currentSpec = fixedSpec;
+            setSpec({ ...currentSpec });
+          }
+          const validation = (0, import_core7.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 = (0, import_core7.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
+    ]
+  );
+  (0, import_react7.useEffect)(() => {
+    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 };
+}
+
+// src/catalog.ts
+var import_zod = require("zod");
+var standardComponentDefinitions = {
+  // ==========================================================================
+  // Layout Components
+  // ==========================================================================
+  Container: {
+    props: import_zod.z.object({
+      padding: import_zod.z.number().nullable(),
+      paddingHorizontal: import_zod.z.number().nullable(),
+      paddingVertical: import_zod.z.number().nullable(),
+      margin: import_zod.z.number().nullable(),
+      backgroundColor: import_zod.z.string().nullable(),
+      borderRadius: import_zod.z.number().nullable(),
+      flex: import_zod.z.number().nullable()
+    }),
+    slots: ["default"],
+    description: "Generic container wrapper. Use for grouping elements with padding, margin, and background color."
+  },
+  Row: {
+    props: import_zod.z.object({
+      gap: import_zod.z.number().nullable(),
+      alignItems: import_zod.z.enum(["flex-start", "center", "flex-end", "stretch", "baseline"]).nullable(),
+      justifyContent: import_zod.z.enum([
+        "flex-start",
+        "center",
+        "flex-end",
+        "space-between",
+        "space-around",
+        "space-evenly"
+      ]).nullable(),
+      flexWrap: import_zod.z.enum(["wrap", "nowrap"]).nullable(),
+      padding: import_zod.z.number().nullable(),
+      flex: import_zod.z.number().nullable()
+    }),
+    slots: ["default"],
+    description: "Horizontal flex layout. Use for placing elements side by side."
+  },
+  Column: {
+    props: import_zod.z.object({
+      gap: import_zod.z.number().nullable(),
+      alignItems: import_zod.z.enum(["flex-start", "center", "flex-end", "stretch", "baseline"]).nullable(),
+      justifyContent: import_zod.z.enum([
+        "flex-start",
+        "center",
+        "flex-end",
+        "space-between",
+        "space-around",
+        "space-evenly"
+      ]).nullable(),
+      padding: import_zod.z.number().nullable(),
+      flex: import_zod.z.number().nullable()
+    }),
+    slots: ["default"],
+    description: "Vertical flex layout. Use for stacking elements top to bottom."
+  },
+  ScrollContainer: {
+    props: import_zod.z.object({
+      horizontal: import_zod.z.boolean().nullable(),
+      showsScrollIndicator: import_zod.z.boolean().nullable(),
+      padding: import_zod.z.number().nullable(),
+      backgroundColor: import_zod.z.string().nullable()
+    }),
+    slots: ["default"],
+    description: "Scrollable container. Use for content that may overflow the screen."
+  },
+  SafeArea: {
+    props: import_zod.z.object({
+      backgroundColor: import_zod.z.string().nullable()
+    }),
+    slots: ["default"],
+    description: "Safe area container that respects device notches and system bars. Use as the outermost wrapper for screens."
+  },
+  Spacer: {
+    props: import_zod.z.object({
+      size: import_zod.z.number().nullable(),
+      flex: import_zod.z.number().nullable()
+    }),
+    slots: [],
+    description: "Empty space between elements. Set size for fixed spacing or flex for flexible spacing."
+  },
+  Pressable: {
+    props: import_zod.z.object({}),
+    events: ["press", "longPress"],
+    slots: ["default"],
+    description: "Touchable wrapper that triggers events on press. Wrap any element to make it tappable. Bind on.press to setState to update state for visibility-driven UIs like tabs."
+  },
+  Divider: {
+    props: import_zod.z.object({
+      direction: import_zod.z.enum(["horizontal", "vertical"]).nullable(),
+      color: import_zod.z.string().nullable(),
+      thickness: import_zod.z.number().nullable(),
+      margin: import_zod.z.number().nullable()
+    }),
+    slots: [],
+    description: "Thin line separator between content sections."
+  },
+  // ==========================================================================
+  // Content Components
+  // ==========================================================================
+  Heading: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      level: import_zod.z.enum(["h1", "h2", "h3", "h4"]).nullable(),
+      color: import_zod.z.string().nullable(),
+      align: import_zod.z.enum(["left", "center", "right"]).nullable()
+    }),
+    slots: [],
+    description: "Heading text at various levels. h1 is largest, h4 is smallest."
+  },
+  Paragraph: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      color: import_zod.z.string().nullable(),
+      align: import_zod.z.enum(["left", "center", "right"]).nullable(),
+      numberOfLines: import_zod.z.number().nullable(),
+      fontSize: import_zod.z.number().nullable()
+    }),
+    slots: [],
+    description: "Body text paragraph. Use for descriptions and longer content."
+  },
+  Label: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      color: import_zod.z.string().nullable(),
+      bold: import_zod.z.boolean().nullable(),
+      size: import_zod.z.enum(["xs", "sm", "md"]).nullable()
+    }),
+    slots: [],
+    description: "Small utility text. Use for captions, form labels, and secondary information."
+  },
+  Image: {
+    props: import_zod.z.object({
+      src: import_zod.z.string(),
+      alt: import_zod.z.string().nullable(),
+      width: import_zod.z.number().nullable(),
+      height: import_zod.z.number().nullable(),
+      resizeMode: import_zod.z.enum(["cover", "contain", "stretch", "center"]).nullable(),
+      borderRadius: import_zod.z.number().nullable()
+    }),
+    slots: [],
+    description: "Image display. Provide a source URL and optional dimensions."
+  },
+  Avatar: {
+    props: import_zod.z.object({
+      src: import_zod.z.string().nullable(),
+      initials: import_zod.z.string().nullable(),
+      size: import_zod.z.enum(["sm", "md", "lg", "xl"]).nullable(),
+      backgroundColor: import_zod.z.string().nullable()
+    }),
+    slots: [],
+    description: "Circular avatar showing an image or initials. Use for user profiles and contacts."
+  },
+  Badge: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      variant: import_zod.z.enum(["default", "info", "success", "warning", "error"]).nullable()
+    }),
+    slots: [],
+    description: "Small colored indicator with a label. Use for status, counts, and categories."
+  },
+  Chip: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      selected: import_zod.z.boolean().nullable(),
+      backgroundColor: import_zod.z.string().nullable()
+    }),
+    events: ["press", "remove"],
+    slots: [],
+    description: "Tag or filter chip. Bind on.remove for removable chips, on.press for selectable chips."
+  },
+  // ==========================================================================
+  // Input Components
+  // ==========================================================================
+  Button: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      variant: import_zod.z.enum(["primary", "secondary", "danger", "outline", "ghost"]).nullable(),
+      size: import_zod.z.enum(["sm", "md", "lg"]).nullable(),
+      disabled: import_zod.z.boolean().nullable(),
+      loading: import_zod.z.boolean().nullable()
+    }),
+    events: ["press"],
+    slots: [],
+    description: "Pressable button with label. Set variant for styling. Bind on.press for the handler to call on press."
+  },
+  TextInput: {
+    props: import_zod.z.object({
+      placeholder: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      statePath: import_zod.z.string().nullable(),
+      secureTextEntry: import_zod.z.boolean().nullable(),
+      keyboardType: import_zod.z.enum(["default", "email-address", "numeric", "phone-pad", "url"]).nullable(),
+      multiline: import_zod.z.boolean().nullable(),
+      numberOfLines: import_zod.z.number().nullable(),
+      label: import_zod.z.string().nullable(),
+      flex: import_zod.z.number().nullable()
+    }),
+    events: ["submit", "focus", "blur"],
+    slots: [],
+    description: "Text input field. Use statePath to bind to the state model for two-way binding. The value typed by the user is stored at the statePath."
+  },
+  Switch: {
+    props: import_zod.z.object({
+      value: import_zod.z.boolean().nullable(),
+      statePath: import_zod.z.string().nullable(),
+      label: import_zod.z.string().nullable(),
+      disabled: import_zod.z.boolean().nullable()
+    }),
+    events: ["change"],
+    slots: [],
+    description: "Toggle switch. Use statePath to bind to the state model."
+  },
+  Checkbox: {
+    props: import_zod.z.object({
+      checked: import_zod.z.boolean().nullable(),
+      statePath: import_zod.z.string().nullable(),
+      label: import_zod.z.string().nullable(),
+      disabled: import_zod.z.boolean().nullable()
+    }),
+    events: ["change"],
+    slots: [],
+    description: "Checkbox for boolean selections. Use statePath to bind to the state model."
+  },
+  Slider: {
+    props: import_zod.z.object({
+      min: import_zod.z.number().nullable(),
+      max: import_zod.z.number().nullable(),
+      step: import_zod.z.number().nullable(),
+      value: import_zod.z.number().nullable(),
+      statePath: import_zod.z.string().nullable(),
+      label: import_zod.z.string().nullable(),
+      color: import_zod.z.string().nullable()
+    }),
+    slots: [],
+    description: "Range slider for numeric values. Use statePath to bind to the state model."
+  },
+  SearchBar: {
+    props: import_zod.z.object({
+      placeholder: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      statePath: import_zod.z.string().nullable()
+    }),
+    events: ["submit"],
+    slots: [],
+    description: "Search input with icon. Bind on.submit to trigger search on submit."
+  },
+  // ==========================================================================
+  // Feedback Components
+  // ==========================================================================
+  Spinner: {
+    props: import_zod.z.object({
+      size: import_zod.z.enum(["small", "large"]).nullable(),
+      color: import_zod.z.string().nullable()
+    }),
+    slots: [],
+    description: "Loading spinner indicator. Use while content is loading."
+  },
+  ProgressBar: {
+    props: import_zod.z.object({
+      progress: import_zod.z.number(),
+      color: import_zod.z.string().nullable(),
+      trackColor: import_zod.z.string().nullable(),
+      height: import_zod.z.number().nullable()
+    }),
+    slots: [],
+    description: "Horizontal progress bar. Set progress from 0 to 1."
+  },
+  // ==========================================================================
+  // Composite Components
+  // ==========================================================================
+  Card: {
+    props: import_zod.z.object({
+      title: import_zod.z.string().nullable(),
+      subtitle: import_zod.z.string().nullable(),
+      padding: import_zod.z.number().nullable(),
+      backgroundColor: import_zod.z.string().nullable(),
+      borderRadius: import_zod.z.number().nullable(),
+      elevated: import_zod.z.boolean().nullable()
+    }),
+    slots: ["default"],
+    description: "Elevated card container with optional title. Use for grouping related content."
+  },
+  ListItem: {
+    props: import_zod.z.object({
+      title: import_zod.z.string(),
+      subtitle: import_zod.z.string().nullable(),
+      leading: import_zod.z.string().nullable(),
+      trailing: import_zod.z.string().nullable(),
+      showChevron: import_zod.z.boolean().nullable()
+    }),
+    events: ["press"],
+    slots: [],
+    description: "List row with title, subtitle, and optional leading/trailing text. Bind on.press for the press handler."
+  },
+  Modal: {
+    props: import_zod.z.object({
+      visible: import_zod.z.boolean(),
+      title: import_zod.z.string().nullable(),
+      animationType: import_zod.z.enum(["slide", "fade", "none"]).nullable(),
+      statePath: import_zod.z.string().nullable()
+    }),
+    slots: ["default"],
+    description: "Modal overlay dialog. Use statePath to bind visibility to the state model."
+  }
+};
+var standardActionDefinitions = {
+  navigate: {
+    params: import_zod.z.object({
+      screen: import_zod.z.string(),
+      params: import_zod.z.record(import_zod.z.string(), import_zod.z.unknown()).nullable()
+    }),
+    description: "Navigate to a screen. Calls the user-provided navigation function."
+  },
+  goBack: {
+    params: import_zod.z.object({}),
+    description: "Navigate back to the previous screen."
+  },
+  showAlert: {
+    params: import_zod.z.object({
+      title: import_zod.z.string(),
+      message: import_zod.z.string().nullable(),
+      buttons: import_zod.z.array(
+        import_zod.z.object({
+          text: import_zod.z.string(),
+          style: import_zod.z.enum(["default", "cancel", "destructive"]).nullable(),
+          action: import_zod.z.string().nullable()
+        })
+      ).nullable()
+    }),
+    description: "Show a native alert dialog using Alert.alert()."
+  },
+  share: {
+    params: import_zod.z.object({
+      message: import_zod.z.string(),
+      url: import_zod.z.string().nullable(),
+      title: import_zod.z.string().nullable()
+    }),
+    description: "Open the native share sheet using Share.share()."
+  },
+  openURL: {
+    params: import_zod.z.object({
+      url: import_zod.z.string()
+    }),
+    description: "Open a URL in the default browser using Linking.openURL()."
+  },
+  setState: {
+    params: import_zod.z.object({
+      path: import_zod.z.string(),
+      value: import_zod.z.unknown()
+    }),
+    description: "Update a value in the state model at the given path."
+  },
+  pushState: {
+    params: import_zod.z.object({
+      path: import_zod.z.string(),
+      value: import_zod.z.unknown(),
+      clearPath: import_zod.z.string().optional()
+    }),
+    description: 'Append an item to an array in the state model. The value can contain { path: "/statePath" } references to read from current state, and "$id" to auto-generate a unique ID. Use clearPath to reset another path after pushing (e.g. clear an input field). Example: { path: "/todos", value: { id: "$id", title: { path: "/newTodoText" }, completed: false }, clearPath: "/newTodoText" }.'
+  },
+  removeState: {
+    params: import_zod.z.object({
+      path: import_zod.z.string(),
+      index: import_zod.z.number()
+    }),
+    description: "Remove an item from an array in the state model at the given index."
+  },
+  refresh: {
+    params: import_zod.z.object({
+      target: import_zod.z.string().nullable()
+    }),
+    description: "Trigger a data refresh. Optionally specify a target to refresh."
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  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.js.map