@streamscloud/embeddable 2.1.1 → 2.1.2

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

@@ -0,0 +1,140 @@
+import { Utils } from '../../core/utils';
+import { StreamCssValueType, StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign } from './enums';
+export const generateStreamLayoutStyles = (styles) => {
+    if (!styles) {
+        return '';
+    }
+    const values = [`background-color: ${transformColorValue(styles.backgroundColor)};`, `font-family: ${mapFontFamily(styles.fontFamily)};`];
+    return values.join('');
+};
+export const generateContainerStyles = (styles) => {
+    styles = styles || {};
+    const values = [
+        'display: flex;',
+        'flex-direction: column;',
+        `width: ${transformCssValue(styles.width, 'auto')};`,
+        `height: ${transformCssValue(styles.height, 'fit-content')};`,
+        `aspect-ratio: ${styles.aspectRatio || 'auto'};`,
+        `gap: ${transformNumericValue(styles.gap)};`,
+        `padding-top: ${transformNumericValue(styles.paddingTop)};`,
+        `padding-right: ${transformNumericValue(styles.paddingRight)};`,
+        `padding-bottom: ${transformNumericValue(styles.paddingBottom)};`,
+        `padding-left: ${transformNumericValue(styles.paddingLeft)};`,
+        `background-color: ${transformColorValue(styles.backgroundColor)};`,
+        `border-width: ${styles.borderColor ? '1px' : '0'};`,
+        `border-radius: ${transformNumericValue(styles.borderRadius)};`,
+        `border-color: ${transformColorValue(styles.borderColor)};`,
+        `overflow: ${styles.borderRadius ? 'hidden' : 'visible'};`
+    ];
+    if (styles.direction) {
+        values.push(`display: flex;`);
+        values.push(`flex-direction: ${styles.direction === StreamElementStyleDirection.Horizontal ? 'row' : 'column'};`);
+    }
+    return values.join('');
+};
+export const generateTextStyles = (styles) => {
+    styles = styles || {};
+    const values = [
+        `font-family: ${mapFontFamily(styles.fontFamily)};`,
+        `font-size: ${transformFontSizeValue(styles.fontSize)};`,
+        `font-weight: ${mapFontWeight(styles.fontWeight)};`,
+        `line-height: ${transformNumericValue(styles.lineHeight, '1.2')};`,
+        `text-align: ${mapTextAlign(styles.textAlign)};`,
+        `color: ${transformColorValue(styles.color)};`
+    ];
+    return values.join('');
+};
+export const generateImageStyles = (styles) => {
+    styles = styles || {};
+    const imageStyles = [`object-fit: ${mapMediaFit(styles.mediaFit)};`];
+    return imageStyles.join('');
+};
+export const mapFontFamily = (value) => {
+    switch (value) {
+        case StreamElementStyleFontFamily.System:
+            return 'inherit';
+        default: {
+            return 'inherit';
+        }
+    }
+};
+export const mapFontWeight = (value) => {
+    switch (value) {
+        case StreamElementStyleFontWeight.Bold:
+            return '600';
+        case StreamElementStyleFontWeight.SemiBold:
+            return '500';
+        default: {
+            return 'normal';
+        }
+    }
+};
+export const mapTextAlign = (value) => {
+    switch (value) {
+        case StreamElementStyleHorizontalAlign.Left:
+            return 'left';
+        case StreamElementStyleHorizontalAlign.Center:
+            return 'center';
+        case StreamElementStyleHorizontalAlign.Right:
+            return 'right';
+        default: {
+            return 'left';
+        }
+    }
+};
+export const mapFlexJustifyContent = (value) => {
+    switch (value) {
+        case StreamElementStyleHorizontalAlign.Left:
+            return 'flex-start';
+        case StreamElementStyleHorizontalAlign.Center:
+            return 'center';
+        case StreamElementStyleHorizontalAlign.Right:
+            return 'flex-end';
+        default: {
+            return 'flex-start';
+        }
+    }
+};
+const mapMediaFit = (value) => {
+    switch (value) {
+        case StreamElementStyleMediaFit.Cover:
+            return 'cover';
+        case StreamElementStyleMediaFit.Contain:
+            return 'contain';
+        default: {
+            return 'cover';
+        }
+    }
+};
+const transformCssValue = (value, fallback = '0') => {
+    if (value === null || value === undefined) {
+        return fallback;
+    }
+    switch (value.type) {
+        case StreamCssValueType.DDU:
+            return transformNumericValue(value.value, fallback);
+        case StreamCssValueType.Pct:
+            return `${value.value}%`;
+        default:
+            Utils.assertUnreachable(value);
+    }
+};
+export const transformFontSizeValue = (value) => {
+    if (value === null || value === undefined) {
+        value = 16;
+    }
+    return transformNumericValue(value);
+};
+const baseContainerWidth = 400;
+export const transformNumericValue = (value, fallback = '0') => {
+    if (value === null || value === undefined) {
+        return fallback;
+    }
+    return `${(value / baseContainerWidth) * 100}cqi`;
+};
+export const transformColorValue = (value) => {
+    if (value === null || value === undefined) {
+        return 'transparent';
+    }
+    return value;
+};

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

