@streamscloud/kit 0.65.1 → 0.66.0

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

@@ -1,8 +1,9 @@
 <script lang="ts">import NodeView from './cmp.tree-node-view.svelte';
 import { createTreeKeyboard } from './tree-keyboard.svelte';
-let { nodes, showSelectedCheckmark, header } = $props();
+let { nodes, checked, header } = $props();
 const nodesComputed = $derived(nodes ? (Array.isArray(nodes) ? nodes : [nodes]) : []);
 const hideExpandIcon = $derived(nodesComputed.every((f) => !f.children.length));
+const checkedSet = $derived(checked ? new Set(checked) : null);
 $effect(() => {
     for (const root of nodesComputed) {
         root.setForest(() => nodesComputed);
@@ -14,8 +15,8 @@ const keyboard = createTreeKeyboard(() => nodesComputed);
 <div class="tree">
   {@render header?.()}
   <div class="tree__nodes" role="tree">
-    {#each nodesComputed as node (node.id)}
-      <NodeView node={node} keyboard={keyboard} hideExpandIcon={hideExpandIcon} showSelectedCheckmark={showSelectedCheckmark} />
+    {#each nodesComputed as node, i (node.id)}
+      <NodeView node={node} keyboard={keyboard} checked={checkedSet} posInSet={i + 1} setSize={nodesComputed.length} hideExpandIcon={hideExpandIcon} />
     {/each}
   </div>
 </div>
@@ -23,13 +24,13 @@ const keyboard = createTreeKeyboard(() => nodesComputed);
 <!--
 @component
 Tree — hierarchical, collapsible node list driven by `TreeNode` model instances. Each `TreeNode`
-holds its own expanded / selected state, children, optional icon / count / actions, and an optional
-drag config (reorder or move-to-folder). Build the model with `new TreeNode({ … })` and pass the
-root(s) as `nodes`.
+holds its own expanded / selected state, children, optional icon / count / actions, optional drag /
+drop over the shared `DragAndDrop` store, and optional inline rename. Build the model with
+`new TreeNode({ … })` and pass the root(s) as `nodes`; `checked` marks any set of nodes with a checkmark.
 
 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.
+Home/End jump to first/last, Enter/Space select, F2 renames. In rename mode Enter / blur commit, Esc cancels.
 
 ### CSS Custom Properties
 | Property | Description | Default |

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

@@ -3,20 +3,20 @@ import type { Snippet } from 'svelte';
 type Props = {
     /** Root node, or array of root nodes. */
     nodes: TreeNode | readonly TreeNode[];
-    /** Show a success checkmark on the selected node when it has no actions. */
-    showSelectedCheckmark?: boolean;
+    /** Ids of nodes that show a checkmark. Display only — the tree never changes it. */
+    checked?: readonly string[];
     /** Optional content rendered above the nodes (e.g. a header). */
     header?: Snippet;
 };
 /**
  * Tree — hierarchical, collapsible node list driven by `TreeNode` model instances. Each `TreeNode`
- * holds its own expanded / selected state, children, optional icon / count / actions, and an optional
- * drag config (reorder or move-to-folder). Build the model with `new TreeNode({ … })` and pass the
- * root(s) as `nodes`.
+ * holds its own expanded / selected state, children, optional icon / count / actions, optional drag /
+ * drop over the shared `DragAndDrop` store, and optional inline rename. Build the model with
+ * `new TreeNode({ … })` and pass the root(s) as `nodes`; `checked` marks any set of nodes with a checkmark.
  *
  * 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.
+ * Home/End jump to first/last, Enter/Space select, F2 renames. In rename mode Enter / blur commit, Esc cancels.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/tree/index.d.ts

@@ -1,4 +1,3 @@
 export { default as Tree } from './cmp.tree.svelte';
-export { TreeNode, type TreeNodeInitializer } from './tree-node.svelte';
+export { TreeNode, type TreeNodeIcon, type TreeNodeInitializer } from './tree-node.svelte';
 export type { TreeNodeAction } from './tree-node-action';
-export type { TreeNodeDragConfig, TreeNodeMoveToFolderCallbackParams } from './tree-node-drag-config.svelte';

package/dist/ui/tree/tree-drop-target.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { TreeNode } from './tree-node.svelte';
+declare class TreeDropTargetContainer {
+    node: TreeNode | null;
+    private _element;
+    private _listening;
+    claim(node: TreeNode, element: HTMLElement): void;
+    private _release;
+    private _releaseOutside;
+    private _listen;
+}
+/** The single row under the pointer that accepts the current drag, shared by every row of every tree. */
+export declare const TreeDropTarget: TreeDropTargetContainer;
+export {};

package/dist/ui/tree/tree-drop-target.svelte.js

@@ -0,0 +1,30 @@
+class TreeDropTargetContainer {
+    node = $state.raw(null);
+    _element = null;
+    _listening = false;
+    claim(node, element) {
+        this.node = node;
+        this._element = element;
+        this._listen();
+    }
+    _release = () => {
+        this.node = null;
+        this._element = null;
+    };
+    _releaseOutside = (e) => {
+        if (!(e.target instanceof Node) || !this._element?.contains(e.target)) {
+            this._release();
+        }
+    };
+    _listen() {
+        if (this._listening) {
+            return;
+        }
+        this._listening = true;
+        window.addEventListener('dragenter', this._releaseOutside, true);
+        window.addEventListener('drop', this._release, true);
+        window.addEventListener('dragend', this._release, true);
+    }
+}
+/** The single row under the pointer that accepts the current drag, shared by every row of every tree. */
+export const TreeDropTarget = new TreeDropTargetContainer();

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

@@ -4,6 +4,7 @@ export declare const createTreeKeyboard: (getRoots: () => readonly TreeNode[]) =
     anchorId: (node: TreeNode) => string;
     readonly currentId: string | null;
     setFocused: (id: string) => void;
+    focusAfterTick: (node: TreeNode) => Promise<void>;
     handleKeydown: (node: TreeNode, e: KeyboardEvent) => void;
 };
 export type TreeKeyboard = ReturnType<typeof createTreeKeyboard>;

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

@@ -52,6 +52,7 @@ export const createTreeKeyboard = (getRoots) => {
         setFocused: (id) => {
             focusedId = id;
         },
+        focusAfterTick,
         handleKeydown: (node, e) => {
             switch (e.key) {
                 case 'ArrowDown':
@@ -101,6 +102,12 @@ export const createTreeKeyboard = (getRoots) => {
                     e.preventDefault();
                     node.select({ explicitly: true });
                     break;
+                case 'F2':
+                    if (node.renamable) {
+                        e.preventDefault();
+                        node.startRename();
+                    }
+                    break;
             }
         }
     };

package/dist/ui/tree/tree-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class TreeLocalization {
+    get nodeName(): string;
+}

package/dist/ui/tree/tree-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    nodeName: {
+        en: 'Name',
+        no: 'Navn'
+    }
+};
+export class TreeLocalization {
+    get nodeName() {
+        return loc.nodeName[AppLocale.current];
+    }
+}

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

@@ -1,5 +1,21 @@
+import type { DragEventModel } from '../drag-and-drop';
 import type { TreeNodeAction } from './tree-node-action';
-import type { TreeNodeDragConfig } from './tree-node-drag-config.svelte';
+/** SVG source, a round image, or `null` for no icon. */
+export type TreeNodeIcon = string | {
+    image: string;
+} | null;
+type TreeNodeHandlers = {
+    select?: (node: TreeNode, opt: {
+        selectedExplicitly: boolean;
+    }) => void;
+    hover?: {
+        enter: (node: TreeNode) => void;
+        leave: (node: TreeNode) => void;
+    };
+    drop?: (e: DragEventModel<unknown>) => void;
+    /** Enables inline rename (`startRename()`, F2). Resolve `false` to reject the name and keep editing; on `true` the node takes the new name. A throw counts as `false`. */
+    rename?: (name: string) => boolean | Promise<boolean>;
+};
 export type TreeNodeInitializer = {
     name?: string;
     id?: string;
@@ -10,45 +26,42 @@ export type TreeNodeInitializer = {
     meta?: string | null;
     /** Destination route for this node. The kit does not navigate; read it in your selection handler (e.g. `goto(node.href)`). */
     href?: string | null;
-    icon?: string;
-    imgIcon?: string;
+    /** `null` renders no icon. @default folder icon */
+    icon?: TreeNodeIcon;
     count?: number;
-    hideIcon?: boolean;
-    onNodeSelected?: (node: TreeNode, opt: {
-        selectedExplicitly: boolean;
-    }) => void;
-    onNodeHover?: {
-        mouseover: (node: TreeNode) => void;
-        mouseleave: (node: TreeNode) => void;
-    };
-    dragConfig?: TreeNodeDragConfig;
+    /** Payload the row puts into the `DragAndDrop` store when dragged. */
+    drag?: DragEventModel<unknown>;
+    /** Decides per `DragAndDrop` payload whether this node takes the drop (`on.drop`). */
+    accepts?: (e: DragEventModel<unknown>) => boolean;
     children?: TreeNode[];
     actions?: TreeNodeAction[];
+    /** `select` / `hover` go to the nearest handler up the chain from the target node (self included) — only that one fires. */
+    on?: TreeNodeHandlers;
 };
 export declare class TreeNode {
     id: string;
     name: string;
-    icon: string;
+    icon: TreeNodeIcon;
     count?: number;
     expandOnDoubleClick: boolean;
     meta?: string | null;
     href?: string | null;
-    private _dragConfig?;
-    private _onNodeSelected?;
-    private _onNodeHover?;
-    private _imgIcon;
-    private _hideIcon;
+    private _drag?;
+    private _accepts?;
+    private _on;
+    private _renaming;
+    private _renamePending;
     private _expanded;
     private _selected;
-    private _involvedIntoActivePath;
     private _actions;
     private _nonSelectable;
     private _children;
     private _parent?;
     private _forestRoots?;
     private _dirty;
+    private _hoverLeave?;
     constructor(init: TreeNodeInitializer);
-    /** Whether this node has unsaved changes; set via `setDirty` and propagated up to ancestors. */
+    /** Marked itself via `setDirty`, or has a dirty descendant. */
     get dirty(): boolean;
     get expanded(): boolean;
     get selected(): boolean;
@@ -56,30 +69,37 @@ export declare class TreeNode {
     get actions(): TreeNodeAction[];
     get parent(): TreeNode | undefined;
     get nonSelectable(): boolean;
-    get involvedIntoActivePath(): boolean;
-    get imgIcon(): string;
-    get hideIcon(): boolean;
-    get dragConfig(): TreeNodeDragConfig | undefined;
+    get drag(): DragEventModel<unknown> | undefined;
+    get renamable(): boolean;
+    get renaming(): boolean;
+    /** A committed name is waiting for `on.rename` to answer. */
+    get renamePending(): boolean;
+    accepts(e: DragEventModel<unknown>): boolean;
+    /** Hands the payload to `on.drop`; the caller has already checked `accepts`. */
+    receiveDrop(e: DragEventModel<unknown>): void;
+    startRename(): void;
+    cancelRename(): void;
+    /** Resolves `false` when the name was rejected or a commit is already pending — the node stays in rename mode. Empty or unchanged input just leaves rename mode. */
+    commitRename(value: string): Promise<boolean>;
     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;
+    /** Detaches the child from its current parent first, so a move is a single call. */
     addChild(child: TreeNode): void;
-    insertChildAt(index: number, child: TreeNode): void;
     removeChild(child: TreeNode): void;
     setDirty(value: boolean): void;
-    notifyHover(mouseOver: boolean): void;
+    notifyHover(entered: boolean): void;
     collapse(): void;
     expand(): void;
     unselect(): void;
     flatten(): TreeNode[];
-    canMoveToParent(targetParent: TreeNode): boolean;
-    moveToFolder(targetFolder: TreeNode): boolean;
-    private _refreshParentRefs;
     private _select;
+    private _nearestHandler;
     private _firstSelectable;
-    private _unselectNodeAndChildren;
-    private _buildChainToCurrentNode;
+    private _clearSelection;
+    private _chain;
 }
+export {};

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

@@ -3,46 +3,44 @@ import IconDocumentFolder from '@fluentui/svg-icons/icons/document_folder_20_reg
 export class TreeNode {
     id = randomNanoid(9);
     name = $state('');
-    icon = $state('');
+    icon = $state(null);
     count = $state(undefined);
     expandOnDoubleClick = $state(false);
     meta = $state(undefined);
     href = $state(undefined);
-    _dragConfig;
-    _onNodeSelected;
-    _onNodeHover;
-    _imgIcon;
-    _hideIcon;
+    _drag;
+    _accepts;
+    _on;
+    _renaming = $state(false);
+    _renamePending = $state(false);
     _expanded = $state(false);
     _selected = $state(false);
-    _involvedIntoActivePath = $state(false);
     _actions = [];
     _nonSelectable;
     _children = $state([]);
     _parent;
     _forestRoots;
     _dirty = $state(false);
+    _hoverLeave;
     constructor(init) {
         this.id = init.id || this.id;
         this.name = init.name || '';
         this.href = init.href;
         this.meta = init.meta;
         this._nonSelectable = init.nonSelectable || false;
-        this.icon = init.icon || (init.imgIcon ? '' : IconDocumentFolder);
-        this._imgIcon = init.imgIcon || '';
+        this.icon = init.icon === undefined ? IconDocumentFolder : init.icon;
         this.count = init.count;
-        this._hideIcon = init.hideIcon || false;
-        this._onNodeSelected = init.onNodeSelected;
-        this._onNodeHover = init.onNodeHover;
-        this._dragConfig = init.dragConfig;
+        this._drag = init.drag;
+        this._accepts = init.accepts;
+        this._on = init.on ?? {};
         this.setChildren(init.children || []);
         this._expanded = init.initiallyExpanded || false;
         this.expandOnDoubleClick = init.expandOnDoubleClick || false;
         this._actions = init.actions || [];
     }
-    /** Whether this node has unsaved changes; set via `setDirty` and propagated up to ancestors. */
+    /** Marked itself via `setDirty`, or has a dirty descendant. */
     get dirty() {
-        return this._dirty;
+        return this._dirty || this._children.some((c) => c.dirty);
     }
     get expanded() {
         return this._expanded;
@@ -62,17 +60,66 @@ export class TreeNode {
     get nonSelectable() {
         return this._nonSelectable;
     }
-    get involvedIntoActivePath() {
-        return this._involvedIntoActivePath;
+    get drag() {
+        return this._drag;
     }
-    get imgIcon() {
-        return this._imgIcon;
+    get renamable() {
+        return !!this._on.rename;
     }
-    get hideIcon() {
-        return this._hideIcon;
+    get renaming() {
+        return this._renaming;
     }
-    get dragConfig() {
-        return this._dragConfig;
+    /** A committed name is waiting for `on.rename` to answer. */
+    get renamePending() {
+        return this._renamePending;
+    }
+    accepts(e) {
+        return !!this._on.drop && !!this._accepts?.(e);
+    }
+    /** Hands the payload to `on.drop`; the caller has already checked `accepts`. */
+    receiveDrop(e) {
+        this._on.drop?.(e);
+    }
+    startRename() {
+        if (this._on.rename) {
+            this._renaming = true;
+        }
+    }
+    cancelRename() {
+        if (!this._renamePending) {
+            this._renaming = false;
+        }
+    }
+    /** Resolves `false` when the name was rejected or a commit is already pending — the node stays in rename mode. Empty or unchanged input just leaves rename mode. */
+    async commitRename(value) {
+        if (!this._renaming) {
+            return true;
+        }
+        if (this._renamePending) {
+            return false;
+        }
+        const name = value.trim();
+        const rename = this._on.rename;
+        if (!rename || !name || name === this.name) {
+            this._renaming = false;
+            return true;
+        }
+        this._renamePending = true;
+        let accepted;
+        try {
+            accepted = await rename(name);
+        }
+        catch {
+            accepted = false;
+        }
+        finally {
+            this._renamePending = false;
+        }
+        if (accepted) {
+            this.name = name;
+            this._renaming = false;
+        }
+        return accepted;
     }
     select(options) {
         this._select(options?.explicitly ?? false);
@@ -83,44 +130,39 @@ export class TreeNode {
     }
     setChildren(value) {
         this._children = value;
-        this._refreshParentRefs(value);
+        for (const child of value) {
+            child._parent = this;
+        }
     }
+    /** Detaches the child from its current parent first, so a move is a single call. */
     addChild(child) {
+        child._parent?.removeChild(child);
         child._parent = this;
         this._children.push(child);
     }
-    insertChildAt(index, child) {
-        child._parent = this;
-        this._children.splice(index, 0, child);
-    }
     removeChild(child) {
         const i = this._children.indexOf(child);
         if (i < 0) {
             return;
         }
         this._children.splice(i, 1);
-        child._parent = undefined;
+        if (child._parent === this) {
+            child._parent = undefined;
+        }
     }
     setDirty(value) {
         this._dirty = value;
-        if (this._parent) {
-            const parent = this._parent;
-            const children = parent.flatten().filter((f) => f.id !== parent.id);
-            parent.setDirty(children.some((f) => f._dirty));
-        }
-    }
-    notifyHover(mouseOver) {
-        const selectionPath = this._buildChainToCurrentNode(this);
-        for (const item of selectionPath) {
-            if (item._onNodeHover) {
-                if (mouseOver) {
-                    item._onNodeHover.mouseover(this);
-                }
-                else {
-                    item._onNodeHover.mouseleave(this);
-                }
-                return;
-            }
+    }
+    notifyHover(entered) {
+        if (entered) {
+            const hover = this._nearestHandler('hover');
+            this._hoverLeave = hover?.leave;
+            hover?.enter(this);
+        }
+        else {
+            const leave = this._hoverLeave;
+            this._hoverLeave = undefined;
+            leave?.(this);
         }
     }
     collapse() {
@@ -133,7 +175,7 @@ export class TreeNode {
         this._expanded = true;
     }
     unselect() {
-        this._unselectNodeAndChildren(this);
+        this._clearSelection();
     }
     flatten() {
         const result = [];
@@ -144,74 +186,25 @@ export class TreeNode {
         processNode(this);
         return result;
     }
-    canMoveToParent(targetParent) {
-        if (!this._dragConfig) {
-            return false;
-        }
-        if (!targetParent._dragConfig) {
-            return false;
-        }
-        const canMoveTo = (targetParent) => {
-            let current = targetParent;
-            while (current) {
-                if (current.id === this.id) {
-                    return false;
-                }
-                current = current._parent;
-            }
-            return true;
-        };
-        if (!canMoveTo(targetParent)) {
-            return false;
-        }
-        return targetParent._dragConfig.acceptZones.includes(this._dragConfig.dragZone);
-    }
-    moveToFolder(targetFolder) {
-        if (!this._parent || !this._dragConfig || !this.canMoveToParent(targetFolder)) {
-            return false;
-        }
-        this._dragConfig.onNodeMovedToFolder({ movedNode: this, targetFolder });
-        return true;
-    }
-    _refreshParentRefs(children) {
-        for (const child of children) {
-            child._parent = this;
-            if (child._children.length) {
-                child._refreshParentRefs(child._children);
-            }
-        }
-    }
     _select(selectedExplicitly) {
         if (this._nonSelectable) {
             this._firstSelectable()?._select(selectedExplicitly);
             return;
         }
-        const selectionPath = this._buildChainToCurrentNode(this);
+        const selectionPath = this._chain();
         const root = selectionPath[selectionPath.length - 1];
         const roots = root._forestRoots?.() ?? [root];
         for (const r of roots) {
-            this._unselectNodeAndChildren(r);
+            r._clearSelection();
         }
-        // process selection path
         this._selected = true;
-        if (selectionPath.length > 1) {
-            for (let i = 1, length = selectionPath.length; i < length; i++) {
-                const item = selectionPath[i];
-                item._expanded = true;
-            }
-        }
-        let callbackInvoked = false;
-        for (let i = 0, length = selectionPath.length; i < length; i++) {
-            const item = selectionPath[i];
-            item._involvedIntoActivePath = true;
-            if (callbackInvoked) {
-                continue;
-            }
-            if (item._onNodeSelected) {
-                item._onNodeSelected(this, { selectedExplicitly });
-                callbackInvoked = true;
-            }
+        for (const ancestor of selectionPath.slice(1)) {
+            ancestor._expanded = true;
         }
+        this._nearestHandler('select')?.(this, { selectedExplicitly });
+    }
+    _nearestHandler(key) {
+        return this._chain().find((n) => n._on[key])?._on[key];
     }
     _firstSelectable() {
         if (!this._nonSelectable) {
@@ -225,24 +218,11 @@ export class TreeNode {
         }
         return null;
     }
-    _unselectNodeAndChildren(node) {
-        node._involvedIntoActivePath = false;
-        node._selected = false;
-        const children = node._children;
-        if (!children.length) {
-            return;
-        }
-        children.forEach((f) => {
-            this._unselectNodeAndChildren(f);
-        });
+    _clearSelection() {
+        this._selected = false;
+        this._children.forEach((c) => c._clearSelection());
     }
-    _buildChainToCurrentNode(node) {
-        const chain = [];
-        let current = node;
-        while (current) {
-            chain.push(current);
-            current = current._parent;
-        }
-        return chain;
+    _chain() {
+        return this._parent ? [this, ...this._parent._chain()] : [this];
     }
 }

package/package.json

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

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

@@ -1,16 +0,0 @@
-import type { TreeNode } from './tree-node.svelte';
-export type TreeNodeDragConfig = {
-    /** This node's own drag type (e.g. `'folder'`, `'jpeg'`). */
-    dragZone: string;
-    /** Drag types this node accepts dropped into it (e.g. a folder accepts `['folder', 'jpeg', 'mp3']`; a file accepts `[]`). */
-    acceptZones: string[];
-    onNodeMovedToFolder: (params: TreeNodeMoveToFolderCallbackParams) => void;
-};
-export type TreeNodeMoveToFolderCallbackParams = {
-    movedNode: TreeNode;
-    targetFolder: TreeNode;
-};
-export declare const DraggingNodeState: {
-    draggingNode: TreeNode | null;
-    dragOverNode: TreeNode | null;
-};

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

@@ -1,4 +0,0 @@
-export const DraggingNodeState = $state({
-    draggingNode: null,
-    dragOverNode: null
-});