@streamscloud/kit 0.29.1 → 0.31.0

package/dist/ui/file-uploader/cmp.file-row.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">import { StringHelper } from '../../core/utils';
 import { Icon } from '../icon';
+import { fileTypeColor, fileTypeFromName } from './file-type-colors';
+import FileTypeStamp from './file-type-stamp.svelte';
 import { FileUploaderLocalization } from './file-uploader-localization';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_12_regular.svg?raw';
-import IconDocument from '@fluentui/svg-icons/icons/document_20_regular.svg?raw';
 const { file, removable = true, on } = $props();
 const localization = new FileUploaderLocalization();
 const isUploading = $derived(file.status === 'uploading' || file.status === 'queued');
 const isError = $derived(file.status === 'error');
-const percent = $derived(Math.max(0, Math.min(100, Math.round(file.progress * 100))));
+const fraction = $derived(file.status === 'success' ? 1 : (file.progress ?? 0));
+const percent = $derived(Math.max(0, Math.min(100, Math.round(fraction * 100))));
 const sizeText = $derived(StringHelper.toFileSizeString(file.file.size));
+const accent = $derived(fileTypeColor(fileTypeFromName(file.file.name)));
 </script>
 
-<div class="file-row" class:file-row--uploading={isUploading} class:file-row--error={isError}>
-  <span class="file-row__icon" aria-hidden="true">
-    <Icon src={IconDocument} />
+<div class="file-row" class:file-row--uploading={isUploading} class:file-row--error={isError} style:--_--file-row--accent={accent}>
+  <span class="file-row__stamp">
+    <FileTypeStamp fileName={file.file.name} size="sm" />
   </span>
 
   <div class="file-row__meta">
@@ -40,13 +43,14 @@ const sizeText = $derived(StringHelper.toFileSizeString(file.file.size));
 
 <!--
 @component
-Compact row representation of an `UploadingFile`. Three states driven by `file.status`:
-- **`queued` / `uploading`** — filename + percent subtitle + thin progress bar.
+Compact row representation of a file being uploaded. Three states driven by `file.status`:
+- **`queued` / `uploading`** — colored extension stamp + filename + percent subtitle + thin progress bar.
 - **`success`** — filename + size + optional × remove button.
 - **`error`** — filename + red error subtitle + optional × remove button.
 
-Use directly with `UploadMediaStore.files`, or wrap a plain `File` via `toUploadingFile()` from
-`@streamscloud/kit/core/files` for ad-hoc lists.
+The stamp is auto-colored from the filename's extension via the `file-type-colors` palette (and
+falls back to a generic document icon for a file with no extension). Feed it `UploadMediaStore.files`
+directly, or a plain `{ file, status }` literal for a static list.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -54,16 +58,18 @@ Use directly with `UploadMediaStore.files`, or wrap a plain `File` via `toUpload
 | `--sc-kit--file-row--background` | Row background | `var(--sc-kit--color--bg--field-alt)` |
 | `--sc-kit--file-row--border-color` | Row border | `var(--sc-kit--color--border)` |
 | `--sc-kit--file-row--border-radius` | Row radius | `var(--sc-kit--radius--md)` |
+| `--sc-kit--file-row--accent` | Stamp + bar-fill color (override auto-derived) | per file extension |
 | `--sc-kit--file-row--bar--background` | Progress-bar track | `var(--sc-kit--color--bg--active)` |
-| `--sc-kit--file-row--bar--fill` | Progress-bar fill | `var(--sc-kit--color--accent)` |
+| `--sc-kit--file-row--bar--fill` | Progress-bar fill | `var(--sc-kit--file-row--accent)` |
 -->
 
 <style>.file-row {
   --_fr--background: var(--sc-kit--file-row--background, var(--sc-kit--color--bg--field-alt));
   --_fr--border-color: var(--sc-kit--file-row--border-color, var(--sc-kit--color--border));
   --_fr--border-radius: var(--sc-kit--file-row--border-radius, var(--sc-kit--radius--md));
+  --_fr--accent: var(--sc-kit--file-row--accent, var(--_--file-row--accent, var(--sc-kit--color--accent)));
   --_fr--bar-background: var(--sc-kit--file-row--bar--background, var(--sc-kit--color--bg--active));
-  --_fr--bar-fill: var(--sc-kit--file-row--bar--fill, var(--sc-kit--color--accent));
+  --_fr--bar-fill: var(--sc-kit--file-row--bar--fill, var(--_fr--accent));
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -82,11 +88,9 @@ Use directly with `UploadMediaStore.files`, or wrap a plain `File` via `toUpload
 .file-row--error {
   border-color: var(--sc-kit--color--danger);
 }
