flexily 0.2.0 → 0.3.0

package/dist/layout-helpers.js

@@ -6,13 +6,8 @@
  */
 import * as C from "./constants.js";
 import { resolveValue } from "./utils.js";
-// ============================================================================
-// Constants for Edge Indices (avoid magic numbers)
-// ============================================================================
-export const EDGE_LEFT = 0;
-export const EDGE_TOP = 1;
-export const EDGE_RIGHT = 2;
-export const EDGE_BOTTOM = 3;
+// Re-export edge constants (canonical definitions in constants.ts)
+export { EDGE_LEFT, EDGE_TOP, EDGE_RIGHT, EDGE_BOTTOM } from "./constants.js";
 // ============================================================================
 // Helper Functions
 // ============================================================================

package/dist/layout-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout-helpers.js","sourceRoot":"","sources":["../src/layout-helpers.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout-helpers.js","sourceRoot":"","sources":["../src/layout-helpers.ts"],"names":[],"mappings":"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"}

package/dist/layout-zero.js

@@ -1,5 +1,5 @@
 /**
- * Flexture Layout Algorithm — Main Entry Point
+ * Flexily Layout Algorithm — Main Entry Point
  *
  * Core flexbox layout computation. This file contains:
  * - computeLayout(): top-level entry point
@@ -606,8 +606,14 @@ function layoutNode(node, availableWidth, availableHeight, offsetX, offsetY, abs
         // For ALIGN_BASELINE in row direction, we need to know the max baseline first
         // Zero-alloc: store baseline in child.flex.baseline, not a temporary array
         let maxBaseline = 0;
+        // baselineZoneHeight: the effective cross-axis size that non-baseline children
+        // align within when baseline alignment is present. This is max(maxBaseline, maxChildHeight).
+        // Only meaningful when alignItems != ALIGN_BASELINE but some children have alignSelf=baseline.
+        let baselineZoneHeight = 0;
+        const alignItemsIsBaseline = style.alignItems === C.ALIGN_BASELINE;
         if (hasBaselineAlignment && isRow) {
             // First pass: compute each child's baseline and find the maximum
+            let maxChildHeight = 0;
             for (const child of node.children) {
                 if (child.flex.relativeIndex < 0)
                     continue;
@@ -674,8 +680,20 @@ function layoutNode(node, availableWidth, availableHeight, offsetX, offsetY, abs
                     // This is a simplification from CSS spec but acceptable for TUI use cases
                     child.flex.baseline = topMargin + childHeight;
                 }
-                maxBaseline = Math.max(maxBaseline, child.flex.baseline);
+                // Track max child height (including margin) for baseline zone calculation
+                maxChildHeight = Math.max(maxChildHeight, topMargin + childHeight + child.flex.marginB);
+                // When alignItems is baseline, ALL children participate in baseline computation.
+                // When alignItems is NOT baseline, only children with alignSelf=baseline participate.
+                // This matches Yoga's behavior: non-baseline children are positioned within the
+                // "baseline zone" (the effective height determined by baseline-aligned children),
+                // not the full container cross-axis.
+                if (alignItemsIsBaseline || childStyle.alignSelf === C.ALIGN_BASELINE) {
+                    maxBaseline = Math.max(maxBaseline, child.flex.baseline);
+                }
             }
+            // Baseline zone height: the max of maxBaseline and the tallest child.
+            // Non-baseline children are aligned within this zone, not the full container.
+            baselineZoneHeight = Math.max(maxBaseline, maxChildHeight);
         }
         // -----------------------------------------------------------------------
         // PHASE 7a: Estimate Flex Line Cross-Axis Sizes (Tentative)
@@ -709,16 +727,26 @@ function layoutNode(node, availableWidth, availableHeight, offsetX, offsetY, abs
                 else if (crossDim.unit === C.UNIT_PERCENT && !Number.isNaN(crossAxisSize)) {
                     childCross = crossAxisSize * (crossDim.value / 100);
                 }
-                else {
-                    // Auto - use a default or measure. For now, use 0 and let stretch handle it.
-                    childCross = 0;
+                else if (child.hasMeasureFunc()) {
+                    // Auto-sized with measureFunc: get tentative cross size from cached measure.
+                    // Phase 5 already called cachedMeasure, so this is typically a cache hit (no alloc).
+                    const crossMargin = crossMarginStart + crossMarginEnd;
+                    const availCross = Number.isNaN(crossAxisSize) ? Infinity : crossAxisSize - crossMargin;
+                    const mW = isRow ? mainAxisSize : availCross;
+                    const mH = isRow ? availCross : mainAxisSize;
+                    const mWMode = Number.isNaN(mW) ? C.MEASURE_MODE_UNDEFINED : C.MEASURE_MODE_AT_MOST;
+                    const mHMode = Number.isNaN(mH) ? C.MEASURE_MODE_UNDEFINED : C.MEASURE_MODE_AT_MOST;
+                    const measured = child.cachedMeasure(Number.isNaN(mW) ? Infinity : mW, mWMode, Number.isNaN(mH) ? Infinity : mH, mHMode);
+                    if (measured) {
+                        childCross = isRow ? measured.height : measured.width;
+                    }
                 }
                 maxLineCross = Math.max(maxLineCross, childCross + crossMarginStart + crossMarginEnd);
             }
-            // Fallback cross size: use measured max, or divide available space among lines
-            // Guard against NaN/division-by-zero: if crossAxisSize is NaN or numLines is 0, use 0
-            const fallbackCross = numLines > 0 && !Number.isNaN(crossAxisSize) ? crossAxisSize / numLines : 0;
-            const lineCrossSize = maxLineCross > 0 ? maxLineCross : fallbackCross;
+            // Use measured max cross size. If all children are auto-sized (maxLineCross === 0),
+            // use 0 — NOT crossAxisSize/numLines, which would consume all free space and
+            // prevent alignContent from distributing it. Actual sizes are computed in Phase 8.
+            const lineCrossSize = maxLineCross;
             _lineCrossSizes[lineIdx] = lineCrossSize;
             cumulativeCrossOffset += lineCrossSize + crossGap;
         }
@@ -770,6 +798,15 @@ function layoutNode(node, availableWidth, availableHeight, offsetX, offsetY, abs
                             }
                         }
                         break;
+                    case C.ALIGN_SPACE_EVENLY:
+                        // Equal spacing between lines and at edges
+                        if (numLines > 0) {
+                            const gap = freeSpace / (numLines + 1);
+                            for (let i = 0; i < numLines; i++) {
+                                _lineCrossOffsets[i] += gap * (i + 1);
+                            }
+                        }
+                        break;
                     case C.ALIGN_STRETCH:
                         // Distribute extra space evenly among lines
                         if (freeSpace > 0 && numLines > 0) {
@@ -906,6 +943,20 @@ function layoutNode(node, availableWidth, availableHeight, offsetX, offsetY, abs
             if (childStyle.alignSelf !== C.ALIGN_AUTO) {
                 alignment = childStyle.alignSelf;
             }
+            // CSS Alignment spec: aspect-ratio fallback alignment
+            // When a flex item has aspect-ratio and auto cross-axis dimension,
+            // the fallback alignment is flex-start (not stretch). This prevents
+            // stretch from overriding the AR-derived dimension.
+            // Only applies when stretch is inherited (align-self: auto), not explicit.
+            const childCrossDimForAR = isRow ? childStyle.height : childStyle.width;
+            const childCrossIsAutoForAR = childCrossDimForAR.unit === C.UNIT_AUTO || childCrossDimForAR.unit === C.UNIT_UNDEFINED;
+            if (alignment === C.ALIGN_STRETCH &&
+                childStyle.alignSelf === C.ALIGN_AUTO &&
+                !Number.isNaN(childStyle.aspectRatio) &&
+                childStyle.aspectRatio > 0 &&
+                childCrossIsAutoForAR) {
+                alignment = C.ALIGN_FLEX_START;
+            }
             // Cross axis size depends on alignment and child's explicit dimensions
             // IMPORTANT: Resolve percent against parent's cross axis, not child's available
             let childCrossSize;
@@ -928,8 +979,10 @@ function layoutNode(node, availableWidth, availableHeight, offsetX, offsetY, abs
                 childCrossSize = resolveValue(crossDim, crossAxisSize);
             }
             else if (parentHasDefiniteCross && alignment === C.ALIGN_STRETCH) {
-                // Stretch alignment with definite parent cross size - fill the cross axis
-                childCrossSize = crossAxisSize - crossMargin;
+                // Stretch alignment with definite parent cross size - fill the line's cross axis
+                // For wrapping layouts, stretch to line cross size, not full container cross size
+                const lineCross = numLines > 1 && childLineIdx < MAX_FLEX_LINES ? _lineCrossSizes[childLineIdx] : crossAxisSize;
+                childCrossSize = lineCross - crossMargin;
             }
             else {
                 // Non-stretch alignment or no definite cross size - shrink-wrap to content
@@ -954,7 +1007,9 @@ function layoutNode(node, availableWidth, availableHeight, offsetX, offsetY, abs
             // For auto main size children, use flex-computed size if flexGrow > 0,
             // otherwise pass remaining available space for shrink-wrap behavior
             const mainDim = isRow ? childStyle.width : childStyle.height;
-            const mainIsAutoChild = mainDim.unit === C.UNIT_AUTO || mainDim.unit === C.UNIT_UNDEFINED;
+            // A child has definite main size if it has explicit width/height OR non-auto flexBasis
+            const hasDefiniteFlexBasis = childStyle.flexBasis.unit === C.UNIT_POINT || childStyle.flexBasis.unit === C.UNIT_PERCENT;
+            const mainIsAutoChild = (mainDim.unit === C.UNIT_AUTO || mainDim.unit === C.UNIT_UNDEFINED) && !hasDefiniteFlexBasis;
             const hasFlexGrow = cflex.flexGrow > 0;
             // Use flex-computed mainSize for all cases - it includes padding/border as minimum
             // The flex algorithm already computed the proper size based on content/padding/border
@@ -1094,8 +1149,12 @@ function layoutNode(node, availableWidth, availableHeight, offsetX, offsetY, abs
             // Calculate child's RELATIVE position (stored in layout)
             // Yoga behavior: position is rounded locally, size uses absolute edge rounding
             // This ensures sizes are pixel-perfect at document level while positions remain intuitive
-            const childLeft = Math.round(fractionalLeft + posOffsetX);
-            const childTop = Math.round(fractionalTop + posOffsetY);
+            // Yoga 3.x quirk: measureFunc leaf nodes use Math.floor for position rounding,
+            // while explicit-sized children use Math.round. This affects any justify/align mode
+            // that produces fractional offsets (center, space-around, space-evenly).
+            const posRound = shouldMeasure ? Math.floor : Math.round;
+            const childLeft = posRound(fractionalLeft + posOffsetX);
+            const childTop = posRound(fractionalTop + posOffsetY);
             // Check if cross axis is auto-sized (needed for deciding what to pass to layoutNode)
             const crossDimForLayoutCall = isRow ? childStyle.height : childStyle.width;
             const crossIsAutoForLayoutCall = crossDimForLayoutCall.unit === C.UNIT_AUTO || crossDimForLayoutCall.unit === C.UNIT_UNDEFINED;
@@ -1217,7 +1276,17 @@ function layoutNode(node, availableWidth, availableHeight, offsetX, offsetY, abs
             const crossEndIndex = isRow ? 3 : 2; // bottom for row, right for column
             const hasAutoStartMargin = isEdgeAuto(childStyle.margin, crossStartIndex, style.flexDirection, direction);
             const hasAutoEndMargin = isEdgeAuto(childStyle.margin, crossEndIndex, style.flexDirection, direction);
-            const availableCrossSpace = crossAxisSize - finalCrossSize - crossMargin;
+            // When baseline alignment is present (hasBaselineAlignment) and this child is NOT using
+            // baseline alignment, align within the baseline zone instead of the full container.
+            // Yoga behavior: non-baseline children are positioned relative to the effective height
+            // of the baseline group (max of maxBaseline and tallest child), not the container.
+            const useBaselineZone = hasBaselineAlignment &&
+                isRow &&
+                !alignItemsIsBaseline &&
+                alignment !== C.ALIGN_BASELINE &&
+                baselineZoneHeight > 0;
+            const effectiveCrossSize = useBaselineZone ? baselineZoneHeight : crossAxisSize;
+            const availableCrossSpace = effectiveCrossSize - finalCrossSize - crossMargin;
             if (hasAutoStartMargin && hasAutoEndMargin) {
                 // Both auto: center the item
                 // CSS spec: auto margins don't absorb negative free space (clamp to 0)
@@ -1252,11 +1321,14 @@ function layoutNode(node, availableWidth, availableHeight, offsetX, offsetY, abs
                 }
             }
             if (crossOffset > 0) {
+                // Yoga 3.x quirk: measureFunc leaf nodes use Math.floor for cross-axis alignment
+                // offset, matching the main-axis floor rounding behavior
+                const crossRound = shouldMeasure ? Math.floor : Math.round;
                 if (isRow) {
-                    child.layout.top += Math.round(crossOffset);
+                    child.layout.top += crossRound(crossOffset);
                 }
                 else {
-                    child.layout.left += Math.round(crossOffset);
+                    child.layout.left += crossRound(crossOffset);
                 }
             }
             // Position advancement: use the right size depending on Phase 8 behavior.
@@ -1307,45 +1379,62 @@ function layoutNode(node, availableWidth, availableHeight, offsetX, offsetY, abs
             actualUsedMain += childMainSize + totalMainMargin;
         }
         actualUsedMain += totalGaps;
-        if (isRow && style.width.unit !== C.UNIT_POINT && style.width.unit !== C.UNIT_PERCENT) {
+        // Skip main-axis shrink-wrap when aspect ratio determined this dimension
+        const hasAR = !Number.isNaN(aspectRatio) && aspectRatio > 0;
+        if (isRow && style.width.unit !== C.UNIT_POINT && style.width.unit !== C.UNIT_PERCENT && !hasAR) {
             // Auto-width row: shrink-wrap to content
             nodeWidth = actualUsedMain + innerLeft + innerRight;
         }
-        if (!isRow && style.height.unit !== C.UNIT_POINT && style.height.unit !== C.UNIT_PERCENT) {
+        if (!isRow && style.height.unit !== C.UNIT_POINT && style.height.unit !== C.UNIT_PERCENT && !hasAR) {
             // Auto-height column: shrink-wrap to content
             nodeHeight = actualUsedMain + innerTop + innerBottom;
         }
-        // For cross axis, find the max child size
-        // CSS spec: percentage margins resolve against containing block's WIDTH only
-        // Use resolveEdgeValue to respect logical EDGE_START/END
-        let maxCrossSize = 0;
-        for (const child of node.children) {
-            if (child.flex.relativeIndex < 0)
-                continue;
-            const childCross = isRow ? child.layout.height : child.layout.width;
-            const childMargin = isRow
-                ? resolveEdgeValue(child.style.margin, 1, style.flexDirection, contentWidth, direction) +
-                    resolveEdgeValue(child.style.margin, 3, style.flexDirection, contentWidth, direction)
-                : resolveEdgeValue(child.style.margin, 0, style.flexDirection, contentWidth, direction) +
-                    resolveEdgeValue(child.style.margin, 2, style.flexDirection, contentWidth, direction);
-            maxCrossSize = Math.max(maxCrossSize, childCross + childMargin);
+        // For cross axis, compute shrink-wrap size
+        // For multi-line (flex-wrap), sum line cross sizes + cross gaps
+        // For single line, use max child cross size (existing behavior)
+        let totalCrossSize = 0;
+        if (numLines > 1) {
+            // Multi-line: sum line cross sizes + cross gaps between lines
+            for (let i = 0; i < numLines; i++) {
+                totalCrossSize += _lineCrossSizes[i];
+            }
+            totalCrossSize += crossGap * (numLines - 1);
+        }
+        else {
+            // Single line: max child cross size
+            // CSS spec: percentage margins resolve against containing block's WIDTH only
+            // Use resolveEdgeValue to respect logical EDGE_START/END
+            for (const child of node.children) {
+                if (child.flex.relativeIndex < 0)
+                    continue;
+                const childCross = isRow ? child.layout.height : child.layout.width;
+                const childMargin = isRow
+                    ? resolveEdgeValue(child.style.margin, 1, style.flexDirection, contentWidth, direction) +
+                        resolveEdgeValue(child.style.margin, 3, style.flexDirection, contentWidth, direction)
+                    : resolveEdgeValue(child.style.margin, 0, style.flexDirection, contentWidth, direction) +
+                        resolveEdgeValue(child.style.margin, 2, style.flexDirection, contentWidth, direction);
+                totalCrossSize = Math.max(totalCrossSize, childCross + childMargin);
+            }
         }
         // Cross-axis shrink-wrap for auto-sized dimension
         // Only shrink-wrap when the available dimension is NaN (unconstrained)
         // When availableHeight/Width is defined, Yoga uses it for AUTO-sized root nodes
+        // Skip if aspect ratio already determined this dimension (aspect ratio > shrink-wrap)
         if (isRow &&
             style.height.unit !== C.UNIT_POINT &&
             style.height.unit !== C.UNIT_PERCENT &&
-            Number.isNaN(availableHeight)) {
-            // Auto-height row: shrink-wrap to max child height
-            nodeHeight = maxCrossSize + innerTop + innerBottom;
+            Number.isNaN(availableHeight) &&
+            !hasAR) {
+            // Auto-height row: shrink-wrap to total cross size (accounts for multi-line)
+            nodeHeight = totalCrossSize + innerTop + innerBottom;
         }
         if (!isRow &&
             style.width.unit !== C.UNIT_POINT &&
             style.width.unit !== C.UNIT_PERCENT &&
-            Number.isNaN(availableWidth)) {
-            // Auto-width column: shrink-wrap to max child width
-            nodeWidth = maxCrossSize + innerLeft + innerRight;
+            Number.isNaN(availableWidth) &&
+            !hasAR) {
+            // Auto-width column: shrink-wrap to total cross size (accounts for multi-line)
+            nodeWidth = totalCrossSize + innerLeft + innerRight;
         }
     }
     // Re-apply min/max constraints after any shrink-wrap adjustments
@@ -1360,6 +1449,73 @@ function layoutNode(node, availableWidth, availableHeight, offsetX, offsetY, abs
     if (!Number.isNaN(nodeHeight) && nodeHeight < minInnerHeight) {
         nodeHeight = minInnerHeight;
     }
+    // -----------------------------------------------------------------------
+    // PHASE 9b: Re-stretch children after shrink-wrap (Yoga compat)
+    // -----------------------------------------------------------------------
+    // When the parent's cross axis was auto (NaN during Phase 8), children with
+    // stretch alignment were shrink-wrapped to content. Now that the cross size
+    // is known from shrink-wrap, re-layout those children with the definite size.
+    // This matches Yoga's two-pass approach for auto-sized containers.
+    if (Number.isNaN(crossAxisSize) && relativeCount > 0) {
+        const finalCross = isRow ? nodeHeight - innerTop - innerBottom : nodeWidth - innerLeft - innerRight;
+        if (!Number.isNaN(finalCross) && finalCross > 0) {
+            for (const child of node.children) {
+                if (child.flex.relativeIndex < 0)
+                    continue;
+                const cstyle = child.style;
+                // Determine alignment for this child
+                let childAlign = style.alignItems;
+                if (cstyle.alignSelf !== C.ALIGN_AUTO) {
+                    childAlign = cstyle.alignSelf;
+                }
+                // AR fallback: aspect-ratio prevents implicit stretch
+                const cCrossDim = isRow ? cstyle.height : cstyle.width;
+                const cCrossIsAuto = cCrossDim.unit === C.UNIT_AUTO || cCrossDim.unit === C.UNIT_UNDEFINED;
+                if (childAlign === C.ALIGN_STRETCH &&
+                    cstyle.alignSelf === C.ALIGN_AUTO &&
+                    !Number.isNaN(cstyle.aspectRatio) &&
+                    cstyle.aspectRatio > 0 &&
+                    cCrossIsAuto) {
+                    childAlign = C.ALIGN_FLEX_START;
+                }
+                if (childAlign !== C.ALIGN_STRETCH)
+                    continue;
+                if (!cCrossIsAuto)
+                    continue;
+                // Compute child's cross margin
+                const cCrossMargin = isRow
+                    ? resolveEdgeValue(cstyle.margin, 1, style.flexDirection, contentWidth, direction) +
+                        resolveEdgeValue(cstyle.margin, 3, style.flexDirection, contentWidth, direction)
+                    : resolveEdgeValue(cstyle.margin, 0, style.flexDirection, contentWidth, direction) +
+                        resolveEdgeValue(cstyle.margin, 2, style.flexDirection, contentWidth, direction);
+                const stretchedCross = finalCross - cCrossMargin;
+                // Only re-layout if the cross size actually changed
+                const currentCross = isRow ? child.layout.height : child.layout.width;
+                if (Math.round(stretchedCross) <= currentCross)
+                    continue;
+                // Re-layout child with the definite cross size
+                // Save position — layoutNode overwrites layout.left/top
+                const savedLeft = child.layout.left;
+                const savedTop = child.layout.top;
+                const cMarginL = resolveEdgeValue(cstyle.margin, 0, style.flexDirection, contentWidth, direction);
+                const cMarginT = resolveEdgeValue(cstyle.margin, 1, style.flexDirection, contentWidth, direction);
+                const cAbsX = absX + innerLeft + savedLeft - cMarginL;
+                const cAbsY = absY + innerTop + savedTop - cMarginT;
+                const passW = isRow ? child.layout.width : stretchedCross;
+                const passH = isRow ? stretchedCross : child.layout.height;
+                layoutNode(child, passW, passH, savedLeft, savedTop, cAbsX, cAbsY, direction);
+                // Restore position and override cross dimension to stretched size
+                child.layout.left = savedLeft;
+                child.layout.top = savedTop;
+                if (isRow) {
+                    child.layout.height = Math.round(stretchedCross);
+                }
+                else {
+                    child.layout.width = Math.round(stretchedCross);
+                }
+            }
+        }
+    }
     // =========================================================================
     // PHASE 10: Final Output - Set Node Layout
     // =========================================================================