@leftoff/cli 0.9.8-beta.9 → 0.9.9-beta.1

package/ui/navhide.js

@@ -0,0 +1,35 @@
+// Hide the nav on scroll (phones, 0.9.8). Under 700px wide the top row and the
+// bottom tab bar slide away while you scroll down a page and come back when
+// you scroll up, reach the top or the very bottom, Safari style. Never while
+// you're typing, a menu or sheet is open, or the page barely scrolls. Pure
+// functions here (shared with the unit tests); app.js wires the scroll.
+
+export const NAVHIDE_DOWN = 10 // px scrolled down in one go before the bars go
+export const NAVHIDE_UP = 10 // px scrolled up in one go before they come back
+export const NAVHIDE_TOP = 56 // this near the top they always show
+export const NAVHIDE_BOTTOM = 8 // this near the very bottom they always show
+
+// What counts as typing: a focused field the keyboard is up for.
+export const NAVHIDE_TYPING = 'textarea, [contenteditable=""], [contenteditable="true"], input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"])'
+
+// One scroll reading → the next state. state: { hidden, anchor } where anchor
+// is where the current run of scrolling in one direction started. reading:
+// { y: scrollY, max: how far the page can scroll, blocked: typing / a menu
+// open / the bars held (a route change) }.
+export function navHideStep(state, { y = 0, max = 0, blocked = false } = {}) {
+  const at = Number(y) || 0
+  const prev = state && typeof state === 'object' ? state : { hidden: false, anchor: at } // no state yet: resting here
+  const room = Number(max) || 0
+  const show = { hidden: false, anchor: at }
+  if (blocked) return show
+  if (room < NAVHIDE_TOP + NAVHIDE_DOWN + NAVHIDE_BOTTOM) return show // too short to bother
+  if (at <= NAVHIDE_TOP) return show
+  if (at >= room - NAVHIDE_BOTTOM) return show
+  const anchor = Number.isFinite(prev.anchor) ? prev.anchor : at
+  if (prev.hidden) {
+    if (at > anchor) return { hidden: true, anchor: at } // still going down: follow it
+    return anchor - at >= NAVHIDE_UP ? show : { hidden: true, anchor }
+  }
+  if (at < anchor) return { hidden: false, anchor: at } // going up while shown: follow it
+  return at - anchor >= NAVHIDE_DOWN ? { hidden: true, anchor: at } : { hidden: false, anchor }
+}

package/ui/needs.js

@@ -9,6 +9,7 @@
 
 import { mdInline } from './changelog-md.js'
 import { tipHtml, tipId } from './tips.js'
+import { composerBoxHtml } from './composer.js'
 
 const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
 export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c])
