@streamscloud/embeddable 5.1.3 → 6.0.1

package/dist/streams/stream-player/internal-stream-analytics-handler.js

@@ -0,0 +1,17 @@
+import { getOrCreateProfileId } from '../../core/analytics.profile-id';
+import { constructGraphQLUrl } from '../../core/graphql';
+import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
+export class InternalStreamAnalyticsHandler {
+    constructor(graphqlOrigin) {
+        AppEventsTracker.setEndpoint(constructGraphQLUrl(graphqlOrigin));
+        AppEventsTracker.setProfileId(getOrCreateProfileId());
+    }
+    setOrganizationId = (organizationId) => AppEventsTracker.setOrganizationId(organizationId);
+    trackStreamView = (streamId) => AppEventsTracker.trackStreamView(streamId);
+    trackStreamPageView = (pageId, streamId) => AppEventsTracker.trackStreamPageView(pageId, streamId);
+    trackStreamProductClicked = (productId, streamId) => AppEventsTracker.trackStreamProductClicked(productId, streamId);
+    trackStreamEngagementTime = (streamId, engagementTime) => AppEventsTracker.trackStreamEngagementTime(streamId, engagementTime);
+    trackStreamScrollDepth = (streamId, scrollDepth) => AppEventsTracker.trackStreamScrollDepth(streamId, scrollDepth);
+    reportPageVideoViews = (videoId, streamId) => AppEventsTracker.reportPageVideoViews(videoId, streamId);
+    trackShortVideoProgress = (pageId, videoId, progress, streamId) => AppEventsTracker.trackShortVideoProgress(pageId, videoId, progress, streamId);
+}

package/dist/streams/stream-player/internal-stream-player-data-provider.d.ts

@@ -0,0 +1,10 @@
+import type { IStreamPlayerDataProvider } from './types';
+export declare class InternalStreamPlayerDataProvider implements IStreamPlayerDataProvider {
+    private graphql;
+    constructor(input: {
+        initiator?: string;
+        graphqlOrigin?: string;
+    });
+    getStream: IStreamPlayerDataProvider['getStream'];
+    getStreamPages: IStreamPlayerDataProvider['getStreamPages'];
+}

package/dist/streams/stream-player/internal-stream-player-data-provider.js

@@ -0,0 +1,48 @@
+import { ImageScale } from '../..';
+import { createLocalGQLClient } from '../../core/graphql';
+import { mapToStreamPageViewerModel } from '../stream-page-viewer';
+import { mapToStreamPlayerModel } from './mapper';
+import { GetStreamDocument, GetStreamPagesDocument } from './operations.generated';
+export class InternalStreamPlayerDataProvider {
+    graphql;
+    constructor(input) {
+        const { graphqlOrigin, initiator } = input;
+        this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
+    }
+    getStream = async (id) => {
+        const streamPayload = await this.graphql.query(GetStreamDocument, { id }).toPromise();
+        if (!streamPayload.data?.stream) {
+            return null;
+        }
+        return mapToStreamPlayerModel(streamPayload.data.stream);
+    };
+    getStreamPages = async (streamId, continuationToken) => {
+        const emptyResult = { items: [], continuationToken: null };
+        if (continuationToken === null) {
+            return emptyResult;
+        }
+        try {
+            const payload = await this.graphql
+                .query(GetStreamPagesDocument, {
+                input: {
+                    limit: 10,
+                    continuationToken,
+                    filter: { streamId }
+                },
+                image_scale: ImageScale.OriginalEncoded
+            })
+                .toPromise();
+            const data = payload.data?.streamPages;
+            if (!data) {
+                return emptyResult;
+            }
+            return {
+                items: data.items.map(mapToStreamPageViewerModel),
+                continuationToken: data.continuationToken
+            };
+        }
+        catch {
+            return emptyResult;
+        }
+    };
+}

package/dist/streams/stream-player/mapper.js

