@react-x11/components 0.13.0 → 0.14.0

package/dist/html/layout/flex.js

@@ -20,13 +20,15 @@
 // independent Yoga pass inside the measure call. Not a nested Yoga node:
 // that would need the whole child subtree mirrored into Yoga's tree, and the
 // measure seam already answers the only question the outer pass asks. What
-// the leaf shape costs is stretch — a stretched item's box grows but its
-// contents are not re-laid at the stretched height.
+// the leaf shape costs is a layout: an item the flex pass made taller or
+// shorter than its content, which lays what is in it out by its height — a
+// flex or grid container, or a box holding a percentage of a height — is
+// laid out again at that height (`layoutItemAt`).
 import { Yoga, layoutLoaded } from 'react-x11/yoga';
 import { AUTO, gapOf, isPct, resolve, resolveOrNull } from '../css/values.js';
 import { scrolls } from '../css/style.js';
 import { Box, PAINT_ORDER, isBlank } from './boxes.js';
-import { FLEXED_HEIGHT, MIN_CONTENT_PROBE, clampHeight, clampWidth, contentSizedWidth, exactMinContent, intrinsicWidth, measureIntrinsicWidth, moveTo, percentBaseInside, percentHeightsIn, positionOutOfFlow, replacedRatio, transferredHeight, transferredWidth, heightFromWidth, widthFromHeight, resolveEdges, } from './block.js';
+import { FLEXED_HEIGHT, MIN_CONTENT_PROBE, USED_HEIGHT, centreButton, clampHeight, clampWidth, contentSizedWidth, exactMinContent, intrinsicWidth, measureIntrinsicWidth, moveTo, percentBaseInside, percentHeightsIn, positionOutOfFlow, replacedRatio, transferredHeight, transferredWidth, heightFromWidth, widthFromHeight, resolveEdges, } from './block.js';
 import { layoutGrid } from './css-grid.js';
 import { firstBaselineIn } from './inline.js';
 // `react-x11/yoga` re-exports yoga's own declarations, so the node shape and
