@streamscloud/embeddable 16.0.7 → 16.1.0

package/dist/articles/article/index.js

@@ -0,0 +1,5 @@
+export { default as Article } from './cmp.article.svelte';
+export { default as ArticleView } from './article-view.svelte';
+export { default as FactsContainer } from './cmp.facts-container.svelte';
+export { fieldIsFilled, layoutIsFilled, sectionIsFilled } from './helpers';
+export { ArticleStylesHelper } from './styles-transformer';

package/dist/articles/article/styles-transformer.d.ts

@@ -0,0 +1,47 @@
+type IndentValues = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare class ArticleStylesHelper {
+    static generatePaddingsCssVar: (data: {
+        styles: {
+            paddingTop?: number | null;
+            paddingBottom?: number | null;
+            paddingLeft?: number | null;
+            paddingRight?: number | null;
+        };
+        mobileView: boolean;
+    }) => string;
+    static parsePaddingValues: (data: {
+        styles: {
+            paddingTop?: number | null;
+            paddingBottom?: number | null;
+            paddingLeft?: number | null;
+            paddingRight?: number | null;
+        };
+        mobileView: boolean;
+    }) => IndentValues;
+    static generateMarginsCssVar: (data: {
+        styles: {
+            marginTop?: number | null;
+            marginBottom?: number | null;
+            marginLeft?: number | null;
+            marginRight?: number | null;
+        } | null;
+        mobileView: boolean;
+        useFallbackIfMissing?: boolean;
+    }) => string;
+    static parseMarginValues: (data: {
+        styles: {
+            marginTop?: number | null;
+            marginBottom?: number | null;
+            marginLeft?: number | null;
+            marginRight?: number | null;
+        } | null;
+        mobileView: boolean;
+        useFallbackIfMissing?: boolean;
+    }) => IndentValues;
+}
+export {};

package/dist/articles/article/styles-transformer.js

@@ -0,0 +1,38 @@
+export class ArticleStylesHelper {
+    static generatePaddingsCssVar = (data) => {
+        const indents = ArticleStylesHelper.parsePaddingValues(data);
+        const paddings = [indents.top, indents.right, indents.bottom, indents.left];
+        return paddings.map((p) => p + 'rem').join(' ');
+    };
+    static parsePaddingValues = (data) => {
+        const { styles, mobileView } = data;
+        const verticalScaleFactor = mobileView ? 0.7 : 1;
+        const horizontalScaleFactor = mobileView ? 0.3 : 1;
+        return {
+            top: styles.paddingTop ? styles.paddingTop * verticalScaleFactor : 0,
+            right: styles.paddingRight ? styles.paddingRight * horizontalScaleFactor : 0,
+            bottom: styles.paddingBottom ? styles.paddingBottom * verticalScaleFactor : 0,
+            left: styles.paddingLeft ? styles.paddingLeft * horizontalScaleFactor : 0
+        };
+    };
+    static generateMarginsCssVar = (data) => {
+        const indents = ArticleStylesHelper.parseMarginValues(data);
+        const margins = [indents.top, indents.right, indents.bottom, indents.left];
+        return margins.map((p) => p + 'rem').join(' ');
+    };
+    static parseMarginValues = (data) => {
+        const { styles, useFallbackIfMissing = true, mobileView } = data;
+        if (!styles && !useFallbackIfMissing) {
+            return { top: 0, right: 0, bottom: 0, left: 0 };
+        }
+        const parsedStyles = styles || { marginBottom: 0.875 };
+        const verticalScaleFactor = mobileView ? 0.7 : 1;
+        const horizontalScaleFactor = mobileView ? 0.3 : 1;
+        return {
+            top: 'marginTop' in parsedStyles && parsedStyles.marginTop ? parsedStyles.marginTop * verticalScaleFactor : 0,
+            right: 'marginRight' in parsedStyles && parsedStyles.marginRight ? parsedStyles.marginRight * horizontalScaleFactor : 0,
+            bottom: 'marginBottom' in parsedStyles && parsedStyles.marginBottom ? parsedStyles.marginBottom * verticalScaleFactor : 0,
+            left: 'marginLeft' in parsedStyles && parsedStyles.marginLeft ? parsedStyles.marginLeft * horizontalScaleFactor : 0
+        };
+    };
+}

