@wireweave/core 1.0.0-beta.20260107134058 → 1.1.0-beta.0

package/dist/renderer.js

@@ -77,12 +77,17 @@ function generateContainerStyles(prefix) {
   padding: 16px;
 }
 
-/* Cards in flex rows should expand equally */
+/* Cards in flex rows: respect explicit width, shrink if needed */
 .${prefix}-row > .${prefix}-card {
-  flex: 1 1 0%;
+  flex: 0 1 auto;
   min-width: 0;
 }
 
+/* Cards without explicit width should expand to fill space */
+.${prefix}-row > .${prefix}-card-flex {
+  flex: 1 1 0%;
+}
+
 .${prefix}-card-title {
   margin: 0 0 12px 0;
   font-size: 18px;
@@ -236,6 +241,11 @@ function generateTextStyles(prefix) {
   line-height: 1.25;
 }
 
+/* Remove bottom margin when title is in a row (inline with other elements) */
+.${prefix}-row .${prefix}-title {
+  margin-bottom: 0;
+}
+
 h1.${prefix}-title { font-size: 36px; }
 h2.${prefix}-title { font-size: 30px; }
 h3.${prefix}-title { font-size: 24px; }
@@ -630,6 +640,30 @@ img.${prefix}-image {
   font-size: 14px;
 }
 
+.${prefix}-placeholder-with-children {
+  position: relative;
+}
+
+.${prefix}-placeholder-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 0;
+  pointer-events: none;
+}
+
+.${prefix}-placeholder-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .${prefix}-avatar {
   display: inline-flex;
   align-items: center;
@@ -745,12 +779,12 @@ svg.${prefix}-icon {
   display: block;
 }
 
-/* Icon size tokens */
+/* Icon size tokens - matches SVG renderer */
 svg.${prefix}-icon-xs { width: 12px; height: 12px; }
-svg.${prefix}-icon-sm { width: 14px; height: 14px; }
-svg.${prefix}-icon-md { width: 16px; height: 16px; }
-svg.${prefix}-icon-lg { width: 20px; height: 20px; }
-svg.${prefix}-icon-xl { width: 24px; height: 24px; }
+svg.${prefix}-icon-sm { width: 16px; height: 16px; }
+svg.${prefix}-icon-md { width: 20px; height: 20px; }
+svg.${prefix}-icon-lg { width: 24px; height: 24px; }
+svg.${prefix}-icon-xl { width: 32px; height: 32px; }
 
 .${prefix}-icon svg {
   display: block;
@@ -1046,6 +1080,27 @@ function generateNavigationStyles(_theme, prefix) {
   cursor: not-allowed;
 }
 
+.${prefix}-nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.${prefix}-nav-group-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--${prefix}-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 8px 16px 4px;
+}
+
+.${prefix}-nav-divider {
+  margin: 8px 0;
+  border: none;
+  border-top: 1px solid var(--${prefix}-border);
+}
+
 .${prefix}-tabs {
   border-bottom: 1px solid var(--${prefix}-border);
 }
@@ -1263,7 +1318,6 @@ function generateBaseStyles(prefix) {
   font-family: var(--${prefix}-font);
   color: var(--${prefix}-fg);
   background: var(--${prefix}-bg);
-  min-height: 100vh;
   box-sizing: border-box;
   position: relative;
   display: flex;
@@ -1274,10 +1328,19 @@ function generateBaseStyles(prefix) {
   overflow: hidden;
 }
 
+/* Col direct child of page should fill page height */
+.${prefix}-page > .${prefix}-col {
+  flex: 1;
+  min-height: 0;
+}
+
 /* Row containing sidebar should fill remaining space */
 .${prefix}-page > .${prefix}-row:has(.${prefix}-sidebar),
-.${prefix}-page > .${prefix}-row:has(.${prefix}-main) {
+.${prefix}-page > .${prefix}-row:has(.${prefix}-main),
+.${prefix}-page > .${prefix}-col > .${prefix}-row:has(.${prefix}-sidebar),
+.${prefix}-page > .${prefix}-col > .${prefix}-row:has(.${prefix}-main) {
   flex: 1;
+  min-height: 0;
   align-items: stretch;
 }
 
@@ -1320,10 +1383,15 @@ function generateGridClasses(_theme, prefix) {
   box-sizing: border-box;
 }
 
+/* When explicit width is set, don't flex-grow */
+.${prefix}-row[style*="width:"],
+.${prefix}-col[style*="width:"] {
+  flex: 0 0 auto;
+}
+
 `;
   for (let i = 1; i <= 12; i++) {
-    const width = (i / 12 * 100).toFixed(4);
-    css += `.${prefix}-col-${i} { flex: 0 0 auto; width: ${width}%; }
+    css += `.${prefix}-col-${i} { flex: ${i} 0 0%; min-width: 0; }
 `;
   }
   return css;
@@ -1491,6 +1559,20 @@ 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 {
@@ -1507,6 +1589,7 @@ function generateLayoutClasses(prefix) {
   border-right: 1px solid var(--${prefix}-border);
   padding: 16px 16px 16px 20px;
   flex-shrink: 0;
+  align-self: stretch;
 }
 
 .${prefix}-sidebar-right {
@@ -48076,14 +48159,39 @@ var lucideIcons = {
     ]
   ]
 };
+var iconAliases = {
+  "home": "house",
+  "plus-square": "square-plus",
+  "minus-square": "square-minus",
+  "x-square": "square-x",
+  "check-square": "square-check",
+  "edit": "pencil",
+  "edit-2": "pencil",
+  "edit-3": "pencil-line",
+  "trash": "trash-2",
+  "delete": "trash-2",
+  "close": "x",
+  "menu": "menu",
+  "hamburger": "menu",
+  "dots": "more-horizontal",
+  "dots-vertical": "more-vertical",
+  "cog": "settings",
+  "gear": "settings"
+};
 function getIconData(name) {
   if (lucideIcons[name]) {
     return lucideIcons[name];
   }
+  if (iconAliases[name] && lucideIcons[iconAliases[name]]) {
+    return lucideIcons[iconAliases[name]];
+  }
   const kebabName = name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
   if (lucideIcons[kebabName]) {
     return lucideIcons[kebabName];
   }
+  if (iconAliases[kebabName] && lucideIcons[iconAliases[kebabName]]) {
+    return lucideIcons[iconAliases[kebabName]];
+  }
   return void 0;
 }
 function renderIconSvg(data, _size = 24, strokeWidth = 2, className = "", styleAttr = "") {
@@ -48193,7 +48301,7 @@ var HtmlRenderer = class extends BaseRenderer {
     const title = node.title ? `<title>${this.escapeHtml(node.title)}</title>
 ` : "";
     const commonStyles = this.buildCommonStyles(node);
-    const viewportStyle = `width: ${viewport.width}px; height: ${viewport.height}px`;
+    const viewportStyle = `position: relative; width: ${viewport.width}px; height: ${viewport.height}px; overflow: hidden`;
     const combinedStyle = commonStyles ? `${viewportStyle}; ${commonStyles}` : viewportStyle;
     const dataAttrs = `data-viewport-width="${viewport.width}" data-viewport-height="${viewport.height}" data-viewport-label="${viewport.label}"`;
     return `<div class="${classes}" style="${combinedStyle}" ${dataAttrs}>
@@ -48359,6 +48467,7 @@ ${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);
@@ -48444,6 +48553,10 @@ ${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)
@@ -48458,6 +48571,17 @@ ${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}`);
@@ -48567,8 +48691,10 @@ ${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)
     ]);
@@ -48905,11 +49031,19 @@ ${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) {
@@ -49155,6 +49289,12 @@ ${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>`;
@@ -49164,12 +49304,48 @@ ${items}
         item.active ? `${this.prefix}-nav-link-active` : void 0,
         item.disabled ? `${this.prefix}-nav-link-disabled` : void 0
       ]);
-      return `<a class="${linkClasses}" href="${item.href || "#"}">${this.escapeHtml(item.label)}</a>`;
+      const iconHtml = item.icon ? this.renderIconHtml(item.icon) + " " : "";
+      return `<a class="${linkClasses}" href="${item.href || "#"}">${iconHtml}${this.escapeHtml(item.label)}</a>`;
     }).join("\n");
     return `<nav class="${classes}"${styleAttr}>
 ${items}
 </nav>`;
   }
