@leftoff/cli 0.9.8-beta.8 → 0.9.8

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

@@ -38,7 +38,8 @@ export function stepStatus(st, ev = {}) {
     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), 300), asked: !!ev.asked })
+      // 0.9.8: the tool call's id (from the transcript) lets the board open its output
+      if (name) s.ran.push({ tool: name, detail: clip(ev.detail || (s.tool && s.tool.detail), 300), asked: !!ev.asked, ...(typeof ev.id === 'string' && ev.id && ev.id.length <= 120 ? { id: ev.id } : {}) })
       if (s.ran.length > 20) s.ran = s.ran.slice(-20)
       s.tool = null; s.waiting = null
       break

package/ui/live-view.js

@@ -4,6 +4,7 @@
 // page, messages are diffed in, and it sticks to the bottom only when you are
 // already there.
 import { statusView, elapsedText, ranWithoutAsking } from './live-status.js'
+import { parseAttachedLines } from './attach.js'
 
 const clip = (s, n) => { const t = String(s == null ? '' : s).replace(/\s+/g, ' ').trim(); return t.length > n ? t.slice(0, n - 1) + '…' : t }
 export const isLiveSession = (s) => !!(s && s.liveLink && s.liveLink.on && !s.endedAt && s.live !== 'closed')
@@ -191,11 +192,24 @@ function timeHtml(iso, { esc, now }) {
   const full = new Date(Date.parse(iso)).toLocaleString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })
   return '<time class="faint" datetime="' + esc(new Date(Date.parse(iso)).toISOString()) + '" title="' + esc(full) + '">' + esc(label) + '</time>'
 }
