rapier-markdown-kit 1.1.79 → 1.1.81

package/dist/kit/render.mjs

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // The document's renderer. DOM, codecs and host state are explicit inputs.
 function createRenderer(runtime) {
-  const {RAPIER_COLOR_CLOSE, RapierLedgerCarried, RapierPageReturnAddress, RapierTextCodec, _rapierArtifactHighlight, _rapierArtifactLexerScript, _rapierArtifactMarkLexed, _rapierArtifactPreference, _rapierArtifactStyles, _rapierBlobDataUrl, _rapierBuildInterchangeContext, _rapierDocumentNameIsAdmissible, _rapierLedgerParts, _rapierDrawReadSVGRecipe, _rapierDrawShapeProfileFor, _rapierFillDiagram, _rapierFormatColorOpen, _rapierLanguageClass, _rapierLineStartOffsets, _rapierMarkdownEnvironment, _rapierPortableHtml, _rapierPrepareInterchangeContext, _rapierProjectPortableRoot, _rapierSourceCharEscaped, _rapierSourceLineSpan, crypto, document, escapeRapierHtmlText, globalThis, rapierConfirm, sanitizeRapierHtml} = runtime;
+  const {RAPIER_COLOR_CLOSE, RapierLedgerCarried, RapierPageReturnAddress, RapierTextCodec, _rapierArtifactHighlight, _rapierArtifactLexerScript, _rapierArtifactMarkLexed, _rapierArtifactPreference, _rapierArtifactStyles, _rapierBlobDataUrl, _rapierBuildInterchangeContext, _rapierDocumentNameIsAdmissible, _rapierLedgerParts, _rapierDrawReadSVGRecipe, _rapierDrawShapeProfileFor, _rapierFillDiagram, _rapierFormatColorOpen, _rapierLanguageClass, _rapierLineStartOffsets, _rapierMarkdownEnvironment, _rapierPortableHtml, _rapierPrepareInterchangeContext, _rapierProjectPortableRoot, _rapierProviders, _rapierSourceCharEscaped, _rapierSourceLineSpan, crypto, document, escapeRapierHtmlText, globalThis, rapierConfirm, sanitizeRapierHtml} = runtime;
   let md = runtime.md;
   async function render(source, options = {}) {
     if (typeof source !== 'string') throw new TypeError('Document source must be a string');
@@ -32,7 +32,7 @@ async function _rapierBuildArtifact(options, providedContext) {
 
 	// The semantic export root is detached and has never entered the live visibility queue.
 	// Await the same materialization owner before any projection clones or serializes it.
-	for (const diagram of context.semanticRoot.querySelectorAll('.diagram-block[data-diagram-src]')) {
+	for (const diagram of opts.kind === 'page' ? [] : context.semanticRoot.querySelectorAll('.diagram-block[data-diagram-src]')) {
 		await _rapierFillDiagram(diagram, true);
 	}
 
@@ -41,21 +41,23 @@ async function _rapierBuildArtifact(options, providedContext) {
 	const styledRoot = _rapierProjectStyledRoot(context.semanticRoot, {
 		metadata,
 		print: !!opts.print,
+		sourceCode: opts.kind === 'page',
 		baseName: base,
 	});
 	// _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.
-	if (!opts.print) _rapierAnnotateExportBoxPolygons(styledRoot);
+	if (!opts.print && opts.kind !== 'page') _rapierAnnotateExportBoxPolygons(styledRoot);
 	// Share adds its nearest-side no-script float and long-code cap here. Offline-image
 	// admission above and the page policy below belong to this common writer, not its callers.
 	if (typeof opts.afterRoot === 'function') opts.afterRoot(styledRoot);
 	const carrier = opts.kind === 'standalone' ? await _rapierSharedSourceCarrier(context, styledRoot) : '';
-	const bodyHtml = styledRoot.innerHTML;
+	const bodyHtml = opts.kind === 'page' ? _rapierPageHtml(styledRoot) : styledRoot.innerHTML;
 	const theme = opts.print
 		? 'light'
+		: opts.kind === 'page' ? 'system'
 		: _rapierArtifactPreference('theme', ['system', 'light', 'dark']);
-	const highlights = _rapierArtifactPreference('highlights', ['accent', 'standard']);
+	const highlights = opts.kind === 'page' ? 'standard' : _rapierArtifactPreference('highlights', ['accent', 'standard']);
 	const versionMeta = document.querySelector('meta[name="rapier-version"]');
 	const version = versionMeta && versionMeta.content ? versionMeta.content.trim() : '0.0.0';
 	const bodyClass = theme === 'light' ? 'light' : '';
@@ -66,20 +68,18 @@ async function _rapierBuildArtifact(options, providedContext) {
 	// .md-render set and the highlight rules, so a numbered list, a checkbox, a callout and a
 	// table are drawn in an exported page exactly as they are drawn here. The one caller with
 	// rules of its own -- Share, for the no-script float it alone writes -- appends them.
-	// The type faces ride only where they can load. A written page's policy is default-src
-	// 'none' with no font-src, so a data: font in one is fetched by nothing and would be tens of
-	// kilobytes of bytes no reader ever sees; those pages take the reader's own sans matched to
-	// Geist's metrics (_rapierArtifactStyles), which is the one difference between a Rapier
-	// document and its exported page. A print artifact renders inside this page, under this
-	// page's policy, so it keeps the real faces.
-	// The print page carries its faces as data: faces of its own, and a Will's carriers' font among them (the secure-runtime host prints this
-	// page, not the one it was made in). Its policy alone has font-src data:, which reaches no network, whether or not the page has a Will:
-	// with it only for a Will the same document would print in its faces with the Will and in the reader's own without (measured).
+	// Diagram geometry was measured with these exact fonts. Carry the same data fonts into
+	// offline pages; a fallback face would change labels inside fixed renderer geometry.
+	const diagramFonts = !!styledRoot.querySelector('svg.rapier-diagram,svg.rapier-native-flowchart');
+	const includeFonts = !!opts.print || diagramFonts;
+	const zenFontCss = styledRoot.querySelector('svg[aria-roledescription="zenuml"]')
+		? (_rapierProviders?.mermaid?.exportFontCss?.() || '') : '';
 	const willFont = opts.print && opts.willFont ? opts.willFont : null;
 	const settings = _rapierDocumentSettingsOf(context.canonical);
 	const settingsCss = _rapierDocumentSettingsCss(settings);
 	const pageTitle = settings && settings.title ? globalThis.RapierMarkdownSpec.documentTitle(settings) : metadata.filename;
-	const css = _rapierArtifactStyles(theme, !!opts.print, !!opts.print || opts.kind === 'standalone')
+	const css = _rapierArtifactStyles(theme, includeFonts, !!opts.print || opts.kind === 'standalone', opts.kind === 'page')
+		+ (zenFontCss ? '\n\n' + zenFontCss : '')
 		+ (opts.extraCss ? '\n\n' + opts.extraCss : '')
 		+ (willFont ? '\n\n@font-face{font-family:' + willFont.family + ';src:url(' + await _rapierBlobDataUrl(new Blob([willFont.bytes], { type: 'font/ttf' })) + ') format("truetype")}' : '')
 		+ (settingsCss ? '\n' + settingsCss : '');
@@ -90,11 +90,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 ? _rapierArtifactLayoutScript(styledRoot, nonce) : '';
+	const layoutScript = !opts.print && opts.kind !== 'page' ? _rapierArtifactLayoutScript(styledRoot, nonce) : '';
 	// The lexer for the page's code, under the same nonce, only when a block earned it: the CPU
 	// spans are the first paint, and where the reader's browser has WebGPU the lexer repaints them.
-	const lexerScript = !opts.print ? _rapierArtifactLexerScript(styledRoot, nonce) : '';
-	const inkScript = !opts.print ? _rapierArtifactInkScript(styledRoot, nonce) : '';
+	const lexerScript = !opts.print && opts.kind !== 'page' ? _rapierArtifactLexerScript(styledRoot, nonce) : '';
+	const inkScript = !opts.print && opts.kind !== 'page' ? _rapierArtifactInkScript(styledRoot, nonce) : '';
 	const page = '<!DOCTYPE html>\n'
 		+ '<html lang="en" data-rapier-theme="' + theme + '" data-highlights="' + highlights + '">\n'
 		+ '<head>\n<meta charset="UTF-8">\n' + (carrier ? RapierPageReturnAddress.PAGE_SEED + '\n' : '')
@@ -104,7 +104,7 @@ 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 || lexerScript || inkScript ? nonce : '', !!opts.print) + '">\n'
+		+ '<meta http-equiv="Content-Security-Policy" content="' + _rapierExportedPageCsp(layoutScript || lexerScript || inkScript ? nonce : '', includeFonts) + '">\n'
 		+ '<meta name="referrer" content="no-referrer">\n'
 		+ '<meta name="generator" content="Rapier ' + escapeRapierHtmlText(version) + '">\n'
 		+ '<title>' + escapeRapierHtmlText(pageTitle) + '</title>\n'
@@ -116,12 +116,31 @@ async function _rapierBuildArtifact(options, providedContext) {
 		html: page,
 		filename: base + '.html',
 		bodyHtml,
+		css,
 		docClass,
 		metadata,
 		documentTitle: settings && settings.title ? pageTitle : '',
 	};
 }
 
+// Page files have one byte representation across native and inert DOM hosts. Attribute
+// insertion order and a host's optional entity escapes are not document content.
+function _rapierPageHtml(root) {
+	const voidTags = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+	const children = node => Array.from(node.childNodes || [], write).join('');
+	function write(node) {
+		if (node.nodeType === 3) return escapeRapierHtmlText(node.nodeValue || '');
+		if (node.nodeType !== 1) return '';
+		// This writer emits text/html; the HTML reader restores SVG's camel-cased names.
+		const tag = node.localName.toLowerCase();
+		const attributes = Array.from(node.attributes).sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0)
+			.map(attribute => ' ' + attribute.name + '="' + escapeRapierHtmlText(attribute.value) + '"').join('');
+		const open = '<' + tag + attributes + '>';
+		return voidTags.has(tag) ? open : open + children(node) + '</' + tag + '>';
+	}
+	return children(root);
+}
+
 function _rapierProjectStyledRoot(semanticRoot, options) {
 	const opts = options || {};
 	const root = semanticRoot.cloneNode(true);
@@ -138,11 +157,12 @@ function _rapierProjectStyledRoot(semanticRoot, options) {
 		if (code) {
 			const lang = _rapierLanguageClass(code) || String(metadata.codeLang || '');
 			code.classList.add('artifact-code');
-			if (metadata.docKind === 'code') { _rapierPaintCode(code, _rapierArtifactHighlight(code.textContent || '', lang)); _rapierArtifactMarkLexed(code, lang); }
+			if (metadata.docKind === 'code' && !opts.sourceCode) { _rapierPaintCode(code, _rapierArtifactHighlight(code.textContent || '', lang)); _rapierArtifactMarkLexed(code, lang); }
 			if (lang) code.classList.add('language-' + String(lang).replace(/[^a-z0-9_-]/gi, ''));
 		}
 	} else {
 		root.querySelectorAll('pre > code').forEach(code => {
+			if (opts.sourceCode) return;
 			const lang = _rapierLanguageClass(code) || 'text';
 			_rapierPaintCode(code, _rapierArtifactHighlight(code.textContent || '', lang));
 			_rapierArtifactMarkLexed(code, lang);
@@ -184,7 +204,7 @@ function _rapierProjectStyledRoot(semanticRoot, options) {
 	_rapierPrefixPortableAnchors(root, opts.baseName || metadata.filename || 'document');
 
 	const clean = document.createElement('div');
-	clean.innerHTML = sanitizeRapierHtml(root.innerHTML, 'export');
+	clean.innerHTML = sanitizeRapierHtml(root.innerHTML, opts.sourceCode ? 'source' : 'export');
 	return clean;
 }
 

package/dist/spec/md-assets.mjs

@@ -370,7 +370,8 @@ export function serializeAsset(asset) {
   return '[' + asset.label + ']: ' + asset.url + title;
 }
 // Pure: re-derived at commit against the moved document; appends only at the text's end.
-export function appendAssetText(source, asset) {
+// A replay supplies the retained definition's line ending instead of choosing one from later prose.
+export function appendAssetText(source, asset, lineEnding) {
   if (typeof source !== 'string' || !asset || normalizeLabel(asset.label) !== asset.id) return fail('image_source_invalid');
   const parsed = documentAssets(source), title = assetTitle(asset.title);
   const existing = [...parsed.assets.values()].find(row => row.url === asset.url && row.title === title);
@@ -382,7 +383,7 @@ export function appendAssetText(source, asset) {
     return {source, id: asset.id, reference: asset.label, added: false, suffix: ''};
   }
   if (parsed.assets.size >= IMAGE_LIMITS.assets) return fail('image_asset_count_limit');
-  const eol = /\r\n|\n|\r/.exec(source)?.[0] || '\n', tail = /(?:\r\n?|\n)[ \t]*$/.exec(source);
+  const eol = lineEnding || /\r\n|\n|\r/.exec(source)?.[0] || '\n', tail = /(?:\r\n?|\n)[ \t]*$/.exec(source);
   const separator = !source || tail && /[\r\n][ \t]*$/.test(source.slice(0, tail.index)) ? '' : tail ? eol : eol + eol;
   const suffix = separator + block + eol, nextSource = source + suffix;
   if (nextSource.length > IMAGE_LIMITS.sourceChars) return fail('image_source_limit');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.1.79",
+  "version": "1.1.81",
   "description": "Read, render, write and style Self-contained Markdown, and carry its optional edit ledger: the shared HTML writer, semantic renderer, stylesheet, layout, marks, pictures, Will/1, replay, authorship and offline merge. MIT, no npm dependencies.",
   "keywords": [
     "markdown",

package/style.css

@@ -87,6 +87,36 @@
 	--md-diagram-c7:light-dark(#5eac56,#002104);
 	--md-diagram-c8:light-dark(#d485fc,#330033);
 	--md-diagram-c9:light-dark(#c9b49b,#4f3626);
+
+	--md-mermaid-surface:light-dark(#f2f1ee,#171b1e);
+	--md-mermaid-border:light-dark(#757b80,#929ba1);
+	--md-mermaid-grid:light-dark(#d0d4d6,#424a4f);
+	--md-mermaid-muted:light-dark(#525a60,#b7c0c5);
+	--md-mermaid-on-series:light-dark(#fff8ea,#11181c);
+	--md-mermaid-series-1:light-dark(#176e85,#6bc2d5);
+	--md-mermaid-series-2:light-dark(#b55b2a,#f1a172);
+	--md-mermaid-series-3:light-dark(#7652a0,#bda0e1);
+	--md-mermaid-series-4:light-dark(#34775c,#7fc4a4);
+	--md-mermaid-series-5:light-dark(#a34f68,#e79eb4);
+	--md-mermaid-series-6:light-dark(#896e23,#d8be68);
+	--md-mermaid-series-7:light-dark(#426caa,#92b7ed);
+	--md-mermaid-series-8:light-dark(#876144,#cba886);
+	--md-mermaid-series-9:light-dark(#55703a,#afc88e);
+	--md-mermaid-series-10:light-dark(#94633c,#e4b185);
+	--md-mermaid-series-11:light-dark(#8a5186,#d5a0cf);
+	--md-mermaid-series-12:light-dark(#476d70,#91b9ba);
+	--md-mermaid-tint-1:light-dark(#e0edf1,#1b3941);
+	--md-mermaid-tint-2:light-dark(#f5e6dc,#472e21);
+	--md-mermaid-tint-3:light-dark(#ebe4f2,#342941);
+	--md-mermaid-tint-4:light-dark(#e2eee7,#223b2e);
+	--md-mermaid-tint-5:light-dark(#f3e1e8,#432a33);
+	--md-mermaid-tint-6:light-dark(#f3edd9,#40391f);
+	--md-mermaid-tint-7:light-dark(#e2eaf6,#26354a);
+	--md-mermaid-tint-8:light-dark(#eee5dd,#3b3129);
+	--md-mermaid-tint-9:light-dark(#e8eddf,#303921);
+	--md-mermaid-tint-10:light-dark(#f1e5d9,#433122);
+	--md-mermaid-tint-11:light-dark(#f0e2ed,#3e2a3b);
+	--md-mermaid-tint-12:light-dark(#e2ecec,#263a3b);
 }
 .md-render{color-scheme:light}
 /* Geist and Geist Mono both have a 530/1000 x-height. Preserve their size and match a
@@ -135,6 +165,10 @@
 	margin: 0 0 var(--md-line);
 	max-width: 100%;
 	overflow: auto;
+	padding-block: 0.55rem 0.85rem;
+	background:
+		linear-gradient(var(--md-diagram-node-line), var(--md-diagram-node-line)) top / 100% 1px no-repeat,
+		linear-gradient(var(--md-diagram-node-line), var(--md-diagram-node-line)) bottom / 100% 1px no-repeat;
 }
 :where(.md-render) .diagram-block .diagram-source {
 	font-family: var(--md-font-mono);
@@ -145,7 +179,12 @@
 	margin: 0;
 	white-space: pre-wrap;
 }
-:where(.md-render) .diagram-block[data-diagram-state="ready"] .diagram-source {
+/* A drawing in progress keeps its source for the reader and for export, but does not flash
+   the fence across the page. The measured height, once known, holds the place. */
+:where(.md-render) .diagram-block:is([data-diagram-state="idle"],[data-diagram-state="pending"]) {
+	min-height: 5.25rem;
+}
+:where(.md-render) .diagram-block:is([data-diagram-state="ready"],[data-diagram-state="idle"],[data-diagram-state="pending"]) .diagram-source {
 	position: absolute;
 	width: 1px;
 	height: 1px;
@@ -159,70 +198,21 @@
 :where(.md-render) .diagram-block .diagram-cache {
 	max-width: 100%;
 }
-/* Mermaid owns its geometry and typography. Only known paint roles are themed here;
-   other families keep their generator's matching fill and ink. Authored inline pairs win. */
+/* Mermaid owns its geometry and typography. Its reference palette is projected onto SVG paint
+   at admission; only renderer paint omissions are corrected here. */
 :where(.md-render) svg.rapier-native-flowchart{display:block;margin-inline:auto;height:auto}
-:where(.md-render) svg.rapier-diagram{display:block;margin-inline:auto;height:auto}
-
-/* Recolour connectors without changing widths, dashes, marker contours or hollow interiors. */
-:where(.md-render) svg.rapier-diagram:is([aria-roledescription^="flowchart"],[aria-roledescription="classDiagram"],[aria-roledescription="stateDiagram"],[aria-roledescription="requirement"],[aria-roledescription="er"]) :is(path.flowchart-link,path.relation,path.relationshipLine,path.transition){stroke:var(--md-diagram-line)!important}
-:where(.md-render) svg.rapier-diagram:is([aria-roledescription^="flowchart"],[aria-roledescription="classDiagram"],[aria-roledescription="stateDiagram"],[aria-roledescription="requirement"],[aria-roledescription="er"],[aria-roledescription="sequence"],[aria-roledescription="c4"],[aria-roledescription="journey"]) marker{fill:var(--md-diagram-arrow)!important}
-
-/* Sequence surfaces and their labels move together between paper colours. */
-:where(.md-render) svg.rapier-diagram[aria-roledescription="sequence"] :is(rect.actor,rect.activation0,rect.activation1,rect.activation2,polygon.labelBox){fill:var(--md-diagram-node-fill)!important;stroke:var(--md-diagram-node-line)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="sequence"] :is(text.actor,text.labelText,text.loopText,text.messageText,text.sectionTitle),
-:where(.md-render) svg.rapier-diagram[aria-roledescription="sequence"] :is(text.actor,text.labelText,text.loopText,text.messageText,text.sectionTitle) tspan{fill:var(--md-color-text)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="sequence"] :is(text.sequenceNumber,text.sequenceNumber tspan){fill:var(--md-color-bg)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="sequence"] rect.note{fill:var(--md-color-inset)!important;stroke:var(--md-diagram-node-line)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="sequence"] :is(text.noteText,text.noteText tspan){fill:var(--md-color-text)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="sequence"] :is(line.messageLine0,line.messageLine1,path.messageLine0,path.messageLine1){stroke:var(--md-diagram-line)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="sequence"] :is(line.actor-line,line.loopLine){stroke:var(--md-diagram-inner-line)!important}
-
-/* A state begins with a dot, ends with a ring, and forks through a bar. */
-:where(.md-render) svg.rapier-diagram[aria-roledescription="stateDiagram"] :is(circle.state-start,rect.fork-join,circle.end-state-inner){fill:var(--md-color-text)!important;stroke:var(--md-color-text)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="stateDiagram"] circle.state-end{fill:var(--md-color-bg)!important;stroke:var(--md-color-text)!important}
-/* Compound-state frames follow the paper; their child states keep their own surfaces and ink. */
-:where(.md-render) svg.rapier-diagram[aria-roledescription="stateDiagram"] g.statediagram-cluster>rect.inner{fill:var(--md-color-bg)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="stateDiagram"] g.statediagram-cluster>g>rect.outer{fill:var(--md-diagram-node-fill)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="stateDiagram"] g.statediagram-cluster>.cluster-label :is(text,tspan){fill:var(--md-color-text)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="stateDiagram"] g.statediagram-cluster>.cluster-label :is(foreignObject,.nodeLabel){color:var(--md-color-text)!important}
+:where(.md-render) svg.rapier-diagram{display:block;margin-inline:auto;height:auto;text-rendering:optimizeLegibility}
 
-/* C4 node colours include their own label ink. Outside captions and connections use the page. */
-:where(.md-render) svg.rapier-diagram[aria-roledescription="c4"] text:not(.c4-shape *){fill:var(--md-color-text)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="c4"] :is(line,path)[stroke]:not(.c4-shape *):not(marker *):not(symbol *){stroke:var(--md-diagram-line)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="c4"] rect[fill="none"][stroke]:not(.c4-shape *){stroke:var(--md-diagram-node-line)!important}
-
-/* Journey cards pair their surface with both HTML and SVG label branches; faces keep their paints. */
-:where(.md-render) svg.rapier-diagram[aria-roledescription="journey"] rect:is(.journey-section,.task){fill:var(--md-diagram-node-fill)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="journey"] rect:is(.journey-section,.task)+switch :is(text,tspan){fill:var(--md-color-text)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="journey"] rect:is(.journey-section,.task)+switch foreignObject{color:var(--md-color-text)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="journey"]>text,
-:where(.md-render) svg.rapier-diagram[aria-roledescription="journey"] text.legend{fill:var(--md-color-text)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="journey"]>line{stroke:var(--md-diagram-line)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="journey"] line.task-line{stroke:var(--md-diagram-inner-line)!important}
-
-/* Gantt paint selectors name their element type: journey also uses the class "task" on text. */
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gantt"] rect:is(.section0,.section2){fill:var(--md-diagram-node-fill)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gantt"] rect:is(.section1,.section3){fill:var(--md-color-bg)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gantt"] rect.task{fill:var(--md-diagram-c1)!important;stroke:var(--md-diagram-c1)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gantt"] rect:is(.active0,.active1,.active2,.active3){fill:var(--md-diagram-c3)!important;stroke:var(--md-diagram-c3)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gantt"] rect:is(.done0,.done1,.done2,.done3){fill:var(--md-diagram-node-line)!important;stroke:var(--md-diagram-node-line)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gantt"] rect:is(.crit0,.crit1,.crit2,.crit3,.activeCrit0,.activeCrit1,.activeCrit2,.activeCrit3,.doneCrit0,.doneCrit1,.doneCrit2,.doneCrit3){fill:var(--md-diagram-c6)!important;stroke:var(--md-diagram-c6)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gantt"] text.taskText{fill:var(--md-diagram-on-colour)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gantt"] text:is(.taskTextOutsideRight,.taskTextOutsideLeft,.sectionTitle,.titleText){fill:var(--md-color-text)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gantt"] .grid .tick line{stroke:var(--md-diagram-inner-line)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gantt"] .grid .tick text{fill:var(--md-diagram-quiet)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gantt"] line.today{stroke:var(--md-diagram-c6)!important}
-
-/* Outside labels never acquire the ink intended for a coloured slice or branch. */
-:where(.md-render) svg.rapier-diagram[aria-roledescription="pie"] text.pieTitleText,
-:where(.md-render) svg.rapier-diagram[aria-roledescription="pie"] g.legend text,
-:where(.md-render) svg.rapier-diagram[aria-roledescription="timeline"]>text{fill:var(--md-color-text)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="timeline"] g.lineWrapper>line{stroke:var(--md-diagram-line)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gitGraph"] rect.commit-label-bkg{fill:var(--md-color-bg)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gitGraph"] text.commit-label{fill:var(--md-diagram-quiet)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gitGraph"] polygon.tag-label-bkg{fill:var(--md-diagram-node-fill)!important;stroke:var(--md-diagram-node-line)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription="gitGraph"] text.tag-label{fill:var(--md-color-text)!important}
+/* Radar gives these SVG labels a color declaration; SVG text needs a fill. */
+:where(.md-render) svg.rapier-diagram[aria-roledescription="radar"] :is(.radarTitle,.radarAxisLabel){fill:currentColor}
+/* Multiplying a ribbon by black paper makes its entire flow disappear. */
+:where(.md-render) svg.rapier-diagram[aria-roledescription="sankey"] .link{mix-blend-mode:normal!important}
+/* Captions keep their baseline while masking chart marks behind their letters. */
+:where(.md-render) svg.rapier-diagram[aria-roledescription="c4"] text:not(.c4-shape *),
+:where(.md-render) svg.rapier-diagram[aria-roledescription="architecture"] .architecture-service text,
+:where(.md-render) svg.rapier-diagram[aria-roledescription="wardley"] .wardley-node-label,
+:where(.md-render) svg.rapier-diagram[aria-roledescription="xychart"] [class^="line-plot-"]>.labels>text,
+:where(.md-render) svg.rapier-diagram[aria-roledescription="cynefin"] :is(text.cynefinSubtitle,text.cynefinArrowLabel,text.cynefinDomainLabel){paint-order:stroke fill;stroke:var(--md-color-bg)!important;stroke-width:2.5px;stroke-linejoin:round}
 
 /* Generator styles are removed at admission; these owned keyframes animate only dash offset. */
 @keyframes rapier-mermaid-dash{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
@@ -243,6 +233,9 @@
 	font-size: 0.88em;
 	opacity: .78;
 }
+:where(.md-render) .diagram-block--error .diagram-source {
+	max-height: 9rem;
+}
 
 /* The line model (the way a Word document reads). One line, --md-line, is the body's line box: 1.75rem, 1.6 lines
    of the 1.1rem body, a whole 28 px at the browser's 16 px root so baselines land on pixels. Every block ends one