feat(themes): add theme picker with swatch previews and per-theme fonts

PART 1: Add missing CSS variables to all ui objects
- Add --bg-inset, --bg-muted for component backgrounds
- Add --success, --warning as aliases for --status-success/warning
- Add --warning-muted for warning background states
- Each theme now has 32 CSS variables

PART 2: Per-theme font support
- Move --font-sans and --font-mono from :root to ui objects
- Add fontImports array to theme config (for future custom fonts)
- applyThemeUI() now manages <link> tags for font imports
- Existing themes use empty fontImports (system fonts already loaded)

PART 3: Swatch preview colors
- Add swatch array (3 hex colors) to each theme for visual preview
- light: warm tan, sage green, khaki
- dark: dark brown, sage green, tan
- clean: light gray, Google blue, Google green
- themeList() now returns swatch in result shape

PART 4: Theme picker UI
- New ThemePicker component replaces icon toggle in header
- Palette icon trigger opens popover below
- Shows all themes as circular swatches (conic gradient)
- Active theme has accent ring indicator
- Click swatch to apply theme, closes popover
- Click outside or Escape closes popover
- Styled with current theme CSS variables

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

src/components/Panel.jsx

@@ -1,6 +1,6 @@
 import { useRef, useCallback, useEffect, useState } from 'react'
-import { Sun, Moon, Sparkles, LogIn, LogOut } from 'lucide-react'
-import { themeList } from '../themes/registry'
+import { LogIn, LogOut } from 'lucide-react'
+import ThemePicker from './ThemePicker'
 import { useStore, usePanelState } from '../store'
 import { hasFeature } from '../config'
 import SearchBar from './SearchBar'
@@ -55,32 +55,6 @@ export default function Panel({ onManeuverClick }) {
     return () => window.removeEventListener('resize', check)
   }, [])
 
-  // Theme toggle - cycles through all available themes
-  const toggleTheme = () => {
-    const themes = themeList()
-    const currentIdx = themes.findIndex(t => t.id === theme)
-    const nextIdx = (currentIdx + 1) % themes.length
-    setThemeOverride(themes[nextIdx].id)
-  }
-
-  // Get theme icon based on current theme
-  const getThemeIcon = () => {
-    switch (theme) {
-      case 'dark': return <Moon size={16} />
-      case 'light': return <Sun size={16} />
-      case 'clean': return <Sparkles size={16} />
-      default: return <Sun size={16} />
-    }
-  }
-
-  // Get next theme name for tooltip
-  const getNextThemeName = () => {
-    const themes = themeList()
-    const currentIdx = themes.findIndex(t => t.id === theme)
-    const nextIdx = (currentIdx + 1) % themes.length
-    return themes[nextIdx].name
-  }
-
   // Auth handlers
   const handleLogin = () => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }
   const handleLogout = () => { window.location.href = 'https://auth.echo6.co/if/flow/default-invalidation-flow/?next=https://navi.echo6.co/' }
@@ -274,15 +248,7 @@ export default function Panel({ onManeuverClick }) {
             </button>
           )
         )}
-        <button
-          onClick={toggleTheme}
-          className="p-1.5 rounded"
-          style={{ color: 'var(--text-secondary)' }}
-          aria-label={`Switch to ${getNextThemeName()} theme`}
-          title={`Switch to ${getNextThemeName()} theme`}
-        >
-          {getThemeIcon()}
-        </button>
+        <ThemePicker />
       </div>
     </div>
   )

src/components/ThemePicker.jsx

@@ -0,0 +1,167 @@
+import { useState, useRef, useEffect } from 'react'
+import { Palette } from 'lucide-react'
+import { themeList } from '../themes/registry'
+import { useStore } from '../store'
+
+/**
+ * ThemeSwatch - Renders a circular swatch with 3 color segments
+ */
+function ThemeSwatch({ colors, size = 28, active = false }) {
+  // Split circle into 3 segments using conic gradient
+  const gradient = `conic-gradient(
+    ${colors[0]} 0deg 120deg,
+    ${colors[1]} 120deg 240deg,
+    ${colors[2]} 240deg 360deg
+  )`
+
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        background: gradient,
+        border: active ? '2px solid var(--accent)' : '2px solid var(--border)',
+        boxShadow: active ? '0 0 0 2px var(--accent-muted)' : 'none',
+        transition: 'border-color 0.15s, box-shadow 0.15s',
+      }}
+    />
+  )
+}
+
+/**
+ * ThemePicker - Popover component for selecting themes
+ */
+export default function ThemePicker() {
+  const [isOpen, setIsOpen] = useState(false)
+  const theme = useStore((s) => s.theme)
+  const setThemeOverride = useStore((s) => s.setThemeOverride)
+  const triggerRef = useRef(null)
+  const popoverRef = useRef(null)
+
+  const themes = themeList()
+  const currentTheme = themes.find(t => t.id === theme) || themes[0]
+
+  // Handle click outside to close
+  useEffect(() => {
+    if (!isOpen) return
+
+    function handleClickOutside(e) {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(e.target) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(e.target)
+      ) {
+        setIsOpen(false)
+      }
+    }
+
+    function handleEscape(e) {
+      if (e.key === 'Escape') {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleEscape)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [isOpen])
+
+  const handleThemeSelect = (themeId) => {
+    setThemeOverride(themeId)
+    setIsOpen(false)
+  }
+
+  return (
+    <div style={{ position: 'relative' }}>
+      {/* Trigger button */}
+      <button
+        ref={triggerRef}
+        onClick={() => setIsOpen(!isOpen)}
+        className="p-1.5 rounded flex items-center justify-center"
+        style={{ color: 'var(--text-secondary)' }}
+        aria-label="Select theme"
+        title="Select theme"
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <Palette size={16} />
+      </button>
+
+      {/* Popover */}
+      {isOpen && (
+        <div
+          ref={popoverRef}
+          style={{
+            position: 'absolute',
+            top: 'calc(100% + 8px)',
+            right: 0,
+            background: 'var(--bg-raised)',
+            border: '1px solid var(--border)',
+            borderRadius: '8px',
+            padding: '12px',
+            boxShadow: 'var(--shadow-lg)',
+            zIndex: 100,
+            minWidth: '140px',
+          }}
+          role="menu"
+          aria-orientation="horizontal"
+        >
+          <div
+            style={{
+              display: 'flex',
+              gap: '16px',
+              justifyContent: 'center',
+            }}
+          >
+            {themes.map((t) => (
+              <button
+                key={t.id}
+                onClick={() => handleThemeSelect(t.id)}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: '6px',
+                  background: 'transparent',
+                  border: 'none',
+                  padding: '4px',
+                  borderRadius: '6px',
+                  cursor: 'pointer',
+                  transition: 'background 0.1s',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = 'var(--bg-overlay)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = 'transparent'
+                }}
+                role="menuitem"
+                aria-current={t.id === theme ? 'true' : undefined}
+              >
+                <ThemeSwatch
+                  colors={t.swatch}
+                  size={32}
+                  active={t.id === theme}
+                />
+                <span
+                  style={{
+                    fontSize: 'var(--text-xs)',
+                    color: t.id === theme ? 'var(--accent)' : 'var(--text-secondary)',
+                    fontWeight: t.id === theme ? 500 : 400,
+                  }}
+                >
+                  {t.name}
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}