feat: implement Phase 5 - Advanced Color System

Complete color management system with picker, swatches, and eyedropper:

**Color Utilities (lib/color-utils.ts)**
- RGB ↔ Hex conversion
- RGB ↔ HSV conversion
- Color validation (isValidHex)
- getColorAtPoint for eyedropper
- Default 20-color palette
- Hex normalization

**Color Store (store/color-store.ts)**
- Primary/secondary color management
- Recent colors history (max 20)
- Custom swatches (max 20)
- Color swap functionality
- Zustand persist middleware (localStorage)

**Components**

ColorPicker:
- HSV color space selector
- Interactive saturation/value picker (200x160px)
- Hue slider (vertical gradient)
- Hex input with validation
- RGB value display
- Pointer drag support
- Real-time updates
- Color preview

ColorSwatches:
- Default 20-color palette grid (10x2)
- Custom swatches with add/remove
- Active color highlighting
- Hover scaling effect
- Delete button on hover
- Color tooltips

ColorPanel:
- Tabbed interface (Picker/Swatches/Recent)
- Primary/Secondary color display
- Color swap button
- Recent colors grid (max 20)
- Tab navigation (Palette/Clock icons)
- 256px wide panel
- Persistent state

**Eyedropper Tool**
- Pick color from active layer
- Click or drag to sample
- Updates primary color
- Integrates with ColorPanel
- Crosshair cursor

**Features**
✓ HSV color picker with gradient
✓ Hex color input validation
✓ RGB value display
✓ 20 default color swatches
✓ Unlimited custom swatches (max 20 stored)
✓ Recent colors auto-tracking
✓ Primary/secondary color swap
✓ Eyedropper tool to sample canvas
✓ Persistent color preferences
✓ Smooth drag interactions
✓ Real-time color updates

**Integration**
- EditorLayout: Added ColorPanel (256px)
- ToolPalette: Added Eyedropper icon
- CanvasWithTools: Eyedropper support
- Tool settings: Removed basic color picker
- Color syncs with tool store

**UI/UX**
- 3-tab navigation (Picker, Swatches, Recent)
- Primary color: Large square
- Secondary color: Small overlap square
- Active tab highlighting
- Hover effects on all swatches
- Smooth transitions
- Keyboard accessible

**Performance**
- Efficient HSV calculations
- LocalStorage persistence
- Pointer event optimization
- Drag state management
- Build time: ~1.3s

**State Management**
- Zustand store with persist
- Auto-add to recent on use
- Max limits prevent memory bloat
- Clean swap operation

Ready for Phase 6: File Operations

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

lib/color-utils.ts

@@ -0,0 +1,180 @@
+/**
+ * Color utility functions for conversions and manipulation
+ */
+
+export interface RGB {
+  r: number;
+  g: number;
+  b: number;
+}
+
+export interface HSV {
+  h: number;
+  s: number;
+  v: number;
+}
+
+/**
+ * Convert hex to RGB
+ */
+export function hexToRgb(hex: string): RGB {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : { r: 0, g: 0, b: 0 };
+}
+
+/**
+ * Convert RGB to hex
+ */
+export function rgbToHex(r: number, g: number, b: number): string {
+  return (
+    '#' +
+    [r, g, b]
+      .map((x) => {
+        const hex = Math.round(x).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+      })
+      .join('')
+  );
+}
+
+/**
+ * Convert RGB to HSV
+ */
+export function rgbToHsv(r: number, g: number, b: number): HSV {
+  r = r / 255;
+  g = g / 255;
+  b = b / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const diff = max - min;
+
+  let h = 0;
+  let s = max === 0 ? 0 : diff / max;
+  let v = max;
+
+  if (diff !== 0) {
+    switch (max) {
+      case r:
+        h = ((g - b) / diff + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / diff + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / diff + 4) / 6;
+        break;
+    }
+  }
+
+  return {
+    h: h * 360,
+    s: s * 100,
+    v: v * 100,
+  };
+}
+
+/**
+ * Convert HSV to RGB
+ */
+export function hsvToRgb(h: number, s: number, v: number): RGB {
+  h = h / 360;
+  s = s / 100;
+  v = v / 100;
+
+  let r = 0,
+    g = 0,
+    b = 0;
+
+  const i = Math.floor(h * 6);
+  const f = h * 6 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+
+  switch (i % 6) {
+    case 0:
+      (r = v), (g = t), (b = p);
+      break;
+    case 1:
+      (r = q), (g = v), (b = p);
+      break;
+    case 2:
+      (r = p), (g = v), (b = t);
+      break;
+    case 3:
+      (r = p), (g = q), (b = v);
+      break;
+    case 4:
+      (r = t), (g = p), (b = v);
+      break;
+    case 5:
+      (r = v), (g = p), (b = q);
+      break;
+  }
+
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255),
+  };
+}
+
+/**
+ * Get color from canvas at coordinates
+ */
+export function getColorAtPoint(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number
+): string {
+  const imageData = ctx.getImageData(x, y, 1, 1);
+  const data = imageData.data;
+  return rgbToHex(data[0], data[1], data[2]);
+}
+
+/**
+ * Validate hex color
+ */
+export function isValidHex(hex: string): boolean {
+  return /^#?[0-9A-F]{6}$/i.test(hex);
+}
+
+/**
+ * Ensure hex has # prefix
+ */
+export function normalizeHex(hex: string): string {
+  return hex.startsWith('#') ? hex : '#' + hex;
+}
+
+/**
+ * Default color palette
+ */
+export const DEFAULT_PALETTE = [
+  '#000000',
+  '#FFFFFF',
+  '#FF0000',
+  '#00FF00',
+  '#0000FF',
+  '#FFFF00',
+  '#FF00FF',
+  '#00FFFF',
+  '#FF8800',
+  '#8800FF',
+  '#00FF88',
+  '#FF0088',
+  '#808080',
+  '#C0C0C0',
+  '#800000',
+  '#008000',
+  '#000080',
+  '#808000',
+  '#800080',
+  '#008080',
+];