fix: resolve hydration errors in playground

- Fix nested button error in color history by using div with role=button
- Add keyboard accessibility (Enter/Space) to color history swatches
- Add type guard for ColorInfo.name to handle object values
- Add aria-label to remove button for better accessibility

Fixes React hydration errors and improves accessibility.

app/playground/page.tsx

@@ -137,12 +137,19 @@ function PlaygroundContent() {
                 </div>
                 <div className="grid grid-cols-5 gap-2">
                   {recentColors.map((entry) => (
-                    <button
+                    <div
                       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"
+                      className="group relative aspect-square rounded-lg border-2 border-border hover:border-primary transition-all hover:scale-110 cursor-pointer"
                       style={{ backgroundColor: entry.color }}
                       onClick={() => setColor(entry.color)}
                       title={entry.color}
+                      role="button"
+                      tabIndex={0}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          setColor(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
@@ -152,11 +159,12 @@ function PlaygroundContent() {
                             toast.success('Color removed from history');
                           }}
                           className="p-1 bg-destructive rounded-full hover:bg-destructive/80"
+                          aria-label="Remove color"
                         >
                           <X className="h-3 w-3 text-destructive-foreground" />
                         </button>
                       </div>
-                    </button>
+                    </div>
                   ))}
                 </div>
               </div>

components/color/ColorInfo.tsx

@@ -80,7 +80,7 @@ export function ColorInfo({ info, className }: ColorInfoProps) {
           <div className="text-xs text-muted-foreground">Type</div>
           <div className="text-sm font-medium">{info.is_light ? 'Light' : 'Dark'}</div>
         </div>
-        {info.name && (
+        {info.name && typeof info.name === 'string' && (
           <div className="space-y-1">
             <div className="text-xs text-muted-foreground">Named</div>
             <div className="text-sm font-medium">{info.name}</div>