rapier-markdown-kit 1.1.99 → 1.1.101

package/dist/kit/print-capitals.mjs

@@ -0,0 +1,85 @@
+// SPDX-License-Identifier: MIT
+import {parseLayoutAttribute} from '../spec/md-layout.mjs';
+import {imageOnly, lineMetrics, linesHeight} from '../layout/model.mjs';
+
+export function followingPrintProse(paragraph) {
+  let next = paragraph?.nextElementSibling;
+  while (next && (next.classList?.contains('rapier-will-carrier') || next.classList?.contains('rapier-image-asset-record')))
+    next = next.nextElementSibling;
+  return next;
+}
+
+// The print compositor owns pagination. Only a normal-flow picture initial moves into
+// its adjacent prose, so a native float can remain with the lines it introduces.
+export function markPrintCapitals(root) {
+  for (const image of root.querySelectorAll('img[data-rapier-image-layout]')) {
+    const layout = parseLayoutAttribute(image.getAttribute('data-rapier-image-layout'));
+    if (!layout?.lines || layout.wrap !== 'around' || layout.x != null || layout.y != null || layout.rotate ||
+        layout.align && layout.align !== 'left') continue;
+    const paragraph = image.closest('p'), owner = followingPrintProse(paragraph);
+    if (!paragraph || !imageOnly(paragraph, image) || paragraph.closest('table,pre,figure') ||
+        owner?.tagName !== 'P' || !owner.textContent.trim() || owner.hasAttribute('data-md-lines')) continue;
+    image.setAttribute('data-rapier-print-lines', String(layout.lines));
+  }
+}
+
+// This factory is also embedded in the offline page, with the same line metrics owner.
+export function createPrintCapitals(lineMetrics, linesHeight, followingProse) {
+  const selector = 'img[data-rapier-print-lines]', states = new WeakMap();
+  const restoreStyle = (node, value) => value == null ? node.removeAttribute('style') : node.setAttribute('style', value);
+  function clear(root) {
+    for (const image of root.querySelectorAll(selector)) {
+      const state = states.get(image);
+      if (!state) continue;
+      const {paragraph, parent, next, occurrence, imageStyle, occurrenceStyle, paragraphStyle} = state;
+      parent.insertBefore(occurrence, next?.parentNode === parent ? next : null);
+      restoreStyle(image, imageStyle);
+      if (occurrence !== image) restoreStyle(occurrence, occurrenceStyle);
+      restoreStyle(paragraph, paragraphStyle);
+      states.delete(image);
+    }
+  }
+  function apply(root) {
+    for (const image of root.querySelectorAll(selector)) {
+      const lines = Number(image.getAttribute('data-rapier-print-lines'));
+      let state = states.get(image);
+      const paragraph = state?.paragraph || image.closest('p');
+      const owner = state?.owner || followingProse(paragraph);
+      if (!Number.isInteger(lines) || lines < 1 || lines > 12 || !image.isConnected ||
+          !owner || owner.tagName !== 'P' || !owner.textContent.trim()) continue;
+      const metrics = lineMetrics(owner), height = linesHeight(lines, metrics);
+      const naturalWidth = image.naturalWidth || Number(image.getAttribute('width'));
+      const naturalHeight = image.naturalHeight || Number(image.getAttribute('height'));
+      if (!(height > 0 && naturalWidth > 0 && naturalHeight > 0)) continue;
+      const style = owner.ownerDocument.defaultView.getComputedStyle(owner);
+      const availableWidth = owner.getBoundingClientRect().width -
+        ['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'].reduce((sum, name) => sum + (parseFloat(style[name]) || 0), 0);
+      if (!(availableWidth > 0)) continue;
+      // As imageBox does, cap the width first and retain the picture's natural ratio.
+      const width = Math.min(availableWidth, height * naturalWidth / naturalHeight);
+      const occurrence = state?.occurrence || (image.parentElement.tagName === 'A' ? image.parentElement : image);
+      if (!state) {
+        state = {paragraph, owner, occurrence, parent: occurrence.parentNode, next: occurrence.nextSibling,
+          imageStyle: image.getAttribute('style'), occurrenceStyle: occurrence.getAttribute('style'),
+          paragraphStyle: paragraph.getAttribute('style')};
+        states.set(image, state);
+        owner.prepend(occurrence);
+        paragraph.style.setProperty('display', 'none', 'important');
+      }
+      const gap = (parseFloat(style.fontSize) || 16) * .4;
+      for (const [name, value] of Object.entries({display: 'block', position: 'static', float: 'left',
+          width: width + 'px', height: width * naturalHeight / naturalWidth + 'px', 'max-width': '100%',
+          'margin-top': metrics.capTop + 'px', 'margin-right': gap + 'px', 'margin-bottom': '0', 'margin-left': '0',
+          transform: 'none', 'object-fit': 'contain', 'break-inside': 'avoid'})) image.style.setProperty(name, value, 'important');
+      if (occurrence !== image) {
+        occurrence.style.setProperty('display', 'contents', 'important');
+        occurrence.style.setProperty('float', 'none', 'important');
+      }
+    }
+  }
+  return {apply, clear};
+}
+
+const capitals = createPrintCapitals(lineMetrics, linesHeight, followingPrintProse);
+export const applyPrintCapitals = capitals.apply;
+export const clearPrintCapitals = capitals.clear;

