@toolr/ui-design 0.1.5 → 0.1.7

package/components/sections/snippets-editor/snippets-editor.tsx

@@ -22,8 +22,9 @@
  * - Dark theme styling matches configr's Catppuccin-inspired palette
  */
 
-import { useCallback, useRef, useState } from 'react'
+import { useResizableSidebar } from '../../hooks/use-resizable-sidebar.ts'
 import { Plus, X, Braces, Trash2, RotateCcw, Save } from 'lucide-react'
+import { ACCENT_TEXT, type AccentColor } from '../../lib/form-colors.ts'
 import { cn } from '../../lib/cn.ts'
 import { Input } from '../../ui/input.tsx'
 import { ResizableTextarea } from '../../ui/resizable-textarea.tsx'
@@ -39,11 +40,49 @@ export interface SnippetsEditorProps {
   /** Section description, e.g. "Define snippets to reuse in skills prompts..." */
   description?: string
   className?: string
+  accentColor?: string
+}
+
+const ACCENT_DIVIDER_HOVER: Record<string, string> = {
+  blue: 'hover:bg-blue-500/30',
+  purple: 'hover:bg-purple-500/30',
+  orange: 'hover:bg-orange-500/30',
+  green: 'hover:bg-green-500/30',
+  pink: 'hover:bg-pink-500/30',
+  amber: 'hover:bg-amber-500/30',
+  emerald: 'hover:bg-emerald-500/30',
+  teal: 'hover:bg-teal-500/30',
+  sky: 'hover:bg-sky-500/30',
+  violet: 'hover:bg-violet-500/30',
+}
+
+
+const ACCENT_BORDER: Record<string, string> = {
+  blue: 'border-l-blue-400',
+  purple: 'border-l-purple-400',
+  orange: 'border-l-orange-400',
+  green: 'border-l-green-400',
+  pink: 'border-l-pink-400',
+  amber: 'border-l-amber-400',
+  emerald: 'border-l-emerald-400',
+  teal: 'border-l-teal-400',
+  sky: 'border-l-sky-400',
+  violet: 'border-l-violet-400',
+}
+
+const ACCENT_BUTTON: Record<string, string> = {
+  blue: 'bg-blue-600 hover:bg-blue-500',
+  purple: 'bg-purple-600 hover:bg-purple-500',
+  orange: 'bg-orange-600 hover:bg-orange-500',
+  green: 'bg-green-600 hover:bg-green-500',
+  pink: 'bg-pink-600 hover:bg-pink-500',
+  amber: 'bg-amber-600 hover:bg-amber-500',
+  emerald: 'bg-emerald-600 hover:bg-emerald-500',
+  teal: 'bg-teal-600 hover:bg-teal-500',
+  sky: 'bg-sky-600 hover:bg-sky-500',
+  violet: 'bg-violet-600 hover:bg-violet-500',
 }
 
