@streamscloud/embeddable 15.1.0-1770823267010 → 16.0.0

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

@@ -1,9 +1,7 @@
 <script lang="ts">import { PostModel } from '../../../posts/model';
 import { PostViewer } from '../../../posts/post-viewer';
-import { ShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
 import { mapToPostModel } from '../models';
-let { data, trackingParams, locale, on } = $props();
-const localization = $derived(new ShortVideoStreamElementLocalization(locale));
+let { data, trackingParams, on } = $props();
 </script>
 
 <PostViewer
@@ -12,5 +10,4 @@ const localization = $derived(new ShortVideoStreamElementLocalization(locale));
   autoplay={false}
   enableControls={false}
   controlActions={[]}
-  locale={localization.shortVideoViewerLocale}
   on={on} />

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte.d.ts

@@ -1,14 +1,12 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { StreamTrackingParams } from '..';
+import { type StreamLayoutShortVideoModel } from '../models';
+type Props = {
+    data: StreamLayoutShortVideoModel;
+    trackingParams: StreamTrackingParams;
+    on?: {
+        progress?: (progress: number) => void;
     };
-    slots: {};
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,6 +1,6 @@
-<script lang="ts">import { Utils } from '../../../core/utils';
-import { StreamElementStyleDirection } from '../enums';
+<script lang="ts">import { StreamElementStyleDirection } from '../enums';
 import { transformNumericValue } from '../styles-transformer';
+import { Utils } from '@streamscloud/kit/core/utils';
 let { model, parentContainerDirection } = $props();
 const styles = $derived.by(() => {
     const values = [];

package/dist/streams/layout/element-views/cmp.spacer-stream-element.svelte.d.ts

@@ -1,14 +1,9 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { SpacerStreamElementModel } from '../elements';
+import { StreamElementStyleDirection } from '../enums';
+type Props = {
+    model: SpacerStreamElementModel;
+    parentContainerDirection: StreamElementStyleDirection;
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,8 +1,8 @@
 <script lang="ts">import { StockStreamElementLocalization } from './stock-stream-element-localization';
 import { StockStreamElementLevel } from '../enums';
 import { mapFlexJustifyContent, transformNumericValue, transformTextColorValue } from '../styles-transformer';
-let { model, heightOverrideDdu, locale } = $props();
-const localization = $derived(new StockStreamElementLocalization(locale));
+let { model, heightOverrideDdu } = $props();
+const localization = new StockStreamElementLocalization();
 const height = $derived(heightOverrideDdu || model.styles?.height || 16);
 const containerStyles = $derived.by(() => {
     const values = [

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

@@ -1,14 +1,8 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { StockStreamElementModel } from '../elements';
+type Props = {
+    model: StockStreamElementModel;
+    heightOverrideDdu?: number;
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,6 +1,6 @@
 <script lang="ts">import { AnnotationStreamElementView, ButtonStreamElementView, ContainerStreamElementView, ImageRefStreamElementView, ImagesStreamElementView, PriceStreamElementView, ProductsSliderStreamElementView, ShortVideoStreamElementView, SpacerStreamElementView, StockStreamElementView, TextRefStreamElementView, TextStreamElementView, WebViewStreamElementView } from '.';
 import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
-let { model, data, trackingParams, constainerDirection = StreamElementStyleDirection.Vertical, locale, on } = $props();
+let { model, data, trackingParams, constainerDirection = StreamElementStyleDirection.Vertical, on } = $props();
 const shortVideoModel = $derived.by(() => {
     if (!data) {
         return null;
@@ -44,20 +44,19 @@ const productModel = $derived.by(() => {
 {:else if model.type === StreamElementType.Button}
   <ButtonStreamElementView model={model} />
 {:else if model.type === StreamElementType.Container}
-  <ContainerStreamElementView model={model} data={data} trackingParams={trackingParams} locale={locale} />
+  <ContainerStreamElementView model={model} data={data} trackingParams={trackingParams} />
 {:else if model.type === StreamElementType.ImageRef && data}
   <ImageRefStreamElementView model={model} data={data} />
 {:else if model.type === StreamElementType.Images && imagesModel?.length}
   <ImagesStreamElementView model={model} data={imagesModel} />
 {:else if model.type === StreamElementType.Price && productModel}
-  <PriceStreamElementView model={model} data={productModel.price} locale={locale} />
+  <PriceStreamElementView model={model} data={productModel.price} />
 {:else if model.type === StreamElementType.ProductsSlider}
-  <ProductsSliderStreamElementView model={model} data={data} trackingParams={trackingParams} locale={locale} />
+  <ProductsSliderStreamElementView model={model} data={data} trackingParams={trackingParams} />
 {:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
   <ShortVideoStreamElementView
     data={shortVideoModel}
     trackingParams={trackingParams}
-    locale={locale}
     on={on
       ? {
           progress: (progress: Number) => {
@@ -68,11 +67,11 @@ const productModel = $derived.by(() => {
 {:else if model.type === StreamElementType.Spacer}
   <SpacerStreamElementView model={model} parentContainerDirection={constainerDirection} />
 {:else if model.type === StreamElementType.Stock}
-  <StockStreamElementView model={model} locale={locale} />
+  <StockStreamElementView model={model} />
 {:else if model.type === StreamElementType.Text}
-  <TextStreamElementView model={model} locale={locale} />
+  <TextStreamElementView model={model} />
 {:else if model.type === StreamElementType.TextRef && data}
-  <TextRefStreamElementView model={model} data={data} locale={locale} />
+  <TextRefStreamElementView model={model} data={data} />
 {:else if model.type === StreamElementType.WebView}
   <WebViewStreamElementView model={model} />
 {/if}

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

@@ -1,14 +1,16 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { StreamTrackingParams } from '..';
+import type { StreamElementModel } from '../elements';
+import { StreamElementStyleDirection } from '../enums';
+import type { StreamSlotData } from '../slot-data';
+type Props = {
+    model: StreamElementModel;
+    data: StreamSlotData | null;
+    trackingParams: StreamTrackingParams;
+    constainerDirection?: StreamElementStyleDirection;
+    on?: {
+        progress?: (videoId: string, progress: number) => void;
     };
-    slots: {};
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,7 +1,7 @@
-<script lang="ts">import { LineClamp, LineClampAuto } from '../../../ui/line-clamp';
-import { getStringValueByKey } from './data-by-key-accessor';
+<script lang="ts">import { getStringValueByKey } from './data-by-key-accessor';
 import { generateTextStyles } from '../styles-transformer';
-let { model, data, locale } = $props();
+import { LineClamp, LineClampAuto } from '@streamscloud/kit/ui/line-clamp';
+let { model, data } = $props();
 const value = $derived.by(() => {
     const values = [];
     const value = getStringValueByKey(data, model.key);
@@ -20,8 +20,8 @@ const value = $derived.by(() => {
 
 <div class="text-ref-stream-element" style={generateTextStyles(model.styles)}>
   {#if model.styles?.maxLines}
-    <LineClamp maxLines={model.styles?.maxLines} locale={locale}>{value}</LineClamp>
+    <LineClamp maxLines={model.styles?.maxLines}>{value}</LineClamp>
   {:else}
-    <LineClampAuto locale={locale}>{value}</LineClampAuto>
+    <LineClampAuto>{value}</LineClampAuto>
   {/if}
 </div>

package/dist/streams/layout/element-views/cmp.text-ref-stream-element.svelte.d.ts

@@ -1,14 +1,9 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { TextRefStreamElementModel } from '../elements';
+import type { StreamSlotDataRef } from '../slot-data-ref';
+type Props = {
+    model: TextRefStreamElementModel;
+    data: StreamSlotDataRef;
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,14 +1,14 @@
-<script lang="ts">import { LineClamp, LineClampAuto } from '../../../ui/line-clamp';
-import { generateTextStyles } from '../styles-transformer';
-let { model, locale, placeholder } = $props();
+<script lang="ts">import { generateTextStyles } from '../styles-transformer';
+import { LineClamp, LineClampAuto } from '@streamscloud/kit/ui/line-clamp';
+let { model, placeholder } = $props();
 </script>
 
 <div class="text-stream-element" style={generateTextStyles(model.styles)}>
   {#if model.value}
     {#if model.styles?.maxLines}
-      <LineClamp maxLines={model.styles?.maxLines} locale={locale}>{model.value}</LineClamp>
+      <LineClamp maxLines={model.styles?.maxLines}>{model.value}</LineClamp>
     {:else}
-      <LineClampAuto locale={locale}>{model.value}</LineClampAuto>
+      <LineClampAuto>{model.value}</LineClampAuto>
     {/if}
   {:else if placeholder}
     {@render placeholder()}

package/dist/streams/layout/element-views/cmp.text-stream-element.svelte.d.ts

@@ -1,14 +1,9 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { TextStreamElementModel } from '../elements';
+import type { Snippet } from 'svelte';
+type Props = {
+    model: TextStreamElementModel;
+    placeholder?: Snippet;
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/streams/layout/element-views/cmp.web-view-stream-element.svelte.d.ts

@@ -1,14 +1,7 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { WebViewStreamElementModel } from '../elements';
+type Props = {
+    model: WebViewStreamElementModel;
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,9 +1,9 @@
-<script lang="ts">import { Utils } from '../../../core/utils';
-import { toPriceRepresentation } from '../../../products/price-helper';
-import { LineClamp } from '../../../ui/line-clamp';
+<script lang="ts">import { toPriceRepresentation } from '../../../products/price-helper';
 import { PriceStreamElementLocalization } from './price-stream-element-localization';
-import { default as StockElementView } from './cmp.stock-stream-element.svelte';
 import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformTextColorValue, transformBackgroundColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
+import { default as StockElementView } from './cmp.stock-stream-element.svelte';
+import { Utils } from '@streamscloud/kit/core/utils';
+import { LineClamp } from '@streamscloud/kit/ui/line-clamp';
 let { maxElementHeight, model, data, localization, on } = $props();
 let priceElementRef = $state.raw(null);
 let priceContainerRef = $state.raw(null);
@@ -125,12 +125,12 @@ $effect(() => {
     {/if}
     {#if model.textAfter}
       <div class="price-stream-element__text-after" style={textAfterCustomStyles}>
-        <LineClamp maxLines={1} locale={localization.locale}>{model.textAfter}</LineClamp>
+        <LineClamp maxLines={1}>{model.textAfter}</LineClamp>
       </div>
     {/if}
   </div>
   {#if model.stock}
-    <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} locale={localization.locale} />
+    <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} />
   {/if}
 </div>
 

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

@@ -1,14 +1,15 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import { PriceStreamElementLocalization } from './price-stream-element-localization';
+import type { PriceStreamElementModel } from '../elements';
+import type { StreamLayoutProductPriceModel } from '../models';
+type Props = {
+    maxElementHeight: number;
+    model: PriceStreamElementModel;
+    data: StreamLayoutProductPriceModel;
+    localization: PriceStreamElementLocalization;
+    on?: {
+        heightAdjusted: (height: number) => void;
     };
-    slots: {};
 };
-export type PriceElementViewProps = typeof __propDef.props;
-export type PriceElementViewEvents = typeof __propDef.events;
-export type PriceElementViewSlots = typeof __propDef.slots;
-export default class PriceElementView extends SvelteComponentTyped<PriceElementViewProps, PriceElementViewEvents, PriceElementViewSlots> {
-}
-export {};
+declare const PriceElementView: import("svelte").Component<Props, {}, "">;
+type PriceElementView = ReturnType<typeof PriceElementView>;
+export default PriceElementView;

package/dist/streams/layout/element-views/price-stream-element-localization.d.ts

@@ -1,7 +1,4 @@
-import { type Locale } from '../../../core/locale';
 export declare class PriceStreamElementLocalization {
-    saveValue: (value: string | number) => string;
-    beforeValue: (value: string) => string;
-    locale: Locale;
-    constructor(locale: Locale);
+    get saveValue(): (value: string | number) => string;
+    get beforeValue(): (value: string) => string;
 }

package/dist/streams/layout/element-views/price-stream-element-localization.js

@@ -1,12 +1,10 @@
-import {} from '../../../core/locale';
+import { getLocale } from '@streamscloud/kit/locale';
 export class PriceStreamElementLocalization {
-    saveValue;
-    beforeValue;
-    locale;
-    constructor(locale) {
-        this.saveValue = loc.saveValue[locale];
-        this.beforeValue = loc.beforeValue[locale];
-        this.locale = locale;
+    get saveValue() {
+        return loc.saveValue[getLocale()];
+    }
+    get beforeValue() {
+        return loc.beforeValue[getLocale()];
     }
 }
 const loc = {

package/dist/streams/layout/element-views/stock-stream-element-localization.d.ts

@@ -1,5 +1,3 @@
-import { type Locale } from '../../../core/locale';
 export declare class StockStreamElementLocalization {
-    quantity: (value: number, low: boolean) => string;
-    constructor(init: Locale);
+    get quantity(): (value: number, low: boolean) => string;
 }

package/dist/streams/layout/element-views/stock-stream-element-localization.js

@@ -1,8 +1,7 @@
-import {} from '../../../core/locale';
+import { getLocale } from '@streamscloud/kit/locale';
 export class StockStreamElementLocalization {
-    quantity;
-    constructor(init) {
-        this.quantity = loc.quantity[init];
+    get quantity() {
+        return loc.quantity[getLocale()];
     }
 }
 const loc = {

package/dist/streams/layout/index.js

@@ -1,5 +1,5 @@
-import { Utils } from '../../core/utils';
 import { StreamComponentDataType } from './enums';
+import { Utils } from '@streamscloud/kit/core/utils';
 export { default as StreamPageLayout } from './cmp.layout.svelte';
 export { default as StreamLayoutSlot } from './cmp.slot.svelte';
 export { default as StreamLayoutSlotContent } from './cmp.slot-content.svelte';

package/dist/streams/layout/serializer.svelte.js

@@ -1,6 +1,5 @@
-import { Utils } from '../../core/utils';
 import { StreamComponentDataType, StreamElementType } from './enums';
-import { nanoid } from 'nanoid';
+import { Utils, randomNanoid } from '@streamscloud/kit/core/utils';
 export const parseToStreamLayout = (value) => {
     const layout = JSON.parse(value);
     IdPopulator.populateLayoutIds(layout);
@@ -85,19 +84,19 @@ const removeElementIdRecursive = (element) => {
 };
 export class IdPopulator {
     static populateLayoutIds(layout) {
-        layout.$id = nanoid(10);
+        layout.$id = randomNanoid(10);
         layout.slots.forEach((slot) => IdPopulator.populateSlotIds(slot));
     }
     static populateSlotIds(slot) {
-        slot.$id = nanoid(10);
+        slot.$id = randomNanoid(10);
         slot.components.forEach((component) => IdPopulator.populateComponentIds(component));
     }
     static populateComponentIds(component) {
-        component.$id = nanoid(10);
+        component.$id = randomNanoid(10);
         component.elements.forEach((element) => IdPopulator.populateElementId(element));
     }
     static populateElementId(element) {
-        element.$id = nanoid(10);
+        element.$id = randomNanoid(10);
         if (element.type === StreamElementType.Container && element.elements) {
             element.elements.forEach((element) => IdPopulator.populateElementId(element));
         }

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

@@ -1,5 +1,5 @@
-import { Utils } from '../../core/utils';
 import { StreamCssValueType, StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign, AnnotationStreamElementPlacement } from './enums';
+import { Utils } from '@streamscloud/kit/core/utils';
 export const generateStreamLayoutStyles = (styles) => {
     if (!styles) {
         return '';

package/dist/streams/stream-card/cmp.stream-card.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import { ImageRounded } from '../../ui/image';
-import { ProportionalContainer } from '../../ui/proportional-container';
+<script lang="ts">import { ImageRounded } from '@streamscloud/kit/ui/image';
+import { ProportionalContainer } from '@streamscloud/kit/ui/proportional-container';
 let { stream, aspectRatio = 9 / 16, on } = $props();
 </script>
 
@@ -37,7 +37,7 @@ let { stream, aspectRatio = 9 / 16, on } = $props();
   display: flex;
   align-items: center;
   justify-content: center;
-  --image--rounded--outer--border-radius: 1%;
+  --sc-kit--image--rounded--outer--border-radius: 1%;
 }
 .stream-card__text {
   position: absolute;

package/dist/streams/stream-card/cmp.stream-card.svelte.d.ts

@@ -1,14 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { StreamCardModel } from './types';
+type Props = {
+    stream: StreamCardModel;
+    aspectRatio?: number;
+    on?: {
+        click?: () => void;
     };
-    slots: {};
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,15 +1,13 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
-import { ResponsivePlayerButtons } from '../../ui/player/button';
-import { StreamPageViewerLocalization } from './stream-page-viewer-localization';
-let { page, trackingParams, overlayControls, locale, on, overlay } = $props();
-const localization = $derived(new StreamPageViewerLocalization(locale));
+import { ResponsivePlayerButtons } from '@streamscloud/kit/ui/player/buttons';
+let { page, trackingParams, overlayControls, on, overlay } = $props();
 </script>
 
 {#if page.type === 'general'}
   <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} />
+        <StreamLayoutSlotContent model={slot} trackingParams={trackingParams} on={on} />
       </StreamLayoutSlot>
     {/each}
     {#snippet controls()}
@@ -23,8 +21,8 @@ const localization = $derived(new StreamPageViewerLocalization(locale));
 {/if}
 
 <style>.controls-panel {
-  --player-button--color: var(--sc-player--button);
-  --player-button--color--inactive: var(--sc-player--button-inactive);
+  --sc-kit--player-button--color: var(--sc-player--button);
+  --sc-kit--player-button--color--inactive: var(--sc-player--button-inactive);
   position: absolute;
   left: auto;
   right: 0;

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

@@ -1,14 +1,21 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import { type StreamTrackingParams } from '../layout';
+import type { StreamPageViewerModel } from './types';
+import { type PlayerButtonDef } from '@streamscloud/kit/ui/player/buttons';
+import type { Snippet } from 'svelte';
+type Props = {
+    page: StreamPageViewerModel;
+    trackingParams: StreamTrackingParams;
+    overlayControls?: {
+        enabled: boolean;
+        actions: PlayerButtonDef[];
     };
-    slots: {};
+    on?: {
+        productClick: (productId: string) => void;
+        productImpression?: (productId: string) => void;
+        progress?: (videoId: string, progress: number) => void;
+    };
+    overlay?: Snippet;
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/streams/streams-player/cmp.streams-player.svelte.d.ts

@@ -1,14 +1,26 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { IPostSocialInteractionsHandler } from '../../posts';
+import type { IStreamSharingHandler } from '../sharing';
+import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters } from './types';
+import type { Locale } from '@streamscloud/kit/locale';
+type Props = {
+    dataProvider: IStreamsPlayerDataProvider;
+    postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IStreamSharingHandler;
+    analyticsHandler?: IStreamAnalyticsHandler;
+    amplificationParameters?: StreamAmplificationParameters;
+    playerSettings?: {
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+        theme?: 'light' | 'dark';
+    };
+    on?: {
+        streamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
     };
-    slots: {};
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,9 +1,9 @@
-import type { Locale } from '../../core/locale';
 import { type IMediaCenterDataProvider } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { IStreamSharingHandler } from '../sharing';
 import type { StreamPageViewerModel } from '../stream-page-viewer/types';
 import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel } from './types';
+import type { Locale } from '@streamscloud/kit/locale';
 export { type StreamPlayerModel, type StreamPageViewerModel };
 export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterDataProvider };
 /**