@leftoff/cli 0.9.7 → 0.9.8-beta.10

package/ui/sw.js

@@ -1,8 +1,13 @@
-// Leftoff's service worker (v0.4.6). One job: when the Mac running Leftoff
-// can't be reached (Tailscale off on the phone, the Mac asleep, the daemon
-// stopped), a page navigation shows offline.html instead of Safari's error.
-// It caches nothing else: no API data, no board pages, no assets. Every other
-// request goes straight to the network, untouched.
+// Leftoff's service worker (v0.4.6). Two jobs:
+// 1. When the Mac running Leftoff can't be reached (Tailscale off on the
+//    phone, the Mac asleep, the daemon stopped), a page navigation shows
+//    offline.html instead of Safari's error. It caches nothing else: no API
+//    data, no board pages, no assets. Every other request goes straight to the
+//    network, untouched.
+// 2. (0.9.8) Phone notifications: a push from the Mac that owns a session
+//    becomes a notification (the session's title, one short line, a tag per
+//    session and kind so a burst replaces the last one), and a tap opens that
+//    session (its Live chat, or the permission card at the top).
 const CACHE = 'leftoff-offline-v1'
 const OFFLINE = ['/offline.html', '/offline.css', '/icon-192.png']
 
@@ -22,13 +27,68 @@ self.addEventListener('fetch', (event) => {
   if (req.mode === 'navigate') {
     // A 502/503/504 is Tailscale Serve saying the daemon behind it is down.
     // (The relay's own "Your Macs are asleep" page, x-leftoff-page, shows as is.)
-    event.respondWith(fetch(req).then((res) => (res.status >= 502 && res.status <= 504 && !res.headers.get('x-leftoff-page') ? offline() : res)).catch(offline))
+    // 0.9.7: never an endless blank page. The relay answers within a second
+    // (the board, or its own connecting page); anything slower than NAV_TIMEOUT_MS
+    // gets a page that says so, with Try again.
+    const net = fetch(req).then((res) => (res.status >= 502 && res.status <= 504 && !res.headers.get('x-leftoff-page') ? offline() : res)).catch(offline)
+    event.respondWith(Promise.race([net, new Promise((resolve) => setTimeout(() => resolve(slow(req.url)), NAV_TIMEOUT_MS))]))
     return
   }
   // The offline page's own files, so it renders with no network.
   if (OFFLINE.includes(url.pathname)) event.respondWith(fetch(req).catch(() => caches.match(url.pathname)))
 })
 
