@toolr/ui-design 0.1.5 → 0.1.7

package/components/sections/prompt-editor/file-type-tabbed-prompt-editor.tsx

@@ -19,19 +19,12 @@
  *   />
  */
 
-import { useState, useRef, useCallback } from 'react'
+import { useState, useCallback } from 'react'
+import { useResizableSidebar } from '../../hooks/use-resizable-sidebar.ts'
 import { FileCode, GripVertical, Crosshair } from 'lucide-react'
 import { TabbedPromptEditor } from './tabbed-prompt-editor.tsx'
 import type { ToolTab, PromptPlaceholder, FileTypeOption } from './types.ts'
 
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-const MIN_SIDEBAR_WIDTH = 160
-const MAX_SIDEBAR_WIDTH = 320
-const DEFAULT_SIDEBAR_WIDTH = 200
-
 // ---------------------------------------------------------------------------
 // Props
 // ---------------------------------------------------------------------------
@@ -81,8 +74,7 @@ export function FileTypeTabbedPromptEditor({
   className = '',
 }: FileTypeTabbedPromptEditorProps) {
   const [selectedFileType, setSelectedFileType] = useState(fileTypes[0]?.id ?? '')
-  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH)
-  const isDraggingRef = useRef(false)
+  const { width: sidebarWidth, onPointerDown: handleSidebarPointerDown } = useResizableSidebar({ min: 160, max: 320, defaultWidth: 200, direction: 'right' })
 
   // Derive prompts for current file type
   const currentPrompts = prompts[selectedFileType] ?? Object.fromEntries(tools.map((t) => [t.id, '']))
@@ -105,48 +97,20 @@ export function FileTypeTabbedPromptEditor({
     ? (tool: string, content: string) => onSave(selectedFileType, tool, content)
     : undefined
 
-  // Sidebar resize via pointer events
-  const handleSidebarPointerDown = useCallback((e: React.PointerEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    isDraggingRef.current = true
-    const target = e.currentTarget as HTMLElement
-    target.setPointerCapture(e.pointerId)
-
-    const startX = e.clientX
-    const startWidth = sidebarWidth
-
-    const handlePointerMove = (moveEvent: PointerEvent) => {
-      if (!isDraggingRef.current) return
-      const deltaX = moveEvent.clientX - startX
-      const newWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, startWidth + deltaX))
-      setSidebarWidth(newWidth)
-    }
-
-    const handlePointerUp = () => {
-      isDraggingRef.current = false
-      target.removeEventListener('pointermove', handlePointerMove)
-      target.removeEventListener('pointerup', handlePointerUp)
-    }
-
-    target.addEventListener('pointermove', handlePointerMove)
-    target.addEventListener('pointerup', handlePointerUp)
-  }, [sidebarWidth])
-
   return (
     <div className={`flex w-full max-w-full bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${className}`}>
       {/* Left Sidebar — File Type Selector */}
       <div
         className="relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col"
-        style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH, maxWidth: MAX_SIDEBAR_WIDTH }}
+        style={{ width: sidebarWidth, minWidth: 160, maxWidth: 320 }}
       >
         {/* Header */}
         <div className="h-[52px] px-3 flex items-center border-b border-neutral-700 shrink-0">
           <div className="flex items-center gap-2">
             <Crosshair className="w-4 h-4 text-neutral-500 shrink-0" />
             <div className="min-w-0">
-              <div className="text-xs font-medium text-neutral-400">{selectorLabel}</div>
-              <div className="text-xs text-neutral-600">{selectorSublabel}</div>
+              <div className="text-sm font-medium text-neutral-400">{selectorLabel}</div>
+              <div className="text-sm text-neutral-600">{selectorSublabel}</div>
             </div>
           </div>
         </div>
