@panphora/bevel 0.1.0

package/examples/components/reference/sources/hypercms/src/scaffold.js

@@ -0,0 +1,10 @@
+export function scaffold(shape) {
+  if (typeof shape === 'string') return shape.endsWith('[]') ? [] : ''
+  if (Array.isArray(shape)) return []
+  if (typeof shape === 'object' && shape !== null) {
+    const out = {}
+    for (const [k, v] of Object.entries(shape)) out[k] = scaffold(v)
+    return out
+  }
+  return ''
+}

package/examples/components/reference/sources/hypercms/src/session.js

@@ -0,0 +1,303 @@
+// The session core: everything an editing session is, independent of the chrome
+// that renders it. Rule resolution, the ctx object every module reads, the first
+// extract, the observer / undo / live-sync subscriptions, the global sortable
+// wiring, event dispatch, and one idempotent teardown. A view (src/views/*)
+// supplies the DOM; the session owns the state and the page.
+
+import { engine } from 'hyper-html-api'
+import { injectDefaults, injectComponents } from './templates.js'
+import { deriveFormRules } from './form-rules.js'
+import { warnUnmatchedTemplates } from './diagnostics.js'
+import { findUnresolved, stripReadOnly } from './unresolved.js'
+import { rowIdentitySeeder } from './row-identity.js'
+import {
+  commit,
+  commitWithUndo,
+  suppressUndo,
+  extractFormData,
+  stableStringify,
+  restampAllSiblings,
+  coerceBooleans,
+} from './events.js'
+import { installObserver } from './refresh.js'
+import { platform, onPlatformEvent, LIVESYNC_APPLIED } from './platform.js'
+
+const ENGINE_OPTS = { skip: '[data-hcms-shell]', templateAttr: 'cms-template' }
+
+export const state = {
+  isOpen: false,
+  ctx: null,
+  opts: null,
+}
+
+// Build the session for one open(): resolve the rules, hand them to the view for
+// its own preparation, derive the form schema, and take the first read of the
+// page. The view is not mounted yet — ctx reads its DOM handles lazily, so the
+// mount can stay inside open()'s try block.
+export function createSession({ view, doc, pageRoot, opts = {}, onCloseRequested, onViewRequested }) {
+  // Resolve rules via the union: an explicit rules object, a token string, or
+  // the default token "cms". findRules is document-scoped, so a head-mounted
+  // rules tag is found even though pageRoot defaults to <body>.
+  const source = opts.rules !== undefined ? opts.rules : 'cms'
+  const found = engine.findRules(doc, source)
+  if (!found) {
+    const what = typeof source === 'string' ? `data-rules-name~="${source}"` : 'the provided rules object'
+    throw new Error(`hypercms: no rules found for ${what}`)
+  }
+  // The view's rule seam. The sidebar applies the rich-text upgrade (default on):
+  // bare scalar rules whose page element contains child elements are rebound
+  // through @innerHTML so links and inline formatting survive the round-trip, and
+  // their form fields render the @richtext component.
+  const pageRules = view.prepareRules(found.rules)
+  const rulesTagNode = found.tagNode
+
+  injectDefaults(doc)
+  injectComponents(doc, pageRules)
+  warnUnmatchedTemplates(doc, pageRules)
+  const formRules = deriveFormRules(pageRules, doc)
+  // The write half of the rules; see stripReadOnly. The form and every extract
+  // keep the full tree.
+  const writeRules = stripReadOnly(pageRules)
+  // Runs before the first extract so a rule with invalid CSS names its field
+  // instead of throwing a bare SyntaxError out of querySelectorAll.
+  const unresolved = findUnresolved(pageRoot, pageRules)
+  // Bind each form row to the page row it stands for while the two are still
+  // known to correspond, which is now: the form the view builds comes from
+  // exactly this read. Without it the first structural operation of a session has
+  // no identity to go on and falls back to content matching.
+  const seeder = rowIdentitySeeder()
+  const data = coerceBooleans(engine.extract(pageRoot, pageRules, { ...ENGINE_OPTS, ...seeder.hooks }), pageRules)
+
+  const ctx = {
+    doc,
+    pageRoot,
+    pageRules,
+    writeRules,
+    formRules,
+    rulesTagNode,
+    rulesSource: source,
+    richText: view.richText,
+    view,
+    seeder,
+    initialData: data,
+    get formRoot() { return view.formRoot },
+    get shellRoot() { return view.root },
+    get errorEl() { return view.errorEl },
+    get noticeEl() { return view.noticeEl },
+    unresolved,
+    lastTwinSignature: null,
+    lastFingerprint: null,
+    lastData: null,
+    observerHandle: null,
+    undoUnsub: null,
+    livesyncUnsub: null,
+    onChange: opts.onChange,
+    onError: opts.onError,
+    confirmRemove: opts.confirmRemove,
+    previouslyFocused: doc.activeElement,
+    dispatch(name, detail) {
+      const Ctor = (doc.defaultView && doc.defaultView.CustomEvent) || (typeof CustomEvent !== 'undefined' ? CustomEvent : null)
+      if (!Ctor) return
+      // Every event carries the page it belongs to and which view is rendering
+      // it, so a document-level listener can tell a sidebar session from an
+      // inline one without inspecting the DOM. Merged into the caller's detail
+      // rather than replacing it: hcms:change still carries .data, hcms:error
+      // still carries .error.
+      const payload = { ...(detail || {}), pageRoot, view: view.name }
+      const ev = new Ctor(name, { bubbles: true, cancelable: name === 'hcms:change', detail: payload })
+      // A full-document morph (live sync, a version restore) can replace the
+      // view root between mount and dispatch. Falling back to the page keeps the
+      // event on the document instead of firing it into a detached tree where no
+      // listener will ever see it.
+      const target = view.root && view.root.isConnected !== false ? view.root : pageRoot
+      target.dispatchEvent(ev)
+    },
+    onCloseRequested,
+    // How a view asks to be rendered as a different one. The switch runs through
+    // open({ view }), which carries this session's options across it, so the
+    // request changes the presentation and not the session.
+    onViewRequested,
+  }
+  ctx.updateFingerprint = () => {
+    ctx.lastFingerprint = stableStringify(extractFormData(ctx))
+  }
+  view.ctx = ctx
+  return ctx
+}
+
+// Everything that outlives the mount: the fingerprint the commit path compares
+// against, and the three external subscriptions plus the global sortable hook.
+// Runs after the view is mounted, so a throw here is caught by open() and routed
+// through teardownSession.
+export function startSession(ctx) {
+  ctx.updateFingerprint()
+
+  ctx.observerHandle = installObserver({
+    onRefresh: (changes) => ctx.view.refresh('observer', changes),
+  })
+
+  // Undo/redo is a deliberate local action (unlike livesync or in-flight typing),
+  // so the focused form field SHOULD snap to the reverted value. The observer above
+  // is source-blind, so subscribe to the undo scope and force a non-ignoring refresh.
+  // Fires synchronously before the debounced observer refresh, which then no-ops on
+  // the active field. Guarded so it degrades to today's behavior when undo isn't loaded.
+  const u = platform('undo')
+  if (u && typeof u.on === 'function') {
+    const onRevert = () => {
+      if (state.ctx !== ctx) return
+      resyncForm(ctx, 'undo')
+      // A reverted change the consumer persists through onChange (e.g. the
+      // collection dashboard PUTs the record, not the page) would otherwise lag
+      // the undo: refreshForm re-syncs the form but never fires onChange, and a
+      // commit() here would be fingerprint-skipped (refreshForm already updated
+      // it). Extract the reverted state from the PAGE (the source of truth after
+      // an undo/redo; the form can lag a morph) and fire onChange directly, but
+      // only when it actually changed — guards spurious PUTs on undo/redo of
+      // unrelated edits elsewhere on the page.
+      const data = coerceBooleans(
+        engine.extract(ctx.pageRoot, ctx.pageRules, ENGINE_OPTS),
+        ctx.pageRules
+      )
+      if (stableStringify(data) !== stableStringify(ctx.lastData)) {
+        ctx.lastData = data
+        ctx.onChange?.(data, { path: '', structural: false })
+      }
+    }
+    u.on('undo', onRevert)
+    u.on('redo', onRevert)
+    ctx.undoUnsub = () => { u.off('undo', onRevert); u.off('redo', onRevert) }
+  }
+
+  // Live-sync / version-restore / any framework-applied full-document morph runs
+  // inside window.hyperclay.Mutation.pause(), which the source-blind observer
+  // above is deaf to — so without this the form stays stale after a remote edit
+  // and the next local commit re-applies the stale data, clobbering the remote
+  // change. Subscribe to the morph-applied signal live-sync emits and re-extract
+  // with ignoreActiveValue:true (preserve the user's in-progress field). Same
+  // document live-sync dispatches on; unsubscribed in teardownSession.
+  const onLivesync = () => resyncForm(ctx, 'livesync')
+  ctx.livesyncUnsub = onPlatformEvent(ctx.doc, LIVESYNC_APPLIED, onLivesync)
+
+  // Wire global sortable callback to current ctx (cleared by teardownSession).
+  globalCommitTarget.ctx = ctx
+  installGlobalSortableCommit(ctx.doc)
+}
+
+// Re-sync the view to the page after a change hypercms did NOT originate.
+// `reason` selects whether the field the user is currently typing in snaps:
+//   'undo' / 'redo' — the user's own deliberate action, so the focused field
+//                     SHOULD snap to the reverted value (ignoreActiveValue:false).
+//   'livesync'      — someone else's / the framework's change, so the user's
+//                     in-progress focused field must NOT be yanked away
+//                     (ignoreActiveValue:true). morphForm re-extracts every
+//                     other field to the new page value, killing the stale-form
+//                     clobber, while leaving the active field alone until blur.
+// Both reasons route through the view's one refresh entry point.
+function resyncForm(ctx, reason) {
+  // open() may have moved on (closed, or reopened with a new ctx) between an
+  // async morph completing and this firing.
+  if (state.ctx !== ctx) return
+  ctx.view.refresh(reason)
+}
+
+// The one teardown. close(), the failed-open path inside open(), and (later) a
+// view switch all route through it; the options say only which of the three
+// close-specific side effects apply.
+export function teardownSession(ctx, { dispatch = true, restoreFocus = true, updateUrl = true, reason = 'close' } = {}) {
+  if (!ctx || ctx.closed) return
+  // Mark this ctx dead so any in-flight async work (e.g. an upload awaiting the
+  // host uploader) bails instead of mutating the page / firing onChange after
+  // teardown. Mirrors the state.ctx !== ctx guards on the undo/livesync paths.
+  ctx.closed = true
+  // An upload still in flight is torn down like any other subscription. The
+  // ctx.closed check above already stops it writing; this stops it running.
+  for (const controller of ctx.uploads || []) { try { controller.abort() } catch {} }
+  ctx.uploads?.clear()
+  const previouslyFocused = ctx.previouslyFocused
+  if (dispatch) ctx.dispatch('hcms:close', { reason })
+  if (updateUrl) toggleCloseParam()
+  ctx.observerHandle?.unsubscribe?.()
+  ctx.undoUnsub?.()
+  ctx.livesyncUnsub?.()
+  ctx.detachEvents?.()
+  // destroy() removes the chrome-only body classes; suppress so the inverse
+  // class removal doesn't enter the undo stack either.
+  suppressUndo(() => ctx.view.destroy())
+  clearState()
+  if (restoreFocus && typeof previouslyFocused?.focus === 'function') {
+    try { previouslyFocused.focus() } catch (_) {}
+  }
+}
+
+function clearState() {
+  state.isOpen = false
+  state.ctx = null
+  state.opts = null
+  globalCommitTarget.ctx = null
+}
+
+const globalCommitTarget = { ctx: null }
+
+function installGlobalSortableCommit(doc) {
+  const win = doc.defaultView || (typeof globalThis !== 'undefined' ? globalThis : null)
+  if (!win) return
+  const hypercmsCommitFn = function hypercmsCommitGlobal() {
+    const ctx = globalCommitTarget.ctx
+    if (!ctx) return
+    restampAllSiblings(ctx.formRoot)
+    // Route through commitWithUndo so a drag-reorder lands as a labeled
+    // 'Reorder' commit (not a generic idle 'Edit') and a failed apply's
+    // mutate+rollback is never recorded as a no-op commit. No-op pass-through
+    // when undo isn't loaded.
+    return commitWithUndo('Reorder', () =>
+      commit(extractFormData(ctx), { path: '', structural: true }, ctx)
+    )
+  }
+  if (typeof win.hypercmsCommit !== 'function') win.hypercmsCommit = hypercmsCommitFn
+  // Also mirror to globalThis so non-window contexts (Node tests, workers)
+  // can resolve the bare name from `new Function('hypercmsCommit()')`.
+  if (typeof globalThis !== 'undefined' && typeof globalThis.hypercmsCommit !== 'function') {
+    globalThis.hypercmsCommit = hypercmsCommitFn
+  }
+}
+
+// The query param that drives ?cms=true auto-open. Closing the CMS rewrites it
+// to cms=false (param kept) so a refresh/share of the post-close URL does not
+// auto-reopen.
+const AUTO_OPEN_PARAM = 'cms'
+
+// Pure: given a location.search string, return the search string after a close.
+// Only rewrites when cms=true is present; every other param + ordering is
+// preserved, and a search without cms (or already cms=false) is returned
+// unchanged so we never inject the param into a page that never carried it.
+export function nextSearchAfterClose(search) {
+  const str = typeof search === 'string' ? search : ''
+  const qIndex = str.indexOf('?')
+  const query = qIndex === -1 ? str : str.slice(qIndex + 1)
+  if (!query) return str
+  const params = new URLSearchParams(query)
+  if (params.get(AUTO_OPEN_PARAM) !== 'true') return str
+  params.set(AUTO_OPEN_PARAM, 'false')
+  return '?' + params.toString()
+}
+
+// Pure: should the CMS auto-open for this location.search? Exactly 'true'.
+export function shouldAutoOpenFromSearch(search) {
+  const str = typeof search === 'string' ? search : ''
+  const qIndex = str.indexOf('?')
+  const query = qIndex === -1 ? str : str.slice(qIndex + 1)
+  if (!query) return false
+  return new URLSearchParams(query).get(AUTO_OPEN_PARAM) === 'true'
+}
+
+// Rewrite ?cms=true → ?cms=false via history.replaceState (no reload, hash and
+// every other param preserved). No-op when the param isn't present or the
+// History API is unavailable.
+function toggleCloseParam() {
+  if (typeof window === 'undefined' || !window.location || !window.history) return
+  if (typeof window.history.replaceState !== 'function') return
+  const current = window.location.search
+  const next = nextSearchAfterClose(current)
+  if (next === current) return
+  window.history.replaceState(window.history.state, '', next + window.location.hash)
+}

