@streamscloud/embeddable 14.0.0-rc.0 → 14.0.0

package/dist/streams/sharing/types.d.ts

@@ -0,0 +1,5 @@
+export interface IStreamSharingHandler {
+    share: (streamId: string) => PromiseLike<void>;
+}
+type PromiseLike<T> = T | Promise<T>;
+export {};

package/dist/streams/sharing/types.js

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

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

@@ -1,6 +1,7 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
+import { ResponsivePlayerButtonsGroup } from '../../ui/player/button';
 import { StreamPageViewerLocalization } from './stream-page-viewer-localization';
-let { page, trackingParams, locale, on } = $props();
+let { page, trackingParams, overlayControls, locale, on } = $props();
 const localization = $derived(new StreamPageViewerLocalization(locale));
 </script>
 
@@ -11,5 +12,46 @@ const localization = $derived(new StreamPageViewerLocalization(locale));
         <StreamLayoutSlotContent model={slot} trackingParams={trackingParams} on={on} locale={localization.elementsLocale} />
       </StreamLayoutSlot>
     {/each}
+    {#snippet controls()}
+      {#if overlayControls?.enabled && overlayControls.actions.length}
+        <div class="controls-panel">
+          <ResponsivePlayerButtonsGroup
+            actions={overlayControls.actions}
+            activeColor={overlayControls.colors?.active ?? null}
+            backgroundColor={overlayControls.colors?.inactive ?? null}
+            scaleEffect={true} />
+        </div>
+      {/if}
+    {/snippet}
   </StreamPageLayout>
 {/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.controls-panel {
+  position: absolute;
+  left: auto;
+  right: 0;
+  bottom: 6.25rem;
+  gap: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 0 0.625rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .controls-panel {
+    padding-right: 0;
+  }
+}</style>

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

@@ -1,10 +1,19 @@
 import type { Locale } from '../../core/locale';
 import { type StreamTrackingParams } from '../layout';
+import { type PlayerButtonDef } from '../../ui/player/button';
 import type { StreamPageViewerModel } from './types';
 type Props = {
     page: StreamPageViewerModel;
     trackingParams: StreamTrackingParams;
     locale: Locale;
+    overlayControls?: {
+        enabled: boolean;
+        colors: {
+            active: string | null;
+            inactive: string | null;
+        } | null;
+        actions: PlayerButtonDef[];
+    };
     on?: {
         productClick: (productId: string) => void;
         productImpression?: (productId: string) => void;

package/dist/streams/streams-player/cmp.streams-player.svelte

@@ -11,7 +11,7 @@ import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { createShadowRoot } from '../../ui/shadow-dom';
 import { default as StreamsPlayerProxy } from './streams-player-proxy.svelte';
 import { mount, unmount } from 'svelte';
-let { dataProvider, postSocialInteractionsHandler, amplificationParameters, playerSettings, analyticsHandler, on } = $props();
+let { dataProvider, postSocialInteractionsHandler, sharingHandler, amplificationParameters, playerSettings, analyticsHandler, on } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(StreamsPlayerProxy, {
@@ -19,6 +19,7 @@ const initHost = (node) => {
         props: {
             dataProvider,
             postSocialInteractionsHandler,
+            sharingHandler,
             analyticsHandler,
             amplificationParameters,
             playerSettings,

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

@@ -1,9 +1,11 @@
 import type { Locale } from '../../core/locale';
 import type { IPostSocialInteractionsHandler } from '../../posts';
+import type { IStreamSharingHandler } from '../sharing';
 import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters } from './types';
 type Props = {
     dataProvider: IStreamsPlayerDataProvider;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IStreamSharingHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
     playerSettings?: {

package/dist/streams/streams-player/index.d.ts

@@ -1,6 +1,7 @@
 import type { Locale } from '../../core/locale';
 import { type IMediaCenterDataProvider } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
+import type { IStreamSharingHandler } from '../sharing';
 import type { StreamPageViewerModel } from '../stream-page-viewer/types';
 import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel } from './types';
 export { type StreamPlayerModel, type StreamPageViewerModel };
@@ -75,6 +76,7 @@ export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterD
 export declare function openStreamsPlayer(init: {
     dataProvider: IStreamsPlayerDataProvider;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IStreamSharingHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
     playerSettings?: StreamsPlayerSettings;

package/dist/streams/streams-player/index.js

@@ -72,7 +72,7 @@ export {};
  * ```
  */
 export function openStreamsPlayer(init) {
-    const { dataProvider, analyticsHandler, postSocialInteractionsHandler, amplificationParameters, playerSettings, on } = init;
+    const { dataProvider, analyticsHandler, postSocialInteractionsHandler, sharingHandler, amplificationParameters, playerSettings, on } = init;
     const shadowHost = new ModalShadowHost();
     let mounted = null;
     const makeCloseOrchestrator = () => new CloseOrchestrator({
@@ -93,6 +93,7 @@ export function openStreamsPlayer(init) {
             amplificationParameters,
             playerSettings,
             postSocialInteractionsHandler,
+            sharingHandler,
             closeOrchestrator: makeCloseOrchestrator(),
             on: {
                 streamActivated: (data) => {

package/dist/streams/streams-player/streams-player-proxy.svelte

@@ -3,7 +3,7 @@ import {} from '../../ui/player/close-orchestrator';
 import { ShadowRoot } from '../../ui/shadow-dom';
 import { default as StreamsPlayerView } from './streams-player-view.svelte';
 import { untrack } from 'svelte';
-let { dataProvider, postSocialInteractionsHandler, amplificationParameters, closeOrchestrator, playerSettings, analyticsHandler, on } = $props();
+let { dataProvider, postSocialInteractionsHandler, sharingHandler, amplificationParameters, closeOrchestrator, playerSettings, analyticsHandler, on } = $props();
 let backgroundImageUrl = $state(null);
 const handleBackgroundImagedLoaded = (url) => {
     backgroundImageUrl = url;
@@ -21,6 +21,7 @@ $effect(() => {
   <StreamsPlayerView
     dataProvider={{ type: 'provider', provider: dataProvider }}
     postSocialInteractionsHandler={postSocialInteractionsHandler}
+    sharingHandler={sharingHandler}
     analyticsHandler={analyticsHandler}
     amplificationParameters={amplificationParameters}
     playerSettings={playerSettings}

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

@@ -1,10 +1,12 @@
 import type { Locale } from '../../core/locale';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
+import type { IStreamSharingHandler } from '../sharing';
 import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
 import type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, StreamAmplificationParameters } from './types';
 type Props = {
     dataProvider: IStreamsPlayerDataProvider;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IStreamSharingHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
     closeOrchestrator: ICloseOrchestrator;

package/dist/streams/streams-player/streams-player-view.svelte

@@ -8,18 +8,25 @@
     });
 };
 var _a;
-import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
-import { ContentPlayerSettings } from '../../content-player/content-player-settings.svelte';
 import { preloadImage } from '../../core/image-preloader';
+import { PostAttachments } from '../../posts/attachments';
+import { PostModel } from '../../posts/model';
+import { PostViewer } from '../../posts/post-viewer';
+import { StreamActionsGenerator } from '../controls';
 import { mapToPostModel } from '../layout/models';
 import { StreamPageViewer } from '../stream-page-viewer';
+import { IconColor } from '../../ui/icon';
+import { ContentPlayer, ContentPlayerConfig, ContentPlayerSettings } from '../../ui/player/content-player';
 import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
+import IconDelete from '@fluentui/svg-icons/icons/delete_32_regular.svg?raw';
+import IconEdit from '@fluentui/svg-icons/icons/edit_32_regular.svg?raw';
 import { untrack } from 'svelte';
-let { dataProvider, analyticsHandler, postSocialInteractionsHandler, amplificationParameters, playerSettings, closeOrchestrator, on } = $props();
+let { dataProvider, analyticsHandler, postSocialInteractionsHandler, sharingHandler, amplificationParameters, managementActions, playerSettings, closeOrchestrator, on } = $props();
 const localization = $derived(new StreamPlayerLocalization((_a = playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.locale) !== null && _a !== void 0 ? _a : 'en'));
 let currentStreamModel = $state(null);
+let mappedPostsCache = new Map();
 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 : ''; });
 let buffer = $state(null);
 let totalEngagementTimeSeconds = 0;
@@ -33,6 +40,7 @@ $effect(() => {
     untrack(() => {
         buffer = null;
         contentPlayerConfig.playerBuffer = null;
+        mappedPostsCache = new Map();
         initPlayerBuffer(dataProvider);
     });
     return () => { };
@@ -50,6 +58,9 @@ $effect(() => {
         var _a;
         if (stream) {
             currentStreamModel = stream;
+            if (stream.organizationId) {
+                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(stream.organizationId);
+            }
             (_a = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _a === void 0 ? void 0 : _a.call(on, { id: stream.id, title: stream.title, image: stream.cover });
             analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamView(stream.id);
             startActivityTracking();
@@ -94,36 +105,8 @@ const initPlayerBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, fun
 });
 const contentPlayerConfig = new ContentPlayerConfig({
     playerBuffer: null,
-    mappers: {
-        postModelFromCurrentItem: (item) => {
-            if (item.type === 'short-video' && item.shortVideo) {
-                return mapToPostModel(item.shortVideo);
-            }
-            return null;
-        }
-    },
-    socialInteractionsHandler: postSocialInteractionsHandler,
     settings: new ContentPlayerSettings(playerSettings),
     closeOrchestrator,
-    callbacks: {
-        videoProgress: (pageId, videoId, progress) => {
-            onProgress(pageId, videoId, progress);
-        },
-        productClick: (id, videoId) => {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(id, videoId);
-            onStreamProductClick(id);
-        },
-        productImpression: (id, videoId) => {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(id, videoId);
-            onStreamProductImpression(id);
-        },
-        adClick: (id) => {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(id);
-        },
-        adImpression: (id) => {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(id);
-        }
-    },
     playerSliderCallbacks: {
         itemActivated: (item) => onPageActivated(item),
         itemDeactivated: (itemId) => executeWithStreamId((streamId) => {
@@ -131,6 +114,22 @@ const contentPlayerConfig = new ContentPlayerConfig({
         })
     }
 });
+const streamActionsGenerator = new StreamActionsGenerator({
+    postSocialInteractionsHandler,
+    sharingHandler,
+    on: { attachmentClicked: () => (contentPlayerConfig.uiManager.attachmentsCollapsed = !contentPlayerConfig.uiManager.attachmentsCollapsed) }
+});
+const itemAsPostModel = (item) => {
+    if (item.type !== 'short-video' || !item.shortVideo) {
+        return null;
+    }
+    if (mappedPostsCache.has(item.shortVideo.id)) {
+        return mappedPostsCache.get(item.shortVideo.id);
+    }
+    const postModel = new PostModel(mapToPostModel(item.shortVideo));
+    mappedPostsCache.set(item.shortVideo.id, postModel);
+    return postModel;
+};
 const handleChangePage = (index) => {
     if (!buffer) {
         return;
@@ -157,6 +156,23 @@ const onPageActivated = (id) => {
         }
     }
 };
+const onShortVideoProgress = (pageId, videoId, progress) => {
+    onProgress(pageId, videoId, progress);
+};
+const onShortVideoProductClick = (id, videoId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(id, videoId);
+    onStreamProductClick(id);
+};
+const onShortVideoProductImpression = (id, videoId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(id, videoId);
+    onStreamProductImpression(id);
+};
+const onShortVideoAdClick = (id) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(id);
+};
+const onShortVideoAdImpression = (id) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(id);
+};
 const onStreamProductClick = (productId) => {
     executeWithStreamId((streamId) => {
         analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductClicked(productId, streamId);
@@ -178,6 +194,45 @@ const executeWithStreamId = (action) => {
     }
     action(currentStreamModel.id);
 };
+const currentItemActions = $derived.by(() => {
+    if (!(buffer === null || buffer === void 0 ? void 0 : buffer.current) || !buffer.activeChunk) {
+        return [];
+    }
+    const result = [];
+    if (buffer.current.type === 'general') {
+        result.push(...streamActionsGenerator.getGeneralStreamPageActions({
+            streamId: buffer.activeChunk.model.id,
+            streamPageId: buffer.current.id
+        }));
+    }
+    else {
+        const postModel = itemAsPostModel(buffer.current);
+        const handler = streamActionsGenerator.getPostActionsHandler({
+            model: postModel,
+            streamId: buffer.activeChunk.model.id,
+            streamPageId: buffer.current.id
+        });
+        result.push(...handler.actions);
+    }
+    if (managementActions === null || managementActions === void 0 ? void 0 : managementActions.editStream) {
+        result.push({
+            icon: IconEdit,
+            callback: () => __awaiter(void 0, void 0, void 0, function* () {
+                yield managementActions.editStream(buffer.activeChunk.model.id);
+            })
+        });
+    }
+    if (managementActions === null || managementActions === void 0 ? void 0 : managementActions.deleteStreamPage) {
+        result.push({
+            icon: IconDelete,
+            iconColor: IconColor.Red,
+            callback: () => __awaiter(void 0, void 0, void 0, function* () {
+                yield managementActions.deleteStreamPage(buffer.current.id);
+            })
+        });
+    }
+    return result;
+});
 //#region Activity Tracking
 const resetInactivityTimer = () => {
     if (!isActive) {
@@ -222,22 +277,83 @@ const stopActivityTracking = () => {
 //#edregion Activity Tracking
 </script>
 
-<ContentPlayer config={contentPlayerConfig}>
-  {#snippet nonPostItemView({ item })}
+{#snippet attachmentsView(data: { item: StreamPageViewerModel })}
+  {@const postModel = itemAsPostModel(data.item)}
+  {#if postModel}
+    <PostAttachments
+      model={postModel}
+      colors={{
+        background: contentPlayerConfig.playerColors.cardBackground,
+        price: contentPlayerConfig.playerColors.price,
+        salePrice: contentPlayerConfig.playerColors.salePrice,
+        buttonBackground: contentPlayerConfig.playerColors.cardButton
+      }}
+      trackingParams={contentPlayerConfig.trackingParams}
+      locale={contentPlayerConfig.settings.locale}
+      on={{
+        productClick: (id) => onShortVideoProductClick(id, postModel.id),
+        productImpression: (id) => onShortVideoProductImpression(id, postModel.id),
+        adClick: (id) => onShortVideoAdClick(id),
+        adImpression: (id) => onShortVideoAdImpression(id)
+      }} />
+  {/if}
+{/snippet}
+<ContentPlayer
+  config={contentPlayerConfig}
+  itemActions={currentItemActions}
+  attachmentsView={buffer?.current && itemAsPostModel(buffer.current)?.attachments ? attachmentsView : undefined}>
+  {#snippet itemView({ item })}
     {#if item.type === 'general'}
       <StreamPageViewer
         page={item}
         trackingParams={streamTrackingParams}
         locale={localization.locale}
+        overlayControls={{
+          enabled: contentPlayerConfig.uiManager.showControlsOverlay,
+          colors: {
+            active: contentPlayerConfig.playerColors.button,
+            inactive: contentPlayerConfig.playerColors.buttonInactive
+          },
+          actions: buffer?.activeChunk
+            ? streamActionsGenerator.getGeneralStreamPageActions({ streamId: buffer.activeChunk.model.id, streamPageId: item.id })
+            : []
+        }}
         on={{
           progress: (videoId, progress) => onProgress(item.id, videoId, progress),
           productClick: (productId) => onStreamProductClick(productId),
           productImpression: (productId) => onStreamProductImpression(productId)
         }} />
+    {:else}
+      {@const postModel = itemAsPostModel(item)}
+      {#if postModel}
+        {@const handler = buffer?.activeChunk
+          ? streamActionsGenerator.getPostActionsHandler({
+              model: postModel,
+              streamId: buffer.activeChunk.model.id,
+              streamPageId: item.id
+            })
+          : null}
+        <PostViewer
+          model={postModel}
+          controlsColors={{ active: contentPlayerConfig.playerColors.button, inactive: contentPlayerConfig.playerColors.buttonInactive }}
+          trackingParams={contentPlayerConfig.trackingParams}
+          enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
+          enableControls={contentPlayerConfig.uiManager.showControlsOverlay}
+          controlActions={handler?.actions ?? []}
+          autoplay="on-appearance"
+          locale={contentPlayerConfig.settings.locale}
+          on={{
+            progress: (progress) => onShortVideoProgress(item.id, postModel.id, progress),
+            productClick: (productId) => onShortVideoProductClick(productId, postModel.id),
+            productImpression: (productId) => onShortVideoProductImpression(productId, postModel.id),
+            adClick: (adId) => onShortVideoAdClick(adId),
+            adImpression: (adId) => onShortVideoAdImpression(adId)
+          }} />
+      {/if}
     {/if}
   {/snippet}
   {#snippet overviewPanelContent()}
-    {#if contentPlayerConfig.playerBuffer && buffer && currentStreamModel}
+    {#if buffer}
       <Overview
         buffer={buffer}
         activePageId={activePageId}

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

@@ -1,6 +1,7 @@
 import type { Locale } from '../../core/locale';
 import type { ThemeValue } from '../../core/theme';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
+import type { IStreamSharingHandler } from '../sharing';
 import type { StreamPageViewerModel } from '../stream-page-viewer';
 import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
 import type { PlayerColors } from '../../ui/player/colors';
@@ -24,8 +25,10 @@ export type StreamsPlayerProps = {
         provider: IStreamsPlayerDataProvider;
     };
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IStreamSharingHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
+    managementActions?: StreamManagementActions;
     playerSettings?: StreamsPlayerSettings;
     closeOrchestrator: ICloseOrchestrator;
     on?: {
@@ -51,6 +54,10 @@ export type StreamAmplificationParameters = {
     campaignName: string;
     source: string;
 };
+export type StreamManagementActions = {
+    editStream: ((id: string) => void) | null;
+    deleteStreamPage: ((pageId: string) => void) | null;
+};
 export interface IStreamsPlayerDataProvider {
     initialData: {
         prefetchedStreams: StreamPlayerModel[];
@@ -63,6 +70,7 @@ export interface IStreamsPlayerDataProvider {
     onEndReached?: () => void;
 }
 export interface IStreamAnalyticsHandler {
+    setOrganizationId: (organizationId: string) => void;
     trackStreamView: (streamId: string) => void;
     trackStreamPageView: (pageId: string, streamId: string) => void;
     trackStreamProductImpression: (productId: string, streamId: string) => void;

package/dist/ui/button/resources/button-theme.svelte

@@ -36,6 +36,7 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
 }
 .button-theme {
   display: contents;
+  /*Size*/
 }
 .button-theme--standard {
   --button--font--color: var(--sc-mc-color--text-primary);
@@ -45,15 +46,12 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
   --button--background--disabled: #f2f2f3;
   --button--border: 1px solid #e5e7eb;
 }
-:global([data-theme='dark']) .button-theme--standard {
+:global([data-theme="dark"]) .button-theme--standard {
   --button--background--hover: #1f2937;
   --button--background--active: #374151;
   --button--background--disabled: #374151;
   --button--border: 1px solid #4b5563;
 }
-.button-theme {
-  /*Size*/
-}
 .button-theme--size-standard {
   --button--height: 2em;
   --button--text--font-size: 0.75em;

package/dist/ui/card-actions/card-action-container.d.ts

@@ -0,0 +1,2 @@
+import type { Action } from 'svelte/action';
+export declare const cardActionContainer: Action;

package/dist/ui/card-actions/card-action-container.js

@@ -0,0 +1,17 @@
+export const cardActionContainer = (node) => {
+    const handleHover = () => {
+        node.style.setProperty('--card-actions--opacity', '1');
+    };
+    const handleHoverOut = () => {
+        node.style.setProperty('--card-actions--opacity', '');
+    };
+    node.addEventListener('mouseenter', handleHover);
+    node.addEventListener('mouseleave', handleHoverOut);
+    node.style.position = 'relative';
+    return {
+        destroy() {
+            node.removeEventListener('mouseenter', handleHover);
+            node.removeEventListener('mouseleave', handleHoverOut);
+        }
+    };
+};

package/dist/ui/card-actions/cmp.card-action.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">import { Icon, IconColor } from '../icon';
+let { action, on } = $props();
+</script>
+
+<button
+  type="button"
+  class="card-action"
+  title={action.title ?? ''}
+  onclick={(e) => {
+    if (!action.propagateClickEvent) {
+      e.stopPropagation();
+    }
+
+    action.callback?.();
+    on?.click?.();
+  }}>
+  <Icon src={action.icon} color={action.iconColor ?? IconColor.Text} />
+</button>
+
+<style>.card-action {
+  --_card-action--padding: var(--card-action-padding, 0.3125em);
+  padding: var(--_card-action--padding);
+  transition: transform 0.3s;
+  line-height: 0;
+}
+.card-action:hover {
+  transform: scale(1.2);
+}</style>

package/dist/ui/card-actions/cmp.card-action.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CardActionModel } from './types';
+type Props = {
+    action: CardActionModel;
+    on?: {
+        click?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/card-actions/cmp.card-actions.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">import { Dropdown } from '../dropdown';
+import CardAction from './cmp.card-action.svelte';
+import IconMoreVertical from '@fluentui/svg-icons/icons/more_vertical_20_regular.svg?raw';
+let { actions, dropdownPosition = 'bottom-start' } = $props();
+let toggleDropdown = $state.raw(null);
+let closeDropdown = () => {
+    if (toggleDropdown) {
+        toggleDropdown(false);
+    }
+};
+</script>
+
+{#if actions.length}
+  <div class="card-actions">
+    <Dropdown position={dropdownPosition} on={{ mounted: (v) => (toggleDropdown = v.toggleOpen) }}>
+      {#snippet trigger()}
+        <CardAction action={{ icon: IconMoreVertical, propagateClickEvent: true }} />
+      {/snippet}
+
+      <div class="card-actions__dropdown-content">
+        {#each actions as action (action)}
+          <CardAction action={action} on={{ click: closeDropdown }} />
+        {/each}
+      </div>
+    </Dropdown>
+  </div>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.card-actions {
+  --_card-actions--opacity: var(--card-actions--opacity, 0);
+  --_card-actions--top-offset: var(--card-actions--top-offset, 0.3125em);
+  --_card-actions--left-offset: var(--card-actions--left-offset, 0.3125em);
+  --_card-actions--right-offset: var(--card-actions--right-offset, auto);
+  position: absolute;
+  top: var(--_card-actions--top-offset);
+  right: var(--_card-actions--right-offset);
+  left: var(--_card-actions--left-offset);
+  --icon--stroke-width: 0.3;
+  opacity: var(--_card-actions--opacity);
+  transition: opacity ease-in-out 0.4s;
+  display: flex;
+  background: var(--sc-mc-color--bg-card-action);
+  border-radius: 0.1875em;
+}
+.card-actions__dropdown-content {
+  padding: 0 0.3125em;
+  background: var(--sc-mc-color--bg-card-action);
+}
+@media (any-hover: none) {
+  .card-actions {
+    opacity: 1;
+  }
+}
+
+:global(.card-actions-container) {
+  position: relative;
+}
+:global(.card-actions-container):hover .card-actions {
+  opacity: 1;
+}</style>

package/dist/ui/card-actions/cmp.card-actions.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type DropdownPosition } from '../dropdown';
+import type { CardActionModel } from './types';
+type Props = {
+    actions: CardActionModel[];
+    dropdownPosition?: DropdownPosition;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/card-actions/index.d.ts

@@ -0,0 +1,4 @@
+export { default as CardActions } from './cmp.card-actions.svelte';
+export { default as CardAction } from './cmp.card-action.svelte';
+export { cardActionContainer } from './card-action-container';
+export type { CardActionModel } from './types';

package/dist/ui/card-actions/index.js

@@ -0,0 +1,3 @@
+export { default as CardActions } from './cmp.card-actions.svelte';
+export { default as CardAction } from './cmp.card-action.svelte';
+export { cardActionContainer } from './card-action-container';