-.file-row__icon {
-  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
+.file-row__stamp {
+  --sc-kit--file-type-stamp--accent: var(--sc-kit--file-row--accent);
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
   grid-row: 1;
 }
 .file-row__meta {

package/dist/ui/file-uploader/cmp.file-row.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { UploadingFile } from '../../core/files';
+import type { UploadFileView } from './types';
 type Props = {
-    /** Canonical file shape produced by `UploadMediaStore` (or via `toUploadingFile()` for ad-hoc usage). */
-    file: UploadingFile;
+    file: UploadFileView;
     /** Show the trailing × remove button. Auto-hidden while uploading. @default true */
     removable?: boolean;
     on?: {
@@ -9,13 +8,14 @@ type Props = {
     };
 };
 /**
- * Compact row representation of an `UploadingFile`. Three states driven by `file.status`:
- * - **`queued` / `uploading`** — filename + percent subtitle + thin progress bar.
+ * Compact row representation of a file being uploaded. Three states driven by `file.status`:
+ * - **`queued` / `uploading`** — colored extension stamp + filename + percent subtitle + thin progress bar.
  * - **`success`** — filename + size + optional × remove button.
  * - **`error`** — filename + red error subtitle + optional × remove button.
  *
- * Use directly with `UploadMediaStore.files`, or wrap a plain `File` via `toUploadingFile()` from
- * `@streamscloud/kit/core/files` for ad-hoc lists.
+ * The stamp is auto-colored from the filename's extension via the `file-type-colors` palette (and
+ * falls back to a generic document icon for a file with no extension). Feed it `UploadMediaStore.files`
+ * directly, or a plain `{ file, status }` literal for a static list.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
@@ -23,8 +23,9 @@ type Props = {
  * | `--sc-kit--file-row--background` | Row background | `var(--sc-kit--color--bg--field-alt)` |
  * | `--sc-kit--file-row--border-color` | Row border | `var(--sc-kit--color--border)` |
  * | `--sc-kit--file-row--border-radius` | Row radius | `var(--sc-kit--radius--md)` |
+ * | `--sc-kit--file-row--accent` | Stamp + bar-fill color (override auto-derived) | per file extension |
  * | `--sc-kit--file-row--bar--background` | Progress-bar track | `var(--sc-kit--color--bg--active)` |
- * | `--sc-kit--file-row--bar--fill` | Progress-bar fill | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--file-row--bar--fill` | Progress-bar fill | `var(--sc-kit--file-row--accent)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/file-uploader/cmp.file-upload-progress.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">import { StringHelper } from '../../core/utils';
 import { fileTypeColor, fileTypeFromName } from './file-type-colors';
+import FileTypeStamp from './file-type-stamp.svelte';
 const { file } = $props();
-const ext = $derived(fileTypeFromName(file.file.name).toUpperCase());
+const progress = $derived(file.status === 'success' ? 1 : (file.progress ?? 0));
 const accent = $derived(fileTypeColor(fileTypeFromName(file.file.name)));
-const percent = $derived(Math.max(0, Math.min(100, Math.round(file.progress * 100))));
+const percent = $derived(Math.max(0, Math.min(100, Math.round(progress * 100))));
 const sizeText = $derived(file.status === 'success'
     ? StringHelper.toFileSizeString(file.file.size)
-    : `${StringHelper.toFileSizeString(file.file.size * file.progress)} of ${StringHelper.toFileSizeString(file.file.size)}`);
+    : `${StringHelper.toFileSizeString(file.file.size * progress)} of ${StringHelper.toFileSizeString(file.file.size)}`);
 const isError = $derived(file.status === 'error');
 </script>
 
-<div class="file-upload-progress" class:file-upload-progress--error={isError} style:--_fup--accent-default={accent}>
-  <span class="file-upload-progress__stamp" aria-hidden="true">
-    <span class="file-upload-progress__ext">{ext}</span>
+<div class="file-upload-progress" class:file-upload-progress--error={isError} style:--_--file-upload-progress--accent={accent}>
+  <span class="file-upload-progress__stamp">
+    <FileTypeStamp fileName={file.file.name} />
   </span>
   <div class="file-upload-progress__body">
     <div class="file-upload-progress__head">
@@ -54,7 +55,7 @@ on the host (e.g. to force a brand color regardless of extension).
   --_fup--border-color: var(--sc-kit--file-upload-progress--border-color, var(--sc-kit--color--border));
   --_fup--border-radius: var(--sc-kit--file-upload-progress--border-radius, var(--sc-kit--radius--md));
   --_fup--bar-background: var(--sc-kit--file-upload-progress--bar--background, var(--sc-kit--color--bg--active));
-  --_fup--accent: var(--sc-kit--file-upload-progress--accent, var(--_fup--accent-default, var(--sc-kit--color--accent)));
+  --_fup--accent: var(--sc-kit--file-upload-progress--accent, var(--_--file-upload-progress--accent, var(--sc-kit--color--accent)));
   display: flex;
   align-items: flex-start;
   gap: var(--sc-kit--space--3);
@@ -67,31 +68,9 @@ on the host (e.g. to force a brand color regardless of extension).
   border-color: var(--sc-kit--color--danger);
 }
 .file-upload-progress__stamp {
+  --sc-kit--file-type-stamp--accent: var(--sc-kit--file-upload-progress--accent);
+  display: inline-flex;
   flex-shrink: 0;
-  width: 2.25rem;
-  height: 2.75rem;
-  border-radius: var(--sc-kit--radius--md);
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding-bottom: 0.25rem;
-  background: var(--_fup--accent);
-  color: #fff;
-  font-size: 0.5313rem;
-  font-weight: var(--sc-kit--font-weight--bold);
-  letter-spacing: var(--sc-kit--letter-spacing--wide);
-  position: relative;
-}
-.file-upload-progress__stamp::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 0.75rem;
-  height: 0.75rem;
-  background: rgba(255, 255, 255, 0.35);
-  clip-path: polygon(100% 0, 0 0, 100% 100%);
-  border-top-right-radius: var(--sc-kit--radius--md);
 }
 .file-upload-progress__body {
   flex: 1;

package/dist/ui/file-uploader/cmp.file-upload-progress.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { UploadingFile } from '../../core/files';
+import type { UploadFileView } from './types';
 type Props = {
-    /** Canonical file shape produced by `UploadMediaStore` (or via `toUploadingFile()` for ad-hoc usage). */
-    file: UploadingFile;
+    file: UploadFileView;
 };
 /**
  * Rich progress card for a single file currently being uploaded. Shows a colored extension stamp

package/dist/ui/file-uploader/cmp.upload-progress-toaster.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">import { AppUploadActivity } from '../../core/files';
+import { Toastr } from '../toast';
+import FileRow from './cmp.file-row.svelte';
+import { UploadProgressToasterLocalization } from './upload-progress-toaster-localization';
+const { delayMs = 3000, containerId = '' } = $props();
+const localization = new UploadProgressToasterLocalization();
+const files = $derived(AppUploadActivity.files);
+const settled = $derived(files.filter((f) => f.status === 'success' || f.status === 'error').length);
+const failed = $derived(files.filter((f) => f.status === 'error').length);
+// Carrying the containerId with the id, or a containerId changed mid-run dismisses in the wrong container and leaks the toast.
+let toast = null;
+const dismiss = () => {
+    if (toast !== null) {
+        Toastr.dismiss(toast.id, toast.containerId);
+        toast = null;
+    }
+};
+// A boolean, not a file count: the delay timer must not restart every time a run gains a file.
+const shouldShow = $derived(AppUploadActivity.isUploading && files.length > 0);
+$effect(() => {
+    if (!shouldShow) {
+        dismiss();
+        return;
+    }
+    // Without this guard a re-run (e.g. delayMs changed mid-run) pushes a second toast and leaks the first.
+    if (toast !== null) {
+        return;
+    }
+    const timer = setTimeout(() => {
+        const id = Toastr.info(progress, { duration: 0, closable: false, swipeable: false, containerId });
+        toast = { id, containerId };
+    }, delayMs);
+    return () => clearTimeout(timer);
+});
+$effect(() => () => dismiss());
+</script>
+
+{#snippet progress()}
+  {#if files.length}
+    <div class="upload-progress-toaster">
+      <div class="upload-progress-toaster__title">
+        <span class="upload-progress-toaster__count">{localization.title(settled, files.length)}</span>
+        {#if failed > 0}
+          <span class="upload-progress-toaster__failed">{localization.failed(failed)}</span>
+        {/if}
+      </div>
+      <div class="upload-progress-toaster__files">
+        {#each files as file (file.id)}
+          <FileRow file={file} removable={false} />
+        {/each}
+      </div>
+    </div>
+  {/if}
+{/snippet}
+
+<!--
+@component
+Headless controller — renders nothing on its own. Mount it once (app root) and every
+`UploadMediaStore.upload()` anywhere in the app reports into a single sticky toast: a
+`'settled of total'` title, a failure count when something errored, and one `FileRow` per file.
+Dismissed as soon as the last run finishes. Runs shorter than `delayMs` never show it, and
+concurrent runs share one toast rather than stacking. `UploadMediaStore.upload()` registers itself;
+an app uploading outside the store reports in via `AppUploadActivity.beginRun()` / `endRun()`.
+
+The row list scrolls past `--sc-kit--upload-progress-toaster--files--max-height`, so a bulk run
+at the store's default concurrency of 20 can never push the toast off screen.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--upload-progress-toaster--gap` | Gap between the title and the file rows | `var(--sc-kit--space--2)` |
+| `--sc-kit--upload-progress-toaster--failed--color` | Color of the failure count | `var(--sc-kit--color--danger)` |
+| `--sc-kit--upload-progress-toaster--files--max-height` | Height at which the row list starts scrolling | `240px` |
+-->
+
+<style>.upload-progress-toaster {
+  --_upload-progress-toaster--gap: var(--sc-kit--upload-progress-toaster--gap, var(--sc-kit--space--2));
+  --_upload-progress-toaster--failed-color: var(--sc-kit--upload-progress-toaster--failed--color, var(--sc-kit--color--danger));
+  --_upload-progress-toaster--files-max-height: var(--sc-kit--upload-progress-toaster--files--max-height, 15rem);
+  display: flex;
+  flex-direction: column;
+  gap: var(--_upload-progress-toaster--gap);
+  min-width: 0;
+}
+.upload-progress-toaster__title {
+  display: flex;
+  align-items: baseline;
+  gap: var(--sc-kit--space--2);
+  font-weight: var(--sc-kit--font-weight--medium);
+}
+.upload-progress-toaster__count {
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.upload-progress-toaster__failed {
+  flex-shrink: 0;
+  color: var(--_upload-progress-toaster--failed-color);
+}
+.upload-progress-toaster__files {
+  display: flex;
+  flex-direction: column;
+  gap: var(--_upload-progress-toaster--gap);
+  max-height: var(--_upload-progress-toaster--files-max-height);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+}
+.upload-progress-toaster__files:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.upload-progress-toaster__files::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.upload-progress-toaster__files::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.upload-progress-toaster__files::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .upload-progress-toaster__files {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}</style>

package/dist/ui/file-uploader/cmp.upload-progress-toaster.svelte.d.ts

@@ -0,0 +1,27 @@
+type Props = {
+    /** How long a run must last before the toast appears, so quick uploads never flash it. @default 3000 */
+    delayMs?: number;
+    /** Routes the toast to a specific `<Toaster id="...">`. @default '' */
+    containerId?: string;
+};
+/**
+ * Headless controller — renders nothing on its own. Mount it once (app root) and every
+ * `UploadMediaStore.upload()` anywhere in the app reports into a single sticky toast: a
+ * `'settled of total'` title, a failure count when something errored, and one `FileRow` per file.
+ * Dismissed as soon as the last run finishes. Runs shorter than `delayMs` never show it, and
+ * concurrent runs share one toast rather than stacking. `UploadMediaStore.upload()` registers itself;
+ * an app uploading outside the store reports in via `AppUploadActivity.beginRun()` / `endRun()`.
+ *
+ * The row list scrolls past `--sc-kit--upload-progress-toaster--files--max-height`, so a bulk run
+ * at the store's default concurrency of 20 can never push the toast off screen.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--upload-progress-toaster--gap` | Gap between the title and the file rows | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--upload-progress-toaster--failed--color` | Color of the failure count | `var(--sc-kit--color--danger)` |
+ * | `--sc-kit--upload-progress-toaster--files--max-height` | Height at which the row list starts scrolling | `240px` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/file-uploader/file-type-colors.d.ts

@@ -1,3 +1,8 @@
 export declare const fileTypeColors: Record<string, string>;
+/**
+ * Extension of a filename, lowercased, or `''` when the tail after the last dot is not
+ * extension-shaped — `'Interview 2024.01.15 raw'` and `'.gitignore'` have no extension, while any
+ * entry of `fileTypeColors` counts regardless of length (`.sketch`).
+ */
 export declare const fileTypeFromName: (name: string) => string;
 export declare const fileTypeColor: (type: string) => string;

package/dist/ui/file-uploader/file-type-colors.js

@@ -31,8 +31,18 @@ export const fileTypeColors = {
     js: '#eab308',
     ts: '#3178c6'
 };
+const EXTENSION_SHAPE = /^[a-z0-9]{1,5}$/;
+/**
+ * Extension of a filename, lowercased, or `''` when the tail after the last dot is not
+ * extension-shaped — `'Interview 2024.01.15 raw'` and `'.gitignore'` have no extension, while any
+ * entry of `fileTypeColors` counts regardless of length (`.sketch`).
+ */
 export const fileTypeFromName = (name) => {
     const dot = name.lastIndexOf('.');
-    return dot >= 0 ? name.slice(dot + 1).toLowerCase() : '';
+    if (dot < 0) {
+        return '';
+    }
+    const tail = name.slice(dot + 1).toLowerCase();
+    return fileTypeColors[tail] !== undefined || EXTENSION_SHAPE.test(tail) ? tail : '';
 };
 export const fileTypeColor = (type) => fileTypeColors[type.toLowerCase()] ?? '#6b7280';

package/dist/ui/file-uploader/file-type-stamp.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">import { Icon } from '../icon';
+import { fileTypeColor, fileTypeFromName } from './file-type-colors';
+import IconDocument from '@fluentui/svg-icons/icons/document_20_regular.svg?raw';
+const { fileName, size = 'md' } = $props();
+const fileType = $derived(fileTypeFromName(fileName));
+const label = $derived(fileType.slice(0, 4).toUpperCase());
+const accent = $derived(fileTypeColor(fileType));
+</script>
+
+{#if label}
+  <span class="file-type-stamp file-type-stamp--{size}" aria-hidden="true" style:--_--file-type-stamp--accent-derived={accent}>
+    <span class="file-type-stamp__label">{label}</span>
+  </span>
+{:else}
+  <span class="file-type-stamp__fallback" aria-hidden="true">
+    <Icon src={IconDocument} />
+  </span>
+{/if}
+
+<style>.file-type-stamp {
+  --_fts--accent: var(--sc-kit--file-type-stamp--accent, var(--_--file-type-stamp--accent-derived, var(--sc-kit--color--accent)));
+  --_fts--width: 2.25rem;
+  --_fts--height: 2.75rem;
+  --_fts--fold-size: 0.75rem;
+  --_fts--font-size: 0.5313rem;
+  --_fts--padding-bottom: 0.25rem;
+  --_fts--border-radius: var(--sc-kit--radius--md);
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--_fts--width);
+  height: var(--_fts--height);
+  padding-bottom: var(--_fts--padding-bottom);
+  background: var(--_fts--accent);
+  border-radius: var(--_fts--border-radius);
+  overflow: hidden;
+}
+.file-type-stamp--sm {
+  --_fts--width: 1.75rem;
+  --_fts--height: 2.125rem;
+  --_fts--fold-size: 0.5625rem;
+  --_fts--font-size: 0.4375rem;
+  --_fts--padding-bottom: 0.1875rem;
+  --_fts--border-radius: var(--sc-kit--radius--sm);
+}
+.file-type-stamp::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--_fts--fold-size);
+  height: var(--_fts--fold-size);
+  background: rgba(255, 255, 255, 0.35);
+  clip-path: polygon(100% 0, 0 0, 100% 100%);
+}
+.file-type-stamp__label {
+  color: #ffffff;
+  font-size: var(--_fts--font-size);
+  font-weight: var(--sc-kit--font-weight--bold);
+  letter-spacing: var(--sc-kit--letter-spacing--wide);
+}
+
+.file-type-stamp__fallback {
+  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}</style>

