@quario/layout 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -7,6 +7,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4.0] - 2026-09-07
+
+### Added
+
+- **Per-run typography, decoration and highlights.** A styled run resolves its
+  own face, size and colour, and a line takes the largest size among its runs.
+  `underline` and `strikethrough` are drawn per run — over that run's width, in
+  that run's colour — where they used to stroke the whole line in the first
+  piece's colour. A run's `background` paints a highlight rectangle behind its
+  text; a cell's own background is still painted once, at cell scope.
+
+- **`checkFonts` is public.** It checks the shape of a `fonts` mapping without
+  loading a parser, and takes an optional name to prefix a failure with, the
+  way `pageBox` does — so a surface validating its own `fonts` property can
+  report the mistake against that property rather than against
+  `options.fonts`.
+
+### Fixed
+
+- **An outline `Mark` carries only what it declares.** Every mark shipped an
+  extra `titled` boolean — bookkeeping for whether a header had claimed the
+  entry — which was never part of the `Mark` interface and which nothing
+  reads. It is the open group instance's own state now, and no longer travels
+  on the object a consumer receives.
+
 ## [0.3.0] - 2026-09-07
 
 ### Added

package/lib/canvas.js

@@ -24,7 +24,7 @@
  * `y` descending, the way a screen reads. Points throughout.
  */
 import { baseSans } from "./fonts.js";
-import { BLACK, dressed, shift } from "./style.js";
+import { BLACK, shift } from "./style.js";
 
 /** @typedef {import('./page.js').Frame} Frame */
 /** @typedef {import('./text.js').Line} Line */
@@ -71,27 +71,55 @@ import { BLACK, dressed, shift } from "./style.js";
  */
 let blank = (box, render) => ({ ...box, settings: render, y: 0, fresh: true });
 
-// Text decoration in the text colour. Thickness and offset come from the
-// line's ascender (the face metric already measured for baseline placement).
-// Empty lines (no width) draw nothing. Shared by the listing adapter and the
-// layout suite's recorder so both exercise the same path.
-/** @type {(line: Line) => Color} */
-let ink = (line) => (line.pieces[0] && line.pieces[0].color) || BLACK;
+// A styled run's `background`, painted behind its text as a highlight over
+// that run's width and the line's full height -- the same rectangle a cell's
+// own background is, one stretch narrower. All of a line's highlights are
+// painted before any of its glyphs, so a rectangle behind one run can never
+// land on top of the run before it. Shared with the layout suite's recorder
+// for the reason `decorateLine` is.
+/**
+ * @type {(rect: (color: Color, x: number, y: number, w: number, h: number) => void,
+ *   line: Line, left: number, yTop: number) => void}
+ */
+let highlightLine = (rect, line, left, yTop) => {
+  let cursor = left;
+  for (let piece of line.pieces) {
+    if (piece.bg) rect(piece.bg, cursor, yTop - line.h, piece.w, line.h);
+    cursor += piece.w;
+  }
+};
 
-/** @type {(line: Line) => boolean} */
-let wantsDeco = (line) => !!line.w && dressed(line);
+// Text decoration, drawn per piece: over that piece's width, in that piece's
+// colour. A rule across the whole line in the first piece's colour is what
+// this used to be, and it is exactly what "underline a word" cannot mean
+// (ADR 0061). Thickness and offset stay the line's, from the ascender already
+// measured for baseline placement, so one line's rules sit at one height
+// whatever sizes it mixes. Empty lines (no width) draw nothing. Shared by the
+// listing adapter and the layout suite's recorder so both exercise the same
+// path.
+/**
+ * @type {(stroke: (x1: number, x2: number, y: number, thickness: number, color: Color) => void,
+ *   piece: Line['pieces'][number], line: Line, left: number, baseline: number) => void}
+ */
+let decoratePiece = (stroke, piece, line, left, baseline) => {
+  let thickness = Math.max(line.asc / 12, 0.5);
+  let right = left + piece.w;
+  let color = piece.color || BLACK;
+  if (piece.underline) stroke(left, right, baseline - line.asc * 0.12, thickness, color);
+  if (piece.strikethrough) stroke(left, right, baseline + line.asc * 0.35, thickness, color);
+};
 
 /**
  * @type {(stroke: (x1: number, x2: number, y: number, thickness: number, color: Color) => void,
  *   line: Line, left: number, baseline: number) => void}
  */
 let decorateLine = (stroke, line, left, baseline) => {
-  if (!wantsDeco(line)) return;
-  let thickness = Math.max(line.asc / 12, 0.5);
-  let right = left + line.w;
-  let color = ink(line);
-  if (line.underline) stroke(left, right, baseline - line.asc * 0.12, thickness, color);
-  if (line.strikethrough) stroke(left, right, baseline + line.asc * 0.35, thickness, color);
+  if (!line.w) return;
+  let cursor = left;
+  for (let piece of line.pieces) {
+    decoratePiece(stroke, piece, line, cursor, baseline);
+    cursor += piece.w;
+  }
 };
 
 /**
@@ -172,6 +200,7 @@ let listing = (box, render) => {
   /** @type {Canvas['drawLine']} */
   let drawLine = (line, x, yTop, avail, align) => {
     let left = x + shift(align, avail - line.w);
+    highlightLine(rect, line, left, yTop);
     let cursor = left;
     for (let piece of line.pieces) {
       writePiece(piece, line, cursor, yTop);
@@ -307,4 +336,4 @@ let stamp = (canvas, text) => {
   };
 };
 
-export { adopt, decorateLine, listing, measuring, stamp };
+export { adopt, decorateLine, highlightLine, listing, measuring, stamp };

package/lib/fonts.js

@@ -161,9 +161,9 @@ let useFontkit = async () => {
   }
 };
 
