npm - @helping-ai-workflow/md2doc - Versions diffs - 2.6.0 → 2.7.0 - Mend

@helping-ai-workflow/md2doc 2.6.0 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/lib/md2doc.js +466 -5
package/package.json +2 -2

package/lib/md2doc.js CHANGED Viewed

@@ -1095,8 +1095,10 @@ const html = `<!DOCTYPE html>
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
-    /* Horizontal peek: no scrollbar, position driven by shift+wheel only. */
-    overflow-x: hidden;
+    /* Horizontal peek: thin native scrollbar (drag/track-click/touchpad) plus
+       the shift+wheel handler; appears only when a title actually overflows. */
+    overflow-x: auto;
+    scrollbar-width: thin;
   }
   .toc ul {
     list-style: none;
@@ -1362,6 +1364,31 @@ const html = `<!DOCTYPE html>
     cursor: pointer;
   }
   .lightbox-bar button:hover { background: rgba(255, 255, 255, 0.18); }
+  .lightbox-bar button.is-active {
+    background: rgba(147, 197, 253, 0.35);
+    box-shadow: inset 0 0 0 1px #93c5fd;
+  }
+  .lightbox-sep {
+    width: 1px;
+    align-self: stretch;
+    margin: 4px 2px;
+    background: rgba(255, 255, 255, 0.25);
+  }
+  /* Annotation overlay: absolute twin of the artwork, same viewBox, so shapes
+     live in image coordinates and ride every zoom for free. Must undo the
+     .lightbox-canvas > * block/white-background defaults. */
+  .lightbox-canvas > .lightbox-anno {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    pointer-events: none;
+  }
+  .lightbox-stage[data-anno-cursor="draw"],
+  .lightbox-stage[data-anno-cursor="draw"] .lightbox-anno { cursor: crosshair; }
+  .lightbox-anno g[data-anno-id] { cursor: move; }
+  .lightbox-anno [data-anno-handle] { cursor: nwse-resize; }
   .lightbox-zoom-value {
     min-width: 56px;
     text-align: center;
@@ -1382,7 +1409,7 @@ const html = `<!DOCTYPE html>
     overscroll-behavior: contain;
   }
   .lightbox-stage[data-panning] { cursor: grabbing; }
-  .lightbox-canvas { margin: 0 auto; }
+  .lightbox-canvas { margin: 0 auto; position: relative; }
   /* Sized in px by the runtime; the child follows, so the scroll extent grows
      with the zoom. A CSS transform would scale the pixels and leave the scroll
      area at the original size, stranding the edges out of reach. */
@@ -2156,6 +2183,21 @@ ${mermaidInitTag}` : ''}
   var lightboxNaturalH = 1;
   var lightboxReturnScroll = 0;
+  // Annotation layer state. Shapes are keyed per source node in memory only:
+  // close/reopen keeps them, reload starts clean (they are reading-session
+  // scratch, and localStorage keys would go stale when the doc regenerates).
+  var ANNO_NS = 'http://www.w3.org/2000/svg';
+  var annoStore = (typeof WeakMap === 'function') ? new WeakMap() : null;
+  var annoShapes = [];
+  var annoSvg = null;
+  var annoMode = null;        // null | 'f' | 'e' | 'r' | 'm'
+  var annoSelected = null;
+  var annoDraft = null;
+  var annoUndoStack = [];
+  var annoRedoStack = [];
+  var annoStrokeW = 3;
+  var annoToolButtons = {};
   function lightboxIsOpen() {
     return !!lightboxEl && !lightboxEl.hidden;
   }
