@happyvertical/smrt-content 0.30.0

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

@@ -0,0 +1,26 @@
+import { type ContentGovernanceStateData, type FactAuditStateData, type FactData } from '../../mock-smrt-client';
+export type ContentGovernancePanelSection = 'factAudit' | 'facts' | 'reviews' | 'transparency' | 'corrections' | 'versions';
+export interface Props {
+    apiBaseUrl?: string;
+    contentId?: string;
+    draftType?: string | null;
+    draftVariant?: string | null;
+    selectedFactIds?: string[];
+    selectedFacts?: FactData[];
+    defaultRelationship?: string;
+    reviewProfileKey?: string;
+    customReviewLabel?: string;
+    customReviewInstructions?: string;
+    customReviewPolicyKey?: string;
+    showFactCatalog?: boolean;
+    onFactsChange?: (factIds: string[], facts: FactData[]) => void;
+    onGovernanceStateChange?: (state: ContentGovernanceStateData | null) => void;
+    onFactAuditChange?: (state: FactAuditStateData | null) => void;
+    hiddenSections?: ContentGovernancePanelSection[];
+}
+declare const ContentGovernancePanel: import("svelte").Component<Props, {
+    triggerReview: (actionKind: string) => Promise<void>;
+}, "">;
+type ContentGovernancePanel = ReturnType<typeof ContentGovernancePanel>;
+export default ContentGovernancePanel;
+//# sourceMappingURL=ContentGovernancePanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentGovernancePanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernancePanel.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAIL,KAAK,0BAA0B,EAQ/B,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EAEd,MAAM,wBAAwB,CAAC;AAMhC,MAAM,MAAM,6BAA6B,GACrC,WAAW,GACX,OAAO,GACP,SAAS,GACT,cAAc,GACd,aAAa,GACb,UAAU,CAAC;AASf,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC3B,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,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAC/D,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7E,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,cAAc,CAAC,EAAE,6BAA6B,EAAE,CAAC;CAClD;AA2mDD,QAAA,MAAM,sBAAsB;gCAx3Bc,MAAM;MAw3BoB,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/ContentGovernancePolicyEditor.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { ContentReviewPolicyData } from '../../mock-smrt-client';
+import { M } from '../i18n.tools.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  policy?: Partial<ContentReviewPolicyData>;
+  onSave: (policy: Partial<ContentReviewPolicyData>) => void;
+  onCancel?: () => void;
+}
+
+let { policy = {}, onSave, onCancel = undefined }: Props = $props();
+
+function createDraft(sourcePolicy: Partial<ContentReviewPolicyData>) {
+  return {
+    key: sourcePolicy.key || '',
+    label: sourcePolicy.label || '',
+    kind: sourcePolicy.kind || 'custom',
+    instructions: sourcePolicy.instructions || '',
+    enabled: sourcePolicy.enabled ?? true,
+  };
+}
+
+let draft = $state(createDraft({}));
+
+$effect(() => {
+  draft = createDraft(policy);
+});
+
+function handleSubmit() {
+  onSave({
+    ...policy,
+    key: draft.key,
+    label: draft.label,
+    kind: draft.kind,
+    instructions: draft.instructions,
+    enabled: draft.enabled,
+  });
+}
+</script>
+
+<form class="governance-editor" onsubmit={(event) => {
+  event.preventDefault();
+  handleSubmit();
+}}>
+  <label>
+    Key
+    <input type="text" bind:value={draft.key} required />
+  </label>
+  <label>
+    Label
+    <input type="text" bind:value={draft.label} />
+  </label>
+  <label>
+    Kind
+    <select bind:value={draft.kind}>
+      <option value="facts">Facts</option>
+      <option value="safety">Safety</option>
+      <option value="custom">Custom</option>
+    </select>
+  </label>
+  <label>
+    Instructions
+    <textarea rows="4" bind:value={draft.instructions}></textarea>
+  </label>
+  <label class="checkbox">
+    <input type="checkbox" bind:checked={draft.enabled} />
+    Enabled
+  </label>
+  <div class="actions">
+    <button type="submit">{t(M['content.governance_policy_editor.save_policy'])}</button>
+    {#if onCancel}
+      <button type="button" class="secondary" onclick={() => onCancel?.()}>
+        Cancel
+      </button>
+    {/if}
+  </div>
+</form>
+
+<style>
+  .governance-editor {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  label {
+    display: grid;
+    gap: 0.35rem;
+    font-size: var(--smrt-typography-label-large-size, 0.9rem);
+  }
+
+  input,
+  select,
+  textarea {
+    width: 100%;
+  }
+
+  .checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.75rem;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { ContentReviewPolicyData } from '../../mock-smrt-client';
+export interface Props {
+    policy?: Partial<ContentReviewPolicyData>;
+    onSave: (policy: Partial<ContentReviewPolicyData>) => void;
+    onCancel?: () => void;
+}
+declare const ContentGovernancePolicyEditor: import("svelte").Component<Props, {}, "">;
+type ContentGovernancePolicyEditor = ReturnType<typeof ContentGovernancePolicyEditor>;
+export default ContentGovernancePolicyEditor;
+//# sourceMappingURL=ContentGovernancePolicyEditor.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentGovernancePolicyEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernancePolicyEditor.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAItE,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAiFD,QAAA,MAAM,6BAA6B,2CAAwC,CAAC;AAC5E,KAAK,6BAA6B,GAAG,UAAU,CAAC,OAAO,6BAA6B,CAAC,CAAC;AACtF,eAAe,6BAA6B,CAAC"}

package/dist/svelte/components/ContentGovernanceProfileEditor.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type {
+  ContentGovernanceProfileData,
+  ContentReviewPolicyData,
+} from '../../mock-smrt-client';
+import { M } from '../i18n.tools.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  profile?: Partial<ContentGovernanceProfileData>;
+  policies?: ContentReviewPolicyData[];
+  onSave: (profile: Partial<ContentGovernanceProfileData>) => void;
+  onCancel?: () => void;
+}
+
+let {
+  profile = {},
+  policies = [],
+  onSave,
+  onCancel = undefined,
+}: Props = $props();
+
+function createDefaultRequirement(
+  availablePolicies: ContentReviewPolicyData[],
+) {
+  return {
+    policyKey: availablePolicies[0]?.key || 'safety',
+    label: availablePolicies[0]?.label || 'Safety Review',
+    blocking: false,
+    acceptedStatuses: ['passed', 'waived'],
+  };
+}
+
+function createDraft(
+  sourceProfile: Partial<ContentGovernanceProfileData>,
+  availablePolicies: ContentReviewPolicyData[],
+) {
+  return {
+    key: sourceProfile.key || '',
+    label: sourceProfile.label || '',
+    description: sourceProfile.description || '',
+    enabled: sourceProfile.enabled ?? true,
+    requirements:
+      Array.isArray(sourceProfile.requirements) &&
+      sourceProfile.requirements.length > 0
+        ? sourceProfile.requirements.map((requirement) => ({ ...requirement }))
+        : [createDefaultRequirement(availablePolicies)],
+  };
+}
+
+let draft = $state(createDraft({}, []));
+
+$effect(() => {
+  draft = createDraft(profile, policies);
+});
+
+function addRequirement() {
+  draft.requirements = [
+    ...draft.requirements,
+    createDefaultRequirement(policies),
+  ];
+}
+
+function removeRequirement(index: number) {
+  draft.requirements = draft.requirements.filter(
+    (_, requirementIndex) => requirementIndex !== index,
+  );
+}
+
+function handleSubmit() {
+  onSave({
+    ...profile,
+    key: draft.key,
+    label: draft.label,
+    description: draft.description,
+    enabled: draft.enabled,
+    requirements: draft.requirements,
+  });
+}
+</script>
+
+<form class="governance-editor" onsubmit={(event) => {
+  event.preventDefault();
+  handleSubmit();
+}}>
+  <label>
+    Key
+    <input type="text" bind:value={draft.key} required />
+  </label>
+  <label>
+    Label
+    <input type="text" bind:value={draft.label} />
+  </label>
+  <label>
+    Description
+    <textarea rows="2" bind:value={draft.description}></textarea>
+  </label>
+  <label class="checkbox">
+    <input type="checkbox" bind:checked={draft.enabled} />
+    Enabled
+  </label>
+
+  <div class="requirements">
+    <div class="requirements__header">
+      <strong>Requirements</strong>
+      <button type="button" class="secondary" onclick={addRequirement}>
+        {t(M['content.governance_profile_editor.add_requirement'])}
+      </button>
+    </div>
+
+    {#each draft.requirements as requirement, index (`${requirement.policyKey}-${index}`)}
+      <div class="requirement-row">
+        <label>
+          Policy
+          <select bind:value={requirement.policyKey}>
+            {#each policies as policy (policy.key)}
+              <option value={policy.key}>{policy.label}</option>
+            {/each}
+          </select>
+        </label>
+        <label>
+          Label
+          <input type="text" bind:value={requirement.label} />
+        </label>
+        <label class="checkbox">
+          <input type="checkbox" bind:checked={requirement.blocking} />
+          Blocking
+        </label>
+        <button type="button" class="secondary" onclick={() => removeRequirement(index)}>
+          Remove
+        </button>
+      </div>
+    {/each}
+  </div>
+
+  <div class="actions">
+    <button type="submit">{t(M['content.governance_profile_editor.save_profile'])}</button>
+    {#if onCancel}
+      <button type="button" class="secondary" onclick={() => onCancel?.()}>
+        Cancel
+      </button>
+    {/if}
+  </div>
+</form>
+
+<style>
+  .governance-editor {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  label {
+    display: grid;
+    gap: 0.35rem;
+    font-size: var(--smrt-typography-label-large-size, 0.9rem);
+  }
+
+  input,
+  select,
+  textarea {
+    width: 100%;
+  }
+
+  .checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .requirements {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  .requirements__header,
+  .requirement-row,
+  .actions {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { ContentGovernanceProfileData, ContentReviewPolicyData } from '../../mock-smrt-client';
+export interface Props {
+    profile?: Partial<ContentGovernanceProfileData>;
+    policies?: ContentReviewPolicyData[];
+    onSave: (profile: Partial<ContentGovernanceProfileData>) => void;
+    onCancel?: () => void;
+}
+declare const ContentGovernanceProfileEditor: import("svelte").Component<Props, {}, "">;
+type ContentGovernanceProfileEditor = ReturnType<typeof ContentGovernanceProfileEditor>;
+export default ContentGovernanceProfileEditor;
+//# sourceMappingURL=ContentGovernanceProfileEditor.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentGovernanceProfileEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernanceProfileEditor.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,4BAA4B,EAC5B,uBAAuB,EACxB,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,4BAA4B,CAAC,KAAK,IAAI,CAAC;IACjE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA+ID,QAAA,MAAM,8BAA8B,2CAAwC,CAAC;AAC7E,KAAK,8BAA8B,GAAG,UAAU,CAAC,OAAO,8BAA8B,CAAC,CAAC;AACxF,eAAe,8BAA8B,CAAC"}

package/dist/svelte/components/ContentGovernanceTool.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+import type {
+  ContentGovernanceStateData,
+  FactAuditStateData,
+} from '../../mock-smrt-client';
+import ContentClaimAuditTool from './ContentClaimAuditTool.svelte';
+import ContentCorrectionsTool from './ContentCorrectionsTool.svelte';
+import ContentTransparencyTool from './ContentTransparencyTool.svelte';
+import ContentVersionsTool from './ContentVersionsTool.svelte';
+
+export type ContentGovernanceToolSection =
+  | 'claimAudit'
+  | 'corrections'
+  | 'versions'
+  | 'transparency';
+
+export interface Props {
+  section: ContentGovernanceToolSection;
+  apiBaseUrl?: string;
+  contentId: string;
+  onGovernanceStateChange?: (state: ContentGovernanceStateData | null) => void;
+  onFactAuditChange?: (state: FactAuditStateData | null) => void;
+}
+
+let {
+  section,
+  apiBaseUrl = '/api/v1',
+  contentId,
+  onGovernanceStateChange = undefined,
+  onFactAuditChange = undefined,
+}: Props = $props();
+</script>
+
+{#if section === 'claimAudit'}
+  <ContentClaimAuditTool
+    {apiBaseUrl}
+    {contentId}
+    {onFactAuditChange}
+  />
+{:else if section === 'corrections'}
+  <ContentCorrectionsTool
+    {apiBaseUrl}
+    {contentId}
+  />
+{:else if section === 'versions'}
+  <ContentVersionsTool
+    {apiBaseUrl}
+    {contentId}
+  />
+{:else if section === 'transparency'}
+  <ContentTransparencyTool
+    {apiBaseUrl}
+    {contentId}
+    {onGovernanceStateChange}
+  />
+{/if}

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

@@ -0,0 +1,13 @@
+import type { ContentGovernanceStateData, FactAuditStateData } from '../../mock-smrt-client';
+export type ContentGovernanceToolSection = 'claimAudit' | 'corrections' | 'versions' | 'transparency';
+export interface Props {
+    section: ContentGovernanceToolSection;
+    apiBaseUrl?: string;
+    contentId: string;
+    onGovernanceStateChange?: (state: ContentGovernanceStateData | null) => void;
+    onFactAuditChange?: (state: FactAuditStateData | null) => void;
+}
+declare const ContentGovernanceTool: import("svelte").Component<Props, {}, "">;
+type ContentGovernanceTool = ReturnType<typeof ContentGovernanceTool>;
+export default ContentGovernanceTool;
+//# sourceMappingURL=ContentGovernanceTool.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentGovernanceTool.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernanceTool.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,0BAA0B,EAC1B,kBAAkB,EACnB,MAAM,wBAAwB,CAAC;AAOhC,MAAM,MAAM,4BAA4B,GACpC,YAAY,GACZ,aAAa,GACb,UAAU,GACV,cAAc,CAAC;AAEnB,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,4BAA4B,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7E,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;CAChE;AA+BD,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/svelte/components/ContentImageBrowser.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+import {
+  type ImageLike,
+  ImageUploader,
+} from '@happyvertical/smrt-images/svelte';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { ContentEditorAsset } from '../content-editor-form';
+import { M } from '../i18n.editor.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  apiBaseUrl?: string;
+  assets?: ContentEditorAsset[];
+  thumbnailAssetId?: string | null;
+  addButtonLabel?: string;
+  selectActionLabel?: string;
+  showUploaderInitially?: boolean;
+  onSelectImage?: (image: ImageLike | File | string) => void;
+  onUseAsset?: (asset: ContentEditorAsset) => void;
+  onRemoveAsset?: (assetId: string) => void;
+  onUseAsThumbnail?: (assetId: string) => void;
+}
+
+let {
+  apiBaseUrl = '/api/v1',
+  assets = [],
+  thumbnailAssetId = null,
+  addButtonLabel = 'Add Image',
+  selectActionLabel = 'Use',
+  showUploaderInitially = false,
+  onSelectImage = undefined,
+  onUseAsset = undefined,
+  onRemoveAsset = undefined,
+  onUseAsThumbnail = undefined,
+}: Props = $props();
+
+let showUploader = $state(false);
+
+$effect(() => {
+  showUploader = showUploaderInitially;
+});
+
+function getAssetImageSource(asset: ContentEditorAsset): string {
+  return String(
+    asset?.sourceUri ||
+      asset?.thumbnailUri ||
+      asset?.thumbnailUrl ||
+      asset?.deliveryUrl ||
+      asset?.url ||
+      asset?.src ||
+      '',
+  );
+}
+
+function getAssetLabel(asset: ContentEditorAsset): string {
+  return String(
+    asset?.name || asset?.title || asset?.filename || asset?.id || 'Image',
+  );
+}
+
+function handleSelect(selected: ImageLike | File | string) {
+  onSelectImage?.(selected);
+  showUploader = false;
+}
+</script>
+
+<div class="content-image-browser">
+  {#if assets.length}
+    <div class="asset-grid">
+      {#each assets as asset, index (asset.id || `${getAssetLabel(asset)}-${index}`)}
+        {@const source = getAssetImageSource(asset)}
+        {@const assetId = typeof asset.id === 'string' ? asset.id : ''}
+        <article class="asset-card" class:asset-card--thumbnail={thumbnailAssetId === assetId}>
+          <div class="asset-preview">
+            {#if source}
+              <img src={source} alt={getAssetLabel(asset)} loading="lazy" decoding="async" />
+            {:else}
+              <span>{getAssetLabel(asset).slice(0, 1).toUpperCase()}</span>
+            {/if}
+          </div>
+          <div class="asset-meta">
+            <strong>{getAssetLabel(asset)}</strong>
+            {#if thumbnailAssetId === assetId}
+              <span>Thumbnail</span>
+            {/if}
+          </div>
+          <div class="asset-actions">
+            {#if onUseAsset}
+              <button type="button" onclick={() => onUseAsset?.(asset)}>{selectActionLabel}</button>
+            {/if}
+            {#if onUseAsThumbnail && assetId && thumbnailAssetId !== assetId}
+              <button type="button" onclick={() => onUseAsThumbnail?.(assetId)}>Thumbnail</button>
+            {/if}
+            {#if onRemoveAsset && assetId}
+              <button type="button" class="danger" onclick={() => onRemoveAsset?.(assetId)}>Remove</button>
+            {/if}
+          </div>
+        </article>
+      {/each}
+    </div>
+  {:else}
+    <p class="empty-state">{t(M['content.content_image_browser.no_images_attached'])}</p>
+  {/if}
+
+  {#if showUploader}
+    <div class="uploader-panel">
+      <ImageUploader {apiBaseUrl} onSelect={handleSelect} onCancel={() => showUploader = false} />
+    </div>
+  {:else if onSelectImage}
+    <button type="button" class="add-image-button" onclick={() => showUploader = true}>
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <rect x="3" y="3" width="18" height="18" rx="2"></rect>
+        <circle cx="8.5" cy="8.5" r="1.5"></circle>
+        <path d="m21 15-5-5L5 21"></path>
+      </svg>
+      {addButtonLabel}
+    </button>
+  {/if}
+</div>
+
+<style>
+  .content-image-browser {
+    display: grid;
+    gap: 1rem;
+    min-height: 5.5rem;
+    padding: 1rem;
+    border: 1px dashed color-mix(in srgb, var(--smrt-color-outline) 45%, transparent);
+    border-radius: 0.5rem;
+  }
+
+  .asset-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    gap: 0.75rem;
+  }
+
+  .asset-card {
+    display: grid;
+    gap: 0.75rem;
+    border: 1px solid color-mix(in srgb, var(--smrt-color-outline) 28%, transparent);
+    border-radius: 0.5rem;
+    background: var(--smrt-color-surface-container-low);
+    padding: 0.75rem;
+  }
+
+  .asset-card--thumbnail {
+    border-color: var(--smrt-color-primary);
+  }
+
+  .asset-preview {
+    display: grid;
+    place-items: center;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    border-radius: 0.375rem;
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-headline-small-size, 1.5rem);
+    font-weight: var(--smrt-typography-weight-bold, 700);
+  }
+
+  .asset-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .asset-meta {
+    display: grid;
+    gap: 0.2rem;
+    min-width: 0;
+  }
+
+  .asset-meta strong {
+    overflow: hidden;
+    color: var(--smrt-color-on-surface);
+    font-size: var(--smrt-typography-title-small-size, 0.875rem);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .asset-meta span,
+  .empty-state {
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+  }
+
+  .empty-state {
+    margin: 0;
+    font-style: italic;
+  }
+
+  .asset-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.45rem;
+    min-height: 2.35rem;
+    border: 1px solid var(--smrt-color-outline);
+    border-radius: 0.5rem;
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface);
+    cursor: pointer;
+    font: inherit;
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    padding: 0.5rem 0.875rem;
+  }
+
+  button:hover {
+    background: var(--smrt-color-surface-container-high);
+  }
+
+  button.danger {
+    color: var(--smrt-color-error);
+  }
+
+  .add-image-button {
+    justify-self: start;
+  }
+
+  .add-image-button svg {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .uploader-panel {
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import { type ImageLike } from '@happyvertical/smrt-images/svelte';
+import type { ContentEditorAsset } from '../content-editor-form';
+export interface Props {
+    apiBaseUrl?: string;
+    assets?: ContentEditorAsset[];
+    thumbnailAssetId?: string | null;
+    addButtonLabel?: string;
+    selectActionLabel?: string;
+    showUploaderInitially?: boolean;
+    onSelectImage?: (image: ImageLike | File | string) => void;
+    onUseAsset?: (asset: ContentEditorAsset) => void;
+    onRemoveAsset?: (assetId: string) => void;
+    onUseAsThumbnail?: (assetId: string) => void;
+}
+declare const ContentImageBrowser: import("svelte").Component<Props, {}, "">;
+type ContentImageBrowser = ReturnType<typeof ContentImageBrowser>;
+export default ContentImageBrowser;
+//# sourceMappingURL=ContentImageBrowser.svelte.d.ts.map