@wire-dsl/engine 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -1498,12 +1498,47 @@ var DEVICE_PRESETS = {
     category: "print",
     description: "A4 portrait at 96 DPI"
   },
-  a4: {
-    name: "Print A4",
-    width: 794,
-    minHeight: 1123,
+  "mobile-landscape": {
+    name: "Mobile Landscape",
+    width: 812,
+    minHeight: 375,
+    category: "mobile",
+    description: "Mobile landscape viewport"
+  },
+  "mobile-min": {
+    name: "Mobile Minimum",
+    width: 375,
+    minHeight: 375,
+    category: "mobile",
+    description: "Mobile minimum viewport"
+  },
+  "desktop-min": {
+    name: "Desktop Minimum",
+    width: 1280,
+    minHeight: 640,
+    category: "desktop",
+    description: "Desktop minimum viewport"
+  },
+  "tablet-landscape": {
+    name: "Tablet Landscape",
+    width: 1024,
+    minHeight: 768,
+    category: "tablet",
+    description: "Tablet landscape viewport"
+  },
+  "tablet-min": {
+    name: "Tablet Minimum",
+    width: 768,
+    minHeight: 384,
+    category: "tablet",
+    description: "Tablet minimum viewport"
+  },
+  "print-landscape": {
+    name: "Print A4 Landscape",
+    width: 1123,
+    minHeight: 794,
     category: "print",
-    description: "A4 alias at 96 DPI"
+    description: "A4 landscape at 96 DPI"
   }
 };
 function resolveDevicePreset(device) {
@@ -2166,25 +2201,53 @@ var LayoutEngine = class {
         });
       } else {
         const childWidths = [];
+        const explicitHeightFlags = [];
+        const blockButtonIndices = /* @__PURE__ */ new Set();
         let stackHeight = 0;
-        children.forEach((childRef) => {
+        children.forEach((childRef, index) => {
           const childNode = this.nodes[childRef.ref];
           let childWidth = this.getIntrinsicComponentWidth(childNode);
           let childHeight = this.getComponentHeight();
-          if (childNode?.kind === "component" && childNode.props.height) {
-            childHeight = Number(childNode.props.height);
-          } else if (childNode?.kind === "component" && childNode.props.width) {
+          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) {
+            childWidth = 0;
+            blockButtonIndices.add(index);
+          } else if (hasExplicitWidth) {
             childWidth = Number(childNode.props.width);
+          }
+          if (hasExplicitHeight) {
+            childHeight = Number(childNode.props.height);
+          }
+          childWidths.push(childWidth);
+          explicitHeightFlags.push(hasExplicitHeight);
+        });
+        const totalGapWidth = gap * Math.max(0, children.length - 1);
+        if (blockButtonIndices.size > 0) {
+          const fixedWidth = childWidths.reduce((sum, w, idx) => {
+            return blockButtonIndices.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;
+          });
+        }
+        children.forEach((childRef, index) => {
+          const childNode = this.nodes[childRef.ref];
+          let childHeight = this.getComponentHeight();
+          const childWidth = childWidths[index];
+          if (explicitHeightFlags[index] && childNode?.kind === "component") {
+            childHeight = Number(childNode.props.height);
           } else if (childNode?.kind === "container") {
             childHeight = this.calculateContainerHeight(childNode, childWidth);
           } else if (childNode?.kind === "component") {
             childHeight = this.getIntrinsicComponentHeight(childNode, childWidth);
           }
-          childWidths.push(childWidth);
           stackHeight = Math.max(stackHeight, childHeight);
         });
         const totalChildWidth = childWidths.reduce((sum, w) => sum + w, 0);
-        const totalGapWidth = gap * Math.max(0, children.length - 1);
         const totalContentWidth = totalChildWidth + totalGapWidth;
         let startX = x;
         if (align === "center") {
@@ -2460,12 +2523,13 @@ var LayoutEngine = class {
   getButtonMetricsForDensity() {
     switch (this.style.density) {
       case "compact":
-        return { fontSize: 12, paddingX: 8 };
-      case "comfortable":
-        return { fontSize: 16, paddingX: 16 };
+        return { fontSize: 12, paddingX: 12 };
       case "normal":
+        return { fontSize: 14, paddingX: 18 };
+      case "comfortable":
+        return { fontSize: 16, paddingX: 24 };
       default:
-        return { fontSize: 14, paddingX: 12 };
+        return { fontSize: 14, paddingX: 18 };
     }
   }
   getHeadingMetricsForDensity(level) {
@@ -2718,6 +2782,15 @@ var LayoutEngine = class {
     }
     return width;
   }
+  parseBooleanProp(value, fallback = false) {
+    if (typeof value === "boolean") return value;
+    if (typeof value === "string") {
+      const normalized = value.toLowerCase().trim();
+      if (normalized === "true") return true;
+      if (normalized === "false") return false;
+    }
+    return fallback;
+  }
   adjustNodeYPositions(nodeId, deltaY) {
     const node = this.nodes[nodeId];
     if (!node) return;
@@ -3359,8 +3432,8 @@ var DENSITY_TOKENS = {
       xl: 12
     },
     button: {
-      paddingX: 8,
-      paddingY: 4,
+      paddingX: 12,
+      paddingY: 6,
       radius: 4,
       fontSize: 12,
       fontWeight: 500
@@ -3407,8 +3480,8 @@ var DENSITY_TOKENS = {
       xl: 24
     },
     button: {
-      paddingX: 12,
-      paddingY: 6,
+      paddingX: 18,
+      paddingY: 9,
       radius: 6,
       fontSize: 14,
       fontWeight: 500
@@ -3455,8 +3528,8 @@ var DENSITY_TOKENS = {
       xl: 32
     },
     button: {
-      paddingX: 16,
-      paddingY: 8,
+      paddingX: 24,
+      paddingY: 12,
       radius: 8,
       fontSize: 16,
       fontWeight: 500
@@ -3527,6 +3600,7 @@ var SVGRenderer = class {
   constructor(ir, layout, options) {
     this.renderedNodeIds = /* @__PURE__ */ new Set();
     this.fontFamily = "system-ui, -apple-system, sans-serif";
+    this.parentContainerByChildId = /* @__PURE__ */ new Map();
     this.ir = ir;
     this.layout = layout;
     this.selectedScreenName = options?.screenName;
@@ -3541,6 +3615,7 @@ var SVGRenderer = class {
     };
     this.renderTheme = THEMES[this.options.theme];
     this.colorResolver = new ColorResolver();
+    this.buildParentContainerIndex();
     if (ir.project.mocks && Object.keys(ir.project.mocks).length > 0) {
       MockDataGenerator.setCustomMocks(ir.project.mocks);
     }
@@ -3744,16 +3819,14 @@ var SVGRenderer = class {
   renderButton(node, pos) {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
+    const fullWidth = this.shouldButtonFillAvailableWidth(node);
     const radius = this.tokens.button.radius;
     const fontSize = this.tokens.button.fontSize;
     const fontWeight = this.tokens.button.fontWeight;
     const paddingX = this.tokens.button.paddingX;
     const paddingY = this.tokens.button.paddingY;
     const idealTextWidth = this.estimateTextWidth(text, fontSize);
-    const buttonWidth = this.clampControlWidth(
-      Math.max(Math.ceil(idealTextWidth + paddingX * 2), 60),
-      pos.width
-    );
+    const buttonWidth = fullWidth ? Math.max(1, pos.width) : this.clampControlWidth(Math.max(Math.ceil(idealTextWidth + paddingX * 2), 60), pos.width);
     const buttonHeight = fontSize + paddingY * 2;
     const availableTextWidth = Math.max(0, buttonWidth - paddingX * 2);
     const visibleText = this.truncateTextToWidth(text, availableTextWidth, fontSize);
@@ -5266,6 +5339,27 @@ var SVGRenderer = class {
     }
     return fallback;
   }
+  shouldButtonFillAvailableWidth(node) {
+    if (this.parseBooleanProp(node.props.block, false)) {
+      return true;
+    }
+    const parent = this.parentContainerByChildId.get(node.id);
+    if (!parent || parent.containerType !== "stack") {
+      return false;
+    }
+    const direction = String(parent.params.direction || "vertical");
+    const align = parent.style.align || "justify";
+    return direction === "horizontal" && align === "justify";
+  }
+  buildParentContainerIndex() {
+    this.parentContainerByChildId.clear();
+    Object.values(this.ir.project.nodes).forEach((node) => {
+      if (node.kind !== "container") return;
+      node.children.forEach((childRef) => {
+        this.parentContainerByChildId.set(childRef.ref, node);
+      });
+    });
+  }
   escapeXml(text) {
     return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
   }
@@ -5301,12 +5395,13 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
   renderButton(node, pos) {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
+    const fullWidth = this.shouldButtonFillAvailableWidth(node);
     const radius = this.tokens.button.radius;
     const fontSize = this.tokens.button.fontSize;
     const paddingX = this.tokens.button.paddingX;
     const paddingY = this.tokens.button.paddingY;
     const textWidth = text.length * fontSize * 0.6;
-    const buttonWidth = this.clampControlWidth(Math.max(textWidth + paddingX * 2, 60), pos.width);
+    const buttonWidth = fullWidth ? Math.max(1, pos.width) : this.clampControlWidth(Math.max(textWidth + paddingX * 2, 60), pos.width);
     const buttonHeight = fontSize + paddingY * 2;
     const semanticBase = this.getSemanticVariantColor(variant);
     const hasExplicitVariantColor = semanticBase !== void 0 || this.colorResolver.hasColor(variant);
@@ -5951,13 +6046,14 @@ var SketchSVGRenderer = class extends SVGRenderer {
   renderButton(node, pos) {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
+    const fullWidth = this.shouldButtonFillAvailableWidth(node);
     const radius = this.tokens.button.radius;
     const fontSize = this.tokens.button.fontSize;
     const fontWeight = this.tokens.button.fontWeight;
     const paddingX = this.tokens.button.paddingX;
     const paddingY = this.tokens.button.paddingY;
     const idealTextWidth = text.length * fontSize * 0.6;
-    const buttonWidth = this.clampControlWidth(Math.max(idealTextWidth + paddingX * 2, 60), pos.width);
+    const buttonWidth = fullWidth ? Math.max(1, pos.width) : this.clampControlWidth(Math.max(idealTextWidth + paddingX * 2, 60), pos.width);
     const buttonHeight = fontSize + paddingY * 2;
     const availableTextWidth = Math.max(0, buttonWidth - paddingX * 2);
     const visibleText = this.truncateTextToWidth(text, availableTextWidth, fontSize);

package/dist/index.d.cts

@@ -408,6 +408,7 @@ declare class LayoutEngine {
     private calculateChildHeight;
     private calculateChildWidth;
     private estimateTextWidth;
+    private parseBooleanProp;
     private adjustNodeYPositions;
 }
 declare function calculateLayout(ir: IRContract): LayoutResult;
@@ -561,6 +562,7 @@ declare class SVGRenderer {
     protected renderedNodeIds: Set<string>;
     protected colorResolver: ColorResolver;
     protected fontFamily: string;
+    private parentContainerByChildId;
     constructor(ir: IRContract, layout: LayoutResult, options?: SVGRenderOptions);
     /**
      * Get list of available screens in the project
@@ -691,6 +693,8 @@ declare class SVGRenderer {
         };
     };
     protected parseBooleanProp(value: unknown, fallback?: boolean): boolean;
+    protected shouldButtonFillAvailableWidth(node: IRComponentNode): boolean;
+    private buildParentContainerIndex;
     protected escapeXml(text: string): string;
     /**
      * Get data-node-id attribute string for SVG elements

package/dist/index.d.ts

@@ -408,6 +408,7 @@ declare class LayoutEngine {
     private calculateChildHeight;
     private calculateChildWidth;
     private estimateTextWidth;
+    private parseBooleanProp;
     private adjustNodeYPositions;
 }
 declare function calculateLayout(ir: IRContract): LayoutResult;
@@ -561,6 +562,7 @@ declare class SVGRenderer {
     protected renderedNodeIds: Set<string>;
     protected colorResolver: ColorResolver;
     protected fontFamily: string;
+    private parentContainerByChildId;
     constructor(ir: IRContract, layout: LayoutResult, options?: SVGRenderOptions);
     /**
      * Get list of available screens in the project
@@ -691,6 +693,8 @@ declare class SVGRenderer {
         };
     };
     protected parseBooleanProp(value: unknown, fallback?: boolean): boolean;
+    protected shouldButtonFillAvailableWidth(node: IRComponentNode): boolean;
+    private buildParentContainerIndex;
     protected escapeXml(text: string): string;
     /**
      * Get data-node-id attribute string for SVG elements

package/dist/index.js

@@ -1449,12 +1449,47 @@ var DEVICE_PRESETS = {
     category: "print",
     description: "A4 portrait at 96 DPI"
   },
-  a4: {
-    name: "Print A4",
-    width: 794,
-    minHeight: 1123,
+  "mobile-landscape": {
+    name: "Mobile Landscape",
+    width: 812,
+    minHeight: 375,
+    category: "mobile",
+    description: "Mobile landscape viewport"
+  },
+  "mobile-min": {
+    name: "Mobile Minimum",
+    width: 375,
+    minHeight: 375,
+    category: "mobile",
+    description: "Mobile minimum viewport"
+  },
+  "desktop-min": {
+    name: "Desktop Minimum",
+    width: 1280,
+    minHeight: 640,
+    category: "desktop",
+    description: "Desktop minimum viewport"
+  },
+  "tablet-landscape": {
+    name: "Tablet Landscape",
+    width: 1024,
+    minHeight: 768,
+    category: "tablet",
+    description: "Tablet landscape viewport"
+  },
+  "tablet-min": {
+    name: "Tablet Minimum",
+    width: 768,
+    minHeight: 384,
+    category: "tablet",
+    description: "Tablet minimum viewport"
+  },
+  "print-landscape": {
+    name: "Print A4 Landscape",
+    width: 1123,
+    minHeight: 794,
     category: "print",
-    description: "A4 alias at 96 DPI"
+    description: "A4 landscape at 96 DPI"
   }
 };
 function resolveDevicePreset(device) {
@@ -2117,25 +2152,53 @@ var LayoutEngine = class {
         });
       } else {
         const childWidths = [];
+        const explicitHeightFlags = [];
+        const blockButtonIndices = /* @__PURE__ */ new Set();
         let stackHeight = 0;
-        children.forEach((childRef) => {
+        children.forEach((childRef, index) => {
           const childNode = this.nodes[childRef.ref];
           let childWidth = this.getIntrinsicComponentWidth(childNode);
           let childHeight = this.getComponentHeight();
-          if (childNode?.kind === "component" && childNode.props.height) {
-            childHeight = Number(childNode.props.height);
-          } else if (childNode?.kind === "component" && childNode.props.width) {
+          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) {
+            childWidth = 0;
+            blockButtonIndices.add(index);
+          } else if (hasExplicitWidth) {
             childWidth = Number(childNode.props.width);
+          }
+          if (hasExplicitHeight) {
+            childHeight = Number(childNode.props.height);
+          }
+          childWidths.push(childWidth);
+          explicitHeightFlags.push(hasExplicitHeight);
+        });
+        const totalGapWidth = gap * Math.max(0, children.length - 1);
+        if (blockButtonIndices.size > 0) {
+          const fixedWidth = childWidths.reduce((sum, w, idx) => {
+            return blockButtonIndices.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;
+          });
+        }
+        children.forEach((childRef, index) => {
+          const childNode = this.nodes[childRef.ref];
+          let childHeight = this.getComponentHeight();
+          const childWidth = childWidths[index];
+          if (explicitHeightFlags[index] && childNode?.kind === "component") {
+            childHeight = Number(childNode.props.height);
           } else if (childNode?.kind === "container") {
             childHeight = this.calculateContainerHeight(childNode, childWidth);
           } else if (childNode?.kind === "component") {
             childHeight = this.getIntrinsicComponentHeight(childNode, childWidth);
           }
-          childWidths.push(childWidth);
           stackHeight = Math.max(stackHeight, childHeight);
         });
         const totalChildWidth = childWidths.reduce((sum, w) => sum + w, 0);
-        const totalGapWidth = gap * Math.max(0, children.length - 1);
         const totalContentWidth = totalChildWidth + totalGapWidth;
         let startX = x;
         if (align === "center") {
@@ -2411,12 +2474,13 @@ var LayoutEngine = class {
   getButtonMetricsForDensity() {
     switch (this.style.density) {
       case "compact":
-        return { fontSize: 12, paddingX: 8 };
-      case "comfortable":
-        return { fontSize: 16, paddingX: 16 };
+        return { fontSize: 12, paddingX: 12 };
       case "normal":
+        return { fontSize: 14, paddingX: 18 };
+      case "comfortable":
+        return { fontSize: 16, paddingX: 24 };
       default:
-        return { fontSize: 14, paddingX: 12 };
+        return { fontSize: 14, paddingX: 18 };
     }
   }
   getHeadingMetricsForDensity(level) {
@@ -2669,6 +2733,15 @@ var LayoutEngine = class {
     }
     return width;
   }
+  parseBooleanProp(value, fallback = false) {
+    if (typeof value === "boolean") return value;
+    if (typeof value === "string") {
+      const normalized = value.toLowerCase().trim();
+      if (normalized === "true") return true;
+      if (normalized === "false") return false;
+    }
+    return fallback;
+  }
   adjustNodeYPositions(nodeId, deltaY) {
     const node = this.nodes[nodeId];
     if (!node) return;
@@ -3310,8 +3383,8 @@ var DENSITY_TOKENS = {
       xl: 12
     },
     button: {
-      paddingX: 8,
-      paddingY: 4,
+      paddingX: 12,
+      paddingY: 6,
       radius: 4,
       fontSize: 12,
       fontWeight: 500
@@ -3358,8 +3431,8 @@ var DENSITY_TOKENS = {
       xl: 24
     },
     button: {
-      paddingX: 12,
-      paddingY: 6,
+      paddingX: 18,
+      paddingY: 9,
       radius: 6,
       fontSize: 14,
       fontWeight: 500
@@ -3406,8 +3479,8 @@ var DENSITY_TOKENS = {
       xl: 32
     },
     button: {
-      paddingX: 16,
-      paddingY: 8,
+      paddingX: 24,
+      paddingY: 12,
       radius: 8,
       fontSize: 16,
       fontWeight: 500
@@ -3478,6 +3551,7 @@ var SVGRenderer = class {
   constructor(ir, layout, options) {
     this.renderedNodeIds = /* @__PURE__ */ new Set();
     this.fontFamily = "system-ui, -apple-system, sans-serif";
+    this.parentContainerByChildId = /* @__PURE__ */ new Map();
     this.ir = ir;
     this.layout = layout;
     this.selectedScreenName = options?.screenName;
@@ -3492,6 +3566,7 @@ var SVGRenderer = class {
     };
     this.renderTheme = THEMES[this.options.theme];
     this.colorResolver = new ColorResolver();
+    this.buildParentContainerIndex();
     if (ir.project.mocks && Object.keys(ir.project.mocks).length > 0) {
       MockDataGenerator.setCustomMocks(ir.project.mocks);
     }
@@ -3695,16 +3770,14 @@ var SVGRenderer = class {
   renderButton(node, pos) {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
+    const fullWidth = this.shouldButtonFillAvailableWidth(node);
     const radius = this.tokens.button.radius;
     const fontSize = this.tokens.button.fontSize;
     const fontWeight = this.tokens.button.fontWeight;
     const paddingX = this.tokens.button.paddingX;
     const paddingY = this.tokens.button.paddingY;
     const idealTextWidth = this.estimateTextWidth(text, fontSize);
-    const buttonWidth = this.clampControlWidth(
-      Math.max(Math.ceil(idealTextWidth + paddingX * 2), 60),
-      pos.width
-    );
+    const buttonWidth = fullWidth ? Math.max(1, pos.width) : this.clampControlWidth(Math.max(Math.ceil(idealTextWidth + paddingX * 2), 60), pos.width);
     const buttonHeight = fontSize + paddingY * 2;
     const availableTextWidth = Math.max(0, buttonWidth - paddingX * 2);
     const visibleText = this.truncateTextToWidth(text, availableTextWidth, fontSize);
@@ -5217,6 +5290,27 @@ var SVGRenderer = class {
     }
     return fallback;
   }
+  shouldButtonFillAvailableWidth(node) {
+    if (this.parseBooleanProp(node.props.block, false)) {
+      return true;
+    }
+    const parent = this.parentContainerByChildId.get(node.id);
+    if (!parent || parent.containerType !== "stack") {
+      return false;
+    }
+    const direction = String(parent.params.direction || "vertical");
+    const align = parent.style.align || "justify";
+    return direction === "horizontal" && align === "justify";
+  }
+  buildParentContainerIndex() {
+    this.parentContainerByChildId.clear();
+    Object.values(this.ir.project.nodes).forEach((node) => {
+      if (node.kind !== "container") return;
+      node.children.forEach((childRef) => {
+        this.parentContainerByChildId.set(childRef.ref, node);
+      });
+    });
+  }
   escapeXml(text) {
     return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
   }
@@ -5252,12 +5346,13 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
   renderButton(node, pos) {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
+    const fullWidth = this.shouldButtonFillAvailableWidth(node);
     const radius = this.tokens.button.radius;
     const fontSize = this.tokens.button.fontSize;
     const paddingX = this.tokens.button.paddingX;
     const paddingY = this.tokens.button.paddingY;
     const textWidth = text.length * fontSize * 0.6;
-    const buttonWidth = this.clampControlWidth(Math.max(textWidth + paddingX * 2, 60), pos.width);
+    const buttonWidth = fullWidth ? Math.max(1, pos.width) : this.clampControlWidth(Math.max(textWidth + paddingX * 2, 60), pos.width);
     const buttonHeight = fontSize + paddingY * 2;
     const semanticBase = this.getSemanticVariantColor(variant);
     const hasExplicitVariantColor = semanticBase !== void 0 || this.colorResolver.hasColor(variant);
@@ -5902,13 +5997,14 @@ var SketchSVGRenderer = class extends SVGRenderer {
   renderButton(node, pos) {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
+    const fullWidth = this.shouldButtonFillAvailableWidth(node);
     const radius = this.tokens.button.radius;
     const fontSize = this.tokens.button.fontSize;
     const fontWeight = this.tokens.button.fontWeight;
     const paddingX = this.tokens.button.paddingX;
     const paddingY = this.tokens.button.paddingY;
     const idealTextWidth = text.length * fontSize * 0.6;
-    const buttonWidth = this.clampControlWidth(Math.max(idealTextWidth + paddingX * 2, 60), pos.width);
+    const buttonWidth = fullWidth ? Math.max(1, pos.width) : this.clampControlWidth(Math.max(idealTextWidth + paddingX * 2, 60), pos.width);
     const buttonHeight = fontSize + paddingY * 2;
     const availableTextWidth = Math.max(0, buttonWidth - paddingX * 2);
     const visibleText = this.truncateTextToWidth(text, availableTextWidth, fontSize);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wire-dsl/engine",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "WireDSL engine - Parser, IR generator, layout engine, and SVG renderer (browser-safe, pure JS/TS)",
   "type": "module",
   "exports": {