@@ -2207,6 +2249,377 @@ ${mermaidInitTag}` : ''}
     setLightboxZoom(lightboxZoom * factor, anchorX, anchorY);
   }
+  // ── Lightbox annotation layer ─────────────────────────────────────────────
+  function annoGeomOf(shape) {
+    if (shape.type === 'path') return { pts: shape.pts.map(function (p) { return [p[0], p[1]]; }) };
+    var geom = {};
+    Object.keys(shape).forEach(function (k) { if (k !== 'type') geom[k] = shape[k]; });
+    return geom;
+  }
+  function annoSetGeom(shape, geom) {
+    if (shape.type === 'path') shape.pts = geom.pts.map(function (p) { return [p[0], p[1]]; });
+    else Object.keys(geom).forEach(function (k) { shape[k] = geom[k]; });
+  }
+  function annoBBox(shape) {
+    if (shape.type === 'rect') return { x: shape.x, y: shape.y, w: shape.w, h: shape.h };
+    if (shape.type === 'ellipse') return { x: shape.cx - shape.rx, y: shape.cy - shape.ry, w: shape.rx * 2, h: shape.ry * 2 };
+    if (shape.type === 'line' || shape.type === 'arrow') {
+      return {
+        x: Math.min(shape.x1, shape.x2), y: Math.min(shape.y1, shape.y2),
+        w: Math.abs(shape.x2 - shape.x1), h: Math.abs(shape.y2 - shape.y1),
+      };
+    }
+    var xs = shape.pts.map(function (p) { return p[0]; });
+    var ys = shape.pts.map(function (p) { return p[1]; });
+    var x = Math.min.apply(null, xs);
+    var y = Math.min.apply(null, ys);
+    return { x: x, y: y, w: Math.max.apply(null, xs) - x, h: Math.max.apply(null, ys) - y };
+  }
+  function annoApplyBBox(shape, from, to) {
+    var sx = from.w > 0.01 ? to.w / from.w : 1;
+    var sy = from.h > 0.01 ? to.h / from.h : 1;
+    if (shape.type === 'rect') {
+      shape.x = to.x; shape.y = to.y; shape.w = to.w; shape.h = to.h;
+    } else if (shape.type === 'ellipse') {
+      shape.cx = to.x + to.w / 2; shape.cy = to.y + to.h / 2;
+      shape.rx = to.w / 2; shape.ry = to.h / 2;
+    } else if (shape.type === 'line' || shape.type === 'arrow') {
+      var x1 = to.x + (shape.x1 - from.x) * sx;
+      var y1 = to.y + (shape.y1 - from.y) * sy;
+      var x2 = to.x + (shape.x2 - from.x) * sx;
+      var y2 = to.y + (shape.y2 - from.y) * sy;
+      shape.x1 = x1; shape.y1 = y1; shape.x2 = x2; shape.y2 = y2;
+    } else {
+      shape.pts = shape.pts.map(function (p) {
+        return [to.x + (p[0] - from.x) * sx, to.y + (p[1] - from.y) * sy];
+      });
+    }
+  }
+  function annoPathD(pts) {
+    return pts.map(function (p, i) {
+      return (i === 0 ? 'M' : 'L') + p[0].toFixed(1) + ' ' + p[1].toFixed(1);
+    }).join(' ');
+  }
+  function annoShapeEl(shape) {
+    var tag = (shape.type === 'line' || shape.type === 'arrow') ? 'line' : shape.type;
+    var el = document.createElementNS(ANNO_NS, tag);
+    if (shape.type === 'line' || shape.type === 'arrow') {
+      el.setAttribute('x1', shape.x1.toFixed(1)); el.setAttribute('y1', shape.y1.toFixed(1));
+      el.setAttribute('x2', shape.x2.toFixed(1)); el.setAttribute('y2', shape.y2.toFixed(1));
+      el.setAttribute('stroke-linecap', 'round');
+      if (shape.type === 'arrow') el.setAttribute('marker-end', 'url(#anno-arrow-head)');
+    } else if (shape.type === 'rect') {
+      el.setAttribute('x', shape.x.toFixed(1)); el.setAttribute('y', shape.y.toFixed(1));
+      el.setAttribute('width', Math.max(0.1, shape.w).toFixed(1));
+      el.setAttribute('height', Math.max(0.1, shape.h).toFixed(1));
+      el.setAttribute('fill', 'transparent');
+    } else if (shape.type === 'ellipse') {
+      el.setAttribute('cx', shape.cx.toFixed(1)); el.setAttribute('cy', shape.cy.toFixed(1));
+      el.setAttribute('rx', Math.max(0.1, shape.rx).toFixed(1));
+      el.setAttribute('ry', Math.max(0.1, shape.ry).toFixed(1));
+      el.setAttribute('fill', 'transparent');
+    } else {
+      el.setAttribute('d', annoPathD(shape.pts));
+      el.setAttribute('fill', 'none');
+      el.setAttribute('stroke-linejoin', 'round');
+      el.setAttribute('stroke-linecap', 'round');
+    }
+    el.setAttribute('stroke', '#ef4444');
+    el.setAttribute('stroke-width', String(annoStrokeW));
+    return el;
+  }
+  function annoEnsureDefs() {
+    var defs = document.createElementNS(ANNO_NS, 'defs');
+    var marker = document.createElementNS(ANNO_NS, 'marker');
+    marker.setAttribute('id', 'anno-arrow-head');
+    marker.setAttribute('markerWidth', '8');
+    marker.setAttribute('markerHeight', '8');
+    marker.setAttribute('refX', '6.4');
+    marker.setAttribute('refY', '3');
+    marker.setAttribute('orient', 'auto');
+    var tip = document.createElementNS(ANNO_NS, 'path');
+    tip.setAttribute('d', 'M0 0 L7 3 L0 6 Z');
+    tip.setAttribute('fill', '#ef4444');
+    marker.appendChild(tip);
+    defs.appendChild(marker);
+    annoSvg.appendChild(defs);
+  }
+  function annoRedraw() {
+    if (!annoSvg) return;
+    while (annoSvg.firstChild) annoSvg.removeChild(annoSvg.firstChild);
+    annoEnsureDefs();
+    annoShapes.forEach(function (shape, index) {
+      var g = document.createElementNS(ANNO_NS, 'g');
+      g.setAttribute('data-anno-id', String(index));
+      g.appendChild(annoShapeEl(shape));
+      if (shape.type === 'path' || shape.type === 'line' || shape.type === 'arrow') {
+        // A 3px stroke is an unclickable target — give strokes a fat invisible twin.
+        var hit = document.createElementNS(ANNO_NS, shape.type === 'path' ? 'path' : 'line');
+        if (shape.type === 'path') {
+          hit.setAttribute('d', annoPathD(shape.pts));
+        } else {
+          hit.setAttribute('x1', shape.x1); hit.setAttribute('y1', shape.y1);
+          hit.setAttribute('x2', shape.x2); hit.setAttribute('y2', shape.y2);
+        }
+        hit.setAttribute('fill', 'none');
+        hit.setAttribute('stroke', 'transparent');
+        hit.setAttribute('stroke-width', String(annoStrokeW * 5));
+        hit.setAttribute('data-anno-hit', '');
+        g.appendChild(hit);
+      }
+      annoSvg.appendChild(g);
+    });
+    if (annoSelected && annoShapes.indexOf(annoSelected) !== -1) {
+      var box = annoBBox(annoSelected);
+      var ui = document.createElementNS(ANNO_NS, 'rect');
+      ui.setAttribute('data-anno-ui', '');
+      ui.setAttribute('x', box.x); ui.setAttribute('y', box.y);
+      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);
+      annoSvg.appendChild(ui);
+      var hs = annoStrokeW * 3;
+      [[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');
+          h.setAttribute('data-anno-ui', '');
+          h.setAttribute('data-anno-handle', String(i));
+          h.setAttribute('x', corner[0] - hs / 2); h.setAttribute('y', corner[1] - hs / 2);
+          h.setAttribute('width', hs); h.setAttribute('height', hs);
+          h.setAttribute('fill', '#3b82f6');
+          annoSvg.appendChild(h);
+        });
+    }
+  }
+  function annoPushOp(op) {
+    annoUndoStack.push(op);
+    annoRedoStack.length = 0;
+  }
+  function annoApplyOp(op, reverse) {
+    if (op.kind === 'add') {
+      if (reverse) annoShapes.splice(annoShapes.indexOf(op.shape), 1);
+      else annoShapes.splice(Math.min(op.index, annoShapes.length), 0, op.shape);
+    } else if (op.kind === 'del') {
+      if (reverse) annoShapes.splice(Math.min(op.index, annoShapes.length), 0, op.shape);
+      else annoShapes.splice(annoShapes.indexOf(op.shape), 1);
+    } else if (op.kind === 'geom') {
+      annoSetGeom(op.shape, reverse ? op.before : op.after);
+    } else if (op.kind === 'clear') {
+      if (reverse) op.shapes.forEach(function (s) { annoShapes.push(s); });
+      else annoShapes.length = 0;
+    }
+  }
+  function annoUndo() {
+    var op = annoUndoStack.pop();
+    if (!op) return;
+    annoApplyOp(op, true);
+    annoRedoStack.push(op);
+    annoSelected = null;
+    annoRedraw();
+  }
+  function annoRedo() {
+    var op = annoRedoStack.pop();
+    if (!op) return;
+    annoApplyOp(op, false);
+    annoUndoStack.push(op);
+    annoSelected = null;
+    annoRedraw();
+  }
+  function annoClearAll() {
+    if (!annoShapes.length) return;
+    annoPushOp({ kind: 'clear', shapes: annoShapes.slice() });
+    annoShapes.length = 0;
+    annoSelected = null;
+    annoRedraw();
+  }
+  function annoDeleteSelected() {
+    if (!annoSelected) return;
+    var index = annoShapes.indexOf(annoSelected);
+    if (index === -1) return;
+    annoPushOp({ kind: 'del', shape: annoSelected, index: index });
+    annoShapes.splice(index, 1);
+    annoSelected = null;
+    annoRedraw();
+  }
+  function setAnnoMode(mode) {
+    annoMode = (annoMode === mode) ? null : mode;
+    if (annoMode !== 'm') annoSelected = null;
+    Object.keys(annoToolButtons).forEach(function (key) {
+      annoToolButtons[key].classList.toggle('is-active', key === annoMode);
+    });
+    if (annoSvg) annoSvg.style.pointerEvents = annoMode ? 'auto' : 'none';
+    if (lightboxStage) {
+      if (annoMode === 'f' || annoMode === 'e' || annoMode === 'r') {
+        lightboxStage.setAttribute('data-anno-cursor', 'draw');
+      } else {
+        lightboxStage.removeAttribute('data-anno-cursor');
+      }
+    }
+    annoRedraw();
+  }
+  function annoPoint(event) {
+    var rect = annoSvg.getBoundingClientRect();
+    var scale = rect.width > 0 ? lightboxNaturalW / rect.width : 1;
+    return { x: (event.clientX - rect.left) * scale, y: (event.clientY - rect.top) * scale };
+  }
+  function annoCancelDraft() {
+    if (!annoDraft) return;
+    if (annoDraft.el && annoDraft.el.parentNode) annoDraft.el.parentNode.removeChild(annoDraft.el);
+    annoDraft = null;
+  }
+  function annoPointerDown(event) {
+    if (!annoMode || event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (annoSvg.setPointerCapture) {
+      try { annoSvg.setPointerCapture(event.pointerId); } catch (e) { /* detached */ }
+    }
+    var pt = annoPoint(event);
+    if (annoMode === 'm') {
+      var handle = event.target.closest ? event.target.closest('[data-anno-handle]') : null;
+      var group = event.target.closest ? event.target.closest('g[data-anno-id]') : null;
+      if (handle && annoSelected) {
+        var corner = Number(handle.getAttribute('data-anno-handle'));
+        var box = annoBBox(annoSelected);
+        annoDraft = {
+          kind: 'resize', shape: annoSelected, corner: corner,
+          startBox: box, before: annoGeomOf(annoSelected), moved: false,
+          anchor: {
+            x: (corner === 0 || corner === 2) ? box.x + box.w : box.x,
+            y: (corner === 0 || corner === 1) ? box.y + box.h : box.y,
+          },
+        };
+      } else if (group) {
+        annoSelected = annoShapes[Number(group.getAttribute('data-anno-id'))] || null;
+        annoDraft = annoSelected ? {
+          kind: 'move', shape: annoSelected, start: pt,
+          startBox: annoBBox(annoSelected), before: annoGeomOf(annoSelected), moved: false,
+        } : null;
+        annoRedraw();
+      } else {
+        annoSelected = null;
+        annoRedraw();
+      }
+      return;
+    }
+    var shape;
+    if (annoMode === 'f') shape = { type: 'path', pts: [[pt.x, pt.y]] };
+    else if (annoMode === 'e') shape = { type: 'ellipse', cx: pt.x, cy: pt.y, rx: 0, ry: 0 };
+    else if (annoMode === 'l') shape = { type: 'line', x1: pt.x, y1: pt.y, x2: pt.x, y2: pt.y };
+    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 };
+    annoDraft = { kind: 'draw', shape: shape, start: pt, el: annoShapeEl(shape), clientDist: 0, lastClient: [event.clientX, event.clientY] };
+    annoSvg.appendChild(annoDraft.el);
+  }
+  function annoUpdateDraftEl() {
+    var d = annoDraft;
+    var fresh = annoShapeEl(d.shape);
+    d.el.parentNode.replaceChild(fresh, d.el);
+    d.el = fresh;
+  }
+  function annoPointerMove(event) {
+    if (!annoDraft) return;
+    var pt = annoPoint(event);
+    var d = annoDraft;
+    if (d.kind === 'draw') {
+      d.clientDist += Math.abs(event.clientX - d.lastClient[0]) + Math.abs(event.clientY - d.lastClient[1]);
+      d.lastClient = [event.clientX, event.clientY];
+      if (d.shape.type === 'path') {
+        d.shape.pts.push([pt.x, pt.y]);
+      } else if (d.shape.type === 'line' || d.shape.type === 'arrow') {
+        d.shape.x2 = pt.x; d.shape.y2 = pt.y;
+      } else if (d.shape.type === 'ellipse') {
+        d.shape.cx = (d.start.x + pt.x) / 2; d.shape.cy = (d.start.y + pt.y) / 2;
+        d.shape.rx = Math.abs(pt.x - d.start.x) / 2; d.shape.ry = Math.abs(pt.y - d.start.y) / 2;
+      } else {
+        d.shape.x = Math.min(d.start.x, pt.x); d.shape.y = Math.min(d.start.y, pt.y);
+        d.shape.w = Math.abs(pt.x - d.start.x); d.shape.h = Math.abs(pt.y - d.start.y);
+      }
+      annoUpdateDraftEl();
+      return;
+    }
+    d.moved = true;
+    if (d.kind === 'move') {
+      var box = d.startBox;
+      annoApplyBBox(d.shape, annoBBox(d.shape), {
+        x: box.x + (pt.x - d.start.x), y: box.y + (pt.y - d.start.y), w: box.w, h: box.h,
+      });
+    } else {
+      var ax = d.anchor.x;
+      var ay = d.anchor.y;
+      annoApplyBBox(d.shape, annoBBox(d.shape), {
+        x: Math.min(ax, pt.x), y: Math.min(ay, pt.y),
+        w: Math.max(1, Math.abs(pt.x - ax)), h: Math.max(1, Math.abs(pt.y - ay)),
+      });
+    }
+    annoRedraw();
+  }
+  function annoPointerUp() {
+    if (!annoDraft) return;
+    var d = annoDraft;
+    annoDraft = null;
+    if (d.kind === 'draw') {
+      if (d.el.parentNode) d.el.parentNode.removeChild(d.el);
+      var tooSmall = d.clientDist < 4 ||
+        (d.shape.type === 'path' && d.shape.pts.length < 2);
+      if (!tooSmall) {
+        annoPushOp({ kind: 'add', shape: d.shape, index: annoShapes.length });
+        annoShapes.push(d.shape);
+      }
+      annoRedraw();
+      return;
+    }
+    if (d.moved) {
+      annoPushOp({ kind: 'geom', shape: d.shape, before: d.before, after: annoGeomOf(d.shape) });
+    }
+    annoRedraw();
+  }
+  function annoSetup(sourceNode) {
+    annoShapes = [];
+    if (annoStore) {
+      annoShapes = annoStore.get(sourceNode);
+      if (!annoShapes) { annoShapes = []; annoStore.set(sourceNode, annoShapes); }
+    }
+    annoUndoStack = [];
+    annoRedoStack = [];
+    annoSelected = null;
+    annoCancelDraft();
+    annoStrokeW = Math.max(3, Math.round(Math.max(lightboxNaturalW, lightboxNaturalH) / 300));
+    annoSvg = document.createElementNS(ANNO_NS, 'svg');
+    annoSvg.setAttribute('class', 'lightbox-anno');
+    annoSvg.setAttribute('viewBox', '0 0 ' + lightboxNaturalW + ' ' + lightboxNaturalH);
+    annoSvg.addEventListener('pointerdown', annoPointerDown);
+    annoSvg.addEventListener('pointermove', annoPointerMove);
+    annoSvg.addEventListener('pointerup', annoPointerUp);
+    annoSvg.addEventListener('pointercancel', annoPointerUp);
+    lightboxCanvas.appendChild(annoSvg);
+    annoMode = null;
+    setAnnoMode(null);
+  }
   function buildLightbox() {
     if (lightboxEl) return;
     lightboxEl = document.createElement('div');
@@ -2219,7 +2632,7 @@ ${mermaidInitTag}` : ''}
     bar.className = 'lightbox-bar';
     var hint = document.createElement('span');
     hint.className = 'lightbox-hint';
