@streamscloud/kit 0.1.11 → 0.1.12

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

@@ -7,11 +7,12 @@ 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 () => {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/package.json

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