@toolr/ui-design 0.1.8 → 0.1.9

package/components/ui/filter-dropdown.tsx

@@ -1,13 +1,15 @@
-import { useState, useEffect, useRef, type ReactNode } from 'react'
+import { useState, useEffect, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
 import { ChevronDown, Check, X, Search, Filter } from 'lucide-react'
 import { useClickOutside } from '../hooks/use-click-outside.ts'
-import { useDropdownMaxHeight } from '../hooks/use-dropdown-max-height.ts'
+import { useDropdownPortal } from '../hooks/use-dropdown-portal.ts'
 import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 const SEARCH_THRESHOLD = 20
 
 const VARIANT_CLASSES = {
-  filled: { bg: 'bg-neutral-800', hoverBg: 'hover:bg-neutral-700' },
+  filled: { bg: 'bg-neutral-960', hoverBg: 'hover:bg-neutral-700' },
   outline: { bg: 'bg-transparent', hoverBg: 'hover:bg-neutral-700' },
 }
 
@@ -19,7 +21,7 @@ export interface FilterDropdownProps {
   labelExtra?: ReactNode
   clearable?: boolean
   variant?: 'filled' | 'outline'
-  color?: FormColor
+  accentColor?: FormColor
 }
 
 export function FilterDropdown({
@@ -30,19 +32,20 @@ export function FilterDropdown({
   labelExtra,
   clearable = true,
   variant = 'outline',
-  color = 'blue',
+  accentColor,
 }: FilterDropdownProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const [isOpen, setIsOpen] = useState(false)
   const [search, setSearch] = useState('')
   const [highlightIdx, setHighlightIdx] = useState(-1)
-  const ref = useRef<HTMLDivElement>(null)
-  const menuRef = useDropdownMaxHeight<HTMLDivElement>(isOpen)
-  const searchRef = useRef<HTMLInputElement>(null)
+  const { triggerRef, menuRef, position } = useDropdownPortal(isOpen)
+  const searchRef = { current: null as HTMLInputElement | null }
   const isActive = value !== 'all'
   const showSearch = options.length > SEARCH_THRESHOLD
   const v = VARIANT_CLASSES[variant]
 
-  useClickOutside(ref, isOpen, () => setIsOpen(false))
+  useClickOutside([triggerRef, menuRef], isOpen, () => setIsOpen(false))
 
   useEffect(() => {
     if (!isOpen) { setSearch(''); setHighlightIdx(-1) }
@@ -85,21 +88,85 @@ export function FilterDropdown({
     }
   }
 
+  const menu = isOpen && createPortal(
+    <div
+      ref={menuRef}
+      role="listbox"
+      style={{ position: 'fixed', top: position.top, left: position.left, minWidth: position.minWidth, zIndex: 9999 }}
+      className={`whitespace-nowrap bg-[var(--popover)] border ${FORM_COLORS[effectiveColor].border} rounded-lg shadow-lg overflow-hidden`}
+    >
+      {showSearch && (
+        <div className={`sticky top-0 p-1.5 bg-[var(--popover)] border-b ${FORM_COLORS[effectiveColor].border} z-10`}>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-neutral-500" />
+            <input
+              ref={(el) => { searchRef.current = el }}
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Search..."
+              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[effectiveColor].focus}`}
+            />
+          </div>
+        </div>
+      )}
+      {hasAllOption && (
+        <button
+          data-idx={0}
+          onClick={() => handleSelect('all')}
+          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[effectiveColor].selectedBg} text-neutral-200`
+              : !isActive ? `${FORM_COLORS[effectiveColor].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
+          }`}
+        >
+          <Check className={`w-3 h-3 shrink-0 ${!isActive ? FORM_COLORS[effectiveColor].accent : 'invisible'}`} />
+          <span>All</span>
+        </button>
+      )}
+      {filtered.map((opt, i) => {
+        const idx = i + (hasAllOption ? 1 : 0)
+        const isHighlighted = highlightIdx === idx
+        const isSelected = value === opt.value
+        return (
+          <button
+            key={opt.value}
+            data-idx={idx}
+            onClick={() => handleSelect(opt.value)}
+            className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors cursor-pointer ${
+              isHighlighted
+                ? `${FORM_COLORS[effectiveColor].selectedBg} text-neutral-200`
+                : isSelected ? `${FORM_COLORS[effectiveColor].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
+            }`}
+          >
+            <Check className={`w-3 h-3 shrink-0 ${isSelected ? FORM_COLORS[effectiveColor].accent : 'invisible'}`} />
+            <span>{opt.label}</span>
+          </button>
+        )
+      })}
+      {showSearch && search && filtered.length === 0 && (
+        <div className="px-3 py-2 text-sm text-neutral-500">No matches</div>
+      )}
+    </div>,
+    document.body,
+  )
+
   return (
-    <div className="relative flex items-center" ref={ref} onKeyDown={handleKeyDown}>
+    <div className="relative flex items-center" ref={triggerRef} onKeyDown={handleKeyDown}>
       <button
         aria-expanded={isOpen}
         aria-haspopup="listbox"
         onClick={() => setIsOpen(!isOpen)}
-        className={`flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-sm transition-colors cursor-pointer ${
+        className={`flex items-center gap-1.5 py-1 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}`
+            ? `${clearable ? 'rounded-r-none border-r-0' : ''} ${FORM_COLORS[effectiveColor].border} text-neutral-200 ${FORM_COLORS[effectiveColor].hover}`
             : isOpen
-              ? `${FORM_COLORS[color].border} text-neutral-200`
-              : `${FORM_COLORS[color].border} text-neutral-400 ${FORM_COLORS[color].hover} hover:text-neutral-200`
+              ? `${FORM_COLORS[effectiveColor].border} text-neutral-200`
+              : `${FORM_COLORS[effectiveColor].border} text-neutral-400 ${FORM_COLORS[effectiveColor].hover} hover:text-neutral-200`
         }`}
       >
-        <Filter className={`w-3 h-3 ${isActive ? FORM_COLORS[color].accent : ''}`} />
+        <Filter className={`w-3 h-3 ${isActive ? FORM_COLORS[effectiveColor].accent : ''}`} />
         {labelExtra}
         <span className="truncate">{selectedLabel}</span>
         <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
@@ -108,69 +175,12 @@ export function FilterDropdown({
         <button
           aria-label="Clear filter"
           onClick={() => onChange('all')}
-          className={`flex items-center justify-center h-7 px-1.5 rounded-r-md border border-l-0 ${FORM_COLORS[color].border} ${v.bg} text-neutral-400 ${FORM_COLORS[color].hover} hover:text-neutral-200 transition-colors cursor-pointer`}
+          className={`flex items-center justify-center py-1 px-1.5 rounded-r-md border border-l-0 ${FORM_COLORS[effectiveColor].border} ${v.bg} text-neutral-400 ${FORM_COLORS[effectiveColor].hover} hover:text-neutral-200 transition-colors cursor-pointer`}
         >
           <X className="w-3 h-3" />
         </button>
       )}
-
-      {isOpen && (
-        <div ref={menuRef} role="listbox" 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-lg 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">
-                <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-neutral-500" />
-                <input
-                  ref={searchRef}
-                  type="text"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  onKeyDown={handleKeyDown}
-                  placeholder="Search..."
-                  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>
-          )}
-          {hasAllOption && (
-            <button
-              data-idx={0}
-              onClick={() => handleSelect('all')}
-              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}`
-              }`}
-            >
-              <Check className={`w-3 h-3 shrink-0 ${!isActive ? FORM_COLORS[color].accent : 'invisible'}`} />
-              <span>All</span>
-            </button>
-          )}
-          {filtered.map((opt, i) => {
-            const idx = i + (hasAllOption ? 1 : 0)
-            const isHighlighted = highlightIdx === idx
-            const isSelected = value === opt.value
-            return (
-              <button
-                key={opt.value}
-                data-idx={idx}
-                onClick={() => handleSelect(opt.value)}
-                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}`
-                }`}
-              >
-                <Check className={`w-3 h-3 shrink-0 ${isSelected ? FORM_COLORS[color].accent : 'invisible'}`} />
-                <span>{opt.label}</span>
-              </button>
-            )
-          })}
-          {showSearch && search && filtered.length === 0 && (
-            <div className="px-3 py-2 text-sm text-neutral-500">No matches</div>
-          )}
-        </div>
-      )}
+      {menu}
     </div>
   )
 }

