@helping-ai-workflow/md2doc 2.8.0 → 2.8.1

package/lib/md2doc.js

@@ -2216,7 +2216,8 @@ ${mermaidInitTag}` : ''}
   // scratch, and localStorage keys would go stale when the doc regenerates).
   var ANNO_NS = 'http://www.w3.org/2000/svg';
   var ANNO_COLORS = ['#ef4444', '#3b82f6', '#22c55e', '#f59e0b', '#111827'];
-  var ANNO_WIDTHS = [0.6, 1, 1.8];
+  // Office-like absolute stroke widths: rendered px at fit zoom (S/M/L).
+  var ANNO_WIDTHS = [1, 2, 4];
   var annoStore = (typeof WeakMap === 'function') ? new WeakMap() : null;
   var annoShapes = [];
   var annoSvg = null;
@@ -2227,7 +2228,7 @@ ${mermaidInitTag}` : ''}
   var annoRedoStack = [];
   var annoStrokeW = 3;
   var annoColor = ANNO_COLORS[0];
-  var annoWidthScale = 1;
+  var annoWidth = ANNO_WIDTHS[1];
   var annoToolButtons = {};
   var annoStyleButtons = [];
   var annoSourceNode = null;
@@ -2367,7 +2368,7 @@ ${mermaidInitTag}` : ''}
       el.setAttribute('stroke-linecap', 'round');
     }
     el.setAttribute('stroke', color);
-    el.setAttribute('stroke-width', (annoStrokeW * (shape.ws || 1)).toFixed(1));
+    el.setAttribute('stroke-width', (shape.sw || annoStrokeW).toFixed(2));
     return el;
   }
 
@@ -2411,13 +2412,14 @@ ${mermaidInitTag}` : ''}
         }
         hit.setAttribute('fill', 'none');
         hit.setAttribute('stroke', 'transparent');
-        hit.setAttribute('stroke-width', String(annoStrokeW * 5));
+        hit.setAttribute('stroke-width', String(Math.max((shape.sw || annoStrokeW) * 5, 10 / (lightboxFitZoom || 1))));
         hit.setAttribute('data-anno-hit', '');
         g.appendChild(hit);
       }
       annoSvg.appendChild(g);
     });
     if (annoSelected && annoShapes.indexOf(annoSelected) !== -1) {
+      var u = 1.5 / (lightboxFitZoom || 1); // ~1.5px at fit zoom
       var box = annoBBox(annoSelected);
       var ui = document.createElementNS(ANNO_NS, 'rect');
       ui.setAttribute('data-anno-ui', '');
@@ -2425,10 +2427,10 @@ ${mermaidInitTag}` : ''}
       ui.setAttribute('width', Math.max(0.1, box.w)); ui.setAttribute('height', Math.max(0.1, box.h));
       ui.setAttribute('fill', 'none');
       ui.setAttribute('stroke', '#3b82f6');
-      ui.setAttribute('stroke-width', String(Math.max(1, annoStrokeW / 2)));
-      ui.setAttribute('stroke-dasharray', (annoStrokeW * 2) + ' ' + annoStrokeW);
+      ui.setAttribute('stroke-width', String(u));
+      ui.setAttribute('stroke-dasharray', (u * 4) + ' ' + (u * 2));
       annoSvg.appendChild(ui);
-      var hs = annoStrokeW * 3;
+      var hs = u * 6;
       [[box.x, box.y], [box.x + box.w, box.y], [box.x, box.y + box.h], [box.x + box.w, box.y + box.h]]
         .forEach(function (corner, i) {
           var h = document.createElementNS(ANNO_NS, 'rect');
@@ -2460,7 +2462,7 @@ ${mermaidInitTag}` : ''}
     } else if (op.kind === 'style') {
       var style = reverse ? op.before : op.after;
       op.shape.color = style.color;
-      op.shape.ws = style.ws;
+      op.shape.sw = style.sw;
     } else if (op.kind === 'clear') {
       if (reverse) op.shapes.forEach(function (s) { annoShapes.push(s); });
       else annoShapes.length = 0;
@@ -2507,21 +2509,21 @@ ${mermaidInitTag}` : ''}
 
   function setAnnoStyle(patch) {
     if (patch.color) annoColor = patch.color;
-    if (patch.ws) annoWidthScale = patch.ws;
+    if (patch.w) annoWidth = patch.w;
     annoStyleButtons.forEach(function (entry) {
       entry.button.classList.toggle('is-active',
-        entry.kind === 'color' ? entry.value === annoColor : entry.value === annoWidthScale);
+        entry.kind === 'color' ? entry.value === annoColor : entry.value === annoWidth);
     });
     // With a selection, the pickers restyle it (undoably); otherwise they only
     // set the style for the next shape.
     if (annoSelected) {
-      var beforeStyle = { color: annoSelected.color, ws: annoSelected.ws };
+      var beforeStyle = { color: annoSelected.color, sw: annoSelected.sw };
       annoSelected.color = patch.color || annoSelected.color;
-      annoSelected.ws = patch.ws || annoSelected.ws;
+      if (patch.w) annoSelected.sw = patch.w / (lightboxFitZoom || 1);
       annoPushOp({
         kind: 'style', shape: annoSelected,
         before: beforeStyle,
-        after: { color: annoSelected.color, ws: annoSelected.ws },
+        after: { color: annoSelected.color, sw: annoSelected.sw },
       });
       annoRedraw();
     }
@@ -2690,6 +2692,11 @@ ${mermaidInitTag}` : ''}
         annoSelected = null;
         annoRedraw();
       }
