Canvas unification — Phase 2a: tool-keyed interaction dispatcher

[vibhavkatre]

What & why

Phase 2a of the canvas unification. Converts the surface-interaction seam from a single-slot ref into a layer-keyed registry resolved by the active tool.

Today each type's interaction composable registers its pointer handlers into one shared modeInteraction ref. That's fine when only one layer mounts (single-type docs), but the unified canvas mounts several layers at once — they'd clobber each other (last-writer-wins). This makes registration keyed by layer and adds a pure resolver that picks the right handler for the active tool.

Legacy is unchanged: a single-type document registers exactly one surface layer, so the resolver returns it regardless of tool — identical behaviour.

Changes

• useModeInteraction.js: registry ref { layerKey: handlers }; registerModeInteraction(ref, layerKey, handlers); new pure resolveModeHandlers(registry, activeTool) (0 → null, 1 → that one, many → whiteboard-tools→whiteboard else the other).
• whiteboard + flowchart composables register under keys and detach on unmount (flowchart gains a teardown it was missing).
• DiagramCanvas.vue resolves handlers by active tool in delegatesSurface() / delegateSurfaceEvent().

Testing

• Build ✅ · 100 unit tests ✅ (adds 4 for resolveModeHandlers).
• Live-app regression ✅ — pen-drawing on a whiteboard still commits a stroke through the refactored seam (1 stroke, 11 points, no page errors); screenshot confirms. Flowchart registers via the identical single-key path (covered by the resolver unit tests; handlers unchanged).
• Not user-visible on its own — enabling multiple registrants (unified rendering) is the next phase.

🤖 Generated with Claude Code

[greptile-apps]

Confidence Score: 4/5

Safe to merge; the registry logic is correct and the single-registrant (legacy) path is unchanged.

The double activeModeHandlers() call on every pointermove is the only notable issue — wasteful but not incorrect. Core routing logic and teardown are sound.

DiagramCanvas.vue — the duplicated registry resolution in delegateSurfaceEvent.

_{Reviews (1): Last reviewed commit: "Frappe Draw: canvas unification phase 2a..." | Re-trigger Greptile}

[greptile-apps]

delegateSurfaceEvent calls delegatesSurface() (which already runs activeModeHandlers()) and then calls activeModeHandlers() a second time. On pointermove this doubles the registry resolution on every frame.

Suggested change

	function delegateSurfaceEvent(handlerName, event) {
	if (!delegatesSurface()) return false
	const handler = modeInteraction.value[handlerName]
	const handlers = activeModeHandlers()
	const handler = handlers && handlers[handlerName]
	function delegateSurfaceEvent(handlerName, event) {
	const handlers = activeModeHandlers()
	if (!modeStrategy.value.handlesSurfaceInteraction || handlers == null) return false
	const handler = handlers[handlerName]