@streamscloud/embeddable 3.2.4 → 3.2.5

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

@@ -1,51 +1,86 @@
-import { StreamElementType, ImagesImagesElementMode } from './enums';
-import type { ImageStreamElementStyles, TextStreamElementStyles, ContainerStreamElementStyles, PriceStreamElementStyles } from './styles';
-export type StreamElementModel = ContainerStreamElementModel | ImageRefStreamElementModel | ImagesStreamElementModel | PriceStreamElementModel | SpacerStreamElementModel | ShortVideoStreamElementModel | TextStreamElementModel | TextRefStreamElementModel;
+import { StreamElementType, ImagesStreamElementMode, AnnotationStreamElementPlacement, StockStreamElementLevel } from './enums';
+import type { ImageStreamElementStyles, TextStreamElementStyles, ContainerStreamElementStyles, PriceStreamElementStyles, AnnotationStreamElementStyles, StockStreamElementStyles } from './styles';
+export type StreamElementModel = AnnotationStreamElementModel | ContainerStreamElementModel | ImageRefStreamElementModel | ImagesStreamElementModel | PriceStreamElementModel | ShortVideoStreamElementModel | SpacerStreamElementModel | StockStreamElementModel | TextStreamElementModel | TextRefStreamElementModel | WebViewStreamElementModel;
+export type AnnotationStreamElementModel = {
+    type: StreamElementType.Annotation;
+    $id: string;
+    name?: string | null;
+    svg: string;
+    inactive: boolean;
+    placement: AnnotationStreamElementPlacement;
+    styles: AnnotationStreamElementStyles;
+};
 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;