package/dist/kit/rapier-ledger.mjs

@@ -7,8 +7,8 @@ import {merge, transportInterval, transportTouchedInterval} from './ledger/merge
 export {merge, transportInterval, transportTouchedInterval};
 import {_rapierTransformSplices, _rapierRecordSplices, _rapierValidLedgerRecord, _rapierRecordMetadata, _rapierValidMetadata, _rapierValidMetadataEffect, _rapierTransformMetadata, _rapierMetadataDelta, _rapierHistoryEffects, _rapierMetadataState, _rapierReplayMetadata, _rapierHasHistoryEffect} from './ledger/journal-records.mjs';
 export {_rapierTransformSplices, _rapierRecordSplices, _rapierValidLedgerRecord, _rapierRecordMetadata, _rapierValidMetadata, _rapierValidMetadataEffect, _rapierTransformMetadata, _rapierMetadataDelta, _rapierHistoryEffects, _rapierMetadataState, _rapierReplayMetadata, _rapierHasHistoryEffect};
-import {replayHistory, sourceBefore, historyProjection, historyPlaces, selectiveUndo, groupHistoryActs} from './ledger/history.mjs';
-export {replayHistory, sourceBefore, historyProjection, historyPlaces, selectiveUndo, groupHistoryActs};
+import {replayHistory, sourceBefore, historyProjection, historyProjections, historyPlaces, selectiveUndo, groupHistoryActs, pictureHistorySplices} from './ledger/history.mjs';
+export {replayHistory, sourceBefore, historyProjection, historyProjections, historyPlaces, selectiveUndo, groupHistoryActs, pictureHistorySplices};
 
 import {transposeSource} from './ledger/transport.mjs';
 export {transposeSource};

package/dist/kit/render-entry.mjs

@@ -5,3 +5,4 @@ export {createMarkdownRenderer} from './render-markdown.mjs';
 export {createRenderStyles} from './render-styles.mjs';
 export {createRenderSanitizer} from './render-sanitize.mjs';
 export {createPrintRenderer} from './render-print.mjs';
+export {exportFontCss, requireDocumentFonts, fontRequests, waitForFonts, waitForFontRequests} from './export-fonts.mjs';

package/dist/kit/render-ink.mjs

