@toolr/ui-design 0.1.5 → 0.1.6

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

@@ -74,14 +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-xs text-neutral-600">{stats}</p>
+        <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

@@ -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

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

@@ -63,15 +63,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 +85,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

@@ -55,8 +55,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' },
 }

package/components/ui/tooltip.tsx

@@ -271,9 +271,9 @@ export function Tooltip({
       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>
   )