@streamscloud/embeddable 15.0.0-rc.0 → 15.0.0-rc.2

package/dist/streams/layout/element-views/cmp.stock-stream-element.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">var _a;
 import { StockStreamElementLocalization } from './stock-stream-element-localization';
 import { StockStreamElementLevel } from '../enums';
-import { mapFlexJustifyContent, transformNumericValue } from '../styles-transformer';
+import { mapFlexJustifyContent, transformNumericValue, transformTextColorValue } from '../styles-transformer';
 let { model, heightOverrideDdu, locale } = $props();
 const localization = $derived(new StockStreamElementLocalization(locale));
 const height = $derived(heightOverrideDdu || ((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 16);
@@ -19,7 +19,8 @@ const dotCustomStyles = $derived.by(() => {
     return values.join('');
 });
 const quantityCustomStyles = $derived.by(() => {
-    const values = [`font-size: ${transformNumericValue(height * 0.75)};`];
+    var _a;
+    const values = [`font-size: ${transformNumericValue(height * 0.75)};`, `color: ${transformTextColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.color)};`];
     return values.join('');
 });
 </script>

package/dist/streams/layout/element-views/price-element-view.svelte

@@ -12,7 +12,7 @@ import { toPriceRepresentation } from '../../../products/price-helper';
 import { LineClamp } from '../../../ui/line-clamp';
 import { PriceStreamElementLocalization } from './price-stream-element-localization';
 import { default as StockElementView } from './cmp.stock-stream-element.svelte';
-import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
+import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformTextColorValue, transformBackgroundColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
 let { maxElementHeight, model, data, localization, on } = $props();
 let priceElementRef = $state.raw(null);
 let priceContainerRef = $state.raw(null);
@@ -62,7 +62,7 @@ const priceCustomStyles = $derived.by(() => {
         `font-size: ${transformFontSizeValue(priceHeight / lineHeight)};`,
         `line-height: ${lineHeight};`,
         `font-weight: ${mapFontWeight((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontWeight)};`,
-        `color: ${transformColorValue(data.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
+        `color: ${transformTextColorValue(data.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
     ];
     return values.join('');
 });
@@ -74,8 +74,8 @@ const saveValueCustomStyles = $derived.by(() => {
         `font-weight: 500;`,
         `padding: ${transformNumericValue(priceHeight / 8)} ${transformNumericValue(priceHeight / 4)};`,
         `border-radius: ${transformNumericValue(priceHeight / 8)};`,
-        `background-color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.saveValueBackgroundColor)};`,
-        `color: ${transformColorValue((_b = model.styles) === null || _b === void 0 ? void 0 : _b.saveValueColor)};`
+        `background-color: ${transformBackgroundColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.saveValueBackgroundColor)};`,
+        `color: ${transformTextColorValue((_b = model.styles) === null || _b === void 0 ? void 0 : _b.saveValueColor)};`
     ];
     return values.join('');
 });
@@ -84,7 +84,7 @@ const beforeValueCustomStyles = $derived.by(() => {
     const values = [
         `font-size: ${transformFontSizeValue(priceHeight / 5)};`,
         `font-weight: 500;`,
-        `color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`
+        `color: ${transformTextColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`
     ];
     return values.join('');
 });

package/dist/streams/layout/styles-transformer.d.ts

@@ -13,4 +13,5 @@ export declare const mapTextAlign: (value: StreamElementStyleHorizontalAlign | n
 export declare const mapFlexJustifyContent: (value: StreamElementStyleHorizontalAlign | null | undefined) => "center" | "flex-start" | "flex-end";
 export declare const transformFontSizeValue: (value: number | null | undefined) => string;
 export declare const transformNumericValue: (value: number | null | undefined, fallback?: string) => string;
-export declare const transformColorValue: (value: string | null | undefined) => string;
+export declare const transformTextColorValue: (value: string | null | undefined) => string;
+export declare const transformBackgroundColorValue: (value: string | null | undefined) => string;

package/dist/streams/layout/styles-transformer.js

@@ -4,7 +4,7 @@ export const generateStreamLayoutStyles = (styles) => {
     if (!styles) {
         return '';
     }
-    const values = [`background-color: ${transformColorValue(styles.backgroundColor)}`, `font-family: ${mapFontFamily(styles.fontFamily)}`];
+    const values = [`background-color: ${transformBackgroundColorValue(styles.backgroundColor)}`, `font-family: ${mapFontFamily(styles.fontFamily)}`];
     return values.join(';');
 };
 export const generateContainerStyles = (styles) => {
@@ -20,10 +20,10 @@ export const generateContainerStyles = (styles) => {
         `padding-right: ${transformNumericValue(styles.paddingRight)}`,
         `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
         `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
-        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `background-color: ${transformBackgroundColorValue(styles.backgroundColor)}`,
         `border-width: ${styles.borderColor ? '1px' : '0'}`,
         `border-radius: ${transformNumericValue(styles.borderRadius)}`,
-        `border-color: ${transformColorValue(styles.borderColor)}`,
+        `border-color: ${transformBackgroundColorValue(styles.borderColor)}`,
         `overflow: ${styles.borderRadius ? 'hidden' : 'visible'}`
     ];
     if (styles.direction) {
@@ -49,11 +49,11 @@ export const generateButtonStyles = (styles) => {
         `padding-right: ${transformNumericValue(styles.paddingRight)}`,
         `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
         `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
-        `color: ${transformColorValue(styles.textColor)}`,
-        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `color: ${transformTextColorValue(styles.textColor)}`,
+        `background-color: ${transformBackgroundColorValue(styles.backgroundColor)}`,
         `border-width: ${styles.borderColor ? '1px' : '0'}`,
         `border-radius: ${transformNumericValue(styles.borderRadius)}`,
-        `border-color: ${transformColorValue(styles.borderColor)}`,
+        `border-color: ${transformBackgroundColorValue(styles.borderColor)}`,
         `overflow: hidden`
     ];
     return values.join(';');
@@ -94,7 +94,7 @@ export const generateProductsSliderStyles = (styles) => {
         `padding-right: ${transformNumericValue(styles.paddingRight)}`,
         `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
         `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
-        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `background-color: ${transformBackgroundColorValue(styles.backgroundColor)}`,
         `overflow-x: auto`,
         `overflow-y: hidden`,
         `scrollbar-width: none`,
@@ -111,7 +111,7 @@ export const generateTextStyles = (styles) => {
         `font-weight: ${mapFontWeight(styles.fontWeight)}`,
         `line-height: ${transformNumericValue(styles.lineHeight, '1.2')}`,
         `text-align: ${mapTextAlign(styles.textAlign)}`,
-        `color: ${transformColorValue(styles.color)}`
+        `color: ${transformTextColorValue(styles.color)}`
     ];
     return values.join(';');
 };
@@ -203,7 +203,13 @@ export const transformNumericValue = (value, fallback = '0') => {
     }
     return `${(value / baseContainerWidth) * 100}cqi`;
 };
-export const transformColorValue = (value) => {
+export const transformTextColorValue = (value) => {
+    if (value === null || value === undefined) {
+        return '#000000';
+    }
+    return value;
+};
+export const transformBackgroundColorValue = (value) => {
     if (value === null || value === undefined) {
         return 'transparent';
     }

package/dist/streams/layout/styles.d.ts

@@ -66,6 +66,7 @@ export type ProductsSliderStreamElementStyles = {
 export type StockStreamElementStyles = {
     height?: number | null;
     horizontalAlign?: StreamElementStyleHorizontalAlign | null;
+    color?: string | null;
 };
 export type TextStreamElementStyles = {
     fontSize?: number | null;

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
 import { ResponsivePlayerButtonsGroup } from '../../ui/player/button';
 import { StreamPageViewerLocalization } from './stream-page-viewer-localization';
-let { page, trackingParams, overlayControls, locale, on } = $props();
+let { page, trackingParams, overlayControls, locale, on, overlay } = $props();
 const localization = $derived(new StreamPageViewerLocalization(locale));
 </script>
 
 {#if page.type === 'general'}
-  <StreamPageLayout model={page.layout}>
+  <StreamPageLayout model={page.layout} overlay={overlay}>
     {#each page.layout.slots as slot (slot)}
       <StreamLayoutSlot model={slot}>
         <StreamLayoutSlotContent model={slot} trackingParams={trackingParams} on={on} locale={localization.elementsLocale} />

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Locale } from '../../core/locale';
 import { type StreamTrackingParams } from '../layout';
 import { type PlayerButtonDef } from '../../ui/player/button';
 import type { StreamPageViewerModel } from './types';
+import type { Snippet } from 'svelte';
 type Props = {
     page: StreamPageViewerModel;
     trackingParams: StreamTrackingParams;
@@ -19,6 +20,7 @@ type Props = {
         productImpression?: (productId: string) => void;
         progress?: (videoId: string, progress: number) => void;
     };
+    overlay?: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -17,6 +17,7 @@ import { mapToPostModel } from '../layout/models';
 import { StreamPageViewer } from '../stream-page-viewer';
 import { IconColor } from '../../ui/icon';
 import { Player, PlayerConfig, PlayerSettings } from '../../ui/player';
+import { ChunksProgress } from '../../ui/player/progress';
 import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
@@ -232,6 +233,49 @@ const currentItemActions = $derived.by(() => {
     }
     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;
+        if (!overlayMinOffsetTop) {
+            progressElement.style.top = '';
+            return;
+        }
+        const contentElement = node.firstElementChild;
+        if (!contentElement) {
+            progressElement.style.top = '';
+            return;
+        }
+        const nodeRect = node.getBoundingClientRect();
+        const contentRect = contentElement.getBoundingClientRect();
+        const contentOffsetTop = contentRect.top - nodeRect.top;
+        if (contentOffsetTop <= 0) {
+            progressElement.style.top = `${overlayMinOffsetTop}px`;
+            return;
+        }
+        const overlayOverlap = overlayMinOffsetTop - contentOffsetTop;
+        if (overlayOverlap > 0) {
+            progressElement.style.top = `${overlayOverlap}px`;
+        }
+        else {
+            progressElement.style.top = '';
+        }
+    };
+    updatePosition();
+    const resizeObserver = new ResizeObserver(() => {
+        updatePosition();
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.disconnect();
+        }
+    };
+};
 //#region Activity Tracking
 const resetInactivityTimer = () => {
     if (!isActive) {
@@ -297,59 +341,82 @@ const stopActivityTracking = () => {
       }} />
   {/if}
 {/snippet}
+{#snippet overlay()}
+  {#if buffer?.activeChunk && buffer.activeChunk.chunkItems.length > 1}
+    <div class="stream-progress" id="chunk-progress-{buffer.activeChunk.model.id}">
+      {#snippet info()}
+        <div class="stream-progress-info">
+          <div class="stream-progress-info__title">
+            {buffer?.activeChunk.model.title}
+          </div>
+          {#if buffer?.activeChunk.model.subTitle}
+            <div class="stream-progress-info__sub-title">
+              {buffer.activeChunk.model.subTitle}
+            </div>
+          {/if}
+        </div>
+      {/snippet}
+      <ChunksProgress totalItems={buffer.activeChunk.model.pagesCount} activeItemIndex={buffer.activeChunk.activeItemIndex} chunkInfo={info} />
+    </div>
+  {/if}
+{/snippet}
 <Player
   config={contentPlayerConfig}
   itemActions={currentItemActions}
   attachmentsView={buffer?.current && itemAsPostModel(buffer.current)?.attachments ? attachmentsView : undefined}>
   {#snippet itemView({ item })}
-    {#if item.type === 'general'}
-      <StreamPageViewer
-        page={item}
-        trackingParams={streamTrackingParams}
-        locale={localization.locale}
-        overlayControls={{
-          enabled: contentPlayerConfig.uiManager.showControlsOverlay,
-          colors: {
-            active: contentPlayerConfig.playerColors.button,
-            inactive: contentPlayerConfig.playerColors.buttonInactive
-          },
-          actions: buffer?.activeChunk
-            ? streamActionsGenerator.getGeneralStreamPageActions({ streamId: buffer.activeChunk.model.id, streamPageId: item.id })
-            : []
-        }}
-        on={{
-          progress: (videoId, progress) => onProgress(item.id, videoId, progress),
-          productClick: (productId) => onStreamProductClick(productId),
-          productImpression: (productId) => onStreamProductImpression(productId)
-        }} />
-    {:else}
-      {@const postModel = itemAsPostModel(item)}
-      {#if postModel}
-        {@const handler = buffer?.activeChunk
-          ? streamActionsGenerator.getPostActionsHandler({
-              model: postModel,
-              streamId: buffer.activeChunk.model.id,
-              streamPageId: item.id
-            })
-          : null}
-        <PostViewer
-          model={postModel}
-          controlsColors={{ active: contentPlayerConfig.playerColors.button, inactive: contentPlayerConfig.playerColors.buttonInactive }}
-          trackingParams={trackingParams}
-          enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
-          enableControls={contentPlayerConfig.uiManager.showControlsOverlay}
-          controlActions={handler?.actions ?? []}
-          autoplay="on-appearance"
-          locale={contentPlayerConfig.settings.locale}
+    <div class="page-view" use:handlePageViewMounted>
+      {#if item.type === 'general'}
+        <StreamPageViewer
+          page={item}
+          trackingParams={streamTrackingParams}
+          locale={localization.locale}
+          overlayControls={{
+            enabled: contentPlayerConfig.uiManager.showControlsOverlay,
+            colors: {
+              active: contentPlayerConfig.playerColors.button,
+              inactive: contentPlayerConfig.playerColors.buttonInactive
+            },
+            actions: buffer?.activeChunk
+              ? streamActionsGenerator.getGeneralStreamPageActions({ streamId: buffer.activeChunk.model.id, streamPageId: item.id })
+              : []
+          }}
           on={{
-            progress: (progress) => onShortVideoProgress(item.id, postModel.id, progress),
-            productClick: (productId) => onShortVideoProductClick(productId, postModel.id),
-            productImpression: (productId) => onShortVideoProductImpression(productId, postModel.id),
-            adClick: (adId) => onShortVideoAdClick(adId),
-            adImpression: (adId) => onShortVideoAdImpression(adId)
-          }} />
+            progress: (videoId, progress) => onProgress(item.id, videoId, progress),
+            productClick: (productId) => onStreamProductClick(productId),
+            productImpression: (productId) => onStreamProductImpression(productId)
+          }}
+          overlay={overlay} />
+      {:else}
+        {@const postModel = itemAsPostModel(item)}
+        {#if postModel}
+          {@const handler = buffer?.activeChunk
+            ? streamActionsGenerator.getPostActionsHandler({
+                model: postModel,
+                streamId: buffer.activeChunk.model.id,
+                streamPageId: item.id
+              })
+            : null}
+          <PostViewer
+            model={postModel}
+            controlsColors={{ active: contentPlayerConfig.playerColors.button, inactive: contentPlayerConfig.playerColors.buttonInactive }}
+            trackingParams={trackingParams}
+            enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
+            enableControls={contentPlayerConfig.uiManager.showControlsOverlay}
+            controlActions={handler?.actions ?? []}
+            autoplay="on-appearance"
+            locale={contentPlayerConfig.settings.locale}
+            on={{
+              progress: (progress) => onShortVideoProgress(item.id, postModel.id, progress),
+              productClick: (productId) => onShortVideoProductClick(productId, postModel.id),
+              productImpression: (productId) => onShortVideoProductImpression(productId, postModel.id),
+              adClick: (adId) => onShortVideoAdClick(adId),
+              adImpression: (adId) => onShortVideoAdImpression(adId)
+            }}
+            overlay={overlay} />
+        {/if}
       {/if}
-    {/if}
+    </div>
   {/snippet}
   {#snippet overviewPanelContent()}
     {#if buffer}
@@ -362,3 +429,53 @@ const stopActivityTracking = () => {
     {/if}
   {/snippet}
 </Player>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.page-view {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.stream-progress {
+  position: absolute;
+  top: 0.75rem;
+  left: 1rem;
+  right: 1rem;
+}
+
+.stream-progress-info {
+  color: var(--sc-mc-color--text-white);
+  text-shadow: var(--sc-mc-color--text-white-shadow);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 0.25rem;
+}
+.stream-progress-info__title {
+  font-size: 1.125rem;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.stream-progress-info__sub-title {
+  font-size: 0.875rem;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}</style>

package/dist/streams/streams-player/types.d.ts

@@ -48,6 +48,7 @@ export type StreamsPlayerSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     playerColors?: Record<ThemeValue, PlayerColors>;
+    overlayMinOffsetTop?: number;
 };
 export type StreamAmplificationParameters = {
     campaignId: string;

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

@@ -36,6 +36,7 @@ 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);
@@ -45,15 +46,12 @@ 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/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/player/button/cmp.player-button.svelte

@@ -47,6 +47,7 @@ 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);
@@ -63,9 +64,6 @@ 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,6 +47,7 @@ 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;
@@ -72,9 +73,6 @@ 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/player/cmp.player.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { PlayerButtonDef } from '../button';
 import type { PlayerConfig } from './player-config.svelte';
 import { type Snippet } from 'svelte';
-declare function $$render<T extends {
+declare class __sveltets_Render<T extends {
     id: string;
-}>(): {
-    props: {
+}> {
+    props(): {
         config: PlayerConfig<T>;
         itemActions: PlayerButtonDef[];
         itemView: Snippet<[{
@@ -12,20 +12,11 @@ declare function $$render<T extends {
         }]>;
         attachmentsView?: Snippet<[{
             item: T;
-        }]>;
+        }]> | undefined;
         overviewPanelContent?: Snippet;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }

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

@@ -1,28 +1,19 @@
 import { type PlayerButtonDef } from '../button';
 import { PlayerConfig } from './player-config.svelte.js';
 import type { Snippet } from 'svelte';
-declare function $$render<T extends {
+declare class __sveltets_Render<T extends {
     id: string;
-}>(): {
-    props: {
+}> {
+    props(): {
         config: PlayerConfig<T>;
         hasOverview: boolean;
         itemActions: PlayerButtonDef[];
         attachmentsView?: Snippet<[{
             item: T;
-        }]>;
+        }]> | undefined;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }

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

@@ -59,6 +59,7 @@ 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%;
@@ -70,9 +71,6 @@ 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/player/overview-panel.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { PlayerConfig } from './player-config.svelte.js';
 import type { PlayerUIManager } from './ui-manager.svelte';
 import type { Snippet } from 'svelte';
-declare function $$render<T extends {
+declare class __sveltets_Render<T extends {
     id: string;
-}>(): {
-    props: {
+}> {
+    props(): {
         config: PlayerConfig<T>;
         uiManager: PlayerUIManager;
         position: {
@@ -14,17 +14,8 @@ declare function $$render<T extends {
         };
         children: Snippet;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }