@khanglvm/relay 0.14.2 → 0.15.0

package/src/ui/app.js

@@ -11,6 +11,8 @@
     canComment: true,
     canEditComments: true,
     canDeleteComments: true,
+    canEditBlocks: true,
+    canFinalize: true,
   };
   if (access.role) document.documentElement.dataset.accessRole = access.role;
   const QS = spec.questions || [];
@@ -23,8 +25,11 @@
   let seenDraftRev = typeof boot.draftRev === 'number' ? boot.draftRev : 0;
 
   function authHeaders(extra = {}) {
-    return access.token ? { ...extra, 'x-relay-share-token': access.token } : extra;
+    const headers = access.token ? { ...extra, 'x-relay-share-token': access.token } : { ...extra };
+    if (access.reviewSessionId) headers['x-relay-review-session'] = access.reviewSessionId;
+    return headers;
   }
+  const canPersistFeedback = Boolean(access.canEditAnswers || access.canComment || access.canEditBlocks);
 
   // ---------- helpers ----------
   function el(tag, attrs = {}, ...children) {
@@ -133,14 +138,17 @@
   applyFontScale();
 
   // ---------- localStorage draft mirror ----------
-  // Every autosave is ALSO written to localStorage, keyed by board id. This is
+  // Every autosave is ALSO written to localStorage, keyed by board id + access
+  // role/session. This keeps a reviewer side draft from leaking into a
+  // collaborator/read-only tab on the same LAN origin.
   // the durability layer the server file alone can't provide: if the connection
   // drops and the user keeps typing, the in-memory state is mirrored locally, so
   // even a tab reload / browser restart / a freshly opened tab on the same board
   // prefills the LATEST input instead of a blank board or a stale server save.
   // Guards (per design): newest-of-(local,server) wins; the mirror is discarded
   // if the board's spec rev changed (agent edited it); cleared on submit.
-  const LOCAL_DRAFT_KEY = 'relay-draft-' + (boot.boardId || 'unknown');
+  const LOCAL_DRAFT_KEY = 'relay-draft-' + (boot.boardId || 'unknown') + '-' +
+    (access.role || 'owner') + (access.reviewSessionId ? '-' + access.reviewSessionId : '');
   function writeLocalDraft(p, updatedAt) {
     try {
       localStorage.setItem(LOCAL_DRAFT_KEY, JSON.stringify({
@@ -352,7 +360,7 @@
   // to detect recovery from the Retry button / heartbeat.
   async function probeServer() {
     try {
-      const r = await fetch('/api/status', { cache: 'no-store' });
+      const r = await fetch('/api/status', { cache: 'no-store', headers: authHeaders() });
       return r.ok;
     } catch {
       return false;
@@ -407,6 +415,7 @@
     for (const node of app.querySelectorAll('input, textarea, button, select')) {
       node.disabled = false;
     }
+    applyAccessRestrictions();
     if (lostNote) lostNote.remove();
     // Re-arm the heartbeat (it stops itself when it confirms loss) and persist
     // everything typed during the outage. saveDraft() updates the save label.
@@ -454,7 +463,7 @@
   // probe → block. Any success resets it.
   let saveFailures = 0;
   function scheduleSave() {
-    if (submitted) return;
+    if (submitted || !canPersistFeedback) return;
     // Mirror to localStorage SYNCHRONOUSLY on every edit, before (and regardless
     // of) the network save. This is what survives a tab reload / crash / a new
     // tab during a connection outage — it must happen even while blocked.
@@ -465,6 +474,7 @@
     saveTimer = setTimeout(saveDraft, 450);
   }
   async function saveDraft() {
+    if (!canPersistFeedback) return;
     const seq = ++saveSeq;
     // Keep the local mirror current on every flush too (covers programmatic
     // saveDraft() calls that don't go through scheduleSave, e.g. recovery flush).
@@ -516,7 +526,7 @@
     if (submitted) return;
     fetch('/api/ping', {
       method: 'POST',
-      headers: { 'content-type': 'application/json' },
+      headers: authHeaders({ 'content-type': 'application/json' }),
       body: JSON.stringify({
         visible: !document.hidden,
         focused: document.hasFocus(),
@@ -570,11 +580,17 @@
   function blockCtx(questionId) {
     return {
       theme: effectiveTheme,
-      htmlSrc: (blockId) => '/html/b/' + encodeURIComponent(blockId) + '?theme=' + effectiveTheme(),
+      htmlSrc: (blockId) => {
+        const params = new URLSearchParams({ theme: effectiveTheme() });
+        if (access.token) params.set('token', access.token);
+        return '/html/b/' + encodeURIComponent(blockId) + '?' + params.toString();
+      },
       questionId: questionId == null ? null : questionId,
       annotate: Annotate,
+      canComment: access.canComment !== false,
       edits: state.blockEdits,
       onBlockEdit,
+      canEditBlocks: access.canEditBlocks !== false,
     };
   }
 
@@ -807,6 +823,7 @@
     const byVal = new Map(q.options.map((o) => [o.value, o]));
     let dragFrom = null;
     function move(from, to) {
+      if (!access.canEditAnswers) return;
       const arr = state.answers[q.id];
       if (!Array.isArray(arr) || to < 0 || to >= arr.length || from === to) return;
       const [x] = arr.splice(from, 1);
@@ -827,7 +844,7 @@
         down.disabled = i === order.length - 1;
         up.addEventListener('click', () => move(i, i - 1));
         down.addEventListener('click', () => move(i, i + 1));
-        const item = el('div', { class: 'rank-item', draggable: 'true' },
+        const item = el('div', { class: 'rank-item', draggable: access.canEditAnswers ? 'true' : 'false' },
           el('span', { class: 'rank-badge', 'aria-hidden': 'true' }, String(i + 1)),
           el('div', { class: 'rank-body' },
             el('div', { class: 'ol' }, o.label),
@@ -835,6 +852,7 @@
           el('div', { class: 'rank-ctrls' }, up, down)
         );
         item.addEventListener('dragstart', (e) => {
+          if (!access.canEditAnswers) { e.preventDefault(); return; }
           dragFrom = i; item.classList.add('dragging');
           try { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', String(i)); } catch (_) {}
         });
@@ -1182,7 +1200,11 @@
       ),
       el('button', { class: 'share-choice', type: 'button', 'data-role': 'review' },
         el('span', { class: 'share-choice-title' }, 'Reviewer'),
-        el('span', { class: 'share-choice-sub' }, 'Can add comments only. No submit, answer edits, edit, or delete.')
+        el('span', { class: 'share-choice-sub' }, 'Can answer, comment, and submit a reference-only side review. Does not finalize the board.')
+      ),
+      el('button', { class: 'share-choice', type: 'button', 'data-role': 'read' },
+        el('span', { class: 'share-choice-title' }, 'Read only'),
+        el('span', { class: 'share-choice-sub' }, 'Can view the board and existing feedback. Cannot answer, comment, edit, or submit.')
       ),
       el('div', { class: 'share-result' })
     );
@@ -1207,7 +1229,7 @@
           const copy = el('button', { class: 'share-copy', type: 'button' }, 'Copy link');
           copy.addEventListener('click', () => copyText(body.url, copy));
           result.replaceChildren(
-            el('div', { class: 'share-ready' }, role === 'collab' ? 'Collaborator link active' : 'Reviewer link active'),
+            el('div', { class: 'share-ready' }, role === 'collab' ? 'Collaborator link active' : role === 'review' ? 'Reviewer link active' : 'Read-only link active'),
             el('a', { class: 'share-url', href: body.url, target: '_blank', rel: 'noreferrer' }, body.url),
             copy
           );
@@ -1226,18 +1248,33 @@
     return footer;
   }
 
-  if (!access.canSubmit) {
-    submitbar.style.display = 'none';
-    showNotice('Reviewer mode: comments are saved live. Answers and submission are disabled.', 'info');
-  } else if (access.role === 'collab') {
-    showNotice('Editor mode: answers, comments, and submit are enabled for this shared board.', 'info');
-  }
-  if (!access.canEditAnswers) {
-    document.documentElement.classList.add('relay-review');
-    for (const node of app.querySelectorAll('.card input, .card textarea, .card button, .card select')) {
-      node.disabled = true;
+  function applyAccessRestrictions() {
+    if (!access.canSubmit) submitbar.style.display = 'none';
+    if (!access.canEditAnswers) {
+      for (const node of app.querySelectorAll('.card input, .card textarea, .card button, .card select')) {
+        // Viewer controls inside question/option blocks remain useful in a
+        // read-only board (zoom, fit, full-screen, filtering, diff view). Block
+        // mutation controls are independently gated by canEditBlocks.
+        if (node.closest('.blocks')) continue;
+        node.disabled = true;
+      }
+      for (const item of app.querySelectorAll('.rank-item')) {
+        item.draggable = false;
+        item.setAttribute('aria-disabled', 'true');
+      }
     }
+    document.documentElement.classList.toggle('relay-review', access.canEditComments === false || access.canDeleteComments === false);
+  }
+  if (access.role === 'review') {
+    submitBtn.textContent = 'Submit side review';
+    hint.textContent = 'Reference only — the owner still submits the final answer.';
+    showNotice('Reviewer mode: your answers and comments are saved separately as a reference-only side review. Submitting here does not finalize the board or notify the waiting agent.', 'info');
+  } else if (access.role === 'read') {
+    showNotice('Read-only mode: you can view the board and existing feedback, but answers, comments, edits, and submission are disabled.', 'info');
+  } else if (access.role === 'collab') {
+    showNotice('Editor mode: answers, comments, and final submission are enabled for this shared board.', 'info');
   }
+  applyAccessRestrictions();
   app.append(buildFooter());
 
   // ---------- validation & submit ----------
@@ -1253,7 +1290,7 @@
     return !firstBad;
   }
 
-  function showDone(closing) {
+  function showDone(closing, sideReview = false) {
     stopHeartbeat();
     // Annotation pins/badges/popover float on <body> with elevated z-index —
     // remove them so they don't leak over the submitted screen.
@@ -1267,7 +1304,9 @@
     // If the agent already stopped waiting (soft timeout / dropped connection),
     // the submission won't be picked up automatically — tell the user to nudge
     // the agent. Otherwise the normal hand-back copy applies.
-    const note = handedBack
+    const note = sideReview
+      ? 'Saved for reference. This did not finalize the board or notify the waiting agent; the owner still needs to submit the final answer.'
+      : handedBack
       ? 'Saved. Your agent had stopped waiting — send it a message so it picks up your answers.'
       : closing
         ? 'Handing back to your agent — this tab will close itself…'
@@ -1275,7 +1314,7 @@
     app.replaceChildren(
       el('div', { class: 'done' },
         el('div', { class: 'mark' }, '✓'),
-        el('h2', {}, QS.length ? 'Submitted' : 'Acknowledged'),
+        el('h2', {}, sideReview ? 'Side review saved' : QS.length ? 'Submitted' : 'Acknowledged'),
         el('p', { id: 'done-note' }, note)
       )
     );
@@ -1302,14 +1341,16 @@
         throw netErr;
       }
       if (!res.ok) throw new Error('submit rejected');
+      const submitResult = await res.json().catch(() => null);
+      const sideReview = Boolean(submitResult && submitResult.sideReview === true && submitResult.final === false);
       submitted = true;
       // Submitted successfully → the local mirror is no longer needed and would
       // otherwise resurrect stale answers on a future reopen. Clear it.
       clearLocalDraft();
       // Don't auto-close when the agent had stopped waiting — the user needs to
       // read the "send your agent a message" note and act on it.
-      const autoClose = spec.autoClose && !handedBack;
-      showDone(autoClose);
+      const autoClose = !sideReview && spec.autoClose && !handedBack;
+      showDone(autoClose, sideReview);
       if (autoClose) {
         setTimeout(() => {
           window.close();
@@ -1324,7 +1365,7 @@
     } catch {
       // Restore the button so the user can retry.
       submitBtn.disabled = false;
-      submitBtn.textContent = spec.submitLabel;
+      submitBtn.textContent = access.role === 'review' ? 'Submit side review' : spec.submitLabel;
       if (!reached) {
         // The connection is gone — the submit (and any further input) can't be
         // persisted. Block hard so the user stops adding feedback that would be
@@ -1362,7 +1403,7 @@
   // the server had nothing — e.g. a freshly reopened board the user had typed
   // into in another tab during an outage), the server doesn't yet have this
   // input. Flush it once so a brand-new tab's view is also the server's truth.
-  if (initialPrefill && initialPrefill.__from === 'local' && !submitted) {
+  if (initialPrefill && initialPrefill.__from === 'local' && !submitted && canPersistFeedback) {
     saveDraft();
   }
 
@@ -1456,7 +1497,7 @@
     // Piggyback presence on the heartbeat (best-effort; no-ops after submit).
     pingPresence();
     try {
-      const r = await fetch('/api/status', { cache: 'no-store' });
+      const r = await fetch('/api/status', { cache: 'no-store', headers: authHeaders() });
       if (!r.ok) throw new Error('bad status');
       misses = 0;
       // The heartbeat reaching the server is itself proof persistence is back —
@@ -1476,10 +1517,14 @@
       // user knows to prompt the agent after submitting.
       if (body && body.softTimedOut && !submitted) {
         handedBack = true;
-        showNotice(
-          'You’ve had this open a while, so the agent stopped waiting. Your changes save automatically — submit when you’re ready, then prompt the agent to pick them up.',
-          'info'
-        );
+        if (access.role === 'review') {
+          showNotice('This remains a reference-only side review. Submit when ready; the owner still needs to provide the final answer.', 'info');
+        } else if (access.role !== 'read') {
+          showNotice(
+            'You’ve had this open a while, so the agent stopped waiting. Your changes save automatically — submit when you’re ready, then prompt the agent to pick them up.',
+            'info'
+          );
+        }
       }
       if (body && typeof body.rev === 'number' && bootRev !== null && body.rev !== bootRev && !submitted && !reloading) {
         // Don't yank the board out from under someone mid-comment: an open

package/src/ui/blocks.css

@@ -498,6 +498,7 @@
   position: relative;
   width: 100%;
 }
+.blk-chart-stage { position: relative; width: 100%; height: 100%; min-width: 0; }
 .blk-chart canvas { display: block; }
 .blk-chart-badge {
   position: absolute;
@@ -736,9 +737,10 @@ body.blk-full-open { overflow: hidden; }
   border: 1px solid var(--border);
   border-radius: 10px;
 }
-/* keep the canvas corners inside the rounded frame (mermaid already clips via
-   its overflow:auto) */
-.blk-chart.blk-viewer:not(.blk-full) { overflow: hidden; }
+/* Charts now use the same zoom/pan viewer as diagrams and images. Keep the
+   rounded frame while allowing the responsive chart stage to overflow once
+   the user zooms past fit. */
+.blk-chart.blk-viewer:not(.blk-full) { overflow: auto; }
 
 /* drag-to-pan affordance: grab when a visual overflows its box, grabbing while
    dragging. During an active drag the inner svg/img/canvas ignore the pointer

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;
     }
@@ -1922,10 +1940,11 @@
   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 (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;
@@ -2132,6 +2151,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,6 +2174,7 @@
   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');
@@ -2164,6 +2193,7 @@
   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;
@@ -2306,7 +2336,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) =>
@@ -2352,6 +2382,10 @@
     // 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,17 +2411,18 @@
         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
@@ -2396,17 +2431,38 @@
     }
     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 +2491,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);
     }
 
@@ -2586,6 +2677,8 @@
       // 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,
+      canEditBlocks: !ctx || ctx.canEditBlocks !== false,
       onBlockEdit:
         ctx && typeof ctx.onBlockEdit === 'function' ? ctx.onBlockEdit : () => {},
     };