@streamscloud/embeddable 16.0.7-1772105016226 → 16.0.7-1772107327250

package/dist/articles/article/article-view.svelte

@@ -14,17 +14,24 @@ const fieldMetadata = $derived({ displayDate: metadata.displayDate });
 </div>
 
 <style>.article-container {
+  --_article--max-width: var(--article--max-width, 100%);
   --_article--min-height: var(--article--min-height, 0);
-  --_article--background: var(--article--background, light-dark(#ffffff, #1e1e1e));
+  --_article--background: var(--article--background, light-dark(#ffffff, #2e2e2e));
+  --_article--container-background: var(--article--container-background, light-dark(#fafafa, #1c1c1c));
   --_article--text-color: var(--article--text-color, light-dark(#000000, #ffffff));
   container-type: inline-size;
   min-height: var(--_article--min-height);
+  background: var(--_article--container-background);
+  overflow: hidden;
 }
 
 .article {
   --article-field--text-color: var(--_article--text-color);
+  max-width: var(--_article--max-width);
+  margin: 0 auto;
   min-height: var(--_article--min-height);
   background: var(--_article--background);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding-bottom: 6.25rem;
   display: flex;
   flex-direction: column;

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

@@ -1,8 +1,9 @@
 <script lang="ts">import { Article } from '../../articles/article';
 import { createLocalGQLClient } from '../../core/graphql';
 import { GetEmbedArticleDocument } from './operations.generated';
+import { Loading } from '@streamscloud/kit/ui/loading';
 import { untrack } from 'svelte';
-let { id, slug, initiator, graphqlOrigin, on } = $props();
+let { id, slug, initiator, graphqlOrigin, theme = 'light', on } = $props();
 let sections = $state.raw(null);
 let metadata = $state.raw(null);
 let notFound = $state(false);
@@ -58,7 +59,11 @@ $effect(() => {
 {#if notFound}
   <div class="embed-article__not-found">¯\_(ツ)_/¯</div>
 {:else if sections && metadata}
-  <Article sections={sections} metadata={metadata} />
+  <Article sections={sections} metadata={metadata} theme={theme} />
+{:else}
+  <div class="embed-article__loading">
+    <Loading positionAbsoluteCenter timeout={600} />
+  </div>
 {/if}
 
 <!--
@@ -73,6 +78,7 @@ Displays a placeholder when the article is not found.
 | `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 |
@@ -82,7 +88,9 @@ Displays a placeholder when the article is not found.
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--article--background` | Article background color | `white` / `dark-800` |
+| `--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` |
 -->
@@ -94,4 +102,9 @@ Displays a placeholder when the article is not found.
   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

@@ -1,3 +1,4 @@
+import type { ThemeValue } from '../../core/theme';
 export type ArticleSeoModel = {
     title: string;
     description: string;
@@ -9,6 +10,7 @@ type Props = {
     slug?: string;
     initiator?: string;
     graphqlOrigin?: string;
+    theme?: ThemeValue;
     on?: {
         seoLoaded?: (seo: ArticleSeoModel) => void;
     };
@@ -24,6 +26,7 @@ type Props = {
  * | `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 |
@@ -33,7 +36,9 @@ type Props = {
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--article--background` | Article background color | `white` / `dark-800` |
+ * | `--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` |
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "16.0.7-1772105016226",
+  "version": "16.0.7-1772107327250",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",