@unitninety/site-kit 0.0.0-stage → 1.6.2

package/src/legacy/bridge.tsx

@@ -0,0 +1,1987 @@
+'use client'
+
+import { acceptsLanguageFrame, languageFrameNavigation, type LanguageFrameContext } from './preview'
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import {
+  BRIDGE_VERSION,
+  CANVAS_FRAME_NAME,
+  type EditorBlock,
+  type ManifestCollection,
+} from './contract'
+import type { CollectionRow, ContentResult, Section } from './content'
+import {
+  applyCaret,
+  caretTargetIn,
+  EDITABLE_LEAF_SELECTOR,
+  isEditableLeaf,
+  MEDIA,
+  MEDIA_SELECTOR,
+} from './caret'
+import { toRichText, type DomLike } from './lexicalDom'
+import { FIELD_ATTR, isSettledInView, revealSelectors, RICH_ATTR, SECTION_ATTR } from './shape'
+import { resolveUploadsIn } from './uploads'
+import { createLanguageHints } from './languageHints'
+
+/**
+ * How much of a quote travels to the dashboard.
+ *
+ * The words are for a chat prefill the client then edits, and a whole paragraph pasted in
+ * front of their prompt is worse than none of it — they would delete it before typing. The
+ * dashboard holds the same figure in `canvas/agentSelection.ts`; if they ever disagree the
+ * shorter one wins, which is the safe direction.
+ */
+const MAX_QUOTE = 400
+
+/** One line, no runs of whitespace — rendered markup is full of newlines and indentation. */
+const collapseSpace = (value: string): string =>
+  value.replace(/\s+/g, ' ').trim().slice(0, MAX_QUOTE)
+
+/**
+ * An element's own words, or null when it has none worth quoting.
+ *
+ * `innerText` rather than `textContent`, for the reason `caret.ts` gives about buttons: it
+ * respects rendering, so an `<svg>` chevron inside a link contributes nothing and the value is
+ * the label alone. A media field returns nothing here, which is correct — its value is an
+ * upload id and quoting the empty string back would claim it had no content.
+ */
+const quotable = (element: HTMLElement): string | undefined => {
+  const words = collapseSpace(element.innerText ?? element.textContent ?? '')
+  return words || undefined
+}
+
+/**
+ * The site half of the UnitNinety editing protocol.
+ *
+ * When a page is framed by the dashboard's Canvas in draft mode, the dashboard pushes
+ * the editor's working copy in on every keystroke and this re-renders from it — so the
+ * client edits their actual page, with real components, CSS, fonts and video, rather
+ * than an approximation. Clicking any element carrying `data-u90-field` reports that
+ * field back, which is what makes the page directly editable.
+ *
+ * Outside a frame the hook does nothing at all, so a public visitor pays no cost.
+ *
+ * **Why this is a package rather than a file each site copies.** Almost everything below
+ * exists because a cross-origin iframe keeps its own input, and each fix was found the
+ * hard way:
+ *
+ *  - ⌘/ctrl + wheel and trackpad pinch never reach the dashboard, so zoom stops working
+ *    wherever the pointer is over the page — which is most of the stage.
+ *  - A middle-button pan lands here, and the dashboard sees no pointer events until
+ *    release, so the canvas appeared to stick and then jump.
+ *  - Tool shortcuts and space-to-pan die the moment focus moves into the frame.
+ *  - An unselected screen must not scroll, and `preventDefault` is not enough against a
+ *    smooth-scroll library that moves the page programmatically.
+ *
+ * Copy-pasted, those fixes live in one repo and the next client silently gets the
+ * broken version. `BRIDGE_VERSION` is the enforcement: the dashboard refuses to render
+ * its editor against a version it doesn't speak, so a stale site degrades loudly.
+ *
+ * Security: every inbound message is checked against the platform's own origin, so
+ * another page that frames this site cannot drive it.
+ */
+
+/** This site's collection rows, keyed by slug — the same shape `getCollection` returns. */
+export type EntriesByCollection = Record<string, CollectionRow[]>
+
+export type LiveContent = {
+  content: ContentResult
+  /** True when this page is inside the dashboard's editing frame. */
+  embedded: boolean
+  /**
+   * The collection rows, live while framed and the server-fetched ones otherwise.
+   *
+   * Keyed by slug, so a component reads `entries.projects` and gets exactly what
+   * `getCollection('projects')` would have returned. A collection the dashboard has not
+   * pushed is simply absent, which is what `?? initialProjects` already handles.
+   */
+  entries: EntriesByCollection
+  /**
+   * Whether links in this frame navigate. False while the operator is editing, which
+   * is the default — pass it to `EditingStyles` so the affordances agree with the
+   * behaviour.
+   */
+  navigation: boolean
+  selected: null | string
+}
+
+type MediaMap = Record<
+  string,
+  { alt?: string; focalX?: null | number; focalY?: null | number; url?: null | string }
+>
+type PagesMap = Record<string, { slug?: string; title?: string }>
+
+/**
+ * A hydration boundary that actively owns its one transition.
+ *
+ * The server and hydrating client both render `false`; a timer then performs an ordinary React
+ * state transition. This used to be expressed through `useSyncExternalStore`, whose browser
+ * snapshot remained on its hydration value under the sandbox's Next development runtime even
+ * after its subscriber fired. The result was a correctly compiled page that never mounted the
+ * editing effect: no ready message, no click selection and no active-screen scroll ownership.
+ *
+ * Timed rather than set synchronously inside the effect, both to give cleanup a real job and to
+ * keep the hydration transition outside the effect body. It runs once; whether a document is
+ * mounted cannot change during its lifetime.
+ */
+export const useHasMounted = (): boolean => {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => setMounted(true), 0)
+    return () => window.clearTimeout(timer)
+  }, [])
+
+  return mounted
+}
+
+/** Whether this mounted document is framed. */
+export const useIsFramed = (): boolean => {
+  const mounted = useHasMounted()
+  return mounted && (window.parent !== window || window.name === CANVAS_FRAME_NAME)
+}
+
+/**
+ * Bring the selected thing into view inside this page.
+ *
+ * The dashboard can move the canvas to a screen, but only the page itself can scroll to
+ * something inside it — so a client arriving from the CMS to edit one project landed on the
+ * right screen looking at the top of it.
+ *
+ * **Where to look is `revealSelectors`' decision, not this function's**, and it is not the
+ * exact field alone. Canvas selects containers as readily as leaves — a whole section, a
+ * list, a link's group — while only leaves carry a marker, so exact matching found the target
+ * exactly when a client clicked a field and nothing the rest of the time. Clicking "Quote" in
+ * the rail outlined the block, because the outline resolves the section marker, and left the
+ * page where it was: the outline and the scroll disagreed about what a selection means.
+ *
+ * Nothing is found when the thing genuinely is not on the page — jdsi's home carousel marks
+ * only its active slide — and nothing then happens, which is the honest outcome.
+ */
+const revealField = (field: string): void => {
+  let target: HTMLElement | null = null
+  for (const selector of revealSelectors(field)) {
+    target = document.querySelector<HTMLElement>(selector)
+    if (target) break
+  }
+
+  if (!target) return
+
+  /*
+   * Already on screen: leave the page exactly where it is.
+   *
+   * `u90:select` also arrives when the client clicks an element *in* this frame — the site
+   * reports it and the dashboard echoes it back — so scrolling unconditionally would
+   * re-centre the page under every click, which reads as the page fighting you.
+   */
+  if (isSettledInView(target.getBoundingClientRect(), window.innerHeight)) return
+
+  /*
+   * Instant, not smooth. These sites run Lenis, which owns the scroll position and animates
+   * it itself — a smooth native scroll competes with it and can land somewhere neither
+   * intended. An instant jump is one position change Lenis picks up on its next frame, and
+   * "take me to the thing I asked to edit" wants to arrive rather than travel.
+   */
+  target.scrollIntoView({ block: 'center', inline: 'nearest' })
+}
+
+/**
+ * What the client has typed, as the dashboard's text control would hold it.
+ *
+ * `innerText` rather than `textContent`, because it is the one that respects layout:
+ * a rich text field's paragraphs come back separated by blank lines, which is exactly
+ * what `textToLexical` splits on. `textContent` would run them together and three
+ * paragraphs would save as one.
+ *
+ * Non-breaking spaces are put back to ordinary ones. Chromium's `plaintext-only` does not
+ * produce them, but the `contenteditable="true"` fallback above and other engines do — for
+ * a trailing or repeated space — and one saved into the client's copy is a stray character
+ * on the published page that nothing on screen explains.
+ */
+const readEditedText = (element: HTMLElement): string =>
+  element.innerText.replace(/ /g, ' ').replace(/\r\n?/g, '\n')
+
+/*
+ * Formatting in the frame is `contentEditable`'s own -- ⌘B, ⌘I, and nothing else.
+ *
+ * The design said these should drive Lexical's commands, which cannot be done here: this kit
+ * is vendored into every client site and takes no dependencies, so `lexical` is not available
+ * on this side of the bridge and should not become available.
+ *
+ * That is a smaller loss than it sounds. The browser gives bold and italic for free, the
+ * serialiser reads both spellings of each, and everything structural -- headings, lists, links --
+ * is a control in the panel where the client can see what they are choosing. What is not
+ * acceptable is a keystroke that looks applied and does not survive a reload, which is why the
+ * round trip asserts `b` and `i` rather than assuming them.
+ */
+
+/** A real element as the structural node `toRichText` walks. See `lexicalDom.ts`. */
+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')
+  return {
+    attributes: { ...(href ? { href } : {}), ...(singleKey ? { 'data-single-key': singleKey } : {}) },
+    children: [...(element.childNodes ?? [])].map(asDomLike),
+    tag: element.tagName?.toLowerCase(),
+  }
+}
+
+/**
+ * The viewport-height units, and the ones that depend on height through a comparison.
+ *
+ * `vw` is deliberately absent: a full-length frame is exactly as wide as the device it is
+ * standing in for, so a width unit already measures against the right thing.
+ */
+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[] = []
+
+/** 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`.
+ *
+ * The whole value is rewritten rather than matched against a known shape, because these
+ * sites reach for them inside `min()` and `calc()` — jdsi's hero is
+ * `min-height: min(100svh, 2000px)` — and a rule that only understood a bare `100vh`
+ * would walk straight past the one declaration that matters.
+ */
+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.
+ *
+ * The declarations are edited **in place**, in the site's own stylesheets, rather than
+ * overridden from a stylesheet of our own. An override has to win the cascade against a
+ * rule it cannot see — matching its specificity, its layer, and its position — and Tailwind
+ * puts these in `@layer utilities` under generated class names like
+ * `.min-h-\[min\(100svh\,2000px\)\]`. Editing the declaration itself sidesteps all of it:
+ * same rule, same specificity, same layer, so whatever won before still wins, at a value
+ * that no longer moves when the frame does. The originals are kept and restored on release,
+ * and this only ever runs inside the editor's frame.
+ *
+ * A stylesheet the browser will not open — one served from another origin, a font service —
+ * throws on `cssRules` and is skipped. Its `vh` keeps stretching; there is no reading it
+ * from here, and the alternative is failing on every page that loads a webfont.
+ */
+const pinViewport = (height: null | number): void => {
+  releaseViewport()
+  if (height === null) return
+
+  const width = document.documentElement.clientWidth
+
+  const walk = (rules: CSSRuleList): void => {
+    for (const rule of Array.from(rules)) {
+      /*
+       * Declarations first, children second, and **never one instead of the other**.
+       *
+       * Since CSS nesting, a plain style rule is itself a grouping rule: it carries a
+       * `cssRules` list, empty in the ordinary case. Treating "has `cssRules`" as "is a
+       * container, so has no declarations of its own" therefore walks straight past every
+       * rule in the document — which is exactly what it did, silently, pinning nothing.
+       */
+      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 — Tailwind puts
+      // nearly everything inside at least one of them.
+      const grouped = (rule as CSSGroupingRule).cssRules
+      if (grouped?.length) walk(grouped)
+    }
+  }
+
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      walk(sheet.cssRules)
+    } catch {
+      // Cross-origin, and not readable from here.
+    }
+  }
+}
+
+const indexSections = (sections: Section[]): Record<string, number> => {
+  const index: Record<string, number> = {}
+  sections.forEach((section, position) => {
+    if (section.blockType && index[section.blockType] === undefined) {
+      index[section.blockType] = position
+    }
+  })
+  return index
+}
+
+/**
+ * The chrome from a content push, or null when the push said nothing about it.
+ *
+ * Read as untrusted, for the reason `readLayout` in `./content` gives about the server
+ * fetch: nothing between the two halves enforces this shape, and a platform running ahead
+ * of this kit could send anything under the key. Null on anything unusable, which is also
+ * what "not pushed at all" reads as — and the caller turns both into "keep the chrome the
+ * server rendered", so a malformed layout costs a client nothing.
+ *
+ * Restated here rather than imported from `./content`, which is the server module that
+ * holds the API key: this file is a client component, and pulling that module in to share
+ * nine lines would carry the fetch layer into every visitor's bundle.
+ */
+const toLayout = (value: unknown): ContentResult['layout'] => {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return null
+  const entries = (value as { entries?: unknown }).entries
+  if (!Array.isArray(entries)) return null
+  const rows = entries as (Record<string, unknown> & { blockType: string })[]
+  /*
+   * The id is the half a site cannot work out for itself, and the half it may be handed
+   * nothing for. Kept when it is there — as a string, since the address it prefixes is text
+   * and the platform's row ids are `number | string` — and simply absent when it is not.
+   * Refusing the layout over a missing id would blank a visitor's header for a reason only
+   * the editor has.
+   */
+  const id = (value as { id?: unknown }).id
+  return typeof id === 'number' || typeof id === 'string'
+    ? { entries: rows, id: String(id) }
+    : { entries: rows }
+}
+
+/**
+ * Turn the dashboard's working copy into what the components expect.
+ *
+ * The working copy stores an upload as a bare id — that is what gets saved — and the
+ * maps arrive alongside it. Resolving here means the components see the same shape they
+ * get from a server fetch, so a just-picked image appears immediately and nothing
+ * downstream has to know the editor exists.
+ */
+const toContent = (
+  sections: Section[],
+  blocks: EditorBlock[],
+  media: MediaMap,
+  pages: PagesMap,
+  layout: ContentResult['layout'],
+): ContentResult => {
+  const byId = new Map(
+    /*
+      Passed through rather than rebuilt key by key. Enumerating them here is what let the
+      focal point reach a published page but not the editing frame, and every field added
+      after it would have had the same silent gap.
+    */
+    Object.entries(media).map(([id, entry]) => [
+      id,
+      { ...entry, alt: entry.alt ?? '', url: entry.url ?? null },
+    ]),
+  )
+
+  resolveUploadsIn(sections, blocks, byId)
+  /*
+   * The layout's blocks are declared in the same manifest as the page's, so the one walk
+   * resolves both. It has to reach here as well as the sections: a client who picks a new
+   * logo has picked it in the header, and an unresolved id renders as no image at all —
+   * the frame would blank the very thing they were looking at.
+   */
+  if (layout) resolveUploadsIn(layout.entries, blocks, byId)
+
+  // Page links are shallow and always named `page`, so a targeted walk is enough.
+  const resolvePages = (value: unknown): void => {
+    if (Array.isArray(value)) {
+      value.forEach(resolvePages)
+      return
+    }
+    if (!value || typeof value !== 'object') return
+    const record = value as Record<string, unknown>
+    for (const [key, entry] of Object.entries(record)) {
+      if (key === 'page' && (typeof entry === 'number' || typeof entry === 'string')) {
+        const found = pages[String(entry)]
+        record[key] = found ? { slug: found.slug ?? '', title: found.title ?? '' } : null
+        continue
+      }
+      resolvePages(entry)
+    }
+  }
+  resolvePages(sections)
+  if (layout) resolvePages(layout.entries)
+
+  /*
+   * `index` stays the page's own. Layout entries are addressed by their position in the
+   * layout — `~12.0.tagline` — never by `blockType`, so indexing them here would build a
+   * second, conflicting answer to "where is the hero" for the one field path that has to
+   * mean the page.
+   */
+  /*
+   * `seo` and `title` stay null: the dashboard's working copy has nothing to push for them
+   * yet — the editing bridge does not carry SEO fields — and `null` is the same "inherit"
+   * answer a real fetch gives a page that has none.
+   */
+  return { index: indexSections(sections), layout, seo: null, sections, status: 'ok', title: null }
+}
+
+/**
+ * Resolve the uploads inside pushed rows, so a just-picked photo appears immediately.
+ *
+ * Each row is wrapped as a one-section page against its collection's own fields — the
+ * same trick the platform uses in `manifest/entrySchema.ts` — so the one upload walker
+ * in `./uploads` applies unchanged rather than growing a second traversal for rows.
+ *
+ * A collection the site didn't declare is passed through untouched: nothing can be said
+ * about the shape of rows there are no field definitions for, and guessing is how images
+ * get lost.
+ */
+const toEntries = (
+  pushed: EntriesByCollection,
+  collections: ManifestCollection[],
+  media: MediaMap,
+): EntriesByCollection => {
+  const byId = new Map(
+    /*
+      Passed through rather than rebuilt key by key. Enumerating them here is what let the
+      focal point reach a published page but not the editing frame, and every field added
+      after it would have had the same silent gap.
+    */
+    Object.entries(media).map(([id, entry]) => [
+      id,
+      { ...entry, alt: entry.alt ?? '', url: entry.url ?? null },
+    ]),
+  )
+
+  const resolved: EntriesByCollection = {}
+
+  for (const [slug, rows] of Object.entries(pushed)) {
+    if (!Array.isArray(rows)) continue
+
+    const declared = collections.find((entry) => entry.slug === slug)
+    const blocks: EditorBlock[] = declared
+      ? [{ fields: declared.fields, label: declared.label, slug: '__entry' }]
+      : []
+
+    resolved[slug] = rows.map((row) => {
+      const data = row?.data && typeof row.data === 'object' ? row.data : {}
+      if (blocks.length === 0) return { data, id: row.id }
+
+      /*
+       * A copy, wrapped. `resolveUploadsIn` works in place, and the pushed object is the
+       * dashboard's working copy — resolving into it would replace the ids it is about to
+       * save with objects. The wrapper comes off so `blockType` never reaches a component.
+       */
+      const copy: Record<string, unknown> = { ...data, blockType: '__entry' }
+      resolveUploadsIn([copy], blocks, byId)
+      delete copy.blockType
+
+      return { data: copy, id: row.id }
+    })
+  }
+
+  return resolved
+}
+
+export const useLiveContent = ({
+  blocks,
+  collections = [],
+  initial = { index: {}, layout: null, seo: null, sections: [], status: 'ok', title: null },
+  initialEntries = {},
+  platformOrigin,
+  language,
+}: {
+  /** The site's own schema, so uploads are found precisely rather than by name. */
+  blocks: EditorBlock[]
+  /**
+   * The site's collection declarations, from `defineCollections`.
+   *
+   * Needed for the same reason `blocks` is: to find the uploads inside a pushed row by
+   * what the site actually declares rather than by guessing at field names. Omitted, rows
+   * still arrive — their images just won't update until the next save.
+   */
+  collections?: ManifestCollection[]
+  /**
+   * The server-fetched page content. Optional: a route rendered entirely from collection
+   * rows — a project's own page — has no page document behind it and passes nothing.
+   */
+  initial?: ContentResult
+  /** The server-fetched rows, returned as `entries` until the dashboard pushes any. */
+  initialEntries?: EntriesByCollection
+  platformOrigin: string
+  language?: LanguageFrameContext
+}): LiveContent => {
+  /*
+   * Only the dashboard's pushes are held in state; `initial` is read straight through.
+   * Mirroring the prop into state would need an effect to keep the two in step, and
+   * would make a server navigation silently lose an unsaved edit.
+   */
+  const [override, setOverride] = useState<ContentResult | null>(null)
+  /*
+   * Held apart from `override` even though both arrive in one message, because they have
+   * different fallbacks: a page with no sections is a real answer, while a collection the
+   * dashboard has not pushed must fall back to what the server fetched rather than to an
+   * empty list. Merged over `initialEntries` on read, below.
+   */
+  const [entriesOverride, setEntriesOverride] = useState<EntriesByCollection | null>(null)
+  const [selected, setSelected] = useState<null | string>(null)
+  const languageLocale = language?.locale
+  const languageRevision = language?.revision
+  const identity = JSON.stringify([languageLocale, languageRevision])
+  const [contextIdentity, setContextIdentity] = useState(identity)
+  // Adjust this component before React commits a new context. Old-locale overrides
+  // never reach its first paint, and no effect resets a newly received content push.
+  if (contextIdentity !== identity) {
+    setContextIdentity(identity)
+    setOverride(null)
+    setEntriesOverride(null)
+    setSelected(null)
+  }
+
+  /**
+   * The field this frame last reported as clicked, so its own echo does not scroll the page.
+   *
+   * A ref rather than state: it is read once by the message that comes straight back and never
+   * rendered, and putting it in state would re-render the page mid-click for no one's benefit.
+   */
+  const selfSelected = useRef<null | string>(null)
+  /*
+   * Links are inert until the operator says otherwise.
+   *
+   * Held twice, and both are needed. The click listener is registered once and would
+   * capture the initial value forever, so it reads the ref — the same problem
+   * `isActive` solves with a closure variable. But this one also drives the hover
+   * affordances, so it has to be state as well. Both are written together in the
+   * message handler, never during render.
+   */
+  const [navigation, setNavigation] = useState(false)
+  const navigationRef = useRef(false)
+  const embedded = useIsFramed()
+
+  /*
+   * The pushed working copy over the server-fetched page — but the chrome falls back the
+   * way a collection the dashboard never pushed falls back to its fetched rows.
+   *
+   * A push carrying no layout means "this push says nothing about the chrome": a platform
+   * older than bridge 3, or a page whose layout resolved to nothing. Letting the override's
+   * `null` win there would blank a header the server had already rendered, the moment the
+   * client touched anything — the one case where the live copy knows *less* than the page
+   * it is replacing. Nothing changes outside the editor, where there is no override at all
+   * and `initial` is read through untouched.
+   */
+  const content = useMemo(
+    () => (override ? { ...override, layout: override.layout ?? initial.layout } : initial),
+    [initial, override],
+  )
+
+  /*
+   * Pushed rows over the server-fetched ones, per collection.
+   *
+   * Merged rather than replaced: a frame showing a project's own page is pushed every
+   * collection the tenant has, but a site that only fetched `projects` server-side should
+   * not suddenly gain the others — and, more importantly, a collection the dashboard has
+   * *not* pushed must keep the rows this page rendered with rather than becoming empty.
+   */
+  const entries = useMemo(
+    () => (entriesOverride ? { ...initialEntries, ...entriesOverride } : initialEntries),
+    [entriesOverride, initialEntries],
+  )
+
+  const send = useCallback(
+    (message: Record<string, unknown>) => {
+      if (!platformOrigin || window.parent === window) return
+      window.parent.postMessage(
+        {
+          ...message,
+          version: BRIDGE_VERSION,
+          ...(languageLocale
+            ? { languageVersion: 1, locale: languageLocale, languageRevision }
+            : {}),
+        },
+        platformOrigin,
+      )
+    },
+    [platformOrigin, languageLocale, languageRevision],
+  )
+
+  useEffect(() => {
+    if (!platformOrigin || !embedded) return
+
+    const languageHints = createLanguageHints()
+
+    /*
+     * Whether this frame is the active screen.
+     *
+     * An active screen owns its scrolling — the wheel scrolls the page, as it would in a
+     * tab. Otherwise the wheel is handed back so it pans the canvas: the pointer is
+     * nearly always over some screen, so without this a stage of screens couldn't be
+     * moved around at all.
+     *
+     * A closure rather than React state: the wheel listener has to read the current
+     * value, and re-registering a non-passive listener on every change is needless churn.
+     */
+    let isActive = false
+
+    /*
+     * What this frame's viewport units are currently pinned to, or null while they measure
+     * against the frame the way a browser would. Held so a repeated instruction — the
+     * dashboard re-sends this whenever the frame reloads — does not tear the pins down and
+     * rebuild them for no change.
+     */
+    let pinnedHeight: null | number = null
+
+    /*
+     * ── Editing in place ──────────────────────────────────────────────────────
+     *
+     * Double-clicking a leaf text field makes that very element contentEditable, so the
+     * client types into their own heading in their own typeface rather than into a box on
+     * the right that happens to drive it.
+     *
+     * Closure variables rather than state, for the same reason `isActive` is: every one of
+     * them is read by listeners registered once, and none of them should re-render the page
+     * — the DOM the client is typing into is already showing the truth.
+     */
+    let editing: HTMLElement | null = null
+    /**
+     * The last edit typed but not yet sent, so a blur can never lose the final keystrokes.
+     *
+     * A discriminated union rather than one shape with both fields optional, so a rich edit
+     * carrying a plain string — or a plain edit carrying an element — cannot be constructed.
+     *
+     * The rich branch carries the **element**, not `toRichText`'s result. Serialising is a
+     * full recursive walk of the field's DOM plus a fresh tree allocation, and `onInput` runs
+     * once per keystroke; storing the element and calling `toRichText` only from `flushEdit`
+     * means a whole document is walked once per *flush*, not once per character typed into
+     * it. This is safe to defer: `heldContent` holds back any content push for as long as
+     * `editing` is set, so nothing else touches this element's children before the flush
+     * runs, and even an element removed from the document in between keeps its `childNodes`.
+     */
+    let unsent:
+      | null
+      | { element: HTMLElement; field: string; rich: true }
+      | { field: string; rich: false; value: string } = null
+    let editTimer = 0
+
+    /**
+     * A content push held back while the client is typing.
+     *
+     * Applying it would re-render the very element the caret is in. React would assign the
+     * text node — with the same string it already holds, since the dashboard is echoing back
+     * what was just typed — and the browser collapses the selection when it does, so the
+     * caret jumps to the start of the field on every keystroke.
+     *
+     * Held instead, and applied when editing ends. Only the frame being typed in holds back —
+     * every other screen on the stage updates live, which is the point of having them.
+     *
+     * Nothing is lost *while this element is where the copy came from*, which is the premise
+     * and the whole of the limit: a client editing the same field from the inspector panel is
+     * a second author for it, and against that one the hold is simply a stale frame. So the
+     * content handler lets go of the field when this document has no focus — see there.
+     */
+    let heldContent: null | Record<string, unknown> = null
+
+    /** Stop an event reaching anything else, including the page's own scroller. */
+    const stopScrolling = (event: Event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      event.stopImmediatePropagation()
+    }
+
+    const applyContent = (data: Record<string, unknown>) => {
+      const media = (data.media as MediaMap | undefined) ?? {}
+
+      setOverride(
+        toContent(
+          data.sections as Section[],
+          blocks,
+          media,
+          (data.pages as PagesMap | undefined) ?? {},
+          toLayout(data.layout),
+        ),
+      )
+
+      /*
+       * Rows, when the dashboard sends any. Guarded on presence rather than assumed:
+       * `entries` arrived with bridge version 2, and a site on this kit talking to an
+       * older platform would otherwise wipe its own rows on the first push.
+       */
+      const pushed = data.entries
+      if (pushed && typeof pushed === 'object' && !Array.isArray(pushed)) {
+        setEntriesOverride(toEntries(pushed as EntriesByCollection, collections, media))
+      }
+    }
+
+    const flushEdit = () => {
+      window.clearTimeout(editTimer)
+      if (!unsent) return false
+      if (unsent.rich) {
+        send({
+          field: unsent.field,
+          type: 'u90:edit-rich',
+          value: toRichText(asDomLike(unsent.element)),
+        })
+      } else {
+        send({ field: unsent.field, type: 'u90:edit', value: unsent.value })
+      }
+      unsent = null
+      return true
+    }
+
+    /**
+     * Hand the element back to React.
+     *
+     * The last edit goes out first, so releasing the field can't drop what was typed into
+     * it. If something did go out, the held content is dropped rather than applied: it
+     * predates that keystroke, and the push answering it is already on its way — applying
+     * the older one would flash the previous words back for a frame.
+     */
+    const endEditing = () => {
+      const element = editing
+      if (!element) return
+      editing = null
+      clearCaret()
+
+      const flushed = flushEdit()
+
+      element.removeAttribute('contenteditable')
+      element.removeAttribute('data-u90-editing')
+
+      if (heldContent && !flushed) applyContent(heldContent)
+      heldContent = null
+    }
+
+    const beginEditing = (element: HTMLElement) => {
+      if (editing === element) return
+      endEditing()
+      editing = element
+
+      /*
+       * The two field kinds want opposite things here, and that asymmetry is deliberate,
+       * not a gap.
+       *
+       * A plain field wants the browser to refuse markup outright: `plaintext-only` is what
+       * stops a paste bringing the source page's own markup into a field that has nowhere to
+       * store it, and what stops the client bolding half a heading with no way to keep that.
+       * Firefox only learned `plaintext-only` recently; where it isn't understood the
+       * attribute leaves `isContentEditable` false, so plain `true` takes over there too.
+       *
+       * A rich field wants the opposite: its whole point is the browser's own formatting
+       * commands, ⌘B and ⌘I (see the note above `asDomLike`). `plaintext-only` disables
+       * exactly those commands on Chromium and WebKit, which would make a rich field's
+       * formatting inert the moment it became editable — so a rich field is always `true`,
+       * never `plaintext-only`, and a plain field is never flipped the other way: that
+       * paste protection must not change.
+       */
+      if (element.hasAttribute(RICH_ATTR)) {
+        element.setAttribute('contenteditable', 'true')
+      } else {
+        element.setAttribute('contenteditable', 'plaintext-only')
+        if (!element.isContentEditable) element.setAttribute('contenteditable', 'true')
+      }
+      element.setAttribute('data-u90-editing', '')
+
+      /*
+       * `preventScroll`, because the element is under the pointer by definition — the client
+       * just clicked it — so there is nothing to scroll to, and the default would scroll
+       * anyway. These sites run Lenis, which owns the scroll position: a native scroll into
+       * view fights it and can land somewhere neither chose. Harmless when editing needed a
+       * double-click and the element was already centred by the earlier select; now that one
+       * click starts it, this fires on every click into text.
+       */
+      element.focus({ preventScroll: true })
+    }
+
+    const onMessage = (event: MessageEvent) => {
+      if (event.origin !== platformOrigin || event.source !== window.parent) return
+      const data = event.data as null | Record<string, unknown>
+      if (!data || typeof data.type !== 'string') return
+      if (!acceptsLanguageFrame(language, data)) return
+
+      if (
+        data.type === 'u90:flush' &&
+        data.version === BRIDGE_VERSION &&
+        typeof data.requestId === 'string' &&
+        data.requestId.length > 0 &&
+        data.requestId.length < 100
+      ) {
+        // postMessage ordering guarantees the parent stages this edit before observing the ack.
+        endEditing()
+        flushEdit()
+        send({ type: 'u90:flushed', requestId: data.requestId })
+        return
+      }
+
+      if (data.type === 'u90:content' && Array.isArray(data.sections)) {
+        languageHints.update(data.languageHints)
+        /*
+         * A push arriving while this document has no focus is the dashboard's panel typing,
+         * not this frame's — so let go of the field rather than hold the push back.
+         *
+         * The hold below exists to protect a caret in *this* frame (see `heldContent`). Its
+         * premise is that the element is where the copy came from, which stops being true the
+         * moment the client edits the same field from the inspector: every keystroke there
+         * was then queued behind an element nobody was typing in, and the frame only caught
+         * up when they clicked back into it and `endEditing` flushed. That is the whole of the
+         * "it only updates when I click out of the box" report.
+         *
+         * `endEditing` rather than merely skipping the hold: it flushes anything typed here
+         * first, so nothing is lost, and it clears `editing` so the element React is about to
+         * replace is not left behind as a detached node this branch keeps consulting.
+         *
+         * **Asked here and not in `onFocusOut`, which is the important part.** That handler
+         * deliberately ignores a focus loss with no `relatedTarget`, and the note there
+         * records why `document.hasFocus()` cannot help it: `focusout` fires *while* focus is
+         * leaving, and the document can still claim to have it. A message handler runs long
+         * after that transition has settled, so the same question has a reliable answer here.
+         *
+         * The formatting toolbar is unaffected. It also takes focus out of this frame, but it
+         * speaks through `u90:format`, and a `u90:content` push means the dashboard's own copy
+         * changed — which a press on Heading 1 does not do until the format has already been
+         * applied and echoed back.
+         */
+        if (editing && !document.hasFocus()) endEditing()
+        if (editing) heldContent = data
+        else applyContent(data)
+      }
+
+      if (data.type === 'u90:format') {
+        applyFormat(data.action, typeof data.url === 'string' ? data.url : undefined)
+      }
+
+      if (data.type === 'u90:select') {
+        const field = typeof data.field === 'string' ? data.field : null
+        setSelected(field)
+
+        /*
+         * A cleared selection is the one authority that can end an edit from outside.
+         *
+         * `onFocusOut` deliberately holds the edit open when focus leaves this document,
+         * because clicking the formatting toolbar in the parent window looks exactly like
+         * clicking away — both report no `relatedTarget`. From in here the two are the same
+         * event, so the toolbar's needs win and the field stays live.
+         *
+         * Clicking the empty canvas is the case that left behind: the frame is told the
+         * screen was let go, and until this ran the element kept `contenteditable` and its
+         * outline, still taking keystrokes for a screen the dashboard had already dropped.
+         * The parent is the only side that can tell the two apart, and `field: null` is it
+         * saying so.
+         *
+         * `endEditing` flushes first, so nothing typed before the click is lost.
+         */
+        if (field === null) endEditing()
+
+        /*
+         * One frame later, deliberately. `u90:select` and `u90:content` are separate
+         * messages with no ordering guarantee, so a selection arriving with fresh content
+         * may name an element React has not laid out yet — measuring it in this tick would
+         * read a stale rect, or nothing at all.
+         */
+        /*
+         * Only travel for a selection made somewhere else — the inspector's rail, a deep link.
+         * The echo of a click the client just made must not move the page under their cursor;
+         * see the note where `selfSelected` is set.
+         */
+        const echo = field !== null && field === selfSelected.current
+        selfSelected.current = null
+        if (field && !echo) requestAnimationFrame(() => revealField(field))
+      }
+
+      /*
+       * Back to the top of this page.
+       *
+       * Instant, not smooth, for `revealField`'s reason: these sites run Lenis, which owns
+       * the scroll position and animates it itself, and a smooth native scroll competes with
+       * it and can land somewhere neither intended. `scrollTo` with no behaviour is one
+       * position change Lenis picks up on its next frame.
+       *
+       * Unconditional, unlike `revealField`'s settled check. There is no target to be
+       * already-looking-at here: the client asked for the top, and a page already at the top
+       * is unmoved by being sent there.
+       */
+      if (data.type === 'u90:scroll' && data.to === 'top') {
+        window.scrollTo({ top: 0 })
+      }
+
+      /*
+       * Synced scrolling: sit at the same proportion of this page as the screen the client is
+       * scrolling. The dashboard has already clamped the fraction, and re-reads it here anyway
+       * — it arrives from another window, and a NaN would resolve to the top and make every
+       * other screen jump while the one being scrolled stayed put.
+       *
+       * `scrollTo` with no behaviour for the same reason the top handler uses it: one position
+       * change that a smooth-scroll library picks up on its next frame, rather than an animation
+       * it fights. Smooth here would be worse than useless anyway — the positions arrive as fast
+       * as the client scrolls, and each one would cancel the last.
+       */
+      if (data.type === 'u90:scroll' && data.to === 'fraction') {
+        const fraction = typeof data.fraction === 'number' ? data.fraction : NaN
+        if (Number.isFinite(fraction)) {
+          const max = document.documentElement.scrollHeight - window.innerHeight
+          window.scrollTo({ top: max > 0 ? Math.min(1, Math.max(0, fraction)) * max : 0 })
+        }
+      }
+
+      if (data.type === 'u90:active') {
+        isActive = data.active === true
+      }
+
+      /*
+       * What a viewport unit measures against, while this frame is drawn full length.
+       *
+       * Applied before the height is re-reported, and that order is the point: pinning
+       * changes how tall the document is, so the dashboard has to be told the pinned
+       * height, not the one from a moment ago. `reportHeight` filters an unchanged
+       * number, so when nothing moved this costs a measurement and no message.
+       */
+      if (data.type === 'u90:viewport') {
+        const height = typeof data.height === 'number' && data.height > 0 ? data.height : null
+        if (height !== pinnedHeight) {
+          pinnedHeight = height
+          pinViewport(height)
+          reportHeight()
+        }
+      }
+
+      /*
+       * Whether links in this frame behave like links.
+       *
+       * Off by default while embedded, because inside the editor a click means "edit
+       * this", and the alternative is unusable: a button's marker sits on its label,
+       * so clicking the padding around the words used to navigate, and a card whose
+       * whole surface is a stretched anchor could not be selected at all.
+       *
+       * The operator turns it on to walk to another page and edit that. Kept in state
+       * rather than a closure — unlike `isActive` — because the affordance styles
+       * change with it, so a render is exactly what should happen.
+       */
+      if (data.type === 'u90:navigation') {
+        const enabled = data.enabled === true
+        navigationRef.current = enabled
+        setNavigation(enabled)
+      }
+    }
+
+    window.addEventListener('message', onMessage)
+
+    // Announce readiness, then report which fields this page actually renders, so the
+    // dashboard can tell modelled fields from ones that reach the page.
+    send({ type: 'u90:ready' })
+
+    /*
+     * Tell the dashboard which route this frame is showing, and keep telling it.
+     *
+     * A client browsing their own site inside a screen — clicking "Who We Are" in the
+     * real nav — leaves the dashboard's page readout showing whatever the screen was
+     * opened on, because the dashboard cannot see inside a cross-origin frame and
+     * nothing reported the change.
+     *
+     * `popstate` covers the back button. A client-side push does not fire an event of
+     * its own, so `pushState` and `replaceState` are wrapped — the alternative is
+     * polling `location.pathname`, which spends a timer forever to catch something
+     * that happens a few times a session.
+     *
+     * Both originals are restored on cleanup, so a site that navigates after the
+     * editor closes is left exactly as it was.
+     */
+    const reportPath = () => send({ path: window.location.pathname, type: 'u90:path' })
+
+    reportPath()
+
+    const { pushState, replaceState } = window.history
+
+    window.history.pushState = function patchedPushState(...args) {
+      pushState.apply(this, args)
+      reportPath()
+    }
+    window.history.replaceState = function patchedReplaceState(...args) {
+      replaceState.apply(this, args)
+      reportPath()
+    }
+
+    window.addEventListener('popstate', reportPath)
+
+    const raf = requestAnimationFrame(() => {
+      const fields = [...document.querySelectorAll<HTMLElement>(`[${FIELD_ATTR}]`)]
+        .map((element) => element.getAttribute(FIELD_ATTR))
+        .filter((value): value is string => Boolean(value))
+      send({ fields: [...new Set(fields)], type: 'u90:fields' })
+    })
+
+    /*
+     * How tall this page is, so a screen can be shown as one whole strip.
+     *
+     * The dashboard cannot measure it — the frame is cross-origin — so a screen set to
+     * "whole page" is drawn at whatever this last reported. It has to keep reporting:
+     * images settle, fonts swap, and every content push from the editor can change the
+     * height as the client types.
+     *
+     * `scrollHeight` of the root element rather than `body`, because a body with collapsed
+     * margins or a fixed-position layout reports its own box and not the document's.
+     *
+     * Reported only when it has actually moved by more than a pixel. A `ResizeObserver`
+     * fires on sub-pixel reflows, and each report crosses an origin boundary and resizes
+     * an element on the stage — so an unfiltered stream would have the artboard shivering
+     * for the whole of an animation.
+     */
+    let lastHeight = 0
+    const reportHeight = () => {
+      const height = document.documentElement.scrollHeight
+      if (Math.abs(height - lastHeight) < 1) return
+      lastHeight = height
+      send({ height, type: 'u90:height' })
+    }
+
+    reportHeight()
+    const heights = new ResizeObserver(reportHeight)
+    heights.observe(document.documentElement)
+
+    /*
+     * Wheel: capture phase on `window`, and the event is stopped outright rather than
+     * merely default-prevented.
+     *
+     * A smooth-scroll library listens for the wheel itself and then moves the page
+     * *programmatically*, so `preventDefault` doesn't touch it and an inactive screen
+     * kept scrolling. Those libraries bind non-capture, so a capture-phase listener
+     * always runs first and `stopImmediatePropagation` means they never see it.
+     */
+    const onWheel = (event: WheelEvent) => {
+      if (event.ctrlKey || event.metaKey) {
+        event.preventDefault()
+        send({ deltaY: event.deltaY, type: 'u90:zoom', x: event.clientX, y: event.clientY })
+        return
+      }
+      if (isActive) return
+      stopScrolling(event)
+      send({ deltaX: event.deltaX, deltaY: event.deltaY, type: 'u90:wheel' })
+    }
+
+    window.addEventListener('wheel', onWheel, { capture: true, passive: false })
+
+    /*
+     * Where this page is scrolled, for the dashboard to fan out to the other screens showing
+     * it. See `u90:scrolled` in the platform's `bridge.ts`.
+     *
+     * **Only while this frame is the active screen.** That is the whole feedback guard: a
+     * frame the relay has just scrolled is not the active one, so it says nothing back, and
+     * the loop that would otherwise run round the stage never starts. Cheaper than any
+     * echo-suppression scheme, and it cannot drift out of step with itself.
+     *
+     * Coalesced to one report per frame. `scroll` fires far faster than paint on a trackpad,
+     * and every one of these crosses a window boundary and moves other documents; sending
+     * them all would spend the client's frame budget on positions already superseded.
+     *
+     * Passive, because this never wants to block the scroll it is watching.
+     */
+    let scrollPending = 0
+    const reportScroll = () => {
+      if (!isActive || scrollPending) return
+      scrollPending = requestAnimationFrame(() => {
+        scrollPending = 0
+        if (!isActive) return
+        send({
+          max: document.documentElement.scrollHeight - window.innerHeight,
+          top: window.scrollY,
+          type: 'u90:scrolled',
+        })
+      })
+    }
+
+    window.addEventListener('scroll', reportScroll, { passive: true })
+
+    /*
+     * A middle-button pan, streamed until release.
+     *
+     * The press lands here, so the dashboard receives no pointer events until it ends —
+     * the canvas would stick and then jump into place. Capturing the pointer and
+     * streaming fixes it at the source.
+     *
+     * Screen coordinates, not client: panning moves this very frame under the pointer,
+     * so a client coordinate would stop changing and the pan would stall after one step.
+     *
+     * Only the middle button. A left press stays with the page — it is how the client
+     * selects what to edit.
+     */
+    let panning: null | number = null
+
+    const onPointerDown = (event: PointerEvent) => {
+      /*
+       * A press anywhere else releases the field being edited.
+       *
+       * `focusout` alone is not enough: pressing on ordinary page copy moves focus to
+       * nothing in particular, and in that case some browsers leave the editable focused —
+       * so the client clicks away, sees no caret, and the element is still editable.
+       */
+      if (editing && !editing.contains(event.target as Node)) endEditing()
+
+      /*
+       * A left press makes this the active screen.
+       *
+       * The dashboard cannot see it any other way — this is a cross-origin frame, so
+       * it consumes its own clicks and the canvas never learns one happened. Without
+       * this message a screen can never become active: no selection outline, and
+       * `isActive` below stays false forever, so the wheel is handed back to the
+       * canvas and the page inside never scrolls.
+       *
+       * Left button only, and the press is not consumed — selecting the element under
+       * the pointer is the whole point of framing the real site.
+       */
+      if (event.button === 0) send({ type: 'u90:focus' })
+
+      if (event.button !== 1 || panning !== null) return
+      event.preventDefault()
+      panning = event.pointerId
+      try {
+        document.documentElement.setPointerCapture(event.pointerId)
+      } catch {
+        // Capture is a nicety; the window listeners still see the moves.
+      }
+      send({ screenX: event.screenX, screenY: event.screenY, type: 'u90:grab' })
+    }
+
+    const onPointerMove = (event: PointerEvent) => {
+      if (event.pointerId !== panning) return
+      send({ screenX: event.screenX, screenY: event.screenY, type: 'u90:drag' })
+    }
+
+    const onPointerUp = (event: PointerEvent) => {
+      if (event.pointerId !== panning) return
+      panning = null
+      try {
+        document.documentElement.releasePointerCapture(event.pointerId)
+      } catch {
+        // Already released.
+      }
+      send({ type: 'u90:drop' })
+    }
+
+    // Chrome fires this on middle-button release; without it the frame can still open a
+    // link in a new tab as the pan ends.
+    const onAuxClick = (event: MouseEvent) => {
+      if (event.button === 1) event.preventDefault()
+    }
+
+    /*
+     * The canvas's own shortcuts. Clicking into this frame moves keyboard focus here, so
+     * the dashboard stops receiving key events — its tool shortcuts and space-to-pan
+     * would work only until the client touched their own page.
+     *
+     * `KeyN` — turn the frame's links on and off — is the clearest case for why this list
+     * exists at all, and was missing from it: you decide you want to follow a link while
+     * you are looking at the page, having just clicked something on it, which is precisely
+     * when this frame owns the keyboard and the dashboard hears nothing.
+     *
+     * `KeyT` — send this page back to the top — is the same shape. `Home` already does it and
+     * only from in here; T does it from either side. Safe as a plain letter for the reason
+     * every key in this set is: the `isTyping` guard below silences all of them while the
+     * client is typing, and in-frame editing is a `contenteditable`, which is exactly what
+     * that guard reads.
+     */
+    const CANVAS_KEYS = new Set(['KeyF', 'KeyG', 'KeyH', 'KeyN', 'KeyT', 'KeyV', 'Space'])
+    const SCROLL_KEYS = new Set([
+      'ArrowDown',
+      'ArrowLeft',
+      'ArrowRight',
+      'ArrowUp',
+      'End',
+      'Home',
+      'PageDown',
+      'PageUp',
+    ])
+
+    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 = (event: KeyboardEvent) => {
+      /*
+       * Escape leaves the field. Ahead of the `isTyping` guard on purpose — that guard is
+       * what stops the canvas shortcuts firing while the client types, and an editable
+       * element is precisely the case it silences, so the way out has to be read first.
+       */
+      if (event.type === 'keydown' && event.key === 'Escape' && editing) {
+        event.preventDefault()
+        endEditing()
+        return
+      }
+
+      if (event.metaKey || event.ctrlKey || event.altKey || isTyping(event.target)) return
+
+      if (CANVAS_KEYS.has(event.code)) {
+        // Space would otherwise scroll this page while the client is panning.
+        if (event.code === 'Space') event.preventDefault()
+        send({
+          code: event.code as 'KeyF' | 'KeyH' | 'KeyN' | 'KeyT' | 'KeyV' | 'Space',
+          down: event.type === 'keydown',
+          type: 'u90:key',
+        })
+        return
+      }
+
+      // The keys that scroll, blocked while this screen isn't the active one.
+      if (event.type === 'keydown' && !isActive && SCROLL_KEYS.has(event.key)) {
+        stopScrolling(event)
+      }
+    }
+
+    /*
+     * Any click on an annotated element selects it. Capture phase, so a link or button
+     * wrapping the text can't swallow it first — inside the editor, clicking is for
+     * selecting, not navigating.
+     *
+     * With navigation off, a click on *any* link or button is swallowed too, even
+     * where nothing is annotated. That covers the two cases the marker alone misses:
+     * a button whose marker is on its inner label, so the padding around the words
+     * was a live link; and a card whose entire surface is a stretched anchor, which
+     * carried no marker at all and could only ever navigate. If such a click lands
+     * inside something annotated, that gets selected; if not, the click simply does
+     * nothing, which is the honest outcome for a link with no editable content.
+     */
+    const onClick = (event: MouseEvent) => {
+      const from = event.target as HTMLElement | null
+      if (navigationRef.current) {
+        const link = from?.closest?.('a[href]') as HTMLAnchorElement | null
+        const href =
+          link && !link.hasAttribute('download') && (!link.target || link.target === '_self')
+            ? languageFrameNavigation(link.href, window.location.href, language)
+            : null
+        if (href && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) {
+          endEditing()
+          event.preventDefault()
+          event.stopPropagation()
+          const target = new URL(href)
+          send({
+            type: 'u90:navigate',
+            path: target.pathname + target.search + target.hash,
+            targetLocale: link?.hreflang || languageLocale,
+          })
+          return
+        }
+      }
+
+      const target = from?.closest?.(`[${FIELD_ATTR}]`)
+
+      /*
+       * A drag that left words highlighted inside the field being edited.
+       *
+       * The marker is on the prose, and the box a client sees around it is wider — a
+       * container's padding, a section's vertical band. Dragging past the end of a line, which
+       * is simply how you select to the end of a sentence, releases the pointer in that gutter.
+       * Without this the release reads as a click on nothing, the field is deselected, and the
+       * formatting toolbar disappears in the middle of the gesture that was about to use it.
+       */
+      const isHighlighting = (): boolean => {
+        if (!editing) return false
+        const selection = document.getSelection()
+        if (!selection || selection.isCollapsed || selection.rangeCount === 0) return false
+        return editing.contains(selection.getRangeAt(0).commonAncestorContainer)
+      }
+
+      if (!target) {
+        // Words are highlighted in the field: this is the end of a selection, not a click off it.
+        if (isHighlighting()) return
+
+        /*
+         * Clicking off an element is the other half of clicking one.
+         *
+         * This used to return here and say nothing, which meant a selection could only ever be
+         * replaced, never let go of: click a heading, click the paragraph gap beside it, and the
+         * heading stayed outlined, stayed in the inspector, and stayed the thing ⌘L quoted.
+         * Escape and V both cleared it, and neither is a gesture anybody arrives with — every
+         * editor a client has used deselects when you click the background, so the absence read
+         * as the canvas being stuck rather than as a shortcut they had not found.
+         *
+         * Before the branches below, deliberately: all three of them are "the press landed on
+         * nothing editable", and the one that swallows a link is no less a deselect than the two
+         * that let the click through. Sent even when nothing was selected — `setSelected` bails
+         * on an unchanged value, and the dashboard's store compares before it publishes, so the
+         * quiet case costs one postMessage and re-renders nothing.
+         */
+        setSelected(null)
+        send({ field: null, type: 'u90:select' })
+
+        if (navigationRef.current) return
+        // `[href]` rather than `a`, so a bare anchor used as a scroll target is left
+        // alone — it navigates nowhere and swallowing it would be pointless.
+        if (!from?.closest?.('a[href], button')) return
+        event.preventDefault()
+        event.stopPropagation()
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+      const selectedField = target.getAttribute(FIELD_ATTR)
+      if (selectedField) {
+        setSelected(selectedField)
+        /*
+         * The rendered words travel with the field, so the dashboard's ⌘L can quote what is
+         * on the page rather than only naming the field. Additive and optional — an older
+         * dashboard ignores a key it does not read.
+         */
+        /*
+         * Remembered so the echo of this very click cannot move the page.
+         *
+         * The dashboard stores the selection and sends `u90:select` straight back, and the
+         * handler for it reveals the field. For anything shorter than the screen
+         * `isSettledInView` absorbs that — but a field taller than the viewport is never
+         * "in view" by that test, so a legal document scrolled to its own middle every time
+         * the client clicked the top of it.
+         */
+        selfSelected.current = selectedField
+        send({
+          field: selectedField,
+          text: quotable(target as HTMLElement),
+          type: 'u90:select',
+        })
+      }
+
+      /*
+       * One click into words is a caret in those words.
+       *
+       * This used to need a double-click, with a single click only selecting the field and
+       * lighting up the panel on the right. Which meant the obvious gesture — click the
+       * heading, type — did nothing visible, and the way to edit text in place was
+       * undiscoverable unless somebody told you. Every editor a client has used puts a caret
+       * in text on one click, and the frame already looks like the page rather than like a
+       * form, so it is the gesture they arrive with.
+       *
+       * Only text leaves. A marked image, or a container holding several marked children, has
+       * nowhere to put a caret — those still select and are edited from the panel.
+       *
+       * **Not while navigation is on.** That mode exists so the client can walk their own
+       * site, following links to reach the page they want, and the toolbar names it "click
+       * one to open that page". A caret appearing in every heading passed on the way is
+       * noise, and on an annotated link it would swallow the very click meant to follow it.
+       * Double-click still edits in that mode, because a double-click is unambiguous.
+       */
+      if (!navigationRef.current && isEditableLeaf(target as HTMLElement)) {
+        // Resolved before the element is editable, applied after — see `caretTargetIn`, where
+        // the measurements behind that order are written down.
+        const caret = caretTargetIn(target as HTMLElement, event.clientX, event.clientY)
+        beginEditing(target as HTMLElement)
+        applyCaret(caret)
+      }
+    }
+
+    /*
+     * Double-click to edit the words where they are.
+     *
+     * Capture phase, like `onClick` and for the same reason: a link or button wrapping the
+     * text would otherwise get the event first. The double-click has already selected the
+     * word under the pointer, and making the element editable keeps that selection — so
+     * typing replaces the word you aimed at, which is what a double-click means everywhere
+     * else.
+     *
+     * Nothing happens on anything that isn't a text leaf: a marked image, or a container
+     * holding several marked children. Those stay a single click and the panel on the right.
+     */
+    const onDoubleClick = (event: MouseEvent) => {
+      const from = event.target as HTMLElement | null
+      const target = from?.closest?.(`[${FIELD_ATTR}]`) as HTMLElement | null
+      if (!target || !target.getAttribute(FIELD_ATTR) || !isEditableLeaf(target)) return
+
+      /*
+       * Already editing this element — which is now the common case, since the first click of
+       * the double started it. Hand the event to the browser untouched: selecting the word
+       * under the pointer is its default action inside a contenteditable, and that is exactly
+       * what a double-click should do. Suppressing it here, as the branch below must, would
+       * turn a double-click into an ordinary caret placement and lose the one thing the
+       * gesture is for.
+       */
+      if (editing === target) return
+
+      /*
+       * Not editing yet, so this is the path that still matters: navigation is on, where a
+       * single click deliberately does not start editing. A double-click is unambiguous enough
+       * to mean "edit this" even while the client is browsing, so it is honoured — and the
+       * default has to be suppressed, or the link under the words navigates away from the
+       * caret that was just placed.
+       */
+      event.preventDefault()
+      event.stopPropagation()
+      const caret = caretTargetIn(target, event.clientX, event.clientY)
+      beginEditing(target)
+      applyCaret(caret)
+    }
+
+    /*
+     * Debounced, so the dashboard's autosave sees a burst of typing as one edit rather than
+     * a save per character — the same shape as the panel's own control, which is a React
+     * input driving the identical change path.
+     */
+    const EDIT_DEBOUNCE_MS = 150
+
+    const onInput = () => {
+      const element = editing
+      if (!element) return
+      const field = element.getAttribute(FIELD_ATTR)
+      if (!field) return
+
+      unsent = element.hasAttribute(RICH_ATTR)
+        ? { element, field, rich: true }
+        : { field, rich: false, value: readEditedText(element) }
+      window.clearTimeout(editTimer)
+      editTimer = window.setTimeout(flushEdit, EDIT_DEBOUNCE_MS)
+    }
+
+    /*
+     * ── Formatting from a toolbar that lives in another window ────────────────
+     *
+     * The rich text toolbar sits on the frame's border, drawn by the dashboard. The words it
+     * formats are in here. Nothing in the dashboard can touch this selection — `execCommand`
+     * runs in the document that owns the selection, and that document is this one — so the
+     * press arrives as `u90:format` and is applied here.
+     *
+     * **`execCommand`, deprecated, and still correct.** This package ships no dependencies, so
+     * Lexical is not available on this side of the bridge and must not become available. For a
+     * `contentEditable` it is the only formatting engine there is. It also emits exactly the
+     * tags `lexicalDom.ts` already inverts — `<b>`, `<i>`, `<h2>`, `<ul><li>`, `<a href>` —
+     * which is why the serialiser accepts the browser's spellings alongside the reader's.
+     */
+    let lastRange: null | Range = null
+
+    /*
+     * The selection, remembered while it still exists.
+     *
+     * Clicking a button in the parent window blurs this frame, and a blurred document reports a
+     * collapsed selection — so by the time the message arrives there is nothing to format, and
+     * the button reads as broken while the field is plainly focused. Recording the range as it
+     * moves is what makes the toolbar work at all.
+     *
+     * Only ranges inside the element being edited are kept. A selection elsewhere on the page
+     * is not this field's, and restoring it would apply the client's formatting to whatever
+     * they happened to have highlighted last.
+     */
+    const rememberRange = () => {
+      if (!editing || !editing.hasAttribute(RICH_ATTR)) return
+      const selection = document.getSelection()
+      if (!selection || selection.rangeCount === 0) return
+      const range = selection.getRangeAt(0)
+      if (!editing.contains(range.commonAncestorContainer)) return
+      lastRange = range.cloneRange()
+      reportCaret(range)
+    }
+
+    /*
+     * ── Where the toolbar should stand ────────────────────────────────────────
+     *
+     * The toolbar is drawn by the dashboard and has no way to see this selection, so the frame
+     * reports where it is. Sent in this document's own viewport coordinates: the dashboard
+     * knows where the frame sits and at what zoom, and that is the only pair of facts needed to
+     * put a floating control beside the caret.
+     *
+     * Collapsed or not — a caret with no selection still wants the toolbar near it, because the
+     * next thing a client does is choose a heading for the line they are on.
+     */
+    let caretFrame = 0
+    const reportCaret = (range: Range): void => {
+      window.cancelAnimationFrame(caretFrame)
+      caretFrame = window.requestAnimationFrame(() => {
+        const rect = range.getBoundingClientRect()
+        /*
+         * A collapsed range at the start of an empty block measures zero on every axis, and a
+         * zero rect would park the toolbar in the frame's top-left corner. The element being
+         * edited is the honest fallback — the toolbar lands on the field rather than nowhere.
+         */
+        const box =
+          rect.width || rect.height || rect.top || rect.left
+            ? rect
+            : editing?.getBoundingClientRect()
+        if (!box) return
+
+        /*
+         * What kind of block the caret is in, so the toolbar can show it ticked.
+         *
+         * Read here rather than inferred out there: only this document can see the element the
+         * selection sits in, and a toolbar that cannot say what the current style *is* leaves
+         * the client guessing whether their last press did anything.
+         *
+         * A list item reports its list's kind, because that is the choice the client made.
+         */
+        const from = range.commonAncestorContainer
+        const start = (from.nodeType === 1 ? from : from.parentElement) as HTMLElement | null
+        const node = start?.closest('h1,h2,h3,li,p')
+        const tag = node?.tagName.toLowerCase()
+        const block =
+          tag === 'li'
+            ? node?.closest('ol')
+              ? 'number'
+              : 'bullet'
+            : tag === 'h1' || tag === 'h2' || tag === 'h3'
+              ? tag
+              : 'paragraph'
+
+        send({
+          block,
+          height: box.height,
+          left: box.left,
+          top: box.top,
+          type: 'u90:caret',
+          width: box.width,
+        })
+      })
+    }
+
+    /** No caret, no toolbar. Sent on release so the dashboard can put it away. */
+    const clearCaret = (): void => {
+      window.cancelAnimationFrame(caretFrame)
+      send({ height: 0, left: 0, top: 0, type: 'u90:caret', width: 0 })
+    }
+
+    /** What each button asks the browser for. */
+    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],
+    }
+
+    const applyFormat = (action: unknown, url?: string): void => {
+      const element = editing
+      if (!element || !element.hasAttribute(RICH_ATTR)) return
+      if (typeof action !== 'string') return
+
+      /*
+       * Focus first, then restore the range. The order matters: focusing collapses the
+       * selection to wherever the browser thinks the caret is, so restoring first and focusing
+       * second would throw the remembered range away.
+       */
+      element.focus({ preventScroll: true })
+      const selection = document.getSelection()
+      if (lastRange && selection) {
+        selection.removeAllRanges()
+        selection.addRange(lastRange)
+      }
+
+      if (action === 'single') {
+        if (!url || !/^[^{}\s]+$/.test(url) || url === 'link') return
+        const chip = document.createElement('span')
+        chip.setAttribute('data-single-key', url)
+        chip.contentEditable = 'false'
+        chip.textContent = `{${url}}`
+        document.execCommand('insertHTML', false, chip.outerHTML)
+      } else if (action === 'link') {
+        // An empty url is the unlink button — the same control, in its other state.
+        if (url) document.execCommand('createLink', false, url)
+        else document.execCommand('unlink')
+      } else {
+        const command = COMMANDS[action]
+        if (!command) return
+        document.execCommand(command[0], false, command[1])
+      }
+
+      /*
+       * `execCommand` fires `input` in every browser that still implements it, but the flush is
+       * scheduled explicitly rather than relying on that: a formatting press the client can see
+       * and the dashboard never receives is the worst of the failure modes available here.
+       */
+      rememberRange()
+      onInput()
+    }
+
+    // Tabbing or clicking into another focusable thing. A press on plain page copy is
+    // caught by `onPointerDown` instead — see the note there.
+    const onFocusOut = (event: FocusEvent) => {
+      if (event.target !== editing) return
+
+      /*
+       * Leaving the document is not leaving the field.
+       *
+       * Clicking the formatting toolbar, switching applications, clicking the browser's own
+       * chrome — all fire `focusout` here exactly as tabbing to the next field does. Ending
+       * the edit on any of them is what made the toolbar inert: by the time a press on
+       * "Heading 1" arrived, `editing` was null and the command had nothing to act on.
+       *
+       * `relatedTarget` is what separates them, and `document.hasFocus()` — which this used to
+       * ask — is not. `focusout` fires *while* focus is leaving, and at that moment this
+       * document can still report having it, so the guard passed and the edit ended anyway.
+       * That is why leaving the window looked fixed and clicking the toolbar did not.
+       *
+       * Focus moving somewhere outside this document reports no `relatedTarget` at all, which
+       * is precisely the case to hold on to: the client is still in the field, they are just
+       * reaching for a control that lives in another window.
+       */
+      const leaving = editing
+      const next = event.relatedTarget as Node | null
+      if (!next || !leaving) return
+      if (leaving.contains(next)) return
+
+      endEditing()
+    }
+
+    /*
+     * Coming back to the window: say where the caret is again, so the toolbar returns to it.
+     * The selection survived the trip — only the dashboard's knowledge of it did not.
+     */
+    const onWindowFocus = () => {
+      if (editing) rememberRange()
+    }
+
+    /*
+     * ── What the client has highlighted ───────────────────────────────────────
+     *
+     * So the dashboard's ⌘L can attach a *run of words* to the agent, not just the field they
+     * sit in. Asking for "the second sentence" to change is the common case and an
+     * element-level selection cannot say it.
+     *
+     * **On pointer-up and key-up, not on `selectionchange`.** A single click into words puts a
+     * caret in them, so from that moment the selection belongs to the client's typing — and
+     * `selectionchange` fires on every keystroke and every caret nudge. These two fire once
+     * per gesture: a drag that ends, or a shift-arrow that lands. Typing collapses the
+     * selection, which reports `null` once and then repeats itself into the `lastReported`
+     * guard below rather than posting per character.
+     *
+     * Reported *while* editing rather than suppressed, deliberately: a run selected inside a
+     * contentEditable element is exactly the case this exists for — the client has clicked
+     * into their own heading and dragged across the half of it they want rewritten.
+     */
+    let lastReported: null | string = null
+
+    const reportHighlight = () => {
+      const selection = window.getSelection()
+      const words = selection && !selection.isCollapsed ? collapseSpace(selection.toString()) : ''
+      const text = words || null
+
+      // Only when it changes. See the note above about keystrokes.
+      if (text === lastReported) return
+      lastReported = text
+
+      /*
+       * Which annotated element the run started in, so the dashboard can name the field as
+       * well as quote the words. `anchorNode` is usually a text node, hence the climb to an
+       * element before `closest`. Null is a real answer: page copy that carries no marker is
+       * still worth quoting, it just cannot be attributed to a field.
+       */
+      const anchor = selection?.anchorNode ?? null
+      const from =
+        anchor instanceof HTMLElement
+          ? anchor
+          : ((anchor?.parentElement ?? null) as HTMLElement | null)
+      const host = text ? from?.closest?.(`[${FIELD_ATTR}]`) : null
+
+      send({
+        field: host?.getAttribute(FIELD_ATTR) ?? null,
+        text,
+        type: 'u90:highlight',
+      })
+    }
+
+    window.addEventListener('pointerdown', onPointerDown)
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerup', onPointerUp)
+    window.addEventListener('pointercancel', onPointerUp)
+    window.addEventListener('auxclick', onAuxClick)
+    window.addEventListener('keydown', onKey, { capture: true })
+    window.addEventListener('keyup', onKey, { capture: true })
+    document.addEventListener('click', onClick, true)
+    document.addEventListener('dblclick', onDoubleClick, true)
+    document.addEventListener('input', onInput)
+    document.addEventListener('selectionchange', rememberRange)
+    window.addEventListener('focus', onWindowFocus)
+    document.addEventListener('focusout', onFocusOut)
+    // After the gesture that made the selection, never during it — see `reportHighlight`.
+    window.addEventListener('pointerup', reportHighlight)
+    window.addEventListener('keyup', reportHighlight)
+
+    return () => {
+      languageHints.dispose()
+      window.removeEventListener('message', onMessage)
+      window.removeEventListener('wheel', onWheel, { capture: true })
+      window.removeEventListener('scroll', reportScroll)
+      if (scrollPending) cancelAnimationFrame(scrollPending)
+      window.removeEventListener('pointerdown', onPointerDown)
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('pointerup', onPointerUp)
+      window.removeEventListener('pointercancel', onPointerUp)
+      window.removeEventListener('auxclick', onAuxClick)
+      window.removeEventListener('keydown', onKey, { capture: true })
+      window.removeEventListener('keyup', onKey, { capture: true })
+      document.removeEventListener('click', onClick, true)
+      document.removeEventListener('dblclick', onDoubleClick, true)
+      document.removeEventListener('input', onInput)
+      document.removeEventListener('selectionchange', rememberRange)
+      window.removeEventListener('focus', onWindowFocus)
+      document.removeEventListener('focusout', onFocusOut)
+      window.removeEventListener('pointerup', reportHighlight)
+      window.removeEventListener('keyup', reportHighlight)
+      // Send what was typed before tearing down, and leave no element contentEditable
+      // behind — this page may carry on being a page.
+      endEditing()
+      window.removeEventListener('popstate', reportPath)
+      // Put history back the way we found it, so a navigation after the editor
+      // closes doesn't call into a listener that is no longer wanted.
+      window.history.pushState = pushState
+      window.history.replaceState = replaceState
+      heights.disconnect()
+      cancelAnimationFrame(raf)
+      // Hand the stylesheets back unpinned — this page may carry on being a page.
+      releaseViewport()
+    }
+    // `blocks` and `collections` are module-level constants in every real site;
+    // re-subscribing on them would tear the listeners down on each render for no benefit.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [embedded, platformOrigin, send])
+
+  return { content, embedded, entries, navigation, selected }
+}
+
+/**
+ * Editing affordances, rendered only inside the dashboard frame.
+ *
+ * A stylesheet rather than per-element classes, so the page components stay free of
+ * editor concerns — they only have to carry the field attribute.
+ */
+export const EditingStyles = ({
+  navigation = false,
+  selected,
+}: {
+  /**
+   * Whether links in this frame navigate. Optional and defaulting to off, so a site
+   * on an older kit that renders this without the prop still gets the editing
+   * affordances — the safe reading, since an embedded frame is being edited.
+   */
+  navigation?: boolean
+  selected: null | string
+}) => {
+  // The values are generated paths (digits, letters, dots), so escaping quotes is
+  // sufficient and avoids depending on CSS.escape.
+  const escaped = selected?.replace(/"/g, '\\"')
+  const sectionKey =
+    selected && !selected.startsWith('@') ? /^(\d+)(?:\.|$)/.exec(selected)?.[1] : undefined
+
+  return (
+    <style
+      data-u90-bridge=""
+      dangerouslySetInnerHTML={{
+        __html: `
+          [${FIELD_ATTR}] { cursor: pointer; }
+          [${FIELD_ATTR}]:hover {
+            outline: 1px dashed #FF5D2E;
+            outline-offset: 4px;
+          }
+
+          /*
+           * A picture's affordance is drawn INSIDE it.
+           *
+           * Every rule above offsets its outline outwards, which is right for words and wrong
+           * for a photograph: an image sits in a rounded, overflow-hidden frame and fills it
+           * exactly, so an outline painted outside the image lands on the clip edge and is
+           * never drawn at all. Selecting one of pbir's service photos looked like selecting
+           * nothing. A negative offset paints within the element's own box, where no ancestor's
+           * overflow can reach it.
+           *
+           * No backticks anywhere in this comment, like the one further down: it lives inside a
+           * template literal, so one would end the stylesheet mid-sentence.
+           *
+           * The corners do not follow the frame's radius, because the radius is on the wrapper
+           * and this outline is on the image. A square inside a rounded frame is a visible
+           * selection box; a clipped one is not.
+           */
+          ${MEDIA_SELECTOR} { cursor: pointer; }
+          ${MEDIA_SELECTOR}:hover {
+            outline: 2px dashed #FF5D2E;
+            outline-offset: -2px;
+          }
+          [${SECTION_ATTR}]:hover {
+            outline: 2px dashed #FF5D2E;
+            outline-offset: 8px;
+          }
+          ${
+            sectionKey
+              ? `[${SECTION_ATTR}="${sectionKey}"] {
+                   outline: 3px solid #FF5D2E !important;
+                   outline-offset: 8px;
+                 }`
+              : ''
+          }
+          ${
+            navigation
+              ? /*
+                 * Navigation on: links are links again, so say so with the cursor and
+                 * draw nothing. Anything annotated keeps its own affordance above.
+                 */
+                `a[href]:not([${FIELD_ATTR}]), button:not([${FIELD_ATTR}]) { cursor: pointer; }`
+              : /*
+                 * Navigation off: outline the whole control rather than the words
+                 * inside it. A button's marker sits on its label, so without this the
+                 * hover outline hugs the text and the padding around it reads as dead
+                 * space — when in fact the entire control is what gets selected.
+                 *
+                 * `:not(:has(...))` keeps the outline on the outermost thing: a link
+                 * containing an annotated span is drawn once, around the link, rather
+                 * than twice in concentric rectangles.
+                 */
+                `a[href], button { cursor: pointer; }
+                 a[href]:not(:has([${FIELD_ATTR}])):hover,
+                 button:not(:has([${FIELD_ATTR}])):hover {
+                   outline: 1px dashed #FF5D2E;
+                   outline-offset: 3px;
+                 }
+                 a[href]:has([${FIELD_ATTR}]):hover {
+                   outline: 1px dashed #FF5D2E;
+                   outline-offset: 3px;
+                 }
+
+                 /*
+                  * An I-beam over anything one click will put a caret in.
+                  *
+                  * This selector is isEditableLeaf written in CSS - marked, and EITHER
+                  * carrying the rich text marker OR (containing no other marked element and
+                  * containing none of the non-text tags) - so the two cannot disagree about
+                  * what is typable. A rich field is accepted by that first branch precisely
+                  * because a real document contains the very things the second branch rules
+                  * out, an <a> and a <ul> among them. It sits inside the navigation-off
+                  * branch, and after the link and button rule above, because a marked button
+                  * label is both a control and a text leaf: with navigation off it is text
+                  * and takes a caret, with navigation on it is a link.
+                  *
+                  * The one thing CSS cannot check is that the element has any text at all. An
+                  * empty marked element is a field the client has not filled in, so it offers
+                  * an I-beam and the click does nothing - the least interesting way for the
+                  * two to fall out of step, and the alternative is a class every site
+                  * component would have to carry.
+                  */
+                 ${EDITABLE_LEAF_SELECTOR} {
+                   cursor: text;
+                 }`
+          }
+          ${
+            escaped
+              ? `[${FIELD_ATTR}="${escaped}"] {
+                   outline: 2px solid #FF5D2E !important;
+                   outline-offset: 5px;
+                 }
+                 /*
+                  * The selected picture, drawn inside itself for the reason its hover rule is.
+                  * More specific than the rule above - an attribute plus a type - so it takes
+                  * the offset without an !important of its own.
+                  */
+                 [${FIELD_ATTR}="${escaped}"]:is(${MEDIA}) {
+                   outline: 3px solid #FF5D2E !important;
+                   outline-offset: -3px;
+                 }`
+              : ''
+          }
+          /*
+           * The field the caret is in. Solid like a selection, because it is one, but with
+           * a text cursor and no focus ring — the browser's own would sit inside the
+           * outline and read as two borders around one word.
+           *
+           * Keyed off the attribute the bridge sets rather than off the selected prop, so
+           * it appears the instant the element becomes editable rather than a round trip
+           * later, and cannot disagree with what is actually contentEditable.
+           */
+          [${FIELD_ATTR}][data-u90-editing] {
+            cursor: text;
+            outline: 2px solid #FF5D2E !important;
+            outline-offset: 5px;
+          }
+          [${FIELD_ATTR}][data-u90-editing]:focus,
+          [${FIELD_ATTR}][data-u90-editing]:focus-visible {
+            outline: 2px solid #FF5D2E !important;
+          }
+
+          /*
+           * A page with no sections, said out loud.
+           *
+           * A freshly created page renders its header and footer around an empty main
+           * element, which in a Canvas frame is indistinguishable from a broken render --
+           * the editor sees the chrome and a void and reasonably assumes the page failed.
+           * This names the state instead.
+           *
+           * CSS rather than a component, and that is the point. Every generated site
+           * already renders EditingStyles when embedded and already emits a main element,
+           * so a stylesheet reaches every site that exists today on a kit bump alone: no
+           * regenerated HomeFrame, no new prop, no call site to add. Same reasoning as the
+           * navigation prop defaulting to off above -- the kit has to do something useful
+           * for sites written before it knew how to ask.
+           *
+           * Only inside Canvas, because this whole component renders only when embedded.
+           * A visitor on the live site sees an empty page, not our scaffolding.
+           *
+           * The :not(:has(*)) test rather than :empty, which a single newline of whitespace
+           * between tags defeats -- and whether there is one is a formatting accident of
+           * whatever generated the page.
+           *
+           * The copy does not offer to add anything. Sections and layout are deliberately
+           * not a client's to change: see the note in the dashboard's AgentPanel, which
+           * exists because promising exactly that was the first thing a client tried and
+           * the first thing they were refused. So this reports the state and stops.
+           *
+           * No backticks anywhere in here. This comment lives inside a template literal,
+           * and one would end the stylesheet mid-sentence.
+           */
+          main:not(:has(*)) {
+            min-height: 50vh;
+            display: grid;
+            place-items: center;
+            padding: 48px 24px;
+            box-sizing: border-box;
+          }
+          main:not(:has(*))::after {
+            /*
+             * Says where the control is rather than pretending to be one. The page is the
+             * client's site in an iframe; it has no access to the dashboard's panel, and a
+             * button here that could not add anything would be worse than a sentence.
+             */
+            content: 'This page has no sections yet. Add one from the Page panel.';
+            display: block;
+            max-width: 32ch;
+            padding: 28px 32px;
+            border: 1px dashed #FF5D2E;
+            /* Not the site's own type ramp: this is our chrome speaking, not the page. */
+            font: 500 14px/1.5 ui-sans-serif, system-ui, sans-serif;
+            letter-spacing: 0.01em;
+            text-align: center;
+            color: #FF5D2E;
+          }
+        `,
+      }}
+    />
+  )
+}