arrayview 0.45.1__py3-none-any.whl → 0.46.0__py3-none-any.whl

arrayview/_viewer.html

@@ -477,6 +477,32 @@
             position: absolute; bottom: 0; left: 0; width: 100%;
             height: 0; overflow: visible; pointer-events: none; z-index: 1;
         }
+        /* Tick values under the strip (see ColorBar._drawTicks). Hangs off
+           the column so the bar itself never changes size; glass islands
+           pad their bottom to enclose it. */
+        .cb-ticks {
+            position: absolute; top: 100%; left: 0; width: 100%;
+            height: 15px; line-height: 10px; overflow: visible;
+            pointer-events: none; z-index: 1; opacity: 0;
+            font-size: 9px; font-family: 'SF Mono', ui-monospace, 'Cascadia Code', 'JetBrains Mono', monospace;
+            font-variant-numeric: tabular-nums; color: var(--text);
+            transition: opacity 0.2s ease;
+        }
+        .cb-ticks span {
+            position: absolute; top: 5px; transform: translateX(-50%);
+            white-space: nowrap; opacity: 0.55;
+        }
+        /* A short marker under the bar's edge above each round value. */
+        .cb-ticks span::before {
+            content: ''; position: absolute; left: 50%; top: -4px;
+            width: 1px; height: 3px; background: currentColor; opacity: 0.8;
+        }
+
+        /* The longhand is needed too: `.cb-wrap` (every ColorBar-built
+           island) and `#mv-cb-wrap` set their own padding shorthand after
+           `.cb-island`, so the variable alone never reaches them. */
+        .cb-island.cb-has-ticks, .cb-wrap.cb-has-ticks, #mv-cb-wrap.cb-has-ticks { --cb-base-pad-bottom: 18px; padding-bottom: 18px; }
+        body.fullscreen-mode #slim-cb-wrap.cb-has-ticks { padding-bottom: 18px; }
         .cb-tooltip {
             position: absolute; top: 0; left: 0;
             font-size: 12px; font-family: 'SF Mono', ui-monospace, 'Cascadia Code', monospace;
@@ -503,10 +529,12 @@
         #slim-cb-tri-zone.expanded .slim-cb-tri { opacity: 1; }
         .cb-tri-zone.expanded .slim-cb-tri { opacity: 1; }
         #slim-cb-labels { display: none; /* vmin/vmax now shown as inline spans in the island */ }
-        .slim-cb-val { font-size: 12px; color: var(--text); font-family: 'SF Mono', ui-monospace, 'Cascadia Code', 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; min-width: 5ch; text-align: center; line-height: 1; cursor: pointer; display: inline-block; transition: color 140ms ease, opacity 140ms ease; }
+        /* Same face and size as the tick row under the bar, so the ends and
+           the values between them read as one scale. */
+        .slim-cb-val { font-size: 10px; color: var(--text); opacity: 0.9; font-family: 'SF Mono', ui-monospace, 'Cascadia Code', 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; min-width: 5ch; text-align: center; line-height: 1; cursor: pointer; display: inline-block; transition: color 140ms ease, opacity 140ms ease; }
         .slim-cb-val .exp { font-size: 0.7em; opacity: 0.5; vertical-align: baseline; letter-spacing: -0.3px; }
-        .slim-cb-val.is-locked,
-        .slim-cb-val.locked { color: var(--muted); opacity: 0.5; }
+        .cb-expanded .slim-cb-val.is-locked,
+        .cb-expanded .slim-cb-val.locked { color: var(--muted); opacity: 0.5; }
 
         [data-cb-bound] {
             cursor: pointer; box-sizing: border-box;
@@ -518,8 +546,8 @@
         }
         [data-cb-bound]:hover { background: rgba(255,255,255,0.06); }
         :root.light [data-cb-bound]:hover { background: rgba(0,0,0,0.045); }
-        [data-cb-bound].is-locked,
-        [data-cb-bound].locked { color: var(--muted) !important; opacity: 0.5; }
+        .cb-expanded [data-cb-bound].is-locked,
+        .cb-expanded [data-cb-bound].locked { color: var(--muted) !important; opacity: 0.5; }
 
         .slim-cb-val-input { font-size: 12px; font-family: system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; width: 52px; text-align: center; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; padding: 1px 2px; outline: none; line-height: 1; }
         :root.light .slim-cb-val-input { background: rgba(0,0,0,0.08); color: #1a1a1a; border-color: rgba(0,0,0,0.2); }
@@ -925,14 +953,6 @@
             opacity: 1;
             transform: translateY(0);
         }
-        /* Only the axis letter (x/y/z) itself is purple — the slash and
-         * size/hover-position after it dim the same way as any other dim's
-         * does, not tinted purple (a plain color on .dim-hover-idx wouldn't
-         * be enough to override an inherited -webkit-text-fill-color). */
-        #info .dim-axis-letter {
-            color: var(--spatial-dim);
-            -webkit-text-fill-color: var(--spatial-dim);
-        }
         #info .active-dim.dim-label .dim-slash,
         #info .active-dim.dim-label .dim-size {
             color: var(--text);
@@ -5938,15 +5958,39 @@
         // A single connection is not enough (it took three flickers down to
         // one, not zero) — the drops come in short runs, and connections opened
         // together absorb a run instead of queueing behind it.
+        let _clientPathWarmBatch = null;
+        let _clientPathWarmSuspended = false;
         function _warmClientPath(connections) {
-            if (!_isIntegratedBrowserViewer) return;
-            const count = Math.max(1, Math.min(6, Number(connections) || 3));
-            for (let i = 0; i < count; i++) {
-                // Distinct URLs so nothing is served from cache and each one is
-                // a real connection through the forward.
-                fetch(`ping?warm=${Date.now()}-${i}`, { cache: 'no-store' })
-                    .catch(() => {});
-            }
+            if (!_isIntegratedBrowserViewer || _clientPathWarmBatch
+                || _clientPathWarmSuspended) return;
+            // Chromium shares its HTTP connection budget across tabs on this
+            // origin. Unbounded background pings can occupy every slot and
+            // prevent even a new page's first request from being sent.
+            const count = Math.max(1, Math.min(3, Number(connections) || 3));
+            const controller = new AbortController();
+            const stopWarming = () => {
+                // The private proxy may retain upstream work after a browser
+                // abort. Do not add another burst to a route already known to
+                // be stuck. A newly loaded viewer can warm its working route.
+                _clientPathWarmSuspended = true;
+                controller.abort();
+            };
+            const timeout = setTimeout(stopWarming, 2000);
+            const requests = Array.from({ length: count }, (_, i) =>
+                fetch(`ping?warm=${Date.now()}-${i}`, {
+                    cache: 'no-store',
+                    signal: controller.signal,
+                }).then(response => {
+                    if (!response.ok) throw new Error('Connection check failed');
+                    // Keep the deadline until the body has arrived too: fetch
+                    // resolves at headers, while the connection can stay busy.
+                    return response.arrayBuffer();
+                }).catch(stopWarming)
+            );
+            _clientPathWarmBatch = Promise.allSettled(requests).finally(() => {
+                clearTimeout(timeout);
+                _clientPathWarmBatch = null;
+            });
         }
         // isInlineEmbed: true when explicitly launched as an inline Jupyter/notebook embed
         // (the Python launcher adds &inline=1 to the URL for inline IFrames).
@@ -6520,6 +6564,45 @@
         let _roiContextJustOpened = false;
         let _qvRoiDragView = null; // which qMRI view initiated current ROI drag
         let _mvRoiDragView = null; // which multiview pane initiated current ROI drag
+        // Hover-info quick-measure: while hover info is on, a plain left-drag
+        // always draws a disposable freehand outline (never pan, never the
+        // real ROI tool) instead. It never touches _rois[]/the ROI panel/export.
+        let _infoFreehandDragging = false; // true while the quick-measure drag is in progress
+        let _infoFreehandPts = [];         // points collected during that drag
+        let _infoFreehandView = null;      // which mv/qv pane initiated it (main mode: unused)
+        // Every finished quick-measure shape is APPENDED (not overwritten) to
+        // its own surface's list below, and a matching removal closure is
+        // pushed onto _infoQuickRoiStack — one global creation order across
+        // all 5 surfaces — so Backspace (see roi.deleteSelected) can always
+        // pop the single most-recently-drawn shape, whichever surface it's on.
+        let _infoQuickRois = [];           // normal-mode canvas: [{type:'freehand', points, _infoQuick:true, statsText}]
+        let _infoQuickRoisMv = [];         // multiview: [{..., mvDimX, mvDimY, statsText}]
+        let _infoQuickRoisQv = [];         // qMRI: [{..., qvStatsByPaneIdx:{[view.qmriIdx]:statsText}}] — shown on every pane, one stat per pane
+        // Compare mode: split panes each get their own list (indexed like
+        // compareCanvases/compareDisplaySids), plus one for the centre diff
+        // pane. Points are in that pane's own canvas-pixel space (cv.width/
+        // height), never in the cached slice's grid — see _infoQuickCompareStats.
+        let _infoQuickRoisCompare = [];    // _infoQuickRoisCompare[paneIdx] = [{points, _infoQuick:true, statsText}]
+        let _infoQuickRoisCompareDiff = []; // [{points, _infoQuick:true, statsText}] for the centre diff pane
+        let _infoQuickRoiStack = [];       // LIFO of {remove(){...}} closures, one per shape, across all 5 surfaces — Backspace pops this
+        function _infoQuickStatsText(stats) {
+            return stats ? `${_roiStatsFmt(stats.mean)} ± ${_roiStatsFmt(stats.std)}` : null;
+        }
+        function _clearInfoQuickRoi() {
+            _infoFreehandDragging = false;
+            _infoFreehandPts = [];
+            _infoFreehandView = null;
+            _infoQuickRois = [];
+            _infoQuickRoisMv = [];
+            _infoQuickRoisQv = [];
+            _infoQuickRoisCompare = [];
+            _infoQuickRoisCompareDiff = [];
+            _infoQuickRoiStack = [];
+            if (Array.isArray(compareCanvases)) compareCanvases.forEach(cv => cv && _infoHideCompareOverlay(cv));
+            const diffCvForClear = document.getElementById('compare-diff-canvas');
+            if (diffCvForClear) _infoHideCompareOverlay(diffCvForClear);
+            _redrawRoiOverlays();
+        }
         let _islandDragPos = null;  // {x, y} — remembered drag position, null = default left
         let toolMenuOpen = false;
         let _toolLauncherOpen = false;
