compote-ui 0.16.0 → 0.18.0

package/dist/components/image-crop-dialog/types.d.ts

@@ -4,8 +4,8 @@ export interface ImageCropDialogProps {
     open: boolean;
     /** Source image (data URL, blob URL, or regular URL) */
     imageSrc: string;
-    /** Called with the processed data URL on crop or skip */
-    onConfirm: (processedDataUrl: string) => void;
+    /** Called with the processed Blob on crop or skip */
+    onConfirm: (blob: Blob) => void;
     /** Called when the user cancels (Cancel button or clicking outside/Escape) */
     onCancel: () => void;
     /** Dialog title */

package/dist/components/image-cropper/types.d.ts

@@ -6,6 +6,6 @@ export interface ImageCropperProps extends UseImageCropperProps {
     alt?: string;
     getCroppedImage?: ReturnType<UseImageCropperReturn>['getCroppedImage'];
     getCropData?: ReturnType<UseImageCropperReturn>['getCropData'];
-    /** Bindable: returns a processed (cropped + resized + converted) data URL in one call */
-    getProcessedImage?: (opts?: ProcessImageOptions) => Promise<string>;
+    /** Bindable: returns a processed (cropped + resized + converted) Blob in one call */
+    getProcessedImage?: (opts?: ProcessImageOptions) => Promise<Blob>;
 }

package/dist/utils/image-processing.d.ts

@@ -22,6 +22,6 @@ export declare function fileToDataUrl(file: File): Promise<string>;
  * Crop a full-resolution source image using natural pixel coordinates, then resize and convert.
  * Use this instead of getCroppedImage() from Ark UI which outputs at CSS/display resolution.
  */
-export declare function cropImage(src: string, crop: CropRegion, opts?: ProcessImageOptions): Promise<string>;
-/** Resize and convert an image without cropping, returns a base64 data URL */
-export declare function processImage(src: string, opts?: ProcessImageOptions): Promise<string>;
+export declare function cropImage(src: string, crop: CropRegion, opts?: ProcessImageOptions): Promise<Blob>;
+/** Resize and convert an image without cropping, returns a Blob */
+export declare function processImage(src: string, opts?: ProcessImageOptions): Promise<Blob>;

package/dist/utils/image-processing.js

@@ -8,6 +8,16 @@ const defaults = {
     quality: 0.85,
     format: 'image/webp'
 };
+function canvasToBlob(canvas, format, quality) {
+    return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+            if (blob)
+                resolve(blob);
+            else
+                reject(new Error('canvas.toBlob failed'));
+        }, format, quality);
+    });
+}
 /** Load an image element from a src URL (data URL, blob URL, or regular URL) */
 export function loadImage(src) {
     return new Promise((resolve, reject) => {
@@ -45,9 +55,9 @@ export async function cropImage(src, crop, opts) {
     canvas.height = height;
     const ctx = canvas.getContext('2d');
     ctx.drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height);
-    return canvas.toDataURL(format, quality);
+    return canvasToBlob(canvas, format, quality);
 }
-/** Resize and convert an image without cropping, returns a base64 data URL */
+/** Resize and convert an image without cropping, returns a Blob */
 export async function processImage(src, opts) {
     const { maxWidth, maxHeight, quality, format } = { ...defaults, ...opts };
     const img = await loadImage(src);
@@ -62,5 +72,5 @@ export async function processImage(src, opts) {
     canvas.height = height;
     const ctx = canvas.getContext('2d');
     ctx.drawImage(img, 0, 0, width, height);
-    return canvas.toDataURL(format, quality);
+    return canvasToBlob(canvas, format, quality);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.16.0",
+	"version": "0.18.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",