-/** @type {(name: string, def: any) => string} */
-let asFamily = (name, def) => {
-  let path = "options.fonts." + name;
+/** @type {(name: string, def: any, at: string) => string} */
+let asFamily = (name, def, at) => {
+  let path = at + "." + name;
   if (!def || typeof def !== "object")
     throw Error(path + ": expected { regular, bold?, italic?, boldItalic? }");
   if (def.regular == null) throw Error(path + ".regular: required");
@@ -241,7 +241,9 @@ let remembered = (source, key, make) => {
 // resolvable once the family is named.
 /** @type {(fontkit: any, name: string, def: any) => Face[]} */
 let familyOf = (fontkit, name, def) => {
-  let path = asFamily(name, def);
+  // Always the factory's own option here: loading happens behind `layout()`,
+  // and a surface that named it something else has already validated it.
+  let path = asFamily(name, def, "options.fonts");
   let family = name.toLowerCase();
   /** @type {Face[]} */
   let faces = [];
@@ -278,15 +280,23 @@ export async function loadFonts(custom) {
 }
 
 /**
- * Check the shape of a host's font mapping without loading a parser: the
- * factory call is where a malformed option is reported.
+ * Check the shape of a host's font mapping without loading a parser.
+ *
+ * `at` names the property in the message, the way `pageBox` takes one: the
+ * factory call reports `options.fonts`, but a surface element validating its
+ * own `fonts` property before any render has a different name for the same
+ * value, and a host mistake is named on the property that carries it.
+ *
+ * Only the shape. A face that will not parse, or a missing parser, is found
+ * while the report is measured and is a render failure there.
  *
  * @param {any} custom `options.fonts`, or null.
+ * @param {string} [at] What to call it in the message.
  */
-export let checkFonts = (custom) => {
+export let checkFonts = (custom, at = "options.fonts") => {
   if (custom == null) return;
-  if (typeof custom !== "object") throw Error("options.fonts: expected a record of families");
-  for (let [name, def] of Object.entries(custom)) asFamily(name, def);
+  if (typeof custom !== "object") throw Error(at + ": expected a record of families");
+  for (let [name, def] of Object.entries(custom)) asFamily(name, def, at);
 };
 
 // What a declared `family` normalises to before it is looked up: lower case,

package/lib/index.d.ts

@@ -232,3 +232,13 @@ export function pageBox(
   page?: LayoutPage,
   at?: string,
 ): { width: number; height: number; margin: number };
+
+/**
+ * Check the shape of a `fonts` mapping, throwing where it is malformed. `at`
+ * prefixes a failure with the option's name, so a surface validating its own
+ * `fonts` property names that rather than `options.fonts`.
+ *
+ * Only the shape: a face that will not parse, or a missing parser, is found
+ * while the report is measured and is a render failure there.
+ */
+export function checkFonts(fonts?: LayoutFonts | null, at?: string): void;

package/lib/index.js

@@ -29,6 +29,7 @@ import { settings } from "./settings.js";
 
 export { PX_PER_POINT, hit, paint } from "./paint.js";
 export { pageBox } from "./page.js";
+export { checkFonts } from "./fonts.js";
 
 // The options are described once, in the hand-written public declarations, and
 // read back here — a second copy in JSDoc is a copy that drifts.

package/lib/layout.js

@@ -23,12 +23,33 @@
  */
 import { display, imageError, isReportBand, text } from "quario";
 import { balance } from "./balance.js";
+/** `Measured` is the measured table's own type, and the flow passes one
+ * through: the region buffer measures early and the replay hands it back.
+ * @import { Measured, TableRow } from './measure.js' */
+
+/** One table being emitted: what `carryOver`, `sliced` and `put` all need. It
+ * holds the flow, so it is the band flow's own — the measured half never sees
+ * a cursor.
+ * @typedef {{ state: Flow, head: TableRow,
+ *   xOffsets: number[], widths: number[], x: number, avail: number }} Grid */
+import { gridOf, measureTable, sum, tableOf } from "./measure.js";
 import { adopt, measuring } from "./canvas.js";
 import { frame } from "./page.js";
 import { intrinsic } from "./image.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";
+import {
+  BAND,
+  col,
+  GUTTER,
+  instanceGap,
+  merge,
+  roled,
+  rowHeight,
+  shift,
+  sizeOf,
+  vshift,
+} from "./style.js";
+import { atoms, heightOf, wrap } from "./text.js";
 
 /** @typedef {import('./balance.js').Unit} Unit */
 /** @typedef {import('./canvas.js').Canvas} Canvas */
@@ -45,7 +66,7 @@ import { atoms, dress, heightOf, wrap } from "./text.js";
 // indexes where a `reset: "page"` sequence begins (the document itself is the
 // sequence that starts at page 0).
 /**
- * @typedef {{ held: any[], blocks: Block[], gap: number, skip: boolean }} Group
+ * @typedef {{ pending: any[], blocks: Block[], gap: number, skip: boolean, titled: boolean }} Group
  */
 /**
  * @typedef {{ canvas: Canvas, open: Group[], gap: number, marks: any[],
@@ -149,7 +170,7 @@ let blockOf = (canvas, event, avail, under = null) => {
     };
   }
   let size = sizeOf(text, canvas.settings.base);
-  let lines = dress(wrap(atoms(canvas.settings, event.tokens, text), inner, size), text);
+  let lines = wrap(atoms(canvas.settings, event.tokens, text), inner, size);
   return {
     lines,
     bg,
@@ -686,7 +707,7 @@ let stripWidth = (state, count) => (state.canvas.content - GUTTER * (count - 1))
 //
 // It opens buffering: what the strips do with the content depends on how much
 // of it there is, and that is not known until the region ends or outgrows a
-// page. `held` is that buffer; `null` means the region has committed.
+// page. `held` is that buffer; `null` means the region has decided.
 /** @type {(state: Flow) => void} */
 let openRegion = (state) => {
   let owed = state.pending;
@@ -808,13 +829,15 @@ let stripHeight = (state, region, own) =>
     ? null
     : balance(unitsOf(state, own), region.count, roomOf(state, region), rowHeight(state.canvas));
 
-// Commit the region: decide the strip height, stop holding, and hand the held
+// Decide the region: settle the strip height, stop holding, and hand the held
 // entries back in the order they arrived, for `flow`'s `replay` to walk.
+// Not `commit`: the editor's session already spends that word on a gesture
+// ending, and git spends it on a commit.
 //
 // Marking the spans is also what picks out the region's own children, and the
 // height is decided from those — so it runs before the replay, not with it.
 /** @type {(state: Flow) => any[]} */
-let commit = (state) => {
+let decide = (state) => {
   let region = /** @type {Region} */ (state.region);
   let held = /** @type {any[]} */ (region.held);
   region.height = stripHeight(state, region, spans(held));
@@ -1031,7 +1054,7 @@ let anchor = (state) => {
 };
 
 /** @type {(state: Flow) => Group[]} */
-let pending = (state) => state.open.filter((group) => group.held.length);
+let pending = (state) => state.open.filter((group) => group.pending.length);
 
 /** @type {(state: Flow, extra: number, runs: Block[][]) => number} */
 let needed = (state, extra, runs) =>
@@ -1042,12 +1065,12 @@ let needed = (state, extra, runs) =>
 // for good: every other path drew its headers inside the room a page still
 // had, so a run always leaves space for the content it introduces.
 /** @type {(state: Flow, holding: Group[]) => void} */
-let dropHeld = (state, holding) => {
-  let held = holding.flatMap((group) => group.held);
-  for (let group of holding) group.held = [];
+let dropPending = (state, holding) => {
+  let waiting = holding.flatMap((group) => group.pending);
+  for (let group of holding) group.pending = [];
   state.gap = 0;
   anchor(state);
-  for (let entry of held) item(state, entry.event, entry.block);
+  for (let entry of waiting) item(state, entry.event, entry.block);
 };
 
 /** @type {(state: Flow, need: number) => void} */
@@ -1065,12 +1088,12 @@ let settle = (state, need) => {
 // — the turn above already did — so an instance taking its blocks the moment
 // they are drawn can never have them replayed on top of themselves.
 /** @type {(state: Flow, holding: Group[], runs: Block[][], avail: number) => void} */
-let drawHeld = (state, holding, runs, avail) => {
+let drawPending = (state, holding, runs, avail) => {
   let x = originOf(state);
   for (let [i, group] of holding.entries()) {
     for (let block of runs[i]) drawBlock(state.canvas, block, x, avail);
     group.blocks.push(...runs[i]);
-    group.held = [];
+    group.pending = [];
   }
 };
 
@@ -1086,14 +1109,14 @@ let flush = (state, extra) => {
   // 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)),
+    group.pending.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 (need > ceilOf(state) - carried(state) - floorOf(state)) return dropHeld(state, runsFor);
+  if (need > ceilOf(state) - carried(state) - floorOf(state)) return dropPending(state, runsFor);
   settle(state, need);
-  drawHeld(state, runsFor, runs, avail);
+  drawPending(state, runsFor, runs, avail);
 };
 
 // Enough of an item that its group header is never left introducing nothing.
@@ -1126,7 +1149,7 @@ let keepBlock = (state, event, width) =>
 // Is anything waiting on this item's arrival — a header run, or the gap an
 // instance opens with?
 /** @type {(state: Flow) => boolean} */
-let holding = (state) => state.open.some((group) => group.held.length) || state.gap > 0;
+let holding = (state) => state.open.some((group) => group.pending.length) || state.gap > 0;
 
 // A half-line gap before each instance (dropped at a page top by `flush`)
 // keeps groups reading as blocks. Every instance becomes an outline entry.
@@ -1159,7 +1182,7 @@ let openGroup = (state, event) => {
   let skip = state.skipGap;
   state.gap = skip ? 0 : Math.max(state.gap, instanceGap(state.canvas));
   state.skipGap = false;
-  state.open.push({ held: [], blocks: [], gap, skip });
+  state.open.push({ pending: [], blocks: [], gap, skip, titled: false });
   state.marks.push(markFor(event));
 };
 
@@ -1195,7 +1218,6 @@ let markFor = (event) => ({
   // display(), not String(): a Date group key must title its outline bookmark
   // with the same ISO 8601 UTC text its cells render, on every machine.
   title: event.name + ": " + display(event.key),
-  titled: false,
   depth: event.depth,
   page: -1,
   y: 0,
@@ -1205,24 +1227,24 @@ let markFor = (event) => ({
 // page bottom. The instance's first header titles its outline entry.
 /** @type {(state: Flow, event: any, title: string | null, block?: Block | null) => void} */
 let holdHeader = (state, event, title, block = null) => {
+  let group = state.open[state.open.length - 1];
   let mark = state.marks[state.marks.length - 1];
+  // Whether a header has claimed this entry is the open instance's own fact,
+  // not the outline entry's: a Mark is what a consumer receives, and it
+  // carries only what `index.d.ts` declares. The two records correspond here
+  // because `openGroup` pushes them together and this only ever runs inside
+  // that instance's own header band, before any nested group opens -- groups
+  // pop from `open` while their marks stay, so nowhere else may assume it.
+  //
   // A picture has no words to title an outline entry with, so it holds its
   // place in the run and leaves the title to the next header that has some.
-  if (mark && !mark.titled && title != null) {
-    mark.titled = true;
+  if (mark && !group.titled && title != null) {
+    group.titled = true;
     mark.title = title;
   }
-  state.open[state.open.length - 1].held.push({ event, block });
+  group.pending.push({ event, block });
 };
 
-// A table row's floor height and the gap a group instance opens with: named
-// 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.settings.base;
-/** @type {(canvas: Canvas) => number} */
-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
 // balance model and the placement rule have to agree on, so both read it here
@@ -1232,60 +1254,6 @@ let headOf = (canvas, span) => span - instanceGap(canvas);
 
 // --- tables -----------------------------------------------------------------
 
-// Pre-measure one cell: wrapped lines per column width come later; natural
-// width first (no wrapping except hard breaks). `mt`/`mb` go unread: SCHEMA.md
-// 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) => {
-  // 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.settings, cell.tokens, style);
-  let natural = wrap(list, Infinity, sizeOf(style, canvas.settings.base)).reduce(
-    (widest, line) => Math.max(widest, line.w),
-    0,
-  );
-  return {
-    list,
-    natural: natural + inset.l + inset.r,
-    align: style.align,
-    valign: style.valign,
-    bg: col(style.background),
-    underline: !!style.underline,
-    strikethrough: !!style.strikethrough,
-    inset,
-    style: cell.style,
-    path: cell.path,
-  };
-};
-
-/** @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(cell.list, inner, cell.list[0].size), cell)
-      : [];
-    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 };
-};
-
 /** @type {(canvas: Canvas, cell: any, bg: any, x: number, y: number, w: number, h: number) => void} */
 let fillCell = (canvas, cell, bg, x, y, w, h) => {
   if (cell.bg && cell.bg !== bg) canvas.rect(cell.bg, x, y, w, h);
@@ -1345,107 +1313,7 @@ let drawRow = (canvas, row, xOffsets, widths, bg) => {
   );
 };
 
-// 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.
-//
-// 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);
-
-// An authored `width` percentage fixes its column; the rest share what is left
-// in proportion to their natural widths. Three cases, one return each — the
-// fall-through is all-authored within budget, honoured exactly.
-//
-// There is no over-commitment case: the engine rejects a document whose fixed
-// shares leave the width-less columns nothing, so `left` is positive whenever
-// an auto column exists and the fixed shares never exceed the content width.
-// That invariant is asserted rather than trusted — falling through with auto
-// columns unplaced would draw them at zero width, an invisible failure — the
-// same fail-loud posture as the measuring canvas's `newPage`.
-/** @type {(cols: any[], natural: number[], avail: number) => number[]} */
-let columnWidths = (cols, natural, avail) => {
-  let fixed = cols.map((column) => Number.isFinite(column.width));
-  if (!fixed.some(Boolean)) {
-    // Natural widths always carry the cell padding, so the sum is never zero.
-    let wanted = sum(natural);
-    return natural.map((width) => (width * avail) / wanted);
-  }
-  let widths = cols.map((col, i) => (fixed[i] ? (col.width / 100) * avail : 0));
-  let auto = natural.map((width, i) => (fixed[i] ? 0 : width));
-  let left = avail - sum(widths);
-  let wanted = sum(auto);
-  // Room for the auto columns: they share what the fixed ones left.
-  if (wanted > 0) {
-    if (left <= 0) throw new Error("over-committed column widths reached the layout");
-    return widths.map((width, i) => (fixed[i] ? width : (auto[i] * left) / wanted));
-  }
-  return widths;
-};
-
-// One table being emitted: what `carryOver`, `sliced` and `put` all need.
-/**
- * @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
- */
 
 // Continue in a fresh column: a table that spans columns or pages restates its
 // headings, under whatever headers the open groups replay above them. Both
@@ -1458,18 +1326,6 @@ 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);
@@ -1611,70 +1467,6 @@ let emitRows = (grid, laid, totalRows) => {
   for (let row of totalRows) put(grid, row, rowFill(row), 0);
 };
 
-// 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
-// events as they arrive, and the region buffer, reading them back off what it
-// held — so a new table event kind cannot reach one and miss the other.
-/** @type {(events: any[]) => any} */
-let tableOf = (events) => {
-  let opening = events[0];
-  return {
-    columns: opening.columns.map((/** @type {any} */ col) => ({ ...col })),
-    // The header row arrives whole (docs/adr/0053), so both readers -- the
-    // replay and the region buffer -- take the same list rather than each
-    // rebuilding it from the columns.
-    header: opening.header.cells,
-    headerStyle: opening.header.style,
-    rows: events.filter((event) => event.type === "row"),
-    // 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"),
-  };
-};
-
-/**
- * @typedef {{ widths: number[], head: any, laid: any[], totalRows: any[] }} Measured
- */
-// Measure a buffered table at a given width: the column widths every cell has
-// a say in, then each row laid out against them. Everything here is
-// arithmetic over the cells, so the region's buffer can ask for it before
-// anything is drawn — which is the only way a row's real height is known
-// early enough to balance on (bead `quario-cgk`).
-/** @type {(canvas: Canvas, buffered: any, avail: number) => Measured} */
-let measureTable = (canvas, buffered, avail) => {
-  let cols = /** @type {any[]} */ (buffered.columns);
-  /** @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 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: laidOut(header),
-    laid: rows.map(laidOut),
-    totalRows: totals.map(laidOut),
-  };
-};
-
 // 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.
@@ -1943,7 +1735,7 @@ let flow = (canvas) => {
   // The nesting the router is at. While the buffer holds, routing runs ahead of
   // placement: nothing has been placed, so `state.open` is frozen at the depth
   // the region opened at and only the buffer knows where the walk really is.
-  // Once `commit` nulls `held`, the replay *is* the placement timeline and the
+  // Once `decide` nulls `held`, the replay *is* the placement timeline and the
   // open stack is exact again.
   let nesting = () =>
     state.region && state.region.held ? state.region.nesting : state.open.length - 1;
@@ -1993,14 +1785,14 @@ let flow = (canvas) => {
     if (buffer(state, event, payload, hollows.has(event))) replay();
   };
 
-  // Lay the buffer out: `commit` decides the strip height and hands the held
+  // Lay the buffer out: `decide` settles the strip height and hands the held
   // entries back in order, and this walks them through `route`. The walk lives
   // here rather than under the region section marker for the reason everything
   // there is module-level — that section is reachable without the router, and
   // a walk through `route` is not.
   let replay = () => {
     let region = /** @type {Region} */ (state.region);
-    for (let entry of commit(state)) {
+    for (let entry of decide(state)) {
       if (breaksFor(state, region, entry.span)) advance(state);
       route(entry.event, entry.payload);
     }

package/lib/measure.js

@@ -0,0 +1,263 @@
+/**
+ * The measured table: everything that turns a buffered table into cells with
+ * heights, and nothing that puts them on a page.
+ *
+ * The split is not where a reader expects it. The table engine's emitting
+ * half — slicing a row across a break, carrying the header over, deciding
+ * whether to break at all — is bound to the band flow's cursor, and
+ * `quario-70jg.15` measured that it can never leave: **emitting a table is
+ * participating in the page break, and the page break owns the block layer.**
+ * So what closes is the measurement, and only that.
+ *
+ * One door in. `measureTable` is the single entry `quario-70jg.14` collapsed
+ * the two into, which is what makes this a module with a name rather than a
+ * region with two.
+ *
+ * Nothing here reads the cursor, so nothing here can page — which is what
+ * buys a suite that can say something about a column width without a `Flow`,
+ * a recording canvas, or ten imports.
+ */
+
+/** @import { Canvas } from './canvas.js' */
+
+import { CELL_PAD, insetOf, unbox } from "./box.js";
+import { col, merge, rowHeight, sizeOf, vshift } from "./style.js";
+import { atoms, heightOf, wrap } from "./text.js";
+
+/** @typedef {{ cells: any[], spans: number[] | null }} Voting */
+/** The column geometry a row is drawn against.
+ * @typedef {{ xOffsets: number[], widths: number[] }} Columns */
+/** One measured row: its cells with their lines, and the height they came to.
+ * @typedef {{ cells: any[], h: number, style?: any, spans?: number[] | null }} TableRow */
+
+/** The offsets a spanning row's merged columns start at. */
+/** @type {(xOffsets: number[], spans: number[] | null) => number[]} */
+let spanOffsets = (xOffsets, spans) => (spans ? overSpans(spans, (at) => xOffsets[at]) : xOffsets);
+
+// Pre-measure one cell: wrapped lines per column width come later; natural
+// width first (no wrapping except hard breaks). `mt`/`mb` go unread: SCHEMA.md
+// 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) => {
+  // 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.settings, cell.tokens, style);
+  let natural = wrap(list, Infinity, sizeOf(style, canvas.settings.base)).reduce(
+    (widest, line) => Math.max(widest, line.w),
+    0,
+  );
+  return {
+    list,
+    natural: natural + inset.l + inset.r,
+    align: style.align,
+    valign: style.valign,
+    bg: col(style.background),
+    inset,
+    style: cell.style,
+    path: cell.path,
+  };
+};
+
+/** @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,
+    )
+      ? wrap(cell.list, inner, cell.list[0].size)
+      : [];
+    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 };
+};
+
+// 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;
+
+// The widest of each column's header, rows and totals, padding included.
+//
+// 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.
+/**
+ */
+/** @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);
+
+// An authored `width` percentage fixes its column; the rest share what is left
+// in proportion to their natural widths. Three cases, one return each — the
+// fall-through is all-authored within budget, honoured exactly.
+//
+// There is no over-commitment case: the engine rejects a document whose fixed
+// shares leave the width-less columns nothing, so `left` is positive whenever
+// an auto column exists and the fixed shares never exceed the content width.
+// That invariant is asserted rather than trusted — falling through with auto
+// columns unplaced would draw them at zero width, an invisible failure — the
+// same fail-loud posture as the measuring canvas's `newPage`.
+/** @type {(cols: any[], natural: number[], avail: number) => number[]} */
+let columnWidths = (cols, natural, avail) => {
+  let fixed = cols.map((column) => Number.isFinite(column.width));
+  if (!fixed.some(Boolean)) {
+    // Natural widths always carry the cell padding, so the sum is never zero.
+    let wanted = sum(natural);
+    return natural.map((width) => (width * avail) / wanted);
+  }
+  let widths = cols.map((col, i) => (fixed[i] ? (col.width / 100) * avail : 0));
+  let auto = natural.map((width, i) => (fixed[i] ? 0 : width));
+  let left = avail - sum(widths);
+  let wanted = sum(auto);
+  // Room for the auto columns: they share what the fixed ones left.
+  if (wanted > 0) {
+    if (left <= 0) throw new Error("over-committed column widths reached the layout");
+    return widths.map((width, i) => (fixed[i] ? width : (auto[i] * left) / wanted));
+  }
+  return widths;
+};
+
+// 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
+// events as they arrive, and the region buffer, reading them back off what it
+// held — so a new table event kind cannot reach one and miss the other.
+/** @type {(events: any[]) => any} */
+let tableOf = (events) => {
+  let opening = events[0];
+  return {
+    columns: opening.columns.map((/** @type {any} */ col) => ({ ...col })),
+    // The header row arrives whole (docs/adr/0053), so both readers -- the
+    // replay and the region buffer -- take the same list rather than each
+    // rebuilding it from the columns.
+    header: opening.header.cells,
+    headerStyle: opening.header.style,
+    rows: events.filter((event) => event.type === "row"),
+    // 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"),
+  };
+};
+
+/**
+ * @typedef {{ widths: number[], head: any, laid: any[], totalRows: any[] }} Measured
+ */
+// Measure a buffered table at a given width: the column widths every cell has
+// a say in, then each row laid out against them. Everything here is
+// arithmetic over the cells, so the region's buffer can ask for it before
+// anything is drawn — which is the only way a row's real height is known
+// early enough to balance on (bead `quario-cgk`).
+/** @type {(canvas: Canvas, buffered: any, avail: number) => Measured} */
+let measureTable = (canvas, buffered, avail) => {
+  let cols = /** @type {any[]} */ (buffered.columns);
+  /** @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 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: laidOut(header),
+    laid: rows.map(laidOut),
+    totalRows: totals.map(laidOut),
+  };
+};
+
+// 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.
+//
+// Typed on the geometry rather than on the flow's `Grid`, which is the seam
+// this module sits on: a grid carries a cursor and this never reads one, so
+// asking for the whole record would claim a coupling that is not here.
+/** @type {<T extends Columns>(grid: T, row: TableRow) => Columns} */
+let gridOf = (grid, row) =>
+  row.spans
+    ? {
+        xOffsets: spanOffsets(grid.xOffsets, row.spans),
+        widths: spanWidths(grid.widths, row.spans),
+      }
+    : grid;
+
+export { gridOf, measureTable, sum, tableOf };

package/lib/style.js

@@ -75,17 +75,20 @@ let merge = (under, over) => (under ? (over ? { ...under, ...over } : under) : o
 
 // Band-role omakase defaults — the third of those four layers, over the report
 // default and under the author's own, which therefore always wins. Only the
-// headline roles carry one; the XLSX target carries the same two,
-// byte-identical, in `packages/xlsx/lib/index.js`, and they move together
-// (SCHEMA.md states the pair for both). A target can only import public engine helpers, so there is
-// nowhere to share this from and the two copies are synced by hand.
+// headline roles carry one, and SCHEMA.md states the pair. A target can only
+// import public engine helpers, so there is nowhere to share this from and the
+// copies are separate on purpose.
 //
 // `@quario/html` deliberately carries none of this, nor the leading, padding
 // and band gap below: its consumer has a stylesheet and the `q-*` classes are
 // the seam. The rule is docs/adr/0014-a-target-supplies-defaults-only-where-its-consumer-has-no-seam.md —
 // a target supplies defaults only where its consumer has no seam to supply
-// them. `@quario/html/style.css` is what supplies them there; keep the three in
-// agreement.
+// them.
+//
+// `test/omakase-defaults.test.js` is what holds the copies in agreement. This
+// comment names the gate rather than listing the files, because the list is
+// what rotted: it used to name partners that did not exist, and the two
+// comments disagreed on how many there were.
 /** @type {Record<string, any>} */
 let ROLES = { "report-header": { bold: true, size: 14 }, "group-header": { bold: true } };
 
@@ -97,10 +100,13 @@ let roled = (event) =>
     ? { ...event, style: merge(ROLES[event.role], event.style) }
     : event;
 
-// Whether a resolved style asks for either text decoration -- one reading for
-// the wrapper that stamps it on a line and the canvas that draws it.
-/** @type {(style: any) => boolean} */
-let dressed = (style) => !!(style && (style.underline || style.strikethrough));
+// Two resolved colours, or the absence of one, compared by value: `col()`
+// mints a fresh object per read and interns nothing, so identity would answer
+// no for two reads of the same declaration.
+/** @type {(a: Color, b: Color) => boolean} */
+let sameChannels = (a, b) => a.r === b.r && a.g === b.g && a.b === b.b;
+/** @type {(a: Color | null, b: Color | null) => boolean} */
+let sameCol = (a, b) => (a && b ? sameChannels(a, b) : a === b);
 
 // Whether a resolved style asks for capitals. This target has no
 // text-transform to defer to, so the reading is here beside the rest of the
@@ -108,6 +114,15 @@ let dressed = (style) => !!(style && (style.underline || style.strikethrough));
 /** @type {(style: any) => boolean} */
 let upper = (style) => !!(style && style.uppercase);
 
+// A table row's floor height and the gap a group instance opens with. Here
+// rather than in the band flow because both are `k * LEAD * base` and LEAD is
+// here: a constant with two readers and no name drifts between them, and a
+// second copy of the multiplier would drift from the leading itself.
+/** @type {(canvas: any) => number} */
+let rowHeight = (canvas) => LEAD * canvas.settings.base;
+/** @type {(canvas: any) => number} */
+let instanceGap = (canvas) => 0.5 * LEAD * canvas.settings.base;
+
 export {
   BAND,
   BLACK,
@@ -116,9 +131,11 @@ export {
   PADX,
   PADY,
   col,
-  dressed,
+  instanceGap,
   merge,
   roled,
+  rowHeight,
+  sameCol,
   shift,
   sizeOf,
   upper,

package/lib/text.js

@@ -3,9 +3,9 @@
  * their resolved typography, and a greedy breaker turns those into lines. Pure
  * measurement against the font registry — nothing here touches the page.
  */
-import { display, format } from "quario";
+import { display, format, styledRuns } from "quario";
 import { ascOf, face, printable, width } from "./fonts.js";
-import { LEAD, col, dressed, sizeOf, upper } from "./style.js";
+import { LEAD, col, merge, sameCol, sizeOf, upper } from "./style.js";
 
 // What measuring needs and no more, and it is exactly the render's settings:
 // the faces to measure against, the base size and family a style falls back to,
@@ -14,14 +14,19 @@ import { LEAD, col, dressed, sizeOf, upper } from "./style.js";
 // the canvas, so nothing here can touch a page.
 /** @typedef {import('./settings.js').Settings} Settings */
 
+// The typography one styled run wears, resolved once and stamped on every atom
+// of it. Decoration and the highlight ride here rather than on the line,
+// because a run is what wears them: underlining a word has to stop where the
+// word does (ADR 0061).
 /**
- * @typedef {{ text: string, font: any, size: number, color: any,
- *   space: boolean, hard: boolean }} Atom
+ * @typedef {{ font: any, size: number, color: any, bg: any,
+ *   underline: boolean, strikethrough: boolean }} Look
  */
+/** @typedef {Look & { text: string, space: boolean, hard: boolean }} Atom */
+/** @typedef {Look & { text: string, w: number }} Piece */
 /**
- * @typedef {{ pieces: { text: string, font: any, size: number, color: any,
- *   w: number }[], w: number, h: number, size: number, asc: number,
- *   underline?: boolean, strikethrough?: boolean }} Line
+ * @typedef {{ pieces: Piece[], w: number, h: number, size: number,
+ *   asc: number }} Line
  */
 
 /** @typedef {{ cur: Atom[], w: number, lines: Line[], base: number }} Wrap */
@@ -40,40 +45,74 @@ let rawOf = (token, style, settings) => {
 /** @type {(text: string, style: any) => string} */
 let cased = (text, style) => (upper(style) ? text.toUpperCase() : text);
 
-/** @type {(out: Atom[], font: any, size: number, color: any, line: string) => void} */
-let pushParts = (out, font, size, color, line) => {
-  for (let part of printable(font, line).split(/( +)/).filter(Boolean))
-    out.push({ text: part, font, size, color, space: part[0] === " ", hard: false });
+/** @type {(out: Atom[], look: Look, line: string) => void} */
+let pushParts = (out, look, line) => {
+  for (let part of printable(look.font, line).split(/( +)/).filter(Boolean))
+    out.push({ ...look, text: part, space: part[0] === " ", hard: false });
 };
 
-/** @type {(out: Atom[], font: any, size: number, color: any, i: number, line: string) => void} */
-let pushLine = (out, font, size, color, i, line) => {
-  if (i) out.push({ text: "", font, size, color, space: false, hard: true });
-  pushParts(out, font, size, color, line);
+/** @type {(out: Atom[], look: Look, i: number, line: string) => void} */
+let pushLine = (out, look, i, line) => {
+  if (i) out.push({ ...look, text: "", space: false, hard: true });
+  pushParts(out, look, line);
 };
 
-/** @type {(settings: Settings, style: any) => { font: any, size: number, color: any }} */
+/** @type {(settings: Settings, style: any) => Look} */
 let look = (settings, style) => {
   let resolved = style || {};
   return {
     font: face(settings.fonts, resolved, settings.family),
     size: sizeOf(resolved, settings.base),
     color: col(resolved.color),
+    bg: col(resolved.background),
+    underline: resolved.underline === true,
+    strikethrough: resolved.strikethrough === true,
   };
 };
 
-// Flatten a cell's tokens to word/space atoms carrying the cell's resolved
-// typography — one face, size and colour for the whole cell. CR, LF, and
-// CRLF are one hard break each (SCHEMA.md, Cell values).
+/** @type {(seen: Look, base: any) => Look} */
+let highlighted = (seen, base) => (sameCol(seen.bg, base) ? { ...seen, bg: null } : seen);
+
+// What one styled run draws in: the style it presents its values through, and
+// the look its atoms wear. Its own declarations over the cell's where it
+// carries a block, and the cell's answer unchanged where it does not — asked
+// once, so the run's two questions cannot be branched on separately.
+/** @type {(settings: Settings, style: any, styled: any, bare: Look, base: any) =>
+ *   { worn: any, seen: Look} }*/
+let wornBy = (settings, style, styled, bare, base) => {
+  if (!styled.style) return { worn: style, seen: bare };
+  let worn = merge(style, styled.style);
+  return { worn, seen: highlighted(look(settings, worn), base) };
+};
+
+// One styled run's tokens flattened to atoms, all of them wearing its look.
+/** @type {(out: Atom[], settings: Settings, styled: any, dress: { worn: any, seen: Look }) => void} */
+let pushStyledRun = (out, settings, styled, { worn, seen }) => {
+  for (let token of styled.tokens)
+    for (let [i, line] of cased(rawOf(token, worn, settings), worn)
+      .split(/\r\n|\r|\n/)
+      .entries())
+      pushLine(out, seen, i, line);
+};
+
+// Flatten a cell's tokens to word/space atoms carrying their run's resolved
+// typography. A run's style is the engine's fully-resolved answer for that
+// stretch, so it lays over the cell's *effective* style -- the row's, the band
+// role's or the split's, whichever reached this cell -- rather than replacing
+// it: the run says what it says and the layers outside the cell stand where it
+// is silent. A cell with no authored runs is one run wearing the cell's own
+// look, which is what it always was. CR, LF, and CRLF are one hard break each
+// (SCHEMA.md, Cell values).
 /** @type {(settings: Settings, tokens: any[], style: any) => Atom[]} */
 let atoms = (settings, tokens, style) => {
   let out = /** @type {Atom[]} */ ([]);
-  let { font, size, color } = look(settings, style);
-  for (let token of tokens)
-    for (let [i, line] of cased(rawOf(token, style, settings), style)
-      .split(/\r\n|\r|\n/)
-      .entries())
-      pushLine(out, font, size, color, i, line);
+  let own = look(settings, style);
+  // The cell's own `background` is already painted at cell scope, so a run
+  // highlights only where it names a different one -- otherwise every ordinary
+  // cell with a background would paint it twice, once per line.
+  let bare = { ...own, bg: null };
+  for (let styled of styledRuns(tokens))
+    pushStyledRun(out, settings, styled, wornBy(settings, style, styled, bare, own.bg));
   return out;
 };
 
@@ -82,10 +121,22 @@ let trimEnd = (cur) => {
   while (cur.length && cur[cur.length - 1].space) cur.pop();
 };
 
-/** @type {(pieces: Line['pieces'], atom: Atom, atomWidth: number) => void} */
+// Whether two stretches draw identically, and so may be one piece. Colours
+// compare channel-wise because `col()` mints a fresh object per read and
+// interns nothing, so identity would split every run in two.
+/** @type {(a: Look, b: Look) => boolean} */
+let sameFace = (a, b) => a.font === b.font && a.size === b.size;
+/** @type {(a: Look, b: Look) => boolean} */
+let sameInk = (a, b) => sameCol(a.color, b.color) && sameCol(a.bg, b.bg);
+/** @type {(a: Look, b: Look) => boolean} */
+let sameRule = (a, b) => a.underline === b.underline && a.strikethrough === b.strikethrough;
+/** @type {(a: Look, b: Look) => boolean} */
+let sameLook = (a, b) => sameFace(a, b) && sameInk(a, b) && sameRule(a, b);
+
+/** @type {(pieces: Piece[], atom: Atom, atomWidth: number) => void} */
 let mergeAtom = (pieces, atom, atomWidth) => {
   let last = pieces[pieces.length - 1];
-  if (last) {
+  if (last && sameLook(last, atom)) {
     last.text += atom.text;
     last.w += atomWidth;
     return;
@@ -95,6 +146,9 @@ let mergeAtom = (pieces, atom, atomWidth) => {
     font: atom.font,
     size: atom.size,
     color: atom.color,
+    bg: atom.bg,
+    underline: atom.underline,
+    strikethrough: atom.strikethrough,
     w: atomWidth,
   });
 };
@@ -219,9 +273,9 @@ let placeAtom = (state, atom, avail) => {
 };
 
 // Greedy wrap against `avail`: spaces never start a line, an over-wide word
-// breaks by character, hard breaks always break. A cell's atoms share one
-// typography, so a line's atoms merge into a single draw piece. `size` is the
-// empty-run height — a blank item, a hard-break hole.
+// breaks by character, hard breaks always break. Atoms that draw alike merge
+// into one piece, so a cell with no styled runs is still one piece per line.
+// `size` is the empty-run height — a blank item, a hard-break hole.
 /** @type {(list: Atom[], avail: number, size: number) => Line[]} */
 let wrap = (list, avail, size) => {
   /** @type {Wrap} */
@@ -231,22 +285,7 @@ let wrap = (list, avail, size) => {
   return state.lines;
 };
 
-// Stamp cell-level decorations onto every wrapped fragment. Measurement does
-// not need them; drawing does, and wrapping must not lose them.
-/** @type {(line: Line, underline: boolean, strikethrough: boolean) => void} */
-let stamp = (line, underline, strikethrough) => {
-  if (underline) line.underline = true;
-  if (strikethrough) line.strikethrough = true;
-};
-
-/** @type {(lines: Line[], style: any) => Line[]} */
-let dress = (lines, style) => {
-  if (!dressed(style)) return lines;
-  for (let line of lines) stamp(line, !!style.underline, !!style.strikethrough);
-  return lines;
-};
-
 /** @type {(lines: Line[]) => number} */
 let heightOf = (lines) => lines.reduce((total, line) => total + line.h, 0);
 
-export { atoms, dress, heightOf, wrap };
+export { atoms, heightOf, wrap };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quario/layout",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "The paged display list for quario — the layout the PDF target writes and the viewer paints — in the makings, not yet released",
   "homepage": "https://getquario.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -43,13 +43,13 @@
     "@size-limit/preset-small-lib": "^13.0.3",
     "@types/fontkit": "^2.0.9",
     "fontkit": "^2.0.4",
-    "quario": "^0.6.0",
+    "quario": "^0.7.0",
     "size-limit": "^13.0.3",
     "typescript": "^7.0.2"
   },
   "peerDependencies": {
     "fontkit": "^2.0.4",
-    "quario": "^0.6.0"
+    "quario": "^0.7.0"
   },
   "peerDependenciesMeta": {
     "fontkit": {