@streamscloud/kit 0.1.10 → 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>
 
@@ -76,7 +77,7 @@ $effect(() => untrack(() => {
 .image-editor-dialog__body {
   flex: 1;
   position: relative;
-  background: #DADADA;
+  background: #dadada;
   overflow: hidden;
 }
 .image-editor-dialog__cropper-wrapper {

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

@@ -9,13 +9,13 @@ import type { ImageEditorDialogOptions, ImageEditorDialogResult } from './types'
  *
  * ### Aspect ratio
  * - `number` — fixed ratio, no dropdown.
- * - `{ initial, supported }` (cover) — dropdown with supported ratios.
- * - `{ initial?, supported, allowFreeCrop? }` (contain) — dropdown with optional free crop.
- * - Omitted — free crop in contain, full canvas in cover.
+ * - `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).
  *
  * ### Result
  * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.
  * - `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,9 +9,9 @@ import { default as ImageEditorDialog } from './cmp.image-editor-dialog.svelte';
  *
  * ### Aspect ratio
  * - `number` — fixed ratio, no dropdown.
- * - `{ initial, supported }` (cover) — dropdown with supported ratios.
- * - `{ initial?, supported, allowFreeCrop? }` (contain) — dropdown with optional free crop.
- * - Omitted — free crop in contain, full canvas in cover.
+ * - `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).
  *
  * ### Result
  * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.

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

@@ -1,18 +1,19 @@
 import type { FileWithBlobUrl } from '../../../core/files';
-import type { ImgCropperContainAspectRatio, ImgCropperCoverAspectRatio } from '../img-cropper';
-export type ImageEditorDialogOptions = ImageEditorDialogCoverOptions | ImageEditorDialogContainOptions;
-type ImageEditorDialogOptionsBase = {
+export type ImageEditorDynamicAspectRatio = {
+    initial: number;
+    supported: number[];
+    allowFreeCrop?: false;
+} | {
+    initial?: number;
+    supported: number[];
+    allowFreeCrop: true;
+};
+export type ImageEditorDialogOptions = {
     url: string;
     fillColor?: string;
     showImageShadow?: boolean;
-};
-type ImageEditorDialogCoverOptions = ImageEditorDialogOptionsBase & {
-    mode?: 'cover';
-    aspectRatio?: number | ImgCropperCoverAspectRatio;
-};
-type ImageEditorDialogContainOptions = ImageEditorDialogOptionsBase & {
-    mode: 'contain';
-    aspectRatio?: number | ImgCropperContainAspectRatio;
+    mode?: 'contain' | 'cover';
+    aspectRatio?: number | ImageEditorDynamicAspectRatio;
 };
 export type CroppedFile = FileWithBlobUrl & {
     width: number;
@@ -22,4 +23,3 @@ export type ImageEditorDialogResult = {
     croppedFile: CroppedFile;
     selectedRatio: number | null;
 };
-export {};

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

@@ -38,16 +38,24 @@ const initCanvas = (canvasEl) => {
         };
         void initCropper();
     }
-    return { destroy: () => cropper.destroy() };
+    return {
+        destroy: () => {
+            cropper.destroy();
+        }
+    };
+};
+const observeResize = (el) => {
+    const observer = new ResizeObserver(() => {
+        if (cropper.ready) {
+            cropper.refit();
+        }
+    });
+    observer.observe(el);
+    return { destroy: () => observer.disconnect() };
 };
 </script>
 
-<div
-  class="img-cropper"
-  style:--img-cropper--fill-color={cropper.fillColor || undefined}
-  style:--img-cropper--ratio={cropper.effectiveCanvasRatio ?? undefined}
-  style:--img-cropper--natural-w={cropper.naturalWidth ? `${cropper.naturalWidth}px` : undefined}
-  style:--img-cropper--natural-h={cropper.naturalHeight ? `${cropper.naturalHeight}px` : undefined}>
+<div class="img-cropper" use:observeResize style:--img-cropper--fill-color={cropper.fillColor || undefined}>
   {#if cropper.loading || !cropper.ready}
     <Loading positionAbsoluteCenter={true} />
   {/if}
@@ -56,12 +64,12 @@ const initCanvas = (canvasEl) => {
     <cropper-canvas
       class="img-cropper__canvas"
       class:img-cropper__canvas--visible={cropper.ready}
-      class:img-cropper__canvas--fitted={cropper.effectiveCanvasRatio !== null && cropper.naturalWidth > 0}
       class:img-cropper__canvas--shadow={cropper.showImageShadow}
+      style:width={cropper.canvasGeometry.width ? `${cropper.canvasGeometry.width}px` : undefined}
+      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}>
@@ -79,8 +87,8 @@ const initCanvas = (canvasEl) => {
       </cropper-selection>
     </cropper-canvas>
 
-    {#if cropper.showImageShadow && cropper.ready}
-      <div class="img-cropper__shadow" class:img-cropper__shadow--full={cropper.effectiveCanvasRatio === null}></div>
+    {#if cropper.showImageShadow && cropper.ready && cropper.canvasGeometry.width > 0}
+      <div class="img-cropper__shadow" style:width="{cropper.canvasGeometry.width}px" style:height="{cropper.canvasGeometry.height}px"></div>
     {/if}
   {/if}
 
@@ -116,20 +124,18 @@ The behavior is determined by the `ImgCropper` instance passed via the `cropper`
 Aspect ratio is configured on the `ImgCropper` instance via the `aspectRatio` option:
 
 - **Fixed number** (e.g. `16/9`) — locks the crop selection to this ratio.
-- **Dynamic object** — provides a list of `supported` ratios and an `initial` value.
-  The toolbar renders a ratio dropdown when multiple options are available.
-  - In `contain` mode, `allowFreeCrop: true` adds a free-ratio option that lets
-    the user draw an unconstrained selection. After crop, the canvas dynamically
-    adopts the cropped area's proportions.
-  - In `cover` mode, `initial` is required and free crop is not available.
-- **Omitted** — defaults to free crop in `contain` mode, or fills the canvas in `cover` mode.
+- **Dynamic object** (`ImgCropperDynamicAspectRatio`) — provides a list of `supported`
+  ratios and an optional `initial` value. The toolbar renders a ratio dropdown when
+  multiple options are available. `allowFreeCrop: true` adds a free-ratio option
+  that lets the user draw an unconstrained selection.
+- **Omitted** — defaults to free crop (no ratio constraint on the selection).
 
 #### Shadow overlay
 
 When `showImageShadow` is enabled on the cropper instance, a dark semi-transparent
-overlay (`box-shadow: 0 0 0 9999px`) extends beyond the canvas bounds so the full
-image remains visible outside the crop area. In free-ratio mode (no fixed aspect
-ratio), the shadow covers the entire container instead.
+`box-shadow` is applied directly to the `<cropper-canvas>` element, extending beyond
+the canvas bounds so the surrounding area is dimmed. The parent element should set
+`overflow: hidden` to clip the shadow at its boundaries.
 
 ### Props
 | Prop | Type | Default | Description |
@@ -144,10 +150,6 @@ None — canvas background, shadow, and sizing are controlled by the `ImgCropper
 
 <style>.img-cropper {
   --_fill-color: var(--img-cropper--fill-color);
-  --_ratio: var(--img-cropper--ratio);
-  --_natural-w: var(--img-cropper--natural-w, 100cqw);
-  --_natural-h: var(--img-cropper--natural-h, 100cqh);
-  container-type: size;
   position: relative;
   width: 100%;
   height: 100%;
@@ -162,11 +164,6 @@ None — canvas background, shadow, and sizing are controlled by the `ImgCropper
   background-color: var(--_fill-color);
   visibility: hidden;
 }
-.img-cropper__canvas--fitted {
-  width: min(100cqw, 100cqh * var(--_ratio), max(var(--_natural-w), var(--_natural-h) * var(--_ratio)));
-  height: auto;
-  aspect-ratio: var(--_ratio);
-}
 .img-cropper__canvas--visible {
   visibility: visible;
 }
@@ -178,17 +175,10 @@ None — canvas background, shadow, and sizing are controlled by the `ImgCropper
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: min(100cqw, 100cqh * var(--_ratio), max(var(--_natural-w), var(--_natural-h) * var(--_ratio)));
-  aspect-ratio: var(--_ratio);
   box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8);
   pointer-events: none;
   z-index: 2;
 }
-.img-cropper__shadow--full {
-  width: 100cqw;
-  height: 100cqh;
-  aspect-ratio: auto;
-}
 .img-cropper__controls {
   position: absolute;
   bottom: 0;

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

@@ -28,20 +28,18 @@ type Props = {
  * Aspect ratio is configured on the `ImgCropper` instance via the `aspectRatio` option:
  *
  * - **Fixed number** (e.g. `16/9`) — locks the crop selection to this ratio.
- * - **Dynamic object** — provides a list of `supported` ratios and an `initial` value.
- * The toolbar renders a ratio dropdown when multiple options are available.
- * - In `contain` mode, `allowFreeCrop: true` adds a free-ratio option that lets
- *   the user draw an unconstrained selection. After crop, the canvas dynamically
- *   adopts the cropped area's proportions.
- * - In `cover` mode, `initial` is required and free crop is not available.
- * - **Omitted** — defaults to free crop in `contain` mode, or fills the canvas in `cover` mode.
+ * - **Dynamic object** (`ImgCropperDynamicAspectRatio`) — provides a list of `supported`
+ * ratios and an optional `initial` value. The toolbar renders a ratio dropdown when
+ * multiple options are available. `allowFreeCrop: true` adds a free-ratio option
+ * that lets the user draw an unconstrained selection.
+ * - **Omitted** — defaults to free crop (no ratio constraint on the selection).
  *
  * #### Shadow overlay
  *
  * When `showImageShadow` is enabled on the cropper instance, a dark semi-transparent
- * overlay (`box-shadow: 0 0 0 9999px`) extends beyond the canvas bounds so the full
- * image remains visible outside the crop area. In free-ratio mode (no fixed aspect
- * ratio), the shadow covers the entire container instead.
+ * `box-shadow` is applied directly to the `<cropper-canvas>` element, extending beyond
+ * the canvas bounds so the surrounding area is dimmed. The parent element should set
+ * `overflow: hidden` to clip the shadow at its boundaries.
  *
  * ### Props
  * | Prop | Type | Default | Description |

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

@@ -0,0 +1,40 @@
+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;
+    dragMode: DragMode;
+    canvasGeometry: CanvasGeometry;
+    destroy: () => void;
+    protected _image: CropperImage;
+    protected _selection: CropperSelection;
+    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';
+    constructor(params: ImgCropperWorkerParams);
+    ready: () => Promise<void>;
+    rotate: () => Promise<void>;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    reset: () => Promise<void>;
+    crop: (options?: {
+        fillColor?: string;
+    }) => Promise<ImgCropperResult>;
+    save: (options?: {
+        fillColor?: string;
+    }) => 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

@@ -0,0 +1,175 @@
+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');
+    canvasGeometry = $state.raw({ aspectRatio: null, width: 0, height: 0 });
+    destroy;
+    _image;
+    _selection;
+    _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;
+        this._selectHandle = params.selectHandle;
+        this.canvasGeometry = { aspectRatio: params.aspectRatio, width: 0, height: 0 };
+        const onSelectionChange = (e) => {
+            const { width, height } = e.detail;
+            this.cropBoxVisible = width > 0 && height > 0;
+        };
+        const onBoundaryCheck = (e) => {
+            handleSelectionBoundary({ event: e, selection: this._selection, canvas: this._canvas });
+        };
+        this._selection.addEventListener('change', onSelectionChange);
+        this._selection.addEventListener('change', onBoundaryCheck);
+        this.destroy = () => {
+            this._selection.removeEventListener('change', onSelectionChange);
+            this._selection.removeEventListener('change', onBoundaryCheck);
+        };
+        this._applyMoveMode();
+    }
+    ready = async () => {
+        this._image.src = this._originalSrc;
+        await this._fitImage();
+        this._selection.$clear();
+    };
+    rotate = async () => {
+        [this._visualWidth, this._visualHeight] = [this._visualHeight, this._visualWidth];
+        this._computeCanvasSize();
+        await tick();
+        this._wrapTransformOp(() => {
+            this._image.$rotate('90deg');
+            this._image.$center(this._centerMode);
+        });
+    };
+    zoomIn = () => {
+        this._image.$zoom(0.1);
+    };
+    zoomOut = () => {
+        this._image.$zoom(-0.1);
+    };
+    reset = async () => {
+        this._selection.$clear();
+        this._applyMoveMode();
+        this._image.src = this._originalSrc;
+        await this._fitImage();
+    };
+    crop = async (options) => {
+        const fillColor = options?.fillColor;
+        const imageScale = computeImageScale(this._image.$getTransform());
+        const outputSize = computeNaturalOutputSize({ displayWidth: this._selection.width, displayHeight: this._selection.height, imageScale });
+        const canvas = await this._selection.$toCanvas({
+            width: outputSize.width,
+            height: outputSize.height,
+            beforeDraw: (ctx, cvs) => {
+                if (fillColor && !ColorHelper.isTransparent(fillColor)) {
+                    ctx.fillStyle = fillColor;
+                    ctx.fillRect(0, 0, cvs.width, cvs.height);
+                }
+            }
+        });
+        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, mimeType: format.mime };
+    };
+    save = async (options) => {
+        const fillColor = options?.fillColor;
+        const beforeDraw = (ctx, cvs) => {
+            if (fillColor && !ColorHelper.isTransparent(fillColor)) {
+                ctx.fillStyle = fillColor;
+                ctx.fillRect(0, 0, cvs.width, cvs.height);
+            }
+        };
+        // Compute output dimensions before micro-zoom so the result matches
+        // the source pixel density, not the display size.
+        const imageScale = computeImageScale(this._image.$getTransform());
+        const displayWidth = this.cropBoxVisible ? this._selection.width : this._canvas.offsetWidth;
+        const displayHeight = this.cropBoxVisible ? this._selection.height : this._canvas.offsetHeight;
+        const outputSize = computeNaturalOutputSize({ displayWidth, displayHeight, imageScale });
+        const toCanvasOptions = { width: outputSize.width, height: outputSize.height, beforeDraw };
+        // CropperJS $toCanvas exports only the visible portion of the canvas.
+        // Sub-pixel rounding can leave a 1px transparent edge when the image
+        // tightly fits the canvas. A micro-zoom nudges the image slightly past
+        // the boundary so the export captures the full area; the zoom is
+        // reversed immediately after.
+        const needsMicroZoom = !this.cropBoxVisible;
+        if (needsMicroZoom) {
+            // Forward zoom increases coverage — safe without suspending cover check
+            this._image.$zoom(0.003);
+        }
+        const canvas = this.cropBoxVisible ? await this._selection.$toCanvas(toCanvasOptions) : await this._canvas.$toCanvas(toCanvasOptions);
+        if (needsMicroZoom) {
+            // Reverse zoom shrinks image — must suspend cover check to avoid clamping
+            this._wrapTransformOp(() => this._image.$zoom(-0.003));
+        }
+        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();
+        this._applyMoveMode();
+    };
+    refit = async () => {
+        this._selection.$clear();
+        this._applyMoveMode();
+        this._computeCanvasSize();
+        await tick();
+        this._wrapTransformOp(() => {
+            this._image.$resetTransform();
+            this._image.$center(this._centerMode);
+        });
+    };
+    enableCropMode = () => {
+        this._image.translatable = false;
+        if (this._selectHandle) {
+            this._selectHandle.setAttribute('action', 'select');
+        }
+        this.dragMode = 'crop';
+    };
+    _wrapTransformOp = (fn) => {
+        fn();
+    };
+    _applyMoveMode = () => {
+        this._image.translatable = true;
+        if (this._selectHandle) {
+            this._selectHandle.setAttribute('action', 'move');
+        }
+        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;
+        this._visualHeight = img.naturalHeight;
+        this._computeCanvasSize();
+        await tick();
+        this._wrapTransformOp(() => {
+            this._image.$resetTransform();
+            this._image.$center(this._centerMode);
+        });
+    };
+}

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

@@ -1,40 +1,7 @@
-import type { DragMode, ImgCropperWorker, ImgCropperWorkerParams } from './img-cropper-worker.svelte';
-export declare class ImgCropperContainWorker implements ImgCropperWorker {
-    cropBoxVisible: boolean;
-    dragMode: DragMode;
-    naturalWidth: number;
-    naturalHeight: number;
-    canvasRatio: number | null;
-    destroy: () => void;
-    private _image;
-    private _selection;
-    private _canvas;
-    private _selectHandle;
-    private _originalSrc;
+import { ImgCropperBaseWorker } from './img-cropper-base-worker.svelte';
+import type { ImgCropperWorkerParams } from './img-cropper-worker.svelte';
+export declare class ImgCropperContainWorker extends ImgCropperBaseWorker {
+    protected readonly _centerMode: "contain";
     constructor(params: ImgCropperWorkerParams);
-    ready: () => Promise<void>;
-    rotate: () => Promise<void>;
-    zoomIn: () => void;
-    zoomOut: () => void;
-    reset: () => Promise<void>;
-    crop: (options?: {
-        fillColor?: string;
-        freeRatio?: boolean;
-    }) => Promise<{
-        dataUrl: string;
-        width: number;
-        height: number;
-    }>;
-    save: (options?: {
-        fillColor?: string;
-    }) => Promise<{
-        dataUrl: string;
-        width: number;
-        height: number;
-    }>;
-    clearSelection: () => void;
-    enableCropMode: () => void;
-    private _applyMoveMode;
-    private _fitImage;
-    private _centerForCurrentRotation;
+    protected _computeCanvasSize: () => void;
 }