sdui-web 0.5.0 → 0.7.0

package/dist/react/index.js

@@ -0,0 +1,909 @@
+// src/react/SduiRenderer.tsx
+import { useEffect, useRef, useState } from "react";
+
+// src/utils.ts
+function resolveColor(color, theme) {
+  if (!color) return void 0;
+  if (theme === "dark") {
+    return color.dark ?? color.light;
+  }
+  return color.light ?? color.dark;
+}
+function resolveSize(size) {
+  if (!size || !size.unit) return void 0;
+  switch (size.unit) {
+    case "dp":
+      return `${size.value ?? 0}px`;
+    case "match_parent":
+      return "100%";
+    case "wrap_content":
+      return "fit-content";
+    default:
+      return void 0;
+  }
+}
+function resolveSpacing(spacing) {
+  if (!spacing) return {};
+  return {
+    top: spacing.top != null ? `${spacing.top}px` : void 0,
+    bottom: spacing.bottom != null ? `${spacing.bottom}px` : void 0,
+    left: spacing.start != null ? `${spacing.start}px` : void 0,
+    right: spacing.end != null ? `${spacing.end}px` : void 0
+  };
+}
+
+// src/modifiers.ts
+function applyModifier(element, modifier, theme) {
+  if (!modifier) return;
+  const s = element.style;
+  if (modifier.alignment) {
+    switch (modifier.alignment) {
+      // Single-axis (Column / Row children)
+      case "center":
+      case "center_horizontally":
+      case "center_vertically":
+        s.alignSelf = "center";
+        break;
+      case "start":
+      case "top":
+        s.alignSelf = "flex-start";
+        break;
+      case "end":
+      case "bottom":
+        s.alignSelf = "flex-end";
+        break;
+      // Two-axis (Box children — grid layout)
+      case "top_start":
+        s.alignSelf = "start";
+        s.justifySelf = "start";
+        break;
+      case "top_center":
+        s.alignSelf = "start";
+        s.justifySelf = "center";
+        break;
+      case "top_end":
+        s.alignSelf = "start";
+        s.justifySelf = "end";
+        break;
+      case "center_start":
+        s.alignSelf = "center";
+        s.justifySelf = "start";
+        break;
+      case "center_end":
+        s.alignSelf = "center";
+        s.justifySelf = "end";
+        break;
+      case "bottom_start":
+        s.alignSelf = "end";
+        s.justifySelf = "start";
+        break;
+      case "bottom_center":
+        s.alignSelf = "end";
+        s.justifySelf = "center";
+        break;
+      case "bottom_end":
+        s.alignSelf = "end";
+        s.justifySelf = "end";
+        break;
+    }
+  }
+  if (modifier.weight != null) {
+    s.flex = `${modifier.weight}`;
+    s.minWidth = "0";
+    s.minHeight = "0";
+  }
+  if (modifier.action) {
+    const action = modifier.action;
+    s.cursor = "pointer";
+    element.addEventListener("click", (e) => {
+      e.stopPropagation();
+      element.dispatchEvent(new CustomEvent("sdui:action", {
+        bubbles: true,
+        detail: { type: action.type, params: action.params }
+      }));
+    });
+  }
+  const mod = modifier;
+  const hasAspectRatio = "aspectRatio" in mod && mod.aspectRatio != null;
+  const hasWidth = "width" in mod && mod.width;
+  const hasHeight = "height" in mod && mod.height;
+  if (hasWidth) {
+    const w = resolveSize(mod.width);
+    if (w) s.width = w;
+  }
+  if (hasHeight && !(hasAspectRatio && hasWidth)) {
+    const h = resolveSize(mod.height);
+    if (h) s.height = h;
+  }
+  if (hasAspectRatio) {
+    s.aspectRatio = `${mod.aspectRatio}`;
+  }
+  if ("padding" in mod && mod.padding) {
+    const p = resolveSpacing(mod.padding);
+    if (p.top) s.paddingTop = p.top;
+    if (p.bottom) s.paddingBottom = p.bottom;
+    if (p.left) s.paddingLeft = p.left;
+    if (p.right) s.paddingRight = p.right;
+  }
+  if ("margin" in mod && mod.margin) {
+    const m = resolveSpacing(mod.margin);
+    if (m.top) s.marginTop = m.top;
+    if (m.bottom) s.marginBottom = m.bottom;
+    if (m.left) s.marginLeft = m.left;
+    if (m.right) s.marginRight = m.right;
+  }
+  if ("backgroundColor" in mod && mod.backgroundColor) {
+    applyBackground(s, mod.backgroundColor, theme);
+  }
+}
+function applyBackground(s, bg, theme) {
+  if (!bg.colors || bg.colors.length === 0) return;
+  const colors = bg.colors.map((c) => resolveColor(c, theme)).filter(Boolean);
+  if (colors.length === 0) return;
+  switch (bg.type) {
+    case "single":
+      s.backgroundColor = colors[0];
+      break;
+    case "vertical_gradient":
+      s.background = `linear-gradient(to bottom, ${colors.join(", ")})`;
+      break;
+    case "horizontal_gradient":
+      s.background = `linear-gradient(to right, ${colors.join(", ")})`;
+      break;
+    case "linear_gradient":
+      s.background = `linear-gradient(${colors.join(", ")})`;
+      break;
+    default:
+      if (colors.length === 1) {
+        s.backgroundColor = colors[0];
+      }
+      break;
+  }
+}
+
+// src/components/text.ts
+function renderText(component, theme) {
+  const props = component.properties;
+  const el = document.createElement("span");
+  el.textContent = props?.text ?? "";
+  if (props?.fontSize != null) {
+    el.style.fontSize = `${props.fontSize}px`;
+  }
+  if (props?.color) {
+    const c = resolveColor(props.color, theme);
+    if (c) el.style.color = c;
+  }
+  if (props?.fontWeight) {
+    switch (props.fontWeight) {
+      case "bold":
+        el.style.fontWeight = "700";
+        break;
+      case "semi_bold":
+        el.style.fontWeight = "600";
+        break;
+      case "medium":
+        el.style.fontWeight = "500";
+        break;
+      case "normal":
+        el.style.fontWeight = "400";
+        break;
+    }
+  }
+  if (props?.textAlign) {
+    el.style.display = "block";
+    switch (props.textAlign) {
+      case "left":
+      case "start":
+        el.style.textAlign = "left";
+        break;
+      case "right":
+      case "end":
+        el.style.textAlign = "right";
+        break;
+      case "center":
+        el.style.textAlign = "center";
+        break;
+      case "justify":
+        el.style.textAlign = "justify";
+        break;
+    }
+  }
+  if (props?.overflow === "ellipsis") {
+    el.style.textOverflow = "ellipsis";
+    el.style.overflow = "hidden";
+    el.style.whiteSpace = "nowrap";
+  }
+  if (props?.maxLines != null) {
+    el.style.display = "-webkit-box";
+    el.style.webkitLineClamp = `${props.maxLines}`;
+    el.style["-webkit-box-orient"] = "vertical";
+    el.style.overflow = "hidden";
+  }
+  if (props?.minLines != null) {
+    el.style.minHeight = `${props.minLines * (props.fontSize ?? 16) * 1.4}px`;
+  }
+  applyModifier(el, props?.modifier, theme);
+  return el;
+}
+
+// src/components/image.ts
+function renderImage(component, theme) {
+  const props = component.properties;
+  const el = document.createElement("img");
+  el.style.display = "block";
+  el.style.boxSizing = "border-box";
+  if (props?.image) {
+    el.src = props.image;
+  }
+  if (props?.contentDescription) {
+    el.alt = props.contentDescription;
+  }
+  switch (props?.scaleType) {
+    case "crop":
+      el.style.objectFit = "cover";
+      break;
+    case "fill_bounds":
+      el.style.objectFit = "fill";
+      break;
+    case "fill_width":
+      el.style.objectFit = "cover";
+      el.style.width = "100%";
+      break;
+    case "fill_height":
+      el.style.objectFit = "cover";
+      el.style.height = "100%";
+      break;
+    case "none":
+      el.style.objectFit = "none";
+      break;
+    default:
+      el.style.objectFit = "contain";
+      break;
+  }
+  if (props?.tintColor) {
+    const c = resolveColor(props.tintColor, theme);
+    if (c) {
+      el.style.filter = `opacity(0.5) drop-shadow(0 0 0 ${c})`;
+    }
+  }
+  if (props?.aspectRatio != null) {
+    el.style.aspectRatio = `${props.aspectRatio}`;
+  }
+  applyModifier(el, props?.modifier, theme);
+  return el;
+}
+
+// src/components/box.ts
+function renderBox(component, theme) {
+  const props = component.properties;
+  const el = document.createElement("div");
+  el.style.display = "grid";
+  el.style.position = "relative";
+  el.style.overflow = "hidden";
+  if (props?.contentAlignment) {
+    switch (props.contentAlignment) {
+      case "top_start":
+        el.style.justifyItems = "start";
+        el.style.alignItems = "start";
+        break;
+      case "top_center":
+        el.style.justifyItems = "center";
+        el.style.alignItems = "start";
+        break;
+      case "top_end":
+        el.style.justifyItems = "end";
+        el.style.alignItems = "start";
+        break;
+      case "center_start":
+        el.style.justifyItems = "start";
+        el.style.alignItems = "center";
+        break;
+      case "center":
+        el.style.justifyItems = "center";
+        el.style.alignItems = "center";
+        break;
+      case "center_end":
+        el.style.justifyItems = "end";
+        el.style.alignItems = "center";
+        break;
+      case "bottom_start":
+        el.style.justifyItems = "start";
+        el.style.alignItems = "end";
+        break;
+      case "bottom_center":
+        el.style.justifyItems = "center";
+        el.style.alignItems = "end";
+        break;
+      case "bottom_end":
+        el.style.justifyItems = "end";
+        el.style.alignItems = "end";
+        break;
+    }
+  }
+  applyModifier(el, props?.modifier, theme);
+  return el;
+}
+
+// src/components/column.ts
+function renderColumn(component, theme) {
+  const props = component.properties;
+  const el = document.createElement("div");
+  el.style.display = "flex";
+  el.style.flexDirection = "column";
+  if (props?.verticalArrangement) {
+    const arr = props.verticalArrangement;
+    switch (arr.type) {
+      case "top":
+        el.style.justifyContent = "flex-start";
+        break;
+      case "center":
+        el.style.justifyContent = "center";
+        break;
+      case "bottom":
+        el.style.justifyContent = "flex-end";
+        break;
+      case "space_between":
+        el.style.justifyContent = "space-between";
+        break;
+      case "space_evenly":
+        el.style.justifyContent = "space-evenly";
+        break;
+      case "space_around":
+        el.style.justifyContent = "space-around";
+        break;
+      case "spaced_by":
+        el.style.justifyContent = "flex-start";
+        if (arr.spacing != null) {
+          el.style.gap = `${arr.spacing}px`;
+        }
+        break;
+    }
+  }
+  if (props?.horizontalAlignment) {
+    switch (props.horizontalAlignment) {
+      case "start":
+        el.style.alignItems = "flex-start";
+        break;
+      case "end":
+        el.style.alignItems = "flex-end";
+        break;
+      case "center_horizontally":
+        el.style.alignItems = "center";
+        break;
+    }
+  }
+  if (props?.canScroll) {
+    el.style.overflowY = "auto";
+  }
+  applyModifier(el, props?.modifier, theme);
+  return el;
+}
+
+// src/components/row.ts
+function renderRow(component, theme) {
+  const props = component.properties;
+  const el = document.createElement("div");
+  el.style.display = "flex";
+  el.style.flexDirection = "row";
+  if (props?.horizontalArrangement) {
+    const arr = props.horizontalArrangement;
+    switch (arr.type) {
+      case "start":
+        el.style.justifyContent = "flex-start";
+        break;
+      case "center":
+        el.style.justifyContent = "center";
+        break;
+      case "end":
+        el.style.justifyContent = "flex-end";
+        break;
+      case "space_between":
+        el.style.justifyContent = "space-between";
+        break;
+      case "space_evenly":
+        el.style.justifyContent = "space-evenly";
+        break;
+      case "space_around":
+        el.style.justifyContent = "space-around";
+        break;
+      case "spaced_by":
+        el.style.justifyContent = "flex-start";
+        if (arr.spacing != null) {
+          el.style.gap = `${arr.spacing}px`;
+        }
+        break;
+    }
+  }
+  if (props?.verticalAlignment) {
+    switch (props.verticalAlignment) {
+      case "top":
+        el.style.alignItems = "flex-start";
+        break;
+      case "bottom":
+        el.style.alignItems = "flex-end";
+        break;
+      case "center_vertically":
+        el.style.alignItems = "center";
+        break;
+    }
+  }
+  if (props?.canScroll) {
+    el.style.overflowX = "auto";
+  }
+  applyModifier(el, props?.modifier, theme);
+  return el;
+}
+
+// src/components/lazy-column.ts
+function renderLazyColumn(component, theme) {
+  const props = component.properties;
+  const el = document.createElement("div");
+  el.style.display = "flex";
+  el.style.flexDirection = "column";
+  el.style.overflowY = "auto";
+  if (props?.verticalArrangement) {
+    const arr = props.verticalArrangement;
+    switch (arr.type) {
+      case "top":
+        el.style.justifyContent = "flex-start";
+        break;
+      case "center":
+        el.style.justifyContent = "center";
+        break;
+      case "bottom":
+        el.style.justifyContent = "flex-end";
+        break;
+      case "space_between":
+        el.style.justifyContent = "space-between";
+        break;
+      case "space_evenly":
+        el.style.justifyContent = "space-evenly";
+        break;
+      case "space_around":
+        el.style.justifyContent = "space-around";
+        break;
+      case "spaced_by":
+        el.style.justifyContent = "flex-start";
+        if (arr.spacing != null) {
+          el.style.gap = `${arr.spacing}px`;
+        }
+        break;
+    }
+  }
+  applyModifier(el, props?.modifier, theme);
+  return el;
+}
+
+// src/components/index.ts
+var renderers = {
+  text: renderText,
+  image: renderImage,
+  box: renderBox,
+  column: renderColumn,
+  row: renderRow,
+  lazy_column: renderLazyColumn
+};
+function getRenderer(type) {
+  return renderers[type];
+}
+
+// src/render.ts
+function renderComponent(component, theme) {
+  const renderer = getRenderer(component.type);
+  if (!renderer) {
+    console.warn(`[sdui] Unknown component type: "${component.type}"`);
+    const el2 = document.createElement("div");
+    el2.dataset.sduiUnknown = component.type;
+    return el2;
+  }
+  const el = renderer(component, theme);
+  el.dataset.sduiType = component.type;
+  if (component.__builderId) {
+    el.dataset.sduiId = component.__builderId;
+  }
+  if (component.children && component.children.length > 0) {
+    for (const child of component.children) {
+      el.appendChild(renderComponent(child, theme));
+    }
+  }
+  return el;
+}
+
+// src/component-meta.ts
+function sizeModelProperties() {
+  return [
+    { name: "value", label: "Value", type: "number" },
+    { name: "unit", label: "Unit", type: "enum", enumValues: ["dp", "match_parent", "wrap_content"] }
+  ];
+}
+function spacingModelProperties() {
+  return [
+    { name: "top", label: "Top", type: "number" },
+    { name: "bottom", label: "Bottom", type: "number" },
+    { name: "start", label: "Start", type: "number" },
+    { name: "end", label: "End", type: "number" }
+  ];
+}
+function colorModelProperties() {
+  return [
+    { name: "light", label: "Light", type: "color" },
+    { name: "dark", label: "Dark", type: "color" }
+  ];
+}
+function actionModelProperties() {
+  return [
+    { name: "type", label: "Action Type", type: "string" },
+    { name: "params", label: "Parameters", type: "object" }
+  ];
+}
+function backgroundColorModelProperties() {
+  return [
+    {
+      name: "type",
+      label: "Background Type",
+      type: "enum",
+      enumValues: ["single", "vertical_gradient", "horizontal_gradient", "linear_gradient"]
+    },
+    {
+      name: "colors",
+      label: "Colors",
+      type: "object",
+      isArray: true,
+      properties: colorModelProperties()
+    }
+  ];
+}
+function modifierBaseProperties() {
+  return [
+    {
+      name: "alignment",
+      label: "Alignment",
+      type: "enum",
+      enumValues: ["start", "end", "center", "center_horizontally", "center_vertically", "top", "bottom", "top_start", "top_center", "top_end", "center_start", "center_end", "bottom_start", "bottom_center", "bottom_end"]
+    },
+    { name: "weight", label: "Weight", type: "number" },
+    { name: "action", label: "Action", type: "object", properties: actionModelProperties() }
+  ];
+}
+function textModifierDescriptor() {
+  return {
+    name: "modifier",
+    label: "Modifier",
+    type: "object",
+    properties: [
+      ...modifierBaseProperties(),
+      { name: "width", label: "Width", type: "object", properties: sizeModelProperties() },
+      { name: "margin", label: "Margin", type: "object", properties: spacingModelProperties() }
+    ]
+  };
+}
+function imageModifierDescriptor() {
+  return {
+    name: "modifier",
+    label: "Modifier",
+    type: "object",
+    properties: [
+      ...modifierBaseProperties(),
+      { name: "width", label: "Width", type: "object", properties: sizeModelProperties() },
+      { name: "height", label: "Height", type: "object", properties: sizeModelProperties() },
+      { name: "padding", label: "Padding", type: "object", properties: spacingModelProperties() },
+      { name: "margin", label: "Margin", type: "object", properties: spacingModelProperties() }
+    ]
+  };
+}
+function containerModifierDescriptor() {
+  return {
+    name: "modifier",
+    label: "Modifier",
+    type: "object",
+    properties: [
+      ...modifierBaseProperties(),
+      { name: "backgroundColor", label: "Background Color", type: "object", properties: backgroundColorModelProperties() },
+      { name: "width", label: "Width", type: "object", properties: sizeModelProperties() },
+      { name: "height", label: "Height", type: "object", properties: sizeModelProperties() },
+      { name: "padding", label: "Padding", type: "object", properties: spacingModelProperties() },
+      { name: "margin", label: "Margin", type: "object", properties: spacingModelProperties() },
+      { name: "aspectRatio", label: "Aspect Ratio", type: "number" }
+    ]
+  };
+}
+function verticalArrangementDescriptor() {
+  return {
+    name: "verticalArrangement",
+    label: "Vertical Arrangement",
+    type: "object",
+    properties: [
+      {
+        name: "type",
+        label: "Type",
+        type: "enum",
+        enumValues: ["top", "center", "bottom", "space_evenly", "space_between", "space_around", "spaced_by"]
+      },
+      { name: "spacing", label: "Spacing", type: "number" }
+    ]
+  };
+}
+function horizontalArrangementDescriptor() {
+  return {
+    name: "horizontalArrangement",
+    label: "Horizontal Arrangement",
+    type: "object",
+    properties: [
+      {
+        name: "type",
+        label: "Type",
+        type: "enum",
+        enumValues: ["start", "center", "end", "space_between", "space_evenly", "space_around", "spaced_by"]
+      },
+      { name: "spacing", label: "Spacing", type: "number" }
+    ]
+  };
+}
+var COMPONENT_DEFINITIONS = [
+  {
+    type: "text",
+    label: "Text",
+    acceptsChildren: false,
+    properties: [
+      { name: "text", label: "Text", type: "string", required: true, defaultValue: "Text" },
+      { name: "fontSize", label: "Font Size", type: "number" },
+      { name: "color", label: "Color", type: "object", properties: colorModelProperties() },
+      { name: "fontWeight", label: "Font Weight", type: "enum", enumValues: ["bold", "medium", "normal", "semi_bold"] },
+      { name: "textAlign", label: "Text Align", type: "enum", enumValues: ["left", "right", "center", "justify", "start", "end", "unspecified"] },
+      { name: "overflow", label: "Overflow", type: "enum", enumValues: ["none", "ellipsis"] },
+      { name: "maxLines", label: "Max Lines", type: "number" },
+      { name: "minLines", label: "Min Lines", type: "number", defaultValue: 1 },
+      textModifierDescriptor()
+    ]
+  },
+  {
+    type: "image",
+    label: "Image",
+    acceptsChildren: false,
+    properties: [
+      { name: "image", label: "Image URL", type: "string", required: true },
+      { name: "scaleType", label: "Scale Type", type: "enum", enumValues: ["fit", "crop", "fill_height", "fill_width", "fill_bounds", "inside", "none"] },
+      { name: "contentDescription", label: "Content Description", type: "string" },
+      { name: "aspectRatio", label: "Aspect Ratio", type: "number" },
+      { name: "tintColor", label: "Tint Color", type: "object", properties: colorModelProperties() },
+      imageModifierDescriptor()
+    ]
+  },
+  {
+    type: "box",
+    label: "Box",
+    acceptsChildren: true,
+    properties: [
+      {
+        name: "contentAlignment",
+        label: "Content Alignment",
+        type: "enum",
+        enumValues: ["top_start", "top_center", "top_end", "center_start", "center", "center_end", "bottom_start", "bottom_center", "bottom_end"]
+      },
+      containerModifierDescriptor()
+    ]
+  },
+  {
+    type: "column",
+    label: "Column",
+    acceptsChildren: true,
+    properties: [
+      containerModifierDescriptor(),
+      verticalArrangementDescriptor(),
+      { name: "horizontalAlignment", label: "Horizontal Alignment", type: "enum", enumValues: ["start", "end", "center_horizontally"] },
+      { name: "canScroll", label: "Can Scroll", type: "boolean" }
+    ]
+  },
+  {
+    type: "row",
+    label: "Row",
+    acceptsChildren: true,
+    properties: [
+      containerModifierDescriptor(),
+      { name: "verticalAlignment", label: "Vertical Alignment", type: "enum", enumValues: ["top", "bottom", "center_vertically"] },
+      horizontalArrangementDescriptor(),
+      { name: "canScroll", label: "Can Scroll", type: "boolean" }
+    ]
+  },
+  {
+    type: "lazy_column",
+    label: "Lazy Column",
+    acceptsChildren: true,
+    properties: [
+      containerModifierDescriptor(),
+      verticalArrangementDescriptor()
+    ]
+  }
+];
+
+// src/index.ts
+function render(json, container, options) {
+  const screen = JSON.parse(json);
+  const theme = options?.theme ?? "light";
+  const root = renderComponent(screen.root, theme);
+  container.innerHTML = "";
+  container.appendChild(root);
+}
+
+// src/react/SduiRenderer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SduiRenderer({
+  json,
+  theme = "light",
+  deviceWidth,
+  deviceHeight,
+  filePreviewMap,
+  selectedId,
+  onClickNode,
+  onClickOutside,
+  className,
+  style
+}) {
+  const renderRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const [containerSize, setContainerSize] = useState({ w: 0, h: 0 });
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const { width, height } = entries[0].contentRect;
+      setContainerSize({ w: width, h: height });
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  useEffect(() => {
+    const el = renderRef.current;
+    if (!el) return;
+    try {
+      let renderJson = json;
+      if (filePreviewMap) {
+        for (const [fileName, blobUrl] of Object.entries(filePreviewMap)) {
+          renderJson = renderJson.replaceAll(JSON.stringify(fileName), JSON.stringify(blobUrl));
+        }
+      }
+      JSON.parse(renderJson);
+      setError(null);
+      render(renderJson, el, { theme });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Render error");
+      el.innerHTML = "";
+    }
+  }, [json, theme, filePreviewMap]);
+  useEffect(() => {
+    const el = renderRef.current;
+    if (!el) return;
+    el.querySelectorAll("[data-sdui-selected]").forEach((node) => {
+      node.removeAttribute("data-sdui-selected");
+    });
+    if (selectedId) {
+      const selected = el.querySelector(`[data-sdui-id="${selectedId}"]`);
+      if (selected) {
+        selected.setAttribute("data-sdui-selected", "true");
+      }
+    }
+  }, [selectedId, json]);
+  useEffect(() => {
+    const el = renderRef.current;
+    if (!el || !onClickNode) return;
+    function handleClick(e) {
+      e.stopPropagation();
+      const target = e.target.closest("[data-sdui-id]");
+      if (target) {
+        onClickNode(target.dataset.sduiId);
+      }
+    }
+    el.addEventListener("click", handleClick);
+    return () => el.removeEventListener("click", handleClick);
+  }, [onClickNode]);
+  const padding = 48;
+  const totalH = deviceHeight + 10;
+  const scaleW = containerSize.w > 0 && deviceWidth > containerSize.w - padding ? (containerSize.w - padding) / deviceWidth : 1;
+  const scaleH = containerSize.h > 0 && totalH > containerSize.h - padding ? (containerSize.h - padding) / totalH : 1;
+  const scale = Math.min(scaleW, scaleH, 1);
+  let rootScrollable = false;
+  try {
+    const parsed = JSON.parse(json);
+    const root = parsed.root;
+    if (root) {
+      rootScrollable = root.type === "lazy_column" || root.properties?.canScroll === true;
+    }
+  } catch {
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className,
+      style: {
+        flex: 1,
+        overflow: "hidden",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "flex-start",
+        padding: "24px 16px",
+        ...style
+      },
+      onClick: onClickOutside,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              position: "relative",
+              alignSelf: "flex-start",
+              width: `${deviceWidth}px`,
+              transform: scale < 1 ? `scale(${scale})` : void 0,
+              transformOrigin: "top center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    borderRadius: "36px",
+                    padding: "3px",
+                    background: "linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04))",
+                    boxShadow: "0 24px 80px rgba(0,0,0,0.5), 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06)"
+                  },
+                  children: /* @__PURE__ */ jsxs("div", { style: { borderRadius: "33px", overflow: "hidden", background: "#1c1c1e" }, children: [
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 24px", height: "28px" }, children: [
+                      /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", fontWeight: 600, color: "rgba(255,255,255,0.7)", fontFamily: "system-ui" }, children: "9:41" }),
+                      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+                        /* @__PURE__ */ jsxs("svg", { width: "14", height: "10", viewBox: "0 0 14 10", fill: "none", children: [
+                          /* @__PURE__ */ jsx("rect", { x: "0", y: "6", width: "2.5", height: "4", rx: "0.5", fill: "rgba(255,255,255,0.5)" }),
+                          /* @__PURE__ */ jsx("rect", { x: "3.8", y: "4", width: "2.5", height: "6", rx: "0.5", fill: "rgba(255,255,255,0.5)" }),
+                          /* @__PURE__ */ jsx("rect", { x: "7.6", y: "2", width: "2.5", height: "8", rx: "0.5", fill: "rgba(255,255,255,0.5)" }),
+                          /* @__PURE__ */ jsx("rect", { x: "11.4", y: "0", width: "2.5", height: "10", rx: "0.5", fill: "rgba(255,255,255,0.5)" })
+                        ] }),
+                        /* @__PURE__ */ jsxs("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", children: [
+                          /* @__PURE__ */ jsx("rect", { x: "0.5", y: "0.5", width: "16", height: "9", rx: "2", stroke: "rgba(255,255,255,0.4)", strokeWidth: "1" }),
+                          /* @__PURE__ */ jsx("rect", { x: "17", y: "3", width: "2", height: "4", rx: "0.5", fill: "rgba(255,255,255,0.3)" }),
+                          /* @__PURE__ */ jsx("rect", { x: "1.5", y: "1.5", width: "14", height: "7", rx: "1", fill: "rgba(255,255,255,0.5)" })
+                        ] })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", marginBottom: "4px" }, children: /* @__PURE__ */ jsx("div", { style: { width: "120px", height: "28px", background: "#000", borderRadius: "14px" } }) }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: renderRef,
+                        style: {
+                          background: theme === "dark" ? "#121212" : "#ffffff",
+                          color: theme === "dark" ? "#ffffff" : "#000000",
+                          height: `${deviceHeight - 60}px`,
+                          borderBottomLeftRadius: "33px",
+                          borderBottomRightRadius: "33px",
+                          overflow: rootScrollable ? "auto" : "hidden"
+                        }
+                      }
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", marginTop: "-18px", position: "relative", zIndex: 10 }, children: /* @__PURE__ */ jsx("div", { style: { width: "120px", height: "4px", background: "rgba(255,255,255,0.2)", borderRadius: "2px" } }) })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsx("div", { style: {
+          position: "absolute",
+          bottom: "24px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          width: "100%",
+          maxWidth: "375px",
+          padding: "12px",
+          borderRadius: "8px",
+          background: "rgba(239,68,68,0.1)",
+          border: "1px solid rgba(239,68,68,0.2)"
+        }, children: /* @__PURE__ */ jsx("p", { style: { fontSize: "13px", fontFamily: "monospace", color: "#ef4444", wordBreak: "break-all" }, children: error }) })
+      ]
+    }
+  );
+}
+export {
+  SduiRenderer
+};
+//# sourceMappingURL=index.js.map