postext 1.49.1 → 1.51.0

package/dist/pipeline/composedLayout.js

@@ -41,12 +41,12 @@ import { chainHead, FRAME_ATTR } from '../composed/wrap';
 import { framePlaceable, nextFrameOf, groupPlaceable, placeBox, unionRect } from '../composed/geometry';
 import { composedOrder, groupOfFrames, layoutGroup } from '../composed/groups';
 import { reflowEvents } from '../composed/reflowLog';
-import { anchorTarget, repeatInstance, repeatedFrames, resolveContinueIn } from '../composed/templates';
+import { anchorTarget, lookOver, repeatInstance, repeatedFrames, resolveContinueIn } from '../composed/templates';
 import { collapsedOnAddedPage, collapseFrames, continuationTemplate, continuesCollapsed, continuesOffPage, trailingFrames } from '../composed/continuation';
 import { isModuleTemplate, resolvePageTemplate } from '../composed/templates';
 import { frameElementId } from '../composed/ids';
 import { expandRepeats, instanceOf, repeatItemsOf } from '../composed/repeat';
-import { moduleOfFrame } from '../composed/modules';
+import { moduleOfFrame, nestedChain } from '../composed/modules';
 import { frameLinePx, frameRuleBlocks } from '../composed/rules';
 import { overlapChecks } from '../composed/overlap';
 import { offsetCalloutToAbsolute } from './calloutLayout';
