@khanglvm/relay 0.14.2 → 0.16.0

package/src/ui/blocks.js

@@ -734,7 +734,7 @@
 
   function renderDiff(block, ctx, blockId) {
     const files = splitDiffFiles(block.diff);
-    if (block.review === true) return renderDiffReview(block, ctx, blockId, files);
+    if (block.review === true && ctx.canEditBlocks !== false) return renderDiffReview(block, ctx, blockId, files);
     const named = files.filter((f) => f.name);
     const multi = named.length > 1;
     let view = block.view === 'split' ? 'split' : 'unified';
@@ -844,6 +844,7 @@
   }
 
   function renderGitConflict(block, ctx, blockId) {
+    const editable = ctx.canEditBlocks !== false;
     const conflicts = Array.isArray(block.conflicts) ? block.conflicts : [];
     const prior = ctx && ctx.edits && ctx.edits[blockId] && typeof ctx.edits[blockId] === 'object'
       ? ctx.edits[blockId]
@@ -891,6 +892,7 @@
         spellcheck: 'false',
         rows: '5',
         placeholder: 'Write the resolved content for this hunk',
+        disabled: editable ? null : '',
       });
       const buttons = [];
       const setChoice = (choice) => {
@@ -902,7 +904,7 @@
         emit();
       };
       const makeButton = (choice, label) => {
-        const b = el('button', { type: 'button', class: 'gitconf-choice' }, label);
+        const b = el('button', { type: 'button', class: 'gitconf-choice', disabled: editable ? null : '' }, label);
         b.addEventListener('mousedown', (e) => e.stopPropagation());
         b.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); setChoice(choice); });
         buttons.push({ choice, el: b });
@@ -1312,11 +1314,14 @@
     const height = clampHeight(block.height, 320);
     const wrap = el('div', { class: 'blk-chart' });
     wrap.style.height = height + 'px';
+    const stage = el('div', { class: 'blk-chart-stage' });
     const canvas = el('canvas');
-    wrap.append(canvas);
+    stage.append(canvas);
+    wrap.append(stage);
 
     let chartInst = null;
     let chartBadges = [];
+    let naturalSize = null;
 
     const openFor = (target) => (anchor) =>
       ctx.annotate.openExternal({ blockId, questionId: ctx.questionId, target }, anchor);
@@ -1358,7 +1363,7 @@
           const badge = makeBadge(count, 'blk-chart-badge-pt', openFor(target));
           badge.style.left = (canvas.offsetLeft + pos.x) + 'px';
           badge.style.top = (canvas.offsetTop + pos.y) + 'px';
-          wrap.append(badge);
+          stage.append(badge);
           chartBadges.push(badge);
         }
       }
@@ -1370,9 +1375,6 @@
     }
 
     if (ctx.annotate && ctx.annotate.onBadgeRefresh) ctx.annotate.onBadgeRefresh(syncChartBadges);