@@ -7213,7 +7296,7 @@
         // info-cursor behavior is one rule, not one per mode. (qMRI multiview
         // panning has no crosshair-line overlay, so it is not part of this.)
         function _anyOrthoDragActive() {
-            return !!(mvDraggingView || cmvDraggingView);
+            return !!(mvDraggingView || cmvDraggingView || _qmriMvDragView);
         }
         function _reconcileOrthoCursorHidden() {
             document.body.classList.toggle('crosshair-cursor-hidden', _anyOrthoDragActive());
@@ -7484,6 +7567,11 @@
         let _cmvCrosshairAlpha = 0;    // current crosshair opacity for compare-mv
         let _cmvCrosshairTarget = 0;   // target opacity for compare-mv
         let _cmvCrosshairAnim = null;  // animation frame id for compare-mv crosshair fade
+        let _qmvCrosshairAlpha = 0;    // current crosshair opacity for qMRI multiview
+        let _qmvCrosshairTarget = 0;   // target opacity for qMRI multiview
+        let _qmvCrosshairAnim = null;  // animation frame id for qMRI-mv crosshair fade
+        let _qmvScrollHintTimer = null; // fade-out timer after scrolling a qMRI-mv pane
+        let _qmvScrollHintDir = -1;    // plane being scrolled (its own lines stay hidden)
         let compareMvSids = [];        // SIDs being compared in compare-mv mode
         let compareMvDims = [];        // [dimX, dimY, sliceDir×3] spatial dims used
         let qmriMvActive = false;      // qMRI + 3-plane multiview combined mode (sub-mode of qMRI)
@@ -8663,7 +8751,10 @@
 
         // const MAX_CANVAS_FIT_PX = 600;
         const NORMAL_SIDE_RESERVE = 80;
-        const NORMAL_BOTTOM_RESERVE = 48;
+        // Room under the image for the colorbar island and its tick row.
+        // Constant whether ticks are on or off, so cycling them never moves
+        // the image, dimbar or colorbar.
+        const NORMAL_BOTTOM_RESERVE = 62;
         const NORMAL_UI_RESERVE_FLOOR = 44;
         const MV_COLORBAR_BOTTOM_CLEARANCE = 42;
 
@@ -8829,10 +8920,12 @@
                 if (!_fullscreenActive) _normalFitZoom = userZoom;
                 _zoomRendered = userZoom;
             } else if (allowOverflowRecalc && !_zoomAdjustedByUser && !_fullscreenActive && !(_scrubDetached && _scrubState)) {
-                const projW = Math.round(w * baseScale * userZoom);
-                const projH = Math.round(h * baseScale * userZoom);
-                if (projW > maxW + 2 || projH > maxH + 2) {
-                    userZoom = Math.max(1.0, capScale / baseScale);
+                // Untouched zoom means "fit": follow the window both ways,
+                // so growing it after a shrink fills the space again rather
+                // than leaving the image (and the chrome hugging it) small.
+                const fit = Math.max(1.0, capScale / baseScale);
+                if (Math.abs(fit - userZoom) > 1e-6) {
+                    userZoom = fit;
                     _fitZoom = userZoom;
                     _normalFitZoom = userZoom;
                     _zoomRendered = userZoom;
@@ -10995,8 +11088,10 @@
                 const labelFmt = primaryCb && primaryCb._dragLabelFormatter
                     ? primaryCb._dragLabelFormatter
                     : formatValueGroup(labelValues);
-                slimVmin.innerHTML = _cbFmt(displayValues[0], labelValues, labelFmt);
-                slimVmax.innerHTML = _cbFmt(displayValues[1], labelValues, labelFmt);
+                // _signPad reserves the sign's width so crossing zero doesn't
+                // shift the centred digits — see the comment on _signPad.
+                slimVmin.innerHTML = _signPad(_cbFmt(displayValues[0], labelValues, labelFmt));
+                slimVmax.innerHTML = _signPad(_cbFmt(displayValues[1], labelValues, labelFmt));
                 const vminIsLocked = _cbBoundLocked(primaryCb, 'vmin');
                 const vmaxIsLocked = _cbBoundLocked(primaryCb, 'vmax');
                 slimVmin.classList.toggle('is-locked', vminIsLocked);
@@ -11027,6 +11122,31 @@
         const CB_LABEL_H     = 0;   // no label zone — dmin/dmax shown as DOM elements
         let _cbExpandedH  = 18;  // histogram fits within colorbar height (no vertical expansion)
         const _cbAnimDuration = 350; // animation duration in ms (shared with ColorBar class)
+
+        // ── Colorbar tick marks ──────────────────────────────────────────────
+        // Values under the collapsed strip between the flanking vmin/vmax
+        // labels (which share the row's face and size): the window split
+        // into equal steps, at growing density. Equal steps (rather than
+        // round values) keep the spacing even and never crowd the ends.
+        // Level 0 shows only the flanking labels. Cycled with `w`; every
+        // horizontal ColorBar reads it.
+        const CB_TICK_TARGETS = [0, 4, 8];      // steps between vmin and vmax per level
+        const CB_TICK_LABELS  = ['off', 'few', 'many'];
+        const CB_TICK_ROW_H   = 15;          // marker + value row under the strip, CSS px (matches .cb-ticks)
+        let _cbTickLevel = 0;
+        /** vmin..vmax in `steps` equal steps, ends included. */
+        function _cbEvenTicks(lo, hi, steps) {
+            if (!Number.isFinite(lo) || !Number.isFinite(hi) || !(hi > lo) || !(steps > 0)) return [];
+            const ticks = [];
+            for (let k = 0; k <= steps; k++) ticks.push(k === steps ? hi : lo + (hi - lo) * k / steps);
+            return ticks;
+        }
+        function _cycleCbTickLevel() {
+            _cbTickLevel = (_cbTickLevel + 1) % CB_TICK_TARGETS.length;
+            ColorBar.redrawAll();
+            showStatus('colorbar ticks: ' + CB_TICK_LABELS[_cbTickLevel]);
+            saveState();
+        }
         // Legacy animation globals removed (Task 4) — primaryCb owns all animation state
         let _kdeSmooth = null;      // smoothed histogram values (Float64Array, NPTS entries)
         const _KDE_NPTS = 300;      // resolution of the smooth curve
@@ -11134,8 +11254,19 @@
             return { vminFrac, vmaxFrac };
         }
         class ColorBar {
+            // Every live instance, so a global display change (tick level)
+            // can repaint all bars without each mode wiring its own hook.
+            static _live = new Set();
+            static redrawAll() {
+                for (const cb of ColorBar._live) {
+                    if (!cb.canvas || !cb.canvas.isConnected || cb.canvas.clientWidth === 0) continue;
+                    try { cb.draw(); } catch (e) { /* a bar mid-teardown must not block the rest */ }
+                }
+            }
+
             constructor(opts) {
                 this.opts = opts;
+                ColorBar._live.add(this);
                 this.orientation = opts.orientation || 'horizontal';
                 this.interactive = opts.interactive !== false;
                 this.id = opts.id || ('cb-' + Math.random().toString(36).slice(2, 8));
@@ -11587,6 +11718,169 @@
                 ctx.restore();
             }
 
+            /**
+             * Tick marks for the collapsed strip. Notches sit on the bar's
+             * bottom edge; the values go in a small row hanging under the
+             * bar (`.cb-ticks`), like an axis, so the strip itself stays
+             * clean. When that row would run off the bottom of the window
+             * the values are drawn inside the strip instead. The strip
+             * spans the current window, so ticks are placed against
+             * getWindow(). They fade out as the histogram expands — the
+             * expanded view has its own handle labels and the strip then
+             * spans the data range.
+             */
+            _ensureTickRow() {
+                if (this._tickRow || !this.colWrap) return this._tickRow;
+                const row = document.createElement('div');
+                row.className = 'cb-ticks';
+                this.colWrap.appendChild(row);
+                this._tickRow = row;
+                this._tickRowKey = '';
+                return row;
+            }
+            _setTickRow(labels, cssW, alpha) {
+                const row = this._tickRow;
+                if (!row) return;
+                const key = labels ? cssW + '|' + labels.map(l => l.x + ':' + l.text).join(',') : '';
+                if (key !== this._tickRowKey) {
+                    this._tickRowKey = key;
+                    row.textContent = '';
+                    for (const l of labels || []) {
+                        const span = document.createElement('span');
+                        span.textContent = l.text;
+                        span.style.left = (l.x / cssW * 100) + '%';
+                        row.appendChild(span);
+                    }
+                }
+                const on = !!(labels && labels.length);
+                row.style.opacity = on ? String(alpha) : '0';
+                if (this.wrap) this.wrap.classList.toggle('cb-has-ticks', on);
+            }
+            _tickRowClipped() {
+                if (!this.colWrap) return true;
+                // Walk offsetTop rather than reading the client rect: the
+                // island flies in / fades via transforms, and a rect taken
+                // mid-flight would report the bar lower than it will rest.
+                let bottom = this.colWrap.offsetHeight;
+                for (let el = this.colWrap; el; el = el.offsetParent) bottom += el.offsetTop;
+                return bottom + CB_TICK_ROW_H > window.innerHeight;
+            }
+            _drawTicks(ctx, cssW, cssH, aT) {
+                const row = this._ensureTickRow();
+                // `w` pins the tick row permanently visible at the level it
+                // cycles to (_cbTickLevel > 0); hovering always gives a peek
+                // even while off, at the 'few' density as a default (there's
+                // no pinned density to fall back on at level 0). Layout
+                // space (cb-has-ticks padding-bottom) is reserved whenever
+                // ticks are actually showing either way, so pinned viewing
+                // never jumps; a hover-only peek at level 0 does reserve it
+                // right as hovering starts, which reads as part of the peek
+                // rather than an unrelated layout shift.
+                //
+                // Hover-info mode (_pixelInfoVisible, `i`) peeks the ticks
+                // too, on every colorbar at once, not just the one under the
+                // cursor — once you're reading out values via hover-info,
+                // the ticks are a hint for the whole bar, not just wherever
+                // the mouse happens to be.
+                const pinned = _cbTickLevel > 0;
+                const peeking = this._mouseOver || _pixelInfoVisible;
+                const activeLevel = pinned ? _cbTickLevel : 1;
+                const expandAlpha = 1 - Math.min(1, aT / 0.4);
+                const tickAlpha = (pinned || peeking) ? expandAlpha : 0;
+                let ticks = [];
+                let wLo = null, wHi = null;
+                let fmt = null;
+                const inside = !row || this._tickRowClipped();
+                const showText = !inside || cssH >= 14;
+                if ((pinned || peeking) && this.opts.getWindow && expandAlpha > 0 && cssW >= 60) {
+                    const win = this.opts.getWindow();
+                    wLo = win ? win.vmin : null; wHi = win ? win.vmax : null;
+                    ctx.save();
+                    ctx.font = '9px monospace';
+                    // Halve the step count until every label has room, so a
+                    // narrow bar thins the ruler evenly instead of dropping
+                    // values here and there.
+                    for (let steps = CB_TICK_TARGETS[activeLevel]; steps >= 2; steps = Math.floor(steps / 2)) {
+                        const all = _cbEvenTicks(wLo, wHi, steps);
+                        if (!all.length) break;
+                        // Precision chosen with the ends in the group, so the
+                        // row matches the flanking labels' scale.
+                        fmt = formatValueGroup(all);
+                        ticks = all.slice(1, -1);
+                        const widest = Math.max(...ticks.map(v => ctx.measureText(_signPad(fmt.format(v))).width));
+                        const room = inside ? cssW - widest : cssW;
+                        // Same clearance the per-label overlap check below
+                        // demands (2px side pad each + 4px gap).
+                        if (!showText || (widest + 8) * steps <= room) break;
+                        ticks = [];
+                    }
+                    ctx.restore();
+                }
+                if (!ticks.length) { this._setTickRow(null, cssW, 0); return; }
+                // Row mode keeps the strip clean: the markers live in the row
+                // (see .cb-ticks span::before). Only the inside fallback (no
+                // room for a row) draws notches on the strip itself.
+                const notchH = Math.max(2, Math.min(4, Math.round(cssH / 5)));
+                ctx.save();
+                ctx.globalAlpha = tickAlpha;
+                ctx.font = '9px monospace';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.lineJoin = 'round';
+                ctx.lineWidth = 2.5;
+                const themeStyle = getComputedStyle(document.documentElement);
+                const ink = themeStyle.getPropertyValue('--text').trim() || themeStyle.color;
+                const halo = themeStyle.getPropertyValue('--surface').trim() || themeStyle.backgroundColor;
+                ctx.fillStyle = ink;
+                ctx.strokeStyle = halo;
+                const drawn = [];
+                const rowLabels = [];
+                ticks.forEach((v) => {
+                    const f = (v - wLo) / (wHi - wLo);
+                    const x = Math.round(f * cssW);
+                    // Reserve the sign's width (see _signPad) so a tick
+                    // crossing zero mid-drag doesn't shift its own centred
+                    // text — a non-breaking figure space in place of an
+                    // absent '-' has the same monospace advance width and,
+                    // unlike a plain space, survives DOM whitespace
+                    // collapsing when this ends up in a <span> below.
+                    const text = _signPad(fmt.format(v));
+                    const tw = ctx.measureText(text).width;
+                    const left = x - tw / 2 - 2;
+                    const right = x + tw / 2 + 2;
+                    if (showText) {
+                        // The row may overhang the strip a little; inside it may not.
+                        const slack = inside ? 0 : tw / 2;
+                        if (left < 1 - slack || right > cssW - 1 + slack) return;
+                        if (drawn.some(d => left < d.right + 4 && right > d.left - 4)) return;
+                    }
+                    if (inside) {
+                        // Notches get the same halo as the values, so they
+                        // still read where the colormap matches the ink.
+                        const nx = x;
+                        for (const y of [0, cssH - notchH]) {
+                            ctx.fillStyle = halo;
+                            ctx.fillRect(nx - 1, y - 1, 3, notchH + 2);
+                            ctx.fillStyle = ink;
+                            ctx.fillRect(nx, y, 1, notchH);
+                        }
+                    }
+                    if (showText) {
+                        if (inside) {
+                            // A stable theme halo keeps values legible without
+                            // making each tick react to the colormap beneath it.
+                            ctx.strokeText(text, x, cssH / 2 + 0.5);
+                            ctx.fillText(text, x, cssH / 2 + 0.5);
+                        } else {
+                            rowLabels.push({ x, text });
+                        }
+                        drawn.push({ left, right });
+                    }
+                });
+                ctx.restore();
+                this._setTickRow(inside ? null : rowLabels, cssW, tickAlpha);
+            }
+
             /**
              * Core morph renderer — draws the colorbar/histogram as one shape.
              * Adapted from the global _cbMorphDraw function.
@@ -11716,6 +12010,7 @@
                     ctx.fillRect(px, y, 1, colH);
                 }
 
+                this._drawTicks(ctx, cssW, cssH, aT);
 
                 // Solid handle lines + value labels in the label zone
                 if (aT > 0.1) {
@@ -11769,21 +12064,25 @@
                         ctx.font = '9px monospace';
                         const charW = ctx.measureText('0').width;
                         const labelY = labelH - 3;
+                        // _signPad reserves the sign's width so a label
+                        // crossing zero doesn't shift position — matters most
+                        // for the 'center'-aligned ones below, where the text
+                        // itself (not just a box around it) is centred.
                         const labels = [];
-                        labels.push({ x: 1, text: _cbFmtPlain(dmin, groupValues, labelFormatter), align: 'start', color: dimColor, prio: 0 });
-                        labels.push({ x: cssW - 1, text: _cbFmtPlain(dmax, groupValues, labelFormatter), align: 'end', color: dimColor, prio: 0 });
+                        labels.push({ x: 1, text: _signPad(_cbFmtPlain(dmin, groupValues, labelFormatter)), align: 'start', color: dimColor, prio: 0 });
+                        labels.push({ x: cssW - 1, text: _signPad(_cbFmtPlain(dmax, groupValues, labelFormatter)), align: 'end', color: dimColor, prio: 0 });
                         if (effVmin > 0.01 && effVmin < 0.99) {
                             const vx = Math.round(effVmin * cssW);
-                            labels.push({ x: vx, text: _cbFmtPlain(wVmin, groupValues, labelFormatter), align: 'center', color: brightColor, prio: 1 });
+                            labels.push({ x: vx, text: _signPad(_cbFmtPlain(wVmin, groupValues, labelFormatter)), align: 'center', color: brightColor, prio: 1 });
                         }
                         if (effVmax > 0.01 && effVmax < 0.99) {
                             const vx = Math.round(effVmax * cssW);
-                            labels.push({ x: vx, text: _cbFmtPlain(wVmax, groupValues, labelFormatter), align: 'center', color: brightColor, prio: 1 });
+                            labels.push({ x: vx, text: _signPad(_cbFmtPlain(wVmax, groupValues, labelFormatter)), align: 'center', color: brightColor, prio: 1 });
                         }
                         if (this._hoverFrac >= 0 && this._hoverFrac <= 1) {
                             const hoverVal = dmin + this._hoverFrac * (dmax - dmin);
                             const hx = Math.round(this._hoverFrac * cssW);
-                            labels.push({ x: hx, text: _cbFmtPlain(hoverVal, groupValues, labelFormatter), align: 'center', color: hoverColor, prio: 2 });
+                            labels.push({ x: hx, text: _signPad(_cbFmtPlain(hoverVal, groupValues, labelFormatter)), align: 'center', color: hoverColor, prio: 2 });
                         }
                         labels.sort((a, b) => b.prio - a.prio);
                         const drawn = [];
@@ -11830,6 +12129,9 @@
 
             /** Remove the island from the DOM and clean up timers. */
             destroy() {
+                ColorBar._live.delete(this);
+                if (this._tickRow && this._tickRow.parentNode) this._tickRow.parentNode.removeChild(this._tickRow);
+                this._tickRow = null;
                 if (this._hoverTimer) clearTimeout(this._hoverTimer);
                 if (this._autoDismissTimer) clearTimeout(this._autoDismissTimer);
                 this._detachEvents();
@@ -11879,9 +12181,11 @@
                 const labelFormatter = this._dragLabelFormatter || formatValueGroup(targetLabelValues);
                 const formatLabel = this.opts.formatLabel;
                 const defaultLabel = (value) => _cbFmt(value, targetLabelValues, labelFormatter);
+                // _signPad reserves the sign's width so crossing zero
+                // doesn't shift the (centred) digits — see its comment.
                 const labelHtml = (value, which) => {
                     const custom = formatLabel ? formatLabel(value, which) : null;
-                    return custom ?? defaultLabel(value);
+                    return _signPad(custom ?? defaultLabel(value));
                 };
                 if (this.vminLabel) {
                     this.vminLabel.innerHTML = labelHtml(this._labelVmin, 'vmin');
@@ -12216,6 +12520,9 @@
                     this._mouseOver = true;
                     if (this._onBinHover) this.ensureHistogramData();
                     if (this.opts.onMouseEnter) this.opts.onMouseEnter();
+                    // Fade the tick row in immediately (see _drawTicks)
+                    // instead of waiting for some unrelated redraw.
+                    this.draw();
                 });
                 this.wrap.addEventListener('mouseleave', () => {
                     this._mouseOver = false;
@@ -12226,6 +12533,11 @@
                         if (this.opts.hoverValueInEggs) _setEggsValuePill(null);
                         else if (this.tooltip) this.tooltip.style.display = 'none';
                         if (this._onBinHover) this._onBinHover(-1, -1);
+                    } else {
+                        // Fade the tick row back out (see _drawTicks) even
+                        // on a leave with no prior hoverFrac update (e.g. a
+                        // mouseenter/leave with no movement in between).
+                        this.draw();
                     }
                     if (this._autoDismissPending && !this._dragActive) {
                         this._autoDismissPending = false;
@@ -14501,9 +14813,17 @@
             else if (_dmenuDiffTargetActive()) _dmenuSetRangeTarget('primary');
             if (which === 'vmin') {
                 if (_cbBoundPolicyLocked(cb, which)) return;
-                vminLocked = !vminLocked;
-                if (vminLocked) _dmenuCaptureBoundLock('vmin');
-                else _dmenuZeroFloorVminUnlocked = true;
+                // Toggle what the label shows, not the bare flag: a zero
+                // floor already reads as locked, so the first toggle there
+                // must release it (as the range menu row does) rather than
+                // engage a second, invisible lock underneath.
+                if (!vminLocked && _dmenuZeroFloorLocksVmin()) {
+                    _dmenuZeroFloorVminUnlocked = true;
+                } else {
+                    vminLocked = !vminLocked;
+                    if (vminLocked) _dmenuCaptureBoundLock('vmin');
+                    else _dmenuZeroFloorVminUnlocked = true;
+                }
             } else {
                 vmaxLocked = !vmaxLocked;
                 if (vmaxLocked) _dmenuCaptureBoundLock('vmax');
@@ -17260,6 +17580,7 @@
             rectRoiMode = true;
             if (!['circle', 'rect', 'freehand', 'floodfill'].includes(_roiShape)) _roiShape = 'circle';
             _roiVisible = true;
+            _clearInfoQuickRoi(); // switching to the real ROI tool drops the quick-measure outline
             hideAllPixelInfo();
             _resetDimbarHover();
             canvas.style.cursor = 'crosshair';
@@ -17820,6 +18141,58 @@
             }
         }
 
+        /** Ad-hoc mean/std for the hover-info quick-measure outline — same
+         *  /roi_stats/{sid} endpoint and payload shape as the real ROI tool
+         *  (_roiFetchStructuredStats above), but the shape never lives in
+         *  _rois[] so nothing is added to the ROI panel/export. Used for
+         *  normal mode and multiview (which also reuses _roiFetchStructuredStats
+         *  for its own real ROIs, so this inherits the same per-pane accuracy). */
+        async function _infoQuickFetchStats(points) {
+            try {
+                const resp = await proxyFetch(`/roi_stats/${sid}`, {
+                    method: 'POST',
+                    headers: {'Content-Type':'application/json'},
+                    body: JSON.stringify({
+                        dim_x, dim_y,
+                        indices: indices.slice(),
+                        complex_mode: complexMode,
+                        rois: _roiPayload([{ type: 'freehand', points }], { currentIndices: true }),
+                    }),
+                });
+                const data = await resp.json();
+                const result = data.results && data.results[0];
+                return result ? result.stats : null;
+            } catch (err) {
+                return null;
+            }
+        }
+
+        /** qMRI variant: each pane is a different quantitative map, so stats
+         *  are fetched per-view (mirrors _fetchQvRoiStats) and stashed on
+         *  `entry.qvStatsByPaneIdx[view.qmriIdx]` — the one shape is shared
+         *  across every qMRI pane (they show the same slice), but each pane
+         *  can independently show a different mean±std for it, same as
+         *  today's single-shape case just keyed per entry now that several
+         *  shapes can coexist. Drawn by _drawAllQvRois, not shown in a fixed
+         *  pill anymore. */
+        function _infoQuickFetchQvStats(entry) {
+            if (!qmriActive) return;
+            const roundedPts = entry.points.map(p => [Math.round(p[0]), Math.round(p[1])]);
+            qmriViews.forEach(v => {
+                const qIndices = [...indices];
+                qIndices[qmriDim] = v.qmriIdx;
+                proxyFetch(`/roi_freehand/${sid}?dim_x=${dim_x}&dim_y=${dim_y}&indices=${qIndices.join(',')}&complex_mode=${complexMode}`, {
+                    method: 'POST',
+                    headers: {'Content-Type':'application/json'},
+                    body: JSON.stringify({ points: roundedPts }),
+                }).then(r => r.json()).then(d => {
+                    if (d.error || !_infoQuickRoisQv.includes(entry)) return;
+                    entry.qvStatsByPaneIdx[v.qmriIdx] = _infoQuickStatsText(d);
+                    _drawAllQvRois();
+                }).catch(() => {});
+            });
+        }
+
         let _roiStatsRefreshTimer = null;
         function _scheduleRoiStatsRefresh(navDim = null) {
             if (!rectRoiMode || !_rois.length) return;
@@ -21256,9 +21629,18 @@
         }
         const _pixelFmt = (v, contextValues = null) => formatScalarValue(v, { contextValues, maxDecimals: 7, minDecimals: 3 });
         function _activeNumericContext(view = null) {
-            const vals = view && view.displayState
-                ? [view.displayState.vmin, view.displayState.vmax]
-                : [manualVmin ?? currentVmin, manualVmax ?? currentVmax];
+            // A pane's own window, falling back to its auto range — the
+            // legacy qMRI / multi-view objects carry vmin/vmax (+ locked*)
+            // directly, the View class carries a displayState; either way
+            // the main array's range is only right for the main canvas.
+            let vals;
+            if (view && view.displayState) {
+                vals = [view.displayState.vmin ?? view.vmin, view.displayState.vmax ?? view.vmax];
+            } else if (view && ('vmin' in view || 'lockedVmin' in view)) {
+                vals = [view.lockedVmin ?? view.vmin, view.lockedVmax ?? view.vmax];
+            } else {
+                vals = [manualVmin ?? currentVmin, manualVmax ?? currentVmax];
+            }
             return vals.filter(Number.isFinite);
         }
         /** Format a hovered pixel value with decimals fixed by the numeric
@@ -21642,6 +22024,7 @@
                 colormap_idx,
                 indices: [...indices],
                 logScale,
+                cbTickLevel: _cbTickLevel,
                 projectionMode,
                 projectionDim,
                 complexMode,
@@ -21712,6 +22095,7 @@
                 });
             }
             logScale = s.logScale ?? false;
+            _cbTickLevel = Number.isInteger(s.cbTickLevel) && s.cbTickLevel >= 0 ? Math.min(s.cbTickLevel, CB_TICK_TARGETS.length - 1) : 0;
             projectionMode = Number.isInteger(s.projectionMode) && s.projectionMode >= 0 && s.projectionMode < PROJECTION_LABELS.length + 1 ? s.projectionMode : 0;
             projectionDim = Number.isInteger(s.projectionDim) && s.projectionDim >= 0 && s.projectionDim < shape.length ? s.projectionDim : (projectionMode > 0 ? current_slice_dim : -1);
             if (_isCollectionDim(projectionDim)) {
@@ -22969,6 +23353,26 @@
                 if (inner) inner.style.transform = (x || y) ? `translate(${x}px,${y}px)` : '';
             },
         });
+        const qvPan = new PanManager({
+            getViewport: () => {
+                const clip = qmriViews[0]?.canvas?.closest('.qv-canvas-clip');
+                return clip ? { w: clip.offsetWidth, h: clip.offsetHeight } : { w: 0, h: 0 };
+            },
+            getContent: () => {
+                const cvs = qmriViews[0]?.canvas;
+                return cvs ? {
+                    w: parseInt(cvs.style.width) || cvs.width,
+                    h: parseInt(cvs.style.height) || cvs.height,
+                } : { w: 0, h: 0 };
+            },
+            apply: (x, y) => {
+                const transform = (x || y) ? `translate(${x}px,${y}px)` : '';
+                qmriViews.forEach(v => {
+                    v.canvas.style.transform = transform;
+                    if (v.roiOverlay) v.roiOverlay.style.transform = transform;
+                });
+            },
+        });
         const mosaicPan = new PanManager({
             getViewport: () => {
                 const wrap = document.getElementById('qmri-view-wrap');
@@ -23682,7 +24086,9 @@
             }
             // Left-click pan when zoomed in and not in ROI mode.
             // In mosaic mode (dim_z >= 0) defer to loupe even if canvas overflows.
-            if (!rectRoiMode && mainPan.overflows && dim_z < 0) {
+            // Hover-info mode claims plain left-drag for the quick-measure
+            // outline instead (see below), so it must not pan even when zoomed.
+            if (!rectRoiMode && !_pixelInfoVisible && mainPan.overflows && dim_z < 0) {
                 mainPan.startDrag(e);
                 canvas.style.cursor = 'grabbing';
                 return;
@@ -23710,6 +24116,14 @@
             // Hold left mouse button to activate pixel info readout
             if (!rectRoiMode && e.button === 0 && !e.shiftKey && !e.metaKey && !e.altKey
                 && !_cropActive && !_segMode && !_rulerMode) {
+                // Hover-info quick-measure: a plain click-drag while hover info
+                // is on always draws a disposable freehand outline — never pan,
+                // never the real ROI tool, regardless of _roiShape/zoom state.
+                if (_pixelInfoVisible && dim_z < 0 && !e.ctrlKey) {
+                    _infoFreehandDragging = true;
+                    _infoFreehandView = null; // this drag belongs to the main canvas, not an mv/qv pane
+                    _infoFreehandPts = [[roiStart.x, roiStart.y]];
+                }
                 if (!_pixelInfoVisible && _bcCanDrag()) {
                     const pending = _bcPendingDrag = { startX: e.clientX, startY: e.clientY, targetView: null, targetCb: null };
                     // A press held still (never crossing the deadzone) still
@@ -24417,44 +24831,285 @@
             }
             return null;
         }
+        // Neutral color for the hover-info quick-measure outline — distinct
+        // from the numbered _roiColors palette so it never reads as a saved ROI.
+        const _INFO_QUICK_ROI_COLOR = { fill: 'rgba(255,255,255,0.05)', stroke: 'rgba(255,255,255,0.88)' };
+        /** Bounding-box anchor (center-x, top-y, bottom-y) for
+         *  _infoQuickDrawPill, in the same already-scaled display space
+         *  _roiLabelPoint/_roiDrawLabel use for real ROI labels. Built on
+         *  _roiBounds, the same helper every real ROI's handles/label point
+         *  already use, so a quick-measure shape's pill sits itself the same
+         *  way a real ROI already sizes its own label. */
+        function _infoQuickPillAnchor(r, sx, sy) {
+            const b = _roiBounds(r);
+            return { cx: ((b.x0 + b.x1) / 2) * sx, y0: b.y0 * sy, y1: b.y1 * sy };
+        }
+        /** Small pill-shaped chip (rounded-rect background + centered text)
+         *  showing a hover-info quick-measure shape's own mean±std reading,
+         *  drawn directly above that shape's own bounding box (or, if that
+         *  would clip off the top of this canvas, below it instead) — unlike
+         *  _roiDrawLabel (a real ROI's numbered label), which has no
+         *  background and isn't anchored to a specific shape's extent. One
+         *  shared helper so all 5 surfaces (normal/mv/qv/compare split/
+         *  compare diff) render this identically rather than duplicating
+         *  rounded-rect drawing code five times.
+         *  ctx: canvas 2d context to draw on. text: the pill's label, or a
+         *  falsy value to skip drawing (stats not back yet from the async
+         *  fetch/raster). cx, y0, y1: the shape's bounding box — horizontal
+         *  center and vertical extent — already scaled to this canvas's own
+         *  display space (see _infoQuickPillAnchor). Matches the CSS of the
+         *  actual hovered-value pill (.eggs-value-pill, ~line 2072) as
+         *  closely as a canvas shape can — same background/border colors,
+         *  corner radius, padding, font — so this reads as the same pill
+         *  rather than a separate ROI-tool-styled chip of its own. */
+        function _infoQuickDrawPill(ctx, text, cx, y0, y1) {
+            if (!text) return;
+            const light = document.documentElement.classList.contains('light');
+            const bg = light ? 'rgba(240,240,240,0.8)' : 'rgba(30,30,30,0.75)';
+            const border = 'rgba(255,255,255,0.08)';
+            const valueColor = getComputedStyle(document.documentElement).getPropertyValue('--active-dim').trim()
+                || _INFO_QUICK_ROI_COLOR.stroke;
+            const GAP = 5, PAD_X = 7, H = 18, RAD = 4;
+            ctx.save();
+            ctx.font = '11px "SF Mono", ui-monospace, "Cascadia Code", "JetBrains Mono", monospace';
+            const w = ctx.measureText(text).width + PAD_X * 2;
+            // Anchor above the shape by default; flip to sit below it instead
+            // if drawing above would clip off the top of the canvas (y < 0).
+            let top = y0 - GAP - H;
+            if (top < 0) top = y1 + GAP;
+            const left = cx - w / 2;
+            ctx.beginPath();
+            ctx.moveTo(left + RAD, top);
+            ctx.arcTo(left + w, top, left + w, top + H, RAD);
+            ctx.arcTo(left + w, top + H, left, top + H, RAD);
+            ctx.arcTo(left, top + H, left, top, RAD);
+            ctx.arcTo(left, top, left + w, top, RAD);
+            ctx.closePath();
+            ctx.fillStyle = bg;
+            ctx.fill();
+            ctx.strokeStyle = border;
+            ctx.lineWidth = 1;
+            ctx.stroke();
+            ctx.fillStyle = valueColor;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(text, cx, top + H / 2 + 0.5);
+            ctx.restore();
+        }
+
+        // ── Hover-info quick-measure overlays for compare mode ──────────────
+        // Compare panes have no shared ROI-overlay canvas to draw on (unlike
+        // normal/mv/qv, which all reuse _drawAllRois/_drawAllMvRois/_drawAllQvRois
+        // against roiOverlayCanvas-style surfaces). Instead, mirror the crop
+        // tool's per-pane overlay pattern (_cropGetCompareOverlay /
+        // _cropRenderCompareOverlay / _cropHideCompareOverlay): one lazily
+        // created absolutely-positioned canvas per pane, cached on the pane's
+        // own canvas element, sized to match it in CSS pixels (no dpr scaling,
+        // same as the crop overlay).
+        function _infoGetCompareOverlay(cv) {
+            if (!cv) return null;
+            if (cv._infoOverlay) return cv._infoOverlay;
+            const parent = cv.parentElement; // .compare-canvas-inner
+            if (!parent) return null;
+            const ov = document.createElement('canvas');
+            ov.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;background:transparent;display:none;z-index:2;';
+            parent.appendChild(ov);
+            cv._infoOverlay = ov;
+            return ov;
+        }
+        function _infoHideCompareOverlay(cv) {
+            if (!cv || !cv._infoOverlay) return;
+            const ov = cv._infoOverlay;
+            const ctx2 = ov.getContext('2d');
+            if (ctx2) ctx2.clearRect(0, 0, ov.width, ov.height);
+            ov.style.display = 'none';
+        }
+        /** Draw (or hide) every committed quick-measure outline for one
+         *  compare pane, plus an optional still-being-dragged preview shape.
+         *  `roiObjs` is an array of {type:'freehand', points, statsText}
+         *  shapes whose points are in `cv`'s own canvas-pixel space
+         *  (cv.width/height) — reuses _roiDrawVisibleShape so the
+         *  stroke/fill treatment matches the outline drawn everywhere else
+         *  this feature appears, and _infoQuickDrawPill for each shape's own
+         *  mean±std pill (the in-progress `previewObj` has no stats yet, so
+         *  it never gets one). */
+        function _infoRenderCompareOverlay(cv, roiObjs, previewObj) {
+            const ov = _infoGetCompareOverlay(cv);
+            if (!ov) return;
+            const imgW = cv.width, imgH = cv.height;
+            const list = (roiObjs || []).filter(r => r && r.points && r.points.length >= 3);
+            const hasPreview = !!(previewObj && previewObj.points && previewObj.points.length >= 3);
+            if ((!list.length && !hasPreview) || !imgW || !imgH) {
+                _infoHideCompareOverlay(cv);
+                return;
+            }
+            const dispW = parseInt(cv.style.width) || imgW;
+            const dispH = parseInt(cv.style.height) || imgH;
+            ov.style.width = cv.style.width || `${dispW}px`;
+            ov.style.height = cv.style.height || `${dispH}px`;
+            if (ov.width !== dispW || ov.height !== dispH) { ov.width = dispW; ov.height = dispH; }
+            const ctx2 = ov.getContext('2d');
+            if (!ctx2) { _infoHideCompareOverlay(cv); return; }
+            ctx2.clearRect(0, 0, dispW, dispH);
+            const sx = dispW / imgW, sy = dispH / imgH;
+            for (const r of list) {
+                _roiDrawVisibleShape(ctx2, r, sx, sy, _INFO_QUICK_ROI_COLOR, false);
+                const a = _infoQuickPillAnchor(r, sx, sy);
+                _infoQuickDrawPill(ctx2, r.statsText, a.cx, a.y0, a.y1);
+            }
+            if (hasPreview) {
+                _roiDrawVisibleShape(ctx2, previewObj, sx, sy, _INFO_QUICK_ROI_COLOR, false);
+            }
+            ov.style.display = '';
+        }
+        /**
+         * Client-side mean/std of `valueAt(gx,gy)` over grid cells (integer
+         * pixel centers) whose center falls inside polygon `scaledPts` — both
+         * in the same 0..w,0..h grid space. Compare mode never calls the ROI
+         * backend for hover (see _getCachedHoverSlice), so the quick-measure
+         * aggregation for compare panes/the diff pane is done entirely here,
+         * unlike _infoQuickFetchStats/_infoQuickFetchQvStats which POST to
+         * /roi_stats / /roi_freehand for normal/mv/qMRI. Reuses _pointInRoi
+         * (same ray-casting it already does for real freehand ROIs) rather
+         * than duplicating point-in-polygon math.
+         */
+        function _infoQuickRasterStats(w, h, scaledPts, valueAt) {
+            if (!scaledPts || scaledPts.length < 3) return null;
+            let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+            for (const [x, y] of scaledPts) {
+                if (x < minX) minX = x; if (x > maxX) maxX = x;
+                if (y < minY) minY = y; if (y > maxY) maxY = y;
+            }
+            minX = Math.max(0, Math.floor(minX)); maxX = Math.min(w - 1, Math.ceil(maxX));
+            minY = Math.max(0, Math.floor(minY)); maxY = Math.min(h - 1, Math.ceil(maxY));
+            if (minX > maxX || minY > maxY) return null;
+            const roi = { type: 'freehand', points: scaledPts };
+            let n = 0, sum = 0, sumSq = 0;
+            for (let gy = minY; gy <= maxY; gy++) {
+                for (let gx = minX; gx <= maxX; gx++) {
+                    if (!_pointInRoi(roi, gx + 0.5, gy + 0.5, null, null)) continue;
+                    const v = valueAt(gx, gy);
+                    if (!Number.isFinite(v)) continue;
+                    n++; sum += v; sumSq += v * v;
+                }
+            }
+            if (!n) return null;
+            const mean = sum / n;
+            return { mean, std: Math.sqrt(Math.max(0, sumSq / n - mean * mean)) };
+        }
+        /** Split-pane quick-measure stats: rasterize `entry.points` (cv pixel
+         *  space) over pane `i`'s own cached hover slice, stash the result on
+         *  `entry.statsText`, and redraw so that entry's own pill picks it
+         *  up (see _infoRenderCompareOverlay) — the fixed pane pill is no
+         *  longer used for this, since each shape now carries its own number. */
+        function _infoQuickComparePaneStats(i, entry) {
+            const cv = compareCanvases[i];
+            const cvSid = compareDisplaySids[i];
+            if (!cv || !cvSid || !cv.width || !cv.height) return;
+            const cached = _getCachedHoverSlice(cvSid, dim_x, dim_y, _comparePaneHoverIndices(i));
+            if (!cached || !cached.w || !cached.h) return;
+            const scaledPts = entry.points.map(p => [p[0] * cached.w / cv.width, p[1] * cached.h / cv.height]);
+            const stats = _infoQuickRasterStats(cached.w, cached.h, scaledPts, (gx, gy) => {
+                const rawX = flip_x ? cached.w - 1 - gx : gx;
+                const rawY = flip_y ? cached.h - 1 - gy : gy;
+                return cached.slice[rawY * cached.w + rawX];
+            });
+            entry.statsText = _infoQuickStatsText(stats);
+            const arr = _infoQuickRoisCompare[i];
+            if (arr && arr.includes(entry)) _infoRenderCompareOverlay(cv, arr);
+        }
+        /** Centre diff-pane quick-measure stats: same per-pixel combine
+         *  _compareCenterSample uses (diffMode 1/2/3), applied to every pixel
+         *  inside the outline instead of a single hover point. No-op for
+         *  diffMode 0 (overlay/wipe/flicker/checker) — there's no per-pixel
+         *  value concept for those today and this deliberately doesn't add one.
+         *  Stashes the result on `entry.statsText` and redraws so that
+         *  entry's own pill picks it up, same as _infoQuickComparePaneStats. */
+        function _infoQuickCompareDiffStats(entry) {
+            const cv = document.getElementById('compare-diff-canvas');
+            if (!cv || diffMode <= 0 || compareDisplaySids.length < 2) return;
+            if (!cv.width || !cv.height) return;
+            const [sidA, sidB] = compareDisplaySids;
+            if (!sidA || !sidB) return;
+            const cachedA = _getCachedHoverSlice(sidA, dim_x, dim_y, _comparePaneHoverIndices(0));
+            const cachedB = _getCachedHoverSlice(sidB, dim_x, dim_y, _comparePaneHoverIndices(1));
+            if (!cachedA || !cachedB || !cachedA.w || !cachedA.h) return;
+            const scaledPts = entry.points.map(p => [p[0] * cachedA.w / cv.width, p[1] * cachedA.h / cv.height]);
+            const stats = _infoQuickRasterStats(cachedA.w, cachedA.h, scaledPts, (gx, gy) => {
+                const rawXA = flip_x ? cachedA.w - 1 - gx : gx;
+                const rawYA = flip_y ? cachedA.h - 1 - gy : gy;
+                const rawXB = flip_x ? cachedB.w - 1 - gx : gx;
+                const rawYB = flip_y ? cachedB.h - 1 - gy : gy;
+                const a = cachedA.slice[rawYA * cachedA.w + rawXA];
+                const b = cachedB.slice[rawYB * cachedB.w + rawXB];
+                if (!Number.isFinite(a) || !Number.isFinite(b)) return NaN;
+                const d = a - b;
+                return diffMode === 1 ? d : diffMode === 2 ? Math.abs(d) : Math.abs(d) / Math.abs(a);
+            });
+            entry.statsText = _infoQuickStatsText(stats);
+            if (_infoQuickRoisCompareDiff.includes(entry)) _infoRenderCompareOverlay(cv, _infoQuickRoisCompareDiff);
+        }
         function _drawAllRois(previewRoi) {
             if (!roiOverlayCanvas || !roiOverlayCtx) return;
             _syncRoiOverlay();
             const { sx, sy, dW, dH } = _roiDispScale();
             roiOverlayCtx.clearRect(0, 0, dW, dH);
             const hasNormalRoi = _rois.some(r => r && r.visible !== false && !_roiIsMvPaneRoi(r));
-            if (!_roiVisible || (!hasNormalRoi && !previewRoi) || _roiIsMvPaneRoi(previewRoi)) { roiOverlayCanvas.style.display = 'none'; return; }
+            // The hover-info quick-measure outlines live outside _rois[]/
+            // _roiVisible entirely, so they survive redraws (resize, mode
+            // switches) that call this with no explicit previewRoi — see
+            // _infoQuickRois. infoPreview is the one still-being-dragged
+            // shape (not yet committed/appended); realPreview is the real
+            // ROI tool's own in-progress preview, mutually exclusive with it.
+            const infoPreview = previewRoi && previewRoi._infoQuick ? previewRoi : null;
+            const realPreview = previewRoi && !previewRoi._infoQuick ? previewRoi : null;
+            const hasQuick = !!infoPreview || _infoQuickRois.length > 0;
+            if (!_roiVisible && !hasQuick) { roiOverlayCanvas.style.display = 'none'; return; }
+            if (_roiVisible && !hasQuick && (!hasNormalRoi && !realPreview)) { roiOverlayCanvas.style.display = 'none'; return; }
+            if (_roiIsMvPaneRoi(realPreview)) { roiOverlayCanvas.style.display = 'none'; return; }
             roiOverlayCanvas.style.display = '';
-            const replaceIdx = previewRoi && Number.isInteger(previewRoi.replaceIdx) ? previewRoi.replaceIdx : -1;
-            for (let i = 0; i < _rois.length; i++) {
-                const r = _rois[i];
-                if (i === replaceIdx) continue;
-                if (_roiIsMvPaneRoi(r)) continue;
-                if (!_roiIsVisibleOnCurrentSlice(r)) continue;
-                const c = _roiColors[i % _roiColors.length];
-                // Floodfill masks are in data space; flip the drawing context
-                // to display space so the mask aligns with the flipped image.
-                const ffDs = r.type === 'floodfill' && r.mask_b64;
-                roiOverlayCtx.save();
-                if (ffDs && flip_x) { roiOverlayCtx.translate(dW, 0); roiOverlayCtx.scale(-1, 1); }
-                if (ffDs && flip_y) { roiOverlayCtx.translate(0, dH); roiOverlayCtx.scale(1, -1); }
-                _roiDrawVisibleShape(roiOverlayCtx, r, sx, sy, c, i === _selectedRoiIdx);
-                if (i === _selectedRoiIdx) _roiDrawHandles(roiOverlayCtx, r, sx, sy);
-                roiOverlayCtx.restore();
-                const lbl = _roiCanvasLabel(i);
-                let [lx, ly] = _roiLabelPoint(r, sx, sy);
-                if (ffDs) {
-                    if (flip_x) lx = dW - lx;
-                    if (flip_y) ly = dH - ly;
-                }
-                _roiDrawLabel(roiOverlayCtx, lbl, lx, ly, c.stroke);
-            }
-            // Draw in-progress ROI preview (same border treatment as committed ROIs)
-            if (previewRoi) {
+            const replaceIdx = realPreview && Number.isInteger(realPreview.replaceIdx) ? realPreview.replaceIdx : -1;
+            if (_roiVisible) {
+                for (let i = 0; i < _rois.length; i++) {
+                    const r = _rois[i];
+                    if (i === replaceIdx) continue;
+                    if (_roiIsMvPaneRoi(r)) continue;
+                    if (!_roiIsVisibleOnCurrentSlice(r)) continue;
+                    const c = _roiColors[i % _roiColors.length];
+                    // Floodfill masks are in data space; flip the drawing context
+                    // to display space so the mask aligns with the flipped image.
+                    const ffDs = r.type === 'floodfill' && r.mask_b64;
+                    roiOverlayCtx.save();
+                    if (ffDs && flip_x) { roiOverlayCtx.translate(dW, 0); roiOverlayCtx.scale(-1, 1); }
+                    if (ffDs && flip_y) { roiOverlayCtx.translate(0, dH); roiOverlayCtx.scale(1, -1); }
+                    _roiDrawVisibleShape(roiOverlayCtx, r, sx, sy, c, i === _selectedRoiIdx);
+                    if (i === _selectedRoiIdx) _roiDrawHandles(roiOverlayCtx, r, sx, sy);
+                    roiOverlayCtx.restore();
+                    const lbl = _roiCanvasLabel(i);
+                    let [lx, ly] = _roiLabelPoint(r, sx, sy);
+                    if (ffDs) {
+                        if (flip_x) lx = dW - lx;
+                        if (flip_y) ly = dH - ly;
+                    }
+                    _roiDrawLabel(roiOverlayCtx, lbl, lx, ly, c.stroke);
+                }
+            }
+            // Draw in-progress real-ROI-tool preview (same border treatment as committed ROIs)
+            if (realPreview) {
                 const colorIdx = replaceIdx >= 0 ? replaceIdx : _rois.length;
                 const c = _roiColors[colorIdx % _roiColors.length];
-                _roiDrawVisibleShape(roiOverlayCtx, previewRoi, sx, sy, c, replaceIdx === _selectedRoiIdx);
-                if (replaceIdx === _selectedRoiIdx) _roiDrawHandles(roiOverlayCtx, previewRoi, sx, sy);
+                _roiDrawVisibleShape(roiOverlayCtx, realPreview, sx, sy, c, replaceIdx === _selectedRoiIdx);
+                if (replaceIdx === _selectedRoiIdx) _roiDrawHandles(roiOverlayCtx, realPreview, sx, sy);
+            }
+            // Still-dragging quick-measure outline (no stats/pill yet).
+            if (infoPreview) {
+                _roiDrawVisibleShape(roiOverlayCtx, infoPreview, sx, sy, _INFO_QUICK_ROI_COLOR, false);
+            }
+            // Every committed quick-measure shape, each with its own pill.
+            for (const q of _infoQuickRois) {
+                _roiDrawVisibleShape(roiOverlayCtx, q, sx, sy, _INFO_QUICK_ROI_COLOR, false);
+                const a = _infoQuickPillAnchor(q, sx, sy);
+                _infoQuickDrawPill(roiOverlayCtx, q.statsText, a.cx, a.y0, a.y1);
             }
         }
 
@@ -24497,45 +25152,54 @@
                 // (rect/circle/freehand drawn on one pane) and only show on the
                 // pane whose dims match.
                 const preview3d = previewRoi && previewRoi.type === 'floodfill' && previewRoi.mask3d_b64 ? previewRoi : null;
-                const previewForView = preview3d ? preview3d : (_roiMatchesMvView(previewRoi, view) ? previewRoi : null);
+                const infoPreview = previewRoi && previewRoi._infoQuick && _roiMatchesMvView(previewRoi, view) ? previewRoi : null;
+                const realPreview = previewRoi && !previewRoi._infoQuick ? previewRoi : null;
+                const previewForView = preview3d ? preview3d : (_roiMatchesMvView(realPreview, view) ? realPreview : null);
                 const hasRoi = _rois.some(r => r && r.visible !== false && (
                     (r.type === 'floodfill' && r.mask3d_b64) || _roiMatchesMvView(r, view)
                 ));
-                if (!_roiVisible || (!hasRoi && !previewForView)) { ov.style.display = 'none'; continue; }
+                // See _drawAllRois: quick-measure outlines bypass _rois[]/
+                // _roiVisible so they survive redraws with no explicit previewRoi.
+                const quickForView = _infoQuickRoisMv.filter(q => _roiMatchesMvView(q, view));
+                const hasQuick = !!infoPreview || quickForView.length > 0;
+                if (!_roiVisible && !hasQuick) { ov.style.display = 'none'; continue; }
+                if (_roiVisible && !hasQuick && !hasRoi && !previewForView) { ov.style.display = 'none'; continue; }
                 ov.style.display = 'block';
                 const sx = dW / view.lastW, sy = dH / view.lastH;
                 const vfx = !!flipDims[view.dimX], vfy = !!flipDims[view.dimY];
                 const replaceIdx = previewForView && Number.isInteger(previewForView.replaceIdx) ? previewForView.replaceIdx : -1;
-                for (let i = 0; i < _rois.length; i++) {
-                    const r = _rois[i];
-                    if (i === replaceIdx) continue;
-                    if (!r || r.visible === false) continue;
-                    const is3d = r.type === 'floodfill' && r.mask3d_b64;
-                    const is2dFf = r.type === 'floodfill' && r.mask_b64 && !is3d;
-                    if (is3d) {
-                        const slice = _roiFloodFillSliceForView(r, view);
-                        if (!slice) continue;
-                        r._paneSlice = slice;
-                    } else if (!_roiMatchesMvView(r, view)) {
-                        continue;
-                    } else if (r.type === 'floodfill' && !_roiFloodFillActiveSlice(r)) {
-                        continue;
-                    }
-                    const c = _roiColors[i % _roiColors.length];
-                    const ffDs = is3d || is2dFf;
-                    rctx.save();
-                    if (ffDs && vfx) { rctx.translate(dW, 0); rctx.scale(-1, 1); }
-                    if (ffDs && vfy) { rctx.translate(0, dH); rctx.scale(1, -1); }
-                    _roiDrawVisibleShape(rctx, r, sx, sy, c, i === _selectedRoiIdx);
-                    rctx.restore();
-                    r._paneSlice = null;
-                    const lbl = _roiCanvasLabel(i);
-                    let [lx, ly] = _roiLabelPoint(r, sx, sy);
-                    if (ffDs) {
-                        if (vfx) lx = dW - lx;
-                        if (vfy) ly = dH - ly;
+                if (_roiVisible) {
+                    for (let i = 0; i < _rois.length; i++) {
+                        const r = _rois[i];
+                        if (i === replaceIdx) continue;
+                        if (!r || r.visible === false) continue;
+                        const is3d = r.type === 'floodfill' && r.mask3d_b64;
+                        const is2dFf = r.type === 'floodfill' && r.mask_b64 && !is3d;
+                        if (is3d) {
+                            const slice = _roiFloodFillSliceForView(r, view);
+                            if (!slice) continue;
+                            r._paneSlice = slice;
+                        } else if (!_roiMatchesMvView(r, view)) {
+                            continue;
+                        } else if (r.type === 'floodfill' && !_roiFloodFillActiveSlice(r)) {
+                            continue;
+                        }
+                        const c = _roiColors[i % _roiColors.length];
+                        const ffDs = is3d || is2dFf;
+                        rctx.save();
+                        if (ffDs && vfx) { rctx.translate(dW, 0); rctx.scale(-1, 1); }
+                        if (ffDs && vfy) { rctx.translate(0, dH); rctx.scale(1, -1); }
+                        _roiDrawVisibleShape(rctx, r, sx, sy, c, i === _selectedRoiIdx);
+                        rctx.restore();
+                        r._paneSlice = null;
+                        const lbl = _roiCanvasLabel(i);
+                        let [lx, ly] = _roiLabelPoint(r, sx, sy);
+                        if (ffDs) {
+                            if (vfx) lx = dW - lx;
+                            if (vfy) ly = dH - ly;
+                        }
+                        _roiDrawLabel(rctx, lbl, lx, ly, c.stroke);
                     }
-                    _roiDrawLabel(rctx, lbl, lx, ly, c.stroke);
                 }
                 if (previewForView) {
                     const is3dPreview = previewForView.mask3d_b64;
@@ -24549,6 +25213,16 @@
                     _roiDrawVisibleShape(rctx, previewForView, sx, sy, c, replaceIdx === _selectedRoiIdx);
                     previewForView._paneSlice = null;
                 }
+                // Still-dragging quick-measure outline for this pane (no pill yet).
+                if (infoPreview) {
+                    _roiDrawVisibleShape(rctx, infoPreview, sx, sy, _INFO_QUICK_ROI_COLOR, false);
+                }
+                // Every committed quick-measure shape tagged to this pane, each with its own pill.
+                for (const q of quickForView) {
+                    _roiDrawVisibleShape(rctx, q, sx, sy, _INFO_QUICK_ROI_COLOR, false);
+                    const a = _infoQuickPillAnchor(q, sx, sy);
+                    _infoQuickDrawPill(rctx, q.statsText, a.cx, a.y0, a.y1);
+                }
             }
         }
         function _clearMvRoiOverlays() {
@@ -24565,7 +25239,8 @@
                 if (!view.roiOverlay && view._cvWrap) {
                     const ov = document.createElement('canvas');
                     ov.className = 'qv-roi-overlay';
-                    view._cvWrap.appendChild(ov);
+                    const clip = view.canvas.closest('.qv-canvas-clip') || view._cvWrap;
+                    clip.appendChild(ov);
                     view.roiOverlay = ov;
                     view.roiCtx = ov.getContext('2d');
                 }
@@ -24583,23 +25258,44 @@
                 rctx.setTransform(dpr, 0, 0, dpr, 0, 0);
                 rctx.clearRect(0, 0, dW, dH);
                 const hasQvRoi = _rois.some(r => r && r.visible !== false && !_roiIsMvPaneRoi(r));
-                if (!_roiVisible || (!hasQvRoi && !previewRoi) || _roiIsMvPaneRoi(previewRoi)) { ov.style.display = 'none'; continue; }
+                // See _drawAllRois: quick-measure outlines bypass _rois[]/
+                // _roiVisible so they survive redraws with no explicit previewRoi.
+                const infoPreview = previewRoi && previewRoi._infoQuick ? previewRoi : null;
+                const realPreview = previewRoi && !previewRoi._infoQuick ? previewRoi : null;
+                const hasQuick = !!infoPreview || _infoQuickRoisQv.length > 0;
+                if (!_roiVisible && !hasQuick) { ov.style.display = 'none'; continue; }
+                if (_roiVisible && !hasQuick && (!hasQvRoi && !realPreview)) { ov.style.display = 'none'; continue; }
+                if (_roiIsMvPaneRoi(realPreview)) { ov.style.display = 'none'; continue; }
                 ov.style.display = 'block';
                 const sx = dW / view.lastW, sy = dH / view.lastH;
-                for (let i = 0; i < _rois.length; i++) {
-                    const r = _rois[i];
-                    if (_roiIsMvPaneRoi(r)) continue;
-                    if (!_roiIsVisibleOnCurrentSlice(r)) continue;
-                    const c = _roiColors[i % _roiColors.length];
-                    _roiDrawVisibleShape(rctx, r, sx, sy, c, i === _selectedRoiIdx);
-                    if (i === _selectedRoiIdx) _roiDrawHandles(rctx, r, sx, sy);
-                    const lbl = _roiCanvasLabel(i);
-                    const [lx, ly] = _roiLabelPoint(r, sx, sy);
-                    _roiDrawLabel(rctx, lbl, lx, ly, c.stroke);
-                }
-                if (previewRoi) {
+                if (_roiVisible) {
+                    for (let i = 0; i < _rois.length; i++) {
+                        const r = _rois[i];
+                        if (_roiIsMvPaneRoi(r)) continue;
+                        if (!_roiIsVisibleOnCurrentSlice(r)) continue;
+                        const c = _roiColors[i % _roiColors.length];
+                        _roiDrawVisibleShape(rctx, r, sx, sy, c, i === _selectedRoiIdx);
+                        if (i === _selectedRoiIdx) _roiDrawHandles(rctx, r, sx, sy);
+                        const lbl = _roiCanvasLabel(i);
+                        const [lx, ly] = _roiLabelPoint(r, sx, sy);
+                        _roiDrawLabel(rctx, lbl, lx, ly, c.stroke);
+                    }
+                }
+                if (realPreview) {
                     const c = _roiColors[_rois.length % _roiColors.length];
-                    _roiDrawVisibleShape(rctx, previewRoi, sx, sy, c, false);
+                    _roiDrawVisibleShape(rctx, realPreview, sx, sy, c, false);
+                }
+                // Still-dragging quick-measure outline (no pill yet).
+                if (infoPreview) {
+                    _roiDrawVisibleShape(rctx, infoPreview, sx, sy, _INFO_QUICK_ROI_COLOR, false);
+                }
+                // Every committed quick-measure shape — shared across every qMRI
+                // pane, but each pane shows its own independently-fetched stat.
+                for (const q of _infoQuickRoisQv) {
+                    _roiDrawVisibleShape(rctx, q, sx, sy, _INFO_QUICK_ROI_COLOR, false);
+                    const text = q.qvStatsByPaneIdx[view.qmriIdx] || null;
+                    const a = _infoQuickPillAnchor(q, sx, sy);
+                    _infoQuickDrawPill(rctx, text, a.cx, a.y0, a.y1);
                 }
             }
         }
@@ -25262,6 +25958,19 @@
             });
         }
         canvas.addEventListener('mousemove', _updateMainPixelInfo);
+        // Hover-info quick-measure: collect points while dragging and show a
+        // live preview outline (same border treatment as the real ROI tool,
+        // via _drawAllRois, but tagged _infoQuick so it never touches _rois[]).
+        canvas.addEventListener('mousemove', e => {
+            if (!_infoFreehandDragging) return;
+            const rect = canvas.getBoundingClientRect();
+            const x = (e.clientX - rect.left) * canvas.width / rect.width;
+            const y = (e.clientY - rect.top) * canvas.height / rect.height;
+            _infoFreehandPts.push([x, y]);
+            if (_infoFreehandPts.length > 2) {
+                _drawAllRois({ type: 'freehand', points: _infoFreehandPts, _infoQuick: true });
+            }
+        });
         _wireHoverInfoDblClick(canvas);
         canvas.addEventListener('mouseleave', () => {
             if (roiDragging) {
@@ -25284,6 +25993,35 @@
                 }
             }
         });
+        // Hover-info quick-measure: finish the drag. A trivial click (too few
+        // points — same threshold as the real ROI tool's freehand minimum)
+        // falls back to the plain instantaneous value the hold-readout above
+        // already shows; a real drag gets a persistent outline + mean±std.
+        // Guarded by _infoFreehandView being unset so this only finalizes a
+        // main-canvas drag — mv/qv panes set it and finalize via their own
+        // per-gesture window listener, which would otherwise lose the race
+        // (document-level bubble listeners run before window-level ones).
+        document.addEventListener('mouseup', () => {
+            if (!_infoFreehandDragging || _infoFreehandView) return;
+            _infoFreehandDragging = false;
+            const pts = _infoFreehandPts.slice();
+            _infoFreehandPts = [];
+            if (pts.length < 5) { _drawAllRois(); return; }
+            const entry = { type: 'freehand', points: pts, _infoQuick: true, statsText: null };
+            _infoQuickRois.push(entry);
+            _infoQuickRoiStack.push({
+                remove: () => {
+                    const idx = _infoQuickRois.indexOf(entry);
+                    if (idx >= 0) _infoQuickRois.splice(idx, 1);
+                    _drawAllRois();
+                },
+            });
+            _drawAllRois();
+            _infoQuickFetchStats(pts).then(stats => {
+                entry.statsText = stats ? _infoQuickStatsText(stats) : null;
+                if (_infoQuickRois.includes(entry)) _drawAllRois();
+            });
+        });
 
         // Click-to-copy pixel value: shared helper
         function _fmtPixelForCopy(v) {
@@ -25958,12 +26696,22 @@
                 title: 'Delete selected ROI',
                 when: [],
                 run: (ctx, e) => {
-                    if (!rectRoiMode || _selectedRoiIdx < 0) return;
-                    e.preventDefault();
-                    const idx = _selectedRoiIdx;
-                    _roiDelete(idx);
-                    _hideRoiContextMenu();
-                    showStatus(`ROI ${idx + 1} deleted`);
+                    if (rectRoiMode && _selectedRoiIdx >= 0) {
+                        e.preventDefault();
+                        const idx = _selectedRoiIdx;
+                        _roiDelete(idx);
+                        _hideRoiContextMenu();
+                        showStatus(`ROI ${idx + 1} deleted`);
+                    } else if (_pixelInfoVisible && _infoQuickRoiStack.length) {
+                        // Hover-info quick-measure shapes have no selection of
+                        // their own — Backspace/Delete just removes the single
+                        // most-recently-drawn one, across all 5 surfaces
+                        // combined (one shared creation-order stack; see
+                        // _infoQuickRoiStack).
+                        e.preventDefault();
+                        _infoQuickRoiStack.pop().remove();
+                        showStatus('quick-measure outline removed');
+                    }
                 },
             },
             'compare.cycleTarget': {
@@ -26072,9 +26820,14 @@
                 when: [],
                 run: (ctx, e) => {
                     _pixelInfoVisible = !_pixelInfoVisible;
+                    // Peek the tick row on every colorbar the instant this
+                    // toggles, rather than waiting for some unrelated
+                    // redraw — see _drawTicks.
+                    ColorBar.redrawAll();
                     if (!_pixelInfoVisible) {
                         _clearHoverPins();
                         hideAllPixelInfo();
+                        _clearInfoQuickRoi();
                         _dimbarFadeSwap(() => _resetDimbarHover());
                     } else {
                         // Pre-fetch raw slice(s) for instant local lookups
@@ -27317,6 +28070,14 @@
                     }
                 },
             },
+            'colorbar.cycleTicks': {
+                title: 'Cycle colorbar tick marks',
+                when: [],
+                run: (ctx, e) => {
+                    e.preventDefault();
+                    _cycleCbTickLevel();
+                },
+            },
             'dimbar.toggleExtents': {
                 title: 'Toggle dimbar max indices',
                 when: [],
@@ -27408,11 +28169,15 @@
                         }
                     } else if (activeDim === dim_x) {
                         flip_x = !flip_x;
-                        if (lastImageData) canvas.getContext('2d').putImageData(applyFlips(lastImageData, lastImgW, lastImgH), 0, 0);
+                        if (qmriActive) qmriViews.forEach(v => qvDrawFrame(v));
+                        else if (compareQmriActive) compareQmriViews.forEach(v => { if (v.lastImageData) v.ctx.putImageData(applyFlips(v.lastImageData, v.lastW, v.lastH), 0, 0); });
+                        else if (lastImageData) canvas.getContext('2d').putImageData(applyFlips(lastImageData, lastImgW, lastImgH), 0, 0);
                         renderInfo(); saveState();
                     } else if (activeDim === dim_y) {
                         flip_y = !flip_y;
-                        if (lastImageData) canvas.getContext('2d').putImageData(applyFlips(lastImageData, lastImgW, lastImgH), 0, 0);
+                        if (qmriActive) qmriViews.forEach(v => qvDrawFrame(v));
+                        else if (compareQmriActive) compareQmriViews.forEach(v => { if (v.lastImageData) v.ctx.putImageData(applyFlips(v.lastImageData, v.lastW, v.lastH), 0, 0); });
+                        else if (lastImageData) canvas.getContext('2d').putImageData(applyFlips(lastImageData, lastImgW, lastImgH), 0, 0);
                         renderInfo(); saveState();
                     } else {
                         lastDirection = 1;
@@ -27454,11 +28219,15 @@
                         }
                     } else if (activeDim === dim_x) {
                         flip_x = !flip_x;
-                        if (lastImageData) canvas.getContext('2d').putImageData(applyFlips(lastImageData, lastImgW, lastImgH), 0, 0);
+                        if (qmriActive) qmriViews.forEach(v => qvDrawFrame(v));
+                        else if (compareQmriActive) compareQmriViews.forEach(v => { if (v.lastImageData) v.ctx.putImageData(applyFlips(v.lastImageData, v.lastW, v.lastH), 0, 0); });
+                        else if (lastImageData) canvas.getContext('2d').putImageData(applyFlips(lastImageData, lastImgW, lastImgH), 0, 0);
                         renderInfo(); saveState();
                     } else if (activeDim === dim_y) {
                         flip_y = !flip_y;
-                        if (lastImageData) canvas.getContext('2d').putImageData(applyFlips(lastImageData, lastImgW, lastImgH), 0, 0);
+                        if (qmriActive) qmriViews.forEach(v => qvDrawFrame(v));
+                        else if (compareQmriActive) compareQmriViews.forEach(v => { if (v.lastImageData) v.ctx.putImageData(applyFlips(v.lastImageData, v.lastW, v.lastH), 0, 0); });
+                        else if (lastImageData) canvas.getContext('2d').putImageData(applyFlips(lastImageData, lastImgW, lastImgH), 0, 0);
                         renderInfo(); saveState();
                     } else {
                         lastDirection = -1;
@@ -27746,6 +28515,7 @@
             { key: 'l', command: 'dim.next' },
             { key: 'ArrowRight', command: 'dim.next' },
             { key: 'D', shift: true, command: 'dimbar.toggleExtents' },
+            { key: 'w', command: 'colorbar.cycleTicks' },
             { key: 'M', command: 'alpha.cycleLevel' },
             { key: 'L', command: 'logscale.toggle' },
             { key: 'p', command: 'projection.cycle' },
@@ -27843,7 +28613,7 @@
                     {
                         title: 'Info & Modes',
                         entries: [
-                            { key: 'i', action: 'Toggle hover pixel info', hint: 'or double-click a pane; shows value in the pane pill; hold Ctrl for the loupe; alt+click adds pins; Esc clears all pins' },
+                            { key: 'i', action: 'Toggle hover pixel info', hint: 'or double-click a pane; shows value in the pane pill; drag draws a quick outline (mean ± std), repeatable; Backspace removes the last one; hold Ctrl for the loupe; alt+click adds pins; Esc clears all pins' },
                             { key: 'I', action: 'Info panel', hint: 'array shape, dtype, memory layout' },
                             { key: '/', action: 'Tool launcher', hint: 'open the transient tool launcher; direct shortcuts still work' },
                         ]
@@ -27894,6 +28664,7 @@
                             { key: 'Drag bar', action: 'Shift the visible range up or down' },
                             { key: 'Dbl-click', action: 'Expand histogram' },
                             { key: 'Dbl-click label', action: 'Type an exact min or max value' },
+                            { key: 'w', action: 'Cycle tick marks', hint: 'off → few → many values between min and max' },
                         ]
                     },
                     {
@@ -32510,6 +33281,57 @@
                             }
                         }
                     }
