@wireweave/core 1.1.0 → 1.2.0-beta.1

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 {
@@ -118,12 +99,17 @@ function generateContainerStyles(prefix) {
   padding: 16px;
 }
 
-/* Cards in flex rows should expand equally */
+/* Cards in flex rows: respect explicit width, shrink if needed */
 .${prefix}-row > .${prefix}-card {
-  flex: 1 1 0%;
+  flex: 0 1 auto;
   min-width: 0;
 }
 
+/* Cards without explicit width should expand to fill space */
+.${prefix}-row > .${prefix}-card-flex {
+  flex: 1 1 0%;
+}
+
 .${prefix}-card-title {
   margin: 0 0 12px 0;
   font-size: 18px;
@@ -243,6 +229,8 @@ function generateContainerStyles(prefix) {
   padding: 16px;
 }`;
 }
+
+// src/renderer/styles/text.ts
 function generateTextStyles(prefix) {
   return `/* Text Components */
 .${prefix}-text {
@@ -277,6 +265,11 @@ function generateTextStyles(prefix) {
   line-height: 1.25;
 }
 
+/* Remove bottom margin when title is in a row (inline with other elements) */
+.${prefix}-row .${prefix}-title {
+  margin-bottom: 0;
+}
+
 h1.${prefix}-title { font-size: 36px; }
 h2.${prefix}-title { font-size: 30px; }
 h3.${prefix}-title { font-size: 24px; }
@@ -294,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 {
@@ -493,6 +488,8 @@ function generateInputStyles(_theme, prefix) {
   cursor: pointer;
 }`;
 }
+
+// src/renderer/styles/button.ts
 function generateButtonStyles(_theme, prefix) {
   return `/* Button Components */
 .${prefix}-button {
@@ -620,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 {
@@ -671,6 +670,30 @@ img.${prefix}-image {
   font-size: 14px;
 }
 
+.${prefix}-placeholder-with-children {
+  position: relative;
+}
+
+.${prefix}-placeholder-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 0;
+  pointer-events: none;
+}
+
+.${prefix}-placeholder-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .${prefix}-avatar {
   display: inline-flex;
   align-items: center;
@@ -786,12 +809,12 @@ svg.${prefix}-icon {
   display: block;
 }
 
-/* Icon size tokens */
+/* Icon size tokens - matches SVG renderer */
 svg.${prefix}-icon-xs { width: 12px; height: 12px; }
-svg.${prefix}-icon-sm { width: 14px; height: 14px; }
-svg.${prefix}-icon-md { width: 16px; height: 16px; }
-svg.${prefix}-icon-lg { width: 20px; height: 20px; }
-svg.${prefix}-icon-xl { width: 24px; height: 24px; }
+svg.${prefix}-icon-sm { width: 16px; height: 16px; }
+svg.${prefix}-icon-md { width: 20px; height: 20px; }
+svg.${prefix}-icon-lg { width: 24px; height: 24px; }
+svg.${prefix}-icon-xl { width: 32px; height: 32px; }
 
 .${prefix}-icon svg {
   display: block;
@@ -803,6 +826,8 @@ svg.${prefix}-icon-xl { width: 24px; height: 24px; }
   justify-content: center;
 }`;
 }
+
+// src/renderer/styles/data.ts
 function generateDataStyles(_theme, prefix) {
   return `/* Data Components */
 .${prefix}-table {
@@ -861,6 +886,8 @@ function generateDataStyles(_theme, prefix) {
   border-bottom: none;
 }`;
 }
+
+// src/renderer/styles/feedback.ts
 function generateFeedbackStyles(_theme, prefix) {
   return `/* Feedback Components */
 .${prefix}-alert {
@@ -952,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 {
@@ -1050,6 +1079,8 @@ function generateOverlayStyles(_theme, prefix) {
   cursor: not-allowed;
 }`;
 }
+
+// src/renderer/styles/navigation.ts
 function generateNavigationStyles(_theme, prefix) {
   return `/* Navigation Components */
 .${prefix}-nav {
@@ -1087,6 +1118,27 @@ function generateNavigationStyles(_theme, prefix) {
   cursor: not-allowed;
 }
 
+.${prefix}-nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.${prefix}-nav-group-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--${prefix}-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 8px 16px 4px;
+}
+
+.${prefix}-nav-divider {
+  margin: 8px 0;
+  border: none;
+  border-top: 1px solid var(--${prefix}-border);
+}
+
 .${prefix}-tabs {
   border-bottom: 1px solid var(--${prefix}-border);
 }
@@ -1141,6 +1193,8 @@ function generateNavigationStyles(_theme, prefix) {
   color: var(--${prefix}-muted);
 }`;
 }
+
+// src/renderer/styles/semantic.ts
 function generateSemanticMarkerStyles(_theme, prefix) {
   return `/* Semantic Markers */
 
@@ -1227,6 +1281,8 @@ function generateSemanticMarkerStyles(_theme, prefix) {
   color: var(--${prefix}-muted);
 }`;
 }
+
+// src/renderer/styles/accessibility.ts
 function generateAccessibilityStyles(prefix) {
   return `/* Accessibility Utilities */
 .sr-only {
@@ -1264,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 = [
@@ -1304,7 +1378,6 @@ function generateBaseStyles(prefix) {
   font-family: var(--${prefix}-font);
   color: var(--${prefix}-fg);
   background: var(--${prefix}-bg);
-  min-height: 100vh;
   box-sizing: border-box;
   position: relative;
   display: flex;
@@ -1315,10 +1388,19 @@ function generateBaseStyles(prefix) {
   overflow: hidden;
 }
 
+/* Col direct child of page should fill page height */
+.${prefix}-page > .${prefix}-col {
+  flex: 1;
+  min-height: 0;
+}
+
 /* Row containing sidebar should fill remaining space */
 .${prefix}-page > .${prefix}-row:has(.${prefix}-sidebar),
-.${prefix}-page > .${prefix}-row:has(.${prefix}-main) {
+.${prefix}-page > .${prefix}-row:has(.${prefix}-main),
+.${prefix}-page > .${prefix}-col > .${prefix}-row:has(.${prefix}-sidebar),
+.${prefix}-page > .${prefix}-col > .${prefix}-row:has(.${prefix}-main) {
   flex: 1;
+  min-height: 0;
   align-items: stretch;
 }
 
@@ -1361,10 +1443,15 @@ function generateGridClasses(_theme, prefix) {
   box-sizing: border-box;
 }
 
+/* When explicit width is set, don't flex-grow */
+.${prefix}-row[style*="width:"],
+.${prefix}-col[style*="width:"] {
+  flex: 0 0 auto;
+}
+
 `;
   for (let i = 1; i <= 12; i++) {
-    const width = (i / 12 * 100).toFixed(4);
-    css += `.${prefix}-col-${i} { flex: 0 0 auto; width: ${width}%; }
+    css += `.${prefix}-col-${i} { flex: ${i} 0 0%; min-width: 0; }
 `;
   }
   return css;
@@ -1532,6 +1619,26 @@ function generateLayoutClasses(prefix) {
 .${prefix}-main {
   flex: 1;
   padding: 16px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* Scrollable main content */
+.${prefix}-main.${prefix}-scroll {
+  overflow-y: auto;
+  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) {
+  flex: 0 0 auto;
 }
 
 .${prefix}-footer {
@@ -1548,6 +1655,7 @@ function generateLayoutClasses(prefix) {
   border-right: 1px solid var(--${prefix}-border);
   padding: 16px 16px 16px 20px;
   flex-shrink: 0;
+  align-self: stretch;
 }
 
 .${prefix}-sidebar-right {
@@ -1761,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": [
@@ -48117,14 +48467,39 @@ var lucideIcons = {
     ]
   ]
 };
+var iconAliases = {
+  "home": "house",
+  "plus-square": "square-plus",
+  "minus-square": "square-minus",
+  "x-square": "square-x",
+  "check-square": "square-check",
+  "edit": "pencil",
+  "edit-2": "pencil",
+  "edit-3": "pencil-line",
+  "trash": "trash-2",
+  "delete": "trash-2",
+  "close": "x",
+  "menu": "menu",
+  "hamburger": "menu",
+  "dots": "more-horizontal",
+  "dots-vertical": "more-vertical",
+  "cog": "settings",
+  "gear": "settings"
+};
 function getIconData(name) {
   if (lucideIcons[name]) {
     return lucideIcons[name];
   }
+  if (iconAliases[name] && lucideIcons[iconAliases[name]]) {
+    return lucideIcons[iconAliases[name]];
+  }
   const kebabName = name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
   if (lucideIcons[kebabName]) {
     return lucideIcons[kebabName];
   }
+  if (iconAliases[kebabName] && lucideIcons[iconAliases[kebabName]]) {
+    return lucideIcons[iconAliases[kebabName]];
+  }
   return void 0;
 }
 function renderIconSvg(data, _size = 24, strokeWidth = 2, className = "", styleAttr = "") {
@@ -48135,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
@@ -48204,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
@@ -48234,7 +49322,7 @@ var HtmlRenderer = class extends BaseRenderer {
     const title = node.title ? `<title>${this.escapeHtml(node.title)}</title>
 ` : "";
     const commonStyles = this.buildCommonStyles(node);
-    const viewportStyle = `width: ${viewport.width}px; height: ${viewport.height}px`;
+    const viewportStyle = `position: relative; width: ${viewport.width}px; height: ${viewport.height}px; overflow: hidden`;
     const combinedStyle = commonStyles ? `${viewportStyle}; ${commonStyles}` : viewportStyle;
     const dataAttrs = `data-viewport-width="${viewport.width}" data-viewport-height="${viewport.height}" data-viewport-label="${viewport.label}"`;
     return `<div class="${classes}" style="${combinedStyle}" ${dataAttrs}>
@@ -48245,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
@@ -48385,106 +49380,36 @@ ${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`,
-      ...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
    *
+   * Position values (x, y) for absolute positioning:
+   * - When x or y is specified, element gets position: absolute
+   * - x → left, y → top
+   *
    * Spacing values (p, m, gap) use token system:
    * - number: spacing token (e.g., p=4 → padding: 16px from token table)
    * - ValueWithUnit: direct CSS value (e.g., p=16px → padding: 16px)
@@ -48499,6 +49424,33 @@ ${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) {
+        const xValue = resolveSizeValueToCss(props.x);
+        if (xValue) styles.push(`left: ${xValue}`);
+      }
+      if (props.y !== void 0) {
+        const yValue = resolveSizeValueToCss(props.y);
+        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}`);
@@ -48524,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}`);
@@ -48554,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}`);
@@ -48584,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)
@@ -48608,1532 +49574,136 @@ ${children}
   // Container Node Renderers
   // ===========================================
   renderCard(node) {
-    const classes = this.buildClassString([
-      `${this.prefix}-card`,
-      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`,
-      ...this.getCommonClasses(node)
-    ]);
-    const styles = this.buildCommonStyles(node);
-    const styleAttr = styles ? ` style="${styles}"` : "";
-    const label = node.label ? this.escapeHtml(node.label) : "Placeholder";
-    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}"` : "";
-    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
-      ]);
-      return `<a class="${linkClasses}" href="${item.href || "#"}">${this.escapeHtml(item.label)}</a>`;
-    }).join("\n");
-    return `<nav class="${classes}"${styleAttr}>
-${items}
-</nav>`;
+    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/index.ts
-var SvgRenderer = class {
-  options;
-  theme;
-  currentX = 0;
-  currentY = 0;
-  contentWidth = 0;
-  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;
-    this.contentWidth = this.options.width - this.options.padding * 2;
-  }
-  /**
-   * Render a wireframe document to SVG
-   */
-  render(doc) {
-    this.currentX = this.options.padding;
-    this.currentY = this.options.padding;
-    const firstPage = doc.children[0];
-    let width = this.options.width;
-    let height = this.options.height;
-    if (firstPage && (firstPage.viewport !== void 0 || firstPage.device !== void 0)) {
-      const viewport = resolveViewport(firstPage.viewport, firstPage.device);
-      width = viewport.width;
-      height = viewport.height;
-      this.contentWidth = width - this.options.padding * 2;
-    }
-    const content = doc.children.map((page) => this.renderPage(page)).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>
-    ${this.generateDefs()}
-  </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, patterns, etc.)
-   */
-  generateDefs() {
-    return `
-    <style>
-      text { font-family: ${this.options.fontFamily}; }
-      .wf-title { font-weight: 600; }
-      .wf-muted { fill: ${this.theme.colors.muted}; }
-    </style>
-    `;
-  }
-  /**
-   * Render a page node
-   */
-  renderPage(node) {
-    const elements = [];
-    if (node.title) {
-      elements.push(this.renderPageTitle(node.title));
-    }
-    for (const child of node.children) {
-      elements.push(this.renderNode(child));
-    }
-    return elements.join("\n");
-  }
-  /**
-   * Render page title
-   */
-  renderPageTitle(title) {
-    const fontSize = 24;
-    const y = this.currentY + fontSize;
-    this.currentY += fontSize + 16;
-    return `<text x="${this.currentX}" y="${y}" font-size="${fontSize}" font-weight="600" fill="${this.theme.colors.foreground}">${this.escapeXml(title)}</text>`;
-  }
-  /**
-   * Render any AST node
-   */
-  renderNode(node) {
-    switch (node.type) {
-      // Layout nodes
-      case "Row":
-        return this.renderRow(node);
-      case "Col":
-        return this.renderCol(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);
-      // Container nodes
-      case "Card":
-        return this.renderCard(node);
-      case "Modal":
-        return this.renderModal(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);
-      // 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);
-      // Data nodes
-      case "Table":
-        return this.renderTable(node);
-      case "List":
-        return this.renderList(node);
-      // Feedback nodes
-      case "Alert":
-        return this.renderAlert(node);
-      case "Progress":
-        return this.renderProgress(node);
-      case "Spinner":
-        return this.renderSpinner(node);
-      // Navigation nodes
-      case "Nav":
-        return this.renderNav(node);
-      case "Tabs":
-        return this.renderTabs(node);
-      case "Breadcrumb":
-        return this.renderBreadcrumb(node);
-      default:
-        return `<!-- Unsupported: ${node.type} -->`;
-    }
-  }
-  // ===========================================
-  // Layout Renderers
-  // ===========================================
-  renderRow(node) {
-    const savedX = this.currentX;
-    const savedY = this.currentY;
-    const elements = [];
-    const totalSpan = node.children.reduce((sum, child) => {
-      if ("span" in child && typeof child.span === "number") {
-        return sum + child.span;
-      }
-      return sum + 1;
-    }, 0);
-    const colWidth = this.contentWidth / Math.max(totalSpan, 1);
-    let maxHeight = 0;
-    for (const child of node.children) {
-      const span = "span" in child && typeof child.span === "number" ? child.span : 1;
-      const childWidth = colWidth * span;
-      const startY = this.currentY;
-      elements.push(this.renderNode(child));
-      const childHeight = this.currentY - startY;
-      maxHeight = Math.max(maxHeight, childHeight);
-      this.currentX += childWidth;
-      this.currentY = savedY;
-    }
-    this.currentX = savedX;
-    this.currentY = savedY + maxHeight;
-    return elements.join("\n");
-  }
-  renderCol(node) {
-    return node.children.map((child) => this.renderNode(child)).join("\n");
-  }
-  renderHeader(node) {
-    const height = 60;
-    const x = this.currentX;
-    const y = this.currentY;
-    const savedY = this.currentY;
-    this.currentY += 16;
-    const children = node.children.map((c) => this.renderNode(c)).join("\n");
-    this.currentY = savedY + height + 8;
-    return `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${this.contentWidth}" height="${height}" fill="${this.theme.colors.background}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      ${children}
-    </g>`;
-  }
-  renderMain(node) {
-    return node.children.map((c) => this.renderNode(c)).join("\n");
-  }
-  renderFooter(node) {
-    const height = 60;
-    const x = this.currentX;
-    const y = this.currentY;
-    const savedY = this.currentY;
-    this.currentY += 16;
-    const children = node.children.map((c) => this.renderNode(c)).join("\n");
-    this.currentY = savedY + height + 8;
-    return `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${this.contentWidth}" height="${height}" fill="${this.theme.colors.background}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      ${children}
-    </g>`;
-  }
-  renderSidebar(node) {
-    const width = 200;
-    const height = 300;
-    const x = this.currentX;
-    const y = this.currentY;
-    const savedY = this.currentY;
-    this.currentY += 16;
-    const children = node.children.map((c) => this.renderNode(c)).join("\n");
-    this.currentY = savedY + height + 8;
-    return `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${width}" height="${height}" fill="${this.theme.colors.background}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      ${children}
-    </g>`;
-  }
-  // ===========================================
-  // Container Renderers
-  // ===========================================
-  renderCard(node) {
-    const width = Math.min(300, this.contentWidth);
-    const x = this.currentX;
-    const y = this.currentY;
-    const savedY = this.currentY;
-    this.currentY += 16;
-    let titleSvg = "";
-    if (node.title) {
-      const titleFontSize = 16;
-      titleSvg = `<text x="16" y="${titleFontSize + 12}" font-size="${titleFontSize}" font-weight="600" fill="${this.theme.colors.foreground}">${this.escapeXml(node.title)}</text>`;
-      this.currentY += titleFontSize + 8;
-    }
-    const childStartY = this.currentY - savedY;
-    const children = node.children.map((c) => this.renderNode(c)).join("\n");
-    const contentHeight = Math.max(this.currentY - savedY, 100);
-    this.currentY = savedY + contentHeight + 16;
-    return `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${width}" height="${contentHeight}" rx="8" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      ${titleSvg}
-      <g transform="translate(16, ${childStartY})">
-        ${children}
-      </g>
-    </g>`;
-  }
-  renderModal(node) {
-    const width = 400;
-    const height = 300;
-    const x = (this.options.width - width) / 2;
-    const y = (this.options.height - height) / 2;
-    let titleSvg = "";
-    if (node.title) {
-      titleSvg = `<text x="20" y="30" font-size="18" font-weight="600" fill="${this.theme.colors.foreground}">${this.escapeXml(node.title)}</text>`;
-    }
-    const savedX = this.currentX;
-    const savedY = this.currentY;
-    this.currentX = 20;
-    this.currentY = 50;
-    const children = node.children.map((c) => this.renderNode(c)).join("\n");
-    this.currentX = savedX;
-    this.currentY = savedY;
-    return `
-    <g>
-      <rect width="100%" height="100%" fill="rgba(0,0,0,0.5)" opacity="0.5"/>
-      <g transform="translate(${x}, ${y})">
-        <rect width="${width}" height="${height}" rx="8" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>
-        ${titleSvg}
-        ${children}
-      </g>
-    </g>`;
-  }
-  // ===========================================
-  // Text Renderers
-  // ===========================================
-  renderText(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 y = this.currentY + fontSize;
-    this.currentY += fontSize + 8;
-    return `<text x="${this.currentX}" y="${y}" font-size="${fontSize}" font-weight="${fontWeight}" fill="${fill}">${this.escapeXml(node.content)}</text>`;
-  }
-  renderTitle(node) {
-    const level = node.level || 1;
-    const fontSize = this.getTitleFontSize(level);
-    const y = this.currentY + fontSize;
-    this.currentY += fontSize + 12;
-    return `<text x="${this.currentX}" y="${y}" font-size="${fontSize}" font-weight="600" fill="${this.theme.colors.foreground}">${this.escapeXml(node.content)}</text>`;
-  }
-  renderLink(node) {
-    const fontSize = 14;
-    const y = this.currentY + fontSize;
-    this.currentY += fontSize + 8;
-    return `<text x="${this.currentX}" y="${y}" font-size="${fontSize}" fill="${this.theme.colors.primary}" text-decoration="underline">${this.escapeXml(node.content)}</text>`;
-  }
-  // ===========================================
-  // Input Renderers
-  // ===========================================
-  renderInput(node) {
-    const width = 280;
-    const height = 40;
-    const x = this.currentX;
-    let y = this.currentY;
-    let result = "";
-    if (node.label) {
-      result += `<text x="${x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-      y += 24;
-    }
-    const placeholder = node.placeholder || "";
-    result += `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${width}" height="${height}" rx="4" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="12" y="${height / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(placeholder)}</text>
-    </g>`;
-    this.currentY = y + height + 12;
-    return result;
-  }
-  renderTextarea(node) {
-    const width = 280;
-    const height = 100;
-    const x = this.currentX;
-    let y = this.currentY;
-    let result = "";
-    if (node.label) {
-      result += `<text x="${x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-      y += 24;
-    }
-    const placeholder = node.placeholder || "";
-    result += `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${width}" height="${height}" rx="4" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="12" y="24" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(placeholder)}</text>
-    </g>`;
-    this.currentY = y + height + 12;
-    return result;
-  }
-  renderSelect(node) {
-    const width = 280;
-    const height = 40;
-    const x = this.currentX;
-    let y = this.currentY;
-    let result = "";
-    if (node.label) {
-      result += `<text x="${x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-      y += 24;
-    }
-    const placeholder = node.placeholder || "Select...";
-    result += `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${width}" height="${height}" rx="4" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="12" y="${height / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(placeholder)}</text>
-      <path d="M${width - 24} ${height / 2 - 3} l6 6 l6 -6" fill="none" stroke="${this.theme.colors.muted}" stroke-width="1.5"/>
-    </g>`;
-    this.currentY = y + height + 12;
-    return result;
-  }
-  renderCheckbox(node) {
-    const x = this.currentX;
-    const y = this.currentY;
-    const size = 18;
-    let result = `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${size}" height="${size}" rx="3" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-    if (node.checked) {
-      result += `<path d="M4 9 L7 12 L14 5" fill="none" stroke="${this.theme.colors.foreground}" stroke-width="2"/>`;
-    }
-    if (node.label) {
-      result += `<text x="${size + 8}" y="${size - 3}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-    }
-    result += "</g>";
-    this.currentY += size + 12;
-    return result;
-  }
-  renderRadio(node) {
-    const x = this.currentX;
-    const y = this.currentY;
-    const size = 18;
-    const radius = size / 2;
-    let result = `
-    <g transform="translate(${x}, ${y})">
-      <circle cx="${radius}" cy="${radius}" r="${radius - 1}" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-    if (node.checked) {
-      result += `<circle cx="${radius}" cy="${radius}" r="${radius - 5}" fill="${this.theme.colors.foreground}"/>`;
-    }
-    if (node.label) {
-      result += `<text x="${size + 8}" y="${size - 3}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-    }
-    result += "</g>";
-    this.currentY += size + 12;
-    return result;
-  }
-  renderSwitch(node) {
-    const x = this.currentX;
-    const y = this.currentY;
-    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 ? width - radius : radius;
-    let result = `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${width}" height="${height}" rx="${radius}" fill="${bgColor}"/>
-      <circle cx="${knobX}" cy="${radius}" r="${radius - 3}" fill="white"/>`;
-    if (node.label) {
-      result += `<text x="${width + 8}" y="${height - 6}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-    }
-    result += "</g>";
-    this.currentY += height + 12;
-    return result;
-  }
-  // ===========================================
-  // Button Renderer
-  // ===========================================
-  renderButton(node) {
-    const content = node.content;
-    const hasIcon = !!node.icon;
-    const isIconOnly = hasIcon && !content.trim();
-    const iconSize = 16;
-    const padding = isIconOnly ? 8 : 16;
-    let width;
-    if (isIconOnly) {
-      width = iconSize + padding * 2;
-    } else if (hasIcon) {
-      width = Math.max(80, content.length * 10 + iconSize + 40);
-    } else {
-      width = Math.max(80, content.length * 10 + 32);
-    }
-    const height = 36;
-    const x = this.currentX;
-    const y = this.currentY;
-    let fill = this.theme.colors.primary;
-    let textFill = "#ffffff";
-    let isOutline = false;
-    if (node.secondary) {
-      fill = this.theme.colors.secondary;
-    } else if (node.outline) {
-      fill = "white";
-      textFill = this.theme.colors.foreground;
-      isOutline = true;
-    } else if (node.ghost) {
-      fill = "transparent";
-      textFill = this.theme.colors.foreground;
-    }
-    this.currentY += height + 8;
-    const strokeAttr = isOutline ? `stroke="${this.theme.colors.border}" stroke-width="1"` : "";
-    let iconSvg = "";
-    if (hasIcon) {
-      const iconData = getIconData(node.icon);
-      if (iconData) {
-        const iconX = isIconOnly ? (width - iconSize) / 2 : padding;
-        const iconY = (height - iconSize) / 2;
-        iconSvg = this.renderIconPaths(iconData, iconX, iconY, iconSize, textFill);
-      }
-    }
-    const textX = hasIcon && !isIconOnly ? padding + iconSize + 8 + (width - padding - iconSize - 8 - padding) / 2 : width / 2;
-    const textContent = isIconOnly ? "" : `<text x="${textX}" y="${height / 2 + 5}" font-size="14" fill="${textFill}" text-anchor="middle">${this.escapeXml(content)}</text>`;
-    return `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${width}" height="${height}" rx="4" fill="${fill}" ${strokeAttr}/>
-      ${iconSvg}
-      ${textContent}
-    </g>`;
-  }
-  /**
-   * Render icon paths for SVG
-   */
-  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>`;
-  }
-  // ===========================================
-  // Display Renderers
-  // ===========================================
-  renderImage(node) {
-    const width = node.w && typeof node.w === "number" ? node.w : 200;
-    const height = node.h && typeof node.h === "number" ? node.h : 150;
-    const x = this.currentX;
-    const y = this.currentY;
-    this.currentY += height + 12;
-    return `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${width}" height="${height}" fill="${this.theme.colors.muted}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <line x1="0" y1="0" x2="${width}" y2="${height}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <line x1="${width}" y1="0" x2="0" y2="${height}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="${width / 2}" y="${height / 2 + 5}" font-size="14" fill="${this.theme.colors.foreground}" text-anchor="middle">${this.escapeXml(node.alt || "Image")}</text>
-    </g>`;
-  }
-  renderPlaceholder(node) {
-    const width = node.w && typeof node.w === "number" ? node.w : 200;
-    const height = node.h && typeof node.h === "number" ? node.h : 100;
-    const x = this.currentX;
-    const y = this.currentY;
-    this.currentY += height + 12;
-    return `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${width}" height="${height}" fill="${this.theme.colors.muted}" stroke="${this.theme.colors.border}" stroke-width="1" stroke-dasharray="4,4"/>
-      <text x="${width / 2}" y="${height / 2 + 5}" font-size="14" fill="${this.theme.colors.foreground}" text-anchor="middle">${this.escapeXml(node.label || "Placeholder")}</text>
-    </g>`;
-  }
-  renderAvatar(node) {
-    const sizes = { xs: 24, sm: 32, md: 40, lg: 48, xl: 64 };
-    const size = sizes[node.size || "md"] || 40;
-    const radius = size / 2;
-    const x = this.currentX;
-    const y = this.currentY;
-    const initial = node.name ? node.name.charAt(0).toUpperCase() : "?";
-    this.currentY += size + 12;
-    return `
-    <g transform="translate(${x}, ${y})">
-      <circle cx="${radius}" cy="${radius}" r="${radius}" fill="${this.theme.colors.muted}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="${radius}" y="${radius + 5}" font-size="${size / 2.5}" fill="${this.theme.colors.foreground}" text-anchor="middle">${initial}</text>
-    </g>`;
-  }
-  renderBadge(node) {
-    const content = node.content;
-    const width = Math.max(24, content.length * 8 + 16);
-    const height = 22;
-    const x = this.currentX;
-    const y = this.currentY;
-    const fill = this.theme.colors.muted;
-    const textFill = this.theme.colors.foreground;
-    this.currentY += height + 8;
-    return `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${width}" height="${height}" rx="11" fill="${fill}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="${width / 2}" y="${height / 2 + 4}" font-size="12" fill="${textFill}" text-anchor="middle">${this.escapeXml(content)}</text>
-    </g>`;
-  }
-  // ===========================================
-  // Data Renderers
-  // ===========================================
-  renderTable(node) {
-    const columns = node.columns || [];
-    const rows = node.rows || [];
-    const rowCount = rows.length || 3;
-    const colWidth = 120;
-    const rowHeight = 40;
-    const x = this.currentX;
-    const y = this.currentY;
-    let svg = `<g transform="translate(${x}, ${y})">`;
-    svg += `<rect width="${columns.length * colWidth}" height="${rowHeight}" fill="${this.theme.colors.muted}"/>`;
-    columns.forEach((col, i) => {
-      svg += `<text x="${i * colWidth + 12}" y="${rowHeight / 2 + 5}" font-size="14" font-weight="600">${this.escapeXml(col)}</text>`;
-    });
-    const displayRowCount = rows.length > 0 ? rows.length : Math.max(rowCount, 3);
-    for (let rowIdx = 0; rowIdx < displayRowCount; rowIdx++) {
-      const rowY = (rowIdx + 1) * rowHeight;
-      svg += `<rect 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="${colIdx * colWidth + 12}" y="${rowY + rowHeight / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(cellContent)}</text>`;
-      });
-    }
-    svg += "</g>";
-    this.currentY += (displayRowCount + 1) * rowHeight + 16;
-    return svg;
-  }
-  renderList(node) {
-    const x = this.currentX;
-    let y = this.currentY;
-    const items = node.items || [];
-    const ordered = node.ordered || false;
-    let svg = `<g transform="translate(${x}, ${y})">`;
-    items.forEach((item, idx) => {
-      const marker = ordered ? `${idx + 1}.` : "\u2022";
-      const content = typeof item === "string" ? item : item.content;
-      svg += `<text x="0" y="${idx * 24 + 16}" font-size="14" fill="${this.theme.colors.foreground}">${marker} ${this.escapeXml(content)}</text>`;
-    });
-    svg += "</g>";
-    this.currentY += items.length * 24 + 12;
-    return svg;
-  }
-  // ===========================================
-  // Feedback Renderers
-  // ===========================================
-  renderAlert(node) {
-    const width = Math.min(400, this.contentWidth);
-    const height = 48;
-    const x = this.currentX;
-    const y = this.currentY;
-    this.currentY += height + 12;
-    return `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${width}" height="${height}" rx="4" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="16" y="${height / 2 + 5}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.content)}</text>
-    </g>`;
-  }
-  renderProgress(node) {
-    const width = 200;
-    const height = 8;
-    const x = this.currentX;
-    let y = this.currentY;
-    let result = "";
-    if (node.label) {
-      result += `<text x="${x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-      y += 24;
-    }
-    const value = node.value || 0;
-    const max = node.max || 100;
-    const percent = Math.min(100, Math.max(0, value / max * 100));
-    result += `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${width}" height="${height}" rx="${height / 2}" fill="${this.theme.colors.muted}"/>
-      <rect width="${width * percent / 100}" height="${height}" rx="${height / 2}" fill="${this.theme.colors.primary}"/>
-    </g>`;
-    this.currentY = y + height + 12;
-    return result;
-  }
-  renderSpinner(node) {
-    const sizes = { xs: 16, sm: 20, md: 24, lg: 32, xl: 40 };
-    const size = sizes[node.size || "md"] || 24;
-    const x = this.currentX + size / 2;
-    const y = this.currentY + size / 2;
-    const radius = size / 2 - 2;
-    this.currentY += size + 12;
-    return `
-    <g transform="translate(${x}, ${y})">
-      <circle r="${radius}" fill="none" stroke="${this.theme.colors.muted}" stroke-width="2"/>
-      <path d="M0,-${radius} A${radius},${radius} 0 0,1 ${radius},0" fill="none" stroke="${this.theme.colors.primary}" stroke-width="2" stroke-linecap="round"/>
-    </g>`;
-  }
-  // ===========================================
-  // Navigation Renderers
-  // ===========================================
-  renderNav(node) {
-    const items = node.items || [];
-    const x = this.currentX;
-    const y = this.currentY;
-    const vertical = node.vertical || false;
-    let svg = `<g transform="translate(${x}, ${y})">`;
-    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="0" y="${idx * 32 + 16}" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
-      });
-      this.currentY += items.length * 32 + 12;
-    } 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="${offsetX}" y="16" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
-        offsetX += label.length * 8 + 24;
-      });
-      this.currentY += 32;
-    }
-    svg += "</g>";
-    return svg;
-  }
-  renderTabs(node) {
-    const items = node.items || [];
-    const x = this.currentX;
-    const y = this.currentY;
-    const tabHeight = 40;
-    let svg = `<g transform="translate(${x}, ${y})">`;
-    let offsetX = 0;
-    items.forEach((item) => {
-      const label = typeof item === "string" ? item : item;
-      const tabWidth = label.length * 10 + 24;
-      svg += `<rect x="${offsetX}" width="${tabWidth}" height="${tabHeight}" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-      svg += `<text x="${offsetX + tabWidth / 2}" y="${tabHeight / 2 + 5}" font-size="14" text-anchor="middle">${this.escapeXml(label)}</text>`;
-      offsetX += tabWidth;
-    });
-    svg += "</g>";
-    this.currentY += tabHeight + 12;
-    return svg;
-  }
-  renderBreadcrumb(node) {
-    const items = node.items || [];
-    const separator = "/";
-    const x = this.currentX;
-    const y = this.currentY;
-    let svg = `<g transform="translate(${x}, ${y})">`;
-    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="${offsetX}" y="16" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
-      offsetX += label.length * 8 + 8;
-      if (!isLast) {
-        svg += `<text x="${offsetX}" y="16" font-size="14" fill="${this.theme.colors.muted}">${separator}</text>`;
-        offsetX += 16;
-      }
-    });
-    svg += "</g>";
-    this.currentY += 28;
-    return svg;
-  }
-  // ===========================================
-  // Utility Methods
-  // ===========================================
-  getFontSize(size) {
-    const sizes = {
-      xs: 12,
-      sm: 14,
-      base: 16,
-      md: 16,
-      lg: 18,
-      xl: 20,
-      "2xl": 24,
-      "3xl": 30
-    };
-    return sizes[size] || 16;
-  }
-  resolveFontSize(size) {
-    if (!size) return 16;
-    if (typeof size === "string") {
-      return this.getFontSize(size);
-    }
-    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: 32,
-      2: 28,
-      3: 24,
-      4: 20,
-      5: 18,
-      6: 16
-    };
-    return sizes[level] || 24;
-  }
-  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);
@@ -50170,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;
@@ -50181,15 +49751,22 @@ function renderToSvg2(document, options = {}) {
       height = viewport.height;
     }
   }
-  const padding = options.padding ?? 20;
   const background = options.background ?? "#ffffff";
   const { html, css } = render(document, { theme: "light" });
   const svg = `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
   <rect width="100%" height="100%" fill="${background}"/>
-  <foreignObject x="${padding}" y="${padding}" width="${width - padding * 2}" height="${height - padding * 2}">
-    <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; overflow: hidden;">
+  <foreignObject x="0" y="0" width="${width}" height="${height}">
+    <div xmlns="http://www.w3.org/1999/xhtml" style="
+      width: ${width}px;
+      height: ${height}px;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+    ">
       <style type="text/css">
 ${css}
       </style>
@@ -50199,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,
@@ -50218,7 +49790,6 @@ function renderToPureSvg(document, options = {}) {
   render,
   renderIconSvg,
   renderToHtml,
-  renderToPureSvg,
   renderToSvg
 });
 /**