@streamscloud/embeddable 15.0.0 → 15.0.2

package/dist/ads/ad-card/cmp.ad-card.svelte

@@ -1,17 +1,15 @@
-<script lang="ts">var _a;
-import { enrichAdLinkWithTracking } from '../../marketing-tracking';
+<script lang="ts">import { enrichAdLinkWithTracking } from '../../marketing-tracking';
 import { toPriceRepresentation } from '../../products/price-helper';
 import { Button, ButtonSize } from '../../ui/button';
 import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
 let { ad, colors, locale, trackingParams, inert = false, on } = $props();
 const trackImpression = (node) => {
-    if (on === null || on === void 0 ? void 0 : on.impression) {
+    if (on?.impression) {
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
-                var _a;
                 if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
-                    (_a = on.impression) === null || _a === void 0 ? void 0 : _a.call(on, ad.id);
+                    on.impression?.(ad.id);
                     observer.unobserve(entry.target);
                 }
             });
@@ -24,9 +22,9 @@ const trackImpression = (node) => {
         };
     }
 };
-const enrichedLink = $derived(((_a = ad.ctaButton) === null || _a === void 0 ? void 0 : _a.url) ? enrichAdLinkWithTracking({ link: ad.ctaButton.url, adId: ad.id, trackingParams }) : null);
+const enrichedLink = $derived(ad.ctaButton?.url ? enrichAdLinkWithTracking({ link: ad.ctaButton.url, adId: ad.id, trackingParams }) : null);
 const handleAdClick = () => {
-    if (on === null || on === void 0 ? void 0 : on.click) {
+    if (on?.click) {
         on.click(ad.id);
     }
     if (enrichedLink) {
@@ -35,10 +33,10 @@ const handleAdClick = () => {
 };
 const styles = $derived.by(() => {
     const values = [];
-    if (colors === null || colors === void 0 ? void 0 : colors.background) {
+    if (colors?.background) {
         values.push(`--ad-card--background-color: ${colors.background}`);
     }
-    if (colors === null || colors === void 0 ? void 0 : colors.price) {
+    if (colors?.price) {
         values.push(`--ad-card--price-color: ${colors.price}`);
     }
     return values.join(';');

package/dist/media-center/media-center/cmp.media-center-proxy.svelte

@@ -7,7 +7,7 @@ import { MediaCenterContext } from './media-center-context.svelte';
 import { default as MediaCenterView } from './media-center-view.svelte';
 import { untrack } from 'svelte';
 let { dataProvider, modeProps, settings, closeOrchestrator, dynamicActions } = $props();
-const context = new MediaCenterContext({
+const context = untrack(() => new MediaCenterContext({
     dataProvider,
     closeOrchestrator,
     settings,
@@ -43,12 +43,11 @@ const context = new MediaCenterContext({
             closeOrchestrator.requestClose();
         }
     }
-});
+}));
 $effect(() => {
-    void (settings === null || settings === void 0 ? void 0 : settings.theme);
+    void settings?.theme;
     untrack(() => {
-        var _a;
-        Theme.set((_a = settings === null || settings === void 0 ? void 0 : settings.theme) !== null && _a !== void 0 ? _a : 'dark');
+        Theme.set(settings?.theme ?? 'dark');
     });
 });
 </script>

package/dist/media-center/media-center/discover/community-features.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 { compactNumber } from '../../../core/utils/compact-number';
+<script lang="ts">import { compactNumber } from '../../../core/utils/compact-number';
 import { OptionsButton, ButtonSize, ButtonStyle, Button } from '../../../ui/button';
 import { CommunityFeaturesLocalization } from './community-features-localization';
 let { target, membershipHandler, locale } = $props();
@@ -22,41 +13,41 @@ $effect(() => {
         updateIsJoinedStore(membershipHandler);
     }
 });
-const updateIsJoinedStore = (membershipHandler) => __awaiter(void 0, void 0, void 0, function* () {
+const updateIsJoinedStore = async (membershipHandler) => {
     uiState = 'loading';
     try {
-        isJoinedStore = yield membershipHandler.getIsJoined();
+        isJoinedStore = await membershipHandler.getIsJoined();
     }
     finally {
         uiState = 'idle';
     }
-});
-const onLeaveMembershipClick = () => __awaiter(void 0, void 0, void 0, function* () {
+};
+const onLeaveMembershipClick = async () => {
     if (!membershipHandler) {
         return;
     }
     uiState = 'submitting';
     try {
-        yield membershipHandler.leave();
-        yield updateIsJoinedStore(membershipHandler);
+        await membershipHandler.leave();
+        await updateIsJoinedStore(membershipHandler);
     }
     finally {
         uiState = 'idle';
     }
-});
-const onJoinMembershipClick = () => __awaiter(void 0, void 0, void 0, function* () {
+};
+const onJoinMembershipClick = async () => {
     if (!membershipHandler) {
         return;
     }
     uiState = 'submitting';
     try {
-        yield membershipHandler.join();
-        yield updateIsJoinedStore(membershipHandler);
+        await membershipHandler.join();
+        await updateIsJoinedStore(membershipHandler);
     }
     finally {
         uiState = 'idle';
     }
-});
+};
 </script>
 
 {#if target.communityFeatures && (target.communityFeatures.membersCount > 0 || membershipHandler)}

package/dist/media-center/media-center/discover/discover-view.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 { getPostCoverImage } from '../../../posts/model';
+<script lang="ts">import { getPostCoverImage } from '../../../posts/model';
 import { ShortVideoCard } from '../../../short-videos/short-video-card';
 import { StreamCard } from '../../../streams/stream-card';
 import { cardActionContainer, CardActions } from '../../../ui/card-actions';
@@ -25,20 +16,18 @@ const generateShortVideoActions = (id) => {
     if (context.contentManagementHandler.editPost) {
         actions.push({
             icon: IconEdit,
-            callback: () => __awaiter(void 0, void 0, void 0, function* () {
-                var _a, _b;
-                (_b = (_a = context.contentManagementHandler).editPost) === null || _b === void 0 ? void 0 : _b.call(_a, id);
-            })
+            callback: async () => {
+                context.contentManagementHandler.editPost?.(id);
+            }
         });
     }
     if (context.contentManagementHandler.deletePost) {
         actions.push({
             icon: IconDelete,
             iconColor: IconColor.Red,
-            callback: () => __awaiter(void 0, void 0, void 0, function* () {
-                var _a, _b;
-                (_b = (_a = context.contentManagementHandler).deletePost) === null || _b === void 0 ? void 0 : _b.call(_a, id);
-            })
+            callback: async () => {
+                context.contentManagementHandler.deletePost?.(id);
+            }
         });
     }
     return actions;
@@ -49,8 +38,7 @@ const genereateStreamActions = (id) => {
         actions.push({
             icon: IconEdit,
             callback: () => {
-                var _a, _b;
-                (_b = (_a = context.contentManagementHandler).editStream) === null || _b === void 0 ? void 0 : _b.call(_a, id);
+                context.contentManagementHandler.editStream?.(id);
             }
         });
     }
@@ -58,10 +46,9 @@ const genereateStreamActions = (id) => {
         actions.push({
             icon: IconDelete,
             iconColor: IconColor.Red,
-            callback: () => __awaiter(void 0, void 0, void 0, function* () {
-                var _a, _b;
-                (_b = (_a = context.contentManagementHandler).deleteStream) === null || _b === void 0 ? void 0 : _b.call(_a, id);
-            })
+            callback: async () => {
+                context.contentManagementHandler.deleteStream?.(id);
+            }
         });
     }
     return actions;
@@ -146,7 +133,6 @@ const genereateStreamActions = (id) => {
   overflow-y: auto;
   --_cross-browser-scrollbar--thumb-color: transparent;
   --_cross-browser-scrollbar--track-color: transparent;
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .media-center-discover:hover {
   --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
@@ -170,6 +156,9 @@ const genereateStreamActions = (id) => {
     scrollbar-width: thin;
   }
 }
+.media-center-discover {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .media-center-discover {
     padding-inline: 0.9375rem;
@@ -181,19 +170,23 @@ const genereateStreamActions = (id) => {
   margin: 0 auto;
   padding-bottom: 1.25rem;
   /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 992px) {
   .media-center-discover__content {
     padding-bottom: 1rem;
   }
 }
+.media-center-discover__content {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 768px) {
   .media-center-discover__content {
     padding-bottom: 0.8125rem;
   }
 }
+.media-center-discover__content {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .media-center-discover__content {
     padding-bottom: 0.625rem;
@@ -204,19 +197,23 @@ const genereateStreamActions = (id) => {
   flex-direction: column;
   gap: 3rem;
   /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 992px) {
   .media-center-discover__feed {
     gap: 2.5rem;
   }
 }
+.media-center-discover__feed {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 768px) {
   .media-center-discover__feed {
     gap: 2rem;
   }
 }
+.media-center-discover__feed {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .media-center-discover__feed {
     gap: 1.5rem;
@@ -253,13 +250,13 @@ const genereateStreamActions = (id) => {
 .media-center-discover__section-content--4 {
   gap: 1.25rem;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
   display: var(--_section-content--more-items--display);
 }
+.media-center-discover__section-content--4 {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 992px) {
   .media-center-discover__section-content--4 {
     gap: 1rem;
@@ -269,6 +266,9 @@ const genereateStreamActions = (id) => {
     display: var(--_section-content--more-items--display);
   }
 }
+.media-center-discover__section-content--4 {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 768px) {
   .media-center-discover__section-content--4 {
     gap: 0.75rem;
@@ -281,6 +281,9 @@ const genereateStreamActions = (id) => {
     display: var(--_section-content--more-items--display);
   }
 }
+.media-center-discover__section-content--4 {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .media-center-discover__section-content--4 {
     gap: 0.625rem;
@@ -289,13 +292,13 @@ const genereateStreamActions = (id) => {
 .media-center-discover__section-content--5 {
   gap: 1.875rem;
   grid-template-columns: repeat(5, minmax(0, 1fr));
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .media-center-discover__section-content--5 :global(> :nth-child(n + 6)) {
   display: var(--_section-content--more-items--display);
 }
+.media-center-discover__section-content--5 {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 992px) {
   .media-center-discover__section-content--5 {
     gap: 1.5rem;
@@ -305,6 +308,9 @@ const genereateStreamActions = (id) => {
     display: var(--_section-content--more-items--display);
   }
 }
+.media-center-discover__section-content--5 {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 768px) {
   .media-center-discover__section-content--5 {
     gap: 1.125rem;
@@ -314,6 +320,9 @@ const genereateStreamActions = (id) => {
     display: var(--_section-content--more-items--display);
   }
 }
+.media-center-discover__section-content--5 {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .media-center-discover__section-content--5 {
     gap: 0.9375rem;

package/dist/media-center/media-center/handlers/categories-handler.svelte.js

@@ -1,8 +1,9 @@
+import { SvelteMap } from 'svelte/reactivity';
 export class CategoriesHandler {
     dataProvider;
     _allCateogories = $derived.by(() => this.dataProvider.model?.contentCategories ?? []);
     _tagAssociations = $derived.by(() => {
-        const newTagAssociations = new Map();
+        const newTagAssociations = new SvelteMap();
         if (this.dataProvider.model?.categoryTagAssociations) {
             for (const assoc of this.dataProvider.model.categoryTagAssociations) {
                 if (assoc.tag) {

package/dist/media-center/media-center/header/media-center-header-mobile.svelte

@@ -6,15 +6,13 @@ let { context, locale = 'en', on } = $props();
 const localization = $derived(new MediaCenterHeaderLocalization(locale));
 const headerMounted = (node) => {
     const heightResizeObserver = new ResizeObserver(() => {
-        var _a;
         const headerHeight = node.clientHeight;
-        (_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, headerHeight);
+        on?.headerHeightChanged?.(headerHeight);
     });
     heightResizeObserver.observe(node);
     return {
         destroy: () => {
-            var _a;
-            (_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, 0);
+            on?.headerHeightChanged?.(0);
             heightResizeObserver.disconnect();
         }
     };

package/dist/media-center/media-center/header/media-center-header.svelte

@@ -19,16 +19,14 @@ let scrollAreaRef = $state(null);
 const headerMounted = (node) => {
     headerRef = node;
     const heightResizeObserver = new ResizeObserver(() => {
-        var _a;
         const headerHeight = node.clientHeight;
-        (_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, headerHeight);
+        on?.headerHeightChanged?.(headerHeight);
         calcHeaderGridProportions();
     });
     heightResizeObserver.observe(node);
     return {
         destroy: () => {
-            var _a;
-            (_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, 0);
+            on?.headerHeightChanged?.(0);
             heightResizeObserver.disconnect();
         }
     };
@@ -95,10 +93,10 @@ const onScrollMounted = (node) => {
     const scrollResizeObserver = new ResizeObserver(() => {
         updateScrollShadows(node);
     });
-    scrollResizeObserver === null || scrollResizeObserver === void 0 ? void 0 : scrollResizeObserver.observe(node);
+    scrollResizeObserver?.observe(node);
     return {
         destroy: () => {
-            scrollResizeObserver === null || scrollResizeObserver === void 0 ? void 0 : scrollResizeObserver.disconnect();
+            scrollResizeObserver?.disconnect();
         }
     };
 };

package/dist/media-center/media-center/media-center-context.svelte.js

@@ -7,6 +7,7 @@ import { PostsFeedHandler } from './posts-feed';
 import { StreamsFeedHandler } from './streams-feed';
 import { StreamsInCategoryPanelHandler } from './streams-in-category';
 import { untrack } from 'svelte';
+import { SvelteSet } from 'svelte/reactivity';
 export class MediaCenterContext {
     initializing = $state(true);
     initialized = $state(false);
@@ -217,7 +218,7 @@ export class MediaCenterContext {
     };
     deactivateAllBut = (...params) => {
         this.hideMenu();
-        const keep = new Set(params);
+        const keep = new SvelteSet(params);
         if (!keep.has('moments')) {
             this.momentsFeedHandler.deactivate();
         }

package/dist/media-center/media-center/media-center-view.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 { Utils } from '../../core/utils';
+<script lang="ts">import { Utils } from '../../core/utils';
 import { default as PostsPlayerView } from '../../posts/posts-player/posts-player-view.svelte';
 import { default as StreamsPlayerView } from '../../streams/streams-player/streams-player-view.svelte';
 import { Loading } from '../../ui/loading';
@@ -21,7 +12,7 @@ import { fade } from 'svelte/transition';
 let { context, dynamicActions } = $props();
 let headerHeight = $state(0);
 let isMobileView = $state(false);
-const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, function* () {
+const selectCategory = async (categoryId) => {
     if (!context.mediaCenterMode) {
         return;
     }
@@ -44,7 +35,7 @@ const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, functio
         default:
             Utils.assertUnreachable(context.mediaCenterMode);
     }
-});
+};
 const resetMediaCenterMode = () => {
     if (!context.mediaCenterMode) {
         return;
@@ -80,10 +71,10 @@ const onWidthAnchorMounted = (node) => {
     const resizeObserver = new ResizeObserver(() => {
         isMobileView = node.clientWidth <= 576;
     });
-    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(node);
+    resizeObserver?.observe(node);
     return {
         destroy: () => {
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+            resizeObserver?.disconnect();
         }
     };
 };

package/dist/media-center/media-center/menu/category-following-wrapper.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 { Icon } from '../../../ui/icon';
+<script lang="ts">import { Icon } from '../../../ui/icon';
 import IconStarFilled from '@fluentui/svg-icons/icons/star_20_filled.svg?raw';
 import IconStar from '@fluentui/svg-icons/icons/star_20_regular.svg?raw';
 import { onMount } from 'svelte';
@@ -17,19 +8,19 @@ let isFollowedStore = $state.raw({
         return false;
     }
 });
-onMount(() => __awaiter(void 0, void 0, void 0, function* () {
+onMount(async () => {
     if (!followingHandler) {
         return;
     }
-    isFollowedStore = yield followingHandler.getIsFollowed(categoryId);
-}));
-const handleToggleFollow = (e) => __awaiter(void 0, void 0, void 0, function* () {
+    isFollowedStore = await followingHandler.getIsFollowed(categoryId);
+});
+const handleToggleFollow = async (e) => {
     e.stopPropagation();
     if (!followingHandler) {
         return;
     }
-    yield followingHandler.toggleFollow(categoryId);
-});
+    await followingHandler.toggleFollow(categoryId);
+};
 </script>
 
 <!--Disabled following logic. for future references-->

package/dist/media-center/media-center/menu/menu.svelte

@@ -241,14 +241,16 @@ const styles = $derived.by(() => {
   display: flex;
   -webkit-user-drag: none;
   user-select: none;
+}
+.menu-item :global([contenteditable]) {
+  user-select: text;
+}
+.menu-item {
   height: 2.25rem;
   padding-left: var(--_media-center-menu--items--padding-inline);
   --_menu-item--text--font-size: 0.9375rem;
   --_menu-item--image--size: 1.5rem;
 }
-.menu-item :global([contenteditable]) {
-  user-select: text;
-}
 .menu-item--active {
   background-color: hsl(from var(--_media-center-menu--background-color) h s calc(l + 5)/alpha);
   border-radius: 0.25rem;

package/dist/media-center/media-center/moments/cmp.moments-circle.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { ImageRound } from '../../../ui/image';
 let { context } = $props();
-const handler = context.momentsFeedHandler;
+const handler = $derived(context.momentsFeedHandler);
 const styles = $derived.by(() => {
     const values = [];
     if (context.mediaCenterColors.brand) {

package/dist/media-center/media-center/moments/moments-state.svelte.js

@@ -1,5 +1,6 @@
 import { PostType } from '../../../core/enums';
 import {} from '../../../posts/posts-player';
+import { SvelteMap } from 'svelte/reactivity';
 export class MomentsState {
     dataProvider;
     momentsSeenLocally = $state.raw([]);
@@ -51,7 +52,7 @@ export class MomentsState {
             }
         }
         const ids = sortedMoments.map((m) => m.id);
-        const idOrder = new Map();
+        const idOrder = new SvelteMap();
         ids.forEach((id, idx) => idOrder.set(id, idx));
         const chunksCount = Math.ceil(sortedMoments.length / collectionCapacity);
         const prefetchedChunks = [];

package/dist/media-center/media-center/streams-in-category/streams-in-category-panel.svelte

@@ -80,19 +80,23 @@ let { handler, on } = $props();
   gap: 2rem 1.25rem;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 992px) {
   .streams-in-category__section-content {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
+.streams-in-category__section-content {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 768px) {
   .streams-in-category__section-content {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
+.streams-in-category__section-content {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .streams-in-category__section-content {
     grid-template-columns: repeat(2, minmax(0, 1fr));

package/dist/media-page/cmp.media-page.svelte

@@ -1,19 +1,10 @@
-<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 { MediaCenterProxy } from '../media-center/media-center';
+<script lang="ts">import { MediaCenterProxy } from '../media-center/media-center';
 import { MediaCenterSettings } from '../media-center/media-center/media-center-settings.svelte';
 import { CloseOrchestrator } from '../ui/player/close-orchestrator';
 import { createShadowRoot } from '../ui/shadow-dom';
-import { mount, unmount } from 'svelte';
+import { mount, unmount, untrack } from 'svelte';
 let { dataProvider, settings, dynamicActions } = $props();
-const settingsHolder = new MediaCenterSettings(settings);
+const settingsHolder = untrack(() => new MediaCenterSettings(settings));
 $effect(() => {
     settingsHolder.update(settings);
 });
@@ -27,9 +18,9 @@ const initHost = (node) => {
             modeProps: { mode: 'default' },
             dynamicActions,
             closeOrchestrator: new CloseOrchestrator({
-                closeFn: () => __awaiter(void 0, void 0, void 0, function* () {
-                    yield unmount(mounted);
-                }),
+                closeFn: async () => {
+                    await unmount(mounted);
+                },
                 canClose: false
             })
         }

package/dist/posts/controls/post-actions-generator.svelte.js

@@ -1,9 +1,10 @@
 import { PostActionsHandler } from './post-actions-handler.svelte';
+import { SvelteMap } from 'svelte/reactivity';
 export class PostActionsGenerator {
     socialInteractionsHandler;
     sharingHandler;
     callbacks;
-    handlers = new Map();
+    handlers = new SvelteMap();
     constructor(init) {
         this.socialInteractionsHandler = init.socialInteractionsHandler ?? null;
         this.sharingHandler = init.sharingHandler ?? null;