@pibbl/core 0.0.1

package/dist/lib/layout/flex.js

@@ -0,0 +1,803 @@
+import { 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 { GLOBAL_STATE } from "../global-state.js";
+import { 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 {
+  childWithUsedSize,
+  prepareDirectChildStyle,
+  materializeLayoutChildren,
+  placeDirectChildren,
+  prepareLayoutChildren,
+  resolveContainerBox
+} from "./absolute.js";
+import { pushLayoutBox } from "./context.js";
+import { recordLayoutEvaluation } from "./diagnostics.js";
+import { assertSupportedChildPosition } from "./positioning-diagnostics.js";
+import { measureElement } from "./measure.js";
+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);
+  const localContent = Object.freeze({
+    x: 0,
+    y: 0,
+    width: content.width,
+    height: content.height
+  });
+  const releaseLayout = pushLayoutBox(localContent);
+  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)
+    }
+  );
+  let index = 0;
+  return placeDirectChildren(
+    children,
+    localContent,
+    () => placements[index++],
+    style.overflow
+  );
+}
+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)
+});
+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";
+  if (widthDefinite && heightDefinite) {
+    return { status: "measured", size: {
+      width: resolveMeasuredContainerLength(
+        input.style.width,
+        input.constraints.maxWidth,
+        "width",
+        input.constraints
+      ),
+      height: resolveMeasuredContainerLength(
+        input.style.height,
+        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 diagnosticBox = {
+    x: 0,
+    y: 0,
+    width: Number.isFinite(input.constraints.maxWidth) ? input.constraints.maxWidth : 0,
+    height: Number.isFinite(input.constraints.maxHeight) ? input.constraints.maxHeight : 0
+  };
+  const options = normalizeFlexOptions(input.style, diagnosticBox);
+  const mainGap = row ? options.columnGap : options.rowGap;
+  let intrinsicMain = 0;
+  let intrinsicCross = 0;
+  let count = 0;
+  for (const child of children) {
+    const receiverToken = getChildPrimitiveReceiverToken(
+      GLOBAL_STATE.renderTransaction,
+      GLOBAL_STATE.primitiveReceiverToken,
+      count
+    );
+    const prepared = prepareDirectChildStyle(child, receiverToken, diagnosticBox);
+    const style = preparedStyleValue(prepared);
+    rejectUnsupportedItemFields(child, style, diagnosticBox);
+    const grow = nonnegativeFactor(
+      style.flexGrow ?? 0,
+      "flexGrow",
+      child,
+      diagnosticBox
+    );
+    if (grow !== 0) {
+      return unsupportedIntrinsic("does not support flexGrow during intrinsic measurement");
+    }
+    const shrink = nonnegativeFactor(
+      style.flexShrink ?? 1,
+      "flexShrink",
+      child,
+      diagnosticBox
+    );
+    const basis = style.flexBasis ?? "auto";
+    const mainProperty = row ? "width" : "height";
+    const crossProperty = row ? "height" : "width";
+    const minimumProperty = row ? "minWidth" : "minHeight";
+    if ((shrink > 0 || basis === "auto") && style[minimumProperty] === void 0) {
+      throw childDiagnostic(
+        child,
+        minimumProperty,
+        style[minimumProperty],
+        diagnosticBox,
+        "an explicit main-axis minimum is required for shrink or auto basis"
+      );
+    }
+    const mainValue = basis === "auto" ? style[mainProperty] : basis;
+    const crossValue = style[crossProperty];
+    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");
+    }
+    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(
+      style[maxMainProperty],
+      Number.POSITIVE_INFINITY,
+      maxMainProperty
+    );
+    const minCrossProperty = row ? "minHeight" : "minWidth";
+    const maxCrossProperty = row ? "maxHeight" : "maxWidth";
+    const minCross = intrinsicOptionalNumber(style[minCrossProperty], 0, minCrossProperty);
+    const maxCross = intrinsicOptionalNumber(
+      style[maxCrossProperty],
+      Number.POSITIVE_INFINITY,
+      maxCrossProperty
+    );
+    const padding = normalizeEdges(
+      style.padding,
+      "padding",
+      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
+    );
+    count++;
+  }
+  intrinsicMain += Math.max(0, count - 1) * mainGap;
+  return { status: "measured", size: {
+    width: widthDefinite ? resolveMeasuredContainerLength(
+      input.style.width,
+      input.constraints.maxWidth,
+      "width",
+      input.constraints
+    ) : row ? intrinsicMain : intrinsicCross,
+    height: heightDefinite ? resolveMeasuredContainerLength(
+      input.style.height,
+      input.constraints.maxHeight,
+      "height",
+      input.constraints
+    ) : row ? intrinsicCross : intrinsicMain
+  } };
+}
+function resolveMeasuredContainerLength(value, reference, property, constraints) {
+  const resolved = resolveLength(value, reference, property, {
+    component: "Flex",
+    algorithm: "measurement",
+    constraints
+  });
+  if (resolved === void 0 || resolved < 0) {
+    throw layoutDiagnostic({
+      component: "Flex",
+      property,
+      value,
+      algorithm: "measurement",
+      constraints,
+      reason: "requires a definite nonnegative container size"
+    });
+  }
+  return resolved;
+}
+function intrinsicNumber(value, property) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
+    throw layoutDiagnostic({
+      component: "Flex",
+      property,
+      value,
+      algorithm: "measurement",
+      reason: "intrinsic measurement requires finite nonnegative numeric sizes"
+    });
+  }
+  return value;
+}
+function intrinsicOptionalNumber(value, fallback, property) {
+  return value === void 0 ? fallback : intrinsicNumber(value, property);
+}
+function isPercentage(value) {
+  return typeof value === "string" && value.endsWith("%");
+}
+function hasPercentageBounds(style) {
+  return [
+    style.minWidth,
+    style.maxWidth,
+    style.minHeight,
+    style.maxHeight
+  ].some(isPercentage);
+}
+function unsupportedIntrinsic(reason) {
+  return {
+    status: "unsupported",
+    reason: `Flex intrinsic measurement ${reason}`
+  };
+}
+function layoutFlex(container, children, style, measurement) {
+  const prepared = materializeLayoutChildren(children, "Flex");
+  return resolveFlexPlacements(container, prepared, style, measurement).map((placement) => placement.box);
+}
+function resolveFlexPlacements(container, children, style, measurement) {
+  assertFiniteBox(container);
+  const options = normalizeFlexOptions(style, container);
+  const row = options.flexDirection === "row";
+  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 receiverToken = getChildPrimitiveReceiverToken(
+      GLOBAL_STATE.renderTransaction,
+      GLOBAL_STATE.primitiveReceiverToken,
+      items.length
+    );
+    const prepared = prepareDirectChildStyle(child, receiverToken, container);
+    const normalized = preparedStyleValue(prepared);
+    assertSupportedChildPosition("Flex", child, normalized);
+    rejectUnsupportedItemFields(child, normalized, container);
+    const grow = nonnegativeFactor(normalized.flexGrow ?? 0, "flexGrow", child, container);
+    const shrink = nonnegativeFactor(
+      normalized.flexShrink ?? 1,
+      "flexShrink",
+      child,
+      container
+    );
+    const basisValue = normalized.flexBasis ?? "auto";
+    const minimumProperty = row ? "minWidth" : "minHeight";
+    if ((shrink > 0 || basisValue === "auto") && normalized[minimumProperty] === void 0) {
+      throw childDiagnostic(
+        child,
+        minimumProperty,
+        normalized[minimumProperty],
+        container,
+        "an explicit main-axis minimum is required for shrink or auto basis"
+      );
+    }
+    const mainProperty = row ? "width" : "height";
+    const crossProperty = row ? "height" : "width";
+    const mainReference = mainSize;
+    const crossReference = crossSize;
+    let measured;
+    const specifiedMain = normalized[mainProperty];
+    const specifiedCross = normalized[crossProperty];
+    const needsMeasuredMain = basisValue === "auto" && (specifiedMain === void 0 || specifiedMain === "auto");
+    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 constraints = {
+        minWidth: 0,
+        maxWidth: container.width,
+        minHeight: 0,
+        maxHeight: container.height
+      };
+      const measurementChild = clonePibblElement(child);
+      setPreNormalizedStyle(
+        measurementChild,
+        normalized,
+        child,
+        receiverToken,
+        preparedStyleQuery(prepared)
+      );
+      const result = measurement.measureElement(measurementChild, constraints);
+      if (result.status === "measured") {
+        measured = result.size;
+      } else if (needsMeasuredMain || crossAuto && effectiveAlignment(
+        alignment,
+        options.alignItems
+      ) !== "stretch") {
+        throw childDiagnostic(
+          child,
+          needsMeasuredMain ? mainProperty : crossProperty,
+          "auto",
+          container,
+          `measurement is required but unsupported: ${result.reason}`
+        );
+      }
+    }
+    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(
+      normalized[minimumProperty],
+      mainReference,
+      minimumProperty,
+      0,
+      child,
+      container
+    );
+    const maximumProperty = row ? "maxWidth" : "maxHeight";
+    const maxMain = resolveOptionalBound(
+      normalized[maximumProperty],
+      mainReference,
+      maximumProperty,
+      Number.POSITIVE_INFINITY,
+      child,
+      container
+    );
+    const minCrossProperty = row ? "minHeight" : "minWidth";
+    const maxCrossProperty = row ? "maxHeight" : "maxWidth";
+    const minCross = resolveOptionalBound(
+      normalized[minCrossProperty],
+      crossReference,
+      minCrossProperty,
+      0,
+      child,
+      container
+    );
+    const maxCross = resolveOptionalBound(
+      normalized[maxCrossProperty],
+      crossReference,
+      maxCrossProperty,
+      Number.POSITIVE_INFINITY,
+      child,
+      container
+    );
+    if (minMain > maxMain) {
+      throw childDiagnostic(
+        child,
+        minimumProperty,
+        minMain,
+        container,
+        "minimum must not exceed maximum"
+      );
+    }
+    if (minCross > maxCross) {
+      throw childDiagnostic(
+        child,
+        minCrossProperty,
+        minCross,
+        container,
+        "minimum must not exceed maximum"
+      );
+    }
+    items.push({
+      child,
+      normalized,
+      baseMain,
+      targetMain: baseMain,
+      paddingMain,
+      preferredCross: clamp(preferredCross, minCross, maxCross) + paddingCross,
+      paddingCross,
+      minMain,
+      maxMain,
+      minCross,
+      maxCross,
+      grow,
+      shrink,
+      crossAuto,
+      alignSelf: alignment,
+      receiverToken,
+      query: preparedStyleQuery(prepared)
+    });
+  }
+  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 = [];
+  for (const line of lines) {
+    const occupied = line.items.reduce(
+      (total, item) => total + item.targetMain + item.paddingMain,
+      Math.max(0, line.items.length - 1) * mainGap
+    );
+    const distribution = 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
+      );
+      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 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({
+        box,
+        element: childWithUsedSize(
+          item.child,
+          usedStyle,
+          usedStyle.width,
+          usedStyle.height,
+          item.receiverToken,
+          item.query
+        )
+      });
+      mainCursor += outerMain + mainGap + distribution.between;
+    }
+  }
+  return placements;
+}
+function collectLines(items, mainSize, gap, wrap) {
+  const lines = [];
+  let current = [];
+  let occupied = 0;
+  for (const item of items) {
+    const hypothetical = clamp(item.baseMain, item.minMain, item.maxMain) + item.paddingMain;
+    const next = current.length === 0 ? hypothetical : occupied + gap + hypothetical;
+    if (wrap === "wrap" && current.length > 0 && next > mainSize) {
+      lines.push({ items: current, crossSize: 0, crossOffset: 0 });
+      current = [];
+      occupied = 0;
+    }
+    occupied = current.length === 0 ? hypothetical : occupied + gap + hypothetical;
+    current.push(item);
+  }
+  if (current.length > 0) {
+    lines.push({ items: current, crossSize: 0, crossOffset: 0 });
+  }
+  return lines;
+}
+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;
+  const frozen = /* @__PURE__ */ new Set();
+  for (const item of line.items) {
+    item.targetMain = item.baseMain;
+    const hypothetical = clamp(item.baseMain, item.minMain, item.maxMain);
+    if ((growing ? item.grow : item.shrink) === 0 || growing && item.baseMain > hypothetical || !growing && item.baseMain < hypothetical) {
+      item.targetMain = hypothetical;
+      frozen.add(item);
+    }
+  }
+  while (frozen.size < line.items.length) {
+    const fixed = line.items.reduce(
+      (total, item) => total + (frozen.has(item) ? item.targetMain : item.baseMain) + item.paddingMain,
+      gapSpace
+    );
+    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);
+    if (scaledFactor === 0) {
+      for (const item of unfrozen) {
+        item.targetMain = clamp(item.baseMain, item.minMain, item.maxMain);
+        frozen.add(item);
+      }
+      break;
+    }
+    if (rawFactor < 1) {
+      const partialFree = initialFree * rawFactor;
+      if (Math.abs(partialFree) < Math.abs(free)) free = partialFree;
+    }
+    const violations = [];
+    for (const item of unfrozen) {
+      const share = growing ? item.grow / scaledFactor : item.shrink * item.baseMain / scaledFactor;
+      const candidate = item.baseMain + free * share;
+      const clamped = clamp(candidate, item.minMain, item.maxMain);
+      item.targetMain = clamped;
+      if (clamped !== candidate) {
+        violations.push({ item, amount: clamped - candidate });
+      }
+    }
+    if (violations.length === 0) break;
+    const totalViolation = violations.reduce(
+      (total, violation) => total + violation.amount,
+      0
+    );
+    for (const violation of violations) {
+      if (totalViolation === 0 || totalViolation > 0 && violation.amount > 0 || totalViolation < 0 && violation.amount < 0) {
+        frozen.add(violation.item);
+      }
+    }
+  }
+}
+function resolveLineCrossSizes(lines, crossSize, gap, alignment, multiLine) {
+  if (lines.length === 0) return;
+  for (const line of lines) {
+    line.crossSize = Math.max(0, ...line.items.map((item) => item.preferredCross));
+  }
+  if (lines.length === 1 && !multiLine) {
+    lines[0].crossSize = crossSize;
+    lines[0].crossOffset = 0;
+    return;
+  }
+  const occupied = lines.reduce(
+    (total, line) => total + line.crossSize,
+    Math.max(0, lines.length - 1) * gap
+  );
+  const free = crossSize - occupied;
+  if (alignment === "stretch" && free > 0) {
+    const addition = free / lines.length;
+    for (const line of lines) line.crossSize += addition;
+  }
+  const distribution = alignment === "stretch" ? { start: 0, between: 0 } : distributeAlignment(alignment, free, lines.length);
+  let cursor = distribution.start;
+  for (const line of lines) {
+    line.crossOffset = cursor;
+    cursor += line.crossSize + gap + distribution.between;
+  }
+}
+function distributeAlignment(alignment, free, count) {
+  if (count === 0 || alignment === "flex-start" || alignment === "stretch") {
+    return { start: 0, between: 0 };
+  }
+  if (free < 0) {
+    if (alignment === "flex-end") return { start: free, between: 0 };
+    if (alignment === "center" || alignment === "space-around" || alignment === "space-evenly") {
+      return { start: free / 2, between: 0 };
+    }
+    return { start: 0, between: 0 };
+  }
+  if (alignment === "flex-end") return { start: free, between: 0 };
+  if (alignment === "center") return { start: free / 2, between: 0 };
+  if (alignment === "space-between") {
+    return count === 1 ? { start: 0, between: 0 } : { start: 0, between: free / (count - 1) };
+  }
+  if (alignment === "space-around") {
+    const between = free / count;
+    return { start: between / 2, between };
+  }
+  if (alignment === "space-evenly") {
+    const between = free / (count + 1);
+    return { start: between, between };
+  }
+  return { start: 0, between: 0 };
+}
+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 justifyContent = supported(
+    style.justifyContent ?? "flex-start",
+    ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"],
+    "justifyContent",
+    container
+  );
+  const alignItems = supported(
+    style.alignItems ?? "stretch",
+    ["stretch", "flex-start", "flex-end", "center"],
+    "alignItems",
+    container
+  );
+  const alignContent = supported(
+    style.alignContent ?? "stretch",
+    ["stretch", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"],
+    "alignContent",
+    container
+  );
+  const gap = nonnegativeGap(style.gap ?? 0, "gap", container);
+  return {
+    flexDirection,
+    flexWrap,
+    justifyContent,
+    alignItems,
+    alignContent,
+    rowGap: nonnegativeGap(style.rowGap ?? gap, "rowGap", container),
+    columnGap: nonnegativeGap(style.columnGap ?? gap, "columnGap", container)
+  };
+}
+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) {
+    throw optionDiagnostic(property, value, container);
+  }
+  return value;
+}
+function nonnegativeFactor(value, property, child, container) {
+  if (!Number.isFinite(value) || value < 0) {
+    throw childDiagnostic(
+      child,
+      property,
+      value,
+      container,
+      "must be finite and nonnegative"
+    );
+  }
+  return value;
+}
+function resolveBasis(basis, specifiedMain, measuredMain, reference, property, child, container) {
+  const value = basis === "auto" || basis === void 0 ? specifiedMain : basis;
+  if (value === void 0 || value === "auto") {
+    if (measuredMain === void 0) {
+      throw childDiagnostic(
+        child,
+        property,
+        value ?? "auto",
+        container,
+        "auto flex basis requires supported pure measurement"
+      );
+    }
+    return measuredMain;
+  }
+  return resolveItemLength(value, reference, "flexBasis", child, container);
+}
+function resolveItemLength(value, reference, property, child, container) {
+  const resolved = resolveLength(value, reference, property, childContext(child, container));
+  if (resolved === void 0 || resolved < 0) {
+    throw childDiagnostic(
+      child,
+      property,
+      value,
+      container,
+      "must resolve to a finite nonnegative length"
+    );
+  }
+  return resolved;
+}
+function resolveOptionalBound(value, reference, property, fallback, child, container) {
+  if (value === void 0) return fallback;
+  return resolveItemLength(value, reference, property, child, container);
+}
+function normalizeItemAlignment(value, child, container) {
+  if (value === void 0 || value === "auto") return "auto";
+  if (value === "stretch" || value === "flex-start" || value === "flex-end" || value === "center") return value;
+  throw childDiagnostic(
+    child,
+    "alignSelf",
+    value,
+    container,
+    "uses an unsupported flex item alignment"
+  );
+}
+function effectiveAlignment(value, fallback) {
+  return value === "auto" ? fallback : value;
+}
+function alignmentOffset(alignment, lineSize, itemSize) {
+  if (alignment === "center") return (lineSize - itemSize) / 2;
+  if (alignment === "flex-end") return lineSize - itemSize;
+  return 0;
+}
+function rejectUnsupportedItemFields(child, style, container) {
+  for (const property of ["order", "margin", "marginLeft", "marginRight", "marginTop", "marginBottom"]) {
+    if (style[property] !== void 0) {
+      throw childDiagnostic(
+        child,
+        property,
+        style[property],
+        container,
+        "uses an unsupported flex item feature"
+      );
+    }
+  }
+}
+function clamp(value, minimum, maximum) {
+  return Math.min(maximum, Math.max(minimum, value));
+}
+function assertFiniteBox(container) {
+  for (const [property, value] of Object.entries(container)) {
+    if (!Number.isFinite(value) || (property === "width" || property === "height") && value < 0) {
+      throw optionDiagnostic(property, value, container);
+    }
+  }
+}
+function optionDiagnostic(property, value, container) {
+  return layoutDiagnostic({
+    component: "Flex",
+    property,
+    value,
+    algorithm: "flex",
+    constraints: constraintsFor(container),
+    reason: "uses an unsupported flex value"
+  });
+}
+function childDiagnostic(child, property, value, container, reason) {
+  return layoutDiagnostic({
+    component: child.type.name || "Anonymous",
+    property,
+    value,
+    algorithm: "flex",
+    constraints: constraintsFor(container),
+    reason
+  });
+}
+function childContext(child, container) {
+  return {
+    component: child.type.name || "Anonymous",
+    algorithm: "flex",
+    constraints: constraintsFor(container)
+  };
+}
+function constraintsFor(container) {
+  return {
+    minWidth: 0,
+    maxWidth: container.width,
+    minHeight: 0,
+    maxHeight: container.height
+  };
+}
+export {
+  Flex,
+  layoutFlex
+};
+//# sourceMappingURL=flex.js.map