@streamscloud/embeddable 2.1.1 → 2.1.3

package/dist/short-videos/short-videos-player/ui-manager.svelte.js

@@ -0,0 +1,25 @@
+export class ShortVideosPlayerUiManager {
+    detailsCollapsed = $state(true);
+    globalCssVariables = $derived.by(() => {
+        const values = [
+            `--short-videos-player--action-button--size: ${this.actionButtonSize}px`,
+            `--short-videos-player--navigation-button--size: ${this.navigationButtonSize}px`,
+            `--short-videos-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
+            `--short-videos-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
+            `--short-videos-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
+        ];
+        return values.join(';');
+    });
+    isMobileView = $derived.by(() => this.viewTotalWidth <= 576);
+    showShortVideoOverlay = $derived.by(() => (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 70);
+    actionButtonSize = 30;
+    navigationButtonSize = 40;
+    controlsOffsetHorizontal = 15;
+    controlsOffsetVertical = 10;
+    viewTotalWidth = $state(0);
+    mainViewColumnWidth = $state(0);
+    updateDimensions = (dimensions) => {
+        this.viewTotalWidth = dimensions.viewTotalWidth;
+        this.mainViewColumnWidth = dimensions.mainViewColumnWidth;
+    };
+}

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

@@ -0,0 +1,34 @@
+<script lang="ts">import { ProportionalContainer } from '../../ui/proportional-container';
+import { generateStreamLayoutStyles } from './styles-transformer';
+let { model, children } = $props();
+</script>
+
+<ProportionalContainer ratio={9 / 16}>
+  <div class="stream-page-layout" style={generateStreamLayoutStyles(model.styles)}>
+    {@render children()}
+  </div>
+</ProportionalContainer>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.stream-page-layout {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  position: relative;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  container-type: inline-size;
+}</style>

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

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

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

@@ -0,0 +1,77 @@
+<script lang="ts">import { Utils } from '../../core/utils';
+import { StreamElement } 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); });
+});
+const dataIsFilled = $derived.by(() => {
+    if (!model.data) {
+        return false;
+    }
+    switch (model.data.type) {
+        case StreamComponentDataType.ShortVideo: {
+            return !!model.data.shortVideo;
+        }
+        case StreamComponentDataType.Product: {
+            return !!model.data.product;
+        }
+        case StreamComponentDataType.Images: {
+            return !!model.data.items.length;
+        }
+        default:
+            Utils.assertUnreachable(model.data);
+    }
+});
+const productModel = $derived.by(() => {
+    var _a;
+    return ((_a = model.data) === null || _a === void 0 ? void 0 : _a.type) === StreamComponentDataType.Product ? model.data.product : undefined;
+});
+const handleProductClick = (e) => {
+    e.preventDefault();
+    if (!productModel) {
+        return;
+    }
+    if (productModel.id && (on === null || on === void 0 ? void 0 : on.productClick)) {
+        on.productClick(productModel.id);
+    }
+    if (productModel.link) {
+        window.open(productModel.link, '_blank', 'noopener noreferrer');
+    }
+};
+</script>
+
+{#snippet slotContent()}
+  {#if component && model.data && dataIsFilled}
+    {#each component.elements as element (element)}
+      <StreamElement model={element} data={model.data} localization={localization} on={on} />
+    {/each}
+  {/if}
+{/snippet}
+{#if productModel?.link}
+  <a class="stream-slot-content-product-link" href={productModel.link} onclick={handleProductClick} target="_blank" rel="noopener noreferrer">
+    {@render slotContent()}
+  </a>
+{:else}
+  {@render slotContent()}
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.stream-slot-content-product-link {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+}</style>

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

@@ -0,0 +1,13 @@
+import { type IStreamElementLocalization } from './element-views';
+import type { StreamSlot } from './slot';
+type Props = {
+    model: StreamSlot;
+    localization?: IStreamElementLocalization;
+    on?: {
+        productClick: (productId: string) => void;
+        progress?: (videoId: string, progress: number) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,26 @@
+<script lang="ts">let { model, children } = $props();
+const computeStyles = (settings) => {
+    const values = [`width: ${settings.width}%`, `height: ${settings.height}%`, `top: ${settings.top}%`, `left: ${settings.left}%`];
+    return values.join(';');
+};
+export {};
+</script>
+
+<div class="stream-layout-slot" style={computeStyles(model)}>
+  {@render children()}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.stream-layout-slot {
+  position: absolute;
+}</style>

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

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

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

@@ -0,0 +1,6 @@
+import type { StreamElementModel } from './elements';
+import { StreamComponentDataType } from './enums';
+export type StreamComponent = {
+    dataType: StreamComponentDataType;
+    elements: StreamElementModel[];
+};

package/dist/streams/layout/component.js

@@ -0,0 +1 @@
+import { StreamComponentDataType } from './enums';

package/dist/streams/layout/css-values.d.ts

@@ -0,0 +1,10 @@
+import { StreamCssValueType } from './enums';
+export type StreamCssValue = DeviceDependentStreamCssValue | PercentStreamCssValue;
+export type DeviceDependentStreamCssValue = {
+    type: StreamCssValueType.DDU;
+    value: number;
+};
+export type PercentStreamCssValue = {
+    type: StreamCssValueType.Pct;
+    value: number;
+};

package/dist/streams/layout/css-values.js

@@ -0,0 +1 @@
+import { StreamCssValueType } from './enums';

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

@@ -0,0 +1,16 @@
+<script lang="ts">import {} from './stream-element-localization.svelte';
+import { StreamElementStyleDirection } from '../enums';
+import { generateContainerStyles } from '../styles-transformer';
+import { default as StreamElement } from './cmp.stream-element.svelte';
+let { model, data, localization } = $props();
+</script>
+
+<div class="container-stream-element" style={generateContainerStyles(model.styles)}>
+  {#each model.elements as element (element)}
+    <StreamElement
+      model={element}
+      data={data}
+      constainerDirection={model.styles?.direction ?? StreamElementStyleDirection.Vertical}
+      localization={localization} />
+  {/each}
+</div>

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

@@ -0,0 +1,11 @@
+import { type IStreamElementLocalization } from './stream-element-localization.svelte';
+import type { ContainerStreamElementModel } from '../elements';
+import type { StreamSlotData } from '../slot-data';
+type Props = {
+    model: ContainerStreamElementModel;
+    data: StreamSlotData;
+    localization?: IStreamElementLocalization;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,38 @@
+<script lang="ts">import { getStringValueByKey } from './data-by-key-accessor';
+import { generateImageStyles } from '../styles-transformer';
+let { model, data } = $props();
+const value = $derived(getStringValueByKey(data, model.key));
+</script>
+
+<div class="image-ref-stream-element">
+  <img class="image-ref-stream-element-image" src={value} alt={model.key} style={generateImageStyles(model.styles)} />
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.image-ref-stream-element {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.image-ref-stream-element-image {
+  object-fit: cover;
+  min-width: 100%;
+  min-height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}</style>

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

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

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

@@ -0,0 +1,30 @@
+<script lang="ts">import { Image } from '../../../ui/image';
+import { ImagesImagesElementMode } from '../enums';
+let { model, data } = $props();
+</script>
+
+<div class="images-stream-element">
+  {#if data.length > 0}
+    {#if model.mode === ImagesImagesElementMode.Single || data.length === 1}
+      <Image src={data[0].url} />
+    {:else}
+      need implement multiple images
+    {/if}
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.images-stream-element {
+  width: 100%;
+  height: 100%;
+}</style>

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

@@ -0,0 +1,9 @@
+import type { ImagesStreamElementModel } from '../elements';
+import type { StreamLayoutBlobModel } from '../models';
+type Props = {
+    model: ImagesStreamElementModel;
+    data: StreamLayoutBlobModel[];
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,97 @@
+<script lang="ts">var _a;
+import { toPriceRepresentation } from '../../../products/price-helper';
+import { PriceStreamElementLocalization } from './price-stream-element-localization.svelte.js';
+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);
+    }
+    return toPriceRepresentation(data.price.price, data.price.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);
+    }
+    return 0;
+});
+const containerStyles = $derived.by(() => {
+    var _a, _b;
+    const values = [
+        `font-family: ${mapFontFamily((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontFamily)};`,
+        `justify-content: ${mapFlexJustifyContent((_b = model.styles) === null || _b === void 0 ? void 0 : _b.horizontalAlign)};`,
+        `align-items: center;`,
+        `height: ${transformNumericValue(height)};`
+    ];
+    return values.join('');
+});
+const priceCustomStyles = $derived.by(() => {
+    var _a, _b, _c;
+    const values = [
+        `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)};`
+    ];
+    return values.join('');
+});
+const saveValueCustomStyles = $derived.by(() => {
+    var _a, _b;
+    const values = [
+        `margin-top: ${transformNumericValue((height - height / lineHeight) / 2)};`,
+        `font-size: ${transformFontSizeValue(height / 4)};`,
+        `font-weight: 500;`,
+        `padding: ${transformNumericValue(height / 8)} ${transformNumericValue(height / 4)};`,
+        `border-radius: ${transformNumericValue(height / 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)};`
+    ];
+    return values.join('');
+});
+const beforeValueCustomStyles = $derived.by(() => {
+    var _a;
+    const values = [`font-size: ${transformFontSizeValue(height / 5)};`, `font-weight: 500;`, `color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`];
+    return values.join('');
+});
+</script>
+
+<div class="price-stream-element" style={containerStyles}>
+  <div class="price-stream-element__price" style={priceCustomStyles}>
+    {currentPrice}
+  </div>
+  {#if data.price.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))}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.price-stream-element {
+  display: flex;
+  gap: 4cqi;
+}
+.price-stream-element__sale-price {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}</style>

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

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

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

@@ -0,0 +1,6 @@
+<script lang="ts">import { ShortVideoViewer } from '../../../short-videos/short-video-viewer';
+import { mapToShortVideoViewerModel } from '../models';
+let { data, on } = $props();
+</script>
+
+<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} on={on} />

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

@@ -0,0 +1,10 @@
+import { type StreamLayoutShortVideoModel } from '../models';
+type Props = {
+    data: StreamLayoutShortVideoModel;
+    on?: {
+        progress?: (progress: number) => void;
+    };
+};
+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

@@ -0,0 +1,45 @@
+<script lang="ts">import { Utils } from '../../../core/utils';
+import { StreamElementStyleDirection } from '../enums';
+import { transformNumericValue } from '../styles-transformer';
+let { model, parentContainerDirection } = $props();
+const styles = $derived.by(() => {
+    const values = [];
+    if (!model.value) {
+        values.push(`flex-grow: 1`);
+    }
+    else {
+        switch (parentContainerDirection) {
+            case StreamElementStyleDirection.Vertical: {
+                values.push(`height: ${transformNumericValue(model.value)};`);
+                values.push(`min-height: ${transformNumericValue(model.value)};`);
+                break;
+            }
+            case StreamElementStyleDirection.Horizontal: {
+                values.push(`width: ${transformNumericValue(model.value)};`);
+                values.push(`min-width: ${transformNumericValue(model.value)};`);
+                break;
+            }
+            default:
+                Utils.assertUnreachable(parentContainerDirection);
+        }
+    }
+    return values.join('');
+});
+</script>
+
+<div class="spacer-stream-element" style={styles}>&nbsp;</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.spacer-stream-element {
+  line-height: 0;
+}</style>

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

@@ -0,0 +1,9 @@
+import type { SpacerStreamElementModel } from '../elements';
+import { StreamElementStyleDirection } from '../enums';
+type Props = {
+    model: SpacerStreamElementModel;
+    parentContainerDirection: StreamElementStyleDirection;
+};
+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

@@ -0,0 +1,68 @@
+<script lang="ts">import { ContainerStreamElement, ImageRefStreamElement, ImagesStreamElement, PriceStreamElement, ShortVideoStreamElement, SpacerStreamElement, TextRefStreamElement, TextStreamElement } from '.';
+import { StreamElementLocalization } from './stream-element-localization.svelte';
+import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
+let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, localization: localizatoinInit, on } = $props();
+const localization = $derived(new StreamElementLocalization(localizatoinInit));
+const shortVideoModel = $derived.by(() => {
+    if (!data) {
+        return null;
+    }
+    switch (data.type) {
+        case StreamComponentDataType.ShortVideo: {
+            return data.shortVideo;
+        }
+        default:
+            return null;
+    }
+});
+const imagesModel = $derived.by(() => {
+    if (!data) {
+        return null;
+    }
+    switch (data.type) {
+        case StreamComponentDataType.Images: {
+            return data.items;
+        }
+        default:
+            return null;
+    }
+});
+const productModel = $derived.by(() => {
+    if (!data) {
+        return null;
+    }
+    switch (data.type) {
+        case StreamComponentDataType.Product: {
+            return data.product;
+        }
+        default:
+            return null;
+    }
+});
+</script>
+
+{#if model.type === StreamElementType.Container}
+  <ContainerStreamElement 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} />
+{:else if model.type === StreamElementType.Images && imagesModel?.length}
+  <ImagesStreamElement model={model} data={imagesModel} />
+{:else if model.type === StreamElementType.Price && productModel}
+  <PriceStreamElement model={model} data={productModel} localization={localization.priceElementLocalization} />
+{:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
+  <ShortVideoStreamElement
+    data={shortVideoModel}
+    on={on
+      ? {
+          progress: (progress: number) => {
+            on.progress?.(shortVideoModel.id, progress);
+          }
+        }
+      : undefined} />
+{:else if model.type === StreamElementType.Text}
+  <TextStreamElement model={model} />
+{:else if model.type === StreamElementType.TextRef}
+  <TextRefStreamElement model={model} data={data} />
+{/if}

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

@@ -0,0 +1,16 @@
+import { type IStreamElementLocalization } from './stream-element-localization.svelte';
+import type { StreamElementModel } from '../elements';
+import { StreamElementStyleDirection } from '../enums';
+import type { StreamSlotData } from '../slot-data';
+type Props = {
+    model: StreamElementModel;
+    data: StreamSlotData;
+    constainerDirection?: StreamElementStyleDirection;
+    localization?: IStreamElementLocalization;
+    on?: {
+        progress?: (videoId: string, progress: number) => void;
+    };
+};
+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

@@ -0,0 +1,23 @@
+<script lang="ts">import { LineClamp } from '../../../ui/line-clamp';
+import { getStringValueByKey } from './data-by-key-accessor';
+import { generateTextStyles } from '../styles-transformer';
+let { model, data } = $props();
+const value = $derived.by(() => {
+    const values = [];
+    const value = getStringValueByKey(data, model.key);
+    if (model.valueBefore) {
+        values.push(model.valueBefore);
+    }
+    if (value) {
+        values.push(value);
+    }
+    if (model.valueAfter) {
+        values.push(model.valueAfter);
+    }
+    return values.join(' ');
+});
+</script>
+
+<div class="text-ref-stream-element" style={generateTextStyles(model.styles)}>
+  <LineClamp value={value} maxLines={model.styles?.maxLines || 'auto'} />
+</div>

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

@@ -0,0 +1,9 @@
+import type { TextRefStreamElementModel } from '../elements';
+import type { StreamSlotData } from '../slot-data';
+type Props = {
+    model: TextRefStreamElementModel;
+    data: StreamSlotData;
+};
+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

@@ -0,0 +1,8 @@
+<script lang="ts">import { LineClamp } from '../../../ui/line-clamp';
+import { generateTextStyles } from '../styles-transformer';
+let { model } = $props();
+</script>
+
+<div class="text-stream-element" style={generateTextStyles(model.styles)}>
+  <LineClamp value={model.value} maxLines={model.styles?.maxLines || 'auto'} />
+</div>