postext 1.46.4 → 1.48.0

package/dist/pipeline/composedLayout.js

@@ -1,3 +1,36 @@
+/**
+ * Lay out one composed page (#855, DESIGN §5.1–5.2): place the frames of
+ * its template, pour each story (`composed/wrap.ts`) into its frames with
+ * the box typesetter (`frameLayout.ts`), and hand back the blocks for the
+ * page's floats with the page's `VDTComposedPage`.
+ *
+ * Per frame, in {@link frameOrder}: its box ({@link placeBox}, an `'auto'`
+ * height measured with the content the frame will hold), then its content:
+ * the story from where the frame before it in the chain stopped, cut at the
+ * frame's foot when a `next` frame takes the rest, else laid whole and
+ * clipped at the foot. Text runs round the frames that push it (`exclude:
+ * 'push'`) already placed; groups negotiate their frames' space (#856).
+ *
+ * A frame whose content still does not fit climbs the reflow ladder (#858,
+ * DESIGN §5.4), frame by frame in template order, each step on top of the
+ * ones before it, stopping at the first that makes it fit: free space (a
+ * fixed height grows to its `maxHeight`), its group pushing and yielding
+ * (already part of every layout), smaller pictures in the frame and its
+ * group (`fit.imageMinScale`), the group's other frames down to their
+ * minimum or their content, smaller text (`fit.minScale`), continuation on
+ * another page (#859). Each step lays the whole page again, so a change
+ * stays on the page. What still does not fit is clipped and reported
+ * (`frameOverflow`) with the steps tried and proposals worked out on the
+ * page.
+ *
+ * A frame whose `overflow.continueIn` sends content to another page
+ * (`'next-page'`, `'template:<id>'`, #859) takes the ladder's last step
+ * before the warning: it is cut at its foot, with its mark, its text and
+ * pictures back at full size, and the rest is handed back
+ * (`ComposedPageLayout.continuations`) for `build.ts` to lay on pages it
+ * adds after this one, with this function (`ComposedPageInput.continuing`).
+ */
+import { isCornerRadii } from '../design/boxShape';
 import { pageIsMirrored, pageIsVertical } from '../vdt';
 import { contourBounds, scaleContourAbout, shiftContour } from '../contour';
 import { frameContour } from '../composed/contour';
@@ -8,11 +41,14 @@ 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, resolveContinueIn } from '../composed/templates';
+import { anchorTarget, repeatInstance, repeatedFrames, resolveContinueIn } from '../composed/templates';
 import { collapsedOnAddedPage, collapseFrames, continuationTemplate, continuesCollapsed, continuesOffPage, trailingFrames } from '../composed/continuation';
-import { resolvePageTemplate } from '../composed/templates';
+import { isModuleTemplate, resolvePageTemplate } from '../composed/templates';
 import { frameElementId } from '../composed/ids';
+import { expandRepeats, instanceOf, repeatItemsOf } from '../composed/repeat';
+import { moduleOfFrame } from '../composed/modules';
 import { frameLinePx, frameRuleBlocks } from '../composed/rules';
+import { overlapChecks } from '../composed/overlap';
 import { offsetCalloutToAbsolute } from './calloutLayout';
 import { isMarkerBlock } from './buildHelpers';
 import { createLayoutMemo, layoutMemoSwitch } from './layoutMemo';
@@ -21,7 +57,7 @@ import { computeOrderedListRunMetrics } from './lists';
 import { planParagraphContainers } from './paragraphContainers';
 import { CUT_START, fragmentRange, frameCutRules, makeCalloutLayouter, partBreakCut, splitCalloutFragment } from './frameLayout';
 const MM_PER_IN = 25.4;
-const NO_FIT = { patches: new Map(), text: new Map(), pictures: new Map(), yieldAll: new Set(), goOn: new Set() };
+const NO_FIT = { patches: new Map(), text: new Map(), pictures: new Map(), yieldAll: new Set(), goOn: new Set(), gridsOn: new Set() };
 /** Step of the text and picture scales the ladder tries (DESIGN §5.4). */
 const FIT_STEP = 0.025;
 /** Lowest text scale an `allowShrink` proposal goes to. */
@@ -66,7 +102,12 @@ function chainPrev(template, receivers) {
     return prev;
 }
 const sameCut = (a, b) => a.child === b.child && a.line === b.line && JSON.stringify(a.group ?? null) === JSON.stringify(b.group ?? null);
