@toolr/ui-design 0.1.5 → 0.1.7

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'
 
@@ -30,10 +31,10 @@ const VARIANT_CLASSES = {
 
 const SIZE_CLASSES = {
   xss: 'h-[18px] px-1.5 text-xss',
-  xs: 'h-6 px-2 text-xs',
-  sm: 'h-7 px-2 text-xs',
-  md: 'h-8 px-3 text-sm',
-  lg: 'h-9 px-3 text-sm',
+  xs: 'h-6 px-2 text-sm',
+  sm: 'h-7 px-2 text-sm',
+  md: 'h-8 px-3 text-md',
+  lg: 'h-9 px-3 text-md',
 }
 
 export function Select<T extends string | number = string>({
@@ -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) {
@@ -152,7 +143,7 @@ export function Select<T extends string | number = string>({
                 data-idx={idx}
                 onClick={() => { onChange(opt.value); close() }}
                 onPointerEnter={() => setHighlightIdx(idx)}
-                className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${
+                className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors cursor-pointer ${
                   isHighlighted
                     ? `${FORM_COLORS[color].selectedBg} text-neutral-200`
                     : isSelected ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`

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 ─────────────────────────────────────────────── */
@@ -251,10 +203,10 @@ function GridCard({ item, selected, onClick }: CardProps) {
         />
       )}
 
-      <span className="text-xs font-medium text-neutral-200 block">{item.name}</span>
+      <span className="text-sm font-medium text-neutral-200 block">{item.name}</span>
 
       {item.description && (
-        <span className="text-xs text-neutral-500 block mt-0.5">{item.description}</span>
+        <span className="text-sm text-neutral-500 block mt-0.5">{item.description}</span>
       )}
     </button>
   )
@@ -291,9 +243,9 @@ function ListCard({ item, selected, onClick }: CardProps) {
       )}
 
       <div className="min-w-0">
-        <span className="text-xs font-medium text-neutral-200 block">{item.name}</span>
+        <span className="text-sm font-medium text-neutral-200 block">{item.name}</span>
         {item.description && (
-          <span className="text-xs text-neutral-500 block mt-0.5">{item.description}</span>
+          <span className="text-sm text-neutral-500 block mt-0.5">{item.description}</span>
         )}
       </div>
     </button>

package/components/ui/setting-row.tsx

@@ -11,7 +11,7 @@
  * - 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'
 
@@ -28,7 +28,6 @@ interface SettingRowToggle extends SettingRowBase {
   onChange: (checked: boolean) => void
   color?: ToggleColor
   size?: ToggleSize
-  variant?: ToggleVariant
 }
 
 interface SettingRowSelect extends SettingRowBase {
@@ -58,7 +57,7 @@ export function SettingRow(props: SettingRowProps) {
     <div className={`flex items-start justify-between gap-4 ${className}`}>
       <div>
         <label className="text-neutral-200 leading-7">{label}</label>
-        {description && <p className="text-sm text-neutral-500">{description}</p>}
+        {description && <p className="text-md text-neutral-500">{description}</p>}
       </div>
       {props.type === 'toggle' && (
         <Toggle
@@ -67,7 +66,6 @@ export function SettingRow(props: SettingRowProps) {
           disabled={disabled}
           color={props.color}
           size={props.size}
-          variant={props.variant}
         />
       )}
       {props.type === 'select' && (

package/components/ui/settings-card.tsx

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

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,7 +48,7 @@ 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
@@ -73,8 +56,8 @@ export function SettingsInfoBox({ children, color = 'neutral', className, testId
       style={{ paddingLeft: 10 }}
       data-testid={testId}
     >
-      <Icon className={cn('w-4 h-4 mt-0.5 shrink-0', iconColorMap[color])} />
-      <div className="text-sm text-neutral-500">{children}</div>
+      <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>
   )
 }

package/components/ui/settings-section-title.tsx

@@ -15,7 +15,7 @@ export interface SettingsSectionTitleProps {
 export function SettingsSectionTitle({ children, className = '', testId }: SettingsSectionTitleProps) {
   return (
     <h3
-      className={`text-xs font-medium text-neutral-400 uppercase tracking-wider ${className}`}
+      className={`text-sm font-medium text-neutral-400 uppercase tracking-wider ${className}`}
       data-testid={testId}
     >
       {children}

package/components/ui/snapshot-card.tsx

@@ -48,7 +48,7 @@ export function SnapshotCard({
 
       <div className="p-4">
         <div className="flex items-start justify-between gap-2">
-          <h3 className="text-sm font-medium text-neutral-200 truncate">{title}</h3>
+          <h3 className="text-md font-medium text-neutral-200 truncate">{title}</h3>
           <Label
             text={statusLabelConfig[status].text}
             color={statusLabelConfig[status].color}
@@ -59,19 +59,19 @@ export function SnapshotCard({
         </div>
 
         {timestamp && (
-          <p className="mt-1 text-xss text-neutral-500">{timestamp}</p>
+          <p className="mt-1 text-xs text-neutral-500">{timestamp}</p>
         )}
 
         {description && (
-          <p className="mt-2 text-xs text-neutral-500 leading-relaxed line-clamp-2">{description}</p>
+          <p className="mt-2 text-sm text-neutral-500 leading-relaxed line-clamp-2">{description}</p>
         )}
 
         {stats && stats.length > 0 && (
           <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2">
             {stats.map((stat) => (
               <div key={stat.label}>
-                <p className="text-xss text-neutral-500">{stat.label}</p>
-                <p className="text-xs font-medium text-neutral-200">{stat.value}</p>
+                <p className="text-xs text-neutral-500">{stat.label}</p>
+                <p className="text-sm font-medium text-neutral-200">{stat.value}</p>
               </div>
             ))}
           </div>
@@ -83,7 +83,7 @@ export function SnapshotCard({
               <button
                 type="button"
                 onClick={onSync}
-                className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md bg-blue-400/15 text-blue-400 hover:bg-blue-400/25 transition-colors cursor-pointer"
+                className="flex items-center gap-1.5 px-2.5 py-1 text-sm font-medium rounded-md bg-blue-400/15 text-blue-400 hover:bg-blue-400/25 transition-colors cursor-pointer"
               >
                 <RefreshCw className={cn('w-3 h-3', status === 'pending' && 'animate-spin')} />
                 Sync
@@ -93,7 +93,7 @@ export function SnapshotCard({
               <button
                 type="button"
                 onClick={onView}
-                className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md text-neutral-400 hover:bg-neutral-700 transition-colors cursor-pointer"
+                className="flex items-center gap-1.5 px-2.5 py-1 text-sm font-medium rounded-md text-neutral-400 hover:bg-neutral-700 transition-colors cursor-pointer"
               >
                 <Eye className="w-3 h-3" />
                 View

package/components/ui/snippets-panel.tsx

@@ -63,19 +63,19 @@ export function SnippetsPanel({
   return (
     <div className={cn('flex flex-col bg-neutral-800 rounded-lg overflow-hidden', className)}>
       <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-700">
-        <span className="text-xss font-semibold uppercase tracking-wider text-neutral-500">Snippets</span>
-        <span className="text-xss text-neutral-500">{snippets.length} snippets</span>
+        <span className="text-xs font-semibold uppercase tracking-wider text-neutral-500">Snippets</span>
+        <span className="text-xs text-neutral-500">{snippets.length} snippets</span>
       </div>
       {showSearch && (
         <div className="px-2 py-2 border-b border-neutral-700">
-          <div className="flex items-center gap-1.5 px-2 py-1 bg-[var(--background)] border border-neutral-700 rounded text-xs">
+          <div className="flex items-center gap-1.5 px-2 py-1 bg-[var(--background)] border border-neutral-700 rounded text-sm">
             <Search className="w-3 h-3 text-neutral-500 shrink-0" />
             <input
               type="text"
               placeholder="Search snippets..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="flex-1 bg-transparent text-neutral-200 placeholder-neutral-500 outline-none text-xs"
+              className="flex-1 bg-transparent text-neutral-200 placeholder-neutral-500 outline-none text-sm"
             />
           </div>
         </div>
@@ -90,7 +90,7 @@ export function SnippetsPanel({
           />
         ))}
         {filteredSnippets.length === 0 && (
-          <p className="text-xss text-neutral-500 text-center py-4">No snippets found</p>
+          <p className="text-xs text-neutral-500 text-center py-4">No snippets found</p>
         )}
       </div>
     </div>
@@ -110,10 +110,10 @@ function SnippetCard({ snippet, onInsert, onCopy }: SnippetCardProps) {
     <div className="rounded-md border border-neutral-700 bg-neutral-900 hover:border-neutral-600 transition-colors">
       <div className="flex items-center justify-between gap-2 px-2.5 py-1.5">
         <div className="flex items-center gap-2 min-w-0">
-          <span className="text-xs font-medium text-neutral-200 truncate">{snippet.label}</span>
+          <span className="text-sm font-medium text-neutral-200 truncate">{snippet.label}</span>
           {snippet.language && (
             <span
-              className="px-1.5 py-0.5 text-xss font-medium rounded shrink-0"
+              className="px-1.5 py-0.5 text-xs font-medium rounded shrink-0"
               style={{ color: langColor, backgroundColor: `${langColor}20` }}
             >
               {snippet.language}
@@ -140,17 +140,17 @@ function SnippetCard({ snippet, onInsert, onCopy }: SnippetCardProps) {
         </div>
       </div>
       {snippet.description && (
-        <p className="px-2.5 pb-1.5 text-xss text-neutral-400 leading-relaxed">{snippet.description}</p>
+        <p className="px-2.5 pb-1.5 text-xs text-neutral-400 leading-relaxed">{snippet.description}</p>
       )}
       <div className="mx-2.5 mb-2 rounded bg-[var(--background)] border border-neutral-700 overflow-hidden">
-        <pre className="p-2 text-xss text-neutral-400 leading-relaxed overflow-x-auto max-h-24">
+        <pre className="p-2 text-xs text-neutral-400 leading-relaxed overflow-x-auto max-h-24">
           <code>{snippet.code}</code>
         </pre>
       </div>
       {snippet.tags && snippet.tags.length > 0 && (
         <div className="flex flex-wrap gap-1 px-2.5 pb-2">
           {snippet.tags.map((tag) => (
-            <span key={tag} className="px-1.5 py-0.5 text-xss rounded bg-neutral-700 text-neutral-500">
+            <span key={tag} className="px-1.5 py-0.5 text-xs rounded bg-neutral-700 text-neutral-500">
               {tag}
             </span>
           ))}

package/components/ui/sort-dropdown.tsx

@@ -74,7 +74,7 @@ export function SortDropdown({
     <div className="relative flex items-center" ref={ref} onKeyDown={handleKeyDown}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className={`flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-xs transition-colors cursor-pointer ${FORM_COLORS[color].border} text-neutral-200 ${FORM_COLORS[color].hover}`}
+        className={`flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-sm transition-colors cursor-pointer ${FORM_COLORS[color].border} text-neutral-200 ${FORM_COLORS[color].hover}`}
       >
         <span
           className={`${FORM_COLORS[color].accent} hover:brightness-125 transition-colors`}
@@ -94,7 +94,7 @@ export function SortDropdown({
               key={f.value}
               onClick={() => { onFieldChange(f.value); setIsOpen(false) }}
               onPointerEnter={() => setHighlightIdx(idx)}
-              className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${
+              className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors cursor-pointer ${
                 idx === highlightIdx ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : field === f.value ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
               }`}
             >

package/components/ui/status-card.tsx

@@ -1,19 +1,8 @@
 /** Status card displaying a list of labeled items with color-coded status indicators. */
 
-import {
-  Settings, Shield, Database, Globe, Zap, Code, Terminal,
-  Star, Cloud, Bell, Heart, Sparkles, Bot, Plug,
-} 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>> = {
-  settings: Settings, shield: Shield, database: Database, globe: Globe,
-  zap: Zap, code: Code, terminal: Terminal, star: Star, cloud: Cloud,
-  bell: Bell, heart: Heart, sparkles: Sparkles, bot: Bot, plug: Plug,
-}
-
 type StatusType = 'success' | 'warning' | 'error' | 'info' | 'neutral'
 
 export interface StatusItem {
@@ -55,7 +44,7 @@ export function StatusCard({
   action,
   className,
 }: StatusCardProps) {
-  const Icon = icon ? iconSubset[icon] : undefined
+  const Icon = icon ? iconMap[icon] : undefined
 
   return (
     <div className={cn('rounded-lg border border-neutral-700 bg-neutral-800 overflow-hidden', className)}>
@@ -63,15 +52,15 @@ export function StatusCard({
         {Icon && (
           <Icon className="w-4 h-4 shrink-0" style={{ color: iconColor }} />
         )}
-        <h3 className="text-sm font-medium text-neutral-200">{title}</h3>
+        <h3 className="text-md font-medium text-neutral-200">{title}</h3>
       </div>
 
       <div className="divide-y divide-neutral-700/60">
         {items.map((item) => (
           <div key={item.label} className="flex items-center justify-between px-4 py-2.5">
-            <span className="text-xs text-neutral-400">{item.label}</span>
+            <span className="text-sm text-neutral-400">{item.label}</span>
             <div className="flex items-center gap-2">
-              <span className={cn('text-xs font-medium', statusValueColor[item.status])}>
+              <span className={cn('text-sm font-medium', statusValueColor[item.status])}>
                 {item.value}
               </span>
               <span className={cn('w-2 h-2 rounded-full shrink-0', statusDotColor[item.status])} />
@@ -85,7 +74,7 @@ export function StatusCard({
           <button
             type="button"
             onClick={action.onClick}
-            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"
           >
             {action.label}
           </button>

package/components/ui/tab-bar.tsx

@@ -1,38 +1,12 @@
 /** Tab bar with underline, pill, and card variants, closable tabs, color-coded icons, and auto-collapse to icon-only. */
 
 import { useRef, useState, useEffect, useCallback } from 'react'
-import {
-  Settings, Folder, File, Code, Terminal, Database,
-  Globe, Star, Users, User, Tag, X,
-  Zap, Shield, Sparkles, Eye, Lock, Search, Heart,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { X } from 'lucide-react'
+import { iconMap, type IconName } from './icon-button.tsx'
 import { Badge, type BadgeColor } from './badge.tsx'
 import { cn } from '../lib/cn.ts'
 import { Tooltip } from './tooltip.tsx'
 
-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,
-  sparkles: Sparkles,
-  eye: Eye,
-  lock: Lock,
-  search: Search,
-  heart: Heart,
-}
-
 export interface Tab {
   id: string
   label: string
@@ -55,8 +29,8 @@ export interface TabBarProps {
 
 const sizeConfig = {
   xss: { text: 'text-xss', icon: 'w-2.5 h-2.5', px: 'px-1.5', py: 'py-1', close: 'w-2.5 h-2.5', badgeSize: 'xss' as const, gap: 'gap-1' },
-  xs: { text: 'text-xs', icon: 'w-3 h-3', px: 'px-2', py: 'py-1', close: 'w-3 h-3', badgeSize: 'xs' as const, gap: 'gap-1' },
-  sm: { text: 'text-sm', icon: 'w-3.5 h-3.5', px: 'px-3', py: 'py-1.5', close: 'w-3 h-3', badgeSize: 'sm' as const, gap: 'gap-1.5' },
+  xs: { text: 'text-sm', icon: 'w-3 h-3', px: 'px-2', py: 'py-1', close: 'w-3 h-3', badgeSize: 'xs' as const, gap: 'gap-1' },
+  sm: { text: 'text-md', icon: 'w-3.5 h-3.5', px: 'px-3', py: 'py-1.5', close: 'w-3 h-3', badgeSize: 'sm' as const, gap: 'gap-1.5' },
   md: { text: 'text-base', icon: 'w-4 h-4', px: 'px-4', py: 'py-2', close: 'w-3.5 h-3.5', badgeSize: 'md' as const, gap: 'gap-2' },
   lg: { text: 'text-lg', icon: 'w-5 h-5', px: 'px-5', py: 'py-2.5', close: 'w-4 h-4', badgeSize: 'lg' as const, gap: 'gap-2' },
 }
@@ -102,7 +76,7 @@ function estimateTabsWidth(tabs: Tab[], size: keyof typeof sizeConfig): number {
 }
 
 function TabIcon({ icon, size, color }: { icon: IconName; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; color?: string }) {
-  const Icon = iconSubset[icon]
+  const Icon = iconMap[icon]
   if (!Icon) return null
   const s = sizeConfig[size]
   const c = getColors(color)

package/components/ui/toggle.tsx

@@ -7,22 +7,9 @@
  * - List items - inline toggle controls
  */
 
-export type ToggleColor =
-  | 'blue'
-  | 'green'
-  | 'red'
-  | 'orange'
-  | 'cyan'
-  | 'yellow'
-  | 'purple'
-  | 'indigo'
-  | 'emerald'
-  | 'amber'
-  | 'violet'
-  | 'neutral'
-  | 'sky'
-  | 'pink'
-  | 'teal'
+import { type AccentColor } from '../lib/form-colors.ts'
+
+export type ToggleColor = AccentColor
 
 // Border colors per accent
 const BORDER_COLORS: Record<ToggleColor, { idle: string; active: string }> = {
@@ -90,8 +77,6 @@ const TOGGLE_SIZES: Record<ToggleSize, { track: string; knob: string; translate:
   lg: { track: 'w-14 h-7', knob: 'w-6 h-6', translate: 'translate-x-7' },
 }
 
-export type ToggleVariant = 'outline' | 'filled'
-
 export interface ToggleProps {
   checked: boolean
   onChange: (checked: boolean) => void
@@ -99,7 +84,6 @@ export interface ToggleProps {
   size?: ToggleSize
   className?: string
   color?: ToggleColor
-  variant?: ToggleVariant
   /** Test ID for E2E testing */
   testId?: string
 }

package/components/ui/tooltip.tsx

@@ -1,6 +1,7 @@
-import { useState, useRef, useLayoutEffect, useEffect } from 'react'
+import { useState, useRef, useLayoutEffect, useEffect, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { createPortal } from 'react-dom'
+import { useClickOutside } from '../hooks/use-click-outside.ts'
 
 export interface TooltipContent {
   title?: string
@@ -201,19 +202,8 @@ export function Tooltip({
   }
 
   // Click-outside dismissal for click trigger mode
-  useEffect(() => {
-    if (trigger !== 'click' || !isVisible) return
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        triggerRef.current && !triggerRef.current.contains(e.target as Node) &&
-        tooltipRef.current && !tooltipRef.current.contains(e.target as Node)
-      ) {
-        setIsVisible(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [trigger, isVisible])
+  const dismissClickTooltip = useCallback(() => setIsVisible(false), [])
+  useClickOutside([triggerRef, tooltipRef], isVisible && trigger === 'click', dismissClickTooltip)
 
   const updatePosition = () => {
     if (!triggerRef.current) return
@@ -262,18 +252,16 @@ export function Tooltip({
       style={{
         top: coords.top,
         left: coords.left,
-        opacity: isVisible ? 1 : 0,
-        visibility: isVisible ? 'visible' : 'hidden',
-        transition: 'opacity 150ms, visibility 150ms',
+        opacity: 1,
         ...(multiline ? { maxWidth: maxWidth ?? '80vw' } : {}),
         ...(maxHeight ? { maxHeight, overflowY: 'auto' as const } : {}),
       }}
       onMouseEnter={interactive && trigger !== 'click' ? show : undefined}
       onMouseLeave={interactive && trigger !== 'click' ? hide : undefined}
     >
-      {content.title && <p className="text-sm text-neutral-200 font-medium">{content.title}</p>}
-      <div className={`text-xs text-neutral-400 ${content.title ? 'mt-0.5' : ''}`}>{content.description}</div>
-      {content.extra && <p className="text-xs text-orange-400/70 mt-0.5">{content.extra}</p>}
+      {content.title && <p className="text-md text-neutral-200 font-medium">{content.title}</p>}
+      <div className={`text-sm text-neutral-400 ${content.title ? 'mt-0.5' : ''}`}>{content.description}</div>
+      {content.extra && <p className="text-sm text-orange-400/70 mt-0.5">{content.extra}</p>}
       <div className={arrowClasses} />
     </div>
   )
@@ -290,7 +278,7 @@ export function Tooltip({
       >
         {children}
       </div>
-      {createPortal(tooltipContent, document.body)}
+      {isVisible && createPortal(tooltipContent, document.body)}
     </>
   )
 }