@streamscloud/embeddable 2.0.4 → 2.1.1

package/dist/short-videos/short-video-viewer/types.d.ts

@@ -1,40 +0,0 @@
-import type { Currency } from '../../core/enums';
-export type ShortVideoViewerModel = {
-    id: string;
-    media: {
-        isImage: true;
-        url: string;
-    } | {
-        isImage: false;
-        url: string;
-        thumbnailUrl: string;
-    };
-    text?: string | null;
-    heading: ShortVideoViewerHeadingModel;
-    products: ShortVideoViewerProductModel[];
-    ad: ShortVideoViewerAdModel | null;
-};
-export type ShortVideoViewerHeadingModel = {
-    image: string | null;
-    name: string;
-    displayDate: string;
-    viewsCount: number;
-};
-export type ShortVideoViewerAdModel = {
-    id: string;
-    image: string | null;
-    title: string;
-    description: string | null;
-    buttonText: string | null;
-    buttonUrl: string | null;
-    openLinkInNewWindow: boolean | null;
-};
-export type ShortVideoViewerProductModel = {
-    id: string;
-    title: string;
-    image: string | null;
-    link: string | null;
-    price: number;
-    currency: Currency;
-    salePrice: number | null;
-};

package/dist/short-videos/short-video-viewer/types.js

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

package/dist/short-videos/short-video-viewer/ui-manager.svelte.d.ts

@@ -1,12 +0,0 @@
-export declare class ShortVideoViewerUiManager {
-    readonly globalCssVariables: string;
-    readonly showActionsInsideFrame: boolean;
-    readonly showAttachments: boolean;
-    private readonly buttonSize;
-    private actionsPanelWidth;
-    private availableSideSpace;
-    private canShowAttachments;
-    updateActionsPanelWidth: (value: number) => void;
-    updateAvailableSideSpace: (value: number) => void;
-    updateCanShowAttachments: (value: boolean) => void;
-}

package/dist/short-videos/short-video-viewer/ui-manager.svelte.js

@@ -1,26 +0,0 @@
-export class ShortVideoViewerUiManager {
-    globalCssVariables = $derived.by(() => {
-        const values = [`--_short-video-viewer--button--size: ${this.buttonSize}px`];
-        return values.join(';');
-    });
-    showActionsInsideFrame = $derived.by(() => {
-        return this.actionsPanelWidth + 40 > this.availableSideSpace;
-    });
-    showAttachments = $derived.by(() => {
-        return this.canShowAttachments;
-    });
-    buttonSize = 40;
-    actionsPanelWidth = $state(0);
-    availableSideSpace = $state(0);
-    // is provided from the calling side
-    canShowAttachments = $state(true);
-    updateActionsPanelWidth = (value) => {
-        this.actionsPanelWidth = value;
-    };
-    updateAvailableSideSpace = (value) => {
-        this.availableSideSpace = value;
-    };
-    updateCanShowAttachments = (value) => {
-        this.canShowAttachments = value;
-    };
-}

package/dist/short-videos/short-videos-player/action-button.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">let { children, on } = $props();
-export {};
-</script>
-
-<button type="button" class="action-button" onclick={() => on.click()}>
-  {@render children()}
-</button>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.action-button {
-  --_short-video-player--action-button--size: var(--short-video-player--action-button--size);
-  --_action-button--background: var(--action-button-background, #1c1c1c);
-  width: var(--_short-video-player--action-button--size);
-  min-width: var(--_short-video-player--action-button--size);
-  max-width: var(--_short-video-player--action-button--size);
-  height: var(--_short-video-player--action-button--size);
-  min-height: var(--_short-video-player--action-button--size);
-  max-height: var(--_short-video-player--action-button--size);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  line-height: 0;
-  background: var(--_action-button--background);
-  border-radius: 50%;
-  --icon--size: 1.25rem;
-  z-index: 1;
-  color: #ffffff;
-}</style>

package/dist/short-videos/short-videos-player/action-button.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    on: {
-        click: () => void;
-    };
-    children: Snippet;
-};
-declare const ActionButton: import("svelte").Component<Props, {}, "">;
-type ActionButton = ReturnType<typeof ActionButton>;
-export default ActionButton;

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

