@toolr/ui-design 0.1.7 → 0.1.9

package/components/ui/files-panel.tsx

@@ -1,10 +1,12 @@
 /** File explorer panel with tree view, folder collapse/expand, search, and file selection. */
 
-import { useState, useMemo } from 'react'
+import { useState, useMemo, type ReactNode } from 'react'
 import { Folder, FolderOpen, File, FileCode, FileText, FileJson, Image, ChevronRight, Search, MoreVertical } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import { iconMap, type IconName } from './icon-button.tsx'
 import { cn } from '../lib/cn.ts'
+import { ACCENT_ICON, type AccentColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 const ACCENT_SELECTED: Record<string, string> = {
   blue: 'bg-blue-400/15 text-blue-400',
@@ -19,6 +21,19 @@ const ACCENT_SELECTED: Record<string, string> = {
   violet: 'bg-violet-400/15 text-violet-400',
 }
 
+const ACCENT_SELECTED_BG: Record<string, string> = {
+  blue: 'bg-blue-500/20',
+  purple: 'bg-purple-500/20',
+  orange: 'bg-orange-500/20',
+  green: 'bg-green-500/20',
+  pink: 'bg-pink-500/20',
+  amber: 'bg-amber-500/20',
+  emerald: 'bg-emerald-500/20',
+  teal: 'bg-teal-500/20',
+  sky: 'bg-sky-500/20',
+  violet: 'bg-violet-500/20',
+}
+
 const EXTENSION_ICON_MAP: Record<string, LucideIcon> = {
   ts: FileCode,
   tsx: FileCode,
@@ -54,9 +69,29 @@ export interface FilesPanelProps {
   showSearch?: boolean
   className?: string
   accentColor?: string
+  /** Right-click handler for tree nodes */
+  onContextMenu?: (e: React.MouseEvent, entry: FileEntry) => void
+  /** Path of the selected/highlighted folder (separate from file selection) */
+  selectedFolderPath?: string
+  /** Callback when a folder row is clicked (for folder selection). If set, chevron toggles expand while row selects. */
+  onSelectFolder?: (path: string) => void
+  /** Custom content rendered after the file/folder name (e.g. badges, labels) */
+  renderBadges?: (entry: FileEntry) => ReactNode
+  /** Custom hover actions rendered at the right edge of each row */
+  renderNodeActions?: (entry: FileEntry) => ReactNode
+  /** Set of paths that should render in a muted/dimmed style */
+  hiddenPaths?: Set<string>
+  /** Custom content above the tree (e.g. filter badges, creation inputs) */
+  header?: ReactNode
+  /** Custom footer content. When provided, replaces the default file count footer. */
+  footer?: ReactNode
+  /** Controlled expand state. When provided, FilesPanel uses this instead of internal state. */
+  expandedPaths?: Set<string>
+  /** Controlled toggle callback. Required when expandedPaths is provided. */
+  onToggleExpand?: (path: string) => void
 }
 
-function collectAllFolderPaths(entries: FileEntry[]): Set<string> {
+export function collectAllFolderPaths(entries: FileEntry[]): Set<string> {
   const paths = new Set<string>()
   function walk(items: FileEntry[]) {
     for (const entry of items) {
@@ -70,7 +105,7 @@ function collectAllFolderPaths(entries: FileEntry[]): Set<string> {
   return paths
 }
 
-function countFiles(entries: FileEntry[]): number {
+export function countFiles(entries: FileEntry[]): number {
   let count = 0
   for (const entry of entries) {
     if (entry.type === 'file') count++
@@ -79,6 +114,17 @@ function countFiles(entries: FileEntry[]): number {
   return count
 }
 
+export function countFolders(entries: FileEntry[]): number {
+  let count = 0
+  for (const entry of entries) {
+    if (entry.type === 'folder') {
+      count++
+      if (entry.children) count += countFolders(entry.children)
+    }
+  }
+  return count
+}
+
 function getFileIcon(entry: FileEntry): LucideIcon {
   if (entry.icon && iconMap[entry.icon]) return iconMap[entry.icon]!
   if (entry.type === 'folder') return Folder
@@ -112,61 +158,96 @@ interface FileNodeProps {
   entry: FileEntry
   depth: number
   selectedPath?: string
+  selectedFolderPath?: string
   expandedPaths: Set<string>
+  hiddenPaths?: Set<string>
   onToggleExpand: (path: string) => void
   onSelect?: (path: string) => void
+  onSelectFolder?: (path: string) => void
   onAction?: (action: string, path: string) => void
+  onContextMenu?: (e: React.MouseEvent, entry: FileEntry) => void
+  renderBadges?: (entry: FileEntry) => ReactNode
+  renderNodeActions?: (entry: FileEntry) => ReactNode
   accentColor: string
 }
 
-function FileNode({ entry, depth, selectedPath, expandedPaths, onToggleExpand, onSelect, onAction, accentColor }: FileNodeProps) {
+function FileNode({
+  entry, depth, selectedPath, selectedFolderPath, expandedPaths, hiddenPaths,
+  onToggleExpand, onSelect, onSelectFolder, onAction, onContextMenu,
+  renderBadges, renderNodeActions, accentColor,
+}: FileNodeProps) {
   const isFolder = entry.type === 'folder'
   const isExpanded = isFolder && expandedPaths.has(entry.path)
-  const isSelected = !isFolder && selectedPath === entry.path
+  const isFileSelected = !isFolder && selectedPath === entry.path
+  const isFolderSelected = isFolder && selectedFolderPath === entry.path
+  const isMuted = hiddenPaths?.has(entry.path)
   const Icon = isFolder ? getFolderIcon(isExpanded, entry) : getFileIcon(entry)
 
+  const hasFolderSelection = !!onSelectFolder
+  const handleClick = isFolder
+    ? (hasFolderSelection ? () => onSelectFolder!(entry.path) : () => onToggleExpand(entry.path))
+    : () => onSelect?.(entry.path)
+
+  const isHighlighted = isFileSelected || isFolderSelected
+
   return (
     <li>
-      <button
-        type="button"
-        onClick={isFolder ? () => onToggleExpand(entry.path) : () => onSelect?.(entry.path)}
+      <div
         className={cn(
-          'group flex items-center gap-1.5 w-full py-1 px-2 rounded text-sm transition-colors cursor-pointer',
-          isSelected
-            ? ACCENT_SELECTED[accentColor] ?? ACCENT_SELECTED.blue
+          'group/node relative flex items-center gap-1.5 w-full py-1 px-2 text-sm transition-colors cursor-pointer select-none',
+          isMuted && 'opacity-50',
+          isHighlighted
+            ? (isFolderSelected ? ACCENT_SELECTED_BG[accentColor] ?? ACCENT_SELECTED_BG.blue : ACCENT_SELECTED[accentColor] ?? ACCENT_SELECTED.blue)
             : 'text-neutral-400 hover:bg-neutral-700/40 hover:text-neutral-200',
         )}
         style={{ paddingLeft: `${depth * 16 + 8}px` }}
+        onClick={handleClick}
+        onContextMenu={onContextMenu ? (e) => onContextMenu(e, entry) : undefined}
       >
         {isFolder ? (
-          <ChevronRight
-            className={cn('w-3 h-3 shrink-0 transition-transform', isExpanded && 'rotate-90')}
-          />
+          hasFolderSelection ? (
+            // Chevron is a separate click target when folders have selection behavior
+            <span
+              className="shrink-0 p-0.5 -m-0.5 rounded hover:bg-neutral-600/40 cursor-pointer"
+              onClick={(e) => { e.stopPropagation(); onToggleExpand(entry.path) }}
+            >
+              <ChevronRight className={cn('w-3 h-3 transition-transform', isExpanded && 'rotate-90')} />
+            </span>
+          ) : (
+            <ChevronRight className={cn('w-3 h-3 shrink-0 transition-transform', isExpanded && 'rotate-90')} />
+          )
         ) : (
           <span className="w-3 shrink-0" />
         )}
         <Icon
-          className="w-3.5 h-3.5 shrink-0"
+          className={cn('w-3.5 h-3.5 shrink-0', !entry.color && (ACCENT_ICON[accentColor as AccentColor] ?? ACCENT_ICON.blue))}
           style={entry.color ? { color: entry.color } : undefined}
         />
         <span className="truncate">{entry.name}</span>
-        {entry.badge && (
+        {renderBadges ? renderBadges(entry) : entry.badge && (
           <span className="ml-auto shrink-0 px-1.5 py-0.5 text-xs rounded bg-neutral-700 text-neutral-500">
             {entry.badge}
           </span>
         )}
-        {onAction && (
+        {renderNodeActions ? (
+          <div
+            className="absolute right-2 top-1/2 -translate-y-1/2 hidden group-hover/node:flex items-center gap-0.5 bg-neutral-960/90 rounded px-0.5"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {renderNodeActions(entry)}
+          </div>
+        ) : onAction && (
           <span
             role="button"
             tabIndex={-1}
-            className="ml-auto shrink-0 opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-neutral-700 text-neutral-500 hover:text-neutral-200 transition-all"
+            className="ml-auto shrink-0 opacity-0 group-hover/node:opacity-100 p-0.5 rounded hover:bg-neutral-700 text-neutral-500 hover:text-neutral-200 transition-all"
             onClick={(e) => { e.stopPropagation(); onAction('menu', entry.path) }}
             onKeyDown={(e) => { if (e.key === 'Enter') { e.stopPropagation(); onAction('menu', entry.path) } }}
           >
             <MoreVertical className="w-3 h-3" />
           </span>
         )}
-      </button>
+      </div>
       {isFolder && isExpanded && entry.children && (
         <ul>
           {entry.children.map((child) => (
@@ -175,10 +256,16 @@ function FileNode({ entry, depth, selectedPath, expandedPaths, onToggleExpand, o
               entry={child}
               depth={depth + 1}
               selectedPath={selectedPath}
+              selectedFolderPath={selectedFolderPath}
               expandedPaths={expandedPaths}
+              hiddenPaths={hiddenPaths}
               onToggleExpand={onToggleExpand}
               onSelect={onSelect}
+              onSelectFolder={onSelectFolder}
               onAction={onAction}
+              onContextMenu={onContextMenu}
+              renderBadges={renderBadges}
+              renderNodeActions={renderNodeActions}
               accentColor={accentColor}
             />
           ))}
@@ -195,11 +282,25 @@ export function FilesPanel({
   onAction,
   showSearch = false,
   className,
-  accentColor = 'blue',
+  accentColor: accentColorProp,
+  onContextMenu,
+  selectedFolderPath,
+  onSelectFolder,
+  renderBadges,
+  renderNodeActions,
+  hiddenPaths,
+  header,
+  footer,
+  expandedPaths: controlledExpandedPaths,
+  onToggleExpand: controlledOnToggleExpand,
 }: FilesPanelProps) {
-  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => collectAllFolderPaths(files))
+  const accentColor = accentColorProp ?? useAccentColor() ?? 'blue'
+  const [internalExpandedPaths, setInternalExpandedPaths] = useState<Set<string>>(() => collectAllFolderPaths(files))
   const [searchQuery, setSearchQuery] = useState('')
 
+  const isControlled = controlledExpandedPaths !== undefined
+  const expandedPaths = isControlled ? controlledExpandedPaths : internalExpandedPaths
+
   const fileCount = useMemo(() => countFiles(files), [files])
 
   const displayedFiles = useMemo(
@@ -208,7 +309,11 @@ export function FilesPanel({
   )
 
   function handleToggleExpand(path: string) {
-    setExpandedPaths((prev: Set<string>) => {
+    if (isControlled) {
+      controlledOnToggleExpand?.(path)
+      return
+    }
+    setInternalExpandedPaths((prev: Set<string>) => {
       const next = new Set(prev)
       if (next.has(path)) next.delete(path)
       else next.add(path)
@@ -217,11 +322,14 @@ 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-xs font-semibold uppercase tracking-wider text-neutral-500">Files</span>
-        <span className="text-xs text-neutral-500">{fileCount} files</span>
-      </div>
+    <div className={cn('flex flex-col bg-neutral-960 rounded-lg overflow-hidden', className)}>
+      {!header && (
+        <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-700">
+          <span className="text-xs font-semibold uppercase tracking-wider text-neutral-500">Files</span>
+          <span className="text-xs text-neutral-500">{fileCount} files</span>
+        </div>
+      )}
+      {header}
       {showSearch && (
         <div className="px-2 py-2 border-b border-neutral-700">
           <div className="flex items-center gap-1.5 px-2 py-1 bg-[var(--background)] border border-neutral-700 rounded text-sm">
@@ -244,10 +352,16 @@ export function FilesPanel({
               entry={entry}
               depth={0}
               selectedPath={selectedPath}
+              selectedFolderPath={selectedFolderPath}
               expandedPaths={expandedPaths}
+              hiddenPaths={hiddenPaths}
               onToggleExpand={handleToggleExpand}
               onSelect={onSelect}
+              onSelectFolder={onSelectFolder}
               onAction={onAction}
+              onContextMenu={onContextMenu}
+              renderBadges={renderBadges}
+              renderNodeActions={renderNodeActions}
               accentColor={accentColor}
             />
           ))}
@@ -256,6 +370,12 @@ export function FilesPanel({
           <p className="text-xs text-neutral-500 text-center py-4">No files found</p>
         )}
       </div>
+      {footer}
+      {!footer && !header && (
+        <div className="flex items-center justify-between px-3 py-2 border-t border-neutral-700">
+          <span className="text-xs text-neutral-500">{fileCount} files</span>
+        </div>
+      )}
     </div>
   )
 }

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,89 +88,99 @@ 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="whitespace-nowrap">{selectedLabel}</span>
+        <span className="truncate">{selectedLabel}</span>
         <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
       {isActive && clearable && (
         <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} 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">
-                <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,7 @@
 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 {
   /** Cancel handler — renders X button. Optional (e.g. AlertModal has no cancel). */
@@ -17,7 +20,7 @@ export interface FormActionsProps {
   onConfirm?: () => void
   confirmTooltip?: string
   confirmIcon?: IconName
-  confirmColor?: IconButtonProps['color']
+  confirmColor?: IconButtonProps['accentColor']
   confirmDisabled?: boolean
   confirmStatus?: IconButtonStatus
 
@@ -30,6 +33,7 @@ export interface FormActionsProps {
 
   border?: boolean
   padding?: 'compact' | 'normal' | 'modal'
+  accentColor?: FormColor
 }
 
 const PADDING_CLASSES = {
@@ -64,22 +68,27 @@ export function FormActions({
   statusText,
   border,
   padding = 'normal',
+  accentColor,
 }: FormActionsProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const showBorder = border ?? DEFAULT_BORDER[padding]
-  const paddingClass = showBorder
-    ? `${PADDING_CLASSES[padding]} ${BORDER_CLASS}`
-    : PADDING_CLASSES[padding]
-
   const hasLeft = onBack || statusText
 
   return (
-    <div className={`flex items-center ${hasLeft ? 'justify-between' : 'justify-end'} gap-2 ${paddingClass}`}>
+    <AccentColorProvider value={effectiveColor}>
+    <div className={cn(
+      'flex items-center gap-2',
+      hasLeft ? 'justify-between' : 'justify-end',
+      PADDING_CLASSES[padding],
+      showBorder && BORDER_CLASS,
+    )}>
       {hasLeft && (
         <div className="flex items-center gap-2">
           {onBack && (
             <IconButton
               icon="arrow-left"
-              color="neutral"
+              accentColor="neutral"
               onClick={onBack}
               tooltip={{ description: backTooltip }}
             />
@@ -91,7 +100,7 @@ export function FormActions({
         {onMinimize && (
           <IconButton
             icon="minimize"
-            color="neutral"
+            accentColor="neutral"
             onClick={onMinimize}
             tooltip={{ description: minimizeTooltip }}
           />
@@ -99,7 +108,7 @@ export function FormActions({
         {onCancel && (
           <IconButton
             icon="x"
-            color="neutral"
+            accentColor="neutral"
             onClick={onCancel}
             tooltip={{ description: cancelTooltip }}
           />
@@ -107,7 +116,7 @@ export function FormActions({
         {onConfirm && (
           <IconButton
             icon={confirmIcon}
-            color={confirmColor}
+            accentColor={confirmColor}
             onClick={onConfirm}
             disabled={confirmDisabled}
             status={confirmStatus}
@@ -117,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>
   )
 }