flexily 0.5.2 → 0.6.0

package/src/classic/layout.ts

@@ -1,1843 +0,0 @@
-/**
- * Flexily Layout Algorithm
- *
- * Core flexbox layout computation extracted from node.ts.
- * Based on Planning-nl/flexbox.js reference implementation.
- */
-
-import * as C from "../constants.js"
-import type { Node } from "./node.js"
-import type { Value } from "../types.js"
-import { resolveValue, applyMinMax } from "../utils.js"
-import { log } from "../logger.js"
-
-// ============================================================================
-// Helper Functions
-// ============================================================================
-
-/**
- * Check if flex direction is row-oriented (horizontal main axis).
- */
-export function isRowDirection(flexDirection: number): boolean {
-  return flexDirection === C.FLEX_DIRECTION_ROW || flexDirection === C.FLEX_DIRECTION_ROW_REVERSE
-}
-
-/**
- * Check if flex direction is reversed.
- */
-export function isReverseDirection(flexDirection: number): boolean {
-  return flexDirection === C.FLEX_DIRECTION_ROW_REVERSE || flexDirection === C.FLEX_DIRECTION_COLUMN_REVERSE
-}
-
-/**
- * Get the logical edge value (START/END) for a given physical index.
- * Returns undefined if no logical value applies to this physical edge.
- *
- * The mapping depends on flex direction and text direction:
- * - Row LTR: START→left, END→right (swapped if reverse)
- * - Row RTL: START→right, END→left (swapped if reverse)
- * - Column: START→top, END→bottom (swapped if reverse)
- */
-function getLogicalEdgeValue(
-  arr: [Value, Value, Value, Value, Value, Value],
-  physicalIndex: number,
-  _flexDirection: number,
-  direction: number = C.DIRECTION_LTR,
-): Value | undefined {
-  const isRTL = direction === C.DIRECTION_RTL
-
-  // START/END always map to left/right (inline direction)
-  if (physicalIndex === 0) {
-    return isRTL ? arr[5] : arr[4] // Left: START (LTR) or END (RTL)
-  } else if (physicalIndex === 2) {
-    return isRTL ? arr[4] : arr[5] // Right: END (LTR) or START (RTL)
-  }
-  return undefined
-}
-
-/**
- * Resolve logical (START/END) margins/padding to physical values.
- * EDGE_START/EDGE_END always resolve along the inline (horizontal) axis:
- * - LTR: START→left, END→right
- * - RTL: START→right, END→left
- *
- * Physical edges (LEFT/RIGHT/TOP/BOTTOM) are used directly.
- * When both physical and logical are set, logical takes precedence.
- */
-export function resolveEdgeValue(
-  arr: [Value, Value, Value, Value, Value, Value],
-  physicalIndex: number, // 0=left, 1=top, 2=right, 3=bottom
-  flexDirection: number,
-  availableSize: number,
-  direction: number = C.DIRECTION_LTR,
-): number {
-  const logicalValue = getLogicalEdgeValue(arr, physicalIndex, flexDirection, direction)
-
-  // Logical takes precedence if defined
-  if (logicalValue && logicalValue.unit !== C.UNIT_UNDEFINED) {
-    return resolveValue(logicalValue, availableSize)
-  }
-
-  // Fall back to physical
-  return resolveValue(arr[physicalIndex]!, availableSize)
-}
-
-/**
- * Check if a logical edge margin is set to auto.
- */
-export function isEdgeAuto(
-  arr: [Value, Value, Value, Value, Value, Value],
-  physicalIndex: number,
-  flexDirection: number,
-  direction: number = C.DIRECTION_LTR,
-): boolean {
-  const logicalValue = getLogicalEdgeValue(arr, physicalIndex, flexDirection, direction)
-
-  // Check logical first
-  if (logicalValue && logicalValue.unit !== C.UNIT_UNDEFINED) {
-    return logicalValue.unit === C.UNIT_AUTO
-  }
-
-  // Fall back to physical
-  return arr[physicalIndex]!.unit === C.UNIT_AUTO
-}
-
-/**
- * Resolve logical (START/END) border widths to physical values.
- * Border values are plain numbers (always points), so resolution is simpler
- * than for margin/padding. Uses NaN as the "not set" sentinel for logical slots.
- * When both physical and logical are set, logical takes precedence.
- */
-export function resolveEdgeBorderValue(
-  arr: [number, number, number, number, number, number],
-  physicalIndex: number, // 0=left, 1=top, 2=right, 3=bottom
-  _flexDirection: number,
-  direction: number = C.DIRECTION_LTR,
-): number {
-  const isRTL = direction === C.DIRECTION_RTL
-
-  // START/END always map to left/right (inline direction)
-  let logicalSlot: number | undefined
-  if (physicalIndex === 0) logicalSlot = isRTL ? 5 : 4
-  else if (physicalIndex === 2) logicalSlot = isRTL ? 4 : 5
-
-  // Logical takes precedence if set (NaN = not set)
-  if (logicalSlot !== undefined && !Number.isNaN(arr[logicalSlot])) {
-    return arr[logicalSlot]!
-  }
-  return arr[physicalIndex]!
-}
-
-export function markSubtreeLayoutSeen(node: Node): void {
-  for (const child of node.children) {
-    ;(child as Node)["_hasNewLayout"] = true
-    markSubtreeLayoutSeen(child)
-  }
-}
-
-export function countNodes(node: Node): number {
-  let count = 1
-  for (const child of node.children) {
-    count += countNodes(child)
-  }
-  return count
-}
-
-// ============================================================================
-// Layout Algorithm
-// Based on Planning-nl/flexbox.js reference implementation
-// ============================================================================
-
-/**
- * Epsilon value for floating point comparisons in flex distribution.
- * Used to determine when remaining space is negligible and iteration should stop.
- */
-const EPSILON_FLOAT = 0.001
-
-/**
- * Child layout information for flex distribution.
- */
-interface ChildLayout {
-  node: Node
-  mainSize: number
-  baseSize: number // Original base size before flex distribution (for weighted shrink)
-  mainMargin: number // Total main-axis margin (non-auto only)
-  flexGrow: number
-  flexShrink: number
-  minMain: number
-  maxMain: number
-  // Auto margin tracking (main axis)
-  mainStartMarginAuto: boolean
-  mainEndMarginAuto: boolean
-  mainStartMarginValue: number // Resolved or 0 if auto (will be computed later)
-  mainEndMarginValue: number // Resolved or 0 if auto (will be computed later)
-  // Frozen flag: set when item was clamped to min/max during hypothetical sizing
-  frozen: boolean
-}
-
-/**
- * A flex line containing children and cross-axis sizing info.
- * Used for flex-wrap to group items that fit on one line.
- */
-interface FlexLine {
-  children: ChildLayout[]
-  crossSize: number // Maximum cross size of items in this line
-  crossStart: number // Computed cross-axis start position
-}
-
-/**
- * Break children into flex lines based on available main-axis space.
- *
- * @param children - All children to potentially wrap
- * @param mainAxisSize - Available main-axis space (NaN for unconstrained)
- * @param mainGap - Gap between items on main axis
- * @param wrap - Wrap mode (WRAP_NO_WRAP, WRAP_WRAP, WRAP_WRAP_REVERSE)
- * @returns Array of flex lines
- */
-function breakIntoLines(children: ChildLayout[], mainAxisSize: number, mainGap: number, wrap: number): FlexLine[] {
-  // No wrapping or unconstrained - all children on one line
-  if (wrap === C.WRAP_NO_WRAP || Number.isNaN(mainAxisSize) || children.length === 0) {
-    return [{ children, crossSize: 0, crossStart: 0 }]
-  }
-
-  const lines: FlexLine[] = []
-  let currentLine: ChildLayout[] = []
-  let lineMainSize = 0
-
-  for (const child of children) {
-    // CSS spec 9.3.4: line breaking uses the "hypothetical main size" which is
-    // the flex base size clamped to min/max, not the unclamped base size.
-    const hypotheticalMainSize = Math.max(child.minMain, Math.min(child.maxMain, child.baseSize))
-    const childMainSize = hypotheticalMainSize + child.mainMargin
-    const gapIfNotFirst = currentLine.length > 0 ? mainGap : 0
-
-    // Check if child fits on current line
-    if (currentLine.length > 0 && lineMainSize + gapIfNotFirst + childMainSize > mainAxisSize) {
-      // Start a new line
-      lines.push({ children: currentLine, crossSize: 0, crossStart: 0 })
-      currentLine = [child]
-      lineMainSize = childMainSize
-    } else {
-      // Add to current line
-      currentLine.push(child)
-      lineMainSize += gapIfNotFirst + childMainSize
-    }
-  }
-
-  // Don't forget the last line
-  if (currentLine.length > 0) {
-    lines.push({ children: currentLine, crossSize: 0, crossStart: 0 })
-  }
-
-  // Reverse lines for wrap-reverse
-  if (wrap === C.WRAP_WRAP_REVERSE) {
-    lines.reverse()
-  }
-
-  return lines
-}
-
-/**
- * Distribute free space among flex children using grow or shrink factors.
- * Handles both positive (grow) and negative (shrink) free space.
- *
- * For shrinking, per CSS Flexbox spec, the shrink factor is weighted by the item's
- * base size: scaledShrinkFactor = flexShrink * baseSize
- *
- * @param children - Array of child layout info to distribute space among
- * @param freeSpace - Amount of space to distribute (positive for grow, negative for shrink)
- */
-function distributeFlexSpace(children: ChildLayout[], initialFreeSpace: number): void {
-  // CSS Flexbox spec section 9.7: Resolving Flexible Lengths
-  // This implements the iterative algorithm where items are frozen when they hit constraints.
-  //
-  // Key insight: Items start at BASE size, not hypothetical. Free space was calculated from
-  // hypothetical sizes. When distributing, items that hit min/max are frozen and we redistribute.
-
-  const isGrowing = initialFreeSpace > 0
-  if (initialFreeSpace === 0) return
-
-  // Single-child fast path: skip iteration, direct assignment
-  if (children.length === 1) {
-    const child = children[0]!
-    const canFlex = isGrowing ? child.flexGrow > 0 : child.flexShrink > 0
-    if (canFlex) {
-      const target = child.baseSize + initialFreeSpace
-      child.mainSize = Math.max(child.minMain, Math.min(child.maxMain, target))
-    }
-    return
-  }
-
-  // Calculate container inner size from initial state (before any mutations)
-  // freeSpace was computed from BASE sizes, so: container = freeSpace + sum(base)
-  let totalBase = 0
-  for (const childLayout of children) {
-    totalBase += childLayout.baseSize
-  }
-  const containerInner = initialFreeSpace + totalBase
-
-  // Initialize: all items start unfrozen
-  for (const childLayout of children) {
-    childLayout.frozen = false
-  }
-
-  // Track current free space (will be recalculated each iteration)
-  let freeSpace = initialFreeSpace
-
-  // Iterate until all items are frozen or free space is negligible
-  let iterations = 0
-  const maxIterations = children.length + 1 // Prevent infinite loops
-
-  while (iterations++ < maxIterations) {
-    // Calculate total flex factor for unfrozen items
-    let totalFlex = 0
-    for (const childLayout of children) {
-      if (childLayout.frozen) continue
-      if (isGrowing) {
-        totalFlex += childLayout.flexGrow
-      } else {
-        // Shrink weighted by base size per CSS spec
-        totalFlex += childLayout.flexShrink * childLayout.baseSize
-      }
-    }
-
-    if (totalFlex === 0) break
-
-    // CSS Flexbox spec: when total flex-grow is less than 1, only distribute that fraction
-    let effectiveFreeSpace = freeSpace
-    if (isGrowing && totalFlex < 1) {
-      effectiveFreeSpace = freeSpace * totalFlex
-    }
-
-    // Calculate target sizes for unfrozen items
-    let totalViolation = 0
-    for (const childLayout of children) {
-      if (childLayout.frozen) continue
-
-      // Calculate target from base size + proportional free space
-      const flexFactor = isGrowing ? childLayout.flexGrow : childLayout.flexShrink * childLayout.baseSize
-      const ratio = totalFlex > 0 ? flexFactor / totalFlex : 0
-      const target = childLayout.baseSize + effectiveFreeSpace * ratio
-
-      // Clamp by min/max
-      const clamped = Math.max(childLayout.minMain, Math.min(childLayout.maxMain, target))
-      const violation = clamped - target
-      totalViolation += violation
-
-      // Store clamped target
-      childLayout.mainSize = clamped
-    }
-
-    // Freeze items based on violations (CSS spec 9.7 step 9)
-    let anyFrozen = false
-    if (Math.abs(totalViolation) < EPSILON_FLOAT) {
-      // No violations - freeze all remaining items and we're done
-      for (const childLayout of children) {
-        childLayout.frozen = true
-      }
-      break
-    } else if (totalViolation > 0) {
-      // Positive total violation: freeze items with positive violations (clamped UP to min)
-      for (const childLayout of children) {
-        if (childLayout.frozen) continue
-        const target =
-          childLayout.baseSize +
-          ((isGrowing ? childLayout.flexGrow : childLayout.flexShrink * childLayout.baseSize) / totalFlex) *
-            effectiveFreeSpace
-        if (childLayout.mainSize > target + EPSILON_FLOAT) {
-          childLayout.frozen = true
-          anyFrozen = true
-        }
-      }
-    } else {
-      // Negative total violation: freeze items with negative violations (clamped DOWN to max)
-      for (const childLayout of children) {
-        if (childLayout.frozen) continue
-        const flexFactor = isGrowing ? childLayout.flexGrow : childLayout.flexShrink * childLayout.baseSize
-        const target = childLayout.baseSize + (flexFactor / totalFlex) * effectiveFreeSpace
-        if (childLayout.mainSize < target - EPSILON_FLOAT) {
-          childLayout.frozen = true
-          anyFrozen = true
-        }
-      }
-    }
-
-    if (!anyFrozen) break
-
-    // Recalculate free space for next iteration
-    // After freezing, available = container - frozen sizes
-    // Free space = available - sum of unfrozen BASE sizes
-    let frozenSpace = 0
-    let unfrozenBase = 0
-    for (const childLayout of children) {
-      if (childLayout.frozen) {
-        frozenSpace += childLayout.mainSize
-      } else {
-        unfrozenBase += childLayout.baseSize
-      }
-    }
-    // New free space = container - frozen - unfrozen base sizes
-    freeSpace = containerInner - frozenSpace - unfrozenBase
-  }
-}
-
-/**
- * Compute layout for a node tree.
- *
- * @param root - Root node of the tree
- * @param availableWidth - Available width for layout
- * @param availableHeight - Available height for layout
- * @param direction - Text direction (LTR or RTL), affects horizontal edge resolution
- */
-export function computeLayout(
-  root: Node,
-  availableWidth: number,
-  availableHeight: number,
-  direction: number = C.DIRECTION_LTR,
-): void {
-  // Pass absolute position (0,0) for root node - used for Yoga-compatible edge rounding
-  layoutNode(root, availableWidth, availableHeight, 0, 0, 0, 0, direction)
-}
-
-/**
- * Layout a node and its children.
- *
- * @param absX - Absolute X position from document root (for Yoga-compatible edge rounding)
- * @param absY - Absolute Y position from document root (for Yoga-compatible edge rounding)
- * @param direction - Text direction (LTR or RTL), affects horizontal edge resolution
- */
-function layoutNode(
-  node: Node,
-  availableWidth: number,
-  availableHeight: number,
-  offsetX: number,
-  offsetY: number,
-  absX: number,
-  absY: number,
-  direction: number = C.DIRECTION_LTR,
-): void {
-  log.debug?.(
-    "layoutNode called: availW=%d, availH=%d, offsetX=%d, offsetY=%d, absX=%d, absY=%d, children=%d",
-    availableWidth,
-    availableHeight,
-    offsetX,
-    offsetY,
-    absX,
-    absY,
-    node.children.length,
-  )
-  const style = node.style
-  const layout = node.layout
-
-  // Handle display: none
-  if (style.display === C.DISPLAY_NONE) {
-    layout.left = 0
-    layout.top = 0
-    layout.width = 0
-    layout.height = 0
-    return
-  }
-
-  // Calculate spacing
-  // CSS spec: percentage margins AND padding resolve against containing block's WIDTH only
-  // Use resolveEdgeValue to respect logical EDGE_START/END
-  const marginLeft = resolveEdgeValue(style.margin, 0, style.flexDirection, availableWidth, direction)
-  const marginTop = resolveEdgeValue(style.margin, 1, style.flexDirection, availableWidth, direction)
-  const marginRight = resolveEdgeValue(style.margin, 2, style.flexDirection, availableWidth, direction)
-  const marginBottom = resolveEdgeValue(style.margin, 3, style.flexDirection, availableWidth, direction)
-
-  const paddingLeft = resolveEdgeValue(style.padding, 0, style.flexDirection, availableWidth, direction)
-  const paddingTop = resolveEdgeValue(style.padding, 1, style.flexDirection, availableWidth, direction)
-  const paddingRight = resolveEdgeValue(style.padding, 2, style.flexDirection, availableWidth, direction)
-  const paddingBottom = resolveEdgeValue(style.padding, 3, style.flexDirection, availableWidth, direction)
-
-  const borderLeft = resolveEdgeBorderValue(style.border, 0, style.flexDirection, direction)
-  const borderTop = resolveEdgeBorderValue(style.border, 1, style.flexDirection, direction)
-  const borderRight = resolveEdgeBorderValue(style.border, 2, style.flexDirection, direction)
-  const borderBottom = resolveEdgeBorderValue(style.border, 3, style.flexDirection, direction)
-
-  // Calculate node dimensions
-  // When available dimension is NaN (unconstrained), auto-sized nodes use NaN
-  // and will be sized by shrink-wrap logic based on children
-  let nodeWidth: number
-  if (style.width.unit === C.UNIT_POINT) {
-    nodeWidth = style.width.value
-  } else if (style.width.unit === C.UNIT_PERCENT) {
-    // Percentage against NaN (auto-sized parent) resolves to 0 via resolveValue
-    nodeWidth = resolveValue(style.width, availableWidth)
-  } else if (Number.isNaN(availableWidth)) {
-    // Unconstrained: use NaN to signal shrink-wrap (will be computed from children)
-    nodeWidth = NaN
-  } else {
-    nodeWidth = availableWidth - marginLeft - marginRight
-  }
-  // Apply min/max constraints (works even with NaN available for point-based constraints)
-  nodeWidth = applyMinMax(nodeWidth, style.minWidth, style.maxWidth, availableWidth)
-
-  let nodeHeight: number
-  if (style.height.unit === C.UNIT_POINT) {
-    nodeHeight = style.height.value
-  } else if (style.height.unit === C.UNIT_PERCENT) {
-    // Percentage against NaN (auto-sized parent) resolves to 0 via resolveValue
-    nodeHeight = resolveValue(style.height, availableHeight)
-  } else if (Number.isNaN(availableHeight)) {
-    // Unconstrained: use NaN to signal shrink-wrap (will be computed from children)
-    nodeHeight = NaN
-  } else {
-    nodeHeight = availableHeight - marginTop - marginBottom
-  }
-
-  // Apply aspect ratio constraint
-  // If aspectRatio is set and one dimension is auto (NaN), derive it from the other
-  const aspectRatio = style.aspectRatio
-  if (!Number.isNaN(aspectRatio) && aspectRatio > 0) {
-    const widthIsAuto = Number.isNaN(nodeWidth) || style.width.unit === C.UNIT_AUTO
-    const heightIsAuto = Number.isNaN(nodeHeight) || style.height.unit === C.UNIT_AUTO
-
-    if (widthIsAuto && !heightIsAuto && !Number.isNaN(nodeHeight)) {
-      // Height is defined, width is auto: width = height * aspectRatio
-      nodeWidth = nodeHeight * aspectRatio
-    } else if (heightIsAuto && !widthIsAuto && !Number.isNaN(nodeWidth)) {
-      // Width is defined, height is auto: height = width / aspectRatio
-      nodeHeight = nodeWidth / aspectRatio
-    }
-    // If both are defined or both are auto, aspectRatio doesn't apply at this stage
-  }
-
-  // Apply min/max constraints (works even with NaN available for point-based constraints)
-  nodeHeight = applyMinMax(nodeHeight, style.minHeight, style.maxHeight, availableHeight)
-
-  // Content area (inside border and padding)
-  // When node dimensions are NaN (unconstrained), content dimensions are also NaN
-  const innerLeft = borderLeft + paddingLeft
-  const innerTop = borderTop + paddingTop
-  const innerRight = borderRight + paddingRight
-  const innerBottom = borderBottom + paddingBottom
-
-  // Enforce box model constraint: minimum size = padding + border
-  const minInnerWidth = innerLeft + innerRight
-  const minInnerHeight = innerTop + innerBottom
-  if (!Number.isNaN(nodeWidth) && nodeWidth < minInnerWidth) {
-    nodeWidth = minInnerWidth
-  }
-  if (!Number.isNaN(nodeHeight) && nodeHeight < minInnerHeight) {
-    nodeHeight = minInnerHeight
-  }
-
-  const contentWidth = Number.isNaN(nodeWidth) ? NaN : Math.max(0, nodeWidth - innerLeft - innerRight)
-  const contentHeight = Number.isNaN(nodeHeight) ? NaN : Math.max(0, nodeHeight - innerTop - innerBottom)
-
-  // Compute position offsets early (needed for children's absolute position calculation)
-  // This ensures children's absolute positions include parent's position offset
-  let parentPosOffsetX = 0
-  let parentPosOffsetY = 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) {
-    const leftPos = style.position[0]
-    const topPos = style.position[1]
-    const rightPos = style.position[2]
-    const bottomPos = style.position[3]
-
-    if (leftPos.unit !== C.UNIT_UNDEFINED) {
-      parentPosOffsetX = resolveValue(leftPos, availableWidth)
-    } else if (rightPos.unit !== C.UNIT_UNDEFINED) {
-      parentPosOffsetX = -resolveValue(rightPos, availableWidth)
-    }
-
-    if (topPos.unit !== C.UNIT_UNDEFINED) {
-      parentPosOffsetY = resolveValue(topPos, availableHeight)
-    } else if (bottomPos.unit !== C.UNIT_UNDEFINED) {
-      parentPosOffsetY = -resolveValue(bottomPos, availableHeight)
-    }
-  }
-
-  // Handle measure function (text nodes)
-  if (node.hasMeasureFunc() && node.children.length === 0) {
-    const measureFunc = node.measureFunc!
-    // For unconstrained dimensions (NaN), treat as auto-sizing
-    const widthIsAuto =
-      style.width.unit === C.UNIT_AUTO || style.width.unit === C.UNIT_UNDEFINED || Number.isNaN(nodeWidth)
-    const heightIsAuto =
-      style.height.unit === C.UNIT_AUTO || style.height.unit === C.UNIT_UNDEFINED || Number.isNaN(nodeHeight)
-    const widthMode = widthIsAuto ? C.MEASURE_MODE_AT_MOST : C.MEASURE_MODE_EXACTLY
-    const heightMode = heightIsAuto ? C.MEASURE_MODE_UNDEFINED : C.MEASURE_MODE_EXACTLY
-
-    // For unconstrained width, use a large value; measureFunc should return intrinsic size
-    const measureWidth = Number.isNaN(contentWidth) ? Infinity : contentWidth
-    const measureHeight = Number.isNaN(contentHeight) ? Infinity : contentHeight
-
-    const measured = measureFunc(measureWidth, widthMode, measureHeight, heightMode)
-
-    if (widthIsAuto) {
-      nodeWidth = measured.width + innerLeft + innerRight
-    }
-    if (heightIsAuto) {
-      nodeHeight = measured.height + innerTop + innerBottom
-    }
-
-    layout.width = Math.round(nodeWidth)
-    layout.height = Math.round(nodeHeight)
-    layout.left = Math.round(offsetX + marginLeft)
-    layout.top = Math.round(offsetY + marginTop)
-    return
-  }
-
-  // Handle leaf nodes without measureFunc - when unconstrained, use padding+border as intrinsic size
-  if (node.children.length === 0) {
-    // For leaf nodes without measureFunc, intrinsic size is just padding+border
-    if (Number.isNaN(nodeWidth)) {
-      nodeWidth = innerLeft + innerRight
-    }
-    if (Number.isNaN(nodeHeight)) {
-      nodeHeight = innerTop + innerBottom
-    }
-    layout.width = Math.round(nodeWidth)
-    layout.height = Math.round(nodeHeight)
-    layout.left = Math.round(offsetX + marginLeft)
-    layout.top = Math.round(offsetY + marginTop)
-    return
-  }
-
-  // Separate relative and absolute children
-  // Filter out display:none children - they don't participate in layout at all
-  const relativeChildren = node.children.filter(
-    (c) => c.style.positionType !== C.POSITION_TYPE_ABSOLUTE && c.style.display !== C.DISPLAY_NONE,
-  )
-  const absoluteChildren = node.children.filter(
-    (c) => c.style.positionType === C.POSITION_TYPE_ABSOLUTE && c.style.display !== C.DISPLAY_NONE,
-  )
-
-  // Flex layout for relative children
-  log.debug?.(
-    "layoutNode: node.children=%d, relativeChildren=%d, absolute=%d",
-    node.children.length,
-    relativeChildren.length,
-    absoluteChildren.length,
-  )
-  if (relativeChildren.length > 0) {
-    const isRow = isRowDirection(style.flexDirection)
-    const isReverse = isReverseDirection(style.flexDirection)
-
-    const mainAxisSize = isRow ? contentWidth : contentHeight
-    const crossAxisSize = isRow ? contentHeight : contentWidth
-    const mainGap = isRow ? style.gap[0] : style.gap[1]
-
-    // Prepare child layout info
-
-    const children: ChildLayout[] = []
-    let totalBaseMain = 0
-
-    for (const child of relativeChildren) {
-      const childStyle = child.style
-
-      // Check for auto margins on main axis
-      // Physical indices depend on axis and reverse direction:
-      // - Row: main-start=left(0), main-end=right(2)
-      // - Row-reverse: main-start=right(2), main-end=left(0)
-      // - Column: main-start=top(1), main-end=bottom(3)
-      // - Column-reverse: main-start=bottom(3), main-end=top(1)
-      const mainStartIndex = isRow ? (isReverse ? 2 : 0) : isReverse ? 3 : 1
-      const mainEndIndex = isRow ? (isReverse ? 0 : 2) : isReverse ? 1 : 3
-      const mainStartMarginAuto = isEdgeAuto(childStyle.margin, mainStartIndex, style.flexDirection)
-      const mainEndMarginAuto = isEdgeAuto(childStyle.margin, mainEndIndex, style.flexDirection)
-
-      // Resolve non-auto margins (auto margins resolve to 0 initially)
-      // CSS spec: percentage margins resolve against containing block's WIDTH only
-      // For row: mainAxisSize is contentWidth; for column: crossAxisSize is contentWidth
-      const parentWidth = isRow ? mainAxisSize : crossAxisSize
-      const mainStartMarginValue = mainStartMarginAuto
-        ? 0
-        : resolveEdgeValue(childStyle.margin, mainStartIndex, style.flexDirection, parentWidth, direction)
-      const mainEndMarginValue = mainEndMarginAuto
-        ? 0
-        : resolveEdgeValue(childStyle.margin, mainEndIndex, style.flexDirection, parentWidth, direction)
-
-      // Total non-auto margin for flex calculations
-      const mainMargin = mainStartMarginValue + mainEndMarginValue
-
-      // Determine base size (flex-basis or explicit size)
-      let baseSize = 0
-      if (childStyle.flexBasis.unit === C.UNIT_POINT) {
-        baseSize = childStyle.flexBasis.value
-      } else if (childStyle.flexBasis.unit === C.UNIT_PERCENT) {
-        baseSize = mainAxisSize * (childStyle.flexBasis.value / 100)
-      } else {
-        const sizeVal = isRow ? childStyle.width : childStyle.height
-        if (sizeVal.unit === C.UNIT_POINT) {
-          baseSize = sizeVal.value
-        } else if (sizeVal.unit === C.UNIT_PERCENT) {
-          baseSize = 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
-          // CSS spec: percentage margins resolve against containing block's WIDTH only
-          // Use resolveEdgeValue to respect logical EDGE_START/END
-          const crossMargin = isRow
-            ? resolveEdgeValue(childStyle.margin, 1, style.flexDirection, contentWidth, direction) +
-              resolveEdgeValue(childStyle.margin, 3, style.flexDirection, contentWidth, direction)
-            : resolveEdgeValue(childStyle.margin, 0, style.flexDirection, contentWidth, direction) +
-              resolveEdgeValue(childStyle.margin, 2, style.flexDirection, contentWidth, direction)
-          const availCross = crossAxisSize - crossMargin
-          const measured = child.measureFunc!(
-            mainAxisSize,
-            C.MEASURE_MODE_AT_MOST,
-            availCross,
-            C.MEASURE_MODE_UNDEFINED,
-          )
-          baseSize = isRow ? measured.width : measured.height
-        } else if (child.children.length > 0) {
-          // For auto-sized children WITH children but no measureFunc,
-          // recursively compute intrinsic size by laying out with unconstrained main axis
-          // Use 0,0 for absX/absY since this is just measurement, not final positioning
-          layoutNode(child, isRow ? NaN : crossAxisSize, isRow ? crossAxisSize : NaN, 0, 0, 0, 0, direction)
-          baseSize = isRow ? child.layout.width : child.layout.height
-        } else {
-          // For auto-sized LEAF children without measureFunc, use padding + border as minimum
-          // This ensures elements with only padding still have proper size
-          // CSS spec: percentage padding resolves against containing block's WIDTH only
-          // Use resolveEdgeValue to respect logical EDGE_START/END
-          // For row: mainAxisSize is contentWidth; for column: crossAxisSize is contentWidth
-          const parentWidth = isRow ? mainAxisSize : crossAxisSize
-          const childPadding = isRow
-            ? resolveEdgeValue(childStyle.padding, 0, childStyle.flexDirection, parentWidth, direction) +
-              resolveEdgeValue(childStyle.padding, 2, childStyle.flexDirection, parentWidth, direction)
-            : resolveEdgeValue(childStyle.padding, 1, childStyle.flexDirection, parentWidth, direction) +
-              resolveEdgeValue(childStyle.padding, 3, childStyle.flexDirection, parentWidth, direction)
-          const childBorder = isRow
-            ? resolveEdgeBorderValue(childStyle.border, 0, childStyle.flexDirection, direction) +
-              resolveEdgeBorderValue(childStyle.border, 2, childStyle.flexDirection, direction)
-            : resolveEdgeBorderValue(childStyle.border, 1, childStyle.flexDirection, direction) +
-              resolveEdgeBorderValue(childStyle.border, 3, childStyle.flexDirection, direction)
-          baseSize = childPadding + childBorder
-        }
-      }
-
-      // Min/max on main axis
-      const minVal = isRow ? childStyle.minWidth : childStyle.minHeight
-      const maxVal = isRow ? childStyle.maxWidth : childStyle.maxHeight
-      const minMain = minVal.unit !== C.UNIT_UNDEFINED ? resolveValue(minVal, mainAxisSize) : 0
-      const maxMain = maxVal.unit !== C.UNIT_UNDEFINED ? resolveValue(maxVal, mainAxisSize) : Infinity
-
-      // Clamp base size to get hypothetical size (CSS Flexbox spec)
-      const hypotheticalSize = Math.max(minMain, Math.min(maxMain, baseSize))
-
-      children.push({
-        node: child,
-        mainSize: baseSize, // Start from base size - distribution happens from here
-        baseSize,
-        mainMargin,
-        flexGrow: childStyle.flexGrow,
-        flexShrink: childStyle.flexShrink,
-        minMain,
-        maxMain,
-        mainStartMarginAuto,
-        mainEndMarginAuto,
-        mainStartMarginValue,
-        mainEndMarginValue,
-        frozen: false, // Will be set during distribution
-      })
-
-      // Free space calculation uses BASE sizes (per Yoga/CSS spec algorithm)
-      // The freeze loop handles min/max clamping iteratively
-      totalBaseMain += baseSize + mainMargin
-    }
-
-    // Break children into flex lines for wrap support
-    const lines = breakIntoLines(children, mainAxisSize, mainGap, style.flexWrap)
-    const crossGap = isRow ? style.gap[1] : style.gap[0]
-
-    // Process each line: distribute flex space
-    for (const line of lines) {
-      const lineChildren = line.children
-      if (lineChildren.length === 0) continue
-
-      // Calculate total base main and gaps for this line
-      const lineTotalBaseMain = lineChildren.reduce((sum, c) => sum + c.baseSize + c.mainMargin, 0)
-      const lineTotalGaps = lineChildren.length > 1 ? mainGap * (lineChildren.length - 1) : 0
-
-      // Distribute free space using grow or shrink factors
-      let effectiveMainSize = mainAxisSize
-      if (Number.isNaN(mainAxisSize)) {
-        // Shrink-wrap mode - check if max constraint applies
-        const maxMainVal = isRow ? style.maxWidth : style.maxHeight
-        if (maxMainVal.unit !== C.UNIT_UNDEFINED) {
-          const maxMain = resolveValue(maxMainVal, isRow ? availableWidth : availableHeight)
-          if (!Number.isNaN(maxMain) && lineTotalBaseMain + lineTotalGaps > maxMain) {
-            const innerMain = isRow ? innerLeft + innerRight : innerTop + innerBottom
-            effectiveMainSize = maxMain - innerMain
-          }
-        }
-      }
-
-      if (!Number.isNaN(effectiveMainSize)) {
-        const adjustedFreeSpace = effectiveMainSize - lineTotalBaseMain - lineTotalGaps
-        distributeFlexSpace(lineChildren, adjustedFreeSpace)
-      }
-
-      // Apply min/max constraints to final sizes
-      for (const childLayout of lineChildren) {
-        childLayout.mainSize = Math.max(childLayout.minMain, Math.min(childLayout.maxMain, childLayout.mainSize))
-      }
-    }
-
-    // Calculate final used space and justify-content
-    // For single-line, use all children; for multi-line, this applies per-line during positioning
-    const totalGaps = children.length > 1 ? mainGap * (children.length - 1) : 0
-    const usedMain = children.reduce((sum, c) => sum + c.mainSize + c.mainMargin, 0) + totalGaps
-    // For auto-sized containers (NaN mainAxisSize), there's no remaining space to justify
-    // Use NaN check instead of style check - handles minWidth/minHeight constraints properly
-    const remainingSpace = Number.isNaN(mainAxisSize) ? 0 : mainAxisSize - usedMain
-
-    // Handle auto margins on main axis
-    // Auto margins absorb free space BEFORE justify-content
-    const totalAutoMargins = children.reduce(
-      (sum, c) => sum + (c.mainStartMarginAuto ? 1 : 0) + (c.mainEndMarginAuto ? 1 : 0),
-      0,
-    )
-    let hasAutoMargins = totalAutoMargins > 0
-
-    // Auto margins absorb ALL remaining space (including negative for overflow positioning)
-    if (hasAutoMargins) {
-      const autoMarginValue = remainingSpace / totalAutoMargins
-      for (const childLayout of children) {
-        if (childLayout.mainStartMarginAuto) {
-          childLayout.mainStartMarginValue = autoMarginValue
-        }
-        if (childLayout.mainEndMarginAuto) {
-          childLayout.mainEndMarginValue = autoMarginValue
-        }
-      }
-    }
-    // When space is negative or zero, auto margins stay at 0
-
-    let startOffset = 0
-    let itemSpacing = mainGap
-
-    // justify-content is ignored when any auto margins exist
-    if (!hasAutoMargins) {
-      switch (style.justifyContent) {
-        case C.JUSTIFY_FLEX_END:
-          startOffset = remainingSpace
-          break
-        case C.JUSTIFY_CENTER:
-          startOffset = remainingSpace / 2
-          break
-        case C.JUSTIFY_SPACE_BETWEEN:
-          // Only apply space-between when remaining space is positive
-          // With overflow (negative), fall back to flex-start behavior
-          if (children.length > 1 && remainingSpace > 0) {
-            itemSpacing = mainGap + remainingSpace / (children.length - 1)
-          }
-          break
-        case C.JUSTIFY_SPACE_AROUND:
-          if (children.length > 0) {
-            const extraSpace = remainingSpace / children.length
-            startOffset = extraSpace / 2
-            itemSpacing = mainGap + extraSpace
-          }
-          break
-        case C.JUSTIFY_SPACE_EVENLY:
-          if (children.length > 0) {
-            const extraSpace = remainingSpace / (children.length + 1)
-            startOffset = extraSpace
-            itemSpacing = mainGap + extraSpace
-          }
-          break
-      }
-    }
-
-    // NOTE: We do NOT round sizes here. Instead, we use edge-based rounding below.
-    // This ensures adjacent elements share exact boundaries without gaps.
-    // The key insight: round(pos) gives the edge position, width = round(end) - round(start)
-
-    // Compute baseline alignment info if needed
-    // For ALIGN_BASELINE in row direction, we need to know the max baseline first
-    let maxBaseline = 0
-    const childBaselines: number[] = []
-    const hasBaselineAlignment =
-      style.alignItems === C.ALIGN_BASELINE || relativeChildren.some((c) => c.style.alignSelf === C.ALIGN_BASELINE)
-
-    if (hasBaselineAlignment && isRow) {
-      // First pass: compute each child's baseline and find the maximum
-      for (let i = 0; i < children.length; i++) {
-        const childLayout = children[i]!
-        const child = childLayout.node
-        const childStyle = child.style
-
-        // Get cross-axis (top/bottom) margins for this child
-        // Use resolveEdgeValue to respect logical EDGE_START/END
-        const topMargin = resolveEdgeValue(childStyle.margin, 1, style.flexDirection, contentWidth, direction)
-
-        // Compute child's dimensions - need to do a mini-layout or use the cached size
-        let childWidth: number
-        let childHeight: number
-        const widthDim = childStyle.width
-        const heightDim = childStyle.height
-
-        if (widthDim.unit === C.UNIT_POINT) {
-          childWidth = widthDim.value
-        } else if (widthDim.unit === C.UNIT_PERCENT && !Number.isNaN(mainAxisSize)) {
-          childWidth = mainAxisSize * (widthDim.value / 100)
-        } else {
-          childWidth = childLayout.mainSize
-        }
-
-        if (heightDim.unit === C.UNIT_POINT) {
-          childHeight = heightDim.value
-        } else if (heightDim.unit === C.UNIT_PERCENT && !Number.isNaN(crossAxisSize)) {
-          childHeight = crossAxisSize * (heightDim.value / 100)
-        } else {
-          // Auto height - need to layout to get intrinsic size
-          // For now, do a preliminary layout (measurement, not final positioning)
-          layoutNode(child, childLayout.mainSize, NaN, 0, 0, 0, 0, direction)
-          childWidth = child.layout.width
-          childHeight = child.layout.height
-        }
-
-        // Compute baseline: use baselineFunc if available, otherwise use bottom of content box
-        let baseline: number
-        if (child.baselineFunc !== null) {
-          // Custom baseline function provided (e.g., for text nodes)
-          baseline = topMargin + child.baselineFunc(childWidth, childHeight)
-        } else {
-          // Fallback: bottom of content box (default for non-text elements)
-          // Note: We don't recursively propagate first-child baselines to avoid O(n^depth) cost
-          // This is a simplification from CSS spec but acceptable for TUI use cases
-          baseline = topMargin + childHeight
-        }
-        childBaselines.push(baseline)
-        maxBaseline = Math.max(maxBaseline, baseline)
-      }
-    }
-
-    // Compute line cross-axis sizes and offsets for flex-wrap
-    // Each child needs to know its line's cross offset
-    const childLineIndex = new Map<ChildLayout, number>()
-    const lineCrossOffsets: number[] = []
-    let cumulativeCrossOffset = 0
-
-    for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
-      const line = lines[lineIdx]!
-      lineCrossOffsets.push(cumulativeCrossOffset)
-
-      // Calculate max cross size for this line
-      let maxLineCross = 0
-      for (const childLayout of line.children) {
-        childLineIndex.set(childLayout, lineIdx)
-        // Estimate child cross size (will be computed more precisely during layout)
-        const childStyle = childLayout.node.style
-        const crossDim = isRow ? childStyle.height : childStyle.width
-        const crossMarginStart = isRow
-          ? resolveEdgeValue(childStyle.margin, 1, style.flexDirection, contentWidth, direction)
-          : resolveEdgeValue(childStyle.margin, 0, style.flexDirection, contentWidth, direction)
-        const crossMarginEnd = isRow
-          ? resolveEdgeValue(childStyle.margin, 3, style.flexDirection, contentWidth, direction)
-          : resolveEdgeValue(childStyle.margin, 2, style.flexDirection, contentWidth, direction)
-
-        let childCross = 0
-        if (crossDim.unit === C.UNIT_POINT) {
-          childCross = crossDim.value
-        } else if (crossDim.unit === C.UNIT_PERCENT && !Number.isNaN(crossAxisSize)) {
-          childCross = crossAxisSize * (crossDim.value / 100)
-        } else if (childLayout.node.children.length > 0) {
-          // Auto-sized container children: Phase 5 already laid them out with
-          // layoutNode to compute baseSize. The cross-axis size is available
-          // on the child's layout (height for row, width for column).
-          childCross = isRow ? childLayout.node.layout.height : childLayout.node.layout.width
-        } else {
-          // Auto - use a default or measure. For now, use 0 and let stretch handle it.
-          childCross = 0
-        }
-        maxLineCross = Math.max(maxLineCross, childCross + crossMarginStart + crossMarginEnd)
-      }
-      line.crossSize = maxLineCross > 0 ? maxLineCross : crossAxisSize / lines.length
-      cumulativeCrossOffset += line.crossSize + crossGap
-    }
-
-    // Apply alignContent to distribute lines in the cross axis
-    // This affects how multiple flex lines are positioned within the container
-    const isWrapReverse = style.flexWrap === C.WRAP_WRAP_REVERSE
-    const numLines = lines.length
-    if (!Number.isNaN(crossAxisSize) && numLines > 0) {
-      const totalLineCrossSize = cumulativeCrossOffset - crossGap // Remove trailing gap
-      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
-            for (let i = 0; i < numLines; i++) {
-              lineCrossOffsets[i]! += freeSpace
-            }
-            break
-
-          case C.ALIGN_CENTER:
-            // Lines centered
-            const centerOffset = freeSpace / 2
-            for (let i = 0; i < numLines; i++) {
-              lineCrossOffsets[i]! += centerOffset
-            }
-            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
-              }
-            }
-            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
-            }
-            break
-
-          case C.ALIGN_SPACE_EVENLY:
-            // Equal spacing between lines and at edges
-            if (numLines > 0) {
-              const spaceEvenlyGap = freeSpace / (numLines + 1)
-              for (let i = 0; i < numLines; i++) {
-                lineCrossOffsets[i]! += spaceEvenlyGap * (i + 1)
-              }
-            }
-            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++) {
-                lines[i]!.crossSize += extraPerLine
-                // Recalculate offset for subsequent lines
-                if (i > 0) {
-                  lineCrossOffsets[i] = lineCrossOffsets[i - 1]! + lines[i - 1]!.crossSize + crossGap
-                }
-              }
-            }
-            break
-
-          // ALIGN_FLEX_START is the default - lines already at start
-        }
-      }
-
-      // For wrap-reverse, lines should be positioned from the end of the cross axis
-      // The lines are already in reversed order from breakIntoLines().
-      // We just need to shift them so they align to the end instead of the start.
-      if (isWrapReverse) {
-        let totalLineCrossSize = 0
-        for (let i = 0; i < numLines; i++) {
-          totalLineCrossSize += lines[i]!.crossSize
-        }
-        totalLineCrossSize += crossGap * (numLines - 1)
-        const crossStartOffset = crossAxisSize - totalLineCrossSize
-        for (let i = 0; i < numLines; i++) {
-          lineCrossOffsets[i]! += crossStartOffset
-        }
-      }
-    }
-
-    // Position and layout children
-    // For reverse directions, start from the END of the container
-    // For RTL row layouts, treat as reversed (children flow right-to-left)
-    // RTL + reverse cancels out (XOR behavior)
-    const isRTL = direction === C.DIRECTION_RTL
-    const effectiveReverse = isRow ? isRTL !== isReverse : isReverse
-    // Use fractional mainPos for edge-based rounding
-    let mainPos = effectiveReverse ? mainAxisSize - startOffset : startOffset
-    let currentLineIdx = -1
-
-    log.debug?.(
-      "positioning children: isRow=%s, startOffset=%d, relativeChildren=%d, isReverse=%s, lines=%d",
-      isRow,
-      startOffset,
-      relativeChildren.length,
-      isReverse,
-      lines.length,
-    )
-
-    for (let i = 0; i < children.length; i++) {
-      const childLayout = children[i]!
-      const child = childLayout.node
-      const childStyle = child.style
-
-      // Check if we've moved to a new line (for flex-wrap)
-      const childLineIdx = childLineIndex.get(childLayout) ?? 0
-      if (childLineIdx !== currentLineIdx) {
-        currentLineIdx = childLineIdx
-        // Reset mainPos for new line
-        mainPos = effectiveReverse ? mainAxisSize - startOffset : startOffset
-      }
-
-      // Get cross-axis offset for this child's line
-      const lineCrossOffset = lineCrossOffsets[childLineIdx] ?? 0
-
-      // For main-axis margins, use computed auto margin values
-      // For cross-axis margins, resolve normally (auto margins on cross axis handled separately)
-      let childMarginLeft: number
-      let childMarginTop: number
-      let childMarginRight: number
-      let childMarginBottom: number
-
-      // CSS spec: percentage margins resolve against containing block's WIDTH only
-      // Use resolveEdgeValue to respect logical EDGE_START/END
-      if (isRow) {
-        // Row: main axis is horizontal
-        // In row-reverse, mainStart=right(2), mainEnd=left(0)
-        childMarginLeft =
-          childLayout.mainStartMarginAuto && !isReverse
-            ? childLayout.mainStartMarginValue
-            : childLayout.mainEndMarginAuto && isReverse
-              ? childLayout.mainEndMarginValue
-              : resolveEdgeValue(childStyle.margin, 0, style.flexDirection, contentWidth, direction)
-        childMarginRight =
-          childLayout.mainEndMarginAuto && !isReverse
-            ? childLayout.mainEndMarginValue
-            : childLayout.mainStartMarginAuto && isReverse
-              ? childLayout.mainStartMarginValue
-              : resolveEdgeValue(childStyle.margin, 2, style.flexDirection, contentWidth, direction)
-        childMarginTop = resolveEdgeValue(childStyle.margin, 1, style.flexDirection, contentWidth, direction)
-        childMarginBottom = resolveEdgeValue(childStyle.margin, 3, style.flexDirection, contentWidth, direction)
-      } else {
-        // Column: main axis is vertical
-        // In column-reverse, mainStart=bottom(3), mainEnd=top(1)
-        childMarginTop =
-          childLayout.mainStartMarginAuto && !isReverse
-            ? childLayout.mainStartMarginValue
-            : childLayout.mainEndMarginAuto && isReverse
-              ? childLayout.mainEndMarginValue
-              : resolveEdgeValue(childStyle.margin, 1, style.flexDirection, contentWidth, direction)
-        childMarginBottom =
-          childLayout.mainEndMarginAuto && !isReverse
-            ? childLayout.mainEndMarginValue
-            : childLayout.mainStartMarginAuto && isReverse
-              ? childLayout.mainStartMarginValue
-              : resolveEdgeValue(childStyle.margin, 3, style.flexDirection, contentWidth, direction)
-        childMarginLeft = resolveEdgeValue(childStyle.margin, 0, style.flexDirection, contentWidth, direction)
-        childMarginRight = resolveEdgeValue(childStyle.margin, 2, style.flexDirection, contentWidth, direction)
-      }
-
-      // Main axis size comes from flex algorithm (already rounded)
-      const childMainSize = childLayout.mainSize
-
-      // Cross axis: determine alignment mode
-      let alignment = style.alignItems
-      if (childStyle.alignSelf !== C.ALIGN_AUTO) {
-        alignment = childStyle.alignSelf
-      }
-
-      // 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
-      const crossDim = isRow ? childStyle.height : childStyle.width
-      const crossMargin = isRow ? childMarginTop + childMarginBottom : childMarginLeft + childMarginRight
-
-      // Check if parent has definite cross-axis size
-      // Parent can have definite cross from either:
-      // 1. Explicit style (width/height in points or percent)
-      // 2. Definite available space (crossAxisSize is not NaN)
-      const parentCrossDim = isRow ? style.height : style.width
-      const parentHasDefiniteCrossStyle = parentCrossDim.unit === C.UNIT_POINT || parentCrossDim.unit === C.UNIT_PERCENT
-      // crossAxisSize comes from available space - if it's a real number, we have a constraint
-      const parentHasDefiniteCross = parentHasDefiniteCrossStyle || !Number.isNaN(crossAxisSize)
-
-      if (crossDim.unit === C.UNIT_POINT) {
-        // Explicit cross size
-        childCrossSize = crossDim.value
-      } else if (crossDim.unit === C.UNIT_PERCENT) {
-        // 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
-      } else {
-        // Non-stretch alignment or no definite cross size - shrink-wrap to content
-        childCrossSize = NaN
-      }
-
-      // Apply cross-axis min/max constraints
-      const crossMinVal = isRow ? childStyle.minHeight : childStyle.minWidth
-      const crossMaxVal = isRow ? childStyle.maxHeight : childStyle.maxWidth
-      const crossMin = crossMinVal.unit !== C.UNIT_UNDEFINED ? resolveValue(crossMinVal, crossAxisSize) : 0
-      const crossMax = crossMaxVal.unit !== C.UNIT_UNDEFINED ? resolveValue(crossMaxVal, crossAxisSize) : Infinity
-
-      // Apply constraints - for NaN (shrink-wrap), use min as floor
-      if (Number.isNaN(childCrossSize)) {
-        // For shrink-wrap, min sets the floor - child will be at least this size
-        if (crossMin > 0) {
-          childCrossSize = crossMin
-        }
-      } else {
-        childCrossSize = Math.max(crossMin, Math.min(crossMax, childCrossSize))
-      }
-
-      // Handle intrinsic sizing for auto-sized children
-      // 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 mainIsAuto = mainDim.unit === C.UNIT_AUTO || mainDim.unit === C.UNIT_UNDEFINED
-      const hasFlexGrow = childLayout.flexGrow > 0
-      // Check if parent has definite main-axis size
-      const parentMainDim = isRow ? style.width : style.height
-      const parentHasDefiniteMain = parentMainDim.unit === C.UNIT_POINT || parentMainDim.unit === C.UNIT_PERCENT
-      // 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
-      let effectiveMainSize: number
-      if (hasFlexGrow) {
-        effectiveMainSize = childMainSize
-      } else if (mainIsAuto) {
-        // Child is auto: use flex-computed size which includes padding/border minimum
-        effectiveMainSize = childMainSize
-      } else {
-        effectiveMainSize = childMainSize
-      }
-
-      let childWidth = isRow ? effectiveMainSize : childCrossSize
-      let childHeight = isRow ? childCrossSize : effectiveMainSize
-
-      // Only use measure function for intrinsic sizing when flexGrow is NOT set
-      // When flexGrow > 0, the flex algorithm determines size, not the content
-      const shouldMeasure = child.hasMeasureFunc() && child.children.length === 0 && !hasFlexGrow
-      if (shouldMeasure) {
-        const widthAuto = childStyle.width.unit === C.UNIT_AUTO || childStyle.width.unit === C.UNIT_UNDEFINED
-        const heightAuto = childStyle.height.unit === C.UNIT_AUTO || childStyle.height.unit === C.UNIT_UNDEFINED
-
-        if (widthAuto || heightAuto) {
-          // Call measure function with available space
-          const widthMode = widthAuto ? C.MEASURE_MODE_AT_MOST : C.MEASURE_MODE_EXACTLY
-          const heightMode = heightAuto ? C.MEASURE_MODE_UNDEFINED : C.MEASURE_MODE_EXACTLY
-
-          // For unconstrained dimensions (NaN), use Infinity for measure func
-          const rawAvailW = widthAuto
-            ? isRow
-              ? mainAxisSize - mainPos // Remaining space after previous children
-              : crossAxisSize - crossMargin
-            : childStyle.width.value
-          const rawAvailH = heightAuto
-            ? isRow
-              ? crossAxisSize - crossMargin
-              : mainAxisSize - mainPos // Remaining space for COLUMN
-            : childStyle.height.value
-          const availW = Number.isNaN(rawAvailW) ? Infinity : rawAvailW
-          const availH = Number.isNaN(rawAvailH) ? Infinity : rawAvailH
-
-          const measured = child.measureFunc!(availW, widthMode, availH, heightMode)
-
-          // For measure function nodes without flexGrow, intrinsic size takes precedence
-          if (widthAuto) {
-            childWidth = measured.width
-          }
-          if (heightAuto) {
-            childHeight = measured.height
-          }
-        }
-      }
-
-      // Child position within content area (fractional for edge-based rounding)
-      // For reverse directions (including RTL for row), position from mainPos - childSize
-      // IMPORTANT: In reverse, swap which margin is applied to which side
-      // EDGE_START (margin[0]/[1]) becomes the trailing margin in reverse layout
-      // EDGE_END (margin[2]/[3]) becomes the leading margin in reverse layout
-      // For flex-wrap, add lineCrossOffset to cross-axis position
-      let childX: number
-      let childY: number
-      if (effectiveReverse) {
-        if (isRow) {
-          // Row-reverse or RTL: items positioned from right
-          // In RTL, EDGE_START is the right edge, so use childMarginRight as trailing margin
-          // In row-reverse LTR, EDGE_END is the right edge, so use childMarginRight too
-          childX = mainPos - childMainSize - childMarginRight
-          childY = lineCrossOffset + childMarginTop
-        } else {
-          // Column-reverse: items positioned from bottom
-          childX = lineCrossOffset + childMarginLeft
-          childY = mainPos - childMainSize - childMarginTop
-        }
-      } else {
-        childX = isRow ? mainPos + childMarginLeft : lineCrossOffset + childMarginLeft
-        childY = isRow ? lineCrossOffset + childMarginTop : mainPos + childMarginTop
-      }
-
-      // Edge-based rounding using ABSOLUTE coordinates (Yoga-compatible)
-      // This ensures adjacent elements share exact boundaries without gaps
-      // Key insight: round absolute edges, derive sizes from differences
-      const fractionalLeft = innerLeft + childX
-      const fractionalTop = innerTop + childY
-
-      // 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) {
-        const relLeftPos = childStyle.position[0]
-        const relTopPos = childStyle.position[1]
-        const relRightPos = childStyle.position[2]
-        const relBottomPos = childStyle.position[3]
-
-        // Left offset (takes precedence over right)
-        if (relLeftPos.unit !== C.UNIT_UNDEFINED) {
-          posOffsetX = resolveValue(relLeftPos, contentWidth)
-        } else if (relRightPos.unit !== C.UNIT_UNDEFINED) {
-          posOffsetX = -resolveValue(relRightPos, contentWidth)
-        }
-
-        // Top offset (takes precedence over bottom)
-        if (relTopPos.unit !== C.UNIT_UNDEFINED) {
-          posOffsetY = resolveValue(relTopPos, contentHeight)
-        } else if (relBottomPos.unit !== C.UNIT_UNDEFINED) {
-          posOffsetY = -resolveValue(relBottomPos, contentHeight)
-        }
-      }
-
-      // Compute ABSOLUTE float positions for edge rounding (including position offsets)
-      // absX/absY are the parent's absolute position from document root
-      // Include BOTH parent's position offset and child's position offset
-      const absChildLeft = absX + marginLeft + parentPosOffsetX + fractionalLeft + posOffsetX
-      const absChildTop = absY + marginTop + parentPosOffsetY + fractionalTop + posOffsetY
-
-      // For main axis: round ABSOLUTE edges and derive size
-      // Only use edge-based rounding when childMainSize is valid (positive)
-      let roundedAbsMainStart: number
-      let roundedAbsMainEnd: number
-      let edgeBasedMainSize: number
-      const useEdgeBasedRounding = childMainSize > 0
-
-      // Compute child's box model minimum early (needed for edge-based rounding)
-      // Use resolveEdgeValue to respect logical EDGE_START/END for padding
-      const childPaddingL = resolveEdgeValue(childStyle.padding, 0, childStyle.flexDirection, contentWidth, direction)
-      const childPaddingT = resolveEdgeValue(childStyle.padding, 1, childStyle.flexDirection, contentWidth, direction)
-      const childPaddingR = resolveEdgeValue(childStyle.padding, 2, childStyle.flexDirection, contentWidth, direction)
-      const childPaddingB = resolveEdgeValue(childStyle.padding, 3, childStyle.flexDirection, contentWidth, direction)
-      const childBorderL = resolveEdgeBorderValue(childStyle.border, 0, childStyle.flexDirection, direction)
-      const childBorderT = resolveEdgeBorderValue(childStyle.border, 1, childStyle.flexDirection, direction)
-      const childBorderR = resolveEdgeBorderValue(childStyle.border, 2, childStyle.flexDirection, direction)
-      const childBorderB = resolveEdgeBorderValue(childStyle.border, 3, childStyle.flexDirection, direction)
-      const childMinW = childPaddingL + childPaddingR + childBorderL + childBorderR
-      const childMinH = childPaddingT + childPaddingB + childBorderT + childBorderB
-      const childMinMain = isRow ? childMinW : childMinH
-
-      // Apply box model constraint to childMainSize before edge rounding
-      const constrainedMainSize = Math.max(childMainSize, childMinMain)
-
-      if (useEdgeBasedRounding) {
-        if (isRow) {
-          roundedAbsMainStart = Math.round(absChildLeft)
-          roundedAbsMainEnd = Math.round(absChildLeft + constrainedMainSize)
-          edgeBasedMainSize = roundedAbsMainEnd - roundedAbsMainStart
-        } else {
-          roundedAbsMainStart = Math.round(absChildTop)
-          roundedAbsMainEnd = Math.round(absChildTop + constrainedMainSize)
-          edgeBasedMainSize = roundedAbsMainEnd - roundedAbsMainStart
-        }
-      } else {
-        // For children without valid main size, use simple rounding
-        roundedAbsMainStart = isRow ? Math.round(absChildLeft) : Math.round(absChildTop)
-        edgeBasedMainSize = childMinMain // Use minimum size instead of 0
-      }
-
-      // 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)
-
-      // 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
-      const mainDimForLayoutCall = isRow ? childStyle.width : childStyle.height
-
-      // For auto-sized children (no flexGrow, no measureFunc), pass NaN to let them compute intrinsic size
-      // Otherwise layoutNode would subtract margins from the available size
-      // IMPORTANT: For percent-sized children, pass PARENT's content size so the child resolves its
-      // percent against the correct containing block. This ensures grandchildren also resolve correctly.
-      const mainIsPercent = mainDimForLayoutCall.unit === C.UNIT_PERCENT
-      const crossIsPercent = crossDimForLayoutCall.unit === C.UNIT_PERCENT
-
-      let passWidthToChild: number
-      if (isRow && mainIsAuto && !hasFlexGrow) {
-        passWidthToChild = NaN
-      } else if (!isRow && crossIsAutoForLayoutCall && !parentHasDefiniteCross) {
-        passWidthToChild = NaN
-      } else if (isRow && mainIsPercent) {
-        // Percent width (main axis in row): pass parent's content width
-        passWidthToChild = contentWidth
-      } else if (!isRow && crossIsPercent) {
-        // Percent width (cross axis in column): pass parent's content width
-        passWidthToChild = contentWidth
-      } else {
-        passWidthToChild = childWidth
-      }
-
-      let passHeightToChild: number
-      if (!isRow && mainIsAuto && !hasFlexGrow) {
-        passHeightToChild = NaN
-      } else if (isRow && crossIsAutoForLayoutCall && !parentHasDefiniteCross) {
-        passHeightToChild = NaN
-      } else if (!isRow && mainIsPercent) {
-        // Percent height (main axis in column): pass parent's content height
-        passHeightToChild = contentHeight
-      } else if (isRow && crossIsPercent) {
-        // Percent height (cross axis in row): pass parent's content height
-        passHeightToChild = contentHeight
-      } else {
-        passHeightToChild = childHeight
-      }
-
-      // Recurse to layout any grandchildren
-      // Pass the child's FLOAT absolute position (margin box start, before child's own margin)
-      // absChildLeft/Top include the child's margins, so subtract them to get margin box start
-      const childAbsX = absChildLeft - childMarginLeft
-      const childAbsY = absChildTop - childMarginTop
-      layoutNode(child, passWidthToChild, passHeightToChild, childLeft, childTop, childAbsX, childAbsY, direction)
-
-      // Enforce box model constraint: child can't be smaller than its padding + border
-      // (using childMinW/childMinH computed earlier for edge-based rounding)
-      if (childWidth < childMinW) childWidth = childMinW
-      if (childHeight < childMinH) childHeight = childMinH
-
-      // Set this child's layout - override what layoutNode computed
-      // Override if any of:
-      // - Child has explicit main dimension (not auto)
-      // - Child has flexGrow > 0 (flex distribution applied)
-      // - Child has measureFunc
-      // - Parent did flex distribution (effectiveMainSize not NaN) - covers flex-shrink case
-      const hasMeasure = child.hasMeasureFunc() && child.children.length === 0
-      const parentDidFlexDistribution = !Number.isNaN(effectiveMainSize)
-      if (!mainIsAuto || hasFlexGrow || hasMeasure || parentDidFlexDistribution) {
-        // Use edge-based rounding: size = round(end_edge) - round(start_edge)
-        if (isRow) {
-          child.layout.width = edgeBasedMainSize
-        } else {
-          child.layout.height = edgeBasedMainSize
-        }
-      }
-      // Cross axis: only override for explicit sizing or when we have a real constraint
-      // For auto-sized children, let layoutNode determine the size
-      const crossDimForCheck = isRow ? childStyle.height : childStyle.width
-      const crossIsAuto = crossDimForCheck.unit === C.UNIT_AUTO || crossDimForCheck.unit === C.UNIT_UNDEFINED
-      // Only override if child has explicit sizing OR parent has explicit cross size
-      // When parent has auto cross size, let children shrink-wrap first
-      // Note: parentCrossDim and parentHasDefiniteCross already computed above
-      const parentCrossIsAuto = !parentHasDefiniteCross
-      // Also check if childCrossSize was constrained by min/max - if so, we should override
-      const hasCrossMinMax = crossMinVal.unit !== C.UNIT_UNDEFINED || crossMaxVal.unit !== C.UNIT_UNDEFINED
-      const shouldOverrideCross =
-        !crossIsAuto ||
-        (!parentCrossIsAuto && alignment === C.ALIGN_STRETCH) ||
-        (hasCrossMinMax && !Number.isNaN(childCrossSize))
-      if (shouldOverrideCross) {
-        if (isRow) {
-          child.layout.height = Math.round(childHeight)
-        } else {
-          child.layout.width = Math.round(childWidth)
-        }
-      }
-      // Store RELATIVE position (within parent's content area), not absolute
-      // This matches Yoga's behavior where getComputedLeft/Top return relative positions
-      // Position offsets are already included in childLeft/childTop via edge-based rounding
-      child.layout.left = childLeft
-      child.layout.top = childTop
-
-      // Update childWidth/childHeight to match actual computed layout for mainPos calculation
-      childWidth = child.layout.width
-      childHeight = child.layout.height
-
-      // Apply cross-axis alignment offset
-      const finalCrossSize = isRow ? child.layout.height : child.layout.width
-      let crossOffset = 0
-
-      // Check for auto margins on cross axis - they override alignment
-      const crossStartMargin = isRow ? childStyle.margin[1] : childStyle.margin[0] // top for row, left for column
-      const crossEndMargin = isRow ? childStyle.margin[3] : childStyle.margin[2] // bottom for row, right for column
-      const hasAutoStartMargin = crossStartMargin.unit === C.UNIT_AUTO
-      const hasAutoEndMargin = crossEndMargin.unit === C.UNIT_AUTO
-      const availableCrossSpace = crossAxisSize - finalCrossSize - crossMargin
-
-      if (hasAutoStartMargin && hasAutoEndMargin) {
-        // Both auto: center the item
-        crossOffset = availableCrossSpace / 2
-      } else if (hasAutoStartMargin) {
-        // Auto start margin: push to end
-        crossOffset = availableCrossSpace
-      } else if (hasAutoEndMargin) {
-        // Auto end margin: stay at start (crossOffset = 0)
-        crossOffset = 0
-      } else {
-        // No auto margins: use alignment
-        switch (alignment) {
-          case C.ALIGN_FLEX_END:
-            crossOffset = availableCrossSpace
-            break
-          case C.ALIGN_CENTER:
-            crossOffset = availableCrossSpace / 2
-            break
-          case C.ALIGN_BASELINE:
-            // Baseline alignment only applies to row direction
-            // For column direction, it falls through to flex-start (default)
-            if (isRow && childBaselines.length > 0) {
-              crossOffset = maxBaseline - childBaselines[i]!
-            }
-            break
-        }
-      }
-
-      if (crossOffset !== 0) {
-        if (isRow) {
-          child.layout.top += Math.round(crossOffset)
-        } else {
-          child.layout.left += Math.round(crossOffset)
-        }
-      }
-
-      // Advance main position using CONSTRAINED size for proper positioning
-      // Use constrainedMainSize (box model minimum applied) instead of childLayout.mainSize
-      const fractionalMainSize = constrainedMainSize
-      // Use computed margin values (including auto margins)
-      const totalMainMargin = childLayout.mainStartMarginValue + childLayout.mainEndMarginValue
-      log.debug?.(
-        "  child %d: mainPos=%d → top=%d (fractionalMainSize=%d, totalMainMargin=%d)",
-        i,
-        mainPos,
-        child.layout.top,
-        fractionalMainSize,
-        totalMainMargin,
-      )
-      if (effectiveReverse) {
-        mainPos -= fractionalMainSize + totalMainMargin
-        if (i < children.length - 1) {
-          mainPos -= itemSpacing
-        }
-      } else {
-        mainPos += fractionalMainSize + totalMainMargin
-        if (i < children.length - 1) {
-          mainPos += itemSpacing
-        }
-      }
-    }
-
-    // For auto-sized containers (including root), shrink-wrap to content
-    // Compute actual used main space from child layouts (not pre-computed childLayout.mainSize which may be 0)
-    let actualUsedMain = 0
-    for (const childLayout of children) {
-      const childMainSize = isRow ? childLayout.node.layout.width : childLayout.node.layout.height
-      const totalMainMargin = childLayout.mainStartMarginValue + childLayout.mainEndMarginValue
-      actualUsedMain += childMainSize + totalMainMargin
-    }
-    actualUsedMain += totalGaps
-
-    if (isRow && style.width.unit !== C.UNIT_POINT && style.width.unit !== C.UNIT_PERCENT) {
-      // 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) {
-      // 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 childLayout of children) {
-      const childCross = isRow ? childLayout.node.layout.height : childLayout.node.layout.width
-      const childMargin = isRow
-        ? resolveEdgeValue(childLayout.node.style.margin, 1, style.flexDirection, contentWidth, direction) +
-          resolveEdgeValue(childLayout.node.style.margin, 3, style.flexDirection, contentWidth, direction)
-        : resolveEdgeValue(childLayout.node.style.margin, 0, style.flexDirection, contentWidth, direction) +
-          resolveEdgeValue(childLayout.node.style.margin, 2, style.flexDirection, contentWidth, direction)
-      maxCrossSize = Math.max(maxCrossSize, childCross + childMargin)
-    }
-    // Cross-axis shrink-wrap for auto-sized dimension
-    // Only shrink-wrap if the original available size was truly unconstrained (NaN)
-    // If a definite size was passed to calculateLayout, keep that size
-    if (
-      isRow &&
-      style.height.unit !== C.UNIT_POINT &&
-      style.height.unit !== C.UNIT_PERCENT &&
-      Number.isNaN(availableHeight)
-    ) {
-      // Auto-height row with unconstrained height: shrink-wrap to max child height
-      nodeHeight = maxCrossSize + innerTop + innerBottom
-    }
-    if (
-      !isRow &&
-      style.width.unit !== C.UNIT_POINT &&
-      style.width.unit !== C.UNIT_PERCENT &&
-      Number.isNaN(availableWidth)
-    ) {
-      // Auto-width column with unconstrained width: shrink-wrap to max child width
-      nodeWidth = maxCrossSize + innerLeft + innerRight
-    }
-  }
-
-  // Re-apply min/max constraints after any shrink-wrap adjustments
-  // This ensures containers don't violate their constraints after auto-sizing
-  nodeWidth = applyMinMax(nodeWidth, style.minWidth, style.maxWidth, availableWidth)
-  nodeHeight = applyMinMax(nodeHeight, style.minHeight, style.maxHeight, availableHeight)
-
-  // Re-enforce box model constraint: minimum size = padding + border
-  // This must be applied AFTER applyMinMax since min/max can't reduce below padding+border
-  if (!Number.isNaN(nodeWidth) && nodeWidth < minInnerWidth) {
-    nodeWidth = minInnerWidth
-  }
-  if (!Number.isNaN(nodeHeight) && nodeHeight < minInnerHeight) {
-    nodeHeight = minInnerHeight
-  }
-
-  // Set this node's layout using edge-based rounding (Yoga-compatible)
-  // Use parentPosOffsetX/Y computed earlier (includes position offsets)
-  // Compute absolute positions for edge-based rounding
-  const absNodeLeft = absX + marginLeft + parentPosOffsetX
-  const absNodeTop = absY + marginTop + parentPosOffsetY
-  const absNodeRight = absNodeLeft + nodeWidth
-  const absNodeBottom = absNodeTop + nodeHeight
-
-  // Round edges and derive sizes (Yoga algorithm)
-  const roundedAbsLeft = Math.round(absNodeLeft)
-  const roundedAbsTop = Math.round(absNodeTop)
-  const roundedAbsRight = Math.round(absNodeRight)
-  const roundedAbsBottom = Math.round(absNodeBottom)
-
-  layout.width = roundedAbsRight - roundedAbsLeft
-  layout.height = roundedAbsBottom - roundedAbsTop
-  // Position is relative to parent, derived from absolute rounding
-  const roundedAbsParentLeft = Math.round(absX)
-  const roundedAbsParentTop = Math.round(absY)
-  layout.left = roundedAbsLeft - roundedAbsParentLeft
-  layout.top = roundedAbsTop - roundedAbsParentTop
-
-  // Layout absolute children - handle left/right/top/bottom offsets
-  // Absolute positioning uses the PADDING BOX as the containing block
-  // (inside border but INCLUDING padding, not the content box)
-  const absInnerLeft = borderLeft
-  const absInnerTop = borderTop
-  const absInnerRight = borderRight
-  const absInnerBottom = borderBottom
-  const absPaddingBoxW = nodeWidth - absInnerLeft - absInnerRight
-  const absPaddingBoxH = nodeHeight - absInnerTop - absInnerBottom
-  // Content box dimensions for percentage resolution of absolute children
-  const absContentBoxW = absPaddingBoxW - paddingLeft - paddingRight
-  const absContentBoxH = absPaddingBoxH - paddingTop - paddingBottom
-  const isRow = isRowDirection(style.flexDirection)
-
-  for (const child of absoluteChildren) {
-    const childStyle = child.style
-    // CSS spec: percentage margins resolve against containing block's WIDTH only
-    // Use resolveEdgeValue to respect logical EDGE_START/END
-    const childMarginLeft = resolveEdgeValue(childStyle.margin, 0, style.flexDirection, nodeWidth, direction)
-    const childMarginTop = resolveEdgeValue(childStyle.margin, 1, style.flexDirection, nodeWidth, direction)
-    const childMarginRight = resolveEdgeValue(childStyle.margin, 2, style.flexDirection, nodeWidth, direction)
-    const childMarginBottom = resolveEdgeValue(childStyle.margin, 3, style.flexDirection, nodeWidth, direction)
-
-    // Position offsets from setPosition(edge, value)
-    const leftPos = childStyle.position[0]
-    const topPos = childStyle.position[1]
-    const rightPos = childStyle.position[2]
-    const bottomPos = childStyle.position[3]
-
-    const hasLeft = leftPos.unit !== C.UNIT_UNDEFINED
-    const hasRight = rightPos.unit !== C.UNIT_UNDEFINED
-    const hasTop = topPos.unit !== C.UNIT_UNDEFINED
-    const hasBottom = bottomPos.unit !== C.UNIT_UNDEFINED
-
-    // 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
-    const contentH = absPaddingBoxH
-
-    // Determine child width
-    // - If both left and right set with auto width: stretch to fill
-    // - If auto width but NOT both left and right: shrink to intrinsic (NaN)
-    // - For percentage width: resolve against content box
-    // - Otherwise (explicit width): use available width as constraint
-    let childAvailWidth: number
-    const widthIsAuto = childStyle.width.unit === C.UNIT_AUTO || childStyle.width.unit === C.UNIT_UNDEFINED
-    const widthIsPercent = childStyle.width.unit === C.UNIT_PERCENT
-    if (widthIsAuto && hasLeft && hasRight) {
-      childAvailWidth = contentW - leftOffset - rightOffset - childMarginLeft - childMarginRight
-    } else if (widthIsAuto) {
-      childAvailWidth = NaN // Shrink to intrinsic size
-    } else if (widthIsPercent) {
-      // Percentage widths resolve against content box (inside padding)
-      childAvailWidth = absContentBoxW
-    } else {
-      childAvailWidth = contentW
-    }
-
-    // Determine child height
-    // - If both top and bottom set with auto height: stretch to fill
-    // - If auto height but NOT both top and bottom: shrink to intrinsic (NaN)
-    // - For percentage height: resolve against content box
-    // - Otherwise (explicit height): use available height as constraint
-    let childAvailHeight: number
-    const heightIsAuto = childStyle.height.unit === C.UNIT_AUTO || childStyle.height.unit === C.UNIT_UNDEFINED
-    const heightIsPercent = childStyle.height.unit === C.UNIT_PERCENT
-    if (heightIsAuto && hasTop && hasBottom) {
-      childAvailHeight = contentH - topOffset - bottomOffset - childMarginTop - childMarginBottom
-    } else if (heightIsAuto) {
-      childAvailHeight = NaN // Shrink to intrinsic size
-    } else if (heightIsPercent) {
-      // Percentage heights resolve against content box (inside padding)
-      childAvailHeight = absContentBoxH
-    } else {
-      childAvailHeight = contentH
-    }
-
-    // Compute child position
-    let childX = childMarginLeft + leftOffset
-    let childY = childMarginTop + topOffset
-
-    // First, layout the child to get its dimensions
-    // Use padding box origin (absInnerLeft/Top = border only)
-    // Compute child's absolute position (margin box start, before child's own margin)
-    // Parent's padding box = absX + marginLeft + borderLeft = absX + marginLeft + absInnerLeft
-    // Child's margin box = parent's padding box + leftOffset
-    const childAbsX = absX + marginLeft + absInnerLeft + leftOffset
-    const childAbsY = absY + marginTop + absInnerTop + topOffset
-    // Preserve NaN for shrink-wrap mode - only clamp real numbers to 0
-    const clampIfNumber = (v: number) => (Number.isNaN(v) ? NaN : Math.max(0, v))
-    layoutNode(
-      child,
-      clampIfNumber(childAvailWidth),
-      clampIfNumber(childAvailHeight),
-      layout.left + absInnerLeft + childX,
-      layout.top + absInnerTop + childY,
-      childAbsX,
-      childAbsY,
-      direction,
-    )
-
-    // Now compute final position based on right/bottom if left/top not set
-    const childWidth = child.layout.width
-    const childHeight = child.layout.height
-
-    // Apply alignment when no explicit position set
-    // 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) {
-      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
-      childX = contentW - rightOffset - childMarginRight - childWidth
-    } else if (hasLeft && hasRight && widthIsAuto) {
-      // Stretch width already handled above
-      child.layout.width = Math.round(childAvailWidth)
-    }
-
-    if (!hasTop && !hasBottom) {
-      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
-      childY = contentH - bottomOffset - childMarginBottom - childHeight
-    } else if (hasTop && hasBottom && heightIsAuto) {
-      // Stretch height already handled above
-      child.layout.height = Math.round(childAvailHeight)
-    }
-
-    // Set final position (relative to container padding box)
-    child.layout.left = Math.round(absInnerLeft + childX)
-    child.layout.top = Math.round(absInnerTop + childY)
-  }
-}
-
-// ============================================================================
-// Layout Stats (stubs for API compatibility with zero-alloc version)
-// ============================================================================
-// The classic algorithm doesn't track detailed stats, but we export stubs
-// so the public API remains consistent between versions.
-
-export let layoutNodeCalls = 0
-export let layoutSizingCalls = 0
-export let layoutPositioningCalls = 0
-export let layoutCacheHits = 0
-
-export function resetLayoutStats(): void {
-  layoutNodeCalls = 0
-  layoutSizingCalls = 0
-  layoutPositioningCalls = 0
-  layoutCacheHits = 0
-}