@streamscloud/kit 0.18.0 → 0.19.0

package/dist/ui/tree/cmp.tree-node-view.svelte

@@ -10,7 +10,7 @@ import IconCheckmarkCircle from '@fluentui/svg-icons/icons/checkmark_circle_20_f
 import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
 import IconMoreVertical from '@fluentui/svg-icons/icons/more_vertical_20_regular.svg?raw';
 import { slide } from 'svelte/transition';
-let { node, nav, hideExpandIcon = false, level = 0, showSelectedCheckmark } = $props();
+let { node, keyboard, hideExpandIcon = false, level = 0, showSelectedCheckmark } = $props();
 let actionsOpened = $state(false);
 let dbClickTimeout = undefined;
 let dragExpandTimeout = undefined;
@@ -65,13 +65,8 @@ const handleDrop = (e) => {
     DraggingNodeState.draggingNode = null;
     DraggingNodeState.dragOverNode = null;
 };
-const handlePointerDown = () => {
-    nav.setActive(node);
-    nav.keyboardActive = false;
-};
 const handleSelectNode = (e) => {
     e.stopPropagation();
-    nav.setActive(node);
     clearTimeout(dbClickTimeout);
     if (node.expandOnDoubleClick) {
         dbClickTimeout = window.setTimeout(() => {
@@ -84,7 +79,6 @@ const handleSelectNode = (e) => {
 };
 const handleExpandNode = (e) => {
     e.stopPropagation();
-    nav.setActive(node);
     if (node.expanded) {
         node.collapse();
     }
@@ -116,9 +110,7 @@ const handleMouseLeave = () => {
 <div
   class="tree-node"
   style={`--_tree-node--level: ${level}`}
-  id={nav.itemId(node)}
   role="treeitem"
-  tabindex="-1"
   aria-level={level + 1}
   aria-selected={node.selected}
   aria-expanded={children.length ? node.expanded : undefined}>
@@ -126,7 +118,6 @@ const handleMouseLeave = () => {
   <div
     class="tree-node__leaf"
     class:tree-node__leaf--active={node.selected}
-    class:tree-node__leaf--focused={nav.hasFocus && nav.keyboardActive && nav.activeId === node.id}
     class:tree-node__leaf--draggable={node.dragConfig}
     class:tree-node__leaf--expandable={children.length}
     class:tree-node__leaf--drag-over={isDraggedOver}
@@ -147,7 +138,6 @@ const handleMouseLeave = () => {
         class:tree-node__expand-button--active={node.selected || node.involvedIntoActivePath}
         tabindex="-1"
         aria-hidden="true"
-        onpointerdown={handlePointerDown}
         onclick={handleExpandNode}>
         <span class="tree-node__expand-icon" class:tree-node__expand-icon--expanded={node.expanded}>
           <Icon src={IconChevronRight} />
@@ -155,8 +145,15 @@ const handleMouseLeave = () => {
       </button>
     {/if}
 
-    <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
-    <div class="tree-node__anchor" onpointerdown={handlePointerDown} onclick={handleSelectNode} ondblclick={handleExpandOnDoubleClick}>
+    <div
+      class="tree-node__anchor"
+      id={keyboard.anchorId(node)}
+      role="button"
+      tabindex={keyboard.currentId === node.id ? 0 : -1}
+      onclick={handleSelectNode}
+      ondblclick={handleExpandOnDoubleClick}
+      onfocusin={() => keyboard.setFocused(node.id)}
+      onkeydown={(e) => keyboard.handleKeydown(node, e)}>
       {#if !node.hideIcon}
         <div class="tree-node__icon" class:tree-node__icon--active={node.selected}>
           {#if node.icon}
@@ -201,7 +198,7 @@ const handleMouseLeave = () => {
   {#if node.expanded && children.length}
     <div transition:slide={{ duration: transitionDuration.base }} class="tree-node__children" role="group">
       {#each children as child (child.id)}
-        <Self node={child} nav={nav} level={level + 1} hideExpandIcon={hideChildExpandIcon} showSelectedCheckmark={showSelectedCheckmark} />
+        <Self node={child} keyboard={keyboard} level={level + 1} hideExpandIcon={hideChildExpandIcon} showSelectedCheckmark={showSelectedCheckmark} />
       {/each}
     </div>
   {/if}
@@ -240,7 +237,10 @@ const handleMouseLeave = () => {
   color: var(--sc-kit--color--text--primary);
   background: var(--sc-kit--color--bg--active);
 }
-.tree-node__leaf--focused {
+.tree-node__leaf:focus-within {
+  --_tree-node--action-opacity: 1;
+}
+.tree-node__leaf:has(.tree-node__anchor:focus-visible) {
   outline: 2px solid var(--sc-kit--color--border--focus);
   outline-offset: -2px;
 }
@@ -285,6 +285,7 @@ const handleMouseLeave = () => {
   gap: var(--sc-kit--space--2);
   min-width: 0;
   padding: var(--_tree-node--padding-block) 0;
+  outline: none;
 }
 .tree-node__icon {
   --sc-kit--icon--size: var(--_tree-node--icon-size);

package/dist/ui/tree/cmp.tree-node-view.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { TreeNavigation } from './tree-navigation.svelte';
+import type { TreeKeyboard } from './tree-keyboard.svelte';
 import { type TreeNode } from './tree-node.svelte';
 type Props = {
     node: TreeNode;
-    nav: TreeNavigation;
+    keyboard: TreeKeyboard;
     hideExpandIcon?: boolean;
     level?: number;
     showSelectedCheckmark?: boolean;

package/dist/ui/tree/cmp.tree.svelte

@@ -1,42 +1,21 @@
 <script lang="ts">import NodeView from './cmp.tree-node-view.svelte';
-import { TreeNavigation } from './tree-navigation.svelte';
-let { nodes, showSelectedCheckmark, children } = $props();
+import { createTreeKeyboard } from './tree-keyboard.svelte';
+let { nodes, showSelectedCheckmark, header } = $props();
 const nodesComputed = $derived(nodes ? (Array.isArray(nodes) ? nodes : [nodes]) : []);
 const hideExpandIcon = $derived(nodesComputed.every((f) => !f.children.length));
-const nav = new TreeNavigation(() => nodesComputed);
-const handleFocusIn = (e) => {
-    nav.focus();
-    nav.keyboardActive = e.currentTarget.matches(':focus-visible');
-};
-const handleKeydown = (e) => {
-    // Only the container itself drives tree navigation; a focused descendant (e.g. the actions popover) keeps its own keys.
-    if (e.target !== e.currentTarget) {
-        return;
+$effect(() => {
+    for (const root of nodesComputed) {
+        root.setForest(() => nodesComputed);
     }
-    nav.handleKeydown(e);
-    // ArrowLeft collapses a subtree; if focus sat on a treeitem inside it, the unmount would drop focus
-    // to <body> and arrow keys would die. Re-grab the container before the unmount so the single
-    // aria-activedescendant focus owner stays put.
-    e.currentTarget.focus();
-};
+});
+const keyboard = createTreeKeyboard(() => nodesComputed);
 </script>
 
 <div class="tree">
-  {@render children?.()}
-  <div
-    class="tree__nodes"
-    role="tree"
-    tabindex="0"
-    aria-activedescendant={nav.activeId ? `tree-item-${nav.activeId}` : undefined}
-    onfocusin={handleFocusIn}
-    onfocusout={(e) => {
-      if (!(e.relatedTarget instanceof Node) || !e.currentTarget.contains(e.relatedTarget)) {
-        nav.blur();
-      }
-    }}
-    onkeydown={handleKeydown}>
+  {@render header?.()}
+  <div class="tree__nodes" role="tree">
     {#each nodesComputed as node (node.id)}
-      <NodeView node={node} nav={nav} hideExpandIcon={hideExpandIcon} showSelectedCheckmark={showSelectedCheckmark} />
+      <NodeView node={node} keyboard={keyboard} hideExpandIcon={hideExpandIcon} showSelectedCheckmark={showSelectedCheckmark} />
     {/each}
   </div>
 </div>
@@ -48,9 +27,9 @@ holds its own expanded / selected state, children, optional icon / count / actio
 drag config (reorder or move-to-folder). Build the model with `new TreeNode({ … })` and pass the
 root(s) as `nodes`.
 
-Exposes an ARIA `tree` / `treeitem` / `group` structure with `aria-activedescendant` focus. Keyboard:
-↑/↓ move between visible items, →/← expand-or-enter / collapse-or-leave, Home/End jump to first/last,
-Enter/Space select.
+Click selects a node — selection is the single source of truth. Keyboard: the current row is the tab
+stop (native focus + `:focus-visible`), ↑/↓ move between visible rows, →/← expand-or-enter / collapse-or-leave,
+Home/End jump to first/last, Enter/Space select.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -67,7 +46,4 @@ Enter/Space select.
 }
 .tree :global([contenteditable]) {
   user-select: text;
-}
-.tree__nodes:focus-visible {
-  outline: none;
 }</style>

package/dist/ui/tree/cmp.tree.svelte.d.ts

@@ -6,7 +6,7 @@ type Props = {
     /** Show a success checkmark on the selected node when it has no actions. */
     showSelectedCheckmark?: boolean;
     /** Optional content rendered above the nodes (e.g. a header). */
-    children?: Snippet;
+    header?: Snippet;
 };
 /**
  * Tree — hierarchical, collapsible node list driven by `TreeNode` model instances. Each `TreeNode`
@@ -14,9 +14,9 @@ type Props = {
  * drag config (reorder or move-to-folder). Build the model with `new TreeNode({ … })` and pass the
  * root(s) as `nodes`.
  *
- * Exposes an ARIA `tree` / `treeitem` / `group` structure with `aria-activedescendant` focus. Keyboard:
- * ↑/↓ move between visible items, →/← expand-or-enter / collapse-or-leave, Home/End jump to first/last,
- * Enter/Space select.
+ * Click selects a node — selection is the single source of truth. Keyboard: the current row is the tab
+ * stop (native focus + `:focus-visible`), ↑/↓ move between visible rows, →/← expand-or-enter / collapse-or-leave,
+ * Home/End jump to first/last, Enter/Space select.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/tree/tree-keyboard.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TreeNode } from './tree-node.svelte';
+/** Native-focus roving keyboard navigation for the tree (single tab stop + arrows / Home / End / Enter). */
+export declare const createTreeKeyboard: (getRoots: () => readonly TreeNode[]) => {
+    anchorId: (node: TreeNode) => string;
+    readonly currentId: string | null;
+    setFocused: (id: string) => void;
+    handleKeydown: (node: TreeNode, e: KeyboardEvent) => void;
+};
+export type TreeKeyboard = ReturnType<typeof createTreeKeyboard>;

package/dist/ui/tree/tree-keyboard.svelte.js

@@ -0,0 +1,107 @@
+import { randomNanoid } from '../../core/utils';
+import { tick } from 'svelte';
+/** Native-focus roving keyboard navigation for the tree (single tab stop + arrows / Home / End / Enter). */
+export const createTreeKeyboard = (getRoots) => {
+    const treeId = randomNanoid(6);
+    const anchorDomId = (node) => `tree-${treeId}-anchor-${node.id}`;
+    let focusedId = $state(null);
+    const visible = () => {
+        const out = [];
+        const walk = (list) => {
+            for (const node of list) {
+                out.push(node);
+                if (node.expanded && node.children.length) {
+                    walk(node.children);
+                }
+            }
+        };
+        walk(getRoots());
+        return out;
+    };
+    const currentId = $derived.by(() => {
+        const rows = visible();
+        if (focusedId && rows.some((n) => n.id === focusedId)) {
+            return focusedId;
+        }
+        return (rows.find((n) => n.selected) ?? rows[0])?.id ?? null;
+    });
+    const focusNode = (node) => {
+        focusedId = node.id;
+        document.getElementById(anchorDomId(node))?.focus();
+    };
+    const focusAfterTick = async (node) => {
+        await tick();
+        focusNode(node);
+    };
+    const step = (node, delta) => {
+        const rows = visible();
+        const index = rows.findIndex((n) => n.id === node.id);
+        if (index < 0) {
+            return;
+        }
+        const next = rows[Math.min(Math.max(index + delta, 0), rows.length - 1)];
+        if (next.id !== node.id) {
+            focusNode(next);
+        }
+    };
+    return {
+        anchorId: anchorDomId,
+        get currentId() {
+            return currentId;
+        },
+        setFocused: (id) => {
+            focusedId = id;
+        },
+        handleKeydown: (node, e) => {
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    step(node, 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    step(node, -1);
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    if (node.children.length && !node.expanded) {
+                        node.expand();
+                    }
+                    else if (node.children.length) {
+                        void focusAfterTick(node.children[0]);
+                    }
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    if (node.expanded && node.children.length) {
+                        node.collapse();
+                    }
+                    else if (node.parent) {
+                        focusNode(node.parent);
+                    }
+                    break;
+                case 'Home': {
+                    e.preventDefault();
+                    const rows = visible();
+                    if (rows.length) {
+                        focusNode(rows[0]);
+                    }
+                    break;
+                }
+                case 'End': {
+                    e.preventDefault();
+                    const rows = visible();
+                    if (rows.length) {
+                        focusNode(rows[rows.length - 1]);
+                    }
+                    break;
+                }
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    node.select({ explicitly: true });
+                    break;
+            }
+        }
+    };
+};

package/dist/ui/tree/tree-node.svelte.d.ts

@@ -45,6 +45,7 @@ export declare class TreeNode {
     private _nonSelectable;
     private _children;
     private _parent?;
+    private _forestRoots?;
     private _dirty;
     constructor(init: TreeNodeInitializer);
     /** Whether this node has unsaved changes; set via `setDirty` and propagated up to ancestors. */
@@ -62,6 +63,8 @@ export declare class TreeNode {
     select(options?: {
         explicitly?: boolean;
     }): void;
+    /** Register the full set of forest roots so single-select clears across sibling roots, not just this node's own root. Set by the `Tree` component. */
+    setForest(getRoots: () => readonly TreeNode[]): void;
     setChildren(value: TreeNode[]): void;
     addChild(child: TreeNode): void;
     insertChildAt(index: number, child: TreeNode): void;
@@ -74,8 +77,9 @@ export declare class TreeNode {
     flatten(): TreeNode[];
     canMoveToParent(targetParent: TreeNode): boolean;
     moveToFolder(targetFolder: TreeNode): boolean;
-    private refreshParentRefs;
+    private _refreshParentRefs;
     private _select;
-    private unselectNodeAndChildren;
-    private buildChainToCurrentNode;
+    private _firstSelectable;
+    private _unselectNodeAndChildren;
+    private _buildChainToCurrentNode;
 }

package/dist/ui/tree/tree-node.svelte.js

@@ -20,6 +20,7 @@ export class TreeNode {
     _nonSelectable;
     _children = $state([]);
     _parent;
+    _forestRoots;
     _dirty = $state(false);
     constructor(init) {
         this.id = init.id || this.id;
@@ -76,9 +77,13 @@ export class TreeNode {
     select(options) {
         this._select(options?.explicitly ?? false);
     }
+    /** Register the full set of forest roots so single-select clears across sibling roots, not just this node's own root. Set by the `Tree` component. */
+    setForest(getRoots) {
+        this._forestRoots = getRoots;
+    }
     setChildren(value) {
         this._children = value;
-        this.refreshParentRefs(value);
+        this._refreshParentRefs(value);
     }
     addChild(child) {
         child._parent = this;
@@ -105,7 +110,7 @@ export class TreeNode {
         }
     }
     notifyHover(mouseOver) {
-        const selectionPath = this.buildChainToCurrentNode(this);
+        const selectionPath = this._buildChainToCurrentNode(this);
         for (const item of selectionPath) {
             if (item._onNodeHover) {
                 if (mouseOver) {
@@ -128,7 +133,7 @@ export class TreeNode {
         this._expanded = true;
     }
     unselect() {
-        this.unselectNodeAndChildren(this);
+        this._unselectNodeAndChildren(this);
     }
     flatten() {
         const result = [];
@@ -168,26 +173,25 @@ export class TreeNode {
         this._dragConfig.onNodeMovedToFolder({ movedNode: this, targetFolder });
         return true;
     }
-    refreshParentRefs(children) {
+    _refreshParentRefs(children) {
         for (const child of children) {
             child._parent = this;
             if (child._children.length) {
-                child.refreshParentRefs(child._children);
+                child._refreshParentRefs(child._children);
             }
         }
     }
     _select(selectedExplicitly) {
         if (this._nonSelectable) {
-            if (!this._children.length) {
-                return;
-            }
-            return this._children[0]._select(selectedExplicitly);
+            this._firstSelectable()?._select(selectedExplicitly);
+            return;
         }
-        // generate selection path (all nodes involved into current path)
-        const selectionPath = this.buildChainToCurrentNode(this);
-        // unselect previously selected values
+        const selectionPath = this._buildChainToCurrentNode(this);
         const root = selectionPath[selectionPath.length - 1];
-        this.unselectNodeAndChildren(root);
+        const roots = root._forestRoots?.() ?? [root];
+        for (const r of roots) {
+            this._unselectNodeAndChildren(r);
+        }
         // process selection path
         this._selected = true;
         if (selectionPath.length > 1) {
@@ -209,7 +213,19 @@ export class TreeNode {
             }
         }
     }
-    unselectNodeAndChildren(node) {
+    _firstSelectable() {
+        if (!this._nonSelectable) {
+            return this;
+        }
+        for (const child of this._children) {
+            const found = child._firstSelectable();
+            if (found) {
+                return found;
+            }
+        }
+        return null;
+    }
+    _unselectNodeAndChildren(node) {
         node._involvedIntoActivePath = false;
         node._selected = false;
         const children = node._children;
@@ -217,10 +233,10 @@ export class TreeNode {
             return;
         }
         children.forEach((f) => {
-            this.unselectNodeAndChildren(f);
+            this._unselectNodeAndChildren(f);
         });
     }
-    buildChainToCurrentNode(node) {
+    _buildChainToCurrentNode(node) {
         const chain = [];
         let current = node;
         while (current) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

package/dist/ui/tree/tree-navigation.svelte.d.ts

@@ -1,16 +0,0 @@
-import type { TreeNode } from './tree-node.svelte';
-export declare class TreeNavigation {
-    activeId: string | null;
-    hasFocus: boolean;
-    /** True only while the active node was reached via keyboard — gates the focus ring (mouse selection shows background only). */
-    keyboardActive: boolean;
-    private _getRoots;
-    constructor(getRoots: () => readonly TreeNode[]);
-    itemId(node: TreeNode): string;
-    focus(): void;
-    blur(): void;
-    setActive(node: TreeNode): void;
-    ensureActive(): void;
-    handleKeydown(e: KeyboardEvent): void;
-    private _visibleNodes;
-}

package/dist/ui/tree/tree-navigation.svelte.js

@@ -1,102 +0,0 @@
-export class TreeNavigation {
-    activeId = $state(null);
-    hasFocus = $state(false);
-    /** True only while the active node was reached via keyboard — gates the focus ring (mouse selection shows background only). */
-    keyboardActive = $state(false);
-    _getRoots;
-    constructor(getRoots) {
-        this._getRoots = getRoots;
-    }
-    itemId(node) {
-        return `tree-item-${node.id}`;
-    }
-    focus() {
-        this.hasFocus = true;
-        this.ensureActive();
-    }
-    blur() {
-        this.hasFocus = false;
-    }
-    setActive(node) {
-        this.activeId = node.id;
-    }
-    ensureActive() {
-        const visible = this._visibleNodes();
-        if (this.activeId !== null && visible.some((n) => n.id === this.activeId)) {
-            return;
-        }
-        const selected = visible.find((n) => n.selected);
-        this.activeId = (selected ?? visible[0])?.id ?? null;
-    }
-    handleKeydown(e) {
-        const visible = this._visibleNodes();
-        if (!visible.length) {
-            return;
-        }
-        this.keyboardActive = true;
-        const index = visible.findIndex((n) => n.id === this.activeId);
-        const current = index < 0 ? null : visible[index];
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                this.activeId = visible[index < 0 ? 0 : Math.min(index + 1, visible.length - 1)].id;
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                this.activeId = visible[index <= 0 ? 0 : index - 1].id;
-                break;
-            case 'ArrowRight':
-                e.preventDefault();
-                if (!current) {
-                    this.activeId = visible[0].id;
-                }
-                else if (current.children.length) {
-                    if (current.expanded) {
-                        this.activeId = current.children[0].id;
-                    }
-                    else {
-                        current.expand();
-                    }
-                }
-                break;
-            case 'ArrowLeft':
-                e.preventDefault();
-                if (!current) {
-                    this.activeId = visible[0].id;
-                }
-                else if (current.expanded && current.children.length) {
-                    current.collapse();
-                }
-                else if (current.parent && visible.includes(current.parent)) {
-                    this.activeId = current.parent.id;
-                }
-                break;
-            case 'Home':
-                e.preventDefault();
-                this.activeId = visible[0].id;
-                break;
-            case 'End':
-                e.preventDefault();
-                this.activeId = visible[visible.length - 1].id;
-                break;
-            case 'Enter':
-            case ' ':
-                e.preventDefault();
-                current?.select({ explicitly: true });
-                break;
-        }
-    }
-    _visibleNodes() {
-        const result = [];
-        const walk = (nodes) => {
-            for (const node of nodes) {
-                result.push(node);
-                if (node.expanded && node.children.length) {
-                    walk(node.children);
-                }
-            }
-        };
-        walk(this._getRoots());
-        return result;
-    }
-}