package/dist/ui/file-uploader/file-type-stamp.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    fileName: string;
+    /** @default 'md' */
+    size?: 'sm' | 'md';
+};
+declare const FileTypeStamp: import("svelte").Component<Props, {}, "">;
+type FileTypeStamp = ReturnType<typeof FileTypeStamp>;
+export default FileTypeStamp;

package/dist/ui/file-uploader/index.d.ts

@@ -1,6 +1,8 @@
 export { default as FileRow } from './cmp.file-row.svelte';
 export { default as FileUploader } from './cmp.file-uploader.svelte';
 export { default as FileUploadProgress } from './cmp.file-upload-progress.svelte';
+export { default as UploadProgressToaster } from './cmp.upload-progress-toaster.svelte';
 export { FileUploaderLocalization } from './file-uploader-localization';
+export { UploadProgressToasterLocalization } from './upload-progress-toaster-localization';
 export { fileTypeColor, fileTypeColors, fileTypeFromName } from './file-type-colors';
-export { toUploadingFile } from './to-uploading-file';
+export type { UploadFileView } from './types';

package/dist/ui/file-uploader/index.js

@@ -1,6 +1,7 @@
 export { default as FileRow } from './cmp.file-row.svelte';
 export { default as FileUploader } from './cmp.file-uploader.svelte';
 export { default as FileUploadProgress } from './cmp.file-upload-progress.svelte';