-export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null }) {
+// 0.9.8: a message's attachments, as the board shows them (chips, not paths).
+// From the board's own log (m.attachments) or, for a message the transcript
+// gave back, its "Attached: …/checkpoints/uploads/…" lines.
+export function messageAttachments(m) {
+  if (!m || m.from !== 'you') return { text: (m && m.text) || '', attachments: [] }
+  if (Array.isArray(m.attachments) && m.attachments.length) return { text: m.text || '', attachments: m.attachments }
+  if (!/Attached: /.test(m.text || '')) return { text: m.text || '', attachments: [] }
+  return parseAttachedLines(m.text)
+}
+export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null, attHtml = null }) {
   const who = senderLabel(m)
   const title = m.from === 'you' ? senderTitle(m) : ''
   let body
   if (m.from === 'claude') body = '<div class="lv-text lv-md">' + (md ? md(m.text || '') : esc(m.text || '')) + '</div>'
+  else if (m.from === 'you') {
+    const a = messageAttachments(m)
+    body = (a.text || !a.attachments.length ? '<div class="lv-text lv-md">' + (md ? md(a.text) : esc(a.text)) + '</div>' : '') + (a.attachments.length && attHtml ? attHtml(a.attachments, m) : '')
+  } else if (m.from === 'terminal') body = '<div class="lv-text lv-md">' + (md ? md(m.text || '') : esc(m.text || '')) + '</div>'
   else body = '<div class="lv-text">' + esc(m.text || '') + '</div>'
   let foot = ''
   if (m.from === 'claude') {
@@ -235,7 +249,10 @@ export function midClip(s, n = 56) {
   const head = Math.ceil((n - 1) * 0.55)
   return t.slice(0, head) + '…' + t.slice(t.length - (n - 1 - head))
 }
-const toolLine = (name, detail, { esc, cls = '' }) => '<div class="lv-tool mono' + (cls ? ' ' + cls : '') + '"' + (detail ? ' title="' + esc(name + ' · ' + detail) + '"' : '') + '>' + esc(name) + (detail ? ' · ' + esc(midClip(detail)) : '') + '</div>'
+const toolLine = (name, detail, { esc, cls = '', id = null }) => id
+  // 0.9.8 What it did: a tool that finished is a button that opens its output
+  ? '<button type="button" class="lv-tool mono' + (cls ? ' ' + cls : '') + ' lv-tool-open" data-action="lv-tool-open" data-tool="' + esc(id) + '" data-label="' + esc(name + (detail ? ' · ' + detail : '')) + '" aria-label="' + esc('Show output: ' + name + (detail ? ' · ' + detail : '')) + '">' + esc(name) + (detail ? ' · ' + esc(midClip(detail)) : '') + '</button>'
+  : '<div class="lv-tool mono' + (cls ? ' ' + cls : '') + '"' + (detail ? ' title="' + esc(name + ' · ' + detail) + '"' : '') + '>' + esc(name) + (detail ? ' · ' + esc(midClip(detail)) : '') + '</div>'
 
 // The live line on Claude's side: spinner, "Working · 45s", what it is running now, the last few it ran.
 export function workingHtml(st, { esc, now = Date.now() }) {
@@ -249,7 +266,7 @@ export function workingHtml(st, { esc, now = Date.now() }) {
   else label = 'Working'
   let html = '<div class="lv-status lv-working ' + v.tone + '" data-since="' + esc(String(st.at || '')) + '" role="status"><div class="lvs-line">' + (v.spin ? '<span class="lv-spin" aria-hidden="true"></span>' : '') + '<span class="lvs-label">' + esc(label) + '</span><span class="lvs-sep" aria-hidden="true">·</span><span class="lvs-time">' + esc(elapsedText(v.elapsedMs)) + '</span></div>'
   const recent = (st.ran || []).slice(-3)
-  for (const r of recent) html += toolLine(r.tool, r.detail, { esc, cls: 'done' })
+  for (const r of recent) html += toolLine(r.tool, r.detail, { esc, cls: 'done' }) // compact while it works; the folded list after the turn opens each one
   if (st.waiting) html += toolLine(st.waiting.tool || 'a tool', st.waiting.detail, { esc, cls: 'now' })
   else if (st.tool) html += toolLine(st.tool.name, st.tool.detail, { esc, cls: 'now' })
   return html + '</div>'
@@ -263,7 +280,7 @@ export function toolsHtml(st, { esc, now = Date.now(), open = false }) {
   const what = bash ? (ran.length === 1 ? 'Ran 1 command' : 'Ran ' + ran.length + ' commands') : (ran.length === 1 ? 'Used 1 tool' : 'Used ' + ran.length + ' tools')
   const v = statusView(st, now)
   const time = v && v.final && st.endedAt ? ' · ' + elapsedText(v.elapsedMs) : ''
-  return '<details class="lv-tools"' + (open ? ' open' : '') + '><summary>' + esc(what + time) + '</summary>' + ran.map((r) => toolLine(r.tool, r.detail, { esc })).join('') + '</details>'
+  return '<details class="lv-tools"' + (open ? ' open' : '') + '><summary>' + esc(what + time) + '</summary>' + ran.map((r) => toolLine(r.tool, r.detail, { esc, id: r.id || null })).join('') + '</details>'
 }
 
 // Claude's side before its answer lands (or when none came): the same bubble the answer replaces.
@@ -308,7 +325,7 @@ export { ranWithoutAsking }
 // A content signature, to replace only the entries that changed (the time-ago
 // text is left out so a minute ticking over doesn't redraw a reply).
 function sigHash(s) { let h = 5381; for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0; return (h >>> 0).toString(36) }
-export function entrySig(m) { return JSON.stringify([m.text, m.state, m.status && [m.status.phase, m.status.tool, m.status.waiting, (m.status.ran || []).length, m.status.endedAt, m.status.folded || null], m.done, m.ranWithoutAsking, m.errorText]) }
+export function entrySig(m) { return JSON.stringify([m.text, (m.attachments || []).map((a) => a.id), m.state, m.status && [m.status.phase, m.status.tool, m.status.waiting, (m.status.ran || []).length, m.status.endedAt, m.status.folded || null], m.done, m.ranWithoutAsking, m.errorText]) }
 
 // ------------------------------------------------------------ the DOM keeper
 

package/ui/live-wake.js

@@ -0,0 +1,96 @@
+// 0.9.8: the board stays live after a phone wakes up.
+//
+// iOS suspends a Home Screen app (and its live-update long-poll or event
+// stream) when you switch away or lock the screen. A request that was in
+// flight then may never settle, so the stream can go quiet forever while the
+// page still shows a confident "Working · 5m" timer. The pieces here are
+// pure (unit tested in test/unit/livewake-098.test.mjs); ui/app.js wires them:
+// - the daemon sends a ping on the stream every HEARTBEAT_MS (a long-poll
+//   answers at least that often), and a stream with nothing for STREAM_DEAD_MS
+//   is closed and opened again (with backoff), then the view refetches
+// - coming back (visible, pageshow, focus, online) refetches at once
+// - while a Live message on screen is still going, its thread is polled every
+//   POLL_MS, so a dead stream can't leave a Working bubble behind
+// - a pending bubble whose data is older than STALE_MS says "Reconnecting…"
+
+export const HEARTBEAT_MS = 15000 // the daemon's stream ping (src/server.js)
+export const STREAM_DEAD_MS = 2 * HEARTBEAT_MS + 5000
+export const POLL_MS = 5000
+export const STALE_MS = 15000
+export const AWAY_MS = 2000 // focus or visible after less than this in the background isn't a wake-up (unless the stream died)
+
+const PENDING = new Set(['sent', 'received', 'working'])
+
+// A board message whose turn is still going (its bubble spins or waits).
+export function isPending(m) {
+  const st = m && m.status
+  return !!(st && PENDING.has(st.phase))
+}
+export function anyPending(msgs) { return (msgs || []).some(isPending) }
+
+// Should the Live thread be polled right now?
+export function shouldPoll({ visible = true, onLive = false, pending = false } = {}) {
+  return !!(visible && onLive && pending)
+}
+
+// Has the stream been silent longer than a ping allows?
+export function streamDead(lastAt, now = Date.now(), limit = STREAM_DEAD_MS) {
+  if (!lastAt) return false
+  return now - lastAt > limit
+}
+
+// Is what the page shows too old to trust a running timer?
+export function isStale(okAt, now = Date.now(), limit = STALE_MS) {
+  if (!okAt) return false
+  return now - okAt > limit
+}
+
+// Reconnect delays: 1 s, 2 s, 4 s … at most 30 s.
+export function backoffMs(attempt) {
+  const n = Math.max(0, Math.floor(Number(attempt) || 0))
+  return Math.min(30000, 1000 * 2 ** Math.min(n, 5))
+}
+
+// What a refetch compares: has anything in the thread changed?
+export function liveSignature(msgs) {
+  return (msgs || []).map((m) => {
+    const st = m.status || {}
+    return [m.id || m.key || '', m.from || '', st.phase || '', st.tool ? st.tool.name : '', st.waiting ? 'w' : '', st.endedAt || '', m.text ? String(m.text).length : 0].join(':')
+  }).join('|')
+}
+
+// Which reasons to refetch: coming back to the page or the network.
+export function wakeReason(type, { visibilityState = 'visible', persisted = false } = {}) {
+  if (type === 'visibilitychange') return visibilityState === 'visible' ? 'visible' : null
+  if (type === 'pageshow') return persisted ? 'pageshow-bfcache' : null // a plain pageshow is the first load, already fetching
+  if (type === 'focus' || type === 'online') return type
+  return null
+}
+
+// Coalesce wake-ups (visible + focus + pageshow all fire together on iOS).
+export function createWake({ now = () => Date.now(), minGapMs = 1500 } = {}) {
+  let last = 0
+  return {
+    due() { const t = now(); if (t - last < minGapMs) return false; last = t; return true },
+    reset() { last = 0 },
+  }
+}
+
+// The stream watchdog: call seen() on every event or ping, check() on a timer.
+// check() answers 'ok', or 'dead' once (then waits for the reconnect's delay).
+export function createWatchdog({ now = () => Date.now(), limit = STREAM_DEAD_MS } = {}) {
+  let lastAt = now(), attempt = 0, nextAt = 0
+  return {
+    seen() { lastAt = now(); attempt = 0; nextAt = 0 },
+    opened() { lastAt = now() },
+    check() {
+      const t = now()
+      if (!streamDead(lastAt, t, limit)) return 'ok'
+      if (t < nextAt) return 'wait'
+      nextAt = t + backoffMs(attempt++)
+      return 'dead'
+    },
+    get lastAt() { return lastAt },
+    get attempt() { return attempt },
+  }
+}

package/ui/machines.js

@@ -41,3 +41,20 @@ export function machineEmojis(names, chosen = {}) {
   for (const n of all) if (!out[n]) { out[n] = defaultEmoji(n, taken); taken.add(out[n]) }
   return out
 }
+
+// 0.9.8: the board's Machine filter is saved in the browser (cp.machine). A
+// filter left on (picked once to find another Mac's session) quietly hid every
+// other Mac's sessions, and with them that Mac's space tab, on that browser
+// only. A saved filter is used only while the board still knows that Mac (or
+// agent); '' = every Mac.
+export function boardMachineFilter(saved, { machines = [], agents = [] } = {}) {
+  const m = String(saved || '')
+  if (!m) return ''
+  if (!machines.length && !agents.length) return m // the board hasn't heard yet
+  return machines.includes(m) || agents.includes(m) ? m : ''
+}
+// The line a filtered board shows: whose sessions these are.
+export function machineOnlyLabel(m, { machines = [], agents = [] } = {}) {
+  if (!m) return ''
+  return agents.includes(m) && !machines.includes(m) ? 'Only ' + m + '’s items' : 'Only ' + m + '’s sessions'
+}