@streamscloud/kit 0.9.12 → 0.9.14

package/dist/core/data-loaders/cursor-data-loader-with-search.svelte.d.ts

@@ -5,7 +5,8 @@ export declare class CursorDataLoaderWithSearch<T> implements IDataLoader<T> {
     private continuationToken;
     private _searchString;
     private loadPage;
-    private deferred;
+    private pending;
+    private generation;
     private searchStringMinLength;
     constructor(init: {
         loadPage: (continuationToken: ContinuationToken, searchString: string) => Promise<CursorResult<T> | null>;
@@ -15,5 +16,6 @@ export declare class CursorDataLoaderWithSearch<T> implements IDataLoader<T> {
     loadMore: () => Promise<T[]>;
     reset(): Promise<void>;
     updateSearchString: (searchString: string | null) => void;
+    private runLoad;
     private isSearchStringEffective;
 }

package/dist/core/data-loaders/cursor-data-loader-with-search.svelte.js

@@ -1,11 +1,12 @@
-import { ContinuationToken, Deferred } from '..';
+import { ContinuationToken } from '..';
 import { Utils } from '../utils';
 export class CursorDataLoaderWithSearch {
     items = $state.raw([]);
     continuationToken = $state.raw(ContinuationToken.init());
     _searchString = $state.raw('');
     loadPage;
-    deferred = null;
+    pending = null;
+    generation = 0;
     searchStringMinLength = 1;
     constructor(init) {
         this.loadPage = init.loadPage;
@@ -18,25 +19,27 @@ export class CursorDataLoaderWithSearch {
         return this._searchString;
     }
     loadMore = async () => {
-        if (this.deferred) {
-            return this.deferred.promise;
+        if (this.pending) {
+            return this.pending;
         }
         if (!this.continuationToken.canLoadMore) {
             return [];
         }
-        this.deferred = new Deferred();
-        const search = this.isSearchStringEffective(this._searchString) ? this._searchString : '';
-        let result = await this.loadPage(this.continuationToken, search);
-        if (!result) {
-            result = { items: [], continuationToken: ContinuationToken.preventLoading() };
-        }
-        this.continuationToken = result.continuationToken;
-        this.items = [...this.items, ...result.items];
-        this.deferred.resolve(result.items);
-        this.deferred = null;
-        return result.items;
+        const pending = this.runLoad();
+        this.pending = pending;
+        try {
+            return await pending;
+        }
+        finally {
+            // a concurrent reset() may have installed a newer load — leave that one alone
+            if (this.pending === pending) {
+                this.pending = null;
+            }
+        }
     };
     async reset() {
+        this.generation++;
+        this.pending = null;
         this.items = [];
         this.continuationToken = ContinuationToken.init();
         await this.loadMore();
@@ -50,7 +53,25 @@ export class CursorDataLoaderWithSearch {
         const isEffective = this.isSearchStringEffective(newValue);
         this._searchString = newValue;
         if (wasEffective || isEffective) {
-            this.reset();
+            void this.reset();
+        }
+    };
+    runLoad = async () => {
+        const generation = this.generation;
+        const search = this.isSearchStringEffective(this._searchString) ? this._searchString : '';
+        try {
+            const result = (await this.loadPage(this.continuationToken, search)) ?? { items: [], continuationToken: ContinuationToken.preventLoading() };
+            // a reset() mid-load bumps the generation — drop the stale page instead of appending it to the cleared list
+            if (generation !== this.generation) {
+                return [];
+            }
+            this.continuationToken = result.continuationToken;
+            this.items = [...this.items, ...result.items];
+            return result.items;
+        }
+        catch (error) {
+            console.error('CursorDataLoaderWithSearch: failed to load page', error);
+            return [];
         }
     };
     isSearchStringEffective = (searchString) => searchString && searchString.length >= this.searchStringMinLength;

package/dist/core/data-loaders/cursor-data-loader.svelte.d.ts

@@ -4,10 +4,12 @@ export declare class CursorDataLoader<T> implements IDataLoader<T> {
     items: T[];
     continuationToken: ContinuationToken;
     private loadPage;
-    private deferred;
+    private pending;
+    private generation;
     constructor(init: {
         loadPage: (continuationToken: ContinuationToken) => Promise<CursorResult<T> | null>;
     });
     loadMore: () => Promise<T[]>;
     reset(): Promise<void>;
+    private runLoad;
 }

package/dist/core/data-loaders/cursor-data-loader.svelte.js

@@ -1,33 +1,54 @@
-import { ContinuationToken, Deferred } from '..';
+import { ContinuationToken } from '..';
 export class CursorDataLoader {
     items = $state.raw([]);
     continuationToken = $state.raw(ContinuationToken.init());
     loadPage;
-    deferred = null;
+    pending = null;
+    generation = 0;
     constructor(init) {
         this.loadPage = init.loadPage;
     }
     loadMore = async () => {
-        if (this.deferred) {
-            return this.deferred.promise;
+        if (this.pending) {
+            return this.pending;
         }
         if (!this.continuationToken.canLoadMore) {
             return [];
         }
-        this.deferred = new Deferred();
-        let result = await this.loadPage(this.continuationToken);
-        if (!result) {
-            result = { items: [], continuationToken: ContinuationToken.preventLoading() };
+        const pending = this.runLoad();
+        this.pending = pending;
+        try {
+            return await pending;
+        }
+        finally {
+            // a concurrent reset() may have installed a newer load — leave that one alone
+            if (this.pending === pending) {
+                this.pending = null;
+            }
         }
-        this.continuationToken = result.continuationToken;
-        this.items = [...this.items, ...result.items];
-        this.deferred.resolve(result.items);
-        this.deferred = null;
-        return result.items;
     };
     async reset() {
+        this.generation++;
+        this.pending = null;
         this.items = [];
         this.continuationToken = ContinuationToken.init();
         await this.loadMore();
     }
+    runLoad = async () => {
+        const generation = this.generation;
+        try {
+            const result = (await this.loadPage(this.continuationToken)) ?? { items: [], continuationToken: ContinuationToken.preventLoading() };
+            // a reset() mid-load bumps the generation — drop the stale page instead of appending it to the cleared list
+            if (generation !== this.generation) {
+                return [];
+            }
+            this.continuationToken = result.continuationToken;
+            this.items = [...this.items, ...result.items];
+            return result.items;
+        }
+        catch (error) {
+            console.error('CursorDataLoader: failed to load page', error);
+            return [];
+        }
+    };
 }

package/dist/core/files/file-types.d.ts

@@ -13,4 +13,8 @@ export declare class AcceptFileType {
     static readonly webAssetImageOrVideo: string;
     static readonly webAssetIcon = "image/png";
 }
+/**
+ * `accept`-style matcher. Tokens may be MIMEs (`image/*`, `*\/*`, `application/pdf`) or
+ * extensions (`.pdf`), case-insensitive. Empty accept = match anything.
+ */
 export declare const matchesAcceptedFileTypes: (file: File, acceptedTypesAndExtensions: string) => boolean;

package/dist/core/files/file-types.js

@@ -1,4 +1,3 @@
-import { FileHelper } from './file-helper';
 export class AcceptFileType {
     static any = '*/*';
     static image = 'image/png,image/jpeg,image/webp';
@@ -15,14 +14,30 @@ export class AcceptFileType {
     static webAssetImageOrVideo = [this.webAssetImage, this.webAssetVideo].join(',');
     static webAssetIcon = 'image/png';
 }
+/**
+ * `accept`-style matcher. Tokens may be MIMEs (`image/*`, `*\/*`, `application/pdf`) or
+ * extensions (`.pdf`), case-insensitive. Empty accept = match anything.
+ */
 export const matchesAcceptedFileTypes = (file, acceptedTypesAndExtensions) => {
-    const isValid = AcceptFileType.anySupported.split(',').includes(file.type);
-    if (acceptedTypesAndExtensions) {
-        const acceptanceArray = acceptedTypesAndExtensions.split(',');
-        const extensions = acceptanceArray.filter((x) => x.startsWith('.'));
-        const fileExt = '.' + FileHelper.getFileExtension(file.name);
-        const fileTypes = acceptanceArray.filter((x) => !x.startsWith('.'));
-        return (extensions.includes(fileExt) || fileTypes.includes(file.type)) && isValid;
+    const tokens = acceptedTypesAndExtensions
+        .split(',')
+        .map((s) => s.trim().toLowerCase())
+        .filter(Boolean);
+    if (tokens.length === 0) {
+        return true;
     }
-    return isValid;
+    const fileType = (file.type || '').toLowerCase();
+    const fileName = file.name.toLowerCase();
+    return tokens.some((token) => {
+        if (token.startsWith('.')) {
+            return fileName.endsWith(token);
+        }
+        if (token === '*/*') {
+            return true;
+        }
+        if (token.endsWith('/*')) {
+            return fileType.startsWith(token.slice(0, -1));
+        }
+        return fileType === token;
+    });
 };

package/dist/core/files/file-validation-rules.js

@@ -1,32 +1,4 @@
-/**
- * Permissive `accept`-style matcher. Tokens may be MIMEs (`image/*`, `application/pdf`) or
- * extensions (`.pdf`). Empty accept = match anything. Unlike `matchesAcceptedFileTypes` from
- * `./file-types`, this does NOT cross-check against an internal whitelist — only the
- * consumer's accept string drives the decision.
- */
-const matchesAccept = (file, accept) => {
-    if (!accept) {
-        return true;
-    }
-    const tokens = accept
-        .split(',')
-        .map((s) => s.trim().toLowerCase())
-        .filter(Boolean);
-    if (tokens.length === 0) {
-        return true;
-    }
-    const fileType = (file.type || '').toLowerCase();
-    const fileName = file.name.toLowerCase();
-    return tokens.some((t) => {
-        if (t.startsWith('.')) {
-            return fileName.endsWith(t);
-        }
-        if (t.endsWith('/*')) {
-            return fileType.startsWith(t.slice(0, -1));
-        }
-        return fileType === t;
-    });
-};
+import { matchesAcceptedFileTypes } from './file-types';
 const readImageDimensions = (file) => new Promise((resolve, reject) => {
     const url = URL.createObjectURL(file);
     const img = new Image();
@@ -72,7 +44,7 @@ const readMediaDuration = (file, kind) => new Promise((resolve, reject) => {
 export const FileRules = {
     MaxSize: (bytes, message) => (file) => file.size > bytes ? message : null,
     Mime: (accept, message) => {
-        const rule = (file) => (matchesAccept(file, accept) ? null : message);
+        const rule = (file) => (matchesAcceptedFileTypes(file, accept) ? null : message);
         rule.accept = accept;
         return rule;
     },

package/dist/core/utils/number-helper.js

@@ -9,7 +9,7 @@ export class NumberHelper {
         const isNegative = n < 0;
         let modulo = isNegative ? 0 - n : n;
         const output = [];
-        for (; modulo >= 1000; modulo = Math.floor(n / 1000)) {
+        for (; modulo >= 1000; modulo = Math.floor(modulo / 1000)) {
             output.unshift(String(modulo % 1000).padStart(3, '0'));
         }
         output.unshift(modulo);

package/dist/ui/collection-list/cmp.collection-list.svelte

@@ -0,0 +1,242 @@
+<script lang="ts" generics="T">import { Icon, IconSlot } from '../icon';
+import { CollectionListLocalization } from './collection-list-localization';
+import IconReorderDotsVertical from '@fluentui/svg-icons/icons/re_order_dots_vertical_20_regular.svg?raw';
+import { flip } from 'svelte/animate';
+import { dndzone } from 'svelte-dnd-action';
+let { items, actions = [], orderable = true, showImage = true, actionsAlwaysVisible = false, view, on } = $props();
+const localization = new CollectionListLocalization();
+// unique per instance so two lists on one screen can't drag items between each other
+const dndType = `collection-list-${crypto.randomUUID()}`;
+const flipDurationMs = 200;
+let dndItems = $state.raw([]);
+$effect(() => {
+    dndItems = items ?? [];
+});
+const dragDisabled = $derived(!orderable || dndItems.length < 2);
+const handleConsider = (e) => {
+    dndItems = e.detail.items;
+};
+const handleFinalize = (e) => {
+    const reordered = e.detail.items;
+    dndItems = reordered;
+    const newIndex = reordered.findIndex((i) => i.id === e.detail.info.id);
+    on?.reorder?.(reordered.map((i) => i.originalItem), newIndex);
+};
+// strip the library's default yellow outline on the cloned drag element
+const cleanDraggedElement = (element) => {
+    if (element) {
+        element.style.outline = 'none';
+    }
+};
+const visibleActions = (item, index) => actions.filter((a) => !a.hidden || !a.hidden(item.originalItem, index));
+</script>
+
+{#snippet builtinBody(item: CollectionItem<T>)}
+  {#if showImage}
+    <span class="collection-list__thumbnail">
+      {#if item.image}
+        <img class="collection-list__thumbnail-image" src={item.image} alt="" draggable="false" />
+      {/if}
+    </span>
+  {/if}
+  {#if item.icon}
+    <span class="collection-list__icon"><IconSlot icon={item.icon} /></span>
+  {/if}
+  {#if item.description}
+    <span class="collection-list__description" title={item.description}>{item.description}</span>
+  {/if}
+{/snippet}
+
+<div
+  class="collection-list"
+  use:dndzone={{
+    items: dndItems,
+    type: dndType,
+    flipDurationMs,
+    dropTargetStyle: {},
+    morphDisabled: true,
+    dragDisabled,
+    transformDraggedElement: cleanDraggedElement
+  }}
+  onconsider={handleConsider}
+  onfinalize={handleFinalize}>
+  {#each dndItems as item, index (item.id)}
+    {@const rowActions = visibleActions(item, index)}
+    <div class="collection-list__row" class:collection-list__row--actions-always={actionsAlwaysVisible} animate:flip={{ duration: flipDurationMs }}>
+      {#if !dragDisabled}
+        <span class="collection-list__handle" role="img" aria-label={localization.reorderHandle}>
+          <Icon src={IconReorderDotsVertical} />
+        </span>
+      {/if}
+
+      {#if view}
+        <div class="collection-list__body">{@render view({ item: item.originalItem, index })}</div>
+      {:else if item.imageClickCallback}
+        <button type="button" class="collection-list__body collection-list__body--clickable" onclick={() => item.imageClickCallback?.(item.originalItem)}>
+          {@render builtinBody(item)}
+        </button>
+      {:else}
+        <div class="collection-list__body">{@render builtinBody(item)}</div>
+      {/if}
+
+      {#if rowActions.length > 0}
+        <div class="collection-list__actions">
+          {#each rowActions as action (action)}
+            <button
+              type="button"
+              class="collection-list__action"
+              aria-label={action.label ?? localization.action}
+              onclick={() => action.callback(item.originalItem, index)}>
+              <IconSlot icon={action.icon} />
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<!--
+@component
+A reorderable vertical list of items: each row is an optional drag handle, an optional square
+thumbnail + description (or a fully custom `view`), and hover-revealed icon actions. Generic over
+the item payload `T`; the consumer maps its data into `CollectionItem<T>` and reads `on.reorder`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--collection-list--gap` | Gap between rows | `var(--sc-kit--space--2)` |
+| `--sc-kit--collection-list--row--gap` | Gap between a row's handle / body / actions | `var(--sc-kit--space--3)` |
+| `--sc-kit--collection-list--thumbnail--size` | Thumbnail inline size | `3.125rem` |
+| `--sc-kit--collection-list--thumbnail--aspect-ratio` | Thumbnail aspect ratio | `1` |
+| `--sc-kit--collection-list--thumbnail--radius` | Thumbnail corner radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--collection-list--thumbnail--background` | Thumbnail placeholder background | `var(--sc-kit--color--bg--element)` |
+| `--sc-kit--collection-list--description--color` | Description / leading-icon color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--collection-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--secondary)` |
+| `--sc-kit--collection-list--action--color` | Action icon color | `var(--sc-kit--color--text--secondary)` |
+| `--sc-kit--collection-list--action--background` | Action button background | `transparent` |
+| `--sc-kit--collection-list--action--background--hover` | Action button hover background | `var(--sc-kit--color--bg--hover)` |
+-->
+
+<style>.collection-list {
+  --_cl--gap: var(--sc-kit--collection-list--gap, var(--sc-kit--space--2));
+  display: flex;
+  flex-direction: column;
+  gap: var(--_cl--gap);
+}
+.collection-list__row {
+  --_cl--row-gap: var(--sc-kit--collection-list--row--gap, var(--sc-kit--space--3));
+  --_cl--thumbnail-size: var(--sc-kit--collection-list--thumbnail--size, 3.125rem);
+  --_cl--thumbnail-aspect-ratio: var(--sc-kit--collection-list--thumbnail--aspect-ratio, 1);
+  --_cl--thumbnail-radius: var(--sc-kit--collection-list--thumbnail--radius, var(--sc-kit--radius--sm));
+  --_cl--thumbnail-background: var(--sc-kit--collection-list--thumbnail--background, var(--sc-kit--color--bg--element));
+  --_cl--description-color: var(--sc-kit--collection-list--description--color, var(--sc-kit--color--text--primary));
+  --_cl--handle-color: var(--sc-kit--collection-list--handle--color, var(--sc-kit--color--text--secondary));
+  --_cl--action-color: var(--sc-kit--collection-list--action--color, var(--sc-kit--color--text--secondary));
+  --_cl--action-background: var(--sc-kit--collection-list--action--background, transparent);
+  --_cl--action-background-hover: var(--sc-kit--collection-list--action--background--hover, var(--sc-kit--color--bg--hover));
+  --_cl--actions-opacity: 0;
+  --_cl--actions-pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: var(--_cl--row-gap);
+  min-width: 0;
+}
+.collection-list__row:hover, .collection-list__row:focus-within {
+  --_cl--actions-opacity: 1;
+  --_cl--actions-pointer-events: auto;
+}
+.collection-list__row--actions-always {
+  --_cl--actions-opacity: 1;
+  --_cl--actions-pointer-events: auto;
+}
+.collection-list__handle {
+  --sc-kit--icon--size: 1.25rem;
+  --sc-kit--icon--color: var(--_cl--handle-color);
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  cursor: grab;
+}
+.collection-list__handle:active {
+  cursor: grabbing;
+}
+.collection-list__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--_cl--row-gap);
+}
+.collection-list__body--clickable {
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.collection-list__thumbnail {
+  flex: none;
+  position: relative;
+  inline-size: var(--_cl--thumbnail-size);
+  aspect-ratio: var(--_cl--thumbnail-aspect-ratio);
+  border-radius: var(--_cl--thumbnail-radius);
+  background: var(--_cl--thumbnail-background);
+  overflow: hidden;
+}
+.collection-list__thumbnail-image {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+.collection-list__icon {
+  --sc-kit--icon--size: 1rem;
+  --sc-kit--icon--color: var(--_cl--description-color);
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+}
+.collection-list__description {
+  flex: 1;
+  min-width: 0;
+  color: var(--_cl--description-color);
+  font-size: var(--sc-kit--font-size--md);
+  line-height: var(--sc-kit--line-height--md);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.collection-list__actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--sc-kit--space--1);
+  margin-inline-start: auto;
+  opacity: var(--_cl--actions-opacity);
+  pointer-events: var(--_cl--actions-pointer-events);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.collection-list__action {
+  --sc-kit--icon--size: 1.25rem;
+  --sc-kit--icon--color: var(--_cl--action-color);
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  border: none;
+  border-radius: var(--sc-kit--radius--sm);
+  background: var(--_cl--action-background);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.collection-list__action:hover {
+  background: var(--_cl--action-background-hover);
+}</style>

package/dist/ui/collection-list/cmp.collection-list.svelte.d.ts

@@ -0,0 +1,64 @@
+import type { CollectionAction, CollectionItem } from './types';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        items: CollectionItem<T>[] | null;
+        /** Per-row icon buttons, revealed on row hover (or pinned via `actionsAlwaysVisible`). */
+        actions?: CollectionAction<T>[];
+        /** Enables drag reorder. Auto-disabled when fewer than 2 items. @default true */
+        orderable?: boolean;
+        /** Render the leading square thumbnail in the built-in row. Ignored when `view` is set. @default true */
+        showImage?: boolean;
+        /** Pin row actions visible instead of revealing them on hover/focus. @default false */
+        actionsAlwaysVisible?: boolean;
+        /** Replaces the built-in row body (thumbnail + description); the drag handle and actions still render around it. */
+        view?: Snippet<[{
+            item: T;
+            index: number;
+        }]>;
+        on?: {
+            reorder?: (items: T[], newIndex: number) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A reorderable vertical list of items: each row is an optional drag handle, an optional square
+ * thumbnail + description (or a fully custom `view`), and hover-revealed icon actions. Generic over
+ * the item payload `T`; the consumer maps its data into `CollectionItem<T>` and reads `on.reorder`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--collection-list--gap` | Gap between rows | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--collection-list--row--gap` | Gap between a row's handle / body / actions | `var(--sc-kit--space--3)` |
+ * | `--sc-kit--collection-list--thumbnail--size` | Thumbnail inline size | `3.125rem` |
+ * | `--sc-kit--collection-list--thumbnail--aspect-ratio` | Thumbnail aspect ratio | `1` |
+ * | `--sc-kit--collection-list--thumbnail--radius` | Thumbnail corner radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--collection-list--thumbnail--background` | Thumbnail placeholder background | `var(--sc-kit--color--bg--element)` |
+ * | `--sc-kit--collection-list--description--color` | Description / leading-icon color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--collection-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--secondary)` |
+ * | `--sc-kit--collection-list--action--color` | Action icon color | `var(--sc-kit--color--text--secondary)` |
+ * | `--sc-kit--collection-list--action--background` | Action button background | `transparent` |
+ * | `--sc-kit--collection-list--action--background--hover` | Action button hover background | `var(--sc-kit--color--bg--hover)` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/collection-list/collection-list-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class CollectionListLocalization {
+    get reorderHandle(): string;
+    get action(): string;
+}

package/dist/ui/collection-list/collection-list-localization.js

@@ -0,0 +1,19 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    reorderHandle: {
+        en: 'Drag to reorder',
+        no: 'Dra for å endre rekkefølge'
+    },
+    action: {
+        en: 'Action',
+        no: 'Handling'
+    }
+};
+export class CollectionListLocalization {
+    get reorderHandle() {
+        return loc.reorderHandle[AppLocale.current];
+    }
+    get action() {
+        return loc.action[AppLocale.current];
+    }
+}

package/dist/ui/collection-list/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CollectionList } from './cmp.collection-list.svelte';
+export { CollectionItem, type CollectionAction } from './types';

package/dist/ui/collection-list/index.js

@@ -0,0 +1,2 @@
+export { default as CollectionList } from './cmp.collection-list.svelte';
+export { CollectionItem } from './types';

package/dist/ui/collection-list/types.d.ts

@@ -0,0 +1,28 @@
+import type { IconProp } from '../icon';
+/**
+ * A row in a {@link CollectionList}. Wraps the consumer's payload (`originalItem`) with the
+ * presentation fields the built-in row renders. Construct one per item; `id` auto-fills when omitted.
+ */
+export declare class CollectionItem<T> {
+    originalItem: T;
+    id: string;
+    image: string | null;
+    icon: IconProp | null;
+    description: string | null;
+    imageClickCallback: ((item: T) => void) | null;
+    constructor(init: {
+        originalItem: T;
+        id?: string;
+        image?: string | null;
+        icon?: IconProp | null;
+        description?: string | null;
+        imageClickCallback?: (item: T) => void;
+    });
+}
+export type CollectionAction<T> = {
+    icon: IconProp;
+    /** Accessible name for the icon-only button. Falls back to a generic localized label. */
+    label?: string;
+    callback: (item: T, index: number) => void;
+    hidden?: (item: T, index: number) => boolean;
+};

package/dist/ui/collection-list/types.js

@@ -0,0 +1,20 @@
+/**
+ * A row in a {@link CollectionList}. Wraps the consumer's payload (`originalItem`) with the
+ * presentation fields the built-in row renders. Construct one per item; `id` auto-fills when omitted.
+ */
+export class CollectionItem {
+    originalItem;
+    id;
+    image;
+    icon;
+    description;
+    imageClickCallback;
+    constructor(init) {
+        this.originalItem = init.originalItem;
+        this.id = init.id ?? crypto.randomUUID();
+        this.image = init.image ?? null;
+        this.icon = init.icon ?? null;
+        this.description = init.description ?? null;
+        this.imageClickCallback = init.imageClickCallback ?? null;
+    }
+}

package/dist/ui/duration/cmp.duration.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">const { seconds, variant = 'raw', showZero = false } = $props();
+const format = (secs) => {
+    const total = Math.max(0, Math.round(secs));
+    const hours = Math.floor(total / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    const ss = (total % 60).toString().padStart(2, '0');
+    return hours > 0 ? `${hours}:${minutes.toString().padStart(2, '0')}:${ss}` : `${minutes}:${ss}`;
+};
+const value = $derived(seconds !== null && seconds > 0 ? format(seconds) : showZero ? format(0) : null);
+</script>
+
+{#if value !== null}
+  <span class="duration" class:duration--badge={variant === 'badge'}>{value}</span>
+{/if}
+
+<!--
+@component
+Renders a media/time duration given in seconds as a human-readable clock string — `m:ss` under an
+hour, `h:mm:ss` at or above (seconds are rounded, so a 60-second carry rolls up). `null` or ≤ 0
+renders nothing; pass `showZero` to force `0:00`. `variant='raw'` (default) is bare text that
+inherits the parent's typography; `variant='badge'` is a dark overlay pill for the bottom corner of
+a video thumbnail. Placement (e.g. absolute over media) is the consumer's job via the cascade.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--duration--badge--background` | Badge background (badge variant) | `rgb(0 0 0 / 55%)` (dark translucent) |
+| `--sc-kit--duration--badge--color` | Badge text color (badge variant) | `var(--sc-kit--color--text--on-accent)` |
+| `--sc-kit--duration--badge--padding` | Badge padding (badge variant) | `var(--sc-kit--space--1) var(--sc-kit--space--2)` |
+| `--sc-kit--duration--badge--border-radius` | Badge corner radius (badge variant) | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--duration--badge--font-size` | Badge font size (badge variant) | `var(--sc-kit--font-size--xs)` |
+-->
+<style>.duration {
+  font-variant-numeric: tabular-nums;
+}
+.duration--badge {
+  --_duration--badge-background: var(--sc-kit--duration--badge--background, rgb(0 0 0 / 55%));
+  --_duration--badge-color: var(--sc-kit--duration--badge--color, var(--sc-kit--color--text--on-accent));
+  --_duration--badge-padding: var(--sc-kit--duration--badge--padding, var(--sc-kit--space--1) var(--sc-kit--space--2));
+  --_duration--badge-border-radius: var(--sc-kit--duration--badge--border-radius, var(--sc-kit--radius--sm));
+  --_duration--badge-font-size: var(--sc-kit--duration--badge--font-size, var(--sc-kit--font-size--xs));
+  display: inline-block;
+  padding: var(--_duration--badge-padding);
+  background: var(--_duration--badge-background);
+  border-radius: var(--_duration--badge-border-radius);
+  color: var(--_duration--badge-color);
+  font-size: var(--_duration--badge-font-size);
+  line-height: var(--sc-kit--leading--normal);
+}</style>

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

@@ -0,0 +1,27 @@
+type Props = {
+    /** Duration in seconds. Zero, negative, or `null` renders nothing unless `showZero`. */
+    seconds: number | null;
+    /** Visual style — `raw` is bare text; `badge` is a dark overlay pill for media thumbnails. @default 'raw' */
+    variant?: 'raw' | 'badge';
+    /** Render `0:00` for a null / zero / negative duration instead of nothing. @default false */
+    showZero?: boolean;
+};
+/**
+ * Renders a media/time duration given in seconds as a human-readable clock string — `m:ss` under an
+ * hour, `h:mm:ss` at or above (seconds are rounded, so a 60-second carry rolls up). `null` or ≤ 0
+ * renders nothing; pass `showZero` to force `0:00`. `variant='raw'` (default) is bare text that
+ * inherits the parent's typography; `variant='badge'` is a dark overlay pill for the bottom corner of
+ * a video thumbnail. Placement (e.g. absolute over media) is the consumer's job via the cascade.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--duration--badge--background` | Badge background (badge variant) | `rgb(0 0 0 / 55%)` (dark translucent) |
+ * | `--sc-kit--duration--badge--color` | Badge text color (badge variant) | `var(--sc-kit--color--text--on-accent)` |
+ * | `--sc-kit--duration--badge--padding` | Badge padding (badge variant) | `var(--sc-kit--space--1) var(--sc-kit--space--2)` |
+ * | `--sc-kit--duration--badge--border-radius` | Badge corner radius (badge variant) | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--duration--badge--font-size` | Badge font size (badge variant) | `var(--sc-kit--font-size--xs)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1 @@
+export { default as Duration } from './cmp.duration.svelte';

package/dist/ui/duration/index.js

@@ -0,0 +1 @@
+export { default as Duration } from './cmp.duration.svelte';

package/dist/ui/select/multiselect-base.svelte

@@ -35,6 +35,7 @@ const core = createSelectCore({
     getDebounceMs: () => debounceMs,
     getCompare: () => compare,
     getCanCreate: () => canCreate,
+    getHideCreateRow: () => showCreateSection,
     getGroupHeader: () => groupHeader,
     getSelectionMode: () => selectionMode,
     isPicked: (option) => isPicked(option.value),

package/dist/ui/select/select-core.svelte.d.ts

@@ -13,6 +13,8 @@ export type SelectCoreConfig<T> = {
     getCompare: () => (a: T, b: T) => boolean;
     /** Optional `canCreate` validator — presence enables creatable mode. */
     getCanCreate: () => ((q: string) => boolean) | undefined;
+    /** When true, no `kind:'create'` row is emitted (the host renders its own create UI) — keyboard navigation must not reach a row the listbox doesn't show. @default false */
+    getHideCreateRow?: () => boolean;
     /** Group-header behavior. `toggle-all` only makes sense for multi. */
     getGroupHeader: () => 'static' | 'value' | 'toggle-all';
     /**

package/dist/ui/select/select-core.svelte.js

@@ -83,7 +83,7 @@ export function createSelectCore(config) {
     const groupMap = $derived(buildGroupMap(items));
     const rows = $derived.by(() => {
         const out = [];
-        if (showCreateRow) {
+        if (showCreateRow && !config.getHideCreateRow?.()) {
             out.push({ kind: 'create', query });
         }
         const compare = config.getCompare();
@@ -187,9 +187,13 @@ export function createSelectCore(config) {
         cancelInFlightLoad();
     };
     const resetFilterKeepFocus = () => {
+        // keep highlight on the picked row unless a filter was narrowing the list — else it flashes to the first row after a click
+        const wasFiltering = isFiltering || query !== '';
         query = '';
         isFiltering = false;
-        highlight = navigableIndices[0] ?? 0;
+        if (wasFiltering) {
+            highlight = navigableIndices[0] ?? 0;
+        }
         config.getInputEl()?.focus();
         void runLoad('');
     };

package/dist/ui/select/select-listbox.svelte

@@ -8,9 +8,12 @@ import IconCheckboxUnchecked from '@fluentui/svg-icons/icons/checkbox_unchecked_
 import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_16_regular.svg?raw';
 let { triggerEl, isOpen, rows, highlight, loading = false, listboxId, matchTriggerWidth = true, selectedDisplay = 'checkmark', optionSnippet, headerSnippet, bodySnippet, hideCreateRows = false, suppressEmpty = false, on } = $props();
 const localization = new SelectListboxLocalization();
-const visibleRows = $derived(hideCreateRows ? rows.filter((r) => r.kind !== 'create') : rows);
+// rows keep their index into the full `rows` array — `highlight` and row ids are core-side indices,
+// so filtering without preserving them shifts every row by one and Enter acts on the wrong row
+const visibleRows = $derived(rows.map((row, index) => ({ row, index })).filter(({ row }) => !hideCreateRows || row.kind !== 'create'));
 const hasRows = $derived(visibleRows.length > 0 || !!headerSnippet);
 const showEmpty = $derived(!hasRows && !loading && !suppressEmpty);
+const isHighlightMode = $derived(selectedDisplay === 'highlight');
 let panelEl = $state.raw(undefined);
 let triggerWidth = $state(undefined);
 // Floating UI: position when open, autoUpdate on scroll/resize, cleanup on close.
@@ -129,14 +132,15 @@ $effect(() => {
     {#if visibleRows.length === 0 && !headerSnippet}
       <div class="select-listbox__empty">{localization.noMatches}</div>
     {:else if bodySnippet}
-      {@render bodySnippet({ rows: visibleRows, highlight, triggerWidth, on: { pickRow: on.pickRow, hoverRow: on.hoverRow } })}
+      {@render bodySnippet({ rows: visibleRows.map(({ row }) => row), highlight, triggerWidth, on: { pickRow: on.pickRow, hoverRow: on.hoverRow } })}
     {:else}
-      {#each visibleRows as row, i (i)}
-        {@const rowId = `${listboxId}-row-${i}`}
+      {#each visibleRows as { row, index } (index)}
+        {@const rowId = `${listboxId}-row-${index}`}
         {#if row.kind === 'create'}
           <div
             class="select-listbox__row select-listbox__row--create"
-            class:select-listbox__row--active={i === highlight}
+            class:select-listbox__row--active={index === highlight}
+            class:select-listbox__row--ring={isHighlightMode && index === highlight}
             role="option"
             aria-selected="false"
             tabindex="-1"
@@ -144,7 +148,7 @@ $effect(() => {
             data-row-id={rowId}
             onclick={() => on.pickRow(row)}
             onkeydown={() => undefined}
-            onmouseenter={() => on.hoverRow(i)}>
+            onmouseenter={() => on.hoverRow(index)}>
             <span class="select-listbox__row-icon"><Icon src={IconAdd} /></span>
             <span class="select-listbox__row-label">{localization.createLabel(row.query)}</span>
           </div>
@@ -152,8 +156,10 @@ $effect(() => {
           {#if row.selectable}
             <div
               class="select-listbox__row select-listbox__row--group-header select-listbox__row--selectable"
-              class:select-listbox__row--active={i === highlight}
+              class:select-listbox__row--active={index === highlight}
               class:select-listbox__row--selected={row.selected}
+              class:select-listbox__row--ring={isHighlightMode && index === highlight}
+              class:select-listbox__row--fill={isHighlightMode && row.selected}
               role="option"
               aria-selected={row.state === 'checked'}
               aria-checked={row.state === 'indeterminate' ? 'mixed' : row.state === 'checked'}
@@ -162,7 +168,7 @@ $effect(() => {
               data-row-id={rowId}
               onclick={() => on.pickRow(row)}
               onkeydown={() => undefined}
-              onmouseenter={() => on.hoverRow(i)}>
+              onmouseenter={() => on.hoverRow(index)}>
               {#if selectedDisplay === 'checkbox'}
                 {@render checkboxGlyph(row.state)}
               {/if}
@@ -179,8 +185,10 @@ $effect(() => {
         {:else}
           <div
             class="select-listbox__row select-listbox__row--option"
-            class:select-listbox__row--active={i === highlight}
+            class:select-listbox__row--active={index === highlight}
             class:select-listbox__row--selected={row.selected}
+            class:select-listbox__row--ring={isHighlightMode && index === highlight}
+            class:select-listbox__row--fill={isHighlightMode && row.selected}
             class:select-listbox__row--disabled={row.option.disabled}
             class:select-listbox__row--indent={row.indent}
             role="option"
@@ -191,7 +199,7 @@ $effect(() => {
             data-row-id={rowId}
             onclick={() => on.pickRow(row)}
             onkeydown={() => undefined}
-            onmouseenter={() => on.hoverRow(i)}>
+            onmouseenter={() => on.hoverRow(index)}>
             {#if selectedDisplay === 'checkbox'}
               {@render checkboxGlyph(row.selected ? 'checked' : 'unchecked')}
             {/if}
@@ -228,7 +236,7 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
 | `--sc-kit--select--panel--padding` | Panel inner padding | `var(--sc-kit--space--1)` |
 | `--sc-kit--select--option--padding-block` | Option vertical padding | `var(--sc-kit--space--2)` |
 | `--sc-kit--select--option--padding-inline` | Option horizontal padding | `var(--sc-kit--space--3)` |
-| `--sc-kit--select--option--background--active` | Active row background | `var(--sc-kit--color--bg--hover)` |
+| `--sc-kit--select--option--background--active` | Active / focused row background | `var(--sc-kit--color--accent--softer)` |
 | `--sc-kit--select--option--color` | Row text color | `var(--sc-kit--color--text--primary)` |
 | `--sc-kit--select--option--color--selected` | Selected row text color | `var(--sc-kit--color--accent)` |
 | `--sc-kit--select--group-header--color` | Group header text color | `var(--sc-kit--color--text--muted)` |
@@ -245,12 +253,15 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
   --_lb--padding: var(--sc-kit--select--panel--padding, var(--sc-kit--space--1));
   --_lb--row-padding-block: var(--sc-kit--select--option--padding-block, var(--sc-kit--space--2));
   --_lb--row-padding-inline: var(--sc-kit--select--option--padding-inline, var(--sc-kit--space--3));
-  --_lb--row-background-active: var(--sc-kit--select--option--background--active, var(--sc-kit--color--bg--hover));
+  --_lb--row-background-active: var(--sc-kit--select--option--background--active, var(--sc-kit--color--accent--softer));
   --_lb--row-color: var(--sc-kit--select--option--color, var(--sc-kit--color--text--primary));
   --_lb--row-color-selected: var(--sc-kit--select--option--color--selected, var(--sc-kit--color--accent));
   --_lb--group-header-color: var(--sc-kit--select--group-header--color, var(--sc-kit--color--text--muted));
   --_lb--group-header-font-size: var(--sc-kit--select--group-header--font-size, var(--sc-kit--font-size--xs));
   --_lb--empty-color: var(--sc-kit--select--empty--color, var(--sc-kit--color--text--muted));
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
   position: absolute;
   z-index: var(--sc-kit--z-index--popover);
   background: var(--_lb--background);
@@ -298,6 +309,14 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
 .select-listbox__row--selected {
   color: var(--_lb--row-color-selected);
 }
+.select-listbox__row--ring {
+  background: transparent;
+  box-shadow: inset 0 0 0 2px var(--sc-kit--color--accent--soft);
+}
+.select-listbox__row--fill {
+  background: var(--sc-kit--color--accent--softer);
+  color: var(--_lb--row-color);
+}
 .select-listbox__row--disabled {
   color: var(--sc-kit--color--text--muted);
   cursor: default;
@@ -355,10 +374,6 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
 .select-listbox__row-checkbox--checked, .select-listbox__row-checkbox--indeterminate {
   --sc-kit--icon--color: var(--_lb--row-color-selected);
 }
-.select-listbox--display-highlight .select-listbox__row--selected {
-  background: var(--_lb--row-background-active);
-  color: var(--_lb--row-color);
-}
 .select-listbox__header {
   margin-block-end: var(--sc-kit--space--1);
 }

package/dist/ui/select/select-listbox.svelte.d.ts

@@ -81,7 +81,7 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--select--panel--padding` | Panel inner padding | `var(--sc-kit--space--1)` |
  * | `--sc-kit--select--option--padding-block` | Option vertical padding | `var(--sc-kit--space--2)` |
  * | `--sc-kit--select--option--padding-inline` | Option horizontal padding | `var(--sc-kit--space--3)` |
- * | `--sc-kit--select--option--background--active` | Active row background | `var(--sc-kit--color--bg--hover)` |
+ * | `--sc-kit--select--option--background--active` | Active / focused row background | `var(--sc-kit--color--accent--softer)` |
  * | `--sc-kit--select--option--color` | Row text color | `var(--sc-kit--color--text--primary)` |
  * | `--sc-kit--select--option--color--selected` | Selected row text color | `var(--sc-kit--color--accent)` |
  * | `--sc-kit--select--group-header--color` | Group header text color | `var(--sc-kit--color--text--muted)` |

package/dist/ui/stepper-dialog-layout/cmp.stepper-dialog-layout.svelte

@@ -113,7 +113,7 @@ Completed sidebar steps are clickable to go back; `canAdvance(step)` gates Next
 -->
 
 <style>.stepper-dialog-layout {
-  --_sdl--sidebar-width: var(--sc-kit--stepper-dialog-layout--sidebar--width, functions.to-rem(320));
+  --_sdl--sidebar-width: var(--sc-kit--stepper-dialog-layout--sidebar--width, 20rem);
   --_sdl--sidebar-background: var(--sc-kit--stepper-dialog-layout--sidebar--background, var(--sc-kit--color--bg--field-alt));
   --sc-kit--dialog--height: var(--sc-kit--stepper-dialog-layout--height, auto);
   --sc-kit--dialog--body--overflow-y: auto;

package/dist/ui/tooltip/cmp.tooltip.svelte

@@ -53,6 +53,13 @@ const hide = () => {
     stopAutoUpdate = undefined;
     visible = false;
 };
+// unmount while visible/pending must release the show timer and autoUpdate's scroll/resize observers
+$effect(() => () => {
+    if (showTimer) {
+        clearTimeout(showTimer);
+    }
+    stopAutoUpdate?.();
+});
 </script>
 
 <span

package/dist/ui/video/cmp.video.svelte

@@ -129,20 +129,30 @@ const play = async () => {
     if (!video) {
         return;
     }
+    let played = false;
     try {
         await video.play();
+        played = true;
     }
-    catch {
-        // can't play video without interaction with document, just ignoring the error
-    }
-    finally {
-        if (video.paused) {
+    catch (error) {
+        // muted retry only on autoplay rejection — an AbortError from a user pause must stay paused
+        if (error instanceof DOMException && error.name === 'NotAllowedError' && video.paused) {
             video.muted = true;
-            void video.play();
+            try {
+                await video.play();
+                played = true;
+            }
+            catch {
+                // still blocked without user interaction
+            }
         }
+    }
+    finally {
         everActivated = true;
     }
-    on?.started?.({ id, src });
+    if (played) {
+        on?.started?.({ id, src });
+    }
 };
 const pause = () => {
     video?.pause();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.9.12",
+  "version": "0.9.14",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -95,6 +95,10 @@
       "types": "./dist/ui/ai-panel/index.d.ts",
       "svelte": "./dist/ui/ai-panel/index.js"
     },
+    "./ui/announcement-banner": {
+      "types": "./dist/ui/announcement-banner/index.d.ts",
+      "svelte": "./dist/ui/announcement-banner/index.js"
+    },
     "./ui/avatar": {
       "types": "./dist/ui/avatar/index.d.ts",
       "svelte": "./dist/ui/avatar/index.js"
@@ -131,6 +135,10 @@
       "types": "./dist/ui/chip-group/index.d.ts",
       "svelte": "./dist/ui/chip-group/index.js"
     },
+    "./ui/collection-list": {
+      "types": "./dist/ui/collection-list/index.d.ts",
+      "svelte": "./dist/ui/collection-list/index.js"
+    },
     "./ui/color-picker": {
       "types": "./dist/ui/color-picker/index.d.ts",
       "svelte": "./dist/ui/color-picker/index.js"
@@ -163,6 +171,10 @@
       "types": "./dist/ui/drawer/index.d.ts",
       "svelte": "./dist/ui/drawer/index.js"
     },
+    "./ui/duration": {
+      "types": "./dist/ui/duration/index.d.ts",
+      "svelte": "./dist/ui/duration/index.js"
+    },
     "./ui/dynamic-component": {
       "types": "./dist/ui/dynamic-component/index.d.ts",
       "svelte": "./dist/ui/dynamic-component/index.js"