rapier-markdown-kit 1.1.78 → 1.1.79

package/dist/kit/render-sanitize.mjs

@@ -24,19 +24,42 @@ const RAPIER_SANITIZE_OPTIONS = Object.freeze({
 	}),
 });
 
-// Snapshot current math text before a Markdown writer collapses whitespace. The parsed copy
-// stays inert; the writer still admits raw source through its shared math grammar.
+const DIAGRAM_LABEL_HTML = new Set('div span p br strong em b i s u del code sub sup'.split(' '));
+const DIAGRAM_LABEL_MATH = new Set(('math mrow mi mn mo mtext mspace ms msub msup msubsup mfrac msqrt mroot mstyle merror '
+	+ 'mpadded mphantom mfenced menclose munder mover munderover mtable mtr mtd mlabeledtr mmultiscripts mprescripts none semantics').split(' '));
+const DIAGRAM_LABEL_MATH_ATTRIBUTES = new Set(('display mathvariant mathsize mathcolor mathbackground dir accent accentunder '
+	+ 'columnalign columnlines columnspacing columnspan columnwidth depth displaystyle equalcolumns equalrows fence frame framespacing '
+	+ 'height largeop linebreak linethickness lspace maxsize minsize movablelimits notation rowalign rowlines rowspacing rowspan rspace '
+	+ 'scriptlevel scriptminsize scriptsizemultiplier separator stretchy subscriptshift superscriptshift valign voffset width').split(' '));
+const DIAGRAM_LABEL_CLASSES = new Set('nodeLabel edgeLabel labelBkg markdown-node-label katex messageText'.split(' '));
+const DIAGRAM_LABEL_CSS = new Set(('color fill stroke background-color font-family font-size font-style font-weight font-variant '
+	+ 'font-variant-ligatures font-feature-settings line-height letter-spacing word-spacing text-align vertical-align white-space '
+	+ 'word-break overflow-wrap text-wrap text-transform text-decoration text-decoration-line text-decoration-style text-decoration-color '
+	+ 'text-decoration-thickness text-underline-offset align-items align-content justify-content justify-items flex-direction flex-wrap '
+	+ 'width height min-width min-height max-width max-height margin margin-top margin-right margin-bottom margin-left '
+	+ 'padding padding-top padding-right padding-bottom padding-left').split(' '));
+const DIAGRAM_LABEL_SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const DIAGRAM_LABEL_HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
+const DIAGRAM_LABEL_MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
+
+// Snapshot current math text before a Markdown writer collapses whitespace. Rendered SVG
+// glyphs have no textContent: put their retained source in this inert copy so the writer's
+// blank-node rule cannot discard an equation or its containing paragraph/list item.
 function prepareMathSource(input, DOMParser) {
 	const html = typeof input === 'string';
-	const MARK = 'span[data-rapier-math-source]';
-	if (html ? !/data-rapier-math-source/i.test(input) : typeof input?.cloneNode !== 'function' ||
+	const MARK = 'span[data-rapier-math-source],span.math-rendered[data-math-src]';
+	if (html ? !/data-(?:rapier-math-source|math-src)/i.test(input) : typeof input?.cloneNode !== 'function' ||
 		!(input.matches?.(MARK) || input.querySelector?.(MARK))) return input;
 	const root = html ? new DOMParser().parseFromString(
 		'<x-turndown id="turndown-root">' + input + '</x-turndown>', 'text/html').getElementById('turndown-root') : input.cloneNode(true);
 	const nodes = Array.from(root.querySelectorAll(MARK));
-	const sourceRoot = root.nodeName === 'SPAN' && root.hasAttribute('data-rapier-math-source');
+	const sourceRoot = root.nodeName === 'SPAN' && root.matches(MARK);
 	if (sourceRoot) nodes.push(root);
 	for (const node of nodes) {
+		if (node.classList.contains('math-rendered') && node.hasAttribute('data-math-src')) {
+			try { node.textContent = decodeURIComponent(node.getAttribute('data-math-src')); } catch (_) {}
+			continue;
+		}
 		try { node.setAttribute('data-rapier-math-source', encodeURIComponent(node.textContent || '')); }
 		catch (_) { node.removeAttribute('data-rapier-math-source'); }
 	}
@@ -47,6 +70,89 @@ function prepareMathSource(input, DOMParser) {
 function createRenderSanitizer(runtime) {
   const {CSSStyleSheet, DOMPurify, RAPIER_RASTER_DATA_URL_RE, URL, _rapierCssDeclaration, _rapierDropRemoteDeclarations, _rapierRemoteContent, _rapierRuleDescriptorIsRemote, _rapierSanitizeRuntime, _rapierVerifyRasterBytes, document, globalThis, location} = runtime;
 
+// Only the diagram reader and its styled export admit static foreignObject labels. The
+// ordinary SVG reader still rejects HTML subdocuments. The export class selects scope;
+// every descendant is checked again, so a copied class never confers authority.
+function diagramLabelRoot(node) {
+	for (let current = node; current?.nodeType === 1; current = current.parentElement) {
+		if (current.localName?.toLowerCase() === 'foreignobject') return current;
+	}
+	return null;
+}
+
+function diagramLabelStyle(property, value) {
+	property = String(property).toLowerCase();
+	value = String(value).trim();
+	if (property === 'display') return /^(?:none|block|inline|inline-block|table|table-cell|flex|inline-flex)$/.test(value);
+	if (/^overflow(?:-[xy])?$/.test(property)) return /^(?:hidden|clip)$/.test(value);
+	if (property === 'contain') return value === 'content';
+	if (property === 'isolation') return value === 'isolate';
+	if (!DIAGRAM_LABEL_CSS.has(property)) return false;
+	const declaration = document.createElement('span').style;
+	declaration.setProperty(property, value);
+	const parsed = declaration.getPropertyValue(property);
+	if (!parsed || /(?:url|image-set|element|paint|attr)\s*\(/i.test(parsed)) return false;
+	// SVG paint accepts resource references; a custom property must not smuggle one in.
+	return !/^(?:fill|stroke)$/.test(property) || !/var\s*\(/i.test(parsed);
+}
+
+function diagramLabelElement(node) {
+	if (node.nodeType !== 1) return;
+	const label = diagramLabelRoot(node);
+	if (!label) return;
+	if (node === label) {
+		const svg = node.parentElement?.closest('svg');
+		if (node.namespaceURI !== DIAGRAM_LABEL_SVG_NAMESPACE || !svg || diagramLabelRoot(node.parentElement) ||
+				(_rapierSanitizeRuntime.context !== 'diagram' && !svg.classList.contains('rapier-diagram'))) node.remove();
+		return;
+	}
+	const name = node.localName?.toLowerCase();
+	if (!(node.namespaceURI === DIAGRAM_LABEL_HTML_NAMESPACE && DIAGRAM_LABEL_HTML.has(name)) &&
+			!(node.namespaceURI === DIAGRAM_LABEL_MATH_NAMESPACE && DIAGRAM_LABEL_MATH.has(name))) node.remove();
+}
+
+function diagramLabelAttribute(node, data) {
+	const label = diagramLabelRoot(node);
+	if (!label) return;
+	data.forceKeepAttr = false;
+	const name = String(data.attrName).toLowerCase();
+	const value = String(data.attrValue);
+	if (name === 'style') {
+		const declaration = document.createElement('span').style;
+		declaration.cssText = value;
+		for (const property of Array.from(declaration)) {
+			if (!diagramLabelStyle(property, declaration.getPropertyValue(property))) declaration.removeProperty(property);
+		}
+		data.attrValue = declaration.cssText;
+		data.keepAttr = !!data.attrValue;
+		return;
+	}
+	if (name === 'class') {
+		data.attrValue = value.split(/\s+/).filter(token => DIAGRAM_LABEL_CLASSES.has(token)).join(' ');
+		data.keepAttr = !!data.attrValue;
+		return;
+	}
+	if (name === 'xmlns') {
+		data.keepAttr = value === node.namespaceURI;
+		return;
+	}
+	if (node === label) {
+		data.keepAttr = name === 'transform' || /^(?:x|y|width|height)$/.test(name) &&
+			/^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[-+]?\d+)?(?:px|%)?$/i.test(value) && Number.isFinite(parseFloat(value)) &&
+			(!/^(?:width|height)$/.test(name) || parseFloat(value) >= 0);
+		return;
+	}
+	data.keepAttr = node.namespaceURI === DIAGRAM_LABEL_MATH_NAMESPACE
+		? DIAGRAM_LABEL_MATH_ATTRIBUTES.has(name)
+		: name === 'dir' && /^(?:ltr|rtl|auto)$/.test(value);
+}
+
+function diagramLabelContained(node) {
+	const label = diagramLabelRoot(node);
+	if (!label) return;
+	if (node === label) node.style.setProperty('overflow', 'hidden', 'important');
+	else if (node.parentElement === label) node.style.setProperty('contain', 'content', 'important');
+}
 
 function _rapierInstallSanitizeHooks() {
 	DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
@@ -148,11 +254,24 @@ function sanitizeRapierHtml(value, context = 'render') {
 	// (the hook) without an id the chrome owns. 'source' is Markdown source HTML, written and never shown: the render
 	// profile's admission, and the block on remote content stays the reader's (a remote picture's URL is the person's words).
 	const selected = context === 'raw' || context === 'export' || context === 'source' || RAPIER_SANITIZE_OPTIONS[context] ? context : 'render';
-	const options = selected === 'raw' ? { ...RAPIER_SANITIZE_OPTIONS.render, ALLOW_DATA_ATTR: false } : RAPIER_SANITIZE_OPTIONS[selected] || RAPIER_SANITIZE_OPTIONS.render;
+	let options = selected === 'raw' ? { ...RAPIER_SANITIZE_OPTIONS.render, ALLOW_DATA_ATTR: false } : RAPIER_SANITIZE_OPTIONS[selected] || RAPIER_SANITIZE_OPTIONS.render;
+	const labels = selected === 'diagram' || selected === 'export';
+	if (labels) {
+		options = {...options, USE_PROFILES: {...options.USE_PROFILES, mathMl: true}, ADD_TAGS: ['foreignobject'],
+			HTML_INTEGRATION_POINTS: {foreignobject: true}, FORBID_TAGS: options.FORBID_TAGS.filter(tag => tag !== 'foreignobject')};
+		DOMPurify.addHook('uponSanitizeElement', diagramLabelElement);
+		DOMPurify.addHook('uponSanitizeAttribute', diagramLabelAttribute);
+		DOMPurify.addHook('afterSanitizeAttributes', diagramLabelContained);
+	}
 	_rapierSanitizeRuntime.context = selected;
 	try {
 		return DOMPurify.sanitize(value == null ? '' : String(value), options);
 	} finally {
+		if (labels) {
+			DOMPurify.removeHook('uponSanitizeElement', diagramLabelElement);
+			DOMPurify.removeHook('uponSanitizeAttribute', diagramLabelAttribute);
+			DOMPurify.removeHook('afterSanitizeAttributes', diagramLabelContained);
+		}
 		_rapierSanitizeRuntime.context = 'render';
 	}
 }
@@ -237,6 +356,6 @@ function _rapierDropRemoteRules(rules, owner) {
 	}
 }
 
-  return {_rapierInstallSanitizeHooks, sanitizeRapierHtml, escapeRapierHtmlText, _rapierChromeOwnsId, _rapierSafeRasterDataUrl, _rapierCssPresentationIsRemote, _rapierRemoteSubresourceOrigin, _rapierStyleWithoutRemoteUrls, _rapierStylesheetWithoutRemoteUrls, _rapierDropRemoteRules};
+  return {_rapierInstallSanitizeHooks, sanitizeRapierHtml, diagramLabelStyle, escapeRapierHtmlText, _rapierChromeOwnsId, _rapierSafeRasterDataUrl, _rapierCssPresentationIsRemote, _rapierRemoteSubresourceOrigin, _rapierStyleWithoutRemoteUrls, _rapierStylesheetWithoutRemoteUrls, _rapierDropRemoteRules};
 }
 export {RAPIER_SANITIZE_FORBID_TAGS as forbidTags, RAPIER_SANITIZE_FORBID_ATTR as forbidAttributes, createRenderSanitizer, RAPIER_SANITIZE_OPTIONS as options, prepareMathSource};

package/dist/kit/render.mjs

@@ -157,7 +157,7 @@ function _rapierProjectStyledRoot(semanticRoot, options) {
 		});
 
 		root.querySelectorAll('math[display="block"]').forEach(math => {
-			if (math.closest('.math-display-wrap')) return;
+			if (math.closest('svg') || math.closest('.math-display-wrap')) return;
 			const wrap = document.createElement('span');
 			wrap.className = 'math-display-wrap';
 			math.parentNode.insertBefore(wrap, math);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.1.78",
+  "version": "1.1.79",
   "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

@@ -159,193 +159,78 @@
 :where(.md-render) .diagram-block .diagram-cache {
 	max-width: 100%;
 }
-/* ---------------------------------------------------------------------------------------------
-   What a diagram is drawn with. Mermaid packs its own light theme into a <style> inside every
-   drawing it makes, scoped to that drawing's own id -- `#rapier-dN .node rect` -- so on dark
-   paper a diagram arrived as a strip of white cards holding black type, and a state diagram's
-   transitions were drawn in #000 on #000: a state machine with no visible transitions. Rapier
-   repaints them from the theme's own tokens instead of configuring a second Mermaid theme
-   beside it. The theme stays the one owner of colour, and a theme change carries every diagram
-   already on the page, because nothing has to be drawn again.
-
-   Materialization resolves the sanitized generator rules to inline presentation declarations.
-   Generator defaults yield to this palette; authored style/classDef fills and strokes carry
-   a light-dark pair above it, keeping their light colour and the shared dark derivation.
-   The same class reaches rendered blocks and source previews: the owner
-   marks each admitted drawing `rapier-diagram`, which remains stable when export namespaces
-   local SVG IDs and references. */
+/* 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. */
 :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;
-	font-family:var(--md-font-sans)!important;
-	font-size:var(--md-text-sm)!important;
-	fill:var(--md-color-text)!important;
-}
-:where(.md-render) svg.rapier-diagram text,:where(.md-render) svg.rapier-diagram tspan,:where(.md-render) svg.rapier-diagram .nodeLabel,:where(.md-render) svg.rapier-diagram .messageText,:where(.md-render) svg.rapier-diagram text.actor>tspan,:where(.md-render) svg.rapier-diagram .noteText>tspan,:where(.md-render) svg.rapier-diagram .loopText>tspan,:where(.md-render) svg.rapier-diagram .labelText>tspan{
-	font-family:var(--md-font-sans)!important;fill:var(--md-color-text)!important;
-}
-/* Rapier's diagram look, one for a figure an agent lays out in Draw and for the drawing Mermaid makes from the
-   author's source (Draw writes the same pairs into its SVG; _diagram-cells holds the two copies equal). Swiss
-   editorial after the mid-century magazines: nearly monochrome, a box or a decision a flat field of one grey with no
-   outline, the words the page's own type in its ink; the one accent is spent sparingly, on meaning only -- the outcome
-   (a round node, where a flow ends) under black words. It keeps the corner the source asked for: a stadium, a diamond and
-   a parallelogram are what the author wrote; the roundings Mermaid adds to a plain box, an actor, a note and a
-   cluster are not, and Rapier's boxes are square. An author's own style or classDef fill and stroke stay above all
-   of it (they are materialised inline, and an inline declaration outranks this sheet). */
-:where(.md-render) svg.rapier-diagram .node :is(rect,circle,ellipse,polygon,path){
-	fill:var(--md-diagram-box)!important;stroke:none!important;
-}
-:where(.md-render) svg.rapier-diagram[aria-roledescription^="flowchart"] .node:has(>circle) :is(circle,path){fill:var(--md-diagram-accent)!important}
-:where(.md-render) svg.rapier-diagram[aria-roledescription^="flowchart"] .node:has(>circle) :is(text,tspan){fill:var(--md-diagram-on-accent)!important}
-:where(.md-render) svg.rapier-diagram g.classGroup rect,:where(.md-render) svg.rapier-diagram .actor,:where(.md-render) svg.rapier-diagram .labelBox,:where(.md-render) svg.rapier-diagram .activation0,:where(.md-render) svg.rapier-diagram .activation1,:where(.md-render) svg.rapier-diagram .activation2{
-	fill:var(--md-diagram-node-fill)!important;stroke:var(--md-diagram-node-line)!important;stroke-width:var(--md-diagram-hairline)!important;
-}
-/* A group (a subgraph, a composite state) is a typographic band, not a frame: its title in the caption's spaced
-   mono capitals above its members, the paper left open around them. */
-:where(.md-render) svg.rapier-diagram :is(.cluster,.statediagram-cluster) rect{fill:none!important;stroke:none!important}
-:where(.md-render) svg.rapier-diagram :is(.cluster-label,.cluster .label) :is(text,tspan){
-	font-family:var(--md-font-mono)!important;font-size:var(--md-diagram-caption-size)!important;text-transform:uppercase;letter-spacing:var(--md-diagram-title-track)!important;
-}
-:where(.md-render) svg.rapier-diagram .classTitle,:where(.md-render) svg.rapier-diagram text.actor>tspan{font-weight:var(--md-fw-medium)!important}
-:where(.md-render) svg.rapier-diagram :is(.nodeLabel,.node text,.node tspan){font-weight:var(--md-fw-semibold)!important}
-:where(.md-render) svg.rapier-diagram rect.basic,:where(.md-render) svg.rapier-diagram rect.title-state,:where(.md-render) svg.rapier-diagram rect.outer,:where(.md-render) svg.rapier-diagram .actor,:where(.md-render) svg.rapier-diagram .note,:where(.md-render) svg.rapier-diagram .labelBox,:where(.md-render) svg.rapier-diagram .cluster rect,:where(.md-render) svg.rapier-diagram .statediagram-cluster rect{rx:0!important;ry:0!important}
-/* The line between two boxes is mid-ladder and one hairline weight everywhere: it is the road,
-   not the destination. A lifeline and a divider are neither -- they are a box's own rule down
-   or across the page -- and drop to the faintest step there is. */
-:where(.md-render) svg.rapier-diagram .edgePath .path,:where(.md-render) svg.rapier-diagram .flowchart-link,:where(.md-render) svg.rapier-diagram .relation,:where(.md-render) svg.rapier-diagram .transition,:where(.md-render) svg.rapier-diagram .messageLine0,:where(.md-render) svg.rapier-diagram .messageLine1,:where(.md-render) svg.rapier-diagram .er.relationshipLine,:where(.md-render) svg.rapier-diagram g.stateGroup line{
-	stroke:var(--md-diagram-line)!important;stroke-width:var(--md-diagram-stroke)!important;fill:none!important;
-}
-/* `line[id^="actor"]` is the lifeline. It is not `.actor-line`: Mermaid writes the actor's own
-   WIDTH into that element's class attribute (`class="200"`), so the class it documents matches
-   nothing, and the lifeline fell through to Mermaid's bare `#rapier-dN line` rule and came out a
-   2px near-white rail down the page -- the brightest thing in a sequence diagram, for a line that
-   only says "this actor is still here". The id is what the element actually carries. */
-:where(.md-render) svg.rapier-diagram .actor-line,:where(.md-render) svg.rapier-diagram .loopLine,:where(.md-render) svg.rapier-diagram .divider,:where(.md-render) svg.rapier-diagram g.classGroup line,:where(.md-render) svg.rapier-diagram .statediagram-state .divider{
-	stroke:var(--md-diagram-inner-line)!important;stroke-width:1px!important;
-}
-/* One stroke weight for every connector, in the ink, and its head a solid closed triangle of the same ink with no
-   outline of its own, so its point is the stroke's and not a rounded burr. Mermaid marks some of these `!important`
-   under the drawing's id, which nothing here could outrank -- but the shape inside a marker declares no fill of its
-   own, so a declaration on the shape itself wins over anything it would otherwise inherit. What is hollow stays
-   hollow: a hollow triangle is inheritance and a filled one is not. */
-:where(.md-render) svg.rapier-diagram marker path,:where(.md-render) svg.rapier-diagram .marker{
-	fill:var(--md-diagram-arrow)!important;stroke:none!important;
-}
-:where(.md-render) svg.rapier-diagram marker path[fill="none"],:where(.md-render) svg.rapier-diagram .marker.extension path,:where(.md-render) svg.rapier-diagram .marker.aggregation path,:where(.md-render) svg.rapier-diagram .marker.lollipop path{
-	fill:var(--md-color-bg)!important;stroke:var(--md-diagram-arrow)!important;stroke-width:var(--md-diagram-hairline)!important;
-}
-:where(.md-render) svg.rapier-diagram marker circle{fill:var(--md-color-bg)!important;stroke:var(--md-diagram-arrow)!important}
-/* A label on a line sits in a gap it cuts in that line, on the page's own paper -- not in the
-   translucent grey sticker Mermaid lays over the line and its arrow head. */
-:where(.md-render) svg.rapier-diagram .edgeLabel rect,:where(.md-render) svg.rapier-diagram .labelBkg,:where(.md-render) svg.rapier-diagram .er.relationshipLabelBox,:where(.md-render) svg.rapier-diagram .er.relationshipLabelBox rect,:where(.md-render) svg.rapier-diagram .stateLabel .box,:where(.md-render) svg.rapier-diagram .classLabel .box{
-	fill:var(--md-color-bg)!important;stroke:none!important;opacity:1!important;
-}
-:where(.md-render) svg.rapier-diagram .edgeLabel text,:where(.md-render) svg.rapier-diagram .edgeLabel tspan,:where(.md-render) svg.rapier-diagram .er.relationshipLabel,:where(.md-render) svg.rapier-diagram .classLabel .label,:where(.md-render) svg.rapier-diagram .edgeTerminals{
-	fill:var(--md-diagram-quiet)!important;font-size:var(--md-text-xs)!important;
-}
-/* A connector's caption is set as the magazines set one: small spaced mono capitals in the ink, in the gap it
-   knocks out of its line. The label room measures it as it is drawn, capitals and tracking included. */
-:where(.md-render) svg.rapier-diagram .edgeLabel :is(text,tspan){
-	fill:var(--md-diagram-ink)!important;font-family:var(--md-font-mono)!important;font-size:var(--md-diagram-caption-size)!important;
-	text-transform:uppercase;letter-spacing:var(--md-diagram-caption-track)!important;
-}
-/* A note is an aside and takes the inset the rest of Rapier's asides take. ER reads as a table:
-   a headed box over rows that alternate by one step of the same surface, ruled between rows by
-   the faintest line so the rows read as one block rather than as a grid of little boxes. */
-:where(.md-render) svg.rapier-diagram .note,:where(.md-render) svg.rapier-diagram .statediagram-note rect{
-	fill:var(--md-color-inset)!important;stroke:var(--md-diagram-node-line)!important;
-}
-:where(.md-render) svg.rapier-diagram .er.entityBox{fill:var(--md-color-surface)!important;stroke:var(--md-diagram-node-line)!important}
-:where(.md-render) svg.rapier-diagram .er.attributeBoxOdd{fill:var(--md-color-bg)!important;stroke:var(--md-diagram-inner-line)!important}
-:where(.md-render) svg.rapier-diagram .er.attributeBoxEven{fill:var(--md-diagram-node-fill)!important;stroke:var(--md-diagram-inner-line)!important}
-/* An entity's name and its rows wear the same class in Mermaid's output and are told apart only
-   by the id it gives each cell (`...-attr-2-name`), so that is what tells them apart here: the
-   name is type, the cells are data. */
-:where(.md-render) svg.rapier-diagram .er.entityLabel[id*="-attr-"]{fill:var(--md-diagram-quiet)!important}
-:where(.md-render) svg.rapier-diagram .er.entityLabel:not([id*="-attr-"]){font-weight:var(--md-fw-medium)!important}
-/* A state machine starts on a filled dot and ends on a ringed one; both are ink on paper. */
-:where(.md-render) svg.rapier-diagram circle.state-start,:where(.md-render) svg.rapier-diagram .node .fork-join,:where(.md-render) svg.rapier-diagram .end-state-inner{fill:var(--md-color-text)!important;stroke:var(--md-color-text)!important}
-:where(.md-render) svg.rapier-diagram circle.state-end{fill:var(--md-color-bg)!important;stroke:var(--md-color-text)!important}
-/* The kinds that are colour by nature -- a pie's slices, a mindmap's branches, a timeline's periods,
-   a git graph's branches, a gantt chart's bars -- are drawn in the nine colours of the document
-   (rapier-notes.css, "The nine note colours"), the mate the theme gives a note card: the pale under
-   pure black ink on light paper, the deep under pure white ink on dark. Mermaid's own greys are a
-   light-paper drawing: on dark paper a mindmap and a timeline would become white cards under the
-   page's white type. The hex is copied here because a written page carries this sheet and not the
-   Notes sheet; mermaid-sanitised holds the two copies equal, pair for pair. The order keeps
-   neighbours apart: blue, orange, teal, pink, yellow, red, green, purple, brown. */
-:where(.md-render) svg.rapier-diagram{
-	font-variant-numeric:tabular-nums;
+: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}
+
+/* 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}
+
+/* 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}}
+:where(.md-render) svg.rapier-diagram[aria-roledescription^="flowchart"] :is(path,line,polyline).edge-animation-fast{animation:rapier-mermaid-dash 20s linear infinite!important}
+:where(.md-render) svg.rapier-diagram[aria-roledescription^="flowchart"] :is(path,line,polyline).edge-animation-slow{animation:rapier-mermaid-dash 50s linear infinite!important}
+@media (prefers-reduced-motion:reduce){
+	:where(.md-render) svg.rapier-diagram[aria-roledescription^="flowchart"] :is(path,line,polyline):is(.edge-animation-fast,.edge-animation-slow){animation:none!important;stroke-dashoffset:0!important}
 }
-/* One colour per branch, per section, per slice, in that order; the tenth wraps to the first. Mermaid's
-   own first colour is `section--1` (a timeline's first period; a mindmap's root, which is ink here, so a
-   mindmap's branches begin at the second), and a git graph counts its branches from 0. A shape takes the
-   colour, its words the ink that colour is paired with, its edge the colour itself. */
-:where(.md-render) svg.rapier-diagram :is(.section--1,.section-8,.section-edge--1,.section-edge-8,.commit0,.branch0,.label0,.arrow0){--md-diagram-colour:var(--md-diagram-c1)}
-:where(.md-render) svg.rapier-diagram :is(.section-0,.section-9,.section-edge-0,.section-edge-9,.commit1,.branch1,.label1,.arrow1){--md-diagram-colour:var(--md-diagram-c2)}
-:where(.md-render) svg.rapier-diagram :is(.section-1,.section-10,.section-edge-1,.section-edge-10,.commit2,.branch2,.label2,.arrow2){--md-diagram-colour:var(--md-diagram-c3)}
-:where(.md-render) svg.rapier-diagram :is(.section-2,.section-edge-2,.commit3,.branch3,.label3,.arrow3){--md-diagram-colour:var(--md-diagram-c4)}
-:where(.md-render) svg.rapier-diagram :is(.section-3,.section-edge-3,.commit4,.branch4,.label4,.arrow4){--md-diagram-colour:var(--md-diagram-c5)}
-:where(.md-render) svg.rapier-diagram :is(.section-4,.section-edge-4,.commit5,.branch5,.label5,.arrow5){--md-diagram-colour:var(--md-diagram-c6)}
-:where(.md-render) svg.rapier-diagram :is(.section-5,.section-edge-5,.commit6,.branch6,.label6,.arrow6){--md-diagram-colour:var(--md-diagram-c7)}
-:where(.md-render) svg.rapier-diagram :is(.section-6,.section-edge-6,.commit7,.branch7,.label7,.arrow7){--md-diagram-colour:var(--md-diagram-c8)}
-:where(.md-render) svg.rapier-diagram :is(.section-7,.section-edge-7){--md-diagram-colour:var(--md-diagram-c9)}
-:where(.md-render) svg.rapier-diagram .pieCircle:nth-of-type(9n+1),:where(.md-render) svg.rapier-diagram .legend:nth-of-type(9n+1){--md-diagram-colour:var(--md-diagram-c1)}
-:where(.md-render) svg.rapier-diagram .pieCircle:nth-of-type(9n+2),:where(.md-render) svg.rapier-diagram .legend:nth-of-type(9n+2){--md-diagram-colour:var(--md-diagram-c2)}
-:where(.md-render) svg.rapier-diagram .pieCircle:nth-of-type(9n+3),:where(.md-render) svg.rapier-diagram .legend:nth-of-type(9n+3){--md-diagram-colour:var(--md-diagram-c3)}
-:where(.md-render) svg.rapier-diagram .pieCircle:nth-of-type(9n+4),:where(.md-render) svg.rapier-diagram .legend:nth-of-type(9n+4){--md-diagram-colour:var(--md-diagram-c4)}
-:where(.md-render) svg.rapier-diagram .pieCircle:nth-of-type(9n+5),:where(.md-render) svg.rapier-diagram .legend:nth-of-type(9n+5){--md-diagram-colour:var(--md-diagram-c5)}
-:where(.md-render) svg.rapier-diagram .pieCircle:nth-of-type(9n+6),:where(.md-render) svg.rapier-diagram .legend:nth-of-type(9n+6){--md-diagram-colour:var(--md-diagram-c6)}
-:where(.md-render) svg.rapier-diagram .pieCircle:nth-of-type(9n+7),:where(.md-render) svg.rapier-diagram .legend:nth-of-type(9n+7){--md-diagram-colour:var(--md-diagram-c7)}
-:where(.md-render) svg.rapier-diagram .pieCircle:nth-of-type(9n+8),:where(.md-render) svg.rapier-diagram .legend:nth-of-type(9n+8){--md-diagram-colour:var(--md-diagram-c8)}
-:where(.md-render) svg.rapier-diagram .pieCircle:nth-of-type(9n),:where(.md-render) svg.rapier-diagram .legend:nth-of-type(9n){--md-diagram-colour:var(--md-diagram-c9)}
-/* Mindmap and timeline: the node is the colour, its words the colour's ink, the branch to it the
-   colour. The root is the page's own ink with the paper for its words, the one dark stone in the
-   middle; a timeline's event keeps no brightening filter (Mermaid lifts it 20%, off the pair). */
-:where(.md-render) svg.rapier-diagram :is(.section--1,.section-0,.section-1,.section-2,.section-3,.section-4,.section-5,.section-6,.section-7,.section-8,.section-9,.section-10) :is(rect,path,circle,polygon,ellipse){
-	fill:var(--md-diagram-colour)!important;stroke:var(--md-diagram-colour)!important;stroke-width:1px!important;
-}
-:where(.md-render) svg.rapier-diagram :is(.section--1,.section-0,.section-1,.section-2,.section-3,.section-4,.section-5,.section-6,.section-7,.section-8,.section-9,.section-10) :is(text,tspan){fill:var(--md-diagram-on-colour)!important}
-:where(.md-render) svg.rapier-diagram :is(.section--1,.section-0,.section-1,.section-2,.section-3,.section-4,.section-5,.section-6,.section-7,.section-8,.section-9,.section-10) line{stroke:var(--md-diagram-colour)!important;stroke-width:1px!important}
-:where(.md-render) svg.rapier-diagram :is(.section-edge--1,.section-edge-0,.section-edge-1,.section-edge-2,.section-edge-3,.section-edge-4,.section-edge-5,.section-edge-6,.section-edge-7,.section-edge-8,.section-edge-9,.section-edge-10){stroke:var(--md-diagram-colour)!important}
-:where(.md-render) svg.rapier-diagram .section-root :is(rect,path,circle,polygon,ellipse){fill:var(--md-color-text)!important;stroke:var(--md-color-text)!important}
-:where(.md-render) svg.rapier-diagram .section-root :is(text,tspan){fill:var(--md-color-bg)!important}
-:where(.md-render) svg.rapier-diagram .eventWrapper{filter:none!important}
-:where(.md-render) svg.rapier-diagram .lineWrapper line{stroke:var(--md-diagram-line)!important;stroke-width:1px!important}
-/* Pie: each slice its colour, cut from the next by a hairline of paper; its share in the colour's
-   ink; the legend's swatch the same colour. Mermaid draws the slices at 70% over a black rim. */
-:where(.md-render) svg.rapier-diagram .pieCircle{fill:var(--md-diagram-colour)!important;stroke:var(--md-color-bg)!important;stroke-width:2px!important;opacity:1!important}
-:where(.md-render) svg.rapier-diagram .pieOuterCircle{fill:none!important;stroke:none!important}
-:where(.md-render) svg.rapier-diagram .legend rect{fill:var(--md-diagram-colour)!important;stroke:var(--md-diagram-colour)!important}
-:where(.md-render) svg.rapier-diagram text.slice{fill:var(--md-diagram-on-colour)!important;font-size:var(--md-text-sm)!important;font-weight:var(--md-fw-medium)!important}
-/* A drawing's title is set as the page sets a small heading; Mermaid's timeline writes its title as a bare
-   <text> at 4ex bold, its pie at 25px and its gantt chart at 18px. */
-:where(.md-render) svg.rapier-diagram :is(.pieTitleText,.titleText),:where(.md-render) svg.rapier-diagram[aria-roledescription="timeline"]>text{
-	fill:var(--md-color-text)!important;font-size:var(--md-text-base)!important;font-weight:var(--md-fw-semibold)!important}
-/* Git graph: a branch is one colour -- its line, its commits, its merge arrows, its name's tab. */
-:where(.md-render) svg.rapier-diagram :is(.commit0,.commit1,.commit2,.commit3,.commit4,.commit5,.commit6,.commit7){fill:var(--md-diagram-colour)!important;stroke:var(--md-diagram-colour)!important}
-:where(.md-render) svg.rapier-diagram :is(.branch0,.branch1,.branch2,.branch3,.branch4,.branch5,.branch6,.branch7,.arrow0,.arrow1,.arrow2,.arrow3,.arrow4,.arrow5,.arrow6,.arrow7){stroke:var(--md-diagram-colour)!important;stroke-width:2px!important}
-:where(.md-render) svg.rapier-diagram :is(.label0,.label1,.label2,.label3,.label4,.label5,.label6,.label7){fill:var(--md-diagram-colour)!important;stroke:none!important}
-:where(.md-render) svg.rapier-diagram .branchLabel :is(text,tspan){fill:var(--md-diagram-on-colour)!important}
-:where(.md-render) svg.rapier-diagram :is(.commit-merge,.commit-reverse,.commit-highlight-inner){fill:var(--md-color-bg)!important}
-:where(.md-render) svg.rapier-diagram .commit-label-bkg{fill:var(--md-color-bg)!important;opacity:1!important}
-:where(.md-render) svg.rapier-diagram :is(.commit-label,.tag-label){fill:var(--md-diagram-quiet)!important;font-size:var(--md-text-xs)!important}
-:where(.md-render) svg.rapier-diagram :is(.tag-label-bkg,.tag-hole){fill:var(--md-diagram-node-fill)!important;stroke:var(--md-diagram-node-line)!important}
-/* Gantt: bands of the page's own ladder behind the rows, a plan's bar in the first colour, the one
-   under way in the third, the critical path in red, the done ones sunk to the quiet step; the grid
-   the faintest line and its dates the quiet ink, figures tabular so a column of dates lines up. */
-:where(.md-render) svg.rapier-diagram :is(.section0,.section2){fill:var(--md-diagram-node-fill)!important;opacity:1!important}
-:where(.md-render) svg.rapier-diagram :is(.section1,.section3){fill:var(--md-color-bg)!important;opacity:1!important}
-:where(.md-render) svg.rapier-diagram :is(.task0,.task1,.task2,.task3,.task){fill:var(--md-diagram-c1)!important;stroke:var(--md-diagram-c1)!important}
-:where(.md-render) svg.rapier-diagram :is(.active0,.active1,.active2,.active3){fill:var(--md-diagram-c3)!important;stroke:var(--md-diagram-c3)!important}
-:where(.md-render) svg.rapier-diagram :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 :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 .taskText{fill:var(--md-diagram-on-colour)!important}
-:where(.md-render) svg.rapier-diagram :is(.taskTextOutsideRight,.taskTextOutsideLeft,.sectionTitle){fill:var(--md-color-text)!important}
-:where(.md-render) svg.rapier-diagram .grid .tick line{stroke:var(--md-diagram-inner-line)!important;opacity:1!important}
-:where(.md-render) svg.rapier-diagram .grid path{stroke:none!important}
-:where(.md-render) svg.rapier-diagram .grid .tick text{fill:var(--md-diagram-quiet)!important;font-size:var(--md-text-xs)!important}
-:where(.md-render) svg.rapier-diagram .today{stroke:var(--md-diagram-c6)!important}
 /* Paper cannot be scrolled sideways, so on paper a diagram, and a wide drawing, go back to fitting the page. */
 @media print{
 	:where(.md-render) .diagram-block{overflow:visible!important}
@@ -603,8 +488,9 @@
 	vertical-align:middle;
 }
 .md-render p>.math-display-wrap{margin:calc(var(--md-line) / 4) 0 var(--md-line)}
-.md-render math[display="block"]{font-size:1.12em}
-.md-render math:not([display="block"]){font-size:1em}
+/* Diagram MathML keeps the metrics used by its renderer. */
+.md-render math[display="block"]:not(svg *){font-size:1.12em}
+.md-render math:not([display="block"]):not(svg *){font-size:1em}
 .md-render blockquote{margin:0 0 var(--md-line);
 	padding-block:var(--md-space-1);padding-inline-start:var(--md-space-4);padding-inline-end:0;
 	border-inline-start:calc(2 * var(--md-hair)) solid var(--md-color-border-focus);color:var(--md-color-text-secondary)}