-const MIN_SIDEBAR = 200
-const MAX_SIDEBAR = 350
-const DEFAULT_SIDEBAR = 260
 
 export function SnippetsEditor({
   api,
@@ -51,6 +90,7 @@ export function SnippetsEditor({
   title = 'Snippets',
   description = 'Define reusable snippets for prompts using {{SNIPPET_NAME}} syntax.',
   className,
+  accentColor = 'blue',
 }: SnippetsEditorProps) {
   const {
     selectedName,
@@ -71,26 +111,7 @@ export function SnippetsEditor({
     isSaving,
   } = useSnippetsEditor({ api, snippets })
 
-  // Resizable sidebar
-  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR)
-  const dragRef = useRef<{ startX: number; startW: number } | null>(null)
-
-  const onDividerMouseDown = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    dragRef.current = { startX: e.clientX, startW: sidebarWidth }
-    const onMove = (ev: MouseEvent) => {
-      if (!dragRef.current) return
-      const newW = Math.min(MAX_SIDEBAR, Math.max(MIN_SIDEBAR, dragRef.current.startW + ev.clientX - dragRef.current.startX))
-      setSidebarWidth(newW)
-    }
-    const onUp = () => {
-      dragRef.current = null
-      document.removeEventListener('mousemove', onMove)
-      document.removeEventListener('mouseup', onUp)
-    }
-    document.addEventListener('mousemove', onMove)
-    document.addEventListener('mouseup', onUp)
-  }, [sidebarWidth])
+  const { width: sidebarWidth, onPointerDown: onDividerPointerDown } = useResizableSidebar({ min: 200, max: 350, defaultWidth: 260, direction: 'right' })
 
   const hasSelection = isEditing || isAdding
   const nameHasError = formError !== null && (
@@ -103,18 +124,18 @@ export function SnippetsEditor({
       <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-700 bg-purple-500/5">
         <div className="flex items-center gap-2">
           <Braces className="w-4 h-4 text-purple-400" />
-          <h3 className="text-sm font-medium text-neutral-300">{title}</h3>
-          <span className="px-2 py-0.5 text-xs rounded-full bg-neutral-700 text-neutral-400">
+          <h3 className="text-md font-medium text-neutral-300">{title}</h3>
+          <span className="px-2 py-0.5 text-sm rounded-full bg-neutral-700 text-neutral-400">
             {snippets.length}
           </span>
         </div>
-        <p className="text-xs text-neutral-500 hidden sm:block">{description}</p>
+        <p className="text-sm text-neutral-500 hidden sm:block">{description}</p>
       </div>
 
       {/* Body: two columns */}
       <div className="flex flex-1 min-h-[400px]">
         {/* Left: Snippet list */}
-        <div className="flex flex-col border-r border-neutral-700" style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR }}>
+        <div className="flex flex-col border-r border-neutral-700" style={{ width: sidebarWidth, minWidth: 200 }}>
           {/* Search + Add */}
           <div className="flex items-center gap-1.5 p-2 border-b border-neutral-700">
             <div className="flex-1">
@@ -141,10 +162,10 @@ export function SnippetsEditor({
             {filteredSnippets.length === 0 && !isAdding && (
               <div className="text-center py-10 px-4">
                 <Braces className="w-8 h-8 mx-auto text-purple-400/40 mb-3" />
-                <p className="text-xs text-neutral-500 mb-1">
+                <p className="text-sm text-neutral-500 mb-1">
                   {searchQuery ? 'No matching snippets' : 'No snippets defined'}
                 </p>
-                <p className="text-xss text-neutral-600">
+                <p className="text-xs text-neutral-600">
                   {searchQuery ? 'Try a different search term' : 'Click + to add your first snippet'}
                 </p>
               </div>
@@ -156,6 +177,7 @@ export function SnippetsEditor({
                 selected={selectedName === snippet.name}
                 onSelect={() => selectSnippet(snippet.name)}
                 onDelete={() => remove(snippet.name)}
+                accentColor={accentColor}
               />
             ))}
           </div>
@@ -163,8 +185,8 @@ export function SnippetsEditor({
 
         {/* Resizable divider */}
         <div
-          className="w-1 cursor-col-resize bg-transparent hover:bg-blue-500/30 transition-colors flex-shrink-0"
-          onMouseDown={onDividerMouseDown}
+          className={`w-1 cursor-col-resize bg-transparent ${ACCENT_DIVIDER_HOVER[accentColor] ?? ACCENT_DIVIDER_HOVER.blue} transition-colors flex-shrink-0`}
+          onPointerDown={onDividerPointerDown}
         />
 
         {/* Right: Editor */}
@@ -181,15 +203,16 @@ export function SnippetsEditor({
               onReset={resetForm}
               onDelete={isEditing && selectedName ? () => remove(selectedName) : undefined}
               onCancel={isAdding ? cancelForm : undefined}
+              accentColor={accentColor}
             />
           ) : (
             <div className="flex-1 flex items-center justify-center p-6">
               <div className="text-center max-w-xs">
                 <Braces className="w-10 h-10 mx-auto text-purple-400/30 mb-4" />
-                <p className="text-sm text-neutral-500 mb-2">Select a snippet to edit</p>
-                <p className="text-xs text-neutral-600 leading-relaxed">
+                <p className="text-md text-neutral-500 mb-2">Select a snippet to edit</p>
+                <p className="text-sm text-neutral-600 leading-relaxed">
                   Choose a snippet from the list, or click{' '}
-                  <span className="text-blue-400">+</span> to create a new one.
+                  <span className={ACCENT_TEXT[accentColor as AccentColor] ?? ACCENT_TEXT.blue}>+</span> to create a new one.
                   Reference snippets in prompts with{' '}
                   <span className="font-mono text-purple-400">{'{{SNIPPET_NAME}}'}</span> syntax.
                 </p>
@@ -211,28 +234,29 @@ interface SnippetListItemProps {
   selected: boolean
   onSelect: () => void
   onDelete: () => void
+  accentColor: string
 }
 
-function SnippetListItem({ snippet, selected, onSelect, onDelete }: SnippetListItemProps) {
+function SnippetListItem({ snippet, selected, onSelect, onDelete, accentColor }: SnippetListItemProps) {
   return (
     <div
       className={cn(
         'group flex items-start gap-2 px-3 py-2.5 cursor-pointer transition-colors border-l-2',
         selected
-          ? 'bg-neutral-850 border-l-blue-400'
+          ? `bg-neutral-850 ${ACCENT_BORDER[accentColor] ?? ACCENT_BORDER.blue}`
           : 'border-l-transparent hover:bg-neutral-850/50',
       )}
       onClick={onSelect}
     >
       <div className="flex-1 min-w-0">
-        <p className="text-xs font-mono font-medium text-neutral-300 truncate">
+        <p className="text-sm font-mono font-medium text-neutral-300 truncate">
           {snippet.name}
         </p>
-        <p className="text-xss text-neutral-500 truncate mt-0.5">
+        <p className="text-xs text-neutral-500 truncate mt-0.5">
           {snippet.description}
         </p>
         {snippet.value && (
-          <p className="text-xss text-neutral-600 truncate mt-0.5 font-mono">
+          <p className="text-xs text-neutral-600 truncate mt-0.5 font-mono">
             {snippet.value.slice(0, 80)}{snippet.value.length > 80 ? '...' : ''}
           </p>
         )}
@@ -263,6 +287,7 @@ interface SnippetFormProps {
   onReset: () => void
   onDelete?: () => void
   onCancel?: () => void
+  accentColor: string
 }
 
 function SnippetForm({
@@ -276,13 +301,14 @@ function SnippetForm({
   onReset,
   onDelete,
   onCancel,
+  accentColor,
 }: SnippetFormProps) {
   return (
     <div className="flex-1 flex flex-col">
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
         {/* Name */}
         <div>
-          <label className="block text-xs text-neutral-500 mb-1.5">
+          <label className="block text-sm text-neutral-500 mb-1.5">
             Snippet Name <span className="text-red-400">*</span>
           </label>
           <Input
@@ -292,14 +318,14 @@ function SnippetForm({
             error={nameHasError}
             autoFocus={!isEditing}
           />
-          <p className="mt-1 text-xss text-neutral-600">
+          <p className="mt-1 text-xs text-neutral-600">
             Use in prompts as <span className="font-mono text-purple-400">{'{{' + (formData.name || 'NAME') + '}}'}</span>
           </p>
         </div>
 
         {/* Description */}
         <div>
-          <label className="block text-xs text-neutral-500 mb-1.5">
+          <label className="block text-sm text-neutral-500 mb-1.5">
             Description <span className="text-red-400">*</span>
           </label>
           <Input
@@ -311,7 +337,7 @@ function SnippetForm({
 
         {/* Value */}
         <div>
-          <label className="block text-xs text-neutral-500 mb-1.5">Value</label>
+          <label className="block text-sm text-neutral-500 mb-1.5">Value</label>
           <ResizableTextarea
             mode="code"
             language="markdown"
@@ -319,7 +345,7 @@ function SnippetForm({
             onChange={(val) => setFormField('value', val)}
             minHeight={160}
           />
-          <p className="mt-1 text-xss text-neutral-600">
+          <p className="mt-1 text-xs text-neutral-600">
             Can be a single value, multi-line text, or an entire document
           </p>
         </div>
@@ -327,7 +353,7 @@ function SnippetForm({
         {/* Error */}
         {formError && (
           <div className="px-3 py-2 bg-red-500/10 border border-red-500/30 rounded-lg">
-            <p className="text-xs text-red-400">{formError}</p>
+            <p className="text-sm text-red-400">{formError}</p>
           </div>
         )}
       </div>
@@ -352,7 +378,7 @@ function SnippetForm({
               type="button"
               onClick={onCancel}
               disabled={isSaving}
-              className="rounded-md border border-neutral-700 bg-transparent px-3 py-1.5 text-xs text-neutral-400 transition-colors hover:bg-neutral-700 hover:text-neutral-300 disabled:opacity-50"
+              className="rounded-md border border-neutral-700 bg-transparent px-3 py-1.5 text-sm text-neutral-400 transition-colors hover:bg-neutral-700 hover:text-neutral-300 disabled:opacity-50"
             >
               Cancel
             </button>
@@ -369,7 +395,7 @@ function SnippetForm({
             type="button"
             onClick={onSave}
             disabled={isSaving}
-            className="flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-xs text-white transition-colors hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
+            className={`flex items-center gap-1.5 rounded-md ${ACCENT_BUTTON[accentColor] ?? ACCENT_BUTTON.blue} px-3 py-1.5 text-sm text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50`}
           >
             <Save className="w-3 h-3" />
             {isEditing ? 'Save' : 'Add'}

package/components/settings/SettingsHeader.tsx

@@ -10,7 +10,6 @@ export interface SettingsHeaderProps {
     title: string
     description: string
   }
-  confirmReset?: boolean
   action?: ReactNode
   variant?: 'default' | 'info' | 'warning' | 'danger'
 }
@@ -55,7 +54,7 @@ export function SettingsHeader({
       <div className={`flex-shrink-0 w-8 h-8 rounded-lg ${styles.iconBg} flex items-center justify-center`}>
         {icon ?? <Info className={`w-4 h-4 ${styles.iconColor}`} />}
       </div>
-      <p className="flex-1 text-sm text-neutral-400 leading-relaxed">{description}</p>
+      <p className="flex-1 text-md text-neutral-400 leading-relaxed">{description}</p>
       <div className="flex-shrink-0 flex items-center gap-2">
         {action}
         {onReset && (

package/components/settings/SettingsTreeNav.tsx

@@ -14,6 +14,20 @@ export interface SettingsTreeNavProps {
   tree: SettingsTreeNode[]
   selectedPath: string
   onSelectPath: (path: string) => void
+  accentColor?: string
+}
+
+const ACCENT_SELECTED: Record<string, string> = {
+  blue: 'bg-blue-500/20 text-blue-400',
+  purple: 'bg-purple-500/20 text-purple-400',
+  orange: 'bg-orange-500/20 text-orange-400',
+  green: 'bg-green-500/20 text-green-400',
+  pink: 'bg-pink-500/20 text-pink-400',
+  amber: 'bg-amber-500/20 text-amber-400',
+  emerald: 'bg-emerald-500/20 text-emerald-400',
+  teal: 'bg-teal-500/20 text-teal-400',
+  sky: 'bg-sky-500/20 text-sky-400',
+  violet: 'bg-violet-500/20 text-violet-400',
 }
 
 interface TreeNodeProps {
@@ -25,6 +39,7 @@ interface TreeNodeProps {
   onToggleExpand: (path: string) => void
   depth: number
   searchQuery?: string
+  accentColor: string
 }
 
 function highlightMatch(text: string, query: string | undefined) {
@@ -53,6 +68,7 @@ function TreeNode({
   onToggleExpand,
   depth,
   searchQuery,
+  accentColor,
 }: TreeNodeProps) {
   const isLeaf = isLeafNode(node)
   const isExpanded = expandedPaths.has(path)
@@ -72,8 +88,8 @@ function TreeNode({
       <button
         onClick={handleClick}
         className={`
-          w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors cursor-pointer
-          ${isSelected ? 'bg-blue-500/20 text-blue-400' : isInSelectedPath ? 'text-neutral-300' : 'text-neutral-400'}
+          w-full flex items-center gap-2 px-2 py-1.5 text-md rounded-md transition-colors cursor-pointer
+          ${isSelected ? ACCENT_SELECTED[accentColor] ?? ACCENT_SELECTED.blue : isInSelectedPath ? 'text-neutral-300' : 'text-neutral-400'}
           ${!isSelected && 'hover:bg-neutral-800 hover:text-neutral-200'}
         `}
         style={{ paddingLeft: `${depth * 12 + 8}px` }}
@@ -110,6 +126,7 @@ function TreeNode({
               onToggleExpand={onToggleExpand}
               depth={depth + 1}
               searchQuery={searchQuery}
+              accentColor={accentColor}
             />
           ))}
         </div>
@@ -118,7 +135,7 @@ function TreeNode({
   )
 }
 
-export function SettingsTreeNav({ tree, selectedPath, onSelectPath }: SettingsTreeNavProps) {
+export function SettingsTreeNav({ tree, selectedPath, onSelectPath, accentColor = 'blue' }: SettingsTreeNavProps) {
   const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => {
     const expanded = new Set<string>()
     if (selectedPath) {
@@ -145,19 +162,16 @@ export function SettingsTreeNav({ tree, selectedPath, onSelectPath }: SettingsTr
   useEffect(() => {
     if (selectedPath) {
       const parents = getParentPaths(selectedPath)
-      const newExpanded = new Set(expandedPaths)
-      let changed = false
-
-      for (const p of parents) {
-        if (!newExpanded.has(p)) {
-          newExpanded.add(p)
-          changed = true
+      setExpandedPaths((prev) => {
+        let changed = false
+        for (const p of parents) {
+          if (!prev.has(p)) { changed = true; break }
         }
-      }
-
-      if (changed) {
-        setExpandedPaths(newExpanded)
-      }
+        if (!changed) return prev
+        const next = new Set(prev)
+        for (const p of parents) next.add(p)
+        return next
+      })
     }
   }, [selectedPath])
 
@@ -232,7 +246,7 @@ export function SettingsTreeNav({ tree, selectedPath, onSelectPath }: SettingsTr
 
       <div className="flex-1 overflow-y-auto py-2">
         {filteredTree.length === 0 && searchQuery ? (
-          <p className="text-xs text-neutral-500 text-center py-4 px-2">
+          <p className="text-sm text-neutral-500 text-center py-4 px-2">
             No settings match &quot;{searchQuery}&quot;
           </p>
         ) : (
@@ -247,6 +261,7 @@ export function SettingsTreeNav({ tree, selectedPath, onSelectPath }: SettingsTr
               onToggleExpand={handleToggleExpand}
               depth={0}
               searchQuery={searchQuery}
+              accentColor={accentColor}
             />
           ))
         )}

package/components/ui/action-dialog.tsx

@@ -11,49 +11,16 @@
  * Footer: FormActions (status text, cancel/submit)
  */
 
-import { useEffect } from 'react'
 import { createPortal } from 'react-dom'
-import {
-  ArrowLeft, ArrowRight, ArrowUp, ArrowDown,
-  ChevronLeft, ChevronRight, ChevronUp, ChevronDown,
-  Check, X, Plus, Minus, Pencil, Trash2, Copy, Save,
-  RefreshCw, RotateCcw, Undo2, Redo2,
-  Search, Filter, Download, Upload, ExternalLink, Link2,
-  Eye, EyeOff, Lock, Unlock, Settings, MoreHorizontal, MoreVertical,
-  Info, HelpCircle,
-  User, Users, Folder, File, Image, Code, Terminal,
-  Star, Heart, Bell, Bookmark, Tag, Pin, Mail, Send,
-  Globe, Database, Cloud,
-  Wand2, Shield, ShieldCheck, Zap, Sparkles,
-  Play, Pause, Square, StopCircle,
-  Menu, GripVertical, Maximize2, Minimize2,
-  Scan, Webhook, Bot, Puzzle, Plug,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import { IconButton } from './icon-button.tsx'
+import { useModalBehavior } from '../hooks/use-modal-behavior.ts'
+import { iconMap, IconButton } from './icon-button.tsx'
 import type { IconName } from './icon-button.tsx'
 import { FormActions } from './form-actions.tsx'
 import { SelectionGrid, type SelectionCardItem, type CodingToolPresetConfig } from './selection-grid.tsx'
-import { ExecutionDetailsPanel, type ExecutionDetailRow } from './execution-details-panel.tsx'
+import { ExecutionDetailsPanel } from './execution-details-panel.tsx'
+import type { DetailRow } from './detail-section.tsx'
 import { cn } from '../lib/cn.ts'
 
-const dialogIconMap: Record<string, LucideIcon> = {
-  'arrow-left': ArrowLeft, 'arrow-right': ArrowRight, 'arrow-up': ArrowUp, 'arrow-down': ArrowDown,
-  'chevron-left': ChevronLeft, 'chevron-right': ChevronRight, 'chevron-up': ChevronUp, 'chevron-down': ChevronDown,
-  'check': Check, 'x': X, 'plus': Plus, 'minus': Minus, 'pencil': Pencil, 'trash': Trash2, 'copy': Copy, 'save': Save,
-  'refresh': RefreshCw, 'rotate': RotateCcw, 'undo': Undo2, 'redo': Redo2,
-  'search': Search, 'filter': Filter, 'download': Download, 'upload': Upload, 'external-link': ExternalLink, 'link': Link2,
-  'eye': Eye, 'eye-off': EyeOff, 'lock': Lock, 'unlock': Unlock, 'settings': Settings, 'more-h': MoreHorizontal, 'more-v': MoreVertical,
-  'info': Info, 'help': HelpCircle,
-  'user': User, 'users': Users, 'folder': Folder, 'file': File, 'image': Image, 'code': Code, 'terminal': Terminal,
-  'star': Star, 'heart': Heart, 'bell': Bell, 'bookmark': Bookmark, 'tag': Tag, 'pin': Pin, 'mail': Mail, 'send': Send,
-  'globe': Globe, 'database': Database, 'cloud': Cloud,
-  'wand': Wand2, 'shield': Shield, 'shield-check': ShieldCheck, 'zap': Zap, 'sparkles': Sparkles,
-  'play': Play, 'pause': Pause, 'stop': Square, 'stop-circle': StopCircle, 'scan': Scan,
-  'menu': Menu, 'grip': GripVertical, 'maximize': Maximize2, 'minimize': Minimize2,
-  'webhook': Webhook, 'bot': Bot, 'puzzle': Puzzle, 'plug': Plug,
-}
-
 export interface ActionDialogProps {
   /** Dialog title */
   title: string
@@ -114,7 +81,7 @@ export interface ActionDialogProps {
 
   // ── Execution details section (mandatory) ────────────────────────────────
   /** Execution detail rows (Tool, Permissions, Output, CLI Flags, Changes) */
-  executionDetails: ExecutionDetailRow[]
+  executionDetails: DetailRow[]
   /** Whether direct file edits are allowed */
   allowDirectEdits?: boolean
   /** Callback to toggle direct edits - shows the toggle when provided */
@@ -163,20 +130,9 @@ export function ActionDialog({
   children,
   className,
 }: ActionDialogProps) {
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onCancel?.()
-    }
-    document.addEventListener('keydown', handleEscape)
-    return () => document.removeEventListener('keydown', handleEscape)
-  }, [onCancel])
-
-  useEffect(() => {
-    document.body.style.overflow = 'hidden'
-    return () => { document.body.style.overflow = '' }
-  }, [])
+  useModalBehavior(true, () => onCancel?.())
 
-  const Icon = icon ? dialogIconMap[icon] : null
+  const Icon = icon ? iconMap[icon] : null
   const hasSelection = ((items && items.length > 0) || (presets && presets.length > 0)) && selectedIds && onSelect
   const hasScenarios = scenarios && scenarios.length > 0 && selectedScenarioIds && onSelectScenarios
   const hasExecutionDetails = executionDetails.length > 0 || onAllowDirectEditsChange || executionWarning
@@ -211,11 +167,11 @@ export function ActionDialog({
             />
           )}
           <div className="flex flex-col">
-            <span className="text-sm font-semibold text-neutral-200">
+            <span className="text-md font-semibold text-neutral-200">
               {title}
             </span>
             {subtitle && (
-              <span className="text-xs text-neutral-500">{subtitle}</span>
+              <span className="text-sm text-neutral-500">{subtitle}</span>
             )}
           </div>
           <div className="flex-1" />
@@ -236,7 +192,7 @@ export function ActionDialog({
           {hasSelection && (
             <div>
               {selectionLabel && (
-                <div className="text-xs text-neutral-500 mb-2">{selectionLabel}</div>
+                <div className="text-sm text-neutral-500 mb-2">{selectionLabel}</div>
               )}
               <SelectionGrid
                 items={items}
@@ -254,11 +210,11 @@ export function ActionDialog({
           {hasScenarios && (
             <div>
               <div className="flex items-center justify-between mb-2">
-                <span className="text-xs text-neutral-500">{scenarioLabel}</span>
+                <span className="text-sm text-neutral-500">{scenarioLabel}</span>
                 <button
                   type="button"
                   onClick={handleSelectAllScenarios}
-                  className="text-xs text-blue-400 hover:text-blue-300 transition-colors cursor-pointer"
+                  className="text-sm text-blue-400 hover:text-blue-300 transition-colors cursor-pointer"
                 >
                   {allScenariosSelected ? 'Deselect All' : 'Select All'}
                 </button>

package/components/ui/badge.tsx

@@ -13,7 +13,9 @@
  * - 5 size variants (xss, xs, sm, md, lg)
  */
 
-export type BadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
+import { FORM_COLORS, type AccentColor } from '../lib/form-colors.ts'
+
+export type BadgeColor = AccentColor
 
 export interface BadgeProps {
   value: number | string
@@ -23,30 +25,12 @@ export interface BadgeProps {
   testId?: string
 }
 
-const colorClasses: Record<BadgeColor, string> = {
-  green: 'border-green-500/30 text-green-400',
-  red: 'border-red-500/30 text-red-400',
-  blue: 'border-blue-500/30 text-blue-400',
-  orange: 'border-orange-500/30 text-orange-400',
-  cyan: 'border-cyan-500/30 text-cyan-400',
-  yellow: 'border-yellow-500/30 text-yellow-400',
-  purple: 'border-purple-500/30 text-purple-400',
-  indigo: 'border-indigo-500/30 text-indigo-400',
-  emerald: 'border-emerald-500/30 text-emerald-400',
-  amber: 'border-amber-500/30 text-amber-400',
-  violet: 'border-violet-500/30 text-violet-400',
-  neutral: 'border-neutral-500/30 text-neutral-400',
-  sky: 'border-sky-500/30 text-sky-400',
-  pink: 'border-pink-500/30 text-pink-400',
-  teal: 'border-teal-500/30 text-teal-400',
-}
-
 const sizeClasses = {
   xss: 'min-w-[14px] h-[14px] px-0.5 text-xss',
-  xs: 'min-w-[16px] h-[16px] px-1 text-xss',
-  sm: 'min-w-[18px] h-[18px] px-1 text-xss',
-  md: 'min-w-[20px] h-[20px] px-1.5 text-xss',
-  lg: 'min-w-[22px] h-[22px] px-1.5 text-xs',
+  xs: 'min-w-[16px] h-[16px] px-1 text-xs',
+  sm: 'min-w-[18px] h-[18px] px-1 text-xs',
+  md: 'min-w-[20px] h-[20px] px-1.5 text-xs',
+  lg: 'min-w-[22px] h-[22px] px-1.5 text-sm',
 }
 
 export function Badge({
@@ -61,7 +45,7 @@ export function Badge({
   return (
     <span
       data-testid={testId}
-      className={`inline-flex items-center justify-center border rounded-full font-medium leading-none tabular-nums ${colorClasses[color]} ${sizeClasses[size]} ${className}`}
+      className={`inline-flex items-center justify-center border rounded-full font-medium leading-none tabular-nums ${FORM_COLORS[color].border} ${FORM_COLORS[color].accent} ${sizeClasses[size]} ${className}`}
     >
       {display}
     </span>

package/components/ui/bottom-panel-header.tsx

@@ -70,7 +70,7 @@ type LayoutMode = 'full' | 'compact-banner' | 'compact-all'
 
 // Width estimates for layout calculation
 const TAB_ICON_PADDING = 56    // icon(16) + gap(8) + px-4(32)
-const CHAR_WIDTH = 7.5         // approximate char width at text-sm
+const CHAR_WIDTH = 7.5         // approximate char width at text-md
 const COUNT_BADGE_WIDTH = 40   // badge with count
 const BANNER_FULL_WIDTH = 200  // icon + text + padding
 const BANNER_COMPACT_WIDTH = 36 // icon only
@@ -163,7 +163,7 @@ export function BottomPanelHeader<T extends string = string>({
               key={tab.id}
               onClick={() => onTabChange(tab.id)}
               data-testid={tab.testId}
-              className={`h-[41px] flex items-center justify-center gap-2 ${compactTabs ? 'px-3' : 'px-4'} text-sm border-b-2 transition-colors cursor-pointer ${baseClasses}`}
+              className={`h-[41px] flex items-center justify-center gap-2 ${compactTabs ? 'px-3' : 'px-4'} text-md border-b-2 transition-colors cursor-pointer ${baseClasses}`}
             >
               {compactTabs ? (
                 <span className="relative flex items-center justify-center w-[18px] h-[18px] flex-shrink-0">
@@ -209,12 +209,12 @@ export function BottomPanelHeader<T extends string = string>({
         {statusBanner && (
           compactBanner ? (
             <Tooltip content={{ description: statusBanner.message }} position="bottom">
-              <div className={`flex items-center px-2 py-1.5 ${bannerStyles} rounded text-xs`}>
+              <div className={`flex items-center px-2 py-1.5 ${bannerStyles} rounded text-sm`}>
                 <RefreshCw className="w-3 h-3 flex-shrink-0" />
               </div>
             </Tooltip>
           ) : (
-            <div className={`flex items-center gap-2 px-2.5 py-1.5 ${bannerStyles} rounded text-xs max-w-full`}>
+            <div className={`flex items-center gap-2 px-2.5 py-1.5 ${bannerStyles} rounded text-sm max-w-full`}>
               <RefreshCw className="w-3 h-3 flex-shrink-0" />
               <span className="truncate">{statusBanner.message}</span>
             </div>