@leftoff/cli 0.9.8-beta.2 → 0.9.8-beta.21

package/ui/lightbox.js

@@ -0,0 +1,452 @@
+// A full-screen preview for images (0.9.8): a dark backdrop, the picture fit
+// to the screen, pinch / wheel / double-tap zoom, a drag to pan when zoomed,
+// a swipe (or ← →, or the edge arrows) between the pictures of one message,
+// and Esc, ×, a tap on the backdrop or a swipe down to close. The pure parts
+// first (unit-tested); the DOM part only runs in a browser.
+
+export const LB_MIN = 1
+export const LB_MAX = 4
+export const LB_ZOOM = 2 // a double tap: fit ↔ 2x
+export const LB_TAP_MOVE = 10 // px a tap may wander
+export const LB_DOUBLE_MS = 300
+export const LB_DOUBLE_DIST = 30
+export const LB_SWIPE_MIN = 40 // px: shorter is never a swipe
+export const LB_SWIPE_FRAC = 0.22 // of the width: a slow drag this far turns the page
+export const LB_FLICK = 0.45 // px/ms: a quick flick past LB_SWIPE_MIN does too
+export const LB_CLOSE_DIST = 110 // px down: close
+export const LB_IDLE_MS = 2600 // the top bar fades after this long untouched
+
+const num = (v, d = 0) => (Number.isFinite(v) ? v : d)
+
+export function clampScale(s) { return Math.min(LB_MAX, Math.max(LB_MIN, num(s, LB_MIN))) }
+
+// The picture's size fit inside the view (object-fit: contain).
+export function fitRect(nw, nh, vw, vh) {
+  if (!(nw > 0 && nh > 0 && vw > 0 && vh > 0)) return { w: Math.max(0, num(vw)), h: Math.max(0, num(vh)) }
+  const k = Math.min(vw / nw, vh / nh)
+  return { w: nw * k, h: nh * k }
+}
+
+// Pan never shows past the picture's edge; at fit (or where the zoomed picture
+// is still smaller than the view on an axis) it stays centred on that axis.
+export function clampPan(st, fit, view) {
+  const s = clampScale(st.scale)
+  const mx = Math.max(0, (fit.w * s - view.w) / 2)
+  const my = Math.max(0, (fit.h * s - view.h) / 2)
+  const c = (v, m) => (m === 0 ? 0 : Math.min(m, Math.max(-m, num(v))))
+  return { scale: s, x: c(st.x, mx), y: c(st.y, my) }
+}
+
+// Zoom to `next` keeping the point (px, py) — measured from the view's centre —
+// under the finger or the pointer.
+export function zoomAt(st, next, px, py, fit, view) {
+  const s = clampScale(st.scale)
+  const n = clampScale(next)
+  const k = n / s
+  return clampPan({ scale: n, x: px - k * (px - num(st.x)), y: py - k * (py - num(st.y)) }, fit, view)
+}
+
+// A double tap or double-click: zoomed → back to fit; at fit → 2x at that point.
+export function toggleZoom(st, px, py, fit, view) {
+  if (clampScale(st.scale) > LB_MIN + 0.01) return { scale: LB_MIN, x: 0, y: 0 }
+  return zoomAt({ scale: LB_MIN, x: 0, y: 0 }, LB_ZOOM, px, py, fit, view)
+}
+
+// A wheel notch → a zoom factor. ctrl+wheel is a trackpad pinch (small deltas).
+export function wheelFactor(deltaY, { ctrl = false, lines = false } = {}) {
+  const dy = num(deltaY) * (lines ? 16 : 1)
+  return Math.exp(-dy * (ctrl ? 0.01 : 0.002))
+}
+
+// Two fingers: the scale follows the ratio of their spread.
+export function pinchScale(s0, d0, d) {
+  if (!(d0 > 0) || !(d > 0)) return clampScale(s0)
+  return clampScale(num(s0, 1) * (d / d0))
+}
+
+// One step through the pictures: no wrap (the first has no previous, the last no next).
+export function stepIndex(i, d, n) {
+  if (!(n > 0)) return 0
+  return Math.min(n - 1, Math.max(0, Math.trunc(num(i)) + Math.sign(num(d))))
+}
+export const hasPrev = (i, n) => n > 1 && i > 0
+export const hasNext = (i, n) => n > 1 && i < n - 1
+export const counterText = (i, n) => (n > 1 ? (i + 1) + ' of ' + n : '')
+
+// Which way a one-finger drag is going, once it has gone far enough to say.
+export function dragAxis(dx, dy) {
+  if (Math.hypot(dx, dy) < LB_TAP_MOVE) return null
+  return Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y'
+}
+
+// What a finished one-finger drag does at fit: 'next', 'prev', 'close' or
+// 'back' (spring back). Zoomed, a drag pans and decides nothing ('none').
+export function swipeDecision({ dx = 0, dy = 0, dt = 1, scale = 1, vw = 390, index = 0, count = 1 } = {}) {
+  if (clampScale(scale) > LB_MIN + 0.01) return 'none'
+  const t = Math.max(1, num(dt, 1))
+  const ax = Math.abs(dx), ay = Math.abs(dy)
+  if (ax < LB_SWIPE_MIN && ay < LB_SWIPE_MIN) return 'back'
+  if (ax >= ay) {
+    const far = ax >= Math.max(LB_SWIPE_MIN, vw * LB_SWIPE_FRAC) || ax / t >= LB_FLICK
+    if (!far) return 'back'
+    if (dx < 0) return hasNext(index, count) ? 'next' : 'back'
+    return hasPrev(index, count) ? 'prev' : 'back'
+  }
+  if (dy <= 0) return 'back'
+  return dy >= LB_CLOSE_DIST || dy / t >= LB_FLICK ? 'close' : 'back'
+}
+
+// While a drag follows the finger: sideways past the ends it resists; up it
+// resists; down fades the backdrop.
+export function dragOffset(axis, dx, dy, { index = 0, count = 1 } = {}) {
+  if (axis === 'x') {
+    const edge = (dx > 0 && !hasPrev(index, count)) || (dx < 0 && !hasNext(index, count))
+    return { x: edge ? dx / 3 : dx, y: 0 }
+  }
+  if (axis === 'y') return { x: 0, y: dy > 0 ? dy : dy / 4 }
+  return { x: 0, y: 0 }
+}
+export function dragFade(dy, vh) { return dy > 0 && vh > 0 ? Math.max(0.25, 1 - dy / (vh * 0.7)) : 1 }
+
+export function isDoubleTap(prev, cur) {
+  return !!(prev && cur && cur.t - prev.t <= LB_DOUBLE_MS && Math.hypot(cur.x - prev.x, cur.y - prev.y) <= LB_DOUBLE_DIST)
+}
+
+// ------------------------------------------------------------- in the browser
+
+const DL_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 4v11"/><path d="m7 10 5 5 5-5"/><path d="M5 20h14"/></svg>'
+const X_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6 6 18"/></svg>'
+const PREV_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m15 5-7 7 7 7"/></svg>'
+const NEXT_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m9 5 7 7-7 7"/></svg>'
+
+let ui = null
+
+function build() {
+  const root = document.createElement('div')
+  root.className = 'lightbox'
+  root.id = 'lightbox'
+  root.hidden = true
+  root.tabIndex = -1
+  root.setAttribute('role', 'dialog')
+  root.setAttribute('aria-modal', 'true')
+  root.setAttribute('aria-label', 'Image preview')
+  root.innerHTML =
+    '<div class="lb-back" aria-hidden="true"></div>' +
+    '<div class="lb-stage"><img class="lb-img" alt="" draggable="false"><span class="lb-spin spin" aria-hidden="true" hidden></span><div class="lb-err" hidden></div></div>' +
+    '<div class="lb-bar">' +
+      '<div class="lb-meta"><span class="lb-name"></span><span class="lb-sub"><span class="lb-size"></span><span class="lb-count"></span></span></div>' +
+      '<a class="lb-btn lb-dl" role="button" aria-disabled="true">' + DL_IC + '<span class="lb-dl-label">Download</span></a>' +
+      '<button type="button" class="lb-btn lb-x" aria-label="Close" title="Close (Esc)">' + X_IC + '</button>' +
+    '</div>' +
+    '<button type="button" class="lb-nav lb-prev" aria-label="Previous image" title="Previous (←)">' + PREV_IC + '</button>' +
+    '<button type="button" class="lb-nav lb-next" aria-label="Next image" title="Next (→)">' + NEXT_IC + '</button>' +
+    '<div class="lb-live" aria-live="polite"></div>'
+  document.body.appendChild(root)
+  const q = (s) => root.querySelector(s)
+  ui = { root, back: q('.lb-back'), stage: q('.lb-stage'), img: q('.lb-img'), spin: q('.lb-spin'), err: q('.lb-err'), bar: q('.lb-bar'), name: q('.lb-name'), size: q('.lb-size'), count: q('.lb-count'), dl: q('.lb-dl'), x: q('.lb-x'), prev: q('.lb-prev'), next: q('.lb-next'), live: q('.lb-live'),
+    items: [], index: 0, st: { scale: 1, x: 0, y: 0 }, drag: { x: 0, y: 0 }, ptrs: new Map(), g: null, lastTap: null, tapT: 0, idleT: 0, token: 0, opts: null, closing: 0 }
+  wire()
+  return ui
+}
+
+const reduced = () => !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+const finePointer = () => !!(window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches)
+
+// The view: the stage less the safe areas (its padding), and where its centre sits.
+function view() {
+  const cs = getComputedStyle(ui.stage)
+  const pl = parseFloat(cs.paddingLeft) || 0, pr = parseFloat(cs.paddingRight) || 0, pt = parseFloat(cs.paddingTop) || 0, pb = parseFloat(cs.paddingBottom) || 0
+  const W = ui.stage.clientWidth || window.innerWidth, H = ui.stage.clientHeight || window.innerHeight
+  return { w: Math.max(1, W - pl - pr), h: Math.max(1, H - pt - pb), cx: (pl - pr) / 2, cy: (pt - pb) / 2, W, H }
+}
+function natural() {
+  const it = ui.items[ui.index] || {}
+  const nw = ui.img.naturalWidth || it.w || 0, nh = ui.img.naturalHeight || it.h || 0
+  return { nw, nh }
+}
+function fit() { const v = view(), n = natural(); return fitRect(n.nw, n.nh, v.w, v.h) }
+
+function apply({ anim = false } = {}) {
+  const v = view(), f = fit()
+  ui.img.style.width = f.w + 'px'
+  ui.img.style.height = f.h + 'px'
+  ui.root.classList.toggle('lb-anim', anim && !reduced())
+  const x = v.cx + ui.st.x + ui.drag.x, y = v.cy + ui.st.y + ui.drag.y
+  ui.img.style.transform = 'translate(-50%, -50%) translate3d(' + x.toFixed(2) + 'px, ' + y.toFixed(2) + 'px, 0) scale(' + ui.st.scale.toFixed(4) + ')'
+  ui.root.classList.toggle('lb-zoomed', ui.st.scale > LB_MIN + 0.01)
+  ui.root.dataset.scale = ui.st.scale.toFixed(3)
+}
+function setFade(o) { ui.back.style.opacity = String(o); ui.bar.style.opacity = o < 1 ? String(Math.max(0, (o - 0.25) / 0.75) * 0.6) : '' }
+
+function showBar() {
+  ui.root.classList.remove('lb-idle')
+  clearTimeout(ui.idleT)
+  ui.idleT = setTimeout(() => { if (ui.root.hidden || ui.root.contains(document.activeElement) && document.activeElement.matches(':focus-visible') && document.activeElement !== ui.root) return; ui.root.classList.add('lb-idle') }, LB_IDLE_MS)
+}
+function toggleBar() { if (ui.root.classList.contains('lb-idle')) showBar(); else { clearTimeout(ui.idleT); ui.root.classList.add('lb-idle') } }
+
+function paintMeta() {
+  const it = ui.items[ui.index] || {}, n = ui.items.length
+  ui.name.textContent = it.name || ''
+  ui.name.title = it.name || ''
+  ui.size.textContent = it.sizeLabel || ''
+  ui.count.textContent = counterText(ui.index, n)
+  ui.count.hidden = n < 2
+  ui.prev.hidden = !hasPrev(ui.index, n)
+  ui.next.hidden = !hasNext(ui.index, n)
+  ui.root.classList.toggle('lb-many', n > 1)
+}
+function setDownload(url) {
+  const it = ui.items[ui.index] || {}
+  if (url && it.download !== false) { ui.dl.href = url; ui.dl.setAttribute('download', it.name || 'image'); ui.dl.removeAttribute('aria-disabled'); ui.dl.removeAttribute('role'); ui.dl.hidden = false }
+  else { ui.dl.removeAttribute('href'); ui.dl.removeAttribute('download'); ui.dl.setAttribute('role', 'button'); ui.dl.setAttribute('aria-disabled', 'true'); ui.dl.hidden = it.download === false }
+}
+
+// Show picture i: the thumbnail (blurred) at once, the full one when it lands.
+function show(i, { from = 0 } = {}) {
+  const it = ui.items[i]
+  if (!it) return
+  ui.index = i
+  const token = ++ui.token
+  ui.st = { scale: 1, x: 0, y: 0 }
+  ui.drag = { x: 0, y: 0 }
+  ui.err.hidden = true
+  ui.img.alt = it.name || ''
+  paintMeta()
+  setDownload(it.url || null)
+  if (ui.items.length > 1) ui.live.textContent = (it.name || 'Image') + ', ' + counterText(i, ui.items.length)
+  const done = (url) => {
+    if (token !== ui.token) return
+    it.url = url
+    const pre = new Image()
+    pre.onload = () => {
+      if (token !== ui.token) return
+      it.w = pre.naturalWidth; it.h = pre.naturalHeight
+      ui.img.src = url
+      ui.img.classList.remove('lb-loading')
+      ui.spin.hidden = true
+      setDownload(url)
+      apply()
+    }
+    pre.onerror = () => { if (token !== ui.token) return; ui.spin.hidden = true; ui.img.classList.remove('lb-loading'); if (!it.thumb) ui.img.removeAttribute('src'); ui.err.textContent = 'Can’t show this picture here.'; ui.err.hidden = false }
+    pre.src = url
+  }
+  if (it.url) { ui.img.src = it.url; ui.img.classList.remove('lb-loading'); ui.spin.hidden = true }
+  else if (it.thumb) { ui.img.src = it.thumb; ui.img.classList.add('lb-loading'); ui.spin.hidden = false }
+  else { ui.img.removeAttribute('src'); ui.img.classList.remove('lb-loading'); ui.spin.hidden = false }
+  // slide in from the side it came from
+  if (from && !reduced()) { ui.drag = { x: from * Math.min(view().w, 600) * 0.35, y: 0 }; apply(); void ui.img.offsetWidth; ui.drag = { x: 0, y: 0 }; apply({ anim: true }) } else apply()
+  if (it.url) return
+  Promise.resolve().then(() => it.load()).then(done, (e) => {
+    if (token !== ui.token) return
+    ui.spin.hidden = true
+    ui.err.textContent = 'Couldn’t load it' + (e && e.message ? ': ' + e.message : '')
+    ui.err.hidden = false
+  })
+}
+
+function go(d) {
+  const n = ui.items.length, to = stepIndex(ui.index, d, n)
+  if (to === ui.index) { ui.drag = { x: 0, y: 0 }; apply({ anim: true }); return false }
+  show(to, { from: d })
+  return true
+}
+
+function viewPoint(clientX, clientY) {
+  const r = ui.stage.getBoundingClientRect(), v = view()
+  return { x: clientX - r.left - r.width / 2 - v.cx, y: clientY - r.top - r.height / 2 - v.cy }
+}
+function zoomTo(scale, clientX, clientY, anim) {
+  const p = viewPoint(clientX, clientY)
+  ui.st = zoomAt(ui.st, scale, p.x, p.y, fit(), view())
+  apply({ anim })
+}
+
+function wire() {
+  const { root, stage, img } = ui
+  ui.x.addEventListener('click', () => close())
+  ui.prev.addEventListener('click', () => { go(-1); showBar() })
+  ui.next.addEventListener('click', () => { go(1); showBar() })
+  ui.dl.addEventListener('click', (e) => { if (!ui.dl.getAttribute('href')) e.preventDefault() })
+  img.addEventListener('load', () => { if (!root.hidden) apply() })
+  root.addEventListener('pointermove', (e) => { if (e.pointerType === 'mouse') showBar() })
+  root.addEventListener('focusin', () => { if (document.activeElement !== root) showBar() })
+  window.addEventListener('resize', () => { if (root.hidden) return; ui.st = clampPan(ui.st, fit(), view()); apply() })
+
+  stage.addEventListener('pointerdown', (e) => {
+    if (e.button > 0 || ui.closing) return
+    try { stage.setPointerCapture(e.pointerId) } catch {}
+    ui.ptrs.set(e.pointerId, { x: e.clientX, y: e.clientY })
+    if (ui.ptrs.size === 1) ui.g = { kind: 'one', x0: e.clientX, y0: e.clientY, t0: Date.now(), st0: { ...ui.st }, axis: null, moved: false, onImg: e.target === img, type: e.pointerType || 'mouse' }
+    else if (ui.ptrs.size === 2) {
+      const [a, b] = [...ui.ptrs.values()]
+      ui.drag = { x: 0, y: 0 }; setFade(1)
+      ui.g = { kind: 'pinch', d0: Math.hypot(a.x - b.x, a.y - b.y), st0: { ...ui.st }, m0: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 } }
+    }
+  })
+  stage.addEventListener('pointermove', (e) => {
+    if (!ui.ptrs.has(e.pointerId) || !ui.g) return
+    ui.ptrs.set(e.pointerId, { x: e.clientX, y: e.clientY })
+    const g = ui.g
+    if (g.kind === 'pinch' && ui.ptrs.size >= 2) {
+      const [a, b] = [...ui.ptrs.values()]
+      const m = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }
+      const p0 = viewPoint(g.m0.x, g.m0.y)
+      const s = pinchScale(g.st0.scale, g.d0, Math.hypot(a.x - b.x, a.y - b.y))
+      const z = zoomAt(g.st0, s, p0.x, p0.y, fit(), view())
+      ui.st = clampPan({ scale: z.scale, x: z.x + (m.x - g.m0.x), y: z.y + (m.y - g.m0.y) }, fit(), view())
+      apply()
+      return
+    }
+    if (g.kind !== 'one') return
+    const dx = e.clientX - g.x0, dy = e.clientY - g.y0
+    if (!g.moved && Math.hypot(dx, dy) >= LB_TAP_MOVE) g.moved = true
+    if (!g.moved) return
+    if (g.st0.scale > LB_MIN + 0.01) { ui.st = clampPan({ scale: g.st0.scale, x: g.st0.x + dx, y: g.st0.y + dy }, fit(), view()); apply(); return }
+    if (g.type === 'mouse') return // a mouse at fit: the arrows and the keys turn the page
+    if (!g.axis) g.axis = dragAxis(dx, dy)
+    ui.drag = dragOffset(g.axis, dx, dy, { index: ui.index, count: ui.items.length })
+    setFade(g.axis === 'y' ? dragFade(ui.drag.y, view().H) : 1)
+    apply()
+  })
+  const end = (e, cancelled) => {
+    if (!ui.ptrs.has(e.pointerId)) return
+    ui.ptrs.delete(e.pointerId)
+    const g = ui.g
+    if (!g) return
+    if (g.kind === 'pinch') {
+      if (ui.ptrs.size) return
+      ui.g = null
+      if (ui.st.scale < LB_MIN + 0.03) ui.st = { scale: 1, x: 0, y: 0 }
+      ui.st = clampPan(ui.st, fit(), view()); apply({ anim: true })
+      return
+    }
+    ui.g = null
+    if (cancelled) { ui.drag = { x: 0, y: 0 }; setFade(1); apply({ anim: true }); return }
+    if (!g.moved) return tap(e, g)
+    if (g.st0.scale > LB_MIN + 0.01 || g.type === 'mouse') return
+    const v = view()
+    const d = swipeDecision({ dx: e.clientX - g.x0, dy: e.clientY - g.y0, dt: Date.now() - g.t0, scale: ui.st.scale, vw: v.w, index: ui.index, count: ui.items.length })
+    if (d === 'close') return close({ swiped: true })
+    setFade(1)
+    if (d === 'next' || d === 'prev') { go(d === 'next' ? 1 : -1); return }
+    ui.drag = { x: 0, y: 0 }; apply({ anim: true })
+  }
+  stage.addEventListener('pointerup', (e) => end(e, false))
+  stage.addEventListener('pointercancel', (e) => end(e, true))
+  stage.addEventListener('lostpointercapture', (e) => { if (ui.ptrs.has(e.pointerId)) end(e, true) })
+  // Our own double-tap: stop the browser's double-tap zoom and dblclick text selection here.
+  stage.addEventListener('dblclick', (e) => e.preventDefault())
+  stage.addEventListener('wheel', (e) => {
+    e.preventDefault()
+    if (!e.ctrlKey && ui.st.scale > LB_MIN + 0.01 && !e.shiftKey) {
+      ui.st = clampPan({ scale: ui.st.scale, x: ui.st.x - e.deltaX, y: ui.st.y - e.deltaY }, fit(), view()); apply(); return
+    }
+    zoomTo(ui.st.scale * wheelFactor(e.deltaY, { ctrl: e.ctrlKey, lines: e.deltaMode === 1 }), e.clientX, e.clientY, false)
+  }, { passive: false })
+  // Safari's own pinch events: ours handles the pinch, the page stays put.
+  for (const t of ['gesturestart', 'gesturechange']) stage.addEventListener(t, (e) => e.preventDefault())
+
+  // Keys while open: Esc, ← →, and Tab kept inside.
+  window.addEventListener('keydown', (e) => {
+    if (root.hidden) return
+    if (e.key === 'Escape') { e.preventDefault(); e.stopImmediatePropagation(); close(); return }
+    if ((e.key === 'ArrowRight' || e.key === 'ArrowLeft') && !e.metaKey && !e.ctrlKey && !e.altKey) { e.preventDefault(); e.stopImmediatePropagation(); go(e.key === 'ArrowRight' ? 1 : -1); return }
+    if ((e.key === '+' || e.key === '=') && !e.metaKey && !e.ctrlKey) { e.preventDefault(); e.stopImmediatePropagation(); const r = ui.stage.getBoundingClientRect(); zoomTo(ui.st.scale * 1.5, r.left + r.width / 2, r.top + r.height / 2, true); return }
+    if ((e.key === '-' || e.key === '0') && !e.metaKey && !e.ctrlKey) { e.preventDefault(); e.stopImmediatePropagation(); ui.st = { scale: 1, x: 0, y: 0 }; apply({ anim: true }); return }
+    if (e.key === 'Tab') {
+      const f = [...root.querySelectorAll('a[href], button')].filter((b) => !b.hidden && !b.disabled && b.offsetParent !== null)
+      if (!f.length) { e.preventDefault(); root.focus(); return }
+      const i = f.indexOf(document.activeElement)
+      e.preventDefault(); e.stopImmediatePropagation()
+      const n = e.shiftKey ? (i <= 0 ? f.length - 1 : i - 1) : (i < 0 || i >= f.length - 1 ? 0 : i + 1)
+      f[n].focus()
+    }
+  }, true)
+  // Focus never leaves the dialog while it's open.
+  document.addEventListener('focusin', (e) => { if (!root.hidden && !ui.closing && !root.contains(e.target)) ui.x.focus({ preventScroll: true }) })
+}
+
+function tap(e, g) {
+  const cur = { t: Date.now(), x: e.clientX, y: e.clientY }
+  if (isDoubleTap(ui.lastTap, cur)) {
+    clearTimeout(ui.tapT); ui.lastTap = null
+    const p = viewPoint(e.clientX, e.clientY)
+    ui.st = toggleZoom(ui.st, p.x, p.y, fit(), view())
+    apply({ anim: true })
+    return
+  }
+  ui.lastTap = cur
+  const act = () => { if (!g.onImg && ui.st.scale <= LB_MIN + 0.01) close(); else if (g.type === 'mouse') showBar(); else toggleBar() }
+  clearTimeout(ui.tapT)
+  if (g.type === 'mouse' && !g.onImg) return act() // a click on the backdrop closes at once
+  if (g.type === 'mouse') { showBar(); return }
+  ui.tapT = setTimeout(act, LB_DOUBLE_MS) // a touch waits to see if a second tap follows
+}
+
+// opts: { items: [{ name, sizeLabel, thumb, load: () => Promise<url>, w, h, el }],
+// index, from (the thumbnail tapped), refocus: () => element to focus after }
+export function openLightbox(opts) {
+  if (!ui) build()
+  const { root } = ui
+  clearTimeout(ui.closing); ui.closing = 0
+  ui.opts = opts
+  ui.items = (opts.items || []).map((it) => ({ ...it }))
+  ui.lastTap = null; ui.ptrs.clear(); ui.g = null
+  root.classList.remove('lb-out', 'lb-in', 'lb-idle')
+  root.hidden = false
+  document.documentElement.classList.add('lb-open')
+  setFade(1)
+  const i = Math.max(0, Math.min(ui.items.length - 1, opts.index || 0))
+  show(i)
+  root.classList.toggle('lb-fine', finePointer())
+  // grow out of the thumbnail when there is one on screen; otherwise a quick fade
+  const el = opts.from
+  const r = el && el.getBoundingClientRect ? el.getBoundingClientRect() : null
+  const f = fit(), v = view()
+  if (!reduced()) {
+    if (r && r.width > 4 && r.height > 4 && f.w > 0 && r.bottom > 0 && r.top < v.H) {
+      const k = Math.max(r.width / f.w, r.height / f.h)
+      const sr = ui.stage.getBoundingClientRect()
+      const save = ui.st
+      ui.st = { scale: k, x: r.left + r.width / 2 - (sr.left + sr.width / 2) - v.cx, y: r.top + r.height / 2 - (sr.top + sr.height / 2) - v.cy }
+      apply()
+      ui.root.dataset.scale = '1.000'
+      void ui.img.offsetWidth
+      ui.st = save
+    }
+    void root.offsetWidth
+    root.classList.add('lb-in')
+    apply({ anim: true })
+  } else { root.classList.add('lb-in'); apply() }
+  ui.x.focus({ preventScroll: true })
+  showBar()
+}
+
+export function closeLightbox(o) { if (ui && !ui.root.hidden) close(o) }
+export function lightboxOpen() { return !!(ui && !ui.root.hidden && !ui.closing) }
+
+function close({ swiped = false } = {}) {
+  if (!ui || ui.root.hidden || ui.closing) return
+  const { root } = ui
+  clearTimeout(ui.tapT); clearTimeout(ui.idleT)
+  const opts = ui.opts || {}
+  const finish = () => {
+    ui.closing = 0
+    root.hidden = true
+    root.classList.remove('lb-out', 'lb-in', 'lb-anim', 'lb-zoomed', 'lb-idle')
+    ui.img.removeAttribute('src'); ui.token++
+    ui.items = []; ui.opts = null
+    setFade(1)
+    document.documentElement.classList.remove('lb-open')
+    let t = null
+    try { t = opts.refocus ? opts.refocus() : null } catch {}
+    if (!t || !t.isConnected) t = opts.from && opts.from.isConnected ? opts.from : null
+    if (t) t.focus({ preventScroll: true })
+    if (opts.onClose) try { opts.onClose() } catch {}
+  }
+  if (reduced()) return finish()
+  if (swiped) { ui.drag = { x: 0, y: ui.drag.y + view().H * 0.25 }; apply({ anim: true }) }
+  root.classList.add('lb-out')
+  ui.closing = setTimeout(finish, 170)
+}