-    hint.textContent = 'scroll to pan · shift+scroll sideways · ctrl+scroll to zoom · drag to pan · esc to close';
+    hint.textContent = 'ctrl+scroll zoom · drag pan · f/e/r/l/a draw · m select · del remove · ctrl+z undo · esc close';
     lightboxZoomValue = document.createElement('span');
     lightboxZoomValue.className = 'lightbox-zoom-value';
     lightboxZoomValue.setAttribute('data-lightbox-zoom-value', '');
@@ -2229,6 +2642,25 @@ ${mermaidInitTag}` : ''}
     bar.appendChild(lightboxButton('+', 'Zoom in', function () { zoomLightboxBy(LIGHTBOX_STEP); }));
     bar.appendChild(lightboxButton('Fit', 'Fit to window', function () { setLightboxZoom(lightboxFitZoom); }));
     bar.appendChild(lightboxButton('1:1', 'Actual size', function () { setLightboxZoom(1); }));
+    var sep = document.createElement('span');
+    sep.className = 'lightbox-sep';
+    bar.appendChild(sep);
+    [
+      ['f', '✎', 'Freehand (f)'],
+      ['e', '○', 'Ellipse (e)'],
+      ['r', '▭', 'Rectangle (r)'],
+      ['l', '╱', 'Line (l)'],
+      ['a', '↗', 'Arrow (a)'],
+      ['m', '✥', 'Select / move (m)'],
+    ].forEach(function (tool) {
+      var button = lightboxButton(tool[1], tool[2], function () { setAnnoMode(tool[0]); });
+      button.setAttribute('data-anno-tool', tool[0]);
+      annoToolButtons[tool[0]] = button;
+      bar.appendChild(button);
+    });
+    var clearButton = lightboxButton('Clear', 'Clear all annotations', annoClearAll);
+    clearButton.setAttribute('data-anno-clear', '');
+    bar.appendChild(clearButton);
     bar.appendChild(lightboxButton('✕', 'Close', closeLightbox));
     lightboxStage = document.createElement('div');
@@ -2259,6 +2691,8 @@ ${mermaidInitTag}` : ''}
     lightboxStage.addEventListener('mousedown', function (event) {
       if (event.button !== 0) return;
+      // With a tool armed the overlay owns pointer events over the artwork.
+      if (annoMode && event.target && event.target.closest && event.target.closest('.lightbox-anno')) return;
       panning = true;
       panDistance = 0;
       panX = event.clientX;
@@ -2289,6 +2723,7 @@ ${mermaidInitTag}` : ''}
     });
     lightboxStage.addEventListener('dblclick', function (event) {
       event.preventDefault();
+      if (annoMode && event.target && event.target.closest && event.target.closest('.lightbox-anno')) return;
       setLightboxZoom(Math.abs(lightboxZoom - 1) < 0.001 ? lightboxFitZoom : 1);
     });
   }
@@ -2329,6 +2764,7 @@ ${mermaidInitTag}` : ''}
       lightboxCanvas.removeChild(lightboxCanvas.firstChild);
     }
     lightboxCanvas.appendChild(clone);
