@streamscloud/kit 0.54.0 → 0.55.0

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

@@ -15,6 +15,7 @@ export declare class CursorDataLoaderWithSearch<T> implements IDataLoader<T> {
     });
     get searchString(): string;
     get loading(): boolean;
+    get initialLoading(): boolean;
     loadMore: () => Promise<T[]>;
     reset(): Promise<void>;
     updateSearchString: (searchString: string | null) => void;

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

@@ -22,6 +22,9 @@ export class CursorDataLoaderWithSearch {
     get loading() {
         return this._loading;
     }
+    get initialLoading() {
+        return this._loading && this.items.length === 0;
+    }
     loadMore = async () => {
         if (this.pending) {
             return this.pending;

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

@@ -11,6 +11,7 @@ export declare class CursorDataLoader<T> implements IDataLoader<T> {
         loadPage: (continuationToken: ContinuationToken) => Promise<CursorResult<T> | null>;
     });
     get loading(): boolean;
+    get initialLoading(): boolean;
     loadMore: () => Promise<T[]>;
     reset(): Promise<void>;
     private runLoad;

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

@@ -12,6 +12,9 @@ export class CursorDataLoader {
     get loading() {
         return this._loading;
     }
+    get initialLoading() {
+        return this._loading && this.items.length === 0;
+    }
     loadMore = async () => {
         if (this.pending) {
             return this.pending;

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

@@ -1,5 +1,7 @@
 export interface IDataLoader<T> {
     items: T[];
     loading: boolean;
+    /** Loading with nothing to show yet — first load, or a reload after the list was cleared by a reset. */
+    initialLoading: boolean;
     loadMore: () => Promise<T[]>;
 }

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

@@ -13,6 +13,7 @@ export declare class PageDataLoader<T> implements IDataLoader<T> {
     });
     get items(): T[];
     get loading(): boolean;
+    get initialLoading(): boolean;
     loadMore: () => Promise<T[]>;
     reset: () => Promise<void>;
 }

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

@@ -18,6 +18,9 @@ export class PageDataLoader {
     get loading() {
         return this._loading;
     }
+    get initialLoading() {
+        return this._loading && this._items.length === 0;
+    }
     loadMore = async () => {
         if (this._loading || !this.canLoadMore) {
             return [];

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

@@ -1,28 +1,42 @@
 <script lang="ts">import { IconSlot } from '../../icon';
-let { actions } = $props();
+import PlayerContextMenu from './player-context-menu.svelte';
+let { actions, contextActions = [], contextPosition = 'left-end' } = $props();
 </script>
 
 <div class="mobile-player-buttons">
-  {#each actions as action (action.icon)}
+  {#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} />
       </span>
     </button>
   {/each}
+  {#if contextActions.length}
+    <div class="mobile-player-buttons__action mobile-player-buttons__action--menu">
+      <PlayerContextMenu actions={contextActions} position={contextPosition} />
+    </div>
+  {/if}
 </div>
 
 <!--
 @component
 A vertically stacked column of player action buttons optimized for mobile touch targets.
+`contextActions` appends an overflow-menu cell below the buttons.
 
-### Props
-| Prop | Type | Description |
+### CSS Custom Properties
+| Property | Description | Default |
 |---|---|---|
-| `actions` | `PlayerButtonDef[]` | Array of button definitions (icon, callback, disabled state) |
+| `--sc-kit--player-button--color--inactive` | Overflow menu panel background | 60% opacity of `black` |
+| `--sc-kit--player-button--menu--border-color` | Overflow menu panel border | `white` at 15% |
+| `--sc-kit--player-button--menu--item--color` | Overflow menu row text / icon color | `--sc-kit--color--text--on-accent` |
+| `--sc-kit--player-button--menu--item--background--hover` | Overflow menu row hover background | `white` at 12% |
 -->
 
 <style>.mobile-player-buttons {
+  --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(0 0 0 / 60%));
+  --_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;
@@ -30,10 +44,11 @@ A vertically stacked column of player action buttons optimized for mobile touch
   pointer-events: auto;
 }
 .mobile-player-buttons__action {
+  --_player-button--cell-padding: var(--sc-kit--space--4);
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: var(--sc-kit--space--4);
+  padding: var(--_player-button--cell-padding);
   --sc-kit--icon--color: var(--sc-kit--color--text--on-accent);
   --sc-kit--icon--size: 2rem;
   --sc-kit--icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
@@ -42,6 +57,15 @@ A vertically stacked column of player action buttons optimized for mobile touch
   opacity: 0.5;
   cursor: default;
 }
+.mobile-player-buttons__action--menu {
+  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));
+  --sc-kit--popover--content--background: var(--_player-button--color--inactive);
+  --sc-kit--popover--content--border-color: var(--_player-button--menu--border-color);
+  --sc-kit--popover-item--color: var(--_player-button--menu--item-color);
+  --sc-kit--popover-item--background--hover: var(--_player-button--menu--item-background-hover);
+}
 .mobile-player-buttons__action-icon {
   display: block;
 }</style>

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

@@ -1,14 +1,23 @@
-import type { PlayerButtonDef } from './types';
+import type { PlayerButtonDef, PlayerContextActionDef } from './types';
+import type { Placement } from '@floating-ui/dom';
 type Props = {
     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[];
+    /** Floating UI placement of the overflow menu panel @default 'left-end' */
+    contextPosition?: Placement;
 };
 /**
  * A vertically stacked column of player action buttons optimized for mobile touch targets.
+ * `contextActions` appends an overflow-menu cell below the buttons.
  *
- * ### Props
- * | Prop | Type | Description |
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
  * |---|---|---|
- * | `actions` | `PlayerButtonDef[]` | Array of button definitions (icon, callback, disabled state) |
+ * | `--sc-kit--player-button--color--inactive` | Overflow menu panel background | 60% opacity of `black` |
+ * | `--sc-kit--player-button--menu--border-color` | Overflow menu panel border | `white` at 15% |
+ * | `--sc-kit--player-button--menu--item--color` | Overflow menu row text / icon color | `--sc-kit--color--text--on-accent` |
+ * | `--sc-kit--player-button--menu--item--background--hover` | Overflow menu row hover background | `white` at 12% |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,23 +1,32 @@
 <script lang="ts">import { IconSlot } from '../../icon';
-let { actions, scaleEffect = false, zoom = 1 } = $props();
+import PlayerContextMenu from './player-context-menu.svelte';
+let { actions, contextActions = [], contextPosition = 'left-end', scaleEffect = false, zoom = 1 } = $props();
+const hasMenu = $derived(contextActions.length > 0);
+const cellCount = $derived(actions.length + (hasMenu ? 1 : 0));
 </script>
 
-{#if actions.length === 1}
-  {@const action = actions[0]}
-  <button
-    type="button"
-    class="player-button"
-    style:zoom={zoom}
-    class:player-button--scale-effect={scaleEffect}
-    disabled={action.disabled}
-    onclick={action.callback}>
-    <span class="player-button__icon">
-      <IconSlot icon={action.icon} />
-    </span>
-  </button>
-{:else if actions.length > 1}
+{#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]}
+    <button
+      type="button"
+      class="player-button"
+      style:zoom={zoom}
+      class:player-button--scale-effect={scaleEffect}
+      disabled={action.disabled}
+      onclick={action.callback}>
+      <span class="player-button__icon">
+        <IconSlot icon={action.icon} />
+      </span>
+    </button>
+  {/if}
+{:else if cellCount > 1}
   <div class="player-buttons" style:zoom={zoom}>
-    {#each actions as action (action.icon)}
+    {#each actions as action, index (index)}
       <button
         type="button"
         class="player-buttons__action"
@@ -29,26 +38,40 @@ let { actions, scaleEffect = false, zoom = 1 } = $props();
         </span>
       </button>
     {/each}
+    {#if hasMenu}
+      <div class="player-buttons__action player-buttons__action--menu">
+        <PlayerContextMenu actions={contextActions} position={contextPosition} />
+      </div>
+    {/if}
   </div>
 {/if}
 
 <!--
 @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.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--player-button--color` | Button background at full opacity | `dark-500` / `black` at 95% |
-| `--sc-kit--player-button--color--inactive` | Button background at rest | 60% opacity of `--color` |
+| `--sc-kit--player-button--color--inactive` | Button background at rest — the overflow menu panel takes the same value | 60% opacity of `--color` |
+| `--sc-kit--player-button--menu--border-color` | Overflow menu panel border | `white` at 15% |
+| `--sc-kit--player-button--menu--item--color` | Overflow menu row text / icon color | `--sc-kit--color--text--on-accent` |
+| `--sc-kit--player-button--menu--item--background--hover` | Overflow menu row hover background | `white` at 12% |
 -->
 
 <style>.player-button {
   --_player-button--color: var(--sc-kit--player-button--color, rgb(0 0 0 / 95%));
   --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(0 0 0 / 60%));
+  --_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%));
   --_player-button--icon-scale: 1;
+  --_player-button--cell-padding: 0.625rem;
   pointer-events: auto;
-  padding: 0.625rem;
+  padding: var(--_player-button--cell-padding);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -69,6 +92,18 @@ Desktop player action buttons — renders a single circular button or a vertical
 .player-button--scale-effect:hover:not(:disabled) {
   --_player-button--icon-scale: 1.2;
 }
+.player-button--menu {
+  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));
+  --sc-kit--popover--content--background: var(--_player-button--color--inactive);
+  --sc-kit--popover--content--border-color: var(--_player-button--menu--border-color);
+  --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));
@@ -79,7 +114,7 @@ Desktop player action buttons — renders a single circular button or a vertical
 }
 @container (width < 576px) {
   .player-button {
-    padding: 0.5rem;
+    --_player-button--cell-padding: 0.5rem;
     --sc-kit--icon--size: 1.5rem;
   }
 }
@@ -87,6 +122,9 @@ Desktop player action buttons — renders a single circular button or a vertical
 .player-buttons {
   --_player-button--color: var(--sc-kit--player-button--color, rgb(0 0 0 / 95%));
   --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(0 0 0 / 60%));
+  --_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;
@@ -98,10 +136,11 @@ Desktop player action buttons — renders a single circular button or a vertical
 }
 .player-buttons__action {
   --_player-button--icon-scale: 1;
+  --_player-button--cell-padding: 0.5625rem;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0.5625rem;
+  padding: var(--_player-button--cell-padding);
   border-radius: 1.25rem;
   color: var(--sc-kit--color--text--on-accent);
   --sc-kit--icon--color: var(--sc-kit--color--text--on-accent);
@@ -119,6 +158,18 @@ Desktop player action buttons — renders a single circular button or a vertical
   --_player-button--icon-scale: 1.2;
   background-color: transparent;
 }
+.player-buttons__action--menu {
+  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));
+  --sc-kit--popover--content--background: var(--_player-button--color--inactive);
+  --sc-kit--popover--content--border-color: var(--_player-button--menu--border-color);
+  --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,12 @@
-import type { PlayerButtonDef } from './types';
+import type { PlayerButtonDef, PlayerContextActionDef } from './types';
+import type { Placement } from '@floating-ui/dom';
 type Props = {
     /** Array of button definitions (icon, callback, disabled state) */
     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[];
+    /** Floating UI placement of the overflow menu panel @default 'left-end' */
+    contextPosition?: Placement;
     /** Scale the icon on hover */
     scaleEffect?: boolean;
     /** CSS zoom level applied to the button container @default 1 */
@@ -9,12 +14,17 @@ 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.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--player-button--color` | Button background at full opacity | `dark-500` / `black` at 95% |
- * | `--sc-kit--player-button--color--inactive` | Button background at rest | 60% opacity of `--color` |
+ * | `--sc-kit--player-button--color--inactive` | Button background at rest — the overflow menu panel takes the same value | 60% opacity of `--color` |
+ * | `--sc-kit--player-button--menu--border-color` | Overflow menu panel border | `white` at 15% |
+ * | `--sc-kit--player-button--menu--item--color` | Overflow menu row text / icon color | `--sc-kit--color--text--on-accent` |
+ * | `--sc-kit--player-button--menu--item--background--hover` | Overflow menu row hover background | `white` at 12% |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,25 +1,29 @@
 <script lang="ts">import { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
 import { default as PlayerButtons } from './cmp.player-buttons.svelte';
-let { scaleEffect = false, actions } = $props();
+let { scaleEffect = false, actions, contextActions = [], contextPosition = 'left-end' } = $props();
 </script>
 
 <div class="desktop-controls">
-  <PlayerButtons actions={actions} scaleEffect={scaleEffect} />
+  <PlayerButtons actions={actions} contextActions={contextActions} contextPosition={contextPosition} scaleEffect={scaleEffect} />
 </div>
 
 <div class="mobile-controls">
-  <MobilePlayerButtons actions={actions} />
+  <MobilePlayerButtons actions={actions} contextActions={contextActions} contextPosition={contextPosition} />
 </div>
 
 <!--
 @component
 Renders `PlayerButtons` on desktop and `MobilePlayerButtons` on mobile, switching via container query.
+Both branches stay mounted, so `contextActions` builds a menu in each; only the visible one is reachable.
 
-### Props
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `actions` | `PlayerButtonDef[]` | — | Array of button definitions |
-| `scaleEffect` | `boolean` | `false` | Whether icons scale on hover (desktop only) |
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--player-button--color` | Button background at full opacity (desktop only — the mobile column paints no button background) | `black` at 95% |
+| `--sc-kit--player-button--color--inactive` | Button background at rest — the overflow menu panel takes the same value | 60% opacity of `--color` |
+| `--sc-kit--player-button--menu--border-color` | Overflow menu panel border | `white` at 15% |
+| `--sc-kit--player-button--menu--item--color` | Overflow menu row text / icon color | `--sc-kit--color--text--on-accent` |
+| `--sc-kit--player-button--menu--item--background--hover` | Overflow menu row hover background | `white` at 12% |
 -->
 
 <style>.desktop-controls {

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

@@ -1,16 +1,26 @@
-import type { PlayerButtonDef } from './types';
+import type { PlayerButtonDef, PlayerContextActionDef } from './types';
+import type { Placement } from '@floating-ui/dom';
 type Props = {
     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[];
+    /** Floating UI placement of the overflow menu panel @default 'left-end' */
+    contextPosition?: Placement;
+    /** Scale the icon on hover (desktop only) */
     scaleEffect?: boolean;
 };
 /**
  * Renders `PlayerButtons` on desktop and `MobilePlayerButtons` on mobile, switching via container query.
+ * Both branches stay mounted, so `contextActions` builds a menu in each; only the visible one is reachable.
  *
- * ### Props
- * | Prop | Type | Default | Description |
- * |---|---|---|---|
- * | `actions` | `PlayerButtonDef[]` | — | Array of button definitions |
- * | `scaleEffect` | `boolean` | `false` | Whether icons scale on hover (desktop only) |
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--player-button--color` | Button background at full opacity (desktop only — the mobile column paints no button background) | `black` at 95% |
+ * | `--sc-kit--player-button--color--inactive` | Button background at rest — the overflow menu panel takes the same value | 60% opacity of `--color` |
+ * | `--sc-kit--player-button--menu--border-color` | Overflow menu panel border | `white` at 15% |
+ * | `--sc-kit--player-button--menu--item--color` | Overflow menu row text / icon color | `--sc-kit--color--text--on-accent` |
+ * | `--sc-kit--player-button--menu--item--background--hover` | Overflow menu row hover background | `white` at 12% |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,4 +1,4 @@
 export { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
 export { default as PlayerButtons } from './cmp.player-buttons.svelte';
 export { default as ResponsivePlayerButtons } from './cmp.responsive-player-buttons.svelte';
-export type { PlayerButtonDef } from './types';
+export type { PlayerButtonDef, PlayerContextActionDef } from './types';

package/dist/ui/player/buttons/player-buttons-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class PlayerButtonsLocalization {
+    get moreActions(): string;
+}

package/dist/ui/player/buttons/player-buttons-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../../core/locale';
+const loc = {
+    moreActions: {
+        en: 'More actions',
+        no: 'Flere handlinger'
+    }
+};
+export class PlayerButtonsLocalization {
+    get moreActions() {
+        return loc.moreActions[AppLocale.current];
+    }
+}

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

@@ -0,0 +1,20 @@
+<script lang="ts">import { IconSlot } from '../../icon';
+import { IconText } from '../../icon-text';
+import { Popover, PopoverItem } from '../../popover';
+import { PlayerButtonsLocalization } from './player-buttons-localization';
+import IconMoreVertical from '@fluentui/svg-icons/icons/more_vertical_28_regular.svg?raw';
+let { actions, position = 'left-end' } = $props();
+const localization = new PlayerButtonsLocalization();
+</script>
+
+<Popover position={position} fixedPosition fillContainer aria-label={localization.moreActions}>
+  {#snippet trigger()}
+    <IconSlot icon={IconMoreVertical} />
+  {/snippet}
+
+  {#each actions as action (action.label)}
+    <PopoverItem disabled={action.disabled} on={{ click: action.callback }}>
+      <IconText icon={action.icon} size="sm">{action.label}</IconText>
+    </PopoverItem>
+  {/each}
+</Popover>

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

@@ -0,0 +1,9 @@
+import type { PlayerContextActionDef } from './types';
+import type { Placement } from '@floating-ui/dom';
+type Props = {
+    actions: PlayerContextActionDef[];
+    position?: Placement;
+};
+declare const PlayerContextMenu: import("svelte").Component<Props, {}, "">;
+type PlayerContextMenu = ReturnType<typeof PlayerContextMenu>;
+export default PlayerContextMenu;

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

@@ -4,3 +4,9 @@ export type PlayerButtonDef = {
     callback: () => void;
     disabled?: boolean;
 };
+export type PlayerContextActionDef = {
+    icon: IconProp;
+    label: string;
+    callback: () => void;
+    disabled?: boolean;
+};

package/package.json

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