The selected board outlines the element under the pointer again; Space on a control is the control's

Dropping the inspector took its in-board agent, and with it the outline a
board drew round each element as the pointer crossed it. The selected board
now loads a scripted copy over itself that does only that, fed the canvas's
pointer in board px, as the inspected board was.

Space no longer presents a board while a button, link or other control has
the focus.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: Jing-yilin

canvas/src/App.tsx

@@ -58,7 +58,12 @@ import {
   CANVAS_FILE_SHAPE_TYPE,
   CanvasFileShapeUtil,
 } from "./CanvasFileShapeUtil";
-import { asCanvasTarget, installDoubleClickZoom, zoomToFill } from "./canvasClicks";
+import {
+  asCanvasTarget,
+  installBoardHover,
+  installDoubleClickZoom,
+  zoomToFill,
+} from "./canvasClicks";
 import { CanvasPresent } from "./CanvasPresent";
 import { attachToChat } from "./canvasAttach";
 import { CanvasStatusBannerShapeUtil } from "./CanvasStatusBannerShapeUtil";
@@ -1280,7 +1285,9 @@ export default function App() {
     if (!sync.apply() && !reloaded)
       requestAnimationFrame(() => editor.zoomToFit());
     const disposeZoom = installDoubleClickZoom(editor);
+    const disposeHover = installBoardHover(editor);
     return () => {
+      disposeHover();
       disposeContent();
       disposeComments();
       disposeZoom();

canvas/src/CanvasFileShapeUtil.tsx

@@ -6,7 +6,9 @@ import {
   T,
   type RecordProps,
   type TLShape,
+  useEditor,
   useIsEditing,
+  useValue,
 } from "tldraw";
 import { local } from "./canvasIndex";
 import {
@@ -18,6 +20,22 @@ import {
 
 export const CANVAS_FILE_SHAPE_TYPE = "canvas-file" as const;
 
+/**
+ * Outlines the element under the canvas's pointer, which installBoardHover (canvasClicks.ts)
+ * posts in board px as `sp:at`; a point off the board is (-1, -1) and clears it. A path is its
+ * icon's, so an svg outlines whole. ES5, since it runs in whatever the board is.
+ */
+const HOVER =
+  "<script>(function(){var d=document.createElement('div');" +
+  "d.style.cssText='position:fixed;pointer-events:none;z-index:2147483647;display:none;box-sizing:border-box;box-shadow:0 0 0 1px #006EFE';" +
+  "document.documentElement.appendChild(d);" +
+  "addEventListener('message',function(e){var m=e.data;if(!m||m.type!=='sp:at')return;" +
+  "var el=document.elementFromPoint(m.x,m.y);if(el&&el.closest&&el.closest('svg'))el=el.closest('svg');" +
+  "if(!el||el===document.body||el===document.documentElement){d.style.display='none';return;}" +
+  "var r=el.getBoundingClientRect(),s=d.style;s.display='block';s.left=r.left+'px';s.top=r.top+'px';s.width=r.width+'px';s.height=r.height+'px';});" +
+  "})();</" +
+  "script>";
+
 declare module "tldraw" {
   export interface TLGlobalShapePropsMap {
     [CANVAS_FILE_SHAPE_TYPE]: {
@@ -35,6 +53,12 @@ export type CanvasFileShape = TLShape<typeof CANVAS_FILE_SHAPE_TYPE>;
 function CanvasFile({ shape }: { shape: CanvasFileShape }) {
   const isEditing = useIsEditing(shape.id);
   const html = useCanvasFileHtml(shape.props.path);
+  const editor = useEditor();
+  const selected = useValue(
+    "board selected",
+    () => editor.getOnlySelectedShapeId() === shape.id,
+    [editor, shape.id],
+  );
 
   // Behind the container, which is transparent, so the frame shows through it. Safari routes a
   // wheel to an iframe's own scrolling area whatever pointer-events says, so a two-finger pan
@@ -69,12 +93,33 @@ function CanvasFile({ shape }: { shape: CanvasFileShape }) {
       }}
     >
       {html ? (
-        <iframe
-          title={shape.props.name}
-          srcDoc={html}
-          sandbox=""
-          style={{ ...frame, zIndex: isEditing ? undefined : -1 }}
-        />
+        <>
+          <iframe
+            title={shape.props.name}
+            srcDoc={html}
+            sandbox=""
+            style={{ ...frame, zIndex: isEditing ? undefined : -2 }}
+          />
+          {/* The selected board outlines the element under the pointer (HOVER). It loads over the
+              board rather than into its frame: Chrome drops a second srcdoc navigation while the
+              first is pending and leaves the frame blank, and a remount reloads the mockup under
+              the click that selected it. Pixel for pixel the same board, so the swap is invisible.
+              `allow-scripts` and deliberately not `allow-same-origin`, which together would let
+              the board reach back out into the canvas. */}
+          {selected ? (
+            <iframe
+              title={shape.props.name}
+              srcDoc={
+                /<\/body>/i.test(html)
+                  ? html.replace(/<\/body>/i, (tag) => HOVER + tag)
+                  : html + HOVER
+              }
+              sandbox="allow-scripts"
+              data-sp-hover={shape.id}
+              style={{ ...frame, zIndex: isEditing ? undefined : -1 }}
+            />
+          ) : null}
+        </>
       ) : hasCanvasFile(shape.props.path) ? null : (
         // A board that exists but is not in yet renders nothing, so the frame fills in when its
         // chunk arrives rather than flashing an error first.

canvas/src/CanvasPresent.tsx

@@ -22,12 +22,14 @@ export function CanvasPresent({ editor }: { editor: Editor | null }) {
     if (!editor || shown) return;
     const onDown = (e: KeyboardEvent) => {
       if (e.code !== "Space" || e.repeat) return;
-      const typing =
+      // Space on a focused control is that control's: typing, or pressing a button.
+      const control =
         e.target instanceof HTMLElement &&
         (e.target.isContentEditable ||
-          e.target.tagName === "INPUT" ||
-          e.target.tagName === "TEXTAREA");
-      if (typing || editor.getEditingShapeId()) return;
+          e.target.closest(
+            "input, textarea, select, button, a[href], [role=button], [role=menuitem], [role=tab]",
+          ));
+      if (control || editor.getEditingShapeId()) return;
       const selected = editor.getSelectedShapes();
       const target = selected.length === 1 && asCanvasTarget(selected[0]);
       if (!target) return;

canvas/src/canvasClicks.ts

@@ -1,6 +1,7 @@
 import type {
   Editor,
   StateNode,
+  TLEventInfo,
   TLImageShape,
   TLPageId,
   TLShape,
@@ -96,3 +97,29 @@ export function installDoubleClickZoom(editor: Editor) {
     idle.onDoubleClick = own;
   };
 }
+
+/**
+ * The selected board's frame never takes the pointer, so that panning, zooming and the comment
+ * tool keep working over it: the canvas's pointer goes in as a board coordinate instead, for its
+ * outline of the element under it (CanvasFileShapeUtil.tsx, HOVER). Returns the uninstaller.
+ */
+export function installBoardHover(editor: Editor) {
+  const onEvent = (info: TLEventInfo) => {
+    if (info.type !== "pointer" || info.name !== "pointer_move") return;
+    const frame = document.querySelector<HTMLIFrameElement>(
+      "iframe[data-sp-hover]",
+    );
+    if (!frame) return;
+    const hit = shapeUnderPointer(editor);
+    const at =
+      hit?.id === frame.dataset.spHover &&
+      editor.getCurrentToolId() === "select"
+        ? editor.getPointInShapeSpace(hit, editor.inputs.getCurrentPagePoint())
+        : { x: -1, y: -1 };
+    frame.contentWindow?.postMessage({ type: "sp:at", x: at.x, y: at.y }, "*");
+  };
+  editor.on("event", onEvent);
+  return () => {
+    editor.off("event", onEvent);
+  };
+}