Respect native input ownership before canvas keyboard cancellation

src/components/canvas/headless-graph-canvas.tsx

@@ -16,7 +16,7 @@ import {createOverlayIndex} from "@/lib/canvas-bindings/overlays";
 import {CanvasOverlays} from "./canvas-overlays";
 import {createProjectedPaintIndex} from "@/lib/canvas-bindings/projected-paint";
 import {createSessionFrameSource} from "@/lib/canvas-bindings/session-frames";
-import {routeCanvasKey} from "@/lib/canvas-bindings/input-router";
+import {routeCanvasKey,canvasKeyContext} from "@/lib/canvas-bindings/input-router";
 import {hitProjectedCanvas} from "@/lib/canvas-bindings/hit-query";
 import {compatConnector,measuredConnector} from "@/lib/canvas-bindings/connectors";
 import {createLoadingRendererCatalog} from '@/lib/canvas-bindings/renderers';
@@ -173,9 +173,14 @@ function CanvasView({ engine, board, viewId, renderers,fitLoading=true }: { engi
   const blocked = pending.some(operation => operation.phase === 'blocked' && operation.blockers.some(reason => reason !== 'waiting_digest')) || [...root.runtime.ledger.requests.values()].some(request => request.phase !== 'resolved' && request.error && request.retryAt === undefined) || root.runtime.conflicts.size > 0;
   useEffect(() => {
     const cancel = () => { const state = engine.sessions.getSnapshot(); if (state.gesture?.viewId === viewId || state.connectionGesture?.viewId === viewId) engine.sessions.cancel('view_interrupted'); drag.current = null; };
-    const escape = (event: KeyboardEvent) => { const state=engine.sessions.getSnapshot(),element=event.target instanceof Element?event.target:null;if(event.key==='Escape'&&!event.defaultPrevented&&!event.isComposing&&!element?.closest('input,textarea,[contenteditable]:not([contenteditable="false"]),[role="textbox"],[role="dialog"],[role="menu"]')&&(state.gesture?.viewId===viewId||state.connectionGesture?.viewId===viewId)){cancel();} };
-    window.addEventListener('blur', cancel); window.addEventListener('keydown', escape, true);
-    return () => { window.removeEventListener('blur', cancel); window.removeEventListener('keydown', escape, true); };
+    // Bubble after the target/React handlers: an input owner can claim Escape first.
+    const escape = (event: KeyboardEvent) => {
+      if(event.key!=='Escape')return;
+      const claim=routeCanvasKey({key:event.key,composing:event.isComposing,defaultPrevented:event.defaultPrevented,...canvasKeyContext(event)},{gesture:()=>{const state=engine.sessions.getSnapshot();if(state.gesture?.viewId!==viewId&&state.connectionGesture?.viewId!==viewId)return false;cancel();return true;}});
+      if(claim==='gesture'){event.preventDefault();event.stopPropagation();}
+    };
+    window.addEventListener('blur', cancel); window.addEventListener('keydown', escape);
+    return () => { window.removeEventListener('blur', cancel); window.removeEventListener('keydown', escape); };
   }, [engine, viewId]);
   const modes = view.modes;
   // Native culling keeps the full graph in React Flow. Retain every mounted editor/lease
@@ -235,8 +240,7 @@ function CanvasView({ engine, board, viewId, renderers,fitLoading=true }: { engi
     onPointerDownCapture={event => { if (event.button === 0 && (event.target as HTMLElement).closest('.react-flow__node')) pointerStart.current = {...flow.screenToFlowPosition({ x: event.clientX, y: event.clientY }),pointerId:event.pointerId}; }}
     onPointerCancelCapture={event => { const currentDrag=drag.current;if(!currentDrag||currentDrag.pointerId!==undefined&&currentDrag.pointerId!==event.pointerId)return;const state=engine.sessions.getSnapshot();if(state.gesture?.viewId===viewId&&state.gesture.token===currentDrag.token)engine.sessions.cancel('pointer_cancel');drag.current=null; }}
     onKeyDown={event => {
-      const element=event.target instanceof Element?event.target:null;
-      const claim=routeCanvasKey({key:event.key,composing:event.nativeEvent.isComposing,textEditing:!!element?.closest('input,textarea,[contenteditable]:not([contenteditable="false"]),[role="textbox"]'),overlay:!!element?.closest('[role="dialog"],[role="menu"]'),defaultPrevented:event.defaultPrevented,meta:event.metaKey,ctrl:event.ctrlKey,alt:event.altKey,shift:event.shiftKey},{
+      const claim=routeCanvasKey({key:event.key,composing:event.nativeEvent.isComposing,...canvasKeyContext(event.nativeEvent),defaultPrevented:event.defaultPrevented,meta:event.metaKey,ctrl:event.ctrlKey,alt:event.altKey,shift:event.shiftKey},{
         gesture:input=>{const state=engine.sessions.getSnapshot();if(input.key!=='Escape'||state.gesture?.viewId!==viewId&&state.connectionGesture?.viewId!==viewId)return false;engine.sessions.cancel('escape');drag.current=null;return true;},
         tool:input=>{if(input.ctrl||input.meta||input.alt||input.shift)return false;const key=input.key.toLowerCase();if(key!=='h'&&key!=='v')return false;engine.sessions.tool(viewId,key==='h'?'pan':'select');return true;},
         shortcut:input=>{if(input.alt)return false;if((input.meta||input.ctrl)&&input.key.toLowerCase()==='z'){report(input.shift?engine.editor.history.redo():engine.editor.history.undo());return true;}if(!input.meta&&!input.ctrl&&!input.shift&&(input.key==='Delete'||input.key==='Backspace')&&current.current.view.selection.size){removeSelected();return true;}return false;},

src/components/canvas/node-style-toolbar.tsx

@@ -8,6 +8,7 @@ import type { TextStyle } from "@/lib/canvas-elements";
 import { ResizeToggle } from "./transformable-node";
 import {useCanvasOverlay} from "./canvas-overlays";
 import {useScopedNodeEditing} from "./node-editing";
+import {canvasKeyContext} from "@/lib/canvas-bindings/input-router";
 import styles from "./canvas.module.css";
 
 export function NodeStyleToolbar({ id, data, selected }: NodeProps<CanvasNode>) {
@@ -20,7 +21,12 @@ export function NodeStyleToolbar({ id, data, selected }: NodeProps<CanvasNode>)
   return <NodeToolbar style={{ zIndex: 100, pointerEvents: "auto" }} isVisible={true} position={Position.Top} offset={34}>
     <AnimatePresence>{selected && <motion.div ref={overlay} initial={{ opacity: 0, y: reduce ? 0 : 5 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: reduce ? 0 : 5 }} transition={{ duration: reduce ? 0 : 0.14 }} className={`${styles.styleToolbar} nodrag nopan nowheel`} data-node-style={id} role="toolbar" aria-label="元素样式"
       onPointerDown={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()} onDoubleClick={(event) => event.stopPropagation()}
-      onKeyDown={(event) => { if (event.key !== "Escape") event.stopPropagation(); }}>
+      onKeyDown={(event) => {
+        if(event.key!=="Escape"){event.stopPropagation();return;}
+        if(event.defaultPrevented||event.nativeEvent.isComposing||canvasKeyContext(event.nativeEvent).textEditing)return;
+        // The registered overlay owns its mode dismissal; global shortcuts stay out.
+        editing.rotate(null);editing.resize(null);event.preventDefault();event.stopPropagation();
+      }}>
       {!(["image", "plain-image"].includes(data.kind)) && <label title="文字或图标颜色" className={styles.colorPicker}><span style={{ background: style.color || "#37352f" }} /><input aria-label="文字或图标颜色" type="color" value={style.color || "#37352f"} onChange={(event) => patch({ color: event.target.value })} /></label>}
       {text && <>
         <select aria-label="字体" value={style.fontFamily || "sans"} onChange={(event) => patch({ fontFamily: event.target.value as TextStyle["fontFamily"] })}><option value="sans">正文</option><option value="serif">衬线</option><option value="mono">等宽</option></select>

src/components/canvas/transformable-node.tsx

@@ -11,6 +11,7 @@ import { NodeStyleToolbar } from "./node-style-toolbar";
 import { MembershipBadge } from "./frame-feedback";
 import { ContentHandles } from "./content-handles";
 import {ownsPointerCapture,acquirePointerCapture,releasePointerCapture} from "@/lib/canvas-bindings/pointer-capture";
+import {canvasKeyContext,routeCanvasKey} from "@/lib/canvas-bindings/input-router";
 import styles from "./canvas.module.css";
 
 export {NodeEditing} from "./node-editing";
@@ -38,7 +39,11 @@ export function TransformableNode(props: NodeProps<CanvasNode> & { children: Rea
     const outside = (event: globalThis.PointerEvent) => {
       if (!frame.current?.contains(event.target as Node) && !(event.target as Element).closest?.('[data-rotate-toggle="' + id + '"], [data-resize-toggle="' + id + '"]')) { editing.rotate(null); editing.resize(null); }
     };
-    const escape = (event: KeyboardEvent) => { if (event.key === "Escape" && !event.defaultPrevented && !event.isComposing && !(event.target instanceof Element && event.target.closest('input,textarea,[contenteditable]:not([contenteditable="false"]),[role="textbox"],[role="dialog"],[role="menu"]'))) { cancelGesture(); editing.rotate(null); editing.resize(null); } };
+    const escape = (event: KeyboardEvent) => {
+      if(event.key!=="Escape")return;
+      const claim=routeCanvasKey({key:event.key,composing:event.isComposing,defaultPrevented:event.defaultPrevented,...canvasKeyContext(event)},{tool:()=>{cancelGesture();editing.rotate(null);editing.resize(null);return true;}});
+      if(claim==='tool'){event.preventDefault();event.stopPropagation();}
+    };
     window.addEventListener("pointerdown", outside, true);
     window.addEventListener("keydown", escape);
     return () => { window.removeEventListener("pointerdown", outside, true); window.removeEventListener("keydown", escape); };