@@ -0,0 +1,43 @@
+import type { StreamCssValue } from './css-values';
+import { StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign } from './enums';
+export type StreamLayoutStyles = {
+    backgroundColor?: string | null;
+    fontFamily?: StreamElementStyleFontFamily | null;
+};
+export type ImageStreamElementStyles = {
+    mediaFit?: StreamElementStyleMediaFit | null;
+};
+export type PriceStreamElementStyles = {
+    height?: number | null;
+    fontWeight?: StreamElementStyleFontWeight | null;
+    fontFamily?: StreamElementStyleFontFamily | null;
+    regularPriceColor?: string | null;
+    salePriceColor?: string | null;
+    saveValueColor?: string | null;
+    saveValueBackgroundColor?: string | null;
+    beforeValueColor?: string | null;
+    horizontalAlign?: StreamElementStyleHorizontalAlign | null;
+};
+export type TextStreamElementStyles = {
+    fontSize?: number | null;
+    fontWeight?: StreamElementStyleFontWeight | null;
+    fontFamily?: StreamElementStyleFontFamily | null;
+    lineHeight?: number | null;
+    textAlign?: StreamElementStyleHorizontalAlign | null;
+    color?: string | null;
+    maxLines?: number | null;
+};
+export type ContainerStreamElementStyles = {
+    width?: StreamCssValue | null;
+    height?: StreamCssValue | null;
+    aspectRatio?: number | null;
+    direction?: StreamElementStyleDirection | null;
+    gap?: number | null;
+    paddingTop?: number | null;
+    paddingRight?: number | null;
+    paddingBottom?: number | null;
+    paddingLeft?: number | null;
+    backgroundColor?: string | null;
+    borderRadius?: number | null;
+    borderColor?: string | null;
+};

package/dist/streams/layout/styles.js

@@ -0,0 +1 @@
+import { StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign } from './enums';

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

@@ -0,0 +1,8 @@
+import type { ImagesStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData, StreamSlotData } from './slot-data';
+import type { ImagesStreamSlotDataInput, ProductStreamSlotDataInput, ShortVideoStreamSlotDataInput, StreamSlotDataInput } from './slot-data-input';
+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;

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

@@ -0,0 +1,21 @@
+import { StreamComponentDataType } from './enums';
+// SlotDataInput guards
+export function isImagesSlotDataInput(data) {
+    return data?.type === StreamComponentDataType.Images;
+}
+export function isProductSlotDataInput(data) {
+    return data?.type === StreamComponentDataType.Product;
+}
+export function isShortVideoSlotDataInput(data) {
+    return data?.type === StreamComponentDataType.ShortVideo;
+}
+// SlotData guards
+export function isImagesSlotData(data) {
+    return data?.type === StreamComponentDataType.Images;
+}
+export function isProductSlotData(data) {
+    return data?.type === StreamComponentDataType.Product;
+}
+export function isShortVideoSlotData(data) {
+    return data?.type === StreamComponentDataType.ShortVideo;
+}

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

