@streamscloud/kit 0.1.11 → 0.1.12-1772032209109

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

@@ -1,3 +1,3 @@
 import './toastr.scss';
 export { Toastr } from './toastr.svelte';
-export type { ToastrAction, ToastrOptions, ToastrPromiseMessages } from './types';
+export type { ToastrAction, ToastrOptions, ToastrPromiseMessages, ToastrTheme } from './types';

package/dist/core/toastr/toastr.scss

@@ -26,3 +26,41 @@
     color: var(--info-bg);
   }
 }
+
+// Theme classes — override svelte-sonner color variables per-toast.
+// Applied via the `class` option when an explicit theme is passed to Toastr methods.
+.sc-toast--light {
+  --normal-bg: #fff;
+  --normal-border: hsl(0, 0%, 93%);
+  --normal-text: hsl(0, 0%, 9%);
+  --success-bg: hsl(143, 85%, 96%);
+  --success-border: hsl(145, 92%, 87%);
+  --success-text: hsl(140, 100%, 27%);
+  --info-bg: hsl(208, 100%, 97%);
+  --info-border: hsl(221, 91%, 93%);
+  --info-text: hsl(210, 92%, 45%);
+  --warning-bg: hsl(49, 100%, 97%);
+  --warning-border: hsl(49, 91%, 84%);
+  --warning-text: hsl(31, 92%, 45%);
+  --error-bg: hsl(359, 100%, 97%);
+  --error-border: hsl(359, 100%, 94%);
+  --error-text: hsl(360, 100%, 45%);
+}
+
+.sc-toast--dark {
+  --normal-bg: #000;
+  --normal-border: hsl(0, 0%, 20%);
+  --normal-text: hsl(0, 0%, 99%);
+  --success-bg: hsl(150, 100%, 6%);
+  --success-border: hsl(147, 100%, 12%);
+  --success-text: hsl(150, 86%, 65%);
+  --info-bg: hsl(215, 100%, 6%);
+  --info-border: hsl(223, 43%, 17%);
+  --info-text: hsl(216, 87%, 65%);
+  --warning-bg: hsl(64, 100%, 6%);
+  --warning-border: hsl(60, 100%, 9%);
+  --warning-text: hsl(46, 87%, 65%);
+  --error-bg: hsl(358, 76%, 10%);
+  --error-border: hsl(357, 89%, 16%);
+  --error-text: hsl(358, 100%, 81%);
+}

package/dist/core/toastr/toastr.svelte.d.ts

@@ -4,5 +4,5 @@ export declare class Toastr {
     static success(message: string, options?: ToastrOptions): Promise<void>;
     static warning(message: string, options?: ToastrOptions): Promise<void>;
     static info(message: string, options?: ToastrOptions): Promise<void>;
-    static promise<T>(promise: Promise<T> | (() => Promise<T>), messages: ToastrPromiseMessages<T>): Promise<void>;
+    static promise<T>(promise: Promise<T> | (() => Promise<T>), messages: ToastrPromiseMessages<T>, options?: ToastrOptions): Promise<void>;
 }

package/dist/core/toastr/toastr.svelte.js

@@ -1,23 +1,30 @@
 import { ToasterHost } from './toaster-host.svelte';
