@json-render/react-native 0.5.1 → 0.6.0

package/dist/index.js

@@ -39,18 +39,17 @@ __export(index_exports, {
   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,
+  useBoundProp: () => useBoundProp,
   useFieldValidation: () => useFieldValidation,
   useIsVisible: () => useIsVisible,
   useRepeatScope: () => useRepeatScope,
@@ -70,11 +69,12 @@ 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 stateRef = (0, import_react.useRef)(state);
+  stateRef.current = state;
   const initialStateJsonRef = (0, import_react.useRef)(JSON.stringify(initialState));
   (0, import_react.useEffect)(() => {
     const newJson = JSON.stringify(initialState);
@@ -85,7 +85,10 @@ function StateProvider({
       }
     }
   }, [initialState]);
-  const get = (0, import_react.useCallback)((path) => (0, import_core.getByPath)(state, path), [state]);
+  const get = (0, import_react.useCallback)(
+    (path) => (0, import_core.getByPath)(stateRef.current, path),
+    []
+  );
   const set = (0, import_react.useCallback)(
     (path, value2) => {
       setStateInternal((prev) => {
@@ -99,26 +102,28 @@ function StateProvider({
   );
   const update = (0, import_react.useCallback)(
     (updates) => {
+      const entries = Object.entries(updates);
       setStateInternal((prev) => {
         const next = { ...prev };
-        for (const [path, value2] of Object.entries(updates)) {
+        for (const [path, value2] of entries) {
           (0, import_core.setByPath)(next, path, value2);
-          onStateChange?.(path, value2);
         }
         return next;
       });
+      for (const [path, value2] of entries) {
+        onStateChange?.(path, value2);
+      }
     },
     [onStateChange]
   );
   const value = (0, import_react.useMemo)(
     () => ({
       state,
-      authState,
       get,
       set,
       update
     }),
-    [state, authState, get, set, update]
+    [state, get, set, update]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StateContext.Provider, { value, children });
 }
@@ -149,13 +154,12 @@ 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 { state } = useStateStore();
   const ctx = (0, import_react2.useMemo)(
     () => ({
-      stateModel: state,
-      authState
+      stateModel: state
     }),
-    [state, authState]
+    [state]
   );
   const isVisible = (0, import_react2.useMemo)(
     () => (condition) => (0, import_core2.evaluateVisibility)(condition, ctx),
@@ -197,8 +201,8 @@ function deepResolveValue(value, get) {
   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 && typeof obj.$state === "string") {
+      return get(obj.$state);
     }
     if (keys.length === 1 && "$id" in obj) {
       return generateUniqueId();
@@ -236,34 +240,34 @@ function ActionProvider({
     async (binding) => {
       const resolved = (0, import_core3.resolveAction)(binding, state);
       if (resolved.action === "setState" && resolved.params) {
-        const path = resolved.params.path;
+        const statePath = resolved.params.statePath;
         const value2 = resolved.params.value;
-        if (path) {
-          set(path, value2);
+        if (statePath) {
+          set(statePath, value2);
         }
         return;
       }
       if (resolved.action === "pushState" && resolved.params) {
-        const path = resolved.params.path;
+        const statePath = resolved.params.statePath;
         const rawValue = resolved.params.value;
-        if (path) {
+        if (statePath) {
           const resolvedValue = deepResolveValue(rawValue, get);
-          const arr = get(path) ?? [];
-          set(path, [...arr, resolvedValue]);
-          const clearPath = resolved.params.clearPath;
-          if (clearPath) {
-            set(clearPath, "");
+          const arr = get(statePath) ?? [];
+          set(statePath, [...arr, resolvedValue]);
+          const clearStatePath = resolved.params.clearStatePath;
+          if (clearStatePath) {
+            set(clearStatePath, "");
           }
         }
         return;
       }
       if (resolved.action === "removeState" && resolved.params) {
-        const path = resolved.params.path;
+        const statePath = resolved.params.statePath;
         const index = resolved.params.index;
-        if (path !== void 0 && index !== void 0) {
-          const arr = get(path) ?? [];
+        if (statePath !== void 0 && index !== void 0) {
+          const arr = get(statePath) ?? [];
           set(
-            path,
+            statePath,
             arr.filter((_, i) => i !== index)
           );
         }
@@ -492,27 +496,75 @@ 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 dynamicArgsEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    const va = a[key];
+    const vb = b[key];
+    if (va === vb) continue;
+    if (typeof va === "object" && va !== null && typeof vb === "object" && vb !== null) {
+      const sa = va.$state;
+      const sb = vb.$state;
+      if (typeof sa === "string" && sa === sb) continue;
+    }
+    return false;
+  }
+  return true;
+}
+function validationConfigEqual(a, b) {
+  if (a === b) return true;
+  if (a.validateOn !== b.validateOn) return false;
+  const ac = a.checks ?? [];
+  const bc = b.checks ?? [];
+  if (ac.length !== bc.length) return false;
+  for (let i = 0; i < ac.length; i++) {
+    const ca = ac[i];
+    const cb = bc[i];
+    if (ca.type !== cb.type) return false;
+    if (ca.message !== cb.message) return false;
+    if (!dynamicArgsEqual(ca.args, cb.args)) return false;
+  }
+  return true;
+}
 function ValidationProvider({
   customFunctions = {},
   children
 }) {
-  const { state, authState } = useStateStore();
+  const { state } = 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 }));
+      setFieldConfigs((prev) => {
+        const existing = prev[path];
+        if (existing && validationConfigEqual(existing, config)) {
+          return prev;
+        }
+        return { ...prev, [path]: config };
+      });
     },
     []
   );
   const validate = (0, import_react4.useCallback)(
     (path, config) => {
-      const value2 = state[path.split("/").filter(Boolean).join(".")];
+      const segments = path.split("/").filter(Boolean);
+      let value2 = state;
+      for (const seg of segments) {
+        if (value2 != null && typeof value2 === "object") {
+          value2 = value2[seg];
+        } else {
+          value2 = void 0;
+          break;
+        }
+      }
       const result = (0, import_core4.runValidation)(config, {
         value: value2,
         stateModel: state,
-        customFunctions,
-        authState
+        customFunctions
       });
       setFieldStates((prev) => ({
         ...prev,
@@ -524,7 +576,7 @@ function ValidationProvider({
       }));
       return result;
     },
-    [state, customFunctions, authState]
+    [state, customFunctions]
   );
   const touch = (0, import_react4.useCallback)((path) => {
     setFieldStates((prev) => ({
@@ -621,44 +673,16 @@ var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var RepeatScopeContext = (0, import_react5.createContext)(null);
 function RepeatScopeProvider({
-  basePath,
+  item,
   index,
+  basePath,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RepeatScopeContext.Provider, { value: { basePath, index }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RepeatScopeContext.Provider, { value: { item, index, basePath }, 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");
@@ -691,7 +715,9 @@ var schema = (0, import_core5.defineSchema)(
         /** 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()
+        description: s.string(),
+        /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */
+        example: s.any()
       }),
       /** Action definitions (optional) */
       actions: s.map({
@@ -705,181 +731,559 @@ var schema = (0, import_core5.defineSchema)(
   {
     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.",
+      "FIXED BOTTOM BAR PATTERN: When building a screen with a fixed header and/or fixed bottom tab bar, the outermost vertical layout component must have flex:1 so it fills the screen. The scrollable content area must also have flex:1. Structure: screen wrapper > vertical layout(flex:1, gap:0) > [header, content wrapper(flex:1) > [scroll container(...)], bottom-tabs]. Both the outer layout AND the content wrapper need flex:1. ONLY use components from the AVAILABLE COMPONENTS list.",
+      "NEVER place a bottom tab bar or fixed footer inside a scroll container. It must be a sibling AFTER the flex:1 container that holds the scroll content.",
       // 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.',
+      'When building repeating content backed by a state array (e.g. todos, posts, cart items), use the "repeat" field on a container element from the AVAILABLE COMPONENTS list. Example: { "type": "<ContainerComponent>", "props": { "gap": 8 }, "repeat": { "statePath": "/todos", "key": "id" }, "children": ["todo-item"] }. Inside repeated children, use { "$item": "field" } to read a field from the current item, and { "$index": true } for the current array index. For two-way binding to an item field use { "$bindItem": "completed" }. 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":[...]}.',
+      'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"<ComponentName>","props":{},"visible":{"$state":"/activeTab","eq":"home"},"children":[...]}. WRONG: {"type":"<ComponentName>","props":{},"visible":{...},"children":[...]} with visible inside props.',
       // 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"] }.`,
+      "TAB NAVIGATION PATTERN: When building a UI with multiple tabs, use a pressable/tappable component + setState action + visible conditions to make tabs functional. ONLY use components from the AVAILABLE COMPONENTS list.",
+      'Each tab button should be a pressable component wrapping its icon/label children, with action "setState" and actionParams { "statePath": "/activeTab", "value": "tabName" }.',
+      `Each tab's content section should have a visible condition: { "$state": "/activeTab", "eq": "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" }',
+      "TAB ACTIVE STYLING: Use $cond dynamic props on icon elements inside each tab button so a single icon changes appearance based on the active tab.",
+      '  - For the icon name: { "$cond": { "$state": "/activeTab", "eq": "thisTabName" }, "$then": "home", "$else": "home-outline" }',
+      '  - For the icon color: { "$cond": { "$state": "/activeTab", "eq": "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.',
+      '  - For the FIRST/DEFAULT tab, use { "$cond": [{ "$state": "/activeTab", "eq": "thisTabName" }], "$then": "#007AFF", "$else": "#8E8E93" } so it appears active before any tab is tapped. When no tab is selected yet, include a default tab with no visible condition.',
       // 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" } }] }.',
+      'SCREEN NAVIGATION: Use a pressable component 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. ONLY use components from the AVAILABLE COMPONENTS list.',
+      'Each screen section uses a visible condition on /currentScreen: { "$state": "/currentScreen", "eq": "screenName" }. The default/home screen should show by default (no visible condition) and all other screens should have the appropriate visible condition.',
       "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").',
+      'Include a back button on pushed screens using action "pop". Example: pressable(action:"pop") > row layout > back icon + back label. ONLY use components from the AVAILABLE COMPONENTS list.',
       "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".'
+      'Example: A list screen with items that push to detail: a pressable component with action:"push" and actionParams:{screen:"detail"} wrapping each list item. The detail screen section has visible:{"$state":"/currentScreen","eq":"detail"} and contains a back button with action:"pop". ONLY use components from the AVAILABLE COMPONENTS list.'
     ]
   }
 );
 var elementTreeSchema = schema;
 
 // src/renderer.tsx
-var import_react6 = __toESM(require("react"));
-var import_core6 = require("@json-render/core");
+var import_react7 = __toESM(require("react"));
+var import_core7 = 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
-    }
+
+// src/hooks.ts
+var import_react6 = require("react");
+var import_core6 = require("@json-render/core");
+function useBoundProp(propValue, bindingPath) {
+  const { set } = useStateStore();
+  const setValue = (0, import_react6.useCallback)(
+    (value) => {
+      if (bindingPath) set(bindingPath, value);
+    },
+    [bindingPath, set]
   );
+  return [propValue, setValue];
 }
-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 looksLikeJson(line) {
+  return line.startsWith("{") || line.startsWith("[");
 }
-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 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 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 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_core6.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_core6.setByPath)(
+          newElement,
+          propPath,
+          value
+        );
+        newSpec.elements[elementKey] = newElement;
+      }
     }
-  );
+  }
 }
-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 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_core6.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_core6.removeByPath)(
+          newElement,
+          propPath
+        );
+        newSpec.elements[elementKey] = newElement;
       }
     }
-  );
+  }
 }
-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 getSpecValue(spec, path) {
+  if (path === "/root") return spec.root;
+  return (0, import_core6.getByPath)(spec, path);
 }
-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
-      }
+function applyPatch(spec, patch) {
+  const newSpec = { ...spec, elements: { ...spec.elements } };
+  switch (patch.op) {
+    case "add":
+    case "replace": {
+      setSpecValue(newSpec, patch.path, patch.value);
+      break;
     }
-  );
-}
-var headingSizes = {
-  h1: 32,
-  h2: 24,
-  h3: 20,
-  h4: 16
-};
-function HeadingComponent({ element }) {
-  const p = element.props;
+    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_react6.useState)(null);
+  const [isStreaming, setIsStreaming] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const [rawLines, setRawLines] = (0, import_react6.useState)([]);
+  const abortControllerRef = (0, import_react6.useRef)(null);
+  const stop = (0, import_react6.useCallback)(() => {
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = null;
+    setIsStreaming(false);
+  }, []);
+  const clear = (0, import_react6.useCallback)(() => {
+    setSpec(null);
+    setError(null);
+    setRawLines([]);
+  }, []);
+  const streamRequest = (0, import_react6.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
+      });
+      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 aborted = false;
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          break;
+        }
+        const decoded = decoder.decode(value, { stream: true });
+        buffer += decoded;
+        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) {
+            currentSpec = applyPatch(currentSpec, patch);
+            setSpec({ ...currentSpec });
+          } else if (malformed) {
+            malformedLines.push(line.trim());
+            if (abortOnMalformed) {
+              await reader.cancel();
+              aborted = true;
+              break;
+            }
+          }
+        }
+        if (aborted) break;
+        if (newLines.length > 0) {
+          setRawLines((prev) => [...prev, ...newLines]);
+        }
+      }
+      if (!aborted && buffer.trim()) {
+        setRawLines((prev) => [...prev, buffer]);
+        const { patch, malformed } = parsePatchLine(buffer);
+        if (patch) {
+          currentSpec = applyPatch(currentSpec, patch);
+          setSpec({ ...currentSpec });
+        } else if (malformed) {
+          malformedLines.push(buffer.trim());
+        }
+      }
+      return { spec: currentSpec, completed: !aborted, malformedLines };
+    },
+    [api, fetchFn]
+  );
+  const send = (0, import_react6.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) {
+              break;
+            }
+            retriesUsed++;
+            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_core6.autoFixSpec)(currentSpec);
+          if (fixes.length > 0) {
+            currentSpec = fixedSpec;
+            setSpec({ ...currentSpec });
+          }
+          const validation = (0, import_core6.validateSpec)(currentSpec);
+          if (validation.valid) {
+            break;
+          }
+          const errors = validation.issues.filter(
+            (i) => i.severity === "error"
+          );
+          if (retriesUsed >= maxRetries) {
+            break;
+          }
+          retriesUsed++;
+          const issueText = (0, import_core6.formatSpecIssues)(validation.issues);
+          currentContext = { ...context, previousSpec: currentSpec };
+          currentPrompt = `FIX THE FOLLOWING ERRORS in the current UI spec. Output ONLY the patches needed to fix these issues, do not recreate the entire UI.
+
+` + 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_react6.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/components/standard.tsx
+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,
@@ -1039,7 +1443,7 @@ function ChipComponent({ element, emit }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     import_react_native2.Pressable,
     {
-      onPress: () => emit?.("press"),
+      onPress: () => emit("press"),
       style: {
         flexDirection: "row",
         alignItems: "center",
@@ -1051,7 +1455,7 @@ function ChipComponent({ element, emit }) {
       },
       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" }) })
+        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" }) })
       ]
     }
   );
@@ -1084,7 +1488,7 @@ function ButtonComponent({ element, emit }) {
     import_react_native2.Pressable,
     {
       disabled,
-      onPress: () => emit?.("press"),
+      onPress: () => emit("press"),
       style: ({ pressed }) => ({
         backgroundColor: variant.bg,
         paddingHorizontal: size.paddingH,
@@ -1122,12 +1526,13 @@ function ButtonComponent({ element, emit }) {
     }
   );
 }
-function TextInputComponent({ element }) {
+function TextInputComponent({ element, bindings }) {
   const p = element.props;
-  const [boundValue, setBoundValue] = useStateBinding(
-    p.statePath ?? ""
+  const [boundValue, setBoundValue] = useBoundProp(
+    p.value,
+    bindings?.value
   );
-  const displayValue = p.statePath ? boundValue ?? "" : p.value ?? "";
+  const displayValue = boundValue ?? "";
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: p.flex != null ? { flex: p.flex } : void 0, children: [
     p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: inputStyles.label, children: p.label }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -1135,7 +1540,7 @@ function TextInputComponent({ element }) {
       {
         placeholder: p.placeholder ?? void 0,
         value: displayValue,
-        onChangeText: p.statePath ? setBoundValue : void 0,
+        onChangeText: bindings?.value ? setBoundValue : void 0,
         secureTextEntry: p.secureTextEntry ?? false,
         keyboardType: p.keyboardType ?? "default",
         multiline: p.multiline ?? false,
@@ -1151,1146 +1556,713 @@ function TextInputComponent({ element }) {
     )
   ] });
 }
-function SwitchComponent({ element }) {
+function SwitchComponent({ element, bindings }) {
   const p = element.props;
-  const [boundValue, setBoundValue] = useStateBinding(
-    p.statePath ?? ""
+  const [checked, setChecked] = useBoundProp(
+    p.checked,
+    bindings?.checked
   );
-  const displayValue = p.statePath ? boundValue ?? false : p.value ?? false;
+  const displayValue = checked ?? false;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_react_native2.Switch,
       {
         value: displayValue,
-        onValueChange: p.statePath ? setBoundValue : void 0,
+        onValueChange: bindings?.checked ? setChecked : 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
-      ]
-    }
-  );
+    ),
+    p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#374151" }, children: p.label })
+  ] });
 }
-function ListItemComponent({ element, emit }) {
+function CheckboxComponent({ element, bindings }) {
   const p = element.props;
-  const hasPress = !!element.on?.press;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    import_react_native2.View,
+  const [checked, setChecked] = useBoundProp(
+    p.checked,
+    bindings?.checked
+  );
+  const isChecked = checked ?? false;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react_native2.Pressable,
     {
+      disabled: p.disabled ?? false,
+      onPress: () => {
+        if (bindings?.checked) {
+          setChecked(!isChecked);
+        }
+      },
       style: {
         flexDirection: "row",
         alignItems: "center",
-        paddingVertical: 12,
-        paddingHorizontal: 16
+        gap: 8,
+        opacity: p.disabled ? 0.5 : 1
       },
       children: [
-        p.leading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react_native2.Text,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_native2.View,
           {
             style: {
-              fontSize: 16,
-              color: "#6b7280",
-              marginRight: 12,
-              width: 24,
-              textAlign: "center"
+              width: 20,
+              height: 20,
+              borderRadius: 4,
+              borderWidth: 2,
+              borderColor: isChecked ? "#3b82f6" : "#d1d5db",
+              backgroundColor: isChecked ? "#3b82f6" : "transparent",
+              alignItems: "center",
+              justifyContent: "center"
             },
-            children: p.leading
+            children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { color: "#ffffff", fontSize: 12, fontWeight: "700" }, children: "\u2713" })
           }
         ),
-        /* @__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");
-var ElementErrorBoundary = class extends import_react6.default.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-  componentDidCatch(error, info) {
-    console.error(
-      `[json-render] Rendering error in <${this.props.elementType}>:`,
-      error,
-      info.componentStack
-    );
-  }
-  render() {
-    if (this.state.hasError) {
-      return null;
-    }
-    return this.props.children;
-  }
-};
-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;
+        p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#374151" }, children: p.label })
+      ]
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      ElementRenderer,
-      {
-        element: childElement,
-        spec,
-        registry,
-        loading,
-        fallback
-      },
-      childKey
-    );
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ElementErrorBoundary, { elementType: resolvedElement.type, children: /* @__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,
+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,
       {
-        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.`
-              );
+        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
             }
-            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,
+function SearchBarComponent({ element, emit }) {
+  const p = element.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react_native2.View,
     {
-      element: rootElement,
-      spec,
-      registry,
-      loading,
-      fallback
+      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 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 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 ConfirmationDialogManager() {
-  const { pendingConfirmation, confirm, cancel } = useActions();
-  if (!pendingConfirmation?.action.confirm) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    ConfirmDialog,
+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,
     {
-      confirm: pendingConfirmation.action.confirm,
-      onConfirm: confirm,
-      onCancel: cancel
+      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 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}`);
+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
+      ]
     }
-  };
-  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,
+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,
       {
-        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, {})
-        ] }) }) })
+        onPress: () => emit("press"),
+        style: ({ pressed }) => ({
+          opacity: pressed ? 0.7 : 1,
+          backgroundColor: pressed ? "#f9fafb" : "transparent"
+        }),
+        children: content
       }
     );
-  };
-}
-
-// 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 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
+      ] }) })
     }
-  }
-  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 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 statePath = params.statePath;
+      const value = params.value;
+      options?.onSetData?.(statePath, 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"
   }
-}
-function removeSpecValue(newSpec, path) {
-  if (path === "/state") {
-    newSpec.state = void 0;
-    return;
+});
+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
   }
-  if (path.startsWith("/state/") && newSpec.state) {
-    const statePath = path.slice("/state".length);
-    (0, import_core7.removeByPath)(newSpec.state, statePath);
-    return;
+});
+
+// src/renderer.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ElementErrorBoundary = class extends import_react7.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
   }
-  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;
-      }
-    }
+  static getDerivedStateFromError() {
+    return { hasError: true };
   }
-}
-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;
+  componentDidCatch(error, info) {
+    console.error(
+      `[json-render] Rendering error in <${this.props.elementType}>:`,
+      error,
+      info.componentStack
+    );
+  }
+  render() {
+    if (this.state.hasError) {
+      return null;
     }
+    return this.props.children;
   }
-  return newSpec;
-}
-function useUIStream({
-  api,
-  onComplete,
-  onError,
-  fetch: fetchFn = globalThis.fetch,
-  validate: enableValidation = false,
-  maxRetries = 5
+};
+var ElementRenderer = import_react7.default.memo(function ElementRenderer2({
+  element,
+  spec,
+  registry,
+  loading,
+  fallback
 }) {
-  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]);
+  const repeatScope = useRepeatScope();
+  const { ctx } = useVisibility();
+  const { execute } = useActions();
+  const fullCtx = (0, import_react7.useMemo)(
+    () => repeatScope ? {
+      ...ctx,
+      repeatItem: repeatScope.item,
+      repeatIndex: repeatScope.index,
+      repeatBasePath: repeatScope.basePath
+    } : ctx,
+    [ctx, repeatScope]
+  );
+  const isVisible = element.visible === void 0 ? true : (0, import_core7.evaluateVisibility)(element.visible, fullCtx);
+  const onBindings = element.on;
+  const emit = (0, import_react7.useCallback)(
+    (eventName) => {
+      const binding = onBindings?.[eventName];
+      if (!binding) return;
+      const actionBindings = Array.isArray(binding) ? binding : [binding];
+      for (const b of actionBindings) {
+        if (!b.params) {
+          execute(b);
+          continue;
         }
-      }
-      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());
+        const resolved = {};
+        for (const [key, val] of Object.entries(b.params)) {
+          resolved[key] = (0, import_core7.resolveActionParam)(val, fullCtx);
         }
+        execute({ ...b, params: resolved });
       }
-      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]
+    [onBindings, execute, fullCtx]
   );
-  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) {
+  if (!isVisible) {
+    return null;
+  }
+  const rawProps = element.props;
+  const elementBindings = (0, import_core7.resolveBindings)(rawProps, fullCtx);
+  const resolvedProps = (0, import_core7.resolveElementProps)(rawProps, fullCtx);
+  const resolvedElement = resolvedProps !== element.props ? { ...element, props: resolvedProps } : element;
+  const Component = registry[resolvedElement.type] ?? fallback;
+  if (!Component) {
+    console.warn(`No renderer for component type: ${resolvedElement.type}`);
+    return null;
+  }
+  const children = resolvedElement.repeat ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    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)(
+      ElementRenderer2,
+      {
+        element: childElement,
+        spec,
+        registry,
+        loading,
+        fallback
+      },
+      childKey
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ElementErrorBoundary, { elementType: resolvedElement.type, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Component,
+    {
+      element: resolvedElement,
+      emit,
+      bindings: elementBindings,
+      loading,
+      children
+    }
+  ) });
+});
+function RepeatChildren({
+  element,
+  spec,
+  registry,
+  loading,
+  fallback
+}) {
+  const { state } = useStateStore();
+  const repeat = element.repeat;
+  const statePath = repeat.statePath;
+  const items = (0, import_core7.getByPath)(state, statePath) ?? [];
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: items.map((itemValue, index) => {
+    const key = repeat.key && typeof itemValue === "object" && itemValue !== null ? String(
+      itemValue[repeat.key] ?? index
+    ) : String(index);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      RepeatScopeProvider,
+      {
+        item: itemValue,
+        index,
+        basePath: `${statePath}/${index}`,
+        children: element.children?.map((childKey) => {
+          const childElement = spec.elements[childKey];
+          if (!childElement) {
+            if (!loading) {
               console.warn(
-                "[useUIStream] malformed lines but max retries exhausted"
+                `[json-render] Missing element "${childKey}" referenced as child of "${element.type}" (repeat). This element will not render.`
               );
-              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;
+            return null;
           }
-          retriesUsed++;
-          const issueText = (0, import_core7.formatSpecIssues)(validation.issues);
-          console.warn(
-            `[useUIStream] post-stream retry ${retriesUsed}/${maxRetries}:`,
-            errors.map((e) => e.message)
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            ElementRenderer,
+            {
+              element: childElement,
+              spec,
+              registry,
+              loading,
+              fallback
+            },
+            childKey
           );
-          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
-    ]
+        })
+      },
+      key
+    );
+  }) });
+}
+function Renderer({
+  spec,
+  registry: customRegistry,
+  includeStandard = true,
+  loading,
+  fallback
+}) {
+  const registry = (0, import_react7.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
+    }
   );
-  (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
-    };
+function JSONUIProvider({
+  registry,
+  initialState,
+  handlers,
+  navigate,
+  validationFunctions,
+  onStateChange,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StateProvider, { initialState, onStateChange, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ValidationProvider, { customFunctions: validationFunctions, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmationDialogManager, {})
+  ] }) }) }) });
+}
+function ConfirmationDialogManager() {
+  const { pendingConfirmation, confirm, cancel } = useActions();
+  if (!pendingConfirmation?.action.confirm) {
+    return null;
   }
-  for (const element of elements) {
-    if (element.parentKey) {
-      const parent = elementMap[element.parentKey];
-      if (parent) {
-        if (!parent.children) {
-          parent.children = [];
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ConfirmDialog,
+    {
+      confirm: pendingConfirmation.action.confirm,
+      onConfirm: confirm,
+      onCancel: cancel
+    }
+  );
+}
+function defineRegistry(_catalog, options) {
+  const registry = {};
+  if (options.components) {
+    for (const [name, componentFn] of Object.entries(options.components)) {
+      registry[name] = ({
+        element,
+        children,
+        emit,
+        bindings,
+        loading
+      }) => {
+        return componentFn({
+          props: element.props,
+          children,
+          emit,
+          bindings,
+          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);
         }
-        parent.children.push(element.key);
-      }
+      };
+    }
+    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 {
-      root = element.key;
+      console.warn(`Unknown action: ${actionName}`);
     }
-  }
-  return { root, elements: elementMap };
+  };
+  return { registry, handlers, executeAction: executeAction2 };
+}
+function createRenderer(catalog, components) {
+  const registry = components;
+  return function CatalogRenderer({
+    spec,
+    state,
+    onAction,
+    onStateChange,
+    loading,
+    fallback
+  }) {
+    const actionHandlers = onAction ? new Proxy(
+      {},
+      {
+        get: (_target, prop) => {
+          return (params) => onAction(prop, params);
+        },
+        has: () => true
+      }
+    ) : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StateProvider, { initialState: state, onStateChange, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ValidationProvider, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        Renderer,
+        {
+          spec,
+          registry,
+          loading,
+          fallback
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmationDialogManager, {})
+    ] }) }) }) });
+  };
 }
 
 // src/catalog.ts
@@ -2310,7 +2282,8 @@ var standardComponentDefinitions = {
       flex: import_zod.z.number().nullable()
     }),
     slots: ["default"],
-    description: "Generic container wrapper. Use for grouping elements with padding, margin, and background color."
+    description: "Generic container wrapper. Use for grouping elements with padding, margin, and background color.",
+    example: { padding: 16, backgroundColor: "#FFFFFF" }
   },
   Row: {
     props: import_zod.z.object({
@@ -2329,7 +2302,8 @@ var standardComponentDefinitions = {
       flex: import_zod.z.number().nullable()
     }),
     slots: ["default"],
-    description: "Horizontal flex layout. Use for placing elements side by side."
+    description: "Horizontal flex layout. Use for placing elements side by side.",
+    example: { gap: 12, alignItems: "center" }
   },
   Column: {
     props: import_zod.z.object({
@@ -2347,7 +2321,8 @@ var standardComponentDefinitions = {
       flex: import_zod.z.number().nullable()
     }),
     slots: ["default"],
-    description: "Vertical flex layout. Use for stacking elements top to bottom."
+    description: "Vertical flex layout. Use for stacking elements top to bottom.",
+    example: { gap: 12, padding: 16 }
   },
   ScrollContainer: {
     props: import_zod.z.object({
@@ -2401,7 +2376,8 @@ var standardComponentDefinitions = {
       align: import_zod.z.enum(["left", "center", "right"]).nullable()
     }),
     slots: [],
-    description: "Heading text at various levels. h1 is largest, h4 is smallest."
+    description: "Heading text at various levels. h1 is largest, h4 is smallest.",
+    example: { text: "Welcome", level: "h1" }
   },
   Paragraph: {
     props: import_zod.z.object({
@@ -2412,7 +2388,8 @@ var standardComponentDefinitions = {
       fontSize: import_zod.z.number().nullable()
     }),
     slots: [],
-    description: "Body text paragraph. Use for descriptions and longer content."
+    description: "Body text paragraph. Use for descriptions and longer content.",
+    example: { text: "This is a paragraph of body text." }
   },
   Label: {
     props: import_zod.z.object({
@@ -2422,7 +2399,8 @@ var standardComponentDefinitions = {
       size: import_zod.z.enum(["xs", "sm", "md"]).nullable()
     }),
     slots: [],
-    description: "Small utility text. Use for captions, form labels, and secondary information."
+    description: "Small utility text. Use for captions, form labels, and secondary information.",
+    example: { text: "Status", size: "sm" }
   },
   Image: {
     props: import_zod.z.object({
@@ -2434,7 +2412,13 @@ var standardComponentDefinitions = {
       borderRadius: import_zod.z.number().nullable()
     }),
     slots: [],
-    description: "Image display. Provide a source URL and optional dimensions."
+    description: "Image display. Provide a source URL and optional dimensions.",
+    example: {
+      src: "https://picsum.photos/300/200",
+      alt: "Photo",
+      width: 300,
+      height: 200
+    }
   },
   Avatar: {
     props: import_zod.z.object({
@@ -2444,7 +2428,8 @@ var standardComponentDefinitions = {
       backgroundColor: import_zod.z.string().nullable()
     }),
     slots: [],
-    description: "Circular avatar showing an image or initials. Use for user profiles and contacts."
+    description: "Circular avatar showing an image or initials. Use for user profiles and contacts.",
+    example: { initials: "JD", size: "md" }
   },
   Badge: {
     props: import_zod.z.object({
@@ -2452,7 +2437,8 @@ var standardComponentDefinitions = {
       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."
+    description: "Small colored indicator with a label. Use for status, counts, and categories.",
+    example: { label: "New", variant: "info" }
   },
   Chip: {
     props: import_zod.z.object({
@@ -2477,13 +2463,13 @@ var standardComponentDefinitions = {
     }),
     events: ["press"],
     slots: [],
-    description: "Pressable button with label. Set variant for styling. Bind on.press for the handler to call on press."
+    description: "Pressable button with label. Set variant for styling. Bind on.press for the handler to call on press.",
+    example: { label: "Submit", variant: "primary" }
   },
   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(),
@@ -2493,29 +2479,31 @@ var standardComponentDefinitions = {
     }),
     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."
+    description: "Text input field. Use $bindState to bind to the state model for two-way binding. The value typed by the user is stored at the bound path.",
+    example: {
+      placeholder: "Enter text...",
+      label: "Name"
+    }
   },
   Switch: {
     props: import_zod.z.object({
-      value: import_zod.z.boolean().nullable(),
-      statePath: import_zod.z.string().nullable(),
+      checked: import_zod.z.boolean().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."
+    description: "Toggle switch. Use $bindState 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."
+    description: "Checkbox for boolean selections. Use $bindState to bind to the state model."
   },
   Slider: {
     props: import_zod.z.object({
@@ -2523,18 +2511,16 @@ var standardComponentDefinitions = {
       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."
+    description: "Range slider for numeric values. Use $bindState 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()
+      value: import_zod.z.string().nullable()
     }),
     events: ["submit"],
     slots: [],
@@ -2574,7 +2560,8 @@ var standardComponentDefinitions = {
       elevated: import_zod.z.boolean().nullable()
     }),
     slots: ["default"],
-    description: "Elevated card container with optional title. Use for grouping related content."
+    description: "Elevated card container with optional title. Use for grouping related content.",
+    example: { title: "Details", padding: 16, elevated: true }
   },
   ListItem: {
     props: import_zod.z.object({
@@ -2586,17 +2573,21 @@ var standardComponentDefinitions = {
     }),
     events: ["press"],
     slots: [],
-    description: "List row with title, subtitle, and optional leading/trailing text. Bind on.press for the press handler."
+    description: "List row with title, subtitle, and optional leading/trailing text. Bind on.press for the press handler.",
+    example: {
+      title: "Settings",
+      subtitle: "Manage your preferences",
+      showChevron: true
+    }
   },
   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()
+      animationType: import_zod.z.enum(["slide", "fade", "none"]).nullable()
     }),
     slots: ["default"],
-    description: "Modal overlay dialog. Use statePath to bind visibility to the state model."
+    description: "Modal overlay dialog. Use $bindState on visible to bind visibility to the state model."
   }
 };
 var standardActionDefinitions = {
@@ -2641,22 +2632,22 @@ var standardActionDefinitions = {
   },
   setState: {
     params: import_zod.z.object({
-      path: import_zod.z.string(),
+      statePath: import_zod.z.string(),
       value: import_zod.z.unknown()
     }),
-    description: "Update a value in the state model at the given path."
+    description: "Update a value in the state model at the given statePath."
   },
   pushState: {
     params: import_zod.z.object({
-      path: import_zod.z.string(),
+      statePath: import_zod.z.string(),
       value: import_zod.z.unknown(),
-      clearPath: import_zod.z.string().optional()
+      clearStatePath: 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" }.'
+    description: 'Append an item to an array in the state model. The value can contain { $state: "/statePath" } references to read from current state, and "$id" to auto-generate a unique ID. Use clearStatePath to reset another path after pushing (e.g. clear an input field). Example: { statePath: "/todos", value: { id: "$id", title: { $state: "/newTodoText" }, completed: false }, clearStatePath: "/newTodoText" }.'
   },
   removeState: {
     params: import_zod.z.object({
-      path: import_zod.z.string(),
+      statePath: import_zod.z.string(),
       index: import_zod.z.number()
     }),
     description: "Remove an item from an array in the state model at the given index."
@@ -2679,18 +2670,17 @@ var standardActionDefinitions = {
   ValidationProvider,
   VisibilityProvider,
   createRenderer,
-  createRendererFromCatalog,
   createStandardActionHandlers,
   defineRegistry,
   elementTreeSchema,
   flatToTree,
-  rewriteRepeatTokens,
   schema,
   standardActionDefinitions,
   standardComponentDefinitions,
   standardComponents,
   useAction,
   useActions,
+  useBoundProp,
   useFieldValidation,
   useIsVisible,
   useRepeatScope,