rapier-markdown-kit 1.1.101 → 1.1.104

package/dist/kit/render-sanitize.mjs

@@ -1,4 +1,5 @@
 // SPDX-License-Identifier: MIT
+import {typography} from '../spec/md-marks.mjs';
 const RAPIER_SANITIZE_FORBID_TAGS = Object.freeze(['form', 'style', 'dialog', 'template', 'iframe']);
 const RAPIER_SANITIZE_FORBID_ATTR = Object.freeze(['action', 'formaction', 'form', 'for']);
 // The document profiles use one allowlist in a browser and in an inert server parser.
@@ -166,7 +167,7 @@ function createInertHtmlSanitizer({parseFragment, serialize, sanitizeHtml, safeR
 							if (!_rapierImageDataAttributeAllowed(tag, key, compact, safeRasterDataUrl)) continue;
 						} else if (!uri.test(compact)) continue;
 					}
-					attribs[name] = value;
+					attribs[name] = selected === 'raw' && tag === 'span' && key === 'style' ? typography.style(typography.parseStyle(value)) : value;
 				}
 				if ((tag === 'a' || tag === 'area') && attribs.target?.trim().toLowerCase() === '_blank') attribs.rel = 'noopener noreferrer';
 				return {tagName, attribs};
@@ -323,6 +324,11 @@ function _rapierInstallSanitizeHooks() {
 	});
 	DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
 		const value = String(data.attrValue == null ? '' : data.attrValue);
+		if (_rapierSanitizeRuntime.context === 'raw' && node?.nodeName === 'SPAN' && data.attrName?.toLowerCase() === 'style') {
+			data.attrValue = typography.style(typography.parseStyle(value));
+			data.keepAttr = !!data.attrValue;
+			return;
+		}
 		// A document's own HTML never carries an id the chrome owns, remote content allowed or not: the
 		// allow is about what the page fetches, and this rule is about what the page's chrome finds.
 		if (String(data.attrName || '').toLowerCase() === 'id' && _rapierSanitizeRuntime.context === 'raw' && _rapierChromeOwnsId(value)) { data.keepAttr = false; return; }
@@ -371,6 +377,16 @@ function _rapierInstallSanitizeHooks() {
 }
 
 function sanitizeRapierHtml(value, context = 'render') {
+	return sanitize(value, context, false);
+}
+
+// The same parser, profile and hooks admit both results. A private renderer can
+// adopt the sanitized nodes without serializing and parsing them again.
+function sanitizeRapierFragment(value, context = 'render') {
+	return sanitize(value, context, true);
+}
+
+function sanitize(value, context, fragment) {
 	// 'export' is the render profile under the export hooks; 'raw' is a document's own HTML (initMarkdownIt, html_block):
 	// the render profile without data-* attributes, which Rapier's delegated handlers read as their own controls, and
 	// (the hook) without an id the chrome owns. 'source' is Markdown source HTML, written and never shown: the render
@@ -389,6 +405,8 @@ function sanitizeRapierHtml(value, context = 'render') {
 		DOMPurify.addHook('uponSanitizeAttribute', diagramLabelAttribute);
 		DOMPurify.addHook('afterSanitizeAttributes', diagramLabelContained);
 	}
+	if (fragment) options = {...options, RETURN_DOM_FRAGMENT: true};
+	const previous = _rapierSanitizeRuntime.context;
 	_rapierSanitizeRuntime.context = selected;
 	try {
 		return DOMPurify.sanitize(value == null ? '' : String(value), options);
@@ -398,7 +416,7 @@ function sanitizeRapierHtml(value, context = 'render') {
 			DOMPurify.removeHook('uponSanitizeAttribute', diagramLabelAttribute);
 			DOMPurify.removeHook('afterSanitizeAttributes', diagramLabelContained);
 		}
-		_rapierSanitizeRuntime.context = 'render';
+		_rapierSanitizeRuntime.context = previous;
 	}
 }
 
@@ -472,7 +490,7 @@ function _rapierStyleWithoutRemoteUrls(value) {
 	if (!raw) return raw;
 	const declaration = _rapierCssDeclaration();
 	declaration.cssText = raw;
-	if (!declaration.length) return '';
+	if (!declaration.length) return typography.style(typography.parseStyle(raw));
 	return _rapierDropRemoteDeclarations(declaration) ? declaration.cssText : raw;
 }
 
@@ -510,6 +528,8 @@ function _rapierVerifyRasterBytes(bytes, mime) {
 	return false;
 }
 
