@streamscloud/kit 0.45.0 → 0.46.0

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

@@ -137,13 +137,6 @@ When `showImageShadow` is enabled on the cropper instance, a dark semi-transpare
 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 |
-|---|---|---|---|
-| `src` | `string` | — | Image source URL |
-| `cropper` | `ImgCropper` | — | Cropper controller instance |
-| `showControls` | `boolean` | `true` | Show built-in Apply/Cancel crop controls |
-
 ### CSS Custom Properties
 None — canvas background, shadow, and sizing are controlled by the `ImgCropper` instance.
 -->
@@ -161,6 +154,8 @@ None — canvas background, shadow, and sizing are controlled by the `ImgCropper
 .img-cropper__canvas {
   width: 100%;
   height: 100%;
+  min-width: 0;
+  min-height: 0;
   background-color: var(--_fill-color);
   visibility: hidden;
 }

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

@@ -2,6 +2,7 @@ import type { ImgCropper } from './img-cropper.svelte';
 type Props = {
     src: string;
     cropper: ImgCropper;
+    /** Show the built-in Apply/Cancel crop controls @default true */
     showControls?: boolean;
 };
 /**
@@ -41,13 +42,6 @@ type Props = {
  * 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 |
- * |---|---|---|---|
- * | `src` | `string` | — | Image source URL |
- * | `cropper` | `ImgCropper` | — | Cropper controller instance |
- * | `showControls` | `boolean` | `true` | Show built-in Apply/Cancel crop controls |
- *
  * ### CSS Custom Properties
  * None — canvas background, shadow, and sizing are controlled by the `ImgCropper` instance.
  */

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

@@ -22,7 +22,7 @@ export declare abstract class ImgCropperBaseWorker implements ImgCropperWorker {
     reset: () => Promise<void>;
     crop: (options?: {
         fillColor?: string;
-    }) => Promise<ImgCropperResult>;
+    }) => Promise<ImgCropperResult | null>;
     save: (options?: {
         fillColor?: string;
     }) => Promise<ImgCropperResult>;

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

@@ -24,7 +24,8 @@ export class ImgCropperBaseWorker {
         this._selectHandle = params.selectHandle;
         this.canvasGeometry = { aspectRatio: params.aspectRatio, width: 0, height: 0 };
         const onSelectionChange = (e) => {
-            const { width, height } = e.detail;
+            // CropperSelection emits before committing, so a change the boundary handler cancelled never reaches the selection.
+            const { width, height } = e.defaultPrevented ? this._selection : e.detail;
             this.cropBoxVisible = width > 0 && height > 0;
         };
         let handlingBoundary = false;
@@ -40,8 +41,9 @@ export class ImgCropperBaseWorker {
                 handlingBoundary = false;
             }
         };
-        this._selection.addEventListener('change', onSelectionChange);
+        // Boundary check first — onSelectionChange reads defaultPrevented, which it must not set itself.
         this._selection.addEventListener('change', onBoundaryCheck);
+        this._selection.addEventListener('change', onSelectionChange);
         this.destroy = () => {
             this._selection.removeEventListener('change', onSelectionChange);
             this._selection.removeEventListener('change', onBoundaryCheck);
@@ -75,6 +77,10 @@ export class ImgCropperBaseWorker {
         await this._fitImage();
     };
     crop = async (options) => {
+        // An empty selection exports a 0x0 canvas, and assigning its "data:," data URL leaves the cropper with an unloadable source.
+        if (this._selection.width <= 0 || this._selection.height <= 0) {
+            return null;
+        }
         const fillColor = options?.fillColor;
         const imageScale = computeImageScale(this._image.$getTransform());
         const outputSize = computeNaturalOutputSize({ displayWidth: this._selection.width, displayHeight: this._selection.height, imageScale });
@@ -107,8 +113,10 @@ export class ImgCropperBaseWorker {
         // 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;
+        // A zero-sized selection exports a 0x0 canvas, whose toDataURL is the unusable "data:," string.
+        const hasCropBox = this._selection.width > 0 && this._selection.height > 0;
+        const displayWidth = hasCropBox ? this._selection.width : this._canvas.offsetWidth;
+        const displayHeight = hasCropBox ? 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.
@@ -116,12 +124,12 @@ export class ImgCropperBaseWorker {
         // 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;
+        const needsMicroZoom = !hasCropBox;
         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);
+        const canvas = hasCropBox ? 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));

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

@@ -1,5 +1,5 @@
 import { ImgCropperBaseWorker } from './img-cropper-base-worker.svelte';
-import { fitInContainer } from './img-cropper-utils';
+import { fitInContainer, resolveCanvasGeometry } from './img-cropper-utils';
 export class ImgCropperContainWorker extends ImgCropperBaseWorker {
     _centerMode = 'contain';
     constructor(params) {
@@ -24,16 +24,28 @@ export class ImgCropperContainWorker extends ImgCropperBaseWorker {
             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 };
+            this.canvasGeometry = resolveCanvasGeometry({ aspectRatio, width, height: width / aspectRatio, maxWidth: fitted.width, maxHeight: containerHeight });
         }
         else if (visualWidth <= containerWidth && visualHeight <= containerHeight) {
-            // Free ratio, image fits naturally — no upscale
-            this.canvasGeometry = { aspectRatio, width: visualWidth, height: visualHeight };
+            const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: visualWidth,
+                height: visualHeight,
+                maxWidth: fitted.width,
+                maxHeight: containerHeight
+            });
         }
         else {
             // 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 };
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: fitted.width,
+                height: fitted.height,
+                maxWidth: fitted.width,
+                maxHeight: containerHeight
+            });
         }
     };
 }

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

@@ -1,5 +1,5 @@
 import { ImgCropperBaseWorker } from './img-cropper-base-worker.svelte';
-import { fitInContainer, handleCoverCheck } from './img-cropper-utils';
+import { fitInContainer, handleCoverCheck, resolveCanvasGeometry } from './img-cropper-utils';
 export class ImgCropperCoverWorker extends ImgCropperBaseWorker {
     _centerMode = 'cover';
     constructor(params) {
@@ -53,18 +53,37 @@ export class ImgCropperCoverWorker extends ImgCropperBaseWorker {
             // 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.canvasGeometry = resolveCanvasGeometry({ aspectRatio, width, height: width / aspectRatio, maxWidth: fitted.width, maxHeight: containerHeight });
         }
         else if (visualWidth <= 0 || visualHeight <= 0) {
-            this.canvasGeometry = { aspectRatio, width: containerWidth, height: containerHeight };
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: containerWidth,
+                height: containerHeight,
+                maxWidth: containerWidth,
+                maxHeight: containerHeight
+            });
         }
         else if (visualWidth <= containerWidth && visualHeight <= containerHeight) {
-            this.canvasGeometry = { aspectRatio, width: visualWidth, height: visualHeight };
+            const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: visualWidth,
+                height: visualHeight,
+                maxWidth: fitted.width,
+                maxHeight: containerHeight
+            });
         }
         else {
             // Fit at image AR; per-axis capping collapses an oversized image to the container AR.
             const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
-            this.canvasGeometry = { aspectRatio, width: fitted.width, height: fitted.height };
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: fitted.width,
+                height: fitted.height,
+                maxWidth: fitted.width,
+                maxHeight: containerHeight
+            });
         }
     };
 }

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

@@ -1,3 +1,4 @@
+import type { CanvasGeometry } from './img-cropper-worker.svelte';
 import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
 type Rect = {
     left: number;
@@ -34,6 +35,17 @@ export declare const fitInContainer: (params: {
     width: number;
     height: number;
 };
+/**
+ * Applies the minimum canvas size by scaling the whole rect, bounded by `maxWidth` / `maxHeight`, and rounds to whole pixels.
+ * The minimums are soft: a container smaller than them wins, and the returned canvas is smaller than `MIN_CANVAS_WIDTH` / `MIN_CANVAS_HEIGHT`.
+ */
+export declare const resolveCanvasGeometry: (params: {
+    aspectRatio: number | null;
+    width: number;
+    height: number;
+    maxWidth: number;
+    maxHeight: number;
+}) => CanvasGeometry;
 export declare const handleSelectionBoundary: (params: {
     event: Event;
     selection: CropperSelection;

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

@@ -1,5 +1,7 @@
 import { Base64Helper } from '../../../core/files/base64-helper';
 import { default as mime } from 'mime';
+const COVERAGE_TOLERANCE = 0.5;
+const SHRINK_THRESHOLD = 0.5;
 // Detect MIME type from a URL without fetching the resource.
 // Returns a MIME string for data: URLs, extension-based URLs, or null for blob: / unknown URLs.
 export const detectMimeFromUrl = (url) => {
@@ -84,35 +86,56 @@ export const handleCoverCheck = (params) => {
         right: currentRect.right + (newAABB.right - oldAABB.right),
         bottom: currentRect.bottom + (newAABB.bottom - oldAABB.bottom)
     };
-    // Strict check (tolerance 0) — any gap triggers clamping
-    if (rectCoversRect(proposedRect, canvasRect, 0)) {
+    // Sub-pixel tolerance: a stricter check re-enters on the clamped transform this handler issues itself.
+    if (rectCoversRect(proposedRect, canvasRect, COVERAGE_TOLERANCE)) {
         return;
     }
     event.preventDefault();
-    // If the proposed image is still large enough to cover the canvas, clamp
-    // translation to maintain coverage. Otherwise block the transform entirely.
     const proposedWidth = proposedRect.right - proposedRect.left;
     const proposedHeight = proposedRect.bottom - proposedRect.top;
     const canvasWidth = canvasRect.right - canvasRect.left;
     const canvasHeight = canvasRect.bottom - canvasRect.top;
+    const oldAABBWidth = oldAABB.right - oldAABB.left;
+    const oldAABBHeight = oldAABB.bottom - oldAABB.top;
+    const newAABBWidth = newAABB.right - newAABB.left;
+    const newAABBHeight = newAABB.bottom - newAABB.top;
+    const shrinksImage = newAABBWidth < oldAABBWidth - SHRINK_THRESHOLD || newAABBHeight < oldAABBHeight - SHRINK_THRESHOLD;
+    let [scaleX, skewY, skewX, scaleY] = matrix;
+    let clampedRect = proposedRect;
     if (proposedWidth < canvasWidth - 0.5 || proposedHeight < canvasHeight - 0.5) {
-        return;
+        // Rescaling anything but a shrink would turn a pan, whose proposal is the same size, into an upscale.
+        if (!shrinksImage) {
+            return;
+        }
+        const coverScale = Math.max(canvasWidth / proposedWidth, canvasHeight / proposedHeight);
+        if (!Number.isFinite(coverScale)) {
+            return;
+        }
+        scaleX *= coverScale;
+        skewY *= coverScale;
+        skewX *= coverScale;
+        scaleY *= coverScale;
+        const halfWidth = (proposedWidth * coverScale) / 2;
+        const halfHeight = (proposedHeight * coverScale) / 2;
+        const centerX = (proposedRect.left + proposedRect.right) / 2;
+        const centerY = (proposedRect.top + proposedRect.bottom) / 2;
+        clampedRect = { left: centerX - halfWidth, top: centerY - halfHeight, right: centerX + halfWidth, bottom: centerY + halfHeight };
     }
     let clampedTx = matrix[4];
     let clampedTy = matrix[5];
-    if (proposedRect.left > canvasRect.left) {
-        clampedTx -= proposedRect.left - canvasRect.left;
+    if (clampedRect.left > canvasRect.left) {
+        clampedTx -= clampedRect.left - canvasRect.left;
     }
-    else if (proposedRect.right < canvasRect.right) {
-        clampedTx += canvasRect.right - proposedRect.right;
+    else if (clampedRect.right < canvasRect.right) {
+        clampedTx += canvasRect.right - clampedRect.right;
     }
-    if (proposedRect.top > canvasRect.top) {
-        clampedTy -= proposedRect.top - canvasRect.top;
+    if (clampedRect.top > canvasRect.top) {
+        clampedTy -= clampedRect.top - canvasRect.top;
     }
-    else if (proposedRect.bottom < canvasRect.bottom) {
-        clampedTy += canvasRect.bottom - proposedRect.bottom;
+    else if (clampedRect.bottom < canvasRect.bottom) {
+        clampedTy += canvasRect.bottom - clampedRect.bottom;
     }
-    image.$setTransform(matrix[0], matrix[1], matrix[2], matrix[3], clampedTx, clampedTy);
+    image.$setTransform(scaleX, skewY, skewX, scaleY, clampedTx, clampedTy);
 };
 export const fitInContainer = (params) => {
     const { ratio, containerWidth, containerHeight } = params;
@@ -121,6 +144,24 @@ export const fitInContainer = (params) => {
     }
     return { width: containerHeight * ratio, height: containerHeight };
 };
+// Same limits cropper-canvas declares in its shadow style, where they clamp one axis at a time and break the canvas ratio.
+const MIN_CANVAS_WIDTH = 200;
+const MIN_CANVAS_HEIGHT = 100;
+/**
+ * Applies the minimum canvas size by scaling the whole rect, bounded by `maxWidth` / `maxHeight`, and rounds to whole pixels.
+ * The minimums are soft: a container smaller than them wins, and the returned canvas is smaller than `MIN_CANVAS_WIDTH` / `MIN_CANVAS_HEIGHT`.
+ */
+export const resolveCanvasGeometry = (params) => {
+    const { aspectRatio, width, height, maxWidth, maxHeight } = params;
+    if (width <= 0 || height <= 0) {
+        return { aspectRatio, width: 0, height: 0 };
+    }
+    const ratio = width / height;
+    const floorScale = Math.max(MIN_CANVAS_WIDTH / width, MIN_CANVAS_HEIGHT / height, 1);
+    const boundedWidth = Math.min(width * floorScale, maxWidth, maxHeight * ratio);
+    // A zero side reads as "unset" in the template, which falls the canvas back to its CSS size and desyncs it from this geometry.
+    return { aspectRatio, width: Math.max(1, Math.round(boundedWidth)), height: Math.max(1, Math.round(boundedWidth / ratio)) };
+};
 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

@@ -32,7 +32,7 @@ export interface ImgCropperWorker {
     reset: () => Promise<void>;
     crop: (options?: {
         fillColor?: string;
-    }) => Promise<ImgCropperResult>;
+    }) => Promise<ImgCropperResult | null>;
     save: (options?: {
         fillColor?: string;
     }) => Promise<ImgCropperResult>;

package/package.json

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