+  renderNavChildren(children) {
+    return children.map((child) => {
+      if (child.type === "divider") {
+        return `<hr class="${this.prefix}-nav-divider" />`;
+      }
+      if (child.type === "group") {
+        const groupItems = child.items.map((item) => {
+          if (item.type === "divider") {
+            return `<hr class="${this.prefix}-nav-divider" />`;
+          }
+          return this.renderNavItem(item);
+        }).join("\n");
+        return `<div class="${this.prefix}-nav-group">
+  <div class="${this.prefix}-nav-group-label">${this.escapeHtml(child.label)}</div>
+${groupItems}
+</div>`;
+      }
+      if (child.type === "item") {
+        return this.renderNavItem(child);
+      }
+      return "";
+    }).join("\n");
+  }
+  renderNavItem(item) {
+    const linkClasses = this.buildClassString([
+      `${this.prefix}-nav-link`,
+      item.active ? `${this.prefix}-nav-link-active` : void 0,
+      item.disabled ? `${this.prefix}-nav-link-disabled` : void 0
+    ]);
+    const iconHtml = item.icon ? this.renderIconHtml(item.icon) + " " : "";
+    return `<a class="${linkClasses}" href="${item.href || "#"}">${iconHtml}${this.escapeHtml(item.label)}</a>`;
+  }
+  renderIconHtml(iconName) {
+    return `<span class="${this.prefix}-icon" data-icon="${iconName}"></span>`;
+  }
   renderTabs(node) {
     const classes = this.buildClassString([
       `${this.prefix}-tabs`,
@@ -49324,13 +49500,239 @@ 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;
-  currentX = 0;
-  currentY = 0;
-  contentWidth = 0;
+  pageWidth = 0;
+  pageHeight = 0;
+  clipPathDefs = [];
+  clipPathCounter = 0;
+  // Default spacing values
+  DEFAULT_GAP = 16;
   constructor(options = {}) {
     this.options = {
       width: options.width ?? 800,
@@ -49341,28 +49743,41 @@ 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.currentX = this.options.padding;
-    this.currentY = this.options.padding;
+    this.clipPathDefs = [];
+    this.clipPathCounter = 0;
     const firstPage = doc.children[0];
     let width = this.options.width;
     let height = this.options.height;
-    if (firstPage && (firstPage.viewport !== void 0 || firstPage.device !== void 0)) {
-      const viewport = resolveViewport(firstPage.viewport, firstPage.device);
-      width = viewport.width;
-      height = viewport.height;
-      this.contentWidth = width - this.options.padding * 2;
+    if (firstPage) {
+      const pageAny = firstPage;
+      const hasExplicitWidth = pageAny.width !== void 0;
+      const hasExplicitHeight = pageAny.height !== void 0;
+      if (hasExplicitWidth || hasExplicitHeight) {
+        if (hasExplicitWidth) {
+          width = pageAny.width;
+        }
+        if (hasExplicitHeight) {
+          height = pageAny.height;
+        }
+      } else if (firstPage.viewport !== void 0 || firstPage.device !== void 0) {
+        const viewport = resolveViewport(firstPage.viewport, firstPage.device);
+        width = viewport.width;
+        height = viewport.height;
+      }
     }
+    this.pageWidth = width;
+    this.pageHeight = height;
     const content = doc.children.map((page) => this.renderPage(page)).join("\n");
+    const allDefs = this.generateDefs() + "\n" + this.clipPathDefs.join("\n");
     const svg = `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
   <defs>
-    ${this.generateDefs()}
+    ${allDefs}
   </defs>
   <rect width="100%" height="100%" fill="${this.options.background}"/>
   <g transform="scale(${this.options.scale})">
@@ -49372,7 +49787,7 @@ var SvgRenderer = class {
     return { svg, width, height };
   }
   /**
-   * Generate SVG defs (styles, patterns, etc.)
+   * Generate SVG defs (styles)
    */
   generateDefs() {
     return `
@@ -49383,684 +49798,1500 @@ 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 a page node
+   * Render page with fixed header/footer layout
+   * Header at top, Footer at bottom, Main fills remaining space
    */
-  renderPage(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");
     const elements = [];
-    if (node.title) {
-      elements.push(this.renderPageTitle(node.title));
+    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));
     }
-    for (const child of node.children) {
-      elements.push(this.renderNode(child));
+    if (footer) {
+      const footerMeasure = this.measureNode(footer, constraints);
+      footerHeight = footerMeasure.height;
+      const footerY = this.pageHeight - padding - footerHeight;
+      const footerBox = this.layoutNode(footer, padding, footerY, constraints);
+      elements.push(this.renderBox(footerBox));
+    }
+    const mainStartY = currentY + headerHeight;
+    const mainEndY = this.pageHeight - padding - footerHeight;
+    const mainHeight = mainEndY - mainStartY;
+    if (otherChildren.length > 0) {
+      const mainConstraints = {
+        maxWidth: contentWidth,
+        maxHeight: mainHeight
+      };
+      const clipId = `main-clip-${this.clipPathCounter++}`;
+      this.clipPathDefs.push(`<clipPath id="${clipId}"><rect x="${padding}" y="${mainStartY}" width="${contentWidth}" height="${mainHeight}"/></clipPath>`);
+      const mainContent = [];
+      mainContent.push(`<g clip-path="url(#${clipId})">`);
+      let childY = mainStartY;
+      const gap = this.getGap(page) || 0;
+      for (const child of otherChildren) {
+        const childBox = this.layoutNode(child, padding, childY, mainConstraints);
+        mainContent.push(this.renderBox(childBox));
+        childY += childBox.height + gap;
+      }
+      mainContent.push(`</g>`);
+      elements.push(mainContent.join("\n"));
     }
     return elements.join("\n");
   }
-  /**
-   * 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>`;
+  shouldCenterHorizontally(node) {
+    return node.type === "Card" || node.type === "Modal";
   }
-  /**
-   * Render any AST node
-   */
-  renderNode(node) {
+  // ===========================================
+  // Measurement Phase
+  // ===========================================
+  measureNode(node, constraints) {
     switch (node.type) {
-      // Layout nodes
       case "Row":
-        return this.renderRow(node);
+        return this.measureRow(node, constraints);
       case "Col":
-        return this.renderCol(node);
+        return this.measureCol(node, constraints);
       case "Header":
-        return this.renderHeader(node);
-      case "Main":
-        return this.renderMain(node);
+        return this.measureHeader(node, constraints);
       case "Footer":
-        return this.renderFooter(node);
+        return this.measureFooter(node, constraints);
+      case "Main":
+        return this.measureMain(node, constraints);
       case "Sidebar":
-        return this.renderSidebar(node);
-      // Container nodes
+        return this.measureSidebar(node, constraints);
       case "Card":
-        return this.renderCard(node);
+        return this.measureCard(node, constraints);
       case "Modal":
-        return this.renderModal(node);
-      // Text nodes
-      case "Text":
-        return this.renderText(node);
+        return this.measureModal(node, constraints);
       case "Title":
-        return this.renderTitle(node);
-      case "Link":
-        return this.renderLink(node);
-      // Input nodes
+        return this.measureTitle(node);
+      case "Text":
+        return this.measureText(node);
+      case "Button":
+        return this.measureButton(node, constraints);
       case "Input":
-        return this.renderInput(node);
+        return this.measureInput(node, constraints);
       case "Textarea":
-        return this.renderTextarea(node);
+        return this.measureTextarea(node, constraints);
       case "Select":
-        return this.renderSelect(node);
+        return this.measureSelect(node, constraints);
       case "Checkbox":
-        return this.renderCheckbox(node);
+        return this.measureCheckbox(node);
       case "Radio":
-        return this.renderRadio(node);
+        return this.measureRadio(node);
       case "Switch":
-        return this.renderSwitch(node);
-      // Button
-      case "Button":
-        return this.renderButton(node);
-      // Display nodes
+        return this.measureSwitch(node);
+      case "Link":
+        return this.measureLink(node);
       case "Image":
-        return this.renderImage(node);
+        return this.measureImage(node, constraints);
       case "Placeholder":
-        return this.renderPlaceholder(node);
+        return this.measurePlaceholder(node, constraints);
       case "Avatar":
-        return this.renderAvatar(node);
+        return this.measureAvatar(node, constraints);
       case "Badge":
-        return this.renderBadge(node);
-      // Data nodes
+        return this.measureBadge(node);
       case "Table":
-        return this.renderTable(node);
+        return this.measureTable(node);
       case "List":
-        return this.renderList(node);
-      // Feedback nodes
+        return this.measureList(node);
       case "Alert":
-        return this.renderAlert(node);
+        return this.measureAlert(node, constraints);
       case "Progress":
-        return this.renderProgress(node);
+        return this.measureProgress(node, constraints);
       case "Spinner":
-        return this.renderSpinner(node);
-      // Navigation nodes
+        return this.measureSpinner(node);
       case "Nav":
-        return this.renderNav(node);
+        return this.measureNav(node);
       case "Tabs":
-        return this.renderTabs(node);
+        return this.measureTabs(node);
       case "Breadcrumb":
-        return this.renderBreadcrumb(node);
+        return this.measureBreadcrumb(node);
+      case "Icon":
+        return this.measureIcon(node);
+      case "Divider":
+        return this.measureDivider(node, constraints);
       default:
-        return `<!-- Unsupported: ${node.type} -->`;
+        return { width: 100, height: 40 };
+    }
+  }
+  measureRow(node, constraints) {
+    const padding = this.getPadding(node);
+    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
+    const innerWidth = constraints.maxWidth - padding.left - padding.right;
+    const childMeasurements = node.children.map(
+      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
+    );
+    const maxChildHeight = Math.max(...childMeasurements.map((m) => m.height), 0);
+    const totalChildWidth = childMeasurements.reduce((sum, m) => sum + m.width, 0);
+    const totalGapWidth = Math.max(0, (node.children.length - 1) * gap);
+    const contentWidth = totalChildWidth + totalGapWidth + padding.left + padding.right;
+    const hasExplicitWidth = "w" in node && node.w !== void 0;
+    const width = hasExplicitWidth ? constraints.maxWidth : Math.min(contentWidth, constraints.maxWidth);
+    return {
+      width,
+      height: maxChildHeight + padding.top + padding.bottom
+    };
+  }
+  measureCol(node, constraints) {
+    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
+    const padding = this.getPadding(node);
+    const innerWidth = constraints.maxWidth - padding.left - padding.right;
+    const childMeasurements = node.children.map(
+      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
+    );
+    const totalHeight = childMeasurements.reduce(
+      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
+      0
+    );
+    const maxChildWidth = Math.max(...childMeasurements.map((m) => m.width), 0);
+    return {
+      width: Math.max(maxChildWidth + padding.left + padding.right, constraints.maxWidth),
+      height: totalHeight + padding.top + padding.bottom
+    };
+  }
+  measureHeader(node, constraints) {
+    const padding = this.getPadding(node);
+    const height = this.resolveSize(node.h) || 56;
+    return {
+      width: constraints.maxWidth,
+      height: height + padding.top + padding.bottom
+    };
+  }
+  measureFooter(node, constraints) {
+    const padding = this.getPadding(node);
+    const height = this.resolveSize(node.h) || 60;
+    return {
+      width: constraints.maxWidth,
+      height: height + padding.top + padding.bottom
+    };
+  }
+  measureMain(node, constraints) {
+    const padding = this.getPadding(node);
+    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
+    const innerWidth = constraints.maxWidth - padding.left - padding.right;
+    const childMeasurements = node.children.map(
+      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
+    );
+    const totalHeight = childMeasurements.reduce(
+      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
+      0
+    );
+    return {
+      width: constraints.maxWidth,
+      height: totalHeight + padding.top + padding.bottom
+    };
+  }
+  measureSidebar(node, constraints) {
+    const width = this.resolveSize(node.w) || 200;
+    const padding = this.getPadding(node);
+    const gap = this.getGap(node) ?? 8;
+    const innerWidth = width - padding.left - padding.right;
+    const childMeasurements = node.children.map(
+      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
+    );
+    const contentHeight = childMeasurements.reduce(
+      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
+      0
+    ) + padding.top + padding.bottom;
+    const explicitHeight = this.resolveSize(node.h);
+    const height = explicitHeight || constraints.maxHeight || contentHeight;
+    return { width, height };
+  }
+  measureCard(node, constraints) {
+    let cardWidth = this.resolveSize(node.w);
+    if (!cardWidth) {
+      cardWidth = Math.min(360, constraints.maxWidth);
+    } else {
+      cardWidth = Math.min(cardWidth, constraints.maxWidth);
+    }
+    const explicitHeight = this.resolveSize(node.h);
+    if (explicitHeight) {
+      return { width: cardWidth, height: explicitHeight };
+    }
+    const padding = this.getPadding(node);
+    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
+    const innerWidth = cardWidth - padding.left - padding.right;
+    const childMeasurements = node.children.map(
+      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
+    );
+    let contentHeight = 0;
+    if (node.title) {
+      contentHeight += 28;
+    }
+    contentHeight += childMeasurements.reduce(
+      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
+      0
+    );
+    return {
+      width: cardWidth,
+      height: contentHeight + padding.top + padding.bottom
+    };
+  }
+  measureModal(node, constraints) {
+    const width = this.resolveSize(node.w) || 400;
+    const padding = this.getPadding(node);
+    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
+    const innerWidth = width - padding.left - padding.right;
+    const childMeasurements = node.children.map(
+      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
+    );
+    let contentHeight = node.title ? 40 : 0;
+    contentHeight += childMeasurements.reduce(
+      (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
+      0
+    );
+    return {
+      width,
+      height: contentHeight + padding.top + padding.bottom
+    };
+  }
+  measureTitle(node) {
+    const level = node.level || 1;
+    const fontSize = this.getTitleFontSize(level);
+    const textWidth = this.estimateTextWidth(node.content, fontSize);
+    return { width: textWidth, height: fontSize + 8 };
+  }
+  measureText(node) {
+    const fontSize = this.resolveFontSize(node.size);
+    const textWidth = this.estimateTextWidth(node.content, fontSize);
+    return { width: textWidth, height: fontSize + 8 };
+  }
+  measureButton(node, constraints) {
+    const hasIcon = !!node.icon;
+    const isIconOnly = hasIcon && !node.content.trim();
+    const iconSize = 16;
+    const padding = 16;
+    let width;
+    if (this.isFullWidth(node)) {
+      width = constraints.maxWidth;
+    } else if (isIconOnly) {
+      width = iconSize + padding * 2;
+    } else if (hasIcon) {
+      width = Math.max(80, this.estimateTextWidth(node.content, 14) + iconSize + 48);
+    } else {
+      width = Math.max(80, this.estimateTextWidth(node.content, 14) + 32);
+    }
+    return { width, height: 40 };
+  }
+  measureInput(node, constraints) {
+    let width;
+    if (this.resolveSize(node.w)) {
+      width = this.resolveSize(node.w);
+    } else if (constraints.inHeader) {
+      const placeholderWidth = node.placeholder ? this.estimateTextWidth(node.placeholder, 14) : 60;
+      width = Math.max(120, placeholderWidth + 24 + 100);
+    } else {
+      width = constraints.maxWidth;
+    }
+    let height = 36;
+    if (node.label) height += 24;
+    return { width, height };
+  }
+  measureTextarea(node, constraints) {
+    const width = this.resolveSize(node.w) || constraints.maxWidth;
+    let height = node.rows ? node.rows * 24 : 100;
+    if (node.label) height += 24;
+    return { width, height };
+  }
+  measureSelect(node, constraints) {
+    const width = this.resolveSize(node.w) || constraints.maxWidth;
+    let height = 40;
+    if (node.label) height += 24;
+    return { width, height };
+  }
+  measureCheckbox(node) {
+    const labelWidth = node.label ? this.estimateTextWidth(node.label, 14) + 8 : 0;
+    return { width: 18 + labelWidth, height: 24 };
+  }
+  measureRadio(node) {
+    const labelWidth = node.label ? this.estimateTextWidth(node.label, 14) + 8 : 0;
+    return { width: 18 + labelWidth, height: 24 };
+  }
+  measureSwitch(node) {
+    const labelWidth = node.label ? this.estimateTextWidth(node.label, 14) + 8 : 0;
+    return { width: 44 + labelWidth, height: 28 };
+  }
+  measureLink(node) {
+    const fontSize = 14;
+    const textWidth = this.estimateTextWidth(node.content, fontSize);
+    return { width: textWidth, height: fontSize + 8 };
+  }
+  measureImage(node, constraints) {
+    let width;
+    if (this.isFullWidth(node)) {
+      width = constraints.maxWidth;
+    } else {
+      width = this.resolveSize(node.w) || 200;
+    }
+    const height = this.resolveSize(node.h) || 150;
+    return { width, height };
+  }
+  measurePlaceholder(node, constraints) {
+    let width;
+    if (node.w !== void 0) {
+      width = this.isFullWidth(node) ? constraints.maxWidth : this.resolveSize(node.w) || 200;
+    } else {
+      width = constraints.maxWidth || 200;
+    }
+    const height = this.resolveSize(node.h) || 100;
+    return { width, height };
+  }
+  measureAvatar(node, constraints) {
+    const sizes = { xs: 24, sm: 32, md: 40, lg: 48, xl: 64 };
+    const defaultSize = constraints?.inHeader ? "sm" : "md";
+    const size = sizes[node.size || defaultSize] || 40;
+    return { width: size, height: size };
+  }
+  measureBadge(node) {
+    const width = Math.max(24, this.estimateTextWidth(node.content, 12) + 16);
+    return { width, height: 22 };
+  }
+  measureTable(node) {
+    const columns = node.columns || [];
+    const rows = node.rows || [];
+    const rowCount = rows.length || 3;
+    const colWidth = 120;
+    const rowHeight = 40;
+    return {
+      width: columns.length * colWidth,
+      height: (rowCount + 1) * rowHeight
+    };
+  }
+  measureList(node) {
+    const items = node.items || [];
+    const maxItemWidth = Math.max(...items.map((item) => {
+      const content = typeof item === "string" ? item : item.content;
+      return this.estimateTextWidth(content, 14);
+    }), 100);
+    return { width: maxItemWidth + 24, height: items.length * 28 };
+  }
+  measureAlert(_node, constraints) {
+    const width = Math.min(400, constraints.maxWidth);
+    return { width, height: 48 };
+  }
+  measureProgress(node, constraints) {
+    const width = Math.min(200, constraints.maxWidth);
+    let height = 8;
+    if (node.label) height += 24;
+    return { width, height };
+  }
+  measureSpinner(node) {
+    const sizes = { xs: 16, sm: 20, md: 24, lg: 32, xl: 40 };
+    const size = sizes[node.size || "md"] || 24;
+    return { width: size, height: size };
+  }
+  measureNav(node) {
+    const items = node.items || [];
+    if (node.vertical) {
+      const maxWidth = Math.max(...items.map((item) => {
+        const label = typeof item === "string" ? item : item.label;
+        return this.estimateTextWidth(label, 14);
+      }), 100);
+      return { width: maxWidth, height: items.length * 32 };
+    } else {
+      const totalWidth = items.reduce((sum, item) => {
+        const label = typeof item === "string" ? item : item.label;
+        return sum + this.estimateTextWidth(label, 14) + 24;
+      }, 0);
+      return { width: totalWidth, height: 32 };
     }
   }
+  measureTabs(node) {
+    const items = node.items || [];
+    const totalWidth = items.reduce((sum, item) => {
+      const label = typeof item === "string" ? item : item;
+      return sum + this.estimateTextWidth(label, 14) + 32;
+    }, 0);
+    return { width: totalWidth, height: 44 };
+  }
+  measureBreadcrumb(node) {
+    const items = node.items || [];
+    const totalWidth = items.reduce((sum, item, idx) => {
+      const label = typeof item === "string" ? item : item.label;
+      return sum + this.estimateTextWidth(label, 14) + (idx < items.length - 1 ? 24 : 0);
+    }, 0);
+    return { width: totalWidth, height: 28 };
+  }
+  measureIcon(node) {
+    const sizes = { xs: 12, sm: 16, md: 20, lg: 24, xl: 32 };
+    const size = sizes[node.size || "md"] || 20;
+    return { width: size, height: size };
+  }
+  measureDivider(_node, constraints) {
+    return { width: constraints.maxWidth, height: 1 };
+  }
   // ===========================================
-  // Layout Renderers
+  // Layout Phase
   // ===========================================
-  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;
+  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
+          });
+        }
       }
-      return sum + 1;
-    }, 0);
-    const colWidth = this.contentWidth / Math.max(totalSpan, 1);
-    let maxHeight = 0;
+      if (this.isFlexContainer(child)) {
+        return createFlexGrowItemProps(measurement.height, {
+          basis: 0,
+          grow: 1,
+          shrink: 1,
+          minSize: 0,
+          maxSize: Infinity,
+          contentSize: measurement.width
+        });
+      }
+      if (constraints.inHeader && child.type === "Input") {
+        return createFlexGrowItemProps(measurement.height, {
+          basis: measurement.width,
+          // auto = content size
+          grow: 1,
+          shrink: 1,
+          minSize: 120,
+          // min-width: 120px
+          maxSize: Infinity,
+          contentSize: measurement.width
+        });
+      }
+      return createFlexItemProps(measurement.height, {
+        basis: measurement.width,
+        // auto = content size
+        grow: 0,
+        shrink: 1,
+        minSize: 0,
+        maxSize: Infinity,
+        contentSize: measurement.width
+      });
+    });
+    const flexConfig = {
+      mainSize: innerWidth,
+      crossSize: void 0,
+      // Will use max child height
+      direction: "row",
+      justifyContent: toJustifyContent(justify),
+      alignItems: toAlignItems(align),
+      gap
+    };
+    const flexResult = computeFlexLayout(flexItems, flexConfig);
+    const maxChildHeight = Math.max(...childMeasurements.map((m) => m.height), 0);
+    const innerMaxHeight = constraints.maxHeight ? constraints.maxHeight - padding.top - padding.bottom : void 0;
+    const effectiveHeight = innerMaxHeight || maxChildHeight;
+    const rowHeight = effectiveHeight + padding.top + padding.bottom;
+    const children = [];
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      const flexItem = flexResult.items[i];
+      const measurement = childMeasurements[i];
+      const childX = x + padding.left + flexItem.mainPosition;
+      let childY = y + padding.top;
+      switch (align) {
+        case "center":
+          childY = y + padding.top + (maxChildHeight - measurement.height) / 2;
+          break;
+        case "end":
+          childY = y + padding.top + (maxChildHeight - measurement.height);
+          break;
+      }
+      const childBox = this.layoutNode(child, childX, childY, {
+        ...constraints,
+        maxWidth: flexItem.mainSize,
+        maxHeight: effectiveHeight
+      });
+      children.push(childBox);
+    }
+    return {
+      x,
+      y,
+      width: constraints.maxWidth,
+      height: rowHeight,
+      node,
+      children,
+      padding
+    };
+  }
+  layoutCol(node, x, y, constraints) {
+    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
+    const padding = this.getPadding(node);
+    const innerWidth = constraints.maxWidth - padding.left - padding.right;
+    const innerHeight = constraints.maxHeight ? constraints.maxHeight - padding.top - padding.bottom : void 0;
+    const align = node.align || "stretch";
+    const childMeasurements = node.children.map(
+      (child) => this.measureNode(child, { ...constraints, maxWidth: innerWidth })
+    );
+    const flexItems = node.children.map((child, i) => {
+      const measurement = childMeasurements[i];
+      if ("h" in child && child.h !== void 0) {
+        const resolved = this.resolveSize(child.h);
+        if (resolved !== void 0) {
+          return createFlexItemProps(measurement.width, {
+            basis: resolved,
+            grow: 0,
+            shrink: 0,
+            minSize: resolved,
+            maxSize: resolved,
+            contentSize: measurement.height
+          });
+        }
+      }
+      if (child.type === "Row" && this.rowContainsSidebarOrMain(child)) {
+        return createFlexGrowItemProps(measurement.width, {
+          basis: 0,
+          grow: 1,
+          shrink: 1,
+          minSize: 0,
+          maxSize: Infinity,
+          contentSize: measurement.height
+        });
+      }
+      return createFlexItemProps(measurement.width, {
+        basis: measurement.height,
+        // auto = content size
+        grow: 0,
+        shrink: 1,
+        minSize: 0,
+        maxSize: Infinity,
+        contentSize: measurement.height
+      });
+    });
+    const flexConfig = {
+      mainSize: innerHeight ?? childMeasurements.reduce(
+        (sum, m, i) => sum + m.height + (i > 0 ? gap : 0),
+        0
+      ),
+      crossSize: innerWidth,
+      direction: "column",
+      justifyContent: "flex-start",
+      alignItems: toAlignItems(align),
+      gap
+    };
+    const flexResult = computeFlexLayout(flexItems, flexConfig);
+    const children = [];
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      const flexItem = flexResult.items[i];
+      const measurement = childMeasurements[i];
+      let childX = x + padding.left;
+      let childWidth = align === "stretch" ? innerWidth : measurement.width;
+      switch (align) {
+        case "center":
+          childX = x + padding.left + (innerWidth - measurement.width) / 2;
+          break;
+        case "end":
+          childX = x + padding.left + (innerWidth - measurement.width);
+          break;
+      }
+      const childY = y + padding.top + flexItem.mainPosition;
+      const childBox = this.layoutNode(child, childX, childY, {
+        ...constraints,
+        maxWidth: childWidth,
+        maxHeight: flexItem.mainSize
+      });
+      children.push(childBox);
+    }
+    const totalHeight = flexResult.mainSizeUsed;
+    return {
+      x,
+      y,
+      width: constraints.maxWidth,
+      height: totalHeight + padding.top + padding.bottom,
+      node,
+      children,
+      padding
+    };
+  }
+  rowContainsSidebarOrMain(row) {
+    return row.children.some(
+      (child) => child.type === "Sidebar" || child.type === "Main"
+    );
+  }
+  layoutHeader(node, x, y, constraints) {
+    const padding = this.getPadding(node);
+    const height = this.resolveSize(node.h) || 56;
+    const innerWidth = constraints.maxWidth - padding.left - padding.right;
+    const children = [];
+    let currentY = y + padding.top;
     for (const child of node.children) {
-      const 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;
+      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;
     }
-    this.currentX = savedX;
-    this.currentY = savedY + maxHeight;
-    return elements.join("\n");
+    return {
+      x,
+      y,
+      width: constraints.maxWidth,
+      height: height + padding.top + padding.bottom,
+      node,
+      children,
+      padding
+    };
   }
