@toolr/ui-design 0.1.6 → 0.1.8

package/components/ui/navigation-bar.tsx

@@ -1,58 +1,14 @@
 /** Navigation bar with back/forward controls, history dropdown, and inline breadcrumb path. */
 
 import { useState, useRef, useCallback } from 'react'
-import {
-  ChevronLeft, ChevronRight, History,
-  Menu, Home, Layers,
-  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,
-} from 'lucide-react'
+import { ChevronLeft, ChevronRight, History } 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 type { BreadcrumbSegment } from './breadcrumb.tsx'
+import { ACCENT_NAV, type AccentColor } from '../lib/form-colors.ts'
 import { cn } from '../lib/cn.ts'
 import { useClickOutside } from '../hooks/use-click-outside.ts'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  menu: Menu,
-  home: Home,
-  layers: Layers,
-  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,
-}
-
 export interface NavigationBarProps {
   segments: BreadcrumbSegment[]
   canGoBack?: boolean
@@ -76,23 +32,6 @@ const sizeConfig = {
   lg:  { text: 'text-lg', segIcon: 'w-5 h-5', navIcon: 'w-5 h-5', navBtn: 'w-9 h-9 rounded-md', px: 'px-3', py: 'py-1.5', sep: 'w-4 h-4', divH: 'h-6' },
 }
 
-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 NavButton({ icon: Icon, onClick, disabled, size, active }: {
   icon: LucideIcon
@@ -134,9 +73,9 @@ function SegmentSeparator({ type, size }: { type: 'chevron' | 'slash' | 'dot'; s
 }
 
 function SegmentIcon({ icon, color, size }: { icon: IconName; color?: string; size: keyof typeof sizeConfig }) {
-  const Icon = iconSubset[icon]
+  const Icon = iconMap[icon]
   if (!Icon) return null
-  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 || ''}>
       <Icon className={sizeConfig[size].segIcon} />
@@ -160,7 +99,7 @@ export function NavigationBar({
 }: NavigationBarProps) {
   const s = sizeConfig[size]
   const hasNav = !!(onBack || onForward)
-  const LeadIcon = leadingAction ? iconSubset[leadingAction.icon] : null
+  const LeadIcon = leadingAction ? iconMap[leadingAction.icon] : null
 
   const [historyOpen, setHistoryOpen] = useState(false)
   const historyRef = useRef<HTMLDivElement>(null)
@@ -200,7 +139,7 @@ export function NavigationBar({
                 active={historyOpen}
               />
               {historyOpen && hasHistoryEntries && (
-                <div className="absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-800 border border-neutral-700 rounded-lg shadow-xl z-50">
+                <div className="absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg z-50">
                   <div className="px-3 py-1.5 border-b border-neutral-700/50">
                     <p className="text-sm font-medium text-neutral-500">History</p>
                   </div>
@@ -221,7 +160,7 @@ export function NavigationBar({
                             {seg.icon && <SegmentIcon icon={seg.icon} color={seg.color} size="xs" />}
                             <span className={cn(
                               'text-sm truncate',
-                              seg.color && colorMap[seg.color] ? colorMap[seg.color].text : 'text-neutral-300',
+                              seg.color && ACCENT_NAV[seg.color as AccentColor] ? ACCENT_NAV[seg.color as AccentColor].text : 'text-neutral-300',
                             )}>
                               {seg.label}
                             </span>
@@ -243,17 +182,17 @@ export function NavigationBar({
         {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
 
           return (
-            <div key={segment.id} className="flex items-center gap-1">
+            <div key={segment.id} className="flex items-center gap-1 min-w-0">
               {index > 0 && <SegmentSeparator type={separator} size={size} />}
               {isClickable ? (
                 <button
                   type="button"
                   onClick={segment.onClick}
                   className={cn(
-                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer',
+                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0',
                     s.text,
                     'font-medium hover:text-white',
                     colors ? [colors.text, `hover:${colors.bg}`] : ['text-neutral-300', 'hover:bg-neutral-700/50'],
@@ -265,7 +204,7 @@ export function NavigationBar({
               ) : (
                 <div
                   className={cn(
-                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md',
+                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md min-w-0',
                     s.text,
                     isLast
                       ? ['font-medium bg-neutral-700/50', colors ? colors.text : 'text-white']

package/components/ui/number-input.tsx

@@ -13,6 +13,8 @@ export interface NumberInputProps {
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
   disabled?: boolean
   className?: string
+  /** Accessible label — required for screen readers */
+  'aria-label'?: string
 }
 
 const SIZE_CONFIG = {
@@ -39,6 +41,7 @@ export function NumberInput({
   size = 'sm',
   disabled = false,
   className = '',
+  'aria-label': ariaLabel,
 }: NumberInputProps) {
   const [focused, setFocused] = useState(false)
   const [editText, setEditText] = useState<string | null>(null)
@@ -92,6 +95,7 @@ export function NumberInput({
         ref={inputRef}
         type="text"
         inputMode="numeric"
+        aria-label={ariaLabel}
         value={editText ?? value}
         onChange={(e) => setEditText(e.target.value)}
         onFocus={() => {
@@ -128,6 +132,7 @@ export function NumberInput({
       >
         <button
           type="button"
+          aria-label="Increase value"
           tabIndex={-1}
           onMouseDown={(e) => e.preventDefault()}
           onClick={() => nudge(1)}
@@ -145,6 +150,7 @@ export function NumberInput({
         <div className={`border-t ${fc.border}`} />
         <button
           type="button"
+          aria-label="Decrease value"
           tabIndex={-1}
           onMouseDown={(e) => e.preventDefault()}
           onClick={() => nudge(-1)}

package/components/ui/registry-browser.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode, useState, useEffect, useRef, useCallback } from 'react'
 import { Search, ArrowRight, RefreshCw, Loader2, X, AlertTriangle } from 'lucide-react'
+import { DebounceBorderOverlay } from './debounce-border-overlay.tsx'
 import { IconButton } from './icon-button.tsx'
 import { Input } from './input.tsx'
 import { RegistryCard, type RegistryCardProps } from './registry-card.tsx'
@@ -123,6 +124,10 @@ export function RegistryBrowser({
     }, 150)
   }, [onScrollChange])
 
+  useEffect(() => {
+    return () => clearTimeout(scrollTimerRef.current)
+  }, [])
+
   const loadMore = useCallback(() => {
     setVisibleCount((prev: number) => Math.min(prev + PAGE_SIZE, totalCount))
   }, [totalCount])
@@ -170,26 +175,7 @@ export function RegistryBrowser({
             </button>
           )}
           {debounceKey != null && debounceKey > 0 && (
-            <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 ${debounceDurationMs}ms linear forwards`,
-                }}
-              />
-            </svg>
+            <DebounceBorderOverlay debounceKey={debounceKey} durationMs={debounceDurationMs} />
           )}
         </div>
 

package/components/ui/registry-card.tsx

@@ -5,7 +5,7 @@ import {
 } from 'lucide-react'
 import { Tooltip } from './tooltip.tsx'
 import { IconButton, type IconName } from './icon-button.tsx'
-import { Label, type LabelColor } from './label.tsx'
+import { Label, type LabelColor, smartCapitalize } from './label.tsx'
 import { AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from '../lib/ai-tools.tsx'
 export { AiToolIcon, AI_TOOL_NAMES, type AiToolKey }
 
@@ -72,10 +72,6 @@ function getCategoryLabelColor(category: string): LabelColor {
   return CATEGORY_LABEL_COLORS[Math.abs(hash) % CATEGORY_LABEL_COLORS.length]
 }
 
-export function formatCategory(category: string): string {
-  return category.replace(/(^|-)(\w)/g, (_, sep, ch) => sep + ch.toUpperCase())
-}
-
 // ── Time helpers ──────────────────────────────────────────────────────────────
 
 function formatRelativeTime(isoDate: string): string {
@@ -153,10 +149,10 @@ function CardClickable({ children, onClick }: { children: ReactNode; onClick: (e
 function CategoryBadge({ category, onFilter }: { category: string; onFilter?: (category: string) => void }) {
   return (
     <Label
-      text={formatCategory(category)}
+      text={smartCapitalize(category)}
       color={getCategoryLabelColor(category)}
       icon="tag"
-      tooltip={{ description: onFilter ? `${formatCategory(category)} \u00b7 Click to filter` : formatCategory(category) }}
+      tooltip={{ description: onFilter ? `${smartCapitalize(category)} \u00b7 Click to filter` : smartCapitalize(category) }}
       size="sm"
       onClick={onFilter ? () => onFilter(category) : undefined}
     />

package/components/ui/resizable-textarea.tsx

@@ -115,10 +115,10 @@ function useResize(minHeight: number, onHeightChange?: (height: number) => void)
 // Code variant — Monaco editor with resize handle
 // ---------------------------------------------------------------------------
 
-const MONACO_THEME = 'resizable-textarea-dark'
-let themeRegistered = false
+const MONACO_THEME_PREFIX = 'resizable-textarea'
+const registeredThemes = new Set<string>()
 
-const codeWrapperClasses = {
+const wrapperVariantClasses = {
   filled: 'bg-neutral-800 border rounded-lg overflow-hidden',
   outline: 'bg-transparent border rounded-lg overflow-hidden',
 }
@@ -139,7 +139,7 @@ function ResizableCode({
 
   return (
     <div
-      className={`relative ${codeWrapperClasses[variant]} ${FORM_COLORS[color].border} ${wrapperClassName ?? ''}`}
+      className={`relative ${wrapperVariantClasses[variant]} ${FORM_COLORS[color].border} ${wrapperClassName ?? ''}`}
       data-resizable-wrapper
       style={{ height: height ?? minHeight }}
     >
@@ -148,7 +148,7 @@ function ResizableCode({
         language={language}
         value={value}
         onChange={(v) => onChange?.(v ?? '')}
-        theme={MONACO_THEME}
+        theme={`${MONACO_THEME_PREFIX}-${variant}`}
         options={{
           minimap: { enabled: false },
           fontSize: 13,
@@ -170,8 +170,9 @@ function ResizableCode({
           glyphMargin: false,
         }}
         beforeMount={(monaco) => {
-          if (!themeRegistered) {
-            monaco.editor.defineTheme(MONACO_THEME, {
+          const themeName = `${MONACO_THEME_PREFIX}-${variant}`
+          if (!registeredThemes.has(themeName)) {
+            monaco.editor.defineTheme(themeName, {
               base: 'vs-dark',
               inherit: true,
               rules: [],
@@ -182,7 +183,7 @@ function ResizableCode({
                 'editor.lineHighlightBorder': '#00000000',
               },
             })
-            themeRegistered = true
+            registeredThemes.add(themeName)
           }
         }}
       />
@@ -202,11 +203,6 @@ function ResizableCode({
 // Children variant — wraps any element with resize handle
 // ---------------------------------------------------------------------------
 
-const childrenVariantClasses = {
-  filled: 'bg-neutral-800 border rounded-lg overflow-hidden',
-  outline: 'bg-transparent border rounded-lg overflow-hidden',
-}
-
 function ResizableChildren({
   children,
   wrapperClassName,
@@ -224,7 +220,7 @@ function ResizableChildren({
 
   return (
     <div
-      className={`relative ${childrenVariantClasses[variant]} ${FORM_COLORS[color].border} ${wrapperClassName ?? ''}`}
+      className={`relative ${wrapperVariantClasses[variant]} ${FORM_COLORS[color].border} ${wrapperClassName ?? ''}`}
       data-resizable-wrapper
       style={height != null ? { height } : undefined}
     >
@@ -250,25 +246,7 @@ function ResizableField({
   color = 'blue',
   ...props
 }: ResizableTextareaBaseProps & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'color'>) {
-  const taRef = useRef<HTMLTextAreaElement>(null)
-  const dragRef = useRef<{ startY: number; startH: number } | null>(null)
-  const onResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    const ta = taRef.current
-    if (!ta) return
-    dragRef.current = { startY: e.clientY, startH: ta.offsetHeight }
-    const onMove = (ev: MouseEvent) => {
-      if (!dragRef.current || !ta) return
-      ta.style.height = `${Math.max(40, dragRef.current.startH + ev.clientY - dragRef.current.startY)}px`
-    }
-    const onUp = () => {
-      dragRef.current = null
-      document.removeEventListener('mousemove', onMove)
-      document.removeEventListener('mouseup', onUp)
-    }
-    document.addEventListener('mousemove', onMove)
-    document.addEventListener('mouseup', onUp)
-  }, [])
+  const { height, onResizeStart } = useResize(40)
 
   const className = `w-full rounded-lg focus:outline-none transition-colors ${variantClasses[variant]} ${FORM_COLORS[color].border} ${FORM_COLORS[color].focus} ${props.className ?? ''}`
 
@@ -277,8 +255,8 @@ function ResizableField({
   }
 
   return (
-    <div className={`relative ${wrapperClassName ?? ''}`}>
-      <textarea ref={taRef} {...props} className={className} style={{ resize: 'none', ...props.style }} />
+    <div className={`relative ${wrapperClassName ?? ''}`} data-resizable-wrapper>
+      <textarea {...props} className={className} style={{ resize: 'none', ...props.style, ...(height != null ? { height } : {}) }} />
       <div
         className="absolute bottom-[8px] right-[3px] w-4 h-3 cursor-row-resize flex items-end justify-end"
         onMouseDown={onResizeStart}

package/components/ui/segmented-toggle.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import type { AccentColor } from '../lib/form-colors.ts'
 import { Tooltip, type TooltipContent, type TooltipPosition } from './tooltip.tsx'
 
 export interface SegmentedToggleOption<T extends string> {
@@ -12,7 +13,7 @@ export interface SegmentedToggleProps<T extends string> {
   options: SegmentedToggleOption<T>[]
   value: T
   onChange: (value: T) => void
-  accentColor?: 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
+  accentColor?: AccentColor
   /** Visual style: 'filled' (default) has a container background, 'outline' is transparent */
   variant?: 'filled' | 'outline'
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
@@ -135,6 +136,8 @@ export function SegmentedToggle<T extends string>({
         return (
           <Tooltip key={option.value} content={option.tooltip} position={tooltipPosition}>
             <button
+              aria-pressed={isActive}
+              aria-label={option.label || (typeof option.tooltip.description === 'string' ? option.tooltip.description : undefined)}
               onClick={() => onChange(option.value)}
               disabled={disabled}
               className={`flex items-center justify-center ${sizeClass} ${rounding} font-medium transition-all cursor-pointer ${

package/components/ui/select.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useCallback, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { ChevronDown, Check } from 'lucide-react'
+import { useClickOutside } from '../hooks/use-click-outside.ts'
 import { useDropdownMaxHeight } from '../hooks/use-dropdown-max-height.ts'
 import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
 
@@ -74,17 +75,7 @@ export function Select<T extends string | number = string>({
   }, [])
 
   // Close on click outside both the trigger and the portal menu
-  useEffect(() => {
-    if (!isOpen) return
-    const handleClick = (event: MouseEvent) => {
-      const target = event.target as Node
-      if (ref.current?.contains(target)) return
-      if (menuRef.current?.contains(target)) return
-      close()
-    }
-    document.addEventListener('mousedown', handleClick)
-    return () => document.removeEventListener('mousedown', handleClick)
-  }, [isOpen, close])
+  useClickOutside([ref, menuRef], isOpen, close)
 
   useEffect(() => {
     if (highlightIdx >= 0 && menuRef.current) {
@@ -119,6 +110,8 @@ export function Select<T extends string | number = string>({
       <button
         ref={buttonRef}
         type="button"
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
         onClick={() => !disabled && (isOpen ? close() : open())}
         disabled={disabled}
         className={`flex items-center gap-1.5 min-w-0 rounded-lg border ${v.bg} ${FORM_COLORS[color].border} text-neutral-200 focus:outline-none ${FORM_COLORS[color].focus} transition-colors ${
@@ -126,7 +119,7 @@ export function Select<T extends string | number = string>({
         } ${s}`}
       >
         {selectedOption?.icon}
-        <span className={`whitespace-nowrap ${selectedOption ? '' : 'text-neutral-500'}`}>
+        <span className={`truncate ${selectedOption ? '' : 'text-neutral-500'}`}>
           {selectedOption?.label ?? placeholder}
         </span>
         <ChevronDown className={`w-3 h-3 ml-auto text-neutral-500 transition-transform shrink-0 ${isOpen ? 'rotate-180' : ''}`} />
@@ -134,7 +127,8 @@ export function Select<T extends string | number = string>({
       {isOpen && menuPos && createPortal(
         <div
           ref={menuRef}
-          className={`fixed z-[9999] whitespace-nowrap ${v.menuBg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}
+          role="listbox"
+          className={`fixed z-[9999] whitespace-nowrap ${v.menuBg} border ${FORM_COLORS[color].border} rounded-lg shadow-lg overflow-hidden`}
           style={{
             top: menuPos.top,
             left: align === 'right' ? undefined : menuPos.left,
@@ -160,7 +154,7 @@ export function Select<T extends string | number = string>({
               >
                 <Check className={`w-3 h-3 shrink-0 ${isSelected ? FORM_COLORS[color].accent : 'invisible'}`} />
                 {opt.icon}
-                <span>{opt.label}</span>
+                <span className="truncate">{opt.label}</span>
               </button>
             )
           })}

package/components/ui/selection-grid.tsx

@@ -1,54 +1,8 @@
-import {
-  Check, Settings, Code, Folder, File, Terminal, Globe, Database, Cloud,
-  Sparkles, Zap, Shield, ShieldCheck, Wand2, Star, Heart, Bell,
-  Search, Filter, Eye, Lock, User, Users, Image, Tag, Pin, Mail,
-  Send, Bookmark, Play, Pause, Bot, Plug, Puzzle, Webhook, Scan,
-} 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 type { ConfirmBadgeColor } from './confirm-badge.tsx'
 import { cn } from '../lib/cn.ts'
 import { AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from '../lib/ai-tools.tsx'
 
-const iconMap: Partial<Record<IconName, LucideIcon>> = {
-  'check': Check,
-  'settings': Settings,
-  'code': Code,
-  'folder': Folder,
-  'file': File,
-  'terminal': Terminal,
-  'globe': Globe,
-  'database': Database,
-  'cloud': Cloud,
-  'sparkles': Sparkles,
-  'zap': Zap,
-  'shield': Shield,
-  'shield-check': ShieldCheck,
-  'wand': Wand2,
-  'star': Star,
-  'heart': Heart,
-  'bell': Bell,
-  'search': Search,
-  'filter': Filter,
-  'eye': Eye,
-  'lock': Lock,
-  'user': User,
-  'users': Users,
-  'image': Image,
-  'tag': Tag,
-  'pin': Pin,
-  'mail': Mail,
-  'send': Send,
-  'bookmark': Bookmark,
-  'play': Play,
-  'pause': Pause,
-  'bot': Bot,
-  'plug': Plug,
-  'puzzle': Puzzle,
-  'webhook': Webhook,
-  'scan': Scan,
-}
-
 /* ── Preset logos (shared AiToolIcon) ─────────────────────── */
 
 type IconProps = { className?: string; style?: React.CSSProperties }
@@ -142,9 +96,7 @@ function resolveColor(color?: string): string {
 }
 
 function autoColumns(itemCount: number): number {
-  if (itemCount <= 2) return itemCount
-  if (itemCount <= 4) return itemCount
-  return 5
+  return Math.min(itemCount, 5)
 }
 
 /* ── Component ─────────────────────────────────────────────── */
@@ -228,6 +180,8 @@ function GridCard({ item, selected, onClick }: CardProps) {
   return (
     <button
       type="button"
+      aria-pressed={selected}
+      aria-label={item.name}
       onClick={onClick}
       disabled={item.disabled}
       className={cn(
@@ -267,6 +221,8 @@ function ListCard({ item, selected, onClick }: CardProps) {
   return (
     <button
       type="button"
+      aria-pressed={selected}
+      aria-label={item.name}
       onClick={onClick}
       disabled={item.disabled}
       className={cn(

package/components/ui/setting-row.tsx

@@ -11,9 +11,10 @@
  * - input: renders a text Input
  */
 
-import { Toggle, type ToggleColor, type ToggleSize, type ToggleVariant } from './toggle.tsx'
+import { Toggle, type ToggleColor, type ToggleSize } from './toggle.tsx'
 import { Select, type SelectOption } from './select.tsx'
 import { Input } from './input.tsx'
+import { cn } from '../lib/cn.ts'
 
 interface SettingRowBase {
   label: string
@@ -28,7 +29,6 @@ interface SettingRowToggle extends SettingRowBase {
   onChange: (checked: boolean) => void
   color?: ToggleColor
   size?: ToggleSize
-  variant?: ToggleVariant
 }
 
 interface SettingRowSelect extends SettingRowBase {
@@ -52,10 +52,10 @@ interface SettingRowInput extends SettingRowBase {
 export type SettingRowProps = SettingRowToggle | SettingRowSelect | SettingRowInput
 
 export function SettingRow(props: SettingRowProps) {
-  const { label, description, disabled, className = '' } = props
+  const { label, description, disabled, className } = props
 
   return (
-    <div className={`flex items-start justify-between gap-4 ${className}`}>
+    <div className={cn('flex items-start justify-between gap-4', className)}>
       <div>
         <label className="text-neutral-200 leading-7">{label}</label>
         {description && <p className="text-md text-neutral-500">{description}</p>}
@@ -67,7 +67,7 @@ export function SettingRow(props: SettingRowProps) {
           disabled={disabled}
           color={props.color}
           size={props.size}
-          variant={props.variant}
+          aria-label={label}
         />
       )}
       {props.type === 'select' && (

package/components/ui/settings-card.tsx

@@ -16,8 +16,8 @@ export function SettingsCard({ children, className, title, description, testId }
     >
       {title && (
         <div>
-          <h3 className="text-md font-medium text-neutral-200">{title}</h3>
-          {description && <p className="text-md text-neutral-500 mt-1">{description}</p>}
+          <h3 className="text-md font-medium text-neutral-200 truncate">{title}</h3>
+          {description && <p className="text-md text-neutral-500 mt-1 line-clamp-2">{description}</p>}
         </div>
       )}
       {!title && description && <p className="text-md text-neutral-500">{description}</p>}

package/components/ui/settings-info-box.tsx

@@ -1,7 +1,8 @@
 import { Info, AlertTriangle, CheckCircle, AlertCircle } from 'lucide-react'
+import { ACCENT_TEXT, type AccentColor } from '../lib/form-colors.ts'
 import { cn } from '../lib/cn.ts'
 
-export type SettingsInfoBoxColor = 'neutral' | 'blue' | 'amber' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'violet' | 'sky' | 'pink' | 'teal'
+export type SettingsInfoBoxColor = AccentColor
 
 export interface SettingsInfoBoxProps {
   children: React.ReactNode
@@ -10,7 +11,7 @@ export interface SettingsInfoBoxProps {
   testId?: string
 }
 
-const iconMap: Record<SettingsInfoBoxColor, typeof Info> = {
+const INFO_BOX_ICONS: Record<SettingsInfoBoxColor, typeof Info> = {
   neutral: Info,
   blue: Info,
   amber: AlertTriangle,
@@ -28,24 +29,6 @@ const iconMap: Record<SettingsInfoBoxColor, typeof Info> = {
   teal: Info,
 }
 
-const iconColorMap: Record<SettingsInfoBoxColor, string> = {
-  neutral: 'text-neutral-500',
-  blue: 'text-blue-400',
-  amber: 'text-amber-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',
-  violet: 'text-violet-400',
-  sky: 'text-sky-400',
-  pink: 'text-pink-400',
-  teal: 'text-teal-400',
-}
-
 const borderColorMap: Record<SettingsInfoBoxColor, string> = {
   neutral: 'border-l-neutral-600',
   blue: 'border-l-blue-500',
@@ -65,15 +48,14 @@ const borderColorMap: Record<SettingsInfoBoxColor, string> = {
 }
 
 export function SettingsInfoBox({ children, color = 'neutral', className, testId }: SettingsInfoBoxProps) {
-  const Icon = iconMap[color]
+  const Icon = INFO_BOX_ICONS[color]
 
   return (
     <div
-      className={cn('flex items-start gap-3 border-l-2', borderColorMap[color], className)}
-      style={{ paddingLeft: 10 }}
+      className={cn('flex items-start gap-3 border-l-2 pl-2.5', borderColorMap[color], className)}
       data-testid={testId}
     >
-      <Icon className={cn('w-4 h-4 mt-0.5 shrink-0', iconColorMap[color])} />
+      <Icon className={cn('w-4 h-4 mt-0.5 shrink-0', ACCENT_TEXT[color])} />
       <div className="text-md text-neutral-500">{children}</div>
     </div>
   )