@number10/jsx-core 5.0.0

package/dist/layout/layout-engine.js

@@ -0,0 +1,628 @@
+import { normalizeGap } from "../core-props.js";
+import { DebugLogger } from "../dev-config.js";
+import { getOrCreateGlobalValue, setGlobalValue, getGlobalValue } from "../global-registry.js";
+import { applyContainerDimensions } from "./appliers/container-applier.js";
+import { applyChildPositions } from "./appliers/position-applier.js";
+import { ColumnLayoutStrategy } from "./strategies/column-layout.js";
+import { RowLayoutStrategy } from "./strategies/row-layout.js";
+import { StackLayoutStrategy } from "./strategies/stack-layout.js";
+import { isLayoutChild, processNestedContainer, getChildSize, getMargin } from "./utils/child-utils.js";
+import { normalizePadding, calculateContainerSize } from "./utils/dimension-calculator.js";
+import { hasFlexChildren, distributeFlexSpace } from "./utils/flex-distributor.js";
+import { parseSize, resolveSize, clampSize } from "./utils/size-resolver.js";
+import { calculateJustifyContent, calculateAlignItems } from "./utils/spacing-calculator.js";
+const GLOBAL_NS = "@number10/jsx-core:layout";
+const _overflowClipRegistryKey = /* @__PURE__ */ Symbol.for(`${GLOBAL_NS}:overflowClipRegistry`);
+const _onAfterLayoutKey = /* @__PURE__ */ Symbol.for(`${GLOBAL_NS}:onAfterLayout`);
+function getOverflowClipRegistry() {
+  return getOrCreateGlobalValue(_overflowClipRegistryKey, () => []);
+}
+function getOnAfterLayout() {
+  return getGlobalValue(_onAfterLayoutKey) ?? noopAfterLayout;
+}
+function setOnAfterLayout(fn) {
+  setGlobalValue(_onAfterLayoutKey, fn);
+}
+const noopAfterLayout = () => {
+};
+function registerApplyOverflowClip(fn) {
+  getOverflowClipRegistry().push(fn);
+}
+function setApplyOverflowClip(fn) {
+  const registry = getOverflowClipRegistry();
+  registry.length = 0;
+  registry.push(fn);
+}
+function setAfterLayout(fn) {
+  setOnAfterLayout(fn);
+}
+class DeferredLayoutQueue {
+  static callbacks = [];
+  static scheduled = false;
+  /**
+   * Schedule a callback to execute after current layout pass completes
+   * All callbacks are batched and executed in single requestAnimationFrame
+   * @param callback - Function to execute in next frame
+   */
+  static defer(callback) {
+    this.callbacks.push(callback);
+    if (!this.scheduled) {
+      this.scheduled = true;
+      requestAnimationFrame(() => this.flush());
+    }
+  }
+  /**
+   * Execute all pending callbacks in batch
+   * Called once per frame via requestAnimationFrame
+   */
+  static flush() {
+    this.scheduled = false;
+    const callbacks = [...this.callbacks];
+    this.callbacks = [];
+    for (const callback of callbacks) {
+      try {
+        callback();
+      } catch (error) {
+        DebugLogger.error("DeferredLayoutQueue", "Error in deferred callback:", error);
+      }
+    }
+  }
+}
+class LayoutBatchQueue {
+  static pending = /* @__PURE__ */ new Map();
+  static scheduled = false;
+  /**
+   * Enable synchronous mode for testing
+   * When true, layouts execute immediately instead of batching
+   */
+  static synchronous = false;
+  /**
+   * Schedule a layout calculation to execute after current call stack
+   * Uses microtask (Promise) instead of requestAnimationFrame to avoid flickering
+   * If container is already scheduled, updates entry with latest props
+   * @param container - Container to calculate layout for
+   * @param containerProps - Layout props
+   * @param parentSize - Optional parent size for percentage resolution
+   * @param parentPadding - Optional parent padding for fill resolution
+   */
+  static schedule(container, containerProps, parentSize, parentPadding) {
+    if (this.synchronous) {
+      calculateLayoutImmediate(container, containerProps, parentSize, parentPadding);
+      return;
+    }
+    this.pending.set(container, { container, containerProps, parentSize, parentPadding });
+    if (!this.scheduled) {
+      this.scheduled = true;
+      Promise.resolve().then(() => this.flush());
+    }
+  }
+  /**
+   * Execute all pending layout calculations immediately
+   * Processes in bottom-up order (deepest children first)
+   * This prevents redundant parent recalculations
+   */
+  static flush() {
+    this.scheduled = false;
+    if (this.pending.size === 0) return;
+    DebugLogger.time("performance", "LayoutBatchQueue.flush");
+    const entries = Array.from(this.pending.values());
+    this.pending.clear();
+    entries.sort((a, b) => {
+      const depthA = getContainerDepth(a.container);
+      const depthB = getContainerDepth(b.container);
+      return depthB - depthA;
+    });
+    for (const entry of entries) {
+      try {
+        const node = entry.container;
+        if (node.destroyed === true) continue;
+        if (entry.container.visible === false) continue;
+        calculateLayoutImmediate(
+          entry.container,
+          entry.containerProps,
+          entry.parentSize,
+          entry.parentPadding
+        );
+      } catch (error) {
+        DebugLogger.error("LayoutBatchQueue", "Error calculating layout:", error);
+      }
+    }
+    DebugLogger.timeEnd("performance", "LayoutBatchQueue.flush");
+  }
+}
+function getContainerDepth(container) {
+  let depth = 0;
+  let current = getLayoutParent(container);
+  while (current) {
+    depth++;
+    current = getLayoutParent(current);
+  }
+  return depth;
+}
+function getLayoutParent(container) {
+  if (container.__layoutParent) {
+    return container.__layoutParent;
+  }
+  if (container.parent) {
+    return container.parent;
+  }
+  const parentContainer = container.parentContainer;
+  if (parentContainer && typeof parentContainer === "object") {
+    return parentContainer;
+  }
+  return void 0;
+}
+function applyOverflowMask(container, containerProps, width, height) {
+  for (const clip of getOverflowClipRegistry()) {
+    clip(container, containerProps, width, height);
+  }
+}
+const strategies = {
+  column: new ColumnLayoutStrategy(),
+  row: new RowLayoutStrategy(),
+  stack: new StackLayoutStrategy()
+};
+const LAYOUT_CYCLE_EPSILON = 0.5;
+const LAYOUT_CYCLE_TIME_MS = 20;
+const LAYOUT_CYCLE_MAX = 5;
+const LAYOUT_MAX_SIZE = 2e5;
+const layoutCycleGuard = /* @__PURE__ */ new WeakMap();
+const deferredParentInvalidations = /* @__PURE__ */ new WeakSet();
+function isCloseSize(a, b, epsilon) {
+  return Math.abs(a.width - b.width) < epsilon && Math.abs(a.height - b.height) < epsilon;
+}
+function invalidateParentLayoutIfNeeded(container, oldSize, newWidth, newHeight) {
+  if (!oldSize || Math.abs(oldSize.width - newWidth) < LAYOUT_CYCLE_EPSILON && Math.abs(oldSize.height - newHeight) < LAYOUT_CYCLE_EPSILON) {
+    return;
+  }
+  if (!Number.isFinite(newWidth) || !Number.isFinite(newHeight) || newWidth > LAYOUT_MAX_SIZE || newHeight > LAYOUT_MAX_SIZE) {
+    DebugLogger.warn("layout", "Runaway layout size detected, skipping parent invalidation", {
+      oldSize,
+      newSize: { width: newWidth, height: newHeight },
+      containerProps: container.__layoutProps,
+      childCount: container.list?.length ?? 0
+    });
+    return;
+  }
+  const newSize = { width: newWidth, height: newHeight };
+  const now = Date.now();
+  const parent = getLayoutParent(container);
+  if (!parent || !parent.__layoutProps) {
+    return;
+  }
+  const guard = layoutCycleGuard.get(container);
+  if (guard) {
+    const repeatsPrev = guard.prev ? isCloseSize(guard.prev, newSize, LAYOUT_CYCLE_EPSILON) : false;
+    if (repeatsPrev && now - guard.lastTime < LAYOUT_CYCLE_TIME_MS) {
+      guard.count += 1;
+    } else {
+      guard.count = 0;
+    }
+    guard.prev = guard.last;
+    guard.last = newSize;
+    guard.lastTime = now;
+    layoutCycleGuard.set(container, guard);
+    if (guard.count >= LAYOUT_CYCLE_MAX) {
+      DebugLogger.log("layout", "Layout cycle detected, deferring parent invalidation", {
+        container,
+        oldSize,
+        newSize
+      });
+      guard.count = 0;
+      guard.lastTime = 0;
+      layoutCycleGuard.set(container, guard);
+      deferParentLayoutInvalidation(container);
+      return;
+    }
+  } else {
+    layoutCycleGuard.set(container, {
+      last: newSize,
+      count: 0,
+      lastTime: now
+    });
+  }
+  DebugLogger.log(
+    "layout",
+    "Container size changed, invalidating parent:",
+    `${oldSize.width}x${oldSize.height} -> ${newWidth}x${newHeight}`
+  );
+  invalidateParentLayout(container);
+}
+function deferParentLayoutInvalidation(container) {
+  if (deferredParentInvalidations.has(container)) {
+    return;
+  }
+  deferredParentInvalidations.add(container);
+  DeferredLayoutQueue.defer(() => {
+    deferredParentInvalidations.delete(container);
+    invalidateParentLayout(container);
+  });
+}
+function invalidateParentLayout(container) {
+  const parent = getLayoutParent(container);
+  if (!parent || !parent.__layoutProps) {
+    return;
+  }
+  const grandParent = getLayoutParent(parent);
+  let grandParentSize;
+  if (grandParent && grandParent.__getLayoutSize) {
+    const totalSize = grandParent.__getLayoutSize();
+    const padding = grandParent.__layoutProps?.padding ?? 0;
+    const normPadding = typeof padding === "number" ? { left: padding, right: padding, top: padding, bottom: padding } : {
+      left: padding.left ?? 0,
+      right: padding.right ?? 0,
+      top: padding.top ?? 0,
+      bottom: padding.bottom ?? 0
+    };
+    grandParentSize = {
+      width: totalSize.width - normPadding.left - normPadding.right,
+      height: totalSize.height - normPadding.top - normPadding.bottom
+    };
+  }
+  calculateLayout(parent, parent.__layoutProps, grandParentSize);
+}
+function calculateLayoutImmediate(container, containerProps, parentSize, parentPadding) {
+  const children = container.list ?? [];
+  const containerWithLayout = container;
+  const oldContainerSize = containerWithLayout.__getLayoutSize?.();
+  if (!children || !Array.isArray(children)) {
+    return;
+  }
+  DebugLogger.time("performance", "calculateLayout");
+  const direction = containerProps.direction ?? "column";
+  const padding = normalizePadding(containerProps.padding);
+  const gap = normalizeGap(containerProps.gap);
+  const justifyContent = containerProps.justifyContent ?? "start";
+  DebugLogger.log("layout", `Direction: ${direction}, Padding:`, padding);
+  let currentContainerSize;
+  const parsedWidth = parseSize(containerProps.width);
+  const canCalculateWidth = parsedWidth.type === "fixed" || parentSize?.width !== void 0 && (parsedWidth.type === "percent" || parsedWidth.type === "fill" || parsedWidth.type === "calc");
+  const width = canCalculateWidth ? resolveSize(parsedWidth, parentSize?.width, container.width, parentPadding?.horizontal) : void 0;
+  const parsedHeight = parseSize(containerProps.height);
+  const canCalculateHeight = parsedHeight.type === "fixed" || parentSize?.height !== void 0 && (parsedHeight.type === "percent" || parsedHeight.type === "fill" || parsedHeight.type === "calc");
+  const height = canCalculateHeight ? resolveSize(parsedHeight, parentSize?.height, container.height, parentPadding?.vertical) : void 0;
+  if (width !== void 0 || height !== void 0) {
+    const clampedWidth = width !== void 0 ? clampSize(
+      width,
+      containerProps.minWidth,
+      containerProps.maxWidth,
+      parentSize?.width,
+      container.width,
+      parentPadding?.horizontal
+    ) : container.width ?? 0;
+    const clampedHeight = height !== void 0 ? clampSize(
+      height,
+      containerProps.minHeight,
+      containerProps.maxHeight,
+      parentSize?.height,
+      container.height,
+      parentPadding?.vertical
+    ) : container.height ?? 0;
+    currentContainerSize = {
+      width: clampedWidth,
+      height: clampedHeight
+    };
+  }
+  const availableContentSize = currentContainerSize ? {
+    width: currentContainerSize.width - padding.left - padding.right,
+    height: currentContainerSize.height - padding.top - padding.bottom
+  } : void 0;
+  DebugLogger.log("layout", "Pre-calculated container size:", currentContainerSize);
+  DebugLogger.log("layout", "Available content size (for fill):", availableContentSize);
+  const layoutChildren = [];
+  for (const child of children) {
+    if (!isLayoutChild(child)) {
+      DebugLogger.log("layout", "Skipping non-layout child:", {
+        isBackground: child.__isBackground,
+        headless: child.__layoutProps?.headless,
+        hasLayoutSize: typeof child.__getLayoutSize === "function"
+      });
+      continue;
+    }
+    const hasFlex = (child.__layoutProps?.flex ?? 0) > 0;
+    if (!hasFlex) {
+      const parentSizeForNested = currentContainerSize ? {
+        width: currentContainerSize.width - padding.left - padding.right,
+        height: currentContainerSize.height - padding.top - padding.bottom
+      } : parentSize ? {
+        width: parentSize.width - (parentPadding?.horizontal ?? 0),
+        height: parentSize.height - (parentPadding?.vertical ?? 0)
+      } : void 0;
+      processNestedContainer(
+        child,
+        calculateLayout,
+        parentSizeForNested,
+        void 0
+        // No padding offset needed since we pass content-area
+      );
+    }
+    const contentAreaForChild = currentContainerSize ? {
+      width: currentContainerSize.width - padding.left - padding.right,
+      height: currentContainerSize.height - padding.top - padding.bottom
+    } : parentSize ? {
+      width: parentSize.width - (parentPadding?.horizontal ?? 0),
+      height: parentSize.height - (parentPadding?.vertical ?? 0)
+    } : void 0;
+    const size = getChildSize(child, contentAreaForChild, void 0);
+    const margin = getMargin(child);
+    layoutChildren.push({ child, size, margin });
+  }
+  const strategy = strategies[direction];
+  if (!strategy) {
+    DebugLogger.error("Layout", `Unknown direction: ${direction}`);
+    return;
+  }
+  const contextPartial = {
+    containerProps,
+    padding,
+    gap,
+    children: layoutChildren
+  };
+  const metrics = strategy.calculateMetrics(layoutChildren, contextPartial);
+  const flexWrap = containerProps.flexWrap ?? "nowrap";
+  const shouldWrap = flexWrap !== "nowrap" && direction !== "stack";
+  const { width: containerWidth, height: containerHeight } = calculateContainerSize(
+    containerProps,
+    metrics,
+    padding,
+    direction,
+    gap,
+    layoutChildren.length,
+    parentSize,
+    parentPadding
+  );
+  let finalLayoutChildren = layoutChildren;
+  if (hasFlexChildren(layoutChildren) && !shouldWrap) {
+    const contentSize = direction === "row" ? containerWidth - padding.left - padding.right : containerHeight - padding.top - padding.bottom;
+    const gapValue2 = direction === "row" ? gap.horizontal : gap.vertical;
+    const totalGapSpace2 = layoutChildren.length > 1 ? gapValue2 * (layoutChildren.length - 1) : 0;
+    const availableMainSpace2 = contentSize - totalGapSpace2;
+    finalLayoutChildren = distributeFlexSpace(layoutChildren, availableMainSpace2, direction);
+    for (const layoutChild of finalLayoutChildren) {
+      const props = layoutChild.child.__layoutProps;
+      const isFlexItem = props?.flex !== void 0 && props.flex > 0 || props?.flexShrink !== void 0 || props?.flexBasis !== void 0;
+      if (isFlexItem) {
+        const originalProps = { ...layoutChild.child.__layoutProps };
+        if (direction === "row") {
+          layoutChild.child.__layoutProps = {
+            ...layoutChild.child.__layoutProps,
+            width: layoutChild.size.width
+          };
+        } else {
+          layoutChild.child.__layoutProps = {
+            ...layoutChild.child.__layoutProps,
+            height: layoutChild.size.height
+          };
+        }
+        processNestedContainer(
+          layoutChild.child,
+          calculateLayout,
+          {
+            width: containerWidth,
+            height: containerHeight
+          },
+          {
+            horizontal: padding.left + padding.right,
+            vertical: padding.top + padding.bottom
+          }
+        );
+        layoutChild.child.__layoutProps = originalProps;
+      }
+    }
+    const updatedMetrics = strategy.calculateMetrics(
+      finalLayoutChildren,
+      contextPartial
+    );
+    metrics.totalMainSize = updatedMetrics.totalMainSize;
+    if (direction === "column") {
+      metrics.maxWidth = updatedMetrics.maxWidth;
+    } else if (direction === "row") {
+      metrics.maxHeight = updatedMetrics.maxHeight;
+    }
+  }
+  const contentArea = {
+    width: containerWidth - padding.left - padding.right,
+    height: containerHeight - padding.top - padding.bottom
+  };
+  const context = {
+    ...contextPartial,
+    children: finalLayoutChildren,
+    contentArea,
+    parentSize: {
+      width: containerWidth,
+      height: containerHeight
+    }
+  };
+  const availableMainSpace = direction === "row" ? contentArea.width : contentArea.height;
+  const gapValue = direction === "row" ? gap.horizontal : gap.vertical;
+  const totalGapSpace = finalLayoutChildren.length > 1 ? gapValue * (finalLayoutChildren.length - 1) : 0;
+  const remainingSpace = availableMainSpace - metrics.totalMainSize - totalGapSpace;
+  let mainStart = 0;
+  let spaceBetween = 0;
+  if (direction !== "stack") {
+    const justifyResult = calculateJustifyContent(
+      justifyContent,
+      remainingSpace,
+      finalLayoutChildren.length
+    );
+    mainStart = justifyResult.mainStart;
+    spaceBetween = justifyResult.spaceBetween;
+  }
+  const alignItems = containerProps.alignItems ?? "start";
+  if (alignItems === "stretch" && direction !== "stack") {
+    for (const layoutChild of finalLayoutChildren) {
+      const margin = getMargin(layoutChild.child);
+      const child = layoutChild.child;
+      if (direction === "row") {
+        const stretchHeight = contentArea.height - (margin.top ?? 0) - (margin.bottom ?? 0);
+        layoutChild.size.height = Math.max(0, stretchHeight);
+        if (child.__layoutProps) {
+          const originalHeight = child.__layoutProps.height;
+          child.__layoutProps = { ...child.__layoutProps, height: stretchHeight };
+          processNestedContainer(child, calculateLayout, {
+            width: containerWidth,
+            height: containerHeight
+          });
+          child.__layoutProps = { ...child.__layoutProps, height: originalHeight };
+        }
+      } else if (direction === "column") {
+        const stretchWidth = contentArea.width - (margin.left ?? 0) - (margin.right ?? 0);
+        layoutChild.size.width = Math.max(0, stretchWidth);
+        if (child.__layoutProps) {
+          const originalWidth = child.__layoutProps.width;
+          child.__layoutProps = { ...child.__layoutProps, width: stretchWidth };
+          processNestedContainer(child, calculateLayout, {
+            width: containerWidth,
+            height: containerHeight
+          });
+          child.__layoutProps = { ...child.__layoutProps, width: originalWidth };
+        }
+      }
+    }
+  }
+  const positions = [];
+  let adjustedContainerWidth = containerWidth;
+  let adjustedContainerHeight = containerHeight;
+  if (shouldWrap && "wrapChildren" in strategy) {
+    const availableMainSize = direction === "row" ? contentArea.width : contentArea.height;
+    const mainGapValue = direction === "row" ? gap.horizontal : gap.vertical;
+    const lines = strategy.wrapChildren(
+      finalLayoutChildren,
+      availableMainSize,
+      mainGapValue
+    );
+    if (flexWrap === "wrap-reverse") {
+      lines.reverse();
+    }
+    const totalCrossSize = lines.reduce(
+      (sum, line) => sum + line.crossAxisSize,
+      0
+    );
+    const crossGapValue = direction === "row" ? gap.vertical : gap.horizontal;
+    const totalLineGaps = (lines.length - 1) * crossGapValue;
+    if (direction === "row" && (containerProps.height === void 0 || containerProps.height === "auto")) {
+      adjustedContainerHeight = totalCrossSize + totalLineGaps + padding.top + padding.bottom;
+    } else if (direction === "column" && (containerProps.width === void 0 || containerProps.width === "auto")) {
+      adjustedContainerWidth = totalCrossSize + totalLineGaps + padding.left + padding.right;
+    }
+    const availableCrossSize = direction === "row" ? contentArea.height : contentArea.width;
+    const freeCrossSpace = availableCrossSize - totalCrossSize - totalLineGaps;
+    const alignContent = containerProps.alignContent ?? "stretch";
+    let crossOffset = 0;
+    let lineCrossSpacing = 0;
+    if (alignContent === "center") {
+      crossOffset = freeCrossSpace / 2;
+    } else if (alignContent === "end") {
+      crossOffset = freeCrossSpace;
+    } else if (alignContent === "space-between" && lines.length > 1) {
+      lineCrossSpacing = freeCrossSpace / (lines.length - 1);
+    } else if (alignContent === "space-around") {
+      lineCrossSpacing = freeCrossSpace / lines.length;
+      crossOffset = lineCrossSpacing / 2;
+    }
+    for (const line of lines) {
+      let lineChildren = line.children;
+      if (hasFlexChildren(line.children)) {
+        const lineGapSpace2 = (line.children.length - 1) * mainGapValue;
+        const lineAvailableSpace = availableMainSize - lineGapSpace2;
+        lineChildren = distributeFlexSpace(line.children, lineAvailableSpace, direction);
+        line.mainAxisSize = lineChildren.reduce((sum, child) => {
+          const size = direction === "row" ? child.size.width : child.size.height;
+          const margin = getMargin(child.child);
+          const marginSize = direction === "row" ? (margin.left ?? 0) + (margin.right ?? 0) : (margin.top ?? 0) + (margin.bottom ?? 0);
+          return sum + size + marginSize;
+        }, 0);
+      }
+      const lineMainSize = line.mainAxisSize;
+      const lineAvailableMain = availableMainSize;
+      const lineRemainingSpace = lineAvailableMain - lineMainSize;
+      const lineGapSpace = (line.children.length - 1) * mainGapValue;
+      const lineFreeSpace = lineRemainingSpace - lineGapSpace;
+      const lineJustifyResult = calculateJustifyContent(
+        justifyContent,
+        lineFreeSpace,
+        line.children.length
+      );
+      let lineMainOffset = lineJustifyResult.mainStart;
+      const lineSpaceBetween = lineJustifyResult.spaceBetween;
+      for (let i = 0; i < lineChildren.length; i++) {
+        const child = lineChildren[i];
+        if (!child) continue;
+        const margin = getMargin(child.child);
+        let x;
+        let y;
+        if (direction === "row") {
+          lineMainOffset += margin.left ?? 0;
+          x = padding.left + lineMainOffset;
+          const childCrossOffset = calculateAlignItems(
+            alignItems,
+            line.crossAxisSize,
+            child.size.height,
+            margin.top ?? 0,
+            margin.bottom ?? 0
+          );
+          y = padding.top + crossOffset + childCrossOffset;
+          lineMainOffset += child.size.width + (margin.right ?? 0);
+          if (i < lineChildren.length - 1) {
+            lineMainOffset += mainGapValue + lineSpaceBetween;
+          }
+        } else {
+          lineMainOffset += margin.top ?? 0;
+          y = padding.top + lineMainOffset;
+          const childCrossOffset = calculateAlignItems(
+            alignItems,
+            line.crossAxisSize,
+            child.size.width,
+            margin.left ?? 0,
+            margin.right ?? 0
+          );
+          x = padding.left + crossOffset + childCrossOffset;
+          lineMainOffset += child.size.height + (margin.bottom ?? 0);
+          if (i < lineChildren.length - 1) {
+            lineMainOffset += mainGapValue + lineSpaceBetween;
+          }
+        }
+        const childIndex = finalLayoutChildren.indexOf(child);
+        if (childIndex !== -1) {
+          positions[childIndex] = { x, y };
+        }
+      }
+      crossOffset += line.crossAxisSize + crossGapValue + lineCrossSpacing;
+    }
+  } else {
+    let currentMain = mainStart;
+    for (let i = 0; i < finalLayoutChildren.length; i++) {
+      const child = finalLayoutChildren[i];
+      if (!child) continue;
+      const result = strategy.positionChild(child, i, context, currentMain);
+      positions.push(result.position);
+      currentMain = result.nextMain;
+      if (direction !== "stack" && i < finalLayoutChildren.length - 1) {
+        currentMain += gapValue + spaceBetween;
+      }
+    }
+  }
+  applyChildPositions(finalLayoutChildren, positions);
+  applyContainerDimensions(container, adjustedContainerWidth, adjustedContainerHeight);
+  getOnAfterLayout()(container, adjustedContainerWidth, adjustedContainerHeight);
+  applyOverflowMask(container, containerProps, adjustedContainerWidth, adjustedContainerHeight);
+  DebugLogger.timeEnd("performance", "calculateLayout");
+  invalidateParentLayoutIfNeeded(
+    container,
+    oldContainerSize,
+    adjustedContainerWidth,
+    adjustedContainerHeight
+  );
+}
+function calculateLayout(container, containerProps, parentSize, parentPadding) {
+  LayoutBatchQueue.schedule(container, containerProps, parentSize, parentPadding);
+}
+export {
+  DeferredLayoutQueue,
+  LayoutBatchQueue,
+  calculateLayout,
+  registerApplyOverflowClip,
+  setAfterLayout,
+  setApplyOverflowClip
+};
+//# sourceMappingURL=layout-engine.js.map