@@ -0,0 +1,13 @@
+<script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
+let { page, on } = $props();
+</script>
+
+{#if page.type === 'general'}
+  <StreamPageLayout model={page.layout}>
+    {#each page.layout.slots as slot (slot)}
+      <StreamLayoutSlot model={slot}>
+        <StreamLayoutSlotContent model={slot} on={on} />
+      </StreamLayoutSlot>
+    {/each}
+  </StreamPageLayout>
+{/if}

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

@@ -0,0 +1,11 @@
+import type { StreamPageViewerModel } from './types';
+type Props = {
+    page: StreamPageViewerModel;
+    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/stream-page-viewer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StreamPageViewer } from './cmp.stream-page-viewer.svelte';
+export type { StreamPageViewerModel } from './types';

package/dist/streams/stream-page-viewer/index.js

@@ -0,0 +1 @@
+export { default as StreamPageViewer } from './cmp.stream-page-viewer.svelte';

package/dist/streams/stream-page-viewer/mapper.d.ts

@@ -0,0 +1,3 @@
+import type { StreamPageViewerPayloadFragment } from './operations.generated';
+import type { StreamPageViewerModel } from './types';
+export declare const mapToStreamPageViewerModel: (payload: StreamPageViewerPayloadFragment) => StreamPageViewerModel;

package/dist/streams/stream-page-viewer/mapper.js

@@ -0,0 +1,22 @@
+import { getSingleShortVideoFromLayout, parseToStreamLayout } from '../layout';
+export const mapToStreamPageViewerModel = (payload) => {
+    const layout = parseToStreamLayout(payload.layout);
+    const singleShortVideo = getSingleShortVideoFromLayout(layout);
+    if (singleShortVideo) {
+        return {
+            type: 'short-video',
+            id: payload.id,
+            cover: payload.cover?.url || null,
+            name: payload.name,
+            shortVideo: singleShortVideo,
+            layout
+        };
+    }
+    return {
+        type: 'general',
+        id: payload.id,
+        cover: payload.cover?.url || null,
+        name: payload.name,
+        layout
+    };
+};

package/dist/streams/stream-page-viewer/operations.generated.d.ts

@@ -0,0 +1,10 @@
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type StreamPageViewerPayloadFragment = {
+    id: string;
+    name: string | null;
+    layout: string;
+    cover: {
+        url: string;
+    } | null;
+};
+export declare const StreamPageViewerPayloadFragmentDoc: DocumentNode<StreamPageViewerPayloadFragment, unknown>;

package/dist/streams/stream-page-viewer/operations.generated.js

@@ -0,0 +1,27 @@
+export const StreamPageViewerPayloadFragmentDoc = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'StreamPageViewerPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'StreamPage' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'cover' },
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'layout' },
+                        arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }]
+                    }
+                ]
+            }
+        }
+    ]
+};

package/dist/streams/stream-page-viewer/operations.graphql

@@ -0,0 +1,8 @@
+fragment StreamPageViewerPayloadFragment on StreamPage {
+  id
+  cover {
+    url
+  }
+  name
+  layout(scale: $image_scale)
+}

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

@@ -0,0 +1,13 @@
+import type { IStreamElementLocalization } from '../layout/element-views';
+import type { ITimeAgoLocalization } from '../../ui/time-ago';
+export interface IStreamPageViewerLocalization {
+    viewsCount?: (count: number) => string;
+    timeAgoLocalization?: ITimeAgoLocalization;
+    elementsLocalization?: IStreamElementLocalization;
+}
+export declare class StreamPageViewerLocalization {
+    viewsCount: (count: number) => string;
+    timeAgoLocalization: ITimeAgoLocalization | undefined;
+    elementsLocalization: IStreamElementLocalization | undefined;
+    constructor(init?: IStreamPageViewerLocalization);
+}

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.svelte.js

@@ -0,0 +1,10 @@
+export class StreamPageViewerLocalization {
+    viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
+    timeAgoLocalization = $state(undefined);
+    elementsLocalization = $state(undefined);
+    constructor(init) {
+        this.viewsCount = init?.viewsCount ?? this.viewsCount;
+        this.timeAgoLocalization = init?.timeAgoLocalization ?? this.timeAgoLocalization;
+        this.elementsLocalization = init?.elementsLocalization ?? this.elementsLocalization;
+    }
+}

package/dist/streams/stream-page-viewer/types.d.ts

@@ -0,0 +1,18 @@
+import type { StreamLayout } from '../layout';
+import type { StreamLayoutShortVideoModel } from '../layout/models';
+export type StreamPageViewerModel = GeneralStreamPageViewerModel | ShortVideoStreamPageViewerModel;
+export type ShortVideoStreamPageViewerModel = {
+    type: 'short-video';
+    id: string;
+    cover: string | null;
+    name: string | null;
+    shortVideo: StreamLayoutShortVideoModel;
+    layout: StreamLayout;
+};
+export type GeneralStreamPageViewerModel = {
+    type: 'general';
+    id: string;
+    cover: string | null;
+    name: string | null;
+    layout: StreamLayout;
+};

package/dist/streams/stream-page-viewer/types.js

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

package/dist/streams/stream-player/action-button.svelte