+const toExternalToast = (options) => {
+    if (!options) {
+        return {};
+    }
+    const { theme, ...rest } = options;
+    return { ...rest, class: theme ? `sc-toast--${theme}` : undefined };
+};
 export class Toastr {
     static async error(message, options) {
         const toast = await ToasterHost.ensure();
-        toast.error(message, options);
+        toast.error(message, toExternalToast(options));
     }
     static async success(message, options) {
         const toast = await ToasterHost.ensure();
-        toast.success(message, options);
+        toast.success(message, toExternalToast(options));
     }
     static async warning(message, options) {
         const toast = await ToasterHost.ensure();
-        toast.warning(message, options);
+        toast.warning(message, toExternalToast(options));
     }
     static async info(message, options) {
         const toast = await ToasterHost.ensure();
-        toast.info(message, options);
+        toast.info(message, toExternalToast(options));
     }
-    static async promise(promise, messages) {
+    static async promise(promise, messages, options) {
         const toast = await ToasterHost.ensure();
-        toast.promise(promise, messages);
+        toast.promise(promise, { ...messages, ...toExternalToast(options) });
     }
 }

package/dist/core/toastr/types.d.ts

@@ -2,10 +2,12 @@ export interface ToastrAction {
     label: string;
     onClick: () => void;
 }
+export type ToastrTheme = 'light' | 'dark';
 export interface ToastrOptions {
     action?: ToastrAction;
     description?: string;
     duration?: number;
+    theme?: ToastrTheme;
 }
 export interface ToastrPromiseMessages<T> {
     loading: string;

package/dist/ui/cropper/image-editor-dialog/cmp.image-editor-dialog.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">import { FileWithBlobDataHelper } from '../../../core/files';
 import { Toastr } from '../../../core/toastr';
-import { Dialog, DialogButton, DialogCancelButton, DialogSize } from '../../dialog';
+import { Dialog, DialogButton, DialogCancelButton } from '../../dialog';
 import { ImgCropper, ImgCropperControls, ImgCropperToolbar, ImgCropperView } from '../img-cropper';
 import { ImageEditorDialogLocalization } from './image-editor-dialog-localization';
 import { untrack } from 'svelte';
 const { controller, data } = $props();
 const loc = new ImageEditorDialogLocalization();
 const cropper = untrack(() => {
-    const showImageShadow = data.showImageShadow ?? true;
-    if (data.mode === 'contain') {
-        return new ImgCropper({ mode: 'contain', aspectRatio: data.aspectRatio, fillColor: data.fillColor, showImageShadow });
-    }
-    return new ImgCropper({ mode: 'cover', aspectRatio: data.aspectRatio, fillColor: data.fillColor, showImageShadow });
+    return new ImgCropper({
+        mode: data.mode ?? 'cover',
+        aspectRatio: data.aspectRatio,
+        fillColor: data.fillColor,
+        showImageShadow: data.showImageShadow ?? true
+    });
 });
 const url = $derived(data.url);
 const save = async () => {
@@ -36,7 +37,7 @@ const cancel = () => {
 };
 $effect(() => untrack(() => {
     controller.updateSettings({ closeOnClickOutside: false, closeOnEsc: true });
-    controller.updateContainerSettings({ size: DialogSize.FullHD });
+    controller.updateContainerSettings({ size: 'fullhd' });
 }));
 </script>
 

package/dist/ui/cropper/image-editor-dialog/index.d.ts

@@ -9,7 +9,7 @@ import type { ImageEditorDialogOptions, ImageEditorDialogResult } from './types'
  *
  * ### Aspect ratio
  * - `number` — fixed ratio, no dropdown.
- * - `ImgCropperDynamicAspectRatio` — dropdown with supported ratios. `allowFreeCrop: true`
+ * - `ImageEditorDynamicAspectRatio` — dropdown with supported ratios. `allowFreeCrop: true`
  *   adds a free-ratio option; `initial` is optional when free crop is enabled.
  * - Omitted — free crop (no ratio constraint on the selection).
  *
@@ -18,4 +18,4 @@ import type { ImageEditorDialogOptions, ImageEditorDialogResult } from './types'
  * - `selectedRatio` — active aspect ratio at save time (`null` for free crop).
  */
 export declare const openImageEditorDialog: (options: ImageEditorDialogOptions) => Promise<DialogResult<ImageEditorDialogResult>>;
-export type { CroppedFile, ImageEditorDialogOptions, ImageEditorDialogResult } from './types';
+export type { CroppedFile, ImageEditorDialogOptions, ImageEditorDialogResult, ImageEditorDynamicAspectRatio } from './types';

package/dist/ui/cropper/image-editor-dialog/index.js

@@ -9,7 +9,7 @@ import { default as ImageEditorDialog } from './cmp.image-editor-dialog.svelte';
  *
  * ### Aspect ratio
  * - `number` — fixed ratio, no dropdown.
- * - `ImgCropperDynamicAspectRatio` — dropdown with supported ratios. `allowFreeCrop: true`
+ * - `ImageEditorDynamicAspectRatio` — dropdown with supported ratios. `allowFreeCrop: true`
  *   adds a free-ratio option; `initial` is optional when free crop is enabled.
  * - Omitted — free crop (no ratio constraint on the selection).
  *

package/dist/ui/cropper/image-editor-dialog/types.d.ts

@@ -1,11 +1,19 @@
 import type { FileWithBlobUrl } from '../../../core/files';
-import type { CropperMode, ImgCropperDynamicAspectRatio } from '../img-cropper';
+export type ImageEditorDynamicAspectRatio = {
+    initial: number;
+    supported: number[];
+    allowFreeCrop?: false;
+} | {
+    initial?: number;
+    supported: number[];
+    allowFreeCrop: true;
+};
 export type ImageEditorDialogOptions = {
     url: string;
     fillColor?: string;
     showImageShadow?: boolean;
-    mode?: CropperMode;
-    aspectRatio?: number | ImgCropperDynamicAspectRatio;
+    mode?: 'contain' | 'cover';
+    aspectRatio?: number | ImageEditorDynamicAspectRatio;
 };
 export type CroppedFile = FileWithBlobUrl & {
     width: number;

package/dist/ui/cropper/img-cropper/cmp.img-cropper.svelte

@@ -69,8 +69,7 @@ const observeResize = (el) => {
       style:height={cropper.canvasGeometry.height ? `${cropper.canvasGeometry.height}px` : undefined}
       use:initCanvas
       background={(cropper.showFillColor && cropper.isTransparentFill) || undefined}>
-      <cropper-image crossorigin={cropper.corsMode === 'native' ? 'anonymous' : null} initial-center-size={cropper.mode} scalable translatable rotatable>
-      </cropper-image>
+      <cropper-image initial-center-size={cropper.mode} scalable translatable rotatable> </cropper-image>
       <cropper-shade hidden></cropper-shade>
       <cropper-handle action="select" plain></cropper-handle>
       <cropper-selection movable resizable aspect-ratio={cropper.aspectRatio ?? undefined}>

package/dist/ui/cropper/img-cropper/img-cropper-base-worker.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CanvasGeometry, DragMode, ImgCropperWorker, ImgCropperWorkerParams } from './img-cropper-worker.svelte';
+import type { CanvasGeometry, DragMode, ImgCropperResult, ImgCropperWorker, ImgCropperWorkerParams } from './img-cropper-worker.svelte';
 import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
 export declare abstract class ImgCropperBaseWorker implements ImgCropperWorker {
     cropBoxVisible: boolean;
@@ -10,6 +10,7 @@ export declare abstract class ImgCropperBaseWorker implements ImgCropperWorker {
     protected _canvas: CropperCanvas;
     protected _selectHandle: HTMLElement | null;
     protected _originalSrc: string;
+    protected _sourceMime: string | null;
     protected _visualWidth: number;
     protected _visualHeight: number;
     protected abstract readonly _centerMode: 'contain' | 'cover';
@@ -21,23 +22,19 @@ export declare abstract class ImgCropperBaseWorker implements ImgCropperWorker {
     reset: () => Promise<void>;
     crop: (options?: {
         fillColor?: string;
-    }) => Promise<{
-        dataUrl: string;
-        width: number;
-        height: number;
-    }>;
+    }) => Promise<ImgCropperResult>;
     save: (options?: {
         fillColor?: string;
-    }) => Promise<{
-        dataUrl: string;
-        width: number;
-        height: number;
-    }>;
+    }) => Promise<ImgCropperResult>;
     clearSelection: () => void;
     refit: () => Promise<void>;
     enableCropMode: () => void;
     protected _wrapTransformOp: (fn: () => void) => void;
     protected _applyMoveMode: () => void;
+    protected _resolveOutputFormat: (fillColor: string | undefined) => {
+        mime: string;
+        quality: number;
+    };
     protected _fitImage: () => Promise<void>;
     protected abstract _computeCanvasSize(): void;
 }

package/dist/ui/cropper/img-cropper/img-cropper-base-worker.svelte.js

@@ -1,6 +1,7 @@
 import { ColorHelper } from '../../../core/utils';
 import { computeImageScale, computeNaturalOutputSize, handleSelectionBoundary } from './img-cropper-utils';
 import { tick } from 'svelte';
+const OPAQUE_MIME_TYPES = new Set(['image/jpeg', 'image/bmp']);
 export class ImgCropperBaseWorker {
     cropBoxVisible = $state(false);
     dragMode = $state('move');
@@ -11,10 +12,12 @@ export class ImgCropperBaseWorker {
     _canvas;
     _selectHandle;
     _originalSrc;
+    _sourceMime;
     _visualWidth = 0;
     _visualHeight = 0;
     constructor(params) {
         this._originalSrc = params.originalSrc;
+        this._sourceMime = params.sourceMime;
         this._image = params.image;
         this._selection = params.selection;
         this._canvas = params.canvas;
@@ -41,9 +44,7 @@ export class ImgCropperBaseWorker {
         this._selection.$clear();
     };
     rotate = async () => {
-        const prevW = this._visualWidth;
-        this._visualWidth = this._visualHeight;
-        this._visualHeight = prevW;
+        [this._visualWidth, this._visualHeight] = [this._visualHeight, this._visualWidth];
         this._computeCanvasSize();
         await tick();
         this._wrapTransformOp(() => {
@@ -77,12 +78,13 @@ export class ImgCropperBaseWorker {
                 }
             }
         });
-        const dataUrl = canvas.toDataURL('image/png', 0.9);
+        const format = this._resolveOutputFormat(fillColor);
+        const dataUrl = canvas.toDataURL(format.mime, format.quality);
         this._applyMoveMode();
         this._image.src = dataUrl;
         await this._fitImage();
         this._selection.$clear();
-        return { dataUrl, width: canvas.width, height: canvas.height };
+        return { dataUrl, width: canvas.width, height: canvas.height, mimeType: format.mime };
     };
     save = async (options) => {
         const fillColor = options?.fillColor;
@@ -114,8 +116,9 @@ export class ImgCropperBaseWorker {
             // Reverse zoom shrinks image — must suspend cover check to avoid clamping
             this._wrapTransformOp(() => this._image.$zoom(-0.003));
         }
-        const dataUrl = canvas.toDataURL('image/png', 0.9);
-        return { dataUrl, width: canvas.width, height: canvas.height };
+        const format = this._resolveOutputFormat(fillColor);
+        const dataUrl = canvas.toDataURL(format.mime, format.quality);
+        return { dataUrl, width: canvas.width, height: canvas.height, mimeType: format.mime };
     };
     clearSelection = () => {
         this._selection.$clear();
@@ -149,6 +152,15 @@ export class ImgCropperBaseWorker {
         this.dragMode = 'move';
         this.cropBoxVisible = false;
     };
+    _resolveOutputFormat = (fillColor) => {
+        if (this._sourceMime && OPAQUE_MIME_TYPES.has(this._sourceMime)) {
+            return { mime: 'image/jpeg', quality: 0.92 };
+        }
+        if (fillColor && !ColorHelper.isTransparent(fillColor)) {
+            return { mime: 'image/jpeg', quality: 0.92 };
+        }
+        return { mime: 'image/png', quality: 1 };
+    };
     _fitImage = async () => {
         const img = await this._image.$ready();
         this._visualWidth = img.naturalWidth;

package/dist/ui/cropper/img-cropper/img-cropper-utils.d.ts

@@ -5,6 +5,7 @@ type Rect = {
     right: number;
     bottom: number;
 };
+export declare const detectMimeFromUrl: (url: string) => string | null;
 export declare const computeImageScale: (transform: number[]) => number;
 export declare const computeNaturalOutputSize: (params: {
     displayWidth: number;

package/dist/ui/cropper/img-cropper/img-cropper-utils.js

@@ -1,3 +1,26 @@
+import { Base64Helper } from '../../../core/files/base64-helper';
+import { default as mime } from 'mime';
+// Detect MIME type from a URL without fetching the resource.
+// Returns a MIME string for data: URLs, extension-based URLs, or null for blob: / unknown URLs.
+export const detectMimeFromUrl = (url) => {
+    if (url.startsWith('data:')) {
+        return Base64Helper.getMimeType(url);
+    }
+    if (url.startsWith('blob:')) {
+        return null;
+    }
+    try {
+        const pathname = url.includes('://') ? new URL(url).pathname : url.split('?')[0].split('#')[0];
+        const lastDot = pathname.lastIndexOf('.');
+        if (lastDot === -1) {
+            return null;
+        }
+        return mime.getType(pathname.slice(lastDot + 1).toLowerCase()) ?? null;
+    }
+    catch {
+        return null;
+    }
+};
 // Extract the uniform scale factor from a CSS transform matrix [a, b, c, d, e, f].
 // Works for any combination of scale + rotation: scale = sqrt(a² + b²).
 export const computeImageScale = (transform) => {

package/dist/ui/cropper/img-cropper/img-cropper-worker.svelte.d.ts

@@ -7,12 +7,19 @@ export type CanvasGeometry = {
 };
 export type ImgCropperWorkerParams = {
     originalSrc: string;
+    sourceMime: string | null;
     image: CropperImage;
     selection: CropperSelection;
     canvas: CropperCanvas;
     selectHandle: HTMLElement | null;
     aspectRatio: number | null;
 };
+export type ImgCropperResult = {
+    dataUrl: string;
+    width: number;
+    height: number;
+    mimeType: string;
+};
 export interface ImgCropperWorker {
     cropBoxVisible: boolean;
     dragMode: DragMode;
@@ -25,18 +32,10 @@ export interface ImgCropperWorker {
     reset: () => Promise<void>;
     crop: (options?: {
         fillColor?: string;
-    }) => Promise<{
-        dataUrl: string;
-        width: number;
-        height: number;
-    }>;
+    }) => Promise<ImgCropperResult>;
     save: (options?: {
         fillColor?: string;
-    }) => Promise<{
-        dataUrl: string;
-        width: number;
-        height: number;
-    }>;
+    }) => Promise<ImgCropperResult>;
     clearSelection: () => void;
     enableCropMode: () => void;
     refit: () => void | Promise<void>;

package/dist/ui/cropper/img-cropper/img-cropper.svelte.d.ts

@@ -1,8 +1,7 @@
-import type { CanvasGeometry, DragMode } from './img-cropper-worker.svelte';
+import type { CanvasGeometry, DragMode, ImgCropperResult } from './img-cropper-worker.svelte';
 import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
 export type { CanvasGeometry };
 export type CropperMode = 'contain' | 'cover';
-export type CorsMode = 'native' | 'fetch';
 export type { DragMode };
 export type ImgCropperRatioOption = {
     label: string;
@@ -17,26 +16,19 @@ export type ImgCropperDynamicAspectRatio = {
     supported: number[];
     allowFreeCrop: true;
 };
-export type ImgCropperSaveResult = {
-    dataUrl: string;
-    width: number;
-    height: number;
-};
-type ImgCropperOptionsBase = {
-    corsMode?: CorsMode;
-    fillColor?: string;
-    showImageShadow?: boolean;
-};
-export type ImgCropperOptions = ImgCropperOptionsBase & {
+export type { ImgCropperResult };
+export type ImgCropperSaveResult = ImgCropperResult;
+export type ImgCropperOptions = {
     mode: CropperMode;
     aspectRatio?: number | ImgCropperDynamicAspectRatio;
+    fillColor?: string;
+    showImageShadow?: boolean;
 };
 export declare class ImgCropper {
     loading: boolean;
     ready: boolean;
     fillColor: string;
     readonly mode: CropperMode;
-    readonly corsMode: CorsMode;
     readonly ratioOptions: ImgCropperRatioOption[] | null;
     readonly showImageShadow: boolean;
     private _worker;
@@ -62,11 +54,7 @@ export declare class ImgCropper {
     zoomOut: () => void;
     reset: () => Promise<void>;
     changeAspectRatio: (ratio: number | null) => Promise<void>;
-    crop: () => Promise<{
-        dataUrl: string;
-        width: number;
-        height: number;
-    } | null>;
+    crop: () => Promise<ImgCropperSaveResult | null>;
     save: () => Promise<ImgCropperSaveResult | null>;
     clearSelection: () => void;
     enableCropMode: () => void;

package/dist/ui/cropper/img-cropper/img-cropper.svelte.js

@@ -2,12 +2,12 @@ import { FileWithBlobDataHelper } from '../../../core/files';
 import { ColorHelper, Utils } from '../../../core/utils';
 import { ImgCropperContainWorker } from './img-cropper-contain-worker.svelte';
 import { ImgCropperCoverWorker } from './img-cropper-cover-worker.svelte';
+import { detectMimeFromUrl } from './img-cropper-utils';
 export class ImgCropper {
     loading = $state(false);
     ready = $state(false);
     fillColor = $state('');
     mode;
-    corsMode;
     ratioOptions;
     showImageShadow;
     _worker = $state.raw(null);
@@ -15,7 +15,6 @@ export class ImgCropper {
     _defaultGeometry;
     constructor(options) {
         this.mode = options.mode;
-        this.corsMode = options.corsMode ?? 'native';
         this.fillColor = options.fillColor ?? '';
         this.showImageShadow = options.showImageShadow ?? true;
         const toOption = (r) => {
@@ -68,13 +67,19 @@ export class ImgCropper {
         this.loading = true;
         try {
             let resolvedSrc = params.src;
-            if (this.corsMode === 'fetch') {
-                const file = await FileWithBlobDataHelper.fromUrl(params.src);
-                resolvedSrc = file ? file.blobUrl : params.src;
+            let sourceMime = null;
+            const file = await FileWithBlobDataHelper.fromUrl(params.src);
+            if (file) {
+                resolvedSrc = file.blobUrl;
+                sourceMime = file.type || null;
                 this._originalSrc = resolvedSrc;
             }
+            if (!sourceMime) {
+                sourceMime = detectMimeFromUrl(params.src);
+            }
             const workerParams = {
                 originalSrc: resolvedSrc,
+                sourceMime,
                 image: params.cropperImage,
                 selection: params.cropperSelection,
                 canvas: params.cropperCanvas,

package/dist/ui/cropper/img-cropper/index.d.ts

@@ -1,4 +1,4 @@
 export { default as ImgCropperControls } from './cmp.img-cropper-controls.svelte';
 export { default as ImgCropperToolbar } from './cmp.img-cropper-toolbar.svelte';
 export { default as ImgCropperView } from './cmp.img-cropper.svelte';
-export { type CanvasGeometry, type CorsMode, type CropperMode, type DragMode, ImgCropper, type ImgCropperDynamicAspectRatio, type ImgCropperOptions, type ImgCropperRatioOption, type ImgCropperSaveResult } from './img-cropper.svelte';
+export { type CanvasGeometry, type CropperMode, type DragMode, ImgCropper, type ImgCropperDynamicAspectRatio, type ImgCropperOptions, type ImgCropperRatioOption, type ImgCropperSaveResult } from './img-cropper.svelte';

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

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TResult = void, TCancelResult = void, TData = void">import { Dialogs } from './dialogs.svelte';
-import { DialogPosition, DialogSize } from './types.svelte';
+import { DIALOG_SIZES } from './types.svelte';
 import { untrack } from 'svelte';
 let { dialog } = $props();
 let dialogElement = $state();
@@ -57,7 +57,7 @@ $effect(() => {
 });
 const size = $derived(dialog.controller.containerSettings.size);
 const position = $derived(dialog.controller.containerSettings.position);
-const isCustomWidth = $derived(!Object.values(DialogSize).includes(size));
+const isCustomWidth = $derived(!DIALOG_SIZES.includes(size));
 const customWidth = $derived(isCustomWidth ? size : null);
 </script>
 
@@ -65,16 +65,16 @@ const customWidth = $derived(isCustomWidth ? size : null);
   bind:this={dialogElement}
   class="dialog-container"
   class:dialog-container--inactive={!isActive}
-  class:dialog-container--size-small={size === DialogSize.Small}
-  class:dialog-container--size-medium={size === DialogSize.Medium}
-  class:dialog-container--size-default={size === DialogSize.Default}
-  class:dialog-container--size-large={size === DialogSize.Large}
-  class:dialog-container--size-fullhd={size === DialogSize.FullHD}
-  class:dialog-container--size-auto={size === DialogSize.Auto}
-  class:dialog-container--position-center={position === DialogPosition.Center}
-  class:dialog-container--position-center-top={position === DialogPosition.CenterTop}
-  class:dialog-container--position-full-screen={position === DialogPosition.FullScreen}
-  class:dialog-container--position-full-height={position === DialogPosition.FullHeight}
+  class:dialog-container--size-small={size === 'small'}
+  class:dialog-container--size-medium={size === 'medium'}
+  class:dialog-container--size-default={size === 'default'}
+  class:dialog-container--size-large={size === 'large'}
+  class:dialog-container--size-fullhd={size === 'fullhd'}
+  class:dialog-container--size-auto={size === 'auto'}
+  class:dialog-container--position-center={position === 'center'}
+  class:dialog-container--position-center-top={position === 'center-top'}
+  class:dialog-container--position-full-screen={position === 'full-screen'}
+  class:dialog-container--position-full-height={position === 'full-height'}
   onkeydown={handleKeydown}
   oncancel={handleCancel}
   onclick={handleBackdropClick}

package/dist/ui/dialog/dialog-data.d.ts

@@ -23,5 +23,7 @@ export type DialogInit<TData = void, TResult = void, TCancelResult = void> = {
     data?: TData;
     explicitSettings?: Partial<DialogSettings>;
     containerSettings?: Partial<DialogContainerSettings>;
+    /** Mount target for the dialog element. Useful for shadow DOM isolation. Defaults to `document.body`. */
+    host?: ParentNode;
 };
 export {};

package/dist/ui/dialog/dialog-mount.d.ts

@@ -1,3 +1,3 @@
 import type { AnyDialogData } from './dialog-data';
-export declare const mountDialog: (dialog: AnyDialogData) => void;
+export declare const mountDialog: (dialog: AnyDialogData, host?: ParentNode) => void;
 export declare const unmountDialog: (dialog: AnyDialogData) => void;

package/dist/ui/dialog/dialog-mount.js

@@ -1,9 +1,9 @@
 import { default as DialogContainer } from './cmp.dialog-container.svelte';
 import { mount, unmount } from 'svelte';
-export const mountDialog = (dialog) => {
+export const mountDialog = (dialog, host) => {
     const hostElement = document.createElement('div');
     hostElement.setAttribute('data-dialog-host', String(dialog.id));
-    document.body.appendChild(hostElement);
+    (host ?? document.body).appendChild(hostElement);
     const component = mount(DialogContainer, {
         target: hostElement,
         props: { dialog }

package/dist/ui/dialog/dialogs.svelte.d.ts

@@ -3,11 +3,14 @@ import { type DialogResult } from './types.svelte';
 export declare class DialogsContainer {
     private _dialogs;
     private _mountModule;
+    private _savedOverflow;
     get all(): ReadonlyArray<AnyDialogData>;
     get active(): AnyDialogData | null;
     get count(): number;
     open: <TData = void, TResult = void, TCancelResult = void>(init: DialogInit<TData, TResult, TCancelResult>, id?: number) => Promise<DialogResult<TResult, TCancelResult>>;
     close: (id: number) => void;
     closeAll: () => void;
+    private lockBodyScroll;
+    private unlockBodyScroll;
 }
 export declare const Dialogs: DialogsContainer;

package/dist/ui/dialog/dialogs.svelte.js

@@ -5,6 +5,7 @@ import {} from './types.svelte';
 export class DialogsContainer {
     _dialogs = $state.raw([]);
     _mountModule = null;
+    _savedOverflow = null;
     get all() {
         return this._dialogs;
     }
@@ -18,7 +19,7 @@ export class DialogsContainer {
         if (!this._mountModule) {
             this._mountModule = await import('./dialog-mount');
         }
-        const { view, data, explicitSettings, containerSettings } = init;
+        const { view, data, explicitSettings, containerSettings, host } = init;
         const controller = new DialogController({
             id,
             onClose: () => {
@@ -26,6 +27,9 @@ export class DialogsContainer {
                 if (dialog) {
                     this._mountModule?.unmountDialog(dialog);
                     this._dialogs = this._dialogs.filter((d) => d.id !== id);
+                    if (this._dialogs.length === 0) {
+                        this.unlockBodyScroll();
+                    }
                 }
             },
             settings: explicitSettings,
@@ -38,7 +42,8 @@ export class DialogsContainer {
             controller
         };
         this._dialogs = [...this._dialogs, newDialog];
-        this._mountModule.mountDialog(newDialog);
+        this.lockBodyScroll();
+        this._mountModule.mountDialog(newDialog, host);
         return controller.openedPromise;
     };
     close = (id) => {
@@ -53,6 +58,20 @@ export class DialogsContainer {
             dialog.controller.cancel();
         }
     };
+    lockBodyScroll = () => {
+        if (this._savedOverflow !== null) {
+            return;
+        }
+        this._savedOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    };
+    unlockBodyScroll = () => {
+        if (this._savedOverflow === null) {
+            return;
+        }
+        document.body.style.overflow = this._savedOverflow;
+        this._savedOverflow = null;
+    };
 }
 const createDialogsSingleton = () => {
     if (!isBrowser()) {