@streamscloud/kit 0.1.10 → 0.1.12-1772032209109

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

@@ -2,20 +2,19 @@ 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('');
-    aspectRatio = $state(null);
     mode;
-    corsMode;
     ratioOptions;
     showImageShadow;
     _worker = $state.raw(null);
     _originalSrc = null;
+    _defaultGeometry;
     constructor(options) {
         this.mode = options.mode;
-        this.corsMode = options.corsMode ?? 'native';
         this.fillColor = options.fillColor ?? '';
         this.showImageShadow = options.showImageShadow ?? true;
         const toOption = (r) => {
@@ -26,23 +25,14 @@ export class ImgCropper {
             return ldd ? { label: `${ldd.dividend}:${ldd.divisor}`, value: r } : { label: String(r), value: r };
         };
         const toRatioOptions = (items) => (items.length >= 2 ? items : null);
+        let initialRatio;
         if (options.aspectRatio === undefined || typeof options.aspectRatio === 'number') {
-            this.aspectRatio = options.aspectRatio ?? null;
+            initialRatio = options.aspectRatio ?? null;
             this.ratioOptions = null;
         }
-        else if (options.mode === 'cover') {
-            const dynamic = options.aspectRatio;
-            this.aspectRatio = dynamic.initial;
-            const supported = [...dynamic.supported];
-            if (!supported.includes(dynamic.initial)) {
-                supported.unshift(dynamic.initial);
-            }
-            this.ratioOptions = toRatioOptions(supported.map(toOption));
-        }
         else {
             const dynamic = options.aspectRatio;
-            const initialRatio = dynamic.initial ?? (dynamic.allowFreeCrop ? null : (dynamic.supported[0] ?? null));
-            this.aspectRatio = initialRatio;
+            initialRatio = dynamic.initial ?? (dynamic.allowFreeCrop ? null : (dynamic.supported[0] ?? null));
             const supported = [...dynamic.supported];
             if (initialRatio !== null && !supported.includes(initialRatio)) {
                 supported.unshift(initialRatio);
@@ -52,6 +42,7 @@ export class ImgCropper {
             }
             this.ratioOptions = toRatioOptions(supported.map(toOption));
         }
+        this._defaultGeometry = { aspectRatio: initialRatio, width: 0, height: 0 };
     }
     get showFillColor() {
         return this.mode === 'contain';
@@ -59,14 +50,11 @@ export class ImgCropper {
     get isTransparentFill() {
         return ColorHelper.isTransparent(this.fillColor);
     }
-    get effectiveCanvasRatio() {
-        return this.aspectRatio ?? this._worker?.canvasRatio ?? null;
+    get canvasGeometry() {
+        return this._worker?.canvasGeometry ?? this._defaultGeometry;
     }
-    get naturalWidth() {
-        return this._worker?.naturalWidth ?? 0;
-    }
-    get naturalHeight() {
-        return this._worker?.naturalHeight ?? 0;
+    get aspectRatio() {
+        return this.canvasGeometry.aspectRatio;
     }
     get cropBoxVisible() {
         return this._worker?.cropBoxVisible ?? false;
@@ -79,17 +67,24 @@ 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,
-                selectHandle: params.selectHandle
+                selectHandle: params.selectHandle,
+                aspectRatio: this._defaultGeometry.aspectRatio
             };
             this._worker = this.mode === 'cover' ? new ImgCropperCoverWorker(workerParams) : new ImgCropperContainWorker(workerParams);
             await this._worker.ready();
@@ -121,7 +116,10 @@ export class ImgCropper {
         await this._worker?.reset();
     };
     changeAspectRatio = async (ratio) => {
-        this.aspectRatio = ratio;
+        if (this._worker) {
+            this._worker.canvasGeometry = { ...this._worker.canvasGeometry, aspectRatio: ratio };
+        }
+        this._defaultGeometry = { ...this._defaultGeometry, aspectRatio: ratio };
         await this.reset();
     };
     crop = async () => {
@@ -130,7 +128,7 @@ export class ImgCropper {
         }
         this.loading = true;
         try {
-            return await this._worker.crop({ fillColor: this.fillColor, freeRatio: this.aspectRatio === null });
+            return await this._worker.crop({ fillColor: this.fillColor });
         }
         finally {
             this.loading = false;
@@ -157,4 +155,7 @@ export class ImgCropper {
     enableMoveMode = () => {
         this._worker?.clearSelection();
     };
+    refit = () => {
+        void this._worker?.refit();
+    };
 }

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 CorsMode, type CropperMode, type DragMode, ImgCropper, type ImgCropperContainAspectRatio, type ImgCropperCoverAspectRatio, 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()) {

package/dist/ui/dialog/index.d.ts

@@ -1,6 +1,6 @@
 export { Dialogs } from './dialogs.svelte';
 export { DialogController } from './dialog-controller';
-export { DialogSize, DialogPosition, type DialogResult } from './types.svelte';
+export { DIALOG_SIZES, type DialogPosition, type DialogResult, type DialogSize } from './types.svelte';
 export { default as Dialog } from './cmp.dialog.svelte';
 export { default as DialogButton } from './cmp.dialog-button.svelte';
 export { default as DialogCancelButton } from './cmp.dialog-cancel-button.svelte';

package/dist/ui/dialog/index.js

@@ -1,6 +1,6 @@
 export { Dialogs } from './dialogs.svelte';
 export { DialogController } from './dialog-controller';
-export { DialogSize, DialogPosition } from './types.svelte';
+export { DIALOG_SIZES } from './types.svelte';
 export { default as Dialog } from './cmp.dialog.svelte';
 export { default as DialogButton } from './cmp.dialog-button.svelte';
 export { default as DialogCancelButton } from './cmp.dialog-cancel-button.svelte';

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

@@ -1,17 +1,6 @@
-export declare enum DialogSize {
-    Small = "small",
-    Medium = "medium",
-    Default = "default",
-    Large = "large",
-    FullHD = "fullhd",
-    Auto = "auto"
-}
-export declare enum DialogPosition {
-    Center = "center",
-    CenterTop = "center-top",
-    FullScreen = "full-screen",
-    FullHeight = "full-height"
-}
+export type DialogSize = 'small' | 'medium' | 'default' | 'large' | 'fullhd' | 'auto';
+export type DialogPosition = 'center' | 'center-top' | 'full-screen' | 'full-height';
+export declare const DIALOG_SIZES: readonly DialogSize[];
 export declare class DialogSettings {
     closeOnClickOutside: boolean;
     closeOnEsc: boolean;

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

@@ -1,25 +1,10 @@
-export var DialogSize;
-(function (DialogSize) {
-    DialogSize["Small"] = "small";
-    DialogSize["Medium"] = "medium";
-    DialogSize["Default"] = "default";
-    DialogSize["Large"] = "large";
-    DialogSize["FullHD"] = "fullhd";
-    DialogSize["Auto"] = "auto";
-})(DialogSize || (DialogSize = {}));
-export var DialogPosition;
-(function (DialogPosition) {
-    DialogPosition["Center"] = "center";
-    DialogPosition["CenterTop"] = "center-top";
-    DialogPosition["FullScreen"] = "full-screen";
-    DialogPosition["FullHeight"] = "full-height";
-})(DialogPosition || (DialogPosition = {}));
+export const DIALOG_SIZES = ['small', 'medium', 'default', 'large', 'fullhd', 'auto'];
 export class DialogSettings {
     closeOnClickOutside = $state(false);
     closeOnEsc = $state(false);
     nonCancelable = $state(false);
 }
 export class DialogContainerSettings {
-    size = $state(DialogSize.Default);
-    position = $state(DialogPosition.CenterTop);
+    size = $state('default');
+    position = $state('center-top');
 }

package/dist/ui/form-group/cmp.form-group-label.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">let { withTooltip = false, children } = $props();
+export {};
+</script>
+
+<div class="form-group-label" class:form-group-label--with-tooltip={withTooltip}>
+  {@render children()}
+</div>
+
+<style>.form-group-label {
+  --_form-group--label--font-size: var(--sc-kit--form-group--label--font-size, 0.875rem);
+  --_form-group--label--font-weight: var(--sc-kit--form-group--label--font-weight, 400);
+  --_form-group--label--color: var(--sc-kit--form-group--label--color);
+  --_form-group--label--margin-bottom: var(--sc-kit--form-group--label--margin-bottom, 0.5rem);
+  font-size: var(--_form-group--label--font-size);
+  padding: 0;
+  margin-bottom: var(--_form-group--label--margin-bottom);
+  font-weight: var(--_form-group--label--font-weight);
+  display: block;
+  color: var(--_form-group--label--color);
+}
+.form-group-label--with-tooltip {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}</style>

package/dist/ui/form-group/cmp.form-group-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    withTooltip?: boolean;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/form-group/cmp.form-group-note.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">let { children } = $props();
+export {};
+</script>
+
+<div class="form-group-note">
+  {@render children()}
+</div>
+
+<style>.form-group-note {
+  --_form-group--note--font-size: var(--sc-kit--form-group--note--font-size, 0.875rem);
+  --_form-group--note--font-weight: var(--sc-kit--form-group--note--font-weight, 300);
+  margin-top: 0.5rem;
+  color: #9ca3af;
+  font-size: var(--_form-group--note--font-size);
+  font-weight: var(--_form-group--note--font-weight);
+}</style>

package/dist/ui/form-group/cmp.form-group-note.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/form-group/cmp.form-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">let { noMargin = false, children } = $props();
+export {};
+</script>
+
+<div class="form-group" class:form-group--no-margin={noMargin}>
+  {@render children()}
+</div>
+
+<style>.form-group {
+  --_form-group--margin-bottom: var(--sc-kit--form-group--margin-bottom, 1.25rem);
+  display: block;
+  margin-bottom: var(--_form-group--margin-bottom);
+}
+.form-group--no-margin {
+  margin-bottom: 0;
+}</style>

package/dist/ui/form-group/cmp.form-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    noMargin?: boolean;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/form-group/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FormGroup } from './cmp.form-group.svelte';
+export { default as FormGroupLabel } from './cmp.form-group-label.svelte';
+export { default as FormGroupNote } from './cmp.form-group-note.svelte';

package/dist/ui/form-group/index.js

@@ -0,0 +1,3 @@
+export { default as FormGroup } from './cmp.form-group.svelte';
+export { default as FormGroupLabel } from './cmp.form-group-label.svelte';
+export { default as FormGroupNote } from './cmp.form-group-note.svelte';

package/dist/ui/html-block/cmp.html-block.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">let { children } = $props();
+export {};
+</script>
+
+<div class="html-block">
+  {@render children()}
+</div>
+
+<style>.html-block {
+  display: contents;
+  word-break: break-word;
+  font-size: 0.875em;
+  line-height: 1.4;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h1) {
+  font-size: 1.5em;
+  line-height: 1.4;
+  font-weight: 600;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h2) {
+  font-size: 1.375em;
+  line-height: 1.4;
+  font-weight: 600;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h3) {
+  font-size: 1.25em;
+  line-height: 1.4;
+  font-weight: 600;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h4) {
+  font-size: 1.125em;
+  line-height: 1.4;
+  font-weight: 500;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h5) {
+  font-size: 1.0625em;
+  line-height: 1.4;
+  font-weight: 500;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h6) {
+  font-size: 1em;
+  line-height: 1.4;
+  font-weight: 500;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(a) {
+  font-size: 1em;
+  line-height: 1.4;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+  color: light-dark(#144ab0, #5a8dec);
+}
+.html-block :global(pre) {
+  font-family: monospace;
+  white-space: pre-wrap;
+  margin: 1em 0;
+  font-size: 1em;
+  line-height: 1;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(ul) :global(> li),
+.html-block :global(ol) :global(> li) {
+  list-style: inherit;
+  margin-left: 1em;
+  position: relative;
+  font-size: 1em;
+  line-height: 1.4;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(ol) {
+  list-style-type: decimal;
+}
+.html-block :global(ol) :global(> li > ol) {
+  list-style-type: lower-alpha;
+}
+.html-block :global(table) {
+  max-width: 100%;
+}
+.html-block :global(table),
+.html-block :global(tbody),
+.html-block :global(thead),
+.html-block :global(tr),
+.html-block :global(th),
+.html-block :global(td) {
+  border-width: initial;
+  border-style: inherit;
+  border-color: inherit;
+}
+.html-block :global(ul:not([style*='list-style-type'])),
+.html-block :global(ul:not([style*='list-style-type']) > li > ul:not([style*='list-style-type'])) {
+  list-style-type: none;
+}
+.html-block :global(ul:not([style*='list-style-type']) > li:before),
+.html-block :global(ul:not([style*='list-style-type']) > li > ul:not([style*='list-style-type']) > li:before) {
+  content: "-";
+  text-indent: -1em;
+  position: absolute;
+  font-weight: bold;
+}
+.html-block :global(ul[style*='list-style-type'] > li:before),
+.html-block :global(ul > li > ul[style*='list-style-type'] > li:before) {
+  content: none;
+}</style>

package/dist/ui/html-block/cmp.html-block.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/html-block/index.d.ts

@@ -0,0 +1 @@
+export { default as HtmlBlock } from './cmp.html-block.svelte';

package/dist/ui/html-block/index.js

@@ -0,0 +1 @@
+export { default as HtmlBlock } from './cmp.html-block.svelte';

package/dist/ui/media-viewer-dialog/cmp.media-viewer-dialog.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">import { DialogCloseButton } from '../dialog';
+import { Carousel } from '../player/carousel';
+import { default as MediaViewerItem } from './media-viewer-item.svelte';
+import { untrack } from 'svelte';
+const { controller, data } = $props();
+$effect(() => untrack(() => {
+    controller.updateSettings({ closeOnEsc: true, closeOnClickOutside: true });
+    controller.updateContainerSettings({ position: 'full-screen' });
+}));
+</script>
+
+<div class="media-viewer-dialog" style:--media-viewer-dialog--background--opacity={data.backgroundOpacity}>
+  <div class="media-viewer-dialog__close">
+    <DialogCloseButton controller={controller} />
+  </div>
+
+  <div class="media-viewer-dialog__content">
+    {#if data.items.length === 1}
+      <MediaViewerItem item={data.items[0]} />
+    {:else}
+      <Carousel items={data.items} initialIndex={data.index} mode="arrows-with-counts" on={{ indexChanged: () => {} }}>
+        {#snippet children(item)}
+          <MediaViewerItem item={item} />
+        {/snippet}
+      </Carousel>
+    {/if}
+  </div>
+</div>
+
+<style>.media-viewer-dialog {
+  --_media-viewer-dialog--background--opacity: var(--media-viewer-dialog--background--opacity, 0.6);
+  --sc-kit--dialog-close-button--color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, var(--_media-viewer-dialog--background--opacity));
+  position: relative;
+  padding: 0.625rem;
+}
+.media-viewer-dialog__close {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 10;
+}
+.media-viewer-dialog__content {
+  flex: 1;
+  min-height: 0;
+}</style>

package/dist/ui/media-viewer-dialog/cmp.media-viewer-dialog.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type DialogController } from '../dialog';
+import type { MediaViewerData } from './types';
+type Props = {
+    controller: DialogController;
+    data: MediaViewerData;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/media-viewer-dialog/index.d.ts

@@ -0,0 +1,13 @@
+import { type DialogResult } from '../dialog';
+import type { MediaViewerData } from './types';
+/**
+ * Opens a full-screen media viewer dialog for images and videos.
+ * Single item renders directly; multiple items display in a carousel with arrow navigation.
+ *
+ * ### Options
+ * - `items` — array of media items to display
+ * - `index` — zero-based index of the initially visible item
+ * - `backgroundOpacity` — backdrop opacity (default `0.6`)
+ */
+export declare const openMediaViewer: (data: MediaViewerData) => Promise<DialogResult<void>>;
+export type { MediaViewerData, MediaViewerItem, MediaViewerItemType } from './types';