feat: implement UX enhancements for playground

Add comprehensive UX improvements to color playground:

**URL State Sharing:**
- Implement URL parameter sync for colors
- Add share button to copy playground URLs
- Wrap in Suspense boundary for Next.js 16 compatibility
- Colors persist in URL for easy sharing

**Keyboard Shortcuts:**
- Create reusable useKeyboard hook with modifier support
- Add Cmd/Ctrl+C to copy current color
- Add Cmd/Ctrl+S to share color URL
- Add Cmd/Ctrl+R for random color generation
- Display keyboard hints in playground header
- Cross-platform support (Mac/Windows/Linux)

**Color History:**
- Implement Zustand store with localStorage persistence
- Track up to 50 most recent colors with timestamps
- Auto-deduplicate and keep most recent entry
- Add visual history grid in playground
- Click to restore previous colors
- Individual color removal with hover UI
- Clear all history option

**Playground UI Enhancements:**
- Add visual keyboard shortcut indicators (⌘C, ⌘S, ⌘R)
- Implement Recent Colors section with 5-column grid
- Add hover effects for history color swatches
- Individual remove buttons on hover
- Toast notifications for all actions
- Improved button layout and spacing

**Files Added:**
- lib/hooks/useKeyboard.ts - Keyboard shortcut management
- lib/stores/historyStore.ts - Color history with persistence

**Files Modified:**
- app/playground/page.tsx - Integrated all UX features

Successfully builds with all features working.
Ready for user testing.

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

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

app/playground/page.tsx

@@ -1,15 +1,26 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect, Suspense } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
 import { ColorPicker } from '@/components/color/ColorPicker';
 import { ColorDisplay } from '@/components/color/ColorDisplay';
 import { ColorInfo } from '@/components/color/ColorInfo';
 import { ManipulationPanel } from '@/components/tools/ManipulationPanel';
 import { useColorInfo } from '@/lib/api/queries';
