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

package/ui/pdfview.js

@@ -0,0 +1,510 @@
+// A full-screen PDF preview (0.9.8), in the image preview's family: a dark
+// backdrop, a top bar (name, size, "page 3 of 12", Download, ×), the pages
+// stacked and scrolled, fit to the width, drawn to canvases with pdf.js only
+// when they're near the screen, crisp on a retina screen. Pinch, ctrl+wheel,
+// + / − and a double tap (fit ↔ 2x) zoom. Esc or × closes; focus goes back to
+// what opened it.
+//
+// pdf.js (ui/vendor/pdfjs, Apache-2.0; scripts/vendor-pdfjs.mjs) loads from the
+// board's own origin the first time a PDF is opened, never with the board, and
+// within the board's CSP: its worker is a same-origin file (worker-src 'self'),
+// no WebAssembly, no eval, no blob: or data: URLs (the pages are canvases).
+// The pure parts first (unit-tested: test/unit/pdfview-098.test.mjs); the DOM
+// part only runs in a browser.
+
+export const PV_MIN = 1 // fit to the width
+export const PV_MAX = 5
+export const PV_ZOOM = 2 // a double tap: fit ↔ 2x
+export const PV_STEP = 1.25 // + / −
+export const PV_GAP = 12 // px between pages, and around them
+export const PV_MAX_W = 960 // a page never fits wider than this (a big desktop screen)
+export const PV_MAX_PX = 12e6 // canvas pixels per page (iOS Safari refuses ~16.7M, and its canvas memory is small)
+export const PV_KEEP = 3 // pages a canvas is kept for either side of the screen
+export const PV_DOUBLE_MS = 300
+export const PV_DOUBLE_DIST = 30
+export const PDFJS_URL = '/vendor/pdfjs/pdf.min.js'
+export const PDFJS_WORKER_URL = '/vendor/pdfjs/pdf.worker.min.js'
+
+const num = (v, d) => (typeof v === 'number' && isFinite(v) ? v : d)
+export function clampZoom(z) { return Math.min(PV_MAX, Math.max(PV_MIN, num(z, PV_MIN))) }
+export const pageText = (i, n) => (n > 0 ? 'page ' + (Math.min(n, Math.max(1, i + 1))) + ' of ' + n : '')
+
+// The width a page fits to at zoom 1: the view less the gaps, never wider than PV_MAX_W.
+export function fitWidth(viewW, { gap = PV_GAP, maxW = PV_MAX_W } = {}) {
+  return Math.max(40, Math.min(maxW, num(viewW, 0) - gap * 2))
+}
+
+// Where every page sits: sizes are the pages' own (points), all scaled by one
+// factor so the widest page fills `fitW * zoom`; centred across `viewW`.
+// -> { scale (CSS px per point), w: [], h: [], top: [], left: [], width, height }
+export function layoutPages(sizes, { fitW, zoom = 1, viewW = 0, gap = PV_GAP, top = 0 } = {}) {
+  const maxW = Math.max(1, ...sizes.map((s) => num(s && s.w, 0)))
+  const scale = (num(fitW, 1) * clampZoom(zoom)) / maxW
+  const w = [], h = [], tops = [], lefts = []
+  const width = Math.max(num(viewW, 0), maxW * scale + gap * 2)
+  let y = top + gap
+  for (const s of sizes) {
+    const pw = num(s && s.w, maxW) * scale, ph = num(s && s.h, maxW * 1.294) * scale
+    w.push(pw); h.push(ph); tops.push(y); lefts.push((width - pw) / 2)
+    y += ph + gap
+  }
+  return { scale, w, h, top: tops, left: lefts, width, height: y }
+}
+
+// The pages any part of which is within [y0 - margin, y1 + margin]: [first, last], or [-1, -1].
+export function visibleRange(tops, heights, scrollTop, viewH, margin = 0) {
+  const y0 = scrollTop - margin, y1 = scrollTop + viewH + margin
+  let first = -1, last = -1
+  for (let i = 0; i < tops.length; i++) {
+    if (tops[i] + heights[i] > y0 && tops[i] < y1) { if (first < 0) first = i; last = i } else if (first >= 0) break
+  }
+  return [first, last]
+}
+
+// The page "page N of M" names: the one that fills most of the view; scrolled
+// to the very end, the last one (a short last page never gets most of the view).
+export function currentPage(tops, heights, scrollTop, viewH, { atEnd = false } = {}) {
+  const n = tops.length
+  if (!n) return 0
+  if (atEnd) return n - 1
+  let best = 0, area = -1
+  for (let i = 0; i < n; i++) {
+    const a = Math.min(tops[i] + heights[i], scrollTop + viewH) - Math.max(tops[i], scrollTop)
+    if (a > area + 0.5) { area = a; best = i }
+    if (tops[i] > scrollTop + viewH) break
+  }
+  return best
+}
+
+// Canvas pixels per CSS pixel: the screen's own ratio, less when the page
+// would pass PV_MAX_PX (then the canvas is stretched a little; zoomed far in).
+export function renderRatio(cssW, cssH, dpr = 1, maxPx = PV_MAX_PX) {
+  const r = Math.max(1, num(dpr, 1)), a = Math.max(1, num(cssW, 1) * num(cssH, 1))
+  return Math.max(0.25, Math.min(r, Math.sqrt(maxPx / a)))
+}
+
+// A point in the view -> which page it's on and where (0..1 across, down),
+// so a zoom keeps the same spot of the same page under the fingers.
+export function anchorAt(L, x, y) {
+  const n = L.top.length
+  if (!n) return { i: 0, fx: 0.5, fy: 0 }
+  let i = 0
+  while (i < n - 1 && y > L.top[i] + L.h[i] + PV_GAP / 2) i++
+  const fx = (x - L.left[i]) / Math.max(1, L.w[i]), fy = (y - L.top[i]) / Math.max(1, L.h[i])
+  return { i, fx: Math.min(1, Math.max(0, fx)), fy: Math.min(1, Math.max(0, fy)) }
+}
+// …and back: the scroll that puts that spot at (px, py) of the view, clamped.
+export function scrollFor(L, a, px, py, viewW, viewH) {
+  const i = Math.min(L.top.length - 1, Math.max(0, a.i))
+  if (i < 0) return { left: 0, top: 0 }
+  const left = L.left[i] + a.fx * L.w[i] - px, top = L.top[i] + a.fy * L.h[i] - py
+  return { left: Math.round(Math.min(Math.max(0, L.width - viewW), Math.max(0, left))), top: Math.round(Math.min(Math.max(0, L.height - viewH), Math.max(0, top))) }
+}
+
+// ctrl+wheel (a trackpad pinch, or ctrl + mouse wheel): a smooth factor.
+export function wheelZoom(deltaY, { lines = false } = {}) {
+  const d = num(deltaY, 0) * (lines ? 16 : 1)
+  return Math.exp(-Math.max(-120, Math.min(120, d)) * 0.01)
+}
+export function isDoubleTap(prev, cur, { ms = PV_DOUBLE_MS, dist = PV_DOUBLE_DIST } = {}) {
+  return !!(prev && cur && cur.t - prev.t <= ms && Math.hypot(cur.x - prev.x, cur.y - prev.y) <= dist)
+}
+// A PDF pdf.js can't show: encrypted (it asks for a password) or not a PDF.
+export function cantPreview(e) {
+  const n = String((e && e.name) || '')
+  return n === 'PasswordException' || n === 'InvalidPDFException' || n === 'FormatError' || n === 'UnknownErrorException' || n === 'MissingPDFException' || /password|invalid pdf|corrupt/i.test(String((e && e.message) || ''))
+}
+
+// ------------------------------------------------------------- pdf.js, lazily
+let libP = null
+export function loadPdfjs() {
+  if (!libP) {
+    libP = import(PDFJS_URL).then((lib) => { lib.GlobalWorkerOptions.workerSrc = PDFJS_WORKER_URL; return lib })
+    libP.catch(() => { libP = null }) // a failed load (offline) tries again next time
+  }
+  return libP
+}
+// Everything the board's CSP can't take is off: no WebAssembly decoders, no
+// eval, no font or CMap fetches (missing fonts come from the system).
+const DOC_OPTS = { useWasm: false, isEvalSupported: false, enableXfa: false, useSystemFonts: true, disableFontFace: false, stopAtErrors: false, isOffscreenCanvasSupported: true }
+export async function openPdf(bytes) {
+  const lib = await loadPdfjs()
+  return lib.getDocument({ data: bytes, ...DOC_OPTS }).promise
+}
+
+// The first page as a small JPEG (base64, under maxBytes), for a sent PDF's
+// bubble; null when it can't be drawn.
+export async function pdfThumb(file, { edge = 320, maxBytes = 60 * 1024 } = {}) {
+  let doc = null
+  try {
+    doc = await openPdf(new Uint8Array(await file.arrayBuffer()))
+    const page = await doc.getPage(1)
+    const v1 = page.getViewport({ scale: 1 })
+    const k = edge / Math.max(v1.width, v1.height)
+    const vp = page.getViewport({ scale: k })
+    const c = document.createElement('canvas')
+    c.width = Math.max(1, Math.round(vp.width)); c.height = Math.max(1, Math.round(vp.height))
+    const ctx = c.getContext('2d')
+    ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, c.width, c.height)
+    await page.render({ canvas: c, canvasContext: ctx, viewport: vp, background: '#fff' }).promise
+    for (const q of [0.8, 0.65, 0.5, 0.35]) {
+      const b = await new Promise((r) => c.toBlob(r, 'image/jpeg', q))
+      if (b && b.size <= maxBytes) {
+        const u8 = new Uint8Array(await b.arrayBuffer())
+        let s = ''; for (let i = 0; i < u8.length; i += 0x8000) s += String.fromCharCode.apply(null, u8.subarray(i, i + 0x8000))
+        c.width = 0; c.height = 0
+        return btoa(s)
+      }
+    }
+    return null
+  } catch { return null } finally { if (doc) try { doc.destroy() } catch {} }
+}
+
+// ------------------------------------------------------------------ the DOM
+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 MINUS_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="M5 12h14"/></svg>'
+const PLUS_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="M5 12h14M12 5v14"/></svg>'
+
+let ui = null
+const reduced = () => !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+const finePointer = () => !!(window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches)
+
+function build() {
+  const root = document.createElement('div')
+  root.className = 'pdfview'
+  root.id = 'pdfview'
+  root.hidden = true
+  root.tabIndex = -1
+  root.setAttribute('role', 'dialog')
+  root.setAttribute('aria-modal', 'true')
+  root.setAttribute('aria-label', 'PDF preview')
+  root.innerHTML =
+    '<div class="pv-scroll" tabindex="0" aria-label="Pages"><div class="pv-stack"></div></div>' +
+    '<div class="pv-msg" hidden><span class="pv-spin spin" aria-hidden="true"></span><span class="pv-msg-text"></span><a class="lb-btn pv-msg-dl" role="button" hidden>' + DL_IC + '<span>Download</span></a></div>' +
+    '<div class="pv-bar">' +
+      '<div class="lb-meta"><span class="lb-name pv-name"></span><span class="lb-sub"><span class="lb-size pv-size"></span><span class="lb-count pv-count" aria-live="polite"></span></span></div>' +
+      '<button type="button" class="lb-btn pv-zoom pv-out" aria-label="Zoom out" title="Zoom out (−)">' + MINUS_IC + '</button>' +
+      '<button type="button" class="lb-btn pv-zoom pv-in" aria-label="Zoom in" title="Zoom in (+)">' + PLUS_IC + '</button>' +
+      '<a class="lb-btn lb-dl pv-dl" role="button" aria-disabled="true">' + DL_IC + '<span class="lb-dl-label">Download</span></a>' +
+      '<button type="button" class="lb-btn lb-x pv-x" aria-label="Close" title="Close (Esc)">' + X_IC + '</button>' +
+    '</div>'
+  document.body.appendChild(root)
+  const q = (s) => root.querySelector(s)
+  ui = { root, scroll: q('.pv-scroll'), stack: q('.pv-stack'), msg: q('.pv-msg'), msgText: q('.pv-msg-text'), msgDl: q('.pv-msg-dl'), spin: q('.pv-spin'), bar: q('.pv-bar'), name: q('.pv-name'), size: q('.pv-size'), count: q('.pv-count'), dl: q('.pv-dl'), x: q('.pv-x'), zin: q('.pv-in'), zout: q('.pv-out'),
+    doc: null, sizes: [], pages: [], L: null, zoom: 1, token: 0, opts: null, closing: 0, raf: 0, renderT: 0, running: 0, pinch: null, lastTap: null, cur: -1 }
+  wire()
+  return ui
+}
+
+// The view the pages scroll in: under the bar.
+function barH() { return ui.bar.getBoundingClientRect().height || 56 }
+function relayout(anchor) {
+  if (!ui.sizes.length) return
+  const vw = ui.scroll.clientWidth, vh = ui.scroll.clientHeight
+  const a = anchor || (ui.L ? anchorAt(ui.L, ui.scroll.scrollLeft + vw / 2, ui.scroll.scrollTop + barH()) : null)
+  const L = layoutPages(ui.sizes, { fitW: fitWidth(vw), zoom: ui.zoom, viewW: vw, top: barH() })
+  ui.L = L
+  ui.stack.style.width = L.width + 'px'
+  ui.stack.style.height = L.height + 'px'
+  for (let i = 0; i < ui.pages.length; i++) {
+    const p = ui.pages[i]
+    p.el.style.left = L.left[i] + 'px'; p.el.style.top = L.top[i] + 'px'
+    p.el.style.width = L.w[i] + 'px'; p.el.style.height = L.h[i] + 'px'
+  }
+  if (a) {
+    const px = anchor && anchor.px != null ? anchor.px : vw / 2, py = anchor && anchor.py != null ? anchor.py : barH()
+    const s = scrollFor(L, a, px, py, vw, vh)
+    ui.scroll.scrollLeft = s.left; ui.scroll.scrollTop = s.top
+  }
+  ui.root.classList.toggle('pv-zoomed', ui.zoom > PV_MIN + 0.01)
+  ui.root.dataset.zoom = ui.zoom.toFixed(3)
+  ui.zout.disabled = ui.zoom <= PV_MIN + 0.001
+  ui.zin.disabled = ui.zoom >= PV_MAX - 0.001
+  schedule()
+}
+
+function schedule() { if (!ui.raf) ui.raf = requestAnimationFrame(() => { ui.raf = 0; update() }) }
+function update() {
+  if (!ui || ui.root.hidden || !ui.L) return
+  const L = ui.L, st = ui.scroll.scrollTop, vh = ui.scroll.clientHeight
+  const atEnd = st + vh >= ui.scroll.scrollHeight - 2 && st > 0
+  const bh = barH() // the bar sits over the top of the view
+  const cur = currentPage(L.top, L.h, st + bh, Math.max(1, vh - bh), { atEnd })
+  if (cur !== ui.cur) { ui.cur = cur; ui.count.textContent = pageText(cur, ui.pages.length); ui.root.dataset.page = String(cur + 1) }
+  // draw what's on screen first, then a screen's worth either side
+  const [a, b] = visibleRange(L.top, L.h, st, vh, vh)
+  const [s0, s1] = visibleRange(L.top, L.h, st, vh, 0)
+  for (let i = 0; i < ui.pages.length; i++) {
+    const p = ui.pages[i]
+    if (a < 0 || i < a - PV_KEEP || i > b + PV_KEEP) release(p)
+  }
+  clearTimeout(ui.renderT)
+  ui.renderT = setTimeout(() => {
+    if (!ui || ui.root.hidden || a < 0) return
+    const order = []
+    for (let i = s0; i <= s1 && i >= 0; i++) order.push(i)
+    for (let i = a; i <= b; i++) if (!order.includes(i)) order.push(i)
+    ui.want = order
+    pump()
+  }, ui.pinch ? 400 : 60)
+}
+function release(p) {
+  if (p.task) { try { p.task.cancel() } catch {} p.task = null }
+  if (p.canvas) { p.canvas.width = 0; p.canvas.height = 0; p.canvas.remove(); p.canvas = null; p.key = null; p.el.classList.remove('pv-drawn') }
+}
+// Two at a time; each page drawn at the zoom it's shown at, swapped in when done.
+function pump() {
+  while (ui.running < 2 && ui.want && ui.want.length) {
+    const i = ui.want.shift(), p = ui.pages[i]
+    const w = ui.L.w[i], h = ui.L.h[i], r = renderRatio(w, h, window.devicePixelRatio || 1)
+    const key = Math.round(w * r) + 'x' + Math.round(h * r)
+    if (p.key === key || p.task) continue
+    ui.running++
+    draw(p, i, key, r).finally(() => { if (ui) { ui.running--; pump() } })
+  }
+}
+async function draw(p, i, key, r) {
+  const tok = ui.token
+  try {
+    const page = p.page || (p.page = await ui.doc.getPage(i + 1))
+    if (tok !== ui.token) return
+    const vp = page.getViewport({ scale: ui.L.scale * r })
+    const c = document.createElement('canvas')
+    c.width = Math.max(1, Math.round(vp.width)); c.height = Math.max(1, Math.round(vp.height))
+    c.className = 'pv-canvas'
+    c.setAttribute('aria-hidden', 'true')
+    const task = page.render({ canvas: c, canvasContext: c.getContext('2d'), viewport: vp, background: '#fff' })
+    p.task = task
+    await task.promise
+    p.task = null
+    if (tok !== ui.token) { c.width = 0; return }
+    if (p.canvas) { p.canvas.width = 0; p.canvas.remove() }
+    p.canvas = c; p.key = key
+    p.el.appendChild(c)
+    p.el.classList.add('pv-drawn')
+  } catch (e) {
+    p.task = null
+    if (e && e.name === 'RenderingCancelledException') return
+    if (tok === ui.token) p.el.classList.add('pv-failed')
+  }
+}
+
+function setZoom(z, px, py) {
+  const next = clampZoom(z)
+  if (Math.abs(next - ui.zoom) < 0.001 || !ui.L) return
+  const vw = ui.scroll.clientWidth, vh = ui.scroll.clientHeight
+  if (px == null) { px = vw / 2; py = vh / 2 }
+  const a = anchorAt(ui.L, ui.scroll.scrollLeft + px, ui.scroll.scrollTop + py)
+  ui.zoom = next
+  relayout({ ...a, px, py })
+}
+const viewPoint = (cx, cy) => { const r = ui.scroll.getBoundingClientRect(); return [cx - r.left, cy - r.top] }
+
+function wire() {
+  const { root, scroll } = ui
+  ui.x.addEventListener('click', () => close())
+  ui.zin.addEventListener('click', () => setZoom(ui.zoom * PV_STEP))
+  ui.zout.addEventListener('click', () => setZoom(ui.zoom / PV_STEP))
+  scroll.addEventListener('scroll', () => schedule(), { passive: true })
+  // ctrl+wheel: a trackpad pinch on a Mac, or ctrl + the mouse wheel
+  scroll.addEventListener('wheel', (e) => {
+    if (!e.ctrlKey && !e.metaKey) return
+    e.preventDefault()
+    const [px, py] = viewPoint(e.clientX, e.clientY)
+    setZoom(ui.zoom * wheelZoom(e.deltaY, { lines: e.deltaMode === 1 }), px, py)
+  }, { passive: false })
+  scroll.addEventListener('dblclick', (e) => {
+    if (e.sourceCapabilities && e.sourceCapabilities.firesTouchEvents) return
+    const [px, py] = viewPoint(e.clientX, e.clientY)
+    setZoom(ui.zoom > PV_MIN + 0.01 ? PV_MIN : PV_ZOOM, px, py)
+  })
+  // Touch: one finger scrolls (the browser's own, with momentum); two pinch
+  // (our own, so the page itself never zooms); a double tap toggles 2x.
+  const dist = (t) => Math.hypot(t[0].clientX - t[1].clientX, t[0].clientY - t[1].clientY)
+  const mid = (t) => [(t[0].clientX + t[1].clientX) / 2, (t[0].clientY + t[1].clientY) / 2]
+  scroll.addEventListener('touchstart', (e) => {
+    if (e.touches.length === 2 && ui.L) {
+      e.preventDefault()
+      const [cx, cy] = mid(e.touches), [px, py] = viewPoint(cx, cy)
+      ui.pinch = { d0: Math.max(10, dist(e.touches)), z0: ui.zoom, px, py, cx, cy, k: 1, a: anchorAt(ui.L, scroll.scrollLeft + px, scroll.scrollTop + py) }
+      ui.lastTap = null
+      const sr = ui.stack.getBoundingClientRect()
+      ui.stack.style.transformOrigin = (cx - sr.left) + 'px ' + (cy - sr.top) + 'px'
+    } else if (e.touches.length === 1) ui.touch = { x: e.touches[0].clientX, y: e.touches[0].clientY, t: Date.now(), moved: false }
+    else ui.touch = null
+  }, { passive: false })
+  scroll.addEventListener('touchmove', (e) => {
+    if (ui.pinch && e.touches.length >= 2) {
+      e.preventDefault()
+      const k = clampZoom(ui.pinch.z0 * (dist(e.touches) / ui.pinch.d0)) / ui.pinch.z0
+      const [cx, cy] = mid(e.touches)
+      ui.pinch.k = k; ui.pinch.mx = cx; ui.pinch.my = cy
+      ui.stack.style.transform = 'translate(' + (cx - ui.pinch.cx) + 'px, ' + (cy - ui.pinch.cy) + 'px) scale(' + k + ')'
+      return
+    }
+    if (ui.touch && e.touches.length === 1 && Math.hypot(e.touches[0].clientX - ui.touch.x, e.touches[0].clientY - ui.touch.y) > 10) ui.touch.moved = true
+  }, { passive: false })
+  const endPinch = () => {
+    const p = ui.pinch; ui.pinch = null
+    ui.stack.style.transform = ''; ui.stack.style.transformOrigin = ''
+    const [px, py] = p.mx != null ? viewPoint(p.mx, p.my) : [p.px, p.py]
+    ui.zoom = clampZoom(p.z0 * p.k)
+    relayout({ ...p.a, px, py })
+  }
+  scroll.addEventListener('touchend', (e) => {
+    if (ui.pinch) { if (e.touches.length < 2) { e.preventDefault(); endPinch() } return }
+    const t = ui.touch; ui.touch = null
+    if (!t || t.moved || e.touches.length || Date.now() - t.t > 400) { ui.lastTap = null; return }
+    const cur = { t: Date.now(), x: t.x, y: t.y }
+    if (isDoubleTap(ui.lastTap, cur)) {
+      e.preventDefault(); ui.lastTap = null
+      const [px, py] = viewPoint(cur.x, cur.y)
+      setZoom(ui.zoom > PV_MIN + 0.01 ? PV_MIN : PV_ZOOM, px, py)
+    } else ui.lastTap = cur
+  }, { passive: false })
+  scroll.addEventListener('touchcancel', () => { if (ui.pinch) endPinch(); ui.touch = null })
+  // Safari's own pinch on the page underneath: not while this is open
+  for (const t of ['gesturestart', 'gesturechange']) root.addEventListener(t, (e) => e.preventDefault(), { passive: false })
+  window.addEventListener('resize', () => { if (ui && !root.hidden) relayout() })
+  window.addEventListener('keydown', (e) => {
+    if (root.hidden) return
+    if (e.key === 'Escape') { e.preventDefault(); e.stopImmediatePropagation(); close(); return }
+    if (!e.metaKey && !e.ctrlKey && !e.altKey) {
+      if (e.key === '+' || e.key === '=') { e.preventDefault(); e.stopImmediatePropagation(); setZoom(ui.zoom * PV_STEP); return }
+      if (e.key === '-' || e.key === '_') { e.preventDefault(); e.stopImmediatePropagation(); setZoom(ui.zoom / PV_STEP); return }
+      if (e.key === '0') { e.preventDefault(); e.stopImmediatePropagation(); setZoom(PV_MIN); return }
+    }
+    if (e.key === 'Tab') {
+      const f = [ui.scroll, ...root.querySelectorAll('.pv-bar a[href], .pv-bar button, .pv-msg a[href]')].filter((b) => !b.hidden && !b.disabled && b.offsetParent !== null)
+      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)
+      if (f[n]) f[n].focus()
+    }
+  }, true)
+  document.addEventListener('focusin', (e) => { if (!root.hidden && !ui.closing && !root.contains(e.target)) ui.scroll.focus({ preventScroll: true }) })
+}
+
+function message(text, { spin = false, download = false } = {}) {
+  ui.msg.hidden = !text
+  ui.msgText.textContent = text || ''
+  ui.spin.hidden = !spin
+  const href = ui.dl.getAttribute('href')
+  ui.msgDl.hidden = !(download && href)
+  if (download && href) { ui.msgDl.setAttribute('href', href); ui.msgDl.setAttribute('download', ui.dl.getAttribute('download') || 'file.pdf') }
+}
+function setDownload(url, name) {
+  if (url) { ui.dl.setAttribute('href', url); ui.dl.setAttribute('download', name || 'file.pdf'); ui.dl.removeAttribute('aria-disabled') }
+  else { ui.dl.removeAttribute('href'); ui.dl.removeAttribute('download'); ui.dl.setAttribute('aria-disabled', 'true') }
+}
+
+// opts: { name, sizeLabel, load: () => Promise<{ bytes: Uint8Array, url? }>,
+//   download (false: nothing to download yet, a file still in the box),
+//   from (what opened it), refocus: () => element to focus after }
+export async function openPdfView(opts) {
+  if (!ui) build()
+  const { root } = ui
+  clearTimeout(ui.closing); ui.closing = 0
+  teardown()
+  const tok = ++ui.token
+  ui.opts = opts
+  ui.zoom = PV_MIN; ui.cur = -1; ui.L = null; ui.sizes = []; ui.pages = []
+  ui.stack.innerHTML = ''; ui.stack.style.width = ''; ui.stack.style.height = ''
+  ui.name.textContent = opts.name || 'PDF'
+  ui.size.textContent = opts.sizeLabel || ''
+  ui.count.textContent = ''
+  ui.dl.hidden = opts.download === false
+  setDownload(null)
+  root.classList.remove('pv-out', 'pv-in', 'pv-zoomed', 'pv-failed-doc')
+  root.classList.toggle('pv-fine', finePointer())
+  root.hidden = false
+  document.documentElement.classList.add('pv-open')
+  void root.offsetWidth
+  root.classList.add('pv-in')
+  ui.scroll.focus({ preventScroll: true })
+  message('Opening…', { spin: true })
+  let got, phase = 'load'
+  const lib = loadPdfjs() // the file and the renderer come at the same time
+  lib.catch(() => {})
+  try {
+    got = await opts.load()
+    if (tok !== ui.token) return
+    if (got && got.url && opts.download !== false) setDownload(got.url, opts.name)
+    phase = 'lib'
+    await lib
+    phase = 'pdf'
+    const doc = await openPdf(got.bytes)
+    if (tok !== ui.token) { try { doc.destroy() } catch {} return }
+    ui.doc = doc
+    const n = doc.numPages
+    const p1 = await doc.getPage(1)
+    if (tok !== ui.token) return
+    const v1 = p1.getViewport({ scale: 1 })
+    ui.sizes = Array.from({ length: n }, () => ({ w: v1.width, h: v1.height }))
+    ui.pages = ui.sizes.map((_, i) => {
+      const el = document.createElement('div')
+      el.className = 'pv-page'
+      el.dataset.page = String(i + 1)
+      ui.stack.appendChild(el)
+      return { el, page: i === 0 ? p1 : null, canvas: null, task: null, key: null }
+    })
+    message('')
+    ui.scroll.scrollTop = 0; ui.scroll.scrollLeft = 0
+    relayout({ i: 0, fx: 0.5, fy: 0, px: ui.scroll.clientWidth / 2, py: barH() + PV_GAP })
+    root.dataset.pages = String(n)
+    // the other pages' own sizes, in the background (a mixed-size PDF re-lays itself out once)
+    if (n > 1) sizesLater(doc, tok, n)
+  } catch (e) {
+    if (tok !== ui.token) return
+    root.classList.add('pv-failed-doc')
+    // the file didn't come (the Mac is away) vs. pdf.js can't read it (encrypted, broken)
+    message(phase === 'pdf' || cantPreview(e) ? 'Can’t preview this PDF' : phase === 'lib' ? 'Couldn’t load the PDF viewer. Check your connection.' : 'Couldn’t open it: ' + ((e && e.message) || 'unknown error'), { download: true })
+  }
+}
+async function sizesLater(doc, tok, n) {
+  let changed = false
+  for (let i = 2; i <= n; i++) {
+    let pg
+    try { pg = await doc.getPage(i) } catch { continue }
+    if (tok !== ui.token) return
+    const v = pg.getViewport({ scale: 1 })
+    ui.pages[i - 1].page = pg
+    if (Math.abs(v.width - ui.sizes[i - 1].w) > 0.5 || Math.abs(v.height - ui.sizes[i - 1].h) > 0.5) { ui.sizes[i - 1] = { w: v.width, h: v.height }; changed = true }
+    if (changed && (i % 20 === 0 || i === n)) { changed = false; relayout() }
+  }
+}
+function teardown() {
+  if (!ui) return
+  for (const p of ui.pages || []) release(p)
+  clearTimeout(ui.renderT); ui.want = []; ui.pinch = null; ui.touch = null; ui.lastTap = null
+  if (ui.raf) { cancelAnimationFrame(ui.raf); ui.raf = 0 }
+  if (ui.doc) { try { ui.doc.destroy() } catch {} ui.doc = null }
+  ui.stack.style.transform = ''
+}
+
+export function closePdfView() { if (ui && !ui.root.hidden) close() }
+export function pdfViewOpen() { return !!(ui && !ui.root.hidden && !ui.closing) }
+
+function close() {
+  if (!ui || ui.root.hidden || ui.closing) return
+  const { root } = ui
+  const opts = ui.opts || {}
+  ui.token++
+  const finish = () => {
+    ui.closing = 0
+    teardown()
+    root.hidden = true
+    root.classList.remove('pv-out', 'pv-in')
+    ui.stack.innerHTML = ''; ui.pages = []; ui.sizes = []; ui.L = null; ui.opts = null
+    setDownload(null)
+    document.documentElement.classList.remove('pv-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 (reduced()) return finish()
+  root.classList.add('pv-out')
+  ui.closing = setTimeout(finish, 160)
+}

package/ui/prs.js

@@ -47,17 +47,22 @@ export function cardPrsHtml(prs) {
 }
 
 // The session page: its PRs with Unlink, and "Link a PR" (a text box: a URL or #number).
-export function sessionPrsSection(s, { mayEdit = true } = {}) {
+export function sessionPrsSection(s, { mayEdit = true, open = null, details = {} } = {}) {
   const list = (s.prs || []).filter((p) => p && p.number)
   let h = '<h2>Pull requests' + (list.length ? ' <span class="count">' + list.length + '</span>' : '') + '</h2>'
   if (list.length) {
     h += '<div class="prlist">' + list.map((p) => {
       const url = safeUrl(p.url)
-      return '<div class="prrow slim"><div class="pr-main">' +
+      // 0.9.8: tap the title (or Details) for the same details as the PRs page, in place; GitHub ↗ still goes out
+      const isOpen = !!(open && open.has && open.has(p.url))
+      return '<article class="prrow slim' + (isOpen ? ' open' : '') + '" data-pr="' + esc(p.url) + '"><div class="pr-main">' +
         '<div class="pr-line1"><span class="pr-num">#' + esc(p.number) + '</span>' + stateHtml(p.state) + checksHtml(p.checks) + '</div>' +
-        '<div class="pr-title">' + (url ? '<a href="' + esc(url) + '" target="_blank" rel="noopener noreferrer">' + esc(p.title || 'Pull request #' + p.number) + ' ↗</a>' : esc(p.title || '')) + '</div>' +
-        '<div class="pr-meta">' + esc(p.repo || '') + (whyText(p) ? ' · <span class="pr-why">' + esc(whyText(p)) + '</span>' : '') + '</div></div>' +
-        (mayEdit ? '<button type="button" class="btn sm" data-action="pr-unlink" data-id="' + esc(s.id) + '" data-url="' + esc(p.url) + '">Unlink</button>' : '') + '</div>'
+        '<div class="pr-title"><button type="button" class="linkish pr-title-btn" data-action="pr-expand" data-url="' + esc(p.url) + '" aria-expanded="' + isOpen + '">' + esc(p.title || 'Pull request #' + p.number) + '</button></div>' +
+        '<div class="pr-meta">' + esc(p.repo || '') + (whyText(p) ? ' · <span class="pr-why">' + esc(whyText(p)) + '</span>' : '') + '</div>' +
+        (isOpen ? prDetailHtml(p, details && details[p.url], {}) : '') + '</div>' +
+        '<div class="pr-actions"><button type="button" class="btn sm pr-toggle" data-action="pr-expand" data-url="' + esc(p.url) + '" aria-expanded="' + isOpen + '">' + (isOpen ? 'Less ▴' : 'Details ▾') + '</button>' +
+        (url ? '<a class="btn sm" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer">GitHub ↗</a>' : '') +
+        (mayEdit ? '<button type="button" class="btn sm" data-action="pr-unlink" data-id="' + esc(s.id) + '" data-url="' + esc(p.url) + '">Unlink</button>' : '') + '</div></article>'
     }).join('') + '</div>'
   } else h += '<div class="nocp">No pull requests linked yet. They link on their own from gh pr create, PR links in the chat, or the branch.</div>'
   if (mayEdit) h += '<form class="prlink addform sess-add" data-pr-link="' + esc(s.id) + '" autocomplete="off"><input name="ref" type="text" inputmode="url" placeholder="Link a PR: paste its link or #number" aria-label="Link a PR: paste its link or #number" autocapitalize="off" spellcheck="false" enterkeyhint="done"><button type="submit" class="btn sm">Link</button></form>'