+                    // Hover-info quick-measure: while hover info is on, a plain
+                    // click-drag always draws a disposable freehand outline on
+                    // this pane instead of navigating the crosshair — the same
+                    // trade-off ROI mode already makes for this gesture above.
+                    if (!rectRoiMode && _pixelInfoVisible && e.button === 0
+                        && !e.shiftKey && !e.metaKey && !e.altKey && !e.ctrlKey
+                        && !_cropActive && !_segMode && !_rulerMode) {
+                        e.preventDefault();
+                        e.stopImmediatePropagation();
+                        sink.focus();
+                        _infoFreehandDragging = true;
+                        _infoFreehandView = view;
+                        _infoFreehandPts = [[px, py]];
+                        const onInfoMove = (me) => {
+                            if (!_infoFreehandDragging || _infoFreehandView !== view) return;
+                            const mr = cv.getBoundingClientRect();
+                            const x = (me.clientX - mr.left) * view.lastW / mr.width;
+                            const y = (me.clientY - mr.top) * view.lastH / mr.height;
+                            _infoFreehandPts.push([x, y]);
+                            if (_infoFreehandPts.length > 2) {
+                                _drawAllMvRois({ type: 'freehand', points: _infoFreehandPts, mvDimX: view.dimX, mvDimY: view.dimY, _infoQuick: true });
+                            }
+                        };
+                        const onInfoUp = () => {
+                            window.removeEventListener('mousemove', onInfoMove);
+                            window.removeEventListener('mouseup', onInfoUp);
+                            if (!_infoFreehandDragging || _infoFreehandView !== view) return;
+                            _infoFreehandDragging = false;
+                            _infoFreehandView = null;
+                            const pts = _infoFreehandPts.slice();
+                            _infoFreehandPts = [];
+                            if (pts.length < 5) { _drawAllMvRois(); return; }
+                            const entry = { type: 'freehand', points: pts, mvDimX: view.dimX, mvDimY: view.dimY, _infoQuick: true, statsText: null };
+                            _infoQuickRoisMv.push(entry);
+                            _infoQuickRoiStack.push({
+                                remove: () => {
+                                    const idx = _infoQuickRoisMv.indexOf(entry);
+                                    if (idx >= 0) _infoQuickRoisMv.splice(idx, 1);
+                                    _drawAllMvRois();
+                                },
+                            });
+                            _drawAllMvRois();
+                            _infoQuickFetchStats(pts).then(stats => {
+                                entry.statsText = stats ? _infoQuickStatsText(stats) : null;
+                                if (_infoQuickRoisMv.includes(entry)) _drawAllMvRois();
+                            });
+                        };
+                        window.addEventListener('mousemove', onInfoMove);
+                        window.addEventListener('mouseup', onInfoUp);
+                        return;
+                    }
                     const hitJ = mvCrossHairHit(view, px, py);
                     // Rotate only on explicit modifier gesture to avoid accidental
                     // oblique jumps when the user simply drags the crosshair.