package/dist/articles/article/types.d.ts

@@ -0,0 +1,32 @@
+import type { ArticleFieldModel } from './fields/types';
+export type ArticleMetadata = {
+    displayDate: string;
+};
+export type ArticleSeo = {
+    title: string;
+    description: string;
+    keywords: string[];
+};
+export type ArticleSectionModel = {
+    id: string;
+    styles: ArticleSectionStylesModel | null;
+    layouts: ArticleLayoutModel[];
+    facts: string | null;
+};
+export type ArticleSectionStylesModel = {
+    paddingTop: number | null;
+    paddingBottom: number | null;
+    paddingLeft: number | null;
+    paddingRight: number | null;
+};
+export type ArticleLayoutModel = {
+    id: string;
+    styles: ArticleLayoutStylesModel | null;
+    fields: ArticleFieldModel[];
+};
+export type ArticleLayoutStylesModel = {
+    paddingTop: number | null;
+    paddingBottom: number | null;
+    paddingLeft: number | null;
+    paddingRight: number | null;
+};

package/dist/articles/article/types.js

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

package/dist/articles/article-dialog/article-dialog-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class ArticleDialogLocalization {
+    get failedToLoad(): string;
+}

package/dist/articles/article-dialog/article-dialog-localization.js

@@ -0,0 +1,9 @@
+import { AppLocale } from '@streamscloud/kit/core/locale';
+export class ArticleDialogLocalization {
+    get failedToLoad() {
+        return loc.failedToLoad[AppLocale.current];
+    }
+}
+const loc = {
+    failedToLoad: { en: 'Failed to load article', no: 'Kunne ikke laste artikkelen' }
+};

