@streamscloud/blocks 0.1.0

package/dist/feed-player/feed-player-localization.js

@@ -0,0 +1,70 @@
+import { AppLocale } from '@streamscloud/kit/core/locale';
+export class FeedPlayerLocalization {
+    get tabInformation() {
+        return loc.tabInformation[AppLocale.current];
+    }
+    get tabProduct() {
+        return loc.tabProduct[AppLocale.current];
+    }
+    get tabArticle() {
+        return loc.tabArticle[AppLocale.current];
+    }
+    get tabRecommended() {
+        return loc.tabRecommended[AppLocale.current];
+    }
+    get tabPlaylist() {
+        return loc.tabPlaylist[AppLocale.current];
+    }
+    get show() {
+        return loc.show[AppLocale.current];
+    }
+    get relatedContent() {
+        return loc.relatedContent[AppLocale.current];
+    }
+    get suggestedPlaylist() {
+        return loc.suggestedPlaylist[AppLocale.current];
+    }
+    get suggestedProducts() {
+        return loc.suggestedProducts[AppLocale.current];
+    }
+    get showList() {
+        return loc.showList[AppLocale.current];
+    }
+    get updatedLabel() {
+        return loc.updatedLabel[AppLocale.current];
+    }
+    postsCount(count) {
+        return loc.postsCount[AppLocale.current](count);
+    }
+    postOf(current, total) {
+        return loc.postOf[AppLocale.current](current, total);
+    }
+    viewsLabel(count) {
+        return loc.viewsLabel[AppLocale.current](count);
+    }
+}
+const loc = {
+    tabInformation: { en: 'Information', no: 'Informasjon' },
+    tabProduct: { en: 'Product', no: 'Produkt' },
+    tabArticle: { en: 'Article', no: 'Artikkel' },
+    tabRecommended: { en: 'Recommended', no: 'Anbefalt' },
+    tabPlaylist: { en: 'Playlist', no: 'Spilleliste' },
+    show: { en: 'Show', no: 'Vis' },
+    relatedContent: { en: 'Related', no: 'Relatert' },
+    suggestedPlaylist: { en: 'Suggested Playlist', no: 'Foreslått spilleliste' },
+    suggestedProducts: { en: 'Suggested Products', no: 'Foreslåtte produkter' },
+    showList: { en: 'Show list', no: 'Vis liste' },
+    updatedLabel: { en: 'Updated:', no: 'Oppdatert:' },
+    postsCount: {
+        en: (count) => `${count} item${count !== 1 ? 's' : ''}`,
+        no: (count) => `${count} element${count !== 1 ? 'er' : ''}`
+    },
+    postOf: {
+        en: (current, total) => `${current} of ${total}`,
+        no: (current, total) => `${current} av ${total}`
+    },
+    viewsLabel: {
+        en: (count) => `${new Intl.NumberFormat('en').format(count)} Views`,
+        no: (count) => `${new Intl.NumberFormat('nb').format(count)} visninger`
+    }
+};

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

@@ -0,0 +1,7 @@
+export type { IContentAnalyticsHandler as FeedPlayerAnalyticsHandler } from '../content/analytics';
+export type { IContentCtaCardModel as FeedPlayerCtaCardModel, IContentHeadingModel as FeedPlayerHeadingModel, IContentMediaItemModel as FeedPlayerMediaItemModel, IContentModel as FeedPlayerContentModel, IContentProductCardModel as FeedPlayerProductCardModel } from '../content/model';
+export type { IContentSharingHandler as FeedPlayerSharingHandler } from '../content/sharing';
+export type { IContentSocialInteractionsHandler as FeedPlayerSocialInteractionsHandler } from '../content/social-interactions';
+export { default as CloseButton } from './cmp.close-button.svelte';
+export { default as FeedPlayer } from './cmp.feed-player.svelte';
+export type { FeedPlayerContentPreview, FeedPlayerPlaylistData, FeedPlayerProps, FeedPlayerRecommendedData, FeedPlayerSettings, FeedPlayerSuggestedPlaylist, IFeedPlayerPlaylistHandler as FeedPlayerPlaylistHandler, IFeedPlayerRecommendedHandler as FeedPlayerRecommendedHandler } from './types';