package/ui/live-status.js

@@ -12,6 +12,10 @@
 //     └─► failed                       └─► stopped (the turn ended with no answer)
 //   received/working with nothing new for LIVE_QUIET_MS reads "quiet" until
 //   something happens again; replied and failed are final.
+//   A message that arrived while Claude was already working on another one is
+//   folded into that turn (folded: the id of the message that owns the turn):
+//   it has no Working bubble of its own, and when the turn ends it is
+//   "Answered with the reply above".
 
 export const LIVE_QUIET_MS = 3 * 60 * 1000
 export const LIVE_PHASES = ['sent', 'received', 'working', 'replied', 'stopped', 'failed']
@@ -22,7 +26,7 @@ const clip = (s, n) => { const t = String(s == null ? '' : s).replace(/\s+/g, '
 export function initStatus(at = 0) { return { phase: 'sent', at, last: at, tool: null, waiting: null, ran: [], endedAt: null } }
 
 // One thing that happened to the message. ev: { type, at, tool?, detail?, asked?, text? }
-//   delivered | failed | started | tool | tool_done | ask | ask_done | text | reply | ended
+//   delivered | failed | started | tool | tool_done | ask | ask_done | text | reply | ended | folded | answered | lost
 export function stepStatus(st, ev = {}) {
   const s = { ...(st || initStatus(ev.at || 0)), ran: [...((st && st.ran) || [])] }
   const at = ev.at || s.last
@@ -31,18 +35,21 @@ export function stepStatus(st, ev = {}) {
     case 'delivered': if (s.phase === 'sent') s.phase = 'received'; break
     case 'failed': if (s.phase === 'sent') { s.phase = 'failed'; s.error = ev.error || null; s.endedAt = at } break
     case 'started': case 'text': if (s.phase !== 'replied') s.phase = 'working'; if (ev.type === 'text') s.waiting = null; break
-    case 'tool': s.phase = 'working'; s.tool = { name: clip(ev.tool, 40), detail: clip(ev.detail, 80) }; s.waiting = null; break
+    case 'tool': s.phase = 'working'; s.tool = { name: clip(ev.tool, 40), detail: clip(ev.detail, 300) }; s.waiting = null; break
     case 'tool_done': {
       const name = clip(ev.tool || (s.tool && s.tool.name), 40)
-      if (name) s.ran.push({ tool: name, detail: clip(ev.detail || (s.tool && s.tool.detail), 80), asked: !!ev.asked })
+      if (name) s.ran.push({ tool: name, detail: clip(ev.detail || (s.tool && s.tool.detail), 300), asked: !!ev.asked })
       if (s.ran.length > 20) s.ran = s.ran.slice(-20)
       s.tool = null; s.waiting = null
       break
     }
-    case 'ask': s.phase = 'working'; s.waiting = { tool: clip(ev.tool, 40), detail: clip(ev.detail, 80) }; break
+    case 'ask': s.phase = 'working'; s.waiting = { tool: clip(ev.tool, 40), detail: clip(ev.detail, 300) }; break
     case 'ask_done': s.waiting = null; break
     case 'reply': s.phase = 'replied'; s.tool = null; s.waiting = null; s.endedAt = at; break
     case 'ended': s.tool = null; s.waiting = null; s.endedAt = at; s.phase = ev.text ? 'replied' : 'stopped'; break
+    case 'folded': if (s.phase === 'sent' || s.phase === 'received') s.phase = 'working'; s.folded = ev.owner || true; s.tool = null; s.waiting = null; break
+    case 'answered': s.phase = 'replied'; s.folded = ev.owner || s.folded || true; s.tool = null; s.waiting = null; s.endedAt = at; break // folded: the reply above is its answer
+    case 'lost': s.tool = null; s.waiting = null; s.endedAt = at; s.phase = 'stopped'; s.lost = true; break // a restart came in between and no answer is in the transcript
     default: return s
   }
   s.last = at
@@ -52,22 +59,23 @@ export function stepStatus(st, ev = {}) {
 // The line under the message: { label, steps, spin, tone, elapsedMs }
 export function statusView(st, now = Date.now()) {
   if (!st) return null
-  const quiet = (st.phase === 'received' || st.phase === 'working') && now - (st.last || st.at) >= LIVE_QUIET_MS
+  const quiet = !st.folded && (st.phase === 'received' || st.phase === 'working') && now - (st.last || st.at) >= LIVE_QUIET_MS
   const elapsedMs = Math.max(0, (st.endedAt || now) - (st.at || now))
   let label
   if (st.phase === 'sent') label = 'Sent, waiting for the session'
   else if (st.phase === 'received') label = quiet ? 'Received · no word from Claude yet' : 'Received · Claude is starting…'
+  else if (st.phase === 'working' && st.folded) label = 'Taken into the turn above'
   else if (st.phase === 'working') {
     if (st.waiting) label = 'Waiting for your OK' + (st.waiting.tool ? ' (' + st.waiting.tool + (st.waiting.detail ? ': ' + st.waiting.detail : '') + ')' : '')
     else if (st.tool) label = 'Claude is working… (running ' + st.tool.name + (st.tool.detail ? ': ' + st.tool.detail : '') + ')'
     else label = quiet ? 'Claude has been quiet for a while (check the terminal)' : 'Claude is working…'
-  } else if (st.phase === 'replied') label = 'Replied'
-  else if (st.phase === 'stopped') label = 'Stopped without a reply'
+  } else if (st.phase === 'replied') label = st.folded ? 'Answered with the reply above' : 'Replied'
+  else if (st.phase === 'stopped') label = st.lost ? 'No reply recorded' : 'Stopped without a reply'
   else label = 'Didn’t arrive'
   const at = { sent: 0, received: 1, working: 2, replied: 3, stopped: 3, failed: 0 }[st.phase] || 0
-  const steps = ['Sent', 'Received', st.phase === 'stopped' ? 'Stopped' : 'Working', st.phase === 'stopped' ? null : 'Replied'].filter(Boolean)
+  const steps = ['Sent', 'Received', st.phase === 'stopped' ? (st.lost ? 'No reply' : 'Stopped') : 'Working', st.phase === 'stopped' ? null : 'Replied'].filter(Boolean)
     .map((name, i) => ({ name, state: st.phase === 'failed' ? (i === 0 ? 'bad' : 'todo') : i < at ? 'done' : i === at ? (FINAL.has(st.phase) || st.phase === 'stopped' ? 'done' : 'now') : 'todo' }))
-  const spin = !quiet && (st.phase === 'sent' || st.phase === 'received' || st.phase === 'working') && !st.waiting
+  const spin = !quiet && !st.folded && (st.phase === 'sent' || st.phase === 'received' || st.phase === 'working') && !st.waiting
   const tone = st.phase === 'failed' ? 'bad' : st.phase === 'stopped' || quiet || st.waiting ? 'warn' : st.phase === 'replied' ? 'good' : 'busy'
   return { label, steps, spin, tone, quiet, elapsedMs, final: FINAL.has(st.phase) || st.phase === 'stopped' }
 }