-  renderCol(node) {
-    return node.children.map((child) => this.renderNode(child)).join("\n");
+  adjustChildrenY(box, offset) {
+    for (const child of box.children) {
+      child.y += offset;
+      this.adjustChildrenY(child, offset);
+    }
   }
-  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>`;
+  /**
+   * 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;
   }
-  renderMain(node) {
-    return node.children.map((c) => this.renderNode(c)).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
+    };
   }
-  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>`;
+  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
+    };
   }
-  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>`;
+  layoutSidebar(node, x, y, constraints) {
+    const width = this.resolveSize(node.w) || 200;
+    const padding = this.getPadding(node);
+    const gap = this.getGap(node) ?? 8;
+    const innerWidth = width - padding.left - padding.right;
+    const children = [];
+    let currentY = y + padding.top;
+    for (const child of node.children) {
+      const childBox = this.layoutNode(child, x + padding.left, currentY, {
+        ...constraints,
+        maxWidth: innerWidth
+      });
+      children.push(childBox);
+      currentY += childBox.height + gap;
+    }
+    const contentHeight = currentY - y - padding.top - gap + padding.bottom;
+    const height = constraints.maxHeight || Math.max(contentHeight, 200);
+    return {
+      x,
+      y,
+      width,
+      height,
+      node,
+      children,
+      padding
+    };
+  }
+  layoutCard(node, x, y, constraints) {
+    let cardWidth = this.resolveSize(node.w);
+    if (!cardWidth) {
+      cardWidth = Math.min(360, constraints.maxWidth);
+    }
+    const padding = this.getPadding(node);
+    const gap = this.getGap(node) ?? this.DEFAULT_GAP;
+    const innerWidth = cardWidth - padding.left - padding.right;
+    const children = [];
+    let currentY = y + padding.top;
+    if (node.title) {
+      currentY += 28;
+    }
+    for (const child of node.children) {
+      const childBox = this.layoutNode(child, x + padding.left, currentY, {
+        ...constraints,
+        maxWidth: innerWidth
+      });
+      children.push(childBox);
+      currentY += childBox.height + gap;
+    }
+    const totalHeight = currentY - y - gap + padding.bottom;
+    return {
+      x,
+      y,
+      width: cardWidth,
+      height: totalHeight,
+      node,
+      children,
+      padding
+    };
   }
   // ===========================================
-  // Container Renderers
+  // Render Phase
   // ===========================================
-  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 = "";
+  renderBox(box) {
+    if (!box.node) return "";
+    switch (box.node.type) {
+      case "Row":
+        return this.renderRowBox(box);
+      case "Col":
+        return this.renderColBox(box);
+      case "Header":
+        return this.renderHeaderBox(box);
+      case "Footer":
+        return this.renderFooterBox(box);
+      case "Main":
+        return this.renderMainBox(box);
+      case "Sidebar":
+        return this.renderSidebarBox(box);
+      case "Card":
+        return this.renderCardBox(box);
+      case "Modal":
+        return this.renderModalBox(box);
+      case "Title":
+        return this.renderTitleBox(box);
+      case "Text":
+        return this.renderTextBox(box);
+      case "Button":
+        return this.renderButtonBox(box);
+      case "Input":
+        return this.renderInputBox(box);
+      case "Textarea":
+        return this.renderTextareaBox(box);
+      case "Select":
+        return this.renderSelectBox(box);
+      case "Checkbox":
+        return this.renderCheckboxBox(box);
+      case "Radio":
+        return this.renderRadioBox(box);
+      case "Switch":
+        return this.renderSwitchBox(box);
+      case "Link":
+        return this.renderLinkBox(box);
+      case "Image":
+        return this.renderImageBox(box);
+      case "Placeholder":
+        return this.renderPlaceholderBox(box);
+      case "Avatar":
+        return this.renderAvatarBox(box);
+      case "Badge":
+        return this.renderBadgeBox(box);
+      case "Table":
+        return this.renderTableBox(box);
+      case "List":
+        return this.renderListBox(box);
+      case "Alert":
+        return this.renderAlertBox(box);
+      case "Progress":
+        return this.renderProgressBox(box);
+      case "Spinner":
+        return this.renderSpinnerBox(box);
+      case "Nav":
+        return this.renderNavBox(box);
+      case "Tabs":
+        return this.renderTabsBox(box);
+      case "Breadcrumb":
+        return this.renderBreadcrumbBox(box);
+      case "Icon":
+        return this.renderIconBox(box);
+      case "Divider":
+        return this.renderDividerBox(box);
+      default:
+        return `<!-- Unsupported: ${box.node.type} -->`;
+    }
+  }
+  renderRowBox(box) {
+    const childrenSvg = box.children.map((child) => this.renderBox(child)).join("\n");
+    return childrenSvg;
+  }
+  renderColBox(box) {
+    const childrenSvg = box.children.map((child) => this.renderBox(child)).join("\n");
+    return childrenSvg;
+  }
+  renderHeaderBox(box) {
+    const node = box.node;
+    const hasBorder = node.border !== false;
+    let svg = `<g>
+      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" fill="${this.theme.colors.background}"/>`;
+    if (hasBorder) {
+      svg += `<line x1="${box.x}" y1="${box.y + box.height}" x2="${box.x + box.width}" y2="${box.y + box.height}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
+    }
+    svg += box.children.map((child) => this.renderBox(child)).join("\n");
+    svg += `</g>`;
+    return svg;
+  }
+  renderFooterBox(box) {
+    const node = box.node;
+    const hasBorder = node.border !== false;
+    let svg = `<g>
+      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" fill="${this.theme.colors.background}"`;
+    if (hasBorder) {
+      svg += ` stroke="${this.theme.colors.border}" stroke-width="1"`;
+    }
+    svg += `/>`;
+    svg += box.children.map((child) => this.renderBox(child)).join("\n");
+    svg += `</g>`;
+    return svg;
+  }
+  renderMainBox(box) {
+    const childrenSvg = box.children.map((child) => this.renderBox(child)).join("\n");
+    return childrenSvg;
+  }
+  renderSidebarBox(box) {
+    let svg = `<g>
+      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" fill="${this.theme.colors.background}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
+    svg += box.children.map((child) => this.renderBox(child)).join("\n");
+    svg += `</g>`;
+    return svg;
+  }
+  renderCardBox(box) {
+    const node = box.node;
+    const shadowAttr = node.shadow ? 'filter="url(#shadow)"' : "";
+    let svg = `<g>
+      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="8" fill="white" stroke="${this.theme.colors.border}" stroke-width="1" ${shadowAttr}/>`;
     if (node.title) {
-      const titleFontSize = 16;
-      titleSvg = `<text x="16" y="${titleFontSize + 12}" font-size="${titleFontSize}" font-weight="600" fill="${this.theme.colors.foreground}">${this.escapeXml(node.title)}</text>`;
-      this.currentY += titleFontSize + 8;
+      const 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 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>`;
+    svg += box.children.map((child) => this.renderBox(child)).join("\n");
+    svg += `</g>`;
+    return svg;
   }
