@quario/layout 0.1.0 → 0.2.0

package/lib/layout.js

@@ -23,16 +23,16 @@
  */
 import { display, isReportBand, text } from "quario";
 import { balance } from "./balance.js";
-import { adopt, frame, measuring } from "./canvas.js";
-import { familyName } from "./fonts.js";
+import { adopt, adoptSettings, frame, measuring } from "./canvas.js";
 import { intrinsic } from "./image.js";
-import { CELL_PAD, NO_PAD, WHOLE, insetOf, paintBox, sliceInset, unbox } from "./box.js";
-import { BAND, GUTTER, LEAD, col, merge, roled, shift, sizeOf } from "./style.js";
+import { CELL_PAD, NO_PAD, WHOLE, insetOf, isWhole, paintBox, sliceInset, unbox } from "./box.js";
+import { BAND, col, GUTTER, LEAD, merge, roled, shift, sizeOf, vshift } from "./style.js";
 import { atoms, dress, heightOf, wrap } from "./text.js";
 
 /** @typedef {import('./balance.js').Unit} Unit */
 /** @typedef {import('./canvas.js').Canvas} Canvas */
 /** @typedef {import('./canvas.js').Frame} Frame */
+/** @typedef {import('./canvas.js').Settings} Settings */
 /** @typedef {import('./text.js').Line} Line */
 
 // `open` is a stack, one entry per group instance still open: the header items
@@ -47,9 +47,8 @@ import { atoms, dress, heightOf, wrap } from "./text.js";
 /**
  * @typedef {{ canvas: Canvas, open: Group[], gap: number, marks: any[],
  *   starts: number[], region: Region | null, pending: Pending | null,
- *   measured: WeakMap<any, Measured>,
  *   pin: number | null, skipGap: boolean, inHeader: boolean,
- *   route: (event: any, block?: Block | null) => void }} Flow
+ *   route: (event: any, payload?: Block | Measured | null) => void }} Flow
  */
 /**
  * What flow spacing reads of the page: the cursor and whether a strip is open.
@@ -69,13 +68,16 @@ import { atoms, dress, heightOf, wrap } from "./text.js";
  * @typedef {{ bytes: Uint8Array, format: string, w: number, h: number }} Picture
  */
 /**
- * `align` is absent on a split, which has none of its own: alignment is a
- * slot's, reached through the style layering.
+ * `align` and `valign` are absent on a split, which has none of its own:
+ * alignment is a slot's, reached through the style layering.
+ * `drop` is how far below the top of the box the content starts: zero for a
+ * box that is its content's height, and for a slot the slack its `valign`
+ * reads once `splitBlock` has handed the split's height down.
  * `path` names the schema node the block draws, when the event carried one:
  * the box the canvas records for the hit-test.
  * @typedef {{ lines: Line[], picture?: Picture, parts?: SlotPart[],
- *   bg: import('./style.js').Color | null, align?: any, h: number, style?: any,
- *   path?: string,
+ *   bg: import('./style.js').Color | null, align?: any, valign?: any,
+ *   drop: number, h: number, style?: any, path?: string,
  *   inset: { t: number, r: number, b: number, l: number } }} Block
  */
 /**
@@ -113,18 +115,22 @@ let blockOf = (canvas, event, avail, under = null) => {
       picture,
       bg,
       align: text.align,
+      valign: text.valign,
+      drop: 0,
       h: picture.h + inset.t + inset.b,
       style: box,
       path: event.path,
       inset,
     };
   }
-  let size = sizeOf(text, canvas.base);
-  let lines = dress(wrap(canvas, atoms(canvas, event.tokens, text), inner, size), text);
+  let size = sizeOf(text, canvas.settings.base);
+  let lines = dress(wrap(atoms(canvas.settings, event.tokens, text), inner, size), text);
   return {
     lines,
     bg,
     align: text.align,
+    valign: text.valign,
+    drop: 0,
     h: heightOf(lines) + inset.t + inset.b,
     style: box,
     path: event.path,
@@ -155,7 +161,7 @@ let drawPicture = (canvas, block, x, avail) => {
   let at = x + shift(block.align, avail - outer);
   paintBox(canvas, at, canvas.y, outer, block.h, block.style, block.bg);
   canvas.box(block.path, at, canvas.y, outer, block.h);
-  canvas.picture(bytes, format, at + inset.l, canvas.y - inset.t - h, w, h);
+  canvas.picture(bytes, format, at + inset.l, canvas.y - inset.t - block.drop - h, w, h);
   canvas.y -= block.h;
   canvas.fresh = false;
 };
@@ -175,7 +181,7 @@ let drawLines = (canvas, block, x, avail, slice = WHOLE) => {
   let inset = sliceInset(block.inset, slice);
   paintBox(canvas, x, canvas.y, avail, block.h, block.style, block.bg, slice);
   canvas.box(block.path, x, canvas.y, avail, block.h);
-  let y = canvas.y - inset.t;
+  let y = canvas.y - inset.t - block.drop;
   let inner = Math.max(avail - inset.l - inset.r, 1);
   for (let line of block.lines) {
     canvas.drawLine(line, x + inset.l, y, inner, block.align);
@@ -196,12 +202,13 @@ let drawLines = (canvas, block, x, avail, slice = WHOLE) => {
 // table cell already follows, a cell box being painted at the row's height.
 // A shorter slot keeping its own height left daylight under every bordered
 // cell in a row whose slots were not sized alike. Only the height is handed
-// down: lines still start at the top of the box, and a picture is neither
-// scaled nor moved, `fit` having no vertical mode.
+// down: a slot's lines start at the top of the box unless its `valign` reads
+// the slack, and a picture is never scaled, `fit` having no vertical mode --
+// `valign` moves it within the box, it does not fill it.
 // The split's own declarations are the layer under each slot's, so a split
 // styled `bold` reads the same here as it does through CSS inheritance in the
-// HTML target and the `under` layer in XLSX. It has no `align` of its own:
-// alignment is a slot's, reached through that layering.
+// HTML target and the `under` layer in XLSX. It has no `align` or `valign` of
+// its own: alignment is a slot's, reached through that layering.
 /**
  * @type {(canvas: Canvas, event: any, inner: number, text: any,
  *   bg: any, box: any, inset: { t: number, r: number, b: number, l: number }) => Block}
@@ -216,8 +223,20 @@ let splitBlock = (canvas, event, inner, text, bg, box, inset) => {
     if (block.h > h) h = block.h;
     parts.push({ block, w: widths[i] });
   }
-  for (let part of parts) part.block.h = h;
-  return { lines: [], parts, bg, h: h + inset.t + inset.b, style: box, path: event.path, inset };
+  for (let part of parts) {
+    part.block.drop = vshift(part.block.valign, h - part.block.h);
+    part.block.h = h;
+  }
+  return {
+    lines: [],
+    parts,
+    bg,
+    drop: 0,
+    h: h + inset.t + inset.b,
+    style: box,
+    path: event.path,
+    inset,
+  };
 };
 
 /** @type {(slots: { width?: number }[], avail: number) => number[]} */
