@streamscloud/kit 0.65.1 → 0.66.0

package/dist/core/actions/horizontal-wheel-scroll.d.ts

@@ -1,5 +1,9 @@
 import type { Action } from 'svelte/action';
-export declare const horizontalWheelScroll: Action<HTMLElement, {
+type HorizontalWheelScrollParams = {
     isolateScroll: boolean;
+    /** `false` lets the wheel through to the page once the element can't scroll further that way. @default true */
+    isolateAtEdges?: boolean;
     speed?: number;
-} | undefined>;
+};
+export declare const horizontalWheelScroll: Action<HTMLElement, HorizontalWheelScrollParams | undefined>;
+export {};

package/dist/core/actions/horizontal-wheel-scroll.js

@@ -5,8 +5,10 @@ export const horizontalWheelScroll = (node, param = { isolateScroll: true, speed
             return;
         }
         const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+        const maxScrollLeft = node.scrollWidth - node.clientWidth;
+        const atEdge = (delta < 0 && node.scrollLeft <= 0) || (delta > 0 && node.scrollLeft >= maxScrollLeft - 1);
         node.scrollBy({ left: delta * (param.speed ?? 1) });
-        if (param.isolateScroll) {
+        if (param.isolateScroll && (param.isolateAtEdges !== false || !atEdge)) {
             event.preventDefault();
             event.stopPropagation();
         }

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

@@ -1,3 +1,4 @@
 export declare class BreadcrumbLocalization {
     get navLabel(): string;
+    get hiddenLevels(): string;
 }

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

@@ -3,10 +3,17 @@ const loc = {
     navLabel: {
         en: 'Breadcrumb',
         no: 'Brødsmuler'
+    },
+    hiddenLevels: {
+        en: 'Show hidden levels',
+        no: 'Vis skjulte nivåer'
     }
 };
 export class BreadcrumbLocalization {
     get navLabel() {
         return loc.navLabel[AppLocale.current];
     }
+    get hiddenLevels() {
+        return loc.hiddenLevels[AppLocale.current];
+    }
 }

package/dist/ui/breadcrumb/cmp.breadcrumb.svelte

@@ -1,19 +1,95 @@
-<script lang="ts">import { BreadcrumbLocalization } from './breadcrumb-localization';
-let { items, separator = '/', underline = 'hover' } = $props();
+<script lang="ts">import { horizontalWheelScroll } from '../../core/actions';
+import { Popover } from '../popover';
+import { BreadcrumbLocalization } from './breadcrumb-localization';
+import { tick } from 'svelte';
+let { items, separator = '/', underline = 'hover', overflow = 'wrap', maxItems } = $props();
 const localization = new BreadcrumbLocalization();
+let canScrollBack = $state(false);
+let canScrollForward = $state(false);
+let menuOpened = $state(false);
+const tailLength = $derived(maxItems === undefined ? 0 : Math.max(2, maxItems) - 1);
+const collapsed = $derived(maxItems !== undefined && items.length > tailLength + 1);
+const hiddenItems = $derived(collapsed ? items.slice(1, items.length - tailLength) : []);
+const shownItems = $derived(collapsed ? [items[0], ...items.slice(items.length - tailLength)] : items);
+const scrolls = $derived(overflow === 'scroll');
+// The "…" Popover renders inside the track; a mask would hide it.
+const masked = $derived(scrolls && !menuOpened);
+const updateScrollState = (node) => {
+    canScrollBack = node.scrollLeft > 0;
+    canScrollForward = node.scrollLeft < node.scrollWidth - node.clientWidth - 1;
+};
+const scrollTrack = (node, _items) => {
+    const scrollToCurrent = () => {
+        if (scrolls) {
+            node.scrollLeft = node.scrollWidth;
+        }
+        updateScrollState(node);
+    };
+    // Children too: the track's own box is pinned at max-width, so a web-font swap only resizes its content.
+    const observer = new ResizeObserver(scrollToCurrent);
+    const observeTrackAndCrumbs = () => {
+        observer.disconnect();
+        observer.observe(node);
+        for (const child of node.children) {
+            observer.observe(child);
+        }
+    };
+    observeTrackAndCrumbs();
+    return {
+        update: async () => {
+            await tick();
+            observeTrackAndCrumbs();
+            scrollToCurrent();
+        },
+        destroy: () => observer.disconnect()
+    };
+};
 </script>
 
-<div class="breadcrumb breadcrumb--underline-{underline}" role="navigation" aria-label={localization.navLabel}>
-  {#each items as item, i (item.label + i)}
+{#snippet crumb(item: BreadcrumbItem, current: boolean, menuItem: boolean)}
+  {#if current}
+    <span class="breadcrumb__current" aria-current="page">{item.label}</span>
+  {:else if item.href}
+    <a class="breadcrumb__link" class:breadcrumb__link--menu={menuItem} href={item.href} onclick={(e) => item.on?.click?.(e)}>{item.label}</a>
+  {:else if item.on?.click}
+    <button type="button" class="breadcrumb__link" class:breadcrumb__link--menu={menuItem} onclick={(e) => item.on?.click?.(e)}>{item.label}</button>
+  {:else}
+    <span class="breadcrumb__current" class:breadcrumb__current--menu={menuItem}>{item.label}</span>
+  {/if}
+{/snippet}
+
+<div
+  class="breadcrumb breadcrumb--underline-{underline}"
+  class:breadcrumb--scroll={scrolls}
+  class:breadcrumb--mask-back={masked && canScrollBack && !canScrollForward}
+  class:breadcrumb--mask-forward={masked && canScrollForward && !canScrollBack}
+  class:breadcrumb--mask-both={masked && canScrollBack && canScrollForward}
+  role="navigation"
+  aria-label={localization.navLabel}
+  use:scrollTrack={shownItems}
+  use:horizontalWheelScroll={{ isolateScroll: scrolls, isolateAtEdges: false }}
+  onscroll={(e) => updateScrollState(e.currentTarget)}>
+  {#each shownItems as item, i (`${i}:${item.label}`)}
     {#if i > 0}<span class="breadcrumb__separator" aria-hidden="true">{separator}</span>{/if}
-    {#if i === items.length - 1}
-      <span class="breadcrumb__current" aria-current="page">{item.label}</span>
-    {:else if item.href}
-      <a class="breadcrumb__link" href={item.href} onclick={(e) => item.on?.click?.(e)}>{item.label}</a>
-    {:else if item.on?.click}
-      <button type="button" class="breadcrumb__link" onclick={(e) => item.on?.click?.(e)}>{item.label}</button>
-    {:else}
-      <span class="breadcrumb__current">{item.label}</span>
+    {@render crumb(item, i === shownItems.length - 1, false)}
+    {#if i === 0 && collapsed}
+      <span class="breadcrumb__separator" aria-hidden="true">{separator}</span>
+      <span class="breadcrumb__more" onwheel={(e) => e.stopPropagation()}>
+        <Popover
+          position="bottom-start"
+          fixedPosition
+          aria-label={localization.hiddenLevels}
+          on={{ opened: () => (menuOpened = true), closed: () => (menuOpened = false) }}>
+          {#snippet trigger()}
+            <span class="breadcrumb__more-trigger">…</span>
+          {/snippet}
+          <div class="breadcrumb__menu">
+            {#each hiddenItems as hidden, j (`${j}:${hidden.label}`)}
+              {@render crumb(hidden, false, true)}
+            {/each}
+          </div>
+        </Popover>
+      </span>
     {/if}
   {/each}
 </div>
@@ -27,7 +103,9 @@ A horizontal trail of crumbs ending at the current page. Each non-last item rend
 - plain text `<span>` when neither is set.
 
 The last item is always plain text with `aria-current="page"`. `underline` decides whether the crumb
-links show their underline on hover only (default), always, or never.
+links show their underline on hover only (default), always, or never. `overflow="scroll"` keeps the
+trail on one line that scrolls sideways; `maxItems` folds the middle into a "…" crumb that lists the
+hidden levels.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -63,7 +141,34 @@ links show their underline on hover only (default), always, or never.
 .breadcrumb--underline-never {
   --_breadcrumb--link-text-decoration-hover: none;
 }
+.breadcrumb--scroll {
+  --_breadcrumb--mask-size: 1.5rem;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  padding-block: 0.25rem;
+  margin-block: -0.25rem;
+  white-space: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.breadcrumb--scroll::-webkit-scrollbar {
+  display: none;
+}
+.breadcrumb--mask-back {
+  mask-image: linear-gradient(to right, transparent 0%, black var(--_breadcrumb--mask-size), black 100%);
+}
+.breadcrumb--mask-forward {
+  mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--_breadcrumb--mask-size)), transparent 100%);
+}
+.breadcrumb--mask-both {
+  mask-image: linear-gradient(to right, transparent 0%, black var(--_breadcrumb--mask-size), black calc(100% - var(--_breadcrumb--mask-size)), transparent 100%);
+}
 .breadcrumb__link {
+  padding: 0;
+  font: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
   color: var(--_breadcrumb--link-color);
   text-decoration: var(--_breadcrumb--link-text-decoration);
   transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
@@ -77,11 +182,44 @@ links show their underline on hover only (default), always, or never.
   outline-offset: 2px;
   border-radius: var(--sc-kit--radius--sm);
 }
+.breadcrumb__link--menu {
+  display: block;
+  width: 100%;
+  padding: var(--sc-kit--space--1) var(--sc-kit--space--3);
+  text-align: start;
+  border-radius: var(--sc-kit--radius--sm);
+  white-space: nowrap;
+}
+.breadcrumb__link--menu:hover {
+  background: var(--sc-kit--color--bg--hover);
+}
 .breadcrumb__current {
   color: var(--_breadcrumb--current-color);
   font-weight: var(--sc-kit--font-weight--medium);
 }
+.breadcrumb__current--menu {
+  display: block;
+  padding: var(--sc-kit--space--1) var(--sc-kit--space--3);
+  font-weight: var(--sc-kit--font-weight--regular);
+  white-space: nowrap;
+}
 .breadcrumb__separator {
   color: var(--_breadcrumb--color);
   user-select: none;
+}
+.breadcrumb__more {
+  display: inline-flex;
+}
+.breadcrumb__more-trigger {
+  color: var(--_breadcrumb--link-color);
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.breadcrumb__more-trigger:hover {
+  color: var(--_breadcrumb--link-color-hover);
+}
+.breadcrumb__menu {
+  display: flex;
+  flex-direction: column;
+  padding: var(--sc-kit--space--1);
+  font-size: var(--_breadcrumb--font-size);
 }</style>

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

@@ -5,6 +5,10 @@ type Props = {
     separator?: string;
     /** When the crumb links show their underline: only on hover, permanently, or not at all. @default 'hover' */
     underline?: 'hover' | 'always' | 'never';
+    /** `'wrap'` breaks the trail onto new lines; `'scroll'` keeps one line that scrolls sideways (wheel included) and starts scrolled to the current crumb. @default 'wrap' */
+    overflow?: 'wrap' | 'scroll';
+    /** Collapse the middle of a longer trail: keep the first crumb and the last `maxItems - 1`, the hidden ones open from a "…" crumb. Values below 2 count as 2. */
+    maxItems?: number;
 };
 /**
  * A horizontal trail of crumbs ending at the current page. Each non-last item renders as:
@@ -14,7 +18,9 @@ type Props = {
  * - plain text `<span>` when neither is set.
  *
  * The last item is always plain text with `aria-current="page"`. `underline` decides whether the crumb
- * links show their underline on hover only (default), always, or never.
+ * links show their underline on hover only (default), always, or never. `overflow="scroll"` keeps the
+ * trail on one line that scrolls sideways; `maxItems` folds the middle into a "…" crumb that lists the
+ * hidden levels.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

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}
@@ -287,6 +375,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 +388,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 +406,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 +419,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>;