@songsid/agend 2.3.0-beta.9 → 2.3.0

package/dist/ui/fleet-traffic.js

@@ -178,8 +178,17 @@ function endOf(L, name) {
 
 // ── Routing: lanes the layout keeps empty ──
 
-/** A side lane's offset from the middle of the box's padding: at least 6 px from the box's border and from its cards. */
-const laneOffset = (o) => Math.max(-OC.PAD / 2 + 6, Math.min(OC.PAD / 2 - 6, o * 0.5));
+/**
+ * A side lane's offset from the middle of the box's padding: at least 6 px from the box's border and from its cards.
+ * Negative: toward the border, on either side (#2329) — the first lines (o < 0) leave the cards a long last run for a head.
+ */
+const laneOffset = (o, PAD = OC.PAD) => Math.max(-PAD / 2 + 6, Math.min(PAD / 2 - 6, o * 0.5));
+const leftLaneOf = (b, io, PAD) => b.x + PAD / 2 + io;
+const rightLaneOf = (b, io, PAD) => b.x + b.w - PAD / 2 - io;
+/** Where a line meets a card's side, from the side's middle (#2329): its full offset, a head's width from its neighbours. */
+const sideOffset = (o) => Math.max(-OC.NH / 2 + 7, Math.min(OC.NH / 2 - 7, o));
+/** The layout's own box padding and gutter (a phone's are narrower). */
+const spacing = (L) => ({ PAD: L.pad ?? OC.PAD, GAP: L.gap ?? OC.GAP });
 
 const firstBusOf = (L) => Math.min(...L.boxes.map((b) => b.busY));
 /** From an end up to its row's bus lane: the points, and the lane's y. `o` spreads lines sharing a lane. */
@@ -194,17 +203,17 @@ function outward(L, end, o) {
     const x = b.x + b.w / 2 + o * 1.5;
     return { pts: [{ x, y: b.y }, { x, y: b.busY + o }], bus: b.busY + o };
   }
-  const { PAD, GAP, NW, NH } = OC;
+  const { NW, NH } = OC, { PAD, GAP } = spacing(L);
   const card = end.c, col = end.i % b.cols, rowI = Math.floor(end.i / b.cols), lines = Math.ceil(b.cells.length / b.cols);
-  const io = laneOffset(o);
-  const leftLane = b.x + PAD / 2 + io, rightLane = b.x + b.w - PAD / 2 + io;
+  const io = laneOffset(o, PAD);
+  const leftLane = leftLaneOf(b, io, PAD), rightLane = rightLaneOf(b, io, PAD);
   let pts;
   if (col === 0 || col === b.cols - 1) {
-    const left = col === 0, lane = left ? leftLane : rightLane, cy = card.y + NH / 2 + io;
+    const left = col === 0, lane = left ? leftLane : rightLane, cy = card.y + NH / 2 + sideOffset(o);
     pts = [{ x: left ? card.x : card.x + NW, y: cy }, { x: lane, y: cy }, { x: lane, y: b.y }];
   } else {
     // A middle column: down into the gutter below its row, across to the nearer side lane.
-    const gy = card.y + NH + (rowI === lines - 1 ? PAD : GAP) / 2 + io / 2, cx = card.x + NW / 2 + o;
+    const gy = card.y + NH + (rowI === lines - 1 ? PAD : GAP) / 2 - io / 2, cx = card.x + NW / 2 + o;
     const lane = cx - b.x < b.w / 2 ? leftLane : rightLane;
     pts = [{ x: cx, y: card.y + NH }, { x: cx, y: gy }, { x: lane, y: gy }, { x: lane, y: b.y }];
   }
@@ -217,23 +226,23 @@ function outward(L, end, o) {
  * else down into the gutter under its row (no card is there) and across. The last point is on the lane.
  */
 function toLane(L, end, lane, o) {
-  const { PAD, GAP, NW, NH } = OC;
+  const { NW, NH } = OC, { PAD, GAP } = spacing(L);
   const b = end.b, card = end.c, col = end.i % b.cols, rowI = Math.floor(end.i / b.cols), lines = Math.ceil(b.cells.length / b.cols);
-  const io = laneOffset(o);
+  const io = laneOffset(o, PAD);
   const left = lane < b.x + b.w / 2;
   if ((left && col === 0) || (!left && col === b.cols - 1)) {
-    const cy = card.y + NH / 2 + io;
+    const cy = card.y + NH / 2 + sideOffset(o);
     return [{ x: left ? card.x : card.x + NW, y: cy }, { x: lane, y: cy }];
   }
-  const gy = card.y + NH + (rowI === lines - 1 ? PAD : GAP) / 2 + io / 2, cx = card.x + NW / 2 + o;
+  const gy = card.y + NH + (rowI === lines - 1 ? PAD : GAP) / 2 - io / 2, cx = card.x + NW / 2 + o;
   return [{ x: cx, y: card.y + NH }, { x: cx, y: gy }, { x: lane, y: gy }];
 }
 /** Two cards in one open box: joined inside it, through the side lane nearer to them both (never out to the bus). */
 function inBox(L, a, z, o) {
-  const b = a.b, { PAD } = OC;
-  const io = laneOffset(o);
+  const b = a.b, { PAD } = spacing(L);
+  const io = laneOffset(o, PAD);
   const mid = ((a.i % b.cols) + (z.i % b.cols)) / 2;
-  const lane = mid <= (b.cols - 1) / 2 ? b.x + PAD / 2 + io : b.x + b.w - PAD / 2 + io;
+  const lane = mid <= (b.cols - 1) / 2 ? leftLaneOf(b, io, PAD) : rightLaneOf(b, io, PAD);
   return [...toLane(L, a, lane, o), ...toLane(L, z, lane, o).reverse()];
 }
 /** Two of General's cards: under them, through the gap above the first row (or the canvas's empty space below). */
@@ -278,6 +287,42 @@ export function badgeAt(pts) {
   return best;
 }
 
+// ── Arrowheads (#2329) ──
+
+/** A line's stroke width (px) by its kind and phase: the work's and its report's are heavier, a team pair's the most. */
+export const strokeOf = (hue, phase) => (phase === "work" || phase === "return" ? 3 : hue === "team" ? 3.5 : 2.5);
+/**
+ * The arrowhead and the ends. In stroke widths (the markers' units, fleet-canvas.js): a head LEN long and WIDE across,
+ * the line's own stroke ending BACK inside it (its round cap under the head, never out past the tip); the source dot
+ * DOT across. In px: the tip GAP short of the card, the dot's centre START off its card; a head only on a last straight
+ * run that holds it and ROOM of line before it — else the line ends GAP short with none (its dot and pulse show the way).
+ */
+export const HEAD = { LEN: 2.8, WIDE: 2.3, BACK: 1.4, DOT: 2, GAP: 3.5, START: 5, ROOM: 1 };
+/** Whether a line of stroke `w` px whose last straight run is `run` px long gets a head. */
+export const headFits = (run, w) => run >= HEAD.GAP + HEAD.LEN * w + HEAD.ROOM;
+/** An orthogonal polyline without repeated points or points in the middle of a straight run. */
+function corners(pts) {
+  const q = pts.filter((pt, i) => !i || pt.x !== pts[i - 1].x || pt.y !== pts[i - 1].y).map((pt) => ({ x: pt.x, y: pt.y }));
+  return q.filter((pt, i) => i === 0 || i === q.length - 1 || !((q[i - 1].x === pt.x && pt.x === q[i + 1].x) || (q[i - 1].y === pt.y && pt.y === q[i + 1].y)));
+}
+/** Route `pts` as drawn: its start moved `a` px along its first run, its end `b` px back along its last (each keeps 1 px). */
+export function trimEnds(pts, a, b) {
+  const q = corners(pts);
+  if (q.length < 2) return q;
+  const pull = (i, j, by) => {
+    const l = Math.hypot(q[j].x - q[i].x, q[j].y - q[i].y), t = Math.max(0, Math.min(by, l - 1)) / l;
+    q[i] = { x: q[i].x + (q[j].x - q[i].x) * t, y: q[i].y + (q[j].y - q[i].y) * t };
+  };
+  pull(0, 1, a);
+  pull(q.length - 1, q.length - 2, b);
+  return q;
+}
+/** The length of a route's last straight run. */
+export function lastRun(pts) {
+  const q = corners(pts);
+  return q.length < 2 ? 0 : Math.hypot(q[q.length - 1].x - q[q.length - 2].x, q[q.length - 1].y - q[q.length - 2].y);
+}
+
 // ── Edges ──
 
 /** The colour family of a kind: task, report, broadcast, and the rest (send, query, update). */
@@ -289,9 +334,14 @@ const settled = (phase) => (phase === "fading" || phase === "stale" ? "fading" :
 
 /**
  * The lines to draw from the store's items on layout `L`. `far`: zoomed out (one line per team pair). Each edge:
- * { key, hue, phase, n, from, to, d, pts, badge } — `from`/`to` the instance (or team) names it joins, for search.
+ * { key, hue, phase, n, from, to, d, pts, w, head, badge, a, z, routed } — `from`/`to` the instance (or team) names it
+ * joins, for search; `pts` its route, end to end (on the cards); `d` the path drawn, its ends trimmed off the cards for
+ * the dot and the head (#2329); `w` its stroke width; `head` whether it has a head (headFits);
+ * `a`/`z` its two ends (fleet-route-scene.js routes the ones on cards). `routed` (#2182): the router's points by
+ * line key (fleet-route.js); a line it has none for keeps its lane route — or, while a new answer is on its way, the
+ * points the same two ends and kind had in the last one (a line changing phase keeps its place).
  */
-export function trafficEdges(items, L, { far = false, max = MAX_EDGES } = {}) {
+export function trafficEdges(items, L, { far = false, max = MAX_EDGES, routed = null } = {}) {
   if (!L.boxes.length && L.tops.length < 2) return [];
   // A top's way out is the first row's bus: with no box there is none, so only top ↔ top lines (betweenTops) are drawn.
   const groups = new Map();
@@ -321,10 +371,23 @@ export function trafficEdges(items, L, { far = false, max = MAX_EDGES } = {}) {
     add(`${a.key}>${z.key}|${hue(it.kind)}|${phase}`, { a, z, hue: hue(it.kind), phase, n: 1, names });
   }
   const list = [...groups.entries()].sort((x, y) => RANK[x[1].phase] - RANK[y[1].phase]).slice(0, max);
+  const lent = new Set();
+  const routedBy = (key) => {
+    if (!routed || far) return null;
+    const exact = routed.get(key);
+    if (exact) return exact;
+    const kin = key.slice(0, key.lastIndexOf("|") + 1);
+    for (const [k, pts] of routed) if (k.startsWith(kin) && !groups.has(k) && !lent.has(k)) { lent.add(k); return pts; }
+    return null;
+  };
   return list.map(([key, g], i) => {
     const o = ((i % 7) - 3) * 7;                                                    // neighbours 7 px apart (within the ±22 px bus lane)
-    const pts = route(L, g.a, g.z, o);
-    return { key, hue: g.hue, phase: g.phase, n: g.n, names: [...new Set(g.names)], d: pathOf(pts), pts, badge: g.n > 1 ? badgeAt(pts) : null };
+    const viaRouter = routedBy(key);
+    const pts = viaRouter ?? route(L, g.a, g.z, o);
+    const w = strokeOf(g.hue, g.phase), head = headFits(lastRun(pts), w);
+    const d = pathOf(trimEnds(pts, HEAD.START, HEAD.GAP + (head ? HEAD.BACK * w : 0)));
+    return { key, hue: g.hue, phase: g.phase, n: g.n, names: [...new Set(g.names)], d, pts, w, head, badge: g.n > 1 ? badgeAt(pts) : null,
+      a: g.a, z: g.z, routed: !!viaRouter };
   });
 }
 

package/dist/ui/fleet-usage.js

@@ -183,6 +183,38 @@ export function zonesChanged(report) {
   return zones.length > 1 || (zones.length === 1 && zones[0] !== report.zone) ? zones : null;
 }
 
+/** Estimated pixel width of one character in the 9 px `.us-axis` label. */
+const LABEL_CHAR_W = 5.5;
+
+/**
+ * The 0-based indices of dates that should receive an x-axis label.
+ * Keeps the first (0) and last (n-1) when they are far enough apart not to
+ * overlap. When first and last are too close (n-1 < step), only the last
+ * (most recent) is shown — overlap-free takes precedence over keeping both
+ * ends. Intermediate labels are thinned so that no two consecutive shown
+ * labels are closer than `labelWidthPx` pixels apart.
+ *
+ * @param {number} n            Number of data points (dates).
+ * @param {number} slotPx       Pixels per slot (bar + gap).
+ * @param {number} labelWidthPx Estimated rendered width of one label.
+ * @returns {Set<number>}
+ */
+export function thinXLabels(n, slotPx, labelWidthPx) {
+  if (n <= 0) return new Set();
+  if (n === 1) return new Set([0]);
+  // Minimum slot steps between label centres (+ 2 px breathing room).
+  const step = Math.max(1, Math.ceil((labelWidthPx + 2) / slotPx));
+  // If first and last are too close to both be shown without overlap, keep
+  // only the last (most recent). The caller's "always first+last" contract
+  // is relaxed here: overlap-free takes precedence.
+  if (n - 1 < step) return new Set([n - 1]);
+  const idx = [0];
+  // Add intermediates that are at least `step` slots away from n-1.
+  for (let i = step; i < n - step; i += step) idx.push(i);
+  idx.push(n - 1); // always include last
+  return new Set(idx);
+}
+
 /** The trend's series: the top `TOP` agents by the measure over the range, then "others"; one value per date. */
 export function trendSeries(report, dates) {
   const priced = report.totals && report.totals.amount !== null && report.totals.amount > 0;
@@ -230,6 +262,8 @@ function Trend({ report, dates }) {
   const max = Math.max(...sums, 0) || 1;
   const what = s.priced ? tu("amount") : tu("trendTokens"), others = s.names.length > TOP;
   const label = others ? tu("trendLabel", what, TOP, dates[0], dates[dates.length - 1]) : tu("trendLabelAll", what, s.names.length, dates[0], dates[dates.length - 1]);
+  // Thin x-axis labels: "MM-DD" (5 chars) × LABEL_CHAR_W ≈ 27.5 px at 9 px sans-serif.
+  const shownLabels = thinXLabels(dates.length, slot, 5 * LABEL_CHAR_W);
   return html`<section class="us-trend card" aria-labelledby="us-trend-h">
     <h3 id="us-trend-h">${tu("trend")} <span class="note">· ${s.priced ? tu("amount") : tu("trendTokens")}</span></h3>
     <p class="note us-scale">${tu("scale", fmtMeasure(s.priced, max))}</p>
@@ -243,7 +277,7 @@ function Trend({ report, dates }) {
           const h = v[i] > 0 ? Math.max(1, ((base - top) * v[i]) / max) : 0;
           y -= h;
           return h ? html`<rect key=${k} class=${`us-s${k}`} x=${left + i * slot + 2} y=${y} width=${slot - 4} height=${h}><title>${`${date} · ${s.names[k]}: ${fmtMeasure(s.priced, v[i])}`}</title></rect>` : null;
-        })}${(dates.length - 1 - i) % 7 === 0 || dates.length <= 8 ? html`<text class="us-axis" x=${left + i * slot + slot / 2} y=${H - 6} text-anchor="middle">${date.slice(5)}</text>` : null}</g>`;
+        })}${shownLabels.has(i) ? html`<text class="us-axis us-xlabel" x=${left + i * slot + slot / 2} y=${H - 6} text-anchor="middle">${date.slice(5)}</text>` : null}</g>`;
       })}
     </svg></div>
     <${EarlierHint} wide=${wide} />
@@ -287,7 +321,7 @@ function Row({ r, group, max, measure }) {
   const meta = [r.backends.join(", "), r.models.join(", "), r.profiles.join(", ")].filter(Boolean).join(" · ");
   return html`<tr class="us-row">
     <th scope="row" class="us-name"><span class="mono">${keyText(group, r.key)}</span>
-      <svg class="us-bar" viewBox="0 0 100 6" preserveAspectRatio="none" aria-hidden="true"><rect class="us-bar-bg" width="100" height="6" rx="3" /><rect class="us-bar-fg" width=${Math.round(share * 100)} height="6" rx="3" /></svg>
+      <svg class="us-bar" aria-hidden="true"><rect class="us-bar-bg" width="100%" height="6" rx="3" /><rect class="us-bar-fg" width=${`${Math.round(share * 100)}%`} height="6" rx="3" /></svg>
       ${group !== "instance" || meta ? html`<span class="us-meta">${meta}</span>` : null}
       ${r.flags.length ? html`<span class="us-flags">${r.flags.map((f) => html`<span key=${f} class="ch-tag">${flagText(f, r)}</span>`)}</span>` : null}</th>
     <td data-label=${tu("amount")} class=${`num${r.amount === null ? " muted" : ""}`}>${amountText(r)}</td>

package/dist/ui/guest-refused.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="referrer" content="no-referrer">
+<meta name="robots" content="noindex">
+<title>AgEnD</title>
+<!--app-icon-->
+<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 64x64">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
+<!--/app-icon-->
+<script src="/assets/theme.js"></script>
+<link rel="stylesheet" href="/assets/tokens.css">
+<style>
+  /* What a guest's browser gets for a page it cannot open (#2399 smoke: it was the gate's bare JSON). The sign-in
+     page's look: the app's tokens, light and dark (theme.js before paint). */
+  * { box-sizing: border-box; }
+  body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
+         background: var(--bg); color: var(--text); font: var(--fw-regular) var(--fs-md)/var(--lh-md) var(--font-ui); -webkit-font-smoothing: antialiased; }
+  main { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 24px; }
+  .brand { margin: 0 0 18px; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
+  h1 { margin: 0 0 6px; font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
+  p { margin: 0 0 18px; color: var(--text-2); }
+  a.go { display: block; width: 100%; padding: 12px; text-align: center; text-decoration: none; font: var(--fw-semibold) var(--fs-md) var(--font-ui);
+         color: var(--on-accent); background: var(--accent-fill); border-radius: var(--r-full); }
+  a.go:hover { opacity: .88; }
+  a.go:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-dim); }
+</style>
+</head>
+<body>
+<main id="refused" data-why="__WHY__">
+  <div class="brand">AgEnD</div>
+  <h1 id="title">This page is not open to guests</h1>
+  <p id="lead">This page is for the fleet's members. As a guest you can use the chats shared with you.</p>
+  <a id="go" class="go" href="/ui">Open your chats</a>
+</main>
+<script src="/assets/guest-refused.js"></script>
+</body>
+</html>

package/dist/ui/image-lightbox.js

@@ -5,10 +5,14 @@
 //
 // The native <dialog> opened with showModal(): the browser traps focus and makes the rest inert. No style attribute
 // (#1300): classes only. Only a file URL the chat itself rendered (/ui/file/<32 hex>) is ever shown.
+//
+// #2333: zoom and pan (image-zoom.js). The toolbar has −, the level (it toggles fit ↔ 100%), + and Fit width; the keys
+// + / − / 0 (fit) / 1 (100%) / W (fit width). Each image opens fitted; stepping to another fits it again.
 import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
 import { createStore, useStore } from "/assets/app-store.js";
 import { Icon } from "/assets/ui-icons.js";
+import { createZoom, STEP } from "./image-zoom.js";
 
 const FILE_URL = /^\/ui\/file\/[0-9a-f]{32}$/;
 /** What is shown: { items: [{ src, name }], index, opener } or null. One per page; the chat that shows it owns it. */
@@ -54,6 +58,10 @@ function ImageLightbox({ items, index, opener, onClose }) {
   const [at, setAt] = useState(index);
   const ref = useRef(null);
   const close = useRef(null);
+  const stage = useRef(null);
+  const img = useRef(null);
+  const zoom = useRef(null);
+  const [level, setLevel] = useState(null);   // { scale, fit, mode } once the picture has loaded
   const item = items[at] || items[0];
   const many = items.length > 1;
   const step = (d) => setAt((n) => (n + d + items.length) % items.length);
@@ -69,6 +77,25 @@ function ImageLightbox({ items, index, opener, onClose }) {
       if (opener && typeof opener.focus === "function" && document.contains?.(opener)) opener.focus();
     };
   }, []);
+  useEffect(() => {
+    if (!stage.current || !img.current) return undefined;
+    const z = createZoom({ stage: stage.current, img: img.current, onChange: setLevel });
+    zoom.current = z;
+    return () => { z.destroy(); zoom.current = null; };
+  }, []);
+  // Another image: hidden until it has loaded and been fitted (its load resets the zoom). A layout effect — in the same
+  // commit that set the new src, before any load can arrive: a picture already in the cache (every thumbnail above it
+  // has loaded) fires its load before a passive effect would run, and such an effect then hid it for good with the
+  // level at "…" (the report on beta.24: Next "flashes once, then the next image is not visible"). A picture that is
+  // already complete here (the same file again: no load comes) is fitted at once.
+  const first = useRef(true);
+  useLayoutEffect(() => {
+    if (first.current) { first.current = false; return; }
+    const el = img.current;
+    if (el) el.classList.remove("lb-ready");
+    setLevel(null);
+    if (el && el.complete && el.naturalWidth > 0 && zoom.current) zoom.current.reset();
+  }, [at]);
   useEffect(() => {
     const d = ref.current;
     if (!d) return undefined;
@@ -80,6 +107,12 @@ function ImageLightbox({ items, index, opener, onClose }) {
     // The dark area (the dialog itself, or the stage around the image) closes it; the image and the controls do not.
     const onClick = (e) => { if (e.target === d || (e.target && e.target.classList && e.target.classList.contains("lb-stage"))) onClose(); };
     const onKey = (e) => {
+      const z = zoom.current;
+      if (z && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const act = { "+": () => z.zoomBy(STEP), "=": () => z.zoomBy(STEP), "-": () => z.zoomBy(1 / STEP), "_": () => z.zoomBy(1 / STEP),
+          "0": () => z.fit(), "1": () => z.actual(), w: () => z.fitWidth(), W: () => z.fitWidth() }[e.key];
+        if (act) { e.preventDefault(); act(); return; }
+      }
       if (!many) return;
       if (e.key === "ArrowRight") { e.preventDefault(); step(1); } else if (e.key === "ArrowLeft") { e.preventDefault(); step(-1); }
     };
@@ -90,14 +123,25 @@ function ImageLightbox({ items, index, opener, onClose }) {
     return () => { d.removeEventListener("cancel", onCancel); d.removeEventListener("close", onNativeClose); d.removeEventListener("click", onClick); d.removeEventListener("keydown", onKey); };
   }, [onClose, many, items.length]);
   const label = item.name ? t("chat.lbLabel", item.name) : t("chat.lbLabelNoName");
+  const pct = level ? Math.round(level.scale * 100) : null;
   return html`<dialog data-trust="lightbox" ref=${ref} class="lb" role="dialog" aria-modal="true" aria-label=${label}>
     <div class="lb-bar">
       <span class="lb-name" title=${item.name}>${item.name}</span>
       ${many ? html`<span class="lb-count">${t("chat.lbCount", at + 1, items.length)}</span>` : null}
+      <span class="lb-zoom" role="group">
+        <button type="button" class="icon-btn lb-zoom-out" disabled=${!level} aria-label=${t("chat.lbZoomOut")} title=${t("chat.lbZoomOut")}
+          onClick=${() => zoom.current && zoom.current.zoomBy(1 / STEP)}><${Icon} name="minus" /></button>
+        <button type="button" class="btn btn-sm lb-level" disabled=${!level} aria-label=${t("chat.lbZoomLevel", pct ?? "")} title=${t("chat.lbZoomLevel", pct ?? "")}
+          onClick=${() => zoom.current && zoom.current.toggle()}>${pct === null ? "…" : `${pct}%`}</button>
+        <button type="button" class="icon-btn lb-zoom-in" disabled=${!level} aria-label=${t("chat.lbZoomIn")} title=${t("chat.lbZoomIn")}
+          onClick=${() => zoom.current && zoom.current.zoomBy(STEP)}><${Icon} name="plus" /></button>
+        <button type="button" class=${`icon-btn lb-fit-width${level && level.mode === "width" ? " on" : ""}`} disabled=${!level} aria-pressed=${level && level.mode === "width" ? "true" : "false"}
+          aria-label=${t("chat.lbFitWidth")} title=${t("chat.lbFitWidth")} onClick=${() => zoom.current && zoom.current.fitWidth()}><${Icon} name="fitwidth" /></button>
+      </span>
       <a class="btn btn-sm lb-orig" href=${item.src} target="_blank" rel="noopener noreferrer"><${Icon} name="external" size=${14} /><span class="lbl">${t("chat.lbOpenOriginal")}</span></a>
       <button type="button" class="icon-btn lb-close" ref=${close} aria-label=${t("chat.lbClose")} title=${t("chat.lbClose")} onClick=${onClose}><${Icon} name="close" /></button>
     </div>
-    <div class="lb-stage"><img class="lb-img" src=${item.src} alt=${item.name} /></div>
+    <div class="lb-stage" ref=${stage}><img class="lb-img" ref=${img} src=${item.src} alt=${item.name} draggable=${false} /></div>
     ${many ? html`<button type="button" class="icon-btn lb-nav lb-prev" aria-label=${t("chat.lbPrev")} title=${t("chat.lbPrev")} onClick=${() => step(-1)}><${Icon} name="back" /></button>
       <button type="button" class="icon-btn lb-nav lb-next" aria-label=${t("chat.lbNext")} title=${t("chat.lbNext")} onClick=${() => step(1)}><${Icon} name="forward" /></button>` : null}
   </dialog>`;

package/dist/ui/image-zoom.js

@@ -0,0 +1,242 @@
+// #2333: zoom and pan for the chat image lightbox. The math is pure (a view box, the image's natural size, a scale and
+// an offset) and unit-tested; `createZoom` applies it to one <img> in one stage as a CSSOM transform — translate then
+// scale from the top-left corner, so the browser never re-decodes the picture, and no style attribute is written
+// (#1300: the CSSOM is not governed by the page's style-src).
+//
+// Gestures: wheel and ctrl/⌘+wheel (a trackpad pinch arrives as ctrl+wheel) zoom around the cursor; once the image is
+// larger than the view a plain wheel scrolls it instead, so a tall sheet reads like a page. A mouse click on the image
+// toggles fit ↔ 100% at that point; a drag pans. Touch: two fingers pinch (and pan), one finger pans, a double tap
+// toggles fit ↔ 100%. A gesture that moved is never also a click (the lightbox closes on a click on the dark area).
+
+/** The largest zoom: 8× the picture's own pixels. */
+export const MAX_SCALE = 8;
+/** One step of +/−, the keys or the toolbar. */
+export const STEP = 1.25;
+/** A pointer that moved less than this (CSS px) clicked or tapped; more, it dragged. */
+export const SLOP = 4;
+/** Two taps within this long and this close are a double tap. */
+export const DOUBLE_TAP_MS = 300;
+export const DOUBLE_TAP_PX = 24;
+
+/** The whole picture in the view, never enlarged. view = { x, y, w, h } (stage coordinates); img = { w, h } natural. */
+export function fitScale(view, img) {
+  return Math.min(1, view.w / img.w, view.h / img.h);
+}
+/** The picture's width across the view, never enlarged: a tall sheet then scrolls. */
+export function fitWidthScale(view, img) {
+  return Math.min(1, view.w / img.w);
+}
+/** The scales a gesture may reach: down to fit (or 100%, for a picture smaller than the view), up to MAX_SCALE. */
+export function scaleLimits(view, img) {
+  return { min: fitScale(view, img), max: Math.max(MAX_SCALE, fitScale(view, img)) };
+}
+
+/**
+ * Keep the picture in view: an axis it does not fill is centred; an axis it overflows has no gap at either edge.
+ * z = { s, tx, ty } (tx, ty: where the picture's top-left corner is, in stage coordinates). Returns a new z.
+ */
+export function clampPan(z, view, img) {
+  const axis = (t, size, start, len) => size <= len ? start + (len - size) / 2 : Math.min(start, Math.max(start + len - size, t));
+  return { s: z.s, tx: axis(z.tx, img.w * z.s, view.x, view.w), ty: axis(z.ty, img.h * z.s, view.y, view.h) };
+}
+
+/** Scale to `s` (within the limits) keeping the picture point under (px, py) where it is. */
+export function zoomAt(z, s, px, py, view, img) {
+  const { min, max } = scaleLimits(view, img);
+  const to = Math.min(max, Math.max(min, s));
+  const k = to / z.s;
+  return clampPan({ s: to, tx: px - (px - z.tx) * k, ty: py - (py - z.ty) * k }, view, img);
+}
+
+/** Fit: the whole picture, centred. */
+export function fitView(view, img) {
+  return clampPan({ s: fitScale(view, img), tx: 0, ty: 0 }, view, img);
+}
+/** Fit width: the picture across the view, from its top. */
+export function fitWidthView(view, img) {
+  return clampPan({ s: fitWidthScale(view, img), tx: 0, ty: view.y }, view, img);
+}
+/** Whether the picture is larger than the view on either axis (then a plain wheel scrolls it, and a drag pans it). */
+export function overflows(z, view, img) {
+  return img.w * z.s > view.w + 0.5 || img.h * z.s > view.h + 0.5;
+}
+
+/** Wheel distance in CSS px (a line is 16, a page the view's height). */
+function wheelPx(e, view) {
+  const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? view.h : 1;
+  return { dx: (e.deltaX || 0) * unit, dy: (e.deltaY || 0) * unit };
+}
+
+/**
+ * Drive one picture in one stage. `onChange({ scale, fit, mode })` after every change (mode: "fit" | "width" | "free").
+ * Returns { reset, fit, fitWidth, actual, zoomBy, toggle, destroy }. Nothing happens until the picture has loaded.
+ */
+export function createZoom({ stage, img, onChange }) {
+  let nat = null;            // { w, h } once loaded
+  let z = { s: 1, tx: 0, ty: 0 };
+  let mode = "fit";
+  const pointers = new Map(); // pointerId → { x, y }
+  let gesture = null;        // { kind: "drag" | "pinch", ... }
+  let moved = false;         // the gesture now ending moved: its click is not a click
+  let lastTap = null;        // { t, x, y } of the last touch tap
+  let lastType = "mouse";    // the pointer type of the last press: a touch tap's click never toggles (double tap does);
+                             // a mouse or a pen click does, and neither runs the double-tap logic
+
+  const view = () => {
+    const r = stage.getBoundingClientRect();
+    const cs = typeof getComputedStyle === "function" ? getComputedStyle(stage) : null;
+    const px = (k) => (cs ? parseFloat(cs[k]) || 0 : 0);
+    const x = px("paddingLeft"), y = px("paddingTop");
+    return { x, y, w: Math.max(1, r.width - x - px("paddingRight")), h: Math.max(1, r.height - y - px("paddingBottom")) };
+  };
+  const at = (e) => { const r = stage.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; };
+  const apply = () => {
+    img.style.transform = `translate(${z.tx}px, ${z.ty}px) scale(${z.s})`;
+    stage.classList.toggle("lb-zoomed", !!nat && overflows(z, view(), nat));
+    if (onChange) onChange({ scale: z.s, fit: nat ? fitScale(view(), nat) : 1, mode });
+  };
+  const set = (next, m = "free") => { if (!nat) return; z = next; mode = m; apply(); };
+
+  const api = {
+    /** A new picture (or the first): read its size and fit it. */
+    reset() {
+      nat = img.naturalWidth > 0 && img.naturalHeight > 0 ? { w: img.naturalWidth, h: img.naturalHeight } : null;
+      img.classList.toggle("lb-ready", !!nat);
+      img.classList.remove("lb-err");
+      if (nat) set(fitView(view(), nat), "fit");
+    },
+    fit() { if (nat) set(fitView(view(), nat), "fit"); },
+    fitWidth() { if (nat) set(fitWidthView(view(), nat), "width"); },
+    /** 100% at a point (default: the middle of the view). */
+    actual(px, py) {
+      if (!nat) return;
+      const v = view();
+      set(zoomAt(z, 1, px ?? v.x + v.w / 2, py ?? v.y + v.h / 2, v, nat));
+    },
+    zoomBy(factor, px, py) {
+      if (!nat) return;
+      const v = view();
+      set(zoomAt(z, z.s * factor, px ?? v.x + v.w / 2, py ?? v.y + v.h / 2, v, nat));
+    },
+    /** Fit ↔ 100%: anything but fit goes back to fit. */
+    toggle(px, py) {
+      if (!nat) return;
+      if (mode === "fit" && Math.abs(z.s - 1) > 1e-6) api.actual(px, py); else api.fit();
+    },
+    destroy() {
+      stage.removeEventListener("wheel", onWheel);
+      stage.removeEventListener("pointerdown", onDown);
+      stage.removeEventListener("pointermove", onMove);
+      stage.removeEventListener("pointerup", onUp);
+      stage.removeEventListener("pointercancel", onUp);
+      stage.removeEventListener("click", onClick, true);
+      img.removeEventListener("load", api.reset);
+      img.removeEventListener("error", onError);
+      if (typeof window !== "undefined") window.removeEventListener("resize", onResize);
+    },
+  };
+
+  function onWheel(e) {
+    if (!nat) return;
+    e.preventDefault();
+    const v = view();
+    const { dx, dy } = wheelPx(e, v);
+    if (e.ctrlKey || e.metaKey || !overflows(z, v, nat)) {
+      const p = at(e);
+      // A pinch on a trackpad sends small ctrl+wheel steps; a wheel notch is ~100 px.
+      set(zoomAt(z, z.s * Math.exp(-dy * (e.ctrlKey ? 0.01 : 0.002)), p.x, p.y, v, nat));
+    } else {
+      // Shift+wheel on a mouse scrolls sideways.
+      const sx = e.shiftKey && !dx ? dy : dx, sy = e.shiftKey && !dx ? 0 : dy;
+      set(clampPan({ s: z.s, tx: z.tx - sx, ty: z.ty - sy }, v, nat), mode === "width" ? "width" : "free");
+    }
+  }
+  function onDown(e) {
+    if (!nat || (e.pointerType === "mouse" && e.button !== 0)) return;
+    lastType = e.pointerType || "mouse";
+    pointers.set(e.pointerId, at(e));
+    // No pointer capture yet: it would retarget the click to the stage, and a click on the picture is not one on the
+    // dark area. Captured only once the pointer moves (capture()).
+    if (pointers.size === 1) { moved = false; gesture = { kind: "drag", from: at(e), z0: z }; }
+    else if (pointers.size === 2) {
+      const [a, b] = [...pointers.values()];
+      gesture = { kind: "pinch", d0: Math.hypot(b.x - a.x, b.y - a.y) || 1, m0: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }, z0: z };
+      moved = true;           // two fingers: never a tap
+      for (const id of pointers.keys()) capture(id);
+    }
+  }
+  function onMove(e) {
+    if (!gesture || !pointers.has(e.pointerId)) return;
+    pointers.set(e.pointerId, at(e));
+    const v = view();
+    if (gesture.kind === "pinch" && pointers.size >= 2) {
+      const [a, b] = [...pointers.values()];
+      const m = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+      const { z0, m0, d0 } = gesture;
+      const s = z0.s * (Math.hypot(b.x - a.x, b.y - a.y) / d0);
+      // The picture point under the fingers' first midpoint follows the midpoint (zoom and pan in one).
+      const zoomed = zoomAt(z0, s, m0.x, m0.y, v, nat);
+      set(clampPan({ s: zoomed.s, tx: zoomed.tx + (m.x - m0.x), ty: zoomed.ty + (m.y - m0.y) }, v, nat));
+    } else if (gesture.kind === "drag") {
+      const p = pointers.get(e.pointerId);
+      const dx = p.x - gesture.from.x, dy = p.y - gesture.from.y;
+      if (!moved && Math.hypot(dx, dy) < SLOP) return;
+      if (!moved) capture(e.pointerId);
+      moved = true;
+      if (overflows(gesture.z0, v, nat)) set(clampPan({ s: gesture.z0.s, tx: gesture.z0.tx + dx, ty: gesture.z0.ty + dy }, v, nat), mode === "width" ? "width" : "free");
+    }
+  }
+  function onUp(e) {
+    if (!pointers.has(e.pointerId)) return;
+    const p = pointers.get(e.pointerId);
+    pointers.delete(e.pointerId);
+    if (pointers.size === 1 && gesture && gesture.kind === "pinch") {
+      // One finger left after a pinch: it pans on from here.
+      const [rest] = [...pointers.values()];
+      gesture = { kind: "drag", from: rest, z0: z };
+      return;
+    }
+    if (pointers.size > 0) return;
+    const tapped = !moved && gesture && gesture.kind === "drag";
+    gesture = null;
+    // Only a finger double-taps: a mouse or a pen clicks (onClick toggles), so a pen tap must not also count here.
+    if (!tapped || e.pointerType !== "touch") return;
+    // A touch tap: a second one soon and near is a double tap — fit ↔ 100% there.
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+    if (lastTap && now - lastTap.t < DOUBLE_TAP_MS && Math.hypot(p.x - lastTap.x, p.y - lastTap.y) < DOUBLE_TAP_PX) {
+      lastTap = null;
+      moved = true;           // its click neither closes nor toggles again
+      api.toggle(p.x, p.y);
+    } else lastTap = { t: now, x: p.x, y: p.y };
+  }
+  /** A drag or pinch keeps its pointers even off the stage. */
+  function capture(id) {
+    if (stage.setPointerCapture) { try { stage.setPointerCapture(id); } catch { /* already gone */ } }
+  }
+  // Capture phase: before the lightbox's own click (which closes on the dark area) can see it. A click that ended a
+  // drag or a double tap is swallowed; a mouse click on the picture toggles fit ↔ 100% there. A touch tap's click on
+  // the picture does nothing (a single tap waits for a double tap); on the dark area it still closes.
+  function onClick(e) {
+    if (moved) { moved = false; e.stopPropagation(); e.preventDefault(); return; }
+    if (e.target === img && nat && lastType !== "touch") {
+      const p = at(e);
+      e.stopPropagation();
+      api.toggle(p.x, p.y);
+    }
+  }
+  // A picture that does not load is shown as the browser shows a broken one, where the old lightbox put it.
+  const onError = () => { nat = null; img.classList.add("lb-err"); img.classList.remove("lb-ready"); if (onChange) onChange(null); };
+  const onResize = () => { if (!nat) return; if (mode === "fit") api.fit(); else if (mode === "width") api.fitWidth(); else set(clampPan(z, view(), nat)); };
+
+  stage.addEventListener("wheel", onWheel, { passive: false });
+  stage.addEventListener("pointerdown", onDown);
+  stage.addEventListener("pointermove", onMove);
+  stage.addEventListener("pointerup", onUp);
+  stage.addEventListener("pointercancel", onUp);
+  stage.addEventListener("click", onClick, true);
+  img.addEventListener("load", api.reset);
+  img.addEventListener("error", onError);
+  if (typeof window !== "undefined") window.addEventListener("resize", onResize);
+  if (img.complete) api.reset();
+  return api;
+}