@toolr/ui-design 0.1.8 → 0.1.10

package/components/ui/editor-placeholder-card.tsx

@@ -1,6 +1,8 @@
 import { useState, useRef, useLayoutEffect } from 'react'
 import { IconButton, type ActionItem } from './icon-button.tsx'
 import { Input } from './input.tsx'
+import { useAccentColor } from '../lib/accent-context.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface EditorPlaceholderCardProps {
   /** Placeholder name (without braces) */
@@ -14,7 +16,7 @@ export interface EditorPlaceholderCardProps {
   /** Label for the value section (default: "Value:") */
   valueLabel?: string
   /** Color scheme */
-  accentColor?: 'purple' | 'blue' | 'neutral' | 'sky'
+  accentColor?: FormColor
   /** Action buttons to show on the right (e.g., edit/delete for settings) */
   actions?: ActionItem[]
   /** Show copy button that copies the {{PLACEHOLDER}} syntax */
@@ -27,23 +29,22 @@ export interface EditorPlaceholderCardProps {
   className?: string
 }
 
-const COLORS = {
-  purple: {
-    name: 'text-purple-400',
-    nameBg: 'bg-purple-500/10',
-  },
-  blue: {
-    name: 'text-blue-400',
-    nameBg: 'bg-blue-500/10',
-  },
-  neutral: {
-    name: 'text-neutral-400',
-    nameBg: 'bg-neutral-500/10',
-  },
-  sky: {
-    name: 'text-sky-400',
-    nameBg: 'bg-sky-500/10',
-  },
+const COLORS: Record<FormColor, { name: string; nameBg: string }> = {
+  blue: { name: 'text-blue-400', nameBg: 'bg-blue-500/10' },
+  green: { name: 'text-green-400', nameBg: 'bg-green-500/10' },
+  red: { name: 'text-red-400', nameBg: 'bg-red-500/10' },
+  orange: { name: 'text-orange-400', nameBg: 'bg-orange-500/10' },
+  cyan: { name: 'text-cyan-400', nameBg: 'bg-cyan-500/10' },
+  yellow: { name: 'text-yellow-400', nameBg: 'bg-yellow-500/10' },
+  purple: { name: 'text-purple-400', nameBg: 'bg-purple-500/10' },
+  indigo: { name: 'text-indigo-400', nameBg: 'bg-indigo-500/10' },
+  emerald: { name: 'text-emerald-400', nameBg: 'bg-emerald-500/10' },
+  amber: { name: 'text-amber-400', nameBg: 'bg-amber-500/10' },
+  violet: { name: 'text-violet-400', nameBg: 'bg-violet-500/10' },
+  neutral: { name: 'text-neutral-400', nameBg: 'bg-neutral-500/10' },
+  sky: { name: 'text-sky-400', nameBg: 'bg-sky-500/10' },
+  pink: { name: 'text-pink-400', nameBg: 'bg-pink-500/10' },
+  teal: { name: 'text-teal-400', nameBg: 'bg-teal-500/10' },
 }
 
 export function EditorPlaceholderCard({
@@ -52,20 +53,22 @@ export function EditorPlaceholderCard({
   value,
   required = false,
   valueLabel = 'Value:',
-  accentColor = 'purple',
+  accentColor,
   actions,
   showCopyPlaceholder = false,
   showCopyValue = false,
   hideValue = false,
   className = '',
 }: EditorPlaceholderCardProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'purple'
   const [isExpanded, setIsExpanded] = useState(false)
   const [isPlaceholderCopied, setIsPlaceholderCopied] = useState(false)
   const [isValueCopied, setIsValueCopied] = useState(false)
   const [isOverflowing, setIsOverflowing] = useState(false)
   const valueRef = useRef<HTMLDivElement>(null)
 
-  const colors = COLORS[accentColor]
+  const colors = COLORS[effectiveColor]
   const hasValue = !!value
 
   // Check if content overflows (truncated) - sync state with DOM measurement
@@ -123,7 +126,7 @@ export function EditorPlaceholderCard({
               icon={isPlaceholderCopied ? 'check' : 'copy'}
               onClick={handleCopyPlaceholder}
               size="sm"
-              color={isPlaceholderCopied ? 'green' : 'neutral'}
+              accentColor={isPlaceholderCopied ? 'green' : 'neutral'}
               tooltip={{ description: `Copy {{${name}}}` }}
               tooltipPosition="left"
             />
@@ -133,7 +136,7 @@ export function EditorPlaceholderCard({
               icon={isValueCopied ? 'check' : 'copy'}
               onClick={handleCopyValue}
               size="sm"
-              color={isValueCopied ? 'green' : 'neutral'}
+              accentColor={isValueCopied ? 'green' : 'neutral'}
               tooltip={{ description: 'Copy value to clipboard' }}
               tooltipPosition="left"
             />
@@ -156,7 +159,7 @@ export function EditorPlaceholderCard({
                   readOnly
                   size="xs"
                   variant="filled"
-                  color="neutral"
+                  accentColor="neutral"
 
                 />
               </div>
@@ -170,13 +173,14 @@ export function EditorPlaceholderCard({
                     icon={isExpanded ? 'chevron-up' : 'chevron-down'}
                     onClick={() => setIsExpanded(!isExpanded)}
                     size="xss"
+                    accentColor="neutral"
                     tooltip={{ description: isExpanded ? 'Show less' : 'Show more' }}
                   />
                 )}
               </div>
               <div
                 ref={valueRef}
-                className={`mt-1.5 px-2 py-1.5 bg-neutral-800/50 rounded text-sm text-neutral-400 font-mono ${
+                className={`mt-1.5 px-2 py-1.5 bg-neutral-960/50 rounded text-sm text-neutral-400 font-mono ${
                   isExpanded
                     ? 'whitespace-pre-wrap break-all max-h-[190px] overflow-y-auto'
                     : 'truncate'

package/components/ui/editor-toolbar.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { IconButton, type ActionItem } from './icon-button.tsx'
 import { Label } from './label.tsx'
 import { ConfirmModal } from './modal.tsx'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface EditorToolbarProps {
   /** Optional title displayed in the toolbar */
@@ -31,6 +32,7 @@ export interface EditorToolbarProps {
   leftActions?: ActionItem[]
   /** Optional: Additional action buttons on the right side (before save) */
   rightActions?: ActionItem[]
+  accentColor?: FormColor
 }
 
 export function EditorToolbar({
@@ -49,6 +51,7 @@ export function EditorToolbar({
   hasError = false,
   leftActions,
   rightActions,
+  accentColor: _accentColor,
 }: EditorToolbarProps) {
   const [showConfirmDialog, setShowConfirmDialog] = useState(false)
 
@@ -69,7 +72,7 @@ export function EditorToolbar({
 
   return (
     <>
-      <div className="flex items-center justify-between px-4 py-1.5 bg-neutral-900 border-b border-neutral-800">
+      <div className="flex items-center justify-between px-4 py-1.5 bg-neutral-980 border-b border-neutral-960">
         {/* Left side */}
         <div className="flex items-center gap-2">
           {(title || description) && (
@@ -85,7 +88,7 @@ export function EditorToolbar({
         {isDirty && (
           <Label
             text="modified"
-            color="yellow"
+            accentColor="yellow"
             icon="pencil"
             size="xs"
             tooltip={{ description: 'File has unsaved changes' }}
@@ -101,7 +104,7 @@ export function EditorToolbar({
               icon="rotate"
               onClick={handleResetClick}
               size="sm"
-              color="orange"
+              accentColor="orange"
               tooltip={resetTooltip}
             />
           )}
@@ -112,7 +115,7 @@ export function EditorToolbar({
               onClick={onSave}
               disabled={!isDirty || isSaving || hasError}
               size="sm"
-              color={isDirty && !hasError ? 'amber' : 'neutral'}
+              accentColor={isDirty && !hasError ? 'green' : 'neutral'}
               status={isSaving ? 'loading' : undefined}
               tooltip={{ description: 'Save changes to file' }}
             />

package/components/ui/execution-details-panel.tsx

@@ -6,10 +6,12 @@
  * Used inside ActionDialog as the mandatory execution details section.
  */
 
-import { AlertTriangle, Info } from 'lucide-react'
+import { AlertTriangle } from 'lucide-react'
 import { Checkbox } from './checkbox.tsx'
 import { cn } from '../lib/cn.ts'
 import type { DetailRow } from './detail-section.tsx'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor, AccentColorProvider } from '../lib/accent-context.ts'
 
 export interface ExecutionDetailsPanelProps {
   details: DetailRow[]
@@ -19,6 +21,7 @@ export interface ExecutionDetailsPanelProps {
   /** Warning message shown below the toggle */
   warningMessage?: string
   className?: string
+  accentColor?: FormColor
 }
 
 export function ExecutionDetailsPanel({
@@ -27,16 +30,17 @@ export function ExecutionDetailsPanel({
   onAllowDirectEditsChange,
   warningMessage,
   className,
+  accentColor: accentColorProp,
 }: ExecutionDetailsPanelProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColorProp ?? contextAccent ?? 'blue'
   const showToggle = onAllowDirectEditsChange !== undefined
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <div className={cn('space-y-3', className)}>
       {/* Header */}
-      <div className="flex items-center gap-2">
-        <Info className="w-4 h-4 text-neutral-500" />
-        <span className="font-medium text-neutral-400 text-md">Execution Details</span>
-      </div>
+      <div className="font-medium text-neutral-400 text-md">Execution Details:</div>
 
       {/* Direct edits toggle */}
       {showToggle && (
@@ -84,5 +88,6 @@ export function ExecutionDetailsPanel({
         </div>
       )}
     </div>
+    </AccentColorProvider>
   )
 }

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

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback, useRef, useMemo, type ReactNode } from 'react'
 import { FileCode, FolderTree, Loader2, AlertCircle, AlignLeft, Code2, Type } from 'lucide-react'
 import { type AccentColor, ACCENT_ICON } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 import { CollapseButton } from './icon-button.tsx'
 import { SegmentedToggle } from './segmented-toggle.tsx'
 import { FileTree, collectDirPaths, type FileTreeNode } from './file-tree.tsx'
@@ -124,10 +125,12 @@ export function FileStructureSection({
   format,
   language,
   default: defaultMode,
-  accentColor = 'blue',
+  accentColor: accentColorProp,
   renderPreview,
   initialHeight,
 }: FileStructureSectionProps) {
+  const contextAccent = useAccentColor()
+  const accentColor = accentColorProp ?? contextAccent ?? 'blue'
   const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null)
   const [fileContent, setFileContent] = useState<string | null>(null)
   const [fetchedFilePath, setFetchedFilePath] = useState<string | null>(null)
@@ -328,14 +331,14 @@ export function FileStructureSection({
   }
 
   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 flex-col bg-neutral-980 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-sm text-neutral-200 truncate flex-1">Files</span>
         <CollapseButton
           collapsed={allCollapsed}
           onToggle={() => setExpandedPaths(allCollapsed ? new Set(allDirPaths) : new Set())}
-          color={accentColor}
+          accentColor="neutral"
         />
       </div>
       <div className={`${variant === 'split' ? 'flex-1 overflow-y-auto' : ''} p-3`}>
@@ -353,7 +356,7 @@ export function FileStructureSection({
   )
 
   const previewPanel = effectiveFilePath ? (
-    <div className={`flex-1 flex flex-col bg-neutral-900 border ${ACCENT_BORDER[accentColor]} rounded-lg overflow-hidden`}>
+    <div className={`flex-1 flex flex-col bg-neutral-980 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-sm text-neutral-200 truncate flex-1">{selectedFileName}</span>

package/components/ui/file-tree.tsx

@@ -1,5 +1,6 @@
 import { FileCode, Folder, FolderOpen, ChevronRight, ChevronDown } from 'lucide-react'
 import { ACCENT_ICON, type AccentColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 export interface FileTreeNode {
   name: string
@@ -57,7 +58,8 @@ export function collectDirPaths(nodes: FileTreeNode[], rootName?: string, prefix
   return paths
 }
 
-export function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix = '', expandedPaths, onTogglePath, accentColor = 'blue' }: FileTreeProps) {
+export function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix = '', expandedPaths, onTogglePath, accentColor: accentColorProp }: FileTreeProps) {
+  const accentColor = accentColorProp ?? useAccentColor() ?? 'blue'
   if (rootName) {
     const rootNode: FileTreeNode = { name: rootName, type: 'directory', children: nodes }
     return (

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>
   )
 }