@helping-ai-workflow/md2doc 3.13.0 → 3.14.0

package/lib/theme/runtime.js

@@ -38,6 +38,9 @@
   }
   btn.addEventListener('click', function () {
     var dark = !isDark();
+    // Measured while the light layout is still clean: see prepareGeometry. A
+    // failure there only costs that speed-up; the toggle must still work.
+    if (dark) { try { prepareGeometry(); } catch (e) { /* recolourSvg measures lazily instead */ } }
     if (dark) root.setAttribute('data-md2doc-theme', 'dark'); else root.removeAttribute('data-md2doc-theme');
     save(dark);
     paint();
@@ -277,10 +280,208 @@
     return /^rect$/i.test(el.tagName) && next !== null && /^text$/i.test(next.tagName) &&
       el.closest('[id^="wavearcs"]') !== null;
   }
+  function contrast(a, b) {
+    var x = lum(a), y = lum(b);
+    return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+  }
+  // ── Where a text sits (R7 option A) ──
+  // Geometry is kept apart from colour: a text's STACK is every shape before it in
+  // document order (= paint order) whose fill AREA covers the text's centre, bottom
+  // to top, whatever its fill. That is the same in light and dark, so the toggle
+  // measures it BEFORE the theme attribute flips, while the page layout is still
+  // clean (prepareGeometry), and keeps it per svg; a read after the flip would force
+  // a synchronous layout of the whole restyled page. Colour is applied afterwards:
+  // the stack's FINAL fills are composited (fill alpha x fill-opacity x opacity of
+  // the shape and its ancestors) over the page, so a semi-transparent cell counts as
+  // the colour it really shows.
+  var PAINTED = 'polygon, ellipse, path, rect, circle';
+  var NOT_PAINTED = 'defs, marker, clipPath, mask, pattern, symbol, foreignObject';
+  var geoCache = typeof WeakMap === 'function' ? new WeakMap() : null;
+  // A mermaid XHTML label is measured by its foreignObject.
+  function geoOf(el) { return el.namespaceURI === XHTML ? el.closest('foreignObject') : el; }
+  function centreOf(g) {
+    if (!g || typeof g.getBBox !== 'function') return null;
+    var b, m;
+    try { b = g.getBBox(); m = g.getCTM(); } catch (e) { return null; }
+    if (!m || (!b.width && !b.height)) return null;
+    return new DOMPoint(b.x + b.width / 2, b.y + b.height / 2).matrixTransform(m);
+  }
+  function geomShapes(svg) {
+    var all = svg.querySelectorAll(PAINTED), list = [];
+    for (var i = 0; i < all.length; i++) {
+      var s = all[i], b, m;
+      if (s.closest(NOT_PAINTED) || typeof s.isPointInFill !== 'function') continue;
+      try { b = s.getBBox(); m = s.getCTM(); } catch (e) { continue; }
+      if (!m) continue;
+      // Its box in viewport units, for a cheap reject before isPointInFill.
+      var xs = [], ys = [], cs = [[b.x, b.y], [b.x + b.width, b.y], [b.x, b.y + b.height], [b.x + b.width, b.y + b.height]];
+      for (var c = 0; c < 4; c++) { var q = new DOMPoint(cs[c][0], cs[c][1]).matrixTransform(m); xs.push(q.x); ys.push(q.y); }
+      list.push({ el: s, m: m, vp: s.nearestViewportElement,
+        box: [Math.min.apply(null, xs), Math.min.apply(null, ys), Math.max.apply(null, xs), Math.max.apply(null, ys)] });
+    }
+    return list;
+  }
+  // null when the element has no geometry (detached, display:none).
+  function stackAt(g, shapes) {
+    var p = centreOf(g);
+    if (!p) return null;
+    var vp = g.nearestViewportElement, stack = [];
+    for (var i = 0; i < shapes.length; i++) {
+      var s = shapes[i];
+      if (s.vp !== vp || p.x < s.box[0] || p.x > s.box[2] || p.y < s.box[1] || p.y > s.box[3]) continue;
+      if (!(s.el.compareDocumentPosition(g) & 4)) break; // document order: every later shape follows g too
+      if (s.el.isPointInFill(p.matrixTransform(s.m.inverse()))) stack.push(s.el);
+    }
+    return stack;
+  }
+  // A mermaid svg is rebuilt from markup on every theme swap (new elements, same
+  // drawing), so its stacks are ALSO kept per host and per render kind (light / live
+  // dark) as indices: the n-th text or foreignObject over the m-th shapes. A swapped-in
+  // svg with the same counts adopts them without reading geometry.
+  var GEO_EL = 'text, tspan, foreignObject';
+  var hostGeo = typeof WeakMap === 'function' ? new WeakMap() : null;
+  function hostEntry(svg, make) {
+    var host = hostGeo && svg.closest('.mermaid');
+    if (!host) return null;
+    var kind = svg.hasAttribute('data-md2doc-live') ? 'live' : 'light';
+    var all = hostGeo.get(host) || {};
+    var nT = svg.querySelectorAll(GEO_EL).length, nS = svg.querySelectorAll(PAINTED).length, e = all[kind];
+    if (!e || e.nT !== nT || e.nS !== nS) {
+      if (!make) return null;
+      e = all[kind] = { nT: nT, nS: nS, map: {} };
+      hostGeo.set(host, all);
+    }
+    return e;
+  }
+  function adopt(svg) {
+    var e = geoCache && hostEntry(svg, false);
+    if (!e) return;
+    var keep = geoCache.get(svg) || new Map(), gl = svg.querySelectorAll(GEO_EL), sl = svg.querySelectorAll(PAINTED);
+    for (var t in e.map) {
+      var g = gl[+t];
+      if (g && !keep.has(g)) keep.set(g, e.map[t].map(function (n) { return sl[n]; }));
+    }
+    if (keep.size) geoCache.set(svg, keep);
+  }
+  // An element with no geometry (empty label, display:none) is remembered for the
+  // current toggle only (geoGen): it may be shown before the next one.
+  var noGeo = typeof WeakMap === 'function' ? new WeakMap() : null, geoGen = 0;
+  // Measures the given geometry elements of one svg and remembers each stack.
+  function measure(svg, gs) {
+    var shapes = null, keep = geoCache ? geoCache.get(svg) || new Map() : new Map(), out = new Map();
+    for (var i = 0; i < gs.length; i++) {
+      var g = gs[i];
+      if (!g || out.has(g)) continue;
+      if (shapes === null) shapes = geomShapes(svg);
+      var st = stackAt(g, shapes);
+      out.set(g, st);
+      if (st) keep.set(g, st); else if (noGeo) noGeo.set(g, geoGen);
+    }
+    if (geoCache && keep.size) geoCache.set(svg, keep);
+    var e = keep.size ? hostEntry(svg, true) : null;
+    if (e) {
+      var gl = [].slice.call(svg.querySelectorAll(GEO_EL)), sl = [].slice.call(svg.querySelectorAll(PAINTED));
+      out.forEach(function (st, g) {
+        if (st) e.map[gl.indexOf(g)] = st.map(function (s) { return sl.indexOf(s); });
+      });
+    }
+    return out;
+  }
+  // Called by the toggle before it flips to dark. A light-drawn mermaid svg is
+  // measured too (it is recoloured until the live dark render arrives) unless that
+  // dark render is cached: then the swap replaces it before anything is recoloured.
+  function prepareGeometry() {
+    if (!geoCache) return;
+    geoGen++;
+    var swapsNow = hasMermaid && !inFlight && cached('dark');
+    var svgs = document.querySelectorAll(RECOLOUR);
+    for (var i = 0; i < svgs.length; i++) {
+      var svg = svgs[i], gs = [];
+      if (swapsNow && svg.closest('.mermaid')) continue;
+      adopt(svg);
+      var known = geoCache.get(svg), ts = svg.querySelectorAll('text, tspan, foreignObject *');
+      for (var k = 0; k < ts.length; k++) {
+        var g = geoOf(ts[k]);
+        // Every text, not only the dark ones: an inherited colour can turn dark (or
+        // light) with the page once the theme flips.
+        if (g && !(known && known.has(g)) && !(noGeo && noGeo.get(g) === geoGen)) gs.push(g);
+      }
+      if (gs.length) measure(svg, gs);
+    }
+  }
+  function num(v) { var n = parseFloat(v); return isNaN(n) ? 1 : n; }
+  // A shape's final paint as [r, g, b, alpha], or null when it shows nothing.
+  function paintOf(s, svg, memo) {
+    if (memo.has(s)) return memo.get(s);
+    var cs = getComputedStyle(s), f = rgba(cs.fill), out = null;
+    if (f) {
+      var a = f[3] * num(cs.fillOpacity) * num(cs.opacity);
+      for (var p = s.parentNode; a > 0 && p && p !== svg && p.nodeType === 1; p = p.parentNode) a *= num(getComputedStyle(p).opacity);
+      if (a > 0) out = [f[0], f[1], f[2], Math.min(a, 1)];
+    }
+    memo.set(s, out);
+    return out;
+  }
+  // The colour under a text: its stack composited over the page; null when nothing
+  // in the stack paints (the text then keeps the old rule).
+  function composite(stack, page, svg, memo) {
+    var c = null;
+    for (var i = 0; i < stack.length; i++) {
+      var p = paintOf(stack[i], svg, memo);
+      if (!p) continue;
+      if (!c) c = page.slice(0, 3);
+      c = [p[0] * p[3] + c[0] * (1 - p[3]), p[1] * p[3] + c[1] * (1 - p[3]), p[2] * p[3] + c[2] * (1 - p[3])];
+    }
+    return c ? [c[0], c[1], c[2], 1] : null;
+  }
+  // No geometry at recolour time (a diagram hidden while the theme flips): the text
+  // could sit on any shape of its own node or cluster, so it is judged against all
+  // of them: each shape's paint composited over the page, or the page where a shape
+  // paints nothing (a table cell without a bgcolor). Text in no node keeps the old rule.
+  function nodeFallback(el, page, svg, memo) {
+    var n = el.closest('g.node, g.cluster');
+    if (!n) return null;
+    var pg = [page[0], page[1], page[2], 1], all = n.querySelectorAll(PAINTED), out = [], seen = {};
+    for (var i = 0; i < all.length; i++) {
+      if (all[i].closest('foreignObject')) continue;
+      var c = composite([all[i]], page, svg, memo) || pg;
+      if (!seen[c.join()]) { seen[c.join()] = 1; out.push(c); }
+    }
+    return out.length ? out : [pg];
+  }
+  // R7 option A: a dark text keeps its author colour unless the rule's replacement
+  // (a toned colour for saturated text) or #e3e3e3 reads better on what is under it.
+  // `unders` is the colour under it (one entry) or, with no geometry, every colour it
+  // might sit on: each option is scored by its WORST contrast over them, the best
+  // score wins, ties keep the author's then the toned colour. null = keep the
+  // author's colour. Over no shape (unders null): the old rule (the replacement).
+  // Shapes are never changed here.
+  function textFor(own, unders) {
+    var cand = hsl(own)[1] > 0.25 ? tone(own, 0.78, 0.7) : TEXT;
+    if (!unders) return cand;
+    var opts = cand === TEXT ? [null, TEXT] : [null, cand, TEXT], best = null, bestC = -1;
+    for (var i = 0; i < opts.length; i++) {
+      var col = opts[i] === null ? own : rgba(opts[i]), worst = Infinity;
+      for (var u = 0; u < unders.length; u++) worst = Math.min(worst, contrast(col, unders[u]));
+      if (worst > bestC) { best = opts[i]; bestC = worst; }
+    }
+    return best;
+  }
+  function decide(own, unders, memo) {
+    var key = own.join() + '|' + (unders ? unders.map(function (u) { return u.join(); }).join(';') : '');
+    if (!(key in memo)) memo[key] = textFor(own, unders);
+    return memo[key];
+  }
+  function restyle(el, ov) {
+    if (!ov) return;
+    var base = el.getAttribute('data-md2doc-style');
+    el.setAttribute('style', (base ? base.replace(/;?\s*$/, ';') : '') + ov);
+  }
   function recolourSvg(svg, dark, opts) {
     var backing = (opts && opts.backing) || 'var(--md-bg)';
     var els = svg.querySelectorAll('polygon, ellipse, path, polyline, rect, line, circle, text, tspan, foreignObject *');
     var live = svg.hasAttribute('data-md2doc-live');
+    var texts = [];
     for (var i = 0; i < els.length; i++) {
       var el = els[i];
       if (el.hasAttribute('data-md2doc-style')) {
@@ -297,43 +498,94 @@
         el.setAttribute('data-md2doc-style', el.getAttribute('style') || '');
       }
       if (!dark) continue;
+      // Texts and mermaid's XHTML labels wait for the second pass, so each one
+      // is paired with the FINAL fill of its own shape whatever the document order.
+      if (el.namespaceURI === XHTML || /^(text|tspan)$/i.test(el.tagName)) { texts.push(el); continue; }
       var cs = getComputedStyle(el);
       var ov = '';
-      if (el.namespaceURI === XHTML) {
-        // Mermaid flowchart labels: HTML inside foreignObject, coloured by CSS.
-        var fg = rgba(cs.color), bgc = rgba(cs.backgroundColor);
-        if (fg && fg[3] > 0 && lum(fg) < 0.35) ov += 'color:' + (hsl(fg)[1] > 0.25 ? tone(fg, 0.78, 0.7) : TEXT) + ' !important;';
-        if (bgc && bgc[3] > 0) {
-          var BL = lum(bgc);
-          if (BL > 0.85) ov += 'background-color:transparent !important;';
-          else if (BL > 0.3) ov += 'background-color:' + tone(bgc, 0.26, 0.55) + ' !important;';
-        }
-        if (ov) {
-          var hb = el.getAttribute('data-md2doc-style');
-          el.setAttribute('style', (hb ? hb.replace(/;?\s*$/, ';') : '') + ov);
-        }
-        continue;
-      }
       var fill = rgba(cs.fill), stroke = rgba(cs.stroke);
       // Overrides are written once, as attribute text, never through el.style:
       // setProperty leaves style="" on the element after the restore removes
       // the attribute (Chromium re-serialises it), so light would not be
       // byte-exact.
-      if (/^(text|tspan)$/i.test(el.tagName)) {
-        if (fill && fill[3] > 0 && lum(fill) < 0.35) ov += 'fill:' + (hsl(fill)[1] > 0.25 ? tone(fill, 0.78, 0.7) : TEXT) + ' !important;';
-      } else {
-        if (fill && fill[3] > 0) {
-          var L = lum(fill);
-          if (L > 0.85) ov += isWaveLabelBacking(el) ? 'fill:' + backing + ' !important;' : 'fill:transparent !important;';
-          else if (L > 0.3) ov += 'fill:' + tone(fill, 0.26, 0.55) + ' !important;';
-          else if (el.closest('g.edge, marker')) ov += 'fill:' + lineColour(fill) + ' !important;';
+      if (fill && fill[3] > 0) {
+        var L = lum(fill);
+        if (L > 0.85) ov += isWaveLabelBacking(el) ? 'fill:' + backing + ' !important;' : 'fill:transparent !important;';
+        else if (L > 0.3) ov += 'fill:' + tone(fill, 0.26, 0.55) + ' !important;';
+        else if (el.closest('g.edge, marker')) ov += 'fill:' + lineColour(fill) + ' !important;';
+      }
+      if (stroke && stroke[3] > 0 && lum(stroke) < 0.35) ov += 'stroke:' + lineColour(stroke) + ' !important;';
+      restyle(el, ov);
+    }
+    // Only a dark text has a choice to make. It uses the stack measured before the
+    // toggle flipped the theme when there is one. Otherwise geometry is read only
+    // when the choice can differ between what the text might sit on (each opaque
+    // paint, or none; any translucent paint always measures): reading it forces a
+    // synchronous layout, which a freshly drawn svg (the wave editor redraws on every
+    // edit) has not had yet. An svg text's own fill is read here once and reused
+    // below: the writes below would otherwise force a style recalc before every read.
+    var memo = {}, paints = new Map(), unders = [], owns = [], need = [], fills = null, translucent = false;
+    if (dark) adopt(svg);
+    var known = geoCache && geoCache.get(svg), page = null;
+    function pageColour() {
+      if (page) return page;
+      var bk = opts && opts.backing;
+      page = (bk && /^rgba?\(/.test(bk) ? rgba(bk) : null) || rgba(getComputedStyle(document.body).backgroundColor) || [255, 255, 255, 1];
+      return page;
+    }
+    for (var k = 0; k < texts.length; k++) {
+      var kc = owns[k] = rgba(texts[k].namespaceURI === XHTML ? getComputedStyle(texts[k]).color : getComputedStyle(texts[k]).fill);
+      if (!kc || kc[3] === 0 || lum(kc) >= 0.35) continue;
+      var st = known && known.get(geoOf(texts[k]));
+      if (st && st.every(function (s) { return svg.contains(s); })) { var cu = composite(st, pageColour(), svg, paints); unders[k] = cu ? [cu] : null; continue; }
+      var kg = geoOf(texts[k]);
+      if (noGeo && kg && noGeo.get(kg) === geoGen) { unders[k] = nodeFallback(texts[k], pageColour(), svg, paints); continue; }
+      if (fills === null) {
+        fills = [];
+        var all = svg.querySelectorAll(PAINTED), seen = {};
+        for (var q = 0; q < all.length; q++) {
+          if (all[q].closest(NOT_PAINTED)) continue;
+          var pq = paintOf(all[q], svg, paints);
+          if (!pq) continue;
+          if (pq[3] < 1) translucent = true;
+          else if (!seen[pq.join()]) { seen[pq.join()] = 1; fills.push(pq); }
         }
-        if (stroke && stroke[3] > 0 && lum(stroke) < 0.35) ov += 'stroke:' + lineColour(stroke) + ' !important;';
       }
-      if (ov) {
-        var base = el.getAttribute('data-md2doc-style');
-        el.setAttribute('style', (base ? base.replace(/;?\s*$/, ';') : '') + ov);
+      var first = decide(kc, null, memo), differs = translucent;
+      for (var w = 0; w < fills.length && !differs; w++) differs = decide(kc, [fills[w]], memo) !== first;
+      if (differs) need.push(k);
+    }
+    if (need.length) {
+      var got = measure(svg, need.map(function (n) { return geoOf(texts[n]); }));
+      for (var r = 0; r < need.length; r++) {
+        var ns = got.get(geoOf(texts[need[r]]));
+        var nc = ns ? composite(ns, pageColour(), svg, paints) : null;
+        unders[need[r]] = ns ? (nc ? [nc] : null) : nodeFallback(texts[need[r]], pageColour(), svg, paints);
+      }
+    }
+    for (var j = 0; j < texts.length; j++) {
+      var t = texts[j], tov = '';
+      if (t.namespaceURI === XHTML) {
+        // Mermaid flowchart labels: HTML inside foreignObject, coloured by CSS.
+        // Read again: a label inherits the colour its parent was just given.
+        var tcs = getComputedStyle(t), fg = rgba(tcs.color), bgc = rgba(tcs.backgroundColor);
+        if (fg && fg[3] > 0 && lum(fg) < 0.35) {
+          var fc = decide(fg, unders[j], memo);
+          if (fc) tov += 'color:' + fc + ' !important;';
+        }
+        if (bgc && bgc[3] > 0) {
+          var BL = lum(bgc);
+          if (BL > 0.85) tov += 'background-color:transparent !important;';
+          else if (BL > 0.3) tov += 'background-color:' + tone(bgc, 0.26, 0.55) + ' !important;';
+        }
+      } else {
+        var tf = owns[j];
+        if (tf && tf[3] > 0 && lum(tf) < 0.35) {
+          var tc = decide(tf, unders[j], memo);
+          if (tc) tov += 'fill:' + tc + ' !important;';
+        }
       }
+      restyle(t, tov);
     }
     if (dark) svg.setAttribute('data-md2doc-recoloured', ''); else svg.removeAttribute('data-md2doc-recoloured');
   }

package/lib/theme/tokens.js

@@ -163,6 +163,9 @@ function themeCss() {
     '    ' + D + ' .content a:not(.heading-anchor), ' + D + ' .content a:not(.heading-anchor):visited { color: ' + LINK_DARK + '; }',
     '    ' + D + ' .content img { background: #ffffff; border-radius: 4px; box-shadow: 0 0 0 10px #ffffff; }',
     '    ' + D + ' .content .drawio { background: #ffffff; border-radius: 6px; box-shadow: 0 0 0 10px #ffffff; }',
+    // R7 甲: a Markdown-native inline svg (wrapped in .inline-svg by the renderer) gets the
+    // same white plate; its ink stays the light text colour because the plate is always white.
+    '    ' + D + ' .content .inline-svg > svg, ' + D + ' .content .ed-block[data-svg-plate="1"] > svg, ' + D + ' .content .ed-block[data-svg-plate="1"] > p > svg { background: #ffffff; color: #1f2328; border-radius: 4px; box-shadow: 0 0 0 10px #ffffff; }',
     '    ' + D + ' .lightbox-canvas > svg[data-md2doc-recoloured] { background: var(--md-bg); }',
     '  }',
     '  .md2doc-theme-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 40px; height: 40px;',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, Graphviz, and draw.io support",
   "keywords": [
     "markdown",