@unitninety/site-kit 0.0.0-stage → 1.6.1

package/src/bridge/createBridge.ts

@@ -0,0 +1,1010 @@
+import type { LinkTo } from '../elements/leaves/link'
+import { activeBlock, activeMarks, applyCaret, caretTargetIn, isEditableLeaf } from './caret'
+import { toRichText, type DomLike } from './lexicalDom'
+import { applyPreview, type Undo } from './preview'
+import { BRIDGE_VERSION, MAX_OFFENDER_LENGTH, MAX_OFFENDERS, parseCanvasMessage, type BridgeStamp, type PreviewInstruction, type SiteMessage } from './protocol'
+import { registry } from './registry'
+import { EDITING_CSS } from './styles'
+
+export type BridgeOptions = {
+  platformOrigin: string
+  parent: Pick<Window, 'postMessage'>
+  refresh: () => void
+  onSelect?: (path: string | null) => void
+}
+
+const DEBOUNCE = 150
+
+let warnedOfCeiling = false
+/** Development only, and once: see `setRefreshing`. */
+const warnOnceThatRefreshIsSlow = () => {
+  if (warnedOfCeiling || (typeof process !== 'undefined' && process.env.NODE_ENV === 'production')) return
+  warnedOfCeiling = true
+  console.warn('[u90] a refresh is still in flight after 5s; React-owned block moves remain available, but reconciliation waits for the actual commit (BridgeClient isPending).')
+}
+/** For tests: forget that the warning has been given. */
+export const resetCeilingWarning = () => {
+  warnedOfCeiling = false
+}
+
+/**
+ * A real element as the structural node `toRichText` walks (`lexicalDom.ts` takes a `DomLike`, not
+ * an `Element`, so it can be tested without a browser). Copied from `legacy/bridge.tsx`'s
+ * `asDomLike`; before it was ported, the live element went to `toRichText` as it was, and every
+ * rich `edit` threw on its `HTMLCollection` (`nodes.flatMap is not a function`) when it flushed.
+ */
+const asDomLike = (node: Node): DomLike => {
+  if (node.nodeType === 3) return { text: node.textContent ?? '' }
+  const element = node as HTMLElement
+  const href = element.getAttribute?.('href')
+  const singleKey = element.getAttribute?.('data-single-key')
+  // `data-u90-link` (stamped by `RichText.tsx` in draft, and by `applyFormat`'s own `link` action
+  // below) is what lets `toRichText` read an untouched or freshly-linked anchor's `LinkTo` back
+  // exactly, rather than reclassifying it from `href` alone — forwarded here so it survives the
+  // trip from a live element into the structural `DomLike` `toRichText` walks.
+  const linkTarget = element.getAttribute?.('data-u90-link')
+  return {
+    attributes: {
+      ...(href ? { href } : {}),
+      ...(singleKey ? { 'data-single-key': singleKey } : {}),
+      ...(linkTarget ? { 'data-u90-link': linkTarget } : {}),
+    },
+    children: [...(element.childNodes ?? [])].map(asDomLike),
+    tag: element.tagName?.toLowerCase(),
+  }
+}
+
+/**
+ * A text leaf's value as it is stored: its text, with each Single chip a draft render marked
+ * (`data-single-key`) written back as its `{key}` token, so an edit never saves the number a token
+ * resolved to (R38), and each non-breaking space normalised to a plain one — the same thing
+ * `lexicalDom.ts`'s `inlines` does on the rich path, for the same reason: the words on record must
+ * match the words typed, not what the browser inserted for a second consecutive space.
+ */
+export const textWithTokens = (node: Node): string => {
+  if (node.nodeType === 3) return (node.textContent ?? '').replace(/ /g, ' ')
+  if (node.nodeType !== 1) return ''
+  const key = (node as Element).getAttribute('data-single-key')
+  if (key && /^[a-z][a-zA-Z0-9_-]*$/.test(key)) return `{${key}}`
+  return [...node.childNodes].map(textWithTokens).join('')
+}
+
+/**
+ * `Omit` is not distributive over a union (`keyof (A | B)` is the *intersection* of their keys),
+ * so `Omit<SiteMessage, 'version'>` would collapse the whole `SiteMessage` union down to the
+ * fields every variant happens to share — which is none of them, `version` aside — rather than
+ * "each variant, minus `version`". This re-distributes over the union first.
+ */
+type DistributiveOmit<T, K extends keyof never> = T extends unknown ? Omit<T, K> : never
+
+/**
+ * The DOM half of the bridge, independent of React so it can be driven from jsdom in tests.
+ * `bridge/client.tsx`'s `BridgeClient` is the only caller in the running app; `bridge/createBridge.test.ts`
+ * drives it directly.
+ */
+export function createBridge(win: Window, opts: BridgeOptions) {
+  const doc = win.document
+  /**
+   * The stamp the last `u90:hello` carried, put on every message sent after it; null until a hello
+   * carries one, and again after a hello that carries none. Without one, every message is the bytes
+   * it was before 1.3.0.
+   */
+  let stamp: BridgeStamp | null = null
+  const send = (m: DistributiveOmit<SiteMessage, 'version' | keyof BridgeStamp>) =>
+    opts.parent.postMessage((stamp ? { ...m, ...stamp, version: BRIDGE_VERSION } : { ...m, version: BRIDGE_VERSION }) as SiteMessage, opts.platformOrigin)
+
+  let pending: { path: string; kind: 'text' | 'rich' | 'link-label'; el: HTMLElement } | null = null
+  let timer: ReturnType<typeof setTimeout> | null = null
+  const valueOf = (el: HTMLElement, kind: 'text' | 'rich' | 'link-label') => (kind === 'rich' ? toRichText(asDomLike(el)) : textWithTokens(el))
+  const flush = () => {
+    if (timer) clearTimeout(timer)
+    timer = null
+    if (pending) {
+      send({ type: 'u90:edit', path: pending.path, kind: pending.kind, value: valueOf(pending.el, pending.kind) })
+      pending = null
+    }
+  }
+  /** Debounces an `edit` for the marked field holding `el` — typing, or a formatting command applied to it. */
+  const schedule = (el: HTMLElement) => {
+    pending = { path: el.getAttribute('data-u90-field')!, kind: el.getAttribute('data-u90-edit') as 'text' | 'rich' | 'link-label', el }
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(flush, DEBOUNCE)
+  }
+
+  /*
+   * ── Ported from `legacy/bridge.tsx` (R40): which element is being edited, the selection inside
+   * it, and the formatting commands the Canvas's toolbar sends. ──
+   */
+  /** The one element the bridge made `contenteditable`, or null. */
+  let editing: HTMLElement | null = null
+  /**
+   * The selection inside `editing`, remembered while it still exists (legacy `lastRange`). The
+   * formatting toolbar is drawn by the Canvas, in the parent window: pressing it blurs this frame,
+   * and a blurred document reports a collapsed selection, so by the time `u90:format` arrives there
+   * is nothing left to format unless the range was kept. Only a range inside `editing` is kept — a
+   * selection elsewhere on the page is not this field's.
+   */
+  let lastRange: Range | null = null
+  const rememberRange = () => {
+    if (!editing) return
+    const selection = win.getSelection?.()
+    if (!selection || selection.rangeCount === 0) return
+    const range = selection.getRangeAt(0)
+    if (editing.contains(range.commonAncestorContainer)) lastRange = range.cloneRange()
+  }
+  const beginEditing = (el: HTMLElement, kind: 'text' | 'rich' | 'link-label') => {
+    if (editing === el) return
+    endEditing()
+    editing = el
+    el.setAttribute('contenteditable', kind === 'rich' ? 'true' : 'plaintext-only')
+    el.focus()
+  }
+  /** Hands the element back: what was typed goes out first, so releasing the field cannot drop it. */
+  const endEditing = () => {
+    const el = editing
+    if (!el) return
+    editing = null
+    lastRange = null
+    flush()
+    el.removeAttribute('contenteditable')
+  }
+  // Attribute-selector escaping; jsdom has no CSS.escape. Paths are generated (digits, letters,
+  // dots, `@`, `~`), so escaping quotes and backslashes is sufficient — same approach as legacy
+  // `EditingStyles`' own `escaped = selected?.replace(/"/g, '\\"')`. Used below by `markSelected`
+  // for a path, and by `applyFormat`'s `link` action for a freshly-linked url.
+  const q = (path: string) => path.replace(/["\\]/g, '\\$&')
+
+  /** A `DOMRect` narrowed to the four numbers `u90:caret`'s `field` carries (`protocol.ts`). */
+  const rectOf = (r: DOMRect): { top: number; left: number; width: number; height: number } => ({ top: r.top, left: r.left, width: r.width, height: r.height })
+
+  /**
+   * What each toolbar button asks the browser for (legacy `COMMANDS`). `execCommand` is deprecated
+   * and still the only formatting engine a `contenteditable` has; it emits exactly the tags
+   * `lexicalDom.ts` inverts. An action not listed here, and not `single` or `link`, does nothing.
+   */
+  const COMMANDS: Record<string, [string, string | undefined]> = {
+    bold: ['bold', undefined],
+    bullet: ['insertUnorderedList', undefined],
+    h1: ['formatBlock', '<h1>'],
+    h2: ['formatBlock', '<h2>'],
+    h3: ['formatBlock', '<h3>'],
+    italic: ['italic', undefined],
+    number: ['insertOrderedList', undefined],
+    paragraph: ['formatBlock', '<p>'],
+    strike: ['strikeThrough', undefined],
+    underline: ['underline', undefined],
+  }
+  /**
+   * Where a structured target's anchor should point. `url`/`email`/`tel` use the target's own
+   * address — the same thing `hrefOf` (`elements/leaves/link.ts`) computes for those three kinds,
+   * copied rather than called because `hrefOf` also resolves `page`/`entry` against an `ExpandCtx`
+   * (the site's page/entry graph) that this in-frame bridge has no access to and no need of: a
+   * page or entry target's `href` is never read back (`data-u90-link` carries the exact `to`), it
+   * only has to be *some* href so `execCommand('createLink', …)` has an anchor to build.
+   */
+  const hrefFor = (to: LinkTo): string => {
+    if ('url' in to) return to.url
+    if ('email' in to) return `mailto:${to.email}`
+    if ('tel' in to) return `tel:${to.tel.replace(/[^+\d]/g, '')}`
+    return '#'
+  }
+
+  /**
+   * `u90:format`, applied only while a rich field is being edited (legacy `applyFormat`): the
+   * command is resolved first, so an unknown action has no effect at all; then focus comes back and
+   * the remembered range is restored — in that order, since focusing collapses the selection — and
+   * the command runs. `single` inserts the non-editable `{key}` chip `lexicalDom.ts` reads back as a
+   * token; `link` with a `to` links the selection to that structured target — the anchor's `href`
+   * from `hrefFor`, its `data-u90-link` stamped `{ to, newTab: newTab ?? false }` exactly, so the
+   * read `asDomLike` takes next is exact rather than reclassified from `href`. `link` with a plain
+   * `url` and no `to` behaves as before (`{ to: { url }, newTab: false }`); with neither, unlinks.
+   * The edit is scheduled explicitly rather than trusting `execCommand` to fire `input`.
+   */
+  const applyFormat = (action: unknown, url?: string, to?: LinkTo, newTab?: boolean) => {
+    const el = editing
+    if (!el || el.getAttribute('data-u90-edit') !== 'rich' || typeof action !== 'string') return
+    let run: () => void
+    if (action === 'single') {
+      if (!url || !/^[^{}\s]+$/.test(url) || url === 'link') return
+      const chip = doc.createElement('span')
+      chip.setAttribute('data-single-key', url)
+      chip.setAttribute('contenteditable', 'false') // legacy set `.contentEditable`; the attribute is the same thing, and survives a DOM without the IDL property
+      chip.textContent = `{${url}}`
+      run = () => doc.execCommand('insertHTML', false, chip.outerHTML)
+    } else if (action === 'link') {
+      run = () => {
+        if (!url && !to) {
+          doc.execCommand('unlink')
+          return
+        }
+        const href = to ? hrefFor(to) : (url as string)
+        const stamp = to ? { to, newTab: newTab ?? false } : { to: { url: href }, newTab: false }
+        doc.execCommand('createLink', false, href)
+        // The selection this just linked is not reliably still addressable afterwards (execCommand
+        // moves/collapses it), so the new anchor is found by the href it was just given rather than
+        // through the selection.
+        el.querySelectorAll(`a[href="${q(href)}"]:not([data-u90-link])`).forEach((a) =>
+          a.setAttribute('data-u90-link', JSON.stringify(stamp)),
+        )
+      }
+    } else {
+      const command = COMMANDS[action]
+      if (!command) return
+      run = () => doc.execCommand(command[0], false, command[1])
+    }
+    el.focus({ preventScroll: true })
+    const selection = win.getSelection?.()
+    if (lastRange && selection) {
+      selection.removeAllRanges()
+      selection.addRange(lastRange)
+    }
+    run()
+    rememberRange()
+    schedule(el)
+  }
+
+  /** Outline the element at `path` (field or block) and clear any previous outline. */
+  const markSelected = (path: string | null) => {
+    doc.querySelectorAll('[data-u90-selected]').forEach((e) => e.removeAttribute('data-u90-selected'))
+    if (path) doc.querySelector(`[data-u90-field="${q(path)}"], [data-u90-block="${q(path)}"]`)?.setAttribute('data-u90-selected', '')
+    opts.onSelect?.(path)
+  }
+
+  /** `u90:select` from the Canvas also fires any `useReveal` listener whose prefix matches. */
+  const reveal = (path: string | null) => {
+    if (!path) return
+    for (const r of registry.reveals) if (path.startsWith(r.prefix)) r.fn()
+  }
+
+  /** Whether navigation is enabled (`u90:navigation`); off by default, matching v3's default. */
+  /*
+   * Whether the Canvas has this screen selected.
+   *
+   * **True until told otherwise, and the default is the deployment-order question.** A site
+   * re-vendored to this kit may be framed by a Canvas that predates `u90:active` and so never
+   * sends it. Defaulting to false there would mean every wheel is both forwarded AND prevented,
+   * leaving a page that cannot scroll at all — worse than the bug this fixes. Defaulting to
+   * true costs that pairing only the ability to pan the Canvas from over a frame, and panning
+   * over bare canvas still works.
+   *
+   * Against a Canvas that does send it the default barely exists: the frame is told on ready,
+   * before a client can reach for the wheel.
+   */
+  let isActive = true
+  let navigationEnabled = false
+
+  /*
+   * `hover`: no v3 equivalent to port — legacy never sent a hover message at all. New in v4, to
+   * spec (review round 1, finding 1): `pointerover`/`pointerout` on `document`, capture phase,
+   * resolved through the same `[data-u90-field], [data-u90-block]` marker pair `onClick` uses.
+   * `data-u90-hover` is the attribute `styles.ts`'s `[data-u90-hover]` rule keys on — set on the
+   * hovered element and cleared from whichever one held it before, so at most one element ever
+   * carries it.
+   */
+  let hoveredEl: HTMLElement | null = null
+  let hoveredPath: string | null = null
+  const onPointerOver = (e: Event) => {
+    const el = (e.target as Element | null)?.closest<HTMLElement>('[data-u90-field], [data-u90-block]') ?? null
+    const path = el?.getAttribute('data-u90-field') ?? el?.getAttribute('data-u90-block') ?? null
+    if (path === hoveredPath) return
+    hoveredEl?.removeAttribute('data-u90-hover')
+    hoveredEl = el
+    hoveredPath = path
+    hoveredEl?.setAttribute('data-u90-hover', '')
+    send({ type: 'u90:hover', path })
+  }
+  const onPointerOut = (e: Event) => {
+    // `pointerover` on whatever comes next handles a marked-to-marked transition; this only
+    // has to notice "left every marked element", which a null/unmarked `relatedTarget` means.
+    const related = (e as PointerEvent).relatedTarget as Element | null
+    if (related?.closest?.('[data-u90-field], [data-u90-block]')) return
+    if (hoveredPath === null) return
+    hoveredEl?.removeAttribute('data-u90-hover')
+    hoveredEl = null
+    hoveredPath = null
+    send({ type: 'u90:hover', path: null })
+  }
+
+  /*
+   * `caret`: no v3 equivalent to port either — legacy's `u90:caret` carried a `block` kind for
+   * its own floating toolbar, a concept this v1 kit has no equivalent of; v4's `u90:caret` is
+   * `path, top, left, width, height` (`protocol.ts`), so this reports the live caret's screen
+   * rect for whichever field is being typed into. `selectionchange` is a document-level event
+   * with no useful detail of its own, so the actual read happens on the next animation frame,
+   * guarded at every step per review round 1, finding 1: not (currently) editing at all, no
+   * selection, no range, or the field stopped being editable before the frame arrived.
+   */
+  const caretField = (): HTMLElement | null => {
+    const active = doc.activeElement as HTMLElement | null
+    if (!active || !active.hasAttribute('contenteditable')) return null
+    return active.closest<HTMLElement>('[data-u90-edit]')
+  }
+  const onSelectionChange = () => {
+    rememberRange()
+    if (!caretField()) return
+    const nextFrame: (fn: () => void) => void =
+      typeof win.requestAnimationFrame === 'function' ? (fn) => win.requestAnimationFrame(fn) : (fn) => win.setTimeout(fn, 0)
+    nextFrame(() => {
+      const el = caretField()
+      const path = el?.getAttribute('data-u90-field')
+      if (!el || !path) return
+      const selection = win.getSelection?.()
+      if (!selection || selection.rangeCount === 0) return
+      try {
+        const rect = selection.getRangeAt(0).getBoundingClientRect()
+        // `marks`/`block`/`field` are Canvas's rich-text toolbar's own business — the active
+        // formats and the outline of the field they apply to — so they are only worth reporting
+        // for a rich field; a plain text field has no formatting elements or block structure to
+        // read, and the caret message it sends stays exactly what it was before this change.
+        const anchor = selection.anchorNode
+        const rich = el.getAttribute('data-u90-edit') === 'rich' && anchor
+        const block = rich ? activeBlock(anchor, el) : undefined
+        const extra = rich ? { marks: activeMarks(anchor, el), field: rectOf(el.getBoundingClientRect()), ...(block ? { block } : {}) } : {}
+        send({ type: 'u90:caret', path, top: rect.top, left: rect.left, width: rect.width, height: rect.height, ...extra })
+      } catch {
+        // `getBoundingClientRect` is not implemented in every DOM (jsdom included); a caret
+        // report is a nicety, not a correctness requirement, so this is silently skipped.
+      }
+    })
+  }
+
+  const onClick = (e: Event) => {
+    const mouse = e as MouseEvent
+
+    // Navigation on: any plain link click browses, exactly as it would outside the Canvas —
+    // ahead of the marked-element selection below, so a marked field wrapped in a link still
+    // navigates while navigation is on (ported from `legacy/bridge.tsx`'s `onClick`, which
+    // checks `navigationRef.current` before it ever looks for `FIELD_ATTR`).
+    if (navigationEnabled) {
+      const a = (e.target as Element | null)?.closest?.('a[href]') as HTMLAnchorElement | null
+      const navigable = a && !a.hasAttribute('download') && (!a.target || a.target === '_self')
+      if (navigable && !mouse.metaKey && !mouse.ctrlKey && !mouse.shiftKey && !mouse.altKey) {
+        const url = new URL(a.href, win.location.href)
+        if (url.origin === win.location.origin) {
+          e.preventDefault()
+          send({ type: 'u90:navigate', path: url.pathname + url.search + url.hash })
+          return
+        }
+      }
+    }
+
+    const el = (e.target as Element | null)?.closest<HTMLElement>('[data-u90-field], [data-u90-block]')
+    const path = el?.getAttribute('data-u90-field') ?? el?.getAttribute('data-u90-block') ?? null
+    if (el && el.hasAttribute('data-u90-field')) {
+      // Ported from legacy (R40): inside the editor a click on a marked field is for selecting it,
+      // so it neither follows a link nor submits a form around it, and the page's own handlers
+      // never see it.
+      e.preventDefault()
+      e.stopPropagation()
+    } else if (!navigationEnabled && (e.target as Element | null)?.closest?.('a[href], button')) {
+      // Navigation off, a link or button with no field of its own — a card's stretched anchor, the
+      // padding around a marked label: swallowed, so the frame never navigates away or submits.
+      // Legacy also stopped the event here; v4 only prevents the default, so a block's own button
+      // (a menu toggle) still works while the Canvas is open.
+      e.preventDefault()
+    }
+    markSelected(path)
+    send({ type: 'u90:select', path })
+    const edit = el?.getAttribute('data-u90-edit') as 'text' | 'rich' | 'link-label' | null
+    if (el && edit && isEditableLeaf(el)) {
+      // Resolve the caret target before the element becomes editable, apply it after —
+      // `contenteditable` changes hit-testing (see `caret.ts`'s `caretTargetIn` doc).
+      const target = caretTargetIn(el, mouse.clientX, mouse.clientY)
+      beginEditing(el, edit)
+      applyCaret(target)
+    }
+  }
+
+  const onInput = (e: Event) => {
+    const el = (e.target as Element | null)?.closest<HTMLElement>('[data-u90-edit]')
+    if (el) {
+      schedule(el)
+      // The Canvas owns save debouncing. Its inspector needs each input immediately, including
+      // during continuous typing and just before focus crosses into the parent document.
+      flush()
+      // Other copies of a responsive button live in this same frame, which Canvas excludes
+      // when echoing an in-place edit. Preview them locally; applyPreview leaves the caret alone.
+      if (el.getAttribute('data-u90-edit') === 'link-label')
+        preview({ kind: 'link-label', path: el.getAttribute('data-u90-field')!, value: textWithTokens(el) })
+    }
+  }
+
+  /*
+   * Ported from legacy `onFocusOut` (R40). Leaving the document is not leaving the field: pressing
+   * the Canvas's formatting toolbar, switching applications or clicking the browser's own chrome all
+   * fire `focusout` here exactly as tabbing to the next field does, and ending the edit on them made
+   * the toolbar inert. `relatedTarget` tells them apart — focus moving out of this document reports
+   * none — so the element stays editable and its selection is remembered for `u90:format`. Only
+   * focus moving to another element of this document, outside the field, ends the edit.
+   */
+  const onBlur = (e: Event) => {
+    if (!editing || e.target !== editing) return
+    const next = (e as FocusEvent).relatedTarget as Node | null
+    if (!next || !doc.contains(next)) {
+      rememberRange()
+      // The inspector can write the same field next. Hand off the current value now, while
+      // retaining the caret for a formatting-toolbar command that merely borrowed focus.
+      flush()
+      return
+    }
+    if (editing.contains(next)) return
+    endEditing()
+  }
+
+  /**
+   * How to take back every preview applied since the last refresh, oldest first. React writes only
+   * what changed in its own model of the page, which a preview does not touch, so the refresh is
+   * authoritative only over a page that is exactly React's again: `u90:refresh` replays these newest
+   * first before it asks for the refresh (see `applyPreview`).
+   */
+  let journal: Undo[] = []
+  let previewed: PreviewInstruction[] = []
+  let stopped = false
+  /** Text and media previews already journaled for a path: the first undo restores the original, so later ones add nothing. */
+  let coalesced = new Set<string>()
+  /** Keep the live editor across an undo/React commit. Clones isolate its current
+   * typing from the original nodes React is about to update; a fresh undo retains
+   * those server nodes so ending the edit still allows an authoritative refresh. */
+  const preserveEditing = (): null | (() => void) => {
+    const el = editing
+    if (!el?.isConnected) return null
+    const children = [...el.childNodes].map((node) => node.cloneNode(true))
+    const bookmark = (node: Node | null, offset: number) => {
+      if (!node || !el.contains(node)) return null
+      const path: number[] = []
+      for (let current = node; current !== el; current = current.parentNode!) {
+        path.unshift(Array.prototype.indexOf.call(current.parentNode!.childNodes, current))
+      }
+      return { path, offset }
+    }
+    const selection = win.getSelection?.()
+    const liveAnchor = bookmark(selection?.anchorNode ?? null, selection?.anchorOffset ?? 0)
+    const liveFocus = bookmark(selection?.focusNode ?? null, selection?.focusOffset ?? 0)
+    const anchor = liveAnchor ?? bookmark(lastRange?.startContainer ?? null, lastRange?.startOffset ?? 0)
+    const focus = liveFocus ?? bookmark(lastRange?.endContainer ?? null, lastRange?.endOffset ?? 0)
+    const field = el.getAttribute('data-u90-field')!
+    return () => {
+      if (editing !== el || !el.isConnected) return
+      const serverChildren = [...el.childNodes]
+      el.replaceChildren(...children)
+      // An inspector preview predating these keystrokes must never be replayed.
+      previewed = previewed.filter((entry) => !((entry.kind === 'text' || entry.kind === 'rich' || entry.kind === 'link-label') && entry.path === field))
+      coalesced.add(`${el.getAttribute('data-u90-edit')}:${field}`)
+      journal.push(() => el.replaceChildren(...serverChildren))
+      if (el.getAttribute('data-u90-edit') === 'link-label') {
+        // The active label was restored above, but a delayed React commit also wrote its older
+        // words into responsive copies. Rebase those copies onto the live words, keeping their
+        // new server nodes for the next undo. Do not hand focus back as an inspector preview would.
+        const instruction: PreviewInstruction = { kind: 'link-label', path: field, value: textWithTokens(el) }
+        const undo = applyPreview(doc, instruction)
+        if (undo) {
+          journal.push(undo)
+          previewed.push(instruction)
+        }
+      }
+      if (anchor && focus && selection) {
+        const at = (path: number[]) => path.reduce<Node>((node, index) => node.childNodes[index]!, el)
+        const range = doc.createRange()
+        if (liveAnchor && liveFocus) {
+          selection.setBaseAndExtent(at(anchor.path), anchor.offset, at(focus.path), focus.offset)
+          lastRange = selection.getRangeAt(0).cloneRange()
+        } else {
+          range.setStart(at(anchor.path), anchor.offset)
+          range.setEnd(at(focus.path), focus.offset)
+          lastRange = range
+        }
+      }
+    }
+  }
+  /** Counts refreshes, so a fragment fetched before one and answered after it is dropped. */
+  let generation = 0
+  /**
+   * Whether a refresh has been asked for and its render has not yet committed. `router.refresh()` takes
+   * seconds: its payload commits well after `opts.refresh()` returns, and React reconciles it against its
+   * own model of the page, which excludes any preview made meanwhile. A node-moving preview made in that
+   * window leaves the document and model disagreeing. React-owned block orders remain live;
+   * legacy node-moving previews wait until commit. Field previews are rebased around the
+   * actual commit so a later refresh cannot restore values from an obsolete server render.
+   */
+  let refreshing = false
+  let refreshAgain = false
+  let refreshingTimer: ReturnType<typeof setTimeout> | null = null
+  /**
+   * Report a slow refresh without pretending it committed. Clearing the boundary
+   * on a timer lets a late response overwrite moves made after a queued refresh.
+   */
+  const REFRESH_CEILING_MS = 5000
+  const setRefreshing = (value: boolean) => {
+    refreshing = value
+    if (refreshingTimer) clearTimeout(refreshingTimer)
+    refreshingTimer = null
+    if (value) {
+      refreshingTimer = setTimeout(() => {
+        refreshingTimer = null
+        warnOnceThatRefreshIsSlow()
+      }, REFRESH_CEILING_MS)
+      // A pending timer must not keep a Node process alive (tests); browsers return a number.
+      ;(refreshingTimer as unknown as { unref?: () => void }).unref?.()
+    }
+    else if (refreshAgain) requestRefresh()
+  }
+  function requestRefresh() {
+    if (refreshing && [...registry.blockOrders].some((owner) => owner.document === doc)) {
+      refreshAgain = true
+      return
+    }
+    refreshAgain = false
+    if ([...registry.blockOrders].some((owner) => owner.document === doc && owner.needsReload())) {
+      win.location.reload()
+      return
+    }
+    // One refresh boundary at a time: newer moves stay visible through the older render.
+    // Clear only the moves included when THIS request starts, never when another is queued.
+    for (const owner of registry.blockOrders) if (owner.document === doc) owner.beforeRefresh()
+    const restoreEditing = preserveEditing()
+    try {
+      undoPreviews()
+      restoreEditing?.()
+    } finally {
+      setRefreshing(true)
+      opts.refresh()
+    }
+  }
+  const MOVES_NODES = new Set<PreviewInstruction['kind']>(['move', 'insert', 'replace', 'fragment'])
+  const preview = (instruction: PreviewInstruction) => {
+    // React-owned order is safe even while a refresh is pending. Only legacy DOM moves
+    // still need the guard below; they can disagree with React's tree during a commit.
+    if (instruction.kind === 'move') {
+      for (const owner of registry.blockOrders) {
+        if (owner.document === doc && owner.move(instruction.path, instruction.before)) return
+      }
+    }
+    if (refreshing && MOVES_NODES.has(instruction.kind)) return
+    if ((instruction.kind === 'text' || instruction.kind === 'rich' || instruction.kind === 'link-label') && editing?.getAttribute('data-u90-field') === instruction.path && !doc.hasFocus()) {
+      // Focus moved to the inspector. This is a new edit, not an echo into a field being typed in.
+      endEditing()
+    }
+    const key = instruction.kind === 'text' || instruction.kind === 'rich' || instruction.kind === 'link-label' || instruction.kind === 'media' ? `${instruction.kind}:${instruction.path}` : null
+    const undo = applyPreview(doc, instruction)
+    if (!undo) return
+    if (key) previewed = previewed.filter((entry) => !(entry.kind === instruction.kind && entry.path === instruction.path))
+    previewed.push(instruction)
+    if (key) {
+      if (coalesced.has(key)) return
+      coalesced.add(key)
+    }
+    journal.push(undo)
+  }
+  /** Puts the page back as React last rendered it. One failing undo (a stale one) never stops the rest. */
+  const undoPreviews = () => {
+    const undos = journal.reverse()
+    journal = []
+    previewed = []
+    coalesced = new Set()
+    generation++
+    for (const undo of undos) {
+      try {
+        undo()
+      } catch {
+        // A node the page no longer has; the sweep below and the refresh deal with what is left.
+      }
+    }
+    // Anything a stale journal missed (a frame that reloaded mid-flight): React never created these.
+    doc.querySelectorAll('[data-u90-skeleton], [data-u90-block*="/u90-pending-"]').forEach((el) => el.remove())
+    doc.querySelectorAll('[data-u90-removed]').forEach((el) => {
+      // The attribute holds the `style` attribute the node had (JSON; null for none), as `applyPreview` hid it.
+      let written: unknown = null
+      try {
+        written = JSON.parse(el.getAttribute('data-u90-removed') ?? 'null')
+      } catch {
+        // Not ours to read: the node loses its style attribute, below.
+      }
+      if (typeof written === 'string') el.setAttribute('style', written)
+      else el.removeAttribute('style')
+      el.removeAttribute('data-u90-removed')
+    })
+  }
+
+  /**
+   * Fetches `block` rendered on its own from this site's fragment page and puts it where the
+   * skeleton at `path` is. The request is relative: the frame is same-origin with the site, so the
+   * draft cookie goes with it and no CORS question arises. The page is the site's own, inside its
+   * layout, so the block is found in the response by its marker rather than taken as the body.
+   *
+   * Never reports and never retries. A failed, refused or empty answer leaves the skeleton for the
+   * `u90:refresh` that follows the save, which is what would have happened anyway. An answer that
+   * arrives after a refresh is dropped: that refresh cleared the skeleton, and a block put in now
+   * would be one nothing will undo.
+   */
+  const loadFragment = async ({ path, block }: Extract<PreviewInstruction, { kind: 'fragment' }>) => {
+    const asked = generation
+    try {
+      const response = await win.fetch(`/_u90/fragment?block=${encodeURIComponent(block)}&path=${encodeURIComponent(path)}`)
+      if (!response.ok) return
+      const page = new (win as Window & typeof globalThis).DOMParser().parseFromString(await response.text(), 'text/html')
+      const found = [...page.querySelectorAll('[data-u90-block]')].find((el) => el.getAttribute('data-u90-block') === path)
+      if (found && asked === generation) preview({ kind: 'replace', path, html: found.outerHTML })
+    } catch {
+      // The skeleton stays until the refresh.
+    }
+  }
+
+  const onMessage = (e: MessageEvent) => {
+    if (e.origin !== opts.platformOrigin || e.source !== (opts.parent as unknown)) return
+    const m = parseCanvasMessage(e.data)
+    if (!m) return
+    if (m.type === 'u90:hello') {
+      // The Canvas registered this frame after its `start()` ready went out, and asks again. The
+      // height `start()` reported was lost the same way, so it is reported again. The stamp is taken
+      // first, so the answer already carries it.
+      stamp = m.frame === undefined ? null : { frame: m.frame, locale: m.locale ?? null, revision: m.revision ?? 0 }
+      send({ type: 'u90:ready', path: win.location.pathname })
+      // The right-to-left check was lost the same way. Forgotten before the height, so a height that changed sends it once, not twice.
+      lastHeight = 0
+      lastDirection = ''
+      reportHeight()
+      reportDirection()
+    } else if (m.type === 'u90:refresh') {
+      flush()
+      requestRefresh()
+    } else if (m.type === 'u90:preview') {
+      if (m.instruction.kind === 'fragment') {
+        // No skeleton was placed while a refresh is in flight (`preview` drops it), so there is nothing to fill.
+        if (!refreshing) void loadFragment(m.instruction)
+      } else preview(m.instruction)
+    } else if (m.type === 'u90:select') {
+      markSelected(m.path)
+      reveal(m.path)
+    } else if (m.type === 'u90:flush') {
+      flush()
+      send({ type: 'u90:flushed', requestId: m.requestId })
+    } else if (m.type === 'u90:format') {
+      applyFormat(m.action, m.url, m.to, m.newTab)
+    } else if (m.type === 'u90:scroll') {
+      win.scrollTo({ top: m.to === 'top' ? 0 : (m.fraction ?? 0) * (doc.documentElement.scrollHeight - win.innerHeight) })
+    } else if (m.type === 'u90:viewport') {
+      // Ported from legacy's own `u90:viewport` branch (`bridge.tsx`, its `onMessage`): pin only
+      // on a real change, and re-measure the document's height afterwards — pinning changes it.
+      const height = typeof m.height === 'number' && m.height > 0 ? m.height : null
+      if (height !== pinnedHeight) {
+        pinnedHeight = height
+        pinViewport(height)
+        reportHeight()
+      }
+    } else if (m.type === 'u90:active') {
+      isActive = m.active
+    } else if (m.type === 'u90:navigation') {
+      navigationEnabled = m.enabled
+      // `styles.ts`'s `EDITING_CSS` keys both of legacy's `navigation` on/off branches off this
+      // attribute, since the stylesheet is a static string and can no longer take `navigation`
+      // as a per-render prop the way legacy's `EditingStyles` did.
+      doc.documentElement.toggleAttribute('data-u90-navigation', navigationEnabled)
+    }
+  }
+
+  /*
+   * ── Ported from `legacy/bridge.tsx`, unchanged in shape: `height`/`scrolled`/the gesture group
+   * below all still only ever send (site → canvas); `u90:viewport` is the one Canvas → site
+   * message among them, placed here because it calls `reportHeight`. Every one of them was gated
+   * in v3 behind `isActive`/`u90:focus` multi-screen bookkeeping that has no v4 equivalent —
+   * bridge v4's Canvas→Site table has no `active`/`focus` message at all — so that gating is
+   * dropped rather than ported. `height`/`scrolled`/the gesture group are not unit-tested beyond
+   * not throwing at `start()`; see the task report for the line-range each handler came from.
+   * `u90:viewport`, `u90:hover` and `u90:caret` (above) are unit-tested. ──
+   */
+
+  // `height`: legacy `reportHeight`/`ResizeObserver`, ~legacy/bridge.tsx:1057-1067.
+  let lastHeight = 0
+  const reportHeight = () => {
+    const height = doc.documentElement.scrollHeight
+    if (Math.abs(height - lastHeight) < 1) return
+    lastHeight = height
+    send({ type: 'u90:height', height })
+    reportDirection()
+  }
+
+  /** Draft only: the language a `u90-locale` page is shown in (`data-u90-language`), put on `<html>`, which the root layout rendered without it. */
+  const applyDraftLanguage = () => {
+    const marker = doc.querySelector('[data-u90-language]')
+    if (!marker) return
+    doc.documentElement.lang = marker.getAttribute('data-u90-language') ?? doc.documentElement.lang
+    doc.documentElement.dir = marker.getAttribute('data-u90-dir') === 'rtl' ? 'rtl' : 'ltr'
+  }
+  let lastDirection = ''
+  /**
+   * The right-to-left check: on a `dir="rtl"` page, how far it overflows the screen and which fields reach past an edge. Sent when it
+   * changes. A left-to-right page sends none. A field path longer than `isSiteMessage` accepts is left out, so the message is never refused.
+   */
+  const reportDirection = () => {
+    if (doc.documentElement.dir !== 'rtl') return
+    const width = doc.documentElement.clientWidth
+    const overflow = Math.max(0, Math.round(doc.documentElement.scrollWidth - width))
+    const offenders: string[] = []
+    for (const el of doc.querySelectorAll('[data-u90-field]')) {
+      const box = el.getBoundingClientRect()
+      const path = el.getAttribute('data-u90-field')
+      if (path && path.length <= MAX_OFFENDER_LENGTH && box.width > 0 && (box.left < -1 || box.right > width + 1) && !offenders.includes(path)) offenders.push(path)
+      if (offenders.length === MAX_OFFENDERS) break
+    }
+    const key = `${overflow}|${offenders.join(' ')}`
+    if (key === lastDirection) return
+    lastDirection = key
+    send({ type: 'u90:direction', dir: 'rtl', overflow, offenders })
+  }
+  let heights: InstanceType<typeof ResizeObserver> | null = null
+
+  /*
+   * `u90:viewport` (Canvas → site): what a `vh`/`svh`/`lvh`/`dvh`/`vmin`/`vmax` declaration
+   * measures against while this frame is drawn at a fixed height in the Canvas, rather than
+   * whatever the browser's own (irrelevant, cross-origin-driven) viewport happens to be. Ported
+   * from `legacy/bridge.tsx`'s `VIEWPORT_UNIT`/`PinnedDeclaration`/`releaseViewport`/`pinValue`/
+   * `pinViewport` (lines 238–333) — real CSSOM rewriting, not a custom property, because these
+   * sites reach for viewport units inside `min()`/`calc()` (a real fixture: `min-height:
+   * min(100svh, 2000px)`), which a rule of our own could not out-cascade without matching the
+   * site's own specificity, layer and position. `doc`/`win` replace legacy's bare `document`/
+   * `window` (legacy is browser-only; this runs from jsdom in tests too); everything else,
+   * including the comments, is unchanged.
+   */
+  const VIEWPORT_UNIT = /(-?\d*\.?\d+)(svh|lvh|dvh|vh|vmin|vmax)\b/gi
+
+  /** What a locked declaration said before it was pinned, so it can be given back. */
+  type PinnedDeclaration = {
+    priority: string
+    property: string
+    rule: CSSStyleRule
+    value: string
+  }
+
+  let pinned: PinnedDeclaration[] = []
+  let pinnedHeight: number | null = null
+
+  /** Put every pinned declaration back exactly as it was. */
+  const releaseViewport = (): void => {
+    for (const entry of pinned) {
+      try {
+        entry.rule.style.setProperty(entry.property, entry.value, entry.priority)
+      } catch {
+        // The stylesheet was replaced underneath us — there is nothing to restore to.
+      }
+    }
+    pinned = []
+  }
+
+  /** Rewrite the viewport units in one declaration to the pixels they would be at `height`. */
+  const pinValue = (value: string, height: number, width: number): string =>
+    value.replace(VIEWPORT_UNIT, (_whole, amount: string, unit: string) => {
+      const lower = unit.toLowerCase()
+      const basis = lower === 'vmin' ? Math.min(width, height) : lower === 'vmax' ? Math.max(width, height) : height
+      return `${(Number(amount) * basis) / 100}px`
+    })
+
+  /** Pin every viewport unit on the page to `height`, or release them all when it is null. */
+  const pinViewport = (height: null | number): void => {
+    releaseViewport()
+    if (height === null) return
+
+    const width = doc.documentElement.clientWidth
+
+    const walk = (rules: CSSRuleList): void => {
+      for (const rule of Array.from(rules)) {
+        const style = (rule as CSSStyleRule).style
+        if (style) {
+          for (const property of Array.from(style)) {
+            const value = style.getPropertyValue(property)
+            if (!VIEWPORT_UNIT.test(value)) continue
+            // `test` on a `g` regex carries `lastIndex` between calls; left alone, every
+            // second declaration would be skipped.
+            VIEWPORT_UNIT.lastIndex = 0
+
+            const priority = style.getPropertyPriority(property)
+            try {
+              style.setProperty(property, pinValue(value, height, width), priority)
+            } catch {
+              continue
+            }
+            pinned.push({ priority, property, rule: rule as CSSStyleRule, value })
+          }
+        }
+
+        // `@media`, `@supports`, `@layer`, `@container`, and nested rules.
+        const grouped = (rule as CSSGroupingRule).cssRules
+        if (grouped?.length) walk(grouped)
+      }
+    }
+
+    for (const sheet of Array.from(doc.styleSheets)) {
+      try {
+        walk(sheet.cssRules)
+      } catch {
+        // Cross-origin, and not readable from here.
+      }
+    }
+  }
+
+  // `scrolled`: legacy `reportScroll`, ~legacy/bridge.tsx:1108-1121 (rAF-coalesced).
+  let scrollPending = 0
+  const reportScroll = () => {
+    if (scrollPending) return
+    scrollPending = win.requestAnimationFrame(() => {
+      scrollPending = 0
+      send({ type: 'u90:scrolled', top: win.scrollY, max: doc.documentElement.scrollHeight - win.innerHeight })
+    })
+  }
+
+  /*
+   * gesture — wheel → `zoom`/`wheel`: legacy `onWheel`, ~legacy/bridge.tsx:1079-1090.
+   *
+   * Two lines here are the whole of the active-screen rule, and the v4 port dropped both on the
+   * reasoning that the Canvas→Site table had no `active` message. It does now, because this is
+   * what needed it: without them every wheel was forwarded AND the page scrolled under it, so
+   * one gesture moved the page and panned the Canvas at the same time.
+   *
+   * The active screen keeps its own wheel — return before sending, and WITHOUT preventing the
+   * default, so the page scrolls as a page does.
+   *
+   * An inactive screen's wheel belongs to the Canvas, and the page must not also take it. Only
+   * the site can stop that: `preventDefault` has to happen in the document that owns the scroll,
+   * and that is never the Canvas. `stopImmediatePropagation` goes with it because a smooth-scroll
+   * library listens for the wheel itself and then scrolls programmatically, which `preventDefault`
+   * alone does not touch — this listener is on the capture phase so it runs before any of them.
+   */
+  const onWheel = (e: WheelEvent) => {
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault()
+      send({ type: 'u90:zoom', deltaY: e.deltaY, x: e.clientX, y: e.clientY })
+      return
+    }
+    if (isActive) return
+    e.preventDefault()
+    e.stopPropagation()
+    e.stopImmediatePropagation()
+    send({ type: 'u90:wheel', deltaX: e.deltaX, deltaY: e.deltaY })
+  }
+
+  // gesture — middle-button pan → `grab`/`drag`/`drop`: legacy `onPointerDown`/`onPointerMove`/
+  // `onPointerUp`/`onAuxClick`, ~legacy/bridge.tsx:1130-1190.
+  let panning: number | null = null
+  const onPointerDown = (e: PointerEvent) => {
+    // A press anywhere else releases the field being edited (legacy `onPointerDown`, R40): with
+    // `onBlur` keeping the field when focus leaves for nowhere in particular, a press on plain page
+    // copy — which moves focus to no element, the same `relatedTarget: null` as leaving the frame —
+    // would otherwise leave it editable.
+    if (editing && !editing.contains(e.target as Node)) endEditing()
+    if (e.button !== 1 || panning !== null) return
+    e.preventDefault()
+    panning = e.pointerId
+    try {
+      doc.documentElement.setPointerCapture(e.pointerId)
+    } catch {
+      // Capture is a nicety; the window listeners still see the moves.
+    }
+    send({ type: 'u90:grab', screenX: e.screenX, screenY: e.screenY })
+  }
+  const onPointerMove = (e: PointerEvent) => {
+    if (e.pointerId !== panning) return
+    send({ type: 'u90:drag', screenX: e.screenX, screenY: e.screenY })
+  }
+  const onPointerUp = (e: PointerEvent) => {
+    if (e.pointerId !== panning) return
+    panning = null
+    try {
+      doc.documentElement.releasePointerCapture(e.pointerId)
+    } catch {
+      // Already released.
+    }
+    send({ type: 'u90:drop' })
+  }
+  const onAuxClick = (e: MouseEvent) => {
+    if (e.button === 1) e.preventDefault()
+  }
+
+  // gesture — keydown/keyup → `key`: legacy `CANVAS_KEYS`/`isTyping`/`onKey`, ~legacy/bridge.tsx:1211-1259.
+  const CANVAS_KEYS = new Set(['KeyF', 'KeyG', 'KeyH', 'KeyN', 'KeyT', 'KeyV', 'Space'])
+  const isTyping = (target: EventTarget | null): boolean => {
+    const element = target as HTMLElement | null
+    const tag = element?.tagName
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || Boolean(element?.isContentEditable)
+  }
+  const onKey = (e: KeyboardEvent) => {
+    if (e.metaKey || e.ctrlKey || e.altKey || isTyping(e.target)) return
+    if (!CANVAS_KEYS.has(e.code)) return
+    if (e.code === 'Space') e.preventDefault()
+    send({ type: 'u90:key', code: e.code, down: e.type === 'keydown' })
+  }
+
+  const style = doc.createElement('style')
+  style.setAttribute('data-u90-editing', '')
+  style.textContent = EDITING_CSS
+
+  const bridge = {
+    start() {
+      stopped = false
+      // First, so a test observing `start()`'s very first message never races height/scroll
+      // reporting (both are no-ops against jsdom's zero layout anyway, but this holds regardless
+      // of that).
+      send({ type: 'u90:ready', path: win.location.pathname })
+
+      doc.head.appendChild(style)
+      applyDraftLanguage()
+      doc.addEventListener('click', onClick, true)
+      doc.addEventListener('input', onInput, true)
+      doc.addEventListener('focusout', onBlur, true)
+      doc.addEventListener('pointerover', onPointerOver, true)
+      doc.addEventListener('pointerout', onPointerOut, true)
+      doc.addEventListener('selectionchange', onSelectionChange)
+      win.addEventListener('message', onMessage)
+      win.addEventListener('wheel', onWheel, { capture: true, passive: false })
+      win.addEventListener('scroll', reportScroll, { passive: true })
+      win.addEventListener('pointerdown', onPointerDown)
+      win.addEventListener('pointermove', onPointerMove)
+      win.addEventListener('pointerup', onPointerUp)
+      win.addEventListener('auxclick', onAuxClick)
+      win.addEventListener('keydown', onKey)
+      win.addEventListener('keyup', onKey)
+
+      // Not in lib.dom.d.ts's `Window` interface (only as the ambient global constructor), and
+      // absent altogether in jsdom — hence the cast to check for it and the guard around it.
+      const ResizeObserverCtor = (win as unknown as { ResizeObserver?: typeof ResizeObserver }).ResizeObserver
+      if (typeof ResizeObserverCtor !== 'undefined') {
+        heights = new ResizeObserverCtor(reportHeight)
+        heights.observe(doc.documentElement)
+      }
+      reportHeight()
+      reportDirection()
+
+      registry.current = bridge
+    },
+    stop() {
+      stopped = true
+      endEditing() // what was typed goes out, and no element is left contenteditable
+      flush()
+      releaseViewport()
+      style.remove()
+      doc.removeEventListener('click', onClick, true)
+      doc.removeEventListener('input', onInput, true)
+      doc.removeEventListener('focusout', onBlur, true)
+      doc.removeEventListener('pointerover', onPointerOver, true)
+      doc.removeEventListener('pointerout', onPointerOut, true)
+      doc.removeEventListener('selectionchange', onSelectionChange)
+      win.removeEventListener('message', onMessage)
+      win.removeEventListener('wheel', onWheel, { capture: true })
+      win.removeEventListener('scroll', reportScroll)
+      win.removeEventListener('pointerdown', onPointerDown)
+      win.removeEventListener('pointermove', onPointerMove)
+      win.removeEventListener('pointerup', onPointerUp)
+      win.removeEventListener('auxclick', onAuxClick)
+      win.removeEventListener('keydown', onKey)
+      win.removeEventListener('keyup', onKey)
+      heights?.disconnect()
+      heights = null
+      refreshAgain = false
+      setRefreshing(false)
+      registry.current = null
+    },
+    /** Called once before a server subtree commits. The first boundary consumes
+     * the journal, so sibling/nested boundaries cannot replay it twice. */
+    prepareCommit(): null | (() => void) {
+      if (journal.length === 0) return null
+      const restoreEditing = preserveEditing()
+      const field = editing?.getAttribute('data-u90-field')
+      const instructions = previewed.filter((entry) => !((entry.kind === 'text' || entry.kind === 'rich' || entry.kind === 'link-label') && entry.path === field))
+      undoPreviews()
+      return () => {
+        if (stopped) return
+        for (const instruction of instructions) preview(instruction)
+        restoreEditing?.()
+      }
+    },
+    flush,
+    /** The host says its refresh has committed (`false`), or is running (`true`); see `refreshing`. */
+    setRefreshing,
+    markSelected,
+    /** `u90:path`, called from `BridgeClient`'s `usePathname()` effect after a client-side navigation. */
+    notifyPath(path: string) {
+      send({ type: 'u90:path', path })
+    },
+  }
+  return bridge
+}
+
+export type Bridge = ReturnType<typeof createBridge>