@@ -169,11 +133,11 @@ export function FileTypeTabbedPromptEditor({
                   {ft.icon ?? <FileCode className="w-4 h-4" />}
                 </div>
                 <div className="min-w-0 flex-1">
-                  <div className={`text-sm font-medium truncate ${isSelected ? 'text-neutral-300' : 'text-neutral-400'}`}>
+                  <div className={`text-md font-medium truncate ${isSelected ? 'text-neutral-300' : 'text-neutral-400'}`}>
                     {ft.name}
                   </div>
                   {ft.description && (
-                    <div className="text-xs text-neutral-500 mt-0.5 leading-relaxed">
+                    <div className="text-sm text-neutral-500 mt-0.5 leading-relaxed">
                       {ft.description}
                     </div>
                   )}

package/components/sections/prompt-editor/index.ts

@@ -97,13 +97,6 @@ export type {
   ScenarioOption,
 } from './types.ts'
 
-// Hook
-export {
-  usePromptEditor,
-  type UsePromptEditorOptions,
-  type UsePromptEditorReturn,
-} from './use-prompt-editor.ts'
-
 // Components
 export {
   TabbedPromptEditor,

package/components/sections/prompt-editor/simulator-prompt-editor.tsx

@@ -19,19 +19,12 @@
  *   />
  */
 
-import { useState, useRef, useCallback, useMemo } from 'react'
+import { useState, useCallback, useMemo } from 'react'
+import { useResizableSidebar } from '../../hooks/use-resizable-sidebar.ts'
 import { ChevronDown, ChevronRight, GripVertical, Crosshair } from 'lucide-react'
 import { TabbedPromptEditor } from './tabbed-prompt-editor.tsx'
 import type { ToolTab, PromptPlaceholder, ScenarioOption } from './types.ts'
 
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-const MIN_SIDEBAR_WIDTH = 180
-const MAX_SIDEBAR_WIDTH = 360
-const DEFAULT_SIDEBAR_WIDTH = 220
-
 // ---------------------------------------------------------------------------
 // Props
 // ---------------------------------------------------------------------------
@@ -82,8 +75,7 @@ export function SimulatorPromptEditor({
   const [expandedScenarios, setExpandedScenarios] = useState<Set<string>>(
     new Set([defaultScenarioId]),
   )
-  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH)
-  const isDraggingRef = useRef(false)
+  const { width: sidebarWidth, onPointerDown: handleSidebarPointerDown } = useResizableSidebar({ min: 180, max: 360, defaultWidth: 220, direction: 'right' })
 
   // Ensure selected scenario is always expanded
   const effectiveExpanded = useMemo(() => {
@@ -138,48 +130,20 @@ export function SimulatorPromptEditor({
     }
   }
 
-  // Sidebar resize via pointer events
-  const handleSidebarPointerDown = useCallback((e: React.PointerEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    isDraggingRef.current = true
-    const target = e.currentTarget as HTMLElement
-    target.setPointerCapture(e.pointerId)
-
-    const startX = e.clientX
-    const startWidth = sidebarWidth
-
-    const handlePointerMove = (moveEvent: PointerEvent) => {
-      if (!isDraggingRef.current) return
-      const deltaX = moveEvent.clientX - startX
-      const newWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, startWidth + deltaX))
-      setSidebarWidth(newWidth)
-    }
-
-    const handlePointerUp = () => {
-      isDraggingRef.current = false
-      target.removeEventListener('pointermove', handlePointerMove)
-      target.removeEventListener('pointerup', handlePointerUp)
-    }
-
-    target.addEventListener('pointermove', handlePointerMove)
-    target.addEventListener('pointerup', handlePointerUp)
-  }, [sidebarWidth])
-
   return (
     <div className={`flex w-full max-w-full bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${className}`}>
       {/* Left Sidebar — Tree Selector */}
       <div
         className="relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col"
-        style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH, maxWidth: MAX_SIDEBAR_WIDTH }}
+        style={{ width: sidebarWidth, minWidth: 180, maxWidth: 360 }}
       >
         {/* Header */}
         <div className="h-[52px] px-3 flex items-center border-b border-neutral-700 shrink-0">
           <div className="flex items-center gap-2">
             <Crosshair className="w-4 h-4 text-neutral-500 shrink-0" />
             <div className="min-w-0">
-              <div className="text-xs font-medium text-neutral-400">Scenario</div>
-              <div className="text-xs text-neutral-600">Select scenario and step</div>
+              <div className="text-sm font-medium text-neutral-400">Scenario</div>
+              <div className="text-sm text-neutral-600">Select scenario and step</div>
             </div>
           </div>
         </div>
@@ -207,11 +171,11 @@ export function SimulatorPromptEditor({
                     )}
                   </div>
                   <div className="min-w-0 flex-1">
-                    <div className={`text-sm font-medium ${isScenarioActive ? 'text-neutral-300' : 'text-neutral-400'}`}>
+                    <div className={`text-md font-medium ${isScenarioActive ? 'text-neutral-300' : 'text-neutral-400'}`}>
                       {scenario.name}
                     </div>
                     {scenario.description && (
-                      <div className="text-xs text-neutral-500 mt-0.5 leading-relaxed">
+                      <div className="text-sm text-neutral-500 mt-0.5 leading-relaxed">
                         {scenario.description}
                       </div>
                     )}
@@ -236,7 +200,7 @@ export function SimulatorPromptEditor({
                           <div className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
                             isStepSelected ? 'bg-blue-400' : 'bg-neutral-600'
                           }`} />
-                          <span className={`text-xs ${isStepSelected ? 'text-neutral-300' : 'text-neutral-400'}`}>
+                          <span className={`text-sm ${isStepSelected ? 'text-neutral-300' : 'text-neutral-400'}`}>
                             {step.name}
                           </span>
                         </button>

package/components/sections/prompt-editor/tabbed-prompt-editor.tsx

@@ -20,6 +20,7 @@
  */
 
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react'
+import { useResizableSidebar } from '../../hooks/use-resizable-sidebar.ts'
 import Editor, { type Monaco } from '@monaco-editor/react'
 import type { editor, languages } from 'monaco-editor'
 import { Variable, Info, Search, X, AlertTriangle } from 'lucide-react'
@@ -37,9 +38,6 @@ import { AiToolIcon } from '../../lib/ai-tools.tsx'
 const THEME_NAME = 'prompt-editor-dark'
 let themeRegistered = false
 
-const MIN_SIDEBAR_WIDTH = 220
-const MAX_SIDEBAR_WIDTH = 400
-const DEFAULT_SIDEBAR_WIDTH = 280
 const DEFAULT_EDITOR_HEIGHT = 400
 
 // ---------------------------------------------------------------------------
@@ -85,12 +83,11 @@ export function TabbedPromptEditor({
   className = '',
 }: TabbedPromptEditorProps) {
   const [activeTab, setActiveTab] = useState(tools[0]?.id ?? '')
-  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH)
+  const { width: sidebarWidth, onPointerDown: handleSidebarPointerDown } = useResizableSidebar({ min: 220, max: 400, defaultWidth: 280, direction: 'left' })
   const [variableSearch, setVariableSearch] = useState('')
   const [localContent, setLocalContent] = useState<Record<string, string>>(prompts)
   const [isDirty, setIsDirty] = useState(false)
 
-  const isDraggingSidebarRef = useRef(false)
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null)
   const monacoRef = useRef<Monaco | null>(null)
   const decorationsRef = useRef<string[]>([])
@@ -236,35 +233,6 @@ export function TabbedPromptEditor({
     }
   }, [variables, registerCompletionProvider])
 
-  // --- Sidebar resize ---
-
-  const handleSidebarMouseDown = useCallback((e: React.PointerEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    isDraggingSidebarRef.current = true
-    const target = e.currentTarget as HTMLElement
-    target.setPointerCapture(e.pointerId)
-
-    const startX = e.clientX
-    const startWidth = sidebarWidth
-
-    const handlePointerMove = (moveEvent: PointerEvent) => {
-      if (!isDraggingSidebarRef.current) return
-      const deltaX = startX - moveEvent.clientX
-      const newWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, startWidth + deltaX))
-      setSidebarWidth(newWidth)
-    }
-
-    const handlePointerUp = () => {
-      isDraggingSidebarRef.current = false
-      target.removeEventListener('pointermove', handlePointerMove)
-      target.removeEventListener('pointerup', handlePointerUp)
-    }
-
-    target.addEventListener('pointermove', handlePointerMove)
-    target.addEventListener('pointerup', handlePointerUp)
-  }, [sidebarWidth])
-
   // --- Content change ---
 
   const handleEditorChange = useCallback(
@@ -350,7 +318,7 @@ export function TabbedPromptEditor({
               <button
                 key={tool.id}
                 onClick={() => setActiveTab(tool.id)}
-                className={`flex-1 flex items-center justify-center gap-1.5 px-2 text-xs font-medium border-b-2 transition-colors ${
+                className={`flex-1 flex items-center justify-center gap-1.5 px-2 text-sm font-medium border-b-2 transition-colors ${
                   isActive
                     ? `border-current ${activeColor} bg-neutral-850`
                     : 'border-neutral-700 text-neutral-500 hover:text-neutral-400 hover:bg-neutral-850/50'
@@ -368,7 +336,7 @@ export function TabbedPromptEditor({
         {checklistMissing && (
           <div className="flex items-start gap-2 px-3 py-2 bg-red-400/10 border-b border-red-400/30 shrink-0">
             <AlertTriangle className="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
-            <div className="text-xs text-red-400">
+            <div className="text-sm text-red-400">
               <span className="font-medium">Missing "# Verification Checklist" section.</span>
               {' '}When verification is enabled, only content under this heading will be sent to the AI for output validation.
             </div>
@@ -431,11 +399,11 @@ export function TabbedPromptEditor({
       {hasVariables && (
         <div
           className="relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col border-l border-neutral-700"
-          style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH, maxWidth: MAX_SIDEBAR_WIDTH }}
+          style={{ width: sidebarWidth, minWidth: 220, maxWidth: 400 }}
         >
           {/* Resize handle on left edge */}
           <div
-            onPointerDown={handleSidebarMouseDown}
+            onPointerDown={handleSidebarPointerDown}
             className="absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-violet-400/30 transition-colors z-10"
           />
 
@@ -444,11 +412,11 @@ export function TabbedPromptEditor({
             <div className="flex items-center gap-2">
               <Variable className="w-4 h-4 text-neutral-500 shrink-0" />
               <div className="min-w-0">
-                <div className="text-xs font-medium text-neutral-400">Placeholders</div>
-                <div className="text-xs text-neutral-600 truncate">Available placeholders</div>
+                <div className="text-sm font-medium text-neutral-400">Placeholders</div>
+                <div className="text-sm text-neutral-600 truncate">Available placeholders</div>
               </div>
             </div>
-            <span className="px-1.5 py-0.5 bg-violet-400/20 text-violet-400 rounded text-xs">
+            <span className="px-1.5 py-0.5 bg-violet-400/20 text-violet-400 rounded text-sm">
               {variableSearch.trim() ? `${filteredVariables.length}/${variables!.length}` : variables!.length}
             </span>
           </div>
@@ -479,7 +447,7 @@ export function TabbedPromptEditor({
 
           {/* Autocomplete tip */}
           <div className="px-3 py-2 border-b border-neutral-700 shrink-0">
-            <div className="flex items-center gap-1.5 text-xs text-neutral-500">
+            <div className="flex items-center gap-1.5 text-sm text-neutral-500">
               <Info className="w-3 h-3 flex-shrink-0" />
               <span>Type <code className="text-violet-400">{'{{'}</code> in editor for autocomplete</span>
             </div>
@@ -502,7 +470,7 @@ export function TabbedPromptEditor({
                 </div>
               ))
             ) : variableSearch.trim() ? (
-              <div className="text-center py-4 text-xs text-neutral-500">
+              <div className="text-center py-4 text-sm text-neutral-500">
                 No placeholders match "{variableSearch}"
               </div>
             ) : null}

package/components/sections/report-bug/report-bug-form.tsx

@@ -124,13 +124,13 @@ export function ReportBugForm({
   return (
     <div className={cn('rounded-lg border border-neutral-700 bg-neutral-800', className)}>
       <div className="border-b border-neutral-700 px-4 py-3">
-        <h3 className="text-sm font-medium text-neutral-200">Report a Bug</h3>
+        <h3 className="text-md font-medium text-neutral-200">Report a Bug</h3>
       </div>
 
       <div className="space-y-4 p-4">
         {/* Issue type pills */}
         <div>
-          <label className="mb-2 block text-xs text-neutral-400">Issue Type</label>
+          <label className="mb-2 block text-sm text-neutral-400">Issue Type</label>
           <div className="flex flex-wrap gap-2">
             {ISSUE_TYPES.map((type) => (
               <button
@@ -138,7 +138,7 @@ export function ReportBugForm({
                 type="button"
                 onClick={() => setIssueType(type.value as IssueType)}
                 className={cn(
-                  'px-3 py-1.5 text-xs font-medium rounded-md transition-all',
+                  'px-3 py-1.5 text-sm font-medium rounded-md transition-all',
                   issueType === type.value
                     ? 'bg-blue-600 text-white'
                     : 'bg-neutral-700 text-neutral-400 hover:bg-neutral-600 hover:text-neutral-200',
@@ -152,7 +152,7 @@ export function ReportBugForm({
 
         {/* Title */}
         <div>
-          <label className="mb-1.5 block text-xs text-neutral-400">
+          <label className="mb-1.5 block text-sm text-neutral-400">
             Title <span className="text-red-400">*</span>
           </label>
           <Input
@@ -165,7 +165,7 @@ export function ReportBugForm({
 
         {/* Description */}
         <div>
-          <label className="mb-1.5 block text-xs text-neutral-400">
+          <label className="mb-1.5 block text-sm text-neutral-400">
             Description <span className="text-red-400">*</span>
           </label>
           <ResizableTextarea
@@ -173,13 +173,13 @@ export function ReportBugForm({
             onChange={(e) => setDescription(e.target.value)}
             placeholder="Describe the issue in detail. Include steps to reproduce if applicable."
             rows={6}
-            className="w-full px-3 py-1.5 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none min-h-[120px]"
+            className="w-full px-3 py-1.5 bg-neutral-800 border border-neutral-700 rounded-lg text-md text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none min-h-[120px]"
           />
         </div>
 
         {/* Email */}
         <div>
-          <label className="mb-1.5 block text-xs text-neutral-400">Email (optional)</label>
+          <label className="mb-1.5 block text-sm text-neutral-400">Email (optional)</label>
           <Input
             type="text"
             value={email}
@@ -192,7 +192,7 @@ export function ReportBugForm({
 
         {/* Screenshots */}
         <div>
-          <label className="mb-2 block text-xs text-neutral-400">
+          <label className="mb-2 block text-sm text-neutral-400">
             Screenshots (optional, max 20MB total)
           </label>
           <ScreenshotUploader
@@ -208,7 +208,7 @@ export function ReportBugForm({
             <div className="flex items-center gap-2.5">
               <Checkbox checked={includeLogs} onChange={setIncludeLogs} />
               <span
-                className="text-sm text-neutral-400 cursor-pointer select-none"
+                className="text-md text-neutral-400 cursor-pointer select-none"
                 onClick={() => setIncludeLogs(!includeLogs)}
               >
                 Include error logs
@@ -224,11 +224,11 @@ export function ReportBugForm({
             {includeLogs && capturedErrors && capturedErrors.length > 0 && (
               <div className="rounded-md border border-neutral-700 bg-neutral-900/50">
                 <div className="px-3 py-2 border-b border-neutral-700">
-                  <span className="text-xs font-medium text-neutral-400">Captured Errors</span>
+                  <span className="text-sm font-medium text-neutral-400">Captured Errors</span>
                 </div>
                 <div className="max-h-[200px] overflow-y-auto divide-y divide-neutral-800">
                   {capturedErrors.map((error) => (
-                    <div key={error.fingerprint} className="px-3 py-2 text-xs">
+                    <div key={error.fingerprint} className="px-3 py-2 text-sm">
                       <div className="flex items-start gap-2">
                         {error.count > 1 && (
                           <span className="shrink-0 text-orange-400 font-mono font-medium">
@@ -251,14 +251,14 @@ export function ReportBugForm({
       {/* Footer */}
       <div className="flex items-center justify-end gap-2 border-t border-neutral-700 px-4 py-3">
         {isSubmitting && submissionStatus && (
-          <span className="text-xs text-neutral-400 mr-auto">{submissionStatus}</span>
+          <span className="text-sm text-neutral-400 mr-auto">{submissionStatus}</span>
         )}
         {onCancel && (
           <button
             type="button"
             onClick={onCancel}
             disabled={isSubmitting}
-            className="rounded-md border border-neutral-700 bg-transparent px-3 py-1.5 text-sm text-neutral-400 transition-colors hover:bg-neutral-700 hover:text-neutral-200 disabled:opacity-50"
+            className="rounded-md border border-neutral-700 bg-transparent px-3 py-1.5 text-md text-neutral-400 transition-colors hover:bg-neutral-700 hover:text-neutral-200 disabled:opacity-50"
           >
             Cancel
           </button>
@@ -267,7 +267,7 @@ export function ReportBugForm({
           type="button"
           onClick={handleSubmit}
           disabled={!canSubmit}
-          className="flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-md text-white transition-colors hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
         >
           {isSubmitting ? (
             <Loader2 className="w-3.5 h-3.5 animate-spin" />

package/components/sections/report-bug/screenshot-uploader.tsx

@@ -158,10 +158,10 @@ export function ScreenshotUploader({
       >
         <ImagePlus className={cn('w-6 h-6', isDragging ? 'text-blue-400' : 'text-neutral-500')} />
         <div className="text-center">
-          <p className="text-sm text-neutral-400">
+          <p className="text-md text-neutral-400">
             {isDragging ? 'Drop images here' : 'Click or drag images to attach'}
           </p>
-          <p className="text-xs text-neutral-500 mt-1">
+          <p className="text-sm text-neutral-500 mt-1">
             {formatFileSize(remainingSize)} remaining of {formatFileSize(maxTotalSize)}
           </p>
         </div>
@@ -177,7 +177,7 @@ export function ScreenshotUploader({
       </div>
 
       {error && (
-        <div className="flex items-center gap-2 text-sm text-red-400">
+        <div className="flex items-center gap-2 text-md text-red-400">
           <AlertCircle className="w-4 h-4 flex-shrink-0" />
           <span>{error}</span>
         </div>
@@ -207,9 +207,9 @@ export function ScreenshotUploader({
                 >
                   <X className="w-3 h-3" />
                 </button>
-                <span className="text-xs text-white truncate">{s.filename}</span>
+                <span className="text-sm text-white truncate">{s.filename}</span>
               </div>
-              <div className="absolute bottom-1 right-1 px-1.5 py-0.5 bg-[var(--background)]/70 rounded text-xs text-neutral-400">
+              <div className="absolute bottom-1 right-1 px-1.5 py-0.5 bg-[var(--background)]/70 rounded text-sm text-neutral-400">
                 {formatFileSize(s.size)}
               </div>
             </div>
@@ -218,7 +218,7 @@ export function ScreenshotUploader({
       )}
 
       {screenshots.length > 0 && (
-        <div className="flex items-center justify-between text-xs text-neutral-500">
+        <div className="flex items-center justify-between text-sm text-neutral-500">
           <span>{screenshots.length} image{screenshots.length !== 1 ? 's' : ''} attached</span>
           <span>Total: {formatFileSize(totalSize)}</span>
         </div>

package/components/sections/snapshot-browser/snapshot-browser-panel.tsx

@@ -75,7 +75,7 @@ export function SnapshotBrowserPanel({
         <div className="flex items-center justify-between">
           <div>
             <label className="text-neutral-300">Snapshot Limit</label>
-            <p className="text-sm text-neutral-500">
+            <p className="text-md text-neutral-500">
               Maximum number of snapshots to keep per item (1-50)
             </p>
           </div>
@@ -92,7 +92,7 @@ export function SnapshotBrowserPanel({
         <div className="flex items-center justify-between mb-3">
           <div>
             <label className="text-neutral-300">Browse Snapshots</label>
-            <p className="text-sm text-neutral-500">
+            <p className="text-md text-neutral-500">
               {totalSnapshotCount === 0
                 ? 'No snapshots saved yet'
                 : `${totalSnapshotCount} snapshot${totalSnapshotCount === 1 ? '' : 's'} stored`}
@@ -129,7 +129,7 @@ export function SnapshotBrowserPanel({
       <div className="bg-neutral-900/50 border border-neutral-700 rounded-lg p-4">
         <div className="flex items-start gap-3">
           <HelpCircle className="w-4 h-4 text-neutral-500 mt-0.5 shrink-0" />
-          <div className="text-sm text-neutral-500 space-y-2">
+          <div className="text-md text-neutral-500 space-y-2">
             <p>
               <strong className="text-neutral-400">How snapshots work:</strong>
             </p>

package/components/sections/snapshot-browser/snapshot-tree.tsx

@@ -194,14 +194,14 @@ function SnapshotEntryRow({
 
   return (
     <div
-      className="flex items-center gap-2 px-2 py-1.5 text-sm rounded-md group transition-colors hover:bg-neutral-700/50 text-neutral-400"
+      className="flex items-center gap-2 px-2 py-1.5 text-md rounded-md group transition-colors hover:bg-neutral-700/50 text-neutral-400"
       style={{ paddingLeft: `${depth * 16 + 8}px` }}
     >
       <Clock className="w-3 h-3 shrink-0 text-neutral-500" />
-      <span className="text-xs flex-1 truncate">
+      <span className="text-sm flex-1 truncate">
         {searchQuery ? highlightMatch(displayName, searchQuery) : displayName}
       </span>
-      <span className="text-xss text-neutral-500 shrink-0" title={formatFullDate(entry.savedAt)}>
+      <span className="text-xs text-neutral-500 shrink-0" title={formatFullDate(entry.savedAt)}>
         {formatRelativeTime(entry.savedAt)}
       </span>
       <IconButton
@@ -248,7 +248,7 @@ function ExpandableNode({
     <div>
       <button
         onClick={() => onToggle(path)}
-        className="w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors cursor-pointer text-neutral-400 hover:bg-neutral-700/50 hover:text-neutral-300"
+        className="w-full flex items-center gap-2 px-2 py-1.5 text-md rounded-md transition-colors cursor-pointer text-neutral-400 hover:bg-neutral-700/50 hover:text-neutral-300"
         style={{ paddingLeft: `${depth * 16 + 8}px` }}
       >
         <span className="w-4 h-4 flex items-center justify-center shrink-0">
@@ -266,7 +266,7 @@ function ExpandableNode({
         </span>
 
         {snapshotCount > 0 && (
-          <span className="text-xs text-neutral-500 bg-neutral-700 px-1.5 py-0.5 rounded shrink-0">
+          <span className="text-sm text-neutral-500 bg-neutral-700 px-1.5 py-0.5 rounded shrink-0">
             {snapshotCount}
           </span>
         )}
@@ -322,10 +322,10 @@ export function SnapshotTree({
 
   if (totalCount === 0) {
     return (
-      <div className={cn('text-sm text-neutral-500 py-8 text-center', className)}>
+      <div className={cn('text-md text-neutral-500 py-8 text-center', className)}>
         No snapshots saved yet.
         <br />
-        <span className="text-xs">Use the camera button in editors to save snapshots.</span>
+        <span className="text-sm">Use the camera button in editors to save snapshots.</span>
       </div>
     )
   }
@@ -377,7 +377,7 @@ export function SnapshotTree({
       {/* Tree */}
       <div className="bg-neutral-900 border border-neutral-700 rounded-lg p-2 min-h-[200px] max-h-[60vh] overflow-y-auto">
         {filteredScopes.length === 0 && searchQuery ? (
-          <p className="text-xs text-neutral-500 text-center py-4">
+          <p className="text-sm text-neutral-500 text-center py-4">
             No snapshots match &ldquo;{searchQuery}&rdquo;
           </p>
         ) : (