@happyvertical/smrt-content 0.30.0

package/dist/svelte/components/GovernedContentEditor.svelte

@@ -0,0 +1,409 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import type {
+  ContentEditorAssistantContextChange,
+  ContentEditorAssistantRegistration,
+} from '../../content-editor-assistant';
+import type {
+  ContentData,
+  ContentGovernanceStateData,
+  FactAuditStateData,
+  FactData,
+} from '../../mock-smrt-client';
+import { evaluateContentPublishReadiness } from '../../publish-readiness';
+import ContentEditor from './ContentEditor.svelte';
+import ContentGovernancePanel from './ContentGovernancePanel.svelte';
+
+export type GovernedContentEditorSaveData = ContentData & {
+  factIds: string[];
+  facts: FactData[];
+};
+
+export interface Props {
+  apiBaseUrl?: string;
+  content?: ContentData;
+  contentId?: string;
+  defaultRelationship?: string;
+  reviewProfileKey?: string;
+  customReviewLabel?: string;
+  customReviewInstructions?: string;
+  customReviewPolicyKey?: string;
+  enforcePublishReadiness?: boolean;
+  saveDisabled?: boolean;
+  saveNotice?: string | null;
+  agentChatEnabled?: boolean;
+  agentChatNotice?: string | null;
+  hideActions?: boolean;
+  hideChat?: boolean;
+  showFactCatalog?: boolean;
+  showGovernancePanel?: boolean;
+  onAssistantContextChange?: ContentEditorAssistantContextChange;
+  onSave: (data: GovernedContentEditorSaveData) => void;
+  onCancel: () => void;
+}
+
+let {
+  apiBaseUrl = '/api/v1',
+  content = undefined,
+  contentId = 'new',
+  defaultRelationship = 'supports',
+  reviewProfileKey = 'publication',
+  customReviewLabel = 'Custom Review',
+  customReviewInstructions = '',
+  customReviewPolicyKey = 'custom',
+  enforcePublishReadiness = false,
+  saveDisabled = false,
+  saveNotice = null,
+  agentChatEnabled = true,
+  agentChatNotice = null,
+  hideActions = false,
+  hideChat = false,
+  showFactCatalog = false,
+  showGovernancePanel = true,
+  onAssistantContextChange = undefined,
+  onSave,
+  onCancel,
+}: Props = $props();
+
+function getInitialSelectedFactIds(nextContent?: ContentData) {
+  return Array.isArray(nextContent?.factIds)
+    ? nextContent.factIds.filter((factId): factId is string => Boolean(factId))
+    : [];
+}
+
+function getInitialSelectedFacts(nextContent?: ContentData) {
+  return Array.isArray(nextContent?.facts) ? nextContent.facts : [];
+}
+
+let selectedFactIds = $state<string[]>([]);
+let selectedFacts = $state<FactData[]>([]);
+let lastResetKey = $state<string | null | undefined>(undefined);
+let draftContent = $state<ContentData | undefined>(undefined);
+let governanceState = $state<ContentGovernanceStateData | null>(null);
+let factAudit = $state<FactAuditStateData | null>(null);
+let editorAssistantRegistration =
+  $state<ContentEditorAssistantRegistration | null>(null);
+const resolvedContentId = $derived(content?.id ?? contentId);
+let innerEditor = $state<any>(null);
+
+export function triggerSave() {
+  if (publishSaveDisabled) return;
+  if (innerEditor && typeof innerEditor.triggerSave === 'function') {
+    innerEditor.triggerSave();
+  }
+}
+
+let governancePanel = $state<any>(null);
+
+export function triggerReview(actionKind: string) {
+  if (governancePanel && typeof governancePanel.triggerReview === 'function') {
+    governancePanel.triggerReview(actionKind);
+  }
+}
+
+$effect(() => {
+  const nextResetKey = content?.id ?? contentId ?? null;
+  if (nextResetKey === lastResetKey) {
+    return;
+  }
+
+  lastResetKey = nextResetKey;
+  selectedFactIds = getInitialSelectedFactIds(content);
+  selectedFacts = getInitialSelectedFacts(content);
+  draftContent = content;
+  governanceState = null;
+});
+
+const governedContent = $derived(
+  content
+    ? {
+        ...content,
+        factIds: selectedFactIds,
+        facts: selectedFacts,
+      }
+    : undefined,
+);
+const activeReviewProfileKey = $derived(
+  governanceState?.publicationProfileKey || reviewProfileKey,
+);
+const activeEnforcePublishReadiness = $derived(
+  governanceState?.enforcePublishReadiness ?? enforcePublishReadiness,
+);
+const publishReadinessState = $derived(
+  evaluateContentPublishReadiness({
+    status: draftContent?.status || governedContent?.status,
+    contentId:
+      typeof resolvedContentId === 'string' && resolvedContentId !== 'new'
+        ? resolvedContentId
+        : null,
+    reviewProfileKey: activeReviewProfileKey,
+    reviewProfiles: governanceState?.reviewProfiles || [],
+    enforce: activeEnforcePublishReadiness,
+  }),
+);
+const publishSaveNotice = $derived(
+  publishReadinessState &&
+    publishReadinessState.level !== 'ready' &&
+    publishReadinessState.message
+    ? publishReadinessState.message
+    : null,
+);
+const publishSaveDisabled = $derived(
+  Boolean(saveDisabled || publishReadinessState?.disableSave),
+);
+const resolvedSaveNotice = $derived(publishSaveNotice || saveNotice || null);
+const governedAssistantRegistration = $derived.by(() => {
+  if (!editorAssistantRegistration) {
+    return null;
+  }
+
+  const publishReadiness = publishReadinessState
+    ? {
+        level: publishReadinessState.level,
+        title: publishReadinessState.title,
+        message: publishReadinessState.message,
+        disableSave: publishReadinessState.disableSave,
+        details: [...publishReadinessState.details],
+      }
+    : null;
+
+  return {
+    context: {
+      ...editorAssistantRegistration.context,
+      data: {
+        ...editorAssistantRegistration.context.data,
+        editorKind: 'governed' as const,
+        facts: {
+          factIds: [...selectedFactIds],
+          factCount: selectedFacts.length || selectedFactIds.length,
+        },
+        governance: {
+          reviewProfileKey: activeReviewProfileKey,
+          enforcePublishReadiness: activeEnforcePublishReadiness,
+          publishReadiness,
+        },
+      },
+    },
+    actions: {
+      ...editorAssistantRegistration.actions,
+      triggerSave,
+      triggerReview,
+    },
+  } satisfies ContentEditorAssistantRegistration;
+});
+let activeAssistantContextCallback:
+  | ContentEditorAssistantContextChange
+  | undefined;
+let lastAssistantContextCallback:
+  | ContentEditorAssistantContextChange
+  | undefined;
+let lastAssistantRegistration:
+  | ContentEditorAssistantRegistration
+  | null
+  | undefined;
+
+function publishAssistantRegistration(
+  registration: ContentEditorAssistantRegistration | null,
+) {
+  const callback = activeAssistantContextCallback;
+  if (!callback) {
+    return;
+  }
+
+  if (
+    callback === lastAssistantContextCallback &&
+    registration === lastAssistantRegistration
+  ) {
+    return;
+  }
+
+  callback(registration);
+  lastAssistantContextCallback = callback;
+  lastAssistantRegistration = registration;
+}
+
+$effect(() => {
+  const callback = onAssistantContextChange;
+  activeAssistantContextCallback = callback;
+  if (!callback) {
+    lastAssistantContextCallback = undefined;
+    lastAssistantRegistration = undefined;
+    return;
+  }
+
+  publishAssistantRegistration(untrack(() => governedAssistantRegistration));
+
+  return () => {
+    if (activeAssistantContextCallback === callback) {
+      activeAssistantContextCallback = undefined;
+    }
+    if (lastAssistantContextCallback === callback) {
+      lastAssistantContextCallback = undefined;
+      lastAssistantRegistration = undefined;
+    }
+    callback(null);
+  };
+});
+
+$effect(() => {
+  const registration = governedAssistantRegistration;
+  untrack(() => publishAssistantRegistration(registration));
+});
+
+function handleFactsChange(factIds: string[], facts: FactData[]) {
+  selectedFactIds = factIds;
+  selectedFacts = facts;
+}
+
+function handleEditorChange(data: ContentData) {
+  draftContent = data;
+}
+
+function handleGovernanceStateChange(state: ContentGovernanceStateData | null) {
+  governanceState = state;
+}
+
+function handleFactAuditChange(state: FactAuditStateData | null) {
+  factAudit = state;
+}
+
+function handleEditorAssistantContextChange(
+  registration: ContentEditorAssistantRegistration | null,
+) {
+  editorAssistantRegistration = registration;
+}
+
+function handleSave(data: ContentData) {
+  draftContent = data;
+
+  if (publishReadinessState?.disableSave) {
+    return;
+  }
+
+  onSave({
+    ...data,
+    factIds: selectedFactIds,
+    facts: selectedFacts,
+  });
+}
+</script>
+
+<div class="governed-editor">
+  {#if publishReadinessState}
+    <div class={`publish-readiness-card publish-readiness-card--${publishReadinessState.level}`}>
+      <div class="publish-readiness-card__header">
+        <strong>{publishReadinessState.title}</strong>
+        <span class="publish-readiness-card__profile">
+          {activeReviewProfileKey}
+        </span>
+      </div>
+      <p>{publishReadinessState.message}</p>
+      {#if publishReadinessState.details.length > 0}
+        <ul class="publish-readiness-card__list">
+          {#each publishReadinessState.details as detail}
+            <li>{detail}</li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+  {/if}
+
+  <ContentEditor
+    bind:this={innerEditor}
+    {apiBaseUrl}
+    content={governedContent}
+    contentId={resolvedContentId}
+    {factAudit}
+    saveDisabled={publishSaveDisabled}
+    saveNotice={resolvedSaveNotice}
+    {agentChatEnabled}
+    {agentChatNotice}
+    {hideActions}
+    {hideChat}
+    onAssistantContextChange={handleEditorAssistantContextChange}
+    onChange={handleEditorChange}
+    onFactAuditChange={handleFactAuditChange}
+    onSave={handleSave}
+    onCancel={onCancel}
+  />
+
+  {#if showGovernancePanel}
+    <ContentGovernancePanel
+      bind:this={governancePanel}
+      {apiBaseUrl}
+      contentId={resolvedContentId}
+      draftType={draftContent?.type || content?.type}
+      draftVariant={draftContent?.variant || content?.variant}
+      selectedFactIds={selectedFactIds}
+      selectedFacts={selectedFacts}
+      defaultRelationship={defaultRelationship}
+      reviewProfileKey={activeReviewProfileKey}
+      customReviewLabel={customReviewLabel}
+      customReviewInstructions={customReviewInstructions}
+      customReviewPolicyKey={customReviewPolicyKey}
+      {showFactCatalog}
+      onFactsChange={handleFactsChange}
+      onGovernanceStateChange={handleGovernanceStateChange}
+      onFactAuditChange={handleFactAuditChange}
+    />
+  {/if}
+</div>
+
+<style>
+  .governed-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .publish-readiness-card {
+    border-radius: 0.75rem;
+    padding: 1rem;
+    border: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface-container-low);
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+  }
+
+  .publish-readiness-card--ready {
+    border-color: color-mix(in srgb, var(--smrt-color-primary) 35%, transparent);
+  }
+
+  .publish-readiness-card--advisory {
+    border-color: color-mix(in srgb, var(--smrt-color-tertiary, #d97706) 45%, transparent);
+  }
+
+  .publish-readiness-card--blocked {
+    border-color: color-mix(in srgb, var(--smrt-color-error) 45%, transparent);
+  }
+
+  .publish-readiness-card__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+
+  .publish-readiness-card__header strong {
+    color: var(--smrt-color-on-surface);
+  }
+
+  .publish-readiness-card__profile {
+    font-size: var(--smrt-typography-label-medium-size, 0.8rem);
+    color: var(--smrt-color-on-surface-variant);
+    text-transform: uppercase;
+    letter-spacing: var(--smrt-typography-label-medium-tracking, 0.04em);
+  }
+
+  .publish-readiness-card p {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .publish-readiness-card__list {
+    margin: 0;
+    padding-left: 1.25rem;
+    color: var(--smrt-color-on-surface-variant);
+  }
+</style>

package/dist/svelte/components/GovernedContentEditor.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { ContentEditorAssistantContextChange } from '../../content-editor-assistant';
+import type { ContentData, FactData } from '../../mock-smrt-client';
+export type GovernedContentEditorSaveData = ContentData & {
+    factIds: string[];
+    facts: FactData[];
+};
+export interface Props {
+    apiBaseUrl?: string;
+    content?: ContentData;
+    contentId?: string;
+    defaultRelationship?: string;
+    reviewProfileKey?: string;
+    customReviewLabel?: string;
+    customReviewInstructions?: string;
+    customReviewPolicyKey?: string;
+    enforcePublishReadiness?: boolean;
+    saveDisabled?: boolean;
+    saveNotice?: string | null;
+    agentChatEnabled?: boolean;
+    agentChatNotice?: string | null;
+    hideActions?: boolean;
+    hideChat?: boolean;
+    showFactCatalog?: boolean;
+    showGovernancePanel?: boolean;
+    onAssistantContextChange?: ContentEditorAssistantContextChange;
+    onSave: (data: GovernedContentEditorSaveData) => void;
+    onCancel: () => void;
+}
+declare const GovernedContentEditor: import("svelte").Component<Props, {
+    triggerSave: () => void;
+    triggerReview: (actionKind: string) => void;
+}, "">;
+type GovernedContentEditor = ReturnType<typeof GovernedContentEditor>;
+export default GovernedContentEditor;
+//# sourceMappingURL=GovernedContentEditor.svelte.d.ts.map

package/dist/svelte/components/GovernedContentEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GovernedContentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/GovernedContentEditor.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,mCAAmC,EAEpC,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EACV,WAAW,EAGX,QAAQ,EACT,MAAM,wBAAwB,CAAC;AAMhC,MAAM,MAAM,6BAA6B,GAAG,WAAW,GAAG;IACxD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB,CAAC;AAEF,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wBAAwB,CAAC,EAAE,mCAAmC,CAAC;IAC/D,MAAM,EAAE,CAAC,IAAI,EAAE,6BAA6B,KAAK,IAAI,CAAC;IACtD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAgSD,QAAA,MAAM,qBAAqB;;gCAhOS,MAAM;MAgOyB,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/svelte/components/ImageThumbnail.cache.d.ts

@@ -0,0 +1,14 @@
+export type ThumbnailState = 'loading' | 'ready' | 'missing';
+type ThumbnailCacheEntry = {
+    state: ThumbnailState;
+    url: string | null;
+    expiresAt: number | null;
+};
+export declare const THUMBNAIL_FAILURE_TTL_MS = 30000;
+export declare function clearThumbnailCache(): void;
+export declare function getCachedThumbnail(cacheKey: string): ThumbnailCacheEntry | undefined;
+export declare function setCachedThumbnail(cacheKey: string, entry: Omit<ThumbnailCacheEntry, 'expiresAt'> & {
+    expiresAt?: number | null;
+}): void;
+export {};
+//# sourceMappingURL=ImageThumbnail.cache.d.ts.map

package/dist/svelte/components/ImageThumbnail.cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageThumbnail.cache.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ImageThumbnail.cache.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,cAAc,CAAC;IACtB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;AAGF,eAAO,MAAM,wBAAwB,QAAS,CAAC;AAI/C,wBAAgB,mBAAmB,IAAI,IAAI,CAE1C;AAED,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,GACf,mBAAmB,GAAG,SAAS,CAcjC;AAED,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAC,GAAG;IAC9C,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,GACA,IAAI,CAmBN"}

package/dist/svelte/components/ImageThumbnail.cache.js

@@ -0,0 +1,36 @@
+const THUMBNAIL_CACHE_MAX_ENTRIES = 200;
+export const THUMBNAIL_FAILURE_TTL_MS = 30_000;
+const thumbnailCache = new Map();
+export function clearThumbnailCache() {
+    thumbnailCache.clear();
+}
+export function getCachedThumbnail(cacheKey) {
+    const cached = thumbnailCache.get(cacheKey);
+    if (!cached) {
+        return undefined;
+    }
+    if (cached.expiresAt !== null && cached.expiresAt <= Date.now()) {
+        thumbnailCache.delete(cacheKey);
+        return undefined;
+    }
+    thumbnailCache.delete(cacheKey);
+    thumbnailCache.set(cacheKey, cached);
+    return cached;
+}
+export function setCachedThumbnail(cacheKey, entry) {
+    if (thumbnailCache.has(cacheKey)) {
+        thumbnailCache.delete(cacheKey);
+    }
+    thumbnailCache.set(cacheKey, {
+        state: entry.state,
+        url: entry.url,
+        expiresAt: entry.expiresAt ?? null,
+    });
+    while (thumbnailCache.size > THUMBNAIL_CACHE_MAX_ENTRIES) {
+        const oldestKey = thumbnailCache.keys().next().value;
+        if (!oldestKey) {
+            break;
+        }
+        thumbnailCache.delete(oldestKey);
+    }
+}

package/dist/svelte/components/ImageThumbnail.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { joinApiUrl } from '../api';
+import { M } from '../i18n.editor.js';
+import {
+  getCachedThumbnail,
+  setCachedThumbnail,
+  THUMBNAIL_FAILURE_TTL_MS,
+  type ThumbnailState,
+} from './ImageThumbnail.cache';
+
+const { t } = useI18n();
+
+interface ImageThumbnailProps {
+  assetId: string;
+  apiBaseUrl?: string;
+}
+
+let { assetId, apiBaseUrl = '/api/v1' }: ImageThumbnailProps = $props();
+
+let imageUrl: string | null = $state(null);
+let thumbnailState: ThumbnailState = $state('loading');
+let currentCacheKey: string | null = $state(null);
+
+function isAbortError(error: unknown, signal: AbortSignal): boolean {
+  if (signal.aborted) {
+    return true;
+  }
+
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'name' in error &&
+    error.name === 'AbortError'
+  );
+}
+
+$effect(() => {
+  if (!assetId) {
+    currentCacheKey = null;
+    imageUrl = null;
+    thumbnailState = 'missing';
+    return;
+  }
+
+  const cacheKey = `${apiBaseUrl}::${assetId}`;
+  currentCacheKey = cacheKey;
+  const cached = getCachedThumbnail(cacheKey);
+  if (cached) {
+    imageUrl = cached.url;
+    thumbnailState = cached.state;
+    return;
+  }
+
+  imageUrl = null;
+  thumbnailState = 'loading';
+
+  const abortController = new AbortController();
+
+  fetch(joinApiUrl(apiBaseUrl, `/images/${assetId}`), {
+    signal: abortController.signal,
+  })
+    .then((res) => {
+      if (!res.ok) {
+        return null;
+      }
+
+      return res.json();
+    })
+    .then((data) => {
+      imageUrl = data?.sourceUri || data?.url || null;
+      thumbnailState = imageUrl ? 'ready' : 'missing';
+      setCachedThumbnail(cacheKey, {
+        state: thumbnailState,
+        url: imageUrl,
+        expiresAt: imageUrl ? null : Date.now() + THUMBNAIL_FAILURE_TTL_MS,
+      });
+    })
+    .catch((error: unknown) => {
+      if (isAbortError(error, abortController.signal)) {
+        return;
+      }
+
+      imageUrl = null;
+      thumbnailState = 'missing';
+      setCachedThumbnail(cacheKey, {
+        state: 'missing',
+        url: null,
+        expiresAt: Date.now() + THUMBNAIL_FAILURE_TTL_MS,
+      });
+    });
+
+  return () => {
+    abortController.abort();
+  };
+});
+</script>
+
+{#if thumbnailState === 'ready' && imageUrl}
+  <img
+    src={imageUrl}
+    alt={t(M['content.image_thumbnail.thumbnail_preview'])}
+    class="smrt-thumbnail-img"
+    loading="lazy"
+    onerror={() => {
+      imageUrl = null;
+      thumbnailState = 'missing';
+      if (currentCacheKey) {
+        setCachedThumbnail(currentCacheKey, {
+          state: 'missing',
+          url: null,
+          expiresAt: Date.now() + THUMBNAIL_FAILURE_TTL_MS,
+        });
+      }
+    }}
+  />
+{:else if thumbnailState === 'loading'}
+  <div class="smrt-thumbnail-skeleton" aria-hidden="true"></div>
+{:else}
+  <div class="smrt-thumbnail-missing" aria-label={t(M['content.image_thumbnail.thumbnail_unavailable'])}>
+    <span>{t(M['content.image_thumbnail.preview_unavailable'])}</span>
+  </div>
+{/if}
+
+<style>
+  .smrt-thumbnail-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .smrt-thumbnail-skeleton {
+    width: 100%;
+    height: 100%;
+    background: var(--smrt-color-surface-container-high, #242424);
+  }
+
+  .smrt-thumbnail-missing {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    padding: 0.75rem;
+    background:
+      linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--smrt-color-surface-container-low, #1f2937) 92%, transparent),
+        color-mix(in srgb, var(--smrt-color-surface-container-high, #111827) 96%, transparent)
+      );
+    color: var(--smrt-color-on-surface-variant, #cbd5e1);
+    text-align: center;
+  }
+
+  .smrt-thumbnail-missing span {
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    letter-spacing: var(--smrt-typography-label-medium-tracking, 0.04em);
+    text-transform: uppercase;
+  }
+</style>

package/dist/svelte/components/ImageThumbnail.svelte.d.ts

@@ -0,0 +1,8 @@
+interface ImageThumbnailProps {
+    assetId: string;
+    apiBaseUrl?: string;
+}
+declare const ImageThumbnail: import("svelte").Component<ImageThumbnailProps, {}, "">;
+type ImageThumbnail = ReturnType<typeof ImageThumbnail>;
+export default ImageThumbnail;
+//# sourceMappingURL=ImageThumbnail.svelte.d.ts.map

package/dist/svelte/components/ImageThumbnail.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageThumbnail.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ImageThumbnail.svelte.ts"],"names":[],"mappings":"AAcA,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkHD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}