+    annoSetup(node);
     lightboxReturnScroll = window.scrollY;
     suppressAnchorCapture = true;
@@ -2345,6 +2781,10 @@ ${mermaidInitTag}` : ''}
     if (!lightboxIsOpen()) return;
     lightboxEl.hidden = true;
     document.body.removeAttribute('data-lightbox-open');
+    annoCancelDraft();
+    annoSvg = null;
+    annoMode = null;
+    setAnnoMode(null);
     while (lightboxCanvas.firstChild) {
       lightboxCanvas.removeChild(lightboxCanvas.firstChild);
     }
@@ -2370,7 +2810,28 @@ ${mermaidInitTag}` : ''}
   document.addEventListener('keydown', function (event) {
     if (!lightboxIsOpen()) return;
-    if (event.key === 'Escape') { event.preventDefault(); closeLightbox(); return; }
+    var key = event.key.toLowerCase();
+    if ((event.ctrlKey || event.metaKey) && key === 'z' && !event.shiftKey) {
+      event.preventDefault(); annoUndo(); return;
+    }
+    if ((event.ctrlKey || event.metaKey) && (key === 'y' || (key === 'z' && event.shiftKey))) {
+      event.preventDefault(); annoRedo(); return;
+    }
+    if (event.ctrlKey || event.metaKey || event.altKey) return;
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      // Layered: cancel an in-progress draw, then drop the selection, then close.
+      if (annoDraft) { annoCancelDraft(); annoRedraw(); return; }
+      if (annoSelected) { annoSelected = null; annoRedraw(); return; }
+      closeLightbox();
+      return;
+    }
+    if (key === 'f' || key === 'e' || key === 'r' || key === 'l' || key === 'a' || key === 'm') {
+      event.preventDefault(); setAnnoMode(key); return;
+    }
+    if (event.key === 'Delete' || event.key === 'Backspace') {
+      event.preventDefault(); annoDeleteSelected(); return;
+    }
     if (event.key === '+' || event.key === '=') { event.preventDefault(); zoomLightboxBy(LIGHTBOX_STEP); return; }
     if (event.key === '-' || event.key === '_') { event.preventDefault(); zoomLightboxBy(1 / LIGHTBOX_STEP); return; }
     if (event.key === '0') { event.preventDefault(); setLightboxZoom(lightboxFitZoom); return; }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, and Graphviz support",
   "keywords": [
     "markdown",
@@ -36,7 +36,7 @@
   },
   "scripts": {
     "preinstall": "node scripts/preinstall.js",
-    "test": "node test/md2doc.test.js && node test/images.test.js && node test/scroll-anchor.test.js && node test/lightbox.test.js && node test/reader-panels.test.js && node test/cli.test.js && node test/code-operator.test.js"
+    "test": "node test/md2doc.test.js && node test/images.test.js && node test/scroll-anchor.test.js && node test/lightbox.test.js && node test/lightbox-anno.test.js && node test/reader-panels.test.js && node test/cli.test.js && node test/code-operator.test.js"
   },
   "repository": {
     "type": "git",