@pibbl/core 0.0.2 → 0.0.3-alpha.109.1

package/dist/lib/layout/absolute.d.ts

@@ -1,7 +1,7 @@
 import { ResponsiveStylePreparation, type PreparedQuery } from '../style/responsive.js';
 import type { PibblElement } from '../element/types.js';
 import type { BoxStyle, LayoutItemStyle, ResolvedBoxStyle } from '../style/types.js';
-import type { PibblNodeInput, StyleResolutionContext, SystemStyle } from '../types.js';
+import type { IntrinsicMeasureInput, IntrinsicSizesResult, CanvasMeasurementService, PibblNodeInput, StyleResolutionContext, SystemStyle } from '../types.js';
 import { type PibblStructuralEventProps } from '../components/structural-events.js';
 import type { LayoutBox } from './types.js';
 /**
@@ -22,7 +22,7 @@ export interface AbsoluteProps extends PibblStructuralEventProps {
     /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */
     children: PibblNodeInput;
 }
-type LayoutReceiver = 'Absolute' | 'Overlay' | 'Flow' | 'Flex' | 'Grid';
+type LayoutReceiver = 'Absolute' | 'Overlay' | 'Flow' | 'Flex' | 'Grid' | 'Layer';
 /**
  * Describes absolute layout for JSX or createElement authoring.
  *
@@ -34,19 +34,25 @@ type LayoutReceiver = 'Absolute' | 'Overlay' | 'Flow' | 'Flex' | 'Grid';
  * @see {@link AbsoluteStyle}
  */
 export declare const Absolute: import("@pibbl/core").PibblPrimitiveComponent<AbsoluteProps, import("@pibbl/core").PrimitiveInput<AbsoluteProps, AbsoluteStyle>>;
+/** Pure paired intrinsic contributions for stacking known layout owners. */
+export declare function measureUnionIntrinsic<S extends SystemStyle>(input: IntrinsicMeasureInput<{
+    readonly children: PibblNodeInput;
+}, S>, receiver: LayoutReceiver): IntrinsicSizesResult;
 /** @internal Resolves a layout container without inspecting its children. */
 export declare function resolveContainerBox(style: Readonly<BoxStyle>, context: Readonly<StyleResolutionContext>, component: string, algorithm: string): ResolvedBoxStyle;
 export declare function placeAbsoluteChild(container: Readonly<LayoutBox>, child: PibblElement<any>): LayoutBox;
 /** @internal Carries normalized finite content size into the eventual render. */
 export declare function childWithUsedSize(child: PibblElement<any>, style: Readonly<SystemStyle>, width: number, height: number, receiverToken?: object, query?: PreparedQuery): PibblElement<any>;
+/** Rebinds current raw inputs while carrying only a settled content allocation. */
+export declare function childWithCachedUsedSize(child: PibblElement<any>, width: number, height: number): PibblElement<any>;
 /** @internal Shared by the initial direct-child layout algorithms. */
-export declare function resolveDirectChildBox(container: Readonly<LayoutBox>, child: PibblElement<any>, algorithm: string, style?: Readonly<SystemStyle>): ResolvedBoxStyle;
+export declare function resolveDirectChildBox(container: Readonly<LayoutBox>, child: PibblElement<any>, algorithm: string, style?: Readonly<SystemStyle>, service?: CanvasMeasurementService, receiverToken?: object): ResolvedBoxStyle;
 /** @internal Normalizes a descriptor without resolving or invoking its callback. */
 export declare function normalizeDirectChildStyle(child: PibblElement<any>, receiverToken?: object, queryBasis?: Readonly<LayoutBox>): Readonly<SystemStyle>;
 /** Carries responsive eligibility with this normalization, never with a token. */
-export declare function prepareDirectChildStyle(child: PibblElement<any>, receiverToken?: object, queryBasis?: Readonly<LayoutBox>): Readonly<SystemStyle> | ResponsiveStylePreparation<Readonly<SystemStyle>>;
+export declare function prepareDirectChildStyle(child: PibblElement<any>, receiverToken?: object, queryBasis?: Readonly<LayoutBox>, flexMargins?: boolean): Readonly<SystemStyle> | ResponsiveStylePreparation<Readonly<SystemStyle>>;
 /** @internal Converts source-order descriptors to stable placed children. */
