feat: Phase 4 - Color Tools view with palette export (HEX, CSS, GPL, ASE, Procreate formats)

src/components/views/ColorToolsView.tsx

@@ -0,0 +1,103 @@
+import { motion } from 'motion/react';
+import { Palette, Copy, Download, Plus, X, Pipette } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { cn, defaultTransition } from '../../lib/utils';
+
+interface ColorExportResult { format: string; content: string; filename: string; }
+interface LibItem { id: string; data_url: string; title: string; colors: string[]; }
+
+export default function ColorToolsView() {
+  const [colors, setColors] = useState<string[]>(['#D4A373', '#2C2926', '#6C89E8', '#C4655B', '#4A4B3A', '#E8E3DF']);
+  const [libItems, setLibItems] = useState<LibItem[]>([]);
+  const [exportFormat, setExportFormat] = useState('hex');
+  const [exportResult, setExportResult] = useState<string>('');
+  const [newColor, setNewColor] = useState('#D4A373');
+
+  useEffect(() => { invoke<LibItem[]>('library_items').then(items => { setLibItems(items.filter(i => i.colors?.length > 0)); }).catch(() => {}); }, []);
+
+  const doExport = (fmt: string) => {
+    setExportFormat(fmt);
+    invoke<ColorExportResult>('color_export', { colors, format: fmt }).then(r => setExportResult(r.content)).catch(console.error);
+  };
+
+  useEffect(() => { doExport(exportFormat); }, [colors]);
+
+  const addColor = () => { if (colors.length < 12) setColors([...colors, newColor]); };
+  const removeColor = (idx: number) => setColors(colors.filter((_, i) => i !== idx));
+  const loadFromLibrary = (item: LibItem) => { if (item.colors.length) setColors(item.colors.slice(0, 12)); };
+  const copyAll = () => navigator.clipboard.writeText(exportResult);
+
+  const formats = [
+    { id: 'hex', label: 'HEX' },
+    { id: 'css', label: 'CSS Variables' },
+    { id: 'gpl', label: 'GIMP Palette' },
+    { id: 'ase', label: 'Adobe ASE' },
+    { id: 'procreate', label: 'Procreate' },
+  ];
+
+  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 overflow-hidden">
+      {/* Main */}
+      <div className="flex-1 p-8 overflow-auto flex flex-col gap-8 max-w-3xl mx-auto">
+        <div>
+          <h1 className="text-3xl font-medium text-dusk-text mb-2">Color Tools</h1>
+          <p className="text-sm text-dusk-text-muted">Build and export palettes for your art tools.</p>
+        </div>
+
+        {/* Active Palette */}
+        <div>
+          <h3 className="text-[11px] font-bold text-dusk-text-muted uppercase tracking-wider mb-3">Active Palette</h3>
+          <div className="flex items-center gap-2 flex-wrap">
+            {colors.map((c, i) => (
+              <div key={i} className="relative group">
+                <div className="w-14 h-14 rounded-xl shadow-md cursor-pointer hover:scale-110 transition-transform border border-black/20" style={{ backgroundColor: c }} title={c} onClick={() => navigator.clipboard.writeText(c)} />
+                <button onClick={() => removeColor(i)} className="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-red-500 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"><X className="w-2.5 h-2.5" /></button>
+                <span className="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] text-dusk-text-muted font-mono">{c}</span>
+              </div>
+            ))}
+            {colors.length < 12 && (
+              <div className="flex items-center gap-2 ml-2">
+                <input type="color" value={newColor} onChange={e => setNewColor(e.target.value)} className="w-10 h-10 rounded-lg cursor-pointer border-0" />
+                <button onClick={addColor} className="w-10 h-10 rounded-xl border border-dashed border-dusk-border hover:border-dusk-accent flex items-center justify-center text-dusk-text-muted hover:text-dusk-accent"><Plus className="w-4 h-4" /></button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Export Format Selection */}
+        <div>
+          <h3 className="text-[11px] font-bold text-dusk-text-muted uppercase tracking-wider mb-3">Export Format</h3>
+          <div className="flex gap-2 flex-wrap">
+            {formats.map(f => (
+              <button key={f.id} onClick={() => doExport(f.id)} className={cn('px-4 py-2 rounded-xl text-sm font-medium border transition-colors', exportFormat === f.id ? 'bg-dusk-accent/20 text-dusk-accent border-dusk-accent/30' : 'bg-dusk-surface text-dusk-text-muted border-dusk-border hover:border-dusk-accent/30')}>{f.label}</button>
+            ))}
+          </div>
+        </div>
+
+        {/* Export Preview */}
+        <div>
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="text-[11px] font-bold text-dusk-text-muted uppercase tracking-wider">Export Preview</h3>
+            <button onClick={copyAll} className="flex items-center gap-1.5 text-[12px] text-dusk-accent hover:text-dusk-accent/80 font-medium"><Copy className="w-3.5 h-3.5" /> Copy</button>
+          </div>
+          <pre className="bg-dusk-surface border border-dusk-border rounded-xl p-4 text-[12px] font-mono text-dusk-text overflow-auto max-h-64 whitespace-pre-wrap">{exportResult || 'Select colors and format'}</pre>
+        </div>
+      </div>
+
+      {/* Library Colors Sidebar */}
+      <div className="w-64 border-l border-dusk-border bg-dusk-surface flex flex-col shrink-0">
+        <div className="h-12 border-b border-dusk-border flex items-center px-4"><span className="text-[13px] font-semibold text-dusk-text">From Library</span></div>
+        <div className="flex-1 overflow-auto p-3 flex flex-col gap-2">
+          {libItems.length === 0 && <p className="text-xs text-dusk-text-muted text-center py-8">No items with extracted colors</p>}
+          {libItems.map(it => (
+            <button key={it.id} onClick={() => loadFromLibrary(it)} className="p-2 rounded-xl bg-dusk-bg border border-dusk-border/50 hover:border-dusk-accent/30 transition-colors text-left">
+              <div className="flex h-6 rounded overflow-hidden mb-2">{it.colors.slice(0, 6).map((c, i) => <div key={i} className="flex-1" style={{ backgroundColor: c }} />)}</div>
+              <span className="text-[11px] text-dusk-text-muted truncate block">{it.title}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </motion.div>
+  );
+}