@wireweave/core 1.0.0-beta.20260110141318 → 1.1.0

package/dist/renderer.js

@@ -77,15 +77,10 @@ function generateContainerStyles(prefix) {
   padding: 16px;
 }
 
-/* Cards in flex rows: respect explicit width, shrink if needed */
+/* Cards in flex rows should expand equally */
 .${prefix}-row > .${prefix}-card {
-  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%;
+  min-width: 0;
 }
 
 .${prefix}-card-title {
@@ -241,11 +236,6 @@ 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; }
@@ -640,30 +630,6 @@ 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;
@@ -779,12 +745,12 @@ svg.${prefix}-icon {
   display: block;
 }
 
-/* Icon size tokens - matches SVG renderer */
+/* Icon size tokens */
 svg.${prefix}-icon-xs { width: 12px; height: 12px; }
-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; }
+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; }
 
 .${prefix}-icon svg {
   display: block;
@@ -1080,27 +1046,6 @@ 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);
 }
@@ -1318,6 +1263,7 @@ 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;
@@ -1328,19 +1274,10 @@ 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}-col > .${prefix}-row:has(.${prefix}-sidebar),
-.${prefix}-page > .${prefix}-col > .${prefix}-row:has(.${prefix}-main) {
+.${prefix}-page > .${prefix}-row:has(.${prefix}-main) {
   flex: 1;
-  min-height: 0;
   align-items: stretch;
 }
 
@@ -1383,15 +1320,10 @@ 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++) {
-    css += `.${prefix}-col-${i} { flex: ${i} 0 0%; min-width: 0; }
+    const width = (i / 12 * 100).toFixed(4);
+    css += `.${prefix}-col-${i} { flex: 0 0 auto; width: ${width}%; }
 `;
   }
   return css;
@@ -1559,20 +1491,6 @@ function generateLayoutClasses(prefix) {
 .${prefix}-main {
   flex: 1;
   padding: 16px;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Scrollable main content */
-.${prefix}-main.${prefix}-scroll {
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-/* 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 {
@@ -1589,7 +1507,6 @@ function generateLayoutClasses(prefix) {
   border-right: 1px solid var(--${prefix}-border);
   padding: 16px 16px 16px 20px;
   flex-shrink: 0;
-  align-self: stretch;
 }
 
 .${prefix}-sidebar-right {
@@ -48159,39 +48076,14 @@ 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 = "") {
@@ -48301,7 +48193,7 @@ var HtmlRenderer = class extends BaseRenderer {
     const title = node.title ? `<title>${this.escapeHtml(node.title)}</title>
 ` : "";
     const commonStyles = this.buildCommonStyles(node);
-    const viewportStyle = `position: relative; width: ${viewport.width}px; height: ${viewport.height}px; overflow: hidden`;
+    const viewportStyle = `width: ${viewport.width}px; height: ${viewport.height}px`;
     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}>
@@ -48467,7 +48359,6 @@ ${children}
   renderMain(node) {
     const classes = this.buildClassString([
       `${this.prefix}-main`,
-      node.scroll ? `${this.prefix}-scroll` : void 0,
       ...this.getCommonClasses(node)
     ]);
     const styles = this.buildCommonStyles(node);
@@ -48553,10 +48444,6 @@ ${children}
   /**
    * 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)
@@ -48571,17 +48458,6 @@ ${children}
    */
   buildCommonStyles(props) {
     const 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}`);
-      }
-    }
     const wValue = resolveSizeValueToCss(props.w);
     if (wValue) {
       styles.push(`width: ${wValue}`);
@@ -48691,10 +48567,8 @@ ${children}
   // Container Node Renderers
   // ===========================================
   renderCard(node) {
-    const hasExplicitWidth = node.w !== void 0;
     const classes = this.buildClassString([
       `${this.prefix}-card`,
-      !hasExplicitWidth ? `${this.prefix}-card-flex` : void 0,
       node.shadow ? `${this.prefix}-card-shadow-${node.shadow}` : void 0,
       ...this.getCommonClasses(node)
     ]);
@@ -49031,19 +48905,11 @@ ${slider}`;
   renderPlaceholder(node) {
     const classes = this.buildClassString([
       `${this.prefix}-placeholder`,
-      node.children && node.children.length > 0 ? `${this.prefix}-placeholder-with-children` : void 0,
       ...this.getCommonClasses(node)
     ]);
     const styles = this.buildCommonStyles(node);
     const styleAttr = styles ? ` style="${styles}"` : "";
     const label = node.label ? this.escapeHtml(node.label) : "Placeholder";
-    if (node.children && node.children.length > 0) {
-      const childrenHtml = this.renderChildren(node.children);
-      return `<div class="${classes}"${styleAttr}>
-  <span class="${this.prefix}-placeholder-label">${label}</span>
-  <div class="${this.prefix}-placeholder-overlay">${childrenHtml}</div>
-</div>`;
-    }
     return `<div class="${classes}"${styleAttr}>${label}</div>`;
   }
   renderAvatar(node) {
@@ -49289,12 +49155,6 @@ ${items}
     ]);
     const styles = this.buildCommonStyles(node);
     const styleAttr = styles ? ` style="${styles}"` : "";
-    if (node.children && node.children.length > 0) {
-      const content = this.renderNavChildren(node.children);
-      return `<nav class="${classes}"${styleAttr}>
-${content}
-</nav>`;
-    }
     const items = node.items.map((item) => {
       if (typeof item === "string") {
         return `<a class="${this.prefix}-nav-link" href="#">${this.escapeHtml(item)}</a>`;
@@ -49304,48 +49164,12 @@ ${content}
         item.active ? `${this.prefix}-nav-link-active` : void 0,
         item.disabled ? `${this.prefix}-nav-link-disabled` : void 0
       ]);
-      const iconHtml = item.icon ? this.renderIconHtml(item.icon) + " " : "";
-      return `<a class="${linkClasses}" href="${item.href || "#"}">${iconHtml}${this.escapeHtml(item.label)}</a>`;
+      return `<a class="${linkClasses}" href="${item.href || "#"}">${this.escapeHtml(item.label)}</a>`;
     }).join("\n");
     return `<nav class="${classes}"${styleAttr}>
 ${items}
 </nav>`;
   }