@@ -1,91 +0,0 @@
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { ShortVideoViewer } from '../short-video-viewer';
-import { PlayerBuffer, PlayerSlider } from '../../ui/player';
-import { SpotlightLayout } from '../../ui/spotlight-layout';
-import { default as Controls } from './controls.svelte';
-import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
-import { ShortVideoPlayerUiManager } from './ui-manager.svelte';
-import { onDestroy, onMount } from 'svelte';
-let { shortVideosProvider, localization: localizationInit, on } = $props();
-const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
-const buffer = $derived(new PlayerBuffer(shortVideosProvider));
-const uiManager = new ShortVideoPlayerUiManager();
-onMount(() => __awaiter(void 0, void 0, void 0, function* () {
-    uiManager.detailsCollapsed = window && window.innerWidth < window.innerHeight;
-}));
-onDestroy(() => {
-    // end tracking the short video
-});
-const handleDimensionsChanged = (dimensions) => {
-    uiManager.updateDimensions({
-        mainViewColumnWidth: dimensions.mainSceneWidth,
-        viewTotalWidth: dimensions.totalWidth
-    });
-};
-</script>
-
-<div class="short-videos-player-container">
-  <div class="short-videos-player" style={uiManager.globalCssVariables}>
-    {#if buffer}
-      <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
-        <div class="short-videos-player__content">
-          <PlayerSlider buffer={buffer}>
-            {#snippet children({ item })}
-              <ShortVideoViewer model={item} autoplay="on-appearance" showAttachments={uiManager.showShortVideoOverlay} />
-            {/snippet}
-          </PlayerSlider>
-        </div>
-      </SpotlightLayout>
-      <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: () => on?.closePlayer?.() }} />
-    {/if}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-videos-player-container {
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  container-type: inline-size;
-  display: flex;
-  position: relative;
-  background: #000000;
-}
-
-.short-videos-player {
-  display: flex;
-  flex: 1;
-  padding: 0.625rem 0;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .short-videos-player {
-    padding: 0;
-  }
-}
-.short-videos-player__content {
-  width: 100%;
-  height: 100%;
-  --short-video-viewer--actions-panel--bottom: 5rem;
-}</style>

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