@@ -4,8 +4,10 @@ export const mapToStreamPlayerModel = (payload) => {
         id: payload.id,
         title: payload.title,
         subTitle: payload.subTitle || null,
+        cover: payload.cover?.url || null,
         createdAt: payload.createdAt,
         publishedAt: payload.publishedAt,
+        organizationId: payload.ownerProfile.id,
         header: {
             name: headerDataProvider.name,
             image: headerDataProvider.image

package/dist/streams/stream-player/operations.generated.d.ts

@@ -18,7 +18,6 @@ export type GetStreamQuery = {
             image: string | null;
             name: string;
             id: string;
-            type: SchemaTypes.ProfileType;
         };
         availableFrom: {
             image: string;
@@ -57,7 +56,6 @@ export type StreamPlayerPayloadFragment = {
         image: string | null;
         name: string;
         id: string;
-        type: SchemaTypes.ProfileType;
     };
     availableFrom: {
         image: string;

package/dist/streams/stream-player/operations.generated.js

@@ -26,8 +26,7 @@ export const StreamPlayerPayloadFragmentDoc = {
                             selections: [
                                 { kind: 'Field', name: { kind: 'Name', value: 'image' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'name' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } }
                             ]
                         }
                     },
@@ -109,8 +108,7 @@ export const GetStreamDocument = {
                             selections: [
                                 { kind: 'Field', name: { kind: 'Name', value: 'image' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'name' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } }
                             ]
                         }
                     },

package/dist/streams/stream-player/operations.graphql

@@ -27,7 +27,6 @@ fragment StreamPlayerPayloadFragment on Stream {
     image
     name
     id
-    type
   }
   availableFrom {
     image

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

@@ -1,6 +1,6 @@
 import { type StreamPageViewerModel } from '../stream-page-viewer';
 import type { IPlayerBuffer } from '../../ui/player';
-import type { Client } from '@urql/core';
+import type { IStreamPlayerDataProvider } from './types';
 export declare class StreamPlayerBuffer implements IPlayerBuffer<StreamPageViewerModel> {
     readonly loaded: StreamPageViewerModel[];
     readonly currentIndex: number;
@@ -9,17 +9,17 @@ export declare class StreamPlayerBuffer implements IPlayerBuffer<StreamPageViewe
     readonly canLoadPrevious: boolean;
     readonly navigationDisabled: boolean;
     readonly animationDuration = 300;
-    private _pagesLoader;
     private _currentIndex;
     private _loaded;
-    constructor(data: {
+    private _pagesLoader;
+    constructor(init: {
         streamId: string;
-        graphql: Client;
+        dataProvider: IStreamPlayerDataProvider;
     });
     loadMore: () => Promise<StreamPageViewerModel[]>;
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
     setIndex: (index: number) => void;
-    reset: () => void;
+    reset: () => Promise<void>;
     private warmUpBuffer;
 }

package/dist/streams/stream-player/stream-player-buffer.svelte.js

@@ -1,10 +1,7 @@
 import { ContinuationToken } from '../../core/continuation-token';
 import { CursorDataLoader } from '../../core/data-loaders';
-import { ImageScale } from '../../core/enums';
 import { Utils } from '../../core/utils';
 import {} from '../stream-page-viewer';
-import { mapToStreamPageViewerModel } from '../stream-page-viewer/mapper';
-import { GetStreamPagesDocument } from './operations.generated';
 export class StreamPlayerBuffer {
     loaded = $derived.by(() => this._loaded);
     currentIndex = $derived.by(() => this._currentIndex);
@@ -13,34 +10,19 @@ export class StreamPlayerBuffer {
     canLoadPrevious = $derived(this.currentIndex > 0);
     navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
     animationDuration = 300;
-    _pagesLoader;
     _currentIndex = $state(-1);
     _loaded = $state.raw([]);
-    constructor(data) {
-        const { streamId, graphql } = data;
+    _pagesLoader;
+    constructor(init) {
+        const { streamId, dataProvider } = init;
         this._pagesLoader = new CursorDataLoader({
             loadPage: async (continuationToken) => {
-                const payload = await graphql
-                    .query(GetStreamPagesDocument, {
-                    input: {
-                        limit: 10,
-                        continuationToken,
-                        filter: {
-                            streamId
-                        }
-                    },
-                    image_scale: ImageScale.OriginalEncoded
-                })
-                    .toPromise();
-                const data = payload.data?.streamPages;
-                if (!data) {
-                    return null;
-                }
-                const items = data.items.map(mapToStreamPageViewerModel);
+                const result = await dataProvider.getStreamPages(streamId, continuationToken.toRawFormat());
+                const items = result.items;
                 this._loaded = [...this._loaded, ...items];
                 return {
                     items: items,
-                    continuationToken: ContinuationToken.fromPayload(data.continuationToken)
+                    continuationToken: ContinuationToken.fromPayload(result.continuationToken)
                 };
             }
         });
@@ -66,15 +48,18 @@ export class StreamPlayerBuffer {
         this._currentIndex = index;
         this.warmUpBuffer();
     };
-    reset = () => {
-        this._pagesLoader.reset();
+    reset = async () => {
+        this._loaded = [];
+        this._currentIndex = -1;
+        await this._pagesLoader.reset();
+        this.warmUpBuffer();
     };
     warmUpBuffer = async () => {
         const bufferSize = 2;
         if (this.loaded.length >= this.currentIndex + bufferSize) {
             return;
         }
-        await this._pagesLoader.loadMore();
+        await this.loadMore();
         if (this._currentIndex < 0) {
             if (this.loaded.length > 0) {
                 this._currentIndex = 0;

package/dist/streams/stream-player/{cmp.stream-player.svelte → stream-player.svelte}

@@ -7,9 +7,7 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { getOrCreateProfileId } from '../../core/analytics.profile-id';
 import { handleEsc } from '../../core/document.event-handlers';
-import { constructGraphQLUrl, createLocalGQLClient } from '../../core/graphql';
 import { toastrWarning } from '../../core/toastr';
 import { ShortVideoViewer } from '../../short-videos/short-video-viewer';
 import { mapToShortVideoViewerModel } from '../layout/models';
@@ -19,15 +17,12 @@ import { PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
 import { SwipeIndicator } from '../../ui/swipe-indicator';
 import { default as Controls } from './controls.svelte';
-import { mapToStreamPlayerModel } 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';
 import { StreamPlayerUiManager } from './ui-manager.svelte';
-import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
 import { onMount } from 'svelte';
-let { streamId, graphqlOrigin, localization: localizationInit = 'en', showStreamsCloudWatermark, shortVideoSocialInteractionsHandler, initiator, on } = $props();
+let { streamId, dataProvider, analyticsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, postSocialInteractionsHandler, on } = $props();
 const localization = $derived(new StreamPlayerLocalization(localizationInit));
 let model = $state(null);
 let buffer = $state.raw(null);
@@ -54,27 +49,21 @@ const resetInactivityTimer = () => {
     }, inactiveTimeSeconds * 1000);
 };
 onMount(() => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c, _d;
+    var _a, _b;
     uiManager.overviewCollapsed = window && window.innerWidth < window.innerHeight;
     try {
-        const graphql = createLocalGQLClient(graphqlOrigin, { 'x-initiator': initiator !== null && initiator !== void 0 ? initiator : 'player/stream' });
-        const streamPayload = yield graphql.query(GetStreamDocument, { id: streamId }).toPromise();
-        if (!((_a = streamPayload.data) === null || _a === void 0 ? void 0 : _a.stream)) {
+        const stream = yield dataProvider.getStream(streamId);
+        if (!stream) {
             toastrWarning(localization.streamNotFound);
-            (_b = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _b === void 0 ? void 0 : _b.call(on);
+            (_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
             return;
         }
-        AppEventsTracker.setEndpoint(constructGraphQLUrl(graphqlOrigin));
-        AppEventsTracker.setProfileId(getOrCreateProfileId());
-        (_c = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _c === void 0 ? void 0 : _c.call(on, {
-            ownerId: streamPayload.data.stream.ownerProfile.id,
-            title: streamPayload.data.stream.title,
-            image: ((_d = streamPayload.data.stream.cover) === null || _d === void 0 ? void 0 : _d.url) || null
-        });
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(stream.organizationId);
+        (_b = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _b === void 0 ? void 0 : _b.call(on, { title: stream.title, image: stream.cover });
         // start tracking the stream
-        model = mapToStreamPlayerModel(streamPayload.data.stream);
-        buffer = new StreamPlayerBuffer({ graphql, streamId });
-        AppEventsTracker.trackStreamView(streamPayload.data.stream.id);
+        model = stream;
+        buffer = new StreamPlayerBuffer({ streamId, dataProvider: dataProvider });
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamView(stream.id);
         startActivityTracking();
     }
     finally {
@@ -144,7 +133,7 @@ const onPageActivated = (id) => {
     const page = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
     background = (page === null || page === void 0 ? void 0 : page.cover) || null;
     if (page) {
-        AppEventsTracker.trackStreamPageView(id, streamId);
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamPageView(id, streamId);
         const currentIndex = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.findIndex((p) => p.id === id);
         if (currentIndex !== undefined && currentIndex > maxPageIndexViewed) {
             maxPageIndexViewed = currentIndex;
@@ -152,23 +141,23 @@ const onPageActivated = (id) => {
     }
 };
 const onProductCardClick = (productId) => {
-    AppEventsTracker.trackStreamProductClicked(productId, streamId);
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductClicked(productId, streamId);
 };
 const onPlayerClose = () => {
     var _a;
     stopActivityTracking();
-    AppEventsTracker.trackStreamEngagementTime(streamId, totalEngagementTimeSeconds);
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamEngagementTime(streamId, totalEngagementTimeSeconds);
     if (buffer && buffer.loaded.length > 0) {
         let scrollDepth = Math.round(((maxPageIndexViewed + 1) / buffer.loaded.length) * 100);
-        AppEventsTracker.trackStreamScrollDepth(streamId, scrollDepth);
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamScrollDepth(streamId, scrollDepth);
     }
-    (_a = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _a === void 0 ? void 0 : _a.call(on);
+    (_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
 };
 const onPageDeactivated = (itemId) => {
-    AppEventsTracker.reportPageVideoViews(itemId, streamId);
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.reportPageVideoViews(itemId, streamId);
 };
 const onProgress = (pageId, videoId, progress) => {
-    AppEventsTracker.trackShortVideoProgress(pageId, videoId, progress, streamId);
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProgress(pageId, videoId, progress, streamId);
 };
 </script>
 
@@ -211,7 +200,7 @@ const onProgress = (pageId, videoId, progress) => {
                     progress: (progress) => onProgress(item.id, item.shortVideo.id, progress)
                   }}
                   autoplay="on-appearance"
-                  socialInteractionsHandler={shortVideoSocialInteractionsHandler}
+                  socialInteractionsHandler={postSocialInteractionsHandler}
                   localization={localization.shortVideoViewerLocalization}
                   showAttachments={uiManager.showShortVideoOverlay}
                   showControls={uiManager.showShortVideoOverlay} />
@@ -239,7 +228,7 @@ const onProgress = (pageId, videoId, progress) => {
         buffer={buffer}
         uiManager={uiManager}
         localization={localization}
-        shortVideoSocialInteractionsHandler={shortVideoSocialInteractionsHandler}
+        postSocialInteractionsHandler={postSocialInteractionsHandler}
         on={{
           closePlayer: () => onPlayerClose(),
           productClick: (productId: String) => onProductCardClick(productId)
@@ -296,11 +285,4 @@ const onProgress = (pageId, videoId, progress) => {
 .stream-player__content {
   width: 100%;
   height: 100%;
-  --short-video-viewer--actions-panel--bottom: 5rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .stream-player__content {
-    --short-video-viewer--actions-panel--top: 5rem;
-  }
 }</style>

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

@@ -0,0 +1,4 @@
+import type { StreamPlayerProps } from './types';
+declare const StreamPlayer: import("svelte").Component<StreamPlayerProps, {}, "">;
+type StreamPlayer = ReturnType<typeof StreamPlayer>;
+export default StreamPlayer;

package/dist/streams/stream-player/types.d.ts

@@ -1,12 +1,52 @@
+import type { Locale } from '../../core/locale';
+import type { IPostSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
+import type { StreamPageViewerModel } from '../stream-page-viewer';
+import type { IStreamPlayerLocalization } from './stream-player-localization';
 export type StreamPlayerModel = {
     id: string;
     title: string;
+    cover: string | null;
     subTitle: string | null;
     createdAt: string;
     publishedAt: string | null;
+    organizationId: string;
     header: {
         image: string | null;
         name: string;
     };
     pagesCount: number;
 };
+export type StreamPlayerProps = PlayerSettings & {
+    dataProvider: IStreamPlayerDataProvider;
+    analyticsHandler?: IStreamAnalyticsHandler;
+};
+export type PlayerSettings = {
+    streamId: string;
+    localization?: IStreamPlayerLocalization | Locale;
+    showStreamsCloudWatermark?: boolean;
+    postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
+    on?: {
+        streamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
+        playerClosed?: () => void;
+    };
+};
+export interface IStreamPlayerDataProvider {
+    getStream: (streamId: string) => Promise<StreamPlayerModel | null>;
+    getStreamPages: (streamId: string, continuationToken: string | null | undefined) => Promise<{
+        items: StreamPageViewerModel[];
+        continuationToken: string | null;
+    }>;
+}
+export interface IStreamAnalyticsHandler {
+    setOrganizationId: (organizationId: string) => void;
+    trackStreamView: (streamId: string) => void;
+    trackStreamPageView: (pageId: string, streamId: string) => void;
+    trackStreamProductClicked: (productId: string, streamId: string) => void;
+    trackStreamEngagementTime: (streamId: string, engagementTime: number) => void;
+    trackStreamScrollDepth: (streamId: string, scrollDepth: number) => void;
+    reportPageVideoViews: (videoId: string, streamId: string) => void;
+    trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
+}

package/dist/ui/dropdown/cmp.dropdown.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">import { runningInBrowser } from '../../core/browser';
+import { isIgnored } from './dropdown-ignore';
+import { Icon } from '../icon';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import { createPopper } from '@popperjs/core';
+import { onDestroy } from 'svelte';
+let { position = 'bottom-start', disabled = false, keepDropdownOpen = false, fixedPosition = false, offset = 8, boundaryMargin = 8, on, children, trigger, isOpenRequested } = $props();
+$effect(() => {
+    var _a;
+    (_a = on === null || on === void 0 ? void 0 : on.mounted) === null || _a === void 0 ? void 0 : _a.call(on, {
+        toggleOpen: (value) => {
+            if (value === undefined) {
+                if (opened) {
+                    close();
+                }
+                else {
+                    open();
+                }
+            }
+            else {
+                if (!value) {
+                    close();
+                }
+                else {
+                    open();
+                }
+            }
+        }
+    });
+});
+const id = Math.random();
+let opened = $state(false);
+$effect(() => {
+    var _a, _b;
+    if (opened) {
+        (_a = on === null || on === void 0 ? void 0 : on.opened) === null || _a === void 0 ? void 0 : _a.call(on);
+    }
+    else {
+        (_b = on === null || on === void 0 ? void 0 : on.closed) === null || _b === void 0 ? void 0 : _b.call(on);
+    }
+});
+$effect(() => {
+    popper === null || popper === void 0 ? void 0 : popper.setOptions({ placement: position });
+});
+$effect(() => {
+    if (isOpenRequested) {
+        open();
+    }
+});
+let triggerRef = $state(null);
+let dropdownRef;
+let popper;
+onDestroy(() => {
+    removeWindowClickListener();
+});
+const open = () => {
+    opened = true;
+    window.addEventListener('click', close);
+};
+const close = () => {
+    opened = false;
+    removeWindowClickListener();
+};
+const removeWindowClickListener = () => {
+    if (runningInBrowser()) {
+        window.removeEventListener('click', close);
+    }
+};
+const handleClick = (event) => {
+    event.stopPropagation();
+    if (disabled) {
+        return;
+    }
+    if (!opened) {
+        open();
+        return;
+    }
+    const checkCanClose = (node) => {
+        if (keepDropdownOpen) {
+            return false;
+        }
+        while (node && node !== dropdownRef) {
+            if (isIgnored(node) || node.classList.contains('flatpickr-calendar')) {
+                return false;
+            }
+            node = node.parentElement;
+        }
+        return true;
+    };
+    if (checkCanClose(event.target)) {
+        close();
+    }
+};
+const initPopper = (node, _triggerEl) => {
+    popper = createPopper(_triggerEl, node, {
+        placement: position,
+        strategy: fixedPosition ? 'fixed' : 'absolute',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: () => {
+                        return [0, offset];
+                    }
+                }
+            },
+            { name: 'eventListeners', enabled: opened },
+            { name: 'flip' },
+            {
+                name: 'preventOverflow',
+                options: {
+                    boundary: document.body,
+                    padding: boundaryMargin
+                }
+            }
+        ]
+    });
+    return {
+        update(_triggerEl) {
+            popper.state.elements.reference = _triggerEl;
+            popper.update();
+        },
+        destroy() {
+            popper.destroy();
+        }
+    };
+};
+</script>
+
+<div class="dropdown" class:dropdown--disabled={disabled} onclick={handleClick} onkeydown={() => ({})} bind:this={dropdownRef} role="none">
+  <button type="button" class="dropdown__trigger" bind:this={triggerRef}>
+    {#if trigger}
+      {@render trigger()}
+    {:else}
+      <Icon src={IconChevronDown} />
+    {/if}
+  </button>
+  {#if opened}
+    <div use:initPopper={triggerRef} class="dropdown__content" role="tooltip" tabindex="-1">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.dropdown {
+  --_dropdown--width: var(--dropdown--width, auto);
+  --_dropdown--content--background-color: var(--dropdown--content--background-color, transparent);
+  --_dropdown--content--box-shadow: var(--dropdown--content--box-shadow, none);
+  height: 100%;
+  width: var(--_dropdown--width);
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.dropdown :global([contenteditable]) {
+  user-select: text;
+}
+.dropdown__trigger {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+.dropdown--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.dropdown__content {
+  box-shadow: var(--_dropdown--content--box-shadow);
+  background: var(--_dropdown--content--background-color);
+  width: max-content;
+  z-index: 999;
+}
+.dropdown :global([data-popper-escaped]) {
+  visibility: hidden !important;
+}</style>

package/dist/ui/dropdown/cmp.dropdown.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { DropdownPosition } from './index';
+import { type Snippet } from 'svelte';
+type Props = {
+    position?: DropdownPosition;
+    disabled?: boolean;
+    keepDropdownOpen?: boolean;
+    fixedPosition?: boolean;
+    offset?: number;
+    boundaryMargin?: number;
+    on?: {
+        opened?: () => void;
+        closed?: () => void;
+        mounted?: (callbacks: {
+            toggleOpen: (value?: boolean) => void;
+        }) => void;
+    };
+    children: Snippet;
+    trigger?: Snippet;
+    isOpenRequested?: boolean;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/dropdown/dropdown-ignore.d.ts

@@ -0,0 +1,6 @@
+/** @type {import('svelte/action').Action}  */
+export declare const dropdownIgnore: (node: HTMLElement, value?: boolean) => {
+    destroy(): void;
+};
+export declare const ignoreAttribute = "dropdownIgnore";
+export declare const isIgnored: (node: HTMLElement) => boolean;

package/dist/ui/dropdown/dropdown-ignore.js

@@ -0,0 +1,11 @@
+/** @type {import('svelte/action').Action}  */
+export const dropdownIgnore = (node, value = true) => {
+    node.dataset[ignoreAttribute] = value.toString();
+    return {
+        destroy() {
+            // the node has been removed from the DOM
+        }
+    };
+};
+export const ignoreAttribute = 'dropdownIgnore';
+export const isIgnored = (node) => node.dataset[ignoreAttribute] === 'true';

package/dist/ui/dropdown/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Dropdown } from './cmp.dropdown.svelte';
+export type DropdownPosition = import('@popperjs/core').Placement;
+export { dropdownIgnore } from './dropdown-ignore';