@@ -97,9 +99,14 @@ export function layoutFlex(box, ctx, contentWidth) {
     // percentage that resolves, or what `aspect-ratio` makes of the width —
     // less the padding and borders a `border-box` height holds, which put
     // `h-16 py-2 items-center` eight pixels low. Where it is not, the limits
-    // on it, so a column `min-h-screen` gives its `flex-1` the rest.
+    // on it, so a column `min-h-screen` gives its `flex-1` the rest — or the
+    // height the column it is an item of flexed it to (`USED_HEIGHT`), which
+    // its items are laid out in and take no percentage of.
     const definite = percentBaseInside(box);
-    const height = Number.isFinite(definite) ? definite : null;
+    const own = Number.isFinite(definite);
+    const height = USED_HEIGHT.get(box) ?? (own ? definite : null);
+    // whether its content may come to more than it is tall
+    let capped = height !== null;
     if (height !== null)
         root.setHeight(height);
     else {
@@ -109,8 +116,10 @@ export function layoutFlex(box, ctx, contentWidth) {
         if (min > 0)
             root.setMinHeight(min);
         const max = clampHeight(box, Infinity) - extra;
-        if (Number.isFinite(max))
+        if (Number.isFinite(max)) {
             root.setMaxHeight(Math.max(0, max));
+            capped = true;
+        }
     }
     const flowing = [];
     let reordered = false;
@@ -138,21 +147,59 @@ export function layoutFlex(box, ctx, contentWidth) {
     for (const child of flowing) {
         const node = Y.Node.create(flexConfig());
         resolveEdges(child, contentWidth);
-        const laid = { width: NaN, height: NaN, set: NaN, stretch: NaN };
-        applyItem(node, child, ctx, contentWidth, laid, height !== null);
+        const laid = {
+            width: NaN,
+            height: NaN,
+            tall: NaN,
+            set: NaN,
+            stretch: NaN,
+            main: NaN,
+            least: NaN,
+            held: NaN,
+            auto: false,
+        };
+        applyItem(node, child, ctx, contentWidth, laid, height !== null, own);
         root.insertChild(node, items.length);
         items.push({ box: child, node, laid });
     }
     const direction = box.style.direction === 'rtl' ? Y.DIRECTION_RTL : Y.DIRECTION_LTR;
     const row = box.style.flexDirection.startsWith('row');
-    const calculate = () => root.calculateLayout(bounded ? contentWidth : Number.NaN, height ?? Number.NaN, direction);
+    // frozen at its least size on the one line of a box that does not
+    // wrap, by a basis where Yoga takes one along the main axis
+    // (`applyItem`'s `setBasis`)
+    const hold = {
+        frozen: box.style.flexWrap === 'nowrap',
+        basis: row ? bounded : height !== null,
+    };
+    const ask = () => root.calculateLayout(bounded ? contentWidth : Number.NaN, height ?? Number.NaN, direction);
+    // the one line of a box that does not wrap may be short of room, where
+    // the box has a size along it that its items do not make: and Yoga's
+    // answer for a line every item of which its minimum stops is put right
+    // (`stoppedLine`)
+    const short = hold.frozen && (row ? bounded : capped);
+    // each item's size along the main axis, read the once a layout (`Laid`)
+    const read = () => {
+        for (const { node, laid } of items) {
+            laid.main = row ? node.getComputedWidth() : node.getComputedHeight();
+        }
+    };
+    const calculate = () => {
+        ask();
+        read();
+        if (!short)
+            return;
+        const room = row ? contentWidth : (height ?? root.getComputedHeight());
+        const gap = row ? columnGap : rowGap;
+        if (stoppedLine(items, row, room, gap, hold, ask))
+            read();
+    };
     ctx.flexDepth = depth + 1;
     try {
         calculate();
         // an item Yoga shrank under what its content comes to is kept to it,
         // and the row is laid out again (`autoMinimums`) — which may shrink
         // another under its own, a few times over at most
-        for (let pass = 0; pass < 4 && autoMinimums(items, row, ctx, contentWidth); pass += 1) {
+        for (let pass = 0; pass < 4 && autoMinimums(items, row, ctx, contentWidth, hold); pass += 1) {
             calculate();
         }
     }
@@ -163,7 +210,7 @@ export function layoutFlex(box, ctx, contentWidth) {
     // one pass of its own, which drops a margin (`lineMarginFix`)
     const baselines = box.style.alignItems === 'baseline' ||
         items.some(({ box: child }) => child.style.alignSelf === 'baseline');
-    let bottom = placeItems(box, ctx, items, row, height, box.style.flexWrap === 'wrap' || baselines);
+    let bottom = placeItems(box, ctx, items, row, own, box.style.flexWrap === 'wrap' || baselines, contentWidth);
     // Items aligned by their baselines, which Yoga cannot see, are aligned
     // with their baselines known (`baselineLines`)
     // by the flex layout again, set at their lines' starts with the margins
@@ -191,7 +238,7 @@ export function layoutFlex(box, ctx, contentWidth) {
         finally {
             ctx.flexDepth = depth;
         }
-        bottom = placeItems(box, ctx, items, row, height, box.style.flexWrap === 'wrap', started);
+        bottom = placeItems(box, ctx, items, row, own, box.style.flexWrap === 'wrap', contentWidth, started);
     }
     // A replaced item with a ratio that is stretched across a line of a
     // definite size takes its flex base size from the stretched one through
@@ -209,7 +256,7 @@ export function layoutFlex(box, ctx, contentWidth) {
         finally {
             ctx.flexDepth = depth;
         }
-        bottom = placeItems(box, ctx, items, row, height, box.style.flexWrap === 'wrap' || baselines);
+        bottom = placeItems(box, ctx, items, row, own, box.style.flexWrap === 'wrap' || baselines, contentWidth);
     }
     const contentHeight = root.getComputedHeight();
     root.freeRecursive();
@@ -219,7 +266,7 @@ export function layoutFlex(box, ctx, contentWidth) {
  *  base size the ratio makes of the stretched size; whether any changed. */
 function keepRatios(container, items, row) {
     let changed = false;
-    for (const { box, node } of items) {
+    for (const { box, node, laid } of items) {
         if (box.kind !== 'replaced' || !stretches(box, container.style, row)) {
             continue;
         }
@@ -234,10 +281,17 @@ function keepRatios(container, items, row) {
                 box.horizontalExtra
             : Math.max(0, node.getComputedWidth() - box.horizontalExtra) / ratio +
                 box.verticalExtra;
-        const main = row ? node.getComputedWidth() : node.getComputedHeight();
-        if (Math.abs(basis - main) < 0.5)
+        if (Math.abs(basis - laid.main) < 0.5)
             continue;
         node.setFlexBasis(basis);
+        // one held at its least size (`holdAt`) flexes from the new basis, no
+        // further down than that
+        if (!Number.isNaN(laid.held)) {
+            laid.held = NaN;
+            laid.auto = false;
+            node.setFlexGrow(style.flexGrow);
+            node.setFlexShrink(style.flexShrink);
+        }
         changed = true;
     }
     return changed;
@@ -357,9 +411,13 @@ function orderOf(box) {
 /** Lay each item out where the flex layout put it, at the size it gave it,
  *  and answer where the lowest ends. `started` are items set at their
  *  lines' starts whatever their own alignment says (`baselineLines`). */
-function placeItems(box, ctx, items, row, height, 
+function placeItems(box, ctx, items, row, 
+/** Whether the flex box has a definite height. */
+own, 
 /** Whether Yoga aligned the lines in its pass that drops a margin. */
-lined, started) {
+lined, 
+/** The flex box's content width: its items' containing block's. */
+contentWidth, started) {
     let bottom = 0;
     for (const { box: child, node, laid } of items) {
         const across = lined
@@ -367,8 +425,8 @@ lined, started) {
             : 0;
         const left = box.contentX + node.getComputedLeft() + (row ? 0 : across);
         const top = box.contentY + node.getComputedTop() + (row ? across : 0);
-        const width = meant(node.getComputedWidth(), laid.set, laid.stretch, laid.width);
-        const itemHeight = node.getComputedHeight();
+        const width = meant(row ? laid.main : node.getComputedWidth(), laid.set, laid.stretch, laid.width, row ? laid.held : NaN);
+        const itemHeight = row ? node.getComputedHeight() : laid.main;
         // The item is laid out again at the width the flex pass settled on: the
         // measure function answered a question, and the answer is not a layout —
         // its line breaks were computed against a width that may have changed
@@ -378,15 +436,18 @@ lined, started) {
         // 9.8): stretched across a row's line, or flexed in a column of a
         // height of its own. What is in it takes its percentages of that —
         // the `h-full` in a stretched sidebar — where they had nothing to be
-        // of, and the item is laid out again for them.
+        // of, and the item is laid out again for them; and so is one that is a
+        // flex or grid container itself, whose own items are laid out in that
+        // height (9.4, step 11: "redo layout for its contents, treating this
+        // used size as its definite cross size").
         const definite = row
             ? stretches(child, box.style)
                 ? itemHeight
                 : null
-            : height !== null
+            : own
                 ? itemHeight
                 : null;
-        layoutItemAt(child, ctx, left, top, width, itemHeight, laid, definite, !row);
+        layoutItemAt(child, ctx, left, top, width, itemHeight, laid, definite, contentWidth, !row);
         // to the end of its margin box, as Yoga measured the box: a negative
         // margin takes the item's end back in, which Codex's search field
         // hangs a pixel over its form's border with, top and bottom
@@ -397,6 +458,8 @@ lined, started) {
 function layoutItemAt(box, ctx, x, y, width, height, laid, 
 /** Its border box's height where the flex layout made it definite. */
 definite, 
+/** The flex box's content width, the item's containing block's. */
+containing, 
 /** Whether its height is the one the flex layout gave it, in a column,
  *  whatever its own says: flexed, it is shrunk as well as grown. */
 column = false) {
@@ -409,32 +472,65 @@ column = false) {
         box.height = height;
         return;
     }
-    const inner = definite === null || !percentHeightsIn(box)
-        ? null
-        : Math.max(0, definite - box.verticalExtra);
-    if (inner !== null && !Object.is(inner, percentBaseInside(box))) {
-        FLEXED_HEIGHT.set(box, inner);
-        try {
-            ctx.layoutSubtree(box, width);
+    const sameWidth = Math.abs(laid.width - width) <= 0.01;
+    // The content height the item is laid out at, where the flex layout gave
+    // it one that is not its own already: NaN where its content says how
+    // tall it is.
+    let tall = NaN;
+    // A flex or grid container shares its height out among its items: an
+    // `auto` margin takes what is free of it (8.1), a `flex: 1` grows into it
+    // (9.7), its lines are as tall as it (9.4), its `fr` rows fill it. So it
+    // is laid out in the height the flex layout gave it, definite or not —
+    // the one a column with no height of its own flexed it to is its used
+    // size all the same (9.7), and `min-h-screen flex flex-col` around a
+    // `flex-1 flex items-center` centres what is in that. At its content's
+    // own height there is nothing to share, and the layout it has is that
+    // one: the tallest card of a row is laid out the once.
+    const given = definite ?? (column ? height : null);
+    const shares = box.kind === 'flex' &&
+        given !== null &&
+        !(Math.abs(naturalHeight(box, ctx, width, containing, laid) - given) <= 0.01);
+    if (given !== null) {
+        const inner = Math.max(0, given - box.verticalExtra);
+        if (Object.is(inner, percentBaseInside(box))) {
+            // the height it has of its own
         }
-        finally {
-            FLEXED_HEIGHT.delete(box);
+        else if (shares || (definite !== null && percentHeightsIn(box))) {
+            tall = inner;
         }
     }
     // `measureBox` lays the box out at (0, 0); re-running it at the final width
     // and then moving it is one pass, not two, because the second call is the
-    // one whose result is kept — or no pass, where the last measure was at
-    // this width. An item Yoga never measured has none, NaN, and is laid out.
-    else if (Math.abs(laid.width - width) <= 0.01)
+    // one whose result is kept — or no pass, where the last layout was at
+    // this width and this height. An item Yoga never measured has none, NaN,
+    // and is laid out.
+    if (sameWidth && Object.is(laid.tall, tall))
         box.height = laid.height;
-    else
-        ctx.layoutSubtree(box, width);
+    else if (Number.isNaN(tall)) {
+        layoutNaturally(box, ctx, width, containing, laid);
+    }
+    else {
+        // what is in it takes its percentages of a definite height alone (9.8)
+        const heights = definite !== null ? FLEXED_HEIGHT : USED_HEIGHT;
+        heights.set(box, tall);
+        try {
+            ctx.layoutSubtree(box, width, containing);
+        }
+        finally {
+            heights.delete(box);
+        }
+        laid.width = box.width;
+        laid.height = box.height;
+        laid.tall = tall;
+    }
     // A stretched item is taller than its content, and the box has to say so
     // or its background stops short of the row — and it is no taller than its
     // line where its content is, or than what its ratio makes of its width:
     // its height is the line's (CSS Flexbox 9.4, step 11).
     if (height > box.height || column || definite !== null)
         box.height = height;
+    // and a button's content is centred in the height it came to
+    centreButton(box);
     moveTo(box, x, y);
 }
 // What a new Yoga node already is is not said again. A call into the
@@ -461,8 +557,11 @@ function applyContainer(node, style) {
         node.setAlignContent(lines);
 }
 function applyItem(node, box, ctx, containingWidth, laid, 
-/** Whether the flex box has a height of its own. */
-tall) {
+/** Whether the flex box has a height its items are laid out in. */
+tall, 
+/** Whether that height is definite, and a percentage may be of it: one a
+ *  column flexed the box to is not (`USED_HEIGHT`). */
+own) {
     const style = box.style;
     laid.stretch = containingWidth - box.marginLeft - box.marginRight;
     // an `auto` margin takes the free space on its side, which is how
@@ -492,11 +591,20 @@ tall) {
     if (style.width !== AUTO) {
         laid.set = setLength(node, true, style.width, containingWidth, across);
     }
-    if (style.height !== AUTO)
+    // a percentage of a height that is not definite is `auto` (CSS 2.1 10.5),
+    // which Yoga makes of one where the flex box has no height at all
+    if (style.height !== AUTO && (own || !tall || !isPct(style.height))) {
         setLength(node, false, style.height, NaN, down);
+    }
+    // the least it may be along each axis, its border box's, as Yoga is
+    // told it
+    let leastWidth = NaN;
+    let leastHeight = NaN;
     const minWidth = resolveOrNull(style.minWidth, containingWidth);
-    if (minWidth !== null)
-        node.setMinWidth(minWidth + across);
+    if (minWidth !== null) {
+        leastWidth = minWidth + across;
+        node.setMinWidth(leastWidth);
+    }
     if (style.maxWidth !== 'none') {
         const maxWidth = resolveOrNull(style.maxWidth, containingWidth);
         if (maxWidth !== null)
@@ -512,20 +620,25 @@ tall) {
             laid.set = size(style.widthKeyword);
             node.setWidth(laid.set);
         }
-        if (style.minWidthKeyword)
-            node.setMinWidth(size(style.minWidthKeyword));
+        if (style.minWidthKeyword) {
+            leastWidth = size(style.minWidthKeyword);
+            node.setMinWidth(leastWidth);
+        }
         if (style.maxWidthKeyword)
             node.setMaxWidth(size(style.maxWidthKeyword));
     }
     const minHeight = resolveOrNull(style.minHeight, NaN);
-    if (minHeight !== null)
-        node.setMinHeight(minHeight + down);
+    if (minHeight !== null) {
+        leastHeight = minHeight + down;
+        node.setMinHeight(leastHeight);
+    }
     if (style.maxHeight !== 'none') {
         const maxHeight = resolveOrNull(style.maxHeight, NaN);
         if (maxHeight !== null)
             node.setMaxHeight(maxHeight + down);
     }
     const row = box.parent?.style.flexDirection.startsWith('row') ?? true;
+    laid.least = row ? leastWidth : leastHeight;
     // Yoga takes a length for a basis only where the flex box's main size is
     // definite, and else the item's own size along it: down a column of no
     // height of its own it read `flex: 0 0 3rem` as the item's height, or
@@ -561,6 +674,10 @@ tall) {
     else if (style.flexBasis === 'content' || style.flexBasis === AUTO) {
         // Yoga's own
     }
+    else if (isPct(style.flexBasis) && !row && tall && !own) {
+        // a percentage of a main size that is not definite is `content` (CSS
+        // Flexbox 7.2.3): Yoga's own, down a column
+    }
     else if (isPct(style.flexBasis)) {
         // a percentage of the main size, which is known across a row
         const basis = style.flexBasis;
@@ -656,7 +773,12 @@ tall) {
         const width = meant(w, laid.set - extra, laid.stretch - extra);
         const given = hm === Y.MEASURE_MODE_EXACTLY && Number.isFinite(h);
         const exact = wm === Y.MEASURE_MODE_EXACTLY && Number.isFinite(width);
-        const through = widthThrough && given && !exact ? widthThrough(h) : null;
+        // the height it was flexed to, that is: one its automatic minimum
+        // holds it at (`holdAt`) is its content's, which a replaced element's
+        // width follows through its ratio and no other's does (CSS Sizing 4,
+        // 5.1)
+        const flexed = box.kind === 'replaced' || !laid.auto;
+        const through = widthThrough && given && !exact && flexed ? widthThrough(h) : null;
         // along a row, a replaced element is its own width wherever there is
         // room for less — its flex base size is not fitted to the room (9.2)
         // — and across a column it is fitted, as any item is
@@ -673,10 +795,8 @@ tall) {
         }
         let answer = answers.get(inner);
         if (answer === undefined) {
-            answer = measureBox(box, ctx, inner);
+            answer = measureBox(box, ctx, inner, containingWidth, laid);
             answers.set(inner, answer);
-            laid.width = box.width;
-            laid.height = box.height;
         }
         return answer;
     });
@@ -752,13 +872,174 @@ extra) {
  * 9.2, `flex-basis: auto`), rather than as wide as the row; asked for one
  * exactly, it is that wide. Its height is its content's at that width.
  */
-function measureBox(box, ctx, inner) {
-    ctx.layoutSubtree(box, inner + box.horizontalExtra);
+function measureBox(box, ctx, inner, 
+/** The flex box's content width, the item's containing block's. */
+containing, laid) {
+    // its padding as Yoga has it, a percentage of the flex box's width: a
+    // probe of its content's width leaves a percentage at none
+    resolveEdges(box, containing);
+    const width = inner + box.horizontalExtra;
+    // its height at this width is known, where a layout since has left it
+    // another: the answer is the height, and the layout `layoutItemAt`'s
+    const kept = keptNatural(box, ctx, width, containing);
+    if (kept !== null && kept.serial !== box.layoutSerial) {
+        return {
+            width: inner,
+            height: Math.max(0, kept.height - box.verticalExtra),
+        };
+    }
+    layoutNaturally(box, ctx, width, containing, laid);
     return {
         width: inner,
         height: Math.max(0, box.height - box.verticalExtra),
     };
 }
+/** An item's height as its content's own makes it at a border-box width,
+ *  where this pass has laid it out so (`layoutNaturally`), and else NaN. */
+function naturalHeight(box, ctx, width, containing, laid) {
+    if (Math.abs(laid.width - width) <= 0.01 && Number.isNaN(laid.tall)) {
+        return laid.height;
+    }
+    return keptNatural(box, ctx, width, containing)?.height ?? NaN;
+}
+/**
+ * Give an item the layout its content's own height makes of it at a
+ * border-box width, and note it (`Laid`): the one this pass has made of it
+ * there already, where it still has it.
+ *
+ * A flex box laid out a second time — at the height a stretch gave it, its
+ * own flex layout made anew (`layoutItemAt`) — asks of each item what it
+ * asked the first time, and the item's layout at a width is what it was.
+ * Kept for the pass, a card laid out again for its height lays nothing in
+ * it out that is where it was; made again at every layout of the box
+ * around it, a card in a card in a card laid its innermost out twice a
+ * level.
+ */
+function layoutNaturally(box, ctx, width, 
+/** The flex box's content width, the item's containing block's. */
+containing, laid) {
+    const kept = keptNatural(box, ctx, width, containing);
+    if (kept !== null && kept.serial === box.layoutSerial) {
+        // put back, where the flex layout stretched it
+        box.height = kept.height;
+    }
+    else {
+        const at = ctx.positioned.length;
+        ctx.layoutSubtree(box, width, containing);
+        // a replaced box is sized, not laid out, and has no layout to count
+        if (box.kind !== 'replaced') {
+            NATURAL.set(box, {
+                ctx,
+                serial: box.layoutSerial,
+                width,
+                containing: readsContaining(box) ? containing : NaN,
+                base: box.percentHeightBase,
+                edges: edgesOf(box),
+                height: box.height,
+                queued: ctx.positioned.length > at ? { at, first: ctx.positioned[at] } : null,
+                drawn: NaN,
+                content: NaN,
+            });
+        }
+    }
+    laid.width = box.width;
+    laid.height = box.height;
+    laid.tall = NaN;
+}
+/**
+ * The layout this pass made of an item at its content's own height
+ * (`layoutNaturally`), where one at `width` now would be the same: the same
+ * width, the same edges — a percentage among them resolved, as the layout
+ * leaves them — the same containing block's width where a limit on its own
+ * is a percentage of it, and the same height for its percentages, where its
+ * own style reads that at all, which the flex box around it coming to a
+ * definite height changes for every item in it. Its `height` is the item's
+ * there whatever has laid it out since, and the layout is the one the box
+ * has where nothing has (`Box.layoutSerial`).
+ */
+function keptNatural(box, ctx, width, containing) {
+    const kept = NATURAL.get(box);
+    if (kept === undefined || kept.ctx !== ctx || kept.width !== width) {
+        return null;
+    }
+    if (!Number.isNaN(kept.containing) && kept.containing !== containing) {
+        return null;
+    }
+    if (!Object.is(kept.base, box.percentHeightBase) && readsPercentBase(box)) {
+        return null;
+    }
+    // the boxes in it that are positioned last are still waiting to be: a
+    // `line-clamp: auto` box laid out a second time forgets the ones its
+    // first layout found
+    if (kept.queued && ctx.positioned[kept.queued.at] !== kept.queued.first) {
+        return null;
+    }
+    const edges = kept.edges;
+    return edges[0] === box.marginTop &&
+        edges[1] === box.marginRight &&
+        edges[2] === box.marginBottom &&
+        edges[3] === box.marginLeft &&
+        edges[4] === box.borderTop &&
+        edges[5] === box.borderRight &&
+        edges[6] === box.borderBottom &&
+        edges[7] === box.borderLeft &&
+        edges[8] === box.padTop &&
+        edges[9] === box.padRight &&
+        edges[10] === box.padBottom &&
+        edges[11] === box.padLeft
+        ? kept
+        : null;
+}
+const NATURAL = new WeakMap();
+/** Note what was read from the layout an item has, where that is the one
+ *  its content's own height makes of it at `width`. */
+function remember(box, ctx, width, containing, field, value) {
+    const made = keptNatural(box, ctx, width, containing);
+    if (made !== null && made.serial === box.layoutSerial)
+        made[field] = value;
+}
+/** A box's edges, which a layout resolves again against the width it is
+ *  given: margins, borders, padding, each from the top round. */
+function edgesOf(box) {
+    return [
+        box.marginTop,
+        box.marginRight,
+        box.marginBottom,
+        box.marginLeft,
+        box.borderTop,
+        box.borderRight,
+        box.borderBottom,
+        box.borderLeft,
+        box.padTop,
+        box.padRight,
+        box.padBottom,
+        box.padLeft,
+    ];
+}
+/** Whether the width a box is laid out at is held to a percentage of its
+ *  containing block's: a least or greatest width that is one. */
+function readsContaining(box) {
+    const style = box.style;
+    return (isPct(style.minWidth) ||
+        (style.maxWidth !== 'none' && isPct(style.maxWidth)));
+}
+/** Whether a box's own layout reads the height its percentages are of: a
+ *  height, a least or greatest one, or an offset that is a percentage, a
+ *  height that is a keyword — `stretch` fills it — or an anonymous box,
+ *  which hands it on to what is in it (`percentBaseInside`). */
+function readsPercentBase(box) {
+    if (!box.el && !box.pseudo)
+        return true;
+    const style = box.style;
+    return (isPct(style.height) ||
+        isPct(style.minHeight) ||
+        (style.maxHeight !== 'none' && isPct(style.maxHeight)) ||
+        isPct(style.top) ||
+        isPct(style.bottom) ||
+        style.heightKeyword !== null ||
+        style.minHeightKeyword !== null ||
+        style.maxHeightKeyword !== null);
+}
 /** The width an item's content is measured at: the width Yoga gives it
  *  exactly, or its max-content width, no wider than any it may take up to
  *  (CSS Flexbox 9.2). */
@@ -789,7 +1070,7 @@ function innerWidth(width, mode, maxContent) {
  * (`Laid`), so a row with room pays for nothing. True where some item
  * was given a minimum and the row has to be laid out again.
  */
-function autoMinimums(items, row, ctx, containingWidth) {
+function autoMinimums(items, row, ctx, containingWidth, hold) {
     let changed = false;
     for (const { box, node, laid } of items) {
         if (box.kind === 'text' || box.kind === 'break')
@@ -801,7 +1082,7 @@ function autoMinimums(items, row, ctx, containingWidth) {
         if (!asked && scrolls(style)) {
             continue;
         }
-        const width = meant(node.getComputedWidth(), laid.set, laid.stretch, laid.width);
+        const width = meant(row ? laid.main : node.getComputedWidth(), laid.set, laid.stretch, laid.width, row ? laid.held : NaN);
         // a replaced item's content along a row is its natural width
         if (row && box.kind === 'replaced') {
             if (style.minWidth !== AUTO || style.minWidthKeyword)
@@ -809,7 +1090,7 @@ function autoMinimums(items, row, ctx, containingWidth) {
             const least = replacedMinimum(box, containingWidth);
             if (least === null || width >= least - 0.01)
                 continue;
-            node.setMinWidth(least);
+            holdAt(node, laid, row, least, hold);
             changed = true;
             continue;
         }
@@ -836,7 +1117,7 @@ function autoMinimums(items, row, ctx, containingWidth) {
                 }
                 if (width >= least - 0.01)
                     continue;
-                node.setMinWidth(least);
+                holdAt(node, laid, row, least, hold);
                 changed = true;
                 continue;
             }
@@ -865,9 +1146,9 @@ function autoMinimums(items, row, ctx, containingWidth) {
             if (width >= least - 0.01)
                 continue;
             least = Math.min(least, minContentOf(box, ctx, laid));
-            if (node.getComputedWidth() >= least - 0.01)
+            if (laid.main >= least - 0.01)
                 continue;
-            node.setMinWidth(least);
+            holdAt(node, laid, row, least, hold);
             changed = true;
             continue;
         }
@@ -879,17 +1160,37 @@ function autoMinimums(items, row, ctx, containingWidth) {
             transferredWidth(box, widest + box.horizontalExtra) <= width + 0.5) {
             continue;
         }
-        if (!(Math.abs(laid.width - width) <= 0.01)) {
-            ctx.layoutSubtree(box, width);
-            laid.width = box.width;
-            laid.height = box.height;
+        // What its content's own height makes of it at this width — how wide
+        // that drew, along a row, and how far down, along a column — is read
+        // from that layout, which the item is given where it has another: or
+        // is what this pass read from it before, where the flex box is laid
+        // out a second time (`layoutNaturally`)
+        const kept = keptNatural(box, ctx, width, containingWidth);
+        const read = kept === null ? NaN : row ? kept.drawn : kept.content;
+        if (Number.isNaN(read) && !(Math.abs(laid.width - width) <= 0.01)) {
+            layoutNaturally(box, ctx, width, containingWidth, laid);
         }
+        const height = Number.isNaN(read) ? laid.height : kept.height;
         let least;
         if (row) {
-            // or than what it drew at the width it has: nothing overflows it
-            const drawn = intrinsicWidth(box) + box.horizontalExtra;
-            if (transferredWidth(box, drawn) <= width + 0.5)
+            // or than what it drew at the width it has: nothing overflows it —
+            // unless a line in it fits for being cut short by `text-overflow`,
+            // which is how the line is drawn and no part of how wide it is: a
+            // button whose label is a `truncate` span is no narrower than the
+            // label, where it was shrunk and the label cut. No width, then, that
+            // it drew at, which is what is kept of it
+            let drawn = read;
+            if (Number.isNaN(drawn)) {
+                const seen = { cut: false };
+                drawn = intrinsicWidth(box, seen) + box.horizontalExtra;
+                if (seen.cut)
+                    drawn = Infinity;
+                remember(box, ctx, width, containingWidth, 'drawn', drawn);
+            }
+            if (Number.isFinite(drawn) &&
+                transferredWidth(box, drawn) <= width + 0.5) {
                 continue;
+            }
             // within what a ratio makes of its least and greatest heights (4.5's
             // content size suggestion)
             least = transferredWidth(box, minContentOf(box, ctx, laid));
@@ -899,15 +1200,18 @@ function autoMinimums(items, row, ctx, containingWidth) {
                 if (most !== null)
                     least = Math.min(least, most + extra);
             }
-            if (node.getComputedWidth() >= least - 0.01)
+            if (laid.main >= least - 0.01)
                 continue;
-            node.setMinWidth(least);
+            holdAt(node, laid, row, least, hold);
         }
         else {
             // its height, or where it has one of its own and its content comes to
             // less, its content's: the lesser of the two (4.5)
-            let content;
-            if (box.kind === 'replaced')
+            let content = read;
+            if (!Number.isNaN(content)) {
+                // read before
+            }
+            else if (box.kind === 'replaced')
                 content = laid.height;
             else if (style.height !== AUTO && percentHeightsIn(box)) {
                 // what its content comes to where it has no height to take
@@ -915,43 +1219,226 @@ function autoMinimums(items, row, ctx, containingWidth) {
                 // apart, and the final pass lays it out again
                 FLEXED_HEIGHT.set(box, NaN);
                 try {
-                    ctx.layoutSubtree(box, width);
+                    ctx.layoutSubtree(box, width, containingWidth);
                 }
                 finally {
                     FLEXED_HEIGHT.delete(box);
                 }
-                content = contentBottom(box) + box.verticalExtra;
+                content = ratioContent(box, contentBottom(box) + box.verticalExtra);
                 laid.width = NaN;
             }
-            else
-                content = contentBottom(box) + box.verticalExtra;
-            // and a ratio's content is at least its width through the ratio,
-            // height of its own or not (CSS Sizing 4, 5.1)
-            const aspect = style.aspectRatio;
-            if (aspect && box.kind !== 'replaced') {
-                content = Math.max(content, style.boxSizing === 'border-box'
-                    ? box.width / aspect.ratio
-                    : box.contentWidth / aspect.ratio + box.verticalExtra);
+            else {
+                content = ratioContent(box, contentBottom(box) + box.verticalExtra);
+                remember(box, ctx, width, containingWidth, 'content', content);
             }
             // within what the ratio makes of its least and greatest widths
             if (box.kind !== 'replaced') {
                 content = transferredHeight(box, content, containingWidth);
             }
-            least = Math.min(laid.height, content);
+            least = Math.min(height, content);
             const extra = style.boxSizing === 'border-box' ? 0 : box.verticalExtra;
             if (style.maxHeight !== 'none') {
                 const most = resolveOrNull(style.maxHeight, NaN);
                 if (most !== null)
                     least = Math.min(least, most + extra);
             }
-            if (node.getComputedHeight() >= least - 0.01)
+            if (laid.main >= least - 0.01)
                 continue;
-            node.setMinHeight(least);
+            holdAt(node, laid, row, least, hold);
         }
         changed = true;
     }
     return changed;
 }
+/** A laid-out item's content height, its border box's: no less than its
+ *  width through its ratio, height of its own or not (CSS Sizing 4, 5.1). */
+function ratioContent(box, content) {
+    const aspect = box.style.aspectRatio;
+    if (!aspect || box.kind === 'replaced')
+        return content;
+    return Math.max(content, box.style.boxSizing === 'border-box'
+        ? box.width / aspect.ratio
+        : box.contentWidth / aspect.ratio + box.verticalExtra);
+}
+/**
+ * Hold an item to its least size along the main axis, the size Yoga gave
+ * it being under that. It is frozen there, as CSS Flexbox freezes an item
+ * its minimum stops (9.7, step 4): inflexible, at that size, the rest of
+ * the line sharing what is left. Handed the minimum as a `min-width`
+ * alone, Yoga makes it the item's flex base size, which is two things the
+ * specification does not do:
+ *
+ * - where the line has room to share out, the item takes its share on top
+ *   of the minimum: of three `flex: 1` items in 300 pixels, the one with a
+ *   word 200 wide was 233, where it is 200 and the others 50 each;
+ * - where every item of a line is held, Yoga divides what the line is
+ *   short of by what is left of the shrink factors once it has taken each
+ *   item's away — nothing, or a float's rounding of it. Two items 110.992
+ *   and 62.706 pixels wide in a row too narrow for them came out billions
+ *   of pixels wide, and 31.3 and 17.7 came out as they are: by the digits
+ *   of their sizes, which are a text's widths in whatever font it is set.
+ *
+ * On the one line of a box that does not wrap, an item Yoga had under its
+ * minimum has no more room when another is held too, so frozen is where it
+ * ends. In a box that wraps it may have: the minimums move the line breaks
+ * (9.3), and an item held on a crowded line may be on one with room to
+ * grow in once they have. There the minimum is left to Yoga, as a minimum;
+ * only a line of one item is short of room there, and what Yoga takes away
+ * from its shrink factors is exactly what it added.
+ */
+function holdAt(node, laid, row, least, hold) {
+    if (row)
+        node.setMinWidth(least);
+    else
+        node.setMinHeight(least);
+    if (!hold.frozen)
+        return;
+    laid.auto = true;
+    freezeAt(node, laid, row, least, hold);
+}
+/** Freeze an item at a size along the main axis: inflexible, and that size
+ *  its flex base size. */
+function freezeAt(node, laid, row, size, hold) {
+    laid.held = size;
+    node.setFlexGrow(0);
+    node.setFlexShrink(0);
+    if (hold.basis)
+        node.setFlexBasis(size);
+    else if (row)
+        node.setWidth(size);
+    else
+        node.setHeight(size);
+}
+/**
+ * Put right the one line of a box that does not wrap, where every item of
+ * it that may shrink is stopped by its minimum and Yoga made them wider for
+ * it; whether Yoga was asked again. The line is laid out with each of them
+ * frozen at its minimum, which is where CSS Flexbox leaves them (9.7, step
+ * 4): the line is short of room with every one of them as small as it
+ * goes.
+ *
+ * Yoga shares what a line is short of in two passes. The first takes each
+ * item a minimum stops out of the sum of the scaled shrink factors, one
+ * subtraction an item, and the second divides what the line is still short
+ * of by what is left of the sum. With every item stopped that is nothing:
+ * `(a + b) - a - b`, in float32s, which is 0 for some sizes and a rounding
+ * either side of it for others, 2^-18 for sizes about a hundred. Yoga
+ * 3.2.1 tests for 0, and the guard it has had since, a sum under 1e-6, is
+ * under that rounding (react/yoga#1665, #1974). A negative rounding sends
+ * every item under its minimum, which stops it, and a positive one makes
+ * each of them wider by billions of pixels: `width: 110.992px; min-width:
+ * 110.992px` beside `62.705625px` of the same, in a row 50 wide, were
+ * 3599091712 and 2033329408 wide, where 100 and 60 were as they are. So
+ * were two items with no minimum but their padding, and two with
+ * `min-width: 0` beside one that does not shrink and is wider than the row
+ * alone.
+ *
+ * A minimum of the item's own is Yoga's to hold it to, so this looks at
+ * its answer, for a line that is two things at once. It is short of room
+ * with every item that may shrink at its minimum — where 9.7 leaves each
+ * of them at that, whatever their sizes. And one of them is wider than its
+ * hypothetical size (9.7, step 2), which no sharing out of what a line is
+ * short of makes an item: Yoga is asked for the line with nothing
+ * shrinking, where each item is that size. Any other line is put back as
+ * it was, the two layouts that took being the cost of one that is short of
+ * room at its minimums and was not shared out to them; a line with room
+ * for its minimums, or one whose every item sits at its own, has cost the
+ * sum of its sizes.
+ *
+ * An automatic minimum is no part of it: an item held at one is frozen
+ * already (`holdAt`), and one not yet held has no minimum to Yoga but its
+ * padding and border, where this leaves it for `autoMinimums` to find
+ * short of its content.
+ */
+function stoppedLine(items, row, 
+/** The flex box's size along the main axis. */
+room, 
+/** The gap between two items. */
+gap, hold, 
+/** Lay the flex box out, as its nodes now are. */
+ask) {
+    // what is between the items' border boxes: the gaps, and their margins
+    let between = gap * (items.length - 1);
+    // the line's size with each item that may shrink at its minimum
+    let least = 0;
+    let shrinking = 0;
+    let over = false;
+    for (const { box, laid } of items) {
+        const style = box.style;
+        // an `auto` margin is none on a line with no room (8.1)
+        if (row) {
+            if (style.marginLeft !== AUTO)
+                between += box.marginLeft;
+            if (style.marginRight !== AUTO)
+                between += box.marginRight;
+        }
+        else {
+            if (style.marginTop !== AUTO)
+                between += box.marginTop;
+            if (style.marginBottom !== AUTO)
+                between += box.marginBottom;
+        }
+        if (!shrinks(box, laid))
+            least += laid.main;
+        else {
+            const min = leastOf(box, laid, row);
+            shrinking += 1;
+            least += min;
+            if (laid.main > min + 0.01)
+                over = true;
+        }
+    }
+    // two at the least: what is left of a sum of one, less it, is 0 exactly.
+    // A line within a thousandth of a pixel of room is short of it: what
+    // Yoga makes of that is as far out, and the minimums are that near
+    if (shrinking < 2 || !over || !(between + least > room - SHORT)) {
+        return false;
+    }
+    const stopped = items.filter(({ box, laid }) => shrinks(box, laid));
+    for (const { node } of stopped)
+        node.setFlexShrink(0);
+    ask();
+    // each item its hypothetical size, which one that does not shrink is on
+    // a line short of room — where Yoga may have grown it, on a line it took
+    // for having some
+    let wider = false;
+    least = 0;
+    for (const { box, node, laid } of items) {
+        const hypothetical = row
+            ? node.getComputedWidth()
+            : node.getComputedHeight();
+        if (!shrinks(box, laid))
+            least += hypothetical;
+        else {
+            least += leastOf(box, laid, row);
+            if (laid.main > hypothetical && !nearly(laid.main, hypothetical)) {
+                wider = true;
+            }
+        }
+    }
+    const freeze = wider && between + least > room - SHORT;
+    for (const { box, node, laid } of stopped) {
+        if (freeze)
+            freezeAt(node, laid, row, leastOf(box, laid, row), hold);
+        else
+            node.setFlexShrink(box.style.flexShrink);
+    }
+    ask();
+    return true;
+}
+/** Whether Yoga may shrink an item: it has a shrink factor, and is not
+ *  frozen (`freezeAt`). */
+function shrinks(box, laid) {
+    return box.style.flexShrink > 0 && Number.isNaN(laid.held);
+}
+/** How near to its room a line may be and be short of it (`stoppedLine`). */
+const SHORT = 0.001;
+/** The least an item may be along the main axis, its border box: the
+ *  minimum of its own, and no less than its padding and borders. */
+function leastOf(box, laid, row) {
+    const extra = row ? box.horizontalExtra : box.verticalExtra;
+    return Number.isNaN(laid.least) ? extra : Math.max(laid.least, extra);
+}
 /** An item's min-content width, its border box's, taken the once: its
  *  content's, whatever width it has of its own (`keywordWidth`'s too). */
 function minContentOf(box, ctx, laid) {