@toolr/ui-design 0.1.2 → 0.1.3

package/components/lib/form-colors.ts

@@ -1,6 +1,7 @@
 export type FormColor =
   | 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow'
   | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky'
+  | 'pink' | 'teal'
 
 interface FormColorConfig {
   /** Idle border class (e.g. 'border-blue-500/30') */
@@ -29,4 +30,6 @@ export const FORM_COLORS: Record<FormColor, FormColorConfig> = {
   violet: { border: 'border-violet-500/30', hover: 'hover:bg-violet-500/20 hover:border-violet-500/40', focus: 'focus:border-violet-500', selectedBg: 'bg-violet-600/20', accent: 'text-violet-400' },
   neutral: { border: 'border-neutral-500/30', hover: 'hover:bg-neutral-500/20 hover:border-neutral-500/40', focus: 'focus:border-neutral-500', selectedBg: 'bg-neutral-600/20', accent: 'text-neutral-400' },
   sky: { border: 'border-sky-500/30', hover: 'hover:bg-sky-500/20 hover:border-sky-500/40', focus: 'focus:border-sky-500', selectedBg: 'bg-sky-600/20', accent: 'text-sky-400' },
+  pink: { border: 'border-pink-500/30', hover: 'hover:bg-pink-500/20 hover:border-pink-500/40', focus: 'focus:border-pink-500', selectedBg: 'bg-pink-600/20', accent: 'text-pink-400' },
+  teal: { border: 'border-teal-500/30', hover: 'hover:bg-teal-500/20 hover:border-teal-500/40', focus: 'focus:border-teal-500', selectedBg: 'bg-teal-600/20', accent: 'text-teal-400' },
 }

package/components/ui/badge.tsx

@@ -9,11 +9,11 @@
  * Features:
  * - Outline variant matching IconButton outline style (border + text, no fill)
  * - Accepts numbers (auto-caps at 99+) or short strings ("New")
- * - 13 color variants
+ * - 15 color variants
  * - 5 size variants (xss, xs, sm, md, lg)
  */
 
-export type BadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky'
+export type BadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
 
 export interface BadgeProps {
   value: number | string
@@ -37,6 +37,8 @@ const colorClasses: Record<BadgeColor, string> = {
   violet: 'border-violet-500/30 text-violet-400',
   neutral: 'border-neutral-500/30 text-neutral-400',
   sky: 'border-sky-500/30 text-sky-400',
+  pink: 'border-pink-500/30 text-pink-400',
+  teal: 'border-teal-500/30 text-teal-400',
 }
 
 const sizeClasses = {

package/components/ui/confirm-badge.tsx

@@ -7,13 +7,13 @@
  *
  * Features:
  * - Outline variant matching IconButton outline style (border + text, no fill)
- * - 13 color variants
+ * - 15 color variants
  * - 5 size variants (xss, xs, sm, md, lg)
  */
 
 import { Check } from 'lucide-react'
 
-export type ConfirmBadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky'
+export type ConfirmBadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
 
 export interface ConfirmBadgeProps {
   color?: ConfirmBadgeColor
@@ -36,6 +36,8 @@ const colorClasses: Record<ConfirmBadgeColor, string> = {
   violet: 'border-violet-500/30 text-violet-400',
   neutral: 'border-neutral-500/30 text-neutral-400',
   sky: 'border-sky-500/30 text-sky-400',
+  pink: 'border-pink-500/30 text-pink-400',
+  teal: 'border-teal-500/30 text-teal-400',
 }
 
 const sizeClasses = {

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 {
@@ -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/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">

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/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,6 +82,7 @@ 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 = {

package/components/ui/registry-detail.tsx

@@ -29,6 +29,7 @@ export interface RegistryDetailProps {
   // File structure (rendered when files + onFetchContent are provided)
   files?: FileStructureSectionProps['files']
   rootName?: string
+  fileStructureVariant?: FileStructureSectionProps['variant']
   onFetchContent?: FileStructureSectionProps['onFetchContent']
 
   // Above header (e.g. badge row)
@@ -145,6 +146,7 @@ export function RegistryDetail({
   compatibleTools,
   files,
   rootName,
+  fileStructureVariant,
   onFetchContent,
   aboveHeader,
   maxWidth = 'max-w-[1440px]',
@@ -210,6 +212,7 @@ export function RegistryDetail({
         {/* File structure */}
         {files && onFetchContent && rootName && (
           <FileStructureSection
+            variant={fileStructureVariant}
             files={files}
             rootName={rootName}
             onFetchContent={onFetchContent}

package/components/ui/resizable-textarea.tsx

@@ -176,8 +176,8 @@ function ResizableCode({
               inherit: true,
               rules: [],
               colors: {
-                'editor.background': variant === 'filled' ? '#262626' : '#00000000',
-                'editorGutter.background': variant === 'filled' ? '#262626' : '#00000000',
+                'editor.background': variant === 'filled' ? '#000000' : '#00000000',
+                'editorGutter.background': variant === 'filled' ? '#000000' : '#00000000',
                 'editor.lineHighlightBackground': '#00000000',
                 'editor.lineHighlightBorder': '#00000000',
               },

package/components/ui/segmented-toggle.tsx

@@ -12,7 +12,7 @@ export interface SegmentedToggleProps<T extends string> {
   options: SegmentedToggleOption<T>[]
   value: T
   onChange: (value: T) => void
-  accentColor?: 'blue' | 'purple' | 'orange' | 'green' | 'pink' | 'amber' | 'emerald' | 'teal' | 'sky'
+  accentColor?: 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
   /** Visual style: 'filled' (default) has a container background, 'outline' is transparent */
   variant?: 'filled' | 'outline'
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
@@ -51,38 +51,56 @@ const ROUNDING_CLASSES = {
 
 const ACTIVE_COLORS: Record<string, string> = {
   blue: 'bg-blue-500/20 text-blue-300 border-blue-500/40',
-  purple: 'bg-purple-500/20 text-purple-300 border-purple-500/40',
-  orange: 'bg-orange-500/20 text-orange-300 border-orange-500/40',
   green: 'bg-green-500/20 text-green-300 border-green-500/40',
-  pink: 'bg-pink-500/20 text-pink-300 border-pink-500/40',
-  amber: 'bg-amber-500/20 text-amber-300 border-amber-500/40',
+  red: 'bg-red-500/20 text-red-300 border-red-500/40',
+  orange: 'bg-orange-500/20 text-orange-300 border-orange-500/40',
+  cyan: 'bg-cyan-500/20 text-cyan-300 border-cyan-500/40',
+  yellow: 'bg-yellow-500/20 text-yellow-300 border-yellow-500/40',
+  purple: 'bg-purple-500/20 text-purple-300 border-purple-500/40',
+  indigo: 'bg-indigo-500/20 text-indigo-300 border-indigo-500/40',
   emerald: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40',
-  teal: 'bg-teal-500/20 text-teal-300 border-teal-500/40',
+  amber: 'bg-amber-500/20 text-amber-300 border-amber-500/40',
+  violet: 'bg-violet-500/20 text-violet-300 border-violet-500/40',
+  neutral: 'bg-neutral-500/20 text-neutral-300 border-neutral-500/40',
   sky: 'bg-sky-500/20 text-sky-300 border-sky-500/40',
+  pink: 'bg-pink-500/20 text-pink-300 border-pink-500/40',
+  teal: 'bg-teal-500/20 text-teal-300 border-teal-500/40',
 }
 
 const HOVER_COLORS: Record<string, string> = {
   blue: 'hover:bg-blue-500/15 hover:text-blue-300',
-  purple: 'hover:bg-purple-500/15 hover:text-purple-300',
-  orange: 'hover:bg-orange-500/15 hover:text-orange-300',
   green: 'hover:bg-green-500/15 hover:text-green-300',
-  pink: 'hover:bg-pink-500/15 hover:text-pink-300',
-  amber: 'hover:bg-amber-500/15 hover:text-amber-300',
+  red: 'hover:bg-red-500/15 hover:text-red-300',
+  orange: 'hover:bg-orange-500/15 hover:text-orange-300',
+  cyan: 'hover:bg-cyan-500/15 hover:text-cyan-300',
+  yellow: 'hover:bg-yellow-500/15 hover:text-yellow-300',
+  purple: 'hover:bg-purple-500/15 hover:text-purple-300',
+  indigo: 'hover:bg-indigo-500/15 hover:text-indigo-300',
   emerald: 'hover:bg-emerald-500/15 hover:text-emerald-300',
-  teal: 'hover:bg-teal-500/15 hover:text-teal-300',
+  amber: 'hover:bg-amber-500/15 hover:text-amber-300',
+  violet: 'hover:bg-violet-500/15 hover:text-violet-300',
+  neutral: 'hover:bg-neutral-500/15 hover:text-neutral-300',
   sky: 'hover:bg-sky-500/15 hover:text-sky-300',
+  pink: 'hover:bg-pink-500/15 hover:text-pink-300',
+  teal: 'hover:bg-teal-500/15 hover:text-teal-300',
 }
 
 const OUTLINE_CONTAINER: Record<string, string> = {
   blue: 'flex items-center border border-blue-500/50 rounded-md',
-  purple: 'flex items-center border border-purple-500/50 rounded-md',
-  orange: 'flex items-center border border-orange-500/50 rounded-md',
   green: 'flex items-center border border-green-500/50 rounded-md',
-  pink: 'flex items-center border border-pink-500/50 rounded-md',
-  amber: 'flex items-center border border-amber-500/50 rounded-md',
+  red: 'flex items-center border border-red-500/50 rounded-md',
+  orange: 'flex items-center border border-orange-500/50 rounded-md',
+  cyan: 'flex items-center border border-cyan-500/50 rounded-md',
+  yellow: 'flex items-center border border-yellow-500/50 rounded-md',
+  purple: 'flex items-center border border-purple-500/50 rounded-md',
+  indigo: 'flex items-center border border-indigo-500/50 rounded-md',
   emerald: 'flex items-center border border-emerald-500/50 rounded-md',
-  teal: 'flex items-center border border-teal-500/50 rounded-md',
+  amber: 'flex items-center border border-amber-500/50 rounded-md',
+  violet: 'flex items-center border border-violet-500/50 rounded-md',
+  neutral: 'flex items-center border border-neutral-500/50 rounded-md',
   sky: 'flex items-center border border-sky-500/50 rounded-md',
+  pink: 'flex items-center border border-pink-500/50 rounded-md',
+  teal: 'flex items-center border border-teal-500/50 rounded-md',
 }
 
 export function SegmentedToggle<T extends string>({

package/components/ui/select.tsx

@@ -134,7 +134,7 @@ export function Select<T extends string | number = string>({
       {isOpen && menuPos && createPortal(
         <div
           ref={menuRef}
-          className={`fixed z-[9999] whitespace-nowrap ${v.menuBg} backdrop-blur border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}
+          className={`fixed z-[9999] whitespace-nowrap ${v.menuBg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}
           style={{
             top: menuPos.top,
             left: align === 'right' ? undefined : menuPos.left,

package/components/ui/settings-card.tsx

@@ -0,0 +1,27 @@
+import { cn } from '../lib/cn.ts'
+
+export interface SettingsCardProps {
+  children: React.ReactNode
+  className?: string
+  title?: string
+  description?: string
+  testId?: string
+}
+
+export function SettingsCard({ children, className, title, description, testId }: SettingsCardProps) {
+  return (
+    <div
+      className={cn('bg-neutral-900 border border-neutral-800 rounded-lg p-4 space-y-4', className)}
+      data-testid={testId}
+    >
+      {title && (
+        <div>
+          <h3 className="text-sm font-medium text-neutral-200">{title}</h3>
+          {description && <p className="text-sm text-neutral-500 mt-1">{description}</p>}
+        </div>
+      )}
+      {!title && description && <p className="text-sm text-neutral-500">{description}</p>}
+      {children}
+    </div>
+  )
+}