@svgrid/grid 1.2.34 → 2.0.0

package/dist/SvTree.svelte

@@ -4,14 +4,19 @@
 
 <script lang="ts">
   /**
-   * SvTree - a WAI-ARIA tree view. Expand/collapse, single-select highlight, and
-   * optional cascading tri-state checkboxes. Parity: Smart `smart-tree`. Keyboard:
-   * up/down move, left collapse/parent, right expand/child, Enter/Space select.
+   * SvTree - a WAI-ARIA tree view. Expand/collapse, single-select highlight,
+   * cascading tri-state checkboxes, keyboard, and - for large or remote data -
+   * fixed-row `virtual` windowing (scales to tens of thousands of nodes) and
+   * `loadChildren` lazy-loading. Parity: Smart `smart-tree`.
    *
    * The behavior (flattening, cascade math, keyboard, ARIA) lives in the headless
-   * `createTree` core; this component is just one styled renderer over it.
+   * `createTree` core; this component renders it, and owns the DOM concerns
+   * (windowing, focus, and merging lazily-loaded children into the node tree).
    */
-  import { createTree, type TreeNode } from './createTree.svelte'
+  import { tick, flushSync } from 'svelte'
+  import { type EditorDir } from './editor-contract'
+  import { virtualRange, scrollToIndex } from './virtual'
+  import { createTree, sortTreeNodes, type TreeNode, type TreeDropPosition } from './createTree.svelte'
 
   type Props = {
     nodes: ReadonlyArray<TreeNode>
@@ -26,6 +31,30 @@
     checked?: string[]
     onCheck?: (ids: string[]) => void
     ariaLabel?: string
+    /** Text direction (rtl mirrors indentation + flips Left/Right keys). */
+    dir?: EditorDir
+    /** Window rows (render only visible) - for large trees. Needs `height`. */
+    virtual?: boolean
+    /** Fixed row height in px (must match the CSS). Default 30. */
+    rowHeight?: number
+    /** Scroll-viewport height in px. Enables scrolling (required for `virtual`). */
+    height?: number
+    /** Load a lazy node's children on first expand (node has `lazy: true`). */
+    loadChildren?: (node: TreeNode) => Promise<TreeNode[]>
+    /** Filter query - show only matching nodes + ancestors, auto-expanded. */
+    filter?: string
+    /** Render a built-in search box that drives the filter. */
+    searchable?: boolean
+    searchPlaceholder?: string
+    /** Sort siblings by label ('asc'/'desc') or a custom comparator. */
+    sort?: 'asc' | 'desc' | ((a: TreeNode, b: TreeNode) => number)
+    /** Allow inline rename (double-click or F2). Fires onRename. */
+    editable?: boolean
+    onRename?: (id: string, label: string) => void
+    /** Allow drag-drop reordering; fires onMove(dragId, targetId, position).
+     *  Apply it with the exported `moveTreeNode(nodes, ...)` helper. */
+    reorderable?: boolean
+    onMove?: (dragId: string, targetId: string, position: TreeDropPosition) => void
   }
 
   let {
@@ -38,67 +67,257 @@
     checked = [],
     onCheck,
     ariaLabel,
+    dir,
+    virtual = false,
+    rowHeight = 30,
+    height,
+    loadChildren,
+    filter,
+    searchable = false,
+    searchPlaceholder = 'Search...',
+    sort,
+    editable = false,
+    onRename,
+    reorderable = false,
+    onMove,
   }: Props = $props()
 
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+  let query = $state('')
+  const effectiveFilter = $derived(filter ?? (searchable ? query : undefined))
+
+  // Sort siblings (recursively) before anything else.
+  const sortedNodes = $derived.by(() => {
+    if (!sort) return nodes
+    const cmp = typeof sort === 'function' ? sort : (a: TreeNode, b: TreeNode) => (sort === 'asc' ? 1 : -1) * a.label.localeCompare(b.label)
+    return sortTreeNodes(nodes, cmp)
+  })
+
+  // --- Lazy loading: merge loaded children into the (controlled) node tree -----
+  let loaded = $state(new Map<string, TreeNode[]>())
+  let loadingIds = $state(new Set<string>())
+
+  function inject(list: ReadonlyArray<TreeNode>): TreeNode[] {
+    return list.map((n) => {
+      if (n.lazy && loaded.has(n.id)) return { ...n, children: inject(loaded.get(n.id)!), lazy: false }
+      if (n.children?.length) return { ...n, children: inject(n.children) }
+      return n
+    })
+  }
+  const effectiveNodes = $derived(inject(sortedNodes))
+
+  // --- Inline rename ----------------------------------------------------------
+  let editingId = $state<string | null>(null)
+  let draftLabel = $state('')
+  function startEdit(node: TreeNode) {
+    if (!editable || node.disabled) return
+    editingId = node.id
+    draftLabel = node.label
+    tick().then(() => treeEl?.querySelector<HTMLInputElement>('.sv-tree__edit')?.select())
+  }
+  function commitEdit() {
+    if (editingId == null) return
+    const id = editingId
+    const label = draftLabel.trim()
+    editingId = null
+    if (label) onRename?.(id, label)
+  }
+  function cancelEdit() { editingId = null }
+
+  // --- Drag-drop reorder ------------------------------------------------------
+  let dragId = $state<string | null>(null)
+  let dropId = $state<string | null>(null)
+  let dropPos = $state<TreeDropPosition | null>(null)
+  function computeDropPos(e: DragEvent, node: TreeNode): TreeDropPosition {
+    const el = e.currentTarget as HTMLElement
+    const r = el.getBoundingClientRect()
+    const y = (e.clientY - r.top) / r.height
+    const canNest = !!node.children?.length || !!node.lazy
+    if (y < 0.3) return 'before'
+    if (y > 0.7 || !canNest) return y > 0.5 ? 'after' : (canNest ? 'inside' : 'after')
+    return 'inside'
+  }
+  function onRowDragStart(e: DragEvent, node: TreeNode) {
+    dragId = node.id
+    if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move'
+  }
+  function onRowDragOver(e: DragEvent, node: TreeNode) {
+    if (!dragId || dragId === node.id) return
+    e.preventDefault()
+    dropId = node.id
+    dropPos = computeDropPos(e, node)
+  }
+  function onRowDrop(e: DragEvent, node: TreeNode) {
+    e.preventDefault()
+    if (dragId && dragId !== node.id && dropPos) onMove?.(dragId, node.id, dropPos)
+    dragId = dropId = dropPos = null
+  }
+  function endDrag() { dragId = dropId = dropPos = null }
+
+  function findNode(list: ReadonlyArray<TreeNode>, id: string): TreeNode | null {
+    for (const n of list) {
+      if (n.id === id) return n
+      if (n.children) { const f = findNode(n.children, id); if (f) return f }
+    }
+    return null
+  }
+
+  async function handleToggle(id: string, expanded: boolean) {
+    onToggle?.(id, expanded)
+    if (!expanded || !loadChildren) return
+    // Search the merged tree, not the raw prop: a nested lazy node (revealed by
+    // a parent's earlier load) lives inside `loaded`, never in `nodes`.
+    const node = findNode(effectiveNodes, id)
+    if (!node?.lazy || loaded.has(id) || loadingIds.has(id)) return
+    loadingIds = new Set(loadingIds).add(id)
+    // A placeholder row shows immediately while the promise resolves.
+    loaded = new Map(loaded).set(id, [{ id: `${id}__loading`, label: 'Loading...', disabled: true }])
+    try {
+      const kids = await loadChildren(node)
+      loaded = new Map(loaded).set(id, kids)
+    } catch {
+      loaded = new Map(loaded).set(id, [])
+    } finally {
+      const next = new Set(loadingIds); next.delete(id); loadingIds = next
+    }
+  }
+
   const tree = createTree({
-    nodes: () => nodes,
+    nodes: () => effectiveNodes,
     selected: () => selected,
     onSelect: (id) => onSelect?.(id),
     expandedIds: () => expandedIds,
-    onToggle: (id, exp) => onToggle?.(id, exp),
+    onToggle: handleToggle,
     checkable: () => checkable,
     checked: () => checked,
     onCheck: (ids) => onCheck?.(ids),
     ariaLabel: () => ariaLabel,
+    dir: () => dir,
+    filter: () => effectiveFilter,
   })
 
