2 Commits

Author	SHA1	Message	Date
valknarness	c3745bd6b7	feat: implement palette generation features ... Add complete palette generation system with multiple methods: **New Components:** - ColorSwatch component - Individual color display - Click to copy to clipboard - Hover effects with copy icon - Configurable sizes (sm, md, lg) - Optional color label display - Check icon on successful copy - PaletteGrid component - Grid display for color palettes - Responsive grid layout (3-6 columns) - Click handler for color selection - Empty state message - Flexible and reusable - Select component - Dropdown selector - Consistent styling with other inputs - Optional label support - Keyboard accessible - Focus ring styling **Palette Pages:** 1. Gradient Creator (/palettes/gradient) - Multiple color stop editor (add/remove) - Configurable step count (2-1000) - Color space selection (RGB, HSL, Lab, LCH, OkLab, OkLCH) - Live gradient preview bar - Full palette grid display - Interactive color pickers for each stop - Real-time generation 2. Distinct Colors (/palettes/distinct) - Count selector (2-100 colors) - Distance metric selection (CIE76, CIEDE2000) - Simulated annealing algorithm - Statistics display: - Minimum distance - Average distance - Generation time - Loading state with progress message - Quality metrics for generated palette 3. Palettes Dashboard (/palettes) - Overview of all palette generators - Feature cards with icons - "Coming Soon" badge for harmony palettes - Quick navigation to each generator - Feature highlights for each method **Features:** - All palette generators integrated with Pastel API - Toast notifications for success/error - Loading states during generation - Copy colors to clipboard - Responsive layouts - Empty states - Error handling **API Integration:** - useGenerateGradient mutation - useGenerateDistinct mutation - Proper error handling and loading states - Result caching with React Query Build successful! 3 new palette pages rendering. Next: Harmony palettes, accessibility tools, and named colors. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-07 11:38:20 +01:00
valknarness	173d81d9d4	feat: implement color playground with interactive picker and info display ... Add complete color manipulation interface: **Color Components:** - ColorPicker - Interactive hex color picker with text input - Uses react-colorful for visual selection - Manual input support for any color format - Real-time updates - ColorDisplay - Large color preview swatch - Configurable sizes (sm, md, lg, xl) - Optional border styling - Accessible with ARIA labels - ColorInfo - Comprehensive color information display - Shows all formats: Hex, RGB, HSL, Lab, OkLab - Copy to clipboard functionality for each format - Displays brightness, luminance, light/dark type - Shows named color matches **API Integration:** - React Query hooks for all Pastel API endpoints - useColorInfo - Get color information - useConvertFormat - Format conversion - useLighten, useDarken, useSaturate, etc. - Manipulations - useGenerateRandom, useGenerateDistinct, useGenerateGradient - useNamedColors - Cached named colors list - Automatic error handling and loading states **Playground Page (/playground):** - Two-column layout: picker + info - Live color preview with large swatch - Real-time API integration with loading states - Error handling with user-friendly messages - Quick action buttons (ready for implementation) - Responsive grid layout **Features:** - Toast notifications for clipboard copy - Loading spinners during API calls - Error display with helpful messages - Accessible keyboard navigation - Smooth transitions and animations Build successful with playground page rendering! Ready for color manipulation actions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-07 11:05:23 +01:00