-  return {_rapierVerifyRasterBytes, _rapierInstallSanitizeHooks, sanitizeRapierHtml, diagramLabelStyle, escapeRapierHtmlText, _rapierChromeOwnsId, _rapierSafeRasterDataUrl, _rapierCssPresentationIsRemote, _rapierRemoteSubresourceOrigin, _rapierStyleWithoutRemoteUrls, _rapierStylesheetWithoutRemoteUrls, _rapierDropRemoteRules};
+  return {_rapierVerifyRasterBytes, _rapierInstallSanitizeHooks, sanitizeRapierHtml,
+    sanitizeRapierFragment: typeof DOMPurify?.sanitize === 'function' ? sanitizeRapierFragment : undefined,
+    diagramLabelStyle, escapeRapierHtmlText, _rapierChromeOwnsId, _rapierSafeRasterDataUrl, _rapierCssPresentationIsRemote, _rapierRemoteSubresourceOrigin, _rapierStyleWithoutRemoteUrls, _rapierStylesheetWithoutRemoteUrls, _rapierDropRemoteRules};
 }
 export {RAPIER_SANITIZE_FORBID_TAGS as forbidTags, RAPIER_SANITIZE_FORBID_ATTR as forbidAttributes, createRenderSanitizer, createInertHtmlSanitizer, RAPIER_SANITIZE_OPTIONS as options, prepareMathSource};

package/dist/kit/render-work.mjs

@@ -7,6 +7,7 @@ export function finish(iterator) {
 }
 
 export function check(work) {
+	work?.check?.();
   if (work?.signal?.aborted) throw Object.assign(new Error('The operation was cancelled.'), {name: 'AbortError', code: 'cancelled'});
 }
 
