@quario/layout 0.3.0 → 0.5.0

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/page.js

@@ -15,6 +15,7 @@
 
 // The named sizes. `@quario/pdf` used to own this table, and the two element
 // packages restated it; the layout package is where all three now read it.
+// fallow-ignore-next-line code-duplication -- @quario/docx keeps a deliberate copy of these rules: a flow target runs no layout, and taking @quario/layout for a two-entry table would install the pagination engine with it. test/page-sizes.test.js holds the two in sync (ADR 0039).
 let SIZES = /** @type {Record<string, [number, number]>} */ ({
   A4: [595.28, 841.89],
   letter: [612, 792],

package/lib/paint.js

@@ -235,18 +235,20 @@ let decode = async (page) => {
 /**
  * Paint one page of the list onto a Canvas 2D context: a white page, then
  * every op in order. `scale` is device pixels per point — the caller sized
- * the canvas, so it knows. `fonts` is the host's font mapping, the same
+ * the canvas, so it knows, and the canvas it sized is the page's own size,
+ * which is why the paper is filled over the whole store and no page geometry
+ * is asked for (ADR 0069). `fonts` is the host's font mapping, the same
  * record given to `layout()`, so a TrueType family draws in its own face.
  *
  * It awaits its faces and images before it draws, and it draws whatever
- * happened in between: a canvas re-sized under a call still in flight is
- * filled at that call's own `scale`, not the size it now has. A caller that
- * repaints one canvas at changing scales owns that, by not letting a
- * superseded call reach a canvas still on screen — which is what the viewer's
- * stage retires a page for (docs/adr/0046).
+ * happened in between: a canvas re-sized under a call still in flight has its
+ * ops placed at that call's own `scale` on a store of the size it now has. A
+ * caller that repaints one canvas at changing scales owns that, by not letting
+ * a superseded call reach a canvas still on screen — which is what the
+ * viewer's stage retires a page for (docs/adr/0046).
  *
  * **An image the browser will not decode is drawn as nothing, and the page is
- * drawn around it.** The engine vouched for the magic numbers and the layout
+ * drawn around it.** The engine vouched for the magic numbers and
  * read the size out of the header, so a file corrupt past that point is not
  * known to be bad until here; costing the whole page for it — every other op
  * and the marking with it — is a worse answer than costing the image. What is
@@ -263,9 +265,16 @@ export async function paint(ctx, page, { scale = 1, fonts } = {}) {
   await loadFaces(fonts);
   let bitmaps = await decode(page);
   ctx.save();
-  ctx.setTransform(scale, 0, 0, scale, 0, 0);
+  // The paper, over the whole store rather than over the page's own box: a
+  // page carries no geometry to fill to (ADR 0069), and the caller has already
+  // sized the canvas to the page — the obligation the ops themselves put on it,
+  // since a short store clips them. In device pixels, before the scale goes on,
+  // so a store rounded up to a whole pixel is covered to its edge rather than
+  // left a sliver of whatever it held.
+  ctx.resetTransform();
   ctx.fillStyle = "#fff";
-  ctx.fillRect(0, 0, page.width, page.height);
+  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  ctx.setTransform(scale, 0, 0, scale, 0, 0);
   for (let op of page.ops) paintOp(ctx, op, bitmaps);
   ctx.restore();
 }

package/lib/style.js

@@ -54,6 +54,7 @@ let vshift = (valign, extra) => (Object.hasOwn(VSHIFT, valign) ? VSHIFT[valign]
 
 // A declared colour as a `Color`, or null when the value is not one.
 /** @type {(value: any) => Color | null} */
+// fallow-ignore-next-line code-duplication -- each target reads a declared hex into its own type; neither may import a sibling, and the engine's stream is all they share
 let col = (value) => {
   let match = typeof value === "string" && HEX.exec(value);
   if (!match) return null;
@@ -75,17 +76,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 +101,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 +115,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 +132,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.5.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.8.0",
     "size-limit": "^13.0.3",
     "typescript": "^7.0.2"
   },
   "peerDependencies": {
     "fontkit": "^2.0.4",
-    "quario": "^0.6.0"
+    "quario": "^0.8.0"
   },
   "peerDependenciesMeta": {
     "fontkit": {