@@ -0,0 +1,132 @@
+// SPDX-License-Identifier: MIT
+// Published typography is measured once; an annotation keeps its words and paths in one inert, scalable group.
+import {check, pause} from './render-work.mjs';
+import {apply as applyTypography} from '../layout/typography.mjs';
+import {documentLanguage} from '../spec/document-settings.mjs';
+import {waitForFonts} from './export-fonts.mjs';
+
+const MARK = 'span.rapier-ink-mark[data-rapier-ink]';
+const TYPOGRAPHY = 'p[data-md-hyphens="auto"],p[data-md-lines],p[data-md-hanging="on"]';
+const SVG = 'http://www.w3.org/2000/svg';
+const XHTML = 'http://www.w3.org/1999/xhtml';
+const failure = message => Object.assign(new Error('The published page could not be prepared: ' + message), {code: 'EXPORT_INK_UNAVAILABLE'});
+
+function groupsOf(root, spec) {
+  const nodes = [...root.childNodes], ranges = [], arrows = new Map();
+  const topIndex = element => {
+    while (element.parentElement && element.parentElement !== root) element = element.parentElement;
+    return nodes.indexOf(element);
+  };
+  for (const span of root.querySelectorAll(MARK)) {
+    const mark = spec.parseInkBody(span.getAttribute('data-rapier-ink'));
+    if (!mark) continue;
+    const index = topIndex(span);
+    if (index < 0) throw failure('an annotation has no containing block.');
+    ranges.push([index, index]);
+    if (mark.kind === 'arrow' || mark.kind === 'end') {
+      const pair = arrows.get(mark.id) || [];
+      pair.push(index); arrows.set(mark.id, pair);
+    }
+  }
+  for (const pair of arrows.values()) ranges.push([Math.min(...pair), Math.max(...pair)]);
+  ranges.sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+  const groups = [];
+  for (const range of ranges) {
+    const prior = groups.at(-1);
+    if (prior && range[0] <= prior[1]) prior[1] = Math.max(prior[1], range[1]);
+    else groups.push(range);
+  }
+  return {nodes, groups};
+}
+
+export async function freezePublishedInk(root, {document: doc, css, fontCss = '', settings, language, theme, work, spec, ink, draw}) {
+  const annotated = !!root.querySelector(MARK), refined = !!root.querySelector(TYPOGRAPHY);
+  if (!annotated && !refined) return;
+  if (!doc?.body || !doc.defaultView || annotated && (!spec?.parseInkBody || !ink?.deriveMark || !draw?.drawInk))
+    throw failure('the browser publication renderer is unavailable.');
+  check(work);
+  const frame = doc.createElement('iframe'), width = Math.max(1, doc.documentElement.clientWidth || doc.defaultView.innerWidth);
+  frame.setAttribute('sandbox', 'allow-same-origin');
+  frame.setAttribute('aria-hidden', 'true'); frame.setAttribute('tabindex', '-1');
+  frame.setAttribute('referrerpolicy', 'no-referrer');
+  frame.style.cssText = 'position:fixed;left:-100000px;top:0;width:' + width + 'px;height:1px;border:0;visibility:hidden;pointer-events:none';
+  const policy = "default-src 'none'; script-src 'none'; connect-src 'none'; img-src data:; font-src data:; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'";
+  let timer, abort;
+  const stopped = new Promise((_, reject) => {
+    timer = setTimeout(() => reject(failure('its embedded resources did not finish loading.')), 20000);
+    abort = () => { try { check(work); } catch (error) { reject(error); } };
+    work?.signal?.addEventListener('abort', abort, {once: true});
+  });
+  const wait = promise => Promise.race([promise, stopped]);
+  try {
+    const loaded = new Promise(resolve => frame.addEventListener('load', resolve, {once: true}));
+    frame.srcdoc = '<!doctype html><html lang="' + documentLanguage(settings, language) + '" data-rapier-theme="' + theme + '"><head><meta charset="utf-8">'
+      + '<meta http-equiv="Content-Security-Policy" content="' + policy + '"><meta name="referrer" content="no-referrer">'
+      + '<style>' + css + '</style></head><body class="' + (theme === 'light' ? 'light' : '')
+      + '"><main class="rapier-page md-render" data-md-theme="' + theme + '"' + (settings?.space ? ' data-md-space' : '') + '>' + root.innerHTML + '</main></body></html>';
+    doc.body.appendChild(frame);
+    await wait(loaded);
+    const paper = frame.contentDocument, main = paper?.querySelector('main.rapier-page');
+    if (!main) throw failure('the browser could not open its isolated page.');
+    const captured = annotated ? groupsOf(main, spec) : {nodes: [], groups: []}, prepared = [];
+    for (const [first, last] of captured.groups) {
+      const group = paper.createElement('div');
+      group.setAttribute('data-rapier-published-ink', '');
+      group.style.cssText = 'display:flow-root;position:relative;width:100%;margin:0;padding:0;border:0;overflow:visible';
+      main.insertBefore(group, captured.nodes[first]);
+      for (let index = first; index <= last; index++) group.appendChild(captured.nodes[index]);
+      // A fixed group cannot grow after disclosure. Show each marked passage in full.
+      for (const span of group.querySelectorAll(MARK)) {
+        for (let parent = span.parentElement; parent && parent !== group; parent = parent.parentElement)
+          if (parent.localName === 'details') parent.open = true;
+      }
+      for (const summary of group.querySelectorAll('summary')) summary.setAttribute('inert', '');
+      prepared.push(group);
+    }
+    await wait(Promise.all([...main.querySelectorAll('img')].map(async image => {
+      image.loading = 'eager';
+      try { await image.decode(); }
+      catch (_) { throw failure('an embedded picture could not be decoded.'); }
+    })));
+    // The captured CSS supplies the faces; validate them before measuring typography or ink.
+    main.getBoundingClientRect();
+    await wait(waitForFonts(main, {settings, css, fontCss, install: false}));
+    if (paper.fonts?.ready) await wait(paper.fonts.ready);
+    await pause(work);
+    if (refined) applyTypography(main, {all: true});
+    const results = [];
+    for (const group of prepared) {
+      check(work);
+      draw.drawInk(group, {spec, ink, place: 'start'});
+      const box = group.getBoundingClientRect();
+      if (!(box.width > 0 && box.height > 0)) throw failure('an annotation has no measurable words.');
+      const svg = paper.createElementNS(SVG, 'svg'), content = paper.createElementNS(SVG, 'foreignObject');
+      svg.setAttribute('viewBox', '0 0 ' + box.width + ' ' + box.height);
+      svg.setAttribute('width', String(box.width)); svg.setAttribute('height', String(box.height));
+      svg.setAttribute('role', 'group'); svg.setAttribute('data-rapier-published-ink', '');
+      svg.style.cssText = 'display:block;width:100%;max-width:' + box.width + 'px;height:auto;margin:0;padding:0;overflow:visible';
+      content.setAttribute('width', String(box.width)); content.setAttribute('height', String(box.height));
+      content.style.overflow = 'visible';
+      group.setAttribute('xmlns', XHTML);
+      group.style.width = box.width + 'px';
+      group.style.maxWidth = 'none';
+      content.appendChild(group.cloneNode(true)); svg.appendChild(content);
+      results.push(svg);
+      await pause(work);
+    }
+    // Keep the measured typography outside annotated groups too. The caller's detached
+    // projection changes only after every resource and group has succeeded.
+    for (const [index, group] of prepared.entries()) group.replaceWith(results[index]);
+    const projected = doc.createDocumentFragment();
+    for (const node of main.childNodes) {
+      projected.appendChild(doc.importNode(node, true));
+      await pause(work);
+    }
+    check(work);
+    root.replaceChildren(projected);
+  } finally {
+    clearTimeout(timer);
+    work?.signal?.removeEventListener('abort', abort);
+    frame.remove();
+  }
+}