@@ -314,7 +333,7 @@ let drawBlock = (canvas, block, x, avail) =>
 // Where the cursor's column starts and how wide it is: the strip's, inside a
 // region, and the page's content box outside one. Every drawing call reads
 // these rather than `canvas.margin`/`canvas.content` — the canvas keeps
-// presenting the page, because `pageBox` re-derives page furniture from it.
+// presenting the page, because `pageFrame` re-derives page furniture from it.
 /** @type {(state: Flow) => number} */
 let originOf = (state) =>
   state.canvas.margin + (state.region ? state.region.index * (state.region.width + GUTTER) : 0);
@@ -346,9 +365,6 @@ let ceilOf = (state) => (state.region ? state.region.top : state.canvas.top);
 /** @type {(state: Cursor) => boolean} */
 let freshOf = (state) => (state.region ? state.canvas.y === state.region.top : state.canvas.fresh);
 
-/** @type {(canvas: Canvas, h: number, line: Line, floor: number) => boolean} */
-let hasRoom = (canvas, h, line, floor) => canvas.y - h - line.h >= floor;
-
 // A fresh column always takes at least one line, or nothing would ever fit —
 // which is also what makes a balanced floor a target rather than a bound.
 /** @type {(fresh: boolean, j: number, i: number) => boolean} */
