rapier-markdown-kit 1.1.102 → 1.2.3

package/dist/kit/render.mjs

@@ -1,11 +1,10 @@
 // SPDX-License-Identifier: MIT
-import {htmlImageRecord, mountHtmlBlocks} from '../spec/html-blocks.mjs';
+import {htmlImageRecord, htmlRuntimeSource} from '../spec/html-blocks.mjs';
 import {finish, finishAsync, cloneTree, cleanTree, serializeTree, encodeUtf8Steps, pause} from './render-work.mjs';
-import {formatFontOpen, fontFamilyCss, FONT_CLOSE} from '../spec/md-marks.mjs';
+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 {createTypography} from '../layout/typography.mjs';
 import {createLineMeasurer, linesHeight} from '../layout/model.mjs';
 import {markPrintCapitals, createPrintCapitals, followingPrintProse} from './print-capitals.mjs';
 import {freezePublishedInk} from './render-ink.mjs';
@@ -69,7 +68,7 @@ export function positionNativeDiagram(drawing) {
 }
 
 function createRenderer(runtime) {
-  const {RAPIER_COLOR_CLOSE, RapierLedgerCarried, RapierPageReturnAddress, RapierTextCodec, _rapierArtifactHighlight, _rapierArtifactPreference, _rapierArtifactStyles, _rapierBlobDataUrl, _rapierBuildInterchangeContext, _rapierDocumentNameIsAdmissible, _rapierLedgerParts, _rapierDrawReadSVGRecipe, _rapierDrawShapeProfileFor, _rapierExportFontCss, _rapierFillDiagram, _rapierFinalizeExportCode, _rapierFormatColorOpen, _rapierLanguageClass, _rapierLineStartOffsets, _rapierMarkdownEnvironment, _rapierPortableHtml, _rapierPrepareInterchangeContext, _rapierProjectPortableRoot, _rapierProviders, _rapierSourceCharEscaped, _rapierSourceLineSpan, crypto, document, escapeRapierHtmlText, globalThis, rapierConfirm, sanitizeRapierHtml} = 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;
   async function render(source, options = {}) {
     if (typeof source !== 'string') throw new TypeError('Document source must be a string');
@@ -158,14 +157,16 @@ async function _rapierBuildArtifact(options, providedContext) {
 	styledRoot.setAttribute('lang', language);
 	if (completePage && typeof _rapierFinalizeExportCode === 'function') await _rapierFinalizeExportCode(styledRoot);
 	// _rapierProjectStyledRoot already returns the sanitized projection.
-	// Print never emits the layout reflow script (see below), so a print artifact has no use for
-	// this annotation -- skip it there rather than pay the cost for numbers nothing will read.
+	// 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);
+	}
 	if (completePage && !opts.print) {
-		if (work) {
-			await finishAsync(_rapierSharedPageLayoutSteps(styledRoot), work);
-			await finishAsync(_rapierShareCapLongCodeBlocksSteps(styledRoot), work);
-		} else { _rapierSharedPageLayout(styledRoot); _rapierShareCapLongCodeBlocks(styledRoot); }
+		if (work) await finishAsync(_rapierShareCapLongCodeBlocksSteps(styledRoot), work);
+		else _rapierShareCapLongCodeBlocks(styledRoot);
 	}
 	if (typeof opts.afterRoot === 'function') await opts.afterRoot(styledRoot);
 	markPrintCapitals(styledRoot);
@@ -173,6 +174,7 @@ async function _rapierBuildArtifact(options, providedContext) {
 		? 'light'
 		: _rapierArtifactPreference('theme', ['system', 'light', 'dark']);
 	const highlights = _rapierArtifactPreference('highlights', ['accent', 'standard']);
+	const invertImageAlpha = _rapierArtifactPreference('invertImageAlpha', ['true', 'false']) !== 'false';
 	const versionMeta = document.querySelector('meta[name="rapier-version"]');
 	const version = versionMeta && versionMeta.content ? versionMeta.content.trim() : '0.0.0';
 	const bodyClass = theme === 'light' ? 'light' : '';
@@ -185,8 +187,6 @@ async function _rapierBuildArtifact(options, providedContext) {
 	// 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 zenFontCss = opts.print && styledRoot.querySelector('svg[aria-roledescription="zenuml"]')
-		? (_rapierProviders?.mermaid?.exportFontCss?.() || '') : '';
 	const willFont = opts.print && opts.willFont ? opts.willFont : null;
 	const settingsCss = _rapierDocumentSettingsCss(settings);
 	const refined = styledRoot.querySelector('p[data-md-hyphens="auto"],p[data-md-lines],p[data-md-caps="small"],p[data-md-hanging="on"],img[data-rapier-print-lines]');
@@ -225,12 +225,11 @@ async function _rapierBuildArtifact(options, providedContext) {
 	// 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.print && opts.scripts !== false ? _rapierArtifactLayoutScript(styledRoot, nonce) : '';
+	const layoutScript = opts.scripts !== false ? _rapierArtifactLayoutScript(styledRoot, nonce, {pictures:!opts.print}) : '';
 	const inkScript = !opts.print && opts.scripts !== false ? _rapierArtifactInkScript(styledRoot, nonce) : '';
-	const typographyScript = opts.scripts !== false ? _rapierArtifactTypographyScript(styledRoot, nonce) : '';
-	const htmlScript = opts.scripts !== false && styledRoot.querySelector('[data-rapier-html]') ? '<script nonce="' + nonce + '">(' + mountHtmlBlocks.toString().replace(/<\/script/gi, '<\\/script') + ')(document);</script>' : '';
+	const htmlScript = !opts.print && opts.scripts !== false && styledRoot.querySelector('[data-rapier-html],[data-rapier-animation]') ? '<script nonce="' + nonce + '">' + htmlRuntimeSource().replace(/<\/script/gi, '<\\/script') + '</script>' : '';
 	const page = '<!DOCTYPE html>\n'
-		+ '<html lang="' + escapeRapierHtmlText(language) + '" data-rapier-theme="' + theme + '" data-highlights="' + highlights + '">\n'
+		+ '<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
@@ -238,14 +237,14 @@ async function _rapierBuildArtifact(options, providedContext) {
 		// 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 || typographyScript || htmlScript ? nonce : '', includeFonts || !!fontCss || !!factoryFontCss) + '">\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'
 		+ '<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 + '"' + (settings?.space ? ' data-md-space' : '') + '>'
-		+ bodyHtml + '</main>' + carrier + layoutScript + inkScript + typographyScript + htmlScript + '</body>\n</html>';
+		+ '<body class="' + bodyClass + '"><main class="' + docClass + '" data-md-theme="' + theme + '">'
+		+ bodyHtml + '</main>' + carrier + layoutScript + inkScript + htmlScript + '</body>\n</html>';
 
 	return {
 		html: page,
@@ -302,49 +301,6 @@ function* _rapierProjectStyledRootSteps(semanticRoot, options) {
 			if (lang) code.classList.add('language-' + String(lang).replace(/[^a-z0-9_-]/gi, ''));
 		}
 	} else {
-		if (root.hasAttribute('data-md-space')) {
-			// One raw HTML token may have several siblings. Its authored heights stay inside one line-sized box.
-			for (let element = root.firstElementChild; element;) {
-				const group = element.getAttribute('data-md-html-block');
-				if (group === null) { element = element.nextElementSibling; continue; }
-				let first = element;
-				// Sanitizing a container or repairing a table can leave its text before the first surviving tag.
-				while (first.previousSibling && first.previousSibling.nodeType !== 1) { first = first.previousSibling; yield; }
-				const wrap = document.createElement('div');
-				wrap.className = 'md-space-block';
-				root.insertBefore(wrap, first);
-				let node = first;
-				while (node && (node.nodeType !== 1 || node.getAttribute('data-md-html-block') === group)) {
-					const next = node.nextSibling;
-					wrap.appendChild(node);
-					node = next;
-					yield;
-				}
-				element = wrap.nextElementSibling;
-			}
-			// A removed raw container can leave only text. Reserve that surviving content in this projection.
-			for (let first = root.firstChild; first;) {
-				if (first.nodeType === 1) { first = first.nextSibling; continue; }
-				let end = first, hasText = false;
-				while (end && end.nodeType !== 1) {
-					if (end.nodeType === 3 && end.nodeValue.trim()) hasText = true;
-					end = end.nextSibling;
-					yield;
-				}
-				if (hasText) {
-					const wrap = document.createElement('div');
-					wrap.className = 'md-space-block';
-					root.insertBefore(wrap, first);
-					for (let node = first; node !== end;) {
-						const next = node.nextSibling;
-						wrap.appendChild(node);
-						node = next;
-						yield;
-					}
-				}
-				first = end;
-			}
-		}
 		for (const code of root.querySelectorAll('pre > code')) { yield;
 			if (code.parentElement?.classList.contains('diagram-source') &&
 					code.closest('.diagram-block')?.getAttribute('data-diagram-state') === 'ready') continue;
@@ -466,11 +422,15 @@ function _rapierPaintCode(el, html) {
 
 function _rapierPrefixPortableAnchors(root, baseName) { return finish(_rapierPrefixPortableAnchorsSteps(root, baseName)); }
 
-function* _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';
-	const prefix = 'rapier-' + slug + '-';
+	return 'rapier-' + 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 => {
@@ -487,11 +447,10 @@ function* _rapierPrefixPortableAnchorsSteps(root, baseName) {
 	for (const element of root.querySelectorAll('[id]')) { yield;
 		const oldId = element.id;
 		if (!oldId) continue;
-		const base = oldId.replace(/[^a-z0-9_-]+/gi, '-')
-			.replace(/^-+|-+$/g, '') || 'anchor';
-		let nextId = prefix + base;
+		const first = _rapierPortableAnchorId(baseName, oldId);
+		let nextId = first;
 		let suffix = 2;
-		while (used.has(nextId)) nextId = prefix + base + '-' + suffix++;
+		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.
@@ -694,13 +653,14 @@ function _rapierSharedResolve(text, ids, images, definitions) {
 	let broken = false;
 	const src = value => {
 		const found = images.get(value);
-		if (typeof found !== 'string' || !/^data:image\/(?:png|jpeg|webp|svg\+xml|jxl);base64,[A-Za-z0-9+/]+={0,2}$/i.test(found)) { broken = true; return null; }
+		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');
-	const definition = new RegExp('(^ {0,3}\\[((?:\\\\.|[^\\]\\\\])+)\\]:[ \\t]*(?:(?:\\r\\n|\\r|\\n)[ \\t]*)?(?:&lt;)?)#' + id + '(?=>?[ \\t]*$|>?[ \\t]+["\'(])', 'gm');
+	// A definition may sit in a quote or a list item: its line starts with that container's markers.
+	const definition = new RegExp('(^[ \\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) => {
 		if (!definitions.has(md.utils.normalizeReference(_rapierSharedDecode(label)))) return match;
@@ -878,7 +838,7 @@ function* _rapierSharedPageLayoutSteps(root) {
 		// `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) {
+		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 + '")');
@@ -906,16 +866,12 @@ 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';
-		const x = layout.x ?? 50, naturalWidth = Number(image.getAttribute('width')) || 0;
-		if (layout.width != null) {
-			image.style.width = layout.width + '%';
-			image.style.left = (x - layout.width / 2) + '%';
-		} else if (naturalWidth > 0) {
-			image.style.width = naturalWidth + 'px';
-			image.style.left = 'calc(' + x + '% - ' + (naturalWidth / 2) + 'px)';
-		} else {
-			image.style.left = x + '%';
-		}
+		// 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';
+		image.style.left = x == null ? '0' : layout.width != null ? (x - layout.width / 2) + '%'
+			: naturalWidth > 0 ? 'calc(' + x + '% - ' + (naturalWidth / 2) + 'px)' : x + '%';
 		image.style.position = 'absolute';
 		image.style.top = (layout.y || 0) + 'em';
 		image.style.margin = '0';
@@ -1381,17 +1337,10 @@ function _rapierImageOpenRunsList(tokens) {
 		const stack = [];
 		for (const token of block.children) {
 			if (token.type === 'image') { list.push(stack.slice()); continue; }
-			if (token.type === 'rapier_color_open') {
-				const hex = token.attrGet('data-md-color');
-				stack.push({open: _rapierFormatColorOpen(hex), close: RAPIER_COLOR_CLOSE});
-				continue;
+			if (token.meta?.typography && token.nesting === 1) {
+				stack.push({open: token.meta.typography.open, close: token.meta.typography.close}); continue;
 			}
-			if (token.type === 'rapier_color_close') { stack.pop(); continue; }
-			if (token.type === 'rapier_font_open') {
-				stack.push({open: token.meta?.mdFont?.source || formatFontOpen(token.attrGet('data-md-font')), close: FONT_CLOSE});
-				continue;
-			}
-			if (token.type === 'rapier_font_close') { stack.pop(); continue; }
+			if (token.meta?.typography && token.nesting === -1) { stack.pop(); continue; }
 			if (token.type === 'strong_open' || token.type === 'em_open' || token.type === 's_open') {
 				stack.push({open: token.markup, close: token.markup});
 				continue;
@@ -1407,10 +1356,11 @@ function _rapierArtifactFactoryModules(dependencies, group) {
   return paths.map(path => 'modules[' + JSON.stringify(path) + '] = (' + Function.prototype.toString.call(dependencies.factories[path]) + ')();').join('\n');
 }
 
-function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
-  if (!root || !metadata || !geometry || !pretext) return null;
+function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
+  if (!root || !metadata || !geometry || !preparation) return null;
   const doc = root.ownerDocument, view = doc.defaultView;
   const styles = new Map(), originals = new Map(), spacers = [], floats = [], steps = [], profiles = new WeakMap();
+  const prepared = preparation.createPreparationScope(doc);
   const css = node => view.getComputedStyle(node);
   const box = node => node.getBoundingClientRect();
   const pixels = value => (Number.isFinite(value) ? Math.round(value * 100) / 100 : 0) + 'px';
@@ -1437,48 +1387,72 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
     steps.length = 0;
   }
 
-  // Plain inline text uses Pretext. Complex blocks keep their original controls through floats.
+  // 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 ||
-        paragraph.querySelector('img,svg,math,br,input,button,iframe,canvas,.math-rendered')) return null;
+        [...paragraph.querySelectorAll('[id]')].some(element => /^[\s\u00ad\u200b]*$/u.test(element.textContent)) ||
+        paragraph.querySelector('img,svg,math,br,input,button,iframe,canvas,.math-rendered')) return refuse();
     const computed = css(paragraph);
-    if (computed.textAlign === 'justify' || computed.writingMode !== 'horizontal-tb' ||
-        computed.textTransform !== 'none' || computed.whiteSpace !== 'normal' || computed.transform !== 'none' ||
+    const language = paragraph.closest('[lang]')?.getAttribute('lang') || '';
+    for (let parent = paragraph; parent; parent = parent.parentElement) {
+      const inherited = css(parent);
+      if (parent.style.textWrapStyle === 'pretty' || inherited.transform !== 'none' ||
+          !['1', 'normal'].includes(inherited.zoom)) return refuse();
+    }
+    if (computed.textAlign === 'justify' || computed.textWrapStyle === 'balance' ||
+        !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 null;
+          .some(key => parseFloat(computed[key]) > 0)) return refuse();
     const runs = [], items = [], walker = doc.createTreeWalker(paragraph, 4);
     for (let node; (node = walker.nextNode());) {
-      if (runs.length === 192) return null;
+      if (runs.length === 192) return refuse();
       const parents = [];
       for (let parent = node.parentElement; parent !== paragraph; parent = parent.parentElement) {
-        if (!parent || !/^(A|SPAN|EM|I|STRONG|B|DEL|S|MARK|CODE|U|INS|ABBR|SUP|SUB)$/.test(parent.tagName)) return null;
+        if (!parent || !/^(A|SPAN|EM|I|STRONG|B|DEL|S|MARK|CODE|KBD|SAMP|U|INS|ABBR|SUP|SUB)$/.test(parent.tagName) ||
+            parent.hidden || parent.getAttribute('aria-hidden') === 'true' ||
+            parent.style.textWrapStyle === 'pretty' ||
+            parent.hasAttribute('lang') && parent.getAttribute('lang').toLowerCase() !== (language || '').toLowerCase()) return refuse();
+        const parentStyle = css(parent);
+        if (!preparation.supportsRichStyle(parentStyle, language) || parentStyle.display !== 'inline' ||
+            parentStyle.cssFloat !== 'none' || !['static', 'relative'].includes(parentStyle.position) ||
+            parentStyle.transform !== 'none' || !['1', 'normal'].includes(parentStyle.zoom) ||
+            ['::before', '::after'].some(pseudo => !['none', 'normal'].includes(view.getComputedStyle(parent, pseudo).content))) return refuse();
+        if (!/^(CODE|KBD|SAMP)$/.test(parent.tagName) &&
+            ['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth', 'marginLeft', 'marginRight']
+              .some(key => Math.abs(parseFloat(parentStyle[key]) || 0) > .01)) return refuse();
         parents.unshift(parent);
       }
       const computedRun = css(node.parentElement);
-      if (computedRun.textTransform !== 'none' || computedRun.writingMode !== 'horizontal-tb') return null;
+      if (!preparation.supportsRichStyle(computedRun, language) ||
+          computedRun.whiteSpace !== computed.whiteSpace && computedRun.whiteSpace !== 'nowrap') return refuse();
       const font = `${computedRun.fontStyle} ${computedRun.fontWeight} ${computedRun.fontSize} ${computedRun.fontFamily}`;
       const letterSpacing = parseFloat(computedRun.letterSpacing) || 0;
-      const prepared = geometry.prepareRun(node.data, font, letterSpacing);
-      if (!prepared) return null;
-      // A chip's box is repeated by each piece of it, and it breaks as the browser breaks inline code, as the editor's projection does.
-      const boxed = parents.some(parent => parent.tagName === 'CODE');
+      const boxed = parents.some(parent => /^(CODE|KBD|SAMP)$/.test(parent.tagName));
+      if (boxed && (!/^(CODE|KBD|SAMP)$/.test(node.parentElement.tagName) || node.parentElement.childNodes.length !== 1)) return refuse();
       const extraWidth = boxed ? ['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth', 'marginLeft', 'marginRight']
         .reduce((width, key) => width + (parseFloat(computedRun[key]) || 0), 0) : 0;
-      runs.push({parents, prepared, directions: parents.map(parent => parent.getAttribute('dir') === 'auto' ? css(parent).direction : null)});
-      items.push({text: prepared.raw, font, letterSpacing, break: 'normal', extraWidth});
+      runs.push({parents, raw: node.data, font, letterSpacing,
+        directions: parents.map(parent => parent.getAttribute('dir') === 'auto' ? css(parent).direction : null)});
+      items.push({text: node.data, font, letterSpacing,
+        break: computedRun.whiteSpace === 'nowrap' || parents.some(parent => parent.hasAttribute('data-rapier-source')) ? 'never' : 'normal', extraWidth});
     }
-    if (!runs.length) return null;
+    if (!runs.length) return refuse();
+    const options = {whiteSpace: computed.whiteSpace, wordBreak: computed.wordBreak, language};
+    const flow = prepared.prepare(paragraph, items, options);
+    if (!flow) return refuse();
     const fontSize = parseFloat(computed.fontSize) || 16;
-    return {paragraph, runs, flow: pretext.prepareRichInline(items), direction: computed.direction,
+    return {paragraph, runs, flow, whiteSpace: computed.whiteSpace, direction: computed.direction,
       align: computed.textAlign, fontSize, lineHeight: parseFloat(computed.lineHeight) || fontSize * 1.65,
-      balance: computed.textWrapStyle === 'balance' ? fontSize : 0};
+      balance: 0};
   }
 
   // An id survives on the first fragment only.
-  const idsKept = new WeakSet();
-  function fragmentNode(record, fragment) {
-    const run = record.runs[fragment.itemIndex], mapped = geometry.mapFragment(run?.prepared, fragment);
+  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;
@@ -1497,10 +1471,12 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
   }
 
   function project(record, width, top, obstacles) {
+    if (!prepared.current(record.flow)) return false;
     const plan = geometry.flowLines(record.flow, width, top, obstacles, record.lineHeight,
       metadata.wrapColumnFloor(record.fontSize), record.direction, record.balance, record.align);
     if (!plan) return false;
     const output = doc.createDocumentFragment();
+    const idsKept = new Set();
     let previous = null;
     for (const line of plan.lines) {
       const element = doc.createElement('span');
@@ -1508,17 +1484,21 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
       element.style.textAlign = ['left', 'center', 'right', 'start', 'end'].includes(record.align)
         ? record.align : record.direction === 'rtl' ? 'right' : 'left';
       for (const fragment of line.fragments) {
-        const child = fragmentNode(record, fragment);
+        const child = fragmentNode(record, fragment, idsKept);
         if (!child) return false;
         if (hasGap(record, previous, fragment)) {
           const gap = doc.createElement('span');
+          const gapRun = record.runs[fragment.gapItemIndex];
+          if (!gapRun && fragment.gapBefore !== 0) return false;
           gap.style.cssText = 'display:inline-block;width:' + pixels(fragment.gapBefore);
+          if (gapRun) { gap.style.font = gapRun.font; gap.style.letterSpacing = pixels(gapRun.letterSpacing); }
           gap.textContent = ' '; element.append(gap);
         }
         element.append(child); previous = fragment;
       }
       output.append(element);
     }
+    if (!prepared.current(record.flow)) return false;
     originals.set(record.paragraph, [...record.paragraph.childNodes]);
     record.paragraph.replaceChildren(output);
     style(record.paragraph, {position: 'relative', height: pixels(plan.height), 'min-height': '0'});
@@ -1529,10 +1509,11 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
     if (!previous) return false;
     let found = false;
     for (let index = previous.itemIndex; index <= current.itemIndex; index++) {
-      const run = record.runs[index].prepared;
-      const start = index === previous.itemIndex ? geometry.cursorOffset(run, previous.end) : 0;
-      const end = index === current.itemIndex ? geometry.cursorOffset(run, current.start) : run.raw.length;
-      if (start == null || end == null || end < start) return false;
+      const run = record.runs[index];
+      if (!run) return false;
+      const start = index === previous.itemIndex ? previous.sourceEnd : 0;
+      const end = index === current.itemIndex ? current.sourceStart : run.raw.length;
+      if (!Number.isInteger(start) || !Number.isInteger(end) || start < 0 || end < start || end > run.raw.length) return false;
       const gap = run.raw.slice(start, end);
       if (gap && !/^[ \t\n\r\f]+$/.test(gap)) return false;
       found ||= !!gap;
@@ -1543,6 +1524,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
   // 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;
     const cached = profiles.get(image);
     if (cached?.src === src && cached.width === image.naturalWidth && cached.height === image.naturalHeight &&
@@ -1756,8 +1738,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
           if (image.hasAttribute('data-rapier-html')) {
             const attrs = JSON.parse(decodeURIComponent(image.getAttribute('data-rapier-html'))).attrs;
             const line = parseFloat(computed.lineHeight) || (parseFloat(computed.fontSize) || 16) * 1.6;
-            unrotated.height = !attrs.height || attrs.height === 'auto'
-              ? Number(image.dataset.rapierNaturalHeight) || box(image).height : Number(attrs.height) * line;
+            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;
@@ -1823,6 +1804,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
 
   function beforePrint() { printing = true; restore(); }
   function afterPrint() { printing = false; schedule(); }
+  function fontChanged() { prepared.invalidateFonts(); schedule(); }
 
   const observer = typeof view.ResizeObserver === 'function' ? new view.ResizeObserver(() => {
     const width = root.clientWidth;
@@ -1837,13 +1819,13 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
   view.addEventListener('pageshow', schedule);
   view.addEventListener('beforeprint', beforePrint);
   view.addEventListener('afterprint', afterPrint);
-  doc.fonts?.addEventListener?.('loadingdone', schedule);
+  for (const event of ['loading', 'loadingdone', 'loadingerror']) doc.fonts?.addEventListener?.(event, fontChanged);
   Promise.resolve(doc.fonts?.ready).then(schedule, schedule);
   schedule();
-  return Object.freeze({reflow, destroy() {
+  return Object.freeze({reflow, destroy({documentChanged = false} = {}) {
     stopped = true;
     if (scheduled) view.cancelAnimationFrame(scheduled);
-    observer?.disconnect(); restore();
+    observer?.disconnect(); restore(); prepared.retire({documentChanged});
     root.removeEventListener('load', schedule, true);
     root.removeEventListener('error', schedule, true);
     root.removeEventListener('rapier-html-resize', schedule);
@@ -1852,23 +1834,28 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
     view.removeEventListener('pageshow', schedule);
     view.removeEventListener('beforeprint', beforePrint);
     view.removeEventListener('afterprint', afterPrint);
-    doc.fonts?.removeEventListener?.('loadingdone', schedule);
+    for (const event of ['loading', 'loadingdone', 'loadingerror']) doc.fonts?.removeEventListener?.(event, fontChanged);
   }});
 }
 
-function _rapierArtifactLayoutScript(root, nonce = '') {
+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'));
-  if (!dependencies?.factories ||
-      (![...root.querySelectorAll('p[data-md-layout]')].some(element => ['around', 'box', 'behind', 'front'].includes(layoutOf(element)?.wrap)) &&
-       ![...root.querySelectorAll('img[data-rapier-image-layout]')].some(image => pictureLayoutOf(image)?.rotate))) return '';
+  const wrapping = pictures && ([...root.querySelectorAll('p[data-md-layout]')].some(element => ['around', 'box', 'behind', 'front'].includes(layoutOf(element)?.wrap)) ||
+       [...root.querySelectorAll('img[data-rapier-image-layout]')].some(image => pictureLayoutOf(image)?.rotate));
+  const typography = _rapierArtifactTypographyScript(root);
+  if (!wrapping && !typography) return '';
+  if (!dependencies?.factories || typography && !dependencies.factories['layout/typography.mjs'])
+    throw new Error('Offline typography requires the complete retained MIT layout factories');
   const modules = _rapierArtifactFactoryModules(dependencies, 'layout');
-  const script = '/* Rapier export layout: SPDX-License-Identifier: AGPL-3.0-only */\n' +
-    '/* Pretext 0.0.9\n' + dependencies.license + '\n*/\n' +
-    '(() => {\nconst modules = {};\n' + modules + '\n(' + _rapierProjectArtifactLayout.toString() +
-    ')(document.querySelector("main.rapier-page"), modules["spec/md-layout.mjs"], modules["layout/model.mjs"], modules["agent/vendor/pretext/rich-inline.js"]);\n})();';
+  const script = '/* Rapier export layout: SPDX-License-Identifier: MIT */\n' +
+    '/* Pretext bac1774c0f8b7a92e44b9da43b6d5443d55d0d9b (Unreleased)\n' + dependencies.license + '\n*/\n' +
+    '(() => {\nconst modules = Object.create(null);\n' + modules +
+    (wrapping ? '\n(' + _rapierProjectArtifactLayout.toString() +
+    ')(document.querySelector("main.rapier-page"), modules["spec/md-layout.mjs"], modules["layout/model.mjs"], modules["layout/preparation.mjs"]);\n' : '') +
+    typography + '\n})();';
 
   return '<script' + (nonce ? ' nonce="' + nonce + '"' : '') + '>\n' + script.replace(/<\/script/gi, '<\\/script') + '\n</script>';
 }
@@ -1883,23 +1870,29 @@ function _rapierArtifactInkScript(root, nonce = '') {
   return '<script' + (nonce ? ' nonce="' + nonce + '"' : '') + '>\n' + script.replace(/<\/script/gi, '<\\/script') + '\n</script>';
 }
 
-function _rapierArtifactTypographyScript(root, nonce = '') {
+function _rapierArtifactTypographyScript(root) {
   const pictures = root.querySelector('img[data-rapier-print-lines]');
   if (!pictures && !root.querySelector('p[data-md-hyphens="auto"],p[data-md-lines],p[data-md-caps="small"],p[data-md-hanging="on"]')) return '';
-  const script = '(() => {\nconst typography = (' + createTypography.toString() + ')();\n' +
+  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"); let frame = 0, width = -1, printing = matchMedia("print").matches;\n' +
-    'const apply = () => { frame = 0; ' + (pictures ? 'if (printing) capitals.apply(root); else capitals.clear(root); ' : '') + 'typography.apply(root, {all:true}); };\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 => requestAnimationFrame(() => { apply(); resolve(); })));\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' +
+    'printMedia.addEventListener("change", () => { printing = printMedia.matches; schedule(); });\n' +
     'addEventListener("resize", schedule); addEventListener("beforeprint", () => { printing = true; apply(); });\n' +
-    'addEventListener("afterprint", () => { printing = false; ' + (pictures ? 'capitals.clear(root); ' : '') + 'schedule(); });\n' +
+    'addEventListener("scroll", schedule, {passive:true, capture:true});\n' +
+    'for (const event of ["copy","cut"]) addEventListener(event, () => { if (typography.clearSelection(root)) schedule(); }, true);\n' +
+    'addEventListener("afterprint", () => { printing = printMedia.matches; ' + (pictures ? 'capitals.clear(root); ' : '') + 'schedule(); });\n' +
     'root.addEventListener("load", schedule, true);\n' +
+    'for (const event of ["loading","loadingdone","loadingerror"]) document.fonts?.addEventListener(event, () => { typography.invalidateFonts(document); schedule(); });\n' +
+    'addEventListener("pagehide", () => { cancelAnimationFrame(frame); frame = 0; typography.retire(root); }); addEventListener("pageshow", schedule);\n' +
     'if (typeof ResizeObserver === "function") new ResizeObserver(() => { const next = root.getBoundingClientRect().width; if (next !== width) { width = next; schedule(); } }).observe(root);\n' +
     '})();';
-  return '<script' + (nonce ? ' nonce="' + nonce + '"' : '') + '>\n' + script.replace(/<\/script/gi, '<\\/script') + '\n</script>';
 }
 
-  return {_rapierDataImageDestinationsAsync, _rapierSharedSourceFormsAsync, _rapierPrefixPortableAnchorsSteps, _rapierProjectStyledRootAsync, _rapierBuildArtifact, _rapierBuildPublishedPage, _rapierProjectStyledRoot, _rapierDocxRenderStyles, _rapierPaintCode, _rapierPrefixPortableAnchors, _rapierDocumentSettingsOf, _rapierDocumentSettingsCss, _rapierExportedPageCsp, _rapierArtifactNonce, _rapierAnnotateExportBoxPolygons, _rapierSharedSourceHash, _rapierSharedSourceForms, _rapierSharedSourceCarrier, _rapierSharedResolve, _rapierReadSharedDocument, _rapierSharedPageFallbackCss, _rapierShareWrapKind, _rapierSharePictureParagraph, _rapierSharedPageLayout, _rapierShareCapLongCodeBlocks, _rapierRequireOfflinePageImages, _rapierCssValueUrls, _rapierBuildSharedPage, _rapierImageSources, _rapierImageDestinations, _rapierScanMarkdownImages, _rapierParseMarkdownImageDestination, _rapierImageOpenRunsList, _rapierArtifactFactoryModules, _rapierProjectArtifactLayout, _rapierArtifactLayoutScript, _rapierArtifactInkScript , render};
+  return {_rapierDataImageDestinationsAsync, _rapierSharedSourceFormsAsync, _rapierPrefixPortableAnchorsSteps, _rapierPortableAnchorId, _rapierProjectStyledRootAsync, _rapierBuildArtifact, _rapierBuildPublishedPage, _rapierProjectStyledRoot, _rapierDocxRenderStyles, _rapierPaintCode, _rapierPrefixPortableAnchors, _rapierDocumentSettingsOf, _rapierDocumentSettingsCss, _rapierExportedPageCsp, _rapierArtifactNonce, _rapierAnnotateExportBoxPolygons, _rapierSharedSourceHash, _rapierSharedSourceForms, _rapierSharedSourceCarrier, _rapierSharedResolve, _rapierReadSharedDocument, _rapierSharedPageFallbackCss, _rapierShareWrapKind, _rapierSharePictureParagraph, _rapierSharedPageLayout, _rapierShareCapLongCodeBlocks, _rapierRequireOfflinePageImages, _rapierCssValueUrls, _rapierBuildSharedPage, _rapierImageSources, _rapierImageDestinations, _rapierScanMarkdownImages, _rapierParseMarkdownImageDestination, _rapierImageOpenRunsList, _rapierArtifactFactoryModules, _rapierProjectArtifactLayout, _rapierArtifactLayoutScript, _rapierArtifactInkScript , render};
 }
 export {createRenderer};

package/dist/kit/typography.mjs

@@ -0,0 +1,2 @@
+// SPDX-License-Identifier: MIT
+export {createTypography} from '../layout/typography.mjs';