@streamscloud/kit 0.9.14 → 0.9.16

package/dist/core/files/file-validation-localization.d.ts

@@ -0,0 +1,12 @@
+export declare class FileValidationLocalization {
+    get invalidFile(): string;
+    get unsupportedType(): string;
+    get audioOnly(): string;
+    get maxSize(): (size: string) => string;
+    get extensions(): (list: string) => string;
+    get maxDimensions(): (width: number, height: number) => string;
+    get minDimensions(): (width: number, height: number) => string;
+    get maxDuration(): (seconds: number) => string;
+    get aspectRatio(): (ratios: string) => string;
+    get maxBitrate(): (kbps: number) => string;
+}

package/dist/core/files/file-validation-localization.js

@@ -0,0 +1,75 @@
+import { AppLocale } from '../locale';
+export class FileValidationLocalization {
+    get invalidFile() {
+        return loc.invalidFile[AppLocale.current];
+    }
+    get unsupportedType() {
+        return loc.unsupportedType[AppLocale.current];
+    }
+    get audioOnly() {
+        return loc.audioOnly[AppLocale.current];
+    }
+    get maxSize() {
+        return loc.maxSize[AppLocale.current];
+    }
+    get extensions() {
+        return loc.extensions[AppLocale.current];
+    }
+    get maxDimensions() {
+        return loc.maxDimensions[AppLocale.current];
+    }
+    get minDimensions() {
+        return loc.minDimensions[AppLocale.current];
+    }
+    get maxDuration() {
+        return loc.maxDuration[AppLocale.current];
+    }
+    get aspectRatio() {
+        return loc.aspectRatio[AppLocale.current];
+    }
+    get maxBitrate() {
+        return loc.maxBitrate[AppLocale.current];
+    }
+}
+const loc = {
+    invalidFile: {
+        en: 'Invalid file',
+        no: 'Ugyldig fil'
+    },
+    unsupportedType: {
+        en: 'Unsupported file type',
+        no: 'Filtypen støttes ikke'
+    },
+    audioOnly: {
+        en: 'Audio files only',
+        no: 'Kun lydfiler'
+    },
+    maxSize: {
+        en: (size) => `Maximum file size: ${size}`,
+        no: (size) => `Maks filstørrelse: ${size}`
+    },
+    extensions: {
+        en: (list) => `Allowed file types: ${list}`,
+        no: (list) => `Tillatte filtyper: ${list}`
+    },
+    maxDimensions: {
+        en: (width, height) => `Maximum dimensions: ${width}×${height}px`,
+        no: (width, height) => `Maks oppløsning: ${width}×${height}px`
+    },
+    minDimensions: {
+        en: (width, height) => `Minimum dimensions: ${width}×${height}px`,
+        no: (width, height) => `Min oppløsning: ${width}×${height}px`
+    },
+    maxDuration: {
+        en: (seconds) => `Maximum duration: ${seconds}s`,
+        no: (seconds) => `Maks varighet: ${seconds}s`
+    },
+    aspectRatio: {
+        en: (ratios) => `Allowed aspect ratio: ${ratios}`,
+        no: (ratios) => `Tillatt sideforhold: ${ratios}`
+    },
+    maxBitrate: {
+        en: (kbps) => `Maximum bitrate: ${kbps} kbps`,
+        no: (kbps) => `Maks bitrate: ${kbps} kbps`
+    }
+};

package/dist/core/files/file-validation-rule-sets.d.ts

@@ -0,0 +1,8 @@
+import type { FileValidationRule, FileValidationRuleSets } from './file-validation-types';
+export declare const toRuleSets: (rules: FileValidationRule[] | FileValidationRuleSets) => FileValidationRuleSets;
+/**
+ * Union of every rule's `accept` across all sets, de-duplicated — the native picker filter /
+ * drag-over hint a containing cmp shows so a file matching any set can be selected.
+ */
+export declare const deriveAccept: (rules: FileValidationRule[] | FileValidationRuleSets) => string;
+export declare const pickRuleSet: (file: File, sets: FileValidationRuleSets) => FileValidationRule[] | null;