@@ -33763,6 +34585,8 @@
             if (multiViewActive) exitMultiView();
             if (stackMosaicActive) exitStackMosaic();
             _qmriPrevZoom = userZoom;  // save prior zoom so exitQmri can restore (mirrors enterMultiView)
+            userZoom = 1.0;
+            qvPan.reset();
             qmriActive = true;
             qmriDim = targetDim;
             _ensureQmriActiveDimVisible();
@@ -33885,6 +34709,10 @@
                     pane.addEventListener('mouseenter', () => { _hoveredQmriView = view; });
                     pane.addEventListener('mouseleave', () => { if (_hoveredQmriView === view) _hoveredQmriView = null; });
                     cv.addEventListener('wheel', (e) => {
+                        if ((e.metaKey || (e.ctrlKey && !_mainLoupeInspecting())) && !e.shiftKey && !e.altKey) {
+                            onSliceWheel(e);
+                            return;
+                        }
                         e.preventDefault();
                         const delta = _wheelIndexDelta(current_slice_dim, e);
                         if (!delta) return;
@@ -33894,6 +34722,7 @@
                         _debouncedHoverPrefetch();
                         saveState();
                     }, { passive: false });
+                    _attachPinchHandlers(cv);
                     cv.addEventListener('mousemove', (e) => {
                         _bcMaybePromotePending(e);
                         if (!view.lastW || !view.lastH) return;
@@ -33969,13 +34798,77 @@
                         }
                     });
                     cv.addEventListener('mousedown', (e) => {
+                        // Zoomed past the frame: plain left-drag pans, as in
+                        // normal mode, before any other left-click action.
+                        // Hover-info mode claims plain left-drag for the
+                        // quick-measure outline below, so it must not pan even
+                        // when the pane is zoomed past its frame.
+                        if (!rectRoiMode && !_pixelInfoVisible && e.button === 0 && !e.shiftKey && !e.metaKey && !e.altKey && !e.ctrlKey
+                            && !_cropActive && !_segMode && !_rulerMode
+                            && _usesQmriPaneZoom(cv) && qvPan.overflows) {
+                            e.preventDefault(); sink.focus();
+                            qvPan.startDrag(e);
+                            _reconcileQvZoomCursor();
+                            return;
+                        }
                         if (!rectRoiMode && e.button === 0 && !e.shiftKey && !e.metaKey && !e.altKey
                             && !_cropActive && !_segMode && !_rulerMode) {
-                            if (!e.ctrlKey && _bcCanDrag()) _qmriArmWindowLevel(view, e);
+                            // Hover-info mode claims plain left-drag for the
+                            // quick-measure outline below, so it must not also
+                            // arm the window/level triangle (same rule normal
+                            // mode already applies to its own drag arm).
+                            if (!e.ctrlKey && !_pixelInfoVisible && _bcCanDrag()) _qmriArmWindowLevel(view, e);
                             else {
                                 _pixelInfoHeld = true;
                                 cv.dispatchEvent(new MouseEvent('mousemove', { clientX: e.clientX, clientY: e.clientY, buttons: 1, ctrlKey: e.ctrlKey, bubbles: true }));
                             }
+                            // Hover-info quick-measure: a plain click-drag while
+                            // hover info is on always draws a disposable freehand
+                            // outline on this pane (shown on every qMRI pane via
+                            // _drawAllQvRois, stats fetched per-pane since each
+                            // pane is a different quantitative map).
+                            if (_pixelInfoVisible && !e.ctrlKey) {
+                                const qRect = cv.getBoundingClientRect();
+                                _infoFreehandDragging = true;
+                                _infoFreehandView = view;
+                                _infoFreehandPts = [[
+                                    (e.clientX - qRect.left) * view.lastW / qRect.width,
+                                    (e.clientY - qRect.top) * view.lastH / qRect.height,
+                                ]];
+                                const onInfoMove = (me) => {
+                                    if (!_infoFreehandDragging || _infoFreehandView !== view) return;
+                                    const mr = cv.getBoundingClientRect();
+                                    const x = (me.clientX - mr.left) * view.lastW / mr.width;
+                                    const y = (me.clientY - mr.top) * view.lastH / mr.height;
+                                    _infoFreehandPts.push([x, y]);
+                                    if (_infoFreehandPts.length > 2) {
+                                        _drawAllQvRois({ type: 'freehand', points: _infoFreehandPts, _infoQuick: true });
+                                    }
+                                };
+                                const onInfoUp = () => {
+                                    window.removeEventListener('mousemove', onInfoMove);
+                                    window.removeEventListener('mouseup', onInfoUp);
+                                    if (!_infoFreehandDragging || _infoFreehandView !== view) return;
+                                    _infoFreehandDragging = false;
+                                    _infoFreehandView = null;
+                                    const pts = _infoFreehandPts.slice();
+                                    _infoFreehandPts = [];
+                                    if (pts.length < 5) { _drawAllQvRois(); return; }
+                                    const entry = { type: 'freehand', points: pts, _infoQuick: true, qvStatsByPaneIdx: {} };
+                                    _infoQuickRoisQv.push(entry);
+                                    _infoQuickRoiStack.push({
+                                        remove: () => {
+                                            const idx = _infoQuickRoisQv.indexOf(entry);
+                                            if (idx >= 0) _infoQuickRoisQv.splice(idx, 1);
+                                            _drawAllQvRois();
+                                        },
+                                    });
+                                    _drawAllQvRois();
+                                    _infoQuickFetchQvStats(entry);
+                                };
+                                window.addEventListener('mousemove', onInfoMove);
+                                window.addEventListener('mouseup', onInfoUp);
+                            }
                         }
                         if (!rectRoiMode || e.button !== 0 || e.shiftKey || e.metaKey) return;
                         e.preventDefault(); sink.focus();
@@ -34122,6 +35015,10 @@
                     pane.addEventListener('mouseenter', () => { _hoveredQmriView = view; });
                     pane.addEventListener('mouseleave', () => { if (_hoveredQmriView === view) _hoveredQmriView = null; });
                     cv.addEventListener('wheel', (e) => {
+                        if ((e.metaKey || (e.ctrlKey && !_mainLoupeInspecting())) && !e.shiftKey && !e.altKey) {
+                            onSliceWheel(e);
+                            return;
+                        }
                         e.preventDefault();
                         const delta = _wheelIndexDelta(current_slice_dim, e);
                         if (!delta) return;
@@ -34130,6 +35027,7 @@
                         qmriViews.forEach(v => qvRender(v));
                         saveState();
                     }, { passive: false });
+                    _attachPinchHandlers(cv);
                     if (!httpTransport) {
                         view.ws = createTransport(sid,
                             (event) => qvOnMessage(view, event),
@@ -34196,6 +35094,7 @@
             qmriMosaicActive = false;
             _qmriMosaicZDim = -1;
             _mosaicResetPan();
+            qvPan.reset();
             qmriViews.forEach(v => { if (v.ws) { v.ws.onclose = null; v.ws.close(); } if (v._colorBar) { v._colorBar.destroy(); v._colorBar = null; } if (v._mosaicColorBar) { v._mosaicColorBar.destroy(); v._mosaicColorBar = null; } });
             const _hadRois = rectRoiMode && _rois.length;
             qmriViews = [];
@@ -34369,6 +35268,7 @@
                     stackMosaicViews.forEach(v2 => smRender(v2));
                     saveState();
                 }, { passive: false });
+                _attachPinchHandlers(cv);
                 if (!httpTransport) {
                     view.ws = createTransport(sid,
                         (event) => smOnMessage(view, event),
@@ -34921,6 +35821,7 @@
                         _debouncedHoverPrefetch();
                         saveState();
                     }, { passive: false });
+                    _attachPinchHandlers(cv);
                     cv.addEventListener('mousemove', (e) => {
                         _bcMaybePromotePending(e);
                         if (!view.lastW || !view.lastH) return;
@@ -35267,11 +36168,21 @@
             compareMvRender(v);
         }
 
+        function _qmriMvRenderPaneOnly(v) {
+            v.seq++;
+            v.lastImageData = null;
+            v.lastW = 0; v.lastH = 0;
+            v.rendering = false; v.pending = false;
+            qmriMvDrawFrame(v);
+            qmriMvRender(v);
+        }
+
         // Dispatcher used by the transpose/rotate keyboard commands so they work
-        // identically whether ortho is showing one array (mvViews) or several
-        // (compareMvViews). Compare mode applies the change to the whole column
-        // (that plane, across every compared array) rather than just the hovered
-        // pane, since compare mode's point is viewing co-registered arrays from
+        // identically whether ortho is showing one array (mvViews), several
+        // (compareMvViews), or qMRI's own per-map 3-plane view (qmriMvViews).
+        // Compare mode applies the change to the whole column (that plane,
+        // across every compared array) rather than just the hovered pane,
+        // since compare mode's point is viewing co-registered arrays from
         // the same perspective — matching how wheel-scroll already keeps rows
         // in sync (see compareMv pane 'wheel' listener).
         function _orthoTransposeTargets() {
@@ -35286,6 +36197,13 @@
                 const views = compareMvViews.filter((_, idx) => idx % 3 === pi);
                 return { views, renderOne: _cmvRenderPaneOnly };
             }
+            if (qmriMvActive) {
+                const v = _orthoCurrentPane(qmriMvViews, _hoveredQmriMvView);
+                if (!v) return null;
+                const pi = qmriMvViews.indexOf(v) % 3;
+                const views = qmriMvViews.filter((_, idx) => idx % 3 === pi);
+                return { views, renderOne: _qmriMvRenderPaneOnly };
+            }
             return null;
         }
 
@@ -35402,6 +36320,7 @@
                         _debouncedHoverPrefetch();
                         saveState();
                     }, { passive: false });
