@json-render/react-native 0.5.1 → 0.6.0

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import {
   standardActionDefinitions,
   standardComponentDefinitions
-} from "./chunk-MP3Y6GEF.mjs";
+} from "./chunk-QYY3Q42V.mjs";
 import {
   elementTreeSchema,
   schema
-} from "./chunk-VBNJFRLI.mjs";
+} from "./chunk-T27PQA6P.mjs";
 
 // src/contexts/state.tsx
 import {
@@ -17,19 +17,17 @@ import {
   useEffect,
   useRef
 } from "react";
-import {
-  getByPath,
-  setByPath
-} from "@json-render/core";
+import { getByPath, setByPath } from "@json-render/core";
 import { jsx } from "react/jsx-runtime";
 var StateContext = createContext(null);
 function StateProvider({
   initialState = {},
-  authState,
   onStateChange,
   children
 }) {
   const [state, setStateInternal] = useState(initialState);
+  const stateRef = useRef(state);
+  stateRef.current = state;
   const initialStateJsonRef = useRef(JSON.stringify(initialState));
   useEffect(() => {
     const newJson = JSON.stringify(initialState);
@@ -40,7 +38,10 @@ function StateProvider({
       }
     }
   }, [initialState]);
-  const get = useCallback((path) => getByPath(state, path), [state]);
+  const get = useCallback(
+    (path) => getByPath(stateRef.current, path),
+    []
+  );
   const set = useCallback(
     (path, value2) => {
       setStateInternal((prev) => {
@@ -54,26 +55,28 @@ function StateProvider({
   );
   const update = 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) {
           setByPath(next, path, value2);
-          onStateChange?.(path, value2);
         }
         return next;
       });
+      for (const [path, value2] of entries) {
+        onStateChange?.(path, value2);
+      }
     },
     [onStateChange]
   );
   const value = useMemo(
     () => ({
       state,
-      authState,
       get,
       set,
       update
     }),
-    [state, authState, get, set, update]
+    [state, get, set, update]
   );
   return /* @__PURE__ */ jsx(StateContext.Provider, { value, children });
 }
@@ -110,13 +113,12 @@ import {
 import { jsx as jsx2 } from "react/jsx-runtime";
 var VisibilityContext = createContext2(null);
 function VisibilityProvider({ children }) {
-  const { state, authState } = useStateStore();
+  const { state } = useStateStore();
   const ctx = useMemo2(
     () => ({
-      stateModel: state,
-      authState
+      stateModel: state
     }),
-    [state, authState]
+    [state]
   );
   const isVisible = useMemo2(
     () => (condition) => evaluateVisibility(condition, ctx),
@@ -167,8 +169,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();
@@ -206,34 +208,34 @@ function ActionProvider({
     async (binding) => {
       const resolved = 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)
           );
         }
@@ -470,27 +472,75 @@ import {
 } from "@json-render/core";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var ValidationContext = createContext4(null);
+function dynamicArgsEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  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] = useState3({});
   const [fieldConfigs, setFieldConfigs] = useState3({});
   const registerField = useCallback3(
     (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 = useCallback3(
     (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 = runValidation(config, {
         value: value2,
         stateModel: state,
-        customFunctions,
-        authState
+        customFunctions
       });
       setFieldStates((prev) => ({
         ...prev,
@@ -502,7 +552,7 @@ function ValidationProvider({
       }));
       return result;
     },
-    [state, customFunctions, authState]
+    [state, customFunctions]
   );
   const touch = useCallback3((path) => {
     setFieldStates((prev) => ({
@@ -599,51 +649,29 @@ import { createContext as createContext5, useContext as useContext5 } from "reac
 import { jsx as jsx5 } from "react/jsx-runtime";
 var RepeatScopeContext = createContext5(null);
 function RepeatScopeProvider({
-  basePath,
+  item,
   index,
+  basePath,
   children
 }) {
-  return /* @__PURE__ */ jsx5(RepeatScopeContext.Provider, { value: { basePath, index }, children });
+  return /* @__PURE__ */ jsx5(RepeatScopeContext.Provider, { value: { item, index, basePath }, children });
 }
 function useRepeatScope() {
   return useContext5(RepeatScopeContext);
 }
-function rewriteRepeatTokens(value, basePath, index) {
-  if (typeof value === "string") {
-    if (value === "$index") return index;
-    if (value === "$item") return basePath;
-    if (value.startsWith("$item/"))
-      return basePath + value.slice("$item".length);
-    return value;
-  }
-  if (Array.isArray(value)) {
-    let changed = false;
-    const result = value.map((item) => {
-      const rewritten = rewriteRepeatTokens(item, basePath, index);
-      if (rewritten !== item) changed = true;
-      return rewritten;
-    });
-    return changed ? result : value;
-  }
-  if (typeof value === "object" && value !== null) {
-    let changed = false;
-    const result = {};
-    for (const [key, val] of Object.entries(value)) {
-      const rewritten = rewriteRepeatTokens(val, basePath, index);
-      if (rewritten !== val) changed = true;
-      result[key] = rewritten;
-    }
-    return changed ? result : value;
-  }
-  return value;
-}
 
 // src/renderer.tsx
 import React6, {
-  useCallback as useCallback4,
+  useCallback as useCallback5,
   useMemo as useMemo5
 } from "react";
-import { resolveElementProps, getByPath as getByPath2 } from "@json-render/core";
+import {
+  resolveElementProps,
+  resolveBindings,
+  resolveActionParam,
+  evaluateVisibility as evaluateVisibility2,
+  getByPath as getByPath3
+} from "@json-render/core";
 
 // src/components/standard.tsx
 import {
@@ -662,1562 +690,1508 @@ import {
   Share,
   Linking
 } from "react-native";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
-function ContainerComponent({ element, children }) {
-  const p = element.props;
-  return /* @__PURE__ */ jsx6(
-    View2,
-    {
-      style: {
-        padding: p.padding ?? void 0,
-        paddingHorizontal: p.paddingHorizontal ?? void 0,
-        paddingVertical: p.paddingVertical ?? void 0,
-        margin: p.margin ?? void 0,
-        backgroundColor: p.backgroundColor ?? void 0,
-        borderRadius: p.borderRadius ?? void 0,
-        flex: p.flex ?? void 0
-      },
-      children
-    }
-  );
-}
-function RowComponent({ element, children }) {
-  const p = element.props;
-  return /* @__PURE__ */ jsx6(
-    View2,
-    {
-      style: {
-        flexDirection: "row",
-        gap: p.gap ?? void 0,
-        alignItems: p.alignItems ?? void 0,
-        justifyContent: p.justifyContent ?? void 0,
-        flexWrap: p.flexWrap ?? void 0,
-        padding: p.padding ?? void 0,
-        flex: p.flex ?? void 0
-      },
-      children
-    }
-  );
-}
-function ColumnComponent({ element, children }) {
-  const p = element.props;
-  return /* @__PURE__ */ jsx6(
-    View2,
-    {
-      style: {
-        flexDirection: "column",
-        gap: p.gap ?? void 0,
-        alignItems: p.alignItems ?? void 0,
-        justifyContent: p.justifyContent ?? void 0,
-        padding: p.padding ?? void 0,
-        flex: p.flex ?? void 0
-      },
-      children
-    }
-  );
-}
-function ScrollContainerComponent({ element, children }) {
-  const p = element.props;
-  return /* @__PURE__ */ jsx6(
-    ScrollView,
-    {
-      horizontal: p.horizontal ?? false,
-      showsVerticalScrollIndicator: p.showsScrollIndicator ?? true,
-      showsHorizontalScrollIndicator: p.showsScrollIndicator ?? true,
-      contentContainerStyle: {
-        padding: p.padding ?? void 0
-      },
-      style: {
-        flex: p.flex ?? 1,
-        backgroundColor: p.backgroundColor ?? void 0
-      },
-      children
-    }
+
+// src/hooks.ts
+import { useState as useState4, useCallback as useCallback4, useRef as useRef2, useEffect as useEffect2 } from "react";
+import {
+  setByPath as setByPath2,
+  getByPath as getByPath2,
+  removeByPath,
+  validateSpec,
+  autoFixSpec,
+  formatSpecIssues
+} from "@json-render/core";
+function useBoundProp(propValue, bindingPath) {
+  const { set } = useStateStore();
+  const setValue = useCallback4(
+    (value) => {
+      if (bindingPath) set(bindingPath, value);
+    },
+    [bindingPath, set]
   );
+  return [propValue, setValue];
 }
-function SafeAreaComponent({ element, children }) {
-  const p = element.props;
-  return /* @__PURE__ */ jsx6(
-    SafeAreaView,
-    {
-      style: {
-        flex: 1,
-        backgroundColor: p.backgroundColor ?? void 0
-      },
-      children
-    }
-  );
+function looksLikeJson(line) {
+  return line.startsWith("{") || line.startsWith("[");
 }
-function SpacerComponent({ element }) {
-  const p = element.props;
-  return /* @__PURE__ */ jsx6(
-    View2,
-    {
-      style: {
-        width: p.size ?? void 0,
-        height: p.size ?? void 0,
-        flex: p.flex ?? void 0
+function 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 PressableComponent({ children, emit }) {
-  return /* @__PURE__ */ jsx6(
-    Pressable2,
-    {
-      onPress: () => emit?.("press"),
-      onLongPress: () => emit?.("longPress"),
-      style: ({ pressed }) => ({
-        opacity: pressed ? 0.7 : 1
-      }),
-      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);
+    setByPath2(newSpec.state, statePath, value);
+    return;
+  }
+  if (path.startsWith("/elements/")) {
+    const pathParts = path.slice("/elements/".length).split("/");
+    const elementKey = pathParts[0];
+    if (!elementKey) return;
+    if (pathParts.length === 1) {
+      newSpec.elements[elementKey] = value;
+    } else {
+      const element = newSpec.elements[elementKey];
+      if (element) {
+        const propPath = "/" + pathParts.slice(1).join("/");
+        const newElement = { ...element };
+        setByPath2(
+          newElement,
+          propPath,
+          value
+        );
+        newSpec.elements[elementKey] = newElement;
+      }
     }
-  );
+  }
 }
-function DividerComponent({ element }) {
-  const p = element.props;
-  const isVertical = p.direction === "vertical";
-  const thickness = p.thickness ?? 1;
-  const color = p.color ?? "#e5e7eb";
-  return /* @__PURE__ */ jsx6(
-    View2,
-    {
-      style: {
-        width: isVertical ? thickness : "100%",
-        height: isVertical ? "100%" : thickness,
-        backgroundColor: color,
-        marginVertical: isVertical ? 0 : p.margin ?? 8,
-        marginHorizontal: isVertical ? p.margin ?? 8 : 0
+function removeSpecValue(newSpec, path) {
+  if (path === "/state") {
+    newSpec.state = void 0;
+    return;
+  }
+  if (path.startsWith("/state/") && newSpec.state) {
+    const statePath = path.slice("/state".length);
+    removeByPath(newSpec.state, statePath);
+    return;
+  }
+  if (path.startsWith("/elements/")) {
+    const pathParts = path.slice("/elements/".length).split("/");
+    const elementKey = pathParts[0];
+    if (!elementKey) return;
+    if (pathParts.length === 1) {
+      const { [elementKey]: _, ...rest } = newSpec.elements;
+      newSpec.elements = rest;
+    } else {
+      const element = newSpec.elements[elementKey];
+      if (element) {
+        const propPath = "/" + pathParts.slice(1).join("/");
+        const newElement = { ...element };
+        removeByPath(
+          newElement,
+          propPath
+        );
+        newSpec.elements[elementKey] = newElement;
       }
     }
-  );
+  }
 }
-var headingSizes = {
-  h1: 32,
-  h2: 24,
-  h3: 20,
-  h4: 16
-};
-function HeadingComponent({ element }) {
-  const p = element.props;
-  const level = p.level ?? "h2";
-  return /* @__PURE__ */ jsx6(
-    Text2,
-    {
-      style: {
-        fontSize: headingSizes[level],
-        fontWeight: "700",
-        color: p.color ?? "#111827",
-        textAlign: p.align ?? "left"
-      },
-      children: p.text
-    }
-  );
+function getSpecValue(spec, path) {
+  if (path === "/root") return spec.root;
+  return getByPath2(spec, path);
 }
-function ParagraphComponent({ element }) {
-  const p = element.props;
-  return /* @__PURE__ */ jsx6(
-    Text2,
-    {
-      numberOfLines: p.numberOfLines ?? void 0,
-      style: {
-        fontSize: p.fontSize ?? 16,
-        lineHeight: (p.fontSize ?? 16) * 1.5,
-        color: p.color ?? "#374151",
-        textAlign: p.align ?? "left"
-      },
-      children: p.text
+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 labelSizes = {
-  xs: 10,
-  sm: 12,
-  md: 14
-};
-function LabelComponent({ element }) {
-  const p = element.props;
-  return /* @__PURE__ */ jsx6(
-    Text2,
-    {
-      style: {
-        fontSize: labelSizes[p.size ?? "sm"],
-        fontWeight: p.bold ? "600" : "400",
-        color: p.color ?? "#6b7280"
-      },
-      children: p.text
+    case "remove": {
+      removeSpecValue(newSpec, patch.path);
+      break;
     }
-  );
-}
-function ImageComponent({ element }) {
-  const p = element.props;
-  return /* @__PURE__ */ jsx6(
-    RNImage,
-    {
-      source: { uri: p.src },
-      accessibilityLabel: p.alt ?? void 0,
-      resizeMode: p.resizeMode ?? "cover",
-      style: {
-        width: p.width ?? "100%",
-        height: p.height ?? 200,
-        borderRadius: p.borderRadius ?? 0
-      }
+    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;
 }
-var avatarSizeMap = {
-  sm: 32,
-  md: 48,
-  lg: 64,
-  xl: 96
-};
-function AvatarComponent({ element }) {
-  const p = element.props;
-  const size = avatarSizeMap[p.size ?? "md"];
-  const bgColor = p.backgroundColor ?? "#6366f1";
-  if (p.src) {
-    return /* @__PURE__ */ jsx6(
-      RNImage,
-      {
-        source: { uri: p.src },
-        style: {
-          width: size,
-          height: size,
-          borderRadius: size / 2,
-          backgroundColor: "#e5e7eb"
+function useUIStream({
+  api,
+  onComplete,
+  onError,
+  fetch: fetchFn = globalThis.fetch,
+  validate: enableValidation = false,
+  maxRetries = 5
+}) {
+  const [spec, setSpec] = useState4(null);
+  const [isStreaming, setIsStreaming] = useState4(false);
+  const [error, setError] = useState4(null);
+  const [rawLines, setRawLines] = useState4([]);
+  const abortControllerRef = useRef2(null);
+  const stop = useCallback4(() => {
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = null;
+    setIsStreaming(false);
+  }, []);
+  const clear = useCallback4(() => {
+    setSpec(null);
+    setError(null);
+    setRawLines([]);
+  }, []);
+  const streamRequest = useCallback4(
+    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);
       }
-    );
-  }
-  return /* @__PURE__ */ jsx6(
-    View2,
-    {
-      style: {
-        width: size,
-        height: size,
-        borderRadius: size / 2,
-        backgroundColor: bgColor,
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: /* @__PURE__ */ jsx6(
-        Text2,
-        {
-          style: {
-            color: "#ffffff",
-            fontSize: size * 0.4,
-            fontWeight: "600"
-          },
-          children: p.initials ?? "?"
+      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;
         }
-      )
-    }
-  );
-}
-var badgeVariantColors = {
-  default: { bg: "#e5e7eb", text: "#374151" },
-  info: { bg: "#dbeafe", text: "#1d4ed8" },
-  success: { bg: "#dcfce7", text: "#15803d" },
-  warning: { bg: "#fef3c7", text: "#92400e" },
-  error: { bg: "#fee2e2", text: "#dc2626" }
-};
-function BadgeComponent({ element }) {
-  const p = element.props;
-  const colors = badgeVariantColors[p.variant ?? "default"] ?? {
-    bg: "#e5e7eb",
-    text: "#374151"
-  };
-  return /* @__PURE__ */ jsx6(
-    View2,
-    {
-      style: {
-        backgroundColor: colors.bg,
-        paddingHorizontal: 8,
-        paddingVertical: 2,
-        borderRadius: 9999,
-        alignSelf: "flex-start"
-      },
-      children: /* @__PURE__ */ jsx6(
-        Text2,
-        {
-          style: {
-            fontSize: 12,
-            fontWeight: "600",
-            color: colors.text
-          },
-          children: p.label
+        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;
+            }
+          }
         }
-      )
-    }
-  );
-}
-function ChipComponent({ element, emit }) {
-  const p = element.props;
-  const bgColor = p.selected ? "#6366f1" : p.backgroundColor ?? "#f3f4f6";
-  const textColor = p.selected ? "#ffffff" : "#374151";
-  const hasRemove = !!element.on?.remove;
-  return /* @__PURE__ */ jsxs2(
-    Pressable2,
-    {
-      onPress: () => emit?.("press"),
-      style: {
-        flexDirection: "row",
-        alignItems: "center",
-        backgroundColor: bgColor,
-        paddingHorizontal: 12,
-        paddingVertical: 6,
-        borderRadius: 9999,
-        alignSelf: "flex-start"
-      },
-      children: [
-        /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: textColor }, children: p.label }),
-        hasRemove && /* @__PURE__ */ jsx6(Pressable2, { onPress: () => emit?.("remove"), style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: textColor, fontWeight: "700" }, children: "x" }) })
-      ]
-    }
+        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]
   );
-}
-var buttonVariantStyles = {
-  primary: { bg: "#3b82f6", text: "#ffffff" },
-  secondary: { bg: "#6b7280", text: "#ffffff" },
-  danger: { bg: "#dc2626", text: "#ffffff" },
-  outline: { bg: "transparent", text: "#3b82f6", border: "#3b82f6" },
-  ghost: { bg: "transparent", text: "#374151" }
-};
-var buttonSizeStyles = {
-  sm: { paddingH: 12, paddingV: 6, fontSize: 13 },
-  md: { paddingH: 16, paddingV: 10, fontSize: 15 },
-  lg: { paddingH: 24, paddingV: 14, fontSize: 17 }
-};
-function ButtonComponent({ element, emit }) {
-  const p = element.props;
-  const variant = buttonVariantStyles[p.variant ?? "primary"] ?? {
-    bg: "#3b82f6",
-    text: "#ffffff"
-  };
-  const size = buttonSizeStyles[p.size ?? "md"] ?? {
-    paddingH: 16,
-    paddingV: 10,
-    fontSize: 15
-  };
-  const disabled = p.disabled || p.loading;
-  return /* @__PURE__ */ jsxs2(
-    Pressable2,
-    {
-      disabled,
-      onPress: () => emit?.("press"),
-      style: ({ pressed }) => ({
-        backgroundColor: variant.bg,
-        paddingHorizontal: size.paddingH,
-        paddingVertical: size.paddingV,
-        borderRadius: 8,
-        alignItems: "center",
-        justifyContent: "center",
-        flexDirection: "row",
-        opacity: disabled ? 0.5 : pressed ? 0.8 : 1,
-        borderWidth: variant.border ? 1 : 0,
-        borderColor: variant.border,
-        alignSelf: "flex-start"
-      }),
-      children: [
-        p.loading && /* @__PURE__ */ jsx6(
-          ActivityIndicator,
-          {
-            size: "small",
-            color: variant.text,
-            style: { marginRight: 8 }
+  const send = useCallback4(
+    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;
           }
-        ),
-        /* @__PURE__ */ jsx6(
-          Text2,
-          {
-            style: {
-              color: variant.text,
-              fontSize: size.fontSize,
-              fontWeight: "600"
-            },
-            children: p.label
+          if (!enableValidation || !currentSpec.root) {
+            break;
           }
-        )
-      ]
-    }
+          const { spec: fixedSpec, fixes } = autoFixSpec(currentSpec);
+          if (fixes.length > 0) {
+            currentSpec = fixedSpec;
+            setSpec({ ...currentSpec });
+          }
+          const validation = validateSpec(currentSpec);
+          if (validation.valid) {
+            break;
+          }
+          const errors = validation.issues.filter(
+            (i) => i.severity === "error"
+          );
+          if (retriesUsed >= maxRetries) {
+            break;
+          }
+          retriesUsed++;
+          const issueText = 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
+    ]
   );
+  useEffect2(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+  return {
+    spec,
+    isStreaming,
+    error,
+    rawLines,
+    send,
+    stop,
+    clear
+  };
 }
-function TextInputComponent({ element }) {
-  const p = element.props;
-  const [boundValue, setBoundValue] = useStateBinding(
-    p.statePath ?? ""
-  );
-  const displayValue = p.statePath ? boundValue ?? "" : p.value ?? "";
-  return /* @__PURE__ */ jsxs2(View2, { style: p.flex != null ? { flex: p.flex } : void 0, children: [
-    p.label && /* @__PURE__ */ jsx6(Text2, { style: inputStyles.label, children: p.label }),
-    /* @__PURE__ */ jsx6(
-      RNTextInput,
-      {
-        placeholder: p.placeholder ?? void 0,
-        value: displayValue,
-        onChangeText: p.statePath ? setBoundValue : void 0,
-        secureTextEntry: p.secureTextEntry ?? false,
-        keyboardType: p.keyboardType ?? "default",
-        multiline: p.multiline ?? false,
-        numberOfLines: p.numberOfLines ?? void 0,
-        style: [
-          inputStyles.input,
-          p.multiline && {
-            minHeight: (p.numberOfLines ?? 3) * 20,
-            textAlignVertical: "top"
-          }
-        ]
+function 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 };
 }
-function SwitchComponent({ element }) {
+
+// src/components/standard.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function ContainerComponent({ element, children }) {
   const p = element.props;
-  const [boundValue, setBoundValue] = useStateBinding(
-    p.statePath ?? ""
-  );
-  const displayValue = p.statePath ? boundValue ?? false : p.value ?? false;
-  return /* @__PURE__ */ jsxs2(View2, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
-    /* @__PURE__ */ jsx6(
-      RNSwitch,
-      {
-        value: displayValue,
-        onValueChange: p.statePath ? setBoundValue : void 0,
-        disabled: p.disabled ?? false
-      }
-    ),
-    p.label && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
-  ] });
+  return /* @__PURE__ */ jsx6(
+    View2,
+    {
+      style: {
+        padding: p.padding ?? void 0,
+        paddingHorizontal: p.paddingHorizontal ?? void 0,
+        paddingVertical: p.paddingVertical ?? void 0,
+        margin: p.margin ?? void 0,
+        backgroundColor: p.backgroundColor ?? void 0,
+        borderRadius: p.borderRadius ?? void 0,
+        flex: p.flex ?? void 0
+      },
+      children
+    }
+  );
 }
-function CheckboxComponent({ element }) {
+function RowComponent({ element, children }) {
   const p = element.props;
-  const [boundValue, setBoundValue] = useStateBinding(
-    p.statePath ?? ""
-  );
-  const checked = p.statePath ? boundValue ?? false : p.checked ?? false;
-  return /* @__PURE__ */ jsxs2(
-    Pressable2,
+  return /* @__PURE__ */ jsx6(
+    View2,
     {
-      disabled: p.disabled ?? false,
-      onPress: () => {
-        if (p.statePath) {
-          setBoundValue(!checked);
-        }
-      },
       style: {
         flexDirection: "row",
-        alignItems: "center",
-        gap: 8,
-        opacity: p.disabled ? 0.5 : 1
+        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: [
-        /* @__PURE__ */ jsx6(
-          View2,
-          {
-            style: {
-              width: 20,
-              height: 20,
-              borderRadius: 4,
-              borderWidth: 2,
-              borderColor: checked ? "#3b82f6" : "#d1d5db",
-              backgroundColor: checked ? "#3b82f6" : "transparent",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children: checked && /* @__PURE__ */ jsx6(Text2, { style: { color: "#ffffff", fontSize: 12, fontWeight: "700" }, children: "\u2713" })
-          }
-        ),
-        p.label && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
-      ]
+      children
     }
   );
 }
-function SliderComponent({ element }) {
+function ColumnComponent({ element, children }) {
   const p = element.props;
-  const min = p.min ?? 0;
-  const max = p.max ?? 100;
-  const value = p.value ?? min;
-  const progress = max > min ? (value - min) / (max - min) : 0;
-  const trackColor = p.color ?? "#3b82f6";
-  return /* @__PURE__ */ jsxs2(View2, { children: [
-    p.label && /* @__PURE__ */ jsxs2(
-      View2,
-      {
-        style: {
-          flexDirection: "row",
-          justifyContent: "space-between",
-          marginBottom: 4
-        },
-        children: [
-          /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#374151" }, children: p.label }),
-          /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#6b7280" }, children: value })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx6(
-      View2,
-      {
-        style: {
-          height: 6,
-          backgroundColor: "#e5e7eb",
-          borderRadius: 3,
-          overflow: "hidden"
-        },
-        children: /* @__PURE__ */ jsx6(
-          View2,
-          {
-            style: {
-              width: `${Math.min(Math.max(progress * 100, 0), 100)}%`,
-              height: "100%",
-              backgroundColor: trackColor,
-              borderRadius: 3
-            }
-          }
-        )
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx6(
+    View2,
+    {
+      style: {
+        flexDirection: "column",
+        gap: p.gap ?? void 0,
+        alignItems: p.alignItems ?? void 0,
+        justifyContent: p.justifyContent ?? void 0,
+        padding: p.padding ?? void 0,
+        flex: p.flex ?? void 0
+      },
+      children
+    }
+  );
 }
-function SearchBarComponent({ element, emit }) {
+function ScrollContainerComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsxs2(
-    View2,
+  return /* @__PURE__ */ jsx6(
+    ScrollView,
     {
+      horizontal: p.horizontal ?? false,
+      showsVerticalScrollIndicator: p.showsScrollIndicator ?? true,
+      showsHorizontalScrollIndicator: p.showsScrollIndicator ?? true,
+      contentContainerStyle: {
+        padding: p.padding ?? void 0
+      },
       style: {
-        flexDirection: "row",
-        alignItems: "center",
-        backgroundColor: "#f3f4f6",
-        borderRadius: 8,
-        paddingHorizontal: 12
+        flex: p.flex ?? 1,
+        backgroundColor: p.backgroundColor ?? void 0
       },
-      children: [
-        /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#9ca3af", marginRight: 8 }, children: "Search" }),
-        /* @__PURE__ */ jsx6(
-          RNTextInput,
-          {
-            placeholder: p.placeholder ?? "Search...",
-            value: p.value ?? void 0,
-            returnKeyType: "search",
-            onSubmitEditing: () => emit?.("submit"),
-            style: {
-              flex: 1,
-              paddingVertical: 10,
-              fontSize: 16,
-              color: "#111827"
-            }
-          }
-        )
-      ]
+      children
     }
   );
 }
-function SpinnerComponent({ element }) {
+function SafeAreaComponent({ element, children }) {
   const p = element.props;
-  return /* @__PURE__ */ jsx6(ActivityIndicator, { size: p.size ?? "small", color: p.color ?? "#3b82f6" });
+  return /* @__PURE__ */ jsx6(
+    SafeAreaView,
+    {
+      style: {
+        flex: 1,
+        backgroundColor: p.backgroundColor ?? void 0
+      },
+      children
+    }
+  );
 }
-function ProgressBarComponent({ element }) {
+function SpacerComponent({ element }) {
   const p = element.props;
-  const height = p.height ?? 6;
-  const progress = Math.min(Math.max(p.progress, 0), 1);
   return /* @__PURE__ */ jsx6(
     View2,
     {
       style: {
-        height,
-        backgroundColor: p.trackColor ?? "#e5e7eb",
-        borderRadius: height / 2,
-        overflow: "hidden"
-      },
-      children: /* @__PURE__ */ jsx6(
-        View2,
-        {
-          style: {
-            width: `${progress * 100}%`,
-            height: "100%",
-            backgroundColor: p.color ?? "#3b82f6",
-            borderRadius: height / 2
-          }
-        }
-      )
+        width: p.size ?? void 0,
+        height: p.size ?? void 0,
+        flex: p.flex ?? void 0
+      }
     }
   );
 }
-function CardComponent({ element, children }) {
+function PressableComponent({ children, emit }) {
+  return /* @__PURE__ */ jsx6(
+    Pressable2,
+    {
+      onPress: () => emit("press"),
+      onLongPress: () => emit("longPress"),
+      style: ({ pressed }) => ({
+        opacity: pressed ? 0.7 : 1
+      }),
+      children
+    }
+  );
+}
+function DividerComponent({ element }) {
   const p = element.props;
-  const elevated = p.elevated !== false;
-  const padding = p.padding ?? 16;
-  return /* @__PURE__ */ jsxs2(
+  const isVertical = p.direction === "vertical";
+  const thickness = p.thickness ?? 1;
+  const color = p.color ?? "#e5e7eb";
+  return /* @__PURE__ */ jsx6(
     View2,
     {
-      style: [
-        {
-          backgroundColor: p.backgroundColor ?? "#ffffff",
-          borderRadius: p.borderRadius ?? 12,
-          padding
-        },
-        elevated && {
-          shadowColor: "#000",
-          shadowOffset: { width: 0, height: 2 },
-          shadowOpacity: 0.1,
-          shadowRadius: 8,
-          elevation: 3
-        }
-      ],
-      children: [
-        p.title && /* @__PURE__ */ jsx6(
-          Text2,
-          {
-            style: {
-              fontSize: 18,
-              fontWeight: "600",
-              color: "#111827",
-              marginBottom: p.subtitle ? 2 : 12
-            },
-            children: p.title
-          }
-        ),
-        p.subtitle && /* @__PURE__ */ jsx6(
-          Text2,
-          {
-            style: {
-              fontSize: 14,
-              color: "#6b7280",
-              marginBottom: 12
-            },
-            children: p.subtitle
-          }
-        ),
-        children
-      ]
+      style: {
+        width: isVertical ? thickness : "100%",
+        height: isVertical ? "100%" : thickness,
+        backgroundColor: color,
+        marginVertical: isVertical ? 0 : p.margin ?? 8,
+        marginHorizontal: isVertical ? p.margin ?? 8 : 0
+      }
+    }
+  );
+}
+var headingSizes = {
+  h1: 32,
+  h2: 24,
+  h3: 20,
+  h4: 16
+};
+function HeadingComponent({ element }) {
+  const p = element.props;
+  const level = p.level ?? "h2";
+  return /* @__PURE__ */ jsx6(
+    Text2,
+    {
+      style: {
+        fontSize: headingSizes[level],
+        fontWeight: "700",
+        color: p.color ?? "#111827",
+        textAlign: p.align ?? "left"
+      },
+      children: p.text
     }
   );
 }
-function ListItemComponent({ element, emit }) {
+function ParagraphComponent({ element }) {
   const p = element.props;
-  const hasPress = !!element.on?.press;
-  const content = /* @__PURE__ */ jsxs2(
-    View2,
+  return /* @__PURE__ */ jsx6(
+    Text2,
     {
+      numberOfLines: p.numberOfLines ?? void 0,
       style: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingVertical: 12,
-        paddingHorizontal: 16
+        fontSize: p.fontSize ?? 16,
+        lineHeight: (p.fontSize ?? 16) * 1.5,
+        color: p.color ?? "#374151",
+        textAlign: p.align ?? "left"
       },
-      children: [
-        p.leading && /* @__PURE__ */ jsx6(
-          Text2,
-          {
-            style: {
-              fontSize: 16,
-              color: "#6b7280",
-              marginRight: 12,
-              width: 24,
-              textAlign: "center"
-            },
-            children: p.leading
-          }
-        ),
-        /* @__PURE__ */ jsxs2(View2, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#111827" }, children: p.title }),
-          p.subtitle && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#6b7280", marginTop: 2 }, children: p.subtitle })
-        ] }),
-        p.trailing && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#6b7280", marginLeft: 8 }, children: p.trailing }),
-        p.showChevron && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#9ca3af", marginLeft: 8 }, children: ">" })
-      ]
+      children: p.text
     }
   );
-  if (hasPress) {
-    return /* @__PURE__ */ jsx6(
-      Pressable2,
-      {
-        onPress: () => emit?.("press"),
-        style: ({ pressed }) => ({
-          opacity: pressed ? 0.7 : 1,
-          backgroundColor: pressed ? "#f9fafb" : "transparent"
-        }),
-        children: content
-      }
-    );
-  }
-  return content;
 }
-function ModalComponent({ element, children }) {
+var labelSizes = {
+  xs: 10,
+  sm: 12,
+  md: 14
+};
+function LabelComponent({ element }) {
   const p = element.props;
   return /* @__PURE__ */ jsx6(
-    RNModal,
+    Text2,
     {
-      visible: p.visible,
-      animationType: p.animationType ?? "slide",
-      transparent: true,
-      children: /* @__PURE__ */ jsx6(View2, { style: modalStyles.overlay, children: /* @__PURE__ */ jsxs2(View2, { style: modalStyles.content, children: [
-        p.title && /* @__PURE__ */ jsx6(Text2, { style: modalStyles.title, children: p.title }),
-        children
-      ] }) })
+      style: {
+        fontSize: labelSizes[p.size ?? "sm"],
+        fontWeight: p.bold ? "600" : "400",
+        color: p.color ?? "#6b7280"
+      },
+      children: p.text
     }
   );
 }
-function createStandardActionHandlers(options) {
-  return {
-    navigate: async (params) => {
-      const screen = params.screen;
-      const navParams = params.params;
-      options?.navigate?.(screen, navParams ?? void 0);
-    },
-    goBack: async () => {
-      options?.goBack?.();
-    },
-    showAlert: async (params) => {
-      const title = params.title;
-      const message = params.message ?? void 0;
-      const buttons = params.buttons;
-      const alertButtons = buttons?.map((btn) => ({
-        text: btn.text,
-        style: btn.style
-      }));
-      Alert.alert(title, message, alertButtons);
-    },
-    share: async (params) => {
-      const message = params.message;
-      const url = params.url ?? void 0;
-      const title = params.title ?? void 0;
-      await Share.share({ message, url, title });
-    },
-    openURL: async (params) => {
-      const url = params.url;
-      const canOpen = await Linking.canOpenURL(url);
-      if (canOpen) {
-        await Linking.openURL(url);
+function ImageComponent({ element }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx6(
+    RNImage,
+    {
+      source: { uri: p.src },
+      accessibilityLabel: p.alt ?? void 0,
+      resizeMode: p.resizeMode ?? "cover",
+      style: {
+        width: p.width ?? "100%",
+        height: p.height ?? 200,
+        borderRadius: p.borderRadius ?? 0
       }
-    },
-    setData: async (params) => {
-      const path = params.path;
-      const value = params.value;
-      options?.onSetData?.(path, value);
-    },
-    refresh: async (params) => {
-      const target = params.target ?? void 0;
-      options?.onRefresh?.(target);
     }
-  };
+  );
 }
-var standardComponents = {
-  // Layout
-  Container: ContainerComponent,
-  Row: RowComponent,
-  Column: ColumnComponent,
-  ScrollContainer: ScrollContainerComponent,
-  SafeArea: SafeAreaComponent,
-  Pressable: PressableComponent,
-  Spacer: SpacerComponent,
-  Divider: DividerComponent,
-  // Content
-  Heading: HeadingComponent,
-  Paragraph: ParagraphComponent,
-  Label: LabelComponent,
-  Image: ImageComponent,
-  Avatar: AvatarComponent,
-  Badge: BadgeComponent,
-  Chip: ChipComponent,
-  // Input
-  Button: ButtonComponent,
-  TextInput: TextInputComponent,
-  Switch: SwitchComponent,
-  Checkbox: CheckboxComponent,
-  Slider: SliderComponent,
-  SearchBar: SearchBarComponent,
-  // Feedback
-  Spinner: SpinnerComponent,
-  ProgressBar: ProgressBarComponent,
-  // Composite
-  Card: CardComponent,
-  ListItem: ListItemComponent,
-  Modal: ModalComponent
-};
-var inputStyles = StyleSheet2.create({
-  label: {
-    fontSize: 14,
-    fontWeight: "500",
-    color: "#374151",
-    marginBottom: 4
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: "#d1d5db",
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    fontSize: 16,
-    color: "#111827",
-    backgroundColor: "#ffffff"
-  }
-});
-var modalStyles = StyleSheet2.create({
-  overlay: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    justifyContent: "flex-end"
-  },
-  content: {
-    backgroundColor: "#ffffff",
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    padding: 24,
-    maxHeight: "80%"
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: "600",
-    color: "#111827",
-    marginBottom: 16
-  }
-});
-
-// src/renderer.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var ElementErrorBoundary = class extends React6.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;
-  }
+var avatarSizeMap = {
+  sm: 32,
+  md: 48,
+  lg: 64,
+  xl: 96
 };
-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
+function AvatarComponent({ element }) {
+  const p = element.props;
+  const size = avatarSizeMap[p.size ?? "md"];
+  const bgColor = p.backgroundColor ?? "#6366f1";
+  if (p.src) {
+    return /* @__PURE__ */ jsx6(
+      RNImage,
+      {
+        source: { uri: p.src },
+        style: {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: "#e5e7eb"
+        }
+      }
     );
-    const rewrittenVisible = element.visible !== void 0 ? rewriteRepeatTokens(
-      element.visible,
-      repeatScope.basePath,
-      repeatScope.index
-    ) : element.visible;
-    const rewrittenOn = element.on !== void 0 ? rewriteRepeatTokens(
-      element.on,
-      repeatScope.basePath,
-      repeatScope.index
-    ) : element.on;
-    if (rewrittenProps !== element.props || rewrittenVisible !== element.visible || rewrittenOn !== element.on) {
-      effectiveElement = {
-        ...element,
-        props: rewrittenProps,
-        visible: rewrittenVisible,
-        on: rewrittenOn
-      };
-    }
   }
-  const isVisible = useIsVisible(effectiveElement.visible);
-  const onBindings = effectiveElement.on;
-  const emit = useCallback4(
-    (eventName) => {
-      const binding = onBindings?.[eventName];
-      if (!binding) return;
-      const bindings = Array.isArray(binding) ? binding : [binding];
-      for (const b of bindings) {
-        execute(b);
-      }
-    },
-    [onBindings, execute]
+  return /* @__PURE__ */ jsx6(
+    View2,
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: bgColor,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsx6(
+        Text2,
+        {
+          style: {
+            color: "#ffffff",
+            fontSize: size * 0.4,
+            fontWeight: "600"
+          },
+          children: p.initials ?? "?"
+        }
+      )
+    }
   );
-  if (!isVisible) {
-    return null;
-  }
-  const resolvedProps = resolveElementProps(
-    effectiveElement.props,
-    ctx
+}
+var badgeVariantColors = {
+  default: { bg: "#e5e7eb", text: "#374151" },
+  info: { bg: "#dbeafe", text: "#1d4ed8" },
+  success: { bg: "#dcfce7", text: "#15803d" },
+  warning: { bg: "#fef3c7", text: "#92400e" },
+  error: { bg: "#fee2e2", text: "#dc2626" }
+};
+function BadgeComponent({ element }) {
+  const p = element.props;
+  const colors = badgeVariantColors[p.variant ?? "default"] ?? {
+    bg: "#e5e7eb",
+    text: "#374151"
+  };
+  return /* @__PURE__ */ jsx6(
+    View2,
+    {
+      style: {
+        backgroundColor: colors.bg,
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+        borderRadius: 9999,
+        alignSelf: "flex-start"
+      },
+      children: /* @__PURE__ */ jsx6(
+        Text2,
+        {
+          style: {
+            fontSize: 12,
+            fontWeight: "600",
+            color: colors.text
+          },
+          children: p.label
+        }
+      )
+    }
   );
-  const resolvedElement = resolvedProps !== effectiveElement.props ? { ...effectiveElement, props: resolvedProps } : effectiveElement;
-  const Component = registry[resolvedElement.type] ?? fallback;
-  if (!Component) {
-    console.warn(`No renderer for component type: ${resolvedElement.type}`);
-    return null;
-  }
-  const children = resolvedElement.repeat ? /* @__PURE__ */ jsx7(
-    RepeatChildren,
+}
+function ChipComponent({ element, emit }) {
+  const p = element.props;
+  const bgColor = p.selected ? "#6366f1" : p.backgroundColor ?? "#f3f4f6";
+  const textColor = p.selected ? "#ffffff" : "#374151";
+  const hasRemove = !!element.on?.remove;
+  return /* @__PURE__ */ jsxs2(
+    Pressable2,
     {
-      element: resolvedElement,
-      spec,
-      registry,
-      loading,
-      fallback
+      onPress: () => emit("press"),
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: bgColor,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 9999,
+        alignSelf: "flex-start"
+      },
+      children: [
+        /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: textColor }, children: p.label }),
+        hasRemove && /* @__PURE__ */ jsx6(Pressable2, { onPress: () => emit("remove"), style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: textColor, fontWeight: "700" }, children: "x" }) })
+      ]
     }
-  ) : 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;
+  );
+}
+var buttonVariantStyles = {
+  primary: { bg: "#3b82f6", text: "#ffffff" },
+  secondary: { bg: "#6b7280", text: "#ffffff" },
+  danger: { bg: "#dc2626", text: "#ffffff" },
+  outline: { bg: "transparent", text: "#3b82f6", border: "#3b82f6" },
+  ghost: { bg: "transparent", text: "#374151" }
+};
+var buttonSizeStyles = {
+  sm: { paddingH: 12, paddingV: 6, fontSize: 13 },
+  md: { paddingH: 16, paddingV: 10, fontSize: 15 },
+  lg: { paddingH: 24, paddingV: 14, fontSize: 17 }
+};
+function ButtonComponent({ element, emit }) {
+  const p = element.props;
+  const variant = buttonVariantStyles[p.variant ?? "primary"] ?? {
+    bg: "#3b82f6",
+    text: "#ffffff"
+  };
+  const size = buttonSizeStyles[p.size ?? "md"] ?? {
+    paddingH: 16,
+    paddingV: 10,
+    fontSize: 15
+  };
+  const disabled = p.disabled || p.loading;
+  return /* @__PURE__ */ jsxs2(
+    Pressable2,
+    {
+      disabled,
+      onPress: () => emit("press"),
+      style: ({ pressed }) => ({
+        backgroundColor: variant.bg,
+        paddingHorizontal: size.paddingH,
+        paddingVertical: size.paddingV,
+        borderRadius: 8,
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "row",
+        opacity: disabled ? 0.5 : pressed ? 0.8 : 1,
+        borderWidth: variant.border ? 1 : 0,
+        borderColor: variant.border,
+        alignSelf: "flex-start"
+      }),
+      children: [
+        p.loading && /* @__PURE__ */ jsx6(
+          ActivityIndicator,
+          {
+            size: "small",
+            color: variant.text,
+            style: { marginRight: 8 }
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          Text2,
+          {
+            style: {
+              color: variant.text,
+              fontSize: size.fontSize,
+              fontWeight: "600"
+            },
+            children: p.label
+          }
+        )
+      ]
     }
-    return /* @__PURE__ */ jsx7(
-      ElementRenderer,
-      {
-        element: childElement,
-        spec,
-        registry,
-        loading,
-        fallback
-      },
-      childKey
-    );
-  });
-  return /* @__PURE__ */ jsx7(ElementErrorBoundary, { elementType: resolvedElement.type, children: /* @__PURE__ */ jsx7(Component, { element: resolvedElement, emit, loading, children }) });
+  );
 }
-function RepeatChildren({
-  element,
-  spec,
-  registry,
-  loading,
-  fallback
-}) {
-  const { state } = useStateStore();
-  const repeat = element.repeat;
-  const statePath = repeat.path;
-  const items = getByPath2(state, statePath) ?? [];
-  return /* @__PURE__ */ jsx7(Fragment, { children: items.map((item, index) => {
-    const key = repeat.key && typeof item === "object" && item !== null ? String(item[repeat.key] ?? index) : String(index);
-    return /* @__PURE__ */ jsx7(
-      RepeatScopeProvider,
+function TextInputComponent({ element, bindings }) {
+  const p = element.props;
+  const [boundValue, setBoundValue] = useBoundProp(
+    p.value,
+    bindings?.value
+  );
+  const displayValue = boundValue ?? "";
+  return /* @__PURE__ */ jsxs2(View2, { style: p.flex != null ? { flex: p.flex } : void 0, children: [
+    p.label && /* @__PURE__ */ jsx6(Text2, { style: inputStyles.label, children: p.label }),
+    /* @__PURE__ */ jsx6(
+      RNTextInput,
       {
-        basePath: `${statePath}/${index}`,
-        index,
-        children: element.children?.map((childKey) => {
-          const childElement = spec.elements[childKey];
-          if (!childElement) {
-            if (!loading) {
-              console.warn(
-                `[json-render] Missing element "${childKey}" referenced as child of "${element.type}" (repeat). This element will not render.`
-              );
-            }
-            return null;
+        placeholder: p.placeholder ?? void 0,
+        value: displayValue,
+        onChangeText: bindings?.value ? setBoundValue : void 0,
+        secureTextEntry: p.secureTextEntry ?? false,
+        keyboardType: p.keyboardType ?? "default",
+        multiline: p.multiline ?? false,
+        numberOfLines: p.numberOfLines ?? void 0,
+        style: [
+          inputStyles.input,
+          p.multiline && {
+            minHeight: (p.numberOfLines ?? 3) * 20,
+            textAlignVertical: "top"
           }
-          return /* @__PURE__ */ jsx7(
-            ElementRenderer,
-            {
-              element: childElement,
-              spec,
-              registry,
-              loading,
-              fallback
-            },
-            childKey
-          );
-        })
-      },
-      key
-    );
-  }) });
+        ]
+      }
+    )
+  ] });
+}
+function SwitchComponent({ element, bindings }) {
+  const p = element.props;
+  const [checked, setChecked] = useBoundProp(
+    p.checked,
+    bindings?.checked
+  );
+  const displayValue = checked ?? false;
+  return /* @__PURE__ */ jsxs2(View2, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ jsx6(
+      RNSwitch,
+      {
+        value: displayValue,
+        onValueChange: bindings?.checked ? setChecked : void 0,
+        disabled: p.disabled ?? false
+      }
+    ),
+    p.label && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
+  ] });
 }
-function Renderer({
-  spec,
-  registry: customRegistry,
-  includeStandard = true,
-  loading,
-  fallback
-}) {
-  const registry = useMemo5(
-    () => ({
-      ...includeStandard ? standardComponents : {},
-      ...customRegistry
-    }),
-    [customRegistry, includeStandard]
+function CheckboxComponent({ element, bindings }) {
+  const p = element.props;
+  const [checked, setChecked] = useBoundProp(
+    p.checked,
+    bindings?.checked
   );
-  if (!spec || !spec.root) {
-    return null;
-  }
-  const rootElement = spec.elements[spec.root];
-  if (!rootElement) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx7(
-    ElementRenderer,
+  const isChecked = checked ?? false;
+  return /* @__PURE__ */ jsxs2(
+    Pressable2,
     {
-      element: rootElement,
-      spec,
-      registry,
-      loading,
-      fallback
+      disabled: p.disabled ?? false,
+      onPress: () => {
+        if (bindings?.checked) {
+          setChecked(!isChecked);
+        }
+      },
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        opacity: p.disabled ? 0.5 : 1
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
+          View2,
+          {
+            style: {
+              width: 20,
+              height: 20,
+              borderRadius: 4,
+              borderWidth: 2,
+              borderColor: isChecked ? "#3b82f6" : "#d1d5db",
+              backgroundColor: isChecked ? "#3b82f6" : "transparent",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: isChecked && /* @__PURE__ */ jsx6(Text2, { style: { color: "#ffffff", fontSize: 12, fontWeight: "700" }, children: "\u2713" })
+          }
+        ),
+        p.label && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#374151" }, children: p.label })
+      ]
     }
   );
 }
-function JSONUIProvider({
-  registry,
-  initialState,
-  authState,
-  actionHandlers,
-  navigate,
-  validationFunctions,
-  onStateChange,
-  children
-}) {
-  return /* @__PURE__ */ jsx7(
-    StateProvider,
+function SliderComponent({ element }) {
+  const p = element.props;
+  const min = p.min ?? 0;
+  const max = p.max ?? 100;
+  const value = p.value ?? min;
+  const progress = max > min ? (value - min) / (max - min) : 0;
+  const trackColor = p.color ?? "#3b82f6";
+  return /* @__PURE__ */ jsxs2(View2, { children: [
+    p.label && /* @__PURE__ */ jsxs2(
+      View2,
+      {
+        style: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          marginBottom: 4
+        },
+        children: [
+          /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#374151" }, children: p.label }),
+          /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#6b7280" }, children: value })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      View2,
+      {
+        style: {
+          height: 6,
+          backgroundColor: "#e5e7eb",
+          borderRadius: 3,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx6(
+          View2,
+          {
+            style: {
+              width: `${Math.min(Math.max(progress * 100, 0), 100)}%`,
+              height: "100%",
+              backgroundColor: trackColor,
+              borderRadius: 3
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function SearchBarComponent({ element, emit }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsxs2(
+    View2,
     {
-      initialState,
-      authState,
-      onStateChange,
-      children: /* @__PURE__ */ jsx7(VisibilityProvider, { children: /* @__PURE__ */ jsx7(ActionProvider, { handlers: actionHandlers, navigate, children: /* @__PURE__ */ jsxs3(ValidationProvider, { customFunctions: validationFunctions, children: [
-        children,
-        /* @__PURE__ */ jsx7(ConfirmationDialogManager, {})
-      ] }) }) })
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: "#f3f4f6",
+        borderRadius: 8,
+        paddingHorizontal: 12
+      },
+      children: [
+        /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#9ca3af", marginRight: 8 }, children: "Search" }),
+        /* @__PURE__ */ jsx6(
+          RNTextInput,
+          {
+            placeholder: p.placeholder ?? "Search...",
+            value: p.value ?? void 0,
+            returnKeyType: "search",
+            onSubmitEditing: () => emit("submit"),
+            style: {
+              flex: 1,
+              paddingVertical: 10,
+              fontSize: 16,
+              color: "#111827"
+            }
+          }
+        )
+      ]
     }
   );
 }
-function ConfirmationDialogManager() {
-  const { pendingConfirmation, confirm, cancel } = useActions();
-  if (!pendingConfirmation?.action.confirm) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx7(
-    ConfirmDialog,
+function SpinnerComponent({ element }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx6(ActivityIndicator, { size: p.size ?? "small", color: p.color ?? "#3b82f6" });
+}
+function ProgressBarComponent({ element }) {
+  const p = element.props;
+  const height = p.height ?? 6;
+  const progress = Math.min(Math.max(p.progress, 0), 1);
+  return /* @__PURE__ */ jsx6(
+    View2,
     {
-      confirm: pendingConfirmation.action.confirm,
-      onConfirm: confirm,
-      onCancel: cancel
+      style: {
+        height,
+        backgroundColor: p.trackColor ?? "#e5e7eb",
+        borderRadius: height / 2,
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsx6(
+        View2,
+        {
+          style: {
+            width: `${progress * 100}%`,
+            height: "100%",
+            backgroundColor: p.color ?? "#3b82f6",
+            borderRadius: height / 2
+          }
+        }
+      )
     }
   );
 }
-function createRendererFromCatalog(_catalog, registry) {
-  return function CatalogRenderer(props) {
-    return /* @__PURE__ */ jsx7(Renderer, { ...props, registry });
-  };
-}
-function defineRegistry(_catalog, options) {
-  const registry = {};
-  if (options.components) {
-    for (const [name, componentFn] of Object.entries(options.components)) {
-      registry[name] = ({
-        element,
-        children,
-        emit,
-        loading
-      }) => {
-        return componentFn({
-          props: element.props,
-          children,
-          emit,
-          loading
-        });
-      };
-    }
-  }
-  const actionMap = options.actions ? Object.entries(options.actions) : [];
-  const handlers = (getSetState, getState) => {
-    const result = {};
-    for (const [name, actionFn] of actionMap) {
-      result[name] = async (params) => {
-        const setState = getSetState();
-        const state = getState();
-        if (setState) {
-          await actionFn(params, setState, state);
+function CardComponent({ element, children }) {
+  const p = element.props;
+  const elevated = p.elevated !== false;
+  const padding = p.padding ?? 16;
+  return /* @__PURE__ */ jsxs2(
+    View2,
+    {
+      style: [
+        {
+          backgroundColor: p.backgroundColor ?? "#ffffff",
+          borderRadius: p.borderRadius ?? 12,
+          padding
+        },
+        elevated && {
+          shadowColor: "#000",
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.1,
+          shadowRadius: 8,
+          elevation: 3
         }
-      };
-    }
-    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}`);
+      ],
+      children: [
+        p.title && /* @__PURE__ */ jsx6(
+          Text2,
+          {
+            style: {
+              fontSize: 18,
+              fontWeight: "600",
+              color: "#111827",
+              marginBottom: p.subtitle ? 2 : 12
+            },
+            children: p.title
+          }
+        ),
+        p.subtitle && /* @__PURE__ */ jsx6(
+          Text2,
+          {
+            style: {
+              fontSize: 14,
+              color: "#6b7280",
+              marginBottom: 12
+            },
+            children: p.subtitle
+          }
+        ),
+        children
+      ]
     }
-  };
-  return { registry, handlers, executeAction: executeAction2 };
+  );
 }
-function createRenderer(catalog, components) {
-  const registry = components;
-  return function CatalogRenderer({
-    spec,
-    state,
-    onAction,
-    onStateChange,
-    loading,
-    authState,
-    fallback
-  }) {
-    const actionHandlers = onAction ? {
-      __default__: (params) => {
-        const actionName = params.__actionName__;
-        const actionParams = params.__actionParams__;
-        return onAction(actionName, actionParams);
-      }
-    } : void 0;
-    return /* @__PURE__ */ jsx7(
-      StateProvider,
+function ListItemComponent({ element, emit }) {
+  const p = element.props;
+  const hasPress = !!element.on?.press;
+  const content = /* @__PURE__ */ jsxs2(
+    View2,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: 12,
+        paddingHorizontal: 16
+      },
+      children: [
+        p.leading && /* @__PURE__ */ jsx6(
+          Text2,
+          {
+            style: {
+              fontSize: 16,
+              color: "#6b7280",
+              marginRight: 12,
+              width: 24,
+              textAlign: "center"
+            },
+            children: p.leading
+          }
+        ),
+        /* @__PURE__ */ jsxs2(View2, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#111827" }, children: p.title }),
+          p.subtitle && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#6b7280", marginTop: 2 }, children: p.subtitle })
+        ] }),
+        p.trailing && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 14, color: "#6b7280", marginLeft: 8 }, children: p.trailing }),
+        p.showChevron && /* @__PURE__ */ jsx6(Text2, { style: { fontSize: 16, color: "#9ca3af", marginLeft: 8 }, children: ">" })
+      ]
+    }
+  );
+  if (hasPress) {
+    return /* @__PURE__ */ jsx6(
+      Pressable2,
       {
-        initialState: state,
-        authState,
-        onStateChange,
-        children: /* @__PURE__ */ jsx7(VisibilityProvider, { children: /* @__PURE__ */ jsx7(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ jsxs3(ValidationProvider, { children: [
-          /* @__PURE__ */ jsx7(
-            Renderer,
-            {
-              spec,
-              registry,
-              loading,
-              fallback
-            }
-          ),
-          /* @__PURE__ */ jsx7(ConfirmationDialogManager, {})
-        ] }) }) })
+        onPress: () => emit("press"),
+        style: ({ pressed }) => ({
+          opacity: pressed ? 0.7 : 1,
+          backgroundColor: pressed ? "#f9fafb" : "transparent"
+        }),
+        children: content
       }
     );
-  };
+  }
+  return content;
 }
-
-// src/hooks.ts
-import { useState as useState4, useCallback as useCallback5, useRef as useRef2, useEffect as useEffect2 } from "react";
-import {
-  setByPath as setByPath2,
-  getByPath as getByPath3,
-  removeByPath,
-  validateSpec,
-  autoFixSpec,
-  formatSpecIssues
-} from "@json-render/core";
-function looksLikeJson(line) {
-  return line.startsWith("{") || line.startsWith("[");
+function ModalComponent({ element, children }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx6(
+    RNModal,
+    {
+      visible: p.visible,
+      animationType: p.animationType ?? "slide",
+      transparent: true,
+      children: /* @__PURE__ */ jsx6(View2, { style: modalStyles.overlay, children: /* @__PURE__ */ jsxs2(View2, { style: modalStyles.content, children: [
+        p.title && /* @__PURE__ */ jsx6(Text2, { style: modalStyles.title, children: p.title }),
+        children
+      ] }) })
+    }
+  );
 }
-function 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 {
+function createStandardActionHandlers(options) {
+  return {
+    navigate: async (params) => {
+      const screen = params.screen;
+      const navParams = params.params;
+      options?.navigate?.(screen, navParams ?? void 0);
+    },
+    goBack: async () => {
+      options?.goBack?.();
+    },
+    showAlert: async (params) => {
+      const title = params.title;
+      const message = params.message ?? void 0;
+      const buttons = params.buttons;
+      const alertButtons = buttons?.map((btn) => ({
+        text: btn.text,
+        style: btn.style
+      }));
+      Alert.alert(title, message, alertButtons);
+    },
+    share: async (params) => {
+      const message = params.message;
+      const url = params.url ?? void 0;
+      const title = params.title ?? void 0;
+      await Share.share({ message, url, title });
+    },
+    openURL: async (params) => {
+      const url = params.url;
+      const canOpen = await Linking.canOpenURL(url);
+      if (canOpen) {
+        await Linking.openURL(url);
       }
-    } else {
-      break;
+    },
+    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);
     }
-  }
-  return { patch: null, malformed: true };
+  };
 }
-function setSpecValue(newSpec, path, value) {
-  if (path === "/root") {
-    newSpec.root = value;
-    return;
-  }
-  if (path === "/state") {
-    newSpec.state = value;
-    return;
-  }
-  if (path.startsWith("/state/")) {
-    if (!newSpec.state) newSpec.state = {};
-    const statePath = path.slice("/state".length);
-    setByPath2(newSpec.state, statePath, value);
-    return;
+var standardComponents = {
+  // Layout
+  Container: ContainerComponent,
+  Row: RowComponent,
+  Column: ColumnComponent,
+  ScrollContainer: ScrollContainerComponent,
+  SafeArea: SafeAreaComponent,
+  Pressable: PressableComponent,
+  Spacer: SpacerComponent,
+  Divider: DividerComponent,
+  // Content
+  Heading: HeadingComponent,
+  Paragraph: ParagraphComponent,
+  Label: LabelComponent,
+  Image: ImageComponent,
+  Avatar: AvatarComponent,
+  Badge: BadgeComponent,
+  Chip: ChipComponent,
+  // Input
+  Button: ButtonComponent,
+  TextInput: TextInputComponent,
+  Switch: SwitchComponent,
+  Checkbox: CheckboxComponent,
+  Slider: SliderComponent,
+  SearchBar: SearchBarComponent,
+  // Feedback
+  Spinner: SpinnerComponent,
+  ProgressBar: ProgressBarComponent,
+  // Composite
+  Card: CardComponent,
+  ListItem: ListItemComponent,
+  Modal: ModalComponent
+};
+var inputStyles = StyleSheet2.create({
+  label: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#374151",
+    marginBottom: 4
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#d1d5db",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 16,
+    color: "#111827",
+    backgroundColor: "#ffffff"
   }
-  if (path.startsWith("/elements/")) {
-    const pathParts = path.slice("/elements/".length).split("/");
-    const elementKey = pathParts[0];
-    if (!elementKey) return;
-    if (pathParts.length === 1) {
-      newSpec.elements[elementKey] = value;
-    } else {
-      const element = newSpec.elements[elementKey];
-      if (element) {
-        const propPath = "/" + pathParts.slice(1).join("/");
-        const newElement = { ...element };
-        setByPath2(
-          newElement,
-          propPath,
-          value
-        );
-        newSpec.elements[elementKey] = newElement;
-      }
-    }
+});
+var modalStyles = StyleSheet2.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "flex-end"
+  },
+  content: {
+    backgroundColor: "#ffffff",
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    padding: 24,
+    maxHeight: "80%"
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "600",
+    color: "#111827",
+    marginBottom: 16
   }
-}
-function removeSpecValue(newSpec, path) {
-  if (path === "/state") {
-    newSpec.state = void 0;
-    return;
+});
+
+// src/renderer.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var ElementErrorBoundary = class extends React6.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
   }
-  if (path.startsWith("/state/") && newSpec.state) {
-    const statePath = path.slice("/state".length);
-    removeByPath(newSpec.state, statePath);
-    return;
+  static getDerivedStateFromError() {
+    return { hasError: true };
   }
-  if (path.startsWith("/elements/")) {
-    const pathParts = path.slice("/elements/".length).split("/");
-    const elementKey = pathParts[0];
-    if (!elementKey) return;
-    if (pathParts.length === 1) {
-      const { [elementKey]: _, ...rest } = newSpec.elements;
-      newSpec.elements = rest;
-    } else {
-      const element = newSpec.elements[elementKey];
-      if (element) {
-        const propPath = "/" + pathParts.slice(1).join("/");
-        const newElement = { ...element };
-        removeByPath(
-          newElement,
-          propPath
-        );
-        newSpec.elements[elementKey] = newElement;
-      }
-    }
+  componentDidCatch(error, info) {
+    console.error(
+      `[json-render] Rendering error in <${this.props.elementType}>:`,
+      error,
+      info.componentStack
+    );
   }
-}
-function getSpecValue(spec, path) {
-  if (path === "/root") return spec.root;
-  return getByPath3(spec, path);
-}
-function applyPatch(spec, patch) {
-  const newSpec = { ...spec, elements: { ...spec.elements } };
-  switch (patch.op) {
-    case "add":
-    case "replace": {
-      setSpecValue(newSpec, patch.path, patch.value);
-      break;
-    }
-    case "remove": {
-      removeSpecValue(newSpec, patch.path);
-      break;
-    }
-    case "move": {
-      if (!patch.from) break;
-      const moveValue = getSpecValue(newSpec, patch.from);
-      removeSpecValue(newSpec, patch.from);
-      setSpecValue(newSpec, patch.path, moveValue);
-      break;
-    }
-    case "copy": {
-      if (!patch.from) break;
-      const copyValue = getSpecValue(newSpec, patch.from);
-      setSpecValue(newSpec, patch.path, copyValue);
-      break;
-    }
-    case "test": {
-      break;
+  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 = React6.memo(function ElementRenderer2({
+  element,
+  spec,
+  registry,
+  loading,
+  fallback
 }) {
-  const [spec, setSpec] = useState4(null);
-  const [isStreaming, setIsStreaming] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [rawLines, setRawLines] = useState4([]);
-  const abortControllerRef = useRef2(null);
-  const stop = useCallback5(() => {
-    abortControllerRef.current?.abort();
-    abortControllerRef.current = null;
-    setIsStreaming(false);
-  }, []);
-  const clear = useCallback5(() => {
-    setSpec(null);
-    setError(null);
-    setRawLines([]);
-  }, []);
-  const streamRequest = useCallback5(
-    async (prompt, context, initialSpec, abortOnMalformed) => {
-      let currentSpec = initialSpec;
-      setSpec(currentSpec);
-      const malformedLines = [];
-      const response = await fetchFn(api, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          prompt,
-          context,
-          currentSpec
-        }),
-        signal: abortControllerRef.current.signal
-      });
-      console.log("[useUIStream] response status:", response.status);
-      if (!response.ok) {
-        let errorMessage = `HTTP error: ${response.status}`;
-        try {
-          const errorData = await response.json();
-          if (errorData.message) {
-            errorMessage = errorData.message;
-          } else if (errorData.error) {
-            errorMessage = errorData.error;
-          }
-        } catch {
-        }
-        throw new Error(errorMessage);
-      }
-      const reader = response.body?.getReader();
-      if (!reader) {
-        throw new Error("No response body");
-      }
-      const decoder = new TextDecoder();
-      let buffer = "";
-      let chunkCount = 0;
-      let totalBytes = 0;
-      let aborted = false;
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) {
-          console.log(
-            "[useUIStream] stream done. Total chunks:",
-            chunkCount,
-            "bytes:",
-            totalBytes
-          );
-          break;
-        }
-        chunkCount++;
-        totalBytes += value?.byteLength ?? 0;
-        const decoded = decoder.decode(value, { stream: true });
-        buffer += decoded;
-        if (chunkCount <= 5) {
-          console.log(
-            `[useUIStream] chunk #${chunkCount} (${value?.byteLength ?? 0}b):`,
-            decoded.slice(0, 200)
-          );
-        }
-        const lines = buffer.split("\n");
-        buffer = lines.pop() ?? "";
-        const newLines = [];
-        for (const line of lines) {
-          if (line.trim()) {
-            newLines.push(line);
-          }
-          const { patch, malformed } = parsePatchLine(line);
-          if (patch) {
-            console.log("[useUIStream] applied patch:", patch.op, patch.path);
-            currentSpec = applyPatch(currentSpec, patch);
-            setSpec({ ...currentSpec });
-          } else if (malformed) {
-            malformedLines.push(line.trim());
-            console.warn(
-              "[useUIStream] malformed JSON line:",
-              line.trim().slice(0, 200)
-            );
-            if (abortOnMalformed) {
-              console.warn(
-                "[useUIStream] aborting stream due to malformed JSON, will retry"
-              );
-              await reader.cancel();
-              aborted = true;
-              break;
-            }
-          }
-        }
-        if (aborted) break;
-        if (newLines.length > 0) {
-          setRawLines((prev) => [...prev, ...newLines]);
+  const repeatScope = useRepeatScope();
+  const { ctx } = useVisibility();
+  const { execute } = useActions();
+  const fullCtx = useMemo5(
+    () => repeatScope ? {
+      ...ctx,
+      repeatItem: repeatScope.item,
+      repeatIndex: repeatScope.index,
+      repeatBasePath: repeatScope.basePath
+    } : ctx,
+    [ctx, repeatScope]
+  );
+  const isVisible = element.visible === void 0 ? true : evaluateVisibility2(element.visible, fullCtx);
+  const onBindings = element.on;
+  const emit = useCallback5(
+    (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] = 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 = useCallback5(
-    async (prompt, context) => {
-      abortControllerRef.current?.abort();
-      abortControllerRef.current = new AbortController();
-      setIsStreaming(true);
-      setError(null);
-      setRawLines([]);
-      const previousSpec = context?.previousSpec;
-      let currentSpec = previousSpec && previousSpec.root ? { ...previousSpec, elements: { ...previousSpec.elements } } : { root: "", elements: {} };
-      let retriesUsed = 0;
-      let currentPrompt = prompt;
-      let currentContext = context;
-      try {
-        while (retriesUsed <= maxRetries) {
-          const result = await streamRequest(
-            currentPrompt,
-            currentContext,
-            currentSpec,
-            enableValidation
-            // only abort on malformed when validation is on
-          );
-          currentSpec = result.spec;
-          if (!result.completed && result.malformedLines.length > 0) {
-            if (retriesUsed >= maxRetries) {
+  if (!isVisible) {
+    return null;
+  }
+  const rawProps = element.props;
+  const elementBindings = resolveBindings(rawProps, fullCtx);
+  const resolvedProps = 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__ */ jsx7(
+    RepeatChildren,
+    {
+      element: resolvedElement,
+      spec,
+      registry,
+      loading,
+      fallback
+    }
+  ) : resolvedElement.children?.map((childKey) => {
+    const childElement = spec.elements[childKey];
+    if (!childElement) {
+      if (!loading) {
+        console.warn(
+          `[json-render] Missing element "${childKey}" referenced as child of "${resolvedElement.type}". This element will not render.`
+        );
+      }
+      return null;
+    }
+    return /* @__PURE__ */ jsx7(
+      ElementRenderer2,
+      {
+        element: childElement,
+        spec,
+        registry,
+        loading,
+        fallback
+      },
+      childKey
+    );
+  });
+  return /* @__PURE__ */ jsx7(ElementErrorBoundary, { elementType: resolvedElement.type, children: /* @__PURE__ */ jsx7(
+    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 = getByPath3(state, statePath) ?? [];
+  return /* @__PURE__ */ jsx7(Fragment, { children: items.map((itemValue, index) => {
+    const key = repeat.key && typeof itemValue === "object" && itemValue !== null ? String(
+      itemValue[repeat.key] ?? index
+    ) : String(index);
+    return /* @__PURE__ */ jsx7(
+      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 } = autoFixSpec(currentSpec);
-          if (fixes.length > 0) {
-            console.log("[useUIStream] auto-fixed spec issues:", fixes);
-            currentSpec = fixedSpec;
-            setSpec({ ...currentSpec });
-          }
-          const validation = validateSpec(currentSpec);
-          if (validation.valid) {
-            console.log("[useUIStream] spec validation passed");
-            break;
-          }
-          const errors = validation.issues.filter(
-            (i) => i.severity === "error"
-          );
-          if (retriesUsed >= maxRetries) {
-            console.warn(
-              "[useUIStream] spec validation failed, max retries exhausted:",
-              errors.map((e) => e.message)
-            );
-            break;
+            return null;
           }
-          retriesUsed++;
-          const issueText = formatSpecIssues(validation.issues);
-          console.warn(
-            `[useUIStream] post-stream retry ${retriesUsed}/${maxRetries}:`,
-            errors.map((e) => e.message)
+          return /* @__PURE__ */ jsx7(
+            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 = useMemo5(
+    () => ({
+      ...includeStandard ? standardComponents : {},
+      ...customRegistry
+    }),
+    [customRegistry, includeStandard]
+  );
+  if (!spec || !spec.root) {
+    return null;
+  }
+  const rootElement = spec.elements[spec.root];
+  if (!rootElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx7(
+    ElementRenderer,
+    {
+      element: rootElement,
+      spec,
+      registry,
+      loading,
+      fallback
+    }
   );
-  useEffect2(() => {
-    return () => {
-      abortControllerRef.current?.abort();
-    };
-  }, []);
-  return {
-    spec,
-    isStreaming,
-    error,
-    rawLines,
-    send,
-    stop,
-    clear
-  };
 }
-function flatToTree(elements) {
-  const elementMap = {};
-  let root = "";
-  for (const element of elements) {
-    elementMap[element.key] = {
-      type: element.type,
-      props: element.props,
-      children: [],
-      visible: element.visible
-    };
+function JSONUIProvider({
+  registry,
+  initialState,
+  handlers,
+  navigate,
+  validationFunctions,
+  onStateChange,
+  children
+}) {
+  return /* @__PURE__ */ jsx7(StateProvider, { initialState, onStateChange, children: /* @__PURE__ */ jsx7(VisibilityProvider, { children: /* @__PURE__ */ jsx7(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ jsxs3(ValidationProvider, { customFunctions: validationFunctions, children: [
+    children,
+    /* @__PURE__ */ jsx7(ConfirmationDialogManager, {})
+  ] }) }) }) });
+}
+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__ */ jsx7(
+    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__ */ jsx7(StateProvider, { initialState: state, onStateChange, children: /* @__PURE__ */ jsx7(VisibilityProvider, { children: /* @__PURE__ */ jsx7(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ jsxs3(ValidationProvider, { children: [
+      /* @__PURE__ */ jsx7(
+        Renderer,
+        {
+          spec,
+          registry,
+          loading,
+          fallback
+        }
+      ),
+      /* @__PURE__ */ jsx7(ConfirmationDialogManager, {})
+    ] }) }) }) });
+  };
 }
 export {
   ActionProvider,
@@ -2229,18 +2203,17 @@ export {
   ValidationProvider,
   VisibilityProvider,
   createRenderer,
-  createRendererFromCatalog,
   createStandardActionHandlers,
   defineRegistry,
   elementTreeSchema,
   flatToTree,
-  rewriteRepeatTokens,
   schema,
   standardActionDefinitions,
   standardComponentDefinitions,
   standardComponents,
   useAction,
   useActions,
+  useBoundProp,
   useFieldValidation,
   useIsVisible,
   useRepeatScope,