+export { default as UploadProgressToaster } from './cmp.upload-progress-toaster.svelte';
 export { FileUploaderLocalization } from './file-uploader-localization';
+export { UploadProgressToasterLocalization } from './upload-progress-toaster-localization';
 export { fileTypeColor, fileTypeColors, fileTypeFromName } from './file-type-colors';
-export { toUploadingFile } from './to-uploading-file';

package/dist/ui/file-uploader/types.d.ts

@@ -0,0 +1,16 @@
+/**
+ * What `FileRow` / `FileUploadProgress` need in order to draw a file — nothing more. `UploadingFile`
+ * from `UploadMediaStore` is structurally assignable, so store-driven lists pass straight through;
+ * a static list writes the literal it actually has (`{ file, status: 'success' }`) with no
+ * placeholder ids, blob ids or preview URLs.
+ */
+export type UploadFileView = {
+    file: File;
+    /** 0..1 — only meaningful while queued / uploading. @default 0 */
+    progress?: number;
+} & ({
+    status: 'queued' | 'uploading' | 'success';
+} | {
+    status: 'error';
+    error: string;
+});

package/dist/ui/file-uploader/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/file-uploader/upload-progress-toaster-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class UploadProgressToasterLocalization {
+    title: (settled: number, total: number) => string;
+    failed: (count: number) => string;
+}