+                    _attachPinchHandlers(cv);
                     cv.addEventListener('mousedown', (e) => {
                         if (e.button !== 0) return;
                         e.preventDefault();
@@ -35961,11 +36880,13 @@
                         const delta = _wheelIndexDelta(view.sliceDir, e);
                         if (!delta) return;
                         indices[view.sliceDir] = Math.max(0, Math.min(shape[view.sliceDir] - 1, indices[view.sliceDir] + delta));
+                        _qmvScrollHint(view);
                         renderInfo();
                         qmriMvViews.forEach(v => qmriMvRender(v));
                         _debouncedHoverPrefetch();
                         saveState();
                     }, { passive: false });
+                    _attachPinchHandlers(cv);
                     cv.addEventListener('mousedown', (e) => {
                         if (e.button !== 0) return;
                         e.preventDefault();
@@ -35973,12 +36894,14 @@
                         if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return;
                         sink.focus();
                         _qmriMvDragView = view;
+                        _qmvRecomputeCrosshairTarget();
                         handleQmriMvPointer(view, e);
                         const onMove = (me) => { if (_qmriMvDragView === view) handleQmriMvPointer(view, me); };
                         const onUp = () => {
                             window.removeEventListener('mousemove', onMove);
                             window.removeEventListener('mouseup', onUp);
                             _qmriMvDragView = null;
+                            _qmvRecomputeCrosshairTarget();
                         };
                         window.addEventListener('mousemove', onMove);
                         window.addEventListener('mouseup', onUp);
@@ -36121,6 +37044,11 @@
             qmriMvActive = false;
             _qmriMvDragView = null;
             _hoveredQmriMvView = null;
+            if (_qmvCrosshairAnim) { cancelAnimationFrame(_qmvCrosshairAnim); _qmvCrosshairAnim = null; }
+            if (_qmvScrollHintTimer) { clearTimeout(_qmvScrollHintTimer); _qmvScrollHintTimer = null; }
+            _qmvCrosshairAlpha = 0; _qmvCrosshairTarget = 0; _qmvScrollHintDir = -1;
+            _reconcileOrthoCursorHidden();
+            _reconcileMvOrientationVisibility();
             qmriMvViews.forEach(v => { if (v.ws) { v.ws.onclose = null; v.ws.close(); } });
             qmriMvViews = [];
             qmriMvDims = [];
@@ -36286,8 +37214,39 @@
             }
             v.ctx.putImageData(applyMvFlips(v, v.lastImageData, v.lastW, v.lastH), 0, 0);
             _patientFrameDisplayed(v._renderPatientIndex);
+            _qmvDrawCrosshair(v);
+            drawMvOrientation();
             _refreshLoupeFromLastMouse();
         }