+      // The baked clone still shows the shape at its old spot — revert to the
+      // base image for the gesture; the overlay alone renders the live shapes.
+      if (annoDraft && annoCloneEl && annoCloneEl.tagName === 'IMG' && annoBaseSrc) {
+        annoCloneEl.src = annoBaseSrc;
+      }
       return;
     }
     var shape;
@@ -2699,7 +2706,7 @@ ${mermaidInitTag}` : ''}
     else if (annoMode === 'a') shape = { type: 'arrow', x1: pt.x, y1: pt.y, x2: pt.x, y2: pt.y };
     else shape = { type: 'rect', x: pt.x, y: pt.y, w: 0, h: 0 };
     shape.color = annoColor;
-    shape.ws = annoWidthScale;
+    shape.sw = annoWidth / (lightboxFitZoom || 1);
     annoDraft = { kind: 'draw', shape: shape, start: pt, el: annoShapeEl(shape), clientDist: 0, lastClient: [event.clientX, event.clientY] };
     annoSvg.appendChild(annoDraft.el);
   }
@@ -2766,6 +2773,8 @@ ${mermaidInitTag}` : ''}
     }
     if (d.moved) {
       annoPushOp({ kind: 'geom', shape: d.shape, before: d.before, after: annoGeomOf(d.shape) });
+    } else {
+      annoBake(); // gesture reverted the clone to the base image — restore it
     }
     annoRedraw();
   }
@@ -2845,9 +2854,9 @@ ${mermaidInitTag}` : ''}
       bar.appendChild(swatch);
     });
     [['S', ANNO_WIDTHS[0]], ['M', ANNO_WIDTHS[1]], ['L', ANNO_WIDTHS[2]]].forEach(function (width) {
-      var button = lightboxButton(width[0], 'Stroke width ' + width[0], function () { setAnnoStyle({ ws: width[1] }); });
+      var button = lightboxButton(width[0], 'Stroke width ' + width[1] + 'px', function () { setAnnoStyle({ w: width[1] }); });
       button.setAttribute('data-anno-width', String(width[1]));
-      if (width[1] === annoWidthScale) button.classList.add('is-active');
+      if (width[1] === annoWidth) button.classList.add('is-active');
       annoStyleButtons.push({ kind: 'width', value: width[1], button: button });
       bar.appendChild(button);
     });
@@ -2948,7 +2957,18 @@ ${mermaidInitTag}` : ''}
 
     var isVector = !!(source.tagName && source.tagName.toLowerCase() === 'svg');
     var clone = source.cloneNode(true);
-    clone.removeAttribute('id');
+    // Mermaid scopes its embedded <style> to the svg's #id — dropping the id
+    // kills the theme. Rename it instead (avoids a duplicate id) and rewrite
+    // the scoped selectors to the new name.
+    if (isVector && source.id) {
+      var lightboxCloneId = 'lightbox-' + source.id;
+      clone.setAttribute('id', lightboxCloneId);
+      Array.prototype.forEach.call(clone.querySelectorAll('style'), function (styleEl) {
+        styleEl.textContent = styleEl.textContent.split('#' + source.id).join('#' + lightboxCloneId);
+      });
+    } else {
+      clone.removeAttribute('id');
+    }
     clone.removeAttribute('class');
     clone.removeAttribute('style');
     clone.removeAttribute('width');

package/package.json

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