@streamscloud/embeddable 15.0.0 → 15.0.2

package/dist/streams/streams-player/streams-player-view.svelte

@@ -1,14 +1,4 @@
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var _a;
-import { preloadImage } from '../../core/image-preloader';
+<script lang="ts">import { preloadImage } from '../../core/image-preloader';
 import { PostAttachments } from '../../posts/attachments';
 import { PostModel } from '../../posts/model';
 import { PostViewer } from '../../posts/post-viewer';
@@ -24,11 +14,12 @@ import { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
 import IconDelete from '@fluentui/svg-icons/icons/delete_32_regular.svg?raw';
 import IconEdit from '@fluentui/svg-icons/icons/edit_32_regular.svg?raw';
 import { untrack } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
 let { dataProvider, analyticsHandler, postSocialInteractionsHandler, sharingHandler, amplificationParameters, managementActions, playerSettings, closeOrchestrator, on } = $props();
-const localization = $derived(new StreamPlayerLocalization((_a = playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.locale) !== null && _a !== void 0 ? _a : 'en'));
+const localization = $derived(new StreamPlayerLocalization(playerSettings?.locale ?? 'en'));
 let currentStreamModel = $state(null);
-let mappedPostsCache = new Map();
-let activePageId = $derived.by(() => { var _a, _b; return (_b = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ''; });
+let mappedPostsCache = new SvelteMap();
+let activePageId = $derived.by(() => buffer?.current?.id ?? '');
 let buffer = $state(null);
 let totalEngagementTimeSeconds = 0;
 let inactiveTimeSeconds = 10; // // Mark as inactive after 10 seconds of no activity
@@ -40,7 +31,7 @@ const trackingParams = $derived.by(() => {
     return currentStreamModel
         ? {
             streamId: currentStreamModel.id,
-            campaignId: amplificationParameters === null || amplificationParameters === void 0 ? void 0 : amplificationParameters.campaignId
+            campaignId: amplificationParameters?.campaignId
         }
         : false;
 });
@@ -49,29 +40,27 @@ $effect(() => {
     untrack(() => {
         buffer = null;
         contentPlayerConfig.playerBuffer = null;
-        mappedPostsCache = new Map();
+        mappedPostsCache = new SvelteMap();
         initPlayerBuffer(dataProvider);
     });
     return () => { };
 });
 $effect(() => {
-    var _a;
-    const stream = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.activeChunk) === null || _a === void 0 ? void 0 : _a.model;
+    const stream = buffer?.activeChunk?.model;
     untrack(() => {
-        var _a;
         if (stream) {
             currentStreamModel = stream;
-            (_a = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _a === void 0 ? void 0 : _a.call(on, { id: stream.id, title: stream.title, image: stream.cover });
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamView(stream.id);
+            on?.streamActivated?.({ id: stream.id, title: stream.title, image: stream.cover });
+            analyticsHandler?.trackStreamView(stream.id);
             startActivityTracking();
         }
     });
     return () => {
         stopActivityTracking();
         if (currentStreamModel) {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamEngagementTime(currentStreamModel.id, totalEngagementTimeSeconds);
+            analyticsHandler?.trackStreamEngagementTime(currentStreamModel.id, totalEngagementTimeSeconds);
             let scrollDepth = Math.round(((maxPageIndexViewed + 1) / currentStreamModel.pagesCount) * 100);
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamScrollDepth(currentStreamModel.id, scrollDepth);
+            analyticsHandler?.trackStreamScrollDepth(currentStreamModel.id, scrollDepth);
         }
         totalEngagementTimeSeconds = 0;
         maxPageIndexViewed = 0;
@@ -81,11 +70,11 @@ const streamTrackingParams = $derived.by(() => {
     return currentStreamModel
         ? {
             streamId: currentStreamModel.id,
-            campaignId: amplificationParameters === null || amplificationParameters === void 0 ? void 0 : amplificationParameters.campaignId
+            campaignId: amplificationParameters?.campaignId
         }
         : false;
 });
-const initPlayerBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function* () {
+const initPlayerBuffer = async (dataProvider) => {
     let newBuffer;
     if (dataProvider.type === 'buffer') {
         newBuffer = dataProvider.buffer;
@@ -93,32 +82,32 @@ const initPlayerBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, fun
     else {
         newBuffer = new StreamsPlayerBuffer(dataProvider.provider);
     }
-    if (newBuffer.loaded.length && (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded)) {
+    if (newBuffer.loaded.length && on?.backgroundImageLoaded) {
         const coverUrl = newBuffer.loaded[0].cover;
         if (coverUrl) {
-            yield preloadImage(coverUrl);
+            await preloadImage(coverUrl);
         }
         on.backgroundImageLoaded(coverUrl);
     }
     buffer = newBuffer;
     contentPlayerConfig.playerBuffer = newBuffer;
-});
-const contentPlayerConfig = new PlayerConfig({
+};
+const contentPlayerConfig = untrack(() => new PlayerConfig({
     playerBuffer: null,
     settings: new PlayerSettings(playerSettings),
     closeOrchestrator,
     playerSliderCallbacks: {
         itemActivated: (item) => onPageActivated(item),
         itemDeactivated: (itemId) => executeWithStreamId((streamId) => {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.reportPageVideoViews(itemId, streamId);
+            analyticsHandler?.reportPageVideoViews(itemId, streamId);
         })
     }
-});
-const streamActionsGenerator = new StreamActionsGenerator({
+}));
+const streamActionsGenerator = untrack(() => new StreamActionsGenerator({
     postSocialInteractionsHandler,
     sharingHandler,
     on: { attachmentClicked: () => (contentPlayerConfig.uiManager.attachmentsCollapsed = !contentPlayerConfig.uiManager.attachmentsCollapsed) }
-});
+}));
 const itemAsPostModel = (item) => {
     if (item.type !== 'short-video' || !item.shortVideo) {
         return null;
@@ -137,18 +126,17 @@ const handleChangePage = (index) => {
     buffer.setActiveChunkItemIndex(index);
 };
 const onPageActivated = (id) => {
-    var _a, _b;
-    const activeChunk = buffer === null || buffer === void 0 ? void 0 : buffer.activeChunk;
+    const activeChunk = buffer?.activeChunk;
     if (!activeChunk) {
         return;
     }
     const page = activeChunk.items.find((x) => x.id === id);
-    (_a = on === null || on === void 0 ? void 0 : on.backgroundImageLoaded) === null || _a === void 0 ? void 0 : _a.call(on, (page === null || page === void 0 ? void 0 : page.cover) || null);
+    on?.backgroundImageLoaded?.(page?.cover || null);
     if (page) {
-        (_b = on === null || on === void 0 ? void 0 : on.streamPageActivated) === null || _b === void 0 ? void 0 : _b.call(on, { streamId: activeChunk.model.id, streamPageId: page.id });
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamPageView(id, activeChunk.model.id);
+        on?.streamPageActivated?.({ streamId: activeChunk.model.id, streamPageId: page.id });
+        analyticsHandler?.trackStreamPageView(id, activeChunk.model.id);
         if (page.type === 'short-video' && page.shortVideo) {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(page.shortVideo.id);
+            analyticsHandler?.trackShortVideoView(page.shortVideo.id);
         }
         const currentIndex = activeChunk.items.findIndex((p) => p.id === id);
         if (currentIndex > maxPageIndexViewed) {
@@ -160,32 +148,32 @@ const onShortVideoProgress = (pageId, videoId, progress) => {
     onProgress(pageId, videoId, progress);
 };
 const onShortVideoProductClick = (id, videoId) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(id, videoId);
+    analyticsHandler?.trackShortVideoProductClick(id, videoId);
     onStreamProductClick(id);
 };
 const onShortVideoProductImpression = (id, videoId) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(id, videoId);
+    analyticsHandler?.trackShortVideoProductImpression(id, videoId);
     onStreamProductImpression(id);
 };
 const onShortVideoAdClick = (id) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(id);
+    analyticsHandler?.trackAdClick(id);
 };
 const onShortVideoAdImpression = (id) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(id);
+    analyticsHandler?.trackAdImpression(id);
 };
 const onStreamProductClick = (productId) => {
     executeWithStreamId((streamId) => {
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductClicked(productId, streamId);
+        analyticsHandler?.trackStreamProductClicked(productId, streamId);
     });
 };
 const onStreamProductImpression = (productId) => {
     executeWithStreamId((streamId) => {
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductImpression(productId, streamId);
+        analyticsHandler?.trackStreamProductImpression(productId, streamId);
     });
 };
 const onProgress = (pageId, videoId, progress) => {
     executeWithStreamId((streamId) => {
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProgress(pageId, videoId, progress, streamId);
+        analyticsHandler?.trackShortVideoProgress(pageId, videoId, progress, streamId);
     });
 };
 const executeWithStreamId = (action) => {
@@ -195,7 +183,7 @@ const executeWithStreamId = (action) => {
     action(currentStreamModel.id);
 };
 const currentItemActions = $derived.by(() => {
-    if (!(buffer === null || buffer === void 0 ? void 0 : buffer.current) || !buffer.activeChunk) {
+    if (!buffer?.current || !buffer.activeChunk) {
         return [];
     }
     const result = [];
@@ -214,33 +202,32 @@ const currentItemActions = $derived.by(() => {
         });
         result.push(...handler.actions);
     }
-    if (managementActions === null || managementActions === void 0 ? void 0 : managementActions.editStream) {
+    if (managementActions?.editStream) {
         result.push({
             icon: IconEdit,
-            callback: () => __awaiter(void 0, void 0, void 0, function* () {
-                yield managementActions.editStream(buffer.activeChunk.model.id);
-            })
+            callback: async () => {
+                await managementActions.editStream(buffer.activeChunk.model.id);
+            }
         });
     }
-    if (managementActions === null || managementActions === void 0 ? void 0 : managementActions.deleteStreamPage) {
+    if (managementActions?.deleteStreamPage) {
         result.push({
             icon: IconDelete,
             iconColor: IconColor.Red,
-            callback: () => __awaiter(void 0, void 0, void 0, function* () {
-                yield managementActions.deleteStreamPage(buffer.current.id);
-            })
+            callback: async () => {
+                await managementActions.deleteStreamPage(buffer.current.id);
+            }
         });
     }
     return result;
 });
 const handlePageViewMounted = (node) => {
     const updatePosition = () => {
-        var _a;
         const progressElement = node.querySelector('[id^="chunk-progress-"]');
         if (!progressElement) {
             return;
         }
-        const overlayMinOffsetTop = (_a = playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.overlayMinOffsetTop) !== null && _a !== void 0 ? _a : 0;
+        const overlayMinOffsetTop = playerSettings?.overlayMinOffsetTop ?? 0;
         if (!overlayMinOffsetTop) {
             progressElement.style.top = '';
             return;

package/dist/ui/button/resources/button-theme.svelte

@@ -36,7 +36,6 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
 }
 .button-theme {
   display: contents;
-  /*Size*/
 }
 .button-theme--standard {
   --button--font--color: var(--sc-mc-color--text-primary);
@@ -46,12 +45,15 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
   --button--background--disabled: #f2f2f3;
   --button--border: 1px solid #e5e7eb;
 }
-:global([data-theme="dark"]) .button-theme--standard {
+:global([data-theme='dark']) .button-theme--standard {
   --button--background--hover: #1f2937;
   --button--background--active: #374151;
   --button--background--disabled: #374151;
   --button--border: 1px solid #4b5563;
 }
+.button-theme {
+  /*Size*/
+}
 .button-theme--size-standard {
   --button--height: 2em;
   --button--text--font-size: 0.75em;

package/dist/ui/dropdown/cmp.dropdown.svelte

@@ -6,8 +6,7 @@ import { createPopper } from '@popperjs/core';
 import { onDestroy } from 'svelte';
 let { position = 'bottom-start', disabled = false, keepDropdownOpen = false, fixedPosition = false, offset = 8, boundaryMargin = 8, on, children, trigger, isOpenRequested } = $props();
 $effect(() => {
-    var _a;
-    (_a = on === null || on === void 0 ? void 0 : on.mounted) === null || _a === void 0 ? void 0 : _a.call(on, {
+    on?.mounted?.({
         toggleOpen: (value) => {
             if (value === undefined) {
                 if (opened) {
@@ -30,16 +29,15 @@ $effect(() => {
 });
 let opened = $state(false);
 $effect(() => {
-    var _a, _b;
     if (opened) {
-        (_a = on === null || on === void 0 ? void 0 : on.opened) === null || _a === void 0 ? void 0 : _a.call(on);
+        on?.opened?.();
     }
     else {
-        (_b = on === null || on === void 0 ? void 0 : on.closed) === null || _b === void 0 ? void 0 : _b.call(on);
+        on?.closed?.();
     }
 });
 $effect(() => {
-    popper === null || popper === void 0 ? void 0 : popper.setOptions({ placement: position });
+    popper?.setOptions({ placement: position });
 });
 $effect(() => {
     if (isOpenRequested) {

package/dist/ui/icon/cmp.icon.svelte

@@ -73,7 +73,7 @@ let { src, color = null } = $props();
   stroke: var(--_icon--stroke-color, var(--_icon--color));
   stroke-width: var(--_icon--stroke-width);
 }
-:global([data-theme="dark"]) .icon :global(path) {
+:global([data-theme='dark']) .icon :global(path) {
   stroke: var(--_icon--stroke-color, var(--_icon--color));
   stroke-width: var(--_icon--stroke-width);
 }</style>

package/dist/ui/image/cmp.image.svelte

@@ -6,11 +6,11 @@ let hasError = $state(false);
 const imageState = $derived(calculateImageState(src, hasError, showStubOnError));
 const onLoad = () => {
     hasError = false;
-    on === null || on === void 0 ? void 0 : on.load(true);
+    on?.load(true);
 };
 const onLoadError = () => {
     hasError = true;
-    on === null || on === void 0 ? void 0 : on.load(false);
+    on?.load(false);
 };
 </script>
 

package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte

@@ -1,13 +1,4 @@
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { Loading } from '../loading';
+<script lang="ts">import { Loading } from '../loading';
 import { onDestroy, onMount } from 'svelte';
 let { loadMore, container = null, actuationOffset = '', children, loading } = $props();
 let isLoading = $state(false);
@@ -32,21 +23,21 @@ onMount(() => {
     resizeObserver.observe(itemsContainer);
 });
 onDestroy(() => {
-    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
-    intersectionObserver === null || intersectionObserver === void 0 ? void 0 : intersectionObserver.disconnect();
+    resizeObserver?.disconnect();
+    intersectionObserver?.disconnect();
 });
-const onLoadMore = () => __awaiter(void 0, void 0, void 0, function* () {
+const onLoadMore = async () => {
     if (isLoading) {
         return;
     }
     isLoading = true;
     try {
-        yield loadMore();
+        await loadMore();
     }
     finally {
         isLoading = false;
     }
-});
+};
 </script>
 
 <div class="infinite-scrolling">

package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte

@@ -2,7 +2,7 @@
 import { LineClampUtils } from './line-clamp-utils';
 import { onDestroy, onMount } from 'svelte';
 let { locale, enableShowMore = false, children } = $props();
-const localization = $derived(new LineClampLocalization(locale !== null && locale !== void 0 ? locale : 'en'));
+const localization = $derived(new LineClampLocalization(locale ?? 'en'));
 let parent;
 let element;
 let clampWrapperRef;
@@ -23,7 +23,7 @@ onMount(() => {
     }
 });
 onDestroy(() => {
-    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    resizeObserver?.disconnect();
     resizeObserver = null;
 });
 const clamp = () => {

package/dist/ui/media-item-view/cmp.media-item-view.svelte

@@ -5,7 +5,7 @@ import { ProportionalContainer } from '../proportional-container';
 import { Video } from '../video';
 let { media, ratio = 0, inert = false, on } = $props();
 const handleClick = (e) => {
-    if (on === null || on === void 0 ? void 0 : on.click) {
+    if (on?.click) {
         e.stopPropagation();
         on.click();
     }

package/dist/ui/media-items-gallery/cmp.media-items-gallery.svelte

@@ -1,34 +1,25 @@
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { MediaFormat } from '../../core/enums';
+<script lang="ts">import { MediaFormat } from '../../core/enums';
 import {} from '../../core/media';
 import { MediaItemView } from '../media-item-view';
 import { GalleryLayout } from './types';
 let { media, singleImageRatio = 0, inert = false, on } = $props();
 let layout = $state(null);
-const initLayout = () => __awaiter(void 0, void 0, void 0, function* () {
+const initLayout = async () => {
     if (!media.length || media.length === 1 || media.length > 4) {
         layout = null;
     }
     else {
-        layout = yield GalleryLayout.generate(media);
+        layout = await GalleryLayout.generate(media);
     }
-});
+};
 $effect(() => {
     initLayout();
 });
 const upperTwoImages = $derived(media.length > 4 ? media.slice(0, 2) : []);
 const bottomThreeImages = $derived(media.length > 4 ? media.slice(2, 5) : []);
 const handleGalleryItemClick = (index) => {
-    if (on === null || on === void 0 ? void 0 : on.click) {
-        on === null || on === void 0 ? void 0 : on.click(index);
+    if (on?.click) {
+        on?.click(index);
         return;
     }
     /*const toMediaViewerItemType = (type: MediaType) => {

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

@@ -47,7 +47,6 @@ const styles = $derived.by(() => {
   color: var(--sc-mc-color--text-white);
   --icon--color: var(--sc-mc-color--icon-overlay);
   --icon--size: 1.75rem;
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .player-button:hover:not(:disabled) {
   background-color: var(--_player-button--color);
@@ -64,6 +63,9 @@ const styles = $derived.by(() => {
   transform: scale(var(--_player-button--icon-scale));
   transition: 0.3s;
 }
+.player-button {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .player-button {
     padding: 0.5rem;

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

@@ -47,7 +47,6 @@ const styles = $derived.by(() => {
   background: var(--_player-buttons-group--background-color);
   padding: 0.4375rem 0.0625rem;
   pointer-events: auto;
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .player-buttons-group__action {
   --_player-action--icon-scale: 1;
@@ -73,6 +72,9 @@ const styles = $derived.by(() => {
   transform: scale(var(--_player-action--icon-scale));
   transition: 0.3s;
 }
+.player-buttons-group {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .player-buttons-group {
     border-radius: 0.9375rem;

package/dist/ui/player/close-orchestrator/close-orchestrator.svelte.js

@@ -1,3 +1,4 @@
+import { SvelteSet } from 'svelte/reactivity';
 export class CloseOrchestrator {
     closingInProgress = $state(false);
     closed = $state(false);
@@ -5,7 +6,7 @@ export class CloseOrchestrator {
     closeTriggerAttached = $state(false);
     _canClose;
     _closeFn;
-    _callbacks = new Set();
+    _callbacks = new SvelteSet();
     constructor(init) {
         this._closeFn = init.closeFn;
         this._canClose = init.canClose;

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

@@ -1,10 +1,9 @@
-<script lang="ts">import { handleEsc } from '../../../core/document.event-handlers';
+<script lang="ts" generics="T extends { id: string }">import { handleEsc } from '../../../core/document.event-handlers';
 import { Loading } from '../../loading';
 import { PlayerSlider } from '../slider';
 import { SwipeIndicator } from '../../swipe-indicator';
 import { default as ControlsAndAttachments } from './controls-and-attachments.svelte';
 import { default as OverviewPanel } from './overview-panel.svelte';
-import {} from 'svelte';
 let { config, itemActions, itemView, attachmentsView, overviewPanelContent } = $props();
 let everTouched = $state(false);
 let overviewPosition = $state({
@@ -12,7 +11,7 @@ let overviewPosition = $state({
     bottom: 0,
     right: 0
 });
-const uiManager = config.uiManager;
+const uiManager = $derived(config.uiManager);
 const handlePlayerMounted = (node) => {
     const markAsTouched = () => {
         everTouched = true;

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

@@ -1,6 +1,6 @@
 import type { PlayerButtonDef } from '../button';
 import type { PlayerConfig } from './player-config.svelte';
-import { type Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 declare class __sveltets_Render<T extends {
     id: string;
 }> {

package/dist/ui/player/player/controls-and-attachments.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { slideHorizontally } from '../../../core/transitions';
+<script lang="ts" generics="T extends { id: string }">import { slideHorizontally } from '../../../core/transitions';
 import { PlayerButton, ResponsivePlayerButtonsGroup } from '../button';
 import { PlayerConfig } from './player-config.svelte.js';
 import IconCalendarWeekNumbers from '@fluentui/svg-icons/icons/calendar_week_numbers_24_regular.svg?raw';
@@ -6,7 +6,7 @@ import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.s
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
 let { config, hasOverview, itemActions, attachmentsView } = $props();
-const uiManager = config.uiManager;
+const uiManager = $derived(config.uiManager);
 let closeButtonAreaHeight = $state(0);
 const allActions = $derived.by(() => {
     const actions = [...itemActions];

package/dist/ui/player/player/overview-panel.svelte

@@ -59,7 +59,6 @@ const styles = $derived.by(() => {
   z-index: 0;
   border-radius: 0.5rem 0 0 0.5rem;
   background: var(--_overview-panel--background);
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .overview-panel__content {
   width: 100%;
@@ -71,6 +70,9 @@ const styles = $derived.by(() => {
   overflow: hidden;
   container-type: inline-size;
 }
+.overview-panel {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .overview-panel {
     width: 100%;

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

@@ -1,13 +1,13 @@
-<script lang="ts">import { TouchSynchronizer } from '../utils';
+<script lang="ts" generics="T extends { id: string }">import { TouchSynchronizer } from '../utils';
 import { createWheelAdapter } from './wheel-gestures-adapter';
 import { onDestroy, onMount, untrack } from 'svelte';
 let { buffer, on, children } = $props();
 let slidesRef;
 let sliderHeight = $state(0);
 let swipeTransition = $state(0);
-let cssAnimationDuration = $state(buffer.animationDuration * 0.55);
+let cssAnimationDuration = $derived(buffer.animationDuration * 0.55);
 let resizeObserver;
-let sliderIndex = $state.raw(buffer.currentIndex);
+let sliderIndex = $state.raw(untrack(() => buffer.currentIndex));
 const actualTransition = $derived(-sliderHeight * sliderIndex);
 const onKeyPress = (e) => {
     if (e.key === 'ArrowUp' || e.key === 'PageUp') {
@@ -30,13 +30,12 @@ $effect(() => {
     sliderIndex = buffer.currentIndex;
 });
 const notifyOnItemChanged = () => {
-    var _a, _b, _c;
-    if (active && ((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== active.id) {
-        (_b = on === null || on === void 0 ? void 0 : on.itemDeactivated) === null || _b === void 0 ? void 0 : _b.call(on, active.id);
+    if (active && buffer.current?.id !== active.id) {
+        on?.itemDeactivated?.(active.id);
     }
     active = buffer.current;
     if (active) {
-        (_c = on === null || on === void 0 ? void 0 : on.itemActivated) === null || _c === void 0 ? void 0 : _c.call(on, active.id);
+        on?.itemActivated?.(active.id);
     }
 };
 onMount(() => {