@toolr/ui-design 0.1.0

package/components/ui/file-tree.tsx

@@ -0,0 +1,171 @@
+import { FileCode, Folder, ChevronRight, ChevronDown } from 'lucide-react'
+
+export interface FileTreeNode {
+  name: string
+  type: 'file' | 'directory'
+  children?: FileTreeNode[]
+}
+
+export interface FileTreeProps {
+  nodes: FileTreeNode[]
+  rootName?: string
+  selectedPath: string | null
+  onSelectFile: (path: string) => void
+  prefix?: string
+  expandedPaths: Set<string>
+  onTogglePath: (path: string) => void
+  accentColor?: string
+}
+
+const ACCENT_SELECTED: Record<string, string> = {
+  blue: 'bg-blue-400/20 text-neutral-200',
+  purple: 'bg-purple-400/20 text-neutral-200',
+  orange: 'bg-orange-400/20 text-neutral-200',
+  green: 'bg-green-400/20 text-neutral-200',
+  pink: 'bg-pink-400/20 text-neutral-200',
+  amber: 'bg-amber-400/20 text-neutral-200',
+  emerald: 'bg-emerald-400/20 text-neutral-200',
+  teal: 'bg-teal-400/20 text-neutral-200',
+  sky: 'bg-sky-400/20 text-neutral-200',
+}
+
+const ACCENT_ICON: Record<string, 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',
+}
+
+function nodeHasFiles(node: FileTreeNode): boolean {
+  if (node.type === 'file') return true
+  return !!node.children?.some(nodeHasFiles)
+}
+
+/** Collect all directory paths that would be rendered in the tree */
+export function collectDirPaths(nodes: FileTreeNode[], rootName?: string, prefix = ''): Set<string> {
+  const paths = new Set<string>()
+  function walk(children: FileTreeNode[], pathPrefix: string) {
+    for (const node of children.filter(nodeHasFiles)) {
+      if (node.type === 'directory') {
+        const path = pathPrefix ? `${pathPrefix}/${node.name}` : node.name
+        paths.add(path)
+        if (node.children) walk(node.children, path)
+      }
+    }
+  }
+  if (rootName) {
+    paths.add(rootName)
+    walk(nodes, rootName)
+  } else {
+    walk(nodes, prefix)
+  }
+  return paths
+}
+
+export function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix = '', expandedPaths, onTogglePath, accentColor = 'blue' }: FileTreeProps) {
+  if (rootName) {
+    const rootNode: FileTreeNode = { name: rootName, type: 'directory', children: nodes }
+    return (
+      <ul className="space-y-0.5">
+        <FileTreeNodeItem
+          node={rootNode}
+          path={rootName}
+          selectedPath={selectedPath}
+          onSelectFile={onSelectFile}
+          expandedPaths={expandedPaths}
+          onTogglePath={onTogglePath}
+          accentColor={accentColor}
+        />
+      </ul>
+    )
+  }
+
+  return (
+    <ul className="space-y-0.5">
+      {nodes.filter(nodeHasFiles).map((node) => {
+        const fullPath = prefix ? `${prefix}/${node.name}` : node.name
+        return (
+          <FileTreeNodeItem
+            key={node.name}
+            node={node}
+            path={fullPath}
+            selectedPath={selectedPath}
+            onSelectFile={onSelectFile}
+            expandedPaths={expandedPaths}
+            onTogglePath={onTogglePath}
+            accentColor={accentColor}
+          />
+        )
+      })}
+    </ul>
+  )
+}
+
+interface FileTreeNodeItemProps {
+  node: FileTreeNode
+  path: string
+  selectedPath: string | null
+  onSelectFile: (path: string) => void
+  expandedPaths: Set<string>
+  onTogglePath: (path: string) => void
+  accentColor: string
+}
+
+function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPaths, onTogglePath, accentColor }: FileTreeNodeItemProps) {
+  const isDir = node.type === 'directory'
+  const isSelected = !isDir && selectedPath === path
+  const expanded = isDir && expandedPaths.has(path)
+  const base = 'flex items-center gap-1.5 py-0.5 px-1 rounded text-xs transition-colors overflow-hidden whitespace-nowrap'
+  const selectedClass = ACCENT_SELECTED[accentColor] ?? ACCENT_SELECTED.blue
+  const iconColorClass = ACCENT_ICON[accentColor] ?? ACCENT_ICON.blue
+  const rowClass = isSelected
+    ? `${base} ${selectedClass}`
+    : isDir
+      ? `${base} cursor-pointer hover:text-neutral-200 text-neutral-400`
+      : `${base} cursor-pointer hover:bg-neutral-700/50 hover:text-neutral-200 text-neutral-400`
+
+  return (
+    <li>
+      <button
+        onClick={isDir ? () => onTogglePath(path) : () => onSelectFile(path)}
+        className={rowClass}
+      >
+        {isDir ? (
+          expanded ? <ChevronDown className="w-3 h-3 shrink-0" /> : <ChevronRight className="w-3 h-3 shrink-0" />
+        ) : (
+          <span className="w-3" />
+        )}
+        {isDir ? (
+          <Folder className={`w-3.5 h-3.5 shrink-0 ${iconColorClass}`} />
+        ) : (
+          <FileCode className={`w-3.5 h-3.5 shrink-0 ${isSelected ? iconColorClass : 'text-neutral-500'}`} />
+        )}
+        <span className="truncate">{node.name}</span>
+      </button>
+      {isDir && expanded && node.children && (
+        <ul className="ml-4 space-y-0.5">
+          {node.children.filter(nodeHasFiles).map((child) => {
+            const childPath = `${path}/${child.name}`
+            return (
+              <FileTreeNodeItem
+                key={child.name}
+                node={child}
+                path={childPath}
+                selectedPath={selectedPath}
+                onSelectFile={onSelectFile}
+                expandedPaths={expandedPaths}
+                onTogglePath={onTogglePath}
+                accentColor={accentColor}
+              />
+            )
+          })}
+        </ul>
+      )}
+    </li>
+  )
+}

