@streamscloud/kit 0.65.1 → 0.67.0

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

@@ -1,69 +1,146 @@
 <script lang="ts">import { transitionDuration } from '../../core/transitions';
+import { DragAndDrop } from '../drag-and-drop';
 import { Icon } from '../icon';
 import { IconText } from '../icon-text';
 import { ImageRound } from '../image';
+import { Input } from '../input';
 import { Popover, PopoverItem } from '../popover';
 import Self from './cmp.tree-node-view.svelte';
-import { DraggingNodeState } from './tree-node-drag-config.svelte';
+import { TreeDropTarget } from './tree-drop-target.svelte';
+import { TreeLocalization } from './tree-localization';
 import {} from './tree-node.svelte';
-import IconCheckmarkCircle from '@fluentui/svg-icons/icons/checkmark_circle_20_filled.svg?raw';
+import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_20_regular.svg?raw';
 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 { untrack } from 'svelte';
 import { slide } from 'svelte/transition';
-let { node, keyboard, hideExpandIcon = false, level = 0, showSelectedCheckmark } = $props();
+let { node, keyboard, checked, posInSet, setSize, hideExpandIcon = false, level = 0 } = $props();
+const localization = new TreeLocalization();
 let actionsOpened = $state(false);
+let renameInput = $state();
+let renameDraft = $state('');
+let hoveredNode = null;
+let leafElement = $state();
 let dbClickTimeout = undefined;
-let dragExpandTimeout = undefined;
-const children = $derived(node.children || []);
-const hideChildExpandIcon = $derived(children.every((f) => !f.children.length));
+const children = $derived(node.children);
 const visibleActions = $derived(node.actions.filter((a) => !a.visible || a.visible(node)));
