refactor: refactor color tool to match calculate blueprint

Rewrites all color components to use the glass panel design language,
fixed-height two-panel layout, and tab-based navigation.

- ColorManipulation: lg:grid-cols-5 split — left 2/5 shows ColorPicker
  + ColorInfo always; right 3/5 has Info/Adjust/Harmony/Gradient tabs;
  mobile 'Pick | Explore' switcher
- ColorPicker: removes shadcn Input/Label, native input with dynamic
  contrast color matching the picked hue
- ColorInfo: removes shadcn Button, native copy buttons on hover,
  metadata chips with bg-primary/5 background
- ManipulationPanel: keeps Slider, replaces Button with glass action
  buttons, tighter spacing and muted labels
- ExportMenu: keeps Select, replaces Buttons with glass action buttons,
  code preview in dark terminal box (#06060e)
- ColorSwatch: rectangular full-width design for palette grids,
  hover reveals copy icon, hex label at bottom
- PaletteGrid: denser grid (4→5 cols), smaller swatch height

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

components/color/ExportMenu.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@/components/ui/button';
+import { useState, useEffect } from 'react';
 import {
   Select,
   SelectContent,
@@ -8,7 +8,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { useState, useEffect } from 'react';
 import { Download, Copy, Check, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 import {
@@ -21,6 +20,7 @@ import {
   type ExportColor,
 } from '@/lib/color/utils/export';
 import { colorAPI } from '@/lib/color/api/client';
+import { cn } from '@/lib/utils/cn';
 
 interface ExportMenuProps {
   colors: string[];
@@ -30,6 +30,9 @@ interface ExportMenuProps {
 type ExportFormat = 'css' | 'scss' | 'tailwind' | 'json' | 'javascript';
 type ColorSpace = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklab' | 'lch' | 'oklch';
 
+const actionBtn =
+  'flex items-center gap-1.5 px-3 py-1.5 text-xs glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
+
 export function ExportMenu({ colors, className }: ExportMenuProps) {
   const [format, setFormat] = useState<ExportFormat>('css');
   const [colorSpace, setColorSpace] = useState<ColorSpace>('hex');
@@ -39,152 +42,105 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
 
   useEffect(() => {
     async function convertColors() {
-      if (colorSpace === 'hex') {
-        setConvertedColors(colors);
-        return;
-      }
-
+      if (colorSpace === 'hex') { setConvertedColors(colors); return; }
       setIsConverting(true);
       try {
-        const response = await colorAPI.convertFormat({
-          colors,
-          format: colorSpace,
-        });
-
+        const response = await colorAPI.convertFormat({ colors, format: colorSpace });
         if (response.success) {
-          setConvertedColors(response.data.conversions.map(c => c.output));
+          setConvertedColors(response.data.conversions.map((c) => c.output));
         }
-      } catch (error) {
-        console.error('Failed to convert colors:', error);
-        toast.error('Failed to convert colors to selected space');
+      } catch {
+        toast.error('Failed to convert colors');
       } finally {
         setIsConverting(false);
       }
     }
-
     convertColors();
   }, [colors, colorSpace]);
 
   const exportColors: ExportColor[] = convertedColors.map((value) => ({ value }));
 
-  const getExportContent = (): string => {
+  const getContent = (): string => {
     switch (format) {
-      case 'css':
-        return exportAsCSS(exportColors);
-      case 'scss':
-        return exportAsSCSS(exportColors);
-      case 'tailwind':
-        return exportAsTailwind(exportColors);
-      case 'json':
-        return exportAsJSON(exportColors);
-      case 'javascript':
-        return exportAsJavaScript(exportColors);
+      case 'css': return exportAsCSS(exportColors);
+      case 'scss': return exportAsSCSS(exportColors);
+      case 'tailwind': return exportAsTailwind(exportColors);
+      case 'json': return exportAsJSON(exportColors);
+      case 'javascript': return exportAsJavaScript(exportColors);
     }
   };
 
-  const getFileExtension = (): string => {
-    switch (format) {
-      case 'css':
-        return 'css';
-      case 'scss':
-        return 'scss';
-      case 'tailwind':
-        return 'js';
-      case 'json':
-        return 'json';
-      case 'javascript':
-        return 'js';
-    }
-  };
+  const getExt = () => ({ css: 'css', scss: 'scss', tailwind: 'js', json: 'json', javascript: 'js' }[format]);
 
   const handleCopy = () => {
-    const content = getExportContent();
-    navigator.clipboard.writeText(content);
+    navigator.clipboard.writeText(getContent());
     setCopied(true);
-    toast.success('Copied to clipboard!');
+    toast.success('Copied!');
     setTimeout(() => setCopied(false), 2000);
   };
 
   const handleDownload = () => {
-    const content = getExportContent();
-    const extension = getFileExtension();
-    downloadAsFile(content, `palette.${extension}`, 'text/plain');
+    downloadAsFile(getContent(), `palette.${getExt()}`, 'text/plain');
     toast.success('Downloaded!');
   };
 
-  if (colors.length === 0) {
-    return null;
-  }
+  if (colors.length === 0) return null;
 
   return (
-    <div className={className}>
-      <div className="space-y-3">
-        <div className="flex flex-col md:flex-row gap-3">
-          <Select
-            value={format}
-            onValueChange={(value) => setFormat(value as ExportFormat)}
-          >
-            <SelectTrigger className="w-full md:flex-1">
-              <SelectValue placeholder="Format" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="css">CSS Variables</SelectItem>
-              <SelectItem value="scss">SCSS Variables</SelectItem>
-              <SelectItem value="tailwind">Tailwind Config</SelectItem>
-              <SelectItem value="json">JSON</SelectItem>
-              <SelectItem value="javascript">JavaScript Array</SelectItem>
-            </SelectContent>
-          </Select>
+    <div className={cn('space-y-3', className)}>
+      <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Export</span>
 
-          <Select
-            value={colorSpace}
-            onValueChange={(value) => setColorSpace(value as ColorSpace)}
-          >
-            <SelectTrigger className="w-full md:flex-1">
-              <SelectValue placeholder="Space" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="hex">Hex</SelectItem>
-              <SelectItem value="rgb">RGB</SelectItem>
-              <SelectItem value="hsl">HSL</SelectItem>
-              <SelectItem value="lab">Lab</SelectItem>
-              <SelectItem value="oklab">OkLab</SelectItem>
-              <SelectItem value="lch">LCH</SelectItem>
-              <SelectItem value="oklch">OkLCH</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
+      {/* Selectors */}
+      <div className="flex gap-2">
+        <Select value={format} onValueChange={(v) => setFormat(v as ExportFormat)}>
+          <SelectTrigger className="flex-1 h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 transition-colors">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="css">CSS Vars</SelectItem>
+            <SelectItem value="scss">SCSS</SelectItem>
+            <SelectItem value="tailwind">Tailwind</SelectItem>
+            <SelectItem value="json">JSON</SelectItem>
+            <SelectItem value="javascript">JS Array</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select value={colorSpace} onValueChange={(v) => setColorSpace(v as ColorSpace)}>
+          <SelectTrigger className="flex-1 h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 transition-colors">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {['hex', 'rgb', 'hsl', 'lab', 'oklab', 'lch', 'oklch'].map((s) => (
+              <SelectItem key={s} value={s} className="font-mono text-xs">{s}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
 
-        <div className="p-3 bg-muted/50 rounded-lg relative min-h-[80px]">
-          {isConverting ? (
-            <div className="absolute inset-0 flex items-center justify-center bg-muted/50 backdrop-blur-sm rounded-lg z-10">
-              <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-            </div>
-          ) : null}
-          <pre className="text-[11px] overflow-x-auto leading-relaxed">
-            <code>{getExportContent()}</code>
-          </pre>
-        </div>
+      {/* Code preview */}
+      <div
+        className="relative rounded-xl overflow-hidden border border-white/5 min-h-[80px]"
+        style={{ background: '#06060e' }}
+      >
+        {isConverting && (
+          <div className="absolute inset-0 flex items-center justify-center z-10 bg-black/30">
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+          </div>
+        )}
+        <pre className="p-3 text-[10px] font-mono text-white/60 overflow-x-auto leading-relaxed">
+          <code>{getContent()}</code>
+        </pre>
+      </div>
 
-        <div className="flex flex-col md:flex-row gap-3">
-          <Button onClick={handleCopy} variant="outline" className="w-full md:flex-1" disabled={isConverting}>
-            {copied ? (
-              <>
-                <Check className="h-3.5 w-3.5 mr-1.5" />
-                Copied
-              </>
-            ) : (
-              <>
-                <Copy className="h-3.5 w-3.5 mr-1.5" />
-                Copy
-              </>
-            )}
-          </Button>
-          <Button onClick={handleDownload} variant="default" className="w-full md:flex-1" disabled={isConverting}>
-            <Download className="h-3.5 w-3.5 mr-1.5" />
-            Download
-          </Button>
-        </div>
+      {/* Actions */}
+      <div className="flex gap-2">
+        <button onClick={handleCopy} disabled={isConverting} className={cn(actionBtn, 'flex-1 justify-center')}>
+          {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+          {copied ? 'Copied' : 'Copy'}
+        </button>
+        <button onClick={handleDownload} disabled={isConverting} className={cn(actionBtn, 'flex-1 justify-center')}>
+          <Download className="w-3 h-3" />
+          Download
+        </button>
       </div>
     </div>
   );