@stack-mode/site-manager-kit 1.44.0 → 1.45.0

package/src/visual-bridge-client.tsx

@@ -1,1070 +1,1070 @@
-"use client";
-
-import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useRef } from "react";
-import { fromMarkedRuns, markedRuns, normalizeAccents, type Mark, type MarkedRun } from "./visual-accents";
-import { ACTIVATES, blocksActivation } from "./visual-clicks";
-import { actionsFor, itemElement, type ListAction, type PageList } from "./visual-lists";
-import { comparable, longest, matchIndex, type CopyText } from "./visual-match";
-import { adminMessageFrom, collectRefs, type Editable, type KitMessage } from "./visual-messages";
-import { LivePreview } from "./visual-preview";
-import { mayHaveTag, readTags, stripTags } from "./visual-tags";
-
-const MARK = "data-bp-edit";
-// Set beside MARK on the marks the bridge adds itself, so marking again clears only those and never the site's own.
-const AUTO = "data-bp-auto";
-// Set beside MARK on a place an exact tag named. Kept when marking again: the tag was removed when it was read.
-const TAGGED = "data-bp-tagged";
-// Attributes that may carry Site Copy (a photo's alt, a button's label); their tags are removed, never shown.
-const TEXT_ATTRS = ["alt", "title", "aria-label", "placeholder", "content", "value"];
-
-// Never matched: code, form controls and embedded documents aren't words a visitor reads as copy.
-const SKIP = new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "TEXTAREA", "SELECT", "INPUT", "IFRAME", "svg"]);
-
-/**
- * A value that is a bare run of text beside other elements (a heading's words before its accent span). whole: the run
- * is the value's words and nothing else, so it can be edited in place.
- */
-type TextMark = { node: Text; ref: string; whole: boolean };
-type Target = Element | Text;
-
-const rectOf = (t: Target): DOMRect => {
-  if (t instanceof Element) return t.getBoundingClientRect();
-  const range = document.createRange();
-  range.selectNodeContents(t);
-  return range.getBoundingClientRect();
-};
-
-type Overlay = { show: (t: Target, label: string) => void; hide: () => void; dots: (ts: Target[]) => void; destroy: () => void };
-
-// Drawn in a closed shadow root so the page's CSS can't reach it and it can't reach the page. System colors only.
-function makeOverlay(): Overlay {
-  const host = document.createElement("div");
-  host.setAttribute("aria-hidden", "true");
-  const root = host.attachShadow({ mode: "closed" });
-  const box = document.createElement("div");
-  box.style.cssText =
-    "position:fixed;z-index:2147483646;pointer-events:none;outline:2px solid Highlight;outline-offset:2px;border-radius:2px;display:none;";
-  const tag = document.createElement("span");
-  tag.style.cssText =
-    "position:absolute;left:-2px;bottom:100%;margin-bottom:4px;padding:2px 6px;border-radius:3px;background:Highlight;color:HighlightText;font:600 11px/1.4 system-ui,sans-serif;white-space:nowrap;";
-  box.append(tag);
-  // Small dots on values with unsaved drafts, so what's waiting to publish shows on the page itself.
-  const dotLayer = document.createElement("div");
-  root.append(box, dotLayer);
-  let dotted: Target[] = [];
-  document.body.append(host);
-  let current: Target | null = null;
-  let frame = 0;
-  const place = () => {
-    frame = 0;
-    if (!current || !current.isConnected) {
-      box.style.display = "none";
-      return;
-    }
-    const r = rectOf(current);
-    Object.assign(box.style, { display: "block", left: `${r.left}px`, top: `${r.top}px`, width: `${r.width}px`, height: `${r.height}px` });
-  };
-  const placeDots = () => {
-    dotLayer.replaceChildren(
-      ...dotted.filter((t) => t.isConnected).map((t) => {
-        const r = rectOf(t);
-        const d = document.createElement("span");
-        d.title = "Unpublished change";
-        d.style.cssText = `position:fixed;z-index:2147483645;pointer-events:none;width:8px;height:8px;border-radius:50%;background:Highlight;box-shadow:0 0 0 2px Canvas;left:${r.right - 2}px;top:${r.top - 6}px;`;
-        return d;
-      }),
-    );
-  };
-  const schedule = () => {
-    if (!frame)
-      frame = requestAnimationFrame(() => {
-        place();
-        placeDots();
-      });
-  };
-  addEventListener("scroll", schedule, true);
-  addEventListener("resize", schedule);
-  return {
-    show(t, label) {
-      current = t;
-      tag.textContent = label;
-      place();
-    },
-    hide() {
-      current = null;
-      box.style.display = "none";
-    },
-    dots(ts) {
-      dotted = ts;
-      placeDots();
-    },
-    destroy() {
-      removeEventListener("scroll", schedule, true);
-      removeEventListener("resize", schedule);
-      if (frame) cancelAnimationFrame(frame);
-      host.remove();
-    },
-  };
-}
-
-// Formatted text has no length limit of its own here; Site Manager checks the saved value.
-const LIMITS_TEXT = Number.MAX_SAFE_INTEGER;
-
-type FormatBar = { show: (el: HTMLElement, mode: "rich" | "heading" | "plain", marks?: Mark[]) => void; hide: () => void; busy: () => boolean; destroy: () => void };
-
-/**
- * The Bold, Italic, Link and Done bar shown above a formatted value while it's edited in place. In its own closed
- * shadow root like the outline, with system colors only. Buttons act on mousedown and keep the page's selection.
- */
-function makeFormatBar(done: () => void, mark: (m: Mark) => void, expand: () => void): FormatBar {
-  const host = document.createElement("div");
-  host.setAttribute("aria-hidden", "false");
-  const root = host.attachShadow({ mode: "closed" });
-  const bar = document.createElement("div");
-  bar.setAttribute("role", "toolbar");
-  bar.setAttribute("aria-label", "Formatting");
-  bar.style.cssText =
-    "position:fixed;z-index:2147483647;display:none;gap:2px;padding:3px;border-radius:6px;background:Canvas;color:CanvasText;border:1px solid GrayText;box-shadow:0 2px 8px rgba(0,0,0,.2);font:600 12px/1 system-ui,sans-serif;";
-  let asking = false;
-  let target: HTMLElement | null = null;
-  const button = (label: string, title: string, act: () => void) => {
-    const b = document.createElement("button");
-    b.type = "button";
-    b.textContent = label;
-    b.title = title;
-    b.style.cssText = "all:unset;cursor:pointer;padding:5px 8px;border-radius:4px;";
-    b.addEventListener("mousedown", (e) => {
-      e.preventDefault();
-      act();
-    });
-    return b;
-  };
-  const accentButton = button("Accent", "Show the selected words in the accent color, or plain again (Ctrl+E)", () => mark("accent"));
-  // Bold on a plain text value marks the words as important, so the site renders them as <strong>.
-  const strongButton = button("B", "Bold: mark the selected words as important (Ctrl+B)", () => mark("strong"));
-  strongButton.style.fontWeight = "800";
-  // Italic marks the words as emphasized, so the site renders them as <em>.
-  const emButton = button("I", "Italic: mark the selected words as emphasized (Ctrl+I)", () => mark("em"));
-  emButton.style.fontStyle = "italic";
-  const richButtons = [
-    button("B", "Bold (Ctrl+B)", () => document.execCommand("bold")),
-    button("I", "Italic (Ctrl+I)", () => document.execCommand("italic")),
-    button("Link", "Link the selected words", () => {
-      asking = true;
-      const url = window.prompt("Link address (https://, mailto: or a page like /about)");
-      asking = false;
-      target?.focus();
-      // Only addresses a visitor can follow; Site Manager sanitizes the HTML again when it saves.
-      if (url && /^(https?:\/\/|mailto:|tel:|\/)/i.test(url.trim())) document.execCommand("createLink", false, url.trim());
-    }),
-  ];
-  const doneButton = button("Done", "Save (Ctrl+Enter)", done);
-  // Moves this value into Site Manager's side panel, for long text or a bigger box.
-  const expandButton = button("\u2922", "Edit in the side panel", expand);
-  expandButton.setAttribute("aria-label", "Edit in the side panel");
-  bar.append(...richButtons, strongButton, emButton, accentButton, expandButton, doneButton);
-  root.append(bar);
-  document.body.append(host);
-  const place = () => {
-    if (!target) return;
-    const r = target.getBoundingClientRect();
-    // Below the words, so it never covers the hint shown above them; above the hint when there's no room below.
-    const below = r.bottom + 8;
-    const top = below + 40 > innerHeight ? Math.max(4, r.top - 72) : below;
-    Object.assign(bar.style, { display: "flex", left: `${Math.max(4, r.left)}px`, top: `${top}px` });
-  };
-  addEventListener("scroll", place, true);
-  return {
-    show(el, mode, marks = ["accent", "strong"]) {
-      target = el;
-      for (const b of richButtons) b.style.display = mode === "rich" ? "" : "none";
-      accentButton.style.display = mode === "heading" && marks.includes("accent") ? "" : "none";
-      strongButton.style.display = mode === "heading" && marks.includes("strong") ? "" : "none";
-      emButton.style.display = mode === "heading" && marks.includes("em") ? "" : "none";
-      doneButton.title = mode === "rich" ? "Save (Ctrl+Enter)" : "Save (Enter)";
-      place();
-    },
-    hide() {
-      target = null;
-      bar.style.display = "none";
-    },
-    busy: () => asking,
-    destroy() {
-      removeEventListener("scroll", place, true);
-      host.remove();
-    },
-  };
-}
-
-type ListBar = { show: (el: Element, actions: ListAction[], act: (a: ListAction) => void) => void; hide: () => void; over: () => boolean; destroy: () => void };
-
-const ACTION_LABELS: Record<ListAction, [string, string]> = {
-  up: ["\u2191", "Move up"],
-  down: ["\u2193", "Move down"],
-  remove: ["\u2715", "Remove this item"],
-  add: ["+", "Add an item after this one"],
-};
-
-/** The small buttons at the top right of a list item, in their own closed shadow root with system colors. */
-function makeListBar(): ListBar {
-  const host = document.createElement("div");
-  const root = host.attachShadow({ mode: "closed" });
-  const bar = document.createElement("div");
-  bar.setAttribute("role", "toolbar");
-  bar.setAttribute("aria-label", "List item");
-  bar.style.cssText =
-    "position:fixed;z-index:2147483647;display:none;gap:2px;padding:2px;border-radius:6px;background:Canvas;color:CanvasText;border:1px solid GrayText;box-shadow:0 2px 8px rgba(0,0,0,.2);font:600 13px/1 system-ui,sans-serif;";
-  root.append(bar);
-  document.body.append(host);
-  let hovering = false;
-  bar.addEventListener("mouseenter", () => (hovering = true));
-  bar.addEventListener("mouseleave", () => (hovering = false));
-  let target: Element | null = null;
-  const place = () => {
-    if (!target?.isConnected) return void (bar.style.display = "none");
-    const r = target.getBoundingClientRect();
-    Object.assign(bar.style, { display: "flex", left: `${Math.max(4, r.right - bar.offsetWidth - 4)}px`, top: `${Math.max(4, r.top + 4)}px` });
-  };
-  addEventListener("scroll", place, true);
-  return {
-    show(el, actions, act) {
-      if (target === el && bar.childElementCount === actions.length) return place();
-      target = el;
-      bar.replaceChildren(
-        ...actions.map((a) => {
-          const b = document.createElement("button");
-          b.type = "button";
-          b.textContent = ACTION_LABELS[a][0];
-          b.title = ACTION_LABELS[a][1];
-          b.setAttribute("aria-label", ACTION_LABELS[a][1]);
-          b.style.cssText = "all:unset;cursor:pointer;padding:4px 8px;border-radius:4px;";
-          b.addEventListener("click", (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            act(a);
-          });
-          return b;
-        }),
-      );
-      bar.style.display = "flex";
-      place();
-    },
-    hide() {
-      if (hovering) return;
-      target = null;
-      bar.style.display = "none";
-    },
-    over: () => hovering,
-    destroy() {
-      removeEventListener("scroll", place, true);
-      host.remove();
-    },
-  };
-}
-
-/** Puts an editing copy exactly over the original, with its look, for words the page can't edit where they are. */
-function floatOver(copy: HTMLElement, original: HTMLElement) {
-  const cs = getComputedStyle(original);
-  const r = original.getBoundingClientRect();
-  // The nearest background behind the words, so the copy reads the same; the system canvas color if none is set.
-  let bg = "Canvas";
-  for (let e: Element | null = original; e; e = e.parentElement) {
-    const c = getComputedStyle(e).backgroundColor;
-    if (c && c !== "transparent" && !/rgba\(.*,\s*0\)$/.test(c)) {
-      bg = c;
-      break;
-    }
-  }
-  Object.assign(copy.style, {
-    position: "absolute",
-    left: `${r.left + scrollX}px`,
-    top: `${r.top + scrollY}px`,
-    minWidth: `${r.width}px`,
-    maxWidth: `${Math.max(r.width, innerWidth - r.left - 8)}px`,
-    margin: "0",
-    padding: "0",
-    zIndex: "2147483640",
-    font: cs.font,
-    letterSpacing: cs.letterSpacing,
-    textTransform: cs.textTransform,
-    lineHeight: cs.lineHeight,
-    textAlign: cs.textAlign,
-    color: cs.color,
-    background: bg,
-    whiteSpace: "normal",
-    userSelect: "text",
-    outline: "none",
-  });
-}
-
-/**
- * Reads the exact tags getCopy() put in each value (visual mode only), removes them from the page and marks the place
- * each one names: the element whose words are exactly the value, or the run of text itself when the element holds
- * more (a heading's words beside its accent). Returns the runs found this time; tagged elements keep their mark.
- */
-function readPageTags(values: Map<string, string>): TextMark[] {
-  const runs: TextMark[] = [];
-  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
-  const found: Text[] = [];
-  for (let n = walker.nextNode(); n; n = walker.nextNode()) if (mayHaveTag(n.nodeValue ?? "")) found.push(n as Text);
-  for (const node of found) {
-    const parent = node.parentElement;
-    if (!parent || parent.tagName === "SCRIPT" || parent.tagName === "STYLE") continue;
-    const { clean, tags } = readTags(node.nodeValue ?? "");
-    // Only nodeValue, so React keeps owning the node and a later change to the value still reaches it.
-    node.nodeValue = clean;
-    // Two values in one run of text (a template string) can't be told apart; both stay unmarked.
-    if (tags.length !== 1) continue;
-    const ref = tags[0]!.ref;
-    const value = values.get(ref);
-    const words = comparable(clean);
-    if (value === undefined || words === value) {
-      // Inside a place the site marked itself with editMarks(): the site's mark wins.
-      if (parent.closest(`[${MARK}]:not([${TAGGED}]):not([${AUTO}])`)) continue;
-      if (comparable(parent.textContent ?? "") === words) {
-        parent.setAttribute(MARK, ref);
-        parent.setAttribute(TAGGED, "");
-        parent.removeAttribute(AUTO);
-      } else runs.push({ node, ref, whole: true });
-      continue;
-    }
-    // Rich text: the tag sits in its last paragraph, so the value is the nearest element holding all its words.
-    let el: Element | null = parent;
-    for (let i = 0; el && i < 8; i++, el = el.parentElement) {
-      if (comparable(el.textContent ?? "") === value) {
-        el.setAttribute(MARK, ref);
-        el.setAttribute(TAGGED, "");
-        el.removeAttribute(AUTO);
-        break;
-      }
-    }
-    // The value with other words around it in one run: shown, but only the side panel can change it.
-    if (!el && words.includes(value)) runs.push({ node, ref, whole: false });
-  }
-  for (const el of Array.from(document.querySelectorAll(TEXT_ATTRS.map((a) => `[${a}]`).join(",")))) {
-    for (const a of TEXT_ATTRS) {
-      const v = el.getAttribute(a);
-      if (!v || !mayHaveTag(v)) continue;
-      const { clean, tags } = readTags(v);
-      el.setAttribute(a, clean);
-      // A photo's tag is in its alt text: the photo itself is the place.
-      if (a === "alt" && el.tagName === "IMG" && tags.length === 1 && !el.closest(`[${MARK}]:not([${TAGGED}]):not([${AUTO}])`)) {
-        el.setAttribute(MARK, tags[0]!.ref);
-        el.setAttribute(TAGGED, "");
-      }
-    }
-  }
-  if (mayHaveTag(document.title)) document.title = stripTags(document.title);
-  return runs;
-}
-
-/**
- * Marks the page's copy from the index: the deepest element whose words are exactly one value gets MARK, and a bare
- * run of text that is one value, in an element that holds other elements too, comes back as a text mark. Elements
- * the site marked itself, and everything inside them, are left as they are.
- */
-function markPage(index: Map<string, string>): TextMark[] {
-  for (const el of Array.from(document.querySelectorAll(`[${AUTO}]`))) {
-    el.removeAttribute(MARK);
-    el.removeAttribute(AUTO);
-  }
-  const texts: TextMark[] = [];
-  if (!index.size) return texts;
-  const max = longest(index);
-  const words = (n: Node) => comparable(n.textContent ?? "");
-  const visit = (el: Element) => {
-    if (SKIP.has(el.tagName) || el.hasAttribute(MARK) || el.shadowRoot) return;
-    const w = words(el);
-    if (!w) return;
-    if (w.length <= max) {
-      const ref = index.get(w);
-      if (ref && !Array.from(el.children).some((c) => words(c) === w)) {
-        el.setAttribute(MARK, ref);
-        el.setAttribute(AUTO, "");
-        return;
-      }
-    }
-    for (const child of Array.from(el.childNodes)) {
-      if (child instanceof Element) visit(child);
-      else if (child instanceof Text) {
-        const ref = index.get(words(child));
-        if (ref) texts.push({ node: child, ref, whole: true });
-      }
-    }
-  };
-  visit(document.body);
-  return texts;
-}
-
-const marked = (t: EventTarget | null) => (t instanceof Element ? t.closest(`[${MARK}]`) : null);
-
-/**
- * The client half of VisualEditing. Talks only to the window that showed it (the frame's parent, or the window that
- * opened it where the page has its own window) and only at the signed admin origin.
- */
-export function VisualBridge({ adminOrigin, kit, copy }: { adminOrigin: string; kit: string; copy: CopyText[] }) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const target = useRef<Window | null>(null);
-  // The path and refs last reported, so a page isn't reported twice (Strict Mode, marking again that found nothing new).
-  const reported = useRef<{ path: string; refs: string } | null>(null);
-  const routerRef = useRef(router);
-  // What Site Manager said, kept outside the effect: React may set the bridge up again (Strict Mode, Fast Refresh)
-  // without Site Manager saying it twice.
-  const said = useRef({ editable: new Map<string, Editable>(), editing: false });
-  const texts = useRef<TextMark[]>([]);
-  // Runs of text an exact tag named. Their tags are gone once read, so they're kept until they leave the page.
-  const tagRuns = useRef<TextMark[]>([]);
-  const words = useRef(copy);
-  const preview = useRef(new LivePreview());
-  // Set up by the main effect: marks the page again and reports it when its refs changed.
-  const rescan = useRef<() => void>(() => {});
-  useEffect(() => {
-    routerRef.current = router;
-  }, [router]);
-
-  useEffect(() => {
-    target.current = window.parent !== window ? window.parent : window.opener;
-    if (!target.current) return;
-    const send = (m: KitMessage) => target.current?.postMessage(m, adminOrigin);
-    const { editable } = said.current;
-    const overlay = makeOverlay();
-    const bar = makeFormatBar(
-      () => finish(true),
-      (m) => toggleMark(m),
-      () => {
-        // Puts the words back as they were and lets Site Manager open the same value in its side panel.
-        if (!active) return;
-        const ref = active.ref;
-        finish(false);
-        send({ bp: 1, type: "expand", ref });
-      },
-    );
-    const listBar = makeListBar();
-    // The lists Site Manager said are on the page, and where each shown item is, found again after each scan.
-    let lists: PageList[] = [];
-    let items: { el: Element; path: string; index: number; actions: ListAction[] }[] = [];
-    const placeItems = () => {
-      const elementOf = (ref: string) => targetsOf(ref).map((t) => (t instanceof Element ? t : t.parentElement)).filter((e): e is Element => !!e);
-      items = lists.flatMap((l) => {
-        const shown = l.items.slice(0, Math.min(l.shown, l.items.length));
-        return shown.flatMap((it, index) => {
-          const mine = it.refs.flatMap(elementOf);
-          const others = shown.filter((_, n) => n !== index).flatMap((o) => o.refs.flatMap(elementOf));
-          const el = itemElement(mine, others);
-          const actions = actionsFor(l, index);
-          return el && actions.length ? [{ el, path: l.path, index, actions }] : [];
-        });
-      });
-    };
-    let selected: Element | null = null;
-    let selectedRun: TextMark | null = null;
-    // run: a heading's words beside its accent, edited in a span put in for the edit; the page's own node goes back after.
-    let active: {
-      el: HTMLElement;
-      ref: string;
-      before: string;
-      maxLength: number;
-      // A formatted value: before is its HTML, Enter makes a new paragraph, and the bar is shown.
-      rich?: boolean;
-      // A heading edited as a copy of its element beside the hidden original, which React keeps owning.
-      heading?: { original: HTMLElement; restore: () => void; template: HTMLElement; marks: Mark[] };
-      run?: { node: Text; lead: string; trail: string; original: string };
-    } | null = null;
-    let flash = 0;
-    let pending = 0;
-    // Values with unsaved drafts (from Site Manager) and the value Tab last moved to.
-    let draftRefs: string[] = [];
-    // Photos shown in place of a value's photo while one is chosen, with what they showed before.
-    const photos = new Map<HTMLImageElement, { src: string; srcset: string | null }>();
-    let focused: Target | null = null;
-
-    rescan.current = () => {
-      // Never while someone is typing: the words they're changing no longer match the value.
-      if (active || preview.current.active) return;
-      const path = location.pathname + location.search;
-      const values = new Map(words.current.map((c) => [`copy/${c.k}`, comparable(c.t)] as const));
-      tagRuns.current = [...tagRuns.current.filter((m) => m.node.isConnected), ...readPageTags(values)];
-      // Values found by their tag aren't looked for by their words too.
-      const tagged = new Set([...Array.from(document.querySelectorAll(`[${TAGGED}]`), (el) => el.getAttribute(MARK)), ...tagRuns.current.map((m) => m.ref)]);
-      const index = new Map([...matchIndex(words.current, location.pathname)].filter(([, ref]) => !tagged.has(ref)));
-      texts.current = [...tagRuns.current, ...markPage(index)];
-      drawDots();
-      placeItems();
-      const refs = collectRefs([...Array.from(document.querySelectorAll(`[${MARK}]`), (el) => el.getAttribute(MARK)), ...texts.current.map((t) => t.ref)]);
-      const last = reported.current;
-      const now = { path, refs: refs.join("\n") };
-      if (last && last.path === now.path && last.refs === now.refs) return;
-      send(last === null ? { bp: 1, type: "ready", kit, path, refs } : { bp: 1, type: "navigated", path, refs });
-      reported.current = now;
-    };
-
-    // Content the page shows after it loads (tabs, accordions, a refresh with new drafts) is marked too.
-    const observer = new MutationObserver(() => {
-      clearTimeout(pending);
-      pending = window.setTimeout(() => rescan.current(), 250);
-    });
-    observer.observe(document.body, { childList: true, subtree: true, characterData: true });
-
-    // Every place a value shows: its marked elements and its runs of text.
-    const targetsOf = (ref: string): Target[] => [
-      ...Array.from(document.querySelectorAll(`[${MARK}="${CSS.escape(ref)}"]`)),
-      ...texts.current.filter((m) => m.ref === ref && m.node.isConnected).map((m) => m.node),
-    ];
-    function drawDots() {
-      overlay.dots(draftRefs.flatMap(targetsOf));
-    }
-    // The values that can be changed, in page order, for Tab.
-    const ordered = (): { t: Target; ref: string }[] => {
-      const all = [
-        ...Array.from(document.querySelectorAll(`[${MARK}]`), (el) => ({ t: el as Target, ref: el.getAttribute(MARK) ?? "" })),
-        ...texts.current.filter((m) => m.node.isConnected).map((m) => ({ t: m.node as Target, ref: m.ref })),
-      ].filter((x) => editable.has(x.ref));
-      return all.sort((a, b) => (a.t.compareDocumentPosition(b.t) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
-    };
-    const known = (el: Element | null) => (el && editable.has(el.getAttribute(MARK) ?? "") ? el : null);
-    const textAt = (e: MouseEvent): TextMark | null => {
-      const within = e.target instanceof Element ? e.target : null;
-      if (!within) return null;
-      for (const m of texts.current) {
-        if (!m.node.isConnected || !editable.has(m.ref) || !within.contains(m.node)) continue;
-        const range = document.createRange();
-        range.selectNodeContents(m.node);
-        for (const r of Array.from(range.getClientRects())) {
-          if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) return m;
-        }
-      }
-      return null;
-    };
-    const textFor = (ref: string) => texts.current.find((m) => m.ref === ref && m.node.isConnected)?.node ?? null;
-    // Every plain text place a value shows: marked elements that hold only text, and its bare runs of text. A marked
-    // element with other elements inside (rich text, a link with an icon) isn't previewed; it changes on save.
-    const placesOf = (ref: string): Text[][] => [
-      ...Array.from(document.querySelectorAll(`[${MARK}="${CSS.escape(ref)}"]`))
-        .filter((el) => el.children.length === 0)
-        .map((el) => Array.from(el.childNodes).filter((n): n is Text => n instanceof Text)),
-      ...texts.current.filter((m) => m.ref === ref && m.node.isConnected).map((m) => [m.node]),
-    ];
-
-    const finish = (commit: boolean) => {
-      if (!active) return;
-      const { el, before, ref, run, rich, heading } = active;
-      active = null;
-      bar.hide();
-      el.removeAttribute("contenteditable");
-      const text = (el.textContent ?? "").trim();
-      if (heading) {
-        bar.hide();
-        const value = fromMarkedRuns(runsIn(el));
-        el.remove();
-        heading.restore();
-        // Site Manager saves and refreshes the page, which shows the new words in the page's own element.
-        send(commit ? { bp: 1, type: "commit", ref, text: value.text, accents: value.accents, strong: value.strong, em: value.em } : { bp: 1, type: "cancel", ref });
-        overlay.hide();
-        return;
-      }
-      if (rich) {
-        bar.hide();
-        if (commit) send({ bp: 1, type: "commit", ref, text, html: stripTags(el.innerHTML) });
-        else {
-          // Formatted values come from the site's HTML, which a refresh sets again, so putting it back is safe.
-          el.innerHTML = before;
-          send({ bp: 1, type: "cancel", ref });
-        }
-        overlay.hide();
-        return;
-      }
-      if (run) {
-        // The page's own node goes back with the words, so React still owns it and the saved draft reaches it.
-        run.node.nodeValue = commit ? run.lead + text + run.trail : run.original;
-        el.replaceWith(run.node);
-      } else if (!commit) el.textContent = before;
-      send(commit ? { bp: 1, type: "commit", ref, text } : { bp: 1, type: "cancel", ref });
-      overlay.hide();
-    };
-
-    // mousemove, not mouseover: a run of text shares its element with others, so moving within it matters.
-    const onMove = (e: MouseEvent) => {
-      if (!said.current.editing || active) return;
-      // The innermost list item under the pointer gets its buttons.
-      const t = e.target instanceof Node ? e.target : null;
-      const item = t ? items.filter((i) => i.el.contains(t)).sort((a, b) => (a.el.contains(b.el) ? 1 : -1))[0] : undefined;
-      if (item) listBar.show(item.el, item.actions, (action) => send({ bp: 1, type: "listAction", path: item.path, index: item.index, action }));
-      else if (!listBar.over()) listBar.hide();
-      const el = known(marked(e.target));
-      const text = el ? null : textAt(e);
-      const ref = el ? el.getAttribute(MARK) : text?.ref;
-      if (!ref) return overlay.hide();
-      // The value's own name tells people what they're about to change; "Click to edit" for an older Site Manager.
-      overlay.show(el ?? text!.node, editable.get(ref)?.label ?? "Click to edit");
-    };
-    const onClick = (e: MouseEvent) => {
-      if (!said.current.editing) return;
-      if (active && active.el.contains(e.target as Node)) return;
-      // Edit mode: a link or button never acts, whether or not its words can be changed.
-      if (blocksActivation(e.target)) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-      const el = known(marked(e.target));
-      const text = el ? null : textAt(e);
-      const ref = el ? (el.getAttribute(MARK) ?? "") : text?.ref;
-      if (!ref) return;
-      e.preventDefault();
-      e.stopPropagation();
-      choose(ref, el, text);
-    };
-    const choose = (ref: string, el: Element | null, text: TextMark | null) => {
-      selected = el;
-      selectedRun = text;
-      const r = rectOf(el ?? text!.node);
-      send({
-        bp: 1,
-        type: "select",
-        ref,
-        rect: { x: r.left, y: r.top, w: r.width, h: r.height },
-        // A run that is the value's words alone edits in place too; one with other words around it opens the panel.
-        plain: el ? el.children.length === 0 : text!.whole,
-      });
-    };
-    const onSubmit = (e: SubmitEvent) => {
-      if (!said.current.editing) return;
-      e.preventDefault();
-      e.stopPropagation();
-    };
-    const onKey = (e: KeyboardEvent) => {
-      const mod = e.ctrlKey || e.metaKey;
-      if (!active && mod && (e.key === "z" || e.key === "Z" || e.key === "y")) {
-        // Undo and redo belong to Site Manager's history of this page's edits, not the page.
-        e.preventDefault();
-        send({ bp: 1, type: "key", key: e.key === "y" || e.shiftKey ? "redo" : "undo" });
-        return;
-      }
-      if (!active && said.current.editing && e.key === "Tab") {
-        // Tab moves between the values on the page instead of the page's links.
-        const list = ordered();
-        if (!list.length) return;
-        e.preventDefault();
-        const at = focused ? list.findIndex((x) => x.t === focused) : -1;
-        const next = list[(at + (e.shiftKey ? -1 : 1) + list.length) % list.length]!;
-        focused = next.t;
-        (next.t instanceof Element ? next.t : next.t.parentElement)?.scrollIntoView({ block: "nearest" });
-        overlay.show(next.t, `${editable.get(next.ref)?.label ?? "Value"}: Enter to edit`);
-        return;
-      }
-      if (!active && said.current.editing && focused && e.key === "Enter" && focused.isConnected) {
-        e.preventDefault();
-        e.stopPropagation();
-        const t = focused;
-        const run = t instanceof Text ? (texts.current.find((m) => m.node === t) ?? null) : null;
-        const el = t instanceof Element ? t : null;
-        const ref = el ? el.getAttribute(MARK) : run?.ref;
-        if (ref) choose(ref, el, run);
-        return;
-      }
-      if (!active && focused && e.key === "Escape") {
-        focused = null;
-        overlay.hide();
-        return;
-      }
-      if (!active && said.current.editing && (e.key === "Enter" || e.key === " ") && blocksActivation(e.target)) {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-      if (!active || !active.el.contains(e.target as Node)) return;
-      if (active.heading) {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          finish(true);
-        } else if (e.key === "Escape") {
-          e.preventDefault();
-          finish(false);
-        } else if (mod && e.key === "e" && active.heading.marks.includes("accent")) {
-          e.preventDefault();
-          toggleMark("accent");
-        } else if (mod && e.key === "b") {
-          // Never the browser's own bold, which would type markup the value doesn't keep.
-          e.preventDefault();
-          if (active.heading.marks.includes("strong")) toggleMark("strong");
-        } else if (mod && e.key === "i") {
-          // The same for italic: only the value's own mark, never the browser's markup.
-          e.preventDefault();
-          if (active.heading.marks.includes("em")) toggleMark("em");
-        }
-        return;
-      }
-      if (active.rich) {
-        // Enter starts a new paragraph; Ctrl+Enter saves, Escape cancels.
-        if (e.key === "Enter" && mod) {
-          e.preventDefault();
-          finish(true);
-        } else if (e.key === "Escape") {
-          e.preventDefault();
-          finish(false);
-        } else if (mod && (e.key === "b" || e.key === "i")) {
-          e.preventDefault();
-          document.execCommand(e.key === "b" ? "bold" : "italic");
-        }
-        return;
-      }
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        finish(true);
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        finish(false);
-      }
-    };
-    const onBeforeInput = (e: InputEvent) => {
-      if (!active || active.rich || !active.el.contains(e.target as Node) || !e.inputType.startsWith("insert")) return;
-      if (e.inputType === "insertParagraph" || e.inputType === "insertLineBreak") {
-        e.preventDefault();
-        return;
-      }
-      const adding = (e.data ?? e.dataTransfer?.getData("text/plain") ?? "").length;
-      const replacing = getSelection()?.toString().length ?? 0;
-      if ((active.el.textContent ?? "").length - replacing + adding > active.maxLength) e.preventDefault();
-    };
-    const onInput = (e: Event) => {
-      if (active && e.target === active.el) send({ bp: 1, type: "typing", ref: active.ref, text: (active.el.textContent ?? "").trim() });
-    };
-    const onBlur = (e: FocusEvent) => {
-      // The Link button asks for an address, which takes focus for a moment; that isn't leaving the edit.
-      if (active && e.target === active.el && !bar.busy()) finish(true);
-    };
-    // The words being edited as runs: inside an accent element is gold, inside <strong> is important.
-    const runsIn = (root: HTMLElement): MarkedRun[] => {
-      const runs: MarkedRun[] = [];
-      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-      for (let n = walker.nextNode(); n; n = walker.nextNode()) {
-        const p = n.parentElement && n.parentElement !== root ? n.parentElement : null;
-        const within = (sel: string) => {
-          const hit = p?.closest(sel);
-          return !!hit && root.contains(hit) && hit !== root;
-        };
-        runs.push({ text: n.nodeValue ?? "", accent: within("[data-bp-accent]"), strong: within("strong, b"), em: within("em, i") });
-      }
-      return runs;
-    };
-    // Lays the runs into the editing copy: important words in <strong>, gold ones in copies of the page's own accent
-    // element so they look the same.
-    const layRuns = (root: HTMLElement, template: HTMLElement, runs: MarkedRun[]) => {
-      root.replaceChildren(
-        ...runs.map((r) => {
-          let node: Node = document.createTextNode(r.text);
-          if (r.accent) {
-            const a = template.cloneNode(false) as HTMLElement;
-            a.setAttribute("data-bp-accent", "");
-            a.append(node);
-            node = a;
-          }
-          if (r.em) {
-            const i = document.createElement("em");
-            i.append(node);
-            node = i;
-          }
-          if (r.strong) {
-            const b = document.createElement("strong");
-            b.append(node);
-            node = b;
-          }
-          return node;
-        }),
-      );
-    };
-    // Character offset of a point in the editing copy, so the selection survives laying the runs again.
-    const offsetOf = (root: HTMLElement, node: Node, at: number): number => {
-      let total = 0;
-      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-      for (let n = walker.nextNode(); n; n = walker.nextNode()) {
-        if (n === node) return total + at;
-        total += (n.nodeValue ?? "").length;
-      }
-      return node === root ? (at === 0 ? 0 : total) : total;
-    };
-    const pointAt = (root: HTMLElement, offset: number): [Node, number] => {
-      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-      let last: Node = root;
-      for (let n = walker.nextNode(); n; n = walker.nextNode()) {
-        const len = (n.nodeValue ?? "").length;
-        if (offset <= len) return [n, offset];
-        offset -= len;
-        last = n;
-      }
-      return [last, last === root ? 0 : (last.nodeValue ?? "").length];
-    };
-    function toggleMark(mark: Mark) {
-      if (!active?.heading || !active.heading.marks.includes(mark)) return;
-      const el = active.el;
-      const sel = getSelection();
-      if (!sel || sel.rangeCount === 0) return;
-      const range = sel.getRangeAt(0);
-      if (!el.contains(range.commonAncestorContainer)) return;
-      const start = offsetOf(el, range.startContainer, range.startOffset);
-      const end = offsetOf(el, range.endContainer, range.endOffset);
-      if (end <= start) return;
-      const value = fromMarkedRuns(runsIn(el));
-      const text = value.text;
-      const current = mark === "accent" ? value.accents : mark === "strong" ? value.strong : value.em;
-      const flags = Array.from(text, (_, i) => current.some(([s, e]) => i >= s && i < e));
-      // Like Bold in any editor: all marked already turns plain, anything else turns marked.
-      const all = flags.slice(start, end).every(Boolean);
-      for (let i = start; i < end; i++) flags[i] = !all;
-      const next: [number, number][] = [];
-      flags.forEach((f, i) => {
-        if (!f) return;
-        const last = next[next.length - 1];
-        if (last && last[1] === i) last[1] = i + 1;
-        else next.push([i, i + 1]);
-      });
-      const marks = { accents: value.accents, strong: value.strong, em: value.em, [mark === "accent" ? "accents" : mark]: next };
-      layRuns(el, active.heading.template, markedRuns(text, marks));
-      const [sn, so] = pointAt(el, start);
-      const [en, eo] = pointAt(el, end);
-      const r = document.createRange();
-      r.setStart(sn, so);
-      r.setEnd(en, eo);
-      sel.removeAllRanges();
-      sel.addRange(r);
-      send({ bp: 1, type: "typing", ref: active.ref, text });
-    }
-    const startInlineHeading = (ref: string, maxLength: number, text: string, accents: [number, number][], strong: [number, number][], marks: Mark[], em: [number, number][] = []): void => {
-      if (active) return;
-      const original = selected?.getAttribute(MARK) === ref && selected.isConnected ? selected : document.querySelector(`[${MARK}="${CSS.escape(ref)}"]`);
-      // A heading not yet converted is words beside its separate accent value: those words edit in place as before.
-      if (!(original instanceof HTMLElement) || (selectedRun?.ref === ref && selected !== original)) return startInline(ref, maxLength);
-      // The page's own accent element (the first element the gold words sit in) is the look for every gold run.
-      const shown = normalizeAccents(text, accents) ?? [];
-      let template: HTMLElement | null = null;
-      if (shown.length) {
-        let at = 0;
-        const walker = document.createTreeWalker(original, NodeFilter.SHOW_TEXT);
-        for (let n = walker.nextNode(); n && !template; n = walker.nextNode()) {
-          const len = (n.nodeValue ?? "").length;
-          if (shown.some(([s, e]) => at < e && at + len > s) && n.parentElement && n.parentElement !== original) {
-            let t: HTMLElement = n.parentElement;
-            while (t.parentElement && t.parentElement !== original) t = t.parentElement;
-            template = t;
-          }
-          at += len;
-        }
-      }
-      if (!template) {
-        // No gold words yet: an accent shows in the highlight color until the page refreshes with the site's own.
-        template = document.createElement("span");
-        template.style.color = "Highlight";
-      }
-      const copy = original.cloneNode(false) as HTMLElement;
-      copy.removeAttribute("id");
-      copy.removeAttribute(MARK);
-      copy.removeAttribute(TAGGED);
-      copy.removeAttribute(AUTO);
-      layRuns(copy, template, markedRuns(text, { accents: shown, strong, em }));
-      let restore: () => void;
-      if (original.parentElement?.closest(ACTIVATES)) {
-        // Inside a button or link the browser won't select words and a click would press it, so the words are edited in
-        // a copy floating exactly over them, with the same look, while the original keeps its place.
-        floatOver(copy, original);
-        document.body.append(copy);
-        const visibility = original.style.visibility;
-        original.style.visibility = "hidden";
-        restore = () => {
-          original.style.visibility = visibility;
-        };
-      } else {
-        const display = original.style.display;
-        original.after(copy);
-        original.style.display = "none";
-        restore = () => {
-          original.style.display = display;
-        };
-      }
-      active = { el: copy, ref, before: text, maxLength, heading: { original, restore, template, marks } };
-      copy.setAttribute("contenteditable", "true");
-      copy.focus();
-      const range = document.createRange();
-      range.selectNodeContents(copy);
-      getSelection()?.removeAllRanges();
-      getSelection()?.addRange(range);
-      overlay.show(copy, `Select words, then ${marks.map((m) => (m === "accent" ? "Accent for gold" : m === "strong" ? "B for bold" : "I for italic")).join(", ")}. Enter to save, Esc to cancel`);
-      bar.show(copy, "heading", marks);
-    };
-    const startInlineRich = (ref: string) => {
-      if (active) return;
-      const el = selected?.getAttribute(MARK) === ref && selected.isConnected ? selected : document.querySelector(`[${MARK}="${CSS.escape(ref)}"]`);
-      if (!(el instanceof HTMLElement)) return;
-      active = { el, ref, before: el.innerHTML, maxLength: LIMITS_TEXT, rich: true };
-      el.setAttribute("contenteditable", "true");
-      el.focus();
-      overlay.show(el, "Ctrl+Enter to save, Esc to cancel");
-      bar.show(el, "rich");
-    };
-
-    const startInline = (ref: string, maxLength: number): void => {
-      if (active) return;
-      // Words inside a button or link (a step title, a tab) are edited in a floating copy; see startInlineHeading.
-      const marked = selected?.getAttribute(MARK) === ref && selected.isConnected ? selected : document.querySelector(`[${MARK}="${CSS.escape(ref)}"]`);
-      if (marked instanceof HTMLElement && marked.children.length === 0 && marked.parentElement?.closest(ACTIVATES)) {
-        return startInlineHeading(ref, maxLength, (marked.textContent ?? "").trim(), [], [], []);
-      }
-      const run = selectedRun?.ref === ref && selectedRun.whole && selectedRun.node.isConnected ? selectedRun : null;
-      let el: Element | null;
-      if (run) {
-        const original = run.node.nodeValue ?? "";
-        const span = document.createElement("span");
-        span.textContent = original.trim();
-        run.node.replaceWith(span);
-        el = span;
-        active = {
-          el: span,
-          ref,
-          before: span.textContent,
-          maxLength,
-          run: { node: run.node, lead: /^\s*/.exec(original)![0], trail: /\s*$/.exec(original)![0], original },
-        };
-      } else {
-        el = selected?.getAttribute(MARK) === ref && selected.isConnected ? selected : document.querySelector(`[${MARK}="${CSS.escape(ref)}"]`);
-        if (!(el instanceof HTMLElement) || el.children.length > 0) return;
-        active = { el, ref, before: el.textContent ?? "", maxLength };
-      }
-      if (!(el instanceof HTMLElement)) return;
-      el.setAttribute("contenteditable", "plaintext-only");
-      el.focus();
-      const range = document.createRange();
-      range.selectNodeContents(el);
-      getSelection()?.removeAllRanges();
-      getSelection()?.addRange(range);
-      overlay.show(el, "Enter to save, Esc to cancel");
-      bar.show(el, "plain");
-    };
-
-    const onMessage = (e: MessageEvent) => {
-      const m = adminMessageFrom(e, target.current, adminOrigin);
-      if (!m) return;
-      switch (m.type) {
-        case "hello":
-          editable.clear();
-          for (const item of m.editable) editable.set(item.ref, item);
-          return;
-        case "mode":
-          said.current.editing = m.editing;
-          if (!m.editing) {
-            finish(true);
-            overlay.hide();
-          }
-          return;
-        case "inline":
-          startInline(m.ref, m.maxLength);
-          return;
-        case "inlineRich":
-          startInlineRich(m.ref);
-          return;
-        case "inlineHeading":
-          startInlineHeading(m.ref, m.maxLength, m.text, m.accents, m.strong ?? [], m.marks ?? ["accent", "strong"], m.em ?? []);
-          return;
-        case "refresh":
-          // The saved words arrive with the refresh, in the same nodes, so the preview is let go, not undone.
-          preview.current.forget();
-          routerRef.current.refresh();
-          return;
-        case "navigate":
-          preview.current.restoreAll();
-          routerRef.current.push(m.path);
-          return;
-        case "saved":
-          // The page already shows these words: keep them, and match them from now on.
-          preview.current.keep(m.ref);
-          words.current = words.current.map((c) => (`copy/${c.k}` === m.ref ? { ...c, t: m.text } : c));
-          rescan.current();
-          return;
-        case "drafts":
-          draftRefs = m.refs;
-          drawDots();
-          return;
-        case "lists":
-          lists = m.lists;
-          placeItems();
-          return;
-        case "previewImage": {
-          const imgs = Array.from(document.querySelectorAll(`img[${MARK}="${CSS.escape(m.ref)}"]`)) as HTMLImageElement[];
-          for (const img of imgs) {
-            if (m.url === null) {
-              const was = photos.get(img);
-              if (was) {
-                if (was.srcset !== null) img.setAttribute("srcset", was.srcset);
-                img.src = was.src;
-                photos.delete(img);
-              }
-            } else {
-              if (!photos.has(img)) photos.set(img, { src: img.src, srcset: img.getAttribute("srcset") });
-              // The site's own sizes point at the old photo, so the chosen one shows at its own address.
-              img.removeAttribute("srcset");
-              img.src = m.url;
-            }
-          }
-          return;
-        }
-        case "preview":
-          if (m.text === null) {
-            preview.current.restore(m.ref);
-            rescan.current();
-          } else if (editable.has(m.ref)) {
-            preview.current.show(m.ref, m.text, () => placesOf(m.ref));
-          }
-          return;
-        case "focus": {
-          const t: Target | null = document.querySelector(`[${MARK}="${CSS.escape(m.ref)}"]`) ?? textFor(m.ref);
-          if (!t) return;
-          (t instanceof Element ? t : t.parentElement)?.scrollIntoView({ block: "center", behavior: "smooth" });
-          overlay.show(t, "Changed");
-          clearTimeout(flash);
-          flash = window.setTimeout(() => {
-            if (!active) overlay.hide();
-          }, 2000);
-          return;
-        }
-      }
-    };
-
-    addEventListener("message", onMessage);
-    document.addEventListener("mousemove", onMove, true);
-    document.addEventListener("click", onClick, true);
-    document.addEventListener("submit", onSubmit, true);
-    document.addEventListener("keydown", onKey, true);
-    document.addEventListener("beforeinput", onBeforeInput, true);
-    document.addEventListener("input", onInput, true);
-    document.addEventListener("blur", onBlur, true);
-    return () => {
-      removeEventListener("message", onMessage);
-      document.removeEventListener("mousemove", onMove, true);
-      document.removeEventListener("click", onClick, true);
-      document.removeEventListener("submit", onSubmit, true);
-      document.removeEventListener("keydown", onKey, true);
-      document.removeEventListener("beforeinput", onBeforeInput, true);
-      document.removeEventListener("input", onInput, true);
-      document.removeEventListener("blur", onBlur, true);
-      observer.disconnect();
-      preview.current.restoreAll();
-      clearTimeout(flash);
-      clearTimeout(pending);
-      rescan.current = () => {};
-      overlay.destroy();
-      bar.destroy();
-      listBar.destroy();
-    };
-  }, [adminOrigin, kit]);
-
-  // After each move within the site, and when a refresh brings new words, mark the page and say which values it has.
-  // Effects run once the new page is in the document. Not in requestAnimationFrame: browsers pause that in background
-  // tabs, and the editor would give up waiting.
-  useEffect(() => {
-    words.current = copy;
-    // A new page or freshly saved words: anything previewed is gone or now real.
-    preview.current.forget();
-    rescan.current();
-  }, [pathname, copy]);
-
-  return null;
-}
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useRef } from "react";
+import { fromMarkedRuns, markedRuns, normalizeAccents, type Mark, type MarkedRun } from "./visual-accents";
+import { ACTIVATES, blocksActivation } from "./visual-clicks";
+import { actionsFor, itemElement, type ListAction, type PageList } from "./visual-lists";
+import { comparable, longest, matchIndex, type CopyText } from "./visual-match";
+import { adminMessageFrom, collectRefs, type Editable, type KitMessage } from "./visual-messages";
+import { LivePreview } from "./visual-preview";
+import { mayHaveTag, readTags, stripTags } from "./visual-tags";
+
+const MARK = "data-bp-edit";
+// Set beside MARK on the marks the bridge adds itself, so marking again clears only those and never the site's own.
+const AUTO = "data-bp-auto";
+// Set beside MARK on a place an exact tag named. Kept when marking again: the tag was removed when it was read.
+const TAGGED = "data-bp-tagged";
+// Attributes that may carry Site Copy (a photo's alt, a button's label); their tags are removed, never shown.
+const TEXT_ATTRS = ["alt", "title", "aria-label", "placeholder", "content", "value"];
+
+// Never matched: code, form controls and embedded documents aren't words a visitor reads as copy.
+const SKIP = new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "TEXTAREA", "SELECT", "INPUT", "IFRAME", "svg"]);
+
+/**
+ * A value that is a bare run of text beside other elements (a heading's words before its accent span). whole: the run
+ * is the value's words and nothing else, so it can be edited in place.
+ */
+type TextMark = { node: Text; ref: string; whole: boolean };
+type Target = Element | Text;
+
+const rectOf = (t: Target): DOMRect => {
+  if (t instanceof Element) return t.getBoundingClientRect();
+  const range = document.createRange();
+  range.selectNodeContents(t);
+  return range.getBoundingClientRect();
+};
+
+type Overlay = { show: (t: Target, label: string) => void; hide: () => void; dots: (ts: Target[]) => void; destroy: () => void };
+
+// Drawn in a closed shadow root so the page's CSS can't reach it and it can't reach the page. System colors only.
+function makeOverlay(): Overlay {
+  const host = document.createElement("div");
+  host.setAttribute("aria-hidden", "true");
+  const root = host.attachShadow({ mode: "closed" });
+  const box = document.createElement("div");
+  box.style.cssText =
+    "position:fixed;z-index:2147483646;pointer-events:none;outline:2px solid Highlight;outline-offset:2px;border-radius:2px;display:none;";
+  const tag = document.createElement("span");
+  tag.style.cssText =
+    "position:absolute;left:-2px;bottom:100%;margin-bottom:4px;padding:2px 6px;border-radius:3px;background:Highlight;color:HighlightText;font:600 11px/1.4 system-ui,sans-serif;white-space:nowrap;";
+  box.append(tag);
+  // Small dots on values with unsaved drafts, so what's waiting to publish shows on the page itself.
+  const dotLayer = document.createElement("div");
+  root.append(box, dotLayer);
+  let dotted: Target[] = [];
+  document.body.append(host);
+  let current: Target | null = null;
+  let frame = 0;
+  const place = () => {
+    frame = 0;
+    if (!current || !current.isConnected) {
+      box.style.display = "none";
+      return;
+    }
+    const r = rectOf(current);
+    Object.assign(box.style, { display: "block", left: `${r.left}px`, top: `${r.top}px`, width: `${r.width}px`, height: `${r.height}px` });
+  };
+  const placeDots = () => {
+    dotLayer.replaceChildren(
+      ...dotted.filter((t) => t.isConnected).map((t) => {
+        const r = rectOf(t);
+        const d = document.createElement("span");
+        d.title = "Unpublished change";
+        d.style.cssText = `position:fixed;z-index:2147483645;pointer-events:none;width:8px;height:8px;border-radius:50%;background:Highlight;box-shadow:0 0 0 2px Canvas;left:${r.right - 2}px;top:${r.top - 6}px;`;
+        return d;
+      }),
+    );
+  };
+  const schedule = () => {
+    if (!frame)
+      frame = requestAnimationFrame(() => {
+        place();
+        placeDots();
+      });
+  };
+  addEventListener("scroll", schedule, true);
+  addEventListener("resize", schedule);
+  return {
+    show(t, label) {
+      current = t;
+      tag.textContent = label;
+      place();
+    },
+    hide() {
+      current = null;
+      box.style.display = "none";
+    },
+    dots(ts) {
+      dotted = ts;
+      placeDots();
+    },
+    destroy() {
+      removeEventListener("scroll", schedule, true);
+      removeEventListener("resize", schedule);
+      if (frame) cancelAnimationFrame(frame);
+      host.remove();
+    },
+  };
+}
+
+// Formatted text has no length limit of its own here; Site Manager checks the saved value.
+const LIMITS_TEXT = Number.MAX_SAFE_INTEGER;
+
+type FormatBar = { show: (el: HTMLElement, mode: "rich" | "heading" | "plain", marks?: Mark[]) => void; hide: () => void; busy: () => boolean; destroy: () => void };
+
+/**
+ * The Bold, Italic, Link and Done bar shown above a formatted value while it's edited in place. In its own closed
+ * shadow root like the outline, with system colors only. Buttons act on mousedown and keep the page's selection.
+ */
+function makeFormatBar(done: () => void, mark: (m: Mark) => void, expand: () => void): FormatBar {
+  const host = document.createElement("div");
+  host.setAttribute("aria-hidden", "false");
+  const root = host.attachShadow({ mode: "closed" });
+  const bar = document.createElement("div");
+  bar.setAttribute("role", "toolbar");
+  bar.setAttribute("aria-label", "Formatting");
+  bar.style.cssText =
+    "position:fixed;z-index:2147483647;display:none;gap:2px;padding:3px;border-radius:6px;background:Canvas;color:CanvasText;border:1px solid GrayText;box-shadow:0 2px 8px rgba(0,0,0,.2);font:600 12px/1 system-ui,sans-serif;";
+  let asking = false;
+  let target: HTMLElement | null = null;
+  const button = (label: string, title: string, act: () => void) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.textContent = label;
+    b.title = title;
+    b.style.cssText = "all:unset;cursor:pointer;padding:5px 8px;border-radius:4px;";
+    b.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      act();
+    });
+    return b;
+  };
+  const accentButton = button("Accent", "Show the selected words in the accent color, or plain again (Ctrl+E)", () => mark("accent"));
+  // Bold on a plain text value marks the words as important, so the site renders them as <strong>.
+  const strongButton = button("B", "Bold: mark the selected words as important (Ctrl+B)", () => mark("strong"));
+  strongButton.style.fontWeight = "800";
+  // Italic marks the words as emphasized, so the site renders them as <em>.
+  const emButton = button("I", "Italic: mark the selected words as emphasized (Ctrl+I)", () => mark("em"));
+  emButton.style.fontStyle = "italic";
+  const richButtons = [
+    button("B", "Bold (Ctrl+B)", () => document.execCommand("bold")),
+    button("I", "Italic (Ctrl+I)", () => document.execCommand("italic")),
+    button("Link", "Link the selected words", () => {
+      asking = true;
+      const url = window.prompt("Link address (https://, mailto: or a page like /about)");
+      asking = false;
+      target?.focus();
+      // Only addresses a visitor can follow; Site Manager sanitizes the HTML again when it saves.
+      if (url && /^(https?:\/\/|mailto:|tel:|\/)/i.test(url.trim())) document.execCommand("createLink", false, url.trim());
+    }),
+  ];
+  const doneButton = button("Done", "Save (Ctrl+Enter)", done);
+  // Moves this value into Site Manager's side panel, for long text or a bigger box.
+  const expandButton = button("\u2922", "Edit in the side panel", expand);
+  expandButton.setAttribute("aria-label", "Edit in the side panel");
+  bar.append(...richButtons, strongButton, emButton, accentButton, expandButton, doneButton);
+  root.append(bar);
+  document.body.append(host);
+  const place = () => {
+    if (!target) return;
+    const r = target.getBoundingClientRect();
+    // Below the words, so it never covers the hint shown above them; above the hint when there's no room below.
+    const below = r.bottom + 8;
+    const top = below + 40 > innerHeight ? Math.max(4, r.top - 72) : below;
+    Object.assign(bar.style, { display: "flex", left: `${Math.max(4, r.left)}px`, top: `${top}px` });
+  };
+  addEventListener("scroll", place, true);
+  return {
+    show(el, mode, marks = ["accent", "strong"]) {
+      target = el;
+      for (const b of richButtons) b.style.display = mode === "rich" ? "" : "none";
+      accentButton.style.display = mode === "heading" && marks.includes("accent") ? "" : "none";
+      strongButton.style.display = mode === "heading" && marks.includes("strong") ? "" : "none";
+      emButton.style.display = mode === "heading" && marks.includes("em") ? "" : "none";
+      doneButton.title = mode === "rich" ? "Save (Ctrl+Enter)" : "Save (Enter)";
+      place();
+    },
+    hide() {
+      target = null;
+      bar.style.display = "none";
+    },
+    busy: () => asking,
+    destroy() {
+      removeEventListener("scroll", place, true);
+      host.remove();
+    },
+  };
+}
+
+type ListBar = { show: (el: Element, actions: ListAction[], act: (a: ListAction) => void) => void; hide: () => void; over: () => boolean; destroy: () => void };
+
+const ACTION_LABELS: Record<ListAction, [string, string]> = {
+  up: ["\u2191", "Move up"],
+  down: ["\u2193", "Move down"],
+  remove: ["\u2715", "Remove this item"],
+  add: ["+", "Add an item after this one"],
+};
+
+/** The small buttons at the top right of a list item, in their own closed shadow root with system colors. */
+function makeListBar(): ListBar {
+  const host = document.createElement("div");
+  const root = host.attachShadow({ mode: "closed" });
+  const bar = document.createElement("div");
+  bar.setAttribute("role", "toolbar");
+  bar.setAttribute("aria-label", "List item");
+  bar.style.cssText =
+    "position:fixed;z-index:2147483647;display:none;gap:2px;padding:2px;border-radius:6px;background:Canvas;color:CanvasText;border:1px solid GrayText;box-shadow:0 2px 8px rgba(0,0,0,.2);font:600 13px/1 system-ui,sans-serif;";
+  root.append(bar);
+  document.body.append(host);
+  let hovering = false;
+  bar.addEventListener("mouseenter", () => (hovering = true));
+  bar.addEventListener("mouseleave", () => (hovering = false));
+  let target: Element | null = null;
+  const place = () => {
+    if (!target?.isConnected) return void (bar.style.display = "none");
+    const r = target.getBoundingClientRect();
+    Object.assign(bar.style, { display: "flex", left: `${Math.max(4, r.right - bar.offsetWidth - 4)}px`, top: `${Math.max(4, r.top + 4)}px` });
+  };
+  addEventListener("scroll", place, true);
+  return {
+    show(el, actions, act) {
+      if (target === el && bar.childElementCount === actions.length) return place();
+      target = el;
+      bar.replaceChildren(
+        ...actions.map((a) => {
+          const b = document.createElement("button");
+          b.type = "button";
+          b.textContent = ACTION_LABELS[a][0];
+          b.title = ACTION_LABELS[a][1];
+          b.setAttribute("aria-label", ACTION_LABELS[a][1]);
+          b.style.cssText = "all:unset;cursor:pointer;padding:4px 8px;border-radius:4px;";
+          b.addEventListener("click", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            act(a);
+          });
+          return b;
+        }),
+      );
+      bar.style.display = "flex";
+      place();
+    },
+    hide() {
+      if (hovering) return;
+      target = null;
+      bar.style.display = "none";
+    },
+    over: () => hovering,
+    destroy() {
+      removeEventListener("scroll", place, true);
+      host.remove();
+    },
+  };
+}
+
+/** Puts an editing copy exactly over the original, with its look, for words the page can't edit where they are. */
+function floatOver(copy: HTMLElement, original: HTMLElement) {
+  const cs = getComputedStyle(original);
+  const r = original.getBoundingClientRect();
+  // The nearest background behind the words, so the copy reads the same; the system canvas color if none is set.
+  let bg = "Canvas";
+  for (let e: Element | null = original; e; e = e.parentElement) {
+    const c = getComputedStyle(e).backgroundColor;
+    if (c && c !== "transparent" && !/rgba\(.*,\s*0\)$/.test(c)) {
+      bg = c;
+      break;
+    }
+  }
+  Object.assign(copy.style, {
+    position: "absolute",
+    left: `${r.left + scrollX}px`,
+    top: `${r.top + scrollY}px`,
+    minWidth: `${r.width}px`,
+    maxWidth: `${Math.max(r.width, innerWidth - r.left - 8)}px`,
+    margin: "0",
+    padding: "0",
+    zIndex: "2147483640",
+    font: cs.font,
+    letterSpacing: cs.letterSpacing,
+    textTransform: cs.textTransform,
+    lineHeight: cs.lineHeight,
+    textAlign: cs.textAlign,
+    color: cs.color,
+    background: bg,
+    whiteSpace: "normal",
+    userSelect: "text",
+    outline: "none",
+  });
+}
+
+/**
+ * Reads the exact tags getCopy() put in each value (visual mode only), removes them from the page and marks the place
+ * each one names: the element whose words are exactly the value, or the run of text itself when the element holds
+ * more (a heading's words beside its accent). Returns the runs found this time; tagged elements keep their mark.
+ */
+function readPageTags(values: Map<string, string>): TextMark[] {
+  const runs: TextMark[] = [];
+  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+  const found: Text[] = [];
+  for (let n = walker.nextNode(); n; n = walker.nextNode()) if (mayHaveTag(n.nodeValue ?? "")) found.push(n as Text);
+  for (const node of found) {
+    const parent = node.parentElement;
+    if (!parent || parent.tagName === "SCRIPT" || parent.tagName === "STYLE") continue;
+    const { clean, tags } = readTags(node.nodeValue ?? "");
+    // Only nodeValue, so React keeps owning the node and a later change to the value still reaches it.
+    node.nodeValue = clean;
+    // Two values in one run of text (a template string) can't be told apart; both stay unmarked.
+    if (tags.length !== 1) continue;
+    const ref = tags[0]!.ref;
+    const value = values.get(ref);
+    const words = comparable(clean);
+    if (value === undefined || words === value) {
+      // Inside a place the site marked itself with editMarks(): the site's mark wins.
+      if (parent.closest(`[${MARK}]:not([${TAGGED}]):not([${AUTO}])`)) continue;
+      if (comparable(parent.textContent ?? "") === words) {
+        parent.setAttribute(MARK, ref);
+        parent.setAttribute(TAGGED, "");
+        parent.removeAttribute(AUTO);
+      } else runs.push({ node, ref, whole: true });
+      continue;
+    }
+    // Rich text: the tag sits in its last paragraph, so the value is the nearest element holding all its words.
+    let el: Element | null = parent;
+    for (let i = 0; el && i < 8; i++, el = el.parentElement) {
+      if (comparable(el.textContent ?? "") === value) {
+        el.setAttribute(MARK, ref);
+        el.setAttribute(TAGGED, "");
+        el.removeAttribute(AUTO);
+        break;
+      }
+    }
+    // The value with other words around it in one run: shown, but only the side panel can change it.
+    if (!el && words.includes(value)) runs.push({ node, ref, whole: false });
+  }
+  for (const el of Array.from(document.querySelectorAll(TEXT_ATTRS.map((a) => `[${a}]`).join(",")))) {
+    for (const a of TEXT_ATTRS) {
+      const v = el.getAttribute(a);
+      if (!v || !mayHaveTag(v)) continue;
+      const { clean, tags } = readTags(v);
+      el.setAttribute(a, clean);
+      // A photo's tag is in its alt text: the photo itself is the place.
+      if (a === "alt" && el.tagName === "IMG" && tags.length === 1 && !el.closest(`[${MARK}]:not([${TAGGED}]):not([${AUTO}])`)) {
+        el.setAttribute(MARK, tags[0]!.ref);
+        el.setAttribute(TAGGED, "");
+      }
+    }
+  }
+  if (mayHaveTag(document.title)) document.title = stripTags(document.title);
+  return runs;
+}
+
+/**
+ * Marks the page's copy from the index: the deepest element whose words are exactly one value gets MARK, and a bare
+ * run of text that is one value, in an element that holds other elements too, comes back as a text mark. Elements
+ * the site marked itself, and everything inside them, are left as they are.
+ */
+function markPage(index: Map<string, string>): TextMark[] {
+  for (const el of Array.from(document.querySelectorAll(`[${AUTO}]`))) {
+    el.removeAttribute(MARK);
+    el.removeAttribute(AUTO);
+  }
+  const texts: TextMark[] = [];
+  if (!index.size) return texts;
+  const max = longest(index);
+  const words = (n: Node) => comparable(n.textContent ?? "");
+  const visit = (el: Element) => {
+    if (SKIP.has(el.tagName) || el.hasAttribute(MARK) || el.shadowRoot) return;
+    const w = words(el);
+    if (!w) return;
+    if (w.length <= max) {
+      const ref = index.get(w);
+      if (ref && !Array.from(el.children).some((c) => words(c) === w)) {
+        el.setAttribute(MARK, ref);
+        el.setAttribute(AUTO, "");
+        return;
+      }
+    }
+    for (const child of Array.from(el.childNodes)) {
+      if (child instanceof Element) visit(child);
+      else if (child instanceof Text) {
+        const ref = index.get(words(child));
+        if (ref) texts.push({ node: child, ref, whole: true });
+      }
+    }
+  };
+  visit(document.body);
+  return texts;
+}
+
+const marked = (t: EventTarget | null) => (t instanceof Element ? t.closest(`[${MARK}]`) : null);
+
+/**
+ * The client half of VisualEditing. Talks only to the window that showed it (the frame's parent, or the window that
+ * opened it where the page has its own window) and only at the signed admin origin.
+ */
+export function VisualBridge({ adminOrigin, kit, copy }: { adminOrigin: string; kit: string; copy: CopyText[] }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const target = useRef<Window | null>(null);
+  // The path and refs last reported, so a page isn't reported twice (Strict Mode, marking again that found nothing new).
+  const reported = useRef<{ path: string; refs: string } | null>(null);
+  const routerRef = useRef(router);
+  // What Site Manager said, kept outside the effect: React may set the bridge up again (Strict Mode, Fast Refresh)
+  // without Site Manager saying it twice.
+  const said = useRef({ editable: new Map<string, Editable>(), editing: false });
+  const texts = useRef<TextMark[]>([]);
+  // Runs of text an exact tag named. Their tags are gone once read, so they're kept until they leave the page.
+  const tagRuns = useRef<TextMark[]>([]);
+  const words = useRef(copy);
+  const preview = useRef(new LivePreview());
+  // Set up by the main effect: marks the page again and reports it when its refs changed.
+  const rescan = useRef<() => void>(() => {});
+  useEffect(() => {
+    routerRef.current = router;
+  }, [router]);
+
+  useEffect(() => {
+    target.current = window.parent !== window ? window.parent : window.opener;
+    if (!target.current) return;
+    const send = (m: KitMessage) => target.current?.postMessage(m, adminOrigin);
+    const { editable } = said.current;
+    const overlay = makeOverlay();
+    const bar = makeFormatBar(
+      () => finish(true),
+      (m) => toggleMark(m),
+      () => {
+        // Puts the words back as they were and lets Site Manager open the same value in its side panel.
+        if (!active) return;
+        const ref = active.ref;
+        finish(false);
+        send({ bp: 1, type: "expand", ref });
+      },
+    );
+    const listBar = makeListBar();
+    // The lists Site Manager said are on the page, and where each shown item is, found again after each scan.
+    let lists: PageList[] = [];
+    let items: { el: Element; path: string; index: number; actions: ListAction[] }[] = [];
+    const placeItems = () => {
+      const elementOf = (ref: string) => targetsOf(ref).map((t) => (t instanceof Element ? t : t.parentElement)).filter((e): e is Element => !!e);
+      items = lists.flatMap((l) => {
+        const shown = l.items.slice(0, Math.min(l.shown, l.items.length));
+        return shown.flatMap((it, index) => {
+          const mine = it.refs.flatMap(elementOf);
+          const others = shown.filter((_, n) => n !== index).flatMap((o) => o.refs.flatMap(elementOf));
+          const el = itemElement(mine, others);
+          const actions = actionsFor(l, index);
+          return el && actions.length ? [{ el, path: l.path, index, actions }] : [];
+        });
+      });
+    };
+    let selected: Element | null = null;
+    let selectedRun: TextMark | null = null;
+    // run: a heading's words beside its accent, edited in a span put in for the edit; the page's own node goes back after.
+    let active: {
+      el: HTMLElement;
+      ref: string;
+      before: string;
+      maxLength: number;
+      // A formatted value: before is its HTML, Enter makes a new paragraph, and the bar is shown.
+      rich?: boolean;
+      // A heading edited as a copy of its element beside the hidden original, which React keeps owning.
+      heading?: { original: HTMLElement; restore: () => void; template: HTMLElement; marks: Mark[] };
+      run?: { node: Text; lead: string; trail: string; original: string };
+    } | null = null;
+    let flash = 0;
+    let pending = 0;
+    // Values with unsaved drafts (from Site Manager) and the value Tab last moved to.
+    let draftRefs: string[] = [];
+    // Photos shown in place of a value's photo while one is chosen, with what they showed before.
+    const photos = new Map<HTMLImageElement, { src: string; srcset: string | null }>();
+    let focused: Target | null = null;
+
+    rescan.current = () => {
+      // Never while someone is typing: the words they're changing no longer match the value.
+      if (active || preview.current.active) return;
+      const path = location.pathname + location.search;
+      const values = new Map(words.current.map((c) => [`copy/${c.k}`, comparable(c.t)] as const));
+      tagRuns.current = [...tagRuns.current.filter((m) => m.node.isConnected), ...readPageTags(values)];
+      // Values found by their tag aren't looked for by their words too.
+      const tagged = new Set([...Array.from(document.querySelectorAll(`[${TAGGED}]`), (el) => el.getAttribute(MARK)), ...tagRuns.current.map((m) => m.ref)]);
+      const index = new Map([...matchIndex(words.current, location.pathname)].filter(([, ref]) => !tagged.has(ref)));
+      texts.current = [...tagRuns.current, ...markPage(index)];
+      drawDots();
+      placeItems();
+      const refs = collectRefs([...Array.from(document.querySelectorAll(`[${MARK}]`), (el) => el.getAttribute(MARK)), ...texts.current.map((t) => t.ref)]);
+      const last = reported.current;
+      const now = { path, refs: refs.join("\n") };
+      if (last && last.path === now.path && last.refs === now.refs) return;
+      send(last === null ? { bp: 1, type: "ready", kit, path, refs } : { bp: 1, type: "navigated", path, refs });
+      reported.current = now;
+    };
+
+    // Content the page shows after it loads (tabs, accordions, a refresh with new drafts) is marked too.
+    const observer = new MutationObserver(() => {
+      clearTimeout(pending);
+      pending = window.setTimeout(() => rescan.current(), 250);
+    });
+    observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+
+    // Every place a value shows: its marked elements and its runs of text.
+    const targetsOf = (ref: string): Target[] => [
+      ...Array.from(document.querySelectorAll(`[${MARK}="${CSS.escape(ref)}"]`)),
+      ...texts.current.filter((m) => m.ref === ref && m.node.isConnected).map((m) => m.node),
+    ];
+    function drawDots() {
+      overlay.dots(draftRefs.flatMap(targetsOf));
+    }
+    // The values that can be changed, in page order, for Tab.
+    const ordered = (): { t: Target; ref: string }[] => {
+      const all = [
+        ...Array.from(document.querySelectorAll(`[${MARK}]`), (el) => ({ t: el as Target, ref: el.getAttribute(MARK) ?? "" })),
+        ...texts.current.filter((m) => m.node.isConnected).map((m) => ({ t: m.node as Target, ref: m.ref })),
+      ].filter((x) => editable.has(x.ref));
+      return all.sort((a, b) => (a.t.compareDocumentPosition(b.t) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
+    };
+    const known = (el: Element | null) => (el && editable.has(el.getAttribute(MARK) ?? "") ? el : null);
+    const textAt = (e: MouseEvent): TextMark | null => {
+      const within = e.target instanceof Element ? e.target : null;
+      if (!within) return null;
+      for (const m of texts.current) {
+        if (!m.node.isConnected || !editable.has(m.ref) || !within.contains(m.node)) continue;
+        const range = document.createRange();
+        range.selectNodeContents(m.node);
+        for (const r of Array.from(range.getClientRects())) {
+          if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) return m;
+        }
+      }
+      return null;
+    };
+    const textFor = (ref: string) => texts.current.find((m) => m.ref === ref && m.node.isConnected)?.node ?? null;
+    // Every plain text place a value shows: marked elements that hold only text, and its bare runs of text. A marked
+    // element with other elements inside (rich text, a link with an icon) isn't previewed; it changes on save.
+    const placesOf = (ref: string): Text[][] => [
+      ...Array.from(document.querySelectorAll(`[${MARK}="${CSS.escape(ref)}"]`))
+        .filter((el) => el.children.length === 0)
+        .map((el) => Array.from(el.childNodes).filter((n): n is Text => n instanceof Text)),
+      ...texts.current.filter((m) => m.ref === ref && m.node.isConnected).map((m) => [m.node]),
+    ];
+
+    const finish = (commit: boolean) => {
+      if (!active) return;
+      const { el, before, ref, run, rich, heading } = active;
+      active = null;
+      bar.hide();
+      el.removeAttribute("contenteditable");
+      const text = (el.textContent ?? "").trim();
+      if (heading) {
+        bar.hide();
+        const value = fromMarkedRuns(runsIn(el));
+        el.remove();
+        heading.restore();
+        // Site Manager saves and refreshes the page, which shows the new words in the page's own element.
+        send(commit ? { bp: 1, type: "commit", ref, text: value.text, accents: value.accents, strong: value.strong, em: value.em } : { bp: 1, type: "cancel", ref });
+        overlay.hide();
+        return;
+      }
+      if (rich) {
+        bar.hide();
+        if (commit) send({ bp: 1, type: "commit", ref, text, html: stripTags(el.innerHTML) });
+        else {
+          // Formatted values come from the site's HTML, which a refresh sets again, so putting it back is safe.
+          el.innerHTML = before;
+          send({ bp: 1, type: "cancel", ref });
+        }
+        overlay.hide();
+        return;
+      }
+      if (run) {
+        // The page's own node goes back with the words, so React still owns it and the saved draft reaches it.
+        run.node.nodeValue = commit ? run.lead + text + run.trail : run.original;
+        el.replaceWith(run.node);
+      } else if (!commit) el.textContent = before;
+      send(commit ? { bp: 1, type: "commit", ref, text } : { bp: 1, type: "cancel", ref });
+      overlay.hide();
+    };
+
+    // mousemove, not mouseover: a run of text shares its element with others, so moving within it matters.
+    const onMove = (e: MouseEvent) => {
+      if (!said.current.editing || active) return;
+      // The innermost list item under the pointer gets its buttons.
+      const t = e.target instanceof Node ? e.target : null;
+      const item = t ? items.filter((i) => i.el.contains(t)).sort((a, b) => (a.el.contains(b.el) ? 1 : -1))[0] : undefined;
+      if (item) listBar.show(item.el, item.actions, (action) => send({ bp: 1, type: "listAction", path: item.path, index: item.index, action }));
+      else if (!listBar.over()) listBar.hide();
+      const el = known(marked(e.target));
+      const text = el ? null : textAt(e);
+      const ref = el ? el.getAttribute(MARK) : text?.ref;
+      if (!ref) return overlay.hide();
+      // The value's own name tells people what they're about to change; "Click to edit" for an older Site Manager.
+      overlay.show(el ?? text!.node, editable.get(ref)?.label ?? "Click to edit");
+    };
+    const onClick = (e: MouseEvent) => {
+      if (!said.current.editing) return;
+      if (active && active.el.contains(e.target as Node)) return;
+      // Edit mode: a link or button never acts, whether or not its words can be changed.
+      if (blocksActivation(e.target)) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      const el = known(marked(e.target));
+      const text = el ? null : textAt(e);
+      const ref = el ? (el.getAttribute(MARK) ?? "") : text?.ref;
+      if (!ref) return;
+      e.preventDefault();
+      e.stopPropagation();
+      choose(ref, el, text);
+    };
+    const choose = (ref: string, el: Element | null, text: TextMark | null) => {
+      selected = el;
+      selectedRun = text;
+      const r = rectOf(el ?? text!.node);
+      send({
+        bp: 1,
+        type: "select",
+        ref,
+        rect: { x: r.left, y: r.top, w: r.width, h: r.height },
+        // A run that is the value's words alone edits in place too; one with other words around it opens the panel.
+        plain: el ? el.children.length === 0 : text!.whole,
+      });
+    };
+    const onSubmit = (e: SubmitEvent) => {
+      if (!said.current.editing) return;
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const onKey = (e: KeyboardEvent) => {
+      const mod = e.ctrlKey || e.metaKey;
+      if (!active && mod && (e.key === "z" || e.key === "Z" || e.key === "y")) {
+        // Undo and redo belong to Site Manager's history of this page's edits, not the page.
+        e.preventDefault();
+        send({ bp: 1, type: "key", key: e.key === "y" || e.shiftKey ? "redo" : "undo" });
+        return;
+      }
+      if (!active && said.current.editing && e.key === "Tab") {
+        // Tab moves between the values on the page instead of the page's links.
+        const list = ordered();
+        if (!list.length) return;
+        e.preventDefault();
+        const at = focused ? list.findIndex((x) => x.t === focused) : -1;
+        const next = list[(at + (e.shiftKey ? -1 : 1) + list.length) % list.length]!;
+        focused = next.t;
+        (next.t instanceof Element ? next.t : next.t.parentElement)?.scrollIntoView({ block: "nearest" });
+        overlay.show(next.t, `${editable.get(next.ref)?.label ?? "Value"}: Enter to edit`);
+        return;
+      }
+      if (!active && said.current.editing && focused && e.key === "Enter" && focused.isConnected) {
+        e.preventDefault();
+        e.stopPropagation();
+        const t = focused;
+        const run = t instanceof Text ? (texts.current.find((m) => m.node === t) ?? null) : null;
+        const el = t instanceof Element ? t : null;
+        const ref = el ? el.getAttribute(MARK) : run?.ref;
+        if (ref) choose(ref, el, run);
+        return;
+      }
+      if (!active && focused && e.key === "Escape") {
+        focused = null;
+        overlay.hide();
+        return;
+      }
+      if (!active && said.current.editing && (e.key === "Enter" || e.key === " ") && blocksActivation(e.target)) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      if (!active || !active.el.contains(e.target as Node)) return;
+      if (active.heading) {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          finish(true);
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          finish(false);
+        } else if (mod && e.key === "e" && active.heading.marks.includes("accent")) {
+          e.preventDefault();
+          toggleMark("accent");
+        } else if (mod && e.key === "b") {
+          // Never the browser's own bold, which would type markup the value doesn't keep.
+          e.preventDefault();
+          if (active.heading.marks.includes("strong")) toggleMark("strong");
+        } else if (mod && e.key === "i") {
+          // The same for italic: only the value's own mark, never the browser's markup.
+          e.preventDefault();
+          if (active.heading.marks.includes("em")) toggleMark("em");
+        }
+        return;
+      }
+      if (active.rich) {
+        // Enter starts a new paragraph; Ctrl+Enter saves, Escape cancels.
+        if (e.key === "Enter" && mod) {
+          e.preventDefault();
+          finish(true);
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          finish(false);
+        } else if (mod && (e.key === "b" || e.key === "i")) {
+          e.preventDefault();
+          document.execCommand(e.key === "b" ? "bold" : "italic");
+        }
+        return;
+      }
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        finish(true);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        finish(false);
+      }
+    };
+    const onBeforeInput = (e: InputEvent) => {
+      if (!active || active.rich || !active.el.contains(e.target as Node) || !e.inputType.startsWith("insert")) return;
+      if (e.inputType === "insertParagraph" || e.inputType === "insertLineBreak") {
+        e.preventDefault();
+        return;
+      }
+      const adding = (e.data ?? e.dataTransfer?.getData("text/plain") ?? "").length;
+      const replacing = getSelection()?.toString().length ?? 0;
+      if ((active.el.textContent ?? "").length - replacing + adding > active.maxLength) e.preventDefault();
+    };
+    const onInput = (e: Event) => {
+      if (active && e.target === active.el) send({ bp: 1, type: "typing", ref: active.ref, text: (active.el.textContent ?? "").trim() });
+    };
+    const onBlur = (e: FocusEvent) => {
+      // The Link button asks for an address, which takes focus for a moment; that isn't leaving the edit.
+      if (active && e.target === active.el && !bar.busy()) finish(true);
+    };
+    // The words being edited as runs: inside an accent element is gold, inside <strong> is important.
+    const runsIn = (root: HTMLElement): MarkedRun[] => {
+      const runs: MarkedRun[] = [];
+      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+      for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+        const p = n.parentElement && n.parentElement !== root ? n.parentElement : null;
+        const within = (sel: string) => {
+          const hit = p?.closest(sel);
+          return !!hit && root.contains(hit) && hit !== root;
+        };
+        runs.push({ text: n.nodeValue ?? "", accent: within("[data-bp-accent]"), strong: within("strong, b"), em: within("em, i") });
+      }
+      return runs;
+    };
+    // Lays the runs into the editing copy: important words in <strong>, gold ones in copies of the page's own accent
+    // element so they look the same.
+    const layRuns = (root: HTMLElement, template: HTMLElement, runs: MarkedRun[]) => {
+      root.replaceChildren(
+        ...runs.map((r) => {
+          let node: Node = document.createTextNode(r.text);
+          if (r.accent) {
+            const a = template.cloneNode(false) as HTMLElement;
+            a.setAttribute("data-bp-accent", "");
+            a.append(node);
+            node = a;
+          }
+          if (r.em) {
+            const i = document.createElement("em");
+            i.append(node);
+            node = i;
+          }
+          if (r.strong) {
+            const b = document.createElement("strong");
+            b.append(node);
+            node = b;
+          }
+          return node;
+        }),
+      );
+    };
+    // Character offset of a point in the editing copy, so the selection survives laying the runs again.
+    const offsetOf = (root: HTMLElement, node: Node, at: number): number => {
+      let total = 0;
+      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+      for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+        if (n === node) return total + at;
+        total += (n.nodeValue ?? "").length;
+      }
+      return node === root ? (at === 0 ? 0 : total) : total;
+    };
+    const pointAt = (root: HTMLElement, offset: number): [Node, number] => {
+      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+      let last: Node = root;
+      for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+        const len = (n.nodeValue ?? "").length;
+        if (offset <= len) return [n, offset];
+        offset -= len;
+        last = n;
+      }
+      return [last, last === root ? 0 : (last.nodeValue ?? "").length];
+    };
+    function toggleMark(mark: Mark) {
+      if (!active?.heading || !active.heading.marks.includes(mark)) return;
+      const el = active.el;
+      const sel = getSelection();
+      if (!sel || sel.rangeCount === 0) return;
+      const range = sel.getRangeAt(0);
+      if (!el.contains(range.commonAncestorContainer)) return;
+      const start = offsetOf(el, range.startContainer, range.startOffset);
+      const end = offsetOf(el, range.endContainer, range.endOffset);
+      if (end <= start) return;
+      const value = fromMarkedRuns(runsIn(el));
+      const text = value.text;
+      const current = mark === "accent" ? value.accents : mark === "strong" ? value.strong : value.em;
+      const flags = Array.from(text, (_, i) => current.some(([s, e]) => i >= s && i < e));
+      // Like Bold in any editor: all marked already turns plain, anything else turns marked.
+      const all = flags.slice(start, end).every(Boolean);
+      for (let i = start; i < end; i++) flags[i] = !all;
+      const next: [number, number][] = [];
+      flags.forEach((f, i) => {
+        if (!f) return;
+        const last = next[next.length - 1];
+        if (last && last[1] === i) last[1] = i + 1;
+        else next.push([i, i + 1]);
+      });
+      const marks = { accents: value.accents, strong: value.strong, em: value.em, [mark === "accent" ? "accents" : mark]: next };
+      layRuns(el, active.heading.template, markedRuns(text, marks));
+      const [sn, so] = pointAt(el, start);
+      const [en, eo] = pointAt(el, end);
+      const r = document.createRange();
+      r.setStart(sn, so);
+      r.setEnd(en, eo);
+      sel.removeAllRanges();
+      sel.addRange(r);
+      send({ bp: 1, type: "typing", ref: active.ref, text });
+    }
+    const startInlineHeading = (ref: string, maxLength: number, text: string, accents: [number, number][], strong: [number, number][], marks: Mark[], em: [number, number][] = []): void => {
+      if (active) return;
+      const original = selected?.getAttribute(MARK) === ref && selected.isConnected ? selected : document.querySelector(`[${MARK}="${CSS.escape(ref)}"]`);
+      // A heading not yet converted is words beside its separate accent value: those words edit in place as before.
+      if (!(original instanceof HTMLElement) || (selectedRun?.ref === ref && selected !== original)) return startInline(ref, maxLength);
+      // The page's own accent element (the first element the gold words sit in) is the look for every gold run.
+      const shown = normalizeAccents(text, accents) ?? [];
+      let template: HTMLElement | null = null;
+      if (shown.length) {
+        let at = 0;
+        const walker = document.createTreeWalker(original, NodeFilter.SHOW_TEXT);
+        for (let n = walker.nextNode(); n && !template; n = walker.nextNode()) {
+          const len = (n.nodeValue ?? "").length;
+          if (shown.some(([s, e]) => at < e && at + len > s) && n.parentElement && n.parentElement !== original) {
+            let t: HTMLElement = n.parentElement;
+            while (t.parentElement && t.parentElement !== original) t = t.parentElement;
+            template = t;
+          }
+          at += len;
+        }
+      }
+      if (!template) {
+        // No gold words yet: an accent shows in the highlight color until the page refreshes with the site's own.
+        template = document.createElement("span");
+        template.style.color = "Highlight";
+      }
+      const copy = original.cloneNode(false) as HTMLElement;
+      copy.removeAttribute("id");
+      copy.removeAttribute(MARK);
+      copy.removeAttribute(TAGGED);
+      copy.removeAttribute(AUTO);
+      layRuns(copy, template, markedRuns(text, { accents: shown, strong, em }));
+      let restore: () => void;
+      if (original.parentElement?.closest(ACTIVATES)) {
+        // Inside a button or link the browser won't select words and a click would press it, so the words are edited in
+        // a copy floating exactly over them, with the same look, while the original keeps its place.
+        floatOver(copy, original);
+        document.body.append(copy);
+        const visibility = original.style.visibility;
+        original.style.visibility = "hidden";
+        restore = () => {
+          original.style.visibility = visibility;
+        };
+      } else {
+        const display = original.style.display;
+        original.after(copy);
+        original.style.display = "none";
+        restore = () => {
+          original.style.display = display;
+        };
+      }
+      active = { el: copy, ref, before: text, maxLength, heading: { original, restore, template, marks } };
+      copy.setAttribute("contenteditable", "true");
+      copy.focus();
+      const range = document.createRange();
+      range.selectNodeContents(copy);
+      getSelection()?.removeAllRanges();
+      getSelection()?.addRange(range);
+      overlay.show(copy, `Select words, then ${marks.map((m) => (m === "accent" ? "Accent for gold" : m === "strong" ? "B for bold" : "I for italic")).join(", ")}. Enter to save, Esc to cancel`);
+      bar.show(copy, "heading", marks);
+    };
+    const startInlineRich = (ref: string) => {
+      if (active) return;
+      const el = selected?.getAttribute(MARK) === ref && selected.isConnected ? selected : document.querySelector(`[${MARK}="${CSS.escape(ref)}"]`);
+      if (!(el instanceof HTMLElement)) return;
+      active = { el, ref, before: el.innerHTML, maxLength: LIMITS_TEXT, rich: true };
+      el.setAttribute("contenteditable", "true");
+      el.focus();
+      overlay.show(el, "Ctrl+Enter to save, Esc to cancel");
+      bar.show(el, "rich");
+    };
+
+    const startInline = (ref: string, maxLength: number): void => {
+      if (active) return;
+      // Words inside a button or link (a step title, a tab) are edited in a floating copy; see startInlineHeading.
+      const marked = selected?.getAttribute(MARK) === ref && selected.isConnected ? selected : document.querySelector(`[${MARK}="${CSS.escape(ref)}"]`);
+      if (marked instanceof HTMLElement && marked.children.length === 0 && marked.parentElement?.closest(ACTIVATES)) {
+        return startInlineHeading(ref, maxLength, (marked.textContent ?? "").trim(), [], [], []);
+      }
+      const run = selectedRun?.ref === ref && selectedRun.whole && selectedRun.node.isConnected ? selectedRun : null;
+      let el: Element | null;
+      if (run) {
+        const original = run.node.nodeValue ?? "";
+        const span = document.createElement("span");
+        span.textContent = original.trim();
+        run.node.replaceWith(span);
+        el = span;
+        active = {
+          el: span,
+          ref,
+          before: span.textContent,
+          maxLength,
+          run: { node: run.node, lead: /^\s*/.exec(original)![0], trail: /\s*$/.exec(original)![0], original },
+        };
+      } else {
+        el = selected?.getAttribute(MARK) === ref && selected.isConnected ? selected : document.querySelector(`[${MARK}="${CSS.escape(ref)}"]`);
+        if (!(el instanceof HTMLElement) || el.children.length > 0) return;
+        active = { el, ref, before: el.textContent ?? "", maxLength };
+      }
+      if (!(el instanceof HTMLElement)) return;
+      el.setAttribute("contenteditable", "plaintext-only");
+      el.focus();
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      getSelection()?.removeAllRanges();
+      getSelection()?.addRange(range);
+      overlay.show(el, "Enter to save, Esc to cancel");
+      bar.show(el, "plain");
+    };
+
+    const onMessage = (e: MessageEvent) => {
+      const m = adminMessageFrom(e, target.current, adminOrigin);
+      if (!m) return;
+      switch (m.type) {
+        case "hello":
+          editable.clear();
+          for (const item of m.editable) editable.set(item.ref, item);
+          return;
+        case "mode":
+          said.current.editing = m.editing;
+          if (!m.editing) {
+            finish(true);
+            overlay.hide();
+          }
+          return;
+        case "inline":
+          startInline(m.ref, m.maxLength);
+          return;
+        case "inlineRich":
+          startInlineRich(m.ref);
+          return;
+        case "inlineHeading":
+          startInlineHeading(m.ref, m.maxLength, m.text, m.accents, m.strong ?? [], m.marks ?? ["accent", "strong"], m.em ?? []);
+          return;
+        case "refresh":
+          // The saved words arrive with the refresh, in the same nodes, so the preview is let go, not undone.
+          preview.current.forget();
+          routerRef.current.refresh();
+          return;
+        case "navigate":
+          preview.current.restoreAll();
+          routerRef.current.push(m.path);
+          return;
+        case "saved":
+          // The page already shows these words: keep them, and match them from now on.
+          preview.current.keep(m.ref);
+          words.current = words.current.map((c) => (`copy/${c.k}` === m.ref ? { ...c, t: m.text } : c));
+          rescan.current();
+          return;
+        case "drafts":
+          draftRefs = m.refs;
+          drawDots();
+          return;
+        case "lists":
+          lists = m.lists;
+          placeItems();
+          return;
+        case "previewImage": {
+          const imgs = Array.from(document.querySelectorAll(`img[${MARK}="${CSS.escape(m.ref)}"]`)) as HTMLImageElement[];
+          for (const img of imgs) {
+            if (m.url === null) {
+              const was = photos.get(img);
+              if (was) {
+                if (was.srcset !== null) img.setAttribute("srcset", was.srcset);
+                img.src = was.src;
+                photos.delete(img);
+              }
+            } else {
+              if (!photos.has(img)) photos.set(img, { src: img.src, srcset: img.getAttribute("srcset") });
+              // The site's own sizes point at the old photo, so the chosen one shows at its own address.
+              img.removeAttribute("srcset");
+              img.src = m.url;
+            }
+          }
+          return;
+        }
+        case "preview":
+          if (m.text === null) {
+            preview.current.restore(m.ref);
+            rescan.current();
+          } else if (editable.has(m.ref)) {
+            preview.current.show(m.ref, m.text, () => placesOf(m.ref));
+          }
+          return;
+        case "focus": {
+          const t: Target | null = document.querySelector(`[${MARK}="${CSS.escape(m.ref)}"]`) ?? textFor(m.ref);
+          if (!t) return;
+          (t instanceof Element ? t : t.parentElement)?.scrollIntoView({ block: "center", behavior: "smooth" });
+          overlay.show(t, "Changed");
+          clearTimeout(flash);
+          flash = window.setTimeout(() => {
+            if (!active) overlay.hide();
+          }, 2000);
+          return;
+        }
+      }
+    };
+
+    addEventListener("message", onMessage);
+    document.addEventListener("mousemove", onMove, true);
+    document.addEventListener("click", onClick, true);
+    document.addEventListener("submit", onSubmit, true);
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("beforeinput", onBeforeInput, true);
+    document.addEventListener("input", onInput, true);
+    document.addEventListener("blur", onBlur, true);
+    return () => {
+      removeEventListener("message", onMessage);
+      document.removeEventListener("mousemove", onMove, true);
+      document.removeEventListener("click", onClick, true);
+      document.removeEventListener("submit", onSubmit, true);
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("beforeinput", onBeforeInput, true);
+      document.removeEventListener("input", onInput, true);
+      document.removeEventListener("blur", onBlur, true);
+      observer.disconnect();
+      preview.current.restoreAll();
+      clearTimeout(flash);
+      clearTimeout(pending);
+      rescan.current = () => {};
+      overlay.destroy();
+      bar.destroy();
+      listBar.destroy();
+    };
+  }, [adminOrigin, kit]);
+
+  // After each move within the site, and when a refresh brings new words, mark the page and say which values it has.
+  // Effects run once the new page is in the document. Not in requestAnimationFrame: browsers pause that in background
+  // tabs, and the editor would give up waiting.
+  useEffect(() => {
+    words.current = copy;
+    // A new page or freshly saved words: anything previewed is gone or now real.
+    preview.current.forget();
+    rescan.current();
+  }, [pathname, copy]);
+
+  return null;
+}