-  renderModal(node) {
-    const width = 400;
-    const height = 300;
-    const x = (this.options.width - width) / 2;
-    const y = (this.options.height - height) / 2;
-    let titleSvg = "";
+  renderModalBox(box) {
+    const node = box.node;
+    const modalX = (this.pageWidth - box.width) / 2;
+    const modalY = (this.pageHeight - box.height) / 2;
+    let svg = `<g>
+      <rect width="${this.pageWidth}" height="${this.pageHeight}" fill="rgba(0,0,0,0.5)"/>
+      <rect x="${modalX}" y="${modalY}" width="${box.width}" height="${box.height}" rx="8" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
     if (node.title) {
-      titleSvg = `<text x="20" y="30" font-size="18" font-weight="600" fill="${this.theme.colors.foreground}">${this.escapeXml(node.title)}</text>`;
+      svg += `<text x="${modalX + 20}" y="${modalY + 30}" font-size="18" font-weight="600" fill="${this.theme.colors.foreground}">${this.escapeXml(node.title)}</text>`;
     }
-    const savedX = this.currentX;
-    const savedY = this.currentY;
-    this.currentX = 20;
-    this.currentY = 50;
-    const children = node.children.map((c) => this.renderNode(c)).join("\n");
-    this.currentX = savedX;
-    this.currentY = savedY;
-    return `
-    <g>
-      <rect width="100%" height="100%" fill="rgba(0,0,0,0.5)" opacity="0.5"/>
-      <g transform="translate(${x}, ${y})">
-        <rect width="${width}" height="${height}" rx="8" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>
-        ${titleSvg}
-        ${children}
-      </g>
-    </g>`;
+    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;
   }
-  // ===========================================
-  // Text Renderers
-  // ===========================================
-  renderText(node) {
+  renderTitleBox(box) {
+    const node = box.node;
+    const level = node.level || 1;
+    const fontSize = this.getTitleFontSize(level);
+    const textY = box.y + fontSize;
+    let textX = box.x;
+    let anchor = "start";
+    if (node.align === "center") {
+      textX = box.x + box.width / 2;
+      anchor = "middle";
+    } else if (node.align === "right") {
+      textX = box.x + box.width;
+      anchor = "end";
+    }
+    return `<text x="${textX}" y="${textY}" font-size="${fontSize}" font-weight="600" fill="${this.theme.colors.foreground}" text-anchor="${anchor}">${this.escapeXml(node.content)}</text>`;
+  }
+  renderTextBox(box) {
+    const node = box.node;
     const fontSize = this.resolveFontSize(node.size);
     const fill = node.muted ? this.theme.colors.muted : this.theme.colors.foreground;
     const fontWeight = node.weight || "normal";
-    const y = this.currentY + fontSize;
-    this.currentY += fontSize + 8;
-    return `<text x="${this.currentX}" y="${y}" font-size="${fontSize}" font-weight="${fontWeight}" fill="${fill}">${this.escapeXml(node.content)}</text>`;
-  }
-  renderTitle(node) {
-    const level = node.level || 1;
-    const fontSize = this.getTitleFontSize(level);
-    const y = this.currentY + fontSize;
-    this.currentY += fontSize + 12;
-    return `<text x="${this.currentX}" y="${y}" font-size="${fontSize}" font-weight="600" fill="${this.theme.colors.foreground}">${this.escapeXml(node.content)}</text>`;
+    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>`;
   }
-  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>`;
+  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;
   }
-  // ===========================================
-  // Input Renderers
-  // ===========================================
-  renderInput(node) {
-    const width = 280;
-    const height = 40;
-    const x = this.currentX;
-    let y = this.currentY;
-    let result = "";
+  renderInputBox(box) {
+    const node = box.node;
+    let y = box.y;
+    let svg = "<g>";
     if (node.label) {
-      result += `<text x="${x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
+      svg += `<text x="${box.x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
       y += 24;
     }
+    const inputHeight = 36;
     const placeholder = node.placeholder || "";
-    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;
+    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;
   }
-  renderTextarea(node) {
-    const width = 280;
-    const height = 100;
-    const x = this.currentX;
-    let y = this.currentY;
-    let result = "";
+  renderTextareaBox(box) {
+    const node = box.node;
+    let y = box.y;
+    let svg = "<g>";
     if (node.label) {
-      result += `<text x="${x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
+      svg += `<text x="${box.x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
       y += 24;
     }
+    const textareaHeight = box.height - (node.label ? 24 : 0);
     const placeholder = node.placeholder || "";
-    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;
+    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;
   }
-  renderSelect(node) {
-    const width = 280;
-    const height = 40;
-    const x = this.currentX;
-    let y = this.currentY;
-    let result = "";
+  renderSelectBox(box) {
+    const node = box.node;
+    let y = box.y;
+    let svg = "<g>";
     if (node.label) {
-      result += `<text x="${x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
+      svg += `<text x="${box.x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
       y += 24;
     }
+    const selectHeight = 40;
     const placeholder = node.placeholder || "Select...";
-    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;
+    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;
   }
-  renderCheckbox(node) {
-    const x = this.currentX;
-    const y = this.currentY;
+  renderCheckboxBox(box) {
+    const node = box.node;
     const size = 18;
-    let result = `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${size}" height="${size}" rx="3" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
+    let svg = `<g>
+      <rect x="${box.x}" y="${box.y}" width="${size}" height="${size}" rx="3" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
     if (node.checked) {
-      result += `<path d="M4 9 L7 12 L14 5" fill="none" stroke="${this.theme.colors.foreground}" stroke-width="2"/>`;
+      svg += `<path d="M${box.x + 4} ${box.y + 9} L${box.x + 7} ${box.y + 12} L${box.x + 14} ${box.y + 5}" fill="none" stroke="${this.theme.colors.foreground}" stroke-width="2"/>`;
     }
     if (node.label) {
-      result += `<text x="${size + 8}" y="${size - 3}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
+      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 += "</g>";
-    this.currentY += size + 12;
-    return result;
+    svg += "</g>";
+    return svg;
   }
