@pushframe/sdk 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -16,8 +16,18 @@ function usePushFrameContext() {
   }
   return ctx;
 }
-function Text({ if: _if, actions: _actions, value, children, ...rest }) {
-  return /* @__PURE__ */ jsx(Text$1, { ...rest, children: value !== void 0 ? value : children });
+function Text({
+  if: _if,
+  actions: _actions,
+  value,
+  content,
+  ...rest
+}) {
+  const textContent = value !== void 0 ? value : content;
+  if (textContent !== void 0) {
+    return /* @__PURE__ */ jsx(Text$1, { ...rest, children: textContent });
+  }
+  return /* @__PURE__ */ jsx(Text$1, { ...rest });
 }
 function View({ if: _if, actions: _actions, ...rest }) {
   return /* @__PURE__ */ jsx(View$1, { ...rest });
@@ -402,7 +412,8 @@ function resolveDeep(value, context) {
 
 // src/renderer/conditionalEvaluator.ts
 function evaluateIf(ifExpr, context) {
-  if (ifExpr === void 0) return true;
+  if (ifExpr === void 0 || ifExpr === null) return true;
+  if (typeof ifExpr !== "string") return Boolean(ifExpr);
   const resolved = resolveValue(ifExpr, context);
   return Boolean(resolved);
 }
@@ -429,9 +440,18 @@ function buildActionProps(actions, context, dispatchAction) {
 }
 function renderFlatListNode(node, context, registry, dispatchAction, fallbackComponent) {
   const resolvedProps = resolveProps(node.props, context);
-  const items = Array.isArray(resolvedProps["items"]) ? resolvedProps["items"] : [];
   const actionProps = node.actions ? buildActionProps(node.actions, context, dispatchAction) : {};
-  const { items: _items, keyExtractor: keyExtractorExpr, direction, numColumns, ...restProps } = resolvedProps;
+  const {
+    data: resolvedData,
+    items: resolvedItems,
+    keyExtractor: keyExtractorExpr,
+    direction,
+    numColumns,
+    visible: _visible,
+    _propValues: _pv,
+    ...restProps
+  } = resolvedProps;
+  const items = Array.isArray(resolvedData) ? resolvedData : Array.isArray(resolvedItems) ? resolvedItems : [];
   let keyExtractorFn;
   if (typeof keyExtractorExpr === "string") {
     const extractorExpr = keyExtractorExpr;
@@ -446,7 +466,7 @@ function renderFlatListNode(node, context, registry, dispatchAction, fallbackCom
     return /* @__PURE__ */ jsx(
       RecursiveRenderer,
       {
-        node: node.renderItem,
+        node: node.itemTemplate,
         context: itemContext,
         registry,
         dispatchAction,
@@ -490,6 +510,16 @@ function RecursiveRenderer({
     );
   }
   const resolvedProps = resolveProps(node.props, context);
+  if (resolvedProps.visible !== void 0 && !resolvedProps.visible) {
+    return null;
+  }
+  const {
+    visible: _visible,
+    _propValues: propValuesRaw,
+    ...propsToForward
+  } = resolvedProps;
+  const propValues = propValuesRaw;
+  const childContext = propValues && Object.keys(propValues).length > 0 ? { ...context, ...propValues } : context;
   const actionProps = node.actions ? buildActionProps(node.actions, context, dispatchAction) : {};
   const Component = registry.resolve(node.type);
   if (!Component) {
@@ -502,7 +532,7 @@ function RecursiveRenderer({
     RecursiveRenderer,
     {
       node: child,
-      context,
+      context: childContext,
       registry,
       dispatchAction,
       fallbackComponent
@@ -510,7 +540,7 @@ function RecursiveRenderer({
     `${child.type}-${index}`
   )) : void 0;
   return React4.createElement(Component, {
-    ...resolvedProps,
+    ...propsToForward,
     ...actionProps,
     children
   });
@@ -731,6 +761,744 @@ var styles3 = StyleSheet.create({
   }
 });
 
+// src/transformer/index.ts
+var BRIDGE_KEYS = /* @__PURE__ */ new Set([
+  "_schemaId",
+  "_schemaType",
+  "_schemaActions",
+  "_schemaIf",
+  "_schemaRenderItem"
+]);
+var ALIGN_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var DISTRIBUTE_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  "space-between": "space-between",
+  "space-around": "space-around",
+  "space-evenly": "space-evenly"
+};
+var FIT_TO_RESIZE_MODE = {
+  cover: "cover",
+  contain: "contain",
+  fill: "stretch",
+  // RN uses 'stretch', not 'fill'
+  center: "center"
+};
+var FONT_WEIGHT_MAP = {
+  regular: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+var TEXT_STYLE_PRESETS = {
+  "heading-1": { fontSize: 28, fontWeight: "700" },
+  "heading-2": { fontSize: 22, fontWeight: "700" },
+  "heading-3": { fontSize: 18, fontWeight: "600" },
+  "body": { fontSize: 16, fontWeight: "400" },
+  "body-sm": { fontSize: 14, fontWeight: "400" },
+  "caption": { fontSize: 12, fontWeight: "400" },
+  "label": { fontSize: 13, fontWeight: "500" },
+  "overline": { fontSize: 11, fontWeight: "500", textTransform: "uppercase", letterSpacing: 0.8 }
+};
+var INPUT_TYPE_MAP = {
+  text: { keyboardType: "default", secureTextEntry: false, autoCapitalize: "sentences", autoCorrect: true },
+  email: { keyboardType: "email-address", secureTextEntry: false, autoCapitalize: "none", autoCorrect: false },
+  password: { keyboardType: "default", secureTextEntry: true, autoCapitalize: "none", autoCorrect: false },
+  number: { keyboardType: "numeric", secureTextEntry: false, autoCapitalize: "none", autoCorrect: false },
+  decimal: { keyboardType: "decimal-pad", secureTextEntry: false, autoCapitalize: "none", autoCorrect: false },
+  phone: { keyboardType: "phone-pad", secureTextEntry: false, autoCapitalize: "none", autoCorrect: false },
+  url: { keyboardType: "url", secureTextEntry: false, autoCapitalize: "none", autoCorrect: false },
+  search: { keyboardType: "default", secureTextEntry: false, autoCapitalize: "none", autoCorrect: false }
+};
+function stripBridgeKeys(props) {
+  const out = {};
+  for (const k in props) {
+    if (!BRIDGE_KEYS.has(k)) out[k] = props[k];
+  }
+  return out;
+}
+function extractMeta(raw) {
+  return {
+    actions: raw._schemaActions,
+    condition: raw._schemaIf
+  };
+}
+function resolveSizeModeRN(value, axis, out, parentDirection) {
+  if (value === void 0) return;
+  if (value === "fill") {
+    const isMainAxis = parentDirection === "vertical" && axis === "height" || parentDirection === "horizontal" && axis === "width";
+    if (isMainAxis) {
+      out.flex = 1;
+    } else {
+      out.alignSelf = "stretch";
+    }
+  } else if (value === "hug") {
+    out.alignSelf = "flex-start";
+  } else {
+    out[axis] = value;
+  }
+}
+function resolvePaddingRN(padding) {
+  if (padding === void 0) return {};
+  if (typeof padding === "number") return { padding };
+  const { top, right, bottom, left } = padding;
+  if (top === bottom && left === right && top !== void 0 && left !== void 0) {
+    return { paddingVertical: top, paddingHorizontal: left };
+  }
+  return {
+    ...top !== void 0 ? { paddingTop: top } : {},
+    ...right !== void 0 ? { paddingRight: right } : {},
+    ...bottom !== void 0 ? { paddingBottom: bottom } : {},
+    ...left !== void 0 ? { paddingLeft: left } : {}
+  };
+}
+function resolveRadiusRN(radius) {
+  if (radius === void 0) return {};
+  if (typeof radius === "number") return { borderRadius: radius };
+  return {
+    ...radius.tl !== void 0 ? { borderTopLeftRadius: radius.tl } : {},
+    ...radius.tr !== void 0 ? { borderTopRightRadius: radius.tr } : {},
+    ...radius.br !== void 0 ? { borderBottomRightRadius: radius.br } : {},
+    ...radius.bl !== void 0 ? { borderBottomLeftRadius: radius.bl } : {}
+  };
+}
+function resolveBorderRN(border) {
+  if (!border) return {};
+  const out = {};
+  if (border.style) out.borderStyle = border.style;
+  if (border.color) out.borderColor = border.color;
+  if (border.widths) {
+    const w = border.widths;
+    if (w.top !== void 0) out.borderTopWidth = w.top;
+    if (w.right !== void 0) out.borderRightWidth = w.right;
+    if (w.bottom !== void 0) out.borderBottomWidth = w.bottom;
+    if (w.left !== void 0) out.borderLeftWidth = w.left;
+  } else if (border.width !== void 0) {
+    out.borderWidth = border.width;
+  }
+  return out;
+}
+function resolveShadowRN(shadow) {
+  if (!shadow) return {};
+  return {
+    shadowColor: shadow.color,
+    shadowOffset: { width: shadow.offsetX, height: shadow.offsetY },
+    shadowRadius: shadow.blur,
+    shadowOpacity: shadow.opacity,
+    elevation: Math.round(shadow.blur / 2)
+  };
+}
+function resolveTransformRN(props) {
+  const transforms = [];
+  if (props.rotate !== void 0 && props.rotate !== 0) transforms.push({ rotate: `${props.rotate}deg` });
+  if (props.scale !== void 0 && props.scale !== 1) transforms.push({ scale: props.scale });
+  if (props.translateX !== void 0 && props.translateX !== 0) transforms.push({ translateX: props.translateX });
+  if (props.translateY !== void 0 && props.translateY !== 0) transforms.push({ translateY: props.translateY });
+  return transforms.length ? { transform: transforms } : {};
+}
+function resolvePositionRN(props) {
+  const out = {};
+  if (props.position) out.position = props.position;
+  if (props.position === "absolute") {
+    if (props.top !== void 0) out.top = props.top;
+    if (props.right !== void 0) out.right = props.right;
+    if (props.bottom !== void 0) out.bottom = props.bottom;
+    if (props.left !== void 0) out.left = props.left;
+  }
+  if (props.zIndex !== void 0) out.zIndex = props.zIndex;
+  return out;
+}
+function resolveAccessibilityProps(props) {
+  const out = {};
+  if (props.accessible !== void 0) out.accessible = props.accessible;
+  if (props.accessibilityLabel) out.accessibilityLabel = props.accessibilityLabel;
+  if (props.accessibilityRole) out.accessibilityRole = props.accessibilityRole;
+  if (props.testID) out.testID = props.testID;
+  return out;
+}
+function buildFrameStyle(props, parentDirection) {
+  const style = {};
+  const frameType = props.type ?? "stack";
+  if (frameType === "grid") {
+    if (props.align) style.alignItems = ALIGN_MAP[props.align] ?? props.align;
+  } else {
+    style.flexDirection = props.direction === "horizontal" ? "row" : "column";
+    if (props.align) style.alignItems = ALIGN_MAP[props.align] ?? props.align;
+    if (props.distribute) style.justifyContent = DISTRIBUTE_MAP[props.distribute] ?? props.distribute;
+    if (props.gap !== void 0 && props.gap !== 0) style.gap = props.gap;
+    if (props.wrap === "yes") style.flexWrap = "wrap";
+  }
+  resolveSizeModeRN(props.width, "width", style, parentDirection);
+  resolveSizeModeRN(props.height, "height", style, parentDirection);
+  if (props.minWidth !== void 0) style.minWidth = props.minWidth;
+  if (props.maxWidth !== void 0) style.maxWidth = props.maxWidth;
+  if (props.minHeight !== void 0) style.minHeight = props.minHeight;
+  if (props.maxHeight !== void 0) style.maxHeight = props.maxHeight;
+  if (props.aspectRatio !== void 0) style.aspectRatio = props.aspectRatio;
+  Object.assign(style, resolvePaddingRN(props.padding));
+  if (props.fill && props.fill !== "transparent") style.backgroundColor = props.fill;
+  Object.assign(style, resolveRadiusRN(props.radius));
+  Object.assign(style, resolveBorderRN(props.border));
+  Object.assign(style, resolveShadowRN(props.shadow));
+  if (props.opacity !== void 0) style.opacity = props.opacity / 100;
+  if (props.overflow === true) style.overflow = "hidden";
+  Object.assign(style, resolvePositionRN(props));
+  Object.assign(style, resolveTransformRN(props));
+  return style;
+}
+function splitFrameStyle(style) {
+  const OUTER_KEYS = /* @__PURE__ */ new Set([
+    "flex",
+    "alignSelf",
+    "width",
+    "height",
+    "minWidth",
+    "maxWidth",
+    "minHeight",
+    "maxHeight",
+    "aspectRatio",
+    "position",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "zIndex",
+    "transform"
+  ]);
+  const outer = {};
+  const inner = {};
+  for (const [k, v] of Object.entries(style)) {
+    if (OUTER_KEYS.has(k)) outer[k] = v;
+    else inner[k] = v;
+  }
+  return { outer, inner };
+}
+function splitScrollStyle(style) {
+  const CONTENT_KEYS = /* @__PURE__ */ new Set([
+    "flexDirection",
+    "justifyContent",
+    "alignItems",
+    "flexWrap",
+    "gap",
+    "padding",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "paddingVertical",
+    "paddingHorizontal"
+  ]);
+  const containerStyle = {};
+  const contentStyle = {};
+  for (const [k, v] of Object.entries(style)) {
+    if (CONTENT_KEYS.has(k)) contentStyle[k] = v;
+    else containerStyle[k] = v;
+  }
+  return { containerStyle, contentStyle };
+}
+function safeAreaEdges(safeArea) {
+  if (!safeArea) return [];
+  return Object.entries(safeArea).filter(([, v]) => v === true).map(([edge]) => edge);
+}
+function transformScreen(id, raw, children) {
+  const { actions, condition } = extractMeta(raw);
+  const props = stripBridgeKeys(raw);
+  const edges = safeAreaEdges(props.safeArea);
+  const hasSafeArea = edges.length > 0;
+  const vis = props.visible !== void 0 && props.visible !== true ? { visible: props.visible } : {};
+  const style = { flex: 1 };
+  if (props.backgroundColor) style.backgroundColor = props.backgroundColor;
+  let content;
+  if (props.scrollable) {
+    const paddingStyle = resolvePaddingRN(props.padding);
+    const scrollNode = {
+      id: `${id}__scroll`,
+      type: "scrollview",
+      props: {
+        style: { flex: 1 },
+        ...Object.keys(paddingStyle).length ? { contentContainerStyle: paddingStyle } : {},
+        showsVerticalScrollIndicator: false,
+        showsHorizontalScrollIndicator: false
+      },
+      children
+    };
+    content = [scrollNode];
+  } else {
+    Object.assign(style, resolvePaddingRN(props.padding));
+    content = children;
+  }
+  const statusBar = props.statusBarStyle && props.statusBarStyle !== "dark" ? { statusBarStyle: props.statusBarStyle } : {};
+  const node = {
+    id,
+    type: hasSafeArea ? "safeareaview" : "view",
+    props: {
+      style,
+      ...hasSafeArea ? { edges } : {},
+      ...statusBar,
+      ...vis
+    },
+    children: content
+  };
+  if (condition !== void 0) node.if = condition;
+  if (actions) node.actions = actions;
+  return node;
+}
+function transformFrame(id, raw, children, parentDirection) {
+  const { actions, condition } = extractMeta(raw);
+  const p = stripBridgeKeys(raw);
+  const isGrid = (p.type ?? "stack") === "grid";
+  const isScrollable = p.scrollable === true;
+  const isPressable = p.pressable === true;
+  const direction = p.direction === "horizontal" ? "horizontal" : "vertical";
+  const edges = safeAreaEdges(p.safeArea);
+  const hasSafeArea = edges.length > 0;
+  const access = resolveAccessibilityProps(p);
+  const vis = p.visible !== void 0 && p.visible !== true ? { visible: p.visible } : {};
+  const fullStyle = buildFrameStyle(p, parentDirection);
+  const { outer: sizingStyle, inner: appearanceStyle } = splitFrameStyle(fullStyle);
+  const { containerStyle: scrollOuter, contentStyle: scrollContent } = splitScrollStyle(fullStyle);
+  function finalize(node) {
+    if (condition !== void 0) node.if = condition;
+    if (actions && node.type === "pressable") node.actions = actions;
+    else if (actions && !isPressable) node.actions = actions;
+    return node;
+  }
+  if (isGrid) {
+    const gridStyle = { ...fullStyle, flexDirection: "row", flexWrap: "wrap" };
+    delete gridStyle.gap;
+    if (p.columnGap !== void 0) gridStyle.columnGap = p.columnGap;
+    if (p.rowGap !== void 0) gridStyle.rowGap = p.rowGap;
+    const gridView = {
+      id: hasSafeArea || isPressable ? `${id}__grid` : id,
+      type: "view",
+      props: {
+        ...Object.keys(gridStyle).length ? { style: gridStyle } : {},
+        numColumns: p.columns ?? 2,
+        ...access,
+        ...hasSafeArea || isPressable ? {} : vis
+      },
+      children
+    };
+    if (!hasSafeArea && !isPressable) return finalize(gridView);
+    let inner = gridView;
+    if (hasSafeArea) {
+      inner = {
+        id: isPressable ? `${id}__sav` : id,
+        type: "safeareaview",
+        props: { edges, ...isPressable ? {} : vis },
+        children: [gridView]
+      };
+    }
+    if (!isPressable) return finalize(inner);
+    return finalize({
+      id,
+      type: "pressable",
+      props: {
+        ...Object.keys(sizingStyle).length ? { style: sizingStyle } : {},
+        ...actions ? { actions } : {},
+        ...vis
+      },
+      children: [inner]
+    });
+  }
+  if (isScrollable) {
+    const scrollNode = {
+      id: hasSafeArea || isPressable ? `${id}__scroll` : id,
+      type: "scrollview",
+      props: {
+        ...Object.keys(scrollOuter).length ? { style: scrollOuter } : {},
+        ...Object.keys(scrollContent).length ? { contentContainerStyle: scrollContent } : {},
+        horizontal: direction === "horizontal",
+        showsHorizontalScrollIndicator: p.showScrollIndicator === true,
+        showsVerticalScrollIndicator: p.showScrollIndicator === true,
+        ...access,
+        ...hasSafeArea || isPressable ? {} : vis
+      },
+      children
+    };
+    if (!hasSafeArea && !isPressable) return finalize(scrollNode);
+    let inner = scrollNode;
+    if (hasSafeArea) {
+      inner = {
+        id: isPressable ? `${id}__sav` : id,
+        type: "safeareaview",
+        props: {
+          edges,
+          ...Object.keys(sizingStyle).length ? { style: sizingStyle } : {},
+          ...isPressable ? {} : vis
+        },
+        children: [scrollNode]
+      };
+    }
+    if (!isPressable) return finalize(inner);
+    return finalize({
+      id,
+      type: "pressable",
+      props: {
+        ...Object.keys(sizingStyle).length ? { style: sizingStyle } : {},
+        ...actions ? { actions } : {},
+        ...vis
+      },
+      children: [inner]
+    });
+  }
+  if (!isPressable && !hasSafeArea) {
+    return finalize({
+      id,
+      type: "view",
+      props: {
+        ...Object.keys(fullStyle).length ? { style: fullStyle } : {},
+        ...access,
+        ...vis
+      },
+      children
+    });
+  }
+  if (!isPressable && hasSafeArea) {
+    return finalize({
+      id,
+      type: "safeareaview",
+      props: {
+        edges,
+        ...Object.keys(fullStyle).length ? { style: fullStyle } : {},
+        ...access,
+        ...vis
+      },
+      children
+    });
+  }
+  const innerNode = hasSafeArea ? {
+    id: `${id}__sav`,
+    type: "safeareaview",
+    props: {
+      edges,
+      ...Object.keys(appearanceStyle).length ? { style: appearanceStyle } : {},
+      ...access
+    },
+    children
+  } : {
+    id: `${id}__content`,
+    type: "view",
+    props: {
+      ...Object.keys(appearanceStyle).length ? { style: appearanceStyle } : {},
+      ...access
+    },
+    children
+  };
+  return finalize({
+    id,
+    type: "pressable",
+    props: {
+      ...Object.keys(sizingStyle).length ? { style: sizingStyle } : {},
+      ...actions ? { actions } : {},
+      ...vis
+    },
+    children: [innerNode]
+  });
+}
+function transformText(id, raw, parentDirection) {
+  const { actions, condition } = extractMeta(raw);
+  const props = stripBridgeKeys(raw);
+  const style = {};
+  if (props.textStyle) {
+    const preset = TEXT_STYLE_PRESETS[props.textStyle];
+    if (preset) {
+      style.fontSize = preset.fontSize;
+      style.fontWeight = preset.fontWeight;
+      if (preset.lineHeight !== void 0) style.lineHeight = preset.lineHeight;
+      if (preset.textTransform) style.textTransform = preset.textTransform;
+      if (preset.letterSpacing !== void 0) style.letterSpacing = preset.letterSpacing;
+    }
+  }
+  if (props.color) style.color = props.color;
+  if (props.fontSize !== void 0) style.fontSize = props.fontSize;
+  if (props.fontWeight) style.fontWeight = FONT_WEIGHT_MAP[props.fontWeight] ?? props.fontWeight;
+  if (props.fontFamily) style.fontFamily = props.fontFamily;
+  if (props.fontStyle) style.fontStyle = props.fontStyle;
+  if (props.lineHeight !== void 0) style.lineHeight = props.lineHeight;
+  if (props.letterSpacing !== void 0) style.letterSpacing = props.letterSpacing;
+  if (props.align) style.textAlign = props.align;
+  if (props.transform && props.transform !== "none") style.textTransform = props.transform;
+  if (props.decoration && props.decoration !== "none") style.textDecorationLine = props.decoration;
+  if (props.opacity !== void 0) style.opacity = props.opacity / 100;
+  Object.assign(style, resolvePositionRN(props));
+  resolveSizeModeRN(props.width, "width", style, parentDirection);
+  const textProps = {};
+  if (typeof props.truncate === "number" && props.truncate > 0) {
+    textProps.numberOfLines = props.truncate;
+    textProps.ellipsizeMode = "tail";
+  }
+  if (props.adjustFontSize === true) {
+    textProps.adjustsFontSizeToFit = true;
+    if (props.minFontSize !== void 0) textProps.minimumFontScale = props.minFontSize;
+  }
+  if (props.selectable !== void 0) textProps.selectable = props.selectable;
+  const node = {
+    id,
+    type: "text",
+    props: {
+      // SDK contract: text content lives in the `value` prop.
+      // The Craft editor stores text in `content`; map it to `value` here.
+      value: props.content ?? "",
+      ...Object.keys(style).length ? { style } : {},
+      ...textProps,
+      ...resolveAccessibilityProps(props),
+      ...props.visible !== void 0 && props.visible !== true ? { visible: props.visible } : {}
+    }
+  };
+  if (condition !== void 0) node.if = condition;
+  if (actions) node.actions = actions;
+  return node;
+}
+function transformImage(id, raw, children, parentDirection) {
+  const { actions, condition } = extractMeta(raw);
+  const props = stripBridgeKeys(raw);
+  const style = {};
+  resolveSizeModeRN(props.width, "width", style, parentDirection);
+  resolveSizeModeRN(props.height, "height", style, parentDirection);
+  if (props.aspectRatio !== void 0) style.aspectRatio = props.aspectRatio;
+  Object.assign(style, resolveRadiusRN(props.radius));
+  if (props.opacity !== void 0) style.opacity = props.opacity / 100;
+  Object.assign(style, resolvePositionRN(props));
+  const imageProps = {};
+  if (props.src) imageProps.source = { uri: props.src };
+  if (props.placeholder) imageProps.defaultSource = { uri: props.placeholder };
+  if (props.fallback) imageProps.fallback = { uri: props.fallback };
+  imageProps.resizeMode = FIT_TO_RESIZE_MODE[props.fit ?? "cover"] ?? "cover";
+  if (props.background === true) imageProps.background = true;
+  if (props.decorative) {
+    imageProps.accessible = false;
+    imageProps.accessibilityElementsHidden = true;
+  } else if (props.alt) {
+    imageProps.accessible = true;
+    imageProps.accessibilityLabel = props.alt;
+  }
+  if (props.testID) imageProps.testID = props.testID;
+  const node = {
+    id,
+    type: "image",
+    props: {
+      ...Object.keys(style).length ? { style } : {},
+      ...imageProps,
+      ...props.visible !== void 0 && props.visible !== true ? { visible: props.visible } : {}
+    },
+    ...props.background === true && children.length ? { children } : {}
+  };
+  if (condition !== void 0) node.if = condition;
+  if (actions) node.actions = actions;
+  return node;
+}
+function transformInput(id, raw, parentDirection) {
+  const { actions, condition } = extractMeta(raw);
+  const props = stripBridgeKeys(raw);
+  const style = {};
+  resolveSizeModeRN(props.width ?? "fill", "width", style, parentDirection);
+  Object.assign(style, resolvePaddingRN(props.padding));
+  if (props.opacity !== void 0) style.opacity = props.opacity / 100;
+  Object.assign(style, resolvePositionRN(props));
+  const inputTypeDefaults = INPUT_TYPE_MAP[props.inputType ?? "text"] ?? INPUT_TYPE_MAP.text;
+  const node = {
+    id,
+    type: "textinput",
+    props: {
+      ...Object.keys(style).length ? { style } : {},
+      ...props.label !== void 0 ? { label: props.label } : {},
+      ...props.placeholder !== void 0 ? { placeholder: props.placeholder } : {},
+      ...props.value !== void 0 ? { value: props.value } : {},
+      ...props.helperText !== void 0 ? { helperText: props.helperText } : {},
+      ...props.errorText !== void 0 ? { errorText: props.errorText } : {},
+      ...inputTypeDefaults,
+      ...props.autoCapitalize ? { autoCapitalize: props.autoCapitalize } : {},
+      returnKeyType: props.returnKey ?? "done",
+      multiline: props.multiline ?? false,
+      ...props.multiline && props.minLines ? { numberOfLines: props.minLines } : {},
+      ...props.multiline && props.maxLines ? { maxNumberOfLines: props.maxLines } : {},
+      variant: props.variant ?? "outline",
+      size: props.size ?? "md",
+      ...props.leadingIcon ? { leadingIcon: props.leadingIcon } : {},
+      ...props.trailingIcon ? { trailingIcon: props.trailingIcon } : {},
+      ...resolveAccessibilityProps(props),
+      ...props.visible !== void 0 && props.visible !== true ? { visible: props.visible } : {}
+    }
+  };
+  if (condition !== void 0) node.if = condition;
+  if (actions) node.actions = actions;
+  return node;
+}
+function transformList(id, raw, children, parentDirection) {
+  const { actions, condition } = extractMeta(raw);
+  const props = stripBridgeKeys(raw);
+  const listType = props.type ?? "stack";
+  const direction = props.direction === "horizontal" ? "horizontal" : "vertical";
+  const edges = safeAreaEdges(props.safeArea);
+  const hasSafeArea = edges.length > 0;
+  const vis = props.visible !== void 0 && props.visible !== true ? { visible: props.visible } : {};
+  const fullStyle = buildFrameStyle(props, parentDirection);
+  const { containerStyle, contentStyle } = splitScrollStyle(fullStyle);
+  let itemTemplate;
+  if (children.length === 1) {
+    itemTemplate = children[0];
+  } else if (children.length > 1) {
+    itemTemplate = { id: `${id}__template`, type: "view", props: {}, children };
+  }
+  const flatlistNode = {
+    id: hasSafeArea ? `${id}__list` : id,
+    type: "flatlist",
+    props: {
+      ...Object.keys(containerStyle).length ? { style: containerStyle } : {},
+      ...Object.keys(contentStyle).length ? { contentContainerStyle: contentStyle } : {},
+      // `data` holds the binding expression for the list items array.
+      // RecursiveRenderer resolves it and passes items to the FlatList primitive.
+      data: props.data,
+      keyExtractor: props.keyExtractor ?? "id",
+      ...listType === "grid" ? { numColumns: props.columns ?? 2 } : {},
+      ...listType === "grid" && props.columnGap ? { columnGap: props.columnGap } : {},
+      ...listType === "grid" && props.rowGap ? { rowGap: props.rowGap } : {},
+      horizontal: direction === "horizontal",
+      showsHorizontalScrollIndicator: props.showScrollIndicator === true,
+      showsVerticalScrollIndicator: props.showScrollIndicator === true,
+      ...resolveAccessibilityProps(props),
+      ...hasSafeArea ? {} : vis
+    },
+    ...itemTemplate ? { itemTemplate } : {}
+  };
+  if (!hasSafeArea) {
+    if (condition !== void 0) flatlistNode.if = condition;
+    if (actions) flatlistNode.actions = actions;
+    return flatlistNode;
+  }
+  const { outer: sizingStyle } = splitFrameStyle(fullStyle);
+  const savNode = {
+    id,
+    type: "safeareaview",
+    props: {
+      edges,
+      ...Object.keys(sizingStyle).length ? { style: sizingStyle } : {},
+      ...vis
+    },
+    children: [flatlistNode]
+  };
+  if (condition !== void 0) savNode.if = condition;
+  if (actions) savNode.actions = actions;
+  return savNode;
+}
+function transformIcon(id, raw) {
+  const { actions, condition } = extractMeta(raw);
+  const props = stripBridgeKeys(raw);
+  const style = {};
+  if (props.opacity !== void 0) style.opacity = props.opacity / 100;
+  Object.assign(style, resolvePositionRN(props));
+  const node = {
+    id,
+    type: "icon",
+    props: {
+      name: props.name,
+      set: props.set ?? "default",
+      size: props.size ?? 24,
+      ...props.color ? { color: props.color } : {},
+      ...Object.keys(style).length ? { style } : {},
+      ...resolveAccessibilityProps(props),
+      ...props.visible !== void 0 && props.visible !== true ? { visible: props.visible } : {}
+    }
+  };
+  if (condition !== void 0) node.if = condition;
+  if (actions) node.actions = actions;
+  return node;
+}
+function buildNodeFromSchema(nodeId, schema, customComponents, visited, parentId) {
+  if (visited.has(nodeId)) {
+    throw new Error(`Circular reference detected at node ${nodeId}`);
+  }
+  visited.add(nodeId);
+  const node = schema[nodeId];
+  if (!node) throw new Error(`Node not found: ${nodeId}`);
+  const resolvedName = node.type?.resolvedName;
+  if (!resolvedName) throw new Error(`Invalid node type at ${nodeId}`);
+  const raw = node.props ?? {};
+  const parentDirection = parentId ? schema[parentId]?.props?.["direction"] === "horizontal" ? "horizontal" : "vertical" : "vertical";
+  const outputId = nodeId === "ROOT" ? "root" : nodeId;
+  const childNodes = (node.nodes ?? []).map(
+    (childId) => buildNodeFromSchema(childId, schema, customComponents, visited, nodeId)
+  );
+  switch (resolvedName) {
+    case "PF.Screen":
+      return transformScreen(outputId, raw, childNodes);
+    case "PF.Frame":
+      return transformFrame(outputId, raw, childNodes, parentDirection);
+    case "PF.Text":
+      return transformText(outputId, raw, parentDirection);
+    case "PF.Image":
+      return transformImage(outputId, raw, childNodes, parentDirection);
+    case "PF.Input":
+      return transformInput(outputId, raw, parentDirection);
+    case "PF.List":
+      return transformList(outputId, raw, childNodes, parentDirection);
+    case "PF.Icon":
+      return transformIcon(outputId, raw);
+    case "Component":
+      return resolveCustomComponent(outputId, raw, parentDirection, customComponents);
+    default:
+      return { id: outputId, type: "view", props: {}, children: childNodes };
+  }
+}
+function resolveCustomComponent(id, raw, parentDirection, customComponents) {
+  const { actions, condition } = extractMeta(raw);
+  const props = stripBridgeKeys(raw);
+  const { componentId, componentKey, propValues, ...frameProps } = props;
+  const key = componentKey ?? componentId;
+  const def = key ? customComponents[key] : void 0;
+  const wrapperStyle = buildFrameStyle(frameProps, parentDirection);
+  const vis = props.visible !== void 0 && props.visible !== true ? { visible: props.visible } : {};
+  if (!def) {
+    return {
+      id,
+      type: "view",
+      props: { ...Object.keys(wrapperStyle).length ? { style: wrapperStyle } : {}, ...vis },
+      children: []
+    };
+  }
+  const componentVisited = /* @__PURE__ */ new Set();
+  const componentRoot = buildNodeFromSchema(
+    def.rootNodeId,
+    def.nodes,
+    customComponents,
+    componentVisited
+  );
+  if (propValues && Object.keys(propValues).length) {
+    componentRoot.props = { ...componentRoot.props, _propValues: propValues };
+  }
+  if (Object.keys(wrapperStyle).length > 0) {
+    const wrapper = {
+      id,
+      type: "view",
+      props: { style: wrapperStyle, ...vis },
+      children: [componentRoot]
+    };
+    if (condition !== void 0) wrapper.if = condition;
+    if (actions) wrapper.actions = actions;
+    return wrapper;
+  }
+  componentRoot.id = id;
+  componentRoot.props = { ...componentRoot.props, ...vis };
+  if (condition !== void 0) componentRoot.if = condition;
+  if (actions) componentRoot.actions = actions;
+  return componentRoot;
+}
+function transformCraftToSDUI(craftJson, customComponents = {}) {
+  if (!craftJson || typeof craftJson !== "object") {
+    throw new Error("Invalid craft schema");
+  }
+  const visited = /* @__PURE__ */ new Set();
+  return buildNodeFromSchema("ROOT", craftJson, customComponents, visited);
+}
+
 // src/index.ts
 var PushFrame = {
   // Slot components
@@ -753,6 +1521,6 @@ var PushFrame = {
   StatusBar
 };
 
-export { ActivityIndicator, ComponentRegistry, FlatList, Image, KeyboardAvoidingView, Modal, Pressable, PushFrame, PushFrameComponent, PushFrameContext, PushFrameProvider, PushFrameScreen, RecursiveRenderer, SafeAreaView, ScrollView, StatusBar, Switch, Text, TextInput, View, evaluateIf, resolveDeep, resolveProps, resolveValue, usePushFrameContext };
+export { ActivityIndicator, ComponentRegistry, FlatList, Image, KeyboardAvoidingView, Modal, Pressable, PushFrame, PushFrameComponent, PushFrameContext, PushFrameProvider, PushFrameScreen, RecursiveRenderer, SafeAreaView, ScrollView, StatusBar, Switch, Text, TextInput, View, evaluateIf, resolveDeep, resolveProps, resolveValue, transformCraftToSDUI, usePushFrameContext };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map