@streamscloud/kit 0.55.1 → 0.57.0

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

@@ -2,13 +2,14 @@ import { ContinuationToken, type CursorResult } from '..';
 import type { IDataLoader } from './data-loader';
 export declare class CursorDataLoaderWithSearch<T> implements IDataLoader<T> {
     items: T[];
-    private continuationToken;
+    private _continuationToken;
     private _searchString;
-    private loadPage;
-    private pending;
-    private generation;
-    private searchStringMinLength;
+    private _loadPage;
+    private _pending;
+    private _generation;
+    private _searchStringMinLength;
     private _loading;
+    private _failed;
     constructor(init: {
         loadPage: (continuationToken: ContinuationToken, searchString: string) => Promise<CursorResult<T> | null>;
         searchStringMinLength?: number;
@@ -16,6 +17,7 @@ export declare class CursorDataLoaderWithSearch<T> implements IDataLoader<T> {
     get searchString(): string;
     get loading(): boolean;
     get initialLoading(): boolean;
+    get failed(): boolean;
     loadMore: () => Promise<T[]>;
     reset(): Promise<void>;
     updateSearchString: (searchString: string | null) => void;

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

@@ -2,17 +2,18 @@ import { ContinuationToken } from '..';
 import { Utils } from '../utils';
 export class CursorDataLoaderWithSearch {
     items = $state.raw([]);
-    continuationToken = $state.raw(ContinuationToken.init());
+    _continuationToken = $state.raw(ContinuationToken.init());
     _searchString = $state.raw('');
-    loadPage;
-    pending = null;
-    generation = 0;
-    searchStringMinLength = 1;
+    _loadPage;
+    _pending = null;
+    _generation = 0;
+    _searchStringMinLength = 1;
     _loading = $state(false);
+    _failed = $state(false);
     constructor(init) {
-        this.loadPage = init.loadPage;
+        this._loadPage = init.loadPage;
         if (init.searchStringMinLength !== undefined) {
-            this.searchStringMinLength = init.searchStringMinLength;
+            this._searchStringMinLength = init.searchStringMinLength;
         }
         this.updateSearchString = Utils.debounce(this.updateSearchString, 400);
     }
@@ -25,33 +26,36 @@ export class CursorDataLoaderWithSearch {
     get initialLoading() {
         return this._loading && this.items.length === 0;
     }
+    get failed() {
+        return this._failed;
+    }
     loadMore = async () => {
-        if (this.pending) {
-            return this.pending;
+        if (this._pending) {
+            return this._pending;
         }
-        if (!this.continuationToken.canLoadMore) {
+        if (!this._continuationToken.canLoadMore) {
             return [];
         }
         this._loading = true;
         const pending = this.runLoad();
-        this.pending = pending;
+        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;
+            if (this._pending === pending) {
+                this._pending = null;
                 this._loading = false;
             }
         }
     };
     async reset() {
-        this.generation++;
-        this.pending = null;
+        this._generation++;
+        this._pending = null;
         this._loading = false;
         this.items = [];
-        this.continuationToken = ContinuationToken.init();
+        this._continuationToken = ContinuationToken.init();
         await this.loadMore();
     }
     updateSearchString = (searchString) => {
@@ -67,22 +71,28 @@ export class CursorDataLoaderWithSearch {
         }
     };
     runLoad = async () => {
-        const generation = this.generation;
+        const generation = this._generation;
         const search = this.isSearchStringEffective(this._searchString) ? this._searchString : '';
+        this._failed = false;
         try {
-            const result = (await this.loadPage(this.continuationToken, search)) ?? { items: [], continuationToken: ContinuationToken.preventLoading() };
+            const page = await this._loadPage(this._continuationToken, search);
             // a reset() mid-load bumps the generation — drop the stale page instead of appending it to the cleared list
-            if (generation !== this.generation) {
+            if (generation !== this._generation) {
                 return [];
             }
-            this.continuationToken = result.continuationToken;
+            const result = page ?? { items: [], continuationToken: ContinuationToken.preventLoading() };
+            this._failed = page === null;
+            this._continuationToken = result.continuationToken;
             this.items = [...this.items, ...result.items];
             return result.items;
         }
         catch (error) {
             console.error('CursorDataLoaderWithSearch: failed to load page', error);
+            if (generation === this._generation) {
+                this._failed = true;
+            }
             return [];
         }
     };
-    isSearchStringEffective = (searchString) => searchString && searchString.length >= this.searchStringMinLength;
+    isSearchStringEffective = (searchString) => searchString && searchString.length >= this._searchStringMinLength;
 }

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

@@ -3,15 +3,17 @@ import type { IDataLoader } from './data-loader';
 export declare class CursorDataLoader<T> implements IDataLoader<T> {
     items: T[];
     continuationToken: ContinuationToken;
-    private loadPage;
-    private pending;
-    private generation;
+    private _loadPage;
+    private _pending;
+    private _generation;
     private _loading;
+    private _failed;
     constructor(init: {
         loadPage: (continuationToken: ContinuationToken) => Promise<CursorResult<T> | null>;
     });
     get loading(): boolean;
     get initialLoading(): boolean;
+    get failed(): boolean;
     loadMore: () => Promise<T[]>;
     reset(): Promise<void>;
     private runLoad;

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

@@ -2,12 +2,13 @@ import { ContinuationToken } from '..';
 export class CursorDataLoader {
     items = $state.raw([]);
     continuationToken = $state.raw(ContinuationToken.init());
-    loadPage;
-    pending = null;
-    generation = 0;
+    _loadPage;
+    _pending = null;
+    _generation = 0;
     _loading = $state(false);
+    _failed = $state(false);
     constructor(init) {
-        this.loadPage = init.loadPage;
+        this._loadPage = init.loadPage;
     }
     get loading() {
         return this._loading;
@@ -15,49 +16,58 @@ export class CursorDataLoader {
     get initialLoading() {
         return this._loading && this.items.length === 0;
     }
+    get failed() {
+        return this._failed;
+    }
     loadMore = async () => {
-        if (this.pending) {
-            return this.pending;
+        if (this._pending) {
+            return this._pending;
         }
         if (!this.continuationToken.canLoadMore) {
             return [];
         }
         this._loading = true;
         const pending = this.runLoad();
-        this.pending = pending;
+        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;
+            if (this._pending === pending) {
+                this._pending = null;
                 this._loading = false;
             }
         }
     };
     async reset() {
-        this.generation++;
-        this.pending = null;
+        this._generation++;
+        this._pending = null;
         this._loading = false;
         this.items = [];
         this.continuationToken = ContinuationToken.init();
         await this.loadMore();
     }
     runLoad = async () => {
-        const generation = this.generation;
+        const generation = this._generation;
+        this._failed = false;
         try {
-            const result = (await this.loadPage(this.continuationToken)) ?? { items: [], continuationToken: ContinuationToken.preventLoading() };
+            const page = await this._loadPage(this.continuationToken);
             // a reset() mid-load bumps the generation — drop the stale page instead of appending it to the cleared list
-            if (generation !== this.generation) {
+            if (generation !== this._generation) {
                 return [];
             }
+            const result = page ?? { items: [], continuationToken: ContinuationToken.preventLoading() };
+            this._failed = page === null;
             this.continuationToken = result.continuationToken;
             this.items = [...this.items, ...result.items];
             return result.items;
         }
         catch (error) {
             console.error('CursorDataLoader: failed to load page', error);
+            if (generation === this._generation) {
+                this._failed = true;
+            }
             return [];
         }
     };

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

@@ -3,5 +3,7 @@ export interface IDataLoader<T> {
     loading: boolean;
     /** Loading with nothing to show yet — first load, or a reload after the list was cleared by a reset. */
     initialLoading: boolean;
+    /** The last attempt did not deliver a page, whether it returned nothing or threw; cleared when the next attempt starts. */
+    failed: boolean;
     loadMore: () => Promise<T[]>;
 }

package/dist/core/data-loaders/index.d.ts

@@ -1,4 +1,5 @@
 export type { IDataLoader } from './data-loader';
 export { CursorDataLoader } from './cursor-data-loader.svelte';
 export { CursorDataLoaderWithSearch } from './cursor-data-loader-with-search.svelte';
+export { KeyedCursorDataLoader } from './keyed-cursor-data-loader.svelte';
 export { PageDataLoader } from './page-data-loader.svelte';

package/dist/core/data-loaders/index.js

@@ -1,4 +1,5 @@
 // Data loaders
 export { CursorDataLoader } from './cursor-data-loader.svelte';
 export { CursorDataLoaderWithSearch } from './cursor-data-loader-with-search.svelte';
+export { KeyedCursorDataLoader } from './keyed-cursor-data-loader.svelte';
 export { PageDataLoader } from './page-data-loader.svelte';

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

@@ -0,0 +1,28 @@
+import { ContinuationToken, type CursorResult } from '..';
+export declare class KeyedCursorDataLoader<T> {
+    private _loaders;
+    private _loaded;
+    private _pending;
+    private _loadPage;
+    private _loadAlongside;
+    constructor(init: {
+        loadPage: (key: string, continuationToken: ContinuationToken) => Promise<CursorResult<T> | null>;
+        /** Started with the key's first page and awaited by `ensureLoaded`; its outcome never reaches `isLoaded`. */
+        loadAlongside?: (key: string) => Promise<void>;
+    });
+    items: (key?: string) => T[];
+    loading: (key?: string) => boolean;
+    initialLoading: (key?: string) => boolean;
+    canLoadMore: (key?: string) => boolean;
+    /** False until the key's first page loaded without failing, so a failed load can be retried; a later failed page never clears it. */
+    isLoaded: (key?: string) => boolean;
+    /** Loads the key's first page once; concurrent and repeat calls share that load's promise. */
+    ensureLoaded: (key?: string) => Promise<void>;
+    loadMore: (key?: string) => Promise<T[]>;
+    /** Drops the key's pages and loads them again from the first one. */
+    reload: (key?: string) => Promise<void>;
+    private startLoad;
+    private runLoad;
+    private runAlongside;
+    private loaderFor;
+}

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

@@ -0,0 +1,66 @@
+import { ContinuationToken } from '..';
+import { CursorDataLoader } from './cursor-data-loader.svelte';
+export class KeyedCursorDataLoader {
+    _loaders = {};
+    _loaded = $state.raw({});
+    _pending = {};
+    _loadPage;
+    _loadAlongside;
+    constructor(init) {
+        this._loadPage = init.loadPage;
+        this._loadAlongside = init.loadAlongside;
+    }
+    items = (key = '') => this.loaderFor(key).items;
+    loading = (key = '') => this.loaderFor(key).loading;
+    initialLoading = (key = '') => this.loaderFor(key).initialLoading;
+    canLoadMore = (key = '') => this.loaderFor(key).continuationToken.canLoadMore;
+    /** False until the key's first page loaded without failing, so a failed load can be retried; a later failed page never clears it. */
+    isLoaded = (key = '') => this._loaded[key] === true;
+    /** Loads the key's first page once; concurrent and repeat calls share that load's promise. */
+    ensureLoaded = (key = '') => {
+        if (this._loaded[key]) {
+            return Promise.resolve();
+        }
+        return this._pending[key] ?? this.startLoad(key);
+    };
+    loadMore = (key = '') => this.loaderFor(key).loadMore();
+    /** Drops the key's pages and loads them again from the first one. */
+    reload = (key = '') => {
+        this._loaded = { ...this._loaded, [key]: false };
+        return this.startLoad(key);
+    };
+    startLoad = async (key) => {
+        const pending = this.runLoad(key);
+        this._pending[key] = pending;
+        try {
+            await pending;
+        }
+        finally {
+            // a concurrent reload() may have installed a newer load — leave that one alone
+            if (this._pending[key] === pending) {
+                this._pending[key] = undefined;
+            }
+        }
+    };
+    runLoad = async (key) => {
+        const loader = this.loaderFor(key);
+        const alongside = this.runAlongside(key);
+        await loader.reset();
+        this._loaded = { ...this._loaded, [key]: !loader.failed };
+        await alongside;
+    };
+    runAlongside = async (key) => {
+        try {
+            await this._loadAlongside?.(key);
+        }
+        catch (error) {
+            console.error('KeyedCursorDataLoader: failed to load alongside the page', error);
+        }
+    };
+    loaderFor = (key) => {
+        if (!this._loaders[key]) {
+            this._loaders[key] = new CursorDataLoader({ loadPage: (continuationToken) => this._loadPage(key, continuationToken) });
+        }
+        return this._loaders[key];
+    };
+}

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

@@ -2,11 +2,12 @@ import type { IDataLoader } from './data-loader';
 export declare class PageDataLoader<T> implements IDataLoader<T> {
     private _items;
     private _loading;
-    private canLoadMore;
-    private perPage;
-    private loadPage;
-    private pageNumber;
-    private generation;
+    private _failed;
+    private _canLoadMore;
+    private _perPage;
+    private _loadPage;
+    private _pageNumber;
+    private _generation;
     constructor(init: {
         loadPage: (page: number, perPage: number) => Promise<T[]>;
         perPage?: number;
@@ -14,6 +15,7 @@ export declare class PageDataLoader<T> implements IDataLoader<T> {
     get items(): T[];
     get loading(): boolean;
     get initialLoading(): boolean;
+    get failed(): boolean;
     loadMore: () => Promise<T[]>;
     reset: () => Promise<void>;
 }

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

@@ -1,15 +1,16 @@
 export class PageDataLoader {
     _items = $state.raw([]);
     _loading = $state(false);
-    canLoadMore = $state(true);
-    perPage = 20;
-    loadPage;
-    pageNumber = 1;
-    generation = 0;
+    _failed = $state(false);
+    _canLoadMore = $state(true);
+    _perPage = 20;
+    _loadPage;
+    _pageNumber = 1;
+    _generation = 0;
     constructor(init) {
-        this.loadPage = init.loadPage;
+        this._loadPage = init.loadPage;
         if (init.perPage) {
-            this.perPage = init.perPage;
+            this._perPage = init.perPage;
         }
     }
     get items() {
@@ -21,39 +22,46 @@ export class PageDataLoader {
     get initialLoading() {
         return this._loading && this._items.length === 0;
     }
+    get failed() {
+        return this._failed;
+    }
     loadMore = async () => {
-        if (this._loading || !this.canLoadMore) {
+        if (this._loading || !this._canLoadMore) {
             return [];
         }
-        const generation = this.generation;
+        const generation = this._generation;
         this._loading = true;
+        this._failed = false;
         try {
-            const items = await this.loadPage(this.pageNumber, this.perPage);
+            const items = await this._loadPage(this._pageNumber, this._perPage);
             // a reset() mid-load bumps the generation — drop the stale page instead of appending it to the cleared list
-            if (generation !== this.generation) {
+            if (generation !== this._generation) {
                 return [];
             }
-            this.pageNumber++;
-            this.canLoadMore = items.length === this.perPage;
+            this._pageNumber++;
+            this._canLoadMore = items.length === this._perPage;
             this._items = [...this._items, ...items];
             return items;
         }
         catch (error) {
             console.error('PageDataLoader: failed to load page', error);
+            if (generation === this._generation) {
+                this._failed = true;
+            }
             return [];
         }
         finally {
-            if (generation === this.generation) {
+            if (generation === this._generation) {
                 this._loading = false;
             }
         }
     };
     reset = async () => {
-        this.generation++;
+        this._generation++;
         this._loading = false;
-        this.pageNumber = 1;
+        this._pageNumber = 1;
         this._items = [];
-        this.canLoadMore = true;
+        this._canLoadMore = true;
         await this.loadMore();
     };
 }

package/dist/ui/player/buttons/cmp.mobile-player-buttons.svelte

@@ -5,11 +5,19 @@ let { actions, contextActions = [], contextPosition = 'left-end' } = $props();
 
 <div class="mobile-player-buttons">
   {#each actions as action, index (index)}
-    <button type="button" class="mobile-player-buttons__action" disabled={action.disabled} onclick={action.callback}>
-      <span class="mobile-player-buttons__action-icon">
-        <IconSlot icon={action.icon} />
+    {#if action.on}
+      <button type="button" class="mobile-player-buttons__action" disabled={action.disabled} aria-label={action.label || undefined} onclick={action.on.click}>
+        <span class="mobile-player-buttons__action-icon">
+          <IconSlot icon={action.icon} />
+        </span>
+      </button>
+    {:else}
+      <span class="mobile-player-buttons__action mobile-player-buttons__action--static" role="img" aria-label={action.label || undefined}>
+        <span class="mobile-player-buttons__action-icon">
+          <IconSlot icon={action.icon} />
+        </span>
       </span>
-    </button>
+    {/if}
   {/each}
   {#if contextActions.length}
     <div class="mobile-player-buttons__action mobile-player-buttons__action--menu">
@@ -21,7 +29,9 @@ let { actions, contextActions = [], contextPosition = 'left-end' } = $props();
 <!--
 @component
 A vertically stacked column of player action buttons optimized for mobile touch targets.
-`contextActions` appends an overflow-menu cell below the buttons.
+`contextActions` appends an overflow-menu cell below the buttons. An action without `on` renders as a static
+plaque — same cell, no pointer feedback, out of the tab order — while `disabled` keeps dimming an action that
+exists but is currently unavailable.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -37,7 +47,6 @@ A vertically stacked column of player action buttons optimized for mobile touch
   --_player-button--menu--border-color: var(--sc-kit--player-button--menu--border-color, rgb(255 255 255 / 15%));
   --_player-button--menu--item-color: var(--sc-kit--player-button--menu--item--color, var(--sc-kit--color--text--on-accent));
   --_player-button--menu--item-background-hover: var(--sc-kit--player-button--menu--item--background--hover, rgb(255 255 255 / 12%));
-  cursor: pointer;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -48,6 +57,7 @@ A vertically stacked column of player action buttons optimized for mobile touch
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
   padding: var(--_player-button--cell-padding);
   --sc-kit--icon--color: var(--sc-kit--color--text--on-accent);
   --sc-kit--icon--size: 2rem;
@@ -57,6 +67,9 @@ A vertically stacked column of player action buttons optimized for mobile touch
   opacity: 0.5;
   cursor: default;
 }
+.mobile-player-buttons__action--static {
+  cursor: default;
+}
 .mobile-player-buttons__action--menu {
   padding: 0;
   min-block-size: calc(var(--sc-kit--icon--size) + 2 * var(--_player-button--cell-padding));

package/dist/ui/player/buttons/cmp.mobile-player-buttons.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { PlayerButtonDef, PlayerContextActionDef } from './types';
 import type { Placement } from '@floating-ui/dom';
 type Props = {
+    /** Button definitions — one without `on` renders as a static plaque instead of a button. */
     actions: PlayerButtonDef[];
     /** Rows of an overflow menu rendered as the final cell — an ellipsis trigger opening a popover. Empty ⇒ no menu cell. @default [] */
     contextActions?: PlayerContextActionDef[];
@@ -9,7 +10,9 @@ type Props = {
 };
 /**
  * A vertically stacked column of player action buttons optimized for mobile touch targets.
- * `contextActions` appends an overflow-menu cell below the buttons.
+ * `contextActions` appends an overflow-menu cell below the buttons. An action without `on` renders as a static
+ * plaque — same cell, no pointer feedback, out of the tab order — while `disabled` keeps dimming an action that
+ * exists but is currently unavailable.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/player/buttons/cmp.player-buttons.svelte

@@ -5,38 +5,63 @@ const hasMenu = $derived(contextActions.length > 0);
 const cellCount = $derived(actions.length + (hasMenu ? 1 : 0));
 </script>
 
-{#if cellCount === 1}
-  {#if hasMenu}
-    <div class="player-button player-button--menu" style:zoom={zoom}>
-      <PlayerContextMenu actions={contextActions} position={contextPosition} />
-    </div>
-  {:else}
-    {@const action = actions[0]}
+{#snippet soloCell(action: PlayerButtonDef)}
+  {#if action.on}
     <button
       type="button"
       class="player-button"
       style:zoom={zoom}
       class:player-button--scale-effect={scaleEffect}
       disabled={action.disabled}
-      onclick={action.callback}>
+      aria-label={action.label || undefined}
+      onclick={action.on.click}>
       <span class="player-button__icon">
         <IconSlot icon={action.icon} />
       </span>
     </button>
+  {:else}
+    <span class="player-button player-button--static" style:zoom={zoom} role="img" aria-label={action.label || undefined}>
+      <span class="player-button__icon">
+        <IconSlot icon={action.icon} />
+      </span>
+    </span>
+  {/if}
+{/snippet}
+
+{#snippet pillCell(action: PlayerButtonDef)}
+  {#if action.on}
+    <button
+      type="button"
+      class="player-buttons__action"
+      class:player-buttons__action--scale-effect={scaleEffect}
+      disabled={action.disabled}
+      aria-label={action.label || undefined}
+      onclick={action.on.click}>
+      <span class="player-buttons__action-icon">
+        <IconSlot icon={action.icon} />
+      </span>
+    </button>
+  {:else}
+    <span class="player-buttons__action player-buttons__action--static" role="img" aria-label={action.label || undefined}>
+      <span class="player-buttons__action-icon">
+        <IconSlot icon={action.icon} />
+      </span>
+    </span>
+  {/if}
+{/snippet}
+
+{#if cellCount === 1}
+  {#if hasMenu}
+    <div class="player-button player-button--menu" style:zoom={zoom}>
+      <PlayerContextMenu actions={contextActions} position={contextPosition} />
+    </div>
+  {:else}
+    {@render soloCell(actions[0])}
   {/if}
 {:else if cellCount > 1}
   <div class="player-buttons" style:zoom={zoom}>
     {#each actions as action, index (index)}
-      <button
-        type="button"
-        class="player-buttons__action"
-        class:player-buttons__action--scale-effect={scaleEffect}
-        disabled={action.disabled}
-        onclick={action.callback}>
-        <span class="player-buttons__action-icon">
-          <IconSlot icon={action.icon} />
-        </span>
-      </button>
+      {@render pillCell(action)}
     {/each}
     {#if hasMenu}
       <div class="player-buttons__action player-buttons__action--menu">
@@ -50,7 +75,9 @@ const cellCount = $derived(actions.length + (hasMenu ? 1 : 0));
 @component
 Desktop player action buttons — renders a single circular button or a vertically stacked pill for multiple actions.
 `contextActions` adds an overflow-menu cell as the last item; it counts towards the single / pill split, so one
-action plus a menu renders as a two-cell pill.
+action plus a menu renders as a two-cell pill. An action without `on` renders as a static plaque — same cell
+chrome, no hover, no scale, out of the tab order — while `disabled` keeps dimming an action that exists but is
+currently unavailable.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -70,6 +97,7 @@ action plus a menu renders as a two-cell pill.
   --_player-button--menu--item-background-hover: var(--sc-kit--player-button--menu--item--background--hover, rgb(255 255 255 / 12%));
   --_player-button--icon-scale: 1;
   --_player-button--cell-padding: 0.625rem;
+  --_player-button--background--hover: var(--_player-button--color);
   pointer-events: auto;
   padding: var(--_player-button--cell-padding);
   display: flex;
@@ -83,16 +111,21 @@ action plus a menu renders as a two-cell pill.
   --sc-kit--icon--size: 1.75rem;
 }
 .player-button:hover:not(:disabled) {
-  background-color: var(--_player-button--color);
+  background-color: var(--_player-button--background--hover);
 }
 .player-button:disabled {
   opacity: 0.5;
   cursor: default;
 }
+.player-button--static {
+  --_player-button--background--hover: var(--_player-button--color--inactive);
+  cursor: default;
+}
 .player-button--scale-effect:hover:not(:disabled) {
   --_player-button--icon-scale: 1.2;
 }
 .player-button--menu {
+  --_player-button--background--hover: var(--_player-button--color--inactive);
   padding: 0;
   min-block-size: calc(var(--sc-kit--icon--size) + 2 * var(--_player-button--cell-padding));
   min-inline-size: calc(var(--sc-kit--icon--size) + 2 * var(--_player-button--cell-padding));
@@ -101,9 +134,6 @@ action plus a menu renders as a two-cell pill.
   --sc-kit--popover-item--color: var(--_player-button--menu--item-color);
   --sc-kit--popover-item--background--hover: var(--_player-button--menu--item-background-hover);
 }
-.player-button--menu:hover:not(:disabled) {
-  background-color: var(--_player-button--color--inactive);
-}
 .player-button__icon {
   display: block;
   transform: scale(var(--_player-button--icon-scale));
@@ -125,7 +155,6 @@ action plus a menu renders as a two-cell pill.
   --_player-button--menu--border-color: var(--sc-kit--player-button--menu--border-color, rgb(255 255 255 / 15%));
   --_player-button--menu--item-color: var(--sc-kit--player-button--menu--item--color, var(--sc-kit--color--text--on-accent));
   --_player-button--menu--item-background-hover: var(--sc-kit--player-button--menu--item--background--hover, rgb(255 255 255 / 12%));
-  cursor: pointer;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -137,9 +166,11 @@ action plus a menu renders as a two-cell pill.
 .player-buttons__action {
   --_player-button--icon-scale: 1;
   --_player-button--cell-padding: 0.5625rem;
+  --_player-button--background--hover: var(--_player-button--color);
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
   padding: var(--_player-button--cell-padding);
   border-radius: 1.25rem;
   color: var(--sc-kit--color--text--on-accent);
@@ -148,17 +179,24 @@ action plus a menu renders as a two-cell pill.
   transition: background-color 0.5s;
 }
 .player-buttons__action:hover:not(:disabled) {
-  background-color: var(--_player-button--color);
+  background-color: var(--_player-button--background--hover);
 }
 .player-buttons__action:disabled {
   opacity: 0.5;
   cursor: default;
 }
+.player-buttons__action--static {
+  --_player-button--background--hover: transparent;
+  cursor: default;
+}
+.player-buttons__action--scale-effect {
+  --_player-button--background--hover: transparent;
+}
 .player-buttons__action--scale-effect:hover:not(:disabled) {
   --_player-button--icon-scale: 1.2;
-  background-color: transparent;
 }
 .player-buttons__action--menu {
+  --_player-button--background--hover: transparent;
   padding: 0;
   min-block-size: calc(var(--sc-kit--icon--size) + 2 * var(--_player-button--cell-padding));
   min-inline-size: calc(var(--sc-kit--icon--size) + 2 * var(--_player-button--cell-padding));
@@ -167,9 +205,6 @@ action plus a menu renders as a two-cell pill.
   --sc-kit--popover-item--color: var(--_player-button--menu--item-color);
   --sc-kit--popover-item--background--hover: var(--_player-button--menu--item-background-hover);
 }
-.player-buttons__action--menu:hover:not(:disabled) {
-  background-color: transparent;
-}
 .player-buttons__action-icon {
   display: block;
   transform: scale(var(--_player-button--icon-scale));

package/dist/ui/player/buttons/cmp.player-buttons.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { PlayerButtonDef, PlayerContextActionDef } from './types';
 import type { Placement } from '@floating-ui/dom';
 type Props = {
-    /** Array of button definitions (icon, callback, disabled state) */
+    /** Button definitions — one without `on` renders as a static plaque instead of a button. */
     actions: PlayerButtonDef[];
     /** Rows of an overflow menu rendered as the final cell — an ellipsis trigger opening a popover. Empty ⇒ no menu cell. @default [] */
     contextActions?: PlayerContextActionDef[];
@@ -15,7 +15,9 @@ type Props = {
 /**
  * Desktop player action buttons — renders a single circular button or a vertically stacked pill for multiple actions.
  * `contextActions` adds an overflow-menu cell as the last item; it counts towards the single / pill split, so one
- * action plus a menu renders as a two-cell pill.
+ * action plus a menu renders as a two-cell pill. An action without `on` renders as a static plaque — same cell
+ * chrome, no hover, no scale, out of the tab order — while `disabled` keeps dimming an action that exists but is
+ * currently unavailable.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/player/buttons/player-context-menu.svelte

@@ -13,7 +13,7 @@ const localization = new PlayerButtonsLocalization();
   {/snippet}
 
   {#each actions as action (action.label)}
-    <PopoverItem disabled={action.disabled} on={{ click: action.callback }}>
+    <PopoverItem disabled={action.disabled} on={{ click: action.on?.click }}>
       <IconText icon={action.icon} size="sm">{action.label}</IconText>
     </PopoverItem>
   {/each}

package/dist/ui/player/buttons/types.d.ts

@@ -1,12 +1,20 @@
 import type { IconProp } from '../../icon';
 export type PlayerButtonDef = {
     icon: IconProp;
-    callback: () => void;
+    /** Accessible name — rendered as `aria-label`, never as visible text. */
+    label: string;
+    /** Omit for a control with no action: it renders as a static plaque with the button's chrome and no pointer feedback, rather than a dimmed button. */
+    on?: {
+        click: () => void;
+    };
     disabled?: boolean;
 };
 export type PlayerContextActionDef = {
     icon: IconProp;
     label: string;
-    callback: () => void;
+    /** Omit for a row with no action: it renders as static text that does not highlight and does not dismiss the menu. */
+    on?: {
+        click: () => void;
+    };
     disabled?: boolean;
 };

package/dist/ui/popover/cmp.popover-item.svelte

@@ -1,23 +1,33 @@
 <script lang="ts">import { popoverIgnore } from './popover-ignore';
 const { disabled = false, keepOpen = false, divider = false, inset = true, on, children } = $props();
+const isStatic = $derived(!on?.click);
+const interactive = $derived(!disabled && !isStatic);
 const handleClick = () => {
-    if (disabled) {
+    if (!interactive) {
         return;
     }
     on?.click?.();
 };
+const handleKeydown = (event) => {
+    if (event.key !== 'Enter' && event.key !== ' ') {
+        return;
+    }
+    event.preventDefault();
+    event.currentTarget.click();
+};
 </script>
 
 <div
   class="popover-item"
   class:popover-item--disabled={disabled}
+  class:popover-item--static={isStatic}
   class:popover-item--divider={divider}
   class:popover-item--inset={inset}
-  use:popoverIgnore={keepOpen}
+  use:popoverIgnore={keepOpen || isStatic}
   role="menuitem"
-  tabindex={disabled ? -1 : 0}
+  tabindex={interactive ? 0 : -1}
   onclick={handleClick}
-  onkeydown={() => undefined}>
+  onkeydown={handleKeydown}>
   <div class="popover-item__content">
     {@render children()}
   </div>
@@ -27,7 +37,9 @@ const handleClick = () => {
 @component
 PopoverItem — single row inside a Popover's content. Hover / disabled / opt-in divider
 variants. Set `keepOpen` to prevent the parent popover from closing when clicked (useful
-for toggle items inside menus).
+for toggle items inside menus). A row given no `on` is static — full text color, no hover,
+no focus, and a click neither fires nor dismisses the popover; `disabled` stays for a row
+whose action exists but is currently unavailable.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -70,7 +82,7 @@ for toggle items inside menus).
   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);
 }
-.popover-item:hover:not(.popover-item--disabled) {
+.popover-item:hover:not(.popover-item--disabled):not(.popover-item--static) {
   background: var(--_di--background-hover);
 }
 .popover-item:focus-visible {
@@ -81,6 +93,9 @@ for toggle items inside menus).
   color: var(--_di--color-disabled);
   cursor: default;
 }
+.popover-item--static {
+  cursor: default;
+}
 .popover-item--divider {
   box-shadow: 0 1px 0 0 var(--_di--divider-color);
   margin-bottom: var(--_di--divider-spacing);

package/dist/ui/popover/cmp.popover-item.svelte.d.ts

@@ -10,6 +10,7 @@ type Props = {
      * @default true
      */
     inset?: boolean;
+    /** Omit for a row with no action: it renders as static text that does not highlight, take focus, or dismiss the popover. */
     on?: {
         click?: () => void;
     };
@@ -18,7 +19,9 @@ type Props = {
 /**
  * PopoverItem — single row inside a Popover's content. Hover / disabled / opt-in divider
  * variants. Set `keepOpen` to prevent the parent popover from closing when clicked (useful
- * for toggle items inside menus).
+ * for toggle items inside menus). A row given no `on` is static — full text color, no hover,
+ * no focus, and a click neither fires nor dismisses the popover; `disabled` stays for a row
+ * whose action exists but is currently unavailable.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/package.json

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