-  // DOM focus movement is a render concern: follow the core's roving focus row.
-  let treeEl: HTMLDivElement | null = null
+  // --- Virtualization ---------------------------------------------------------
+  const scrollable = $derived(virtual || height != null)
+  let treeEl = $state<HTMLDivElement | null>(null)
+  let scrollTop = $state(0)
+  let viewportH = $state(0)
+  const vr = $derived(
+    virtualRange({ scrollTop, viewportHeight: viewportH, rowHeight, count: tree.rows.length, overscan: 10 }),
+  )
+  const visibleRows = $derived(virtual ? tree.rows.slice(vr.start, vr.end) : tree.rows)
+
+  // Follow the core's roving focus row; scroll it into view first when windowed.
   let lastFocusTick = 0
   $effect(() => {
-    if (tree.focusTick !== lastFocusTick) {
-      lastFocusTick = tree.focusTick
-      const i = tree.activeIndex
-      queueMicrotask(() => treeEl?.querySelector<HTMLElement>(`[data-row="${i}"]`)?.focus())
+    if (tree.focusTick === lastFocusTick) return
+    lastFocusTick = tree.focusTick
+    const i = tree.activeIndex
+    if (virtual && treeEl) {
+      const next = scrollToIndex(i, scrollTop, treeEl.clientHeight, rowHeight)
+      if (next !== scrollTop) { treeEl.scrollTop = next; scrollTop = next }
     }
+    tick().then(() => treeEl?.querySelector<HTMLElement>(`[data-row="${i}"]`)?.focus())
   })
 </script>
 
-<div bind:this={treeEl} class="sv-tree" {...tree.treeProps()}>
-  {#each tree.rows as item (item.node.id)}
-    {@const cs = checkable ? tree.checkStateOf(item.node) : 'unchecked'}
-    <div
-      class="sv-tree__row"
-      class:is-selected={item.node.id === selected}
-      class:is-disabled={item.node.disabled}
-      style:padding-left={`${item.depth * 18 + 6}px`}
-      {...tree.itemProps(item)}
+<div class="sv-tree-host" class:has-search={searchable} dir={resolvedDir}>
+{#if searchable}
+  <div class="sv-tree__search">
+    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>
+    <input class="sv-tree__search-input" type="text" placeholder={searchPlaceholder} bind:value={query} aria-label={searchPlaceholder} />
+    {#if query}<button type="button" class="sv-tree__search-clear" aria-label="Clear search" onclick={() => (query = '')}>&times;</button>{/if}
+  </div>
+{/if}
+<div
+  bind:this={treeEl}
+  class="sv-tree"
+  class:sv-tree--scroll={scrollable}
+  class:is-virtual={virtual}
+  dir={resolvedDir}
+  style:height={height != null ? `${height}px` : undefined}
+  onscroll={scrollable ? (e) => { scrollTop = e.currentTarget.scrollTop; if (virtual) flushSync() } : undefined}
+  bind:clientHeight={viewportH}
+  {...tree.treeProps()}
+>
+  {#if virtual}<div class="sv-tree__sizer" aria-hidden="true" style:height={`${vr.totalHeight}px`}></div>{/if}
+  {#each visibleRows as item (item.node.id)}
+    {@render treeRow(item)}
+  {/each}
+</div>
+</div>
+
+{#snippet treeRow(item)}
+  {@const cs = checkable ? tree.checkStateOf(item.node) : 'unchecked'}
+  {@const isLoading = loadingIds.has(item.node.id)}
+  <div
+    class="sv-tree__row"
+    class:is-selected={item.node.id === selected}
+    class:is-disabled={item.node.disabled}
+    class:is-dragging={dragId === item.node.id}
+    class:drop-before={dropId === item.node.id && dropPos === 'before'}
+    class:drop-after={dropId === item.node.id && dropPos === 'after'}
+    class:drop-inside={dropId === item.node.id && dropPos === 'inside'}
+    style:height={`${rowHeight}px`}
+    style:padding-inline-start={`${item.depth * 18 + 6}px`}
+    style:transform={virtual ? `translateY(${item.index * rowHeight}px)` : undefined}
+    draggable={reorderable && editingId !== item.node.id && !item.node.disabled}
+    ondragstart={reorderable ? (e) => onRowDragStart(e, item.node) : undefined}
+    ondragover={reorderable ? (e) => onRowDragOver(e, item.node) : undefined}
+    ondragleave={reorderable ? () => { if (dropId === item.node.id) { dropId = null; dropPos = null } } : undefined}
+    ondrop={reorderable ? (e) => onRowDrop(e, item.node) : undefined}
+    ondragend={reorderable ? endDrag : undefined}
+    ondblclick={editable ? () => startEdit(item.node) : undefined}
+    onkeydown={editable ? (e) => { if (e.key === 'F2') { e.preventDefault(); startEdit(item.node) } } : undefined}
+    {...tree.itemProps(item)}
+  >
+    <button
+      type="button"
+      class="sv-tree__twist"
+      class:is-open={item.open}
+      class:is-leaf={!item.hasChildren}
+      class:is-loading={isLoading}
+      tabindex="-1"
+      aria-hidden={!item.hasChildren}
+      onclick={(e) => { e.stopPropagation(); tree.toggleExpand(item.node) }}
     >
-      <button
-        type="button"
-        class="sv-tree__twist"
-        class:is-open={item.open}
-        class:is-leaf={!item.hasChildren}
-        tabindex="-1"
-        aria-hidden={!item.hasChildren}
-        onclick={(e) => { e.stopPropagation(); tree.toggleExpand(item.node) }}
-      >
-        {#if item.hasChildren}
-          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
-        {/if}
-      </button>
-      {#if checkable}
-        <button type="button" class="sv-tree__check is-{cs}" tabindex="-1" aria-hidden="true" onclick={(e) => { e.stopPropagation(); tree.toggleCheck(item.node) }}>
-          {#if cs === 'checked'}<svg viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
-          {:else if cs === 'indeterminate'}<svg viewBox="0 0 16 16"><path d="M4 8h8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" /></svg>{/if}
-        </button>
+      {#if isLoading}
+        <svg class="sv-tree__spin" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-6.2-8.6" /></svg>
+      {:else if item.hasChildren}
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
       {/if}
+    </button>
+    {#if checkable}
+      <button type="button" class="sv-tree__check is-{cs}" tabindex="-1" aria-hidden="true" onclick={(e) => { e.stopPropagation(); tree.toggleCheck(item.node) }}>
+        {#if cs === 'checked'}<svg viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
+        {:else if cs === 'indeterminate'}<svg viewBox="0 0 16 16"><path d="M4 8h8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" /></svg>{/if}
+      </button>
+    {/if}
+    {#if editingId === item.node.id}
+      <!-- svelte-ignore a11y_autofocus -->
+      <input
+        class="sv-tree__edit"
+        bind:value={draftLabel}
+        onclick={(e) => e.stopPropagation()}
+        onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); commitEdit() } else if (e.key === 'Escape') { e.preventDefault(); cancelEdit() } }}
+        onblur={commitEdit}
+      />
+    {:else}
       <span class="sv-tree__label">{item.node.label}</span>
-    </div>
-  {/each}
-</div>
+    {/if}
+  </div>
+{/snippet}
 
 <style>
+  .sv-tree-host { display: contents; }
+  .sv-tree-host.has-search { display: inline-flex; flex-direction: column; gap: 6px; }
+  .sv-tree__search {
+    display: flex; align-items: center; gap: 7px; width: 260px; box-sizing: border-box; padding: 0 10px; height: 32px;
+    background: var(--sg-input-bg, #fff); color: var(--sg-muted, #64748b);
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+  }
+  .sv-tree__search:focus-within { border-color: var(--sg-accent, #2563eb); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 22%, transparent); }
+  .sv-tree__search-input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--sg-fg, #0f172a); font: inherit; font-size: 13px; }
+  .sv-tree__search-clear { background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
   .sv-tree {
     --_accent: var(--sg-accent, #2563eb);
     width: 260px; padding: 4px; user-select: none;
@@ -106,8 +325,12 @@
     border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 8px);
     font-size: 13px;
   }
+  .sv-tree--scroll { overflow-y: auto; }
+  .sv-tree.is-virtual { position: relative; will-change: scroll-position; }
+  .sv-tree__sizer { padding: 0; margin: 0; pointer-events: none; }
+  .sv-tree.is-virtual .sv-tree__row { position: absolute; inset-inline: 4px; top: 4px; }
   .sv-tree__row {
-    display: flex; align-items: center; gap: 4px; height: 30px; padding-right: 8px;
+    display: flex; align-items: center; gap: 4px; box-sizing: border-box; padding-inline-end: 8px;
     border-radius: 6px; cursor: pointer; outline: none;
   }
   .sv-tree__row:hover:not(.is-disabled) { background: var(--sg-row-hover-bg, #f1f5f9); }
@@ -119,7 +342,12 @@
     background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; transition: transform 0.12s;
   }
   .sv-tree__twist.is-open { transform: rotate(90deg); }
+  .sv-tree[dir='rtl'] .sv-tree__twist:not(.is-open) svg { transform: scaleX(-1); }
   .sv-tree__twist.is-leaf { visibility: hidden; }
+  .sv-tree__twist.is-loading { transform: none; }
+  .sv-tree__spin { animation: sv-tree-spin 0.7s linear infinite; }
+  @keyframes sv-tree-spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) { .sv-tree__spin { animation: none; } }
   .sv-tree__check {
     display: grid; place-items: center; width: 16px; height: 16px; flex: none; padding: 0;
     border: 1.5px solid var(--sg-border, #cbd5e1); border-radius: 4px; background: var(--sg-input-bg, #fff);
@@ -128,4 +356,18 @@
   .sv-tree__check.is-checked, .sv-tree__check.is-indeterminate { background: var(--_accent); border-color: var(--_accent); }
   .sv-tree__check svg { width: 100%; height: 100%; }
   .sv-tree__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-tree__edit {
+    flex: 1; min-width: 0; height: 22px; padding: 0 6px; margin: 0; font: inherit; font-size: 13px;
+    border: 1px solid var(--_accent); border-radius: 5px; background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); outline: none;
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent);
+  }
+  /* Drag-drop feedback */
+  .sv-tree__row.is-dragging { opacity: 0.4; }
+  .sv-tree__row.drop-inside { background: color-mix(in srgb, var(--_accent) 18%, transparent); box-shadow: inset 0 0 0 1px var(--_accent); }
+  .sv-tree__row.drop-before, .sv-tree__row.drop-after { position: relative; }
+  .sv-tree__row.drop-before::before, .sv-tree__row.drop-after::after {
+    content: ''; position: absolute; inset-inline: 4px; height: 2px; background: var(--_accent); border-radius: 2px; z-index: 1;
+  }
+  .sv-tree__row.drop-before::before { top: -1px; }
+  .sv-tree__row.drop-after::after { bottom: -1px; }
 </style>

package/dist/SvTree.svelte.d.ts

@@ -1,13 +1,6 @@
 export type { TreeNode } from './createTree.svelte';
-/**
-   * SvTree - a WAI-ARIA tree view. Expand/collapse, single-select highlight, and
-   * optional cascading tri-state checkboxes. Parity: Smart `smart-tree`. Keyboard:
-   * up/down move, left collapse/parent, right expand/child, Enter/Space select.
-   *
-   * The behavior (flattening, cascade math, keyboard, ARIA) lives in the headless
-   * `createTree` core; this component is just one styled renderer over it.
-   */
-import { type TreeNode } from './createTree.svelte';
+import { type EditorDir } from './editor-contract';
+import { type TreeNode, type TreeDropPosition } from './createTree.svelte';
 type Props = {
     nodes: ReadonlyArray<TreeNode>;
     /** Selected node id (single-select highlight). */
@@ -21,6 +14,30 @@ type Props = {
     checked?: string[];
     onCheck?: (ids: string[]) => void;
     ariaLabel?: string;
+    /** Text direction (rtl mirrors indentation + flips Left/Right keys). */
+    dir?: EditorDir;
+    /** Window rows (render only visible) - for large trees. Needs `height`. */
+    virtual?: boolean;
+    /** Fixed row height in px (must match the CSS). Default 30. */
+    rowHeight?: number;
+    /** Scroll-viewport height in px. Enables scrolling (required for `virtual`). */
+    height?: number;
+    /** Load a lazy node's children on first expand (node has `lazy: true`). */
+    loadChildren?: (node: TreeNode) => Promise<TreeNode[]>;
+    /** Filter query - show only matching nodes + ancestors, auto-expanded. */
+    filter?: string;
+    /** Render a built-in search box that drives the filter. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Sort siblings by label ('asc'/'desc') or a custom comparator. */
+    sort?: 'asc' | 'desc' | ((a: TreeNode, b: TreeNode) => number);
+    /** Allow inline rename (double-click or F2). Fires onRename. */
+    editable?: boolean;
+    onRename?: (id: string, label: string) => void;
+    /** Allow drag-drop reordering; fires onMove(dragId, targetId, position).
+     *  Apply it with the exported `moveTreeNode(nodes, ...)` helper. */
+    reorderable?: boolean;
+    onMove?: (dragId: string, targetId: string, position: TreeDropPosition) => void;
 };
 declare const SvTree: import("svelte").Component<Props, {}, "">;
 type SvTree = ReturnType<typeof SvTree>;

package/dist/SvTreeSelect.svelte

@@ -0,0 +1,222 @@
+<script lang="ts" module>
+  export type { TreeSelectNode } from './ui-app.types'
+</script>
+
+<script lang="ts">
+  /**
+   * SvTreeSelect - a single-select dropdown that shows an indented, collapsible
+   * tree in its panel (pick a node from a hierarchy). The open / position /
+   * dismiss / roving / keyboard / ARIA mechanics come from the shared
+   * `createPopoverSelect` core (with ArrowLeft/Right handled via onExtraKey for
+   * expand/collapse); this component adds the tree flattening + rendering. Covers
+   * the "cascader / tree select" pattern without depending on SvTree.
+   */
+  import type { TreeSelectNode } from './ui-app.types'
+  import SvField from './SvField.svelte'
+  import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
+  import { portalToBody, popIn } from './popover'
+  import { createPopoverSelect } from './createPopoverSelect.svelte'
+  import { flattenVisible, findNodePath } from './tree-select'
+
+  type Props = Pick<
+    SvEditorProps,
+    'disabled' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel'
+  > & {
+    nodes: ReadonlyArray<TreeSelectNode>
+    value?: string | number | null
+    onChange?: (value: string | number) => void
+    onCommit?: (value: string | number) => void
+    onCancel?: () => void
+    placeholder?: string
+    showPath?: boolean
+    expandedIds?: ReadonlyArray<string | number>
+  }
+
+  let {
+    nodes,
+    value = $bindable<string | number | null>(null),
+    onChange,
+    onCommit,
+    onCancel,
+    placeholder = 'Select…',
+    showPath = false,
+    expandedIds = [],
+    disabled = false,
+    label,
+    hint,
+    error,
+    required = false,
+    invalid = false,
+    size = 'md',
+    id,
+    name,
+    dir,
+    ariaLabel,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-ts')
+  const uid = $derived(id ?? autoId)
+
+  let expanded = $state(new Set<string | number>(expandedIds))
+  let triggerEl = $state<HTMLButtonElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let treeEl = $state<HTMLUListElement | null>(null)
+
+  const rows = $derived(flattenVisible(nodes, expanded))
+  const selectedPath = $derived(value == null ? null : findNodePath(nodes, value))
+  const triggerText = $derived(
+    !selectedPath
+      ? ''
+      : showPath
+        ? selectedPath.map((n) => n.label).join(' / ')
+        : selectedPath[selectedPath.length - 1]!.label,
+  )
+
+  function setExpanded(v: string | number, on: boolean) {
+    const next = new Set(expanded)
+    on ? next.add(v) : next.delete(v)
+    expanded = next
+  }
+  function toggleExpand(v: string | number) {
+    setExpanded(v, !expanded.has(v))
+  }
+  function pick(node: TreeSelectNode) {
+    if (node.disabled) return
+    value = node.value // enables bind:value
+    onChange?.(node.value)
+    ts.closePanel()
+  }
+  function onRowClick(row: { node: TreeSelectNode; hasChildren: boolean }) {
+    if (row.hasChildren) toggleExpand(row.node.value)
+    else pick(row.node)
+  }
+
+  const ts = createPopoverSelect({
+    itemCount: () => rows.length,
+    disabled: (i) => !!rows[i]?.node.disabled,
+    onSelect: (i) => { const row = rows[i]; if (row) onRowClick(row) },
+    getTrigger: () => triggerEl,
+    getPanel: () => panelEl,
+    getInitialFocus: () => treeEl,
+    closeOnSelect: () => false, // onRowClick handles pick + close (branches stay open)
+    initialActive: () => Math.max(0, rows.findIndex((r) => r.node.value === value)),
+    minWidth: () => 220,
+    estimatedHeight: () => 300,
+    onExtraKey: (e, act) => {
+      const row = rows[act]
+      if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        if (row?.hasChildren && !row.expanded) setExpanded(row.node.value, true)
+        return true
+      }
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        if (row?.hasChildren && row.expanded) setExpanded(row.node.value, false)
+        return true
+      }
+      return false
+    },
+    idPrefix: 'sv-ts',
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div class="sv-ts sv-ts--{size}" class:is-disabled={disabled}>
+    <button
+      bind:this={triggerEl}
+      type="button"
+      class="sv-ts__trigger"
+      class:is-invalid={invalid}
+      {disabled}
+      onclick={() => ts.toggle()}
+      {...ts.triggerProps()}
+      {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
+    >
+      <span class="sv-ts__value" class:is-placeholder={!triggerText}>{triggerText || placeholder}</span>
+      <span class="sv-ts__arrow" aria-hidden="true">▾</span>
+    </button>
+    {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+  </div>
+</SvField>
+
+{#if ts.open}
+  <div
+    bind:this={panelEl}
+    class="sv-ts__panel"
+    dir={dir}
+    use:portalToBody
+    use:popIn={{ up: ts.rect.openUpward }}
+    style:position="fixed"
+    style:top={`${ts.rect.top}px`}
+    style:left={`${ts.rect.left}px`}
+    style:min-width={`${ts.rect.width}px`}
+  >
+    <ul
+      bind:this={treeEl}
+      id={ts.panelId}
+      class="sv-ts__tree"
+      role="tree"
+      aria-label={label ?? ariaLabel ?? 'Tree'}
+      aria-activedescendant={ts.activeDescendant()}
+      tabindex="0"
+      onkeydown={ts.onPanelKeydown}
+    >
+      {#each rows as row, i (row.node.value)}
+        <li
+          class="sv-ts__row"
+          class:is-active={ts.isActive(i)}
+          class:is-selected={row.node.value === value}
+          class:is-disabled={row.node.disabled}
+          role="treeitem"
+          aria-selected={row.node.value === value}
+          aria-expanded={row.hasChildren ? row.expanded : undefined}
+          style:padding-inline-start={`${8 + row.depth * 16}px`}
+          onclick={() => onRowClick(row)}
+          {...ts.itemProps(i)}
+        >
+          {#if row.hasChildren}
+            <span class="sv-ts__chev" class:is-open={row.expanded} aria-hidden="true">▸</span>
+          {:else}
+            <span class="sv-ts__chev sv-ts__chev--leaf" aria-hidden="true"></span>
+          {/if}
+          <span class="sv-ts__label">{row.node.label}</span>
+        </li>
+      {/each}
+    </ul>
+  </div>
+{/if}
+
+<style>
+  .sv-ts { --_accent: var(--sg-accent, #2563eb); display: inline-flex; width: 240px; }
+  .sv-ts.is-disabled { opacity: 0.6; }
+  .sv-ts__trigger {
+    flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; text-align: start;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+    font: inherit; cursor: pointer; padding: 0 9px;
+  }
+  .sv-ts--sm .sv-ts__trigger { height: 28px; font-size: 12px; }
+  .sv-ts--md .sv-ts__trigger { height: 34px; font-size: 13px; }
+  .sv-ts--lg .sv-ts__trigger { height: 40px; font-size: 15px; }
+  .sv-ts__trigger:focus-visible { outline: none; border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-ts__trigger.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-ts__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-ts__value.is-placeholder { color: var(--sg-muted, #94a3b8); }
+  .sv-ts__arrow { color: var(--sg-muted, #64748b); font-size: 10px; }
+
+  :global(.sv-ts__panel) {
+    z-index: 2147483646; max-height: 320px; max-width: 92vw; overflow: hidden;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
+    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
+  }
+  :global(.sv-ts__tree) { list-style: none; margin: 0; padding: 4px; overflow: auto; max-height: 320px; outline: none; }
+  :global(.sv-ts__row) { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
+  :global(.sv-ts__row.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  :global(.sv-ts__row.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
+  :global(.sv-ts__row.is-disabled) { opacity: 0.5; cursor: not-allowed; }
+  :global(.sv-ts__chev) { width: 14px; flex: none; color: var(--sg-muted, #64748b); transition: transform 0.12s; font-size: 10px; }
+  :global(.sv-ts__chev.is-open) { transform: rotate(90deg); }
+  :global(.sv-ts__chev--leaf) { visibility: hidden; }
+  :global(.sv-ts__label) { flex: 1; white-space: nowrap; }
+</style>