+        /** Position lines on the pane's overlay, like compareMvDrawFrame. */
+        function _qmvDrawCrosshair(v) {
+            const alpha = (_qmvScrollHintTimer && v.sliceDir === _qmvScrollHintDir) ? 0 : _qmvCrosshairAlpha;
+            const ov = _getMvCrosshairOverlay(v);
+            if (!ov) return;
+            const metrics = _getMvCrosshairMetrics(v);
+            if (!metrics) return;
+            const { paneW, paneH, offsetX, offsetY, scaleX, scaleY } = metrics;
+            const dpr = window.devicePixelRatio || 1;
+            const ovW = Math.round(paneW * dpr), ovH = Math.round(paneH * dpr);
+            if (ov.width !== ovW || ov.height !== ovH) {
+                ov.width = ovW; ov.height = ovH;
+                ov.style.width = paneW + 'px';
+                ov.style.height = paneH + 'px';
+            }
+            const c = ov.getContext('2d');
+            c.setTransform(dpr, 0, 0, dpr, 0, 0);
+            c.clearRect(0, 0, paneW, paneH);
+            if (alpha <= 0.005) return;
+            c.globalAlpha = alpha;
+            const fx = _mvFlipX(v), fy = _mvFlipY(v);
+            const cx = fx ? (v.lastW - indices[v.dimX] - 0.5) : (indices[v.dimX] + 0.5);
+            const cy = fy ? (v.lastH - indices[v.dimY] - 0.5) : (indices[v.dimY] + 0.5);
+            const cssCx = offsetX + cx * scaleX, cssCy = offsetY + cy * scaleY;
+            c.lineWidth = 1;
+            c.strokeStyle = _mvCrosshairStroke();
+            c.beginPath(); c.moveTo(cssCx, 0); c.lineTo(cssCx, paneH); c.stroke();
+            c.beginPath(); c.moveTo(0, cssCy); c.lineTo(paneW, cssCy); c.stroke();
+        }
 
         function qmriMvScaleAllCanvases() {
             const ready = qmriMvViews.filter(v => v.lastW && v.lastH);
@@ -36613,6 +37572,7 @@
             const n = ready.length;
 
             if (qmriMosaicActive) {
+                qvPan.reset();
                 // Mosaic mode: 1 row per parameter, each canvas is a wide horizontal strip.
                 // Enforce minimum tile size — if tiles would be too small to read,
                 // allow content to overflow the viewport and enable pan/drag.
@@ -36621,6 +37581,15 @@
                 const vcbW = anyMosaicExpanded ? 30 : 8;
                 const labelW = 28 + 8; // label width + margin
                 const vcbTotalW = vcbW + 4 + 30; // vcb + margin + labels
+                // .cb-col defaults to a 250px width sized for horizontal colorbars;
+                // pin it to the actual vertical bar width so the mosaic row's
+                // reserved footprint doesn't stay oversized once histogram mode
+                // (the expand animation) grows the canvas past its collapsed size.
+                for (const v of ready) {
+                    if (v._mosaicColorBar && v._mosaicColorBar.colWrap) {
+                        v._mosaicColorBar.colWrap.style.width = vcbW + 'px';
+                    }
+                }
                 const bottomPad = 24;
                 const totalH = window.innerHeight - uiReserveV()
                              - (n - 1) * rowGap - bottomPad * (1 - _crossfadeCollapseP);
@@ -36701,40 +37670,37 @@
             }));
             const absMaxScale = Math.min(...layoutSizes.map(({ w, h }) =>
                 Math.min(absMaxScaleW / w, absMaxScaleH / h)));