package/components/ui/form-actions.tsx

@@ -1,4 +1,6 @@
 import { IconButton, type IconName, type IconButtonProps, type IconButtonStatus } from './icon-button.tsx'
+import { AccentColorProvider, useAccentColor } from '../lib/accent-context.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 import { cn } from '../lib/cn.ts'
 
 export interface FormActionsProps {
@@ -18,7 +20,7 @@ export interface FormActionsProps {
   onConfirm?: () => void
   confirmTooltip?: string
   confirmIcon?: IconName
-  confirmColor?: IconButtonProps['color']
+  confirmColor?: IconButtonProps['accentColor']
   confirmDisabled?: boolean
   confirmStatus?: IconButtonStatus
 
@@ -31,6 +33,7 @@ export interface FormActionsProps {
 
   border?: boolean
   padding?: 'compact' | 'normal' | 'modal'
+  accentColor?: FormColor
 }
 
 const PADDING_CLASSES = {
@@ -65,11 +68,15 @@ export function FormActions({
   statusText,
   border,
   padding = 'normal',
+  accentColor,
 }: FormActionsProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const showBorder = border ?? DEFAULT_BORDER[padding]
   const hasLeft = onBack || statusText
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <div className={cn(
       'flex items-center gap-2',
       hasLeft ? 'justify-between' : 'justify-end',
@@ -81,7 +88,7 @@ export function FormActions({
           {onBack && (
             <IconButton
               icon="arrow-left"
-              color="neutral"
+              accentColor="neutral"
               onClick={onBack}
               tooltip={{ description: backTooltip }}
             />
@@ -93,7 +100,7 @@ export function FormActions({
         {onMinimize && (
           <IconButton
             icon="minimize"
-            color="neutral"
+            accentColor="neutral"
             onClick={onMinimize}
             tooltip={{ description: minimizeTooltip }}
           />
@@ -101,7 +108,7 @@ export function FormActions({
         {onCancel && (
           <IconButton
             icon="x"
-            color="neutral"
+            accentColor="neutral"
             onClick={onCancel}
             tooltip={{ description: cancelTooltip }}
           />
@@ -109,7 +116,7 @@ export function FormActions({
         {onConfirm && (
           <IconButton
             icon={confirmIcon}
-            color={confirmColor}
+            accentColor={confirmColor}
             onClick={onConfirm}
             disabled={confirmDisabled}
             status={confirmStatus}
@@ -119,12 +126,13 @@ export function FormActions({
         {onNext && (
           <IconButton
             icon="arrow-right"
-            color="blue"
+            accentColor="neutral"
             onClick={onNext}
             tooltip={{ description: nextTooltip }}
           />
         )}
       </div>
     </div>
+    </AccentColorProvider>
   )
 }

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

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react'
 import { ChevronRight } from 'lucide-react'
 import { Checkbox } from './checkbox.tsx'
+import { AccentColorProvider, useAccentColor } from '../lib/accent-context.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface FrontmatterFormHeaderProps {
   collapsed: boolean
@@ -13,6 +15,7 @@ export interface FrontmatterFormHeaderProps {
   /** Toggle frontmatter on/off */
   onFrontmatterToggle?: (enabled: boolean) => void
   readOnly?: boolean
+  accentColor?: FormColor
 }
 
 export function FrontmatterFormHeader({
@@ -23,16 +26,20 @@ export function FrontmatterFormHeader({
   frontmatterEnabled,
   onFrontmatterToggle,
   readOnly,
+  accentColor,
 }: FrontmatterFormHeaderProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const hasFm = frontmatterEnabled !== false
 
   return (
-    <div className="bg-neutral-900 border-b border-neutral-800 select-none">
+    <AccentColorProvider value={effectiveColor}>
+    <div className="bg-neutral-980 border-b border-neutral-960 select-none">
       {/* Header bar — always visible, always expandable */}
       <button
         type="button"
         onClick={onToggle}
-        className="flex items-center gap-2 w-full px-3 py-3 hover:bg-neutral-800/50 cursor-pointer transition-colors"
+        className="flex items-center gap-2 w-full px-3 py-3 hover:bg-neutral-960/50 cursor-pointer transition-colors"
       >
         <ChevronRight
           className={`w-3.5 h-3.5 text-neutral-500 transition-transform duration-150 ${
@@ -76,5 +83,6 @@ export function FrontmatterFormHeader({
         </div>
       )}
     </div>
+    </AccentColorProvider>
   )
 }

package/components/ui/icon-button.tsx

@@ -37,9 +37,12 @@ import {
   PanelBottomClose,
   Package, Wrench, Store, ScrollText, Cpu, FlaskConical, Layers, Timer, Camera,
   AlertCircle, FileCode, Gauge, Home, PieChart, Settings2,
+  FolderSearch, PanelLeftClose, History,
+  Github, Gitlab, GitBranch,
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import { type AccentColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 import { Tooltip, type TooltipContent } from './tooltip.tsx'
 
 export const iconMap = {
@@ -140,6 +143,14 @@ export const iconMap = {
   'home': Home,
   'pie-chart': PieChart,
   'settings-2': Settings2,
+  'folder-search': FolderSearch,
+  'panel-left-close': PanelLeftClose,
+  'trash-2': Trash2,
+  'rotate-ccw': RotateCcw,
+  'history': History,
+  'github': Github,
+  'gitlab': Gitlab,
+  'git-branch': GitBranch,
 } as const
 
 export type IconName = keyof typeof iconMap
@@ -147,7 +158,7 @@ export type IconName = keyof typeof iconMap
 export interface ActionItem {
   icon: IconName
   onClick: () => void
-  color?: IconButtonColor
+  accentColor?: IconButtonColor
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
   variant?: IconButtonVariant
   tooltip?: TooltipContent
@@ -169,11 +180,11 @@ export interface IconButtonProps {
   /** When provided, renders an <a> tag instead of <button>. Opens in a new tab. */
   href?: string
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
-  color?: IconButtonColor
+  accentColor?: IconButtonColor
   variant?: IconButtonVariant
   active?: boolean
   disabled?: boolean
-  /** Async action status. Overrides icon, color, and active state when set. */
+  /** Async action status. Overrides icon, accentColor, and active state when set. */
   status?: IconButtonStatus
   /** Tooltip shown on hover. Title and description are required. */
   tooltip?: TooltipContent
@@ -276,7 +287,7 @@ export function IconButton({
   onClick,
   href,
   size = 'sm',
-  color = 'neutral',
+  accentColor,
   variant = 'outline',
   active = false,
   disabled = false,
@@ -289,7 +300,9 @@ export function IconButton({
   className = '',
   testId,
 }: IconButtonProps) {
-  const resolvedColor = status ? (statusConfig[status].color ?? color) : color
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'neutral'
+  const resolvedColor = status ? (statusConfig[status].color ?? effectiveColor) : effectiveColor
   const resolvedActive = status ? statusConfig[status].active : active
 
   const colorStyle = colorClasses[resolvedColor] ?? colorClasses.neutral
@@ -299,7 +312,7 @@ export function IconButton({
   const borderClass = isOutline ? colorStyle.border : 'border-neutral-600'
 
   const sharedClassName = `
-    relative flex items-center justify-center border transition-colors ${isOutline ? '' : 'bg-neutral-800'}
+    relative flex items-center justify-center border transition-colors ${isOutline ? '' : 'bg-neutral-960'}
     ${sizeClasses[size]}
     ${colorStyle.text} ${borderClass}
     ${resolvedActive ? colorStyle.active : ''}
@@ -372,16 +385,16 @@ export interface CollapseButtonProps {
   collapsed: boolean
   onToggle: () => void
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
-  color?: IconButtonColor
+  accentColor?: IconButtonColor
   tooltipPosition?: 'bottom' | 'bottom-left' | 'left' | 'right' | 'top' | 'top-left' | 'top-right'
 }
 
-export function CollapseButton({ collapsed, onToggle, size = 'xss', color, tooltipPosition = 'bottom-left' }: CollapseButtonProps) {
+export function CollapseButton({ collapsed, onToggle, size = 'xss', accentColor, tooltipPosition = 'bottom-left' }: CollapseButtonProps) {
   return (
     <IconButton
       icon={collapsed ? 'chevrons-up-down' : 'chevrons-down-up'}
       onClick={onToggle}
-      color={color}
+      accentColor={accentColor}
       tooltip={{
         title: collapsed ? 'Expand all' : 'Collapse all',
         description: collapsed ? 'Expand all folders' : 'Collapse all folders',

package/components/ui/input.tsx

@@ -21,6 +21,7 @@ import { forwardRef, useEffect, useId, useRef, useState, type InputHTMLAttribute
 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'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
   value: string
@@ -29,7 +30,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   debounceMs?: number
   error?: boolean | string
   variant?: 'filled' | 'outline'
-  color?: FormColor
+  accentColor?: FormColor
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
   mono?: boolean
   /** Test ID for E2E testing */
@@ -47,7 +48,7 @@ const sizeClasses = {
 }
 
 const variantClasses = {
-  filled: 'bg-neutral-800',
+  filled: 'bg-neutral-960',
   outline: 'bg-transparent',
 }
 
@@ -65,7 +66,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   debounceMs = 0,
   error,
   variant = 'outline',
-  color = 'blue',
+  accentColor,
   size = 'sm',
   disabled = false,
   className = '',
@@ -76,6 +77,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   onBlur: onBlurProp,
   ...props
 }, ref) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const hasError = Boolean(error)
   const hasAction = actionSlot && !disabled
   const [hovered, setHovered] = useState(false)
@@ -156,7 +159,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
             focus:outline-none transition-colors
             disabled:opacity-50 disabled:cursor-not-allowed
             ${sizeClasses[size]}
-            ${hasError ? 'border-red-500 focus:border-red-500' : `${variantClasses[variant]} ${FORM_COLORS[color].border} ${FORM_COLORS[color].focus}`}
+            ${hasError ? 'border-red-500 focus:border-red-500' : `${variantClasses[variant]} ${FORM_COLORS[effectiveColor].border} ${FORM_COLORS[effectiveColor].focus}`}
             ${mono ? 'font-mono' : ''}
             ${isSearch ? 'pl-8 pr-8' : (hasAction || isPassword) ? 'pr-8' : ''}
             ${className}

package/components/ui/label.tsx

@@ -20,7 +20,7 @@ export type LabelColor = AccentColor
 
 export interface LabelProps {
   text: string
-  color: LabelColor
+  accentColor: LabelColor
   /** Leading icon(s). Pass a single name or an array for multiple icons before text. */
   icon?: IconName | IconName[]
   /** Custom icon component. Takes precedence over icon. */
@@ -91,7 +91,7 @@ function transformText(text: string, textTransform?: 'capitalize' | 'lowercase'
 
 export function Label({
   text,
-  color,
+  accentColor,
   icon,
   IconComponent: CustomIcon,
   tooltip,
@@ -112,7 +112,7 @@ export function Label({
     s.text,
     'border rounded font-medium leading-none',
     hasProgress ? 'relative overflow-hidden' : '',
-    colorClasses[color],
+    colorClasses[accentColor],
     onClick ? 'cursor-pointer hover:brightness-125 transition-all' : 'cursor-help',
     className,
   ]
@@ -129,7 +129,7 @@ export function Label({
           aria-valuenow={Math.min(progress, 100)}
           aria-valuemin={0}
           aria-valuemax={100}
-          className={`absolute inset-y-0 left-0 ${progressFillColors[color]} rounded-[inherit]`}
+          className={`absolute inset-y-0 left-0 ${progressFillColors[accentColor]} rounded-[inherit]`}
           style={{ width: `${Math.min(progress, 100)}%` }}
         />
       )}
@@ -142,7 +142,7 @@ export function Label({
           <span key={i} className={`${s.iconSize} flex-shrink-0 ${hasProgress ? 'relative' : ''}`}><Icon className={s.iconSize} /></span>
         ) : null
       })}
-      <span className={`min-w-0 truncate ${hasProgress ? 'relative' : ''}`} style={cssTransform ? { textTransform: cssTransform } : undefined}>
+      <span className={`min-w-0 truncate -mt-px ${hasProgress ? 'relative' : ''}`} style={cssTransform ? { textTransform: cssTransform } : undefined}>
         {transformText(text, textTransform)}
       </span>
     </>

package/components/ui/layout-tab-bar.tsx

@@ -3,6 +3,7 @@
 import { useState, useRef, useCallback, useEffect, type ReactNode } from 'react'
 import { ChevronLeft, ChevronRight, X } from 'lucide-react'
 import { cn } from '../lib/cn.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface LayoutTab {
   id: string
@@ -26,6 +27,7 @@ export interface LayoutTabBarProps {
   onClose?: (id: string) => void
   onReorder?: (fromIndex: number, toIndex: number) => void
   className?: string
+  accentColor?: FormColor
 }
 
 const COLORS: Record<string, { border: string; text: string }> = {
@@ -77,7 +79,7 @@ function getGradient(color?: string, isActive?: boolean): string | undefined {
     : `linear-gradient(135deg, rgba(${rgb}, 0.36) 0%, rgba(${rgb}, 0.06) 100%)`
 }
 
-export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className }: LayoutTabBarProps) {
+export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className, accentColor: _accentColor }: LayoutTabBarProps) {
   const scrollRef = useRef<HTMLDivElement>(null)
   const [showLeft, setShowLeft] = useState(false)
   const [showRight, setShowRight] = useState(false)
@@ -167,7 +169,7 @@ export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, cla
   // ── Render ────────────────────────────────────────────
 
   return (
-    <div className={cn('relative flex items-center min-h-12 flex-shrink-0 bg-neutral-900/80 border-b border-neutral-700/50', className)}>
+    <div className={cn('relative flex items-center min-h-12 flex-shrink-0 bg-neutral-980/80 border-b border-neutral-700/50', className)}>
       {showLeft && (
         <div className="flex items-center px-2 shrink-0">
           <button type="button" onClick={() => scroll('left')} className="text-neutral-500 hover:text-neutral-400 transition-colors cursor-pointer">
@@ -206,8 +208,8 @@ export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, cla
                 className={cn(
                   'group flex flex-col justify-start gap-0.5 px-2.5 rounded-t-lg cursor-pointer transition-all shrink-0 select-none relative border-t-2',
                   isActive
-                    ? cn('bg-neutral-800', borderC)
-                    : 'bg-neutral-800/50 text-neutral-400 hover:bg-neutral-800/80 hover:text-neutral-300 border-transparent opacity-60 hover:opacity-90',
+                    ? cn('bg-neutral-960', borderC)
+                    : 'bg-neutral-960/50 text-neutral-400 hover:bg-neutral-960/80 hover:text-neutral-300 border-transparent opacity-60 hover:opacity-90',
                   isDragged && 'opacity-50',
                 )}
                 style={{
@@ -269,7 +271,7 @@ export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, cla
         const ghostSubIconC = getTextClass(t.subtitleIconColor || t.subtitleColor || t.selectedColor || t.color)
         return (
           <div className="fixed z-50 pointer-events-none opacity-90" style={{ left: drag.x + 12, top: drag.y - 20 }}>
-            <div className={cn('flex flex-col gap-0.5 px-2.5 py-1.5 rounded-t-lg border-t-2 shadow-lg bg-neutral-800', ghostBorder)}>
+            <div className={cn('flex flex-col gap-0.5 px-2.5 py-1.5 rounded-t-lg border-t-2 shadow-lg bg-neutral-960', 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-md font-medium', ghostTitleC)}>{t.title}</span>