fix: align canvas drag-drop image support with library formats

src/components/Canvas.tsx

@@ -5,8 +5,8 @@ import { TextNoteNode } from './TextNoteNode';
 import { invoke } from '@tauri-apps/api/core';
 import { getCurrentWebview } from '@tauri-apps/api/webview';
 
-const IMAGE_EXTS = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.bmp'];
-const SUPPORTED_IMAGE_TYPES = new Set(['image/png', 'image/jpeg', 'image/webp', 'image/gif', 'image/bmp']);
+const IMAGE_EXTS = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.bmp', '.ico', '.tif', '.tiff'];
+const SUPPORTED_IMAGE_TYPES = new Set(['image/png', 'image/jpeg', 'image/webp', 'image/gif', 'image/bmp', 'image/x-icon', 'image/vnd.microsoft.icon', 'image/tiff']);
 const MIN_ANNOTATION_POINT_DISTANCE = 1.5;
 function isImagePath(path: string) { const p = path.toLowerCase(); return IMAGE_EXTS.some(ext => p.endsWith(ext)); }
 function toast(msg: string) { window.dispatchEvent(new CustomEvent('lumaref:toast', { detail: msg })); }
@@ -19,8 +19,6 @@ export const Canvas = () => {
   const [isDrawing, setIsDrawing] = useState(false);
   const [currentPath, setCurrentPath] = useState<{x: number, y: number}[]>([]);
   const [isDropActive, setIsDropActive] = useState(false);
-  // FIX: Store the zoom level at which the current stroke was started, so we can render
-  // the in-progress stroke at the correct visual width regardless of zoom changes mid-stroke
   const strokeZoomRef = useRef(zoom);
 
   const addLibraryItemToCanvas = useCallback((item: any, cssX?: number, cssY?: number) => {
@@ -46,6 +44,8 @@ export const Canvas = () => {
           if (payload.type === 'drop') {
             setIsDropActive(false);
             const paths: string[] = (payload.paths || []).filter(isImagePath);
+            const skipped = (payload.paths || []).length - paths.length;
+            if (skipped > 0) toast(`Skipped ${skipped} unsupported file${skipped === 1 ? '' : 's'}`);
             const dpr = window.devicePixelRatio || 1;
             const pos = payload.position ? { x: payload.position.x / dpr, y: payload.position.y / dpr } : undefined;
             let imported = 0;
@@ -70,7 +70,8 @@ export const Canvas = () => {
       if (libraryData) { try { const payload = JSON.parse(libraryData); if (payload.data_url || payload.dataUrl) { addLibraryItemToCanvas(payload, e.clientX, e.clientY); toast('Added image to canvas'); return; } } catch {} }
       if (e.dataTransfer?.files?.length) {
         for (const file of Array.from(e.dataTransfer.files)) {
-          if (!SUPPORTED_IMAGE_TYPES.has(file.type)) { toast(`Unsupported image type: ${file.name}`); continue; }
+          const looksSupported = SUPPORTED_IMAGE_TYPES.has(file.type) || isImagePath(file.name);
+          if (!looksSupported) { toast(`Unsupported image type: ${file.name}`); continue; }
           const reader = new FileReader();
           reader.onload = async (ev) => {
             const dataUrl = ev.target?.result as string;
@@ -107,7 +108,7 @@ export const Canvas = () => {
       e.currentTarget.setPointerCapture(e.pointerId);
     } else if (isAnnotationMode && e.button === 0) {
       setIsDrawing(true);
-      strokeZoomRef.current = zoom; // FIX: Capture zoom at stroke start
+      strokeZoomRef.current = zoom;
       setCurrentPath([toWorld(e)]);
       e.currentTarget.setPointerCapture(e.pointerId);
     } else {
@@ -138,11 +139,6 @@ export const Canvas = () => {
     if (isDrawing) {
       setIsDrawing(false);
       if (currentPath.length > 1 && !isEraser) {
-        // FIX: Store strokeWidth as a fixed world-space value based on annotationSize.
-        // Previously divided by zoom which made strokes appear different at different zoom levels.
-        // Now we store a consistent base width: annotationSize is the visual px size at zoom=1.
-        // The stroke renders in world coordinates inside the scaled SVG, so it automatically
-        // scales with the canvas transform. We use annotationSize directly as the world-space width.
         const baseStrokeWidth = annotationSize * (isHighlighter ? 3 : 1);
         setAnnotations(prev => [...prev, {
           id: crypto.randomUUID(),
@@ -157,11 +153,10 @@ export const Canvas = () => {
     try { e.currentTarget.releasePointerCapture(e.pointerId); } catch {}
   };
 
-  // FIX: Calculate current stroke preview width consistently with how it will be stored
   const currentStrokeWidth = annotationSize * (isHighlighter ? 3 : 1);
 
   return <div ref={containerRef} className={`absolute inset-0 w-full h-full overflow-hidden bg-[var(--canvas-bg)] ${isSpaceDown ? 'cursor-grab' : isAnnotationMode ? 'cursor-crosshair' : 'cursor-default'} ${isDraggingCanvas ? '!cursor-grabbing' : ''}`} onWheel={handleWheel} onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} onPointerUp={finishPointer} onPointerCancel={finishPointer} onPointerLeave={e => { if (isDrawing || isDraggingCanvas) finishPointer(e); }} onContextMenu={(e) => { e.preventDefault(); setContextMenu({ x: e.clientX, y: e.clientY, imageId: null }); }}>
-    {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-[var(--accent)] rounded-2xl bg-[var(--accent)]/5" /><div className="relative z-10 bg-[var(--panel-surface)] border border-[var(--accent)] 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="var(--accent)" 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-[var(--accent)] font-semibold text-sm">Drop images to add to canvas</span><span className="text-[var(--ui-secondary)] text-xs">Images will be saved to your Asset Library</span></div></div>}
+    {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-[var(--accent)] rounded-2xl bg-[var(--accent)]/5" /><div className="relative z-10 bg-[var(--panel-surface)] border border-[var(--accent)] 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="var(--accent)" 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-[var(--accent)] font-semibold text-sm">Drop images to add to canvas</span><span className="text-[var(--ui-secondary)] text-xs">PNG · JPG · WEBP · GIF · BMP · ICO · TIFF</span></div></div>}
     {showGrid && <div className="absolute inset-0 pointer-events-none opacity-[0.06]" style={{ backgroundImage: 'radial-gradient(circle, var(--ui-primary) 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>; })}