package/examples/components/reference/sources/hypercms/src/shell.js

@@ -0,0 +1,248 @@
+const SHELL_STYLE_ID = 'hcms-shell-styles'
+const SHELL_BUNDLED_FLAG = 'hcms-bundled-styles-installed'
+// "A session of either kind is open", so a page (or the toggle) can style off
+// open state without reaching for hcms-open, which describes only this panel's
+// page shift and is absent for an inline session. Additive: hcms-open keeps its
+// meaning exactly. Both views add it on mount and drop it on destroy.
+export const SESSION_OPEN_CLASS = 'hcms-session-open'
+const FOCUSABLE = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+const styledDocs = new WeakSet()
+let cssText = ''
+
+export function setShellStyles(text) {
+  cssText = text
+}
+
+export function markStylesBundled(doc) {
+  // Bundler emits a <style data-hcms-bundled-styles> tag and sets this so
+  // the link-based path doesn't double-install.
+  if (!doc) return
+  styledDocs.add(doc)
+  doc[SHELL_BUNDLED_FLAG] = true
+}
+
+export function markSessionOpen(doc) {
+  doc?.body?.classList.add(SESSION_OPEN_CLASS)
+}
+
+export function clearSessionOpen(doc) {
+  doc?.body?.classList.remove(SESSION_OPEN_CLASS)
+}
+
+let titleIdCounter = 0
+
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"]/g, (c) => (
+    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]
+  ))
+}
+
+export function mountShell({
+  mountTo,
+  side = 'right',
+  overlay = false,
+  showSaveButton = false,
+  title = 'Page content',
+  eyebrow = 'Edit',
+  theme = null,
+  doc,
+}) {
+  ensureStyles(doc)
+  const titleId = `hcms-shell-title-${++titleIdCounter}`
+  const root = doc.createElement('div')
+  root.setAttribute('data-hcms-shell', '')
+  root.setAttribute('save-remove', '')
+  root.setAttribute('save-ignore', '')
+  root.setAttribute('tabindex', '-1')
+  // Dialog semantics: focus is trapped + body scrolling locked, so screen
+  // readers should announce this as a modal dialog with the shell title as
+  // its accessible name.
+  root.setAttribute('role', 'dialog')
+  root.setAttribute('aria-modal', 'true')
+  root.setAttribute('aria-labelledby', titleId)
+  // pixel-quiet is the baked-in look; an optional theme pins light/dark
+  // (otherwise the panel follows the OS via prefers-color-scheme).
+  const themeClass = theme === 'dark' ? ' dark' : theme === 'light' ? ' light' : ''
+  root.className =
+    'hcms-shell pixel-quiet hcms-panel hcms-side-' + side + (overlay ? ' hcms-overlay' : '') + themeClass
+  const titleHtml = escapeHtml(title)
+  const eyebrowHtml = escapeHtml(eyebrow)
+  // Pixel Quiet shell: a scroll-away header + in-flow Save inside .hcms-shell-body,
+  // with a condensed minibar pinned to the panel top once the header scrolls out.
+  // Close + Save are real mirk buttons. The .hcms-* hooks stay so the engine and
+  // events bind exactly as before; only the chrome shape changed.
+  // The Save button has no wiring here: [trigger-save] is the hyperclayjs save
+  // attribute — its save system (or its view-mode notice) handles the click.
+  // Standalone hosts delegate their own [trigger-save] click listener.
+  root.innerHTML = `
+    <div class="hcms-shell-minibar" aria-hidden="true">
+      <span class="hcms-shell-minibar-title">${titleHtml}</span>
+      <button type="button" class="hcms-shell-close mirk-button mirk-button--small" data-hcms-action="close" aria-label="Close">
+        <span class="mirk-button__label">×</span>
+      </button>
+    </div>
+    <div class="hcms-shell-body">
+      <header class="hcms-shell-header">
+        <div class="hcms-shell-heading">
+          <div class="hcms-shell-eyebrow">${eyebrowHtml}</div>
+          <h2 class="hcms-shell-title" id="${titleId}">${titleHtml}</h2>
+        </div>
+        <button type="button" class="hcms-shell-close mirk-button mirk-button--small" data-hcms-action="close" aria-label="Close">
+          <span class="mirk-button__label">×</span>
+        </button>
+      </header>
+      <div class="hcms-shell-notice" role="status" hidden></div>
+      <div class="hcms-shell-error" role="alert" hidden></div>
+      <div data-hcms-form-root class="hcms-form"></div>
+      <footer class="hcms-shell-footer"${showSaveButton ? '' : ' hidden'}>
+        <button type="button" class="hcms-shell-save mirk-button" trigger-save>
+          <span class="mirk-button__label">Save</span>
+        </button>
+      </footer>
+    </div>
+  `
+
+  // mountTo may be a nested element inside pageRoot. Use it as-is for the
+  // visual hierarchy; engine reads/writes pass { skip: '[data-hcms-shell]' }
+  // so the engine never traverses into the form regardless of where it's mounted.
+  const host = mountTo || doc.body
+  host.appendChild(root)
+
+  const body = doc.body
+  body.classList.add('hcms-open')
+  markSessionOpen(doc)
+  if (overlay) body.classList.add('hcms-overlay')
+  if (side === 'left') body.classList.add('hcms-side-left')
+
+  const focusTrap = installFocusTrap(root, doc)
+  const condense = installCondenseOnScroll(root)
+
+  return {
+    root,
+    formRoot: root.querySelector('[data-hcms-form-root]'),
+    noticeEl: root.querySelector('.hcms-shell-notice'),
+    errorEl: root.querySelector('.hcms-shell-error'),
+    saveButton: root.querySelector('.hcms-shell-save'),
+    destroy() {
+      focusTrap.detach()
+      condense.detach()
+      root.remove()
+      body.classList.remove('hcms-open', 'hcms-overlay', 'hcms-side-left')
+      clearSessionOpen(doc)
+    },
+    // Re-assert the shell's out-of-subtree chrome after a full-document morph
+    // (e.g. a live-sync apply) wipes it: the stylesheet lives in <head> and the
+    // body classes live on <body>, both outside the save-ignore shell element,
+    // so hyper-morph's head-merge / class reconciliation can strip them.
+    restoreChrome() {
+      reensureStyles(doc)
+      body.classList.add('hcms-open')
+      markSessionOpen(doc)
+      if (overlay) body.classList.add('hcms-overlay')
+      if (side === 'left') body.classList.add('hcms-side-left')
+    },
+  }
+}
+
+// Re-inject the shell stylesheet if a morph (or anything else) removed it.
+// Unlike ensureStyles, this does NOT trust the styledDocs WeakSet: a morph can
+// remove the <style> tag while the WeakSet still marks the doc as "styled", so
+// a naive ensureStyles() call would no-op. Re-check the live DOM, clear the
+// stale mark, and let ensureStyles rebuild from cssText.
+export function reensureStyles(doc) {
+  if (!doc) return
+  if (doc.getElementById(SHELL_STYLE_ID) ||
+      doc.querySelector('style[data-hcms-bundled-styles]')) return
+  styledDocs.delete(doc)
+  ensureStyles(doc)
+}
+
+function ensureStyles(doc) {
+  if (!doc) return
+  if (styledDocs.has(doc)) return
+  if (doc[SHELL_BUNDLED_FLAG]) {
+    styledDocs.add(doc)
+    return
+  }
+  if (doc.getElementById(SHELL_STYLE_ID) || doc.querySelector('style[data-hcms-bundled-styles]')) {
+    styledDocs.add(doc)
+    return
+  }
+  if (cssText) {
+    const style = doc.createElement('style')
+    style.id = SHELL_STYLE_ID
+    style.setAttribute('save-remove', '')
+    // save-ignore mirrors the shell root so a full-document morph (e.g. a live-sync
+    // head-merge) preserves the stylesheet instead of stripping it; without it the
+    // style survives only via restoreChrome's reactive re-injection.
+    style.setAttribute('save-ignore', '')
+    style.textContent = cssText
+    ;(doc.head || doc.documentElement).appendChild(style)
+    styledDocs.add(doc)
+    return
+  }
+  // No bundled CSS — try resolving the sibling generated theme via
+  // import.meta.url. Browsers ESM-resolved imports place a co-located
+  // theme.generated.css next to hypercms.js. Falls back silently if resolution
+  // fails (e.g., bundlers without an asset emitter).
+  try {
+    const href = new URL('./theme.generated.css', import.meta.url).href
+    const link = doc.createElement('link')
+    link.rel = 'stylesheet'
+    link.id = SHELL_STYLE_ID
+    link.setAttribute('save-remove', '')
+    link.setAttribute('save-ignore', '')
+    link.href = href
+    ;(doc.head || doc.documentElement).appendChild(link)
+    styledDocs.add(doc)
+  } catch (_) {
+    // No bundled CSS and no resolvable co-located theme (e.g. the IIFE bundle,
+    // where import.meta is undefined). Warn loudly rather than mount a silently
+    // unstyled shell — the host must call installStyles(themeText) before opening.
+    console.warn(
+      'hypercms: shell stylesheet not applied — cssText is empty and the ' +
+      'co-located theme fallback is unavailable. Call installStyles(themeText) ' +
+      'before opening the CMS.'
+    )
+  }
+}
+
+// Reveal the condensed minibar once the full header scrolls out of the body
+// (pixel-quiet decision 0003). Passive listener; toggles .is-condensed on the
+// shell root when scrollTop passes the header height. No-op if the body or
+// header is missing (e.g. a custom mount that omits them).
+function installCondenseOnScroll(root) {
+  const bodyEl = root.querySelector('.hcms-shell-body')
+  const header = root.querySelector('.hcms-shell-header')
+  if (!bodyEl || !header || typeof bodyEl.addEventListener !== 'function') {
+    return { detach() {} }
+  }
+  const reveal = () => {
+    const trigger = (header.offsetHeight || 0) - 12
+    root.classList.toggle('is-condensed', bodyEl.scrollTop > trigger)
+  }
+  bodyEl.addEventListener('scroll', reveal, { passive: true })
+  reveal()
+  return { detach() { bodyEl.removeEventListener('scroll', reveal) } }
+}
+
+function installFocusTrap(root, doc) {
+  function onKeyDown(e) {
+    if (e.key !== 'Tab') return
+    if (!root.contains(doc.activeElement)) return
+    const focusables = Array.from(root.querySelectorAll(FOCUSABLE))
+    if (focusables.length === 0) return
+    const first = focusables[0]
+    const last = focusables[focusables.length - 1]
+    if (e.shiftKey && doc.activeElement === first) {
+      e.preventDefault()
+      last.focus()
+    } else if (!e.shiftKey && doc.activeElement === last) {
+      e.preventDefault()
+      first.focus()
+    }
+  }
+  doc.addEventListener('keydown', onKeyDown)
+  return { detach: () => doc.removeEventListener('keydown', onKeyDown) }
+}