@toolr/ui-design 0.1.4 → 0.1.6

package/components/ui/input.tsx

@@ -39,10 +39,10 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
 
 const sizeClasses = {
   xss: 'px-1 py-0.5 text-xss',
-  xs: 'px-1.5 py-0.5 text-xs',
-  sm: 'px-2 py-1 text-xs',
-  md: 'px-3 py-1.5 text-sm',
-  lg: 'px-3 py-2 text-sm',
+  xs: 'px-1.5 py-0.5 text-sm',
+  sm: 'px-2 py-1 text-sm',
+  md: 'px-3 py-1.5 text-md',
+  lg: 'px-3 py-2 text-md',
 }
 
 const variantClasses = {
@@ -183,13 +183,13 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
         {debounceMs > 0 && debounceKey > 0 && (
           <svg
             key={debounceKey}
-            className="absolute inset-0 pointer-events-none"
+            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="rgb(52 211 153 / 0.7)"
+              stroke="currentColor"
               strokeWidth="1.5"
               pathLength="100"
               strokeDasharray="100"
@@ -204,7 +204,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
         )}
       </div>
       {typeof error === 'string' && error && (
-        <p className="text-xs text-red-400 mt-1 text-right">{error}</p>
+        <p className="text-sm text-red-400 mt-1 text-right">{error}</p>
       )}
     </div>
   )

package/components/ui/label.tsx