@@ -520,6 +520,7 @@ export function layoutComposedPage(asked) {
             templateSource: templateAttr ? { sourceStart: templateAttr.sourceStart + input.bodyOffset, sourceEnd: templateAttr.sourceEnd + input.bodyOffset } : undefined,
             budgetLeft: () => runs < COMPOSE_BUDGET,
             holdsText: holdsText(frame),
+            dividesWord,
         });
         warnings.push({
             kind: 'frameOverflow',
@@ -830,24 +831,51 @@ function overflowProposals(c) {
     const path = (key) => frame.fieldPaths[key] ?? `${frame.configPath}/${key}`;
     const fits = (next, tpl) => c.budgetLeft() && !c.overflows(c.compose(next, tpl), name);
     // More shrink: the largest text scale, in 2.5 % steps, at which it fits.
+    // When that scale divides a word wider than the frame's measure, the
+    // largest smaller one that fits with every word whole, as the ladder
+    // prefers (#1084, #1090); none, and the largest that fits, saying the
+    // word will be divided.
     const head = c.headOf(name);
     const from = frame.fit.shrinkText ? Math.min(frame.fit.minScale, vdt.scale) : 1;
     const steps = scaleSteps(PROPOSAL_MIN_SCALE, from);
-    if (c.holdsText && steps.length > 0 && fits(c.withText(fit, head, steps[steps.length - 1]))) {
-        let lo = 0;
-        let hi = steps.length - 1;
-        while (lo < hi && c.budgetLeft()) {
-            const mid = Math.floor((lo + hi) / 2);
-            if (fits(c.withText(fit, head, steps[mid])))
-                hi = mid;
+    const shrunk = (i) => c.withText(fit, head, steps[i]);
+    if (c.holdsText && steps.length > 0 && fits(shrunk(steps.length - 1))) {
+        const last = steps.length - 1;
+        /** The largest step from `lo` down at which `ok` holds, given it holds
+         *  at the last one: by bisection. */
+        const largest = (lo, ok) => {
+            let hi = last;
+            while (lo < hi && c.budgetLeft()) {
+                const mid = Math.floor((lo + hi) / 2);
+                if (ok(mid))
+                    hi = mid;
+                else
+                    lo = mid + 1;
+            }
+            return hi;
+        };
+        let at = largest(0, (i) => fits(shrunk(i)));
+        let word;
+        if (c.budgetLeft() && c.dividesWord(c.compose(shrunk(at)), name)) {
+            const whole = (i) => {
+                if (!c.budgetLeft())
+                    return false;
+                const comp = c.compose(shrunk(i));
+                return !c.overflows(comp, name) && !c.dividesWord(comp, name);
+            };
+            if (at < last && whole(last)) {
+                at = largest(at + 1, whole);
+                word = 'whole';
+            }
             else
-                lo = mid + 1;
+                word = 'divided';
         }
         out.push({
             kind: 'allowShrink',
             path: path('fit/minScale'),
-            value: steps[hi],
+            value: steps[at],
             ...(frame.fit.shrinkText ? {} : { also: [{ path: path('fit/shrinkText'), value: true }] }),
+            ...(word ? { word } : {}),
         });
     }
     // A frame that holds content (an empty one is short of its own box, #911:
@@ -991,9 +1019,25 @@ function composePage(pageInput, template, fit, collapsed) {
      *  numbered (`VDTDesignTextBlock.pageMark`). */
     const toGuess = String(input.page.index + 2);
     const fromGuess = String(Math.max(1, input.page.index));
+    /** The named look (#1089) the `:::frame` fence of a frame's story names
+     *  (`look="<id>"`), when `frameLooks` has it: the story's, so every
+     *  frame of a chain and the frames it goes on in on later pages wear it. */
+    const frameLooks = pass.resolved.frameLooks;
+    const namedLookOf = (frame) => {
+        if (!frameLooks)
+            return undefined;
+        const id = input.stories.get(headOf(frame.name))?.plan.attrs.look?.trim();
+        return id ? frameLooks.find((l) => l.id === id) : undefined;
+    };
+    /** The look a frame's story names that `frameLooks` does not have
+     *  (#1095): the canvas marks the frame. */
+    const unknownLookOf = (frame) => {
+        const id = input.stories.get(headOf(frame.name))?.plan.attrs.look?.trim();
+        return id && !frameLooks?.some((l) => l.id === id) ? id : undefined;
+    };
     /** The style a frame is laid out in: its box as drawn at any text scale. */
     const styleOf = (frame) => {
-        const style = keepChromeAt(input.styleOf(frame), textScale(frame));
+        const style = keepChromeAt(input.styleOf(withNamedLook(frame, namedLookOf(frame))), textScale(frame));
         if (!fit.goOn.has(frame.name))
             return style;
         // A frame cut for another page (#859) ends with its mark: its own
@@ -1125,6 +1169,9 @@ function composePage(pageInput, template, fit, collapsed) {
         const moduleRects = new Map();
         /** The foot a module cut at its group's foot is clipped to (#1062). */
         let clipFoot;
+        /** A module a stretching row lays taller than it is (#1095): its
+         *  frames, its own foot (`at`) and the row's. */
+        let stretchTo;
         const pushed = seed
             ? [...seed].map(([name, box]) => ({ name, box, ...(seedShapes?.get(name) ? { contour: seedShapes.get(name) } : {}) }))
             : [];
@@ -1722,6 +1769,7 @@ function composePage(pageInput, template, fit, collapsed) {
                 ...(unmirroredAt(frame) !== undefined ? { unmirrorX: unmirroredAt(frame) } : {}),
                 layer: frame.layer,
                 ...(frame.style ? { styleId: frame.style } : {}),
+                ...(holds && unknownLookOf(frame) !== undefined ? { lookUnknown: unknownLookOf(frame) } : {}),
                 scale: s,
                 ...(pic !== undefined && holds ? { imageScale: pic } : {}),
                 overflowPx,
@@ -1814,6 +1862,27 @@ function composePage(pageInput, template, fit, collapsed) {
             rects.set(name, out);
             return out;
         };
+        /** A module's `'auto'` box that ends at the module's foot, in a row
+         *  that stretches the module (#1095): to the row's foot, its declared
+         *  box by as much (the template asks for it). A frame as wide as its
+         *  content (a pill, a tab) keeps its height. */
+        const stretchAuto = (name, r) => {
+            const s = stretchTo;
+            if (!s || !s.names.has(name))
+                return r;
+            const f = byName.get(name);
+            if (!f || f.height !== 'auto' || f.width === 'auto' || f.pin || heldByFoot(f))
+                return r;
+            const bottom = r.y + r.height;
+            if (Math.abs(bottom - s.at) > 0.5 || s.foot - bottom <= 0.01)
+                return r;
+            const out = { ...r, height: s.foot - r.y };
+            rects.set(name, out);
+            const d = declared.get(name);
+            if (d)
+                declared.set(name, { ...d, height: d.height + (s.foot - bottom) });
+            return out;
+        };
         /** The frames of `names` whose content goes on whole on another page
          *  (#1061, #1062): none of it is laid here. */
         const spillWhole = (names, advanced, lastLaid) => {
@@ -1830,7 +1899,7 @@ function composePage(pageInput, template, fit, collapsed) {
         const runStep = (step, filling) => {
             if (step.kind === 'frame') {
                 const p = prepare(step.frame);
-                const r = clipAtFoot(step.frame.name, placeFrame(p));
+                const r = clipAtFoot(step.frame.name, stretchAuto(step.frame.name, placeFrame(p)));
                 if (filling)
                     fill(p, r);
                 return;
@@ -1851,7 +1920,7 @@ function composePage(pageInput, template, fit, collapsed) {
                 let lastLaid;
                 for (const f of step.frames) {
                     if (!grid.spilled.has(f.name)) {
-                        fill(prepare(f), clipAtFoot(f.name, grid.rects.get(f.name)));
+                        fill(prepare(f), clipAtFoot(f.name, stretchAuto(f.name, grid.rects.get(f.name))));
                         lastLaid = frameIdOf(f.name);
                         continue;
                     }
@@ -1863,31 +1932,136 @@ function composePage(pageInput, template, fit, collapsed) {
             // A frame of a chain inside the group is reached once the frame
             // before it was filled: each is prepared again as it is filled.
             for (const f of step.frames) {
-                const r = clipAtFoot(f.name, solved.get(f.name));
+                const r = clipAtFoot(f.name, stretchAuto(f.name, solved.get(f.name)));
                 if (filling)
                     fill(prepare(f), r);
             }
         };
-        /** Lay a modules group (#1062): each module, in order, in a box as wide
-         *  as the group, from where the module before it ends (`gap` between
-         *  them), as tall as its frames. A module's frames are placed as its
-         *  template draws them in that box (`'container'` is the box) and its
-         *  groups laid in it: first in the room left, to find how tall it is
-         *  (the frames held by the box's foot or middle, or sized by its
-         *  height, left out), then in a box that tall. The group runs down its
-         *  own box, else the area. A module that does not fit is cut at the
-         *  group's foot (its frames clipped there), or, when the group goes on
-         *  to another page (`FitState.gridsOn`), it and every module after it
-         *  go on, whole. The modules' declared boxes follow each other at the
-         *  heights their frames declare, so the log tells a module moved by
-         *  the one before it. */
+        /** Lay a modules group (#1062): its modules in rows down the group's
+         *  box (its own, else the area). A stack gives each module a row of
+         *  its own, as wide as the group (or its template's `width`, #1088), a
+         *  `'row'` puts them all in one, start to end (each its `width`, else
+         *  an equal share of what is left), a `'grid'` `columns` to a row in
+         *  equal columns; a run of modules a group inside it takes (`within`)
+         *  is laid as that group says where its first module comes: its rows
+         *  among a stack's, one cell of a row or a grid (#1095: to any depth).
+         *  A row's room past its modules' widths goes by `grow`, what it is
+         *  short by comes back by `shrink` (#1095). Rows run from the start side of the page's lines (the flow frame is
+         *  mirrored on a right-to-left page, so its left is the start). A
+         *  module is placed as its template draws its frames in its box
+         *  (`'container'` is the box) and its groups laid in it: first in the
+         *  room left, to find how tall it is (the frames held by the box's foot
+         *  or middle, or sized by its height, left out), then in a box that
+         *  tall, or (`rowAlign` `'stretch'`, a row of several) as tall as its
+         *  row, its `'auto'` boxes that end at its foot reaching the row's
+         *  (#1095). A row that does not fit is cut at the group's foot (its frames
+         *  clipped there), or, when the group goes on to another page
+         *  (`FitState.gridsOn`), it and every row after it go on, whole. The
+         *  modules' declared boxes follow each other at the heights their
+         *  frames declare, so the log tells a module moved by the one before
+         *  it. */
         const placeModules = (group, members) => {
             const byMember = new Map(members.map((f) => [f.name, f]));
             const own = groupPlaceable(group);
             const ownBox = own ? placeBox(own, template, pageInput, refOf, () => 0) : undefined;
             const box = ownBox ?? pageInput.areas.area;
             const foot = box.y + box.height;
-            const gap = dimensionToPx(group.gap, dpi, pageInput.emPx);
+            const toPx = (d) => dimensionToPx(d, dpi, pageInput.emPx);
+            const groupNamed = new Map(template.groups.map((g) => [g.name, g]));
+            const mods = [];
+            for (const item of group.items ?? []) {
+                const mod = template.modules?.find((m) => m.name === item.module);
+                const names = item.frames.filter((n) => byMember.has(n));
+                if (mod && names.length > 0)
+                    mods.push({ mod, names, chain: nestedChain(template.groups, mod.nested) });
+            }
+            /** A module's width by its template in a group `width` wide
+             *  (`'fill'`: none). */
+            const fixedWidth = (l, width) => {
+                const w = l.mod.width;
+                if (w === undefined || w === 'fill')
+                    return undefined;
+                return 'percent' in w ? (width * w.percent) / 100 : toPx(w);
+            };
+            /** The cells of `list` in `g`: each module `g` lays itself, and each
+             *  run of the modules of a group inside `g`. */
+            const cellsOf = (list, g) => {
+                const out = [];
+                for (const l of list) {
+                    const name = l.chain.find((n) => groupNamed.get(n)?.within === g.name);
+                    const child = name !== undefined ? groupNamed.get(name) : undefined;
+                    const last = out[out.length - 1];
+                    if (child && last?.kind === 'group' && last.group === child)
+                        last.list.push(l);
+                    else
+                        out.push(child ? { kind: 'group', group: child, list: [l] } : { kind: 'module', l });
+                }
+                return out;
+            };
+            const namesOf = (c) => (c.kind === 'module' ? c.l.names : c.list.flatMap((l) => l.names));
+            /** `cells` side by side across `width` from `x`, `gap` between them:
+             *  each as wide as its template says, then the room left shared by
+             *  `grow` (a `'fill'` module, and a group's cell, 1 at least), or,
+             *  when the widths run past the end, given back by `shrink` in
+             *  proportion to each width (#1095). */
+            const across = (cells, gap, x, width) => {
+                const fixed = cells.map((c) => (c.kind === 'module' ? fixedWidth(c.l, width) : undefined));
+                const taken = fixed.reduce((a, w) => a + (w ?? 0), 0) + gap * Math.max(0, cells.length - 1);
+                const spare = width - taken;
+                let widths;
+                if (spare >= 0) {
+                    const grows = cells.map((c, k) => (c.kind !== 'module' ? 1 : fixed[k] === undefined ? Math.max(1, c.l.mod.grow ?? 1) : c.l.mod.grow ?? 0));
+                    const total = grows.reduce((a, g) => a + g, 0);
+                    widths = fixed.map((w, k) => Math.max(0, total > 0 ? (w ?? 0) + (spare * grows[k]) / total : w ?? 0));
+                }
+                else {
+                    const weights = cells.map((c, k) => (c.kind === 'module' && fixed[k] !== undefined ? (c.l.mod.shrink ?? 0) * fixed[k] : 0));
+                    const total = weights.reduce((a, g) => a + g, 0);
+                    widths = fixed.map((w, k) => Math.max(0, total > 0 ? (w ?? 0) + (spare * weights[k]) / total : w ?? 0));
+                }
+                const xs = [];
+                let at = x;
+                for (const w of widths) {
+                    xs.push(at);
+                    at += w + gap;
+                }
+                return { xs, widths };
+            };
+            /** The rows `list` makes in a group of `g`'s kind across `width`
+             *  from `x`, the first `first` after the row before it. A group
+             *  inside a stack adds its rows to the stack's; inside a row or a
+             *  grid, a run of its modules is one cell. */
+            const rowsOf = (list, g, x, width, first) => {
+                const gap = toPx(g.gap);
+                const align = g.rowAlign ?? 'stretch';
+                const cells = cellsOf(list, g);
+                if (g.kind === 'row')
+                    return [{ cells, ...across(cells, gap, x, width), align, gapBefore: first }];
+                if (g.kind === 'grid') {
+                    const columns = Math.max(1, g.columns ?? 1);
+                    const colGap = toPx(g.columnGap ?? g.gap);
+                    const rowGap = toPx(g.rowGap ?? g.gap);
+                    const colW = Math.max(1, (width - colGap * (columns - 1)) / columns);
+                    const out = [];
+                    for (let k = 0; k < cells.length; k += columns) {
+                        const chunk = cells.slice(k, k + columns);
+                        out.push({ cells: chunk, xs: chunk.map((_, c) => x + c * (colW + colGap)), widths: chunk.map(() => colW), align, gapBefore: k === 0 ? first : rowGap });
+                    }
+                    return out;
+                }
+                // A stack: a row of its own per module, at its width from the
+                // start; a group's rows in turn.
+                const out = [];
+                cells.forEach((c, k) => {
+                    const before = k === 0 ? first : gap;
+                    if (c.kind === 'module')
+                        out.push({ cells: [c], xs: [x], widths: [fixedWidth(c.l, width) ?? width], align: 'start', gapBefore: before });
+                    else
+                        out.push(...rowsOf(c.list, c.group, x, width, before));
+                });
+                return out;
+            };
+            const rows = rowsOf(mods, group, box.x, box.width, 0);
             let cursor = box.y;
             let declCursor = box.y;
             let out = false;
@@ -1895,40 +2069,31 @@ function composePage(pageInput, template, fit, collapsed) {
             let lastLaid;
             const boxes = [];
             const declBoxes = [];
+            const nestedBoxes = new Map();
             const restore = (to, from) => {
                 to.clear();
                 for (const [k, v] of from)
                     to.set(k, v);
             };
-            for (const item of group.items ?? []) {
-                const mod = template.modules?.find((m) => m.name === item.module);
-                const names = item.frames.filter((n) => byMember.has(n));
-                if (!mod || names.length === 0)
-                    continue;
-                if (out) {
-                    spillWhole(names, laidAny, lastLaid);
-                    continue;
+            const lay = (l, x, y, width, height, filling) => {
+                const steps = composedOrder({ frames: l.names.map((n) => byMember.get(n)), groups: template.groups.filter((g) => l.mod.groups.includes(g.name)) });
+                input = { ...pageInput, areas: { ...pageInput.areas, area: { x, y, width, height: Math.max(0, height) } } };
+                try {
+                    for (const step of steps)
+                        runStep(step, filling);
                 }
-                const sub = { frames: names.map((n) => byMember.get(n)), groups: template.groups.filter((g) => mod.groups.includes(g.name)) };
-                const steps = composedOrder(sub);
-                const lay = (height, filling) => {
-                    input = { ...pageInput, areas: { ...pageInput.areas, area: { x: box.x, y: cursor, width: box.width, height: Math.max(0, height) } } };
-                    try {
-                        for (const step of steps)
-                            runStep(step, filling);
-                    }
-                    finally {
-                        input = pageInput;
-                    }
-                };
-                // 1. How tall the module is: its frames placed in the room left,
-                //    then everything they set put back.
+                finally {
+                    input = pageInput;
+                }
+            };
+            /** How tall a module is at `(x, y)`, `width` wide: its frames placed
+             *  in the room left, then everything they set put back. */
+            const measure = (l, x, y, width) => {
                 const kept = { rects: new Map(rects), declared: new Map(declared), groupRects: new Map(groupRects), groupDeclared: new Map(groupDeclared), pinned: pinned.length, boxShort: new Map(boxShort), fitted: new Map(fitted) };
-                lay(foot - cursor, false);
-                const placed = names.filter((n) => rects.has(n));
+                lay(l, x, y, width, foot - y, false);
+                const placed = l.names.filter((n) => rects.has(n));
                 const measured = placed.filter((n) => !heldByFoot(byMember.get(n)));
                 const reach = unionRect((measured.length > 0 ? measured : placed).map((n) => rects.get(n)));
-                const height = reach ? Math.max(0, reach.y + reach.height - cursor) : 0;
                 restore(rects, kept.rects);
                 restore(declared, kept.declared);
                 restore(groupRects, kept.groupRects);
@@ -1936,41 +2101,129 @@ function composePage(pageInput, template, fit, collapsed) {
                 restore(boxShort, kept.boxShort);
                 restore(fitted, kept.fitted);
                 pinned.length = kept.pinned;
-                const fits = cursor + height <= foot + 0.5;
-                if (!fits && fit.gridsOn.has(group.name)) {
-                    // This module and the ones after it go on, whole.
-                    out = true;
+                return reach ? Math.max(0, reach.y + reach.height - y) : 0;
+            };
+            /** How tall a cell is at `(x, y)`, `width` wide: a module's height,
+             *  or a group's rows one after another (#1095). */
+            const measureCell = (c, x, y, width) => {
+                if (c.kind === 'module')
+                    return measure(c.l, x, y, width);
+                let at = y;
+                rowsOf(c.list, c.group, x, width, 0).forEach((row, r) => {
+                    if (r > 0)
+                        at += row.gapBefore;
+                    at += Math.max(0, ...row.cells.map((d, k) => measureCell(d, row.xs[k], at, row.widths[k])));
+                });
+                return at - y;
+            };
+            /** Lay `row` at `rowTop` (its declared top `declTop`), its cells
+             *  `heights` tall: each module in a box that tall (cut at the foot
+             *  when the row does not fit), a shorter one placed by `rowAlign`; a
+             *  group's cell its rows in turn. The row's foot, laid and declared. */
+            const layRow = (row, rowTop, declTop, heights, fits) => {
+                const rowH = Math.max(0, ...heights);
+                const several = row.cells.length > 1;
+                let rowBottom = rowTop;
+                let rowDeclBottom = declTop;
+                row.cells.forEach((c, k) => {
+                    const x = row.xs[k];
+                    const width = row.widths[k];
+                    const spare = rowH - heights[k];
+                    const stretched = fits && several && row.align === 'stretch' && c.kind === 'module';
+                    const dy = fits && several && spare > 0.01 ? (row.align === 'end' ? spare : row.align === 'center' ? spare / 2 : 0) : 0;
+                    const y = rowTop + dy;
+                    if (c.kind === 'group') {
+                        // A run of a group inside this one (#1095): its rows, from the
+                        // cell's top.
+                        const laid = layRows(rowsOf(c.list, c.group, x, width, 0), y, declTop + dy, fits);
+                        rowBottom = Math.max(rowBottom, laid.bottom);
+                        rowDeclBottom = Math.max(rowDeclBottom, laid.declBottom);
+                        return;
+                    }
+                    const l = c.l;
+                    clipFoot = fits ? undefined : foot;
+                    // Its 'auto' boxes that end at its foot reach the row's (#1095).
+                    stretchTo = stretched && spare > 0.01 ? { at: y + heights[k], foot: y + rowH, names: new Set(l.names) } : undefined;
+                    try {
+                        lay(l, x, y, width, fits ? (stretched ? rowH : heights[k]) : foot - rowTop, true);
+                    }
+                    finally {
+                        clipFoot = undefined;
+                        stretchTo = undefined;
+                    }
+                    const u = unionRect(l.names.flatMap((n) => (rects.has(n) ? [rects.get(n)] : [])));
+                    const bottom = Math.max(stretched ? y + rowH : y, u ? u.y + u.height : y);
+                    const moduleBox = { x, y, width, height: bottom - y };
+                    moduleRects.set(l.mod.name, moduleBox);
+                    boxes.push(moduleBox);
+                    // Declared: after the rows before it as they declare themselves.
+                    const shift = declTop - rowTop;
+                    for (const n of l.names) {
+                        const d = declared.get(n);
+                        if (d && Math.abs(shift) > 0.001)
+                            declared.set(n, { ...d, y: d.y + shift });
+                    }
+                    const declY = declTop + dy;
+                    const du = unionRect(l.names.flatMap((n) => (declared.has(n) ? [declared.get(n)] : [])));
+                    const declBottom = du ? Math.max(declY, du.y + du.height) : declY;
+                    const declBox = { x, y: declY, width, height: declBottom - declY };
+                    declBoxes.push(declBox);
+                    for (const name of l.chain) {
+                        const n = nestedBoxes.get(name) ?? { laid: [], declared: [] };
+                        n.laid.push(moduleBox);
+                        n.declared.push(declBox);
+                        nestedBoxes.set(name, n);
+                    }
+                    rowBottom = Math.max(rowBottom, bottom);
+                    rowDeclBottom = Math.max(rowDeclBottom, declBottom);
+                });
+                return { bottom: rowBottom, declBottom: rowDeclBottom };
+            };
+            /** The rows of a group's cell, one after another from `top`. */
+            const layRows = (list, top, declTop, fits) => {
+                let at = top;
+                let declAt = declTop;
+                list.forEach((row, r) => {
+                    if (r > 0) {
+                        at += row.gapBefore;
+                        declAt += row.gapBefore;
+                    }
+                    const heights = row.cells.map((c, k) => measureCell(c, row.xs[k], at, row.widths[k]));
+                    const laid = layRow(row, at, declAt, heights, fits);
+                    at = laid.bottom;
+                    declAt = laid.declBottom;
+                });
+                return { bottom: at, declBottom: declAt };
+            };
+            rows.forEach((row, r) => {
+                const names = row.cells.flatMap(namesOf);
+                if (out) {
                     spillWhole(names, laidAny, lastLaid);
-                    continue;
-                }
-                // 2. The module laid in a box that tall (cut at the foot when it
-                //    does not fit).
-                clipFoot = fits ? undefined : foot;
-                try {
-                    lay(fits ? height : foot - cursor, true);
+                    return;
                 }
-                finally {
-                    clipFoot = undefined;
+                if (r > 0) {
+                    cursor += row.gapBefore;
+                    declCursor += row.gapBefore;
                 }
-                const u = unionRect(names.flatMap((n) => (rects.has(n) ? [rects.get(n)] : [])));
-                const bottom = u ? Math.max(cursor, u.y + u.height) : cursor;
-                const moduleBox = { x: box.x, y: cursor, width: box.width, height: bottom - cursor };
-                moduleRects.set(mod.name, moduleBox);
-                boxes.push(moduleBox);
-                // Declared: after the modules before it as they declare themselves.
-                const shift = declCursor - cursor;
-                for (const n of names) {
-                    const d = declared.get(n);
-                    if (d && Math.abs(shift) > 0.001)
-                        declared.set(n, { ...d, y: d.y + shift });
+                const heights = row.cells.map((c, k) => measureCell(c, row.xs[k], cursor, row.widths[k]));
+                const rowH = Math.max(0, ...heights);
+                const fits = cursor + rowH <= foot + 0.5;
+                if (!fits && fit.gridsOn.has(group.name)) {
+                    // This row and the ones after it go on, whole.
+                    out = true;
+                    spillWhole(names, laidAny, lastLaid);
+                    return;
                 }
-                const du = unionRect(names.flatMap((n) => (declared.has(n) ? [declared.get(n)] : [])));
-                const declBottom = du ? Math.max(declCursor, du.y + du.height) : declCursor;
-                declBoxes.push({ x: box.x, y: declCursor, width: box.width, height: declBottom - declCursor });
+                const laid = layRow(row, cursor, declCursor, heights, fits);
                 laidAny = true;
                 lastLaid = frameIdOf(names[names.length - 1]);
-                cursor = bottom + gap;
-                declCursor = declBottom + gap;
+                cursor = laid.bottom;
+                declCursor = laid.declBottom;
+            });
+            // A group inside another (#1088, #1095) is the box of its modules.
+            for (const [name, b] of nestedBoxes) {
+                groupRects.set(name, unionRect(b.laid));
+                groupDeclared.set(name, unionRect(b.declared));
             }
             groupRects.set(group.name, ownBox ?? unionRect(boxes) ?? { ...box, height: 0 });
             groupDeclared.set(group.name, ownBox ?? unionRect(declBoxes) ?? { ...box, height: 0 });
@@ -2123,6 +2376,25 @@ export function frameStyleOf(base, frame) {
     };
 }
 const lookedStyles = new WeakMap();
+/** Frames with a named look laid over theirs (#1089), per look and frame:
+ *  the same look object each time, so `styleWithLook` keeps its styles. */
+const namedLookFrames = new WeakMap();
+/** `frame` with the named look `named` (#1089) laid over its own `look`
+ *  (`lookOver`): the order is the style, the template frame's look, then
+ *  the named look. `frame` itself when there is none. */
+export function withNamedLook(frame, named) {
+    if (!named)
+        return frame;
+    let byFrame = namedLookFrames.get(named);
+    if (!byFrame)
+        namedLookFrames.set(named, (byFrame = new WeakMap()));
+    const known = byFrame.get(frame);
+    if (known)
+        return known;
+    const out = { ...frame, look: lookOver(frame.look, named) };
+    byFrame.set(frame, out);
+    return out;
+}
 /** `base` with what a frame's `look` sets (#976) written over it: colours
  *  of the fill, border, stripe, icon, marker, title, text and label tab,
  *  and the tracking of the body. A fill colour turns the fill on. A part