rapier-markdown-kit 1.2.30 → 1.2.32

package/README.md

@@ -164,7 +164,7 @@ family name share the host's font namespace. Print retains its existing factory
 
 | Import | What it is |
 | --- | --- |
-| `rapier-markdown-kit/markdown-it` | `md.use(rapierMarkdown)`: the reference style's markup in markdown-it, in one line. |
+| `rapier-markdown-kit/markdown-it` | `md.use(rapierMarkdown)`: the reference style's markup in markdown-it, in one line, with rung 1 of `md-layout:v1` (align, indents, list markers, picture width, lines and opacity, paragraph typography). |
 | `rapier-markdown-kit/parsed` | A frozen, serializable view of completed Markdown tokens, bound to source, revision and grammar. |
 | `rapier-markdown-kit/layout` | The `md-layout:v1` comment a picture carries: parse it, validate it, write it back. |
 | `rapier-markdown-kit/marks` | Unified typography values, span writer and parser installer; preserved color/font comments, ink and page breaks. |

package/dist/kit/conformance/README.md

@@ -1,7 +1,7 @@
 # The conformance kit
 
 Thirteen small documents, each covering one placement fact from [the Markdown
-standard](https://rapier.website/markdown-standard): inline (no layout comment), width/x/align, `wrap=around`
+standard](https://github.com/jackskip22/rapier/blob/main/docs/markdown-standard.md): inline (no layout comment), width/x/align, `wrap=around`
 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

package/dist/kit/ledger/carried.mjs

@@ -50,15 +50,27 @@ const OPEN = '\n\n<!-- rapier-carried/1\n', CLOSE = '\n-->\n';
 export function documentTrailer(text, options) {
   const parts = validateParts(text, options);
   if (!parts.ledger && !parts.authorship) return '';
-  const json = JSON.stringify(parts).replace(/</g, '\\u003c').replace(/>/g, '\\u003e');
+  const json = JSON.stringify(parts).replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/-/g, '\\u002d');
   return OPEN + json + CLOSE;
 }
 export function writeDocument(text, options) {
   return text + documentTrailer(text, options);
 }