package/dist/kit/render-markdown.mjs

@@ -1,3 +1,4 @@
+import {htmlPlaceholder, mountHtmlBlocks, htmlImageRecord, htmlLayoutEdit} from '../spec/html-blocks.mjs';
 // SPDX-License-Identifier: MIT
 import {finish, finishAsync, cloneTree, cleanTree, serializeTree, htmlBoundary, pause, check} from './render-work.mjs';
 const RAPIER_TABLE_CAPTION_PREFIX_RE = /^(?:Table:|:) /;
@@ -56,6 +57,15 @@ function initMarkdownIt() {
 		return '<span data-md-color="' + hex + '" style="--md-color:' + hex + ';--md-color-dark:' + dark + '">';
 	};
 	md.renderer.rules.rapier_color_close = () => '</span>';
+	md.renderer.rules.rapier_font_open = (tokens, idx) => {
+		const token = tokens[idx], family = token.attrGet('data-md-font'), css = globalThis.RapierMarkdownSpec.fontFamilyCss(family);
+		if (!css) return '<span>';
+		const original = token.attrGet('data-md-font-open');
+		return '<span data-md-font="' + md.utils.escapeHtml(family) + '"'
+			+ (original ? ' data-md-font-open="' + md.utils.escapeHtml(original) + '"' : '')
+			+ ' style="font-family:' + md.utils.escapeHtml(css) + '">';
+	};
+	md.renderer.rules.rapier_font_close = () => '</span>';
 	// Ink: the span carries its opener's body (the grammar's inkOpenBody: a sanitizer drops an attribute holding the
 	// comment's close); the ink layer reads it back through the one grammar and draws the stroke over the words' own boxes.
 	// The span itself shows nothing.