package/dist/ui/file-uploader/upload-progress-toaster-localization.js

@@ -0,0 +1,23 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    titleSingle: {
+        en: 'Uploading 1 file',
+        no: 'Laster opp 1 fil'
+    },
+    titleMany: {
+        en: (settled, total) => `Uploading ${settled} of ${total} files`,
+        no: (settled, total) => `Laster opp ${settled} av ${total} filer`
+    },
+    failed: {
+        en: (count) => `${count} failed`,
+        no: (count) => `${count} feilet`
+    }
+};
+export class UploadProgressToasterLocalization {
+    title = (settled, total) => {
+        return total === 1 ? loc.titleSingle[AppLocale.current] : loc.titleMany[AppLocale.current](settled, total);
+    };
+    failed = (count) => {
+        return loc.failed[AppLocale.current](count);
+    };
+}

package/dist/ui/navigation/cmp.nav-menu-item.svelte

@@ -3,11 +3,11 @@ const { label, icon, href, active = false, activeStyle = 'plain', disabled = fal
 const activeFilled = $derived(active && activeStyle === 'filled');
 const badgeText = $derived(typeof badge === 'number' && badge > 99 ? '99+' : badge);
 const hasBadge = $derived(badge !== undefined && badge !== null && badge !== '');
-const handleClick = () => {
+const handleClick = (event) => {
     if (disabled) {
         return;
     }
-    on?.click?.();
+    on?.click?.(event);
 };
 </script>
 
@@ -21,18 +21,16 @@ const handleClick = () => {
   <span class="nav-menu-item__label">{label}</span>
 {/snippet}
 
-{#if href}
+{#if href && !disabled}
   <a
     class="nav-menu-item"
     class:nav-menu-item--active={active}
     class:nav-menu-item--active-filled={activeFilled}
-    class:nav-menu-item--disabled={disabled}
     href={href}
     target={target}
     rel={rel}
     aria-current={active ? 'page' : undefined}
-    aria-disabled={disabled || undefined}
-    tabindex={disabled ? -1 : undefined}>
+    onclick={handleClick}>
     {@render content()}
   </a>
 {:else}
@@ -53,7 +51,8 @@ const handleClick = () => {
 @component
 NavMenuItem — single row inside a `NavMenuGroup`. Icon + label, optional badge in the top-right of
 the icon (numbers > 99 truncate to `99+`). The icon accepts an SVG source string or a snippet.
-Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consumer-controlled
+Renders as `<a>` when `href` is set and enabled, `<button>` otherwise; `on.click` fires in both forms
+with the `MouseEvent` and the link default is left intact. Active state is consumer-controlled
 (`active` prop) — wire it to your router's pathname matching upstream. `activeStyle` picks how the
 active row reads: `'plain'` (default) leaves color as the only signal and keeps the hover background
 working on the active row, `'filled'` plates it and suppresses hover there.

package/dist/ui/navigation/cmp.nav-menu-item.svelte.d.ts

@@ -3,7 +3,7 @@ type Props = {
     label: string;
     /** Icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
     icon: IconProp;
-    /** Render as `<a href>`. Mutually exclusive with `on.click`. */
+    /** Render as `<a href>` — unless `disabled`, which falls back to the button form. `on.click` still fires; `event.preventDefault()` keeps the click from navigating. */
     href?: string;
     /** Highlight as the current item. Consumer-controlled. @default false */
     active?: boolean;
@@ -17,13 +17,14 @@ type Props = {
     /** Anchor rel — only relevant when `href` is set. */
     rel?: string;
     on?: {
-        click?: () => void;
+        click?: (event: MouseEvent) => void;
     };
 };
 /**
  * NavMenuItem — single row inside a `NavMenuGroup`. Icon + label, optional badge in the top-right of
  * the icon (numbers > 99 truncate to `99+`). The icon accepts an SVG source string or a snippet.
- * Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consumer-controlled
+ * Renders as `<a>` when `href` is set and enabled, `<button>` otherwise; `on.click` fires in both forms
+ * with the `MouseEvent` and the link default is left intact. Active state is consumer-controlled
  * (`active` prop) — wire it to your router's pathname matching upstream. `activeStyle` picks how the
  * active row reads: `'plain'` (default) leaves color as the only signal and keeps the hover background
  * working on the active row, `'filled'` plates it and suppresses hover there.