@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/canvas/canvas.component.tsx

@@ -0,0 +1,2038 @@
+// Smart widget: the PREVIEW — an IFRAME onto the page's real path + ?previewToken, and the
+// SELECTION OVERLAY drawn on top of it.
+// Full realm isolation by design (the user's constructor experience: shared modules + shared
+// memory inevitably collide): the iframe runs the REAL bootstrap with its own System/react/DI/
+// caches, and the same URL is shareable with other observers.
+//
+// The edited tree reaches it LIVE, over the same channel: the preview's page manager is handed the
+// new tree and the application re-renders around it. The frame is rebuilt only when a block needs
+// a module the running realm never loaded — everything else, including every keystroke in the
+// settings panel, arrives without a reload.
+//
+// The overlay lives HERE, in the editor's own document — never inside the previewed application,
+// whose UI and stacking context it would otherwise have to fight. It is a pointer-transparent
+// layer: hovering and clicking happen in the iframe, where the agent hit-tests the real DOM and
+// reports back over a MessageChannel. Boxes arrive in the iframe's viewport coordinates, which is
+// exactly this layer's coordinate space.
+import { defineComponentSide, markInternalTile } from '@mosetta/react';
+import { useComponent, useIsPreviewMode } from '@mosetta/react';
+import { RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import type { ReactNode } from 'react';
+import { DEFAULT_SLOT, editingSessionHubOf, findNodeDoc, IInsertionPoint, IBlueprintNodeDoc, IPageDoc, unitOf } from '@mosetta/content';
+import type { ContentKind } from '@mosetta/content';
+import { useServerAction } from '@mosetta/react/server-action';
+import { EServerActionStart } from '@mosetta/server-action/client';
+import { createPageDraftToken, listPagesToken, publishPageToken } from '../content/contentCommon';
+import { TILES_HOLDER_TOKEN } from '@mosetta/runtime/client';
+import { PublishModal } from '../content/publishModal';
+import { UpdatesModal, upgradeKey } from '../content/updatesModal';
+import { upgradeChanges, upgradeGroups, useUpgrades, withLatestTools } from '../content/blockUpgrades';
+import '../content/workbenchScale.css';
+import './canvas.css';
+import { useCanvasEditingSession } from '../content/useEditingSession';
+import { useCtrlHeld } from '../content/useCtrlHeld';
+import { parseBlocks, serializeBlocks } from '../content/editingClipboard';
+import { blocksLabel, noticesOf } from '../content/editingNotices';
+import { ensureEditorViews, ensureSettingsDraft } from '../content/settingsDraft';
+import { useFeedProjectConfig } from '../content/projectConfig';
+import { ChromeCard, chromeFaceOf, PageSettingsIcon, useChromeNodes } from './providerChrome';
+import type { IChromeNode } from './chromeNodes';
+import { SettingsPopover } from './settingsPopover';
+import { EDITOR_TOOLS_TOKEN, toolLabelOf } from './canvasTools';
+import { ToolPanel } from './toolPanel';
+import type { IPopoverContent } from './settingsPopover';
+import { InsertPopover } from './insertPopover';
+import { TooltipHost } from '../content/tooltips';
+import { placePopover, seamOf } from './popoverPlacement';
+import { outOfSight, scrollWatch } from './scrollWatch';
+import { axisAmong, TAG_HEIGHT, type TAxis } from './ghosts';
+import { readPopoverSize, writePopoverSize, type IPopoverSize } from './popoverSize';
+import { ensureSettingsPanels } from '../content/nodeSettings';
+import { ensureRefsEditing } from '../content/refsEditing';
+import { watchArrivals } from '../content/autoBind';
+import { useDi, useDiOptional } from '@mosetta/react';
+import { DI_CONTAINER_TOKEN } from '@mosetta/di';
+import { DOCK_TAB_TOKEN } from '@mosetta/ui';
+import { WORKSPACE_TOKEN } from '../workbench/workspace';
+import { useFeedPrefabTrees, useProjectPrefabs } from '../content/projectPrefabs';
+import { isPartId, prefabPartOf } from '../content/prefabParts';
+import {
+  INodeBox,
+  isPreviewHello,
+  ISlotBox,
+  LANDING_NODE_ID,
+  PREVIEW_PORT,
+  PREVIEW_PROTOCOL_VERSION,
+  previewBridgeIdOf,
+  TPreviewCommand,
+  TPreviewEvent,
+} from '../previewBridge/previewBridgeCommon';
+
+const shortName = (reference: string) => /_n_(.+?)_v_/.exec(reference)?.[1] ?? reference;
+
+const noSubscription = (): (() => void) => () => undefined;
+const noState = (): null => null;
+
+/** how a place is named on screen — the block that opened it and the slot, default one included */
+const slotLabel = (owner: string, slot: string) => `${owner}#${slot}`;
+
+/** the window's localStorage, or null where reading it throws (blocked site data, sandboxing) */
+function localStorageOrNull(): Storage | null {
+  try {
+    return typeof localStorage === 'undefined' ? null : localStorage;
+  } catch {
+    return null;
+  }
+}
+
+/** every module a tree names — the set a realm has to hold already to be able to render it */
+function referencesOf(node: IBlueprintNodeDoc | IPageDoc | null): string[] {
+  if (!node) return [];
+  return (node.children ?? []).reduce<string[]>(
+    (all, child) => [...all, ...referencesOf(child)],
+    [node.reference],
+  );
+}
+
+/** the ids of the PREFAB nodes a tree places — the ones a live update can only re-expand from what is shown */
+function unitNodeIds(node: IBlueprintNodeDoc | IPageDoc): string[] {
+  return (node.children ?? []).reduce<string[]>(
+    (all, child) => [...all, ...(unitOf(child.reference) ? [child.id] : []), ...unitNodeIds(child)],
+    [],
+  );
+}
+
+/** the node holding `id`, or null for the root (and for an id the document does not know) */
+function parentOfNode(root: IPageDoc | IBlueprintNodeDoc, id: string): IBlueprintNodeDoc | null {
+  for (const child of root.children ?? []) {
+    if (child.id === id) return root;
+    const deeper = parentOfNode(child, id);
+    if (deeper) return deeper;
+  }
+  return null;
+}
+
+// The dock's "bring this panel forward" event. Spelled out rather than imported: the dock is a
+// block of another system (@mosetta/ui-kit-react) and the editor does not depend on it — the two
+// meet at a window event, which is the whole point of the dock exposing one.
+
+/** how often a panel being dragged is worth a fresh measurement of the page inside */
+const RESIZE_MEASURE_MS = 120;
+
+interface ICanvasSettings {
+  /**
+   * IGNORED since 2026-09-26: a "+" opens the canvas's own insert popover instead of bringing a
+   * palette panel forward. Kept in the type — pages composed before carry the value.
+   */
+  readonly paletteSlot?: string;
+}
+
+interface IPreviewLink {
+  /**
+   * The page is being scrolled: from its first move until a fresh measurement arrives (the agent
+   * measures once the page settles). Meanwhile what sits OUTSIDE the sliding layer — the settings
+   * card — stands where the page no longer is.
+   */
+  readonly scrolling: boolean;
+  readonly boxes: readonly INodeBox[];
+  readonly slots: readonly ISlotBox[];
+  /** the prefab nodes the realm shows expanded — null while no agent has said */
+  readonly units: ReadonlySet<string> | null;
+  /** the previewed page's own viewport — what "the right side of the page" means */
+  readonly viewport: { readonly width: number; readonly height: number } | null;
+  readonly hoveredId: string | null;
+  /** …and the prefab's own block under the pointer, when it is over one (prefabParts.ts) */
+  readonly hoveredPart: string | null;
+  /** the PREFABS' own blocks, each on its own — `boxes` has each prefab as one box */
+  readonly parts: readonly INodeBox[];
+  /** the Ctrl/Cmd state the hover was REPORTED with — the preview realm's side of the modifier */
+  readonly hoveredCtrl: boolean;
+  readonly connected: boolean;
+  readonly command: (command: TPreviewCommand) => void;
+  /** the frame itself — its size changes are the editor's own business, see useRemeasureOnResize */
+  readonly stageRef: RefObject<HTMLDivElement | null>;
+  /** the sliding layer INSIDE the clipping surface; scrolling moves it straight in the DOM */
+  readonly overlayRef: RefObject<HTMLDivElement | null>;
+  /** the frame itself — read every animation frame to follow its scroll without a message */
+  readonly frameRef: RefObject<HTMLIFrameElement | null>;
+}
+
+/**
+ * Geometry is only true while the frame is on screen at its final size. Panels get closed, resized
+ * and re-laid out around it, and none of that reaches the agent inside — so the editor watches its
+ * own stage and asks for a fresh measurement whenever it changes.
+ */
+function useRemeasureOnResize(
+  stage: RefObject<HTMLDivElement | null>,
+  connected: boolean,
+  command: (command: TPreviewCommand) => void,
+): void {
+  useEffect(() => {
+    const element = stage.current;
+    if (!element || !connected || typeof ResizeObserver === 'undefined') return undefined;
+    // Dragging a panel edge fires this every frame, and every one of them costs the preview a full
+    // measurement of the page — while the browser is re-laying that page out anyway. So: one
+    // measurement at the start of a drag, one after it stops, nothing in between. The outlines are
+    // briefly out of date mid-drag, which is the moment nobody is aiming at them.
+    let trailing: ReturnType<typeof setTimeout> | null = null;
+    let last = 0;
+    const observer = new ResizeObserver(() => {
+      const now = performance.now();
+      if (now - last > RESIZE_MEASURE_MS) {
+        last = now;
+        command({ t: 'measure' });
+      }
+      if (trailing !== null) clearTimeout(trailing);
+      trailing = setTimeout(() => {
+        last = performance.now();
+        command({ t: 'measure' });
+      }, RESIZE_MEASURE_MS);
+    });
+    observer.observe(element);
+    return () => {
+      if (trailing !== null) clearTimeout(trailing);
+      observer.disconnect();
+    };
+  }, [stage, connected, command]);
+}
+
+/** no measurement after a scroll (a cross-origin preview, a stalled agent): the scroll ends after this lull */
+const SCROLL_LULL_MS = 600;
+
+/** a slot with room takes another block; a full one offers nothing */
+const hasRoom = (slot: ISlotBox): boolean => slot.max === 'many' || slot.filled < slot.max;
+
+/**
+ * The editor's end of the preview conversation: waits for the agent's greeting, hands it one end
+ * of a fresh MessageChannel, and keeps the geometry it reports. Re-runs whenever the iframe is
+ * replaced (a new src/key means a new realm and a new agent).
+ */
+function usePreviewLink(
+  frameKey: string,
+  onPick: (nodeId: string | null, ctrl: boolean, part: string | null) => void,
+  onHover: (nodeId: string | null, part: string | null) => void,
+  onPointer: (x: number, y: number) => void,
+): IPreviewLink {
+  const [boxes, setBoxes] = useState<readonly INodeBox[]>([]);
+  const [parts, setParts] = useState<readonly INodeBox[]>([]);
+  const [slots, setSlots] = useState<readonly ISlotBox[]>([]);
+  // the prefab nodes the realm shows expanded; null until an agent says (or from one that cannot)
+  const [units, setUnits] = useState<ReadonlySet<string> | null>(null);
+  const [viewport, setViewport] = useState<{ width: number; height: number } | null>(null);
+  const [hovered, setHovered] = useState<{ id: string | null; part: string | null; ctrl: boolean }>({ id: null, part: null, ctrl: false });
+  const [connected, setConnected] = useState(false);
+  const [scrolling, setScrolling] = useState(false);
+  const portRef = useRef<MessagePort | null>(null);
+  const stageRef = useRef<HTMLDivElement | null>(null);
+  const frameRef = useRef<HTMLIFrameElement | null>(null);
+  const overlayRef = useRef<HTMLDivElement | null>(null);
+  // where the page stood when the boxes were measured — every scroll is read against it
+  const scrollBase = useRef({ x: 0, y: 0 });
+  // the pick handler changes with the session; the port must not be reopened for that
+  const pickRef = useRef(onPick);
+  pickRef.current = onPick;
+  const hoverRef = useRef(onHover);
+  hoverRef.current = onHover;
+  const pointerRef = useRef(onPointer);
+  pointerRef.current = onPointer;
+
+  useEffect(() => {
+    setBoxes([]);
+    setParts([]);
+    setSlots([]);
+    setViewport(null);
+    setHovered({ id: null, part: null, ctrl: false });
+    setConnected(false);
+    setScrolling(false);
+
+    // the page moved: scrolling until the measurement that follows it (scrollWatch.ts)
+    const scroll = scrollWatch(setScrolling, SCROLL_LULL_MS);
+
+    let slid = { x: 0, y: 0 };
+    const slide = (x: number, y: number): boolean => {
+      const layer = overlayRef.current;
+      if (!layer || (slid.x === x && slid.y === y)) return false; // nothing moved: no style to invalidate
+      slid = { x, y };
+      const { x: baseX, y: baseY } = scrollBase.current;
+      // written straight to the node: a react state update per scroll event would re-render every
+      // outline and every control, and that is precisely the cost that shows up as lag
+      layer.style.transform = x === baseX && y === baseY
+        ? ''
+        : `translate(${baseX - x}px, ${baseY - y}px)`;
+      return true;
+    };
+
+    /**
+     * The outlines have to move with the page, and a message cannot do that in time: the frame
+     * scrolls, its scroll event fires a frame later, the message arrives a task after that, and by
+     * then the page has moved again — the visible trailing.
+     *
+     * A SAME-ORIGIN frame can simply be read: once per animation frame, take its scroll position
+     * and slide the layer. Nothing is asked of the preview and nothing crosses the channel, so the
+     * overlay lands in the same frame the browser paints the scroll in. A cross-origin preview —
+     * a tenant's own subdomain, one day — cannot be read, and falls back to the messages below.
+     */
+    // window.requestAnimationFrame, not the bare global: this module reads and drives ANOTHER
+    // realm's frame, so it takes its timing from the window it was given (same lesson as building
+    // an event with the target's constructor)
+    let frameLoop = 0;
+    const follow = (): void => {
+      frameLoop = window.requestAnimationFrame(follow);
+      const view = frameRef.current?.contentWindow;
+      if (!view) return;
+      try {
+        if (slide(view.scrollX, view.scrollY)) scroll.moved();
+      } catch {
+        window.cancelAnimationFrame(frameLoop); // cross-origin: the messages take over
+        frameLoop = 0;
+      }
+    };
+    frameLoop = window.requestAnimationFrame(follow);
+    const onEvent = (event: TPreviewEvent): void => {
+      if (event.t === 'geometry') {
+        scrollBase.current = event.scroll;
+        slid = { x: NaN, y: NaN }; // the baseline moved — whatever is on the layer is stale
+        slide(event.scroll.x, event.scroll.y);
+        setBoxes(event.boxes);
+        setParts(event.parts ?? []);
+        setSlots(event.slots);
+        if (event.units) setUnits(new Set(event.units));
+        setViewport(event.viewport);
+        scroll.settled();
+      } else if (event.t === 'scroll') {
+        if (slide(event.x, event.y)) scroll.moved();
+      } else if (event.t === 'hover') {
+        setHovered({ id: event.nodeId, part: event.part ?? null, ctrl: event.ctrl ?? false });
+        hoverRef.current(event.nodeId, event.part ?? null);
+      } else if (event.t === 'pointer') {
+        // read against the measurement's own baseline — the space every box on the layer is in
+        pointerRef.current(event.x + event.scroll.x - scrollBase.current.x, event.y + event.scroll.y - scrollBase.current.y);
+      } else if (event.t === 'pick') pickRef.current(event.nodeId, event.ctrl ?? false, event.part ?? null);
+    };
+    const onGreeting = (event: MessageEvent): void => {
+      if (!isPreviewHello(event.data) || !event.source) return;
+      // ONLY a greeting from THIS canvas's own frame: hellos arrive on the shared window, and
+      // with several canvases mounted an unguarded handler would close its own channel and adopt
+      // a SIBLING's agent — one dead overlay, one drawing a stranger's geometry
+      if (event.source !== frameRef.current?.contentWindow) return;
+      // A greeting always means a FRESH agent, so it always gets a fresh channel. The iframe can
+      // reload without its src changing — moving it in the DOM is enough, which is exactly what a
+      // dock re-layout does — and holding on to the previous port would leave the editor talking
+      // to a realm that no longer exists.
+      portRef.current?.close();
+      const channel = new MessageChannel();
+      channel.port1.onmessage = (message: MessageEvent) => onEvent(message.data as TPreviewEvent);
+      channel.port1.start();
+      portRef.current = channel.port1;
+      // the greeting's own origin is the honest target; a sandboxed realm reports "null", which
+      // is not a usable targetOrigin — those get the wildcard, and the port keeps the
+      // conversation private either way
+      const targetOrigin = event.origin && event.origin !== 'null' ? event.origin : '*';
+      (event.source).postMessage(
+        { mosetta: PREVIEW_PORT, protocol: PREVIEW_PROTOCOL_VERSION },
+        { targetOrigin, transfer: [channel.port2] },
+      );
+      setConnected(true);
+    };
+
+    window.addEventListener('message', onGreeting);
+    return () => {
+      window.removeEventListener('message', onGreeting);
+      if (frameLoop) window.cancelAnimationFrame(frameLoop);
+      scroll.dispose();
+      portRef.current?.close();
+      portRef.current = null;
+    };
+  }, [frameKey]);
+
+  const command = useCallback((message: TPreviewCommand) => portRef.current?.postMessage(message), []);
+  useRemeasureOnResize(stageRef, connected, command);
+  return {
+    scrolling,
+    boxes,
+    units,
+    slots,
+    viewport,
+    hoveredId: hovered.id,
+    hoveredPart: hovered.part,
+    parts,
+    hoveredCtrl: hovered.ctrl,
+    connected,
+    command,
+    stageRef,
+    overlayRef,
+    frameRef,
+  };
+}
+
+/** the least room between the name over a frame's left end and the chip over its right end */
+const NAME_TAG_GAP = 8;
+
+// The INSPECTOR's vocabulary (docs/code-conventions: structural naming): every rect it draws is
+// an "inspector box" — select (blue), pick (yellow — EVERY picked element wears it, the branch
+// root thick and the covered ones thin), and the hover twins. The green "child box" is not here:
+// that name belongs to the container frame an insert lights up (TargetFrame below).
+function Outline({ box, kind, label, size, onSettings, settingsOpen, settingsLoading, onRemove, within, ghost }: {
+  box: INodeBox;
+  kind: 'hover' | 'select' | 'hover-pick' | 'pick' | 'pick-covered';
+  /** the block's name — dropped on a block too short to carry it without covering itself */
+  label?: string;
+  size?: boolean;
+  /** the block's settings, folded behind a button until asked for */
+  onSettings?: () => void;
+  settingsOpen?: boolean;
+  /** asked for and still loading: the button turns while the card waits unseen */
+  settingsLoading?: boolean;
+  /** given for a block that may leave the page — the root may not, and gets no button */
+  onRemove?: () => void;
+  /** the page's viewport: a block wider than it keeps its tags INSIDE, where they can be read */
+  within?: { readonly width: number };
+  /**
+   * The place next to the block, GLUED to its frame as if cut from one sheet with it: on top it is
+   * a segment of the corner strip, beside the size tag; below, a tab hanging from the bottom edge
+   * where the strip stands above; left and right, tabs on those edges.
+   */
+  ghost?: { readonly place: 'top' | 'bottom' | 'left' | 'right'; readonly node: ReactNode };
+}) {
+  // a block that runs past the page's edges (a full-bleed band, an overflowing root) would carry
+  // its corner tags out of sight with it — they stay at the visible edge instead
+  const pastRight = within ? Math.max(0, box.x + box.width - within.width) : 0;
+  const pastLeft = Math.max(0, -box.x);
+  // …and the corner chip of a block NARROWER than the chip, near the page's left edge, would hang
+  // off that edge: it is measured, and turns to start at the block's left instead
+  const cornerRef = useRef<HTMLDivElement>(null);
+  // the NAME is always shown: on its own over the frame's left end while the strip above has room
+  // for it beside the chip, otherwise as the chip's first segment (a narrow or short block alike) —
+  // measured: the chip without the name, and the name, whichever place it took
+  const nameRef = useRef<HTMLSpanElement>(null);
+  const chipNameRef = useRef<HTMLSpanElement>(null);
+  const [cornerWidth, setCornerWidth] = useState(0);
+  const [nameWidth, setNameWidth] = useState(0);
+  useLayoutEffect(() => {
+    const chipName = chipNameRef.current?.getBoundingClientRect().width ?? 0;
+    const width = (cornerRef.current?.getBoundingClientRect().width ?? 0) - chipName;
+    const name = chipName || (nameRef.current?.getBoundingClientRect().width ?? 0);
+    setCornerWidth((prev) => (Math.abs(prev - width) < 1 ? prev : width));
+    setNameWidth((prev) => (Math.abs(prev - name) < 1 ? prev : name));
+  });
+  const nameInChip = Boolean(label && size) && nameWidth > 0 && cornerWidth + nameWidth + NAME_TAG_GAP > box.width - pastLeft - pastRight;
+  const chipWidth = cornerWidth + (nameInChip ? nameWidth : 0);
+  const cornerFromLeft = chipWidth > box.width && box.x + box.width - pastRight - chipWidth < 0;
+  const cornerStyle = cornerFromLeft ? { left: `${pastLeft}px`, right: 'auto' } : pastRight ? { right: `${pastRight}px` } : undefined;
+  return (
+    <div className={`canvas-view__outline canvas-view__outline--${kind}`}
+         data-test-id={`inspector-${kind === 'pick-covered' ? 'pick' : kind}-box`}
+         data-outline={kind}
+         data-outline-node={box.id}
+         style={{ transform: `translate(${box.x}px, ${box.y}px)`, width: `${box.width}px`, height: `${box.height}px` }}>
+      {label && !nameInChip ? <span ref={nameRef}
+                                    className="canvas-view__tag"
+                                    data-test-id="inspector-name-tip"
+                                    style={pastLeft ? { left: `${pastLeft - 2}px` } : undefined}>{label}</span> : null}
+      {/* The other corner answers the other question a selection raises: how big is this thing —
+          and carries the one action that acts on the whole block. The two are one unbroken chip:
+          a red button floating on its own would read as part of the page under the overlay. */}
+      {size ? (
+        <div ref={cornerRef}
+             className="canvas-view__corner"
+             data-outline-corner={box.id}
+             style={cornerStyle}>
+          {nameInChip ? <span ref={chipNameRef}
+                              className="canvas-view__tag canvas-view__tag--name"
+                              data-test-id="inspector-name-tip">{label}</span> : null}
+          {ghost?.place === 'top' ? ghost.node : null}
+          {/* the settings wait behind this: open, they would cover the very page one is looking at
+              to decide where the next block goes. Left of the size — the delete button stays at
+              the far end, alone, where a click meant for the settings cannot land on it */}
+          {onSettings ? (
+            <button type="button"
+                    className={`canvas-view__tag-action canvas-view__tag-action--settings${settingsOpen ? ' canvas-view__tag-action--on' : ''}${settingsLoading ? ' canvas-view__tag-action--loading' : ''}`}
+                    data-test-id="inspector-settings-button"
+                    data-action="node-settings"
+                    data-loading={settingsLoading || undefined}
+                    data-tooltip={settingsLoading ? 'Loading the block’s settings…' : settingsOpen ? 'Hide the block’s settings' : 'The block’s settings'}
+                    aria-label={settingsOpen ? 'Hide the block’s settings' : 'The block’s settings'}
+                    aria-pressed={settingsOpen ?? false}
+                    onClick={onSettings}>
+              <svg viewBox="0 0 16 16"
+                   aria-hidden="true">
+                <path d="M2.5 4.5h6M11.5 4.5h2M2.5 11.5h2M7.5 11.5h6"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.4"
+                      strokeLinecap="round" />
+                <circle cx="10"
+                        cy="4.5"
+                        r="1.6"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.4" />
+                <circle cx="6"
+                        cy="11.5"
+                        r="1.6"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.4" />
+              </svg>
+            </button>
+          ) : null}
+          <span className="canvas-view__tag canvas-view__tag--size"
+                data-test-id="inspector-size-tip"
+                data-outline-size>{Math.round(box.width)}×{Math.round(box.height)}</span>
+          {onRemove ? (
+            <button type="button"
+                    className="canvas-view__tag-action"
+                    data-test-id="inspector-remove-button"
+                    data-action="remove-node"
+                    data-tooltip="Delete this block"
+                    aria-label="Delete this block"
+                    onClick={onRemove}>
+              <svg viewBox="0 0 16 16"
+                   aria-hidden="true">
+                <path d="M3.4 4.6h9.2M6.4 4.6V3.2h3.2v1.4M4.9 4.6l.6 8.2h5l.6-8.2"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.4" />
+              </svg>
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+      {ghost?.place === 'bottom' ? (
+        <div className="canvas-view__corner canvas-view__corner--bottom"
+             style={cornerStyle}>{ghost.node}</div>
+      ) : null}
+      {ghost?.place === 'left' || ghost?.place === 'right' ? (
+        <div className={`canvas-view__edge canvas-view__edge--${ghost.place}`}>{ghost.node}</div>
+      ) : null}
+    </div>
+  );
+}
+
+/** a container with no width or height encloses nothing worth outlining — the "+" speaks for itself */
+const drawableArea = (slot: ISlotBox) => (slot.area && slot.area.width > 0 && slot.area.height > 0 ? slot.area : null);
+
+/**
+ * A place of the selected block at rest: every slot it opens, outlined quietly. This is the map of
+ * where things can go. It disappears the moment one place is hovered or picked — two greens on
+ * screen, one still and one travelling, collided both with each other and with the live frame.
+ */
+function SlotArea({ slot, area }: { slot: ISlotBox; area: NonNullable<ISlotBox['area']> }) {
+  return (
+    <div className="canvas-view__slot-area canvas-view__slot-area--resting"
+         data-slot-area={`${slot.ownerId}:${slot.slot}`}
+         style={{
+           transform: `translate(${area.x}px, ${area.y}px)`,
+           width: `${area.width}px`,
+           height: `${area.height}px`,
+         }} />
+  );
+}
+
+interface IRect {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}
+
+/**
+ * The place a block is about to land in, marked: a container, or a band at a block's edge. Named
+ * in both corners the way a selected block is — what it is on the left, how big it is on the
+ * right. The travelling dashes make it the one thing moving on the overlay.
+ */
+function TargetFrame({ rect, label, area }: { rect: IRect | null; label: string; area: string }) {
+  const style = rect
+    ? { transform: `translate(${rect.x}px, ${rect.y}px)`, width: `${rect.width}px`, height: `${rect.height}px` }
+    : { inset: 0 }; // nothing measurable to point at — the frame is the answer
+  return (
+    <div className="canvas-view__slot-area canvas-view__slot-area--target"
+         data-test-id="inspector-child-box"
+         data-slot-area={area}
+         data-slot-target
+         style={style}>
+      <span className="canvas-view__tag canvas-view__tag--slot">{label}</span>
+      {rect ? (
+        <span className="canvas-view__tag canvas-view__tag--slot canvas-view__tag--size"
+              data-slot-size>{Math.round(rect.width)}×{Math.round(rect.height)}</span>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * What a place lights up while it is pointed at: the CONTAINER the new block goes into — which
+ * block it joins is the one thing the ghost itself cannot show. The page root is no container at
+ * all (not a rendered slot): a place of the page itself lights nothing, its ghost is the answer.
+ */
+type TAddTarget = { readonly of: 'container' } | { readonly of: 'page' };
+
+/** one place a block may go: what it says, what it would do, and what it lights up */
+interface IAddPoint {
+  readonly key: string;
+  readonly title: string;
+  /** the structural name (docs/code-conventions): add-child-after — into the block's own (empty)
+   * slot, or the page's first block; add-before/after — next to the block, among its siblings;
+   * add-child-before — the page's start */
+  readonly testId: 'inspector-add-child-before-button' | 'inspector-add-child-after-button'
+  | 'inspector-add-before-button' | 'inspector-add-after-button';
+  readonly at: IInsertionPoint;
+  readonly target: TAddTarget;
+}
+
+
+/**
+ * A place offered on screen as a GHOST: a green tab with the place's words. Next to the selected
+ * block it is GLUED to the block's frame — on top a segment of the corner strip beside the size,
+ * below a tab hanging from the bottom edge, left or right a tab on that edge (the neighbours stand
+ * side by side) — so frame, tags and ghost read as one piece. A "+" floating in a corner said
+ * nothing to authors; a tab on the edge it adds next to says where. Inside an empty slot of the
+ * block, or at the page's own ends, it is a tag of its own (`free`).
+ */
+type TGhostPlace = 'top' | 'bottom' | 'left' | 'right' | 'free';
+
+interface IGhost {
+  readonly point: IAddPoint;
+  readonly place: TGhostPlace;
+  /** where a free ghost stands (its top-left corner) — the glued ones go wherever their frame is */
+  readonly at: { readonly x: number; readonly y: number } | null;
+  /** what it says on the tab — short: the frame it is glued to names the block */
+  readonly words: string;
+  /**
+   * Next to something — `start` or `end` of it: only the side the pointer is on is shown, both at
+   * once crowd the block they are about. `inside` an empty slot: always shown.
+   */
+  readonly side: 'start' | 'end' | 'inside';
+}
+
+/** a side tab is at most this tall — a "+" on the edge, not a second frame along it */
+const SIDE_TAB_MAX_HEIGHT = 48;
+/** the insert popover's width — the search and a block's name with its provider */
+const INSERT_POPOVER_WIDTH = 320;
+
+/** a ghost's tab: a "+" and its words; on a side edge, too narrow for words — the tooltip has them */
+function GhostTab({ ghost, height, onPick, onHover }: {
+  ghost: IGhost;
+  /** a side tab's height — the block's, up to SIDE_TAB_MAX_HEIGHT */
+  height?: number;
+  onPick: (at: IInsertionPoint) => void;
+  onHover: (point: IAddPoint | null) => void;
+}) {
+  const { point, place, at, words } = ghost;
+  const narrow = place === 'left' || place === 'right';
+  const style = place === 'free' && at
+    ? { transform: `translate(${at.x}px, ${at.y}px)` }
+    : narrow && height !== undefined ? { height: `${height}px` } : undefined;
+  return (
+    <button type="button"
+            className={`canvas-view__ghost canvas-view__ghost--${place}`}
+            data-test-id={point.testId}
+            data-add-point={point.key}
+            data-add-side={ghost.side}
+            data-add-place={place}
+            data-tooltip={narrow ? words : undefined}
+            aria-label={point.title}
+            style={style}
+            onPointerEnter={() => onHover(point)}
+            onPointerLeave={() => onHover(null)}
+            onClick={() => onPick(point.at)}>
+      <span className="canvas-view__ghost-plus"
+            aria-hidden="true">+</span>
+      {narrow ? null : <span className="canvas-view__ghost-words">{words}</span>}
+    </button>
+  );
+}
+
+/**
+ * Where the picked block will LAND: the emptiness the agent made room with (LANDING_NODE_ID),
+ * framed in a colour of its own — green says which block it joins, violet says the very spot.
+ */
+function LandingFrame({ box }: { box: INodeBox }) {
+  return (
+    <div className="canvas-view__landing"
+         data-test-id="inspector-landing-box"
+         style={{ transform: `translate(${box.x}px, ${box.y}px)`, width: `${box.width}px`, height: `${box.height}px` }}>
+      <span className="canvas-view__tag canvas-view__tag--landing">the new block lands here</span>
+    </div>
+  );
+}
+
+/**
+ * The bar above the frame. It earns its place twice: it holds the actions a preview needs, and its
+ * height is the room the topmost outline's label needs — hanging off the very top of the frame,
+ * that label used to be cut off by the panel's edge.
+ */
+/** the tree column, drawn as a sidebar — the toggle the workbench's desk offers in this bar */
+const TreeIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <rect x="1.8"
+          y="2.8"
+          width="12.4"
+          height="10.4"
+          rx="1.6"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5" />
+    <path d="M6 2.8v10.4"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5" />
+  </svg>
+);
+
+/** the preview, opened on its own: an arrow leaving a box */
+const OpenPreviewIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M6.5 3.5H3.5v9h9V9.5M9 3.5h3.5V7M12.5 3.5L7.5 8.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round" />
+  </svg>
+);
+
+const LinkIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M6.8 9.2a3 3 0 0 0 4.2 0l2-2a3 3 0 0 0-4.2-4.2l-1 1"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round" />
+    <path d="M9.2 6.8a3 3 0 0 0-4.2 0l-2 2a3 3 0 0 0 4.2 4.2l1-1"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round" />
+  </svg>
+);
+
+/** what the bar says about the version open: a draft (its name, whether its edits are on disk), or a published revision */
+type TVersionBadge
+  = | { readonly kind: 'draft'; readonly name: string; readonly saving: boolean }
+  | { readonly kind: 'revision'; readonly rev: number };
+
+/** a published revision's way to an edit: a fresh draft of it, opened beside it */
+interface INewDraftControl {
+  readonly busy: boolean;
+  readonly onNewDraft: () => void;
+}
+
+/** the blocks of the page with newer versions — the chip that opens the updates window (ADR-0061) */
+interface IUpdatesControl {
+  readonly count: number;
+  readonly onOpen: () => void;
+}
+
+const PublishIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M8 10.5V2.8M4.8 5.8L8 2.6l3.2 3.2M3 9.5v2.7c0 .7.5 1.2 1.2 1.2h7.6c.7 0 1.2-.5 1.2-1.2V9.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round" />
+  </svg>
+);
+
+const NewDraftIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M9.5 2.5H4.2c-.7 0-1.2.5-1.2 1.2v8.6c0 .7.5 1.2 1.2 1.2h7.6c.7 0 1.2-.5 1.2-1.2V6M8 6.5v5M5.5 9h5M12.8 1.6l1.6 1.6-3.9 3.9-2 .4.4-2z"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.3"
+          strokeLinecap="round"
+          strokeLinejoin="round" />
+  </svg>
+);
+
+/** the draft's way to the site: shown while a draft is open, quiet while it is being saved */
+interface IPublishControl {
+  readonly busy: boolean;
+  /** unsaved edits are on their way to the store — publishing now would miss them */
+  readonly dirty: boolean;
+  readonly onPublish: () => void;
+}
+
+/** a tool of the workbench as the bar shows it */
+interface IToolFace {
+  readonly id: string;
+  readonly label: string;
+  readonly iconUrl?: string;
+}
+
+const ToolIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M3 4.5h10M3 8h10M3 11.5h6"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.4"
+          strokeLinecap="round" />
+  </svg>
+);
+
+function ActionBar({ inspecting, chromes, openChrome, onChrome, tools, openTool, onTool, pageSettingsOpen, onPageSettings, version, newDraft, updates, canCut, canCopy, canPaste, canUndo, canRedo, previewHref, onShare, publish, onRestart, onFullscreen, onInspecting, onCut, onCopy, onPaste, onUndo, onRedo }: {
+  inspecting: boolean;
+  /** the standing controls the page's blocks bring — a button each, the open one's card in the corner */
+  chromes: readonly IChromeNode[];
+  openChrome: string | null;
+  onChrome: (id: string) => void;
+  /** the workbench's tools (ADR-0062) — a button each, the open one over the stage */
+  tools: readonly IToolFace[];
+  openTool: string | null;
+  onTool: (id: string) => void;
+  pageSettingsOpen: boolean;
+  /** toggles the page's own settings; null where there are none (a prefab) */
+  onPageSettings: (() => void) | null;
+  /** the version open — a revision puts the bar in the read-only mood, the badge says WHY nothing can be edited */
+  version: TVersionBadge | null;
+  /** a revision's way to a draft of it; null where there is none (a draft open, a frozen page) */
+  newDraft: INewDraftControl | null;
+  /** the page's blocks with newer versions; null where there are none, or nothing can change */
+  updates: IUpdatesControl | null;
+  canCut: boolean;
+  canCopy: boolean;
+  canPaste: boolean;
+  canUndo: boolean;
+  canRedo: boolean;
+  /** the preview's own address — the same page without the editor, for a new tab and for sharing */
+  previewHref: string;
+  onShare: () => void;
+  /** null while a revision is inspected — nothing to publish */
+  publish: IPublishControl | null;
+  onRestart: () => void;
+  onFullscreen: () => void;
+  onInspecting: (on: boolean) => void;
+  onCut: () => void;
+  onCopy: () => void;
+  onPaste: () => void;
+  onUndo: () => void;
+  onRedo: () => void;
+}) {
+  // hosted by the workbench's desk? its tree column is a click away from here — the bar is where
+  // the hands are. Optional, like every host cooperation
+  const workspace = useDiOptional(WORKSPACE_TOKEN);
+  const desk = useSyncExternalStore(workspace?.subscribe ?? noSubscription, workspace?.snapshot ?? noState, noState);
+  return (
+    <div className="canvas-view__bar">
+      {workspace && desk ? (
+        <>
+          <button type="button"
+                  className={`canvas-view__action${desk.treeShown ? ' canvas-view__action--on' : ''}`}
+                  data-test-id="canvas-tree-toggle"
+                  data-action="tree"
+                  data-tooltip={desk.treeShown ? 'Hide the tree' : 'Show the tree — the outline of the page beside the canvas'}
+                  aria-label={desk.treeShown ? 'Hide the tree' : 'Show the tree'}
+                  aria-pressed={desk.treeShown}
+                  onClick={() => workspace.setTreeShown(!desk.treeShown)}>
+            {TreeIcon}
+          </button>
+          <span className="canvas-view__divider"
+                aria-hidden="true" />
+        </>
+      ) : null}
+      <button type="button"
+              className="canvas-view__action"
+              data-test-id="canvas-restart-button"
+              data-action="restart"
+              data-tooltip="Restart the preview — a fresh page, nothing remembered"
+              aria-label="Restart the preview"
+              onClick={onRestart}>
+        <svg viewBox="0 0 16 16"
+             aria-hidden="true">
+          <path d="M13.2 8a5.2 5.2 0 1 1-1.6-3.7"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.6" />
+          <path d="M12.4 1.6v3.4H9"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.6" />
+        </svg>
+      </button>
+      <button type="button"
+              className="canvas-view__action canvas-view__action--play"
+              data-test-id="canvas-fullscreen-button"
+              data-action="fullscreen"
+              data-tooltip="Full screen — the page over everything else"
+              aria-label="Full screen"
+              onClick={onFullscreen}>
+        <svg viewBox="0 0 16 16"
+             aria-hidden="true">
+          <path d="M4.5 3l8 5-8 5z"
+                fill="currentColor" />
+        </svg>
+      </button>
+      <button type="button"
+              className={`canvas-view__action canvas-view__action--picker${inspecting ? '' : ' canvas-view__action--off'}`}
+              data-test-id="canvas-inspect-toggle"
+              data-action="inspect"
+              data-inspecting={inspecting || undefined}
+              data-tooltip={inspecting
+                ? 'Inspector on — clicks select blocks. Turn it off to use the page itself'
+                : 'Inspector off — the page behaves as it will for a visitor'}
+              aria-label={inspecting ? 'Turn the inspector off' : 'Turn the inspector on'}
+              aria-pressed={inspecting}
+              onClick={() => onInspecting(!inspecting)}>
+        <svg viewBox="0 0 16 16"
+             aria-hidden="true">
+          <rect x="1.6"
+                y="1.6"
+                width="8.6"
+                height="8.6"
+                rx="1.2"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5" />
+          <path d="M8.2 8.2l6.2 2.4-2.6.8-.8 2.6z"
+                fill="currentColor" />
+        </svg>
+      </button>
+      {onPageSettings || chromes.length || tools.length ? <span className="canvas-view__divider"
+                                                                aria-hidden="true" /> : null}
+      {onPageSettings ? (
+        <button type="button"
+                className={`canvas-view__action${pageSettingsOpen ? ' canvas-view__action--on' : ''}`}
+                data-test-id="canvas-page-settings"
+                data-action="page-settings"
+                data-tooltip={pageSettingsOpen ? 'Close the page’s settings' : 'The page’s own settings: its title, description, cover, server rendering'}
+                aria-label="Page settings"
+                aria-expanded={pageSettingsOpen}
+                onClick={onPageSettings}>
+          {PageSettingsIcon}
+        </button>
+      ) : null}
+      {chromes.map((node) => {
+        const face = chromeFaceOf(node);
+        const open = openChrome === node.id;
+        return (
+          <button key={node.id}
+                  type="button"
+                  className={`canvas-view__action${open ? ' canvas-view__action--on' : ''}`}
+                  data-test-id="canvas-chrome-toggle"
+                  data-action="chrome"
+                  data-chrome={node.id}
+                  data-tooltip={open ? `Hide: ${face.label.toLowerCase()}` : face.label}
+                  aria-label={face.label}
+                  aria-expanded={open}
+                  onClick={() => onChrome(node.id)}>
+            {face.icon}
+          </button>
+        );
+      })}
+      {tools.map((tool) => {
+        const open = openTool === tool.id;
+        return (
+          <button key={tool.id}
+                  type="button"
+                  className={`canvas-view__action${open ? ' canvas-view__action--on' : ''}`}
+                  data-test-id="canvas-tool-toggle"
+                  data-action="tool"
+                  data-tool={tool.id}
+                  data-tooltip={open ? `Hide: ${tool.label.toLowerCase()}` : tool.label}
+                  aria-label={tool.label}
+                  aria-expanded={open}
+                  onClick={() => onTool(tool.id)}>
+            {tool.iconUrl ? <img className="canvas-view__tool-icon"
+                                 src={tool.iconUrl}
+                                 alt="" /> : ToolIcon}
+          </button>
+        );
+      })}
+      {version?.kind === 'revision' ? (
+        <span className="canvas-view__readonly"
+              data-test-id="canvas-readonly-badge"
+              data-tooltip="A published revision is immutable — make a draft of it to change it">
+          {`published r${version.rev} — read-only`}
+        </span>
+      ) : null}
+      {/* …and a draft says which one it is, and whether its edits are on disk yet */}
+      {version?.kind === 'draft' ? (
+        <span className={`canvas-view__readonly canvas-view__readonly--draft${version.saving ? ' canvas-view__readonly--saving' : ''}`}
+              data-test-id="canvas-draft-badge"
+              data-saving={version.saving || undefined}
+              data-tooltip={version.saving
+                ? 'Saving your edits — a draft saves by itself'
+                : 'A draft: your edits are saved by themselves; Publish makes it the page readers get'}>
+          <span className="canvas-view__save-dot"
+                aria-hidden="true" />
+          {`draft ${version.name} — ${version.saving ? 'saving…' : 'saved'}`}
+        </span>
+      ) : null}
+      {newDraft ? (
+        <button type="button"
+                className="canvas-view__new-draft"
+                data-test-id="canvas-new-draft-button"
+                data-action="new-draft"
+                disabled={newDraft.busy}
+                data-tooltip="Make a draft of this revision to change it — it opens beside this one"
+                onClick={newDraft.onNewDraft}>
+          {NewDraftIcon}
+          {newDraft.busy ? 'Making a draft…' : 'New draft'}
+        </button>
+      ) : null}
+      {updates ? (
+        <button type="button"
+                className="canvas-view__updates"
+                data-test-id="canvas-updates-button"
+                data-action="updates"
+                data-count={updates.count}
+                data-tooltip="Some blocks of this page have newer versions — see what changed and update them"
+                onClick={updates.onOpen}>
+          {`↑ Updates · ${updates.count}`}
+        </button>
+      ) : null}
+      {publish ? (
+        <button type="button"
+                className="canvas-view__publish"
+                data-test-id="canvas-publish-button"
+                data-action="publish"
+                disabled={publish.busy || publish.dirty}
+                data-tooltip={publish.dirty
+                  ? 'Wait a moment — the draft is being saved'
+                  : 'Publish this draft — it becomes the live revision readers get'}
+                onClick={publish.onPublish}>
+          {PublishIcon}
+          {publish.busy ? 'Publishing…' : 'Publish'}
+        </button>
+      ) : null}
+      {/* the right group is about the DRAFT, not about the frame the left-side actions drive:
+            cut/copy/paste of the selection, then undo/redo. Disabled IS the empty state: the
+            colour (blue can, gray cannot) is the whole status UI */}
+      <button type="button"
+              className="canvas-view__action canvas-view__action--history canvas-view__action--right"
+              data-test-id="canvas-cut-button"
+              data-action="cut"
+              data-tooltip="Cut the selection (Ctrl+X)"
+              aria-label="Cut the selection"
+              disabled={!canCut}
+              onClick={onCut}>
+        <svg viewBox="0 0 16 16"
+             aria-hidden="true">
+          <circle cx="4"
+                  cy="4.2"
+                  r="2"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.4" />
+          <circle cx="4"
+                  cy="11.8"
+                  r="2"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.4" />
+          <path d="M13.4 2.6L5.6 10.7M5.6 5.3l3.2 3.3M9.9 9.6l3.5 3.8"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.4" />
+        </svg>
+      </button>
+      <button type="button"
+              className="canvas-view__action canvas-view__action--history"
+              data-test-id="canvas-copy-button"
+              data-action="copy"
+              data-tooltip="Copy the selection (Ctrl+C)"
+              aria-label="Copy the selection"
+              disabled={!canCopy}
+              onClick={onCopy}>
+        <svg viewBox="0 0 16 16"
+             aria-hidden="true">
+          <rect x="5.6"
+                y="5.6"
+                width="7.6"
+                height="7.6"
+                rx="1.4"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.6" />
+          <path d="M3 10.4V4.4A1.6 1.6 0 0 1 4.6 2.8h6"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.6" />
+        </svg>
+      </button>
+      <button type="button"
+              className="canvas-view__action canvas-view__action--history"
+              data-test-id="canvas-paste-button"
+              data-action="paste"
+              data-tooltip="Paste blocks (Ctrl+V)"
+              aria-label="Paste blocks"
+              disabled={!canPaste}
+              onClick={onPaste}>
+        <svg viewBox="0 0 16 16"
+             aria-hidden="true">
+          <path d="M10.4 2.9h1.2A1.4 1.4 0 0 1 13 4.3v9A1.4 1.4 0 0 1 11.6 14.7H4.4A1.4 1.4 0 0 1 3 13.3v-9A1.4 1.4 0 0 1 4.4 2.9h1.2"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.6" />
+          <rect x="5.5"
+                y="1.4"
+                width="5"
+                height="2.9"
+                rx="0.7"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.6" />
+        </svg>
+      </button>
+      <button type="button"
+              className="canvas-view__action canvas-view__action--history"
+              data-test-id="canvas-undo-button"
+              data-action="undo"
+              data-tooltip="Undo (Ctrl+Z)"
+              aria-label="Undo"
+              disabled={!canUndo}
+              onClick={onUndo}>
+        <svg viewBox="0 0 16 16"
+             aria-hidden="true">
+          <path d="M2 4.7v4h4"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.6" />
+          <path d="M14 11.3a6 6 0 0 0-10-4.4L2 8.7"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.6" />
+        </svg>
+      </button>
+      <button type="button"
+              className="canvas-view__action canvas-view__action--history"
+              data-test-id="canvas-redo-button"
+              data-action="redo"
+              data-tooltip="Redo (Ctrl+Shift+Z)"
+              aria-label="Redo"
+              disabled={!canRedo}
+              onClick={onRedo}>
+        <svg viewBox="0 0 16 16"
+             aria-hidden="true">
+          <path d="M14 4.7v4h-4"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.6" />
+          <path d="M2 11.3a6 6 0 0 1 10-4.4L14 8.7"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.6" />
+        </svg>
+      </button>
+      {/* the preview on its own: in a new tab, or as a link to hand to someone who may edit */}
+      <span className="canvas-view__divider"
+            aria-hidden="true" />
+      <a className="canvas-view__action canvas-view__action--history"
+         data-test-id="canvas-open-preview"
+         data-action="open-preview"
+         data-tooltip="Open this preview in a new tab — the page as it is here, without the editor"
+         aria-label="Open the preview in a new tab"
+         href={previewHref}
+         target="_blank"
+         rel="noreferrer">
+        {OpenPreviewIcon}
+      </a>
+      <button type="button"
+              className="canvas-view__action canvas-view__action--history"
+              data-test-id="canvas-share-preview"
+              data-action="share-preview"
+              data-tooltip="Copy a link to this preview — anyone who may edit this site can open it"
+              aria-label="Copy a link to the preview"
+              onClick={onShare}>
+        {LinkIcon}
+      </button>
+    </div>
+  );
+}
+
+// a function DECLARATION, not an arrow in the module literal: the component carries its own name
+/**
+ * The width of a settings card holding a wide field (a paragraph's text): the field gets at least
+ * half the screen — in stage pixels (an emulated viewport scales the stage) — plus the card's own
+ * padding and the reference gutter beside its fields; never wider than the stage.
+ */
+function wideFieldWidth(stage: HTMLElement | null, stageWidth: number): number {
+  const view = stage?.ownerDocument.defaultView;
+  const shown = stage?.getBoundingClientRect().width ?? 0;
+  const scale = shown > 0 && stageWidth > 0 ? shown / stageWidth : 1;
+  const half = (view?.innerWidth ?? stageWidth * 2) / 2 / scale;
+  return Math.min(stageWidth - 16, Math.round(half + 64));
+}
+
+function Canvas() {
+  // the canvas's OWN session, scoped to its dock tab — the rest of the workbench follows the
+  // ACTIVE one through the hub's facade
+  const { session, state, markInteractive, markHovered, markLeft } = useCanvasEditingSession();
+  const workbenchDi = useDi(DI_CONTAINER_TOKEN);
+  const notices = noticesOf(workbenchDi);
+  // a provider's chrome in this canvas reads and sets the author's views, reads the project's
+  // config and its own scope (what of it is untranslated) — all exposed by the workbench, fed here
+  // too so the canvas does not need the panel or an opened settings popover
+  ensureEditorViews(workbenchDi, session);
+  ensureSettingsDraft(workbenchDi, session);
+  useFeedProjectConfig();
+  // a provider taking new blocks under its wing links what arrives in this canvas's document
+  useEffect(() => watchArrivals(session, ensureRefsEditing(workbenchDi)), [session, workbenchDi]);
+  const preview = useIsPreviewMode();
+  // the project's prefabs: a prefab's own block, picked to be seen, is found in its live tree
+  const project = useProjectPrefabs(!preview);
+  useFeedPrefabTrees(workbenchDi, project);
+  // hosted in a dock? name OUR tab after the open document and report the draft's identity, so
+  // "edit this draft" can find an already-open tab. Entirely optional: no dock — nothing to name
+  const dockTab = useDiOptional(DOCK_TAB_TOKEN);
+  useEffect(() => {
+    if (!dockTab) return;
+    const revSuffix = state.revision != null ? ` · r${state.revision}` : '';
+    const named = state.kind === 'prefabs' ? `prefab ${state.pageName}` : state.pageName;
+    dockTab.rename(state.pageName ? `Canvas · ${named}${revSuffix}` : 'Canvas');
+    dockTab.setMeta({ editingPage: state.pageName, editingDraftId: state.draftId, editingRevision: state.revision });
+  }, [dockTab, state.kind, state.pageName, state.draftId, state.revision]);
+  // a restart throws the frame away and builds a new one: the surest way to a preview that
+  // remembers nothing of what was clicked in it
+  const [restarts, setRestarts] = useState(0);
+  // …and a rebuild does the same for the one reason the editor cannot talk its way out of: a
+  // block whose module the running realm never loaded (see the effects below)
+  const [rebuilds, setRebuilds] = useState(0);
+  const [fullscreen, setFullscreen] = useState(false);
+  // the place under the pointer, so its container (or the band at a block's edge) can light up
+  // before it is picked — hovering a "+" should answer "where" before the click, not after
+  const [hoveredAdd, setHoveredAdd] = useState<IAddPoint | null>(null);
+  // a pick already IS the selection — revealing it would yank the page under the pointer
+  const pickedRef = useRef<string | null>(null);
+  const onPick = useCallback((nodeId: string | null, ctrl: boolean, part: string | null) => {
+    // pointer events live INSIDE the iframe and never reach the wrapper's capture handler — the
+    // agent's report is where this canvas learns it was touched, so activation happens here
+    markInteractive();
+    const doc = session.snapshot().doc;
+    if (!doc) return;
+    // a place is waiting for a block: whatever was clicked, the click means "never mind"
+    if (session.snapshot().insertionPoint) {
+      session.setInsertionPoint(null);
+      return;
+    }
+    if (ctrl) {
+      // the Ctrl mode: a click toggles the branch whole. On no block it toggles nothing — a
+      // stray Ctrl-click must not throw away an accumulated selection
+      if (nodeId && findNodeDoc(doc, nodeId)) session.toggleMultiSelect(nodeId);
+      return;
+    }
+    // a click that landed on no block — or on the page itself, its root — means "never mind": the
+    // page background is how one steps back out of a selection. Any block is picked at once, open
+    // settings or not: they wait behind a button now and follow the selection (Canvas below), so
+    // there is no card a click away would have to close first
+    if (!nodeId || nodeId === doc.id) {
+      pickedRef.current = null;
+      session.selectNode(null);
+      return;
+    }
+    // ids the draft no longer knows (an edit landed after the frame rendered) are dropped
+    if (!findNodeDoc(doc, nodeId)) return;
+    // a PREFAB's own block is picked as itself — to be seen, read-only (prefabParts.ts); its prefab
+    // node is the Ctrl mode's unit, and a click on the tree's prefab row
+    const picked = part ?? nodeId;
+    pickedRef.current = picked;
+    session.selectNode(picked);
+  }, [session, markInteractive]);
+
+  // hovering BORROWS the focus: pointing into this canvas makes it the active one (the tree
+  // follows) for as long as the pointer stays — leaving hands the focus back to the selection
+  // anchor. The hovered node also travels into the session for the tree's pale highlight.
+  const onHover = useCallback((nodeId: string | null, part: string | null) => {
+    markHovered();
+    session.hoverNode(part ?? nodeId);
+  }, [session, markHovered]);
+
+  const pattern = (state.doc as { pattern?: string } | null)?.pattern ?? '/';
+  // previewToken: the token carries the draft identity; the PATH stays the page's real
+  // pattern so modules inside the preview see an honest location. editorBridge NAMES the agent
+  // to attach — derived from this module's own reference, so the preview gets the agent of THIS
+  // editor build. The URL shared with observers is the same address without that parameter.
+  const bridgeId = previewBridgeIdOf(useComponent().reference);
+  // a draft token for editing, an `r<rev>` token for the read-only inspection of a published
+  // revision; a prefab's behind `prefab.` (it previews as a page whose root is its own)
+  const tokenEntity = state.kind === 'prefabs' ? `prefab.${state.pageName}` : state.pageName;
+  const previewToken = state.revision != null ? `${tokenEntity}.r${state.revision}` : `${tokenEntity}.${state.draftId}`;
+  const src = `${pattern}?previewToken=${previewToken}&editorBridge=${bridgeId}`;
+  const frameKey = `${src}#${rebuilds}#${restarts}`;
+  // the address to hand around: the preview without the agent, absolute — a link is for elsewhere
+  const previewHref = typeof window === 'undefined'
+    ? `${pattern}?previewToken=${previewToken}`
+    : new URL(`${pattern}?previewToken=${previewToken}`, window.location.origin).href;
+  // Which side of the selection — or of the page, with nothing selected — the pointer is on: the
+  // ghost offered is the one on that side. The pointer reports every frame; only a FLIP of the side
+  // re-renders (setState with the same value is dropped), the geometry is read through a ref
+  const [pointerAtEnd, setPointerAtEnd] = useState(true);
+  const sideRef = useRef<{ rect: IRect | null; axis: TAxis }>({ rect: null, axis: 'column' });
+  const onPointer = useCallback((x: number, y: number) => {
+    const { rect, axis } = sideRef.current;
+    if (!rect) return;
+    setPointerAtEnd(axis === 'row' ? x >= rect.x + rect.width / 2 : y >= rect.y + rect.height / 2);
+  }, []);
+  const { scrolling, boxes, parts, slots, units, viewport, hoveredId, hoveredPart, hoveredCtrl, connected, command, stageRef, overlayRef, frameRef } = usePreviewLink(frameKey, onPick, onHover, onPointer);
+  // the modifier is watched on BOTH sides of the boundary: the preview realm stamps it on its
+  // events, and these listeners catch a press that never generates one (keyboard focus stays on
+  // the editor side — the agent suppresses the mousedowns that would move it)
+  const ctrlHeld = useCtrlHeld();
+
+  // What the LIVE realm can render: the modules it loaded when it booted. Kept as it was at boot
+  // and not widened afterwards — a live update never adds a module, and a block whose type was
+  // taken off the page leaves its module loaded, so putting one back is still free.
+  const bootedRefs = useRef<Set<string>>(new Set());
+  useEffect(() => {
+    bootedRefs.current = new Set(referencesOf(session.snapshot().doc));
+  }, [frameKey, session]);
+
+  // the set as an id, so the two effects below depend on WHAT it is rather than on the array's
+  // identity. Whether it FITS the realm is asked inside them, never during a render: the answer
+  // changes in an effect (a rebuild), and a render that read it would read it stale.
+  const docRefs = useMemo(() => referencesOf(state.doc), [state.doc]);
+  const refsKey = docRefs.join('|');
+  // A PREFAB node is no module: the realm re-expands it from the blocks it already shows, and a
+  // prefab node it shows nothing of (put back by redo after an undo took it out, pasted in) has
+  // only the server's render to come from. So a prefab fits the realm while the agent lists it
+  // among the expanded ones — the booted references stand in until an agent has said
+  const docUnits = useMemo(() => (state.doc ? unitNodeIds(state.doc) : []), [state.doc]);
+  const unitsKey = docUnits.join('|');
+  const unitsRef = useRef(units);
+  unitsRef.current = units;
+  const fitsRealm = (): boolean => docRefs.every((reference) => bootedRefs.current.has(reference))
+    && (unitsRef.current === null || docUnits.every((id) => unitsRef.current!.has(id)));
+
+  /**
+   * The place a block is about to go gets ROOM in the preview — the agent splices a little emptiness
+   * into its copy of the page, and the overlay frames it (LandingFrame). Declared before the live
+   * composition below: when the block lands, the place is spent in the same update as the tree
+   * changes, and the room goes away before the block arrives.
+   */
+  const landingPoint = state.insertionPoint;
+  useEffect(() => {
+    if (!connected) return;
+    command({ t: 'landing', at: landingPoint ? { parentId: landingPoint.parentId, slot: landingPoint.slot, index: landingPoint.index } : null });
+  }, [connected, landingPoint?.parentId, landingPoint?.slot, landingPoint?.index, command]);
+
+  // the catalog's versions: the page's blocks with newer ones (the Updates window, ADR-0061), and the
+  // tree as the preview realm runs it — the editor's own blocks (the page root) at their latest, the
+  // way the server rendered the page, not the version the document was made with. Until the catalog
+  // is known nothing is pushed: the realm holds the server's render of the same document
+  const upgrades = useUpgrades(state.doc, !preview);
+  const catalogKnown = upgrades.components.length > 0;
+  const realmDoc = useMemo(() => (state.doc && catalogKnown ? withLatestTools(state.doc, upgrades.versions) : null), [state.doc, catalogKnown, upgrades.versions]);
+
+  /**
+     * LIVE COMPOSITION: the tree the editor holds goes straight into the preview's page manager and
+     * the application re-renders around it. No reload, so nothing the realm built up is thrown
+     * away — and no window in which the overlay draws geometry of a tree that has already changed.
+     *
+     * What can degrade: a block that appears this way has no server-rendered data waiting for it,
+     * so its queries fetch from the client. That is a Loading flash where a reload would have shown
+     * the server's answer immediately — and the price of never reloading at all. What goes is the
+     * tree as the realm runs it (`realmDoc` above).
+     */
+  useEffect(() => {
+    if (!connected || !realmDoc || !fitsRealm()) return;
+    command({ t: 'page', page: realmDoc });
+  }, [connected, realmDoc, refsKey, unitsKey, command]);
+
+  // the author's views of reference providers (i18n: the language being edited) reach the
+  // preview's own store — references there resolve in them, without a reload
+  useEffect(() => {
+    if (connected) command({ t: 'views', views: state.views });
+  }, [connected, state.views, command]);
+
+  /**
+     * …and the one case that cannot be pushed: a block of a type this realm never loaded. The frame
+     * is rebuilt for it — but only once the draft on disk carries the block, because the shell that
+     * answers `?previewToken` renders the SAVED revision. Until then the preview is one block behind
+     * and says nothing about it, which is the same second the autosave takes anyway.
+     */
+  useEffect(() => {
+    if (state.doc && !state.dirty && !fitsRealm()) setRebuilds((count) => count + 1);
+  }, [refsKey, unitsKey, state.dirty]);
+
+  /**
+     * Whether the preview is being INSPECTED right now — the toggle, and full screen.
+     *
+     * Full screen is the page and nothing else: it exists to be used, not composed. So the overlay
+     * draws nothing over it and the agent stops swallowing clicks for as long as it lasts — a
+     * frame that covers the screen while links still refuse to open would be the worst of both.
+     * The toggle's own state is untouched; leaving full screen puts the editor back as it was.
+     */
+  const inspecting = state.inspecting && !fullscreen;
+  useEffect(() => {
+    if (connected) command({ t: 'armed', armed: inspecting });
+  }, [connected, inspecting, command]);
+
+  const selectedId = state.selectedNodeId;
+  useEffect(() => {
+    if (!connected || !selectedId) return;
+    if (pickedRef.current === selectedId) return; // selected from inside — already in view
+    command({ t: 'reveal', nodeId: selectedId });
+  }, [connected, selectedId, command]);
+
+  // the tree cannot see EMPTY slots in the document — the preview's declarations go through the
+  // session (which drops unchanged lists, so per-measure geometry does not wake subscribers)
+  useEffect(() => {
+    session.setDeclaredSlots(slots.map((slot) => ({ parentId: slot.ownerId, slot: slot.slot })));
+  }, [slots, session]);
+
+  const byId = useMemo(() => new Map(boxes.map((box) => [box.id, box])), [boxes]);
+  // a prefab's own block, selected or under the pointer, is framed by its own box
+  const partById = useMemo(() => new Map(parts.map((box) => [box.id, box])), [parts]);
+  const boxOf = (id: string): INodeBox | undefined => byId.get(id) ?? partById.get(id);
+  const selectedBox = selectedId ? boxOf(selectedId) : undefined;
+  // with Ctrl the prefab is the unit — the frame says what a Ctrl-click would take
+  const hoveredShownId = hoveredCtrl || ctrlHeld ? hoveredId : hoveredPart ?? hoveredId;
+  const hoveredBox = hoveredShownId && hoveredShownId !== selectedId ? boxOf(hoveredShownId) : undefined;
+  // The yellow mode: every picked element wears a pick box — pickedness is per element (a flat
+  // set in the session). The frame is THICK where a picked region BEGINS (the element's parent
+  // is not picked) and thin inside it, so what was actually clicked still reads at a glance.
+  const pickedBoxes = state.multiSelectedIds.map((id) => byId.get(id)).filter((box) => box !== undefined);
+
+  // the selected block's settings live beside it — unless the workbench still docks a settings
+  // panel, which then keeps them. Hidden while the page is the visitor's (inspector off), in the
+  // yellow mode and while moving: those modes are about the tree, not one block's settings.
+  const settingsPanels = ensureSettingsPanels(workbenchDi);
+  const panelCount = useSyncExternalStore(settingsPanels.subscribe, settingsPanels.snapshot, settingsPanels.snapshot);
+  // the popover's size is the author's wish, remembered across popovers and reloads
+  const [popoverSize, setPopoverSize] = useState<IPopoverSize>(() => readPopoverSize(localStorageOrNull()));
+  const resizePopover = useCallback((size: IPopoverSize) => {
+    setPopoverSize(size);
+    writePopoverSize(localStorageOrNull(), size);
+  }, []);
+  // what the open form asks for — its height with room enough, a wide field in it
+  const [popoverContent, setPopoverContent] = useState<IPopoverContent>({ height: 0, wide: false });
+  const tellPopoverContent = useCallback((content: IPopoverContent) => setPopoverContent(content), []);
+  // the open settings' form still on its way — the popover waits unseen, the button turns
+  const [settingsLoading, setSettingsLoading] = useState(false);
+  const tellSettingsLoading = useCallback((loading: boolean) => setSettingsLoading(loading), []);
+  // the PAGE's settings wait behind a button among the canvas tools: opening a draft selects its
+  // root, and a popover docked over the page would hide the very controls one opens a draft to
+  // use. Open for ONE document while its root stays selected — picking anything else closes them
+  const docKey = `${state.kind}:${state.pageName}:${state.draftId ?? `r${state.revision}`}`;
+  // PUBLISH from the bar: the draft becomes the live revision, and every session holding it —
+  // this canvas's first — reopens it as that revision, read-only (the pages list does the same
+  // from its rows; the listing refetches itself, the action invalidates it)
+  const hub = editingSessionHubOf(workbenchDi);
+  const publish = useServerAction({ token: publishPageToken, start: EServerActionStart.START_MANUAL });
+  const publishingRef = useRef<{ name: string; draftId: string; kind: ContentKind } | null>(null);
+  // the dialog that names the publication; the listing (the pages views' cache entry) says which
+  // revision this one replaces
+  const [publishAsk, setPublishAsk] = useState(false);
+  const [publishError, setPublishError] = useState<string | null>(null);
+  // the page's blocks with newer versions, and the window that updates them in one step (ADR-0061)
+  const holder = useDi(TILES_HOLDER_TOKEN);
+  const upgradeGroupsOfPage = useMemo(() => upgradeGroups(upgrades.outdated, upgrades.versions), [upgrades.outdated, upgrades.versions]);
+  const [updatesOpen, setUpdatesOpen] = useState(false);
+  const [updating, setUpdating] = useState(false);
+  const runUpdates = async (selected: ReadonlySet<string>) => {
+    const nodes = upgrades.outdated.filter((node) => selected.has(upgradeKey(node.upgrade.namespace, node.upgrade.name)));
+    setUpdating(true);
+    try {
+      session.upgradeNodes(await upgradeChanges(holder, nodes, upgrades.components));
+      notices?.show('publish', blocksLabel('Updated', nodes.length));
+      setUpdatesOpen(false);
+    } catch {
+      notices?.show('refuse', 'Could not update the blocks — nothing was changed');
+    } finally {
+      setUpdating(false);
+    }
+  };
+  const listing = useServerAction({ token: listPagesToken, input: { kind: state.kind } });
+  const listedPage = listing.isSuccess() && listing.serverData.ok
+    ? listing.serverData.pages.find((page) => page.name === state.pageName) ?? null
+    : null;
+  const liveOfPage = listedPage?.meta.live ?? null;
+  // a page the platform froze takes no drafts (its revision is a live reference, changed by deploys)
+  const pageLocked = listedPage?.meta.locked === true;
+  // A REVISION's way to an edit: a fresh draft of it, opened in a tab beside — like the pages list's
+  // "New draft"; without the workbench's tabs, in this canvas
+  const createDraft = useServerAction({ token: createPageDraftToken, start: EServerActionStart.START_MANUAL });
+  const tabs = useDiOptional(WORKSPACE_TOKEN);
+  useEffect(() => {
+    if (!createDraft.isSuccess() || !createDraft.serverData.ok || state.pageName === null) return;
+    const { draftId, page } = createDraft.serverData;
+    if (tabs) tabs.open({ kind: state.kind, page: state.pageName, draftId }, page);
+    else session.openPage(state.pageName, draftId, page, state.kind);
+  }, [createDraft]);
+  useEffect(() => {
+    if (createDraft.isSuccess() && !createDraft.serverData.ok) notices?.show('refuse', 'Could not make a draft of this revision');
+  }, [createDraft]);
+  useEffect(() => {
+    const asked = publishingRef.current;
+    if (!asked || publish.isLoading()) return;
+    publishingRef.current = null;
+    if (publish.isSuccess() && publish.serverData.ok) {
+      const { live } = publish.serverData;
+      const held = hub ? hub.keys().map((key) => hub.peek(key)).filter((s): s is NonNullable<typeof s> => s !== null) : [session];
+      for (const s of held) {
+        const st = s.snapshot();
+        if (st.kind === asked.kind && st.pageName === asked.name && st.draftId === asked.draftId && st.doc) s.openRevision(asked.name, live, st.doc, asked.kind);
+      }
+      notices?.show('publish', `Published as r${live}`);
+      setPublishAsk(false);
+    } else {
+      const code = publish.isError() ? publish.serverError.code : publish.isSuccess() && !publish.serverData.ok ? publish.serverData.code : 'unknown';
+      const issues = publish.isSuccess() && !publish.serverData.ok ? publish.serverData.issues ?? [] : [];
+      setPublishError([code, ...issues].join('\n'));
+    }
+  }, [publish]);
+  // the standing controls of the page's blocks, a button each in the bar; one card open at a time
+  const { chromes, rootOf } = useChromeNodes(state.doc);
+  const [openChrome, setOpenChrome] = useState<string | null>(null);
+  const openChromeNode = chromes.find((node) => node.id === openChrome) ?? null;
+  // the workbench's tools (ADR-0062): none inside a preview of the workbench itself
+  const editorTools = useDiOptional(EDITOR_TOOLS_TOKEN);
+  const tools = preview ? [] : editorTools?.list() ?? [];
+  // the tool open over this document, and what of it is open, live in the workbench's address
+  // (for the document in front): a reload, a shared link, a tab coming back open the same
+  const toolDesk = useDiOptional(WORKSPACE_TOKEN);
+  const toolTab = dockTab?.id ?? null;
+  const remembered = toolDesk && toolTab ? toolDesk.toolOf(toolTab) : null;
+  const [openTool, setOpenTool] = useState<string | null>(() => (preview ? null : remembered?.tool ?? null));
+  const toolState = useRef<string | null>(remembered?.state ?? null);
+  useEffect(() => {
+    if (toolDesk && toolTab) toolDesk.setTool(toolTab, openTool ? { tool: openTool, state: toolState.current } : null);
+  }, [toolDesk, toolTab, openTool]);
+  const openToolNode = tools.find((node) => node.id === openTool) ?? null;
+  const [pageSettingsFor, setPageSettingsFor] = useState<string | null>(null);
+  const pageSettingsOpen = pageSettingsFor === docKey && selectedId === state.doc?.id;
+  // A block's settings wait behind the button in its size chip: open beside the block they cover
+  // the page one looks at to decide where the next block goes. Any change of the selection turns
+  // them off — reset during the render that sees the change, so the next block never shows them for
+  // a frame; closing them is not stepping out of the selection either
+  const [settingsShown, setSettingsShown] = useState(false);
+  const [settingsSelection, setSettingsSelection] = useState(selectedId);
+  if (settingsSelection !== selectedId) {
+    setSettingsSelection(selectedId);
+    setSettingsShown(false);
+  }
+  useEffect(() => {
+    if (selectedId !== state.doc?.id) setPageSettingsFor(null);
+  }, [selectedId, state.doc?.id]);
+  // a prefab has no route and no head of its own: its root's settings go nowhere. The button
+  // toggles: open settings fold on a second press, and fold with any click away (the selection
+  // leaves the root), like every card of the inspector
+  const openPageSettings = state.doc && state.kind !== 'prefabs'
+    ? () => {
+      if (pageSettingsOpen) {
+        setPageSettingsFor(null);
+        return;
+      }
+      session.selectNode(state.doc!.id);
+      setPageSettingsFor(docKey);
+    }
+    : null;
+  // a prefab's own block selected: the block as its prefab holds it, under the id the page knows it by
+  const selectedPart = state.doc && isPartId(selectedId) ? prefabPartOf(state.doc, selectedId, project.treeOf) : null;
+  const selectedNode = state.doc && selectedId
+    ? findNodeDoc(state.doc, selectedId) ?? (selectedPart ? { ...selectedPart.node, id: selectedId } : null)
+    : null;
+  // …and naming a place for a block is its own mode: the insert popover takes the floor. A block
+  // the preview has not measured (hidden, not rendered) has no chip to open its settings from —
+  // its settings are the one way to it, so they show
+  const isRootSelected = selectedNode !== null && selectedNode.id === state.doc?.id;
+  const settingsAsked = isRootSelected ? pageSettingsOpen : settingsShown || selectedBox === undefined;
+  const showSettings = !preview && panelCount === 0 && selectedNode !== null && inspecting && !state.insertionPoint
+    && state.multiSelectedIds.length === 0 && !state.movingNodeId && settingsAsked;
+  const stageSize = viewport ?? { width: stageRef.current?.clientWidth ?? 800, height: stageRef.current?.clientHeight ?? 600 };
+  // a block the preview has not measured (hidden, not yet rendered) still has settings: docked
+  // the page's settings open in the stage's top-right corner; any other block's beside the block
+  const settingsPlacement = pageSettingsOpen
+    ? (() => {
+      const width = Math.min(popoverSize.width, stageSize.width - 16);
+      const y = 8;
+      return { x: Math.max(8, stageSize.width - width - 8), y, width, maxHeight: Math.max(160, stageSize.height - y - 8), fromBottom: false, side: 'below' as const };
+    })()
+    : placePopover(selectedBox ?? null, stageSize, {
+      top: 8,
+      width: popoverContent.wide ? Math.max(popoverSize.width, wideFieldWidth(stageRef.current, stageSize.width)) : popoverSize.width,
+      contentHeight: popoverContent.height,
+      // laid AGAINST the block — over its frame's 2px, so the two join into one piece (seamOf) —
+      // and above it clear of the corner tags, which stay where they are
+      gap: -2,
+      gapAbove: TAG_HEIGHT,
+    });
+  // where the popover joins the selection's frame: no border of its own there
+  const settingsSeam = !pageSettingsOpen && selectedBox ? seamOf(settingsPlacement, selectedBox) : null;
+  // the card steps out of the way while the page scrolls (it stands where the block no longer is)
+  // and while its block is out of sight — it comes back where the block is once both are over.
+  // Hidden, not closed: the form keeps its focus, its open picker, what is being typed
+  const settingsAway = scrolling || (!pageSettingsOpen && selectedBox !== undefined && outOfSight(selectedBox, stageSize));
+  const startsRegion = (id: string): boolean => {
+    const parent = state.doc ? parentOfNode(state.doc, id) : null;
+    return !parent || !state.multiSelectedIds.includes(parent.id);
+  };
+  const hoverCtrl = hoveredCtrl || ctrlHeld;
+  const point = state.insertionPoint;
+  // A picked place takes its ghost off the screen, and an unpicked one puts it back — neither
+  // sends the pointer anywhere, so a hover from before would survive both and keep drawing a
+  // frame nobody is pointing at. It looked exactly like a place that would not let go.
+  useEffect(() => setHoveredAdd(null), [point]);
+  const isChosen = (at: IInsertionPoint) => point?.parentId === at.parentId && point.slot === at.slot && point.index === at.index;
+  // pressing a ghost NAMES the place, and the insert popover opens beside it with the blocks that
+  // can go there. Pressing the chosen one again takes the choice back.
+  const pickPlace = (at: IInsertionPoint) => {
+    session.setInsertionPoint(isChosen(at) ? null : at);
+  };
+  // the room the agent made where the block will land (LANDING_NODE_ID) — a child the document
+  // does not have, so the slot it stands in counts it off again
+  const landingBox = point ? byId.get(LANDING_NODE_ID) : undefined;
+  const liveSlots = useMemo(() => (point && landingBox
+    ? slots.map((slot) => (slot.ownerId === point.parentId && slot.slot === point.slot ? { ...slot, filled: Math.max(0, slot.filled - 1) } : slot))
+    : slots), [slots, point, landingBox]);
+  // what a place lights up on screen: the container it joins — the page's own places light nothing
+  const rectOf = (add: IAddPoint): IRect | null => {
+    if (add.target.of !== 'container') return null;
+    const slot = liveSlots.find((s) => s.ownerId === add.at.parentId && s.slot === add.at.slot);
+    return slot ? drawableArea(slot) : null;
+  };
+  const nameOf = (nodeId: string) => {
+    const box = byId.get(nodeId);
+    return box ? shortName(box.reference) : nodeId;
+  };
+  /**
+   * Where a block may go RIGHT NOW, as ghosts. They follow the selection instead of covering the
+   * page:
+   *
+   * - a selected block offers the places next to it, in its parent's slot — before and after it,
+   *   along the way its neighbours run (axisAmong); the pointer's side decides which is shown;
+   * - …and the inside of each EMPTY slot it opens. A slot that holds blocks already is reached
+   *   through them: select its first or last block and add next to it;
+   * - with nothing selected — or the page root selected, which is the same thing — the page's own
+   *   ends: before the first block and after the last (the pointer's side again), or a single ghost
+   *   on an empty page.
+   *
+   * The page root is a special case throughout: its children are rendered by the root component
+   * itself, not through `useChildren`, so no marker is ever planted for it and its geometry comes
+   * from the children's own boxes.
+   */
+  const ghosts = useMemo((): IGhost[] => {
+    const doc = state.doc;
+    if (!doc) return [];
+    if (state.revision != null) return []; // a revision takes no blocks — no places to offer
+    const pointAt = (
+      parentId: string,
+      slotName: string,
+      index: number,
+      title: string,
+      testId: IAddPoint['testId'],
+      target: TAddTarget = { of: 'container' },
+    ): IAddPoint => ({
+      key: `${parentId}:${slotName}:${index}`,
+      title,
+      testId,
+      // the title travels WITH the pick: whoever answers it (the palette) repeats the same
+      // relative words the ghost spoke, instead of translating the place back into node ids
+      at: { parentId, slot: slotName, index, label: title },
+      target,
+    });
+    const roomIn = (parentId: string, slotName: string) => {
+      const declared = liveSlots.find((s) => s.ownerId === parentId && s.slot === slotName);
+      return !declared || hasRoom(declared); // the root's slot is never declared — assume room
+    };
+    const capitalized = (title: string) => `${title.charAt(0).toUpperCase()}${title.slice(1)}`;
+
+    if (!selectedId || selectedId === doc.id) {
+      const children = doc.children ?? [];
+      const drawn = children.map((child) => byId.get(child.id)).filter((box) => box !== undefined);
+      if (!drawn.length) {
+        // nothing on the page yet: one ghost at the top of it
+        const first = pointAt(doc.id, DEFAULT_SLOT, 0, 'add the first block', 'inspector-add-child-after-button', { of: 'page' });
+        return [{ point: first, place: 'free', at: { x: 8, y: 8 }, words: capitalized(first.title), side: 'inside' }];
+      }
+      // the page's own ends: a tag on the top edge of its first block, one hanging from its last
+      const first = drawn[0];
+      const last = drawn[drawn.length - 1];
+      const start = pointAt(doc.id, DEFAULT_SLOT, 0, `add above ${nameOf(children[0].id)}`, 'inspector-add-child-before-button', { of: 'page' });
+      const end = pointAt(doc.id, DEFAULT_SLOT, children.length, `add below ${nameOf(children[children.length - 1].id)}`, 'inspector-add-child-after-button', { of: 'page' });
+      return [
+        { point: start, place: 'free', at: { x: first.x, y: Math.max(0, first.y - TAG_HEIGHT) }, words: capitalized(start.title), side: 'start' },
+        { point: end, place: 'free', at: { x: last.x, y: last.y + last.height }, words: capitalized(end.title), side: 'end' },
+      ];
+    }
+
+    const found: IGhost[] = [];
+    // inside the selected block: a tag in each EMPTY slot, in the top-left corner of its container
+    // (where its resting outline is) — or at its marker, the very point a block would land at
+    for (const slot of liveSlots.filter((s) => s.ownerId === selectedId && hasRoom(s) && s.filled === 0)) {
+      const area = drawableArea(slot);
+      const inside = slotLabel(nameOf(slot.ownerId), slot.slot); // the same name the frame wears
+      const into = pointAt(slot.ownerId, slot.slot, 0, `add into ${inside}`, 'inspector-add-child-after-button');
+      found.push({ point: into, place: 'free', at: area ? { x: area.x, y: area.y } : { x: slot.x, y: slot.y }, words: capitalized(into.title), side: 'inside' });
+    }
+
+    // …and next to it, glued to its frame: the parent's slot, at the block's own position and just
+    // after it, on the edges its neighbours say (one under another — top and bottom; side by side —
+    // left and right)
+    const parent = parentOfNode(doc, selectedId);
+    const box = byId.get(selectedId);
+    if (parent && box) {
+      const slotName = findNodeDoc(doc, selectedId)?.slot ?? DEFAULT_SLOT;
+      const siblings = (parent.children ?? []).filter((child) => (child.slot ?? DEFAULT_SLOT) === slotName);
+      const index = siblings.findIndex((child) => child.id === selectedId);
+      if (index >= 0 && roomIn(parent.id, slotName)) {
+        const row = axisAmong(siblings.map((child) => byId.get(child.id)), index) === 'row';
+        const target: TAddTarget = parent.id === doc.id ? { of: 'page' } : { of: 'container' };
+        const name = nameOf(selectedId);
+        const before = pointAt(parent.id, slotName, index, `add before ${name}`, 'inspector-add-before-button', target);
+        const after = pointAt(parent.id, slotName, index + 1, `add after ${name}`, 'inspector-add-after-button', target);
+        found.push({ point: before, place: row ? 'left' : 'top', at: null, words: row ? capitalized(before.title) : 'Add above', side: 'start' });
+        found.push({ point: after, place: row ? 'right' : 'bottom', at: null, words: row ? capitalized(after.title) : 'Add below', side: 'end' });
+      }
+    }
+    return found;
+  }, [state.doc, state.revision, selectedId, liveSlots, byId]);
+
+  // what the pointer's side is read against: the selected block — or the page, its blocks' span
+  const sideGhost = ghosts.find((ghost) => ghost.side !== 'inside');
+  const pageBlocks = !selectedId || selectedId === state.doc?.id
+    ? (state.doc?.children ?? []).map((child) => byId.get(child.id)).filter((box) => box !== undefined)
+    : [];
+  sideRef.current = {
+    rect: selectedId && selectedId !== state.doc?.id
+      ? (selectedBox ?? null)
+      : pageBlocks.length
+        ? { x: 0, y: pageBlocks[0].y, width: viewport?.width ?? 0, height: pageBlocks[pageBlocks.length - 1].y + pageBlocks[pageBlocks.length - 1].height - pageBlocks[0].y }
+        : null,
+    axis: sideGhost?.place === 'left' || sideGhost?.place === 'right' ? 'row' : 'column',
+  };
+  // on screen: what is inside always, of the two sides only the pointer's — the glued one goes
+  // onto the selection's frame, the free ones stand on their own
+  const shownGhosts = ghosts.filter((ghost) => ghost.side === 'inside' || (ghost.side === 'end') === pointerAtEnd);
+  const gluedGhost = shownGhosts.find((ghost) => ghost.place !== 'free');
+  // the popover lying under the block takes the bottom edge — the ghost below rides on the seam,
+  // in the popover's head, still right under the block
+  const ghostOnSeam = showSettings && !settingsLoading && settingsSeam?.edge === 'top' && gluedGhost?.place === 'bottom' && pickedBoxes.length === 0 ? gluedGhost : undefined;
+  const freeGhosts = shownGhosts.filter((ghost) => ghost.place === 'free');
+
+  // the picked place is found among ALL the ghosts, both sides — the pointer wandering to the other
+  // half while the picker is open must not lose the place it named
+  const pickedGhost = point ? ghosts.find((ghost) => isChosen(ghost.point.at)) : undefined;
+  const pickedAdd = pickedGhost?.point;
+  // a hover only counts while its ghost is still on screen: pressing one takes it away without a
+  // pointer-leave, and a hover left behind would freeze a frame on the overlay
+  const hovered = hoveredAdd && shownGhosts.some((ghost) => ghost.point.key === hoveredAdd.key) ? hoveredAdd : null;
+  const marked = pickedAdd ?? (point ? null : hovered);
+  const markedRect = marked ? rectOf(marked) : null;
+  // the insert popover stands beside the place: the room made for the block once the preview has
+  // made it — until then the block whose ghost was pressed, or the free tag itself
+  const insertPlacement = (() => {
+    if (!point) return null;
+    const anchor = landingBox
+      ?? (pickedGhost?.place !== 'free' ? selectedBox : undefined)
+      ?? (pickedGhost?.at ? { ...pickedGhost.at, width: INSERT_POPOVER_WIDTH / 2, height: TAG_HEIGHT } : null);
+    return placePopover(anchor, stageSize, { top: 44, width: INSERT_POPOVER_WIDTH, minHeight: 260 });
+  })();
+
+  // every place the SELECTED block offers, filled ones included: "what can go inside this block"
+  // is the question a selection asks, and a slot with children is still a place
+  const restingSlots = marked ? [] : liveSlots
+    .filter((slot) => slot.ownerId === selectedId)
+    .map((slot) => ({ slot, area: drawableArea(slot) }))
+    .filter((entry): entry is { slot: ISlotBox; area: NonNullable<ISlotBox['area']> } => entry.area !== null);
+
+  // inside a preview realm the canvas must NOT spawn another preview (iframe-in-iframe forever
+  // when the workbench page previews itself)
+  if (preview) {
+    return <div className="canvas-view canvas-view__empty"
+                data-canvas-preview-stub>A preview inside a preview does not expand</div>;
+  }
+  if (!state.doc) {
+    return <div className="canvas-view canvas-view__empty"
+                data-canvas-empty>The preview of the opened page will appear here</div>;
+  }
+
+  return (
+    <TooltipHost>
+      {/* dock-panel-flush: opt-in to the dock's full-bleed panel contract (no padding around the iframe) */}
+      <div className={`canvas-view dock-panel-flush${fullscreen ? ' canvas-view--fullscreen' : ''}`}
+           data-canvas={state.pageName ?? undefined}
+           data-fullscreen={fullscreen || undefined}
+           /* a pointerDOWN inside this canvas is deliberate — the focus stays; a mere hover only
+              BORROWS it (markHovered), and the leave returns a still-borrowed focus to the
+              selection anchor (markLeft), taking the pale tree highlight along */
+           onPointerDownCapture={markInteractive}
+           onPointerEnter={markHovered}
+           onPointerLeave={() => {
+             session.hoverNode(null);
+             markLeft();
+           }}>
+        {/* the BUTTON shows the toggle's own state, not the full-screen override — leaving full
+            screen puts the editor back exactly as it was found */}
+        <ActionBar inspecting={state.inspecting}
+                   chromes={chromes}
+                   openChrome={openChrome}
+                   onChrome={(id) => setOpenChrome((open) => (open === id ? null : id))}
+                   tools={tools.map((node) => ({
+                     id: node.id,
+                     label: toolLabelOf(node),
+                     iconUrl: upgrades.components.find((c) => c.id === node.reference)?.iconUrl,
+                   }))}
+                   openTool={openToolNode ? openToolNode.id : null}
+                   onTool={(id) => {
+                     // another tool, or none: what was open of the last one is not its
+                     toolState.current = null;
+                     setOpenTool((open) => (open === id ? null : id));
+                   }}
+                   pageSettingsOpen={pageSettingsOpen}
+                   onPageSettings={openPageSettings}
+                   version={state.revision != null
+                     ? { kind: 'revision', rev: state.revision }
+                     : state.draftId !== null
+                       ? { kind: 'draft', name: (state.doc as { title?: string } | null)?.title ?? state.draftId.slice(0, 8), saving: state.dirty }
+                       : null}
+                   updates={state.revision == null && state.doc !== null && upgrades.outdated.length ? {
+                     count: upgrades.outdated.length,
+                     onOpen: () => setUpdatesOpen(true),
+                   } : null}
+                   newDraft={state.revision != null && state.pageName !== null && !pageLocked ? {
+                     busy: createDraft.isLoading(),
+                     onNewDraft: () => createDraft.start!({ name: state.pageName!, fromRev: state.revision!, kind: state.kind }),
+                   } : null}
+                   canCut={state.revision == null && session.copySelection().length > 0}
+                   canCopy={session.copySelection().length > 0}
+                   canPaste={state.revision == null && state.doc !== null
+                   && typeof navigator !== 'undefined' && Boolean(navigator.clipboard?.readText)}
+                   canUndo={state.revision == null && (state.doc?.history?.length ?? 0) > 0}
+                   canRedo={state.revision == null && (state.doc?.redo?.length ?? 0) > 0}
+                   previewHref={previewHref}
+                   publish={state.draftId !== null && state.pageName !== null ? {
+                     busy: publishingRef.current !== null && publish.isLoading(),
+                     dirty: state.dirty,
+                     onPublish: () => {
+                       setPublishError(null);
+                       setPublishAsk(true);
+                     },
+                   } : null}
+                   onShare={() => {
+                     // the WINDOW's clipboard: this is browser code, and a test realm's bare
+                     // `navigator` is the host's, not the document's
+                     const clipboard = typeof window === 'undefined' ? undefined : window.navigator.clipboard;
+                     if (!clipboard?.writeText) {
+                       notices?.show('link', 'Copying is not available here');
+                       return;
+                     }
+                     clipboard.writeText(previewHref)
+                       .then(() => notices?.show('link', 'Preview link copied'))
+                       .catch(() => notices?.show('link', 'Could not copy the link'));
+                   }}
+                   onRestart={() => setRestarts((count) => count + 1)}
+                   onFullscreen={() => setFullscreen(true)}
+                   onInspecting={(on) => session.setInspecting(on)}
+                   onCut={() => {
+                     const blocks = session.copySelection();
+                     if (!blocks.length) return;
+                     void navigator.clipboard?.writeText(serializeBlocks(blocks));
+                     session.removeSelection();
+                     notices?.show('cut', blocksLabel('Cut', blocks.length));
+                   }}
+                   onCopy={() => {
+                     const blocks = session.copySelection();
+                     if (!blocks.length) return;
+                     void navigator.clipboard?.writeText(serializeBlocks(blocks));
+                     notices?.show('copy', blocksLabel('Copied', blocks.length));
+                   }}
+                   onPaste={() => {
+                     void navigator.clipboard?.readText().then((text) => {
+                       const blocks = parseBlocks(text);
+                       if (!blocks) return;
+                       session.pasteNodes(blocks);
+                       notices?.show('paste', blocksLabel('Pasted', blocks.length));
+                     }).catch(() => undefined); // permission refused → nothing to paste
+                   }}
+                   onUndo={() => {
+                     session.undo(); // the button is disabled on an empty stack — the step happened
+                     notices?.show('undo', 'Undone');
+                   }}
+                   onRedo={() => {
+                     session.redo();
+                     notices?.show('redo', 'Redone');
+                   }} />
+        <div className="canvas-view__stage"
+             ref={stageRef}>
+          {fullscreen ? (
+            <button type="button"
+                    className="canvas-view__close"
+                    data-test-id="canvas-exit-fullscreen-button"
+                    data-action="exit-fullscreen"
+                    data-tooltip="Leave full screen"
+                    aria-label="Leave full screen"
+                    onClick={() => setFullscreen(false)}>
+              <svg viewBox="0 0 16 16"
+                   aria-hidden="true">
+                <path d="M4.5 4.5l7 7M11.5 4.5l-7 7"
+                      stroke="currentColor"
+                      strokeWidth="1.8" />
+              </svg>
+            </button>
+          ) : null}
+          <iframe key={frameKey}
+                  ref={frameRef}
+                  className="canvas-view__frame"
+                  title={state.revision != null
+                    ? `preview: ${tokenEntity} r${state.revision}`
+                    : `preview: ${tokenEntity} draft ${state.draftId}`}
+                  data-preview-src={src}
+                  /* which build of the frame this is: bumped only when the preview cannot be
+                     updated in place, so a save that changes nothing structural leaves it alone */
+                  data-frame-build={rebuilds}
+                  src={src} />
+          <div className="canvas-view__overlay"
+               data-test-id="inspector"
+               data-overlay-connected={connected || undefined}
+               data-overlay-boxes={boxes.length}
+               data-overlay-slots={slots.length}>
+            <div className="canvas-view__layer"
+                 ref={overlayRef}>
+              {/* inspector off: the page is the visitor's for a moment, and nothing is drawn on it */}
+              {inspecting && marked && marked.target.of === 'container' ? (
+              /* picked: everything else steps back, so the green frame on screen answers "which
+                   block does it join" — and the palette wears the same frame. Hovered: the same
+                   frame, shown before the click rather than after it. A place of the page itself
+                   lights nothing: the page is no container, its ghost is the answer */
+                <TargetFrame rect={markedRect}
+                             area={`${marked.at.parentId}:${marked.at.slot}`}
+                             label={slotLabel(nameOf(marked.at.parentId), marked.at.slot)} />
+              ) : null}
+              {/* …and the very spot, once the preview has made room for it */}
+              {inspecting && point && landingBox ? <LandingFrame box={landingBox} /> : null}
+              {inspecting && !point ? (
+                <>
+                  {restingSlots.map(({ slot, area }) => (
+                    <SlotArea key={`area:${slot.ownerId}:${slot.slot}`}
+                              slot={slot}
+                              area={area} />
+                  ))}
+                  {/* the slot AS the selection (picked in the tree): its container wears the green
+                      child box — the same frame an insert lights, because that is what it means */}
+                  {(() => {
+                    const sel = state.selectedSlot;
+                    const declared = sel
+                      ? slots.find((s) => s.ownerId === sel.parentId && s.slot === sel.slot)
+                      : undefined;
+                    if (!sel || !declared) return null;
+                    return <TargetFrame rect={drawableArea(declared)}
+                                        area={`${sel.parentId}:${sel.slot}`}
+                                        label={slotLabel(nameOf(sel.parentId), sel.slot)} />;
+                  })()}
+                  {hoveredBox ? <Outline box={hoveredBox}
+                                         kind={hoverCtrl ? 'hover-pick' : 'hover'} /> : null}
+                  {/* every picked element is shown; the region's first element wears the thick frame */}
+                  {pickedBoxes.map((box) => (
+                    <Outline key={`pick:${box.id}`}
+                             box={box}
+                             kind={startsRegion(box.id) ? 'pick' : 'pick-covered'} />
+                  ))}
+                  {selectedBox ? (
+                    <Outline box={selectedBox}
+                             kind="select"
+                             size
+                             within={stageSize}
+                             label={shortName(selectedBox.reference)}
+                             onSettings={selectedBox.id === state.doc.id || selectedNode === null
+                               ? undefined // the page's settings live behind the bar's button; a library prefab's block has none to show
+                               : () => setSettingsShown((shown) => !shown)}
+                             settingsOpen={settingsShown}
+                             settingsLoading={showSettings && settingsLoading}
+                             // the ghosts belong to the insert flow — the yellow mode holds the floor
+                             ghost={gluedGhost && gluedGhost.place !== 'free' && !ghostOnSeam && pickedBoxes.length === 0 ? {
+                               place: gluedGhost.place,
+                               node: <GhostTab ghost={gluedGhost}
+                                               height={Math.min(selectedBox.height, SIDE_TAB_MAX_HEIGHT)}
+                                               onPick={pickPlace}
+                                               onHover={setHoveredAdd} />,
+                             } : undefined}
+                             onRemove={selectedBox.id === state.doc.id || state.revision != null || isPartId(selectedBox.id)
+                               ? undefined // no page without its root; no removals in a read-only view; a prefab's block is the prefab's
+                               : () => session.removeNode(selectedBox.id)} />
+                  ) : null}
+                  {pickedBoxes.length === 0 && freeGhosts.map((ghost) => (
+                    <GhostTab key={ghost.point.key}
+                              ghost={ghost}
+                              onPick={pickPlace}
+                              onHover={setHoveredAdd} />
+                  ))}
+                </>
+              ) : null}
+            </div>
+          </div>
+          {!preview && !fullscreen && openChromeNode ? <ChromeCard node={openChromeNode}
+                                                                   rootReference={rootOf(openChromeNode)} /> : null}
+          {!fullscreen && openToolNode ? <ToolPanel key={openToolNode.id}
+                                                    node={openToolNode}
+                                                    instance={bridgeId}
+                                                    session={session}
+                                                    previewHref={previewHref}
+                                                    frame={frameRef}
+                                                    state={{
+                                                      read: () => toolState.current,
+                                                      write: (next) => {
+                                                        toolState.current = next;
+                                                        if (toolDesk && toolTab) toolDesk.setTool(toolTab, { tool: openToolNode.id, state: next });
+                                                      },
+                                                    }}
+                                                    onClose={() => {
+                                                      toolState.current = null;
+                                                      setOpenTool(null);
+                                                    }} /> : null}
+          {point && insertPlacement && inspecting && !fullscreen ? (
+            <InsertPopover session={session}
+                           point={point}
+                           placement={insertPlacement} />
+          ) : null}
+          {updatesOpen && upgradeGroupsOfPage.length && typeof document !== 'undefined' ? (
+            <UpdatesModal host={document}
+                          groups={upgradeGroupsOfPage}
+                          busy={updating}
+                          onCancel={() => setUpdatesOpen(false)}
+                          onConfirm={(selected) => void runUpdates(selected)} />
+          ) : null}
+          {publishAsk && state.draftId !== null && state.pageName !== null && typeof document !== 'undefined' ? (
+            <PublishModal host={document}
+                          noun={state.kind === 'prefabs' ? 'prefab' : 'page'}
+                          route={state.kind === 'prefabs' ? state.pageName : pattern}
+                          suggested={(state.doc as { title?: string } | null)?.title ?? state.draftId.slice(0, 8)}
+                          live={liveOfPage}
+                          publishing={publishingRef.current !== null && publish.isLoading()}
+                          error={publishError}
+                          onCancel={() => setPublishAsk(false)}
+                          onConfirm={(title) => {
+                            if (state.draftId === null || state.pageName === null) return;
+                            setPublishError(null);
+                            publishingRef.current = { name: state.pageName, draftId: state.draftId, kind: state.kind };
+                            publish.start!({ name: state.pageName, draftId: state.draftId, kind: state.kind, title });
+                          }} />
+          ) : null}
+          {showSettings && selectedNode ? (
+            <SettingsPopover session={session}
+                             state={state}
+                             hidden={settingsAway}
+                             placement={settingsPlacement}
+                             size={popoverSize}
+                             onResize={resizePopover}
+                             onContent={tellPopoverContent}
+                             onLoading={tellSettingsLoading}
+                             // putting the settings away keeps the selection: they were in the
+                             // way, the block was not
+                             onClose={isRootSelected ? () => setPageSettingsFor(null) : () => setSettingsShown(false)}
+                             seam={settingsSeam}
+                             seamGhost={ghostOnSeam ? <GhostTab ghost={ghostOnSeam}
+                                                                onPick={pickPlace}
+                                                                onHover={setHoveredAdd} /> : null}
+                             stage={stageSize}
+                             reference={selectedNode.reference}
+                             placed={upgrades.versions.placedAt(selectedNode.reference)} />
+          ) : null}
+        </div>
+      </div>
+    </TooltipHost>
+  );
+}
+
+export default markInternalTile(defineComponentSide<ICanvasSettings>({
+  Component: Canvas,
+  defaultSettings() {
+    return {};
+  },
+}));