-  renderRadio(node) {
-    const x = this.currentX;
-    const y = this.currentY;
+  renderRadioBox(box) {
+    const node = box.node;
     const size = 18;
     const radius = size / 2;
-    let result = `
-    <g transform="translate(${x}, ${y})">
-      <circle cx="${radius}" cy="${radius}" r="${radius - 1}" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
+    const cx = box.x + radius;
+    const cy = box.y + radius;
+    let svg = `<g>
+      <circle cx="${cx}" cy="${cy}" r="${radius - 1}" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
     if (node.checked) {
-      result += `<circle cx="${radius}" cy="${radius}" r="${radius - 5}" fill="${this.theme.colors.foreground}"/>`;
+      svg += `<circle cx="${cx}" cy="${cy}" r="${radius - 5}" fill="${this.theme.colors.foreground}"/>`;
     }
     if (node.label) {
-      result += `<text x="${size + 8}" y="${size - 3}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
+      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 += "</g>";
-    this.currentY += size + 12;
-    return result;
+    svg += "</g>";
+    return svg;
   }
-  renderSwitch(node) {
-    const x = this.currentX;
-    const y = this.currentY;
+  renderSwitchBox(box) {
+    const node = box.node;
     const width = 44;
     const height = 24;
     const radius = height / 2;
     const isOn = node.checked;
     const bgColor = isOn ? this.theme.colors.primary : this.theme.colors.border;
-    const knobX = isOn ? 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"/>`;
+    const knobX = isOn ? box.x + width - radius : box.x + radius;
+    let svg = `<g>
+      <rect x="${box.x}" y="${box.y}" width="${width}" height="${height}" rx="${radius}" fill="${bgColor}"/>
+      <circle cx="${knobX}" cy="${box.y + radius}" r="${radius - 3}" fill="white"/>`;
     if (node.label) {
-      result += `<text x="${width + 8}" y="${height - 6}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
-    }
-    result += "</g>";
-    this.currentY += height + 12;
-    return result;
-  }
-  // ===========================================
-  // Button Renderer
-  // ===========================================
-  renderButton(node) {
-    const content = node.content;
-    const hasIcon = !!node.icon;
-    const isIconOnly = hasIcon && !content.trim();
-    const iconSize = 16;
-    const padding = isIconOnly ? 8 : 16;
-    let width;
-    if (isIconOnly) {
-      width = iconSize + padding * 2;
-    } else if (hasIcon) {
-      width = Math.max(80, content.length * 10 + iconSize + 40);
-    } else {
-      width = Math.max(80, content.length * 10 + 32);
-    }
-    const height = 36;
-    const x = this.currentX;
-    const y = this.currentY;
-    let fill = this.theme.colors.primary;
-    let textFill = "#ffffff";
-    let isOutline = false;
-    if (node.secondary) {
-      fill = this.theme.colors.secondary;
-    } else if (node.outline) {
-      fill = "white";
-      textFill = this.theme.colors.foreground;
-      isOutline = true;
-    } else if (node.ghost) {
-      fill = "transparent";
-      textFill = this.theme.colors.foreground;
+      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>`;
     }
-    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>`;
+    svg += "</g>";
+    return svg;
   }
-  /**
-   * 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>`;
+  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>`;
   }
-  // ===========================================
-  // 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>
+  renderImageBox(box) {
+    const node = box.node;
+    return `<g>
+      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" fill="${this.theme.colors.muted}" stroke="${this.theme.colors.border}" stroke-width="1"/>
+      <line x1="${box.x}" y1="${box.y}" x2="${box.x + box.width}" y2="${box.y + box.height}" stroke="${this.theme.colors.border}" stroke-width="1"/>
+      <line x1="${box.x + box.width}" y1="${box.y}" x2="${box.x}" y2="${box.y + box.height}" stroke="${this.theme.colors.border}" stroke-width="1"/>
+      <text x="${box.x + box.width / 2}" y="${box.y + box.height / 2 + 5}" font-size="14" fill="${this.theme.colors.foreground}" text-anchor="middle">${this.escapeXml(node.alt || "Image")}</text>
     </g>`;
   }
-  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>
+  renderPlaceholderBox(box) {
+    const node = box.node;
+    const patternId = `placeholder-pattern-${this.clipPathCounter++}`;
+    const patternDef = `<pattern id="${patternId}" width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+      <rect width="14" height="14" fill="#f9f9f9"/>
+      <rect width="7" height="14" fill="rgba(0,0,0,0.03)"/>
+    </pattern>`;
+    this.clipPathDefs.push(patternDef);
+    return `<g>
+      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="4" fill="url(#${patternId})" stroke="${this.theme.colors.muted}" stroke-width="1" stroke-dasharray="4,2"/>
+      <text x="${box.x + box.width / 2}" y="${box.y + box.height / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}" text-anchor="middle">${this.escapeXml(node.label || "Placeholder")}</text>
     </g>`;
   }
-  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;
+  renderAvatarBox(box) {
+    const node = box.node;
+    const radius = box.width / 2;
+    const cx = box.x + radius;
+    const cy = box.y + radius;
     const initial = node.name ? node.name.charAt(0).toUpperCase() : "?";
-    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>
+    return `<g>
+      <circle cx="${cx}" cy="${cy}" r="${radius}" fill="${this.theme.colors.foreground}"/>
+      <text x="${cx}" y="${cy + 5}" font-size="${box.width / 2.5}" fill="${this.theme.colors.background}" text-anchor="middle">${initial}</text>
     </g>`;
   }
-  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>
+  renderBadgeBox(box) {
+    const node = box.node;
+    return `<g>
+      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="11" fill="${this.theme.colors.muted}" stroke="${this.theme.colors.border}" stroke-width="1"/>
+      <text x="${box.x + box.width / 2}" y="${box.y + box.height / 2 + 4}" font-size="12" fill="${this.theme.colors.foreground}" text-anchor="middle">${this.escapeXml(node.content)}</text>
     </g>`;
   }
-  // ===========================================
-  // Data Renderers
-  // ===========================================
-  renderTable(node) {
+  renderTableBox(box) {
+    const node = box.node;
     const columns = node.columns || [];
     const rows = node.rows || [];
     const rowCount = rows.length || 3;
     const colWidth = 120;
     const rowHeight = 40;
-    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}"/>`;
+    let svg = `<g>`;
+    svg += `<rect x="${box.x}" y="${box.y}" width="${columns.length * colWidth}" height="${rowHeight}" fill="${this.theme.colors.muted}"/>`;
     columns.forEach((col, i) => {
-      svg += `<text x="${i * colWidth + 12}" y="${rowHeight / 2 + 5}" font-size="14" font-weight="600">${this.escapeXml(col)}</text>`;
+      svg += `<text x="${box.x + i * colWidth + 12}" y="${box.y + rowHeight / 2 + 5}" font-size="14" font-weight="600">${this.escapeXml(col)}</text>`;
     });
-    const displayRowCount = rows.length > 0 ? rows.length : Math.max(rowCount, 3);
+    const displayRowCount = rows.length > 0 ? rows.length : rowCount;
     for (let rowIdx = 0; rowIdx < displayRowCount; rowIdx++) {
-      const rowY = (rowIdx + 1) * rowHeight;
-      svg += `<rect y="${rowY}" width="${columns.length * colWidth}" height="${rowHeight}" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
+      const rowY = box.y + (rowIdx + 1) * rowHeight;
+      svg += `<rect x="${box.x}" y="${rowY}" width="${columns.length * colWidth}" height="${rowHeight}" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
       columns.forEach((_, colIdx) => {
         const cellContent = rows[rowIdx] && rows[rowIdx][colIdx] ? String(typeof rows[rowIdx][colIdx] === "object" ? "..." : rows[rowIdx][colIdx]) : "\u2014";
-        svg += `<text x="${colIdx * colWidth + 12}" y="${rowY + rowHeight / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(cellContent)}</text>`;
+        svg += `<text x="${box.x + colIdx * colWidth + 12}" y="${rowY + rowHeight / 2 + 5}" font-size="14" fill="${this.theme.colors.muted}">${this.escapeXml(cellContent)}</text>`;
       });
     }
     svg += "</g>";
-    this.currentY += (displayRowCount + 1) * rowHeight + 16;
     return svg;
   }
-  renderList(node) {
-    const x = this.currentX;
-    let y = this.currentY;
+  renderListBox(box) {
+    const node = box.node;
     const items = node.items || [];
     const ordered = node.ordered || false;
-    let svg = `<g transform="translate(${x}, ${y})">`;
+    let svg = "<g>";
     items.forEach((item, idx) => {
       const marker = ordered ? `${idx + 1}.` : "\u2022";
       const content = typeof item === "string" ? item : item.content;
-      svg += `<text x="0" y="${idx * 24 + 16}" font-size="14" fill="${this.theme.colors.foreground}">${marker} ${this.escapeXml(content)}</text>`;
+      svg += `<text x="${box.x}" y="${box.y + idx * 28 + 16}" font-size="14" fill="${this.theme.colors.foreground}">${marker} ${this.escapeXml(content)}</text>`;
     });
     svg += "</g>";
-    this.currentY += items.length * 24 + 12;
     return svg;
   }
-  // ===========================================
-  // Feedback Renderers
-  // ===========================================
-  renderAlert(node) {
-    const width = Math.min(400, this.contentWidth);
-    const height = 48;
-    const x = this.currentX;
-    const y = this.currentY;
-    this.currentY += height + 12;
-    return `
-    <g transform="translate(${x}, ${y})">
-      <rect width="${width}" height="${height}" rx="4" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>
-      <text x="16" y="${height / 2 + 5}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.content)}</text>
+  renderAlertBox(box) {
+    const node = box.node;
+    return `<g>
+      <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="4" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>
+      <text x="${box.x + 16}" y="${box.y + box.height / 2 + 5}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.content)}</text>
     </g>`;
   }
-  renderProgress(node) {
-    const width = 200;
-    const height = 8;
-    const x = this.currentX;
-    let y = this.currentY;
-    let result = "";
+  renderProgressBox(box) {
+    const node = box.node;
+    let y = box.y;
+    let svg = "<g>";
     if (node.label) {
-      result += `<text x="${x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
+      svg += `<text x="${box.x}" y="${y + 14}" font-size="14" fill="${this.theme.colors.foreground}">${this.escapeXml(node.label)}</text>`;
       y += 24;
     }
+    const barHeight = 8;
     const value = node.value || 0;
     const max = node.max || 100;
     const percent = Math.min(100, Math.max(0, value / max * 100));
-    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;
+    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;
   }
-  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"/>
+  renderSpinnerBox(box) {
+    const cx = box.x + box.width / 2;
+    const cy = box.y + box.height / 2;
+    const radius = box.width / 2 - 2;
+    return `<g>
+      <circle cx="${cx}" cy="${cy}" r="${radius}" fill="none" stroke="${this.theme.colors.muted}" stroke-width="2"/>
+      <path d="M${cx},${cy - radius} A${radius},${radius} 0 0,1 ${cx + radius},${cy}" fill="none" stroke="${this.theme.colors.primary}" stroke-width="2" stroke-linecap="round"/>
     </g>`;
   }
-  // ===========================================
-  // Navigation Renderers
-  // ===========================================
-  renderNav(node) {
-    const items = node.items || [];
-    const x = this.currentX;
-    const y = this.currentY;
+  renderNavBox(box) {
+    const node = box.node;
     const vertical = node.vertical || false;
-    let svg = `<g transform="translate(${x}, ${y})">`;
+    let svg = "<g>";
+    if (node.children && node.children.length > 0) {
+      let offsetY = 0;
+      node.children.forEach((child) => {
+        if (child.type === "divider") {
+          offsetY += 16;
+          svg += `<line x1="${box.x}" y1="${box.y + offsetY}" x2="${box.x + box.width - 32}" y2="${box.y + offsetY}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
+          offsetY += 8;
+        } else if (child.type === "group") {
+          svg += `<text x="${box.x}" y="${box.y + offsetY + 16}" font-size="11" font-weight="500" fill="${this.theme.colors.muted}" text-transform="uppercase">${this.escapeXml(child.label)}</text>`;
+          offsetY += 28;
+          child.items.forEach((item) => {
+            if (item.type === "divider") {
+              offsetY += 8;
+              svg += `<line x1="${box.x}" y1="${box.y + offsetY}" x2="${box.x + box.width - 32}" y2="${box.y + offsetY}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
+              offsetY += 8;
+            } else {
+              const fill = item.active ? this.theme.colors.foreground : this.theme.colors.muted;
+              const fontWeight = item.active ? 'font-weight="500"' : "";
+              svg += `<text x="${box.x}" y="${box.y + offsetY + 16}" font-size="14" ${fontWeight} fill="${fill}">${this.escapeXml(item.label)}</text>`;
+              offsetY += 32;
+            }
+          });
+        } else if (child.type === "item") {
+          const fill = child.active ? this.theme.colors.foreground : this.theme.colors.muted;
+          const fontWeight = child.active ? 'font-weight="500"' : "";
+          svg += `<text x="${box.x}" y="${box.y + offsetY + 16}" font-size="14" ${fontWeight} fill="${fill}">${this.escapeXml(child.label)}</text>`;
+          offsetY += 32;
+        }
+      });
+      svg += "</g>";
+      return svg;
+    }
+    const items = node.items || [];
     if (vertical) {
       items.forEach((item, idx) => {
         const label = typeof item === "string" ? item : item.label;
         const isActive = typeof item === "object" && item.active;
         const fill = isActive ? this.theme.colors.foreground : this.theme.colors.muted;
-        svg += `<text x="0" y="${idx * 32 + 16}" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
+        svg += `<text x="${box.x}" y="${box.y + idx * 32 + 16}" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
       });
-      this.currentY += items.length * 32 + 12;
     } else {
       let offsetX = 0;
       items.forEach((item) => {
         const label = typeof item === "string" ? item : item.label;
         const isActive = typeof item === "object" && item.active;
         const fill = isActive ? this.theme.colors.foreground : this.theme.colors.muted;
-        svg += `<text x="${offsetX}" y="16" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
-        offsetX += label.length * 8 + 24;
+        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;
       });
-      this.currentY += 32;
     }
     svg += "</g>";
     return svg;
   }
-  renderTabs(node) {
+  renderTabsBox(box) {
+    const node = box.node;
     const items = node.items || [];
-    const x = this.currentX;
-    const y = this.currentY;
     const tabHeight = 40;
-    let svg = `<g transform="translate(${x}, ${y})">`;
+    let svg = "<g>";
     let offsetX = 0;
-    items.forEach((item) => {
+    items.forEach((item, idx) => {
       const label = typeof item === "string" ? item : item;
-      const tabWidth = label.length * 10 + 24;
-      svg += `<rect x="${offsetX}" width="${tabWidth}" height="${tabHeight}" fill="white" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
-      svg += `<text x="${offsetX + tabWidth / 2}" y="${tabHeight / 2 + 5}" font-size="14" text-anchor="middle">${this.escapeXml(label)}</text>`;
+      const tabWidth = this.estimateTextWidth(label, 14) + 32;
+      const isFirst = idx === 0;
+      svg += `<rect x="${box.x + offsetX}" y="${box.y}" width="${tabWidth}" height="${tabHeight}" fill="${isFirst ? "white" : this.theme.colors.muted}" stroke="${this.theme.colors.border}" stroke-width="1"/>`;
+      svg += `<text x="${box.x + offsetX + tabWidth / 2}" y="${box.y + tabHeight / 2 + 5}" font-size="14" text-anchor="middle" fill="${this.theme.colors.foreground}">${this.escapeXml(label)}</text>`;
       offsetX += tabWidth;
     });
     svg += "</g>";
-    this.currentY += tabHeight + 12;
     return svg;
   }
-  renderBreadcrumb(node) {
+  renderBreadcrumbBox(box) {
+    const node = box.node;
     const items = node.items || [];
     const separator = "/";
-    const x = this.currentX;
-    const y = this.currentY;
-    let svg = `<g transform="translate(${x}, ${y})">`;
+    let svg = "<g>";
     let offsetX = 0;
     items.forEach((item, idx) => {
       const label = typeof item === "string" ? item : item.label;
       const isLast = idx === items.length - 1;
       const fill = isLast ? this.theme.colors.foreground : this.theme.colors.muted;
-      svg += `<text x="${offsetX}" y="16" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
-      offsetX += label.length * 8 + 8;
+      svg += `<text x="${box.x + offsetX}" y="${box.y + 16}" font-size="14" fill="${fill}">${this.escapeXml(label)}</text>`;
+      offsetX += this.estimateTextWidth(label, 14) + 8;
       if (!isLast) {
-        svg += `<text x="${offsetX}" y="16" font-size="14" fill="${this.theme.colors.muted}">${separator}</text>`;
+        svg += `<text x="${box.x + offsetX}" y="${box.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
   // ===========================================
-  getFontSize(size) {
-    const sizes = {
-      xs: 12,
-      sm: 14,
-      base: 16,
-      md: 16,
-      lg: 18,
-      xl: 20,
-      "2xl": 24,
-      "3xl": 30
-    };
-    return sizes[size] || 16;
+  renderIconPaths(data, x, y, size, color) {
+    const scale = size / 24;
+    const paths = data.map(([tag, attrs]) => {
+      const attrStr = Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ");
+      return `<${tag} ${attrStr} />`;
+    }).join("");
+    return `<g transform="translate(${x}, ${y}) scale(${scale})" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</g>`;
+  }
+  getPadding(node) {
+    const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 };
+    if (!("p" in node) && !("px" in node) && !("py" in node)) {
+      if (node.type === "Card" || node.type === "Header" || node.type === "Footer" || node.type === "Sidebar") {
+        return { top: 16, right: 16, bottom: 16, left: 16 };
+      }
+      return defaultPadding;
+    }
+    let p = 0;
+    if ("p" in node && node.p !== void 0) {
+      p = this.resolveSpacing(node.p);
+    }
+    let px = p;
+    let py = p;
+    if ("px" in node && node.px !== void 0) {
+      px = this.resolveSpacing(node.px);
+    }
+    if ("py" in node && node.py !== void 0) {
+      py = this.resolveSpacing(node.py);
+    }
+    if (node.type === "Header") {
+      return { top: 0, right: px, bottom: 0, left: px };
+    }
+    return { top: py, right: px, bottom: py, left: px };
+  }
+  getGap(node) {
+    if ("gap" in node && node.gap !== void 0) {
+      return this.resolveSpacing(node.gap);
+    }
+    return void 0;
+  }
+  resolveSpacing(value) {
+    if (typeof value === "number") {
+      return value * 4;
+    }
+    if (typeof value === "object" && value && "value" in value) {
+      return value.value;
+    }
+    return 0;
+  }
+  resolveSize(value) {
+    if (value === void 0 || value === null) return void 0;
+    if (typeof value === "number") return value;
+    if (typeof value === "string") {
+      if (value === "full") return void 0;
+      const num = parseFloat(value);
+      if (!isNaN(num)) return num;
+    }
+    if (typeof value === "object" && value && "value" in value) {
+      return value.value;
+    }
+    return void 0;
+  }
+  isFullWidth(node) {
+    if ("w" in node) {
+      return node.w === "full";
+    }
+    return false;
+  }
+  estimateTextWidth(text, fontSize) {
+    return text.length * fontSize * 0.6;
   }
   resolveFontSize(size) {
     if (!size) return 16;
     if (typeof size === "string") {
-      return this.getFontSize(size);
+      const sizes = {
+        xs: 12,
+        sm: 14,
+        base: 16,
+        md: 16,
+        lg: 18,
+        xl: 20,
+        "2xl": 24,
+        "3xl": 30
+      };
+      return sizes[size] || 16;
     }
     if (typeof size === "object" && "value" in size) {
       if (size.unit === "px") return size.value;
@@ -50071,15 +51302,8 @@ var SvgRenderer = class {
     return 16;
   }
   getTitleFontSize(level) {
-    const sizes = {
-      1: 32,
-      2: 28,
-      3: 24,
-      4: 20,
-      5: 18,
-      6: 16
-    };
-    return sizes[level] || 24;
+    const sizes = { 1: 36, 2: 30, 3: 24, 4: 20, 5: 18, 6: 16 };
+    return sizes[level] || 20;
   }
   escapeXml(str) {
     return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
@@ -50140,15 +51364,22 @@ function renderToSvg2(document, options = {}) {
       height = viewport.height;
     }
   }
-  const padding = options.padding ?? 20;
   const background = options.background ?? "#ffffff";
   const { html, css } = render(document, { theme: "light" });
   const svg = `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
   <rect width="100%" height="100%" fill="${background}"/>
-  <foreignObject x="${padding}" y="${padding}" width="${width - padding * 2}" height="${height - padding * 2}">
-    <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; overflow: hidden;">
+  <foreignObject x="0" y="0" width="${width}" height="${height}">
+    <div xmlns="http://www.w3.org/1999/xhtml" style="
+      width: ${width}px;
+      height: ${height}px;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+    ">
       <style type="text/css">
 ${css}
       </style>