-            const { capped: cappedScale, atMax } = _clampUniformZoom(absMaxScale);
-            // Per-pane geometry routed through the shared _scalePane primitive.
-            // qMRI non-mosaic has no per-pane pan or viewport clipping: each canvas
-            // is sized directly to fit. userZoom clamping + auto-fit are handled by
-            // _clampUniformZoom above, so updateAutoFit / allowOverflowRecalc are
-            // both false. baseScale is cappedScale/userZoom so _scalePane's
-            // finalScale = baseScale*userZoom reproduces cappedScale exactly.
-            // squareStretch is hardcoded false — qMRI panes are not square-stretched
-            // regardless of the global toggle. viewport:null and a stub pan skip the
-            // clip/pan machinery entirely.
-            const _qvPanStub = { x: 0, y: 0, clamp: () => {}, apply: () => {} };
-            const qvBaseScale = cappedScale / Math.max(0.0001, userZoom);
+            // Keep the fitted pane frames stationary while the images zoom and
+            // pan together behind them. This matches normal-mode zoom without
+            // turning the qMRI grid itself into one large scrollable viewport.
+            const qvBaseScale = absMaxScale;
             for (const { v, w, h } of layoutSizes) {
+                const clip = v.canvas.closest('.qv-canvas-clip');
+                const fittedViewport = _paneViewportAtBaseZoom(
+                    w, h, qvBaseScale, absMaxScaleW, absMaxScaleH, false,
+                );
                 _scalePane(
-                    { canvas: v.canvas, w, h, pan: _qvPanStub },
-                    null,
+                    { canvas: v.canvas, w, h, pan: qvPan },
+                    clip,
                     {
-                        maxW: Math.round(w * cappedScale),
-                        maxH: Math.round(h * cappedScale),
+                        maxW: absMaxScaleW,
+                        maxH: absMaxScaleH,
                         baseScale: qvBaseScale,
                         squareStretch: false,
                         updateAutoFit: false,
                         allowOverflowRecalc: false,
+                        forceViewport: fittedViewport,
                     }
                 );
                 // Keep colorbar island width clamped to target
                 if (v._colorBar && v._colorBar.wrap) {
-                    const qvPaneW = parseInt(v.canvas.style.width) || 0;
+                    const qvPaneW = fittedViewport.w;
                     const qvCbW = cbTargetWidth(qvPaneW);
                     v._colorBar.wrap.style.display = qvCbW == null ? 'none' : '';
                     if (qvCbW != null) v._colorBar.wrap.style.width = qvCbW + 'px';
                 }
                 if (v.syntheticId && v.paramControls) {
-                    const qvPaneW = parseInt(v.canvas.style.width) || 0;
+                    const qvPaneW = fittedViewport.w;
                     const qvControlW = cbTargetWidth(qvPaneW);
                     v.paramControls.style.display = qvControlW == null ? 'none' : 'grid';
                     if (qvControlW != null) v.paramControls.style.width = qvControlW + 'px';
@@ -36743,20 +37709,24 @@
             // Size all invisible placeholders to a real pane width so partial
             // rows preserve the same left-aligned column grid as the rows above.
             if (ready.length > 0) {
-                const placeholderWidth = ready[0].canvas.style.width;
+                const placeholderWidth = ready[0].canvas.closest('.qv-canvas-clip')?.style.width
+                    || ready[0].canvas.style.width;
                 document.querySelectorAll('#qmri-view-wrap .qv-placeholder').forEach(ph => {
                     ph.style.width = placeholderWidth;
                     ph.style.height = '1px';
                 });
             }
             fixWrapperAlignment();
+            if (rectRoiMode) _drawAllQvRois();
+            _reconcileQvZoomCursor();
+            updateMiniMap();
             requestAnimationFrame(() => {
                 if (qmriActive) {
                     qmriViews.forEach(v2 => { if (v2._colorBar) { v2._colorBar.draw(); v2._colorBar.updateLabels(); } });
                     positionEggs();
                 }
             });
-            return atMax ? 'max' : null;
+            return null;
         }
 
         function qvOnMessage(v, event) {
@@ -37026,7 +37996,9 @@
 
         function drawMvOrientation() {
             const cv = document.getElementById('mv-orientation');
-            const _oriDims = multiViewActive ? mvDims : (compareMvActive ? compareMvDims : []);
+            const _oriDims = multiViewActive ? mvDims
+                : compareMvActive ? compareMvDims
+                : qmriMvActive ? qmriMvDims : [];
             if (!cv || _oriDims.length < 3) return;
             const dpr = window.devicePixelRatio || 1;
             const cssSize = 120;
@@ -37223,7 +38195,8 @@
             const mvOrientation = document.getElementById('mv-orientation');
             if (!mvOrientation) return;
             const show = !!((multiViewActive || compareMvActive)
-                && (mvDraggingView || cmvDraggingView || obliqueDrag || _obliqueAltHeld || _mvScrollHintActive));
+                && (mvDraggingView || cmvDraggingView || obliqueDrag || _obliqueAltHeld || _mvScrollHintActive))
+                || !!(qmriMvActive && (_qmriMvDragView || _qmvScrollHintTimer));
             mvOrientation.style.display = show ? 'block' : 'none';
         }
         function _mvCancelPressCrosshair() {
@@ -37274,6 +38247,45 @@
             _cmvCrosshairTarget = target;
             if (!_cmvCrosshairAnim) _cmvCrosshairAnim = requestAnimationFrame(_cmvAnimateCrosshairs);
         }
+        // qMRI multiview: every row shares one position, so one alpha drives
+        // the lines in all rows at once (same press / scroll triggers as the
+        // plain ortho grid).
+        function _qmvAnimateCrosshairs() {
+            const speed = 0.12;
+            const diff = _qmvCrosshairTarget - _qmvCrosshairAlpha;
+            if (Math.abs(diff) < 0.01) {
+                _qmvCrosshairAlpha = _qmvCrosshairTarget;
+                _qmvCrosshairAnim = null;
+                qmriMvViews.forEach(v => qmriMvDrawFrame(v));
+                return;
+            }
+            _qmvCrosshairAlpha += diff > 0 ? Math.min(speed, diff) : Math.max(-speed, diff);
+            qmriMvViews.forEach(v => qmriMvDrawFrame(v));
+            _qmvCrosshairAnim = requestAnimationFrame(_qmvAnimateCrosshairs);
+        }
+        function _qmvSetCrosshairTarget(target) {
+            _qmvCrosshairTarget = target;
+            if (!_qmvCrosshairAnim) _qmvCrosshairAnim = requestAnimationFrame(_qmvAnimateCrosshairs);
+        }
+        function _qmvRecomputeCrosshairTarget() {
+            if (!qmriMvActive) return;
+            _reconcileOrthoCursorHidden();
+            _reconcileMvOrientationVisibility();
+            _qmvSetCrosshairTarget(_qmriMvDragView || _qmvScrollHintTimer ? 1 : 0);
+        }
+        /** Scrolling a plane moves the lines in the other two planes; the
+         *  scrolled plane's own lines stay put, so they are left hidden. */
+        function _qmvScrollHint(view) {
+            _qmvScrollHintDir = view ? view.sliceDir : -1;
+            if (_qmvScrollHintTimer) clearTimeout(_qmvScrollHintTimer);
+            _qmvScrollHintTimer = setTimeout(() => {
+                _qmvScrollHintTimer = null;
+                _qmvScrollHintDir = -1;
+                _qmvRecomputeCrosshairTarget();
+            }, 250);
+            _reconcileMvOrientationVisibility();
+            _qmvSetCrosshairTarget(1);
+        }
 
         function _getMvCrosshairOverlay(v) {
             if (v._chOverlay) return v._chOverlay;
@@ -38172,7 +39184,9 @@
             // not auto-entered on zoom threshold crossings. Auto-entry was buggy during
             // animation and surprised users.
             if ((e.metaKey || (e.ctrlKey && !_mainLoupeInspecting())) && !e.shiftKey && !e.altKey) {
-                const anchor = _captureZoomAnchor(e.clientX, e.clientY);
+                const zoomCanvas = e.currentTarget instanceof HTMLCanvasElement ? e.currentTarget : canvas;
+                const qmriPaneZoom = _usesQmriPaneZoom(zoomCanvas);
+                const anchor = _captureZoomAnchor(e.clientX, e.clientY, zoomCanvas);
                 const clamped = Math.max(-10, Math.min(10, e.deltaY));
                 const factor = Math.pow(2, -clamped * _zoomSensitivity);
                 const zoomBase = (_scrubRequestedZoom !== null) ? _scrubRequestedZoom : userZoom;
@@ -38181,13 +39195,22 @@
                 // settled immersive view via pinch (they must toggle with Shift+F).
                 const _wZ = lastImgW || canvas.width;
                 const _hZ = lastImgH || canvas.height;
-                const floorZ = _fullscreenActive && _wZ && _hZ
+                const floorZ = qmriPaneZoom ? 1.0 : (_fullscreenActive && _wZ && _hZ
                     ? _calcAutoFitZoom(_wZ, _hZ, true) * 1.005
-                    : _normalFitZoom;
+                    : _normalFitZoom);
                 const desiredZoom = Math.max(floorZ, Math.min(10.0, zoomBase * factor));
                 _scrubRequestedZoom = null;
                 userZoom = desiredZoom;
-                if (!_snapZoomToFit()) {
+                let snapped = false;
+                if (qmriPaneZoom && Math.abs(userZoom - 1.0) < 0.02) {
+                    userZoom = 1.0;
+                    _zoomAdjustedByUser = false;
+                    qvPan.reset();
+                    snapped = true;
+                } else if (!qmriPaneZoom) {
+                    snapped = _snapZoomToFit();
+                }
+                if (!snapped) {
                     _zoomAdjustedByUser = true;
                 }
                 ModeRegistry.scaleAll();
@@ -38300,9 +39323,77 @@
             });
         });
         // Compare pane drag-to-pan when zoomed past viewport
