rapier-markdown-kit 1.2.8 → 1.2.10

package/dist/kit/render.mjs

@@ -8,7 +8,7 @@ import {documentLanguage, documentSettingsFonts} from '../spec/document-settings
 import {createLineMeasurer, linesHeight} from '../layout/model.mjs';
 import {markPrintCapitals, createPrintCapitals, followingPrintProse} from './print-capitals.mjs';
 import {freezePublishedInk} from './render-ink.mjs';
-// Set the first view once. Subsequent rendering keeps the person's horizontal position.
+import {isTemplatePage, isPageBorderLayout} from '../spec/template-page.mjs';
 export function positionNativeDiagram(drawing) {
   const surface=drawing?.closest?.('.diagram-block,.diagram-live-preview');
   if(!surface?.clientWidth)return;
@@ -30,7 +30,6 @@ export function positionNativeDiagram(drawing) {
   surface.scrollLeft=Math.max(0,Math.min(surface.scrollWidth-surface.clientWidth,left));
 }
 
-// The document's renderer. DOM, codecs and host state are explicit inputs.
 function createRenderer(runtime) {
   const {RapierLedgerCarried, RapierPageReturnAddress, RapierTextCodec, _rapierArtifactHighlight, _rapierArtifactPreference, _rapierArtifactStyles, _rapierBlobDataUrl, _rapierBuildInterchangeContext, _rapierDocumentNameIsAdmissible, _rapierLedgerParts, _rapierDrawReadSVGRecipe, _rapierDrawShapeProfileFor, _rapierExportFontCss, _rapierFillDiagram, _rapierFinalizeExportCode, _rapierLanguageClass, _rapierLineStartOffsets, _rapierMarkdownEnvironment, _rapierPortableHtml, _rapierPrepareInterchangeContext, _rapierProjectPortableRoot, _rapierProviders, _rapierSourceCharEscaped, _rapierSourceLineSpan, crypto, document, escapeRapierHtmlText, globalThis, sanitizeRapierHtml} = runtime;
   let md = runtime.md;
@@ -66,7 +65,6 @@ async function _rapierBuildArtifact(options, providedContext) {
 			: _rapierProjectPortableRoot(context.semanticRoot, { baseName: base, keepDiagrams: true });
 		for (const element of portableRoot.children) if (!element.hasAttribute('lang')) element.setAttribute('lang', language);
 		if (fontCss || settings?.defaultfont) {
-			// Keep authored font scopes inside this fragment; no page wrapper or global settings rules.
 			const {main, sans: heading, mono: code} = documentSettingsFonts(settings), body = main || heading;
 			if (body) for (const element of portableRoot.children)
 				if (!element.matches('pre,code,kbd,samp,svg,math') && !element.style.fontFamily)
@@ -80,15 +78,12 @@ async function _rapierBuildArtifact(options, providedContext) {
 			css: _rapierArtifactStyles('system', false, false, false, '') + '\n' + _rapierDocumentSettingsCss(settings)});
 		const html = work ? await runtime._rapierPortableHtmlAsync(portableRoot, work) : _rapierPortableHtml(portableRoot);
 		return {
-			// Only validated data-font rules bypass the content sanitizer, which still rejects authored styles.
 			html: (fontCss ? '<style>' + fontCss + '</style>\n' : '') + html,
 			filename: base + '-publishing.html',
 			metadata,
 		};
 	}
 
-	// The semantic export root is detached and has never entered the live visibility queue.
-	// Await the same materialization owner before any projection clones or serializes it.
 	const unavailable = plugin => Object.assign(new Error('Offline web page not written; install the ' + plugin + ' plug-in before exporting this document.'),
 		{code: 'offline_plugin_unavailable', plugin});
 	if (completePage && context.semanticRoot.querySelector('.math-placeholder[data-rapier-math-source]')) throw unavailable('math');
@@ -97,15 +92,11 @@ async function _rapierBuildArtifact(options, providedContext) {
 		if (!(completePage && retained && _rapierProviders?.mermaid?.status !== 'ready')) await _rapierFillDiagram(diagram, true);
 		if (!completePage || diagram.hasAttribute('data-diagram-unclosed')) continue;
 		if (diagram.getAttribute('data-diagram-state') === 'absent') throw unavailable('mermaid');
-		// A completed diagram must have its drawing. Syntax and renderer failures both refuse
-		// the file; an unclosed fence above is still authored source, not a completed diagram.
 		if (diagram.getAttribute('data-diagram-state') !== 'ready' || !diagram.querySelector('.diagram-cache svg'))
 			throw Object.assign(new Error('Web page not written; a required diagram could not be rendered'), {code: 'EXPORT_DIAGRAM_UNAVAILABLE'});
 	}
 
 	if (completePage) {
-		// Invalid TeX renders as a static error SVG. A source-only span means
-		// rendering itself failed, so publishing it would silently omit the equation.
 		if (context.semanticRoot.querySelector('span[data-rapier-math-source]'))
 			throw new Error('Web page not written; a required equation could not be rendered');
 		await _rapierRequireOfflinePageImages(context.semanticRoot);
@@ -119,11 +110,9 @@ async function _rapierBuildArtifact(options, providedContext) {
 	const styledRoot = work ? await _rapierProjectStyledRootAsync(context.semanticRoot, styledOptions)
 		: _rapierProjectStyledRoot(context.semanticRoot, styledOptions);
 	styledRoot.setAttribute('lang', language);
+	const templatePage = _rapierTemplatePage(context.canonical, settings, styledRoot);
 	if (completePage && typeof _rapierFinalizeExportCode === 'function') await _rapierFinalizeExportCode(styledRoot);
-	// _rapierProjectStyledRoot already returns the sanitized projection.
-	// Picture-shape annotations have no consumer in a printed artifact.
 	if (!opts.print) _rapierAnnotateExportBoxPolygons(styledRoot);
-	// Paper keeps each picture's wrap through the same static float layout a page uses.
 	if (completePage || opts.print) {
 		if (work) await finishAsync(_rapierSharedPageLayoutSteps(styledRoot), work);
 		else _rapierSharedPageLayout(styledRoot);
@@ -134,7 +123,7 @@ async function _rapierBuildArtifact(options, providedContext) {
 	}
 	if (typeof opts.afterRoot === 'function') await opts.afterRoot(styledRoot);
 	markPrintCapitals(styledRoot);
-	const theme = opts.print
+	const theme = opts.print || templatePage
 		? 'light'
 		: _rapierArtifactPreference('theme', ['system', 'light', 'dark']);
 	const highlights = _rapierArtifactPreference('highlights', ['accent', 'standard']);
@@ -145,11 +134,6 @@ async function _rapierBuildArtifact(options, providedContext) {
 	const docClass = metadata.docKind === 'markdown'
 		? 'rapier-page md-render'
 		: 'rapier-page rapier-document--flat';
-	// Rapier's own stylesheet, not a lookalike: the theme frame, spec/markdown-style.css's whole
-	// .md-render set and the highlight rules, so a numbered list, a checkbox, a callout and a
-	// table are drawn in an exported page exactly as they are drawn here. The one caller with
-	// rules of its own -- Share, for the no-script float it alone writes -- appends them.
-	// Print retains its existing factory resources. HTML adds only the optional small Sans subset below.
 	const includeFonts = !!opts.print;
 	const willFont = opts.print && opts.willFont ? opts.willFont : null;
 	const settingsCss = _rapierDocumentSettingsCss(settings);
@@ -161,13 +145,12 @@ async function _rapierBuildArtifact(options, providedContext) {
 		+ (printWidth > 0 ? '.rapier-page.md-render{width:' + printWidth + 'px!important}' : '') + '}' : '';
 	const pageTitle = settings && settings.title ? globalThis.RapierMarkdownSpec.documentTitle(settings) : metadata.filename;
 	let css = _rapierArtifactStyles(theme, includeFonts, !!opts.print || completePage, false, opts.print && opts.kind === 'standalone' ? '' : null)
-		// Print already floats pictures. Tables, code, figures and rules clear them
-		// through the same clearing rule a complete page uses; print keeps its own page flow.
 		+ (completePage || opts.print ? '\n\n' + _rapierSharedPageFallbackCss(!completePage) : '')
 		+ (opts.extraCss ? '\n\n' + opts.extraCss : '')
 		+ (willFont ? '\n\n@font-face{font-family:' + willFont.family + ';src:url(' + await _rapierBlobDataUrl(new Blob([willFont.bytes], { type: 'font/ttf' })) + ') format("truetype")}' : '')
 		+ (settingsCss ? '\n' + settingsCss : '')
-		+ (typographyPrintCss ? '\n' + typographyPrintCss : '');
+		+ (typographyPrintCss ? '\n' + typographyPrintCss : '')
+		+ (templatePage ? '\n' + templatePage.css : '');
 	let factoryFontCss = '';
 	if (!opts.print) {
 		if (fontIndex) await requireDocumentFonts(context.canonical, {parser: md, index: fontIndex, root: styledRoot, settings, css, fontCss, validateFont: runtime.validateFont});
@@ -184,13 +167,7 @@ async function _rapierBuildArtifact(options, providedContext) {
 	const bodyHtml = work
 		? await finishAsync(serializeTree(styledRoot), work) : styledRoot.innerHTML;
 	if (work) await pause(work, .95);
-	// Every written page is offline. Only the writer's nonce script may run; it, pictures,
-	// styles and other page resources get no network authority. Following an ordinary link
-	// is the reader's navigation, with no Referer, not a background resource request.
 	const nonce = _rapierArtifactNonce();
-	// The reflow script is written first, because whether it exists decides the policy. A page that carries no script says so: script-src 'none' refuses every
-	// script outright. Declaring a nonce a page has no use for is a widening, small but real -- anything that could inject markup into the file could read the
-	// nonce out of it and be admitted.
 	const layoutScript = opts.scripts !== false ? _rapierArtifactLayoutScript(styledRoot, nonce, {pictures:!opts.print}) : '';
 	const inkScript = !opts.print && opts.scripts !== false ? _rapierArtifactInkScript(styledRoot, nonce) : '';
 	const htmlScript = !opts.print && opts.scripts !== false && styledRoot.querySelector('[data-rapier-html],[data-rapier-animation]') ? '<script nonce="' + nonce + '">' + htmlRuntimeSource().replace(/<\/script/gi, '<\\/script') + '</script>' : '';
@@ -198,18 +175,15 @@ async function _rapierBuildArtifact(options, providedContext) {
 		+ '<html lang="' + escapeRapierHtmlText(language) + '" data-rapier-theme="' + theme + '" data-highlights="' + highlights + '" data-invert-image-alpha="' + (invertImageAlpha ? 'on' : 'off') + '">\n'
 		+ '<head>\n<meta charset="UTF-8">\n' + (carrier ? RapierPageReturnAddress.PAGE_SEED + '\n' : '')
 		+ '<meta name="viewport" content="width=device-width, initial-scale=1">\n'
-		// Chrome 154's responsively sized frames: a host frame styled `frame-sizing: content-height` sizes
-		// itself to a page that opts in with this meta, so a document exported from Rapier and carried in
-		// someone's page shows whole, with no inner scroll. Any origin may read the height: the page is the
-		// document, published by the person who exported it.
 		+ '<meta name="responsive-embedded-sizing" content="allow-origins=*">\n'
 		+ '<meta http-equiv="Content-Security-Policy" content="' + _rapierExportedPageCsp(layoutScript || inkScript || htmlScript ? nonce : '', includeFonts || !!fontCss || !!factoryFontCss) + '">\n'
 		+ '<meta name="referrer" content="no-referrer">\n'
 		+ '<link rel="icon" href="data:,">\n'
+		+ _rapierPagePreviewMeta(styledRoot, pageTitle)
 		+ '<meta name="generator" content="Rapier ' + escapeRapierHtmlText(version) + '">\n'
 		+ '<title>' + escapeRapierHtmlText(pageTitle) + '</title>\n'
 		+ '<style>' + css + '</style>\n</head>\n'
-		+ '<body class="' + bodyClass + '"><main class="' + docClass + '" data-md-theme="' + theme + '">'
+		+ '<body class="' + bodyClass + '">' + (templatePage ? '<div class="rapier-template-border" aria-hidden="true"></div>' : '') + '<main class="' + docClass + '" data-md-theme="' + theme + '">'
 		+ bodyHtml + '</main>' + carrier + layoutScript + inkScript + htmlScript + '</body>\n</html>';
 
 	return {
@@ -220,6 +194,7 @@ async function _rapierBuildArtifact(options, providedContext) {
 		fontCss,
 		fontRequests: fontCss ? fontRequests(styledRoot, {settings, css, fontCss}) : [],
 		settings,
+		templatePage: templatePage && {url: templatePage.url, width: templatePage.width, height: templatePage.height, margin: templatePage.margin},
 		docClass,
 		language,
 		metadata,
@@ -227,11 +202,40 @@ async function _rapierBuildArtifact(options, providedContext) {
 	};
 }
 
+function _rapierTemplatePage(canonical, settings, root) {
+	if (!isTemplatePage(canonical) || !settings?.papersize) return null;
+	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 (!url) return null;
+	const width = settings.papersize.width / 15, height = settings.papersize.height / 15, margin = (settings.geometry?.twips ?? 1440) / 15;
+	const ground = 'background:var(--rapier-template-border) 0 0/100% 100% no-repeat';
+	const css = ':root{--rapier-template-border:url("' + url + '")}\n'
+		+ '@media screen{.rapier-template-border{display:none}body{background:#e8e8e8}.rapier-page{box-sizing:border-box;width:min(100%,' + width + 'px);min-height:' + height + 'px;margin:0 auto;padding:' + margin
+		+ 'px;background:var(--rapier-template-border) 0 0/100% ' + height + 'px repeat-y,#fff;color:#111}}\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:' + margin + 'px!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 + '}}';
+	return {url, width, height, margin, css};
+}
+
+function _rapierPagePreviewMeta(root, fallbackTitle) {
+	const words = node => String(node?.textContent || '').replace(/\s+/g, ' ').trim();
+	const title = words(root.querySelector('h1,h2,h3,h4,h5,h6')) || String(fallbackTitle || '');
+	const text = [...root.querySelectorAll('p')].map(words).find(line => line.length >= 20) || '';
+	const sentence = /^.{20,300}?[.!?](?=\s|$)/.exec(text)?.[0] || (text.length <= 200 ? text : text.slice(0, 200).replace(/\s+\S*$/, '') + '…');
+	const meta = (key, name, value) => '<meta ' + key + '="' + name + '" content="' + escapeRapierHtmlText(value) + '">\n';
+	return (sentence ? meta('name', 'description', sentence) : '') + (title ? meta('property', 'og:title', title) : '') +
+		(sentence ? meta('property', 'og:description', sentence) : '');
+}
+
 async function _rapierBuildPublishedPage(context) {
 	if (typeof context?.canonical !== 'string' || !context.semanticRoot)
 		throw new TypeError('Publishing requires a captured document.');
-	// Public readers receive only the current document. The editing session's previous
-	// source and attribution ledger never acquire public custody through an export option.
 	const current = {...context, ledger: null, carried: 'none', comparisonBase: null};
 	return _rapierBuildArtifact({
 		kind: 'standalone', scripts: false, extraCss: _rapierSharedPageFallbackCss(),
@@ -250,6 +254,11 @@ async function _rapierProjectStyledRootAsync(semanticRoot, options = {}) { retur
 function* _rapierProjectStyledRootSteps(semanticRoot, options) {
 	const opts = options || {};
 	const root = yield* cloneTree(semanticRoot);
+	for (const token of root.querySelectorAll('.rapier-source-token--softbreak')) { yield;
+		if (token.getAttribute('data-rapier-source') !== '%0A') token.replaceWith(...token.childNodes);
+		else if (token.previousSibling?.classList?.contains('callout__label')) token.remove();
+		else token.replaceWith(root.ownerDocument.createTextNode(' '));
+	}
 	const metadata = opts.metadata || {};
 
 	if (metadata.docKind !== 'markdown') {
@@ -299,7 +308,6 @@ function* _rapierProjectStyledRootSteps(semanticRoot, options) {
 			}
 			input.disabled = !!opts.print || !item;
 			if (input.disabled) { input.setAttribute('aria-disabled', 'true'); continue; }
-			// Native checked state changes this reader's view, never the carried source or disk.
 			input.removeAttribute('aria-disabled');
 			input.removeAttribute('aria-checked');
 			input.setAttribute('autocomplete', 'off');
@@ -315,8 +323,6 @@ function* _rapierProjectStyledRootSteps(semanticRoot, options) {
 }
 
 function _rapierDocxRenderStyles(root) {
-	// The semantic root is detached and its code is normalized text. Use the same
-	// highlighter and light reference sheet that paint a page, then retain native run facts.
 	const codes = Array.from(root.querySelectorAll('pre > code'));
 	for (const code of codes) {
 		const lang = _rapierLanguageClass(code);
@@ -345,8 +351,6 @@ function _rapierDocxRenderStyles(root) {
 		if (!paint) throw new Error('Word text colors could not be read.');
 		const hex = colour => {
 			if (!colours.has(colour)) {
-				// CSS may resolve an accent to oklch/color-mix. The browser supplies its
-				// sRGB paper colour; the writer does not invent a second colour parser.
 				paint.fillStyle = '#ffffff'; paint.fillRect(0, 0, 1, 1);
 				paint.fillStyle = colour; paint.fillRect(0, 0, 1, 1);
 				colours.set(colour, '#' + Array.from(paint.getImageData(0, 0, 1, 1).data).slice(0, 3)
@@ -361,7 +365,6 @@ function _rapierDocxRenderStyles(root) {
 			Array.from(probe.querySelectorAll('span')).forEach((span, index) => {
 				const style = into.defaultView.getComputedStyle(span), target = originals[index];
 				target.style.color = hex(style.color);
-				// Carry generated syntax emphasis as Word's semantic bold slot.
 				target.style.fontWeight ||= style.fontWeight === style.getPropertyValue('--md-fw-semibold').trim() ? 'bold' : style.fontWeight;
 				target.style.fontStyle = style.fontStyle;
 			});
@@ -371,8 +374,6 @@ function _rapierDocxRenderStyles(root) {
 		for (const quote of quotes) {
 			const probe = into.createElement('blockquote'); probe.className = quote.className;
 			probe.style.borderInlineStartColor = quote.style.borderInlineStartColor;
-			// Nested quotes have their own reference border colour. Preserve the quote
-			// ancestry without cloning the document's pictures or other resources.
 			const parent = quoteProbes.get(quote.parentElement?.closest('blockquote')) || surface;
 			parent.appendChild(probe); quoteProbes.set(quote, probe);
 		}
@@ -388,22 +389,17 @@ function _rapierPaintCode(el, html) {
 
 function _rapierPrefixPortableAnchors(root, baseName) { return finish(_rapierPrefixPortableAnchorsSteps(root, baseName)); }
 
-// The id an anchor carries on a portable page: the document's name, then the anchor with what an id cannot hold made a hyphen.
 function _rapierPortableAnchorId(baseName, id) {
 	const slug = String(baseName || 'document').toLowerCase()
 		.replace(/[^a-z0-9]+/g, '-')
 		.replace(/^-+|-+$/g, '') || 'document';
-	return 'rapier-' + slug + '-' + (String(id).replace(/[^a-z0-9_-]+/gi, '-').replace(/^-+|-+$/g, '') || 'anchor');
+	return 'rapier-anchor-' + slug + '-' + (String(id).replace(/[^a-z0-9_-]+/gi, '-').replace(/^-+|-+$/g, '') || 'anchor');
 }
 
 function* _rapierPrefixPortableAnchorsSteps(root, baseName) {
 	const ids = new Map(), svgIds = new Map();
 	const used = new Set();
 	const scopeOf = element => {
-		// querySelectorAll('*') hands back whatever the host document holds, and not every host gives
-		// each node Element.closest -- the export writer runs against parsed and stubbed documents as
-		// well as a browser's. Without this guard the whole anchor pass would throw TypeError. No scope
-		// simply means that node's references resolve document-wide, as an unscoped drawing's do.
 		if (typeof element?.closest !== 'function') return null;
 		let svg = element.closest('svg');
 		while (typeof svg?.parentElement?.closest === 'function' && svg.parentElement.closest('svg')) svg = svg.parentElement.closest('svg');
@@ -418,8 +414,6 @@ function* _rapierPrefixPortableAnchorsSteps(root, baseName) {
 		let suffix = 2;
 		while (used.has(nextId)) nextId = first + '-' + suffix++;
 		used.add(nextId);
-		// A document link resolves the first matching anchor, as it did before renaming.
-		// SVG references resolve within their own drawing, never the last repeated drawing.
 		if (!ids.has(oldId)) ids.set(oldId, nextId);
 		const svg = scopeOf(element);
 		if (svg) {
@@ -433,7 +427,6 @@ function* _rapierPrefixPortableAnchorsSteps(root, baseName) {
 	for (const element of root.querySelectorAll('*')) { yield;
 		const svg = scopeOf(element), local = svgIds.get(svg);
 		const rewriteId = value => (svg ? local?.get(value) : ids.get(value)) || '';
-		// URL fragments percent-decode once; ARIA/for/headers are literal IDREFs.
 		const decodeFragment = value => { try { return decodeURIComponent(value); } catch (_) { return value; } };
 		const iriProperty = /^(?:fill|stroke|filter|clip-path|mask|marker(?:-start|-mid|-end)?|cursor)$/;
 		const rewriteUrls = value => value.replace(/url\(\s*(?:"((?:\\[\s\S]|[^"\\])*)"|'((?:\\[\s\S]|[^'\\])*)'|((?:\\(?:[0-9a-f]{1,6}\s?|[^\r\n\f])|[^\s\\()])+))\s*\)/gi, (whole, double, single, bare) => {
@@ -462,8 +455,6 @@ function* _rapierPrefixPortableAnchorsSteps(root, baseName) {
 				if (next) element.setAttribute(name, next);
 				else element.removeAttribute(name);
 			} else if (svg && name === 'style') {
-				// Interpret only URL-bearing presentation properties: content/metadata strings
-				// that merely SAY "url(#id)" are not a reference and retain their own words.
 				for (const property of Array.from(element.style)) {
 					if (!iriProperty.test(property)) continue;
 					const before = element.style.getPropertyValue(property), next = rewriteUrls(before);
@@ -518,12 +509,6 @@ function _rapierAnnotateExportBoxPolygons(root) {
 		if (!recipe) continue;
 		const view = recipe.view && recipe.view.w > 0 && recipe.view.h > 0 ? recipe.view : { x: 0, y: 0, w: recipe.canvas.w, h: recipe.canvas.h };
 		if (layout.wrap === 'around') {
-			// One occupancy for live view and export: the drawing's own profile -- closed faces reserved,
-			// open strokes as ribbons, labels as boxes -- computed from the same recipe the live view
-			// reads, sampled into bands the exported page reads back (layout/model.mjs parseProfile). Text
-			// and paint shapes need rendered pixels for their glyph silhouettes, so the live editor's own
-			// <img> supplies those when it can be found; a raster or a foreign SVG writes nothing and the
-			// export measures alpha, as the live view does.
 			try {
 				let glyphs = null;
 				if (recipe.shapes.some(shape => shape.recognized === 'text' || shape.recognized === 'paint' || shape.label)) {
@@ -572,8 +557,6 @@ function* _rapierSharedSourceFormsSteps(source, root, preparedDestinations = nul
 	const used = [], definitions = [];
 	for (const row of destinations) {
 		yield;
-		// Share can display a converted picture. Only identical authored bytes can be
-		// borrowed from that picture; otherwise the source keeps its own data URL.
 		const image = byUrl.get(row.destination);
 		if (!image) continue;
 		let id = image.id;
@@ -608,7 +591,6 @@ async function _rapierSharedSourceCarrier(context, root) {
 		'"' + (forms.ids.length ? ' data-images="' + forms.ids.join(' ') + '"' : '') +
 		(forms.definitions.length ? ' data-image-definitions="' + forms.definitions.map(encodeURIComponent).join(' ') + '"' : '') + '>\n' +
 		forms.carried + '\n</script>\n' +
-		// The optional edit ledger: carried only when the host binds its owner; a host without one writes none.
 		(RapierLedgerCarried ? RapierLedgerCarried.writeParts(forms.resolved, _rapierLedgerParts(forms.resolved, context.ledger, context.carried)) +
 			RapierLedgerCarried.writeBase(forms.resolved, context.comparisonBase) : '');
 }
@@ -622,10 +604,7 @@ function _rapierSharedResolve(text, ids, images, definitions) {
 		if (typeof found !== 'string' || !/^data:image\/(?:png|jpeg|webp|gif|svg\+xml|jxl);base64,[A-Za-z0-9+/]+={0,2}$/i.test(found)) { broken = true; return null; }
 		return found;
 	};
-	// Authored # characters were encoded. A raw id after ]( can only be a structural
-	// substitution; matching its destination lets nested alt brackets survive unchanged.
 	const inline = new RegExp('(\\]\\([ \\t\\r\\n]*(?:&lt;)?)#' + id + '(?=>?[ \\t\\r\\n]*\\)|>?[ \\t\\r\\n]+["\'(])', 'g');
-	// A definition may sit in a quote or a list item, as the writer found it: its line starts with their markers.
 	const definition = new RegExp('(^[ \\t>]*(?:(?:[-+*]|\\d{1,9}[.)])[ \\t]+[ \\t>]*)*\\[((?:\\\\.|[^\\]\\\\])+)\\]:[ \\t]*(?:(?:\\r\\n|\\r|\\n)[ \\t>]*)?(?:&lt;)?)#' + id + '(?=>?[ \\t]*$|>?[ \\t]+["\'(])', 'gm');
 	const swapInline = (match, lead, value) => { const found = src(value); return found == null ? match : lead + found; };
 	const swapDefinition = (match, lead, label, value) => {
@@ -640,7 +619,6 @@ function _rapierSharedResolve(text, ids, images, definitions) {
 async function _rapierReadSharedDocument(text, filename) {
 	const html = String(text);
 	if (!/\.html?$/i.test(filename || '') || !html.includes('type="' + _RAPIER_SHARED_SOURCE_TYPE + '"')) return null;
-	// Template contents remain inert, including pictures and scripts in ordinary HTML.
 	const template = document.createElement('template');
 	template.innerHTML = html;
 	const invalid = () => { throw new Error('The editable source in this web page is incomplete or changed'); };
@@ -652,15 +630,12 @@ async function _rapierReadSharedDocument(text, filename) {
 	const definitionTokens = (carrier.getAttribute('data-image-definitions') || '').split(/\s+/).filter(Boolean);
 	if (!_rapierDocumentNameIsAdmissible(name) || !['markdown', 'text', 'code'].includes(kind) || !/^[0-9a-f]{64}$/.test(sha256) ||
 			ids.some(id => !_RAPIER_SHARED_ID.test(id)) || definitionTokens.some(token => !_RAPIER_SHARED_DEFINITION.test(token))) return invalid();
-	// Only a definition the page declares is an image definition.
 	let definitions;
 	try { definitions = new Set(definitionTokens.map(decodeURIComponent)); } catch (_) { return invalid(); }
 	let source = carrier.textContent;
 	if (source.startsWith('\n')) source = source.slice(1);
 	if (source.endsWith('\n')) source = source.slice(0, -1);
 	source = source.replace(/&#13;/g, '\r');
-	// A duplicate id (two <img id="…">) is ambiguous, so it is recorded as null rather than either
-	// src -- ties into _rapierSharedResolve's `broken` check the same way a missing image does.
 	const images = new Map();
 	for (const element of template.content.querySelectorAll('img[id]')) images.set(element.id, images.has(element.id) ? null : element.getAttribute('src'));
 	const resolved = _rapierSharedResolve(source, ids, images, definitions);
@@ -686,7 +661,6 @@ function _rapierShareWrapKind(element) {
 	if (globalThis.RapierMarkdownLayout.wrapTextBlock(element)) return 'prose';
 	const image = element.tagName === 'P' ? element.querySelector('img') : null;
 	if (image && globalThis.RapierImageLayout.imageOnly(element, image)) return 'picture';
-	// An empty paragraph is transparent to the owner search, as in the editor and the export.
 	if (element.tagName === 'P' && !element.textContent.trim() && !image) return 'metadata';
 	return null;
 }
@@ -701,14 +675,6 @@ function _rapierSharePictureParagraph(image) {
 
 function _rapierSharedPageLayout(root) { return finish(_rapierSharedPageLayoutSteps(root)); }
 function* _rapierSharedPageLayoutSteps(root) {
-	// Owner search (wrapNeighbour) reads the sibling chain live, and applying one assignment
-	// splices the tree -- moving the owner into a new container moves it out of the very chain
-	// a later picture's own search would walk, and a barrier-free skip past an earlier picture
-	// can land on that new container instead (it is not a <p>, so it reads as a barrier). So
-	// every owner is resolved first, against the one original, unspliced tree, in a pass that
-	// only reads; only once all of them are known does a second pass apply any of them. Same
-	// two-phase shape as layout/interchange.js's reflow(), which resolves every picture's owner
-	// from one upfront `[...root.children]` before it changes anything about any of them.
 	const assignments = [];
 	for (const image of root.querySelectorAll('img[data-rapier-image-layout]')) {
 		yield;
@@ -716,19 +682,9 @@ function* _rapierSharedPageLayoutSteps(root) {
 		if (layout?.wrap !== 'around' && layout?.wrap !== 'box') continue;
 		const paragraph = _rapierSharePictureParagraph(image);
 		if (!paragraph) continue;
-		// Prefer following text, then preceding text, looking past pictures and metadata.
 		const owner = globalThis.RapierMarkdownLayout.wrapNeighbour(paragraph, _rapierShareWrapKind);
 		if (owner) assignments.push({image, paragraph, layout, owner});
 	}
-	// A float affects every line box after it in the same flow, which is the wrap law: prose and
-	// headings carry on beside the picture across a heading or section boundary as though the blocks
-	// between were not there. So the picture paragraph is placed right before its owner's text (a
-	// float only reaches what follows it) and left in the page's own flow, uncontained; the blocks
-	// that never wrap -- tables, code, figures and rules -- clear it through the page
-	// stylesheet instead, and a bordered h1 forms its own block so its rule does not run under the
-	// picture. Static CSS, no script: the no-script fallback only -- a reader with scripting off
-	// still gets a sensible nearest-side float; the inlined planner (same owner as standalone)
-	// replaces it when scripts run.
 	for (const {image, paragraph, layout, owner} of assignments) {
 		yield;
 		const side = (layout.x ?? 0) < 50 ? 'left' : 'right';
@@ -738,31 +694,9 @@ function* _rapierSharedPageLayoutSteps(root) {
 			paragraph.style.setProperty('shape-outside', 'inset(' + layout.y + 'em 0 0)');
 		}
 		image.style.margin = '0';
-		// The reserved box comes from the same rotated-bounds geometry every other consumer uses
-		// (layout/browser.js, layout/interchange.js's `geometry.rotatedBoundsRad`, layout/model.mjs's
-		// one owner), expressed as a percentage of the column the way the unrotated branch below already
-		// is -- never the picture's own pixel dimensions, which have no relation to a requested
-		// percentage width (a 4000px-wide source at width=40% would float 1788px wide in a 600px
-		// column). Intrinsic width/height supply only the aspect ratio; a percentage padding-top/bottom
-		// resolves against the same containing-block width CSS already resolves the float's own
-		// percentage width against, so one basis serves both the box and its vertical reservation, and
-		// the box stays exactly as wide as the column at every viewport width. The turned box is
-		// centred, horizontally and vertically, in the reserved (wider, taller) box rather than
-		// left-flush inside it, so the space this paragraph clears for it (the float's own width) is
-		// evenly split around the picture on every side, not just above and below. A missing `width`
-		// falls back to the picture's own natural pixel size in pixels, the same fallback the unrotated
-		// branch below uses; without either width/height attribute the picture still turns, just without
-		// the extra reservation (the same graceful narrowing Share already accepts elsewhere).
 		const naturalWidth = Number(image.getAttribute('width')) || 0, naturalHeight = Number(image.getAttribute('height')) || 0;
 		if (layout.rotate && naturalWidth > 0 && naturalHeight > 0) {
 			const rad = layout.rotate * Math.PI / 180, aspect = naturalHeight / naturalWidth;
-			// A steep turn (e.g. 90deg on a landscape source) can need the image WIDER than its own
-			// reserved box's width -- the rotated bounding box is narrower than the picture's own
-			// unrotated width whenever the turn swaps a wide dimension for a narrow one. Share's own
-			// global `img{max-width:100%}` (a sensible default everywhere else) would silently clamp
-			// exactly that case, shrinking the image and, with it, its auto height -- `max-width:none`
-			// here overrides that single rule with a more specific one, only for a picture this pass
-			// already sizes deliberately.
 			image.style.maxWidth = 'none';
 			if (layout.width != null) {
 				let width = layout.width, height = width * aspect;
@@ -787,7 +721,6 @@ function* _rapierSharedPageLayoutSteps(root) {
 				image.style.marginLeft = image.style.marginRight = ((bounds.width - naturalWidth) / 2) + 'px';
 			}
 		} else if (layout.lines != null) {
-			// Sized in lines: the float shrinks to the picture, whose height is the lines (spec/md-layout.mjs imageStyle).
 			image.style.width = 'auto';
 			image.style.height = globalThis.RapierMarkdownLayout.linesHeightCss(layout.lines);
 		} else {
@@ -796,32 +729,16 @@ 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%'; }
-		// `wrap=around` wraps to the picture's own alpha silhouette the way standard-adoption.md's
-		// rung-2 paragraph promises -- `shape-outside:url(<the same picture>)`, which every engine that
-		// reads shape-outside re-samples from the referenced image's own pixels, no script required. A
-		// CSS transform does not turn the shape a `shape-outside` url() samples (it stays the picture's
-		// unturned alpha), so a rotated `around` picture keeps the plain rectangular reservation above
-		// instead -- an honest conservative box rather than a silhouette shaped for the wrong angle.
-		// `layout.y` already owns `shape-outside` for its own inset reservation (below); the two are not
-		// combinable (a float has exactly one `shape-outside` value), so a `y`-offset `around` picture
-		// keeps that inset instead of silhouette wrapping -- a documented, narrow degradation.
 		if (layout.wrap === 'around' && !layout.rotate && !layout.y && !image.dataset.rapierContour?.endsWith('-box')) {
 			const src = image.getAttribute('src');
 			if (src) {
 				paragraph.style.setProperty('shape-outside', 'url("' + src + '")');
-				// Standard 10% alpha cutoff (`layout/model.mjs` alphaThreshold = .1).
 				paragraph.style.setProperty('shape-image-threshold', '0.1');
 			}
 		}
 		paragraph.classList.add('rapier-wrap-picture');
 		owner.before(paragraph);
 	}
-	// `behind`/`front` position the picture exactly where `x`/`y`/`width` say, out of the words' flow
-	// entirely (z-index below or above them) -- the absolutely positioned picture
-	// standard-adoption.md's rung-2 paragraph promises for these two placements, no obstacle
-	// avoidance, no script. The picture's own paragraph collapses to zero height in place (the same
-	// collapse-in-place anchor layout/interchange.js's own reflow uses for every positioned kind) so
-	// removing the picture from flow costs the surrounding text nothing.
 	const positionedAssignments = [];
 	for (const image of root.querySelectorAll('img[data-rapier-image-layout]')) {
 		yield;
@@ -833,7 +750,6 @@ function* _rapierSharedPageLayoutSteps(root) {
 	for (const {image, paragraph, layout} of positionedAssignments) {
 		yield;
 		paragraph.style.cssText = 'position:relative;height:0;margin:0;padding:0;line-height:0';
-		// Without x the picture starts at the left edge, as everywhere else (layout/model.mjs imageBox).
 		const x = layout.x, naturalWidth = Number(image.getAttribute('width')) || 0;
 		if (layout.width != null) image.style.width = layout.width + '%';
 		else if (naturalWidth > 0) image.style.width = naturalWidth + 'px';
@@ -843,14 +759,9 @@ function* _rapierSharedPageLayoutSteps(root) {
 		image.style.top = (layout.y || 0) + 'em';
 		image.style.margin = '0';
 		if (layout.rotate) { image.style.transform = 'rotate(' + layout.rotate + 'deg)'; image.style.transformOrigin = '50% 50%'; }
-		// Same rule as the live editor and the styled export: `behind` sinks under the owner's
-		// own in-flow, non-positioned text; `front` keeps the default stack, already above it.
 		if (layout.wrap === 'behind') image.style.zIndex = '-1';
 		paragraph.classList.add('rapier-positioned-picture');
 	}
-	// A turned picture Share does not otherwise position (inline, which this static page does not
-	// float at all) still turns -- the same picture, painted in place, never upright just because
-	// Share's own float model has nothing else to say about it.
 	const positioned = new Set([...assignments, ...positionedAssignments].map(row => row.image));
 	for (const image of root.querySelectorAll('img[data-rapier-image-layout]')) {
 		yield;
@@ -903,8 +814,6 @@ async function _rapierRequireOfflinePageImages(root) {
 		const picture = image.parentElement?.tagName.toLowerCase() === 'picture' && image.parentElement;
 		const alternative = picture && [...picture.querySelectorAll('source[srcset]')].some(source => source.getAttribute('srcset').trim());
 		if (tag !== 'source' && (src || !srcset && !alternative)) sources.push(src);
-		// A data URL contains its own comma. Read each URL before its optional
-		// density/width descriptor, as HTML's image candidate list does.
 		for (let at = 0; at < srcset.length;) {
 			while (at < srcset.length && /[\t\n\f\r ,]/.test(srcset[at])) at++;
 			const start = at;
@@ -922,8 +831,6 @@ async function _rapierRequireOfflinePageImages(root) {
 			missing.push('Picture ' + (index + 1) + (alt ? ' — ' + alt : '') + ': ' + destination);
 		}
 	}
-	// A source candidate or an SVG/CSS picture is still an automatic resource. Inspect
-	// the retained data; ordinary links remain navigation and local fragment references stay local.
 	const sourceTags = new Set(['audio', 'video', 'source', 'track', 'input', 'iframe', 'embed', 'script']);
 	const cssAttributes = new Set(['style', 'fill', 'stroke', 'filter', 'clip-path', 'mask', 'marker-start', 'marker-mid', 'marker-end', 'cursor', 'color-profile']);
 	for (const element of root.querySelectorAll('*')) {
@@ -940,13 +847,10 @@ async function _rapierRequireOfflinePageImages(root) {
 		}
 	}
 	if (!missing.length) return;
-	// The writer refuses immediately; interactive callers own any explanatory sheet.
 	throw Object.assign(new Error('Web page not written; embed these pictures and try again. ' + missing.join('; ')),
 		{code: 'offline_image_unavailable'});
 }
 
-// Shared by live CSS admission and offline resource admission. Quoted strings are
-// resource URLs only inside url() or as an image-set option, never arbitrary CSS text.
 function _rapierCssValueUrls(value) {
 	const urls = [], functions = [];
 	let at = 0;
@@ -1022,10 +926,7 @@ function _rapierCssValueUrls(value) {
 
 async function _rapierBuildSharedPage(captured) {
 	const context = await _rapierPrepareInterchangeContext({kind: 'share'}, captured);
-	// Share and Export write the same complete page, including native disclosures.
 	const artifact = await _rapierBuildArtifact({kind: 'standalone'}, context);
-	// No cap and no warning: the page is as large as the document is. A page over the editor's own 25
-	// MiB open limit still opens in any browser.
 	const blob = new Blob([artifact.html], {type: 'text/html;charset=utf-8'});
 	return {blob, filename: context.baseName + '.html'};
 }
@@ -1067,7 +968,6 @@ async function _rapierDataImageDestinationsAsync(source, work) {
 }
 
 function _rapierImageDestinations(source, accepts) {
-  // Only a rendered Markdown image consumes a definition; unused definitions stay literal source.
   if (!source.includes('![')) return [];
   const env = {}, tokens = md.parse(source, env), offsets = _rapierLineStartOffsets(source);
   const hrefs = _rapierImageSources(tokens), labels = new Set(), destinations = [], seen = new Set();
@@ -1354,7 +1254,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
     steps.length = 0;
   }
 
-  // One prepared rich paragraph retains original item text. Unsupported shaping keeps native flow.
   function prepare(paragraph) {
     const refuse = () => { prepared.forget(paragraph); return null; };
     if (!/^(P|H[1-6])$/.test(paragraph.tagName) || !paragraph.textContent.trim() || paragraph.textContent.length > 8192 ||
@@ -1371,7 +1270,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
         !preparation.supportsRichStyle(computed, language) || computed.whiteSpace !== 'normal' ||
         computed.transform !== 'none' ||
         ['::before', '::after'].some(pseudo => !['none', 'normal'].includes(view.getComputedStyle(paragraph, pseudo).content)) ||
-        // Lines start at the padding box's top-left: left, right or top inset is refused.
         ['paddingLeft', 'paddingRight', 'paddingTop', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth']
           .some(key => parseFloat(computed[key]) > 0)) return refuse();
     const runs = [], items = [], walker = doc.createTreeWalker(paragraph, 4);
@@ -1417,11 +1315,9 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
       balance: 0};
   }
 
-  // An id survives on the first fragment only.
   function fragmentNode(record, fragment, idsKept) {
     const run = record.runs[fragment.itemIndex], mapped = geometry.mapFragment(run, fragment, {whiteSpace: record.whiteSpace});
     if (!mapped) return null;
-    // A line ends on the white space it broke at. A chip, a link or a highlight must not paint that space, so it stands after the shell.
     const kept = run.parents.length ? mapped.text.replace(/[ \t\n\r\f]+$/, '') : mapped.text;
     const split = kept && kept.length < mapped.text.length;
     let child = doc.createTextNode(split ? kept : mapped.text);
@@ -1488,8 +1384,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
     return found;
   }
 
-  // wrap=around reads data-rapier-occupancy, else alpha. Cache key: src, dimensions, layout.wrap, rotate angle.
-  // A turned raster's profile is recomputed here as pictureProfile does, never shipped.
   function profile(image, layout) {
     if (layout.wrap === 'around' && image.dataset?.rapierContour?.endsWith('-box')) return null;
     const src = image.currentSrc || image.getAttribute('src') || '', rotateRad = (layout.rotate || 0) * Math.PI / 180;
@@ -1509,7 +1403,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
     return value;
   }
 
-  // wrap=box reads data-rapier-box-polygon; this page never parses a recipe or bundles Draw. No polygon: whole rectangle.
   function boxProfile(image) {
     const raw = image.getAttribute('data-rapier-box-polygon');
     if (!raw) return null;
@@ -1520,7 +1413,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
     return geometry.polygonProfile(corners);
   }
 
-  // As the live editor (browser.js).
   function syncInlineRotatedPictures(exclude) {
     for (const image of root.querySelectorAll('img[data-rapier-image-layout]')) {
       if (exclude.has(image) || !image.complete || !image.naturalWidth || !image.naturalHeight) continue;
@@ -1529,7 +1421,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
       const width = image.offsetWidth, height = image.offsetHeight;
       if (!(width > 0 && height > 0)) continue;
       const paragraph = image.closest('p');
-      // geometry.imageOnly (layout/model.mjs).
       const alone = !!paragraph && imageOnly(paragraph, image);
       const baseLeft = parseFloat(css(image).marginLeft) || 0;
       const rotated = geometry.rotatedBoundsRad(width, height, layout.rotate * Math.PI / 180);
@@ -1541,8 +1432,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
     }
   }
 
-  // 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);
@@ -1557,17 +1446,13 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
     if (metadata.wrapTextBlock(element)) return 'prose';
     const image = element.tagName === 'P' ? element.querySelector('img') : null;
     if (image && imageOnly(element, image)) return 'picture';
-    // An empty paragraph is transparent to the owner search, as in the editor.
     if (element.tagName === 'P' && !element.textContent.trim() && !image) return 'metadata';
     return null;
   }
 
-  // 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) {
-    // 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);
@@ -1603,8 +1488,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
     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"]. 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));
@@ -1621,12 +1504,11 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
       const shape = shapes[side];
       if (!shape) continue;
       const float = doc.createElement('span');
+      float.className = 'rapier-flow-float';
       float.setAttribute('aria-hidden', 'true');
       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]);
     }
-    // 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;
@@ -1644,7 +1526,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
       }
       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); }
@@ -1670,7 +1551,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
       if (!root.isConnected || printing || view.matchMedia?.('print').matches) return;
       const children = [...root.children].filter(element => !element.hasAttribute('data-rapier-html-preview'));
       if (children.length > 8192) return;
-      // behind/front collapse and place like around/box but are never obstacles.
       const outOfFlow = value => value?.wrap === 'behind' || value?.wrap === 'front';
       const origin = box(root).top, obstacles = [], anchors = new Map(), wrapped = new Set(), placed = [], positionedImages = new Set();
       for (const element of children) {
@@ -1688,7 +1568,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
         style(element, {position: 'relative', height: '0', 'min-height': '0', 'margin-top': '0', 'margin-bottom': '0', 'padding-top': '0', 'padding-bottom': '0', 'line-height': '0'});
         style(image, {position: 'absolute', margin: '0'});
       }
-      // As the live editor.
       syncInlineRotatedPictures(positionedImages);
       for (const element of children) {
         if (wrapped.has(element)) continue;
@@ -1698,7 +1577,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
         const width = bounds.width - inset - (parseFloat(computed.paddingRight) || 0) - (parseFloat(computed.borderRightWidth) || 0);
 
         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;
           const unrotated = geometry.imageBox(width, image.naturalWidth, image.naturalHeight, layout, imageWidth, lines);
           if (!unrotated) { restore(); return; }
@@ -1707,7 +1585,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
             const line = parseFloat(computed.lineHeight) || (parseFloat(computed.fontSize) || 16) * 1.6;
             unrotated.height = metadata.objectHeight(unrotated.width, Number(image.dataset.rapierNaturalHeight) || box(image).height, attrs, line);
           }
-          // rasterReserved (layout/model.mjs).
           const rasterRad = (layout.rotate || 0) * Math.PI / 180;
           const fit = geometry.rasterReserved(width, unrotated, rasterRad);
           if (!fit) { restore(); return; }
@@ -1717,10 +1594,8 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
           const topInset = (parseFloat(computed.paddingTop) || 0) + (parseFloat(computed.borderTopWidth) || 0);
           const height = Math.max(0, bounds.height - topInset - (parseFloat(computed.paddingBottom) || 0) - (parseFloat(computed.borderBottomWidth) || 0));
           let y = bounds.top - origin + topInset + geometry.linesTop(layout, lines) + Math.min(layout.y || 0, height / em) * em;
-          // 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)
@@ -1737,7 +1612,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
           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))) {
-            // 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);
           }
@@ -1748,7 +1622,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
         style(image, {position: 'absolute', left: pixels((visualLeft ?? left) - anchor.left), top: pixels((visualTop ?? y) - (anchor.top - origin)),
           width: pixels(visualWidth ?? rectangle.width), height: pixels(visualHeight ?? rectangle.height), 'max-width': 'none', margin: '0',
           transform: rotateDeg ? `rotate(${rotateDeg}deg)` : 'none', 'transform-origin': '50% 50%',
-          // As the live editor.
           ...(wrap === 'behind' ? {'z-index': '-1'} : {})});
       }
       if (obstacles.length) {
@@ -1807,7 +1680,6 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
 
 function _rapierArtifactLayoutScript(root, nonce = '', {pictures = true} = {}) {
   const dependencies = globalThis.RapierArtifactLayoutDependencies;
-  // Every wrap value earns the reflow script, and an inline turned raster (keyed off data-rapier-image-layout).
   const layoutOf = element => globalThis.RapierMarkdownLayout.parseLayoutAttribute(element.getAttribute('data-md-layout'));
   const pictureLayoutOf = image => globalThis.RapierMarkdownLayout.parseLayoutAttribute(image.getAttribute('data-rapier-image-layout'));
   const wrapping = pictures && ([...root.querySelectorAll('p[data-md-layout]')].some(element => ['around', 'box', 'behind', 'front'].includes(layoutOf(element)?.wrap)) ||
@@ -1843,8 +1715,6 @@ function _rapierArtifactTypographyScript(root) {
   return '(() => {\nconst typography = modules["layout/typography.mjs"].createTypography();\n' +
     (pictures ? 'const capitals = (' + createPrintCapitals.toString() + ')((' + createLineMeasurer.toString() + ')(),(' + linesHeight.toString() + '),(' + followingPrintProse.toString() + '));\n' : '') +
     'const root = document.querySelector("main.rapier-page"); const printMedia = matchMedia("print"); let frame = 0, width = -1, ready = null, printing = printMedia.matches;\n' +
-    // beforeprint can still expose the screen viewport, not the selected paper's content width.
-    // Only an authored paper width supplies a fixed target; automatic paper keeps native wrapping.
     'const apply = () => { cancelAnimationFrame(frame); frame = 0; ' + (pictures ? 'if (printing) capitals.apply(root); else capitals.clear(root); ' : '') + 'if (printing && !(parseFloat(getComputedStyle(root).getPropertyValue("--rapier-print-width")) > 0)) { typography.clear(root); ready?.(); ready = null; return; } if (typography.apply(root, {all:printing}).pending) schedule(); else { ready?.(); ready = null; } };\n' +
     'const schedule = () => { if (!frame) frame = requestAnimationFrame(apply); };\n' +
     'globalThis.__RAPIER_EXPORT_READY__ = Promise.all([document.fonts?.ready, ...Array.from(root.querySelectorAll("img"), image => image.decode?.().catch(() => {}))]).then(() => new Promise(resolve => { ready = resolve; schedule(); }));\n' +