@streamscloud/kit 0.68.1 → 0.70.0

package/dist/ui/drag-and-drop/cmp.drag-source.svelte

@@ -1,11 +1,21 @@
 <script lang="ts" generics="T">import { DragAndDrop } from './drag-and-drop.svelte';
+import { onDestroy } from 'svelte';
 const { dragEventModel, children } = $props();
+let startedEvent = null;
 const onDragStart = () => {
-    DragAndDrop.event = dragEventModel;
+    startedEvent = dragEventModel;
+    DragAndDrop.event = startedEvent;
 };
 const onDragEnd = () => {
+    startedEvent = null;
     DragAndDrop.event = null;
 };
+// A source detached mid-drag never receives `dragend`, which would leave the store set forever.
+onDestroy(() => {
+    if (startedEvent && DragAndDrop.event === startedEvent) {
+        DragAndDrop.event = null;
+    }
+});
 </script>
 
 <div class="drag-source" draggable="true" ondragstart={onDragStart} ondragend={onDragEnd} role="none">
@@ -16,7 +26,7 @@ const onDragEnd = () => {
 @component
 Wraps arbitrary content and makes it the source of a kit drag-and-drop session. On `dragstart`
 the supplied `dragEventModel` is written to the `DragAndDrop` singleton store; on `dragend`
-it's cleared. Pair with one or more `DropZone`s elsewhere in the tree — zones whose
+it's cleared (also when the source unmounts mid-drag). Pair with one or more `DropZone`s elsewhere in the tree — zones whose
 `acceptedEvents` includes the model's `type` will activate while the drag is in progress.
 
 The wrapper takes 100% × 100% of its slot with `cursor: grab` so it overlays the host's

package/dist/ui/drag-and-drop/cmp.drag-source.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { DragEventModel } from './types';
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 declare function $$render<T>(): {
     props: {
         /** Payload to write into the shared `DragAndDrop` store on `dragstart`. */
@@ -28,7 +28,7 @@ interface $$IsomorphicComponent {
 /**
  * Wraps arbitrary content and makes it the source of a kit drag-and-drop session. On `dragstart`
  * the supplied `dragEventModel` is written to the `DragAndDrop` singleton store; on `dragend`
- * it's cleared. Pair with one or more `DropZone`s elsewhere in the tree — zones whose
+ * it's cleared (also when the source unmounts mid-drag). Pair with one or more `DropZone`s elsewhere in the tree — zones whose
  * `acceptedEvents` includes the model's `type` will activate while the drag is in progress.
  *
  * The wrapper takes 100% × 100% of its slot with `cursor: grab` so it overlays the host's

package/dist/ui/page-layout/cmp.page-layout.svelte

@@ -3,11 +3,11 @@ import { PageLayoutLocalization } from './page-layout-localization';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
 import IconWindow from '@fluentui/svg-icons/icons/window_20_regular.svg?raw';
 import IconWindowMultiple from '@fluentui/svg-icons/icons/window_multiple_20_regular.svg?raw';
-const { children, title, actions, navigationToggle, editorControls, scrollable = false } = $props();
+const { children, title, actions, navigationToggle, editorControls, scrollable = false, inert = false } = $props();
 const localization = new PageLayoutLocalization();
 </script>
 
-<div class="page-layout" class:page-layout--scrollable={scrollable}>
+<div class="page-layout" class:page-layout--scrollable={scrollable} inert={inert}>
   <div class="page-layout__header">
     <div class="page-layout__title">
       {#if typeof title === 'function'}

package/dist/ui/page-layout/cmp.page-layout.svelte.d.ts

@@ -9,6 +9,8 @@ type Props = {
     /** Editor chrome — the fixed panels-toggle + close pair. Set it to render both buttons; omit it entirely for a non-editor page. */
     editorControls?: EditorControls;
     scrollable?: boolean;
+    /** Sets `inert` on the whole layout — header and body stop taking focus, clicks and assistive-tech interaction. */
+    inert?: boolean;
 };
 /**
  * PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + an optional

package/dist/ui/table/cmp.table-draggable.svelte

@@ -19,7 +19,7 @@ const handleConsider = (e) => {
     dndItems = e.detail.items;
 };
 const handleFinalize = (e) => {
-    model.reorderItems(e.detail.items);
+    model.items = e.detail.items;
     on?.itemsReordered?.(e.detail.items);
     dndItems = null;
 };

package/dist/ui/table/table-cells/table-cell.svelte

@@ -24,7 +24,7 @@ const changeItemPosition = (target, positionChange) => {
     const newItems = [...model.items];
     newItems.splice(index, 1);
     newItems.splice(newIndex, 0, target);
-    model.reorderItems(newItems);
+    model.items = newItems;
     on?.itemsReordered?.(newItems);
 };
 </script>

package/dist/ui/table/table-model.svelte.d.ts

@@ -18,7 +18,6 @@ export declare class TableModel<T extends WithId> {
     private _itemGroupActions;
     private _styles;
     private _selection;
-    private _preserveSelection;
     private _dataProvider;
     private _highlightedItemIds;
     constructor(init: TableModelInit<T>);
@@ -29,14 +28,14 @@ export declare class TableModel<T extends WithId> {
     get styles(): Readonly<TableStyles>;
     get selection(): Repository<T>;
     get highlightedItemIds(): string[];
+    /** Keeps the selection a subset of `value`: selected ids pick up their new objects, ids no longer present are deselected. Reset it with `selection.clear()`. */
     set items(value: T[]);
     set itemActions(value: TableItemAction<T>[]);
     set columns(value: IAnyTableColumn<T>[]);
     set highlightedItemIds(value: string[]);
-    /** Reassign items as a pure reorder of the same set — preserves the current selection (unlike the `items` setter). */
-    reorderItems: (value: T[]) => void;
     updateStyles: (styles: Partial<TableStyles>) => void;
     setResolvedColumns: (columns: ResolvedColumn<T>[]) => void;
+    private reconcileSelection;
     private reconcileColumns;
     private mapColumn;
 }

package/dist/ui/table/table-model.svelte.js

@@ -12,13 +12,11 @@ export class TableModel {
     _itemGroupActions = $state.raw([]);
     _styles = $state({ stickyHeader: true });
     _selection;
-    _preserveSelection = false;
     _dataProvider;
     _highlightedItemIds = $state.raw([]);
     constructor(init) {
         this._init = init;
         this._selection = init.selectionSettings?.repository ?? createRepository();
-        this._preserveSelection = init.selectionSettings?.preserveSelection || false;
         this._dataProvider = createRepository();
         this._itemActions = init.itemActions || [];
         this._itemGroupActions = init.itemGroupActions || [];
@@ -65,12 +63,11 @@ export class TableModel {
     get highlightedItemIds() {
         return this._highlightedItemIds;
     }
+    /** Keeps the selection a subset of `value`: selected ids pick up their new objects, ids no longer present are deselected. Reset it with `selection.clear()`. */
     set items(value) {
         this._items = value;
         this._dataProvider.set(...value);
-        if (!this._preserveSelection) {
-            this._selection.clear();
-        }
+        untrack(() => this.reconcileSelection(value));
     }
     set itemActions(value) {
         this._itemActions = value;
@@ -81,17 +78,27 @@ export class TableModel {
     set highlightedItemIds(value) {
         this._highlightedItemIds = value;
     }
-    /** Reassign items as a pure reorder of the same set — preserves the current selection (unlike the `items` setter). */
-    reorderItems = (value) => {
-        this._items = value;
-        this._dataProvider.set(...value);
-    };
     updateStyles = (styles) => {
         Object.assign(this._styles, styles);
     };
     setResolvedColumns = (columns) => {
         this._columns = columns;
     };
+    reconcileSelection = (items) => {
+        const selected = this._selection.items;
+        if (!selected.length) {
+            return;
+        }
+        const itemsById = new Map(items.map((item) => [item.id, item]));
+        const gone = selected.filter((item) => !itemsById.has(item.id));
+        if (gone.length) {
+            this._selection.remove(...gone);
+        }
+        const kept = selected.filter((item) => itemsById.has(item.id));
+        if (kept.some((item) => itemsById.get(item.id) !== item)) {
+            this._selection.set(...kept.map((item) => itemsById.get(item.id) ?? item));
+        }
+    };
     reconcileColumns = (newDefs) => {
         // Save state from current columns
         const stateMap = new Map();

package/dist/ui/table/types.d.ts

@@ -135,7 +135,6 @@ export type PageQuery<TOrder> = {
     perPage: number;
 };
 export type SelectionSettings<T extends WithId> = {
-    preserveSelection?: boolean;
     repository?: Repository<T>;
 };
 export type TableColumnSortDirection = 'none' | 'asc' | 'desc';

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

@@ -12,7 +12,7 @@ import {} from './tree-node.svelte';
 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 { onDestroy, untrack } from 'svelte';
 import { slide } from 'svelte/transition';
 let { node, keyboard, checked, posInSet, setSize, hideExpandIcon = false, level = 0 } = $props();
 const localization = new TreeLocalization();
@@ -22,6 +22,7 @@ let renameDraft = $state('');
 let hoveredNode = null;
 let leafElement = $state();
 let dbClickTimeout = undefined;
+let startedDrag = null;
 const children = $derived(node.children);
 const visibleActions = $derived(node.actions.filter((a) => !a.visible || a.visible(node)));
 const actionsShown = $derived(!node.renaming && visibleActions.length > 0);
@@ -63,15 +64,23 @@ const handleDragStart = (e) => {
         return;
     }
     e.stopPropagation();
-    DragAndDrop.event = node.drag;
+    startedDrag = node.drag;
+    DragAndDrop.event = startedDrag;
     if (e.dataTransfer) {
         e.dataTransfer.effectAllowed = 'move';
         e.dataTransfer.setData('application/x-sc-tree-node', node.id);
     }
 };
 const handleDragEnd = () => {
+    startedDrag = null;
     DragAndDrop.event = null;
 };
+// A row detached mid-drag never receives `dragend`, which would leave the store set forever.
+onDestroy(() => {
+    if (startedDrag && DragAndDrop.event === startedDrag) {
+        DragAndDrop.event = null;
+    }
+});
 const handleDragEnter = () => {
     if (acceptsCurrentDrag && leafElement) {
         TreeDropTarget.claim(node, leafElement);

package/package.json

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