-const canAcceptDraggingNode = $derived(DraggingNodeState.draggingNode && DraggingNodeState.draggingNode.canMoveToParent(node));
-const isDraggedOver = $derived(DraggingNodeState.dragOverNode?.id === node.id);
+const actionsShown = $derived(!node.renaming && visibleActions.length > 0);
+const isChecked = $derived(checked?.has(node.id) ?? false);
+const acceptsCurrentDrag = $derived(!!DragAndDrop.event && node.accepts(DragAndDrop.event));
+const dragOver = $derived(acceptsCurrentDrag && TreeDropTarget.node === node);
+$effect(() => {
+    if (!dragOver || node.expanded || !children.length) {
+        return;
+    }
+    const timeout = window.setTimeout(() => node.expand(), 500);
+    return () => clearTimeout(timeout);
+});
+$effect(() => {
+    return () => {
+        handleMouseLeave();
+        clearTimeout(dbClickTimeout);
+    };
+});
+$effect(() => {
+    if (node.renaming) {
+        renameDraft = untrack(() => node.name);
+    }
+});
+$effect(() => {
+    const input = renameInput;
+    if (!node.renaming || !input) {
+        return;
+    }
+    // Deferred: the actions Popover restores focus on close, which would blur the input and end a rename started from an action.
+    const frame = requestAnimationFrame(() => {
+        input.focus();
+        input.select();
+    });
+    return () => cancelAnimationFrame(frame);
+});
 const handleDragStart = (e) => {
-    DraggingNodeState.draggingNode = node;
+    if (!node.drag) {
+        return;
+    }
+    e.stopPropagation();
+    DragAndDrop.event = node.drag;
     if (e.dataTransfer) {
         e.dataTransfer.effectAllowed = 'move';
-        e.dataTransfer.setData('text/plain', node.id);
+        e.dataTransfer.setData('application/x-sc-tree-node', node.id);
     }
 };
 const handleDragEnd = () => {
-    clearTimeout(dragExpandTimeout);
-    DraggingNodeState.draggingNode = null;
-    DraggingNodeState.dragOverNode = null;
+    DragAndDrop.event = null;
+};
+const handleDragEnter = () => {
+    if (acceptsCurrentDrag && leafElement) {
+        TreeDropTarget.claim(node, leafElement);
+    }
 };
 const handleDragOver = (e) => {
-    if (!canAcceptDraggingNode) {
+    if (!acceptsCurrentDrag) {
         return;
     }
     e.preventDefault();
+    e.stopPropagation();
     if (e.dataTransfer) {
         e.dataTransfer.dropEffect = 'move';
     }
-    if (DraggingNodeState.dragOverNode?.id !== node.id) {
-        DraggingNodeState.dragOverNode = node;
-        clearTimeout(dragExpandTimeout);
-        if (!node.expanded && children.length) {
-            dragExpandTimeout = window.setTimeout(() => node.expand(), 500);
-        }
-    }
-};
-const handleDragLeave = (e) => {
-    const rect = e.currentTarget.getBoundingClientRect();
-    const isLeavingElement = e.clientX < rect.left || e.clientX >= rect.right || e.clientY < rect.top || e.clientY >= rect.bottom;
-    if (isLeavingElement && DraggingNodeState.dragOverNode?.id === node.id) {
-        clearTimeout(dragExpandTimeout);
-        DraggingNodeState.dragOverNode = null;
-    }
+    handleDragEnter();
 };
 const handleDrop = (e) => {
-    if (!DraggingNodeState.draggingNode || !canAcceptDraggingNode) {
+    const event = DragAndDrop.event;
+    if (!event || !acceptsCurrentDrag) {
         return;
     }
     e.preventDefault();
-    clearTimeout(dragExpandTimeout);
-    DraggingNodeState.draggingNode.moveToFolder(node);
-    DraggingNodeState.draggingNode = null;
-    DraggingNodeState.dragOverNode = null;
+    e.stopPropagation();
+    DragAndDrop.event = null;
+    node.receiveDrop(event);
+};
+const handleAnchorKeydown = (e) => {
+    if (e.key === 'F2' && node.renaming) {
+        e.preventDefault();
+        renameInput?.focus();
+        return;
+    }
+    keyboard.handleKeydown(node, e);
+};
+const handleRenameKeydown = async (e) => {
+    if (e.key === 'Escape') {
+        e.preventDefault();
+        node.cancelRename();
+        if (!node.renaming) {
+            await keyboard.focusAfterTick(node);
+        }
+    }
+    else if (e.key === 'Enter' && !e.isComposing && !node.renamePending) {
+        e.preventDefault();
+        const accepted = await node.commitRename(renameDraft);
+        const focusStayedWithRow = document.activeElement === document.body || !!leafElement?.contains(document.activeElement);
+        if (!focusStayedWithRow) {
+            return;
+        }
+        if (accepted) {
+            await keyboard.focusAfterTick(node);
+        }
+        else {
+            renameInput?.focus();
+        }
+    }
+};
+const handleRenameBlur = () => {
+    if (!node.renamePending) {
+        void node.commitRename(renameDraft);
+    }
+};
+const handleMouseEnter = () => {
+    hoveredNode = node;
+    node.notifyHover(true);
+};
+const handleMouseLeave = () => {
+    hoveredNode?.notifyHover(false);
+    hoveredNode = null;
 };
 const handleSelectNode = (e) => {
     e.stopPropagation();
@@ -99,45 +176,33 @@ const handleActionsOpened = () => {
 const handleActionsClosed = () => {
     actionsOpened = false;
 };
-const handleMouseOver = () => {
-    node.notifyHover(true);
-};
-const handleMouseLeave = () => {
-    node.notifyHover(false);
-};
 </script>
 
-<div
-  class="tree-node"
-  style={`--_tree-node--level: ${level}`}
-  role="treeitem"
-  aria-level={level + 1}
-  aria-selected={node.selected}
-  aria-expanded={children.length ? node.expanded : undefined}>
-  <!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<div class="tree-node" style={`--_tree-node--level: ${level}`} role="none">
   <div
+    bind:this={leafElement}
     class="tree-node__leaf"
     class:tree-node__leaf--active={node.selected}
-    class:tree-node__leaf--draggable={node.dragConfig}
+    class:tree-node__leaf--draggable={node.drag}
     class:tree-node__leaf--expandable={children.length}
-    class:tree-node__leaf--drag-over={isDraggedOver}
-    draggable={!!node.dragConfig}
+    class:tree-node__leaf--drag-over={dragOver}
+    draggable={!!node.drag && !node.renaming}
     ondragstart={handleDragStart}
     ondragend={handleDragEnd}
+    ondragenter={handleDragEnter}
     ondragover={handleDragOver}
-    ondragleave={handleDragLeave}
     ondrop={handleDrop}
-    onmouseover={handleMouseOver}
+    onmouseenter={handleMouseEnter}
     onmouseleave={handleMouseLeave}
     role="none">
-    {#if !hideExpandIcon || level > 0}
+    {#if !hideExpandIcon}
       <button
         type="button"
         class="tree-node__expand-button"
         class:tree-node__expand-button--hidden={!children.length}
-        class:tree-node__expand-button--active={node.selected || node.involvedIntoActivePath}
         tabindex="-1"
         aria-hidden="true"
+        onmousedown={(e) => e.preventDefault()}
         onclick={handleExpandNode}>
         <span class="tree-node__expand-icon" class:tree-node__expand-icon--expanded={node.expanded}>
           <Icon src={IconChevronRight} />
@@ -147,37 +212,60 @@ const handleMouseLeave = () => {
 
     <div
       class="tree-node__anchor"
+      class:tree-node__anchor--renaming={node.renaming}
       id={keyboard.anchorId(node)}
-      role="button"
+      role="treeitem"
+      aria-level={level + 1}
+      aria-posinset={posInSet}
+      aria-setsize={setSize}
+      aria-selected={node.selected}
+      aria-checked={checked ? isChecked : undefined}
+      aria-expanded={children.length ? node.expanded : undefined}
       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}
+      onkeydown={handleAnchorKeydown}>
+      {#if node.icon}
+        <div class="tree-node__icon">
+          {#if typeof node.icon === 'string'}
             <Icon src={node.icon} />
-          {/if}
-          {#if node.imgIcon}
-            <ImageRound src={node.imgIcon} alt="" />
+          {:else}
+            <ImageRound src={node.icon.image} alt="" />
           {/if}
         </div>
       {/if}
-      <div class="tree-node__text" class:tree-node__text--active={node.selected}>
-        {node.name}
-        {#if node.dirty}*{/if}
-      </div>
-      {#if node.count}
-        <div class="tree-node__count">{node.count}</div>
+      {#if node.renaming}
+        <div
+          class="tree-node__rename"
+          onclick={(e) => e.stopPropagation()}
+          ondblclick={(e) => e.stopPropagation()}
+          onkeydown={(e) => e.stopPropagation()}
+          role="none">
+          <Input
+            bind:this={renameInput}
+            value={renameDraft}
+            readonly={node.renamePending}
+            aria-label={localization.nodeName}
+            on={{ input: (v) => (renameDraft = v), keydown: handleRenameKeydown, blur: handleRenameBlur }} />
+        </div>
+      {:else}
+        <div class="tree-node__text" class:tree-node__text--active={node.selected}>
+          {node.name}
+          {#if node.dirty}*{/if}
+        </div>
+        {#if node.count}
+          <div class="tree-node__count">{node.count}</div>
+        {/if}
       {/if}
     </div>
 
-    {#if showSelectedCheckmark && !visibleActions.length}
-      <div class="node-actions">
-        <Icon src={IconCheckmarkCircle} color="success" />
+    {#if isChecked && !node.renaming}
+      <div class="tree-node__check" aria-hidden="true">
+        <Icon src={IconCheckmark} color="accent" />
       </div>
-    {:else if visibleActions.length}
+    {/if}
+    {#if actionsShown}
       <div class="node-actions" class:node-actions--opened={actionsOpened}>
         <Popover position="bottom-end" fixedPosition on={{ opened: handleActionsOpened, closed: handleActionsClosed }}>
           {#snippet trigger()}
@@ -196,9 +284,9 @@ const handleMouseLeave = () => {
     {/if}
   </div>
   {#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} keyboard={keyboard} level={level + 1} hideExpandIcon={hideChildExpandIcon} showSelectedCheckmark={showSelectedCheckmark} />
+    <div transition:slide={{ duration: transitionDuration.base }} class="tree-node__children" role="none">
+      {#each children as child, i (child.id)}
+        <Self node={child} keyboard={keyboard} checked={checked} posInSet={i + 1} setSize={children.length} level={level + 1} />
       {/each}
     </div>
   {/if}
@@ -253,6 +341,7 @@ const handleMouseLeave = () => {
 .tree-node__leaf--drag-over {
   background: var(--sc-kit--color--bg--menu-active);
   outline: 1px solid var(--sc-kit--color--accent);
+  outline-offset: -1px;
 }
 .tree-node__children {
   width: 100%;
@@ -287,6 +376,9 @@ const handleMouseLeave = () => {
   padding: var(--_tree-node--padding-block) 0;
   outline: none;
 }
+.tree-node__anchor--renaming {
+  padding-block: 0;
+}
 .tree-node__icon {
   --sc-kit--icon--size: var(--_tree-node--icon-size);
   display: inline-flex;
@@ -297,6 +389,12 @@ const handleMouseLeave = () => {
   height: var(--_tree-node--icon-size);
   color: var(--sc-kit--color--text--muted);
 }
+.tree-node__check {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  margin-left: var(--sc-kit--space--1);
+}
 .tree-node__text {
   flex: 1;
   min-width: 0;
@@ -309,6 +407,12 @@ const handleMouseLeave = () => {
 .tree-node__text--active {
   font-weight: var(--sc-kit--font-weight--semibold);
 }
+.tree-node__rename {
+  --sc-kit--input--font-size: var(--_tree-node--font-size);
+  flex: 1;
+  min-width: 0;
+  user-select: text;
+}
 .tree-node__count {
   flex-shrink: 0;
   font-size: var(--sc-kit--font-size--xs);
@@ -316,12 +420,10 @@ const handleMouseLeave = () => {
 }
 
 .node-actions {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: var(--sc-kit--space--2);
   display: flex;
+  flex-shrink: 0;
   align-items: center;
+  margin-left: var(--sc-kit--space--1);
   opacity: var(--_tree-node--action-opacity);
   transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }

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

@@ -3,9 +3,12 @@ import { type TreeNode } from './tree-node.svelte';
 type Props = {
     node: TreeNode;
     keyboard: TreeKeyboard;
+    checked: ReadonlySet<string> | null;
+    posInSet: number;
+    setSize: number;
+    /** Drops the chevron slot; set by the tree on roots when no root is expandable. */
     hideExpandIcon?: boolean;
     level?: number;
-    showSelectedCheckmark?: boolean;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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];
+    }
+}