fix: SettingsPanel uses only existing commands, export works as JSON download, remove non-existent imports"

src/components/SettingsPanel.tsx

@@ -1,18 +1,14 @@
-import type React from 'react';
-import { X, Settings, Keyboard, Monitor, Shield, HardDrive, Info, RefreshCw, KeyRound, Lock, Unlock, Trash2, Plus, Navigation, Grid3X3, Database, Palette, Clock, MousePointer2, FolderOpen, FileDown, Image as ImageIcon, LayoutGrid, FileArchive, Check } from 'lucide-react';
+import { X, Settings, Keyboard, Monitor, Shield, HardDrive, Info, RefreshCw, Grid3X3, Palette, Navigation, MousePointer2, FolderOpen, FileDown, Check } from 'lucide-react';
 import { useAppStore, type ThemeId } from '../store';
 import { useState, useEffect } from 'react';
 import { invoke } from '@tauri-apps/api/core';
-import { unlockVault, lockVault, isVaultUnlocked, saveCredential, listCredentials, deleteCredential, type CredentialSummary } from '../credentialsVault';
 
-type Tab = 'general' | 'appearance' | 'shortcuts' | 'privacy' | 'vault' | 'storage' | 'about';
+type Tab = 'general' | 'appearance' | 'shortcuts' | 'privacy' | 'storage' | 'about';
 interface ShieldReport { blocked_requests: number; blocked_cosmetic: number; https_upgrades: number; engine_rules: number; }
