A directory listing as a tree, with the icon for each file type read from its
extension.

## Usage

::preview
:::file-tree{title="your-project/"}
---
tree:
  - name: docs/
    children:
      - name: index.md
      - name: 1.getting-started/
        children:
          - name: index.md
          - name: 1.installation.md
  - name: app/
    children:
      - name: app.config.ts
  - name: nuxt.config.ts
---
:::

#code
```mdc
::file-tree{title="your-project/"}
---
tree:
  - name: docs/
    children:
      - name: index.md
  - name: nuxt.config.ts
---
::
```
::

## API

### Props

| Prop    | Type      | Default | Notes                                 |
| :------ | :-------- | :------ | :------------------------------------ |
| `tree`  | `Entry[]` | —       | Given as YAML in the block's body     |
| `title` | `string`  | —       | The root label above the tree         |

An entry is `{ name, children? }`. A name ending in `/`, or one carrying
children, is a directory.

## Notes

Built on reka-ui's tree, so it has roving focus, arrow-key navigation and the
ARIA roles. Nodes are keyed by path rather than by name: names repeat across
branches, paths do not.