@@ -120,6 +130,8 @@ function initMarkdownIt() {
 		if (!env.rapierPage && typeof globalThis.RapierEmbeddedImages?.imageHtml === 'function' &&
 			(_rapierEmbedAssetSource?.(src) || asset && (reference || asset.codec === 'image/jxl' || asset.codec === 'image/svg+xml'))) return globalThis.RapierEmbeddedImages.imageHtml(
 			reference, alt, title, size, layout, rawAlt, token.meta?.mdImage?.source, src);
+		const drawingAlt = typeof rawAlt === 'string' && alt === '' && asset?.codec === 'image/svg+xml' ? globalThis.RapierImageAssets.drawingImageAlt(src) : null;
+		const shownAlt = drawingAlt ?? alt;
 		let loadable = false;
 		try { loadable = !!src.trim() && /^(?:https?|file|blob|data):$/.test(new URL(src, globalThis.document?.baseURI || globalThis.location?.href || 'https://rapier.invalid/').protocol); } catch (_) {}
 		if (!loadable) {
@@ -139,14 +151,14 @@ function initMarkdownIt() {
 		const attrs = [
 			'data-rapier-markdown-image=""',
 			'src="' + md.utils.escapeHtml(src) + '"',
-			'alt="' + md.utils.escapeHtml(alt) + '"',
+			'alt="' + md.utils.escapeHtml(shownAlt) + '"',
 			'loading="lazy"',
 			'decoding="async"',
 		];
 		if (token.meta?.mdImage?.source && token.meta.mdImage.source.length <= 4096)
 			attrs.push('data-rapier-image-source="' + md.utils.escapeHtml(encodeURIComponent(token.meta.mdImage.source)) + '"');
 		if (title) attrs.push('title="' + md.utils.escapeHtml(title) + '"');
-		if (size && !token.meta?.mdLayout?.layout?.width) attrs.push('data-rapier-image-alt-source="' + md.utils.escapeHtml(rawAlt) + '"');
+		if (shownAlt !== alt || size && !token.meta?.mdLayout?.layout?.width) attrs.push('data-rapier-image-alt-source="' + md.utils.escapeHtml(rawAlt) + '"');
 		if (layout) attrs.push('data-rapier-image-layout="' + md.utils.escapeHtml(encodeURIComponent(layout)) + '"');
 		return '<img ' + attrs.join(' ') + _rapierImageSizeAttributes(size, layout) + '>';
 	};
@@ -186,7 +198,8 @@ function initMarkdownIt() {
 			return key.startsWith('data-') || key === 'for' || key === 'id' && _rapierChromeOwnsId(attributeText(value)) ? '' : whole;
 		}) : tag;
 		md.renderer.rules.html_inline = (tokens, idx) => cleanTag(tokens[idx].content);
-		md.renderer.rules.html_block = (tokens, idx) => _rapierRawHtmlFragment(tokens[idx].content, cleanTag, md);
+		md.renderer.rules.html_block = (tokens, idx, _options, env) => _rapierRawHtmlFragment(tokens[idx].content,
+			tag => env?.rapierDocumentSpace ? cleanTag(tag).replace(/^<([A-Za-z][A-Za-z0-9:-]*)(?=[\s/>])/, '<$1 data-md-html-block="' + idx + '"') : cleanTag(tag), md);
 	}
 
 	const _ulOpenDefault = md.renderer.rules.bullet_list_open
