@happyvertical/smrt-assets 0.30.0

package/dist/svelte/CreateAssetModal.svelte

@@ -0,0 +1,373 @@
+<script lang="ts">
+/**
+ * CreateAssetModal - Upload/create new assets
+ *
+ * Modal with drag-and-drop dropzone, paste support, and metadata fields.
+ * When a file is pasted or dragged onto the AssetManager, this modal
+ * opens with the file pre-loaded.
+ */
+
+// Import primitives from subpaths (not the root barrel) so downstream
+// consumers of `@happyvertical/smrt-assets/svelte` don't have to resolve the
+// entire smrt-svelte surface — including optional peers like smrt-agents /
+// smrt-users — just to compile this modal.
+import { Modal } from '@happyvertical/smrt-ui/feedback';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { M } from './i18n.js';
+
+const { t } = useI18n();
+
+export interface CreateAssetModalProps {
+  /** Whether the modal is open */
+  open: boolean;
+  /** Pre-loaded file (from paste or drag) */
+  initialFile?: File | null;
+  /** Callback when creation is complete */
+  oncreate: (data: {
+    file: File;
+    name: string;
+    description: string;
+    altText: string;
+  }) => void;
+  /** Callback when modal is closed */
+  onclose: () => void;
+}
+
+let {
+  open,
+  initialFile = null,
+  oncreate,
+  onclose,
+}: CreateAssetModalProps = $props();
+
+let file = $state<File | null>(null);
+let name = $state('');
+let description = $state('');
+let altText = $state('');
+let dragOver = $state(false);
+let previewUrl: string | null = $state(null);
+
+// Sync initial file
+$effect(() => {
+  if (initialFile) {
+    file = initialFile;
+    name = initialFile.name.replace(/\.[^/.]+$/, '');
+  }
+});
+
+// Preview URL for images
+$effect(() => {
+  if (previewUrl) {
+    URL.revokeObjectURL(previewUrl);
+  }
+  if (file?.type.startsWith('image/')) {
+    previewUrl = URL.createObjectURL(file);
+  } else {
+    previewUrl = null;
+  }
+
+  return () => {
+    if (previewUrl) URL.revokeObjectURL(previewUrl);
+  };
+});
+
+function handleDragOver(e: DragEvent) {
+  e.preventDefault();
+  dragOver = true;
+}
+
+function handleDragLeave() {
+  dragOver = false;
+}
+
+function handleDrop(e: DragEvent) {
+  e.preventDefault();
+  dragOver = false;
+  const dropped = e.dataTransfer?.files?.[0];
+  if (dropped) {
+    file = dropped;
+    name = dropped.name.replace(/\.[^/.]+$/, '');
+  }
+}
+
+function handleFileSelect(e: Event) {
+  const target = e.target as HTMLInputElement;
+  const selected = target.files?.[0];
+  if (selected) {
+    file = selected;
+    name = selected.name.replace(/\.[^/.]+$/, '');
+  }
+}
+
+function handleSubmit() {
+  if (!file) return;
+  oncreate({ file, name, description, altText });
+  resetForm();
+}
+
+function handleClose() {
+  resetForm();
+  onclose();
+}
+
+function resetForm() {
+  file = null;
+  name = '';
+  description = '';
+  altText = '';
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+const isImage = $derived(file?.type?.startsWith('image/') ?? false);
+const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
+</script>
+
+<Modal open={open} title={t(M['assets.create_asset_modal.upload_asset'])} onClose={handleClose} size="md">
+      {#if !file}
+        <!-- Dropzone -->
+        <div
+          class="dropzone"
+          class:dropzone--active={dragOver}
+          role="button"
+          tabindex="0"
+          ondragover={handleDragOver}
+          ondragleave={handleDragLeave}
+          ondrop={handleDrop}
+          onclick={() => document.getElementById('file-input')?.click()}
+          onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') document.getElementById('file-input')?.click(); }}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="dropzone__icon">
+            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path>
+            <polyline points="17 8 12 3 7 8"></polyline>
+            <line x1="12" y1="3" x2="12" y2="15"></line>
+          </svg>
+          <p class="dropzone__text">{t(M['assets.create_asset_modal.dropzone_text'])}</p>
+          <p class="dropzone__hint">{t(M['assets.create_asset_modal.dropzone_hint'])}</p>
+          <input id="file-input" type="file" class="dropzone__input" onchange={handleFileSelect} />
+        </div>
+      {:else}
+        <!-- File preview + metadata form -->
+        <div class="file-preview">
+          {#if previewUrl}
+            <img src={previewUrl} alt={t(M['assets.create_asset_modal.preview_alt'])} class="file-preview__image" />
+          {:else}
+            <div class="file-preview__icon">📎</div>
+          {/if}
+          <div class="file-preview__meta">
+            <span class="file-preview__filename">{file.name}</span>
+            <span class="file-preview__size">{formatSize(file.size)}</span>
+            {#if isLargeFile}
+              <span class="file-preview__warning">{t(M['assets.create_asset_modal.large_file_warning'])}</span>
+            {/if}
+          </div>
+          <button type="button" class="file-preview__remove" onclick={() => { file = null; }} aria-label={t(M['assets.create_asset_modal.remove_file'])}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+
+        <div class="form-fields">
+          <div class="form-field">
+            <label for="asset-name" class="form-label">Name</label>
+            <input id="asset-name" type="text" class="form-input" bind:value={name} placeholder={t(M['assets.create_asset_modal.name_placeholder'])} />
+          </div>
+
+          <div class="form-field">
+            <label for="asset-desc" class="form-label">Description</label>
+            <textarea id="asset-desc" class="form-textarea" bind:value={description} placeholder={t(M['assets.create_asset_modal.description_placeholder'])} rows="2"></textarea>
+          </div>
+
+          {#if isImage}
+            <div class="form-field">
+              <label for="asset-alt" class="form-label">
+                {t(M['assets.create_asset_modal.alt_text'])}
+                {#if !altText}
+                  <span class="form-label__warning">{t(M['assets.create_asset_modal.alt_text_recommended_warning'])}</span>
+                {/if}
+              </label>
+              <input id="asset-alt" type="text" class="form-input" bind:value={altText} placeholder={t(M['assets.create_asset_modal.alt_text_placeholder'])} />
+            </div>
+          {/if}
+        </div>
+      {/if}
+
+  {#snippet footer()}
+    <Button variant="ghost" size="sm" onclick={handleClose}>Cancel</Button>
+    <Button variant="primary" size="sm" onclick={handleSubmit} disabled={!file}>
+      Upload
+    </Button>
+  {/snippet}
+</Modal>
+
+<style>
+  /* Dropzone */
+  .dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--smrt-spacing-8, 2rem);
+    border: 2px dashed var(--smrt-color-outline-variant, #d1d5db);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    cursor: pointer;
+    transition: all 150ms ease;
+    text-align: center;
+  }
+
+  .dropzone:hover, .dropzone--active {
+    border-color: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary-container, rgba(0, 90, 193, 0.05));
+  }
+
+  .dropzone__icon {
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+    margin-bottom: var(--smrt-spacing-3, 0.75rem);
+  }
+
+  .dropzone__text {
+    margin: 0;
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface, #111827);
+  }
+
+  .dropzone__hint {
+    margin: var(--smrt-spacing-1, 0.25rem) 0 0;
+    font-size: var(--smrt-typography-body-small-size, 0.8rem);
+    color: var(--smrt-color-on-surface-variant, #9ca3af);
+  }
+
+  .dropzone__input {
+    display: none;
+  }
+
+  /* File preview */
+  .file-preview {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-3, 0.75rem);
+    padding: var(--smrt-spacing-3, 0.75rem);
+    background: var(--smrt-color-surface-container-low, #f9fafb);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    margin-bottom: var(--smrt-spacing-4, 1rem);
+  }
+
+  .file-preview__image {
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: var(--smrt-radius-small, 0.25rem);
+  }
+
+  .file-preview__icon {
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--smrt-typography-headline-small-size, 1.5rem);
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    border-radius: var(--smrt-radius-small, 0.25rem);
+  }
+
+  .file-preview__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .file-preview__filename {
+    display: block;
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .file-preview__size {
+    display: block;
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+  }
+
+  .file-preview__warning {
+    display: block;
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-error, #dc2626);
+    margin-top: var(--smrt-spacing-1, 4px);
+  }
+
+  .file-preview__remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+    cursor: pointer;
+    border-radius: var(--smrt-radius-full, 9999px);
+  }
+
+  .file-preview__remove:hover {
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    color: var(--smrt-color-error, #dc2626);
+  }
+
+  /* Form fields */
+  .form-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-3, 0.75rem);
+  }
+
+  .form-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1, 0.25rem);
+  }
+
+  .form-label {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface, #111827);
+  }
+
+  .form-label__warning {
+    font-weight: var(--smrt-typography-weight-normal, 400);
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-error, #dc2626);
+    margin-left: var(--smrt-spacing-1, 4px);
+  }
+
+  .form-input, .form-textarea {
+    width: 100%;
+    padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
+    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    font-family: inherit;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface, #111827);
+    background: var(--smrt-color-surface, #ffffff);
+    box-sizing: border-box;
+  }
+
+  .form-input:focus, .form-textarea:focus {
+    outline: none;
+    border-color: var(--smrt-color-primary, #005ac1);
+    box-shadow: 0 0 0 2px var(--smrt-color-primary-container, rgba(0, 90, 193, 0.1));
+  }
+
+  .form-textarea {
+    resize: vertical;
+    min-height: 60px;
+  }
+
+</style>

package/dist/svelte/CreateAssetModal.svelte.d.ts

@@ -0,0 +1,19 @@
+export interface CreateAssetModalProps {
+    /** Whether the modal is open */
+    open: boolean;
+    /** Pre-loaded file (from paste or drag) */
+    initialFile?: File | null;
+    /** Callback when creation is complete */
+    oncreate: (data: {
+        file: File;
+        name: string;
+        description: string;
+        altText: string;
+    }) => void;
+    /** Callback when modal is closed */
+    onclose: () => void;
+}
+declare const CreateAssetModal: import("svelte").Component<CreateAssetModalProps, {}, "">;
+type CreateAssetModal = ReturnType<typeof CreateAssetModal>;
+export default CreateAssetModal;
+//# sourceMappingURL=CreateAssetModal.svelte.d.ts.map

package/dist/svelte/CreateAssetModal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateAssetModal.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/CreateAssetModal.svelte.ts"],"names":[],"mappings":"AAoBA,MAAM,WAAW,qBAAqB;IACpC,gCAAgC;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,yCAAyC;IACzC,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,IAAI,EAAE,IAAI,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,MAAM,CAAC;KACjB,KAAK,IAAI,CAAC;IACX,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoLD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/__tests__/ActionBar.test.js

@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+/**
+ * First component test in a domain package via the shared S11 harness (#1416):
+ * the whole Testing-Library + axe surface comes from `@happyvertical/smrt-vitest`
+ * (no per-package testing-library deps), and the jsdom `<dialog>` polyfill +
+ * jest-dom matchers come from the shared `svelte-setup` in vitest.config.
+ */
+import { expectNoA11yViolations, render, screen, userEvent, within, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import ActionBar from '../ActionBar.svelte';
+// ActionBar only reads `selectedAssets.length` and forwards the array to its
+// callbacks, so minimal id-only stubs are enough to drive it.
+const selected = [{ id: '1' }, { id: '2' }];
+describe('ActionBar', () => {
+    it('shows the selected count and clears the selection', async () => {
+        const onClearSelection = vi.fn();
+        render(ActionBar, {
+            props: { selectedAssets: selected, onClearSelection, onDelete: vi.fn() },
+        });
+        expect(screen.getByText('2 selected')).toBeInTheDocument();
+        await userEvent.click(screen.getByRole('button', { name: 'Clear' }));
+        expect(onClearSelection).toHaveBeenCalledTimes(1);
+    });
+    it('renders nothing when no assets are selected', () => {
+        const { container } = render(ActionBar, {
+            props: {
+                selectedAssets: [],
+                onClearSelection: vi.fn(),
+                onDelete: vi.fn(),
+            },
+        });
+        expect(container.querySelector('.action-bar')).toBeNull();
+    });
+    it('confirms deletion through the inline dialog', async () => {
+        const onDelete = vi.fn();
+        render(ActionBar, {
+            props: { selectedAssets: selected, onClearSelection: vi.fn(), onDelete },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Delete' }));
+        // The library ConfirmDialog (S10) labels its dialog by the title heading.
+        // Asserting the interpolated title AND message proves Svelte attribute-string
+        // interpolation (`"… {count} …"`) resolves for component props (count = 2).
+        const dialog = screen.getByRole('dialog', { name: /Delete 2 assets\?/ });
+        expect(within(dialog).getByText(/This action cannot be undone\./)).toBeInTheDocument();
+        await userEvent.click(within(dialog).getByRole('button', { name: 'Delete' }));
+        expect(onDelete).toHaveBeenCalledWith(selected);
+    });
+    it('cancels deletion and dismisses the dialog', async () => {
+        render(ActionBar, {
+            props: {
+                selectedAssets: selected,
+                onClearSelection: vi.fn(),
+                onDelete: vi.fn(),
+            },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Delete' }));
+        await userEvent.click(within(screen.getByRole('dialog')).getByRole('button', {
+            name: 'Cancel',
+        }));
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(ActionBar, {
+            props: {
+                selectedAssets: selected,
+                onClearSelection: vi.fn(),
+                onDelete: vi.fn(),
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/__tests__/AssetDetail.test.js

@@ -0,0 +1,57 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for AssetDetail via the shared S11 harness (#1416).
+ * `open: true` drives the <dialog> showModal effect (polyfilled in the shared
+ * setup), so these exercise the real open state.
+ */
+import { render, screen, userEvent } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import AssetDetail from '../AssetDetail.svelte';
+const asset = {
+    id: '1',
+    name: 'photo.png',
+    mimeType: 'image/png',
+    typeSlug: 'image',
+    statusSlug: 'published',
+    sourceUri: 'file:///photo.png',
+    description: 'a picture',
+    metadata: '',
+};
+const baseProps = (over = {}) => ({
+    asset,
+    open: true,
+    onClose: vi.fn(),
+    ...over,
+});
+describe('AssetDetail', () => {
+    it('renders the detail dialog for an asset', () => {
+        render(AssetDetail, { props: baseProps() });
+        expect(screen.getByRole('heading', { name: 'photo.png', hidden: true })).toBeInTheDocument();
+    });
+    it('closes via the close button', async () => {
+        const onClose = vi.fn();
+        render(AssetDetail, { props: baseProps({ onClose }) });
+        // The library Modal (S10) provides the dialog's close affordance, labelled
+        // "Close modal".
+        await userEvent.click(screen.getByRole('button', { name: 'Close modal', hidden: true }));
+        expect(onClose).toHaveBeenCalled();
+    });
+    it('deletes the asset', async () => {
+        const onDelete = vi.fn();
+        render(AssetDetail, { props: baseProps({ onDelete }) });
+        await userEvent.click(screen.getByRole('button', { name: 'Delete', hidden: true }));
+        expect(onDelete).toHaveBeenCalledWith(expect.objectContaining({ id: '1' }));
+    });
+    it('saves metadata edits', async () => {
+        const onSave = vi.fn();
+        render(AssetDetail, { props: baseProps({ onSave }) });
+        await userEvent.click(screen.getByRole('button', { name: 'Save', hidden: true }));
+        expect(onSave).toHaveBeenCalled();
+    });
+    it('renders nothing meaningful when closed with no asset', () => {
+        const { container } = render(AssetDetail, {
+            props: baseProps({ asset: null, open: false }),
+        });
+        expect(container.textContent).not.toContain('photo.png');
+    });
+});

package/dist/svelte/__tests__/AssetGrid.test.js

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for AssetGrid via the shared S11 harness (#1416), plus the
+ * S12 a11y remediation (#1417): the whole-card open action is now a stretched
+ * "Open <name>" button instead of a role="button" card wrapping the checkbox
+ * (which tripped axe's nested-interactive rule), so axe is asserted here.
+ */
+import { expectNoA11yViolations, render, screen, userEvent, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import AssetGrid from '../AssetGrid.svelte';
+const assets = [
+    {
+        id: '1',
+        name: 'photo.png',
+        mimeType: 'image/png',
+        typeSlug: 'image',
+        statusSlug: 'published',
+        sourceUri: 'file:///1',
+    },
+    {
+        id: '2',
+        name: 'clip.mp4',
+        mimeType: 'video/mp4',
+        typeSlug: 'video',
+        statusSlug: 'published',
+        sourceUri: 'file:///2',
+    },
+];
+const baseProps = (over = {}) => ({
+    assets,
+    selectedIds: new Set(),
+    onSelectionChange: vi.fn(),
+    onAssetClick: vi.fn(),
+    ...over,
+});
+describe('AssetGrid', () => {
+    it('renders a tile per asset', () => {
+        render(AssetGrid, { props: baseProps() });
+        expect(screen.getByText('photo.png')).toBeInTheDocument();
+        expect(screen.getByText('clip.mp4')).toBeInTheDocument();
+    });
+    it('opens an asset via its stretched open button', async () => {
+        const onAssetClick = vi.fn();
+        render(AssetGrid, { props: baseProps({ onAssetClick }) });
+        await userEvent.click(screen.getByRole('button', { name: 'Open photo.png' }));
+        expect(onAssetClick).toHaveBeenCalledWith(expect.objectContaining({ id: '1' }));
+    });
+    it('labels the card action "Select" in pick mode', () => {
+        render(AssetGrid, { props: baseProps({ mode: 'pick' }) });
+        expect(screen.getByRole('button', { name: 'Select photo.png' })).toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Open photo.png' })).toBeNull();
+    });
+    it('toggles selection via the per-asset checkbox', async () => {
+        const onSelectionChange = vi.fn();
+        render(AssetGrid, { props: baseProps({ onSelectionChange }) });
+        await userEvent.click(screen.getByLabelText('Select photo.png'));
+        expect(onSelectionChange).toHaveBeenCalledTimes(1);
+    });
+    it('renders without assets', () => {
+        const { container } = render(AssetGrid, {
+            props: baseProps({ assets: [] }),
+        });
+        expect(container.querySelector('*')).toBeTruthy();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(AssetGrid, { props: baseProps() });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/__tests__/AssetList.test.js

@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for AssetList via the shared S11 harness (#1416), plus the
+ * S12 a11y remediation (#1417): the row's open action is now a name button in
+ * its cell instead of a role="button" <tr> nesting the checkbox (axe
+ * nested-interactive), so axe is asserted here.
+ */
+import { expectNoA11yViolations, render, screen, userEvent, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import AssetList from '../AssetList.svelte';
+const assets = [
+    {
+        id: '1',
+        name: 'photo.png',
+        mimeType: 'image/png',
+        typeSlug: 'image',
+        statusSlug: 'published',
+        sourceUri: 'file:///1',
+    },
+    {
+        id: '2',
+        name: 'doc.pdf',
+        mimeType: 'application/pdf',
+        typeSlug: 'document',
+        statusSlug: 'published',
+        sourceUri: 'file:///2',
+    },
+];
+const baseProps = (over = {}) => ({
+    assets,
+    selectedIds: new Set(),
+    sort: { field: 'name', direction: 'asc' },
+    onSelectionChange: vi.fn(),
+    onAssetClick: vi.fn(),
+    onSortChange: vi.fn(),
+    ...over,
+});
+describe('AssetList', () => {
+    it('renders a row per asset', () => {
+        render(AssetList, { props: baseProps() });
+        expect(screen.getByText('photo.png')).toBeInTheDocument();
+        expect(screen.getByText('doc.pdf')).toBeInTheDocument();
+    });
+    it('select-all toggles the selection', async () => {
+        const onSelectionChange = vi.fn();
+        render(AssetList, { props: baseProps({ onSelectionChange }) });
+        await userEvent.click(screen.getByLabelText('Select all'));
+        expect(onSelectionChange).toHaveBeenCalledTimes(1);
+    });
+    it('clicking a sortable column header re-sorts', async () => {
+        const onSortChange = vi.fn();
+        render(AssetList, { props: baseProps({ onSortChange }) });
+        await userEvent.click(screen.getByRole('button', { name: /Name/ }));
+        expect(onSortChange).toHaveBeenCalledTimes(1);
+    });
+    it('opens an asset via its name button', async () => {
+        const onAssetClick = vi.fn();
+        render(AssetList, { props: baseProps({ onAssetClick }) });
+        await userEvent.click(screen.getByRole('button', { name: 'photo.png' }));
+        expect(onAssetClick).toHaveBeenCalledWith(expect.objectContaining({ id: '1' }));
+    });
+    it('renders without assets', () => {
+        const { container } = render(AssetList, {
+            props: baseProps({ assets: [] }),
+        });
+        expect(container.querySelector('*')).toBeTruthy();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(AssetList, { props: baseProps() });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/__tests__/AssetManager.test.js

@@ -0,0 +1,21 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for AssetManager (the asset UI shell) via the shared S11
+ * harness (#1416).
+ */
+import { render, screen } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import AssetManager from '../AssetManager.svelte';
+describe('AssetManager', () => {
+    it('renders the manager shell with its toolbar', () => {
+        render(AssetManager, { props: {} });
+        // The toolbar (AssetToolbar) renders its labelled search control.
+        expect(screen.getByLabelText('Search assets')).toBeInTheDocument();
+    });
+    it('renders in pick mode', () => {
+        const { container } = render(AssetManager, {
+            props: { mode: 'pick', onSelect: vi.fn() },
+        });
+        expect(container.querySelector('*')).toBeTruthy();
+    });
+});