package/components/ui/files-panel.tsx

@@ -0,0 +1,251 @@
+/** File explorer panel with tree view, folder collapse/expand, search, and file selection. */
+
+import { useState, useMemo } from 'react'
+import { Folder, FolderOpen, File, FileCode, FileText, FileJson, Image, ChevronRight, Search, MoreVertical } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import type { IconName } from './icon-button.tsx'
+import { cn } from '../lib/cn.ts'
+
+const iconSubset: Partial<Record<IconName, LucideIcon>> = {
+  folder: Folder,
+  file: File,
+  code: FileCode,
+  image: Image,
+  search: Search,
+}
+
+const EXTENSION_ICON_MAP: Record<string, LucideIcon> = {
+  ts: FileCode,
+  tsx: FileCode,
+  js: FileCode,
+  jsx: FileCode,
+  json: FileJson,
+  md: FileText,
+  mdx: FileText,
+  txt: FileText,
+  png: Image,
+  jpg: Image,
+  jpeg: Image,
+  svg: Image,
+  gif: Image,
+  webp: Image,
+}
+
+export interface FileEntry {
+  path: string
+  name: string
+  type: 'file' | 'folder'
+  icon?: IconName
+  color?: string
+  badge?: string
+  children?: FileEntry[]
+}
+
+export interface FilesPanelProps {
+  files: FileEntry[]
+  selectedPath?: string
+  onSelect?: (path: string) => void
+  onAction?: (action: string, path: string) => void
+  showSearch?: boolean
+  className?: string
+}
+
+function collectAllFolderPaths(entries: FileEntry[]): Set<string> {
+  const paths = new Set<string>()
+  function walk(items: FileEntry[]) {
+    for (const entry of items) {
+      if (entry.type === 'folder') {
+        paths.add(entry.path)
+        if (entry.children) walk(entry.children)
+      }
+    }
+  }
+  walk(entries)
+  return paths
+}
+
+function countFiles(entries: FileEntry[]): number {
+  let count = 0
+  for (const entry of entries) {
+    if (entry.type === 'file') count++
+    if (entry.children) count += countFiles(entry.children)
+  }
+  return count
+}
+
+function getFileIcon(entry: FileEntry): LucideIcon {
+  if (entry.icon && iconSubset[entry.icon]) return iconSubset[entry.icon]!
+  if (entry.type === 'folder') return Folder
+  const ext = entry.name.split('.').pop()?.toLowerCase()
+  if (ext && EXTENSION_ICON_MAP[ext]) return EXTENSION_ICON_MAP[ext]
+  return File
+}
+
+function getFolderIcon(expanded: boolean, entry: FileEntry): LucideIcon {
+  if (entry.icon && iconSubset[entry.icon]) return iconSubset[entry.icon]!
+  return expanded ? FolderOpen : Folder
+}
+
+function filterTree(entries: FileEntry[], query: string): FileEntry[] {
+  const q = query.toLowerCase()
+  const result: FileEntry[] = []
+  for (const entry of entries) {
+    if (entry.type === 'file') {
+      if (entry.name.toLowerCase().includes(q)) result.push(entry)
+    } else {
+      const filteredChildren = entry.children ? filterTree(entry.children, query) : []
+      if (entry.name.toLowerCase().includes(q) || filteredChildren.length > 0) {
+        result.push({ ...entry, children: filteredChildren.length > 0 ? filteredChildren : entry.children })
+      }
+    }
+  }
+  return result
+}
+
+interface FileNodeProps {
+  entry: FileEntry
+  depth: number
+  selectedPath?: string
+  expandedPaths: Set<string>
+  onToggleExpand: (path: string) => void
+  onSelect?: (path: string) => void
+  onAction?: (action: string, path: string) => void
+}
+
+function FileNode({ entry, depth, selectedPath, expandedPaths, onToggleExpand, onSelect, onAction }: FileNodeProps) {
+  const isFolder = entry.type === 'folder'
+  const isExpanded = isFolder && expandedPaths.has(entry.path)
+  const isSelected = !isFolder && selectedPath === entry.path
+  const Icon = isFolder ? getFolderIcon(isExpanded, entry) : getFileIcon(entry)
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={isFolder ? () => onToggleExpand(entry.path) : () => onSelect?.(entry.path)}
+        className={cn(
+          'group flex items-center gap-1.5 w-full py-1 px-2 rounded text-xs transition-colors cursor-pointer',
+          isSelected
+            ? 'bg-blue-400/15 text-blue-400'
+            : 'text-neutral-400 hover:bg-neutral-700/40 hover:text-neutral-200',
+        )}
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+      >
+        {isFolder ? (
+          <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"
+          style={entry.color ? { color: entry.color } : undefined}
+        />
+        <span className="truncate">{entry.name}</span>
+        {entry.badge && (
+          <span className="ml-auto shrink-0 px-1.5 py-0.5 text-[9px] rounded bg-neutral-700 text-neutral-500">
+            {entry.badge}
+          </span>
+        )}
+        {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"
+            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>
+      {isFolder && isExpanded && entry.children && (
+        <ul>
+          {entry.children.map((child) => (
+            <FileNode
+              key={child.path}
+              entry={child}
+              depth={depth + 1}
+              selectedPath={selectedPath}
+              expandedPaths={expandedPaths}
+              onToggleExpand={onToggleExpand}
+              onSelect={onSelect}
+              onAction={onAction}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  )
+}
+
+export function FilesPanel({
+  files,
+  selectedPath,
+  onSelect,
+  onAction,
+  showSearch = false,
+  className,
+}: FilesPanelProps) {
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => collectAllFolderPaths(files))
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const fileCount = useMemo(() => countFiles(files), [files])
+
+  const displayedFiles = useMemo(
+    () => searchQuery ? filterTree(files, searchQuery) : files,
+    [files, searchQuery],
+  )
+
+  function handleToggleExpand(path: string) {
+    setExpandedPaths((prev: Set<string>) => {
+      const next = new Set(prev)
+      if (next.has(path)) next.delete(path)
+      else next.add(path)
+      return next
+    })
+  }
+
+  return (
+    <div className={cn('flex flex-col bg-neutral-800 rounded-lg overflow-hidden', className)}>
+      <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-700">
+        <span className="text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Files</span>
+        <span className="text-[10px] text-neutral-500">{fileCount} files</span>
+      </div>
+      {showSearch && (
+        <div className="px-2 py-2 border-b border-neutral-700">
+          <div className="flex items-center gap-1.5 px-2 py-1 bg-black border border-neutral-700 rounded text-xs">
+            <Search className="w-3 h-3 text-neutral-500 shrink-0" />
+            <input
+              type="text"
+              placeholder="Search files..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="flex-1 bg-transparent text-neutral-200 placeholder-neutral-500 outline-none text-xs"
+            />
+          </div>
+        </div>
+      )}
+      <div className="flex-1 overflow-y-auto py-1">
+        <ul>
+          {displayedFiles.map((entry: FileEntry) => (
+            <FileNode
+              key={entry.path}
+              entry={entry}
+              depth={0}
+              selectedPath={selectedPath}
+              expandedPaths={expandedPaths}
+              onToggleExpand={handleToggleExpand}
+              onSelect={onSelect}
+              onAction={onAction}
+            />
+          ))}
+        </ul>
+        {displayedFiles.length === 0 && (
+          <p className="text-[11px] text-neutral-500 text-center py-4">No files found</p>
+        )}
+      </div>
+    </div>
+  )
+}

package/components/ui/filter-dropdown.tsx

@@ -0,0 +1,173 @@
+import { useState, useEffect, useRef, type ReactNode } from 'react'
+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 { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
+
+const SEARCH_THRESHOLD = 20
+
+const VARIANT_CLASSES = {
+  filled: { bg: 'bg-neutral-800', hoverBg: 'hover:bg-neutral-700' },
+  outline: { bg: 'bg-transparent', hoverBg: 'hover:bg-neutral-800' },
+}
+
+export interface FilterDropdownProps {
+  value: string
+  onChange: (value: string) => void
+  options: { value: string; label: string }[]
+  allLabel: string
+  labelExtra?: ReactNode
+  clearable?: boolean
+  variant?: 'filled' | 'outline'
+  color?: FormColor
+}
+
+export function FilterDropdown({
+  value,
+  onChange,
+  options,
+  allLabel,
+  labelExtra,
+  clearable = true,
+  variant = 'outline',
+  color = 'blue',
+}: FilterDropdownProps) {
+  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 isActive = value !== 'all'
+  const showSearch = options.length > SEARCH_THRESHOLD
+  const v = VARIANT_CLASSES[variant]
+
+  useClickOutside(ref, isOpen, () => setIsOpen(false))
+
+  useEffect(() => {
+    if (!isOpen) { setSearch(''); setHighlightIdx(-1) }
+    else if (showSearch) requestAnimationFrame(() => searchRef.current?.focus())
+  }, [isOpen, showSearch])
+
+  useEffect(() => { setHighlightIdx(-1) }, [search])
+
+  useEffect(() => {
+    if (highlightIdx >= 0 && menuRef.current) {
+      menuRef.current.querySelector<HTMLElement>(`[data-idx="${highlightIdx}"]`)?.scrollIntoView({ block: 'nearest' })
+    }
+  }, [highlightIdx, menuRef])
+
+  const selectedLabel = isActive ? (options.find((o) => o.value === value)?.label || value) : allLabel
+  const filtered = showSearch && search
+    ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
+    : options
+
+  const hasAllOption = clearable && !search
+  const itemCount = filtered.length + (hasAllOption ? 1 : 0)
+
+  const handleSelect = (val: string) => { onChange(val); setIsOpen(false) }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!isOpen) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setHighlightIdx((i) => Math.min(i + 1, itemCount - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setHighlightIdx((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter' && highlightIdx >= 0) {
+      e.preventDefault()
+      const offset = hasAllOption ? 1 : 0
+      handleSelect(hasAllOption && highlightIdx === 0 ? 'all' : filtered[highlightIdx - offset].value)
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      setIsOpen(false)
+    }
+  }
+
+  return (
+    <div className="relative flex items-center" ref={ref} onKeyDown={handleKeyDown}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-xs transition-colors cursor-pointer ${
+          isActive
+            ? `${clearable ? 'rounded-r-none border-r-0' : ''} ${FORM_COLORS[color].border} text-neutral-200 ${FORM_COLORS[color].hover}`
+            : isOpen
+              ? `${FORM_COLORS[color].border} text-neutral-200`
+              : `${FORM_COLORS[color].border} text-neutral-400 ${FORM_COLORS[color].hover} hover:text-neutral-200`
+        }`}
+      >
+        <Filter className={`w-3 h-3 ${isActive ? FORM_COLORS[color].accent : ''}`} />
+        {labelExtra}
+        <span className="whitespace-nowrap">{selectedLabel}</span>
+        <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+      {isActive && clearable && (
+        <button
+          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`}
+        >
+          <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 ${v.bg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
+          {showSearch && (
+            <div className={`sticky top-0 p-1.5 ${v.bg} 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-xs bg-neutral-800 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-xs text-left transition-colors cursor-pointer ${
+                highlightIdx === 0
+                  ? 'bg-neutral-600 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-xs text-left transition-colors cursor-pointer ${
+                  isHighlighted
+                    ? 'bg-neutral-600 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-xs text-neutral-500">No matches</div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}