fix: render minimap only when enabled in Settings; default off

src/App.tsx

@@ -1,137 +1,108 @@
-import { useEffect, useState, useRef, lazy, Suspense } from 'react';
-import { AppProvider, useAppStore } from './store';
-import { Canvas } from './components/Canvas';
-import { Toolbar } from './components/Toolbar';
-import { ContextMenu } from './components/ContextMenu';
-import { Minimap } from './components/Minimap';
-import { StarterHub } from './components/StarterHub';
-import { getCurrentWindow } from '@tauri-apps/api/window';
-import { invoke } from '@tauri-apps/api/core';
-import { listen } from '@tauri-apps/api/event';
-
-// Lazy-load heavy panels — only mount when user opens them
-const BrowserPanel = lazy(() => import('./components/BrowserPanel').then(m => ({ default: m.BrowserPanel })));
-const LibraryPanel = lazy(() => import('./components/LibraryPanel').then(m => ({ default: m.LibraryPanel })));
-const SettingsPanel = lazy(() => import('./components/SettingsPanel').then(m => ({ default: m.SettingsPanel })));
-
-const appWindow = getCurrentWindow();
-
-const MainApp = () => {
-  const {
-    currentScreen, setIsBrowserOpen, setIsLibraryOpen, isBrowserOpen, isLibraryOpen,
-    isSettingsOpen, setIsSettingsOpen, isAlwaysOnTop, setIsAlwaysOnTop, bgOpacity,
-    isAnnotationMode, setIsAnnotationMode, globalDesaturate, setGlobalDesaturate,
-    setZoom, setPan, pan, zoom, images, setImages, setTextNotes, selectedNodeIds, setSelectedNodeIds,
-    annotationColor, setAnnotationColor, annotationSize, setAnnotationSize,
-    isEraser, setIsEraser, isHighlighter, setIsHighlighter, undo, redo,
-    focusedImageId, setFocusedImageId, valueMirrorIds, setValueMirrorIds,
-    isZoomLensActive, setIsZoomLensActive, isWhisperBrowser, setIsWhisperBrowser,
-  } = useAppStore();
-  const [toastMsg, setToastMsg] = useState<string | null>(null);
-  const [isCapturing, setIsCapturing] = useState(false);
-  const lastBPress = useRef(0);
-
-  useEffect(() => { if (toastMsg) { const t = setTimeout(() => setToastMsg(null), 3000); return () => clearTimeout(t); } }, [toastMsg]);
-  useEffect(() => { appWindow.setAlwaysOnTop(isAlwaysOnTop).catch(() => {}); }, [isAlwaysOnTop]);
-
-  // Listen for images captured from hover overlay
-  useEffect(() => {
-    const unlisten = listen<any>('board://image_added', (event) => {
-      const data = event.payload;
-      if (!data || !data.url) return;
-      const img = new Image();
-      img.onload = () => { const ratio = img.width / img.height; const w = Math.min(400, img.width); const h = w / ratio; setImages(prev => [...prev, { id: data.id || crypto.randomUUID(), url: data.url, x: (-pan.x + window.innerWidth / 3 + Math.random() * 80) / zoom, y: (-pan.y + window.innerHeight / 3 + Math.random() * 80) / zoom, width: w, height: h, aspectRatio: ratio }]); setToastMsg('✓ Image added'); };
-      img.onerror = () => { const w = Math.min(400, data.width || 300); const h = data.height ? w * (data.height / data.width) : w; setImages(prev => [...prev, { id: data.id || crypto.randomUUID(), url: data.url, x: (-pan.x + window.innerWidth / 3 + Math.random() * 80) / zoom, y: (-pan.y + window.innerHeight / 3 + Math.random() * 80) / zoom, width: w, height: h, aspectRatio: w / h }]); setToastMsg('✓ Image added'); };
-      img.src = data.url;
-    });
-    return () => { unlisten.then(fn => fn()); };
-  }, [pan, zoom, setImages]);
-
-  // Screen capture
-  const doScreenCapture = async () => {
-    setIsCapturing(true); setToastMsg('Capturing...');
-    try { await appWindow.minimize(); await new Promise(r => setTimeout(r, 300)); const dataUrl = await invoke<string>('screen_capture_full'); await appWindow.unminimize(); await appWindow.setFocus(); if (dataUrl) { const img = new Image(); img.onload = () => { const ratio = img.width / img.height; const w = Math.min(800, img.width); const h = w / ratio; setImages(prev => [...prev, { id: crypto.randomUUID(), url: dataUrl, x: (-pan.x + window.innerWidth/2 - w/2)/zoom, y: (-pan.y + window.innerHeight/2 - h/2)/zoom, width: w, height: h, aspectRatio: ratio }]); setToastMsg('Screenshot captured!'); }; img.src = dataUrl; } } catch { setToastMsg('Capture failed'); await appWindow.unminimize().catch(() => {}); }
-    setIsCapturing(false);
-  };
-
-  // Keyboard shortcuts
-  useEffect(() => {
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || (e.target as HTMLElement)?.isContentEditable) return;
-      const key = e.key.toLowerCase(); const ctrl = e.ctrlKey || e.metaKey;
-      if (ctrl && key === 'z') { e.preventDefault(); if (e.shiftKey) redo(); else undo(); return; }
-      if (ctrl && key === 's') { e.preventDefault(); setToastMsg('Saved'); return; }
-      if (e.shiftKey && key === 's' && !ctrl) { e.preventDefault(); doScreenCapture(); return; }
-      if (key === 'f' && !ctrl && !e.shiftKey) { if (focusedImageId) setFocusedImageId(null); else if (selectedNodeIds.length > 0) setFocusedImageId(selectedNodeIds[0]); return; }
-      if (key === 'v' && !ctrl && !e.shiftKey && selectedNodeIds.length > 0) { setValueMirrorIds(prev => { const all = selectedNodeIds.every(id => prev.includes(id)); return all ? prev.filter(id => !selectedNodeIds.includes(id)) : [...new Set([...prev, ...selectedNodeIds])]; }); return; }
-      if (key === 'h' && !ctrl && !e.shiftKey && selectedNodeIds.length > 0) { setImages(prev => prev.map(i => selectedNodeIds.includes(i.id) ? { ...i, isFlippedH: !i.isFlippedH } : i)); return; }
-      if (key === 'z' && !ctrl && !e.shiftKey) { setIsZoomLensActive(true); return; }
-      if (ctrl && key === 'd') { e.preventDefault(); if (selectedNodeIds.length > 0) { const dupes = images.filter(i => selectedNodeIds.includes(i.id)).map(i => ({ ...i, id: crypto.randomUUID(), x: i.x + 30, y: i.y + 30 })); setImages(prev => [...prev, ...dupes]); setSelectedNodeIds(dupes.map(d => d.id)); setToastMsg(`Duplicated ${dupes.length}`); } return; }
-      if (ctrl && key === 'g') { e.preventDefault(); if (e.shiftKey) { setImages(prev => prev.map(i => selectedNodeIds.includes(i.id) ? { ...i, groupId: undefined } : i)); setTextNotes(prev => prev.map(n => selectedNodeIds.includes(n.id) ? { ...n, groupId: undefined } : n)); setToastMsg('Ungrouped'); } else if (selectedNodeIds.length > 1) { const gid = crypto.randomUUID(); setImages(prev => prev.map(i => selectedNodeIds.includes(i.id) ? { ...i, groupId: gid } : i)); setTextNotes(prev => prev.map(n => selectedNodeIds.includes(n.id) ? { ...n, groupId: gid } : n)); setToastMsg('Grouped'); } return; }
-      if (focusedImageId && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) { const idx = images.findIndex(i => i.id === focusedImageId); if (idx >= 0) { const next = e.key === 'ArrowRight' ? (idx + 1) % images.length : (idx - 1 + images.length) % images.length; setFocusedImageId(images[next].id); setSelectedNodeIds([images[next].id]); } return; }
-      if (key === 'b' && !ctrl && !e.shiftKey) { const now = Date.now(); if (now - lastBPress.current < 300) { setIsWhisperBrowser(true); setIsBrowserOpen(true); } else { setIsBrowserOpen(p => !p); setIsWhisperBrowser(false); } lastBPress.current = now; return; }
-      if (key === 'l' && !ctrl && !e.shiftKey) { setIsLibraryOpen(p => !p); return; }
-      if (ctrl && key === ',') { e.preventDefault(); setIsSettingsOpen(p => !p); return; }
-      if (key === 'a' && !ctrl && !e.shiftKey) { setIsAnnotationMode(p => !p); return; }
-      if (key === 'g' && !ctrl && !e.shiftKey) { window.dispatchEvent(new CustomEvent('muse:toggle-grid', { detail: true })); return; }
-      if (key === 'd' && !ctrl) { if (e.shiftKey) setGlobalDesaturate(p => !p); else if (selectedNodeIds.length > 0) setImages(prev => prev.map(i => selectedNodeIds.includes(i.id) ? { ...i, isDesaturated: !i.isDesaturated } : i)); return; }
-      if (key === 't' && !ctrl && !e.shiftKey) { setIsAlwaysOnTop(p => !p); return; }
-      if (e.key === 'Escape') { setIsBrowserOpen(false); setIsLibraryOpen(false); setIsSettingsOpen(false); setSelectedNodeIds([]); setFocusedImageId(null); return; }
-      if (e.key === 'Delete' || e.key === 'Backspace') { if (selectedNodeIds.length > 0) { setImages(prev => prev.filter(i => !selectedNodeIds.includes(i.id))); setTextNotes(prev => prev.filter(n => !selectedNodeIds.includes(n.id))); setSelectedNodeIds([]); } return; }
-      if (ctrl && key === 'a') { e.preventDefault(); setSelectedNodeIds(images.map(i => i.id)); return; }
-      if (ctrl && key === '0') { e.preventDefault(); if (images.length === 0) { setZoom(1); setPan({ x: 0, y: 0 }); return; } let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; images.forEach(i => { minX = Math.min(minX, i.x); minY = Math.min(minY, i.y); maxX = Math.max(maxX, i.x + i.width); maxY = Math.max(maxY, i.y + i.height); }); const pad = 100, w = maxX - minX + pad*2, h = maxY - minY + pad*2; const nz = Math.max(0.1, Math.min(window.innerWidth/w, window.innerHeight/h)); setZoom(nz); setPan({ x: -((minX+maxX)/2)*nz + window.innerWidth/2, y: -((minY+maxY)/2)*nz + window.innerHeight/2 }); }
-      if (ctrl && key === '1') { e.preventDefault(); setZoom(1); }
-    };
-    const onKeyUp = (e: KeyboardEvent) => { if (e.key.toLowerCase() === 'z') setIsZoomLensActive(false); };
-    window.addEventListener('keydown', onKeyDown); window.addEventListener('keyup', onKeyUp);
-    return () => { window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keyup', onKeyUp); };
-  }, [selectedNodeIds, images, pan, zoom, focusedImageId, undo, redo]);
-
-  const handleCtxMenu = (e: React.MouseEvent) => { if (!(e.target instanceof HTMLInputElement) && !(e.target instanceof HTMLTextAreaElement) && !(e.target as HTMLElement).isContentEditable) e.preventDefault(); };
-
-  if (currentScreen === 'hub') return (
-    <div className="w-screen h-screen relative overflow-hidden bg-[#0A0A0B]" onContextMenu={handleCtxMenu}>
-      <StarterHub />
-      <Suspense fallback={null}>{isSettingsOpen && <SettingsPanel />}</Suspense>
-    </div>
-  );
-
-  return (
-    <div className="w-screen h-screen relative overflow-hidden" style={{ backgroundColor: `rgba(28, 28, 30, ${isAlwaysOnTop ? bgOpacity / 100 : 1})` }} onContextMenu={handleCtxMenu}>
-      <Canvas />
-      {(isBrowserOpen || isLibraryOpen || isSettingsOpen) && <div className="absolute inset-0 bg-black/40 pointer-events-none z-30 transition-opacity" />}
-      <Toolbar />
-      {/* Lazy-mounted panels: only load JS + render DOM when opened */}
-      <Suspense fallback={null}>
-        {isBrowserOpen && <BrowserPanel />}
-        {isLibraryOpen && <LibraryPanel />}
-        {isSettingsOpen && <SettingsPanel />}
-      </Suspense>
-      <Minimap />
-      <ContextMenu />
-      <div className="absolute bottom-4 left-4 text-[11px] opacity-40 text-white pointer-events-none select-none z-10 mix-blend-difference">Space+Drag Pan · Scroll Zoom · B Browser · L Library · A Annotate · G Grid · Shift+S Screenshot</div>
-      {toastMsg && <div className="absolute top-16 left-1/2 -translate-x-1/2 z-50 pointer-events-none"><div className="bg-[#1C1C1E]/90 border border-white/10 text-white font-medium px-4 py-2 rounded-full shadow-2xl backdrop-blur text-xs">{toastMsg}</div></div>}
-      {globalDesaturate && <div className="absolute top-16 left-1/2 -translate-x-1/2 z-50 pointer-events-none"><div className="bg-yellow-500/20 border border-yellow-500 text-white px-3 py-1 rounded text-xs shadow-lg backdrop-blur">Desaturation Active (Shift+D)</div></div>}
-      {focusedImageId && <div className="absolute top-4 left-1/2 -translate-x-1/2 z-50 pointer-events-none"><div className="bg-[#0A84FF]/20 border border-[#0A84FF] text-white px-3 py-1 rounded text-xs shadow-lg backdrop-blur">Focus Mode — ←→ cycle, F/Esc exit</div></div>}
-      {isAnnotationMode && (
-        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-[#2A2A2E]/90 backdrop-blur-md border border-[#3A3A3E] shadow-2xl rounded-xl px-4 py-3 flex items-center gap-3 z-50 transition-all">
-          <div className="flex gap-1 items-center">
-            <button onClick={() => { setIsEraser(false); setIsHighlighter(false); }} className={`p-2 rounded-lg transition-all ${!isEraser && !isHighlighter ? 'bg-white/15 text-white' : 'text-gray-500 hover:bg-white/5 hover:text-white'}`} title="Pen"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg></button>
-            <button onClick={() => { setIsEraser(false); setIsHighlighter(true); }} className={`p-2 rounded-lg transition-all ${!isEraser && isHighlighter ? 'bg-white/15 text-white' : 'text-gray-500 hover:bg-white/5 hover:text-white'}`} title="Highlighter"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/></svg></button>
-            <button onClick={() => setIsEraser(true)} className={`p-2 rounded-lg transition-all ${isEraser ? 'bg-white/15 text-white' : 'text-gray-500 hover:bg-white/5 hover:text-white'}`} title="Eraser"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg></button>
-          </div>
-          <div className="w-px h-6 bg-[#3A3A3E] mx-1" />
-          <div className="flex gap-2 items-center">{['#FFFFFF','#0A84FF','#30D158','#FFD60A','#FF453A'].map(c => <button key={c} className={`w-6 h-6 rounded-full transition-all ${annotationColor === c && !isEraser ? 'scale-110 ring-[2px] ring-offset-2 ring-offset-[#2A2A2E] ring-white' : 'opacity-60 hover:opacity-100 hover:scale-105'}`} style={{ backgroundColor: c }} onClick={() => { setAnnotationColor(c); if (isEraser) setIsEraser(false); }} />)}</div>
-          <div className="w-px h-6 bg-[#3A3A3E] mx-1" />
-          <div className="flex items-center gap-1.5 px-1">{[4,10,20,30].map(s => <button key={s} className={`w-6 h-6 flex items-center justify-center rounded-md transition-colors ${annotationSize === s ? 'bg-white/15 text-white' : 'text-gray-500 hover:bg-white/10 hover:text-white'}`} onClick={() => setAnnotationSize(s)}><div className="bg-current rounded-full" style={{ width: Math.max(3, s * 0.4), height: Math.max(3, s * 0.4) }} /></button>)}</div>
-          <div className="w-px h-6 bg-[#3A3A3E] mx-1" />
-          <button className="px-3 py-1.5 rounded-lg text-sm font-medium text-[#FF453A] bg-[#FF453A]/10 hover:bg-[#FF453A]/20 transition-colors ml-1" onClick={() => setIsAnnotationMode(false)}>Close</button>
-        </div>
-      )}
-      {isZoomLensActive && <div className="absolute top-4 right-4 z-50 pointer-events-none"><div className="bg-[#2A2A2E]/80 border border-[#3A3A3E] text-white px-2 py-1 rounded text-[10px] backdrop-blur">🔍 Zoom Lens (release Z)</div></div>}
-      {isCapturing && <div className="absolute inset-0 bg-black/50 flex items-center justify-center z-[100] pointer-events-none"><div className="bg-[#2A2A2E] border border-[#3A3A3E] rounded-xl px-6 py-4 shadow-2xl text-white text-sm">Capturing...</div></div>}
-    </div>
-  );
-};
-
-export default function App() { return <AppProvider><MainApp /></AppProvider>; }
+import { useEffect, useState, useRef, lazy, Suspense } from 'react';
+import { AppProvider, useAppStore } from './store';
+import { Canvas } from './components/Canvas';
+import { Toolbar } from './components/Toolbar';
+import { ContextMenu } from './components/ContextMenu';
+import { Minimap } from './components/Minimap';
+import { StarterHub } from './components/StarterHub';
+import { getCurrentWindow } from '@tauri-apps/api/window';
+import { invoke } from '@tauri-apps/api/core';
+import { listen } from '@tauri-apps/api/event';
+
+const BrowserPanel = lazy(() => import('./components/BrowserPanel').then(m => ({ default: m.BrowserPanel })));
+const LibraryPanel = lazy(() => import('./components/LibraryPanel').then(m => ({ default: m.LibraryPanel })));
+const SettingsPanel = lazy(() => import('./components/SettingsPanel').then(m => ({ default: m.SettingsPanel })));
+
+const appWindow = getCurrentWindow();
+
+const MainApp = () => {
+  const {
+    currentScreen, setIsBrowserOpen, setIsLibraryOpen, isBrowserOpen, isLibraryOpen,
+    isSettingsOpen, setIsSettingsOpen, isAlwaysOnTop, setIsAlwaysOnTop, bgOpacity,
+    isAnnotationMode, setIsAnnotationMode, globalDesaturate, setGlobalDesaturate,
+    setZoom, setPan, pan, zoom, images, setImages, setTextNotes, selectedNodeIds, setSelectedNodeIds,
+    annotationColor, setAnnotationColor, annotationSize, setAnnotationSize,
+    isEraser, setIsEraser, isHighlighter, setIsHighlighter, undo, redo,
+    focusedImageId, setFocusedImageId, valueMirrorIds, setValueMirrorIds,
+    isZoomLensActive, setIsZoomLensActive, isWhisperBrowser, setIsWhisperBrowser,
+    showMinimap,
+  } = useAppStore();
+  const [toastMsg, setToastMsg] = useState<string | null>(null);
+  const [isCapturing, setIsCapturing] = useState(false);
+  const lastBPress = useRef(0);
+
+  useEffect(() => { if (toastMsg) { const t = setTimeout(() => setToastMsg(null), 3000); return () => clearTimeout(t); } }, [toastMsg]);
+  useEffect(() => { appWindow.setAlwaysOnTop(isAlwaysOnTop).catch(() => {}); }, [isAlwaysOnTop]);
+
+  useEffect(() => {
+    const unlisten = listen<any>('board://image_added', (event) => {
+      const data = event.payload;
+      if (!data || !data.url) return;
+      const img = new Image();
+      img.onload = () => { const ratio = img.width / img.height; const w = Math.min(400, img.width); const h = w / ratio; setImages(prev => [...prev, { id: data.id || crypto.randomUUID(), url: data.url, x: (-pan.x + window.innerWidth / 3 + Math.random() * 80) / zoom, y: (-pan.y + window.innerHeight / 3 + Math.random() * 80) / zoom, width: w, height: h, aspectRatio: ratio }]); setToastMsg('✓ Image added'); };
+      img.onerror = () => { const w = Math.min(400, data.width || 300); const h = data.height ? w * (data.height / data.width) : w; setImages(prev => [...prev, { id: data.id || crypto.randomUUID(), url: data.url, x: (-pan.x + window.innerWidth / 3 + Math.random() * 80) / zoom, y: (-pan.y + window.innerHeight / 3 + Math.random() * 80) / zoom, width: w, height: h, aspectRatio: w / h }]); setToastMsg('✓ Image added'); };
+      img.src = data.url;
+    });
+    return () => { unlisten.then(fn => fn()); };
+  }, [pan, zoom, setImages]);
+
+  const doScreenCapture = async () => {
+    setIsCapturing(true); setToastMsg('Capturing...');
+    try { await appWindow.minimize(); await new Promise(r => setTimeout(r, 300)); const dataUrl = await invoke<string>('screen_capture_full'); await appWindow.unminimize(); await appWindow.setFocus(); if (dataUrl) { const img = new Image(); img.onload = () => { const ratio = img.width / img.height; const w = Math.min(800, img.width); const h = w / ratio; setImages(prev => [...prev, { id: crypto.randomUUID(), url: dataUrl, x: (-pan.x + window.innerWidth/2 - w/2)/zoom, y: (-pan.y + window.innerHeight/2 - h/2)/zoom, width: w, height: h, aspectRatio: ratio }]); setToastMsg('Screenshot captured!'); }; img.src = dataUrl; } } catch { setToastMsg('Capture failed'); await appWindow.unminimize().catch(() => {}); }
+    setIsCapturing(false);
+  };
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || (e.target as HTMLElement)?.isContentEditable) return;
+      const key = e.key.toLowerCase(); const ctrl = e.ctrlKey || e.metaKey;
+      if (ctrl && key === 'z') { e.preventDefault(); if (e.shiftKey) redo(); else undo(); return; }
+      if (ctrl && key === 's') { e.preventDefault(); setToastMsg('Saved'); return; }
+      if (e.shiftKey && key === 's' && !ctrl) { e.preventDefault(); doScreenCapture(); return; }
+      if (key === 'f' && !ctrl && !e.shiftKey) { if (focusedImageId) setFocusedImageId(null); else if (selectedNodeIds.length > 0) setFocusedImageId(selectedNodeIds[0]); return; }
+      if (key === 'v' && !ctrl && !e.shiftKey && selectedNodeIds.length > 0) { setValueMirrorIds(prev => { const all = selectedNodeIds.every(id => prev.includes(id)); return all ? prev.filter(id => !selectedNodeIds.includes(id)) : [...new Set([...prev, ...selectedNodeIds])]; }); return; }
+      if (key === 'h' && !ctrl && !e.shiftKey && selectedNodeIds.length > 0) { setImages(prev => prev.map(i => selectedNodeIds.includes(i.id) ? { ...i, isFlippedH: !i.isFlippedH } : i)); return; }
+      if (key === 'z' && !ctrl && !e.shiftKey) { setIsZoomLensActive(true); return; }
+      if (ctrl && key === 'd') { e.preventDefault(); if (selectedNodeIds.length > 0) { const dupes = images.filter(i => selectedNodeIds.includes(i.id)).map(i => ({ ...i, id: crypto.randomUUID(), x: i.x + 30, y: i.y + 30 })); setImages(prev => [...prev, ...dupes]); setSelectedNodeIds(dupes.map(d => d.id)); setToastMsg(`Duplicated ${dupes.length}`); } return; }
+      if (ctrl && key === 'g') { e.preventDefault(); if (e.shiftKey) { setImages(prev => prev.map(i => selectedNodeIds.includes(i.id) ? { ...i, groupId: undefined } : i)); setTextNotes(prev => prev.map(n => selectedNodeIds.includes(n.id) ? { ...n, groupId: undefined } : n)); setToastMsg('Ungrouped'); } else if (selectedNodeIds.length > 1) { const gid = crypto.randomUUID(); setImages(prev => prev.map(i => selectedNodeIds.includes(i.id) ? { ...i, groupId: gid } : i)); setTextNotes(prev => prev.map(n => selectedNodeIds.includes(n.id) ? { ...n, groupId: gid } : n)); setToastMsg('Grouped'); } return; }
+      if (focusedImageId && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) { const idx = images.findIndex(i => i.id === focusedImageId); if (idx >= 0) { const next = e.key === 'ArrowRight' ? (idx + 1) % images.length : (idx - 1 + images.length) % images.length; setFocusedImageId(images[next].id); setSelectedNodeIds([images[next].id]); } return; }
+      if (key === 'b' && !ctrl && !e.shiftKey) { const now = Date.now(); if (now - lastBPress.current < 300) { setIsWhisperBrowser(true); setIsBrowserOpen(true); } else { setIsBrowserOpen(p => !p); setIsWhisperBrowser(false); } lastBPress.current = now; return; }
+      if (key === 'l' && !ctrl && !e.shiftKey) { setIsLibraryOpen(p => !p); return; }
+      if (ctrl && key === ',') { e.preventDefault(); setIsSettingsOpen(p => !p); return; }
+      if (key === 'a' && !ctrl && !e.shiftKey) { setIsAnnotationMode(p => !p); return; }
+      if (key === 'g' && !ctrl && !e.shiftKey) { window.dispatchEvent(new CustomEvent('muse:toggle-grid', { detail: true })); return; }
+      if (key === 'd' && !ctrl) { if (e.shiftKey) setGlobalDesaturate(p => !p); else if (selectedNodeIds.length > 0) setImages(prev => prev.map(i => selectedNodeIds.includes(i.id) ? { ...i, isDesaturated: !i.isDesaturated } : i)); return; }
+      if (key === 't' && !ctrl && !e.shiftKey) { setIsAlwaysOnTop(p => !p); return; }
+      if (e.key === 'Escape') { setIsBrowserOpen(false); setIsLibraryOpen(false); setIsSettingsOpen(false); setSelectedNodeIds([]); setFocusedImageId(null); return; }
+      if (e.key === 'Delete' || e.key === 'Backspace') { if (selectedNodeIds.length > 0) { setImages(prev => prev.filter(i => !selectedNodeIds.includes(i.id))); setTextNotes(prev => prev.filter(n => !selectedNodeIds.includes(n.id))); setSelectedNodeIds([]); } return; }
+      if (ctrl && key === 'a') { e.preventDefault(); setSelectedNodeIds(images.map(i => i.id)); return; }
+      if (ctrl && key === '0') { e.preventDefault(); if (images.length === 0) { setZoom(1); setPan({ x: 0, y: 0 }); return; } let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; images.forEach(i => { minX = Math.min(minX, i.x); minY = Math.min(minY, i.y); maxX = Math.max(maxX, i.x + i.width); maxY = Math.max(maxY, i.y + i.height); }); const pad = 100, w = maxX - minX + pad*2, h = maxY - minY + pad*2; const nz = Math.max(0.1, Math.min(window.innerWidth/w, window.innerHeight/h)); setZoom(nz); setPan({ x: -((minX+maxX)/2)*nz + window.innerWidth/2, y: -((minY+maxY)/2)*nz + window.innerHeight/2 }); }
+      if (ctrl && key === '1') { e.preventDefault(); setZoom(1); }
+    };
+    const onKeyUp = (e: KeyboardEvent) => { if (e.key.toLowerCase() === 'z') setIsZoomLensActive(false); };
+    window.addEventListener('keydown', onKeyDown); window.addEventListener('keyup', onKeyUp);
+    return () => { window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keyup', onKeyUp); };
+  }, [selectedNodeIds, images, pan, zoom, focusedImageId, undo, redo]);
+
+  const handleCtxMenu = (e: React.MouseEvent) => { if (!(e.target instanceof HTMLInputElement) && !(e.target instanceof HTMLTextAreaElement) && !(e.target as HTMLElement).isContentEditable) e.preventDefault(); };
+
+  if (currentScreen === 'hub') return <div className="w-screen h-screen relative overflow-hidden bg-[#0A0A0B]" onContextMenu={handleCtxMenu}><StarterHub /><Suspense fallback={null}>{isSettingsOpen && <SettingsPanel />}</Suspense></div>;
+
+  return (
+    <div className="w-screen h-screen relative overflow-hidden" style={{ backgroundColor: `rgba(28, 28, 30, ${isAlwaysOnTop ? bgOpacity / 100 : 1})` }} onContextMenu={handleCtxMenu}>
+      <Canvas />
+      {(isBrowserOpen || isLibraryOpen || isSettingsOpen) && <div className="absolute inset-0 bg-black/40 pointer-events-none z-30 transition-opacity" />}
+      <Toolbar />
+      <Suspense fallback={null}>{isBrowserOpen && <BrowserPanel />}{isLibraryOpen && <LibraryPanel />}{isSettingsOpen && <SettingsPanel />}</Suspense>
+      {showMinimap && <Minimap />}
+      <ContextMenu />
+      <div className="absolute bottom-4 left-4 text-[11px] opacity-40 text-white pointer-events-none select-none z-10 mix-blend-difference">Space+Drag Pan · Scroll Zoom · B Browser · L Library · A Annotate · G Grid · Shift+S Screenshot</div>
+      {toastMsg && <div className="absolute top-16 left-1/2 -translate-x-1/2 z-50 pointer-events-none"><div className="bg-[#1C1C1E]/90 border border-white/10 text-white font-medium px-4 py-2 rounded-full shadow-2xl backdrop-blur text-xs">{toastMsg}</div></div>}
+      {globalDesaturate && <div className="absolute top-16 left-1/2 -translate-x-1/2 z-50 pointer-events-none"><div className="bg-yellow-500/20 border border-yellow-500 text-white px-3 py-1 rounded text-xs shadow-lg backdrop-blur">Desaturation Active (Shift+D)</div></div>}
+      {focusedImageId && <div className="absolute top-4 left-1/2 -translate-x-1/2 z-50 pointer-events-none"><div className="bg-[#0A84FF]/20 border border-[#0A84FF] text-white px-3 py-1 rounded text-xs shadow-lg backdrop-blur">Focus Mode — ←→ cycle, F/Esc exit</div></div>}
+      {isCapturing && <div className="absolute inset-0 bg-black/50 flex items-center justify-center z-[100] pointer-events-none"><div className="bg-[#2A2A2E] border border-[#3A3A3E] rounded-xl px-6 py-4 shadow-2xl text-white text-sm">Capturing...</div></div>}
+    </div>
+  );
+};
+
+export default function App() { return <AppProvider><MainApp /></AppProvider>; }