@leftoff/cli 0.9.1 → 0.9.4

package/ui/picker.js

@@ -283,8 +283,9 @@ function onKey(host, e) {
 // choosing one closes the menu. Same look as the selects' menu: under (or
 // above) the ⋯ on a desktop, a bottom sheet under 600px. Arrows, Home/End,
 // Enter/Space, Escape (focus back on the ⋯), Tab, and a tap outside closes.
-//   items: [{ label, icon (svg markup, optional), attrs: { 'data-action': …, 'data-id': … }, cls }]
-let act = null // { anchor, menu, backdrop, items }
+//   items: [{ label, icon (svg markup, optional), attrs: { 'data-action': …, 'data-id': … }, cls, sub, on }]
+//   plus { note } (a plain line) and { …item, more: { title, items } } (a › to a second page)
+let act = null // { anchor, menu, backdrop, items, page, up }
 export function actionMenuOpen() { return !!act }
 export function closeActionMenu({ focus = false } = {}) {
   if (!act) return
@@ -294,18 +295,22 @@ export function closeActionMenu({ focus = false } = {}) {
   anchor.setAttribute('aria-expanded', 'false')
   if (focus && anchor.isConnected) anchor.focus()
 }
-function placeAction() {
+// h: the height to place for (a page change animates to it); keep: stay on the
+// side of the ⋯ the menu opened on, so a second page doesn't make it jump.
+function placeAction({ h: hTo, keep = false } = {}) {
   if (!act) return
   const { menu, anchor } = act
   const vw = document.documentElement.clientWidth, vh = (window.visualViewport && window.visualViewport.height) || window.innerHeight
   if (menu.classList.contains('sheet')) { menu.style.maxHeight = Math.round(vh * 0.72) + 'px'; return }
   const r = anchor.getBoundingClientRect()
   const pad = 8
-  const w = menu.offsetWidth, h = menu.offsetHeight
-  const up = vh - r.bottom - pad < h + 6 && r.top - pad > vh - r.bottom - pad
+  const w = menu.offsetWidth, h = hTo || menu.offsetHeight
+  const up = keep && act.up != null ? act.up : vh - r.bottom - pad < h + 6 && r.top - pad > vh - r.bottom - pad
+  act.up = up
   // right edges line up (the ⋯ sits at the end of the row), never past the viewport
   menu.style.left = Math.max(pad, Math.min(r.right - w, vw - pad - w)) + 'px'
-  menu.style.top = (up ? Math.max(pad, r.top - 6 - h) : r.bottom + 6) + 'px'
+  // never past the bottom either (a taller second page can't fall off the screen)
+  menu.style.top = (up ? Math.max(pad, r.top - 6 - h) : Math.max(pad, Math.min(r.bottom + 6, vh - pad - h))) + 'px'
   menu.classList.toggle('up', up)
 }
 function actFocus(k) {
@@ -314,6 +319,44 @@ function actFocus(k) {
   if (!n) return
   act.items[((k % n) + n) % n].focus()
 }
+const SVG = (d, cls = 'ic') => '<svg class="' + cls + '" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">' + d + '</svg>'
+const ACT_NEXT = SVG('<path d="m9 18 6-6-6-6"/>', 'ic lo-act-chev')
+const ACT_BACK = SVG('<path d="m15 18-6-6 6-6"/>', 'ic lo-act-chev')
+const ACT_CHECK = SVG('<path d="M20 6 9 17l-5-5"/>', 'ic lo-act-check')
+const reducedMotion = () => !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+// 0.9.4: show page p of the menu (0 is the main one). The new page slides in
+// from the side it lives on and the menu's height eases to the new one (its
+// width is fixed), unless you asked for less motion.
+function actPage(p, { focus } = {}) {
+  if (!act) return
+  const { menu } = act
+  const to = menu.querySelector('.lo-act-page[data-page="' + p + '"]'), from = act.page
+  if (!to || !from || to === from) return
+  const back = p < Number(from.dataset.page)
+  const h0 = menu.offsetHeight
+  from.hidden = true; to.hidden = false
+  from.classList.remove('lo-in-fwd', 'lo-in-back')
+  act.page = to
+  act.items = [...to.querySelectorAll('[role="menuitem"]')]
+  menu.classList.toggle('on-sub', p > 0)
+  const h1 = menu.offsetHeight
+  if (!reducedMotion()) {
+    to.classList.remove('lo-in-fwd', 'lo-in-back'); void to.offsetWidth
+    to.classList.add(back ? 'lo-in-back' : 'lo-in-fwd')
+    if (h1 !== h0) {
+      menu.classList.remove('lo-act-sizing')
+      menu.style.height = h0 + 'px'; void menu.offsetHeight
+      menu.classList.add('lo-act-sizing')
+      menu.style.height = h1 + 'px'
+      let t = 0
+      const done = (e) => { if (e && e.target !== menu) return; clearTimeout(t); menu.removeEventListener('transitionend', done); if (act && act.menu === menu) { menu.style.height = ''; menu.classList.remove('lo-act-sizing') } }
+      menu.addEventListener('transitionend', done); t = setTimeout(done, 320)
+    }
+  }
+  placeAction({ h: h1, keep: true })
+  const el = focus || (p > 0 ? (to.querySelector('.lo-act.on') || act.items[1] || act.items[0]) : act.items[0])
+  if (el) el.focus({ preventScroll: true })
+}
 export function openActionMenu(anchor, items, { title = '' } = {}) {
   if (act && act.anchor === anchor) { closeActionMenu({ focus: true }); return null }
   closeActionMenu(); closeMenu()
@@ -324,30 +367,62 @@ export function openActionMenu(anchor, items, { title = '' } = {}) {
   menu.id = id
   menu.setAttribute('role', 'menu')
   if (title) menu.setAttribute('aria-label', title)
+  // 0.9.2: an item may carry a sub line ({ sub }) or be a plain line ({ note }:
+  // what the menu is about, read out as its description).
+  // 0.9.4: an item may open a second page ({ more: { title, items } }), the iOS
+  // way: the row itself does its action, and a › at its right edge (its own
+  // target) slides the menu over to that page, which starts with a ‹ title row
+  // (back). Items there may be { on }: a ✓, e.g. your default length.
+  const one = (it, extra = '') => '<button type="button" role="menuitem" tabindex="-1" class="lo-act' + extra + (it.sub ? ' has-sub' : '') + (it.on ? ' on' : '') + (it.cls ? ' ' + esc(it.cls) : '') + '"' + attrs(it.attrs || {}) + '>' + (it.icon || '') +
+    (it.sub ? '<span class="lo-act-txt"><span>' + esc(it.label) + '</span><span class="lo-act-sub">' + esc(it.sub) + '</span></span>' : '<span>' + esc(it.label) + '</span>') +
+    (it.on && it.onLabel ? '<span class="lo-vh">' + esc(it.onLabel) + '</span>' : '') + '</button>'
+  const notes = [], subs = []
+  const split = (it) => { subs.push(it.more); const p = subs.length
+    return '<div class="lo-act-split" role="none">' + one(it, ' lo-act-main') +
+      '<button type="button" role="menuitem" tabindex="-1" class="lo-act-next" data-act-page="' + p + '" aria-haspopup="menu" aria-label="' + esc(it.more.title) + '" title="' + esc(it.more.title) + '">' + ACT_NEXT + '</button></div>' }
+  const main = items.map((it, i) => it.note ? (notes.push(id + '-n' + i), '<div class="lo-act-note" id="' + id + '-n' + i + '" role="none">' + (it.icon || '') + '<span>' + esc(it.note) + '</span></div>')
+    : it.more ? split(it) : one(it)).join('')
+  const page = (m, p) => '<div class="lo-act-page" data-page="' + p + '" role="group" aria-label="' + esc(m.title) + '" hidden>' +
+    '<button type="button" role="menuitem" tabindex="-1" class="lo-act lo-act-back" data-act-back aria-label="' + esc('Back · ' + m.title) + '">' + ACT_BACK + '<span>' + esc(m.title) + '</span></button>' +
+    (m.items || []).map((x) => one({ ...x, icon: x.on ? ACT_CHECK : '<span class="ic" aria-hidden="true"></span>' })).join('') + '</div>'
   menu.innerHTML = (sheet && title ? '<div class="lo-sheet-head"><span>' + esc(title) + '</span><button type="button" class="lo-sheet-done" data-act-close>Done</button></div>' : '') +
-    items.map((it) => '<button type="button" role="menuitem" tabindex="-1" class="lo-act' + (it.cls ? ' ' + esc(it.cls) : '') + '"' + attrs(it.attrs || {}) + '>' + (it.icon || '') + '<span>' + esc(it.label) + '</span></button>').join('')
+    (subs.length ? '<div class="lo-act-page" data-page="0" role="none">' + main + '</div>' + subs.map((m, j) => page(m, j + 1)).join('') : main)
+  if (subs.length) menu.classList.add('has-pages')
+  if (notes.length) menu.setAttribute('aria-describedby', notes.join(' '))
   let backdrop = null
   if (sheet) { backdrop = document.createElement('div'); backdrop.className = 'lo-backdrop'; document.body.appendChild(backdrop) }
   document.body.appendChild(menu)
-  act = { anchor, menu, backdrop, items: [...menu.querySelectorAll('[role="menuitem"]')] }
+  const page0 = menu.querySelector('.lo-act-page[data-page="0"]')
+  act = { anchor, menu, backdrop, page: page0, up: null, items: [...(page0 || menu).querySelectorAll('[role="menuitem"]')] }
   anchor.setAttribute('aria-haspopup', 'menu')
   anchor.setAttribute('aria-controls', id)
   anchor.setAttribute('aria-expanded', 'true')
+  const backFocus = () => act && act.menu.querySelector('[data-act-page="' + act.page.dataset.page + '"]')
   menu.addEventListener('click', (e) => {
     if (e.target.closest('[data-act-close]')) { closeActionMenu({ focus: true }); return }
+    const next = e.target.closest('[data-act-page]')
+    if (next) { e.preventDefault(); actPage(Number(next.dataset.actPage)); return }
+    if (e.target.closest('[data-act-back]')) { e.preventDefault(); actPage(0, { focus: backFocus() }); return }
     // the item's own click goes on to the board's handler (the event's path is
     // already fixed); the menu just gets out of the way
     if (e.target.closest('[role="menuitem"]')) closeActionMenu()
   })
-  menu.addEventListener('mousemove', (e) => { const it = e.target.closest('[role="menuitem"]'); if (it && document.activeElement !== it) it.focus({ preventScroll: true }) })
+  menu.addEventListener('mousemove', (e) => { const it = e.target.closest('[role="menuitem"]'); if (it && document.activeElement !== it && act && act.page && act.page.contains(it)) it.focus({ preventScroll: true }) })
   menu.addEventListener('keydown', (e) => {
     const k = act ? act.items.indexOf(document.activeElement) : -1
+    const onSub = !!(act && act.page && Number(act.page.dataset.page) > 0)
     switch (e.key) {
       case 'ArrowDown': e.preventDefault(); actFocus(k + 1); return
       case 'ArrowUp': e.preventDefault(); actFocus(k < 0 ? -1 : k - 1); return
       case 'Home': e.preventDefault(); actFocus(0); return
       case 'End': e.preventDefault(); actFocus(-1); return
-      case 'Escape': e.preventDefault(); e.stopPropagation(); closeActionMenu({ focus: true }); return
+      case 'ArrowRight': {
+        const row = document.activeElement && document.activeElement.closest('.lo-act-split')
+        if (row) { e.preventDefault(); actPage(Number(row.querySelector('[data-act-page]').dataset.actPage)) }
+        return
+      }
+      case 'ArrowLeft': if (onSub) { e.preventDefault(); actPage(0, { focus: backFocus() }) } return
+      case 'Escape': e.preventDefault(); e.stopPropagation(); if (onSub) actPage(0, { focus: backFocus() }); else closeActionMenu({ focus: true }); return
       case 'Tab': e.preventDefault(); closeActionMenu({ focus: true }); return
       default:
         if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && act) {

package/ui/relay-client.js

@@ -7,6 +7,10 @@
 // your Macs through /_relay/api. The relay passes ciphertext. The live-update
 // stream becomes a long-poll over the same tunnel. Which Mac: the one you
 // picked in the status popover, else the most recently active one.
+//
+// 0.9.3: on a Mac that runs Leftoff itself, the same sealed calls go straight
+// to its daemon on 127.0.0.1 (ui/direct.js), and back through the relay the
+// moment that path fails.
 import { sealRequest, openResponse } from './relay-crypto.js'
 
 const meta = typeof document !== 'undefined' && document.querySelector('meta[name="leftoff-relay"]')
@@ -41,6 +45,18 @@ export async function forgetDeviceKey() {
 // ------------------------------------------------------------ state
 
 const relay = { user: RELAY_USER, device: null, key: null, status: null, mac: null, ready: null, latencyMs: null }
+// ui/direct.js loads only on the board itself (never on pair.html, which the
+// relay serves before a browser is paired and where this file is imported too).
+let route = null, directOrRelay = null
+async function loadDirect() {
+  try {
+    const d = await import('./direct.js')
+    route = new d.DirectRoute({ user: RELAY_USER, fetchImpl: realFetch, ua: navigator.userAgent, maxTouchPoints: navigator.maxTouchPoints || 0 })
+    directOrRelay = d.directOrRelay
+  } catch { route = null }
+}
+const INIT_WAIT_MS = 1200 // how long the first paint waits for this Mac's own answer
+const RELOAD_KEY = 'leftoff.direct.reloaded'
 
 function pickedMac() { try { return localStorage.getItem(MAC_KEY) } catch { return null } }
 function remember(mac) {
@@ -55,9 +71,12 @@ async function refreshStatus() {
   relay.status = await res.json()
   relay.latencyMs = Math.round(performance.now() - t0)
   const online = relay.status.macs.filter((m) => m.online).map((m) => m.machine)
-  const want = pickedMac()
-  relay.mac = want && online.includes(want) ? want : relay.status.default
-  cookieMac(relay.mac)
+  // on this Mac's direct path the board stays on this Mac, whatever the relay sees
+  if (!onDirect()) {
+    const want = pickedMac()
+    relay.mac = want && online.includes(want) ? want : relay.status.default
+    cookieMac(relay.mac)
+  }
   return relay.status
 }
 
@@ -65,8 +84,60 @@ async function init() {
   const rec = await loadDeviceKey()
   if (!rec || !rec.key || (rec.user && rec.user !== RELAY_USER)) { needsKey(); throw new Error('no device key') }
   relay.device = rec.device; relay.key = rec.key
-  await refreshStatus()
+  // Ask this computer's own Leftoff while the relay answers; a quick yes goes direct.
+  await loadDirect()
+  const probing = probeDirect()
+  const [, quick] = await Promise.all([refreshStatus(), Promise.race([probing, new Promise((r) => setTimeout(() => r(undefined), INIT_WAIT_MS))])])
+  if (quick) goDirect(quick)
+  else if (quick === undefined) probing.then((m) => { if (m) lateDirect(m) })
   if (!relay.mac) { asleep(); throw new Error('asleep') }
+  watchDirect()
+}
+
+// ------------------------------------------------------------ direct (0.9.3)
+
+function probeDirect() {
+  return route ? route.probe({ picked: pickedMac(), verify: verifyDirect }) : Promise.resolve(null)
+}
+// A sealed round trip through this Mac's daemon: only our own Mac can answer it.
+async function verifyDirect(machine) {
+  const env = await sealRequest(relay.key, { device: relay.device, machine, body: { m: 'GET', p: '/v1/remote/ping', b: null, h: {} } })
+  const out = await openResponse(relay.key, env, await route.send(env))
+  return out.s === 200
+}
+function onDirect() { return !!(route && route.on && route.machine === relay.mac) }
+function routeChanged() { try { window.dispatchEvent(new CustomEvent('leftoff-route', { detail: { route: onDirect() ? 'direct' : 'relay', mac: relay.mac } })) } catch {} }
+// A sealed response -> a fetch Response (204/304 carry no body).
+function toResponse(out) { return new Response(out.s === 204 || out.s === 205 || out.s === 304 ? null : out.b, { status: out.s, headers: out.h }) }
+function goDirect(machine) {
+  route.use(machine)
+  if (relay.mac !== machine) { relay.mac = machine; cookieMac(machine) }
+  routeChanged()
+}
+// The first answer came after the board had loaded. Same Mac: just switch.
+// Another Mac (the relay's pick), and you didn't choose it: load once more so
+// the whole board comes from this one (once per tab, so a slow daemon can't loop).
+function lateDirect(machine) {
+  if (!route || route.on) return
+  if (machine === relay.mac) return goDirect(machine)
+  if (pickedMac()) return
+  try { if (sessionStorage.getItem(RELOAD_KEY)) return; sessionStorage.setItem(RELOAD_KEY, '1') } catch { return }
+  location.reload()
+}
+function dropDirect() { routeChanged() }
+// Back on the relay: look again every minute and when the tab comes back.
+// A later yes only switches the path for the Mac already on screen.
+let watching = false
+function watchDirect() {
+  if (watching || !route || route.never) return
+  watching = true
+  const again = (focus) => {
+    if (!route.due({ focus })) return
+    probeDirect().then((m) => { if (m && !route.on && m === relay.mac) goDirect(m) })
+  }
+  setInterval(() => again(false), 15000)
+  window.addEventListener('focus', () => again(true))
+  document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') again(true) })
 }
 
 // ------------------------------------------------------------ the tunnel
@@ -79,17 +150,38 @@ async function tunnel(url, init = {}, retried = false) {
   const h = {}
   const hdrs = new Headers(init.headers || {})
   if (hdrs.get('content-type')) h['content-type'] = hdrs.get('content-type')
-  const env = await sealRequest(relay.key, { device: relay.device, machine: relay.mac, body: { m: method, p: url.pathname + url.search, b, h } })
+  const body = { m: method, p: url.pathname + url.search, b, h }
+  if (!onDirect()) return viaRelay(body, init, retried)
+  return directOrRelay({
+    route,
+    signal: init.signal,
+    direct: async () => {
+      const env = await sealRequest(relay.key, { device: relay.device, machine: route.machine, body })
+      return toResponse(await openResponse(relay.key, env, await route.send(env, { signal: init.signal })))
+    },
+    relay: () => viaRelay(body, init, retried),
+    onDrop: dropDirect,
+  })
+}
+
+async function viaRelay(body, init, retried) {
+  const gone = relay.mac
+  const env = await sealRequest(relay.key, { device: relay.device, machine: gone, body })
   const res = await realFetch('/_relay/api', { method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/json' }, body: JSON.stringify(env), signal: init.signal, cache: 'no-store' })
-  if (res.status === 200) {
-    const out = await openResponse(relay.key, env, await res.json())
-    return new Response(out.b, { status: out.s, headers: out.h })
-  }
+  if (res.status === 200) return toResponse(await openResponse(relay.key, env, await res.json()))
   const j = await res.clone().json().catch(() => ({}))
   if (res.status === 401) { notPaired(j.code === 'unknown_device'); return res }
   if (res.status === 503 && j.code === 'mac_offline' && !retried) {
     // the Mac you were on went to sleep: another one takes over, or the asleep page
-    if (j.default && j.default !== relay.mac) { relay.mac = j.default; cookieMac(relay.mac); window.dispatchEvent(new CustomEvent('leftoff-relay', { detail: { mac: relay.mac, switched: true } })); return tunnel(url, init, true) }
+    // another call already moved the board to the Mac that took over: follow it
+    if (relay.mac && relay.mac !== gone) return viaRelay(body, init, true)
+    if (j.default && j.default !== gone) { relay.mac = j.default; cookieMac(relay.mac); window.dispatchEvent(new CustomEvent('leftoff-relay', { detail: { mac: relay.mac, switched: true } })); return viaRelay(body, init, true) }
+    // 0.9.3: the relay can still list a Mac that just went away (its socket
+    // closing as we asked, e.g. this Mac's daemon stopping under the direct
+    // path): look again in a moment before calling it asleep.
+    await new Promise((r) => setTimeout(r, 1500))
+    await refreshStatus().catch(() => {})
+    if (relay.mac && relay.mac !== gone) { window.dispatchEvent(new CustomEvent('leftoff-relay', { detail: { mac: relay.mac, switched: true } })); return viaRelay(body, init, true) }
     asleep()
   }
   return res
@@ -176,6 +268,9 @@ export const leftoffRelay = {
   get mac() { return relay.mac },
   get device() { return relay.device },
   get latencyMs() { return relay.latencyMs },
+  // 0.9.3: 'direct' (this Mac's own daemon over 127.0.0.1) or 'relay'
+  get route() { return onDirect() ? 'direct' : 'relay' },
+  get directLatencyMs() { return route ? route.latencyMs : null },
   status: () => refreshStatus(),
   // Switch Macs: the board reloads from the other one.
   pick(mac) { remember(mac); cookieMac(mac); location.reload() },