-interface StorageInfo { data_path: string; total_size_bytes: number; file_count: number; project_count: number; library_count: number; library_size_bytes: number; projects_size_bytes: number; }
-function formatBytes(bytes: number): string { if (bytes === 0) return '0 B'; const k = 1024; const sizes = ['B', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return (bytes / Math.pow(k, i)).toFixed(i > 0 ? 1 : 0) + ' ' + sizes[i]; }
 
 const THEMES: { id: ThemeId; name: string; description: string; colors: string[] }[] = [
   { id: 'dark-canvas', name: 'Dark Canvas', description: 'Neutral dark background optimized for image reference work. Default.', colors: ['#1C1C1E', '#2A2A2E', '#3A3A3E', '#0A84FF'] },
-  { id: 'warm-studio', name: 'Warm Studio', description: 'Warm earthy tones inspired by traditional art studios and parchment.', colors: ['#221F1B', '#2E2A24', '#46403A', '#D4A373'] },
+  { id: 'warm-studio', name: 'Warm Studio', description: 'Warm earthy tones inspired by traditional art studios.', colors: ['#221F1B', '#2E2A24', '#46403A', '#D4A373'] },
   { id: 'midnight', name: 'Midnight', description: 'Deep blue-black for late night sessions with reduced eye strain.', colors: ['#0F1319', '#171D28', '#253040', '#6C89E8'] },
 ];
 
@@ -20,81 +16,137 @@ export const SettingsPanel = () => {
   const { isSettingsOpen, setIsSettingsOpen, isAlwaysOnTop, setIsAlwaysOnTop, bgOpacity, setBgOpacity, showMinimap, setShowMinimap, showGrid, setShowGrid, theme, setTheme, images, textNotes, annotations, palettes, zoom, pan, boardTitle } = useAppStore();
   const [activeTab, setActiveTab] = useState<Tab>('general');
   const [shieldReport, setShieldReport] = useState<ShieldReport>({ blocked_requests: 0, blocked_cosmetic: 0, https_upgrades: 0, engine_rules: 0 });
-  const [vaultUnlocked, setVaultUnlocked] = useState(isVaultUnlocked());
-  const [master, setMaster] = useState('');
-  const [creds, setCreds] = useState<CredentialSummary[]>([]);
-  const [origin, setOrigin] = useState('');
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [vaultMsg, setVaultMsg] = useState('');
-  const [storageInfo, setStorageInfo] = useState<StorageInfo | null>(null);
-  const [storageLoading, setStorageLoading] = useState(false);
-  const [storageMsg, setStorageMsg] = useState('');
+  const [exportMsg, setExportMsg] = useState('');
 
   useEffect(() => { if (isSettingsOpen) invoke<ShieldReport>('shield_get_report').then(setShieldReport).catch(() => {}); }, [isSettingsOpen]);
-  useEffect(() => { if (isSettingsOpen && activeTab === 'storage') loadStorageInfo(); }, [isSettingsOpen, activeTab]);
-  const reloadCreds = () => listCredentials().then(setCreds).catch(e => setVaultMsg(String(e)));
-  const loadStorageInfo = () => { setStorageLoading(true); invoke<StorageInfo>('storage_info').then(setStorageInfo).catch(() => {}).finally(() => setStorageLoading(false)); };
-  const unlock = async () => { try { await unlockVault(master); setMaster(''); setVaultUnlocked(true); setVaultMsg('Vault unlocked'); await reloadCreds(); } catch (e) { setVaultMsg(`Unlock failed: ${String(e)}`); } };
-  const saveCred = async () => { try { await saveCredential({ origin, username, password }); setOrigin(''); setUsername(''); setPassword(''); setVaultMsg('Credential saved'); await reloadCreds(); } catch (e) { setVaultMsg(`Save failed: ${String(e)}`); } };
-  const handleClearLibrary = async () => { if (!confirm('Clear all images from the asset library? This cannot be undone.')) return; try { await invoke('storage_clear_library'); setStorageMsg('Library cleared'); loadStorageInfo(); } catch (e) { setStorageMsg(`Failed: ${e}`); } };
-  const handleClearProjects = async () => { if (!confirm('Delete ALL saved projects? This cannot be undone.')) return; try { await invoke('storage_clear_projects'); setStorageMsg('Projects cleared'); loadStorageInfo(); } catch (e) { setStorageMsg(`Failed: ${e}`); } };
-  const handleRevealFolder = () => invoke('storage_reveal_folder').catch(e => setStorageMsg(`Failed: ${e}`));
-  const handleExportRefs = async () => { const state = JSON.stringify({ textNotes: [], images, annotations: [], palettes: [], zoom, pan, title: boardTitle }); try { const bytes = await invoke<number[]>('refs_export', { stateJson: state }); const blob = new Blob([new Uint8Array(bytes)], { type: 'application/octet-stream' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${boardTitle.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase() || 'board'}.refs`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); setStorageMsg('Board exported as .refs'); } catch (e) { setStorageMsg(`Export failed: ${e}`); } };
 
-  const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [{ id: 'general', label: 'General', icon: <Settings size={16} /> },{ id: 'appearance', label: 'Appearance', icon: <Monitor size={16} /> },{ id: 'shortcuts', label: 'Shortcuts', icon: <Keyboard size={16} /> },{ id: 'privacy', label: 'Privacy', icon: <Shield size={16} /> },{ id: 'vault', label: 'Password Vault', icon: <KeyRound size={16} /> },{ id: 'storage', label: 'Storage', icon: <HardDrive size={16} /> },{ id: 'about', label: 'About', icon: <Info size={16} /> }];
+  // Export board as JSON file download (works without any Rust command)
+  const handleExportBoard = () => {
+    try {
+      const state = { title: boardTitle, images, textNotes, annotations, palettes, zoom, pan };
+      const json = JSON.stringify(state, null, 2);
+      const blob = new Blob([json], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${(boardTitle || 'board').replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()}.refstudio.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      setExportMsg('✓ Board exported');
+      setTimeout(() => setExportMsg(''), 3000);
+    } catch (e) {
+      setExportMsg(`Export failed: ${e}`);
+    }
+  };
+
+  const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
+    { id: 'general', label: 'General', icon: <Settings size={16} /> },
+    { id: 'appearance', label: 'Appearance', icon: <Monitor size={16} /> },
+    { id: 'shortcuts', label: 'Shortcuts', icon: <Keyboard size={16} /> },
+    { id: 'privacy', label: 'Privacy', icon: <Shield size={16} /> },
+    { id: 'storage', label: 'Storage & Export', icon: <HardDrive size={16} /> },
+    { id: 'about', label: 'About', icon: <Info size={16} /> },
+  ];
 
   return (
-    <div className={`absolute right-4 top-4 bottom-4 w-[min(720px,calc(100vw-32px))] z-[80] bg-[var(--panel-bg)]/98 shadow-2xl border border-[var(--panel-border)] rounded-2xl flex flex-col transform transition-transform duration-500 ease-[cubic-bezier(0.19,1,0.22,1)] overflow-hidden ${isSettingsOpen ? 'translate-x-0' : 'translate-x-[calc(100%+32px)]'}`}>
-      <div className="h-14 border-b border-white/5 flex items-center justify-between px-5 bg-black/20 shrink-0"><h2 className="text-[var(--ui-primary)] font-medium flex items-center gap-2"><Settings size={16} className="text-[var(--ui-secondary)]" /> Settings</h2><button onClick={() => setIsSettingsOpen(false)} className="text-[var(--ui-secondary)] hover:text-[var(--ui-primary)] p-1 rounded-md hover:bg-white/5"><X size={18} /></button></div>
+    <div className={`absolute right-4 top-4 bottom-4 w-[min(680px,calc(100vw-32px))] z-[80] bg-[#1C1C1E]/[0.98] backdrop-blur-xl shadow-2xl border border-white/10 rounded-2xl flex flex-col transform transition-transform duration-500 ease-[cubic-bezier(0.19,1,0.22,1)] overflow-hidden ${isSettingsOpen ? 'translate-x-0' : 'translate-x-[calc(100%+32px)]'}`}>
+      <div className="h-14 border-b border-white/5 flex items-center justify-between px-5 bg-black/20 shrink-0">
+        <h2 className="text-white font-medium flex items-center gap-2"><Settings size={16} className="text-[#808080]" /> Settings</h2>
+        <button onClick={() => setIsSettingsOpen(false)} className="text-[#808080] hover:text-white p-1 rounded-md hover:bg-white/5"><X size={18} /></button>
+      </div>
       <div className="flex flex-1 min-h-0 overflow-hidden">
-        <nav className="w-[190px] bg-black/10 border-r border-white/5 p-3 flex flex-col gap-1 shrink-0 overflow-y-auto custom-scrollbar">{tabs.map(tab => <button key={tab.id} onClick={() => setActiveTab(tab.id)} className={`flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-[13px] text-left transition-colors ${activeTab === tab.id ? 'bg-[var(--accent)] text-white font-medium shadow-lg' : 'text-[var(--ui-secondary)] hover:text-[var(--ui-primary)] hover:bg-white/5'}`}>{tab.icon}{tab.label}</button>)}</nav>
-        <main className="flex-1 min-w-0 overflow-y-auto custom-scrollbar"><div className="p-6 pb-10 text-[var(--ui-primary)] text-sm max-w-[520px] mx-auto">
+        <nav className="w-[180px] bg-black/10 border-r border-white/5 p-3 flex flex-col gap-1 shrink-0 overflow-y-auto">
+          {tabs.map(tab => <button key={tab.id} onClick={() => setActiveTab(tab.id)} className={`flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-[13px] text-left transition-colors ${activeTab === tab.id ? 'bg-[#0A84FF] text-white font-medium' : 'text-[#808080] hover:text-white hover:bg-white/5'}`}>{tab.icon}{tab.label}</button>)}
+        </nav>
+        <main className="flex-1 min-w-0 overflow-y-auto custom-scrollbar">
+          <div className="p-6 pb-10 text-white text-sm max-w-[480px] mx-auto space-y-6">
 
-          {activeTab === 'general' && <Page title="General" subtitle="Core behavior for the canvas, window, and workspace."><SettingsGroup title="Startup & Window"><SettingRow label="Open last board on startup" description="Load the most recent project automatically when Refstudio starts." active={true} onToggle={() => {}} disabled /><SettingRow label="Always on Top" description="Keep Refstudio above other apps while drawing." active={isAlwaysOnTop} onToggle={() => setIsAlwaysOnTop(!isAlwaysOnTop)} />{isAlwaysOnTop && <RangeRow label="Overlay opacity" description="Adjust transparency while pinned above another app." value={bgOpacity} min={10} max={100} suffix="%" onChange={setBgOpacity} />}</SettingsGroup><SettingsGroup title="Canvas"><SettingRow icon={<Grid3X3 size={16} />} label="Grid" description="Show the subtle dotted canvas grid." active={showGrid} onToggle={() => setShowGrid(!showGrid)} /><SettingRow icon={<Navigation size={16} />} label="Navigator / Minimap" description="Compact board overview in the bottom-right corner. Off by default." active={showMinimap} onToggle={() => setShowMinimap(!showMinimap)} /></SettingsGroup></Page>}
+            {activeTab === 'general' && <>
+              <Header title="General" subtitle="Core behavior for the canvas, window, and workspace." />
+              <Section title="Window">
+                <ToggleRow label="Always on Top" description="Keep above other apps while drawing." active={isAlwaysOnTop} onToggle={() => setIsAlwaysOnTop(!isAlwaysOnTop)} />
+                {isAlwaysOnTop && <RangeRow label="Overlay opacity" value={bgOpacity} min={10} max={100} suffix="%" onChange={setBgOpacity} />}
+              </Section>
+              <Section title="Canvas">
+                <ToggleRow icon={<Grid3X3 size={16} />} label="Grid" description="Show dotted canvas grid." active={showGrid} onToggle={() => setShowGrid(!showGrid)} />
+                <ToggleRow icon={<Navigation size={16} />} label="Minimap" description="Compact board overview in bottom-right." active={showMinimap} onToggle={() => setShowMinimap(!showMinimap)} />
+              </Section>
+            </>}
 
-          {activeTab === 'appearance' && <Page title="Appearance" subtitle="Choose a workspace theme that reduces eye strain during long reference sessions.">
-            <SettingsGroup title="Theme">
-              <div className="p-4 grid grid-cols-1 gap-3">
-                {THEMES.map(t => (
-                  <button key={t.id} onClick={() => setTheme(t.id)} className={`p-4 rounded-xl border text-left transition-all ${theme === t.id ? 'border-[var(--accent)] bg-[var(--accent)]/8 shadow-lg shadow-[var(--accent)]/5' : 'border-white/10 bg-black/20 hover:border-white/20 hover:bg-black/10'}`}>
-                    <div className="flex items-center justify-between mb-3">
-                      <div className="flex gap-2">{t.colors.map(c => <div key={c} className="w-8 h-8 rounded-lg border border-black/30 shadow-inner" style={{ backgroundColor: c }} />)}</div>
-                      {theme === t.id && <div className="w-6 h-6 rounded-full bg-[var(--accent)] flex items-center justify-center"><Check size={14} className="text-white" /></div>}
-                    </div>
-                    <div className="text-[14px] font-semibold text-[var(--ui-primary)]">{t.name}</div>
-                    <div className="text-[12px] text-[var(--ui-secondary)] mt-1 leading-4">{t.description}</div>
-                  </button>
-                ))}
-              </div>
-            </SettingsGroup>
-            <SettingsGroup title="Canvas Display">
-              <InfoRow icon={<Palette size={16} />} label="Canvas background" value="var(--canvas-bg)" description="Adapts to the selected theme. Neutral dark recedes so references are figure against ground." />
-              <InfoRow icon={<MousePointer2 size={16} />} label="Interface chrome" value="Auto-hide" description="The toolbar remains hidden until you move toward it, keeping the board dominant per SRS §6." />
-            </SettingsGroup>
-          </Page>}
+            {activeTab === 'appearance' && <>
+              <Header title="Appearance" subtitle="Choose a workspace theme for long sessions." />
+              <Section title="Theme">
+                <div className="p-4 grid gap-3">
+                  {THEMES.map(t => (
+                    <button key={t.id} onClick={() => setTheme(t.id)} className={`p-4 rounded-xl border text-left transition-all ${theme === t.id ? 'border-[#0A84FF] bg-[#0A84FF]/8' : 'border-white/10 bg-black/20 hover:border-white/20'}`}>
+                      <div className="flex items-center justify-between mb-3"><div className="flex gap-2">{t.colors.map(c => <div key={c} className="w-8 h-8 rounded-lg border border-black/30" style={{ backgroundColor: c }} />)}</div>{theme === t.id && <div className="w-6 h-6 rounded-full bg-[#0A84FF] flex items-center justify-center"><Check size={14} /></div>}</div>
+                      <div className="text-[14px] font-semibold">{t.name}</div>
+                      <div className="text-[12px] text-[#808080] mt-1">{t.description}</div>
+                    </button>
+                  ))}
+                </div>
+              </Section>
+            </>}
 
-          {activeTab === 'shortcuts' && <Page title="Keyboard Shortcuts" subtitle="Hotkey-first controls for one-hand artist workflow."><SettingsGroup title="Panels"><ShortcutRow combo="B" label="Toggle Browser Panel" /><ShortcutRow combo="L" label="Toggle Library Panel" /><ShortcutRow combo="Esc" label="Close panels / clear selection" /><ShortcutRow combo="Ctrl + ," label="Open Settings" /></SettingsGroup><SettingsGroup title="Canvas"><ShortcutRow combo="Space + Drag" label="Pan canvas" /><ShortcutRow combo="Scroll" label="Zoom to cursor" /><ShortcutRow combo="Ctrl + 0" label="Fit all images" /><ShortcutRow combo="Ctrl + 1" label="100% zoom" /><ShortcutRow combo="A" label="Toggle annotation mode" /><ShortcutRow combo="D" label="Desaturate selection" /><ShortcutRow combo="Shift + D" label="Desaturate all" /><ShortcutRow combo="Delete" label="Delete selection" /></SettingsGroup><SettingsGroup title="Editing"><ShortcutRow combo="Ctrl + Z" label="Undo" /><ShortcutRow combo="Ctrl + Shift + Z" label="Redo" /><ShortcutRow combo="Ctrl + A" label="Select all images" /><ShortcutRow combo="Ctrl + G" label="Group selection" /><ShortcutRow combo="Ctrl + Shift + G" label="Ungroup selection" /></SettingsGroup></Page>}
+            {activeTab === 'shortcuts' && <>
+              <Header title="Keyboard Shortcuts" subtitle="Hotkey-first controls for one-hand artist workflow." />
+              <Section title="Panels"><SK combo="B" label="Toggle Browser" /><SK combo="L" label="Toggle Library" /><SK combo="Esc" label="Close panels / clear selection" /><SK combo="Ctrl + ," label="Open Settings" /></Section>
+              <Section title="Canvas"><SK combo="Space + Drag" label="Pan canvas" /><SK combo="Scroll" label="Zoom to cursor" /><SK combo="Ctrl + 0" label="Fit all images" /><SK combo="Ctrl + 1" label="100% zoom" /><SK combo="A" label="Toggle annotation mode" /><SK combo="D" label="Desaturate selection" /><SK combo="Shift + D" label="Desaturate all" /><SK combo="H" label="Flip horizontal" /><SK combo="F" label="Focus mode" /><SK combo="V" label="Value mirror" /><SK combo="Z (hold)" label="Zoom lens" /><SK combo="Delete" label="Delete selection" /></Section>
+              <Section title="Editing"><SK combo="Ctrl + Z" label="Undo" /><SK combo="Ctrl + Shift + Z" label="Redo" /><SK combo="Ctrl + A" label="Select all" /><SK combo="Ctrl + D" label="Duplicate" /><SK combo="Ctrl + G" label="Group" /><SK combo="Ctrl + Shift + G" label="Ungroup" /></Section>
+            </>}
 
-          {activeTab === 'privacy' && <Page title="Privacy" subtitle="Local-first browsing and capture controls."><SettingsGroup title="Muse Shield"><div className="p-4 grid grid-cols-2 gap-3"><StatBox value={shieldReport.engine_rules.toLocaleString()} label="Rules" /><StatBox value={shieldReport.blocked_requests.toLocaleString()} label="Requests blocked" /><StatBox value={shieldReport.blocked_cosmetic.toLocaleString()} label="Elements hidden" /><StatBox value={shieldReport.https_upgrades.toLocaleString()} label="HTTPS upgrades" /></div><div className="px-4 pb-4"><button onClick={() => invoke('shield_update_lists').catch(() => {})} className="w-full py-2.5 bg-white/5 hover:bg-white/10 rounded-xl border border-white/10 text-sm flex items-center justify-center gap-2"><RefreshCw size={14} /> Update filters</button></div></SettingsGroup><SettingsGroup title="Local Data"><InfoRow icon={<Shield size={16} />} label="Privacy model" value="Local-first" description="Boards, library, and history stay on your machine." /><ActionRow label="App navigation history" description="Clear Refstudio's app-managed URL history." actionLabel="Clear History" danger onClick={() => invoke('history_clear').catch(() => {})} /></SettingsGroup></Page>}
+            {activeTab === 'privacy' && <>
+              <Header title="Privacy" subtitle="Local-first browsing and capture." />
+              <Section title="Muse Shield">
+                <div className="p-4 grid grid-cols-2 gap-3">
+                  <Stat value={shieldReport.engine_rules.toLocaleString()} label="Filter rules" />
+                  <Stat value={shieldReport.blocked_requests.toLocaleString()} label="Requests blocked" />
+                  <Stat value={shieldReport.blocked_cosmetic.toLocaleString()} label="Elements hidden" />
+                  <Stat value={shieldReport.https_upgrades.toLocaleString()} label="HTTPS upgrades" />
+                </div>
+                <div className="px-4 pb-4"><button onClick={() => invoke('shield_update_lists').catch(() => {})} className="w-full py-2.5 bg-white/5 hover:bg-white/10 rounded-xl border border-white/10 text-sm flex items-center justify-center gap-2"><RefreshCw size={14} /> Update filters</button></div>
+              </Section>
+              <Section title="Data"><InfoRow label="Privacy model" value="Local-first" description="Boards, library, and history stay on your machine. Nothing leaves your device." /></Section>
+            </>}
 
-          {activeTab === 'vault' && <Page title="Password Vault" subtitle="Stronghold-backed local credential storage."><SettingsGroup title="Vault Status"><div className="p-4 space-y-3"><p className="text-[var(--ui-secondary)] text-xs leading-relaxed">Passwords are stored using Tauri Stronghold. Unlocks only with your master password.</p>{!vaultUnlocked ? <div className="flex gap-2"><input type="password" value={master} onChange={e => setMaster(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') unlock(); }} placeholder="Master password" className="flex-1 bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[var(--accent)]" /><button onClick={unlock} className="px-4 py-2 bg-[var(--accent)] rounded-xl text-white flex items-center gap-2"><Unlock size={14} /> Unlock</button></div> : <button onClick={() => { lockVault(); setVaultUnlocked(false); setCreds([]); }} className="px-4 py-2 bg-white/5 border border-white/10 rounded-xl text-white flex items-center gap-2"><Lock size={14} /> Lock vault</button>}{vaultMsg && <div className="text-xs text-[#FFD60A]">{vaultMsg}</div>}</div></SettingsGroup>{vaultUnlocked && <SettingsGroup title="Credentials"><div className="p-4 space-y-2"><input value={origin} onChange={e => setOrigin(e.target.value)} placeholder="Site (example.com)" className="w-full bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[var(--accent)]" /><input value={username} onChange={e => setUsername(e.target.value)} placeholder="Username" className="w-full bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[var(--accent)]" /><input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" className="w-full bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[var(--accent)]" /><button onClick={saveCred} className="w-full px-3 py-2.5 bg-[var(--accent)] rounded-xl text-white flex items-center justify-center gap-2"><Plus size={14} /> Save</button></div><div className="px-4 pb-4 space-y-2">{creds.map(c => <div key={c.id} className="flex items-center justify-between bg-black/20 border border-white/5 rounded-xl p-3"><div><div className="text-white text-sm">{c.username}</div><div className="text-[var(--ui-secondary)] text-xs">{c.origin}</div></div><button onClick={() => deleteCredential(c.id).then(reloadCreds)} className="text-red-300 hover:bg-red-500/10 rounded-lg p-2"><Trash2 size={14} /></button></div>)}</div></SettingsGroup>}</Page>}
+            {activeTab === 'storage' && <>
+              <Header title="Storage & Export" subtitle="Export boards and manage local data." />
+              <Section title="Export Current Board">
+                <div className="p-4 space-y-3">
+                  <p className="text-[12px] text-[#808080]">Download the current board as a JSON file. Contains all image URLs, positions, annotations, and settings. Images stored as external URLs (not embedded).</p>
+                  <button onClick={handleExportBoard} className="w-full py-2.5 bg-white/5 hover:bg-white/10 rounded-xl border border-white/10 text-sm flex items-center justify-center gap-2"><FileDown size={14} /> Export Board (.json)</button>
+                  {exportMsg && <div className="text-xs text-[#FFD60A] bg-[#FFD60A]/10 border border-[#FFD60A]/20 rounded-lg px-3 py-2">{exportMsg}</div>}
+                </div>
+              </Section>
+              <Section title="Info">
+                <InfoRow label="Images on board" value={String(images.length)} description="Reference images currently on canvas." />
+                <InfoRow label="Annotations" value={String(annotations.length)} description="Freehand drawing strokes." />
+                <InfoRow label="Text notes" value={String(textNotes.length)} description="Rich text note nodes." />
+                <InfoRow label="Auto-save" value="800ms" description="Debounced write after every edit." />
+              </Section>
+            </>}
 
-          {activeTab === 'storage' && <Page title="Storage" subtitle="Manage local data, export boards, and inspect disk usage."><SettingsGroup title="Usage">{storageLoading ? <div className="px-4 py-6 text-center text-[var(--ui-secondary)]"><RefreshCw size={16} className="animate-spin mx-auto mb-2" />Loading...</div> : storageInfo ? <div className="p-4 grid grid-cols-2 gap-3"><StatBox value={formatBytes(storageInfo.total_size_bytes)} label="Total storage" /><StatBox value={String(storageInfo.file_count)} label="Files on disk" /><StatBox value={String(storageInfo.project_count)} label="Saved projects" /><StatBox value={String(storageInfo.library_count)} label="Library images" /></div> : null}{storageInfo && <div className="px-4 pb-4 space-y-1"><InfoRow icon={<Database size={16} />} label="Projects" value={formatBytes(storageInfo.projects_size_bytes)} description={`${storageInfo.project_count} board files.`} /><InfoRow icon={<ImageIcon size={16} />} label="Library" value={formatBytes(storageInfo.library_size_bytes)} description={`${storageInfo.library_count} images with palettes.`} /><InfoRow icon={<Clock size={16} />} label="Auto-save" value="800ms" description="Debounced write after edits." /></div>}</SettingsGroup><SettingsGroup title="Data Location"><div className="px-4 py-3 flex items-center justify-between gap-4"><div><div className="text-[14px] font-medium text-white">App data folder</div><div className="text-[11px] text-[var(--ui-secondary)] mt-1 font-mono break-all">{storageInfo?.data_path || '...'}</div></div><button onClick={handleRevealFolder} className="shrink-0 px-3 py-2 rounded-xl text-[12px] font-semibold border bg-white/5 text-white border-white/10 hover:bg-white/10 flex items-center gap-1.5"><FolderOpen size={13} /> Open</button></div></SettingsGroup><SettingsGroup title="Export"><ActionRow label="Export as .refs archive" description="Portable file with all images embedded." actionLabel="Export .refs" onClick={handleExportRefs} /></SettingsGroup><SettingsGroup title="Danger Zone"><ActionRow label="Clear asset library" description="Remove all imported images." actionLabel="Clear" danger onClick={handleClearLibrary} /><ActionRow label="Delete all projects" description="Remove every saved board." actionLabel="Delete" danger onClick={handleClearProjects} /></SettingsGroup>{storageMsg && <div className="mt-3 text-xs text-[#FFD60A] bg-[#FFD60A]/10 border border-[#FFD60A]/20 rounded-xl px-3 py-2">{storageMsg}</div>}</Page>}
-
-          {activeTab === 'about' && <Page title="About" subtitle="Refstudio alpha build."><div className="flex flex-col items-center text-center mt-8 gap-3"><div className="w-20 h-20 bg-[var(--panel-surface)] rounded-2xl flex items-center justify-center"><Monitor size={32} className="text-[var(--accent)]" /></div><h1 className="text-2xl font-semibold">Refstudio</h1><p className="text-[var(--ui-secondary)]">1.0.0-alpha</p><p className="max-w-sm text-[var(--ui-secondary)] text-sm leading-relaxed">A local-first artist reference board with embedded browser capture, asset library, annotations, and privacy-respecting storage.</p></div></Page>}
-        </div></main>
+            {activeTab === 'about' && <>
+              <div className="flex flex-col items-center text-center mt-8 gap-3">
+                <div className="w-20 h-20 bg-[#2A2A2E] rounded-2xl flex items-center justify-center"><Monitor size={32} className="text-[#0A84FF]" /></div>
+                <h1 className="text-2xl font-semibold">Refstudio</h1>
+                <p className="text-[#808080]">1.0.0-alpha</p>
+                <p className="max-w-sm text-[#808080] text-sm leading-relaxed">A local-first artist reference board with embedded browser capture, asset library, annotations, and privacy-respecting storage.</p>
+              </div>
+            </>}
+          </div>
+        </main>
       </div>
     </div>
   );
 };
 
-function Page({ title, subtitle, children }: { title: string; subtitle: string; children: React.ReactNode }) { return <div className="space-y-6"><div><h1 className="text-2xl font-semibold text-[var(--ui-primary)] tracking-tight">{title}</h1><p className="text-sm text-[var(--ui-secondary)] mt-1 leading-relaxed">{subtitle}</p></div>{children}</div>; }
-function SettingsGroup({ title, children }: { title: string; children: React.ReactNode }) { return <section><h3 className="text-[13px] font-semibold uppercase tracking-[0.12em] text-[var(--ui-secondary)] mb-3">{title}</h3><div className="rounded-2xl border border-white/8 bg-black/18 overflow-hidden divide-y divide-white/6">{children}</div></section>; }
-function SettingRow({ label, description, active, onToggle, disabled, icon }: { label: string; description: string; active: boolean; onToggle: () => void; disabled?: boolean; icon?: React.ReactNode }) { return <button type="button" disabled={disabled} onClick={onToggle} className="w-full min-h-[76px] px-4 py-3 flex items-center justify-between gap-5 text-left hover:bg-white/[0.035] disabled:opacity-60 disabled:cursor-default transition-colors"><div className="flex items-start gap-3 min-w-0 flex-1">{icon && <div className="mt-0.5 text-[var(--accent)] shrink-0">{icon}</div>}<div className="min-w-0"><div className="text-[14px] font-medium text-[var(--ui-primary)] leading-5">{label}</div><div className="text-[12px] text-[var(--ui-secondary)] leading-4 mt-1 max-w-[370px]">{description}</div></div></div><Switch active={active} /></button>; }
-function Switch({ active }: { active: boolean }) { return <div className={`relative shrink-0 w-[52px] h-[30px] rounded-full transition-colors ${active ? 'bg-[var(--accent)]' : 'bg-[#3A3A3E]'}`}><div className={`absolute top-[3px] w-6 h-6 rounded-full bg-white shadow-md transition-all ${active ? 'left-[25px]' : 'left-[3px]'}`} /></div>; }
-function RangeRow({ label, description, value, min, max, suffix, onChange }: { label: string; description: string; value: number; min: number; max: number; suffix: string; onChange: (v: number) => void }) { return <div className="px-4 py-3 flex items-center justify-between gap-4 hover:bg-white/[0.035]"><div><div className="text-[14px] font-medium text-[var(--ui-primary)]">{label}</div><div className="text-[12px] text-[var(--ui-secondary)] mt-1 max-w-[340px]">{description}</div></div><div className="flex items-center gap-3 shrink-0"><span className="text-xs text-[var(--ui-secondary)] w-10 text-right">{value}{suffix}</span><input type="range" min={min} max={max} value={value} onChange={e => onChange(Number(e.target.value))} className="w-32 accent-[var(--accent)]" /></div></div>; }
-function InfoRow({ icon, label, value, description }: { icon: React.ReactNode; label: string; value: string; description: string }) { return <div className="px-4 py-3 flex items-start justify-between gap-4"><div className="flex items-start gap-3 min-w-0"><div className="text-[var(--accent)] mt-0.5 shrink-0">{icon}</div><div><div className="text-[14px] font-medium text-[var(--ui-primary)]">{label}</div><div className="text-[12px] text-[var(--ui-secondary)] mt-1 max-w-[360px] leading-4">{description}</div></div></div><div className="text-[12px] text-[var(--ui-secondary)] shrink-0 bg-white/5 border border-white/8 rounded-lg px-2 py-1">{value}</div></div>; }
-function ActionRow({ label, description, actionLabel, onClick, danger }: { label: string; description: string; actionLabel: string; onClick: () => void; danger?: boolean }) { return <div className="px-4 py-3 flex items-center justify-between gap-4"><div><div className="text-[14px] font-medium text-[var(--ui-primary)]">{label}</div><div className="text-[12px] text-[var(--ui-secondary)] mt-1 max-w-[360px]">{description}</div></div><button onClick={onClick} className={`shrink-0 px-3 py-2 rounded-xl text-[12px] font-semibold border ${danger ? 'bg-red-500/10 text-red-300 border-red-500/20 hover:bg-red-500/20' : 'bg-white/5 text-white border-white/10 hover:bg-white/10'}`}>{actionLabel}</button></div>; }
-function ShortcutRow({ combo, label }: { combo: string; label: string }) { return <div className="px-4 py-2.5 flex items-center justify-between gap-4"><span className="text-[13px] text-[var(--ui-primary)]">{label}</span><kbd className="bg-black/30 border border-white/10 px-2.5 py-1 rounded-lg text-[11px] text-[var(--ui-secondary)] font-mono">{combo}</kbd></div>; }
-function StatBox({ value, label }: { value: string; label: string }) { return <div className="bg-black/20 rounded-xl p-3 text-center border border-white/5"><div className="text-lg font-bold text-[var(--accent)]">{value}</div><div className="text-[10px] text-[var(--ui-secondary)] mt-1">{label}</div></div>; }
+function Header({ title, subtitle }: { title: string; subtitle: string }) { return <div><h1 className="text-2xl font-semibold tracking-tight">{title}</h1><p className="text-sm text-[#808080] mt-1">{subtitle}</p></div>; }
+function Section({ title, children }: { title: string; children: React.ReactNode }) { return <section><h3 className="text-[12px] font-semibold uppercase tracking-wider text-[#808080] mb-3">{title}</h3><div className="rounded-2xl border border-white/8 bg-black/20 overflow-hidden divide-y divide-white/5">{children}</div></section>; }
+function ToggleRow({ label, description, active, onToggle, icon }: { label: string; description: string; active: boolean; onToggle: () => void; icon?: React.ReactNode }) { return <button type="button" onClick={onToggle} className="w-full px-4 py-3 flex items-center justify-between gap-4 text-left hover:bg-white/[0.03] transition-colors"><div className="flex items-start gap-3 min-w-0 flex-1">{icon && <div className="mt-0.5 text-[#0A84FF] shrink-0">{icon}</div>}<div><div className="text-[14px] font-medium">{label}</div><div className="text-[12px] text-[#808080] mt-0.5">{description}</div></div></div><div className={`relative shrink-0 w-[44px] h-[24px] rounded-full transition-colors ${active ? 'bg-[#0A84FF]' : 'bg-[#3A3A3E]'}`}><div className={`absolute top-[2px] w-5 h-5 rounded-full bg-white shadow-md transition-all ${active ? 'left-[22px]' : 'left-[2px]'}`} /></div></button>; }
+function RangeRow({ label, value, min, max, suffix, onChange }: { label: string; value: number; min: number; max: number; suffix: string; onChange: (v: number) => void }) { return <div className="px-4 py-3 flex items-center justify-between gap-4"><span className="text-[13px]">{label}</span><div className="flex items-center gap-3"><span className="text-xs text-[#808080] w-8 text-right">{value}{suffix}</span><input type="range" min={min} max={max} value={value} onChange={e => onChange(Number(e.target.value))} className="w-28 accent-[#0A84FF]" /></div></div>; }
+function InfoRow({ label, value, description }: { label: string; value: string; description: string }) { return <div className="px-4 py-3 flex items-center justify-between gap-4"><div><div className="text-[13px] font-medium">{label}</div><div className="text-[11px] text-[#808080] mt-0.5">{description}</div></div><div className="text-[11px] text-[#808080] bg-white/5 border border-white/8 rounded-lg px-2 py-1">{value}</div></div>; }
+function SK({ combo, label }: { combo: string; label: string }) { return <div className="px-4 py-2 flex items-center justify-between gap-4"><span className="text-[13px]">{label}</span><kbd className="bg-black/30 border border-white/10 px-2 py-0.5 rounded-lg text-[11px] text-[#808080] font-mono">{combo}</kbd></div>; }
+function Stat({ value, label }: { value: string; label: string }) { return <div className="bg-black/20 rounded-xl p-3 text-center border border-white/5"><div className="text-lg font-bold text-[#0A84FF]">{value}</div><div className="text-[10px] text-[#808080] mt-1">{label}</div></div>; }