@bongos/core 1.17.0

package/modules/hall-ui/public/copy-on-click.js

@@ -0,0 +1,174 @@
+// Click-to-copy for the builders' hall — task #519.
+//
+// Clicking any pasteable command or code on a /builders page copies it to the
+// clipboard. Loaded by every hall page (index, primer, diagrams). It is
+// deliberately SELF-CONTAINED: primer.html and diagrams.html don't load
+// builders.js, so this module ships its own copy logic + toast and depends on
+// nothing else. Read-only on the wire — pure clipboard, no server calls.
+//
+// What's copyable, in priority order:
+//   1. Block units — <pre>, the welcome panel's `.welcome__paste` one-liner,
+//      and anything tagged `[data-copy]`. Clicking ANYWHERE inside one copies
+//      the WHOLE unit (so the "Clone … into this folder" line copies entire,
+//      even when you click the URL chip nested inside it).
+//   2. Inline chips — <code> (includes `.welcome__cmd`) and <kbd>. Copies just
+//      that token (e.g. `/builder-start`).
+// Clicks meant for a real link or button inside code are left alone.
+(function () {
+  'use strict';
+
+  var BLOCK_SEL  = 'pre, .welcome__paste, [data-copy]';
+  var INLINE_SEL = 'code, kbd';
+  var ANY_SEL    = BLOCK_SEL + ', ' + INLINE_SEL;
+
+  // Resolve the click/keypress target to the element whose text we copy, or
+  // null if this interaction isn't a copy. A block unit wins over a nested
+  // inline chip; an interactive ancestor (link/button) that wraps the code
+  // means "let the real control handle it", so we bail.
+  function resolveCopyTarget(node) {
+    if (!node || !node.closest) return null;
+    // Defer only to GENUINE controls (links, buttons, summaries) — NOT the
+    // role="button" we add to copyables ourselves for accessibility, which
+    // would otherwise suppress the very copy we want.
+    var CTRL_SEL = 'a[href], button, summary';
+    var block = node.closest(BLOCK_SEL);
+    if (block) {
+      // A real link/button sitting between the click and the block → not ours.
+      var innerCtrl = node.closest(CTRL_SEL);
+      if (innerCtrl && block.contains(innerCtrl) && innerCtrl !== block) return null;
+      return block;
+    }
+    var inline = node.closest(INLINE_SEL);
+    if (!inline) return null;
+    if (inline.closest(CTRL_SEL)) return null;
+    return inline;
+  }
+
+  function textOf(el) {
+    // innerText preserves <pre> line breaks; strip trailing whitespace only.
+    return (el.innerText || el.textContent || '').replace(/\s+$/, '');
+  }
+
+  function writeClipboard(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText && window.isSecureContext) {
+      return navigator.clipboard.writeText(text).then(function () { return true; },
+                                                       function () { return legacyCopy(text); });
+    }
+    return Promise.resolve(legacyCopy(text));
+  }
+
+  // Fallback for insecure contexts / older browsers without the async API.
+  function legacyCopy(text) {
+    try {
+      var ta = document.createElement('textarea');
+      ta.value = text;
+      ta.setAttribute('readonly', '');
+      ta.style.position = 'fixed';
+      ta.style.top = '-1000px';
+      ta.style.opacity = '0';
+      document.body.appendChild(ta);
+      ta.select();
+      var ok = document.execCommand('copy');
+      document.body.removeChild(ta);
+      return ok;
+    } catch (_) { return false; }
+  }
+
+  // --- toast (own element so it works on pages without builders.js) ---
+  var toastEl = null, toastTimer = null;
+  function toast(msg) {
+    if (!toastEl) {
+      toastEl = document.getElementById('copy-toast');
+      if (!toastEl) {
+        toastEl = document.createElement('div');
+        toastEl.id = 'copy-toast';
+        toastEl.setAttribute('role', 'status');
+        toastEl.setAttribute('aria-live', 'polite');
+        document.body.appendChild(toastEl);
+      }
+    }
+    toastEl.textContent = msg;
+    toastEl.dataset.visible = '1';
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(function () { toastEl.dataset.visible = '0'; }, 1800);
+  }
+
+  function flash(el) {
+    el.dataset.copied = '1';
+    setTimeout(function () { delete el.dataset.copied; }, 900);
+  }
+
+  function doCopy(el) {
+    var text = textOf(el);
+    if (!text) return;
+    writeClipboard(text).then(function (ok) {
+      if (ok) {
+        flash(el);
+        var preview = text.length > 52 ? text.slice(0, 49) + '…' : text;
+        toast('Copied: ' + preview);
+      } else {
+        toast('Could not copy — select the text and copy it manually.');
+      }
+    });
+  }
+
+  // Delegated handlers — one pair for the whole document, so dynamically
+  // rendered content (the welcome panel, the primer markdown) is covered with
+  // no re-binding.
+  document.addEventListener('click', function (e) {
+    var el = resolveCopyTarget(e.target);
+    if (el) doCopy(el);
+  });
+  document.addEventListener('keydown', function (e) {
+    if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'Spacebar') return;
+    // Only act when the focused element is itself the copy target (a tab-stop
+    // we added below) — don't swallow space/enter elsewhere.
+    var el = resolveCopyTarget(e.target);
+    if (el && el === e.target) { e.preventDefault(); doCopy(el); }
+  });
+
+  // Decoration: title hint for discoverability on every copyable, plus a tab
+  // stop on the PRIMARY surfaces (blocks + command chips) so keyboard users
+  // can reach them — without flooding the tab order with every inline <code>
+  // token in the primer prose.
+  function decorate(el) {
+    if (!el || el.dataset.copyReady) return;
+    el.dataset.copyReady = '1';
+    if (!el.title) el.title = 'Click to copy';
+    var primary = el.matches(BLOCK_SEL) || (el.classList && el.classList.contains('welcome__cmd'));
+    if (primary && !el.hasAttribute('tabindex')) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      el.setAttribute('aria-label', 'Copy to clipboard');
+    }
+  }
+  function decorateAll(root) {
+    var scope = root && root.querySelectorAll ? root : document;
+    scope.querySelectorAll(ANY_SEL).forEach(decorate);
+  }
+
+  function init() {
+    decorateAll(document);
+    // Catch content rendered after load (welcome panel, primer markdown).
+    if (window.MutationObserver) {
+      var obs = new MutationObserver(function (muts) {
+        for (var i = 0; i < muts.length; i++) {
+          var added = muts[i].addedNodes;
+          for (var j = 0; j < added.length; j++) {
+            var n = added[j];
+            if (n.nodeType !== 1) continue;
+            if (n.matches && n.matches(ANY_SEL)) decorate(n);
+            if (n.querySelectorAll) n.querySelectorAll(ANY_SEL).forEach(decorate);
+          }
+        }
+      });
+      obs.observe(document.body, { childList: true, subtree: true });
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/modules/hall-ui/public/diagram-viewer.css

@@ -0,0 +1,125 @@
+/* diagram-viewer.css — pannable / zoomable canvas for the onboarding diagrams
+   (task 1059). Replaces the static PNG click-to-zoom lightbox on
+   /builders/diagrams and the primer: each diagram's vector SVG loads inline
+   into a canvas you DRAG to pan and SCROLL to zoom (Figma-style), with a
+   toolbar and a fullscreen mode. Themed via the shared design tokens from
+   style.css (with neutral fallbacks). */
+
+.dgv {
+  position: relative;
+  margin: 0 auto;
+  background: var(--surface, #fff);
+  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
+  border-radius: var(--radius-sm, 8px);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+
+/* The clipping viewport — fixed height inline so the diagram reads as a
+   contained canvas, not an overflowing image. */
+.dgv__stage {
+  position: relative;
+  width: 100%;
+  height: clamp(320px, 60vh, 660px);
+  overflow: hidden;
+  /* faint dotted "drawing board" texture, like a design tool */
+  background:
+    radial-gradient(circle at center, color-mix(in srgb, var(--ink, #000) 5%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
+    var(--surface, #fff);
+  cursor: grab;
+  /* Inline: allow vertical page scroll through the canvas (touch) so the reader
+     is never trapped scrolling past a diagram; a mouse drag still pans and a
+     two-finger pinch still zooms. Fullscreen takes over fully (below). */
+  touch-action: pan-y;
+  outline: none;
+}
+.dgv.is-fullscreen .dgv__stage { touch-action: none; }
+.dgv__stage.is-panning { cursor: grabbing; }
+.dgv__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--accent, #4f63e7); }
+
+/* The transform layer — translate()+scale() is set here by the script. */
+.dgv__pan {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+  will-change: transform;
+}
+.dgv__pan.is-smooth { transition: transform 0.16s ease-out; } /* button zoom / fit only */
+.dgv__pan svg { display: block; }
+
+/* Floating control bar — bottom-right of the canvas. */
+.dgv__toolbar {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
+  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
+  border-radius: var(--radius-sm, 8px);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+  user-select: none;
+}
+.dgv__btn {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 0;
+  background: transparent;
+  font: 600 14px/1 var(--font-body, system-ui, sans-serif);
+  color: var(--ink, #2a2a2a);
+  min-width: 30px;
+  height: 30px;
+  padding: 0 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.dgv__btn:hover { background: color-mix(in srgb, var(--ink, #000) 7%, transparent); }
+.dgv__btn:focus-visible { outline: 2px solid var(--accent, #4f63e7); outline-offset: 1px; }
+.dgv__btn--wide { min-width: 56px; font-variant-numeric: tabular-nums; }
+.dgv__sep { width: 1px; height: 18px; background: var(--border, rgba(0, 0, 0, 0.12)); margin: 0 3px; }
+
+/* Hint pill — top-left; fades the moment the reader interacts. */
+.dgv__hint {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  font: 500 11px/1 var(--font-body, system-ui, sans-serif);
+  letter-spacing: 0.04em;
+  color: var(--ink-soft, #555);
+  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
+  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
+  border-radius: 999px;
+  padding: 5px 10px;
+  pointer-events: none;
+  transition: opacity 0.4s ease;
+}
+.dgv.is-touched .dgv__hint { opacity: 0; }
+
+/* Fullscreen — promote the whole .dgv to a fixed overlay. */
+.dgv.is-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: color-mix(in srgb, var(--ink, #1a1d23) 96%, transparent);
+}
+.dgv.is-fullscreen .dgv__stage {
+  height: 100vh;
+  height: 100dvh;
+  background-color: var(--surface, #fff);
+}
+body.dgv-fullscreen-open { overflow: hidden; }
+
+@media (prefers-reduced-motion: reduce) {
+  .dgv__pan.is-smooth { transition: none; }
+}

package/modules/hall-ui/public/diagram-viewer.js

@@ -0,0 +1,330 @@
+// diagram-viewer.js — pannable / zoomable canvas for the onboarding diagrams
+// (task 1059). Replaces the static PNG click-to-zoom lightbox on
+// /builders/diagrams and the Citizen's Primer. Each diagram's vector SVG is
+// loaded inline and shown in a canvas you DRAG to pan and SCROLL to zoom
+// (Figma-style), with a toolbar (− / zoom% / + / Fit / Fullscreen),
+// double-click-to-zoom, pinch on touch, and keyboard control. No dependencies,
+// no build step.
+//
+// Progressive enhancement: it upgrades the same images the old lightbox did
+// (figure.diagram img, figure.primer-figure img). Each diagram's vector .svg
+// URL is derived from the <img> .png src; if the SVG can't be fetched the PNG
+// is left in place (static, exactly as before — graceful degradation). primer.js
+// injects its figures asynchronously, so a MutationObserver upgrades late
+// arrivals too. A single delegated Esc handler exits fullscreen from anywhere.
+
+(() => {
+  'use strict';
+
+  const SELECTOR = 'figure.diagram img, figure.primer-figure img';
+  const MIN_SCALE = 0.1;
+  const MAX_SCALE = 8;
+  const ZOOM_STEP = 1.25; // button / keyboard zoom factor
+  const FIT_PAD = 28; // px of breathing room around a fitted diagram
+
+  const viewers = [];
+  let uid = 0;
+  let fullscreen = null; // the ctx currently in fullscreen, or null
+
+  // ---- tiny helpers -----------------------------------------------------
+  function el(tag, cls) {
+    const n = document.createElement(tag);
+    if (cls) n.className = cls;
+    return n;
+  }
+  function clamp(s) { return Math.max(MIN_SCALE, Math.min(MAX_SCALE, s)); }
+  function captionFor(img) {
+    const fig = img.closest('figure');
+    const cap = fig && fig.querySelector('figcaption');
+    return (cap && cap.textContent.trim()) || img.alt || '';
+  }
+  function debounce(fn, ms) {
+    let t;
+    return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); };
+  }
+
+  // ---- per-viewer construction ------------------------------------------
+  async function enhance(img) {
+    if (!img || img.dataset.dgv) return; // 'pending' set synchronously below → re-entry safe
+    img.dataset.dgv = 'pending';
+    const src = img.currentSrc || img.src || '';
+    const svgUrl = src.replace(/\.png(\?.*)?$/i, '.svg');
+    if (!/\.svg(\?.*)?$/i.test(svgUrl)) { img.dataset.dgv = 'skip'; return; }
+
+    let text;
+    try {
+      const r = await fetch(svgUrl, { credentials: 'same-origin' });
+      if (!r.ok) throw new Error('HTTP ' + r.status);
+      text = await r.text();
+    } catch (_) {
+      img.dataset.dgv = 'fallback'; // keep the PNG visible, non-interactive
+      return;
+    }
+
+    // Namespace the SVG's ids. mermaid-cli emits id="my-svg" PLUS #my-svg style
+    // selectors PLUS url(#my-svg_...) arrowhead markers for EVERY diagram, so
+    // multiple inline diagrams on one page (the diagrams index has five) would
+    // collide. One token rewrite keeps the id, its styles, and its marker refs
+    // mutually consistent while making them unique. ("my-svg" never appears in
+    // the diagrams' label text, so this is safe.)
+    const ns = 'dgv-svg-' + (++uid);
+    text = text.replace(/my-svg/g, ns);
+
+    const doc = new DOMParser().parseFromString(text, 'image/svg+xml');
+    const parsed = doc.querySelector('svg');
+    if (!parsed || doc.querySelector('parsererror')) { img.dataset.dgv = 'fallback'; return; }
+
+    // Intrinsic size from the viewBox (mermaid always emits one). We do the
+    // scaling, so strip mermaid's responsive width/max-width and lay the SVG out
+    // at its natural pixel size inside the transform layer.
+    const vb = (parsed.getAttribute('viewBox') || '0 0 800 600').split(/[\s,]+/).map(Number);
+    const natW = vb[2] || 800;
+    const natH = vb[3] || 600;
+    parsed.style.maxWidth = 'none';
+    parsed.setAttribute('width', natW);
+    parsed.setAttribute('height', natH);
+    parsed.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+
+    buildViewer(img, document.importNode(parsed, true), natW, natH);
+    img.dataset.dgv = 'on';
+  }
+
+  function buildToolbar() {
+    const bar = el('div', 'dgv__toolbar');
+    // − = minus sign, ⤢ = NE-SW diagonal arrow (fullscreen glyph)
+    bar.innerHTML =
+      '<button class="dgv__btn" data-act="out" type="button" aria-label="Zoom out" title="Zoom out">−</button>' +
+      '<button class="dgv__btn dgv__btn--wide" data-act="reset" type="button" aria-label="Reset zoom to fit" title="Fit to view">100%</button>' +
+      '<button class="dgv__btn" data-act="in" type="button" aria-label="Zoom in" title="Zoom in">+</button>' +
+      '<span class="dgv__sep" aria-hidden="true"></span>' +
+      '<button class="dgv__btn" data-act="fit" type="button" aria-label="Fit to view" title="Fit">Fit</button>' +
+      '<button class="dgv__btn" data-act="full" type="button" aria-label="Toggle fullscreen" title="Fullscreen">⤢</button>';
+    return bar;
+  }
+
+  function buildViewer(img, svg, natW, natH) {
+    const caption = captionFor(img);
+    const dgv = el('div', 'dgv');
+    const stage = el('div', 'dgv__stage');
+    stage.tabIndex = 0;
+    // 'group' (not 'img') — the canvas is focusable + keyboard-operable, so it
+    // must not announce as a static image. aria-roledescription names the
+    // widget; the injected SVG keeps its own role="graphics-document".
+    stage.setAttribute('role', 'group');
+    stage.setAttribute('aria-roledescription', 'pan and zoom diagram');
+    stage.setAttribute('aria-label', (img.alt || caption || 'diagram') + ' — drag to pan, ⌘/ctrl + scroll to zoom, arrow keys to move, +/− to zoom, or use the toolbar to fit and open fullscreen');
+    const pan = el('div', 'dgv__pan');
+    pan.appendChild(svg);
+    stage.appendChild(pan);
+
+    const hint = el('div', 'dgv__hint');
+    hint.textContent = 'drag to pan · ⌘/ctrl + scroll to zoom · ⤢ fullscreen';
+    const toolbar = buildToolbar();
+
+    dgv.append(stage, hint, toolbar);
+    // Swap the viewer in for the <img>; keep the <img> hidden in the DOM as a
+    // fallback reference (and so re-running enhance() finds it already handled).
+    img.style.display = 'none';
+    img.parentNode.insertBefore(dgv, img);
+
+    const ctx = {
+      dgv, stage, pan, toolbar,
+      st: { scale: 1, tx: 0, ty: 0, natW, natH, fitScale: 1, userZoomed: false },
+    };
+    viewers.push(ctx);
+    wire(ctx);
+    requestAnimationFrame(() => fit(ctx)); // fit once the stage has a measured size
+  }
+
+  // ---- transform application -------------------------------------------
+  function apply(ctx, smooth) {
+    const { pan, st, toolbar } = ctx;
+    pan.classList.toggle('is-smooth', !!smooth);
+    pan.style.transform = 'translate(' + st.tx + 'px,' + st.ty + 'px) scale(' + st.scale + ')';
+    const lbl = toolbar.querySelector('[data-act="reset"]');
+    if (lbl) lbl.textContent = Math.round(st.scale * 100) + '%';
+  }
+
+  function fit(ctx) {
+    const { stage, st } = ctx;
+    const sw = stage.clientWidth;
+    const sh = stage.clientHeight;
+    if (!sw || !sh) return;
+    const s = Math.min((sw - FIT_PAD) / st.natW, (sh - FIT_PAD) / st.natH);
+    st.fitScale = s;
+    st.scale = clamp(s);
+    st.tx = (sw - st.natW * st.scale) / 2;
+    st.ty = (sh - st.natH * st.scale) / 2;
+    st.userZoomed = false;
+    apply(ctx, true);
+  }
+
+  // Zoom to `target` scale, keeping the content point under (px,py) — both in
+  // stage-local pixels — fixed on screen.
+  function zoomTo(ctx, target, px, py, smooth) {
+    const { st } = ctx;
+    const ns = clamp(target);
+    const cx = (px - st.tx) / st.scale;
+    const cy = (py - st.ty) / st.scale;
+    st.scale = ns;
+    st.tx = px - cx * ns;
+    st.ty = py - cy * ns;
+    st.userZoomed = true;
+    apply(ctx, smooth);
+  }
+
+  function touched(ctx) { ctx.dgv.classList.add('is-touched'); }
+
+  function toggleFullscreen(ctx) {
+    const on = ctx.dgv.classList.toggle('is-fullscreen');
+    document.body.classList.toggle('dgv-fullscreen-open', on);
+    fullscreen = on ? ctx : null;
+    const b = ctx.toolbar.querySelector('[data-act="full"]');
+    if (b) b.title = on ? 'Exit fullscreen (Esc)' : 'Fullscreen';
+    // Re-fit to the new stage size, then keep keyboard focus on the canvas.
+    requestAnimationFrame(() => { fit(ctx); if (on) ctx.stage.focus(); });
+  }
+
+  // ---- event wiring -----------------------------------------------------
+  function wire(ctx) {
+    const { stage, st, toolbar } = ctx;
+
+    // Wheel = zoom toward the cursor (exp curve → smooth on a trackpad).
+    // Inline, we only zoom when a modifier is held (⌘/ctrl) so a plain scroll
+    // passes through to the page — no scroll-trap. Fullscreen always zooms.
+    stage.addEventListener('wheel', (e) => {
+      const fs = ctx.dgv.classList.contains('is-fullscreen');
+      if (!fs && !(e.ctrlKey || e.metaKey)) return; // let the page scroll
+      e.preventDefault();
+      touched(ctx);
+      const rect = stage.getBoundingClientRect();
+      const factor = Math.exp(-e.deltaY * 0.0015);
+      zoomTo(ctx, st.scale * factor, e.clientX - rect.left, e.clientY - rect.top, false);
+    }, { passive: false });
+
+    // Pointer drag (1 finger / mouse) + pinch (2 fingers).
+    const pts = new Map();
+    let pinchPrev = null;
+    function pinchState() {
+      const a = [...pts.values()];
+      const dx = a[0].x - a[1].x;
+      const dy = a[0].y - a[1].y;
+      return { dist: Math.hypot(dx, dy) || 1, cx: (a[0].x + a[1].x) / 2, cy: (a[0].y + a[1].y) / 2 };
+    }
+    // A single touch finger inline must NOT be hijacked for panning — the page
+    // needs to scroll through (touch-action: pan-y). So we only capture + pan a
+    // lone touch pointer in fullscreen; a mouse drag pans anywhere, and a
+    // two-finger pinch is always ours.
+    const ownsSinglePointer = (e) =>
+      e.pointerType !== 'touch' || ctx.dgv.classList.contains('is-fullscreen');
+    stage.addEventListener('pointerdown', (e) => {
+      pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      const single = pts.size === 1;
+      if (!single || ownsSinglePointer(e)) {
+        try { stage.setPointerCapture(e.pointerId); } catch (_) { /* not capturable */ }
+      }
+      if (single && ownsSinglePointer(e)) stage.classList.add('is-panning');
+      if (pts.size === 2) pinchPrev = pinchState();
+      touched(ctx);
+    });
+    stage.addEventListener('pointermove', (e) => {
+      if (!pts.has(e.pointerId)) return;
+      const prev = pts.get(e.pointerId);
+      pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      if (pts.size === 1) {
+        if (!ownsSinglePointer(e)) return; // inline touch → let the page scroll
+        st.tx += e.clientX - prev.x;
+        st.ty += e.clientY - prev.y;
+        st.userZoomed = true;
+        apply(ctx, false);
+      } else if (pts.size === 2 && pinchPrev) {
+        const cur = pinchState();
+        const rect = stage.getBoundingClientRect();
+        zoomTo(ctx, st.scale * (cur.dist / pinchPrev.dist), cur.cx - rect.left, cur.cy - rect.top, false);
+        pinchPrev = cur;
+      }
+    });
+    function endPtr(e) {
+      if (pts.has(e.pointerId)) pts.delete(e.pointerId);
+      if (pts.size < 2) pinchPrev = null;
+      if (pts.size === 0) stage.classList.remove('is-panning');
+    }
+    stage.addEventListener('pointerup', endPtr);
+    stage.addEventListener('pointercancel', endPtr);
+
+    // Double-click = zoom in toward the point.
+    stage.addEventListener('dblclick', (e) => {
+      e.preventDefault();
+      const rect = stage.getBoundingClientRect();
+      zoomTo(ctx, st.scale * 1.8, e.clientX - rect.left, e.clientY - rect.top, true);
+      touched(ctx);
+    });
+
+    // Toolbar.
+    toolbar.addEventListener('click', (e) => {
+      const b = e.target.closest('[data-act]');
+      if (!b) return;
+      const rect = stage.getBoundingClientRect();
+      const cx = rect.width / 2;
+      const cy = rect.height / 2;
+      switch (b.dataset.act) {
+        case 'in': zoomTo(ctx, st.scale * ZOOM_STEP, cx, cy, true); break;
+        case 'out': zoomTo(ctx, st.scale / ZOOM_STEP, cx, cy, true); break;
+        case 'fit':
+        case 'reset': fit(ctx); break;
+        case 'full': toggleFullscreen(ctx); break;
+        default: return;
+      }
+      touched(ctx);
+    });
+
+    // Keyboard (when the canvas is focused).
+    stage.addEventListener('keydown', (e) => {
+      const rect = stage.getBoundingClientRect();
+      const cx = rect.width / 2;
+      const cy = rect.height / 2;
+      const PAN = 60;
+      switch (e.key) {
+        case '+': case '=': zoomTo(ctx, st.scale * ZOOM_STEP, cx, cy, true); break;
+        case '-': case '_': zoomTo(ctx, st.scale / ZOOM_STEP, cx, cy, true); break;
+        case '0': fit(ctx); break;
+        case 'ArrowUp': st.ty += PAN; st.userZoomed = true; apply(ctx, true); break;
+        case 'ArrowDown': st.ty -= PAN; st.userZoomed = true; apply(ctx, true); break;
+        case 'ArrowLeft': st.tx += PAN; st.userZoomed = true; apply(ctx, true); break;
+        case 'ArrowRight': st.tx -= PAN; st.userZoomed = true; apply(ctx, true); break;
+        case 'f': case 'F': toggleFullscreen(ctx); break;
+        default: return;
+      }
+      e.preventDefault();
+      touched(ctx);
+    });
+  }
+
+  // ---- boot -------------------------------------------------------------
+  function scan() { document.querySelectorAll(SELECTOR).forEach(enhance); }
+
+  function init() {
+    scan();
+    // primer.js injects its diagram figures after fetching + rendering markdown.
+    if ('MutationObserver' in window) {
+      new MutationObserver(scan).observe(document.body, { childList: true, subtree: true });
+    }
+    // Esc exits fullscreen from anywhere.
+    document.addEventListener('keydown', (e) => {
+      if ((e.key === 'Escape' || e.key === 'Esc') && fullscreen) toggleFullscreen(fullscreen);
+    });
+    // Re-fit on resize: the fullscreen viewer always, and any inline viewer the
+    // reader hasn't manually zoomed/panned (so they stay responsive).
+    window.addEventListener('resize', debounce(() => {
+      for (const ctx of viewers) {
+        if (ctx.dgv.classList.contains('is-fullscreen') || !ctx.st.userZoomed) fit(ctx);
+      }
+    }, 150), { passive: true });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();