@@ -263,7 +276,8 @@ function initMarkdownIt() {
 			token.attrSet('data-rapier-fence', token.markup || '```');
 			token.attrSet('data-rapier-fence-info', token.info == null ? '' : String(token.info));
 			const lang = String(token.info || '').trim().split(/\s+/)[0].toLowerCase();
-			if (lang !== 'mermaid' || env.rapierPage) return _fenceDefault(tokens, idx, opts, env, self);
+			if (lang === 'html') {const block = htmlPlaceholder(token, md.utils.escapeHtml); if (block) return block;}
+			if (lang !== 'mermaid') return _fenceDefault(tokens, idx, opts, env, self);
 			const src = String(token.content || '').replace(/\n$/, '');
 			const fence = md.utils.escapeHtml(token.markup || '```');
 			const info = token.info == null ? '' : String(token.info);
@@ -278,10 +292,11 @@ function initMarkdownIt() {
 					'<p class="diagram-reason">Mermaid block may be missing its closing <code>' + fence +
 					'</code> fence. Text below is still inside the block.</p>' + sourceHtml + '</figure>\n';
 			}
-			const native = globalThis.RapierFlowchart?.parseFlowchart(src).ok === true;
-			const provider = _rapierProviders.mermaid;
+			const provider = env.rapierProviders === false ? null : _rapierProviders.mermaid;
+			const native = globalThis.RapierFlowchart?.parseFlowchart(src).ok === true ||
+				provider?.status === 'ready' && globalThis.RapierDiagrams?.parseDiagram(src).ok === true;
 			const ready = native || !!(provider && provider.status === 'ready' && typeof provider.renderToString === 'function');
-			if (!ready && !_diagramPromptedOnce) {
+			if (!ready && env.rapierProviders !== false && !_diagramPromptedOnce) {
 				_diagramPromptedOnce = true;
 				try { _rapierUiDiagram.request(); } catch (_) {}
 			}
@@ -316,13 +331,13 @@ function initMarkdownIt() {
 
 	{
 		let _mathPromptedOnce = false;
-		const _renderMath = (src, displayMode, page) => {
+		const _renderMath = (src, displayMode, env) => {
 			const marker = displayMode ? '$$' : '$';
 			const source = marker + src + marker, literal = md.utils.escapeHtml(source);
-			if (page) return '<span data-rapier-math-source="">' + literal + '</span>';
-			const mathProvider = _rapierProviders.math;
+			if (env.rapierPage) return '<span data-rapier-math-source="">' + literal + '</span>';
+			const mathProvider = env.rapierProviders === false ? null : _rapierProviders.math;
 			if (!mathProvider || mathProvider.status !== 'ready' || typeof mathProvider.renderToString !== 'function') {
-				if (!_mathPromptedOnce) {
+				if (env.rapierProviders !== false && !_mathPromptedOnce) {
 					_mathPromptedOnce = true;
 					try { _rapierUiMath.request(); } catch (_) {}
 				}
@@ -336,8 +351,8 @@ function initMarkdownIt() {
 			}
 			catch (_) { return '<span data-rapier-math-source="">' + literal + '</span>'; }
 		};
-		md.renderer.rules.math_inline = (tokens, idx, _opts, env) => _renderMath(tokens[idx].content, false, env.rapierPage);
-		md.renderer.rules.math_block  = (tokens, idx, _opts, env) => wrapDisplayMath(_renderMath(tokens[idx].content, true, env.rapierPage)) + '\n';
+		md.renderer.rules.math_inline = (tokens, idx, _opts, env) => _renderMath(tokens[idx].content, false, env);
+		md.renderer.rules.math_block  = (tokens, idx, _opts, env) => wrapDisplayMath(_renderMath(tokens[idx].content, true, env)) + '\n';
 	}
 	globalThis.RapierMarkdownLayout.installMarkdownLayout(md);
 	globalThis.RapierImageAssets.configureParser(md, _rapierSplitOpeningFrontmatter);
@@ -361,7 +376,11 @@ function _rapierRenderSemanticRoot(canonical, metadata, options = {}) {
 	}
 
 	const markdown = _rapierSplitOpeningFrontmatter(canonical).body;
-	const env = options.page ? {rapierPage: true} : {};
+	// Source-semantic output is independent of installed rendering providers. Complete
+	// artifacts keep the default provider path and materialize their visual content.
+	const env = {...(options.page ? {rapierPage: true} : {}), ...(options.providers === false ? {rapierProviders: false} : {})};
+	env.rapierDocumentSpace = !!globalThis.RapierMarkdownSpec?.readDocumentSettings?.(canonical)?.space;
+	if (env.rapierDocumentSpace) root.setAttribute('data-md-space', '');
 	let rendered = md
 		? md.render(markdown, env)
 		: '<pre><code>' + escapeRapierHtmlText(markdown) + '</code></pre>';
@@ -396,8 +415,10 @@ async function _rapierRenderSemanticRootAsync(canonical, metadata, options = {})
 	const fallbackEnv = options.page ? {rapierPage: true} : {};
 	const parsed = options.parsed || (runtime.parseAsync ? await runtime.parseAsync(markdown, options) : {tokens: md.parse(markdown, fallbackEnv), env: fallbackEnv});
 	const {tokens, env} = parsed, labels = env.footnotes?.list?.map((item, index) => String(item?.label || ('inline-' + (index + 1))));
+	env.rapierDocumentSpace = !!globalThis.RapierMarkdownSpec?.readDocumentSettings?.(canonical)?.space;
 	const root = document.createElement('div'), part = document.createElement('div'), boundary = htmlBoundary();
 	root.setAttribute('data-rapier-semantic-root', 'true');
+	if (env.rapierDocumentSpace) root.setAttribute('data-md-space', '');
 	let html = '', began = performance.now();
 	const append = () => {
 		if (md.renderer.rapierTransformHtml) html = md.renderer.rapierTransformHtml(html);
@@ -1075,6 +1096,10 @@ function* _rapierProjectPortableRootSteps(semanticRoot, options) {
 		math.replaceWith(code);
 	}
 	for (const math of root.querySelectorAll('math')) { yield;
+		if (keepLayoutData) {
+			for (const element of [math, ...math.querySelectorAll('*')]) nativeElements.add(element);
+			continue;
+		}
 		const code = document.createElement('code');
 		code.textContent = String(math.textContent || '').trim() || '[equation]';
 		math.replaceWith(code);
@@ -1093,7 +1118,7 @@ function* _rapierProjectPortableRootSteps(semanticRoot, options) {
 
 	for (const item of root.querySelectorAll('.table-scroll-wrap,.math-display-wrap')) { yield; _rapierUnwrapElement(item); }
 
-	for (const item of root.querySelectorAll('pre > code')) { yield; _rapierNormalizeCodeElement(item); }
+	if (!keepLayoutData) for (const item of root.querySelectorAll('pre > code')) { yield; _rapierNormalizeCodeElement(item); }
 
 	for (const svg of root.querySelectorAll('svg')) { yield;
 		if (nativeElements.has(svg)) continue;
@@ -1106,6 +1131,7 @@ function* _rapierProjectPortableRootSteps(semanticRoot, options) {
 	if (runtime.prefixAnchorsSteps) yield* runtime.prefixAnchorsSteps(root, opts.baseName);
 	else _rapierPrefixPortableAnchors(root, opts.baseName);
 
+	const refinedProse = [];
 	for (const element of root.querySelectorAll('*')) { yield;
 		if (nativeElements.has(element)) continue;
 		const lang = element.tagName === 'CODE' ? _rapierLanguageClass(element) : '';
@@ -1113,14 +1139,24 @@ function* _rapierProjectPortableRootSteps(semanticRoot, options) {
 		// separator and return-link spacing before it compares source-owned review notes.
 		const footnoteRole = keepLayoutData ? ['footnote-backref', 'footnotes-sep']
 			.filter(name => element.classList.contains(name)).join(' ') : '';
+		const captionRole = keepLayoutData ? ['rapier-table-caption', 'rapier-figure-caption']
+			.filter(name => element.classList.contains(name)).join(' ') : '';
 		const columnAlignment = /^(TH|TD)$/.test(element.tagName) && /^(left|center|right)$/.test(element.style.textAlign)
 			? element.style.textAlign : '';
-		const alignment = globalThis.RapierMarkdownLayout.parseLayoutAttribute(element.getAttribute('data-md-layout'))?.align || columnAlignment;
+		const paragraphLayout = globalThis.RapierMarkdownLayout.parseLayoutAttribute(element.getAttribute('data-md-layout'));
+		const alignment = paragraphLayout?.align || columnAlignment;
 		const imageLayout = element.tagName === 'IMG' ? globalThis.RapierMarkdownLayout.parseLayoutAttribute(element.getAttribute('data-rapier-image-layout')) : null;
 		const measurements = keepLayoutData && /^(?:P|H[1-6]|LI|OL|UL)$/.test(element.tagName)
 			? ['text-indent', 'margin-inline-start'].map(property => [property, element.style.getPropertyValue(property)]) : [];
+		if (keepLayoutData && element.closest('pre')) for (const property of ['color', 'font-weight', 'font-style'])
+			measurements.push([property, element.style.getPropertyValue(property)]);
+		if (keepLayoutData && element.tagName === 'BLOCKQUOTE')
+			measurements.push(['border-inline-start-color', element.style.borderInlineStartColor]);
+		const runTypography = keepLayoutData ? ['font-family', 'font-variant-caps'].map(property => [property, element.style.getPropertyValue(property)]) : [];
 
 		const colorHex = element.tagName === 'SPAN' ? element.getAttribute('data-md-color') : null;
+		const fontFamily = element.tagName === 'SPAN' ? element.getAttribute('data-md-font') : null;
+		const fontCss = fontFamily ? globalThis.RapierMarkdownSpec.fontFamilyCss(fontFamily) : '';
 
 		const highlightHex = element.tagName === 'MARK'
 			? (RAPIER_PORTABLE_HIGHLIGHT_HEX[String(element.getAttribute('data-rapier-highlight') || '').toLowerCase()] || RAPIER_PORTABLE_HIGHLIGHT_HEX.yellow)
@@ -1131,7 +1167,9 @@ function* _rapierProjectPortableRootSteps(semanticRoot, options) {
 		const isPageBreak = element.hasAttribute('data-md-break');
 		for (const attribute of Array.from(element.attributes)) { yield;
 			const name = attribute.name.toLowerCase();
-			if (keepLayoutData && (name === 'data-rapier-image-layout' || name === 'data-md-layout' || name === 'data-md-align' || name === 'data-rapier-ink')) continue;
+			if (keepLayoutData && (name === 'data-rapier-image-layout' || name === 'data-md-layout' || name === 'data-md-align' || name === 'data-rapier-ink'
+					|| name === 'data-md-first-line-end' || name === 'data-md-initial-font' || name === 'data-md-initial-size'
+					|| name === 'data-md-picture-cap-height' || name === 'data-md-picture-cap-top')) continue;
 			if (name === 'class' || name === 'style' || name.startsWith('data-')
 					|| name === 'contenteditable' || name === 'spellcheck'
 					|| name === 'tabindex' || name === 'disabled' || name === 'aria-disabled') {
@@ -1139,15 +1177,23 @@ function* _rapierProjectPortableRootSteps(semanticRoot, options) {
 			}
 		}
 		if (footnoteRole) element.className = footnoteRole;
+		if (captionRole) element.className = captionRole;
 		if (lang) element.className = 'language-' + lang;
 		for (const [property, value] of measurements) if (value) element.style.setProperty(property, value);
+		for (const [property, value] of runTypography) if (value) element.style.setProperty(property, value);
 		if (alignment) element.style.textAlign = alignment;
+		if (!keepLayoutData && element.tagName === 'P' && !element.closest('table,pre')) {
+			if (paragraphLayout?.hyphens === 'auto') { element.style.hyphens = 'auto'; element.style.textWrap = 'pretty'; }
+			if (paragraphLayout?.hanging === 'on') element.style.setProperty('hanging-punctuation', 'first allow-end');
+			if (paragraphLayout?.hyphens || paragraphLayout?.hanging || paragraphLayout?.caps || paragraphLayout?.lines) refinedProse.push(element);
+		}
 		if (imageLayout && !keepLayoutData) {
 			const pictureStyle = globalThis.RapierMarkdownLayout.imageStyle(imageLayout);
 			if (imageLayout.width != null) element.removeAttribute('width');
 			if (pictureStyle) element.style.cssText = pictureStyle;
 		}
 		if (colorHex && /^#[0-9a-f]{6}$/i.test(colorHex)) element.style.color = colorHex.toLowerCase();
+		if (fontCss) element.style.fontFamily = fontCss;
 		if (highlightHex) element.style.backgroundColor = highlightHex;
 		if (isTableCaption) { element.style.fontStyle = 'italic'; element.style.color = '#555555'; }
 
@@ -1157,6 +1203,12 @@ function* _rapierProjectPortableRootSteps(semanticRoot, options) {
 			element.replaceWith(p);
 		}
 	}
+	for (const paragraph of refinedProse) for (const literal of paragraph.querySelectorAll('code,kbd,samp,math')) { yield;
+		literal.style.setProperty('hyphens', 'none');
+		literal.style.setProperty('text-justify', 'none');
+		literal.style.setProperty('font-variant-caps', 'normal');
+		literal.style.setProperty('hanging-punctuation', 'none');
+	}
 
 	return yield* cleanTree(root, sanitizeRapierHtml);
 }
@@ -1441,3 +1493,5 @@ function _rapierBidiStrong(cp) {
   return {_rapierPlainTextFileAsync, _rapierCloneRootAsync, _rapierPortablePlainTextAsync, _rapierHeldPicturesAsWordsAsync, _rapierRenderSemanticRootAsync, _rapierProjectPortableRootAsync, _rapierPortableHtmlAsync, _rapierCalloutInfo, _rapierRemoveCalloutMarker, _rapierMathSource, _rapierFlattenPortableDetails, _rapierProjectPortableRoot, _rapierPortableHtml, _rapierNormalizeInlineText, _rapierPortableInlineText, _rapierPortableListText, _rapierPortableTableText, _rapierPortablePlainText, _rapierPlainTextFile, _rapierHeldPicturesAsWords, _rapierSourceTokenValue, _rapierResolveSoftBreakTokens, _rapierUnwrapElement, _rapierBidiStrong, render: (source, metadata = {}) => { if (!md) initMarkdownIt(); return _rapierRenderSemanticRoot(source, metadata).innerHTML; }, initMarkdownIt, _rapierRenderSemanticRoot, _rapierInstallSemanticProbe, _rapierImageAltSize, _rapierImageAltSourceParts, _rapierImageAltText, _rapierImageSizeAttributes, _rapierRawHtmlFragment, _rapierApplyBlockDirection, _rapierFirstStrongDir, _rapierAssignHeadingSlugs, _rapierDisambiguateRenderedAnchors, _rapierDecodeHash, _rapierDecorateJumpLists, _rapierMarkFigureCaptions, _rapierMarkListContinuations, _rapierMarkTableCaptions, _rapierNormalizeCodeElement, _rapierLanguageClass, _relabelFootnoteHtml, _footnoteIdFromLabel, wrapDisplayMath, parser: () => md};
 }
 export {RAPIER_TABLE_CAPTION_PREFIX_RE as tableCaptionPrefix, RAPIER_PORTABLE_HIGHLIGHT_HEX as portableHighlightHex, _RAPIER_RTL_SCRIPT as rtlScripts, createMarkdownRenderer};
+
+export {mountHtmlBlocks, htmlImageRecord, htmlLayoutEdit};