@ryanhelsing/ry-ui/docs/components/tree.md

Framework-agnostic, Light DOM web components. CSS is the source of truth.

# Tree

## `<ry-tree>`

File-tree / nested list with expand/collapse and optional drag-and-drop.

| Attribute | Values | Description |
|-----------|--------|-------------|
| `sortable` | boolean | Enable drag-and-drop (on tree) |
| `no-animate` | boolean | Disable animation |
| `label` | string | Item label (on tree-item) |
| `open` | boolean | Expanded folder (on tree-item with children) |
| `selected` | boolean | Selected item (on leaf tree-item) |

Events: `ry:select` (file click), `ry:toggle` (folder expand/collapse), `ry:move` (drag-drop)
API: `.toJSON()`, `.value`, `RyTree.from(json)`

```html
<ry-tree sortable>
  <ry-tree-item label="src" open>
    <ry-tree-item label="app">
      <ry-tree-item label="page.tsx"></ry-tree-item>
    </ry-tree-item>
    <ry-tree-item label="utils.ts"></ry-tree-item>
  </ry-tree-item>
</ry-tree>
```

JS:
```js
const tree = document.querySelector('ry-tree');

tree.addEventListener('ry:select', (e) => {
  console.log(e.detail.label); // "page.tsx"
});
tree.addEventListener('ry:toggle', (e) => {
  console.log(e.detail.label, e.detail.open);
});
tree.addEventListener('ry:move', (e) => {
  console.log(`Moved "${e.detail.item}" ${e.detail.position} "${e.detail.target}"`);
});

// Serialize/deserialize
tree.toJSON(); // [{ label: "src", open: true, children: [...] }]
const copy = RyTree.from(tree.toJSON());
```