npm - @helping-ai-workflow/md2doc - Versions diffs - 2.6.1 → 2.8.0 - Mend

@helping-ai-workflow/md2doc 2.6.1 → 2.8.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 +662 -3
package/package.json +2 -2

package/lib/md2doc.js CHANGED Viewed

@@ -1364,6 +1364,59 @@ 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-swatch {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    padding: 0;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    align-self: center;
+  }
+  .lightbox-swatch.is-active {
+    border-color: #ffffff;
+    box-shadow: 0 0 0 2px #93c5fd;
+  }
+  /* Inline annotation overlay left behind after closing the lightbox:
+     same-viewBox svg over the source figure, in-memory only. */
+  .anno-inline-wrap {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+  }
+  .anno-inline {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+  .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;
@@ -1384,7 +1437,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. */
@@ -2158,6 +2211,29 @@ ${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 ANNO_COLORS = ['#ef4444', '#3b82f6', '#22c55e', '#f59e0b', '#111827'];
+  var ANNO_WIDTHS = [0.6, 1, 1.8];
+  var annoStore = (typeof WeakMap === 'function') ? new WeakMap() : null;
+  var annoShapes = [];
+  var annoSvg = null;
+  var annoMode = null;        // null | 'f' | 'e' | 'r' | 'l' | 'a' | 'm'
+  var annoSelected = null;
+  var annoDraft = null;
+  var annoUndoStack = [];
+  var annoRedoStack = [];
+  var annoStrokeW = 3;
+  var annoColor = ANNO_COLORS[0];
+  var annoWidthScale = 1;
+  var annoToolButtons = {};
+  var annoStyleButtons = [];
+  var annoSourceNode = null;
+  var annoCloneEl = null;
+  var annoBaseSrc = null;
   function lightboxIsOpen() {
     return !!lightboxEl && !lightboxEl.hidden;
   }
@@ -2209,6 +2285,518 @@ ${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);
+    var color = shape.color || ANNO_COLORS[0];
+    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-' + color.slice(1) + ')');
+    } 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', color);
+    el.setAttribute('stroke-width', (annoStrokeW * (shape.ws || 1)).toFixed(1));
+    return el;
+  }
+  function annoEnsureDefs(svg) {
+    var defs = document.createElementNS(ANNO_NS, 'defs');
+    ANNO_COLORS.forEach(function (color) {
+      var marker = document.createElementNS(ANNO_NS, 'marker');
+      // Same id + content in every overlay svg, so document-wide url(#) lookups
+      // always resolve to an identical marker.
+      marker.setAttribute('id', 'anno-arrow-' + color.slice(1));
+      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', color);
+      marker.appendChild(tip);
+      defs.appendChild(marker);
+    });
+    svg.appendChild(defs);
+  }
+  function annoRedraw() {
+    if (!annoSvg) return;
+    while (annoSvg.firstChild) annoSvg.removeChild(annoSvg.firstChild);
+    annoEnsureDefs(annoSvg);
+    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;
+    annoBake();
+  }
+  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 === 'style') {
+      var style = reverse ? op.before : op.after;
+      op.shape.color = style.color;
+      op.shape.ws = style.ws;
+    } 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();
+    annoBake();
+  }
+  function annoRedo() {
+    var op = annoRedoStack.pop();
+    if (!op) return;
+    annoApplyOp(op, false);
+    annoUndoStack.push(op);
+    annoSelected = null;
+    annoRedraw();
+    annoBake();
+  }
+  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 setAnnoStyle(patch) {
+    if (patch.color) annoColor = patch.color;
+    if (patch.ws) annoWidthScale = patch.ws;
+    annoStyleButtons.forEach(function (entry) {
+      entry.button.classList.toggle('is-active',
+        entry.kind === 'color' ? entry.value === annoColor : entry.value === annoWidthScale);
+    });
+    // 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 };
+      annoSelected.color = patch.color || annoSelected.color;
+      annoSelected.ws = patch.ws || annoSelected.ws;
+      annoPushOp({
+        kind: 'style', shape: annoSelected,
+        before: beforeStyle,
+        after: { color: annoSelected.color, ws: annoSelected.ws },
+      });
+      annoRedraw();
+    }
+  }
+  // Re-bake the shown raster clone (image + shapes composited to a PNG data
+  // URI) so a native right-click "Copy image" carries the annotations.
+  function annoShapesSvgMarkup() {
+    var svg = document.createElementNS(ANNO_NS, 'svg');
+    svg.setAttribute('xmlns', ANNO_NS);
+    svg.setAttribute('viewBox', '0 0 ' + lightboxNaturalW + ' ' + lightboxNaturalH);
+    svg.setAttribute('width', lightboxNaturalW);
+    svg.setAttribute('height', lightboxNaturalH);
+    annoEnsureDefs(svg);
+    annoShapes.forEach(function (shape) { svg.appendChild(annoShapeEl(shape)); });
+    return new XMLSerializer().serializeToString(svg);
+  }
+  function annoComposite(drawBase, scale, done) {
+    var canvas = document.createElement('canvas');
+    canvas.width = lightboxNaturalW * scale;
+    canvas.height = lightboxNaturalH * scale;
+    var ctx = canvas.getContext('2d');
+    drawBase(ctx, canvas, function () {
+      if (!annoShapes.length) { done(canvas); return; }
+      var overlay = new Image();
+      overlay.onload = function () {
+        ctx.drawImage(overlay, 0, 0, canvas.width, canvas.height);
+        done(canvas);
+      };
+      overlay.onerror = function () { done(canvas); };
+      overlay.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(annoShapesSvgMarkup());
+    });
+  }
+  function annoBake() {
+    if (!annoCloneEl || annoCloneEl.tagName !== 'IMG' || !annoBaseSrc) return;
+    var expected = annoCloneEl;
+    annoComposite(function (ctx, canvas, next) {
+      var base = new Image();
+      base.onload = function () { ctx.drawImage(base, 0, 0, canvas.width, canvas.height); next(); };
+      base.onerror = function () { next(); };
+      base.src = annoBaseSrc;
+    }, 1, function (canvas) {
+      if (annoCloneEl !== expected) return; // lightbox moved on to another image
+      try { annoCloneEl.src = canvas.toDataURL('image/png'); }
+      catch (e) { /* tainted canvas — keep the plain image */ }
+    });
+  }
+  function annoCopyImage() {
+    var clone = annoCloneEl;
+    if (!clone) return;
+    var isImg = clone.tagName === 'IMG';
+    annoComposite(function (ctx, canvas, next) {
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      var base = new Image();
+      base.onload = function () { ctx.drawImage(base, 0, 0, canvas.width, canvas.height); next(); };
+      base.onerror = function () { next(); };
+      base.src = isImg ? (annoBaseSrc || clone.src)
+        : 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(new XMLSerializer().serializeToString(clone));
+    }, isImg ? 1 : 2, function (canvas) {
+      try {
+        canvas.toBlob(function (blob) {
+          if (!blob || typeof ClipboardItem === 'undefined' || !navigator.clipboard || !navigator.clipboard.write) return;
+          navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]).catch(function () {});
+        }, 'image/png');
+      } catch (e) { /* clipboard unavailable */ }
+    });
+  }
+  // After Esc the drawings stay visible on the inline figure: a same-viewBox
+  // overlay svg over the source element. In-memory only — gone on reload.
+  function annoSyncInline() {
+    var node = annoSourceNode;
+    if (!node) return;
+    var visual = lightboxSourceOf(node);
+    if (!visual || !visual.parentNode) return;
+    var wrap = visual.closest ? visual.closest('.anno-inline-wrap') : null;
+    var shapes = annoShapes;
+    if (!shapes.length) {
+      if (wrap) {
+        var old = wrap.querySelector('svg.anno-inline');
+        if (old) wrap.removeChild(old);
+      }
+      return;
+    }
+    if (!wrap) {
+      wrap = document.createElement('span');
+      wrap.className = 'anno-inline-wrap';
+      visual.parentNode.insertBefore(wrap, visual);
+      wrap.appendChild(visual);
+    }
+    var overlay = wrap.querySelector('svg.anno-inline');
+    if (!overlay) {
+      overlay = document.createElementNS(ANNO_NS, 'svg');
+      overlay.setAttribute('class', 'anno-inline');
+      wrap.appendChild(overlay);
+    }
+    overlay.setAttribute('viewBox', '0 0 ' + lightboxNaturalW + ' ' + lightboxNaturalH);
+    while (overlay.firstChild) overlay.removeChild(overlay.firstChild);
+    annoEnsureDefs(overlay);
+    shapes.forEach(function (shape) { overlay.appendChild(annoShapeEl(shape)); });
+  }
+  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 };
+    shape.color = annoColor;
+    shape.ws = annoWidthScale;
+    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) {
+    annoSourceNode = sourceNode;
+    annoCloneEl = lightboxCanvas.firstElementChild;
+    annoBaseSrc = (annoCloneEl && annoCloneEl.tagName === 'IMG') ? annoCloneEl.src : null;
+    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);
+    if (annoShapes.length) annoBake();
+  }
   function buildLightbox() {
     if (lightboxEl) return;
     lightboxEl = document.createElement('div');
@@ -2221,7 +2809,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', '');
@@ -2231,6 +2819,44 @@ ${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);
+    });
+    ANNO_COLORS.forEach(function (color) {
+      var swatch = lightboxButton('', 'Stroke color ' + color, function () { setAnnoStyle({ color: color }); });
+      swatch.className = 'lightbox-swatch';
+      swatch.style.background = color;
+      swatch.setAttribute('data-anno-color', color);
+      if (color === annoColor) swatch.classList.add('is-active');
+      annoStyleButtons.push({ kind: 'color', value: color, button: swatch });
+      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] }); });
+      button.setAttribute('data-anno-width', String(width[1]));
+      if (width[1] === annoWidthScale) button.classList.add('is-active');
+      annoStyleButtons.push({ kind: 'width', value: width[1], button: button });
+      bar.appendChild(button);
+    });
+    var copyButton = lightboxButton('⧉', 'Copy image with annotations', annoCopyImage);
+    copyButton.setAttribute('data-anno-copy', '');
+    bar.appendChild(copyButton);
+    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');
@@ -2261,6 +2887,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;
@@ -2291,6 +2919,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);
     });
   }
@@ -2331,6 +2960,7 @@ ${mermaidInitTag}` : ''}
       lightboxCanvas.removeChild(lightboxCanvas.firstChild);
     }
     lightboxCanvas.appendChild(clone);
+    annoSetup(node);
     lightboxReturnScroll = window.scrollY;
     suppressAnchorCapture = true;
@@ -2347,6 +2977,14 @@ ${mermaidInitTag}` : ''}
     if (!lightboxIsOpen()) return;
     lightboxEl.hidden = true;
     document.body.removeAttribute('data-lightbox-open');
+    annoCancelDraft();
+    annoSyncInline();
+    annoSourceNode = null;
+    annoCloneEl = null;
+    annoBaseSrc = null;
+    annoSvg = null;
+    annoMode = null;
+    setAnnoMode(null);
     while (lightboxCanvas.firstChild) {
       lightboxCanvas.removeChild(lightboxCanvas.firstChild);
     }
@@ -2372,7 +3010,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.1",
+  "version": "2.8.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/lightbox-anno-style.test.js && node test/reader-panels.test.js && node test/cli.test.js && node test/code-operator.test.js"
   },
   "repository": {
     "type": "git",