File Tree Component

A hierarchical file/directory tree component composed of sub-components:

<file-tree> - Main tree container
<file-tree--file> - File item (leaf node)
<file-tree--dir> - Directory item (collapsible)

Demo

Demo with Drag-and-Drop

Features

Collapsible directories with chevron indicators
Hover effects on items
Full keyboard navigation - Arrow keys, Space, Enter, F2 for rename
Emits file-selected events when files are clicked
Emits dir-toggled events when directories are expanded/collapsed
Drag-and-drop support - Move files and directories by dragging them
Copy tree to clipboard - Focus any item and press Ctrl/Cmd+C to copy the tree structure in POSIX tree format
Rename items - Press F2 on any focused item to rename it inline
Namespaced sub-components living in the same pod
Powered by fixture data (will eventually use GitHub API)

Usage

Basic Usage

<file-tree></file-tree>

The tree will render with default fixture data representing a typical repository structure.

With Drag-and-Drop

<file-tree dnd editable></file-tree>

Attributes:

dnd - Enables drag-and-drop functionality
editable - When combined with dnd, prevents text selection while dragging

Drag-and-Drop Behavior:

Drag files and directories to reorder or move them
Visual feedback during drag (opacity change, drop zone highlighting)
Emits item-dropped events with draggedItem and dropTarget details
Files can be dropped into directories

Keyboard Shortcuts

The file tree supports comprehensive keyboard navigation:

Key	Action
Arrow Up/Down	Navigate between visible items in the tree
Space	Toggle directory expansion/collapse
Enter	Toggle directory or select file
Tab	Move focus to next item (browser default)
Ctrl/Cmd+C	Copy tree structure from focused item (POSIX format)
F2	Rename focused item (Enter to save, Escape to cancel)

Copy Tree to Clipboard

Focus on any file or directory, then press Ctrl+C (or Cmd+C on Mac) to copy the tree structure starting from that item. The output will be in POSIX tree command format:

component/
├── cms-overlay/
│   ├── cms-overlay.js
│   ├── pod.toml
│   └── og.png
├── demo-automerge/
│   ├── demo-automerge.js
│   ├── style.css
│   ├── pod.toml
│   └── post.md
└── file-tree/
    ├── file-tree.js
    ├── file-tree--file.js
    ├── file-tree--dir.js
    ├── pod.toml
    └── post.md

Rename Items

Press F2 while any file or directory is focused to enter rename mode. An inline input will appear where you can type the new name. Press Enter to save or Escape to cancel. The component emits an item-renamed event with details about the old and new names.