@streamscloud/kit 0.84.0 → 0.85.0

package/dist/core/files/file-helper.d.ts

@@ -28,10 +28,11 @@ export declare class FileHelper {
      * Checks a file's real type against its declared one. The bytes identify images (PNG, JPEG, WebP, GIF, AVIF, HEIC, SVG),
      * MP4, audio (WAV, MP3, M4A, AAC, FLAC), PDF, DOCX, XLSX, ZIP and fonts (WOFF2, WOFF, TTF, OTF); other formats are typed
      * as declared. An equivalent extension (`.jpeg` for `jpg`) and any member of the declared ISO media container family
-     * (`.m4a` holding an `isom` MP4, `.heif` for HEIC) is a match, as is any ZIP archive named `.zip`. When the name lacks
-     * the right extension, it is appended and the original name stays intact: `photo.jpg` holding a PNG → `photo.jpg.png`.
-     * Binary formats read only the head; SVG is looked for only when something is declared, and a markup-looking file is
-     * then read whole to confirm an SVG root.
+     * (`.m4a` holding an `isom` MP4, `.heif` for HEIC) is a match, as is a declared ZIP, PNG or font whose header carries its
+     * format's signature (any ZIP, APNG, Apple `true` TrueType, WOFF / WOFF2 of any flavor). When the name lacks the right
+     * extension, it is appended and the original name stays intact: `photo.jpg` holding a PNG → `photo.jpg.png`. Binary
+     * formats read only the head; SVG is looked for only when something is declared, and a markup-looking file is then read
+     * whole to confirm an SVG root.
      */
     static checkType(file: File): Promise<FileTypeCheck>;
     static truncateFileName(fileName: string, maxNameLength: number | null | undefined): string;

package/dist/core/files/file-helper.js

@@ -23,17 +23,19 @@ const CONTENT_DETECTABLE_EXTENSIONS = new Set([
     'otf'
 ]);
 const PREFERRED_EXTENSIONS = { 'video/quicktime': 'mov', 'audio/mpeg': 'mp3', 'audio/aac': 'aac', 'audio/flac': 'flac' };
+const PREFERRED_TYPES = { flac: 'audio/flac' };
+const typeOf = (extension) => PREFERRED_TYPES[extension] ?? mime.getType(extension);
 const SVG_TYPE = { mime: 'image/svg+xml', extension: 'svg' };
 const ISO_MEDIA_CONTAINERS = [new Set(['mp4', 'm4v', 'm4a', 'm4b', 'mov', '3gp', '3g2', 'f4v']), new Set(['heic', 'heif'])];
-const CONTENT_DETECTABLE_MIMES = new Set([...CONTENT_DETECTABLE_EXTENSIONS, 'svg', ...ISO_MEDIA_CONTAINERS.flatMap((family) => [...family])].map((extension) => mime.getType(extension)));
+const CONTENT_DETECTABLE_MIMES = new Set([...CONTENT_DETECTABLE_EXTENSIONS, 'svg', ...ISO_MEDIA_CONTAINERS.flatMap((family) => [...family])].map(typeOf));
 const sameFormat = (extensionA, extensionB) => {
-    const type = mime.getType(extensionA);
-    return type !== null && type === mime.getType(extensionB);
+    const type = typeOf(extensionA);
+    return type !== null && type === typeOf(extensionB);
 };
 const sameContainer = (extensionA, extensionB) => ISO_MEDIA_CONTAINERS.some((family) => family.has(extensionA) && family.has(extensionB));
 const declaredType = (file) => {
     const extension = FileHelper.getFileExtension(file.name).toLowerCase();
-    const fromName = extension ? mime.getType(extension) : null;
+    const fromName = extension ? typeOf(extension) : null;
     if (fromName) {
         return { mime: fromName, extension, fromName: true };
     }
@@ -47,9 +49,28 @@ const startsWithMarkup = async (blob) => {
     return head.trimStart().startsWith('<');
 };
 const isSvgDocument = async (blob) => (await startsWithMarkup(blob)) && HtmlHelper.sanitizeSvg(await blob.text()) !== null;
-const isZipArchive = async (blob) => (await blob.slice(0, 4).text()) === 'PK\u0003\u0004';
+const DECLARED_SIGNATURES = {
+    zip: [[0x50, 0x4b, 0x03, 0x04]],
+    png: [[0x89, 0x50, 0x4e, 0x47]],
+    ttf: [
+        [0x00, 0x01, 0x00, 0x00],
+        [0x74, 0x72, 0x75, 0x65]
+    ],
+    otf: [[0x4f, 0x54, 0x54, 0x4f]],
+    woff: [[0x77, 0x4f, 0x46, 0x46]],
+    woff2: [[0x77, 0x4f, 0x46, 0x32]]
+};
+const SIGNATURE_BYTES = 4;
+const hasDeclaredSignature = async (blob, extension) => {
+    const signatures = DECLARED_SIGNATURES[extension];
+    if (!signatures) {
+        return false;
+    }
+    const head = new Uint8Array(await blob.slice(0, SIGNATURE_BYTES).arrayBuffer());
+    return signatures.some((signature) => signature.every((byte, index) => head[index] === byte));
+};
 const contentType = async (blob, declared) => {
-    if (declared?.extension === 'zip' && (await isZipArchive(blob))) {
+    if (declared && (await hasDeclaredSignature(blob, declared.extension))) {
         return declared;
     }
     const { fileTypeFromBlob } = await import('file-type');
@@ -57,7 +78,7 @@ const contentType = async (blob, declared) => {
     if (detected && declared && sameContainer(detected.ext, declared.extension)) {
         return declared;
     }
-    const detectedMime = detected && CONTENT_DETECTABLE_EXTENSIONS.has(detected.ext) ? mime.getType(detected.ext) : null;
+    const detectedMime = detected && CONTENT_DETECTABLE_EXTENSIONS.has(detected.ext) ? typeOf(detected.ext) : null;
     if (detected && detectedMime) {
         return { mime: detectedMime, extension: detected.ext };
     }
@@ -83,10 +104,11 @@ export class FileHelper {
      * Checks a file's real type against its declared one. The bytes identify images (PNG, JPEG, WebP, GIF, AVIF, HEIC, SVG),
      * MP4, audio (WAV, MP3, M4A, AAC, FLAC), PDF, DOCX, XLSX, ZIP and fonts (WOFF2, WOFF, TTF, OTF); other formats are typed
      * as declared. An equivalent extension (`.jpeg` for `jpg`) and any member of the declared ISO media container family
-     * (`.m4a` holding an `isom` MP4, `.heif` for HEIC) is a match, as is any ZIP archive named `.zip`. When the name lacks
-     * the right extension, it is appended and the original name stays intact: `photo.jpg` holding a PNG → `photo.jpg.png`.
-     * Binary formats read only the head; SVG is looked for only when something is declared, and a markup-looking file is
-     * then read whole to confirm an SVG root.
+     * (`.m4a` holding an `isom` MP4, `.heif` for HEIC) is a match, as is a declared ZIP, PNG or font whose header carries its
+     * format's signature (any ZIP, APNG, Apple `true` TrueType, WOFF / WOFF2 of any flavor). When the name lacks the right
+     * extension, it is appended and the original name stays intact: `photo.jpg` holding a PNG → `photo.jpg.png`. Binary
+     * formats read only the head; SVG is looked for only when something is declared, and a markup-looking file is then read
+     * whole to confirm an SVG root.
      */
     static async checkType(file) {
         const declared = declaredType(file);
@@ -101,7 +123,7 @@ export class FileHelper {
         if (!declared) {
             return { status: 'unknown' };
         }
-        if (CONTENT_DETECTABLE_MIMES.has(mime.getType(declared.extension))) {
+        if (CONTENT_DETECTABLE_MIMES.has(typeOf(declared.extension))) {
             return { status: 'contradicted', declaredExtension: declared.extension };
         }
         return { status: 'unverifiable', file: retyped(file, declared.fromName ? file.name : appended(declared.extension), declared.mime) };

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

@@ -9,17 +9,22 @@ const loc = new ImageEditorDialogLocalization();
 const cropper = untrack(() => new ImgCropper({
     mode: data.mode ?? 'cover',
     aspectRatio: data.aspectRatio,
-    fillColor: data.fillColor
+    fillColor: data.fillColor,
+    tools: data.tools
 }));
 const url = $derived(data.url);
 const save = async () => {
     try {
         const result = await cropper.save();
+        // Closed mid-save: destroy() already ran, and a file made now would leak its blob URL.
+        if (!cropper.ready) {
+            return;
+        }
         if (!result) {
             Toastr.error(loc.saveError);
             return;
         }
-        const croppedFile = Object.assign(FileWithBlobDataHelper.fromBase64(result.dataUrl), {
+        const croppedFile = Object.assign(FileWithBlobDataHelper.fromBlob(result.blob), {
             width: result.width,
             height: result.height
         });
@@ -54,8 +59,8 @@ $effect(() => untrack(() => {
     {/snippet}
     {#snippet footer()}
       <div class="image-editor-dialog__footer">
-        <DialogCancelButton size="sm" on={{ click: cancel }}>{loc.cancel}</DialogCancelButton>
-        <DialogButton size="sm" on={{ click: save }}>{loc.save}</DialogButton>
+        <DialogCancelButton size="sm" disabled={cropper.processing} on={{ click: cancel }}>{loc.cancel}</DialogCancelButton>
+        <DialogButton size="sm" disabled={cropper.processing || !cropper.ready} on={{ click: save }}>{loc.save}</DialogButton>
       </div>
     {/snippet}
   </Dialog>

package/dist/ui/cropper/image-editor-dialog/crop-and-resize.d.ts

@@ -1,11 +1,11 @@
 import type { FileWithBlobUrl } from '../../../core/files';
-import type { ImageEditorDynamicAspectRatio } from './types';
+import type { ImageEditorDynamicAspectRatio, ImageEditorTool } from './types';
 export type CropAndResizeOptions = {
     /** Fixed aspect ratio, or dynamic selector, or omit to follow the picture's own. */
     aspectRatio?: number | ImageEditorDynamicAspectRatio;
     /** @default 'cover' */
     mode?: 'contain' | 'cover';
-    /** Fill color in `contain` mode (transparent by default). */
+    /** Fill color for whatever the picture doesn't cover — `contain` gaps, free position, its own transparency (transparent by default). */
     fillColor?: string;
     /**
      * After cropping, downscale to fit these limits. `max1` / `max2` are not tied to width /
@@ -16,6 +16,8 @@ export type CropAndResizeOptions = {
         max1: number;
         max2: number;
     } | false;
+    /** Actions that rework the picture itself (e.g. background removal), one toolbar button each. */
+    tools?: ImageEditorTool[];
 };
 /**
  * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the result before returning.

package/dist/ui/cropper/image-editor-dialog/crop-and-resize.js

@@ -1,5 +1,5 @@
 import { FileWithBlobDataHelper, resizeBlob } from '../../../core/files';
-import { openImageEditorDialog } from './index';
+import { openImageEditorDialog } from './open-image-editor-dialog';
 const DEFAULT_RESIZE_LIMITS = { max1: 1600, max2: 1000 };
 /**
  * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the result before returning.
@@ -12,7 +12,8 @@ export const cropAndResizeImage = async (file, options = {}) => {
             url: sourceUrl,
             aspectRatio: options.aspectRatio,
             mode: options.mode,
-            fillColor: options.fillColor
+            fillColor: options.fillColor,
+            tools: options.tools
         });
         if (result.wasCanceled) {
             return null;
@@ -26,6 +27,7 @@ export const cropAndResizeImage = async (file, options = {}) => {
         if (resizedBlob === cropped) {
             return cropped;
         }
+        FileWithBlobDataHelper.dispose(cropped.blobUrl);
         return FileWithBlobDataHelper.fromBlob(resizedBlob, { id: cropped.id });
     }
     finally {

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

@@ -1,24 +1,4 @@
-import { type DialogResult } from '../../dialog';
-import type { ImageEditorDialogOptions, ImageEditorDialogResult } from './types';
-/**
- * Opens a full-screen image editor dialog: drag the picture inside a fixed frame, scale it from the corners, zoom,
- * rotate, align, and reset.
- *
- * ### Modes
- * - **`cover`** (default) — the picture always fills the frame; nothing outside the frame is exported.
- * - **`contain`** — the picture is fitted inside the frame with an optional fill color for the remaining space.
- *
- * ### Aspect ratio
- * - `number` — fixed ratio, no popover.
- * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true` adds the picture's own
- *   ratio as a choice; `initial` is optional when it's enabled.
- * - Omitted — the frame follows the picture's own aspect ratio.
- *
- * ### Result
- * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.
- * - `selectedRatio` — the active aspect ratio at save time (`null` when following the picture's own).
- */
-export declare const openImageEditorDialog: (options: ImageEditorDialogOptions) => Promise<DialogResult<ImageEditorDialogResult>>;
-export type { CroppedFile, ImageEditorDialogOptions, ImageEditorDialogResult, ImageEditorDynamicAspectRatio } from './types';
+export { openImageEditorDialog } from './open-image-editor-dialog';
+export type { CroppedFile, ImageEditorDialogOptions, ImageEditorDialogResult, ImageEditorDynamicAspectRatio, ImageEditorTool } from './types';
 export { cropAndResizeImage } from './crop-and-resize';
 export type { CropAndResizeOptions } from './crop-and-resize';

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

@@ -1,27 +1,2 @@
-import { Dialogs } from '../../dialog';
-import { default as ImageEditorDialog } from './cmp.image-editor-dialog.svelte';
-/**
- * Opens a full-screen image editor dialog: drag the picture inside a fixed frame, scale it from the corners, zoom,
- * rotate, align, and reset.
- *
- * ### Modes
- * - **`cover`** (default) — the picture always fills the frame; nothing outside the frame is exported.
- * - **`contain`** — the picture is fitted inside the frame with an optional fill color for the remaining space.
- *
- * ### Aspect ratio
- * - `number` — fixed ratio, no popover.
- * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true` adds the picture's own
- *   ratio as a choice; `initial` is optional when it's enabled.
- * - Omitted — the frame follows the picture's own aspect ratio.
- *
- * ### Result
- * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.
- * - `selectedRatio` — the active aspect ratio at save time (`null` when following the picture's own).
- */
-export const openImageEditorDialog = async (options) => {
-    return await Dialogs.open({
-        view: ImageEditorDialog,
-        data: options
-    });
-};
+export { openImageEditorDialog } from './open-image-editor-dialog';
 export { cropAndResizeImage } from './crop-and-resize';

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

@@ -0,0 +1,25 @@
+import { type DialogResult } from '../../dialog';
+import type { ImageEditorDialogOptions, ImageEditorDialogResult } from './types';
+/**
+ * Opens a full-screen image editor dialog: drag the picture inside a fixed frame, scale it from the corners, zoom,
+ * rotate, align, and reset.
+ *
+ * ### Modes
+ * - **`cover`** (default) — the picture always fills the frame; nothing outside the frame is exported.
+ * - **`contain`** — the picture is fitted inside the frame with an optional fill color for the remaining space.
+ *
+ * ### Aspect ratio
+ * - `number` — fixed ratio, no popover.
+ * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true` adds the picture's own
+ *   ratio as a choice; `initial` is optional when it's enabled.
+ * - Omitted — the frame follows the picture's own aspect ratio.
+ *
+ * ### Tools
+ * - `tools` — one toolbar button per tool; `run` gets the picture as shown — cropped and rotated, at its natural
+ *   resolution — and its result replaces it (`null` leaves it as it is). Reset returns to the source.
+ *
+ * ### Result
+ * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.
+ * - `selectedRatio` — the active aspect ratio at save time (`null` when following the picture's own).
+ */
+export declare const openImageEditorDialog: (options: ImageEditorDialogOptions) => Promise<DialogResult<ImageEditorDialogResult>>;

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

@@ -0,0 +1,30 @@
+import { Dialogs } from '../../dialog';
+import { default as ImageEditorDialog } from './cmp.image-editor-dialog.svelte';
+/**
+ * Opens a full-screen image editor dialog: drag the picture inside a fixed frame, scale it from the corners, zoom,
+ * rotate, align, and reset.
+ *
+ * ### Modes
+ * - **`cover`** (default) — the picture always fills the frame; nothing outside the frame is exported.
+ * - **`contain`** — the picture is fitted inside the frame with an optional fill color for the remaining space.
+ *
+ * ### Aspect ratio
+ * - `number` — fixed ratio, no popover.
+ * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true` adds the picture's own
+ *   ratio as a choice; `initial` is optional when it's enabled.
+ * - Omitted — the frame follows the picture's own aspect ratio.
+ *
+ * ### Tools
+ * - `tools` — one toolbar button per tool; `run` gets the picture as shown — cropped and rotated, at its natural
+ *   resolution — and its result replaces it (`null` leaves it as it is). Reset returns to the source.
+ *
+ * ### Result
+ * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.
+ * - `selectedRatio` — the active aspect ratio at save time (`null` when following the picture's own).
+ */
+export const openImageEditorDialog = async (options) => {
+    return await Dialogs.open({
+        view: ImageEditorDialog,
+        data: options
+    });
+};

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

@@ -8,12 +8,27 @@ export type ImageEditorDynamicAspectRatio = {
     supported: number[];
     allowFreeCrop: true;
 };
+export type ImageEditorTool = {
+    id: string;
+    /** The button's tooltip and accessible name. */
+    label: string;
+    /** Raw SVG markup of the button's glyph. */
+    icon: string;
+    /**
+     * Turns the picture as shown — cropped and rotated, at its natural resolution — into a new one that replaces it;
+     * `null` leaves the picture as it is (the tool reports its own failure). Reset returns to the source.
+     */
+    run: (source: Blob) => Promise<Blob | null>;
+};
 export type ImageEditorDialogOptions = {
     /** The picture to edit — same-origin, a `blob:` / `data:` URL, or a server that sends CORS headers; anything else fails to load. */
     url: string;
     fillColor?: string;
+    /** @default 'cover' */
     mode?: 'contain' | 'cover';
     aspectRatio?: number | ImageEditorDynamicAspectRatio;
+    /** Actions that rework the picture itself (e.g. background removal), one toolbar button each. */
+    tools?: ImageEditorTool[];
 };
 export type CroppedFile = FileWithBlobUrl & {
     width: number;

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

@@ -8,8 +8,8 @@ import { Tooltip } from '../../tooltip';
 import { ImgCropperToolbarLocalization } from './img-cropper-toolbar-localization';
 import IconArrowMove from '@fluentui/svg-icons/icons/arrow_move_20_regular.svg?raw';
 import IconArrowReset from '@fluentui/svg-icons/icons/arrow_reset_20_regular.svg?raw';
-import IconRotateRight from '@fluentui/svg-icons/icons/arrow_rotate_clockwise_20_regular.svg?raw';
-import IconRotateLeft from '@fluentui/svg-icons/icons/arrow_rotate_counterclockwise_20_regular.svg?raw';
+import IconArrowRotateClockwise from '@fluentui/svg-icons/icons/arrow_rotate_clockwise_20_regular.svg?raw';
+import IconArrowRotateCounterclockwise from '@fluentui/svg-icons/icons/arrow_rotate_counterclockwise_20_regular.svg?raw';
 import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_20_regular.svg?raw';
 import IconCrop from '@fluentui/svg-icons/icons/crop_20_regular.svg?raw';
 import IconGridDots from '@fluentui/svg-icons/icons/grid_dots_20_regular.svg?raw';
@@ -111,14 +111,23 @@ const ratioLabel = $derived(cropper.ratioLabel ?? loc.original);
     </div>
   </Popover>
   <Tooltip text={loc.rotateLeft}>
-    <ToolbarIconButton icon={IconRotateLeft} aria-label={loc.rotateLeft} disabled={!cropper.ready} on={{ click: () => cropper.rotate(-1) }} />
+    <ToolbarIconButton icon={IconArrowRotateCounterclockwise} aria-label={loc.rotateLeft} disabled={!cropper.ready} on={{ click: () => cropper.rotate(-1) }} />
   </Tooltip>
   <Tooltip text={loc.rotateRight}>
-    <ToolbarIconButton icon={IconRotateRight} aria-label={loc.rotateRight} disabled={!cropper.ready} on={{ click: () => cropper.rotate(1) }} />
+    <ToolbarIconButton icon={IconArrowRotateClockwise} aria-label={loc.rotateRight} disabled={!cropper.ready} on={{ click: () => cropper.rotate(1) }} />
   </Tooltip>
 
   <Divider orientation="vertical" />
 
+  {#if cropper.tools.length}
+    {#each cropper.tools as tool (tool.id)}
+      <Tooltip text={tool.label}>
+        <ToolbarIconButton icon={tool.icon} aria-label={tool.label} disabled={!cropper.ready} on={{ click: () => void cropper.runTool(tool) }} />
+      </Tooltip>
+    {/each}
+    <Divider orientation="vertical" />
+  {/if}
+
   <Tooltip text={loc.reset}>
     <ToolbarIconButton icon={IconArrowReset} aria-label={loc.reset} disabled={!cropper.ready} on={{ click: cropper.reset }} />
   </Tooltip>
@@ -135,7 +144,7 @@ const ratioLabel = $derived(cropper.ratioLabel ?? loc.original);
 
 <!--
 @component
-Floating toolbar for `ImgCropperView` — aspect ratio, zoom, free position, alignment, rotate, reset, and the frame's
+Floating toolbar for `ImgCropperView` — aspect ratio, zoom, free position, alignment, rotate, the cropper's tools, reset, and the frame's
 fill color (in `contain` mode, whenever free position is on, or when the picture has its own transparency). Pass it
 to `ImgCropperView`'s `toolbar` snippet prop.
 

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

@@ -5,7 +5,7 @@ type Props = {
     children?: Snippet;
 };
 /**
- * Floating toolbar for `ImgCropperView` — aspect ratio, zoom, free position, alignment, rotate, reset, and the frame's
+ * Floating toolbar for `ImgCropperView` — aspect ratio, zoom, free position, alignment, rotate, the cropper's tools, reset, and the frame's
  * fill color (in `contain` mode, whenever free position is on, or when the picture has its own transparency). Pass it
  * to `ImgCropperView`'s `toolbar` snippet prop.
  *

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

@@ -194,7 +194,7 @@ const pictureStyle = (box) => {
 };
 </script>
 
-<div class="img-cropper">
+<div class="img-cropper" inert={cropper.processing}>
   <div
     class="img-cropper__stage"
     class:img-cropper__stage--dragging={drag !== null && !cropper.cropMode}
@@ -216,11 +216,11 @@ const pictureStyle = (box) => {
       {@const box = cropper.box}
       {@const frame = cropper.frame}
       <div class="img-cropper__picture-box img-cropper__picture-box--outside" style={placement({ x: frame.x + box.x, y: frame.y + box.y, w: box.w, h: box.h })}>
-        <img class="img-cropper__picture" src={cropper.source} alt="" draggable="false" style={pictureStyle(box)} />
+        <img class="img-cropper__picture" src={cropper.currentUrl} alt="" draggable="false" style={pictureStyle(box)} />
       </div>
       <div class="img-cropper__frame" style={placement(frame)} style:--_--img-cropper--fill-color={cropper.fillColor || undefined}>
         <div class="img-cropper__picture-box" style={placement(box)}>
-          <img class="img-cropper__picture" src={cropper.source} alt="" draggable="false" style={pictureStyle(box)} />
+          <img class="img-cropper__picture" src={cropper.currentUrl} alt="" draggable="false" style={pictureStyle(box)} />
         </div>
       </div>
       <div class="img-cropper__outline" style={placement(frame)}></div>
@@ -269,6 +269,9 @@ const pictureStyle = (box) => {
         </div>
       {/if}
     {/if}
+    {#if cropper.processing}
+      <Spinner position="absolute-center" blocking timeout={600} />
+    {/if}
   </div>
   {#if toolbar}
     <div class="img-cropper__toolbar" inert={drag !== null}>
@@ -279,17 +282,16 @@ const pictureStyle = (box) => {
 
 <!--
 @component
-Fixed-frame picture cropper — the frame stays put on the stage; drag pans the picture, the corner handles (shown while
-the pointer is over the picture, always on touch) scale it about the opposite corner, and the wheel zooms about the
-pointer. The part of the picture spilling past the frame stays visible but dimmed. Pass a `toolbar` snippet to mount
-`ImgCropperToolbar` underneath the picture area. `src` and `cropper` are read once, on mount — to change either, remount
-the view (e.g. `{#key}`) with a new `ImgCropper`.
+Fixed-frame picture cropper: drag pans the picture, corner handles scale it, the wheel zooms, and the part past the frame
+stays dimmed; a `toolbar` snippet mounts `ImgCropperToolbar` below. `src` and `cropper` are read once on mount — remount
+the view (e.g. `{#key}`) with a new `ImgCropper` to change either.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--img-cropper--handle-color` | Corner handle fill | `#ffffff` |
 | `--sc-kit--img-cropper--outline-color` | Frame outline color | `#4a4a4f` |
+| `--sc-kit--img-cropper--background` | Stage background around the frame | `#1e1e20` |
 -->
 
 <style>.img-cropper {
@@ -367,10 +369,10 @@ the view (e.g. `{#key}`) with a new `ImgCropper`.
 }
 .img-cropper__frame {
   --_img-cropper--fill-color: var(--_--img-cropper--fill-color, transparent);
-  --_check: rgb(255 255 255 / 10%);
+  --_img-cropper--check-color: rgb(255 255 255 / 10%);
   position: absolute;
   overflow: hidden;
-  background-image: linear-gradient(var(--_img-cropper--fill-color), var(--_img-cropper--fill-color)), linear-gradient(45deg, var(--_check) 25%, transparent 25%, transparent 75%, var(--_check) 75%), linear-gradient(45deg, var(--_check) 25%, transparent 25%, transparent 75%, var(--_check) 75%);
+  background-image: linear-gradient(var(--_img-cropper--fill-color), var(--_img-cropper--fill-color)), linear-gradient(45deg, var(--_img-cropper--check-color) 25%, transparent 25%, transparent 75%, var(--_img-cropper--check-color) 75%), linear-gradient(45deg, var(--_img-cropper--check-color) 25%, transparent 25%, transparent 75%, var(--_img-cropper--check-color) 75%);
   background-size: 100% 100%, 1rem 1rem, 1rem 1rem;
   background-position: 0 0, 0 0, 0.5rem 0.5rem;
 }

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

@@ -7,17 +7,16 @@ type Props = {
     toolbar?: Snippet;
 };
 /**
- * Fixed-frame picture cropper — the frame stays put on the stage; drag pans the picture, the corner handles (shown while
- * the pointer is over the picture, always on touch) scale it about the opposite corner, and the wheel zooms about the
- * pointer. The part of the picture spilling past the frame stays visible but dimmed. Pass a `toolbar` snippet to mount
- * `ImgCropperToolbar` underneath the picture area. `src` and `cropper` are read once, on mount — to change either, remount
- * the view (e.g. `{#key}`) with a new `ImgCropper`.
+ * Fixed-frame picture cropper: drag pans the picture, corner handles scale it, the wheel zooms, and the part past the frame
+ * stays dimmed; a `toolbar` snippet mounts `ImgCropperToolbar` below. `src` and `cropper` are read once on mount — remount
+ * the view (e.g. `{#key}`) with a new `ImgCropper` to change either.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--img-cropper--handle-color` | Corner handle fill | `#ffffff` |
  * | `--sc-kit--img-cropper--outline-color` | Frame outline color | `#4a4a4f` |
+ * | `--sc-kit--img-cropper--background` | Stage background around the frame | `#1e1e20` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -18,6 +18,18 @@ export type ImgCropperMargin = {
     block?: number;
     inline?: number;
 };
+export type ImgCropperTool = {
+    id: string;
+    /** The button's tooltip and accessible name. */
+    label: string;
+    /** Raw SVG markup of the button's glyph. */
+    icon: string;
+    /**
+     * Turns the picture as shown — cropped and rotated, at its natural resolution — into a new one that replaces it;
+     * `null` leaves the picture as it is (the tool reports its own failure). `reset()` returns to the source.
+     */
+    run: (source: Blob) => Promise<Blob | null>;
+};
 export type ImgCropperOptions = {
     /** The placement rule the picture starts with and `reset()` returns to; Fill / Fit in the toolbar switch it. */
     mode: CropperMode;
@@ -25,25 +37,24 @@ export type ImgCropperOptions = {
     fillColor?: string;
     /** Breathing room between the frame and the stage's own edges. @default `{ block: 64, inline: 64 }` */
     margin?: ImgCropperMargin;
+    /** Actions that rework the picture itself (e.g. background removal), one toolbar button each. */
+    tools?: ImgCropperTool[];
 };
 export type ImgCropperSaveResult = {
-    dataUrl: string;
+    blob: Blob;
     width: number;
     height: number;
-    mimeType: string;
 };
 export declare class ImgCropper {
     readonly ratioOptions: ImgCropperRatioOption[] | null;
     readonly margin: Required<ImgCropperMargin>;
-    loading: boolean;
+    readonly tools: ImgCropperTool[];
     failed: boolean;
     mode: CropperMode;
     fillColor: string;
-    natural: Size | null;
     rotation: 0 | 90 | 180 | 270;
     /** The part of the source (turned by `rotation`) the picture is cut to, in natural pixels; `null` for the whole source. */
     crop: Rect | null;
-    source: string;
     free: boolean;
     cropMode: boolean;
     selection: Rect | null;
@@ -52,11 +63,15 @@ export declare class ImgCropper {
     box: Rect | null;
     private readonly _initialMode;
     private readonly _initialAspectRatio;
-    private _image;
-    private _blobUrl;
-    private _sourceMime;
-    private _sourceHasAlpha;
+    private _processing;
+    private _current;
+    private _original;
+    private _alive;
     constructor(options: ImgCropperOptions);
+    /** A tool or `save()` is working on the picture; the view blocks the cropper until it's done. */
+    get processing(): boolean;
+    /** The current picture's URL — the source, or the latest tool result; empty until one is loaded. */
+    get currentUrl(): string;
     get showFillColor(): boolean;
     get hasSelection(): boolean;
     /** Whether the picture has transparent pixels — the source's own, or empty space a crop took in past the source's edges. */
@@ -64,8 +79,8 @@ export declare class ImgCropper {
     /** The current aspect ratio's label — a preset's own, or `1.78:1` for a custom one; `null` for Original. */
     get ratioLabel(): string | null;
     get isTransparentFill(): boolean;
-    /** The picture's natural size — the crop's, or the whole source's turned by `rotation`. */
-    get shownNatural(): Size | null;
+    /** The picture's size in its own pixels, turned by `rotation` — the crop's, or the whole picture's without one. */
+    get croppedSize(): Size | null;
     /** The picture's own aspect ratio (post-rotation) — the shape `box` must always keep. */
     get imageAspect(): number | null;
     /** The frame's own aspect ratio — the chosen ratio, or the picture's own when none is chosen. */
@@ -78,11 +93,17 @@ export declare class ImgCropper {
     /** The mode whose rest state the picture is in right now — filling the frame for `cover`, fitting it for `contain`; `null` once zoomed or free. */
     get restingMode(): CropperMode | null;
     get ready(): boolean;
-    private get _fullNatural();
+    private get _turnedSize();
     private get _zoomBase();
     init: (src: string) => Promise<void>;
     destroy: () => void;
     setStage: (size: Size) => void;
+    /**
+     * Runs `tool` on the picture as shown — cropped and rotated, at its natural resolution — and makes the result the new
+     * picture, so tools chain. Crop mode is left and a pending selection dropped, not applied. The zoom and position carry
+     * over when the result keeps the sent size; otherwise the picture is laid out afresh.
+     */
+    runTool: (tool: ImgCropperTool) => Promise<void>;
     layout: () => void;
     changeAspectRatio: (ratio: number | null) => void;
     setFree: (free: boolean) => void;
@@ -124,5 +145,14 @@ export declare class ImgCropper {
         center: Point;
         size: Size;
     } | null;
+    private _render;
+    /** Draws the picture — cropped and turned — into `target`, clipped to it; `false` when there's no picture to place. */
+    private _drawPicture;
+    /** The picture cropped and turned, at its own resolution capped like `save()`'s; its blob as is when there's nothing to apply. */
+    private _croppedImage;
+    private _isCurrent;
+    private _showToolResult;
+    private _releaseToolResult;
+    private _refit;
     private _update;
 }

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

@@ -1,7 +1,6 @@
-import { FileWithBlobDataHelper } from '../../../core/files';
 import { ColorHelper, Utils } from '../../../core/utils';
 import { alignBox, boxAtZoom, boxTurnedWithFrame, clampBox, containBox, containZoom, coverBox, fitFrame, MAX_FRAME_ZOOM, MIN_FREE_ZOOM, moveBox, scaleBox, selectionFromDrag, shiftSelection, zoomOf } from './frame-geometry';
-import { detectAlpha, detectMimeFromUrl, loadImage } from './img-cropper-utils';
+import { Picture } from './picture';
 const ZOOM_STOPS = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, MAX_FRAME_ZOOM];
 const DEFAULT_MARGIN = { block: 64, inline: 64 };
 const MIN_SELECTION_SIZE = 40;
@@ -14,6 +13,17 @@ const assertAspectRatio = (ratio) => {
         throw new Error(`ImgCropper: aspect ratio must be a positive finite number, got ${ratio}`);
     }
 };
+const scaleRect = (rect, factor) => ({ x: rect.x * factor, y: rect.y * factor, w: rect.w * factor, h: rect.h * factor });
+// Derived from the long side: from the short one, a portrait crop's rounding drifts past a pixel and the zoom snaps back.
+const sameShape = (size, reference) => reference.w >= reference.h ? Math.abs(size.h - (size.w * reference.h) / reference.w) <= 1 : Math.abs(size.w - (size.h * reference.w) / reference.h) <= 1;
+const SAVE_JPEG_QUALITY = 0.92;
+const TOOL_INPUT_JPEG_QUALITY = 0.95;
+/** JPEG for a JPEG source that needs no alpha, PNG otherwise; `null` when the browser can't encode the canvas. */
+const encodeCanvas = (canvas, options) => {
+    const mimeType = options.sourceMime === 'image/jpeg' && !options.needsAlpha ? 'image/jpeg' : 'image/png';
+    // A canvas past the browser's size limit encodes to `null` instead of throwing.
+    return new Promise((resolve) => canvas.toBlob(resolve, mimeType, options.jpegQuality));
+};
 const ROTATIONS = [0, 90, 180, 270];
 const toRotation = (degrees) => {
     const normalized = ((degrees % 360) + 360) % 360;
@@ -26,15 +36,13 @@ const toRatioLabel = (ratio) => {
 export class ImgCropper {
     ratioOptions;
     margin;
-    loading = $state(false);
+    tools;
     failed = $state(false);
     mode = $state('cover');
     fillColor = $state('');
-    natural = $state.raw(null);
     rotation = $state(0);
     /** The part of the source (turned by `rotation`) the picture is cut to, in natural pixels; `null` for the whole source. */
     crop = $state.raw(null);
-    source = $state('');
     free = $state(false);
     cropMode = $state(false);
     selection = $state.raw(null);
@@ -43,11 +51,12 @@ export class ImgCropper {
     box = $state.raw(null);
     _initialMode;
     _initialAspectRatio;
-    _image = null;
-    _blobUrl = null;
-    _sourceMime = null;
-    _sourceHasAlpha = $state(false);
+    _processing = $state(false);
+    _current = $state.raw(null);
+    _original = null;
+    _alive = false;
     constructor(options) {
+        this.tools = options.tools ?? [];
         this.mode = options.mode;
         this._initialMode = options.mode;
         this.fillColor = options.fillColor ?? '';
@@ -79,6 +88,14 @@ export class ImgCropper {
         this._initialAspectRatio = initial;
         this.ratioOptions = items.length >= 2 ? items : null;
     }
+    /** A tool or `save()` is working on the picture; the view blocks the cropper until it's done. */
+    get processing() {
+        return this._processing;
+    }
+    /** The current picture's URL — the source, or the latest tool result; empty until one is loaded. */
+    get currentUrl() {
+        return this._current?.url ?? '';
+    }
     get showFillColor() {
         return this.mode === 'contain' || this.free || this.hasAlpha;
     }
@@ -89,9 +106,9 @@ export class ImgCropper {
     /** Whether the picture has transparent pixels — the source's own, or empty space a crop took in past the source's edges. */
     get hasAlpha() {
         const { crop } = this;
-        const full = this._fullNatural;
-        const reachesPast = !!crop && !!full && (crop.x < -0.5 || crop.y < -0.5 || crop.x + crop.w > full.w + 0.5 || crop.y + crop.h > full.h + 0.5);
-        return this._sourceHasAlpha || reachesPast;
+        const turned = this._turnedSize;
+        const reachesPast = !!crop && !!turned && (crop.x < -0.5 || crop.y < -0.5 || crop.x + crop.w > turned.w + 0.5 || crop.y + crop.h > turned.h + 0.5);
+        return !!this._current?.hasAlpha || reachesPast;
     }
     /** The current aspect ratio's label — a preset's own, or `1.78:1` for a custom one; `null` for Original. */
     get ratioLabel() {
@@ -104,16 +121,15 @@ export class ImgCropper {
     get isTransparentFill() {
         return ColorHelper.isTransparent(this.fillColor);
     }
-    /** The picture's natural size — the crop's, or the whole source's turned by `rotation`. */
-    get shownNatural() {
-        const full = this._fullNatural;
+    /** The picture's size in its own pixels, turned by `rotation` — the crop's, or the whole picture's without one. */
+    get croppedSize() {
         const { crop } = this;
-        return full && crop ? { w: crop.w, h: crop.h } : full;
+        return crop ? { w: crop.w, h: crop.h } : this._turnedSize;
     }
     /** The picture's own aspect ratio (post-rotation) — the shape `box` must always keep. */
     get imageAspect() {
-        const shown = this.shownNatural;
-        return shown ? shown.w / shown.h : null;
+        const cropped = this.croppedSize;
+        return cropped ? cropped.w / cropped.h : null;
     }
     /** The frame's own aspect ratio — the chosen ratio, or the picture's own when none is chosen. */
     get frameAspect() {
@@ -132,10 +148,10 @@ export class ImgCropper {
             return null;
         }
         const fit = fitFrame(available, frameAspect);
-        const shown = this.shownNatural;
+        const cropped = this.croppedSize;
         // Capped at the picture's natural size so a small one isn't blown up at rest — but never below MIN_FRAME, so a
         // tiny one stays workable (and visibly small) instead of shrinking to a few pixels.
-        const naturalWidth = shown ? containBox(shown, frameAspect).w : fit.w;
+        const naturalWidth = cropped ? containBox(cropped, frameAspect).w : fit.w;
         const w = Math.min(fit.w, Math.max(naturalWidth, coverBox(MIN_FRAME, frameAspect).w));
         const h = w / frameAspect;
         return { x: this.margin.inline + (available.w - w) / 2, y: this.margin.block + (available.h - h) / 2, w, h };
@@ -158,9 +174,12 @@ export class ImgCropper {
     get ready() {
         return !this.failed && this.box !== null && this.frame !== null;
     }
-    get _fullNatural() {
-        const { natural, rotation } = this;
-        return natural ? (rotation === 90 || rotation === 270 ? { w: natural.h, h: natural.w } : natural) : null;
+    get _turnedSize() {
+        const size = this._current?.size;
+        if (!size) {
+            return null;
+        }
+        return this.rotation === 90 || this.rotation === 270 ? { w: size.h, h: size.w } : size;
     }
     get _zoomBase() {
         const { frame, imageAspect } = this;
@@ -168,64 +187,65 @@ export class ImgCropper {
     }
     init = async (src) => {
         this.destroy();
-        this.loading = true;
+        this._alive = true;
         this.failed = false;
         try {
-            let resolvedSrc = src;
-            const file = await FileWithBlobDataHelper.fromUrl(src);
-            if (file) {
-                resolvedSrc = file.blobUrl;
-                this._blobUrl = resolvedSrc;
-                this._sourceMime = file.type || null;
-            }
-            if (!this._sourceMime) {
-                this._sourceMime = detectMimeFromUrl(src);
+            const picture = await Picture.fromUrl(src);
+            if (!this._alive) {
+                picture?.release();
+                return;
             }
-            const image = await loadImage(resolvedSrc);
-            if (!image.naturalWidth || !image.naturalHeight) {
+            if (!picture) {
                 this.failed = true;
                 return;
             }
-            this._image = image;
-            this.source = resolvedSrc;
-            this.natural = { w: image.naturalWidth, h: image.naturalHeight };
-            this._sourceHasAlpha = detectAlpha(image, this._sourceMime);
+            this._original = picture;
+            this._current = picture;
             this.layout();
         }
         catch {
             this.failed = true;
         }
-        finally {
-            this.loading = false;
-        }
     };
     destroy = () => {
-        this._image = null;
-        this._sourceMime = null;
-        this.natural = null;
-        this._sourceHasAlpha = false;
+        this._alive = false;
+        this._releaseToolResult();
+        this._original?.release();
+        this._current = null;
+        this._original = null;
         this.crop = null;
         this.box = null;
-        if (this._blobUrl) {
-            URL.revokeObjectURL(this._blobUrl);
-            this._blobUrl = null;
-        }
     };
     setStage = (size) => {
         const previousFrame = this.frame;
         const previousBox = this.box;
         this.stage = size;
-        const frame = this.frame;
-        if (previousFrame && previousBox && frame && previousFrame.w > 0) {
-            const factor = frame.w / previousFrame.w;
-            const scaled = (rect) => ({ x: rect.x * factor, y: rect.y * factor, w: rect.w * factor, h: rect.h * factor });
-            this.box = scaled(previousBox);
-            if (this.selection) {
-                this.selection = scaled(this.selection);
+        this._refit(previousFrame, previousBox);
+    };
+    /**
+     * Runs `tool` on the picture as shown — cropped and rotated, at its natural resolution — and makes the result the new
+     * picture, so tools chain. Crop mode is left and a pending selection dropped, not applied. The zoom and position carry
+     * over when the result keeps the sent size; otherwise the picture is laid out afresh.
+     */
+    runTool = async (tool) => {
+        this.setCropMode(false);
+        const picture = this._current;
+        if (!picture) {
+            return;
+        }
+        this._processing = true;
+        try {
+            const toolInput = await this._croppedImage(picture);
+            if (!toolInput || !this._isCurrent(picture)) {
+                return;
+            }
+            const result = await tool.run(toolInput.blob);
+            if (result && this._isCurrent(picture)) {
+                await this._showToolResult({ result, replaced: picture, toolInputSize: toolInput.size });
             }
         }
-        else {
-            this.layout();
+        finally {
+            this._processing = false;
         }
     };
     layout = () => {
@@ -290,11 +310,11 @@ export class ImgCropper {
      * filling the frame — with the Original aspect the frame takes the piece's shape, a fixed aspect already matches it.
      */
     applyCrop = () => {
-        const { selection, box, shownNatural } = this;
-        if (!this.hasSelection || !selection || !box || !shownNatural || !this.frame) {
+        const { selection, box, croppedSize } = this;
+        if (!this.hasSelection || !selection || !box || !croppedSize || !this.frame) {
             return;
         }
-        const scale = shownNatural.w / box.w;
+        const scale = croppedSize.w / box.w;
         const origin = this.crop ?? { x: 0, y: 0 };
         const w = selection.w * scale;
         // The selection's height is rounded; a fixed aspect is re-derived so the piece fills the frame without a seam.
@@ -344,14 +364,14 @@ export class ImgCropper {
      * along and keeps what's inside it; a fixed-aspect frame can't turn, so the picture is laid out afresh instead. */
     rotate = (direction) => {
         const { box, frame: fromFrame, crop } = this;
-        const full = this._fullNatural;
+        const turned = this._turnedSize;
         this.rotation = toRotation(this.rotation + direction * 90);
-        if (crop && full) {
+        if (crop && turned) {
             // A quarter turn maps (x, y) in the W×H source to (H - y, x) clockwise, (y, W - x) counter-clockwise.
             this.crop =
                 direction === 1
-                    ? { x: full.h - (crop.y + crop.h), y: crop.x, w: crop.h, h: crop.w }
-                    : { x: crop.y, y: full.w - (crop.x + crop.w), w: crop.h, h: crop.w };
+                    ? { x: turned.h - (crop.y + crop.h), y: crop.x, w: crop.h, h: crop.w }
+                    : { x: crop.y, y: turned.w - (crop.x + crop.w), w: crop.h, h: crop.w };
         }
         this.selection = null;
         if (this.aspectRatio !== null) {
@@ -370,6 +390,10 @@ export class ImgCropper {
         });
     };
     reset = () => {
+        if (this._original && this._current !== this._original) {
+            this._releaseToolResult();
+            this._current = this._original;
+        }
         this.mode = this._initialMode;
         this.free = false;
         this.cropMode = false;
@@ -384,14 +408,48 @@ export class ImgCropper {
         if (this.hasSelection) {
             this.applyCrop();
         }
-        const image = this._image;
-        const { box, frame, shownNatural } = this;
-        if (this.failed || !image || !box || !frame || !shownNatural) {
+        this._processing = true;
+        try {
+            const rendered = this._render();
+            if (!rendered) {
+                return null;
+            }
+            const { canvas, needsAlpha } = rendered;
+            const blob = await encodeCanvas(canvas, { sourceMime: this._current?.mime ?? null, needsAlpha, jpegQuality: SAVE_JPEG_QUALITY });
+            return blob ? { blob, width: canvas.width, height: canvas.height } : null;
+        }
+        finally {
+            this._processing = false;
+        }
+    };
+    /**
+     * Where the whole turned source lands when the picture is drawn into `picture` — its center and its size on each axis,
+     * before `rotation` swaps them. The view and `save()` both place the source through this, so they can't drift apart.
+     */
+    sourcePlacement = (picture) => {
+        const turned = this._turnedSize;
+        const cropped = this.croppedSize;
+        if (!turned || !cropped) {
+            return null;
+        }
+        // Per axis: the picture rect is rounded on each axis separately when exported, so one shared scale leaves a seam.
+        const perX = picture.w / cropped.w;
+        const perY = picture.h / cropped.h;
+        const offset = this.crop ?? { x: 0, y: 0 };
+        return {
+            center: { x: picture.x + (turned.w / 2 - offset.x) * perX, y: picture.y + (turned.h / 2 - offset.y) * perY },
+            size: { w: turned.w * perX, h: turned.h * perY }
+        };
+    };
+    _render = () => {
+        const source = this._current;
+        const { box, frame, croppedSize } = this;
+        if (this.failed || !source || !box || !frame || !croppedSize) {
             return null;
         }
-        const nativeScale = shownNatural.w / box.w;
+        const nativeScale = croppedSize.w / box.w;
         const nativeArea = frame.w * frame.h * nativeScale * nativeScale;
-        const areaLimit = Math.min(shownNatural.w * shownNatural.h * MAX_OUTPUT_AREA_UPSCALE, MAX_OUTPUT_PIXELS);
+        const areaLimit = Math.min(croppedSize.w * croppedSize.h * MAX_OUTPUT_AREA_UPSCALE, MAX_OUTPUT_PIXELS);
         const scale = nativeArea > areaLimit ? nativeScale * Math.sqrt(areaLimit / nativeArea) : nativeScale;
         const width = Math.max(1, Math.floor(frame.w * scale));
         const height = Math.max(1, Math.floor(frame.h * scale));
@@ -411,47 +469,90 @@ export class ImgCropper {
             context.fillStyle = this.fillColor;
             context.fillRect(0, 0, width, height);
         }
-        const picture = { x: left, y: top, w: right - left, h: bottom - top };
-        const placement = this.sourcePlacement(picture);
-        if (!placement) {
+        if (!this._drawPicture(context, { source, target: { x: left, y: top, w: right - left, h: bottom - top } })) {
             return null;
         }
+        return { canvas, needsAlpha: !ColorHelper.isOpaque(this.fillColor) && (hasGap || this.hasAlpha) };
+    };
+    /** Draws the picture — cropped and turned — into `target`, clipped to it; `false` when there's no picture to place. */
+    _drawPicture = (context, { source, target }) => {
+        const placement = this.sourcePlacement(target);
+        if (!placement) {
+            return false;
+        }
         const { center, size } = placement;
         const turned = this.rotation === 90 || this.rotation === 270;
         context.save();
         context.beginPath();
-        context.rect(picture.x, picture.y, picture.w, picture.h);
+        context.rect(target.x, target.y, target.w, target.h);
         context.clip();
         context.translate(center.x, center.y);
         context.rotate((this.rotation * Math.PI) / 180);
         const drawWidth = turned ? size.h : size.w;
         const drawHeight = turned ? size.w : size.h;
-        context.drawImage(image, -drawWidth / 2, -drawHeight / 2, drawWidth, drawHeight);
+        context.drawImage(source.image, -drawWidth / 2, -drawHeight / 2, drawWidth, drawHeight);
         context.restore();
-        const needsAlpha = !ColorHelper.isOpaque(this.fillColor) && (hasGap || this.hasAlpha);
-        const mimeType = this._sourceMime === 'image/jpeg' && !needsAlpha ? 'image/jpeg' : 'image/png';
-        const dataUrl = canvas.toDataURL(mimeType, 0.92);
-        // A canvas past the browser's size limit encodes to an empty "data:," URL instead of throwing.
-        return dataUrl.length > 'data:,'.length ? { dataUrl, width, height, mimeType } : null;
+        return true;
     };
-    /**
-     * Where the whole turned source lands when the picture is drawn into `picture` — its center and its size on each axis,
-     * before `rotation` swaps them. The view and `save()` both place the source through this, so they can't drift apart.
-     */
-    sourcePlacement = (picture) => {
-        const full = this._fullNatural;
-        const shown = this.shownNatural;
-        if (!full || !shown) {
+    /** The picture cropped and turned, at its own resolution capped like `save()`'s; its blob as is when there's nothing to apply. */
+    _croppedImage = async (source) => {
+        const cropped = this.croppedSize;
+        if (!cropped) {
             return null;
         }
-        // Per axis: the picture rect is rounded on each axis separately when exported, so one shared scale leaves a seam.
-        const perX = picture.w / shown.w;
-        const perY = picture.h / shown.h;
-        const offset = this.crop ?? { x: 0, y: 0 };
-        return {
-            center: { x: picture.x + (full.w / 2 - offset.x) * perX, y: picture.y + (full.h / 2 - offset.y) * perY },
-            size: { w: full.w * perX, h: full.h * perY }
-        };
+        if (!this.crop && this.rotation === 0 && source.blob) {
+            return { blob: source.blob, size: source.size };
+        }
+        const scale = Math.min(1, Math.sqrt(MAX_OUTPUT_PIXELS / (cropped.w * cropped.h)));
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.max(1, Math.floor(cropped.w * scale));
+        canvas.height = Math.max(1, Math.floor(cropped.h * scale));
+        const context = canvas.getContext('2d');
+        if (!context || !this._drawPicture(context, { source, target: { x: 0, y: 0, w: canvas.width, h: canvas.height } })) {
+            return null;
+        }
+        const blob = await encodeCanvas(canvas, { sourceMime: source.mime, needsAlpha: this.hasAlpha, jpegQuality: TOOL_INPUT_JPEG_QUALITY });
+        return blob ? { blob, size: { w: canvas.width, h: canvas.height } } : null;
+    };
+    _isCurrent = (picture) => this._current === picture;
+    _showToolResult = async ({ result, replaced, toolInputSize }) => {
+        const resultPicture = await Picture.fromBlob(result);
+        if (!resultPicture) {
+            console.error('ImgCropper: tool result failed to decode as an image');
+            return;
+        }
+        if (!this._isCurrent(replaced)) {
+            resultPicture.release();
+            return;
+        }
+        const { frame: previousFrame, box: previousBox } = this;
+        this._releaseToolResult();
+        this._current = resultPicture;
+        this.crop = null;
+        this.rotation = 0;
+        if (!sameShape(resultPicture.size, toolInputSize)) {
+            this.layout();
+            return;
+        }
+        this._refit(previousFrame, previousBox);
+    };
+    _releaseToolResult = () => {
+        if (this._current !== this._original) {
+            this._current?.release();
+        }
+    };
+    _refit = (previousFrame, previousBox) => {
+        const frame = this.frame;
+        if (previousFrame && previousBox && frame && previousFrame.w > 0) {
+            const factor = frame.w / previousFrame.w;
+            this.box = scaleRect(previousBox, factor);
+            if (this.selection) {
+                this.selection = scaleRect(this.selection, factor);
+            }
+        }
+        else {
+            this.layout();
+        }
     };
     _update = (change) => {
         const { box, frame, imageAspect } = this;

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

@@ -1,3 +1,3 @@
 export { default as ImgCropperToolbar } from './cmp.img-cropper-toolbar.svelte';
 export { default as ImgCropperView } from './cmp.img-cropper.svelte';
-export { ImgCropper, type CropperMode, type ImgCropperDynamicAspectRatio, type ImgCropperMargin, type ImgCropperOptions, type ImgCropperRatioOption, type ImgCropperSaveResult } from './img-cropper.svelte';
+export { ImgCropper, type CropperMode, type ImgCropperDynamicAspectRatio, type ImgCropperMargin, type ImgCropperOptions, type ImgCropperRatioOption, type ImgCropperSaveResult, type ImgCropperTool } from './img-cropper.svelte';

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

@@ -0,0 +1,16 @@
+import type { Size } from './frame-geometry';
+export declare class Picture {
+    readonly image: HTMLImageElement;
+    readonly url: string;
+    readonly blob: Blob | null;
+    readonly mime: string | null;
+    readonly hasAlpha: boolean;
+    private readonly _ownsUrl;
+    private constructor();
+    get size(): Size;
+    /** Loads `src` as a blob when it can be fetched, falling back to the URL itself; `null` when it has no intrinsic size or fails to load. */
+    static fromUrl(src: string): Promise<Picture | null>;
+    static fromBlob(blob: Blob): Promise<Picture | null>;
+    private static _load;
+    release(): void;
+}

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

@@ -0,0 +1,46 @@
+import { FileWithBlobDataHelper } from '../../../core/files';
+import { detectAlpha, detectMimeFromUrl, loadImage } from './img-cropper-utils';
+export class Picture {
+    image;
+    url;
+    blob;
+    mime;
+    hasAlpha;
+    _ownsUrl;
+    constructor(image, source) {
+        this.image = image;
+        this.url = source.url;
+        this.blob = source.blob;
+        this.mime = source.mime;
+        this._ownsUrl = source.ownsUrl;
+        this.hasAlpha = detectAlpha(image, source.mime);
+    }
+    get size() {
+        return { w: this.image.naturalWidth, h: this.image.naturalHeight };
+    }
+    /** Loads `src` as a blob when it can be fetched, falling back to the URL itself; `null` when it has no intrinsic size or fails to load. */
+    static async fromUrl(src) {
+        const file = await FileWithBlobDataHelper.fromUrl(new URL(src, document.baseURI).href);
+        return file
+            ? Picture._load({ url: file.blobUrl, blob: file, mime: file.type.startsWith('image/') ? file.type : detectMimeFromUrl(src), ownsUrl: true })
+            : Picture._load({ url: src, blob: null, mime: detectMimeFromUrl(src), ownsUrl: false });
+    }
+    static async fromBlob(blob) {
+        return Picture._load({ url: URL.createObjectURL(blob), blob, mime: blob.type || null, ownsUrl: true });
+    }
+    static async _load(source) {
+        const image = await loadImage(source.url).catch(() => null);
+        if (!image?.naturalWidth || !image.naturalHeight) {
+            if (source.ownsUrl) {
+                URL.revokeObjectURL(source.url);
+            }
+            return null;
+        }
+        return new Picture(image, source);
+    }
+    release() {
+        if (this._ownsUrl) {
+            URL.revokeObjectURL(this.url);
+        }
+    }
+}

package/package.json

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