@streamscloud/kit 0.1.10 → 0.1.11

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

@@ -76,7 +76,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,9 +9,9 @@ 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.
+ * - `ImgCropperDynamicAspectRatio` — 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/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.
+ * - `ImgCropperDynamicAspectRatio` — 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,11 @@
 import type { FileWithBlobUrl } from '../../../core/files';
-import type { ImgCropperContainAspectRatio, ImgCropperCoverAspectRatio } from '../img-cropper';
-export type ImageEditorDialogOptions = ImageEditorDialogCoverOptions | ImageEditorDialogContainOptions;
-type ImageEditorDialogOptionsBase = {
+import type { CropperMode, ImgCropperDynamicAspectRatio } from '../img-cropper';
+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?: CropperMode;
+    aspectRatio?: number | ImgCropperDynamicAspectRatio;
 };
 export type CroppedFile = FileWithBlobUrl & {
     width: number;
@@ -22,4 +15,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,8 +64,9 @@ 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>
@@ -79,8 +88,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 +125,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 +151,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 +165,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 +176,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,43 @@
+import type { CanvasGeometry, DragMode, 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 _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<{
+        dataUrl: string;
+        width: number;
+        height: number;
+    }>;
+    save: (options?: {
+        fillColor?: string;
+    }) => Promise<{
+        dataUrl: string;
+        width: number;
+        height: number;
+    }>;
+    clearSelection: () => void;
+    refit: () => Promise<void>;
+    enableCropMode: () => void;
+    protected _wrapTransformOp: (fn: () => void) => void;
+    protected _applyMoveMode: () => void;
+    protected _fitImage: () => Promise<void>;
+    protected abstract _computeCanvasSize(): void;
+}

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

@@ -0,0 +1,163 @@
+import { ColorHelper } from '../../../core/utils';
+import { computeImageScale, computeNaturalOutputSize, handleSelectionBoundary } from './img-cropper-utils';
+import { tick } from 'svelte';
+export class ImgCropperBaseWorker {
+    cropBoxVisible = $state(false);
+    dragMode = $state('move');
+    canvasGeometry = $state.raw({ aspectRatio: null, width: 0, height: 0 });
+    destroy;
+    _image;
+    _selection;
+    _canvas;
+    _selectHandle;
+    _originalSrc;
+    _visualWidth = 0;
+    _visualHeight = 0;
+    constructor(params) {
+        this._originalSrc = params.originalSrc;
+        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 () => {
+        const prevW = this._visualWidth;
+        this._visualWidth = this._visualHeight;
+        this._visualHeight = prevW;
+        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 dataUrl = canvas.toDataURL('image/png', 0.9);
+        this._applyMoveMode();
+        this._image.src = dataUrl;
+        await this._fitImage();
+        this._selection.$clear();
+        return { dataUrl, width: canvas.width, height: canvas.height };
+    };
+    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 dataUrl = canvas.toDataURL('image/png', 0.9);
+        return { dataUrl, width: canvas.width, height: canvas.height };
+    };
+    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;
+    };
+    _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;
 }

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

