fix: stale closure bug preventing canvas tools from creating elements

- CanvasArea: add useEffect to refresh InteractionEngine callbacks when props change
- App.tsx: handleElementCreated/Deleted/Modified now use functional setElements updates
- Root cause: CanvasArea init useEffect had empty deps, capturing stale callbacks at mount
- handleElementCreated used [...elements, el] with stale elements=[] closure
- Each new element replaced all previous ones instead of appending
- All 343 tests pass, tsc clean

frontend/src/components/CanvasArea.tsx

@@ -72,6 +72,23 @@ const CanvasArea: React.FC<CanvasAreaProps> = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Update callbacks when they change (avoids stale closures)
+  useEffect(() => {
+    const interaction = interactionRef.current;
+    if (!interaction) return;
+    interaction.setCallbacks({
+      onElementCreated,
+      onElementsDeleted,
+      onElementsModified,
+      onCursorMoved,
+      onToolStateChanged,
+      onTextEdit,
+      onCommandTrigger,
+      onSelectionChange,
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onElementCreated, onElementsDeleted, onElementsModified, onCursorMoved, onToolStateChanged, onTextEdit, onCommandTrigger, onSelectionChange]);
+
   // Resize canvas to fill container
   useEffect(() => {
     const canvas = canvasRef.current;