sdui-web 0.1.0

package/dist/index.cjs

@@ -0,0 +1,506 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  render: () => render
+});
+module.exports = __toCommonJS(index_exports);
+
+// 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) {
+      case "center":
+      case "center_horizontally":
+      case "center_vertically":
+        s.alignSelf = "center";
+        break;
+      case "start":
+      case "top":
+      case "top_start":
+        s.alignSelf = "flex-start";
+        break;
+      case "end":
+      case "bottom":
+      case "bottom_end":
+        s.alignSelf = "flex-end";
+        break;
+    }
+  }
+  if (modifier.weight != null) {
+    s.flex = `${modifier.weight}`;
+  }
+  if (modifier.action) {
+    const action = modifier.action;
+    element.style.cursor = "pointer";
+    element.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (action.type === "navigate") {
+        const event = new CustomEvent("sdui:navigate", {
+          bubbles: true,
+          detail: { route: action.params?.route, args: action.params?.args }
+        });
+        element.dispatchEvent(event);
+        console.log("[sdui] navigate \u2192", action.params?.route, action.params?.args);
+      }
+    });
+  }
+  const containerMod = modifier;
+  if ("width" in containerMod && containerMod.width) {
+    const w = resolveSize(containerMod.width);
+    if (w) s.width = w;
+  }
+  if ("height" in containerMod && containerMod.height) {
+    const h = resolveSize(containerMod.height);
+    if (h) s.height = h;
+  }
+  if ("padding" in containerMod && containerMod.padding) {
+    const p = resolveSpacing(containerMod.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 containerMod && containerMod.margin) {
+    const m = resolveSpacing(containerMod.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 ("aspectRatio" in containerMod && containerMod.aspectRatio != null) {
+    s.aspectRatio = `${containerMod.aspectRatio}`;
+  }
+  if ("backgroundColor" in containerMod && containerMod.backgroundColor) {
+    applyBackground(s, containerMod.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 = props.maxLines === 1 ? "nowrap" : "normal";
+  }
+  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");
+  if (props?.image) {
+    el.src = props.image;
+  }
+  if (props?.contentDescription) {
+    el.alt = props.contentDescription;
+  }
+  if (props?.scaleType) {
+    switch (props.scaleType) {
+      case "fit":
+      case "inside":
+        el.style.objectFit = "contain";
+        break;
+      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;
+    }
+  }
+  if (props?.tintColor) {
+    const c = resolveColor(props.tintColor, theme);
+    if (c) {
+      el.style.filter = `opacity(0.5) drop-shadow(0 0 0 ${c})`;
+    }
+  }
+  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 = "flex";
+  el.style.position = "relative";
+  if (props?.alignment) {
+    switch (props.alignment) {
+      case "top_start":
+        el.style.justifyContent = "flex-start";
+        el.style.alignItems = "flex-start";
+        break;
+      case "top_center":
+        el.style.justifyContent = "center";
+        el.style.alignItems = "flex-start";
+        break;
+      case "top_end":
+        el.style.justifyContent = "flex-end";
+        el.style.alignItems = "flex-start";
+        break;
+      case "center_start":
+        el.style.justifyContent = "flex-start";
+        el.style.alignItems = "center";
+        break;
+      case "center":
+        el.style.justifyContent = "center";
+        el.style.alignItems = "center";
+        break;
+      case "center_end":
+        el.style.justifyContent = "flex-end";
+        el.style.alignItems = "center";
+        break;
+      case "bottom_start":
+        el.style.justifyContent = "flex-start";
+        el.style.alignItems = "flex-end";
+        break;
+      case "bottom_center":
+        el.style.justifyContent = "center";
+        el.style.alignItems = "flex-end";
+        break;
+      case "bottom_end":
+        el.style.justifyContent = "flex-end";
+        el.style.alignItems = "flex-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":
+        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":
+        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":
+        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.children && component.children.length > 0) {
+    for (const child of component.children) {
+      const childEl = renderComponent(child, theme);
+      el.appendChild(childEl);
+    }
+  }
+  return el;
+}
+
+// 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);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  render
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/utils.ts","../src/modifiers.ts","../src/components/text.ts","../src/components/image.ts","../src/components/box.ts","../src/components/column.ts","../src/components/row.ts","../src/components/lazy-column.ts","../src/components/index.ts","../src/render.ts"],"sourcesContent":["import type { SduiScreen, Theme } from './types';\nimport { renderComponent } from './render';\n\nexport type { SduiScreen, SduiComponent, Theme } from './types';\nexport type { PropertiesModel, TextUiProperties, ImageUiProperties, BoxUiProperties, ColumnUiProperties, RowUiProperties, LazyColumnUiProperties } from './types';\n\nexport interface RenderOptions {\n  theme?: Theme;\n}\n\nexport function render(json: string, container: HTMLElement, options?: RenderOptions): void {\n  const screen: SduiScreen = JSON.parse(json);\n  const theme: Theme = options?.theme ?? 'light';\n\n  const root = renderComponent(screen.root, theme);\n\n  container.innerHTML = '';\n  container.appendChild(root);\n}\n","import type { ColorModel, SizeModel, SpacingModel, Theme } from './types';\n\nexport function resolveColor(color: ColorModel | undefined, theme: Theme): string | undefined {\n  if (!color) return undefined;\n  if (theme === 'dark') {\n    return color.dark ?? color.light;\n  }\n  return color.light ?? color.dark;\n}\n\nexport function resolveSize(size: SizeModel | undefined): string | undefined {\n  if (!size || !size.unit) return undefined;\n  switch (size.unit) {\n    case 'dp':\n      return `${size.value ?? 0}px`;\n    case 'match_parent':\n      return '100%';\n    case 'wrap_content':\n      return 'fit-content';\n    default:\n      return undefined;\n  }\n}\n\nexport function resolveSpacing(spacing: SpacingModel | undefined): {\n  top?: string;\n  bottom?: string;\n  left?: string;\n  right?: string;\n} {\n  if (!spacing) return {};\n  return {\n    top: spacing.top != null ? `${spacing.top}px` : undefined,\n    bottom: spacing.bottom != null ? `${spacing.bottom}px` : undefined,\n    left: spacing.start != null ? `${spacing.start}px` : undefined,\n    right: spacing.end != null ? `${spacing.end}px` : undefined,\n  };\n}\n","import type { BackgroundColorModel, ContainerUiModifier, ImageUiModifier, ModifierBase, TextUiModifier, Theme } from './types';\nimport { resolveColor, resolveSize, resolveSpacing } from './utils';\n\nexport function applyModifier(element: HTMLElement, modifier: ModifierBase | undefined, theme: Theme): void {\n  if (!modifier) return;\n\n  const s = element.style;\n\n  // alignment → align-self mapping\n  if (modifier.alignment) {\n    switch (modifier.alignment) {\n      case 'center':\n      case 'center_horizontally':\n      case 'center_vertically':\n        s.alignSelf = 'center';\n        break;\n      case 'start':\n      case 'top':\n      case 'top_start':\n        s.alignSelf = 'flex-start';\n        break;\n      case 'end':\n      case 'bottom':\n      case 'bottom_end':\n        s.alignSelf = 'flex-end';\n        break;\n    }\n  }\n\n  // weight → flex\n  if (modifier.weight != null) {\n    s.flex = `${modifier.weight}`;\n  }\n\n  // action → click handler\n  if (modifier.action) {\n    const action = modifier.action;\n    element.style.cursor = 'pointer';\n    element.addEventListener('click', (e) => {\n      e.stopPropagation();\n      if (action.type === 'navigate') {\n        const event = new CustomEvent('sdui:navigate', {\n          bubbles: true,\n          detail: { route: action.params?.route, args: action.params?.args },\n        });\n        element.dispatchEvent(event);\n        console.log('[sdui] navigate →', action.params?.route, action.params?.args);\n      }\n    });\n  }\n\n  // Container-like modifiers (width, height, padding, margin, backgroundColor, aspectRatio)\n  const containerMod = modifier as ContainerUiModifier | ImageUiModifier | TextUiModifier;\n\n  if ('width' in containerMod && containerMod.width) {\n    const w = resolveSize(containerMod.width);\n    if (w) s.width = w;\n  }\n\n  if ('height' in containerMod && containerMod.height) {\n    const h = resolveSize((containerMod as ContainerUiModifier).height);\n    if (h) s.height = h;\n  }\n\n  if ('padding' in containerMod && containerMod.padding) {\n    const p = resolveSpacing((containerMod as ContainerUiModifier).padding);\n    if (p.top) s.paddingTop = p.top;\n    if (p.bottom) s.paddingBottom = p.bottom;\n    if (p.left) s.paddingLeft = p.left;\n    if (p.right) s.paddingRight = p.right;\n  }\n\n  if ('margin' in containerMod && containerMod.margin) {\n    const m = resolveSpacing(containerMod.margin);\n    if (m.top) s.marginTop = m.top;\n    if (m.bottom) s.marginBottom = m.bottom;\n    if (m.left) s.marginLeft = m.left;\n    if (m.right) s.marginRight = m.right;\n  }\n\n  if ('aspectRatio' in containerMod && containerMod.aspectRatio != null) {\n    s.aspectRatio = `${(containerMod as ContainerUiModifier).aspectRatio}`;\n  }\n\n  if ('backgroundColor' in containerMod && containerMod.backgroundColor) {\n    applyBackground(s, (containerMod as ContainerUiModifier).backgroundColor!, theme);\n  }\n}\n\nfunction applyBackground(s: CSSStyleDeclaration, bg: BackgroundColorModel, theme: Theme): void {\n  if (!bg.colors || bg.colors.length === 0) return;\n\n  const colors = bg.colors.map((c) => resolveColor(c, theme)).filter(Boolean) as string[];\n  if (colors.length === 0) return;\n\n  switch (bg.type) {\n    case 'single':\n      s.backgroundColor = colors[0];\n      break;\n    case 'vertical_gradient':\n      s.background = `linear-gradient(to bottom, ${colors.join(', ')})`;\n      break;\n    case 'horizontal_gradient':\n      s.background = `linear-gradient(to right, ${colors.join(', ')})`;\n      break;\n    case 'linear_gradient':\n      s.background = `linear-gradient(${colors.join(', ')})`;\n      break;\n    default:\n      if (colors.length === 1) {\n        s.backgroundColor = colors[0];\n      }\n      break;\n  }\n}\n","import type { SduiComponent, TextUiProperties, Theme } from '../types';\nimport { resolveColor } from '../utils';\nimport { applyModifier } from '../modifiers';\n\nexport function renderText(component: SduiComponent, theme: Theme): HTMLElement {\n  const props = component.properties as TextUiProperties | undefined;\n  const el = document.createElement('span');\n\n  el.textContent = props?.text ?? '';\n\n  if (props?.fontSize != null) {\n    el.style.fontSize = `${props.fontSize}px`;\n  }\n\n  if (props?.color) {\n    const c = resolveColor(props.color, theme);\n    if (c) el.style.color = c;\n  }\n\n  if (props?.fontWeight) {\n    switch (props.fontWeight) {\n      case 'bold':\n        el.style.fontWeight = '700';\n        break;\n      case 'semi_bold':\n        el.style.fontWeight = '600';\n        break;\n      case 'medium':\n        el.style.fontWeight = '500';\n        break;\n      case 'normal':\n        el.style.fontWeight = '400';\n        break;\n    }\n  }\n\n  if (props?.textAlign) {\n    el.style.display = 'block';\n    switch (props.textAlign) {\n      case 'left':\n      case 'start':\n        el.style.textAlign = 'left';\n        break;\n      case 'right':\n      case 'end':\n        el.style.textAlign = 'right';\n        break;\n      case 'center':\n        el.style.textAlign = 'center';\n        break;\n      case 'justify':\n        el.style.textAlign = 'justify';\n        break;\n    }\n  }\n\n  if (props?.overflow === 'ellipsis') {\n    el.style.textOverflow = 'ellipsis';\n    el.style.overflow = 'hidden';\n    el.style.whiteSpace = props.maxLines === 1 ? 'nowrap' : 'normal';\n  }\n\n  if (props?.maxLines != null) {\n    el.style.display = '-webkit-box';\n    el.style.webkitLineClamp = `${props.maxLines}`;\n    (el.style as unknown as Record<string, string>)['-webkit-box-orient'] = 'vertical';\n    el.style.overflow = 'hidden';\n  }\n\n  if (props?.minLines != null) {\n    el.style.minHeight = `${props.minLines * (props.fontSize ?? 16) * 1.4}px`;\n  }\n\n  applyModifier(el, props?.modifier, theme);\n\n  return el;\n}\n","import type { SduiComponent, ImageUiProperties, Theme } from '../types';\nimport { resolveColor } from '../utils';\nimport { applyModifier } from '../modifiers';\n\nexport function renderImage(component: SduiComponent, theme: Theme): HTMLElement {\n  const props = component.properties as ImageUiProperties | undefined;\n  const el = document.createElement('img');\n\n  if (props?.image) {\n    el.src = props.image;\n  }\n\n  if (props?.contentDescription) {\n    el.alt = props.contentDescription;\n  }\n\n  if (props?.scaleType) {\n    switch (props.scaleType) {\n      case 'fit':\n      case 'inside':\n        el.style.objectFit = 'contain';\n        break;\n      case 'crop':\n        el.style.objectFit = 'cover';\n        break;\n      case 'fill_bounds':\n        el.style.objectFit = 'fill';\n        break;\n      case 'fill_width':\n        el.style.objectFit = 'cover';\n        el.style.width = '100%';\n        break;\n      case 'fill_height':\n        el.style.objectFit = 'cover';\n        el.style.height = '100%';\n        break;\n      case 'none':\n        el.style.objectFit = 'none';\n        break;\n    }\n  }\n\n  if (props?.tintColor) {\n    const c = resolveColor(props.tintColor, theme);\n    if (c) {\n      // Use CSS filter to approximate tint; for precise tinting a SVG filter would be needed\n      el.style.filter = `opacity(0.5) drop-shadow(0 0 0 ${c})`;\n    }\n  }\n\n  applyModifier(el, props?.modifier, theme);\n\n  return el;\n}\n","import type { SduiComponent, BoxUiProperties, Theme } from '../types';\nimport { applyModifier } from '../modifiers';\n\nexport function renderBox(component: SduiComponent, theme: Theme): HTMLElement {\n  const props = component.properties as BoxUiProperties | undefined;\n  const el = document.createElement('div');\n\n  el.style.display = 'flex';\n  el.style.position = 'relative';\n\n  if (props?.alignment) {\n    // Map alignment to flex alignment\n    switch (props.alignment) {\n      case 'top_start':\n        el.style.justifyContent = 'flex-start';\n        el.style.alignItems = 'flex-start';\n        break;\n      case 'top_center':\n        el.style.justifyContent = 'center';\n        el.style.alignItems = 'flex-start';\n        break;\n      case 'top_end':\n        el.style.justifyContent = 'flex-end';\n        el.style.alignItems = 'flex-start';\n        break;\n      case 'center_start':\n        el.style.justifyContent = 'flex-start';\n        el.style.alignItems = 'center';\n        break;\n      case 'center':\n        el.style.justifyContent = 'center';\n        el.style.alignItems = 'center';\n        break;\n      case 'center_end':\n        el.style.justifyContent = 'flex-end';\n        el.style.alignItems = 'center';\n        break;\n      case 'bottom_start':\n        el.style.justifyContent = 'flex-start';\n        el.style.alignItems = 'flex-end';\n        break;\n      case 'bottom_center':\n        el.style.justifyContent = 'center';\n        el.style.alignItems = 'flex-end';\n        break;\n      case 'bottom_end':\n        el.style.justifyContent = 'flex-end';\n        el.style.alignItems = 'flex-end';\n        break;\n    }\n  }\n\n  applyModifier(el, props?.modifier, theme);\n\n  return el;\n}\n","import type { SduiComponent, ColumnUiProperties, Theme } from '../types';\nimport { applyModifier } from '../modifiers';\n\nexport function renderColumn(component: SduiComponent, theme: Theme): HTMLElement {\n  const props = component.properties as ColumnUiProperties | undefined;\n  const el = document.createElement('div');\n\n  el.style.display = 'flex';\n  el.style.flexDirection = 'column';\n\n  // verticalArrangement → justify-content + gap\n  if (props?.verticalArrangement) {\n    const arr = props.verticalArrangement;\n    switch (arr.type) {\n      case 'top':\n        el.style.justifyContent = 'flex-start';\n        break;\n      case 'center':\n        el.style.justifyContent = 'center';\n        break;\n      case 'bottom':\n        el.style.justifyContent = 'flex-end';\n        break;\n      case 'space_between':\n        el.style.justifyContent = 'space-between';\n        break;\n      case 'space_evenly':\n        el.style.justifyContent = 'space-evenly';\n        break;\n      case 'space_around':\n        el.style.justifyContent = 'space-around';\n        break;\n      case 'spaced_by':\n        if (arr.spacing != null) {\n          el.style.gap = `${arr.spacing}px`;\n        }\n        break;\n    }\n  }\n\n  // horizontalAlignment → align-items\n  if (props?.horizontalAlignment) {\n    switch (props.horizontalAlignment) {\n      case 'start':\n        el.style.alignItems = 'flex-start';\n        break;\n      case 'end':\n        el.style.alignItems = 'flex-end';\n        break;\n      case 'center_horizontally':\n        el.style.alignItems = 'center';\n        break;\n    }\n  }\n\n  if (props?.canScroll) {\n    el.style.overflowY = 'auto';\n  }\n\n  applyModifier(el, props?.modifier, theme);\n\n  return el;\n}\n","import type { SduiComponent, RowUiProperties, Theme } from '../types';\nimport { applyModifier } from '../modifiers';\n\nexport function renderRow(component: SduiComponent, theme: Theme): HTMLElement {\n  const props = component.properties as RowUiProperties | undefined;\n  const el = document.createElement('div');\n\n  el.style.display = 'flex';\n  el.style.flexDirection = 'row';\n\n  // horizontalArrangement → justify-content + gap\n  if (props?.horizontalArrangement) {\n    const arr = props.horizontalArrangement;\n    switch (arr.type) {\n      case 'start':\n        el.style.justifyContent = 'flex-start';\n        break;\n      case 'center':\n        el.style.justifyContent = 'center';\n        break;\n      case 'end':\n        el.style.justifyContent = 'flex-end';\n        break;\n      case 'space_between':\n        el.style.justifyContent = 'space-between';\n        break;\n      case 'space_evenly':\n        el.style.justifyContent = 'space-evenly';\n        break;\n      case 'space_around':\n        el.style.justifyContent = 'space-around';\n        break;\n      case 'spaced_by':\n        if (arr.spacing != null) {\n          el.style.gap = `${arr.spacing}px`;\n        }\n        break;\n    }\n  }\n\n  // verticalAlignment → align-items\n  if (props?.verticalAlignment) {\n    switch (props.verticalAlignment) {\n      case 'top':\n        el.style.alignItems = 'flex-start';\n        break;\n      case 'bottom':\n        el.style.alignItems = 'flex-end';\n        break;\n      case 'center_vertically':\n        el.style.alignItems = 'center';\n        break;\n    }\n  }\n\n  if (props?.canScroll) {\n    el.style.overflowX = 'auto';\n  }\n\n  applyModifier(el, props?.modifier, theme);\n\n  return el;\n}\n","import type { SduiComponent, LazyColumnUiProperties, Theme } from '../types';\nimport { applyModifier } from '../modifiers';\n\nexport function renderLazyColumn(component: SduiComponent, theme: Theme): HTMLElement {\n  const props = component.properties as LazyColumnUiProperties | undefined;\n  const el = document.createElement('div');\n\n  el.style.display = 'flex';\n  el.style.flexDirection = 'column';\n  el.style.overflowY = 'auto';\n\n  if (props?.verticalArrangement) {\n    const arr = props.verticalArrangement;\n    switch (arr.type) {\n      case 'top':\n        el.style.justifyContent = 'flex-start';\n        break;\n      case 'center':\n        el.style.justifyContent = 'center';\n        break;\n      case 'bottom':\n        el.style.justifyContent = 'flex-end';\n        break;\n      case 'space_between':\n        el.style.justifyContent = 'space-between';\n        break;\n      case 'space_evenly':\n        el.style.justifyContent = 'space-evenly';\n        break;\n      case 'space_around':\n        el.style.justifyContent = 'space-around';\n        break;\n      case 'spaced_by':\n        if (arr.spacing != null) {\n          el.style.gap = `${arr.spacing}px`;\n        }\n        break;\n    }\n  }\n\n  applyModifier(el, props?.modifier, theme);\n\n  return el;\n}\n","import type { SduiComponent, Theme } from '../types';\nimport { renderText } from './text';\nimport { renderImage } from './image';\nimport { renderBox } from './box';\nimport { renderColumn } from './column';\nimport { renderRow } from './row';\nimport { renderLazyColumn } from './lazy-column';\n\nexport type ComponentRenderer = (component: SduiComponent, theme: Theme) => HTMLElement;\n\nconst renderers: Record<string, ComponentRenderer> = {\n  text: renderText,\n  image: renderImage,\n  box: renderBox,\n  column: renderColumn,\n  row: renderRow,\n  lazy_column: renderLazyColumn,\n};\n\nexport function getRenderer(type: string): ComponentRenderer | undefined {\n  return renderers[type];\n}\n","import type { SduiComponent, Theme } from './types';\nimport { getRenderer } from './components';\n\nexport function renderComponent(component: SduiComponent, theme: Theme): HTMLElement {\n  const renderer = getRenderer(component.type);\n\n  if (!renderer) {\n    console.warn(`[sdui] Unknown component type: \"${component.type}\"`);\n    const el = document.createElement('div');\n    el.dataset.sduiUnknown = component.type;\n    return el;\n  }\n\n  const el = renderer(component, theme);\n  el.dataset.sduiType = component.type;\n\n  // Recursively render children\n  if (component.children && component.children.length > 0) {\n    for (const child of component.children) {\n      const childEl = renderComponent(child, theme);\n      el.appendChild(childEl);\n    }\n  }\n\n  return el;\n}\n"],"mappings":"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","names":["el"]}