@@ -87,10 +87,10 @@ const progressFillColors: Record<LabelColor, string> = {
 
 const sizeConfig = {
   xss: { height: 14, padding: 'px-1', text: 'text-xss', iconSize: 'w-2 h-2', gap: 'gap-0.5' },
-  xs: { height: 16, padding: 'px-1.5', text: 'text-xss', iconSize: 'w-2.5 h-2.5', gap: 'gap-1' },
-  sm: { height: 18, padding: 'px-1.5', text: 'text-xss', iconSize: 'w-2.5 h-2.5', gap: 'gap-1.5' },
-  md: { height: 20, padding: 'px-1.5', text: 'text-xss', iconSize: 'w-3 h-3', gap: 'gap-1' },
-  lg: { height: 22, padding: 'px-2', text: 'text-xs', iconSize: 'w-3 h-3', gap: 'gap-1' },
+  xs: { height: 16, padding: 'px-1.5', text: 'text-xs', iconSize: 'w-2.5 h-2.5', gap: 'gap-1' },
+  sm: { height: 18, padding: 'px-1.5', text: 'text-xs', iconSize: 'w-2.5 h-2.5', gap: 'gap-1.5' },
+  md: { height: 20, padding: 'px-1.5', text: 'text-xs', iconSize: 'w-3 h-3', gap: 'gap-1' },
+  lg: { height: 22, padding: 'px-2', text: 'text-sm', iconSize: 'w-3 h-3', gap: 'gap-1' },
 }
 
 /** Smart capitalize: capitalizes first letter of each word separated by spaces or dashes */

package/components/ui/layout-tab-bar.tsx

@@ -220,14 +220,14 @@ export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, cla
                 {/* Line 1: Icon + Title */}
                 <div className="flex items-center gap-1.5 w-full transition-[padding] duration-150 group-hover:pr-5">
                   {tab.icon && <span className={cn('shrink-0 inline-flex', isActive ? iconC : 'text-neutral-400')} style={{ width: 14, height: 14 }}>{tab.icon}</span>}
-                  <span className={cn('truncate text-sm font-medium', isActive ? titleC : 'text-neutral-300')}>{tab.title}</span>
+                  <span className={cn('truncate text-md font-medium', isActive ? titleC : 'text-neutral-300')}>{tab.title}</span>
                 </div>
 
                 {/* Line 2: Subtitle with optional icon */}
                 {tab.subtitle && (
                   <div className="flex items-center gap-1 w-full">
                     {tab.subtitleIcon && <span className={cn('shrink-0 inline-flex', isActive ? subIconC : 'text-neutral-500')} style={{ width: 10, height: 10 }}>{tab.subtitleIcon}</span>}
-                    <span className={cn('truncate text-xs', isActive ? subC : 'text-neutral-500')}>{tab.subtitle}</span>
+                    <span className={cn('truncate text-sm', isActive ? subC : 'text-neutral-500')}>{tab.subtitle}</span>
                   </div>
                 )}
 
@@ -272,12 +272,12 @@ export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, cla
             <div className={cn('flex flex-col gap-0.5 px-2.5 py-1.5 rounded-t-lg border-t-2 shadow-xl bg-neutral-800', ghostBorder)}>
               <div className="flex items-center gap-1.5">
                 {t.icon && <span className={cn('shrink-0 inline-flex', ghostIconC)} style={{ width: 14, height: 14 }}>{t.icon}</span>}
-                <span className={cn('text-sm font-medium', ghostTitleC)}>{t.title}</span>
+                <span className={cn('text-md font-medium', ghostTitleC)}>{t.title}</span>
               </div>
               {t.subtitle && (
                 <div className="flex items-center gap-1">
                   {t.subtitleIcon && <span className={cn('shrink-0 inline-flex', ghostSubIconC)} style={{ width: 10, height: 10 }}>{t.subtitleIcon}</span>}
-                  <span className={cn('text-xs', ghostSubC)}>{t.subtitle}</span>
+                  <span className={cn('text-sm', ghostSubC)}>{t.subtitle}</span>
                 </div>
               )}
             </div>

package/components/ui/modal.tsx

@@ -139,11 +139,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,4 +1,4 @@
-/** Navigation card with icon, description, badge, and hover lift effect. */
+/** Navigation card with icon, description, label, and hover lift effect. */
 
 import {
   Settings, Puzzle, Zap, Shield, Folder, Code, Database, Globe,
@@ -7,7 +7,7 @@ import {
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import type { IconName } from './icon-button.tsx'
-import { Badge, type BadgeColor } from './badge.tsx'
+import { Label, type LabelColor } from './label.tsx'
 import { cn } from '../lib/cn.ts'
 
 const iconSubset: Partial<Record<IconName, LucideIcon>> = {
@@ -23,9 +23,11 @@ export interface NavCardProps {
   title: string
   description?: string
   icon?: IconName
+  /** Custom icon component. Takes precedence over icon name. */
+  IconComponent?: React.ComponentType<{ className?: string }>
   iconColor?: string
-  badge?: number | string
-  badgeColor?: BadgeColor
+  label?: { text: string; color: LabelColor; tooltip: { description: string } }
+  stats?: string
   onClick?: () => void
   disabled?: boolean
   className?: string
@@ -35,14 +37,15 @@ export function NavCard({
   title,
   description,
   icon,
+  IconComponent,
   iconColor = '#60a5fa',
-  badge,
-  badgeColor = 'blue',
+  label,
+  stats,
   onClick,
   disabled = false,
   className,
 }: NavCardProps) {
-  const Icon = icon ? iconSubset[icon] : undefined
+  const Icon = IconComponent ?? (icon ? iconSubset[icon] : undefined)
 
   return (
     <button
@@ -56,9 +59,9 @@ export function NavCard({
         className,
       )}
     >
-      {badge !== undefined && (
+      {label && (
         <span className="absolute top-3 right-3">
-          <Badge value={badge} color={badgeColor} size="xs" />
+          <Label text={label.text} color={label.color} size="xs" tooltip={label.tooltip} />
         </span>
       )}
 
@@ -71,10 +74,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-sm text-neutral-600">{stats}</p>
       )}
     </button>
   )

package/components/ui/navigation-bar.tsx

@@ -70,8 +70,8 @@ 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' },
 }
@@ -202,7 +202,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,7 +220,7 @@ 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',
+                              'text-sm truncate',
                               seg.color && colorMap[seg.color] ? colorMap[seg.color].text : 'text-neutral-300',
                             )}>
                               {seg.label}
@@ -231,7 +231,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>
               )}

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

@@ -172,13 +172,13 @@ export function RegistryBrowser({
           {debounceKey != null && debounceKey > 0 && (
             <svg
               key={debounceKey}
-              className="absolute inset-0 pointer-events-none"
+              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="rgb(52 211 153 / 0.7)"
+                stroke="currentColor"
                 strokeWidth="1.5"
                 pathLength="100"
                 strokeDasharray="100"
@@ -231,18 +231,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

@@ -412,7 +412,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 +469,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 +479,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 +581,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 +632,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 +650,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 +692,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/segmented-toggle.tsx

@@ -35,10 +35,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 = {

package/components/ui/select.tsx

@@ -30,10 +30,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>({
@@ -152,7 +152,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

@@ -251,10 +251,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 +291,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

@@ -58,7 +58,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

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

@@ -74,7 +74,7 @@ export function SettingsInfoBox({ children, color = 'neutral', className, testId
       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>
+      <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