+const NAV_TIMEOUT_MS = 12000
+function slow(url) {
+  const esc = (s) => String(s).replace(/[&<>"']/g, (c) => '&#' + c.charCodeAt(0) + ';')
+  const body = '<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><meta name="color-scheme" content="light dark"><title>Leftoff · still waiting</title>' +
+    '<style>body{margin:0;font:16px/1.45 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;background:Canvas;color:CanvasText}main{max-width:460px;margin:0 auto;padding:max(48px,env(safe-area-inset-top)) 20px 40px}h1{font-size:26px;margin:0 0 10px}p{opacity:.75}a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;background:#d9622b;color:#fff;font-weight:600;text-decoration:none;margin-top:20px}</style></head>' +
+    '<body><main><h1>Leftoff is taking too long</h1><p>Your Mac hasn’t sent the board yet. It may be waking up.</p><a href="' + esc(url) + '">Try again</a></main></body></html>'
+  return new Response(body, { status: 504, headers: { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-store' } })
+}
+
 function offline() {
   return caches.match('/offline.html').then((r) => r || new Response('Leftoff is offline', { status: 503, headers: { 'content-type': 'text/plain' } }))
 }
+
+// ------------------------------------------------------------ notifications (0.9.8)
+
+// Safari must show every push (it takes the permission back after a few
+// silent ones), so only other browsers skip one for the session already on screen.
+const MAY_SKIP = /Chrome|CriOS|Firefox|FxiOS|Edg\//.test(self.navigator.userAgent || '')
+const sameSession = (clientUrl, url) => {
+  try { const a = new URL(clientUrl).hash, b = new URL(url, self.location.origin).hash; return !!b && b !== '#/' && (a === b || a.startsWith(b + '/') || a.startsWith(b + '?')) } catch { return false }
+}
+const windows = () => self.clients.matchAll({ type: 'window', includeUncontrolled: true })
+
+self.addEventListener('push', (event) => {
+  let d = {}
+  try { d = event.data ? event.data.json() : {} } catch { d = { body: event.data ? event.data.text() : '' } }
+  const url = typeof d.url === 'string' && d.url.startsWith('/') ? d.url : '/'
+  event.waitUntil((async () => {
+    if (MAY_SKIP && d.kind !== 'test') {
+      const on = (await windows()).some((c) => c.focused && c.visibilityState === 'visible' && sameSession(c.url, url))
+      if (on) return
+    }
+    await self.registration.showNotification(String(d.title || 'Leftoff').slice(0, 80), {
+      body: String(d.body || '').slice(0, 180), tag: d.tag || undefined, renotify: !!d.tag, icon: '/icon-192.png',
+      data: { url, kind: d.kind || null, sessionId: d.sessionId || null }, timestamp: Date.now(),
+    })
+  })())
+})
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close()
+  const url = new URL((event.notification.data && event.notification.data.url) || '/', self.location.origin).href
+  event.waitUntil((async () => {
+    const list = (await windows()).filter((c) => new URL(c.url).origin === self.location.origin)
+    const c = list.find((x) => x.focused) || list[0]
+    if (c) {
+      // the board routes by hash: tell the page (no reload), then bring it forward
+      c.postMessage({ type: 'leftoff-open', url })
+      try { await c.focus() } catch {}
+      return
+    }
+    await self.clients.openWindow(url)
+  })())
+})

package/ui/tabs.js

@@ -0,0 +1,216 @@
+// Tabs for sessions (0.9.8). The board is always the first tab and can't be
+// closed. Clicking a session opens it in ONE preview tab (its title in italics)
+// that the next click replaces, VS Code style; it stays open (permanent, with a
+// close ×) once you send a Live message in it, type there, choose Keep open or
+// double-click the tab, and a middle-click or ⌘/Ctrl-click opens a session
+// straight as permanent. The open set and its order are kept per device
+// (localStorage) and survive a reload; a deep link opens as the preview.
+//
+// The layout follows the window's WIDTH, never the device: under 700px no strip
+// (an Open row on the board, swipe or ‹ › between open sessions on a session
+// page); 700–1099px the strip with the rail as icons; from 1100px the full rail
+// and the strip. Pure functions over a plain model; app.js wires them.
+
+export const TABS_KEY = 'cp.tabs'
+export const MAX_TABS = 40
+export const NARROW_MAX = 699.98 // < 700: phones, a foldable closed
+export const WIDE_MIN = 1100 // ≥ 1100: iPad landscape, a Mac
+
+// 'narrow' | 'medium' | 'wide' for a CSS width
+export function layoutFor(width) {
+  const w = Number(width) || 0
+  return w < 700 ? 'narrow' : w < WIDE_MIN ? 'medium' : 'wide'
+}
+
+const clean = (e) => ({ id: String(e.id), title: typeof e.title === 'string' ? e.title.slice(0, 200) : '', preview: !!e.preview, ...(typeof e.hash === 'string' && e.hash.startsWith('#/s/') ? { hash: e.hash } : {}) })
+
+// Any stored or hand-made value → a valid model: string ids, no repeats, at most
+// one preview (the last one wins), at most MAX_TABS.
+export function normalize(raw) {
+  const list = raw && Array.isArray(raw.tabs) ? raw.tabs : []
+  const seen = new Set(), tabs = []
+  for (const e of list) {
+    if (!e || e.id == null || e.id === '' || seen.has(String(e.id))) continue
+    seen.add(String(e.id)); tabs.push(clean(e))
+  }
+  let pi = -1
+  tabs.forEach((t, i) => { if (t.preview) { if (pi >= 0) tabs[pi].preview = false; pi = i } })
+  return { tabs: tabs.slice(-MAX_TABS) }
+}
+export function emptyTabs() { return { tabs: [] } }
+export function parseStored(text) {
+  try { return normalize(JSON.parse(text || 'null')) } catch { return emptyTabs() }
+}
+export function serialize(m) { return JSON.stringify({ v: 1, tabs: normalize(m).tabs }) }
+
+export const indexOf = (m, id) => m.tabs.findIndex((t) => t.id === String(id))
+export const isOpen = (m, id) => indexOf(m, id) >= 0
+export const previewOf = (m) => m.tabs.find((t) => t.preview) || null
+
+// Open a session. Already open: it just gets focus (permanent promotes a preview).
+// Not open: as the preview, replacing the old preview in place; or, permanent,
+// appended at the end.
+export function openTab(m, id, { permanent = false, title, hash } = {}) {
+  const tabs = m.tabs.map((t) => ({ ...t }))
+  id = String(id)
+  const i = tabs.findIndex((t) => t.id === id)
+  const extra = { ...(title ? { title: String(title).slice(0, 200) } : {}), ...(hash && hash.startsWith('#/s/') ? { hash } : {}) }
+  if (i >= 0) {
+    Object.assign(tabs[i], extra)
+    if (permanent) tabs[i].preview = false
+    return { tabs }
+  }
+  const e = { id, title: '', preview: !permanent, ...extra }
+  const pi = tabs.findIndex((t) => t.preview)
+  if (!permanent && pi >= 0) tabs[pi] = e
+  else tabs.push(e)
+  // too many: the oldest permanent tab that isn't this one goes
+  while (tabs.length > MAX_TABS) { const k = tabs.findIndex((t) => t.id !== id); tabs.splice(k, 1) }
+  return { tabs }
+}
+
+// The preview becomes permanent (a Live message, typing there, Keep open, a double-click).
+export function promote(m, id) {
+  const i = indexOf(m, id)
+  if (i < 0 || !m.tabs[i].preview) return m
+  return { tabs: m.tabs.map((t, k) => (k === i ? { ...t, preview: false } : t)) }
+}
+
+// Keep a tab's title (shown while its session isn't loaded) and where in it you were.
+export function remember(m, id, { title, hash } = {}) {
+  const i = indexOf(m, id)
+  if (i < 0) return m
+  const t = m.tabs[i]
+  const nt = { ...t, ...(title && title !== t.title ? { title: String(title).slice(0, 200) } : {}), ...(hash && hash.startsWith('#/s/') && hash !== t.hash ? { hash } : {}) }
+  if (nt.title === t.title && nt.hash === t.hash) return m
+  return { tabs: m.tabs.map((x, k) => (k === i ? nt : x)) }
+}
+
+// Close a tab. When it was the one you're on, `next` is where to go: the
+// neighbour on the right, else the one on the left, else the board (null).
+export function closeTab(m, id, activeId = null) {
+  const i = indexOf(m, id)
+  if (i < 0) return { model: m, next: activeId == null ? null : String(activeId) }
+  const tabs = m.tabs.filter((_, k) => k !== i)
+  let next = activeId == null ? null : String(activeId)
+  if (String(id) === next) next = tabs.length ? (tabs[i] || tabs[i - 1]).id : null
+  return { model: { tabs }, next }
+}
+
+// Move a tab to another position (drag on the strip).
+export function moveTab(m, id, to) {
+  const i = indexOf(m, id)
+  if (i < 0) return m
+  const tabs = m.tabs.slice()
+  const [t] = tabs.splice(i, 1)
+  tabs.splice(Math.max(0, Math.min(tabs.length, to)), 0, t)
+  return { tabs }
+}
+
+// Where a session sits among the open ones (the phone's "2 of 4", swipe and ‹ ›).
+export function neighbours(m, id) {
+  const i = indexOf(m, id)
+  if (i < 0) return { index: 0, count: m.tabs.length, prev: null, next: null }
+  return { index: i + 1, count: m.tabs.length, prev: i > 0 ? m.tabs[i - 1].id : null, next: i < m.tabs.length - 1 ? m.tabs[i + 1].id : null }
+}
+
+// The session id a hash opens (#/s/<id>, #/s/<id>/live, #/s/<id>?hit=…), or null.
+export function sessionOfHash(hash) {
+  const h = String(hash || '').replace(/^#\/?/, '').split('?')[0]
+  const p = h.split('/').filter(Boolean)
+  if (p[0] !== 's' || !p[1]) return null
+  try { return decodeURIComponent(p[1]) } catch { return p[1] }
+}
+// Where a tab goes back to: its own page, keeping /live (not a search hit).
+export function tabHref(t) {
+  const base = '#/s/' + encodeURIComponent(t.id)
+  if (t.hash && sessionOfHash(t.hash) === t.id && t.hash.split('?')[0].endsWith('/live')) return base + '/live'
+  return base
+}
+export function keepHash(hash) { return String(hash || '').split('?')[0] }
+
+// What a tab shows for its session: the title, the Live pulse while Claude is
+// working (the Live chip's own signal), a dot when it needs you (the same as
+// Needs you). `session` may be missing (not loaded yet): the kept title, no marks.
+export function tabView(t, session, { title, working } = {}) {
+  const s = session || null
+  return {
+    id: t.id, preview: !!t.preview, href: tabHref(t),
+    title: (s && title ? title(s) : '') || t.title || 'Session',
+    working: !!(s && working && working(s)),
+    needs: !!(s && s.needsYou && !s.archived),
+  }
+}
+
+const X = '<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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>'
+const BOARD_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"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>'
+const DOTS = '<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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>'
+const PREV = '<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="m15 18-6-6 6-6"/></svg>'
+const NEXT = '<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="m9 18 6-6-6-6"/></svg>'
+
+// The marks after a title: a pulsing Live dot, or the red needs-you dot (both when both).
+function marks(v, esc) {
+  return (v.working ? '<span class="tab-live" title="Claude is working"><span class="lo-vh">, Claude is working</span></span>' : '') +
+    (v.needs ? '<span class="tab-need" title="Needs you"><span class="lo-vh">, needs you</span></span>' : '')
+}
+function label(v) { return (v.preview ? 'Preview: ' : '') + v.title + (v.working ? ' · Claude is working' : '') + (v.needs ? ' · needs you' : '') }
+
+// The strip (700px and up): Board, then the open sessions, then ⋯ (all of them).
+// The current tab is aria-current="true" (the current item of this set); the rail keeps "page".
+export function stripHtml(views, activeId, onBoard, esc) {
+  const board = '<a class="tab tab-board' + (onBoard ? ' on' : '') + '" href="#/" data-tab="board"' + (onBoard ? ' aria-current="true"' : '') + ' title="Board">' + BOARD_IC + '<span class="tab-t">Board</span></a>'
+  const tabs = views.map((v) => {
+    const on = v.id === activeId
+    return '<div class="tab-cell' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + '" data-tab-id="' + esc(v.id) + '">' +
+      '<a class="tab tab-s' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + '" href="' + esc(v.href) + '" data-tab="' + esc(v.id) + '"' + (on ? ' aria-current="true"' : '') + ' title="' + esc(v.title + (v.preview ? ' · preview: double-click to keep it open' : '')) + '" aria-label="' + esc(label(v)) + '" draggable="true">' +
+      '<span class="tab-t">' + esc(v.title) + '</span>' + marks(v, esc) + '</a>' +
+      (v.preview
+        ? '<button type="button" class="tab-x tab-keep" data-tab-keep="' + esc(v.id) + '" title="Keep open" aria-label="' + esc('Keep ' + v.title + ' open') + '"><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 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg></button>'
+        : '<button type="button" class="tab-x" data-tab-close="' + esc(v.id) + '" title="Close tab" aria-label="' + esc('Close ' + v.title) + '">' + X + '</button>') +
+      '</div>'
+  }).join('')
+  return '<div class="tabstrip-in">' + board + '<div class="tab-scroll" role="list">' + tabs + '</div></div>' +
+    '<button type="button" class="tab-all" id="tabAll" title="All open sessions" aria-label="All open sessions (' + views.length + ')" aria-haspopup="menu"' + (views.length ? '' : ' hidden') + '>' + DOTS + '</button>'
+}
+
+// The menu behind ⋯ (picker.js's action menu): every open session, in order.
+export function allTabsItems(views, activeId) {
+  return [{ label: 'Board', attrs: { 'data-tab-go': '#/' }, on: activeId == null }].concat(views.map((v) => ({
+    label: v.title + (v.preview ? ' (preview)' : ''), sub: [v.working ? 'Claude is working' : '', v.needs ? 'Needs you' : ''].filter(Boolean).join(' · ') || undefined,
+    on: v.id === activeId, attrs: { 'data-tab-go': v.href },
+  })))
+}
+
+// The phone's Open row on the board: the same order, the same marks, the preview in italics.
+export function openRowHtml(views, esc) {
+  if (!views.length) return ''
+  return '<div class="openrow-h"><span>Open</span><span class="faint">' + views.length + '</span></div><div class="openrow-chips">' + views.map((v) =>
+    '<span class="ochip-cell' + (v.preview ? ' preview' : '') + '"><a class="ochip' + (v.preview ? ' preview' : '') + '" href="' + esc(v.href) + '" data-tab="' + esc(v.id) + '" aria-label="' + esc(label(v)) + '"><span class="tab-t">' + esc(v.title) + '</span>' + marks(v, esc) + '</a>' +
+    (v.preview ? '' : '<button type="button" class="ochip-x" data-tab-close="' + esc(v.id) + '" aria-label="' + esc('Close ' + v.title) + '" title="Close">' + X + '</button>') + '</span>').join('') + '</div>'
+}
+
+// A session page on a phone: "2 of 4" with ‹ › (44px) for people who don't swipe,
+// and Keep open on a preview.
+export function pagerHtml(m, id, views, esc) {
+  const n = neighbours(m, id)
+  if (!n.index || n.count < 2) {
+    const v = views.find((x) => x.id === String(id))
+    return v && v.preview ? '<div class="pager-in"><span class="pager-n faint">Preview</span><button type="button" class="btn pager-keep" data-tab-keep="' + esc(v.id) + '">Keep open</button></div>' : ''
+  }
+  const byId = (x) => views.find((v) => v.id === x)
+  const v = byId(String(id))
+  const btn = (to, dir) => {
+    const t = to ? byId(to) : null
+    return t ? '<a class="pager-b pager-' + dir + '" href="' + esc(t.href) + '" data-tab="' + esc(t.id) + '" data-pager="' + dir + '" aria-label="' + esc((dir === 'prev' ? 'Previous: ' : 'Next: ') + t.title) + '" title="' + esc(t.title) + '">' + (dir === 'prev' ? PREV : NEXT) + '</a>'
+      : '<span class="pager-b pager-' + dir + ' off" aria-hidden="true">' + (dir === 'prev' ? PREV : NEXT) + '</span>'
+  }
+  return '<div class="pager-in">' + btn(n.prev, 'prev') + '<span class="pager-n" aria-live="polite">' + n.index + ' of ' + n.count + '<span class="lo-vh"> open sessions</span></span>' +
+    (v && v.preview ? '<button type="button" class="btn pager-keep" data-tab-keep="' + esc(v.id) + '">Keep open</button>' : '') + btn(n.next, 'next') + '</div>'
+}
+
+// A horizontal swipe on a phone's session page: which way, or null. Mostly
+// sideways (twice as far across as down), at least 60px, quick (under 700ms).
+export function swipeDir(dx, dy, ms) {
+  if (Math.abs(dx) < 60 || Math.abs(dx) < 2 * Math.abs(dy) || ms > 700) return null
+  return dx < 0 ? 'next' : 'prev'
+}

package/ui/tips.js

@@ -0,0 +1,117 @@
+// 0.9.8 info tips: a small ⓘ button beside a control, with the details in a
+// tooltip. Hover or keyboard focus on the ⓘ shows it (desktop); a tap pins it
+// open as a small popover (touch); a second tap, Escape or a click outside
+// closes it. The tip is a role="tooltip" the control and the ⓘ both point at
+// with aria-describedby, so screen readers get the words without opening it.
+// tipHtml() is pure (the unit tests read it); wireTips() runs once in the board.
+
+import { icon } from './icons.js'
+
+const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c])
+
+// A DOM id from any string (an ask id can carry anything).
+export const tipId = (scope, key) => 'tip-' + String(scope || 't').replace(/[^A-Za-z0-9_-]/g, '_') + '-' + String(key || 'x').replace(/[^A-Za-z0-9_-]/g, '_')
+
+// The ⓘ button and its (hidden) tooltip. `html` is already escaped markup.
+export function tipHtml({ id, label, html }) {
+  return '<button type="button" class="tip-btn" aria-label="' + esc(label) + '" aria-expanded="false" aria-controls="' + esc(id) + '" aria-describedby="' + esc(id) + '">' + icon('info') + '</button>' +
+    '<span class="tip" role="tooltip" id="' + esc(id) + '" hidden>' + html + '</span>'
+}
+
+const OPEN_DELAY = 120
+const CLOSE_DELAY = 180
+
+export function wireTips(doc = document) {
+  const win = doc.defaultView
+  let cur = null // { btn, tip, pinned }
+  let timer = 0
+  const later = (fn, ms) => { win.clearTimeout(timer); timer = win.setTimeout(fn, ms) }
+  const tipOf = (btn) => btn && doc.getElementById(btn.getAttribute('aria-controls'))
+
+  function place(btn, tip) {
+    const r = btn.getBoundingClientRect()
+    const vh = win.innerHeight
+    // kept on screen, and inside a small popover (Quick look) when it sits in one
+    const box = btn.closest('.quicklook')
+    const b = box ? box.getBoundingClientRect() : { left: 0, right: doc.documentElement.clientWidth }
+    const lo = b.left + 8
+    const hi = b.right - 8
+    tip.style.maxWidth = Math.min(320, hi - lo) + 'px'
+    const w = tip.offsetWidth
+    const h = tip.offsetHeight
+    let left = r.right - w // right-aligned with the ⓘ
+    left = Math.max(lo, Math.min(left, hi - w))
+    let top = r.bottom + 6
+    let up = false
+    if (top + h > vh - 8 && r.top - 6 - h >= 8) { top = r.top - 6 - h; up = true }
+    tip.style.left = Math.round(left) + 'px'
+    tip.style.top = Math.round(top) + 'px'
+    tip.classList.toggle('up', up)
+  }
+
+  function show(btn, pinned) {
+    const tip = tipOf(btn)
+    if (!tip) return
+    win.clearTimeout(timer)
+    if (cur && cur.btn !== btn) hide()
+    tip.hidden = false
+    btn.setAttribute('aria-expanded', 'true')
+    place(btn, tip)
+    cur = { btn, tip, pinned: !!pinned || !!(cur && cur.btn === btn && cur.pinned) }
+  }
+  function hide() {
+    win.clearTimeout(timer)
+    if (!cur) return
+    cur.tip.hidden = true
+    if (cur.btn.isConnected) cur.btn.setAttribute('aria-expanded', 'false')
+    cur = null
+  }
+  const inside = (t) => !!(cur && t && t.closest && (cur.btn.contains(t) || cur.tip.contains(t)))
+
+  doc.addEventListener('click', (e) => {
+    if (cur && !cur.tip.isConnected) cur = null // the list was redrawn under it
+    const btn = e.target.closest && e.target.closest('.tip-btn')
+    if (btn) {
+      e.preventDefault(); e.stopPropagation()
+      if (cur && cur.btn === btn && cur.pinned) return hide()
+      return show(btn, true)
+    }
+    if (cur && !inside(e.target)) hide()
+  }, true)
+  // Mouse: hover the ⓘ (or the tip itself, so it can be read and selected)
+  doc.addEventListener('pointerover', (e) => {
+    if (e.pointerType !== 'mouse') return
+    const btn = e.target.closest && e.target.closest('.tip-btn')
+    if (btn) return (cur && cur.btn === btn) ? win.clearTimeout(timer) : later(() => show(btn, false), OPEN_DELAY)
+    if (inside(e.target)) win.clearTimeout(timer)
+  })
+  doc.addEventListener('pointerout', (e) => {
+    if (e.pointerType !== 'mouse') return
+    const from = e.target.closest && e.target.closest('.tip-btn, .tip')
+    if (!from) return
+    if (inside(e.relatedTarget)) return
+    if (!cur) return win.clearTimeout(timer)
+    if (!cur.pinned) later(hide, CLOSE_DELAY)
+  })
+  // Keyboard: focus on the ⓘ shows it, leaving it hides it (unless tapped open)
+  doc.addEventListener('focusin', (e) => {
+    const btn = e.target.closest && e.target.closest('.tip-btn')
+    if (btn && btn.matches(':focus-visible')) show(btn, false)
+  })
+  doc.addEventListener('focusout', (e) => {
+    if (cur && !cur.pinned && e.target === cur.btn && !inside(e.relatedTarget)) hide()
+  })
+  // Escape closes it first (before Quick look or a dialog hears the key)
+  doc.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape' || !cur) return
+    e.preventDefault(); e.stopImmediatePropagation()
+    const b = cur.btn
+    const back = doc.activeElement && doc.activeElement !== b && cur.tip.contains(doc.activeElement)
+    hide()
+    if (back) b.focus()
+  }, true)
+  win.addEventListener('resize', () => { if (cur) place(cur.btn, cur.tip) })
+  win.addEventListener('scroll', () => { if (cur) { if (!cur.btn.isConnected) hide(); else place(cur.btn, cur.tip) } }, true)
+  return { hide, isOpen: () => !!cur }
+}