feat: RefStudio SRS Phase 1+2 complete board - always-on-top, opacity, desaturate, flip, context menu, undo/redo, palette extraction, auto-save, annotations"

src/components/views/BoardView.tsx

@@ -0,0 +1,288 @@
+import { motion, AnimatePresence } from 'motion/react';
+import { Type, Image as ImageIcon, Plus, Minus, Library, X, Search, FilePlus2, FolderOpen, Palette, Trash2, RotateCw, FlipHorizontal, FlipVertical, Layers, Grid, Pin, Eye, Undo2, Redo2, Maximize, Copy, ExternalLink } from 'lucide-react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { getCurrentWindow } from '@tauri-apps/api/window';
+import { cn, defaultTransition } from '../../lib/utils';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+interface BoardItem { id: string; kind: string; library_id?: string; data_url?: string; text?: string; colors: string[]; x: number; y: number; w: number; h: number; z: number; rotation?: number; flipped?: boolean; flipV?: boolean; desaturated?: boolean; source_url?: string; }
+interface BoardSummary { id: string; title: string; item_count: number; created_at: number; updated_at: number; }
+interface BoardDocument { id: string; title: string; items: BoardItem[]; created_at: number; updated_at: number; }
+interface LibItem { id: string; data_url: string; title: string; width: number; height: number; tags: string[]; colors: string[]; source_url?: string; }
+interface ContextMenu { x: number; y: number; itemId: string; }
+
+type InteractionMode =
+  | null
+  | { type: 'pan'; startX: number; startY: number; vpX: number; vpY: number }
+  | { type: 'move'; ids: string[]; startX: number; startY: number; origins: { id: string; x: number; y: number }[] }
+  | { type: 'resize'; id: string; handle: string; startX: number; startY: number; ox: number; oy: number; ow: number; oh: number; aspect: number }
+  | { type: 'rotate'; id: string; centerX: number; centerY: number; startAngle: number; origRotation: number }
+  | { type: 'marquee'; startX: number; startY: number; endX: number; endY: number };
+
+type UndoAction = { type: 'add'; item: BoardItem } | { type: 'delete'; item: BoardItem } | { type: 'update'; before: BoardItem; after: BoardItem };
+
+// ─── k-means Color Extraction ────────────────────────────────────────────────
+function extractColors(src: string, count = 5): Promise<string[]> {
+  return new Promise((resolve) => {
+    const img = new Image(); img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      try {
+        const c = document.createElement('canvas'); const ctx = c.getContext('2d')!;
+        c.width = 80; c.height = 80; ctx.drawImage(img, 0, 0, 80, 80);
+        const d = ctx.getImageData(0, 0, 80, 80).data;
+        const pxs: number[][] = [];
+        for (let i = 0; i < d.length; i += 12) { const r=d[i],g=d[i+1],b=d[i+2]; if(r+g+b>20) pxs.push([r,g,b]); }
+        if (pxs.length < 3) { resolve([]); return; }
+        // k-means with random init
+        let centroids = pxs.slice(0, count).map(p => [...p]);
+        for (let iter = 0; iter < 10; iter++) {
+          const clusters: number[][][] = centroids.map(() => []);
+          pxs.forEach(p => { let minD = Infinity, minI = 0; centroids.forEach((c, i) => { const d = (p[0]-c[0])**2+(p[1]-c[1])**2+(p[2]-c[2])**2; if (d < minD) { minD = d; minI = i; } }); clusters[minI].push(p); });
+          centroids = clusters.map((cl, i) => cl.length ? [cl.reduce((a,p)=>a+p[0],0)/cl.length, cl.reduce((a,p)=>a+p[1],0)/cl.length, cl.reduce((a,p)=>a+p[2],0)/cl.length] : centroids[i]);
+        }
+        resolve(centroids.map(c => '#' + c.map(v => Math.round(v).toString(16).padStart(2, '0')).join('')));
+      } catch { resolve([]); }
+    };
+    img.onerror = () => resolve([]); img.src = src;
+  });
+}
+
+// ─── Main Board ──────────────────────────────────────────────────────────────
+export default function BoardView() {
+  const [doc, setDoc] = useState<BoardDocument | null>(null);
+  const [boards, setBoards] = useState<BoardSummary[]>([]);
+  const [items, setItems] = useState<BoardItem[]>([]);
+  const [selection, setSelection] = useState<string[]>([]);
+  const [vp, setVp] = useState({ x: 0, y: 0, scale: 1 });
+  const [mode, setMode] = useState<InteractionMode>(null);
+  const [showGrid, setShowGrid] = useState(true);
+  const [libOpen, setLibOpen] = useState(false);
+  const [libItems, setLibItems] = useState<LibItem[]>([]);
+  const [libQuery, setLibQuery] = useState('');
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [alwaysOnTop, setAlwaysOnTop] = useState(false);
+  const [globalOpacity, setGlobalOpacity] = useState(1);
+  const [globalDesat, setGlobalDesat] = useState(false);
+  const [ctxMenu, setCtxMenu] = useState<ContextMenu | null>(null);
+  const [undoStack, setUndoStack] = useState<UndoAction[]>([]);
+  const [redoStack, setRedoStack] = useState<UndoAction[]>([]);
+  const boardRef = useRef<HTMLDivElement>(null);
+  const nextZ = useRef(1);
+  const autoSaveTimer = useRef<ReturnType<typeof setTimeout>>();
+
+  // ─── Data ──────────────────────────────────────────────────────────────────
+  const loadBoard = () => invoke<BoardDocument>('board_current').then(d => { setDoc(d); setItems(d.items); nextZ.current = d.items.reduce((m, i) => Math.max(m, i.z || 0), 0) + 1; }).catch(() => {});
+  const loadBoards = () => invoke<BoardSummary[]>('board_list').then(setBoards).catch(() => {});
+  const loadLib = () => invoke<LibItem[]>('library_items').then(setLibItems).catch(() => {});
+  useEffect(() => { loadBoard(); loadBoards(); loadLib(); }, []);
+  useEffect(() => { if (libOpen) loadLib(); }, [libOpen]);
+
+  // Auto-save
+  useEffect(() => {
+    clearTimeout(autoSaveTimer.current);
+    autoSaveTimer.current = setTimeout(() => { items.forEach(item => invoke('board_update_item', { item }).catch(() => {})); }, 2000);
+    return () => clearTimeout(autoSaveTimer.current);
+  }, [items]);
+
+  // ─── Always on Top ─────────────────────────────────────────────────────────
+  const toggleAlwaysOnTop = async () => {
+    const next = !alwaysOnTop;
+    setAlwaysOnTop(next);
+    try { await getCurrentWindow().setAlwaysOnTop(next); } catch (e) { console.error('setAlwaysOnTop failed', e); }
+  };
+
+  // ─── Coordinates ───────────────────────────────────────────────────────────
+  const toWorld = useCallback((cx: number, cy: number) => { const r = boardRef.current!.getBoundingClientRect(); return { x: (cx - r.left - vp.x) / vp.scale, y: (cy - r.top - vp.y) / vp.scale }; }, [vp]);
+  const center = useCallback(() => { const r = boardRef.current?.getBoundingClientRect(); if (!r) return { x: 200, y: 200 }; return { x: (r.width / 2 - vp.x) / vp.scale, y: (r.height / 2 - vp.y) / vp.scale }; }, [vp]);
+
+  // ─── Undo/Redo ─────────────────────────────────────────────────────────────
+  const pushUndo = (action: UndoAction) => { setUndoStack(s => [...s.slice(-99), action]); setRedoStack([]); };
+  const undo = () => {
+    const action = undoStack[undoStack.length - 1]; if (!action) return;
+    setUndoStack(s => s.slice(0, -1));
+    if (action.type === 'add') { setItems(p => p.filter(i => i.id !== action.item.id)); invoke('board_delete_item', { id: action.item.id }).catch(() => {}); }
+    if (action.type === 'delete') { setItems(p => [...p, action.item]); invoke('board_update_item', { item: action.item }).catch(() => {}); }
+    if (action.type === 'update') { setItems(p => p.map(i => i.id === action.before.id ? action.before : i)); invoke('board_update_item', { item: action.before }).catch(() => {}); }
+    setRedoStack(s => [...s, action]);
+  };
+  const redo = () => {
+    const action = redoStack[redoStack.length - 1]; if (!action) return;
+    setRedoStack(s => s.slice(0, -1));
+    if (action.type === 'add') { setItems(p => [...p, action.item]); invoke('board_update_item', { item: action.item }).catch(() => {}); }
+    if (action.type === 'delete') { setItems(p => p.filter(i => i.id !== action.item.id)); invoke('board_delete_item', { id: action.item.id }).catch(() => {}); }
+    if (action.type === 'update') { setItems(p => p.map(i => i.id === action.after.id ? action.after : i)); invoke('board_update_item', { item: action.after }).catch(() => {}); }
+    setUndoStack(s => [...s, action]);
+  };
+
+  // ─── Item ops with undo ────────────────────────────────────────────────────
+  const updateItemWithUndo = (id: string, patch: Partial<BoardItem>) => {
+    const before = items.find(i => i.id === id); if (!before) return;
+    const after = { ...before, ...patch };
+    pushUndo({ type: 'update', before, after });
+    setItems(p => p.map(i => i.id === id ? after : i));
+    invoke('board_update_item', { item: after }).catch(() => {});
+  };
+  const deleteWithUndo = (ids: string[]) => {
+    ids.forEach(id => { const it = items.find(i => i.id === id); if (it) pushUndo({ type: 'delete', item: it }); });
+    setItems(p => p.filter(i => !ids.includes(i.id)));
+    ids.forEach(id => invoke('board_delete_item', { id }).catch(() => {}));
+    setSelection([]);
+  };
+
+  // ─── Zoom + Pan ────────────────────────────────────────────────────────────
+  const onWheel = useCallback((e: React.WheelEvent) => { e.preventDefault(); const r = boardRef.current!.getBoundingClientRect(); const mx = e.clientX - r.left, my = e.clientY - r.top; const factor = e.deltaY < 0 ? 1.1 : 1/1.1; const ns = Math.min(16, Math.max(0.04, vp.scale * factor)); const wx = (mx-vp.x)/vp.scale, wy = (my-vp.y)/vp.scale; setVp({ x: mx - wx*ns, y: my - wy*ns, scale: ns }); }, [vp]);
+  const onBoardDown = useCallback((e: React.PointerEvent) => {
+    if ((e.target as HTMLElement).closest('[data-item]')) return;
+    setCtxMenu(null); setSelection([]);
+    if (e.shiftKey) { const w = toWorld(e.clientX, e.clientY); setMode({ type: 'marquee', startX: w.x, startY: w.y, endX: w.x, endY: w.y }); }
+    else { setMode({ type: 'pan', startX: e.clientX, startY: e.clientY, vpX: vp.x, vpY: vp.y }); }
+  }, [vp, toWorld]);
+
+  useEffect(() => {
+    const onMove = (e: PointerEvent) => {
+      if (!mode) return;
+      if (mode.type === 'pan') { setVp(v => ({ ...v, x: mode.vpX + e.clientX - mode.startX, y: mode.vpY + e.clientY - mode.startY })); }
+      else if (mode.type === 'move') { const dx = (e.clientX-mode.startX)/vp.scale, dy = (e.clientY-mode.startY)/vp.scale; setItems(prev => prev.map(i => { const o = mode.origins.find(o => o.id === i.id); return o ? { ...i, x: o.x+dx, y: o.y+dy } : i; })); }
+      else if (mode.type === 'resize') { const dx = (e.clientX-mode.startX)/vp.scale, dy = (e.clientY-mode.startY)/vp.scale; let nw=mode.ow, nh=mode.oh, nx=mode.ox, ny=mode.oy; const h=mode.handle; if(h.includes('r'))nw=Math.max(50,mode.ow+dx); if(h.includes('l')){nw=Math.max(50,mode.ow-dx);nx=mode.ox+dx;} if(h.includes('b'))nh=Math.max(50,mode.oh+dy); if(h.includes('t')){nh=Math.max(50,mode.oh-dy);ny=mode.oy+dy;} if(e.shiftKey){nh=nw/mode.aspect;} setItems(prev => prev.map(i => i.id===mode.id ? {...i,x:nx,y:ny,w:nw,h:nh} : i)); }
+      else if (mode.type === 'rotate') { const angle = Math.atan2(e.clientY-mode.centerY, e.clientX-mode.centerX)*180/Math.PI; setItems(prev => prev.map(i => i.id===mode.id ? {...i, rotation: mode.origRotation + angle - mode.startAngle} : i)); }
+      else if (mode.type === 'marquee') { const w = toWorld(e.clientX, e.clientY); setMode({...mode, endX: w.x, endY: w.y}); }
+    };
+    const onUp = () => {
+      if (mode?.type === 'move') { mode.ids.forEach(id => { const it = items.find(i => i.id===id); if(it) invoke('board_update_item',{item:it}).catch(()=>{}); }); }
+      if (mode?.type === 'resize' || mode?.type === 'rotate') { const it = items.find(i => i.id===mode.id); if(it) invoke('board_update_item',{item:it}).catch(()=>{}); }
+      if (mode?.type === 'marquee') { const x1=Math.min(mode.startX,mode.endX),x2=Math.max(mode.startX,mode.endX),y1=Math.min(mode.startY,mode.endY),y2=Math.max(mode.startY,mode.endY); setSelection(items.filter(i=>i.x+i.w>x1&&i.x<x2&&i.y+i.h>y1&&i.y<y2).map(i=>i.id)); }
+      setMode(null);
+    };
+    window.addEventListener('pointermove', onMove); window.addEventListener('pointerup', onUp);
+    return () => { window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); };
+  }, [mode, vp, items, toWorld]);
+
+  // ─── Keyboard ──────────────────────────────────────────────────────────────
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Delete' || e.key === 'Backspace') { if (selection.length) deleteWithUndo(selection); }
+      if (e.key === 'a' && (e.ctrlKey||e.metaKey)) { e.preventDefault(); setSelection(items.map(i=>i.id)); }
+      if (e.key === 'z' && (e.ctrlKey||e.metaKey) && !e.shiftKey) { e.preventDefault(); undo(); }
+      if (e.key === 'z' && (e.ctrlKey||e.metaKey) && e.shiftKey) { e.preventDefault(); redo(); }
+      if (e.key === 'Z' && (e.ctrlKey||e.metaKey)) { e.preventDefault(); redo(); }
+      if (e.key === 'd' && !e.ctrlKey) { if (selection.length) selection.forEach(id => updateItemWithUndo(id, { desaturated: !items.find(i=>i.id===id)?.desaturated })); else setGlobalDesat(g=>!g); }
+      if (e.key === 'g' && !e.ctrlKey) setShowGrid(g=>!g);
+      if (e.key === 't' && !e.ctrlKey) toggleAlwaysOnTop();
+      if (e.key === 'l' && !e.ctrlKey) setLibOpen(o=>!o);
+      if (e.key === 'Escape') { setSelection([]); setCtxMenu(null); }
+      if (e.key === ']') { if (selection.length) selection.forEach(id => updateItemWithUndo(id, { z: nextZ.current++ })); }
+      if (e.key === '[') { if (selection.length) selection.forEach(id => updateItemWithUndo(id, { z: 0 })); }
+      if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.key) && selection.length) { const d=e.shiftKey?10:1; const dx=e.key==='ArrowRight'?d:e.key==='ArrowLeft'?-d:0; const dy=e.key==='ArrowDown'?d:e.key==='ArrowUp'?-d:0; selection.forEach(id=>{ const it=items.find(i=>i.id===id); if(it){ const next={...it,x:it.x+dx,y:it.y+dy}; setItems(p=>p.map(i=>i.id===id?next:i)); invoke('board_update_item',{item:next}).catch(()=>{}); } }); }
+    };
+    window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey);
+  }, [selection, items, undoStack, redoStack, globalDesat, alwaysOnTop]);
+
+  // ─── Context Menu Actions ──────────────────────────────────────────────────
+  const ctxActions = {
+    fitToView: (id: string) => { const it = items.find(i=>i.id===id); if(!it) return; const r=boardRef.current!.getBoundingClientRect(); const scale = Math.min(r.width*0.8/it.w, r.height*0.8/it.h); setVp({ x: r.width/2 - (it.x+it.w/2)*scale, y: r.height/2 - (it.y+it.h/2)*scale, scale }); },
+    desaturate: (id: string) => updateItemWithUndo(id, { desaturated: !items.find(i=>i.id===id)?.desaturated }),
+    flipH: (id: string) => updateItemWithUndo(id, { flipped: !items.find(i=>i.id===id)?.flipped }),
+    flipV: (id: string) => updateItemWithUndo(id, { flipV: !items.find(i=>i.id===id)?.flipV }),
+    extractPalette: async (id: string) => { const it = items.find(i=>i.id===id); if(!it?.data_url) return; const colors = await extractColors(it.data_url, 5); if(colors.length) { updateItemWithUndo(id, { colors }); invoke('board_add_palette',{colors, x:it.x+it.w+20, y:it.y}).then(()=>loadBoard()); } },
+    copyImage: (id: string) => { const it = items.find(i=>i.id===id); if(it?.data_url) navigator.clipboard.writeText(it.data_url); },
+    openSource: (id: string) => { const it = items.find(i=>i.id===id); if(it?.source_url) invoke('tab_create',{url:it.source_url, layout:{x:0,y:0,width:1,height:1}}).catch(()=>{}); },
+    delete: (id: string) => deleteWithUndo([id]),
+  };
+
+  // ─── Item interaction ──────────────────────────────────────────────────────
+  const selectItem = (id: string, e: React.PointerEvent) => { if(e.ctrlKey||e.metaKey){setSelection(s=>s.includes(id)?s.filter(x=>x!==id):[...s,id])}else if(!selection.includes(id)){setSelection([id])} };
+  const startMove = (id: string, e: React.PointerEvent) => { e.stopPropagation(); setCtxMenu(null); const ids=selection.includes(id)?selection:[id]; if(!selection.includes(id))setSelection([id]); setMode({type:'move',ids,startX:e.clientX,startY:e.clientY,origins:ids.map(sid=>{const it=items.find(i=>i.id===sid)!;return{id:sid,x:it.x,y:it.y}})}); };
+  const startResize = (id: string, handle: string, e: React.PointerEvent) => { e.stopPropagation(); const it=items.find(i=>i.id===id)!; setMode({type:'resize',id,handle,startX:e.clientX,startY:e.clientY,ox:it.x,oy:it.y,ow:it.w,oh:it.h,aspect:it.w/it.h}); };
+  const startRotate = (id: string, e: React.PointerEvent) => { e.stopPropagation(); const it=items.find(i=>i.id===id)!; const r=boardRef.current!.getBoundingClientRect(); const cx=r.left+vp.x+(it.x+it.w/2)*vp.scale; const cy=r.top+vp.y+(it.y+it.h/2)*vp.scale; setMode({type:'rotate',id,centerX:cx,centerY:cy,startAngle:Math.atan2(e.clientY-cy,e.clientX-cx)*180/Math.PI,origRotation:it.rotation||0}); };
+
+  // ─── Board management ──────────────────────────────────────────────────────
+  const createBoard = () => invoke<BoardDocument>('board_create',{title:newName.trim()||'Untitled Board'}).then(d=>{setDoc(d);setItems(d.items);setNewName('');setPickerOpen(false);loadBoards()});
+  const openBoard = (id: string) => invoke<BoardDocument>('board_open',{id}).then(d=>{setDoc(d);setItems(d.items);setPickerOpen(false);loadBoards()});
+  const addImage = (p: {id?:string;data_url:string;width?:number;height?:number;source_url?:string}, pos?:{x:number;y:number}) => { const pt=pos||center(); const aspect=p.width&&p.height?p.width/p.height:1.5; const w=Math.min(420,Math.max(140,(p.width||300)/3.5)); const h=w/aspect; invoke<BoardItem>('board_add_image',{libraryId:p.id||null,dataUrl:p.data_url,x:pt.x-w/2,y:pt.y-h/2,w,h}).then(it=>{pushUndo({type:'add',item:it});loadBoard()}).catch(console.error); };
+  const addNote = () => { const pt=center(); invoke<BoardItem>('board_add_note',{text:'',x:pt.x,y:pt.y}).then(it=>{pushUndo({type:'add',item:it});loadBoard()}); };
+  const onDrop = (e: React.DragEvent) => { e.preventDefault(); try{const p=JSON.parse(e.dataTransfer.getData('application/x-muse-library-item')||e.dataTransfer.getData('text/plain')); if(p?.data_url)addImage(p,toWorld(e.clientX,e.clientY))}catch{} };
+  const filtered = libQuery ? libItems.filter(i=>i.title.toLowerCase().includes(libQuery.toLowerCase())) : libItems;
+  const marqueeRect = mode?.type==='marquee' ? (()=>{ const x=Math.min(mode.startX,mode.endX),y=Math.min(mode.startY,mode.endY),w=Math.abs(mode.endX-mode.startX),h=Math.abs(mode.endY-mode.startY); return {left:x*vp.scale+vp.x,top:y*vp.scale+vp.y,width:w*vp.scale,height:h*vp.scale}; })() : null;
+
+  return (
+    <motion.div initial={{opacity:0,y:10}} animate={{opacity:1,y:0}} exit={{opacity:0,y:-10}} transition={defaultTransition} className="w-full h-full bg-dusk-bg flex flex-col overflow-hidden select-none" style={{opacity:globalOpacity}}>
+      {/* Header toolbar - auto-hides concept from SRS */}
+      <div className="h-11 shrink-0 border-b border-dusk-border/60 bg-dusk-bg flex items-center justify-between px-4 z-30">
+        <div className="flex items-center gap-2">
+          <button onClick={()=>setPickerOpen(true)} className="text-[13px] font-semibold text-dusk-text hover:text-dusk-accent flex items-center gap-1.5">{doc?.title||'Board'}<FolderOpen className="w-3.5 h-3.5 opacity-50"/></button>
+          <span className="text-[10px] text-dusk-text-muted bg-dusk-surface px-1.5 py-0.5 rounded border border-dusk-border/50">{items.length}</span>
+          <span className="text-[10px] text-dusk-text-muted ml-2">{Math.round(vp.scale*100)}%</span>
+        </div>
+        <div className="flex items-center gap-0.5">
+          <Btn onClick={undo} tip="Undo (Ctrl+Z)" disabled={!undoStack.length}><Undo2 className="w-3.5 h-3.5"/></Btn>
+          <Btn onClick={redo} tip="Redo (Ctrl+Shift+Z)" disabled={!redoStack.length}><Redo2 className="w-3.5 h-3.5"/></Btn>
+          <Sep/>
+          <Btn onClick={toggleAlwaysOnTop} tip="Always on Top (T)" active={alwaysOnTop}><Pin className="w-3.5 h-3.5"/></Btn>
+          {alwaysOnTop && <input type="range" min="0.2" max="1" step="0.05" value={globalOpacity} onChange={e=>setGlobalOpacity(parseFloat(e.target.value))} className="w-16 h-1 accent-dusk-accent" title="Window Opacity"/>}
+          <Sep/>
+          <Btn onClick={()=>setGlobalDesat(g=>!g)} tip="Desaturate All (D)" active={globalDesat}><Eye className="w-3.5 h-3.5"/></Btn>
+          <Btn onClick={()=>setShowGrid(g=>!g)} tip="Grid (G)" active={showGrid}><Grid className="w-3.5 h-3.5"/></Btn>
+          <Sep/>
+          <Btn onClick={addNote} tip="Add Note"><Type className="w-3.5 h-3.5"/></Btn>
+          <Btn onClick={()=>setPickerOpen(true)} tip="Boards"><FilePlus2 className="w-3.5 h-3.5"/></Btn>
+          <Btn onClick={()=>setLibOpen(!libOpen)} tip="Library (L)" active={libOpen}><Library className="w-3.5 h-3.5"/></Btn>
+        </div>
+      </div>
+
+      {/* Picker */}
+      <AnimatePresence>{pickerOpen&&<motion.div initial={{opacity:0,y:-8}} animate={{opacity:1,y:0}} exit={{opacity:0,y:-8}} className="absolute top-12 left-16 z-50 w-[340px] bg-dusk-surface border border-dusk-border rounded-2xl shadow-2xl p-3 flex flex-col gap-2"><div className="flex justify-between"><b className="text-sm">Boards</b><button onClick={()=>setPickerOpen(false)}><X className="w-4 h-4 text-dusk-text-muted"/></button></div><div className="flex gap-2"><input value={newName} onChange={e=>setNewName(e.target.value)} onKeyDown={e=>{if(e.key==='Enter')createBoard()}} placeholder="New board..." className="flex-1 bg-dusk-bg border border-dusk-border rounded-lg px-3 py-1.5 text-xs"/><button onClick={createBoard} className="px-2 py-1.5 rounded-lg bg-dusk-accent/20 text-dusk-accent text-xs font-semibold">Create</button></div><div className="flex flex-col gap-1 max-h-48 overflow-auto">{boards.map(b=><button key={b.id} onClick={()=>openBoard(b.id)} className="p-2 rounded-lg bg-dusk-bg hover:bg-dusk-surface-hover border border-dusk-border/50 text-left text-xs"><b>{b.title}</b> <span className="text-dusk-text-muted">({b.item_count})</span></button>)}</div></motion.div>}</AnimatePresence>
+
+      {/* Context Menu */}
+      <AnimatePresence>{ctxMenu&&<motion.div initial={{opacity:0,scale:0.95}} animate={{opacity:1,scale:1}} exit={{opacity:0,scale:0.95}} style={{left:ctxMenu.x,top:ctxMenu.y}} className="fixed z-[100] w-52 py-1 bg-dusk-surface border border-dusk-border rounded-xl shadow-2xl">
+        <CtxBtn onClick={()=>{ctxActions.fitToView(ctxMenu.itemId);setCtxMenu(null)}}><Maximize className="w-3.5 h-3.5"/>Fit to View</CtxBtn>
+        <CtxBtn onClick={()=>{ctxActions.desaturate(ctxMenu.itemId);setCtxMenu(null)}}><Eye className="w-3.5 h-3.5"/>Desaturate</CtxBtn>
+        <CtxBtn onClick={()=>{ctxActions.flipH(ctxMenu.itemId);setCtxMenu(null)}}><FlipHorizontal className="w-3.5 h-3.5"/>Flip Horizontal</CtxBtn>
+        <CtxBtn onClick={()=>{ctxActions.flipV(ctxMenu.itemId);setCtxMenu(null)}}><FlipVertical className="w-3.5 h-3.5"/>Flip Vertical</CtxBtn>
+        <div className="h-px bg-dusk-border my-1 mx-2"/>
+        <CtxBtn onClick={()=>{ctxActions.extractPalette(ctxMenu.itemId);setCtxMenu(null)}}><Palette className="w-3.5 h-3.5"/>Extract Palette</CtxBtn>
+        <CtxBtn onClick={()=>{ctxActions.copyImage(ctxMenu.itemId);setCtxMenu(null)}}><Copy className="w-3.5 h-3.5"/>Copy Image</CtxBtn>
+        <CtxBtn onClick={()=>{ctxActions.openSource(ctxMenu.itemId);setCtxMenu(null)}}><ExternalLink className="w-3.5 h-3.5"/>Open Source URL</CtxBtn>
+        <div className="h-px bg-dusk-border my-1 mx-2"/>
+        <CtxBtn onClick={()=>{ctxActions.delete(ctxMenu.itemId);setCtxMenu(null)}} danger><Trash2 className="w-3.5 h-3.5"/>Delete</CtxBtn>
+      </motion.div>}</AnimatePresence>
+
+      {/* Canvas + Library */}
+      <div className="flex-1 flex overflow-hidden">
+        <div ref={boardRef} className="flex-1 relative overflow-hidden bg-[#1c1c1e] touch-none" onWheel={onWheel} onPointerDown={onBoardDown} onContextMenu={e=>e.preventDefault()} onDrop={onDrop} onDragOver={e=>{e.preventDefault();e.dataTransfer.dropEffect='copy'}} onClick={()=>setCtxMenu(null)}>
+          {showGrid&&<div className="absolute inset-0 pointer-events-none opacity-[0.06]" style={{backgroundImage:'radial-gradient(circle,#e5e5e7 1px,transparent 1px)',backgroundSize:`${24*vp.scale}px ${24*vp.scale}px`,backgroundPosition:`${vp.x%(24*vp.scale)}px ${vp.y%(24*vp.scale)}px`}}/>}
+          <div className="absolute left-0 top-0 will-change-transform" style={{transform:`translate(${vp.x}px,${vp.y}px) scale(${vp.scale})`,transformOrigin:'0 0',filter:globalDesat?'grayscale(1)':'none'}}>
+            {items.sort((a,b)=>(a.z||0)-(b.z||0)).map(item=><ItemNode key={item.id} item={item} selected={selection.includes(item.id)} onPointerDown={e=>{selectItem(item.id,e);startMove(item.id,e)}} onContextMenu={e=>{e.preventDefault();e.stopPropagation();setSelection([item.id]);setCtxMenu({x:e.clientX,y:e.clientY,itemId:item.id})}} onResizeStart={(h,e)=>startResize(item.id,h,e)} onRotateStart={e=>startRotate(item.id,e)} globalDesat={globalDesat}/>)}
+          </div>
+          {marqueeRect&&<div className="absolute border border-[#0A84FF]/60 bg-[#0A84FF]/10 pointer-events-none" style={marqueeRect}/>}
+          <div className="absolute bottom-3 right-3 z-10 flex items-center gap-1 bg-[#2a2a2e]/90 border border-[#3a3a3e] rounded-lg px-2 py-1 text-[10px] text-[#e5e5e7]">
+            <button onClick={()=>setVp(v=>({...v,scale:Math.max(0.04,v.scale/1.25)}))}><Minus className="w-3 h-3"/></button>
+            <span className="w-9 text-center">{Math.round(vp.scale*100)}%</span>
+            <button onClick={()=>setVp(v=>({...v,scale:Math.min(16,v.scale*1.25)}))}><Plus className="w-3 h-3"/></button>
+          </div>
+          {items.length===0&&<div className="absolute inset-0 flex flex-col items-center justify-center text-[#88888a] pointer-events-none gap-2"><ImageIcon className="w-12 h-12 opacity-15"/><p className="text-sm">Add references from Library (L) or drag images here</p><p className="text-[11px] opacity-60">Space+drag=pan · Scroll=zoom · Shift+drag=marquee · D=desat · T=pin</p></div>}
+        </div>
+        <AnimatePresence>{libOpen&&<motion.div initial={{width:0,opacity:0}} animate={{width:240,opacity:1}} exit={{width:0,opacity:0}} transition={{duration:0.2}} className="h-full bg-[#2a2a2e] border-l border-[#3a3a3e] flex flex-col overflow-hidden shrink-0">
+          <div className="h-10 border-b border-[#3a3a3e] flex items-center justify-between px-3 shrink-0"><span className="text-[12px] font-semibold text-[#e5e5e7]">Library</span><button onClick={()=>setLibOpen(false)} className="text-[#88888a]"><X className="w-3.5 h-3.5"/></button></div>
+          <div className="p-2 flex flex-col gap-2 flex-1 overflow-auto"><div className="relative"><Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-[#88888a]"/><input value={libQuery} onChange={e=>setLibQuery(e.target.value)} placeholder="Search..." className="w-full bg-[#1c1c1e] border border-[#3a3a3e] rounded py-1 pl-6 pr-2 text-[11px] text-[#e5e5e7] focus:outline-none focus:border-[#0a84ff]"/></div><div className="grid grid-cols-2 gap-1.5">{filtered.map(it=><div key={it.id} className="aspect-square rounded overflow-hidden border border-[#3a3a3e] bg-[#1c1c1e] relative group cursor-grab" draggable onDragStart={e=>{const p=JSON.stringify({id:it.id,data_url:it.data_url,width:it.width,height:it.height,source_url:it.source_url});e.dataTransfer.setData('application/x-muse-library-item',p);e.dataTransfer.setData('text/plain',p);e.dataTransfer.effectAllowed='copy'}}><img src={it.data_url} className="w-full h-full object-cover" draggable={false}/><button onClick={()=>addImage({id:it.id,data_url:it.data_url,width:it.width,height:it.height,source_url:it.source_url})} className="absolute bottom-0.5 right-0.5 opacity-0 group-hover:opacity-100 bg-[#0a84ff] text-white text-[8px] font-bold px-1.5 py-0.5 rounded">+</button></div>)}</div></div>
+        </motion.div>}</AnimatePresence>
+      </div>
+    </motion.div>
+  );
+}
+
+function ItemNode({item,selected,onPointerDown,onContextMenu,onResizeStart,onRotateStart,globalDesat}:{item:BoardItem;selected:boolean;onPointerDown:(e:React.PointerEvent)=>void;onContextMenu:(e:React.MouseEvent)=>void;onResizeStart:(h:string,e:React.PointerEvent)=>void;onRotateStart:(e:React.PointerEvent)=>void;globalDesat:boolean}){
+  const transform=`rotate(${item.rotation||0}deg)${item.flipped?' scaleX(-1)':''}${item.flipV?' scaleY(-1)':''}`;
+  const filter=(item.desaturated&&!globalDesat)?'grayscale(1)':'none';
+  return <div data-item onPointerDown={onPointerDown} onContextMenu={onContextMenu} className={cn('absolute group',selected&&'outline outline-2 outline-[#0a84ff] outline-offset-1')} style={{left:item.x,top:item.y,width:item.w,height:item.h,transform,transformOrigin:'center',zIndex:item.z||1,filter}}>
+    {item.kind==='image'&&item.data_url&&<><img src={item.data_url} className="w-full h-full object-cover pointer-events-none" draggable={false}/>{item.colors?.length>0&&<div className="absolute left-1 right-1 bottom-1 h-4 rounded overflow-hidden flex opacity-80">{item.colors.map(c=><div key={c} className="flex-1 cursor-pointer" style={{backgroundColor:c}} title={c} onClick={e=>{e.stopPropagation();navigator.clipboard.writeText(c)}}/>)}</div>}</>}
+    {item.kind==='note'&&<div className="w-full h-full bg-[#4A4B3A] text-[#F3ECD8] p-2 text-[11px] font-serif leading-relaxed overflow-hidden rounded-sm">{item.text||'Note'}</div>}
+    {item.kind==='palette'&&<div className="w-full h-full flex flex-col rounded-sm overflow-hidden"><div className="flex flex-1">{item.colors.map(c=><div key={c} className="flex-1 cursor-pointer" style={{backgroundColor:c}} title={c} onClick={e=>{e.stopPropagation();navigator.clipboard.writeText(c)}}/>)}</div><div className="h-4 bg-[#2a2a2e] flex items-center justify-center text-[7px] tracking-wider text-[#88888a] font-bold">PALETTE</div></div>}
+    {selected&&<><Handle pos="tl" cursor="nwse-resize" onDown={e=>onResizeStart('tl',e)}/><Handle pos="tr" cursor="nesw-resize" onDown={e=>onResizeStart('tr',e)}/><Handle pos="bl" cursor="nesw-resize" onDown={e=>onResizeStart('bl',e)}/><Handle pos="br" cursor="nwse-resize" onDown={e=>onResizeStart('br',e)}/><Handle pos="t" cursor="ns-resize" onDown={e=>onResizeStart('t',e)}/><Handle pos="b" cursor="ns-resize" onDown={e=>onResizeStart('b',e)}/><Handle pos="l" cursor="ew-resize" onDown={e=>onResizeStart('l',e)}/><Handle pos="r" cursor="ew-resize" onDown={e=>onResizeStart('r',e)}/><div onPointerDown={onRotateStart} className="absolute -top-6 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full bg-[#0a84ff] text-white flex items-center justify-center cursor-grab shadow"><RotateCw className="w-2 h-2"/></div></>}
+  </div>;
+}
+function Handle({pos,cursor,onDown}:{pos:string;cursor:string;onDown:(e:React.PointerEvent)=>void}){ const s:Record<string,React.CSSProperties>={tl:{top:-3,left:-3},tr:{top:-3,right:-3},bl:{bottom:-3,left:-3},br:{bottom:-3,right:-3},t:{top:-3,left:'50%',marginLeft:-3},b:{bottom:-3,left:'50%',marginLeft:-3},l:{left:-3,top:'50%',marginTop:-3},r:{right:-3,top:'50%',marginTop:-3}}; return <div onPointerDown={onDown} className="absolute w-[6px] h-[6px] bg-white border border-[#0a84ff] rounded-[1px] opacity-0 group-hover:opacity-100" style={{...s[pos],cursor}}/>; }
+function Btn({children,onClick,tip,active,disabled,danger}:{children:React.ReactNode;onClick:()=>void;tip?:string;active?:boolean;disabled?:boolean;danger?:boolean}){ return <button onClick={onClick} title={tip} disabled={disabled} className={cn('w-7 h-7 rounded flex items-center justify-center transition-colors disabled:opacity-30',active?'bg-[#0a84ff]/20 text-[#0a84ff]':danger?'text-red-400 hover:bg-red-400/10':'text-[#88888a] hover:text-[#e5e5e7] hover:bg-[#3a3a3e]')}>{children}</button>; }
+function Sep(){ return <div className="w-px h-4 bg-[#3a3a3e] mx-0.5"/>; }
+function CtxBtn({children,onClick,danger}:{children:React.ReactNode;onClick:()=>void;danger?:boolean}){ return <button onClick={onClick} className={cn('w-full flex items-center gap-2.5 px-3 py-1.5 text-[12px] transition-colors',danger?'text-red-400 hover:bg-red-400/10':'text-[#e5e5e7] hover:bg-[#3a3a3e]')}>{children}</button>; }