@toolr/ui-design 0.1.5 → 0.1.7

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

@@ -1,19 +1,11 @@
 import { useState, useEffect, useCallback, useRef, useMemo, type ReactNode } from 'react'
 import { FileCode, FolderTree, Loader2, AlertCircle, AlignLeft, Code2, Type } from 'lucide-react'
-import { CollapseButton, type IconButtonColor } from './icon-button.tsx'
+import { type AccentColor, ACCENT_ICON } from '../lib/form-colors.ts'
+import { CollapseButton } from './icon-button.tsx'
 import { SegmentedToggle } from './segmented-toggle.tsx'
 import { FileTree, collectDirPaths, type FileTreeNode } from './file-tree.tsx'
 
 export type PreviewMode = 'format' | 'language' | 'plain'
-export type AccentColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
-
-const ACCENT_ICON: Record<AccentColor, string> = {
-  blue: 'text-blue-400', green: 'text-green-400', red: 'text-red-400',
-  orange: 'text-orange-400', cyan: 'text-cyan-400', yellow: 'text-yellow-400',
-  purple: 'text-purple-400', indigo: 'text-indigo-400', emerald: 'text-emerald-400',
-  amber: 'text-amber-400', violet: 'text-violet-400', neutral: 'text-neutral-400',
-  sky: 'text-sky-400', pink: 'text-pink-400', teal: 'text-teal-400',
-}
 
 const ACCENT_BORDER: Record<AccentColor, string> = {
   blue: 'border-blue-500/25', green: 'border-green-500/25', red: 'border-red-500/25',
@@ -23,13 +15,6 @@ const ACCENT_BORDER: Record<AccentColor, string> = {
   sky: 'border-sky-500/25', pink: 'border-pink-500/25', teal: 'border-teal-500/25',
 }
 
-const ACCENT_BUTTON: Record<AccentColor, IconButtonColor> = {
-  blue: 'blue', green: 'green', red: 'red',
-  orange: 'orange', cyan: 'cyan', yellow: 'yellow',
-  purple: 'purple', indigo: 'indigo', emerald: 'emerald',
-  amber: 'amber', violet: 'violet', neutral: 'neutral',
-  sky: 'sky', pink: 'pink', teal: 'teal',
-}
 
 const ACCENT_HANDLE: Record<AccentColor, string> = {
   blue: 'bg-blue-500/30 group-hover:bg-blue-400/50', green: 'bg-green-500/30 group-hover:bg-green-400/50', red: 'bg-red-500/30 group-hover:bg-red-400/50',
@@ -89,7 +74,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 +89,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 +287,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 +303,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 +321,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,11 +331,11 @@ 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())}
-          color={ACCENT_BUTTON[accentColor]}
+          color={accentColor}
         />
       </div>
       <div className={`${variant === 'split' ? 'flex-1 overflow-y-auto' : ''} p-3`}>
@@ -371,7 +356,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 +369,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 +394,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 +412,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

@@ -1,4 +1,5 @@
 import { FileCode, Folder, FolderOpen, ChevronRight, ChevronDown } from 'lucide-react'
