@pibbl/core 0.0.2 → 0.0.3-alpha.109.1

package/dist/lib/layout/flex.js

@@ -1,30 +1,67 @@
-import { preparedStyleValue, preparedStyleQuery } from "../style/responsive.js";
+import { allocationCheckpointPhaseOwner, retainAllocationCheckpointPhases } from "./allocation-checkpoint-owner.js";
+import { withAllocationCheckpoint, recordAllocationStyle, allocationMeasurement, declineUnrecordedAllocationMeasurement } from "./allocation-checkpoint.js";
+import { contentBoxStyle } from "./box-sizing.js";
+import { canvasMeasurementService, isCurrentCanvasMeasurementService, isGenericCanvasFont } from "./canvas-measurement.js";
+import { Grid } from "./grid.js";
+import { Flow } from "./flow.js";
+import { currentPreparedReceiverSlot, isKnownLayoutType, registerKnownLayoutPreflight, stagePreparedChildStyle, claimPreparedFlexPlan, peekPreparedLayoutPlan, peekPreparedFlexPlan, stagePreparedLayoutPlan, preflightKnownLayout, attachPreparedLayoutSlot, stagePreparedIntrinsicMain, peekPreparedIntrinsicMain, takePreparedIntrinsicMain } from "./prepared-root.js";
+import { isLayoutComponent, prepareLayoutComponent } from "./define-layout-component.js";
+import { allocationInputRevision, allocationStructuralRevision } from "./allocation-revision.js";
+import { FLEX_BASELINE_GROUP, FLEX_LAST_BASELINE } from "./flex-baseline-mode.js";
+import { nativeLayout, LayoutRegion, mountedLayoutRegion, solveTransientFlexMain, prepareTransientIntrinsicMainQueries, resolveTransientIntrinsicMain, resolveTransientKnownOwnerMain, recordWasmMeasurement, recordWasmAllocationPass, recordWasmAllocationItem, recordWasmAllocationCacheHit } from "./wasm/region.js";
+import { Rectangle } from "../components/rect.js";
+import { Text, prepareLayoutTextContent as readLayoutTextContent, measureLayoutTextMinimumWidth, measureLayoutTextNaturalRun } from "../components/text.js";
+const unsupportedProperties = ["order"];
+import { ResponsiveStylePreparation, UnsupportedResponsiveMeasurement, withStyleMeasurement, preparedStyleValue, preparedStyleQuery } from "../style/responsive.js";
 import { definePrimitive } from "../define-primitive.js";
 import { clonePibblElement } from "../element/create-element.js";
-import { getChildPrimitiveReceiverToken } from "../element/metadata.js";
+import { getChildPrimitiveReceiverToken, getPrimitiveReceiverToken, getPrimitiveDefinition, getPrimitiveProgramProps, getElementMetadata, setElementMetadata } from "../element/metadata.js";
 import { GLOBAL_STATE } from "../global-state.js";
-import { layoutDiagnostic } from "../style/diagnostics.js";
+import { LayoutDiagnostic, layoutDiagnostic } from "../style/diagnostics.js";
 import {
   wireStructuralEvents
 } from "../components/structural-events.js";
-import { normalizeEdges } from "../style/normalize.js";
-import { resolveLength } from "../style/resolve-length.js";
-import { setPreNormalizedStyle } from "../style/resolve-dispatch.js";
+import { normalizeBoxInsets, hasPercentageBoxPadding, resolveAllocatedInsets } from "./box-insets.js";
+import { resolveScalarSizingLength } from "../style/sizing-length.js";
+import { parsePercentage } from "../style/resolve-length.js";
+import { isIntrinsicSizingValue, normalizeSizingLength } from "../style/sizing-length.js";
+import { setPreNormalizedStyle, peekPreNormalizedStyle } from "../style/resolve-dispatch.js";
 import {
   childWithUsedSize,
   prepareDirectChildStyle,
   materializeLayoutChildren,
   placeDirectChildren,
   prepareLayoutChildren,
-  resolveContainerBox
+  resolveContainerBox,
+  resolveDirectChildBox
 } from "./absolute.js";
-import { pushLayoutBox } from "./context.js";
+import { getLayoutDirection, getLogicalContainingBox, pushLayoutBox } from "./context.js";
 import { recordLayoutEvaluation } from "./diagnostics.js";
 import { assertSupportedChildPosition } from "./positioning-diagnostics.js";
-import { measureElement } from "./measure.js";
+import { markDerivedAbsoluteAxes } from "../style/positioning.js";
+import { measureElement, measureConstrainedLayoutChild, measureIntrinsicElement, measureConstrainedIntrinsicElement, measurePreparedLayoutElement, measureBaselineElement, setPreparedBaselineOwner, withIsolatedRenderState } from "./measure.js";
+import { isSignal, withSignalWriteForbidden } from "../signals/graph.js";
+const FLEX_ABSOLUTE_BOX_STYLE = /* @__PURE__ */ Symbol("pibbl.flex-absolute-box-style");
+const FLEX_INHERITED_CONTAINING_BOX = /* @__PURE__ */ Symbol("pibbl.flex-inherited-containing-box");
+const deferredStaticPlans = /* @__PURE__ */ new WeakMap();
+function deferredStaticPlacementSentinel() {
+  const fail = () => {
+    throw new Error("Deferred static Flex absolute placement was read before finalization.");
+  };
+  return { get box() {
+    return fail();
+  }, get layoutY() {
+    return fail();
+  }, get usedWidth() {
+    return fail();
+  }, get usedHeight() {
+    return fail();
+  }, get element() {
+    return fail();
+  } };
+}
 function renderFlex(props, style, ctx) {
   wireStructuralEvents(props);
-  const children = prepareLayoutChildren(props.children, "Flex");
   recordLayoutEvaluation();
   const content = style.box.contentBox;
   ctx.translate(content.x, content.y);
@@ -34,28 +71,19 @@ function renderFlex(props, style, ctx) {
     width: content.width,
     height: content.height
   });
-  const releaseLayout = pushLayoutBox(localContent);
+  const specified = style[FLEX_ABSOLUTE_BOX_STYLE];
+  const releaseLayout = pushLayoutBox(localContent, {
+    layoutDirection: style.layoutDirection,
+    logicalOffset: content,
+    containingBlock: nativeLayout && specified?.position !== "static" ? resolveFlexAbsolutePaddingBox(specified ?? {}, localContent) : void 0
+  });
   GLOBAL_STATE.componentRefs.onAfterRender = releaseLayout;
-  const service = {
-    measureText(value, font) {
-      ctx.save();
-      try {
-        ctx.font = font;
-        return ctx.measureText(value);
-      } finally {
-        ctx.restore();
-      }
-    }
-  };
-  const placements = resolveFlexPlacements(
-    localContent,
-    children,
-    style,
-    {
-      service,
-      measureElement: (element, constraints) => measureElement(element, constraints, service)
-    }
-  );
+  const service = flexMeasurementService(ctx);
+  const prepared = nativeLayout ? claimPreparedFlexPlan(GLOBAL_STATE.componentRefs.element, localContent) : void 0;
+  const region = nativeLayout ? mountedLayoutRegion() : void 0;
+  const plan = prepared ?? prepareFlexAllocation(props, style, localContent, service, region);
+  if (nativeLayout && !prepared) prepareFlexDescendants(plan, style);
+  const { children, placements } = plan;
   let index = 0;
   return placeDirectChildren(
     children,
@@ -64,39 +92,395 @@ function renderFlex(props, style, ctx) {
     style.overflow
   );
 }
+function flexMeasurementService(ctx) {
+  return canvasMeasurementService(ctx);
+}
+function prepareFlexAllocation(props, style, localContent, service, region, parentSlot, deferStaticAbsolute) {
+  const revision = allocationInputRevision();
+  const children = prepareLayoutChildren(props.children, "Flex");
+  const axis = isRowDirection(style.flexDirection) ? "row" : "column";
+  const staged = takePreparedIntrinsicMain(
+    GLOBAL_STATE.primitiveReceiverToken,
+    children,
+    axis,
+    axis === "row" ? localContent.width : localContent.height,
+    revision
+  );
+  const placements = withAllocationCheckpoint(region, {
+    children,
+    content: localContent,
+    settings: { style, deferred: !!deferStaticAbsolute },
+    flexMargins: true,
+    continuation: staged && { axis: staged.axis, contentMain: staged.contentMain, items: staged.items, autoMarginFreeMain: staged.autoMarginFreeMain },
+    pending: deferStaticAbsolute && {
+      read: (index) => {
+        const entry = deferStaticAbsolute[index];
+        return entry && { style: entry.style, data: { measured: !!entry.measurement, token: entry.measurementToken } };
+      },
+      replay: (index, normalized, receiverToken, query, data) => {
+        const { measured, token } = data;
+        deferStaticAbsolute[index] = {
+          sourceIndex: index,
+          child: children[index],
+          style: normalized,
+          receiverToken,
+          query,
+          measurement: measured ? { service, measureElement: (element, constraints) => measureElement(element, constraints, service) } : void 0,
+          measurementToken: token
+        };
+        return deferredStaticPlacementSentinel();
+      }
+    },
+    onHit: recordWasmAllocationCacheHit,
+    calculate: () => resolveFlexPlacements(localContent, children, style, {
+      service,
+      measureElement: (element, constraints) => measureElement(element, constraints, service)
+    }, region, staged, parentSlot, deferStaticAbsolute)
+  });
+  for (let index = 0; index < placements.length; index++) {
+    if (deferStaticAbsolute?.[index]) continue;
+    const placement = placements[index];
+    attachPreparedLayoutSlot(placement.element, currentPreparedReceiverSlot(getPrimitiveReceiverToken(placement.element)));
+  }
+  if (region) retainAllocationCheckpointPhases(region, deferStaticAbsolute?.flatMap((entry, index) => entry ? [index] : []) ?? []);
+  return { children, placements, revision, content: localContent, cached: false };
+}
 const Flex = definePrimitive(renderFlex, {
   childInput: "structural",
-  resolveStyle: (style, context) => ({
-    box: resolveContainerBox(style, context, "Flex", "flex"),
-    overflow: style.overflow ?? "visible",
-    ...normalizeFlexOptions(style, context.allocation)
-  }),
-  measure: (input) => measureFlex(input)
+  resolveStyle: (style, context) => {
+    const box = resolveContainerBox(style, context, "Flex", "flex");
+    return {
+      box,
+      [FLEX_ABSOLUTE_BOX_STYLE]: style,
+      [FLEX_INHERITED_CONTAINING_BOX]: nativeLayout ? getElementMetadata(GLOBAL_STATE.componentRefs.element)?.absoluteContainingBlock : void 0,
+      overflow: style.overflow ?? "visible",
+      ...normalizeFlexOptions(style, box.contentBox)
+    };
+  },
+  measure: (input) => measureFlex(input),
+  measureIntrinsic: (input) => measureFlexIntrinsic(input)
+});
+let allocatedIntrinsicMain;
+let requestedIntrinsicContribution;
+if (nativeLayout) registerKnownLayoutPreflight(Flex, (element, style, content, receiver, slot, parentMainAxis, preflightOptions) => {
+  const options = normalizeFlexOptions(style, content);
+  const releaseLayout = pushLayoutBox(content, options);
+  const previous = GLOBAL_STATE.primitiveReceiverToken;
+  GLOBAL_STATE.primitiveReceiverToken = receiver;
+  try {
+    const children = prepareLayoutChildren(element.props.children, "Flex");
+    const axis = isRowDirection(options.flexDirection) ? "row" : "column";
+    const main = axis === "row" ? content.width : content.height;
+    const contribution = parentMainAxis === axis ? peekPreparedIntrinsicMain(
+      receiver,
+      children,
+      axis,
+      main,
+      allocationInputRevision()
+    ) : void 0;
+    if (contribution && !contribution.normalOwner) {
+      const ctx2 = GLOBAL_STATE.renderContext;
+      if (!ctx2) throw new Error("Known layout preparation requires a Canvas measurement context.");
+      const measuredRoot = clonePibblElement(element);
+      setPreNormalizedStyle(measuredRoot, contribution.style, element, receiver);
+      const previousPhase = allocatedIntrinsicMain;
+      allocatedIntrinsicMain = { receiver, main, rootMin: contribution.rootMin, rootMax: contribution.rootMax };
+      try {
+        const result = measureConstrainedIntrinsicElement(measuredRoot, {
+          minWidth: 0,
+          maxWidth: content.width,
+          minHeight: 0,
+          maxHeight: content.height
+        }, flexMeasurementService(ctx2));
+        if (result.status !== "measured") throw new Error(`Known Flex allocated-owner measurement is unsupported: ${result.reason}`);
+      } finally {
+        allocatedIntrinsicMain = previousPhase;
+      }
+    }
+    for (let index = 0; index < children.length; index++) {
+      const child = children[index];
+      const token = getChildPrimitiveReceiverToken(GLOBAL_STATE.renderTransaction, receiver, index);
+      let prepared = prepareDirectChildStyle(child, token, content, true);
+      const specified = preparedStyleValue(prepared);
+      const normalized = resolveAllocatedInsets(specified, { width: content.width, layoutDirection: options.layoutDirection, context: childContext(child, content) });
+      if (normalized !== specified) {
+        if (prepared instanceof ResponsiveStylePreparation) prepared.style = normalized;
+        else prepared = normalized;
+      }
+      assertSupportedChildPosition("Flex", child, normalized, true);
+      rejectUnsupportedItemFields(child, normalized, content);
+      nonnegativeFactor(normalized.flexGrow ?? 0, "flexGrow", child, content);
+      nonnegativeFactor(normalized.flexShrink ?? 1, "flexShrink", child, content);
+      stagePreparedChildStyle(child, token, content, prepared);
+    }
+    const ctx = GLOBAL_STATE.renderContext;
+    if (!ctx) throw new Error("Known layout preparation requires a Canvas measurement context.");
+    const region = slot.acquire();
+    const resolved = {
+      box: { contentBox: content },
+      [FLEX_ABSOLUTE_BOX_STYLE]: style,
+      [FLEX_INHERITED_CONTAINING_BOX]: getElementMetadata(element)?.absoluteContainingBlock,
+      overflow: style.overflow ?? "visible",
+      ...normalizeFlexOptions(style, content)
+    };
+    const deferred = preflightOptions?.deferStaticContainingDescendants ? [] : void 0;
+    const plan = prepareFlexAllocation(element.props, resolved, content, flexMeasurementService(ctx), region, slot, deferred);
+    const staged = { ...plan, region };
+    if (deferred) {
+      staged.pending = { kind: "static-flex-containing-origin", count: 1 };
+      deferredStaticPlans.set(staged, { slots: deferred, style: resolved });
+      prepareFlexDescendants(staged, resolved, slot, true);
+    } else prepareFlexDescendants(staged, resolved, slot);
+    stagePreparedLayoutPlan(slot, staged);
+  } finally {
+    GLOBAL_STATE.primitiveReceiverToken = previous;
+    releaseLayout();
+  }
 });
