@happyvertical/smrt-assets 0.30.0

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

@@ -0,0 +1,16 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for the package route surface via the shared S11 harness
+ * (#1416) — it composes AssetManager with a custom action.
+ */
+import { render, screen } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it } from 'vitest';
+import AssetManagerRoute from '../routes/AssetManagerRoute.svelte';
+describe('AssetManagerRoute', () => {
+    it('renders the route surface with an embedded asset manager', () => {
+        render(AssetManagerRoute);
+        expect(screen.getByText('Package Route Surface')).toBeInTheDocument();
+        // AssetManager's toolbar renders inside the route.
+        expect(screen.getByLabelText('Search assets')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,39 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for AssetToolbar via the shared S11 harness (#1416).
+ */
+import { expectNoA11yViolations, render, screen, userEvent, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import AssetToolbar from '../AssetToolbar.svelte';
+const baseProps = (over = {}) => ({
+    view: 'grid',
+    filters: { search: '', types: [], tags: [], mimePatterns: [] },
+    sort: { field: 'name', direction: 'asc' },
+    onViewChange: vi.fn(),
+    onFilterChange: vi.fn(),
+    onSortChange: vi.fn(),
+    ...over,
+});
+describe('AssetToolbar', () => {
+    it('renders search, filter, sort, and view controls', () => {
+        render(AssetToolbar, { props: baseProps() });
+        expect(screen.getByLabelText('Search assets')).toBeInTheDocument();
+        expect(screen.getByLabelText('Sort assets')).toBeInTheDocument();
+        expect(screen.getByRole('group', { name: 'View mode' })).toBeInTheDocument();
+    });
+    it('clears the active search', async () => {
+        const onFilterChange = vi.fn();
+        render(AssetToolbar, {
+            props: baseProps({
+                filters: { search: 'photo', types: [], tags: [], mimePatterns: [] },
+                onFilterChange,
+            }),
+        });
+        await userEvent.click(screen.getByLabelText('Clear search'));
+        expect(onFilterChange).toHaveBeenCalledWith(expect.objectContaining({ search: '' }));
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(AssetToolbar, { props: baseProps() });
+        await expectNoA11yViolations(container);
+    });
+});

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

@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for CreateAssetModal via the shared S11 harness (#1416).
+ * The jsdom `<dialog>` showModal/close polyfill comes from the shared setup.
+ */
+import { render, screen, userEvent } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import CreateAssetModal from '../CreateAssetModal.svelte';
+const baseProps = (over = {}) => ({
+    open: true,
+    oncreate: vi.fn(),
+    onclose: vi.fn(),
+    ...over,
+});
+describe('CreateAssetModal', () => {
+    it('renders the upload dialog with a dropzone when open and empty', () => {
+        render(CreateAssetModal, { props: baseProps() });
+        expect(screen.getByRole('heading', { name: 'Upload Asset', hidden: true })).toBeInTheDocument();
+        expect(screen.getByText(/Drag & drop/, { hidden: true })).toBeTruthy();
+    });
+    it('pre-loads an initial file into the metadata form', () => {
+        // A non-image file avoids URL.createObjectURL (unimplemented in jsdom).
+        const file = new File(['x'], 'notes.txt', { type: 'text/plain' });
+        render(CreateAssetModal, { props: baseProps({ initialFile: file }) });
+        expect(screen.getByText('notes.txt', { hidden: true })).toBeInTheDocument();
+    });
+    it('closes via Cancel', async () => {
+        const onclose = vi.fn();
+        render(CreateAssetModal, { props: baseProps({ onclose }) });
+        await userEvent.click(screen.getByRole('button', { name: 'Cancel', hidden: true }));
+        expect(onclose).toHaveBeenCalled();
+    });
+    it('submits the pre-loaded file', async () => {
+        const oncreate = vi.fn();
+        const file = new File(['x'], 'notes.txt', { type: 'text/plain' });
+        render(CreateAssetModal, {
+            props: baseProps({ initialFile: file, oncreate }),
+        });
+        await userEvent.click(screen.getByRole('button', { name: /Upload/, hidden: true }));
+        expect(oncreate).toHaveBeenCalledWith(expect.objectContaining({ file: expect.any(File) }));
+    });
+});

package/dist/svelte/i18n.d.ts

@@ -0,0 +1,76 @@
+export declare const M: {
+    readonly 'assets.action_bar.delete_confirm_title': "assets.action_bar.delete_confirm_title";
+    readonly 'assets.action_bar.delete_confirm_message_one': "assets.action_bar.delete_confirm_message_one";
+    readonly 'assets.action_bar.delete_confirm_message_other': "assets.action_bar.delete_confirm_message_other";
+    readonly 'assets.action_bar.delete': "assets.action_bar.delete";
+    readonly 'assets.action_bar.cancel': "assets.action_bar.cancel";
+    readonly 'assets.asset_detail.open_pdf_in_new_tab': "assets.asset_detail.open_pdf_in_new_tab";
+    readonly 'assets.asset_detail.alt_text': "assets.asset_detail.alt_text";
+    readonly 'assets.asset_detail.alt_text_missing_warning': "assets.asset_detail.alt_text_missing_warning";
+    readonly 'assets.asset_detail.quick_actions': "assets.asset_detail.quick_actions";
+    readonly 'assets.asset_detail.copy_url': "assets.asset_detail.copy_url";
+    readonly 'assets.asset_detail.copy_markdown': "assets.asset_detail.copy_markdown";
+    readonly 'assets.asset_detail.edit_image': "assets.asset_detail.edit_image";
+    readonly 'assets.asset_detail.used_in': "assets.asset_detail.used_in";
+    readonly 'assets.asset_detail.alt_text_placeholder': "assets.asset_detail.alt_text_placeholder";
+    readonly 'assets.asset_detail.description_placeholder': "assets.asset_detail.description_placeholder";
+    readonly 'assets.asset_grid.loading': "assets.asset_grid.loading";
+    readonly 'assets.asset_grid.no_assets_found': "assets.asset_grid.no_assets_found";
+    readonly 'assets.asset_grid.empty_hint': "assets.asset_grid.empty_hint";
+    readonly 'assets.asset_grid.no_alt': "assets.asset_grid.no_alt";
+    readonly 'assets.asset_grid.missing_alt_text': "assets.asset_grid.missing_alt_text";
+    readonly 'assets.asset_grid.open_named': "assets.asset_grid.open_named";
+    readonly 'assets.asset_grid.select_named': "assets.asset_grid.select_named";
+    readonly 'assets.asset_grid.select_named_checkbox': "assets.asset_grid.select_named_checkbox";
+    readonly 'assets.asset_list.loading': "assets.asset_list.loading";
+    readonly 'assets.asset_list.no_assets_found': "assets.asset_list.no_assets_found";
+    readonly 'assets.asset_list.empty_hint': "assets.asset_list.empty_hint";
+    readonly 'assets.asset_list.select_all': "assets.asset_list.select_all";
+    readonly 'assets.asset_list.select_named': "assets.asset_list.select_named";
+    readonly 'assets.asset_manager.drop_file_to_upload': "assets.asset_manager.drop_file_to_upload";
+    readonly 'assets.asset_toolbar.all_types': "assets.asset_toolbar.all_types";
+    readonly 'assets.asset_toolbar.newest_first': "assets.asset_toolbar.newest_first";
+    readonly 'assets.asset_toolbar.oldest_first': "assets.asset_toolbar.oldest_first";
+    readonly 'assets.asset_toolbar.name_a_z': "assets.asset_toolbar.name_a_z";
+    readonly 'assets.asset_toolbar.name_z_a': "assets.asset_toolbar.name_z_a";
+    readonly 'assets.asset_toolbar.recently_updated': "assets.asset_toolbar.recently_updated";
+    readonly 'assets.asset_toolbar.search_placeholder': "assets.asset_toolbar.search_placeholder";
+    readonly 'assets.asset_toolbar.search_assets': "assets.asset_toolbar.search_assets";
+    readonly 'assets.asset_toolbar.clear_search': "assets.asset_toolbar.clear_search";
+    readonly 'assets.asset_toolbar.filter_by_type': "assets.asset_toolbar.filter_by_type";
+    readonly 'assets.asset_toolbar.sort_assets': "assets.asset_toolbar.sort_assets";
+    readonly 'assets.asset_toolbar.view_mode': "assets.asset_toolbar.view_mode";
+    readonly 'assets.asset_toolbar.view_label': "assets.asset_toolbar.view_label";
+    readonly 'assets.create_asset_modal.dropzone_text': "assets.create_asset_modal.dropzone_text";
+    readonly 'assets.create_asset_modal.dropzone_hint': "assets.create_asset_modal.dropzone_hint";
+    readonly 'assets.create_asset_modal.large_file_warning': "assets.create_asset_modal.large_file_warning";
+    readonly 'assets.create_asset_modal.alt_text': "assets.create_asset_modal.alt_text";
+    readonly 'assets.create_asset_modal.alt_text_recommended_warning': "assets.create_asset_modal.alt_text_recommended_warning";
+    readonly 'assets.create_asset_modal.name_placeholder': "assets.create_asset_modal.name_placeholder";
+    readonly 'assets.create_asset_modal.description_placeholder': "assets.create_asset_modal.description_placeholder";
+    readonly 'assets.create_asset_modal.alt_text_placeholder': "assets.create_asset_modal.alt_text_placeholder";
+    readonly 'assets.create_asset_modal.upload_asset': "assets.create_asset_modal.upload_asset";
+    readonly 'assets.create_asset_modal.preview_alt': "assets.create_asset_modal.preview_alt";
+    readonly 'assets.create_asset_modal.remove_file': "assets.create_asset_modal.remove_file";
+    readonly 'assets.asset_detail_preview.modal_preview': "assets.asset_detail_preview.modal_preview";
+    readonly 'assets.asset_detail_preview.description': "assets.asset_detail_preview.description";
+    readonly 'assets.asset_detail_preview.open_asset_detail': "assets.asset_detail_preview.open_asset_detail";
+    readonly 'assets.create_asset_modal_preview.modal_preview': "assets.create_asset_modal_preview.modal_preview";
+    readonly 'assets.create_asset_modal_preview.title': "assets.create_asset_modal_preview.title";
+    readonly 'assets.create_asset_modal_preview.description': "assets.create_asset_modal_preview.description";
+    readonly 'assets.create_asset_modal_preview.open_upload_modal': "assets.create_asset_modal_preview.open_upload_modal";
+    readonly 'assets.create_asset_modal_preview.alt_text': "assets.create_asset_modal_preview.alt_text";
+    readonly 'assets.asset_manager_route.eyebrow': "assets.asset_manager_route.eyebrow";
+    readonly 'assets.asset_manager_route.title': "assets.asset_manager_route.title";
+    readonly 'assets.asset_manager_route.lede': "assets.asset_manager_route.lede";
+    readonly 'assets.asset_manager_route.selection_state': "assets.asset_manager_route.selection_state";
+    readonly 'assets.asset_manager_route.no_assets_selected': "assets.asset_manager_route.no_assets_selected";
+    readonly 'assets.asset_manager_route.assets_selected': "assets.asset_manager_route.assets_selected";
+    readonly 'assets.asset_manager_route.custom_action_example': "assets.asset_manager_route.custom_action_example";
+    readonly 'assets.asset_manager_route.custom_action_description': "assets.asset_manager_route.custom_action_description";
+    readonly 'assets.asset_manager_route.queue_review': "assets.asset_manager_route.queue_review";
+    readonly 'assets.asset_manager_route.queue_review_hint': "assets.asset_manager_route.queue_review_hint";
+    readonly 'assets.asset_manager_route.surface_label': "assets.asset_manager_route.surface_label";
+    readonly 'assets.asset_manager_route.route_state_label': "assets.asset_manager_route.route_state_label";
+};
+//# sourceMappingURL=i18n.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/svelte/i18n.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GZ,CAAC"}

package/dist/svelte/i18n.js

@@ -0,0 +1,87 @@
+import { defineMessages } from '@happyvertical/smrt-ui/i18n';
+export const M = defineMessages({
+    // ActionBar
+    'assets.action_bar.delete_confirm_title': 'Delete {count} asset{plural}?',
+    // Separate singular/plural messages (an English `{plural}` suffix doesn't translate).
+    'assets.action_bar.delete_confirm_message_one': 'This action cannot be undone. The asset and its file data will be permanently removed.',
+    'assets.action_bar.delete_confirm_message_other': 'This action cannot be undone. The assets and their file data will be permanently removed.',
+    'assets.action_bar.delete': 'Delete',
+    'assets.action_bar.cancel': 'Cancel',
+    // AssetDetail
+    'assets.asset_detail.open_pdf_in_new_tab': 'Open PDF in new tab',
+    'assets.asset_detail.alt_text': 'Alt Text',
+    'assets.asset_detail.alt_text_missing_warning': '⚠️ Missing — required for accessibility',
+    'assets.asset_detail.quick_actions': 'Quick Actions',
+    'assets.asset_detail.copy_url': '📋 Copy URL',
+    'assets.asset_detail.copy_markdown': '📝 Copy Markdown',
+    'assets.asset_detail.edit_image': '✏️ Edit Image',
+    'assets.asset_detail.used_in': 'Used In',
+    'assets.asset_detail.alt_text_placeholder': 'Describe this image for screen readers',
+    'assets.asset_detail.description_placeholder': 'Optional description',
+    // AssetGrid
+    'assets.asset_grid.loading': 'Loading assets...',
+    'assets.asset_grid.no_assets_found': 'No assets found',
+    'assets.asset_grid.empty_hint': 'Upload an asset or change your search filters to see results.',
+    'assets.asset_grid.no_alt': '⚠️ No alt',
+    'assets.asset_grid.missing_alt_text': 'Missing alt text',
+    'assets.asset_grid.open_named': 'Open {name}',
+    'assets.asset_grid.select_named': 'Select {name}',
+    'assets.asset_grid.select_named_checkbox': 'Select {name}',
+    // AssetList
+    'assets.asset_list.loading': 'Loading assets...',
+    'assets.asset_list.no_assets_found': 'No assets found',
+    'assets.asset_list.empty_hint': 'Upload an asset or change your search filters to see results.',
+    'assets.asset_list.select_all': 'Select all',
+    'assets.asset_list.select_named': 'Select {name}',
+    // AssetManager
+    'assets.asset_manager.drop_file_to_upload': 'Drop file to upload',
+    // AssetToolbar
+    'assets.asset_toolbar.all_types': 'All types',
+    'assets.asset_toolbar.newest_first': 'Newest first',
+    'assets.asset_toolbar.oldest_first': 'Oldest first',
+    'assets.asset_toolbar.name_a_z': 'Name A–Z',
+    'assets.asset_toolbar.name_z_a': 'Name Z–A',
+    'assets.asset_toolbar.recently_updated': 'Recently updated',
+    'assets.asset_toolbar.search_placeholder': 'Search assets...',
+    'assets.asset_toolbar.search_assets': 'Search assets',
+    'assets.asset_toolbar.clear_search': 'Clear search',
+    'assets.asset_toolbar.filter_by_type': 'Filter by type',
+    'assets.asset_toolbar.sort_assets': 'Sort assets',
+    'assets.asset_toolbar.view_mode': 'View mode',
+    'assets.asset_toolbar.view_label': '{label} view',
+    // CreateAssetModal
+    'assets.create_asset_modal.dropzone_text': 'Drag & drop a file here, or click to browse',
+    'assets.create_asset_modal.dropzone_hint': 'You can also paste an image from your clipboard',
+    'assets.create_asset_modal.large_file_warning': '⚠️ Large file — may slow page loads',
+    'assets.create_asset_modal.alt_text': 'Alt Text',
+    'assets.create_asset_modal.alt_text_recommended_warning': '⚠️ Recommended for accessibility',
+    'assets.create_asset_modal.name_placeholder': 'Asset name',
+    'assets.create_asset_modal.description_placeholder': 'Optional description',
+    'assets.create_asset_modal.alt_text_placeholder': 'Describe this image for screen readers',
+    'assets.create_asset_modal.upload_asset': 'Upload Asset',
+    'assets.create_asset_modal.preview_alt': 'Preview',
+    'assets.create_asset_modal.remove_file': 'Remove file',
+    // AssetDetailPreview (playground)
+    'assets.asset_detail_preview.modal_preview': 'Modal Preview',
+    'assets.asset_detail_preview.description': 'Launch the asset detail dialog from inside the preview stage so the shared\n      playground stays navigable.',
+    'assets.asset_detail_preview.open_asset_detail': 'Open Asset Detail',
+    // CreateAssetModalPreview (playground)
+    'assets.create_asset_modal_preview.modal_preview': 'Modal Preview',
+    'assets.create_asset_modal_preview.title': 'Create Asset Modal',
+    'assets.create_asset_modal_preview.description': 'Open the upload dialog from inside the preview stage to exercise the real\n      modal flow without covering the host navigation.',
+    'assets.create_asset_modal_preview.open_upload_modal': 'Open Upload Modal',
+    'assets.create_asset_modal_preview.alt_text': 'Alt Text',
+    // AssetManagerRoute (route)
+    'assets.asset_manager_route.eyebrow': 'Package Route Surface',
+    'assets.asset_manager_route.title': 'Asset Manager',
+    'assets.asset_manager_route.lede': 'The reference route for browsing, selecting, and reviewing uploaded\n        assets with the package-owned asset manager UI.',
+    'assets.asset_manager_route.selection_state': 'Selection State',
+    'assets.asset_manager_route.no_assets_selected': 'No assets selected.',
+    'assets.asset_manager_route.assets_selected': 'asset{plural} selected.',
+    'assets.asset_manager_route.custom_action_example': 'Custom Action Example',
+    'assets.asset_manager_route.custom_action_description': 'This route keeps package-owned defaults while leaving room for app\n          specific actions.',
+    'assets.asset_manager_route.queue_review': 'Queue Review',
+    'assets.asset_manager_route.queue_review_hint': 'from the selection action bar to see\n            the package route feedback.',
+    'assets.asset_manager_route.surface_label': 'Asset manager surface',
+    'assets.asset_manager_route.route_state_label': 'Asset route state',
+});

package/dist/svelte/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * smrt-assets Svelte components
+ *
+ * Reusable Asset Manager UI for embedding in downstream SMRT sites.
+ * Auto-registers components with ModuleUIRegistry on import so chat
+ * (and other registry-driven consumers) can discover them.
+ *
+ * @packageDocumentation
+ */
+import ActionBar from './ActionBar.svelte';
+import AssetDetail from './AssetDetail.svelte';
+import AssetGrid from './AssetGrid.svelte';
+import AssetList from './AssetList.svelte';
+import AssetManager from './AssetManager.svelte';
+import AssetToolbar from './AssetToolbar.svelte';
+import CreateAssetModal from './CreateAssetModal.svelte';
+export { ActionBar, AssetDetail, AssetGrid, AssetList, AssetManager, AssetToolbar, CreateAssetModal, };
+export type { ActionBarProps, AssetAction, AssetFilters, AssetGridProps, AssetListProps, AssetManagerMode, AssetManagerProps, AssetSort, AssetSortDirection, AssetSortField, AssetToolbarProps, AssetViewMode, } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAC/C,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,gBAAgB,MAAM,2BAA2B,CAAC;AAGzD,OAAO,EACL,SAAS,EACT,WAAW,EACX,SAAS,EACT,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,gBAAgB,GACjB,CAAC;AAGF,YAAY,EACV,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,aAAa,GACd,MAAM,SAAS,CAAC"}

package/dist/svelte/index.js

@@ -0,0 +1,30 @@
+/**
+ * smrt-assets Svelte components
+ *
+ * Reusable Asset Manager UI for embedding in downstream SMRT sites.
+ * Auto-registers components with ModuleUIRegistry on import so chat
+ * (and other registry-driven consumers) can discover them.
+ *
+ * @packageDocumentation
+ */
+import { ModuleUIRegistry } from '@happyvertical/smrt-ui/registry';
+import { ASSETS_MODULE_META } from '../ui.js';
+// Import components
+import ActionBar from './ActionBar.svelte';
+import AssetDetail from './AssetDetail.svelte';
+import AssetGrid from './AssetGrid.svelte';
+import AssetList from './AssetList.svelte';
+import AssetManager from './AssetManager.svelte';
+import AssetToolbar from './AssetToolbar.svelte';
+import CreateAssetModal from './CreateAssetModal.svelte';
+// Components
+export { ActionBar, AssetDetail, AssetGrid, AssetList, AssetManager, AssetToolbar, CreateAssetModal, };
+// Auto-register with ModuleUIRegistry
+ModuleUIRegistry.registerModule(ASSETS_MODULE_META);
+ModuleUIRegistry.register('@happyvertical/smrt-assets', 'asset-manager', AssetManager);
+ModuleUIRegistry.register('@happyvertical/smrt-assets', 'asset-grid', AssetGrid);
+ModuleUIRegistry.register('@happyvertical/smrt-assets', 'asset-list', AssetList);
+ModuleUIRegistry.register('@happyvertical/smrt-assets', 'asset-detail', AssetDetail);
+ModuleUIRegistry.register('@happyvertical/smrt-assets', 'asset-toolbar', AssetToolbar);
+ModuleUIRegistry.register('@happyvertical/smrt-assets', 'asset-action-bar', ActionBar);
+ModuleUIRegistry.register('@happyvertical/smrt-assets', 'asset-create-modal', CreateAssetModal);

package/dist/svelte/playground/AssetDetailPreview.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { AssetDetailUpdates } from '../AssetDetail.svelte';
+import AssetDetail from '../AssetDetail.svelte';
+import { M } from '../i18n.js';
+import type { PersistedAsset } from '../types';
+
+const { t } = useI18n();
+
+let { asset }: { asset: PersistedAsset } = $props();
+
+let isOpen = $state(false);
+let previewAsset = $state<PersistedAsset | null>(null);
+let statusMessage = $state<string | null>(null);
+let lastAsset: PersistedAsset | null = null;
+
+function clonePersistedAsset(
+  source: PersistedAsset,
+  updates: AssetDetailUpdates = {},
+): PersistedAsset {
+  return Object.assign(
+    Object.create(Object.getPrototypeOf(source)) as PersistedAsset,
+    source,
+    updates,
+  );
+}
+
+$effect(() => {
+  if (asset !== lastAsset) {
+    lastAsset = asset;
+    previewAsset = clonePersistedAsset(asset);
+    statusMessage = null;
+    isOpen = false;
+  }
+});
+
+function openPreview() {
+  statusMessage = null;
+  isOpen = true;
+}
+
+function closePreview() {
+  isOpen = false;
+}
+
+function handleSave(_asset: PersistedAsset, updates: AssetDetailUpdates) {
+  if (!previewAsset) {
+    return;
+  }
+
+  previewAsset = clonePersistedAsset(previewAsset, updates);
+  statusMessage = 'Saved changes in the preview harness.';
+}
+
+function handleDelete() {
+  statusMessage = 'Delete requested from the preview harness.';
+  isOpen = false;
+}
+
+function handleEdit() {
+  statusMessage = 'Edit requested from the preview harness.';
+}
+</script>
+
+<div class="preview-shell">
+  <div class="preview-card">
+    <p class="eyebrow">{t(M['assets.asset_detail_preview.modal_preview'])}</p>
+    <h4>{previewAsset?.name ?? asset.name}</h4>
+    <p>{t(M['assets.asset_detail_preview.description'])}</p>
+    <button type="button" onclick={openPreview}>{t(M['assets.asset_detail_preview.open_asset_detail'])}</button>
+    {#if statusMessage}
+      <p class="status">{statusMessage}</p>
+    {/if}
+  </div>
+
+  <AssetDetail
+    asset={previewAsset ?? asset}
+    open={isOpen}
+    onclose={closePreview}
+    onsave={handleSave}
+    ondelete={handleDelete}
+    onedit={handleEdit}
+  />
+</div>
+
+<style>
+  .preview-shell {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .preview-card {
+    display: grid;
+    gap: 0.75rem;
+    max-width: 32rem;
+    padding: 1.25rem;
+    border-radius: 1rem;
+    background: color-mix(in srgb, var(--smrt-color-surface) 92%, transparent);
+    border: 1px solid var(--smrt-color-outline-variant, rgba(15, 23, 34, 0.08));
+    box-shadow: var(--smrt-elevation-5, 0 18px 38px color-mix(in srgb, var(--smrt-color-shadow) 8%, transparent));
+  }
+
+  .preview-card h4,
+  .preview-card p {
+    margin: 0;
+  }
+
+  .eyebrow {
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    letter-spacing: var(--smrt-typography-label-medium-tracking, 0.12em);
+    text-transform: uppercase;
+    color: var(--smrt-color-primary, #0f766e);
+  }
+
+  button {
+    justify-self: start;
+    border: 0;
+    border-radius: var(--smrt-radius-full, 9999px);
+    padding: 0.75rem 1rem;
+    font: inherit;
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    background: var(--smrt-color-primary, #0f766e);
+    color: var(--smrt-color-on-primary, white);
+    cursor: pointer;
+  }
+
+  .status {
+    color: var(--smrt-color-primary, #0f766e);
+    font-size: var(--smrt-typography-body-large-size, 0.95rem);
+  }
+</style>

package/dist/svelte/playground/AssetDetailPreview.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { PersistedAsset } from '../types';
+type $$ComponentProps = {
+    asset: PersistedAsset;
+};
+declare const AssetDetailPreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type AssetDetailPreview = ReturnType<typeof AssetDetailPreview>;
+export default AssetDetailPreview;
+//# sourceMappingURL=AssetDetailPreview.svelte.d.ts.map

package/dist/svelte/playground/AssetDetailPreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetDetailPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/AssetDetailPreview.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE9C,KAAK,gBAAgB,GAAI;IAAE,KAAK,EAAE,cAAc,CAAA;CAAE,CAAC;AAmFpD,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/playground/CreateAssetModalPreview.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import CreateAssetModal from '../CreateAssetModal.svelte';
+import { M } from '../i18n.js';
+
+const { t } = useI18n();
+
+interface CreatedAssetSummary {
+  name: string;
+  description: string;
+  altText: string;
+  fileName: string;
+}
+
+let isOpen = $state(false);
+let statusMessage = $state<string | null>(null);
+let lastCreated = $state<CreatedAssetSummary | null>(null);
+
+function openPreview() {
+  statusMessage = null;
+  isOpen = true;
+}
+
+function closePreview() {
+  isOpen = false;
+}
+
+function handleCreate(data: {
+  file: File;
+  name: string;
+  description: string;
+  altText: string;
+}) {
+  lastCreated = {
+    name: data.name,
+    description: data.description,
+    altText: data.altText,
+    fileName: data.file.name,
+  };
+  statusMessage = 'Captured a create request in the preview harness.';
+  isOpen = false;
+}
+</script>
+
+<div class="preview-shell">
+  <div class="preview-card">
+    <p class="eyebrow">{t(M['assets.create_asset_modal_preview.modal_preview'])}</p>
+    <h4>{t(M['assets.create_asset_modal_preview.title'])}</h4>
+    <p>{t(M['assets.create_asset_modal_preview.description'])}</p>
+    <button type="button" onclick={openPreview}>{t(M['assets.create_asset_modal_preview.open_upload_modal'])}</button>
+
+    {#if statusMessage}
+      <p class="status">{statusMessage}</p>
+    {/if}
+
+    {#if lastCreated}
+      <dl class="summary">
+        <div>
+          <dt>File</dt>
+          <dd>{lastCreated.fileName}</dd>
+        </div>
+        <div>
+          <dt>Name</dt>
+          <dd>{lastCreated.name || 'Untitled'}</dd>
+        </div>
+        <div>
+          <dt>Description</dt>
+          <dd>{lastCreated.description || '—'}</dd>
+        </div>
+        <div>
+          <dt>{t(M['assets.create_asset_modal_preview.alt_text'])}</dt>
+          <dd>{lastCreated.altText || '—'}</dd>
+        </div>
+      </dl>
+    {/if}
+  </div>
+
+  <CreateAssetModal open={isOpen} onclose={closePreview} oncreate={handleCreate} />
+</div>
+
+<style>
+  .preview-shell {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .preview-card {
+    display: grid;
+    gap: 0.75rem;
+    max-width: 32rem;
+    padding: 1.25rem;
+    border-radius: 1rem;
+    background: color-mix(in srgb, var(--smrt-color-surface) 92%, transparent);
+    border: 1px solid var(--smrt-color-outline-variant, rgba(15, 23, 34, 0.08));
+    box-shadow: var(--smrt-elevation-5, 0 18px 38px color-mix(in srgb, var(--smrt-color-shadow) 8%, transparent));
+  }
+
+  .preview-card h4,
+  .preview-card p,
+  .summary,
+  .summary dt,
+  .summary dd {
+    margin: 0;
+  }
+
+  .eyebrow {
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    letter-spacing: var(--smrt-typography-label-medium-tracking, 0.12em);
+    text-transform: uppercase;
+    color: var(--smrt-color-primary, #0f766e);
+  }
+
+  button {
+    justify-self: start;
+    border: 0;
+    border-radius: var(--smrt-radius-full, 9999px);
+    padding: 0.75rem 1rem;
+    font: inherit;
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    background: var(--smrt-color-primary, #0f766e);
+    color: var(--smrt-color-on-primary, white);
+    cursor: pointer;
+  }
+
+  .status {
+    color: var(--smrt-color-primary, #0f766e);
+    font-size: var(--smrt-typography-body-large-size, 0.95rem);
+  }
+
+  .summary {
+    display: grid;
+    gap: 0.5rem;
+    padding-top: 0.5rem;
+  }
+
+  .summary div {
+    display: grid;
+    gap: 0.1rem;
+  }
+
+  .summary dt {
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    letter-spacing: var(--smrt-typography-label-medium-tracking, 0.08em);
+    text-transform: uppercase;
+    color: var(--smrt-color-on-surface-variant, #5b6574);
+  }
+
+  .summary dd {
+    color: var(--smrt-color-on-surface, #172033);
+  }
+</style>

package/dist/svelte/playground/CreateAssetModalPreview.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const CreateAssetModalPreview: import("svelte").Component<Record<string, never>, {}, "">;
+type CreateAssetModalPreview = ReturnType<typeof CreateAssetModalPreview>;
+export default CreateAssetModalPreview;
+//# sourceMappingURL=CreateAssetModalPreview.svelte.d.ts.map

package/dist/svelte/playground/CreateAssetModalPreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateAssetModalPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/CreateAssetModalPreview.svelte.ts"],"names":[],"mappings":"AA2FA,QAAA,MAAM,uBAAuB,2DAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}