-import { Loader2 } from 'lucide-react';
+import { useKeyboard } from '@/lib/hooks/useKeyboard';
+import { useColorHistory } from '@/lib/stores/historyStore';
+import { Loader2, Share2, History, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
 
-export default function PlaygroundPage() {
+function PlaygroundContent() {
-  const [color, setColor] = useState('#ff0099');
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const [color, setColor] = useState(() => {
+    // Initialize from URL if available
+    const urlColor = searchParams.get('color');
+    return urlColor ? `#${urlColor.replace('#', '')}` : '#ff0099';
+  });
 
   const { data, isLoading, isError, error } = useColorInfo({
     colors: [color],
@@ -17,6 +28,58 @@ export default function PlaygroundPage() {
 
   const colorInfo = data?.colors[0];
 
+  // Color history
+  const { history, addColor, removeColor, clearHistory, getRecent } = useColorHistory();
+  const recentColors = getRecent(10);
+
+  // Update URL and history when color changes
+  useEffect(() => {
+    const hex = color.replace('#', '');
+    router.push(`/playground?color=${hex}`, { scroll: false });
+    addColor(color);
+  }, [color, router, addColor]);
+
+  // Share color via URL
+  const handleShare = () => {
+    const url = `${window.location.origin}/playground?color=${color.replace('#', '')}`;
+    navigator.clipboard.writeText(url);
+    toast.success('Link copied to clipboard!');
+  };
+
+  // Copy color to clipboard
+  const handleCopyColor = () => {
+    navigator.clipboard.writeText(color);
+    toast.success('Color copied to clipboard!');
+  };
+
+  // Random color generation
+  const handleRandomColor = () => {
+    const randomHex = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
+    setColor(randomHex);
+  };
+
+  // Keyboard shortcuts
+  useKeyboard([
+    {
+      key: 'c',
+      meta: true,
+      handler: handleCopyColor,
+      description: 'Copy color',
+    },
+    {
+      key: 's',
+      meta: true,
+      handler: handleShare,
+      description: 'Share color',
+    },
+    {
+      key: 'r',
+      meta: true,
+      handler: handleRandomColor,
+      description: 'Random color',
+    },
+  ]);
+
   return (
     <div className="min-h-screen p-8">
       <div className="max-w-7xl mx-auto space-y-8">
@@ -25,6 +88,14 @@ export default function PlaygroundPage() {
           <p className="text-muted-foreground">
             Interactive color manipulation and analysis tool
           </p>
+          <div className="mt-3 flex flex-wrap gap-2 text-xs text-muted-foreground">
+            <kbd className="px-2 py-1 bg-muted rounded border">⌘C</kbd>
+            <span>Copy</span>
+            <kbd className="px-2 py-1 bg-muted rounded border ml-3">⌘S</kbd>
+            <span>Share</span>
+            <kbd className="px-2 py-1 bg-muted rounded border ml-3">⌘R</kbd>
+            <span>Random</span>
+          </div>
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
@@ -36,11 +107,60 @@ export default function PlaygroundPage() {
             </div>
 
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Preview</h2>
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-xl font-semibold">Preview</h2>
+                <Button onClick={handleShare} variant="outline" size="sm">
+                  <Share2 className="h-4 w-4 mr-2" />
+                  Share
+                </Button>
+              </div>
               <div className="flex justify-center">
                 <ColorDisplay color={color} size="xl" />
               </div>
             </div>
+
+            {recentColors.length > 0 && (
+              <div className="p-6 border rounded-lg bg-card">
+                <div className="flex items-center justify-between mb-4">
+                  <div className="flex items-center gap-2">
+                    <History className="h-5 w-5" />
+                    <h2 className="text-xl font-semibold">Recent Colors</h2>
+                  </div>
+                  <Button
+                    onClick={clearHistory}
+                    variant="ghost"
+                    size="sm"
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    Clear
+                  </Button>
+                </div>
+                <div className="grid grid-cols-5 gap-2">
+                  {recentColors.map((entry) => (
+                    <button
+                      key={entry.timestamp}
+                      className="group relative aspect-square rounded-lg border-2 border-border hover:border-primary transition-all hover:scale-110 focus:outline-none focus:ring-2 focus:ring-ring"
+                      style={{ backgroundColor: entry.color }}
+                      onClick={() => setColor(entry.color)}
+                      title={entry.color}
+                    >
+                      <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30 rounded-lg">
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            removeColor(entry.color);
+                            toast.success('Color removed from history');
+                          }}
+                          className="p-1 bg-destructive rounded-full hover:bg-destructive/80"
+                        >
+                          <X className="h-3 w-3 text-destructive-foreground" />
+                        </button>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
           </div>
 
           {/* Right Column: Color Information */}
@@ -74,3 +194,17 @@ export default function PlaygroundPage() {
     </div>
   );
 }
+
+export default function PlaygroundPage() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen p-8">
+        <div className="max-w-7xl mx-auto flex items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      </div>
+    }>
+      <PlaygroundContent />
+    </Suspense>
+  );
+}

lib/hooks/useKeyboard.ts

@@ -0,0 +1,91 @@
+import { useEffect } from 'react';
+
+export interface KeyboardShortcut {
+  key: string;
+  ctrl?: boolean;
+  shift?: boolean;
+  alt?: boolean;
+  meta?: boolean;
+  handler: (event: KeyboardEvent) => void;
+  description?: string;
+}
+
+/**
+ * Hook to register keyboard shortcuts
+ *
+ * @example
+ * ```tsx
+ * useKeyboard([
+ *   {
+ *     key: 'c',
+ *     meta: true, // Cmd on Mac, Ctrl on Windows
+ *     handler: () => copyToClipboard(),
+ *     description: 'Copy color',
+ *   },
+ *   {
+ *     key: 'k',
+ *     meta: true,
+ *     handler: () => openCommandPalette(),
+ *     description: 'Open command palette',
+ *   },
+ * ]);
+ * ```
+ */
+export function useKeyboard(shortcuts: KeyboardShortcut[]) {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      for (const shortcut of shortcuts) {
+        const keyMatches = event.key.toLowerCase() === shortcut.key.toLowerCase();
+        const ctrlMatches = shortcut.ctrl ? event.ctrlKey : !event.ctrlKey;
+        const shiftMatches = shortcut.shift ? event.shiftKey : !event.shiftKey;
+        const altMatches = shortcut.alt ? event.altKey : !event.altKey;
+        const metaMatches = shortcut.meta ? event.metaKey : !event.metaKey;
+
+        // On Windows/Linux, treat meta as ctrl for convenience
+        const modifierMatches = shortcut.meta
+          ? event.metaKey || (event.ctrlKey && !navigator.platform.includes('Mac'))
+          : metaMatches;
+
+        if (
+          keyMatches &&
+          ctrlMatches &&
+          shiftMatches &&
+          altMatches &&
+          modifierMatches
+        ) {
+          event.preventDefault();
+          shortcut.handler(event);
+          break;
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [shortcuts]);
+}
+
+/**
+ * Hook to register a single keyboard shortcut (convenience wrapper)
+ */
+export function useKeyboardShortcut(
+  key: string,
+  handler: (event: KeyboardEvent) => void,
+  modifiers?: {
+    ctrl?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    meta?: boolean;
+  }
+) {
+  useKeyboard([
+    {
+      key,
+      ...modifiers,
+      handler,
+    },
+  ]);
+}

lib/stores/historyStore.ts

@@ -0,0 +1,68 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+export interface ColorHistoryEntry {
+  color: string;
+  timestamp: number;
+}
+
+interface ColorHistoryState {
+  history: ColorHistoryEntry[];
+  addColor: (color: string) => void;
+  removeColor: (color: string) => void;
+  clearHistory: () => void;
+  getRecent: (limit?: number) => ColorHistoryEntry[];
+}
+
+/**
+ * Color history store with localStorage persistence
+ *
+ * Tracks up to 50 most recent colors with timestamps
+ * Automatically removes duplicates (keeps most recent)
+ * Persists across browser sessions
+ */
+export const useColorHistory = create<ColorHistoryState>()(
+  persist(
+    (set, get) => ({
+      history: [],
+
+      addColor: (color) => {
+        const normalizedColor = color.toLowerCase();
+        set((state) => {
+          // Remove existing entry if present
+          const filtered = state.history.filter(
+            (entry) => entry.color.toLowerCase() !== normalizedColor
+          );
+
+          // Add new entry at the beginning
+          const newHistory = [
+            { color: normalizedColor, timestamp: Date.now() },
+            ...filtered,
+          ].slice(0, 50); // Keep only 50 most recent
+
+          return { history: newHistory };
+        });
+      },
+
+      removeColor: (color) => {
+        const normalizedColor = color.toLowerCase();
+        set((state) => ({
+          history: state.history.filter(
+            (entry) => entry.color.toLowerCase() !== normalizedColor
+          ),
+        }));
+      },
+
+      clearHistory: () => set({ history: [] }),
+
+      getRecent: (limit = 10) => {
+        const { history } = get();
+        return history.slice(0, limit);
+      },
+    }),
+    {
+      name: 'pastel-color-history',
+      storage: createJSONStorage(() => localStorage),
+    }
+  )
+);