@@ -41,7 +42,7 @@ export function needsLine(n) {
 // Dismiss (0.6.5): hides this one need on every board; a new question shows again.
 export function dismissButton(n) {
   if (!n || !n.key) return ''
-  return '<button type="button" class="need-dismiss" data-action="need-dismiss" data-need="' + esc(n.key) + '" aria-label="Dismiss" title="Dismiss: hide this one (a new question shows again)">✕</button>'
+  return '<button type="button" class="need-dismiss" data-action="need-dismiss" data-need="' + esc(n.key) + '" aria-label="Dismiss" data-tip="Dismiss: hide this one (a new question shows again)">✕</button>'
 }
 
 const KIND_LABEL = { permission: 'Needs your OK', question: 'Question', terminal: 'Waiting in the terminal', reply: 'Asked you', agent: 'Waiting on you' }
@@ -100,9 +101,9 @@ export function needPanel(n, opts = {}) {
   let h = '<article class="need k-' + esc(n.kind) + (n.blocking ? ' blocking' : '') + '" data-id="' + esc(s.id) + '"' + (askId ? ' data-ask="' + esc(askId) + '"' : '') + ' data-key="' + esc(key) + '"' + (n.key ? ' data-need="' + esc(n.key) + '"' : '') + '>'
   h += '<div class="need-head"><span class="need-dot" aria-hidden="true"></span>' +
     (opts.compact ? '' : '<a class="need-title" href="#/s/' + encodeURIComponent(s.id) + '">' + esc(s.title || 'Untitled session') + '</a>' + (s.repoLabel ? '<span class="chip mono">' + esc(s.repoLabel) + '</span>' : '')) +
-    (n.peer || (s.isLocal === false && s.machine) ? '<span class="chip machine remote" title="answered on that machine, through its Leftoff">⌂ ' + esc(n.peer || s.machine) + '</span>' : '') +
+    (n.peer || (s.isLocal === false && s.machine) ? '<span class="chip machine remote" data-tip="answered on that machine, through its Leftoff">⌂ ' + esc(n.peer || s.machine) + '</span>' : '') +
     '<span class="need-kind">' + esc(n.label || KIND_LABEL[n.kind] || '') + '</span>' +
-    (n.waitSec != null ? '<span class="need-wait" title="since ' + esc(n.since || '') + '">' + esc(waitLabel(n.waitSec)) + '</span>' : '') + dismissButton(n) + '</div>'
+    (n.waitSec != null ? '<span class="need-wait"' + (n.since ? ' data-tip="since ' + esc(n.since) + '"' : '') + '>' + esc(waitLabel(n.waitSec)) + '</span>' : '') + dismissButton(n) + '</div>'
   h += needContextHtml(n, opts) + prCardHtml(n.pr)
   if (n.kind === 'permission' && n.ask) {
     const d = n.ask.describe || {}
@@ -112,7 +113,7 @@ export function needPanel(n, opts = {}) {
     h += '<div class="need-actions">' +
       '<button type="button" class="btn allow" data-action="ask-answer" data-choice="allow"' + dis + '>Allow once</button>' +
       alwaysButton(n.ask, dis, { session: s }) +
-      (n.ask.canAllowSession === false ? '' : '<button type="button" class="btn" data-action="ask-answer" data-choice="allow_session"' + dis + ' title="Allow this and calls like it until this Claude Code session ends (kept to the session, never saved to settings)">Allow for this session</button>') + // 0.9.8: Live link allows one call at a time
+      (n.ask.canAllowSession === false ? '' : '<button type="button" class="btn" data-action="ask-answer" data-choice="allow_session"' + dis + ' data-tip="Allow this and calls like it until this Claude Code session ends (kept to the session, never saved to settings)">Allow for this session</button>') + // 0.9.8: Live link allows one call at a time
       '<button type="button" class="btn deny" data-action="ask-deny-open"' + dis + '>Deny…</button>' + go + '</div>' +
       '<div class="deny-form" hidden><input type="text" class="deny-note" maxlength="500" placeholder="Tell Claude why or what to do instead (optional)" value="' + esc(drafts['deny:' + askId] || '') + '" data-draft="deny:' + esc(askId) + '" data-submit="deny" aria-keyshortcuts="' + KBD_SUBMIT + '">' +
       '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny" data-submit-for="deny"' + dis + '>Deny' + kbdHint(opts) + '</button><button type="button" class="btn" data-action="ask-deny-close">Cancel</button></div>'
@@ -123,14 +124,14 @@ export function needPanel(n, opts = {}) {
       h += '<div class="need-q" data-q="' + qi + '" data-multi="' + (q.multiSelect ? '1' : '') + '">' +
         '<div class="qtext">' + (q.header ? '<span class="qhead">' + esc(q.header) + '</span>' : '') + esc(q.question) + '</div>'
       if (q.options.length) {
-        h += '<div class="opts">' + q.options.map((o) => '<button type="button" class="btn opt" data-action="' + (oneTap ? 'ask-pick-send' : 'ask-pick') + '" data-label="' + esc(o.label) + '" aria-pressed="false"' + dis + (o.description ? ' title="' + esc(o.description) + '"' : '') + '>' + esc(o.label) + (o.description ? '<small>' + esc(o.description) + '</small>' : '') + '</button>').join('') + '</div>'
+        h += '<div class="opts">' + q.options.map((o) => '<button type="button" class="btn opt" data-action="' + (oneTap ? 'ask-pick-send' : 'ask-pick') + '" data-label="' + esc(o.label) + '" aria-pressed="false"' + dis + '>' + esc(o.label) + (o.description ? '<small>' + esc(o.description) + '</small>' : '') + '</button>').join('') + '</div>'
       }
       h += '<input type="text" class="qother" maxlength="500" placeholder="' + (q.options.length ? 'Or type your own answer' : 'Your answer') + '" value="' + esc(drafts['q:' + askId + ':' + qi] || '') + '" data-draft="q:' + esc(askId) + ':' + qi + '" data-submit="answer" aria-keyshortcuts="' + KBD_SUBMIT + '"' + (may ? '' : ' disabled') + '>'
       h += '</div>'
     })
     h += quickRepliesHtml(n, dis)
     h += '<div class="need-actions">' + (oneTap ? '' : '') + '<button type="button" class="btn primary" data-action="ask-answer" data-choice="answer" data-submit-for="answer"' + dis + '>' + (oneTap ? 'Send typed answer' : 'Send answers') + kbdHint(opts) + '</button>' +
-      '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny"' + dis + ' title="Decline to answer; Claude carries on without it">Skip</button>' + go + '</div>'
+      '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny"' + dis + ' data-tip="Decline to answer; Claude carries on without it">Skip</button>' + go + '</div>'
   } else if (n.kind === 'terminal') {
     h += '<div class="need-what"><span class="verb">Claude Code says</span><span>' + esc(n.message || '') + '</span></div>' +
       '<div class="need-note">This one can only be answered in the terminal.' + (n.peerNote ? ' ' + esc(n.peerNote) + '.' : '') + '</div><div class="need-actions">' + go + '</div>'
@@ -138,8 +139,12 @@ export function needPanel(n, opts = {}) {
     h += '<blockquote class="need-question">' + esc(n.question || '') + '</blockquote>'
     if (n.replyPending) h += '<div class="need-note ok">Reply sent ' + esc(opts.agoFn ? opts.agoFn(n.replyPending.at) : '') + ': “' + esc(n.replyPending.text) + '”. Claude reads it as its next prompt.</div>'
     if (n.canReply) {
-      h += '<div class="reply-row"><textarea class="reply-text" rows="2" maxlength="4000" placeholder="Reply to Claude…" data-draft="reply:' + esc(s.id) + '" data-submit="reply" aria-keyshortcuts="' + KBD_SUBMIT + '"' + (may ? '' : ' disabled') + '>' + esc(drafts['reply:' + s.id] || '') + '</textarea>' +
-        '<button type="button" class="btn primary" data-action="reply-send" data-submit-for="reply"' + dis + '>Send' + kbdHint(opts) + '</button></div>' + quickRepliesHtml(n, dis) + '<div class="need-actions">' + go + '</div>'
+      // 0.9.8: the same composer as Live (ui/composer.js): rounded box, round ↑,
+      // Enter sends on a Mac (⌘↵ everywhere). A reply is text only (Claude reads
+      // it as its next prompt), so there is no 📎 here.
+      h += composerBoxHtml({ submit: 'reply', sendAction: 'reply-send', sid: s.id, draftKey: 'reply:' + s.id, draft: drafts['reply:' + s.id] || '',
+        may, busy: !!busy, placeholder: 'Reply to Claude…', label: 'Reply to Claude', boxClass: 'reply-composer', inputClass: 'reply-text',
+        attach: false, keys: opts.composerKeys || KBD_SUBMIT }) + quickRepliesHtml(n, dis) + '<div class="need-actions">' + go + '</div>'
     } else {
       h += '<div class="need-note">' + esc(n.why ? 'No reply box: ' + n.why + '.' : '') + '</div><div class="need-actions">' + go + '</div>'
     }
@@ -191,8 +196,8 @@ export function agentChipHtml(a = {}, { title } = {}) {
   const inner = esc(a.icon || '◆') + ' ' + esc(who)
   const t = esc(title || 'external agent · read-only')
   const url = httpsOnly(a.url)
-  return url ? '<a class="chip machine agent" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" title="' + t + '">' + inner + '</a>'
-    : '<span class="chip machine agent" title="' + t + '">' + inner + '</span>'
+  return url ? '<a class="chip machine agent" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" data-tip="' + t + '">' + inner + '</a>'
+    : '<span class="chip machine agent" data-tip="' + t + '">' + inner + '</span>'
 }
 // "From Tab · reply by texting Tab", or "From Tab · Read-only here".
 export function agentReplyNote(a = {}) {
@@ -408,7 +413,7 @@ export function prCardHtml(pr) {
   const inner = '<span class="pr-top"><span class="pr-num">#' + esc(pr.number) + '</span><span class="pr-state ' + esc(pr.state || 'open') + '">' + (pr.state === 'draft' ? 'Draft' : 'Open') + '</span>' +
     (ck.summary ? '<span class="pr-checks ' + cls + '">' + (icon ? '<span aria-hidden="true">' + icon + '</span> ' : '') + esc(ck.summary) + '</span>' : '') + '</span>' +
     '<span class="pr-title">' + esc(pr.title || '') + '</span>'
-  return url ? '<a class="need-pr" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" title="Open the pull request on GitHub">' + inner + '<span class="pr-go" aria-hidden="true">↗</span></a>'
+  return url ? '<a class="need-pr" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" data-tip="Open the pull request on GitHub">' + inner + '<span class="pr-go" aria-hidden="true">↗</span></a>'
     : '<div class="need-pr">' + inner + '</div>'
 }
 

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)
+}