@react-x11/components 0.8.0 → 0.10.0

package/dist/html/layout/css-grid.js

@@ -0,0 +1,900 @@
+// `display: grid`, the subset documents are written in (CSS Grid 1).
+//
+// Tailwind's `grid grid-cols-3 gap-4`, a card list of `repeat(auto-fill,
+// minmax(16rem, 1fr))`, a sidebar and a column in `16rem 1fr`, a page of
+// `auto 1fr auto` rows: tracks of lengths, percentages, `fr`s, `auto`,
+// `minmax()` and `fit-content()`, with `repeat()` by a count or by what
+// fits, sized by what is in them as the track sizing algorithm has it
+// (`tracks.ts`); items placed by line, span, name or area, or in order into
+// the first cell free along the rows or down the columns, `dense` or not
+// (the lines and their names are `grid-lines.ts`'s); gaps; the tracks
+// placed by `justify-content` and `align-content`; and each item stretched
+// to its area or aligned in it. Not here: subgrids, and baseline
+// alignment.
+//
+// A grid container is a flex container to the box tree (`display: grid`
+// reads as `flex` and sets `ComputedStyle.grid`): its children are the
+// same blockified items, it holds its floats, and `flex.ts` hands it here.
+// Unlike flex, the algorithm is written out rather than handed to Yoga,
+// which has none; what it needs of an item — its width at no limit and at
+// the smallest, and its height at a width — is what tables already ask.
+import { AUTO, gapOf, isPct, resolve, resolveOrNull } from '../css/values.js';
+import { scrolls } from '../css/style.js';
+import { Box, GRID_TRACKS, isBlank } from './boxes.js';
+import { FLEXED_HEIGHT, MIN_CONTENT_PROBE, clampHeight, clampWidth, exactMinContent, heightThroughRatio, measureIntrinsicWidth, moveTo, percentBaseInside, percentHeightsIn, positionOutOfFlow, resolveEdges, widthThroughRatio, } from './block.js';
+import { gridLines, placement } from './grid-lines.js';
+import { sizeTracks } from './tracks.js';
+/**
+ * Lay out a grid container's children. Returns the content height.
+ */
+export function layoutGrid(box, ctx, contentWidth) {
+    const style = box.style;
+    const boxes = [];
+    for (const child of box.children) {
+        if (child.kind === 'text' && isBlank(child.text))
+            continue;
+        if (child.outOfFlow) {
+            // where it is as the grid's one item, in an area whose edges are the
+            // grid's padding edges (9.1)
+            positionOutOfFlow(child, box, ctx, false);
+            continue;
+        }
+        resolveEdges(child, Number.isFinite(contentWidth) ? contentWidth : 0);
+        boxes.push(child);
+    }
+    // the gaps: a percentage of the grid's content size along them, and of
+    // nothing where that is not known yet (CSS Box Alignment 3, 8.3)
+    const colGap = gapOf(style.columnGap, contentWidth);
+    let rowGap = gapOf(style.rowGap, percentBaseInside(box));
+    // the explicit grid: the templates' tracks, and as many more as the
+    // areas need, sized as the ones the placement makes past it are
+    const areas = style.gridAreas;
+    // a height of the grid's own, which the rows' `repeat()` counts against
+    const definite = percentBaseInside(box);
+    const template = trackList(style.gridColumns, contentWidth, colGap);
+    const rowList = trackList(style.gridRows, definite, rowGap);
+    const explicitCols = Math.max(template.tracks.length, areas?.columns ?? 0);
+    const explicitRows = Math.max(rowList.tracks.length, areas?.rows ?? 0);
+    const colLines = gridLines(explicitCols, template.names, areas, 'columns');
+    const rowLines = gridLines(explicitRows, rowList.names, areas, 'rows');
+    const items = place(boxes, colLines, rowLines, style.gridAutoFlow);
+    // every row the explicit grid has, whether or not an item is in it
+    const allRows = items.reduce((n, item) => Math.max(n, item.row + item.rows), explicitRows);
+    const explicit = rowList.tracks;
+    const cols = template.tracks.slice();
+    // an item placed past the explicit grid makes tracks of its own
+    const widest = items.reduce((n, item) => Math.max(n, item.col + item.cols), Math.max(1, explicitCols));
+    while (cols.length < widest)
+        cols.push(style.gridAutoColumns);
+    // An `auto-fit` repetition no item is in collapses (7.2.3.2): it is out
+    // of the sizing and the distribution, and the gaps on either side of it
+    // are one. The items are placed in the tracks that stay, and the ones
+    // that go are put back as nothing where the lines are read.
+    const keepCols = keptTracks(cols.length, template.fit, items, true);
+    const keepRows = keptTracks(allRows, rowList.fit, items, false);
+    const rowDefs = [];
+    for (let r = 0; r < allRows; r += 1) {
+        if (keepRows?.[r] ?? true)
+            rowDefs.push(explicit[r] ?? style.gridAutoRows);
+    }
+    if (keepCols) {
+        const kept = cols.filter((_, c) => keepCols[c]);
+        cols.length = 0;
+        cols.push(...kept);
+    }
+    if (keepCols || keepRows) {
+        const colAt = indexOfKept(keepCols);
+        const rowAt = indexOfKept(keepRows);
+        for (const item of items) {
+            if (colAt)
+                item.col = colAt[item.col];
+            if (rowAt)
+                item.row = rowAt[item.row];
+        }
+    }
+    const rowCount = rowDefs.length;
+    // While the columns are sized, a row whose greatest size is a length is
+    // that size, and any other has none (CSS Grid 1, 12.1): what an item's
+    // height is then, where it is one — which a ratio makes a width of
+    const fixedRows = [];
+    for (let r = 0; r < rowCount; r += 1) {
+        const { max } = sizing(rowDefs[r], definite);
+        fixedRows.push(typeof max === 'number' ? max : null);
+    }
+    const spanBefore = (item) => {
+        let span = rowGap * Math.max(0, item.rows - 1);
+        for (let r = item.row; r < item.row + item.rows; r += 1) {
+            const fixed = fixedRows[r];
+            if (fixed === null || fixed === undefined)
+                return NaN;
+            span += fixed;
+        }
+        return span;
+    };
+    const heightBefore = (item) => heightBeforeRows(item.box, spanBefore(item));
+    // An item's percentage heights are of its area's, which the rows it
+    // spans are, rather than the grid's: of that where they are known now,
+    // and of nothing — `auto` — where they are not, until they are
+    for (const item of items)
+        item.box.percentHeightBase = spanBefore(item);
+    const measure = (item) => {
+        if (item.max >= 0)
+            return;
+        const box = item.box;
+        const margins = box.marginLeft + box.marginRight;
+        // Measured once in the box's life, as a table cell's are: measured for
+        // every layout of the grid, a grid in a grid in a grid laid out its
+        // innermost three times a level, and twelve levels took two thirds of
+        // a second.
+        const style = box.style;
+        let widest;
+        let narrowest;
+        if (typeof style.width === 'number') {
+            // a length for a width is its width at its narrowest and its widest
+            // — measured at no limit, it was its content's
+            const extra = style.boxSizing === 'border-box' ? 0 : box.horizontalExtra;
+            widest = narrowest = Math.max(style.width + extra, box.horizontalExtra);
+        }
+        else {
+            const fresh = box.intrinsicMaxContent < 0;
+            widest = maxContentOf(box, ctx);
+            if (box.intrinsicMinContent < 0) {
+                // where its words say it exactly, read from the layout just made —
+                // which is the max-content one only if it was made just now
+                const exact = fresh && ctx.fonts ? exactMinContent(box, ctx.fonts) : null;
+                box.intrinsicMinContent =
+                    exact ?? measureIntrinsicWidth(box, ctx, MIN_CONTENT_PROBE);
+            }
+            narrowest = box.intrinsicMinContent;
+        }
+        // an item with a ratio and a height is as wide as that makes it, its
+        // content's sizes both (CSS Sizing 4, 5.1) — and one that is not
+        // replaced no narrower for it than its content at its narrowest, where
+        // it shows what overflows it (5.2). A scroll container's sizes are
+        // none of its content's, and take nothing from its ratio either.
+        if (typeof style.width !== 'number' &&
+            (box.kind === 'replaced' || !scrolls(style))) {
+            const tall = heightBefore(item);
+            const wide = tall === null ? null : widthThroughRatio(box, tall);
+            if (wide !== null) {
+                widest = narrowest =
+                    box.kind === 'replaced' || !showsOverflow(box)
+                        ? wide
+                        : Math.max(wide, narrowest);
+            }
+        }
+        // a width of its content's is that at its narrowest and its widest
+        if (style.widthKeyword === 'min-content')
+            widest = narrowest;
+        else if (style.widthKeyword === 'max-content')
+            narrowest = widest;
+        // within its own least and greatest widths
+        const [least, most] = ownWidths(box, narrowest, widest);
+        item.max = Math.min(most, Math.max(least, widest)) + margins;
+        item.min = Math.min(most, Math.max(least, narrowest)) + margins;
+    };
+    const colTracks = cols.map((track) => sizing(track, contentWidth));
+    const widths = sizeTracks(colTracks, items.map((item) => ({
+        start: item.col,
+        span: item.cols,
+        minContent: () => (measure(item), item.min),
+        maxContent: () => (measure(item), item.max),
+        minimum: () => leastWidth(item, colTracks, colGap, measure),
+    })), {
+        available: contentWidth,
+        least: 0,
+        gap: colGap,
+        stretch: style.justifyContent === 'normal' || style.justifyContent === 'stretch',
+    });
+    const lefts = starts(widths, colGap, style.justifyContent, contentWidth);
+    // each item at its area's width, for its height
+    for (const item of items) {
+        layoutItem(item, extent(widths, lefts, item.col, item.cols), ctx, heightBefore(item));
+    }
+    // a height of the grid's own, or else the least it may be, which the
+    // `fr` rows and the `auto` ones fill
+    const own = Number.isFinite(definite);
+    const least = own ? 0 : leastHeight(box);
+    // the rows against a height: percentages of it, or `auto` without one
+    const sizeRows = (base, available, atLeast) => {
+        const rowTracks = [];
+        for (let r = 0; r < rowCount; r += 1) {
+            rowTracks.push(sizing(rowDefs[r], base));
+        }
+        return sizeTracks(rowTracks, items.map((item) => rowItem(item, rowTracks, rowGap)), {
+            available,
+            least: atLeast,
+            gap: rowGap,
+            stretch: style.alignContent === 'stretch',
+        });
+    };
+    let heights = sizeRows(definite, own ? definite : Infinity, least);
+    // with no height of its own, the grid is as tall as its rows come to with
+    // their percentages `auto`, and the percentages are of that (7.2.1)
+    if (!own && [...explicit, style.gridAutoRows].some(percentTrack)) {
+        let tall = rowGap * Math.max(0, heights.length - 1);
+        for (const h of heights)
+            tall += h;
+        tall = Math.max(tall, least);
+        heights = sizeRows(tall, tall, 0);
+    }
+    let height = rowGap * Math.max(0, heights.length - 1);
+    for (const h of heights)
+        height += h;
+    // with no height of its own, a percentage gap is of the height its rows
+    // come to without it, and the rows are placed with it where the grid is
+    // that tall
+    if (!own && isPct(style.rowGap)) {
+        rowGap = gapOf(style.rowGap, Math.max(height, least));
+    }
+    // the rows are placed in the grid's height — which one from its
+    // `aspect-ratio` grows to what it holds (CSS Sizing 4, 5.2) — or with no
+    // height of its own, in its least height or its rows'
+    const grows = own &&
+        style.height === AUTO &&
+        style.aspectRatio !== null &&
+        style.minHeight === AUTO;
+    const room = own && !grows ? definite : Math.max(own ? definite : least, height);
+    const tops = starts(heights, rowGap, style.alignContent, room);
+    // an item that takes a percentage of its area's height, which is known
+    // now, is laid out again with it
+    for (const item of items) {
+        const child = item.box;
+        const tall = extent(heights, tops, item.row, item.rows);
+        if (Object.is(child.percentHeightBase, tall) || !percentOwn(child))
+            continue;
+        child.percentHeightBase = tall;
+        layoutItem(item, extent(widths, lefts, item.col, item.cols), ctx, heightBeforeRows(child, tall));
+    }
+    GRID_TRACKS.set(box, {
+        cols: tracksOf(widths, lefts, keepCols),
+        rows: tracksOf(heights, tops, keepRows),
+        colLines,
+        rowLines,
+    });
+    for (const item of items) {
+        const child = item.box;
+        const area = extent(widths, lefts, item.col, item.cols);
+        const tall = extent(heights, tops, item.row, item.rows);
+        const justify = child.style.justifySelf === 'auto'
+            ? style.justifyItems
+            : child.style.justifySelf;
+        const align = child.style.alignSelf === AUTO ? style.alignItems : child.style.alignSelf;
+        const outerWidth = child.width + child.marginLeft + child.marginRight;
+        const outerHeight = child.height + child.marginTop + child.marginBottom;
+        // `auto` margins take the free space in the area first (CSS Grid 1,
+        // 10.2), and an item with them is not stretched
+        const [left, right] = autoMargins(child, 'x');
+        const [top, bottom] = autoMargins(child, 'y');
+        let dx = 0;
+        if (left || right) {
+            dx = (area - outerWidth) * (left && right ? 0.5 : left ? 1 : 0);
+        }
+        else if (justify === 'center')
+            dx = (area - outerWidth) / 2;
+        else if (justify === 'flex-end')
+            dx = area - outerWidth;
+        let dy = 0;
+        if (top || bottom) {
+            dy = (tall - outerHeight) * (top && bottom ? 0.5 : top ? 1 : 0);
+        }
+        else if (align === 'center')
+            dy = (tall - outerHeight) / 2;
+        else if (align === 'flex-end')
+            dy = tall - outerHeight;
+        else if ((align === 'stretch' || align === 'baseline') &&
+            child.style.height === AUTO &&
+            !child.style.heightKeyword &&
+            (child.style.alignSelf === 'stretch' ||
+                (child.kind !== 'replaced' && !child.style.aspectRatio))) {
+            // a stretched item is its area's height, within its own least and
+            // greatest (10.3): taller than what it holds, or shorter where its
+            // tracks let it be, what it holds then running past it. An image, a
+            // control or a box with an `aspect-ratio` keeps its own height, as
+            // `normal` has one with a natural size or a ratio — which is what
+            // the grid's `stretch` may be, and the item's own may not.
+            const stretched = tall - child.marginTop - child.marginBottom;
+            const height = clampHeight(child, Math.max(stretched, child.verticalExtra));
+            // and one with a ratio that is not stretched across is as wide as
+            // that height makes it (CSS Sizing 4, 5.1)
+            const wide = child.style.width === AUTO &&
+                !child.style.widthKeyword &&
+                !(justify === 'stretch' && !left && !right) &&
+                height !== child.height
+                ? widthThroughRatio(child, height)
+                : null;
+            const width = wide === null ? child.width : clampWidth(child, wide, area, ctx);
+            // what is in it takes its percentages of that height, which a
+            // stretch makes definite, as it does a flex item's
+            if (child.kind !== 'replaced' &&
+                (wide !== null || percentHeightsIn(child))) {
+                FLEXED_HEIGHT.set(child, Math.max(0, height - child.verticalExtra));
+                try {
+                    ctx.layoutSubtree(child, width);
+                }
+                finally {
+                    FLEXED_HEIGHT.delete(child);
+                }
+            }
+            child.width = width;
+            child.height = height;
+        }
+        moveTo(child, box.contentX + lefts[item.col] + child.marginLeft + Math.max(0, dx), box.contentY + tops[item.row] + child.marginTop + Math.max(0, dy));
+    }
+    return height;
+}
+/** An axis's explicit tracks and the names of their lines, a `repeat()`
+ *  of what fits counted out against its size where it has one, and once
+ *  where it has none (CSS Grid 1, 7.2.3.2). */
+function trackList(template, width, gap) {
+    if (!template)
+        return { tracks: [], names: [[]], fit: null };
+    const { repeat } = template;
+    if (!repeat) {
+        return { tracks: template.tracks, names: template.names, fit: null };
+    }
+    const outer = template.tracks;
+    const unit = repeat.tracks;
+    // what one repetition takes: its tracks' maximums where those are
+    // lengths, and their minimums where not (7.2.3.2)
+    const base = Number.isFinite(width) ? width : 0;
+    const fixed = (track) => lengthOf(track.max, base) ?? lengthOf(track.min, base) ?? 0;
+    const others = outer.reduce((sum, t) => sum + fixed(t), 0);
+    const each = unit.reduce((sum, t) => sum + fixed(t), 0);
+    let count = 1;
+    if (Number.isFinite(width) && each > 0) {
+        const room = width - others - gap * outer.length;
+        count = Math.max(1, Math.floor((room + gap) / (each + gap * unit.length)));
+    }
+    // the repetitions' lines where they meet carry the names of both sides
+    const tracks = [];
+    const names = [];
+    for (let i = 0; i < repeat.at; i += 1) {
+        names.push(template.names[i]);
+        tracks.push(outer[i]);
+    }
+    let line = [...template.names[repeat.at]];
+    for (let k = 0; k < Math.min(count, 1000); k += 1) {
+        line.push(...repeat.names[0]);
+        for (let j = 0; j < unit.length; j += 1) {
+            names.push(line);
+            tracks.push(unit[j]);
+            line = [...repeat.names[j + 1]];
+        }
+    }
+    line.push(...repeat.after);
+    for (let i = repeat.at; i < outer.length; i += 1) {
+        names.push(line);
+        tracks.push(outer[i]);
+        line = [...template.names[i + 1]];
+    }
+    names.push(line);
+    const repeated = Math.min(count, 1000) * unit.length;
+    return {
+        tracks,
+        names,
+        fit: repeat.fit ? [repeat.at, repeat.at + repeated] : null,
+    };
+}
+/**
+ * Place the items (CSS Grid 1, 8.5): an item with both its lines where it
+ * says; one that names only the lines across the flow — its row, where the
+ * grid fills its rows — in the first place free along them, past the ones
+ * placed there before it; and the rest in order from a cursor that moves
+ * along the flow and on to the next line of it — to the next where an
+ * item's own line is before it — or, `dense`, from the start each time.
+ * `grid-auto-flow: column` is the same with the axes turned round.
+ */
+function place(boxes, cols, rows, flow) {
+    const byColumn = flow.startsWith('column');
+    const dense = flow.endsWith('dense');
+    // in the flow's terms: `a` along it, `b` across it
+    const taken = [];
+    const free = (b, a, bs, as) => {
+        for (let r = b; r < b + bs; r += 1) {
+            for (let c = a; c < a + as; c += 1)
+                if (taken[r]?.[c])
+                    return false;
+        }
+        return true;
+    };
+    const take = (b, a, bs, as) => {
+        for (let r = b; r < b + bs; r += 1) {
+            const line = (taken[r] ??= []);
+            for (let c = a; c < a + as; c += 1)
+                line[c] = true;
+        }
+    };
+    const placed = boxes.map((box) => {
+        const style = box.style;
+        const [col, colSpan] = placement(style.gridColumnStart, style.gridColumnEnd, cols);
+        const [row, rowSpan] = placement(style.gridRowStart, style.gridRowEnd, rows);
+        return byColumn
+            ? { box, a: row ?? -1, as: rowSpan, b: col ?? -1, bs: colSpan }
+            : { box, a: col ?? -1, as: colSpan, b: row ?? -1, bs: rowSpan };
+    });
+    // 1. what says both where it goes
+    for (const p of placed)
+        if (p.a >= 0 && p.b >= 0)
+            take(p.b, p.a, p.bs, p.as);
+    // 2. what says only which line of the flow
+    const past = new Map();
+    for (const p of placed) {
+        if (p.b < 0 || p.a >= 0)
+            continue;
+        let a = dense ? 0 : (past.get(p.b) ?? 0);
+        while (!free(p.b, a, p.bs, p.as) && a < 10_000)
+            a += 1;
+        p.a = a;
+        take(p.b, a, p.bs, p.as);
+        past.set(p.b, a + p.as);
+    }
+    // 3. how long a line of the flow is: the explicit grid's, and as long as
+    // the items with a place along it and the longest span without one need
+    let length = byColumn ? rows.tracks : cols.tracks;
+    for (const p of placed)
+        length = Math.max(length, p.a >= 0 ? p.a + p.as : p.as);
+    // 4. the rest, in order, from the cursor
+    let cursorB = 0;
+    let cursorA = 0;
+    for (const p of placed) {
+        if (p.b >= 0)
+            continue;
+        if (dense) {
+            cursorB = 0;
+            cursorA = 0;
+        }
+        if (p.a >= 0) {
+            let b = p.a < cursorA ? cursorB + 1 : cursorB;
+            while (!free(b, p.a, p.bs, p.as))
+                b += 1;
+            p.b = b;
+        }
+        else {
+            let b = cursorB;
+            let a = cursorA;
+            for (;;) {
+                if (a + p.as > length) {
+                    b += 1;
+                    a = 0;
+                    continue;
+                }
+                if (free(b, a, p.bs, p.as))
+                    break;
+                a += 1;
+            }
+            p.b = b;
+            p.a = a;
+        }
+        take(p.b, p.a, p.bs, p.as);
+        cursorB = p.b;
+        cursorA = p.a + p.as;
+    }
+    return placed.map((p) => byColumn
+        ? {
+            box: p.box,
+            row: p.a,
+            rows: p.as,
+            col: p.b,
+            cols: p.bs,
+            min: -1,
+            max: -1,
+        }
+        : {
+            box: p.box,
+            row: p.b,
+            rows: p.bs,
+            col: p.a,
+            cols: p.as,
+            min: -1,
+            max: -1,
+        });
+}
+/** A track's minimum or maximum where it is a length or a percentage of
+ *  `base`, never below zero; null where it is content or an `fr`. */
+function lengthOf(len, base) {
+    if (typeof len === 'number')
+        return Math.max(0, len);
+    if (typeof len === 'object' &&
+        len !== null &&
+        !('fr' in len) &&
+        !('fit' in len) &&
+        isPct(len)) {
+        return Math.max(0, resolve(len, base));
+    }
+    return null;
+}
+/** The size of the tracks from one to `count` after it, the gaps and the
+ *  space distributed between them included. */
+function extent(sizes, at, from, count) {
+    const last = Math.min(sizes.length, from + count) - 1;
+    return last < from ? 0 : at[last] + sizes[last] - at[from];
+}
+/** An item's max-content width, its border box's: measured once in the
+ *  box's life, as a table cell's is (`Box.intrinsicMaxContent`). */
+function maxContentOf(box, ctx) {
+    if (box.intrinsicMaxContent < 0) {
+        box.intrinsicMaxContent = measureIntrinsicWidth(box, ctx, Infinity);
+    }
+    return box.intrinsicMaxContent;
+}
+/** Lay an item out in its area: stretched across it where its width is
+ *  `auto` and it is stretched, or at its content's width, no wider than
+ *  the area, where it is aligned instead. */
+function layoutItem(item, area, ctx, 
+/** Its border box's height before the rows are sized, where it has one. */
+tall) {
+    const child = item.box;
+    const style = child.style;
+    const parent = child.parent?.style;
+    const justify = style.justifySelf === 'auto'
+        ? (parent?.justifyItems ?? 'normal')
+        : style.justifySelf;
+    const margins = child.marginLeft + child.marginRight;
+    const room = Math.max(0, area - margins);
+    // its content's widths, border box: measured once in its life
+    const content = () => {
+        if (child.intrinsicMaxContent < 0)
+            maxContentOf(child, ctx);
+        if (child.intrinsicMinContent < 0) {
+            child.intrinsicMinContent = measureIntrinsicWidth(child, ctx, MIN_CONTENT_PROBE);
+        }
+        return [child.intrinsicMinContent, child.intrinsicMaxContent];
+    };
+    const keyword = style.widthKeyword;
+    // `stretch` fills its area, and so does `normal` but for a replaced
+    // element, which it sizes as a block's is: a box with a ratio is as wide
+    // as a block would be where it has no height yet (CSS Grid 1, 6.2)
+    const across = (justify === 'stretch' ||
+        (justify === 'normal' && child.kind !== 'replaced')) &&
+        !autoMargins(child, 'x').some(Boolean);
+    // a height it has already, through a ratio: its width, whatever its
+    // content says, where `stretch` does not fill its area (CSS Sizing 4,
+    // 5.1)
+    const fills = justify === 'stretch' && !autoMargins(child, 'x').some(Boolean);
+    const through = style.width === AUTO && !fills && tall !== null
+        ? widthThroughRatio(child, tall)
+        : null;
+    let width;
+    if (style.width !== AUTO) {
+        const extra = style.boxSizing === 'border-box' ? 0 : child.horizontalExtra;
+        width = resolve(style.width, area, room - extra) + extra;
+    }
+    else if (through !== null) {
+        width = clampWidth(child, through, area, ctx);
+        // and no narrower than its content where it shows what overflows it
+        // (5.2), as a block with a ratio is
+        if (child.kind !== 'replaced' && showsOverflow(child) && !keyword) {
+            width = Math.max(width, content()[0]);
+        }
+    }
+    else if (keyword) {
+        // a width of its content's is that, whatever aligns it
+        const [narrowest, widest] = content();
+        const fit = typeof keyword === 'object'
+            ? resolve(keyword.fit, area, room) + child.horizontalExtra
+            : room;
+        width =
+            keyword === 'stretch'
+                ? room
+                : keyword === 'min-content'
+                    ? narrowest
+                    : keyword === 'max-content'
+                        ? widest
+                        : Math.min(widest, Math.max(narrowest, fit));
+    }
+    else if (across) {
+        width = room;
+    }
+    else {
+        // fit-content: no wider than its content at its widest, nor narrower
+        // than at its narrowest, which may run past its area
+        const [narrowest, widest] = content();
+        width = Math.min(widest, Math.max(narrowest, room));
+    }
+    if (child.kind !== 'replaced') {
+        ctx.layoutSubtree(child, width);
+        return;
+    }
+    // a replaced element sizes itself from its style: then it is given the
+    // width it was stretched to, or the one its height makes, and the height
+    // its ratio makes of that width where it has none of its own
+    ctx.layoutSubtree(child, area);
+    if (style.width !== AUTO || keyword)
+        return;
+    if (through !== null) {
+        child.width = width;
+        child.height = tall;
+    }
+    else if (fills) {
+        child.width = clampWidth(child, width, area, ctx);
+        const down = style.height === AUTO ? heightThroughRatio(child, child.width) : null;
+        if (down !== null)
+            child.height = clampHeight(child, down);
+    }
+}
+/** Whether a box's content is its least size through a ratio, which it is
+ *  where the box shows what overflows it and its least width is `auto`
+ *  (CSS Sizing 4, 5.2). */
+function showsOverflow(box) {
+    const style = box.style;
+    return (style.minWidth === AUTO &&
+        !style.minWidthKeyword &&
+        (style.overflowX === 'visible' || style.overflowX === 'clip') &&
+        (style.overflowY === 'visible' || style.overflowY === 'clip'));
+}
+/** Which tracks of an axis stay: all but those of an `auto-fit`
+ *  repetition that no item is in, which collapse (CSS Grid 1, 7.2.3.2).
+ *  Null where they all stay. */
+function keptTracks(count, fit, items, columns) {
+    if (!fit)
+        return null;
+    const used = new Array(count).fill(false);
+    for (const item of items) {
+        const from = columns ? item.col : item.row;
+        const span = columns ? item.cols : item.rows;
+        for (let t = from; t < Math.min(count, from + span); t += 1)
+            used[t] = true;
+    }
+    let collapsed = false;
+    const keep = used.map((inUse, t) => {
+        const stays = inUse || t < fit[0] || t >= fit[1];
+        if (!stays)
+            collapsed = true;
+        return stays;
+    });
+    return collapsed ? keep : null;
+}
+/** Where each track that stays is among those that do. */
+function indexOfKept(keep) {
+    if (!keep)
+        return null;
+    const at = [];
+    let n = 0;
+    for (const stays of keep) {
+        at.push(n);
+        if (stays)
+            n += 1;
+    }
+    return at;
+}
+/** Each track's start and end, the collapsed ones back among the others
+ *  as nothing, at the end of the one before. */
+function tracksOf(sizes, at, keep) {
+    if (!keep)
+        return sizes.map((size, i) => [at[i], at[i] + size]);
+    const out = [];
+    let edge = at.length ? at[0] : 0;
+    let k = 0;
+    for (const stays of keep) {
+        if (stays) {
+            out.push([at[k], at[k] + sizes[k]]);
+            edge = at[k] + sizes[k];
+            k += 1;
+        }
+        else
+            out.push([edge, edge]);
+    }
+    return out;
+}
+/** Whether a box's own height, least or greatest, is a percentage. */
+function percentOwn(box) {
+    const style = box.style;
+    return (isPct(style.height) ||
+        isPct(style.minHeight) ||
+        (style.maxHeight !== 'none' && isPct(style.maxHeight)));
+}
+/**
+ * An item's border-box height before the rows are sized, where it has one
+ * then: a height of its own — a percentage of the rows it spans where they
+ * have a length for a size — or the rows' where it is stretched down them
+ * by its own `align-self`. Null where it has none, which is where its
+ * height is its content's.
+ */
+function heightBeforeRows(box, rows) {
+    const style = box.style;
+    const own = resolveOrNull(style.height, rows);
+    if (own !== null && Number.isFinite(own)) {
+        return clampHeight(box, style.boxSizing === 'border-box'
+            ? Math.max(own, box.verticalExtra)
+            : own + box.verticalExtra);
+    }
+    if (style.height === AUTO &&
+        !style.heightKeyword &&
+        style.alignSelf === 'stretch' &&
+        Number.isFinite(rows) &&
+        !autoMargins(box, 'y').some(Boolean)) {
+        const room = rows - box.marginTop - box.marginBottom;
+        return clampHeight(box, Math.max(room, box.verticalExtra));
+    }
+    return null;
+}
+/** A track's sizing functions, its lengths resolved against the size of the
+ *  axis: a percentage of a size the tracks are still finding is `auto`
+ *  (CSS Grid 1, 7.2.1), and `fit-content()` of one its content's widest. */
+function sizing(track, base) {
+    const length = (len) => typeof len === 'number'
+        ? Math.max(0, len)
+        : len === AUTO || !Number.isFinite(base)
+            ? null
+            : Math.max(0, resolve(len, base));
+    const { min, max } = track;
+    const least = min === 'min-content' || min === 'max-content'
+        ? min
+        : (length(min) ?? 'auto');
+    let most;
+    if (max === 'min-content' || max === 'max-content')
+        most = max;
+    else if (typeof max === 'object' && max !== null && 'fr' in max) {
+        most = { fr: max.fr };
+    }
+    else if (typeof max === 'object' && max !== null && 'fit' in max) {
+        const fit = length(max.fit);
+        most = fit === null ? 'max-content' : { fit };
+    }
+    else
+        most = length(max) ?? 'auto';
+    return { min: least, max: most };
+}
+/** An item's own least and greatest border-box widths, where they are
+ *  lengths or its content's: a percentage of the area the tracks are still
+ *  being sized for is none (CSS Sizing 3, 5.2.1). */
+function ownWidths(box, narrowest, widest) {
+    const style = box.style;
+    const extra = style.boxSizing === 'border-box' ? 0 : box.horizontalExtra;
+    const keyword = (k) => k === 'min-content' ? narrowest : k === 'max-content' ? widest : null;
+    const least = keyword(style.minWidthKeyword) ??
+        (typeof style.minWidth === 'number' ? style.minWidth + extra : 0);
+    const most = keyword(style.maxWidthKeyword) ??
+        (typeof style.maxWidth === 'number' ? style.maxWidth + extra : Infinity);
+    return [least, Math.max(least, most)];
+}
+/**
+ * The least an item makes the columns it is in (CSS Grid 1, 11.5, its
+ * "minimum contribution"): its narrowest where it has a width of its own,
+ * and its own least width where it has one of those.
+ */
+function leastWidth(item, tracks, gap, measure) {
+    const box = item.box;
+    const style = box.style;
+    const margins = box.marginLeft + box.marginRight;
+    measure(item);
+    if ((style.width !== AUTO && !isPct(style.width)) || style.widthKeyword) {
+        return item.min;
+    }
+    if (style.minWidthKeyword || style.minWidth !== AUTO) {
+        const [least] = ownWidths(box, box.intrinsicMinContent, box.intrinsicMaxContent);
+        return least + margins;
+    }
+    return (automaticMinimum(item.col, item.cols, tracks, gap, style.overflowX, margins, item.min - margins) + margins);
+}
+/**
+ * An item's automatic least size (CSS Grid 1, 6.6): its content's, where it
+ * shows what overflows it and is in an `auto` track — the only track, where
+ * one of them is an `fr` — and no larger than the tracks' lengths leave it
+ * room for where every one of them has a length for a maximum; else none.
+ */
+function automaticMinimum(start, count, tracks, gap, overflow, margins, content) {
+    // a scroll container has none; `clip` is not one (CSS Overflow 3, 3.1)
+    if (overflow !== 'visible' && overflow !== 'clip')
+        return 0;
+    const end = Math.min(tracks.length, start + count);
+    let auto = false;
+    let flexible = false;
+    let fixed = true;
+    let room = gap * Math.max(0, end - start - 1) - margins;
+    for (let t = start; t < end; t += 1) {
+        const { min, max } = tracks[t];
+        if (min === 'auto')
+            auto = true;
+        if (typeof max === 'object' && 'fr' in max)
+            flexible = true;
+        if (typeof max === 'number')
+            room += max;
+        else
+            fixed = false;
+    }
+    if (!auto || (flexible && end - start > 1))
+        return 0;
+    return Math.max(0, fixed ? Math.min(content, room) : content);
+}
+/** What an item makes of the rows it is in: its height at its area's
+ *  width, whichever the constraint, and the least it can be, as a
+ *  column's. */
+function rowItem(item, tracks, gap) {
+    const box = item.box;
+    const margins = box.marginTop + box.marginBottom;
+    const outer = () => box.height + margins;
+    return {
+        start: item.row,
+        span: item.rows,
+        minContent: outer,
+        maxContent: outer,
+        minimum: () => {
+            const style = box.style;
+            if (style.height !== AUTO && !isPct(style.height))
+                return outer();
+            if (style.minHeight !== AUTO) {
+                const extra = style.boxSizing === 'border-box' ? 0 : box.verticalExtra;
+                const least = typeof style.minHeight === 'number' ? style.minHeight + extra : 0;
+                return least + margins;
+            }
+            return (automaticMinimum(item.row, item.rows, tracks, gap, style.overflowY, margins, box.height) + margins);
+        },
+    };
+}
+/** A grid's least content height where it has no height of its own: its
+ *  `min-height`, a length or a percentage of a height. */
+function leastHeight(box) {
+    const style = box.style;
+    if (style.minHeight === AUTO)
+        return 0;
+    const px = resolveOrNull(style.minHeight, box.percentHeightBase);
+    if (px === null || !Number.isFinite(px))
+        return 0;
+    return Math.max(0, style.boxSizing === 'border-box' ? px - box.verticalExtra : px);
+}
+/**
+ * Where each track starts from the grid's content edge, with the space the
+ * tracks leave placed as `justify-content` or `align-content` has it (CSS
+ * Box Alignment 3, 5.1): before them, after them, between them or around
+ * each — none where the axis has no size of its own. `center` and `end`
+ * overflow the start as well, where the tracks are larger than the room;
+ * the distributions fall back to the start.
+ */
+function starts(sizes, gap, distribution, room) {
+    let used = gap * Math.max(0, sizes.length - 1);
+    for (const size of sizes)
+        used += size;
+    const free = Number.isFinite(room) ? room - used : 0;
+    const n = sizes.length;
+    let at = 0;
+    let between = 0;
+    if (n && free !== 0) {
+        if (distribution === 'center')
+            at = free / 2;
+        else if (distribution === 'end' ||
+            distribution === 'flex-end' ||
+            distribution === 'right') {
+            at = free;
+        }
+        else if (free > 0 && distribution === 'space-between') {
+            between = n > 1 ? free / (n - 1) : 0;
+        }
+        else if (free > 0 && distribution === 'space-around') {
+            between = free / n;
+            at = between / 2;
+        }
+        else if (free > 0 && distribution === 'space-evenly') {
+            between = free / (n + 1);
+            at = between;
+        }
+    }
+    const out = [];
+    for (const size of sizes) {
+        out.push(at);
+        at += size + gap + between;
+    }
+    return out;
+}
+/** Which of an item's margins on an axis are `auto`, start and end. */
+function autoMargins(box, axis) {
+    const style = box.style;
+    return axis === 'x'
+        ? [style.marginLeft === AUTO, style.marginRight === AUTO]
+        : [style.marginTop === AUTO, style.marginBottom === AUTO];
+}
+/** Whether a track's least or greatest size is a percentage. */
+function percentTrack(track) {
+    const { min, max } = track;
+    if (typeof min === 'object' && isPct(min))
+        return true;
+    if (typeof max !== 'object' || max === null)
+        return false;
+    if ('fr' in max)
+        return false;
+    if ('fit' in max)
+        return typeof max.fit === 'object' && isPct(max.fit);
+    return isPct(max);
+}
+//# sourceMappingURL=css-grid.js.map