package/dist/feed-player/index.js

@@ -0,0 +1,2 @@
+export { default as CloseButton } from './cmp.close-button.svelte';
+export { default as FeedPlayer } from './cmp.feed-player.svelte';

package/dist/feed-player/sidebar/article-tab.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">import { FeedPlayerLocalization } from '../feed-player-localization';
+import { default as PanelSurface } from './panel-surface.svelte';
+import { Image } from '@streamscloud/kit/ui/image';
+const localization = new FeedPlayerLocalization();
+let { model, on } = $props();
+const heroImage = $derived(model.media.items[0]?.isImage ? model.media.items[0].url : null);
+</script>
+
+<PanelSurface>
+  <div class="article-tab">
+    {#if heroImage}
+      <div class="article-tab__hero">
+        <Image src={heroImage} />
+      </div>
+    {/if}
+
+    <div class="article-tab__content">
+      {#if model.texts.kicker}
+        <div class="article-tab__category">{model.texts.kicker}</div>
+      {/if}
+
+      {#if model.texts.title}
+        <div class="article-tab__title">{model.texts.title}</div>
+      {/if}
+
+      {#if model.texts.text}
+        <div class="article-tab__text">{model.texts.text}</div>
+      {/if}
+
+      {#if model.articleId && on?.readMore}
+        <button type="button" class="article-tab__show-button" onclick={() => model.articleId && on?.readMore && on.readMore(model.articleId)}
+          >{localization.show}</button>
+      {/if}
+    </div>
+  </div>
+</PanelSurface>
+
+<style>.article-tab {
+  --_article-tab--button-background: var(--sc-blocks--article-tab--button-background, var(--sc-kit--color--bg--element));
+  --_article-tab--button-border: var(--sc-blocks--article-tab--button-border, var(--sc-kit--color--border));
+  display: flex;
+  flex-direction: column;
+  --sc-kit--image--object-fit: cover;
+  --sc-kit--image--border-radius: var(--sc-kit--radius--md) var(--sc-kit--radius--md) 0 0;
+}
+.article-tab__hero {
+  width: 100%;
+  aspect-ratio: 392/245;
+  flex-shrink: 0;
+}
+.article-tab__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-kit--space--1);
+  padding: var(--sc-kit--space--4);
+}
+.article-tab__category {
+  font-size: var(--sc-kit--font-size--lg);
+  font-weight: var(--sc-kit--font-weight--medium);
+  color: var(--sc-kit--color--text--secondary);
+}
+.article-tab__title {
+  font-size: var(--sc-kit--font-size--3xl);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  line-height: var(--sc-kit--leading--tight);
+}
+.article-tab__text {
+  font-size: 1.0625rem;
+  font-weight: var(--sc-kit--font-weight--regular);
+  line-height: 1.375rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 10;
+  line-clamp: 10;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.article-tab__show-button {
+  margin-top: var(--sc-kit--space--2);
+  width: 100%;
+  height: 2.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  background: var(--_article-tab--button-background);
+  border: 1px solid var(--_article-tab--button-border);
+  border-radius: var(--sc-kit--radius--lg);
+  cursor: pointer;
+}</style>

package/dist/feed-player/sidebar/article-tab.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ContentModel } from '../../content/model';
+type Props = {
+    model: ContentModel;
+    on?: {
+        readMore?: (articleId: string) => void;
+    };
+};
+declare const ArticleTab: import("svelte").Component<Props, {}, "">;
+type ArticleTab = ReturnType<typeof ArticleTab>;
+export default ArticleTab;

package/dist/feed-player/sidebar/information-tab.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">import { CtaCard } from '../../cta/cta-card';
+import { ProductCard } from '../../products/product-card';
+import IconCheckmarkCircle24 from '@fluentui/svg-icons/icons/checkmark_circle_24_regular.svg?raw';
+import { Icon } from '@streamscloud/kit/ui/icon';
+let { model, selectedProductId, on } = $props();
+</script>
+
+{#if model.attachments}
+  <div class="information-tab">
+    {#if model.attachments.ctas.length}
+      <div class="information-tab__ctas">
+        {#each model.attachments.ctas as cta (cta.id)}
+          <div class="information-tab__cta-wrapper">
+            <CtaCard
+              cta={cta}
+              on={{
+                click: on?.ctaClick,
+                impression: on?.ctaImpression
+              }} />
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+    {#if model.attachments.products.length}
+      <div class="information-tab__products">
+        {#each model.attachments.products as product (product.id)}
+          <div class="information-tab__product-wrapper" onclick={() => on?.productSelect?.(product.id)} onkeydown={() => {}} role="none">
+            {#if selectedProductId === product.id}
+              <div class="information-tab__checkmark">
+                <Icon src={IconCheckmarkCircle24} />
+              </div>
+            {/if}
+            <ProductCard
+              product={product}
+              inert={true}
+              on={{
+                impression: on?.productImpression,
+                buy: on?.productBuy
+              }} />
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>.information-tab {
+  --_information-tab--checkmark-color: var(--sc-blocks--information-tab--checkmark-color, var(--sc-kit--color--text--on-accent));
+  --_information-tab--gap: var(--sc-blocks--information-tab--gap, var(--sc-kit--space--4));
+  display: flex;
+  flex-direction: column;
+  gap: var(--_information-tab--gap);
+  container-type: inline-size;
+}
+.information-tab__ctas {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: var(--_information-tab--gap);
+}
+.information-tab__cta-wrapper {
+  width: calc(50% - var(--_information-tab--gap) / 2);
+}
+.information-tab__products {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: var(--_information-tab--gap);
+}
+.information-tab__product-wrapper {
+  position: relative;
+  border-radius: var(--sc-kit--radius--lg);
+  cursor: pointer;
+  width: calc(50% - var(--_information-tab--gap) / 2);
+}
+.information-tab__checkmark {
+  --sc-kit--icon--size: 1.5rem;
+  --sc-kit--icon--color: var(--_information-tab--checkmark-color);
+  position: absolute;
+  top: var(--sc-kit--space--2);
+  right: var(--sc-kit--space--2);
+  z-index: 1;
+  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
+}</style>

package/dist/feed-player/sidebar/information-tab.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ContentModel } from '../../content/model';
+type Props = {
+    model: ContentModel;
+    selectedProductId: string | null;
+    on?: {
+        productImpression?: (productId: string) => void;
+        productBuy?: (productId: string) => void;
+        productSelect?: (productId: string) => void;
+        ctaClick?: (ctaId: string) => void;
+        ctaImpression?: (ctaId: string) => void;
+    };
+};
+declare const InformationTab: import("svelte").Component<Props, {}, "">;
+type InformationTab = ReturnType<typeof InformationTab>;
+export default InformationTab;

package/dist/feed-player/sidebar/panel-surface.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">const { children } = $props();
+export {};
+</script>
+
+<div class="sidebar-panel-surface">
+  {@render children()}
+</div>
+
+<style>.sidebar-panel-surface {
+  --_sidebar-panel-surface--background: var(--sc-blocks--sidebar-panel-surface--background, rgb(from var(--sc-kit--color--bg--panel) r g b / 0.58));
+  min-height: 100%;
+  background: var(--_sidebar-panel-surface--background);
+}</style>

package/dist/feed-player/sidebar/panel-surface.svelte.d.ts

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

package/dist/feed-player/sidebar/playlist-tab.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">import { FeedPlayerLocalization } from '../feed-player-localization';
+import { default as PanelSurface } from './panel-surface.svelte';
+import { default as PostCard } from './post-card.svelte';
+import { TimeAgo } from '@streamscloud/kit/ui/time-ago';
+import { untrack } from 'svelte';
+const { handler, activeContentId, on } = $props();
+const localization = new FeedPlayerLocalization();
+let data = $state.raw(null);
+$effect(() => {
+    void handler;
+    untrack(() => {
+        const load = async () => {
+            data = await handler.getPlaylist();
+        };
+        void load();
+    });
+});
+const currentContentIndex = $derived.by(() => {
+    if (!data) {
+        return -1;
+    }
+    return data.content.findIndex((c) => c.id === activeContentId);
+});
+</script>
+
+{#if data}
+  <PanelSurface>
+    <div class="playlist-tab">
+      <div class="playlist-tab__header">
+        <div class="playlist-tab__header-left">
+          <div class="playlist-tab__name">{data.name}</div>
+          <div class="playlist-tab__updated">{localization.updatedLabel} <TimeAgo date={data.updatedAt} /></div>
+        </div>
+        <div class="playlist-tab__post-indicator">{localization.postOf(currentContentIndex + 1, data.content.length)}</div>
+      </div>
+
+      <div class="playlist-tab__list">
+        {#each data.content as content (content.id)}
+          <PostCard
+            content={content}
+            thumbnailWidth={82}
+            thumbnailHeight={146}
+            thumbnailRadius={6}
+            active={content.id === activeContentId}
+            on={{ click: () => on?.contentActivate?.(content.id) }} />
+        {/each}
+      </div>
+    </div>
+  </PanelSurface>
+{/if}
+
+<style>.playlist-tab {
+  --_playlist-tab--meta-color: var(--sc-blocks--playlist-tab--meta-color, var(--sc-kit--color--text--secondary));
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-kit--space--4);
+  padding: var(--sc-kit--space--4);
+}
+.playlist-tab__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.playlist-tab__header-left {
+  display: flex;
+  flex-direction: column;
+}
+.playlist-tab__name {
+  font-size: var(--sc-kit--font-size--lg);
+  font-weight: var(--sc-kit--font-weight--medium);
+  line-height: var(--sc-kit--line-height--lg);
+}
+.playlist-tab__updated {
+  font-size: var(--sc-kit--font-size--sm);
+  font-weight: var(--sc-kit--font-weight--medium);
+  color: var(--_playlist-tab--meta-color);
+  line-height: var(--sc-kit--line-height--xs);
+}
+.playlist-tab__post-indicator {
+  font-size: var(--sc-kit--font-size--sm);
+  font-weight: var(--sc-kit--font-weight--medium);
+  color: var(--_playlist-tab--meta-color);
+  line-height: var(--sc-kit--line-height--xs);
+  white-space: nowrap;
+}
+.playlist-tab__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-kit--space--4);
+}</style>

package/dist/feed-player/sidebar/playlist-tab.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { IFeedPlayerPlaylistHandler } from '../types';
+type Props = {
+    handler: IFeedPlayerPlaylistHandler;
+    activeContentId: string;
+    on?: {
+        contentActivate?: (contentId: string) => void;
+    };
+};
+declare const PlaylistTab: import("svelte").Component<Props, {}, "">;
+type PlaylistTab = ReturnType<typeof PlaylistTab>;
+export default PlaylistTab;

package/dist/feed-player/sidebar/post-card.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">import { FeedPlayerLocalization } from '../feed-player-localization';
+import { Duration } from '@streamscloud/kit/ui/duration';
+import { Image } from '@streamscloud/kit/ui/image';
+import { TimeAgo } from '@streamscloud/kit/ui/time-ago';
+const { content, thumbnailWidth, thumbnailHeight, thumbnailRadius = 6, active = false, on } = $props();
+const localization = new FeedPlayerLocalization();
+</script>
+
+<div class="sidebar-post-card" onclick={on?.click} onkeydown={() => {}} role="none">
+  <div
+    class="sidebar-post-card__thumbnail"
+    class:sidebar-post-card__thumbnail--active={active}
+    style:width="{thumbnailWidth}px"
+    style:height="{thumbnailHeight}px"
+    style:--_sidebar-post-card--thumbnail-radius="{thumbnailRadius}px">
+    <Image src={content.thumbnailUrl} />
+    {#if content.durationSeconds}
+      <div class="sidebar-post-card__duration">
+        <Duration seconds={content.durationSeconds} variant="badge" />
+      </div>
+    {/if}
+  </div>
+  <div class="sidebar-post-card__info">
+    {#if content.title}
+      <div class="sidebar-post-card__title">{content.title}</div>
+    {/if}
+    {#if content.description}
+      <div class="sidebar-post-card__description">{content.description}</div>
+    {/if}
+    <div class="sidebar-post-card__meta"><TimeAgo date={content.displayDate} /> · {localization.viewsLabel(content.viewsCount)}</div>
+  </div>
+</div>
+
+<style>.sidebar-post-card {
+  --_sidebar-post-card--active-border-color: var(--sc-blocks--sidebar-post-card--active-border-color, var(--sc-kit--color--success));
+  --_sidebar-post-card--description-color: var(--sc-blocks--sidebar-post-card--description-color, var(--sc-kit--color--text--secondary));
+  --_sidebar-post-card--meta-color: var(--sc-blocks--sidebar-post-card--meta-color, var(--sc-kit--color--text--secondary));
+  display: flex;
+  gap: var(--sc-kit--space--4);
+  align-items: flex-end;
+  cursor: pointer;
+}
+.sidebar-post-card__thumbnail {
+  position: relative;
+  flex-shrink: 0;
+  border-radius: var(--_sidebar-post-card--thumbnail-radius);
+  overflow: hidden;
+  --sc-kit--image--object-fit: cover;
+  --sc-kit--image--border-radius: var(--_sidebar-post-card--thumbnail-radius);
+}
+.sidebar-post-card__thumbnail--active {
+  outline: 2px solid var(--_sidebar-post-card--active-border-color);
+  outline-offset: 0.125rem;
+  border-radius: calc(var(--_sidebar-post-card--thumbnail-radius) + 3px);
+}
+.sidebar-post-card__duration {
+  position: absolute;
+  bottom: var(--sc-kit--space--1);
+  right: var(--sc-kit--space--1);
+}
+.sidebar-post-card__info {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: var(--sc-kit--space--3);
+  min-width: 0;
+  height: 7.125rem;
+}
+.sidebar-post-card__title {
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sidebar-post-card__description {
+  font-size: var(--sc-kit--font-size--sm);
+  font-weight: var(--sc-kit--font-weight--regular);
+  color: var(--_sidebar-post-card--description-color);
+  line-height: 0.9375rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.sidebar-post-card__meta {
+  font-size: 0.625rem;
+  font-weight: var(--sc-kit--font-weight--regular);
+  color: var(--_sidebar-post-card--meta-color);
+  white-space: nowrap;
+}</style>

package/dist/feed-player/sidebar/post-card.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { FeedPlayerContentPreview } from '../types';
+type Props = {
+    content: FeedPlayerContentPreview;
+    thumbnailWidth: number;
+    thumbnailHeight: number;
+    thumbnailRadius?: number;
+    active?: boolean;
+    on?: {
+        click?: () => void;
+    };
+};
+declare const PostCard: import("svelte").Component<Props, {}, "">;
+type PostCard = ReturnType<typeof PostCard>;
+export default PostCard;

package/dist/feed-player/sidebar/recommended-tab.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">import { ProductCard } from '../../products/product-card';
+import { FeedPlayerLocalization } from '../feed-player-localization';
+import { default as PanelSurface } from './panel-surface.svelte';
+import { default as PostCard } from './post-card.svelte';
+import { Image } from '@streamscloud/kit/ui/image';
+import { untrack } from 'svelte';
+const { handler, currentContentId } = $props();
+const localization = new FeedPlayerLocalization();
+let data = $state.raw(null);
+$effect(() => {
+    const contentId = currentContentId;
+    untrack(() => {
+        data = null;
+        const load = async () => {
+            data = await handler.getRecommendations(contentId);
+        };
+        void load();
+    });
+});
+</script>
+
+{#if data}
+  <PanelSurface>
+    <div class="recommended-tab">
+      {#if data.relatedContent.length}
+        <div class="recommended-tab__section">
+          <div class="recommended-tab__section-title">{localization.relatedContent}</div>
+          <div class="recommended-tab__posts">
+            {#each data.relatedContent as content (content.id)}
+              <PostCard
+                content={content}
+                thumbnailWidth={82}
+                thumbnailHeight={146}
+                thumbnailRadius={6}
+                on={{ click: () => handler.onContentSelect?.(content.id) }} />
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if data.suggestedPlaylists.length}
+        <div class="recommended-tab__section">
+          <div class="recommended-tab__section-title">{localization.suggestedPlaylist}</div>
+          <div class="recommended-tab__playlists">
+            {#each data.suggestedPlaylists as playlist (playlist.id)}
+              <div class="recommended-tab__playlist-card" onclick={() => handler.onPlaylistSelect?.(playlist.id)} onkeydown={() => {}} role="none">
+                <div class="recommended-tab__playlist-thumbnail">
+                  <Image src={playlist.thumbnailUrl} />
+                </div>
+                <div class="recommended-tab__playlist-info">
+                  <div class="recommended-tab__playlist-name">{playlist.name}</div>
+                  <div class="recommended-tab__playlist-count">{localization.postsCount(playlist.postsCount)}</div>
+                  <div
+                    class="recommended-tab__playlist-link"
+                    onclick={(e: MouseEvent) => {
+                      e.stopPropagation();
+                      handler.onPlaylistShow?.(playlist.id);
+                    }}
+                    onkeydown={() => {}}
+                    role="none">
+                    {localization.showList}
+                  </div>
+                </div>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if data.suggestedProducts.length}
+        <div class="recommended-tab__section">
+          <div class="recommended-tab__section-title">{localization.suggestedProducts}</div>
+          <div class="recommended-tab__products">
+            {#each data.suggestedProducts as product (product.id)}
+              <div class="recommended-tab__product-wrapper">
+                <ProductCard product={product} on={{ click: handler.onProductSelect, buy: handler.onProductBuy }} />
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+  </PanelSurface>
+{/if}
+
+<style>.recommended-tab {
+  --_recommended-tab--section-gap: var(--sc-blocks--recommended-tab--section-gap, var(--sc-kit--space--6));
+  --_recommended-tab--link-color: var(--sc-blocks--recommended-tab--link-color, var(--sc-kit--color--accent));
+  display: flex;
+  flex-direction: column;
+  gap: var(--_recommended-tab--section-gap);
+  padding: var(--sc-kit--space--4) var(--sc-kit--space--4) var(--sc-kit--space--6);
+}
+.recommended-tab__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-kit--space--2);
+}
+.recommended-tab__section-title {
+  font-size: var(--sc-kit--font-size--lg);
+  font-weight: var(--sc-kit--font-weight--medium);
+}
+.recommended-tab__posts {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-kit--space--3);
+}
+.recommended-tab__playlists {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-kit--space--3);
+}
+.recommended-tab__playlist-card {
+  display: flex;
+  gap: var(--sc-kit--space--4);
+  align-items: flex-end;
+  background: var(--sc-kit--color--bg--panel);
+  border-radius: var(--sc-kit--radius--md);
+  overflow: hidden;
+  cursor: pointer;
+}
+.recommended-tab__playlist-thumbnail {
+  flex-shrink: 0;
+  width: 6.0625rem;
+  height: 9.125rem;
+  --sc-kit--image--object-fit: cover;
+  --sc-kit--image--border-radius: var(--sc-kit--radius--sm);
+}
+.recommended-tab__playlist-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-kit--space--1);
+  padding: var(--sc-kit--space--2) 0;
+  min-width: 0;
+  height: 9.125rem;
+}
+.recommended-tab__playlist-name {
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--semibold);
+}
+.recommended-tab__playlist-count {
+  font-size: var(--sc-kit--font-size--sm);
+  font-weight: var(--sc-kit--font-weight--regular);
+  color: var(--sc-kit--color--text--secondary);
+  flex: 1;
+}
+.recommended-tab__playlist-link {
+  font-size: var(--sc-kit--font-size--sm);
+  font-weight: var(--sc-kit--font-weight--medium);
+  color: var(--_recommended-tab--link-color);
+  cursor: pointer;
+}
+.recommended-tab__products {
+  display: flex;
+  gap: var(--sc-kit--space--3);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.recommended-tab__product-wrapper {
+  flex: 0 0 10.0625rem;
+}</style>