-export declare function placeDirectChildren(children: readonly PibblElement<any>[], contentBox: Readonly<LayoutBox>, place: (child: PibblElement<any>) => LayoutBox | {
+export declare function placeDirectChildren(children: readonly PibblElement<any>[], contentBox: Readonly<LayoutBox>, place: (child: PibblElement<any>, occurrence: number) => LayoutBox | {
     box: LayoutBox;
     element: PibblElement<any>;
 }, overflow: 'visible' | 'clip'): PibblElement<any>[];

package/dist/lib/layout/absolute.js

@@ -1,38 +1,51 @@
-import { ResponsiveStylePreparation, preparedStyleValue, preparedStyleQuery } from "../style/responsive.js";
+import { recordAllocationStyle, configureAllocationCheckpointAdapter, withAllocationCheckpoint, mountedAllocationCheckpointOwner } from "./allocation-checkpoint.js";
+import { participatingLayoutChildren, layoutParticipationPlan } from "./participation.js";
+import { allocatedContentBoxStyle, contentBoxStyle } from "./box-sizing.js";
+import { recordWasmAllocationPass, recordWasmAllocationItem, recordWasmAllocationCacheHit, nativeLayout } from "./wasm/region.js";
+import { registerKnownLayoutPreflight, isKnownLayoutType, claimPreparedLayoutPlan, stagePreparedLayoutPlan, prepareKnownLayoutDescendants, preparePlacedKnownLayout, takePreparedChildStyle, stagePreparedChildStyle } from "./prepared-root.js";
+import { isLayoutComponent, prepareLayoutComponent } from "./define-layout-component.js";
+import { ResponsiveStylePreparation, getStyleMeasurementMode, preparedStyleValue, preparedStyleQuery } from "../style/responsive.js";
 import { definePrimitive } from "../define-primitive.js";
 import { EMPTY_STYLE } from "../style/empty-style.js";
 import { materializeContainerChildren } from "../element/children.js";
 import { clonePibblElement } from "../element/create-element.js";
 import {
+  getElementMetadata,
+  setElementMetadata,
   getPrimitiveDefinition,
   getChildPrimitiveReceiverToken,
   setPlacementConsumed
 } from "../element/metadata.js";
 import { resolvePrimitiveStyleInput } from "../element/resolve-primitive-inputs.js";
 import { GLOBAL_STATE } from "../global-state.js";
-import { normalizeEdges } from "../style/normalize.js";
-import { resolveLength } from "../style/resolve-length.js";
+import { normalizeBoxInsets, hasPercentageBoxPadding, resolveAllocatedInsets } from "./box-insets.js";
+import { isFitContent, isIntrinsicSizingValue, resolveScalarSizingLength } from "../style/sizing-length.js";
 import {
   extractSystemFilter,
   setPreNormalizedStyle,
+  setAllocatedContentSize,
   withoutSystemFilter
 } from "../style/resolve-dispatch.js";
+import { measureElement, measureIntrinsicElement } from "./measure.js";
+import { canvasMeasurementService } from "./canvas-measurement.js";
 import { layoutDiagnostic } from "../style/diagnostics.js";
 import {
   wireStructuralEvents
 } from "../components/structural-events.js";
-import { pushLayoutBox } from "./context.js";
+import { pushLayoutBox, resolvePositionedContainingBox } from "./context.js";
 import { recordLayoutEvaluation } from "./diagnostics.js";
 import { resolveBox } from "./box.js";
 import {
   createPlacementIdentityHint,
   placeChild
 } from "./place-child.js";
-import { withReceiverInputProvision } from "../signals/input-provision.js";
+import { withReceiverInputProvision, captureReceiverInputProvision } from "../signals/input-provision.js";
+import { assertSupportedChildPosition } from "./positioning-diagnostics.js";
+const ABSOLUTE_CONTAINING_BOX_STYLE = /* @__PURE__ */ Symbol("pibbl.absolute-containing-box-style");
 const preparedLayoutTransactions = /* @__PURE__ */ new WeakMap();
 function renderAbsolute(props, style, ctx) {
   wireStructuralEvents(props);
-  const children = prepareLayoutChildren(props.children, "Absolute");
+  const ordinaryChildren = nativeLayout ? void 0 : prepareLayoutChildren(props.children, "Absolute");
   recordLayoutEvaluation();
   const content = style.box.contentBox;
   ctx.translate(content.x, content.y);
@@ -42,30 +55,169 @@ function renderAbsolute(props, style, ctx) {
     width: content.width,
     height: content.height
   });
-  const releaseLayout = pushLayoutBox(localContent);
+  const releaseLayout = pushLayoutBox(localContent, {
+    logicalOffset: content,
+    containingBlock: resolvePositionedContainingBox(
+      style[ABSOLUTE_CONTAINING_BOX_STYLE],
+      localContent,
+      "Absolute"
+    )
+  });
   GLOBAL_STATE.componentRefs.onAfterRender = releaseLayout;
+  const prepared = nativeLayout ? claimPreparedLayoutPlan(GLOBAL_STATE.componentRefs.element, localContent) : void 0;
+  const children = prepared?.children ?? ordinaryChildren ?? prepareLayoutChildren(props.children, "Absolute");
+  const placements = prepared?.placements ?? (nativeLayout ? withAllocationCheckpoint(mountedAllocationCheckpointOwner(), { children, content: localContent, settings: style, onHit: recordWasmAllocationCacheHit, calculate: () => prepareAbsolutePlacements(children, localContent) }) : void 0);
+  let placementIndex = 0;
   let occurrence = 0;
   return placeDirectChildren(
     children,
     localContent,
-    (child) => resolveAbsoluteChildPlacement(
-      localContent,
-      child,
-      getChildPrimitiveReceiverToken(
+    (child, childOccurrence) => {
+      const placement = placements ? placements[placementIndex++] : resolveAbsoluteChildPlacement(localContent, child, getChildPrimitiveReceiverToken(
         GLOBAL_STATE.renderTransaction,
         GLOBAL_STATE.primitiveReceiverToken,
         occurrence++
-      )
-    ),
+      ));
+      if (nativeLayout && !prepared) preparePlacedKnownLayout(placement.element, childOccurrence);
+      return placement;
+    },
     style.overflow
   );
 }
 const Absolute = definePrimitive(renderAbsolute, {
   childInput: "structural",
-  resolveStyle: (style, context) => ({
-    box: resolveContainerBox(style, context, "Absolute", "absolute"),
-    overflow: style.overflow ?? "visible"
-  })
+  resolveStyle: (style, context) => {
+    if (nativeLayout && hasPercentageBoxPadding(style)) {
+      style = resolveAllocatedInsets(style, {
+        width: context.percentageBasis.width,
+        context: { ...context, component: "Absolute", algorithm: "absolute" }
+      });
+    }
+    return {
+      box: resolveContainerBox(style, context, "Absolute", "absolute"),
+      [ABSOLUTE_CONTAINING_BOX_STYLE]: style,
+      overflow: style.overflow ?? "visible"
+    };
+  },
+  measureIntrinsic: (input) => measureUnionIntrinsic(input, "Absolute")
+});
+function measureUnionIntrinsic(input, receiver) {
+  const owner = {
+    x: 0,
+    y: 0,
+    width: intrinsicMaximum(input.constraints.width),
+    height: intrinsicMaximum(input.constraints.height)
+  };
+  const children = materializeLayoutChildren(input.props.children, receiver);
+  let minWidth = 0, minHeight = 0, maxWidth = 0, maxHeight = 0;
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index];
+    const receiverToken = getChildPrimitiveReceiverToken(
+      GLOBAL_STATE.renderTransaction,
+      GLOBAL_STATE.primitiveReceiverToken,
+      index
+    );
+    const prepared = prepareDirectChildStyle(child, receiverToken, owner);
+    let style = preparedStyleValue(prepared);
+    if (hasIntrinsicUnionPercentage(style)) {
+      return { status: "unsupported", reason: `${receiver} intrinsic percentage child sizes require a definite owner allocation` };
+    }
+    if (style.boxSizing !== void 0) {
+      style = contentBoxStyle(style, {
+        width: owner.width,
+        height: owner.height,
+        context: { component: child.type.name || "Anonymous", algorithm: `${receiver} intrinsic measurement`, constraints: {
+          minWidth: 0,
+          maxWidth: owner.width,
+          minHeight: 0,
+          maxHeight: owner.height
+        } }
+      });
+    }
+    assertSupportedChildPosition(receiver, child, style, false, false);
+    const insets = normalizeBoxInsets(style, {
+      component: child.type.name || "Anonymous",
+      algorithm: `${receiver} intrinsic measurement`,
+      constraints: { minWidth: 0, maxWidth: owner.width, minHeight: 0, maxHeight: owner.height }
+    });
+    let measured;
+    if (typeof style.width === "number" && typeof style.height === "number") {
+      measured = {
+        status: "measured",
+        minContent: { width: style.width, height: style.height },
+        maxContent: { width: style.width, height: style.height }
+      };
+    } else {
+      const measuredChild = clonePibblElement(child);
+      setPreNormalizedStyle(measuredChild, style, child, receiverToken, preparedStyleQuery(prepared));
+      measured = measureIntrinsicElement(measuredChild, {
+        minWidth: 0,
+        maxWidth: owner.width,
+        minHeight: 0,
+        maxHeight: owner.height
+      }, input.service);
+      if (measured.status !== "measured") return measured;
+    }
+    const minimumWidth = (typeof style.width === "number" ? style.width : measured.minContent.width) + insets.left + insets.right;
+    const maximumWidth = (typeof style.width === "number" ? style.width : measured.maxContent.width) + insets.left + insets.right;
+    const minimumHeight = (typeof style.height === "number" ? style.height : measured.minContent.height) + insets.top + insets.bottom;
+    const maximumHeight = (typeof style.height === "number" ? style.height : measured.maxContent.height) + insets.top + insets.bottom;
+    const left = intrinsicOffset(receiver === "Absolute" ? style.left : void 0, "left", receiver);
+    const top = intrinsicOffset(receiver === "Absolute" ? style.top : void 0, "top", receiver);
+    if (left.status === "unsupported") return { status: "unsupported", reason: left.reason };
+    if (top.status === "unsupported") return { status: "unsupported", reason: top.reason };
+    minWidth = Math.max(minWidth, left.value + minimumWidth);
+    minHeight = Math.max(minHeight, top.value + minimumHeight);
+    maxWidth = Math.max(maxWidth, left.value + maximumWidth);
+    maxHeight = Math.max(maxHeight, top.value + maximumHeight);
+  }
+  return { status: "measured", minContent: { width: minWidth, height: minHeight }, maxContent: { width: maxWidth, height: maxHeight } };
+}
+function intrinsicMaximum(constraint) {
+  return constraint.kind === "bounded" ? constraint.max : Number.MAX_SAFE_INTEGER;
+}
+function hasIntrinsicUnionPercentage(style) {
+  return hasPercentageBoxPadding(style) || intrinsicPercentage(style.width) || intrinsicPercentage(style.height) || intrinsicPercentage(style.minWidth) || intrinsicPercentage(style.maxWidth) || intrinsicPercentage(style.minHeight) || intrinsicPercentage(style.maxHeight) || intrinsicPercentage(style.left) || intrinsicPercentage(style.top);
+}
+function intrinsicPercentage(value) {
+  return typeof value === "string" && value.endsWith("%");
+}
+function intrinsicOffset(value, property, receiver) {
+  if (value === void 0) return { status: "measured", value: 0 };
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return { status: "unsupported", reason: `${receiver} intrinsic ${property} offset must be finite and numeric` };
+  }
+  return { status: "measured", value: Math.max(0, value) };
+}
+function prepareAbsolutePlacements(children, content) {
+  recordWasmAllocationPass();
+  const placements = [];
+  for (let index = 0; index < children.length; index++) {
+    recordWasmAllocationItem();
+    placements.push(resolveAbsoluteChildPlacement(content, children[index], getChildPrimitiveReceiverToken(GLOBAL_STATE.renderTransaction, GLOBAL_STATE.primitiveReceiverToken, index)));
+  }
+  return placements;
+}
+if (nativeLayout) registerKnownLayoutPreflight(Absolute, (element, style, content, receiver, slot) => {
+  const previous = GLOBAL_STATE.primitiveReceiverToken;
+  GLOBAL_STATE.primitiveReceiverToken = receiver;
+  const releaseLayout = pushLayoutBox(content, {
+    containingBlock: resolvePositionedContainingBox(
+      style,
+      content,
+      "Absolute"
+    )
+  });
+  try {
+    const children = prepareLayoutChildren(element.props.children, "Absolute");
+    const placements = withAllocationCheckpoint(slot, { children, content, settings: style, onHit: recordWasmAllocationCacheHit, calculate: () => prepareAbsolutePlacements(children, content) });
+    const plan = { content, children, placements };
+    prepareKnownLayoutDescendants(plan, slot);
+    stagePreparedLayoutPlan(slot, plan);
+  } finally {
+    releaseLayout();
+    GLOBAL_STATE.primitiveReceiverToken = previous;
+  }
 });
 function resolveContainerBox(style, context, component, algorithm) {
   return resolveLayoutBox(style, context, component, algorithm, false);
@@ -75,42 +227,48 @@ function placeAbsoluteChild(container, child) {
 }
 function resolveAbsoluteChildPlacement(container, child, receiverToken) {
   const prepared = prepareDirectChildStyle(child, receiverToken, container);
-  const style = preparedStyleValue(prepared);
-  const resolved = resolveDirectChildBox(container, child, "absolute", style);
+  let style = preparedStyleValue(prepared);
+  if (nativeLayout && GLOBAL_STATE.currentPibblInstance && getStyleMeasurementMode() === void 0 && hasPercentageBoxPadding(style)) {
+    style = resolveAllocatedInsets(style, { width: container.width, context: childDiagnosticContext(child, container, "absolute") });
+  }
+  assertSupportedChildPosition("Absolute", child, style, false, false);
+  const resolved = resolveDirectChildBox(container, child, "absolute", style, void 0, receiverToken);
   const context = childDiagnosticContext(child, container, "absolute");
-  const left = resolveLength(style.left ?? 0, container.width, "left", context);
-  const top = resolveLength(style.top ?? 0, container.height, "top", context);
+  const left = resolveScalarSizingLength(style.left ?? 0, container.width, "left", context);
+  const top = resolveScalarSizingLength(style.top ?? 0, container.height, "top", context);
   const box = {
     x: finitePlacement(container.x + left, "left", left, context),
     y: finitePlacement(container.y + top, "top", top, context),
     width: resolved.borderBox.width,
     height: resolved.borderBox.height
   };
-  return {
-    box,
-    element: childWithUsedSize(
-      child,
-      style,
-      resolved.contentBox.width,
-      resolved.contentBox.height,
-      receiverToken,
-      preparedStyleQuery(prepared)
-    )
-  };
+  const element = childWithUsedSize(
+    child,
+    style,
+    resolved.contentBox.width,
+    resolved.contentBox.height,
+    receiverToken,
+    preparedStyleQuery(prepared)
+  );
+  return { box, element };
 }
 function childWithUsedSize(child, style, width, height, receiverToken, query) {
   const renderedChild = clonePibblElement(child);
   setPlacementConsumed(renderedChild);
-  setPreNormalizedStyle(renderedChild, Object.freeze({
-    ...style,
-    width,
-    height
-  }), child, receiverToken, query);
+  setPreNormalizedStyle(renderedChild, Object.freeze(allocatedContentBoxStyle(style, width, height)), child, receiverToken, query);
+  return renderedChild;
+}
+function childWithCachedUsedSize(child, width, height) {
+  const renderedChild = clonePibblElement(child);
+  setPlacementConsumed(renderedChild);
+  setAllocatedContentSize(renderedChild, width, height);
   return renderedChild;
 }
-function resolveDirectChildBox(container, child, algorithm, style = normalizeDirectChildStyle(child, void 0, container)) {
+function resolveDirectChildBox(container, child, algorithm, style = normalizeDirectChildStyle(child, void 0, container), service, receiverToken) {
+  const boxStyle = style;
+  if (hasIntrinsicDirectLength(boxStyle)) return resolveIntrinsicDirectChildBox(container, child, algorithm, boxStyle, service, receiverToken);
   return resolveLayoutBox(
-    style,
+    boxStyle,
     {
       allocation: container,
       percentageBasis: container,
@@ -128,39 +286,153 @@ function resolveDirectChildBox(container, child, algorithm, style = normalizeDir
     true
   );
 }
+function hasIntrinsicDirectLength(style) {
+  return isIntrinsicSizingValue(style.width) || isIntrinsicSizingValue(style.height) || isIntrinsicSizingValue(style.minWidth) || isIntrinsicSizingValue(style.maxWidth) || isIntrinsicSizingValue(style.minHeight) || isIntrinsicSizingValue(style.maxHeight);
+}
+function resolveIntrinsicDirectChildBox(container, child, algorithm, style, service, receiverToken) {
+  const context = childDiagnosticContext(child, container, algorithm);
+  const measurement = service ?? (GLOBAL_STATE.renderContext ? canvasMeasurementService(GLOBAL_STATE.renderContext) : void 0);
+  if (!measurement) throw layoutDiagnostic({ ...context, property: "width", value: style.width, reason: "intrinsic sizing requires a Canvas measurement service" });
+  const pairedChild = clonePibblElement(child);
+  setPreNormalizedStyle(pairedChild, style, child, receiverToken);
+  const paired = measureIntrinsicElement(pairedChild, { minWidth: 0, maxWidth: container.width, minHeight: 0, maxHeight: container.height }, measurement);
+  if (paired.status !== "measured") throw layoutDiagnostic({ ...context, property: "width", value: style.width, reason: `intrinsic measurement is required but unsupported: ${paired.reason}` });
+  let width = intrinsicDirectLength(style.width, paired.minContent.width, paired.maxContent.width, container.width, "width", context);
+  const minWidth = intrinsicDirectLength(style.minWidth, paired.minContent.width, paired.maxContent.width, container.width, "minWidth", context);
+  const maxWidth = intrinsicDirectLength(style.maxWidth, paired.minContent.width, paired.maxContent.width, container.width, "maxWidth", context);
+  let height = intrinsicDirectLength(style.height, paired.minContent.height, paired.maxContent.height, container.height, "height", context);
+  const minHeight = intrinsicDirectLength(style.minHeight, paired.minContent.height, paired.maxContent.height, container.height, "minHeight", context);
+  const maxHeight = intrinsicDirectLength(style.maxHeight, paired.minContent.height, paired.maxContent.height, container.height, "maxHeight", context);
+  if (width !== void 0) {
+    const minimum = minWidth ?? scalarDirectBound(style.minWidth, container.width, "minWidth", context) ?? 0;
+    const maximum = maxWidth ?? scalarDirectBound(style.maxWidth, container.width, "maxWidth", context) ?? Number.POSITIVE_INFINITY;
+    width = Math.min(maximum, Math.max(minimum, width));
+  }
+  if (height === void 0 && width !== void 0) {
+    const measuredChild = clonePibblElement(child);
+    setPreNormalizedStyle(measuredChild, { ...style, boxSizing: "content-box", width, minWidth: void 0, maxWidth: void 0 }, child, receiverToken);
+    const measured = measureElement(measuredChild, { minWidth: width, maxWidth: width, minHeight: 0, maxHeight: container.height }, measurement);
+    if (measured.status !== "measured") throw layoutDiagnostic({ ...context, property: "height", value: style.height ?? "auto", reason: `constrained measurement is required but unsupported: ${measured.reason}` });
+    height = measured.size.height;
+  }
+  const insets = normalizeBoxInsets(style, context);
+  const horizontal = style.boxSizing === "border-box" ? insets.left + insets.right : 0;
+  const vertical = style.boxSizing === "border-box" ? insets.top + insets.bottom : 0;
+  return resolveLayoutBox({
+    ...style,
+    width: width === void 0 ? style.width : width + horizontal,
+    height: height === void 0 ? style.height : height + vertical,
+    minWidth: minWidth === void 0 ? style.minWidth : minWidth + horizontal,
+    maxWidth: maxWidth === void 0 ? style.maxWidth : maxWidth + horizontal,
+    minHeight: minHeight === void 0 ? style.minHeight : minHeight + vertical,
+    maxHeight: maxHeight === void 0 ? style.maxHeight : maxHeight + vertical
+  }, { allocation: container, percentageBasis: container, constraints: { minWidth: 0, maxWidth: container.width, minHeight: 0, maxHeight: container.height }, component: child.type.name || "Anonymous", algorithm: "render-dispatch" }, child.type.name || "Anonymous", algorithm, true);
+}
+function intrinsicDirectLength(value, minimum, maximum, reference, property, context) {
+  if (value === "min-content") return minimum;
+  if (value === "max-content") return maximum;
+  if (isFitContent(value)) {
+    const limit = resolveScalarSizingLength(value.limit, reference, property, context);
+    return Math.min(maximum, Math.max(minimum, limit));
+  }
+  return void 0;
+}
+function scalarDirectBound(value, reference, property, context) {
+  return value === void 0 || isIntrinsicSizingValue(value) ? void 0 : resolveScalarSizingLength(value, reference, property, context);
+}
 function normalizeDirectChildStyle(child, receiverToken, queryBasis) {
   return preparedStyleValue(prepareDirectChildStyle(child, receiverToken, queryBasis));
 }
-function prepareDirectChildStyle(child, receiverToken, queryBasis) {
-  const definition = getPrimitiveDefinition(child.type);
-  const prepared = withReceiverInputProvision(
+function prepareDirectChildStyle(child, receiverToken, queryBasis, flexMargins = false) {
+  configureAllocationCheckpointAdapter(prepareDirectChildStyle, childWithUsedSize, takePreparedChildStyle, stagePreparedChildStyle, isLayoutComponent, isKnownLayoutType, prepareLayoutComponent);
+  const staged = takePreparedChildStyle(child, receiverToken, queryBasis);
+  if (staged) {
+    recordAllocationStyle(receiverToken, staged);
+    return staged;
+  }
+  let source = child;
+  const captured = captureReceiverInputProvision(
     GLOBAL_STATE.renderTransaction,
     receiverToken,
-    () => resolvePrimitiveStyleInput(
-      child.props.style,
-      child,
-      queryBasis
-    ) ?? EMPTY_STYLE
+    () => {
+      if (isLayoutComponent(child.type)) source = prepareLayoutComponent(child, { receiverToken });
+      return resolvePrimitiveStyleInput(
+        source.props.style,
+        source,
+        queryBasis
+      ) ?? EMPTY_STYLE;
+    }
   );
+  const prepared = captured.value;
+  const definition = getPrimitiveDefinition(source.type);
   const style = preparedStyleValue(prepared);
+  if (!flexMargins) {
+    const values = style;
+    const property = values.margin !== void 0 ? "margin" : values.marginTop !== void 0 ? "marginTop" : values.marginRight !== void 0 ? "marginRight" : values.marginBottom !== void 0 ? "marginBottom" : values.marginLeft !== void 0 ? "marginLeft" : values.marginStart !== void 0 ? "marginStart" : values.marginEnd !== void 0 ? "marginEnd" : void 0;
+    if (property) throw layoutDiagnostic({
+      component: child.type.name,
+      algorithm: "layout",
+      property,
+      value: values[property],
+      reason: "margins currently require experimental Flex"
+    });
+  }
   const filter = extractSystemFilter(style);
   const normalized = definition?.normalizeStyle ? definition.normalizeStyle(withoutSystemFilter(style)) : withoutSystemFilter(style);
   const final = { ...normalized, ...filter === void 0 ? {} : { filter }, ...style.transition === void 0 ? {} : { transition: style.transition } };
   if (prepared instanceof ResponsiveStylePreparation) {
     prepared.style = final;
+    recordAllocationStyle(receiverToken, prepared, captured.receipt);
     return prepared;
   }
+  recordAllocationStyle(receiverToken, final, captured.receipt);
   return final;
 }
 function placeDirectChildren(children, contentBox, place, overflow) {
+  const participation = layoutParticipationPlan(children);
+  if (participation) {
+    const renderSequence = (sequence, insideContents) => {
+      const occurrences2 = /* @__PURE__ */ new Map();
+      const result = [];
+      for (const node of sequence) {
+        const child = node.element;
+        const occurrence = child.key === void 0 ? occurrences2.get(child.type) ?? 0 : 0;
+        if (child.key === void 0) occurrences2.set(child.type, occurrence + 1);
+        let element, box;
+        if (node.children) {
+          element = clonePibblElement(child);
+          setElementMetadata(element, { ...getElementMetadata(element), layoutContentsChildren: renderSequence(node.children, true) });
+          box = { x: 0, y: 0, width: contentBox.width, height: contentBox.height };
+        } else if (node.hidden) {
+          element = child;
+          box = { x: 0, y: 0, width: 0, height: 0 };
+        } else {
+          const placement = place(child, occurrence);
+          box = "box" in placement ? placement.box : placement;
+          element = "box" in placement ? placement.element : child;
+        }
+        result.push(placeChild({
+          element,
+          box,
+          clipInChildSpace: overflow === "clip" && !insideContents ? {
+            x: contentBox.x - box.x,
+            y: contentBox.y - box.y,
+            width: contentBox.width,
+            height: contentBox.height
+          } : void 0,
+          identityHint: createPlacementIdentityHint(child, occurrence)
+        }));
+      }
+      return result;
+    };
+    return renderSequence(participation, false);
+  }
   const occurrences = /* @__PURE__ */ new Map();
   const placed = [];
   for (const child of children) {
     const occurrence = child.key === void 0 ? occurrences.get(child.type) ?? 0 : 0;
-    if (child.key === void 0) {
-      occurrences.set(child.type, occurrence + 1);
-    }
-    const placement = place(child);
+    if (child.key === void 0) occurrences.set(child.type, occurrence + 1);
+    const placement = place(child, occurrence);
     const box = "box" in placement ? placement.box : placement;
     const element = "box" in placement ? placement.element : child;
     placed.push(placeChild({
@@ -178,9 +450,9 @@ function placeDirectChildren(children, contentBox, place, overflow) {
   return placed;
 }
 function materializeLayoutChildren(children, receiver) {
-  return materializeContainerChildren(children, receiver, {
+  return participatingLayoutChildren(materializeContainerChildren(children, receiver, {
     validateKeys: false
-  });
+  }));
 }
 function prepareLayoutChildren(children, receiver) {
   const transaction = GLOBAL_STATE.renderTransaction;
@@ -251,7 +523,7 @@ function resolveLayoutBox(style, context, component, algorithm, requireDefinite)
     "maxHeight",
     diagnosticContext
   );
-  const padding = normalizeEdges(style.padding, "padding", diagnosticContext);
+  const padding = normalizeBoxInsets(style, diagnosticContext);
   const allowOverflow = requireDefinite;
   const maxConstraintWidth = allowOverflow ? allocationCeiling(
     context.allocation.width,
@@ -284,7 +556,7 @@ function resolveLayoutBox(style, context, component, algorithm, requireDefinite)
 }
 function resolveOptionalAllocationLength(value, reference, property, context) {
   if (value === void 0) return void 0;
-  return resolveLength(value, reference, property, context);
+  return resolveScalarSizingLength(value, reference, property, context);
 }
 function allocationCeiling(allocation, values, padding, property, context) {
   const ceiling = Math.max(allocation, ...values.filter(
@@ -335,8 +607,10 @@ function finitePlacement(resolved, property, value, context) {
 }
 export {
   Absolute,
+  childWithCachedUsedSize,
   childWithUsedSize,
   materializeLayoutChildren,
+  measureUnionIntrinsic,
   normalizeDirectChildStyle,
   placeAbsoluteChild,
   placeDirectChildren,