package/dist/articles/article-dialog/cmp.article-dialog.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">import { default as ArticleView } from '../article/article-view.svelte';
+import { ArticleDialogLocalization } from './article-dialog-localization';
+import { DialogCloseButton } from '@streamscloud/kit/ui/dialog';
+import { Loading } from '@streamscloud/kit/ui/loading';
+import { untrack } from 'svelte';
+let { controller, data } = $props();
+const localization = new ArticleDialogLocalization();
+$effect(() => untrack(() => {
+    controller.updateSettings({ closeOnEsc: true, closeOnClickOutside: true });
+    controller.updateContainerSettings({ position: 'full-screen' });
+}));
+let articleData = $state.raw(null);
+let loading = $state(true);
+let failed = $state(false);
+const load = async () => {
+    loading = true;
+    failed = false;
+    try {
+        const result = await data.fetchArticle({ id: data.articleId });
+        if (result) {
+            articleData = result;
+        }
+        else {
+            failed = true;
+        }
+    }
+    catch {
+        failed = true;
+    }
+    loading = false;
+};
+void load();
+</script>
+
+<div class="article-dialog">
+  <div class="article-dialog__close">
+    <DialogCloseButton controller={controller} />
+  </div>
+  <div class="article-dialog__content">
+    {#if loading}
+      <div class="article-dialog__loading">
+        <Loading positionAbsoluteCenter timeout={400} />
+      </div>
+    {:else if failed}
+      <div class="article-dialog__error">{localization.failedToLoad}</div>
+    {:else if articleData}
+      <ArticleView sections={articleData.sections} metadata={articleData.metadata} />
+    {/if}
+  </div>
+</div>
+
+<style>.article-dialog {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.article-dialog__close {
+  --sc-kit--dialog-close-button--color: #fff;
+  --sc-kit--icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  position: absolute;
+  top: 0.75rem;
+  right: 1rem;
+  z-index: 10;
+}
+.article-dialog__content {
+  --article--max-width: 56.25rem;
+  --article--container-background: light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.8));
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.article-dialog__content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.article-dialog__content::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.article-dialog__content::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .article-dialog__content {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+.article-dialog__loading {
+  position: relative;
+  min-height: 18.75rem;
+}
+.article-dialog__error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 12.5rem;
+  color: light-dark(#9ca3af, #6b7280);
+  font-size: 1rem;
+}</style>

package/dist/articles/article-dialog/cmp.article-dialog.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ArticleDialogViewData } from './types';
+import { type DialogController } from '@streamscloud/kit/ui/dialog';
+type Props = {
+    controller: DialogController;
+    data: ArticleDialogViewData;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/articles/article-dialog/index.d.ts

@@ -0,0 +1,6 @@
+import type { ArticleDataProvider } from '../data-providers';
+export declare const openArticleDialog: (data: {
+    anchor: HTMLElement;
+    articleId: string;
+    fetchArticle: ArticleDataProvider["fetchArticle"];
+}) => void;

package/dist/articles/article-dialog/index.js

@@ -0,0 +1,10 @@
+import { default as ArticleDialog } from './cmp.article-dialog.svelte';
+import { Dialogs } from '@streamscloud/kit/ui/dialog';
+export const openArticleDialog = (data) => {
+    const { anchor, articleId, fetchArticle } = data;
+    void Dialogs.open({
+        view: ArticleDialog,
+        data: { articleId, fetchArticle },
+        host: anchor
+    });
+};

package/dist/articles/article-dialog/types.d.ts

@@ -0,0 +1,6 @@
+import type { ArticleDataProvider } from '../data-providers';
+/** Data passed to the article dialog view component. */
+export type ArticleDialogViewData = {
+    articleId: string;
+    fetchArticle: ArticleDataProvider['fetchArticle'];
+};

package/dist/articles/data-providers/index.d.ts

@@ -0,0 +1 @@
+export type { ArticleData, ArticleDataProvider } from './types';

package/dist/articles/data-providers/index.js

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

package/dist/articles/data-providers/types.d.ts

@@ -0,0 +1,14 @@
+import type { ArticleMetadata, ArticleSectionModel, ArticleSeo } from '../article';
+/** Article data returned by a data provider. */
+export type ArticleData = {
+    sections: ArticleSectionModel[];
+    metadata: ArticleMetadata;
+    seo: ArticleSeo;
+};
+/** Provider for fetching article content by ID. */
+export type ArticleDataProvider = {
+    fetchArticle: (input: {
+        id?: string;
+        slug?: string;
+    }) => Promise<ArticleData | null>;
+};

package/dist/articles/data-providers/types.js

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

package/dist/core/enums.d.ts

@@ -1,50 +1,15 @@
-export declare enum PostSourceType {
-    MediaPage = "MEDIA_PAGE",
-    Organization = "ORGANIZATION",
-    UserProfile = "USER_PROFILE"
-}
-export declare enum AdType {
-    BannerResponsive = "BANNER_RESPONSIVE",
-    MediaDialogPromotion = "MEDIA_DIALOG_PROMOTION",
-    Story = "STORY"
-}
-export declare enum Currency {
-    Eur = "EUR",
-    Nok = "NOK",
-    Usd = "USD"
-}
-export declare enum MediaType {
-    Audio = "AUDIO",
-    Image = "IMAGE",
-    ShortVideo = "SHORT_VIDEO",
-    Video = "VIDEO"
-}
-export declare enum MediaFormat {
-    W4H3 = "W4H3",
-    W16H9 = "W16H9"
-}
-export declare enum ImageScale {
-    Big = "BIG",
-    Medium = "MEDIUM",
-    OriginalEncoded = "ORIGINAL_ENCODED",
-    Small = "SMALL"
-}
-export declare enum ProfileType {
-    Organization = "ORGANIZATION"
-}
-export declare enum PostType {
-    Article = "ARTICLE",
-    Media = "MEDIA",
-    Moment = "MOMENT",
-    ShortVideo = "SHORT_VIDEO",
-    Video = "VIDEO"
-}
-export declare enum Status {
-    Published = "PUBLISHED"
-}
-export declare enum StreamStatus {
-    Published = "PUBLISHED"
-}
-export declare enum EmbedStreamsOrderBy {
-    ContentUpdatedAt = "CONTENT_UPDATED_AT"
-}
+export type PostSourceType = 'MEDIA_PAGE' | 'ORGANIZATION' | 'USER_PROFILE';
+export type AdType = 'BANNER_RESPONSIVE' | 'MEDIA_DIALOG_PROMOTION' | 'STORY';
+export type Currency = 'EUR' | 'NOK' | 'USD';
+export type MediaType = 'AUDIO' | 'IMAGE' | 'SHORT_VIDEO' | 'VIDEO';
+export type MediaFormat = 'W4H3' | 'W16H9';
+export type ImageScale = 'BIG' | 'MEDIUM' | 'ORIGINAL_ENCODED' | 'SMALL';
+export type ProfileType = 'ORGANIZATION';
+export type PostType = 'ARTICLE' | 'MEDIA' | 'MOMENT' | 'SHORT_VIDEO' | 'VIDEO';
+export type Status = 'PUBLISHED';
+export type StreamStatus = 'PUBLISHED';
+export type EmbedStreamsOrderBy = 'CONTENT_UPDATED_AT';
+export type ArticleFieldType = 'BYLINE' | 'IMAGE' | 'MEDIA' | 'MEDIA_GALLERY' | 'RICH_TEXT' | 'TEXT' | 'VIDEO';
+export type TextFieldMode = 'MULTILINE' | 'SINGLE_LINE';
+export type TextFieldWeight = 'BOLD' | 'NORMAL' | 'SEMI_BOLD';
+export type GalleryFieldMode = 'GALLERY' | 'SLIDER';

package/dist/core/enums.js

@@ -1,61 +1 @@
-export var PostSourceType;
-(function (PostSourceType) {
-    PostSourceType["MediaPage"] = "MEDIA_PAGE";
-    PostSourceType["Organization"] = "ORGANIZATION";
-    PostSourceType["UserProfile"] = "USER_PROFILE";
-})(PostSourceType || (PostSourceType = {}));
-export var AdType;
-(function (AdType) {
-    AdType["BannerResponsive"] = "BANNER_RESPONSIVE";
-    AdType["MediaDialogPromotion"] = "MEDIA_DIALOG_PROMOTION";
-    AdType["Story"] = "STORY";
-})(AdType || (AdType = {}));
-export var Currency;
-(function (Currency) {
-    Currency["Eur"] = "EUR";
-    Currency["Nok"] = "NOK";
-    Currency["Usd"] = "USD";
-})(Currency || (Currency = {}));
-export var MediaType;
-(function (MediaType) {
-    MediaType["Audio"] = "AUDIO";
-    MediaType["Image"] = "IMAGE";
-    MediaType["ShortVideo"] = "SHORT_VIDEO";
-    MediaType["Video"] = "VIDEO";
-})(MediaType || (MediaType = {}));
-export var MediaFormat;
-(function (MediaFormat) {
-    MediaFormat["W4H3"] = "W4H3";
-    MediaFormat["W16H9"] = "W16H9";
-})(MediaFormat || (MediaFormat = {}));
-export var ImageScale;
-(function (ImageScale) {
-    ImageScale["Big"] = "BIG";
-    ImageScale["Medium"] = "MEDIUM";
-    ImageScale["OriginalEncoded"] = "ORIGINAL_ENCODED";
-    ImageScale["Small"] = "SMALL";
-})(ImageScale || (ImageScale = {}));
-export var ProfileType;
-(function (ProfileType) {
-    ProfileType["Organization"] = "ORGANIZATION";
-})(ProfileType || (ProfileType = {}));
-export var PostType;
-(function (PostType) {
-    PostType["Article"] = "ARTICLE";
-    PostType["Media"] = "MEDIA";
-    PostType["Moment"] = "MOMENT";
-    PostType["ShortVideo"] = "SHORT_VIDEO";
-    PostType["Video"] = "VIDEO";
-})(PostType || (PostType = {}));
-export var Status;
-(function (Status) {
-    Status["Published"] = "PUBLISHED";
-})(Status || (Status = {}));
-export var StreamStatus;
-(function (StreamStatus) {
-    StreamStatus["Published"] = "PUBLISHED";
-})(StreamStatus || (StreamStatus = {}));
-export var EmbedStreamsOrderBy;
-(function (EmbedStreamsOrderBy) {
-    EmbedStreamsOrderBy["ContentUpdatedAt"] = "CONTENT_UPDATED_AT";
-})(EmbedStreamsOrderBy || (EmbedStreamsOrderBy = {}));
+export {};

package/dist/core/graphql.d.ts

@@ -1,3 +1,6 @@
-export declare const createLocalGQLClient: (graphqlOrigin?: string, headers?: HeadersInit, customFetch?: typeof fetch) => any;
+export declare const createLocalGQLClient: (graphqlOrigin?: string, options?: {
+    initiator?: string;
+    customFetch?: typeof fetch;
+}) => any;
 export declare const resolveGraphQLOrigin: (origin?: string) => string;
 export declare const constructGraphQLUrl: (graphqlOrigin?: string) => string;

package/dist/core/graphql.js

@@ -1,8 +1,8 @@
 import { createGQLClient } from '@streamscloud/kit/core';
-export const createLocalGQLClient = (graphqlOrigin, headers, customFetch) => createGQLClient({
+export const createLocalGQLClient = (graphqlOrigin, options) => createGQLClient({
     url: constructGraphQLUrl(resolveGraphQLOrigin(graphqlOrigin)),
-    headers,
-    customFetch
+    headers: options?.initiator ? { 'x-initiator': options.initiator } : undefined,
+    customFetch: options?.customFetch
 });
 export const resolveGraphQLOrigin = (origin) => {
     return origin || 'https://api.streamscloud.com';

package/dist/core/media/index.d.ts

@@ -1,2 +1 @@
-export { type MediaItemModel, type MediaItemMetadataModel, type MediaItemWithMetadataModel } from './types';
 export { getMediaItemImageUrl } from './media-item-url.service';

package/dist/core/media/index.js

@@ -1,2 +1 @@
-export {} from './types';
 export { getMediaItemImageUrl } from './media-item-url.service';

package/dist/core/media/media-item-url.service.d.ts

@@ -1,2 +1,6 @@
-import { type MediaItemModel } from './types';
-export declare const getMediaItemImageUrl: (media: MediaItemModel) => string;
+import type { MediaType } from '../enums';
+export declare const getMediaItemImageUrl: (media: {
+    type: MediaType;
+    url: string;
+    thumbnailUrl?: string | null;
+}) => string;

package/dist/core/media/media-item-url.service.js

@@ -1,3 +1 @@
-import { MediaType } from '../enums';
-import {} from './types';
-export const getMediaItemImageUrl = (media) => (media.type === MediaType.Image ? media.url : media.thumbnailUrl);
+export const getMediaItemImageUrl = (media) => media.type === 'IMAGE' ? media.url : (media.thumbnailUrl ?? '');

package/dist/external-api/article/cmp.embed-article.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">import { Article } from '../../articles/article';
+import { createLocalGQLClient } from '../../core/graphql';
+import { createArticleDataProvider } from '../data-providers/article/article-data-provider';
+import { Loading } from '@streamscloud/kit/ui/loading';
+import { untrack } from 'svelte';
+let { id, slug, initiator, graphqlOrigin, theme, on } = $props();
+let data = $state.raw(null);
+let notFound = $state(false);
+const extractCoverImageUrl = (article) => {
+    for (const section of article.sections) {
+        for (const layout of section.layouts) {
+            for (const field of layout.fields) {
+                const { fieldData } = field;
+                const media = fieldData.imageData?.image ?? fieldData.mediaData?.media ?? fieldData.videoData?.video ?? fieldData.mediaGalleryData?.media?.[0];
+                if (media) {
+                    return media.type === 'IMAGE' ? media.url : (media.thumbnailUrl ?? null);
+                }
+            }
+        }
+    }
+    return null;
+};
+const load = async (articleId, articleSlug) => {
+    try {
+        const graphql = createLocalGQLClient(graphqlOrigin, { initiator });
+        const dataProvider = createArticleDataProvider(graphql);
+        data = await dataProvider.fetchArticle({ id: articleId, slug: articleSlug });
+        if (!data) {
+            notFound = true;
+            return;
+        }
+        on?.seoLoaded?.({ ...data.seo, imageUrl: extractCoverImageUrl(data) });
+    }
+    catch {
+        notFound = true;
+    }
+};
+$effect(() => {
+    const currentId = id;
+    const currentSlug = slug;
+    untrack(() => {
+        void load(currentId, currentSlug);
+    });
+});
+</script>
+
+{#if notFound}
+  <div class="embed-article__not-found">¯\_(ツ)_/¯</div>
+{:else if data}
+  <Article sections={data.sections} metadata={data.metadata} theme={theme} />
+{:else}
+  <div class="embed-article__loading">
+    <Loading positionAbsoluteCenter timeout={600} />
+  </div>
+{/if}
+
+<!--
+@component
+Fetches and renders an article by `id` or `slug` via the `embedArticle` GraphQL query.
+Displays a placeholder when the article is not found.
+
+### Props
+| Prop | Type | Description |
+|---|---|---|
+| `id` | `string?` | Article ID to fetch |
+| `slug` | `string?` | Article slug to fetch (alternative to `id`) |
+| `initiator` | `string?` | Value for the `x-initiator` header |
+| `graphqlOrigin` | `string?` | Custom GraphQL API origin |
+| `theme` | `'light' \| 'dark'` | Color theme (default: `'light'`) |
+
+### Callbacks (`on`)
+| Callback | Type | Description |
+|---|---|---|
+| `seoLoaded` | `(seo: ArticleSeoModel) => void` | Called after article is loaded with SEO data and cover image URL |
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--article--max-width` | Article max width (centered when constrained) | `100%` |
+| `--article--container-background` | Outer container background (visible when width constrained) | `gray-50` / `gray-900` |
+| `--article--background` | Article background color | `white` / `gray-800` |
+| `--article--text-color` | Article text color | `black` / `white` |
+| `--article--min-height` | Minimum article height | `0` |
+-->
+
+<style>.embed-article__not-found {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 12.5rem;
+  font-size: 1.5rem;
+  color: light-dark(#9ca3af, #6b7280);
+}
+
+.embed-article__loading {
+  position: relative;
+  min-height: 12.5rem;
+}</style>

package/dist/external-api/article/cmp.embed-article.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { ThemeValue } from '../../core/theme';
+export type ArticleSeoModel = {
+    title: string;
+    description: string;
+    keywords: string[];
+    imageUrl: string | null;
+};
+type Props = {
+    id?: string;
+    slug?: string;
+    initiator?: string;
+    graphqlOrigin?: string;
+    theme?: ThemeValue;
+    on?: {
+        seoLoaded?: (seo: ArticleSeoModel) => void;
+    };
+};
+/**
+ * Fetches and renders an article by `id` or `slug` via the `embedArticle` GraphQL query.
+ * Displays a placeholder when the article is not found.
+ *
+ * ### Props
+ * | Prop | Type | Description |
+ * |---|---|---|
+ * | `id` | `string?` | Article ID to fetch |
+ * | `slug` | `string?` | Article slug to fetch (alternative to `id`) |
+ * | `initiator` | `string?` | Value for the `x-initiator` header |
+ * | `graphqlOrigin` | `string?` | Custom GraphQL API origin |
+ * | `theme` | `'light' \| 'dark'` | Color theme (default: `'light'`) |
+ *
+ * ### Callbacks (`on`)
+ * | Callback | Type | Description |
+ * |---|---|---|
+ * | `seoLoaded` | `(seo: ArticleSeoModel) => void` | Called after article is loaded with SEO data and cover image URL |
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--article--max-width` | Article max width (centered when constrained) | `100%` |
+ * | `--article--container-background` | Outer container background (visible when width constrained) | `gray-50` / `gray-900` |
+ * | `--article--background` | Article background color | `white` / `gray-800` |
+ * | `--article--text-color` | Article text color | `black` / `white` |
+ * | `--article--min-height` | Minimum article height | `0` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/external-api/article/index.d.ts

@@ -0,0 +1 @@
+export { default as Article, type ArticleSeoModel } from './cmp.embed-article.svelte';

package/dist/external-api/article/index.js

@@ -0,0 +1 @@
+export { default as Article } from './cmp.embed-article.svelte';

package/dist/external-api/data-providers/article/article-data-provider.d.ts

@@ -0,0 +1,4 @@
+import type { ArticleDataProvider } from '../../../articles/data-providers';
+import type { Client } from '@urql/core';
+/** Creates an ArticleDataProvider that fetches articles via the GetEmbedArticle GraphQL query. */
+export declare const createArticleDataProvider: (graphql: Client) => ArticleDataProvider;