@streamscloud/kit 0.2.42 → 0.9.1

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

@@ -0,0 +1,342 @@
+<script lang="ts">import { transitionDuration } from '../../core/transitions';
+import { Icon } from '../icon';
+import { IconText } from '../icon-text';
+import { ImageRound } from '../image';
+import { Popover, PopoverItem } from '../popover';
+import Self from './cmp.tree-node-view.svelte';
+import { DraggingNodeState } from './tree-node-drag-config.svelte';
+import {} from './tree-node.svelte';
+import IconCheckmarkCircle from '@fluentui/svg-icons/icons/checkmark_circle_20_filled.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 { slide } from 'svelte/transition';
+let { node, nav, hideExpandIcon = false, level = 0, showSelectedCheckmark } = $props();
+let actionsOpened = $state(false);
+let dbClickTimeout = undefined;
+let dragExpandTimeout = undefined;
+const children = $derived(node.children || []);
+const hideChildExpandIcon = $derived(children.every((f) => !f.children.length));
+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 handleDragStart = (e) => {
+    DraggingNodeState.draggingNode = node;
+    if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', node.id);
+    }
+};
+const handleDragEnd = () => {
+    clearTimeout(dragExpandTimeout);
+    DraggingNodeState.draggingNode = null;
+    DraggingNodeState.dragOverNode = null;
+};
+const handleDragOver = (e) => {
+    if (!canAcceptDraggingNode) {
+        return;
+    }
+    e.preventDefault();
+    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;
+    }
+};
+const handleDrop = (e) => {
+    if (!DraggingNodeState.draggingNode || !canAcceptDraggingNode) {
+        return;
+    }
+    e.preventDefault();
+    clearTimeout(dragExpandTimeout);
+    DraggingNodeState.draggingNode.moveToFolder(node);
+    DraggingNodeState.draggingNode = null;
+    DraggingNodeState.dragOverNode = null;
+};
+const handleSelectNode = (e) => {
+    e.stopPropagation();
+    nav.setActive(node);
+    clearTimeout(dbClickTimeout);
+    if (node.expandOnDoubleClick) {
+        dbClickTimeout = window.setTimeout(() => {
+            node.select({ explicitly: true });
+        }, 250);
+    }
+    else {
+        node.select({ explicitly: true });
+    }
+};
+const handleExpandNode = (e) => {
+    e.stopPropagation();
+    nav.setActive(node);
+    if (node.expanded) {
+        node.collapse();
+    }
+    else {
+        node.expand();
+    }
+};
+const handleExpandOnDoubleClick = (e) => {
+    if (!node.expandOnDoubleClick) {
+        return;
+    }
+    clearTimeout(dbClickTimeout);
+    handleExpandNode(e);
+};
+const handleActionsOpened = () => {
+    actionsOpened = true;
+};
+const handleActionsClosed = () => {
+    actionsOpened = false;
+};
+const handleMouseOver = () => {
+    node.notifyHover(true);
+};
+const handleMouseLeave = () => {
+    node.notifyHover(false);
+};
+</script>
+
+<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}>
+  <!-- svelte-ignore a11y_mouse_events_have_key_events -->
+  <div
+    class="tree-node__leaf"
+    class:tree-node__leaf--active={node.selected}
+    class:tree-node__leaf--focused={nav.hasFocus && 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}
+    draggable={!!node.dragConfig}
+    ondragstart={handleDragStart}
+    ondragend={handleDragEnd}
+    ondragover={handleDragOver}
+    ondragleave={handleDragLeave}
+    ondrop={handleDrop}
+    onmouseover={handleMouseOver}
+    onmouseleave={handleMouseLeave}
+    role="none">
+    {#if !hideExpandIcon || level > 0}
+      <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"
+        onclick={handleExpandNode}>
+        <span class="tree-node__expand-icon" class:tree-node__expand-icon--expanded={node.expanded}>
+          <Icon src={IconChevronRight} />
+        </span>
+      </button>
+    {/if}
+
+    <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+    <div class="tree-node__anchor" onclick={handleSelectNode} ondblclick={handleExpandOnDoubleClick}>
+      {#if !node.hideIcon}
+        <div class="tree-node__icon" class:tree-node__icon--active={node.selected}>
+          {#if node.icon}
+            <Icon src={node.icon} />
+          {/if}
+          {#if node.imgIcon}
+            <ImageRound src={node.imgIcon} 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}
+    </div>
+
+    {#if showSelectedCheckmark && !visibleActions.length}
+      <div class="node-actions">
+        <Icon src={IconCheckmarkCircle} color="success" />
+      </div>
+    {:else if visibleActions.length}
+      <div class="node-actions" class:node-actions--opened={actionsOpened}>
+        <Popover position="bottom-start" fixedPosition on={{ opened: handleActionsOpened, closed: handleActionsClosed }}>
+          {#snippet trigger()}
+            <div class="node-actions__trigger">
+              <Icon src={IconMoreVertical} />
+            </div>
+          {/snippet}
+
+          {#each visibleActions as action (action)}
+            <PopoverItem on={{ click: () => action.action(node) }}>
+              <IconText icon={action.icon} size="sm">{action.name}</IconText>
+            </PopoverItem>
+          {/each}
+        </Popover>
+      </div>
+    {/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} nav={nav} level={level + 1} hideExpandIcon={hideChildExpandIcon} showSelectedCheckmark={showSelectedCheckmark} />
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>.tree-node {
+  --_tree-node--icon-size: var(--sc-kit--tree-node--icon--size, 1.25rem);
+  --_tree-node--font-size: var(--sc-kit--tree-node--font-size, var(--sc-kit--font-size--sm));
+  --_tree-node--padding-inline: var(--sc-kit--tree-node--padding-inline, 0.5rem);
+  --_tree-node--padding-block: var(--sc-kit--tree-node--padding-block, 0.375rem);
+  --_tree-node--indent: var(--sc-kit--tree-node--indent, 1rem);
+  --_tree-node--action-opacity: 0;
+  position: relative;
+  width: 100%;
+  color: var(--sc-kit--color--text--primary);
+}
+.tree-node__leaf {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 1px;
+  padding: 0 var(--_tree-node--padding-inline) 0 calc(var(--_tree-node--padding-inline) + var(--_tree-node--level, 0) * var(--_tree-node--indent));
+  border-radius: var(--sc-kit--radius--sm);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.tree-node__leaf:hover {
+  --_tree-node--action-opacity: 1;
+  color: var(--sc-kit--color--text--primary);
+  background: var(--sc-kit--color--bg--hover);
+}
+.tree-node__leaf--active {
+  --_tree-node--action-opacity: 1;
+  color: var(--sc-kit--color--text--primary);
+  background: var(--sc-kit--color--bg--active);
+}
+.tree-node__leaf--focused {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: -2px;
+}
+.tree-node__leaf--draggable {
+  cursor: default;
+}
+.tree-node__leaf--draggable:active {
+  cursor: grabbing;
+}
+.tree-node__leaf--drag-over {
+  background: var(--sc-kit--color--bg--menu-active);
+  outline: 1px solid var(--sc-kit--color--accent);
+}
+.tree-node__children {
+  width: 100%;
+}
+.tree-node__expand-button {
+  display: flex;
+  align-items: center;
+  margin-right: var(--sc-kit--space--1);
+  padding: var(--_tree-node--padding-block) 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.tree-node__expand-button--hidden {
+  visibility: hidden;
+}
+.tree-node__expand-icon {
+  --sc-kit--icon--size: 0.875rem;
+  display: inline-flex;
+  color: var(--sc-kit--color--text--muted);
+  transition: transform var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.tree-node__expand-icon--expanded {
+  transform: rotate(90deg);
+}
+.tree-node__anchor {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--sc-kit--space--2);
+  min-width: 0;
+  padding: var(--_tree-node--padding-block) 0;
+}
+.tree-node__icon {
+  --sc-kit--icon--size: var(--_tree-node--icon-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--_tree-node--icon-size);
+  height: var(--_tree-node--icon-size);
+  color: var(--sc-kit--color--text--muted);
+}
+.tree-node__text {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--_tree-node--font-size);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.tree-node__text--active {
+  font-weight: var(--sc-kit--font-weight--semibold);
+}
+.tree-node__count {
+  flex-shrink: 0;
+  font-size: var(--sc-kit--font-size--xs);
+  color: var(--sc-kit--color--accent);
+}
+
+.node-actions {
+  position: absolute;
+  top: 50%;
+  right: var(--sc-kit--space--2);
+  display: flex;
+  transform: translateY(-50%);
+  opacity: var(--_tree-node--action-opacity);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.node-actions--opened {
+  opacity: 1;
+}
+.node-actions__trigger {
+  --sc-kit--icon--size: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--sc-kit--radius--sm);
+  color: var(--sc-kit--color--text--secondary);
+}
+.node-actions__trigger:hover {
+  background: var(--sc-kit--color--bg--active);
+  color: var(--sc-kit--color--text--primary);
+}
+@media (any-hover: none) {
+  .node-actions {
+    opacity: 1;
+  }
+}</style>

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

@@ -0,0 +1,12 @@
+import type { TreeNavigation } from './tree-navigation.svelte';
+import { type TreeNode } from './tree-node.svelte';
+type Props = {
+    node: TreeNode;
+    nav: TreeNavigation;
+    hideExpandIcon?: boolean;
+    level?: number;
+    showSelectedCheckmark?: boolean;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,65 @@
+<script lang="ts">import NodeView from './cmp.tree-node-view.svelte';
+import { TreeNavigation } from './tree-navigation.svelte';
+let { nodes, showSelectedCheckmark, children } = $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 handleKeydown = (e) => {
+    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();
+};
+</script>
+
+<div class="tree">
+  {@render children?.()}
+  <div
+    class="tree__nodes"
+    role="tree"
+    tabindex="0"
+    aria-activedescendant={nav.activeId ? `tree-item-${nav.activeId}` : undefined}
+    onfocusin={() => nav.focus()}
+    onfocusout={(e) => {
+      if (!(e.relatedTarget instanceof Node) || !e.currentTarget.contains(e.relatedTarget)) {
+        nav.blur();
+      }
+    }}
+    onkeydown={handleKeydown}>
+    {#each nodesComputed as node (node.id)}
+      <NodeView node={node} nav={nav} hideExpandIcon={hideExpandIcon} showSelectedCheckmark={showSelectedCheckmark} />
+    {/each}
+  </div>
+</div>
+
+<!--
+@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`.
+
+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.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--tree-node--icon--size` | Node icon box | `20px` |
+| `--sc-kit--tree-node--font-size` | Node label font size | `--sc-kit--font-size--sm` |
+| `--sc-kit--tree-node--padding-inline` | Row inline padding | `8px` |
+| `--sc-kit--tree-node--padding-block` | Row vertical padding | `6px` |
+| `--sc-kit--tree-node--indent` | Per-level indent | `16px` |
+-->
+<style>.tree {
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.tree :global([contenteditable]) {
+  user-select: text;
+}
+.tree__nodes:focus-visible {
+  outline: none;
+}</style>

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

@@ -0,0 +1,32 @@
+import type { TreeNode } from './tree-node.svelte';
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Root node, or array of root nodes. */
+    nodes: TreeNode | TreeNode[];
+    /** 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;
+};
+/**
+ * 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`.
+ *
+ * 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.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--tree-node--icon--size` | Node icon box | `20px` |
+ * | `--sc-kit--tree-node--font-size` | Node label font size | `--sc-kit--font-size--sm` |
+ * | `--sc-kit--tree-node--padding-inline` | Row inline padding | `8px` |
+ * | `--sc-kit--tree-node--padding-block` | Row vertical padding | `6px` |
+ * | `--sc-kit--tree-node--indent` | Per-level indent | `16px` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,4 @@
+export { default as Tree } from './cmp.tree.svelte';
+export { TreeNode, 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/index.js

@@ -0,0 +1,2 @@
+export { default as Tree } from './cmp.tree.svelte';
+export { TreeNode } from './tree-node.svelte';

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

@@ -0,0 +1,14 @@
+import type { TreeNode } from './tree-node.svelte';
+export declare class TreeNavigation {
+    activeId: string | null;
+    hasFocus: 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

@@ -0,0 +1,99 @@
+export class TreeNavigation {
+    activeId = $state(null);
+    hasFocus = $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;
+        }
+        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;
+    }
+}

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

@@ -0,0 +1,8 @@
+import type { IconProp } from '../icon';
+import type { TreeNode } from './tree-node.svelte';
+export type TreeNodeAction = {
+    name: string;
+    icon?: IconProp;
+    action: (node: TreeNode) => void;
+    visible?: (node: TreeNode) => boolean;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,16 @@
+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

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