-    mode: ImagesImagesElementMode;
+    $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;
+    textAfter: string | null;
+    stock?: StockStreamElementModel | 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 StockStreamElementModel = {
+    type: StreamElementType.Stock;
+    $id: string;
+    name?: string | null;
+    level: StockStreamElementLevel;
+    quantity: number;
+    textAfter: string | null;
+    styles: StockStreamElementStyles | 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/elements.js

@@ -1 +1 @@
-import { StreamElementType, ImagesImagesElementMode } from './enums';
+import { StreamElementType, ImagesStreamElementMode, AnnotationStreamElementPlacement, StockStreamElementLevel } from './enums';

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

@@ -1,23 +1,39 @@
 export declare enum StreamComponentDataType {
     Images = "IMAGES",
+    NoData = "NO_DATA",
     ShortVideo = "SHORT_VIDEO",
     Product = "PRODUCT"
 }
 export declare enum StreamElementType {
+    Annotation = "ANNOTATION",
     Container = "CONTAINER",
     ImageRef = "IMAGE_REF",
     Images = "IMAGES",
     Price = "PRICE",
-    Spacer = "SPACER",
     ShortVideo = "SHORT_VIDEO",
+    Spacer = "SPACER",
+    Stock = "STOCK",
     Text = "TEXT",
-    TextRef = "TEXT_REF"
+    TextRef = "TEXT_REF",
+    WebView = "WEB_VIEW"
+}
+export declare enum AnnotationStreamElementPlacement {
+    TopLeft = "TOP_LEFT",
+    TopRight = "TOP_RIGHT",
+    BottomLeft = "BOTTOM_LEFT",
+    BottomRight = "BOTTOM_RIGHT"
 }
-export declare enum ImagesImagesElementMode {
+export declare enum ImagesStreamElementMode {
     Single = "SINGLE",
     Gallery = "GALLERY",
     Slider = "SLIDER"
 }
+export declare enum StockStreamElementLevel {
+    High = "HIGH",
+    Medium = "MEDIUM",
+    Low = "LOW",
+    OutOfStock = "OUT_OF_STOCK"
+}
 export declare enum StreamElementStyleMediaFit {
     Cover = "COVER",
     Contain = "CONTAIN"
@@ -43,3 +59,18 @@ export declare enum StreamCssValueType {
     DDU = "DDU",
     Pct = "PCT"
 }
+export declare enum StreamSvgTextValueType {
+    customText = "STREAM_SVG_CUSTOM_TEXT",
+    currency = "STREAM_SVG_CURRENCY",
+    currencySymbol = "STREAM_SVG_CURRENCY_SYMBOL",
+    price = "STREAM_SVG_PRODUCT_PRICE",
+    priceWhole = "STREAM_SVG_PRODUCT_PRICE_WHOLE",
+    priceDecimal = "STREAM_SVG_PRODUCT_PRICE_DECIMAL",
+    beforePrice = "STREAM_SVG_PRODUCT_BEFORE_PRICE",
+    beforePriceWhole = "STREAM_SVG_PRODUCT_BEFORE_PRICE_WHOLE",
+    beforePriceDecimal = "STREAM_SVG_PRODUCT_BEFORE_PRICE_DECIMAL",
+    saveValue = "STREAM_SVG_PRODUCT_SAVE_VALUE",
+    saveValueWhole = "STREAM_SVG_PRODUCT_SAVE_VALUE_WHOLE",
+    saveValueDecimal = "STREAM_SVG_PRODUCT_SAVE_VALUE_DECIMAL",
+    savePercentValue = "STREAM_SVG_PRODUCT_SAVE_PERCENT_VALUE"
+}

package/dist/streams/layout/enums.js

@@ -1,26 +1,44 @@
 export var StreamComponentDataType;
 (function (StreamComponentDataType) {
     StreamComponentDataType["Images"] = "IMAGES";
+    StreamComponentDataType["NoData"] = "NO_DATA";
     StreamComponentDataType["ShortVideo"] = "SHORT_VIDEO";
     StreamComponentDataType["Product"] = "PRODUCT";
 })(StreamComponentDataType || (StreamComponentDataType = {}));
 export var StreamElementType;
 (function (StreamElementType) {
+    StreamElementType["Annotation"] = "ANNOTATION";
     StreamElementType["Container"] = "CONTAINER";
     StreamElementType["ImageRef"] = "IMAGE_REF";
     StreamElementType["Images"] = "IMAGES";
     StreamElementType["Price"] = "PRICE";
-    StreamElementType["Spacer"] = "SPACER";
     StreamElementType["ShortVideo"] = "SHORT_VIDEO";
+    StreamElementType["Spacer"] = "SPACER";
+    StreamElementType["Stock"] = "STOCK";
     StreamElementType["Text"] = "TEXT";
     StreamElementType["TextRef"] = "TEXT_REF";
+    StreamElementType["WebView"] = "WEB_VIEW";
 })(StreamElementType || (StreamElementType = {}));
-export var ImagesImagesElementMode;
-(function (ImagesImagesElementMode) {
-    ImagesImagesElementMode["Single"] = "SINGLE";
-    ImagesImagesElementMode["Gallery"] = "GALLERY";
-    ImagesImagesElementMode["Slider"] = "SLIDER";
-})(ImagesImagesElementMode || (ImagesImagesElementMode = {}));
+export var AnnotationStreamElementPlacement;
+(function (AnnotationStreamElementPlacement) {
+    AnnotationStreamElementPlacement["TopLeft"] = "TOP_LEFT";
+    AnnotationStreamElementPlacement["TopRight"] = "TOP_RIGHT";
+    AnnotationStreamElementPlacement["BottomLeft"] = "BOTTOM_LEFT";
+    AnnotationStreamElementPlacement["BottomRight"] = "BOTTOM_RIGHT";
+})(AnnotationStreamElementPlacement || (AnnotationStreamElementPlacement = {}));
+export var ImagesStreamElementMode;
+(function (ImagesStreamElementMode) {
+    ImagesStreamElementMode["Single"] = "SINGLE";
+    ImagesStreamElementMode["Gallery"] = "GALLERY";
+    ImagesStreamElementMode["Slider"] = "SLIDER";
+})(ImagesStreamElementMode || (ImagesStreamElementMode = {}));
+export var StockStreamElementLevel;
+(function (StockStreamElementLevel) {
+    StockStreamElementLevel["High"] = "HIGH";
+    StockStreamElementLevel["Medium"] = "MEDIUM";
+    StockStreamElementLevel["Low"] = "LOW";
+    StockStreamElementLevel["OutOfStock"] = "OUT_OF_STOCK";
+})(StockStreamElementLevel || (StockStreamElementLevel = {}));
 export var StreamElementStyleMediaFit;
 (function (StreamElementStyleMediaFit) {
     StreamElementStyleMediaFit["Cover"] = "COVER";
@@ -52,3 +70,24 @@ export var StreamCssValueType;
     StreamCssValueType["DDU"] = "DDU";
     StreamCssValueType["Pct"] = "PCT";
 })(StreamCssValueType || (StreamCssValueType = {}));
+export var StreamSvgTextValueType;
+(function (StreamSvgTextValueType) {
+    /* Generic text */
+    StreamSvgTextValueType["customText"] = "STREAM_SVG_CUSTOM_TEXT";
+    /* Currency info */
+    StreamSvgTextValueType["currency"] = "STREAM_SVG_CURRENCY";
+    StreamSvgTextValueType["currencySymbol"] = "STREAM_SVG_CURRENCY_SYMBOL";
+    /* Product actual price */
+    StreamSvgTextValueType["price"] = "STREAM_SVG_PRODUCT_PRICE";
+    StreamSvgTextValueType["priceWhole"] = "STREAM_SVG_PRODUCT_PRICE_WHOLE";
+    StreamSvgTextValueType["priceDecimal"] = "STREAM_SVG_PRODUCT_PRICE_DECIMAL";
+    /* Product price before sales (if applicable) */
+    StreamSvgTextValueType["beforePrice"] = "STREAM_SVG_PRODUCT_BEFORE_PRICE";
+    StreamSvgTextValueType["beforePriceWhole"] = "STREAM_SVG_PRODUCT_BEFORE_PRICE_WHOLE";
+    StreamSvgTextValueType["beforePriceDecimal"] = "STREAM_SVG_PRODUCT_BEFORE_PRICE_DECIMAL";
+    /* “Save” / discount values */
+    StreamSvgTextValueType["saveValue"] = "STREAM_SVG_PRODUCT_SAVE_VALUE";
+    StreamSvgTextValueType["saveValueWhole"] = "STREAM_SVG_PRODUCT_SAVE_VALUE_WHOLE";
+    StreamSvgTextValueType["saveValueDecimal"] = "STREAM_SVG_PRODUCT_SAVE_VALUE_DECIMAL";
+    StreamSvgTextValueType["savePercentValue"] = "STREAM_SVG_PRODUCT_SAVE_PERCENT_VALUE";
+})(StreamSvgTextValueType || (StreamSvgTextValueType = {}));

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

@@ -1,19 +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 { 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 { parseToStreamLayout, stringifyToStreamLayoutInput } from './serializer';
+export * from './svg-attributes';
+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.Container]: ContainerStreamElementStyles;
-    [StreamElementType.Price]: PriceStreamElementStyles;
-    [StreamElementType.ImageRef]: ImageStreamElementStyles;
-    [StreamElementType.Text]: TextStreamElementStyles;
-    [StreamElementType.TextRef]: TextStreamElementStyles;
-};

package/dist/streams/layout/index.js

@@ -1,9 +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 { parseToStreamLayout, stringifyToStreamLayoutInput } from './serializer';
+export * from './svg-attributes';
+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/mapper.js

@@ -44,9 +44,9 @@ const mapToAdViewModel = (model) => {
         image: model.image,
         title: model.title,
         description: model.description,
-        buttonText: model.buttonText,
-        buttonUrl: model.buttonUrl,
-        openLinkInNewWindow: model.openLinkInNewWindow
+        price: model.price,
+        currency: model.currency,
+        ctaButton: model.ctaButton
     };
 };
 const mapToProductCardModel = (model) => {
@@ -57,6 +57,7 @@ const mapToProductCardModel = (model) => {
         link: model.link,
         currency: model.currency,
         price: model.price,
-        salePrice: model.salePrice
+        salePrice: model.salePrice,
+        shortDescription: model.shortDescription ?? null
     };
 };

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

@@ -1,4 +1,4 @@
-import { MediaType } from '../../..';
+import { MediaType } from '../../../core/enums';
 export type StreamLayoutMediaItemModel = {
     url: string;
     thumbnailUrl: string | null;

package/dist/streams/layout/models/stream-layout-media-item-model.js

@@ -1 +1 @@
-import { MediaType } from '../../..';
+import { MediaType } from '../../../core/enums';

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

@@ -1,4 +1,4 @@
-import type { PostSourceType } from '$gql/types';
+import type { PostSourceType } from '../../../core/enums';
 export type StreamLayoutPostHeaderModel = {
     sourceId: string;
     sourceName: string;

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/models/stream-layout-short-video-model.d.ts

@@ -16,9 +16,15 @@ export type StreamLayoutShortVideoAdModel = {
     image: string | null;
     title: string;
     description: string | null;
-    buttonText: string | null;
-    buttonUrl: string | null;
-    openLinkInNewWindow: boolean | null;
+    price: number | null;
+    currency: Currency | null;
+    ctaButton: {
+        background: string;
+        textColor: string;
+        text: string;
+        url: string;
+        border: string;
+    } | null;
 };
 export type StreamLayoutShortVideoProductModel = {
     id: string;
@@ -28,4 +34,8 @@ export type StreamLayoutShortVideoProductModel = {
     price: number;
     currency: Currency;
     salePrice: number | null;
+    brand?: {
+        name?: string | null;
+    };
+    shortDescription?: string | null;
 };

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,93 @@
+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;
+        });
+    }
+    if (element.type === StreamElementType.Price && element.stock) {
+        // @ts-expect-error - clearing local data before sending to the server
+        delete element.stock.$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));
+        }
+        if (element.type === StreamElementType.Price && element.stock) {
+            IdPopulator.populateElementId(element.stock);
+        }
+    }
+}

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/styles-transformer.d.ts

@@ -1,7 +1,8 @@
-import { StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleHorizontalAlign } from './enums';
-import type { ContainerStreamElementStyles, ImageStreamElementStyles, StreamLayoutStyles, TextStreamElementStyles } from './styles';
+import { StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleHorizontalAlign, AnnotationStreamElementPlacement } from './enums';
+import type { AnnotationStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, StreamLayoutStyles, TextStreamElementStyles } from './styles';
 export declare const generateStreamLayoutStyles: (styles: StreamLayoutStyles | null) => string;
 export declare const generateContainerStyles: (styles: Partial<ContainerStreamElementStyles> | null) => string;
+export declare const generateAnnotationStyles: (styles: AnnotationStreamElementStyles, placement: AnnotationStreamElementPlacement) => string;
 export declare const generateTextStyles: (styles: Partial<TextStreamElementStyles> | null) => string;
 export declare const generateImageStyles: (styles: Partial<ImageStreamElementStyles> | null) => string;
 export declare const mapFontFamily: (value: StreamElementStyleFontFamily | null | undefined) => string;