@wire-dsl/engine 0.4.1 → 0.6.0

package/README.md

@@ -92,7 +92,7 @@ validateIR(ir); // Throws if invalid
 
 **Display**: Divider, Badge, Link, Alert
 
-**Info**: StatCard, Code, ChartPlaceholder
+**Info**: Stat, Code, ChartPlaceholder
 
 **Feedback**: Modal, Spinner
 

package/dist/index.cjs

@@ -2220,8 +2220,8 @@ var IRStyleSchema = import_zod.z.object({
 var IRNodeStyleSchema = import_zod.z.object({
   padding: import_zod.z.string().optional(),
   gap: import_zod.z.string().optional(),
-  align: import_zod.z.enum(["left", "center", "right", "justify"]).optional(),
-  justify: import_zod.z.enum(["start", "center", "end"]).optional(),
+  justify: import_zod.z.enum(["start", "center", "end", "stretch", "spaceBetween", "spaceAround"]).optional(),
+  align: import_zod.z.enum(["start", "center", "end"]).optional(),
   background: import_zod.z.string().optional()
 });
 var IRMetaSchema = import_zod.z.object({
@@ -2507,6 +2507,9 @@ ${messages}`);
     if (layoutParams.gap !== void 0) {
       style.gap = String(layoutParams.gap);
     }
+    if (layoutParams.justify !== void 0) {
+      style.justify = layoutParams.justify;
+    }
     if (layoutParams.align !== void 0) {
       style.align = layoutParams.align;
     }
@@ -2588,7 +2591,7 @@ ${messages}`);
       "Label",
       "Image",
       "Card",
-      "StatCard",
+      "Stat",
       "Topbar",
       "Table",
       "Chart",
@@ -3153,8 +3156,9 @@ var LayoutEngine = class {
         }
       });
     } else {
-      const align = node.style.align || "justify";
-      if (align === "justify") {
+      const justify = node.style.justify || "stretch";
+      const crossAlign = node.style.align || "start";
+      if (justify === "stretch") {
         let currentX = x;
         const childWidth = this.calculateChildWidth(children.length, width, gap);
         let stackHeight = 0;
@@ -3176,43 +3180,44 @@ var LayoutEngine = class {
         });
       } else {
         const childWidths = [];
+        const childHeights = [];
         const explicitHeightFlags = [];
-        const blockButtonIndices = /* @__PURE__ */ new Set();
+        const flexIndices = /* @__PURE__ */ new Set();
         let stackHeight = 0;
         children.forEach((childRef, index) => {
           const childNode = this.nodes[childRef.ref];
-          let childWidth = this.getIntrinsicComponentWidth(childNode);
-          let childHeight = this.getComponentHeight();
           const hasExplicitHeight = childNode?.kind === "component" && !!childNode.props.height;
           const hasExplicitWidth = childNode?.kind === "component" && !!childNode.props.width;
           const isBlockButton = childNode?.kind === "component" && childNode.componentType === "Button" && !hasExplicitWidth && this.parseBooleanProp(childNode.props.block, false);
-          if (isBlockButton) {
+          const isFlexContainer = !hasExplicitWidth && childNode?.kind === "container" && !this.containerHasIntrinsicWidth(childNode);
+          let childWidth;
+          if (isBlockButton || isFlexContainer) {
             childWidth = 0;
-            blockButtonIndices.add(index);
+            flexIndices.add(index);
           } else if (hasExplicitWidth) {
             childWidth = Number(childNode.props.width);
-          }
-          if (hasExplicitHeight) {
-            childHeight = Number(childNode.props.height);
+          } else {
+            childWidth = this.getIntrinsicWidth(childNode, width);
           }
           childWidths.push(childWidth);
+          childHeights.push(this.getComponentHeight());
           explicitHeightFlags.push(hasExplicitHeight);
         });
         const totalGapWidth = gap * Math.max(0, children.length - 1);
-        if (blockButtonIndices.size > 0) {
+        if (flexIndices.size > 0) {
           const fixedWidth = childWidths.reduce((sum, w, idx) => {
-            return blockButtonIndices.has(idx) ? sum : sum + w;
+            return flexIndices.has(idx) ? sum : sum + w;
           }, 0);
           const remainingWidth = width - totalGapWidth - fixedWidth;
-          const widthPerBlock = Math.max(1, remainingWidth / blockButtonIndices.size);
-          blockButtonIndices.forEach((index) => {
-            childWidths[index] = widthPerBlock;
+          const widthPerFlex = Math.max(1, remainingWidth / flexIndices.size);
+          flexIndices.forEach((idx) => {
+            childWidths[idx] = widthPerFlex;
           });
         }
         children.forEach((childRef, index) => {
           const childNode = this.nodes[childRef.ref];
-          let childHeight = this.getComponentHeight();
           const childWidth = childWidths[index];
+          let childHeight = this.getComponentHeight();
           if (explicitHeightFlags[index] && childNode?.kind === "component") {
             childHeight = Number(childNode.props.height);
           } else if (childNode?.kind === "container") {
@@ -3220,21 +3225,37 @@ var LayoutEngine = class {
           } else if (childNode?.kind === "component") {
             childHeight = this.getIntrinsicComponentHeight(childNode, childWidth);
           }
+          childHeights[index] = childHeight;
           stackHeight = Math.max(stackHeight, childHeight);
         });
         const totalChildWidth = childWidths.reduce((sum, w) => sum + w, 0);
         const totalContentWidth = totalChildWidth + totalGapWidth;
         let startX = x;
-        if (align === "center") {
+        let dynamicGap = gap;
+        if (justify === "center") {
           startX = x + (width - totalContentWidth) / 2;
-        } else if (align === "right") {
+        } else if (justify === "end") {
           startX = x + width - totalContentWidth;
+        } else if (justify === "spaceBetween") {
+          startX = x;
+          dynamicGap = children.length > 1 ? (width - totalChildWidth) / (children.length - 1) : 0;
+        } else if (justify === "spaceAround") {
+          const spacing = children.length > 0 ? (width - totalChildWidth) / children.length : 0;
+          startX = x + spacing / 2;
+          dynamicGap = spacing;
         }
         let currentX = startX;
         children.forEach((childRef, index) => {
           const childWidth = childWidths[index];
-          this.calculateNode(childRef.ref, currentX, y, childWidth, stackHeight, "stack");
-          currentX += childWidth + gap;
+          const childHeight = childHeights[index];
+          let childY = y;
+          if (crossAlign === "center") {
+            childY = y + Math.round((stackHeight - childHeight) / 2);
+          } else if (crossAlign === "end") {
+            childY = y + stackHeight - childHeight;
+          }
+          this.calculateNode(childRef.ref, currentX, childY, childWidth, childHeight, "stack");
+          currentX += childWidth + dynamicGap;
         });
       }
     }
@@ -3731,7 +3752,7 @@ var LayoutEngine = class {
     if (node.componentType === "Textarea") return 100 + controlLabelOffset;
     if (node.componentType === "Modal") return 300;
     if (node.componentType === "Card") return 120;
-    if (node.componentType === "StatCard") return 120;
+    if (node.componentType === "Stat") return 120;
     if (node.componentType === "Chart" || node.componentType === "ChartPlaceholder") return 250;
     if (node.componentType === "List") {
       const itemsFromProps = String(node.props.items || "").split(",").map((item) => item.trim()).filter(Boolean);
@@ -3757,6 +3778,47 @@ var LayoutEngine = class {
   getControlLabelOffset(label) {
     return label.trim().length > 0 ? 18 : 0;
   }
+  /**
+   * Returns true when a container's width can be calculated from its children
+   * (i.e. it is a horizontal non-stretch stack). False means the container
+   * behaves like `flex-grow:1` and should absorb remaining space.
+   */
+  containerHasIntrinsicWidth(node) {
+    if (node.kind !== "container") return false;
+    return node.containerType === "stack" && String(node.params.direction || "vertical") === "horizontal" && (node.style.justify || "stretch") !== "stretch";
+  }
+  /**
+   * Returns the natural (intrinsic) width of any node — component or container.
+   * For horizontal non-stretch containers the width is the sum of their children's
+   * intrinsic widths plus gaps, capped at `availableWidth`. All other containers
+   * are assumed to take the full available width (they stretch or grow).
+   */
+  getIntrinsicWidth(node, availableWidth) {
+    if (!node) return 120;
+    if (node.kind === "component") {
+      return this.getIntrinsicComponentWidth(node);
+    }
+    if (node.kind === "container") {
+      if (this.containerHasIntrinsicWidth(node)) {
+        const gap = this.resolveSpacing(node.style.gap);
+        const padding = this.resolveSpacing(node.style.padding);
+        const innerAvailable = Math.max(0, availableWidth - padding * 2);
+        const children = node.children ?? [];
+        let total = padding * 2;
+        children.forEach((childRef, idx) => {
+          const child = this.nodes[childRef.ref];
+          total += this.getIntrinsicWidth(child, innerAvailable);
+          if (idx < children.length - 1) total += gap;
+        });
+        return Math.min(total, availableWidth);
+      }
+      return availableWidth;
+    }
+    if (node.kind === "instance") {
+      return availableWidth;
+    }
+    return 120;
+  }
   getIntrinsicComponentWidth(node) {
     if (!node || node.kind !== "component") {
       return 120;
@@ -3782,7 +3844,10 @@ var LayoutEngine = class {
       const density = this.style.density || "normal";
       const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
       const textWidth = this.estimateTextWidth(text, fontSize);
-      return Math.max(60, Math.ceil(textWidth + (paddingX + extraPadding) * 2));
+      const iconName = String(node.props.icon || "").trim();
+      const iconSize = iconName ? Math.round(fontSize * 1.1) : 0;
+      const iconGap = iconName ? 8 : 0;
+      return Math.max(60, Math.ceil(textWidth + iconSize + iconGap + (paddingX + extraPadding) * 2));
     }
     if (node.componentType === "Label" || node.componentType === "Text") {
       const text = String(node.props.text || "");
@@ -3813,7 +3878,7 @@ var LayoutEngine = class {
     if (node.componentType === "Table") {
       return 400;
     }
-    if (node.componentType === "StatCard" || node.componentType === "Card") {
+    if (node.componentType === "Stat" || node.componentType === "Card") {
       return 280;
     }
     if (node.componentType === "SidebarMenu") {
@@ -4869,8 +4934,8 @@ var SVGRenderer = class {
         return this.renderModal(node, pos);
       case "List":
         return this.renderList(node, pos);
-      case "StatCard":
-        return this.renderStatCard(node, pos);
+      case "Stat":
+        return this.renderStat(node, pos);
       case "Image":
         return this.renderImage(node, pos);
       // Icon components
@@ -4916,6 +4981,7 @@ var SVGRenderer = class {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
     const size = String(node.props.size || "md");
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const density = this.ir.project.style.density || "normal";
     const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
     const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
@@ -4961,7 +5027,7 @@ var SVGRenderer = class {
       textX = pos.x + buttonWidth / 2;
       textAnchor = "middle";
     }
-    let svg = `<g${this.getDataNodeId(node)}>
+    let svg = `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <rect x="${pos.x}" y="${buttonY}"
           width="${buttonWidth}" height="${buttonHeight}"
           rx="${radius}"
@@ -5027,6 +5093,7 @@ var SVGRenderer = class {
     const placeholder = String(node.props.placeholder || "");
     const iconLeftName = String(node.props.iconLeft || "").trim();
     const iconRightName = String(node.props.iconRight || "").trim();
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const radius = this.tokens.input.radius;
     const fontSize = this.tokens.input.fontSize;
     const paddingX = this.tokens.input.paddingX;
@@ -5043,7 +5110,7 @@ var SVGRenderer = class {
     const textX = pos.x + (iconLeftSvg ? leftOffset : paddingX);
     const iconColor = this.hexToRgba(this.resolveMutedColor(), 0.8);
     const iconCenterY = controlY + (controlHeight - iconSize) / 2;
-    let svg = `<g${this.getDataNodeId(node)}>`;
+    let svg = `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>`;
     if (label) {
       svg += `
     <text x="${pos.x + paddingX}" y="${this.getControlLabelBaselineY(pos.y)}"
@@ -5612,7 +5679,8 @@ var SVGRenderer = class {
     const fontSize = this.tokens.text.fontSize;
     const lineHeightPx = Math.ceil(fontSize * this.tokens.text.lineHeight);
     const lines = this.wrapTextToLines(text, pos.width, fontSize);
-    const firstLineY = pos.y + fontSize;
+    const totalTextHeight = lines.length * lineHeightPx;
+    const firstLineY = pos.y + Math.round(Math.max(0, (pos.height - totalTextHeight) / 2)) + fontSize;
     const tspans = lines.map(
       (line, index) => `<tspan x="${pos.x}" dy="${index === 0 ? 0 : lineHeightPx}">${this.escapeXml(line)}</tspan>`
     ).join("");
@@ -5625,8 +5693,9 @@ var SVGRenderer = class {
   }
   renderLabel(node, pos) {
     const text = String(node.props.text || "Label");
+    const textY = pos.y + Math.round(pos.height / 2) + 4;
     return `<g${this.getDataNodeId(node)}>
-    <text x="${pos.x}" y="${pos.y + 12}" 
+    <text x="${pos.x}" y="${textY}" 
           font-family="Arial, Helvetica, sans-serif" 
           font-size="12" 
           fill="${this.renderTheme.textMuted}">${this.escapeXml(text)}</text>
@@ -5681,6 +5750,7 @@ var SVGRenderer = class {
     const placeholder = String(node.props.placeholder || "Select...");
     const iconLeftName = String(node.props.iconLeft || "").trim();
     const iconRightName = String(node.props.iconRight || "").trim();
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const labelOffset = this.getControlLabelOffset(label);
     const controlY = pos.y + labelOffset;
     const controlHeight = Math.max(16, pos.height - labelOffset);
@@ -5694,7 +5764,7 @@ var SVGRenderer = class {
     const chevronWidth = 20;
     const iconColor = this.hexToRgba(this.resolveMutedColor(), 0.8);
     const iconCenterY = controlY + (controlHeight - iconSize) / 2;
-    let svg = `<g${this.getDataNodeId(node)}>`;
+    let svg = `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>`;
     if (label) {
       svg += `
     <text x="${pos.x}" y="${this.getControlLabelBaselineY(pos.y)}"
@@ -5743,10 +5813,11 @@ var SVGRenderer = class {
   renderCheckbox(node, pos) {
     const label = String(node.props.label || "Checkbox");
     const checked = String(node.props.checked || "false").toLowerCase() === "true";
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const controlColor = this.resolveControlColor();
     const checkboxSize = 18;
     const checkboxY = pos.y + pos.height / 2 - checkboxSize / 2;
-    return `<g${this.getDataNodeId(node)}>
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <rect x="${pos.x}" y="${checkboxY}" 
           width="${checkboxSize}" height="${checkboxSize}" 
           rx="4" 
@@ -5767,10 +5838,11 @@ var SVGRenderer = class {
   renderRadio(node, pos) {
     const label = String(node.props.label || "Radio");
     const checked = String(node.props.checked || "false").toLowerCase() === "true";
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const controlColor = this.resolveControlColor();
     const radioSize = 16;
     const radioY = pos.y + pos.height / 2 - radioSize / 2;
-    return `<g${this.getDataNodeId(node)}>
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <circle cx="${pos.x + radioSize / 2}" cy="${radioY + radioSize / 2}" 
             r="${radioSize / 2}" 
             fill="${this.renderTheme.cardBg}" 
@@ -5788,11 +5860,12 @@ var SVGRenderer = class {
   renderToggle(node, pos) {
     const label = String(node.props.label || "Toggle");
     const enabled = String(node.props.enabled || "false").toLowerCase() === "true";
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const controlColor = this.resolveControlColor();
     const toggleWidth = 40;
     const toggleHeight = 20;
     const toggleY = pos.y + pos.height / 2 - toggleHeight / 2;
-    return `<g${this.getDataNodeId(node)}>
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <rect x="${pos.x}" y="${toggleY}" 
           width="${toggleWidth}" height="${toggleHeight}" 
           rx="10" 
@@ -6088,7 +6161,7 @@ var SVGRenderer = class {
           text-anchor="middle">${node.componentType}</text>
   </g>`;
   }
-  renderStatCard(node, pos) {
+  renderStat(node, pos) {
     const title = String(node.props.title || "Metric");
     const value = String(node.props.value || "0");
     const rawCaption = String(node.props.caption || "");
@@ -6096,7 +6169,9 @@ var SVGRenderer = class {
     const hasCaption = caption.trim().length > 0;
     const iconName = String(node.props.icon || "").trim();
     const iconSvg = iconName ? getIcon(iconName) : null;
-    const accentColor = this.resolveAccentColor();
+    const variant = String(node.props.variant || "default");
+    const baseAccent = this.resolveAccentColor();
+    const accentColor = variant !== "default" ? this.resolveVariantColor(variant, baseAccent) : baseAccent;
     const padding = this.resolveSpacing(node.style.padding) || 16;
     const innerX = pos.x + padding;
     const innerY = pos.y + padding;
@@ -6120,7 +6195,7 @@ var SVGRenderer = class {
     const visibleTitle = this.truncateTextToWidth(title, titleMaxWidth, titleSize);
     const visibleCaption = hasCaption ? this.truncateTextToWidth(caption, Math.max(20, innerWidth), captionSize) : "";
     let svg = `<g${this.getDataNodeId(node)}>
-    <!-- StatCard Background -->
+    <!-- Stat Background -->
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           rx="8" 
@@ -6757,8 +6832,8 @@ var SVGRenderer = class {
       return false;
     }
     const direction = String(parent.params.direction || "vertical");
-    const align = parent.style.align || "justify";
-    return direction === "horizontal" && align === "justify";
+    const justify = parent.style.justify || "stretch";
+    return direction === "horizontal" && justify === "stretch";
   }
   buildParentContainerIndex() {
     this.parentContainerByChildId.clear();
@@ -7383,9 +7458,9 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
     return svg;
   }
   /**
-   * Render StatCard with gray blocks instead of values
+   * Render Stat with gray blocks instead of values
    */
-  renderStatCard(node, pos) {
+  renderStat(node, pos) {
     const hasIcon = String(node.props.icon || "").trim().length > 0;
     const hasCaption = String(node.props.caption || "").trim().length > 0;
     const iconSize = 20;
@@ -8512,7 +8587,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
   /**
    * Render stat card with sketch filter and Comic Sans
    */
-  renderStatCard(node, pos) {
+  renderStat(node, pos) {
     const title = String(node.props.title || "Metric");
     const value = String(node.props.value || "0");
     const rawCaption = String(node.props.caption || "");
@@ -8520,7 +8595,9 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const hasCaption = caption.trim().length > 0;
     const iconName = String(node.props.icon || "").trim();
     const iconSvg = iconName ? getIcon(iconName) : null;
-    const accentColor = this.resolveAccentColor();
+    const variant = String(node.props.variant || "default");
+    const baseAccent = this.resolveAccentColor();
+    const accentColor = variant !== "default" ? this.resolveVariantColor(variant, baseAccent) : baseAccent;
     const padding = this.resolveSpacing(node.style.padding);
     const innerX = pos.x + padding;
     const innerY = pos.y + padding;
@@ -8543,7 +8620,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const visibleTitle = this.truncateTextToWidth(title, titleMaxWidth, titleSize);
     const visibleCaption = hasCaption ? this.truncateTextToWidth(caption, Math.max(20, pos.width - padding * 2), captionSize) : "";
     let svg = `<g${this.getDataNodeId(node)}>
-    <!-- StatCard Background -->
+    <!-- Stat Background -->
     <rect x="${pos.x}" y="${pos.y}"
           width="${pos.width}" height="${pos.height}"
           rx="8"

package/dist/index.d.cts

@@ -290,8 +290,8 @@ interface IRComponentNode {
 interface IRNodeStyle {
     padding?: string;
     gap?: string;
-    align?: 'left' | 'center' | 'right' | 'justify';
-    justify?: 'start' | 'center' | 'end';
+    justify?: 'start' | 'center' | 'end' | 'stretch' | 'spaceBetween' | 'spaceAround';
+    align?: 'start' | 'center' | 'end';
     background?: string;
 }
 interface IRMeta {
@@ -480,6 +480,19 @@ declare class LayoutEngine {
     private wrapTextToLines;
     private getIntrinsicComponentHeight;
     private getControlLabelOffset;
+    /**
+     * Returns true when a container's width can be calculated from its children
+     * (i.e. it is a horizontal non-stretch stack). False means the container
+     * behaves like `flex-grow:1` and should absorb remaining space.
+     */
+    private containerHasIntrinsicWidth;
+    /**
+     * Returns the natural (intrinsic) width of any node — component or container.
+     * For horizontal non-stretch containers the width is the sum of their children's
+     * intrinsic widths plus gaps, capped at `availableWidth`. All other containers
+     * are assumed to take the full available width (they stretch or grow).
+     */
+    private getIntrinsicWidth;
     private getIntrinsicComponentWidth;
     private calculateChildHeight;
     private calculateChildWidth;
@@ -706,7 +719,7 @@ declare class SVGRenderer {
     protected renderModal(node: IRComponentNode, pos: any): string;
     protected renderList(node: IRComponentNode, pos: any): string;
     protected renderGenericComponent(node: IRComponentNode, pos: any): string;
-    protected renderStatCard(node: IRComponentNode, pos: any): string;
+    protected renderStat(node: IRComponentNode, pos: any): string;
     protected renderImage(node: IRComponentNode, pos: any): string;
     protected renderBreadcrumbs(node: IRComponentNode, pos: any): string;
     protected renderSidebarMenu(node: IRComponentNode, pos: any): string;
@@ -892,9 +905,9 @@ declare class SkeletonSVGRenderer extends SVGRenderer {
      */
     protected renderTopbar(node: IRComponentNode, pos: any): string;
     /**
-     * Render StatCard with gray blocks instead of values
+     * Render Stat with gray blocks instead of values
      */
-    protected renderStatCard(node: IRComponentNode, pos: any): string;
+    protected renderStat(node: IRComponentNode, pos: any): string;
     /**
      * Render icon as gray square instead of hiding it
      */
@@ -1037,7 +1050,7 @@ declare class SketchSVGRenderer extends SVGRenderer {
     /**
      * Render stat card with sketch filter and Comic Sans
      */
-    protected renderStatCard(node: IRComponentNode, pos: any): string;
+    protected renderStat(node: IRComponentNode, pos: any): string;
     /**
      * Render image with sketch filter
      */

package/dist/index.d.ts

@@ -290,8 +290,8 @@ interface IRComponentNode {
 interface IRNodeStyle {
     padding?: string;
     gap?: string;
-    align?: 'left' | 'center' | 'right' | 'justify';
-    justify?: 'start' | 'center' | 'end';
+    justify?: 'start' | 'center' | 'end' | 'stretch' | 'spaceBetween' | 'spaceAround';
+    align?: 'start' | 'center' | 'end';
     background?: string;
 }
 interface IRMeta {
@@ -480,6 +480,19 @@ declare class LayoutEngine {
     private wrapTextToLines;
     private getIntrinsicComponentHeight;
     private getControlLabelOffset;
+    /**
+     * Returns true when a container's width can be calculated from its children
+     * (i.e. it is a horizontal non-stretch stack). False means the container
+     * behaves like `flex-grow:1` and should absorb remaining space.
+     */
+    private containerHasIntrinsicWidth;
+    /**
+     * Returns the natural (intrinsic) width of any node — component or container.
+     * For horizontal non-stretch containers the width is the sum of their children's
+     * intrinsic widths plus gaps, capped at `availableWidth`. All other containers
+     * are assumed to take the full available width (they stretch or grow).
+     */
+    private getIntrinsicWidth;
     private getIntrinsicComponentWidth;
     private calculateChildHeight;
     private calculateChildWidth;
@@ -706,7 +719,7 @@ declare class SVGRenderer {
     protected renderModal(node: IRComponentNode, pos: any): string;
     protected renderList(node: IRComponentNode, pos: any): string;
     protected renderGenericComponent(node: IRComponentNode, pos: any): string;
-    protected renderStatCard(node: IRComponentNode, pos: any): string;
+    protected renderStat(node: IRComponentNode, pos: any): string;
     protected renderImage(node: IRComponentNode, pos: any): string;
     protected renderBreadcrumbs(node: IRComponentNode, pos: any): string;
     protected renderSidebarMenu(node: IRComponentNode, pos: any): string;
@@ -892,9 +905,9 @@ declare class SkeletonSVGRenderer extends SVGRenderer {
      */
     protected renderTopbar(node: IRComponentNode, pos: any): string;
     /**
-     * Render StatCard with gray blocks instead of values
+     * Render Stat with gray blocks instead of values
      */
-    protected renderStatCard(node: IRComponentNode, pos: any): string;
+    protected renderStat(node: IRComponentNode, pos: any): string;
     /**
      * Render icon as gray square instead of hiding it
      */
@@ -1037,7 +1050,7 @@ declare class SketchSVGRenderer extends SVGRenderer {
     /**
      * Render stat card with sketch filter and Comic Sans
      */
-    protected renderStatCard(node: IRComponentNode, pos: any): string;
+    protected renderStat(node: IRComponentNode, pos: any): string;
     /**
      * Render image with sketch filter
      */

package/dist/index.js

@@ -2174,8 +2174,8 @@ var IRStyleSchema = z.object({
 var IRNodeStyleSchema = z.object({
   padding: z.string().optional(),
   gap: z.string().optional(),
-  align: z.enum(["left", "center", "right", "justify"]).optional(),
-  justify: z.enum(["start", "center", "end"]).optional(),
+  justify: z.enum(["start", "center", "end", "stretch", "spaceBetween", "spaceAround"]).optional(),
+  align: z.enum(["start", "center", "end"]).optional(),
   background: z.string().optional()
 });
 var IRMetaSchema = z.object({
@@ -2461,6 +2461,9 @@ ${messages}`);
     if (layoutParams.gap !== void 0) {
       style.gap = String(layoutParams.gap);
     }
+    if (layoutParams.justify !== void 0) {
+      style.justify = layoutParams.justify;
+    }
     if (layoutParams.align !== void 0) {
       style.align = layoutParams.align;
     }
@@ -2542,7 +2545,7 @@ ${messages}`);
       "Label",
       "Image",
       "Card",
-      "StatCard",
+      "Stat",
       "Topbar",
       "Table",
       "Chart",
@@ -3107,8 +3110,9 @@ var LayoutEngine = class {
         }
       });
     } else {
-      const align = node.style.align || "justify";
-      if (align === "justify") {
+      const justify = node.style.justify || "stretch";
+      const crossAlign = node.style.align || "start";
+      if (justify === "stretch") {
         let currentX = x;
         const childWidth = this.calculateChildWidth(children.length, width, gap);
         let stackHeight = 0;
@@ -3130,43 +3134,44 @@ var LayoutEngine = class {
         });
       } else {
         const childWidths = [];
+        const childHeights = [];
         const explicitHeightFlags = [];
-        const blockButtonIndices = /* @__PURE__ */ new Set();
+        const flexIndices = /* @__PURE__ */ new Set();
         let stackHeight = 0;
         children.forEach((childRef, index) => {
           const childNode = this.nodes[childRef.ref];
-          let childWidth = this.getIntrinsicComponentWidth(childNode);
-          let childHeight = this.getComponentHeight();
           const hasExplicitHeight = childNode?.kind === "component" && !!childNode.props.height;
           const hasExplicitWidth = childNode?.kind === "component" && !!childNode.props.width;
           const isBlockButton = childNode?.kind === "component" && childNode.componentType === "Button" && !hasExplicitWidth && this.parseBooleanProp(childNode.props.block, false);
-          if (isBlockButton) {
+          const isFlexContainer = !hasExplicitWidth && childNode?.kind === "container" && !this.containerHasIntrinsicWidth(childNode);
+          let childWidth;
+          if (isBlockButton || isFlexContainer) {
             childWidth = 0;
-            blockButtonIndices.add(index);
+            flexIndices.add(index);
           } else if (hasExplicitWidth) {
             childWidth = Number(childNode.props.width);
-          }
-          if (hasExplicitHeight) {
-            childHeight = Number(childNode.props.height);
+          } else {
+            childWidth = this.getIntrinsicWidth(childNode, width);
           }
           childWidths.push(childWidth);
+          childHeights.push(this.getComponentHeight());
           explicitHeightFlags.push(hasExplicitHeight);
         });
         const totalGapWidth = gap * Math.max(0, children.length - 1);
-        if (blockButtonIndices.size > 0) {
+        if (flexIndices.size > 0) {
           const fixedWidth = childWidths.reduce((sum, w, idx) => {
-            return blockButtonIndices.has(idx) ? sum : sum + w;
+            return flexIndices.has(idx) ? sum : sum + w;
           }, 0);
           const remainingWidth = width - totalGapWidth - fixedWidth;
-          const widthPerBlock = Math.max(1, remainingWidth / blockButtonIndices.size);
-          blockButtonIndices.forEach((index) => {
-            childWidths[index] = widthPerBlock;
+          const widthPerFlex = Math.max(1, remainingWidth / flexIndices.size);
+          flexIndices.forEach((idx) => {
+            childWidths[idx] = widthPerFlex;
           });
         }
         children.forEach((childRef, index) => {
           const childNode = this.nodes[childRef.ref];
-          let childHeight = this.getComponentHeight();
           const childWidth = childWidths[index];
+          let childHeight = this.getComponentHeight();
           if (explicitHeightFlags[index] && childNode?.kind === "component") {
             childHeight = Number(childNode.props.height);
           } else if (childNode?.kind === "container") {
@@ -3174,21 +3179,37 @@ var LayoutEngine = class {
           } else if (childNode?.kind === "component") {
             childHeight = this.getIntrinsicComponentHeight(childNode, childWidth);
           }
+          childHeights[index] = childHeight;
           stackHeight = Math.max(stackHeight, childHeight);
         });
         const totalChildWidth = childWidths.reduce((sum, w) => sum + w, 0);
         const totalContentWidth = totalChildWidth + totalGapWidth;
         let startX = x;
-        if (align === "center") {
+        let dynamicGap = gap;
+        if (justify === "center") {
           startX = x + (width - totalContentWidth) / 2;
-        } else if (align === "right") {
+        } else if (justify === "end") {
           startX = x + width - totalContentWidth;
+        } else if (justify === "spaceBetween") {
+          startX = x;
+          dynamicGap = children.length > 1 ? (width - totalChildWidth) / (children.length - 1) : 0;
+        } else if (justify === "spaceAround") {
+          const spacing = children.length > 0 ? (width - totalChildWidth) / children.length : 0;
+          startX = x + spacing / 2;
+          dynamicGap = spacing;
         }
         let currentX = startX;
         children.forEach((childRef, index) => {
           const childWidth = childWidths[index];
-          this.calculateNode(childRef.ref, currentX, y, childWidth, stackHeight, "stack");
-          currentX += childWidth + gap;
+          const childHeight = childHeights[index];
+          let childY = y;
+          if (crossAlign === "center") {
+            childY = y + Math.round((stackHeight - childHeight) / 2);
+          } else if (crossAlign === "end") {
+            childY = y + stackHeight - childHeight;
+          }
+          this.calculateNode(childRef.ref, currentX, childY, childWidth, childHeight, "stack");
+          currentX += childWidth + dynamicGap;
         });
       }
     }
@@ -3685,7 +3706,7 @@ var LayoutEngine = class {
     if (node.componentType === "Textarea") return 100 + controlLabelOffset;
     if (node.componentType === "Modal") return 300;
     if (node.componentType === "Card") return 120;
-    if (node.componentType === "StatCard") return 120;
+    if (node.componentType === "Stat") return 120;
     if (node.componentType === "Chart" || node.componentType === "ChartPlaceholder") return 250;
     if (node.componentType === "List") {
       const itemsFromProps = String(node.props.items || "").split(",").map((item) => item.trim()).filter(Boolean);
@@ -3711,6 +3732,47 @@ var LayoutEngine = class {
   getControlLabelOffset(label) {
     return label.trim().length > 0 ? 18 : 0;
   }
+  /**
+   * Returns true when a container's width can be calculated from its children
+   * (i.e. it is a horizontal non-stretch stack). False means the container
+   * behaves like `flex-grow:1` and should absorb remaining space.
+   */
+  containerHasIntrinsicWidth(node) {
+    if (node.kind !== "container") return false;
+    return node.containerType === "stack" && String(node.params.direction || "vertical") === "horizontal" && (node.style.justify || "stretch") !== "stretch";
+  }
+  /**
+   * Returns the natural (intrinsic) width of any node — component or container.
+   * For horizontal non-stretch containers the width is the sum of their children's
+   * intrinsic widths plus gaps, capped at `availableWidth`. All other containers
+   * are assumed to take the full available width (they stretch or grow).
+   */
+  getIntrinsicWidth(node, availableWidth) {
+    if (!node) return 120;
+    if (node.kind === "component") {
+      return this.getIntrinsicComponentWidth(node);
+    }
+    if (node.kind === "container") {
+      if (this.containerHasIntrinsicWidth(node)) {
+        const gap = this.resolveSpacing(node.style.gap);
+        const padding = this.resolveSpacing(node.style.padding);
+        const innerAvailable = Math.max(0, availableWidth - padding * 2);
+        const children = node.children ?? [];
+        let total = padding * 2;
+        children.forEach((childRef, idx) => {
+          const child = this.nodes[childRef.ref];
+          total += this.getIntrinsicWidth(child, innerAvailable);
+          if (idx < children.length - 1) total += gap;
+        });
+        return Math.min(total, availableWidth);
+      }
+      return availableWidth;
+    }
+    if (node.kind === "instance") {
+      return availableWidth;
+    }
+    return 120;
+  }
   getIntrinsicComponentWidth(node) {
     if (!node || node.kind !== "component") {
       return 120;
@@ -3736,7 +3798,10 @@ var LayoutEngine = class {
       const density = this.style.density || "normal";
       const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
       const textWidth = this.estimateTextWidth(text, fontSize);
-      return Math.max(60, Math.ceil(textWidth + (paddingX + extraPadding) * 2));
+      const iconName = String(node.props.icon || "").trim();
+      const iconSize = iconName ? Math.round(fontSize * 1.1) : 0;
+      const iconGap = iconName ? 8 : 0;
+      return Math.max(60, Math.ceil(textWidth + iconSize + iconGap + (paddingX + extraPadding) * 2));
     }
     if (node.componentType === "Label" || node.componentType === "Text") {
       const text = String(node.props.text || "");
@@ -3767,7 +3832,7 @@ var LayoutEngine = class {
     if (node.componentType === "Table") {
       return 400;
     }
-    if (node.componentType === "StatCard" || node.componentType === "Card") {
+    if (node.componentType === "Stat" || node.componentType === "Card") {
       return 280;
     }
     if (node.componentType === "SidebarMenu") {
@@ -4823,8 +4888,8 @@ var SVGRenderer = class {
         return this.renderModal(node, pos);
       case "List":
         return this.renderList(node, pos);
-      case "StatCard":
-        return this.renderStatCard(node, pos);
+      case "Stat":
+        return this.renderStat(node, pos);
       case "Image":
         return this.renderImage(node, pos);
       // Icon components
@@ -4870,6 +4935,7 @@ var SVGRenderer = class {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
     const size = String(node.props.size || "md");
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const density = this.ir.project.style.density || "normal";
     const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
     const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
@@ -4915,7 +4981,7 @@ var SVGRenderer = class {
       textX = pos.x + buttonWidth / 2;
       textAnchor = "middle";
     }
-    let svg = `<g${this.getDataNodeId(node)}>
+    let svg = `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <rect x="${pos.x}" y="${buttonY}"
           width="${buttonWidth}" height="${buttonHeight}"
           rx="${radius}"
@@ -4981,6 +5047,7 @@ var SVGRenderer = class {
     const placeholder = String(node.props.placeholder || "");
     const iconLeftName = String(node.props.iconLeft || "").trim();
     const iconRightName = String(node.props.iconRight || "").trim();
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const radius = this.tokens.input.radius;
     const fontSize = this.tokens.input.fontSize;
     const paddingX = this.tokens.input.paddingX;
@@ -4997,7 +5064,7 @@ var SVGRenderer = class {
     const textX = pos.x + (iconLeftSvg ? leftOffset : paddingX);
     const iconColor = this.hexToRgba(this.resolveMutedColor(), 0.8);
     const iconCenterY = controlY + (controlHeight - iconSize) / 2;
-    let svg = `<g${this.getDataNodeId(node)}>`;
+    let svg = `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>`;
     if (label) {
       svg += `
     <text x="${pos.x + paddingX}" y="${this.getControlLabelBaselineY(pos.y)}"
@@ -5566,7 +5633,8 @@ var SVGRenderer = class {
     const fontSize = this.tokens.text.fontSize;
     const lineHeightPx = Math.ceil(fontSize * this.tokens.text.lineHeight);
     const lines = this.wrapTextToLines(text, pos.width, fontSize);
-    const firstLineY = pos.y + fontSize;
+    const totalTextHeight = lines.length * lineHeightPx;
+    const firstLineY = pos.y + Math.round(Math.max(0, (pos.height - totalTextHeight) / 2)) + fontSize;
     const tspans = lines.map(
       (line, index) => `<tspan x="${pos.x}" dy="${index === 0 ? 0 : lineHeightPx}">${this.escapeXml(line)}</tspan>`
     ).join("");
@@ -5579,8 +5647,9 @@ var SVGRenderer = class {
   }
   renderLabel(node, pos) {
     const text = String(node.props.text || "Label");
+    const textY = pos.y + Math.round(pos.height / 2) + 4;
     return `<g${this.getDataNodeId(node)}>
-    <text x="${pos.x}" y="${pos.y + 12}" 
+    <text x="${pos.x}" y="${textY}" 
           font-family="Arial, Helvetica, sans-serif" 
           font-size="12" 
           fill="${this.renderTheme.textMuted}">${this.escapeXml(text)}</text>
@@ -5635,6 +5704,7 @@ var SVGRenderer = class {
     const placeholder = String(node.props.placeholder || "Select...");
     const iconLeftName = String(node.props.iconLeft || "").trim();
     const iconRightName = String(node.props.iconRight || "").trim();
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const labelOffset = this.getControlLabelOffset(label);
     const controlY = pos.y + labelOffset;
     const controlHeight = Math.max(16, pos.height - labelOffset);
@@ -5648,7 +5718,7 @@ var SVGRenderer = class {
     const chevronWidth = 20;
     const iconColor = this.hexToRgba(this.resolveMutedColor(), 0.8);
     const iconCenterY = controlY + (controlHeight - iconSize) / 2;
-    let svg = `<g${this.getDataNodeId(node)}>`;
+    let svg = `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>`;
     if (label) {
       svg += `
     <text x="${pos.x}" y="${this.getControlLabelBaselineY(pos.y)}"
@@ -5697,10 +5767,11 @@ var SVGRenderer = class {
   renderCheckbox(node, pos) {
     const label = String(node.props.label || "Checkbox");
     const checked = String(node.props.checked || "false").toLowerCase() === "true";
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const controlColor = this.resolveControlColor();
     const checkboxSize = 18;
     const checkboxY = pos.y + pos.height / 2 - checkboxSize / 2;
-    return `<g${this.getDataNodeId(node)}>
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <rect x="${pos.x}" y="${checkboxY}" 
           width="${checkboxSize}" height="${checkboxSize}" 
           rx="4" 
@@ -5721,10 +5792,11 @@ var SVGRenderer = class {
   renderRadio(node, pos) {
     const label = String(node.props.label || "Radio");
     const checked = String(node.props.checked || "false").toLowerCase() === "true";
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const controlColor = this.resolveControlColor();
     const radioSize = 16;
     const radioY = pos.y + pos.height / 2 - radioSize / 2;
-    return `<g${this.getDataNodeId(node)}>
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <circle cx="${pos.x + radioSize / 2}" cy="${radioY + radioSize / 2}" 
             r="${radioSize / 2}" 
             fill="${this.renderTheme.cardBg}" 
@@ -5742,11 +5814,12 @@ var SVGRenderer = class {
   renderToggle(node, pos) {
     const label = String(node.props.label || "Toggle");
     const enabled = String(node.props.enabled || "false").toLowerCase() === "true";
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const controlColor = this.resolveControlColor();
     const toggleWidth = 40;
     const toggleHeight = 20;
     const toggleY = pos.y + pos.height / 2 - toggleHeight / 2;
-    return `<g${this.getDataNodeId(node)}>
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <rect x="${pos.x}" y="${toggleY}" 
           width="${toggleWidth}" height="${toggleHeight}" 
           rx="10" 
@@ -6042,7 +6115,7 @@ var SVGRenderer = class {
           text-anchor="middle">${node.componentType}</text>
   </g>`;
   }
-  renderStatCard(node, pos) {
+  renderStat(node, pos) {
     const title = String(node.props.title || "Metric");
     const value = String(node.props.value || "0");
     const rawCaption = String(node.props.caption || "");
@@ -6050,7 +6123,9 @@ var SVGRenderer = class {
     const hasCaption = caption.trim().length > 0;
     const iconName = String(node.props.icon || "").trim();
     const iconSvg = iconName ? getIcon(iconName) : null;
-    const accentColor = this.resolveAccentColor();
+    const variant = String(node.props.variant || "default");
+    const baseAccent = this.resolveAccentColor();
+    const accentColor = variant !== "default" ? this.resolveVariantColor(variant, baseAccent) : baseAccent;
     const padding = this.resolveSpacing(node.style.padding) || 16;
     const innerX = pos.x + padding;
     const innerY = pos.y + padding;
@@ -6074,7 +6149,7 @@ var SVGRenderer = class {
     const visibleTitle = this.truncateTextToWidth(title, titleMaxWidth, titleSize);
     const visibleCaption = hasCaption ? this.truncateTextToWidth(caption, Math.max(20, innerWidth), captionSize) : "";
     let svg = `<g${this.getDataNodeId(node)}>
-    <!-- StatCard Background -->
+    <!-- Stat Background -->
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           rx="8" 
@@ -6711,8 +6786,8 @@ var SVGRenderer = class {
       return false;
     }
     const direction = String(parent.params.direction || "vertical");
-    const align = parent.style.align || "justify";
-    return direction === "horizontal" && align === "justify";
+    const justify = parent.style.justify || "stretch";
+    return direction === "horizontal" && justify === "stretch";
   }
   buildParentContainerIndex() {
     this.parentContainerByChildId.clear();
@@ -7337,9 +7412,9 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
     return svg;
   }
   /**
-   * Render StatCard with gray blocks instead of values
+   * Render Stat with gray blocks instead of values
    */
-  renderStatCard(node, pos) {
+  renderStat(node, pos) {
     const hasIcon = String(node.props.icon || "").trim().length > 0;
     const hasCaption = String(node.props.caption || "").trim().length > 0;
     const iconSize = 20;
@@ -8466,7 +8541,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
   /**
    * Render stat card with sketch filter and Comic Sans
    */
-  renderStatCard(node, pos) {
+  renderStat(node, pos) {
     const title = String(node.props.title || "Metric");
     const value = String(node.props.value || "0");
     const rawCaption = String(node.props.caption || "");
@@ -8474,7 +8549,9 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const hasCaption = caption.trim().length > 0;
     const iconName = String(node.props.icon || "").trim();
     const iconSvg = iconName ? getIcon(iconName) : null;
-    const accentColor = this.resolveAccentColor();
+    const variant = String(node.props.variant || "default");
+    const baseAccent = this.resolveAccentColor();
+    const accentColor = variant !== "default" ? this.resolveVariantColor(variant, baseAccent) : baseAccent;
     const padding = this.resolveSpacing(node.style.padding);
     const innerX = pos.x + padding;
     const innerY = pos.y + padding;
@@ -8497,7 +8574,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const visibleTitle = this.truncateTextToWidth(title, titleMaxWidth, titleSize);
     const visibleCaption = hasCaption ? this.truncateTextToWidth(caption, Math.max(20, pos.width - padding * 2), captionSize) : "";
     let svg = `<g${this.getDataNodeId(node)}>
-    <!-- StatCard Background -->
+    <!-- Stat Background -->
     <rect x="${pos.x}" y="${pos.y}"
           width="${pos.width}" height="${pos.height}"
           rx="8"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wire-dsl/engine",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "WireDSL engine - Parser, IR generator, layout engine, and SVG renderer (browser-safe, pure JS/TS)",
   "type": "module",
   "exports": {
@@ -32,7 +32,7 @@
   "dependencies": {
     "chevrotain": "11.1.1",
     "zod": "4.3.6",
-    "@wire-dsl/language-support": "0.4.0"
+    "@wire-dsl/language-support": "0.6.0"
   },
   "devDependencies": {
     "@types/node": "25.2.0",