rapier-markdown-kit 1.1.14 → 1.1.21

package/README.md

@@ -18,21 +18,6 @@ import {parseWill} from 'rapier-markdown-kit/will';       // Will/1 markers: kee
 import {parseAssets} from 'rapier-markdown-kit/assets';   // the picture appendix
 ```
 
-**What it does**
-- Parses, validates and writes back the `md-layout:v1` comment that places a picture: width, wrap,
-  position.
-- Lays text out around a picture's shape exactly as Rapier does, given the host's font metrics.
-- Reads and writes colour and page-break marks.
-- Reads Will/1 markers (a separate, optional standard) and says what a region's law allows.
-- Reads the picture appendix, the reference definitions a document's pictures live in, without decoding
-  a picture.
-- Styles rendered Markdown with the same self-contained sheet Rapier and its exported pages use.
-
-**What it is not**
-- Not the editor, not Draw, not the image decoders. Every convention is plain Markdown or an HTML
-  comment other readers ignore. The text layout engine it uses, Pretext, is vendored with its own MIT
-  licence.
-
 ## What it gives you
 
 | Import | What it is |
@@ -45,8 +30,8 @@ import {parseAssets} from 'rapier-markdown-kit/assets';   // the picture appendi
 | `rapier-markdown-kit/style.css` | The reference style: type, lists, tables, tasks, pictures and the document's other markup, scoped to `.md-render`. |
 | `rapier-markdown-kit` | All five in one import. |
 
-Every convention here is plain Markdown or an HTML comment that other readers ignore. Laying lines
-out exactly as Rapier does also takes the same font metrics, which the host supplies (below).
+Every convention is plain Markdown or an HTML comment other readers ignore. Laying lines out as Rapier does takes
+the host's font metrics (below).
 
 ## Render with the reference style
 
@@ -56,17 +41,11 @@ link it with `<link rel="stylesheet" href="style.css">`. Put rendered content in
 on that root chooses one. Its `--md-*` properties are defined by the sheet itself. Geist and Geist Mono
 are named font families with system fallbacks; no font or external asset is fetched by the sheet.
 
-This runnable example supplies `markdown-it` as the renderer and the kit as the convention readers.
-Save the following as `render.mjs`, run `npm install rapier-markdown-kit markdown-it@15`, then
-`node render.mjs`. Open `styled.html`; it uses only `style.css` for its document styles. The function
-below belongs to the example, not to the package API.
-
-The example renders trusted Markdown, including its HTML. It demonstrates core Markdown, GFM tables,
-an aligned paragraph, a sized picture, a named text colour and a page break. Tasks,
-footnotes and other extensions use the caller's Markdown plugins; details use ordinary HTML.
-In a Rapier page, supported Mermaid flowchart fences also draw offline in Rapier's look, so an agent can write a fence or use figures. The kit itself does not render diagrams.
-The complete markup contract, including callouts, diagrams, math and image wrapping, is
-[Reference style](https://github.com/jackskip22/rapier/blob/main/docs/markdown-standard.md#reference-style).
+The example below renders trusted Markdown with `markdown-it` and the kit's readers: run
+`npm install rapier-markdown-kit markdown-it@15`, save it as `render.mjs`, run `node render.mjs` and open
+`styled.html`, which uses only `style.css`. It shows core Markdown, GFM tables, an aligned paragraph, a sized
+picture, a named colour and a page break; tasks, footnotes and diagrams are the caller's plugins. The full markup
+contract is [Reference style](https://github.com/jackskip22/rapier/blob/main/docs/markdown-standard.md#reference-style).
 
 <!-- reference-style-example -->
 ```js