package/dist/core/files/file-validation-rule-sets.js

@@ -0,0 +1,24 @@
+import { matchesAcceptedFileTypes } from './file-types';
+const isRuleSets = (rules) => Array.isArray(rules[0]);
+export const toRuleSets = (rules) => rules.length === 0 ? [] : isRuleSets(rules) ? rules : [rules];
+const acceptTokens = (set) => set
+    .flatMap((rule) => (rule.accept ? rule.accept.split(',') : []))
+    .map((token) => token.trim())
+    .filter(Boolean);
+/**
+ * Union of every rule's `accept` across all sets, de-duplicated — the native picker filter /
+ * drag-over hint a containing cmp shows so a file matching any set can be selected.
+ */
+export const deriveAccept = (rules) => {
+    const tokens = toRuleSets(rules).flatMap(acceptTokens);
+    return [...new Set(tokens)].join(',');
+};
+export const pickRuleSet = (file, sets) => {
+    for (const set of sets) {
+        const accept = acceptTokens(set).join(',');
+        if (!accept || matchesAcceptedFileTypes(file, accept)) {
+            return set;
+        }
+    }
+    return null;
+};

package/dist/core/files/file-validation-rules.d.ts

@@ -1,30 +1,39 @@
 import type { FileValidationRule } from './file-validation-types';
 /**
- * Built-in rule factories. Each takes a constraint plus the consumer-supplied localized message
- * — kit never ships English error strings. Returned rule is a callable function; the `Mime`
- * factory additionally attaches `.accept` so containing UI cmps (`FileUploader`,
- * `OpenFileButton`) can auto-derive the native picker filter / drag-over hint.
+ * Built-in rule factories. Each takes a constraint and an optional `message`; when omitted, the
+ * rule falls back to a localized default from `FileValidationLocalization` (kit ships no English
+ * literals — defaults follow `AppLocale`). The `Mime` factory additionally attaches `.accept` so
+ * containing UI cmps (`FileUploader`, `OpenFileButton`) can auto-derive the native picker filter /
+ * drag-over hint.
  *
  * @example
  * ```ts
  * const rules = [
- *   FileRules.Mime('image/*', 'Please pick an image.'),
+ *   FileRules.Mime('image/*'),
  *   FileRules.MaxSize(5 * 1024 * 1024, 'Image must be under 5 MB.')
  * ];
  * const results = await FileValidator.validateMany(files, rules);
  * ```
  */
 export declare const FileRules: {
-    MaxSize: (bytes: number, message: string) => FileValidationRule;
-    Mime: (accept: string, message: string) => FileValidationRule;
+    AudioBitrate: (maxKbps: number, message?: string) => FileValidationRule;
+    AudioDuration: (maxSeconds: number, message?: string) => FileValidationRule;
+    AudioOnly: (message?: string) => FileValidationRule;
+    Extensions: (extensions: string[], message?: string) => FileValidationRule;
     ImageDimensions: (max: {
         width: number;
         height: number;
-    }, message: string) => FileValidationRule;
+    }, message?: string) => FileValidationRule;
     ImageMinDimensions: (min: {
         width: number;
         height: number;
-    }, message: string) => FileValidationRule;
-    AudioDuration: (maxSeconds: number, message: string) => FileValidationRule;
-    VideoDuration: (maxSeconds: number, message: string) => FileValidationRule;
+    }, message?: string) => FileValidationRule;
+    MaxSize: (bytes: number, message?: string) => FileValidationRule;
+    Mime: (accept: string, message?: string) => FileValidationRule;
+    VideoAspectRatio: (ratios: string[], message?: string, tolerancePercent?: number) => FileValidationRule;
+    VideoDimensions: (max: {
+        width: number;
+        height: number;
+    }, message?: string) => FileValidationRule;
+    VideoDuration: (maxSeconds: number, message?: string) => FileValidationRule;
 };

package/dist/core/files/file-validation-rules.js