+function deferredStaticState(plan) {
+  return deferredStaticPlans.get(plan);
+}
+function finalizeDeferredStaticAbsolutePlacements(plan, style) {
+  const state = deferredStaticState(plan);
+  if (!state) return;
+  let paddingBox;
+  for (let sourceIndex = 0; sourceIndex < state.slots.length; sourceIndex++) {
+    const entry = state.slots[sourceIndex];
+    if (!entry) continue;
+    if (entry.sourceIndex !== sourceIndex || sourceIndex >= plan.placements.length) throw new Error("Deferred static absolute placement lost source ordering.");
+    const containing = paddingBox ??= resolveFlexContainingBox(style, plan.content);
+    const owner = plan.region && allocationCheckpointPhaseOwner(plan.region, sourceIndex);
+    plan.placements[sourceIndex] = withAllocationCheckpoint(owner, {
+      children: [entry.child],
+      receiverTokens: [entry.receiverToken],
+      content: plan.content,
+      settings: { style, containing },
+      flexMargins: true,
+      onHit: recordWasmAllocationCacheHit,
+      calculate: () => {
+        if (plan.region) {
+          recordWasmAllocationPass();
+          recordWasmAllocationItem();
+        }
+        recordAllocationStyle(entry.receiverToken, entry.query ? new ResponsiveStylePreparation(entry.style, entry.query) : entry.style);
+        return [resolveAbsoluteFlexPlacement(
+          containing,
+          entry.child,
+          entry.style,
+          entry.receiverToken,
+          entry.query,
+          plan.content,
+          style,
+          entry.measurement,
+          plan.region,
+          entry.measurementToken
+        )];
+      }
+    })[0];
+    state.slots[sourceIndex] = void 0;
+  }
+}
+function prepareFlexDescendants(plan, style, parentSlot, unresolvedStaticOrigin = false) {
+  if (!unresolvedStaticOrigin) finalizeDeferredStaticAbsolutePlacements(plan, style);
+  let containingBox;
+  let flexOccurrence = 0;
+  let descriptionOccurrences;
+  for (let index = 0; index < plan.children.length; index++) {
+    const child = plan.children[index];
+    if (!isKnownLayoutType(child.type) && !isLayoutComponent(child.type)) continue;
+    let occurrence = 0;
+    if (child.key === void 0) {
+      if (child.type === Flex) occurrence = flexOccurrence++;
+      else {
+        descriptionOccurrences ??= /* @__PURE__ */ new Map();
+        occurrence = descriptionOccurrences.get(child.type) ?? 0;
+        descriptionOccurrences.set(child.type, occurrence + 1);
+      }
+    }
+    if (deferredStaticState(plan)?.slots[index]) continue;
+    const placement = plan.placements[index];
+    const prepared = peekPreNormalizedStyle(placement.element);
+    if (!prepared) throw new Error("Known layout preparation requires settled receiver inputs.");
+    const receiver = getPrimitiveReceiverToken(placement.element);
+    if (!receiver) throw new Error("Known layout preparation requires the current child receiver.");
+    const preparedRoot = isLayoutComponent(child.type) ? prepareLayoutComponent(child, { receiverToken: receiver }) : child;
+    const staticFlexRoot = preparedRoot.type === Flex && prepared.style.position === "static";
+    let preparationChild = child;
+    const unresolvedStaticChild = unresolvedStaticOrigin && staticFlexRoot;
+    if (staticFlexRoot && !unresolvedStaticChild) {
+      containingBox ??= resolveFlexContainingBox(style, plan.content);
+      const insets = normalizeBoxInsets(prepared.style, childContext(child, plan.content));
+      const x = finiteRelativePlacement(containingBox.x - placement.box.x - insets.left, "left", child, plan.content);
+      const y = finiteRelativePlacement(containingBox.y - placement.box.y - insets.top, "top", child, plan.content);
+      setElementMetadata(placement.element, {
+        ...getElementMetadata(placement.element),
+        layoutDescriptionSource: getElementMetadata(child)?.layoutDescriptionSource ?? child,
+        absoluteContainingBlock: Object.freeze({ x, y, width: containingBox.width, height: containingBox.height })
+      });
+      preparationChild = placement.element;
+    }
+    const content = { x: 0, y: 0, width: placement.usedWidth, height: placement.usedHeight };
+    const staged = getElementMetadata(placement.element)?.preparedLayoutSlot;
+    const current = staged && peekPreparedLayoutPlan(staged, content, prepared.style.layoutDirection ?? style.layoutDirection);
+    if (current) {
+      if (preparedRoot.type === Flex) {
+        const stagedFlex = current;
+        const state = deferredStaticState(stagedFlex);
+        if (state && !unresolvedStaticOrigin) {
+          const inherited = getElementMetadata(placement.element)?.absoluteContainingBlock;
+          if (!inherited) throw new Error("Static structural descendants require the settled containing box before finalization.");
+          const nestedStyle = { ...state.style, [FLEX_INHERITED_CONTAINING_BOX]: inherited };
+          finalizeDeferredStaticAbsolutePlacements(stagedFlex, nestedStyle);
+          prepareFlexDescendants(stagedFlex, nestedStyle, staged);
+          stagedFlex.pending.count = 0;
+          deferredStaticPlans.delete(stagedFlex);
+        }
+      }
+      continue;
+    }
+    const nested = preflightKnownLayout(
+      preparationChild,
+      prepared.style,
+      content,
+      receiver,
+      occurrence,
+      parentSlot,
+      isRowDirection(style.flexDirection) ? "row" : "column",
+      unresolvedStaticChild ? { deferStaticContainingDescendants: true } : void 0
+    );
+    attachPreparedLayoutSlot(placement.element, nested);
+  }
+}
+function measureFlexIntrinsic(input) {
+  const width = input.constraints.width.kind === "bounded" ? input.constraints.width.max : Number.POSITIVE_INFINITY;
+  const height = input.constraints.height.kind === "bounded" ? input.constraints.height.max : Number.POSITIVE_INFINITY;
+  const owner = { x: 0, y: 0, width: Number.isFinite(width) ? width : 0, height: Number.isFinite(height) ? height : 0 };
+  const row = isRowDirection(input.style.flexDirection);
+  const wrap = (input.style.flexWrap ?? "nowrap") !== "nowrap";
+  if (isPercentage(input.style.gap) || isPercentage(input.style.columnGap) || isPercentage(input.style.rowGap)) return { status: "unsupported", reason: "Flex intrinsic percentage gaps require a definite owning axis" };
+  const options = normalizeFlexOptions(input.style, owner);
+  const children = materializeLayoutChildren(input.props.children, "Flex");
+  let minMain = 0, maxMain = 0, minCross = 0, maxCross = 0, count = 0;
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index];
+    const receiver = getChildPrimitiveReceiverToken(GLOBAL_STATE.renderTransaction, GLOBAL_STATE.primitiveReceiverToken, index);
+    const prepared = prepareDirectChildStyle(child, receiver, owner, true);
+    let style = preparedStyleValue(prepared);
+    if (style.position === "absolute") continue;
+    if (style.boxSizing !== void 0) style = contentBoxStyle(style, { width: owner.width, height: owner.height, mainAxis: row ? "width" : "height", context: childContext(child, owner) });
+    if (hasPercentageBoxPadding(style) || isPercentage(style.width) || isPercentage(style.height) || isPercentage(style.flexBasis) || hasPercentageBounds(style)) return { status: "unsupported", reason: "Flex intrinsic percentage child sizes require a definite owning axis" };
+    const measuredChild = clonePibblElement(child);
+    setPreNormalizedStyle(measuredChild, style, child, receiver, preparedStyleQuery(prepared));
+    const measured = typeof style.width === "number" && typeof style.height === "number" ? {
+      status: "measured",
+      minContent: { width: style.width, height: style.height },
+      maxContent: { width: style.width, height: style.height }
+    } : measureIntrinsicElement(measuredChild, { minWidth: 0, maxWidth: width, minHeight: 0, maxHeight: height }, input.service);
+    if (measured.status !== "measured") return measured;
+    const padding = normalizeBoxInsets(style, childContext(child, owner));
+    const horizontal = padding.left + padding.right, vertical = padding.top + padding.bottom;
+    const marginLeft = style.marginLeft ?? style.margin, marginRight = style.marginRight ?? style.margin;
+    const marginTop = style.marginTop ?? style.margin, marginBottom = style.marginBottom ?? style.margin;
+    const marginsX = allocatedMargin(marginLeft === "auto" ? 0 : marginLeft, "marginLeft", child, owner) + allocatedMargin(marginRight === "auto" ? 0 : marginRight, "marginRight", child, owner);
+    const marginsY = allocatedMargin(marginTop === "auto" ? 0 : marginTop, "marginTop", child, owner) + allocatedMargin(marginBottom === "auto" ? 0 : marginBottom, "marginBottom", child, owner);
+    const lowerWidth = intrinsicOptionalNumber(style.minWidth, 0, "minWidth");
+    const upperWidth = intrinsicOptionalNumber(style.maxWidth, Number.POSITIVE_INFINITY, "maxWidth");
+    const lowerHeight = intrinsicOptionalNumber(style.minHeight, 0, "minHeight");
+    const upperHeight = intrinsicOptionalNumber(style.maxHeight, Number.POSITIVE_INFINITY, "maxHeight");
+    if (lowerWidth > upperWidth) throw childDiagnostic(child, "minWidth", lowerWidth, owner, "minimum must not exceed maximum");
+    if (lowerHeight > upperHeight) throw childDiagnostic(child, "minHeight", lowerHeight, owner, "minimum must not exceed maximum");
+    const minimumWidth = clamp(typeof style.width === "number" ? style.width : measured.minContent.width, lowerWidth, upperWidth) + horizontal + marginsX;
+    const maximumWidth = clamp(typeof style.width === "number" ? style.width : measured.maxContent.width, lowerWidth, upperWidth) + horizontal + marginsX;
+    const minimumHeight = clamp(typeof style.height === "number" ? style.height : measured.minContent.height, lowerHeight, upperHeight) + vertical + marginsY;
+    const maximumHeight = clamp(typeof style.height === "number" ? style.height : measured.maxContent.height, lowerHeight, upperHeight) + vertical + marginsY;
+    const childMinMain = row ? minimumWidth : minimumHeight, childMaxMain = row ? maximumWidth : maximumHeight;
+    const childMinCross = row ? minimumHeight : minimumWidth, childMaxCross = row ? maximumHeight : maximumWidth;
+    minMain = wrap ? Math.max(minMain, childMinMain) : minMain + childMinMain;
+    maxMain += childMaxMain;
+    minCross = wrap ? minCross + childMinCross : Math.max(minCross, childMinCross);
+    maxCross = Math.max(maxCross, childMaxCross);
+    count++;
+  }
+  const mainGaps = Math.max(0, count - 1) * (row ? options.columnGap : options.rowGap);
+  const crossGaps = Math.max(0, count - 1) * (row ? options.rowGap : options.columnGap);
+  if (!wrap) minMain += mainGaps;
+  else minCross += crossGaps;
+  maxMain += mainGaps;
+  return { status: "measured", minContent: { width: Math.max(0, row ? minMain : minCross), height: Math.max(0, row ? minCross : minMain) }, maxContent: { width: Math.max(0, row ? maxMain : maxCross), height: Math.max(0, row ? maxCross : maxMain) } };
+}
+function measureAllocatedFlex(input, children, measuredWidth) {
+  const width = resolveMeasuredContainerLength(measuredWidth, input.constraints.maxWidth, "width", input.constraints);
+  const height = Number.isFinite(input.constraints.maxHeight) ? input.constraints.maxHeight : 0;
+  const region = new LayoutRegion();
+  let placements;
+  try {
+    placements = resolveFlexPlacements({ x: 0, y: 0, width, height }, children, {
+      ...input.style,
+      alignContent: "flex-start",
+      alignItems: input.style.alignItems === void 0 || input.style.alignItems === "stretch" ? "flex-start" : input.style.alignItems
+    }, input, region);
+  } catch (error) {
+    if (error instanceof LayoutDiagnostic && error.message.includes("measurement is required but unsupported:")) return { status: "unsupported", reason: error.message };
+    throw error;
+  } finally {
+    region.dispose();
+  }
+  let first = Number.POSITIVE_INFINITY, last = Number.NEGATIVE_INFINITY;
+  const owner = { x: 0, y: 0, width, height };
+  for (let index = 0; index < placements.length; index++) {
+    const placement = placements[index];
+    const style = peekPreNormalizedStyle(placement.element)?.style;
+    if (style.position === "absolute") continue;
+    const top = style.marginTop ?? style.margin, bottom = style.marginBottom ?? style.margin;
+    const before = top === "auto" ? 0 : allocatedMargin(top, "marginTop", placement.element, owner);
+    const after = bottom === "auto" ? 0 : allocatedMargin(bottom, "marginBottom", placement.element, owner);
+    first = Math.min(first, placement.layoutY - before);
+    last = Math.max(last, placement.layoutY + placement.box.height + after);
+  }
+  return { status: "measured", size: { width, height: Number.isFinite(first) ? Math.max(0, last - first) : 0 } };
+}
 function measureFlex(input) {
   const children = prepareLayoutChildren(input.props.children, "Flex");
-  const widthDefinite = input.style.width !== void 0 && input.style.width !== "auto";
-  const heightDefinite = input.style.height !== void 0 && input.style.height !== "auto";
+  const phase = allocatedIntrinsicMain;
+  if (phase && phase.receiver === GLOBAL_STATE.primitiveReceiverToken) {
+    allocatedIntrinsicMain = void 0;
+    try {
+      const diagnosticBox2 = { x: 0, y: 0, width: input.constraints.maxWidth, height: input.constraints.maxHeight };
+      const result = measureStagedNonexactMain(input, children, normalizeFlexOptions(input.style, diagnosticBox2), diagnosticBox2, phase);
+      if (result) return result;
+      return unsupportedIntrinsic("allocated known-owner continuation no longer matches its measured profile");
+    } finally {
+      allocatedIntrinsicMain = phase;
+    }
+  }
+  const automaticWidth = input.style.width === void 0 || input.style.width === "auto";
+  const exactRowWidth = nativeLayout && automaticWidth && (input.style.flexDirection ?? "row") === "row" && (input.style.flexWrap ?? "nowrap") === "nowrap" && (input.style.layoutDirection ?? getLayoutDirection()) === "ltr" && input.constraints.minWidth === input.constraints.maxWidth && Number.isFinite(input.constraints.maxWidth) && input.constraints.maxWidth >= 0 ? input.constraints.maxWidth : void 0;
+  const automaticHeight = input.style.height === void 0 || input.style.height === "auto";
+  const exactColumnHeight = nativeLayout && automaticHeight && input.style.flexDirection === "column" && (input.style.flexWrap ?? "nowrap") === "nowrap" && (input.style.layoutDirection ?? getLayoutDirection()) === "ltr" && input.constraints.minHeight === input.constraints.maxHeight && Number.isFinite(input.constraints.maxHeight) && input.constraints.maxHeight >= 0 ? input.constraints.maxHeight : void 0;
+  const measuredHeight = exactColumnHeight ?? input.style.height;
+  const measuredWidth = exactRowWidth ?? input.style.width;
+  const widthDefinite = measuredWidth !== void 0 && measuredWidth !== "auto";
+  const heightDefinite = measuredHeight !== void 0 && measuredHeight !== "auto";
   if (widthDefinite && heightDefinite) {
     return { status: "measured", size: {
       width: resolveMeasuredContainerLength(
-        input.style.width,
+        measuredWidth,
         input.constraints.maxWidth,
         "width",
         input.constraints
       ),
       height: resolveMeasuredContainerLength(
-        input.style.height,
+        measuredHeight,
         input.constraints.maxHeight,
         "height",
         input.constraints
       )
     } };
   }
-  if ((input.style.flexWrap ?? "nowrap") !== "nowrap") {
-    return unsupportedIntrinsic("requires nowrap because wrapped intrinsic sizing is deferred");
-  }
-  const row = (input.style.flexDirection ?? "row") === "row";
+  const wrappedIntrinsic = (input.style.flexWrap ?? "nowrap") !== "nowrap";
+  if (wrappedIntrinsic && !nativeLayout) return unsupportedIntrinsic("requires nowrap because wrapped intrinsic sizing is deferred");
+  if (isPercentage(input.style.gap) || isPercentage(input.style.rowGap) || isPercentage(input.style.columnGap)) return unsupportedIntrinsic("does not support percentage gaps without an actual finite content allocation");
+  const row = isRowDirection(input.style.flexDirection);
   const diagnosticBox = {
     x: 0,
     y: 0,
@@ -104,19 +488,115 @@ function measureFlex(input) {
     height: Number.isFinite(input.constraints.maxHeight) ? input.constraints.maxHeight : 0
   };
   const options = normalizeFlexOptions(input.style, diagnosticBox);
+  const stagedNonexact = measureStagedNonexactMain(input, children, options, diagnosticBox);
+  if (stagedNonexact) return stagedNonexact;
+  if (wrappedIntrinsic && !(nativeLayout && options.flexDirection === "row" && options.flexWrap === "wrap" && options.layoutDirection === "ltr" && typeof input.style.width === "number" && !heightDefinite)) {
+    if (nativeLayout && row && widthDefinite && !heightDefinite) return measureAllocatedFlex(input, children, measuredWidth);
+    return unsupportedIntrinsic("wrapped intrinsic height requires a finite main allocation");
+  }
+  const wrapWidth = wrappedIntrinsic ? resolveMeasuredContainerLength(measuredWidth, input.constraints.maxWidth, "width", input.constraints) : 0;
   const mainGap = row ? options.columnGap : options.rowGap;
+  const measuredRowWidth = nativeLayout && options.flexDirection === "row" && options.flexWrap === "nowrap" && options.layoutDirection === "ltr" && !heightDefinite && typeof measuredWidth === "number" ? resolveMeasuredContainerLength(measuredWidth, input.constraints.maxWidth, "width", input.constraints) : void 0;
+  let rowItems;
+  if (measuredRowWidth !== void 0) for (let index = 0; index < children.length; index++) {
+    const candidate = children[index];
+    const root = isLayoutComponent(candidate.type) ? prepareLayoutComponent(candidate, { receiverToken: getChildPrimitiveReceiverToken(
+      GLOBAL_STATE.renderTransaction,
+      GLOBAL_STATE.primitiveReceiverToken,
+      index
+    ) }) : candidate;
+    const definition = getPrimitiveDefinition(root.type);
+    if (root.type !== Text && definition?.measureIntrinsic && definition.measure) {
+      rowItems = [];
+      break;
+    }
+  }
+  let requiresSolvedCross = false;
+  let lineMain = 0, lineCross = 0, lineItems = 0, wrappedHeight = 0;
   let intrinsicMain = 0;
   let intrinsicCross = 0;
   let count = 0;
-  for (const child of children) {
+  for (let sourceIndex = 0; sourceIndex < children.length; sourceIndex++) {
+    const child = children[sourceIndex];
     const receiverToken = getChildPrimitiveReceiverToken(
       GLOBAL_STATE.renderTransaction,
       GLOBAL_STATE.primitiveReceiverToken,
-      count
+      sourceIndex
     );
-    const prepared = prepareDirectChildStyle(child, receiverToken, diagnosticBox);
-    const style = preparedStyleValue(prepared);
+    const prepared = prepareDirectChildStyle(child, receiverToken, diagnosticBox, true);
+    let style = preparedStyleValue(prepared);
+    if (nativeLayout) {
+      validateIntrinsicBound(style.minWidth, "minWidth", child, diagnosticBox);
+      validateIntrinsicBound(style.maxWidth, "maxWidth", child, diagnosticBox);
+      validateIntrinsicBound(style.minHeight, "minHeight", child, diagnosticBox);
+      validateIntrinsicBound(style.maxHeight, "maxHeight", child, diagnosticBox);
+    }
+    if (hasPercentageBoxPadding(style, options.layoutDirection)) return unsupportedIntrinsic("does not support percentage padding without an actual finite Flex allocation");
+    if (style.position === "absolute") {
+      if (nativeLayout && wrappedIntrinsic && row && widthDefinite && !heightDefinite) return measureAllocatedFlex(input, children, measuredWidth);
+      return unsupportedIntrinsic("does not support absolute children during intrinsic Flex measurement");
+    }
+    if (nativeLayout && (style.paddingStart !== void 0 || style.paddingEnd !== void 0 || style.borderStartWidth !== void 0 || style.borderEndWidth !== void 0)) style = resolveAllocatedInsets(style, { width: diagnosticBox.width, layoutDirection: options.layoutDirection, context: childContext(child, diagnosticBox) });
+    const layoutChild = isLayoutComponent(child.type) ? prepareLayoutComponent(child, { receiverToken }) : child;
+    const layoutReceiverToken = getPrimitiveReceiverToken(layoutChild) ?? receiverToken;
+    const settledColumnChild = nativeLayout && !row && typeof input.style.width === "number" && !heightDefinite && (child.type === Text || layoutChild.type === Flow || layoutChild.type === Grid || layoutChild.type === Flex && isColumnDirection(style.flexDirection) && (style.flexWrap ?? "nowrap") === "nowrap");
+    if (settledColumnChild && (isPercentage(style.width) || isPercentage(style.minWidth) || isPercentage(style.maxWidth))) {
+      if (isPercentage(style.height) || isPercentage(style.flexBasis) || isPercentage(style.minHeight) || isPercentage(style.maxHeight)) return unsupportedIntrinsic("does not support percentage child main sizes or bounds");
+      const reference = resolveMeasuredContainerLength(measuredWidth, input.constraints.maxWidth, "width", input.constraints);
+      const context = childContext(child, diagnosticBox);
+      style = {
+        ...style,
+        width: isPercentage(style.width) ? resolveScalarSizingLength(style.width, reference, "width", context) : style.width,
+        minWidth: isPercentage(style.minWidth) ? resolveScalarSizingLength(style.minWidth, reference, "minWidth", context) : style.minWidth,
+        maxWidth: isPercentage(style.maxWidth) ? resolveScalarSizingLength(style.maxWidth, reference, "maxWidth", context) : style.maxWidth
+      };
+    }
+    if (nativeLayout && automaticWidth && options.flexDirection === "row" && options.flexWrap === "nowrap" && options.layoutDirection === "ltr" && (isPercentage(style.minWidth) || isPercentage(style.maxWidth))) {
+      if (exactRowWidth === void 0) return unsupportedIntrinsic("requires an exact finite row width to resolve percentage main bounds");
+      const context = childContext(child, diagnosticBox);
+      style = {
+        ...style,
+        minWidth: isPercentage(style.minWidth) ? resolveScalarSizingLength(style.minWidth, exactRowWidth, "minWidth", context) : style.minWidth,
+        maxWidth: isPercentage(style.maxWidth) ? resolveScalarSizingLength(style.maxWidth, exactRowWidth, "maxWidth", context) : style.maxWidth
+      };
+      if (typeof style.minWidth === "number" && typeof style.maxWidth === "number" && style.minWidth > style.maxWidth) {
+        throw childDiagnostic(child, "minWidth", style.minWidth, diagnosticBox, "minimum must not exceed maximum");
+      }
+    }
+    if (nativeLayout && automaticHeight && options.flexDirection === "column" && options.flexWrap === "nowrap" && options.layoutDirection === "ltr" && (isPercentage(style.minHeight) || isPercentage(style.maxHeight))) {
+      if (exactColumnHeight === void 0) return unsupportedIntrinsic("requires an exact finite column height to resolve percentage main bounds");
+      const context = childContext(child, diagnosticBox);
+      style = {
+        ...style,
+        minHeight: isPercentage(style.minHeight) ? resolveScalarSizingLength(style.minHeight, exactColumnHeight, "minHeight", context) : style.minHeight,
+        maxHeight: isPercentage(style.maxHeight) ? resolveScalarSizingLength(style.maxHeight, exactColumnHeight, "maxHeight", context) : style.maxHeight
+      };
+      if (typeof style.minHeight === "number" && typeof style.maxHeight === "number" && style.minHeight > style.maxHeight) {
+        throw childDiagnostic(child, "minHeight", style.minHeight, diagnosticBox, "minimum must not exceed maximum");
+      }
+    }
+    if (style.boxSizing !== void 0) style = contentBoxStyle(style, { width: diagnosticBox.width, height: diagnosticBox.height, mainAxis: row ? "width" : "height", context: childContext(child, diagnosticBox) });
     rejectUnsupportedItemFields(child, style, diagnosticBox);
+    if (style.aspectRatio !== void 0) return unsupportedIntrinsic("does not support aspectRatio during intrinsic measurement");
+    const marginDirection = layoutChild.type === Flex ? style.layoutDirection ?? options.layoutDirection : options.layoutDirection;
+    const logicalLeft = marginDirection === "rtl" ? style.marginEnd : style.marginStart;
+    const logicalRight = marginDirection === "rtl" ? style.marginStart : style.marginEnd;
+    const leftValue = logicalLeft !== void 0 ? logicalLeft : style.marginLeft === void 0 ? style.margin : style.marginLeft;
+    const rightValue = logicalRight !== void 0 ? logicalRight : style.marginRight === void 0 ? style.margin : style.marginRight;
+    const topValue = style.marginTop === void 0 ? style.margin : style.marginTop;
+    const bottomValue = style.marginBottom === void 0 ? style.margin : style.marginBottom;
+    const hasLogicalMargin = style.marginStart !== void 0 || style.marginEnd !== void 0;
+    if (!hasLogicalMargin && isPercentage(style.margin) || isPercentage(topValue) || isPercentage(rightValue) || isPercentage(bottomValue) || isPercentage(leftValue)) return unsupportedIntrinsic("does not support percentage margins without an actual finite Flex allocation");
+    const autoTop = topValue === "auto", autoRight = rightValue === "auto";
+    const autoBottom = bottomValue === "auto", autoLeft = leftValue === "auto";
+    if (!nativeLayout && (autoTop || autoRight || autoBottom || autoLeft)) return unsupportedIntrinsic("automatic margins require the experimental layout engine");
+    if (!hasLogicalMargin) numericMargin(nativeLayout && style.margin === "auto" ? 0 : style.margin, "margin", child, diagnosticBox);
+    const marginTop = numericMargin(autoTop ? 0 : topValue, "marginTop", child, diagnosticBox);
+    const marginRight = numericMargin(autoRight ? 0 : rightValue, logicalRight !== void 0 ? marginDirection === "rtl" ? "marginStart" : "marginEnd" : "marginRight", child, diagnosticBox);
+    const marginBottom = numericMargin(autoBottom ? 0 : bottomValue, "marginBottom", child, diagnosticBox);
+    const marginLeft = numericMargin(autoLeft ? 0 : leftValue, logicalLeft !== void 0 ? marginDirection === "rtl" ? "marginEnd" : "marginStart" : "marginLeft", child, diagnosticBox);
+    const marginMain = row ? marginLeft + marginRight : marginTop + marginBottom;
+    const marginCross = row ? marginTop + marginBottom : marginLeft + marginRight;
     const grow = nonnegativeFactor(
       style.flexGrow ?? 0,
       "flexGrow",
@@ -124,6 +604,7 @@ function measureFlex(input) {
       diagnosticBox
     );
     if (grow !== 0) {
+      if (nativeLayout && wrappedIntrinsic && row && widthDefinite && !heightDefinite) return measureAllocatedFlex(input, children, measuredWidth);
       return unsupportedIntrinsic("does not support flexGrow during intrinsic measurement");
     }
     const shrink = nonnegativeFactor(
@@ -133,10 +614,12 @@ function measureFlex(input) {
       diagnosticBox
     );
     const basis = style.flexBasis ?? "auto";
+    if (wrappedIntrinsic && (!hasEmptyRectangleMinimum(child, style, preparedStyleQuery(prepared)) || shrink !== 0 || basis !== "auto")) return measureAllocatedFlex(input, children, measuredWidth);
     const mainProperty = row ? "width" : "height";
     const crossProperty = row ? "height" : "width";
     const minimumProperty = row ? "minWidth" : "minHeight";
-    if ((shrink > 0 || basis === "auto") && style[minimumProperty] === void 0) {
+    if ((shrink > 0 || basis === "auto") && style[minimumProperty] === void 0 && !hasEmptyRectangleMinimum(child, style, preparedStyleQuery(prepared))) {
+      if (nativeLayout && row && widthDefinite && !heightDefinite && getPrimitiveDefinition(layoutChild.type)?.measureIntrinsic) return measureAllocatedFlex(input, children, measuredWidth);
       throw childDiagnostic(
         child,
         minimumProperty,
@@ -150,14 +633,63 @@ function measureFlex(input) {
     if (isPercentage(mainValue) || isPercentage(crossValue) || hasPercentageBounds(style)) {
       return unsupportedIntrinsic("does not support percentage child sizes or bounds");
     }
-    if (mainValue === void 0 || mainValue === "auto") {
-      return unsupportedIntrinsic("requires a definite child basis; measured auto basis is deferred");
-    }
-    if (crossValue === void 0 || crossValue === "auto") {
-      return unsupportedIntrinsic("requires a definite child cross size");
+    let baseMain;
+    let baseCross;
+    const provider = rowItems && layoutChild.type !== Text ? getPrimitiveDefinition(layoutChild.type) : void 0;
+    const measureCross = !!rowItems && !!provider?.measureIntrinsic && !!provider.measure && (crossValue === void 0 || crossValue === "auto");
+    if (rowItems && preparedStyleQuery(prepared)) return unsupportedIntrinsic("does not support responsive child queries during solved row measurement");
+    if (nativeLayout && layoutChild.type === Flex && (style.flexDirection ?? "row") === options.flexDirection && options.flexWrap === "nowrap" && (style.flexWrap ?? "nowrap") === "nowrap" && options.layoutDirection === "ltr" && (style.layoutDirection ?? "ltr") === "ltr" && (mainValue === void 0 || mainValue === "auto") && typeof crossValue === "number" && Number.isFinite(crossValue) && crossValue >= 0 && grow === 0 && shrink === 0) {
+      const measuredChild = clonePibblElement(layoutChild);
+      setPreNormalizedStyle(measuredChild, style, layoutChild, layoutReceiverToken, preparedStyleQuery(prepared));
+      const previousContribution = requestedIntrinsicContribution;
+      requestedIntrinsicContribution = { receiver: layoutReceiverToken, axis: row ? "row" : "column" };
+      let result;
+      try {
+        result = input.measureElement(measuredChild, row ? {
+          minWidth: 0,
+          maxWidth: input.constraints.maxWidth,
+          minHeight: crossValue,
+          maxHeight: crossValue
+        } : {
+          minWidth: crossValue,
+          maxWidth: crossValue,
+          minHeight: 0,
+          maxHeight: input.constraints.maxHeight
+        });
+      } finally {
+        requestedIntrinsicContribution = previousContribution;
+      }
+      if (result.status !== "measured") return result;
+      baseMain = row ? result.size.width : result.size.height;
+      baseCross = crossValue;
+    } else if (nativeLayout && !row && widthDefinite && !heightDefinite && (child.type === Text || layoutChild.type === Flow || layoutChild.type === Grid || layoutChild.type === Flex && isColumnDirection(style.flexDirection) && (style.flexWrap ?? "nowrap") === "nowrap") && (mainValue === void 0 || mainValue === "auto" || crossValue === void 0 || crossValue === "auto")) {
+      const padding2 = normalizeBoxInsets(style, childContext(child, diagnosticBox));
+      const automaticWidth2 = crossValue === void 0 || crossValue === "auto";
+      if (automaticWidth2 && effectiveAlignment(normalizeItemAlignment(style.alignSelf, child, diagnosticBox), options.alignItems) !== "stretch") {
+        return unsupportedIntrinsic("requires stretch or a definite child width in an auto-height column");
+      }
+      const availableWidth = resolveMeasuredContainerLength(measuredWidth, input.constraints.maxWidth, "width", input.constraints);
+      const minWidth = intrinsicOptionalNumber(style.minWidth, 0, "minWidth");
+      const maxWidth = intrinsicOptionalNumber(style.maxWidth, Number.POSITIVE_INFINITY, "maxWidth");
+      if (minWidth > maxWidth) throw childDiagnostic(child, "minWidth", minWidth, diagnosticBox, "minimum must not exceed maximum");
+      const usedWidth = clamp(automaticWidth2 ? Math.max(0, availableWidth - padding2.left - padding2.right - marginCross) : intrinsicNumber(crossValue, "width"), minWidth, maxWidth);
+      const measuredChild = clonePibblElement(layoutChild);
+      const measuredStyle = { ...style, width: usedWidth };
+      setPreNormalizedStyle(measuredChild, measuredStyle, layoutChild, getPrimitiveReceiverToken(layoutChild) ?? receiverToken, preparedStyleQuery(prepared));
+      const result = input.measureElement(measuredChild, { minWidth: 0, maxWidth: usedWidth, minHeight: 0, maxHeight: input.constraints.maxHeight });
+      if (result.status !== "measured") return result;
+      baseMain = mainValue === void 0 || mainValue === "auto" ? result.size.height : intrinsicNumber(mainValue, "flexBasis");
+      baseCross = usedWidth;
+    } else {
+      if (mainValue === void 0 || mainValue === "auto") {
+        return unsupportedIntrinsic("requires a definite child basis; measured auto basis is deferred");
+      }
+      if ((crossValue === void 0 || crossValue === "auto") && !measureCross) {
+        return unsupportedIntrinsic("requires a definite child cross size");
+      }
+      baseMain = intrinsicNumber(mainValue, "flexBasis");
+      baseCross = measureCross ? 0 : intrinsicNumber(crossValue, crossProperty);
     }
-    const baseMain = intrinsicNumber(mainValue, "flexBasis");
-    const baseCross = intrinsicNumber(crossValue, crossProperty);
     const minMain = intrinsicOptionalNumber(style[minimumProperty], 0, minimumProperty);
     const maxMainProperty = row ? "maxWidth" : "maxHeight";
     const maxMain = intrinsicOptionalNumber(
@@ -173,38 +705,233 @@ function measureFlex(input) {
       Number.POSITIVE_INFINITY,
       maxCrossProperty
     );
-    const padding = normalizeEdges(
-      style.padding,
-      "padding",
-      childContext(child, diagnosticBox)
-    );
+    const padding = normalizeBoxInsets(style, childContext(child, diagnosticBox));
     const paddingMain = row ? padding.left + padding.right : padding.top + padding.bottom;
     const paddingCross = row ? padding.top + padding.bottom : padding.left + padding.right;
-    intrinsicMain += clamp(baseMain, minMain, maxMain) + paddingMain;
-    intrinsicCross = Math.max(
-      intrinsicCross,
-      clamp(baseCross, minCross, maxCross) + paddingCross
-    );
+    if (wrappedIntrinsic) {
+      const outerMain = clamp(baseMain, minMain, maxMain) + paddingMain + marginLeft + marginRight;
+      const crossExtent = clamp(baseCross, minCross, maxCross) + paddingCross + marginTop + marginBottom;
+      const nextMain = lineMain + (lineItems > 0 ? mainGap : 0) + outerMain;
+      if (!Number.isFinite(outerMain) || !Number.isFinite(crossExtent)) throw childDiagnostic(child, "intrinsicLine", nextMain, diagnosticBox, "wrapped intrinsic outer extents and line widths must remain finite");
+      const outerCross = Math.max(0, crossExtent);
+      if (lineItems > 0 && nextMain > wrapWidth) {
+        wrappedHeight += lineCross + options.rowGap;
+        if (!Number.isFinite(wrappedHeight)) throw childDiagnostic(child, "intrinsicLine", wrappedHeight, diagnosticBox, "wrapped intrinsic accumulated height must remain finite");
+        lineCross = 0;
+        lineItems = 0;
+      }
+      lineMain = lineItems > 0 ? nextMain : outerMain;
+      if (!Number.isFinite(lineMain)) throw childDiagnostic(child, "intrinsicLine", lineMain, diagnosticBox, "wrapped intrinsic accumulated line width must remain finite");
+      lineCross = Math.max(lineCross, outerCross);
+      lineItems++;
+    }
+    if (rowItems) {
+      rowItems.push({
+        sourceIndex,
+        child,
+        measuredChild: layoutChild,
+        style,
+        receiverToken: layoutReceiverToken,
+        measureCross,
+        baseMain,
+        minMain,
+        maxMain,
+        paddingMain,
+        grow,
+        shrink,
+        marginMainBefore: marginLeft,
+        marginMainAfter: marginRight,
+        baseCross,
+        minCross,
+        maxCross,
+        paddingCross,
+        marginCross
+      });
+      if (measureCross) requiresSolvedCross = true;
+    } else {
+      intrinsicMain += clamp(baseMain, minMain, maxMain) + paddingMain + marginMain;
+      intrinsicCross = Math.max(
+        intrinsicCross,
+        clamp(baseCross, minCross, maxCross) + paddingCross + marginCross
+      );
+    }
     count++;
   }
-  intrinsicMain += Math.max(0, count - 1) * mainGap;
+  if (rowItems) {
+    const targets = requiresSolvedCross ? solveTransientFlexMain(rowItems, measuredRowWidth, mainGap) : void 0;
+    for (let index = 0; index < rowItems.length; index++) {
+      const item = rowItems[index];
+      const main = targets ? targets[index] : clamp(item.baseMain, item.minMain, item.maxMain);
+      let cross = item.baseCross;
+      if (item.measureCross) {
+        const measuredChild = clonePibblElement(item.measuredChild);
+        const measuredStyle = { ...item.style, width: main };
+        setPreNormalizedStyle(measuredChild, measuredStyle, item.child, item.receiverToken);
+        const result = measureConstrainedLayoutChild(measuredChild, {
+          minWidth: main,
+          maxWidth: main,
+          minHeight: 0,
+          maxHeight: Number.POSITIVE_INFINITY
+        }, item.sourceIndex);
+        if (result.status !== "measured") return result;
+        cross = result.size.height;
+      }
+      intrinsicMain += main + item.paddingMain + item.marginMainBefore + item.marginMainAfter;
+      intrinsicCross = Math.max(
+        intrinsicCross,
+        clamp(cross, item.minCross, item.maxCross) + item.paddingCross + item.marginCross
+      );
+    }
+  }
+  intrinsicMain = Math.max(0, intrinsicMain + Math.max(0, count - 1) * mainGap);
   return { status: "measured", size: {
     width: widthDefinite ? resolveMeasuredContainerLength(
-      input.style.width,
+      measuredWidth,
       input.constraints.maxWidth,
       "width",
       input.constraints
     ) : row ? intrinsicMain : intrinsicCross,
     height: heightDefinite ? resolveMeasuredContainerLength(
-      input.style.height,
+      measuredHeight,
       input.constraints.maxHeight,
       "height",
       input.constraints
-    ) : row ? intrinsicCross : intrinsicMain
+    ) : row ? wrappedIntrinsic ? wrappedHeight + lineCross : intrinsicCross : intrinsicMain
   } };
 }
+function intrinsicMainLength(value, property, child, box) {
+  if (value === void 0) return { unit: "none" };
+  if (typeof value === "number" && Number.isFinite(value) && value >= 0) return { value, unit: "point" };
+  if (isPercentage(value)) return { value: parsePercentage(value, property, childContext(child, box)), unit: "percent" };
+  return void 0;
+}
+function measureStagedNonexactMain(input, children, options, diagnosticBox, allocated) {
+  if (!nativeLayout || options.flexWrap !== "nowrap" || options.layoutDirection !== "ltr") return;
+  if (options.flexDirection !== "row" && options.flexDirection !== "column") return;
+  const row = options.flexDirection === "row";
+  const automaticMain = row ? input.style.width === void 0 || input.style.width === "auto" : input.style.height === void 0 || input.style.height === "auto";
+  const cross = row ? input.style.height : input.style.width;
+  const available = row ? input.constraints.maxWidth : input.constraints.maxHeight;
+  const ownerReference = Number.isFinite(available) ? available : void 0;
+  const rootMin = allocated ? allocated.rootMin : intrinsicOwnerBound(
+    row ? input.style.minWidth : input.style.minHeight,
+    ownerReference,
+    row ? "minWidth" : "minHeight",
+    input.constraints
+  );
+  const rootMax = allocated ? allocated.rootMax : intrinsicOwnerBound(
+    row ? input.style.maxWidth : input.style.maxHeight,
+    ownerReference,
+    row ? "maxWidth" : "maxHeight",
+    input.constraints
+  );
+  if (input.style.padding !== void 0 || input.style.paddingStart !== void 0 || input.style.paddingEnd !== void 0 || input.style.borderWidth !== void 0 || input.style.borderStartWidth !== void 0 || input.style.borderEndWidth !== void 0 || input.style.boxSizing !== void 0 || input.style.aspectRatio !== void 0 || (row ? input.style.minHeight !== void 0 && input.style.minHeight !== 0 || input.style.maxHeight !== void 0 : input.style.minWidth !== void 0 && input.style.minWidth !== 0 || input.style.maxWidth !== void 0)) return;
+  if (!automaticMain || typeof cross !== "number" || !Number.isFinite(cross) || cross < 0 || rootMin !== void 0 && (typeof rootMin !== "number" || !Number.isFinite(rootMin) || rootMin < 0) || rootMax !== void 0 && (typeof rootMax !== "number" || !Number.isFinite(rootMax) || rootMax < 0) || typeof input.style.gap === "number" && input.style.gap !== 0 || input.style.rowGap !== void 0 || input.style.columnGap !== void 0) return;
+  if (typeof rootMin === "number" && typeof rootMax === "number" && rootMin > rootMax) {
+    throw layoutDiagnostic({ component: "Flex", property: row ? "minWidth" : "minHeight", value: rootMin, algorithm: "measurement", constraints: input.constraints, reason: "minimum must not exceed maximum" });
+  }
+  const externalOwner = allocated?.main ?? ownerReference;
+  const initialAvailable = allocated?.main ?? (typeof rootMax === "number" ? rootMax : externalOwner);
+  const mode = allocated !== void 0 ? "exact" : initialAvailable === void 0 ? "max-content" : "fit-content";
+  let hasPercentageBound = false;
+  const items = [];
+  const measuredLeaves = [];
+  for (let sourceIndex = 0; sourceIndex < children.length; sourceIndex++) {
+    const child = children[sourceIndex];
+    const definition = getPrimitiveDefinition(child.type);
+    const pairedMeasuredLeaf = child.type !== Rectangle && child.type !== Text && !isKnownLayoutType(child.type) && !Object.hasOwn(child.props, "children") && !!definition?.measureIntrinsic && !!definition.measure;
+    if (!pairedMeasuredLeaf && (child.type !== Rectangle || Object.hasOwn(child.props, "children")) || !child.props.style || typeof child.props.style !== "object" || isSignal(child.props.style)) return;
+    const receiver2 = getChildPrimitiveReceiverToken(GLOBAL_STATE.renderTransaction, GLOBAL_STATE.primitiveReceiverToken, sourceIndex);
+    const prepared = prepareDirectChildStyle(child, receiver2, diagnosticBox, true);
+    const style = preparedStyleValue(prepared);
+    validateIntrinsicBound(style.minWidth, "minWidth", child, diagnosticBox);
+    validateIntrinsicBound(style.maxWidth, "maxWidth", child, diagnosticBox);
+    validateIntrinsicBound(style.minHeight, "minHeight", child, diagnosticBox);
+    validateIntrinsicBound(style.maxHeight, "maxHeight", child, diagnosticBox);
+    const main = row ? style.width : style.height;
+    const basis = style.flexBasis ?? "auto";
+    const childCross = row ? style.height : style.width;
+    const min = row ? style.minWidth : style.minHeight;
+    const max = row ? style.maxWidth : style.maxHeight;
+    const automaticMeasuredMain = main === void 0 || main === "auto";
+    if (preparedStyleQuery(prepared) || style.position !== void 0 || style.aspectRatio !== void 0 || pairedMeasuredLeaf && (row ? style.minHeight !== void 0 && style.minHeight !== 0 || style.maxHeight !== void 0 : style.minWidth !== void 0 && style.minWidth !== 0 || style.maxWidth !== void 0) || typeof childCross !== "number" || !Number.isFinite(childCross) || childCross < 0 || (style.flexGrow ?? 0) !== 0 || (style.flexShrink ?? 1) !== 0 || !zeroIntrinsicMargin(style.margin) || !zeroIntrinsicMargin(style.marginTop) || !zeroIntrinsicMargin(style.marginRight) || !zeroIntrinsicMargin(style.marginBottom) || !zeroIntrinsicMargin(style.marginLeft) || !zeroIntrinsicMargin(style.marginStart) || !zeroIntrinsicMargin(style.marginEnd) || style.padding !== void 0 || style.paddingStart !== void 0 || style.paddingEnd !== void 0 || style.borderWidth !== void 0 || style.borderStartWidth !== void 0 || style.borderEndWidth !== void 0 || (pairedMeasuredLeaf ? !automaticMeasuredMain || basis !== "auto" : typeof main !== "number" || !Number.isFinite(main) || main < 0 || typeof basis !== "number" || !Number.isFinite(basis) || basis < 0 || main !== basis)) return;
+    const intrinsicMin = intrinsicMainLength(min, row ? "minWidth" : "minHeight", child, diagnosticBox);
+    const intrinsicMax = intrinsicMainLength(max, row ? "maxWidth" : "maxHeight", child, diagnosticBox);
+    if (!intrinsicMin || !intrinsicMax) return;
+    if (intrinsicMin.unit === "percent" || intrinsicMax.unit === "percent") hasPercentageBound = true;
+    items.push({ base: pairedMeasuredLeaf ? 0 : basis, min: intrinsicMin, max: intrinsicMax, measured: pairedMeasuredLeaf || void 0 });
+    if (pairedMeasuredLeaf) measuredLeaves.push({ sourceIndex, child, normalized: style, receiver: receiver2, query: preparedStyleQuery(prepared) });
+  }
+  if (!items.length || !hasPercentageBound) return;
+  const intrinsicQuery = {
+    externalOwner,
+    initialAvailable,
+    rootMin,
+    rootMax,
+    mode,
+    gap: 0
+  };
+  if (measuredLeaves.length) {
+    const preparedQueries = prepareTransientIntrinsicMainQueries(items, intrinsicQuery);
+    for (let index = 0; index < measuredLeaves.length; index++) {
+      const leaf = measuredLeaves[index];
+      const queryMaximum = preparedQueries.maximums[leaf.sourceIndex];
+      const measurementChild = clonePibblElement(leaf.child);
+      setPreNormalizedStyle(measurementChild, leaf.normalized, leaf.child, leaf.receiver, leaf.query);
+      const leafCross = row ? leaf.normalized.height : leaf.normalized.width;
+      const constraints = row ? { minWidth: 0, maxWidth: queryMaximum, minHeight: leafCross, maxHeight: leafCross } : { minWidth: leafCross, maxWidth: leafCross, minHeight: 0, maxHeight: queryMaximum };
+      const result = measureConstrainedLayoutChild(measurementChild, constraints);
+      if (result.status === "unsupported") return result;
+      const natural = row ? result.size.width : result.size.height;
+      if (!Number.isFinite(natural) || natural < 0) throw new Error("Experimental staged intrinsic Flex provider returned an invalid main size.");
+      items[leaf.sourceIndex] = { ...items[leaf.sourceIndex], base: natural, measured: true, queryMaximum };
+    }
+  }
+  const receiver = GLOBAL_STATE.primitiveReceiverToken;
+  const axis = row ? "row" : "column";
+  const contribution = allocated === void 0 && requestedIntrinsicContribution !== void 0 && requestedIntrinsicContribution.receiver === receiver && requestedIntrinsicContribution.axis === axis;
+  const normalOwner = contribution && requestedIntrinsicContribution?.normalOwner === true && !measuredLeaves.length && externalOwner !== void 0 && Number.isFinite(externalOwner) && initialAvailable !== void 0 && Number.isFinite(initialAvailable);
+  const resolved = normalOwner ? resolveTransientKnownOwnerMain(items, intrinsicQuery) : resolveTransientIntrinsicMain(items, intrinsicQuery);
+  const stagedMain = allocated?.main ?? (contribution ? resolved.contributionMain : resolved.main);
+  stagePreparedIntrinsicMain(receiver, {
+    elements: children,
+    axis,
+    style: input.style,
+    rootMin,
+    rootMax,
+    contentMain: stagedMain,
+    normalOwner,
+    autoMarginFreeMain: resolved.autoMarginFreeMain,
+    revision: allocationInputRevision(),
+    items: resolved.targets.map((target, sourceIndex) => ({
+      sourceIndex,
+      target,
+      min: resolved.effectiveMins[sourceIndex],
+      max: resolved.effectiveMaxes[sourceIndex],
+      measured: items[sourceIndex].measured
+    }))
+  });
+  const reportedMain = contribution ? resolved.contributionMain : resolved.main;
+  return { status: "measured", size: row ? { width: reportedMain, height: cross } : { width: cross, height: reportedMain } };
+}
+function zeroIntrinsicMargin(value) {
+  return value === void 0 || value === 0 || value === "auto";
+}
+function intrinsicOwnerBound(value, reference, property, constraints) {
+  if (value === void 0) return;
+  if (typeof value === "number") {
+    if (Number.isFinite(value) && value >= 0) return value;
+    throw layoutDiagnostic({ component: "Flex", property, value, algorithm: "measurement", constraints, reason: "must be finite and nonnegative" });
+  }
+  const percentage = parsePercentage(value, property, { component: "Flex", algorithm: "measurement", constraints });
+  if (percentage < 0) throw layoutDiagnostic({ component: "Flex", property, value, algorithm: "measurement", constraints, reason: "must be nonnegative" });
+  if (reference === void 0) return;
+  const resolved = percentage / 100 * reference;
+  if (!Number.isFinite(resolved)) throw layoutDiagnostic({ component: "Flex", property, value, algorithm: "measurement", constraints, reason: "resolved percentage arithmetic must remain finite" });
+  return resolved;
+}
 function resolveMeasuredContainerLength(value, reference, property, constraints) {
-  const resolved = resolveLength(value, reference, property, {
+  const resolved = resolveScalarSizingLength(value, reference, property, {
     component: "Flex",
     algorithm: "measurement",
     constraints
@@ -233,6 +960,15 @@ function intrinsicNumber(value, property) {
   }
   return value;
 }
+function validateIntrinsicBound(value, property, child, container) {
+  if (value === void 0) return;
+  if (typeof value === "number") {
+    if (!Number.isFinite(value) || value < 0) throw childDiagnostic(child, property, value, container, "must be finite and nonnegative");
+    return;
+  }
+  const percentage = parsePercentage(value, property, childContext(child, container));
+  if (percentage < 0) throw childDiagnostic(child, property, value, container, "must be nonnegative");
+}
 function intrinsicOptionalNumber(value, fallback, property) {
   return value === void 0 ? fallback : intrinsicNumber(value, property);
 }
@@ -240,12 +976,7 @@ function isPercentage(value) {
   return typeof value === "string" && value.endsWith("%");
 }
 function hasPercentageBounds(style) {
-  return [
-    style.minWidth,
-    style.maxWidth,
-    style.minHeight,
-    style.maxHeight
-  ].some(isPercentage);
+  return isPercentage(style.minWidth) || isPercentage(style.maxWidth) || isPercentage(style.minHeight) || isPercentage(style.maxHeight);
 }
 function unsupportedIntrinsic(reason) {
   return {
@@ -255,27 +986,180 @@ function unsupportedIntrinsic(reason) {
 }
 function layoutFlex(container, children, style, measurement) {
   const prepared = materializeLayoutChildren(children, "Flex");
-  return resolveFlexPlacements(container, prepared, style, measurement).map((placement) => placement.box);
+  const region = nativeLayout ? new LayoutRegion() : void 0;
+  try {
+    return resolveFlexPlacements(
+      container,
+      prepared,
+      style,
+      measurement,
+      region
+    ).map((placement) => placement.box);
+  } finally {
+    region?.dispose();
+  }
 }
-function resolveFlexPlacements(container, children, style, measurement) {
+function resolveFlexPlacements(container, children, style, measurement, region, stagedIntrinsic, parentSlot, deferStaticAbsolute) {
+  if (region) recordWasmAllocationPass();
   assertFiniteBox(container);
   const options = normalizeFlexOptions(style, container);
-  const row = options.flexDirection === "row";
+  const row = isRowDirection(options.flexDirection);
+  const authoredReverse = options.flexDirection === "row-reverse" || options.flexDirection === "column-reverse";
+  const reverse = authoredReverse !== (row && options.layoutDirection === "rtl");
+  const authoredWrapReverse = options.flexWrap === "wrap-reverse";
+  const wrapReverse = authoredWrapReverse !== (!row && options.layoutDirection === "rtl");
   const mainSize = row ? container.width : container.height;
   const crossSize = row ? container.height : container.width;
   const mainGap = row ? options.columnGap : options.rowGap;
   const crossGap = row ? options.rowGap : options.columnGap;
   const items = [];
-  for (const child of children) {
+  const placementsBySource = new Array(children.length);
+  let hasAspectRatio = false;
+  let hasAutoMainMargins = false;
+  let absolutePaddingBox;
+  let absoluteMeasurementTokens;
+  const occurrences = /* @__PURE__ */ new Map();
+  for (let sourceIndex = 0; sourceIndex < children.length; sourceIndex++) {
+    const child = children[sourceIndex];
+    if (region) recordWasmAllocationItem();
     const receiverToken = getChildPrimitiveReceiverToken(
       GLOBAL_STATE.renderTransaction,
       GLOBAL_STATE.primitiveReceiverToken,
-      items.length
+      sourceIndex
     );
-    const prepared = prepareDirectChildStyle(child, receiverToken, container);
-    const normalized = preparedStyleValue(prepared);
-    assertSupportedChildPosition("Flex", child, normalized);
+    const occurrence = occurrences.get(child.type) ?? 0;
+    if (child.key === void 0) occurrences.set(child.type, occurrence + 1);
+    const prepared = prepareDirectChildStyle(child, receiverToken, container, true);
+    const declared = preparedStyleValue(prepared);
+    let normalized = declared;
+    if (nativeLayout) normalized = resolveAllocatedInsets(normalized, { width: container.width, layoutDirection: options.layoutDirection, context: childContext(child, container) });
+    if (normalized.boxSizing !== void 0) normalized = contentBoxStyle(normalized, { width: container.width, height: container.height, mainAxis: row ? "width" : "height", context: childContext(child, container) });
+    const stagedItem = stagedIntrinsic?.items[sourceIndex];
+    if (stagedItem && stagedItem.sourceIndex !== sourceIndex) throw new Error("Staged intrinsic Flex children are out of source order.");
+    const stagedMeasured = stagedItem?.measured === true;
+    const aspectRatio = normalized.aspectRatio;
+    if (aspectRatio !== void 0 && (typeof aspectRatio !== "number" || !Number.isFinite(aspectRatio) || aspectRatio <= 0)) {
+      throw childDiagnostic(child, "aspectRatio", aspectRatio, container, "must be a positive finite outer width/height ratio");
+    }
+    if (nativeLayout && aspectRatio !== void 0 && normalized.position !== "absolute" && (normalized.flexBasis === void 0 || normalized.flexBasis === "auto")) {
+      const main = normalized[row ? "width" : "height"], cross = normalized[row ? "height" : "width"];
+      if ((main === void 0 || main === "auto") && typeof cross === "number") {
+        const insets = normalizeBoxInsets(normalized, childContext(child, container));
+        const crossInsets = row ? insets.top + insets.bottom : insets.left + insets.right;
+        const mainInsets = row ? insets.left + insets.right : insets.top + insets.bottom;
+        const outer = row ? (cross + crossInsets) * aspectRatio : (cross + crossInsets) / aspectRatio;
+        normalized = { ...normalized, [row ? "width" : "height"]: Math.max(0, outer - mainInsets) };
+      }
+    }
+    assertSupportedChildPosition("Flex", child, normalized, true);
     rejectUnsupportedItemFields(child, normalized, container);
+    if (options[FLEX_BASELINE_GROUP] && normalized.position === "absolute") {
+      throw childDiagnostic(child, "position", "absolute", container, "PIBBL_LAYOUT_UNSUPPORTED_BASELINE: absolute children are outside first-baseline composition");
+    }
+    if (normalized.position === "absolute") {
+      const definition = getPrimitiveDefinition(child.type);
+      const hasPairedMeasurement = child.type !== Text && !!definition?.measureIntrinsic && !!definition.measure;
+      const measurableText = child.type === Text && (normalized.wrap === void 0 || typeof normalized.wrap === "boolean") && (normalized.fit === void 0 || normalized.fit === "visible") && (normalized.overflow === void 0 || normalized.overflow === "visible" || normalized.overflow === "clip") && genericTextFont(normalized);
+      const unwrappedText = measurableText && normalized.wrap !== true;
+      const automaticWidth = normalized.width === void 0 || normalized.width === "auto";
+      const automaticHeight = normalized.height === void 0 || normalized.height === "auto";
+      const naturalBoth = unwrappedText && automaticWidth && automaticHeight && normalized.aspectRatio === void 0 && (absoluteLeftInset(normalized, options.layoutDirection) === void 0 || absoluteRightInset(normalized, options.layoutDirection) === void 0) && (normalized.top === void 0 || normalized.bottom === void 0);
+      const naturalWidth = naturalBoth || automaticWidth && isAbsoluteSizeInput(normalized.height) && normalized.aspectRatio === void 0 && (absoluteLeftInset(normalized, options.layoutDirection) === void 0 || absoluteRightInset(normalized, options.layoutDirection) === void 0) && (hasPairedMeasurement || unwrappedText);
+      const naturalHeight = naturalBoth || automaticHeight && isAbsoluteSizeInput(normalized.width) && normalized.aspectRatio === void 0 && (normalized.top === void 0 || normalized.bottom === void 0) && (hasPairedMeasurement || measurableText);
+      assertSupportedAbsoluteFlexPosition(child, normalized, container, options.layoutDirection, preparedStyleQuery(prepared), naturalWidth, naturalHeight);
+      const measurementToken = naturalWidth || naturalHeight ? region?.absoluteMeasurementIdentity(
+        child.type,
+        child.key === void 0 ? `occurrence:${occurrence}` : `key:${typeof child.key}:${child.key}`
+      ) : void 0;
+      if (measurementToken) (absoluteMeasurementTokens ??= /* @__PURE__ */ new Set()).add(measurementToken);
+      const absoluteMeasurement = naturalWidth || naturalHeight ? measurement : void 0;
+      if (deferStaticAbsolute) {
+        deferStaticAbsolute[sourceIndex] = {
+          sourceIndex,
+          child,
+          style: normalized,
+          receiverToken,
+          query: preparedStyleQuery(prepared),
+          measurement: absoluteMeasurement,
+          measurementToken
+        };
+        placementsBySource[sourceIndex] = deferredStaticPlacementSentinel();
+      } else placementsBySource[sourceIndex] = resolveAbsoluteFlexPlacement(
+        absolutePaddingBox ??= resolveFlexContainingBox(style, container),
+        child,
+        normalized,
+        receiverToken,
+        preparedStyleQuery(prepared),
+        container,
+        options,
+        absoluteMeasurement,
+        region,
+        measurementToken
+      );
+      continue;
+    }
+    if (aspectRatio !== void 0) hasAspectRatio = true;
+    const layoutChild = isLayoutComponent(child.type) ? prepareLayoutComponent(child, { receiverToken }) : child;
+    const pairedLayoutDefinition = getPrimitiveDefinition(layoutChild.type);
+    const knownIntrinsicLayout = child.type === Flex || layoutChild.type === Flow || layoutChild.type === Grid || layoutChild.type === Flex && isColumnDirection(normalized.flexDirection) && (normalized.flexWrap ?? "nowrap") === "nowrap";
+    const layoutToken = region?.identity(child.type, child.key === void 0 ? `occurrence:${occurrence}` : `key:${typeof child.key}:${child.key}`);
+    let relativeX = 0;
+    let relativeY = 0;
+    const position = normalized.position;
+    if (position !== void 0) {
+      assertSupportedRelativeFlexPosition(child, normalized, options, container);
+      const left = resolveFlexInset(normalized.left, "left", child, container);
+      const right = resolveFlexInset(normalized.right, "right", child, container);
+      const top = resolveFlexInset(normalized.top, "top", child, container);
+      const bottom = resolveFlexInset(normalized.bottom, "bottom", child, container);
+      if (position === "relative") {
+        if (options.layoutDirection === "rtl") relativeX = right === void 0 ? left ?? 0 : -right;
+        else relativeX = left === void 0 ? right === void 0 ? 0 : -right : left;
+        relativeY = top === void 0 ? bottom === void 0 ? 0 : -bottom : top;
+      }
+    }
+    const allMargin = normalized.margin === "auto" ? "auto" : allocatedMargin(normalized.margin, "margin", child, container);
+    const marginDirection = layoutChild.type === Flex ? normalized.layoutDirection ?? options.layoutDirection : options.layoutDirection;
+    const logicalLeft = marginDirection === "rtl" ? normalized.marginEnd : normalized.marginStart;
+    const logicalRight = marginDirection === "rtl" ? normalized.marginStart : normalized.marginEnd;
+    const marginLeftProperty = logicalLeft !== void 0 ? marginDirection === "rtl" ? "marginEnd" : "marginStart" : "marginLeft";
+    const marginRightProperty = logicalRight !== void 0 ? marginDirection === "rtl" ? "marginStart" : "marginEnd" : "marginRight";
+    const marginTopValue = normalized.marginTop === void 0 ? allMargin : normalized.marginTop;
+    const marginBottomValue = normalized.marginBottom === void 0 ? allMargin : normalized.marginBottom;
+    const marginRightValue = logicalRight !== void 0 ? logicalRight : normalized.marginRight === void 0 ? allMargin : normalized.marginRight;
+    const marginLeftValue = logicalLeft !== void 0 ? logicalLeft : normalized.marginLeft === void 0 ? allMargin : normalized.marginLeft;
+    const autoTop = marginTopValue === "auto", autoRight = marginRightValue === "auto";
+    const autoBottom = marginBottomValue === "auto", autoLeft = marginLeftValue === "auto";
+    const declaredCrossSize = row ? normalized.height : normalized.width;
+    const hasAutoCrossMargin = row ? autoTop || autoBottom : autoLeft || autoRight;
+    const measuredCrossContext = hasAutoCrossMargin && nativeLayout && row && (declaredCrossSize === void 0 || declaredCrossSize === "auto") && !preparedStyleQuery(prepared) && aspectRatio === void 0;
+    const columnNaturalWrappedTextCross = nativeLayout && !row && options.flexWrap === "nowrap" && child.type === Text && (declaredCrossSize === void 0 || declaredCrossSize === "auto") && typeof declared.height === "number" && typeof normalized.height === "number" && Number.isFinite(normalized.height) && normalized.height >= 0 && (normalized.flexBasis === void 0 || normalized.flexBasis === "auto") && (normalized.flexGrow ?? 0) === 0 && normalized.flexShrink === 0 && normalized.minHeight === 0 && normalized.maxHeight === void 0 && (normalized.minWidth === void 0 || normalized.minWidth === 0) && normalized.maxWidth === void 0 && normalized.wrap === true && (normalized.fit === void 0 || normalized.fit === "visible") && (normalized.overflow === void 0 || normalized.overflow === "visible" || normalized.overflow === "clip") && !preparedStyleQuery(prepared) && aspectRatio === void 0 && genericTextFont(normalized);
+    const measuredColumnTextCross = hasAutoCrossMargin && nativeLayout && !row && options.flexWrap === "nowrap" && child.type === Text && (declaredCrossSize === void 0 || declaredCrossSize === "auto") && (normalized.height === void 0 || normalized.height === "auto" || typeof normalized.height === "number" && Number.isFinite(normalized.height) && normalized.height >= 0) && (normalized.flexBasis === void 0 || normalized.flexBasis === "auto" || typeof normalized.flexBasis === "number" && Number.isFinite(normalized.flexBasis) && normalized.flexBasis >= 0) && (normalized.flexGrow ?? 0) === 0 && normalized.flexShrink === 0 && normalized.minHeight === 0 && normalized.maxHeight === void 0 && normalized.minWidth === void 0 && normalized.maxWidth === void 0 && (normalized.wrap === void 0 || normalized.wrap === false) && !preparedStyleQuery(prepared) && aspectRatio === void 0;
+    const measuredColumnProviderCrossDefinition = hasAutoCrossMargin && nativeLayout && !row && options.flexWrap === "nowrap" && (declaredCrossSize === void 0 || declaredCrossSize === "auto") && typeof declared.height === "number" && typeof normalized.height === "number" && Number.isFinite(normalized.height) && normalized.height >= 0 && (normalized.flexBasis === void 0 || normalized.flexBasis === "auto") && (normalized.flexGrow ?? 0) === 0 && normalized.flexShrink === 0 && normalized.minHeight === 0 && normalized.maxHeight === void 0 && normalized.minWidth === void 0 && normalized.maxWidth === void 0 && !preparedStyleQuery(prepared) && aspectRatio === void 0 && child.type !== Text ? getPrimitiveDefinition(child.type) : void 0;
+    const measuredColumnProviderCross = !!measuredColumnProviderCrossDefinition?.measureIntrinsic && !!measuredColumnProviderCrossDefinition.measure;
+    const measuredColumnKnownCrossAuto = hasAutoCrossMargin && nativeLayout && !row && options.flexWrap === "nowrap" && isKnownLayoutType(layoutChild.type) && (declaredCrossSize === void 0 || declaredCrossSize === "auto") && typeof declared.height === "number" && typeof normalized.height === "number" && Number.isFinite(normalized.height) && normalized.height >= 0 && (normalized.flexBasis === void 0 || normalized.flexBasis === "auto") && (normalized.flexGrow ?? 0) === 0 && normalized.flexShrink === 0 && normalized.minHeight === 0 && normalized.maxHeight === void 0 && (normalized.minWidth === void 0 || normalized.minWidth === 0) && normalized.maxWidth === void 0 && !preparedStyleQuery(prepared) && aspectRatio === void 0;
+    const deferredColumnAutoCross = hasAutoCrossMargin && nativeLayout && !row && options.flexWrap === "nowrap" && (declaredCrossSize === void 0 || declaredCrossSize === "auto") && !preparedStyleQuery(prepared) && aspectRatio === void 0 && (child.type === Text && (normalized.wrap === void 0 || normalized.wrap === false) || layoutChild.type !== Text && !!pairedLayoutDefinition?.measureIntrinsic && !!pairedLayoutDefinition.measure || layoutChild.type === Flex || layoutChild.type === Flow || layoutChild.type === Grid);
+    const measuredTextCrossAuto = hasAutoCrossMargin && nativeLayout && row && child.type === Text && (declaredCrossSize === void 0 || declaredCrossSize === "auto") && !preparedStyleQuery(prepared) && aspectRatio === void 0;
+    const autoCrossDefinition = measuredCrossContext && !measuredTextCrossAuto ? pairedLayoutDefinition : void 0;
+    const measuredPrimitiveCrossAuto = !!autoCrossDefinition?.measureIntrinsic && !!autoCrossDefinition.measure;
+    const measuredKnownCrossAuto = measuredCrossContext && (layoutChild.type === Flex || layoutChild.type === Flow || layoutChild.type === Grid);
+    const ordinaryCrossAuto = hasAutoCrossMargin && nativeLayout && (row || options.flexWrap === "nowrap") && (declaredCrossSize === void 0 || declaredCrossSize === "auto") && !preparedStyleQuery(prepared) && aspectRatio === void 0 && !!pairedLayoutDefinition?.measure;
+    if (hasAutoCrossMargin && !measuredTextCrossAuto && !measuredColumnTextCross && !columnNaturalWrappedTextCross && !measuredColumnProviderCross && !measuredColumnKnownCrossAuto && !deferredColumnAutoCross && !measuredPrimitiveCrossAuto && !measuredKnownCrossAuto && !ordinaryCrossAuto && aspectRatio === void 0 && (declaredCrossSize === void 0 || declaredCrossSize === "auto")) {
+      throw childDiagnostic(child, row ? autoTop ? "marginTop" : "marginBottom" : autoLeft ? marginLeftProperty : marginRightProperty, "auto", container, "auto cross-axis margins require a finite numeric child cross size or supported measurement");
+    }
+    const autoCrossBefore = row ? wrapReverse ? autoBottom : autoTop : wrapReverse ? autoRight : autoLeft;
+    const autoCrossAfter = row ? wrapReverse ? autoTop : autoBottom : wrapReverse ? autoLeft : autoRight;
+    const autoMainBefore = row ? reverse ? autoRight : autoLeft : reverse ? autoBottom : autoTop;
+    const autoMainAfter = row ? reverse ? autoLeft : autoRight : reverse ? autoTop : autoBottom;
+    if (autoMainBefore || autoMainAfter) hasAutoMainMargins = true;
+    const marginTop = allocatedMargin(autoTop ? 0 : marginTopValue, "marginTop", child, container);
+    const marginRight = allocatedMargin(autoRight ? 0 : marginRightValue, marginRightProperty, child, container);
+    const marginBottom = allocatedMargin(autoBottom ? 0 : marginBottomValue, "marginBottom", child, container);
+    const marginLeft = allocatedMargin(autoLeft ? 0 : marginLeftValue, marginLeftProperty, child, container);
+    const marginMainBefore = row ? reverse ? marginRight : marginLeft : reverse ? marginBottom : marginTop;
+    const marginMainAfter = row ? reverse ? marginLeft : marginRight : reverse ? marginTop : marginBottom;
+    const marginCrossBefore = row ? wrapReverse ? marginBottom : marginTop : wrapReverse ? marginRight : marginLeft;
+    const marginCrossAfter = row ? wrapReverse ? marginTop : marginBottom : wrapReverse ? marginLeft : marginRight;
     const grow = nonnegativeFactor(normalized.flexGrow ?? 0, "flexGrow", child, container);
     const shrink = nonnegativeFactor(
       normalized.flexShrink ?? 1,
@@ -284,8 +1168,93 @@ function resolveFlexPlacements(container, children, style, measurement) {
       container
     );
     const basisValue = normalized.flexBasis ?? "auto";
+    const alignment = normalizeItemAlignment(normalized.alignSelf, child, container, authoredWrapReverse);
+    const padding = normalizeBoxInsets(normalized, childContext(child, container));
+    const paddingMain = row ? padding.left + padding.right : padding.top + padding.bottom;
+    const paddingCross = row ? padding.top + padding.bottom : padding.left + padding.right;
     const minimumProperty = row ? "minWidth" : "minHeight";
-    if ((shrink > 0 || basisValue === "auto") && normalized[minimumProperty] === void 0) {
+    const intrinsicTextSizing = nativeLayout && row && child.type === Text && (normalized.fit === void 0 || normalized.fit === "visible") && (normalized.overflow === void 0 || normalized.overflow === "visible" || normalized.overflow === "clip") && !preparedStyleQuery(prepared) && aspectRatio === void 0 && (normalized.width === void 0 || normalized.width === "auto" || typeof normalized.width === "number") && (normalized.maxWidth === void 0 || typeof normalized.maxWidth === "number");
+    const automaticTextBasis = intrinsicTextSizing && basisValue === "auto" && (normalized.width === void 0 || normalized.width === "auto") && (normalized.minWidth === void 0 || typeof normalized.minWidth === "number");
+    const automaticTextMinimum = intrinsicTextSizing && normalized[minimumProperty] === void 0 && shrink > 0 && (typeof basisValue === "number" || basisValue === "auto" && (typeof normalized.width === "number" || automaticTextBasis));
+    const aspectMain = basisValue === "auto" ? normalized[row ? "width" : "height"] : basisValue;
+    const aspectCross = normalized[row ? "height" : "width"];
+    const automaticAspectRectangleMinimum = nativeLayout && aspectRatio !== void 0 && child.type === Rectangle && !Object.hasOwn(child.props, "children") && !preparedStyleQuery(prepared) && typeof aspectMain === "number" && Number.isFinite(aspectMain) && aspectMain >= 0 && (aspectCross === void 0 || aspectCross === "auto" || typeof aspectCross === "number" && Number.isFinite(aspectCross) && aspectCross >= 0);
+    const automaticRectangleMinimum = automaticAspectRectangleMinimum || hasEmptyRectangleMinimum(child, normalized, preparedStyleQuery(prepared), true);
+    const intrinsicMainValue = basisValue === void 0 || basisValue === "auto" ? normalized[row ? "width" : "height"] : basisValue;
+    const intrinsicMainBounds = isIntrinsicSizingValue(normalized[row ? "minWidth" : "minHeight"]) || isIntrinsicSizingValue(normalized[row ? "maxWidth" : "maxHeight"]);
+    const intrinsicMainRequested = isIntrinsicSizingValue(intrinsicMainValue);
+    const directIntrinsicTextMain = (intrinsicMainRequested || intrinsicMainBounds) && !stagedMeasured && nativeLayout && row && child.type === Text && !preparedStyleQuery(prepared);
+    const directIntrinsicMain = (intrinsicMainRequested || intrinsicMainBounds) && !stagedMeasured && nativeLayout && row && !preparedStyleQuery(prepared) && child.type !== Text && !isLayoutComponent(child.type) && !!pairedLayoutDefinition?.measureIntrinsic && !!pairedLayoutDefinition.measure;
+    const customIntrinsic = child.type !== Text && (!isKnownLayoutType(layoutChild.type) || directIntrinsicMain) && !stagedMeasured && nativeLayout && row && !preparedStyleQuery(prepared) && !!pairedLayoutDefinition?.measureIntrinsic && (!isLayoutComponent(child.type) || aspectRatio === void 0 && !!pairedLayoutDefinition.measure) && (directIntrinsicMain || basisValue === "auto" && (normalized.width === void 0 || normalized.width === "auto") || shrink > 0 && normalized.minWidth === void 0);
+    let intrinsicMainRequest;
+    if (intrinsicMainRequested && (directIntrinsicMain || directIntrinsicTextMain)) {
+      intrinsicMainRequest = normalizeSizingLength(intrinsicMainValue, {
+        reference: mainSize,
+        property: basisValue === void 0 || basisValue === "auto" ? "width" : "flexBasis",
+        context: childContext(child, container),
+        allowAuto: false,
+        allowIntrinsic: true
+      });
+    }
+    let intrinsicTextMinimum;
+    let intrinsicTextBasis;
+    let intrinsicTextMaximum;
+    if (directIntrinsicTextMain) {
+      const intrinsic = measureTextIntrinsicWidths(child, normalized, receiverToken, measurement, region);
+      const maximum = intrinsic.maximum;
+      if (!Number.isFinite(maximum) || maximum < 0) {
+        throw childDiagnostic(child, "width", intrinsicMainValue, container, "Text intrinsic run width must be finite and nonnegative");
+      }
+      intrinsicTextMinimum = intrinsic.minimum;
+      intrinsicTextMaximum = maximum;
+      if (intrinsicMainRequest) {
+        intrinsicTextBasis = resolveIntrinsicMainBasis(intrinsicMainRequest, intrinsicTextMinimum, maximum, child, container);
+      } else if (basisValue === "auto" && (normalized.width === void 0 || normalized.width === "auto")) {
+        intrinsicTextBasis = maximum;
+      }
+    }
+    let intrinsicSizes;
+    if (customIntrinsic) {
+      const measurementChild = clonePibblElement(child);
+      setPreNormalizedStyle(measurementChild, normalized, child, receiverToken);
+      const result = measureIntrinsicElement(measurementChild, { minWidth: 0, maxWidth: container.width, minHeight: 0, maxHeight: container.height }, measurement.service, region ? { cache: region, token: layoutToken ?? receiverToken, recordMeasurement: recordWasmMeasurement, key: JSON.stringify([allocationStructuralRevision(), measurementStyle(normalized), container.width, container.height]) } : void 0);
+      if (result.status === "unsupported") throw childDiagnostic(child, "measureIntrinsic", "unsupported", container, `intrinsic measurement is required but unsupported: ${result.reason}; supply a definite basis and explicit minWidth: 0 to avoid the query`);
+      intrinsicSizes = result;
+    }
+    const columnExactWidth = !row && typeof normalized.width === "number" ? normalized.width : !row && (normalized.width === void 0 || normalized.width === "auto" || normalized.width === "stretch") && !hasAutoCrossMargin && effectiveAlignment(alignment, options.alignItems) === "stretch" ? clamp(
+      Math.max(0, crossSize - paddingCross - marginCrossBefore - marginCrossAfter),
+      resolveOptionalBound(normalized.minWidth, crossSize, "minWidth", 0, child, container),
+      resolveOptionalBound(normalized.maxWidth, crossSize, "maxWidth", Number.POSITIVE_INFINITY, child, container)
+    ) : void 0;
+    const columnMinimumDefinition = nativeLayout && !row && (intrinsicMainRequested || intrinsicMainBounds || shrink > 0 && normalized.minHeight === void 0) && (normalized.height === void 0 || normalized.height === "auto" || typeof normalized.height === "number" || isIntrinsicSizingValue(normalized.height)) && columnExactWidth !== void 0 && Number.isFinite(columnExactWidth) && columnExactWidth >= 0 && aspectRatio === void 0 && !preparedStyleQuery(prepared) ? getPrimitiveDefinition(layoutChild.type) : void 0;
+    let columnMinimumSize;
+    if (columnMinimumDefinition?.measure && (columnMinimumDefinition.measureIntrinsic || child.type === Text || knownIntrinsicLayout)) {
+      const measurementChild = clonePibblElement(child);
+      const measurementStyle2 = { ...normalized, width: columnExactWidth };
+      setPreNormalizedStyle(measurementChild, measurementStyle2, child, receiverToken);
+      const result = measureFlexChild(measurementChild, {
+        minWidth: columnExactWidth,
+        maxWidth: columnExactWidth,
+        minHeight: 0,
+        maxHeight: Number.POSITIVE_INFINITY
+      }, measurementStyle2, layoutToken ?? receiverToken, measurement, region, void 0, true);
+      if (result.status === "unsupported") throw childDiagnostic(
+        child,
+        "minHeight",
+        "auto",
+        container,
+        `exact-width automatic minimum measurement is required but unsupported: ${result.reason}`
+      );
+      columnMinimumSize = result.size;
+      if (intrinsicMainRequested) intrinsicMainRequest = normalizeSizingLength(intrinsicMainValue, {
+        reference: mainSize,
+        property: "height",
+        context: childContext(child, container),
+        allowAuto: false,
+        allowIntrinsic: true
+      });
+    }
+    if (!stagedMeasured && (shrink > 0 || basisValue === "auto") && normalized[minimumProperty] === void 0 && !automaticTextMinimum && !automaticTextBasis && !automaticRectangleMinimum && !intrinsicSizes && intrinsicTextMinimum === void 0 && !columnMinimumSize) {
       throw childDiagnostic(
         child,
         minimumProperty,
@@ -298,19 +1267,36 @@ function resolveFlexPlacements(container, children, style, measurement) {
     const crossProperty = row ? "height" : "width";
     const mainReference = mainSize;
     const crossReference = crossSize;
-    let measured;
+    let measured = columnMinimumSize;
     const specifiedMain = normalized[mainProperty];
     const specifiedCross = normalized[crossProperty];
-    const needsMeasuredMain = basisValue === "auto" && (specifiedMain === void 0 || specifiedMain === "auto");
+    const needsMeasuredMain = !stagedMeasured && basisValue === "auto" && (specifiedMain === void 0 || specifiedMain === "auto");
+    if (aspectRatio !== void 0 && needsMeasuredMain && !intrinsicSizes && !automaticTextBasis) throw childDiagnostic(child, "aspectRatio", aspectRatio, container, "requires a definite main dimension or flexBasis; intrinsic aspect sizing is unsupported");
     const crossAuto = specifiedCross === void 0 || specifiedCross === "auto";
-    const alignment = normalizeItemAlignment(normalized.alignSelf, child, container);
-    const needsMeasuredCross = crossAuto && alignment !== "stretch" && options.alignItems !== "stretch";
-    if (needsMeasuredMain || needsMeasuredCross || crossAuto) {
+    const measuredColumnWrapText = nativeLayout && !row && options.flexWrap !== "nowrap" && needsMeasuredMain && child.type === Text && aspectRatio === void 0 && typeof declared.width === "number" && typeof normalized.width === "number" && Number.isFinite(normalized.width) && normalized.width >= 0 && declared.minHeight === 0 && grow === 0 && shrink === 0 && normalized.wrap === true && (normalized.fit === void 0 || normalized.fit === "visible") && (normalized.overflow === void 0 || normalized.overflow === "visible" || normalized.overflow === "clip") && (normalized.minWidth === void 0 || normalized.minWidth === 0) && normalized.maxWidth === void 0 && normalized.maxHeight === void 0 && !preparedStyleQuery(prepared) && genericTextFont(normalized);
+    const measuredColumnProviderDefinition = nativeLayout && !row && options.flexDirection === "column" && options.flexWrap === "nowrap" && options.layoutDirection === "ltr" && needsMeasuredMain && aspectRatio === void 0 && typeof declared.width === "number" && typeof normalized.width === "number" && Number.isFinite(normalized.width) && normalized.width >= 0 && declared.minHeight === 0 && grow === 0 && shrink === 0 && (normalized.minWidth === void 0 || normalized.minWidth === 0) && normalized.maxWidth === void 0 && !preparedStyleQuery(prepared) ? getPrimitiveDefinition(child.type) : void 0;
+    const measuredColumnProvider = child.type !== Text && !isKnownLayoutType(layoutChild.type) && !!measuredColumnProviderDefinition?.measureIntrinsic && !!measuredColumnProviderDefinition.measure;
+    const naturalColumnWrappedTextCross = columnNaturalWrappedTextCross && (hasAutoCrossMargin || effectiveAlignment(alignment, options.alignItems) !== "stretch");
+    if (nativeLayout && !row && options.flexWrap !== "nowrap" && (needsMeasuredMain && !measuredColumnWrapText || aspectRatio === void 0 && crossAuto && effectiveAlignment(alignment, options.alignItems) !== "stretch")) {
+      throw childDiagnostic(
+        child,
+        needsMeasuredMain ? mainProperty : crossProperty,
+        "auto",
+        container,
+        "Experimental WASM column wrap requires a declared height or flexBasis and a declared width or stretched automatic width; intrinsic item sizes are unsupported."
+      );
+    }
+    const needsMeasuredCross = aspectRatio === void 0 && crossAuto && alignment !== "stretch" && options.alignItems !== "stretch";
+    const deferredIntrinsicColumn = aspectRatio === void 0 && nativeLayout && !row && knownIntrinsicLayout && needsMeasuredMain && crossAuto && effectiveAlignment(alignment, options.alignItems) === "stretch";
+    if (intrinsicSizes) measured = intrinsicSizes.maxContent;
+    if (!columnMinimumSize && !directIntrinsicTextMain && !intrinsicSizes && !deferredIntrinsicColumn && !naturalColumnWrappedTextCross && (!deferredColumnAutoCross || needsMeasuredMain) && (needsMeasuredMain || aspectRatio === void 0 && (needsMeasuredCross || crossAuto))) {
+      const naturalColumnCross = measuredColumnTextCross || measuredColumnProviderCross || measuredColumnKnownCrossAuto || deferredColumnAutoCross;
+      const exactColumnHeight = naturalColumnCross && typeof normalized.height === "number" ? normalized.height : void 0;
       const constraints = {
-        minWidth: 0,
-        maxWidth: container.width,
-        minHeight: 0,
-        maxHeight: container.height
+        minWidth: naturalColumnCross ? 0 : measuredColumnWrapText || measuredColumnProvider ? normalized.width : 0,
+        maxWidth: naturalColumnCross ? Number.POSITIVE_INFINITY : measuredColumnWrapText || measuredColumnProvider ? normalized.width : container.width,
+        minHeight: exactColumnHeight ?? 0,
+        maxHeight: exactColumnHeight ?? (measuredColumnWrapText || measuredColumnProvider ? Number.POSITIVE_INFINITY : container.height)
       };
       const measurementChild = clonePibblElement(child);
       setPreNormalizedStyle(
@@ -320,10 +1306,21 @@ function resolveFlexPlacements(container, children, style, measurement) {
         receiverToken,
         preparedStyleQuery(prepared)
       );
-      const result = measurement.measureElement(measurementChild, constraints);
+      const result = measureFlexChild(
+        measurementChild,
+        constraints,
+        normalized,
+        layoutToken ?? receiverToken,
+        measurement,
+        region,
+        preparedStyleQuery(prepared),
+        nativeLayout && row && options.flexWrap === "nowrap" || measuredPrimitiveCrossAuto || measuredColumnProvider || measuredColumnProviderCross,
+        needsMeasuredMain ? row ? "row" : "column" : void 0,
+        ordinaryCrossAuto || !!pairedLayoutDefinition?.measure && !pairedLayoutDefinition.measureIntrinsic && layoutChild.type !== Text && !isKnownLayoutType(layoutChild.type)
+      );
       if (result.status === "measured") {
         measured = result.size;
-      } else if (needsMeasuredMain || crossAuto && effectiveAlignment(
+      } else if (measuredTextCrossAuto || measuredColumnTextCross || measuredKnownCrossAuto || measuredColumnProviderCross || measuredColumnKnownCrossAuto || deferredColumnAutoCross || ordinaryCrossAuto || needsMeasuredMain || crossAuto && effectiveAlignment(
         alignment,
         options.alignItems
       ) !== "stretch") {
@@ -336,26 +1333,9 @@ function resolveFlexPlacements(container, children, style, measurement) {
         );
       }
     }
-    const baseMain = resolveBasis(
-      basisValue,
-      specifiedMain,
-      measured?.[mainProperty],
-      mainReference,
-      mainProperty,
-      child,
-      container
-    );
-    const preferredCross = crossAuto ? measured?.[crossProperty] ?? 0 : resolveItemLength(
-      specifiedCross,
-      crossReference,
-      crossProperty,
-      child,
-      container
-    );
-    const padding = normalizeEdges(normalized.padding, "padding", childContext(child, container));
-    const paddingMain = row ? padding.left + padding.right : padding.top + padding.bottom;
-    const paddingCross = row ? padding.top + padding.bottom : padding.left + padding.right;
-    const minMain = resolveOptionalBound(
+    const intrinsicMinimum = row ? intrinsicSizes?.minContent.width ?? intrinsicTextMinimum : columnMinimumSize?.height;
+    const intrinsicMaximum = row ? intrinsicSizes?.maxContent.width ?? intrinsicTextMaximum : columnMinimumSize?.height;
+    let minMain = stagedItem ? stagedItem.min : isIntrinsicSizingValue(normalized[minimumProperty]) ? resolveIntrinsicMainBound(normalized[minimumProperty], intrinsicMinimum, intrinsicMaximum, minimumProperty, mainReference, child, container) : resolveOptionalBound(
       normalized[minimumProperty],
       mainReference,
       minimumProperty,
@@ -364,7 +1344,7 @@ function resolveFlexPlacements(container, children, style, measurement) {
       container
     );
     const maximumProperty = row ? "maxWidth" : "maxHeight";
-    const maxMain = resolveOptionalBound(
+    const maxMain = stagedItem ? stagedItem.max : isIntrinsicSizingValue(normalized[maximumProperty]) ? resolveIntrinsicMainBound(normalized[maximumProperty], intrinsicMinimum, intrinsicMaximum, maximumProperty, mainReference, child, container) : resolveOptionalBound(
       normalized[maximumProperty],
       mainReference,
       maximumProperty,
@@ -372,6 +1352,32 @@ function resolveFlexPlacements(container, children, style, measurement) {
       child,
       container
     );
+    if (intrinsicSizes && normalized.minWidth === void 0 && shrink > 0) {
+      minMain = Math.min(
+        intrinsicSizes.minContent.width,
+        maxMain,
+        typeof specifiedMain === "number" ? specifiedMain : Number.POSITIVE_INFINITY
+      );
+    }
+    if (columnMinimumSize) {
+      minMain = Math.min(
+        columnMinimumSize.height,
+        maxMain,
+        typeof specifiedMain === "number" ? specifiedMain : Number.POSITIVE_INFINITY
+      );
+    }
+    if (intrinsicTextMinimum !== void 0 && normalized.minWidth === void 0 && shrink > 0) {
+      minMain = Math.min(intrinsicTextMinimum, maxMain);
+    }
+    const intrinsicMainBasis = intrinsicTextBasis ?? (intrinsicMainRequest && intrinsicMinimum !== void 0 && intrinsicMaximum !== void 0 ? resolveIntrinsicMainBasis(intrinsicMainRequest, intrinsicMinimum, intrinsicMaximum, child, container) : void 0);
+    if (automaticTextMinimum) {
+      const contentMinimum = measureTextContentMinimum(child, normalized, receiverToken, measurement, region);
+      minMain = Math.min(
+        contentMinimum,
+        maxMain,
+        typeof specifiedMain === "number" ? specifiedMain : Number.POSITIVE_INFINITY
+      );
+    }
     const minCrossProperty = row ? "minHeight" : "minWidth";
     const maxCrossProperty = row ? "maxHeight" : "maxWidth";
     const minCross = resolveOptionalBound(
@@ -390,6 +1396,30 @@ function resolveFlexPlacements(container, children, style, measurement) {
       child,
       container
     );
+    if (naturalColumnWrappedTextCross) {
+      const token = layoutToken ?? receiverToken;
+      const naturalWidth = measureTextNaturalWidth(child, normalized, receiverToken, token, measurement, region);
+      const chosenWidth = Math.min(naturalWidth, Math.max(0, crossSize - paddingCross - marginCrossBefore - marginCrossAfter));
+      const measuredStyle = { ...normalized, width: chosenWidth };
+      const measurementChild = clonePibblElement(child);
+      setPreNormalizedStyle(measurementChild, measuredStyle, child, receiverToken, preparedStyleQuery(prepared));
+      const result = measureFlexChild(measurementChild, {
+        minWidth: chosenWidth,
+        maxWidth: chosenWidth,
+        minHeight: normalized.height,
+        maxHeight: normalized.height
+      }, measuredStyle, token, measurement, region, preparedStyleQuery(prepared));
+      if (result.status !== "measured") {
+        throw childDiagnostic(
+          child,
+          "width",
+          "auto",
+          container,
+          `measurement is required but unsupported: ${result.reason}`
+        );
+      }
+      measured = result.size;
+    }
     if (minMain > maxMain) {
       throw childDiagnostic(
         child,
@@ -408,94 +1438,665 @@ function resolveFlexPlacements(container, children, style, measurement) {
         "minimum must not exceed maximum"
       );
     }
+    if (!row && options.flexWrap === "nowrap" && (child.type === Text || nativeLayout && knownIntrinsicLayout) && needsMeasuredMain) {
+      const preferredWidth = crossAuto ? effectiveAlignment(alignment, options.alignItems) === "stretch" && !hasAutoCrossMargin ? Math.max(0, crossSize - paddingCross - marginCrossBefore - marginCrossAfter) : measured?.width ?? 0 : resolveItemLength(specifiedCross, crossReference, crossProperty, child, container);
+      const usedWidth = clamp(preferredWidth, minCross, maxCross);
+      if (child.type === Text || usedWidth !== measured?.width) {
+        const measuredStyle = { ...normalized, width: usedWidth };
+        const measurementChild = clonePibblElement(layoutChild);
+        setPreNormalizedStyle(measurementChild, measuredStyle, layoutChild, getPrimitiveReceiverToken(layoutChild) ?? receiverToken, preparedStyleQuery(prepared));
+        const result = measureFlexChild(measurementChild, {
+          minWidth: 0,
+          maxWidth: usedWidth,
+          minHeight: 0,
+          maxHeight: container.height
+        }, measuredStyle, layoutToken ?? receiverToken, measurement, region, preparedStyleQuery(prepared));
+        if (result.status === "measured") measured = result.size;
+        else throw childDiagnostic(
+          child,
+          mainProperty,
+          "auto",
+          container,
+          `measurement is required but unsupported: ${result.reason}`
+        );
+      }
+    }
+    let naturalTextMain;
+    if (automaticTextBasis) {
+      naturalTextMain = measureTextNaturalWidth(child, normalized, receiverToken, layoutToken ?? receiverToken, measurement, region);
+    }
+    const stretchMain = (declared.flexBasis === void 0 || declared.flexBasis === "auto" ? declared[mainProperty] : declared.flexBasis) === "stretch";
+    const baseMain = stagedMeasured ? stagedItem.target : stretchMain ? Math.max(0, mainReference - marginMainBefore - marginMainAfter - paddingMain) : intrinsicMainBasis ?? naturalTextMain ?? resolveBasis(
+      basisValue,
+      specifiedMain,
+      measured?.[mainProperty],
+      mainReference,
+      mainProperty,
+      child,
+      container
+    );
+    const preferredCross = declared[crossProperty] === "stretch" ? Math.max(0, crossReference - marginCrossBefore - marginCrossAfter - paddingCross) : aspectRatio !== void 0 ? 0 : crossAuto ? measured?.[crossProperty] ?? 0 : resolveItemLength(
+      specifiedCross,
+      crossReference,
+      crossProperty,
+      child,
+      container
+    );
     items.push({
       child,
       normalized,
       baseMain,
       targetMain: baseMain,
       paddingMain,
+      marginMainBefore,
+      marginMainAfter,
+      autoMainBefore,
+      autoMainAfter,
+      marginCrossBefore,
+      marginCrossAfter,
+      autoCrossBefore,
+      autoCrossAfter,
       preferredCross: clamp(preferredCross, minCross, maxCross) + paddingCross,
       paddingCross,
+      paddingCrossBefore: row ? padding.top : padding.left,
       minMain,
       maxMain,
       minCross,
       maxCross,
       grow,
       shrink,
-      crossAuto,
+      crossAuto: aspectRatio === void 0 && crossAuto,
+      aspectRatio,
       alignSelf: alignment,
       receiverToken,
-      query: preparedStyleQuery(prepared)
+      layoutToken,
+      query: preparedStyleQuery(prepared),
+      relativeX,
+      relativeY,
+      deferredColumnAutoCross,
+      ordinaryColumnAutoCross: !row && ordinaryCrossAuto && !deferredColumnAutoCross && !naturalColumnWrappedTextCross,
+      sourceIndex,
+      layoutOccurrence: occurrence
     });
   }
-  const lines = collectLines(items, mainSize, mainGap, options.flexWrap);
-  for (const line of lines) resolveFlexibleLengths(line, mainSize, mainGap);
-  resolveLineCrossSizes(
-    lines,
-    crossSize,
-    crossGap,
-    options.alignContent,
-    options.flexWrap === "wrap"
-  );
-  const placements = [];
+  const wrappedRegion = region && options.flexWrap !== "nowrap";
+  const lines = region ? items.length ? [{ items, crossSize: 0, crossOffset: 0 }] : [] : collectLines(items, mainSize, mainGap, options.flexWrap);
+  if (lines.length === 0) region?.solve([], mainSize, mainGap, !!wrappedRegion);
+  for (const line of lines) {
+    if (region) region.solve(line.items, mainSize, mainGap, !!wrappedRegion);
+    else resolveFlexibleLengths(line, mainSize, mainGap);
+    if (hasAspectRatio) for (const item of line.items) {
+      if (item.aspectRatio === void 0) continue;
+      const outerMain = item.targetMain + item.paddingMain;
+      const outerCross = row ? outerMain / item.aspectRatio : outerMain * item.aspectRatio;
+      if (!Number.isFinite(outerCross)) throw childDiagnostic(item.child, "aspectRatio", item.aspectRatio, container, "derived cross size must be finite");
+      item.preferredCross = clamp(Math.max(0, outerCross - item.paddingCross), item.minCross, item.maxCross) + item.paddingCross;
+    }
+    if (row) for (const item of line.items) {
+      let measuredRoot = item.child;
+      if (item.crossAuto && nativeLayout && (options.flexWrap === "nowrap" && options.flexDirection === "row" && options.layoutDirection === "ltr" || item.autoCrossBefore || item.autoCrossAfter || options[FLEX_BASELINE_GROUP]) && !item.query && item.aspectRatio === void 0 && isLayoutComponent(item.child.type)) {
+        measuredRoot = prepareLayoutComponent(item.child, { receiverToken: item.receiverToken });
+      }
+      const definition = nativeLayout && (options.flexWrap === "nowrap" || item.autoCrossBefore || item.autoCrossAfter || options[FLEX_BASELINE_GROUP]) && !item.query && item.aspectRatio === void 0 ? getPrimitiveDefinition(measuredRoot.type) : void 0;
+      const constrainedProvider = measuredRoot.type !== Text && !isKnownLayoutType(measuredRoot.type) && !!definition?.measureIntrinsic && !!definition.measure;
+      const ordinaryProvider = !!definition?.measure && (item.autoCrossBefore || item.autoCrossAfter || options[FLEX_BASELINE_GROUP]);
+      const requiredKnownCross = nativeLayout && (item.autoCrossBefore || item.autoCrossAfter) && (measuredRoot.type === Flex || measuredRoot.type === Flow || measuredRoot.type === Grid);
+      if (!item.crossAuto || item.child.type !== Text && !(nativeLayout && item.child.type === Flex) && !constrainedProvider && !ordinaryProvider && !requiredKnownCross) continue;
+      if (item.child.type === Flex && item.normalized.width === item.targetMain) continue;
+      const measuredStyle = { ...item.normalized, width: item.targetMain };
+      const child = clonePibblElement(item.child);
+      setPreNormalizedStyle(child, measuredStyle, item.child, item.receiverToken, item.query);
+      const result = measureFlexChild(child, {
+        minWidth: constrainedProvider || ordinaryProvider ? item.targetMain : 0,
+        maxWidth: item.targetMain,
+        minHeight: 0,
+        maxHeight: container.height
+      }, measuredStyle, item.layoutToken ?? item.receiverToken, measurement, region, item.query, constrainedProvider, void 0, ordinaryProvider);
+      if (result.status === "measured") {
+        item.preferredCross = clamp(result.size.height, item.minCross, item.maxCross) + item.paddingCross;
+        if (options[FLEX_BASELINE_GROUP] && (item.alignSelf !== "stretch" || item.autoCrossBefore || item.autoCrossAfter)) item.crossAuto = false;
+      } else if (constrainedProvider || ordinaryProvider || requiredKnownCross || options[FLEX_BASELINE_GROUP] || nativeLayout && item.child.type === Text && (item.autoCrossBefore || item.autoCrossAfter)) throw childDiagnostic(item.child, "height", "auto", container, `final-width measurement is required but unsupported: ${result.reason}`);
+    }
+  }
+  if (!row) for (const item of items) {
+    if (!item.deferredColumnAutoCross && !item.ordinaryColumnAutoCross || !item.crossAuto) continue;
+    let measuredRoot = item.child;
+    if (isLayoutComponent(item.child.type)) {
+      measuredRoot = prepareLayoutComponent(item.child, { receiverToken: item.receiverToken });
+    }
+    const definition = getPrimitiveDefinition(measuredRoot.type);
+    const constrainedProvider = measuredRoot.type !== Text && !!definition?.measureIntrinsic && !!definition.measure;
+    const ordinaryWidth = Math.max(0, item.preferredCross - item.paddingCross);
+    const measuredStyle = item.ordinaryColumnAutoCross ? { ...item.normalized, width: ordinaryWidth, height: item.targetMain } : { ...item.normalized, height: item.targetMain };
+    const measurementChild = clonePibblElement(item.child);
+    setPreNormalizedStyle(measurementChild, measuredStyle, item.child, item.receiverToken, item.query);
+    const result = measureFlexChild(measurementChild, {
+      minWidth: 0,
+      maxWidth: item.ordinaryColumnAutoCross ? ordinaryWidth : Number.POSITIVE_INFINITY,
+      minHeight: item.targetMain,
+      maxHeight: item.targetMain
+    }, measuredStyle, item.layoutToken ?? item.receiverToken, measurement, region, item.query, constrainedProvider, void 0, item.ordinaryColumnAutoCross);
+    if (result.status === "unsupported") {
+      throw childDiagnostic(
+        item.child,
+        "width",
+        "auto",
+        container,
+        `final-height measurement is required but unsupported: ${result.reason}`
+      );
+    }
+    item.preferredCross = clamp(result.size.width, item.minCross, item.maxCross) + item.paddingCross;
+  }
+  if (options[FLEX_BASELINE_GROUP]) {
+    assertSupportedBaselineFlex(options, items, container, region !== void 0);
+    for (const item of items) {
+      if (item.alignSelf !== "auto" || item.autoCrossBefore || item.autoCrossAfter) {
+        item.firstBaseline = 0;
+        continue;
+      }
+      const structural = prepareKnownStructuralBaseline(item, container, measurement, parentSlot, options[FLEX_LAST_BASELINE]);
+      if (structural !== void 0) {
+        item.structuralBaselineSlot = structural.slot;
+        item.firstBaseline = item.paddingCrossBefore + structural.offset;
+        continue;
+      }
+      const allocation = { x: 0, y: 0, width: item.targetMain, height: Math.max(0, item.preferredCross - item.paddingCross) };
+      const baselineRoot = item.baselineRoot ?? item.child;
+      const definition = getPrimitiveDefinition(baselineRoot.type);
+      if (!definition?.measureBaselines) {
+        item.firstBaseline = item.paddingCrossBefore + allocation.height;
+        continue;
+      }
+      const measurementChild = clonePibblElement(baselineRoot);
+      const measuredStyle = { ...item.normalized, width: allocation.width, height: allocation.height };
+      setPreNormalizedStyle(measurementChild, measuredStyle, baselineRoot, getPrimitiveReceiverToken(baselineRoot) ?? item.receiverToken, item.query);
+      if (item.query) setPreparedBaselineOwner(measurementChild, container);
+      const cacheOptions = region && !item.query && (baselineRoot.type !== Text || genericTextFont(item.normalized)) ? {
+        cache: region,
+        token: item.layoutToken ?? item.receiverToken,
+        key: `${allocationStructuralRevision()}:${allocation.width}:${allocation.height}:${JSON.stringify(measurementStyle(item.normalized))}`,
+        recordMeasurement: recordWasmMeasurement
+      } : void 0;
+      if (cacheOptions && item.baselineRoot) cacheOptions.source = item.child;
+      const result = measureBaselineElement(measurementChild, allocation, measurement.service, cacheOptions);
+      if (result.status === "unsupported") {
+        throw childDiagnostic(item.child, "measureBaselines", "unsupported", container, `first-baseline alignment requires a baseline result: ${result.reason}`);
+      }
+      item.firstBaseline = item.paddingCrossBefore + (options[FLEX_LAST_BASELINE] ? result.last : result.first);
+    }
+  }
+  if (region) {
+    for (const line of lines) {
+      line.crossSize = crossSize;
+      line.crossOffset = 0;
+    }
+  } else {
+    resolveLineCrossSizes(lines, crossSize, crossGap, options.alignContent, options.flexWrap === "wrap");
+  }
+  const crossPlacements = region?.placeCross(items, crossSize, options.alignItems, {
+    reverse: wrapReverse,
+    wrap: wrappedRegion ? { gap: crossGap, alignContent: options.alignContent } : void 0,
+    baseline: options[FLEX_BASELINE_GROUP],
+    lastBaseline: options[FLEX_LAST_BASELINE]
+  });
+  const mainPlacements = region?.placeMain(mainSize, mainGap, options.justifyContent, reverse, hasAutoMainMargins ? items : void 0, stagedIntrinsic?.autoMarginFreeMain);
+  let mainIndex = 0;
+  let crossIndex = 0;
   for (const line of lines) {
-    const occupied = line.items.reduce(
+    const occupied = mainPlacements ? 0 : line.items.reduce(
       (total, item) => total + item.targetMain + item.paddingMain,
       Math.max(0, line.items.length - 1) * mainGap
     );
-    const distribution = distributeAlignment(
+    const distribution = mainPlacements ? { start: 0, between: 0 } : distributeAlignment(
       options.justifyContent,
       mainSize - occupied,
       line.items.length
     );
     let mainCursor = distribution.start;
     for (const item of line.items) {
-      const alignment = effectiveAlignment(item.alignSelf, options.alignItems);
-      let outerCross = item.preferredCross;
-      if (alignment === "stretch" && item.crossAuto) {
-        outerCross = clamp(
-          Math.max(0, line.crossSize - item.paddingCross),
-          item.minCross,
-          item.maxCross
-        ) + item.paddingCross;
-      }
-      const crossOffset = alignmentOffset(
-        alignment,
-        line.crossSize,
-        outerCross
-      );
+      if (mainPlacements) mainCursor = mainPlacements[mainIndex++];
+      let outerCross;
+      let crossOffset;
+      if (crossPlacements) {
+        const placement = crossPlacements[crossIndex++];
+        outerCross = placement.outerCross;
+        crossOffset = placement.offset;
+      } else {
+        const alignment = effectiveAlignment(item.alignSelf, options.alignItems);
+        outerCross = item.preferredCross;
+        if (alignment === "stretch" && item.crossAuto) {
+          outerCross = clamp(Math.max(0, line.crossSize - item.paddingCross), item.minCross, item.maxCross) + item.paddingCross;
+        }
+        crossOffset = alignmentOffset(alignment, line.crossSize, outerCross);
+      }
       const outerMain = item.targetMain + item.paddingMain;
-      const box = row ? {
-        x: container.x + mainCursor,
-        y: container.y + line.crossOffset + crossOffset,
-        width: outerMain,
-        height: outerCross
-      } : {
-        x: container.x + line.crossOffset + crossOffset,
-        y: container.y + mainCursor,
-        width: outerCross,
-        height: outerMain
+      const x = row ? container.x + mainCursor + item.relativeX : container.x + line.crossOffset + crossOffset + item.relativeX;
+      const layoutY = row ? container.y + line.crossOffset + crossOffset : container.y + mainCursor;
+      const y = layoutY + item.relativeY;
+      const box = {
+        x: finiteRelativePlacement(x, "left", item.child, container),
+        y: finiteRelativePlacement(y, "top", item.child, container),
+        width: row ? outerMain : outerCross,
+        height: row ? outerCross : outerMain
       };
       const usedStyle = {
         ...item.normalized,
         width: row ? item.targetMain : Math.max(0, outerCross - item.paddingCross),
         height: row ? Math.max(0, outerCross - item.paddingCross) : item.targetMain
       };
-      placements.push({
+      const element = childWithUsedSize(
+        item.child,
+        usedStyle,
+        usedStyle.width,
+        usedStyle.height,
+        item.receiverToken,
+        item.query
+      );
+      attachPreparedLayoutSlot(element, item.structuralBaselineSlot);
+      placementsBySource[item.sourceIndex] = {
+        usedWidth: usedStyle.width,
+        usedHeight: usedStyle.height,
+        layoutY: finiteRelativePlacement(layoutY, "top", item.child, container),
         box,
-        element: childWithUsedSize(
-          item.child,
-          usedStyle,
-          usedStyle.width,
-          usedStyle.height,
-          item.receiverToken,
-          item.query
-        )
-      });
+        element
+      };
       mainCursor += outerMain + mainGap + distribution.between;
     }
   }
-  return placements;
+  for (let sourceIndex = 0; sourceIndex < placementsBySource.length; sourceIndex++) {
+    if (!placementsBySource[sourceIndex]) throw new Error("Flex placement did not resolve one direct child.");
+  }
+  region?.pruneAbsoluteMeasurements(absoluteMeasurementTokens);
+  return placementsBySource;
+}
+function resolveFlexContainingBox(style, content) {
+  const resolved = style;
+  const inherited = resolved[FLEX_INHERITED_CONTAINING_BOX];
+  if (inherited) return inherited;
+  const specified = resolved[FLEX_ABSOLUTE_BOX_STYLE] ?? style;
+  if (specified.position === "static") {
+    return getLogicalContainingBox();
+  }
+  return resolveFlexAbsolutePaddingBox(specified, content);
+}
+function resolveFlexAbsolutePaddingBox(style, content) {
+  const paddingOnly = normalizeBoxInsets({
+    ...style,
+    borderWidth: void 0,
+    borderStartWidth: void 0,
+    borderEndWidth: void 0
+  }, {
+    component: "Flex",
+    algorithm: "flex absolute",
+    constraints: constraintsFor(content)
+  });
+  return Object.freeze({
+    x: content.x - paddingOnly.left,
+    y: content.y - paddingOnly.top,
+    width: content.width + paddingOnly.left + paddingOnly.right,
+    height: content.height + paddingOnly.top + paddingOnly.bottom
+  });
+}
+function resolveAbsoluteFlexPlacement(paddingBox, child, style, receiverToken, query, content, options, measurement, region, measurementToken) {
+  const left = resolveFlexInset(absoluteLeftInset(style, options.layoutDirection), "left", child, paddingBox);
+  const right = resolveFlexInset(absoluteRightInset(style, options.layoutDirection), "right", child, paddingBox);
+  const top = resolveFlexInset(style.top, "top", child, paddingBox);
+  const bottom = resolveFlexInset(style.bottom, "bottom", child, paddingBox);
+  const specifiedWidth = resolveAbsoluteSize(style.width, "width", paddingBox.width, child, paddingBox);
+  const specifiedHeight = resolveAbsoluteSize(style.height, "height", paddingBox.height, child, paddingBox);
+  const specifiedMinWidth = resolveAbsoluteSize(style.minWidth, "minWidth", paddingBox.width, child, paddingBox);
+  const specifiedMaxWidth = resolveAbsoluteSize(style.maxWidth, "maxWidth", paddingBox.width, child, paddingBox);
+  const specifiedMinHeight = resolveAbsoluteSize(style.minHeight, "minHeight", paddingBox.height, child, paddingBox);
+  const specifiedMaxHeight = resolveAbsoluteSize(style.maxHeight, "maxHeight", paddingBox.height, child, paddingBox);
+  const sizingStyle = specifiedWidth === style.width && specifiedHeight === style.height && specifiedMinWidth === style.minWidth && specifiedMaxWidth === style.maxWidth && specifiedMinHeight === style.minHeight && specifiedMaxHeight === style.maxHeight ? style : {
+    ...style,
+    width: specifiedWidth,
+    height: specifiedHeight,
+    minWidth: specifiedMinWidth,
+    maxWidth: specifiedMaxWidth,
+    minHeight: specifiedMinHeight,
+    maxHeight: specifiedMaxHeight
+  };
+  const automaticWidth = specifiedWidth === void 0 || specifiedWidth === "auto";
+  const automaticHeight = specifiedHeight === void 0 || specifiedHeight === "auto";
+  let measuredWidth;
+  let measuredHeight;
+  if (measurement) {
+    const measurementAxis = automaticWidth && automaticHeight ? "both" : automaticWidth ? "width" : "height";
+    const measuredChild = clonePibblElement(child);
+    const measuredStyle = child.type === Text ? measurementAxis === "both" ? { ...sizingStyle, width: void 0, height: void 0 } : measurementAxis === "width" ? { ...sizingStyle, width: void 0 } : { ...sizingStyle, height: void 0 } : sizingStyle;
+    setPreNormalizedStyle(measuredChild, measuredStyle, child, receiverToken, query);
+    const fixedAxis = measurementAxis === "both" ? 0 : measurementAxis === "width" ? specifiedHeight : specifiedWidth;
+    const result = measureConstrainedIntrinsicElement(measuredChild, measurementAxis === "both" ? {
+      minWidth: 0,
+      maxWidth: Number.POSITIVE_INFINITY,
+      minHeight: 0,
+      maxHeight: Number.POSITIVE_INFINITY
+    } : measurementAxis === "width" ? {
+      minWidth: 0,
+      maxWidth: Number.POSITIVE_INFINITY,
+      minHeight: fixedAxis,
+      maxHeight: fixedAxis
+    } : {
+      minWidth: fixedAxis,
+      maxWidth: fixedAxis,
+      minHeight: 0,
+      maxHeight: Number.POSITIVE_INFINITY
+    }, measurement.service, region && measurementToken ? {
+      cache: region,
+      token: measurementToken,
+      key: measurementAxis === "both" ? `absolute-size:both:${allocationStructuralRevision()}` : `absolute-size:${measurementAxis}:${allocationStructuralRevision()}:${fixedAxis}`,
+      recordMeasurement: recordWasmMeasurement
+    } : void 0);
+    if (result.status !== "measured") {
+      throw childDiagnostic(child, measurementAxis, "auto", paddingBox, `absolute natural ${measurementAxis} requires supported pure measurement: ${result.reason}`);
+    }
+    if (measurementAxis !== "height") measuredWidth = result.size.width;
+    if (measurementAxis !== "width") measuredHeight = result.size.height;
+  }
+  const settledStyle = automaticWidth || automaticHeight ? {
+    ...sizingStyle,
+    width: automaticWidth ? measuredWidth ?? resolveAbsoluteAutoSize(left, right, paddingBox.width, "width", child, paddingBox, sizingStyle.aspectRatio === void 0 ? void 0 : specifiedHeight * sizingStyle.aspectRatio) : specifiedWidth,
+    height: automaticHeight ? measuredHeight ?? resolveAbsoluteAutoSize(top, bottom, paddingBox.height, "height", child, paddingBox, sizingStyle.aspectRatio === void 0 ? void 0 : specifiedWidth / sizingStyle.aspectRatio) : specifiedHeight
+  } : sizingStyle;
+  if (automaticWidth || automaticHeight) markDerivedAbsoluteAxes(settledStyle, automaticWidth, automaticHeight);
+  const resolved = resolveDirectChildBox(paddingBox, child, "absolute", settledStyle, void 0, receiverToken);
+  const width = resolved.borderBox.width;
+  const height = resolved.borderBox.height;
+  const row = isRowDirection(options.flexDirection);
+  const mainReversed = (options.flexDirection === "row-reverse" || options.flexDirection === "column-reverse") !== (row && options.layoutDirection === "rtl");
+  const crossReversed = options.flexWrap === "wrap-reverse" !== (!row && options.layoutDirection === "rtl");
+  const x = left !== void 0 || right !== void 0 ? options.layoutDirection === "rtl" ? right === void 0 ? paddingBox.x + left : paddingBox.x + paddingBox.width - right - width : left === void 0 ? paddingBox.x + paddingBox.width - right - width : paddingBox.x + left : row ? resolveAbsoluteMainAlignment(content, width, options.justifyContent, mainReversed, true) : resolveAbsoluteCrossAlignment(content, width, options.alignItems, crossReversed, false);
+  const y = top !== void 0 || bottom !== void 0 ? top === void 0 ? paddingBox.y + paddingBox.height - bottom - height : paddingBox.y + top : row ? resolveAbsoluteCrossAlignment(content, height, options.alignItems, crossReversed, true) : resolveAbsoluteMainAlignment(content, height, options.justifyContent, mainReversed, false);
+  const usedWidth = resolved.contentBox.width;
+  const usedHeight = resolved.contentBox.height;
+  return {
+    box: { x: finiteRelativePlacement(x, "left", child, paddingBox), y: finiteRelativePlacement(y, "top", child, paddingBox), width, height },
+    usedWidth,
+    usedHeight,
+    layoutY: finiteRelativePlacement(y, "top", child, paddingBox),
+    element: childWithUsedSize(child, settledStyle, usedWidth, usedHeight, receiverToken, query)
+  };
+}
+function resolveAbsoluteAutoSize(start, end, available, property, child, container, aspectSize) {
+  if ((start === void 0 || end === void 0) && aspectSize === void 0) {
+    throw childDiagnostic(child, property, "auto", container, "PIBBL_LAYOUT_UNSUPPORTED_POSITION: automatic absolute size requires opposing physical insets or one definite aspect-ratio axis");
+  }
+  const size = start !== void 0 && end !== void 0 ? available - start - end : aspectSize;
+  if (!Number.isFinite(size)) {
+    throw childDiagnostic(child, property, size, container, "derived absolute size must remain finite");
+  }
+  return Math.max(0, size);
+}
+function resolveAbsoluteMainAlignment(content, size, justifyContent, reversed, horizontal) {
+  let alignment = justifyContent === "flex-end" ? "flex-end" : justifyContent === "flex-start" || justifyContent === "space-between" ? "flex-start" : "center";
+  if (reversed) {
+    if (alignment === "flex-start") alignment = "flex-end";
+    else if (alignment === "flex-end") alignment = "flex-start";
+  }
+  return horizontal ? content.x + alignmentOffset(alignment, content.width, size) : content.y + alignmentOffset(alignment, content.height, size);
+}
+function resolveAbsoluteCrossAlignment(content, size, alignItems, reversed, vertical) {
+  let alignment = alignItems === "stretch" ? "flex-start" : alignItems;
+  if (reversed) {
+    if (alignment === "flex-start") alignment = "flex-end";
+    else if (alignment === "flex-end") alignment = "flex-start";
+  }
+  return vertical ? content.y + alignmentOffset(alignment, content.height, size) : content.x + alignmentOffset(alignment, content.width, size);
+}
+function genericTextFont(style) {
+  return isGenericCanvasFont(String(style.font ?? "13px sans-serif"));
+}
+function measurementStyle(style) {
+  const { fill: _fill, stroke: _stroke, opacity: _opacity, cursor: _cursor, filter: _filter, ...metrics } = style;
+  const owned = metrics;
+  if (owned.flexDirection === "row-reverse") owned.flexDirection = "row";
+  else if (owned.flexDirection === "column-reverse") owned.flexDirection = "column";
+  return owned;
+}
+function intrinsicTextSnapshot(child, style, constraints) {
+  if (child.type !== Flex || !isColumnDirection(style.flexDirection) || (style.flexWrap ?? "nowrap") !== "nowrap" || typeof style.width !== "number" || style.height !== void 0 && style.height !== "auto") return;
+  return withSignalWriteForbidden("Signal writes are forbidden during Pibbl measurement", () => withIsolatedRenderState(() => {
+    const previous = GLOBAL_STATE.primitiveReceiverToken;
+    const visiting = /* @__PURE__ */ new Set();
+    function visit(column, columnStyle, parent, width) {
+      if (visiting.has(column)) return;
+      visiting.add(column);
+      GLOBAL_STATE.primitiveReceiverToken = parent;
+      try {
+        const snapshot = [];
+        for (const [index, leaf] of prepareLayoutChildren(column.props.children, "Flex").entries()) {
+          const receiver = getChildPrimitiveReceiverToken(GLOBAL_STATE.renderTransaction, parent, index);
+          const prepared = prepareDirectChildStyle(leaf, receiver, { x: 0, y: 0, width, height: constraints.maxHeight });
+          const leafStyle = preparedStyleValue(prepared);
+          if (preparedStyleQuery(prepared) || hasPercentageBounds(leafStyle) || isPercentage(leafStyle.width) || isPercentage(leafStyle.height)) return;
+          let content;
+          if (leaf.type === Text) {
+            if (!genericTextFont(leafStyle)) return;
+            content = prepareLayoutTextContent(leaf.props, { receiverToken: receiver });
+          } else if (leaf.type === Flex && isColumnDirection(leafStyle.flexDirection) && (leafStyle.flexWrap ?? "nowrap") === "nowrap" && (leafStyle.height === void 0 || leafStyle.height === "auto")) {
+            const padding = normalizeBoxInsets(leafStyle, childContext(leaf, { x: 0, y: 0, width, height: constraints.maxHeight }));
+            const available = typeof leafStyle.width === "number" ? leafStyle.width : Math.max(0, width - padding.left - padding.right);
+            const usedWidth = clamp(available, typeof leafStyle.minWidth === "number" ? leafStyle.minWidth : 0, typeof leafStyle.maxWidth === "number" ? leafStyle.maxWidth : Infinity);
+            content = visit(leaf, leafStyle, receiver, usedWidth);
+            if (content === void 0) return;
+          } else {
+            if (typeof leafStyle.width !== "number" || typeof leafStyle.height !== "number" || !Number.isFinite(leafStyle.width) || !Number.isFinite(leafStyle.height)) return;
+            content = null;
+          }
+          snapshot.push([leaf.key, content, measurementStyle(leafStyle)]);
+          GLOBAL_STATE.primitiveReceiverToken = parent;
+        }
+        return [measurementStyle(columnStyle), snapshot];
+      } finally {
+        visiting.delete(column);
+        GLOBAL_STATE.primitiveReceiverToken = parent;
+      }
+    }
+    try {
+      return visit(child, style, getPrimitiveReceiverToken(child), style.width);
+    } finally {
+      GLOBAL_STATE.primitiveReceiverToken = previous;
+    }
+  }));
+}
+function preparedRowMeasurement(child, style) {
+  try {
+    return withSignalWriteForbidden(
+      "Signal writes are forbidden during Pibbl measurement",
+      () => withStyleMeasurement("recursive", () => withIsolatedRenderState(() => {
+        const previous = GLOBAL_STATE.primitiveReceiverToken;
+        try {
+          const root = prepareLayoutComponent(child);
+          if (root.type !== Flex) return;
+          const rootReceiver = getPrimitiveReceiverToken(root);
+          if (!rootReceiver) return;
+          GLOBAL_STATE.primitiveReceiverToken = rootReceiver;
+          const rootStyle = style;
+          if ((rootStyle.flexDirection ?? "row") !== "row" || (rootStyle.flexWrap ?? "nowrap") !== "nowrap" || (rootStyle.layoutDirection ?? getLayoutDirection()) !== "ltr" || typeof rootStyle.width !== "number" || !Number.isFinite(rootStyle.width) || rootStyle.width < 0 || rootStyle.height !== void 0 && rootStyle.height !== "auto") return;
+          const snapshot = ["prepared-row", root.type, root.key];
+          if (!appendPreparedProgramSnapshot(snapshot, getPrimitiveProgramProps(child))) return;
+          if (!appendPreparedProgramSnapshot(snapshot, getPrimitiveProgramProps(root), true)) return;
+          if (!appendPreparedStyleSnapshot(snapshot, rootStyle)) return;
+          const children = prepareLayoutChildren(root.props.children, "Flex");
+          snapshot.push(children.length);
+          const receivers = [];
+          for (let index = 0; index < children.length; index++) {
+            const leaf = children[index];
+            const directReceiver = getChildPrimitiveReceiverToken(GLOBAL_STATE.renderTransaction, rootReceiver, index);
+            const directPrepared = prepareDirectChildStyle(leaf, directReceiver, void 0, true);
+            if (preparedStyleQuery(directPrepared)) return;
+            const directStyle = preparedStyleValue(directPrepared);
+            let measuredLeaf = leaf;
+            let receiver = directReceiver;
+            let wrapped = false;
+            if (isLayoutComponent(leaf.type)) {
+              measuredLeaf = prepareLayoutComponent(leaf, { receiverToken: directReceiver });
+              if (isLayoutComponent(measuredLeaf.type)) return;
+              const preparedReceiver = getPrimitiveReceiverToken(measuredLeaf);
+              if (!preparedReceiver) return;
+              receiver = preparedReceiver;
+              wrapped = true;
+            }
+            const paired = getPrimitiveDefinition(measuredLeaf.type);
+            const emptyRectangle = !wrapped && measuredLeaf.type === Rectangle && !Object.hasOwn(measuredLeaf.props, "children");
+            if (!emptyRectangle && !(paired?.measureIntrinsic && paired.measure)) return;
+            if (!appendPreparedProgramSnapshot(snapshot, getPrimitiveProgramProps(leaf)) || !appendPreparedStyleSnapshot(snapshot, directStyle) || wrapped && !appendPreparedProgramSnapshot(snapshot, getPrimitiveProgramProps(measuredLeaf))) return;
+            snapshot.push(index, leaf.type, leaf.key, wrapped, measuredLeaf.type, measuredLeaf.key);
+            receivers.push(receiver);
+          }
+          return { snapshot, receivers };
+        } finally {
+          GLOBAL_STATE.primitiveReceiverToken = previous;
+        }
+      }))
+    );
+  } catch (error) {
+    if (error instanceof UnsupportedResponsiveMeasurement) return void 0;
+    throw error;
+  }
+}
+function appendPreparedProgramSnapshot(snapshot, props, omitChildren = false) {
+  const keys = Reflect.ownKeys(props);
+  let count = 0;
+  for (let index = 0; index < keys.length; index++) if (!omitChildren || keys[index] !== "children") count++;
+  snapshot.push(count);
+  for (let index = 0; index < keys.length; index++) {
+    const key = keys[index];
+    if (omitChildren && key === "children") continue;
+    const value = props[key];
+    if (typeof value === "function" || value !== null && typeof value === "object" && !isSignal(value)) return false;
+    snapshot.push(key, value);
+  }
+  return true;
+}
+function appendPreparedStyleSnapshot(snapshot, style) {
+  const keys = Reflect.ownKeys(style);
+  snapshot.push(keys.length);
+  for (let index = 0; index < keys.length; index++) {
+    const key = keys[index];
+    const value = style[key];
+    if (typeof value === "function" || value !== null && typeof value === "object") return false;
+    snapshot.push(key, value);
+  }
+  return true;
+}
+function currentFlexMeasurementInput() {
+  const context = GLOBAL_STATE.renderContext;
+  if (!context) throw new Error("A mounted Flex query requires its current Canvas context.");
+  const service = canvasMeasurementService(context);
+  return { service, measureElement: (element, constraints) => measureElement(element, constraints, service) };
+}
+function bindFlexMeasurementInput(input) {
+  return isCurrentCanvasMeasurementService(input.service) ? currentFlexMeasurementInput : () => input;
+}
+function measureTextIntrinsicWidths(child, style, receiver, measurement, region) {
+  const resolveMeasurement = bindFlexMeasurementInput(measurement);
+  const element = clonePibblElement(child);
+  setPreNormalizedStyle(element, style, child, receiver);
+  return allocationMeasurement(element, (current) => {
+    const measurement2 = resolveMeasurement();
+    const normalized = peekPreNormalizedStyle(current).style;
+    const receiverToken = getPrimitiveReceiverToken(current);
+    const font = normalized.font ?? "13px sans-serif";
+    const content = prepareLayoutTextContent(current.props, { receiverToken });
+    if (region) recordWasmMeasurement();
+    const maximum = normalized.wrap === true ? measureLayoutTextNaturalRun(content, { font, service: measurement2.service }) : measurement2.service.measureText(content, font).width;
+    const minimum = normalized.wrap === true ? measureLayoutTextMinimumWidth(current.props, { font, service: measurement2.service, receiverToken }) : maximum;
+    return { minimum, maximum };
+  });
+}
+function measureTextContentMinimum(child, style, receiver, measurement, region) {
+  const resolveMeasurement = bindFlexMeasurementInput(measurement);
+  const element = clonePibblElement(child);
+  setPreNormalizedStyle(element, style, child, receiver);
+  return allocationMeasurement(element, (current) => {
+    const measurement2 = resolveMeasurement();
+    const normalized = peekPreNormalizedStyle(current).style;
+    const receiverToken = getPrimitiveReceiverToken(current);
+    const font = normalized.font ?? "13px sans-serif";
+    if (region) recordWasmMeasurement();
+    return normalized.wrap === true ? measureLayoutTextMinimumWidth(current.props, { font, service: measurement2.service, receiverToken }) : measurement2.service.measureText(prepareLayoutTextContent(current.props, { receiverToken }), font).width;
+  });
+}
+function measureTextNaturalWidth(child, style, receiver, token, measurement, region) {
+  const resolveMeasurement = bindFlexMeasurementInput(measurement);
+  const element = clonePibblElement(child);
+  setPreNormalizedStyle(element, style, child, receiver);
+  return allocationMeasurement(element, (current) => {
+    const measurement2 = resolveMeasurement();
+    const normalized = peekPreNormalizedStyle(current).style;
+    const receiverToken = getPrimitiveReceiverToken(current);
+    const font = normalized.font ?? "13px sans-serif";
+    const content = prepareLayoutTextContent(current.props, { receiverToken });
+    let width = genericTextFont(normalized) ? region?.readTextMaximum(token, content, font) : void 0;
+    if (width === void 0) {
+      if (region) recordWasmMeasurement();
+      width = normalized.wrap === true ? measureLayoutTextNaturalRun(content, { font, service: measurement2.service }) : measurement2.service.measureText(content, font).width;
+      if (genericTextFont(normalized)) region?.writeTextMaximum(token, content, font, width);
+    }
+    return width;
+  });
+}
+function prepareLayoutTextContent(props, options) {
+  declineUnrecordedAllocationMeasurement();
+  return readLayoutTextContent(props, options);
+}
+function measureFlexChild(child, constraints, style, token, measurement, region, query, constrainedProvider = false, parentMainAxis, ordinaryProvider = false) {
+  const resolveMeasurement = bindFlexMeasurementInput(measurement);
+  return allocationMeasurement(child, (current) => measureFlexChildUncached(
+    current,
+    constraints,
+    peekPreNormalizedStyle(current)?.style ?? style,
+    token,
+    resolveMeasurement(),
+    region,
+    query,
+    constrainedProvider,
+    parentMainAxis,
+    ordinaryProvider
+  ));
+}
+function measureFlexChildUncached(child, constraints, style, token, measurement, region, query, constrainedProvider = false, parentMainAxis, ordinaryProvider = false) {
+  const measuredRoot = !query && isLayoutComponent(child.type) && (constrainedProvider || ordinaryProvider || parentMainAxis !== void 0) ? prepareLayoutComponent(child) : child;
+  const rootAxis = style.flexDirection === "column" || style.flexDirection === "column-reverse" ? "column" : "row";
+  const contributionReceiver = parentMainAxis !== void 0 && measuredRoot.type === Flex && rootAxis === parentMainAxis ? getPrimitiveReceiverToken(measuredRoot) : void 0;
+  if (contributionReceiver) {
+    const previousContribution = requestedIntrinsicContribution;
+    requestedIntrinsicContribution = { receiver: contributionReceiver, axis: parentMainAxis, normalOwner: true };
+    try {
+      if (region) recordWasmMeasurement();
+      return measurement.measureElement(child, constraints);
+    } finally {
+      requestedIntrinsicContribution = previousContribution;
+    }
+  }
+  if (region && !query && isLayoutComponent(child.type)) {
+    const prepared = preparedRowMeasurement(child, style);
+    if (prepared) {
+      return measurePreparedLayoutElement(child, constraints, measurement.service, {
+        cache: region,
+        token,
+        key: JSON.stringify(["prepared-row", allocationStructuralRevision(), measurementStyle(style), constraints]),
+        recordMeasurement: recordWasmMeasurement
+      }, prepared.snapshot, prepared.receivers);
+    }
+  }
+  const definition = (constrainedProvider || ordinaryProvider) && !query ? getPrimitiveDefinition(measuredRoot.type) : void 0;
+  if (measuredRoot.type !== Text && !isKnownLayoutType(measuredRoot.type) && definition?.measure && (definition.measureIntrinsic || ordinaryProvider)) return measureConstrainedIntrinsicElement(child, constraints, measurement.service, region ? { cache: region, token, key: JSON.stringify([allocationStructuralRevision(), measurementStyle(style), constraints]), recordMeasurement: recordWasmMeasurement } : void 0);
+  const content = region && child.type === Text ? prepareLayoutTextContent(
+    child.props,
+    { receiverToken: getPrimitiveReceiverToken(child) }
+  ) : void 0;
+  const intrinsic = region && !query ? intrinsicTextSnapshot(child, style, constraints) : void 0;
+  const cacheable = !query && (content !== void 0 && genericTextFont(style) || intrinsic !== void 0);
+  const key = cacheable ? JSON.stringify([content, intrinsic, measurementStyle(style), constraints]) : void 0;
+  const cached = key ? region.readMeasurement(token, key) : void 0;
+  if (cached) return { status: "measured", size: cached };
+  if (region) recordWasmMeasurement();
+  const result = measurement.measureElement(child, constraints);
+  if (key && result.status === "measured") region.writeMeasurement(token, key, result.size);
+  return result;
 }
 function collectLines(items, mainSize, gap, wrap) {
   const lines = [];
@@ -519,16 +2120,12 @@ function collectLines(items, mainSize, gap, wrap) {
 }
 function resolveFlexibleLengths(line, mainSize, gap) {
   const gapSpace = Math.max(0, line.items.length - 1) * gap;
-  const baseOuter = line.items.reduce(
-    (total, item) => total + item.baseMain + item.paddingMain,
-    0
-  );
   const hypotheticalOuter = line.items.reduce(
     (total, item) => total + clamp(item.baseMain, item.minMain, item.maxMain) + item.paddingMain,
     0
   );
   const growing = hypotheticalOuter + gapSpace < mainSize;
-  const initialFree = mainSize - gapSpace - baseOuter;
+  let initialOuter = gapSpace;
   const frozen = /* @__PURE__ */ new Set();
   for (const item of line.items) {
     item.targetMain = item.baseMain;
@@ -537,7 +2134,10 @@ function resolveFlexibleLengths(line, mainSize, gap) {
       item.targetMain = hypothetical;
       frozen.add(item);
     }
+    initialOuter += item.targetMain + item.paddingMain;
   }
+  const initialFree = mainSize - initialOuter;
+  if (!Number.isFinite(initialFree)) throw new Error("Flex numeric overflow during allocation");
   while (frozen.size < line.items.length) {
     const fixed = line.items.reduce(
       (total, item) => total + (frozen.has(item) ? item.targetMain : item.baseMain) + item.paddingMain,
@@ -546,7 +2146,10 @@ function resolveFlexibleLengths(line, mainSize, gap) {
     let free = mainSize - fixed;
     const unfrozen = line.items.filter((item) => !frozen.has(item));
     const rawFactor = growing ? unfrozen.reduce((total, item) => total + item.grow, 0) : unfrozen.reduce((total, item) => total + item.shrink, 0);
-    const scaledFactor = growing ? rawFactor : unfrozen.reduce((total, item) => total + item.shrink * item.baseMain, 0);
+    const maxFactor = unfrozen.reduce((max, item) => Math.max(max, growing ? item.grow : item.shrink), 0);
+    const maxBasis = growing ? 1 : unfrozen.reduce((max, item) => Math.max(max, item.baseMain), 0);
+    const weight = (item) => maxFactor === 0 || maxBasis === 0 ? 0 : (growing ? item.grow : item.shrink) / maxFactor * (growing ? 1 : item.baseMain / maxBasis);
+    const scaledFactor = unfrozen.reduce((total, item) => total + weight(item), 0);
     if (scaledFactor === 0) {
       for (const item of unfrozen) {
         item.targetMain = clamp(item.baseMain, item.minMain, item.maxMain);
@@ -560,8 +2163,9 @@ function resolveFlexibleLengths(line, mainSize, gap) {
     }
     const violations = [];
     for (const item of unfrozen) {
-      const share = growing ? item.grow / scaledFactor : item.shrink * item.baseMain / scaledFactor;
+      const share = weight(item) / scaledFactor;
       const candidate = item.baseMain + free * share;
+      if (!Number.isFinite(candidate)) throw new Error("Flex numeric overflow during allocation");
       const clamped = clamp(candidate, item.minMain, item.maxMain);
       item.targetMain = clamped;
       if (clamped !== candidate) {
@@ -612,7 +2216,7 @@ function distributeAlignment(alignment, free, count) {
   }
   if (free < 0) {
     if (alignment === "flex-end") return { start: free, between: 0 };
-    if (alignment === "center" || alignment === "space-around" || alignment === "space-evenly") {
+    if (alignment === "center") {
       return { start: free / 2, between: 0 };
     }
     return { start: 0, between: 0 };
@@ -632,47 +2236,249 @@ function distributeAlignment(alignment, free, count) {
   }
   return { start: 0, between: 0 };
 }
+function prepareKnownStructuralBaseline(item, container, measurement, parentSlot, lastSource = false) {
+  const root = item.baselineRoot ?? item.child;
+  if (root.type !== Flex && root.type !== Flow && root.type !== Grid) return;
+  const resolveMeasurement = bindFlexMeasurementInput(measurement);
+  const { targetMain, preferredCross, paddingCross, layoutOccurrence } = item;
+  const child = clonePibblElement(item.child);
+  setPreNormalizedStyle(child, item.normalized, item.child, item.receiverToken, item.query);
+  const offset = allocationMeasurement(child, (current) => {
+    const normalized = peekPreNormalizedStyle(current).style;
+    const receiverToken = getPrimitiveReceiverToken(current);
+    if (!receiverToken) throw new Error("A structural baseline query requires its current receiver.");
+    const baselineRoot = isLayoutComponent(current.type) ? prepareLayoutComponent(current, { receiverToken }) : current;
+    return prepareKnownStructuralBaselineUncached({
+      child: current,
+      normalized,
+      receiverToken,
+      baselineRoot,
+      targetMain,
+      preferredCross,
+      paddingCross,
+      layoutOccurrence
+    }, container, resolveMeasurement(), parentSlot, lastSource).offset;
+  });
+  const slot = currentPreparedReceiverSlot(item.receiverToken);
+  if (!slot) throw new Error("A structural baseline demand must stage its current receiver allocation.");
+  return { slot, offset };
+}
+function prepareKnownStructuralBaselineUncached(item, container, measurement, parentSlot, lastSource) {
+  const alignment = lastSource ? "last-baseline" : "first-baseline";
+  const root = item.baselineRoot ?? item.child;
+  const style = item.normalized;
+  const staticOwner = root.type === Flex && style.position === "static";
+  const content = { x: 0, y: 0, width: item.targetMain, height: Math.max(0, item.preferredCross - item.paddingCross) };
+  const direction = style.layoutDirection ?? getLayoutDirection();
+  const currentSlot = currentPreparedReceiverSlot(item.receiverToken);
+  const currentPlan = currentSlot && peekPreparedLayoutPlan(currentSlot, content, direction);
+  const slot = currentPlan ? currentSlot : preflightKnownLayout(
+    item.child,
+    item.normalized,
+    content,
+    item.receiverToken,
+    item.layoutOccurrence,
+    parentSlot,
+    "row",
+    staticOwner ? { deferStaticContainingDescendants: true } : void 0
+  );
+  if (!slot) throw childDiagnostic(
+    item.child,
+    "alignItems",
+    alignment,
+    container,
+    "PIBBL_LAYOUT_UNSUPPORTED_BASELINE: the selected known layout root did not prepare its allocation"
+  );
+  const plan = root.type === Flex ? peekPreparedFlexPlan(slot, content, direction) : peekPreparedLayoutPlan(slot, content, direction);
+  if (!plan) throw childDiagnostic(
+    item.child,
+    "alignItems",
+    alignment,
+    container,
+    "PIBBL_LAYOUT_UNSUPPORTED_BASELINE: the selected known layout root has no current settled allocation"
+  );
+  return { slot, offset: readPreparedKnownBaseline(
+    plan,
+    root.type === Flex ? "flex" : root.type === Flow ? "flow" : "grid",
+    measurement,
+    direction,
+    root.type === Flex && (style.flexWrap ?? "nowrap") !== "nowrap",
+    lastSource
+  ) };
+}
+function readPreparedKnownBaseline(plan, kind, measurement, direction, wrapped, lastSource) {
+  const alignment = lastSource ? "last-baseline" : "first-baseline";
+  const content = plan.content;
+  const flexPlan = kind === "flex" ? plan : void 0;
+  const lineCount = wrapped ? lastSource ? flexPlan.region.lastWrapLineCount() : flexPlan.region.firstWrapLineCount() : void 0;
+  const pending = flexPlan ? deferredStaticState(flexPlan) : void 0;
+  const step = lastSource ? -1 : 1;
+  for (let index = lastSource ? plan.children.length - 1 : 0; index >= 0 && index < plan.children.length; index += step) {
+    if (pending?.slots[index]) continue;
+    const source = plan.children[index];
+    const placement = plan.placements[index];
+    const prepared = peekPreNormalizedStyle(placement.element);
+    if (!prepared) throw new Error("Known Flex baseline selection requires settled child inputs.");
+    const selectedStyle = prepared.style;
+    if (selectedStyle.position === "absolute") continue;
+    if (lineCount === 0) throw new Error("Structural baseline source has no native endpoint-line membership.");
+    const receiver = getPrimitiveReceiverToken(placement.element);
+    const root = isLayoutComponent(source.type) ? prepareLayoutComponent(source, { receiverToken: receiver }) : placement.element;
+    const usedWidth = "usedWidth" in placement ? placement.usedWidth : void 0;
+    const usedHeight = "usedHeight" in placement ? placement.usedHeight : void 0;
+    if (typeof usedWidth !== "number" || !Number.isFinite(usedWidth) || usedWidth < 0 || typeof usedHeight !== "number" || !Number.isFinite(usedHeight) || usedHeight < 0) {
+      throw new Error("Prepared known baseline placement is missing settled content geometry.");
+    }
+    const allocation = { x: 0, y: 0, width: usedWidth, height: usedHeight };
+    const insets = normalizeBoxInsets(selectedStyle, childContext(source, content));
+    let offset = allocation.height;
+    if (root.type === Flex || root.type === Flow || root.type === Grid) {
+      const slot = getElementMetadata(placement.element)?.preparedLayoutSlot;
+      const childDirection = selectedStyle.layoutDirection ?? direction;
+      const nested = root.type === Flex ? slot && peekPreparedFlexPlan(slot, allocation, childDirection) : slot && peekPreparedLayoutPlan(slot, allocation, childDirection);
+      if (!nested) throw childDiagnostic(
+        source,
+        "alignItems",
+        alignment,
+        content,
+        "PIBBL_LAYOUT_UNSUPPORTED_BASELINE: selected known layout root requires its current prepared allocation"
+      );
+      offset = readPreparedKnownBaseline(
+        nested,
+        root.type === Flex ? "flex" : root.type === Flow ? "flow" : "grid",
+        measurement,
+        childDirection,
+        root.type === Flex && (selectedStyle.flexWrap ?? "nowrap") !== "nowrap",
+        lastSource
+      );
+    } else {
+      const definition = getPrimitiveDefinition(root.type);
+      if (!definition || isKnownLayoutType(root.type)) throw childDiagnostic(
+        source,
+        "alignItems",
+        alignment,
+        content,
+        "PIBBL_LAYOUT_UNSUPPORTED_BASELINE: selected structural source must resolve to a primitive or prepared known layout root"
+      );
+      if (definition.measureBaselines) {
+        const measurementChild = clonePibblElement(root);
+        setPreNormalizedStyle(measurementChild, selectedStyle, root, getPrimitiveReceiverToken(root) ?? receiver, prepared.query);
+        if (prepared.query) setPreparedBaselineOwner(measurementChild, content);
+        const result = measureBaselineElement(measurementChild, allocation, measurement.service);
+        if (result.status === "unsupported") throw childDiagnostic(
+          source,
+          "measureBaselines",
+          "unsupported",
+          content,
+          `${alignment} alignment requires a baseline result: ${result.reason}`
+        );
+        offset = lastSource ? result.last : result.first;
+      }
+    }
+    const layoutY = kind === "flex" ? placement.layoutY : placement.box.y;
+    if (!Number.isFinite(layoutY)) throw new Error("Prepared known baseline placement has no finite physical y origin.");
+    return layoutY + insets.top + offset;
+  }
+  if (lineCount !== void 0 && lineCount !== 0) throw new Error("Empty structural baseline source disagrees with native endpoint-line membership.");
+  return content.height;
+}
+function assertSupportedBaselineFlex(options, items, container, mounted) {
+  const alignment = options[FLEX_LAST_BASELINE] ? "last-baseline" : "first-baseline";
+  if (!mounted || !nativeLayout || !isRowDirection(options.flexDirection)) {
+    throw optionDiagnostic("alignItems", alignment, container, "requires mounted experimental horizontal Flex");
+  }
+  for (const item of items) {
+    const style = item.normalized;
+    const baselineRoot = isLayoutComponent(item.child.type) ? prepareLayoutComponent(item.child, { receiverToken: item.receiverToken }) : item.child;
+    if (baselineRoot !== item.child) item.baselineRoot = baselineRoot;
+    if (baselineRoot.type === Flex || baselineRoot.type === Flow || baselineRoot.type === Grid) {
+      if (item.crossAuto || !Number.isFinite(item.targetMain) || item.targetMain < 0 || !Number.isFinite(item.preferredCross) || item.preferredCross < item.paddingCross) {
+        throw childDiagnostic(
+          item.child,
+          "alignItems",
+          alignment,
+          container,
+          "PIBBL_LAYOUT_UNSUPPORTED_BASELINE: a structural baseline requires settled finite known-layout geometry"
+        );
+      }
+      continue;
+    }
+    const textLeaf = baselineRoot.type === Text;
+    const textStyle = style;
+    const fontSize = textLeaf ? /(?:^| )(\d+(?:\.\d+)?)px(?:\s*\/\s*(?:normal|\d+(?:\.\d+)?(?:px|%)?))?\s+\S/.exec(String(textStyle.font ?? "13px sans-serif")) : null;
+    const supportedTextLeaf = !textLeaf || fontSize !== null && Number.isFinite(Number(fontSize[1])) && Number(fontSize[1]) > 0 && typeof (textStyle.lineHeight ?? 13) === "number" && Number.isFinite(textStyle.lineHeight ?? 13) && (textStyle.lineHeight ?? 13) >= 0 && (textStyle.wrap === void 0 || typeof textStyle.wrap === "boolean");
+    const sharesBaseline = item.alignSelf === "auto" && !item.autoCrossBefore && !item.autoCrossAfter;
+    if (!getPrimitiveDefinition(baselineRoot.type) || isKnownLayoutType(baselineRoot.type) || isLayoutComponent(baselineRoot.type) || !supportedTextLeaf && sharesBaseline || style.position !== void 0 && style.position !== "static" && style.position !== "relative" || item.crossAuto && item.alignSelf !== "stretch" || !Number.isFinite(item.targetMain) || item.targetMain < 0 || !Number.isFinite(item.preferredCross) || item.preferredCross < item.paddingCross) {
+      throw childDiagnostic(item.child, "alignItems", alignment, container, "PIBBL_LAYOUT_UNSUPPORTED_BASELINE: requires primitive roots with settled finite content boxes and no absolute position");
+    }
+  }
+}
+function isRowDirection(direction) {
+  return direction === void 0 || direction === "row" || direction === "row-reverse";
+}
+function isColumnDirection(direction) {
+  return direction === "column" || direction === "column-reverse";
+}
 function normalizeFlexOptions(style, container) {
-  const flexDirection = supported(style.flexDirection ?? "row", ["row", "column"], "flexDirection", container);
-  const flexWrap = supported(style.flexWrap ?? "nowrap", ["nowrap", "wrap"], "flexWrap", container);
+  const layoutDirection = style.layoutDirection ?? getLayoutDirection();
+  if (layoutDirection !== "ltr" && !(nativeLayout && layoutDirection === "rtl")) {
+    throw optionDiagnostic("layoutDirection", layoutDirection, container);
+  }
+  const flexDirection = style.flexDirection ?? "row";
+  if (flexDirection !== "row" && flexDirection !== "column" && !(nativeLayout && (flexDirection === "row-reverse" || flexDirection === "column-reverse"))) {
+    throw optionDiagnostic("flexDirection", flexDirection, container, "uses an unsupported flex direction in this build");
+  }
+  const flexWrap = style.flexWrap ?? "nowrap";
+  if (flexWrap !== "nowrap" && flexWrap !== "wrap" && !(nativeLayout && flexWrap === "wrap-reverse")) {
+    throw optionDiagnostic("flexWrap", flexWrap, container, "uses an unsupported flex wrap in this build");
+  }
   const justifyContent = supported(
-    style.justifyContent ?? "flex-start",
+    normalizeLogicalAlignment(style.justifyContent ?? "flex-start", flexDirection === "row-reverse" || flexDirection === "column-reverse"),
     ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"],
     "justifyContent",
     container
   );
+  const requestedAlignItems = normalizeLogicalAlignment(style[FLEX_LAST_BASELINE] ? "last-baseline" : style[FLEX_BASELINE_GROUP] ? "first-baseline" : style.alignItems ?? "stretch", flexWrap === "wrap-reverse");
   const alignItems = supported(
-    style.alignItems ?? "stretch",
-    ["stretch", "flex-start", "flex-end", "center"],
+    requestedAlignItems,
+    nativeLayout ? ["stretch", "flex-start", "flex-end", "center", "first-baseline", "last-baseline"] : ["stretch", "flex-start", "flex-end", "center"],
     "alignItems",
     container
   );
   const alignContent = supported(
-    style.alignContent ?? "stretch",
+    normalizeLogicalAlignment(style.alignContent ?? "stretch", flexWrap === "wrap-reverse"),
     ["stretch", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"],
     "alignContent",
     container
   );
-  const gap = nonnegativeGap(style.gap ?? 0, "gap", container);
+  const gap = style.gap ?? 0;
+  const columnGap = nonnegativeGap(gap, "gap", container, container.width);
+  const rowGap = typeof gap === "number" ? columnGap : nonnegativeGap(gap, "gap", container, container.height);
   return {
+    layoutDirection,
     flexDirection,
     flexWrap,
     justifyContent,
-    alignItems,
+    // Yoga resolves baseline alignment on column axes to logical flex-start
+    // before placement. It neither measures nor forms a vertical baseline group.
+    alignItems: alignItems === "first-baseline" ? "flex-start" : alignItems === "last-baseline" ? isRowDirection(flexDirection) ? "flex-start" : "flex-end" : alignItems,
+    [FLEX_BASELINE_GROUP]: (alignItems === "first-baseline" || alignItems === "last-baseline") && isRowDirection(flexDirection),
+    [FLEX_LAST_BASELINE]: alignItems === "last-baseline" && isRowDirection(flexDirection),
     alignContent,
-    rowGap: nonnegativeGap(style.rowGap ?? gap, "rowGap", container),
-    columnGap: nonnegativeGap(style.columnGap ?? gap, "columnGap", container)
+    rowGap: style.rowGap === void 0 ? rowGap : nonnegativeGap(style.rowGap, "rowGap", container, container.height),
+    columnGap: style.columnGap === void 0 ? columnGap : nonnegativeGap(style.columnGap, "columnGap", container, container.width)
   };
 }
 function supported(value, accepted, property, container) {
   if (!accepted.includes(value)) throw optionDiagnostic(property, value, container);
   return value;
 }
-function nonnegativeGap(value, property, container) {
-  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
+function nonnegativeGap(value, property, container, reference) {
+  const resolved = nativeLayout && isPercentage(value) ? resolveScalarSizingLength(value, reference, property, { component: "Flex", algorithm: "flex", constraints: constraintsFor(container) }) : value;
+  if (typeof resolved !== "number" || !Number.isFinite(resolved) || resolved < 0) {
     throw optionDiagnostic(property, value, container);
   }
-  return value;
+  return resolved;
 }
 function nonnegativeFactor(value, property, child, container) {
   if (!Number.isFinite(value) || value < 0) {
@@ -686,6 +2492,25 @@ function nonnegativeFactor(value, property, child, container) {
   }
   return value;
 }
+function resolveIntrinsicMainBound(value, minimum, maximum, property, reference, child, container) {
+  if (minimum === void 0 || maximum === void 0) {
+    throw childDiagnostic(child, property, value, container, "requires a direct finite horizontal Flex intrinsic-sizing owner");
+  }
+  const request = normalizeSizingLength(value, {
+    reference,
+    property,
+    context: childContext(child, container),
+    allowAuto: false,
+    allowIntrinsic: true
+  });
+  return resolveIntrinsicMainBasis(request, minimum, maximum, child, container);
+}
+function resolveIntrinsicMainBasis(request, minimum, maximum, child, container) {
+  if (request.kind === "min-content") return minimum;
+  if (request.kind === "max-content") return maximum;
+  if (request.kind === "fit-content") return Math.min(maximum, Math.max(minimum, request.limit));
+  throw childDiagnostic(child, "flexBasis", request, container, "requires min-content, max-content or fit-content");
+}
 function resolveBasis(basis, specifiedMain, measuredMain, reference, property, child, container) {
   const value = basis === "auto" || basis === void 0 ? specifiedMain : basis;
   if (value === void 0 || value === "auto") {
@@ -703,7 +2528,7 @@ function resolveBasis(basis, specifiedMain, measuredMain, reference, property, c
   return resolveItemLength(value, reference, "flexBasis", child, container);
 }
 function resolveItemLength(value, reference, property, child, container) {
-  const resolved = resolveLength(value, reference, property, childContext(child, container));
+  const resolved = resolveScalarSizingLength(value, reference, property, childContext(child, container));
   if (resolved === void 0 || resolved < 0) {
     throw childDiagnostic(
       child,
@@ -719,8 +2544,15 @@ function resolveOptionalBound(value, reference, property, fallback, child, conta
   if (value === void 0) return fallback;
   return resolveItemLength(value, reference, property, child, container);
 }
-function normalizeItemAlignment(value, child, container) {
+function normalizeLogicalAlignment(value, reversed) {
+  if (value === "start") return reversed ? "flex-end" : "flex-start";
+  if (value === "end") return reversed ? "flex-start" : "flex-end";
+  return value;
+}
+function normalizeItemAlignment(value, child, container, reverseCross = false) {
   if (value === void 0 || value === "auto") return "auto";
+  if (value === "start") return reverseCross ? "flex-end" : "flex-start";
+  if (value === "end") return reverseCross ? "flex-start" : "flex-end";
   if (value === "stretch" || value === "flex-start" || value === "flex-end" || value === "center") return value;
   throw childDiagnostic(
     child,
@@ -738,8 +2570,87 @@ function alignmentOffset(alignment, lineSize, itemSize) {
   if (alignment === "flex-end") return lineSize - itemSize;
   return 0;
 }
+function finiteRelativePlacement(value, property, child, container) {
+  if (!Number.isFinite(value)) {
+    throw childDiagnostic(child, property, value, container, "resolved relative placement arithmetic must remain finite");
+  }
+  return value;
+}
+function assertSupportedAbsoluteFlexPosition(child, style, container, direction, query, naturalWidth = false, naturalHeight = false) {
+  if (isKnownLayoutType(child.type) || isLayoutComponent(child.type)) {
+    throw childDiagnostic(child, "position", style.position, container, "PIBBL_LAYOUT_UNSUPPORTED_POSITION: absolute layout children and nested containing blocks are not supported in this slice");
+  }
+  if (!nativeLayout) {
+    throw childDiagnostic(child, "position", style.position, container, "PIBBL_LAYOUT_UNSUPPORTED_POSITION: absolute requires experimental Flex");
+  }
+  const automaticWidth = style.width === void 0 || style.width === "auto";
+  const automaticHeight = style.height === void 0 || style.height === "auto";
+  if (!automaticWidth && !isAbsoluteSizeInput(style.width) || !automaticHeight && !isAbsoluteSizeInput(style.height)) {
+    throw childDiagnostic(child, "position", style.position, container, "PIBBL_LAYOUT_UNSUPPORTED_POSITION: absolute currently requires finite nonnegative numeric or percentage dimensions, or admitted automatic dimensions");
+  }
+  if (style.aspectRatio !== void 0 && automaticWidth === automaticHeight) {
+    throw childDiagnostic(child, "aspectRatio", style.aspectRatio, container, "PIBBL_LAYOUT_UNSUPPORTED_POSITION: absolute aspectRatio currently requires exactly one automatic axis and one finite numeric or percentage axis");
+  }
+  if (style.aspectRatio === void 0 && (!naturalWidth && automaticWidth && (absoluteLeftInset(style, direction) === void 0 || absoluteRightInset(style, direction) === void 0) || !naturalHeight && automaticHeight && (style.top === void 0 || style.bottom === void 0))) {
+    throw childDiagnostic(child, "position", style.position, container, "PIBBL_LAYOUT_UNSUPPORTED_POSITION: automatic absolute size requires opposing insets on its axis");
+  }
+  if (style.alignSelf !== void 0) {
+    throw childDiagnostic(child, "alignSelf", style.alignSelf, container, "PIBBL_LAYOUT_UNSUPPORTED_POSITION: absolute currently uses parent alignItems only");
+  }
+  validateAbsoluteBound(style.minWidth, "minWidth", child, container);
+  validateAbsoluteBound(style.maxWidth, "maxWidth", child, container);
+  validateAbsoluteBound(style.minHeight, "minHeight", child, container);
+  validateAbsoluteBound(style.maxHeight, "maxHeight", child, container);
+  if (query || style.flexBasis !== void 0 && style.flexBasis !== "auto" || style.flexGrow !== void 0 && style.flexGrow !== 0 || style.flexShrink !== void 0 && style.flexShrink !== 0 || style.boxSizing !== void 0 || style.padding !== void 0 || style.paddingStart !== void 0 || style.paddingEnd !== void 0 || style.borderWidth !== void 0 || style.borderStartWidth !== void 0 || style.borderEndWidth !== void 0 || hasFlexMargin(style)) {
+    throw childDiagnostic(child, "position", style.position, container, "PIBBL_LAYOUT_UNSUPPORTED_POSITION: absolute excludes nonzero flex factors, margins, and child box decoration in this slice");
+  }
+}
+function validateAbsoluteBound(value, property, child, container) {
+  if (value === void 0) return;
+  if (!isAbsoluteSizeInput(value)) {
+    throw childDiagnostic(child, property, value, container, "PIBBL_LAYOUT_UNSUPPORTED_POSITION: absolute size bounds currently require nonnegative finite numbers or percentages");
+  }
+}
+function isAbsoluteSizeInput(value) {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 || isPercentage(value);
+}
+function resolveAbsoluteSize(value, property, reference, child, container) {
+  if (!isPercentage(value)) return value;
+  const resolved = resolveScalarSizingLength(value, reference, property, childContext(child, container));
+  if (resolved < 0) throw childDiagnostic(child, property, value, container, "absolute sizes must resolve to nonnegative finite numbers");
+  return resolved;
+}
+function absoluteLeftInset(style, direction) {
+  const logical = direction === "rtl" ? style.insetEnd : style.insetStart;
+  return logical === void 0 ? style.left : logical;
+}
+function absoluteRightInset(style, direction) {
+  const logical = direction === "rtl" ? style.insetStart : style.insetEnd;
+  return logical === void 0 ? style.right : logical;
+}
+function resolveFlexInset(value, property, child, container) {
+  if (value === void 0) return;
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (isPercentage(value)) {
+    return resolveScalarSizingLength(
+      value,
+      property === "left" || property === "right" ? container.width : container.height,
+      property,
+      childContext(child, container)
+    );
+  }
+  throw childDiagnostic(child, property, value, container, "currently requires a finite numeric inset or a signed decimal percentage");
+}
+function assertSupportedRelativeFlexPosition(child, style, _options, container) {
+  const position = style.position;
+  if (!nativeLayout || position !== "static" && position !== "relative") {
+    throw childDiagnostic(child, "position", position, container, "PIBBL_LAYOUT_UNSUPPORTED_POSITION: uses an unsupported Flex placement mode");
+  }
+}
 function rejectUnsupportedItemFields(child, style, container) {
-  for (const property of ["order", "margin", "marginLeft", "marginRight", "marginTop", "marginBottom"]) {
+  if (!nativeLayout && hasFlexMargin(style)) throw childDiagnostic(child, "margin", style.margin, container, "margins require the experimental Flex engine");
+  for (let propertyIndex = 0; propertyIndex < unsupportedProperties.length; propertyIndex++) {
+    const property = unsupportedProperties[propertyIndex];
     if (style[property] !== void 0) {
       throw childDiagnostic(
         child,
@@ -751,6 +2662,23 @@ function rejectUnsupportedItemFields(child, style, container) {
     }
   }
 }
+function hasFlexMargin(style) {
+  return style.margin !== void 0 || style.marginTop !== void 0 || style.marginRight !== void 0 || style.marginBottom !== void 0 || style.marginLeft !== void 0 || style.marginStart !== void 0 || style.marginEnd !== void 0;
+}
+function allocatedMargin(value, property, child, container) {
+  if (nativeLayout && isPercentage(value)) {
+    return resolveScalarSizingLength(value, container.width, property, childContext(child, container));
+  }
+  return numericMargin(value, property, child, container);
+}
+function numericMargin(value, property, child, container) {
+  if (value === void 0) return 0;
+  if (typeof value !== "number" || !Number.isFinite(value)) throw childDiagnostic(child, property, value, container, "margin must be a finite number in logical Canvas units");
+  return value;
+}
+function hasEmptyRectangleMinimum(child, style, query, percentageSizes = false) {
+  return nativeLayout && child.type === Rectangle && !Object.hasOwn(child.props, "children") && !query && (typeof style.width === "number" && Number.isFinite(style.width) && style.width >= 0 || percentageSizes && isPercentage(style.width)) && (typeof style.height === "number" && Number.isFinite(style.height) && style.height >= 0 || percentageSizes && isPercentage(style.height));
+}
 function clamp(value, minimum, maximum) {
   return Math.min(maximum, Math.max(minimum, value));
 }
@@ -761,14 +2689,14 @@ function assertFiniteBox(container) {
     }
   }
 }
-function optionDiagnostic(property, value, container) {
+function optionDiagnostic(property, value, container, reason = "uses an unsupported flex value") {
   return layoutDiagnostic({
     component: "Flex",
     property,
     value,
     algorithm: "flex",
     constraints: constraintsFor(container),
-    reason: "uses an unsupported flex value"
+    reason
   });
 }
 function childDiagnostic(child, property, value, container, reason) {
@@ -798,6 +2726,7 @@ function constraintsFor(container) {
 }
 export {
   Flex,
-  layoutFlex
+  layoutFlex,
+  resolveAbsoluteFlexPlacement
 };
 //# sourceMappingURL=flex.js.map