@toolr/ui-design 0.1.5 → 0.1.6

package/components/ui/bottom-panel-header.tsx

@@ -70,7 +70,7 @@ type LayoutMode = 'full' | 'compact-banner' | 'compact-all'
 
 // Width estimates for layout calculation
 const TAB_ICON_PADDING = 56    // icon(16) + gap(8) + px-4(32)
-const CHAR_WIDTH = 7.5         // approximate char width at text-sm
+const CHAR_WIDTH = 7.5         // approximate char width at text-md
 const COUNT_BADGE_WIDTH = 40   // badge with count
 const BANNER_FULL_WIDTH = 200  // icon + text + padding
 const BANNER_COMPACT_WIDTH = 36 // icon only
@@ -163,7 +163,7 @@ export function BottomPanelHeader<T extends string = string>({
               key={tab.id}
               onClick={() => onTabChange(tab.id)}
               data-testid={tab.testId}
-              className={`h-[41px] flex items-center justify-center gap-2 ${compactTabs ? 'px-3' : 'px-4'} text-sm border-b-2 transition-colors cursor-pointer ${baseClasses}`}
+              className={`h-[41px] flex items-center justify-center gap-2 ${compactTabs ? 'px-3' : 'px-4'} text-md border-b-2 transition-colors cursor-pointer ${baseClasses}`}
             >
               {compactTabs ? (
                 <span className="relative flex items-center justify-center w-[18px] h-[18px] flex-shrink-0">
@@ -209,12 +209,12 @@ export function BottomPanelHeader<T extends string = string>({
         {statusBanner && (
           compactBanner ? (
             <Tooltip content={{ description: statusBanner.message }} position="bottom">
-              <div className={`flex items-center px-2 py-1.5 ${bannerStyles} rounded text-xs`}>
+              <div className={`flex items-center px-2 py-1.5 ${bannerStyles} rounded text-sm`}>
                 <RefreshCw className="w-3 h-3 flex-shrink-0" />
               </div>
             </Tooltip>
           ) : (
-            <div className={`flex items-center gap-2 px-2.5 py-1.5 ${bannerStyles} rounded text-xs max-w-full`}>
+            <div className={`flex items-center gap-2 px-2.5 py-1.5 ${bannerStyles} rounded text-sm max-w-full`}>
               <RefreshCw className="w-3 h-3 flex-shrink-0" />
               <span className="truncate">{statusBanner.message}</span>
             </div>

package/components/ui/breadcrumb.tsx

@@ -67,8 +67,8 @@ export interface BreadcrumbProps {
 
 const sizeConfig = {
   xss: { text: 'text-xss', icon: 'w-2.5 h-2.5', px: 'px-1', py: 'py-0.5', gap: 'gap-0.5', sep: 'w-2 h-2' },
-  xs: { text: 'text-xs', icon: 'w-3 h-3', px: 'px-1.5', py: 'py-0.5', gap: 'gap-1', sep: 'w-2.5 h-2.5' },
-  sm: { text: 'text-sm', icon: 'w-3.5 h-3.5', px: 'px-2', py: 'py-1', gap: 'gap-1.5', sep: 'w-3 h-3' },
+  xs: { text: 'text-sm', icon: 'w-3 h-3', px: 'px-1.5', py: 'py-0.5', gap: 'gap-1', sep: 'w-2.5 h-2.5' },
+  sm: { text: 'text-md', icon: 'w-3.5 h-3.5', px: 'px-2', py: 'py-1', gap: 'gap-1.5', sep: 'w-3 h-3' },
   md: { text: 'text-base', icon: 'w-4 h-4', px: 'px-2.5', py: 'py-1', gap: 'gap-1.5', sep: 'w-3.5 h-3.5' },
   lg: { text: 'text-lg', icon: 'w-5 h-5', px: 'px-3', py: 'py-1.5', gap: 'gap-2', sep: 'w-4 h-4' },
 }

package/components/ui/collapsible-section.tsx

@@ -87,7 +87,7 @@ export function CollapsibleSection({
             <Icon className="w-3.5 h-3.5" />
           </span>
         )}
-        <span className="text-sm font-medium text-neutral-200">{title}</span>
+        <span className="text-md font-medium text-neutral-200">{title}</span>
         {badge !== undefined && (
           <span className="ml-auto">
             <Badge value={badge} color={badgeColor} size="xss" />

package/components/ui/cookie-consent.tsx

@@ -42,26 +42,26 @@ export function CookieConsent({
     <div className="fixed bottom-0 left-0 right-0 z-50 p-4 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-700/50">
       <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4">
         <div className="flex-grow">
-          <p className="text-sm text-neutral-200 mb-1">{heading}</p>
-          <p className="text-xs text-neutral-400">{description}</p>
+          <p className="text-md text-neutral-200 mb-1">{heading}</p>
+          <p className="text-sm text-neutral-400">{description}</p>
         </div>
 
         <div className="flex items-center gap-2 flex-shrink-0">
           <button
             onClick={() => handleConsent('declined')}
-            className="px-3 py-1.5 text-sm h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors"
+            className="px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors"
           >
             Decline
           </button>
           <button
             onClick={() => handleConsent('essential')}
-            className="px-3 py-1.5 text-sm h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors"
+            className="px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors"
           >
             Essential Only
           </button>
           <button
             onClick={() => handleConsent('accepted')}
-            className={`px-3 py-1.5 text-sm h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-white border transition-colors bg-${accentColor}-600 border-${accentColor}-500 hover:bg-${accentColor}-500`}
+            className={`px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-white border transition-colors bg-${accentColor}-600 border-${accentColor}-500 hover:bg-${accentColor}-500`}
           >
             Accept All
           </button>

package/components/ui/detail-section.tsx

@@ -50,13 +50,13 @@ export function DetailSection({ title, icon, rows, className }: DetailSectionPro
     <div className={className}>
       <div className="flex items-center gap-2 mb-3">
         {Icon && <Icon className="w-4 h-4 text-neutral-500" />}
-        <span className="text-sm font-medium text-neutral-400">{title}</span>
+        <span className="text-md font-medium text-neutral-400">{title}</span>
       </div>
       <div className="space-y-2">
         {rows.map((row) => (
           <div key={row.label} className="flex items-start gap-3">
-            <span className="text-xs text-neutral-500 w-24 shrink-0">{row.label}:</span>
-            <span className={cn('text-xs text-neutral-400', row.mono && 'font-mono')}>
+            <span className="text-sm text-neutral-500 w-24 shrink-0">{row.label}:</span>
+            <span className={cn('text-sm text-neutral-400', row.mono && 'font-mono')}>
               {row.value}
             </span>
           </div>

package/components/ui/editor-placeholder-card.tsx

@@ -102,17 +102,17 @@ export function EditorPlaceholderCard({
       <div className="flex items-start justify-between gap-2">
         <div className="flex-1 min-w-0">
           {/* Placeholder name with {{ }} */}
-          <code className={`text-xs font-mono px-1.5 py-0.5 rounded ${colors.name} ${colors.nameBg}`}>
+          <code className={`text-sm font-mono px-1.5 py-0.5 rounded ${colors.name} ${colors.nameBg}`}>
             {'{{' + name + '}}'}
           </code>
           {/* Required badge */}
           {required && (
-            <span className="ml-2 inline-block px-1.5 py-0.5 text-xs font-semibold uppercase bg-red-500/15 text-red-400 border border-red-500/30 rounded">
+            <span className="ml-2 inline-block px-1.5 py-0.5 text-sm font-semibold uppercase bg-red-500/15 text-red-400 border border-red-500/30 rounded">
               Required
             </span>
           )}
           {/* Description */}
-          <p className="text-xs text-neutral-500 mt-1.5 line-clamp-2">{description}</p>
+          <p className="text-sm text-neutral-500 mt-1.5 line-clamp-2">{description}</p>
         </div>
 
         {/* Actions (copy for templates, edit/delete for settings) */}
@@ -146,7 +146,7 @@ export function EditorPlaceholderCard({
         <div className="mt-2">
           {hideValue ? (
             <>
-              <span className="text-xs text-neutral-500 font-medium">{valueLabel}</span>
+              <span className="text-sm text-neutral-500 font-medium">{valueLabel}</span>
               <div className="mt-1.5">
                 <Input
                   type="password"
@@ -163,7 +163,7 @@ export function EditorPlaceholderCard({
           ) : (
             <>
               <div className="flex items-center justify-between">
-                <span className="text-xs text-neutral-500 font-medium">{valueLabel}</span>
+                <span className="text-sm text-neutral-500 font-medium">{valueLabel}</span>
                 {(isOverflowing || isExpanded) && (
                   <IconButton
                     icon={isExpanded ? 'chevron-up' : 'chevron-down'}
@@ -175,7 +175,7 @@ export function EditorPlaceholderCard({
               </div>
               <div
                 ref={valueRef}
-                className={`mt-1.5 px-2 py-1.5 bg-neutral-800/50 rounded text-xs text-neutral-400 font-mono ${
+                className={`mt-1.5 px-2 py-1.5 bg-neutral-800/50 rounded text-sm text-neutral-400 font-mono ${
                   isExpanded
                     ? 'whitespace-pre-wrap break-all max-h-[190px] overflow-y-auto'
                     : 'truncate'
@@ -190,7 +190,7 @@ export function EditorPlaceholderCard({
 
       {/* No value hint */}
       {!hasValue && (
-        <p className="mt-1.5 text-xs text-neutral-600 italic">No value set - add one in Settings</p>
+        <p className="mt-1.5 text-sm text-neutral-600 italic">No value set - add one in Settings</p>
       )}
     </div>
   )

package/components/ui/editor-toolbar.tsx

@@ -4,6 +4,10 @@ import { Label } from './label.tsx'
 import { ConfirmModal } from './modal.tsx'
 
 export interface EditorToolbarProps {
+  /** Optional title displayed in the toolbar */
+  title?: string
+  /** Optional description displayed below the title */
+  description?: string
   /** Whether content has unsaved changes */
   isDirty: boolean
   /** Whether save operation is in progress */
@@ -30,6 +34,8 @@ export interface EditorToolbarProps {
 }
 
 export function EditorToolbar({
+  title,
+  description,
   isDirty,
   isSaving = false,
   onSave,
@@ -66,6 +72,12 @@ export function EditorToolbar({
       <div className="flex items-center justify-between px-4 py-1.5 bg-neutral-900 border-b border-neutral-800">
         {/* Left side */}
         <div className="flex items-center gap-2">
+          {(title || description) && (
+            <div className="flex flex-col mr-2">
+              {title && <span className="text-sm font-medium text-neutral-200">{title}</span>}
+              {description && <span className="text-xs text-neutral-500">{description}</span>}
+            </div>
+          )}
           {leftActions?.map((a, i) => <IconButton key={i} {...a} />)}
         </div>
 

package/components/ui/execution-details-panel.tsx

@@ -40,7 +40,7 @@ export function ExecutionDetailsPanel({
       {/* Header */}
       <div className="flex items-center gap-2">
         <Info className="w-4 h-4 text-neutral-500" />
-        <span className="font-medium text-neutral-400 text-sm">Execution Details</span>
+        <span className="font-medium text-neutral-400 text-md">Execution Details</span>
       </div>
 
       {/* Direct edits toggle */}
@@ -57,8 +57,8 @@ export function ExecutionDetailsPanel({
             />
           </div>
           <div>
-            <span className="text-neutral-300 text-sm">Allow direct file edits</span>
-            <p className="text-neutral-500 text-xs mt-0.5">
+            <span className="text-neutral-300 text-md">Allow direct file edits</span>
+            <p className="text-neutral-500 text-sm mt-0.5">
               {allowDirectEdits
                 ? 'AI will modify files directly. Changes saved immediately.'
                 : 'Changes will be shown in editor for review.'}
@@ -72,7 +72,7 @@ export function ExecutionDetailsPanel({
         <div className="rounded border border-red-500/50 bg-red-500/10 p-2">
           <div className="flex items-start gap-2">
             <AlertTriangle className="h-4 w-4 text-red-400 shrink-0 mt-0.5" />
-            <p className="text-red-300 text-xs">{warningMessage}</p>
+            <p className="text-red-300 text-sm">{warningMessage}</p>
           </div>
         </div>
       )}
@@ -82,8 +82,8 @@ export function ExecutionDetailsPanel({
         <div className="space-y-2">
           {details.map((row) => (
             <div key={row.label} className="flex items-start gap-3">
-              <span className="text-neutral-500 text-xs w-24 shrink-0">{row.label}:</span>
-              <span className={cn('text-neutral-300 text-xs', row.mono && 'font-mono')}>{row.value}</span>
+              <span className="text-neutral-500 text-sm w-24 shrink-0">{row.label}:</span>
+              <span className={cn('text-neutral-300 text-sm', row.mono && 'font-mono')}>{row.value}</span>
             </div>
           ))}
         </div>

package/components/ui/extension-list-card.tsx

@@ -81,11 +81,11 @@ export const ExtensionListCard = memo(function ExtensionListCard({
           <Icon className={cn('w-5 h-5 shrink-0', iconColor)} />
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2 flex-wrap">
-              <span className={cn('text-sm font-medium', titleClassName)}>{title}</span>
+              <span className={cn('text-md font-medium', titleClassName)}>{title}</span>
               {badges}
             </div>
             {description && (
-              <div className={cn('text-xs text-neutral-500 mt-1', !isHovered && 'line-clamp-2')}>{description}</div>
+              <div className={cn('text-sm text-neutral-500 mt-1', !isHovered && 'line-clamp-2')}>{description}</div>
             )}
           </div>
         </div>
@@ -96,7 +96,7 @@ export const ExtensionListCard = memo(function ExtensionListCard({
         )}
       </div>
       {metadata != null && (
-        <div className="flex items-center justify-between mt-2 ml-8 mr-2 text-xs text-neutral-500">
+        <div className="flex items-center justify-between mt-2 ml-8 mr-2 text-sm text-neutral-500">
           {typeof metadata === 'function' ? metadata(isHovered) : metadata}
         </div>
       )}

package/components/ui/file-structure-section.tsx

@@ -89,7 +89,7 @@ function renderMarkdownContent(content: string) {
     while (i < lines.length && lines[i] !== '---') { fmLines.push(lines[i]); i++ }
     i++ // skip closing ---
     nodes.push(
-      <div key="fm" className="mb-3 font-mono text-xss text-neutral-500 border-l-2 border-neutral-700 pl-2 py-0.5">
+      <div key="fm" className="mb-3 font-mono text-xs text-neutral-500 border-l-2 border-neutral-700 pl-2 py-0.5">
         <div className="text-neutral-600">---</div>
         {fmLines.map((l, j) => <div key={j}>{l}</div>)}
         <div className="text-neutral-600">---</div>
@@ -104,20 +104,20 @@ function renderMarkdownContent(content: string) {
       i++
       while (i < lines.length && !lines[i].startsWith('```')) { codeLines.push(lines[i]); i++ }
       nodes.push(
-        <pre key={i} className="mb-2 p-2 bg-[var(--background)]/30 rounded text-xss font-mono text-neutral-300 overflow-x-auto">
+        <pre key={i} className="mb-2 p-2 bg-[var(--background)]/30 rounded text-xs font-mono text-neutral-300 overflow-x-auto">
           {codeLines.join('\n')}
         </pre>
       )
     } else if (line.startsWith('### ')) {
-      nodes.push(<h3 key={i} className="text-xss font-semibold text-neutral-300 mt-2 mb-0.5">{line.slice(4)}</h3>)
+      nodes.push(<h3 key={i} className="text-xs font-semibold text-neutral-300 mt-2 mb-0.5">{line.slice(4)}</h3>)
     } else if (line.startsWith('## ')) {
-      nodes.push(<h2 key={i} className="text-xs font-semibold text-neutral-200 mt-2.5 mb-1">{line.slice(3)}</h2>)
+      nodes.push(<h2 key={i} className="text-sm font-semibold text-neutral-200 mt-2.5 mb-1">{line.slice(3)}</h2>)
     } else if (line.startsWith('# ')) {
-      nodes.push(<h1 key={i} className="text-sm font-semibold text-neutral-100 mb-1.5">{line.slice(2)}</h1>)
+      nodes.push(<h1 key={i} className="text-md font-semibold text-neutral-100 mb-1.5">{line.slice(2)}</h1>)
     } else if (line === '' || line === '\r') {
       nodes.push(<div key={i} className="h-1.5" />)
     } else {
-      nodes.push(<p key={i} className="text-xss text-neutral-400 leading-relaxed">{line}</p>)
+      nodes.push(<p key={i} className="text-xs text-neutral-400 leading-relaxed">{line}</p>)
     }
     i++
   }
@@ -302,8 +302,8 @@ export function FileStructureSection({
   if (isLoading) {
     return (
       <div>
-        <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
-        <div className="flex items-center gap-2 text-xs text-neutral-500 py-4">
+        <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
+        <div className="flex items-center gap-2 text-sm text-neutral-500 py-4">
           <Loader2 className="w-3.5 h-3.5 animate-spin" />
           Loading file tree...
         </div>
@@ -318,8 +318,8 @@ export function FileStructureSection({
   if (error) {
     return (
       <div>
-        <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
-        <div className="flex items-center gap-2 text-xs text-red-400 py-4">
+        <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
+        <div className="flex items-center gap-2 text-sm text-red-400 py-4">
           <AlertCircle className="w-3.5 h-3.5 shrink-0" />
           {error}
         </div>
@@ -336,7 +336,7 @@ export function FileStructureSection({
     if (mode === 'format') return renderMarkdownContent(content)
     if (mode === 'language' && renderPreview) return renderPreview(content, filePath, resolvedLanguage)
     return (
-      <pre className="p-3 text-xs font-mono text-white leading-relaxed whitespace-pre-wrap">
+      <pre className="p-3 text-sm font-mono text-white leading-relaxed whitespace-pre-wrap">
         <code>{content}</code>
       </pre>
     )
@@ -346,7 +346,7 @@ export function FileStructureSection({
     <div className={`flex flex-col bg-neutral-900 border ${ACCENT_BORDER[accentColor]} rounded-lg overflow-hidden ${variant === 'split' && effectiveFilePath ? 'w-1/3 shrink-0' : 'flex-1'}`}>
       <div className={`flex items-center px-3 py-2 border-b ${ACCENT_BORDER[accentColor]} shrink-0 gap-2 min-w-0`}>
         <FolderTree className={`w-3.5 h-3.5 shrink-0 ${ACCENT_ICON[accentColor]}`} />
-        <span className="text-xs text-neutral-200 truncate flex-1">Files</span>
+        <span className="text-sm text-neutral-200 truncate flex-1">Files</span>
         <CollapseButton
           collapsed={allCollapsed}
           onToggle={() => setExpandedPaths(allCollapsed ? new Set(allDirPaths) : new Set())}
@@ -371,7 +371,7 @@ export function FileStructureSection({
     <div className={`flex-1 flex flex-col bg-neutral-900 border ${ACCENT_BORDER[accentColor]} rounded-lg overflow-hidden`}>
       <div className={`flex items-center px-3 py-2 border-b ${ACCENT_BORDER[accentColor]} shrink-0 gap-2 min-w-0`}>
         <FileCode className={`w-3.5 h-3.5 shrink-0 ${ACCENT_ICON[accentColor]}`} />
-        <span className="text-xs text-neutral-200 truncate flex-1">{selectedFileName}</span>
+        <span className="text-sm text-neutral-200 truncate flex-1">{selectedFileName}</span>
         {showToggle && (
           <SegmentedToggle
             options={toggleOptions}
@@ -384,12 +384,12 @@ export function FileStructureSection({
       </div>
       <div className="flex-1 overflow-auto">
         {fileIsLoading ? (
-          <div className="flex items-center gap-2 text-xs text-neutral-500 p-3">
+          <div className="flex items-center gap-2 text-sm text-neutral-500 p-3">
             <Loader2 className="w-3.5 h-3.5 animate-spin" />
             Loading...
           </div>
         ) : fileError ? (
-          <p className="text-xs text-red-400 p-3">{fileError}</p>
+          <p className="text-sm text-red-400 p-3">{fileError}</p>
         ) : fileContent !== null ? (
           renderContent(fileContent, effectiveFilePath)
         ) : null}
@@ -409,7 +409,7 @@ export function FileStructureSection({
   if (variant === 'list') {
     return (
       <div ref={sectionRef}>
-        <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
+        <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
         <div className="space-y-3">
           {treePanel}
           {previewPanel && (
@@ -427,7 +427,7 @@ export function FileStructureSection({
 
   return (
     <div ref={sectionRef}>
-      <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
+      <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
       <div className="flex gap-3" style={{ height: `${effectiveHeight}px` }}>
         {treePanel}
         {previewPanel}

package/components/ui/file-tree.tsx

@@ -27,6 +27,7 @@ const ACCENT_SELECTED: Record<string, string> = {
   emerald: 'bg-emerald-400/20 text-neutral-200',
   teal: 'bg-teal-400/20 text-neutral-200',
   sky: 'bg-sky-400/20 text-neutral-200',
+  violet: 'bg-violet-400/20 text-neutral-200',
 }
 
 const ACCENT_ICON: Record<string, string> = {
@@ -39,6 +40,7 @@ const ACCENT_ICON: Record<string, string> = {
   emerald: 'text-emerald-400',
   teal: 'text-teal-400',
   sky: 'text-sky-400',
+  violet: 'text-violet-400',
 }
 
 function nodeHasFiles(node: FileTreeNode): boolean {
@@ -120,7 +122,7 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
   const isDir = node.type === 'directory'
   const isSelected = !isDir && selectedPath === path
   const expanded = isDir && expandedPaths.has(path)
-  const base = 'flex items-center gap-1.5 py-0.5 px-1 rounded text-xs transition-colors overflow-hidden whitespace-nowrap'
+  const base = 'flex items-center gap-1.5 py-0.5 px-1 rounded text-sm transition-colors overflow-hidden whitespace-nowrap'
   const selectedClass = ACCENT_SELECTED[accentColor] ?? ACCENT_SELECTED.blue
   const iconColorClass = ACCENT_ICON[accentColor] ?? ACCENT_ICON.blue
   const rowClass = isSelected

package/components/ui/files-panel.tsx

@@ -6,6 +6,19 @@ import type { LucideIcon } from 'lucide-react'
 import type { IconName } from './icon-button.tsx'
 import { cn } from '../lib/cn.ts'
 
+const ACCENT_SELECTED: Record<string, string> = {
+  blue: 'bg-blue-400/15 text-blue-400',
+  purple: 'bg-purple-400/15 text-purple-400',
+  orange: 'bg-orange-400/15 text-orange-400',
+  green: 'bg-green-400/15 text-green-400',
+  pink: 'bg-pink-400/15 text-pink-400',
+  amber: 'bg-amber-400/15 text-amber-400',
+  emerald: 'bg-emerald-400/15 text-emerald-400',
+  teal: 'bg-teal-400/15 text-teal-400',
+  sky: 'bg-sky-400/15 text-sky-400',
+  violet: 'bg-violet-400/15 text-violet-400',
+}
+
 const iconSubset: Partial<Record<IconName, LucideIcon>> = {
   folder: Folder,
   file: File,
@@ -48,6 +61,7 @@ export interface FilesPanelProps {
   onAction?: (action: string, path: string) => void
   showSearch?: boolean
   className?: string
+  accentColor?: string
 }
 
 function collectAllFolderPaths(entries: FileEntry[]): Set<string> {
@@ -110,9 +124,10 @@ interface FileNodeProps {
   onToggleExpand: (path: string) => void
   onSelect?: (path: string) => void
   onAction?: (action: string, path: string) => void
+  accentColor: string
 }
 
-function FileNode({ entry, depth, selectedPath, expandedPaths, onToggleExpand, onSelect, onAction }: FileNodeProps) {
+function FileNode({ entry, depth, selectedPath, expandedPaths, onToggleExpand, onSelect, onAction, accentColor }: FileNodeProps) {
   const isFolder = entry.type === 'folder'
   const isExpanded = isFolder && expandedPaths.has(entry.path)
   const isSelected = !isFolder && selectedPath === entry.path
@@ -124,9 +139,9 @@ function FileNode({ entry, depth, selectedPath, expandedPaths, onToggleExpand, o
         type="button"
         onClick={isFolder ? () => onToggleExpand(entry.path) : () => onSelect?.(entry.path)}
         className={cn(
-          'group flex items-center gap-1.5 w-full py-1 px-2 rounded text-xs transition-colors cursor-pointer',
+          'group flex items-center gap-1.5 w-full py-1 px-2 rounded text-sm transition-colors cursor-pointer',
           isSelected
-            ? 'bg-blue-400/15 text-blue-400'
+            ? ACCENT_SELECTED[accentColor] ?? ACCENT_SELECTED.blue
             : 'text-neutral-400 hover:bg-neutral-700/40 hover:text-neutral-200',
         )}
         style={{ paddingLeft: `${depth * 16 + 8}px` }}
@@ -144,7 +159,7 @@ function FileNode({ entry, depth, selectedPath, expandedPaths, onToggleExpand, o
         />
         <span className="truncate">{entry.name}</span>
         {entry.badge && (
-          <span className="ml-auto shrink-0 px-1.5 py-0.5 text-xss rounded bg-neutral-700 text-neutral-500">
+          <span className="ml-auto shrink-0 px-1.5 py-0.5 text-xs rounded bg-neutral-700 text-neutral-500">
             {entry.badge}
           </span>
         )}
@@ -172,6 +187,7 @@ function FileNode({ entry, depth, selectedPath, expandedPaths, onToggleExpand, o
               onToggleExpand={onToggleExpand}
               onSelect={onSelect}
               onAction={onAction}
+              accentColor={accentColor}
             />
           ))}
         </ul>
@@ -187,6 +203,7 @@ export function FilesPanel({
   onAction,
   showSearch = false,
   className,
+  accentColor = 'blue',
 }: FilesPanelProps) {
   const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => collectAllFolderPaths(files))
   const [searchQuery, setSearchQuery] = useState('')
@@ -210,19 +227,19 @@ export function FilesPanel({
   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">Files</span>
-        <span className="text-xss text-neutral-500">{fileCount} files</span>
+        <span className="text-xs font-semibold uppercase tracking-wider text-neutral-500">Files</span>
+        <span className="text-xs text-neutral-500">{fileCount} files</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 files..."
               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>
@@ -239,11 +256,12 @@ export function FilesPanel({
               onToggleExpand={handleToggleExpand}
               onSelect={onSelect}
               onAction={onAction}
+              accentColor={accentColor}
             />
           ))}
         </ul>
         {displayedFiles.length === 0 && (
-          <p className="text-xss text-neutral-500 text-center py-4">No files found</p>
+          <p className="text-xs text-neutral-500 text-center py-4">No files found</p>
         )}
       </div>
     </div>

package/components/ui/filter-dropdown.tsx

@@ -89,7 +89,7 @@ export function FilterDropdown({
     <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 ${
+        className={`flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-sm transition-colors cursor-pointer ${
           isActive
             ? `${clearable ? 'rounded-r-none border-r-0' : ''} ${FORM_COLORS[color].border} text-neutral-200 ${FORM_COLORS[color].hover}`
             : isOpen
@@ -124,7 +124,7 @@ export function FilterDropdown({
                   onChange={(e) => setSearch(e.target.value)}
                   onKeyDown={handleKeyDown}
                   placeholder="Search..."
-                  className={`w-full pl-6 pr-2 py-1 text-xs bg-[var(--popover)] border border-neutral-600 rounded text-neutral-200 placeholder-neutral-500 outline-none ${FORM_COLORS[color].focus}`}
+                  className={`w-full pl-6 pr-2 py-1 text-sm bg-[var(--popover)] border border-neutral-600 rounded text-neutral-200 placeholder-neutral-500 outline-none ${FORM_COLORS[color].focus}`}
                 />
               </div>
             </div>
@@ -133,7 +133,7 @@ export function FilterDropdown({
             <button
               data-idx={0}
               onClick={() => handleSelect('all')}
-              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 ${
                 highlightIdx === 0
                   ? `${FORM_COLORS[color].selectedBg} text-neutral-200`
                   : !isActive ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
@@ -152,7 +152,7 @@ export function FilterDropdown({
                 key={opt.value}
                 data-idx={idx}
                 onClick={() => handleSelect(opt.value)}
-                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}`
@@ -164,7 +164,7 @@ export function FilterDropdown({
             )
           })}
           {showSearch && search && filtered.length === 0 && (
-            <div className="px-3 py-2 text-xs text-neutral-500">No matches</div>
+            <div className="px-3 py-2 text-sm text-neutral-500">No matches</div>
           )}
         </div>
       )}

package/components/ui/form-actions.tsx

@@ -83,7 +83,7 @@ export function FormActions({
               tooltip={{ description: backTooltip }}
             />
           )}
-          {statusText && <span className="text-xs text-neutral-500">{statusText}</span>}
+          {statusText && <span className="text-sm text-neutral-500">{statusText}</span>}
         </div>
       )}
       <div className="flex items-center gap-2">

package/components/ui/frontmatter-form-header.tsx

@@ -39,16 +39,16 @@ export function FrontmatterFormHeader({
             collapsed ? '' : 'rotate-90'
           }`}
         />
-        <span className="text-xs font-medium text-neutral-400 uppercase tracking-wide">
+        <span className="text-sm font-medium text-neutral-400 uppercase tracking-wide">
           Configuration
         </span>
         {collapsed && hasFm && (
-          <span className="text-xss text-neutral-500 font-mono ml-2 truncate">
+          <span className="text-xs text-neutral-500 font-mono ml-2 truncate">
             {renderSummary()}
           </span>
         )}
         {collapsed && !hasFm && (
-          <span className="text-xss text-neutral-600 ml-2">No frontmatter</span>
+          <span className="text-xs text-neutral-600 ml-2">No frontmatter</span>
         )}
       </button>
 
@@ -64,7 +64,7 @@ export function FrontmatterFormHeader({
                 disabled={readOnly}
               />
               <span
-                className="text-xs text-neutral-400 cursor-pointer"
+                className="text-sm text-neutral-400 cursor-pointer"
                 onClick={() => !readOnly && onFrontmatterToggle(!hasFm)}
               >
                 Add YAML frontmatter to file

package/components/ui/icon-button.tsx

@@ -323,7 +323,7 @@ export function IconButton({
       </span>
       {badge !== undefined && (
         <span
-          className={`absolute -top-1 -right-1 min-w-[18px] h-[18px] flex items-center justify-center px-1 text-xs font-bold text-white rounded-full ${badgeColorClasses[badgeColor]}`}
+          className={`absolute -top-1 -right-1 min-w-[18px] h-[18px] flex items-center justify-center px-1 text-sm font-bold text-white rounded-full ${badgeColorClasses[badgeColor]}`}
         >
           {typeof badge === 'number' && badge > 99 ? '99+' : badge}
         </span>

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