privateboard 0.1.6 → 0.1.8

package/public/report.html

@@ -588,6 +588,168 @@
     border-top-width: 0;
   }
 
+  /* ─── Hide mermaid's internal render scratchpad ──────────────
+     During `mermaid.render(id, src)`, mermaid 10 briefly appends a
+     `<div id="dmermaid-...">` to document.body to measure layout +
+     produce the SVG. The div is removed once render() resolves,
+     but in the meantime it can flash visibly. Force it offscreen
+     so the user never sees mermaid's pre-takeover render at all.
+     The element still has natural dimensions for mermaid's layout
+     measurement — only its position + visibility is constrained. */
+  body > [id^="dmermaid-"] {
+    position: absolute !important;
+    left: -99999px !important;
+    top: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+  }
+
+  /* ─── Hide mermaid SVG until spine palette is applied ─────────
+     Pattern from user reports: "first time wrong, refresh OK" /
+     strict alternation (1st wrong, 2nd right, 3rd wrong, 4th
+     right). Cause: even with our continuous post-render takeover
+     (see report.html post-mermaid.run block), mermaid paints at
+     least once with its default palette BEFORE our takeover lands
+     — and the user sees that first paint. The takeover then
+     corrects it, but the user's already perceived "wrong colors."
+     On refresh, cached rendering may finish faster and the first
+     paint happens AFTER our takeover, which they perceive as
+     correct.
+     Defense: hide the SVG inside each pre.mermaid until we add
+     the `is-painted` class. The post-render takeover adds the
+     class as its last step. Until then, the user sees the frame
+     (matching the spine) with no SVG inside — no off-brand
+     colors flash at any point. */
+  .body pre.mermaid svg {
+    visibility: hidden;
+  }
+  .body pre.mermaid.is-painted svg {
+    visibility: visible;
+  }
+
+  /* ─── CSS-variable mermaid palette · timing-race-immune ──────
+     Final defense layer for the recurring "first time wrong,
+     refresh OK" bug. JS takeover fights timing with mermaid's
+     deferred render work; CSS doesn't have that problem — as
+     soon as the SVG is in the DOM, these rules apply. The
+     spine-specific colours are injected as CSS variables on
+     `:root` from JS in the swapSpine flow (see swapSpine /
+     mermaid.initialize block). Variables update when the spine
+     changes; CSS rules are static.
+
+     Specificity: each rule uses a 3-class+ chain plus
+     !important, beating mermaid's `.quadrant-fill { fill: ... }`
+     and any `fill="..."` presentation attribute. The element
+     selectors target every mermaid 10 chart-type's known
+     visual elements. */
+
+  /* Quadrant chart · 4 quadrant rects + data points */
+  .body pre.mermaid svg .quadrants .quadrant rect,
+  .body pre.mermaid svg g.quadrant > rect,
+  .body pre.mermaid svg [aria-roledescription="quadrantChart"] g.quadrant rect {
+    fill: var(--mm-q-fill, #1A1A18) !important;
+  }
+  .body pre.mermaid svg .data-points circle,
+  .body pre.mermaid svg circle.data-point,
+  .body pre.mermaid svg [aria-roledescription="quadrantChart"] .data-points circle {
+    fill: var(--mm-q-point, #C9A46B) !important;
+    stroke: var(--mm-q-bg, #1A1A18) !important;
+  }
+  .body pre.mermaid svg .quadrants line,
+  .body pre.mermaid svg .axis-line,
+  .body pre.mermaid svg .axisl-line,
+  .body pre.mermaid svg g.border line,
+  .body pre.mermaid svg [aria-roledescription="quadrantChart"] line,
+  .body pre.mermaid svg [aria-roledescription="quadrantChart"] g.border line {
+    stroke: var(--mm-q-border, #3A3934) !important;
+  }
+  .body pre.mermaid svg [aria-roledescription="quadrantChart"] text {
+    fill: var(--mm-q-text, #C8C5BE) !important;
+  }
+  .body pre.mermaid svg [aria-roledescription="quadrantChart"] .bottom-axis text,
+  .body pre.mermaid svg [aria-roledescription="quadrantChart"] .left-axis text,
+  .body pre.mermaid svg [aria-roledescription="quadrantChart"] .top-axis text,
+  .body pre.mermaid svg [aria-roledescription="quadrantChart"] .right-axis text {
+    fill: var(--mm-q-axis-text, #5C5A4D) !important;
+  }
+  .body pre.mermaid svg [aria-roledescription="quadrantChart"] .quadrant text {
+    fill: var(--mm-q-quad-text, #8E8B83) !important;
+  }
+
+  /* xychart-beta · bars cycle through palette via :nth-child */
+  .body pre.mermaid svg [aria-roledescription="xychart"] g[class*="bar-plot"] rect,
+  .body pre.mermaid svg [aria-roledescription="xychart"] g.plot rect {
+    fill: var(--mm-pal-0, #C9A46B) !important;
+    stroke: none !important;
+  }
+  .body pre.mermaid svg [aria-roledescription="xychart"] g[class*="bar-plot"] rect:nth-child(2),
+  .body pre.mermaid svg [aria-roledescription="xychart"] g.plot rect:nth-child(2) {
+    fill: var(--mm-pal-1, #B6B0A2) !important;
+  }
+  .body pre.mermaid svg [aria-roledescription="xychart"] g[class*="bar-plot"] rect:nth-child(3),
+  .body pre.mermaid svg [aria-roledescription="xychart"] g.plot rect:nth-child(3) {
+    fill: var(--mm-pal-2, #8E8B83) !important;
+  }
+  .body pre.mermaid svg [aria-roledescription="xychart"] g[class*="bar-plot"] rect:nth-child(n+4),
+  .body pre.mermaid svg [aria-roledescription="xychart"] g.plot rect:nth-child(n+4) {
+    fill: var(--mm-pal-3, #5C5A52) !important;
+  }
+  .body pre.mermaid svg [aria-roledescription="xychart"] text {
+    fill: var(--mm-axis-text, #5C5A4D) !important;
+  }
+  .body pre.mermaid svg [aria-roledescription="xychart"] .background,
+  .body pre.mermaid svg [aria-roledescription="xychart"] rect.background {
+    fill: transparent !important;
+  }
+
+  /* Pie · slice palette */
+  .body pre.mermaid svg path.pieCircle:nth-of-type(1) { fill: var(--mm-pal-0, #C9A46B) !important; stroke: var(--mm-q-bg, #1A1A18) !important; }
+  .body pre.mermaid svg path.pieCircle:nth-of-type(2) { fill: var(--mm-pal-1, #B6B0A2) !important; }
+  .body pre.mermaid svg path.pieCircle:nth-of-type(3) { fill: var(--mm-pal-2, #8E8B83) !important; }
+  .body pre.mermaid svg path.pieCircle:nth-of-type(n+4) { fill: var(--mm-pal-3, #5C5A52) !important; }
+  .body pre.mermaid svg circle.pieOuterCircle {
+    stroke: var(--mm-q-border, #3A3934) !important;
+    fill: none !important;
+  }
+
+  /* Universal text safety net inside any mermaid SVG · titleFill
+     for anything that escaped the per-type rules above. Lower
+     specificity than the type-specific rules so they still win. */
+  .body pre.mermaid svg text {
+    fill: var(--mm-text, #C8C5BE);  /* no !important · type-specific rules above WIN */
+  }
+
+  /* ─── Chart display sizes · CSS-enforced ─────────────────────
+     Mermaid 10.9.5's chartWidth/chartHeight config keys for
+     quadrantChart and xychart are silently ignored by the
+     bundled CDN build (verified via DOM dump showing default
+     500×500 viewBox even when chartWidth: 460 is configured).
+     CSS-enforced sizes via `max-width` on the rendered SVG let
+     us get refined-compact dimensions regardless of what
+     mermaid's config validator does. The viewBox stays at
+     mermaid's internal coordinate space (500×500 etc.) but the
+     displayed SVG scales down to our target size. Centered with
+     margin: 0 auto so the chart sits flush in the article column
+     instead of stretching to full width. */
+  .body pre.mermaid svg[aria-roledescription="quadrantChart"] {
+    max-width: 460px !important;
+    height: auto !important;
+    margin: 0 auto !important;
+    display: block !important;
+  }
+  .body pre.mermaid svg[aria-roledescription="xychart"] {
+    max-width: 560px !important;
+    height: auto !important;
+    margin: 0 auto !important;
+    display: block !important;
+  }
+  .body pre.mermaid svg[aria-roledescription="pie"] {
+    max-width: 420px !important;
+    height: auto !important;
+    margin: 0 auto !important;
+    display: block !important;
+  }
+
   /* ─── Metric-strip · spine-agnostic baseline ─────────────────────
      Editorial / Swiss register: oversized thin numerals top-left, mute
      mono label bottom-left, hairline grid (no card backgrounds, no
@@ -4783,6 +4945,31 @@
             },
           };
           const t = themes[spineKey];
+
+          // Inject spine palette as CSS variables on :root so the
+          // CSS rules in the global <style> block (mermaid spine
+          // CSS) resolve to the right colours. This is the
+          // PRIMARY mechanism — CSS applies on every paint, no JS
+          // timing race possible. The JS takeover below stays as
+          // belt-and-suspenders for chart elements not covered by
+          // the CSS rules.
+          try {
+            const root = document.documentElement.style;
+            root.setProperty('--mm-q-fill',     t.vars.quadrantFill);
+            root.setProperty('--mm-q-bg',       t.vars.background);
+            root.setProperty('--mm-q-point',    t.vars.pointFill);
+            root.setProperty('--mm-q-border',   t.vars.border);
+            root.setProperty('--mm-q-text',     t.vars.titleFill);
+            root.setProperty('--mm-q-axis-text', t.vars.axisText);
+            root.setProperty('--mm-q-quad-text', t.vars.quadrantText);
+            root.setProperty('--mm-text',       t.vars.titleFill);
+            root.setProperty('--mm-axis-text',  t.vars.axisText);
+            root.setProperty('--mm-pal-0', t.palette[0]);
+            root.setProperty('--mm-pal-1', t.palette[1]);
+            root.setProperty('--mm-pal-2', t.palette[2]);
+            root.setProperty('--mm-pal-3', t.palette[3]);
+          } catch (_) {}
+
           // Build pie / journey / state / git slice-color overrides
           // by cycling through the spine's monochrome `palette`.
           // Without these, mermaid 11+ paints pie1..pie12 +
@@ -5395,74 +5582,498 @@
               useMaxWidth: true,
             },
           });
-          await mermaid.run({ querySelector: ".mermaid" });
-          // ── Post-render colour forcing ───────────────────────────
-          // Mermaid 10's themeVariables don't fully replace built-in
-          // colour defaults on every chart type — quadrant fills,
-          // pie slices, journey faces and similar can leak the
-          // theme preset's primary colour (purple/violet on
-          // theme:"dark"). Walk every rendered SVG and force-set
-          // fills directly on the elements we know about. Bulletproof
-          // because it runs LAST, after mermaid's own paint.
-          try {
-            document.querySelectorAll('.mermaid svg').forEach((svg) => {
-              // ── Quadrant chart ──
-              // The four quadrant rects + internal/external borders +
-              // point dots. Mermaid 10 uses class `.quadrant-fill` on
-              // each filled rect inside the chart group.
-              svg.querySelectorAll('rect.quadrant-fill, .quadrant-fill').forEach((el) => {
-                el.setAttribute('fill', t.vars.quadrantFill);
+          // ── Off-screen render + paint-then-insert ────────────────
+          // DEFINITIVE fix for "first time wrong, refresh OK" /
+          // strict alternation pattern. Earlier strategies all let
+          // mermaid render in-place, then patched colors after —
+          // which gave the user a visible window of mermaid-default
+          // colors before our takeover landed.
+          //
+          // The only race-free approach: render OFFSCREEN, paint our
+          // spine palette onto the SVG while it's still detached,
+          // THEN insert into the visible DOM. The user's first paint
+          // sees the spine-colored SVG; there is no intermediate
+          // mermaid-default state to perceive.
+          //
+          // mermaid 10's `render(id, src)` returns the SVG as a
+          // string (not in-DOM) — perfect for this flow. We loop
+          // through every `pre.mermaid`, render its source via
+          // `mermaid.render`, parse the resulting string, apply the
+          // takeover to the parsed (still-detached) SVG, then swap
+          // the corrected SVG into the visible container.
+          // Belt-and-suspenders fill setter · sets BOTH the inline
+          // `style="fill: X !important"` AND the SVG `fill="X"`
+          // presentation attribute. With mermaid's embedded <style>
+          // already wiped, either layer is sufficient — but setting
+          // both means even if one is somehow stripped/overridden
+          // (browser quirk, late mermaid post-processing, CSS
+          // cascade edge case), the chart still renders in the
+          // spine palette.
+          const setFill = (el, c) => {
+            if (!c) return;
+            try { el.style.setProperty('fill', c, 'important'); } catch (_) {}
+            try { if (el.setAttribute) el.setAttribute('fill', c); } catch (_) {}
+          };
+          const setStroke = (el, c) => {
+            if (c === undefined || c === null) return;
+            try { el.style.setProperty('stroke', c, 'important'); } catch (_) {}
+            try { if (el.setAttribute) el.setAttribute('stroke', c); } catch (_) {}
+          };
+          const setColor = (el, c) => { if (c) el.style.setProperty('color', c, 'important'); };
+          const cyclePalette = (i) => t.palette[i % t.palette.length];
+
+          // Apply the spine palette to ONE SVG element (offscreen or
+          // onscreen — works either way since every fill/stroke is
+          // forced via inline `!important`). Pure function: no
+          // global queries, only operates on the passed element.
+          const applySpineToSvg = (svg) => {
+            try {
+              // ── 0. Pin the SVG max-width per chart type ──
+              // Mermaid 10's chartWidth/chartHeight config is silently
+              // ignored by the bundled CDN build, so the SVG ships at
+              // its default size with `style="max-width: 500px"`
+              // inline. CSS in <style> overrides it at paint time, but
+              // there's a one-frame race on cold loads where the
+              // user can perceive the unconstrained size before CSS
+              // applies. Pin via inline style with !important here
+              // for refined-compact dimensions on every first paint.
+              const role = svg.getAttribute('aria-roledescription') || '';
+              const chartMaxWidth = (
+                role === 'quadrantChart' ? '460px' :
+                role === 'xychart' ? '560px' :
+                role === 'pie' ? '420px' :
+                ''
+              );
+              if (chartMaxWidth) {
+                svg.style.setProperty('max-width', chartMaxWidth, 'important');
+                svg.style.setProperty('height', 'auto', 'important');
+                svg.style.setProperty('margin', '0 auto', 'important');
+                svg.style.setProperty('display', 'block', 'important');
+              }
+              // ── 1. Wipe mermaid's embedded <style> block ──
+              // Mermaid generates `<style>.quadrant-chart > .quadrant-
+              // point > circle { fill: #...; }` etc. inside each SVG;
+              // those CSS rules beat our setAttribute-set fills. After
+              // removal, our inline-style fills below have no rivals.
+              svg.querySelectorAll(':scope > style, defs > style').forEach((s) => s.remove());
+
+              // ── 2. SVG canvas / background ──
+              // Any rect that fills the whole SVG is the chart canvas;
+              // pin to t.vars.background so the chart blends with its
+              // spine frame instead of showing mermaid's default white.
+              const sw = parseFloat(svg.getAttribute('width') || '0');
+              svg.querySelectorAll(':scope > rect, :scope > g > rect.background, rect.main-bkg').forEach((el) => {
+                const w = parseFloat(el.getAttribute('width') || '0');
+                if (w > 0 && sw > 0 && w >= sw * 0.95) setFill(el, t.vars.background);
               });
-              // Defense for any rect inside .quadrant-chart that wasn't
-              // class-tagged (mermaid version drift). Skip the chart's
-              // outer container rect (full-svg-width).
-              const chartG = svg.querySelector('g.quadrant-chart, .quadrant-chart');
-              if (chartG) {
-                const svgWidth = parseFloat(svg.getAttribute('width') || '0');
-                chartG.querySelectorAll(':scope > g > rect, :scope > rect').forEach((el) => {
+
+              // ── 3. Quadrant chart ──
+              // Mermaid 10's actual class names (verified against rendered DOM):
+              //   `<g class="quadrant">` — group; each contains a child <rect>
+              //   `.quadrants` — outer parent group
+              //   `<circle class="data-point">` — each data circle
+              //   `.data-points` — parent group
+              //   `.axis-line` / `.axisl-line` — axis lines
+              //   `.bottom-axis`, `.left-axis` — axis text containers
+              // CRITICAL: the `.quadrant` class is on a <g>, but the
+              // actual fillable rect is INSIDE the group. Selecting
+              // `.quadrants > .quadrant` matches the <g> only;
+              // setting style.fill on a <g> does NOT override the
+              // child <rect>'s `fill="..."` attribute in SVG. We
+              // must select the inner rect directly.
+              //
+              // Belt-and-suspenders: also match ALL <rect> inside
+              // any quadrantChart SVG (excluding the canvas-bg rect
+              // we already handled via dimensions). Catches any
+              // mermaid version variation in class naming.
+              svg.querySelectorAll('.quadrants .quadrant rect, g.quadrant > rect, rect.quadrant, rect.quadrant-fill, .quadrant-fill').forEach((el) => setFill(el, t.vars.quadrantFill));
+              if (svg.getAttribute('aria-roledescription') === 'quadrantChart') {
+                const qsw = parseFloat(svg.getAttribute('width') || '0');
+                svg.querySelectorAll('rect').forEach((el) => {
+                  // Skip the canvas-bg rect (full-width).
                   const w = parseFloat(el.getAttribute('width') || '0');
-                  if (w > 0 && (svgWidth === 0 || w < svgWidth * 0.95)) {
-                    el.setAttribute('fill', t.vars.quadrantFill);
-                  }
+                  if (qsw > 0 && w >= qsw * 0.95) return;
+                  setFill(el, t.vars.quadrantFill);
                 });
               }
-              // Quadrant data points · pointFill (the spine's
-              // strongest brand colour for marker-style data) with a
-              // frame-bg stroke for separation from the quadrant fill.
-              svg.querySelectorAll('circle.quadrant-point, .quadrant-point circle, g.quadrant-point > circle').forEach((el) => {
-                el.setAttribute('fill', t.vars.pointFill);
-                el.setAttribute('stroke', t.vars.background);
+              // Quadrant border lines · mermaid 10 puts the outer
+              // rectangle + cross-divider lines inside `<g class="border">`,
+              // a sibling of `.quadrants` (NOT a descendant). Catch
+              // both the inside-quadrants axis-line case AND the
+              // border group case.
+              svg.querySelectorAll('.axis-line, .axisl-line, .quadrants line, g.border line, .border line').forEach((el) => setStroke(el, t.vars.border));
+              svg.querySelectorAll('.quadrant-internal-border, line.quadrant-internal-border').forEach((el) => setStroke(el, t.vars.inner));
+              svg.querySelectorAll('.quadrant-external-border, rect.quadrant-external-border').forEach((el) => {
+                setStroke(el, t.vars.border);
+                setFill(el, 'none');
               });
-              // ── Pie chart slices · cycle palette, force stroke ──
-              svg.querySelectorAll('path.pieCircle').forEach((el, i) => {
-                el.setAttribute('fill', t.palette[i % t.palette.length]);
-                el.setAttribute('stroke', t.vars.background);
+              svg.querySelectorAll('text.quadrant-title, .quadrant-title, .chart-title').forEach((el) => setFill(el, t.vars.titleFill));
+              // Quadrant labels (the 4 corner labels). Mermaid 10
+              // doesn't put them in a class; they're plain `<text>` inside
+              // each `.quadrant` group. Walk children of `.quadrant` text.
+              svg.querySelectorAll('.quadrant text, .quadrants text:not(.chart-title)').forEach((el) => setFill(el, t.vars.quadrantText));
+              svg.querySelectorAll('text.quadrant-text, text.quadrant-quadrant-1-text-fill, text.quadrant-quadrant-2-text-fill, text.quadrant-quadrant-3-text-fill, text.quadrant-quadrant-4-text-fill').forEach((el) => setFill(el, t.vars.quadrantText));
+              // Axis labels · "Low likelihood / High likelihood" etc.
+              svg.querySelectorAll('.bottom-axis text, .left-axis text, .top-axis text, .right-axis text, text.x-axis-text-label, text.y-axis-text-label, .quadrant-x-axis-label, .quadrant-y-axis-label').forEach((el) => setFill(el, t.vars.axisText));
+              // Data points · the load-bearing accent.
+              svg.querySelectorAll('.data-point, .data-points circle, circle.data-point, .quadrant-point > circle, g.quadrant-point > circle, circle.quadrant-point').forEach((el) => {
+                setFill(el, t.vars.pointFill);
+                setStroke(el, t.vars.background);
+              });
+              svg.querySelectorAll('.data-point text, .data-points text, text.point-text, .quadrant-point text').forEach((el) => setFill(el, t.vars.titleFill));
+
+              // ── 4. Pie chart ──
+              svg.querySelectorAll('path.pieCircle, g.pieCircle path, .slice').forEach((el, i) => {
+                setFill(el, cyclePalette(i));
+                setStroke(el, t.vars.background);
               });
-              // Pie outer ring border.
               svg.querySelectorAll('.pieOuterCircle, circle.pieOuterCircle').forEach((el) => {
-                el.setAttribute('stroke', t.vars.border);
-                el.setAttribute('fill', 'none');
+                setStroke(el, t.vars.border);
+                setFill(el, 'none');
+              });
+              svg.querySelectorAll('text.slice, text.pieLegendText, .legend text, g.legend text').forEach((el) => setFill(el, t.vars.titleFill));
+              svg.querySelectorAll('.pieTitleText').forEach((el) => setFill(el, t.vars.titleFill));
+
+              // ── 5. xychart-beta ──
+              // Bars cycle through palette; axes + grid + labels match
+              // the spine's neutrals.
+              svg.querySelectorAll('g.plot rect, g.bar-plot rect, g[class*="-plot"] rect, rect.bar').forEach((el, i) => {
+                // Skip the plot-background rect (full plot width).
+                const w = parseFloat(el.getAttribute('width') || '0');
+                if (w >= 200) return;
+                setFill(el, cyclePalette(i));
+                setStroke(el, 'none');
+              });
+              svg.querySelectorAll('.xy-chart .background, rect.background').forEach((el) => setFill(el, 'transparent'));
+              svg.querySelectorAll('.xy-chart text, g.xy-chart text, .xy-chart .x-axis text, .xy-chart .y-axis text').forEach((el) => setFill(el, t.vars.axisText));
+              svg.querySelectorAll('.xy-chart .x-axis path.domain, .xy-chart .y-axis path.domain, .xy-chart .x-axis line, .xy-chart .y-axis line').forEach((el) => setStroke(el, t.vars.titleFill));
+              svg.querySelectorAll('.xy-chart .grid line, .xy-chart line.grid').forEach((el) => setStroke(el, t.vars.inner));
+
+              // ── 6. Flowchart ──
+              svg.querySelectorAll('.flowchart .node rect, .flowchart .node circle, .flowchart .node ellipse, .flowchart .node polygon, .node rect, .node circle, .node polygon, .node ellipse').forEach((el) => {
+                setFill(el, t.vars.quadrantFill);
+                setStroke(el, t.vars.border);
+              });
+              svg.querySelectorAll('.flowchart-link, .edgePath path, .edgePath .path, path.flowchart-link').forEach((el) => {
+                setStroke(el, t.vars.border);
+                setFill(el, 'none');
+              });
+              svg.querySelectorAll('marker path, #arrowhead path, marker#arrowhead path').forEach((el) => {
+                setFill(el, t.vars.border);
+                setStroke(el, t.vars.border);
+              });
+              svg.querySelectorAll('.cluster rect').forEach((el) => {
+                setFill(el, t.vars.background);
+                setStroke(el, t.vars.border);
+              });
+              svg.querySelectorAll('.cluster text, .nodeLabel, .label foreignObject *').forEach((el) => {
+                setFill(el, t.vars.titleFill);
+                setColor(el, t.vars.titleFill);
+              });
+              svg.querySelectorAll('.edgeLabel, .edgeLabel foreignObject *').forEach((el) => {
+                setFill(el, t.vars.axisText);
+                setColor(el, t.vars.axisText);
+                el.style.setProperty('background-color', t.vars.background, 'important');
+              });
+
+              // ── 7. Mindmap ──
+              svg.querySelectorAll('.mindmap g.section circle, .mindmap-node circle, g.mindmap-node circle').forEach((el, i) => {
+                setFill(el, cyclePalette(i));
+                setStroke(el, t.vars.border);
               });
-              // ── Journey · face circles cycle palette ──
-              svg.querySelectorAll('circle.face-circle, .face-circle').forEach((el, i) => {
-                el.setAttribute('fill', t.palette[i % t.palette.length]);
+              svg.querySelectorAll('.mindmap g.section rect, .mindmap-node rect, g.mindmap-node rect').forEach((el, i) => {
+                setFill(el, cyclePalette(i));
+                setStroke(el, t.vars.border);
               });
-              // ── Generic SVG canvas guard · any rect that fills the
-              // entire SVG and was painted with mermaid's default
-              // primaryColor (could be off-brand on dark spines). Cap
-              // its fill to t.vars.background.
-              const root = svg.querySelector(':scope > rect, :scope > g > rect.background');
-              if (root) {
-                const w = parseFloat(root.getAttribute('width') || '0');
-                const sw = parseFloat(svg.getAttribute('width') || '0');
-                if (w > 0 && sw > 0 && w >= sw * 0.95) {
-                  root.setAttribute('fill', t.vars.background);
+              svg.querySelectorAll('.mindmap g.section polygon, .mindmap-node polygon, g.mindmap-node polygon').forEach((el, i) => {
+                setFill(el, cyclePalette(i));
+                setStroke(el, t.vars.border);
+              });
+              svg.querySelectorAll('.mindmap-edges path, .mindmap path.edge').forEach((el) => {
+                setStroke(el, t.vars.border);
+                setFill(el, 'none');
+              });
+              svg.querySelectorAll('.mindmap text, .mindmap-node text, g.mindmap-node text, .mindmap foreignObject *').forEach((el) => {
+                setFill(el, t.vars.titleFill);
+                setColor(el, t.vars.titleFill);
+              });
+
+              // ── 8. Sequence diagram ──
+              svg.querySelectorAll('rect.actor, .actor').forEach((el) => {
+                setFill(el, t.vars.quadrantFill);
+                setStroke(el, t.vars.border);
+              });
+              svg.querySelectorAll('line.actor-line, .actor-line').forEach((el) => setStroke(el, t.vars.border));
+              svg.querySelectorAll('text.actor, text.actor tspan, .actor-box-text, .messageText, text.messageText, .noteText, text.noteText, .note text').forEach((el) => setFill(el, t.vars.titleFill));
+              svg.querySelectorAll('.messageLine0, .messageLine1, line.messageLine0, line.messageLine1').forEach((el) => setStroke(el, t.vars.titleFill));
+              svg.querySelectorAll('rect.note, .note').forEach((el) => {
+                setFill(el, t.vars.accentSoft);
+                setStroke(el, t.vars.border);
+              });
+              svg.querySelectorAll('.activation0, .activation1, .activation2, rect.activation0, rect.activation1, rect.activation2').forEach((el) => {
+                setFill(el, t.vars.inner);
+                setStroke(el, t.vars.border);
+              });
+              svg.querySelectorAll('.labelBox, rect.labelBox').forEach((el) => {
+                setFill(el, t.vars.quadrantFill);
+                setStroke(el, t.vars.border);
+              });
+
+              // ── 9. State diagram ──
+              svg.querySelectorAll('.stateGroup rect, g.stateGroup rect, rect.state').forEach((el) => {
+                setFill(el, t.vars.quadrantFill);
+                setStroke(el, t.vars.border);
+              });
+              svg.querySelectorAll('.stateGroup circle, g.stateGroup circle').forEach((el) => {
+                setFill(el, t.vars.titleFill);
+                setStroke(el, t.vars.titleFill);
+              });
+              svg.querySelectorAll('.stateGroup line, line.transition, path.transition').forEach((el) => {
+                setStroke(el, t.vars.border);
+                setFill(el, 'none');
+              });
+              svg.querySelectorAll('.stateLabel, .state-description, .stateGroup text').forEach((el) => setFill(el, t.vars.titleFill));
+              svg.querySelectorAll('.compositeBackground, rect.compositeBackground').forEach((el) => {
+                setFill(el, t.vars.background);
+                setStroke(el, t.vars.border);
+              });
+
+              // ── 10. Journey ──
+              svg.querySelectorAll('.face-circle, circle.face-circle, .journey-section .face').forEach((el, i) => {
+                setFill(el, cyclePalette(i));
+                setStroke(el, t.vars.background);
+              });
+              svg.querySelectorAll('.journey-section text, .section text, .journey-section foreignObject *').forEach((el) => {
+                setFill(el, t.vars.titleFill);
+                setColor(el, t.vars.titleFill);
+              });
+              svg.querySelectorAll('rect.journey, .journey-section rect').forEach((el) => {
+                setFill(el, t.vars.quadrantFill);
+                setStroke(el, t.vars.border);
+              });
+
+              // ── 11. Gantt ──
+              svg.querySelectorAll('rect.task, rect.task0, rect.task1, rect.task2, rect.task3, rect.activeTask0, rect.activeTask1, rect.activeTask2, rect.activeTask3').forEach((el, i) => {
+                setFill(el, cyclePalette(i));
+                setStroke(el, 'none');
+              });
+              svg.querySelectorAll('rect.done, rect.done0, rect.done1, rect.done2, rect.done3, rect.doneTask').forEach((el) => {
+                setFill(el, t.vars.inner);
+                setStroke(el, t.vars.border);
+              });
+              svg.querySelectorAll('rect.crit, rect.crit0, rect.crit1, rect.crit2, rect.crit3').forEach((el) => {
+                setFill(el, t.vars.accent);
+                setStroke(el, t.vars.accent);
+              });
+              svg.querySelectorAll('.taskText, .taskTextOutsideRight, .taskTextOutsideLeft, text.taskText').forEach((el) => setFill(el, t.vars.titleFill));
+              svg.querySelectorAll('.tick text, g.tick text').forEach((el) => setFill(el, t.vars.axisText));
+              svg.querySelectorAll('.tick line, .grid line, g.tick line, g.grid line').forEach((el) => setStroke(el, t.vars.inner));
+              svg.querySelectorAll('.section0 text, .section1 text, .section2 text, .section3 text, .sectionTitle0, .sectionTitle1, .sectionTitle2, .sectionTitle3').forEach((el) => setFill(el, t.vars.axisText));
+              svg.querySelectorAll('line.today, .today').forEach((el) => setStroke(el, t.vars.accent));
+
+              // ── 12. Timeline ──
+              svg.querySelectorAll('.timeline rect, .timeline-section rect').forEach((el, i) => {
+                setFill(el, cyclePalette(i));
+                setStroke(el, t.vars.border);
+              });
+              svg.querySelectorAll('.timeline text, .timeline foreignObject *').forEach((el) => {
+                setFill(el, t.vars.titleFill);
+                setColor(el, t.vars.titleFill);
+              });
+              svg.querySelectorAll('.timeline path, .timeline-line').forEach((el) => {
+                setStroke(el, t.vars.border);
+                setFill(el, 'none');
+              });
+
+              // ── 13. Git graph ──
+              svg.querySelectorAll('.commit-bullets circle, circle.commit, .commit').forEach((el, i) => {
+                setFill(el, cyclePalette(i));
+                setStroke(el, t.vars.border);
+              });
+              svg.querySelectorAll('.commit-arrows path, path.commit-arrow, .commit-arrow').forEach((el) => {
+                setStroke(el, t.vars.border);
+                setFill(el, 'none');
+              });
+              svg.querySelectorAll('text.commit-label, .commit-label, .branch-label').forEach((el) => setFill(el, t.vars.titleFill));
+
+              // ── 14. Generic title (every chart type) ──
+              svg.querySelectorAll('text.titleText, .titleText, text.chart-title').forEach((el) => setFill(el, t.vars.titleFill));
+
+              // ── 15. Universal text safety net ──
+              // Any text element that survived the per-type passes
+              // without an inline style fill — pin to titleFill so no
+              // text leaks the mermaid-default purple/blue.
+              svg.querySelectorAll('text').forEach((el) => {
+                if (!el.style.fill) setFill(el, t.vars.titleFill);
+              });
+
+              // ── 16. Mark the parent pre.mermaid as painted ──
+              // CSS hides `.body pre.mermaid svg` until `.is-painted`
+              // is added on the parent. We add it here so that even
+              // when the SVG is later inserted into the live DOM, the
+              // CSS-based hide is already lifted (no flash).
+              const host = svg.closest('pre.mermaid');
+              if (host && !host.classList.contains('is-painted')) {
+                host.classList.add('is-painted');
+              }
+            } catch (forceColorErr) {
+              console.warn('[mermaid] palette takeover failed for svg:', forceColorErr);
+            }
+          };  // applySpineToSvg
+
+          // Wrapper · walks every onscreen SVG and applies the
+          // takeover. Used by the safety polling + MutationObserver
+          // (defense-in-depth) for any SVGs that were already
+          // inserted before the offscreen-render loop took over.
+          const applySpinePaletteOnce = () => {
+            document.querySelectorAll('.mermaid svg').forEach(applySpineToSvg);
+          };
+
+          // ── Offscreen render via mermaid.run + DOM relocation ─
+          // DEFINITIVE fix for "first load wrong / strict
+          // alternation." Keep mermaid.run (it handles lazy module
+          // loading for diagram types correctly — mermaid.render's
+          // first call races with that loading on cold cache),
+          // but move every pre.mermaid INTO AN OFFSCREEN CONTAINER
+          // before running. mermaid renders inside the offscreen
+          // container (user can't see it), we apply the spine
+          // takeover to every resulting SVG, then move each
+          // pre.mermaid back to its original DOM position. The
+          // user's first paint of each chart shows the
+          // spine-coloured SVG; no race possible.
+          //
+          // Diagnostic logs (console.info) so the user can verify
+          // which path was taken and at what timing — open DevTools
+          // and refresh; the log narrates the flow.
+          const _mLog = (msg, ...rest) => {
+            try { console.info(`[mermaid-spine] ${msg}`, ...rest); } catch (_) {}
+          };
+          _mLog('flow start · spine =', spineKey);
+          const charts = Array.from(document.querySelectorAll('pre.mermaid'));
+          _mLog('charts found:', charts.length);
+          if (charts.length > 0) {
+            // Capture original DOM positions so we can restore each
+            // pre.mermaid exactly where it was.
+            const anchors = charts.map((el) => ({
+              el,
+              parent: el.parentNode,
+              nextSibling: el.nextSibling,
+            }));
+            // Build the offscreen host. Width matches a typical
+            // article column so mermaid sizes the SVG correctly
+            // (useMaxWidth: true uses the offscreen container's
+            // dimensions for layout). Height: 0 + overflow: visible
+            // so mermaid can compute proper SVG sizes.
+            const offscreen = document.createElement('div');
+            offscreen.id = 'mermaid-offscreen-host';
+            offscreen.style.cssText = [
+              'position: absolute',
+              'left: -99999px',
+              'top: 0',
+              'width: 880px',
+              'visibility: hidden',
+              'pointer-events: none',
+              'z-index: -1',
+            ].join('; ');
+            document.body.appendChild(offscreen);
+            // Move each pre.mermaid into the offscreen host.
+            anchors.forEach((a) => offscreen.appendChild(a.el));
+            _mLog('moved offscreen, calling mermaid.run');
+            // Run mermaid · scoped to the offscreen host so it only
+            // touches elements we just moved. mermaid handles lazy
+            // module registration internally.
+            try {
+              await mermaid.run({ querySelector: '#mermaid-offscreen-host pre.mermaid' });
+              _mLog('mermaid.run resolved');
+            } catch (runErr) {
+              console.warn('[mermaid-spine] offscreen run failed:', runErr);
+            }
+            // Wait for mermaid's deferred post-render work to land.
+            // Quadrant chart (specifically) does d3-based label
+            // positioning in a setTimeout(0) AFTER mermaid.run
+            // resolves — if we apply takeover before that fires,
+            // mermaid overwrites our fills. Two rAF + setTimeout(0)
+            // cycles guarantee deferred work has settled. Cheap
+            // (~32ms) and only runs once per page load.
+            await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(r, 0))));
+            // Apply takeover to all SVGs while still offscreen.
+            const svgsOffscreen = offscreen.querySelectorAll('svg');
+            _mLog('SVGs rendered offscreen:', svgsOffscreen.length);
+            svgsOffscreen.forEach(applySpineToSvg);
+            _mLog('takeover applied offscreen');
+            // Move each pre.mermaid back to its original position
+            // and mark as painted (CSS reveal rule). Single DOM
+            // mutation per chart → single paint frame with the
+            // corrected SVG already in place.
+            anchors.forEach((a) => {
+              a.el.classList.add('is-painted');
+              if (a.parent) {
+                if (a.nextSibling && a.nextSibling.parentNode === a.parent) {
+                  a.parent.insertBefore(a.el, a.nextSibling);
+                } else {
+                  a.parent.appendChild(a.el);
                 }
               }
+              // Re-apply takeover immediately after move · catches
+              // any post-attach mermaid behaviour (ResizeObserver
+              // re-renders, deferred rAF) that might restyle.
+              a.el.querySelectorAll('svg').forEach(applySpineToSvg);
             });
-          } catch (forceColorErr) {
-            console.warn('[mermaid] post-render colour force failed:', forceColorErr);
+            _mLog('moved back onscreen + reapplied takeover');
+            // Cleanup offscreen host.
+            offscreen.remove();
           }
+
+          // Safety net · if the takeover errors out for some reason
+          // (script bug, exotic chart type), make sure every chart
+          // becomes visible within 6s so the user at least sees the
+          // chart (even if colours leak) instead of an empty frame.
+          // Normal flow: each successful takeover pass marks its
+          // pre.mermaid as `.is-painted` immediately, so the chart
+          // appears as soon as the first pass succeeds (~16ms).
+          setTimeout(() => {
+            document.querySelectorAll('pre.mermaid:not(.is-painted)').forEach((el) => {
+              el.classList.add('is-painted');
+            });
+          }, 6000);
+
+          // ── Continuous re-apply for the first 5 seconds ──
+          // The user reported strict alternation ("1st wrong, 2nd
+          // right, 3rd wrong, 4th right…") which means a single
+          // setTimeout chain wasn't enough — mermaid's deferred
+          // work was landing in different timing windows on
+          // alternate loads, and my chain was missing odd-numbered
+          // ones.
+          //
+          // Defense in depth: re-apply EVERY 60ms for the first 5
+          // seconds. By the time the user perceives the chart, our
+          // styles have been pinned 80+ times across every possible
+          // mermaid post-render window. After 5s, switch to a pure
+          // MutationObserver (only fires on real DOM changes) so we
+          // keep up with future mutations without the polling cost.
+          //
+          // Each call is idempotent — same selectors set the same
+          // inline-style values, so re-running is a cheap no-op
+          // when nothing changed.
+          applySpinePaletteOnce();                                // sync, before next paint
+          let pollCount = 0;
+          const pollInterval = setInterval(() => {
+            applySpinePaletteOnce();
+            if (++pollCount > 80) clearInterval(pollInterval);    // 80 × 60ms ≈ 4.8s
+          }, 60);
+
+          // Persistent MutationObserver · catches any post-poll
+          // mutations (container resize, font swap, late SSE
+          // re-render). Watches structural changes only — our own
+          // setProperty calls modify the `style` attribute, which
+          // is excluded by `attributes: false` (default), so this
+          // can't loop on itself.
+          document.querySelectorAll('.mermaid svg').forEach((svg) => {
+            const obs = new MutationObserver(() => {
+              requestAnimationFrame(applySpinePaletteOnce);
+            });
+            obs.observe(svg, { childList: true, subtree: true });
+          });
           // ── Post-render xychart bar slimming ─────────────────────
           // mermaid xychart-beta renders bars at near-full slot width
           // regardless of `plotReservedSpacePercent` in some 11.x