-    // full-screen + whole-chart comment only; charts redraw responsively (no pixel zoom)
-    attachViewer(wrap, { zoomEl: null, label: 'chart', comment: wholeBlockComment(ctx, blockId, 'chart') });
-
     loadChart().then((Chart) => {
       let config = block.config
         ? JSON.parse(JSON.stringify(block.config))
@@ -1384,17 +1386,33 @@
       try {
         chartInst = new Chart(canvas.getContext('2d'), config);
         chartRegistry.push({ chart: chartInst });
+        // Chart.js stays responsive inside a stage whose dimensions the shared
+        // viewer controls. This gives charts the same bounded, eased wheel zoom
+        // as diagrams/images while retaining sharp redraws at every scale.
+        naturalSize = {
+          w: Math.max(1, Math.round(stage.getBoundingClientRect().width || wrap.clientWidth || 640)),
+          h: height,
+        };
+        attachViewer(wrap, {
+          zoomEl: stage,
+          natural: () => naturalSize,
+          fluidFit: true,
+          scaleHeight: true,
+          label: 'chart',
+          comment: wholeBlockComment(ctx, blockId, 'chart'),
+        });
       } catch (err) {
         wrap.replaceChildren(el('div', { class: 'blk-error' }, 'Chart error: ' + (err && err.message ? err.message : String(err))));
         return;
       }
       // hover -> pointer cursor on a hit
       canvas.addEventListener('mousemove', (e) => {
+        if (ctx.canComment === false) { canvas.style.cursor = 'default'; return; }
         const hits = chartInst.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
         canvas.style.cursor = hits.length ? 'pointer' : 'default';
       });
       canvas.addEventListener('click', (e) => {
-        if (!ctx.annotate) return;
+        if (!ctx.annotate || ctx.canComment === false) return;
         const hits = chartInst.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
         if (!hits.length) return;
         const { datasetIndex, index } = hits[0];
@@ -1449,7 +1467,7 @@
     entry.code = effectiveMermaidCode(entry);
     mermaidRegistry.push(entry);
 
-    if (!block.editable) {
+    if (!block.editable || ctx.canEditBlocks === false) {
       drawMermaid(entry);
       return container;
     }
@@ -1883,7 +1901,9 @@
       src,
       alt: block.alt || 'image',
       loading: 'lazy',
+      title: ctx.canComment === false ? '' : 'Hold briefly, then drag to comment on an area',
     });
+    const stage = el('div', { class: 'blk-imgstage' }, img);
     // Inline default: the image fills its full width (container width, never
     // upscaled past natural) so it's readable without manual zoom; the CONTAINER
     // caps the height (default 800 via CSS, or block.height) and SCROLLS — we
@@ -1893,18 +1913,30 @@
     img.addEventListener('error', () => {
       container.replaceChildren(el('div', { class: 'blk-error' }, 'Image failed to load'));
     });
-    container.append(img);
+    container.append(stage);
     const attachImgViewer = () =>
       attachViewer(container, {
-        zoomEl: img,
+        zoomEl: stage,
         natural: () => (img.naturalWidth > 0 ? { w: img.naturalWidth, h: img.naturalHeight } : null),
         label: 'image',
         comment: wholeBlockComment(ctx, blockId, 'image'),
       });
     if (img.complete && img.naturalWidth > 0) attachImgViewer();
     else img.addEventListener('load', attachImgViewer, { once: true });
+    if (ctx.annotate && ctx.canComment !== false) {
+      enableImageRegions({
+        host: stage,
+        surface: img,
+        panHost: container,
+        sourceForSide: () => img,
+        sideAtPoint: () => null,
+        ctx,
+        blockId,
+        label: block.alt || 'Image',
+      });
+    }
     if (ctx.annotate && block.pins === true) {
-      enableImagePins(container, img, ctx, blockId, block.alt || 'Image');
+      enableImagePins(stage, img, ctx, blockId, block.alt || 'Image');
     } else if (ctx.annotate) {
       ctx.annotate.register(img, {
         blockId,
@@ -1922,10 +1954,12 @@
   function enableImagePins(container, img, ctx, blockId, label) {
     const layer = el('div', { class: 'blk-imgpins' });
     container.append(layer);
-    img.classList.add('blk-img-pinnable');
+    if (ctx.canComment !== false) img.classList.add('blk-img-pinnable');
     let down = null; // {x,y} at pointerdown — used to reject drags (pan) as clicks
     img.addEventListener('pointerdown', (e) => { down = { x: e.clientX, y: e.clientY }; });
     img.addEventListener('click', (e) => {
+      if (ctx.canComment === false) return;
+      if (img._rlySuppressPointClick) { img._rlySuppressPointClick = false; down = null; return; }
       if (down && (Math.abs(e.clientX - down.x) > 4 || Math.abs(e.clientY - down.y) > 4)) { down = null; return; }
       const r = img.getBoundingClientRect();
       if (!r.width || !r.height) return;
@@ -1965,6 +1999,192 @@
     syncPins();
   }
 
+  // Hold, then drag, to select a rectangular image area. A short move remains
+  // native viewer pan / comparison-slider input; the hold threshold makes the
+  // two gestures coexist without a mode switch. Region coordinates are stored
+  // as normalized fractions, while a pixel crop is uploaded through the host
+  // context so the result gives the agent an actual viewable image artifact.
+  function enableImageRegions({ host, surface, panHost, sourceForSide, sideAtPoint, ctx, blockId, label }) {
+    const layer = el('div', { class: 'blk-region-layer' });
+    const selection = el('div', { class: 'blk-region-selection' });
+    layer.append(selection);
+    host.append(layer);
+    let pending = null;
+    let active = false;
+    let holdTimer = 0;
+    let status = null;
+    const HOLD_MS = 280;
+    const MIN_REGION = 0.012;
+
+    const localPoint = (e) => {
+      const r = host.getBoundingClientRect();
+      return {
+        x: r.width ? Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)) : 0,
+        y: r.height ? Math.max(0, Math.min(1, (e.clientY - r.top) / r.height)) : 0,
+      };
+    };
+    const clearStatus = () => { if (status) status.remove(); status = null; };
+    const showStatus = (text) => {
+      clearStatus();
+      status = el('div', { class: 'blk-region-status', role: 'status' }, text);
+      host.append(status);
+    };
+    const reset = () => {
+      clearTimeout(holdTimer);
+      holdTimer = 0;
+      active = false;
+      pending = null;
+      panHost._rlyRegionSelecting = false;
+      host.classList.remove('blk-region-arming', 'blk-region-selecting');
+      selection.style.display = 'none';
+      clearStatus();
+    };
+    const draw = (a, b) => {
+      const x = Math.min(a.x, b.x), y = Math.min(a.y, b.y);
+      const w = Math.abs(a.x - b.x), h = Math.abs(a.y - b.y);
+      selection.style.left = (x * 100) + '%';
+      selection.style.top = (y * 100) + '%';
+      selection.style.width = (w * 100) + '%';
+      selection.style.height = (h * 100) + '%';
+      return { x, y, w, h };
+    };
+    const beginSelection = (pointerId) => {
+      if (!pending || active) return;
+      active = true;
+      panHost._rlyRegionSelecting = true;
+      host.classList.remove('blk-region-arming');
+      host.classList.add('blk-region-selecting');
+      selection.style.display = 'block';
+      draw(pending.start, pending.start);
+      showStatus((pending.side ? pending.side.charAt(0).toUpperCase() + pending.side.slice(1) + ' · ' : '') + 'drag to select an area');
+      try { surface.setPointerCapture(pointerId); } catch (_) {}
+    };
+
+    async function cropRegion(img, region) {
+      if (!img || !img.naturalWidth || !img.naturalHeight) throw new Error('image is not ready');
+      const sx = Math.max(0, Math.floor(region.x * img.naturalWidth));
+      const sy = Math.max(0, Math.floor(region.y * img.naturalHeight));
+      const sw = Math.max(1, Math.min(img.naturalWidth - sx, Math.round(region.w * img.naturalWidth)));
+      const sh = Math.max(1, Math.min(img.naturalHeight - sy, Math.round(region.h * img.naturalHeight)));
+      const scale = Math.min(1, 1400 / sw, 1400 / sh);
+      const width = Math.max(1, Math.round(sw * scale));
+      const height = Math.max(1, Math.round(sh * scale));
+      const canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      const g = canvas.getContext('2d');
+      if (!g) throw new Error('canvas unavailable');
+      g.drawImage(img, sx, sy, sw, sh, 0, 0, width, height);
+      const dataUrl = canvas.toDataURL('image/png');
+      if (!/^data:image\/png;base64,/.test(dataUrl)) throw new Error('crop unavailable');
+      if (ctx.saveArtifact) return ctx.saveArtifact({ dataUrl, mime: 'image/png', width, height, blockId });
+      return { data: dataUrl.slice(dataUrl.indexOf(',') + 1), mime: 'image/png', width, height };
+    }
+
+    const finishRegion = async (region, side) => {
+      const target = {
+        kind: 'image-region',
+        x: Math.round(region.x * 10000) / 10000,
+        y: Math.round(region.y * 10000) / 10000,
+        w: Math.round(region.w * 10000) / 10000,
+        h: Math.round(region.h * 10000) / 10000,
+        side: side || undefined,
+        label,
+      };
+      showStatus('Saving selected area…');
+      try {
+        target.crop = await cropRegion(sourceForSide(side), region);
+      } catch {
+        target.cropUnavailable = true;
+      }
+      clearStatus();
+      ctx.annotate.openExternal({ blockId, questionId: ctx.questionId, target }, host);
+    };
+
+    surface.addEventListener('pointerdown', (e) => {
+      if (e.button !== 0 || ctx.canComment === false) return;
+      if (e.target.closest && e.target.closest('.cmp-handle, .blk-imgregion, .blk-tools')) return;
+      const p = localPoint(e);
+      pending = {
+        start: p,
+        last: p,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        pointerId: e.pointerId,
+        startedAt: performance.now(),
+        side: sideAtPoint(p.x),
+      };
+      host.classList.add('blk-region-arming');
+      holdTimer = setTimeout(() => beginSelection(e.pointerId), HOLD_MS);
+    });
+    surface.addEventListener('pointermove', (e) => {
+      if (!pending) return;
+      const moved = Math.hypot(e.clientX - pending.clientX, e.clientY - pending.clientY);
+      // Timers can be throttled while an automation host or background tab owns
+      // the event loop. The first post-hold move is also authoritative, so a
+      // genuine hold still enters area mode even if setTimeout fired late.
+      if (!active && performance.now() - pending.startedAt >= HOLD_MS) beginSelection(pending.pointerId);
+      if (!active) {
+        if (moved > 5) reset();
+        return;
+      }
+      e.preventDefault();
+      pending.last = localPoint(e);
+      draw(pending.start, pending.last);
+    });
+    const end = (e) => {
+      if (!pending) return;
+      clearTimeout(holdTimer);
+      if (!active) { reset(); return; }
+      e.preventDefault();
+      const region = draw(pending.start, pending.last || localPoint(e));
+      const side = pending.side;
+      surface._rlySuppressPointClick = true;
+      reset();
+      clearStatus();
+      if (region.w >= MIN_REGION && region.h >= MIN_REGION) finishRegion(region, side);
+    };
+    surface.addEventListener('pointerup', end);
+    // Some Chromium/CDP paths emit pointercancel immediately after granting
+    // capture on the first dragged frame. Once area mode is active, keep the
+    // last drawn rectangle instead of throwing the user's deliberate hold away.
+    surface.addEventListener('pointercancel', (e) => active ? end(e) : reset());
+
+    const syncRegions = () => {
+      for (const node of Array.from(layer.querySelectorAll('.blk-imgregion'))) node.remove();
+      const groups = new Map();
+      for (const a of ctx.annotate.list()) {
+        if (a.blockId !== blockId || !a.target || a.target.kind !== 'image-region') continue;
+        const t = a.target;
+        const key = [t.side || '', t.x, t.y, t.w, t.h].join(':');
+        const group = groups.get(key) || { target: t, count: 0 };
+        group.count++;
+        groups.set(key, group);
+      }
+      for (const { target, count } of groups.values()) {
+        const region = el('button', {
+          class: 'blk-imgregion',
+          type: 'button',
+          'data-count': String(count),
+          title: `${target.side ? target.side + ' · ' : ''}${count} ${count === 1 ? 'comment' : 'comments'}`,
+          'aria-label': `${target.side ? target.side + ' image area' : 'image area'} with ${count} ${count === 1 ? 'comment' : 'comments'}`,
+        });
+        region.style.left = (target.x * 100) + '%';
+        region.style.top = (target.y * 100) + '%';
+        region.style.width = (target.w * 100) + '%';
+        region.style.height = (target.h * 100) + '%';
+        region.addEventListener('pointerdown', (e) => e.stopPropagation());
+        region.addEventListener('click', (e) => {
+          e.stopPropagation();
+          ctx.annotate.openExternal({ blockId, questionId: ctx.questionId, target }, region);
+        });
+        layer.append(region);
+      }
+    };
+    if (ctx.annotate.onBadgeRefresh) ctx.annotate.onBadgeRefresh(syncRegions);
+    syncRegions();
+  }
+
   // ---------- palette ----------
   // Color palettes as swatch cards: hover a swatch to reveal its hex, click to
   // copy it. One palette may be {featured:true} → a larger spotlight row. Lets
@@ -2106,18 +2326,46 @@
     window.addEventListener('resize', sizeBefore);
 
     let dragging = false;
+    let dragMoved = false;
+    let dragStartX = 0;
     const setFromX = (clientX) => {
       const r = frame.getBoundingClientRect();
       if (r.width) { pos = Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100)); apply(); }
     };
-    frame.addEventListener('pointerdown', (e) => { dragging = true; setFromX(e.clientX); try { frame.setPointerCapture(e.pointerId); } catch (_) {} e.preventDefault(); });
-    frame.addEventListener('pointermove', (e) => { if (dragging) setFromX(e.clientX); });
-    frame.addEventListener('pointerup', () => { dragging = false; });
-    frame.addEventListener('pointercancel', () => { dragging = false; });
+    frame.addEventListener('pointerdown', (e) => {
+      if (e.target.closest && e.target.closest('.blk-imgregion')) return;
+      dragging = true;
+      dragMoved = false;
+      dragStartX = e.clientX;
+      try { frame.setPointerCapture(e.pointerId); } catch (_) {}
+    });
+    frame.addEventListener('pointermove', (e) => {
+      if (!dragging || frame._rlyRegionSelecting) return;
+      if (Math.abs(e.clientX - dragStartX) > 3) dragMoved = true;
+      if (dragMoved) { setFromX(e.clientX); e.preventDefault(); }
+    });
+    frame.addEventListener('pointerup', (e) => {
+      if (dragging && !dragMoved && !frame._rlyRegionSelecting) setFromX(e.clientX);
+      dragging = false;
+    });
+    frame.addEventListener('pointercancel', () => { dragging = false; dragMoved = false; });
     handle.addEventListener('keydown', (e) => {
       if (e.key === 'ArrowLeft') { pos = Math.max(0, pos - 2); apply(); e.preventDefault(); }
       else if (e.key === 'ArrowRight') { pos = Math.min(100, pos + 2); apply(); e.preventDefault(); }
     });
+    if (ctx.annotate && ctx.canComment !== false) {
+      frame.title = 'Hold briefly, then drag to comment on the visible Before or After image';
+      enableImageRegions({
+        host: frame,
+        surface: frame,
+        panHost: frame,
+        sourceForSide: (side) => side === 'before' ? beforeImg : afterImg,
+        sideAtPoint: (x) => (x * 100 <= pos ? 'before' : 'after'),
+        ctx,
+        blockId,
+        label: 'Comparison',
+      });
+    }
     attachViewer(wrap, { zoomEl: null, label: 'comparison', comment: wholeBlockComment(ctx, blockId, 'comparison') });
     return wrap;
   }
@@ -2132,6 +2380,15 @@
   // full-screen content insets — must mirror the .blk-full padding in blocks.css
   // so the fit-to-screen scale clears the fixed toolbar + leaves a small margin.
   const FULL_PAD_X = 24, FULL_PAD_TOP = 44, FULL_PAD_BOTTOM = 24;
+  // Wheel/pinch zoom is delta-proportional and animated. The old fixed 15% jump
+  // ran once for every wheel event, so a high-frequency trackpad gesture could
+  // compound to several hundred percent almost instantly. Cap the contribution
+  // of one event (mouse wheels often report ±100px) and ease toward the gesture's
+  // accumulated target at most once per animation frame.
+  const WHEEL_ZOOM_SENSITIVITY = 0.003;
+  const WHEEL_ZOOM_MAX_DELTA = 20;
+  const WHEEL_ZOOM_EASE = 0.24;
+  const WHEEL_ZOOM_EPSILON = 0.001;
 
   // Toolbar icons: full-screen (4-corner expand) and a speech-bubble for the
   // "comment on the whole block" button. Zoom is both cmd/ctrl+wheel AND
@@ -2146,13 +2403,13 @@
   function exitFull() {
     if (!fullOpen) return;
     const c = fullOpen;
+    if (c._rlyStopWheelZoom) c._rlyStopWheelZoom();
     c.classList.remove('blk-full');
     document.body.classList.remove('blk-full-open');
     const btn = c.querySelector('.blk-tools .tool-full');
     if (btn) btn.innerHTML = ICON_EXPAND;
     fullOpen = null;
     window.dispatchEvent(new Event('resize'));
-    if (c._rlyToolsSync) c._rlyToolsSync(); // re-pin toolbar to its scrolled corner
     if (c._rlyZoom) c._rlyZoom.reapply(); // restore the compact inline height cap
   }
   document.addEventListener('keydown', (e) => {
@@ -2164,13 +2421,13 @@
   function enterFull(container) {
     if (fullOpen === container) return;
     exitFull();
+    if (container._rlyStopWheelZoom) container._rlyStopWheelZoom();
     container.classList.add('blk-full');
     document.body.classList.add('blk-full-open');
     fullOpen = container;
     const btn = container.querySelector('.blk-tools .tool-full');
     if (btn) btn.textContent = '✕';
     window.dispatchEvent(new Event('resize'));
-    if (container._rlyToolsSync) container._rlyToolsSync();
     if (container._rlyZoom) container._rlyZoom.reapply();
   }
 
@@ -2273,6 +2530,7 @@
     });
     scrollEl.addEventListener('pointermove', (e) => {
       if (!pending) return;
+      if (scrollEl._rlyRegionSelecting) { pending = false; active = false; return; }
       const dx = e.clientX - sx, dy = e.clientY - sy;
       if (!active) {
         if (Math.abs(dx) < THRESH && Math.abs(dy) < THRESH) return;
@@ -2306,7 +2564,7 @@
   // with a block-scoped target ("Whole chart/diagram/…") so a user can comment
   // on the visual as a whole. null when annotation is off (omits the button).
   function wholeBlockComment(ctx, blockId, label) {
-    if (!ctx || !ctx.annotate) return null;
+    if (!ctx || !ctx.annotate || ctx.canComment === false) return null;
     const a = ctx.annotate;
     return {
       open: (anchorEl) =>
@@ -2333,25 +2591,13 @@
     if (!container._rlyPan) container._rlyPan = enablePan(container);
     const refreshPan = container._rlyPan;
 
-    // The toolbar is absolute inside the scroll box, so it scrolls away when the
-    // user pans/scrolls. Counter-translate it by the scroll offset to pin it to
-    // the visible corner (off in full-screen, where it is position:fixed). Bound
-    // once; always re-reads the current toolbar (mermaid rebuilds it on render).
-    if (!container._rlyToolsSync) {
-      const sync = () => {
-        const tb = container._rlyTools;
-        if (!tb) return;
-        if (container.classList.contains('blk-full')) { tb.style.transform = ''; return; }
-        const x = container.scrollLeft, y = container.scrollTop;
-        tb.style.transform = x || y ? 'translate(' + x + 'px,' + y + 'px)' : '';
-      };
-      container.addEventListener('scroll', sync);
-      container._rlyToolsSync = sync;
-    }
-
     // zoom level persists across re-renders; the wheel handler (bound once)
     // delegates through container._rlyZoom so it never holds a stale zoomEl
     if (container._rlyZ === undefined) container._rlyZ = null; // null = fit-to-width
+    // Fluid visuals (currently Chart.js) fit the live container width. Capture
+    // that rendered size only when leaving fit mode so zoom remains proportional
+    // without freezing later fit-mode viewport growth to an old width.
+    let fluidZoomNatural = null;
     const pct = el('span', { class: 'tool-pct' }, 'fit');
     function apply() {
       if (!zoomable) return;
@@ -2377,36 +2623,57 @@
         const scale = Math.min(availW / nat.w, availH / nat.h);
         target.style.maxWidth = 'none';
         target.style.width = Math.max(1, Math.round(nat.w * scale)) + 'px';
-        target.style.height = 'auto';
+        target.style.height = opts.scaleHeight ? Math.max(1, Math.round(nat.h * scale)) + 'px' : 'auto';
         pct.textContent = 'fit';
       } else if (z === null || !nat || !nat.w) {
         target.style.width = '100%';
-        target.style.maxWidth = nat && nat.w ? Math.ceil(nat.w) + 'px' : '100%';
-        target.style.height = 'auto';
+        target.style.maxWidth = opts.fluidFit ? '100%' : (nat && nat.w ? Math.ceil(nat.w) + 'px' : '100%');
+        target.style.height = opts.scaleHeight ? '100%' : 'auto';
         pct.textContent = 'fit';
       } else {
+        const zoomNat = fluidZoomNatural || nat;
         target.style.maxWidth = 'none';
-        target.style.width = Math.round(nat.w * z) + 'px';
-        target.style.height = 'auto';
+        target.style.width = Math.round(zoomNat.w * z) + 'px';
+        target.style.height = opts.scaleHeight && zoomNat && zoomNat.h ? Math.round(zoomNat.h * z) + 'px' : 'auto';
         pct.textContent = Math.round(z * 100) + '%';
       }
       window.dispatchEvent(new Event('resize')); // annotation badges reposition
       refreshPan();                              // content size → grab affordance
-      container._rlyToolsSync();                 // keep the toolbar pinned
     }
     function currentZ() {
       if (container._rlyZ !== null) return container._rlyZ;
+      if (opts.fluidFit) return 1;
       const nat = opts.natural();
       if (!nat || !nat.w) return 1;
       const shown = opts.zoomEl.getBoundingClientRect().width;
       return shown > 0 ? shown / nat.w : 1;
     }
     function setZoom(next) {
+      if (next === null) {
+        fluidZoomNatural = null;
+      } else if (opts.fluidFit && container._rlyZ === null) {
+        const shown = opts.zoomEl.getBoundingClientRect();
+        fluidZoomNatural = {
+          w: Math.max(1, shown.width),
+          h: Math.max(1, shown.height),
+        };
+      }
       container._rlyZ = next === null ? null : Math.min(8, Math.max(0.2, next));
       apply();
     }
     container._rlyZoom = { setZoom, currentZ, reapply: apply };
 
+    // Stop any in-flight wheel easing before an explicit toolbar/full-screen
+    // action. This prevents an older gesture target from overriding that action
+    // on the next animation frame.
+    if (!container._rlyStopWheelZoom) {
+      container._rlyStopWheelZoom = () => {
+        if (container._rlyWheelFrame) cancelAnimationFrame(container._rlyWheelFrame);
+        container._rlyWheelFrame = null;
+        container._rlyWheelTarget = null;
+      };
+    }
+
     const tools = el('div', { class: 'blk-tools' });
 
     // comment on the whole block (leftmost) — opens the annotation popover with
@@ -2435,18 +2702,53 @@
         const onWheel = (e) => {
           if (!(e.ctrlKey || e.metaKey) || !container._rlyZoom) return;
           e.preventDefault();
-          container._rlyZoom.setZoom(container._rlyZoom.currentZ() * (e.deltaY < 0 ? 1.15 : 1 / 1.15));
+          // Normalize line/page-mode devices to pixel-like units, then cap a
+          // single event. Exponential scaling makes equal motion reversible and
+          // lets tiny trackpad deltas stay tiny instead of becoming fixed jumps.
+          const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? window.innerHeight : 1;
+          const delta = Math.max(-WHEEL_ZOOM_MAX_DELTA, Math.min(WHEEL_ZOOM_MAX_DELTA, e.deltaY * unit));
+          const base = Number.isFinite(container._rlyWheelTarget)
+            ? container._rlyWheelTarget
+            : container._rlyZoom.currentZ();
+          container._rlyWheelTarget = Math.min(8, Math.max(0.2, base * Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY)));
+
+          // Respect reduced-motion while retaining the gentler delta-based step.
+          if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            container._rlyZoom.setZoom(container._rlyWheelTarget);
+            container._rlyWheelTarget = null;
+            return;
+          }
+          if (container._rlyWheelFrame) return; // coalesce bursty input to one rAF loop
+          const tick = () => {
+            const zoom = container._rlyZoom;
+            const target = container._rlyWheelTarget;
+            if (!zoom || !Number.isFinite(target)) {
+              container._rlyWheelFrame = null;
+              return;
+            }
+            const current = zoom.currentZ();
+            const gap = target - current;
+            if (Math.abs(gap) <= WHEEL_ZOOM_EPSILON) {
+              zoom.setZoom(target);
+              container._rlyWheelFrame = null;
+              container._rlyWheelTarget = null;
+              return;
+            }
+            zoom.setZoom(current + gap * WHEEL_ZOOM_EASE);
+            container._rlyWheelFrame = requestAnimationFrame(tick);
+          };
+          container._rlyWheelFrame = requestAnimationFrame(tick);
         };
         container.addEventListener('wheel', onWheel, { passive: false });
         container._rlyWheel = onWheel;
       }
       const zoomOut = el('button', { class: 'tool-zoom', type: 'button', title: 'Zoom out' }, '−');
       const zoomIn = el('button', { class: 'tool-zoom', type: 'button', title: 'Zoom in' }, '+');
-      zoomOut.addEventListener('click', (e) => { e.stopPropagation(); setZoom(currentZ() / 1.2); });
-      zoomIn.addEventListener('click', (e) => { e.stopPropagation(); setZoom(currentZ() * 1.2); });
+      zoomOut.addEventListener('click', (e) => { e.stopPropagation(); container._rlyStopWheelZoom(); setZoom(currentZ() / 1.2); });
+      zoomIn.addEventListener('click', (e) => { e.stopPropagation(); container._rlyStopWheelZoom(); setZoom(currentZ() * 1.2); });
       pct.classList.add('is-btn');
       pct.title = 'Reset to fit';
-      pct.addEventListener('click', (e) => { e.stopPropagation(); setZoom(null); });
+      pct.addEventListener('click', (e) => { e.stopPropagation(); container._rlyStopWheelZoom(); setZoom(null); });
       tools.append(zoomOut, pct, zoomIn);
     }
 
@@ -2459,12 +2761,11 @@
     });
     tools.append(fullBtn);
 
-    container.append(tools);
+    container.prepend(tools);
     container._rlyTools = tools;
     if (zoomable) apply();
     // non-zoomable diagrams (tall mermaid, oversized image) can still overflow
     refreshPan();
-    container._rlyToolsSync();
     if (container._rlyCmtSync) container._rlyCmtSync(); // reflect existing comment
   }
 
@@ -2586,6 +2887,10 @@
       // editable-mermaid plumbing: edits maps blockId -> edited code; onBlockEdit
       // reports an accepted change (or null to clear back to the original).
       edits: ctx && ctx.edits ? ctx.edits : {},
+      canComment: !ctx || ctx.canComment !== false,
+      saveArtifact:
+        ctx && typeof ctx.saveArtifact === 'function' ? ctx.saveArtifact : null,
+      canEditBlocks: !ctx || ctx.canEditBlocks !== false,
       onBlockEdit:
         ctx && typeof ctx.onBlockEdit === 'function' ? ctx.onBlockEdit : () => {},
     };