-        compareCanvases.forEach(cv => {
+        compareCanvases.forEach((cv, cmpPaneIdx) => {
             cv.addEventListener('mousedown', (e) => {
-                if (!compareActive || !comparePan.overflows) return;
+                if (!compareActive) return;
+                // Hover-info quick-measure: a plain click-drag while hover info
+                // is on always draws a disposable freehand outline on this pane
+                // and shows mean±std in its own pixel-info pill, instead of
+                // panning (when zoomed) or doing nothing (when not) — the same
+                // trade-off this gesture already makes in normal/mv/qMRI. Unlike
+                // those, compare mode already has this pane's 2D slice cached
+                // client-side (see _getCachedHoverSlice), so the aggregation is
+                // done entirely here rather than via /roi_stats — see
+                // _infoQuickComparePaneStats. Runs regardless of comparePan.overflows
+                // so it isn't limited to the zoomed-in case (unlike the pan below).
+                if (e.button === 0 && _pixelInfoVisible && !e.shiftKey && !e.metaKey && !e.altKey && !e.ctrlKey) {
+                    e.preventDefault();
+                    const dragTag = `cmp:${cmpPaneIdx}`;
+                    _infoFreehandDragging = true;
+                    _infoFreehandView = dragTag;
+                    const rect0 = cv.getBoundingClientRect();
+                    _infoFreehandPts = [[
+                        (e.clientX - rect0.left) * cv.width / rect0.width,
+                        (e.clientY - rect0.top) * cv.height / rect0.height,
+                    ]];
+                    const onInfoMove = (me) => {
+                        if (!_infoFreehandDragging || _infoFreehandView !== dragTag) return;
+                        const mr = cv.getBoundingClientRect();
+                        _infoFreehandPts.push([
+                            (me.clientX - mr.left) * cv.width / mr.width,
+                            (me.clientY - mr.top) * cv.height / mr.height,
+                        ]);
+                        if (_infoFreehandPts.length > 2) {
+                            _infoRenderCompareOverlay(cv, _infoQuickRoisCompare[cmpPaneIdx], { type: 'freehand', points: _infoFreehandPts, _infoQuick: true });
+                        }
+                    };
+                    const onInfoUp = () => {
+                        window.removeEventListener('mousemove', onInfoMove);
+                        window.removeEventListener('mouseup', onInfoUp);
+                        if (!_infoFreehandDragging || _infoFreehandView !== dragTag) return;
+                        _infoFreehandDragging = false;
+                        _infoFreehandView = null;
+                        const pts = _infoFreehandPts.slice();
+                        _infoFreehandPts = [];
+                        // Trivial click: fall back to the plain hover value
+                        // (already shown continuously by this pane's mousemove
+                        // listener) — just redraw whatever outlines already
+                        // persisted here, same threshold as the rest of this feature.
+                        if (pts.length < 5) { _infoRenderCompareOverlay(cv, _infoQuickRoisCompare[cmpPaneIdx]); return; }
+                        const entry = { type: 'freehand', points: pts, _infoQuick: true, statsText: null };
+                        if (!_infoQuickRoisCompare[cmpPaneIdx]) _infoQuickRoisCompare[cmpPaneIdx] = [];
+                        _infoQuickRoisCompare[cmpPaneIdx].push(entry);
+                        _infoQuickRoiStack.push({
+                            remove: () => {
+                                const arr = _infoQuickRoisCompare[cmpPaneIdx];
+                                if (!arr) return;
+                                const idx = arr.indexOf(entry);
+                                if (idx >= 0) arr.splice(idx, 1);
+                                _infoRenderCompareOverlay(cv, arr);
+                            },
+                        });
+                        _infoRenderCompareOverlay(cv, _infoQuickRoisCompare[cmpPaneIdx]);
+                        _infoQuickComparePaneStats(cmpPaneIdx, entry);
+                    };
+                    window.addEventListener('mousemove', onInfoMove);
+                    window.addEventListener('mouseup', onInfoUp);
+                    return;
+                }
+                if (!comparePan.overflows) return;
+                // Hover-info mode has no pan on this pane — handled above —
+                // but keep this guard too as a defensive no-op for modified
+                // clicks (shift/ctrl/meta/alt) that skip the branch above.
+                if (e.button === 0 && _pixelInfoVisible) return;
                 if (e.button !== 0 && e.button !== 2) return;
                 e.preventDefault();
                 comparePan.startDrag(e);
@@ -38313,13 +39404,28 @@
             if (comparePan.updateDrag(e)) {
                 updateMiniMapViewport();
             }
+            if (qvPan.updateDrag(e)) updateMiniMap();
         });
         window.addEventListener('mouseup', () => {
             if (comparePan.endDrag()) {
                 const overflowing = comparePan.overflows;
                 compareCanvases.forEach(cv => { if (cv) cv.style.cursor = overflowing ? 'grab' : 'crosshair'; });
             }
+            if (qvPan.endDrag()) _reconcileQvZoomCursor();
         });
+        /** Hand cursor on qMRI panes while they overflow their frames.
+         *  Only the grab/grabbing values are ever written or cleared here,
+         *  so ROI editing and the loupe keep their own cursors. */
+        function _reconcileQvZoomCursor() {
+            const zoomed = _usesQmriPaneZoom(qmriViews[0]?.canvas) && qvPan.overflows;
+            for (const v of qmriViews) {
+                const cv = v.canvas;
+                if (!cv) continue;
+                const want = zoomed && !rectRoiMode && !_pixelInfoVisible ? (qvPan.dragging ? 'grabbing' : 'grab') : '';
+                if (want) cv.style.cursor = want;
+                else if (cv.style.cursor === 'grab' || cv.style.cursor === 'grabbing') cv.style.cursor = '';
+            }
+        }
         // Dynamically create crosshair elements in compare panes (including diff canvas)
         const _allCrosshairCanvases = () => {
             const cvs = compareCanvases.filter(Boolean);
@@ -38506,6 +39612,63 @@
                 hideCompareCrosshairs();
                 _hideComparePaneInfo();
             });
+            // Hover-info quick-measure on the centre diff pane. Unlike the
+            // split panes above, this canvas has no pre-existing mousedown
+            // wiring at all (no pan — comparePan only ever starts from a
+            // split pane), so there's no gesture to guard against here, only
+            // one to add. Only the three numeric diff modes have a per-pixel
+            // value to aggregate (diffMode 1-3 — see _compareCenterSample);
+            // overlay/wipe/flicker/checker (diffMode 0) are left alone, same
+            // as today — no outline, no stats, no crash.
+            _diffCvForXhair.addEventListener('mousedown', (e) => {
+                if (!compareActive || !_pixelInfoVisible || e.button !== 0) return;
+                if (e.shiftKey || e.metaKey || e.altKey || e.ctrlKey) return;
+                if (diffMode <= 0) return;
+                e.preventDefault();
+                const cv = _diffCvForXhair;
+                const dragTag = 'cmp:diff';
+                _infoFreehandDragging = true;
+                _infoFreehandView = dragTag;
+                const rect0 = cv.getBoundingClientRect();
+                _infoFreehandPts = [[
+                    (e.clientX - rect0.left) * cv.width / rect0.width,
+                    (e.clientY - rect0.top) * cv.height / rect0.height,
+                ]];
+                const onInfoMove = (me) => {
+                    if (!_infoFreehandDragging || _infoFreehandView !== dragTag) return;
+                    const mr = cv.getBoundingClientRect();
+                    _infoFreehandPts.push([
+                        (me.clientX - mr.left) * cv.width / mr.width,
+                        (me.clientY - mr.top) * cv.height / mr.height,
+                    ]);
+                    if (_infoFreehandPts.length > 2) {
+                        _infoRenderCompareOverlay(cv, _infoQuickRoisCompareDiff, { type: 'freehand', points: _infoFreehandPts, _infoQuick: true });
+                    }
+                };
+                const onInfoUp = () => {
+                    window.removeEventListener('mousemove', onInfoMove);
+                    window.removeEventListener('mouseup', onInfoUp);
+                    if (!_infoFreehandDragging || _infoFreehandView !== dragTag) return;
+                    _infoFreehandDragging = false;
+                    _infoFreehandView = null;
+                    const pts = _infoFreehandPts.slice();
+                    _infoFreehandPts = [];
+                    if (pts.length < 5) { _infoRenderCompareOverlay(cv, _infoQuickRoisCompareDiff); return; }
+                    const entry = { type: 'freehand', points: pts, _infoQuick: true, statsText: null };
+                    _infoQuickRoisCompareDiff.push(entry);
+                    _infoQuickRoiStack.push({
+                        remove: () => {
+                            const idx = _infoQuickRoisCompareDiff.indexOf(entry);
+                            if (idx >= 0) _infoQuickRoisCompareDiff.splice(idx, 1);
+                            _infoRenderCompareOverlay(cv, _infoQuickRoisCompareDiff);
+                        },
+                    });
+                    _infoRenderCompareOverlay(cv, _infoQuickRoisCompareDiff);
+                    _infoQuickCompareDiffStats(entry);
+                };
+                window.addEventListener('mousemove', onInfoMove);
+                window.addEventListener('mouseup', onInfoUp);
+            });
         }
 
         function closeSocket() {
@@ -42507,11 +43670,13 @@
             const compareFrame = compareActive ? compareFrames.find(Boolean) : null;
             const compareShouldShow = compareActive && comparePan.overflows && compareFrame && !multiViewActive && !qmriActive;
             const normalShouldShow = mainPan.overflows && lastImageData && !compareActive && !multiViewActive && !qmriActive;
+            const qmriShouldShow = _usesQmriPaneZoom(qmriViews[0]?.canvas) && qvPan.overflows;
 
-            // ── Per-pane minimaps in compare mode ──
-            if (compareShouldShow) {
+            // ── Per-pane minimaps in compare / qMRI mode ──
+            if (compareShouldShow || qmriShouldShow) {
                 _miniMap.classList.remove('visible'); // hide global minimap
-                _updatePerPaneMinimaps();
+                if (compareShouldShow) _updatePerPaneMinimaps();
+                else _updateQvMinimaps();
                 return;
             } else {
                 _clearPerPaneMinimaps();
@@ -42574,55 +43739,81 @@
                         continue;
                     }
                 }
-                // Find or create per-pane minimap
-                let mm = clip.querySelector('.cmp-mini-map');
-                if (!mm) {
-                    mm = document.createElement('div');
-                    mm.className = 'cmp-mini-map';
-                    const mmCv = document.createElement('canvas');
-                    mmCv.width = W; mmCv.height = H;
-                    const mmVp = document.createElement('div');
-                    mmVp.className = 'cmp-mini-vp';
-                    mm.appendChild(mmCv);
-                    mm.appendChild(mmVp);
-                    clip.appendChild(mm);
-                }
-                // Position: NW for left panes, NE for right panes,
-                // SW for bottom-left, SE for bottom-right
-                mm.style.top = isBottom ? 'auto' : '6px';
-                mm.style.bottom = isBottom ? '6px' : 'auto';
-                mm.style.left = isLeft ? '6px' : 'auto';
-                mm.style.right = isRight ? '6px' : 'auto';
-                mm.classList.add('visible');
-                const mmCv = mm.querySelector('canvas');
-                const mmVp = mm.querySelector('.cmp-mini-vp');
-                // Draw thumbnail
-                mmCv.width = W; mmCv.height = H;
-                const ctx = mmCv.getContext('2d');
-                const tmp = document.createElement('canvas');
-                tmp.width = frame.width; tmp.height = frame.height;
-                tmp.getContext('2d').putImageData(applyFlips(frame.imageData, frame.width, frame.height), 0, 0);
-                ctx.drawImage(tmp, 0, 0, W, H);
-                // Draw viewport rectangle
-                const cssW = parseInt(cv.style.width) || cv.width;
-                const cssH = parseInt(cv.style.height) || cv.height;
-                const vpW = parseInt(inner.dataset.vpW) || inner.offsetWidth || cssW;
-                const vpH = parseInt(inner.dataset.vpH) || inner.offsetHeight || cssH;
-                const fx = Math.min(1, vpW / cssW);
-                const fy = Math.min(1, vpH / cssH);
-                const offFx = -comparePan.x / cssW;
-                const offFy = -comparePan.y / cssH;
-                const rW = Math.max(2, Math.round(fx * W));
-                const rH = Math.max(2, Math.round(fy * H));
-                const rX = Math.max(0, Math.min(W - rW, Math.round(offFx * W)));
-                const rY = Math.max(0, Math.min(H - rH, Math.round(offFy * H)));
-                mmVp.style.width = rW + 'px';
-                mmVp.style.height = rH + 'px';
-                mmVp.style.left = rX + 'px';
-                mmVp.style.top = rY + 'px';
+                const vpW = parseInt(inner.dataset.vpW) || inner.offsetWidth;
+                const vpH = parseInt(inner.dataset.vpH) || inner.offsetHeight;
+                _drawPaneMinimap(clip, cv, frame, comparePan, { w: vpW, h: vpH },
+                    { left: isLeft, right: isRight, bottom: isBottom });
             }
         }
 
+        /** Find or create the small map inside a pane's clip wrapper and
+         *  draw `frame` with the rectangle that `pan` currently shows.
+         *  Corner: NW for left panes, NE for right panes, SW/SE at the
+         *  bottom. Shared by compare and qMRI panes. */
+        function _drawPaneMinimap(clip, cv, frame, pan, vp, corner) {
+            const W = 80, H = 80;
+            let mm = clip.querySelector('.cmp-mini-map');
+            if (!mm) {
+                mm = document.createElement('div');
+                mm.className = 'cmp-mini-map';
+                const mmCv = document.createElement('canvas');
+                mmCv.width = W; mmCv.height = H;
+                const mmVp = document.createElement('div');
+                mmVp.className = 'cmp-mini-vp';
+                mm.appendChild(mmCv);
+                mm.appendChild(mmVp);
+                clip.appendChild(mm);
+            }
+            mm.style.top = corner.bottom ? 'auto' : '6px';
+            mm.style.bottom = corner.bottom ? '6px' : 'auto';
+            mm.style.left = corner.left ? '6px' : 'auto';
+            mm.style.right = corner.right ? '6px' : 'auto';
+            mm.classList.add('visible');
+            const mmCv = mm.querySelector('canvas');
+            const mmVp = mm.querySelector('.cmp-mini-vp');
+            // Draw thumbnail
+            mmCv.width = W; mmCv.height = H;
+            const ctx = mmCv.getContext('2d');
+            const tmp = document.createElement('canvas');
+            tmp.width = frame.width; tmp.height = frame.height;
+            tmp.getContext('2d').putImageData(applyFlips(frame.imageData, frame.width, frame.height), 0, 0);
+            ctx.drawImage(tmp, 0, 0, W, H);
+            // Draw viewport rectangle
+            const cssW = parseInt(cv.style.width) || cv.width;
+            const cssH = parseInt(cv.style.height) || cv.height;
+            const vpW = vp.w || cssW;
+            const vpH = vp.h || cssH;
+            const fx = Math.min(1, vpW / cssW);
+            const fy = Math.min(1, vpH / cssH);
+            const offFx = -pan.x / cssW;
+            const offFy = -pan.y / cssH;
+            const rW = Math.max(2, Math.round(fx * W));
+            const rH = Math.max(2, Math.round(fy * H));
+            const rX = Math.max(0, Math.min(W - rW, Math.round(offFx * W)));
+            const rY = Math.max(0, Math.min(H - rH, Math.round(offFy * H)));
+            mmVp.style.width = rW + 'px';
+            mmVp.style.height = rH + 'px';
+            mmVp.style.left = rX + 'px';
+            mmVp.style.top = rY + 'px';
+        }
+
+        /** qMRI panes zoom and pan together, but each pane shows its own
+         *  map (top-right, like normal mode's) so every pane reads alone. */
+        function _updateQvMinimaps() {
+            const keep = new Set();
+            for (const v of qmriViews) {
+                const clip = v.canvas && v.canvas.closest('.qv-canvas-clip');
+                if (!clip || !v.lastImageData) continue;
+                _drawPaneMinimap(clip, v.canvas,
+                    { imageData: v.lastImageData, width: v.lastW, height: v.lastH },
+                    qvPan, { w: clip.offsetWidth, h: clip.offsetHeight }, { right: true });
+                keep.add(clip.querySelector('.cmp-mini-map'));
+            }
+            document.querySelectorAll('#qmri-view-wrap .cmp-mini-map').forEach(el => {
+                if (!keep.has(el)) el.classList.remove('visible');
+            });
+        }
+
         function _clearPerPaneMinimaps() {
             document.querySelectorAll('.cmp-mini-map').forEach(el => el.classList.remove('visible'));
         }
@@ -42853,13 +44044,22 @@
          *  getBoundingClientRect so CSS centering + existing pan translate
          *  are both captured without having to reason about them manually.
          *  Returns null when the canvas hasn't laid out yet. */
-        function _captureZoomAnchor(clientX, clientY) {
-            const r = canvas.getBoundingClientRect();
+        function _usesQmriPaneZoom(cvs) {
+            return !!cvs && qmriActive && !qmriMosaicActive && !qmriMvActive
+                && qmriViews.some(v => v.canvas === cvs);
+        }
+        function _zoomPanForCanvas(cvs) {
+            return _usesQmriPaneZoom(cvs) ? qvPan : mainPan;
+        }
+        function _captureZoomAnchor(clientX, clientY, targetCanvas = canvas) {
+            const r = targetCanvas.getBoundingClientRect();
             if (!r.width || !r.height) return null;
             return {
                 clientX, clientY,
                 fracX: Math.max(0, Math.min(1, (clientX - r.left) / r.width)),
                 fracY: Math.max(0, Math.min(1, (clientY - r.top)  / r.height)),
+                canvas: targetCanvas,
+                pan: _zoomPanForCanvas(targetCanvas),
             };
         }
         /** After userZoom has been applied (scaleAll), shift pan so the
@@ -42868,14 +44068,14 @@
          *  pan translates in the same coordinate system. */
         function _applyZoomAnchor(anchor) {
             if (!anchor) return;
-            const r = canvas.getBoundingClientRect();
+            const r = anchor.canvas.getBoundingClientRect();
             if (!r.width || !r.height) return;
             const currentX = r.left + anchor.fracX * r.width;
             const currentY = r.top  + anchor.fracY * r.height;
-            mainPan.x += anchor.clientX - currentX;
-            mainPan.y += anchor.clientY - currentY;
-            mainPan.clamp();
-            mainPan.apply();
+            anchor.pan.x += anchor.clientX - currentX;
+            anchor.pan.y += anchor.clientY - currentY;
+            anchor.pan.clamp();
+            anchor.pan.apply();
         }
         function _reconcileZoomCursor() {
             const normalNavigationOwnsCursor = !compareActive && !multiViewActive && !qmriActive
@@ -42884,7 +44084,7 @@
                 && !document.body.classList.contains('ruler-mode')
                 && !mainPan.dragging;
             if (normalNavigationOwnsCursor) {
-                canvas.style.cursor = mainPan.overflows ? 'grab' : '';
+                canvas.style.cursor = _pixelInfoVisible ? 'crosshair' : (mainPan.overflows ? 'grab' : '');
             }
             _reconcileInfoCursor();
         }
@@ -42893,7 +44093,7 @@
                 _pinchDist0 = _pinchDist(e.touches);
                 _pinchZoom0 = userZoom;
                 const c = _pinchCentroid(e.touches);
-                _pinchAnchor = _captureZoomAnchor(c.x, c.y);
+                _pinchAnchor = _captureZoomAnchor(c.x, c.y, e.currentTarget);
                 e.preventDefault();
             }
         }
@@ -42902,7 +44102,8 @@
                 e.preventDefault();
                 const d = _pinchDist(e.touches);
                 // Direct ratio — touch events are smoothly sampled, no dampening needed
-                userZoom = Math.max(0.1, Math.min(10, _pinchZoom0 * (d / _pinchDist0)));
+                const floorZoom = _usesQmriPaneZoom(e.currentTarget) ? 1.0 : 0.1;
+                userZoom = Math.max(floorZoom, Math.min(10, _pinchZoom0 * (d / _pinchDist0)));
                 _zoomAdjustedByUser = true;
                 ModeRegistry.scaleAll();
                 _applyZoomAnchor(_pinchAnchor);
@@ -42914,11 +44115,15 @@
                 saveState();
             }
         }
-        [canvas, ...compareCanvases].forEach(el => {
+        function _attachPinchHandlers(el) {
             el.addEventListener('touchstart', _onTouchStart, { passive: false });
             el.addEventListener('touchmove',  _onTouchMove,  { passive: false });
             el.addEventListener('touchend',   _onTouchEnd,   { passive: false });
-        });
+            el.addEventListener('gesturestart', _onGestureStart, { passive: false });
+            el.addEventListener('gesturechange', _onGestureChange, { passive: false });
+            el.addEventListener('gestureend', _onGestureEnd, { passive: false });
+        }
+        [canvas, ...compareCanvases].forEach(_attachPinchHandlers);
 
         // ── 9b. Safari pinch-to-zoom (GestureEvent) ─────────────────────
         let _gestureStartZoom = null;
@@ -42926,12 +44131,13 @@
         function _onGestureStart(e) {
             e.preventDefault();
             _gestureStartZoom = userZoom;
-            _gestureAnchor = _captureZoomAnchor(e.clientX, e.clientY);
+            _gestureAnchor = _captureZoomAnchor(e.clientX, e.clientY, e.currentTarget);
         }
         function _onGestureChange(e) {
             e.preventDefault();
             // e.scale is cumulative from gesturestart — multiply against cached start
-            userZoom = Math.max(_normalFitZoom, Math.min(10.0, _gestureStartZoom * e.scale));
+            const floorZoom = _usesQmriPaneZoom(e.currentTarget) ? 1.0 : _normalFitZoom;
+            userZoom = Math.max(floorZoom, Math.min(10.0, _gestureStartZoom * e.scale));
             _zoomAdjustedByUser = true;
             ModeRegistry.scaleAll();
             _applyZoomAnchor(_gestureAnchor);
@@ -42942,12 +44148,6 @@
             _gestureAnchor = null;
             saveState();
         }
-        [canvas, ...compareCanvases].forEach(el => {
-            el.addEventListener('gesturestart',  _onGestureStart,  { passive: false });
-            el.addEventListener('gesturechange', _onGestureChange, { passive: false });
-            el.addEventListener('gestureend',    _onGestureEnd,    { passive: false });
-        });
-
         // Track mouse-over center pane (diff / wipe) for 'c' colormap cycling
         ['compare-diff-pane', 'compare-wipe-pane'].forEach(id => {
             const el = document.getElementById(id);