@@ -1,4 +1,7 @@
+import { StringHelper } from '../utils';
+import { FileHelper } from './file-helper';
 import { matchesAcceptedFileTypes } from './file-types';
+import { FileValidationLocalization } from './file-validation-localization';
 const readImageDimensions = (file) => new Promise((resolve, reject) => {
     const url = URL.createObjectURL(file);
     const img = new Image();
@@ -26,42 +29,96 @@ const readMediaDuration = (file, kind) => new Promise((resolve, reject) => {
     };
     el.src = url;
 });
+const readVideoDimensions = (file) => new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file);
+    const video = document.createElement('video');
+    video.preload = 'metadata';
+    video.onloadedmetadata = () => {
+        URL.revokeObjectURL(url);
+        resolve({ width: video.videoWidth, height: video.videoHeight });
+    };
+    video.onerror = () => {
+        URL.revokeObjectURL(url);
+        reject(new Error('Failed to read video dimensions'));
+    };
+    video.src = url;
+});
+const parseRatio = (ratio) => {
+    const [w, h] = ratio.split(':').map((part) => parseFloat(part));
+    return h ? w / h : NaN;
+};
+const formatExtensions = (extensions) => extensions.map((ext) => '.' + ext.replace(/^\./, '')).join(', ');
+const messages = new FileValidationLocalization();
 /**
- * Built-in rule factories. Each takes a constraint plus the consumer-supplied localized message
- * — kit never ships English error strings. Returned rule is a callable function; the `Mime`
- * factory additionally attaches `.accept` so containing UI cmps (`FileUploader`,
- * `OpenFileButton`) can auto-derive the native picker filter / drag-over hint.
+ * Built-in rule factories. Each takes a constraint and an optional `message`; when omitted, the
+ * rule falls back to a localized default from `FileValidationLocalization` (kit ships no English
+ * literals — defaults follow `AppLocale`). The `Mime` factory additionally attaches `.accept` so
+ * containing UI cmps (`FileUploader`, `OpenFileButton`) can auto-derive the native picker filter /
+ * drag-over hint.
  *
  * @example
  * ```ts
  * const rules = [
- *   FileRules.Mime('image/*', 'Please pick an image.'),
+ *   FileRules.Mime('image/*'),
  *   FileRules.MaxSize(5 * 1024 * 1024, 'Image must be under 5 MB.')
  * ];
  * const results = await FileValidator.validateMany(files, rules);
  * ```
  */
 export const FileRules = {
-    MaxSize: (bytes, message) => (file) => file.size > bytes ? message : null,
-    Mime: (accept, message) => {
-        const rule = (file) => (matchesAcceptedFileTypes(file, accept) ? null : message);
-        rule.accept = accept;
-        return rule;
+    AudioBitrate: (maxKbps, message) => async (file) => {
+        const duration = await readMediaDuration(file, 'audio');
+        if (!duration) {
+            return null;
+        }
+        const kbps = (file.size * 8) / duration / 1000;
+        return kbps > maxKbps ? (message ?? messages.maxBitrate(maxKbps)) : null;
+    },
+    AudioDuration: (maxSeconds, message) => async (file) => {
+        const duration = await readMediaDuration(file, 'audio');
+        return duration > maxSeconds ? (message ?? messages.maxDuration(maxSeconds)) : null;
+    },
+    AudioOnly: (message) => async (file) => {
+        const { width, height } = await readVideoDimensions(file);
+        return width > 0 || height > 0 ? (message ?? messages.audioOnly) : null;
+    },
+    Extensions: (extensions, message) => (file) => {
+        const extension = FileHelper.getFileExtension(file.name).toLowerCase();
+        const allowed = extensions.map((ext) => ext.replace(/^\./, '').toLowerCase());
+        return allowed.includes(extension) ? null : (message ?? messages.extensions(formatExtensions(extensions)));
     },
     ImageDimensions: (max, message) => async (file) => {
         const { width, height } = await readImageDimensions(file);
-        return width > max.width || height > max.height ? message : null;
+        return width > max.width || height > max.height ? (message ?? messages.maxDimensions(max.width, max.height)) : null;
     },
     ImageMinDimensions: (min, message) => async (file) => {
         const { width, height } = await readImageDimensions(file);
-        return width < min.width || height < min.height ? message : null;
+        return width < min.width || height < min.height ? (message ?? messages.minDimensions(min.width, min.height)) : null;
     },
-    AudioDuration: (maxSeconds, message) => async (file) => {
-        const duration = await readMediaDuration(file, 'audio');
-        return duration > maxSeconds ? message : null;
+    MaxSize: (bytes, message) => (file) => file.size > bytes ? (message ?? messages.maxSize(StringHelper.toFileSizeString(bytes))) : null,
+    Mime: (accept, message) => {
+        const rule = (file) => (matchesAcceptedFileTypes(file, accept) ? null : (message ?? messages.unsupportedType));
+        rule.accept = accept;
+        return rule;
+    },
+    VideoAspectRatio: (ratios, message, tolerancePercent = 1) => async (file) => {
+        const { width, height } = await readVideoDimensions(file);
+        if (!width || !height) {
+            return message ?? messages.aspectRatio(ratios.join(', '));
+        }
+        const actual = width / height;
+        const matches = ratios.some((ratio) => {
+            const target = parseRatio(ratio);
+            return Number.isFinite(target) && Math.abs((actual / target) * 100 - 100) <= tolerancePercent;
+        });
+        return matches ? null : (message ?? messages.aspectRatio(ratios.join(', ')));
+    },
+    VideoDimensions: (max, message) => async (file) => {
+        const { width, height } = await readVideoDimensions(file);
+        return width > max.width || height > max.height ? (message ?? messages.maxDimensions(max.width, max.height)) : null;
     },
     VideoDuration: (maxSeconds, message) => async (file) => {
         const duration = await readMediaDuration(file, 'video');
-        return duration > maxSeconds ? message : null;
+        return duration > maxSeconds ? (message ?? messages.maxDuration(maxSeconds)) : null;
     }
 };

package/dist/core/files/file-validation-types.d.ts

@@ -1,7 +1,7 @@
 /**
  * Single async validation rule. Returns `null` (or empty array) when the file is valid,
- * a string (or array of strings) when invalid. The consumer supplies the localized message
- * when constructing the rule — kit ships only rule factories, never English defaults.
+ * a string (or array of strings) when invalid. The message is supplied by the rule factory;
+ * when omitted it falls back to a localized default (`FileValidationLocalization`).
  *
  * Optional `accept` property: when set (only the `FileRules.Mime` factory does this), the
  * containing UI cmps (`FileUploader`, `OpenFileButton`) auto-derive the native picker filter
@@ -10,6 +10,13 @@
 export type FileValidationRule = ((file: File) => string | string[] | null | Promise<string | string[] | null>) & {
     accept?: string;
 };
+/**
+ * One or more rule sets. A flat `FileValidationRule[]` is a single set applied to every file.
+ * A `FileValidationRule[][]` is several sets: per file, the first set whose `accept` matches
+ * (a set with no `accept` rule matches anything) is applied — lets one picker accept different
+ * file types with different rules. A file matching no set is rejected as an unsupported type.
+ */
+export type FileValidationRuleSets = FileValidationRule[][];
 /** Aggregate validation result for a single file across one or more rules. */
 export type FileValidationResult = {
     file: File;

package/dist/core/files/file-validator.d.ts

@@ -1,5 +1,5 @@
-import type { FileValidationResult, FileValidationRule } from './file-validation-types';
+import type { FileValidationResult, FileValidationRule, FileValidationRuleSets } from './file-validation-types';
 export declare class FileValidator {
-    static validate(file: File, rules: FileValidationRule[]): Promise<FileValidationResult>;
-    static validateMany(files: File[], rules: FileValidationRule[]): Promise<FileValidationResult[]>;
+    static validate(file: File, rules: FileValidationRule[] | FileValidationRuleSets): Promise<FileValidationResult>;
+    static validateMany(files: File[], rules: FileValidationRule[] | FileValidationRuleSets): Promise<FileValidationResult[]>;
 }

package/dist/core/files/file-validator.js

@@ -1,9 +1,23 @@
+import { FileValidationLocalization } from './file-validation-localization';
+import { pickRuleSet, toRuleSets } from './file-validation-rule-sets';
 const toArray = (v) => (v === null ? [] : Array.isArray(v) ? v : [v]);
+const messages = new FileValidationLocalization();
 export class FileValidator {
     static async validate(file, rules) {
+        const sets = toRuleSets(rules);
+        const set = sets.length > 1 ? pickRuleSet(file, sets) : (sets[0] ?? []);
+        if (set === null) {
+            return { file, isValid: false, errors: [messages.unsupportedType] };
+        }
         const errors = [];
-        for (const rule of rules) {
-            const result = await rule(file);
+        for (const rule of set) {
+            let result;
+            try {
+                result = await rule(file);
+            }
+            catch {
+                return { file, isValid: false, errors: [messages.invalidFile] };
+            }
             const msgs = toArray(result);
             if (msgs.length > 0) {
                 errors.push(...msgs);

package/dist/core/files/index.d.ts

@@ -1,5 +1,5 @@
 export type { BlobWithName, FileWithBlobUrl, FileWithUploadUrl } from './types';
-export type { FileValidationResult, FileValidationRule } from './file-validation-types';
+export type { FileValidationResult, FileValidationRule, FileValidationRuleSets } from './file-validation-types';
 export type { BlobKind, BlobKinds, BlobUpload, BlobUploadStrategy, UploadingFile, UploadingFileStatus } from './upload-types';
 export type { UploadMediaStoreOptions } from './upload-media-store.svelte';
 export { toBlobWithName, toFileWithUploadUrl } from './types';
@@ -8,6 +8,7 @@ export { openFile } from './open-file';
 export { FileHelper } from './file-helper';
 export { downloadBlob, downloadFromUrl, downloadJson, fetchFile } from './file-service';
 export { AcceptFileType, matchesAcceptedFileTypes } from './file-types';
+export { deriveAccept } from './file-validation-rule-sets';
 export { resizeBlob, resizeImage } from './image-resizer';
 export { FileWithBlobDataHelper } from './file-with-blob-data-helper';
 export { FilesProvider } from './files-provider';

package/dist/core/files/index.js

@@ -5,6 +5,7 @@ export { openFile } from './open-file';
 export { FileHelper } from './file-helper';
 export { downloadBlob, downloadFromUrl, downloadJson, fetchFile } from './file-service';
 export { AcceptFileType, matchesAcceptedFileTypes } from './file-types';
+export { deriveAccept } from './file-validation-rule-sets';
 export { resizeBlob, resizeImage } from './image-resizer';
 export { FileWithBlobDataHelper } from './file-with-blob-data-helper';
 export { FilesProvider } from './files-provider';

package/dist/ui/dialog/cmp.dialog-container.svelte

@@ -4,6 +4,7 @@ import { untrack } from 'svelte';
 let { dialog } = $props();
 let dialogElement = $state();
 const isActive = $derived(Dialogs.active(dialog.containerId)?.id === dialog.id);
+const isStacked = $derived(Dialogs.dialogs(dialog.containerId).findIndex((d) => d.id === dialog.id) > 0);
 const canDismiss = $derived(!dialog.controller.settings.nonCancelable && dialog.controller.settings.closeOnEsc);
 const DialogView = $derived(dialog.view);
 // TEMP: Workaround for Chromium bug where preventDefault() on cancel event
@@ -65,6 +66,7 @@ const isStretchContent = $derived(position === 'full-screen' || position === 'fu
   bind:this={dialogElement}
   class="dialog-container"
   class:dialog-container--inactive={!isActive}
+  class:dialog-container--stacked={isStacked}
   class:dialog-container--size-small={size === 'small'}
   class:dialog-container--size-medium={size === 'medium'}
   class:dialog-container--size-default={size === 'default'}
@@ -150,6 +152,9 @@ DialogContainer — wraps the native `<dialog>` element with sizing, positioning
   background: var(--_dialog-container--backdrop);
   animation: dialog-container-backdrop-fade-in var(--sc-kit--duration--slow) var(--sc-kit--ease--out) both;
 }
+.dialog-container--stacked::backdrop {
+  animation: none;
+}
 .dialog-container--inactive::backdrop {
   background: transparent;
 }

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

@@ -1,13 +1,8 @@
-<script lang="ts">import { FileValidator } from '../../core/files';
+<script lang="ts">import { deriveAccept, 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(',') ?? '');
+const accept = $derived(deriveAccept(validationRules ?? []));
 let inputRef = $state.raw(undefined);
 let dragOver = $state(false);
 // Snapshot of MIME types captured at dragenter — DataTransfer.files is empty during drag

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

@@ -1,13 +1,16 @@
-import type { FileValidationResult, FileValidationRule } from '../../core/files';
+import type { FileValidationResult, FileValidationRule, FileValidationRuleSets } 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.
+     * Validation rules applied to each picked / dropped file — a single set
+     * (`FileValidationRule[]`) or several sets (`FileValidationRule[][]`). With several sets,
+     * each file is validated by the first set whose `accept` matches it (a set with no `accept`
+     * rule matches anything; a file matching none is rejected). The native picker filter and
+     * drag-over visual hint are auto-derived from every set's `FileRules.Mime(...)` rule's
+     * `accept` — pass it once via the rule, the cmp wires the rest.
      */
-    validationRules?: FileValidationRule[];
+    validationRules?: FileValidationRule[] | FileValidationRuleSets;
     disabled?: boolean;
     /** Headline shown inside the drop zone. */
     title?: string;

package/dist/ui/open-file-button/cmp.open-file-button.svelte

@@ -1,11 +1,7 @@
-<script lang="ts">import { FileValidator, openFile } from '../../core/files';
+<script lang="ts">import { deriveAccept, FileValidator, openFile } from '../../core/files';
 import { Button } from '../button';
 const { size = 'md', variant = 'secondary', disabled = false, multiple = false, capture, validationRules, icon, iconPosition = 'leading', children, 'aria-label': ariaLabel, on } = $props();
-// Auto-derive native picker `accept` from any Mime-style rule that exposes its accept string.
-const accept = $derived(validationRules
-    ?.map((r) => r.accept)
-    .filter((a) => !!a)
-    .join(',') ?? '');
+const accept = $derived(deriveAccept(validationRules ?? []));
 const handleClick = async () => {
     const files = await openFile({ multiple, accept, capture });
     if (files.length === 0) {

package/dist/ui/open-file-button/cmp.open-file-button.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FileValidationResult, FileValidationRule } from '../../core/files';
+import type { FileValidationResult, FileValidationRule, FileValidationRuleSets } from '../../core/files';
 import type { ButtonSize, ButtonVariant } from '../button';
 import type { IconProp } from '../icon';
 import type { Snippet } from 'svelte';
@@ -12,10 +12,13 @@ type Props = {
     /** Optional file-picker capture hint (mobile camera / mic). */
     capture?: 'user' | 'environment';
     /**
-     * Rules applied to picked files. The native picker `accept` filter is auto-derived from
-     * any `FileRules.Mime(...)` rule's `accept` — pass the MIME pattern once via the rule.
+     * Rules applied to picked files — a single set (`FileValidationRule[]`) or several sets
+     * (`FileValidationRule[][]`). With several sets, each file is validated by the first set
+     * whose `accept` matches it (a set with no `accept` rule matches anything; a file matching
+     * none is rejected). The native picker `accept` filter is auto-derived from every set's
+     * `FileRules.Mime(...)` rule — pass the MIME pattern once via the rule.
      */
-    validationRules?: FileValidationRule[];
+    validationRules?: FileValidationRule[] | FileValidationRuleSets;
     /** Icon — forwarded to the underlying Button. */
     icon?: IconProp;
     /** Icon position. @default 'leading' */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.9.14",
+  "version": "0.9.16",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",