@toolr/ui-design 0.1.2 → 0.1.4

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

@@ -1,21 +1,48 @@
 import { useState, useEffect, useCallback, useRef, useMemo, type ReactNode } from 'react'
 import { FileCode, FolderTree, Loader2, AlertCircle, AlignLeft, Code2, Type } from 'lucide-react'
-import { CollapseButton } from './icon-button.tsx'
+import { CollapseButton, type IconButtonColor } 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' | 'purple' | 'orange' | 'green' | 'pink' | 'amber' | 'emerald' | 'teal' | 'sky'
+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', 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',
+  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',
+  orange: 'border-orange-500/25', cyan: 'border-cyan-500/25', yellow: 'border-yellow-500/25',
+  purple: 'border-purple-500/25', indigo: 'border-indigo-500/25', emerald: 'border-emerald-500/25',
+  amber: 'border-amber-500/25', violet: 'border-violet-500/25', neutral: 'border-neutral-500/25',
+  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',
+  orange: 'bg-orange-500/30 group-hover:bg-orange-400/50', cyan: 'bg-cyan-500/30 group-hover:bg-cyan-400/50', yellow: 'bg-yellow-500/30 group-hover:bg-yellow-400/50',
+  purple: 'bg-purple-500/30 group-hover:bg-purple-400/50', indigo: 'bg-indigo-500/30 group-hover:bg-indigo-400/50', emerald: 'bg-emerald-500/30 group-hover:bg-emerald-400/50',
+  amber: 'bg-amber-500/30 group-hover:bg-amber-400/50', violet: 'bg-violet-500/30 group-hover:bg-violet-400/50', neutral: 'bg-neutral-500/30 group-hover:bg-neutral-400/50',
+  sky: 'bg-sky-500/30 group-hover:bg-sky-400/50', pink: 'bg-pink-500/30 group-hover:bg-pink-400/50', teal: 'bg-teal-500/30 group-hover:bg-teal-400/50',
 }
 
 export interface FileStructureSectionProps {
   files: FileTreeNode[] | null
   rootName: string
+  variant?: 'split' | 'list'
   isLoading?: boolean
   error?: string | null
   onFetchContent: (relativePath: string) => Promise<string>
@@ -33,6 +60,8 @@ export interface FileStructureSectionProps {
   accentColor?: AccentColor
   /** Custom renderer called when mode is 'language'. Receives the resolved language as third arg. */
   renderPreview?: (content: string, filePath: string, language: string) => ReactNode
+  /** Initial height in pixels. Defaults to 400 for 'list', 250 for 'split'. */
+  initialHeight?: number
 }
 
 export function getLanguageFromPath(filePath: string): string {
@@ -60,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-[11px] text-neutral-500 border-l-2 border-neutral-700 pl-2 py-0.5">
+      <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 className="text-neutral-600">---</div>
         {fmLines.map((l, j) => <div key={j}>{l}</div>)}
         <div className="text-neutral-600">---</div>
@@ -75,12 +104,12 @@ 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-black/30 rounded text-[11px] font-mono text-neutral-300 overflow-x-auto">
+        <pre key={i} className="mb-2 p-2 bg-[var(--background)]/30 rounded text-xss font-mono text-neutral-300 overflow-x-auto">
           {codeLines.join('\n')}
         </pre>
       )
     } else if (line.startsWith('### ')) {
-      nodes.push(<h3 key={i} className="text-[11px] font-semibold text-neutral-300 mt-2 mb-0.5">{line.slice(4)}</h3>)
+      nodes.push(<h3 key={i} className="text-xss 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>)
     } else if (line.startsWith('# ')) {
@@ -88,7 +117,7 @@ function renderMarkdownContent(content: string) {
     } else if (line === '' || line === '\r') {
       nodes.push(<div key={i} className="h-1.5" />)
     } else {
-      nodes.push(<p key={i} className="text-[11px] text-neutral-400 leading-relaxed">{line}</p>)
+      nodes.push(<p key={i} className="text-xss text-neutral-400 leading-relaxed">{line}</p>)
     }
     i++
   }
@@ -103,6 +132,7 @@ const PLAIN_OPTION = { value: 'plain' as const, icon: <Type className="w-3 h-3"
 export function FileStructureSection({
   files,
   rootName,
+  variant = 'split',
   isLoading,
   error,
   onFetchContent,
@@ -111,6 +141,7 @@ export function FileStructureSection({
   default: defaultMode,
   accentColor = 'blue',
   renderPreview,
+  initialHeight,
 }: FileStructureSectionProps) {
   const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null)
   const [fileContent, setFileContent] = useState<string | null>(null)
@@ -168,7 +199,7 @@ export function FileStructureSection({
   const startHeight = useRef(0)
 
   useEffect(() => {
-    if (treeHeight !== null || !sectionRef.current) return
+    if (variant === 'list' || treeHeight !== null || !sectionRef.current) return
     const el = sectionRef.current
     const scrollParent = el.closest('.overflow-y-auto') as HTMLElement | null
     if (!scrollParent) return
@@ -185,9 +216,9 @@ export function FileStructureSection({
     })
     observer.observe(scrollParent)
     return () => observer.disconnect()
-  }, [treeHeight, files])
+  }, [variant, treeHeight, files])
 
-  const effectiveHeight = treeHeight ?? 250
+  const effectiveHeight = treeHeight ?? initialHeight ?? (variant === 'list' ? 400 : 250)
 
   const handleResizeStart = useCallback((e: React.MouseEvent) => {
     e.preventDefault()
@@ -224,7 +255,9 @@ export function FileStructureSection({
     return findFirst(files, rootName)
   }, [files, rootName])
 
-  const effectiveFilePath = selectedFilePath ?? firstFilePath
+  const effectiveFilePath = variant === 'list'
+    ? selectedFilePath
+    : (selectedFilePath ?? firstFilePath)
   const fileIsLoading = effectiveFilePath != null && effectiveFilePath !== fetchedFilePath
 
   useEffect(() => {
@@ -255,10 +288,16 @@ export function FileStructureSection({
   }, [effectiveFilePath, rootName, onFetchContent])
 
   const handleSelectFile = useCallback((filePath: string) => {
+    if (variant === 'list' && selectedFilePath === filePath) {
+      setSelectedFilePath(null)
+      setFileContent(null)
+      setFileError(null)
+      return
+    }
     setSelectedFilePath(filePath)
     setFileContent(null)
     setFileError(null)
-  }, [])
+  }, [variant, selectedFilePath])
 
   if (isLoading) {
     return (
@@ -303,71 +342,97 @@ export function FileStructureSection({
     )
   }
 
-  return (
-    <div ref={sectionRef}>
-      <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
-      <div className="flex gap-3" style={{ height: `${effectiveHeight}px` }}>
-        {/* Tree panel */}
-        <div className={`flex flex-col bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${effectiveFilePath ? 'w-1/3 shrink-0' : 'flex-1'}`}>
-          <div className="flex items-center px-3 py-2 border-b border-neutral-700 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>
-            <CollapseButton
-              collapsed={allCollapsed}
-              onToggle={() => setExpandedPaths(allCollapsed ? new Set(allDirPaths) : new Set())}
-            />
-          </div>
-          <div className="flex-1 overflow-y-auto p-3">
-            <FileTree
-              nodes={files}
-              rootName={rootName}
-              selectedPath={effectiveFilePath}
-              onSelectFile={handleSelectFile}
-              expandedPaths={expandedPaths}
-              onTogglePath={togglePath}
-              accentColor={accentColor}
-            />
+  const treePanel = (
+    <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>
+        <CollapseButton
+          collapsed={allCollapsed}
+          onToggle={() => setExpandedPaths(allCollapsed ? new Set(allDirPaths) : new Set())}
+          color={ACCENT_BUTTON[accentColor]}
+        />
+      </div>
+      <div className={`${variant === 'split' ? 'flex-1 overflow-y-auto' : ''} p-3`}>
+        <FileTree
+          nodes={files}
+          rootName={rootName}
+          selectedPath={effectiveFilePath}
+          onSelectFile={handleSelectFile}
+          expandedPaths={expandedPaths}
+          onTogglePath={togglePath}
+          accentColor={accentColor}
+        />
+      </div>
+    </div>
+  )
+
+  const previewPanel = effectiveFilePath ? (
+    <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>
+        {showToggle && (
+          <SegmentedToggle
+            options={toggleOptions}
+            value={mode}
+            onChange={setMode}
+            accentColor={accentColor}
+            size="xss"
+          />
+        )}
+      </div>
+      <div className="flex-1 overflow-auto">
+        {fileIsLoading ? (
+          <div className="flex items-center gap-2 text-xs text-neutral-500 p-3">
+            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+            Loading...
           </div>
-        </div>
+        ) : fileError ? (
+          <p className="text-xs text-red-400 p-3">{fileError}</p>
+        ) : fileContent !== null ? (
+          renderContent(fileContent, effectiveFilePath)
+        ) : null}
+      </div>
+    </div>
+  ) : null
+
+  const resizeHandle = (
+    <div
+      onMouseDown={handleResizeStart}
+      className="h-4 -mt-1.5 cursor-grab active:cursor-grabbing flex items-center justify-center group"
+    >
+      <div className={`w-10 h-1 rounded-full ${ACCENT_HANDLE[accentColor]} group-hover:w-14 group-hover:h-1.5 transition-all`} />
+    </div>
+  )
 
-        {/* Preview panel */}
-        {effectiveFilePath && (
-          <div className="flex-1 flex flex-col bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden">
-            <div className="flex items-center px-3 py-2 border-b border-neutral-700 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>
-              {showToggle && (
-                <SegmentedToggle
-                  options={toggleOptions}
-                  value={mode}
-                  onChange={setMode}
-                  accentColor={accentColor}
-                  size="xss"
-                />
-              )}
-            </div>
-            <div className="flex-1 overflow-auto">
-              {fileIsLoading ? (
-                <div className="flex items-center gap-2 text-xs 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>
-              ) : fileContent !== null ? (
-                renderContent(fileContent, effectiveFilePath)
-              ) : null}
+  if (variant === 'list') {
+    return (
+      <div ref={sectionRef}>
+        <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
+        <div className="space-y-3">
+          {treePanel}
+          {previewPanel && (
+            <div>
+              <div className="flex flex-col" style={{ height: `${effectiveHeight}px` }}>
+                {previewPanel}
+              </div>
+              {resizeHandle}
             </div>
-          </div>
-        )}
+          )}
+        </div>
       </div>
-      {/* Resize handle */}
-      <div
-        onMouseDown={handleResizeStart}
-        className="h-4 -mt-1.5 cursor-grab active:cursor-grabbing flex items-center justify-center group"
-      >
-        <div className="w-10 h-1 rounded-full bg-neutral-700 group-hover:bg-neutral-500 group-hover:w-14 group-hover:h-1.5 transition-all" />
+    )
+  }
+
+  return (
+    <div ref={sectionRef}>
+      <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
+      <div className="flex gap-3" style={{ height: `${effectiveHeight}px` }}>
+        {treePanel}
+        {previewPanel}
       </div>
+      {resizeHandle}
     </div>
   )
 }

package/components/ui/file-tree.tsx

@@ -126,8 +126,8 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
   const rowClass = isSelected
     ? `${base} ${selectedClass}`
     : isDir
-      ? `${base} cursor-pointer hover:text-neutral-200 ${iconColorClass}`
-      : `${base} cursor-pointer hover:bg-neutral-700/50 hover:text-neutral-200 ${iconColorClass}`
+      ? `${base} cursor-pointer text-white hover:text-neutral-200`
+      : `${base} cursor-pointer text-white hover:bg-neutral-700/50 hover:text-neutral-200`
 
   return (
     <li>

package/components/ui/files-panel.tsx

@@ -144,7 +144,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-[9px] rounded bg-neutral-700 text-neutral-500">
+          <span className="ml-auto shrink-0 px-1.5 py-0.5 text-xss rounded bg-neutral-700 text-neutral-500">
             {entry.badge}
           </span>
         )}
@@ -210,12 +210,12 @@ 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-[11px] font-semibold uppercase tracking-wider text-neutral-500">Files</span>
-        <span className="text-[10px] text-neutral-500">{fileCount} files</span>
+        <span className="text-xss font-semibold uppercase tracking-wider text-neutral-500">Files</span>
+        <span className="text-xss 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-black 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-xs">
             <Search className="w-3 h-3 text-neutral-500 shrink-0" />
             <input
               type="text"
@@ -243,7 +243,7 @@ export function FilesPanel({
           ))}
         </ul>
         {displayedFiles.length === 0 && (
-          <p className="text-[11px] text-neutral-500 text-center py-4">No files found</p>
+          <p className="text-xss text-neutral-500 text-center py-4">No files found</p>
         )}
       </div>
     </div>

package/components/ui/filter-dropdown.tsx

@@ -112,7 +112,7 @@ export function FilterDropdown({
       )}
 
       {isOpen && (
-        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] whitespace-nowrap bg-[var(--popover)] backdrop-blur border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
+        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] whitespace-nowrap bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
           {showSearch && (
             <div className={`sticky top-0 p-1.5 bg-[var(--popover)] border-b ${FORM_COLORS[color].border} z-10`}>
               <div className="relative">
@@ -135,7 +135,7 @@ export function FilterDropdown({
               onClick={() => handleSelect('all')}
               className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${
                 highlightIdx === 0
-                  ? 'bg-neutral-600 text-neutral-200'
+                  ? `${FORM_COLORS[color].selectedBg} text-neutral-200`
                   : !isActive ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
               }`}
             >
@@ -154,7 +154,7 @@ export function FilterDropdown({
                 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 ${
                   isHighlighted
-                    ? 'bg-neutral-600 text-neutral-200'
+                    ? `${FORM_COLORS[color].selectedBg} text-neutral-200`
                     : isSelected ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
                 }`}
               >

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

@@ -43,12 +43,12 @@ export function FrontmatterFormHeader({
           Configuration
         </span>
         {collapsed && hasFm && (
-          <span className="text-[11px] text-neutral-500 font-mono ml-2 truncate">
+          <span className="text-xss text-neutral-500 font-mono ml-2 truncate">
             {renderSummary()}
           </span>
         )}
         {collapsed && !hasFm && (
-          <span className="text-[11px] text-neutral-600 ml-2">No frontmatter</span>
+          <span className="text-xss text-neutral-600 ml-2">No frontmatter</span>
         )}
       </button>
 

package/components/ui/icon-button.tsx

@@ -159,7 +159,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'
+export type IconButtonColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
 export type IconButtonVariant = 'filled' | 'outline'
 
 export interface IconButtonProps {
@@ -216,6 +216,8 @@ const colorClasses = {
   violet: { text: 'text-violet-400', border: 'border-violet-500/30', hover: 'hover:bg-violet-500/20 hover:border-violet-500/40 hover:text-violet-300', active: 'bg-violet-500/20 text-violet-300 border-violet-500/40' },
   neutral: { text: 'text-neutral-400', border: 'border-neutral-500/30', hover: 'hover:bg-neutral-500/20 hover:border-neutral-500/40 hover:text-neutral-300', active: 'bg-neutral-500/20 text-neutral-300 border-neutral-500/40' },
   sky: { text: 'text-sky-400', border: 'border-sky-500/30', hover: 'hover:bg-sky-500/20 hover:border-sky-500/40 hover:text-sky-300', active: 'bg-sky-500/20 text-sky-300 border-sky-500/40' },
+  pink: { text: 'text-pink-400', border: 'border-pink-500/30', hover: 'hover:bg-pink-500/20 hover:border-pink-500/40 hover:text-pink-300', active: 'bg-pink-500/20 text-pink-300 border-pink-500/40' },
+  teal: { text: 'text-teal-400', border: 'border-teal-500/30', hover: 'hover:bg-teal-500/20 hover:border-teal-500/40 hover:text-teal-300', active: 'bg-teal-500/20 text-teal-300 border-teal-500/40' },
 }
 
 const badgeColorClasses = {
@@ -369,14 +371,16 @@ export interface CollapseButtonProps {
   collapsed: boolean
   onToggle: () => void
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  color?: IconButtonColor
   tooltipPosition?: 'bottom' | 'bottom-left' | 'left' | 'right' | 'top' | 'top-left' | 'top-right'
 }
 
-export function CollapseButton({ collapsed, onToggle, size = 'xss', tooltipPosition = 'bottom-left' }: CollapseButtonProps) {
+export function CollapseButton({ collapsed, onToggle, size = 'xss', color, tooltipPosition = 'bottom-left' }: CollapseButtonProps) {
   return (
     <IconButton
       icon={collapsed ? 'chevrons-up-down' : 'chevrons-down-up'}
       onClick={onToggle}
+      color={color}
       tooltip={{
         title: collapsed ? 'Expand all' : 'Collapse all',
         description: collapsed ? 'Expand all folders' : 'Collapse all folders',

package/components/ui/input.tsx

@@ -38,7 +38,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
 }
 
 const sizeClasses = {
-  xss: 'px-1 py-0.5 text-[10px]',
+  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',

package/components/ui/label.tsx

@@ -5,7 +5,7 @@
  * Matches the SeedrBadges border-focused style: colored border + text, no background.
  *
  * Features:
- * - 14 color variants
+ * - 15 color variants
  * - Required leading icon and tooltip (always cursor-help)
  * - Optional trailing icons
  * - Text transform with smart capitalize (handles after-dash)
@@ -30,6 +30,7 @@ export type LabelColor =
   | 'teal'
   | 'violet'
   | 'pink'
+  | 'sky'
 
 export interface LabelProps {
   text: string
@@ -63,6 +64,7 @@ const colorClasses: Record<LabelColor, string> = {
   teal: 'border-teal-500/50 text-teal-400',
   violet: 'border-violet-500/50 text-violet-400',
   pink: 'border-pink-500/50 text-pink-400',
+  sky: 'border-sky-500/50 text-sky-400',
 }
 
 const progressFillColors: Record<LabelColor, string> = {
@@ -80,13 +82,14 @@ const progressFillColors: Record<LabelColor, string> = {
   teal: 'bg-teal-500/20',
   violet: 'bg-violet-500/20',
   pink: 'bg-pink-500/20',
+  sky: 'bg-sky-500/20',
 }
 
 const sizeConfig = {
-  xss: { height: 14, padding: 'px-1', text: 'text-[9px]', iconSize: 'w-2 h-2', gap: 'gap-0.5' },
-  xs: { height: 16, padding: 'px-1.5', text: 'text-[10px]', iconSize: 'w-2.5 h-2.5', gap: 'gap-1' },
-  sm: { height: 18, padding: 'px-1.5', text: 'text-[10px]', iconSize: 'w-2.5 h-2.5', gap: 'gap-1.5' },
-  md: { height: 20, padding: 'px-1.5', text: 'text-[11px]', iconSize: 'w-3 h-3', gap: 'gap-1' },
+  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' },
 }
 

package/components/ui/modal.tsx

@@ -61,7 +61,7 @@ function Modal({ isOpen, onClose, title, children, kind = 'info', size = 'md', h
 
   return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="absolute inset-0 bg-[var(--dialog-backdrop)] backdrop-blur-sm" onClick={onClose} />
       <div
         ref={modalRef}
         data-testid={testId}

package/components/ui/nav-card.tsx

@@ -51,7 +51,7 @@ export function NavCard({
       disabled={disabled}
       className={cn(
         'relative w-full text-left rounded-lg border border-neutral-700 bg-neutral-800 p-4 transition-all duration-200 cursor-pointer',
-        !disabled && 'hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/20 hover:border-neutral-600 hover:bg-neutral-700',
+        !disabled && 'hover:-translate-y-0.5 hover:border-neutral-600 hover:bg-neutral-700',
         disabled && 'opacity-50 cursor-not-allowed',
         className,
       )}

package/components/ui/navigation-bar.tsx

@@ -69,7 +69,7 @@ export interface NavigationBarProps {
 }
 
 const sizeConfig = {
-  xss: { text: 'text-[10px]', segIcon: 'w-2.5 h-2.5', navIcon: 'w-2.5 h-2.5', navBtn: 'w-[18px] h-[18px] rounded-[3px]', px: 'px-1', py: 'py-0.5', sep: 'w-2 h-2', divH: 'h-3' },
+  xss: { text: 'text-xss', segIcon: 'w-2.5 h-2.5', navIcon: 'w-2.5 h-2.5', navBtn: 'w-[18px] h-[18px] rounded-[3px]', px: 'px-1', py: 'py-0.5', sep: 'w-2 h-2', divH: 'h-3' },
   xs:  { text: 'text-xs', segIcon: 'w-3 h-3', navIcon: 'w-3 h-3', navBtn: 'w-6 h-6 rounded-[5px]', px: 'px-1.5', py: 'py-0.5', sep: 'w-2.5 h-2.5', divH: 'h-3.5' },
   sm:  { text: 'text-sm', segIcon: 'w-3.5 h-3.5', navIcon: 'w-3.5 h-3.5', navBtn: 'w-7 h-7 rounded-md', px: 'px-2', py: 'py-1', sep: 'w-3 h-3', divH: 'h-4' },
   md:  { text: 'text-base', segIcon: 'w-4 h-4', navIcon: 'w-4 h-4', navBtn: 'w-8 h-8 rounded-md', px: 'px-2.5', py: 'py-1', sep: 'w-3.5 h-3.5', divH: 'h-5' },

package/components/ui/number-input.tsx

@@ -16,7 +16,7 @@ export interface NumberInputProps {
 }
 
 const SIZE_CONFIG = {
-  xss: { wrapper: 'h-[18px]', input: 'px-1 text-[10px]', chevron: 'w-2.5 h-2.5', stepperW: 'w-4' },
+  xss: { wrapper: 'h-[18px]', input: 'px-1 text-xss', chevron: 'w-2.5 h-2.5', stepperW: 'w-4' },
   xs: { wrapper: 'h-6', input: 'px-1.5 text-xs', chevron: 'w-2.5 h-2.5', stepperW: 'w-5' },
   sm: { wrapper: 'h-7', input: 'px-2 text-xs', chevron: 'w-3 h-3', stepperW: 'w-5' },
   md: { wrapper: 'h-8', input: 'px-3 text-sm', chevron: 'w-3 h-3', stepperW: 'w-6' },

package/components/ui/registry-card.tsx

@@ -412,7 +412,7 @@ export function RegistryCard(props: RegistryCardProps) {
           <Tooltip key={`pkg-${key}`} content={{ description: `${count} ${count === 1 ? label : labelPlural}` }} position="top">
             <span className="flex items-center gap-0.5">
               <Icon className={`w-3 h-3 ${color}`} />
-              <span className="text-[10px] text-neutral-500">{count}</span>
+              <span className="text-xss text-neutral-500">{count}</span>
             </span>
           </Tooltip>
         )]
@@ -469,7 +469,7 @@ export function RegistryCard(props: RegistryCardProps) {
       ...(props.stars != null && props.stars > 0 ? [(
         <CardClickable key="stars" onClick={() => props.onSortBy?.('stars')}>
           <Tooltip content={{ description: `${props.stars.toLocaleString()} stars \u00b7 Click to sort` }} position="top">
-            <span className="flex items-center gap-1 text-[10px] text-amber-400/80">
+            <span className="flex items-center gap-1 text-xss text-amber-400/80">
               <Star className="w-3 h-3" />
               {formatCount(props.stars)}
             </span>
@@ -479,7 +479,7 @@ export function RegistryCard(props: RegistryCardProps) {
       ...(props.downloads != null && props.downloads > 0 ? [(
         <CardClickable key="downloads" onClick={() => props.onSortBy?.('downloads')}>
           <Tooltip content={{ description: `${props.downloads.toLocaleString()} downloads \u00b7 Click to sort` }} position="top">
-            <span className="flex items-center gap-1 text-[10px] text-emerald-400/80">
+            <span className="flex items-center gap-1 text-xss text-emerald-400/80">
               <Download className="w-3 h-3" />
               {formatCount(props.downloads)}
             </span>
@@ -581,7 +581,7 @@ export function RegistryCard(props: RegistryCardProps) {
     if (props.installs != null && props.installs > 0) {
       bottomStats = [(
         <Tooltip key="installs" content={{ description: `${props.installs.toLocaleString()} installs` }} position="top">
-          <span className="flex items-center gap-1 text-[10px] text-neutral-500">
+          <span className="flex items-center gap-1 text-xss text-neutral-500">
             <Download className="w-3 h-3" />
             {props.installs.toLocaleString()}
           </span>
@@ -642,7 +642,7 @@ export function RegistryCard(props: RegistryCardProps) {
 
       {/* Error/warning message */}
       {errorMessage && (
-        <p className={`text-[11px] mb-2 break-all ${flash === 'warning' ? 'text-amber-400' : 'text-red-400'}`}>{errorMessage}</p>
+        <p className={`text-xss mb-2 break-all ${flash === 'warning' ? 'text-amber-400' : 'text-red-400'}`}>{errorMessage}</p>
       )}
 
       {/* Bottom row */}
@@ -650,7 +650,7 @@ export function RegistryCard(props: RegistryCardProps) {
         const dateNode = updatedAt ? (
           <Tooltip content={{ description: onDateClick ? `Last updated ${formatFullDate(updatedAt)} \u00b7 Click to sort by date` : `Last updated ${formatFullDate(updatedAt)}` }} position="top">
             <span
-              className={`flex items-center gap-1 text-[10px] text-neutral-500 whitespace-nowrap${onDateClick ? ' cursor-pointer hover:brightness-125 transition-all' : ''}`}
+              className={`flex items-center gap-1 text-xss text-neutral-500 whitespace-nowrap${onDateClick ? ' cursor-pointer hover:brightness-125 transition-all' : ''}`}
               onClick={onDateClick ? (e: MouseEvent) => { e.stopPropagation(); onDateClick() } : undefined}
             >
               <Clock className="w-3 h-3" />
@@ -690,7 +690,7 @@ export function RegistryCard(props: RegistryCardProps) {
         // Basic fallback: just install on confirm
         return (
           <div onClick={(e) => e.stopPropagation()}>
-            <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center" onClick={() => setShowScopeConfirm(false)}>
+            <div className="fixed inset-0 bg-[var(--background)]/50 z-50 flex items-center justify-center" onClick={() => setShowScopeConfirm(false)}>
               <div className="bg-neutral-800 border border-neutral-700 rounded-lg p-4 max-w-sm" onClick={(e) => e.stopPropagation()}>
                 <h3 className="text-sm font-medium text-neutral-200 mb-2">{ALREADY_AT_USER}</h3>
                 <p className="text-xs text-neutral-400 mb-4">