flexily 0.2.0 → 0.3.1

package/src/layout-zero.ts

@@ -37,7 +37,6 @@ export { markSubtreeLayoutSeen, countNodes } from "./layout-traversal.js"
 export {
   layoutNodeCalls,
   measureNodeCalls,
-  resolveEdgeCalls,
   layoutSizingCalls,
   layoutPositioningCalls,
   layoutCacheHits,
@@ -52,6 +51,7 @@ import {
   isRowDirection,
   isReverseDirection,
   resolveEdgeValue,
+  resolvePositionEdge,
   isEdgeAuto,
   resolveEdgeBorderValue,
 } from "./layout-helpers.js"
@@ -73,6 +73,8 @@ import {
   _lineItemSpacings,
   breakIntoLines,
   distributeFlexSpaceForLine,
+  enterLayout,
+  exitLayout,
 } from "./layout-flex-lines.js"
 
 /**
@@ -84,12 +86,19 @@ export function computeLayout(
   availableHeight: number,
   direction: number = C.DIRECTION_LTR,
 ): void {
-  resetLayoutStats()
-  getTrace()?.resetCounter()
-  // Clear layout cache from previous pass (important for correct layout after tree changes)
-  root.resetLayoutCache()
-  // Pass absolute position (0,0) for root node - used for Yoga-compatible edge rounding
-  layoutNode(root, availableWidth, availableHeight, 0, 0, 0, 0, direction)
+  // Save line state if re-entrant (nested calculateLayout from measureFunc)
+  const saved = enterLayout()
+  try {
+    resetLayoutStats()
+    getTrace()?.resetCounter()
+    // Clear layout cache from previous pass (important for correct layout after tree changes)
+    root.resetLayoutCache()
+    // Pass absolute position (0,0) for root node - used for Yoga-compatible edge rounding
+    layoutNode(root, availableWidth, availableHeight, 0, 0, 0, 0, direction)
+  } finally {
+    // Restore line state for outer pass (no-op at depth 0)
+    exitLayout(saved)
+  }
 }
 
 /**
@@ -153,7 +162,9 @@ function layoutNode(
     !node.isDirty() &&
     Object.is(flex.lastAvailW, availableWidth) &&
     Object.is(flex.lastAvailH, availableHeight) &&
-    flex.lastDir === direction
+    flex.lastDir === direction &&
+    flex.lastAbsX === absX &&
+    flex.lastAbsY === absY
   ) {
     // Constraints unchanged - just update position based on offset delta
     _t?.fingerprintHit(_tn, availableWidth, availableHeight)
@@ -175,6 +186,8 @@ function layoutNode(
     sameW: Object.is(flex.lastAvailW, availableWidth),
     sameH: Object.is(flex.lastAvailH, availableHeight),
     sameDir: flex.lastDir === direction,
+    sameAbsX: flex.lastAbsX === absX,
+    sameAbsY: flex.lastAbsY === absY,
   })
 
   // ============================================================================
@@ -278,10 +291,13 @@ function layoutNode(
   // This ensures children's absolute positions include parent's position offset
   let parentPosOffsetX = 0
   let parentPosOffsetY = 0
-  if (style.positionType === C.POSITION_TYPE_STATIC || style.positionType === C.POSITION_TYPE_RELATIVE) {
-    const leftPos = style.position[0]
+  // CSS spec: position:static ignores insets (top/left/right/bottom).
+  // Only position:relative applies insets as offsets from normal flow position.
+  if (style.positionType === C.POSITION_TYPE_RELATIVE) {
+    // Resolve logical EDGE_START/EDGE_END to physical left/right based on direction
+    const leftPos = resolvePositionEdge(style.position, 0, direction)
     const topPos = style.position[1]
-    const rightPos = style.position[2]
+    const rightPos = resolvePositionEdge(style.position, 2, direction)
     const bottomPos = style.position[3]
 
     if (leftPos.unit !== C.UNIT_UNDEFINED) {
@@ -445,29 +461,52 @@ function layoutNode(
         baseSize = sizeVal.value
       } else if (sizeVal.unit === C.UNIT_PERCENT) {
         baseSize = Number.isNaN(mainAxisSize) ? 0 : mainAxisSize * (sizeVal.value / 100)
-      } else if (child.hasMeasureFunc() && childStyle.flexGrow === 0) {
-        // For auto-sized children with measureFunc but no flexGrow,
-        // pre-measure to get intrinsic size for justify-content calculation
-        // Use cached margins
+      } else if (child.hasMeasureFunc()) {
+        // For auto-sized children with measureFunc,
+        // pre-measure to get intrinsic content size as flex base size.
+        // CSS spec section 9.2: flex base size is content-based regardless of flexGrow.
+        //
+        // When flexGrow > 0, measure UNCONSTRAINED on main axis to get max-content
+        // size. This ensures proportional distribution based on content (e.g., two
+        // text nodes with widths 10 and 20 get proportional shares of free space).
+        // When flexGrow === 0, measure AT_MOST container (original behavior for
+        // justify-content calculation).
         const crossMargin = isRow ? cflex.marginT + cflex.marginB : cflex.marginL + cflex.marginR
         const availCross = crossAxisSize - crossMargin
-        // Use cached measure to avoid redundant calls within a layout pass
         // Measure function takes PHYSICAL (width, height), not logical (main, cross).
         // For row: main=width, cross=height. For column: main=height, cross=width.
-        const mW = isRow ? mainAxisSize : availCross
-        const mH = isRow ? availCross : mainAxisSize
+        const wantMaxContent = childStyle.flexGrow > 0
+        const mW = isRow
+          ? wantMaxContent
+            ? Infinity
+            : Number.isNaN(mainAxisSize)
+              ? Infinity
+              : mainAxisSize
+          : Number.isNaN(availCross)
+            ? Infinity
+            : availCross
+        const mH = isRow
+          ? Number.isNaN(availCross)
+            ? Infinity
+            : availCross
+          : wantMaxContent
+            ? Infinity
+            : Number.isNaN(mainAxisSize)
+              ? Infinity
+              : mainAxisSize
         const mWMode = isRow
-          ? C.MEASURE_MODE_AT_MOST
+          ? wantMaxContent
+            ? C.MEASURE_MODE_UNDEFINED
+            : C.MEASURE_MODE_AT_MOST
           : Number.isNaN(availCross)
             ? C.MEASURE_MODE_UNDEFINED
             : C.MEASURE_MODE_AT_MOST
-        const mHMode = isRow ? 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,
-        )!
+        const mHMode = isRow
+          ? C.MEASURE_MODE_UNDEFINED
+          : wantMaxContent
+            ? C.MEASURE_MODE_UNDEFINED
+            : C.MEASURE_MODE_AT_MOST
+        const measured = child.cachedMeasure(mW, mWMode, mH, mHMode)!
         baseSize = isRow ? measured.width : measured.height
       } else if (child.children.length > 0) {
         // For auto-sized children WITH children but no measureFunc,
@@ -478,8 +517,10 @@ function layoutNode(
         const cached = child.getCachedLayout(sizingW, sizingH)
         if (cached) {
           incLayoutCacheHits()
+          _t?.cacheHit(_tn, sizingW, sizingH, cached.width, cached.height)
           baseSize = isRow ? cached.width : cached.height
         } else {
+          _t?.cacheMiss(_tn, sizingW, sizingH)
           // Use measureNode for sizing-only pass (faster than full layoutNode)
           // Save layout before measureNode — it overwrites node.layout.width/height
           // with intrinsic measurements (unconstrained widths -> text doesn't wrap ->
@@ -487,11 +528,12 @@ function layoutNode(
           // in Phase 9 would skip re-computation and preserve the corrupted values.
           const savedW = child.layout.width
           const savedH = child.layout.height
-          measureNode(child, sizingW, sizingH)
+          measureNode(child, sizingW, sizingH, direction)
           const measuredW = child.layout.width
           const measuredH = child.layout.height
           child.layout.width = savedW
           child.layout.height = savedH
+          _t?.measureSaveRestore(_tn, savedW, savedH, measuredW, measuredH)
           baseSize = isRow ? measuredW : measuredH
           // Cache the result for potential reuse
           child.setCachedLayout(sizingW, sizingH, measuredW, measuredH)
@@ -529,8 +571,16 @@ function layoutNode(
     // below content size. Yoga defaults flexShrink to 0, preventing this. For
     // overflow:hidden/scroll children, ensure flexShrink >= 1 so they participate
     // in negative free space distribution (matching CSS behavior).
-    cflex.flexShrink =
-      childStyle.overflow !== C.OVERFLOW_VISIBLE ? Math.max(childStyle.flexShrink, 1) : childStyle.flexShrink
+    //
+    // Measured items with flexGrow > 0 use max-content as base size (CSS section 9.2).
+    // When their total base sizes exceed the container, they must be shrinkable so
+    // the flex algorithm can distribute negative free space. Without this, a single
+    // flexGrow text node whose content exceeds the container would overflow instead
+    // of filling the remaining space.
+    let shrink = childStyle.flexShrink
+    if (childStyle.overflow !== C.OVERFLOW_VISIBLE) shrink = Math.max(shrink, 1)
+    if (child.hasMeasureFunc() && childStyle.flexGrow > 0) shrink = Math.max(shrink, 1)
+    cflex.flexShrink = shrink
 
     // Store base and main size (start from base size - distribution happens from here)
     cflex.baseSize = baseSize
@@ -722,9 +772,15 @@ function layoutNode(
     // 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
         const childStyle = child.style
@@ -760,20 +816,23 @@ function layoutNode(
           const cached = child.getCachedLayout(child.flex.mainSize, NaN)
           if (cached) {
             incLayoutCacheHits()
+            _t?.cacheHit(_tn, child.flex.mainSize, NaN, cached.width, cached.height)
             childWidth = cached.width
             childHeight = cached.height
           } else {
+            _t?.cacheMiss(_tn, child.flex.mainSize, NaN)
             // Use measureNode for sizing-only pass (faster than full layoutNode)
             // Save layout before measureNode — it overwrites node.layout.width/height
             // with intrinsic measurements. Without save/restore, layoutNode's fingerprint
             // check in Phase 9 would skip re-computation and preserve corrupted values.
             const savedW = child.layout.width
             const savedH = child.layout.height
-            measureNode(child, child.flex.mainSize, NaN)
+            measureNode(child, child.flex.mainSize, NaN, direction)
             childWidth = child.layout.width
             childHeight = child.layout.height
             child.layout.width = savedW
             child.layout.height = savedH
+            _t?.measureSaveRestore(_tn, savedW, savedH, childWidth, childHeight)
             child.setCachedLayout(child.flex.mainSize, NaN, childWidth, childHeight)
           }
         }
@@ -789,8 +848,23 @@ function layoutNode(
           // 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)
     }
 
     // -----------------------------------------------------------------------
@@ -827,16 +901,49 @@ function layoutNode(
           childCross = crossDim.value
         } 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
+          // Use child's resolved mainSize (from flex distribution) instead of parent's
+          // mainAxisSize. After Phase 6a, child.flex.mainSize may be smaller than
+          // mainAxisSize (e.g., due to wrapping). Measuring at parent width would
+          // underestimate text wrapping height (fewer lines → shorter cross size).
+          const childMainSize = child.flex.mainSize
+          const mW = isRow ? childMainSize : availCross
+          const mH = isRow ? availCross : childMainSize
+          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
+          }
+        } else if (child.children.length > 0) {
+          // Auto-sized container children (no measureFunc, has children):
+          // Compute intrinsic cross-axis size by measuring with unconstrained
+          // dimensions. This gives the shrink-wrap size, which is what we need
+          // for line cross-size estimation. Passing NaN for both axes ensures
+          // measureNode returns the content-determined size rather than
+          // filling the available space.
+          const savedW = child.layout.width
+          const savedH = child.layout.height
+          measureNode(child, NaN, NaN, direction)
+          childCross = isRow ? child.layout.height : child.layout.width
+          child.layout.width = savedW
+          child.layout.height = savedH
         }
         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
     }
@@ -855,62 +962,89 @@ function layoutNode(
       const freeSpace = crossAxisSize - totalLineCrossSize
       const alignContent = style.alignContent
 
-      // Reset offsets based on alignContent
-      if (freeSpace > 0 || alignContent === C.ALIGN_STRETCH) {
-        switch (alignContent) {
-          case C.ALIGN_FLEX_END:
-            // Lines packed at end
+      // Apply alignContent offset based on free space.
+      // flex-end and center apply with both positive and negative free space.
+      // space-between/around/evenly only distribute with positive free space;
+      // with negative space they collapse to flex-start or center (CSS spec).
+      // stretch only expands lines with positive free space.
+      switch (alignContent) {
+        case C.ALIGN_FLEX_END:
+          // Lines packed at end (works with negative free space too — shifts lines up)
+          for (let i = 0; i < numLines; i++) {
+            _lineCrossOffsets[i]! += freeSpace
+          }
+          break
+
+        case C.ALIGN_CENTER:
+          // Lines centered (works with negative free space — equal overflow both sides)
+          {
+            const centerOffset = freeSpace / 2
             for (let i = 0; i < numLines; i++) {
-              _lineCrossOffsets[i]! += freeSpace
+              _lineCrossOffsets[i]! += centerOffset
             }
-            break
+          }
+          break
 
-          case C.ALIGN_CENTER:
-            // Lines centered
-            {
-              const centerOffset = freeSpace / 2
-              for (let i = 0; i < numLines; i++) {
-                _lineCrossOffsets[i]! += centerOffset
-              }
+        case C.ALIGN_SPACE_BETWEEN:
+          // First line at start, last at end, evenly distributed
+          // With negative free space: collapses to flex-start (no adjustment)
+          if (freeSpace > 0 && numLines > 1) {
+            const gap = freeSpace / (numLines - 1)
+            for (let i = 1; i < numLines; i++) {
+              _lineCrossOffsets[i]! += gap * i
             }
-            break
+          }
+          break
 
-          case C.ALIGN_SPACE_BETWEEN:
-            // First line at start, last at end, evenly distributed
-            if (numLines > 1) {
-              const gap = freeSpace / (numLines - 1)
-              for (let i = 1; i < numLines; i++) {
-                _lineCrossOffsets[i]! += gap * i
-              }
+        case C.ALIGN_SPACE_AROUND:
+          // Even spacing with half-space at edges
+          // With negative free space: collapses to center (CSS spec)
+          if (freeSpace > 0) {
+            const halfGap = freeSpace / (numLines * 2)
+            for (let i = 0; i < numLines; i++) {
+              _lineCrossOffsets[i]! += halfGap + halfGap * 2 * i
             }
-            break
+          } else {
+            // Negative space: center fallback
+            const centerOffset = freeSpace / 2
+            for (let i = 0; i < numLines; i++) {
+              _lineCrossOffsets[i]! += centerOffset
+            }
+          }
+          break
 
-          case C.ALIGN_SPACE_AROUND:
-            // Even spacing with half-space at edges
-            {
-              const halfGap = freeSpace / (numLines * 2)
-              for (let i = 0; i < numLines; i++) {
-                _lineCrossOffsets[i]! += halfGap + halfGap * 2 * i
-              }
+        case C.ALIGN_SPACE_EVENLY:
+          // Equal spacing between lines and at edges
+          // With negative free space: collapses to center (CSS spec)
+          if (freeSpace > 0 && numLines > 0) {
+            const gap = freeSpace / (numLines + 1)
+            for (let i = 0; i < numLines; i++) {
+              _lineCrossOffsets[i]! += gap * (i + 1)
             }
-            break
+          } else if (freeSpace < 0) {
+            // Negative space: center fallback
+            const centerOffset = freeSpace / 2
+            for (let i = 0; i < numLines; i++) {
+              _lineCrossOffsets[i]! += centerOffset
+            }
+          }
+          break
 
-          case C.ALIGN_STRETCH:
-            // Distribute extra space evenly among lines
-            if (freeSpace > 0 && numLines > 0) {
-              const extraPerLine = freeSpace / numLines
-              for (let i = 0; i < numLines; i++) {
-                _lineCrossSizes[i]! += extraPerLine
-                // Recalculate offset for subsequent lines
-                if (i > 0) {
-                  _lineCrossOffsets[i] = _lineCrossOffsets[i - 1]! + _lineCrossSizes[i - 1]! + crossGap
-                }
+        case C.ALIGN_STRETCH:
+          // Distribute extra space evenly among lines (only with positive free space)
+          if (freeSpace > 0 && numLines > 0) {
+            const extraPerLine = freeSpace / numLines
+            for (let i = 0; i < numLines; i++) {
+              _lineCrossSizes[i]! += extraPerLine
+              // Recalculate offset for subsequent lines
+              if (i > 0) {
+                _lineCrossOffsets[i] = _lineCrossOffsets[i - 1]! + _lineCrossSizes[i - 1]! + crossGap
               }
             }
-            break
+          }
+          break
 
-          // ALIGN_FLEX_START is the default - lines already at start
-        }
+        // ALIGN_FLEX_START is the default - lines already at start
       }
 
       // For wrap-reverse, lines should be positioned from the end of the cross axis
@@ -929,6 +1063,29 @@ function layoutNode(
       }
     }
 
+    // Save line data before Phase 8: recursive layoutNode calls for children
+    // with sub-children overwrite the global pre-allocated _lineCrossSizes,
+    // _lineCrossOffsets, _lineJustifyStarts, and _lineItemSpacings arrays.
+    // For multi-line layouts, we copy the values into small local arrays.
+    // This allocation is rare (only for multi-line wrapping containers) and
+    // tiny (4 arrays x numLines x 8 bytes).
+    let savedLineCrossSizes: Float64Array | null = null
+    let savedLineCrossOffsets: Float64Array | null = null
+    let savedLineJustifyStarts: Float64Array | null = null
+    let savedLineItemSpacings: Float64Array | null = null
+    if (numLines > 1) {
+      savedLineCrossSizes = new Float64Array(numLines)
+      savedLineCrossOffsets = new Float64Array(numLines)
+      savedLineJustifyStarts = new Float64Array(numLines)
+      savedLineItemSpacings = new Float64Array(numLines)
+      for (let i = 0; i < numLines; i++) {
+        savedLineCrossSizes[i] = _lineCrossSizes[i]!
+        savedLineCrossOffsets[i] = _lineCrossOffsets[i]!
+        savedLineJustifyStarts[i] = _lineJustifyStarts[i]!
+        savedLineItemSpacings[i] = _lineItemSpacings[i]!
+      }
+    }
+
     // -----------------------------------------------------------------------
     // PHASE 8: Position and Layout Children
     // -----------------------------------------------------------------------
@@ -989,13 +1146,23 @@ function layoutNode(
         lineChildIdx = 0 // Reset position within line
         currentLineLength = _lineChildren[childLineIdx]!.length
         // Reset mainPos for new line using line-specific justify offset
-        const lineOffset = _lineJustifyStarts[childLineIdx]!
-        currentItemSpacing = _lineItemSpacings[childLineIdx]!
+        // Use saved arrays for multi-line to avoid corruption by recursive layoutNode
+        const lineOffset = savedLineJustifyStarts
+          ? savedLineJustifyStarts[childLineIdx]!
+          : _lineJustifyStarts[childLineIdx]!
+        currentItemSpacing = savedLineItemSpacings
+          ? savedLineItemSpacings[childLineIdx]!
+          : _lineItemSpacings[childLineIdx]!
         mainPos = effectiveReverse ? effectiveMainAxisSize - lineOffset : lineOffset
       }
 
-      // Get cross-axis offset for this child's line (from pre-allocated array)
-      const lineCrossOffset = childLineIdx < MAX_FLEX_LINES ? _lineCrossOffsets[childLineIdx] : 0
+      // Get cross-axis offset for this child's line
+      // Use saved arrays for multi-line to avoid corruption by recursive layoutNode
+      const lineCrossOffset = savedLineCrossOffsets
+        ? savedLineCrossOffsets[childLineIdx]!
+        : childLineIdx < MAX_FLEX_LINES
+          ? _lineCrossOffsets[childLineIdx]
+          : 0
 
       // For main-axis margins, use computed auto margin values
       // For cross-axis margins, use cached values (auto margins on cross axis handled separately)
@@ -1051,6 +1218,24 @@ function layoutNode(
         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: number
@@ -1073,8 +1258,16 @@ function layoutNode(
         // Percent of PARENT's cross axis (resolveValue handles NaN -> 0)
         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
+        // Use saved arrays for multi-line to avoid corruption by recursive layoutNode
+        const lineCross =
+          numLines > 1
+            ? savedLineCrossSizes
+              ? savedLineCrossSizes[childLineIdx]!
+              : _lineCrossSizes[childLineIdx]!
+            : crossAxisSize
+        childCrossSize = lineCross - crossMargin
       } else {
         // Non-stretch alignment or no definite cross size - shrink-wrap to content
         childCrossSize = NaN
@@ -1100,7 +1293,11 @@ function layoutNode(
       // 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
@@ -1177,14 +1374,16 @@ function layoutNode(
       const fractionalLeft = innerLeft + childX
       const fractionalTop = innerTop + childY
 
-      // Compute position offsets for RELATIVE/STATIC positioned children
+      // Compute position offsets for RELATIVE positioned children
+      // CSS spec: position:static ignores insets; only position:relative applies them.
       // These must be included in the absolute position BEFORE rounding (Yoga-compatible)
       let posOffsetX = 0
       let posOffsetY = 0
-      if (childStyle.positionType === C.POSITION_TYPE_RELATIVE || childStyle.positionType === C.POSITION_TYPE_STATIC) {
-        const relLeftPos = childStyle.position[0]
+      if (childStyle.positionType === C.POSITION_TYPE_RELATIVE) {
+        // Resolve logical EDGE_START/EDGE_END to physical left/right based on direction
+        const relLeftPos = resolvePositionEdge(childStyle.position, 0, direction)
         const relTopPos = childStyle.position[1]
-        const relRightPos = childStyle.position[2]
+        const relRightPos = resolvePositionEdge(childStyle.position, 2, direction)
         const relBottomPos = childStyle.position[3]
 
         // Left offset (takes precedence over right)
@@ -1251,8 +1450,12 @@ function layoutNode(
       // 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
@@ -1382,7 +1585,18 @@ function layoutNode(
       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
@@ -1415,11 +1629,14 @@ function layoutNode(
         }
       }
 
-      if (crossOffset > 0) {
+      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)
         }
       }
 
@@ -1480,48 +1697,65 @@ function layoutNode(
     }
     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
+      // Use saved arrays to avoid corruption by recursive layoutNode
+      for (let i = 0; i < numLines; i++) {
+        totalCrossSize += savedLineCrossSizes ? savedLineCrossSizes[i]! : _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)
+      Number.isNaN(availableHeight) &&
+      !hasAR
     ) {
-      // Auto-height row: shrink-wrap to max child height
-      nodeHeight = maxCrossSize + innerTop + innerBottom
+      // 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)
+      Number.isNaN(availableWidth) &&
+      !hasAR
     ) {
-      // Auto-width column: shrink-wrap to max child width
-      nodeWidth = maxCrossSize + innerLeft + innerRight
+      // Auto-width column: shrink-wrap to total cross size (accounts for multi-line)
+      nodeWidth = totalCrossSize + innerLeft + innerRight
     }
   }
 
@@ -1539,6 +1773,156 @@ function layoutNode(
     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 9c: Recompute cross-axis alignment after shrink-wrap
+      // -----------------------------------------------------------------------
+      // When the parent's cross axis was auto (NaN during Phase 8), alignment
+      // offsets for CENTER, FLEX_END, and auto margins computed NaN because
+      // availableCrossSpace = NaN - childSize - margin = NaN.
+      // Now that cross size is known from shrink-wrap, recompute those offsets.
+      if (Number.isNaN(crossAxisSize) && relativeCount > 0) {
+        const finalCross9c = isRow ? nodeHeight - innerTop - innerBottom : nodeWidth - innerLeft - innerRight
+        if (!Number.isNaN(finalCross9c) && finalCross9c > 0) {
+          for (const child of node.children) {
+            if (child.flex.relativeIndex < 0) continue
+            const cstyle = child.style
+            let childAlign = style.alignItems
+            if (cstyle.alignSelf !== C.ALIGN_AUTO) {
+              childAlign = cstyle.alignSelf
+            }
+            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
+            }
+
+            const crossStartIdx = isRow ? 1 : 0
+            const crossEndIdx = isRow ? 3 : 2
+            const hasAutoStart = isEdgeAuto(cstyle.margin, crossStartIdx, style.flexDirection, direction)
+            const hasAutoEnd = isEdgeAuto(cstyle.margin, crossEndIdx, style.flexDirection, direction)
+            const needsAlignment =
+              hasAutoStart || hasAutoEnd || childAlign === C.ALIGN_CENTER || childAlign === C.ALIGN_FLEX_END
+            if (!needsAlignment) continue
+
+            const childCrossSize = isRow ? child.layout.height : child.layout.width
+            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 availSpace = finalCross9c - childCrossSize - cCrossMargin
+
+            let crossOffset = 0
+            if (hasAutoStart && hasAutoEnd) {
+              crossOffset = Math.max(0, availSpace) / 2
+            } else if (hasAutoStart) {
+              crossOffset = Math.max(0, availSpace)
+            } else if (hasAutoEnd) {
+              crossOffset = 0
+            } else {
+              switch (childAlign) {
+                case C.ALIGN_FLEX_END:
+                  crossOffset = availSpace
+                  break
+                case C.ALIGN_CENTER:
+                  crossOffset = availSpace / 2
+                  break
+              }
+            }
+
+            if (isRow) {
+              if (Number.isNaN(child.layout.top)) {
+                const cMarginT = resolveEdgeValue(cstyle.margin, 1, style.flexDirection, contentWidth, direction)
+                child.layout.top = Math.round(cMarginT + crossOffset)
+              } else if (crossOffset !== 0) {
+                child.layout.top += Math.round(crossOffset)
+              }
+            } else {
+              if (Number.isNaN(child.layout.left)) {
+                const cMarginL = resolveEdgeValue(cstyle.margin, 0, style.flexDirection, contentWidth, direction)
+                child.layout.left = Math.round(cMarginL + crossOffset)
+              } else if (crossOffset !== 0) {
+                child.layout.left += Math.round(crossOffset)
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
   // =========================================================================
   // PHASE 10: Final Output - Set Node Layout
   // =========================================================================
@@ -1606,9 +1990,10 @@ function layoutNode(
     const hasAutoMarginBottom = isEdgeAuto(childStyle.margin, 3, style.flexDirection, direction)
 
     // Position offsets from setPosition(edge, value)
-    const leftPos = childStyle.position[0]
+    // Resolve logical EDGE_START/EDGE_END to physical left/right based on direction
+    const leftPos = resolvePositionEdge(childStyle.position, 0, direction)
     const topPos = childStyle.position[1]
-    const rightPos = childStyle.position[2]
+    const rightPos = resolvePositionEdge(childStyle.position, 2, direction)
     const bottomPos = childStyle.position[3]
 
     const hasLeft = leftPos.unit !== C.UNIT_UNDEFINED
@@ -1616,10 +2001,11 @@ function layoutNode(
     const hasTop = topPos.unit !== C.UNIT_UNDEFINED
     const hasBottom = bottomPos.unit !== C.UNIT_UNDEFINED
 
-    const leftOffset = resolveValue(leftPos, nodeWidth)
-    const topOffset = resolveValue(topPos, nodeHeight)
-    const rightOffset = resolveValue(rightPos, nodeWidth)
-    const bottomOffset = resolveValue(bottomPos, nodeHeight)
+    // Yoga resolves percentage position offsets against the content box dimensions
+    const leftOffset = resolveValue(leftPos, absContentBoxW)
+    const topOffset = resolveValue(topPos, absContentBoxH)
+    const rightOffset = resolveValue(rightPos, absContentBoxW)
+    const bottomOffset = resolveValue(bottomPos, absContentBoxH)
 
     // Calculate available size for absolute child using padding box
     const contentW = absPaddingBoxW
@@ -1692,28 +2078,45 @@ function layoutNode(
     const childHeight = child.layout.height
 
     // Apply alignment when no explicit position set
-    // For absolute children, align-items/justify-content apply when no position offsets
+    // For absolute children, align-items applies on cross axis, justify-content on main axis
+    // Row: X = main axis (justifyContent), Y = cross axis (alignItems)
+    // Column: X = cross axis (alignItems), Y = main axis (justifyContent)
     if (!hasLeft && !hasRight) {
-      // No horizontal position - use align-items (for row) or justify-content (for column)
-      // Default column direction: cross-axis is horizontal, use alignItems
-      let alignment = style.alignItems
-      if (childStyle.alignSelf !== C.ALIGN_AUTO) {
-        alignment = childStyle.alignSelf
-      }
-      const freeSpaceX = contentW - childWidth - childMarginLeft - childMarginRight
-      switch (alignment) {
-        case C.ALIGN_CENTER:
-          childX = childMarginLeft + freeSpaceX / 2
-          break
-        case C.ALIGN_FLEX_END:
-          childX = childMarginLeft + freeSpaceX
-          break
-        case C.ALIGN_STRETCH:
-          // Stretch: already handled by setting width to fill
-          break
-        default: // FLEX_START
-          childX = childMarginLeft
-          break
+      if (isRow) {
+        // Row: X is main axis, use justifyContent
+        const freeSpaceX = contentW - childWidth - childMarginLeft - childMarginRight
+        switch (style.justifyContent) {
+          case C.JUSTIFY_CENTER:
+            childX = childMarginLeft + freeSpaceX / 2
+            break
+          case C.JUSTIFY_FLEX_END:
+            childX = childMarginLeft + freeSpaceX
+            break
+          default: // FLEX_START
+            childX = childMarginLeft
+            break
+        }
+      } else {
+        // Column: X is cross axis, use alignItems/alignSelf
+        let alignment = style.alignItems
+        if (childStyle.alignSelf !== C.ALIGN_AUTO) {
+          alignment = childStyle.alignSelf
+        }
+        const freeSpaceX = contentW - childWidth - childMarginLeft - childMarginRight
+        switch (alignment) {
+          case C.ALIGN_CENTER:
+            childX = childMarginLeft + freeSpaceX / 2
+            break
+          case C.ALIGN_FLEX_END:
+            childX = childMarginLeft + freeSpaceX
+            break
+          case C.ALIGN_STRETCH:
+            // Stretch: already handled by setting width to fill
+            break
+          default: // FLEX_START
+            childX = childMarginLeft
+            break
+        }
       }
     } else if (!hasLeft && hasRight) {
       // Position from right edge
@@ -1739,19 +2142,41 @@ function layoutNode(
     }
 
     if (!hasTop && !hasBottom) {
-      // No vertical position - use justify-content (for row) or align-items (for column)
-      // Default column direction: main-axis is vertical, use justifyContent
-      const freeSpaceY = contentH - childHeight - childMarginTop - childMarginBottom
-      switch (style.justifyContent) {
-        case C.JUSTIFY_CENTER:
-          childY = childMarginTop + freeSpaceY / 2
-          break
-        case C.JUSTIFY_FLEX_END:
-          childY = childMarginTop + freeSpaceY
-          break
-        default: // FLEX_START
-          childY = childMarginTop
-          break
+      if (isRow) {
+        // Row: Y is cross axis, use alignItems/alignSelf
+        let alignment = style.alignItems
+        if (childStyle.alignSelf !== C.ALIGN_AUTO) {
+          alignment = childStyle.alignSelf
+        }
+        const freeSpaceY = contentH - childHeight - childMarginTop - childMarginBottom
+        switch (alignment) {
+          case C.ALIGN_CENTER:
+            childY = childMarginTop + freeSpaceY / 2
+            break
+          case C.ALIGN_FLEX_END:
+            childY = childMarginTop + freeSpaceY
+            break
+          case C.ALIGN_STRETCH:
+            // Stretch: already handled by setting height to fill
+            break
+          default: // FLEX_START
+            childY = childMarginTop
+            break
+        }
+      } else {
+        // Column: Y is main axis, use justifyContent
+        const freeSpaceY = contentH - childHeight - childMarginTop - childMarginBottom
+        switch (style.justifyContent) {
+          case C.JUSTIFY_CENTER:
+            childY = childMarginTop + freeSpaceY / 2
+            break
+          case C.JUSTIFY_FLEX_END:
+            childY = childMarginTop + freeSpaceY
+            break
+          default: // FLEX_START
+            childY = childMarginTop
+            break
+        }
       }
     } else if (!hasTop && hasBottom) {
       // Position from bottom edge
@@ -1786,6 +2211,8 @@ function layoutNode(
   flex.lastAvailH = availableHeight
   flex.lastOffsetX = offsetX
   flex.lastOffsetY = offsetY
+  flex.lastAbsX = absX
+  flex.lastAbsY = absY
   flex.lastDir = direction
   flex.layoutValid = true
   _t?.layoutExit(_tn, layout.width, layout.height)