@@ -0,0 +1,38 @@
+<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 {
+  --_stream-player--action-button--size: var(--stream-player--action-button--size);
+  --_action-button--background: var(--action-button-background, #1c1c1c);
+  width: var(--_stream-player--action-button--size);
+  min-width: var(--_stream-player--action-button--size);
+  max-width: var(--_stream-player--action-button--size);
+  height: var(--_stream-player--action-button--size);
+  min-height: var(--_stream-player--action-button--size);
+  max-height: var(--_stream-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/streams/stream-player/action-button.svelte.d.ts

@@ -0,0 +1,10 @@
+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/streams/stream-player/cmp.stream-player.svelte

@@ -0,0 +1,164 @@
+<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 { toastrWarning } from '../../core/toastr';
+import { ShortVideoViewer } from '../../short-videos/short-video-viewer';
+import { mapToShortVideoViewerModel } from '../layout/models';
+import { StreamPageViewer } from '../stream-page-viewer';
+import { Loading } from '../../ui/loading';
+import { PlayerSlider } from '../../ui/player';
+import { SpotlightLayout } from '../../ui/spotlight-layout';
+import { default as Controls } from './controls.svelte';
+import { mapStreamPlayerModel } from './mapper';
+import { GetStreamDocument } from './operations.generated';
+import { default as Overview } from './stream-overview.svelte';
+import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
+import { StreamPlayerLocalization } from './stream-player-localization.svelte';
+import { StreamPlayerUiManager } from './ui-manager.svelte';
+import { onDestroy, onMount } from 'svelte';
+let { streamId, graphql, localization: localizationInit, on } = $props();
+const localization = $derived(new StreamPlayerLocalization(localizationInit));
+let model = $state(null);
+let buffer = $state.raw(null);
+let loading = $state(true);
+let activePageId = $derived.by(() => { var _a, _b; return (_b = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ''; });
+const uiManager = new StreamPlayerUiManager();
+onMount(() => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c, _d;
+    uiManager.overviewCollapsed = window && window.innerWidth < window.innerHeight;
+    try {
+        const streamPayload = yield graphql.query(GetStreamDocument, { id: streamId }).toPromise();
+        if (!((_a = streamPayload.data) === null || _a === void 0 ? void 0 : _a.stream)) {
+            toastrWarning(localization.streamNotFound);
+            (_b = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _b === void 0 ? void 0 : _b.call(on);
+            return;
+        }
+        (_c = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _c === void 0 ? void 0 : _c.call(on, {
+            title: streamPayload.data.stream.title,
+            image: ((_d = streamPayload.data.stream.cover) === null || _d === void 0 ? void 0 : _d.url) || null
+        });
+        // start tracking the stream
+        model = mapStreamPlayerModel(streamPayload.data.stream);
+        buffer = new StreamPlayerBuffer({ graphql, streamId });
+    }
+    finally {
+        loading = false;
+    }
+}));
+onDestroy(() => {
+    // end tracking the stream
+});
+const handleChangePage = (index) => {
+    if (!buffer) {
+        return;
+    }
+    buffer.setIndex(index);
+    if (uiManager.isMobileView) {
+        uiManager.overviewCollapsed = true;
+    }
+};
+const handleDimensionsChanged = (dimensions) => {
+    uiManager.updateDimensions({
+        mainViewColumnWidth: dimensions.mainSceneWidth,
+        viewTotalWidth: dimensions.totalWidth
+    });
+};
+</script>
+
+<div class="stream-player-container">
+  {#if loading}
+    <Loading positionAbsoluteCenter={true} timeout={600} />
+  {/if}
+  <div class="stream-player" style={uiManager.globalCssVariables}>
+    {#if buffer && model}
+      <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
+        <div class="stream-player__content">
+          <PlayerSlider buffer={buffer}>
+            {#snippet children({ item })}
+              {#if item.type === 'general'}
+                <StreamPageViewer
+                  page={item}
+                  on={{
+                    progress: (videoId: string, progress: number) => on?.progress?.(videoId, progress),
+                    productClick: (productId: string) => on?.productClick?.(productId)
+                  }} />
+              {:else if item.type === 'short-video'}
+                <ShortVideoViewer
+                  model={mapToShortVideoViewerModel(item.shortVideo)}
+                  on={{
+                    progress: (progress: number) => on?.progress?.(item.id, progress)
+                  }}
+                  autoplay="on-appearance"
+                  showAttachments={uiManager.showShortVideoOverlay} />
+              {/if}
+            {/snippet}
+          </PlayerSlider>
+        </div>
+      </SpotlightLayout>
+      {#if model}
+        <Overview
+          model={model}
+          buffer={buffer}
+          activePageId={activePageId}
+          uiManager={uiManager}
+          localization={localization}
+          on={{ setCurrentItem: handleChangePage }} />
+      {/if}
+      <Controls
+        buffer={buffer}
+        uiManager={uiManager}
+        localization={localization}
+        on={{
+          closePlayer: () => on?.closePlayer?.(),
+          productClick: (productId: string) => on?.productClick?.(productId)
+        }} />
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.stream-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;
+}
+
+.stream-player {
+  display: flex;
+  flex: 1;
+  padding: 0.625rem 0;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .stream-player {
+    padding: 0;
+  }
+}
+.stream-player__content {
+  width: 100%;
+  height: 100%;
+  --short-video-viewer--actions-panel--bottom: 5rem;
+}</style>

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

@@ -0,0 +1,19 @@
+import { type IStreamPlayerLocalization } from './stream-player-localization.svelte';
+import type { Client } from '@urql/core';
+type Props = {
+    streamId: string;
+    localization?: IStreamPlayerLocalization;
+    graphql: Client;
+    on?: {
+        closePlayer?: () => void;
+        streamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
+        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;