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>
This commit is contained in:
100
components/colors/color-swatches.tsx
Normal file
100
components/colors/color-swatches.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
'use client';
|
||||
|
||||
import { Plus, X } from 'lucide-react';
|
||||
import { DEFAULT_PALETTE } from '@/lib/color-utils';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ColorSwatchesProps {
|
||||
onColorSelect: (color: string) => void;
|
||||
currentColor: string;
|
||||
customSwatches?: string[];
|
||||
onAddSwatch?: (color: string) => void;
|
||||
onRemoveSwatch?: (color: string) => void;
|
||||
}
|
||||
|
||||
export function ColorSwatches({
|
||||
onColorSelect,
|
||||
currentColor,
|
||||
customSwatches = [],
|
||||
onAddSwatch,
|
||||
onRemoveSwatch,
|
||||
}: ColorSwatchesProps) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Default palette */}
|
||||
<div>
|
||||
<h3 className="text-xs font-medium text-muted-foreground mb-2">Default Colors</h3>
|
||||
<div className="grid grid-cols-10 gap-1">
|
||||
{DEFAULT_PALETTE.map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
onClick={() => onColorSelect(color)}
|
||||
className={cn(
|
||||
'w-6 h-6 rounded border-2 transition-all hover:scale-110',
|
||||
currentColor.toUpperCase() === color.toUpperCase()
|
||||
? 'border-primary ring-2 ring-primary/50'
|
||||
: 'border-border hover:border-primary/50'
|
||||
)}
|
||||
style={{ backgroundColor: color }}
|
||||
title={color}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Custom swatches */}
|
||||
{(customSwatches.length > 0 || onAddSwatch) && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-xs font-medium text-muted-foreground">Custom</h3>
|
||||
{onAddSwatch && (
|
||||
<button
|
||||
onClick={() => onAddSwatch(currentColor)}
|
||||
className="p-1 hover:bg-accent rounded transition-colors"
|
||||
title="Add current color"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{customSwatches.length > 0 ? (
|
||||
<div className="grid grid-cols-10 gap-1">
|
||||
{customSwatches.map((color) => (
|
||||
<div key={color} className="relative group">
|
||||
<button
|
||||
onClick={() => onColorSelect(color)}
|
||||
className={cn(
|
||||
'w-6 h-6 rounded border-2 transition-all hover:scale-110',
|
||||
currentColor.toUpperCase() === color.toUpperCase()
|
||||
? 'border-primary ring-2 ring-primary/50'
|
||||
: 'border-border hover:border-primary/50'
|
||||
)}
|
||||
style={{ backgroundColor: color }}
|
||||
title={color}
|
||||
/>
|
||||
{onRemoveSwatch && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onRemoveSwatch(color);
|
||||
}}
|
||||
className="absolute -top-1 -right-1 w-4 h-4 bg-destructive text-destructive-foreground rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
|
||||
title="Remove"
|
||||
>
|
||||
<X className="h-2.5 w-2.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground italic">
|
||||
No custom swatches yet
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user