@toolr/ui-design 0.1.5 → 0.1.7

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
 
@@ -139,11 +127,11 @@ export function ConfirmModal({
         {message}
         {warning && (
           <div className="mt-3 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
-            <p className="text-amber-300 text-sm font-medium">{warning}</p>
+            <p className="text-amber-300 text-md font-medium">{warning}</p>
             {warningItems && warningItems.length > 0 && (
               <ul className="mt-2 space-y-1">
                 {warningItems.map((item, i) => (
-                  <li key={i} className="text-amber-300/80 text-sm ml-4 list-disc">{item}</li>
+                  <li key={i} className="text-amber-300/80 text-md ml-4 list-disc">{item}</li>
                 ))}
               </ul>
             )}

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
@@ -74,14 +59,14 @@ export function NavCard({
         </div>
       )}
 
-      <h3 className="text-sm font-medium text-neutral-200">{title}</h3>
+      <h3 className="text-md font-medium text-neutral-200">{title}</h3>
 
       {description && (
-        <p className="mt-1 text-xs text-neutral-500 leading-relaxed line-clamp-2">{description}</p>
+        <p className="mt-1 text-sm text-neutral-500 leading-relaxed line-clamp-2">{description}</p>
       )}
 
       {stats && (
-        <p className="mt-2 text-xs text-neutral-600">{stats}</p>
+        <p className="mt-2 text-sm text-neutral-600">{stats}</p>
       )}
     </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
@@ -70,29 +26,12 @@ export interface NavigationBarProps {
 
 const sizeConfig = {
   xss: { text: 'text-xss', segIcon: 'w-2.5 h-2.5', navIcon: 'w-2.5 h-2.5', navBtn: 'w-[18px] h-[18px] rounded-[3px]', px: 'px-1', py: 'py-0.5', sep: 'w-2 h-2', divH: 'h-3' },
-  xs:  { text: 'text-xs', segIcon: 'w-3 h-3', navIcon: 'w-3 h-3', navBtn: 'w-6 h-6 rounded-[5px]', px: 'px-1.5', py: 'py-0.5', sep: 'w-2.5 h-2.5', divH: 'h-3.5' },
-  sm:  { text: 'text-sm', segIcon: 'w-3.5 h-3.5', navIcon: 'w-3.5 h-3.5', navBtn: 'w-7 h-7 rounded-md', px: 'px-2', py: 'py-1', sep: 'w-3 h-3', divH: 'h-4' },
+  xs:  { text: 'text-sm', segIcon: 'w-3 h-3', navIcon: 'w-3 h-3', navBtn: 'w-6 h-6 rounded-[5px]', px: 'px-1.5', py: 'py-0.5', sep: 'w-2.5 h-2.5', divH: 'h-3.5' },
+  sm:  { text: 'text-md', segIcon: 'w-3.5 h-3.5', navIcon: 'w-3.5 h-3.5', navBtn: 'w-7 h-7 rounded-md', px: 'px-2', py: 'py-1', sep: 'w-3 h-3', divH: 'h-4' },
   md:  { text: 'text-base', segIcon: 'w-4 h-4', navIcon: 'w-4 h-4', navBtn: 'w-8 h-8 rounded-md', px: 'px-2.5', py: 'py-1', sep: 'w-3.5 h-3.5', divH: 'h-5' },
   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)
@@ -202,7 +141,7 @@ export function NavigationBar({
               {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="px-3 py-1.5 border-b border-neutral-700/50">
-                    <p className="text-xs font-medium text-neutral-500">History</p>
+                    <p className="text-sm font-medium text-neutral-500">History</p>
                   </div>
                   <div className="max-h-[300px] overflow-y-auto py-1">
                     {historyEntries.map((entry, i) => (
@@ -220,8 +159,8 @@ export function NavigationBar({
                             {segIdx > 0 && <ChevronRight className="w-2.5 h-2.5 text-neutral-600 flex-shrink-0" />}
                             {seg.icon && <SegmentIcon icon={seg.icon} color={seg.color} size="xs" />}
                             <span className={cn(
-                              'text-xs truncate',
-                              seg.color && colorMap[seg.color] ? colorMap[seg.color].text : 'text-neutral-300',
+                              'text-sm truncate',
+                              seg.color && ACCENT_NAV[seg.color as AccentColor] ? ACCENT_NAV[seg.color as AccentColor].text : 'text-neutral-300',
                             )}>
                               {seg.label}
                             </span>
@@ -231,7 +170,7 @@ export function NavigationBar({
                     ))}
                   </div>
                   <div className="px-3 py-1.5 border-t border-neutral-700/50">
-                    <p className="text-xs text-neutral-600">Click to navigate</p>
+                    <p className="text-sm text-neutral-600">Click to navigate</p>
                   </div>
                 </div>
               )}
@@ -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/number-input.tsx

@@ -17,10 +17,10 @@ export interface NumberInputProps {
 
 const SIZE_CONFIG = {
   xss: { wrapper: 'h-[18px]', input: 'px-1 text-xss', chevron: 'w-2.5 h-2.5', stepperW: 'w-4' },
-  xs: { wrapper: 'h-6', input: 'px-1.5 text-xs', chevron: 'w-2.5 h-2.5', stepperW: 'w-5' },
-  sm: { wrapper: 'h-7', input: 'px-2 text-xs', chevron: 'w-3 h-3', stepperW: 'w-5' },
-  md: { wrapper: 'h-8', input: 'px-3 text-sm', chevron: 'w-3 h-3', stepperW: 'w-6' },
-  lg: { wrapper: 'h-9', input: 'px-3 text-sm', chevron: 'w-3.5 h-3.5', stepperW: 'w-7' },
+  xs: { wrapper: 'h-6', input: 'px-1.5 text-sm', chevron: 'w-2.5 h-2.5', stepperW: 'w-5' },
+  sm: { wrapper: 'h-7', input: 'px-2 text-sm', chevron: 'w-3 h-3', stepperW: 'w-5' },
+  md: { wrapper: 'h-8', input: 'px-3 text-md', chevron: 'w-3 h-3', stepperW: 'w-6' },
+  lg: { wrapper: 'h-9', input: 'px-3 text-md', chevron: 'w-3.5 h-3.5', stepperW: 'w-7' },
 }
 
 const VARIANT_CLASSES = {

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>
 
@@ -231,18 +217,18 @@ export function RegistryBrowser({
         ) : error ? (
           <div className="flex flex-col items-center justify-center py-12 text-neutral-500">
             <AlertTriangle className="w-6 h-6 text-amber-400 mb-2" />
-            <p className="text-sm">{error}</p>
+            <p className="text-md">{error}</p>
             {onRetry && (
-              <button onClick={onRetry} className="mt-2 text-xs text-blue-400 hover:underline cursor-pointer">
+              <button onClick={onRetry} className="mt-2 text-sm text-blue-400 hover:underline cursor-pointer">
                 Try again
               </button>
             )}
           </div>
         ) : isEmpty ? (
           <div className="flex flex-col items-center justify-center py-12 text-neutral-500">
-            <p className="text-sm">{emptyMessage}</p>
+            <p className="text-md">{emptyMessage}</p>
             {hasActiveFilters && onResetFilters && (
-              <button onClick={onResetFilters} className="mt-2 text-xs text-blue-400 hover:underline cursor-pointer">
+              <button onClick={onResetFilters} className="mt-2 text-sm text-blue-400 hover:underline cursor-pointer">
                 Reset filters
               </button>
             )}

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}
     />
@@ -412,7 +408,7 @@ export function RegistryCard(props: RegistryCardProps) {
           <Tooltip key={`pkg-${key}`} content={{ description: `${count} ${count === 1 ? label : labelPlural}` }} position="top">
             <span className="flex items-center gap-0.5">
               <Icon className={`w-3 h-3 ${color}`} />
-              <span className="text-xss text-neutral-500">{count}</span>
+              <span className="text-xs text-neutral-500">{count}</span>
             </span>
           </Tooltip>
         )]
@@ -469,7 +465,7 @@ export function RegistryCard(props: RegistryCardProps) {
       ...(props.stars != null && props.stars > 0 ? [(
         <CardClickable key="stars" onClick={() => props.onSortBy?.('stars')}>
           <Tooltip content={{ description: `${props.stars.toLocaleString()} stars \u00b7 Click to sort` }} position="top">
-            <span className="flex items-center gap-1 text-xss text-amber-400/80">
+            <span className="flex items-center gap-1 text-xs text-amber-400/80">
               <Star className="w-3 h-3" />
               {formatCount(props.stars)}
             </span>
@@ -479,7 +475,7 @@ export function RegistryCard(props: RegistryCardProps) {
       ...(props.downloads != null && props.downloads > 0 ? [(
         <CardClickable key="downloads" onClick={() => props.onSortBy?.('downloads')}>
           <Tooltip content={{ description: `${props.downloads.toLocaleString()} downloads \u00b7 Click to sort` }} position="top">
-            <span className="flex items-center gap-1 text-xss text-emerald-400/80">
+            <span className="flex items-center gap-1 text-xs text-emerald-400/80">
               <Download className="w-3 h-3" />
               {formatCount(props.downloads)}
             </span>
@@ -581,7 +577,7 @@ export function RegistryCard(props: RegistryCardProps) {
     if (props.installs != null && props.installs > 0) {
       bottomStats = [(
         <Tooltip key="installs" content={{ description: `${props.installs.toLocaleString()} installs` }} position="top">
-          <span className="flex items-center gap-1 text-xss text-neutral-500">
+          <span className="flex items-center gap-1 text-xs text-neutral-500">
             <Download className="w-3 h-3" />
             {props.installs.toLocaleString()}
           </span>
@@ -632,17 +628,17 @@ export function RegistryCard(props: RegistryCardProps) {
       </div>
 
       {/* Name */}
-      <h3 className="text-sm font-medium text-white">{name}</h3>
+      <h3 className="text-md font-medium text-white">{name}</h3>
 
       {/* Subtitle */}
-      {subtitle && <div className="text-xs text-neutral-400 mb-1.5">{subtitle}</div>}
+      {subtitle && <div className="text-sm text-neutral-400 mb-1.5">{subtitle}</div>}
 
       {/* Description */}
-      {description && <p className="text-xs text-neutral-500 mb-3 flex-grow line-clamp-2">{description}</p>}
+      {description && <p className="text-sm text-neutral-500 mb-3 flex-grow line-clamp-2">{description}</p>}
 
       {/* Error/warning message */}
       {errorMessage && (
-        <p className={`text-xss mb-2 break-all ${flash === 'warning' ? 'text-amber-400' : 'text-red-400'}`}>{errorMessage}</p>
+        <p className={`text-xs mb-2 break-all ${flash === 'warning' ? 'text-amber-400' : 'text-red-400'}`}>{errorMessage}</p>
       )}
 
       {/* Bottom row */}
@@ -650,7 +646,7 @@ export function RegistryCard(props: RegistryCardProps) {
         const dateNode = updatedAt ? (
           <Tooltip content={{ description: onDateClick ? `Last updated ${formatFullDate(updatedAt)} \u00b7 Click to sort by date` : `Last updated ${formatFullDate(updatedAt)}` }} position="top">
             <span
-              className={`flex items-center gap-1 text-xss text-neutral-500 whitespace-nowrap${onDateClick ? ' cursor-pointer hover:brightness-125 transition-all' : ''}`}
+              className={`flex items-center gap-1 text-xs text-neutral-500 whitespace-nowrap${onDateClick ? ' cursor-pointer hover:brightness-125 transition-all' : ''}`}
               onClick={onDateClick ? (e: MouseEvent) => { e.stopPropagation(); onDateClick() } : undefined}
             >
               <Clock className="w-3 h-3" />
@@ -692,13 +688,13 @@ export function RegistryCard(props: RegistryCardProps) {
           <div onClick={(e) => e.stopPropagation()}>
             <div className="fixed inset-0 bg-[var(--background)]/50 z-50 flex items-center justify-center" onClick={() => setShowScopeConfirm(false)}>
               <div className="bg-neutral-800 border border-neutral-700 rounded-lg p-4 max-w-sm" onClick={(e) => e.stopPropagation()}>
-                <h3 className="text-sm font-medium text-neutral-200 mb-2">{ALREADY_AT_USER}</h3>
-                <p className="text-xs text-neutral-400 mb-4">
+                <h3 className="text-md font-medium text-neutral-200 mb-2">{ALREADY_AT_USER}</h3>
+                <p className="text-sm text-neutral-400 mb-4">
                   <strong className="text-neutral-300">{name}</strong> is already installed at user level and available to all projects. Do you also want to install it at project level?
                 </p>
                 <div className="flex justify-end gap-2">
-                  <button type="button" onClick={() => setShowScopeConfirm(false)} className="px-3 py-1.5 text-xs text-neutral-400 hover:text-neutral-200 transition-colors cursor-pointer">Cancel</button>
-                  <button type="button" onClick={() => { setShowScopeConfirm(false); props.onInstall() }} className="px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-500 transition-colors cursor-pointer">Install to project</button>
+                  <button type="button" onClick={() => setShowScopeConfirm(false)} className="px-3 py-1.5 text-sm text-neutral-400 hover:text-neutral-200 transition-colors cursor-pointer">Cancel</button>
+                  <button type="button" onClick={() => { setShowScopeConfirm(false); props.onInstall() }} className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded hover:bg-blue-500 transition-colors cursor-pointer">Install to project</button>
                 </div>
               </div>
             </div>

package/components/ui/registry-detail.tsx

@@ -42,7 +42,7 @@ export interface RegistryDetailProps {
   children?: ReactNode
 }
 
-const MARKDOWN_CLASSES = 'text-sm text-neutral-400 leading-relaxed [&_strong]:text-neutral-200 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:bg-neutral-700/40 [&_code]:border [&_code]:border-neutral-500/40 [&_code]:text-neutral-200 [&_code]:font-mono [&_code]:text-xs [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-neutral-200 [&_h1]:mb-2 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-neutral-200 [&_h2]:mb-2 [&_h3]:text-sm [&_h3]:font-medium [&_h3]:text-neutral-200 [&_h3]:mb-1 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:mb-1 [&_p]:mb-2 [&_pre]:bg-neutral-900 [&_pre]:rounded [&_pre]:p-3 [&_pre]:overflow-x-auto [&_pre]:text-xs'
+const MARKDOWN_CLASSES = 'text-md text-neutral-400 leading-relaxed [&_strong]:text-neutral-200 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:bg-neutral-700/40 [&_code]:border [&_code]:border-neutral-500/40 [&_code]:text-neutral-200 [&_code]:font-mono [&_code]:text-sm [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-neutral-200 [&_h1]:mb-2 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-neutral-200 [&_h2]:mb-2 [&_h3]:text-md [&_h3]:font-medium [&_h3]:text-neutral-200 [&_h3]:mb-1 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:mb-1 [&_p]:mb-2 [&_pre]:bg-neutral-900 [&_pre]:rounded [&_pre]:p-3 [&_pre]:overflow-x-auto [&_pre]:text-sm'
 
 // ── CollapsibleSection ────────────────────────────────────────────────────────
 
@@ -78,7 +78,7 @@ function CollapsibleTextSection({ children, header }: { children: string; header
       {(header || overflows) && (
         <div className="flex items-center justify-between mb-2">
           {header && (
-            <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider">{header}</h3>
+            <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider">{header}</h3>
           )}
           {overflows && (
             <IconButton
@@ -117,12 +117,12 @@ function CompatibleWithSection({ tools }: { tools: string[] }) {
 
   return (
     <div>
-      <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-3">Compatible with</h3>
+      <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider mb-3">Compatible with</h3>
       <div className="flex items-start gap-3">
         {tools.map((tool) => (
           <div key={tool} className="flex flex-col items-center gap-1">
             <AiToolIcon tool={tool} size={18} />
-            <span className="text-xss text-neutral-400">{AI_TOOL_NAMES[tool as AiToolKey] ?? tool}</span>
+            <span className="text-xs text-neutral-400">{AI_TOOL_NAMES[tool as AiToolKey] ?? tool}</span>
           </div>
         ))}
       </div>
@@ -181,8 +181,8 @@ export function RegistryDetail({
         {/* Description */}
         {description && (
           <div>
-            <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2">Description</h3>
-            <p className="text-sm text-neutral-400 leading-relaxed">{description}</p>
+            <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider mb-2">Description</h3>
+            <p className="text-md text-neutral-400 leading-relaxed">{description}</p>
           </div>
         )}
 

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'
@@ -35,10 +36,10 @@ const ICON_SIZE_CLASSES = {
 /** Text label button sizes — horizontal padding instead of fixed width */
 const TEXT_SIZE_CLASSES = {
   xss: 'h-[18px] px-1.5 text-xss',
-  xs: 'h-6 px-2 text-xss',
-  sm: 'h-7 px-2.5 text-xs',
-  md: 'h-8 px-3 text-xs',
-  lg: 'h-9 px-3.5 text-sm',
+  xs: 'h-6 px-2 text-xs',
+  sm: 'h-7 px-2.5 text-sm',
+  md: 'h-8 px-3 text-sm',
+  lg: 'h-9 px-3.5 text-md',
 }
 
 const ROUNDING_CLASSES = {