+import { ACCENT_ICON, type AccentColor } from '../lib/form-colors.ts'
 
 export interface FileTreeNode {
   name: string
@@ -27,18 +28,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',
-}
-
-const ACCENT_ICON: Record<string, string> = {
-  blue: 'text-blue-400',
-  purple: 'text-purple-400',
-  orange: 'text-orange-400',
-  green: 'text-green-400',
-  pink: 'text-pink-400',
-  amber: 'text-amber-400',
-  emerald: 'text-emerald-400',
-  teal: 'text-teal-400',
-  sky: 'text-sky-400',
+  violet: 'bg-violet-400/20 text-neutral-200',
 }
 
 function nodeHasFiles(node: FileTreeNode): boolean {
@@ -120,9 +110,9 @@ 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 iconColorClass = ACCENT_ICON[accentColor as AccentColor] ?? ACCENT_ICON.blue
   const rowClass = isSelected
     ? `${base} ${selectedClass}`
     : isDir

package/components/ui/files-panel.tsx

@@ -3,15 +3,20 @@
 import { useState, useMemo } from 'react'
 import { Folder, FolderOpen, File, FileCode, FileText, FileJson, Image, ChevronRight, Search, MoreVertical } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { iconMap, type IconName } from './icon-button.tsx'
 import { cn } from '../lib/cn.ts'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  folder: Folder,
-  file: File,
-  code: FileCode,
-  image: Image,
-  search: Search,
+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 EXTENSION_ICON_MAP: Record<string, LucideIcon> = {
@@ -48,6 +53,7 @@ export interface FilesPanelProps {
   onAction?: (action: string, path: string) => void
   showSearch?: boolean
   className?: string
+  accentColor?: string
 }
 
 function collectAllFolderPaths(entries: FileEntry[]): Set<string> {
@@ -74,7 +80,7 @@ function countFiles(entries: FileEntry[]): number {
 }
 
 function getFileIcon(entry: FileEntry): LucideIcon {
-  if (entry.icon && iconSubset[entry.icon]) return iconSubset[entry.icon]!
+  if (entry.icon && iconMap[entry.icon]) return iconMap[entry.icon]!
   if (entry.type === 'folder') return Folder
   const ext = entry.name.split('.').pop()?.toLowerCase()
   if (ext && EXTENSION_ICON_MAP[ext]) return EXTENSION_ICON_MAP[ext]
@@ -82,7 +88,7 @@ function getFileIcon(entry: FileEntry): LucideIcon {
 }
 
 function getFolderIcon(expanded: boolean, entry: FileEntry): LucideIcon {
-  if (entry.icon && iconSubset[entry.icon]) return iconSubset[entry.icon]!
+  if (entry.icon && iconMap[entry.icon]) return iconMap[entry.icon]!
   return expanded ? FolderOpen : Folder
 }
 
@@ -110,9 +116,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 +131,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 +151,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 +179,7 @@ function FileNode({ entry, depth, selectedPath, expandedPaths, onToggleExpand, o
               onToggleExpand={onToggleExpand}
               onSelect={onSelect}
               onAction={onAction}
+              accentColor={accentColor}
             />
           ))}
         </ul>
@@ -187,6 +195,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 +219,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 +248,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

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

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

@@ -19,6 +19,7 @@
 
 import { forwardRef, useEffect, useRef, useState, type InputHTMLAttributes, type ReactNode } from 'react'
 import { Search, X, Eye, EyeOff } from 'lucide-react'
+import { DebounceBorderOverlay } from './debounce-border-overlay.tsx'
 import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
@@ -39,10 +40,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 = {
@@ -50,6 +51,13 @@ const variantClasses = {
   outline: 'bg-transparent',
 }
 
+const SEARCH_AUTO_PROPS = {
+  autoComplete: 'off' as const,
+  autoCorrect: 'off' as const,
+  autoCapitalize: 'off' as const,
+  spellCheck: false as const,
+}
+
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   value,
   onChange,
@@ -115,12 +123,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
     return () => clearTimeout(timerRef.current)
   }, [])
 
-  const searchAutoProps = isSearch ? {
-    autoComplete: 'off' as const,
-    autoCorrect: 'off' as const,
-    autoCapitalize: 'off' as const,
-    spellCheck: false as const,
-  } : {}
+  const searchAutoProps = isSearch ? SEARCH_AUTO_PROPS : undefined
 
   const showClear = isSearch && displayValue && !disabled
 
@@ -181,30 +184,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
           </button>
         )}
         {debounceMs > 0 && debounceKey > 0 && (
-          <svg
-            key={debounceKey}
-            className="absolute inset-0 pointer-events-none text-emerald-400/70"
-            style={{ width: '100%', height: '100%' }}
-          >
-            <rect
-              x="1" y="1" rx="5" ry="5"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              pathLength="100"
-              strokeDasharray="100"
-              strokeDashoffset="0"
-              style={{
-                width: 'calc(100% - 2px)',
-                height: 'calc(100% - 2px)',
-                animation: `debounce-border-drain ${debounceMs}ms linear forwards`,
-              }}
-            />
-          </svg>
+          <DebounceBorderOverlay debounceKey={debounceKey} durationMs={debounceMs} />
         )}
       </div>
       {typeof error === 'string' && error && (
-        <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

@@ -12,25 +12,11 @@
  * - Clickable with hover state
  */
 
+import { type AccentColor } from '../lib/form-colors.ts'
 import { iconMap, type IconName } from './icon-button.tsx'
 import { Tooltip } from './tooltip.tsx'
 
-export type LabelColor =
-  | 'neutral'
-  | 'green'
-  | 'red'
-  | 'blue'
-  | 'yellow'
-  | 'orange'
-  | 'purple'
-  | 'amber'
-  | 'emerald'
-  | 'cyan'
-  | 'indigo'
-  | 'teal'
-  | 'violet'
-  | 'pink'
-  | 'sky'
+export type LabelColor = AccentColor
 
 export interface LabelProps {
   text: string
@@ -87,14 +73,14 @@ 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 */
-function smartCapitalize(value: string): string {
+export function smartCapitalize(value: string): string {
   return value.replace(/(^|[\s-])(\w)/g, (_match, separator: string, char: string) => separator + char.toUpperCase())
 }
 

package/components/ui/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>