@wire-dsl/engine 0.5.0 → 0.6.0

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;
     }
@@ -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;
         });
       }
     }
@@ -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;
@@ -5617,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("");
@@ -5630,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>
@@ -6768,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();

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;

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;

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;
     }
@@ -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;
         });
       }
     }
@@ -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;
@@ -5571,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("");
@@ -5584,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>
@@ -6722,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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wire-dsl/engine",
-  "version": "0.5.0",
+  "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.5.0"
+    "@wire-dsl/language-support": "0.6.0"
   },
   "devDependencies": {
     "@types/node": "25.2.0",