rapier-markdown-kit 1.1.87 → 1.1.88

package/README.md

@@ -11,8 +11,9 @@ and colour.
 - Will/1 markers say which regions an agent may edit, only add to, or must keep.
 - MIT, no dependencies, Node 22 or newer.
 
-To hand a person the whole editor around their document as one offline file, run `npx rapier-html notes.md`.
-The same command accepts a drawing or an SVG.
+To show documents in your app without writing a renderer, frame the read-only reader with
+`npm install rapier-embed` (`build: 'reader'`). To hand a person the whole editor around their document as one
+offline file, run `npx rapier-html notes.md`.
 
 ```sh
 npm install rapier-markdown-kit
@@ -302,7 +303,7 @@ const together = merge(ledger, reopened.ledger);
 console.assert(together.text === 'Hello');
 ```
 
-## The format at launch
+## The format
 
 `rapier-ledger/1` is a plain JSON object:
 
@@ -334,8 +335,7 @@ actual document. `historyEnvelope` additionally proves the editor's Undo/Redo br
 `chars:fnv-base36:adler-base36` initial root. Each splice advances it with
 `rootAfter(priorRoot, splice)`, matching the source store. A later root is **not**
 a fresh hash of the whole current text. SHA-256 of the exact checkpoint text is
-separate. This distinction preserves the editor's actual format rather than the
-earlier design shorthand. A nonzero start names a retained checkpoint; it does not
+separate. A nonzero start names a retained checkpoint; it does not
 claim to reconstruct discarded events. `complete: false` also permits a stated
 revision gap from the editor's pruning of cancelling navigation pairs; each
 remaining splice must still replay exactly. It is never a claim about missing edits.

package/dist/kit/render.mjs

@@ -1030,7 +1030,7 @@ function _rapierArtifactFactoryModules(dependencies, group) {
 function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
   if (!root || !metadata || !geometry || !pretext) return null;
   const doc = root.ownerDocument, view = doc.defaultView;
-  const styles = new Map(), originals = new Map(), spacers = [], floats = [], profiles = new WeakMap();
+  const styles = new Map(), originals = new Map(), spacers = [], floats = [], steps = [], profiles = new WeakMap();
   const css = node => view.getComputedStyle(node);
   const box = node => node.getBoundingClientRect();
   const pixels = value => (Number.isFinite(value) ? Math.round(value * 100) / 100 : 0) + 'px';
@@ -1053,6 +1053,8 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
     spacers.length = 0;
     for (const float of floats) float.remove();
     floats.length = 0;
+    for (const item of steps) item.removeAttribute('data-rapier-wrap-step');
+    steps.length = 0;
   }
 
   // Plain inline text uses Pretext. Complex blocks keep their original controls through floats.
@@ -1210,14 +1212,14 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
     }
   }
 