@@ -236,12 +215,11 @@ The appendix parser takes a markdown-it-compatible parser factory from the calle
 node node_modules/rapier-markdown-kit/dist/kit/conformance/run.mjs
 ```
 
-Thirteen small documents, each with the line boxes Rapier's own export produced for it. The runner
-reports two things separately. **Preservation**: every layout comment round-trips exactly (12 of
-the 12 documents that carry one). **Presentation**: how closely the planned lines match (4 agree
-within 2px, 9 are close, none differ); each close row has a named cause, given in the runner's
-output and in `dist/kit/conformance/README.md`. `--impl path/to/module.mjs` runs another
-implementation against the same documents; `--tolerance 2` sets the pixel tolerance.
+Thirteen small documents, each with the line boxes Rapier's own export produced for it. **Preservation**: every
+layout comment round-trips exactly (12 of 12 that carry one). **Presentation**: how closely the planned lines match
+(4 agree within 2px, 9 are close with a named cause, none differ; `dist/kit/conformance/README.md`).
+`--impl path/to/module.mjs` runs another implementation against the same documents; `--tolerance 2` sets the pixel
+tolerance.
 
 ## Licence
 
@@ -252,4 +230,5 @@ value the editor's release reads.
 
 ## Where the modules live
 
-Each module of the standard has one home in the Rapier source (`spec/`, `layout/`, `agent/`), where Rapier itself reads it; `dist/` is that closure copied byte for byte, so an installed copy needs nothing beside it. `style.css` is copied byte for byte from the same `spec/markdown-style.css` that Rapier bundles.
+Each module has one home in the Rapier source (`spec/`, `layout/`, `agent/`), where Rapier itself reads it; `dist/`
+is that closure copied byte for byte, and `style.css` is the same `spec/markdown-style.css` Rapier bundles.

package/dist/agent/will.mjs

@@ -28,11 +28,13 @@ function _rapierWillMarkerOf(content) {
 		return null;
 	}
 	const near = fault => ({ kind: 'near', fault, law: '', intent: null, content: line });
+	const afterPrefix = line.slice(_RAPIER_WILL_OPENER_PREFIX.length);
+	const versionGap = afterPrefix.indexOf(' ');
+	if ((versionGap < 0 ? afterPrefix : afterPrefix.slice(0, versionGap)) !== '1') return near('unknown_version');
 	if (!line.endsWith(_RAPIER_WILL_CLOSE_SUFFIX)) return near('malformed_marker');
 	const middle = line.slice(_RAPIER_WILL_OPENER_PREFIX.length,
 		line.length - _RAPIER_WILL_CLOSE_SUFFIX.length);
 	const gap = middle.indexOf(' ');
-	if ((gap < 0 ? middle : middle.slice(0, gap)) !== '1') return near('unknown_version');
 	if (gap < 0) return near('malformed_marker');
 	const rest = middle.slice(gap + 1);
 	const word = (/^[^:\s]*/.exec(rest))[0];

package/dist/kit/conformance/README.md

@@ -5,7 +5,10 @@ standard](../../docs/markdown-standard.md): inline (no layout comment), width/x/
 with a real alpha silhouette, `wrap=box`, `behind`, `front`, `rotate=` on a plain raster, a foreign
 SVG "drawing" already turned in its own bytes, a ring drawing whose unfilled interior takes a line of
 text, both-sides wrapping around a centred picture, the neighbour search skipping a second, unrelated
-picture, the neighbour search stopping at a heading, and RTL (Arabic) text.
+picture, a heading after a picture, and RTL (Arabic) text.
+
+Headings can anchor images. `12-heading-barrier.expected.json` records an earlier paragraph
+anchor; that historical measurement is not a normative neighbour-selection expectation.
 
 ## What each document's JSON carries
 
@@ -78,12 +81,17 @@ Prints two separate tables (preservation and presentation are different claims):
   either way), **9 CLOSE, 0 DIFFERS**, each CLOSE row's cause named rather than left as "close
   enough": `01-inline`/`02-width-x-align`/`05-behind`/`06-front` have no real trace at all (see
   `measurements` above) so still rest on the character-sum fallback; `03-wrap-around-silhouette`,
-  `09-drawing-ring-interior`, `11-neighbour-skips-image` and `13-rtl-text` run Pretext for real during
-  export (`13-rtl-text` at 100% — every query of its own answered from the real trace) yet still
-  carry a small, constant left-edge delta (5.18px for 03/11/13, 6.63px for 09) that is a
-  picture-obstacle *geometry* fact, not a text one: their `profileHint` is a hand-computed, quantized
-  alpha-band descriptor for a picture Rapier's own export never serializes an occupancy descriptor
-  for, and that descriptor's own precision — not the measurer — is the residual gap. Before this
+  `11-neighbour-skips-image` and `13-rtl-text` run Pretext for real during export (`13-rtl-text` at
+  100% — every query of its own answered from the real trace) yet still carry a small, constant
+  left-edge delta (5.18px) that is a picture-obstacle *geometry* fact, not a text one: their
+  `profileHint` is a hand-computed, quantized alpha-band descriptor for a picture Rapier's own export
+  never serializes an occupancy descriptor for, and that descriptor's own precision — not the
+  measurer — is the residual gap. `09-drawing-ring-interior` plans the recorded 14 lines, but one row
+  differs by a whole slot (115.08px left, 292.09px right): its recorded trace, taken before a word
+  that must break inside itself was given the widest slot of its row, cuts "ordinary" into "ordinar"
+  and "y" in the ring's narrow left slot, where the planner now leaves that slot empty and sets the
+  word whole in the wide one (`layout/line-plan.mjs`). Its `expected.json` still holds the earlier cut;
+  it is regenerated from a browser export, not by hand. Before this
   measurer existed (a per-character glyph-sum with no real trace at all), the same run reported 4
   AGREE / 8 CLOSE / 1 DIFFERS — `13-rtl-text` disagreed by a whole line (7 expected, 8 planned): real
   Arabic shaping (ligatures, diacritic combination) changes a run's total measured width in a way an

package/dist/kit/conformance/run.mjs

@@ -109,14 +109,16 @@ console.log(`\n${agree}/${rows.length} documents AGREE within ${args.tolerance}p
 console.log(`Measurer: ${measurer.stats.hits} queries answered from Rapier's own real browser trace, ${measurer.stats.misses} fell back to a character-glyph sum (no kerning/shaping).`);
 console.log(`A row's own hits/misses can undercount its real coverage: several fixtures share one identical anchor sentence, and Pretext's own per-process`);
 console.log(`segment cache (agent/vendor/pretext/measurement.js) serves a repeated (font, segment) query straight from that cache without calling`);
-console.log(`measureText again at all -- real data, just not counted against the SECOND document to ask for it. Two named, separate reasons a row still`);
-console.log(`reads CLOSE rather than AGREE, neither of them "close enough": (a) no real trace exists at all for 01-inline/02-width-x-align/05-behind/06-front`);
+console.log(`measureText again at all -- real data, just not counted against the SECOND document to ask for it. Three named, separate reasons a row still`);
+console.log(`reads CLOSE rather than AGREE, none of them "close enough": (a) no real trace exists at all for 01-inline/02-width-x-align/05-behind/06-front`);
 console.log(`-- their picture pushes no flow obstacle, so layout/interchange.js's own prepare() never calls Pretext for this paragraph during export (see`);
-console.log(`measurer.mjs) -- the from-scratch character-sum approximation disagrees with real shaping by a bounded, named amount; (b) 03/09/11/13 DO run`);
+console.log(`measurer.mjs) -- the from-scratch character-sum approximation disagrees with real shaping by a bounded, named amount; (b) 03/11/13 DO run`);
 console.log(`Pretext for real (hits > 0, 13-rtl-text at 100% -- every query answered from the real trace) yet still carry a small, constant left-edge delta`);
-console.log(`(5.18px for 03/11/13, 6.63px for 09, unchanged from before this measurer existed) -- a picture-obstacle geometry fact, not a text one: these`);
+console.log(`(5.18px, unchanged from before this measurer existed) -- a picture-obstacle geometry fact, not a text one: these`);
 console.log(`fixtures' profileHint is a hand-computed, quantized alpha band descriptor for a raster Rapier's own export never serialized an occupancy`);