@@ -1,159 +1,39 @@
-import { ColorHelper } from '../../../core/utils';
-import { computeImageScale, computeNaturalOutputSize, handleSelectionBoundary } from './img-cropper-utils';
-import { tick } from 'svelte';
-export class ImgCropperContainWorker {
-    cropBoxVisible = $state(false);
-    dragMode = $state('move');
-    naturalWidth = $state(0);
-    naturalHeight = $state(0);
-    canvasRatio = $state(null);
-    destroy;
-    _image;
-    _selection;
-    _canvas;
-    _selectHandle;
-    _originalSrc;
+import { ImgCropperBaseWorker } from './img-cropper-base-worker.svelte';
+import { fitInContainer } from './img-cropper-utils';
+export class ImgCropperContainWorker extends ImgCropperBaseWorker {
+    _centerMode = 'contain';
     constructor(params) {
-        this._originalSrc = params.originalSrc;
-        this._image = params.image;
-        this._selection = params.selection;
-        this._canvas = params.canvas;
-        this._selectHandle = params.selectHandle;
-        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();
+        super(params);
     }
-    ready = async () => {
-        this._image.src = this._originalSrc;
-        await this._fitImage();
-        this._selection.$clear();
-    };
-    rotate = async () => {
-        if (this.canvasRatio !== null) {
-            this.canvasRatio = 1 / this.canvasRatio;
-            const prevW = this.naturalWidth;
-            this.naturalWidth = this.naturalHeight;
-            this.naturalHeight = prevW;
-            await tick();
+    _computeCanvasSize = () => {
+        const container = this._canvas.parentElement;
+        if (!container) {
+            return;
         }
-        this._image.$rotate('90deg');
-        this._centerForCurrentRotation();
-    };
-    zoomIn = () => {
-        this._image.$zoom(0.1);
-    };
-    zoomOut = () => {
-        this._image.$zoom(-0.1);
-    };
-    reset = async () => {
-        this._selection.$clear();
-        this._applyMoveMode();
-        this.canvasRatio = null;
-        this._image.src = this._originalSrc;
-        await this._fitImage();
-    };
-    crop = async (options) => {
-        const fillColor = options?.fillColor;
-        const selectionRatio = this._selection.width / this._selection.height;
-        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 dataUrl = canvas.toDataURL('image/png', 0.9);
-        this._applyMoveMode();
-        if (options?.freeRatio) {
-            this.canvasRatio = selectionRatio;
+        const containerWidth = container.clientWidth;
+        const containerHeight = container.clientHeight;
+        const visualWidth = this._visualWidth;
+        const visualHeight = this._visualHeight;
+        const aspectRatio = this.canvasGeometry.aspectRatio;
+        if (containerWidth <= 0 || containerHeight <= 0 || visualWidth <= 0 || visualHeight <= 0) {
+            this.canvasGeometry = { aspectRatio, width: 0, height: 0 };
+            return;
         }
-        this._image.src = dataUrl;
-        await this._fitImage();
-        this._selection.$clear();
-        return { dataUrl, width: canvas.width, height: canvas.height };
-    };
-    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);
-            }
-        };
-        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 };
-        const canvas = this.cropBoxVisible ? await this._selection.$toCanvas(toCanvasOptions) : await this._canvas.$toCanvas(toCanvasOptions);
-        const dataUrl = canvas.toDataURL('image/png', 0.9);
-        return { dataUrl, width: canvas.width, height: canvas.height };
-    };
-    clearSelection = () => {
-        this._selection.$clear();
-        this._applyMoveMode();
-    };
-    enableCropMode = () => {
-        this._image.translatable = false;
-        if (this._selectHandle) {
-            this._selectHandle.setAttribute('action', 'select');
-        }
-        this.dragMode = 'crop';
-    };
-    _applyMoveMode = () => {
-        this._image.translatable = true;
-        if (this._selectHandle) {
-            this._selectHandle.setAttribute('action', 'move');
-        }
-        this.dragMode = 'move';
-        this.cropBoxVisible = false;
-    };
-    _fitImage = async () => {
-        const img = await this._image.$ready();
-        this.naturalWidth = img.naturalWidth;
-        this.naturalHeight = img.naturalHeight;
-        await tick();
-        this._image.$resetTransform();
-        this._centerForCurrentRotation();
-    };
-    // Choose $center() (natural size) or $center('contain') (scale-to-fit) based on
-    // whether the image's visual bounds fit inside the canvas at the current rotation.
-    // When canvasRatio is active, naturalWidth/Height are already swapped to match
-    // the visual orientation. Otherwise, derive visual dims from the rotation angle.
-    _centerForCurrentRotation = () => {
-        let visualW = this.naturalWidth;
-        let visualH = this.naturalHeight;
-        if (this.canvasRatio === null) {
-            const matrix = this._image.$getTransform();
-            const isSwapped = Math.abs(Math.sin(Math.atan2(matrix[1], matrix[0]))) > 0.5;
-            if (isSwapped) {
-                visualW = this.naturalHeight;
-                visualH = this.naturalWidth;
-            }
+        if (aspectRatio !== null) {
+            // Fixed ratio: fit in container, cap at natural image bounds
+            const fitted = fitInContainer({ ratio: aspectRatio, containerWidth, containerHeight });
+            const maxWidth = Math.max(visualWidth, visualHeight * aspectRatio);
+            const width = Math.min(fitted.width, maxWidth);
+            this.canvasGeometry = { aspectRatio, width, height: width / aspectRatio };
         }
-        const canvasRect = this._canvas.getBoundingClientRect();
-        const fitsNaturally = visualW <= canvasRect.width && visualH <= canvasRect.height;
-        if (fitsNaturally) {
-            this._image.$center();
+        else if (visualWidth <= containerWidth && visualHeight <= containerHeight) {
+            // Free ratio, image fits naturally — no upscale
+            this.canvasGeometry = { aspectRatio, width: visualWidth, height: visualHeight };
         }
         else {
-            this._image.$center('contain');
+            // Free ratio, image too large — scale down to fit
+            const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
+            this.canvasGeometry = { aspectRatio, width: fitted.width, height: fitted.height };
         }
     };
 }

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

@@ -1,40 +1,7 @@
-import type { DragMode, ImgCropperWorker, ImgCropperWorkerParams } from './img-cropper-worker.svelte';
-export declare class ImgCropperCoverWorker 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;
-    private _withCoverCheckSuspended;
+import { ImgCropperBaseWorker } from './img-cropper-base-worker.svelte';
+import type { ImgCropperWorkerParams } from './img-cropper-worker.svelte';
+export declare class ImgCropperCoverWorker extends ImgCropperBaseWorker {
+    protected readonly _centerMode: "cover";
     constructor(params: ImgCropperWorkerParams);
-    ready: () => Promise<void>;
-    rotate: () => 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;
+    protected _computeCanvasSize: () => void;
 }

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

@@ -1,32 +1,9 @@
-import { ColorHelper } from '../../../core/utils';
-import { computeImageScale, computeNaturalOutputSize, handleCoverCheck, handleSelectionBoundary } from './img-cropper-utils';
-import { tick } from 'svelte';
-export class ImgCropperCoverWorker {
-    cropBoxVisible = $state(false);
-    dragMode = $state('move');
-    naturalWidth = $state(0);
-    naturalHeight = $state(0);
-    canvasRatio = $state(null);
-    destroy;
-    _image;
-    _selection;
-    _canvas;
-    _selectHandle;
-    _originalSrc;
-    _withCoverCheckSuspended;
+import { ImgCropperBaseWorker } from './img-cropper-base-worker.svelte';
+import { fitInContainer, handleCoverCheck } from './img-cropper-utils';
+export class ImgCropperCoverWorker extends ImgCropperBaseWorker {
+    _centerMode = 'cover';
     constructor(params) {
-        this._originalSrc = params.originalSrc;
-        this._image = params.image;
-        this._selection = params.selection;
-        this._canvas = params.canvas;
-        this._selectHandle = params.selectHandle;
-        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 });
-        };
+        super(params);
         // Dedup: handleCoverCheck calls $setTransform(clamped) which synchronously
         // fires another transform event with a matrix that differs by ~0.0001px
         // due to floating point. Without this guard CropperJS re-fires the same
@@ -41,123 +18,48 @@ export class ImgCropperCoverWorker {
             handleCoverCheck({ event: e, image: this._image, canvas: this._canvas });
             prevMatrix = null;
         };
-        this._selection.addEventListener('change', onSelectionChange);
-        this._selection.addEventListener('change', onBoundaryCheck);
         this._image.addEventListener('transform', onCoverCheck);
-        this._withCoverCheckSuspended = (fn) => {
+        this._wrapTransformOp = (fn) => {
             this._image.removeEventListener('transform', onCoverCheck);
-            fn();
-            this._image.addEventListener('transform', onCoverCheck);
+            try {
+                fn();
+            }
+            finally {
+                this._image.addEventListener('transform', onCoverCheck);
+            }
         };
+        const baseDestroy = this.destroy;
         this.destroy = () => {
-            this._selection.removeEventListener('change', onSelectionChange);
-            this._selection.removeEventListener('change', onBoundaryCheck);
+            baseDestroy();
             this._image.removeEventListener('transform', onCoverCheck);
         };
-        this._applyMoveMode();
     }
-    ready = async () => {
-        this._image.src = this._originalSrc;
-        await this._fitImage();
-        this._selection.$clear();
-    };
-    rotate = () => {
-        this._withCoverCheckSuspended(() => {
-            this._image.$rotate('90deg');
-            this._image.$center('cover');
-        });
-    };
-    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 dataUrl = canvas.toDataURL('image/png', 0.9);
-        this._applyMoveMode();
-        this._image.src = dataUrl;
-        await this._fitImage();
-        this._selection.$clear();
-        return { dataUrl, width: canvas.width, height: canvas.height };
-    };
-    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 natural output dimensions before any micro-zoom so the
-        // output 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.
-        // In cover mode the image exactly covers the canvas, so sub-pixel rounding
-        // can leave a 1px transparent edge. A micro-zoom nudges the image slightly
-        // past the canvas boundary so the export captures the full area; the zoom
-        // is reversed immediately after.
-        const needsCoverZoom = !this.cropBoxVisible;
-        if (needsCoverZoom) {
-            this._image.$zoom(0.003);
+    _computeCanvasSize = () => {
+        const container = this._canvas.parentElement;
+        if (!container) {
+            return;
         }
-        const canvas = this.cropBoxVisible ? await this._selection.$toCanvas(toCanvasOptions) : await this._canvas.$toCanvas(toCanvasOptions);
-        if (needsCoverZoom) {
-            this._withCoverCheckSuspended(() => this._image.$zoom(-0.003));
+        const containerWidth = container.clientWidth;
+        const containerHeight = container.clientHeight;
+        const visualWidth = this._visualWidth;
+        const visualHeight = this._visualHeight;
+        const aspectRatio = this.canvasGeometry.aspectRatio;
+        if (containerWidth <= 0 || containerHeight <= 0) {
+            this.canvasGeometry = { aspectRatio, width: 0, height: 0 };
+            return;
         }
-        const dataUrl = canvas.toDataURL('image/png', 0.9);
-        return { dataUrl, width: canvas.width, height: canvas.height };
-    };
-    clearSelection = () => {
-        this._selection.$clear();
-        this._applyMoveMode();
-    };
-    enableCropMode = () => {
-        this._image.translatable = false;
-        if (this._selectHandle) {
-            this._selectHandle.setAttribute('action', 'select');
+        if (aspectRatio !== null) {
+            const fitted = fitInContainer({ ratio: aspectRatio, containerWidth, containerHeight });
+            // Cap so the image can cover the canvas without upscaling
+            const maxWidth = visualWidth > 0 && visualHeight > 0 ? Math.min(visualWidth, visualHeight * aspectRatio) : fitted.width;
+            const width = Math.min(fitted.width, maxWidth);
+            this.canvasGeometry = { aspectRatio, width, height: width / aspectRatio };
         }
-        this.dragMode = 'crop';
-    };
-    _applyMoveMode = () => {
-        this._image.translatable = true;
-        if (this._selectHandle) {
-            this._selectHandle.setAttribute('action', 'move');
+        else {
+            // Cap each dimension at visual size to avoid upscaling small images
+            const width = visualWidth > 0 ? Math.min(containerWidth, visualWidth) : containerWidth;
+            const height = visualHeight > 0 ? Math.min(containerHeight, visualHeight) : containerHeight;
+            this.canvasGeometry = { aspectRatio, width, height };
         }
-        this.dragMode = 'move';
-        this.cropBoxVisible = false;
-    };
-    _fitImage = async () => {
-        const img = await this._image.$ready();
-        this.naturalWidth = img.naturalWidth;
-        this.naturalHeight = img.naturalHeight;
-        await tick();
-        this._withCoverCheckSuspended(() => {
-            this._image.$resetTransform();
-            this._image.$center('cover');
-        });
     };
 }

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

@@ -1,5 +1,5 @@
 import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
-export type Rect = {
+type Rect = {
     left: number;
     top: number;
     right: number;
@@ -25,8 +25,17 @@ export declare const handleCoverCheck: (params: {
     image: CropperImage;
     canvas: CropperCanvas;
 }) => void;
+export declare const fitInContainer: (params: {
+    ratio: number;
+    containerWidth: number;
+    containerHeight: number;
+}) => {
+    width: number;
+    height: number;
+};
 export declare const handleSelectionBoundary: (params: {
     event: Event;
     selection: CropperSelection;
     canvas: CropperCanvas;
 }) => void;
+export {};

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

@@ -91,6 +91,13 @@ export const handleCoverCheck = (params) => {
     }
     image.$setTransform(matrix[0], matrix[1], matrix[2], matrix[3], clampedTx, clampedTy);
 };
+export const fitInContainer = (params) => {
+    const { ratio, containerWidth, containerHeight } = params;
+    if (ratio > containerWidth / containerHeight) {
+        return { width: containerWidth, height: containerWidth / ratio };
+    }
+    return { width: containerHeight * ratio, height: containerHeight };
+};
 export const handleSelectionBoundary = (params) => {
     const { event, selection, canvas } = params;
     const { x, y, width, height } = event.detail;

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

@@ -1,18 +1,22 @@
 import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
 export type DragMode = 'move' | 'crop';
+export type CanvasGeometry = {
+    aspectRatio: number | null;
+    width: number;
+    height: number;
+};
 export type ImgCropperWorkerParams = {
     originalSrc: string;
     image: CropperImage;
     selection: CropperSelection;
     canvas: CropperCanvas;
     selectHandle: HTMLElement | null;
+    aspectRatio: number | null;
 };
 export interface ImgCropperWorker {
     cropBoxVisible: boolean;
     dragMode: DragMode;
-    naturalWidth: number;
-    naturalHeight: number;
-    canvasRatio: number | null;
+    canvasGeometry: CanvasGeometry;
     destroy: () => void;
     ready: () => Promise<void>;
     rotate: () => void | Promise<void>;
@@ -21,7 +25,6 @@ export interface ImgCropperWorker {
     reset: () => Promise<void>;
     crop: (options?: {
         fillColor?: string;
-        freeRatio?: boolean;
     }) => Promise<{
         dataUrl: string;
         width: number;
@@ -36,4 +39,5 @@ export interface ImgCropperWorker {
     }>;
     clearSelection: () => void;
     enableCropMode: () => void;
+    refit: () => void | Promise<void>;
 }

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

@@ -1,5 +1,6 @@
-import type { DragMode } from './img-cropper-worker.svelte';
+import type { CanvasGeometry, DragMode } 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 };
@@ -7,11 +8,7 @@ export type ImgCropperRatioOption = {
     label: string;
     value: number | null;
 };
-export type ImgCropperCoverAspectRatio = {
-    initial: number;
-    supported: number[];
-};
-export type ImgCropperContainAspectRatio = {
+export type ImgCropperDynamicAspectRatio = {
     initial: number;
     supported: number[];
     allowFreeCrop?: false;
@@ -30,30 +27,26 @@ type ImgCropperOptionsBase = {
     fillColor?: string;
     showImageShadow?: boolean;
 };
-export type ImgCropperOptions = (ImgCropperOptionsBase & {
-    mode: 'cover';
-    aspectRatio?: number | ImgCropperCoverAspectRatio;
-}) | (ImgCropperOptionsBase & {
-    mode: 'contain';
-    aspectRatio?: number | ImgCropperContainAspectRatio;
-});
+export type ImgCropperOptions = ImgCropperOptionsBase & {
+    mode: CropperMode;
+    aspectRatio?: number | ImgCropperDynamicAspectRatio;
+};
 export declare class ImgCropper {
     loading: boolean;
     ready: boolean;
     fillColor: string;
-    aspectRatio: number | null;
     readonly mode: CropperMode;
     readonly corsMode: CorsMode;
     readonly ratioOptions: ImgCropperRatioOption[] | null;
     readonly showImageShadow: boolean;
     private _worker;
     private _originalSrc;
+    private _defaultGeometry;
     constructor(options: ImgCropperOptions);
     get showFillColor(): boolean;
     get isTransparentFill(): boolean;
-    get effectiveCanvasRatio(): number | null;
-    get naturalWidth(): number;
-    get naturalHeight(): number;
+    get canvasGeometry(): CanvasGeometry;
+    get aspectRatio(): number | null;
     get cropBoxVisible(): boolean;
     get dragMode(): DragMode;
     init: (params: {
@@ -78,4 +71,5 @@ export declare class ImgCropper {
     clearSelection: () => void;
     enableCropMode: () => void;
     enableMoveMode: () => void;
+    refit: () => void;
 }

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

@@ -6,13 +6,13 @@ 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';
@@ -26,23 +26,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 +43,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 +51,11 @@ export class ImgCropper {
     get isTransparentFill() {
         return ColorHelper.isTransparent(this.fillColor);
     }
-    get effectiveCanvasRatio() {
-        return this.aspectRatio ?? this._worker?.canvasRatio ?? null;
-    }
-    get naturalWidth() {
-        return this._worker?.naturalWidth ?? 0;
+    get canvasGeometry() {
+        return this._worker?.canvasGeometry ?? this._defaultGeometry;
     }
-    get naturalHeight() {
-        return this._worker?.naturalHeight ?? 0;
+    get aspectRatio() {
+        return this.canvasGeometry.aspectRatio;
     }
     get cropBoxVisible() {
         return this._worker?.cropBoxVisible ?? false;
@@ -89,7 +78,8 @@ export class ImgCropper {
                 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 +111,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 +123,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 +150,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 CorsMode, type CropperMode, type DragMode, ImgCropper, type ImgCropperDynamicAspectRatio, type ImgCropperOptions, type ImgCropperRatioOption, type ImgCropperSaveResult } from './img-cropper.svelte';

package/package.json

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