-export function layoutComposedPage(given) {
+export function layoutComposedPage(asked) {
+    // The grids that repeat a frame set (#1061) are laid with one instance of
+    // the set per item the page's stories hold (`<frame>[n]`): from here on
+    // they are plain frames.
+    const expanded = expandRepeats(asked.template, repeatItemsOf(asked.template, asked.stories.keys()));
+    const given = expanded === asked.template ? asked : { ...asked, template: expanded };
     // A page added by continuation (#859) lays its template with the
     // continuation's rules (and, for the template laid again, its other
     // frames collapsed).
@@ -78,7 +119,9 @@ export function layoutComposedPage(given) {
     const fi = fence.fenceIndex;
     const mmPx = dpi / MM_PER_IN;
     const byName = new Map(template.frames.map((f) => [f.name, f]));
-    const groupOf = groupOfFrames(template);
+    // (A modules group, #1062, holds its modules' frames to lay them as one
+    // step: what a frame shares room with is the group of its own module.)
+    const groupOf = groupOfFrames({ ...template, groups: template.groups.filter((g) => !g.modules) });
     const prev = chainPrev(template, input.continuing?.receivers);
     const headOf = (name) => {
         let at = name;
@@ -89,11 +132,17 @@ export function layoutComposedPage(given) {
         }
         return at;
     };
+    /** The module a frame belongs to (#1062), when its modules group goes on
+     *  by whole modules (`overflow.continueIn` off the page). */
+    const movingModule = (name) => {
+        const m = moduleOfFrame(template, name);
+        return m && !input.continuing?.last && continuesOffPage(m.group.overflow?.continueIn) ? m : undefined;
+    };
     // Compositions by fit state: the ladder and its proposals ask for some
     // twice.
     const memo = new Map();
     let runs = 0;
-    const keyOf = (tpl, fit) => JSON.stringify([tpl.id, [...fit.patches], [...fit.text], [...fit.pictures], [...fit.yieldAll], [...fit.goOn]]);
+    const keyOf = (tpl, fit) => JSON.stringify([tpl.id, [...fit.patches], [...fit.text], [...fit.pictures], [...fit.yieldAll], [...fit.goOn], [...fit.gridsOn]]);
     /** Frames a page added by continuation lays with no room (#859). */
     const collapsedHere = input.continuing ? collapsedOnAddedPage(given.template, input.continuing) : new Set();
     const holdsStory = (name) => input.stories.has(headOf(name));
@@ -234,9 +283,18 @@ export function layoutComposedPage(given) {
     };
     /** Story heads of the frame and of its group's frames whose content holds
      *  a picture. */
+    /** The frames a frame shares its group's room with: its group's, or for
+     *  an instance of a grid's set (#1061) its own item's. */
+    const peersOf = (name) => {
+        const inst = instanceOf(template, name);
+        if (inst)
+            return inst.group.items.find((c) => c.item === inst.item).frames;
+        // A module's frame (#1062) outside a group of its own: its module's.
+        return groupOf.get(name)?.frames ?? moduleOfFrame(template, name)?.frames;
+    };
     const pictureHeads = (frame) => {
-        const g = groupOf.get(frame.name);
-        const names = g ? [frame.name, ...g.frames.filter((m) => m !== frame.name)] : [frame.name];
+        const peers = peersOf(frame.name);
+        const names = peers ? [frame.name, ...peers.filter((m) => m !== frame.name)] : [frame.name];
         const heads = [];
         for (const n of names) {
             const head = headOf(n);
@@ -266,8 +324,8 @@ export function layoutComposedPage(given) {
         return false;
     };
     const movesOthers = (frame) => {
-        const g = groupOf.get(frame.name);
-        if (g && g.frames.filter((m) => byName.has(m)).length > 1)
+        const peers = peersOf(frame.name);
+        if (peers && peers.filter((m) => byName.has(m)).length > 1)
             return true;
         return template.frames.some((f) => f.name !== frame.name && !f.grid && anchorTarget(f.placement) === frame.name);
     };
@@ -309,7 +367,8 @@ export function layoutComposedPage(given) {
         //    width) back, down to its minimum or its content.
         const redistribute = () => {
             const g = groupOf.get(name);
-            if (!g || g.frames.filter((m) => byName.has(m)).length <= 1)
+            // (A grid's rows are as tall as their tallest cell: nothing to give.)
+            if (!g || g.kind === 'grid' || g.frames.filter((m) => byName.has(m)).length <= 1)
                 return false;
             steps.push('redistribute');
             return attempt({ ...fit, yieldAll: new Set([...fit.yieldAll, g.name]) }, name);
@@ -325,15 +384,26 @@ export function layoutComposedPage(given) {
         //    `'template:<id>'` or `'page:<id>'`, #859). On a page added by
         //    continuation, a frame that would take none of what it receives
         //    sends nothing on (it would go on for ever): it warns.
+        // An instance of a grid's set (#1061) goes on with its whole row, as
+        // the grid's main frame says (`overflow.continueIn`, `fit`).
+        // A frame of a module (#1062) whose modules group goes on goes on with
+        // its whole module, as the group says.
+        const moving = movingModule(name);
+        const grid = moving ? undefined : instanceOf(template, name)?.group;
+        const ruler = moving
+            ? { ...frame, overflow: { ...frame.overflow, continueIn: moving.group.overflow.continueIn } }
+            : grid ? byName.get(grid.items[0].frames[0]) ?? frame : frame;
         const goOn = () => {
-            if (!continuesOffPage(frame.overflow.continueIn))
+            if (!continuesOffPage(ruler.overflow.continueIn))
                 return false;
             steps.push('continue');
             const before = { fit, cur };
             // (Only for a story that came from another page: a page's own story
             // may go on whole.)
             const received = input.continuing?.receivers.has(headOf(name)) ?? false;
-            if (attempt(goingOn(fit, frame), name) && (!received || cur.spills.get(name)?.advanced !== false))
+            const wholeIn = moving?.group ?? grid;
+            const next = wholeIn ? { ...fit, gridsOn: new Set([...fit.gridsOn, wholeIn.name]) } : goingOn(fit, frame);
+            if (attempt(next, name) && (!received || cur.spills.get(name)?.advanced !== false))
                 return true;
             ({ fit, cur } = before);
             return false;
@@ -343,7 +413,7 @@ export function layoutComposedPage(given) {
         // one size from page to page. The pictures and the text shrink only
         // when it cannot go on (the last page continuation may add, or a
         // receiver that takes none of it).
-        const order = continuesOffPage(frame.overflow.continueIn) && frame.fit.preferContinue
+        const order = continuesOffPage(ruler.overflow.continueIn) && ruler.fit.preferContinue
             ? [redistribute, goOn, scaleImages, shrinkText]
             : [scaleImages, redistribute, shrinkText, goOn];
         for (const step of order)
@@ -353,10 +423,21 @@ export function layoutComposedPage(given) {
     // 7. Warn, with what would make each frame that still overflows fit.
     const warnings = [...(cur.notes ?? [])];
     const templateAttr = fence.attrSources.template;
+    // The rows of a grid cut at its foot (#1061) warn once, on the last
+    // instance cut.
+    // (And so do the modules cut at the foot of their group, #1062.)
+    const cutIn = (name) => moduleOfFrame(template, name)?.group.name ?? instanceOf(template, name)?.group.name ?? '';
+    const lastCut = new Map();
+    for (const frame of template.frames) {
+        if (cur.clipped.has(frame.name) && overflows(cur, frame.name))
+            lastCut.set(cutIn(frame.name), frame.name);
+    }
     for (const frame of template.frames) {
         const vdt = frameIn(cur, frame.name);
         if (!vdt || vdt.overflowPx <= 0.5)
             continue;
+        if (cur.clipped.has(frame.name) && lastCut.get(cutIn(frame.name)) !== frame.name)
+            continue;
         const overflowMm = Math.round((vdt.overflowPx / mmPx) * 10) / 10;
         const proposals = overflowProposals({
             frame,
@@ -396,7 +477,23 @@ export function layoutComposedPage(given) {
             pageIndex: input.page.index,
         });
     }
-    const { frames, blocks, log, laid, fitted } = cur;
+    // 8. What no frame's box says (#1053): ink under a frame painted over it,
+    //    and ink past the trim, the bleed or the box it is anchored inside.
+    const overlaps = overlapChecks({
+        template: cur.template,
+        frames: cur.frames,
+        blocks: cur.blocks,
+        groupRects: cur.groupRects,
+        areas: input.areas,
+        dpi,
+        emPx: input.emPx,
+        fenceIndex: fi,
+        pageIndex: input.page.index,
+        ...(input.locale ? { locale: input.locale } : {}),
+    });
+    warnings.push(...overlaps.warnings);
+    const { frames, blocks, laid, fitted } = cur;
+    const log = overlaps.events.length > 0 ? mergeLog(cur.log, overlaps.events, template) : cur.log;
     // Template order on the page record.
     const order = new Map(template.frames.map((f, i) => [f.name, i]));
     frames.sort((a, b) => order.get(a.name) - order.get(b.name));
@@ -411,6 +508,10 @@ export function layoutComposedPage(given) {
         frames,
         log,
         configPath: template.configPath,
+        // The modules laid (#1062), each with its box.
+        ...(template.modules && template.modules.length > 0
+            ? { modules: template.modules.map((m) => ({ name: m.name, template: m.template, configPath: m.configPath, ...(cur.moduleRects.has(m.name) ? { rect: { ...cur.moduleRects.get(m.name) } } : {}) })) }
+            : {}),
         sourceStart: contentBlocks[input.startIdx].sourceStart + input.bodyOffset,
         sourceEnd: contentBlocks[input.endIdx].sourceEnd + input.bodyOffset,
     };
@@ -423,12 +524,26 @@ export function layoutComposedPage(given) {
         if (!spill || !story)
             continue;
         const came = input.continuing?.receivers.get(spill.head);
+        // An item of a grid (#1061) goes on whole, as its main frame says; the
+        // instances of its set that hold nothing go with it.
+        // A module (#1062) goes on whole as its group says, its frames that
+        // hold nothing along with the first of them that goes; any frame of a
+        // module goes on in that module on the page it goes to.
+        const inModule = moduleOfFrame(template, frame.name);
+        const wholeModule = spill.whole && inModule && continuesOffPage(inModule.group.overflow?.continueIn) ? inModule : undefined;
+        const cell = spill.whole && !wholeModule ? instanceOf(template, frame.name) : undefined;
+        const cellFrames = cell ? cell.group.items.find((c) => c.item === cell.item).frames : [];
+        const ruler = cell ? byName.get(cellFrames[0]) ?? frame : frame;
+        const firstGoing = wholeModule ? wholeModule.frames.find((n) => cur.spills.has(n)) : undefined;
+        const empty = cell?.main
+            ? cellFrames.filter((n) => n !== frame.name && !cur.spills.has(n))
+            : wholeModule && firstGoing === frame.name ? wholeModule.frames.filter((n) => n !== frame.name && !cur.spills.has(n)) : [];
         continuations.push({
             frame: frame.name,
             fromFrameId: spill.frameId,
             head: spill.head,
             // `{attr.x}` read from the fence (#917).
-            rule: resolveContinueIn(frame.overflow.continueIn, fence.attrs),
+            rule: resolveContinueIn(wholeModule ? wholeModule.group.overflow.continueIn : ruler.overflow.continueIn, fence.attrs),
             template: template.id,
             collapsed: input.continuing?.collapse ?? false,
             story,
@@ -437,8 +552,10 @@ export function layoutComposedPage(given) {
             headBlockId: spill.headBlockId,
             // A story that jumped here (#917) goes on named by this page's frame.
             slot: (input.continuing?.jump ? undefined : came?.slot) ?? frame.name,
-            ...(trailing.has(frame.name) ? { trailing: trailing.get(frame.name) } : {}),
+            ...(trailing.has(frame.name) ? { trailing: trailing.get(frame.name) } : empty.length > 0 ? { trailing: empty } : {}),
             ...(frame.overflow.fromMark !== undefined ? { fromMark: frame.overflow.fromMark } : {}),
+            ...(spill.whole ? { whole: true } : {}),
+            ...(inModule ? { module: { name: inModule.module.name, template: inModule.module.template } } : {}),
         });
     }
     return { composed, blocks, warnings, laid, ...(fitted.size > 0 ? { fitted } : {}), ...(continuations.length > 0 ? { continuations } : {}) };
@@ -575,9 +692,14 @@ function regroupStories(input, alt) {
     const flow = alt.frames.find((f) => f.flow);
     const flowHead = flow ? chainHead(alt, flow.name) : undefined;
     const current = input.template.frames;
+    const repeatedIn = repeatedFrames(alt);
     const headIn = (head) => {
         if (names.has(head))
             return chainHead(alt, head);
+        // An instance of a frame `alt` repeats too (#1061) stays an instance.
+        const inst = repeatInstance(head);
+        if (inst && repeatedIn.has(inst.frame))
+            return head;
         const takes = current.find((f) => f.name === head)?.takes;
         const taker = takes ? alt.frames.find((f) => f.takes === takes) : undefined;
         return taker ? chainHead(alt, taker.name) : flowHead;
@@ -759,16 +881,27 @@ export function keepChromeAt(style, scale) {
     return {
         ...style,
         padding: { top: d(p.top), right: d(p.right), bottom: d(p.bottom), left: d(p.left) },
-        border: { ...style.border, width: d(style.border.width) },
-        borderRadius: d(style.borderRadius),
+        border: {
+            ...style.border,
+            width: d(style.border.width),
+            ...(style.border.sides
+                ? { sides: Object.fromEntries(Object.entries(style.border.sides).map(([k, v]) => [k, { ...v, width: d(v.width) }])) }
+                : {}),
+        },
+        borderRadius: isCornerRadii(style.borderRadius)
+            ? Object.fromEntries(Object.entries(style.borderRadius).map(([k, v]) => [k, v ? d(v) : v]))
+            : d(style.borderRadius),
         stripe: { ...style.stripe, width: d(style.stripe.width) },
         ...(style.label
-            ? { label: { ...style.label, height: d(style.label.height), paddingX: d(style.label.paddingX), offset: d(style.label.offset), inset: d(style.label.inset), rule: { ...style.label.rule, width: d(style.label.rule.width) } } }
+            ? { label: { ...style.label, height: d(style.label.height), paddingX: d(style.label.paddingX), offset: d(style.label.offset), inset: d(style.label.inset), rule: { ...style.label.rule, width: d(style.label.rule.width) }, ...(style.label.fillet ? { fillet: d(style.label.fillet) } : {}) } }
             : {}),
     };
 }
 /** Lay out every frame of the page once, with the reflow ladder's `fit`. */
-function composePage(input, template, fit, collapsed) {
+function composePage(pageInput, template, fit, collapsed) {
+    /** What the frames are placed in: the page, or, while a module's frames
+     *  are placed (#1062), the page with the module's box as its area. */
+    let input = pageInput;
     const { pass, fence, dpi } = input;
     const fi = fence.fenceIndex;
     const cont = input.continuing;
@@ -778,6 +911,8 @@ function composePage(input, template, fit, collapsed) {
      *  the fence's page that first sent it on. */
     const frameIdOf = (name) => (cont && !cont.jump ? frameElementId(fi, cont.receivers.get(name)?.slot ?? name, cont.generation) : frameElementId(fi, name));
     const byName = new Map(template.frames.map((f) => [f.name, f]));
+    /** Frames a grid repeats (#1061): their instances are `<frame>[n]`. */
+    const repeated = new Set(template.groups.flatMap((g) => (g.items ? g.repeat?.frames ?? [] : [])));
     const prev = chainPrev(template, cont?.receivers);
     /** The head of the chain a frame belongs to. */
     const headOf = (name) => {
@@ -926,6 +1061,10 @@ function composePage(input, template, fit, collapsed) {
         const laid = new Set();
         const spills = new Map();
         const wantsOn = new Set();
+        const clipped = new Set();
+        const moduleRects = new Map();
+        /** The foot a module cut at its group's foot is clipped to (#1062). */
+        let clipFoot;
         const pushed = seed
             ? [...seed].map(([name, box]) => ({ name, box, ...(seedShapes?.get(name) ? { contour: seedShapes.get(name) } : {}) }))
             : [];
@@ -1207,7 +1346,7 @@ function composePage(input, template, fit, collapsed) {
                 const start = firstFree?.own ?? input.areas.area;
                 const box = ownBox ?? { x: start.x, y: start.y, width: 0, height: 0 };
                 const out = layoutGroup({
-                    kind: group.kind,
+                    kind: group.kind === 'row' ? 'row' : 'stack',
                     box,
                     elastic: !ownBox,
                     limit: input.areas.area,
@@ -1258,6 +1397,170 @@ function composePage(input, template, fit, collapsed) {
             groupDeclared.set(group.name, decl.box);
             return fin.rects;
         };
+        /** Lay a grid (#1061): its cells fill rows 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), `columns` to a row, `columnGap` and `rowGap`
+         *  between them. A cell is one item of a repeated frame set (or one
+         *  frame of a grid that repeats none): the main frame takes the cell's
+         *  width and its own height rule, the set's other frames are placed as
+         *  the template draws them, anchored to the main frame or to each
+         *  other (one that anchors to nothing in the set moves with the cell).
+         *  A row is as tall as its tallest cell, the set's frames counted;
+         *  `rowAlign` places the shorter ones (`'stretch'`: their main frame
+         *  grows to the row). The grid runs down its own box, or to the foot of
+         *  the area from where the template draws its main frame. A row that
+         *  does not fit is clipped at the foot, or, when the grid goes on to
+         *  another page (`FitState.gridsOn`), it and every row after it are
+         *  left for that page, whole (`spilled`). */
+        const placeGrid = (group, members) => {
+            const byMember = new Map(members.map((f) => [f.name, f]));
+            const cells = (group.items ?? (group.repeat ? [] : members.map((f) => ({ item: 0, frames: [f.name] }))))
+                .map((c) => c.frames.filter((n) => byMember.has(n)))
+                .filter((c) => c.length > 0);
+            const laidBoxes = new Map();
+            const spilled = new Set();
+            const cut = [];
+            const own = groupPlaceable(group);
+            const ownBox = own ? placeBox(own, template, input, refOf, () => 0) : undefined;
+            const area = input.areas.area;
+            const first = cells[0] ? byMember.get(cells[0][0]) : undefined;
+            /** Where the template draws a cell's main frame. */
+            const drawnOf = (main) => placeBox(framePlaceable(main), template, input, refOf, () => 0);
+            const drawnFirst = first ? drawnOf(first) : area;
+            const box = ownBox ?? { x: drawnFirst.x, y: drawnFirst.y, width: Math.max(0, area.x + area.width - drawnFirst.x), height: Math.max(0, area.y + area.height - drawnFirst.y) };
+            const foot = box.y + box.height;
+            const columns = Math.max(1, group.columns ?? 1);
+            const colGap = dimensionToPx(group.columnGap ?? group.gap, dpi, input.emPx);
+            const rowGap = dimensionToPx(group.rowGap ?? group.gap, dpi, input.emPx);
+            const colW = Math.max(1, (box.width - colGap * (columns - 1)) / columns);
+            const xOf = (c) => box.x + c * (colW + colGap);
+            const px = (d) => (d ? dimensionToPx(d, dpi, input.emPx) : undefined);
+            /** The main frame's height in a cell `w` wide: its own rule, held
+             *  between its minimum and maximum. */
+            const mainHeight = (f, w) => {
+                const h = f.height;
+                let v;
+                if (h === 'auto')
+                    v = naturalOf(prepare(f))(w);
+                else if (h === 'fill')
+                    v = 0;
+                else if ('percent' in h)
+                    v = (area.height * h.percent) / 100;
+                else
+                    v = dimensionToPx(h, dpi, input.emPx);
+                const min = px(f.minHeight) ?? 0;
+                const max = px(f.maxHeight) ?? Infinity;
+                return Math.max(min, Math.min(v, max));
+            };
+            /** The boxes of a cell's frames with its main frame at `(x, y)`,
+             *  `h` tall; and the frames that count for the cell's extent. */
+            const layCell = (cell, x, y, h) => {
+                const main = byMember.get(cell[0]);
+                const boxes = new Map([[main.name, { x, y, width: colW, height: h }]]);
+                const inCell = [main.name];
+                const set = new Set(cell);
+                const drawn = drawnOf(main);
+                const refs = (n) => boxes.get(n) ?? refOf(n);
+                // A frame anchored in the set fills (and takes its percentages of)
+                // the cell's column, not the whole area.
+                const column = { ...input, areas: { ...input.areas, area: { x, y: area.y, width: colW, height: area.height } } };
+                let todo = cell.slice(1);
+                for (let pass = 0; todo.length > 0 && pass <= cell.length; pass++) {
+                    const later = [];
+                    for (const name of todo) {
+                        const f = byMember.get(name);
+                        const target = f.grid ? undefined : anchorTarget(f.placement);
+                        // Anchored to a frame of the set not placed yet: next pass.
+                        if (target !== undefined && set.has(target) && !boxes.has(target) && pass < cell.length) {
+                            later.push(name);
+                            continue;
+                        }
+                        const p = prepare(f);
+                        const inSet = target !== undefined && set.has(target);
+                        const r = placeFitted(f, framePlaceable(f), inSet ? column : input, refs, naturalOf(p), naturalWidthOf(p));
+                        if (target !== undefined && !set.has(target)) {
+                            // Anchored to a frame outside the set: where it says.
+                            boxes.set(name, r);
+                            continue;
+                        }
+                        // Anchored in the set, or to nothing in it: with the cell.
+                        boxes.set(name, target !== undefined ? r : { ...r, x: r.x + x - drawn.x, y: r.y + y - drawn.y });
+                        inCell.push(name);
+                    }
+                    todo = later;
+                }
+                return { boxes, inCell };
+            };
+            const stretchable = (f) => f.height === 'auto' || f.height === 'fill';
+            let cursor = box.y;
+            let laidAny = false;
+            let out = false;
+            for (let r = 0; r * columns < cells.length; r++) {
+                const row = cells.slice(r * columns, (r + 1) * columns);
+                if (out) {
+                    for (const c of row)
+                        for (const n of c)
+                            spilled.add(n);
+                    continue;
+                }
+                // Each cell at the row's top, to see how far it reaches above and
+                // below its main frame.
+                const measured = row.map((cell, c) => {
+                    const main = byMember.get(cell[0]);
+                    const h = mainHeight(main, colW);
+                    const { boxes, inCell } = layCell(cell, xOf(c), 0, h);
+                    const u = unionRect(inCell.map((n) => boxes.get(n)));
+                    return { cell, main, h, above: Math.max(0, -u.y), below: u.y + u.height };
+                });
+                const above = Math.max(0, ...measured.map((m) => m.above));
+                const below = Math.max(0, ...measured.map((m) => m.below));
+                const rowH = above + below;
+                const fits = cursor + rowH <= foot + 0.5;
+                if (!fits && fit.gridsOn.has(group.name)) {
+                    // This row and the rest go on, whole.
+                    out = true;
+                    for (const c of row)
+                        for (const n of c)
+                            spilled.add(n);
+                    continue;
+                }
+                measured.forEach((m, c) => {
+                    const spare = below - m.below;
+                    let dy = 0;
+                    let h = m.h;
+                    if (spare > 0.01) {
+                        const align = group.rowAlign ?? 'stretch';
+                        if (align === 'end')
+                            dy = spare;
+                        else if (align === 'center')
+                            dy = spare / 2;
+                        else if (align === 'stretch' && stretchable(m.main))
+                            h = Math.min(m.h + spare, px(m.main.maxHeight) ?? Infinity);
+                    }
+                    const { boxes } = layCell(m.cell, xOf(c), cursor + above + dy, h);
+                    if (!fits)
+                        cut.push(...m.cell);
+                    for (const [n, b] of boxes) {
+                        // A row past the grid's foot is cut there: what is cut shows as
+                        // the frames' overflow.
+                        const y = Math.min(b.y, foot);
+                        laidBoxes.set(n, fits ? b : { ...b, y, height: Math.max(0, Math.min(b.y + b.height, foot) - y) });
+                    }
+                });
+                laidAny = true;
+                cursor += rowH + rowGap;
+            }
+            for (const [n, b] of laidBoxes) {
+                // A grid's cells are its template's drawing: no reflow events.
+                declared.set(n, b);
+                rects.set(n, b);
+            }
+            const laidRects = [...laidBoxes.values()];
+            const union = ownBox ?? unionRect(laidRects) ?? { ...box, height: 0 };
+            groupRects.set(group.name, union);
+            groupDeclared.set(group.name, union);
+            return { rects: laidBoxes, spilled, laidAny, clipped: cut };
+        };
         /** Pour a frame's content into its box and record the frame. A frame
          *  whose text the ladder scales (#858) is laid out in a box `1 / scale`
          *  as large, painted at `scale` (`frameMatrix`). */
@@ -1347,9 +1650,11 @@ function composePage(input, template, fit, collapsed) {
                         emptyRules = turned ? blocks.map((b) => ({ ...b, bbox: turnRectAbout(b.bbox, rect, frameModeTurn({ writingMode: turned })) })) : blocks;
                 }
             }
+            const instance = repeated.has(repeatInstance(frame.name)?.frame ?? '') ? repeatInstance(frame.name) : undefined;
             const vdt = {
                 id: frameIdOf(frame.name),
                 name: frame.name,
+                ...(instance ? { repeat: instance } : {}),
                 rect: { ...rect },
                 rotate: frame.rotate + (turned ? frameModeTurn({ writingMode: turned }) : 0),
                 ...(turned ? { writingMode: turned } : {}),
@@ -1375,8 +1680,9 @@ function composePage(input, template, fit, collapsed) {
                 if (q)
                     q.continuesTo = vdt.id;
             }
-            else if (holds && cont?.receivers.has(frame.name)) {
-                // Content from the page before (#859).
+            else if (holds && cont?.receivers.has(frame.name) && !cont.receivers.get(frame.name).whole) {
+                // Content from the page before (#859). (An item of a grid that
+                // came whole, #1061, starts here.)
                 const came = cont.receivers.get(frame.name);
                 vdt.continuedFrom = came.fromFrameId;
                 // From a page of an earlier chapter (#943).
@@ -1436,25 +1742,199 @@ function composePage(input, template, fit, collapsed) {
             frames.push(vdt);
             vdtByName.set(frame.name, vdt);
         };
-        for (const step of composedOrder(template)) {
+        /** A frame's box cut at `clipFoot` (a module cut at its group's foot,
+         *  #1062): what is cut shows as the frame's overflow. */
+        const clipAtFoot = (name, r) => {
+            if (clipFoot === undefined || r.y + r.height <= clipFoot + 0.5)
+                return r;
+            clipped.add(name);
+            const y = Math.min(r.y, clipFoot);
+            const out = { ...r, y, height: Math.max(0, Math.min(r.y + r.height, clipFoot) - y) };
+            rects.set(name, out);
+            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) => {
+            for (const n of names) {
+                const f = byName.get(n);
+                const st = f ? prepare(f).st : undefined;
+                if (!st)
+                    continue;
+                laid.add(headOf(n));
+                spills.set(n, { head: headOf(n), cut: st.cut, advanced, pieces: st.pieces, headBlockId: st.headBlockId, frameId: lastLaid ?? frameIdOf(n), whole: true });
+            }
+        };
+        /** Place (and, `filling`, fill) one step of `composedOrder`. */
+        const runStep = (step, filling) => {
             if (step.kind === 'frame') {
                 const p = prepare(step.frame);
-                fill(p, placeFrame(p));
-                continue;
+                const r = clipAtFoot(step.frame.name, placeFrame(p));
+                if (filling)
+                    fill(p, r);
+                return;
+            }
+            if (step.group.modules) {
+                // A modules group (#1062): its modules, one under another.
+                placeModules(step.group, step.frames);
+                return;
+            }
+            if (step.group.kind === 'grid') {
+                // A grid (#1061): its cells, and the items of the rows left for
+                // another page, which go on whole.
+                const grid = placeGrid(step.group, step.frames);
+                if (!filling)
+                    return;
+                for (const n of grid.clipped)
+                    clipped.add(n);
+                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)));
+                        lastLaid = frameIdOf(f.name);
+                        continue;
+                    }
+                    spillWhole([f.name], grid.laidAny, lastLaid);
+                }
+                return;
             }
             const solved = placeGroup(step.group, step.frames);
             // 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)
-                fill(prepare(f), solved.get(f.name));
-        }
+            for (const f of step.frames) {
+                const r = clipAtFoot(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. */
+        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);
+            let cursor = box.y;
+            let declCursor = box.y;
+            let out = false;
+            let laidAny = false;
+            let lastLaid;
+            const boxes = [];
+            const declBoxes = [];
+            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 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.
+                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));
+                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);
+                restore(groupDeclared, kept.groupDeclared);
+                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;
+                    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);
+                }
+                finally {
+                    clipFoot = undefined;
+                }
+                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 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 });
+                laidAny = true;
+                lastLaid = frameIdOf(names[names.length - 1]);
+                cursor = bottom + gap;
+                declCursor = declBottom + gap;
+            }
+            groupRects.set(group.name, ownBox ?? unionRect(boxes) ?? { ...box, height: 0 });
+            groupDeclared.set(group.name, ownBox ?? unionRect(declBoxes) ?? { ...box, height: 0 });
+        };
+        for (const step of composedOrder(template))
+            runStep(step, true);
         const log = mergeLog(reflowEvents(motionsOf(template, rects, declared), dpi / MM_PER_IN), [...fitLog, ...overflowLog], template);
-        return { frames, blocks, log, laid, needs, pushRects, pushShapes, fitted, notes, spills, wantsOn };
+        return { frames, blocks, log, laid, needs, pushRects, pushShapes, fitted, notes, spills, wantsOn, clipped, groupRects, moduleRects };
     };
     const first = run();
-    const { frames, blocks, log, laid, needs, fitted, notes, spills, wantsOn } = first.pushRects.size > 0 ? run(first.pushRects, first.pushShapes) : first;
-    return { frames, blocks, log, laid, needs, template, fitted, spills, wantsOn, ...(notes.length > 0 ? { notes } : {}) };
+    const { frames, blocks, log, laid, needs, fitted, notes, spills, wantsOn, clipped, groupRects, moduleRects } = first.pushRects.size > 0 ? run(first.pushRects, first.pushShapes) : first;
+    return { frames, blocks, log, laid, needs, template, fitted, spills, wantsOn, clipped, groupRects, moduleRects, ...(notes.length > 0 ? { notes } : {}) };
 }
+/** A module's frame placed by its box's foot or middle, or sized by its
+ *  height (#1062): it does not say how tall the module is. */
+function heldByFoot(f) {
+    if (f.height === 'fill' || (typeof f.height === 'object' && 'percent' in f.height))
+        return true;
+    const anchor = f.placement?.anchor;
+    if (!anchor || anchor.to !== 'container')
+        return false;
+    return FOOT_EDGES.has(anchor.edge);
+}
+/** The nine-point edges below a box's top. */
+const FOOT_EDGES = new Set(['left', 'center', 'right', 'start', 'end', 'bottom-left', 'bottom', 'bottom-right', 'bottom-start', 'bottom-end']);
 /** `r` turned `deg` (±90) about the centre of `about`: an axis-aligned
  *  box again, its width and height swapped. */
 function turnRectAbout(r, about, deg) {
@@ -1600,8 +2080,16 @@ export function styleWithLook(base, look) {
         out.background = look.background;
         out.backgroundEnabled = true;
     }
-    if (look.border?.color)
-        out.border = { ...base.border, color: look.border.color };
+    if (look.border?.color) {
+        // Every side takes the look's border colour too (#1059).
+        const color = look.border.color;
+        const sides = base.border.sides;
+        out.border = {
+            ...base.border,
+            color,
+            ...(sides ? { sides: { top: { ...sides.top, color }, right: { ...sides.right, color }, bottom: { ...sides.bottom, color }, left: { ...sides.left, color } } } : {}),
+        };
+    }
     if (look.stripe?.color)
         out.stripe = { ...base.stripe, color: look.stripe.color };
     if (look.icon?.color)
@@ -1667,7 +2155,9 @@ export function planComposedPages(blocks, plans, source) {
         while (end < blocks.length && !(blocks[end].type === 'containerEnd' && blocks[end].containerId === b.containerId))
             end++;
         end = Math.min(end, blocks.length - 1);
-        if (resolvePageTemplate(source, b.composedPage.template)) {
+        // (A module, #1062, is never laid as a page.)
+        const t = resolvePageTemplate(source, b.composedPage.template);
+        if (t && !isModuleTemplate(t)) {
             const stories = composedStories(i, end, plans);
             const list = [...stories.values()];
             out.set(i, {