# File Tree

A collapsible, keyboard-navigable file explorer built from a flat list of paths — folders derive automatically from the slashes.

<p class="kai-tag-sub">kai-file-tree</p>

Pass a flat array of files, each with a `path`, and get a collapsible, keyboard-navigable file explorer — folders are derived from the slashes automatically, no tree to build by hand.

## Preview

> **tip:** 
Reach for `<kai-file-tree>` for a sidebar-style file explorer — inside `<kai-artifact>`'s Code tab, a `<kai-resizable>` panel, or any file-picker surface. It fills its container, so give the parent an explicit height (e.g. `height: 320px`).

## Usage

Set `files` in JavaScript (it's an array, so it can't be an attribute):

```html
<kai-file-tree style="display:block;height:320px"></kai-file-tree>
<script type="module">

  await customElements.whenDefined('kai-file-tree');

  const tree = document.querySelector('kai-file-tree');
  tree.files = [
    { path: 'index.html', type: 'html' },
    { path: 'src/app.ts', type: 'other' },
    { path: 'src/lib/format.ts', type: 'other' },
    { path: 'assets/logo.svg', type: 'image' },
  ];
  tree.setAttribute('active-file', 'src/app.ts');
  tree.addEventListener('kai-select', (e) => console.log('selected', e.detail.path));
</script>
```

- **Folders are derived** — any `/` in a path creates intermediate folder nodes; no explicit folder entries needed.
- **`active-file`** — plain attribute; update it in response to `kai-select` to keep selection in sync.
- **`defaultExpanded`** — assign it in JavaScript (`el.defaultExpanded = ['src']`). Omit to start all folders open; pass an array to restrict which start expanded.
- **Keyboard** — proper ARIA `tree`: arrow keys move focus, Enter/Space selects or toggles, Home/End jump to first/last row.

## Examples

### Default Tree

A mixed project with HTML, TypeScript, CSS, images, and a PDF. `src/app.ts` starts highlighted via `active-file`.

### Deeply Nested Layout

Multiple levels of nesting across `src/components`, `src/hooks`, and `docs`.

### Mixed File Types

A design system asset bundle covering SVG images, PDFs, HTML preview, JSON tokens, and CSS.

### Controlled Expansion

Only `src` starts open — `tests`, `src/routes`, and `src/middleware` start collapsed.

## Props

## Events

## Composed from