@@ -363,7 +379,7 @@ let grow = (canvas, lines, i, floor, fresh) => {
     h = 0,
     n = lines.length;
   while (j < n) {
-    if (!hasRoom(canvas, h, lines[j], floor) && !takeLine(fresh, j, i)) break;
+    if (!(canvas.y - h - lines[j].h >= floor) && !takeLine(fresh, j, i)) break;
     h += lines[j++].h;
   }
   return { j, h };
@@ -762,7 +778,7 @@ let commit = (state) => {
   restrip(region, region.top);
   for (let entry of held) {
     if (breaksFor(state, region, entry.span)) advance(state);
-    state.route(entry.event, entry.block);
+    state.route(entry.event, entry.payload);
   }
 };
 
@@ -850,17 +866,17 @@ let NESTING = { "group-start": 1, "group-end": -1 };
 // but the flush that draws it measures from the event, so only its height is
 // kept. A buffer that outgrows what the strips could hold has answered the
 // question early: it commits to filling, and everything after it streams.
-/** @type {(state: Flow, event: any, block: Block | null) => void} */
-let buffer = (state, event, block) => {
+/** @type {(state: Flow, event: any, payload: Block | Measured | null) => void} */
+let buffer = (state, event, payload) => {
   let region = /** @type {Region} */ (state.region);
   // The one door into the held list, so it is where the buffer's own walk is
   // kept. A bracket buffered here is a bracket the open stack will not see
   // until the replay places it.
   region.nesting += NESTING[event.type] ?? 0;
-  let entry = entryFor(state, event, block, region.width);
+  let entry = entryFor(state, event, payload, region.width);
   /** @type {any[]} */ (region.held).push(entry);
   region.measured += entry.h;
-  if (event.type === "table-end") region.measured += remeasure(state, region);
+  if (event.type === "table-end") region.measured += remeasure(state, region, entry);
   if (outgrown(state, region)) commit(state);
 };
 
@@ -871,52 +887,59 @@ let buffer = (state, event, block) => {
 // measured at the strip width and its entries are corrected. Both readers of
 // those heights want the real ones: the balance model, and `outgrown`.
 //
-// The replay measures the table again when it draws it. That is the price of
-// keeping `table` the one place a table is laid out, and it is paid once per
-// table per render.
-// The measurement is kept, keyed by the opening event, so the replay draws
-// this table without wrapping every cell a second time. Held per flow rather
-// than per module: the keys are one render's events.
-/** @type {(state: Flow, region: Region) => number} */
-let remeasure = (state, region) => {
+// The measurement then rides the entry that closes the table, so the replay
+// lays it out without wrapping every cell a second time. Nothing outside the
+// buffer holds on to it: `commit` hands the entry to the replay and the
+// replay is the last reader.
+/** @type {(state: Flow, region: Region, closing: any) => number} */
+let remeasure = (state, region, closing) => {
   let held = /** @type {any[]} */ (region.held);
   let at = held.findLastIndex((entry) => entry.event.type === "table-start");
   if (at < 0) return 0;
   let span = held.slice(at);
-  let measured = measureTable(
-    state.canvas,
-    tableOf(span.map((entry) => entry.event)),
-    region.width,
-  );
-  state.measured.set(span[0].event, measured);
-  return retune(span, measured);
-};
-
-// Write the measured heights back over the estimates. `span` is the table's
-// events in the order they were buffered — its opening, its rows, an optional
-// total, then its end — and the measurement comes out in that same order, so
-// the two line up by position and the end simply runs off the shorter list.
+  let buffered = tableOf(span.map((entry) => entry.event));
+  let measured = measureTable(state.canvas, buffered, region.width);
+  closing.payload = measured;
+  return retune(span, buffered, measured);
+};
+
+// Every measured height filed under the event it was measured from: the
+// opening event pays for the headings row, each row and each total for
+// itself. What has no height of its own is simply absent, which is what keeps
+// a new kind of table event landing between a row and a total costless.
+/** @type {(span: any[], buffered: any, measured: Measured) => Map<any, number>} */
+let heightsOf = (span, buffered, measured) => {
+  let by = new Map([[span[0].event, measured.head.h]]);
+  for (let [i, row] of buffered.rows.entries()) by.set(row, measured.laid[i].h);
+  for (let [i, row] of buffered.totals.entries()) by.set(row, measured.totalRows[i].h);
+  return by;
+};
+
+// Write those heights back over the estimates. The correction cannot slide:
+// an entry the measurement filed nothing under keeps the estimate it had.
 // Reports what the correction moved the running total by.
-/** @type {(span: any[], measured: Measured) => number} */
-let retune = (span, measured) => {
-  let heights = [measured.head.h, ...measured.laid.map((/** @type {any} */ laid) => laid.h)];
-  if (measured.totalRows) for (let row of measured.totalRows) heights.push(row.h);
+/** @type {(span: any[], buffered: any, measured: Measured) => number} */
+let retune = (span, buffered, measured) => {
+  let by = heightsOf(span, buffered, measured);
   let delta = 0;
-  for (let [i, h] of heights.entries()) {
-    delta += h - span[i].h;
-    span[i].h = h;
+  for (let entry of span) {
+    let h = by.get(entry.event) ?? entry.h;
+    delta += h - entry.h;
+    entry.h = h;
   }
   return delta;
 };
 
-// One buffered entry: the event, the block the replay will draw it from, and
+// One buffered entry: the event, what the replay is handed along with it, and
 // what it is worth to the running total. A header keeps its block like
 // anything else — the flush that eventually draws it takes the block from the
-// hold rather than wrapping the text again.
-/** @type {(state: Flow, event: any, block: Block | null, width: number) => any} */
-let entryFor = (state, event, block, width) => {
-  let measured = block || measureFor(state, event, width);
-  return { event, block: measured, h: measured ? measured.h : estimate(state, event) };
+// hold rather than wrapping the text again. Only a table's closing entry is
+// ever given a measurement, and `remeasure` puts it there afterwards, so what
+// reaches here is a block or nothing.
+/** @type {(state: Flow, event: any, payload: Block | Measured | null, width: number) => any} */
+let entryFor = (state, event, payload, width) => {
+  let block = /** @type {Block | null} */ (payload) || measureFor(state, event, width);
+  return { event, payload: block, h: block ? block.h : estimate(state, event) };
 };
 
 // The block a buffered event will be drawn from, measured once at the strip
@@ -942,20 +965,10 @@ let anchor = (state) => {
 /** @type {(state: Flow) => Group[]} */
 let pending = (state) => state.open.filter((group) => group.held.length);
 
-// A held run, as blocks. A region measured its headers while buffering them,
-// at this same width, so a replayed run reuses those rather than wrapping the
-// same text a second time (ADR 0027).
-/** @type {(canvas: Canvas, held: any[], avail: number) => Block[]} */
-let blocksOf = (canvas, held, avail) =>
-  held.map((entry) => entry.block || blockOf(canvas, entry.event, avail));
-
 /** @type {(state: Flow, extra: number, runs: Block[][]) => number} */
 let needed = (state, extra, runs) =>
   state.gap + runs.flat().reduce((total, block) => total + block.h, 0) + extra;
 
-/** @type {(state: Flow, need: number) => boolean} */
-let tooTall = (state, need) => need > ceilOf(state) - carried(state) - floorOf(state);
-
 // Degenerate: taller than a page — keep nothing, paginate normally, and
 // repeat nothing afterwards. That last part is what bounds the replayed run
 // for good: every other path drew its headers inside the room a page still
@@ -1001,20 +1014,31 @@ let flush = (state, extra) => {
   let avail = widthOf(state);
   // Measured per instance, so each one takes back exactly the blocks its own
   // headers were drawn from: no flat list to slice, no order to keep in step.
-  let runs = runsFor.map((group) => blocksOf(canvas, group.held, avail));
+  // A held run, as blocks. A region measured its headers while buffering them,
+  // at this same width, so a replayed run reuses those rather than wrapping
+  // the same text a second time (ADR 0027).
+  let runs = runsFor.map((group) =>
+    group.held.map((entry) => entry.block || blockOf(canvas, entry.event, avail)),
+  );
   let need = needed(state, extra, runs);
   // Against what a fresh column has left once the page has replayed what it
   // carries. Inside a region that is a strip, and the replay sits above it.
-  if (tooTall(state, need)) return dropHeld(state, runsFor);
+  if (need > ceilOf(state) - carried(state) - floorOf(state)) return dropHeld(state, runsFor);
   settle(state, need);
   drawHeld(state, runsFor, runs, avail);
 };
 
 // Enough of an item that its group header is never left introducing nothing.
+// The unsplittable blocks are kept whole -- the same `picture || parts` pair
+// `overflow` moves rather than slices. There is no first part of one to keep
+// company with: a split's own `lines` are empty, so clipping to `KEEP_LINES`
+// would reserve nothing at all and strand the run it was called to protect.
 let KEEP_LINES = 2;
 /** @type {(block: Block) => number} */
 let keepWith = (block) =>
-  block.picture ? block.h : Math.min(block.h, heightOf(block.lines.slice(0, KEEP_LINES)));
+  block.picture || block.parts
+    ? block.h
+    : Math.min(block.h, heightOf(block.lines.slice(0, KEEP_LINES)));
 
 // Flush any pending header with this item's opening, then place the item. The
 // block is measured once here and handed on rather than wrapped twice.
@@ -1093,9 +1117,9 @@ let holdHeader = (state, event, title, block = null) => {
 // because the region's estimator reads both, and a constant with two readers
 // and no name drifts between them.
 /** @type {(canvas: Canvas) => number} */
-let rowHeight = (canvas) => LEAD * canvas.base;
+let rowHeight = (canvas) => LEAD * canvas.settings.base;
 /** @type {(canvas: Canvas) => number} */
-let instanceGap = (canvas) => 0.5 * LEAD * canvas.base;
+let instanceGap = (canvas) => 0.5 * LEAD * canvas.settings.base;
 
 // What a fresh strip has to hold to take an instance: the span less the
 // opening gap, which `settle` drops at a strip head. This is the one fact the
@@ -1111,10 +1135,14 @@ let headOf = (canvas, span) => span - instanceGap(canvas);
 // gives flow spacing no meaning inside a table row, in either target.
 /** @type {(canvas: Canvas, cell: any, rowStyle: any) => any} */
 let cellOf = (canvas, cell, rowStyle) => {
-  let style = merge(unbox(rowStyle), unbox(cell.style));
+  // A row's block reaches its cells with no box in it: the engine resolved
+  // that half onto the cells themselves before the event was emitted
+  // (SCHEMA.md, "Style declarations"), which is why the inset and the ink
+  // both read the cell and a row is never asked for a box it cannot have.
+  let style = merge(rowStyle, unbox(cell.style));
   let inset = insetOf(cell.style, CELL_PAD);
-  let list = atoms(canvas, cell.tokens, style);
-  let natural = wrap(canvas, list, Infinity, sizeOf(style, canvas.base)).reduce(
+  let list = atoms(canvas.settings, cell.tokens, style);
+  let natural = wrap(list, Infinity, sizeOf(style, canvas.settings.base)).reduce(
     (widest, line) => Math.max(widest, line.w),
     0,
   );
@@ -1122,6 +1150,7 @@ let cellOf = (canvas, cell, rowStyle) => {
     list,
     natural: natural + inset.l + inset.r,
     align: style.align,
+    valign: style.valign,
     bg: col(style.background),
     underline: !!style.underline,
     strikethrough: !!style.strikethrough,
@@ -1134,18 +1163,24 @@ let cellOf = (canvas, cell, rowStyle) => {
 /** @type {(canvas: Canvas, cells: any[], widths: number[]) => { cells: any[], h: number }} */
 let rowOf = (canvas, cells, widths) => {
   let h = rowHeight(canvas);
+  /** @type {number[]} */
+  let owns = [];
   let out = cells.map((cell, i) => {
     let inner = Math.max(widths[i] - cell.inset.l - cell.inset.r, 1);
     // A glyph or a hard break occupies; spaces alone are an empty cell.
     let lines = cell.list.some(
       (/** @type {{ hard: boolean, space: boolean }} */ atom) => atom.hard || !atom.space,
     )
-      ? dress(wrap(canvas, cell.list, inner, cell.list[0].size), cell)
+      ? dress(wrap(cell.list, inner, cell.list[0].size), cell)
       : [];
-    let cellHeight = heightOf(lines) + cell.inset.t + cell.inset.b;
-    if (cellHeight > h) h = cellHeight;
+    let own = heightOf(lines) + cell.inset.t + cell.inset.b;
+    if (own > h) h = own;
+    owns.push(own);
     return { ...cell, lines };
   });
+  // The row's height is known only now, so the slack each cell's `valign`
+  // reads is measured here, as `splitBlock` measures a slot's.
+  for (let [i, cell] of out.entries()) cell.drop = vshift(cell.valign, h - owns[i]);
   return { cells: out, h };
 };
 
@@ -1169,6 +1204,10 @@ let writeCell = (canvas, cell, lines, x, y, w) => {
 // with, so the ink a slice lays down and the height it was given come from
 // one answer: a continuation starts flush, and only the slice that owns a
 // side strokes it.
+// A row sliced across pages has no one box for `valign` to read the slack
+// against, so its cells paint from the top (SCHEMA.md, the pdf Layout contract).
+/** @type {(cell: any, slice: import('./box.js').Slice) => number} */
+let dropOf = (cell, slice) => (isWhole(slice) ? cell.drop : 0);
 /**
  * @type {(canvas: Canvas, cells: any[], lines: any[][], h: number,
  *   slice: import('./box.js').Slice, xOffsets: number[], widths: number[],
@@ -1180,7 +1219,7 @@ let paintCells = (canvas, cells, lines, h, slice, xOffsets, widths, bg) => {
     fillCell(canvas, cell, bg, xOffsets[i], canvas.y - h, widths[i], h);
     paintBox(canvas, xOffsets[i], canvas.y, widths[i], h, cell.style, null, slice);
     canvas.box(cell.path, xOffsets[i], canvas.y, widths[i], h);
-    let y0 = canvas.y - (slice.first ? cell.inset.t : 0);
+    let y0 = canvas.y - (slice.first ? cell.inset.t : 0) - dropOf(cell, slice);
     writeCell(canvas, cell, lines[i], xOffsets[i], y0, widths[i]);
   }
   canvas.y -= h;
@@ -1192,7 +1231,6 @@ let paintCells = (canvas, cells, lines, h, slice, xOffsets, widths, bg) => {
  *   widths: number[], bg: any) => void}
  */
 let drawRow = (canvas, row, xOffsets, widths, bg) => {
-  let yTop = canvas.y;
   paintCells(
     canvas,
     row.cells,
@@ -1203,18 +1241,69 @@ let drawRow = (canvas, row, xOffsets, widths, bg) => {
     widths,
     bg,
   );
-  paintBox(canvas, xOffsets[0], yTop, sum(widths), row.h, row.style, null);
 };
 
+// The column geometry one row sees. A cell covering several columns starts
+// where the first of them starts and is as wide as all of them together; a row
+// that spans nothing sees the columns themselves, and pays nothing for the
+// feature. `null` spans is that row -- every data row, and every total row
+// whose cells each cover one column.
+/** @type {(cells: any[]) => number[] | null} */
+let spansOf = (cells) =>
+  cells.some((cell) => cell.span > 1) ? cells.map((cell) => cell.span || 1) : null;
+// One value per cell, walking the columns each of them covers. Reached only
+// for a row that spans, so the closure it takes costs nothing per data row.
+/** @type {(spans: number[], pick: (at: number, span: number) => number) => number[]} */
+let overSpans = (spans, pick) => {
+  /** @type {number[]} */
+  let out = [];
+  let at = 0;
+  for (let span of spans) {
+    out.push(pick(at, span));
+    at += span;
+  }
+  return out;
+};
+/** @type {(widths: number[], spans: number[] | null) => number[]} */
+let spanWidths = (widths, spans) =>
+  spans ? overSpans(spans, (at, span) => sum(widths.slice(at, at + span))) : widths;
+/** @type {(xOffsets: number[], spans: number[] | null) => number[]} */
+let spanOffsets = (xOffsets, spans) => (spans ? overSpans(spans, (at) => xOffsets[at]) : xOffsets);
+
 // The widest of each column's header, rows and totals, padding included.
-/** @type {(cols: any[], header: any[], rows: any[], totals: { cells: any[] }[]) => number[]} */
-let naturalWidths = (cols, header, rows, totals) =>
-  cols.map((_, i) => {
-    let widest = header[i].natural;
-    for (let row of rows) widest = Math.max(widest, row.cells[i].natural);
-    for (let row of totals) widest = Math.max(widest, row.cells[i].natural);
-    return widest;
-  });
+//
+// A cell covering more than one column has no say in their widths (SCHEMA.md):
+// what a span states is which columns a cell reaches across, never how wide
+// they are. So a column can end up with no voter at all -- every cell above it
+// spans over it -- which only an empty table reaches, since a data row never
+// spans. It opens at the padding floor rather than at nothing, so an empty
+// table still shows the geometry it promises.
+/**
+ * @typedef {{ cells: any[], spans: number[] | null }} Voting
+ */
+/** @type {(cols: any[], header: Voting, rows: Voting[], totals: Voting[]) => number[]} */
+let naturalWidths = (cols, header, rows, totals) => {
+  /** @type {(number | null)[]} */
+  let widest = cols.map(() => null);
+  /** @type {(at: number, natural: number) => void} */
+  let widen = (at, natural) => {
+    let held = widest[at];
+    if (held === null || natural > held) widest[at] = natural;
+  };
+  /** @type {(row: Voting) => void} */
+  let vote = (row) => {
+    let at = 0;
+    for (let [i, cell] of row.cells.entries()) {
+      let span = row.spans ? row.spans[i] : 1;
+      if (span === 1) widen(at, cell.natural);
+      at += span;
+    }
+  };
+  vote(header);
+  for (let row of rows) vote(row);
+  for (let row of totals) vote(row);
+  return widest.map((width) => (width === null ? CELL_PAD.l + CELL_PAD.r : width));
+};
 
 /** @type {(values: number[]) => number} */
 let sum = (values) => values.reduce((total, value) => total + value, 0);
@@ -1251,7 +1340,7 @@ let columnWidths = (cols, natural, avail) => {
 
 // One table being emitted: what `carryOver`, `sliced` and `put` all need.
 /**
- * @typedef {{ cells: any[], h: number, style?: any }} TableRow
+ * @typedef {{ cells: any[], h: number, style?: any, spans?: number[] | null }} TableRow
  * @typedef {{ state: Flow, head: TableRow,
  *   xOffsets: number[], widths: number[], x: number, avail: number }} Grid
  */
@@ -1267,11 +1356,24 @@ let columnWidths = (cols, natural, avail) => {
 /** @type {(row: { style?: any }) => any} */
 let rowFill = (row) => col((row.style || {}).background);
 
+// What this row draws against: the grid's own columns, or the merged geometry
+// a spanning row sees. Read at draw time rather than kept on the row, because
+// `rebase` moves the offsets under it every time the table crosses a strip.
+/** @type {(grid: Grid, row: TableRow) => { xOffsets: number[], widths: number[] }} */
+let gridOf = (grid, row) =>
+  row.spans
+    ? {
+        xOffsets: spanOffsets(grid.xOffsets, row.spans),
+        widths: spanWidths(grid.widths, row.spans),
+      }
+    : grid;
+
 /** @type {(grid: Grid) => void} */
 let carryOver = (grid) => {
   advance(grid.state);
   rebase(grid);
-  drawRow(grid.state.canvas, grid.head, grid.xOffsets, grid.widths, rowFill(grid.head));
+  let geo = gridOf(grid, grid.head);
+  drawRow(grid.state.canvas, grid.head, geo.xOffsets, geo.widths, rowFill(grid.head));
 };
 
 // Move the grid to the column the cursor is now in. A table's widths are its
@@ -1335,34 +1437,29 @@ let sliceH = (taken, cells, slice) => {
 // Each column reserves its own bottom inset out of the room, the same trade
 // `sliceFloor` makes for an item: a slice that stops short leaves whitespace,
 // one that does not leaves a bottom border under the bottom margin.
-//
-// The row's own box slices with the cells rather than going missing, which is
-// what it did while `drawRow` was the only caller painting it.
 /** @type {(grid: Grid, row: TableRow, bg: any) => void} */
 let sliced = (grid, row, bg) => {
   let canvas = grid.state.canvas;
   let next = row.cells.map(() => 0); // first line of each column not yet placed
   let first = true;
   for (;;) {
+    // Inside the loop, not above it: `carryOver` rebases the grid at the foot
+    // of every slice, and a merged geometry read once would keep painting the
+    // continuations at the strip this row started in.
+    let geo = gridOf(grid, row);
     let cap = canvas.y - canvas.bottom;
     let taken = row.cells.map((/** @type {any} */ cell, /** @type {number} */ i) =>
       takeLines(cell, next, i, first ? cell.inset.t : 0, cap - cell.inset.b),
     );
     let slice = { first, more: stillMore(row, next) };
     let h = sliceH(taken, row.cells, slice);
-    let yTop = canvas.y;
-    paintCells(canvas, row.cells, taken, h, slice, grid.xOffsets, grid.widths, bg);
-    paintBox(canvas, grid.xOffsets[0], yTop, sum(grid.widths), h, row.style, null, slice);
+    paintCells(canvas, row.cells, taken, h, slice, geo.xOffsets, geo.widths, bg);
     if (!slice.more) return;
     carryOver(grid);
     first = false;
   }
 };
 
-/** @type {(grid: Grid) => number} */
-let pageCap = (grid) =>
-  ceilOf(grid.state) - carried(grid.state) - floorOf(grid.state) - grid.head.h;
-
 /** @type {(row: { h: number }, keep: number, cap: number) => number} */
 let companion = (row, keep, cap) => (row.h + keep > cap ? 0 : keep);
 
@@ -1388,7 +1485,7 @@ let put = (grid, row, bg, keep = 0) => {
   // The tallest row a fresh column holds, after the replayed group headers and
   // the replayed column headings. A companion over that can never share a
   // column, so it stops being a reason to break.
-  let cap = pageCap(grid);
+  let cap = ceilOf(grid.state) - carried(grid.state) - floorOf(grid.state) - grid.head.h;
   keep = companion(row, keep, cap);
   // A row that will be sliced anyway is only worth breaking for while this
   // column cannot take even its first slice — beyond that a break buys nothing
@@ -1397,38 +1494,21 @@ let put = (grid, row, bg, keep = 0) => {
   let broke = shouldBreak(grid.state, row, keep, cap);
   if (broke) carryOver(grid);
   if (canvas.y - row.h < canvas.bottom) return sliced(grid, row, bg);
-  drawRow(canvas, row, grid.xOffsets, grid.widths, bg);
+  let geo = gridOf(grid, row);
+  drawRow(canvas, row, geo.xOffsets, geo.widths, bg);
 };
 
-/** @type {(canvas: Canvas, row: any) => { cells: any[], style: any }} */
-let bodyRow = (canvas, row) => ({
-  cells: row.cells.map((/** @type {any} */ cell) => cellOf(canvas, cell, row.style)),
-  style: row.style,
-});
-
-/** @type {(canvas: Canvas, buffered: any) => any} */
-let totalRowsOf = (canvas, buffered) =>
-  buffered.totals.map((/** @type {any} */ row) => ({
-    cells: row.cells.map((/** @type {any} */ cell) => cellOf(canvas, cell, row.style)),
-    style: row.style,
-  }));
-
 /** @type {(laid: any[], totalRows: any[]) => number} */
 let firstH = (laid, totalRows) => (laid.length ? laid[0].h : totalRows.length ? totalRows[0].h : 0);
 
-/** @type {(totalRows: any[]) => number} */
-let totalsH = (totalRows) => totalRows.reduce((h, row) => h + row.h, 0);
-
 /** @type {(grid: Grid, laid: any[], totalRows: any[]) => void} */
 let emitRows = (grid, laid, totalRows) => {
   let last = laid.length - 1;
-  let keep = totalsH(totalRows);
+  let keep = totalRows.reduce((h, row) => h + row.h, 0);
   for (let [i, row] of laid.entries()) put(grid, row, rowFill(row), i === last ? keep : 0);
   for (let row of totalRows) put(grid, row, rowFill(row), 0);
 };
 
-// Lay out a buffered table: measure every cell, allocate the columns, then
-// emit the header, the rows and the total, breaking pages as needed.
 // A buffered table, in the one shape `table` lays out: its columns come from
 // the opening event, its rows are the row events themselves, and its total is
 // the total row's cells. Both readers build it here — the replay, collecting
@@ -1437,18 +1517,21 @@ let emitRows = (grid, laid, totalRows) => {
 /** @type {(events: any[]) => any} */
 let tableOf = (events) => {
   let opening = events[0];
-  let totals = events.filter((event) => event.type === "total-row");
   return {
+    columns: opening.columns.map((/** @type {any} */ col) => ({ ...col })),
     // A header cell arrives without a path of its own; the column's is what
     // its box names, so it rides on the cell from here, where both readers
-    // assemble the table.
-    columns: opening.columns.map((/** @type {any} */ col) => ({
-      ...col,
-      header: { ...col.header, path: col.path },
-    })),
+    // assemble the table. A column a neighbour's span covers declares no
+    // header, so this is the header *row* -- as many cells as the columns
+    // wrote, which is fewer than the columns whenever one spans.
+    header: opening.columns
+      .filter((/** @type {any} */ col) => col.header)
+      .map((/** @type {any} */ col) => ({ ...col.header, path: col.path })),
     headerStyle: opening.style,
     rows: events.filter((event) => event.type === "row"),
-    totals: totals.map((row) => ({ cells: row.cells, style: row.style })),
+    // The events themselves, as `rows` are: a total row is a row, and the
+    // buffer files each corrected height under the event it was measured from.
+    totals: events.filter((event) => event.type === "total-row"),
   };
 };
 
@@ -1463,39 +1546,52 @@ let tableOf = (events) => {
 /** @type {(canvas: Canvas, buffered: any, avail: number) => Measured} */
 let measureTable = (canvas, buffered, avail) => {
   let cols = /** @type {any[]} */ (buffered.columns);
-  let header = cols.map((/** @type {any} */ col) =>
-    cellOf(canvas, col.header, buffered.headerStyle),
+  /** @type {(cells: any[], style: any, spans: number[] | null) => Voting & { style: any }} */
+  let measured = (cells, style, spans) => ({
+    cells: cells.map((/** @type {any} */ cell) => cellOf(canvas, cell, style)),
+    spans,
+    style,
+  });
+  let header = measured(buffered.header, buffered.headerStyle, spansOf(buffered.header));
+  // A data row's cells are the columns' own, so nothing in one can span
+  // (SCHEMA.md, "Span"). Asking each row anyway would scan every cell of the
+  // table to rediscover what the schema already guarantees.
+  let rows = buffered.rows.map((/** @type {any} */ row) => measured(row.cells, row.style, null));
+  let totals = buffered.totals.map((/** @type {any} */ row) =>
+    measured(row.cells, row.style, spansOf(row.cells)),
   );
-  let rows = buffered.rows.map((/** @type {any} */ row) => bodyRow(canvas, row));
-  let totals = totalRowsOf(canvas, buffered);
   let widths = columnWidths(cols, naturalWidths(cols, header, rows, totals), avail);
+  // Each row wraps against the geometry it sees, which is the columns' own
+  // unless one of its cells spans.
+  /** @type {(row: Voting & { style: any }) => any} */
+  let laidOut = (row) => ({
+    ...rowOf(canvas, row.cells, spanWidths(widths, row.spans)),
+    spans: row.spans,
+    style: row.style,
+  });
   return {
     widths,
-    head: { ...rowOf(canvas, header, widths), style: buffered.headerStyle },
-    laid: rows.map((/** @type {any} */ row) => ({
-      ...rowOf(canvas, row.cells, widths),
-      style: row.style,
-    })),
-    totalRows: totals.map((/** @type {any} */ row) => ({
-      ...rowOf(canvas, row.cells, widths),
-      style: row.style,
-    })),
+    head: laidOut(header),
+    laid: rows.map(laidOut),
+    totalRows: totals.map(laidOut),
   };
 };
 
-/** @type {(state: Flow, buffered: any) => void} */
-let table = (state, buffered) => {
+// Lay out one table from the events it arrived as: measure every cell,
+// allocate the columns, then emit the header, the rows and the total,
+// breaking pages as needed.
+/** @type {(state: Flow, events: any[], ready: Measured | null) => void} */
+let table = (state, events, ready) => {
   let canvas = state.canvas;
   // A table inside a region is measured against the strip, not the page: an
   // authored `width` percentage is a share of the column it lands in
   // (SCHEMA.md, "Page columns").
   let avail = widthOf(state);
   let x = originOf(state);
-  // Measured already if a region buffered this table: the balance model needed
-  // its real row heights, at this same width, and that is the same
-  // measurement — so the replay draws it without wrapping every cell again.
-  let { widths, head, laid, totalRows } =
-    state.measured.get(buffered.opening) || measureTable(canvas, buffered, avail);
+  // Handed a measurement if a region buffered this table: the balance model
+  // needed its real row heights, at this same width, and that is the same
+  // measurement — so the replay neither shapes the table nor wraps a cell.
+  let { widths, head, laid, totalRows } = ready || measureTable(canvas, tableOf(events), avail);
   let xOffsets = widths.map((_, i) => x + sum(widths.slice(0, i)));
 
   /** @type {Grid} */
@@ -1507,7 +1603,8 @@ let table = (state, buffered) => {
     advance(state);
     rebase(grid);
   }
-  drawRow(canvas, grid.head, grid.xOffsets, widths, rowFill(grid.head));
+  let headGeo = gridOf(grid, grid.head);
+  drawRow(canvas, grid.head, headGeo.xOffsets, headGeo.widths, rowFill(grid.head));
   // The last data row keeps the whole emitted total block with it, so a
   // total is never stranded alone at a page top.
   emitRows(grid, laid, totalRows);
@@ -1541,9 +1638,11 @@ let band = (canvas, items, yTop) => {
 // Measure a band without drawing it, to reserve its height. The trial render
 // goes onto a measuring canvas of its own, which can draw nothing and holds
 // nothing through which a document could be reached — so it runs while a live
-// canvas is open on one, with no live state for it to disturb.
-/** @type {(geo: Frame, fonts: any, items: any[]) => number} */
-let probe = (geo, fonts, items) => band(measuring(geo, fonts), items, 0);
+// canvas is open on one, with no live state for it to disturb. The settings it
+// measures against are the render's own object, not a copy — `Settings` in
+// `canvas.js` says what that buys.
+/** @type {(geo: Frame, settings: Settings, items: any[]) => number} */
+let probe = (geo, settings, items) => band(measuring(geo, settings), items, 0);
 
 // The pages every band is probed on, and the whole of what reservation assumes
 // about where a band varies. Two anchors cover each visibility edge — a band
@@ -1567,11 +1666,11 @@ let PROBES = [
  * Pure, and measured against the page box rather than a live canvas: what a
  * band needs is a property of the page.
  *
- * @type {(geo: Frame, fonts: any, bands: any) => Frame}
+ * @type {(geo: Frame, settings: Settings, bands: any) => Frame}
  */
-let reserve = (geo, fonts, bands) => {
+let reserve = (geo, settings, bands) => {
   let height = (/** @type {(page: any) => any[]} */ items) =>
-    Math.max(...PROBES.map((page) => probe(geo, fonts, items(page))));
+    Math.max(...PROBES.map((page) => probe(geo, settings, items(page))));
   return {
     ...geo,
     top: geo.top - (bands.header ? height(bands.header) + BAND : 0),
@@ -1579,18 +1678,14 @@ let reserve = (geo, fonts, bands) => {
   };
 };
 
-// The page box a canvas presents, before any band narrowed it. `frame` owns how
-// `top`/`bottom` fall out of a page and a margin — "so no caller and no suite
-// has to restate it", as it says next door — and both halves of page furniture
-// want it: reservation to measure against, the draw pass to hang the header
-// from.
+// The page frame a canvas presents, before any band narrowed it. `frame` owns
+// how `top`/`bottom` fall out of a page and a margin — "so no caller and no
+// suite has to restate it", as it says next door — and both halves of page
+// furniture want it: reservation to measure against, the draw pass to hang the
+// header from. Named apart from `page.js`'s exported `pageBox`, which validates
+// a host's `page` option and is a different thing entirely.
 /** @type {(canvas: Canvas) => Frame} */
-let pageBox = (canvas) =>
-  Object.assign(frame(canvas.width, canvas.height, canvas.margin, canvas.base, canvas.family), {
-    locale: canvas.locale,
-    currency: canvas.currency,
-    timeZone: canvas.timeZone,
-  });
+let pageFrame = (canvas) => frame(canvas.width, canvas.height, canvas.margin);
 
 // One finished page's furniture, drawn in the strips `reserve` left for it:
 // the header hanging from the top margin, the footer resting on the bottom
@@ -1600,7 +1695,7 @@ let pageBox = (canvas) =>
 // that made room for them.
 /** @type {(canvas: Canvas, bands: any, anchor: any) => void} */
 let furniture = (canvas, bands, anchor) => {
-  if (bands.header) band(canvas, bands.header(anchor), pageBox(canvas).top);
+  if (bands.header) band(canvas, bands.header(anchor), pageFrame(canvas).top);
   if (bands.footer) band(canvas, bands.footer(anchor), canvas.bottom - BAND);
 };
 
@@ -1651,10 +1746,6 @@ let flow = (canvas) => {
     starts: [0],
     region: null,
     pending: null,
-    // What a region already measured, keyed by the table's opening event, so
-    // the replay draws that table without wrapping every cell a second time.
-    // Per flow, because the keys are one render's events.
-    measured: new WeakMap(),
     pin: null,
     skipGap: false,
     inHeader: false,
@@ -1690,7 +1781,11 @@ let flow = (canvas) => {
       ? holdHeader(state, event, null, block)
       : placeItem(state, event, block);
 
-  /** @type {Record<string, (event: any, block: Block | null) => void>} */
+  // What each event does once it is placed. The payload is typed loosely here
+  // and nowhere else: this table is where the event type picks the handler,
+  // so each one already knows whether it was handed a block or a measurement,
+  // and no type can say that for the table as a whole.
+  /** @type {Record<string, (event: any, payload: any) => void>} */
   let placed = {
     // A header is held rather than placed, and holding is bookkeeping the
     // replay has to see in its original order — which is why it routes like
@@ -1718,13 +1813,15 @@ let flow = (canvas) => {
     "table-start": (event) => void (collected = [event]),
     row: (event) => void collected.push(event),
     "total-row": (event) => void collected.push(event),
-    "table-end": () => {
-      table(state, { ...tableOf(collected), opening: collected[0] });
+    // The measurement rides the closing event when a region buffered this
+    // table; anywhere else there is none and `table` takes its own.
+    "table-end": (event, ready) => {
+      table(state, collected, ready);
       collected = [];
     },
   };
-  /** @type {(event: any, block: Block | null) => void} */
-  let place = (event, block) => placed[event.type](event, block);
+  /** @type {(event: any, payload: Block | Measured | null) => void} */
+  let place = (event, payload) => placed[event.type](event, payload);
 
   // Which depth owes or holds the strips, whether or not any content has
   // opened them yet: an instance that emits nothing still closes with a
@@ -1759,14 +1856,17 @@ let flow = (canvas) => {
 
   // Route one event: the declaring node's own bands stay full-width, region
   // content opens the strips owed to it, and anything arriving while a region
-  // is still deciding is buffered rather than placed.
-  /** @type {(event: any, block?: Block | null) => void} */
-  let route = (event, block = null) => {
+  // is still deciding is buffered rather than placed. The payload is the work
+  // already done for this event — a block off the walk, or, on the replay of
+  // a buffered table, the measurement the buffer took. Which of the two it is
+  // follows from the event's type, the same way the handler table dispatches.
+  /** @type {(event: any, payload?: Block | Measured | null) => void} */
+  let route = (event, payload = null) => {
     snapPin(event);
-    if (fullBand(event)) fullWidth(event, block);
-    else if (deciding()) buffer(state, event, block);
+    if (fullBand(event)) fullWidth(event, payload);
+    else if (deciding()) buffer(state, event, payload);
     else if (opens(event)) begin(event);
-    else place(event, block);
+    else place(event, payload);
   };
 
   state.route = route;
@@ -1801,13 +1901,13 @@ let flow = (canvas) => {
   // owed survives a report header — that band arrives before the body it
   // columns — but not the owner's own footer, which is the end of what it
   // would have columned.
-  /** @type {(event: any, block: Block | null) => void} */
-  let fullWidth = (event, block) => {
+  /** @type {(event: any, payload: Block | Measured | null) => void} */
+  let fullWidth = (event, payload) => {
     // Asked before the region closes, because that is what it reads.
     let own = ownFooter(event);
     closeRegion(state);
     if (own) state.pending = null;
-    place(event, block);
+    place(event, payload);
   };
 
   // The first content of a columned node. The node's own header run is drawn
@@ -1824,28 +1924,6 @@ let flow = (canvas) => {
     buffer(state, event, block);
   };
 
-  // The report default onto the canvas, before anything is measured. It is
-  // narrowed to `family` and `size`, and each replaces this target's own
-  // baseline outright: row heights and band gaps scale with the document's
-  // type rather than staying at a size nothing is set in, and text declaring
-  // no family is set in the document's. Lifting the pair here is the whole of
-  // this target's reading of docs/adr/0033 -- the default reaches a node as a
-  // fallback the canvas carries, never as a layer merged into its style, so a
-  // document-wide fact costs no allocation however many cells a report has.
-  //
-  // `sizeOf` and `familyName` are this target's one reading each of what a
-  // declared size and family amount to, so they read the default here too --
-  // both reach this unchecked from a computed style, and two spellings of that
-  // leniency would drift. Each falls back to what the canvas already carries,
-  // so a default declaring one of the pair leaves the other alone, and one
-  // whose value is unusable leaves this target's own baseline standing.
-  /** @type {(style: any) => void} */
-  let adoptDefault = (style) => {
-    if (!style) return;
-    canvas.base = sizeOf(style, canvas.base);
-    canvas.family = familyName(style) || canvas.family;
-  };
-
   /** @type {(event: any) => void} */
   let pinHeader = (event) => {
     if (event.headerHeight == null) return;
@@ -1860,10 +1938,9 @@ let flow = (canvas) => {
     handlers: {
       "report-start": (event) => {
         opening = event;
-        canvas.locale = event.locale;
-        canvas.currency = event.currency;
-        canvas.timeZone = event.timeZone;
-        adoptDefault(event.style);
+        // Every document-wide fact this target reads, settled in one place and
+        // once: `canvas.js` owns what they are and what taking them means.
+        adoptSettings(canvas.settings, event);
         if (event.columns) state.pending = { count: event.columns, owner: -1 };
         if (!event.page) {
           pinHeader(event);
@@ -1875,7 +1952,7 @@ let flow = (canvas) => {
         // one thing a measurement must not be able to do. What a band needs is
         // a property of the page box in any case, not of a content box
         // something may already have narrowed.
-        adopt(canvas, reserve(pageBox(canvas), canvas.fonts, event.page));
+        adopt(canvas, reserve(pageFrame(canvas), canvas.settings, event.page));
         pinHeader(event);
       },
       // Everything else routes: `placed` above says what each event does, and