Tree

A hierarchical, expandable tree view (ARIA tree). Click to select/expand; keyboard: ↑/↓ move, →/← expand/collapse, Enter/Space select. Shared variant/size axes.

File explorer

Selected: —

src
lib
components
index.ts
routes
app.css
package.json
README.md

<script>
  import { Tree } from '@spaethtech/svelte-ui';
  const items = [
    { label: 'src', children: [
      { label: 'index.ts' },
    ]},
  ];
  let expanded = $state(['0']);
  let selected = $state('');
</script>

<Tree {items} bind:expanded bind:selected
  onselect={(node) => console.log(node.label)} />

Lazy children · right-click · separate select/expand

Folders declare hasChildren so they show a chevron before loading; expanding one calls loadChildren (spinner row, then an error row — D: fails on purpose). expandOnSelect=false keeps selecting separate from expanding — click a row to select, use the chevron or →/← to expand. Right-click a row to see oncontextmenu(event, node, key).

Selected: —

<script>
  import { Tree } from '@spaethtech/svelte-ui';
  import type { TreeNode } from '@spaethtech/svelte-ui';

  const items: TreeNode[] = [
    { id: 'C', label: 'C:', hasChildren: true },   // chevron before children load
    { id: 'D', label: 'D:', hasChildren: true },
  ];
  let expanded = $state<string[]>([]);
  let selected = $state('');

  // Called once when an unloaded node is first expanded; the Tree owns the spinner + error row.
  async function loadChildren(node: TreeNode, key: string): Promise<TreeNode[]> {
    const res = await fetch(`/api/dir?path=${key}`);
    if (!res.ok) throw new Error('Access denied');
    return await res.json();
  }
</script>

<Tree {items} bind:expanded bind:selected {loadChildren}
  expandOnSelect={false}                              <!-- select ≠ expand (chevron / →←) -->
  oncontextmenu={(e, node, key) => { e.preventDefault(); /* open a ContextMenu for node */ }} />