-  renderNavChildren(children) {
-    return children.map((child) => {
-      if (child.type === "divider") {
-        return `<hr class="${this.prefix}-nav-divider" />`;
-      }
-      if (child.type === "group") {
-        const groupItems = child.items.map((item) => {
-          if (item.type === "divider") {
-            return `<hr class="${this.prefix}-nav-divider" />`;
-          }
-          return this.renderNavItem(item);
-        }).join("\n");
-        return `<div class="${this.prefix}-nav-group">
-  <div class="${this.prefix}-nav-group-label">${this.escapeHtml(child.label)}</div>
-${groupItems}
-</div>`;
-      }
-      if (child.type === "item") {
-        return this.renderNavItem(child);
-      }
-      return "";
-    }).join("\n");
-  }
-  renderNavItem(item) {
-    const linkClasses = this.buildClassString([
-      `${this.prefix}-nav-link`,
-      item.active ? `${this.prefix}-nav-link-active` : void 0,
-      item.disabled ? `${this.prefix}-nav-link-disabled` : void 0
-    ]);
-    const iconHtml = item.icon ? this.renderIconHtml(item.icon) + " " : "";
-    return `<a class="${linkClasses}" href="${item.href || "#"}">${iconHtml}${this.escapeHtml(item.label)}</a>`;
-  }
-  renderIconHtml(iconName) {
-    return `<span class="${this.prefix}-icon" data-icon="${iconName}"></span>`;
-  }
   renderTabs(node) {
     const classes = this.buildClassString([
       `${this.prefix}-tabs`,
@@ -49500,239 +49324,13 @@ function createHtmlRenderer(options) {
   return new HtmlRenderer(options);
 }
 
-// src/renderer/svg/flex-layout.ts
-function computeFlexLayout(items, config) {
-  const { mainSize, crossSize, justifyContent, alignItems, gap } = config;
-  const computed = items.map((props, index) => {
-    let flexBasis;
-    if (props.basis === "auto" || props.basis === "content") {
-      flexBasis = props.contentSize;
-    } else {
-      flexBasis = props.basis;
-    }
-    flexBasis = clamp(flexBasis, props.minSize, props.maxSize);
-    return {
-      index,
-      props,
-      flexBasis,
-      mainSize: flexBasis,
-      crossSize: 0,
-      mainPosition: 0,
-      crossPosition: 0,
-      frozen: false,
-      scaledShrinkFactor: props.shrink * flexBasis
-    };
-  });
-  const totalGap = Math.max(0, (items.length - 1) * gap);
-  const totalFlexBasis = computed.reduce((sum, item) => sum + item.flexBasis, 0);
-  let freeSpace = mainSize - totalFlexBasis - totalGap;
-  if (freeSpace !== 0) {
-    resolveFlexibleLengths(computed, freeSpace);
-  }
-  distributeMainAxis(computed, mainSize, totalGap, gap, justifyContent);
-  const crossSizeMax = crossSize ?? Math.max(...computed.map((item) => item.props.contentSize), 0);
-  alignCrossAxis(computed, crossSizeMax, alignItems);
-  const mainSizeUsed = computed.reduce((sum, item) => sum + item.mainSize, 0) + totalGap;
-  return {
-    items: computed,
-    mainSizeUsed,
-    crossSizeMax
-  };
-}
-function resolveFlexibleLengths(items, initialFreeSpace) {
-  items.forEach((item) => {
-    item.frozen = false;
-    item.mainSize = item.flexBasis;
-  });
-  let freeSpace = initialFreeSpace;
-  const isGrowing = freeSpace > 0;
-  let iteration = 0;
-  const maxIterations = items.length + 1;
-  while (iteration < maxIterations) {
-    iteration++;
-    const unfrozen = items.filter((item) => !item.frozen);
-    if (unfrozen.length === 0) break;
-    let flexFactorSum;
-    if (isGrowing) {
-      flexFactorSum = unfrozen.reduce((sum, item) => sum + item.props.grow, 0);
-    } else {
-      flexFactorSum = unfrozen.reduce((sum, item) => sum + item.scaledShrinkFactor, 0);
-    }
-    if (flexFactorSum === 0) {
-      unfrozen.forEach((item) => item.frozen = true);
-      break;
-    }
-    const usedSpace = items.reduce((sum, item) => sum + item.mainSize, 0);
-    const containerMainSize = usedSpace + freeSpace;
-    freeSpace = containerMainSize - usedSpace;
-    let totalViolation = 0;
-    for (const item of unfrozen) {
-      let flexFraction;
-      if (isGrowing) {
-        flexFraction = item.props.grow / flexFactorSum;
-      } else {
-        flexFraction = item.scaledShrinkFactor / flexFactorSum;
-      }
-      const deltaSize = freeSpace * flexFraction;
-      const targetSize = item.flexBasis + deltaSize;
-      const clampedSize = clamp(targetSize, item.props.minSize, item.props.maxSize);
-      const violation = clampedSize - targetSize;
-      item.mainSize = clampedSize;
-      totalViolation += violation;
-      if (violation !== 0) {
-        item.frozen = true;
-      }
-    }
-    if (Math.abs(totalViolation) < 0.01) {
-      unfrozen.forEach((item) => item.frozen = true);
-      break;
-    }
-    freeSpace = containerMainSize - items.reduce((sum, item) => sum + item.mainSize, 0);
-  }
-}
-function distributeMainAxis(items, containerSize, totalGap, gap, justifyContent) {
-  if (items.length === 0) return;
-  const totalItemSize = items.reduce((sum, item) => sum + item.mainSize, 0);
-  const freeSpace = containerSize - totalItemSize - totalGap;
-  let position = 0;
-  let itemGap = gap;
-  let leadingSpace = 0;
-  switch (justifyContent) {
-    case "flex-start":
-      leadingSpace = 0;
-      break;
-    case "flex-end":
-      leadingSpace = freeSpace;
-      break;
-    case "center":
-      leadingSpace = freeSpace / 2;
-      break;
-    case "space-between":
-      leadingSpace = 0;
-      if (items.length > 1) {
-        itemGap = gap + freeSpace / (items.length - 1);
-      }
-      break;
-    case "space-around":
-      if (items.length > 0) {
-        const spacePerItem = freeSpace / items.length;
-        leadingSpace = spacePerItem / 2;
-        itemGap = gap + spacePerItem;
-      }
-      break;
-    case "space-evenly":
-      if (items.length > 0) {
-        const totalSpaces = items.length + 1;
-        const spaceSize = freeSpace / totalSpaces;
-        leadingSpace = spaceSize;
-        itemGap = gap + spaceSize;
-      }
-      break;
-  }
-  position = leadingSpace;
-  for (let i = 0; i < items.length; i++) {
-    items[i].mainPosition = position;
-    position += items[i].mainSize;
-    if (i < items.length - 1) {
-      position += itemGap;
-    }
-  }
-}
-function alignCrossAxis(items, containerCrossSize, alignItems) {
-  for (const item of items) {
-    const align = item.props.alignSelf ?? alignItems;
-    const itemCrossSize = item.props.contentSize;
-    item.crossSize = align === "stretch" ? containerCrossSize : itemCrossSize;
-    switch (align) {
-      case "flex-start":
-        item.crossPosition = 0;
-        break;
-      case "flex-end":
-        item.crossPosition = containerCrossSize - item.crossSize;
-        break;
-      case "center":
-        item.crossPosition = (containerCrossSize - item.crossSize) / 2;
-        break;
-      case "stretch":
-        item.crossPosition = 0;
-        item.crossSize = containerCrossSize;
-        break;
-      case "baseline":
-        item.crossPosition = 0;
-        break;
-    }
-  }
-}
-function clamp(value, min, max) {
-  return Math.max(min, Math.min(max, value));
-}
-function toJustifyContent(justify) {
-  switch (justify) {
-    case "start":
-      return "flex-start";
-    case "end":
-      return "flex-end";
-    case "center":
-      return "center";
-    case "between":
-      return "space-between";
-    case "around":
-      return "space-around";
-    case "evenly":
-      return "space-evenly";
-    default:
-      return "flex-start";
-  }
-}
-function toAlignItems(align) {
-  switch (align) {
-    case "start":
-      return "flex-start";
-    case "end":
-      return "flex-end";
-    case "center":
-      return "center";
-    case "stretch":
-      return "stretch";
-    case "baseline":
-      return "baseline";
-    default:
-      return "stretch";
-  }
-}
-function createFlexItemProps(contentSize, options = {}) {
-  return {
-    basis: options.basis ?? "auto",
-    grow: options.grow ?? 0,
-    shrink: options.shrink ?? 1,
-    minSize: options.minSize ?? 0,
-    maxSize: options.maxSize ?? Infinity,
-    contentSize,
-    alignSelf: options.alignSelf
-  };
-}
-function createFlexGrowItemProps(contentSize, options = {}) {
-  return {
-    basis: options.basis ?? 0,
-    grow: options.grow ?? 1,
-    shrink: options.shrink ?? 1,
-    minSize: options.minSize ?? 0,
-    maxSize: options.maxSize ?? Infinity,
-    contentSize,
-    alignSelf: options.alignSelf
-  };
-}
-
 // src/renderer/svg/index.ts
 var SvgRenderer = class {
   options;
   theme;
-  pageWidth = 0;
-  pageHeight = 0;
-  clipPathDefs = [];
-  clipPathCounter = 0;
-  // Default spacing values
-  DEFAULT_GAP = 16;
+  currentX = 0;
+  currentY = 0;
+  contentWidth = 0;
   constructor(options = {}) {
     this.options = {
       width: options.width ?? 800,
@@ -49743,41 +49341,28 @@ var SvgRenderer = class {
       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.clipPathDefs = [];
-    this.clipPathCounter = 0;
+    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) {
-      const pageAny = firstPage;
-      const hasExplicitWidth = pageAny.width !== void 0;
-      const hasExplicitHeight = pageAny.height !== void 0;
-      if (hasExplicitWidth || hasExplicitHeight) {
-        if (hasExplicitWidth) {
-          width = pageAny.width;
-        }
-        if (hasExplicitHeight) {
-          height = pageAny.height;
-        }
-      } else if (firstPage.viewport !== void 0 || firstPage.device !== void 0) {
-        const viewport = resolveViewport(firstPage.viewport, firstPage.device);
-        width = viewport.width;
-        height = viewport.height;
-      }
+    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;
     }
-    this.pageWidth = width;
-    this.pageHeight = height;
     const content = doc.children.map((page) => this.renderPage(page)).join("\n");
-    const allDefs = this.generateDefs() + "\n" + this.clipPathDefs.join("\n");
     const svg = `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
   <defs>
-    ${allDefs}
+    ${this.generateDefs()}
   </defs>
   <rect width="100%" height="100%" fill="${this.options.background}"/>
   <g transform="scale(${this.options.scale})">
@@ -49787,7 +49372,7 @@ var SvgRenderer = class {
     return { svg, width, height };
   }
   /**
-   * Generate SVG defs (styles)
+   * Generate SVG defs (styles, patterns, etc.)
    */
   generateDefs() {
     return `
@@ -49798,1500 +49383,684 @@ var SvgRenderer = class {
     </style>
     `;
   }
-  // ===========================================
-  // Page Layout
-  // ===========================================
-  renderPage(page) {
-    const padding = this.options.padding;
-    const contentWidth = this.pageWidth - padding * 2;
-    const contentHeight = this.pageHeight - padding * 2;
-    const constraints = {
-      maxWidth: contentWidth,
-      maxHeight: contentHeight
-    };
-    const childBoxes = [];
-    let currentY = padding;
-    const isCentered = page.centered === true;
-    const hasHeader = page.children.some((c) => c.type === "Header");
-    const hasFooter = page.children.some((c) => c.type === "Footer");
-    const hasMain = page.children.some((c) => c.type === "Main");
-    if (hasHeader || hasFooter || hasMain) {
-      return this.renderPageWithFixedLayout(page, padding, contentWidth, contentHeight);
-    }
-    const measurements = page.children.map((child) => this.measureNode(child, constraints));
-    const gap = this.getGap(page) || this.DEFAULT_GAP;
-    const totalChildrenHeight = measurements.reduce((sum, m, i) => {
-      return sum + m.height + (i > 0 ? gap : 0);
-    }, 0);
-    if (isCentered) {
-      const availableHeight = contentHeight;
-      currentY = padding + Math.max(0, (availableHeight - totalChildrenHeight) / 2);
-    }
-    for (let i = 0; i < page.children.length; i++) {
-      const child = page.children[i];
-      const measurement = measurements[i];
-      let childX = padding;
-      if (isCentered || this.shouldCenterHorizontally(child)) {
-        childX = padding + (contentWidth - measurement.width) / 2;
-      }
-      const box = this.layoutNode(child, childX, currentY, constraints);
-      childBoxes.push(box);
-      currentY += box.height + gap;
-    }
-    const elements = [];
-    for (const box of childBoxes) {
-      elements.push(this.renderBox(box));
-    }
-    return elements.join("\n");
-  }
   /**
-   * Render page with fixed header/footer layout
-   * Header at top, Footer at bottom, Main fills remaining space
+   * Render a page node
    */
-  renderPageWithFixedLayout(page, padding, contentWidth, contentHeight) {
-    const constraints = {
-      maxWidth: contentWidth,
-      maxHeight: contentHeight
-    };
-    const header = page.children.find((c) => c.type === "Header");
-    const footer = page.children.find((c) => c.type === "Footer");
-    const otherChildren = page.children.filter((c) => c.type !== "Header" && c.type !== "Footer");
+  renderPage(node) {
     const elements = [];
-    let headerHeight = 0;
-    let footerHeight = 0;
-    let currentY = padding;
-    if (header) {
-      const headerMeasure = this.measureNode(header, constraints);
-      headerHeight = headerMeasure.height;
-      const headerBox = this.layoutNode(header, padding, currentY, constraints);
-      elements.push(this.renderBox(headerBox));
-    }
-    if (footer) {
-      const footerMeasure = this.measureNode(footer, constraints);
-      footerHeight = footerMeasure.height;
-      const footerY = this.pageHeight - padding - footerHeight;
-      const footerBox = this.layoutNode(footer, padding, footerY, constraints);
-      elements.push(this.renderBox(footerBox));
+    if (node.title) {
+      elements.push(this.renderPageTitle(node.title));
     }
-    const mainStartY = currentY + headerHeight;
-    const mainEndY = this.pageHeight - padding - footerHeight;
-    const mainHeight = mainEndY - mainStartY;
-    if (otherChildren.length > 0) {
-      const mainConstraints = {
-        maxWidth: contentWidth,
-        maxHeight: mainHeight
-      };
-      const clipId = `main-clip-${this.clipPathCounter++}`;
-      this.clipPathDefs.push(`<clipPath id="${clipId}"><rect x="${padding}" y="${mainStartY}" width="${contentWidth}" height="${mainHeight}"/></clipPath>`);
-      const mainContent = [];
-      mainContent.push(`<g clip-path="url(#${clipId})">`);
-      let childY = mainStartY;
-      const gap = this.getGap(page) || 0;
-      for (const child of otherChildren) {
-        const childBox = this.layoutNode(child, padding, childY, mainConstraints);
-        mainContent.push(this.renderBox(childBox));
-        childY += childBox.height + gap;
-      }
-      mainContent.push(`</g>`);
-      elements.push(mainContent.join("\n"));
+    for (const child of node.children) {
+      elements.push(this.renderNode(child));
     }
     return elements.join("\n");
   }
-  shouldCenterHorizontally(node) {
-    return node.type === "Card" || node.type === "Modal";
+  /**
+   * 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>`;
   }
-  // ===========================================
-  // Measurement Phase
-  // ===========================================
-  measureNode(node, constraints) {
+  /**
+   * Render any AST node
+   */
+  renderNode(node) {
     switch (node.type) {
+      // Layout nodes
       case "Row":
-        return this.measureRow(node, constraints);
+        return this.renderRow(node);
       case "Col":
-        return this.measureCol(node, constraints);
+        return this.renderCol(node);
       case "Header":
-        return this.measureHeader(node, constraints);
-      case "Footer":
-        return this.measureFooter(node, constraints);
+        return this.renderHeader(node);
       case "Main":
-        return this.measureMain(node, constraints);
+        return this.renderMain(node);
+      case "Footer":
+        return this.renderFooter(node);
       case "Sidebar":
-        return this.measureSidebar(node, constraints);
+        return this.renderSidebar(node);
+      // Container nodes
       case "Card":
-        return this.measureCard(node, constraints);
+        return this.renderCard(node);
       case "Modal":
-        return this.measureModal(node, constraints);
-      case "Title":
-        return this.measureTitle(node);
+        return this.renderModal(node);
+      // Text nodes
       case "Text":
-        return this.measureText(node);
-      case "Button":
-        return this.measureButton(node, constraints);
+        return this.renderText(node);
+      case "Title":
+        return this.renderTitle(node);
+      case "Link":
+        return this.renderLink(node);
+      // Input nodes
       case "Input":
-        return this.measureInput(node, constraints);
+        return this.renderInput(node);
       case "Textarea":
-        return this.measureTextarea(node, constraints);
+        return this.renderTextarea(node);
       case "Select":
-        return this.measureSelect(node, constraints);
+        return this.renderSelect(node);
       case "Checkbox":
-        return this.measureCheckbox(node);
+        return this.renderCheckbox(node);
       case "Radio":
-        return this.measureRadio(node);
+        return this.renderRadio(node);
       case "Switch":
-        return this.measureSwitch(node);
-      case "Link":
-        return this.measureLink(node);
+        return this.renderSwitch(node);
+      // Button
+      case "Button":
+        return this.renderButton(node);
+      // Display nodes
       case "Image":
-        return this.measureImage(node, constraints);
+        return this.renderImage(node);
       case "Placeholder":
-        return this.measurePlaceholder(node, constraints);
+        return this.renderPlaceholder(node);
       case "Avatar":
-        return this.measureAvatar(node, constraints);
+        return this.renderAvatar(node);
       case "Badge":
-        return this.measureBadge(node);
+        return this.renderBadge(node);
+      // Data nodes
       case "Table":
-        return this.measureTable(node);
+        return this.renderTable(node);
       case "List":
-        return this.measureList(node);
+        return this.renderList(node);
+      // Feedback nodes
       case "Alert":
-        return this.measureAlert(node, constraints);
+        return this.renderAlert(node);
       case "Progress":
-        return this.measureProgress(node, constraints);
+        return this.renderProgress(node);
       case "Spinner":
-        return this.measureSpinner(node);
+        return this.renderSpinner(node);
+      // Navigation nodes
       case "Nav":
-        return this.measureNav(node);
+        return this.renderNav(node);
       case "Tabs":
-        return this.measureTabs(node);
+        return this.renderTabs(node);
       case "Breadcrumb":
-        return this.measureBreadcrumb(node);
-      case "Icon":
-        return this.measureIcon(node);
-      case "Divider":
-        return this.measureDivider(node, constraints);
+        return this.renderBreadcrumb(node);
       default:
-        return { width: 100, height: 40 };
-    }
-  }
-  measureRow(node, constraints) {
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const maxChildHeight = Math.max(...childMeasurements.map((m) => m.height), 0);
-    const totalChildWidth = childMeasurements.reduce((sum, m) => sum + m.width, 0);
-    const totalGapWidth = Math.max(0, (node.children.length - 1) * gap);
-    const contentWidth = totalChildWidth + totalGapWidth + padding.left + padding.right;
-    const hasExplicitWidth = "w" in node && node.w !== void 0;
-    const width = hasExplicitWidth ? constraints.maxWidth : Math.min(contentWidth, constraints.maxWidth);
-    return {
-      width,
-      height: maxChildHeight + padding.top + padding.bottom
-    };
-  }
-  measureCol(node, constraints) {
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const padding = this.getPadding(node);
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const totalHeight = childMeasurements.reduce(
-      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-      0
-    );
-    const maxChildWidth = Math.max(...childMeasurements.map((m) => m.width), 0);
-    return {
-      width: Math.max(maxChildWidth + padding.left + padding.right, constraints.maxWidth),
-      height: totalHeight + padding.top + padding.bottom
-    };
-  }
-  measureHeader(node, constraints) {
-    const padding = this.getPadding(node);
-    const height = this.resolveSize(node.h) || 56;
-    return {
-      width: constraints.maxWidth,
-      height: height + padding.top + padding.bottom
-    };
-  }
-  measureFooter(node, constraints) {
-    const padding = this.getPadding(node);
-    const height = this.resolveSize(node.h) || 60;
-    return {
-      width: constraints.maxWidth,
-      height: height + padding.top + padding.bottom
-    };
-  }
-  measureMain(node, constraints) {
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const totalHeight = childMeasurements.reduce(
-      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-      0
-    );
-    return {
-      width: constraints.maxWidth,
-      height: totalHeight + padding.top + padding.bottom
-    };
-  }
-  measureSidebar(node, constraints) {
-    const width = this.resolveSize(node.w) || 200;
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? 8;
-    const innerWidth = width - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const contentHeight = childMeasurements.reduce(
-      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-      0
-    ) + padding.top + padding.bottom;
-    const explicitHeight = this.resolveSize(node.h);
-    const height = explicitHeight || constraints.maxHeight || contentHeight;
-    return { width, height };
-  }
-  measureCard(node, constraints) {
-    let cardWidth = this.resolveSize(node.w);
-    if (!cardWidth) {
-      cardWidth = Math.min(360, constraints.maxWidth);
-    } else {
-      cardWidth = Math.min(cardWidth, constraints.maxWidth);
-    }
-    const explicitHeight = this.resolveSize(node.h);
-    if (explicitHeight) {
-      return { width: cardWidth, height: explicitHeight };
-    }
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const innerWidth = cardWidth - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    let contentHeight = 0;
-    if (node.title) {
-      contentHeight += 28;
-    }
-    contentHeight += childMeasurements.reduce(
-      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-      0
-    );
-    return {
-      width: cardWidth,
-      height: contentHeight + padding.top + padding.bottom
-    };
-  }
-  measureModal(node, constraints) {
-    const width = this.resolveSize(node.w) || 400;
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const innerWidth = width - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    let contentHeight = node.title ? 40 : 0;
-    contentHeight += childMeasurements.reduce(
-      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-      0
-    );
-    return {
-      width,
-      height: contentHeight + padding.top + padding.bottom
-    };
-  }
-  measureTitle(node) {
-    const level = node.level || 1;
-    const fontSize = this.getTitleFontSize(level);
-    const textWidth = this.estimateTextWidth(node.content, fontSize);
-    return { width: textWidth, height: fontSize + 8 };
-  }
-  measureText(node) {
-    const fontSize = this.resolveFontSize(node.size);
-    const textWidth = this.estimateTextWidth(node.content, fontSize);
-    return { width: textWidth, height: fontSize + 8 };
-  }
-  measureButton(node, constraints) {
-    const hasIcon = !!node.icon;
-    const isIconOnly = hasIcon && !node.content.trim();
-    const iconSize = 16;
-    const padding = 16;
-    let width;
-    if (this.isFullWidth(node)) {
-      width = constraints.maxWidth;
-    } else if (isIconOnly) {
-      width = iconSize + padding * 2;
-    } else if (hasIcon) {
-      width = Math.max(80, this.estimateTextWidth(node.content, 14) + iconSize + 48);
-    } else {
-      width = Math.max(80, this.estimateTextWidth(node.content, 14) + 32);
-    }
-    return { width, height: 40 };
-  }
-  measureInput(node, constraints) {
-    let width;
-    if (this.resolveSize(node.w)) {
-      width = this.resolveSize(node.w);
-    } else if (constraints.inHeader) {
-      const placeholderWidth = node.placeholder ? this.estimateTextWidth(node.placeholder, 14) : 60;
-      width = Math.max(120, placeholderWidth + 24 + 100);
-    } else {
-      width = constraints.maxWidth;
-    }
-    let height = 36;
-    if (node.label) height += 24;
-    return { width, height };
-  }
-  measureTextarea(node, constraints) {
-    const width = this.resolveSize(node.w) || constraints.maxWidth;
-    let height = node.rows ? node.rows * 24 : 100;
-    if (node.label) height += 24;
-    return { width, height };
-  }
-  measureSelect(node, constraints) {
-    const width = this.resolveSize(node.w) || constraints.maxWidth;
-    let height = 40;
-    if (node.label) height += 24;
-    return { width, height };
-  }
-  measureCheckbox(node) {
-    const labelWidth = node.label ? this.estimateTextWidth(node.label, 14) + 8 : 0;
-    return { width: 18 + labelWidth, height: 24 };
-  }
-  measureRadio(node) {
-    const labelWidth = node.label ? this.estimateTextWidth(node.label, 14) + 8 : 0;
-    return { width: 18 + labelWidth, height: 24 };
-  }
-  measureSwitch(node) {
-    const labelWidth = node.label ? this.estimateTextWidth(node.label, 14) + 8 : 0;
-    return { width: 44 + labelWidth, height: 28 };
-  }
-  measureLink(node) {
-    const fontSize = 14;
-    const textWidth = this.estimateTextWidth(node.content, fontSize);
-    return { width: textWidth, height: fontSize + 8 };
-  }
-  measureImage(node, constraints) {
-    let width;
-    if (this.isFullWidth(node)) {
-      width = constraints.maxWidth;
-    } else {
-      width = this.resolveSize(node.w) || 200;
-    }
-    const height = this.resolveSize(node.h) || 150;
-    return { width, height };
-  }
-  measurePlaceholder(node, constraints) {
-    let width;
-    if (node.w !== void 0) {
-      width = this.isFullWidth(node) ? constraints.maxWidth : this.resolveSize(node.w) || 200;
-    } else {
-      width = constraints.maxWidth || 200;
-    }
-    const height = this.resolveSize(node.h) || 100;
-    return { width, height };
-  }
-  measureAvatar(node, constraints) {
-    const sizes = { xs: 24, sm: 32, md: 40, lg: 48, xl: 64 };
-    const defaultSize = constraints?.inHeader ? "sm" : "md";
-    const size = sizes[node.size || defaultSize] || 40;
-    return { width: size, height: size };
-  }
-  measureBadge(node) {
-    const width = Math.max(24, this.estimateTextWidth(node.content, 12) + 16);
-    return { width, height: 22 };
-  }
-  measureTable(node) {
-    const columns = node.columns || [];
-    const rows = node.rows || [];
-    const rowCount = rows.length || 3;
-    const colWidth = 120;
-    const rowHeight = 40;
-    return {
-      width: columns.length * colWidth,
-      height: (rowCount + 1) * rowHeight
-    };
-  }
-  measureList(node) {
-    const items = node.items || [];
-    const maxItemWidth = Math.max(...items.map((item) => {
-      const content = typeof item === "string" ? item : item.content;
-      return this.estimateTextWidth(content, 14);
-    }), 100);
-    return { width: maxItemWidth + 24, height: items.length * 28 };
-  }
-  measureAlert(_node, constraints) {
-    const width = Math.min(400, constraints.maxWidth);
-    return { width, height: 48 };
-  }
-  measureProgress(node, constraints) {
-    const width = Math.min(200, constraints.maxWidth);
-    let height = 8;
-    if (node.label) height += 24;
-    return { width, height };
-  }
-  measureSpinner(node) {
-    const sizes = { xs: 16, sm: 20, md: 24, lg: 32, xl: 40 };
-    const size = sizes[node.size || "md"] || 24;
-    return { width: size, height: size };
-  }
-  measureNav(node) {
-    const items = node.items || [];
-    if (node.vertical) {
-      const maxWidth = Math.max(...items.map((item) => {
-        const label = typeof item === "string" ? item : item.label;
-        return this.estimateTextWidth(label, 14);
-      }), 100);
-      return { width: maxWidth, height: items.length * 32 };
-    } else {
-      const totalWidth = items.reduce((sum, item) => {
-        const label = typeof item === "string" ? item : item.label;
-        return sum + this.estimateTextWidth(label, 14) + 24;
-      }, 0);
-      return { width: totalWidth, height: 32 };
+        return `<!-- Unsupported: ${node.type} -->`;
     }
   }
-  measureTabs(node) {
-    const items = node.items || [];
-    const totalWidth = items.reduce((sum, item) => {
-      const label = typeof item === "string" ? item : item;
-      return sum + this.estimateTextWidth(label, 14) + 32;
-    }, 0);
-    return { width: totalWidth, height: 44 };
-  }
-  measureBreadcrumb(node) {
-    const items = node.items || [];
-    const totalWidth = items.reduce((sum, item, idx) => {
-      const label = typeof item === "string" ? item : item.label;
-      return sum + this.estimateTextWidth(label, 14) + (idx < items.length - 1 ? 24 : 0);
-    }, 0);
-    return { width: totalWidth, height: 28 };
-  }
-  measureIcon(node) {
-    const sizes = { xs: 12, sm: 16, md: 20, lg: 24, xl: 32 };
-    const size = sizes[node.size || "md"] || 20;
-    return { width: size, height: size };
-  }
-  measureDivider(_node, constraints) {
-    return { width: constraints.maxWidth, height: 1 };
-  }
   // ===========================================
-  // Layout Phase
+  // Layout Renderers
   // ===========================================
-  layoutNode(node, x, y, constraints) {
-    switch (node.type) {
-      case "Row":
-        return this.layoutRow(node, x, y, constraints);
-      case "Col":
-        return this.layoutCol(node, x, y, constraints);
-      case "Header":
-        return this.layoutHeader(node, x, y, constraints);
-      case "Footer":
-        return this.layoutFooter(node, x, y, constraints);
-      case "Main":
-        return this.layoutMain(node, x, y, constraints);
-      case "Sidebar":
-        return this.layoutSidebar(node, x, y, constraints);
-      case "Card":
-        return this.layoutCard(node, x, y, constraints);
-      default:
-        const size = this.measureNode(node, constraints);
-        return {
-          x,
-          y,
-          width: size.width,
-          height: size.height,
-          node,
-          children: []
-        };
-    }
-  }
-  layoutRow(node, x, y, constraints) {
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const padding = this.getPadding(node);
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const justify = node.justify || "start";
-    const align = node.align || (constraints.inHeader ? "center" : "start");
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const flexItems = node.children.map((child, i) => {
-      const measurement = childMeasurements[i];
-      if ("w" in child && child.w !== void 0 && child.w !== "full") {
-        const resolved = this.resolveSize(child.w);
-        if (resolved !== void 0) {
-          return createFlexItemProps(measurement.height, {
-            basis: resolved,
-            grow: 0,
-            shrink: 0,
-            minSize: resolved,
-            maxSize: resolved,
-            contentSize: measurement.width
-          });
-        }
-      }
-      if (this.isFlexContainer(child)) {
-        return createFlexGrowItemProps(measurement.height, {
-          basis: 0,
-          grow: 1,
-          shrink: 1,
-          minSize: 0,
-          maxSize: Infinity,
-          contentSize: measurement.width
-        });
-      }
-      if (constraints.inHeader && child.type === "Input") {
-        return createFlexGrowItemProps(measurement.height, {
-          basis: measurement.width,
-          // auto = content size
-          grow: 1,
-          shrink: 1,
-          minSize: 120,
-          // min-width: 120px
-          maxSize: Infinity,
-          contentSize: measurement.width
-        });
-      }
-      return createFlexItemProps(measurement.height, {
-        basis: measurement.width,
-        // auto = content size
-        grow: 0,
-        shrink: 1,
-        minSize: 0,
-        maxSize: Infinity,
-        contentSize: measurement.width
-      });
-    });
-    const flexConfig = {
-      mainSize: innerWidth,
-      crossSize: void 0,
-      // Will use max child height
-      direction: "row",
-      justifyContent: toJustifyContent(justify),
-      alignItems: toAlignItems(align),
-      gap
-    };
-    const flexResult = computeFlexLayout(flexItems, flexConfig);
-    const maxChildHeight = Math.max(...childMeasurements.map((m) => m.height), 0);
-    const innerMaxHeight = constraints.maxHeight ? constraints.maxHeight - padding.top - padding.bottom : void 0;
-    const effectiveHeight = innerMaxHeight || maxChildHeight;
-    const rowHeight = effectiveHeight + padding.top + padding.bottom;
-    const children = [];
-    for (let i = 0; i < node.children.length; i++) {
-      const child = node.children[i];
-      const flexItem = flexResult.items[i];
-      const measurement = childMeasurements[i];
-      const childX = x + padding.left + flexItem.mainPosition;
-      let childY = y + padding.top;
-      switch (align) {
-        case "center":
-          childY = y + padding.top + (maxChildHeight - measurement.height) / 2;
-          break;
-        case "end":
-          childY = y + padding.top + (maxChildHeight - measurement.height);
-          break;
-      }
-      const childBox = this.layoutNode(child, childX, childY, {
-        ...constraints,
-        maxWidth: flexItem.mainSize,
-        maxHeight: effectiveHeight
-      });
-      children.push(childBox);
-    }
-    return {
-      x,
-      y,
-      width: constraints.maxWidth,
-      height: rowHeight,
-      node,
-      children,
-      padding
-    };
-  }
-  layoutCol(node, x, y, constraints) {
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const padding = this.getPadding(node);
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const innerHeight = constraints.maxHeight ? constraints.maxHeight - padding.top - padding.bottom : void 0;
-    const align = node.align || "stretch";
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const flexItems = node.children.map((child, i) => {
-      const measurement = childMeasurements[i];
-      if ("h" in child && child.h !== void 0) {
-        const resolved = this.resolveSize(child.h);
-        if (resolved !== void 0) {
-          return createFlexItemProps(measurement.width, {
-            basis: resolved,
-            grow: 0,
-            shrink: 0,
-            minSize: resolved,
-            maxSize: resolved,
-            contentSize: measurement.height
-          });
-        }
+  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;
       }
-      if (child.type === "Row" && this.rowContainsSidebarOrMain(child)) {
-        return createFlexGrowItemProps(measurement.width, {
-          basis: 0,
-          grow: 1,
-          shrink: 1,
-          minSize: 0,
-          maxSize: Infinity,
-          contentSize: measurement.height
-        });
-      }
-      return createFlexItemProps(measurement.width, {
-        basis: measurement.height,
-        // auto = content size
-        grow: 0,
-        shrink: 1,
-        minSize: 0,
-        maxSize: Infinity,
-        contentSize: measurement.height
-      });
-    });
-    const flexConfig = {
-      mainSize: innerHeight ?? childMeasurements.reduce(
-        (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-        0
-      ),
-      crossSize: innerWidth,
-      direction: "column",
-      justifyContent: "flex-start",
-      alignItems: toAlignItems(align),
-      gap
-    };
-    const flexResult = computeFlexLayout(flexItems, flexConfig);
-    const children = [];
-    for (let i = 0; i < node.children.length; i++) {
-      const child = node.children[i];
-      const flexItem = flexResult.items[i];
-      const measurement = childMeasurements[i];
-      let childX = x + padding.left;
-      let childWidth = align === "stretch" ? innerWidth : measurement.width;
-      switch (align) {
-        case "center":
-          childX = x + padding.left + (innerWidth - measurement.width) / 2;
-          break;
-        case "end":
-          childX = x + padding.left + (innerWidth - measurement.width);
-          break;
-      }
-      const childY = y + padding.top + flexItem.mainPosition;
-      const childBox = this.layoutNode(child, childX, childY, {
-        ...constraints,
-        maxWidth: childWidth,
-        maxHeight: flexItem.mainSize
-      });
-      children.push(childBox);
-    }
-    const totalHeight = flexResult.mainSizeUsed;
-    return {
-      x,
-      y,
-      width: constraints.maxWidth,
-      height: totalHeight + padding.top + padding.bottom,
-      node,
-      children,
-      padding
-    };
-  }
-  rowContainsSidebarOrMain(row) {
-    return row.children.some(
-      (child) => child.type === "Sidebar" || child.type === "Main"
-    );
-  }
-  layoutHeader(node, x, y, constraints) {
-    const padding = this.getPadding(node);
-    const height = this.resolveSize(node.h) || 56;
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const children = [];
-    let currentY = y + padding.top;
+      return sum + 1;
+    }, 0);
+    const colWidth = this.contentWidth / Math.max(totalSpan, 1);
+    let maxHeight = 0;
     for (const child of node.children) {
-      const childBox = this.layoutNode(child, x + padding.left, currentY, {
-        ...constraints,
-        maxWidth: innerWidth,
-        maxHeight: void 0,
-        // Children use natural height
-        inHeader: true
-        // Pass header context for child sizing (e.g., smaller avatars)
-      });
-      const verticalOffset = (height - childBox.height) / 2;
-      childBox.y = y + padding.top + verticalOffset;
-      this.adjustChildrenY(childBox, verticalOffset);
-      children.push(childBox);
-      currentY += childBox.height;
-    }
-    return {
-      x,
-      y,
-      width: constraints.maxWidth,
-      height: height + padding.top + padding.bottom,
-      node,
-      children,
-      padding
-    };
-  }
-  adjustChildrenY(box, offset) {
-    for (const child of box.children) {
-      child.y += offset;
-      this.adjustChildrenY(child, offset);
+      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");
   }
-  /**
-   * Check if a node should flex to fill available space in a Row
-   * Only layout containers without explicit width should flex
-   */
-  isFlexContainer(node) {
-    if (node.type === "Main") return true;
-    if (node.type === "Col" && !("w" in node && node.w !== void 0)) return true;
-    return false;
+  renderCol(node) {
+    return node.children.map((child) => this.renderNode(child)).join("\n");
   }
-  layoutFooter(node, x, y, constraints) {
-    const padding = this.getPadding(node);
-    const height = this.resolveSize(node.h) || 60;
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const children = [];
-    let currentY = y + padding.top;
-    for (const child of node.children) {
-      const childBox = this.layoutNode(child, x + padding.left, currentY, {
-        ...constraints,
-        maxWidth: innerWidth,
-        maxHeight: void 0
-        // Children use natural height
-      });
-      const verticalOffset = (height - childBox.height) / 2;
-      childBox.y = y + padding.top + verticalOffset;
-      this.adjustChildrenY(childBox, verticalOffset);
-      children.push(childBox);
-      currentY += childBox.height;
-    }
-    return {
-      x,
-      y,
-      width: constraints.maxWidth,
-      height: height + padding.top + padding.bottom,
-      node,
-      children,
-      padding
-    };
+  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>`;
   }
-  layoutMain(node, x, y, constraints) {
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const innerWidth = constraints.maxWidth - padding.left - padding.right;
-    const childMeasurements = node.children.map(
-      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
-    );
-    const children = [];
-    let currentY = y + padding.top;
-    for (let i = 0; i < node.children.length; i++) {
-      const child = node.children[i];
-      const childBox = this.layoutNode(child, x + padding.left, currentY, {
-        ...constraints,
-        maxWidth: innerWidth
-      });
-      children.push(childBox);
-      currentY += childBox.height + gap;
-    }
-    const totalHeight = childMeasurements.reduce(
-      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
-      0
-    );
-    return {
-      x,
-      y,
-      width: constraints.maxWidth,
-      height: totalHeight + padding.top + padding.bottom,
-      node,
-      children,
-      padding
-    };
+  renderMain(node) {
+    return node.children.map((c) => this.renderNode(c)).join("\n");
   }
-  layoutSidebar(node, x, y, constraints) {
-    const width = this.resolveSize(node.w) || 200;
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? 8;
-    const innerWidth = width - padding.left - padding.right;
-    const children = [];
-    let currentY = y + padding.top;
-    for (const child of node.children) {
-      const childBox = this.layoutNode(child, x + padding.left, currentY, {
-        ...constraints,
-        maxWidth: innerWidth
-      });
-      children.push(childBox);
-      currentY += childBox.height + gap;
-    }
-    const contentHeight = currentY - y - padding.top - gap + padding.bottom;
-    const height = constraints.maxHeight || Math.max(contentHeight, 200);
-    return {
-      x,
-      y,
-      width,
-      height,
-      node,
-      children,
-      padding
-    };
+  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>`;
   }
-  layoutCard(node, x, y, constraints) {
-    let cardWidth = this.resolveSize(node.w);
-    if (!cardWidth) {
-      cardWidth = Math.min(360, constraints.maxWidth);
-    }
-    const padding = this.getPadding(node);
-    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
-    const innerWidth = cardWidth - padding.left - padding.right;
-    const children = [];
-    let currentY = y + padding.top;
-    if (node.title) {
-      currentY += 28;
-    }
-    for (const child of node.children) {
-      const childBox = this.layoutNode(child, x + padding.left, currentY, {
-        ...constraints,
-        maxWidth: innerWidth
-      });
-      children.push(childBox);
-      currentY += childBox.height + gap;
-    }
-    const totalHeight = currentY - y - gap + padding.bottom;
-    return {
-      x,
-      y,
-      width: cardWidth,
-      height: totalHeight,
-      node,
-      children,
-      padding
-    };
+  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>`;
   }
   // ===========================================
-  // Render Phase
+  // Container Renderers
   // ===========================================
-  renderBox(box) {
-    if (!box.node) return "";
-    switch (box.node.type) {
-      case "Row":
-        return this.renderRowBox(box);
-      case "Col":
-        return this.renderColBox(box);
-      case "Header":
-        return this.renderHeaderBox(box);
-      case "Footer":
-        return this.renderFooterBox(box);
-      case "Main":
-        return this.renderMainBox(box);
-      case "Sidebar":
-        return this.renderSidebarBox(box);
-      case "Card":
-        return this.renderCardBox(box);
-      case "Modal":
-        return this.renderModalBox(box);
-      case "Title":
-        return this.renderTitleBox(box);
-      case "Text":
-        return this.renderTextBox(box);
-      case "Button":
-        return this.renderButtonBox(box);
-      case "Input":
-        return this.renderInputBox(box);
-      case "Textarea":
-        return this.renderTextareaBox(box);
-      case "Select":
-        return this.renderSelectBox(box);
-      case "Checkbox":
-        return this.renderCheckboxBox(box);
-      case "Radio":
-        return this.renderRadioBox(box);
-      case "Switch":
-        return this.renderSwitchBox(box);
-      case "Link":
-        return this.renderLinkBox(box);
-      case "Image":
-        return this.renderImageBox(box);
-      case "Placeholder":
-        return this.renderPlaceholderBox(box);
-      case "Avatar":
-        return this.renderAvatarBox(box);
-      case "Badge":
-        return this.renderBadgeBox(box);
-      case "Table":
-        return this.renderTableBox(box);
-      case "List":
-        return this.renderListBox(box);
-      case "Alert":
-        return this.renderAlertBox(box);
-      case "Progress":
-        return this.renderProgressBox(box);
-      case "Spinner":
-        return this.renderSpinnerBox(box);
-      case "Nav":
-        return this.renderNavBox(box);
-      case "Tabs":
-        return this.renderTabsBox(box);
-      case "Breadcrumb":
-        return this.renderBreadcrumbBox(box);
-      case "Icon":
-        return this.renderIconBox(box);
-      case "Divider":
-        return this.renderDividerBox(box);
-      default:
-        return `<!-- Unsupported: ${box.node.type} -->`;
-    }
-  }
-  renderRowBox(box) {
-    const childrenSvg = box.children.map((child) => this.renderBox(child)).join("\n");
-    return childrenSvg;
-  }
-  renderColBox(box) {
-    const childrenSvg = box.children.map((child) => this.renderBox(child)).join("\n");
-    return childrenSvg;
-  }
-  renderHeaderBox(box) {
-    const node = box.node;
-    const hasBorder = node.border !== false;
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" fill="${this.theme.colors.background}"/>`;
-    if (hasBorder) {
-      svg += `<line x1="${box.x}" y1="${box.y + box.height}" x2="${box.x + box.width}" y2="${box.y + box.height}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-    }
-    svg += box.children.map((child) => this.renderBox(child)).join("\n");
-    svg += `</g>`;
-    return svg;
-  }
-  renderFooterBox(box) {
-    const node = box.node;
-    const hasBorder = node.border !== false;
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" fill="${this.theme.colors.background}"`;
-    if (hasBorder) {
-      svg += ` stroke="${this.theme.colors.border}" stroke-width="1"`;
-    }
-    svg += `/>`;
-    svg += box.children.map((child) => this.renderBox(child)).join("\n");
-    svg += `</g>`;
-    return svg;
-  }
-  renderMainBox(box) {
-    const childrenSvg = box.children.map((child) => this.renderBox(child)).join("\n");
-    return childrenSvg;
-  }
-  renderSidebarBox(box) {
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" fill="${this.theme.colors.background}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-    svg += box.children.map((child) => this.renderBox(child)).join("\n");
-    svg += `</g>`;
-    return svg;
-  }
-  renderCardBox(box) {
-    const node = box.node;
-    const shadowAttr = node.shadow ? 'filter="url(#shadow)"' : "";
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="8" fill="white" stroke="${this.theme.colors.border}" stroke-width="1" ${shadowAttr}/>`;
+  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 padding = this.getPadding(node);
-      svg += `<text x="${box.x + padding.left}" y="${box.y + padding.top + 18}" font-size="16" font-weight="600" fill="${this.theme.colors.foreground}">${this.escapeXml(node.title)}</text>`;
+      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;
     }
-    svg += box.children.map((child) => this.renderBox(child)).join("\n");
-    svg += `</g>`;
-    return svg;
+    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>`;
   }
-  renderModalBox(box) {
-    const node = box.node;
-    const modalX = (this.pageWidth - box.width) / 2;
-    const modalY = (this.pageHeight - box.height) / 2;
-    let svg = `<g>
-      <rect width="${this.pageWidth}" height="${this.pageHeight}" fill="rgba(0,0,0,0.5)"/>
-      <rect x="${modalX}" y="${modalY}" width="${box.width}" height="${box.height}" rx="8" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
+  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) {
-      svg += `<text x="${modalX + 20}" y="${modalY + 30}" font-size="18" font-weight="600" fill="${this.theme.colors.foreground}">${this.escapeXml(node.title)}</text>`;
-    }
-    for (const child of box.children) {
-      const adjustedChild = { ...child, x: modalX + (child.x - box.x), y: modalY + (child.y - box.y) };
-      svg += this.renderBox(adjustedChild);
-    }
-    svg += `</g>`;
-    return svg;
-  }
-  renderTitleBox(box) {
-    const node = box.node;
-    const level = node.level || 1;
-    const fontSize = this.getTitleFontSize(level);
-    const textY = box.y + fontSize;
-    let textX = box.x;
-    let anchor = "start";
-    if (node.align === "center") {
-      textX = box.x + box.width / 2;
-      anchor = "middle";
-    } else if (node.align === "right") {
-      textX = box.x + box.width;
-      anchor = "end";
+      titleSvg = `<text x="20" y="30" font-size="18" font-weight="600" fill="${this.theme.colors.foreground}">${this.escapeXml(node.title)}</text>`;
     }
-    return `<text x="${textX}" y="${textY}" font-size="${fontSize}" font-weight="600" fill="${this.theme.colors.foreground}" text-anchor="${anchor}">${this.escapeXml(node.content)}</text>`;
+    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>`;
   }
-  renderTextBox(box) {
-    const node = box.node;
+  // ===========================================
+  // 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 textY = box.y + fontSize;
-    let textX = box.x;
-    let anchor = "start";
-    if (node.align === "center") {
-      textX = box.x + box.width / 2;
-      anchor = "middle";
-    } else if (node.align === "right") {
-      textX = box.x + box.width;
-      anchor = "end";
-    }
-    return `<text x="${textX}" y="${textY}" font-size="${fontSize}" font-weight="${fontWeight}" fill="${fill}" text-anchor="${anchor}">${this.escapeXml(node.content)}</text>`;
+    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>`;
   }
-  renderButtonBox(box) {
-    const node = box.node;
-    const hasIcon = !!node.icon;
-    const isIconOnly = hasIcon && !node.content.trim();
-    let fill = this.theme.colors.primary;
-    let textFill = "#ffffff";
-    let strokeAttr = "";
-    if (node.secondary) {
-      fill = this.theme.colors.secondary;
-    } else if (node.outline) {
-      fill = "white";
-      textFill = this.theme.colors.foreground;
-      strokeAttr = `stroke="${this.theme.colors.border}" stroke-width="1"`;
-    } else if (node.ghost) {
-      fill = "transparent";
-      textFill = this.theme.colors.foreground;
-    }
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="4" fill="${fill}" ${strokeAttr}/>`;
-    if (hasIcon) {
-      const iconData = getIconData(node.icon);
-      if (iconData) {
-        const iconSize = 16;
-        const iconX = isIconOnly ? box.x + (box.width - iconSize) / 2 : box.x + 16;
-        const iconY = box.y + (box.height - iconSize) / 2;
-        svg += this.renderIconPaths(iconData, iconX, iconY, iconSize, textFill);
-      }
-    }
-    if (!isIconOnly) {
-      const textX = hasIcon ? box.x + 36 + (box.width - 52) / 2 : box.x + box.width / 2;
-      svg += `<text x="${textX}" y="${box.y + box.height / 2 + 5}" font-size="14" fill="${textFill}" text-anchor="middle">${this.escapeXml(node.content)}</text>`;
-    }
-    svg += `</g>`;
-    return svg;
+  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>`;
   }
-  renderInputBox(box) {
-    const node = box.node;
-    let y = box.y;
-    let svg = "<g>";
+  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) {
-      svg += `<text x="${box.x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
+      result += `<text x="${x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
       y += 24;
     }
-    const inputHeight = 36;
     const placeholder = node.placeholder || "";
-    svg += `<rect x="${box.x}" y="${y}" width="${box.width}" height="${inputHeight}" rx="4" fill="#f4f4f5"/>`;
-    svg += `<text x="${box.x + 12}" y="${y + inputHeight / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(placeholder)}</text>`;
-    svg += "</g>";
-    return svg;
+    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;
   }
-  renderTextareaBox(box) {
-    const node = box.node;
-    let y = box.y;
-    let svg = "<g>";
+  renderTextarea(node) {
+    const width = 280;
+    const height = 100;
+    const x = this.currentX;
+    let y = this.currentY;
+    let result = "";
     if (node.label) {
-      svg += `<text x="${box.x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
+      result += `<text x="${x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
       y += 24;
     }
-    const textareaHeight = box.height - (node.label ? 24 : 0);
     const placeholder = node.placeholder || "";
-    svg += `<rect x="${box.x}" y="${y}" width="${box.width}" height="${textareaHeight}" rx="4" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-    svg += `<text x="${box.x + 12}" y="${y + 24}" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(placeholder)}</text>`;
-    svg += "</g>";
-    return svg;
+    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;
   }
-  renderSelectBox(box) {
-    const node = box.node;
-    let y = box.y;
-    let svg = "<g>";
+  renderSelect(node) {
+    const width = 280;
+    const height = 40;
+    const x = this.currentX;
+    let y = this.currentY;
+    let result = "";
     if (node.label) {
-      svg += `<text x="${box.x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
+      result += `<text x="${x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
       y += 24;
     }
-    const selectHeight = 40;
     const placeholder = node.placeholder || "Select...";
-    svg += `<rect x="${box.x}" y="${y}" width="${box.width}" height="${selectHeight}" rx="4" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-    svg += `<text x="${box.x + 12}" y="${y + selectHeight / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(placeholder)}</text>`;
-    svg += `<path d="M${box.x + box.width - 24} ${y + selectHeight / 2 - 3} l6 6 l6 -6" fill="none" stroke="${this.theme.colors.muted}" stroke-width="1.5"/>`;
-    svg += "</g>";
-    return svg;
+    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;
   }
-  renderCheckboxBox(box) {
-    const node = box.node;
+  renderCheckbox(node) {
+    const x = this.currentX;
+    const y = this.currentY;
     const size = 18;
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${size}" height="${size}" rx="3" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
+    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) {
-      svg += `<path d="M${box.x + 4} ${box.y + 9} L${box.x + 7} ${box.y + 12} L${box.x + 14} ${box.y + 5}" fill="none" stroke="${this.theme.colors.foreground}" stroke-width="2"/>`;
+      result += `<path d="M4 9 L7 12 L14 5" fill="none" stroke="${this.theme.colors.foreground}" stroke-width="2"/>`;
     }
     if (node.label) {
-      svg += `<text x="${box.x + size + 8}" y="${box.y + size - 3}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
+      result += `<text x="${size + 8}" y="${size - 3}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
     }
-    svg += "</g>";
-    return svg;
+    result += "</g>";
+    this.currentY += size + 12;
+    return result;
   }
-  renderRadioBox(box) {
-    const node = box.node;
+  renderRadio(node) {
+    const x = this.currentX;
+    const y = this.currentY;
     const size = 18;
     const radius = size / 2;
-    const cx = box.x + radius;
-    const cy = box.y + radius;
-    let svg = `<g>
-      <circle cx="${cx}" cy="${cy}" r="${radius - 1}" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
+    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) {
-      svg += `<circle cx="${cx}" cy="${cy}" r="${radius - 5}" fill="${this.theme.colors.foreground}"/>`;
+      result += `<circle cx="${radius}" cy="${radius}" r="${radius - 5}" fill="${this.theme.colors.foreground}"/>`;
     }
     if (node.label) {
-      svg += `<text x="${box.x + size + 8}" y="${box.y + size - 3}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
+      result += `<text x="${size + 8}" y="${size - 3}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
     }
-    svg += "</g>";
-    return svg;
+    result += "</g>";
+    this.currentY += size + 12;
+    return result;
   }
-  renderSwitchBox(box) {
-    const node = box.node;
+  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 ? box.x + width - radius : box.x + radius;
-    let svg = `<g>
-      <rect x="${box.x}" y="${box.y}" width="${width}" height="${height}" rx="${radius}" fill="${bgColor}"/>
-      <circle cx="${knobX}" cy="${box.y + radius}" r="${radius - 3}" fill="white"/>`;
+    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) {
-      svg += `<text x="${box.x + width + 8}" y="${box.y + height - 6}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
+      result += `<text x="${width + 8}" y="${height - 6}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
     }
-    svg += "</g>";
-    return svg;
+    result += "</g>";
+    this.currentY += height + 12;
+    return result;
   }
-  renderLinkBox(box) {
-    const node = box.node;
-    const fontSize = 14;
-    const textY = box.y + fontSize;
-    return `<text x="${box.x}" y="${textY}" font-size="${fontSize}" fill="${this.theme.colors.primary}" text-decoration="underline">${this.escapeXml(node.content)}</text>`;
+  // ===========================================
+  // 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>`;
   }
-  renderImageBox(box) {
-    const node = box.node;
-    return `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" fill="${this.theme.colors.muted}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <line x1="${box.x}" y1="${box.y}" x2="${box.x + box.width}" y2="${box.y + box.height}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <line x1="${box.x + box.width}" y1="${box.y}" x2="${box.x}" y2="${box.y + box.height}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="${box.x + box.width / 2}" y="${box.y + box.height / 2 + 5}" font-size="14" fill="${this.theme.colors.foreground}" text-anchor="middle">${this.escapeXml(node.alt || "Image")}</text>
+  // ===========================================
+  // 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>`;
   }
-  renderPlaceholderBox(box) {
-    const node = box.node;
-    const patternId = `placeholder-pattern-${this.clipPathCounter++}`;
-    const patternDef = `<pattern id="${patternId}" width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
-      <rect width="14" height="14" fill="#f9f9f9"/>
-      <rect width="7" height="14" fill="rgba(0,0,0,0.03)"/>
-    </pattern>`;
-    this.clipPathDefs.push(patternDef);
-    return `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="4" fill="url(#${patternId})" stroke="${this.theme.colors.muted}" stroke-width="1" stroke-dasharray="4,2"/>
-      <text x="${box.x + box.width / 2}" y="${box.y + box.height / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}" text-anchor="middle">${this.escapeXml(node.label || "Placeholder")}</text>
+  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>`;
   }
-  renderAvatarBox(box) {
-    const node = box.node;
-    const radius = box.width / 2;
-    const cx = box.x + radius;
-    const cy = box.y + radius;
+  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() : "?";
-    return `<g>
-      <circle cx="${cx}" cy="${cy}" r="${radius}" fill="${this.theme.colors.foreground}"/>
-      <text x="${cx}" y="${cy + 5}" font-size="${box.width / 2.5}" fill="${this.theme.colors.background}" text-anchor="middle">${initial}</text>
+    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>`;
   }
-  renderBadgeBox(box) {
-    const node = box.node;
-    return `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="11" fill="${this.theme.colors.muted}" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="${box.x + box.width / 2}" y="${box.y + box.height / 2 + 4}" font-size="12" fill="${this.theme.colors.foreground}" text-anchor="middle">${this.escapeXml(node.content)}</text>
+  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>`;
   }
-  renderTableBox(box) {
-    const node = box.node;
+  // ===========================================
+  // Data Renderers
+  // ===========================================
+  renderTable(node) {
     const columns = node.columns || [];
     const rows = node.rows || [];
     const rowCount = rows.length || 3;
     const colWidth = 120;
     const rowHeight = 40;
-    let svg = `<g>`;
-    svg += `<rect x="${box.x}" y="${box.y}" width="${columns.length * colWidth}" height="${rowHeight}" fill="${this.theme.colors.muted}"/>`;
+    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="${box.x + i * colWidth + 12}" y="${box.y + rowHeight / 2 + 5}" font-size="14" font-weight="600">${this.escapeXml(col)}</text>`;
+      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 : rowCount;
+    const displayRowCount = rows.length > 0 ? rows.length : Math.max(rowCount, 3);
     for (let rowIdx = 0; rowIdx < displayRowCount; rowIdx++) {
-      const rowY = box.y + (rowIdx + 1) * rowHeight;
-      svg += `<rect x="${box.x}" y="${rowY}" width="${columns.length * colWidth}" height="${rowHeight}" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
+      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="${box.x + colIdx * colWidth + 12}" y="${rowY + rowHeight / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(cellContent)}</text>`;
+        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;
   }
-  renderListBox(box) {
-    const node = box.node;
+  renderList(node) {
+    const x = this.currentX;
+    let y = this.currentY;
     const items = node.items || [];
     const ordered = node.ordered || false;
-    let svg = "<g>";
+    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="${box.x}" y="${box.y + idx * 28 + 16}" font-size="14" fill="${this.theme.colors.foreground}">${marker} ${this.escapeXml(content)}</text>`;
+      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;
   }
-  renderAlertBox(box) {
-    const node = box.node;
-    return `<g>
-      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="4" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="${box.x + 16}" y="${box.y + box.height / 2 + 5}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.content)}</text>
+  // ===========================================
+  // 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>`;
   }
-  renderProgressBox(box) {
-    const node = box.node;
-    let y = box.y;
-    let svg = "<g>";
+  renderProgress(node) {
+    const width = 200;
+    const height = 8;
+    const x = this.currentX;
+    let y = this.currentY;
+    let result = "";
     if (node.label) {
-      svg += `<text x="${box.x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
+      result += `<text x="${x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
       y += 24;
     }
-    const barHeight = 8;
     const value = node.value || 0;
     const max = node.max || 100;
     const percent = Math.min(100, Math.max(0, value / max * 100));
-    svg += `<rect x="${box.x}" y="${y}" width="${box.width}" height="${barHeight}" rx="${barHeight / 2}" fill="${this.theme.colors.muted}"/>`;
-    svg += `<rect x="${box.x}" y="${y}" width="${box.width * percent / 100}" height="${barHeight}" rx="${barHeight / 2}" fill="${this.theme.colors.primary}"/>`;
-    svg += "</g>";
-    return svg;
+    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;
   }
-  renderSpinnerBox(box) {
-    const cx = box.x + box.width / 2;
-    const cy = box.y + box.height / 2;
-    const radius = box.width / 2 - 2;
-    return `<g>
-      <circle cx="${cx}" cy="${cy}" r="${radius}" fill="none" stroke="${this.theme.colors.muted}" stroke-width="2"/>
-      <path d="M${cx},${cy - radius} A${radius},${radius} 0 0,1 ${cx + radius},${cy}" fill="none" stroke="${this.theme.colors.primary}" stroke-width="2" stroke-linecap="round"/>
+  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>`;
   }
-  renderNavBox(box) {
-    const node = box.node;
-    const vertical = node.vertical || false;
-    let svg = "<g>";
-    if (node.children && node.children.length > 0) {
-      let offsetY = 0;
-      node.children.forEach((child) => {
-        if (child.type === "divider") {
-          offsetY += 16;
-          svg += `<line x1="${box.x}" y1="${box.y + offsetY}" x2="${box.x + box.width - 32}" y2="${box.y + offsetY}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-          offsetY += 8;
-        } else if (child.type === "group") {
-          svg += `<text x="${box.x}" y="${box.y + offsetY + 16}" font-size="11" font-weight="500" fill="${this.theme.colors.muted}" text-transform="uppercase">${this.escapeXml(child.label)}</text>`;
-          offsetY += 28;
-          child.items.forEach((item) => {
-            if (item.type === "divider") {
-              offsetY += 8;
-              svg += `<line x1="${box.x}" y1="${box.y + offsetY}" x2="${box.x + box.width - 32}" y2="${box.y + offsetY}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-              offsetY += 8;
-            } else {
-              const fill = item.active ? this.theme.colors.foreground : this.theme.colors.muted;
-              const fontWeight = item.active ? 'font-weight="500"' : "";
-              svg += `<text x="${box.x}" y="${box.y + offsetY + 16}" font-size="14" ${fontWeight} fill="${fill}">${this.escapeXml(item.label)}</text>`;
-              offsetY += 32;
-            }
-          });
-        } else if (child.type === "item") {
-          const fill = child.active ? this.theme.colors.foreground : this.theme.colors.muted;
-          const fontWeight = child.active ? 'font-weight="500"' : "";
-          svg += `<text x="${box.x}" y="${box.y + offsetY + 16}" font-size="14" ${fontWeight} fill="${fill}">${this.escapeXml(child.label)}</text>`;
-          offsetY += 32;
-        }
-      });
-      svg += "</g>";
-      return svg;
-    }
+  // ===========================================
+  // 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="${box.x}" y="${box.y + idx * 32 + 16}" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
+        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="${box.x + offsetX}" y="${box.y + 16}" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
-        offsetX += this.estimateTextWidth(label, 14) + 24;
+        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;
   }
-  renderTabsBox(box) {
-    const node = box.node;
+  renderTabs(node) {
     const items = node.items || [];
+    const x = this.currentX;
+    const y = this.currentY;
     const tabHeight = 40;
-    let svg = "<g>";
+    let svg = `<g transform="translate(${x}, ${y})">`;
     let offsetX = 0;
-    items.forEach((item, idx) => {
+    items.forEach((item) => {
       const label = typeof item === "string" ? item : item;
-      const tabWidth = this.estimateTextWidth(label, 14) + 32;
-      const isFirst = idx === 0;
-      svg += `<rect x="${box.x + offsetX}" y="${box.y}" width="${tabWidth}" height="${tabHeight}" fill="${isFirst ? "white" : this.theme.colors.muted}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-      svg += `<text x="${box.x + offsetX + tabWidth / 2}" y="${box.y + tabHeight / 2 + 5}" font-size="14" text-anchor="middle" fill="${this.theme.colors.foreground}">${this.escapeXml(label)}</text>`;
+      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;
   }
-  renderBreadcrumbBox(box) {
-    const node = box.node;
+  renderBreadcrumb(node) {
     const items = node.items || [];
     const separator = "/";
-    let svg = "<g>";
+    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="${box.x + offsetX}" y="${box.y + 16}" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
-      offsetX += this.estimateTextWidth(label, 14) + 8;
+      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="${box.x + offsetX}" y="${box.y + 16}" font-size="14" fill="${this.theme.colors.muted}">${separator}</text>`;
+        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;
   }
-  renderIconBox(box) {
-    const node = box.node;
-    const iconData = getIconData(node.name);
-    if (!iconData) {
-      return `<!-- Icon not found: ${node.name} -->`;
-    }
-    const color = this.theme.colors.foreground;
-    return this.renderIconPaths(iconData, box.x, box.y, box.width, color);
-  }
-  renderDividerBox(box) {
-    return `<line x1="${box.x}" y1="${box.y}" x2="${box.x + box.width}" y2="${box.y}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-  }
   // ===========================================
   // Utility Methods
   // ===========================================
-  renderIconPaths(data, x, y, size, color) {
-    const scale = size / 24;
-    const paths = data.map(([tag, attrs]) => {
-      const attrStr = Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ");
-      return `<${tag} ${attrStr} />`;
-    }).join("");
-    return `<g transform="translate(${x}, ${y}) scale(${scale})" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</g>`;
-  }
-  getPadding(node) {
-    const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 };
-    if (!("p" in node) && !("px" in node) && !("py" in node)) {
-      if (node.type === "Card" || node.type === "Header" || node.type === "Footer" || node.type === "Sidebar") {
-        return { top: 16, right: 16, bottom: 16, left: 16 };
-      }
-      return defaultPadding;
-    }
-    let p = 0;
-    if ("p" in node && node.p !== void 0) {
-      p = this.resolveSpacing(node.p);
-    }
-    let px = p;
-    let py = p;
-    if ("px" in node && node.px !== void 0) {
-      px = this.resolveSpacing(node.px);
-    }
-    if ("py" in node && node.py !== void 0) {
-      py = this.resolveSpacing(node.py);
-    }
-    if (node.type === "Header") {
-      return { top: 0, right: px, bottom: 0, left: px };
-    }
-    return { top: py, right: px, bottom: py, left: px };
-  }
-  getGap(node) {
-    if ("gap" in node && node.gap !== void 0) {
-      return this.resolveSpacing(node.gap);
-    }
-    return void 0;
-  }
-  resolveSpacing(value) {
-    if (typeof value === "number") {
-      return value * 4;
-    }
-    if (typeof value === "object" && value && "value" in value) {
-      return value.value;
-    }
-    return 0;
-  }
-  resolveSize(value) {
-    if (value === void 0 || value === null) return void 0;
-    if (typeof value === "number") return value;
-    if (typeof value === "string") {
-      if (value === "full") return void 0;
-      const num = parseFloat(value);
-      if (!isNaN(num)) return num;
-    }
-    if (typeof value === "object" && value && "value" in value) {
-      return value.value;
-    }
-    return void 0;
-  }
-  isFullWidth(node) {
-    if ("w" in node) {
-      return node.w === "full";
-    }
-    return false;
-  }
-  estimateTextWidth(text, fontSize) {
-    return text.length * fontSize * 0.6;
+  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") {
-      const sizes = {
-        xs: 12,
-        sm: 14,
-        base: 16,
-        md: 16,
-        lg: 18,
-        xl: 20,
-        "2xl": 24,
-        "3xl": 30
-      };
-      return sizes[size] || 16;
+      return this.getFontSize(size);
     }
     if (typeof size === "object" && "value" in size) {
       if (size.unit === "px") return size.value;
@@ -51302,8 +50071,15 @@ var SvgRenderer = class {
     return 16;
   }
   getTitleFontSize(level) {
-    const sizes = { 1: 36, 2: 30, 3: 24, 4: 20, 5: 18, 6: 16 };
-    return sizes[level] || 20;
+    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;");
@@ -51364,22 +50140,15 @@ 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="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;
-    ">
+  <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;">
       <style type="text/css">
 ${css}
       </style>