@toolr/ui-design 0.1.6 → 0.1.7

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

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,24 +25,6 @@ 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-xs',
@@ -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/breadcrumb.tsx

@@ -1,53 +1,10 @@
 /** Breadcrumb navigation with clickable segments, color-coded icons, and configurable separators. */
 
-import {
-  ChevronRight,
-  Settings, Folder, File, Code, Terminal, Database,
-  Globe, Star, Users, User, Tag, Search, Heart,
-  Zap, Shield, ShieldCheck, Sparkles, Eye, Lock,
-  Cloud, Wand2, Bell, Bookmark, Pin, Mail, Send,
-  Image, Bot, Puzzle, Plug, Webhook, House, Package,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { ChevronRight } from 'lucide-react'
+import { iconMap, type IconName } from './icon-button.tsx'
+import { ACCENT_NAV, type AccentColor } from '../lib/form-colors.ts'
 import { cn } from '../lib/cn.ts'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  folder: Folder,
-  file: File,
-  settings: Settings,
-  code: Code,
-  terminal: Terminal,
-  database: Database,
-  globe: Globe,
-  star: Star,
-  users: Users,
-  user: User,
-  tag: Tag,
-  zap: Zap,
-  shield: Shield,
-  'shield-check': ShieldCheck,
-  sparkles: Sparkles,
-  eye: Eye,
-  lock: Lock,
-  search: Search,
-  heart: Heart,
-  cloud: Cloud,
-  wand: Wand2,
-  bell: Bell,
-  bookmark: Bookmark,
-  pin: Pin,
-  mail: Mail,
-  send: Send,
-  image: Image,
-  bot: Bot,
-  puzzle: Puzzle,
-  plug: Plug,
-  webhook: Webhook,
-  home: House,
-  'package': Package,
-}
-
 export interface BreadcrumbSegment {
   id: string
   label: string
@@ -73,29 +30,12 @@ const sizeConfig = {
   lg: { text: 'text-lg', icon: 'w-5 h-5', px: 'px-3', py: 'py-1.5', gap: 'gap-2', sep: 'w-4 h-4' },
 }
 
-const colorMap: Record<string, { bg: string; text: string }> = {
-  blue: { bg: 'bg-blue-500/10', text: 'text-blue-400' },
-  green: { bg: 'bg-green-500/10', text: 'text-green-400' },
-  purple: { bg: 'bg-purple-500/10', text: 'text-purple-400' },
-  red: { bg: 'bg-red-500/10', text: 'text-red-400' },
-  orange: { bg: 'bg-orange-500/10', text: 'text-orange-400' },
-  cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400' },
-  yellow: { bg: 'bg-yellow-500/10', text: 'text-yellow-400' },
-  amber: { bg: 'bg-amber-500/10', text: 'text-amber-400' },
-  emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400' },
-  indigo: { bg: 'bg-indigo-500/10', text: 'text-indigo-400' },
-  violet: { bg: 'bg-violet-500/10', text: 'text-violet-400' },
-  sky: { bg: 'bg-sky-500/10', text: 'text-sky-400' },
-  pink: { bg: 'bg-pink-500/10', text: 'text-pink-400' },
-  teal: { bg: 'bg-teal-500/10', text: 'text-teal-400' },
-  neutral: { bg: 'bg-neutral-500/10', text: 'text-neutral-400' },
-}
 
 function SegmentIcon({ icon, color, size }: { icon: IconName; color?: string; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg' }) {
-  const Icon = iconSubset[icon]
+  const Icon = iconMap[icon]
   if (!Icon) return null
   const s = sizeConfig[size]
-  const c = color && colorMap[color] ? colorMap[color] : null
+  const c = color && ACCENT_NAV[color as AccentColor] ? ACCENT_NAV[color as AccentColor] : null
 
   return (
     <span className={c?.text || ''}>
@@ -135,7 +75,7 @@ export function Breadcrumb({
         {segments.map((segment, index) => {
           const isLast = index === segments.length - 1
           const isClickable = !isLast && !!segment.onClick
-          const colors = segment.color && colorMap[segment.color] ? colorMap[segment.color] : null
+          const colors = segment.color && ACCENT_NAV[segment.color as AccentColor] ? ACCENT_NAV[segment.color as AccentColor] : null
           const isFirstPlain = !isBox && index === 0
 
           return (

package/components/ui/checkbox.tsx

@@ -8,25 +8,11 @@
  */
 
 import { Check } from 'lucide-react'
+import { type AccentColor } from '../lib/form-colors.ts'
 
 export type CheckboxSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg'
 
-export type CheckboxColor =
-  | 'blue'
-  | 'green'
-  | 'red'
-  | 'orange'
-  | 'cyan'
-  | 'yellow'
-  | 'purple'
-  | 'indigo'
-  | 'emerald'
-  | 'amber'
-  | 'violet'
-  | 'neutral'
-  | 'sky'
-  | 'pink'
-  | 'teal'
+export type CheckboxColor = AccentColor
 
 const CHECKBOX_COLORS: Record<CheckboxColor, { bg: string; border: string; icon: string; hover: string }> = {
   blue: { bg: 'bg-blue-500/20', border: 'border-blue-500/40', icon: 'text-blue-300', hover: 'hover:bg-blue-500/15 hover:border-blue-500/30' },

package/components/ui/collapsible-section.tsx

@@ -1,47 +1,9 @@
 import { useState } from 'react'
-import {
-  ChevronRight, Settings, Folder, Code, Terminal, Database,
-  Star, Heart, Bell, Bookmark, Tag, Pin, Mail, Globe, Cloud,
-  Shield, Zap, Sparkles, Search, Filter, Eye, Lock, User, Users,
-  File, Image, Download, Upload, Play, Pause,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { ChevronRight } from 'lucide-react'
+import { iconMap, type IconName } from './icon-button.tsx'
 import { Badge, type BadgeColor } from './badge.tsx'
 import { cn } from '../lib/cn.ts'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  settings: Settings,
-  folder: Folder,
-  code: Code,
-  terminal: Terminal,
-  database: Database,
-  star: Star,
-  heart: Heart,
-  bell: Bell,
-  bookmark: Bookmark,
-  tag: Tag,
-  pin: Pin,
-  mail: Mail,
-  globe: Globe,
-  cloud: Cloud,
-  shield: Shield,
-  zap: Zap,
-  sparkles: Sparkles,
-  search: Search,
-  filter: Filter,
-  eye: Eye,
-  lock: Lock,
-  user: User,
-  users: Users,
-  file: File,
-  image: Image,
-  download: Download,
-  upload: Upload,
-  play: Play,
-  pause: Pause,
-}
-
 export interface CollapsibleSectionProps {
   title: string
   icon?: IconName
@@ -64,7 +26,7 @@ export function CollapsibleSection({
   className,
 }: CollapsibleSectionProps) {
   const [open, setOpen] = useState(defaultOpen)
-  const Icon = icon ? iconSubset[icon] : undefined
+  const Icon = icon ? iconMap[icon] : undefined
 
   return (
     <div className={cn('border-b border-neutral-700', className)}>

package/components/ui/confirm-badge.tsx

@@ -12,8 +12,9 @@
  */
 
 import { Check } from 'lucide-react'
+import { FORM_COLORS, type AccentColor } from '../lib/form-colors.ts'
 
-export type ConfirmBadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
+export type ConfirmBadgeColor = AccentColor
 
 export interface ConfirmBadgeProps {
   color?: ConfirmBadgeColor
@@ -22,24 +23,6 @@ export interface ConfirmBadgeProps {
   testId?: string
 }
 
-const colorClasses: Record<ConfirmBadgeColor, 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: 'w-[14px] h-[14px] rounded-full',
   xs: 'w-[16px] h-[16px] rounded-full',
@@ -65,7 +48,7 @@ export function ConfirmBadge({
   return (
     <span
       data-testid={testId}
-      className={`inline-flex items-center justify-center border ${colorClasses[color]} ${sizeClasses[size]} ${className}`}
+      className={`inline-flex items-center justify-center border ${FORM_COLORS[color].border} ${FORM_COLORS[color].accent} ${sizeClasses[size]} ${className}`}
     >
       <Check className={iconSizeClasses[size]} />
     </span>

package/components/ui/cookie-consent.tsx

@@ -16,6 +16,22 @@ export interface CookieConsentProps {
   onConsent?: (choice: ConsentChoice) => void
 }
 
+const ACCENT_BUTTON_CLASSES: Record<string, string> = {
+  cyan: 'bg-cyan-600 border-cyan-500 hover:bg-cyan-500',
+  blue: 'bg-blue-600 border-blue-500 hover:bg-blue-500',
+  green: 'bg-green-600 border-green-500 hover:bg-green-500',
+  purple: 'bg-purple-600 border-purple-500 hover:bg-purple-500',
+  orange: 'bg-orange-600 border-orange-500 hover:bg-orange-500',
+  red: 'bg-red-600 border-red-500 hover:bg-red-500',
+  amber: 'bg-amber-600 border-amber-500 hover:bg-amber-500',
+  emerald: 'bg-emerald-600 border-emerald-500 hover:bg-emerald-500',
+  indigo: 'bg-indigo-600 border-indigo-500 hover:bg-indigo-500',
+  pink: 'bg-pink-600 border-pink-500 hover:bg-pink-500',
+  teal: 'bg-teal-600 border-teal-500 hover:bg-teal-500',
+  violet: 'bg-violet-600 border-violet-500 hover:bg-violet-500',
+  sky: 'bg-sky-600 border-sky-500 hover:bg-sky-500',
+}
+
 export function CookieConsent({
   storageKey,
   accentColor = 'cyan',
@@ -61,7 +77,7 @@ export function CookieConsent({
           </button>
           <button
             onClick={() => handleConsent('accepted')}
-            className={`px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-white border transition-colors bg-${accentColor}-600 border-${accentColor}-500 hover:bg-${accentColor}-500`}
+            className={`px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-white border transition-colors ${ACCENT_BUTTON_CLASSES[accentColor] ?? ACCENT_BUTTON_CLASSES.cyan}`}
           >
             Accept All
           </button>

package/components/ui/debounce-border-overlay.tsx

@@ -0,0 +1,31 @@
+export interface DebounceBorderOverlayProps {
+  debounceKey: number
+  durationMs: number
+}
+
+export function DebounceBorderOverlay({ debounceKey, durationMs }: DebounceBorderOverlayProps) {
+  if (debounceKey <= 0) return null
+
+  return (
+    <svg
+      key={debounceKey}
+      className="absolute inset-0 pointer-events-none text-emerald-400/70"
+      style={{ width: '100%', height: '100%' }}
+    >
+      <rect
+        x="1" y="1" rx="5" ry="5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        pathLength="100"
+        strokeDasharray="100"
+        strokeDashoffset="0"
+        style={{
+          width: 'calc(100% - 2px)',
+          height: 'calc(100% - 2px)',
+          animation: `debounce-border-drain ${durationMs}ms linear forwards`,
+        }}
+      />
+    </svg>
+  )
+}

package/components/ui/detail-section.tsx

@@ -7,26 +7,9 @@
  * - Any key-value metadata layout
  */
 
-import {
-  Info, Settings, Code, Shield, Terminal, Database, Globe, Zap,
-  Star, Cloud, Bell, Heart, Sparkles, Bot, Plug, Lock, Eye,
-  File, Folder, User, Users, Tag, Bookmark, Mail, Send, Search,
-  Play, ShieldCheck, Wand2, Copy,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { iconMap, type IconName } from './icon-button.tsx'
 import { cn } from '../lib/cn.ts'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  info: Info, settings: Settings, code: Code, shield: Shield,
-  terminal: Terminal, database: Database, globe: Globe, zap: Zap,
-  star: Star, cloud: Cloud, bell: Bell, heart: Heart,
-  sparkles: Sparkles, bot: Bot, plug: Plug, lock: Lock, eye: Eye,
-  file: File, folder: Folder, user: User, users: Users, tag: Tag,
-  bookmark: Bookmark, mail: Mail, send: Send, search: Search,
-  play: Play, 'shield-check': ShieldCheck, wand: Wand2, copy: Copy,
-}
-
 export interface DetailRow {
   label: string
   value: string
@@ -44,7 +27,7 @@ export interface DetailSectionProps {
 }
 
 export function DetailSection({ title, icon, rows, className }: DetailSectionProps) {
-  const Icon = icon ? iconSubset[icon] : undefined
+  const Icon = icon ? iconMap[icon] : undefined
 
   return (
     <div className={className}>

package/components/ui/editor-placeholder-card.tsx

@@ -60,7 +60,8 @@ export function EditorPlaceholderCard({
   className = '',
 }: EditorPlaceholderCardProps) {
   const [isExpanded, setIsExpanded] = useState(false)
-  const [isCopied, setIsCopied] = useState(false)
+  const [isPlaceholderCopied, setIsPlaceholderCopied] = useState(false)
+  const [isValueCopied, setIsValueCopied] = useState(false)
   const [isOverflowing, setIsOverflowing] = useState(false)
   const valueRef = useRef<HTMLDivElement>(null)
 
@@ -78,8 +79,8 @@ export function EditorPlaceholderCard({
   const handleCopyPlaceholder = async () => {
     try {
       await navigator.clipboard.writeText(`{{${name}}}`)
-      setIsCopied(true)
-      setTimeout(() => setIsCopied(false), 1500)
+      setIsPlaceholderCopied(true)
+      setTimeout(() => setIsPlaceholderCopied(false), 1500)
     } catch {
       // Clipboard API not available
     }
@@ -89,8 +90,8 @@ export function EditorPlaceholderCard({
     if (!value) return
     try {
       await navigator.clipboard.writeText(value)
-      setIsCopied(true)
-      setTimeout(() => setIsCopied(false), 1500)
+      setIsValueCopied(true)
+      setTimeout(() => setIsValueCopied(false), 1500)
     } catch {
       // Clipboard API not available
     }
@@ -119,20 +120,20 @@ export function EditorPlaceholderCard({
         <div className="flex items-center gap-1 shrink-0">
           {showCopyPlaceholder && (
             <IconButton
-              icon={isCopied ? 'check' : 'copy'}
+              icon={isPlaceholderCopied ? 'check' : 'copy'}
               onClick={handleCopyPlaceholder}
               size="sm"
-              color={isCopied ? 'green' : 'neutral'}
+              color={isPlaceholderCopied ? 'green' : 'neutral'}
               tooltip={{ description: `Copy {{${name}}}` }}
               tooltipPosition="left"
             />
           )}
           {showCopyValue && hasValue && (
             <IconButton
-              icon={isCopied ? 'check' : 'copy'}
+              icon={isValueCopied ? 'check' : 'copy'}
               onClick={handleCopyValue}
               size="sm"
-              color={isCopied ? 'green' : 'neutral'}
+              color={isValueCopied ? 'green' : 'neutral'}
               tooltip={{ description: 'Copy value to clipboard' }}
               tooltipPosition="left"
             />

package/components/ui/execution-details-panel.tsx

@@ -9,15 +9,10 @@
 import { AlertTriangle, Info } from 'lucide-react'
 import { Checkbox } from './checkbox.tsx'
 import { cn } from '../lib/cn.ts'
-
-export interface ExecutionDetailRow {
-  label: string
-  value: string
-  mono?: boolean
-}
+import type { DetailRow } from './detail-section.tsx'
 
 export interface ExecutionDetailsPanelProps {
-  details: ExecutionDetailRow[]
+  details: DetailRow[]
   /** Show the "Allow direct edits" toggle */
   allowDirectEdits?: boolean
   onAllowDirectEditsChange?: (value: boolean) => void

package/components/ui/file-structure-section.tsx

@@ -1,19 +1,11 @@
 import { useState, useEffect, useCallback, useRef, useMemo, type ReactNode } from 'react'
 import { FileCode, FolderTree, Loader2, AlertCircle, AlignLeft, Code2, Type } from 'lucide-react'
-import { CollapseButton, type IconButtonColor } from './icon-button.tsx'
+import { type AccentColor, ACCENT_ICON } from '../lib/form-colors.ts'
+import { CollapseButton } from './icon-button.tsx'
 import { SegmentedToggle } from './segmented-toggle.tsx'
 import { FileTree, collectDirPaths, type FileTreeNode } from './file-tree.tsx'
 
 export type PreviewMode = 'format' | 'language' | 'plain'
-export type AccentColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
-
-const ACCENT_ICON: Record<AccentColor, string> = {
-  blue: 'text-blue-400', green: 'text-green-400', red: 'text-red-400',
-  orange: 'text-orange-400', cyan: 'text-cyan-400', yellow: 'text-yellow-400',
-  purple: 'text-purple-400', indigo: 'text-indigo-400', emerald: 'text-emerald-400',
-  amber: 'text-amber-400', violet: 'text-violet-400', neutral: 'text-neutral-400',
-  sky: 'text-sky-400', pink: 'text-pink-400', teal: 'text-teal-400',
-}
 
 const ACCENT_BORDER: Record<AccentColor, string> = {
   blue: 'border-blue-500/25', green: 'border-green-500/25', red: 'border-red-500/25',
@@ -23,13 +15,6 @@ const ACCENT_BORDER: Record<AccentColor, string> = {
   sky: 'border-sky-500/25', pink: 'border-pink-500/25', teal: 'border-teal-500/25',
 }
 
-const ACCENT_BUTTON: Record<AccentColor, IconButtonColor> = {
-  blue: 'blue', green: 'green', red: 'red',
-  orange: 'orange', cyan: 'cyan', yellow: 'yellow',
-  purple: 'purple', indigo: 'indigo', emerald: 'emerald',
-  amber: 'amber', violet: 'violet', neutral: 'neutral',
-  sky: 'sky', pink: 'pink', teal: 'teal',
-}
 
 const ACCENT_HANDLE: Record<AccentColor, string> = {
   blue: 'bg-blue-500/30 group-hover:bg-blue-400/50', green: 'bg-green-500/30 group-hover:bg-green-400/50', red: 'bg-red-500/30 group-hover:bg-red-400/50',
@@ -350,7 +335,7 @@ export function FileStructureSection({
         <CollapseButton
           collapsed={allCollapsed}
           onToggle={() => setExpandedPaths(allCollapsed ? new Set(allDirPaths) : new Set())}
-          color={ACCENT_BUTTON[accentColor]}
+          color={accentColor}
         />
       </div>
       <div className={`${variant === 'split' ? 'flex-1 overflow-y-auto' : ''} p-3`}>

package/components/ui/file-tree.tsx

@@ -1,4 +1,5 @@
 import { FileCode, Folder, FolderOpen, ChevronRight, ChevronDown } from 'lucide-react'
+import { ACCENT_ICON, type AccentColor } from '../lib/form-colors.ts'
 
 export interface FileTreeNode {
   name: string
@@ -30,19 +31,6 @@ const ACCENT_SELECTED: Record<string, string> = {
   violet: 'bg-violet-400/20 text-neutral-200',
 }
 
-const ACCENT_ICON: Record<string, string> = {
-  blue: 'text-blue-400',
-  purple: 'text-purple-400',
-  orange: 'text-orange-400',
-  green: 'text-green-400',
-  pink: 'text-pink-400',
-  amber: 'text-amber-400',
-  emerald: 'text-emerald-400',
-  teal: 'text-teal-400',
-  sky: 'text-sky-400',
-  violet: 'text-violet-400',
-}
-
 function nodeHasFiles(node: FileTreeNode): boolean {
   if (node.type === 'file') return true
   return !!node.children?.some(nodeHasFiles)
@@ -124,7 +112,7 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
   const expanded = isDir && expandedPaths.has(path)
   const base = 'flex items-center gap-1.5 py-0.5 px-1 rounded text-sm transition-colors overflow-hidden whitespace-nowrap'
   const selectedClass = ACCENT_SELECTED[accentColor] ?? ACCENT_SELECTED.blue
-  const iconColorClass = ACCENT_ICON[accentColor] ?? ACCENT_ICON.blue
+  const iconColorClass = ACCENT_ICON[accentColor as AccentColor] ?? ACCENT_ICON.blue
   const rowClass = isSelected
     ? `${base} ${selectedClass}`
     : isDir

package/components/ui/files-panel.tsx

@@ -3,7 +3,7 @@
 import { useState, useMemo } from 'react'
 import { Folder, FolderOpen, File, FileCode, FileText, FileJson, Image, ChevronRight, Search, MoreVertical } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { iconMap, type IconName } from './icon-button.tsx'
 import { cn } from '../lib/cn.ts'
 
 const ACCENT_SELECTED: Record<string, string> = {
@@ -19,14 +19,6 @@ const ACCENT_SELECTED: Record<string, string> = {
   violet: 'bg-violet-400/15 text-violet-400',
 }
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  folder: Folder,
-  file: File,
-  code: FileCode,
-  image: Image,
-  search: Search,
-}
-
 const EXTENSION_ICON_MAP: Record<string, LucideIcon> = {
   ts: FileCode,
   tsx: FileCode,
@@ -88,7 +80,7 @@ function countFiles(entries: FileEntry[]): number {
 }
 
 function getFileIcon(entry: FileEntry): LucideIcon {
-  if (entry.icon && iconSubset[entry.icon]) return iconSubset[entry.icon]!
+  if (entry.icon && iconMap[entry.icon]) return iconMap[entry.icon]!
   if (entry.type === 'folder') return Folder
   const ext = entry.name.split('.').pop()?.toLowerCase()
   if (ext && EXTENSION_ICON_MAP[ext]) return EXTENSION_ICON_MAP[ext]
@@ -96,7 +88,7 @@ function getFileIcon(entry: FileEntry): LucideIcon {
 }
 
 function getFolderIcon(expanded: boolean, entry: FileEntry): LucideIcon {
-  if (entry.icon && iconSubset[entry.icon]) return iconSubset[entry.icon]!
+  if (entry.icon && iconMap[entry.icon]) return iconMap[entry.icon]!
   return expanded ? FolderOpen : Folder
 }