@streamscloud/kit 0.65.1 → 0.67.0

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/dist/ui/video/cmp.video.svelte

@@ -263,7 +263,7 @@ const handleSeek = (percent) => {
     <track src="" kind="captions" />
   </video>
   {#if !everActivated && poster}
-    <img class="video__poster" src={poster} alt="" />
+    <img class="video__poster" src={poster} alt="" draggable="false" />
   {/if}
   <div
     class="video__overlay"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.65.1",
+  "version": "0.67.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
-});