-console.log(`descriptor for (conformance/README.md, "profileHint"), and that descriptor's own precision -- not this lane's measurer -- is the residual gap.`);
+console.log(`descriptor for (conformance/README.md, "profileHint"), and that descriptor's own precision -- not this lane's measurer -- is the residual gap; (c) 09 plans the recorded 14 lines but one row`);
+console.log(`differs by a whole slot: its recorded trace cuts a word in the ring's narrow left slot, and the planner now gives a word that must break inside itself`);
+console.log(`the widest slot of its row (layout/line-plan.mjs) -- the recorded lines are the earlier planner's.`);
 if (measurer.stats.missedQueries.length) {
 	console.log(`\nFirst ${Math.min(10, measurer.stats.missedQueries.length)} of ${measurer.stats.misses} missed (font, text) queries (fell back to the character sum):`);
 	for (const {font, text} of measurer.stats.missedQueries.slice(0, 10)) console.log(`  ${JSON.stringify(text)}  (${font})`);

package/dist/layout/line-plan.mjs

@@ -1,4 +1,89 @@
 // SPDX-License-Identifier: MIT
+// A word or an address wider than its slot has to break inside itself; the browser would let it run out of the column, a
+// projection cannot. Pretext breaks it after the last hyphen that fits, else after the last letter that fits. A person reads an
+// address better broken where it has its own punctuation, so the break moves back to the last of these that fits.
+const naturalBreak = /[/._?&=]/, hyphen = /[-\u058a\u2010\u2012\u2013\u2014]/;
+let clusters;
+const lettersOf = new WeakMap();
+
+function breakAtPunctuation(flow, range, cursor, layoutNextRichInlineLineRange) {
+  const last = range.fragments.at(-1), end = last?.end;
+  if (!end || end.graphemeIndex === 0) return range;
+  const prepared = flow.items[last.itemIndex]?.prepared, segment = prepared?.segments?.[end.segmentIndex];
+  if (typeof segment !== 'string') return range;
+  // A long address is cut once per line; its letters are counted once.
+  let byIndex = lettersOf.get(prepared);
+  if (!byIndex) lettersOf.set(prepared, byIndex = new Map());
+  let letters = byIndex.get(end.segmentIndex);
+  if (!letters) {
+    clusters ||= new Intl.Segmenter(undefined, {granularity: 'grapheme'});
+    byIndex.set(end.segmentIndex, letters = [...clusters.segment(segment)].map(part => part.segment));
+  }
+  const from = last.start.segmentIndex === end.segmentIndex ? last.start.graphemeIndex : 0;
+  if (end.graphemeIndex > letters.length || hyphen.test(letters[end.graphemeIndex - 1]) || naturalBreak.test(letters[end.graphemeIndex - 1])) return range;
+  let target = end.graphemeIndex - 1;
+  while (target > from && !naturalBreak.test(letters[target - 1])) target--;
+  if (target <= from) return range;
+  // Each narrower limit yields the break one letter back (`balanced` walks the breaks of a line the same way).
+  for (let limit = range.width - .05, at = end.graphemeIndex; at > target;) {
+    const shorter = layoutNextRichInlineLineRange(flow, limit, cursor), tail = shorter?.fragments.at(-1);
+    if (!tail || tail.itemIndex !== last.itemIndex || tail.end.segmentIndex !== end.segmentIndex || tail.end.graphemeIndex >= at) return range;
+    if (tail.end.graphemeIndex === target) return shorter;
+    at = tail.end.graphemeIndex;
+    limit = shorter.width - .05;
+  }
+  return range;
+}
+
+// Pretext lets a line end wherever one element ends and the next begins. The browser allows no break there unless white space
+// stands between them, so a comma, a colon or a closing bracket straight after `agents.md` (a chip, a link, bold words) would
+// start the next line alone. The line ends one break earlier instead, and the punctuation keeps its word.
+const closing = /^[,.:;!?)\]}%\u2019\u201d\u00bb\u203a\u2026\u060c\u061b\u061f\u3001\u3002\uff0c\uff0e\uff1a\uff1b\uff01\uff1f\uff09\u300d\u300f]/;
+
+function stranding(flow, range) {
+  const {itemIndex, segmentIndex, graphemeIndex} = range.end;
+  if (segmentIndex !== 0 || graphemeIndex !== 0) return false;
+  for (let index = itemIndex; index < flow.items.length; index++) {
+    const item = flow.items[index];
+    if (!item?.establishesLine) continue;
+    return !item.breakBefore && closing.test(item.prepared?.segments?.[0] ?? '');
+  }
+  return false;
+}
+
+function keepWithWord(flow, range, cursor, layoutNextRichInlineLineRange) {
+  if (!stranding(flow, range)) return range;
+  for (let limit = range.width - .05, tries = 64; tries > 0; tries--) {
+    const shorter = layoutNextRichInlineLineRange(flow, limit, cursor);
+    if (!shorter || shorter.width > limit + .05) return range;
+    if (!stranding(flow, shorter)) return shorter;
+    limit = shorter.width - .05;
+  }
+  return range;
+}
+
+// A chip (inline code, a box each piece of it repeats) breaks at its own spaces and hyphens like any words, but never across a
+// picture: "npx rapier-" left of the picture and "html" right of it read as two things. When a line would end inside a chip
+// with another slot of the row still to come, the line ends before the chip instead and the chip goes whole to the next slot;
+// when nothing but the chip stands in the slot, the row's remaining slots are given up and the chip's pieces stack in this one.
+function insideChip(flow, range) {
+  const {itemIndex, segmentIndex, graphemeIndex} = range.end;
+  return (segmentIndex > 0 || graphemeIndex > 0) && flow.items[itemIndex]?.extraWidth > 0;
+}
+function beforeChip(flow, range, cursor, layoutNextRichInlineLineRange) {
+  let first = range.end.itemIndex;
+  while (first > 0 && flow.items[first - 1]?.extraWidth > 0) first--;
+  if (first === 0 || first <= cursor.itemIndex && (cursor.segmentIndex > 0 || cursor.graphemeIndex > 0 || first < cursor.itemIndex)) return null;
+  const before = shorter => shorter.end.itemIndex < first || shorter.end.itemIndex === first && shorter.end.segmentIndex === 0 && shorter.end.graphemeIndex === 0;
+  for (let limit = range.width - .05, tries = 64; tries > 0; tries--) {
+    const shorter = layoutNextRichInlineLineRange(flow, limit, cursor);
+    if (!shorter || shorter.width > limit + .05) return null;
+    if (before(shorter)) return shorter.end.itemIndex === cursor.itemIndex && shorter.end.segmentIndex === cursor.segmentIndex && shorter.end.graphemeIndex === cursor.graphemeIndex ? null : shorter;
+    limit = shorter.width - .05;
+  }
+  return null;
+}
+
 export function linePlan(flow, width, top, obstacles, lineHeight, minWidth, direction, balance, slotsForBand, layoutNextRichInlineLineRange, materializeRichInlineLineRange) {
   const lines = [], ranges = [];
   let cursor = {itemIndex: 0, segmentIndex: 0, graphemeIndex: 0}, y = 0, bottom = 0, rows = 0;
@@ -6,16 +91,30 @@ export function linePlan(flow, width, top, obstacles, lineHeight, minWidth, dire
     const bands = slotsForBand(width, obstacles, top + y, lineHeight, Math.min(minWidth, width));
     if (!bands) return null;
     if (direction === 'rtl') bands.reverse();
+    const widest = Math.max(0, ...bands.map(band => band.width));
     let advanced = false;
-    for (const band of bands) {
-      const range = layoutNextRichInlineLineRange(flow, band.width, cursor);
+    for (let slot = 0; slot < bands.length; slot++) {
+      const band = bands[slot];
+      let range = layoutNextRichInlineLineRange(flow, band.width, cursor);
       if (!range) return lines.length ? {lines: balance ? balanced(flow, width, balance, lines, ranges, lineHeight, layoutNextRichInlineLineRange, materializeRichInlineLineRange) : lines, height: Math.max(lineHeight, bottom)} : null;
       if (range.width > width + .5 || range.end.itemIndex === cursor.itemIndex &&
           range.end.segmentIndex === cursor.segmentIndex && range.end.graphemeIndex === cursor.graphemeIndex) return null;
       if (range.width > band.width + .5) continue;
+      range = breakAtPunctuation(flow, range, cursor, layoutNextRichInlineLineRange);
+      // Ending a line earlier for a comma can cut a word too, so that cut is settled as well.
+      if (!balance && stranding(flow, range)) range = breakAtPunctuation(flow, keepWithWord(flow, range, cursor, layoutNextRichInlineLineRange), cursor, layoutNextRichInlineLineRange);
+      // A word or address that must break inside itself does it in the widest slot of the row. A narrower one, a sliver beside the
+      // picture, waits and the widest takes it, so the head of an address, or "passage" and "s,", is never left alone in a corner.
+      if (range.end.graphemeIndex > 0 && band.width < widest - .5) continue;
+      let column = false;
+      if (!balance && slot + 1 < bands.length && insideChip(flow, range)) {
+        const whole = beforeChip(flow, range, cursor, layoutNextRichInlineLineRange);
+        if (whole) range = whole; else column = true;
+      }
       if (lines.length === 4096) return null;
       lines.push({...materializeRichInlineLineRange(flow, range), ...band, y}); ranges.push(range);
       cursor = range.end; advanced = true; bottom = y + lineHeight;
+      if (column) break;
     }
     if (advanced) { y += lineHeight; rows++; continue; }
     let next = Infinity;

package/dist/layout/model.mjs

@@ -110,36 +110,45 @@ export function rasterReserved(columnWidth, unrotated, rad) {
 }
 
 
-const shapeGrid = 48, alphaThreshold = .1, profileBands = new WeakMap();
+const shapeGrid = 48, alphaThreshold = .1, alphaOversample = 4, profileBands = new WeakMap();
+// Slices are cut at up to this many bands: a picture shown 6 px a band or finer keeps every row the profile holds.
+const sliceGridMax = shapeGrid * alphaOversample, slicePixelsPerBand = 6;
 
+// The picture's silhouette as 192 bands of horizontal runs, read from its alpha at that resolution both ways: a band holds the
+// ink of one sampled row, and a run's ends fall on a 192nd of the picture's width, so the standoff a slice adds (`pictureSlices`'
+// `gap`) is the least distance from the words to the paint however large the picture is drawn. At 48 rows and columns a run's
+// end drifted by a 48th of the width (9 px at 430), a thin stroke fell between two samples, and a tall picture's bands were
+// 20 px high. The descriptor an exported page carries (`serializeProfile`) still writes 48 bands.
 export function alphaProfile(image) {
   const src = image.currentSrc || image.getAttribute('src') || '';
   if (!image.complete || !image.naturalWidth || !image.naturalHeight || !src || /^data:image\/jpe?g[;,]/i.test(src)) return null;
+  const fine = shapeGrid * alphaOversample;
   const canvas = image.ownerDocument.createElement('canvas');
-  canvas.width = canvas.height = shapeGrid;
+  canvas.width = canvas.height = fine;
   let data;
   try {
     const context = canvas.getContext('2d', {willReadFrequently: true});
     if (!context) return null;
-    context.drawImage(image, 0, 0, shapeGrid, shapeGrid);
-    data = context.getImageData(0, 0, shapeGrid, shapeGrid).data;
+    context.imageSmoothingQuality = 'high';
+    context.drawImage(image, 0, 0, fine, fine);
+    data = context.getImageData(0, 0, fine, fine).data;
   } catch (_) { return null; }
   finally { canvas.width = canvas.height = 0; }
   const bands = [];
   let opaque = true;
-  for (let y = 0; y < shapeGrid; y++) {
+  for (let y = 0; y < fine; y++) {
     const runs = [];
     let start = -1;
-    for (let x = 0; x <= shapeGrid; x++) {
-      const alpha = x < shapeGrid ? data[(y * shapeGrid + x) * 4 + 3] : 0;
-      if (x < shapeGrid && alpha < 250) opaque = false;
-      if (alpha > alphaThreshold * 255) { if (start < 0) start = x; }
-      else if (start >= 0) { runs.push([start / shapeGrid, x / shapeGrid]); start = -1; }
+    for (let x = 0; x <= fine; x++) {
+      const alpha = x < fine ? data[(y * fine + x) * 4 + 3] : 0;
+      if (x < fine && alpha < 250) opaque = false;
+      if (x < fine && alpha > alphaThreshold * 255) { if (start < 0) start = x; }
+      else if (start >= 0) { runs.push([start / fine, x / fine]); start = -1; }
     }
     bands.push(runs);
   }
   if (opaque) return null;
-  const runsAt = t => bands[Math.max(0, Math.min(shapeGrid - 1, Math.floor(t * shapeGrid)))];
+  const runsAt = t => bands[Math.max(0, Math.min(fine - 1, Math.floor(t * fine)))];
   return {runsAt,
     spanAt(t) { const runs = runsAt(t); return runs.length ? [runs[0][0], runs.at(-1)[1]] : null; }};
 }
@@ -234,15 +243,25 @@ export function parseProfile(text) {
   return bandsProfile(bands);
 }
 
+// The standoff is round: a band's own rows are pushed out by the whole gap, and the rows above and below it, out to a gap away,
+// by what a circle of that radius allows at their distance, in three steps. A square standoff stood up to 14 px off a slanted
+// stroke and 10 off a level one; this stands 10 off both, within a step.
+const shoulderSteps = 3, shoulders = Array.from({length: shoulderSteps}, (_, k) => ({from: k / shoulderSteps, to: (k + 1) / shoulderSteps, reach: Math.sqrt(1 - ((k + .5) / shoulderSteps) ** 2)}));
+
 export function pictureSlices(profile, x, y, width, height, gap = 10) {
   if (!profile) return [{x: x - gap, y: y - gap, width: width + gap * 2, height: height + gap * 2}];
-  let bands = profileBands.get(profile);
+  // A band is at most 6 px high at the shown size, never coarser than the descriptor's 48 nor finer than the profile's 192.
+  const count = Math.max(shapeGrid, Math.min(sliceGridMax, Math.ceil((finite(height) && height > 0 ? height : 0) / slicePixelsPerBand)));
+  let byCount = profileBands.get(profile);
+  if (!byCount) profileBands.set(profile, byCount = new Map());
+  let bands = byCount.get(count);
   if (!bands) {
     bands = [];
     let previous = new Map();
-    for (let index = 0; index < shapeGrid; index++) {
-      const top = index / shapeGrid, bottom = (index + 1) / shapeGrid;
-      const runs = [top, (top + bottom) / 2, bottom].flatMap(t => {
+    for (let index = 0; index < count; index++) {
+      const top = index / count, bottom = (index + 1) / count;
+      // Sampled just inside the bottom edge: on the edge itself a band profile answers with the next band's row and the slice runs a row long.
+      const runs = [top, (top + bottom) / 2, bottom - 1e-9].flatMap(t => {
         if (profile.runsAt) return profile.runsAt(t) || [];
         const span = profile.spanAt(t);
         return span ? [span] : [];
@@ -264,10 +283,19 @@ export function pictureSlices(profile, x, y, width, height, gap = 10) {
       }
       previous = current;
     }
-    profileBands.set(profile, bands);
+    byCount.set(count, bands);
+  }
+  const slices = [];
+  for (const band of bands) {
+    const left = x + band.left * width, right = x + band.right * width, top = y + band.top * height, bottom = y + band.bottom * height;
+    slices.push({x: left - gap, y: top, width: right - left + gap * 2, height: bottom - top});
+    for (const {from, to, reach} of shoulders) {
+      const ext = gap * reach, span = gap * (to - from);
+      slices.push({x: left - ext, y: top - gap * to, width: right - left + ext * 2, height: span});
+      slices.push({x: left - ext, y: bottom + gap * from, width: right - left + ext * 2, height: span});
+    }
   }
-  return bands.map(band => ({x: x + band.left * width - gap, y: y + band.top * height - gap,
-    width: (band.right - band.left) * width + gap * 2, height: (band.bottom - band.top) * height + gap * 2}));
+  return slices;
 }
 
 export function slotsForBand(width, obstacles, top, height, minWidth = 40) {

package/dist/spec/md-assets.mjs

@@ -128,6 +128,52 @@ export function parseAssets(source, factory = configured || globalThis.markdowni
   return index;
 }
 export function documentAssets(source, factory) { return parseAssets(source, factory, markdownBodyOffset(source)); }
+
+// The same index folded from the document's top-level blocks: `rows` are the blocks as markdown-it's block parse
+// of the body cuts them, each {start, raw} with `start` absolute in `source`, and `parse(raw, row)` is parseAssets
+// over one block (the caller may cache it by the row). A definition the whole parse finds is one a block's own parse
+// finds at the block's place, because a top-level block's lines parse the same alone as in the document; labels,
+// duplicates, the first definition's precedence, the count limit and the appendix fold as parseAssets folds them.
+// Null when the rows are not this source: a block's bytes elsewhere than its start, rows out of order or overlapping,
+// or text that could hold a definition (`]:`) between the body's start, the rows and the end, where no row parses
+// it. Positions are the source's own, never normalized.
+export function blockwiseAssets(source, rows, parse = raw => parseAssets(raw), bodyOffset = markdownBodyOffset(source)) {
+  if (typeof source !== 'string' || !Array.isArray(rows)) return null;
+  const blocks = [], references = Object.create(null), duplicateLabels = new Set(), seen = new Set(), assets = new Map();
+  let cursor = bodyOffset;
+  for (const row of rows) {
+    const raw = String(row.raw || ''), start = row.start;
+    if (!(start >= cursor) || source.slice(cursor, start).includes(']:') || source.slice(start, start + raw.length) !== raw) return null;
+    cursor = start + raw.length;
+    if (!raw.includes(']:')) continue;
+    const index = parse(raw, row);
+    // Every label the block defines, picture or not: an earlier definition of a label, of any kind, is the one
+    // the document resolves, so a later picture under it is inactive and the label a duplicate.
+    const labels = Object.keys(index.references);
+    for (const label of index.duplicateLabels) duplicateLabels.add(label);
+    for (const label of labels) {
+      if (seen.has(label)) duplicateLabels.add(label);
+      if (!Object.hasOwn(references, label)) references[label] = index.references[label];
+    }
+    for (const block of index.blocks) {
+      const active = block.active && !seen.has(block.id);
+      const shifted = {...block, start: block.start + start, end: block.end + start, status: 'unverified', active};
+      for (const key of ['urlStart', 'urlEnd', 'payloadStart', 'payloadEnd']) if (block[key] != null) shifted[key] = block[key] + start;
+      blocks.push(shifted);
+      if (active) assets.set(block.id, shifted);
+    }
+    for (const label of labels) seen.add(label);
+  }
+  if (source.slice(cursor).includes(']:')) return null;
+  if (assets.size > IMAGE_LIMITS.assets) for (const asset of assets.values()) asset.status = 'asset_count_limit';
+  let appendixStart = source.length;
+  for (let index = blocks.length - 1; index >= 0; index--) {
+    const block = blocks[index];
+    if (!block.active || !block.topLevel || !/^[ \t\r\n]*$/.test(source.slice(block.end, appendixStart))) break;
+    appendixStart = block.start;
+  }
+  return {assets, blocks, duplicateLabels, appendixStart, references};
+}
 export function imageEnvironment(source, factory) { return {references: Object.assign(Object.create(null), documentAssets(source, factory).references)}; }
 
 function imageUses(source, factory, env = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.1.14",
+  "version": "1.1.21",
   "description": "Read, write and style Self-contained Markdown: the universal stylesheet, picture layout, text marks, picture appendix, line planner and Will/1 markers. MIT, no dependencies.",
   "author": "Jack Skipworth",
   "license": "MIT",

package/style.css

@@ -16,7 +16,8 @@
 	--md-text-base:1rem;
 	--md-fw-semibold:600;
 	--md-fw-regular:400;
-	--md-leading-tight:1.2;
+	--md-text-body:1.1rem;
+	--md-line:1.75rem;
 	--md-space-6:24px;
 	--md-space-4:16px;
 	--md-space-3:12px;
@@ -31,11 +32,10 @@
 	--md-color-border-focus:light-dark(#c4c2bc,#2a2a2a);
 	--md-color-text-secondary:light-dark(#444444,#a1a1a1);
 	--md-color-text-muted:light-dark(#606060,#878787);
-	--md-color-success:light-dark(#1a9148,#45d483);
-	--md-color-warning:light-dark(#d97706,#f5a623);
+	--md-color-success:light-dark(#188844,#45d483);
+	--md-color-warning:light-dark(#b26105,#f5a623);
 	--md-color-error:light-dark(#c00,#ec5156);
 	--md-space-8:32px;
-	--md-space-7:28px;
 	--md-color-accent:#12A594;
 	--md-color-text-subtle:light-dark(#636363,#858585);
 	--md-heading-color:var(--md-color-text);
@@ -117,7 +117,7 @@
    runs past the column reads as a wide table does -- it scrolls, under the same fading edge. */
 :where(.md-render) .diagram-block {
 	position: relative;
-	margin: 1em 0;
+	margin: 0 0 var(--md-line);
 	max-width: 100%;
 	overflow: auto;
 }
@@ -345,25 +345,31 @@
 	opacity: .78;
 }
 
+/* The line model (item 2c, the founder's: the way a Word document reads). One line, --md-line, is the body's line
+   box: 1.75rem, 1.6 lines of the 1.1rem body, a whole 28 px at the browser's 16 px root so baselines land on pixels.
+   Every block ends one line below its last line; a heading ends half a line below. A heading's own box is the whole
+   or half lines its size fills: h1 at 2.4 x the body on two lines, h2 and h3 on one and a half, h4 to h6 on one.
+   Nothing sets a top margin, so a plain page (sibling margins collapsing) and the editor (a wrapper per block) space
+   alike, and the space before any block is the line its predecessor leaves. */
 .md-render{
-	font:var(--md-fw-regular) 1.1rem/1.75 var(--md-font-sans);color:var(--md-color-text);text-align:start}
+	font:var(--md-fw-regular) var(--md-text-body)/var(--md-line) var(--md-font-sans);color:var(--md-color-text);text-align:start}
 .md-render>:first-child,.md-render :is(blockquote,li,td,th,dd,.callout,details)>:first-child{margin-top:0}
+/* A block's last line ends the block: the line its last paragraph would leave is the block's own (a quote used to stand a line taller than its words). */
+.md-render :is(blockquote,td,th,dd)>:last-child{margin-bottom:0}
 .md-render h1,.md-render h2,.md-render h3,.md-render h4,.md-render h5,.md-render h6{
 	font-family:var(--md-font-sans);letter-spacing:-0.01em;
-	line-height:var(--md-leading-tight);color:var(--md-heading-color);text-wrap:balance}
-.md-render h1{font-size:2.8rem;font-weight:700;
-	margin:var(--md-space-6) 0 var(--md-space-4);
-	padding-bottom:var(--md-space-3)}
-.md-render h2{font-size:2.2rem;font-weight:600;margin:var(--md-space-6) 0 var(--md-space-3)}
-.md-render h3{font-size:1.7rem;font-weight:600;margin:var(--md-space-5) 0 var(--md-space-2)}
-.md-render h4{font-size:1.3rem;font-weight:500;margin:var(--md-space-4) 0 var(--md-space-2)}
+	line-height:var(--md-line);margin:0 0 calc(var(--md-line) / 2);color:var(--md-heading-color);text-wrap:balance}
+.md-render h1{font-size:calc(var(--md-text-body) * 2.4);line-height:calc(var(--md-line) * 2);font-weight:700}
+.md-render h2{font-size:calc(var(--md-text-body) * 1.9);line-height:calc(var(--md-line) * 1.5);font-weight:600}
+.md-render h3{font-size:calc(var(--md-text-body) * 1.5);line-height:calc(var(--md-line) * 1.5);font-weight:600}
+.md-render h4{font-size:calc(var(--md-text-body) * 1.25);font-weight:500}
 /* h5/h6 complete the six-level hierarchy: modest but owned (explicit size/weight/colour), never
-   the browser default. Size stays strictly monotonic below h4; h6 firms up weight and dims colour
-   since its size alone reads weakly small next to body text. */
-.md-render h5{font-size:1.1rem;font-weight:600;margin:var(--md-space-4) 0 var(--md-space-2)}
-.md-render h6{font-size:0.95rem;font-weight:600;margin:var(--md-space-3) 0 var(--md-space-2);color:var(--md-heading-muted-color)}
-.md-render p{margin:0 0 var(--md-space-4)}
-.md-render ul,.md-render ol{margin:0 0 var(--md-space-4);padding-inline-start:var(--md-space-5)}
+   the browser default. Size stays strictly monotonic below h4; h6 sits at the body's own size and
+   firms up weight and dims colour, since its size alone would read as body text. */
+.md-render h5{font-size:calc(var(--md-text-body) * 1.1);font-weight:600}
+.md-render h6{font-size:var(--md-text-body);font-weight:600;color:var(--md-heading-muted-color)}
+.md-render p{margin:0 0 var(--md-line)}
+.md-render ul,.md-render ol{margin:0 0 var(--md-line);padding-inline-start:var(--md-space-5)}
 .md-render ul{list-style:none}
 .md-render ul>li{position:relative}
 
@@ -445,7 +451,7 @@
 .md-render ol{
 	list-style:none;
 	padding-inline-start:2.75rem;
-	margin:0 0 var(--md-space-4);
+	margin:0 0 var(--md-line);
 	counter-reset:rapier-ol;
 }
 .md-render ol>li{
@@ -475,12 +481,13 @@
 
 	inset-inline-start:calc(-1.75rem - 1.5px);
 	top:2.2rem;
-	bottom:-0.4rem;
+	bottom:calc(var(--md-line) / -4);
 	border-inline-start:3px dotted var(--md-color-line);
 	z-index:0;
 }
-.md-render li{margin:0 0 var(--md-space-3)}
-.md-render li>ul,.md-render li>ol{margin:var(--md-space-2) 0 0}
+.md-render li{margin:0 0 calc(var(--md-line) / 4)}
+.md-render li:last-child{margin-bottom:0}
+.md-render li>ul,.md-render li>ol{margin:calc(var(--md-line) / 4) 0 0}
 .md-render a{color:var(--md-color-accent-text);text-decoration:underline;text-underline-offset:2px}
 /* The house focus (rapier-app.css) in the document and on the exported page: the underline thickens, no ring. */
 .md-render a:focus-visible,.md-render ul.rapier-jump-list>li>a:focus-visible,.md-render .footnote-ref a:focus-visible,.md-render summary:focus-visible{outline:none;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.2em}
@@ -499,7 +506,7 @@
 	--md-jump-marker-center:1em;
 	list-style:none;
 	padding-inline-start:1.85rem;
-	margin:0 0 var(--md-space-5);
+	margin:0 0 var(--md-line);
 }
 .md-render ul.rapier-jump-list>li{
 	position:relative;
@@ -543,13 +550,13 @@
 .md-render em{font-style:italic}
 .md-render code{font-family:var(--md-font-mono);font-size:0.85em;
 	background:var(--md-color-inset);border:1px solid var(--md-color-border);padding:1px 5px}
-.md-render pre{margin:0 0 var(--md-space-4);padding:var(--md-space-3) var(--md-space-4);
+.md-render pre{margin:0 0 var(--md-line);padding:var(--md-space-3) var(--md-space-4);
 	background:var(--md-color-surface-2);border:1px solid var(--md-color-border);overflow-x:auto}
-.md-render pre code{background:none;border:none;padding:0;font-size:0.8125rem;line-height:1.6}
+.md-render pre code{background:none;border:none;padding:0;font-size:0.8125rem;line-height:calc(var(--md-line) * .75)}
 .md-render .math-display-wrap{
 	display:block;
 	max-width:100%;
-	margin:0 0 var(--md-space-4);
+	margin:0 0 var(--md-line);
 	overflow-x:auto;
 	overflow-y:hidden;
 	-webkit-overflow-scrolling:touch;
@@ -565,14 +572,14 @@
 	text-align:initial;
 	vertical-align:middle;
 }
-.md-render p>.math-display-wrap{margin:var(--md-space-2) 0 var(--md-space-4)}
+.md-render p>.math-display-wrap{margin:calc(var(--md-line) / 4) 0 var(--md-line)}
 .md-render math[display="block"]{font-size:1.12em}
 .md-render math:not([display="block"]){font-size:1em}
-.md-render blockquote{margin:0 0 var(--md-space-4);
+.md-render blockquote{margin:0 0 var(--md-line);
 	padding-block:var(--md-space-1);padding-inline-start:var(--md-space-4);padding-inline-end:0;
 	border-inline-start:2px solid var(--md-color-border-focus);color:var(--md-color-text-secondary)}
 .md-render blockquote blockquote{
-	margin:var(--md-space-3) 0 var(--md-space-2);padding-inline-start:var(--md-space-3);
+	margin:calc(var(--md-line) / 2) 0 calc(var(--md-line) / 4);padding-inline-start:var(--md-space-3);
 	border-inline-start-color:color-mix(in srgb,var(--md-color-border-focus) 70%,var(--md-color-text-muted));
 	color:color-mix(in srgb,var(--md-color-text-secondary) 84%,var(--md-color-text-muted))
 }
@@ -597,7 +604,7 @@
 .md-render blockquote.callout>:last-child{margin-bottom:0}
 @media print{.md-render{--md-callout-note:#0969da;--md-callout-important:#8250df}}
 
-.md-render details { border: 1px solid var(--md-color-border); border-radius: 0; padding: var(--md-space-2) var(--md-space-4); margin: 0 0 var(--md-space-4); }
+.md-render details { border: 1px solid var(--md-color-border); border-radius: 0; padding: var(--md-space-2) var(--md-space-4); margin: 0 0 var(--md-line); }
 .md-render details[open] { padding-bottom: var(--md-space-3); }
 /* A section with nothing typed into it yet has no paragraph to tap: without this, the only body
    space below the summary is the plain padding-bottom above (12px), too thin a margin for a real
@@ -615,15 +622,15 @@
 	background:transparent;
 	color:var(--md-color-line);
 	opacity:1;
-	margin:var(--md-space-7) 0;
+	margin:var(--md-line) 0;
 	overflow:visible;
 }
 .md-render hr[data-hr-style="dash"]{
 	border-top:2px solid var(--md-color-line);
 }
 .md-render hr[data-hr-style="stars"]{
-	height:18px;
-	margin:var(--md-space-8) 0;
+	height:var(--md-line);
+	margin:var(--md-line) 0;
 }
 .md-render hr[data-hr-style="stars"]::before{
 	content:"";
@@ -652,7 +659,7 @@
 	height:0;
 	border:none;
 	border-top:1px dashed var(--md-color-text-muted);
-	margin:var(--md-space-7) 0;
+	margin:var(--md-line) 0;
 	opacity:.37;
 }
 .md-render [data-md-break]::after{
@@ -671,7 +678,7 @@
 .md-render table{
 	width:100%;
 	border-collapse:collapse;
-	margin:0 0 var(--md-space-5);
+	margin:0 0 var(--md-line);
 	font-size:var(--md-text-sm);
 	border:2px solid var(--md-color-line);
 }
@@ -695,7 +702,7 @@
 	 adjacent-sibling rule below settles the real "is it truly right after a table" question against
 	 the live .block-wrapper DOM, reactively, with no bookkeeping kept in sync on insert/delete/reorder. */
 :where(.md-render) .rapier-table-caption {
-	margin-top: calc(-1 * var(--md-space-4));
+	margin-top: calc(var(--md-space-1) - var(--md-line));
 	font-style: italic;
 	font-size: var(--md-text-sm);
 	color: var(--md-color-text-secondary);
@@ -714,8 +721,8 @@
 .md-render :has(>img[data-md-drawing],>a>img[data-md-drawing]){overflow-x:auto}
 .md-render img:is([data-rapier-asset],[data-rapier-image-url]):not([data-rapier-asset-state="ready"]){background:color-mix(in srgb,var(--md-color-text) 5%,transparent)}
 
-.md-render dl{margin:0 0 var(--md-space-4)}
-.md-render dt{font-weight:var(--md-fw-semibold);margin:var(--md-space-2) 0 0}
+.md-render dl{margin:0 0 var(--md-line)}
+.md-render dt{font-weight:var(--md-fw-semibold);margin:calc(var(--md-line) / 4) 0 0}
 .md-render dt:first-child{margin-top:0}
 .md-render dd{margin:var(--md-space-1) 0 0;padding-inline-start:var(--md-space-4);color:var(--md-color-text-secondary)}
 
@@ -752,7 +759,7 @@
 .md-render del,.md-render s{color:var(--md-color-text-muted);text-decoration:line-through}
 
 .md-render .footnotes-sep{display:none}
-.md-render .footnotes{margin:var(--md-space-7) 0 0;padding-top:var(--md-space-3);border-top:1px solid var(--md-color-border);font-size:var(--md-text-sm);color:var(--md-color-text-secondary)}
+.md-render .footnotes{margin:var(--md-line) 0 0;padding-top:var(--md-space-3);border-top:1px solid var(--md-color-border);font-size:var(--md-text-sm);color:var(--md-color-text-secondary)}
 .md-render .footnotes-list{list-style:decimal;padding-inline-start:var(--md-space-5);margin:0;counter-reset:none}
 .md-render .footnotes-list>li{padding-top:0;min-height:0}
 .md-render .footnotes-list>li::before,.md-render .footnotes-list>li::after{content:none}
@@ -781,8 +788,9 @@
 }
 
 /* Overflow belongs to the document; the surrounding page owns its measure and padding. */
-.md-render .table-scroll-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
-.md-render .table-scroll-wrap table{min-width:100%}
+/* A wide table scrolls inside its wrap; the wrap carries the block's line, so a scrollbar sits under the table, not a line below it. */
+.md-render .table-scroll-wrap{width:100%;margin:0 0 var(--md-line);overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
+.md-render .table-scroll-wrap table{min-width:100%;margin-bottom:0}
 @media print{
   .md-render [data-md-break]{border:0!important;height:0!important;margin:0!important;break-before:page;page-break-before:always}
   .md-render [data-md-break]::after{content:none!important}