flexily 0.3.0 → 0.3.2

package/dist/classic/layout.js

@@ -1,1567 +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 { 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) {
-    return flexDirection === C.FLEX_DIRECTION_ROW || flexDirection === C.FLEX_DIRECTION_ROW_REVERSE;
-}
-/**
- * Check if flex direction is reversed.
- */
-export function isReverseDirection(flexDirection) {
-    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, physicalIndex, _flexDirection, direction = C.DIRECTION_LTR) {
-    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, physicalIndex, // 0=left, 1=top, 2=right, 3=bottom
-flexDirection, availableSize, direction = C.DIRECTION_LTR) {
-    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, physicalIndex, flexDirection, direction = C.DIRECTION_LTR) {
-    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, physicalIndex, // 0=left, 1=top, 2=right, 3=bottom
-_flexDirection, direction = C.DIRECTION_LTR) {
-    const isRTL = direction === C.DIRECTION_RTL;
-    // START/END always map to left/right (inline direction)
-    let logicalSlot;
-    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) {
-    for (const child of node.children) {
-        ;
-        child["_hasNewLayout"] = true;
-        markSubtreeLayoutSeen(child);
-    }
-}
-export function countNodes(node) {
-    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;
-/**
- * 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, mainAxisSize, mainGap, wrap) {
-    // 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 = [];
-    let currentLine = [];
-    let lineMainSize = 0;
-    for (const child of children) {
-        const childMainSize = child.baseSize + 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, initialFreeSpace) {
-    // 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, availableWidth, availableHeight, direction = C.DIRECTION_LTR) {
-    // 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, availableWidth, availableHeight, offsetX, offsetY, absX, absY, direction = C.DIRECTION_LTR) {
-    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;
-    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;
-    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;
-    if (style.positionType === C.POSITION_TYPE_STATIC || 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 = [];
-        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 = [];
-        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;
-                let childHeight;
-                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;
-                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();
-        const lineCrossOffsets = [];
-        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 {
-                    // 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;
-            let childMarginTop;
-            let childMarginRight;
-            let childMarginBottom;
-            // 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;
-            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;
-            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;
-            let childY;
-            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/STATIC positioned children
-            // 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];
-                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;
-            let roundedAbsMainEnd;
-            let edgeBasedMainSize;
-            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;
-            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;
-            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;
-    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;
-        const leftOffset = resolveValue(leftPos, nodeWidth);
-        const topOffset = resolveValue(topPos, nodeHeight);
-        const rightOffset = resolveValue(rightPos, nodeWidth);
-        const bottomOffset = resolveValue(bottomPos, nodeHeight);
-        // 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;
-        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;
-        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.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/justify-content apply when no position offsets
-        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;
-            }
-        }
-        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) {
-            // 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;
-            }
-        }
-        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 resolveEdgeCalls = 0;
-export let layoutSizingCalls = 0;
-export let layoutPositioningCalls = 0;
-export let layoutCacheHits = 0;
-export function resetLayoutStats() {
-    layoutNodeCalls = 0;
-    resolveEdgeCalls = 0;
-    layoutSizingCalls = 0;
-    layoutPositioningCalls = 0;
-    layoutCacheHits = 0;
-}
-//# sourceMappingURL=layout.js.map