@@ -1,13 +0,0 @@
-import { type ShortVideoViewerModel } from '../short-video-viewer';
-import { type PlayerItemsProvider } from '../../ui/player';
-import { type IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
-type Props = {
-    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
-    localization?: IShortVideosPlayerLocalization;
-    on?: {
-        closePlayer?: () => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,222 +0,0 @@
-<script lang="ts">import { ShortVideoDetails, ShortVideoViewerAttachments, ShortVideoViewerAttachmentsInline } from '../short-video-viewer';
-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 IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg';
-import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg';
-import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg';
-import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg';
-let { buffer, uiManager, localization, on } = $props();
-const toggleMuted = () => {
-    MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
-};
-const shortVideo = $derived(buffer.current);
-</script>
-
-<div class="short-video-player-controls">
-  <div class="short-video-player-controls__left">
-    {#if shortVideo && uiManager.detailsCollapsed && !uiManager.showShortVideoOverlay}
-      <div class="short-video-player-controls__short-video-overlay">
-        <div class="short-video-player-controls__short-video-attachments-inline">
-          <ShortVideoViewerAttachmentsInline model={shortVideo} />
-        </div>
-      </div>
-    {/if}
-    <div class="short-video-player-controls__navigation-buttons">
-      <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
-        <Icon src={IconChevronUp} />
-      </button>
-      <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
-        <Icon src={IconChevronDown} />
-      </button>
-    </div>
-  </div>
-  <div class="short-video-player-controls__right">
-    {#if shortVideo}
-      <div class="short-video-player-controls__short-video-attachments">
-        <ShortVideoViewerAttachments shortVideo={shortVideo} localization={localization.shortVideoDetailsLocalization?.attachmentsLocalization} />
-      </div>
-    {/if}
-    <div class="short-video-player-controls__controls">
-      {#if shortVideo}
-        <ActionButton on={{ click: toggleMuted }}>
-          {#if MediaVolumeManager.isMuted}
-            <Icon src={IconSpeakerMute} />
-          {:else}
-            <Icon src={IconSpeaker2} />
-          {/if}
-        </ActionButton>
-      {/if}
-    </div>
-  </div>
-</div>
-
-{#if shortVideo && !uiManager.isMobileView}
-  <ShortVideoDetails shortVideo={shortVideo} collapsed={uiManager.detailsCollapsed} localization={localization.shortVideoDetailsLocalization} />
-  <div class="toggle-collapsed-button">
-    <ActionButton on={{ click: () => (uiManager.detailsCollapsed = !uiManager.detailsCollapsed) }}>
-      <Icon src={IconPanelRightGallery} />
-    </ActionButton>
-  </div>
-{/if}
-<button type="button" class="close-button navigation-button" onclick={on.closePlayer}>
-  <Icon src={IconDismiss} />
-</button>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.close-button {
-  position: absolute;
-  top: var(--short-video-player--controls--offset-vertical);
-  right: var(--short-video-player--controls--offset-horizontal);
-  z-index: 1;
-}
-
-.toggle-collapsed-button {
-  position: absolute;
-  bottom: var(--short-video-player--controls--offset-vertical);
-  right: var(--short-video-player--controls--offset-horizontal);
-  z-index: 1;
-}
-
-.short-video-player-controls {
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  width: var(--short-video-player--sidebar--available-space);
-  display: flex;
-  justify-content: space-between;
-  gap: 2.5rem;
-  padding: var(--short-video-player--controls--offset-vertical) var(--short-video-player--controls--offset-horizontal);
-  container-type: inline-size;
-}
-.short-video-player-controls__left {
-  display: flex;
-  flex-direction: column;
-  gap: 2.5rem;
-  justify-content: flex-end;
-}
-.short-video-player-controls__right {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  flex-direction: column;
-  padding-top: 3.75rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 9.375rem) {
-  .short-video-player-controls__right {
-    display: none;
-  }
-}
-.short-video-player-controls__short-video-overlay {
-  gap: 2.5rem;
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-end;
-  --short-video-viewer--interactions--icon--size: var(--short-video-player--navigation-button--size);
-  --short-video-viewer--interactions--background--color: #1c1c1c;
-  --short-video-viewer--interactions--counter--color: #f3f4f6;
-  --short-video-viewer--interactions--icon--font-color: #f3f4f6;
-}
-.short-video-player-controls__short-video-attachments-inline {
-  display: none;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < calc(21.875rem + 3.75rem)) {
-  .short-video-player-controls__short-video-attachments-inline {
-    display: contents;
-  }
-}
-.short-video-player-controls__short-video-attachments {
-  flex: 1;
-  overflow-x: hidden;
-  overflow-y: auto;
-  scrollbar-color: transparent transparent;
-  scrollbar-width: thin;
-  width: 21.875rem;
-  max-width: 21.875rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-.short-video-player-controls__short-video-attachments::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
-}
-.short-video-player-controls__short-video-attachments::-webkit-scrollbar-thumb {
-  background: transparent;
-}
-.short-video-player-controls__short-video-attachments:hover {
-  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
-  scrollbar-width: thin;
-}
-.short-video-player-controls__short-video-attachments:hover::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
-}
-.short-video-player-controls__short-video-attachments:hover::-webkit-scrollbar-thumb {
-  background: var(--custom-scrollbar-color, #7d7d7d);
-}
-@container (width < calc(21.875rem + 3.75rem)) {
-  .short-video-player-controls__short-video-attachments {
-    display: none;
-  }
-}
-.short-video-player-controls__navigation-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-bottom: 0.625rem;
-  z-index: 1;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 6.25rem) {
-  .short-video-player-controls__navigation-buttons {
-    visibility: hidden;
-  }
-}
-.short-video-player-controls__controls {
-  display: flex;
-  margin-top: auto;
-  gap: 1rem;
-  align-self: flex-start;
-}
-
-.navigation-button {
-  width: var(--short-video-player--navigation-button--size);
-  min-width: var(--short-video-player--navigation-button--size);
-  max-width: var(--short-video-player--navigation-button--size);
-  height: var(--short-video-player--navigation-button--size);
-  min-height: var(--short-video-player--navigation-button--size);
-  max-height: var(--short-video-player--navigation-button--size);
-  background-color: #000000;
-  border: 1px solid #1c1c1c;
-  border-radius: 50%;
-  text-align: center;
-  --icon--color: #ffffff;
-  --icon--stroke-width: 0.6;
-}
-.navigation-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}</style>

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

@@ -1,15 +0,0 @@
-import { type ShortVideoViewerModel } from '../short-video-viewer';
-import type { IPlayerBuffer } from '../../ui/player';
-import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
-import type { ShortVideoPlayerUiManager } from './ui-manager.svelte';
-type Props = {
-    buffer: IPlayerBuffer<ShortVideoViewerModel>;
-    uiManager: ShortVideoPlayerUiManager;
-    localization: ShortVideosPlayerLocalization;
-    on: {
-        closePlayer: () => void;
-    };
-};
-declare const Controls: import("svelte").Component<Props, {}, "">;
-type Controls = ReturnType<typeof Controls>;
-export default Controls;

package/dist/short-videos/short-videos-player/index.d.ts

@@ -1,28 +0,0 @@
-import type { ShortVideoViewerModel } from '../short-video-viewer';
-import type { PlayerItemsProvider } from '../../ui/player';
-import type { IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
-export type { IShortVideosPlayerLocalization };
-/**
- * Opens the short videos player modal with the specified provider and optional localization.
- *
- * @param init - Configuration options.
- * @param {PlayerItemsProvider<ShortVideoViewerModel>} init.shortVideosProvider - The provider instance supplying short video items to the player.
- * @param {IShortVideosPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
- *
- * @example
- * ```ts
- * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
- *
- * openShortVideosPlayer({
- *   shortVideosProvider: myShortVideosProvider,
- *   localization: {
- *     next: 'Next',
- *     previous: 'Previous'
- *   }
- * });
- * ```
- */
-export declare const openShortVideosPlayer: (init: {
-    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
-    localization?: IShortVideosPlayerLocalization;
-}) => void;

package/dist/short-videos/short-videos-player/index.js

@@ -1,40 +0,0 @@
-import { ShadowHost } from '../../ui/shadow-dom';
-import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
-import { mount } from 'svelte';
-/**
- * Opens the short videos player modal with the specified provider and optional localization.
- *
- * @param init - Configuration options.
- * @param {PlayerItemsProvider<ShortVideoViewerModel>} init.shortVideosProvider - The provider instance supplying short video items to the player.
- * @param {IShortVideosPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
- *
- * @example
- * ```ts
- * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
- *
- * openShortVideosPlayer({
- *   shortVideosProvider: myShortVideosProvider,
- *   localization: {
- *     next: 'Next',
- *     previous: 'Previous'
- *   }
- * });
- * ```
- */
-export const openShortVideosPlayer = (init) => {
-    const { shortVideosProvider, localization } = init;
-    const shadowHost = new ShadowHost();
-    mount(ShortVideosPlayer, {
-        target: shadowHost.shadowRoot,
-        props: {
-            shortVideosProvider,
-            localization,
-            on: {
-                closePlayer: () => {
-                    shadowHost.remove();
-                }
-            }
-        }
-    });
-    shadowHost.attachToBody();
-};

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

@@ -1,8 +0,0 @@
-import type { IShortVideoDetailsLocalization } from '../short-video-viewer';
-export interface IShortVideosPlayerLocalization {
-    shortVideoDetailsLocalization?: IShortVideoDetailsLocalization;
-}
-export declare class ShortVideosPlayerLocalization {
-    shortVideoDetailsLocalization: IShortVideoDetailsLocalization | undefined;
-    constructor(init?: IShortVideosPlayerLocalization);
-}

package/dist/short-videos/short-videos-player/short-videos-player-localization.svelte.js

@@ -1,6 +0,0 @@
-export class ShortVideosPlayerLocalization {
-    shortVideoDetailsLocalization = $state(undefined);
-    constructor(init) {
-        this.shortVideoDetailsLocalization = init?.shortVideoDetailsLocalization || this.shortVideoDetailsLocalization;
-    }
-}

package/dist/short-videos/short-videos-player/ui-manager.svelte.d.ts

@@ -1,16 +0,0 @@
-export declare class ShortVideoPlayerUiManager {
-    detailsCollapsed: boolean;
-    globalCssVariables: string;
-    isMobileView: boolean;
-    showShortVideoOverlay: boolean;
-    private readonly actionButtonSize;
-    private readonly navigationButtonSize;
-    private readonly controlsOffsetHorizontal;
-    private readonly controlsOffsetVertical;
-    private viewTotalWidth;
-    private mainViewColumnWidth;
-    updateDimensions: (dimensions: {
-        viewTotalWidth: number;
-        mainViewColumnWidth: number;
-    }) => void;
-}

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

@@ -1,25 +0,0 @@
-export class ShortVideoPlayerUiManager {
-    detailsCollapsed = $state(true);
-    globalCssVariables = $derived.by(() => {
-        const values = [
-            `--short-video-player--action-button--size: ${this.actionButtonSize}px`,
-            `--short-video-player--navigation-button--size: ${this.navigationButtonSize}px`,
-            `--short-video-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
-            `--short-video-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
-            `--short-video-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

@@ -1,34 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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;