+function unfinishedTrailer(source) {
+  const at = source.lastIndexOf(OPEN);
+  if (at < 0) return false;
+  let fence = null;
+  for (const line of source.slice(0, at).split('\n')) {
+    const found = /^ {0,3}(`{3,}|~{3,})/.exec(line);
+    if (!found) continue;
+    if (!fence) fence = found[1];
+    else if (found[1][0] === fence[0] && found[1].length >= fence.length && !line.slice(found[0].length).trim()) fence = null;
+  }
+  return !fence;
+}
 export function readDocument(source) {
   if (!source.endsWith(CLOSE)) {
-    if (source.includes(OPEN)) throw fault('unfinished document metadata');
+    if (unfinishedTrailer(source)) throw fault('unfinished document metadata');
     return {text: source, ledger: null, authorship: null};
   }
   const at = source.lastIndexOf(OPEN);

package/dist/kit/markdown-it.mjs

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-import {parseLayout, imageStyle} from './layout.mjs';
+import {parseLayout, imageStyle, textStyle} from './layout.mjs';
 import {typography, isPageBreakBlock} from './marks.mjs';
 import {installMarkdownImages} from './assets.mjs';
 import {tuneMarkdownEngine} from '../spec/md-engine.mjs';
@@ -26,11 +26,25 @@ export function rapierMarkdown(md) {
       const layout = parseLayout(marker.content);
       if (!layout) continue;
       children.pop();
-      if (layout.align) owner.attrSet('data-md-align', layout.align);
+      if (layout.align && (layout.align !== 'justify' || owner.type === 'paragraph_open')) owner.attrSet('data-md-align', layout.align);
       const visible = children.filter(token => token.type !== 'text' || token.content.trim());
-      if (visible.length === 1 && visible[0].type === 'image' && layout.width) {
-        visible[0].attrSet('style', imageStyle(layout));
-        visible[0].attrSet('data-md-image-width', String(layout.width));
+      const picture = visible.length === 1 && visible[0].type === 'image' ? visible[0]
+        : visible.length === 3 && visible[0].type === 'link_open' && visible[1].type === 'image' && visible[2].type === 'link_close' ? visible[1] : null;
+      if (picture) {
+        if (layout.width != null || layout.lines != null || layout.opacity != null) {
+          const style = imageStyle(layout);
+          if (style) picture.attrSet('style', style);
+          if (layout.width != null) picture.attrSet('data-md-image-width', String(layout.width));
+        }
+        continue;
+      }
+      for (const key of ['first', 'indent', 'before', 'after', 'lines', 'hyphens', 'caps', 'hanging']) if (layout[key]) owner.attrSet('data-md-' + key, String(layout[key]));
+      const style = [textStyle(layout), layout.lines != null ? '--md-drop-lines:' + layout.lines : ''].filter(Boolean).join(';');
+      if (style) owner.attrSet('style', style);
+      const item = state.tokens[i - 2];
+      if (layout.marker && item?.type === 'list_item_open') {
+        item.attrSet('data-md-marker', String(layout.marker));
+        item.attrSet('style', (item.attrGet('style') ? item.attrGet('style') + ';' : '') + textStyle({marker: layout.marker}));
       }
     }
   });

package/dist/kit/pdf-glyphs.mjs

@@ -337,8 +337,8 @@ export async function collectPdfGlyphs(main, {width, check, faces = [], prepareF
         probe.style.setProperty('visibility', 'hidden', 'important'); probe.textContent = String(value); item.prepend(probe);
         const parts = await measure(probe.firstChild, style, font); probe.remove();
         if (!parts.length || parts.some(part => !part.font)) continue;
-        parts.at(-1).text += ' ';
-        markers.set(item, {text: String(value) + ' ', parts, ...Object.fromEntries(['x','y','width','height','page'].map(key => [key, parts[0][key]]))});
+        parts.at(-1).text += '. ';
+        markers.set(item, {text: String(value) + '. ', parts, ...Object.fromEntries(['x','y','width','height','page'].map(key => [key, parts[0][key]]))});
         const id = 'm' + markers.size, old = item.getAttribute('data-rapier-pdf-marker'); item.setAttribute('data-rapier-pdf-marker', id);
         restoreSteps.push(() => old == null ? item.removeAttribute('data-rapier-pdf-marker') : item.setAttribute('data-rapier-pdf-marker', old));
         markerRules.push('[data-rapier-pdf-marker="' + id + '"]::before{-webkit-text-fill-color:transparent!important}');

package/dist/kit/pdf-vectors.mjs

@@ -92,7 +92,7 @@ function geometry(node) {
   unsupported();
 }
 
-export async function collectPdfVectors(main, {width, height, count, capture, signal, current, check, maxBytes, sanitizeSvg, collectText}) {
+export async function collectPdfVectors(main, {width, height, count, capture, signal, current, check, maxBytes, sanitizeSvg, collectText, pictures = false, underlay = false}) {
   const document = main.ownerDocument, window = document.defaultView, origin = main.getBoundingClientRect();
   const pages = Array.from({length: count}, () => []), hidden = [], temporary = [], textRoots = [], textRestores = [];
   const colorCanvas = document.createElement('canvas'); colorCanvas.width = colorCanvas.height = 1;
@@ -117,20 +117,33 @@ export async function collectPdfVectors(main, {width, height, count, capture, si
   try {
     for (const original of roots) {
       check();
-      let root = original, mount = null;
+      let root = original, mount = null, turned = false, groupOpacity = 1, asImage = false, under = false;
       const originalBox = original.getBoundingClientRect();
       if (!(originalBox.width > 0 && originalBox.height > 0)) continue;
       if (original.localName === 'img') {
         if (typeof sanitizeSvg !== 'function') continue;
         const address = original.getAttribute('src') || '', match = /^data:image\/svg\+xml(?:;charset=[^;,]+)?(;base64)?,([\s\S]*)$/i.exec(address);
-        if (!match) continue;
+        if (!match && !(pictures && /^data:image\//i.test(address))) continue;
+        asImage = !match;
+      }
+      if (original.localName === 'img' && !asImage) {
+        const address = original.getAttribute('src') || '', match = /^data:image\/svg\+xml(?:;charset=[^;,]+)?(;base64)?,([\s\S]*)$/i.exec(address);
         let text;
         try {text = match[1] ? new TextDecoder('utf-8', {fatal: true}).decode(Uint8Array.from(atob(match[2]), ch => ch.charCodeAt(0))) : decodeURIComponent(match[2]);} catch (_) {continue;}
         const parsed = new window.DOMParser().parseFromString(sanitizeSvg(text), 'image/svg+xml');
         if (parsed.querySelector('parsererror') || parsed.documentElement.namespaceURI !== SVG) continue;
+        const shown = window.getComputedStyle(original);
+        under = Number(shown.zIndex) < 0;
+        if (under && !underlay) continue;
+        turned = shown.transform !== 'none'; groupOpacity = Number(shown.opacity);
+        const unturnedWidth = turned ? Number.parseFloat(shown.width) : originalBox.width, unturnedHeight = turned ? Number.parseFloat(shown.height) : originalBox.height;
+        if (!(unturnedWidth > 0 && unturnedHeight > 0)) continue;
+        const [originX, originY] = shown.transformOrigin.split(' ').map(Number.parseFloat);
+        if (turned && !(Math.abs(originX - unturnedWidth / 2) < .5 && Math.abs(originY - unturnedHeight / 2) < .5)) continue;
+        const left = originalBox.left + originalBox.width / 2 - unturnedWidth / 2, top = originalBox.top + originalBox.height / 2 - unturnedHeight / 2;
         root = document.importNode(parsed.documentElement, true);
-        root.style.setProperty('width', originalBox.width + 'px', 'important'); root.style.setProperty('height', originalBox.height + 'px', 'important');
-        mount = document.createElement('div'); mount.style.cssText = `position:fixed;left:${originalBox.left}px;top:${originalBox.top}px;width:${originalBox.width}px;height:${originalBox.height}px;pointer-events:none`;
+        root.style.setProperty('width', unturnedWidth + 'px', 'important'); root.style.setProperty('height', unturnedHeight + 'px', 'important');
+        mount = document.createElement('div'); mount.style.cssText = `position:fixed;left:${left}px;top:${top}px;width:${unturnedWidth}px;height:${unturnedHeight}px;pointer-events:none` + (turned ? `;transform:${shown.transform};transform-origin:50% 50%` : '');
         mount.attachShadow({mode: 'open'}).append(root); document.body.append(mount); temporary.push(mount); await document.fonts.ready;
         const glyphs = await collectText?.(root); if (glyphs) textRestores.push(glyphs.restore);
         textRoots.push({root, original, text: glyphs});
@@ -181,7 +194,7 @@ export async function collectPdfVectors(main, {width, height, count, capture, si
         } catch (_) { sequence.push({raster: node}); return; }
         if (!path) return;
         const matrix = node.getScreenCTM(); if (!matrix || ![matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f].every(Number.isFinite)) {sequence.push({raster: node}); return;}
-        const opacity = Number(style.opacity), fillAlpha = fill ? fill[3] * Number(style.fillOpacity) * opacity : 1, strokeAlpha = stroke ? stroke[3] * Number(style.strokeOpacity) * opacity : 1;
+        const opacity = Number(style.opacity) * groupOpacity, fillAlpha = fill ? fill[3] * Number(style.fillOpacity) * opacity : 1, strokeAlpha = stroke ? stroke[3] * Number(style.strokeOpacity) * opacity : 1;
         let commands = nums([matrix.a, matrix.b, matrix.c, matrix.d, matrix.e - origin.left, matrix.f - origin.top]) + ' cm\n';
         if (fill) commands += nums(fill.slice(0, 3)) + ' rg\n';
         if (stroke) {
@@ -193,12 +206,19 @@ export async function collectPdfVectors(main, {width, height, count, capture, si
         commands += path + (fill && stroke ? style.fillRule === 'evenodd' ? 'B*' : 'B' : fill ? style.fillRule === 'evenodd' ? 'f*' : 'f' : stroke ? 'S' : 'n') + '\n';
         sequence.push({commands, fillAlpha, strokeAlpha}); geometries++;
       };
-      await walk(root);
-      if (!geometries && !textRoots.find(entry => entry.root === root)?.text?.nodes.size) continue;
+      if (asImage) sequence.push({raster: root}); else await walk(root);
+      if ((turned || groupOpacity !== 1) && (sequence.some(piece => piece.raster) || textRoots.find(entry => entry.root === root)?.text?.nodes.size)) {
+        const entry = textRoots.find(row => row.root === root);
+        if (entry?.text) textRestores.pop()?.();
+        if (entry) textRoots.splice(textRoots.indexOf(entry), 1);
+        mount?.remove(); temporary.splice(temporary.indexOf(mount), 1);
+        continue;
+      }
+      if (!geometries && !asImage && !textRoots.find(entry => entry.root === root)?.text?.nodes.size) continue;
       const painted = [];
       for (const piece of sequence) {const held = piece.raster ? await raster(piece.raster) : piece; if (held) painted.push(held);}
       const first = Math.max(0, Math.floor((box.left - origin.left + .01) / width)), last = Math.min(count - 1, Math.floor((box.right - origin.left - .01) / width));
-      for (let page = first; page <= last; page++) pages[page].push({sequence: painted, x: -page * width, clip: {x: box.left - origin.left, y: box.top - origin.top, width: box.width, height: box.height}});
+      for (let page = first; page <= last; page++) pages[page].push({sequence: painted, x: -page * width, clip: {x: box.left - origin.left, y: box.top - origin.top, width: box.width, height: box.height}, ...(under && {under: true})});
       hidden.push({node: original, style: original.getAttribute('style')}); original.style.setProperty('visibility', 'hidden', 'important');
     }
     return {pages, textRoots, restore};

package/dist/kit/render-markdown.mjs

@@ -1243,7 +1243,7 @@ function* _rapierProjectPortableNodesSteps(semanticRoot, options) {
 			? (element.style.backgroundColor || RAPIER_PORTABLE_HIGHLIGHT_HEX[String(element.getAttribute('data-rapier-highlight') || '').toLowerCase()] || RAPIER_PORTABLE_HIGHLIGHT_HEX.yellow)
 			: null;
 
-		const isTableCaption = element.tagName === 'P' && element.classList.contains('rapier-table-caption');
+		const isTableCaption = element.tagName === 'P' && (element.classList.contains('rapier-table-caption') || element.classList.contains('rapier-figure-caption'));
 
 		const isPageBreak = element.hasAttribute('data-md-break');
 		for (const attribute of Array.from(element.attributes)) { yield;
@@ -1271,6 +1271,13 @@ function* _rapierProjectPortableNodesSteps(semanticRoot, options) {
 			if (paragraphLayout.before != null) element.style.marginTop = paragraphLayout.before + 'pt';
 			if (paragraphLayout.after != null) element.style.marginBottom = paragraphLayout.after + 'pt';
 		}
+		if (!keepLayoutData && paragraphLayout && /^(?:P|H[1-6])$/.test(element.tagName) && !element.closest('table,pre') && (paragraphLayout.first != null || paragraphLayout.indent != null)) {
+			const indents = {...(paragraphLayout.first != null && {first: paragraphLayout.first}), ...(paragraphLayout.indent != null && {indent: paragraphLayout.indent})};
+			for (const declaration of globalThis.RapierMarkdownLayout.textStyle(indents, {portable: true}).split(';').filter(Boolean)) {
+				const at = declaration.indexOf(':');
+				element.style.setProperty(declaration.slice(0, at), declaration.slice(at + 1));
+			}
+		}
 		if (!keepLayoutData && element.tagName === 'P' && !element.closest('table,pre')) {
 			if (paragraphLayout?.hyphens === 'auto') { element.style.hyphens = 'auto'; element.style.textWrap = 'pretty'; }
 			if (paragraphLayout?.hanging === 'on') element.style.setProperty('hanging-punctuation', 'first allow-end');

package/dist/kit/render-print.mjs

@@ -3,7 +3,7 @@ import {collectPdfVectors} from './pdf-vectors.mjs';
 import {collectPdfGlyphs} from './pdf-glyphs.mjs';
 import {pdfFontSources, waitForFonts} from './export-fonts.mjs';
 import {apply as applyTypography} from '../layout/typography.mjs';
-import {documentLanguage} from '../spec/document-settings.mjs';
+import {documentLanguage, pageSizeOf} from '../spec/document-settings.mjs';
 import {applyPrintCapitals} from './print-capitals.mjs';
 import {stripOneTerminator as _rapierWillStripOneTerminator} from '../agent/will.mjs';
 import {quotedWillSpan} from '../spec/md-marks.mjs';
@@ -196,14 +196,31 @@ function wrapMasks(main) {
 	}
 }
 
+const REFUSALS = {
+	visual_too_large: 'This document is too large for a PDF. Use Word or HTML, or split it.',
+	visual_resources_unavailable: 'A picture or font could not be read for the PDF.',
+	visual_capture_expired: 'The PDF took too long to draw. Try again, or split the document.',
+	pdf_render_timeout: 'The PDF took too long to draw. Try again, or split the document.',
+	pdf_render_unavailable: 'This browser could not draw the PDF.',
+	pdf_page_geometry_invalid: 'The page size is not one a PDF can use.',
+	pdf_text_glyph_limit: 'The PDF cannot hold this many different letters. Use Word or HTML.',
+	pdf_template_border_unavailable: 'The page border could not be drawn.',
+	document_changed: 'The document changed while the PDF was drawn. Try again.',
+	export_too_large: 'The file is larger than the limit. Split the document.',
+};
+
 async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = false, filename, title, settings, templatePage = null}, {capture, signal, current, maxBytes = 8 * 1024 * 1024, film, ink} = {}) {
 	const refuse = code => { throw Object.assign(new Error(code), {code}); };
+	const spoken = error => {
+		const code = error?.code || error?.message, words = REFUSALS[code];
+		return words && error.message !== words ? Object.assign(new Error(words), {code}) : error;
+	};
 	const check = () => {
 		if (signal?.aborted) refuse('cancelled');
 		if (current?.() === false) refuse('document_changed');
 	};
 	if (!root?.ownerDocument || typeof capture !== 'function') refuse('pdf_render_unavailable');
-	const paper = settings?.papersize || {width: 11906, height: 16838};
+	const paper = settings?.papersize || (templatePage ? pageSizeOf(settings) : {width: 11906, height: 16838});
 	const width = paper.width / 20, height = paper.height / 20;
 	const margins = Object.fromEntries(['top', 'right', 'bottom', 'left'].map(side =>
 		[side, settings?.geometry ? settings.geometry[side] / 20 : (side === 'top' ? 12 : 14) * 72 / 25.4]));
@@ -301,7 +318,7 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 		nativeGlyphs = await collectPdfGlyphs(main, glyphOptions);
 		const textPages = await _rapierPrintTextPages(main, bodyWidth, count, check, undefined, nativeGlyphs.nodes, nativeGlyphs.markers);
 		const linkPages = _rapierPrintLinkPages(main, bodyWidth, bodyHeight, count);
-		vectors = await collectPdfVectors(main, {width: bodyWidth, height: bodyHeight, count, capture, signal, current, check, maxBytes,
+		vectors = await collectPdfVectors(main, {width: bodyWidth, height: bodyHeight, count, capture, signal, current, check, maxBytes, underlay: true,
 			sanitizeSvg: globalThis.RapierImageAssets?.sanitizeSvgText,
             collectText: root => collectPdfGlyphs(root, {...glyphOptions, origin: main.getBoundingClientRect()})});
         for (const {root, original, text} of vectors.textRoots) {
@@ -322,6 +339,8 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 		strip.style.width = count * bodyWidth + 'px';
 		strip.style.transform = 'none';
 		if (typeof film !== 'function') refuse('pdf_render_unavailable');
+		const underlay = vectors.pages.some(items => items.some(drawing => drawing.under));
+		if (underlay) surface.style.setProperty('background', 'transparent');
 		let pendingFilm = null, abandonFilm = false;
 		const trackedFilm = Promise.resolve(film({root: surface, signal, current, frame: {width: count * bodyWidth, height: bodyHeight}})).then(session => {
 			if (abandonFilm) session?.close?.();
@@ -340,22 +359,23 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 		let share = Math.max(1, Math.min(Math.floor(CAPTURE_EDGE / bodyWidth), Math.floor(CAPTURE_PIXELS / (bodyWidth * bodyHeight))));
 		const pages = [];
 		let imageBytes = 0;
-		const pack = async rgb => {
-			const packed = new Uint8Array(await step(new Response(new Blob([rgb]).stream().pipeThrough(new CompressionStream('deflate'))).arrayBuffer()));
+		const deflate = async bytes => {
+			const packed = new Uint8Array(await step(new Response(new Blob([bytes]).stream().pipeThrough(new CompressionStream('deflate'))).arrayBuffer()));
 			imageBytes += packed.byteLength;
 			if (imageBytes > maxBytes) refuse('export_too_large');
-			pages.push({rgb: packed});
+			return packed;
 		};
+		const pack = async (rgb, alpha = null) => pages.push({rgb: await deflate(rgb), ...(alpha && {alpha: await deflate(alpha)})});
 		const tileWidth = Math.min(bodyWidth, CAPTURE_EDGE), tileHeight = Math.min(bodyHeight, CAPTURE_EDGE, Math.floor(CAPTURE_PIXELS / tileWidth));
 		for (let index = 0; tiled && index < count; index++) {
 			const tiles = [];
 			for (let y = 0; y < bodyHeight; y += tileHeight) for (let x = 0; x < bodyWidth; x += tileWidth) {
 				check();
 				const width = Math.min(tileWidth, bodyWidth - x), height = Math.min(tileHeight, bodyHeight - y);
-				const shot = await step(filmSession.raster({x: index * bodyWidth + x, y, width, height}));
-				if (shot?.width !== width || shot?.height !== height || !(shot.rgb instanceof Uint8Array)) refuse('pdf_render_unavailable');
-				await pack(shot.rgb);
-				shot.rgb = null;
+				const shot = await step(filmSession.raster({x: index * bodyWidth + x, y, width, height}, {transparent: underlay}));
+				if (shot?.width !== width || shot?.height !== height || !(shot.rgb instanceof Uint8Array) || underlay && !(shot.alpha instanceof Uint8Array)) refuse('pdf_render_unavailable');
+				await pack(shot.rgb, shot.alpha);
+				shot.rgb = shot.alpha = null;
 				tiles.push({...pages.pop(), x, y, width, height});
 			}
 			pages.push({tiles});
@@ -364,21 +384,22 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 			check();
 			const span = Math.min(share, count - first);
 			try {
-				const shot = await step(filmSession.raster({x: first * bodyWidth, y: 0, width: span * bodyWidth, height: bodyHeight}));
-				if (shot?.width !== span * bodyWidth || shot?.height !== bodyHeight || !(shot.rgb instanceof Uint8Array)) refuse('pdf_render_unavailable');
-				if (span === 1) await pack(shot.rgb);
+				const shot = await step(filmSession.raster({x: first * bodyWidth, y: 0, width: span * bodyWidth, height: bodyHeight}, {transparent: underlay}));
+				if (shot?.width !== span * bodyWidth || shot?.height !== bodyHeight || !(shot.rgb instanceof Uint8Array) || underlay && !(shot.alpha instanceof Uint8Array)) refuse('pdf_render_unavailable');
+				if (span === 1) await pack(shot.rgb, shot.alpha);
 				else {
 					const row = bodyWidth * 3;
 					for (let offset = 0; offset < span; offset++) {
-						const rgb = new Uint8Array(bodyWidth * bodyHeight * 3);
+						const rgb = new Uint8Array(bodyWidth * bodyHeight * 3), alpha = shot.alpha ? new Uint8Array(bodyWidth * bodyHeight) : null;
 						for (let y = 0; y < bodyHeight; y++) {
 							const from = (y * shot.width + offset * bodyWidth) * 3;
 							rgb.set(shot.rgb.subarray(from, from + row), y * row);
+							if (alpha) alpha.set(shot.alpha.subarray(y * shot.width + offset * bodyWidth, y * shot.width + (offset + 1) * bodyWidth), y * bodyWidth);
 						}
-						await pack(rgb);
+						await pack(rgb, alpha);
 					}
 				}
-				shot.rgb = null;
+				shot.rgb = shot.alpha = null;
 			} catch (error) {
 				if (error?.code === 'visual_too_large' && span > 1) { share = Math.ceil(span / 2); continue; }
 				throw error;
@@ -394,14 +415,15 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 			holder.append(picture); into.body.append(holder);
 			await step(picture.decode());
 			backdrop = await collectPdfVectors(holder, {width: sheetWidth, height: sheetHeight, count: 1, capture, signal, current, check, maxBytes,
-				sanitizeSvg: globalThis.RapierImageAssets?.sanitizeSvgText});
+				sanitizeSvg: globalThis.RapierImageAssets?.sanitizeSvgText, pictures: true});
 			if (!backdrop.pages[0].length) refuse('pdf_template_border_unavailable');
 		}
 		const bytes = await writeRasterPdf({pages, textPages, linkPages, vectorPages: vectors.pages, canonical, bom, filename, title, font, width, height, margins, backdrop: backdrop?.pages[0] || null,
 			pixelWidth: bodyWidth, pixelHeight: bodyHeight, pageNumbers: settings?.pagestyle === 'plain', maxBytes, check});
 		check();
 		return {bytes, pages: count, painted: nativeGlyphs.painted};
-	} finally { filmSession?.close(); backdrop?.restore(); vectors?.restore(); nativeGlyphs?.restore(); signal?.removeEventListener('abort', abort); frame.remove(); }
+	} catch (error) { throw spoken(error); }
+	finally { filmSession?.close(); backdrop?.restore(); vectors?.restore(); nativeGlyphs?.restore(); signal?.removeEventListener('abort', abort); frame.remove(); }
 }
 
 async function _rapierPrintTextPages(main, pageWidth, count, check, origin = main.getBoundingClientRect(), nativeNodes = null, markerNodes = null) {
@@ -471,14 +493,14 @@ async function _rapierPrintTextPages(main, pageWidth, count, check, origin = mai
                 parts = joined;
             }
 			const last = pages[page].at(-1);
-			if (last && !formula && !last.math && last.block === block && last.carrier === carrier && (last.marker || Math.abs(last.y - y) < Math.max(2, Math.min(last.height, bottom - y) * .2))) {
+			if (last && !formula && !last.math && !last.marker && last.block === block && last.carrier === carrier && Math.abs(last.y - y) < Math.max(2, Math.min(last.height, bottom - y) * .2)) {
 				if (!preserve && last.text.endsWith(' ') && text.startsWith(' ') && parts.length) {
 					const first = parts[0];
 					if (first.text === ' ') parts.shift();
 					else {const advance = first.width / Array.from(first.text).length; first.text = first.text.slice(1); first.x += advance; first.width -= advance;}
 				}
 				last.text = preserve ? last.text + text : (last.text + text).replace(/[ \t\r\n\f]+/g, ' ');
-				last.parts.push(...parts); last.marker = false;
+				last.parts.push(...parts);
 				last.width = Math.max(last.x + last.width, right) - Math.min(last.x, x);
 				last.height = Math.max(last.y + last.height, bottom) - Math.min(last.y, y);
 				last.x = Math.min(last.x, x); last.y = Math.min(last.y, y);
@@ -512,13 +534,29 @@ async function _rapierPrintTextPages(main, pageWidth, count, check, origin = mai
 	}
 	const ROLES = {TABLE: 'Table', TR: 'TR', TD: 'TD', TH: 'TH', UL: 'L', OL: 'L', LI: 'LI', BLOCKQUOTE: 'BlockQuote', P: 'P', PRE: 'Code', FIGCAPTION: 'Caption',
 		H1: 'H1', H2: 'H2', H3: 'H3', H4: 'H4', H5: 'H5', H6: 'H6'};
-	const tags = block => {
+	const bodies = new WeakMap(), labels = new WeakMap();
+	const tags = (block, marker) => {
 		const chain = [];
 		for (let node = block; node && node !== main; node = node.parentElement)
 			if (ROLES[node.tagName] || node === block && node.matches('.rapier-will-carrier')) chain.unshift({node, role: ROLES[node.tagName] || 'P'});
-		return chain;
+		const out = [];
+		chain.forEach((entry, at) => {
+			const note = entry.node.localName === 'li' && entry.node.classList.contains('footnote-item');
+			out.push(note ? {...entry, role: 'Note'} : entry);
+			if (entry.node.localName !== 'li') return;
+			const last = !chain.slice(at + 1).some(inner => inner.node.localName === 'li');
+			if (marker && last) {
+				if (!labels.has(entry.node)) labels.set(entry.node, {});
+				out.push({node: labels.get(entry.node), role: 'Lbl'});
+			}
+			else if (!note) {
+				if (!bodies.has(entry.node)) bodies.set(entry.node, {});
+				out.push({node: bodies.get(entry.node), role: 'LBody'});
+			}
+		});
+		return out;
 	};
-	return pages.map(page => page.map(({block, ...run}) => ({...run, tags: tags(block)})));
+	return pages.map(page => page.map(({block, ...run}) => ({...run, tags: tags(block, run.marker)})));
 }
 
 function _rapierPrintLinkPages(main, width, height, count) {
@@ -595,7 +633,7 @@ async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [
 	const hex = value => Array.from({length: value.length}, (_, index) => value.charCodeAt(index).toString(16).padStart(4, '0')).join('');
 	const literal = value => '(' + String(value).replace(/[\\()\r\n]/g, character => ({'\\': '\\\\', '(': '\\(', ')': '\\)', '\r': '\\r', '\n': '\\n'}[character])) + ')';
 	const source = encoder.encode((bom ? '\uFEFF' : '') + canonical);
-	const embedded = stream('/Type /EmbeddedFile /Subtype /text#2Fplain /Params <</Size ' + source.length + '>> /Filter /FlateDecode', await compressed(source));
+	const embedded = stream('/Type /EmbeddedFile /Subtype /text#2Fmarkdown /Params <</Size ' + source.length + '>> /Filter /FlateDecode', await compressed(source));
 	const file = add('<< /Type /Filespec /F ' + literal(String(filename).replace(/[^\x20-\x7e]/g, '_')) + ' /UF <feff' + hex(filename) + '> /AFRelationship /Source /EF << /F ' + embedded + ' 0 R /UF ' + embedded + ' 0 R >> >>');
 	for (const page of textPages) for (const run of page) {
 		let previous = null;
@@ -741,7 +779,9 @@ async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [
 		const held = pages[index], flate = !!held?.rgb;
 		const tiles = held?.tiles || [{...(flate ? held : {jpeg: held}), x: 0, y: 0, width: pixelWidth, height: pixelHeight}];
 		const pictures = tiles.map((tile, at) => '/Im0_' + at + ' ' + stream('/Type /XObject /Subtype /Image /Width ' + tile.width + ' /Height ' + tile.height +
-			' /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /' + (tile.rgb ? 'FlateDecode' : 'DCTDecode'), tile.rgb || tile.jpeg) + ' 0 R'), states = [];
+			' /ColorSpace /DeviceRGB /BitsPerComponent 8' + (tile.alpha ? ' /SMask ' + stream('/Type /XObject /Subtype /Image /Width ' + tile.width + ' /Height ' + tile.height +
+				' /ColorSpace /DeviceGray /BitsPerComponent 8 /Filter /FlateDecode', tile.alpha) + ' 0 R' : '') +
+			' /Filter /' + (tile.rgb ? 'FlateDecode' : 'DCTDecode'), tile.rgb || tile.jpeg) + ' 0 R'), states = [];
 		pages[index] = null;
 		const emit = (drawing, left, top, clipWidth, clipHeight) => {
 			let out = `q\n.75 0 0 -.75 ${decimal(left)} ${decimal(top)} cm\n0 0 ${clipWidth} ${clipHeight} re W n\n1 0 0 1 ${decimal(drawing.x)} 0 cm\n`;
@@ -770,9 +810,10 @@ async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [
 		};
 		let commands = '';
 		for (const drawing of backdrop || []) commands += emit(drawing, 0, height, Math.round(width * 4 / 3), Math.round(height * 4 / 3));
+		for (const drawing of vectorPages[index] || []) if (drawing.under) commands += emit(drawing, margins.left, height - margins.top, pixelWidth, pixelHeight);
 		commands += '/Artifact BMC\n' + tiles.map((tile, at) => 'q\n' + [decimal(tile.width * .75), 0, 0, decimal(tile.height * .75), decimal(margins.left + tile.x * .75),
 			decimal(height - margins.top - (tile.y + tile.height) * .75)].join(' ') + ' cm\n/Im0_' + at + ' Do\nQ\n').join('') + 'EMC\n';
-		for (const drawing of vectorPages[index] || []) commands += emit(drawing, margins.left, height - margins.top, pixelWidth, pixelHeight);
+		for (const drawing of vectorPages[index] || []) if (!drawing.under) commands += emit(drawing, margins.left, height - margins.top, pixelWidth, pixelHeight);
 		const textAlphas = new Map();
 		for (const run of textPages[index]) {
 			if (!run.text && !run.parts?.some(part => part.font)) continue;

package/dist/kit/render.mjs

@@ -4,7 +4,7 @@ import {finish, finishAsync, cloneTree, cleanTree, serializeTree, encodeUtf8Step
 import {fontFamilyCss} from '../spec/md-marks.mjs';
 import {readFontAssets, documentFontsCss} from '../spec/document-fonts.mjs';
 import {fontRequests, requireDocumentFonts} from './export-fonts.mjs';
-import {documentLanguage, documentSettingsFonts} from '../spec/document-settings.mjs';
+import {documentLanguage, documentSettingsFonts, pageSizeOf} from '../spec/document-settings.mjs';
 import {createLineMeasurer, linesHeight} from '../layout/model.mjs';
 import {markPrintCapitals, createPrintCapitals, followingPrintProse} from './print-capitals.mjs';
 import {freezePublishedInk} from './render-ink.mjs';
@@ -205,23 +205,26 @@ async function _rapierBuildArtifact(options, providedContext) {
 }
 
 function _rapierTemplatePage(canonical, settings, root, darkPaper = false) {
-	if (!isTemplatePage(canonical) || !settings?.papersize) return null;
+	if (!isTemplatePage(canonical)) return null;
+	const paper = pageSizeOf(settings);
 	let url = '';
 	for (const paragraph of root.querySelectorAll(':scope > p[data-md-layout]')) {
 		const image = paragraph.querySelector('img');
 		const layout = globalThis.RapierMarkdownLayout.parseLayoutAttribute(paragraph.getAttribute('data-md-layout'));
 		const source = image?.getAttribute('src') || '';
-		if (isPageBorderLayout(layout) && /^data:image\/svg\+xml;base64,[A-Za-z0-9+/=]+$/.test(source)) { url = source; paragraph.remove(); break; }
+		if (isPageBorderLayout(layout) && /^data:image\/(?:png|jpeg|webp|gif|svg\+xml|jxl);base64,[A-Za-z0-9+/=]+$/i.test(source)) { url = source; paragraph.remove(); break; }
 	}
 	if (!url) return null;
-	const width = settings.papersize.width / 15, height = settings.papersize.height / 15;
-	const margins = ['top', 'right', 'bottom', 'left'].map(side => (settings.geometry?.[side] ?? 1440) / 15);
+	const width = paper.width / 15, height = paper.height / 15;
+	const margins = ['top', 'right', 'bottom', 'left'].map(side => (settings?.geometry?.[side] ?? 1440) / 15);
 	const padding = margins.map(value => value + 'px').join(' ');
 	const ground = 'background:var(--rapier-template-border) 0 0/100% 100% no-repeat';
-	const shown = darkPaper ? _rapierDarkPaperSvgUrl(url, '#fafafa') : url;
+	const shown = darkPaper && url.startsWith('data:image/svg+xml;base64,') ? _rapierDarkPaperSvgUrl(url, '#fafafa') : url;
 	const css = ':root{--rapier-template-border:url("' + url + '")}\n'
 		+ '@media screen{' + (shown !== url ? ':root{--rapier-template-border:url("' + shown + '")}' : '') + '.rapier-template-border{display:none}body{background:var(--md-color-inset)}.rapier-page{box-sizing:border-box;width:min(100%,' + width + 'px);min-height:' + height + 'px;margin:0 auto;padding:' + padding
 		+ ';background:var(--rapier-template-border) 0 0/100% ' + height + 'px repeat-y,var(--md-color-bg);color:var(--md-color-text)}}\n'
+		+ '@media screen and (max-width:' + width + 'px){.rapier-page{min-height:auto;aspect-ratio:' + width + '/' + height + ';padding:'
+		+ margins.map(value => 'min(' + value + 'px,' + Number((value / width * 100).toFixed(4)) + '%)').join(' ') + ';background-size:100% auto,auto}}\n'
 		+ '@media print{@page{size:' + width + 'px ' + height + 'px;margin:0}html,body{margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}'
 		+ '.rapier-page{box-sizing:border-box;width:auto;max-width:none;margin:0;padding:' + padding + '!important;position:relative!important;z-index:1;box-decoration-break:clone;-webkit-box-decoration-break:clone}'
 		+ '.rapier-template-border{display:block;position:fixed;left:0;top:0;width:' + width + 'px;height:' + height + 'px;z-index:0;' + ground + '}}';
@@ -256,11 +259,7 @@ async function _rapierBuildPublishedPage(context) {
 		throw new TypeError('Publishing requires a captured document.');
 	const current = {...context, ledger: null, carried: 'none', comparisonBase: null};
 	return _rapierBuildArtifact({
-		kind: 'standalone', scripts: false, extraCss: _rapierSharedPageFallbackCss(),
-		async afterRoot(root) {
-			if (current.work) await finishAsync(_rapierSharedPageLayoutSteps(root), current.work);
-			else _rapierSharedPageLayout(root);
-		},
+		kind: 'standalone', scripts: false,
 		afterFonts: (root, style) => freezePublishedInk(root, {...style, document, work: current.work,
 			spec: globalThis.RapierMarkdownSpec, ink: globalThis.RapierInk, draw: globalThis.RapierInkDraw}),
 	}, current);
@@ -729,6 +728,14 @@ function* _rapierSharedPageLayoutSteps(root) {
 		}
 		image.style.margin = '0';
 		const naturalWidth = Number(image.getAttribute('width')) || 0, naturalHeight = Number(image.getAttribute('height')) || 0;
+		let turned = '';
+		const turnedCorners = (bounds, width, height, rad) => {
+			const cos = Math.cos(rad), sin = Math.sin(rad), round = value => Math.round(value * 100) / 100 + '%';
+			return [[-1, -1], [1, -1], [1, 1], [-1, 1]].map(([x, y]) => {
+				const dx = x * width / 2, dy = y * height / 2;
+				return round(50 + (dx * cos - dy * sin) / bounds.width * 100) + ' ' + round(50 + (dx * sin + dy * cos) / bounds.height * 100);
+			}).join(', ');
+		};
 		if (layout.rotate && naturalWidth > 0 && naturalHeight > 0) {
 			const rad = layout.rotate * Math.PI / 180, aspect = naturalHeight / naturalWidth;
 			image.style.maxWidth = 'none';
@@ -741,6 +748,7 @@ function* _rapierSharedPageLayoutSteps(root) {
 					height *= scale;
 					bounds = globalThis.RapierImageLayout.rotatedBoundsRad(width, height, rad);
 				}
+				turned = turnedCorners(bounds, width, height, rad);
 				paragraph.style.width = bounds.width + '%';
 				paragraph.style.paddingTop = ((bounds.height - height) / 2) + '%';
 				paragraph.style.paddingBottom = ((bounds.height - height) / 2) + '%';
@@ -748,6 +756,7 @@ function* _rapierSharedPageLayoutSteps(root) {
 				image.style.marginLeft = image.style.marginRight = (((bounds.width - width) / 2) / bounds.width * 100) + '%';
 			} else {
 				const bounds = globalThis.RapierImageLayout.rotatedBoundsRad(naturalWidth, naturalHeight, rad);
+				turned = turnedCorners(bounds, naturalWidth, naturalHeight, rad);
 				paragraph.style.width = bounds.width + 'px';
 				paragraph.style.paddingTop = ((bounds.height - naturalHeight) / 2) + 'px';
 				paragraph.style.paddingBottom = ((bounds.height - naturalHeight) / 2) + 'px';
@@ -763,6 +772,7 @@ function* _rapierSharedPageLayoutSteps(root) {
 			if (layout.width != null || image.getAttribute('width')) image.style.width = '100%';
 		}
 		if (layout.rotate) { image.style.transform = 'rotate(' + layout.rotate + 'deg)'; image.style.transformOrigin = '50% 50%'; }
+		if (turned) paragraph.style.setProperty('shape-outside', 'polygon(' + turned + ') padding-box');
 		if (layout.wrap === 'around' && !layout.rotate && !layout.y && layout.width == null && !image.dataset.rapierContour?.endsWith('-box')) {
 			const src = image.getAttribute('src');
 			if (src) {
@@ -779,15 +789,16 @@ function* _rapierSharedPageLayoutSteps(root) {
 		const layout = globalThis.RapierMarkdownLayout.parseLayoutAttribute(image.getAttribute('data-rapier-image-layout'));
 		if (layout?.wrap !== 'behind' && layout?.wrap !== 'front') continue;
 		const paragraph = _rapierSharePictureParagraph(image);
-		if (paragraph) positionedAssignments.push({image, paragraph, layout});
+		if (paragraph) positionedAssignments.push({image, paragraph, layout, owner: globalThis.RapierMarkdownLayout.wrapNeighbour(paragraph, _rapierShareWrapKind)});
 	}
-	for (const {image, paragraph, layout} of positionedAssignments) {
+	for (const {image, paragraph, layout, owner} of positionedAssignments) {
 		yield;
 		paragraph.style.cssText = 'position:relative;height:0;margin:0;padding:0;line-height:0';
 		const x = layout.x, naturalWidth = Number(image.getAttribute('width')) || 0;
-		if (layout.width != null) image.style.width = layout.width + '%';
+		if (layout.lines != null) { image.style.width = 'auto'; image.style.height = globalThis.RapierMarkdownLayout.linesHeightCss(layout.lines); }
+		else if (layout.width != null) image.style.width = layout.width + '%';
 		else if (naturalWidth > 0) image.style.width = naturalWidth + 'px';
-		image.style.left = x == null ? '0' : layout.width != null ? (x - layout.width / 2) + '%'
+		image.style.left = x == null ? '0' : layout.width != null ? Math.max(0, Math.min(100 - layout.width, x - layout.width / 2)) + '%'
 			: naturalWidth > 0 ? 'calc(' + x + '% - ' + (naturalWidth / 2) + 'px)' : x + '%';
 		image.style.position = 'absolute';
 		image.style.top = (layout.y || 0) + 'em';
@@ -795,6 +806,7 @@ function* _rapierSharedPageLayoutSteps(root) {
 		if (layout.rotate) { image.style.transform = 'rotate(' + layout.rotate + 'deg)'; image.style.transformOrigin = '50% 50%'; }
 		if (layout.wrap === 'behind') image.style.zIndex = '-1';
 		paragraph.classList.add('rapier-positioned-picture');
+		if (owner && owner !== paragraph.nextElementSibling) owner.before(paragraph);
 	}
 	const positioned = new Set([...assignments, ...positionedAssignments].map(row => row.image));
 	for (const image of root.querySelectorAll('img[data-rapier-image-layout]')) {
@@ -807,11 +819,13 @@ function* _rapierSharedPageLayoutSteps(root) {
 		const naturalWidth = Number(image.getAttribute('width')) || 0, naturalHeight = Number(image.getAttribute('height')) || 0;
 		if (naturalWidth > 0 && naturalHeight > 0) {
 			const rad = layout.rotate * Math.PI / 180;
-			const boundWidth = naturalWidth * Math.abs(Math.cos(rad)) + naturalHeight * Math.abs(Math.sin(rad));
-			const boundHeight = naturalWidth * Math.abs(Math.sin(rad)) + naturalHeight * Math.abs(Math.cos(rad));
+			const width = layout.width != null && !layout.lines ? layout.width : naturalWidth, height = layout.width != null && !layout.lines ? layout.width * naturalHeight / naturalWidth : naturalHeight;
+			const unit = layout.width != null && !layout.lines ? '%' : 'px';
+			const boundWidth = width * Math.abs(Math.cos(rad)) + height * Math.abs(Math.sin(rad));
+			const boundHeight = width * Math.abs(Math.sin(rad)) + height * Math.abs(Math.cos(rad));
 			image.style.display = 'block';
-			image.style.marginLeft = image.style.marginRight = ((boundWidth - naturalWidth) / 2) + 'px';
-			image.style.marginTop = image.style.marginBottom = ((boundHeight - naturalHeight) / 2) + 'px';
+			image.style.marginLeft = image.style.marginRight = ((boundWidth - width) / 2) + unit;
+			image.style.marginTop = image.style.marginBottom = ((boundHeight - height) / 2) + unit;
 		}
 	}
 }
@@ -1349,6 +1363,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
       balance: 0};
   }
 
+  let inkIds = 0;
   function fragmentNode(record, fragment, idsKept) {
     const run = record.runs[fragment.itemIndex], mapped = geometry.mapFragment(run, fragment, {whiteSpace: record.whiteSpace});
     if (!mapped) return null;
@@ -1374,6 +1389,8 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
     if (!plan) return false;
     const output = doc.createDocumentFragment();
     const idsKept = new Set();
+    for (const run of record.runs) for (const parent of run.parents)
+      if (parent.matches?.('span.rapier-ink-mark[data-rapier-ink]') && !parent.hasAttribute('data-rapier-ink-id')) parent.setAttribute('data-rapier-ink-id', String(++inkIds));
     let previous = null;
     for (const line of plan.lines) {
       const element = doc.createElement('span');

package/dist/layout/hyphenation.mjs

@@ -1,11 +1,23 @@
 // SPDX-License-Identifier: MIT
 import {next, weight, exceptions, maximum} from '../agent/vendor/hyphen-en-us/patterns.js';
 
-function englishCuts(word) {
-  if (!/^[A-Z]?[a-z]+$/.test(word)) return null;
+export function englishCuts(word) {
+  if (!/^[A-Za-z]+$/.test(word)) return null;
+  if (word.length < 6) return [];
+  const cuts = [];
+  let offset = 0, before = 0;
+  for (const part of word.match(/[A-Z]+(?![a-z])|[A-Z]?[a-z]+/g)) {
+    if (before >= 3 && part.length >= 3) cuts.push(offset);
+    for (const at of partCuts(part)) cuts.push(offset+at);
+    offset += part.length; before = part.length;
+  }
+  return cuts.filter(at => at >= 3 && at <= word.length-3).sort((a, b) => a-b).filter((at, index, all) => at !== all[index-1]);
+}
+
+function partCuts(word) {
   if (word.length < 6) return [];
   const lower = word.toLowerCase(), known = exceptions[lower];
-  if (Array.isArray(known)) return known.filter(at => at >= 3 && at <= word.length-3);
+  if (Array.isArray(known)) return known;
   const source = '.'+lower+'.', weights = new Uint8Array(source.length+1);
   for (let start = 0; start < source.length; start++) {
     let node = 0;

package/dist/layout/model.mjs

@@ -12,7 +12,8 @@ export function mapFragment(run, fragment, {whiteSpace = 'normal'} = {}) {
   const raw = typeof run === 'string' ? run : run?.raw;
   if (run?.break === 'never') whiteSpace = 'normal';
   const start = fragment?.sourceStart, end = fragment?.sourceEnd;
-  if (typeof raw !== 'string' || typeof fragment?.text !== 'string' ||
+  const derived = fragment?.derive === true;
+  if (typeof raw !== 'string' || !derived && typeof fragment?.text !== 'string' ||
       !Number.isInteger(start) || !Number.isInteger(end) || start < 0 || end < start || end > raw.length ||
       whiteSpace !== 'normal' && whiteSpace !== 'pre-wrap') return null;
   const pieces = [], offsets = [start];
@@ -33,6 +34,13 @@ export function mapFragment(run, fragment, {whiteSpace = 'normal'} = {}) {
     }
   }
   let text = pieces.join('');
+  if (derived) {
+    if (fragment.glyph) {
+      if (lastSoftHyphen === end - 1) offsets[offsets.length - 1] = lastSoftHyphen;
+      offsets.push(end); text += fragment.glyph;
+    }
+    return {text, offsets, start, end};
+  }
   if (lastSoftHyphen === end - 1 && fragment.text === text + '-') {
     offsets[offsets.length - 1] = lastSoftHyphen;
     offsets.push(end); text += '-';

package/dist/layout/paragraph-fit.mjs

@@ -22,7 +22,7 @@ export function createParagraphFitter() {
     return handle;
   }
 
-  function* solveSteps(handle, width, {indent = 0, left = 0, right = 0, widths = null} = {}, known) {
+  function* solveSteps(handle, width, {indent = 0, left = 0, right = 0, widths = null, shrink = .4, stretch = .8} = {}, known) {
     const prepared = indexes.get(handle);
     if (!prepared || ![width, indent, left, right].every(Number.isFinite) || width <= 0) return null;
     const measures = Array.isArray(widths) && widths.every(value => Number.isFinite(value) && value > 0) ? widths : [];
@@ -44,7 +44,7 @@ export function createParagraphFitter() {
       const closing = Math.min(Math.max(0, right), words.at(-1).closing);
       const target = measure(base) - (segmentIndex === 0 ? indent : 0) + opening + closing;
       const count = words.length - 1;
-      const delta = !count ? 0 : Math.max(-smallest * .4, Math.min(0, (target - natural) / count));
+      const delta = !count ? 0 : Math.max(-smallest * shrink, Math.min(0, (target - natural) / count));
       const overflow = natural + delta * count - target;
       const cost = 1 + 100 * Math.max(0, overflow / target) ** 2;
       if (Number.isFinite(natural) && target > 0 && cost < 2 && minimum[words.length - 1] - minimum[Math.min(words.length - 1, 1)] <= ceiling + .02 &&
@@ -111,7 +111,7 @@ export function createParagraphFitter() {
             const target = measure(base + lineClass) - (segmentIndex === 0 && startIndex === 0 ? indent : 0) + opening + closing;
             if (target <= 0) continue;
             const remaining = target - natural;
-            const delta = !count ? 0 : Math.max(-smallest * .4, Math.min(final ? 0 : smallest * .8, remaining / count));
+            const delta = !count ? 0 : Math.max(-smallest * shrink, Math.min(final ? 0 : smallest * stretch, remaining / count));
             const overflow = natural + delta * count - target;
             if (overflow > .02 && (count || start.cut || end.cut || words[lastWord].breaks.length)) continue;
             const residual = Math.max(0, remaining - delta * count);

package/dist/layout/typography.mjs

@@ -308,10 +308,27 @@ export function createTypography() {
     return {key: keys.join('\u0000'), generation:keys[0], styles, parents, supported};
   }
 
+  function smallCapsAsPlanned(paragraph, text, inspection) {
+    if (paragraph.getAttribute('data-md-caps') !== 'small') return true;
+    const doc = paragraph.ownerDocument, style = inspection.styles.get(paragraph);
+    if (!style || !doc.body) return false;
+    const probe = caps => {
+      const span = doc.createElement('span');
+      span.style.cssText = 'position:absolute;visibility:hidden;white-space:pre;left:0;top:0;font-synthesis-small-caps:none;font-variant-caps:' + caps;
+      for (const name of ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'fontStretch', 'letterSpacing', 'fontKerning', 'fontFeatureSettings'])
+        span.style[name] = style[name];
+      span.textContent = text.trim().slice(0, 80);
+      doc.body.append(span);
+      const width = span.getBoundingClientRect().width;
+      span.remove();
+      return width;
+    };
+    return Math.abs(probe('small-caps') - probe('normal')) < .01;
+  }
+
   function snapshot(paragraph, inspection) {
     const text = paragraph.textContent, language = paragraph.closest('[lang]')?.getAttribute('lang') ?? '';
-    if (!inspection.supported || !text.trim() || paragraph.hasAttribute('data-md-lines') ||
-        paragraph.getAttribute('data-md-caps') === 'small' || paragraph.closest('[data-rapier-published-ink]') ||
+    if (!inspection.supported || !text.trim() || !smallCapsAsPlanned(paragraph, text, inspection) || paragraph.closest('[data-rapier-published-ink]') ||
         /[^\p{Script=Latin}\p{Script=Greek}\p{Script=Cyrillic}\p{Script=Common}\p{Script=Inherited}]/u.test(text) ||
         /[\u061c\u200e\u200f\u2028-\u202e\u2066-\u2069]/u.test(text)) return null;
     const hard = [], items = runs(paragraph, hard), atoms = [];
@@ -425,6 +442,24 @@ export function createTypography() {
       shape.box.height, shape.points.join(' ')].join(':')).join('|')};
   }
 
+  function dropMeasure(paragraph, view, width) {
+    if (!paragraph.hasAttribute('data-md-lines')) return null;
+    const letter = view.getComputedStyle(paragraph, '::first-letter');
+    const lines = Math.ceil(parseFloat(letter.initialLetter)), initial = initialRange(paragraph);
+    const advance = ['width', 'marginLeft', 'marginRight', 'paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth']
+      .reduce((sum, name) => sum + (parseFloat(letter[name]) || 0), 0);
+    const at = initial && point(runs(paragraph), initial.start);
+    if (!letter.initialLetter) return {refuse: true};
+    if (!(lines > 1)) return null;
+    if (!(advance > 0 && advance < width) || !at?.node.parentElement) return {refuse: true};
+    const style = view.getComputedStyle(at.node.parentElement), context = paragraph.ownerDocument.createElement('canvas').getContext('2d');
+    context.font = style.fontStyle + ' ' + style.fontWeight + ' ' + style.fontSize + ' ' + style.fontFamily;
+    context.letterSpacing = style.letterSpacing;
+    const text = paragraph.textContent, word = text.slice(initial.start, initial.start + (/\s/u.exec(text.slice(initial.start))?.index ?? text.length));
+    const lead = context.measureText(word).width - context.measureText(word.slice(initial.text.length)).width;
+    return {lines, advance, lead};
+  }
+
   const topology = plan => plan && plan.lines.map(line => [line.start,line.end,line.next,line.kind,line.glyph].join(':')).join('|');
   function updateProjection(projection, plan) {
     for (const {node,property,line,sign} of projection.bindings) {
@@ -517,13 +552,6 @@ export function createTypography() {
     return Math.abs(inner - job.plan.lines.length * job.beside.lineHeight) < 1;
   }
 
-  function editKey(paragraph, generation) {
-    const page = paragraph.ownerDocument.documentElement;
-    return [generation, paragraph.innerHTML, ...[...paragraph.attributes].map(item => item.name + '=' + item.value),
-      ...[...page.attributes].map(item => item.name + '=' + item.value), paragraph.ownerDocument.body?.className,
-      paragraph.ownerDocument.defaultView.innerWidth].join('\u0000');
-  }
-
   function apply(root, {all=false, editing=false}={}) {
     const started = performance.now();
     const generation = captureFontAuthority(root?.ownerDocument || globalThis.document);
@@ -533,31 +561,40 @@ export function createTypography() {
     }
     const jobs=[];let pending=false,changed=0,released=0,preparedCount=0;
     for (const paragraph of paragraphs(root)) {
+      if (paragraph.dataset.rapierFlow==='true') continue;
       if (paragraph.closest('table,pre,code,h1,h2,h3,h4,h5,h6')) {clear(paragraph);continue;}
       if (paragraph.closest('.block-edit')) {
         if (!editing) continue;
-        if (paragraph.getAttribute('data-md-align')!=='justify' || paragraph.getAttribute('data-md-hyphens')!=='auto') {
-          if (paragraph.hasAttribute(mark)) clear(paragraph);
-          protectInitial(paragraph);continue;
-        }
+        if (paragraph.hasAttribute(mark)) clear(paragraph);
+        protectInitial(paragraph);
+        continue;
       }
       else if (paragraph.isContentEditable && !paragraph.closest('.block-read')) {clear(paragraph);continue;}
       if (!paragraph.isConnected || !all && paragraph.checkVisibility && !paragraph.checkVisibility({contentVisibilityAuto:true})) continue;
       const view=paragraph.ownerDocument.defaultView;
       if (!view || !paragraph.getClientRects().length) continue;
-      if (editing && states.get(paragraph)?.editKey===editKey(paragraph,generation)) continue;
       const style=view.getComputedStyle(paragraph),box=paragraph.getBoundingClientRect(),prior=states.get(paragraph);
       if (!all && (box.bottom < -100 || box.top > view.innerHeight+100)) continue;
       const hanging=paragraph.getAttribute('data-md-hanging')==='on',size=dimensions(paragraph,style,box,hanging);
       if (!(size.width>0)) continue;
+      if (paragraph.getAttribute('data-md-align')!=='justify') {size.shrink=0;size.stretch=0;}
       const beside=floatMeasures(paragraph,style,box,size.width);
       if (beside?.refuse) {clear(paragraph);continue;}
       if (beside?.widths.some(width=>!(width>0))) {clear(paragraph);continue;}
       if (beside) size.widths=beside.widths;
+      const drop=dropMeasure(paragraph,view,size.width);
+      if (drop?.refuse) {clear(paragraph);continue;}
+      if (drop) {
+        const widths=[...(size.widths||[])];
+        while (widths.length<drop.lines) widths.push(size.width);
+        for (let line=0;line<drop.lines;line++) widths[line]=Math.floor((widths[line]-drop.advance+(line?0:drop.lead))*64)/64;
+        if (widths.some(value=>!(value>0))) {clear(paragraph);continue;}
+        size.widths=widths;
+      }
       const parents=prior?.parents || own(paragraph);
       const inspection=inspect(paragraph,parents,prior,style);
       const reusable=prior?.html===paragraph.innerHTML && prior.key===inspection.key && (!prior.geometry || scope(paragraph.ownerDocument).current(prior.geometry));
-      const sizeKey=[size.width,size.indent,size.left,size.right,beside?.key||''].join('|');
+      const sizeKey=[size.width,size.indent,size.left,size.right,beside?.key||'',drop?drop.lines+'/'+drop.advance+'/'+drop.lead:''].join('|');
       if (refused.get(paragraph)===sizeKey+'\u0000'+paragraph.textContent) {if (paragraph.hasAttribute(mark)) clear(paragraph);continue;}
       if (reusable && !prior.pending && prior.sizeKey===sizeKey) continue;
       const fitWork=reusable && prior.sizeKey===sizeKey?prior.fitWork:null;
@@ -565,12 +602,12 @@ export function createTypography() {
       if (!all && jobs.length===4) {if (!reusable) clear(paragraph);pending=true;continue;}
       jobs.push({paragraph,view,style,inspection,size,sizeKey,hanging,beside,selected:selectionBefore(paragraph),
         cap:paragraph.hasAttribute('data-md-lines'),justified:paragraph.getAttribute('data-md-align')==='justify' && paragraph.getAttribute('data-md-hyphens')==='auto',
+        ragged:paragraph.getAttribute('data-md-align')!=='justify' && paragraph.getAttribute('data-md-hyphens')==='auto' && /^(start|left)$/.test(style.textAlign),
         saved:reusable?prior.saved:null,geometry:reusable?prior.geometry:null,prepared:reusable?prior.prepared:null,
         work:reusable?prior.work:null,fitWork,
         prior,reusable,needsClear:paragraph.hasAttribute(mark)});
     }
-    if (editing && jobs.some(job=>job.selected && !job.reusable)) root.ownerDocument.getSelection()?.removeAllRanges();
-    for (const job of jobs) if (job.needsClear && !job.saved) clear(job.paragraph,{keepSelection:!editing});
+    for (const job of jobs) if (job.needsClear && !job.saved) clear(job.paragraph);
     function stateFor(job) {
       return {properties:new Map(),moves:[],saved:job.saved,geometry:job.geometry,prepared:job.prepared,plan:job.plan,
         work:job.work,fitWork:job.fitWork,parents:job.inspection.parents,key:job.inspection.key,generation:job.inspection.generation,sizeKey:job.sizeKey};
@@ -584,12 +621,8 @@ export function createTypography() {
     for (let jobIndex = 0; jobIndex < jobs.length; jobIndex++) {
       if (!all && jobIndex && performance.now() - started >= 8) {pending=true;break;}
       const job = jobs[jobIndex];
-      if (!job.saved && job.justified) {
-        if (job.needsClear) {
-          const elements=own(job.paragraph),parents=job.inspection.parents;
-          if (!editing || !job.prior?.saved || elements.length!==parents.length || elements.some((element,index)=>element!==parents[index]))
-            job.inspection=inspect(job.paragraph,elements,null,job.view.getComputedStyle(job.paragraph));
-        }
+      if (!job.saved && (job.justified || job.ragged)) {
+        if (job.needsClear) job.inspection=inspect(job.paragraph,own(job.paragraph),null,job.view.getComputedStyle(job.paragraph));
         job.saved=snapshot(job.paragraph,job.inspection);
         if (job.saved) {
           job.work=scope(job.paragraph.ownerDocument).prepareSteps(job.paragraph,job.saved.inline,{policy:'paragraph',language:job.saved.language,
@@ -611,15 +644,15 @@ export function createTypography() {
       if (job.fitWork) {
         for (;;) {
           const step=job.fitWork.next();
-          if (step.done) {job.plan=step.value;job.fitWork=null;break;}
+          if (step.done) {job.plan=job.ragged && step.value ? Object.freeze({...step.value,lines:Object.freeze(step.value.lines.map(line=>Object.freeze({...line,wordSpacing:0})))}) : step.value;job.fitWork=null;break;}
           if (!all && performance.now()-started>=8) break;
         }
         if (job.fitWork) {suspend(job);continue;}
       }
       job.projection=job.reusable && job.plan && job.prior?.projection?.topology===topology(job.plan) ? job.prior.projection : null;
-      if (job.needsClear && job.saved && !job.projection) clear(job.paragraph,{forget:false,keepSelection:!editing});
-      const {paragraph,view,hanging,cap,justified}=job;
-      if (!cap && !hanging && !justified) {restoreSelection(paragraph,job.selected);continue;}
+      if (job.needsClear && job.saved && !job.projection) clear(job.paragraph,{forget:false});
+      const {paragraph,view,hanging,cap,justified,ragged}=job;
+      if (!cap && !hanging && !justified && !ragged) {restoreSelection(paragraph,job.selected);continue;}
       const state=stateFor(job);
       states.set(paragraph,state);live.add(paragraph);paragraph.setAttribute(mark,'');
       if (cap || hanging) protectInitial(paragraph);
@@ -631,6 +664,7 @@ export function createTypography() {
       }
       if (job.projection) {updateProjection(job.projection,job.plan);state.projection=job.projection;}
       else if (job.plan) state.projection=project(paragraph,job.saved,job.geometry,job.plan);
+      paragraph.toggleAttribute(mark+'-ragged',!!ragged && !!state.projection);
       if (state.projection && job.beside && !laidAsPlanned(paragraph,job)) {
         refused.set(paragraph,job.sizeKey+'\u0000'+paragraph.textContent);clear(paragraph);restoreSelection(paragraph,job.selected);continue;
       }
@@ -638,18 +672,103 @@ export function createTypography() {
       else if (hanging) hangPunctuation(paragraph,state,job.style,hangingEdge(paragraph,job.style,paragraph.getBoundingClientRect()));
       state.html=paragraph.innerHTML;
       restoreSelection(paragraph,job.selected);changed++;
-      if (editing) state.editKey=editKey(paragraph,generation);
     }
     return {changed,released,pending,prepared:preparedCount};
   }
 
+  const slotPlans = new WeakMap();
+  function slotPlan(paragraph, items, options, input) {
+    const {width, top, obstacles, lineHeight, minWidth, justify, hyphenate} = input;
+    const round = value => Math.round(value * 100) / 100;
+    const key = [captureFontAuthority(paragraph.ownerDocument), width, lineHeight, minWidth, justify, hyphenate, options.language, options.wordBreak,
+      items.map(item => [item.text, item.font, item.letterSpacing, item.break, item.extraWidth].join('\u0001')).join('\u0002'),
+      obstacles.map(item => [item.x, item.y - top, item.width, item.height].map(round).join(',')).join(';')].join('\u0000');
+    const known = slotPlans.get(paragraph);
+    if (known?.key === key) return known.plan;
+    const plan = slotLines(paragraph, items, options, input);
+    slotPlans.set(paragraph, {key, plan});
+    return plan;
+  }
+  function slotLines(paragraph, items, options, {width, top, obstacles, lineHeight, minWidth, slotsForBand, justify, hyphenate}) {
+    if (!obstacles.length) return null;
+    const doc = paragraph.ownerDocument, words = scope(doc);
+    const source = items.map(item => ({...item, hyphenate}));
+    const geometry = words.prepare(paragraph, source, {policy: 'paragraph', language: options.language, whiteSpace: 'normal',
+      wordBreak: options.wordBreak, hanging: false, paragraphBreaks: [0, source.length]});
+    if (!geometry) return null;
+    const sequence = [], bottom = Math.max(...obstacles.map(item => item.y + item.height)) - top;
+    let y = 0, rows = 0;
+    while (y < bottom && rows < 512 && sequence.length < 1024) {
+      const bands = slotsForBand(width, obstacles, top + y, lineHeight, Math.min(minWidth, width));
+      if (!bands) return null;
+      if (bands.length) {
+        for (const band of bands) sequence.push({x: band.x, y, width: band.width});
+        y += lineHeight; rows++; continue;
+      }
+      let next = Infinity;
+      for (const obstacle of obstacles) if (obstacle.x < width && obstacle.x + obstacle.width > 0 &&
+          obstacle.y < top + y + lineHeight && obstacle.y + obstacle.height > top + y) next = Math.min(next, obstacle.y + obstacle.height - top);
+      if (!Number.isFinite(next) || next <= y) return null;
+      y = next;
+    }
+    const prepared = fitter.prepare(geometry);
+    let slots = sequence, plan = null;
+    for (let pass = 0; prepared && pass < 8; pass++) {
+      const measures = slots.map(slot => Math.floor(slot.width * 64) / 64);
+      if (!measures.length) return null;
+      plan = words.fit(paragraph, geometry, known => fitter.solveSteps(prepared, width, {widths: measures, shrink: justify ? undefined : 0}, known));
+      if (!plan) return null;
+      const wide = new Set();
+      plan.lines.forEach((line, index) => {
+        if (index >= slots.length || line.firstWord !== line.lastWord || line.kind === 'soft' || line.kind === 'auto') return;
+        const word = geometry.segments[line.segment].words[line.firstWord];
+        if (line.start === word.start && line.end === word.end && word.width > measures[index] + .5) wide.add(slots[index]);
+      });
+      if (!wide.size) break;
+      slots = slots.filter(slot => !wide.has(slot)); plan = null;
+    }
+    const perRow = new Map();
+    for (const slot of slots) perRow.set(slot.y, (perRow.get(slot.y) || 0) + 1);
+    if (!plan || ![...perRow.values()].some(count => count > 1)) return null;
+    const lines = [], text = geometry.text, offsets = geometry.offsets, space = /^[\t\n\f\r ]*$/;
+    for (let index = 0; index < plan.lines.length; index++) {
+      const line = plan.lines[index], slot = sequence[index] || {x: 0, y: y + (index - sequence.length) * lineHeight, width};
+      const spacing = justify ? line.wordSpacing : 0, fragments = [];
+      const segment = geometry.segments[line.segment].words.slice(line.firstWord, line.lastWord + 1);
+      let at = 0, previous = null;
+      while (at < source.length - 1 && offsets[at + 1] <= line.start) at++;
+      for (; at < source.length && offsets[at] < line.end; at++) {
+        let from = Math.max(line.start, offsets[at]), to = Math.min(line.end, offsets[at + 1]);
+        if (previous) while (from < to && /[\t\n\f\r ]/.test(text[from])) from++;
+        if (offsets[at + 1] < line.end) while (to > from && /[\t\n\f\r ]/.test(text[to - 1])) to--;
+        if (to <= from) continue;
+        const fragment = {itemIndex: at, sourceStart: from - offsets[at], sourceEnd: to - offsets[at], derive: true, occupiedWidth: 0, gapItemIndex: at, gapBefore: 0};
+        if (previous) {
+          fragment.gapItemIndex = previous.itemIndex;
+          if (previous.end < from) {
+            if (!space.test(text.slice(previous.end, from))) return null;
+            const before = segment.find(word => word.end === previous.end);
+            if (!before?.gap) return null;
+            fragment.gapBefore = before.gap.width + spacing;
+          } else fragment.gapBefore = 0;
+        }
+        fragments.push(fragment); previous = {itemIndex: at, end: to};
+      }
+      if (!fragments.length) return null;
+      if (line.kind === 'soft' || line.kind === 'auto') fragments.at(-1).glyph = line.glyph || '-';
+      lines.push({x: slot.x, y: slot.y, width: slot.width, fragments, wordSpacing: spacing});
+    }
+    const last = lines.at(-1);
+    return {lines, height: last ? Math.max(lineHeight, last.y + lineHeight) : lineHeight};
+  }
+
   function retire(root, {documentChanged=false}={}) {
     clear(root);
     for (const paragraph of live) if (!paragraph.isConnected) clear(paragraph);
     scope(root?.ownerDocument || root || globalThis.document).retire({documentChanged});
   }
   const invalidateFonts = document => scope(document || globalThis.document).invalidateFonts();
-  return {apply,clear,clearSelection,firstLineEnd,initialRange,protectInitial,invalidateFonts,retire};
+  return {apply,clear,clearSelection,firstLineEnd,initialRange,protectInitial,invalidateFonts,retire,slotPlan};
 }
 
 const typography = createTypography();
@@ -661,3 +780,4 @@ export const initialRange = typography.initialRange;
 export const protectInitial = typography.protectInitial;
 export const invalidateFonts = typography.invalidateFonts;
 export const retire = typography.retire;
+export const slotPlan = typography.slotPlan;

package/dist/spec/document-fonts.mjs

@@ -216,6 +216,11 @@ export function documentFontUsage(markdown, parser, defaultFont) {
 	for (const token of md.parse(splitOpeningFrontmatter(source).body, {})) {
 		if (token.type === 'heading_open') blockFamily = sans;
 		else if (token.type === 'heading_close' || token.type === 'paragraph_open') blockFamily = main;
+		else if (token.type === 'fence' && /^html(?:\s+\{[^{}]*\})?\s*$/i.test(token.info)) {
+			const text = plain(token.content);
+			add(blockFamily, text);
+			for (const name of htmlFontFamilies(token.content, md)) add(name, text);
+		}
 		else if (token.type === 'fence' || token.type === 'code_block') add(mono, token.content);
 		else if (token.type === 'html_block') {
 			const text = plain(token.content);

package/dist/spec/document-settings.mjs

@@ -128,10 +128,11 @@ function paperOf(value) {
 	const pixels = /^(\d{3,5})x(\d{3,5})px$/.exec(name), width = Number(pixels?.[1]), height = Number(pixels?.[2]);
 	return pixels && width <= 10000 && height <= 10000 ? Object.freeze({name, width: width * 15, height: height * 15, css: width + 'px ' + height + 'px'}) : null;
 }
+export const pageSizeOf = settings => settings?.papersize || PAPERS.letter;
 export const PAGE_SIZES = Object.freeze(['letter', 'legal', 'tabloid', 'a3', 'a4', 'a5', '1080x1080px', '1080x1350px', '1920x1080px', '1200x630px']);
 const EMPTY = Object.freeze({
 	title: null, subtitle: null, lang: null, fontsize: null, mainfont: null, sansfont: null, monofont: null, defaultfont: null, linestretch: null,
-	papersize: null, geometry: null, pagestyle: null, spacing: null,
+	papersize: null, geometry: null, pagestyle: null, spacing: null, template: null,
 });
 
 function unquote(value) {
@@ -351,6 +352,7 @@ export function readDocumentSettings(markdown) {
 		fontsize, mainfont, sansfont, monofont, defaultfont, linestretch, papersize, geometry,
 		spacing: normalizeDocumentSpacing(take('spacing')),
 		pagestyle: page === 'plain' || page === 'empty' ? page : null,
+		template: String(take('template') || '').toLowerCase() === 'page' ? 'page' : null,
 	});
 }
 
@@ -368,14 +370,14 @@ export function updateDocumentSettings(markdown, patch) {
 		text: (source[field.start - 1] === ':' ? ' ' : '') + text + (source[field.end] === '#' ? ' ' : '')});
 	for (const [key, supplied] of Object.entries(patch || {})) {
 		const font = ['mainfont', 'sansfont', 'monofont', 'defaultfont'].includes(key);
-		if (!font && !['fontsize', 'linestretch', 'spacing', 'geometry', 'papersize'].includes(key)) throw new TypeError('Unknown document setting: ' + key);
+		if (!font && !['fontsize', 'linestretch', 'spacing', 'geometry', 'papersize', 'pagestyle'].includes(key)) throw new TypeError('Unknown document setting: ' + key);
 		const matches = fields.filter(item => item.key === key);
 		if (matches.length > 1) throw new RangeError('Duplicate document setting: ' + key);
 		const field = matches[0];
-		const value = supplied === null ? null : font ? documentFont(supplied) : key === 'fontsize' ? fontSize(supplied) : key === 'spacing' ? normalizeDocumentSpacing(supplied) : key === 'geometry' ? marginOf(supplied) : key === 'papersize' ? paperOf(supplied) : leading(supplied);
+		const value = supplied === null ? null : font ? documentFont(supplied) : key === 'fontsize' ? fontSize(supplied) : key === 'spacing' ? normalizeDocumentSpacing(supplied) : key === 'geometry' ? marginOf(supplied) : key === 'papersize' ? paperOf(supplied) : key === 'pagestyle' ? (['plain', 'empty'].includes(supplied) ? {name: supplied} : null) : leading(supplied);
 		if (supplied !== null && !value) throw new TypeError('Invalid document setting: ' + key);
-		const encoded = value === null ? '' : font ? JSON.stringify(value.family) : key === 'fontsize' ? value.step : key === 'spacing' ? JSON.stringify(value) : key === 'geometry' ? unquote(supplied).trim() : key === 'papersize' ? value.name : String(value.factor);
-		if (value !== null && before[key] && (font ? before[key].family === value.family : key === 'fontsize' ? same(before.fontsize.unit, value.unit) : key === 'spacing' ? JSON.stringify(before.spacing) === encoded : key === 'geometry' ? ['top', 'right', 'bottom', 'left'].every(side => before.geometry[side] === value[side]) : key === 'papersize' ? before.papersize.name === value.name : before.linestretch.factor === value.factor)) continue;
+		const encoded = value === null ? '' : font ? JSON.stringify(value.family) : key === 'fontsize' ? value.step : key === 'spacing' ? JSON.stringify(value) : key === 'geometry' ? unquote(supplied).trim() : key === 'papersize' || key === 'pagestyle' ? value.name : String(value.factor);
+		if (value !== null && before[key] && (font ? before[key].family === value.family : key === 'fontsize' ? same(before.fontsize.unit, value.unit) : key === 'spacing' ? JSON.stringify(before.spacing) === encoded : key === 'geometry' ? ['top', 'right', 'bottom', 'left'].every(side => before.geometry[side] === value[side]) : key === 'papersize' ? before.papersize.name === value.name : key === 'pagestyle' ? before.pagestyle === value.name : before.linestretch.factor === value.factor)) continue;
 		if (key === 'fontsize' && value !== null && fontSize(encoded)?.unit !== value.unit) refuse(key);
 		if (!field) { if (value !== null) append.push(key + ': ' + encoded + eol); continue; }
 		if (field.opaque || field.invalid || field.multiline || field.block) refuse(key);

package/dist/spec/html-blocks.mjs

@@ -53,7 +53,7 @@ export function htmlFence(raw) {
   const tail = raw.slice(end), attached = /^(\r?\n)(<!--md-layout:v1[^\r\n]*-->)(?:\r?\n)?$/.exec(tail);
   const layout = attached && parseLayout(attached[2]);
   if (tail.trim() && !layout) return null;
-  if (layout && ['align', 'first', 'indent', 'marker', 'hyphens', 'caps', 'hanging'].some(key => key in layout)) return null;
+  if (layout && ['align', 'first', 'indent', 'marker', 'hyphens', 'caps', 'hanging', 'lines', 'before', 'after', 'line'].some(key => key in layout)) return null;
   return {attrs, info: opening[3].trim(), body: rest.slice(0, found.index), infoStart: opening[1].length + mark.length,
     infoEnd: opening[0].replace(/\r?\n$/, '').length, source: raw, start: 0, end: raw.length, fenceEnd: end,
     layout: layout || HTML_FLOW, marker: attached ? {start: end + attached[1].length, end: end + attached[1].length + attached[2].length, text: attached[2]} : null};
@@ -545,24 +545,43 @@ export function mountHtmlBlocks(doc, options = {}) {
         value.width < 1 || value.viewportHeight < 1 || value.width > 4096 || value.viewportHeight > 4096) return;
     if (Math.abs(row.frame.clientWidth - value.width) > 1 || Math.abs(row.frame.clientHeight - value.viewportHeight) > 1) {message(row, 'snapshot'); return;}
     const stamp = ++row.generation, scale = Math.min(1, 1024 / Math.max(value.width, value.viewportHeight));
-    const canvas = doc.createElement('canvas'); canvas.width = Math.max(1, Math.ceil(value.width * scale)); canvas.height = Math.max(1, Math.ceil(value.viewportHeight * scale));
-    const snapshot = new win.Image();
+    const ratio = win.devicePixelRatio || 1, sharp = Math.min(ratio, 4096 / Math.max(value.width, value.viewportHeight), Math.sqrt(16777216 / (value.width * value.viewportHeight)));
+    const current = () => !dead && owned.get(row.image) === row && stamp === row.generation && keyOf(row.image) === row.key;
+    const draw = async factor => {
+      const canvas = doc.createElement('canvas'), snapshot = new win.Image();
+      canvas.width = Math.max(1, Math.ceil(value.width * factor)); canvas.height = Math.max(1, Math.ceil(value.viewportHeight * factor));
+      try {
+        snapshot.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="' + canvas.width + '" height="' + canvas.height + '" viewBox="0 0 ' + value.width + ' ' + value.viewportHeight + '"><foreignObject width="100%" height="100%">' + value.markup + '</foreignObject></svg>');
+        await Promise.race([snapshot.decode(), new Promise((_, reject) => win.setTimeout(() => reject(new Error('Snapshot decode timeout')), 2000))]);
+        if (!current()) return null;
+        const ctx = canvas.getContext('2d'); ctx.drawImage(snapshot, 0, 0); ctx.getImageData(0, 0, 1, 1);
+        return canvas.toDataURL('image/png');
+      } finally {snapshot.removeAttribute('src'); canvas.width = canvas.height = 0;}
+    };
     try {
-      snapshot.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="' + canvas.width + '" height="' + canvas.height + '" viewBox="0 0 ' + value.width + ' ' + value.viewportHeight + '"><foreignObject width="100%" height="100%">' + value.markup + '</foreignObject></svg>');
-      await Promise.race([snapshot.decode(), new Promise((_, reject) => win.setTimeout(() => reject(new Error('Snapshot decode timeout')), 2000))]);
-      if (dead || owned.get(row.image) !== row || stamp !== row.generation || keyOf(row.image) !== row.key) return;
+      const first = await draw(scale);
+      if (first == null) return;
       if (Math.abs(row.frame.clientWidth - value.width) > 1 || Math.abs(row.frame.clientHeight - value.viewportHeight) > 1) {message(row, 'snapshot'); return;}
-      const ctx = canvas.getContext('2d'); ctx.drawImage(snapshot, 0, 0); ctx.getImageData(0, 0, 1, 1);
-      const first = canvas.toDataURL('image/png'); if (first.length > 4 * 1024 * 1024) throw new Error('Snapshot byte budget');
-      row.image.dataset.rapierFirstFrame = first; row.image.src = first;
+      if (first.length > 4 * 1024 * 1024) throw new Error('Snapshot byte budget');
+      const shown = sharp > scale ? await draw(sharp).catch(() => first) : first;
+      if (shown == null) return;
+      row.ratio = ratio;
+      row.image.dataset.rapierFirstFrame = first; row.image.src = shown;
       row.snapshot = true;
       row.image.dataset.rapierLiveSurface = '';
       row.image.dataset.rapierContour = row.animated ? 'animation-box' : value.snapshotStatus === 'sampled' ? 'sampled' : 'unavailable-box';
       row.image.dataset.rapierNaturalWidth = String(value.width); row.image.dataset.rapierNaturalHeight = String(value.viewportHeight);
       row.image.dispatchEvent(new win.Event('rapier-html-resize', {bubbles: true})); schedule();
     } catch {if (owned.get(row.image) === row) {row.image.dataset.rapierContour = 'unavailable-box'; row.image.dataset.rapierSnapshot = 'unavailable';}}
-    finally {snapshot.removeAttribute('src'); canvas.width = canvas.height = 0;}
   }
+  let density = null;
+  const redraw = () => {
+    density?.removeEventListener('change', redraw);
+    if (dead) return;
+    density = win.matchMedia('(resolution: ' + (win.devicePixelRatio || 1) + 'dppx)'); density.addEventListener('change', redraw);
+    for (const row of owned.values()) if (row.snapshot && row.ratio !== (win.devicePixelRatio || 1)) {row.generation++; message(row, 'snapshot');}
+  };
+  redraw();
   const changedVisibility = () => {for (const row of owned.values()) applyPlayback(row);};
   const hidden = event => {if (!event.persisted) {api.close(); return;} for (const row of owned.values()) {row.visible = false; applyPlayback(row);}};
   const shown = () => {scan(); for (const row of owned.values()) {const box = row.image.getBoundingClientRect();
@@ -580,7 +599,7 @@ export function mountHtmlBlocks(doc, options = {}) {
       snapshot: image.dataset.rapierSnapshot || null, contour: image.dataset.rapierContour || null, status: image.dataset.rapierPlayback || 'ready'} : null;},
     close() {dead = true; win.cancelAnimationFrame(pending); observer.disconnect(); resize.disconnect(); visibility?.disconnect();
       win.removeEventListener('message', receive); win.removeEventListener('resize', schedule); doc.removeEventListener('scroll', schedule, true);
-      doc.removeEventListener('visibilitychange', changedVisibility); reduced.removeEventListener('change', changedMotion);
+      doc.removeEventListener('visibilitychange', changedVisibility); reduced.removeEventListener('change', changedMotion); density?.removeEventListener('change', redraw);
       for (const row of [...owned.values()]) release(row); sheet.remove(); local.clear();
       win.removeEventListener('pagehide', hidden); win.removeEventListener('pageshow', shown); if (doc.rapierObjects === api) delete doc.rapierObjects;}};
   win.addEventListener('pagehide', hidden); win.addEventListener('pageshow', shown); if (!options.root) doc.rapierObjects = api; scan(); return api;

package/dist/spec/md-assets.mjs

@@ -515,9 +515,10 @@ export function retireDeletedImageDefinitions(before, after, splices, factory) {
     return retired.sort((a, b) => b.start - a.start).map(row => {
       const gap = /(?:\r\n\r\n|\n\n|\r\r)$/.exec(after.slice(Math.max(0, row.start - 4), row.start));
       let tail = after.slice(row.end);
+      const last = /^(?:\r\n|\n|\r)?$/.test(tail);
       for (const other of retired) if (other.start >= row.end) tail = tail.replace(other.source, '');
       const whole = gap && !/\S/.test(tail) && row.start - gap[0].length > markdownBodyOffset(after);
-      return whole ? {pos: row.start - gap[0].length, removed: gap[0] + row.source, inserted: ''} : {pos: row.start, removed: row.source, inserted: ''};
+      return whole ? {pos: row.start - gap[0].length, removed: gap[0] + row.source + (last ? after.slice(row.end) : ''), inserted: ''} : {pos: row.start, removed: row.source, inserted: ''};
     });
   } catch (_) { return []; }
 }

package/dist/spec/template-page.mjs

@@ -1,6 +1,4 @@
 // SPDX-License-Identifier: MIT
-export function isTemplatePage(source) {
-  const match = /^(?:)?---[ \t]*\r?\n([\s\S]*?)\r?\n---[ \t]*(?:\r?\n|$)/.exec(String(source).slice(0, 65536));
-  return !!match && /^template:[ \t]*page[ \t]*(?:#.*)?$/m.test(match[1]);
-}
+import {readDocumentSettings} from './document-settings.mjs';
+export const isTemplatePage = source => readDocumentSettings(source).template === 'page';
 export const isPageBorderLayout = layout => layout?.wrap === 'behind' && layout.lock === 'on';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.2.30",
+  "version": "1.2.32",
   "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",

package/style.css

@@ -326,6 +326,23 @@
 	position: relative;
 }
 
+/* The line that holds the box hangs: its later lines start under the first line's words, not under the box. The box takes
+   16px and a space of the first line (the 48px target less its overhangs), which the hang gives back. */
+.md-render .task-list-item > p:has(> input[type="checkbox"]:first-child),
+.md-render .task-list-item:has(> input[type="checkbox"]:first-child) {
+	/* The space the source keeps between the box and the words (`- [ ] words`), so the later lines meet the words. */
+	--md-task-space: .24em;
+	padding-inline-start: calc(16px + var(--md-space-1) + var(--md-task-space));
+	text-indent: calc(-16px - var(--md-space-1) - var(--md-task-space));
+}
+/* The hang is the line's alone: nothing inside it (a formula, a code chip) or after it takes the indent, and a tight item's
+   later blocks (a nested list, a paragraph) keep their own place. */
+.md-render .task-list-item > p:has(> input[type="checkbox"]:first-child) *,
+.md-render .task-list-item:has(> input[type="checkbox"]:first-child) * { text-indent: 0; }
+.md-render .task-list-item:has(> input[type="checkbox"]:first-child) > :is(p, ul, ol, pre, blockquote, table, div, dl, details, figure, hr) {
+	margin-inline-start: calc(-16px - var(--md-space-1) - var(--md-task-space));
+}
+
 .md-render .task-list-item input[type="checkbox"] {
 	--md-task-box: clamp(14px, .92em, 24px);
 	/* A form control does not inherit color on its own; the shell's own app sheet gives it one