@streamscloud/kit 0.2.42-1778522742378 → 0.9.0

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

@@ -0,0 +1,145 @@
+<script lang="ts">import { StringHelper } from '../../core/utils';
+import { Icon } from '../icon';
+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 sizeText = $derived(StringHelper.toFileSizeString(file.file.size));
+</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} />
+  </span>
+
+  <div class="file-row__meta">
+    <div class="file-row__name">{file.file.name}</div>
+    {#if isUploading}
+      <div class="file-row__sub">{percent}% · {localization.uploadingHint}</div>
+    {:else if isError}
+      <div class="file-row__sub file-row__sub--error">{file.error ?? ''}</div>
+    {:else}
+      <div class="file-row__sub">{sizeText}</div>
+    {/if}
+  </div>
+
+  {#if isUploading}
+    <div class="file-row__bar" aria-hidden="true">
+      <span style:width="{percent}%"></span>
+    </div>
+  {:else if removable}
+    <button type="button" class="file-row__remove" aria-label={localization.removeAria(file.file.name)} onclick={() => on?.remove?.()}>
+      <Icon src={IconDismiss} />
+    </button>
+  {/if}
+</div>
+
+<!--
+@component
+Compact row representation of an `UploadingFile`. Three states driven by `file.status`:
+- **`queued` / `uploading`** — 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.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--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--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)` |
+-->
+
+<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--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));
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--sc-kit--space--3);
+  padding: var(--sc-kit--space--2) var(--sc-kit--space--3);
+  background: var(--_fr--background);
+  border: 1px solid var(--_fr--border-color);
+  border-radius: var(--_fr--border-radius);
+}
+.file-row--uploading {
+  grid-template-rows: auto auto;
+  grid-template-columns: auto 1fr;
+  row-gap: var(--sc-kit--space--1);
+  column-gap: var(--sc-kit--space--3);
+}
+.file-row--error {
+  border-color: var(--sc-kit--color--danger);
+}
+.file-row__icon {
+  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  grid-row: 1;
+}
+.file-row__meta {
+  min-width: 0;
+  grid-row: 1;
+}
+.file-row__name {
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--medium);
+  color: var(--sc-kit--color--text--primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.file-row__sub {
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--sc-kit--color--text--muted);
+  margin-top: 2px;
+}
+.file-row__sub--error {
+  color: var(--sc-kit--color--danger);
+}
+.file-row__remove {
+  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
+  flex-shrink: 0;
+  width: var(--sc-kit--space--6);
+  height: var(--sc-kit--space--6);
+  border-radius: var(--sc-kit--radius--sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  grid-row: 1;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.file-row__remove:hover {
+  background: var(--sc-kit--color--bg--hover);
+  --sc-kit--icon--color: var(--sc-kit--color--text--primary);
+}
+.file-row__bar {
+  height: 4px;
+  background: var(--_fr--bar-background);
+  border-radius: var(--sc-kit--radius--pill);
+  overflow: hidden;
+  grid-row: 2;
+  grid-column: 1/-1;
+}
+.file-row__bar > span {
+  display: block;
+  height: 100%;
+  background: var(--_fr--bar-fill);
+  border-radius: var(--sc-kit--radius--pill);
+  transition: width var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}</style>

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

@@ -0,0 +1,31 @@
+import type { UploadingFile } from '../../core/files';
+type Props = {
+    /** Canonical file shape produced by `UploadMediaStore` (or via `toUploadingFile()` for ad-hoc usage). */
+    file: UploadingFile;
+    /** Show the trailing × remove button. Auto-hidden while uploading. @default true */
+    removable?: boolean;
+    on?: {
+        remove?: () => void;
+    };
+};
+/**
+ * Compact row representation of an `UploadingFile`. Three states driven by `file.status`:
+ * - **`queued` / `uploading`** — 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.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--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--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)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,141 @@
+<script lang="ts">import { StringHelper } from '../../core/utils';
+import { fileTypeColor, fileTypeFromName } from './file-type-colors';
+const { file } = $props();
+const ext = $derived(fileTypeFromName(file.file.name).toUpperCase());
+const accent = $derived(fileTypeColor(fileTypeFromName(file.file.name)));
+const percent = $derived(Math.max(0, Math.min(100, Math.round(file.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)}`);
+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>
+  </span>
+  <div class="file-upload-progress__body">
+    <div class="file-upload-progress__head">
+      <div class="file-upload-progress__name">{file.file.name}</div>
+      <div class="file-upload-progress__pct">{percent}%</div>
+    </div>
+    <div class="file-upload-progress__bar" aria-hidden="true">
+      <span style:width="{percent}%"></span>
+    </div>
+    {#if isError}
+      <div class="file-upload-progress__sub file-upload-progress__sub--error">{file.error ?? ''}</div>
+    {:else}
+      <div class="file-upload-progress__sub">{sizeText}</div>
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+Rich progress card for a single file currently being uploaded. Shows a colored extension stamp
+(auto-colored from the filename's extension via the `file-type-colors` palette), filename,
+percent, thick progress bar, and a `'X of Y'` size sub-line.
+
+Override the auto-derived accent via the `--sc-kit--file-upload-progress--accent` CSS variable
+on the host (e.g. to force a brand color regardless of extension).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--file-upload-progress--accent` | Stamp + bar-fill color (override auto-derived) | per file extension |
+| `--sc-kit--file-upload-progress--background` | Card background | `var(--sc-kit--color--bg--panel)` |
+| `--sc-kit--file-upload-progress--border-color` | Card border | `var(--sc-kit--color--border)` |
+| `--sc-kit--file-upload-progress--border-radius` | Card radius | `var(--sc-kit--radius--md)` |
+| `--sc-kit--file-upload-progress--bar--background` | Progress-bar track | `var(--sc-kit--color--bg--active)` |
+-->
+
+<style>.file-upload-progress {
+  --_fup--background: var(--sc-kit--file-upload-progress--background, var(--sc-kit--color--bg--panel));
+  --_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)));
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sc-kit--space--3);
+  padding: var(--sc-kit--space--3) var(--sc-kit--space--4);
+  background: var(--_fup--background);
+  border: 1px solid var(--_fup--border-color);
+  border-radius: var(--_fup--border-radius);
+}
+.file-upload-progress--error {
+  border-color: var(--sc-kit--color--danger);
+}
+.file-upload-progress__stamp {
+  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;
+  min-width: 0;
+}
+.file-upload-progress__head {
+  display: flex;
+  align-items: center;
+  gap: var(--sc-kit--space--2);
+}
+.file-upload-progress__name {
+  flex: 1;
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  color: var(--sc-kit--color--text--primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.file-upload-progress__pct {
+  font-family: var(--sc-kit--font--mono);
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--sc-kit--color--text--muted);
+  font-variant-numeric: tabular-nums;
+}
+.file-upload-progress__bar {
+  height: 0.375rem;
+  background: var(--_fup--bar-background);
+  border-radius: var(--sc-kit--radius--pill);
+  overflow: hidden;
+  margin-top: var(--sc-kit--space--2);
+}
+.file-upload-progress__bar > span {
+  display: block;
+  height: 100%;
+  background: var(--_fup--accent);
+  border-radius: var(--sc-kit--radius--pill);
+  transition: width var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.file-upload-progress__sub {
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--sc-kit--color--text--muted);
+  margin-top: var(--sc-kit--space--1);
+}
+.file-upload-progress__sub--error {
+  color: var(--sc-kit--color--danger);
+}</style>

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

@@ -0,0 +1,25 @@
+import type { UploadingFile } from '../../core/files';
+type Props = {
+    /** Canonical file shape produced by `UploadMediaStore` (or via `toUploadingFile()` for ad-hoc usage). */
+    file: UploadingFile;
+};
+/**
+ * Rich progress card for a single file currently being uploaded. Shows a colored extension stamp
+ * (auto-colored from the filename's extension via the `file-type-colors` palette), filename,
+ * percent, thick progress bar, and a `'X of Y'` size sub-line.
+ *
+ * Override the auto-derived accent via the `--sc-kit--file-upload-progress--accent` CSS variable
+ * on the host (e.g. to force a brand color regardless of extension).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--file-upload-progress--accent` | Stamp + bar-fill color (override auto-derived) | per file extension |
+ * | `--sc-kit--file-upload-progress--background` | Card background | `var(--sc-kit--color--bg--panel)` |
+ * | `--sc-kit--file-upload-progress--border-color` | Card border | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--file-upload-progress--border-radius` | Card radius | `var(--sc-kit--radius--md)` |
+ * | `--sc-kit--file-upload-progress--bar--background` | Progress-bar track | `var(--sc-kit--color--bg--active)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,210 @@
+<script lang="ts">import { FileValidator } from '../../core/files';
+import { Icon } from '../icon';
+import IconArrowUpload from '@fluentui/svg-icons/icons/arrow_upload_24_regular.svg?raw';
+const { multiple = false, validationRules, disabled = false, title = '', description = '', on } = $props();
+// Auto-derive the native picker `accept` from any Mime-style rule that exposes its accept
+// string. Single source of truth — consumer writes the MIME pattern once on the rule.
+const accept = $derived(validationRules
+    ?.map((r) => r.accept)
+    .filter((a) => !!a)
+    .join(',') ?? '');
+let inputRef = $state.raw(undefined);
+let dragOver = $state(false);
+// Snapshot of MIME types captured at dragenter — DataTransfer.files is empty during drag
+// (browser security), but DataTransfer.items exposes `{kind, type}` per item so we can
+// soft-validate against `accept` before drop and tint the zone red on mismatch.
+let dragItems = $state.raw([]);
+// Soft-validation during drag: we only have MIME types (not filenames), so accept-tokens
+// starting with `.` (extensions) can't be checked here — defer them to drop. We also defer
+// when item.type is empty (some sources don't set MIME).
+const dragInvalid = $derived.by(() => {
+    if (!dragOver || !accept || dragItems.length === 0) {
+        return false;
+    }
+    const mimeTokens = accept
+        .split(',')
+        .map((s) => s.trim().toLowerCase())
+        .filter((t) => t && !t.startsWith('.'));
+    if (mimeTokens.length === 0) {
+        return false;
+    }
+    return dragItems.some((item) => {
+        if (item.kind !== 'file' || !item.type) {
+            return false;
+        }
+        const fileType = item.type.toLowerCase();
+        return !mimeTokens.some((t) => (t.endsWith('/*') ? fileType.startsWith(t.slice(0, -1)) : fileType === t));
+    });
+});
+const ingest = async (incoming) => {
+    let arr = Array.from(incoming);
+    // multiple=false → silently take only the first file (no rejection event).
+    if (!multiple && arr.length > 1) {
+        arr = [arr[0]];
+    }
+    const results = validationRules && validationRules.length > 0
+        ? await FileValidator.validateMany(arr, validationRules)
+        : arr.map((file) => ({ file, isValid: true, errors: [] }));
+    on?.select?.(results);
+};
+const handleInput = (e) => {
+    const t = e.target;
+    if (!t.files) {
+        return;
+    }
+    ingest(t.files);
+    t.value = '';
+};
+const handleDragEnter = (e) => {
+    e.preventDefault();
+    if (disabled) {
+        return;
+    }
+    dragOver = true;
+    if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) {
+        dragItems = Array.from(e.dataTransfer.items).map((i) => ({ kind: i.kind, type: i.type }));
+    }
+};
+const handleDragLeave = (e) => {
+    e.preventDefault();
+    dragOver = false;
+    // Keep `dragItems` until drop — clearing here can race with browser-fired phantom
+    // dragleave/dragenter sequences and cause the invalid-state class to flicker off.
+};
+const handleDragOver = (e) => {
+    e.preventDefault();
+    if (e.dataTransfer) {
+        e.dataTransfer.dropEffect = 'copy';
+    }
+};
+const handleDrop = (e) => {
+    e.preventDefault();
+    dragOver = false;
+    dragItems = [];
+    if (disabled || !e.dataTransfer?.files) {
+        return;
+    }
+    ingest(e.dataTransfer.files);
+};
+</script>
+
+<div class="file-uploader" class:file-uploader--disabled={disabled}>
+  <button
+    type="button"
+    class="file-uploader__zone"
+    class:file-uploader__zone--drag={dragOver && !dragInvalid}
+    class:file-uploader__zone--drag-invalid={dragOver && dragInvalid}
+    disabled={disabled}
+    onclick={() => inputRef?.click()}
+    ondragenter={handleDragEnter}
+    ondragleave={handleDragLeave}
+    ondragover={handleDragOver}
+    ondrop={handleDrop}>
+    <span class="file-uploader__icon" aria-hidden="true">
+      <Icon src={IconArrowUpload} />
+    </span>
+    {#if title}<span class="file-uploader__title">{title}</span>{/if}
+    {#if description}<span class="file-uploader__desc">{description}</span>{/if}
+    <input bind:this={inputRef} class="file-uploader__input" type="file" multiple={multiple} accept={accept} disabled={disabled} onchange={handleInput} />
+  </button>
+</div>
+
+<!--
+@component
+Drag-and-drop or click-to-select file zone. **Pure selector** — picks files, runs optional
+`validationRules`, and emits `on.select(FileValidationResult[])`. The consumer reads
+`isValid` / `errors` per result and decides what to do (toast, queue into an
+`UploadMediaStore`, etc.). The cmp renders neither error UI nor progress visuals — compose
+those externally next to the dropzone (e.g. `<FileRow>` / `<FileUploadProgress>` driven by
+`store.files`).
+
+The native picker filter + drag-over visual hint are derived from any `FileRules.Mime(...)`
+rule's `accept` — pass it once via the rule, the cmp wires both. During drag-over, files
+whose MIME does not match paint the zone with the danger color before drop (soft-validation
+via `DataTransfer.items` — extension-only accept tokens defer to drop).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--file-uploader--background` | Drop-zone background | `var(--sc-kit--color--bg--field-alt)` |
+| `--sc-kit--file-uploader--background--drag` | Background during valid drag-over / hover | `var(--sc-kit--color--accent--softer)` |
+| `--sc-kit--file-uploader--background--drag-invalid` | Background when a dragged file's MIME does not match the Mime rule | `var(--sc-kit--color--danger--soft)` |
+| `--sc-kit--file-uploader--border-color` | Dashed border color (idle) | `var(--sc-kit--color--border--strong)` |
+| `--sc-kit--file-uploader--border-color--drag` | Dashed border color during valid drag-over / hover | `var(--sc-kit--color--accent)` |
+| `--sc-kit--file-uploader--border-color--drag-invalid` | Dashed border color when dragged file's MIME does not match the Mime rule | `var(--sc-kit--color--danger)` |
+| `--sc-kit--file-uploader--border-radius` | Drop-zone radius | `var(--sc-kit--radius--lg)` |
+| `--sc-kit--file-uploader--padding` | Inner padding | `var(--sc-kit--space--6)` |
+| `--sc-kit--file-uploader--icon--color` | Icon color | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--file-uploader--title--color` | Title color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--file-uploader--description--color` | Description color | `var(--sc-kit--color--text--muted)` |
+-->
+
+<style>.file-uploader {
+  display: block;
+  width: 100%;
+}
+.file-uploader__zone {
+  --_fu--background: var(--sc-kit--file-uploader--background, var(--sc-kit--color--bg--field-alt));
+  --_fu--background-drag: var(--sc-kit--file-uploader--background--drag, var(--sc-kit--color--accent--softer));
+  --_fu--background-drag-invalid: var(--sc-kit--file-uploader--background--drag-invalid, var(--sc-kit--color--danger--soft));
+  --_fu--border-color: var(--sc-kit--file-uploader--border-color, var(--sc-kit--color--border--strong));
+  --_fu--border-color-drag: var(--sc-kit--file-uploader--border-color--drag, var(--sc-kit--color--accent));
+  --_fu--border-color-drag-invalid: var(--sc-kit--file-uploader--border-color--drag-invalid, var(--sc-kit--color--danger));
+  --_fu--border-radius: var(--sc-kit--file-uploader--border-radius, var(--sc-kit--radius--lg));
+  --_fu--padding: var(--sc-kit--file-uploader--padding, var(--sc-kit--space--6));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sc-kit--space--1);
+  text-align: center;
+  width: 100%;
+  padding: var(--_fu--padding);
+  background: var(--_fu--background);
+  border: 1.5px dashed var(--_fu--border-color);
+  border-radius: var(--_fu--border-radius);
+  color: var(--sc-kit--color--text--primary);
+  font-family: inherit;
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.file-uploader__zone:hover:not(:disabled), .file-uploader__zone--drag {
+  background: var(--_fu--background-drag);
+  border-color: var(--_fu--border-color-drag);
+}
+.file-uploader__zone--drag-invalid {
+  background: var(--_fu--background-drag-invalid);
+  border-color: var(--_fu--border-color-drag-invalid);
+  cursor: not-allowed;
+}
+.file-uploader__zone:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+.file-uploader__zone:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+.file-uploader__icon, .file-uploader__title, .file-uploader__desc {
+  pointer-events: none;
+}
+.file-uploader__icon {
+  --sc-kit--icon--color: var(--sc-kit--file-uploader--icon--color, var(--sc-kit--color--text--muted));
+  --sc-kit--icon--size: var(--sc-kit--font-size--2xl);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--sc-kit--space--2);
+}
+.file-uploader__title {
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--medium);
+  color: var(--sc-kit--file-uploader--title--color, var(--sc-kit--color--text--primary));
+}
+.file-uploader__desc {
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--sc-kit--file-uploader--description--color, var(--sc-kit--color--text--muted));
+}
+.file-uploader__input {
+  display: none;
+}</style>

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

@@ -0,0 +1,56 @@
+import type { FileValidationResult, FileValidationRule } from '../../core/files';
+type Props = {
+    /** Allow multi-file selection. @default false */
+    multiple?: boolean;
+    /**
+     * Validation rules applied to each picked / dropped file. The native picker filter and
+     * drag-over visual hint are auto-derived from any `FileRules.Mime(...)` rule's `accept`
+     * — pass it once via the rule, the cmp wires the rest.
+     */
+    validationRules?: FileValidationRule[];
+    disabled?: boolean;
+    /** Headline shown inside the drop zone. */
+    title?: string;
+    /** Supporting text shown below the headline. */
+    description?: string;
+    on?: {
+        /**
+         * Fires after picker / drop with one `FileValidationResult` per file. Consumer reads
+         * `isValid` / `errors` per result and decides what to do (toast errors, queue valid
+         * files into an `UploadMediaStore`, etc.). The cmp does NOT render any error UI or
+         * progress visuals — those are composed externally next to the dropzone.
+         */
+        select?: (results: FileValidationResult[]) => void;
+    };
+};
+/**
+ * Drag-and-drop or click-to-select file zone. **Pure selector** — picks files, runs optional
+ * `validationRules`, and emits `on.select(FileValidationResult[])`. The consumer reads
+ * `isValid` / `errors` per result and decides what to do (toast, queue into an
+ * `UploadMediaStore`, etc.). The cmp renders neither error UI nor progress visuals — compose
+ * those externally next to the dropzone (e.g. `<FileRow>` / `<FileUploadProgress>` driven by
+ * `store.files`).
+ *
+ * The native picker filter + drag-over visual hint are derived from any `FileRules.Mime(...)`
+ * rule's `accept` — pass it once via the rule, the cmp wires both. During drag-over, files
+ * whose MIME does not match paint the zone with the danger color before drop (soft-validation
+ * via `DataTransfer.items` — extension-only accept tokens defer to drop).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--file-uploader--background` | Drop-zone background | `var(--sc-kit--color--bg--field-alt)` |
+ * | `--sc-kit--file-uploader--background--drag` | Background during valid drag-over / hover | `var(--sc-kit--color--accent--softer)` |
+ * | `--sc-kit--file-uploader--background--drag-invalid` | Background when a dragged file's MIME does not match the Mime rule | `var(--sc-kit--color--danger--soft)` |
+ * | `--sc-kit--file-uploader--border-color` | Dashed border color (idle) | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--file-uploader--border-color--drag` | Dashed border color during valid drag-over / hover | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--file-uploader--border-color--drag-invalid` | Dashed border color when dragged file's MIME does not match the Mime rule | `var(--sc-kit--color--danger)` |
+ * | `--sc-kit--file-uploader--border-radius` | Drop-zone radius | `var(--sc-kit--radius--lg)` |
+ * | `--sc-kit--file-uploader--padding` | Inner padding | `var(--sc-kit--space--6)` |
+ * | `--sc-kit--file-uploader--icon--color` | Icon color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--file-uploader--title--color` | Title color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--file-uploader--description--color` | Description color | `var(--sc-kit--color--text--muted)` |
+ */
+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

@@ -0,0 +1,3 @@
+export declare const fileTypeColors: Record<string, string>;
+export declare const fileTypeFromName: (name: string) => string;
+export declare const fileTypeColor: (type: string) => string;

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

@@ -0,0 +1,38 @@
+// Stamp colors for file-type extensions (used by FileUploadProgress). Distinct from the
+// project-wide semantic palette — these are per-extension brand-ish tints that map filename
+// extensions to a stable color. Override per-instance via the `--sc-kit--file-upload-progress--accent`
+// CSS variable.
+export const fileTypeColors = {
+    pdf: '#e15554',
+    doc: '#144ab0',
+    docx: '#144ab0',
+    xls: '#10b981',
+    xlsx: '#10b981',
+    csv: '#10b981',
+    ppt: '#e0772e',
+    pptx: '#e0772e',
+    zip: '#f5a623',
+    rar: '#f5a623',
+    fig: '#1abc9c',
+    sketch: '#fdb022',
+    png: '#8b5cf6',
+    jpg: '#8b5cf6',
+    jpeg: '#8b5cf6',
+    gif: '#8b5cf6',
+    svg: '#7c3aed',
+    mp4: '#ec4899',
+    mov: '#ec4899',
+    mp3: '#f97066',
+    wav: '#f97066',
+    txt: '#6b7280',
+    md: '#6b7280',
+    json: '#7c3aed',
+    html: '#e0772e',
+    js: '#eab308',
+    ts: '#3178c6'
+};
+export const fileTypeFromName = (name) => {
+    const dot = name.lastIndexOf('.');
+    return dot >= 0 ? name.slice(dot + 1).toLowerCase() : '';
+};
+export const fileTypeColor = (type) => fileTypeColors[type.toLowerCase()] ?? '#6b7280';

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

@@ -0,0 +1,4 @@
+export declare class FileUploaderLocalization {
+    get uploadingHint(): string;
+    removeAria(name: string): string;
+}

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

@@ -0,0 +1,19 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    uploadingHint: {
+        en: 'uploading…',
+        no: 'laster opp…'
+    },
+    removeAria: {
+        en: 'Remove {name}',
+        no: 'Fjern {name}'
+    }
+};
+export class FileUploaderLocalization {
+    get uploadingHint() {
+        return loc.uploadingHint[AppLocale.current];
+    }
+    removeAria(name) {
+        return loc.removeAria[AppLocale.current].replace('{name}', name);
+    }
+}