@toolr/ui-design 0.1.6 → 0.1.7

package/components/ui/form-actions.tsx

@@ -34,10 +34,12 @@ export interface FormActionsProps {
 
 const PADDING_CLASSES = {
   compact: 'pt-2',
-  normal: 'pt-2 border-t border-neutral-700',
-  modal: 'px-4 py-3 border-t border-neutral-700',
+  normal: 'pt-2',
+  modal: 'px-4 py-3',
 } as const
 
+const BORDER_CLASS = 'border-t border-neutral-700'
+
 const DEFAULT_BORDER = {
   compact: false,
   normal: true,
@@ -64,10 +66,9 @@ export function FormActions({
   padding = 'normal',
 }: FormActionsProps) {
   const showBorder = border ?? DEFAULT_BORDER[padding]
-  const base = PADDING_CLASSES[padding]
   const paddingClass = showBorder
-    ? base
-    : base.replace(/\s*border-t\s+border-neutral-700/g, '')
+    ? `${PADDING_CLASSES[padding]} ${BORDER_CLASS}`
+    : PADDING_CLASSES[padding]
 
   const hasLeft = onBack || statusText
 

package/components/ui/icon-button.tsx

@@ -39,6 +39,7 @@ import {
   AlertCircle, FileCode, Gauge, Home, PieChart, Settings2,
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
+import { type AccentColor } from '../lib/form-colors.ts'
 import { Tooltip, type TooltipContent } from './tooltip.tsx'
 
 export const iconMap = {
@@ -159,7 +160,7 @@ export interface ActionItem {
 
 export type IconButtonStatus = 'loading' | 'success' | 'warning' | 'error'
 
-export type IconButtonColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
+export type IconButtonColor = AccentColor
 export type IconButtonVariant = 'filled' | 'outline'
 
 export interface IconButtonProps {

package/components/ui/input.tsx

@@ -19,6 +19,7 @@
 
 import { forwardRef, useEffect, useRef, useState, type InputHTMLAttributes, type ReactNode } from 'react'
 import { Search, X, Eye, EyeOff } from 'lucide-react'
+import { DebounceBorderOverlay } from './debounce-border-overlay.tsx'
 import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
@@ -50,6 +51,13 @@ const variantClasses = {
   outline: 'bg-transparent',
 }
 
+const SEARCH_AUTO_PROPS = {
+  autoComplete: 'off' as const,
+  autoCorrect: 'off' as const,
+  autoCapitalize: 'off' as const,
+  spellCheck: false as const,
+}
+
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   value,
   onChange,
@@ -115,12 +123,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
     return () => clearTimeout(timerRef.current)
   }, [])
 
-  const searchAutoProps = isSearch ? {
-    autoComplete: 'off' as const,
-    autoCorrect: 'off' as const,
-    autoCapitalize: 'off' as const,
-    spellCheck: false as const,
-  } : {}
+  const searchAutoProps = isSearch ? SEARCH_AUTO_PROPS : undefined
 
   const showClear = isSearch && displayValue && !disabled
 
@@ -181,26 +184,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
           </button>
         )}
         {debounceMs > 0 && 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 ${debounceMs}ms linear forwards`,
-              }}
-            />
-          </svg>
+          <DebounceBorderOverlay debounceKey={debounceKey} durationMs={debounceMs} />
         )}
       </div>
       {typeof error === 'string' && error && (

package/components/ui/label.tsx

@@ -12,25 +12,11 @@
  * - Clickable with hover state
  */
 
+import { type AccentColor } from '../lib/form-colors.ts'
 import { iconMap, type IconName } from './icon-button.tsx'
 import { Tooltip } from './tooltip.tsx'
 
-export type LabelColor =
-  | 'neutral'
-  | 'green'
-  | 'red'
-  | 'blue'
-  | 'yellow'
-  | 'orange'
-  | 'purple'
-  | 'amber'
-  | 'emerald'
-  | 'cyan'
-  | 'indigo'
-  | 'teal'
-  | 'violet'
-  | 'pink'
-  | 'sky'
+export type LabelColor = AccentColor
 
 export interface LabelProps {
   text: string
@@ -94,7 +80,7 @@ const sizeConfig = {
 }
 
 /** Smart capitalize: capitalizes first letter of each word separated by spaces or dashes */
-function smartCapitalize(value: string): string {
+export function smartCapitalize(value: string): string {
   return value.replace(/(^|[\s-])(\w)/g, (_match, separator: string, char: string) => separator + char.toUpperCase())
 }
 

package/components/ui/modal.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Info, AlertTriangle, AlertCircle, Check } from 'lucide-react'
+import { useModalBehavior } from '../hooks/use-modal-behavior.ts'
 import { IconButton, type ActionItem } from './icon-button.tsx'
 import { FormActions } from './form-actions.tsx'
 import type { ReactNode } from 'react'
@@ -42,20 +43,7 @@ interface ModalProps {
 function Modal({ isOpen, onClose, title, children, kind = 'info', size = 'md', hideCloseButton = false, headerActions, testId }: ModalProps) {
   const modalRef = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
-    if (!isOpen) return
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
-    }
-    document.addEventListener('keydown', handleEscape)
-    return () => document.removeEventListener('keydown', handleEscape)
-  }, [isOpen, onClose])
-
-  useEffect(() => {
-    if (!isOpen) return
-    document.body.style.overflow = 'hidden'
-    return () => { document.body.style.overflow = '' }
-  }, [isOpen])
+  useModalBehavior(isOpen, onClose)
 
   if (!isOpen) return null
 

package/components/ui/nav-card.tsx

@@ -1,24 +1,9 @@
 /** Navigation card with icon, description, label, and hover lift effect. */
 
-import {
-  Settings, Puzzle, Zap, Shield, Folder, Code, Database, Globe,
-  Terminal, Star, Bell, User, Users, File, Tag, Sparkles, Search,
-  Lock, Mail, Cloud, Heart, Bookmark, Pin, 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 { Label, type LabelColor } from './label.tsx'
 import { cn } from '../lib/cn.ts'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  settings: Settings, puzzle: Puzzle, zap: Zap, shield: Shield,
-  folder: Folder, code: Code, database: Database, globe: Globe,
-  terminal: Terminal, star: Star, bell: Bell, user: User,
-  users: Users, file: File, tag: Tag, sparkles: Sparkles,
-  search: Search, lock: Lock, mail: Mail, cloud: Cloud,
-  heart: Heart, bookmark: Bookmark, pin: Pin, bot: Bot, plug: Plug,
-}
-
 export interface NavCardProps {
   title: string
   description?: string
@@ -45,7 +30,7 @@ export function NavCard({
   disabled = false,
   className,
 }: NavCardProps) {
-  const Icon = IconComponent ?? (icon ? iconSubset[icon] : undefined)
+  const Icon = IconComponent ?? (icon ? iconMap[icon] : undefined)
 
   return (
     <button

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)
@@ -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,7 +182,7 @@ 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">

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'

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) {

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 ─────────────────────────────────────────────── */

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 {
@@ -67,7 +66,6 @@ export function SettingRow(props: SettingRowProps) {
           disabled={disabled}
           color={props.color}
           size={props.size}
-          variant={props.variant}
         />
       )}
       {props.type === 'select' && (