fix: Canvas drop handler - support library drag items + import OS files via Rust for persistent data URLs

src/components/Canvas.tsx

@@ -1,81 +1,173 @@
-import React, { useRef, useEffect, useState, useCallback } from 'react';
-import { useAppStore } from '../store';
-import { RefImageNode } from './RefImageNode';
-import { TextNoteNode } from './TextNoteNode';
-
-export const Canvas = () => {
-  const { images, setImages, textNotes, annotations, setAnnotations, palettes, setPalettes, zoom, setZoom, pan, setPan, setSelectedNodeIds, setContextMenu, isAnnotationMode, annotationColor, annotationSize, isEraser, isHighlighter } = useAppStore();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isSpaceDown, setIsSpaceDown] = useState(false);
-  const [isDraggingCanvas, setIsDraggingCanvas] = useState(false);
-  const [isDrawing, setIsDrawing] = useState(false);
-  const [currentPath, setCurrentPath] = useState<{x: number, y: number}[]>([]);
-  const [showGrid, setShowGrid] = useState(true);
-
-  useEffect(() => {
-    const handleDragOver = (e: DragEvent) => e.preventDefault();
-    const handleDrop = (e: DragEvent) => {
-      e.preventDefault();
-      if (e.dataTransfer?.files?.length) {
-        Array.from(e.dataTransfer.files).forEach(file => {
-          if (file.type.startsWith('image/')) {
-            const url = URL.createObjectURL(file);
-            const img = new Image(); img.src = url;
-            img.onload = () => { const ratio = img.width / img.height; const tw = Math.min(600, img.width); const th = tw / ratio; setImages(prev => [...prev, { id: crypto.randomUUID(), url, x: (-pan.x + (e.clientX || window.innerWidth/2) - tw/2) / zoom, y: (-pan.y + (e.clientY || window.innerHeight/2) - th/2) / zoom, width: tw, height: th, aspectRatio: ratio }]); };
-          }
-        });
-      }
-    };
-    document.addEventListener('dragover', handleDragOver); document.addEventListener('drop', handleDrop);
-    return () => { document.removeEventListener('dragover', handleDragOver); document.removeEventListener('drop', handleDrop); };
-  }, [pan, zoom, setImages]);
-
-  useEffect(() => {
-    const handler = (e: Event) => setShowGrid((e as CustomEvent).detail);
-    window.addEventListener('muse:toggle-grid', handler);
-    return () => window.removeEventListener('muse:toggle-grid', handler);
-  }, []);
-
-  useEffect(() => {
-    const up = (e: KeyboardEvent) => { if (e.code === 'Space') setIsSpaceDown(false); };
-    const down = (e: KeyboardEvent) => { if (e.code === 'Space' && !(e.target instanceof HTMLInputElement) && !(e.target instanceof HTMLTextAreaElement) && !(e.target as HTMLElement)?.isContentEditable) { e.preventDefault(); setIsSpaceDown(true); } };
-    window.addEventListener('keydown', down); window.addEventListener('keyup', up);
-    return () => { window.removeEventListener('keydown', down); window.removeEventListener('keyup', up); };
-  }, []);
-
-  const handleWheel = (e: React.WheelEvent) => { e.preventDefault(); const s = 1 - Math.sign(e.deltaY) * 0.1; const nz = Math.max(0.1, Math.min(zoom * s, 10)); if (containerRef.current) { const r = containerRef.current.getBoundingClientRect(); const mx = e.clientX - r.left, my = e.clientY - r.top; setPan({ x: mx - (mx - pan.x) * (nz / zoom), y: my - (my - pan.y) * (nz / zoom) }); } setZoom(nz); };
-
-  const handlePointerDown = (e: React.PointerEvent) => {
-    setContextMenu(null);
-    if (isSpaceDown || e.button === 1) { setIsDraggingCanvas(true); e.currentTarget.setPointerCapture(e.pointerId); }
-    else if (isAnnotationMode && e.button === 0) { setIsDrawing(true); const r = (e.currentTarget as HTMLElement).getBoundingClientRect(); setCurrentPath([{ x: (e.clientX - r.left - pan.x) / zoom, y: (e.clientY - r.top - pan.y) / zoom }]); e.currentTarget.setPointerCapture(e.pointerId); }
-    else { if (e.target === e.currentTarget || (e.target as HTMLElement).id === 'canvas-inner') setSelectedNodeIds([]); }
-  };
-
-  const handlePointerMove = (e: React.PointerEvent) => {
-    if (isDraggingCanvas) { setPan(p => ({ x: p.x + e.movementX, y: p.y + e.movementY })); }
-    else if (isDrawing) { const r = (e.currentTarget as HTMLElement).getBoundingClientRect(); const x = (e.clientX - r.left - pan.x) / zoom, y = (e.clientY - r.top - pan.y) / zoom; if (isEraser) { const er = annotationSize / zoom * 2; setAnnotations(prev => prev.filter(ann => !ann.points.some(p => Math.hypot(p.x - x, p.y - y) <= er + ann.strokeWidth))); } else { setCurrentPath(prev => [...prev, { x, y }]); } }
-  };
-
-  const handlePointerUp = (e: React.PointerEvent) => {
-    setIsDraggingCanvas(false);
-    if (isDrawing) { setIsDrawing(false); if (currentPath.length > 1 && !isEraser) { setAnnotations(prev => [...prev, { id: crypto.randomUUID(), points: currentPath, color: annotationColor, strokeWidth: (annotationSize / zoom) * (isHighlighter ? 3 : 1), isHighlighter: isHighlighter || undefined }]); } setCurrentPath([]); }
-    try { e.currentTarget.releasePointerCapture(e.pointerId); } catch {}
-  };
-
-  return (
-    <div ref={containerRef} className={`absolute inset-0 w-full h-full overflow-hidden ${isSpaceDown ? 'cursor-grab' : isAnnotationMode ? 'cursor-crosshair' : 'cursor-default'} ${isDraggingCanvas ? '!cursor-grabbing' : ''}`} onWheel={handleWheel} onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} onContextMenu={(e) => { e.preventDefault(); setContextMenu({ x: e.clientX, y: e.clientY, imageId: null }); }}>
-      {showGrid && <div className="absolute inset-0 pointer-events-none opacity-[0.06]" style={{ backgroundImage: 'radial-gradient(circle, #fff 1px, transparent 1px)', backgroundSize: `${24 * zoom}px ${24 * zoom}px`, backgroundPosition: `${pan.x % (24 * zoom)}px ${pan.y % (24 * zoom)}px` }} />}
-      <div id="canvas-inner" style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`, transformOrigin: '0 0' }} className="w-full h-full absolute top-0 left-0 z-10">
-        {Array.from(new Set(images.filter(img => img.groupId).map(img => img.groupId!))).map(gid => { const gi = images.filter(img => img.groupId === gid); if (!gi.length) return null; const minX = Math.min(...gi.map(i => i.x)), minY = Math.min(...gi.map(i => i.y)), maxX = Math.max(...gi.map(i => i.x + i.width)), maxY = Math.max(...gi.map(i => i.y + i.height)); return <div key={`g-${gid}`} className="absolute bg-white/5 border border-white/20 rounded-xl pointer-events-none" style={{ left: minX-20, top: minY-40, width: maxX-minX+40, height: maxY-minY+60, zIndex: 0 }}><div className="text-gray-500 text-xs font-semibold uppercase tracking-wider pl-4 pt-2">Group</div></div>; })}
-        {images.map(img => <RefImageNode key={img.id} image={img} />)}
-        {textNotes?.map(note => <TextNoteNode key={note.id} note={note} />)}
-        {palettes.map(p => { const img = images.find(i => i.id === p.imageId); if (!img) return null; const ss = Math.max(18, Math.min(42, img.width / Math.max(6, p.colors.length + 1))); return (<div key={`pal-${p.imageId}`} className="absolute flex flex-row gap-1 bg-[#1C1C1E] p-1.5 rounded-lg shadow-xl cursor-default pointer-events-auto" style={{ left: img.x, top: img.y + img.height + 10, zIndex: 8000 }} onPointerDown={e => e.stopPropagation()}>{p.colors.map(c => (<div key={c} className="rounded-md cursor-pointer hover:scale-110 transition-transform shadow-inner flex items-center justify-center group" style={{ backgroundColor: c, width: ss, height: ss }} title={c} onClick={e => { e.stopPropagation(); navigator.clipboard.writeText(c); }}><div className="opacity-0 group-hover:opacity-100 bg-black/60 text-white text-[9px] px-1 rounded backdrop-blur">COPY</div></div>))}<div className="flex items-center justify-center text-gray-500 hover:text-white cursor-pointer" style={{ width: Math.max(18, ss*0.7), height: ss }} onClick={() => setPalettes(prev => prev.filter(x => x.imageId !== p.imageId))}>×</div></div>); })}
-        <svg className="absolute inset-0 w-full h-full pointer-events-none z-[9999]" style={{ overflow: 'visible' }}>
-          {annotations.map(ann => <polyline key={ann.id} points={ann.points.map(p => `${p.x},${p.y}`).join(' ')} fill="none" stroke={ann.color} strokeWidth={ann.strokeWidth} strokeLinecap={ann.isHighlighter ? 'square' : 'round'} strokeLinejoin={ann.isHighlighter ? 'miter' : 'round'} opacity={ann.isHighlighter ? 0.35 : 1} style={ann.isHighlighter ? { mixBlendMode: 'screen' } : undefined} />)}
-          {isDrawing && currentPath.length > 0 && !isEraser && <polyline points={currentPath.map(p => `${p.x},${p.y}`).join(' ')} fill="none" stroke={annotationColor} strokeWidth={(annotationSize / zoom) * (isHighlighter ? 3 : 1)} strokeLinecap={isHighlighter ? 'square' : 'round'} strokeLinejoin={isHighlighter ? 'miter' : 'round'} opacity={isHighlighter ? 0.35 : 1} style={isHighlighter ? { mixBlendMode: 'screen' } : undefined} />}
-        </svg>
-      </div>
-    </div>
-  );
-};
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import { useAppStore } from '../store';
+import { RefImageNode } from './RefImageNode';
+import { TextNoteNode } from './TextNoteNode';
+import { invoke } from '@tauri-apps/api/core';
+import { getCurrentWindow } from '@tauri-apps/api/window';
+
+export const Canvas = () => {
+  const { images, setImages, textNotes, annotations, setAnnotations, palettes, setPalettes, zoom, setZoom, pan, setPan, setSelectedNodeIds, setContextMenu, isAnnotationMode, annotationColor, annotationSize, isEraser, isHighlighter } = useAppStore();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isSpaceDown, setIsSpaceDown] = useState(false);
+  const [isDraggingCanvas, setIsDraggingCanvas] = useState(false);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [currentPath, setCurrentPath] = useState<{x: number, y: number}[]>([]);
+  const [showGrid, setShowGrid] = useState(true);
+  const [isDropActive, setIsDropActive] = useState(false);
+
+  // ─── OS-level file drop via Tauri (fires for native file drags from Explorer/Finder) ───
+  useEffect(() => {
+    const unlisten = getCurrentWindow().onDragDropEvent(async (event) => {
+      if (event.payload.type === 'over') { setIsDropActive(true); }
+      else if (event.payload.type === 'leave' || event.payload.type === 'cancel') { setIsDropActive(false); }
+      else if (event.payload.type === 'drop') {
+        setIsDropActive(false);
+        const paths = event.payload.paths;
+        if (!paths || paths.length === 0) return;
+        const imageExts = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.bmp', '.avif', '.tiff'];
+        for (const filePath of paths) {
+          const lower = filePath.toLowerCase();
+          if (!imageExts.some(ext => lower.endsWith(ext))) continue;
+          try {
+            const item: any = await invoke('library_import_local', { path: filePath });
+            const w = Math.min(600, item.width || 400);
+            const h = item.height ? w * (item.height / item.width) : w;
+            setImages(prev => [...prev, {
+              id: crypto.randomUUID(),
+              url: item.data_url,
+              x: (-pan.x + window.innerWidth / 2 - w / 2 + Math.random() * 80 - 40) / zoom,
+              y: (-pan.y + window.innerHeight / 2 - h / 2 + Math.random() * 80 - 40) / zoom,
+              width: w, height: h, aspectRatio: w / h,
+            }]);
+          } catch (err) {
+            console.error(`[Canvas] Failed to import ${filePath}:`, err);
+          }
+        }
+      }
+    });
+    return () => { unlisten.then(fn => fn()); };
+  }, [pan, zoom, setImages]);
+
+  // ─── HTML5 drop handler: library items + browser file drops ───
+  useEffect(() => {
+    const handleDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'; };
+    const handleDrop = async (e: DragEvent) => {
+      e.preventDefault();
+      setIsDropActive(false);
+
+      // Check for library drag data first
+      const museData = e.dataTransfer?.getData('application/x-muse-library-item') || e.dataTransfer?.getData('text/plain');
+      if (museData) {
+        try {
+          const payload = JSON.parse(museData);
+          if (payload.data_url) {
+            const w = Math.min(600, payload.width || 400);
+            const h = payload.height ? w * (payload.height / payload.width) : w;
+            setImages(prev => [...prev, {
+              id: crypto.randomUUID(),
+              url: payload.data_url,
+              x: (-pan.x + (e.clientX || window.innerWidth / 2) - w / 2) / zoom,
+              y: (-pan.y + (e.clientY || window.innerHeight / 2) - h / 2) / zoom,
+              width: w, height: h, aspectRatio: w / h,
+            }]);
+            return;
+          }
+        } catch {}
+      }
+
+      // Fallback: browser file drop — import through Rust for persistent data URLs
+      if (e.dataTransfer?.files?.length) {
+        for (const file of Array.from(e.dataTransfer.files)) {
+          if (!file.type.startsWith('image/')) continue;
+          const reader = new FileReader();
+          reader.onload = async (ev) => {
+            const dataUrl = ev.target?.result as string;
+            if (!dataUrl) return;
+            try {
+              const item: any = await invoke('library_import_data_url', { dataUrl, title: file.name.replace(/\.[^/.]+$/, '') });
+              const w = Math.min(600, item.width || 400);
+              const h = item.height ? w * (item.width ? item.height / item.width : 1) : w;
+              setImages(prev => [...prev, {
+                id: crypto.randomUUID(),
+                url: item.data_url,
+                x: (-pan.x + (e.clientX || window.innerWidth / 2) - w / 2 + Math.random() * 60 - 30) / zoom,
+                y: (-pan.y + (e.clientY || window.innerHeight / 2) - h / 2 + Math.random() * 60 - 30) / zoom,
+                width: w, height: h, aspectRatio: w / h,
+              }]);
+            } catch (err) {
+              console.error('[Canvas] Import failed:', err);
+              // Ultimate fallback: use blob URL (won't persist across sessions but works immediately)
+              const img = new Image(); img.src = dataUrl;
+              img.onload = () => {
+                const ratio = img.width / img.height;
+                const tw = Math.min(600, img.width); const th = tw / ratio;
+                setImages(prev => [...prev, { id: crypto.randomUUID(), url: dataUrl, x: (-pan.x + (e.clientX || window.innerWidth / 2) - tw / 2) / zoom, y: (-pan.y + (e.clientY || window.innerHeight / 2) - th / 2) / zoom, width: tw, height: th, aspectRatio: ratio }]);
+              };
+            }
+          };
+          reader.readAsDataURL(file);
+        }
+      }
+    };
+    const handleDragEnter = (e: DragEvent) => { e.preventDefault(); setIsDropActive(true); };
+    const handleDragLeave = (e: DragEvent) => { if (e.relatedTarget === null || !(e.currentTarget as Node)?.contains(e.relatedTarget as Node)) setIsDropActive(false); };
+
+    document.addEventListener('dragover', handleDragOver);
+    document.addEventListener('drop', handleDrop);
+    document.addEventListener('dragenter', handleDragEnter);
+    document.addEventListener('dragleave', handleDragLeave);
+    return () => { document.removeEventListener('dragover', handleDragOver); document.removeEventListener('drop', handleDrop); document.removeEventListener('dragenter', handleDragEnter); document.removeEventListener('dragleave', handleDragLeave); };
+  }, [pan, zoom, setImages]);
+
+  useEffect(() => {
+    const handler = (e: Event) => setShowGrid((e as CustomEvent).detail);
+    window.addEventListener('muse:toggle-grid', handler);
+    return () => window.removeEventListener('muse:toggle-grid', handler);
+  }, []);
+
+  useEffect(() => {
+    const up = (e: KeyboardEvent) => { if (e.code === 'Space') setIsSpaceDown(false); };
+    const down = (e: KeyboardEvent) => { if (e.code === 'Space' && !(e.target instanceof HTMLInputElement) && !(e.target instanceof HTMLTextAreaElement) && !(e.target as HTMLElement)?.isContentEditable) { e.preventDefault(); setIsSpaceDown(true); } };
+    window.addEventListener('keydown', down); window.addEventListener('keyup', up);
+    return () => { window.removeEventListener('keydown', down); window.removeEventListener('keyup', up); };
+  }, []);
+
+  const handleWheel = (e: React.WheelEvent) => { e.preventDefault(); const s = 1 - Math.sign(e.deltaY) * 0.1; const nz = Math.max(0.1, Math.min(zoom * s, 10)); if (containerRef.current) { const r = containerRef.current.getBoundingClientRect(); const mx = e.clientX - r.left, my = e.clientY - r.top; setPan({ x: mx - (mx - pan.x) * (nz / zoom), y: my - (my - pan.y) * (nz / zoom) }); } setZoom(nz); };
+
+  const handlePointerDown = (e: React.PointerEvent) => {
+    setContextMenu(null);
+    if (isSpaceDown || e.button === 1) { setIsDraggingCanvas(true); e.currentTarget.setPointerCapture(e.pointerId); }
+    else if (isAnnotationMode && e.button === 0) { setIsDrawing(true); const r = (e.currentTarget as HTMLElement).getBoundingClientRect(); setCurrentPath([{ x: (e.clientX - r.left - pan.x) / zoom, y: (e.clientY - r.top - pan.y) / zoom }]); e.currentTarget.setPointerCapture(e.pointerId); }
+    else { if (e.target === e.currentTarget || (e.target as HTMLElement).id === 'canvas-inner') setSelectedNodeIds([]); }
+  };
+
+  const handlePointerMove = (e: React.PointerEvent) => {
+    if (isDraggingCanvas) { setPan(p => ({ x: p.x + e.movementX, y: p.y + e.movementY })); }
+    else if (isDrawing) { const r = (e.currentTarget as HTMLElement).getBoundingClientRect(); const x = (e.clientX - r.left - pan.x) / zoom, y = (e.clientY - r.top - pan.y) / zoom; if (isEraser) { const er = annotationSize / zoom * 2; setAnnotations(prev => prev.filter(ann => !ann.points.some(p => Math.hypot(p.x - x, p.y - y) <= er + ann.strokeWidth))); } else { setCurrentPath(prev => [...prev, { x, y }]); } }
+  };
+
+  const handlePointerUp = (e: React.PointerEvent) => {
+    setIsDraggingCanvas(false);
+    if (isDrawing) { setIsDrawing(false); if (currentPath.length > 1 && !isEraser) { setAnnotations(prev => [...prev, { id: crypto.randomUUID(), points: currentPath, color: annotationColor, strokeWidth: (annotationSize / zoom) * (isHighlighter ? 3 : 1), isHighlighter: isHighlighter || undefined }]); } setCurrentPath([]); }
+    try { e.currentTarget.releasePointerCapture(e.pointerId); } catch {}
+  };
+
+  return (
+    <div ref={containerRef} className={`absolute inset-0 w-full h-full overflow-hidden ${isSpaceDown ? 'cursor-grab' : isAnnotationMode ? 'cursor-crosshair' : 'cursor-default'} ${isDraggingCanvas ? '!cursor-grabbing' : ''}`} onWheel={handleWheel} onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} onContextMenu={(e) => { e.preventDefault(); setContextMenu({ x: e.clientX, y: e.clientY, imageId: null }); }}>
+      {/* Drop indicator overlay */}
+      {isDropActive && <div className="absolute inset-0 z-[100] pointer-events-none flex items-center justify-center"><div className="absolute inset-4 border-2 border-dashed border-[#0A84FF] rounded-2xl bg-[#0A84FF]/5" /><div className="relative z-10 bg-[#2A2A2E] border border-[#0A84FF] rounded-xl px-6 py-4 shadow-2xl flex flex-col items-center gap-2"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#0A84FF" strokeWidth="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg><span className="text-[#0A84FF] font-semibold text-sm">Drop images to add to canvas</span><span className="text-[#808080] text-xs">Images will be saved to your Asset Library</span></div></div>}
+
+      {showGrid && <div className="absolute inset-0 pointer-events-none opacity-[0.06]" style={{ backgroundImage: 'radial-gradient(circle, #fff 1px, transparent 1px)', backgroundSize: `${24 * zoom}px ${24 * zoom}px`, backgroundPosition: `${pan.x % (24 * zoom)}px ${pan.y % (24 * zoom)}px` }} />}
+      <div id="canvas-inner" style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`, transformOrigin: '0 0' }} className="w-full h-full absolute top-0 left-0 z-10">
+        {Array.from(new Set(images.filter(img => img.groupId).map(img => img.groupId!))).map(gid => { const gi = images.filter(img => img.groupId === gid); if (!gi.length) return null; const minX = Math.min(...gi.map(i => i.x)), minY = Math.min(...gi.map(i => i.y)), maxX = Math.max(...gi.map(i => i.x + i.width)), maxY = Math.max(...gi.map(i => i.y + i.height)); return <div key={`g-${gid}`} className="absolute bg-white/5 border border-white/20 rounded-xl pointer-events-none" style={{ left: minX-20, top: minY-40, width: maxX-minX+40, height: maxY-minY+60, zIndex: 0 }}><div className="text-gray-500 text-xs font-semibold uppercase tracking-wider pl-4 pt-2">Group</div></div>; })}
+        {images.map(img => <RefImageNode key={img.id} image={img} />)}
+        {textNotes?.map(note => <TextNoteNode key={note.id} note={note} />)}
+        {palettes.map(p => { const img = images.find(i => i.id === p.imageId); if (!img) return null; const ss = Math.max(18, Math.min(42, img.width / Math.max(6, p.colors.length + 1))); return (<div key={`pal-${p.imageId}`} className="absolute flex flex-row gap-1 bg-[#1C1C1E] p-1.5 rounded-lg shadow-xl cursor-default pointer-events-auto" style={{ left: img.x, top: img.y + img.height + 10, zIndex: 8000 }} onPointerDown={e => e.stopPropagation()}>{p.colors.map(c => (<div key={c} className="rounded-md cursor-pointer hover:scale-110 transition-transform shadow-inner flex items-center justify-center group" style={{ backgroundColor: c, width: ss, height: ss }} title={c} onClick={e => { e.stopPropagation(); navigator.clipboard.writeText(c); }}><div className="opacity-0 group-hover:opacity-100 bg-black/60 text-white text-[9px] px-1 rounded backdrop-blur">COPY</div></div>))}<div className="flex items-center justify-center text-gray-500 hover:text-white cursor-pointer" style={{ width: Math.max(18, ss*0.7), height: ss }} onClick={() => setPalettes(prev => prev.filter(x => x.imageId !== p.imageId))}>×</div></div>); })}
+        <svg className="absolute inset-0 w-full h-full pointer-events-none z-[9999]" style={{ overflow: 'visible' }}>
+          {annotations.map(ann => <polyline key={ann.id} points={ann.points.map(p => `${p.x},${p.y}`).join(' ')} fill="none" stroke={ann.color} strokeWidth={ann.strokeWidth} strokeLinecap={ann.isHighlighter ? 'square' : 'round'} strokeLinejoin={ann.isHighlighter ? 'miter' : 'round'} opacity={ann.isHighlighter ? 0.35 : 1} style={ann.isHighlighter ? { mixBlendMode: 'screen' } : undefined} />)}
+          {isDrawing && currentPath.length > 0 && !isEraser && <polyline points={currentPath.map(p => `${p.x},${p.y}`).join(' ')} fill="none" stroke={annotationColor} strokeWidth={(annotationSize / zoom) * (isHighlighter ? 3 : 1)} strokeLinecap={isHighlighter ? 'square' : 'round'} strokeLinejoin={isHighlighter ? 'miter' : 'round'} opacity={isHighlighter ? 0.35 : 1} style={isHighlighter ? { mixBlendMode: 'screen' } : undefined} />}
+        </svg>
+      </div>
+    </div>
+  );
+};