@@ -72,16 +73,18 @@ export function htmlBoundary() {
 
 export async function finishAsync(iterator, work) {
   let began = performance.now(), next;
-  check(work);
-  do {
-    next = iterator.next();
-    if (!next.done && performance.now() - began >= 8) {
-      await pause(work);
-      began = performance.now();
-    }
-  } while (!next.done);
-  check(work);
-  return next.value;
+  try {
+    do {
+      check(work);
+      next = iterator.next();
+      if (!next.done && performance.now() - began >= 8) {
+        await pause(work);
+        began = performance.now();
+      }
+    } while (!next.done);
+    check(work);
+    return next.value;
+  } finally { if (!next?.done) iterator.return?.(); }
 }
 
 export function* cloneTree(root) {
@@ -98,25 +101,98 @@ export function* cloneTree(root) {
   return copy;
 }
 
-export function* htmlParts(root, limit = 16384) {
+// Null entries are traversal checkpoints, never fragment boundaries. A large
+// nested unit is serialized cooperatively but is still admitted as one complete
+// HTML/namespace unit by the synchronous parser and sanitizer.
+export function* htmlParts(root, limit = 16384, consume = false) {
+  limit = Math.max(2, limit);
   const text = root.ownerDocument.createElement('div');
+  const small = node => {
+    let count = 0, chars = 0, at = node;
+    while (at) {
+      if (++count > 128) return false;
+      if (at.nodeType === 1) for (const attribute of at.attributes) chars += attribute.value.length + attribute.name.length;
+      else chars += at.nodeValue?.length || 0;
+      if (chars > limit) return false;
+      if (at.firstChild) at = at.firstChild;
+      else {
+        while (at !== node && !at.nextSibling) at = at.parentNode;
+        at = at === node ? null : at.nextSibling;
+      }
+    }
+    return true;
+  };
+  const nativeHtml = node => {
+    if (node.nodeType === 1) return node.outerHTML;
+    text.replaceChildren(node.cloneNode(false)); return text.innerHTML;
+  };
+  const nodeHtml = function* (node) {
+    if (small(node)) return nativeHtml(node);
+    const pieces = [], stack = [];
+    let at = node;
+    while (at) {
+      yield null;
+      if (at.nodeType === 1) {
+        if (small(at)) pieces.push(at.outerHTML);
+        else {
+          // Native shallow serialization owns tag/attribute spelling and
+          // escaping. Native text serialization below keeps its parent context.
+          const empty = at.cloneNode(false);
+          // A foreign element with children must retain its native closing tag
+          // even in an inert DOM that self-closes an empty SVG element.
+          if (at.firstChild) empty.appendChild(root.ownerDocument.createTextNode(''));
+          const shell = empty.outerHTML, close = /<\/[^<>]+>$/.exec(shell)?.[0] || '';
+          if (close && at.firstChild) {
+            pieces.push(shell.slice(0, -close.length));
+            stack.push({node: at, close}); at = at.firstChild; continue;
+          }
+          pieces.push(shell);
+        }
+      } else if (at.nodeType === 3 && at.nodeValue.length > limit) {
+        const parent = at !== node && at.parentNode?.nodeType === 1 ? at.parentNode.cloneNode(false) : text;
+        const value = at.nodeValue;
+        for (let start = 0; start < value.length;) {
+          let end = Math.min(start + limit, value.length);
+          if (end < value.length && value.charCodeAt(end - 1) >= 0xd800 && value.charCodeAt(end - 1) <= 0xdbff) end--;
+          parent.replaceChildren(root.ownerDocument.createTextNode(value.slice(start, end)));
+          pieces.push(parent.innerHTML); start = end; yield null;
+        }
+        parent.replaceChildren();
+      } else if (at.nodeType === 3 && at.parentNode?.nodeType === 1) {
+        const parent = at.parentNode.cloneNode(false);
+        parent.appendChild(at.cloneNode(false)); pieces.push(parent.innerHTML);
+      } else pieces.push(nativeHtml(at));
+      while (at !== node && !at.nextSibling) { const frame = stack.pop(); pieces.push(frame.close); at = frame.node; }
+      at = at === node ? null : at.nextSibling;
+    }
+    return pieces.join('');
+  };
   let part = '';
-  for (let node = root.firstChild; node; node = node.nextSibling) {
-    let html;
-    if (node.nodeType === 1) html = node.outerHTML;
-    else { text.replaceChildren(node.cloneNode(false)); html = text.innerHTML; }
+  for (let node = root.firstChild; node;) {
+    const next = node.nextSibling;
+    const html = yield* nodeHtml(node);
     if (part && part.length + html.length > limit) { yield part; part = ''; }
     part += html;
+    if (consume) root.removeChild(node);
+    node = next;
   }
   if (part) yield part;
 }
 
-export function* cleanTree(root, sanitize, context = 'export') {
+export function admitHtml(root, html, sanitize, fragment = null, context = 'export') {
+  if (fragment) root.appendChild(fragment(html, context));
+  else {
+    // Inert string-only hosts retain their explicitly supported admission path.
+    const part = root.ownerDocument.createElement('div');
+    part.innerHTML = sanitize(html, context);
+    while (part.firstChild) root.appendChild(part.firstChild);
+  }
+}
+
+export function* cleanTree(root, sanitize, context = 'export', fragment = null) {
   const clean = root.ownerDocument.createElement('div');
-  const part = root.ownerDocument.createElement('div');
   for (const html of htmlParts(root)) {
-    part.innerHTML = sanitize(html, context);
-    while (part.firstChild) clean.appendChild(part.firstChild);
+    if (html !== null) admitHtml(clean, html, sanitize, fragment, context);
     yield;
   }
   return clean;
@@ -124,7 +200,10 @@ export function* cleanTree(root, sanitize, context = 'export') {
 
 export function* serializeTree(root, sanitize = null, trim = false) {
   const parts = [];
-  for (const html of htmlParts(root)) { parts.push(sanitize ? sanitize(html, 'export') : html); yield; }
+  for (const html of htmlParts(root)) {
+    if (html !== null) parts.push(sanitize ? sanitize(html, 'export') : html);
+    yield;
+  }
   const result = parts.join('');
   return trim ? result.trim() : result;
 }

package/dist/kit/render.mjs

@@ -1,11 +1,10 @@
 // SPDX-License-Identifier: MIT
 import {htmlImageRecord, mountHtmlBlocks} 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';
@@ -158,8 +157,8 @@ 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.
+	// Print runs shared paragraph typography, but keeps its existing picture layout;
+	// picture-shape annotations have no consumer in that artifact.
 	if (!opts.print) _rapierAnnotateExportBoxPolygons(styledRoot);
 	if (completePage && !opts.print) {
 		if (work) {
@@ -173,6 +172,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' : '';
@@ -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 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>';
+		+ bodyHtml + '</main>' + carrier + layoutScript + inkScript + htmlScript + '</body>\n</html>';
 
 	return {
 		html: page,
@@ -1381,17 +1380,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.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.meta?.typography && token.nesting === 1) {
+				stack.push({open: token.meta.typography.open, close: token.meta.typography.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 +1399,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 +1430,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 +1514,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 +1527,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 +1552,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;
@@ -1823,6 +1847,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 +1862,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 +1877,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,21 +1913,27 @@ 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};

package/dist/kit/typography.mjs

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