@wireweave/core 1.1.0-beta.0 → 1.2.0-beta.0

package/dist/renderer.cjs

@@ -21,9 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var renderer_exports = {};
 __export(renderer_exports, {
   HtmlRenderer: () => HtmlRenderer,
-  SvgRenderer: () => SvgRenderer,
   createHtmlRenderer: () => createHtmlRenderer,
-  createSvgRenderer: () => createSvgRenderer,
   darkTheme: () => darkTheme,
   defaultTheme: () => defaultTheme,
   generateComponentStyles: () => generateComponentStyles,
@@ -34,8 +32,7 @@ __export(renderer_exports, {
   render: () => render,
   renderIconSvg: () => renderIconSvg,
   renderToHtml: () => renderToHtml,
-  renderToPureSvg: () => renderToPureSvg,
-  renderToSvg: () => renderToSvg2
+  renderToSvg: () => renderToSvg
 });
 module.exports = __toCommonJS(renderer_exports);
 
@@ -92,23 +89,7 @@ function getTheme(name) {
   return name === "dark" ? darkTheme : defaultTheme;
 }
 
-// src/renderer/styles-components.ts
-function generateComponentStyles(_theme, prefix = "wf") {
-  const parts = [
-    generateContainerStyles(prefix),
-    generateTextStyles(prefix),
-    generateInputStyles(_theme, prefix),
-    generateButtonStyles(_theme, prefix),
-    generateDisplayStyles(_theme, prefix),
-    generateDataStyles(_theme, prefix),
-    generateFeedbackStyles(_theme, prefix),
-    generateOverlayStyles(_theme, prefix),
-    generateNavigationStyles(_theme, prefix),
-    generateSemanticMarkerStyles(_theme, prefix),
-    generateAccessibilityStyles(prefix)
-  ];
-  return parts.join("\n\n");
-}
+// src/renderer/styles/container.ts
 function generateContainerStyles(prefix) {
   return `/* Container Components */
 .${prefix}-card {
@@ -248,6 +229,8 @@ function generateContainerStyles(prefix) {
   padding: 16px;
 }`;
 }
+
+// src/renderer/styles/text.ts
 function generateTextStyles(prefix) {
   return `/* Text Components */
 .${prefix}-text {
@@ -304,6 +287,8 @@ h6.${prefix}-title { font-size: 16px; }
   opacity: 0.7;
 }`;
 }
+
+// src/renderer/styles/input.ts
 function generateInputStyles(_theme, prefix) {
   return `/* Input Components */
 .${prefix}-form-field {
@@ -503,6 +488,8 @@ function generateInputStyles(_theme, prefix) {
   cursor: pointer;
 }`;
 }
+
+// src/renderer/styles/button.ts
 function generateButtonStyles(_theme, prefix) {
   return `/* Button Components */
 .${prefix}-button {
@@ -630,6 +617,8 @@ function generateButtonStyles(_theme, prefix) {
 .${prefix}-button.${prefix}-justify-end { justify-content: flex-end; }
 .${prefix}-button.${prefix}-justify-between { justify-content: space-between; }`;
 }
+
+// src/renderer/styles/display.ts
 function generateDisplayStyles(_theme, prefix) {
   return `/* Display Components */
 .${prefix}-image {
@@ -837,6 +826,8 @@ svg.${prefix}-icon-xl { width: 32px; height: 32px; }
   justify-content: center;
 }`;
 }
+
+// src/renderer/styles/data.ts
 function generateDataStyles(_theme, prefix) {
   return `/* Data Components */
 .${prefix}-table {
@@ -895,6 +886,8 @@ function generateDataStyles(_theme, prefix) {
   border-bottom: none;
 }`;
 }
+
+// src/renderer/styles/feedback.ts
 function generateFeedbackStyles(_theme, prefix) {
   return `/* Feedback Components */
 .${prefix}-alert {
@@ -986,6 +979,8 @@ function generateFeedbackStyles(_theme, prefix) {
   to { transform: rotate(360deg); }
 }`;
 }
+
+// src/renderer/styles/overlay.ts
 function generateOverlayStyles(_theme, prefix) {
   return `/* Overlay Components */
 .${prefix}-tooltip-wrapper {
@@ -1084,6 +1079,8 @@ function generateOverlayStyles(_theme, prefix) {
   cursor: not-allowed;
 }`;
 }
+
+// src/renderer/styles/navigation.ts
 function generateNavigationStyles(_theme, prefix) {
   return `/* Navigation Components */
 .${prefix}-nav {
@@ -1196,6 +1193,8 @@ function generateNavigationStyles(_theme, prefix) {
   color: var(--${prefix}-muted);
 }`;
 }
+
+// src/renderer/styles/semantic.ts
 function generateSemanticMarkerStyles(_theme, prefix) {
   return `/* Semantic Markers */
 
@@ -1282,6 +1281,8 @@ function generateSemanticMarkerStyles(_theme, prefix) {
   color: var(--${prefix}-muted);
 }`;
 }
+
+// src/renderer/styles/accessibility.ts
 function generateAccessibilityStyles(prefix) {
   return `/* Accessibility Utilities */
 .sr-only {
@@ -1319,6 +1320,24 @@ function generateAccessibilityStyles(prefix) {
 }`;
 }
 
+// src/renderer/styles-components.ts
+function generateComponentStyles(_theme, prefix = "wf") {
+  const parts = [
+    generateContainerStyles(prefix),
+    generateTextStyles(prefix),
+    generateInputStyles(_theme, prefix),
+    generateButtonStyles(_theme, prefix),
+    generateDisplayStyles(_theme, prefix),
+    generateDataStyles(_theme, prefix),
+    generateFeedbackStyles(_theme, prefix),
+    generateOverlayStyles(_theme, prefix),
+    generateNavigationStyles(_theme, prefix),
+    generateSemanticMarkerStyles(_theme, prefix),
+    generateAccessibilityStyles(prefix)
+  ];
+  return parts.join("\n\n");
+}
+
 // src/renderer/styles.ts
 function generateStyles(theme, prefix = "wf") {
   const parts = [
@@ -1602,6 +1621,7 @@ function generateLayoutClasses(prefix) {
   padding: 16px;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 }
 
 /* Scrollable main content */
@@ -1610,6 +1630,11 @@ function generateLayoutClasses(prefix) {
   overflow-x: hidden;
 }
 
+/* Col containing scrollable main needs min-height: 0 for scroll to work */
+.${prefix}-col:has(> .${prefix}-main.${prefix}-scroll) {
+  min-height: 0;
+}
+
 /* Main content should align to top, not stretch to fill */
 /* But allow explicit flex=1 to override */
 .${prefix}-main > .${prefix}-col:not(.${prefix}-flex-1) {
@@ -1844,6 +1869,248 @@ function resolveViewport(viewport, device) {
   return DEFAULT_VIEWPORT;
 }
 
+// src/renderer/html/components.ts
+function buildClassString(classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var SIZE_TOKENS = {
+  icon: { xs: 12, sm: 14, md: 16, lg: 20, xl: 24 },
+  avatar: { xs: 24, sm: 32, md: 40, lg: 48, xl: 64 },
+  spinner: { xs: 12, sm: 16, md: 24, lg: 32, xl: 48 }
+};
+function resolveSizeValue(size, componentType, prefix) {
+  if (size === void 0) {
+    return {};
+  }
+  if (typeof size === "string") {
+    const tokens = SIZE_TOKENS[componentType];
+    if (size in tokens) {
+      return { className: `${prefix}-${componentType}-${size}` };
+    }
+    const parsed = parseInt(size, 10);
+    if (!isNaN(parsed)) {
+      return { style: `width: ${parsed}px; height: ${parsed}px;` };
+    }
+    return {};
+  }
+  if (typeof size === "number") {
+    return { style: `width: ${size}px; height: ${size}px;` };
+  }
+  return {};
+}
+
+// src/renderer/html/renderers/layout.ts
+function renderHeader(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-header`,
+    node.border === false ? `${ctx.prefix}-no-border` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<header class="${classes}"${styleAttr}>
+${children}
+</header>`;
+}
+function renderMain(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-main`,
+    node.scroll ? `${ctx.prefix}-scroll` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<main class="${classes}"${styleAttr}>
+${children}
+</main>`;
+}
+function renderFooter(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-footer`,
+    node.border === false ? `${ctx.prefix}-no-border` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<footer class="${classes}"${styleAttr}>
+${children}
+</footer>`;
+}
+function renderSidebar(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-sidebar`,
+    node.position === "right" ? `${ctx.prefix}-sidebar-right` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<aside class="${classes}"${styleAttr}>
+${children}
+</aside>`;
+}
+function renderSection(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-section`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const title = node.title ? `<h2 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h2>
+` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<section class="${classes}"${styleAttr}>
+${title}${children}
+</section>`;
+}
+
+// src/renderer/html/renderers/grid.ts
+function renderRow(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-row`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<div class="${classes}"${styleAttr}>
+${children}
+</div>`;
+}
+function renderCol(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-col`,
+    node.span ? `${ctx.prefix}-col-${node.span}` : void 0,
+    // Responsive breakpoint classes
+    node.sm ? `${ctx.prefix}-col-sm-${node.sm}` : void 0,
+    node.md ? `${ctx.prefix}-col-md-${node.md}` : void 0,
+    node.lg ? `${ctx.prefix}-col-lg-${node.lg}` : void 0,
+    node.xl ? `${ctx.prefix}-col-xl-${node.xl}` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildColStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<div class="${classes}"${styleAttr}>
+${children}
+</div>`;
+}
+
+// src/renderer/html/renderers/container.ts
+function renderCard(node, ctx) {
+  const hasExplicitWidth = node.w !== void 0;
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-card`,
+    !hasExplicitWidth ? `${ctx.prefix}-card-flex` : void 0,
+    node.shadow ? `${ctx.prefix}-card-shadow-${node.shadow}` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const title = node.title ? `<h3 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h3>
+` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<div class="${classes}"${styleAttr}>
+${title}${children}
+</div>`;
+}
+function renderModal(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-modal`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const title = node.title ? `<h2 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h2>
+` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<div class="${ctx.prefix}-modal-backdrop">
+  <div class="${classes}"${styleAttr} role="dialog" aria-modal="true">
+${title}${children}
+  </div>
+</div>`;
+}
+function renderDrawer(node, ctx) {
+  const position = node.position || "left";
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-drawer`,
+    `${ctx.prefix}-drawer-${position}`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const title = node.title ? `<h2 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h2>
+` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<aside class="${classes}"${styleAttr}>
+${title}${children}
+</aside>`;
+}
+function renderAccordion(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-accordion`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const title = node.title ? `<button class="${ctx.prefix}-accordion-header">${ctx.escapeHtml(node.title)}</button>
+` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<div class="${classes}"${styleAttr}>
+${title}<div class="${ctx.prefix}-accordion-content">
+${children}
+</div>
+</div>`;
+}
+
+// src/renderer/html/renderers/text.ts
+function renderText(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-text`,
+    node.size ? `${ctx.prefix}-text-${node.size}` : void 0,
+    node.weight ? `${ctx.prefix}-text-${node.weight}` : void 0,
+    node.align ? `${ctx.prefix}-text-${node.align}` : void 0,
+    node.muted ? `${ctx.prefix}-text-muted` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  return `<p class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</p>`;
+}
+function renderTitle(node, ctx) {
+  const level = node.level || 1;
+  const tag = `h${level}`;
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-title`,
+    node.size ? `${ctx.prefix}-text-${node.size}` : void 0,
+    node.align ? `${ctx.prefix}-text-${node.align}` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  return `<${tag} class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</${tag}>`;
+}
+function renderLink(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-link`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const attrs = {
+    class: classes,
+    href: node.href || "#"
+  };
+  if (node.external) {
+    attrs.target = "_blank";
+    attrs.rel = "noopener noreferrer";
+  }
+  return `<a${ctx.buildAttrsString(attrs)}${styleAttr}>${ctx.escapeHtml(node.content)}</a>`;
+}
+
 // src/icons/lucide-icons.ts
 var lucideIcons = {
   "a-arrow-down": [
@@ -48243,34 +48510,658 @@ function renderIconSvg(data, _size = 24, strokeWidth = 2, className = "", styleA
   return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round" class="${className}"${styleAttr}>${elements}</svg>`;
 }
 
-// src/renderer/html/components.ts
-function buildClassString(classes) {
-  return classes.filter(Boolean).join(" ");
+// src/renderer/html/renderers/button.ts
+function renderButton(node, ctx) {
+  const isIconOnly = node.icon && (!node.content.trim() || node.content === "Button");
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-button`,
+    node.primary ? `${ctx.prefix}-button-primary` : void 0,
+    node.secondary ? `${ctx.prefix}-button-secondary` : void 0,
+    node.outline ? `${ctx.prefix}-button-outline` : void 0,
+    node.ghost ? `${ctx.prefix}-button-ghost` : void 0,
+    node.danger ? `${ctx.prefix}-button-danger` : void 0,
+    node.size ? `${ctx.prefix}-button-${node.size}` : void 0,
+    node.disabled ? `${ctx.prefix}-button-disabled` : void 0,
+    node.loading ? `${ctx.prefix}-button-loading` : void 0,
+    isIconOnly ? `${ctx.prefix}-button-icon-only` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const attrs = {
+    class: classes,
+    disabled: node.disabled
+  };
+  let icon = "";
+  if (node.icon) {
+    const iconData = getIconData(node.icon);
+    if (iconData) {
+      icon = renderIconSvg(iconData, 16, 2, `${ctx.prefix}-icon`);
+    } else {
+      icon = `<span class="${ctx.prefix}-icon">[${ctx.escapeHtml(node.icon)}]</span>`;
+    }
+  }
+  const loading = node.loading ? `<span class="${ctx.prefix}-spinner ${ctx.prefix}-spinner-sm"></span>` : "";
+  const content = isIconOnly ? "" : ctx.escapeHtml(node.content);
+  return `<button${ctx.buildAttrsString(attrs)}${styleAttr}>${loading}${icon}${content}</button>`;
 }
-var SIZE_TOKENS = {
-  icon: { xs: 12, sm: 14, md: 16, lg: 20, xl: 24 },
-  avatar: { xs: 24, sm: 32, md: 40, lg: 48, xl: 64 },
-  spinner: { xs: 12, sm: 16, md: 24, lg: 32, xl: 48 }
-};
-function resolveSizeValue(size, componentType, prefix) {
-  if (size === void 0) {
-    return {};
+
+// src/renderer/html/renderers/feedback.ts
+function renderAlert(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-alert`,
+    node.variant ? `${ctx.prefix}-alert-${node.variant}` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const dismissBtn = node.dismissible ? ` <button class="${ctx.prefix}-alert-close" aria-label="Close">&times;</button>` : "";
+  return `<div class="${classes}"${styleAttr} role="alert">${ctx.escapeHtml(node.content)}${dismissBtn}</div>`;
+}
+function renderToast(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-toast`,
+    node.position ? `${ctx.prefix}-toast-${node.position}` : void 0,
+    node.variant ? `${ctx.prefix}-toast-${node.variant}` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  return `<div class="${classes}"${styleAttr} role="status">${ctx.escapeHtml(node.content)}</div>`;
+}
+function renderProgress(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-progress`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const value = node.value || 0;
+  const max = node.max || 100;
+  const percentage = Math.round(value / max * 100);
+  const label = node.label ? `<span class="${ctx.prefix}-progress-label">${ctx.escapeHtml(node.label)}</span>` : "";
+  if (node.indeterminate) {
+    return `<div class="${classes} ${ctx.prefix}-progress-indeterminate"${styleAttr} role="progressbar">${label}</div>`;
   }
-  if (typeof size === "string") {
-    const tokens = SIZE_TOKENS[componentType];
-    if (size in tokens) {
-      return { className: `${prefix}-${componentType}-${size}` };
+  return `<div class="${classes}"${styleAttr} role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="${max}">
+  ${label}
+  <div class="${ctx.prefix}-progress-bar" style="width: ${percentage}%"></div>
+</div>`;
+}
+function renderSpinner(node, ctx) {
+  const sizeResolved = resolveSizeValue(node.size, "spinner", ctx.prefix);
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-spinner`,
+    sizeResolved.className,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const baseStyles = ctx.buildCommonStyles(node);
+  const sizeStyle = sizeResolved.style || "";
+  const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
+  const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
+  const label = node.label || "Loading...";
+  return `<span class="${classes}"${styleAttr} role="status" aria-label="${ctx.escapeHtml(label)}"></span>`;
+}
+
+// src/renderer/html/renderers/input.ts
+function renderInput(node, ctx) {
+  const inputClasses = ctx.buildClassString([
+    `${ctx.prefix}-input`,
+    node.icon ? `${ctx.prefix}-input-with-icon` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const attrs = {
+    class: inputClasses,
+    type: node.inputType || "text",
+    placeholder: node.placeholder,
+    value: node.value,
+    disabled: node.disabled,
+    required: node.required,
+    readonly: node.readonly
+  };
+  const inputElement = `<input${ctx.buildAttrsString(attrs)} />`;
+  if (node.icon) {
+    const iconData = getIconData(node.icon);
+    let iconHtml;
+    if (iconData) {
+      iconHtml = renderIconSvg(iconData, 16, 2, `${ctx.prefix}-input-icon`);
+    } else {
+      iconHtml = `<span class="${ctx.prefix}-input-icon">[${ctx.escapeHtml(node.icon)}]</span>`;
     }
-    const parsed = parseInt(size, 10);
-    if (!isNaN(parsed)) {
-      return { style: `width: ${parsed}px; height: ${parsed}px;` };
+    const wrapperClasses = ctx.buildClassString([`${ctx.prefix}-input-wrapper`]);
+    const wrapper = `<div class="${wrapperClasses}"${styleAttr}>${iconHtml}${inputElement}</div>`;
+    const shouldShowLabel = node.label && !(node.label === "Label" && node.placeholder);
+    if (shouldShowLabel) {
+      return `<label class="${ctx.prefix}-input-label">${ctx.escapeHtml(node.label)}</label>
+${wrapper}`;
     }
-    return {};
+    return wrapper;
   }
-  if (typeof size === "number") {
-    return { style: `width: ${size}px; height: ${size}px;` };
+  const input = `<input${ctx.buildAttrsString(attrs)}${styleAttr} />`;
+  const shouldShowLabel2 = node.label && !(node.label === "Label" && node.placeholder);
+  if (shouldShowLabel2) {
+    return `<label class="${ctx.prefix}-input-label">${ctx.escapeHtml(node.label)}</label>
+${input}`;
   }
-  return {};
+  return input;
+}
+function renderTextarea(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-input`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const attrs = {
+    class: classes,
+    placeholder: node.placeholder,
+    disabled: node.disabled,
+    required: node.required,
+    rows: node.rows?.toString()
+  };
+  const textarea = `<textarea${ctx.buildAttrsString(attrs)}${styleAttr}>${ctx.escapeHtml(node.value || "")}</textarea>`;
+  if (node.label) {
+    return `<label class="${ctx.prefix}-input-label">${ctx.escapeHtml(node.label)}</label>
+${textarea}`;
+  }
+  return textarea;
+}
+function renderSelect(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-input`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const attrs = {
+    class: classes,
+    disabled: node.disabled,
+    required: node.required
+  };
+  const options = node.options.map((opt) => {
+    if (typeof opt === "string") {
+      const selected2 = opt === node.value ? " selected" : "";
+      return `<option value="${ctx.escapeHtml(opt)}"${selected2}>${ctx.escapeHtml(opt)}</option>`;
+    }
+    const selected = opt.value === node.value ? " selected" : "";
+    return `<option value="${ctx.escapeHtml(opt.value)}"${selected}>${ctx.escapeHtml(opt.label)}</option>`;
+  }).join("\n");
+  const placeholder = node.placeholder ? `<option value="" disabled selected>${ctx.escapeHtml(node.placeholder)}</option>
+` : "";
+  const select = `<select${ctx.buildAttrsString(attrs)}${styleAttr}>
+${placeholder}${options}
+</select>`;
+  if (node.label) {
+    return `<label class="${ctx.prefix}-input-label">${ctx.escapeHtml(node.label)}</label>
+${select}`;
+  }
+  return select;
+}
+function renderCheckbox(node, ctx) {
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const attrs = {
+    type: "checkbox",
+    checked: node.checked,
+    disabled: node.disabled
+  };
+  const checkbox = `<input${ctx.buildAttrsString(attrs)} />`;
+  if (node.label) {
+    return `<label class="${ctx.prefix}-checkbox"${styleAttr}>${checkbox}<span>${ctx.escapeHtml(node.label)}</span></label>`;
+  }
+  return checkbox;
+}
+function renderRadio(node, ctx) {
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const attrs = {
+    type: "radio",
+    name: node.name,
+    checked: node.checked,
+    disabled: node.disabled
+  };
+  const radio = `<input${ctx.buildAttrsString(attrs)} />`;
+  if (node.label) {
+    return `<label class="${ctx.prefix}-radio"${styleAttr}>${radio}<span>${ctx.escapeHtml(node.label)}</span></label>`;
+  }
+  return radio;
+}
+function renderSwitch(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-switch`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const attrs = {
+    type: "checkbox",
+    role: "switch",
+    checked: node.checked,
+    disabled: node.disabled
+  };
+  const switchEl = `<input${ctx.buildAttrsString(attrs)} />`;
+  if (node.label) {
+    return `<label class="${classes}"${styleAttr}>${switchEl} ${ctx.escapeHtml(node.label)}</label>`;
+  }
+  return `<label class="${classes}"${styleAttr}>${switchEl}</label>`;
+}
+function renderSlider(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-slider`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const attrs = {
+    class: classes,
+    type: "range",
+    min: node.min?.toString(),
+    max: node.max?.toString(),
+    step: node.step?.toString(),
+    value: node.value?.toString(),
+    disabled: node.disabled
+  };
+  const slider = `<input${ctx.buildAttrsString(attrs)}${styleAttr} />`;
+  if (node.label) {
+    return `<label class="${ctx.prefix}-input-label">${ctx.escapeHtml(node.label)}</label>
+${slider}`;
+  }
+  return slider;
+}
+
+// src/renderer/html/renderers/display.ts
+function renderImage(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-image`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  if (node.src) {
+    const attrs = {
+      class: classes,
+      src: node.src,
+      alt: node.alt || "Image"
+    };
+    const imgStyleAttr = styles ? `; ${styles}` : "";
+    return `<img${ctx.buildAttrsString(attrs)}${imgStyleAttr ? ` style="${imgStyleAttr.slice(2)}"` : ""} />`;
+  }
+  const label = node.alt || "Image";
+  const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
+  return `<div class="${classes}"${styleAttr} role="img" aria-label="${ctx.escapeHtml(label)}">${icon}<span>${ctx.escapeHtml(label)}</span></div>`;
+}
+function renderPlaceholder(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-placeholder`,
+    node.children && node.children.length > 0 ? `${ctx.prefix}-placeholder-with-children` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const label = node.label ? ctx.escapeHtml(node.label) : "Placeholder";
+  if (node.children && node.children.length > 0) {
+    const childrenHtml = ctx.renderChildren(node.children);
+    return `<div class="${classes}"${styleAttr}>
+  <span class="${ctx.prefix}-placeholder-label">${label}</span>
+  <div class="${ctx.prefix}-placeholder-overlay">${childrenHtml}</div>
+</div>`;
+  }
+  return `<div class="${classes}"${styleAttr}>${label}</div>`;
+}
+function renderAvatar(node, ctx) {
+  const sizeResolved = resolveSizeValue(node.size, "avatar", ctx.prefix);
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-avatar`,
+    sizeResolved.className,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const baseStyles = ctx.buildCommonStyles(node);
+  const sizeStyle = sizeResolved.style || "";
+  const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
+  const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
+  const initials = node.name ? node.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "?";
+  return `<div class="${classes}"${styleAttr} role="img" aria-label="${ctx.escapeHtml(node.name || "Avatar")}">${initials}</div>`;
+}
+function renderBadge(node, ctx) {
+  if (node.icon) {
+    const iconData = getIconData(node.icon);
+    const classes2 = ctx.buildClassString([
+      `${ctx.prefix}-badge-icon`,
+      node.size ? `${ctx.prefix}-badge-icon-${node.size}` : void 0,
+      node.variant ? `${ctx.prefix}-badge-icon-${node.variant}` : void 0,
+      ...ctx.getCommonClasses(node)
+    ]);
+    const styles2 = ctx.buildCommonStyles(node);
+    const styleAttr2 = styles2 ? ` style="${styles2}"` : "";
+    if (iconData) {
+      const svg = renderIconSvg(iconData, 24, 2, `${ctx.prefix}-icon`);
+      return `<span class="${classes2}"${styleAttr2} aria-label="${ctx.escapeHtml(node.icon)}">${svg}</span>`;
+    }
+    return `<span class="${classes2}"${styleAttr2} aria-label="unknown icon">?</span>`;
+  }
+  const isDot = !node.content || node.content.trim() === "";
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-badge`,
+    isDot ? `${ctx.prefix}-badge-dot` : void 0,
+    node.variant ? `${ctx.prefix}-badge-${node.variant}` : void 0,
+    node.pill ? `${ctx.prefix}-badge-pill` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  return `<span class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</span>`;
+}
+function renderIcon(node, ctx) {
+  const iconData = getIconData(node.name);
+  const sizeResolved = resolveSizeValue(node.size, "icon", ctx.prefix);
+  const wrapperClasses = ctx.buildClassString([
+    `${ctx.prefix}-icon-wrapper`,
+    node.muted ? `${ctx.prefix}-text-muted` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const baseStyles = ctx.buildCommonStyles(node);
+  if (iconData) {
+    const iconClasses = buildClassString([
+      `${ctx.prefix}-icon`,
+      sizeResolved.className
+    ]);
+    const svgStyleAttr = sizeResolved.style ? ` style="${sizeResolved.style}"` : "";
+    const svg = renderIconSvg(iconData, 24, 2, iconClasses, svgStyleAttr);
+    const wrapperStyleAttr2 = baseStyles ? ` style="${baseStyles}"` : "";
+    return `<span class="${wrapperClasses}"${wrapperStyleAttr2} aria-hidden="true">${svg}</span>`;
+  }
+  const size = sizeResolved.style?.match(/(\d+)px/)?.[1] || "24";
+  const sizeNum = parseInt(size, 10);
+  const placeholderSvg = `<svg class="${ctx.prefix}-icon ${sizeResolved.className || ""}" width="${sizeNum}" height="${sizeNum}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-dasharray="4 2" fill="none" opacity="0.5"/>
+      <text x="12" y="16" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.7">?</text>
+    </svg>`;
+  const wrapperStyleAttr = baseStyles ? ` style="${baseStyles}"` : "";
+  return `<span class="${wrapperClasses}"${wrapperStyleAttr} aria-hidden="true" title="Unknown icon: ${ctx.escapeHtml(node.name)}">${placeholderSvg}</span>`;
+}
+
+// src/renderer/html/renderers/overlay.ts
+function renderTooltip(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-tooltip-wrapper`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const position = node.position || "top";
+  const children = ctx.renderChildren(node.children);
+  return `<div class="${classes}"${styleAttr}>
+${children}
+<div class="${ctx.prefix}-tooltip ${ctx.prefix}-tooltip-${position}" role="tooltip">${ctx.escapeHtml(node.content)}</div>
+</div>`;
+}
+function renderPopover(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-popover`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const title = node.title ? `<div class="${ctx.prefix}-popover-header">${ctx.escapeHtml(node.title)}</div>
+` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<div class="${classes}"${styleAttr}>
+${title}<div class="${ctx.prefix}-popover-body">
+${children}
+</div>
+</div>`;
+}
+function renderDropdown(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-dropdown`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const items = node.items.map((item) => {
+    if ("type" in item && item.type === "divider") {
+      return `<hr class="${ctx.prefix}-divider" />`;
+    }
+    const dropdownItem = item;
+    const itemClasses = ctx.buildClassString([
+      `${ctx.prefix}-dropdown-item`,
+      dropdownItem.danger ? `${ctx.prefix}-dropdown-item-danger` : void 0,
+      dropdownItem.disabled ? `${ctx.prefix}-dropdown-item-disabled` : void 0
+    ]);
+    return `<button class="${itemClasses}"${dropdownItem.disabled ? " disabled" : ""}>${ctx.escapeHtml(dropdownItem.label)}</button>`;
+  }).join("\n");
+  return `<div class="${classes}"${styleAttr}>
+${items}
+</div>`;
+}
+
+// src/renderer/html/renderers/navigation.ts
+function renderIconHtml(iconName, prefix) {
+  return `<span class="${prefix}-icon" data-icon="${iconName}"></span>`;
+}
+function renderNavItem(item, ctx) {
+  const linkClasses = ctx.buildClassString([
+    `${ctx.prefix}-nav-link`,
+    item.active ? `${ctx.prefix}-nav-link-active` : void 0,
+    item.disabled ? `${ctx.prefix}-nav-link-disabled` : void 0
+  ]);
+  const iconHtml = item.icon ? renderIconHtml(item.icon, ctx.prefix) + " " : "";
+  return `<a class="${linkClasses}" href="${item.href || "#"}">${iconHtml}${ctx.escapeHtml(item.label)}</a>`;
+}
+function renderNavChildren(children, ctx) {
+  return children.map((child) => {
+    if (child.type === "divider") {
+      return `<hr class="${ctx.prefix}-nav-divider" />`;
+    }
+    if (child.type === "group") {
+      const groupItems = child.items.map((item) => {
+        if (item.type === "divider") {
+          return `<hr class="${ctx.prefix}-nav-divider" />`;
+        }
+        return renderNavItem(item, ctx);
+      }).join("\n");
+      return `<div class="${ctx.prefix}-nav-group">
+  <div class="${ctx.prefix}-nav-group-label">${ctx.escapeHtml(child.label)}</div>
+${groupItems}
+</div>`;
+    }
+    if (child.type === "item") {
+      return renderNavItem(child, ctx);
+    }
+    return "";
+  }).join("\n");
+}
+function renderNav(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-nav`,
+    node.vertical ? `${ctx.prefix}-nav-vertical` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  if (node.children && node.children.length > 0) {
+    const content = renderNavChildren(node.children, ctx);
+    return `<nav class="${classes}"${styleAttr}>
+${content}
+</nav>`;
+  }
+  const items = node.items.map((item) => {
+    if (typeof item === "string") {
+      return `<a class="${ctx.prefix}-nav-link" href="#">${ctx.escapeHtml(item)}</a>`;
+    }
+    const linkClasses = ctx.buildClassString([
+      `${ctx.prefix}-nav-link`,
+      item.active ? `${ctx.prefix}-nav-link-active` : void 0,
+      item.disabled ? `${ctx.prefix}-nav-link-disabled` : void 0
+    ]);
+    const iconHtml = item.icon ? renderIconHtml(item.icon, ctx.prefix) + " " : "";
+    return `<a class="${linkClasses}" href="${item.href || "#"}">${iconHtml}${ctx.escapeHtml(item.label)}</a>`;
+  }).join("\n");
+  return `<nav class="${classes}"${styleAttr}>
+${items}
+</nav>`;
+}
+function renderTabs(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-tabs`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const tabList = node.items.map((label, idx) => {
+    const isActive = idx === (node.active || 0);
+    const tabClasses = `${ctx.prefix}-tab${isActive ? ` ${ctx.prefix}-tab-active` : ""}`;
+    return `<button class="${tabClasses}" role="tab" aria-selected="${isActive}">${ctx.escapeHtml(label)}</button>`;
+  }).join("\n");
+  return `<div class="${classes}"${styleAttr}>
+  <div class="${ctx.prefix}-tab-list" role="tablist">
+${tabList}
+  </div>
+</div>`;
+}
+function renderBreadcrumb(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-breadcrumb`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const items = node.items.map((item, idx) => {
+    const isLast = idx === node.items.length - 1;
+    if (typeof item === "string") {
+      return isLast ? `<span class="${ctx.prefix}-breadcrumb-item" aria-current="page">${ctx.escapeHtml(item)}</span>` : `<a class="${ctx.prefix}-breadcrumb-item" href="#">${ctx.escapeHtml(item)}</a>`;
+    }
+    return isLast ? `<span class="${ctx.prefix}-breadcrumb-item" aria-current="page">${ctx.escapeHtml(item.label)}</span>` : `<a class="${ctx.prefix}-breadcrumb-item" href="${item.href || "#"}">${ctx.escapeHtml(item.label)}</a>`;
+  }).join(" / ");
+  return `<nav class="${classes}"${styleAttr} aria-label="Breadcrumb">${items}</nav>`;
+}
+
+// src/renderer/html/semantic.ts
+function renderSemanticMarker(component, variant, prefix) {
+  switch (component) {
+    case "avatar":
+      const avatarSize = variant || "sm";
+      return `<span class="${prefix}-semantic-avatar ${prefix}-semantic-avatar-${avatarSize}" data-semantic="avatar" data-variant="${avatarSize}" aria-hidden="true"></span>`;
+    case "dot":
+      const dotVariant = variant || "default";
+      return `<span class="${prefix}-semantic-dot ${prefix}-semantic-dot-${dotVariant}" data-semantic="dot" data-variant="${dotVariant}" aria-hidden="true"></span>`;
+    case "icon":
+      const iconName = variant || "default";
+      return `<span class="${prefix}-semantic-icon" data-semantic="icon" data-variant="${iconName}" aria-hidden="true">[${iconName}]</span>`;
+    default:
+      return `<span class="${prefix}-semantic-unknown" data-semantic="${component}" data-variant="${variant || ""}">[${component}${variant ? ":" + variant : ""}]</span>`;
+  }
+}
+function renderSemanticMarkerWithContent(component, variant, content, prefix, escapeHtml) {
+  switch (component) {
+    case "badge":
+      const badgeVariant = variant || "default";
+      const escapedContent = escapeHtml(content);
+      return `<span class="${prefix}-semantic-badge ${prefix}-semantic-badge-${badgeVariant}" data-semantic="badge" data-variant="${badgeVariant}">${escapedContent}</span>`;
+    default:
+      return renderSemanticMarker(component, variant, prefix) + escapeHtml(content);
+  }
+}
+function renderSemanticMarkers(text, prefix, escapeHtml) {
+  const markerPattern = /\[([a-z]+)(?::([a-z0-9-]+))?\](\s*)/gi;
+  let result = "";
+  let lastIndex = 0;
+  let match;
+  while ((match = markerPattern.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      result += escapeHtml(text.substring(lastIndex, match.index));
+    }
+    const [fullMatch, component, variant] = match;
+    const comp = component.toLowerCase();
+    const varnt = variant?.toLowerCase();
+    if (comp === "badge") {
+      const afterMarker = text.substring(match.index + fullMatch.length);
+      const contentMatch = afterMarker.match(/^([^\n\[]+?)(?=\n|\[|$)/);
+      const badgeContent = contentMatch ? contentMatch[1].trim() : "";
+      result += renderSemanticMarkerWithContent(comp, varnt, badgeContent, prefix, escapeHtml);
+      lastIndex = match.index + fullMatch.length + (contentMatch ? contentMatch[0].length : 0);
+      markerPattern.lastIndex = lastIndex;
+    } else {
+      result += renderSemanticMarker(comp, varnt, prefix);
+      lastIndex = match.index + fullMatch.length;
+    }
+  }
+  if (lastIndex < text.length) {
+    result += escapeHtml(text.substring(lastIndex));
+  }
+  if (lastIndex === 0) {
+    return escapeHtml(text);
+  }
+  return result;
+}
+function renderTableCellContent(content, prefix, escapeHtml) {
+  const avatarMatch = content.match(/^\[avatar(?::([a-z0-9-]+))?\]\s*/i);
+  if (avatarMatch) {
+    const avatarVariant = avatarMatch[1]?.toLowerCase();
+    const avatarHtml = renderSemanticMarker("avatar", avatarVariant, prefix);
+    const restContent = content.slice(avatarMatch[0].length);
+    const restHtml = renderSemanticMarkers(restContent, prefix, escapeHtml);
+    const lines = restHtml.split("\n");
+    const textHtml = lines.length > 1 ? lines.map((line) => `<span>${line}</span>`).join("") : restHtml;
+    return `<div class="${prefix}-cell-avatar-layout">${avatarHtml}<div class="${prefix}-cell-avatar-text">${textHtml}</div></div>`;
+  }
+  const withMarkers = renderSemanticMarkers(content, prefix, escapeHtml);
+  return withMarkers.replace(/\n/g, "<br>");
+}
+
+// src/renderer/html/renderers/data.ts
+function renderTable(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-table`,
+    node.striped ? `${ctx.prefix}-table-striped` : void 0,
+    node.bordered ? `${ctx.prefix}-table-bordered` : void 0,
+    node.hover ? `${ctx.prefix}-table-hover` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const thead = `<thead><tr>${node.columns.map((col) => `<th>${ctx.escapeHtml(col)}</th>`).join("")}</tr></thead>`;
+  const tbody = `<tbody>${node.rows.map(
+    (row) => `<tr>${row.map((cell) => {
+      if (typeof cell === "string") {
+        return `<td>${renderTableCellContent(cell, ctx.prefix, ctx.escapeHtml)}</td>`;
+      }
+      return `<td>${ctx.renderNode(cell)}</td>`;
+    }).join("")}</tr>`
+  ).join("")}</tbody>`;
+  return `<table class="${classes}"${styleAttr}>
+${thead}
+${tbody}
+</table>`;
+}
+function renderList(node, ctx) {
+  const tag = node.ordered ? "ol" : "ul";
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-list`,
+    node.ordered ? `${ctx.prefix}-list-ordered` : void 0,
+    node.none ? `${ctx.prefix}-list-none` : void 0,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const items = node.items.map((item) => {
+    if (typeof item === "string") {
+      return `<li class="${ctx.prefix}-list-item">${ctx.escapeHtml(item)}</li>`;
+    }
+    return `<li class="${ctx.prefix}-list-item">${ctx.escapeHtml(item.content)}</li>`;
+  }).join("\n");
+  return `<${tag} class="${classes}"${styleAttr}>
+${items}
+</${tag}>`;
+}
+
+// src/renderer/html/renderers/divider.ts
+function renderDivider(node, ctx) {
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  return `<hr class="${ctx.prefix}-divider"${styleAttr} />`;
 }
 
 // src/renderer/html/index.ts
@@ -48312,8 +49203,97 @@ function resolveSizeValueToCss(value) {
   return void 0;
 }
 var HtmlRenderer = class extends BaseRenderer {
+  /**
+   * Node type to renderer method mapping
+   */
+  nodeRenderers;
   constructor(options = {}) {
     super(options);
+    this.nodeRenderers = this.createNodeRenderers();
+  }
+  /**
+   * Get render context for external renderer functions
+   */
+  getRenderContext() {
+    return {
+      prefix: this.prefix,
+      escapeHtml: this.escapeHtml.bind(this),
+      buildClassString: this.buildClassString.bind(this),
+      buildAttrsString: this.buildAttrsString.bind(this),
+      buildCommonStyles: this.buildCommonStyles.bind(this),
+      getCommonClasses: this.getCommonClasses.bind(this),
+      renderChildren: this.renderChildren.bind(this),
+      renderNode: this.renderNode.bind(this)
+    };
+  }
+  /**
+   * Get grid render context (extends RenderContext with buildColStyles)
+   */
+  getGridRenderContext() {
+    return {
+      ...this.getRenderContext(),
+      buildColStyles: this.buildColStyles.bind(this)
+    };
+  }
+  /**
+   * Create the node renderer mapping
+   */
+  createNodeRenderers() {
+    return {
+      // Layout nodes
+      Page: (node) => this.renderPage(node),
+      Header: (node) => this.renderHeader(node),
+      Main: (node) => this.renderMain(node),
+      Footer: (node) => this.renderFooter(node),
+      Sidebar: (node) => this.renderSidebar(node),
+      Section: (node) => this.renderSection(node),
+      // Grid nodes
+      Row: (node) => this.renderRow(node),
+      Col: (node) => this.renderCol(node),
+      // Container nodes
+      Card: (node) => this.renderCard(node),
+      Modal: (node) => this.renderModal(node),
+      Drawer: (node) => this.renderDrawer(node),
+      Accordion: (node) => this.renderAccordion(node),
+      // Text nodes
+      Text: (node) => this.renderText(node),
+      Title: (node) => this.renderTitle(node),
+      Link: (node) => this.renderLink(node),
+      // Input nodes
+      Input: (node) => this.renderInput(node),
+      Textarea: (node) => this.renderTextarea(node),
+      Select: (node) => this.renderSelect(node),
+      Checkbox: (node) => this.renderCheckbox(node),
+      Radio: (node) => this.renderRadio(node),
+      Switch: (node) => this.renderSwitch(node),
+      Slider: (node) => this.renderSlider(node),
+      // Button
+      Button: (node) => this.renderButton(node),
+      // Display nodes
+      Image: (node) => this.renderImage(node),
+      Placeholder: (node) => this.renderPlaceholder(node),
+      Avatar: (node) => this.renderAvatar(node),
+      Badge: (node) => this.renderBadge(node),
+      Icon: (node) => this.renderIcon(node),
+      // Data nodes
+      Table: (node) => this.renderTable(node),
+      List: (node) => this.renderList(node),
+      // Feedback nodes
+      Alert: (node) => this.renderAlert(node),
+      Toast: (node) => this.renderToast(node),
+      Progress: (node) => this.renderProgress(node),
+      Spinner: (node) => this.renderSpinner(node),
+      // Overlay nodes
+      Tooltip: (node) => this.renderTooltip(node),
+      Popover: (node) => this.renderPopover(node),
+      Dropdown: (node) => this.renderDropdown(node),
+      // Navigation nodes
+      Nav: (node) => this.renderNav(node),
+      Tabs: (node) => this.renderTabs(node),
+      Breadcrumb: (node) => this.renderBreadcrumb(node),
+      // Other
+      Divider: (node) => this.renderDivider(node)
+    };
   }
   /**
    * Render a page node
@@ -48353,104 +49333,11 @@ ${title}${children}
    * Render any AST node
    */
   renderNode(node) {
-    switch (node.type) {
-      // Layout nodes
-      case "Page":
-        return this.renderPage(node);
-      case "Header":
-        return this.renderHeader(node);
-      case "Main":
-        return this.renderMain(node);
-      case "Footer":
-        return this.renderFooter(node);
-      case "Sidebar":
-        return this.renderSidebar(node);
-      case "Section":
-        return this.renderSection(node);
-      // Grid nodes
-      case "Row":
-        return this.renderRow(node);
-      case "Col":
-        return this.renderCol(node);
-      // Container nodes
-      case "Card":
-        return this.renderCard(node);
-      case "Modal":
-        return this.renderModal(node);
-      case "Drawer":
-        return this.renderDrawer(node);
-      case "Accordion":
-        return this.renderAccordion(node);
-      // Text nodes
-      case "Text":
-        return this.renderText(node);
-      case "Title":
-        return this.renderTitle(node);
-      case "Link":
-        return this.renderLink(node);
-      // Input nodes
-      case "Input":
-        return this.renderInput(node);
-      case "Textarea":
-        return this.renderTextarea(node);
-      case "Select":
-        return this.renderSelect(node);
-      case "Checkbox":
-        return this.renderCheckbox(node);
-      case "Radio":
-        return this.renderRadio(node);
-      case "Switch":
-        return this.renderSwitch(node);
-      case "Slider":
-        return this.renderSlider(node);
-      // Button
-      case "Button":
-        return this.renderButton(node);
-      // Display nodes
-      case "Image":
-        return this.renderImage(node);
-      case "Placeholder":
-        return this.renderPlaceholder(node);
-      case "Avatar":
-        return this.renderAvatar(node);
-      case "Badge":
-        return this.renderBadge(node);
-      case "Icon":
-        return this.renderIcon(node);
-      // Data nodes
-      case "Table":
-        return this.renderTable(node);
-      case "List":
-        return this.renderList(node);
-      // Feedback nodes
-      case "Alert":
-        return this.renderAlert(node);
-      case "Toast":
-        return this.renderToast(node);
-      case "Progress":
-        return this.renderProgress(node);
-      case "Spinner":
-        return this.renderSpinner(node);
-      // Overlay nodes
-      case "Tooltip":
-        return this.renderTooltip(node);
-      case "Popover":
-        return this.renderPopover(node);
-      case "Dropdown":
-        return this.renderDropdown(node);
-      // Navigation nodes
-      case "Nav":
-        return this.renderNav(node);
-      case "Tabs":
-        return this.renderTabs(node);
-      case "Breadcrumb":
-        return this.renderBreadcrumb(node);
-      // Other
-      case "Divider":
-        return this.renderDivider(node);
-      default:
-        return `<!-- Unknown node type: ${node.type} -->`;
+    const renderer = this.nodeRenderers[node.type];
+    if (renderer) {
+      return renderer(node);
     }
+    return `<!-- Unknown node type: ${node.type} -->`;
   }
   /**
    * Render children nodes
@@ -48493,103 +49380,28 @@ ${title}${children}
   // Layout Node Renderers
   // ===========================================
   renderHeader(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-header`,
-      node.border === false ? `${this.prefix}-no-border` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const children = this.renderChildren(node.children);
-    return `<header class="${classes}"${styleAttr}>
-${children}
-</header>`;
+    return renderHeader(node, this.getRenderContext());
   }
   renderMain(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-main`,
-      node.scroll ? `${this.prefix}-scroll` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const children = this.renderChildren(node.children);
-    return `<main class="${classes}"${styleAttr}>
-${children}
-</main>`;
+    return renderMain(node, this.getRenderContext());
   }
   renderFooter(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-footer`,
-      node.border === false ? `${this.prefix}-no-border` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const children = this.renderChildren(node.children);
-    return `<footer class="${classes}"${styleAttr}>
-${children}
-</footer>`;
+    return renderFooter(node, this.getRenderContext());
   }
   renderSidebar(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-sidebar`,
-      node.position === "right" ? `${this.prefix}-sidebar-right` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const children = this.renderChildren(node.children);
-    return `<aside class="${classes}"${styleAttr}>
-${children}
-</aside>`;
+    return renderSidebar(node, this.getRenderContext());
   }
   renderSection(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-section`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const title = node.title ? `<h2 class="${this.prefix}-title">${this.escapeHtml(node.title)}</h2>
-` : "";
-    const children = this.renderChildren(node.children);
-    return `<section class="${classes}"${styleAttr}>
-${title}${children}
-</section>`;
+    return renderSection(node, this.getRenderContext());
   }
   // ===========================================
   // Grid Node Renderers
   // ===========================================
   renderRow(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-row`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const children = this.renderChildren(node.children);
-    return `<div class="${classes}"${styleAttr}>
-${children}
-</div>`;
+    return renderRow(node, this.getRenderContext());
   }
   renderCol(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-col`,
-      node.span ? `${this.prefix}-col-${node.span}` : void 0,
-      // Responsive breakpoint classes
-      node.sm ? `${this.prefix}-col-sm-${node.sm}` : void 0,
-      node.md ? `${this.prefix}-col-md-${node.md}` : void 0,
-      node.lg ? `${this.prefix}-col-lg-${node.lg}` : void 0,
-      node.xl ? `${this.prefix}-col-xl-${node.xl}` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildColStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const children = this.renderChildren(node.children);
-    return `<div class="${classes}"${styleAttr}>
-${children}
-</div>`;
+    return renderCol(node, this.getGridRenderContext());
   }
   /**
    * Build common inline styles for all values
@@ -48612,6 +49424,17 @@ ${children}
    */
   buildCommonStyles(props) {
     const styles = [];
+    this.buildPositionStyles(props, styles);
+    this.buildSizeStyles(props, styles);
+    this.buildPaddingStyles(props, styles);
+    this.buildMarginStyles(props, styles);
+    this.buildGapStyles(props, styles);
+    return styles.join("; ");
+  }
+  /**
+   * Build position styles (absolute positioning)
+   */
+  buildPositionStyles(props, styles) {
     if (props.x !== void 0 || props.y !== void 0) {
       styles.push("position: absolute");
       if (props.x !== void 0) {
@@ -48623,6 +49446,11 @@ ${children}
         if (yValue) styles.push(`top: ${yValue}`);
       }
     }
+  }
+  /**
+   * Build size styles (width, height, min/max)
+   */
+  buildSizeStyles(props, styles) {
     const wValue = resolveSizeValueToCss(props.w);
     if (wValue) {
       styles.push(`width: ${wValue}`);
@@ -48648,6 +49476,11 @@ ${children}
     if (maxHValue) {
       styles.push(`max-height: ${maxHValue}`);
     }
+  }
+  /**
+   * Build padding styles (p, px, py, pt, pr, pb, pl)
+   */
+  buildPaddingStyles(props, styles) {
     const pValue = resolveSpacingValue(props.p);
     if (pValue) {
       styles.push(`padding: ${pValue}`);
@@ -48678,6 +49511,11 @@ ${children}
     if (plValue) {
       styles.push(`padding-left: ${plValue}`);
     }
+  }
+  /**
+   * Build margin styles (m, mx, my, mt, mr, mb, ml)
+   */
+  buildMarginStyles(props, styles) {
     const mValue = resolveSpacingValue(props.m);
     if (mValue) {
       styles.push(`margin: ${mValue}`);
@@ -48708,11 +49546,15 @@ ${children}
     if (mlValue) {
       styles.push(`margin-left: ${mlValue}`);
     }
+  }
+  /**
+   * Build gap styles
+   */
+  buildGapStyles(props, styles) {
     const gapValue = resolveSpacingValue(props.gap);
     if (gapValue) {
       styles.push(`gap: ${gapValue}`);
     }
-    return styles.join("; ");
   }
   /**
    * Build inline styles for Col node (extends common styles with order)
@@ -48732,2632 +49574,136 @@ ${children}
   // Container Node Renderers
   // ===========================================
   renderCard(node) {
-    const hasExplicitWidth = node.w !== void 0;
-    const classes = this.buildClassString([
-      `${this.prefix}-card`,
-      !hasExplicitWidth ? `${this.prefix}-card-flex` : void 0,
-      node.shadow ? `${this.prefix}-card-shadow-${node.shadow}` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const title = node.title ? `<h3 class="${this.prefix}-title">${this.escapeHtml(node.title)}</h3>
-` : "";
-    const children = this.renderChildren(node.children);
-    return `<div class="${classes}"${styleAttr}>
-${title}${children}
-</div>`;
+    return renderCard(node, this.getRenderContext());
   }
   renderModal(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-modal`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const title = node.title ? `<h2 class="${this.prefix}-title">${this.escapeHtml(node.title)}</h2>
-` : "";
-    const children = this.renderChildren(node.children);
-    return `<div class="${this.prefix}-modal-backdrop">
-  <div class="${classes}"${styleAttr} role="dialog" aria-modal="true">
-${title}${children}
-  </div>
-</div>`;
+    return renderModal(node, this.getRenderContext());
   }
   renderDrawer(node) {
-    const position = node.position || "left";
-    const classes = this.buildClassString([
-      `${this.prefix}-drawer`,
-      `${this.prefix}-drawer-${position}`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const title = node.title ? `<h2 class="${this.prefix}-title">${this.escapeHtml(node.title)}</h2>
-` : "";
-    const children = this.renderChildren(node.children);
-    return `<aside class="${classes}"${styleAttr}>
-${title}${children}
-</aside>`;
+    return renderDrawer(node, this.getRenderContext());
   }
   renderAccordion(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-accordion`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const title = node.title ? `<button class="${this.prefix}-accordion-header">${this.escapeHtml(node.title)}</button>
-` : "";
-    const children = this.renderChildren(node.children);
-    return `<div class="${classes}"${styleAttr}>
-${title}<div class="${this.prefix}-accordion-content">
-${children}
-</div>
-</div>`;
+    return renderAccordion(node, this.getRenderContext());
   }
   // ===========================================
   // Text Node Renderers
   // ===========================================
   renderText(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-text`,
-      node.size ? `${this.prefix}-text-${node.size}` : void 0,
-      node.weight ? `${this.prefix}-text-${node.weight}` : void 0,
-      node.align ? `${this.prefix}-text-${node.align}` : void 0,
-      node.muted ? `${this.prefix}-text-muted` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    return `<p class="${classes}"${styleAttr}>${this.escapeHtml(node.content)}</p>`;
+    return renderText(node, this.getRenderContext());
   }
   renderTitle(node) {
-    const level = node.level || 1;
-    const tag = `h${level}`;
-    const classes = this.buildClassString([
-      `${this.prefix}-title`,
-      node.size ? `${this.prefix}-text-${node.size}` : void 0,
-      node.align ? `${this.prefix}-text-${node.align}` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    return `<${tag} class="${classes}"${styleAttr}>${this.escapeHtml(node.content)}</${tag}>`;
+    return renderTitle(node, this.getRenderContext());
   }
   renderLink(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-link`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const attrs = {
-      class: classes,
-      href: node.href || "#"
-    };
-    if (node.external) {
-      attrs.target = "_blank";
-      attrs.rel = "noopener noreferrer";
-    }
-    return `<a${this.buildAttrsString(attrs)}${styleAttr}>${this.escapeHtml(node.content)}</a>`;
+    return renderLink(node, this.getRenderContext());
   }
   // ===========================================
   // Input Node Renderers
   // ===========================================
   renderInput(node) {
-    const inputClasses = this.buildClassString([
-      `${this.prefix}-input`,
-      node.icon ? `${this.prefix}-input-with-icon` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const attrs = {
-      class: inputClasses,
-      type: node.inputType || "text",
-      placeholder: node.placeholder,
-      value: node.value,
-      disabled: node.disabled,
-      required: node.required,
-      readonly: node.readonly
-    };
-    const inputElement = `<input${this.buildAttrsString(attrs)} />`;
-    if (node.icon) {
-      const iconData = getIconData(node.icon);
-      let iconHtml;
-      if (iconData) {
-        iconHtml = renderIconSvg(iconData, 16, 2, `${this.prefix}-input-icon`);
-      } else {
-        iconHtml = `<span class="${this.prefix}-input-icon">[${this.escapeHtml(node.icon)}]</span>`;
-      }
-      const wrapperClasses = this.buildClassString([`${this.prefix}-input-wrapper`]);
-      const wrapper = `<div class="${wrapperClasses}"${styleAttr}>${iconHtml}${inputElement}</div>`;
-      if (node.label) {
-        return `<label class="${this.prefix}-input-label">${this.escapeHtml(node.label)}</label>
-${wrapper}`;
-      }
-      return wrapper;
-    }
-    const input = `<input${this.buildAttrsString(attrs)}${styleAttr} />`;
-    if (node.label) {
-      return `<label class="${this.prefix}-input-label">${this.escapeHtml(node.label)}</label>
-${input}`;
-    }
-    return input;
+    return renderInput(node, this.getRenderContext());
   }
   renderTextarea(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-input`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const attrs = {
-      class: classes,
-      placeholder: node.placeholder,
-      disabled: node.disabled,
-      required: node.required,
-      rows: node.rows?.toString()
-    };
-    const textarea = `<textarea${this.buildAttrsString(attrs)}${styleAttr}>${this.escapeHtml(node.value || "")}</textarea>`;
-    if (node.label) {
-      return `<label class="${this.prefix}-input-label">${this.escapeHtml(node.label)}</label>
-${textarea}`;
-    }
-    return textarea;
+    return renderTextarea(node, this.getRenderContext());
   }
   renderSelect(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-input`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const attrs = {
-      class: classes,
-      disabled: node.disabled,
-      required: node.required
-    };
-    const options = node.options.map((opt) => {
-      if (typeof opt === "string") {
-        const selected2 = opt === node.value ? " selected" : "";
-        return `<option value="${this.escapeHtml(opt)}"${selected2}>${this.escapeHtml(opt)}</option>`;
-      }
-      const selected = opt.value === node.value ? " selected" : "";
-      return `<option value="${this.escapeHtml(opt.value)}"${selected}>${this.escapeHtml(opt.label)}</option>`;
-    }).join("\n");
-    const placeholder = node.placeholder ? `<option value="" disabled selected>${this.escapeHtml(node.placeholder)}</option>
-` : "";
-    const select = `<select${this.buildAttrsString(attrs)}${styleAttr}>
-${placeholder}${options}
-</select>`;
-    if (node.label) {
-      return `<label class="${this.prefix}-input-label">${this.escapeHtml(node.label)}</label>
-${select}`;
-    }
-    return select;
+    return renderSelect(node, this.getRenderContext());
   }
   renderCheckbox(node) {
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const attrs = {
-      type: "checkbox",
-      checked: node.checked,
-      disabled: node.disabled
-    };
-    const checkbox = `<input${this.buildAttrsString(attrs)} />`;
-    if (node.label) {
-      return `<label class="${this.prefix}-checkbox"${styleAttr}>${checkbox}<span>${this.escapeHtml(node.label)}</span></label>`;
-    }
-    return checkbox;
+    return renderCheckbox(node, this.getRenderContext());
   }
   renderRadio(node) {
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const attrs = {
-      type: "radio",
-      name: node.name,
-      checked: node.checked,
-      disabled: node.disabled
-    };
-    const radio = `<input${this.buildAttrsString(attrs)} />`;
-    if (node.label) {
-      return `<label class="${this.prefix}-radio"${styleAttr}>${radio}<span>${this.escapeHtml(node.label)}</span></label>`;
-    }
-    return radio;
+    return renderRadio(node, this.getRenderContext());
   }
   renderSwitch(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-switch`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const attrs = {
-      type: "checkbox",
-      role: "switch",
-      checked: node.checked,
-      disabled: node.disabled
-    };
-    const switchEl = `<input${this.buildAttrsString(attrs)} />`;
-    if (node.label) {
-      return `<label class="${classes}"${styleAttr}>${switchEl} ${this.escapeHtml(node.label)}</label>`;
-    }
-    return `<label class="${classes}"${styleAttr}>${switchEl}</label>`;
+    return renderSwitch(node, this.getRenderContext());
   }
   renderSlider(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-slider`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const attrs = {
-      class: classes,
-      type: "range",
-      min: node.min?.toString(),
-      max: node.max?.toString(),
-      step: node.step?.toString(),
-      value: node.value?.toString(),
-      disabled: node.disabled
-    };
-    const slider = `<input${this.buildAttrsString(attrs)}${styleAttr} />`;
-    if (node.label) {
-      return `<label class="${this.prefix}-input-label">${this.escapeHtml(node.label)}</label>
-${slider}`;
-    }
-    return slider;
+    return renderSlider(node, this.getRenderContext());
   }
   // ===========================================
   // Button Renderer
   // ===========================================
   renderButton(node) {
-    const isIconOnly = node.icon && !node.content.trim();
-    const classes = this.buildClassString([
-      `${this.prefix}-button`,
-      node.primary ? `${this.prefix}-button-primary` : void 0,
-      node.secondary ? `${this.prefix}-button-secondary` : void 0,
-      node.outline ? `${this.prefix}-button-outline` : void 0,
-      node.ghost ? `${this.prefix}-button-ghost` : void 0,
-      node.danger ? `${this.prefix}-button-danger` : void 0,
-      node.size ? `${this.prefix}-button-${node.size}` : void 0,
-      node.disabled ? `${this.prefix}-button-disabled` : void 0,
-      node.loading ? `${this.prefix}-button-loading` : void 0,
-      isIconOnly ? `${this.prefix}-button-icon-only` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const attrs = {
-      class: classes,
-      disabled: node.disabled
-    };
-    let icon = "";
-    if (node.icon) {
-      const iconData = getIconData(node.icon);
-      if (iconData) {
-        icon = renderIconSvg(iconData, 16, 2, `${this.prefix}-icon`);
-      } else {
-        icon = `<span class="${this.prefix}-icon">[${this.escapeHtml(node.icon)}]</span>`;
-      }
-    }
-    const loading = node.loading ? `<span class="${this.prefix}-spinner ${this.prefix}-spinner-sm"></span>` : "";
-    const content = this.escapeHtml(node.content);
-    return `<button${this.buildAttrsString(attrs)}${styleAttr}>${loading}${icon}${content}</button>`;
+    return renderButton(node, this.getRenderContext());
   }
   // ===========================================
   // Display Node Renderers
   // ===========================================
   renderImage(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-image`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    if (node.src) {
-      const attrs = {
-        class: classes,
-        src: node.src,
-        alt: node.alt || "Image"
-      };
-      const imgStyleAttr = styles ? `; ${styles}` : "";
-      return `<img${this.buildAttrsString(attrs)}${imgStyleAttr ? ` style="${imgStyleAttr.slice(2)}"` : ""} />`;
-    }
-    const label = node.alt || "Image";
-    const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
-    return `<div class="${classes}"${styleAttr} role="img" aria-label="${this.escapeHtml(label)}">${icon}<span>${this.escapeHtml(label)}</span></div>`;
+    return renderImage(node, this.getRenderContext());
   }
   renderPlaceholder(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-placeholder`,
-      node.children && node.children.length > 0 ? `${this.prefix}-placeholder-with-children` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const label = node.label ? this.escapeHtml(node.label) : "Placeholder";
-    if (node.children && node.children.length > 0) {
-      const childrenHtml = this.renderChildren(node.children);
-      return `<div class="${classes}"${styleAttr}>
-  <span class="${this.prefix}-placeholder-label">${label}</span>
-  <div class="${this.prefix}-placeholder-overlay">${childrenHtml}</div>
-</div>`;
-    }
-    return `<div class="${classes}"${styleAttr}>${label}</div>`;
+    return renderPlaceholder(node, this.getRenderContext());
   }
   renderAvatar(node) {
-    const sizeResolved = resolveSizeValue(node.size, "avatar", this.prefix);
-    const classes = this.buildClassString([
-      `${this.prefix}-avatar`,
-      sizeResolved.className,
-      ...this.getCommonClasses(node)
-    ]);
-    const baseStyles = this.buildCommonStyles(node);
-    const sizeStyle = sizeResolved.style || "";
-    const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
-    const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
-    const initials = node.name ? node.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "?";
-    return `<div class="${classes}"${styleAttr} role="img" aria-label="${this.escapeHtml(node.name || "Avatar")}">${initials}</div>`;
+    return renderAvatar(node, this.getRenderContext());
   }
   renderBadge(node) {
-    if (node.icon) {
-      const iconData = getIconData(node.icon);
-      const classes2 = this.buildClassString([
-        `${this.prefix}-badge-icon`,
-        node.size ? `${this.prefix}-badge-icon-${node.size}` : void 0,
-        node.variant ? `${this.prefix}-badge-icon-${node.variant}` : void 0,
-        ...this.getCommonClasses(node)
-      ]);
-      const styles2 = this.buildCommonStyles(node);
-      const styleAttr2 = styles2 ? ` style="${styles2}"` : "";
-      if (iconData) {
-        const svg = renderIconSvg(iconData, 24, 2, `${this.prefix}-icon`);
-        return `<span class="${classes2}"${styleAttr2} aria-label="${this.escapeHtml(node.icon)}">${svg}</span>`;
-      }
-      return `<span class="${classes2}"${styleAttr2} aria-label="unknown icon">?</span>`;
-    }
-    const isDot = !node.content || node.content.trim() === "";
-    const classes = this.buildClassString([
-      `${this.prefix}-badge`,
-      isDot ? `${this.prefix}-badge-dot` : void 0,
-      node.variant ? `${this.prefix}-badge-${node.variant}` : void 0,
-      node.pill ? `${this.prefix}-badge-pill` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    return `<span class="${classes}"${styleAttr}>${this.escapeHtml(node.content)}</span>`;
+    return renderBadge(node, this.getRenderContext());
   }
   renderIcon(node) {
-    const iconData = getIconData(node.name);
-    const sizeResolved = resolveSizeValue(node.size, "icon", this.prefix);
-    const wrapperClasses = this.buildClassString([
-      `${this.prefix}-icon-wrapper`,
-      node.muted ? `${this.prefix}-text-muted` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const baseStyles = this.buildCommonStyles(node);
-    if (iconData) {
-      const iconClasses = buildClassString([
-        `${this.prefix}-icon`,
-        sizeResolved.className
-      ]);
-      const svgStyleAttr = sizeResolved.style ? ` style="${sizeResolved.style}"` : "";
-      const svg = renderIconSvg(iconData, 24, 2, iconClasses, svgStyleAttr);
-      const wrapperStyleAttr2 = baseStyles ? ` style="${baseStyles}"` : "";
-      return `<span class="${wrapperClasses}"${wrapperStyleAttr2} aria-hidden="true">${svg}</span>`;
-    }
-    const size = sizeResolved.style?.match(/(\d+)px/)?.[1] || "24";
-    const sizeNum = parseInt(size, 10);
-    const placeholderSvg = `<svg class="${this.prefix}-icon ${sizeResolved.className || ""}" width="${sizeNum}" height="${sizeNum}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-dasharray="4 2" fill="none" opacity="0.5"/>
-      <text x="12" y="16" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.7">?</text>
-    </svg>`;
-    const wrapperStyleAttr = baseStyles ? ` style="${baseStyles}"` : "";
-    return `<span class="${wrapperClasses}"${wrapperStyleAttr} aria-hidden="true" title="Unknown icon: ${this.escapeHtml(node.name)}">${placeholderSvg}</span>`;
+    return renderIcon(node, this.getRenderContext());
   }
   // ===========================================
   // Data Node Renderers
   // ===========================================
   renderTable(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-table`,
-      node.striped ? `${this.prefix}-table-striped` : void 0,
-      node.bordered ? `${this.prefix}-table-bordered` : void 0,
-      node.hover ? `${this.prefix}-table-hover` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const thead = `<thead><tr>${node.columns.map((col) => `<th>${this.escapeHtml(col)}</th>`).join("")}</tr></thead>`;
-    const tbody = `<tbody>${node.rows.map(
-      (row) => `<tr>${row.map((cell) => {
-        if (typeof cell === "string") {
-          return `<td>${this.renderTableCellContent(cell)}</td>`;
-        }
-        return `<td>${this.renderNode(cell)}</td>`;
-      }).join("")}</tr>`
-    ).join("")}</tbody>`;
-    return `<table class="${classes}"${styleAttr}>
-${thead}
-${tbody}
-</table>`;
+    return renderTable(node, this.getRenderContext());
   }
   renderList(node) {
-    const tag = node.ordered ? "ol" : "ul";
-    const classes = this.buildClassString([
-      `${this.prefix}-list`,
-      node.ordered ? `${this.prefix}-list-ordered` : void 0,
-      node.none ? `${this.prefix}-list-none` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const items = node.items.map((item) => {
-      if (typeof item === "string") {
-        return `<li class="${this.prefix}-list-item">${this.escapeHtml(item)}</li>`;
-      }
-      return `<li class="${this.prefix}-list-item">${this.escapeHtml(item.content)}</li>`;
-    }).join("\n");
-    return `<${tag} class="${classes}"${styleAttr}>
-${items}
-</${tag}>`;
+    return renderList(node, this.getRenderContext());
   }
   // ===========================================
   // Feedback Node Renderers
   // ===========================================
   renderAlert(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-alert`,
-      node.variant ? `${this.prefix}-alert-${node.variant}` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const dismissBtn = node.dismissible ? ` <button class="${this.prefix}-alert-close" aria-label="Close">&times;</button>` : "";
-    return `<div class="${classes}"${styleAttr} role="alert">${this.escapeHtml(node.content)}${dismissBtn}</div>`;
+    return renderAlert(node, this.getRenderContext());
   }
   renderToast(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-toast`,
-      node.position ? `${this.prefix}-toast-${node.position}` : void 0,
-      node.variant ? `${this.prefix}-toast-${node.variant}` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    return `<div class="${classes}"${styleAttr} role="status">${this.escapeHtml(node.content)}</div>`;
+    return renderToast(node, this.getRenderContext());
   }
   renderProgress(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-progress`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const value = node.value || 0;
-    const max = node.max || 100;
-    const percentage = Math.round(value / max * 100);
-    const label = node.label ? `<span class="${this.prefix}-progress-label">${this.escapeHtml(node.label)}</span>` : "";
-    if (node.indeterminate) {
-      return `<div class="${classes} ${this.prefix}-progress-indeterminate"${styleAttr} role="progressbar">${label}</div>`;
-    }
-    return `<div class="${classes}"${styleAttr} role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="${max}">
-  ${label}
-  <div class="${this.prefix}-progress-bar" style="width: ${percentage}%"></div>
-</div>`;
+    return renderProgress(node, this.getRenderContext());
   }
   renderSpinner(node) {
-    const sizeResolved = resolveSizeValue(node.size, "spinner", this.prefix);
-    const classes = this.buildClassString([
-      `${this.prefix}-spinner`,
-      sizeResolved.className,
-      ...this.getCommonClasses(node)
-    ]);
-    const baseStyles = this.buildCommonStyles(node);
-    const sizeStyle = sizeResolved.style || "";
-    const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
-    const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
-    const label = node.label || "Loading...";
-    return `<span class="${classes}"${styleAttr} role="status" aria-label="${this.escapeHtml(label)}"></span>`;
+    return renderSpinner(node, this.getRenderContext());
   }
   // ===========================================
   // Overlay Node Renderers
   // ===========================================
   renderTooltip(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-tooltip-wrapper`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const position = node.position || "top";
-    const children = this.renderChildren(node.children);
-    return `<div class="${classes}"${styleAttr}>
-${children}
-<div class="${this.prefix}-tooltip ${this.prefix}-tooltip-${position}" role="tooltip">${this.escapeHtml(node.content)}</div>
-</div>`;
+    return renderTooltip(node, this.getRenderContext());
   }
   renderPopover(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-popover`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const title = node.title ? `<div class="${this.prefix}-popover-header">${this.escapeHtml(node.title)}</div>
-` : "";
-    const children = this.renderChildren(node.children);
-    return `<div class="${classes}"${styleAttr}>
-${title}<div class="${this.prefix}-popover-body">
-${children}
-</div>
-</div>`;
+    return renderPopover(node, this.getRenderContext());
   }
   renderDropdown(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-dropdown`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const items = node.items.map((item) => {
-      if ("type" in item && item.type === "divider") {
-        return `<hr class="${this.prefix}-divider" />`;
-      }
-      const dropdownItem = item;
-      const itemClasses = this.buildClassString([
-        `${this.prefix}-dropdown-item`,
-        dropdownItem.danger ? `${this.prefix}-dropdown-item-danger` : void 0,
-        dropdownItem.disabled ? `${this.prefix}-dropdown-item-disabled` : void 0
-      ]);
-      return `<button class="${itemClasses}"${dropdownItem.disabled ? " disabled" : ""}>${this.escapeHtml(dropdownItem.label)}</button>`;
-    }).join("\n");
-    return `<div class="${classes}"${styleAttr}>
-${items}
-</div>`;
+    return renderDropdown(node, this.getRenderContext());
   }
   // ===========================================
   // Navigation Node Renderers
   // ===========================================
   renderNav(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-nav`,
-      node.vertical ? `${this.prefix}-nav-vertical` : void 0,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    if (node.children && node.children.length > 0) {
-      const content = this.renderNavChildren(node.children);
-      return `<nav class="${classes}"${styleAttr}>
-${content}
-</nav>`;
-    }
-    const items = node.items.map((item) => {
-      if (typeof item === "string") {
-        return `<a class="${this.prefix}-nav-link" href="#">${this.escapeHtml(item)}</a>`;
-      }
-      const linkClasses = this.buildClassString([
-        `${this.prefix}-nav-link`,
-        item.active ? `${this.prefix}-nav-link-active` : void 0,
-        item.disabled ? `${this.prefix}-nav-link-disabled` : void 0
-      ]);
-      const iconHtml = item.icon ? this.renderIconHtml(item.icon) + " " : "";
-      return `<a class="${linkClasses}" href="${item.href || "#"}">${iconHtml}${this.escapeHtml(item.label)}</a>`;
-    }).join("\n");
-    return `<nav class="${classes}"${styleAttr}>
-${items}
-</nav>`;
-  }
-  renderNavChildren(children) {
-    return children.map((child) => {
-      if (child.type === "divider") {
-        return `<hr class="${this.prefix}-nav-divider" />`;
-      }
-      if (child.type === "group") {
-        const groupItems = child.items.map((item) => {
-          if (item.type === "divider") {
-            return `<hr class="${this.prefix}-nav-divider" />`;
-          }
-          return this.renderNavItem(item);
-        }).join("\n");
-        return `<div class="${this.prefix}-nav-group">
-  <div class="${this.prefix}-nav-group-label">${this.escapeHtml(child.label)}</div>
-${groupItems}
-</div>`;
-      }
-      if (child.type === "item") {
-        return this.renderNavItem(child);
-      }
-      return "";
-    }).join("\n");
-  }
-  renderNavItem(item) {
-    const linkClasses = this.buildClassString([
-      `${this.prefix}-nav-link`,
-      item.active ? `${this.prefix}-nav-link-active` : void 0,
-      item.disabled ? `${this.prefix}-nav-link-disabled` : void 0
-    ]);
-    const iconHtml = item.icon ? this.renderIconHtml(item.icon) + " " : "";
-    return `<a class="${linkClasses}" href="${item.href || "#"}">${iconHtml}${this.escapeHtml(item.label)}</a>`;
-  }
-  renderIconHtml(iconName) {
-    return `<span class="${this.prefix}-icon" data-icon="${iconName}"></span>`;
+    return renderNav(node, this.getRenderContext());
   }
   renderTabs(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-tabs`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const tabList = node.items.map((label, idx) => {
-      const isActive = idx === (node.active || 0);
-      const tabClasses = `${this.prefix}-tab${isActive ? ` ${this.prefix}-tab-active` : ""}`;
-      return `<button class="${tabClasses}" role="tab" aria-selected="${isActive}">${this.escapeHtml(label)}</button>`;
-    }).join("\n");
-    return `<div class="${classes}"${styleAttr}>
-  <div class="${this.prefix}-tab-list" role="tablist">
-${tabList}
-  </div>
-</div>`;
+    return renderTabs(node, this.getRenderContext());
   }
   renderBreadcrumb(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-breadcrumb`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const items = node.items.map((item, idx) => {
-      const isLast = idx === node.items.length - 1;
-      if (typeof item === "string") {
-        return isLast ? `<span class="${this.prefix}-breadcrumb-item" aria-current="page">${this.escapeHtml(item)}</span>` : `<a class="${this.prefix}-breadcrumb-item" href="#">${this.escapeHtml(item)}</a>`;
-      }
-      return isLast ? `<span class="${this.prefix}-breadcrumb-item" aria-current="page">${this.escapeHtml(item.label)}</span>` : `<a class="${this.prefix}-breadcrumb-item" href="${item.href || "#"}">${this.escapeHtml(item.label)}</a>`;
-    }).join(" / ");
-    return `<nav class="${classes}"${styleAttr} aria-label="Breadcrumb">${items}</nav>`;
+    return renderBreadcrumb(node, this.getRenderContext());
   }
   // ===========================================
   // Divider Renderer
   // ===========================================
   renderDivider(node) {
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    return `<hr class="${this.prefix}-divider"${styleAttr} />`;
-  }
-  // ===========================================
-  // Semantic Marker Rendering
-  // ===========================================
-  /**
-   * Parse and render semantic markers in text content
-   *
-   * Semantic markers use the syntax [component:variant] to indicate
-   * what a visual element represents. This helps LLMs understand
-   * the meaning of placeholder content.
-   *
-   * Supported markers:
-   * - [avatar] or [avatar:size] - User avatar (renders as circle placeholder)
-   * - [badge:variant] TEXT - Status badge (TEXT is displayed inside the badge)
-   * - [dot:variant] - Status dot (renders as small circle before text)
-   * - [icon:name] - Icon placeholder
-   *
-   * Examples:
-   * - "[avatar] John Doe" → renders avatar circle + "John Doe"
-   * - "[badge:primary] PRO" → renders badge containing "PRO"
-   * - "[dot:success] Active" → renders green dot + "Active"
-   */
-  renderSemanticMarkers(text) {
-    const markerPattern = /\[([a-z]+)(?::([a-z0-9-]+))?\](\s*)/gi;
-    let result = "";
-    let lastIndex = 0;
-    let match;
-    while ((match = markerPattern.exec(text)) !== null) {
-      if (match.index > lastIndex) {
-        result += this.escapeHtml(text.substring(lastIndex, match.index));
-      }
-      const [fullMatch, component, variant] = match;
-      const comp = component.toLowerCase();
-      const varnt = variant?.toLowerCase();
-      if (comp === "badge") {
-        const afterMarker = text.substring(match.index + fullMatch.length);
-        const contentMatch = afterMarker.match(/^([^\n\[]+?)(?=\n|\[|$)/);
-        const badgeContent = contentMatch ? contentMatch[1].trim() : "";
-        result += this.renderSemanticMarkerWithContent(comp, varnt, badgeContent);
-        lastIndex = match.index + fullMatch.length + (contentMatch ? contentMatch[0].length : 0);
-        markerPattern.lastIndex = lastIndex;
-      } else {
-        result += this.renderSemanticMarker(comp, varnt);
-        lastIndex = match.index + fullMatch.length;
-      }
-    }
-    if (lastIndex < text.length) {
-      result += this.escapeHtml(text.substring(lastIndex));
-    }
-    if (lastIndex === 0) {
-      return this.escapeHtml(text);
-    }
-    return result;
-  }
-  /**
-   * Render a single semantic marker to HTML (without content)
-   */
-  renderSemanticMarker(component, variant) {
-    const prefix = this.prefix;
-    switch (component) {
-      case "avatar":
-        const avatarSize = variant || "sm";
-        return `<span class="${prefix}-semantic-avatar ${prefix}-semantic-avatar-${avatarSize}" data-semantic="avatar" data-variant="${avatarSize}" aria-hidden="true"></span>`;
-      case "dot":
-        const dotVariant = variant || "default";
-        return `<span class="${prefix}-semantic-dot ${prefix}-semantic-dot-${dotVariant}" data-semantic="dot" data-variant="${dotVariant}" aria-hidden="true"></span>`;
-      case "icon":
-        const iconName = variant || "default";
-        return `<span class="${prefix}-semantic-icon" data-semantic="icon" data-variant="${iconName}" aria-hidden="true">[${iconName}]</span>`;
-      default:
-        return `<span class="${prefix}-semantic-unknown" data-semantic="${component}" data-variant="${variant || ""}">[${component}${variant ? ":" + variant : ""}]</span>`;
-    }
-  }
-  /**
-   * Render a semantic marker with text content (for badge)
-   */
-  renderSemanticMarkerWithContent(component, variant, content) {
-    const prefix = this.prefix;
-    switch (component) {
-      case "badge":
-        const badgeVariant = variant || "default";
-        const escapedContent = this.escapeHtml(content);
-        return `<span class="${prefix}-semantic-badge ${prefix}-semantic-badge-${badgeVariant}" data-semantic="badge" data-variant="${badgeVariant}">${escapedContent}</span>`;
-      default:
-        return this.renderSemanticMarker(component, variant) + this.escapeHtml(content);
-    }
-  }
-  /**
-   * Process table cell content with semantic markers and newlines
-   *
-   * Special handling for avatar + text layout:
-   * When content starts with [avatar], wraps in flex container
-   * so avatar and text align horizontally, with text stacking vertically
-   */
-  renderTableCellContent(content) {
-    const avatarMatch = content.match(/^\[avatar(?::([a-z0-9-]+))?\]\s*/i);
-    if (avatarMatch) {
-      const avatarVariant = avatarMatch[1]?.toLowerCase();
-      const avatarHtml = this.renderSemanticMarker("avatar", avatarVariant);
-      const restContent = content.slice(avatarMatch[0].length);
-      const restHtml = this.renderSemanticMarkers(restContent);
-      const lines = restHtml.split("\n");
-      const textHtml = lines.length > 1 ? lines.map((line) => `<span>${line}</span>`).join("") : restHtml;
-      return `<div class="${this.prefix}-cell-avatar-layout">${avatarHtml}<div class="${this.prefix}-cell-avatar-text">${textHtml}</div></div>`;
-    }
-    const withMarkers = this.renderSemanticMarkers(content);
-    return withMarkers.replace(/\n/g, "<br>");
+    return renderDivider(node, this.getRenderContext());
   }
 };
 function createHtmlRenderer(options) {
   return new HtmlRenderer(options);
 }
 
-// src/renderer/svg/flex-layout.ts
-function computeFlexLayout(items, config) {
-  const { mainSize, crossSize, justifyContent, alignItems, gap } = config;
-  const computed = items.map((props, index) => {
-    let flexBasis;
-    if (props.basis === "auto" || props.basis === "content") {
-      flexBasis = props.contentSize;
-    } else {
-      flexBasis = props.basis;
-    }
-    flexBasis = clamp(flexBasis, props.minSize, props.maxSize);
-    return {
-      index,
-      props,
-      flexBasis,
-      mainSize: flexBasis,
-      crossSize: 0,
-      mainPosition: 0,
-      crossPosition: 0,
-      frozen: false,
-      scaledShrinkFactor: props.shrink * flexBasis
-    };
-  });
-  const totalGap = Math.max(0, (items.length - 1) * gap);
-  const totalFlexBasis = computed.reduce((sum, item) => sum + item.flexBasis, 0);
-  let freeSpace = mainSize - totalFlexBasis - totalGap;
-  if (freeSpace !== 0) {
-    resolveFlexibleLengths(computed, freeSpace);
-  }
-  distributeMainAxis(computed, mainSize, totalGap, gap, justifyContent);
-  const crossSizeMax = crossSize ?? Math.max(...computed.map((item) => item.props.contentSize), 0);
-  alignCrossAxis(computed, crossSizeMax, alignItems);
-  const mainSizeUsed = computed.reduce((sum, item) => sum + item.mainSize, 0) + totalGap;
-  return {
-    items: computed,
-    mainSizeUsed,
-    crossSizeMax
-  };
-}
-function resolveFlexibleLengths(items, initialFreeSpace) {
-  items.forEach((item) => {
-    item.frozen = false;
-    item.mainSize = item.flexBasis;
-  });
-  let freeSpace = initialFreeSpace;
-  const isGrowing = freeSpace > 0;
-  let iteration = 0;
-  const maxIterations = items.length + 1;
-  while (iteration < maxIterations) {
-    iteration++;
-    const unfrozen = items.filter((item) => !item.frozen);
-    if (unfrozen.length === 0) break;
-    let flexFactorSum;
-    if (isGrowing) {
-      flexFactorSum = unfrozen.reduce((sum, item) => sum + item.props.grow, 0);
-    } else {
-      flexFactorSum = unfrozen.reduce((sum, item) => sum + item.scaledShrinkFactor, 0);
-    }
-    if (flexFactorSum === 0) {
-      unfrozen.forEach((item) => item.frozen = true);
-      break;
-    }
-    const usedSpace = items.reduce((sum, item) => sum + item.mainSize, 0);
-    const containerMainSize = usedSpace + freeSpace;
-    freeSpace = containerMainSize - usedSpace;
-    let totalViolation = 0;
-    for (const item of unfrozen) {
-      let flexFraction;
-      if (isGrowing) {
-        flexFraction = item.props.grow / flexFactorSum;
-      } else {
-        flexFraction = item.scaledShrinkFactor / flexFactorSum;
-      }
-      const deltaSize = freeSpace * flexFraction;
-      const targetSize = item.flexBasis + deltaSize;
-      const clampedSize = clamp(targetSize, item.props.minSize, item.props.maxSize);
-      const violation = clampedSize - targetSize;
-      item.mainSize = clampedSize;
-      totalViolation += violation;
-      if (violation !== 0) {
-        item.frozen = true;
-      }
-    }
-    if (Math.abs(totalViolation) < 0.01) {
-      unfrozen.forEach((item) => item.frozen = true);
-      break;
-    }
-    freeSpace = containerMainSize - items.reduce((sum, item) => sum + item.mainSize, 0);
-  }
-}
-function distributeMainAxis(items, containerSize, totalGap, gap, justifyContent) {
-  if (items.length === 0) return;
-  const totalItemSize = items.reduce((sum, item) => sum + item.mainSize, 0);
-  const freeSpace = containerSize - totalItemSize - totalGap;
-  let position = 0;
-  let itemGap = gap;
-  let leadingSpace = 0;
-  switch (justifyContent) {
-    case "flex-start":
-      leadingSpace = 0;
-      break;
-    case "flex-end":
-      leadingSpace = freeSpace;
-      break;
-    case "center":
-      leadingSpace = freeSpace / 2;
-      break;
-    case "space-between":
-      leadingSpace = 0;
-      if (items.length > 1) {
-        itemGap = gap + freeSpace / (items.length - 1);
-      }
-      break;
-    case "space-around":
-      if (items.length > 0) {
-        const spacePerItem = freeSpace / items.length;
-        leadingSpace = spacePerItem / 2;
-        itemGap = gap + spacePerItem;
-      }
-      break;
-    case "space-evenly":
-      if (items.length > 0) {
-        const totalSpaces = items.length + 1;
-        const spaceSize = freeSpace / totalSpaces;
-        leadingSpace = spaceSize;
-        itemGap = gap + spaceSize;
-      }
-      break;
-  }
-  position = leadingSpace;
-  for (let i = 0; i < items.length; i++) {
-    items[i].mainPosition = position;
-    position += items[i].mainSize;
-    if (i < items.length - 1) {
-      position += itemGap;
-    }
-  }
-}
-function alignCrossAxis(items, containerCrossSize, alignItems) {
-  for (const item of items) {
-    const align = item.props.alignSelf ?? alignItems;
-    const itemCrossSize = item.props.contentSize;
-    item.crossSize = align === "stretch" ? containerCrossSize : itemCrossSize;
-    switch (align) {
-      case "flex-start":
-        item.crossPosition = 0;
-        break;
-      case "flex-end":
-        item.crossPosition = containerCrossSize - item.crossSize;
-        break;
-      case "center":
-        item.crossPosition = (containerCrossSize - item.crossSize) / 2;
-        break;
-      case "stretch":
-        item.crossPosition = 0;
-        item.crossSize = containerCrossSize;
-        break;
-      case "baseline":
-        item.crossPosition = 0;
-        break;
-    }
-  }
-}
-function clamp(value, min, max) {
-  return Math.max(min, Math.min(max, value));
-}
-function toJustifyContent(justify) {
-  switch (justify) {
-    case "start":
-      return "flex-start";
-    case "end":
-      return "flex-end";
-    case "center":
-      return "center";
-    case "between":
-      return "space-between";
-    case "around":
-      return "space-around";
-    case "evenly":
-      return "space-evenly";
-    default:
-      return "flex-start";
-  }
-}
-function toAlignItems(align) {
-  switch (align) {
-    case "start":
-      return "flex-start";
-    case "end":
-      return "flex-end";
-    case "center":
-      return "center";
-    case "stretch":
-      return "stretch";
-    case "baseline":
-      return "baseline";
-    default:
-      return "stretch";
-  }
-}
-function createFlexItemProps(contentSize, options = {}) {
-  return {
-    basis: options.basis ?? "auto",
-    grow: options.grow ?? 0,
-    shrink: options.shrink ?? 1,
-    minSize: options.minSize ?? 0,
-    maxSize: options.maxSize ?? Infinity,
-    contentSize,
-    alignSelf: options.alignSelf
-  };
-}
-function createFlexGrowItemProps(contentSize, options = {}) {
-  return {
-    basis: options.basis ?? 0,
-    grow: options.grow ?? 1,
-    shrink: options.shrink ?? 1,
-    minSize: options.minSize ?? 0,
-    maxSize: options.maxSize ?? Infinity,
-    contentSize,
-    alignSelf: options.alignSelf
-  };
-}
-
-// src/renderer/svg/index.ts
-var SvgRenderer = class {
-  options;
-  theme;
-  pageWidth = 0;
-  pageHeight = 0;
-  clipPathDefs = [];
-  clipPathCounter = 0;
-  // Default spacing values
-  DEFAULT_GAP = 16;
-  constructor(options = {}) {
-    this.options = {
-      width: options.width ?? 800,
-      height: options.height ?? 600,
-      scale: options.scale ?? 1,
-      background: options.background ?? "#ffffff",
-      padding: options.padding ?? 20,
-      fontFamily: options.fontFamily ?? "system-ui, -apple-system, sans-serif"
-    };
-    this.theme = defaultTheme;
-  }
-  /**
-   * Render a wireframe document to SVG
-   */
-  render(doc) {
-    this.clipPathDefs = [];
-    this.clipPathCounter = 0;
-    const firstPage = doc.children[0];
-    let width = this.options.width;
-    let height = this.options.height;
-    if (firstPage) {
-      const pageAny = firstPage;
-      const hasExplicitWidth = pageAny.width !== void 0;
-      const hasExplicitHeight = pageAny.height !== void 0;
-      if (hasExplicitWidth || hasExplicitHeight) {
-        if (hasExplicitWidth) {
-          width = pageAny.width;
-        }
-        if (hasExplicitHeight) {
-          height = pageAny.height;
-        }
-      } else if (firstPage.viewport !== void 0 || firstPage.device !== void 0) {
-        const viewport = resolveViewport(firstPage.viewport, firstPage.device);
-        width = viewport.width;
-        height = viewport.height;
-      }
-    }
-    this.pageWidth = width;
-    this.pageHeight = height;
-    const content = doc.children.map((page) => this.renderPage(page)).join("\n");
-    const allDefs = this.generateDefs() + "\n" + this.clipPathDefs.join("\n");
-    const svg = `<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
-  <defs>
-    ${allDefs}
-  </defs>
-  <rect width="100%" height="100%" fill="${this.options.background}"/>
-  <g transform="scale(${this.options.scale})">
-    ${content}
-  </g>
-</svg>`;
-    return { svg, width, height };
-  }
-  /**
-   * Generate SVG defs (styles)
-   */
-  generateDefs() {
-    return `
-    <style>
-      text { font-family: ${this.options.fontFamily}; }
-      .wf-title { font-weight: 600; }
-      .wf-muted { fill: ${this.theme.colors.muted}; }
-    </style>
-    `;
-  }
-  // ===========================================
-  // Page Layout
-  // ===========================================
-  renderPage(page) {
-    const padding = this.options.padding;
-    const contentWidth = this.pageWidth - padding * 2;
-    const contentHeight = this.pageHeight - padding * 2;
-    const constraints = {
-      maxWidth: contentWidth,
-      maxHeight: contentHeight
-    };
-    const childBoxes = [];
-    let currentY = padding;
-    const isCentered = page.centered === true;
-    const hasHeader = page.children.some((c) => c.type === "Header");
-    const hasFooter = page.children.some((c) => c.type === "Footer");
-    const hasMain = page.children.some((c) => c.type === "Main");
-    if (hasHeader || hasFooter || hasMain) {
-      return this.renderPageWithFixedLayout(page, padding, contentWidth, contentHeight);
-    }
-    const measurements = page.children.map((child) => this.measureNode(child, constraints));
-    const gap = this.getGap(page) || this.DEFAULT_GAP;
-    const totalChildrenHeight = measurements.reduce((sum, m, i) => {
-      return sum + m.height + (i > 0 ? gap : 0);
-    }, 0);
-    if (isCentered) {
-      const availableHeight = contentHeight;
-      currentY = padding + Math.max(0, (availableHeight - totalChildrenHeight) / 2);
-    }
-    for (let i = 0; i < page.children.length; i++) {
-      const child = page.children[i];
-      const measurement = measurements[i];
-      let childX = padding;
-      if (isCentered || this.shouldCenterHorizontally(child)) {
-        childX = padding + (contentWidth - measurement.width) / 2;
-      }
-      const box = this.layoutNode(child, childX, currentY, constraints);
-      childBoxes.push(box);
-      currentY += box.height + gap;
-    }
-    const elements = [];
-    for (const box of childBoxes) {
-      elements.push(this.renderBox(box));
-    }
-    return elements.join("\n");
-  }
-  /**
-   * Render page with fixed header/footer layout
-   * Header at top, Footer at bottom, Main fills remaining space
-   */
-  renderPageWithFixedLayout(page, padding, contentWidth, contentHeight) {
-    const constraints = {
-      maxWidth: contentWidth,
-      maxHeight: contentHeight
-    };
-    const header = page.children.find((c) => c.type === "Header");
-    const footer = page.children.find((c) => c.type === "Footer");
-    const otherChildren = page.children.filter((c) => c.type !== "Header" && c.type !== "Footer");
-    const elements = [];
-    let headerHeight = 0;
-    let footerHeight = 0;
-    let currentY = padding;
-    if (header) {
-      const headerMeasure = this.measureNode(header, constraints);
-      headerHeight = headerMeasure.height;
-      const headerBox = this.layoutNode(header, padding, currentY, constraints);
-      elements.push(this.renderBox(headerBox));
-    }
-    if (footer) {
-      const footerMeasure = this.measureNode(footer, constraints);
-      footerHeight = footerMeasure.height;
-      const footerY = this.pageHeight - padding - footerHeight;
-      const footerBox = this.layoutNode(footer, padding, footerY, constraints);
-      elements.push(this.renderBox(footerBox));
-    }
-    const mainStartY = currentY + headerHeight;
-    const mainEndY = this.pageHeight - padding - footerHeight;
-    const mainHeight = mainEndY - mainStartY;
-    if (otherChildren.length > 0) {
-      const mainConstraints = {
-        maxWidth: contentWidth,
-        maxHeight: mainHeight
-      };
-      const clipId = `main-clip-${this.clipPathCounter++}`;
-      this.clipPathDefs.push(`<clipPath id="${clipId}"><rect x="${padding}" y="${mainStartY}" width="${contentWidth}" height="${mainHeight}"/></clipPath>`);
-      const mainContent = [];
-      mainContent.push(`<g clip-path="url(#${clipId})">`);
-      let childY = mainStartY;
-      const gap = this.getGap(page) || 0;
-      for (const child of otherChildren) {
-        const childBox = this.layoutNode(child, padding, childY, mainConstraints);
-        mainContent.push(this.renderBox(childBox));
-        childY += childBox.height + gap;
-      }
-      mainContent.push(`</g>`);
-      elements.push(mainContent.join("\n"));
-    }
-    return elements.join("\n");
-  }
-  shouldCenterHorizontally(node) {
-    return node.type === "Card" || node.type === "Modal";
-  }
-  // ===========================================
-  // Measurement Phase
-  // ===========================================
-  measureNode(node, constraints) {
-    switch (node.type) {
-      case "Row":
-        return this.measureRow(node, constraints);
-      case "Col":
-        return this.measureCol(node, constraints);
-      case "Header":
-        return this.measureHeader(node, constraints);
-      case "Footer":
-        return this.measureFooter(node, constraints);
-      case "Main":
-        return this.measureMain(node, constraints);
-      case "Sidebar":
-        return this.measureSidebar(node, constraints);
-      case "Card":
-        return this.measureCard(node, constraints);
-      case "Modal":
-        return this.measureModal(node, constraints);
-      case "Title":
-        return this.measureTitle(node);
-      case "Text":
-        return this.measureText(node);
-      case "Button":
-        return this.measureButton(node, constraints);
-      case "Input":
-        return this.measureInput(node, constraints);
-      case "Textarea":
-        return this.measureTextarea(node, constraints);
-      case "Select":
-        return this.measureSelect(node, constraints);
-      case "Checkbox":
-        return this.measureCheckbox(node);
-      case "Radio":
-        return this.measureRadio(node);
-      case "Switch":
-        return this.measureSwitch(node);
-      case "Link":
-        return this.measureLink(node);
-      case "Image":
-        return this.measureImage(node, constraints);
-      case "Placeholder":
-        return this.measurePlaceholder(node, constraints);
-      case "Avatar":
-        return this.measureAvatar(node, constraints);
-      case "Badge":
-        return this.measureBadge(node);
-      case "Table":
-        return this.measureTable(node);
-      case "List":
-        return this.measureList(node);
-      case "Alert":
-        return this.measureAlert(node, constraints);
-      case "Progress":
-        return this.measureProgress(node, constraints);
-      case "Spinner":
-        return this.measureSpinner(node);
-      case "Nav":
-        return this.measureNav(node);
-      case "Tabs":
-        return this.measureTabs(node);
-      case "Breadcrumb":
-        return this.measureBreadcrumb(node);
-      case "Icon":
-        return this.measureIcon(node);
-      case "Divider":
-        return this.measureDivider(node, constraints);
-      default:
-        return { width: 100, height: 40 };
-    }
-  }
-  measureRow(node, constraints) {
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const maxChildHeight = Math.max(...childMeasurements.map((m) => m.height), 0);
-    const totalChildWidth = childMeasurements.reduce((sum, m) => sum + m.width, 0);
-    const totalGapWidth = Math.max(0, (node.children.length - 1) * gap);
-    const contentWidth = totalChildWidth + totalGapWidth + padding.left + padding.right;
-    const hasExplicitWidth = "w" in node && node.w !== void 0;
-    const width = hasExplicitWidth ? constraints.maxWidth : Math.min(contentWidth, constraints.maxWidth);
-    return {
-      width,
-      height: maxChildHeight + padding.top + padding.bottom
-    };
-  }
-  measureCol(node, constraints) {
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const padding = this.getPadding(node);
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const totalHeight = childMeasurements.reduce(
-      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-      0
-    );
-    const maxChildWidth = Math.max(...childMeasurements.map((m) => m.width), 0);
-    return {
-      width: Math.max(maxChildWidth + padding.left + padding.right, constraints.maxWidth),
-      height: totalHeight + padding.top + padding.bottom
-    };
-  }
-  measureHeader(node, constraints) {
-    const padding = this.getPadding(node);
-    const height = this.resolveSize(node.h) || 56;
-    return {
-      width: constraints.maxWidth,
-      height: height + padding.top + padding.bottom
-    };
-  }
-  measureFooter(node, constraints) {
-    const padding = this.getPadding(node);
-    const height = this.resolveSize(node.h) || 60;
-    return {
-      width: constraints.maxWidth,
-      height: height + padding.top + padding.bottom
-    };
-  }
-  measureMain(node, constraints) {
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const totalHeight = childMeasurements.reduce(
-      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-      0
-    );
-    return {
-      width: constraints.maxWidth,
-      height: totalHeight + padding.top + padding.bottom
-    };
-  }
-  measureSidebar(node, constraints) {
-    const width = this.resolveSize(node.w) || 200;
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? 8;
-    const innerWidth = width - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const contentHeight = childMeasurements.reduce(
-      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-      0
-    ) + padding.top + padding.bottom;
-    const explicitHeight = this.resolveSize(node.h);
-    const height = explicitHeight || constraints.maxHeight || contentHeight;
-    return { width, height };
-  }
-  measureCard(node, constraints) {
-    let cardWidth = this.resolveSize(node.w);
-    if (!cardWidth) {
-      cardWidth = Math.min(360, constraints.maxWidth);
-    } else {
-      cardWidth = Math.min(cardWidth, constraints.maxWidth);
-    }
-    const explicitHeight = this.resolveSize(node.h);
-    if (explicitHeight) {
-      return { width: cardWidth, height: explicitHeight };
-    }
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const innerWidth = cardWidth - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    let contentHeight = 0;
-    if (node.title) {
-      contentHeight += 28;
-    }
-    contentHeight += childMeasurements.reduce(
-      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-      0
-    );
-    return {
-      width: cardWidth,
-      height: contentHeight + padding.top + padding.bottom
-    };
-  }
-  measureModal(node, constraints) {
-    const width = this.resolveSize(node.w) || 400;
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const innerWidth = width - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    let contentHeight = node.title ? 40 : 0;
-    contentHeight += childMeasurements.reduce(
-      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-      0
-    );
-    return {
-      width,
-      height: contentHeight + padding.top + padding.bottom
-    };
-  }
-  measureTitle(node) {
-    const level = node.level || 1;
-    const fontSize = this.getTitleFontSize(level);
-    const textWidth = this.estimateTextWidth(node.content, fontSize);
-    return { width: textWidth, height: fontSize + 8 };
-  }
-  measureText(node) {
-    const fontSize = this.resolveFontSize(node.size);
-    const textWidth = this.estimateTextWidth(node.content, fontSize);
-    return { width: textWidth, height: fontSize + 8 };
-  }
-  measureButton(node, constraints) {
-    const hasIcon = !!node.icon;
-    const isIconOnly = hasIcon && !node.content.trim();
-    const iconSize = 16;
-    const padding = 16;
-    let width;
-    if (this.isFullWidth(node)) {
-      width = constraints.maxWidth;
-    } else if (isIconOnly) {
-      width = iconSize + padding * 2;
-    } else if (hasIcon) {
-      width = Math.max(80, this.estimateTextWidth(node.content, 14) + iconSize + 48);
-    } else {
-      width = Math.max(80, this.estimateTextWidth(node.content, 14) + 32);
-    }
-    return { width, height: 40 };
-  }
-  measureInput(node, constraints) {
-    let width;
-    if (this.resolveSize(node.w)) {
-      width = this.resolveSize(node.w);
-    } else if (constraints.inHeader) {
-      const placeholderWidth = node.placeholder ? this.estimateTextWidth(node.placeholder, 14) : 60;
-      width = Math.max(120, placeholderWidth + 24 + 100);
-    } else {
-      width = constraints.maxWidth;
-    }
-    let height = 36;
-    if (node.label) height += 24;
-    return { width, height };
-  }
-  measureTextarea(node, constraints) {
-    const width = this.resolveSize(node.w) || constraints.maxWidth;
-    let height = node.rows ? node.rows * 24 : 100;
-    if (node.label) height += 24;
-    return { width, height };
-  }
-  measureSelect(node, constraints) {
-    const width = this.resolveSize(node.w) || constraints.maxWidth;
-    let height = 40;
-    if (node.label) height += 24;
-    return { width, height };
-  }
-  measureCheckbox(node) {
-    const labelWidth = node.label ? this.estimateTextWidth(node.label, 14) + 8 : 0;
-    return { width: 18 + labelWidth, height: 24 };
-  }
-  measureRadio(node) {
-    const labelWidth = node.label ? this.estimateTextWidth(node.label, 14) + 8 : 0;
-    return { width: 18 + labelWidth, height: 24 };
-  }
-  measureSwitch(node) {
-    const labelWidth = node.label ? this.estimateTextWidth(node.label, 14) + 8 : 0;
-    return { width: 44 + labelWidth, height: 28 };
-  }
-  measureLink(node) {
-    const fontSize = 14;
-    const textWidth = this.estimateTextWidth(node.content, fontSize);
-    return { width: textWidth, height: fontSize + 8 };
-  }
-  measureImage(node, constraints) {
-    let width;
-    if (this.isFullWidth(node)) {
-      width = constraints.maxWidth;
-    } else {
-      width = this.resolveSize(node.w) || 200;
-    }
-    const height = this.resolveSize(node.h) || 150;
-    return { width, height };
-  }
-  measurePlaceholder(node, constraints) {
-    let width;
-    if (node.w !== void 0) {
-      width = this.isFullWidth(node) ? constraints.maxWidth : this.resolveSize(node.w) || 200;
-    } else {
-      width = constraints.maxWidth || 200;
-    }
-    const height = this.resolveSize(node.h) || 100;
-    return { width, height };
-  }
-  measureAvatar(node, constraints) {
-    const sizes = { xs: 24, sm: 32, md: 40, lg: 48, xl: 64 };
-    const defaultSize = constraints?.inHeader ? "sm" : "md";
-    const size = sizes[node.size || defaultSize] || 40;
-    return { width: size, height: size };
-  }
-  measureBadge(node) {
-    const width = Math.max(24, this.estimateTextWidth(node.content, 12) + 16);
-    return { width, height: 22 };
-  }
-  measureTable(node) {
-    const columns = node.columns || [];
-    const rows = node.rows || [];
-    const rowCount = rows.length || 3;
-    const colWidth = 120;
-    const rowHeight = 40;
-    return {
-      width: columns.length * colWidth,
-      height: (rowCount + 1) * rowHeight
-    };
-  }
-  measureList(node) {
-    const items = node.items || [];
-    const maxItemWidth = Math.max(...items.map((item) => {
-      const content = typeof item === "string" ? item : item.content;
-      return this.estimateTextWidth(content, 14);
-    }), 100);
-    return { width: maxItemWidth + 24, height: items.length * 28 };
-  }
-  measureAlert(_node, constraints) {
-    const width = Math.min(400, constraints.maxWidth);
-    return { width, height: 48 };
-  }
-  measureProgress(node, constraints) {
-    const width = Math.min(200, constraints.maxWidth);
-    let height = 8;
-    if (node.label) height += 24;
-    return { width, height };
-  }
-  measureSpinner(node) {
-    const sizes = { xs: 16, sm: 20, md: 24, lg: 32, xl: 40 };
-    const size = sizes[node.size || "md"] || 24;
-    return { width: size, height: size };
-  }
-  measureNav(node) {
-    const items = node.items || [];
-    if (node.vertical) {
-      const maxWidth = Math.max(...items.map((item) => {
-        const label = typeof item === "string" ? item : item.label;
-        return this.estimateTextWidth(label, 14);
-      }), 100);
-      return { width: maxWidth, height: items.length * 32 };
-    } else {
-      const totalWidth = items.reduce((sum, item) => {
-        const label = typeof item === "string" ? item : item.label;
-        return sum + this.estimateTextWidth(label, 14) + 24;
-      }, 0);
-      return { width: totalWidth, height: 32 };
-    }
-  }
-  measureTabs(node) {
-    const items = node.items || [];
-    const totalWidth = items.reduce((sum, item) => {
-      const label = typeof item === "string" ? item : item;
-      return sum + this.estimateTextWidth(label, 14) + 32;
-    }, 0);
-    return { width: totalWidth, height: 44 };
-  }
-  measureBreadcrumb(node) {
-    const items = node.items || [];
-    const totalWidth = items.reduce((sum, item, idx) => {
-      const label = typeof item === "string" ? item : item.label;
-      return sum + this.estimateTextWidth(label, 14) + (idx < items.length - 1 ? 24 : 0);
-    }, 0);
-    return { width: totalWidth, height: 28 };
-  }
-  measureIcon(node) {
-    const sizes = { xs: 12, sm: 16, md: 20, lg: 24, xl: 32 };
-    const size = sizes[node.size || "md"] || 20;
-    return { width: size, height: size };
-  }
-  measureDivider(_node, constraints) {
-    return { width: constraints.maxWidth, height: 1 };
-  }
-  // ===========================================
-  // Layout Phase
-  // ===========================================
-  layoutNode(node, x, y, constraints) {
-    switch (node.type) {
-      case "Row":
-        return this.layoutRow(node, x, y, constraints);
-      case "Col":
-        return this.layoutCol(node, x, y, constraints);
-      case "Header":
-        return this.layoutHeader(node, x, y, constraints);
-      case "Footer":
-        return this.layoutFooter(node, x, y, constraints);
-      case "Main":
-        return this.layoutMain(node, x, y, constraints);
-      case "Sidebar":
-        return this.layoutSidebar(node, x, y, constraints);
-      case "Card":
-        return this.layoutCard(node, x, y, constraints);
-      default:
-        const size = this.measureNode(node, constraints);
-        return {
-          x,
-          y,
-          width: size.width,
-          height: size.height,
-          node,
-          children: []
-        };
-    }
-  }
-  layoutRow(node, x, y, constraints) {
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const padding = this.getPadding(node);
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const justify = node.justify || "start";
-    const align = node.align || (constraints.inHeader ? "center" : "start");
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const flexItems = node.children.map((child, i) => {
-      const measurement = childMeasurements[i];
-      if ("w" in child && child.w !== void 0 && child.w !== "full") {
-        const resolved = this.resolveSize(child.w);
-        if (resolved !== void 0) {
-          return createFlexItemProps(measurement.height, {
-            basis: resolved,
-            grow: 0,
-            shrink: 0,
-            minSize: resolved,
-            maxSize: resolved,
-            contentSize: measurement.width
-          });
-        }
-      }
-      if (this.isFlexContainer(child)) {
-        return createFlexGrowItemProps(measurement.height, {
-          basis: 0,
-          grow: 1,
-          shrink: 1,
-          minSize: 0,
-          maxSize: Infinity,
-          contentSize: measurement.width
-        });
-      }
-      if (constraints.inHeader && child.type === "Input") {
-        return createFlexGrowItemProps(measurement.height, {
-          basis: measurement.width,
-          // auto = content size
-          grow: 1,
-          shrink: 1,
-          minSize: 120,
-          // min-width: 120px
-          maxSize: Infinity,
-          contentSize: measurement.width
-        });
-      }
-      return createFlexItemProps(measurement.height, {
-        basis: measurement.width,
-        // auto = content size
-        grow: 0,
-        shrink: 1,
-        minSize: 0,
-        maxSize: Infinity,
-        contentSize: measurement.width
-      });
-    });
-    const flexConfig = {
-      mainSize: innerWidth,
-      crossSize: void 0,
-      // Will use max child height
-      direction: "row",
-      justifyContent: toJustifyContent(justify),
-      alignItems: toAlignItems(align),
-      gap
-    };
-    const flexResult = computeFlexLayout(flexItems, flexConfig);
-    const maxChildHeight = Math.max(...childMeasurements.map((m) => m.height), 0);
-    const innerMaxHeight = constraints.maxHeight ? constraints.maxHeight - padding.top - padding.bottom : void 0;
-    const effectiveHeight = innerMaxHeight || maxChildHeight;
-    const rowHeight = effectiveHeight + padding.top + padding.bottom;
-    const children = [];
-    for (let i = 0; i < node.children.length; i++) {
-      const child = node.children[i];
-      const flexItem = flexResult.items[i];
-      const measurement = childMeasurements[i];
-      const childX = x + padding.left + flexItem.mainPosition;
-      let childY = y + padding.top;
-      switch (align) {
-        case "center":
-          childY = y + padding.top + (maxChildHeight - measurement.height) / 2;
-          break;
-        case "end":
-          childY = y + padding.top + (maxChildHeight - measurement.height);
-          break;
-      }
-      const childBox = this.layoutNode(child, childX, childY, {
-        ...constraints,
-        maxWidth: flexItem.mainSize,
-        maxHeight: effectiveHeight
-      });
-      children.push(childBox);
-    }
-    return {
-      x,
-      y,
-      width: constraints.maxWidth,
-      height: rowHeight,
-      node,
-      children,
-      padding
-    };
-  }
-  layoutCol(node, x, y, constraints) {
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const padding = this.getPadding(node);
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const innerHeight = constraints.maxHeight ? constraints.maxHeight - padding.top - padding.bottom : void 0;
-    const align = node.align || "stretch";
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const flexItems = node.children.map((child, i) => {
-      const measurement = childMeasurements[i];
-      if ("h" in child && child.h !== void 0) {
-        const resolved = this.resolveSize(child.h);
-        if (resolved !== void 0) {
-          return createFlexItemProps(measurement.width, {
-            basis: resolved,
-            grow: 0,
-            shrink: 0,
-            minSize: resolved,
-            maxSize: resolved,
-            contentSize: measurement.height
-          });
-        }
-      }
-      if (child.type === "Row" && this.rowContainsSidebarOrMain(child)) {
-        return createFlexGrowItemProps(measurement.width, {
-          basis: 0,
-          grow: 1,
-          shrink: 1,
-          minSize: 0,
-          maxSize: Infinity,
-          contentSize: measurement.height
-        });
-      }
-      return createFlexItemProps(measurement.width, {
-        basis: measurement.height,
-        // auto = content size
-        grow: 0,
-        shrink: 1,
-        minSize: 0,
-        maxSize: Infinity,
-        contentSize: measurement.height
-      });
-    });
-    const flexConfig = {
-      mainSize: innerHeight ?? childMeasurements.reduce(
-        (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-        0
-      ),
-      crossSize: innerWidth,
-      direction: "column",
-      justifyContent: "flex-start",
-      alignItems: toAlignItems(align),
-      gap
-    };
-    const flexResult = computeFlexLayout(flexItems, flexConfig);
-    const children = [];
-    for (let i = 0; i < node.children.length; i++) {
-      const child = node.children[i];
-      const flexItem = flexResult.items[i];
-      const measurement = childMeasurements[i];
-      let childX = x + padding.left;
-      let childWidth = align === "stretch" ? innerWidth : measurement.width;
-      switch (align) {
-        case "center":
-          childX = x + padding.left + (innerWidth - measurement.width) / 2;
-          break;
-        case "end":
-          childX = x + padding.left + (innerWidth - measurement.width);
-          break;
-      }
-      const childY = y + padding.top + flexItem.mainPosition;
-      const childBox = this.layoutNode(child, childX, childY, {
-        ...constraints,
-        maxWidth: childWidth,
-        maxHeight: flexItem.mainSize
-      });
-      children.push(childBox);
-    }
-    const totalHeight = flexResult.mainSizeUsed;
-    return {
-      x,
-      y,
-      width: constraints.maxWidth,
-      height: totalHeight + padding.top + padding.bottom,
-      node,
-      children,
-      padding
-    };
-  }
-  rowContainsSidebarOrMain(row) {
-    return row.children.some(
-      (child) => child.type === "Sidebar" || child.type === "Main"
-    );
-  }
-  layoutHeader(node, x, y, constraints) {
-    const padding = this.getPadding(node);
-    const height = this.resolveSize(node.h) || 56;
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const children = [];
-    let currentY = y + padding.top;
-    for (const child of node.children) {
-      const childBox = this.layoutNode(child, x + padding.left, currentY, {
-        ...constraints,
-        maxWidth: innerWidth,
-        maxHeight: void 0,
-        // Children use natural height
-        inHeader: true
-        // Pass header context for child sizing (e.g., smaller avatars)
-      });
-      const verticalOffset = (height - childBox.height) / 2;
-      childBox.y = y + padding.top + verticalOffset;
-      this.adjustChildrenY(childBox, verticalOffset);
-      children.push(childBox);
-      currentY += childBox.height;
-    }
-    return {
-      x,
-      y,
-      width: constraints.maxWidth,
-      height: height + padding.top + padding.bottom,
-      node,
-      children,
-      padding
-    };
-  }
-  adjustChildrenY(box, offset) {
-    for (const child of box.children) {
-      child.y += offset;
-      this.adjustChildrenY(child, offset);
-    }
-  }
-  /**
-   * Check if a node should flex to fill available space in a Row
-   * Only layout containers without explicit width should flex
-   */
-  isFlexContainer(node) {
-    if (node.type === "Main") return true;
-    if (node.type === "Col" && !("w" in node && node.w !== void 0)) return true;
-    return false;
-  }
-  layoutFooter(node, x, y, constraints) {
-    const padding = this.getPadding(node);
-    const height = this.resolveSize(node.h) || 60;
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const children = [];
-    let currentY = y + padding.top;
-    for (const child of node.children) {
-      const childBox = this.layoutNode(child, x + padding.left, currentY, {
-        ...constraints,
-        maxWidth: innerWidth,
-        maxHeight: void 0
-        // Children use natural height
-      });
-      const verticalOffset = (height - childBox.height) / 2;
-      childBox.y = y + padding.top + verticalOffset;
-      this.adjustChildrenY(childBox, verticalOffset);
-      children.push(childBox);
-      currentY += childBox.height;
-    }
-    return {
-      x,
-      y,
-      width: constraints.maxWidth,
-      height: height + padding.top + padding.bottom,
-      node,
-      children,
-      padding
-    };
-  }
-  layoutMain(node, x, y, constraints) {
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const children = [];
-    let currentY = y + padding.top;
-    for (let i = 0; i < node.children.length; i++) {
-      const child = node.children[i];
-      const childBox = this.layoutNode(child, x + padding.left, currentY, {
-        ...constraints,
-        maxWidth: innerWidth
-      });
-      children.push(childBox);
-      currentY += childBox.height + gap;
-    }
-    const totalHeight = childMeasurements.reduce(
-      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-      0
-    );
-    return {
-      x,
-      y,
-      width: constraints.maxWidth,
-      height: totalHeight + padding.top + padding.bottom,
-      node,
-      children,
-      padding
-    };
-  }
-  layoutSidebar(node, x, y, constraints) {
-    const width = this.resolveSize(node.w) || 200;
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? 8;
-    const innerWidth = width - padding.left - padding.right;
-    const children = [];
-    let currentY = y + padding.top;
-    for (const child of node.children) {
-      const childBox = this.layoutNode(child, x + padding.left, currentY, {
-        ...constraints,
-        maxWidth: innerWidth
-      });
-      children.push(childBox);
-      currentY += childBox.height + gap;
-    }
-    const contentHeight = currentY - y - padding.top - gap + padding.bottom;
-    const height = constraints.maxHeight || Math.max(contentHeight, 200);
-    return {
-      x,
-      y,
-      width,
-      height,
-      node,
-      children,
-      padding
-    };
-  }
-  layoutCard(node, x, y, constraints) {
-    let cardWidth = this.resolveSize(node.w);
-    if (!cardWidth) {
-      cardWidth = Math.min(360, constraints.maxWidth);
-    }
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const innerWidth = cardWidth - padding.left - padding.right;
-    const children = [];
-    let currentY = y + padding.top;
-    if (node.title) {
-      currentY += 28;
-    }
-    for (const child of node.children) {
-      const childBox = this.layoutNode(child, x + padding.left, currentY, {
-        ...constraints,
-        maxWidth: innerWidth
-      });
-      children.push(childBox);
-      currentY += childBox.height + gap;
-    }
-    const totalHeight = currentY - y - gap + padding.bottom;
-    return {
-      x,
-      y,
-      width: cardWidth,
-      height: totalHeight,
-      node,
-      children,
-      padding
-    };
-  }
-  // ===========================================
-  // Render Phase
-  // ===========================================
-  renderBox(box) {
-    if (!box.node) return "";
-    switch (box.node.type) {
-      case "Row":
-        return this.renderRowBox(box);
-      case "Col":
-        return this.renderColBox(box);
-      case "Header":
-        return this.renderHeaderBox(box);
-      case "Footer":
-        return this.renderFooterBox(box);
-      case "Main":
-        return this.renderMainBox(box);
-      case "Sidebar":
-        return this.renderSidebarBox(box);
-      case "Card":
-        return this.renderCardBox(box);
-      case "Modal":
-        return this.renderModalBox(box);
-      case "Title":
-        return this.renderTitleBox(box);
-      case "Text":
-        return this.renderTextBox(box);
-      case "Button":
-        return this.renderButtonBox(box);
-      case "Input":
-        return this.renderInputBox(box);
-      case "Textarea":
-        return this.renderTextareaBox(box);
-      case "Select":
-        return this.renderSelectBox(box);
-      case "Checkbox":
-        return this.renderCheckboxBox(box);
-      case "Radio":
-        return this.renderRadioBox(box);
-      case "Switch":
-        return this.renderSwitchBox(box);
-      case "Link":
-        return this.renderLinkBox(box);
-      case "Image":
-        return this.renderImageBox(box);
-      case "Placeholder":
-        return this.renderPlaceholderBox(box);
-      case "Avatar":
-        return this.renderAvatarBox(box);
-      case "Badge":
-        return this.renderBadgeBox(box);
-      case "Table":
-        return this.renderTableBox(box);
-      case "List":
-        return this.renderListBox(box);
-      case "Alert":
-        return this.renderAlertBox(box);
-      case "Progress":
-        return this.renderProgressBox(box);
-      case "Spinner":
-        return this.renderSpinnerBox(box);
-      case "Nav":
-        return this.renderNavBox(box);
-      case "Tabs":
-        return this.renderTabsBox(box);
-      case "Breadcrumb":
-        return this.renderBreadcrumbBox(box);
-      case "Icon":
-        return this.renderIconBox(box);
-      case "Divider":
-        return this.renderDividerBox(box);
-      default:
-        return `<!-- Unsupported: ${box.node.type} -->`;
-    }
-  }
-  renderRowBox(box) {
-    const childrenSvg = box.children.map((child) => this.renderBox(child)).join("\n");
-    return childrenSvg;
-  }
-  renderColBox(box) {
-    const childrenSvg = box.children.map((child) => this.renderBox(child)).join("\n");
-    return childrenSvg;
-  }
-  renderHeaderBox(box) {
-    const node = box.node;
-    const hasBorder = node.border !== false;
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" fill="${this.theme.colors.background}"/>`;
-    if (hasBorder) {
-      svg += `<line x1="${box.x}" y1="${box.y + box.height}" x2="${box.x + box.width}" y2="${box.y + box.height}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-    }
-    svg += box.children.map((child) => this.renderBox(child)).join("\n");
-    svg += `</g>`;
-    return svg;
-  }
-  renderFooterBox(box) {
-    const node = box.node;
-    const hasBorder = node.border !== false;
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" fill="${this.theme.colors.background}"`;
-    if (hasBorder) {
-      svg += ` stroke="${this.theme.colors.border}" stroke-width="1"`;
-    }
-    svg += `/>`;
-    svg += box.children.map((child) => this.renderBox(child)).join("\n");
-    svg += `</g>`;
-    return svg;
-  }
-  renderMainBox(box) {
-    const childrenSvg = box.children.map((child) => this.renderBox(child)).join("\n");
-    return childrenSvg;
-  }
-  renderSidebarBox(box) {
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" fill="${this.theme.colors.background}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-    svg += box.children.map((child) => this.renderBox(child)).join("\n");
-    svg += `</g>`;
-    return svg;
-  }
-  renderCardBox(box) {
-    const node = box.node;
-    const shadowAttr = node.shadow ? 'filter="url(#shadow)"' : "";
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="8" fill="white" stroke="${this.theme.colors.border}" stroke-width="1" ${shadowAttr}/>`;
-    if (node.title) {
-      const padding = this.getPadding(node);
-      svg += `<text x="${box.x + padding.left}" y="${box.y + padding.top + 18}" font-size="16" font-weight="600" fill="${this.theme.colors.foreground}">${this.escapeXml(node.title)}</text>`;
-    }
-    svg += box.children.map((child) => this.renderBox(child)).join("\n");
-    svg += `</g>`;
-    return svg;
-  }
-  renderModalBox(box) {
-    const node = box.node;
-    const modalX = (this.pageWidth - box.width) / 2;
-    const modalY = (this.pageHeight - box.height) / 2;
-    let svg = `<g>
-      <rect width="${this.pageWidth}" height="${this.pageHeight}" fill="rgba(0,0,0,0.5)"/>
-      <rect x="${modalX}" y="${modalY}" width="${box.width}" height="${box.height}" rx="8" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-    if (node.title) {
-      svg += `<text x="${modalX + 20}" y="${modalY + 30}" font-size="18" font-weight="600" fill="${this.theme.colors.foreground}">${this.escapeXml(node.title)}</text>`;
-    }
-    for (const child of box.children) {
-      const adjustedChild = { ...child, x: modalX + (child.x - box.x), y: modalY + (child.y - box.y) };
-      svg += this.renderBox(adjustedChild);
-    }
-    svg += `</g>`;
-    return svg;
-  }
-  renderTitleBox(box) {
-    const node = box.node;
-    const level = node.level || 1;
-    const fontSize = this.getTitleFontSize(level);
-    const textY = box.y + fontSize;
-    let textX = box.x;
-    let anchor = "start";
-    if (node.align === "center") {
-      textX = box.x + box.width / 2;
-      anchor = "middle";
-    } else if (node.align === "right") {
-      textX = box.x + box.width;
-      anchor = "end";
-    }
-    return `<text x="${textX}" y="${textY}" font-size="${fontSize}" font-weight="600" fill="${this.theme.colors.foreground}" text-anchor="${anchor}">${this.escapeXml(node.content)}</text>`;
-  }
-  renderTextBox(box) {
-    const node = box.node;
-    const fontSize = this.resolveFontSize(node.size);
-    const fill = node.muted ? this.theme.colors.muted : this.theme.colors.foreground;
-    const fontWeight = node.weight || "normal";
-    const textY = box.y + fontSize;
-    let textX = box.x;
-    let anchor = "start";
-    if (node.align === "center") {
-      textX = box.x + box.width / 2;
-      anchor = "middle";
-    } else if (node.align === "right") {
-      textX = box.x + box.width;
-      anchor = "end";
-    }
-    return `<text x="${textX}" y="${textY}" font-size="${fontSize}" font-weight="${fontWeight}" fill="${fill}" text-anchor="${anchor}">${this.escapeXml(node.content)}</text>`;
-  }
-  renderButtonBox(box) {
-    const node = box.node;
-    const hasIcon = !!node.icon;
-    const isIconOnly = hasIcon && !node.content.trim();
-    let fill = this.theme.colors.primary;
-    let textFill = "#ffffff";
-    let strokeAttr = "";
-    if (node.secondary) {
-      fill = this.theme.colors.secondary;
-    } else if (node.outline) {
-      fill = "white";
-      textFill = this.theme.colors.foreground;
-      strokeAttr = `stroke="${this.theme.colors.border}" stroke-width="1"`;
-    } else if (node.ghost) {
-      fill = "transparent";
-      textFill = this.theme.colors.foreground;
-    }
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="4" fill="${fill}" ${strokeAttr}/>`;
-    if (hasIcon) {
-      const iconData = getIconData(node.icon);
-      if (iconData) {
-        const iconSize = 16;
-        const iconX = isIconOnly ? box.x + (box.width - iconSize) / 2 : box.x + 16;
-        const iconY = box.y + (box.height - iconSize) / 2;
-        svg += this.renderIconPaths(iconData, iconX, iconY, iconSize, textFill);
-      }
-    }
-    if (!isIconOnly) {
-      const textX = hasIcon ? box.x + 36 + (box.width - 52) / 2 : box.x + box.width / 2;
-      svg += `<text x="${textX}" y="${box.y + box.height / 2 + 5}" font-size="14" fill="${textFill}" text-anchor="middle">${this.escapeXml(node.content)}</text>`;
-    }
-    svg += `</g>`;
-    return svg;
-  }
-  renderInputBox(box) {
-    const node = box.node;
-    let y = box.y;
-    let svg = "<g>";
-    if (node.label) {
-      svg += `<text x="${box.x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-      y += 24;
-    }
-    const inputHeight = 36;
-    const placeholder = node.placeholder || "";
-    svg += `<rect x="${box.x}" y="${y}" width="${box.width}" height="${inputHeight}" rx="4" fill="#f4f4f5"/>`;
-    svg += `<text x="${box.x + 12}" y="${y + inputHeight / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(placeholder)}</text>`;
-    svg += "</g>";
-    return svg;
-  }
-  renderTextareaBox(box) {
-    const node = box.node;
-    let y = box.y;
-    let svg = "<g>";
-    if (node.label) {
-      svg += `<text x="${box.x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-      y += 24;
-    }
-    const textareaHeight = box.height - (node.label ? 24 : 0);
-    const placeholder = node.placeholder || "";
-    svg += `<rect x="${box.x}" y="${y}" width="${box.width}" height="${textareaHeight}" rx="4" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-    svg += `<text x="${box.x + 12}" y="${y + 24}" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(placeholder)}</text>`;
-    svg += "</g>";
-    return svg;
-  }
-  renderSelectBox(box) {
-    const node = box.node;
-    let y = box.y;
-    let svg = "<g>";
-    if (node.label) {
-      svg += `<text x="${box.x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-      y += 24;
-    }
-    const selectHeight = 40;
-    const placeholder = node.placeholder || "Select...";
-    svg += `<rect x="${box.x}" y="${y}" width="${box.width}" height="${selectHeight}" rx="4" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-    svg += `<text x="${box.x + 12}" y="${y + selectHeight / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(placeholder)}</text>`;
-    svg += `<path d="M${box.x + box.width - 24} ${y + selectHeight / 2 - 3} l6 6 l6 -6" fill="none" stroke="${this.theme.colors.muted}" stroke-width="1.5"/>`;
-    svg += "</g>";
-    return svg;
-  }
-  renderCheckboxBox(box) {
-    const node = box.node;
-    const size = 18;
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${size}" height="${size}" rx="3" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-    if (node.checked) {
-      svg += `<path d="M${box.x + 4} ${box.y + 9} L${box.x + 7} ${box.y + 12} L${box.x + 14} ${box.y + 5}" fill="none" stroke="${this.theme.colors.foreground}" stroke-width="2"/>`;
-    }
-    if (node.label) {
-      svg += `<text x="${box.x + size + 8}" y="${box.y + size - 3}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-    }
-    svg += "</g>";
-    return svg;
-  }
-  renderRadioBox(box) {
-    const node = box.node;
-    const size = 18;
-    const radius = size / 2;
-    const cx = box.x + radius;
-    const cy = box.y + radius;
-    let svg = `<g>
-      <circle cx="${cx}" cy="${cy}" r="${radius - 1}" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-    if (node.checked) {
-      svg += `<circle cx="${cx}" cy="${cy}" r="${radius - 5}" fill="${this.theme.colors.foreground}"/>`;
-    }
-    if (node.label) {
-      svg += `<text x="${box.x + size + 8}" y="${box.y + size - 3}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-    }
-    svg += "</g>";
-    return svg;
-  }
-  renderSwitchBox(box) {
-    const node = box.node;
-    const width = 44;
-    const height = 24;
-    const radius = height / 2;
-    const isOn = node.checked;
-    const bgColor = isOn ? this.theme.colors.primary : this.theme.colors.border;
-    const knobX = isOn ? box.x + width - radius : box.x + radius;
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${width}" height="${height}" rx="${radius}" fill="${bgColor}"/>
-      <circle cx="${knobX}" cy="${box.y + radius}" r="${radius - 3}" fill="white"/>`;
-    if (node.label) {
-      svg += `<text x="${box.x + width + 8}" y="${box.y + height - 6}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-    }
-    svg += "</g>";
-    return svg;
-  }
-  renderLinkBox(box) {
-    const node = box.node;
-    const fontSize = 14;
-    const textY = box.y + fontSize;
-    return `<text x="${box.x}" y="${textY}" font-size="${fontSize}" fill="${this.theme.colors.primary}" text-decoration="underline">${this.escapeXml(node.content)}</text>`;
-  }
-  renderImageBox(box) {
-    const node = box.node;
-    return `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" fill="${this.theme.colors.muted}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <line x1="${box.x}" y1="${box.y}" x2="${box.x + box.width}" y2="${box.y + box.height}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <line x1="${box.x + box.width}" y1="${box.y}" x2="${box.x}" y2="${box.y + box.height}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="${box.x + box.width / 2}" y="${box.y + box.height / 2 + 5}" font-size="14" fill="${this.theme.colors.foreground}" text-anchor="middle">${this.escapeXml(node.alt || "Image")}</text>
-    </g>`;
-  }
-  renderPlaceholderBox(box) {
-    const node = box.node;
-    const patternId = `placeholder-pattern-${this.clipPathCounter++}`;
-    const patternDef = `<pattern id="${patternId}" width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
-      <rect width="14" height="14" fill="#f9f9f9"/>
-      <rect width="7" height="14" fill="rgba(0,0,0,0.03)"/>
-    </pattern>`;
-    this.clipPathDefs.push(patternDef);
-    return `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="4" fill="url(#${patternId})" stroke="${this.theme.colors.muted}" stroke-width="1" stroke-dasharray="4,2"/>
-      <text x="${box.x + box.width / 2}" y="${box.y + box.height / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}" text-anchor="middle">${this.escapeXml(node.label || "Placeholder")}</text>
-    </g>`;
-  }
-  renderAvatarBox(box) {
-    const node = box.node;
-    const radius = box.width / 2;
-    const cx = box.x + radius;
-    const cy = box.y + radius;
-    const initial = node.name ? node.name.charAt(0).toUpperCase() : "?";
-    return `<g>
-      <circle cx="${cx}" cy="${cy}" r="${radius}" fill="${this.theme.colors.foreground}"/>
-      <text x="${cx}" y="${cy + 5}" font-size="${box.width / 2.5}" fill="${this.theme.colors.background}" text-anchor="middle">${initial}</text>
-    </g>`;
-  }
-  renderBadgeBox(box) {
-    const node = box.node;
-    return `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="11" fill="${this.theme.colors.muted}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="${box.x + box.width / 2}" y="${box.y + box.height / 2 + 4}" font-size="12" fill="${this.theme.colors.foreground}" text-anchor="middle">${this.escapeXml(node.content)}</text>
-    </g>`;
-  }
-  renderTableBox(box) {
-    const node = box.node;
-    const columns = node.columns || [];
-    const rows = node.rows || [];
-    const rowCount = rows.length || 3;
-    const colWidth = 120;
-    const rowHeight = 40;
-    let svg = `<g>`;
-    svg += `<rect x="${box.x}" y="${box.y}" width="${columns.length * colWidth}" height="${rowHeight}" fill="${this.theme.colors.muted}"/>`;
-    columns.forEach((col, i) => {
-      svg += `<text x="${box.x + i * colWidth + 12}" y="${box.y + rowHeight / 2 + 5}" font-size="14" font-weight="600">${this.escapeXml(col)}</text>`;
-    });
-    const displayRowCount = rows.length > 0 ? rows.length : rowCount;
-    for (let rowIdx = 0; rowIdx < displayRowCount; rowIdx++) {
-      const rowY = box.y + (rowIdx + 1) * rowHeight;
-      svg += `<rect x="${box.x}" y="${rowY}" width="${columns.length * colWidth}" height="${rowHeight}" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-      columns.forEach((_, colIdx) => {
-        const cellContent = rows[rowIdx] && rows[rowIdx][colIdx] ? String(typeof rows[rowIdx][colIdx] === "object" ? "..." : rows[rowIdx][colIdx]) : "\u2014";
-        svg += `<text x="${box.x + colIdx * colWidth + 12}" y="${rowY + rowHeight / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(cellContent)}</text>`;
-      });
-    }
-    svg += "</g>";
-    return svg;
-  }
-  renderListBox(box) {
-    const node = box.node;
-    const items = node.items || [];
-    const ordered = node.ordered || false;
-    let svg = "<g>";
-    items.forEach((item, idx) => {
-      const marker = ordered ? `${idx + 1}.` : "\u2022";
-      const content = typeof item === "string" ? item : item.content;
-      svg += `<text x="${box.x}" y="${box.y + idx * 28 + 16}" font-size="14" fill="${this.theme.colors.foreground}">${marker} ${this.escapeXml(content)}</text>`;
-    });
-    svg += "</g>";
-    return svg;
-  }
-  renderAlertBox(box) {
-    const node = box.node;
-    return `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="4" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="${box.x + 16}" y="${box.y + box.height / 2 + 5}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.content)}</text>
-    </g>`;
-  }
-  renderProgressBox(box) {
-    const node = box.node;
-    let y = box.y;
-    let svg = "<g>";
-    if (node.label) {
-      svg += `<text x="${box.x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-      y += 24;
-    }
-    const barHeight = 8;
-    const value = node.value || 0;
-    const max = node.max || 100;
-    const percent = Math.min(100, Math.max(0, value / max * 100));
-    svg += `<rect x="${box.x}" y="${y}" width="${box.width}" height="${barHeight}" rx="${barHeight / 2}" fill="${this.theme.colors.muted}"/>`;
-    svg += `<rect x="${box.x}" y="${y}" width="${box.width * percent / 100}" height="${barHeight}" rx="${barHeight / 2}" fill="${this.theme.colors.primary}"/>`;
-    svg += "</g>";
-    return svg;
-  }
-  renderSpinnerBox(box) {
-    const cx = box.x + box.width / 2;
-    const cy = box.y + box.height / 2;
-    const radius = box.width / 2 - 2;
-    return `<g>
-      <circle cx="${cx}" cy="${cy}" r="${radius}" fill="none" stroke="${this.theme.colors.muted}" stroke-width="2"/>
-      <path d="M${cx},${cy - radius} A${radius},${radius} 0 0,1 ${cx + radius},${cy}" fill="none" stroke="${this.theme.colors.primary}" stroke-width="2" stroke-linecap="round"/>
-    </g>`;
-  }
-  renderNavBox(box) {
-    const node = box.node;
-    const vertical = node.vertical || false;
-    let svg = "<g>";
-    if (node.children && node.children.length > 0) {
-      let offsetY = 0;
-      node.children.forEach((child) => {
-        if (child.type === "divider") {
-          offsetY += 16;
-          svg += `<line x1="${box.x}" y1="${box.y + offsetY}" x2="${box.x + box.width - 32}" y2="${box.y + offsetY}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-          offsetY += 8;
-        } else if (child.type === "group") {
-          svg += `<text x="${box.x}" y="${box.y + offsetY + 16}" font-size="11" font-weight="500" fill="${this.theme.colors.muted}" text-transform="uppercase">${this.escapeXml(child.label)}</text>`;
-          offsetY += 28;
-          child.items.forEach((item) => {
-            if (item.type === "divider") {
-              offsetY += 8;
-              svg += `<line x1="${box.x}" y1="${box.y + offsetY}" x2="${box.x + box.width - 32}" y2="${box.y + offsetY}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-              offsetY += 8;
-            } else {
-              const fill = item.active ? this.theme.colors.foreground : this.theme.colors.muted;
-              const fontWeight = item.active ? 'font-weight="500"' : "";
-              svg += `<text x="${box.x}" y="${box.y + offsetY + 16}" font-size="14" ${fontWeight} fill="${fill}">${this.escapeXml(item.label)}</text>`;
-              offsetY += 32;
-            }
-          });
-        } else if (child.type === "item") {
-          const fill = child.active ? this.theme.colors.foreground : this.theme.colors.muted;
-          const fontWeight = child.active ? 'font-weight="500"' : "";
-          svg += `<text x="${box.x}" y="${box.y + offsetY + 16}" font-size="14" ${fontWeight} fill="${fill}">${this.escapeXml(child.label)}</text>`;
-          offsetY += 32;
-        }
-      });
-      svg += "</g>";
-      return svg;
-    }
-    const items = node.items || [];
-    if (vertical) {
-      items.forEach((item, idx) => {
-        const label = typeof item === "string" ? item : item.label;
-        const isActive = typeof item === "object" && item.active;
-        const fill = isActive ? this.theme.colors.foreground : this.theme.colors.muted;
-        svg += `<text x="${box.x}" y="${box.y + idx * 32 + 16}" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
-      });
-    } else {
-      let offsetX = 0;
-      items.forEach((item) => {
-        const label = typeof item === "string" ? item : item.label;
-        const isActive = typeof item === "object" && item.active;
-        const fill = isActive ? this.theme.colors.foreground : this.theme.colors.muted;
-        svg += `<text x="${box.x + offsetX}" y="${box.y + 16}" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
-        offsetX += this.estimateTextWidth(label, 14) + 24;
-      });
-    }
-    svg += "</g>";
-    return svg;
-  }
-  renderTabsBox(box) {
-    const node = box.node;
-    const items = node.items || [];
-    const tabHeight = 40;
-    let svg = "<g>";
-    let offsetX = 0;
-    items.forEach((item, idx) => {
-      const label = typeof item === "string" ? item : item;
-      const tabWidth = this.estimateTextWidth(label, 14) + 32;
-      const isFirst = idx === 0;
-      svg += `<rect x="${box.x + offsetX}" y="${box.y}" width="${tabWidth}" height="${tabHeight}" fill="${isFirst ? "white" : this.theme.colors.muted}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-      svg += `<text x="${box.x + offsetX + tabWidth / 2}" y="${box.y + tabHeight / 2 + 5}" font-size="14" text-anchor="middle" fill="${this.theme.colors.foreground}">${this.escapeXml(label)}</text>`;
-      offsetX += tabWidth;
-    });
-    svg += "</g>";
-    return svg;
-  }
-  renderBreadcrumbBox(box) {
-    const node = box.node;
-    const items = node.items || [];
-    const separator = "/";
-    let svg = "<g>";
-    let offsetX = 0;
-    items.forEach((item, idx) => {
-      const label = typeof item === "string" ? item : item.label;
-      const isLast = idx === items.length - 1;
-      const fill = isLast ? this.theme.colors.foreground : this.theme.colors.muted;
-      svg += `<text x="${box.x + offsetX}" y="${box.y + 16}" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
-      offsetX += this.estimateTextWidth(label, 14) + 8;
-      if (!isLast) {
-        svg += `<text x="${box.x + offsetX}" y="${box.y + 16}" font-size="14" fill="${this.theme.colors.muted}">${separator}</text>`;
-        offsetX += 16;
-      }
-    });
-    svg += "</g>";
-    return svg;
-  }
-  renderIconBox(box) {
-    const node = box.node;
-    const iconData = getIconData(node.name);
-    if (!iconData) {
-      return `<!-- Icon not found: ${node.name} -->`;
-    }
-    const color = this.theme.colors.foreground;
-    return this.renderIconPaths(iconData, box.x, box.y, box.width, color);
-  }
-  renderDividerBox(box) {
-    return `<line x1="${box.x}" y1="${box.y}" x2="${box.x + box.width}" y2="${box.y}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-  }
-  // ===========================================
-  // Utility Methods
-  // ===========================================
-  renderIconPaths(data, x, y, size, color) {
-    const scale = size / 24;
-    const paths = data.map(([tag, attrs]) => {
-      const attrStr = Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ");
-      return `<${tag} ${attrStr} />`;
-    }).join("");
-    return `<g transform="translate(${x}, ${y}) scale(${scale})" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</g>`;
-  }
-  getPadding(node) {
-    const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 };
-    if (!("p" in node) && !("px" in node) && !("py" in node)) {
-      if (node.type === "Card" || node.type === "Header" || node.type === "Footer" || node.type === "Sidebar") {
-        return { top: 16, right: 16, bottom: 16, left: 16 };
-      }
-      return defaultPadding;
-    }
-    let p = 0;
-    if ("p" in node && node.p !== void 0) {
-      p = this.resolveSpacing(node.p);
-    }
-    let px = p;
-    let py = p;
-    if ("px" in node && node.px !== void 0) {
-      px = this.resolveSpacing(node.px);
-    }
-    if ("py" in node && node.py !== void 0) {
-      py = this.resolveSpacing(node.py);
-    }
-    if (node.type === "Header") {
-      return { top: 0, right: px, bottom: 0, left: px };
-    }
-    return { top: py, right: px, bottom: py, left: px };
-  }
-  getGap(node) {
-    if ("gap" in node && node.gap !== void 0) {
-      return this.resolveSpacing(node.gap);
-    }
-    return void 0;
-  }
-  resolveSpacing(value) {
-    if (typeof value === "number") {
-      return value * 4;
-    }
-    if (typeof value === "object" && value && "value" in value) {
-      return value.value;
-    }
-    return 0;
-  }
-  resolveSize(value) {
-    if (value === void 0 || value === null) return void 0;
-    if (typeof value === "number") return value;
-    if (typeof value === "string") {
-      if (value === "full") return void 0;
-      const num = parseFloat(value);
-      if (!isNaN(num)) return num;
-    }
-    if (typeof value === "object" && value && "value" in value) {
-      return value.value;
-    }
-    return void 0;
-  }
-  isFullWidth(node) {
-    if ("w" in node) {
-      return node.w === "full";
-    }
-    return false;
-  }
-  estimateTextWidth(text, fontSize) {
-    return text.length * fontSize * 0.6;
-  }
-  resolveFontSize(size) {
-    if (!size) return 16;
-    if (typeof size === "string") {
-      const sizes = {
-        xs: 12,
-        sm: 14,
-        base: 16,
-        md: 16,
-        lg: 18,
-        xl: 20,
-        "2xl": 24,
-        "3xl": 30
-      };
-      return sizes[size] || 16;
-    }
-    if (typeof size === "object" && "value" in size) {
-      if (size.unit === "px") return size.value;
-      if (size.unit === "rem") return size.value * 16;
-      if (size.unit === "em") return size.value * 16;
-      return size.value;
-    }
-    return 16;
-  }
-  getTitleFontSize(level) {
-    const sizes = { 1: 36, 2: 30, 3: 24, 4: 20, 5: 18, 6: 16 };
-    return sizes[level] || 20;
-  }
-  escapeXml(str) {
-    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
-  }
-};
-function createSvgRenderer(options) {
-  return new SvgRenderer(options);
-}
-function renderToSvg(doc, options) {
-  const renderer = new SvgRenderer(options);
-  return renderer.render(doc);
-}
-
 // src/renderer/index.ts
 function render(document, options = {}) {
   const renderer = createHtmlRenderer(options);
@@ -51394,7 +49740,7 @@ ${html}
 </body>
 </html>`;
 }
-function renderToSvg2(document, options = {}) {
+function renderToSvg(document, options = {}) {
   const firstPage = document.children[0];
   let width = options.width ?? 800;
   let height = options.height ?? 600;
@@ -51430,15 +49776,10 @@ ${css}
 </svg>`;
   return { svg, width, height };
 }
-function renderToPureSvg(document, options = {}) {
-  return renderToSvg(document, options);
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   HtmlRenderer,
-  SvgRenderer,
   createHtmlRenderer,
-  createSvgRenderer,
   darkTheme,
   defaultTheme,
   generateComponentStyles,
@@ -51449,7 +49790,6 @@ function renderToPureSvg(document, options = {}) {
   render,
   renderIconSvg,
   renderToHtml,
-  renderToPureSvg,
   renderToSvg
 });
 /**