@streamscloud/embeddable 2.4.0 → 2.4.1

package/dist/short-videos/short-videos-player/controls.svelte

@@ -2,7 +2,7 @@
 import { Icon } from '../../ui/icon';
 import { MediaVolumeManager } from '../../ui/media-playback';
 import { default as ActionButton } from './action-button.svelte';
-import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
+import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';

package/dist/short-videos/short-videos-player/controls.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type ShortVideoViewerModel } from '../short-video-viewer';
 import type { IPlayerBuffer } from '../../ui/player';
-import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
+import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
 import type { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 type Props = {
     buffer: IPlayerBuffer<ShortVideoViewerModel>;

package/dist/streams/layout/cmp.layout.svelte.d.ts

@@ -1,7 +1,9 @@
-import type { StreamLayout } from './layout';
+import type { StreamLayoutStyles } from './styles';
 import type { Snippet } from 'svelte';
 type Props = {
-    model: StreamLayout;
+    model: {
+        styles: StreamLayoutStyles | null;
+    };
     children: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/streams/layout/cmp.slot-content.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import { Utils } from '../../core/utils';
-import { StreamElement } from './element-views';
+import { StreamElementView } from './element-views';
 import { StreamComponentDataType } from './enums';
 let { model, localization, on } = $props();
 const component = $derived.by(() => {
-    return model.components.find((c) => { var _a; return c.dataType === ((_a = model.data) === null || _a === void 0 ? void 0 : _a.type); });
+    return model.components.find((c) => (model.data ? c.dataType === model.data.type : c.dataType === StreamComponentDataType.NoData));
 });
 const dataIsFilled = $derived.by(() => {
     if (!model.data) {
@@ -42,9 +42,9 @@ const handleProductClick = (e) => {
 </script>
 
 {#snippet slotContent()}
-  {#if component && model.data && dataIsFilled}
+  {#if component && (!model.data || dataIsFilled)}
     {#each component.elements as element (element)}
-      <StreamElement model={element} data={model.data} localization={localization} on={on} />
+      <StreamElementView model={element} data={model.data} localization={localization} on={on} />
     {/each}
   {/if}
 {/snippet}

package/dist/streams/layout/cmp.slot.svelte.d.ts

@@ -1,7 +1,12 @@
-import type { StreamSlot } from './slot';
 import type { Snippet } from 'svelte';
+type LayoutStyles = {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+};
 type Props = {
-    model: StreamSlot;
+    model: LayoutStyles;
     children: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -1,6 +1,8 @@
 import type { StreamElementModel } from './elements';
 import { StreamComponentDataType } from './enums';
 export type StreamComponent = {
+    $id: string;
+    name?: string | null;
     dataType: StreamComponentDataType;
     elements: StreamElementModel[];
 };

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

@@ -3,7 +3,7 @@ import type { ContainerStreamElementModel } from '../elements';
 import type { StreamSlotData } from '../slot-data';
 type Props = {
     model: ContainerStreamElementModel;
-    data: StreamSlotData;
+    data: StreamSlotData | null;
     localization?: IStreamElementLocalization;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -1,9 +1,9 @@
-import type { Snippet } from 'svelte';
 import type { AnnotationStreamElementModel, ImageRefStreamElementModel } from '../elements';
-import type { StreamSlotData } from '../slot-data';
+import type { StreamSlotDataRef } from '../slot-data-ref';
+import type { Snippet } from 'svelte';
 type Props = {
     model: ImageRefStreamElementModel;
-    data: StreamSlotData;
+    data: StreamSlotDataRef;
     annotationView?: Snippet<[{
         model: AnnotationStreamElementModel;
     }]>;

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

@@ -1,20 +1,20 @@
 <script lang="ts">var _a;
 import { toPriceRepresentation } from '../../../products/price-helper';
-import { PriceStreamElementLocalization } from './price-stream-element-localization.svelte.js';
+import { PriceStreamElementLocalization } from './price-stream-element-localization.svelte';
 import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
 let { model, data, localization: localizationInit } = $props();
 const localization = $derived(new PriceStreamElementLocalization(localizationInit));
 const lineHeight = 1.2;
 const height = $derived(((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 16);
 const currentPrice = $derived.by(() => {
-    if (data.price.salePrice) {
-        return toPriceRepresentation(data.price.salePrice, data.price.currency, model.includeCurrency || false);
+    if (data.salePrice) {
+        return toPriceRepresentation(data.salePrice, data.currency, model.includeCurrency || false);
     }
-    return toPriceRepresentation(data.price.price, data.price.currency, model.includeCurrency || false);
+    return toPriceRepresentation(data.price, data.currency, model.includeCurrency || false);
 });
 const saveValue = $derived.by(() => {
-    if (data.price.salePrice) {
-        return toPriceRepresentation(data.price.price - data.price.salePrice, data.price.currency, model.includeCurrency || false);
+    if (data.salePrice) {
+        return toPriceRepresentation(data.price - data.salePrice, data.currency, model.includeCurrency || false);
     }
     return 0;
 });
@@ -34,7 +34,7 @@ const priceCustomStyles = $derived.by(() => {
         `font-size: ${transformFontSizeValue(height / lineHeight)};`,
         `line-height: ${lineHeight};`,
         `font-weight: ${mapFontWeight((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontWeight)};`,
-        `color: ${transformColorValue(data.price.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
+        `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)};`
     ];
     return values.join('');
 });
@@ -62,13 +62,13 @@ const beforeValueCustomStyles = $derived.by(() => {
   <div class="price-stream-element__price" style={priceCustomStyles}>
     {currentPrice}
   </div>
-  {#if data.price.salePrice && !model.excludeBeforePrice}
+  {#if data.salePrice && !model.excludeBeforePrice}
     <div class="price-stream-element__sale-price">
       <div class="price-stream-element__save" style={saveValueCustomStyles}>
         {localization.saveValue(saveValue)}
       </div>
       <div class="price-stream-element__before-price" style={beforeValueCustomStyles}>
-        {localization.beforeValue(toPriceRepresentation(data.price.price, data.price.currency, model.includeCurrency || false))}
+        {localization.beforeValue(toPriceRepresentation(data.price, data.currency, model.includeCurrency || false))}
       </div>
     </div>
   {/if}

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

@@ -1,9 +1,9 @@
-import { type IPriceStreamElementLocalization } from './price-stream-element-localization.svelte.js';
+import { type IPriceStreamElementLocalization } from './price-stream-element-localization.svelte';
 import type { PriceStreamElementModel } from '../elements';
-import type { StreamLayoutProductModel } from '../models';
+import type { StreamLayoutProductPriceModel } from '../models';
 type Props = {
     model: PriceStreamElementModel;
-    data: StreamLayoutProductModel;
+    data: StreamLayoutProductPriceModel;
     localization?: IPriceStreamElementLocalization;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -1,4 +1,4 @@
-<script lang="ts">import { AnnotationStreamElement, ContainerStreamElement, ImageRefStreamElement, ImagesStreamElement, PriceStreamElement, ShortVideoStreamElement, SpacerStreamElement, TextRefStreamElement, TextStreamElement } from '.';
+<script lang="ts">import { AnnotationStreamElementView, ContainerStreamElementView, ImageRefStreamElementView, ImagesStreamElementView, PriceStreamElementView, ShortVideoStreamElementView, SpacerStreamElementView, TextRefStreamElementView, TextStreamElementView, WebViewStreamElementView } from '.';
 import { StreamElementLocalization } from './stream-element-localization.svelte';
 import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
 let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, localization: localizatoinInit, on } = $props();
@@ -42,19 +42,19 @@ const productModel = $derived.by(() => {
 </script>
 
 {#if model.type === StreamElementType.Annotation}
-  <AnnotationStreamElement model={model} />
+  <AnnotationStreamElementView model={model} />
 {:else if model.type === StreamElementType.Container}
-  <ContainerStreamElement model={model} data={data} localization={localizatoinInit} />
+  <ContainerStreamElementView model={model} data={data} localization={localizatoinInit} />
 {:else if model.type === StreamElementType.Spacer}
-  <SpacerStreamElement model={model} parentContainerDirection={constainerDirection} />
-{:else if model.type === StreamElementType.ImageRef}
-  <ImageRefStreamElement model={model} data={data} />
+  <SpacerStreamElementView model={model} parentContainerDirection={constainerDirection} />
+{:else if model.type === StreamElementType.ImageRef && data}
+  <ImageRefStreamElementView model={model} data={data} />
 {:else if model.type === StreamElementType.Images && imagesModel?.length}
-  <ImagesStreamElement model={model} data={imagesModel} />
+  <ImagesStreamElementView model={model} data={imagesModel} />
 {:else if model.type === StreamElementType.Price && productModel}
-  <PriceStreamElement model={model} data={productModel} localization={localization.priceElementLocalization} />
+  <PriceStreamElementView model={model} data={productModel.price} localization={localization.priceElementLocalization} />
 {:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
-  <ShortVideoStreamElement
+  <ShortVideoStreamElementView
     data={shortVideoModel}
     on={on
       ? {
@@ -64,7 +64,9 @@ const productModel = $derived.by(() => {
         }
       : undefined} />
 {:else if model.type === StreamElementType.Text}
-  <TextStreamElement model={model} />
-{:else if model.type === StreamElementType.TextRef}
-  <TextRefStreamElement model={model} data={data} />
+  <TextStreamElementView model={model} />
+{:else if model.type === StreamElementType.TextRef && data}
+  <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

@@ -4,7 +4,7 @@ import { StreamElementStyleDirection } from '../enums';
 import type { StreamSlotData } from '../slot-data';
 type Props = {
     model: StreamElementModel;
-    data: StreamSlotData;
+    data: StreamSlotData | null;
     constainerDirection?: StreamElementStyleDirection;
     localization?: IStreamElementLocalization;
     on?: {

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

@@ -1,8 +1,8 @@
 import type { TextRefStreamElementModel } from '../elements';
-import type { StreamSlotData } from '../slot-data';
+import type { StreamSlotDataRef } from '../slot-data-ref';
 type Props = {
     model: TextRefStreamElementModel;
-    data: StreamSlotData;
+    data: StreamSlotDataRef;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -0,0 +1,32 @@
+<script lang="ts">let { model } = $props();
+export {};
+</script>
+
+<div class="web-view-stream-element">
+  {#if model.url}
+    <iframe title="Web View" src={model.url} style="width: 100%; height: 100%; border: none;" allowfullscreen></iframe>
+  {:else}
+    <p>No URL provided for the web view.</p>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.web-view-stream-element {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  position: relative;
+}</style>

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

@@ -0,0 +1,7 @@
+import type { WebViewStreamElementModel } from '../elements';
+type Props = {
+    model: WebViewStreamElementModel;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/streams/layout/element-views/data-by-key-accessor.d.ts

@@ -1,3 +1,3 @@
-import type { StreamSlotData } from '../slot-data';
-export declare const getStringValueByKey: (data: StreamSlotData, key: string) => string;
-export declare const getNumberValueByKey: (data: StreamSlotData, key: string) => number;
+import type { StreamSlotDataRef } from '../slot-data-ref';
+export declare const getStringValueByKey: (data: StreamSlotDataRef, key: string) => string;
+export declare const getNumberValueByKey: (data: StreamSlotDataRef, key: string) => number;

package/dist/streams/layout/element-views/index.d.ts

@@ -1,12 +1,13 @@
-export { default as StreamElement } from './cmp.stream-element.svelte';
-export { default as AnnotationStreamElement } from './cmp.annotation-stream-element.svelte';
-export { default as ContainerStreamElement } from './cmp.container-stream-element.svelte';
-export { default as ImageRefStreamElement } from './cmp.image-ref-stream-element.svelte';
-export { default as ImagesStreamElement } from './cmp.images-stream-element.svelte';
-export { default as PriceStreamElement } from './cmp.price-stream-element.svelte';
-export { default as ShortVideoStreamElement } from './cmp.short-video-stream-element.svelte';
-export { default as SpacerStreamElement } from './cmp.spacer-stream-element.svelte';
-export { default as TextRefStreamElement } from './cmp.text-ref-stream-element.svelte';
-export { default as TextStreamElement } from './cmp.text-stream-element.svelte';
+export { default as StreamElementView } from './cmp.stream-element.svelte';
+export { default as AnnotationStreamElementView } from './cmp.annotation-stream-element.svelte';
+export { default as ContainerStreamElementView } from './cmp.container-stream-element.svelte';
+export { default as ImageRefStreamElementView } from './cmp.image-ref-stream-element.svelte';
+export { default as ImagesStreamElementView } from './cmp.images-stream-element.svelte';
+export { default as PriceStreamElementView } from './cmp.price-stream-element.svelte';
+export { default as ShortVideoStreamElementView } from './cmp.short-video-stream-element.svelte';
+export { default as SpacerStreamElementView } from './cmp.spacer-stream-element.svelte';
+export { default as TextRefStreamElementView } from './cmp.text-ref-stream-element.svelte';
+export { default as TextStreamElementView } from './cmp.text-stream-element.svelte';
+export { default as WebViewStreamElementView } from './cmp.web-view-stream-element.svelte';
 export type { IStreamElementLocalization } from './stream-element-localization.svelte';
 export type { IPriceStreamElementLocalization } from './price-stream-element-localization.svelte';

package/dist/streams/layout/element-views/index.js

@@ -1,10 +1,11 @@
-export { default as StreamElement } from './cmp.stream-element.svelte';
-export { default as AnnotationStreamElement } from './cmp.annotation-stream-element.svelte';
-export { default as ContainerStreamElement } from './cmp.container-stream-element.svelte';
-export { default as ImageRefStreamElement } from './cmp.image-ref-stream-element.svelte';
-export { default as ImagesStreamElement } from './cmp.images-stream-element.svelte';
-export { default as PriceStreamElement } from './cmp.price-stream-element.svelte';
-export { default as ShortVideoStreamElement } from './cmp.short-video-stream-element.svelte';
-export { default as SpacerStreamElement } from './cmp.spacer-stream-element.svelte';
-export { default as TextRefStreamElement } from './cmp.text-ref-stream-element.svelte';
-export { default as TextStreamElement } from './cmp.text-stream-element.svelte';
+export { default as StreamElementView } from './cmp.stream-element.svelte';
+export { default as AnnotationStreamElementView } from './cmp.annotation-stream-element.svelte';
+export { default as ContainerStreamElementView } from './cmp.container-stream-element.svelte';
+export { default as ImageRefStreamElementView } from './cmp.image-ref-stream-element.svelte';
+export { default as ImagesStreamElementView } from './cmp.images-stream-element.svelte';
+export { default as PriceStreamElementView } from './cmp.price-stream-element.svelte';
+export { default as ShortVideoStreamElementView } from './cmp.short-video-stream-element.svelte';
+export { default as SpacerStreamElementView } from './cmp.spacer-stream-element.svelte';
+export { default as TextRefStreamElementView } from './cmp.text-ref-stream-element.svelte';
+export { default as TextStreamElementView } from './cmp.text-stream-element.svelte';
+export { default as WebViewStreamElementView } from './cmp.web-view-stream-element.svelte';

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

@@ -1,9 +1,10 @@
 import { StreamElementType, ImagesStreamElementMode, AnnotationStreamElementPlacement } from './enums';
 import type { ImageStreamElementStyles, TextStreamElementStyles, ContainerStreamElementStyles, PriceStreamElementStyles, AnnotationStreamElementStyles } from './styles';
-export type StreamElementModel = AnnotationStreamElementModel | ContainerStreamElementModel | ImageRefStreamElementModel | ImagesStreamElementModel | PriceStreamElementModel | SpacerStreamElementModel | ShortVideoStreamElementModel | TextStreamElementModel | TextRefStreamElementModel;
+export type StreamElementModel = AnnotationStreamElementModel | ContainerStreamElementModel | ImageRefStreamElementModel | ImagesStreamElementModel | PriceStreamElementModel | SpacerStreamElementModel | ShortVideoStreamElementModel | TextStreamElementModel | TextRefStreamElementModel | WebViewStreamElementModel;
 export type AnnotationStreamElementModel = {
     type: StreamElementType.Annotation;
-    id?: string;
+    $id: string;
+    name?: string | null;
     svg: string;
     inactive: boolean;
     placement: AnnotationStreamElementPlacement;
@@ -11,50 +12,64 @@ export type AnnotationStreamElementModel = {
 };
 export type ContainerStreamElementModel = {
     type: StreamElementType.Container;
-    id?: string;
+    $id: string;
+    name?: string | null;
     elements: StreamElementModel[];
     customizable: boolean | null;
     styles: ContainerStreamElementStyles | null;
 };
 export type ImagesStreamElementModel = {
     type: StreamElementType.Images;
-    id?: string;
+    $id: string;
+    name?: string | null;
     mode: ImagesStreamElementMode;
 };
 export type ImageRefStreamElementModel = {
     type: StreamElementType.ImageRef;
-    id?: string;
+    $id: string;
+    name?: string | null;
     key: string;
     annotations?: AnnotationStreamElementModel[] | null;
     styles: ImageStreamElementStyles | null;
 };
 export type PriceStreamElementModel = {
     type: StreamElementType.Price;
-    id?: string;
+    $id: string;
+    name?: string | null;
     excludeBeforePrice: boolean | null;
     includeCurrency: boolean | null;
     styles: PriceStreamElementStyles | null;
 };
 export type ShortVideoStreamElementModel = {
     type: StreamElementType.ShortVideo;
-    id?: string;
+    $id: string;
+    name?: string | null;
 };
 export type SpacerStreamElementModel = {
     type: StreamElementType.Spacer;
-    id?: string;
+    $id: string;
+    name?: string | null;
     value: number | null;
 };
 export type TextStreamElementModel = {
     type: StreamElementType.Text;
-    id?: string;
+    $id: string;
+    name?: string | null;
     value: string | null;
     styles: TextStreamElementStyles | null;
 };
 export type TextRefStreamElementModel = {
     type: StreamElementType.TextRef;
-    id?: string;
+    $id: string;
+    name?: string | null;
     key: string;
     valueBefore: string | null;
     valueAfter: string | null;
     styles: TextStreamElementStyles | null;
 };
+export type WebViewStreamElementModel = {
+    type: StreamElementType.WebView;
+    $id: string;
+    name?: string | null;
+    url: string | null;
+};

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

@@ -1,5 +1,6 @@
 export declare enum StreamComponentDataType {
     Images = "IMAGES",
+    NoData = "NO_DATA",
     ShortVideo = "SHORT_VIDEO",
     Product = "PRODUCT"
 }
@@ -12,7 +13,8 @@ export declare enum StreamElementType {
     Spacer = "SPACER",
     ShortVideo = "SHORT_VIDEO",
     Text = "TEXT",
-    TextRef = "TEXT_REF"
+    TextRef = "TEXT_REF",
+    WebView = "WEB_VIEW"
 }
 export declare enum AnnotationStreamElementPlacement {
     TopLeft = "TOP_LEFT",

package/dist/streams/layout/enums.js

@@ -1,6 +1,7 @@
 export var StreamComponentDataType;
 (function (StreamComponentDataType) {
     StreamComponentDataType["Images"] = "IMAGES";
+    StreamComponentDataType["NoData"] = "NO_DATA";
     StreamComponentDataType["ShortVideo"] = "SHORT_VIDEO";
     StreamComponentDataType["Product"] = "PRODUCT";
 })(StreamComponentDataType || (StreamComponentDataType = {}));
@@ -15,6 +16,7 @@ export var StreamElementType;
     StreamElementType["ShortVideo"] = "SHORT_VIDEO";
     StreamElementType["Text"] = "TEXT";
     StreamElementType["TextRef"] = "TEXT_REF";
+    StreamElementType["WebView"] = "WEB_VIEW";
 })(StreamElementType || (StreamElementType = {}));
 export var AnnotationStreamElementPlacement;
 (function (AnnotationStreamElementPlacement) {

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

@@ -1,21 +1,12 @@
-import { StreamComponentDataType, StreamElementType } from './enums';
+import { StreamComponentDataType } from './enums';
 import type { StreamLayout } from './layout';
 import type { StreamLayoutShortVideoModel } from './models';
 import type { StreamSlot } from './slot';
-import type { AnnotationStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, PriceStreamElementStyles, TextStreamElementStyles } from './styles';
 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';
 export * from './layout';
 export * from './svg-attributes';
-export { parseToStreamLayout, stringifyToStreamLayoutInput } from './serializer';
+export { parseToStreamLayout, parseToStreamLayoutTemplate, stringifyToStreamLayoutInput, IdPopulator } from './serializer.svelte';
 export declare const getAllowedDataTypesForSlot: (slot: StreamSlot) => StreamComponentDataType[];
 export declare const getSingleShortVideoFromLayout: (layout: StreamLayout) => StreamLayoutShortVideoModel | null;
-export type ElementTypeToStyles = {
-    [StreamElementType.Annotation]: AnnotationStreamElementStyles;
-    [StreamElementType.Container]: ContainerStreamElementStyles;
-    [StreamElementType.Price]: PriceStreamElementStyles;
-    [StreamElementType.ImageRef]: ImageStreamElementStyles;
-    [StreamElementType.Text]: TextStreamElementStyles;
-    [StreamElementType.TextRef]: TextStreamElementStyles;
-};

package/dist/streams/layout/index.js

@@ -1,10 +1,10 @@
-import { StreamComponentDataType, StreamElementType } from './enums';
+import { StreamComponentDataType } from './enums';
 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';
 export * from './layout';
 export * from './svg-attributes';
-export { parseToStreamLayout, stringifyToStreamLayoutInput } from './serializer';
+export { parseToStreamLayout, parseToStreamLayoutTemplate, stringifyToStreamLayoutInput, IdPopulator } from './serializer.svelte';
 export const getAllowedDataTypesForSlot = (slot) => {
     return slot.components.flatMap((c) => c.dataType);
 };

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

@@ -1,6 +1,8 @@
 import type { StreamSlot, StreamSlotInput, StreamSlotTemplate } from './slot';
 import type { StreamLayoutStyles } from './styles';
 export type StreamLayoutTemplate = {
+    $id: string;
+    name?: string | null;
     styles: StreamLayoutStyles | null;
     slots: StreamSlotTemplate[];
 };
@@ -8,6 +10,5 @@ export type StreamLayoutInput = Omit<StreamLayoutTemplate, 'slots'> & {
     slots: StreamSlotInput[];
 };
 export type StreamLayout = Omit<StreamLayoutTemplate, 'slots'> & {
-    id?: string;
     slots: StreamSlot[];
 };

package/dist/streams/layout/models/index.d.ts

@@ -2,5 +2,5 @@ export { mapToShortVideoViewerModel } from './mapper';
 export type { StreamLayoutBlobModel } from './stream-layout-blob-model';
 export type { StreamLayoutMediaItemModel } from './stream-layout-media-item-model';
 export type { StreamLayoutPostHeaderModel } from './stream-layout-post-header-model';
-export type { StreamLayoutProductModel } from './stream-layout-product-model';
+export type { StreamLayoutProductModel, StreamLayoutProductPriceModel } from './stream-layout-product-model';
 export type { StreamLayoutShortVideoModel, StreamLayoutShortVideoProductModel, StreamLayoutShortVideoAdModel } from './stream-layout-short-video-model';

package/dist/streams/layout/models/stream-layout-product-model.d.ts

@@ -7,7 +7,7 @@ export type StreamLayoutProductModel = {
     link: string | null;
     price: StreamLayoutProductPriceModel;
 };
-type StreamLayoutProductPriceModel = {
+export type StreamLayoutProductPriceModel = {
     price: number;
     currency: Currency;
     salePrice: number | null;
@@ -16,4 +16,3 @@ type StreamLayoutProductPriceModel = {
     saveValue: string | null;
     savePercentValue: string | null;
 };
-export {};

package/dist/streams/layout/serializer.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { StreamElementModel } from './elements';
+import type { StreamLayout, StreamLayoutTemplate } from './layout';
+export declare const parseToStreamLayout: (value: string) => StreamLayout;
+export declare const parseToStreamLayoutTemplate: (value: string) => StreamLayoutTemplate;
+export declare const stringifyToStreamLayoutInput: (layout: StreamLayout | StreamLayoutTemplate) => string;
+export declare class IdPopulator {
+    static populateLayoutIds(layout: {
+        $id: string;
+        slots: {
+            $id: string;
+            components: {
+                $id: string;
+                elements: StreamElementModel[];
+            }[];
+        }[];
+    }): void;
+    static populateSlotIds(slot: {
+        $id: string;
+        components: {
+            $id: string;
+            elements: StreamElementModel[];
+        }[];
+    }): void;
+    static populateComponentIds(component: {
+        $id: string;
+        elements: StreamElementModel[];
+    }): void;
+    static populateElementId(element: StreamElementModel): void;
+}

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

@@ -0,0 +1,86 @@
+import { Utils } from '../../core/utils';
+import { StreamComponentDataType, StreamElementType } from './enums';
+import { nanoid } from 'nanoid';
+export const parseToStreamLayout = (value) => {
+    const layout = JSON.parse(value);
+    IdPopulator.populateLayoutIds(layout);
+    return layout;
+};
+export const parseToStreamLayoutTemplate = (value) => {
+    const layout = JSON.parse(value);
+    IdPopulator.populateLayoutIds(layout);
+    return layout;
+};
+export const stringifyToStreamLayoutInput = (layout) => {
+    const clone = structuredClone($state.snapshot(layout));
+    // @ts-expect-error - clearing local data before sending to the server - clearing local data before sending to the server
+    delete clone.$id;
+    if (clone.slots) {
+        clone.slots.forEach((slot) => {
+            // @ts-expect-error - clearing local data before sending to the server
+            delete slot.$id;
+            slot.components.forEach((component) => {
+                // @ts-expect-error - clearing local data before sending to the server
+                delete component.$id;
+                component.elements.forEach(removeElementIdRecursive);
+            });
+            if ('data' in slot && slot.data) {
+                const data = slot.data;
+                switch (data.type) {
+                    case StreamComponentDataType.Images:
+                        // @ts-expect-error - clearing local data before sending to the server
+                        delete data.items;
+                        break;
+                    case StreamComponentDataType.ShortVideo:
+                        // @ts-expect-error - clearing local data before sending to the server
+                        delete data.shortVideo;
+                        break;
+                    case StreamComponentDataType.Product:
+                        // @ts-expect-error - clearing local data before sending to the server
+                        delete data.product;
+                        break;
+                    default:
+                        Utils.assertUnreachable(data);
+                }
+            }
+        });
+    }
+    return JSON.stringify(clone);
+};
+const removeElementIdRecursive = (element) => {
+    // @ts-expect-error - clearing local data before sending to the server
+    delete element.$id;
+    if (element.type === StreamElementType.Container && Array.isArray(element.elements)) {
+        element.elements.forEach(removeElementIdRecursive);
+    }
+    if (element.type === StreamElementType.ImageRef && Array.isArray(element.annotations)) {
+        element.annotations.forEach((annotation) => {
+            // @ts-expect-error - clearing local data before sending to the server
+            delete annotation.$id;
+        });
+    }
+};
+export class IdPopulator {
+    static populateLayoutIds(layout) {
+        layout.$id = nanoid(10);
+        layout.slots.forEach((slot) => IdPopulator.populateSlotIds(slot));
+    }
+    static populateSlotIds(slot) {
+        slot.$id = nanoid(10);
+        slot.components.forEach((component) => IdPopulator.populateComponentIds(component));
+    }
+    static populateComponentIds(component) {
+        component.$id = nanoid(10);
+        component.elements.forEach((element) => IdPopulator.populateElementId(element));
+    }
+    static populateElementId(element) {
+        element.$id = nanoid(10);
+        // Рекурсивно обрабатываем дочерние элементы
+        if (element.type === StreamElementType.Container && element.elements) {
+            element.elements.forEach((element) => IdPopulator.populateElementId(element));
+        }
+        if (element.type === StreamElementType.ImageRef && element.annotations) {
+            element.annotations.forEach((element) => IdPopulator.populateElementId(element));
+        }
+    }
+}

package/dist/streams/layout/slot-data-ref.d.ts

@@ -0,0 +1,13 @@
+import type { ImagesStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData } from './slot-data';
+export type StreamSlotDataRef = Partial<Pick<ImagesStreamSlotData, 'items'>> & Partial<Pick<ProductStreamSlotData, 'product'>> & Partial<Pick<ShortVideoStreamSlotData, 'shortVideo'>>;
+type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...0[]];
+type Join<K, P> = K extends string | number ? (P extends string | number ? `${K}${'' extends P ? '' : '.'}${P}` : never) : never;
+type IsPrimitive<T> = T extends string | number | boolean | null | undefined ? true : false;
+type ExcludeBuiltins<T> = {
+    [K in keyof T as K extends keyof any[] ? never : K extends symbol ? never : T[K] extends (...args: any[]) => any ? never : T[K] extends any[] ? never : K]: T[K];
+};
+type Paths<T, D extends number = 4> = [D] extends [never] ? never : T extends object ? {
+    [K in keyof ExcludeBuiltins<T>]: K extends string | number ? IsPrimitive<ExcludeBuiltins<T>[K]> extends true ? `${K}` : ExcludeBuiltins<T>[K] extends object | null ? ExcludeBuiltins<T>[K] extends null ? never : Join<K, Paths<ExcludeBuiltins<NonNullable<T[K]>>, Prev[D]>> : never : never;
+}[keyof ExcludeBuiltins<T>] : '';
+export type StreamSlotDataRefPaths = `#${Paths<Required<StreamSlotDataRef>>}`;
+export {};

package/dist/streams/layout/slot-data-ref.js

@@ -0,0 +1 @@
+export {};

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

@@ -2,6 +2,8 @@ import type { StreamComponent } from './component';
 import type { StreamSlotData } from './slot-data';
 import type { StreamSlotDataInput } from './slot-data-input';
 export type StreamSlotTemplate = {
+    $id: string;
+    name?: string | null;
     top: number;
     left: number;
     width: number;

package/dist/streams/layout/type-guards.d.ts

@@ -1,8 +1,37 @@
+import type { AnnotationStreamElementModel, ContainerStreamElementModel, ImageRefStreamElementModel, ImagesStreamElementModel, PriceStreamElementModel, ShortVideoStreamElementModel, SpacerStreamElementModel, TextRefStreamElementModel, TextStreamElementModel, WebViewStreamElementModel } from './elements';
+import { StreamElementType } from './enums';
 import type { ImagesStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData, StreamSlotData } from './slot-data';
 import type { ImagesStreamSlotDataInput, ProductStreamSlotDataInput, ShortVideoStreamSlotDataInput, StreamSlotDataInput } from './slot-data-input';
+import type { AnnotationStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, PriceStreamElementStyles, TextStreamElementStyles } from './styles';
 export declare function isImagesSlotDataInput(data: StreamSlotDataInput | null): data is ImagesStreamSlotDataInput;
 export declare function isProductSlotDataInput(data: StreamSlotDataInput | null): data is ProductStreamSlotDataInput;
 export declare function isShortVideoSlotDataInput(data: StreamSlotDataInput | null): data is ShortVideoStreamSlotDataInput;
 export declare function isImagesSlotData(data: StreamSlotData | null): data is ImagesStreamSlotData;
 export declare function isProductSlotData(data: StreamSlotData | null): data is ProductStreamSlotData;
 export declare function isShortVideoSlotData(data: StreamSlotData | null): data is ShortVideoStreamSlotData;
+export type ElementTypeToStylesMap = {
+    [StreamElementType.Annotation]: AnnotationStreamElementStyles;
+    [StreamElementType.Container]: ContainerStreamElementStyles;
+    [StreamElementType.Price]: PriceStreamElementStyles;
+    [StreamElementType.ImageRef]: ImageStreamElementStyles;
+    [StreamElementType.Text]: TextStreamElementStyles;
+    [StreamElementType.TextRef]: TextStreamElementStyles;
+};
+export type ElementTypeToModelMap = {
+    [StreamElementType.Annotation]: AnnotationStreamElementModel;
+    [StreamElementType.Container]: ContainerStreamElementModel;
+    [StreamElementType.ImageRef]: ImageRefStreamElementModel;
+    [StreamElementType.Images]: ImagesStreamElementModel;
+    [StreamElementType.Price]: PriceStreamElementModel;
+    [StreamElementType.ShortVideo]: ShortVideoStreamElementModel;
+    [StreamElementType.Spacer]: SpacerStreamElementModel;
+    [StreamElementType.Text]: TextStreamElementModel;
+    [StreamElementType.TextRef]: TextRefStreamElementModel;
+    [StreamElementType.WebView]: WebViewStreamElementModel;
+};
+export declare const NotAllowedElementTypesForComponent: {
+    IMAGES: StreamElementType[];
+    PRODUCT: StreamElementType[];
+    SHORT_VIDEO: StreamElementType[];
+    NO_DATA: StreamElementType[];
+};

package/dist/streams/layout/type-guards.js

@@ -1,4 +1,4 @@
-import { StreamComponentDataType } from './enums';
+import { StreamComponentDataType, StreamElementType } from './enums';
 // SlotDataInput guards
 export function isImagesSlotDataInput(data) {
     return data?.type === StreamComponentDataType.Images;
@@ -19,3 +19,15 @@ export function isProductSlotData(data) {
 export function isShortVideoSlotData(data) {
     return data?.type === StreamComponentDataType.ShortVideo;
 }
+export const NotAllowedElementTypesForComponent = {
+    [StreamComponentDataType.Images]: [StreamElementType.ImageRef, StreamElementType.Price, StreamElementType.ShortVideo, StreamElementType.TextRef],
+    [StreamComponentDataType.Product]: [StreamElementType.Images, StreamElementType.ShortVideo],
+    [StreamComponentDataType.ShortVideo]: [StreamElementType.ImageRef, StreamElementType.Price, StreamElementType.TextRef],
+    [StreamComponentDataType.NoData]: [
+        StreamElementType.ImageRef,
+        StreamElementType.Images,
+        StreamElementType.Price,
+        StreamElementType.ShortVideo,
+        StreamElementType.TextRef
+    ]
+};

package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { Icon } from '../icon';
-import IconArrowUp from '@fluentui/svg-icons/icons/arrow_up_20_regular.svg?raw';
 import { SwipeIndicatorLocalization } from './swipe-indicator-localization.svelte';
+import IconArrowUp from '@fluentui/svg-icons/icons/arrow_up_20_regular.svg?raw';
 let { fadeTimeout = 2000, localization: localizationInit } = $props();
 const localization = $derived(new SwipeIndicatorLocalization(localizationInit));
 let isFaded = $state(false);

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",
   "scripts": {
     "dev": "vite dev --port 3010",
-    "build": "svelte-package --tsconfig ./tsconfig.app.json  && prettier --write --plugin prettier-plugin-svelte .",
+    "build": "svelte-package --tsconfig ./tsconfig.app.json  && prettier --write --plugin prettier-plugin-svelte . && eslint --fix .",
     "pack": "npm run build && npm pack",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
@@ -77,6 +77,10 @@
       "types": "./dist/streams/layout/slot-data-input.d.ts",
       "import": "./dist/streams/layout/slot-data-input.js"
     },
+    "./stream-layout/slot-data-ref": {
+      "types": "./dist/streams/layout/slot-data-ref.d.ts",
+      "import": "./dist/streams/layout/slot-data-ref.js"
+    },
     "./stream-layout/styles": {
       "types": "./dist/streams/layout/styles.d.ts",
       "import": "./dist/streams/layout/styles.js"

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

@@ -1,3 +0,0 @@
-import type { StreamLayout } from './layout';
-export declare const parseToStreamLayout: (value: string) => StreamLayout;
-export declare const stringifyToStreamLayoutInput: (layout: StreamLayout) => string;

package/dist/streams/layout/serializer.js

@@ -1,6 +0,0 @@
-export const parseToStreamLayout = (value) => {
-    return JSON.parse(value);
-};
-export const stringifyToStreamLayoutInput = (layout) => {
-    return JSON.stringify(layout);
-};