-  // Nothing is ever inserted between a picture and its words: a reader and the witnesses read nextElementSibling.
-  function clearTo(element, bottom, origin, before = element) {
-    const distance = bottom - (box(element).top - origin);
-    if (distance <= 0) return;
-    const spacer = doc.createElement('div');
-    spacer.setAttribute('aria-hidden', 'true');
-    spacer.style.cssText = 'height:' + pixels(distance) + ';clear:both;';
-    before.before(spacer); spacers.push(spacer);
+  // A block that cannot wrap stands with its box just below the outline, as in the editor. Its own margin moves it, so
+  // nothing is inserted between a picture and its words (a reader and the witnesses read nextElementSibling).
+  function clearTo(element, bottom, origin) {
+    for (let pass = 0; pass < 3; pass++) {
+      const distance = bottom - (box(element).top - origin);
+      if (Math.abs(distance) <= 0.5) return;
+      style(element, {'margin-top': pixels(Math.max(0, (parseFloat(css(element).marginTop) || 0) + distance))});
+    }
   }
 
   const imageOnly = geometry.imageOnly;
@@ -1234,7 +1236,27 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
   // Float fallback as the editor's floatAround.
   const FLOAT_BLOCK = /^(P|H[1-6]|UL|OL|BLOCKQUOTE|DETAILS|SUMMARY|DL)$/;
   function floatAround(element, width, height, top, obstacles) {
-    if (!FLOAT_BLOCK.test(element.tagName) || element.querySelector('table, pre, figure, img, .math-rendered')) return false;
+    // As the editor: a paragraph or heading floats whatever it holds; a list, quote or disclosure holding a rigid block does not.
+    if (!FLOAT_BLOCK.test(element.tagName) || !/^(P|H[1-6])$/.test(element.tagName) && element.querySelector('table, pre, figure, img, .math-rendered')) return false;
+    // As the editor: a disclosure's box ends where the outline begins (layout/model.mjs boxClearance).
+    if (element.tagName === 'DETAILS') {
+      const computed = css(element), outer = box(element), floor = metadata.wrapColumnFloor(parseFloat(computed.fontSize) || 16);
+      const offset = (parseFloat(computed.paddingLeft) || 0) + (parseFloat(computed.borderLeftWidth) || 0);
+      const own = obstacles.map(obstacle => ({...obstacle, x: obstacle.x + offset}));
+      const marginLeft = parseFloat(computed.marginLeft) || 0, marginRight = parseFloat(computed.marginRight) || 0;
+      let extent = height, clear = null;
+      for (let pass = 0; pass < 3; pass++) {
+        const next = geometry.boxClearance(own, outer.width, top, extent, floor);
+        if (!next) break;
+        if (!next.fits) return false;
+        clear = {left: Math.max(clear?.left || 0, next.left), right: Math.max(clear?.right || 0, next.right)};
+        style(element, {'margin-left': pixels(marginLeft + clear.left), 'margin-right': pixels(marginRight + clear.right)});
+        const grown = box(element).height;
+        if (Math.abs(grown - extent) < .5) break;
+        extent = grown;
+      }
+      if (clear) return true;
+    }
     if (element.tagName === 'DETAILS' && !element.open) {
       const summary = element.querySelector(':scope > summary');
       if (!summary) return false;
@@ -1246,21 +1268,26 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
         obstacles.map(obstacle => ({...obstacle, x: obstacle.x - bounds.left - inset + outer.left + parentInset})));
     }
     const computed = css(element);
-    top += (parseFloat(computed.paddingTop) || 0) + (parseFloat(computed.borderTopWidth) || 0);
+    const inset = (parseFloat(computed.paddingTop) || 0) + (parseFloat(computed.borderTopWidth) || 0);
+    top += inset;
     const bottom = top + height;
     const inside = obstacles.filter(obstacle => obstacle.y < bottom + 4096 && obstacle.y + obstacle.height > top &&
       obstacle.x < width && obstacle.x + obstacle.width > 0);
     if (!inside.length) return false;
-    // layout/model.mjs wrapShape; `geometry` is modules["layout/model.mjs"].
+    // layout/model.mjs wrapShape; `geometry` is modules["layout/model.mjs"]. As the editor, the start side reaches from
+    // the box's own start edge.
+    const start = computed.direction === 'rtl' ? 'right' : 'left';
+    const startInset = start === 'left' ? (parseFloat(computed.paddingLeft) || 0) + (parseFloat(computed.borderLeftWidth) || 0)
+      : -((parseFloat(computed.paddingRight) || 0) + (parseFloat(computed.borderRightWidth) || 0));
     const shapeFor = side => {
-      const shape = geometry.wrapShape(side, inside, width, top);
+      const shape = geometry.wrapShape(side, side !== start ? inside : inside.map(obstacle => ({...obstacle, x: obstacle.x + startInset})), width, top);
       if (!shape) return null;
       return {...shape, shape: 'polygon(' + shape.points.map(point => pixels(point[0]) + ' ' + pixels(point[1])).join(',') + ') border-box'};
     };
     const shapes = {left: shapeFor('left'), right: shapeFor('right')};
     const spent = (shapes.left?.boxWidth || 0) + (shapes.right?.boxWidth || 0);
     if (!spent || spent > width - metadata.wrapColumnFloor(parseFloat(css(element).fontSize) || 16)) return false;
-    const placed = [];
+    const before = geometry.edgeLines(element), placed = [];
     for (const side of ['left', 'right']) {
       const shape = shapes[side];
       if (!shape) continue;
@@ -1269,25 +1296,39 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
       float.style.cssText = `float:${side};width:${pixels(shape.boxWidth)};height:${pixels(shape.boxHeight)};margin-top:${pixels(shape.startY)};shape-outside:${shape.shape};pointer-events:none`;
       element.prepend(float); floats.push(float); placed.push([float, shape]);
     }
-    // The block contains its floats and each float ends at the block's own content bottom, so
-    // successive blocks' floats never stack side by side (the same bound the editor applies).
-    style(element, {display: computed.display.includes('list-item') ? 'flow-root list-item' : 'flow-root'});
+    // As the editor: each float ends at the block's own content bottom and the block keeps its own display, so its
+    // margins collapse as they do with no picture. A float the content does not reach goes.
     const contentBottom = () => {
       let first = element.firstChild;
       while (first && placed.some(([float]) => float === first)) first = first.nextSibling;
-      if (!first || !element.lastChild) return box(element).height;
+      if (!first || !element.lastChild) return box(element).height - inset;
       const range = doc.createRange(); range.setStartBefore(first); range.setEndAfter(element.lastChild);
-      return range.getBoundingClientRect().bottom - box(element).top;
+      return range.getBoundingClientRect().bottom - box(element).top - inset;
     };
     for (let pass = 0; pass < 4; pass++) {
       const content = contentBottom();
       let changed = false;
-      for (const [float, shape] of placed) {
-        const bounded = Math.max(0, Math.min(shape.boxHeight, content - shape.startY));
-        if (Math.abs((parseFloat(float.style.height) || 0) - bounded) > 0.5) { float.style.height = pixels(bounded); changed = true; }
+      for (const [float, shape] of [...placed]) {
+        const bounded = Math.min(shape.boxHeight, content - shape.startY);
+        if (bounded <= 0) { float.remove(); placed.splice(placed.findIndex(([value]) => value === float), 1); changed = true; }
+        else if (Math.abs((parseFloat(float.style.height) || 0) - bounded) > 0.5) { float.style.height = pixels(bounded); changed = true; }
       }
       if (!changed) break;
     }
+    // As the editor: a list item's marker and a quote's bar move with the words the floats moved.
+    const {markers, bars, steps: breaks} = geometry.edgeMarks(element, before);
+    for (const {item, shift} of markers) style(item, {'--md-marker': 'calc(' + (item.style.getPropertyValue('--md-marker') || '0px') + ' + ' + pixels(shift) + ')'});
+    for (const item of breaks) { item.setAttribute('data-rapier-wrap-step', ''); steps.push(item); }
+    for (const {quote, runs} of bars) {
+      const look = css(quote), edge = box(quote).top + (parseFloat(look.borderTopWidth) || 0), barWidth = parseFloat(look.borderInlineStartWidth), color = look.borderInlineStartColor;
+      style(quote, {'border-inline-start-color': 'transparent', ...(look.position === 'static' ? {position: 'relative'} : {})});
+      for (const run of runs) {
+        const bar = doc.createElement('span');
+        bar.setAttribute('aria-hidden', 'true');
+        bar.style.cssText = `position:absolute;inset-inline-start:${pixels(run.shift - barWidth)};top:${pixels(run.top - edge)};width:${pixels(barWidth)};height:${pixels(run.bottom - run.top)};background:${color};pointer-events:none`;
+        quote.prepend(bar); floats.push(bar);
+      }
+    }
     return true;
   }
 
@@ -1322,13 +1363,11 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
       syncInlineRotatedPictures(positionedImages);
       for (const element of children) {
         if (wrapped.has(element)) continue;
-        // `let`: a pushed picture moves its owner and every later element.
-        let bounds = box(element);
+        const bounds = box(element);
         if (!bounds.width || !bounds.height) continue;
         const computed = css(element), inset = (parseFloat(computed.paddingLeft) || 0) + (parseFloat(computed.borderLeftWidth) || 0);
         const width = bounds.width - inset - (parseFloat(computed.paddingRight) || 0) - (parseFloat(computed.borderRightWidth) || 0);
 
-        let ownerLed = false;
         for (const {element: source, image, layout, width: imageWidth} of anchors.get(element) || []) {
           // A picture sized in lines (`lines`) reads its anchor's line and stands on the first line's cap height, as the live editor.
           const lines = layout.lines != null ? geometry.lineMetrics(element) : null;
@@ -1347,19 +1386,12 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
           // The standoff and the room between pictures, in the reference scale's pixels, as the live editor.
           const scale = geometry.frameScale(image), room = 10 * scale;
           if (!outOfFlow(layout)) {
+            // A picture an earlier one stands in moves down alone; its owner keeps its place, as in the editor.
             for (const obstacle of [...obstacles].sort((left, right) => left.y - right.y)) {
               if (obstacle.x < left + rectangle.width + room && obstacle.x + obstacle.width > left - room &&
                   obstacle.y + obstacle.height > y - room && obstacle.y < y + rectangle.height + room)
                 y = obstacle.y + obstacle.height + room;
             }
-            // A picture pushed down by an earlier one takes its owner with it. A deliberate `y` stays; only the collision push moves the paragraph.
-            const ownerTop = bounds.top - origin + topInset + geometry.linesTop(layout, lines) + Math.min(layout.y || 0, height / em) * em;
-            // Only the first picture of an owner takes it down.
-            if (!ownerLed && y > ownerTop + 0.5) {
-              clearTo(element, (bounds.top - origin) + (y - ownerTop), origin, source);
-              bounds = box(element);
-            }
-            ownerLed = true;
             obstacles.push(...geometry.linesSlices(geometry.pictureSlices(profile(image, layout), left, y, rectangle.width, rectangle.height, scale), layout, lines, y, rectangle.height));
           }
           placed.push({source, image, rectangle, left, y, wrap: layout.wrap,
@@ -1371,7 +1403,8 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
           const own = active.map(obstacle => ({...obstacle, x: obstacle.x - bounds.left - inset}));
           const prepared = prepare(element);
           if (!(prepared && width > 0 && project(prepared, width, top, own)) && !(width > 0 && floatAround(element, width, bounds.height, top, own))) {
-            const overlapping = active.filter(obstacle => obstacle.y < top + bounds.height);
+            // As the editor: only an outline that meets the block's box moves it.
+            const overlapping = active.filter(obstacle => obstacle.y < top + bounds.height && obstacle.x < bounds.right && obstacle.x + obstacle.width > bounds.left);
             if (overlapping.length) clearTo(element, Math.max(...overlapping.map(obstacle => obstacle.y + obstacle.height)), origin);
           }
         }

package/dist/layout/model.mjs

@@ -411,6 +411,106 @@ export function wrapShape(side, obstacles, width, top) {
 	return {boxWidth, boxHeight, startY, points};
 }
 
+// ---- What a block draws at its edge moves with its words (live and export alike) ----
+// A bordered box (a disclosure) cannot follow an outline line by line: it stands clear of it. `obstacles` in the box's
+// border-box coordinates, its band [top, top + height]: the insets that end the box where the outline begins on each
+// side, `fits` false when they leave less than `floor`; null when the outline does not meet the box.
+export function boxClearance(obstacles, width, top, height, floor) {
+	let left = 0, right = 0;
+	for (const row of obstacles) {
+		if (row.y >= top + height || row.y + row.height <= top || row.x >= width || row.x + row.width <= 0) continue;
+		if (row.x > width - (row.x + row.width)) right = Math.max(right, width - row.x);
+		else left = Math.max(left, row.x + row.width);
+	}
+	return left || right ? {left, right, fits: width - left - right >= floor} : null;
+}
+
+// Where an element's content begins at the inline start (a right edge counts negative in a right-to-left block).
+function contentStart(element) {
+	const style = element.ownerDocument.defaultView.getComputedStyle(element), box = element.getBoundingClientRect();
+	return style.direction === 'rtl' ? -(box.right - (parseFloat(style.paddingRight) || 0) - (parseFloat(style.borderRightWidth) || 0))
+		: box.left + (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.borderLeftWidth) || 0);
+}
+
+// The lines of words in `root` (text outside `skip`), each with its block, where it starts and where its block's content starts.
+export function edgeLines(root, skip = () => false) {
+	const doc = root.ownerDocument, view = doc.defaultView, lines = [], starts = new Map();
+	const walker = doc.createTreeWalker(root, 4);
+	for (let node; (node = walker.nextNode());) {
+		if (!node.data.trim() || skip(node)) continue;
+		let block = node.parentElement;
+		while (block !== root && view.getComputedStyle(block).display.startsWith('inline')) block = block.parentElement;
+		if (!starts.has(block)) starts.set(block, contentStart(block));
+		const rtl = view.getComputedStyle(block).direction === 'rtl', range = doc.createRange();
+		range.selectNodeContents(node);
+		for (const box of range.getClientRects()) {
+			if (!(box.width > 0)) continue;
+			const line = lines.find(row => row.block === block && Math.abs(row.top - box.top) < 2);
+			const start = rtl ? -box.right : box.left;
+			if (line) { line.start = Math.min(line.start, start); line.bottom = Math.max(line.bottom, box.bottom); }
+			else lines.push({block, top: box.top, bottom: box.bottom, start, content: starts.get(block)});
+		}
+	}
+	return lines;
+}
+
+// After a picture's floats settle: how far each line moved from where its block's lines began without them (`before`,
+// edgeLines read first). A list item's marker moves as far as its first line; a quote's bar moves to stand beside its
+// moved lines as it stood beside them before, in runs of one shift from the quote's top to its bottom.
+export function edgeMarks(root, before, skip = () => false) {
+	const view = root.ownerDocument.defaultView, home = new Map();
+	const byBlock = rows => {
+		const blocks = new Map();
+		for (const row of rows) { if (!blocks.has(row.block)) blocks.set(row.block, []); blocks.get(row.block).push(row); }
+		for (const list of blocks.values()) list.sort((a, b) => a.top - b.top);
+		return blocks;
+	};
+	for (const [block, rows] of byBlock(before)) {
+		const content = rows[0].content;
+		home.set(block, {content, first: rows[0].start, rest: rows.length > 1 ? Math.min(...rows.slice(1).map(row => row.start)) : content});
+	}
+	const lines = [];
+	for (const [block, rows] of byBlock(edgeLines(root, skip))) rows.forEach((row, index) => {
+		const natural = home.get(block);
+		if (natural) lines.push({...row, content: natural.content, moved: Math.max(0, row.start - (index ? natural.rest : natural.first))});
+	});
+	const within = selector => [...(root.matches(selector) ? [root] : []), ...root.querySelectorAll(selector)];
+	const shiftOf = item => lines.filter(line => line.block.closest('li') === item).sort((a, b) => a.top - b.top)[0]?.moved || 0;
+	const markers = [];
+	for (const item of within('li')) {
+		if (item.classList.contains('task-list-item')) continue;
+		const shift = shiftOf(item);
+		if (shift > .5) markers.push({item, shift});
+	}
+	// A numbered item's dotted line runs to the next circle: where the two circles moved apart it is not drawn (`steps`).
+	const steps = [];
+	for (const list of within('ol')) {
+		const items = [...list.children].filter(child => child.tagName === 'LI');
+		items.forEach((item, index) => {
+			const next = items[index + 1];
+			if (next ? Math.abs(shiftOf(item) - shiftOf(next)) > .5 : list.hasAttribute('data-rapier-list-continues') && shiftOf(item) > .5) steps.push(item);
+		});
+	}
+	const bars = [];
+	for (const quote of within('blockquote')) {
+		if (!(parseFloat(view.getComputedStyle(quote).borderInlineStartWidth) > 0)) continue;
+		const start = contentStart(quote);
+		const own = lines.filter(line => quote.contains(line.block)).sort((a, b) => a.top - b.top)
+			.map(line => ({...line, shift: line.moved > .5 ? line.moved + line.content - start : 0}));
+		if (!own.some(line => line.shift > .5)) continue;
+		const box = quote.getBoundingClientRect(), runs = [];
+		for (const line of own) {
+			const run = runs.at(-1);
+			if (run && Math.abs(run.shift - line.shift) <= .5) { run.bottom = line.bottom; continue; }
+			if (run) run.end = (run.bottom + line.top) / 2;
+			runs.push({shift: line.shift, top: run ? run.end : box.top, bottom: line.bottom});
+		}
+		runs.at(-1).end = box.bottom;
+		bars.push({quote, runs: runs.map(run => ({shift: run.shift, top: run.top, bottom: run.end}))});
+	}
+	return {markers, bars, steps};
+}
+
 // ---- The one "paragraph holds only the picture": one meaningful child, the image or an <a> wrapping only it ----
 export function imageOnly(paragraph, image) {
 	const meaningful = node => [...node.childNodes].filter(child => child.nodeType !== 8 &&

package/package.json

@@ -1,23 +1,24 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.1.87",
-  "description": "Read, render, write and style Self-contained Markdown, and carry its optional edit ledger: the shared HTML writer, semantic renderer, stylesheet, layout, marks, pictures, Will/1, replay, authorship and offline merge. MIT, no npm dependencies.",
+  "version": "1.1.88",
+  "description": "Read, render and write Self-contained Markdown: one .md file that carries its pictures, drawings and layout, and that any Markdown app can read. HTML renderer, stylesheet, text layout, Will/1 agent permissions, and an edit history with authorship and offline merge. MIT, no dependencies.",
   "keywords": [
     "markdown",
     "self-contained",
     "commonmark",
     "gfm",
+    "renderer",
     "stylesheet",
     "css",
-    "layout",
     "text-layout",
-    "text-wrap",
     "line-breaking",
     "images",
+    "svg",
     "document",
     "will",
-    "agent",
-    "conformance",
+    "ai-agents",
+    "authorship",
+    "merge",
     "rapier"
   ],
   "author": "Jack Skipworth",

package/style.css

@@ -234,7 +234,7 @@
 /* The line model (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.43 x the body on two lines (medium weight, lighter than the bold smaller headings), h2 and h3
+   size fills: h1 at 2.6 x the body on two lines (medium weight, lighter than the bold smaller headings), 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. */
@@ -246,7 +246,7 @@
 .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-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.43);line-height:calc(var(--md-line) * 2);font-weight:500}
+.md-render h1{font-size:calc(var(--md-text-body) * 2.6);line-height:calc(var(--md-line) * 2);font-weight:500}
 .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}
@@ -377,6 +377,8 @@
    _rapierMarkListContinuations marks them): the heading stands on the margin the item text stands on, and the dotted
    line runs on, out of the first part's last item, down the heading's own height, to the next circle. */
 .md-render ol[data-rapier-list-continues]>li:last-child::after{bottom:calc(-1 * var(--md-line))}
+/* A wrapped picture set the next circle aside: the dotted line ends with this item, as at a list's last. */
+.md-render ol>li[data-rapier-wrap-step]::after{content:none!important}
 .md-render :is(h1,h2,h3,h4,h5,h6)[data-rapier-list-through]{position:relative;padding-inline-start:calc(2.75 * var(--md-unit))}
 .md-render :is(h1,h2,h3,h4,h5,h6)[data-rapier-list-through]::before{
 	content:'';