jodit-pro 4.12.40 → 4.13.1

package/es2021.en/plugins/image-editor-pro/image-editor-pro.js

@@ -0,0 +1,3870 @@
+/*!
+ * jodit-pro - PRO Version of Jodit Editor
+ * Author: Chupurnov Valerii <chupurnov@gmail.com>
+ * Version: v4.13.1
+ * Url: https://xdsoft.net/jodit/pro/
+ * License(s): SEE LICENSE IN LICENSE.md
+ */
+	
+"use strict";
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else {
+		var a = factory();
+		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
+	}
+})(self, function() {
+return (self["webpackChunkjodit_pro"] = self["webpackChunkjodit_pro"] || []).push([[918],{
+
+/***/ 76542:
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ProImageEditor: function() { return /* binding */ ProImageEditor; }
+/* harmony export */ });
+/* harmony import */ var _swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(82749);
+/* harmony import */ var _jodit_image_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(85013);
+/* harmony import */ var jodit_esm_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6441);
+/* harmony import */ var jodit_esm_core_component__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(91907);
+/* harmony import */ var jodit_esm_core_ui_button_button_button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10830);
+/* harmony import */ var jodit_esm_modules_dialog_dialog__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(78584);
+/*!
+ * Jodit Editor PRO (https://xdsoft.net/jodit/)
+ * See LICENSE.md in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net/jodit/pro/
+ */ 
+
+
+
+
+
+/**
+ * PRO replacement for Jodit's core image editor, backed by the standalone
+ * `@jodit/image-editor` package (crop, resize, rotate, flip, filters, finetune,
+ * text annotations).
+ *
+ * It is registered as `Jodit.modules.ImageEditor`, so **every** path that opens
+ * the image editor — the finder pencil, Image properties → Edit, a direct
+ * `getInstance('ImageEditor')` — instantiates it via `getInstance`'s module
+ * fallback (the event fires on the *file browser's* emitter, which is why an
+ * `jodit.e` listener never worked).
+ *
+ * `@jodit/image-editor` is bundled as a dependency (it is part of the PRO
+ * editor), so the class is imported directly.
+ *
+ * The core editor speaks a server "resize/crop the original file" language; this
+ * one produces a fully edited `Blob`. So on save it uploads the blob through the
+ * connector's `imageSave` action (overwriting the source file), then reports
+ * `action: 'saved'` to the core's save callback — which skips the server
+ * resize/crop and runs only the `success`/`onSuccess` machinery, reusing
+ * finder's refresh and image-properties' `<img>` swap without reimplementing
+ * either.
+ */ class ProImageEditor extends jodit_esm_core_component__WEBPACK_IMPORTED_MODULE_3__.ViewComponent {
+    className() {
+        return 'ImageEditorPro';
+    }
+    async open(url, save) {
+        const view = this.j;
+        const options = jodit_esm_config__WEBPACK_IMPORTED_MODULE_2__.Config.defaultOptions.imageEditorPro;
+        const container = view.c.div('jodit-image-editor-pro');
+        container.style.width = '100%';
+        container.style.height = '100%';
+        const dialog = new jodit_esm_modules_dialog_dialog__WEBPACK_IMPORTED_MODULE_5__.Dialog({
+            language: view.o.language
+        });
+        dialog.setSize(options.dialog.width, options.dialog.height);
+        dialog.setContent(container);
+        dialog.open();
+        let editor = null;
+        let disposeToolbar = null;
+        const cleanup = ()=>{
+            disposeToolbar?.();
+            disposeToolbar = null;
+            editor?.destroy();
+            editor = null;
+            dialog.close();
+        };
+        dialog.e.on('beforeClose', ()=>{
+            disposeToolbar?.();
+            disposeToolbar = null;
+            editor?.destroy();
+            editor = null;
+        });
+        editor = new _jodit_image_editor__WEBPACK_IMPORTED_MODULE_1__.ImageEditor({
+            container,
+            // The whole top bar is rebuilt as a native Jodit toolbar in the
+            // dialog header (see `mountToolbar`), so the built-in one is hidden.
+            // Start in `loading` so the editor shows its spinner overlay while
+            // the source image travels through the connector below.
+            state: {
+                showToolbar: false,
+                status: 'loading'
+            },
+            onSave: (edited)=>{
+                void this.persist(editor, url, undefined, edited, save, cleanup);
+            },
+            onSaveAs: (edited)=>{
+                this.saveAs(editor, url, edited, save, cleanup);
+            }
+        });
+        disposeToolbar = this.mountToolbar(dialog, editor);
+        // Load the image separately so the editor always opens, even if the
+        // source image can't be fetched (CORS, network, a deleted file …).
+        try {
+            const blob = await this.loadImage(url);
+            await editor.fromBlob(blob);
+        } catch (error) {
+            editor?.update({
+                status: 'error',
+                error: error instanceof Error ? error.message : String(error)
+            });
+            this.error(error);
+        }
+    }
+    /**
+	 * Rebuilds the editor's top bar as a native Jodit toolbar in the dialog
+	 * header — Save / Save as, dimensions, zoom, reset / undo / redo — driven by
+	 * the `@jodit/image-editor` public API (`save()`, `saveAs()`, `update(...)`)
+	 * and kept in sync by subscribing to the editor store. Returns a disposer.
+	 */ mountToolbar(dialog, editor) {
+        const view = this.j;
+        // The floppy icon matches the free (core) image editor's Save buttons;
+        // while an export is in flight the spinner replaces the icon (same
+        // footprint), so the button doesn't jump.
+        const save = (0,jodit_esm_core_ui_button_button_button__WEBPACK_IMPORTED_MODULE_4__.Button)(view, {
+            icon: {
+                name: 'save'
+            },
+            text: view.i18n('Save')
+        }, 'primary');
+        const saveAs = (0,jodit_esm_core_ui_button_button_button__WEBPACK_IMPORTED_MODULE_4__.Button)(view, {
+            icon: {
+                name: 'save'
+            },
+            name: 'save-as',
+            text: view.i18n('Save as')
+        });
+        const size = view.c.span('jodit-image-editor-pro__size');
+        const zoomOut = (0,jodit_esm_core_ui_button_button_button__WEBPACK_IMPORTED_MODULE_4__.Button)(view, _jodit_image_editor__WEBPACK_IMPORTED_MODULE_1__.ICONS.minus);
+        const zoom = view.c.span('jodit-image-editor-pro__zoom');
+        const zoomIn = (0,jodit_esm_core_ui_button_button_button__WEBPACK_IMPORTED_MODULE_4__.Button)(view, _jodit_image_editor__WEBPACK_IMPORTED_MODULE_1__.ICONS.plus);
+        const reset = (0,jodit_esm_core_ui_button_button_button__WEBPACK_IMPORTED_MODULE_4__.Button)(view, 'update', view.i18n('Reset'));
+        const undo = (0,jodit_esm_core_ui_button_button_button__WEBPACK_IMPORTED_MODULE_4__.Button)(view, 'undo', view.i18n('Undo'));
+        const redo = (0,jodit_esm_core_ui_button_button_button__WEBPACK_IMPORTED_MODULE_4__.Button)(view, 'redo', view.i18n('Redo'));
+        zoomOut.setState({
+            tooltip: 'Zoom out'
+        });
+        zoomIn.setState({
+            tooltip: 'Zoom in'
+        });
+        // Which of the two save buttons started the in-flight export — the
+        // spinner is shown on that one while `status` is `exporting`.
+        let pending = null;
+        save.onAction(()=>{
+            pending = save;
+            void editor.save();
+        });
+        saveAs.onAction(()=>{
+            pending = saveAs;
+            void editor.saveAs();
+        });
+        zoomOut.onAction(()=>editor.update({
+                zoom: editor.state.zoom / 1.2
+            }));
+        zoomIn.onAction(()=>editor.update({
+                zoom: editor.state.zoom * 1.2
+            }));
+        reset.onAction(()=>editor.reset());
+        undo.onAction(()=>editor.update({
+                history: {
+                    step: -1
+                }
+            }));
+        redo.onAction(()=>editor.update({
+                history: {
+                    step: 1
+                }
+            }));
+        const group = (...children)=>{
+            const el = view.c.div('jodit-image-editor-pro__group');
+            el.style.display = 'flex';
+            el.style.alignItems = 'center';
+            el.style.gap = '4px';
+            children.forEach((child)=>el.appendChild(child));
+            return el;
+        };
+        const bar = view.c.div('jodit-image-editor-pro__toolbar');
+        bar.style.display = 'flex';
+        bar.style.alignItems = 'center';
+        bar.style.gap = '12px';
+        bar.style.width = '100%';
+        size.style.opacity = '0.75';
+        zoom.style.minWidth = '3.5em';
+        zoom.style.textAlign = 'center';
+        bar.appendChild(group(save.container, saveAs.container));
+        bar.appendChild(group(size, zoomOut.container, zoom, zoomIn.container));
+        const actions = group(reset.container, undo.container, redo.container);
+        actions.style.marginLeft = 'auto';
+        bar.appendChild(actions);
+        dialog.setHeader(bar);
+        const busyClass = 'jodit-image-editor-pro__button_busy';
+        const sync = (state)=>{
+            const output = _jodit_image_editor__WEBPACK_IMPORTED_MODULE_1__.selectors.selectOutputSize(state);
+            // `exporting` covers both the blob export and the connector upload
+            // (persist() keeps the status set until the dialog closes).
+            const exporting = state.status === 'exporting';
+            const busy = exporting || state.status === 'loading';
+            // `busyVisible` (@jodit/image-editor ≥ 0.2.4, `spinnerDelay`)
+            // debounces the spinner so a fast save never flashes the button;
+            // on older builds the field is absent — fall back to `exporting`.
+            const busyVisible = state.busyVisible;
+            const spinning = exporting && (busyVisible ?? true);
+            if (!exporting) {
+                pending = null;
+            }
+            save.setState({
+                disabled: !state.source || busy
+            });
+            saveAs.setState({
+                disabled: !state.source || busy
+            });
+            save.container.classList.toggle(busyClass, spinning && pending !== saveAs);
+            saveAs.container.classList.toggle(busyClass, spinning && pending === saveAs);
+            reset.setState({
+                disabled: !_jodit_image_editor__WEBPACK_IMPORTED_MODULE_1__.selectors.selectIsDirty(state)
+            });
+            undo.setState({
+                disabled: !_jodit_image_editor__WEBPACK_IMPORTED_MODULE_1__.selectors.selectCanUndo(state)
+            });
+            redo.setState({
+                disabled: !_jodit_image_editor__WEBPACK_IMPORTED_MODULE_1__.selectors.selectCanRedo(state)
+            });
+            size.textContent = output ? `${output.width} × ${output.height}` : '';
+            // Show the *effective* on-screen scale (fit-to-viewport × zoom), the
+            // same value the editor's own zoom widget reports — not the raw
+            // `state.zoom`, which is 100% even when a huge image is shrunk to fit.
+            const fit = _jodit_image_editor__WEBPACK_IMPORTED_MODULE_1__.selectors.selectViewportFit(state);
+            const percent = fit ? Math.round(fit.scale * 100) : Math.round(state.zoom * 100);
+            zoom.textContent = `${percent}%`;
+        };
+        sync(editor.state);
+        const unsubscribe = editor.store.subscribe(sync);
+        return ()=>{
+            unsubscribe();
+            [
+                save,
+                saveAs,
+                zoomOut,
+                zoomIn,
+                reset,
+                undo,
+                redo
+            ].forEach((btn)=>btn.destruct());
+        };
+    }
+    /**
+	 * "Save as" — prompt for a new file name, then persist the edited blob under
+	 * it (mirrors the core editor's Save-as UX and its `onSave(name, …)` call).
+	 */ saveAs(editor, url, blob, save, cleanup) {
+        this.j.prompt('Enter new name', 'Save in new file', (name)=>{
+            const trimmed = (name || '').trim();
+            if (!trimmed) {
+                this.j.alert('The name should not be empty');
+                return false;
+            }
+            void this.persist(editor, url, trimmed, blob, save, cleanup);
+        });
+    }
+    /**
+	 * Persists the edited blob. With `newName` it writes a new file ("Save as");
+	 * without it, it overwrites the source ("Save"). Either way it then reuses
+	 * the core's `save()` success/onSuccess wiring (finder refresh, in-content
+	 * `<img>` swap) with a no-op resize of the resulting file.
+	 */ async persist(editor, url, newName, blob, save, cleanup) {
+        // `toBlob()` has already flipped the status back to `ready`; keep the
+        // toolbar locked (spinner on the save button) while the edited bytes
+        // travel to the server. No reset needed — every branch below closes
+        // the dialog via `cleanup()`.
+        editor?.update({
+            status: 'exporting'
+        });
+        try {
+            const { w, h } = await this.blobSize(blob);
+            // 1. Write the edited bytes (overwrite the source, or a new file).
+            const newPath = await this.uploadEdited(url, blob, newName);
+            // 2. The file is already persisted — `action: 'saved'` makes the
+            //    core skip its server resize/crop (which 404s when the source
+            //    came from image-properties) and only run the success wiring:
+            //    finder refreshes, in-content edits swap the <img>.
+            //
+            //    A core older than 4.12.34 doesn't know 'saved' and would route
+            //    it into a server *crop* (failing the whole save — the finder
+            //    list then never refreshes). Fall back to the legacy no-op
+            //    resize of the already-edited file there.
+            const done = ()=>{
+                cleanup();
+                this.j.e.fire('update.filebrowser');
+            };
+            save(newName, this.coreSupportsSaved() ? {
+                action: 'saved',
+                box: {
+                    w,
+                    h
+                },
+                newPath: newPath || undefined
+            } : {
+                action: 'resize',
+                box: {
+                    w,
+                    h
+                }
+            }, done, (error)=>{
+                cleanup();
+                this.error(error);
+            });
+        } catch (error) {
+            cleanup();
+            this.error(error);
+        }
+    }
+    /**
+	 * Uploads the edited blob through the connector's `imageSave` action and
+	 * returns the saved file's new path (`''` for older connectors that don't
+	 * report it).
+	 */ async uploadEdited(url, blob, newName) {
+        const { source, path, name } = await this.j.dataProvider.getPathByUrl(url);
+        const connectorUrl = this.connectorUrl();
+        if (!connectorUrl) {
+            throw new Error('No connector configured for imageSave');
+        }
+        const fileName = String(newName || name || 'image.png');
+        const form = new FormData();
+        form.append('action', 'imageSave');
+        form.append('source', String(source ?? ''));
+        form.append('path', String(path ?? ''));
+        form.append('name', fileName);
+        form.append('files[0]', blob, fileName);
+        const sep = connectorUrl.includes('?') ? '&' : '?';
+        const response = await fetch(`${connectorUrl}${sep}action=imageSave`, {
+            method: 'POST',
+            body: form,
+            credentials: 'include'
+        });
+        const data = await response.json();
+        if (!data.success) {
+            throw new Error(data.message || 'Failed to save the edited image');
+        }
+        return data.data?.newPath ?? '';
+    }
+    /**
+	 * `ImageEditorActionBox.action: 'saved'` appeared in jodit 4.12.34 — an
+	 * older core routes unknown actions into a server crop, which fails the
+	 * save. Detected from the host view's version.
+	 */ coreSupportsSaved() {
+        const version = this.j.getVersion ? this.j.getVersion() : '';
+        const [major = 0, minor = 0, patch = 0] = version.split('.').map((part)=>parseInt(part, 10) || 0);
+        return major > 4 || major === 4 && (minor > 12 || minor === 12 && patch >= 34);
+    }
+    connectorUrl() {
+        // `url` may be a function (dynamic endpoint); we only use a static string.
+        const ajax = this.j.o.ajax?.url;
+        const uploader = this.j.o.uploader?.url;
+        if (typeof ajax === 'string' && ajax) {
+            return ajax;
+        }
+        if (typeof uploader === 'string' && uploader) {
+            return uploader;
+        }
+        return '';
+    }
+    async loadImage(url) {
+        // Prefer the connector's `imageLoad` action: the raw file host usually
+        // serves images without CORS headers, but the connector API is
+        // CORS-enabled (it's what powers the file browser), so this works from a
+        // different origin.
+        const connectorUrl = this.connectorUrl();
+        if (connectorUrl) {
+            try {
+                return await this.loadViaConnector(connectorUrl, url);
+            } catch  {
+            // Fall back to a direct fetch (same-origin hosts, older
+            // connectors without `imageLoad`).
+            }
+        }
+        // Cache-buster (same trick as the core editor's `_tst`): the file is
+        // edited in place at a stable URL, so browser/CDN caches (e.g. a
+        // Cloudflare edge HIT) would otherwise serve the pre-edit bytes.
+        const sep = url.includes('?') ? '&' : '?';
+        const response = await fetch(`${url}${sep}_tst=${Date.now()}`, {
+            credentials: 'include'
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to load image (${response.status})`);
+        }
+        return response.blob();
+    }
+    async loadViaConnector(connectorUrl, url) {
+        const { source, path, name } = await this.j.dataProvider.getPathByUrl(url);
+        const form = new FormData();
+        form.append('action', 'imageLoad');
+        form.append('source', String(source ?? ''));
+        form.append('path', String(path ?? ''));
+        form.append('name', String(name ?? ''));
+        const sep = connectorUrl.includes('?') ? '&' : '?';
+        const response = await fetch(`${connectorUrl}${sep}action=imageLoad`, {
+            method: 'POST',
+            body: form,
+            credentials: 'include'
+        });
+        const data = await response.json();
+        if (!data.success || !data.data?.content) {
+            throw new Error(data.message || 'Failed to load the image');
+        }
+        // `content` is a data URL — decoding it never hits CORS.
+        return (await fetch(data.data.content)).blob();
+    }
+    async blobSize(blob) {
+        const bitmap = await createImageBitmap(blob);
+        const size = {
+            w: bitmap.width,
+            h: bitmap.height
+        };
+        bitmap.close();
+        return size;
+    }
+    error(error) {
+        this.j.e.fire('errorMessage', error.message);
+    }
+    constructor(...args){
+        super(...args), /** Marker for callers/tests. */ (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "isProImageEditor", true);
+    }
+}
+
+
+/***/ }),
+
+/***/ 45719:
+/***/ (function(__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) {
+
+/* harmony import */ var jodit_esm_config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6441);
+/*!
+ * Jodit Editor PRO (https://xdsoft.net/jodit/)
+ * See LICENSE.md in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net/jodit/pro/
+ */ 
+jodit_esm_config__WEBPACK_IMPORTED_MODULE_0__.Config.prototype.imageEditorPro = {
+    dialog: {
+        width: '90%',
+        height: '90%'
+    }
+};
+
+
+/***/ }),
+
+/***/ 98270:
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   imageEditorPro: function() { return /* binding */ imageEditorPro; }
+/* harmony export */ });
+/* harmony import */ var _swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(82749);
+/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(45719);
+/* harmony import */ var _adapter__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(76542);
+/* harmony import */ var jodit_esm_core_plugin__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(50911);
+/* harmony import */ var jodit_pro_jodit_pro__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2692);
+/*!
+ * Jodit Editor PRO (https://xdsoft.net/jodit/)
+ * See LICENSE.md in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net/jodit/pro/
+ */ 
+
+
+
+
+
+/**
+ * Replaces Jodit's core image editor with the standalone `@jodit/image-editor`
+ * (crop, resize, rotate, flip, filters, finetune, text annotations).
+ *
+ * The replacement is done at the module registry level — `Jodit.modules.ImageEditor`
+ * — because the editor is instantiated via `getInstance('ImageEditor')` on the
+ * **file browser's** own event emitter (the finder pencil, Image properties →
+ * Edit), not on `jodit.e`. Overriding the module makes every entry point resolve
+ * to {@link ProImageEditor} through `getInstance`'s fallback.
+ */ class imageEditorPro extends jodit_esm_core_plugin__WEBPACK_IMPORTED_MODULE_3__.Plugin {
+    /** @override */ afterInit(_jodit) {
+        // Global, idempotent: once a licensed PRO editor initialises, the core
+        // image editor is replaced everywhere (matching how `finder` replaces
+        // the file browser for the whole build). The cast bridges two
+        // duck-compatible classes: callers only ever `new` it and call
+        // `open(url, save)`, but the core's nominal `typeof ImageEditor`
+        // (a private static) makes them structurally unrelated.
+        jodit_pro_jodit_pro__WEBPACK_IMPORTED_MODULE_4__.JoditPro.modules.ImageEditor = _adapter__WEBPACK_IMPORTED_MODULE_2__.ProImageEditor;
+    }
+    /** @override */ beforeDestruct(_jodit) {}
+}
+/** @override */ (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(imageEditorPro, "requires", [
+    'license'
+]);
+jodit_pro_jodit_pro__WEBPACK_IMPORTED_MODULE_4__.JoditPro.plugins.add('imageEditorPro', imageEditorPro);
+
+
+/***/ }),
+
+/***/ 85013:
+/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ICONS: function() { return /* binding */ ICONS; },
+/* harmony export */   ImageEditor: function() { return /* binding */ ImageEditor; },
+/* harmony export */   selectors: function() { return /* binding */ selectors; }
+/* harmony export */ });
+/* unused harmony exports CanvasImageCodec, CoalescingScheduler, DEFAULT_FONTS, DEFAULT_PALETTE, DomHost, ImageProcessor, LocaleRegistry, MemoryHost, Renderer, Store, SyncScheduler, TOKENS, ToolRegistry, addAnnotation, adjustments, applyAspectRatio, applyFilter, button, centerRect, clamp, clampRectToBounds, cloneRaster, colorPicker, createBuiltinTools, createDefaultFocus, createDefaultProcessor, createIdentityDesign, createInitialState, createMicrotaskScheduler, createRafScheduler, createRaster, createTextAnnotation, createTranslator, crop, cropCenter, defaultCanvasFactory, execute, findAnnotation, fitInViewport, fitScale, fitWithinLimits, flattenOnBackground, flip, fontSelect, getFilter, h, icon, init, interpolate, isIdentity, listFilters, lockedResize, moveCrop, moveCropFree, numberField, parseHexColor, pointerAngle, positionGrid, registerFilter, removeAnnotation, renderApp, resize, resizeCrop, resizeRotatedCrop, rotate90, rotatedCorner, roundRect, sampleRotatedRect, segmented, selectiveBlur, slider, smoothstep, solidRaster, text, updateAnnotation */
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+(function() {
+    'use strict';
+    try {
+        if (typeof document != 'undefined') {
+            var elementStyle = document.createElement('style');
+            elementStyle.appendChild(document.createTextNode("/*\n * Jodit Image Editor — design system & layout.\n *\n * Everything is scoped under `.jie` so the stylesheet can be injected into any\n * page without leaking. Tokens are CSS custom properties; switching `data-theme`\n * re-themes the whole tree. PostCSS handles nesting + autoprefixing.\n */\n\n.jie {\n  /* palette */\n  --jie-accent: #5b5fc7;\n  --jie-accent-soft: #eceefb;\n  --jie-bg: #ffffff;\n  --jie-surface: #ffffff;\n  --jie-stage: #f3f4f8;\n  --jie-border: #e6e8ef;\n  --jie-text: #1f2430;\n  --jie-text-dim: #8a90a2;\n  --jie-danger: #e0533d;\n  --jie-shadow: 0 1px 2px rgba(20, 24, 40, 0.06), 0 8px 24px rgba(20, 24, 40, 0.06);\n\n  /* sizing scale — one system for every control */\n  --jie-control-h: 38px; /* shared height: buttons, inputs, selects, color, slider row */\n  --jie-control-px: 12px; /* horizontal padding inside controls */\n  --jie-icon: 20px; /* inline icon size (rail icons override to 24) */\n  --jie-radius: 12px; /* cards / panels */\n  --jie-radius-sm: 8px; /* controls */\n  --jie-gap: 16px; /* between groups */\n  --jie-gap-sm: 8px; /* between controls in a row */\n  --jie-font-sm: 13px;\n  --jie-font-md: 14px;\n  --jie-rail-w: 92px;\n  --jie-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 420px;\n  box-sizing: border-box;\n  font-family: var(--jie-font);\n  color: var(--jie-text);\n  background: var(--jie-bg);\n  border: 1px solid var(--jie-border);\n  border-radius: var(--jie-radius);\n  overflow: hidden;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.jie *,.jie *::before,.jie *::after {\n    box-sizing: border-box;\n  }\n\n.jie[data-theme='dark'] {\n    --jie-accent: #8a8df0;\n    --jie-accent-soft: #2a2d44;\n    --jie-bg: #14161f;\n    --jie-surface: #1b1e2a;\n    --jie-stage: #0f1118;\n    --jie-border: #2a2e3d;\n    --jie-text: #e7e9f3;\n    --jie-text-dim: #8b91a7;\n    --jie-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);\n  }\n\n/* ---- top bar ------------------------------------------------------------ */\n.jie-topbar {\n  display: flex;\n  align-items: center;\n  gap: var(--jie-gap);\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--jie-border);\n  background: var(--jie-surface);\n}\n\n.jie-topbar__save {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.jie-topbar__meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0 auto;\n  color: var(--jie-text-dim);\n  font-size: 14px;\n}\n\n.jie-zoom {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-variant-numeric: tabular-nums;\n}\n\n.jie-topbar__actions {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n/* ---- buttons ------------------------------------------------------------ */\n.jie-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: var(--jie-control-h);\n  min-width: var(--jie-control-h); /* single-char buttons (B / I) stay square */\n  padding: 0 var(--jie-control-px);\n  font: inherit;\n  font-size: var(--jie-font-md);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  color: var(--jie-text);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--jie-radius-sm);\n  cursor: pointer;\n  transition:\n    background 0.12s ease,\n    color 0.12s ease,\n    border-color 0.12s ease;\n}\n.jie-btn:hover:not(:disabled) {\n    background: var(--jie-accent-soft);\n  }\n.jie-btn:disabled {\n    opacity: 0.4;\n    cursor: default;\n  }\n/* inline icons are smaller than the standalone rail icons */\n.jie-btn .jie-icon {\n    width: var(--jie-icon);\n    height: var(--jie-icon);\n  }\n\n.jie-btn--primary {\n  color: #fff;\n  background: var(--jie-accent);\n  padding-inline: 18px;\n}\n\n.jie-btn--primary:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--jie-accent) 88%, #000);\n  }\n\n.jie-btn--icon {\n  width: var(--jie-control-h);\n  padding: 0;\n  color: var(--jie-text-dim);\n}\n\n.jie-btn--icon:hover:not(:disabled) {\n    color: var(--jie-text);\n  }\n\n.jie-btn--active {\n  color: var(--jie-accent);\n  background: var(--jie-accent-soft);\n}\n\n/* text-style modifiers (the B / I annotation toggles) */\n.jie-btn--bold {\n  font-weight: 800;\n}\n.jie-btn--italic {\n  font-style: italic;\n  font-family: Georgia, 'Times New Roman', serif;\n}\n\n.jie-icon {\n  display: inline-flex;\n  width: 24px;\n  height: 24px;\n}\n\n.jie-icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n/* ---- body / rail -------------------------------------------------------- */\n.jie-body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n}\n\n.jie-rail {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  width: var(--jie-rail-w);\n  padding: 14px 10px;\n  border-right: 1px solid var(--jie-border);\n  background: var(--jie-surface);\n  overflow-y: auto;\n}\n\n.jie-tab {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--jie-text-dim);\n  background: transparent;\n  border: 0;\n  border-radius: var(--jie-radius-sm);\n  cursor: pointer;\n  transition:\n    background 0.12s ease,\n    color 0.12s ease;\n}\n\n.jie-tab:hover {\n    background: var(--jie-accent-soft);\n  }\n\n.jie-tab[aria-selected='true'] {\n    color: var(--jie-accent);\n    background: var(--jie-accent-soft);\n  }\n\n/* ---- stage / preview ---------------------------------------------------- */\n.jie-stage {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n  background: var(--jie-bg);\n}\n\n.jie-canvas-wrap {\n  position: relative;\n  flex: 1;\n  margin: 16px;\n  border-radius: var(--jie-radius);\n  background: var(--jie-stage);\n  overflow: hidden;\n  touch-action: none;\n}\n\n.jie-canvas {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n/* ---- transient status (loading / saving / error) ------------------------- */\n\n.jie-spinner {\n  display: inline-block;\n  flex: 0 0 auto;\n  width: var(--jie-icon);\n  height: var(--jie-icon);\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: jie-spin 0.8s linear infinite;\n}\n\n@keyframes jie-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Covers the canvas while the image is loading, or shows the load error. */\n.jie-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--jie-gap-sm);\n  font-size: var(--jie-font-md);\n  color: var(--jie-text-dim);\n  background: var(--jie-stage);\n}\n.jie-overlay .jie-spinner {\n    width: 32px;\n    height: 32px;\n    border-width: 3px;\n    color: var(--jie-accent);\n  }\n\n.jie-overlay--error {\n  color: var(--jie-danger);\n}\n\n.jie-overlay__detail {\n  max-width: 80%;\n  font-size: var(--jie-font-sm);\n  text-align: center;\n  color: var(--jie-text-dim);\n}\n\n/* crop overlay */\n.jie-crop {\n  position: absolute;\n  border: 1.5px dashed var(--jie-accent);\n  box-shadow: 0 0 0 100vmax var(--jie-scrim, rgba(17, 24, 39, 0.45));\n  transform-origin: center;\n  cursor: move;\n}\n\n/*\n * Rotation knob, centred *above* the frame and connected by a short stem. The\n * preview keeps `VIEWPORT_PADDING` around the image, so the knob has room and is\n * never clipped — even for a full-image crop.\n */\n.jie-crop__rotate {\n  position: absolute;\n  left: 50%;\n  top: -34px;\n  width: 18px;\n  height: 18px;\n  margin-left: -9px;\n  background: var(--jie-bg);\n  border: 2px solid var(--jie-accent);\n  border-radius: 50%;\n  box-shadow: 0 1px 3px rgba(20, 24, 40, 0.3);\n  cursor: grab;\n  touch-action: none;\n\n  /* stem runs from the knob's bottom (-16px) toward the frame, stopping ~5px\n     short of the edge so it never touches/overlaps the dashed border */\n}\n.jie-crop__rotate::before {\n    content: '';\n    position: absolute;\n    left: 50%;\n    top: 18px;\n    width: 2px;\n    height: 11px;\n    margin-left: -1px;\n    background: var(--jie-accent);\n  }\n.jie-crop__rotate:active {\n    cursor: grabbing;\n  }\n\n.jie-crop__handle {\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  background: var(--jie-bg);\n  border: 2px solid var(--jie-accent);\n  border-radius: 50%;\n}\n\n.jie-crop__handle[data-h='nw'] {\n    top: -7px;\n    left: -7px;\n    cursor: nwse-resize;\n  }\n\n.jie-crop__handle[data-h='ne'] {\n    top: -7px;\n    right: -7px;\n    cursor: nesw-resize;\n  }\n\n.jie-crop__handle[data-h='sw'] {\n    bottom: -7px;\n    left: -7px;\n    cursor: nesw-resize;\n  }\n\n.jie-crop__handle[data-h='se'] {\n    bottom: -7px;\n    right: -7px;\n    cursor: nwse-resize;\n  }\n\n/* ---- bottom panel ------------------------------------------------------- */\n.jie-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  align-items: center;\n  padding: 14px 16px 20px;\n  border-top: 1px solid var(--jie-border);\n  background: var(--jie-surface);\n}\n\n/* a row of equal-height controls, centred on a shared baseline */\n.jie-toolrow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--jie-gap-sm);\n  align-items: center;\n  justify-content: center;\n}\n\n/* a row of labelled (label-above) fields; inputs and buttons share a height,\n   so aligning their bottoms keeps everything tidy */\n.jie-fieldrow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--jie-gap);\n  align-items: flex-end;\n  justify-content: center;\n}\n\n.jie-field {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: var(--jie-font-sm);\n  color: var(--jie-text-dim);\n}\n\n.jie-input,\n.jie-select {\n  height: var(--jie-control-h);\n  width: 120px;\n  padding: 0 var(--jie-control-px);\n  font: inherit;\n  font-size: var(--jie-font-md);\n  color: var(--jie-text);\n  background: var(--jie-bg);\n  border: 1px solid var(--jie-border);\n  border-radius: var(--jie-radius-sm);\n}\n\n:is(.jie-input,.jie-select):focus {\n    outline: 2px solid var(--jie-accent-soft);\n    border-color: var(--jie-accent);\n  }\n\n/* native colour input, normalised to the control height as a rounded swatch */\n/* colour picker: a swatch button that opens a popover of preset swatches */\n.jie-colorpicker {\n  position: relative;\n  display: inline-flex;\n}\n\n/* the trigger swatch (shows the current colour via inline `background`) */\n.jie-color {\n  width: var(--jie-control-h);\n  height: var(--jie-control-h);\n  padding: 0;\n  border: 1px solid var(--jie-border);\n  border-radius: var(--jie-radius-sm);\n  box-shadow: inset 0 0 0 2px var(--jie-bg);\n  cursor: pointer;\n}\n\n.jie-popover__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n}\n\n.jie-popover {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 51;\n  padding: 10px;\n  background: var(--jie-surface);\n  border: 1px solid var(--jie-border);\n  border-radius: var(--jie-radius);\n  box-shadow: var(--jie-shadow);\n}\n\n.jie-swatches {\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 8px;\n}\n\n/* 3×3 position anchor grid */\n.jie-posgrid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 2px;\n  padding: 3px;\n  background: var(--jie-bg);\n  border: 1px solid var(--jie-border);\n  border-radius: var(--jie-radius-sm);\n}\n\n.jie-posgrid__cell {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  color: var(--jie-text-dim);\n  background: transparent;\n  border: 0;\n  border-radius: 5px;\n  cursor: pointer;\n}\n\n.jie-posgrid__cell .jie-icon {\n    width: 16px;\n    height: 16px;\n  }\n\n.jie-posgrid__cell:hover {\n    background: var(--jie-accent-soft);\n    color: var(--jie-text);\n  }\n\n.jie-posgrid__cell[aria-pressed='true'] {\n    background: var(--jie-accent);\n    color: #fff;\n  }\n\n/* font selector */\n.jie-fontselect {\n  position: relative;\n  display: inline-flex;\n}\n\n.jie-fontselect__trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--jie-control-h);\n  min-width: 130px;\n  padding: 0 10px;\n  font: inherit;\n  font-size: var(--jie-font-md);\n  color: var(--jie-text);\n  background: var(--jie-bg);\n  border: 1px solid var(--jie-border);\n  border-radius: var(--jie-radius-sm);\n  cursor: pointer;\n}\n\n.jie-fontselect__trigger > span {\n    flex: 1;\n    text-align: left;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n.jie-fontselect__trigger .jie-icon {\n    width: 16px;\n    height: 16px;\n    color: var(--jie-text-dim);\n    flex: none;\n  }\n\n.jie-fontlist {\n  min-width: 180px;\n  max-height: 260px;\n  overflow-y: auto;\n  padding: 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.jie-fontlist__item {\n  padding: 8px 10px;\n  font-size: 15px;\n  text-align: left;\n  color: var(--jie-text);\n  background: transparent;\n  border: 0;\n  border-radius: var(--jie-radius-sm);\n  cursor: pointer;\n}\n\n.jie-fontlist__item:hover {\n    background: var(--jie-accent-soft);\n  }\n\n.jie-fontlist__item[aria-pressed='true'] {\n    color: var(--jie-accent);\n    background: var(--jie-accent-soft);\n  }\n\n.jie-swatch {\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: 1px solid var(--jie-border);\n  border-radius: var(--jie-radius-sm);\n  box-shadow: inset 0 0 0 2px var(--jie-surface);\n  cursor: pointer;\n  transition:\n    transform 0.1s ease,\n    box-shadow 0.1s ease;\n}\n\n.jie-swatch:hover {\n    transform: scale(1.08);\n  }\n\n.jie-swatch[aria-pressed='true'] {\n    box-shadow:\n      inset 0 0 0 2px var(--jie-surface),\n      0 0 0 2px var(--jie-accent);\n  }\n\n/* slider — the whole control occupies the shared height and centres its track */\n.jie-slider {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  height: var(--jie-control-h);\n  width: clamp(180px, 28vw, 300px);\n}\n\n.jie-slider__label {\n  font-size: var(--jie-font-sm);\n  color: var(--jie-text-dim);\n  white-space: nowrap;\n}\n\n.jie-slider__value {\n  min-width: 2.5ch;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n}\n\n/*\n * Fully custom range so it looks identical across evergreen browsers (the\n * native `accent-color` only themes the colour, not the track/thumb shapes).\n * The filled portion is driven by `--jie-range-fill` (set per render by the\n * slider component) on WebKit, and by the native `::-moz-range-progress` on\n * Firefox.\n */\n.jie-range {\n  --jie-range-fill: 50%;\n  appearance: none;\n  flex: 1;\n  min-width: 0;\n  height: 16px; /* hit area */\n  background: transparent;\n  cursor: pointer;\n}\n.jie-range::-webkit-slider-runnable-track {\n    height: 4px;\n    border-radius: 999px;\n    background: linear-gradient(\n      to right,\n      var(--jie-accent) var(--jie-range-fill),\n      var(--jie-border) var(--jie-range-fill)\n    );\n  }\n.jie-range::-webkit-slider-thumb {\n    appearance: none;\n    margin-top: -6px; /* centre the 16px thumb on the 4px track */\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: var(--jie-accent);\n    border: 2px solid var(--jie-bg);\n    box-shadow: 0 1px 3px rgba(20, 24, 40, 0.25);\n  }\n.jie-range::-moz-range-track {\n    height: 4px;\n    border-radius: 999px;\n    background: var(--jie-border);\n  }\n.jie-range::-moz-range-progress {\n    height: 4px;\n    border-radius: 999px;\n    background: var(--jie-accent);\n  }\n.jie-range::-moz-range-thumb {\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: var(--jie-accent);\n    border: 2px solid var(--jie-bg);\n    box-shadow: 0 1px 3px rgba(20, 24, 40, 0.25);\n  }\n.jie-range:focus-visible {\n    outline: none;\n  }\n.jie-range:focus-visible::-webkit-slider-thumb {\n    box-shadow: 0 0 0 4px var(--jie-accent-soft);\n  }\n.jie-range:focus-visible::-moz-range-thumb {\n    box-shadow: 0 0 0 4px var(--jie-accent-soft);\n  }\n\n/* filter thumbnails */\n.jie-thumbs {\n  display: flex;\n  gap: 12px;\n  width: 100%;\n  padding-bottom: 4px;\n  overflow-x: auto;\n  justify-content: flex-start;\n}\n\n.jie-thumb {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  align-items: center;\n  padding: 4px;\n  font-size: 12px;\n  color: var(--jie-text-dim);\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n}\n\n.jie-thumb canvas,.jie-thumb .jie-thumb__swatch {\n    width: 76px;\n    height: 56px;\n    border-radius: var(--jie-radius-sm);\n    border: 2px solid transparent;\n    object-fit: cover;\n    background: var(--jie-stage);\n  }\n\n.jie-thumb[aria-pressed='true'] {\n    color: var(--jie-accent);\n  }\n\n.jie-thumb[aria-pressed='true'] canvas,.jie-thumb[aria-pressed='true'] .jie-thumb__swatch {\n      border-color: var(--jie-accent);\n    }\n\n/* ---- responsive / mobile ------------------------------------------------ */\n@media (max-width: 720px) {\n  .jie {\n    --jie-rail-w: 100%;\n  }\n\n  .jie-topbar__meta {\n    display: none;\n  }\n\n  .jie-body {\n    flex-direction: column-reverse;\n  }\n\n  .jie-rail {\n    flex-direction: row;\n    width: 100%;\n    border-right: 0;\n    border-top: 1px solid var(--jie-border);\n    overflow-x: auto;\n  }\n\n  .jie-tab {\n    flex: 0 0 auto;\n    min-width: 72px;\n  }\n\n  .jie-canvas-wrap {\n    margin: 10px;\n  }\n\n  .jie-input {\n    width: 100px;\n  }\n}\n\n@media (hover: none) {\n  .jie-crop__handle {\n    width: 22px;\n    height: 22px;\n  }\n}"));
+            document.head.appendChild(elementStyle);
+        }
+    } catch (e) {
+        console.error('vite-plugin-css-injected-by-js', e);
+    }
+})();
+const DEFAULT_FONTS = Object.freeze([
+    {
+        label: "Arial",
+        value: "Arial, Helvetica, sans-serif"
+    },
+    {
+        label: "Helvetica",
+        value: "Helvetica, Arial, sans-serif"
+    },
+    {
+        label: "Verdana",
+        value: "Verdana, Geneva, sans-serif"
+    },
+    {
+        label: "Tahoma",
+        value: "Tahoma, Geneva, sans-serif"
+    },
+    {
+        label: "Trebuchet MS",
+        value: '"Trebuchet MS", Helvetica, sans-serif'
+    },
+    {
+        label: "Times New Roman",
+        value: '"Times New Roman", Times, serif'
+    },
+    {
+        label: "Georgia",
+        value: 'Georgia, "Times New Roman", serif'
+    },
+    {
+        label: "Courier New",
+        value: '"Courier New", Courier, monospace'
+    },
+    {
+        label: "Impact",
+        value: "Impact, Haettenschweiler, sans-serif"
+    }
+]);
+const IDENTITY_FINETUNE = Object.freeze({
+    brightness: 0,
+    contrast: 0,
+    saturation: 0,
+    warmth: 0,
+    blur: 0
+});
+const DEFAULT_PALETTE = Object.freeze([
+    "#ffffff",
+    "#1a1a1a",
+    "#9e9689",
+    "#4a90e2",
+    "#54b98a",
+    "#f2c94c",
+    "#eb5757",
+    "#a29bfe",
+    "#8b5cf6",
+    "#f178b6",
+    "#f2994a",
+    "#b8e454",
+    "#7ec8f0",
+    "#5b6470",
+    "#d8d2c8",
+    "#eeeeee"
+]);
+function createIdentityDesign() {
+    return {
+        flip: {
+            horizontal: false,
+            vertical: false
+        },
+        rotate: 0,
+        angle: 0,
+        crop: null,
+        resize: null,
+        finetune: {
+            ...IDENTITY_FINETUNE
+        },
+        filter: "original",
+        annotations: [],
+        focus: null
+    };
+}
+function createInitialState() {
+    return {
+        source: null,
+        status: "idle",
+        busyVisible: false,
+        error: null,
+        activeTab: "adjust",
+        activeTool: "crop",
+        zoom: 1,
+        history: {
+            entries: [
+                createIdentityDesign()
+            ],
+            index: 0
+        },
+        selectedAnnotationId: null,
+        theme: "light",
+        showToolbar: true,
+        locale: "en",
+        minCropSize: 8,
+        minResizeSize: 1,
+        palette: [
+            ...DEFAULT_PALETTE
+        ],
+        fonts: DEFAULT_FONTS.map((f)=>({
+                ...f
+            })),
+        activePopover: null,
+        viewport: null
+    };
+}
+const MAX_HISTORY = 100;
+function present(history) {
+    const value = history.entries[history.index];
+    if (value === void 0) {
+        throw new RangeError(`history index ${history.index} is out of bounds`);
+    }
+    return value;
+}
+function canUndo(history) {
+    return history.index > 0;
+}
+function canRedo(history) {
+    return history.index < history.entries.length - 1;
+}
+function commit(history, next) {
+    const kept = history.entries.slice(0, history.index + 1);
+    kept.push(next);
+    const overflow = Math.max(0, kept.length - MAX_HISTORY);
+    const entries = overflow > 0 ? kept.slice(overflow) : kept;
+    return {
+        entries,
+        index: entries.length - 1
+    };
+}
+function replacePresent(history, next) {
+    const entries = history.entries.slice();
+    entries[history.index] = next;
+    return {
+        entries,
+        index: history.index
+    };
+}
+function goTo(history, index) {
+    const clamped = clamp$1(index, 0, history.entries.length - 1);
+    return clamped === history.index ? history : {
+        ...history,
+        index: clamped
+    };
+}
+function step(history, delta) {
+    return goTo(history, history.index + delta);
+}
+function clamp$1(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function reduce(state, patch) {
+    let next = state;
+    if (patch.activeTab !== void 0) next = set(next, {
+        activeTab: patch.activeTab
+    });
+    if (patch.activeTool !== void 0) next = set(next, {
+        activeTool: patch.activeTool
+    });
+    if (patch.zoom !== void 0) next = set(next, {
+        zoom: sanitizeZoom(patch.zoom)
+    });
+    if (patch.theme !== void 0) next = set(next, {
+        theme: patch.theme
+    });
+    if (patch.showToolbar !== void 0) {
+        next = set(next, {
+            showToolbar: patch.showToolbar
+        });
+    }
+    if (patch.locale !== void 0) next = set(next, {
+        locale: patch.locale
+    });
+    if (patch.minCropSize !== void 0) {
+        next = set(next, {
+            minCropSize: Math.max(1, patch.minCropSize)
+        });
+    }
+    if (patch.minResizeSize !== void 0) {
+        next = set(next, {
+            minResizeSize: Math.max(1, patch.minResizeSize)
+        });
+    }
+    if (patch.palette !== void 0) next = set(next, {
+        palette: patch.palette
+    });
+    if (patch.fonts !== void 0) next = set(next, {
+        fonts: patch.fonts
+    });
+    if (patch.activePopover !== void 0) next = set(next, {
+        activePopover: patch.activePopover
+    });
+    if (patch.status !== void 0) {
+        next = set(next, {
+            status: patch.status
+        });
+        if (patch.status !== "exporting" && next.busyVisible) {
+            next = set(next, {
+                busyVisible: false
+            });
+        }
+    }
+    if (patch.busyVisible !== void 0) next = set(next, {
+        busyVisible: patch.busyVisible
+    });
+    if (patch.error !== void 0) next = set(next, {
+        error: patch.error
+    });
+    if (patch.source !== void 0) next = set(next, {
+        source: patch.source
+    });
+    if (patch.viewport !== void 0) next = set(next, {
+        viewport: patch.viewport
+    });
+    if (patch.selectedAnnotationId !== void 0) {
+        next = set(next, {
+            selectedAnnotationId: patch.selectedAnnotationId
+        });
+    }
+    if (patch.resetHistory) {
+        next = set(next, {
+            history: {
+                entries: [
+                    createIdentityDesign()
+                ],
+                index: 0
+            }
+        });
+    }
+    if (patch.resetDesign) {
+        next = set(next, {
+            history: commit(next.history, createIdentityDesign())
+        });
+    }
+    if (patch.design !== void 0) {
+        const merged = mergeDesign(present(next.history), patch.design);
+        const history = patch.commit === false ? replacePresent(next.history, merged) : commit(next.history, merged);
+        next = set(next, {
+            history
+        });
+    }
+    if (patch.history !== void 0) {
+        const nav = patch.history;
+        const history = "step" in nav ? step(next.history, nav.step) : goTo(next.history, nav.index);
+        next = set(next, {
+            history
+        });
+    }
+    return next;
+}
+function mergeDesign(base, patch) {
+    return {
+        ...base,
+        ...patch,
+        flip: patch.flip ? {
+            ...base.flip,
+            ...patch.flip
+        } : base.flip,
+        finetune: patch.finetune ? {
+            ...base.finetune,
+            ...patch.finetune
+        } : base.finetune,
+        rotate: patch.rotate !== void 0 ? normalizeRotation(patch.rotate) : base.rotate
+    };
+}
+function normalizeRotation(deg) {
+    return (Math.round(deg / 90) * 90 % 360 + 360) % 360;
+}
+function sanitizeZoom(zoom) {
+    if (!Number.isFinite(zoom) || zoom <= 0) return 1;
+    return Math.min(Math.max(zoom, 0.01), 64);
+}
+function set(state, partial) {
+    for (const key of Object.keys(partial)){
+        if (state[key] !== partial[key]) {
+            return {
+                ...state,
+                ...partial
+            };
+        }
+    }
+    return state;
+}
+class CoalescingScheduler {
+    request(task) {
+        this.pending = task;
+        if (this.handle === null) {
+            this.handle = this.schedule(()=>this.flush());
+        }
+    }
+    flush() {
+        if (this.handle !== null) {
+            this.clear(this.handle);
+            this.handle = null;
+        }
+        const task = this.pending;
+        this.pending = null;
+        if (task) task();
+    }
+    cancel() {
+        if (this.handle !== null) {
+            this.clear(this.handle);
+            this.handle = null;
+        }
+        this.pending = null;
+    }
+    constructor(schedule, clear){
+        _define_property(this, "pending", null);
+        _define_property(this, "handle", null);
+        this.schedule = schedule;
+        this.clear = clear;
+    }
+}
+function createRafScheduler() {
+    if (typeof requestAnimationFrame !== "function") {
+        return new CoalescingScheduler((cb)=>setTimeout(cb, 16), (h)=>clearTimeout(h));
+    }
+    const clear = (h)=>{
+        const handle = h;
+        cancelAnimationFrame(handle.raf);
+        if (handle.timer !== null) {
+            clearTimeout(handle.timer);
+            handle.timer = null;
+        }
+    };
+    const schedule = (cb)=>{
+        const handle = {
+            raf: 0,
+            timer: null
+        };
+        const run = ()=>{
+            clear(handle);
+            cb();
+        };
+        handle.raf = requestAnimationFrame(run);
+        handle.timer = setTimeout(run, 100);
+        return handle;
+    };
+    return new CoalescingScheduler(schedule, clear);
+}
+function createMicrotaskScheduler() {
+    let cancelled = false;
+    const schedule = (cb)=>{
+        cancelled = false;
+        queueMicrotask(()=>{
+            if (!cancelled) cb();
+        });
+        return 1;
+    };
+    const clear = ()=>{
+        cancelled = true;
+    };
+    return new CoalescingScheduler(schedule, clear);
+}
+class SyncScheduler {
+    request(task) {
+        this.pending = task;
+        this.flush();
+    }
+    flush() {
+        const task = this.pending;
+        this.pending = null;
+        if (task) task();
+    }
+    cancel() {
+        this.pending = null;
+    }
+    constructor(){
+        _define_property(this, "pending", null);
+    }
+}
+class Store {
+    getState() {
+        return this.state;
+    }
+    /**
+   * Apply a patch. If the reducer produced a new state reference, schedule a
+   * (coalesced) notification. Returns the resulting state for convenience.
+   */ update(patch) {
+        const next = this.reducer(this.state, patch);
+        if (next !== this.state) {
+            this.state = next;
+            this.scheduler.request(()=>this.notify());
+        }
+        return this.state;
+    }
+    /** Subscribe to state changes. The listener is *not* called immediately. */ subscribe(listener) {
+        this.listeners.add(listener);
+        return ()=>{
+            this.listeners.delete(listener);
+        };
+    }
+    /** Force any pending batched notification to run now. */ flush() {
+        this.scheduler.flush();
+    }
+    /** Drop listeners and cancel pending work. */ destroy() {
+        this.scheduler.cancel();
+        this.listeners.clear();
+    }
+    notify() {
+        if (this.notifying) return;
+        this.notifying = true;
+        try {
+            for (const listener of this.listeners)listener(this.state);
+        } finally{
+            this.notifying = false;
+        }
+    }
+    constructor(options = {}){
+        _define_property(this, "state", void 0);
+        _define_property(this, "reducer", void 0);
+        _define_property(this, "scheduler", void 0);
+        _define_property(this, "listeners", /* @__PURE__ */ new Set());
+        _define_property(this, "notifying", false);
+        this.state = options.initialState ?? createInitialState();
+        this.reducer = options.reducer ?? reduce;
+        this.scheduler = options.scheduler ?? new SyncScheduler();
+    }
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function roundRect(rect) {
+    const x = Math.round(rect.x);
+    const y = Math.round(rect.y);
+    return {
+        x,
+        y,
+        width: Math.round(rect.x + rect.width) - x,
+        height: Math.round(rect.y + rect.height) - y
+    };
+}
+function clampRectToBounds(rect, bounds) {
+    const width = clamp(rect.width, 1, bounds.width);
+    const height = clamp(rect.height, 1, bounds.height);
+    const x = clamp(rect.x, 0, bounds.width - width);
+    const y = clamp(rect.y, 0, bounds.height - height);
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+function applyAspectRatio(rect, ratio) {
+    if (ratio === null || !Number.isFinite(ratio) || ratio <= 0) return rect;
+    const cx = rect.x + rect.width / 2;
+    const cy = rect.y + rect.height / 2;
+    const area = rect.width * rect.height;
+    const height = Math.sqrt(area / ratio);
+    const width = height * ratio;
+    return {
+        x: cx - width / 2,
+        y: cy - height / 2,
+        width,
+        height
+    };
+}
+function fitScale(content, container, allowUpscale = true) {
+    const scale = Math.min(container.width / content.width, container.height / content.height);
+    return allowUpscale ? scale : Math.min(scale, 1);
+}
+function lockedResize(source, next, locked, min = 1) {
+    const ratio = source.width / source.height;
+    if (!locked) {
+        return {
+            width: Math.max(min, Math.round(next.width ?? source.width)),
+            height: Math.max(min, Math.round(next.height ?? source.height))
+        };
+    }
+    if (next.width !== void 0) {
+        const width = Math.max(min, Math.round(next.width));
+        return {
+            width,
+            height: Math.max(min, Math.round(width / ratio))
+        };
+    }
+    if (next.height !== void 0) {
+        const height = Math.max(min, Math.round(next.height));
+        return {
+            width: Math.max(min, Math.round(height * ratio)),
+            height
+        };
+    }
+    return {
+        ...source
+    };
+}
+function fitWithinLimits(w, h, limits) {
+    let scale = 1;
+    if (limits.maxSize && limits.maxSize > 0) {
+        scale = Math.min(scale, limits.maxSize / Math.max(w, h));
+    }
+    if (limits.maxPixels && limits.maxPixels > 0) {
+        scale = Math.min(scale, Math.sqrt(limits.maxPixels / (w * h)));
+    }
+    return Math.min(1, scale);
+}
+function fitInViewport(content, container) {
+    const scale = Math.min(container.width / content.width, container.height / content.height) || 0;
+    const width = content.width * scale;
+    const height = content.height * scale;
+    return {
+        scale,
+        width,
+        height,
+        offsetX: (container.width - width) / 2,
+        offsetY: (container.height - height) / 2
+    };
+}
+function centerRect(size, bounds) {
+    return {
+        x: (bounds.width - size.width) / 2,
+        y: (bounds.height - size.height) / 2,
+        width: size.width,
+        height: size.height
+    };
+}
+function selectDesign(state) {
+    return present(state.history);
+}
+function selectIsCropping(state) {
+    return state.activeTab === "adjust" && state.activeTool === "crop";
+}
+function selectPreviewDesign(state) {
+    const design = selectDesign(state);
+    return selectIsCropping(state) ? {
+        ...design,
+        crop: null,
+        angle: 0
+    } : design;
+}
+function selectCanUndo(state) {
+    return canUndo(state.history);
+}
+function selectCanRedo(state) {
+    return canRedo(state.history);
+}
+function selectIsDirty(state) {
+    return state.history.index > 0 || state.history.entries.length > 1;
+}
+function selectOrientedSize(state) {
+    if (!state.source) return null;
+    const design = selectDesign(state);
+    const { width, height } = state.source;
+    const swap = design.rotate === 90 || design.rotate === 270;
+    return swap ? {
+        width: height,
+        height: width
+    } : {
+        width,
+        height
+    };
+}
+function selectOutputSize(state) {
+    const design = selectDesign(state);
+    if (design.resize) return design.resize;
+    if (design.crop) {
+        return {
+            width: Math.round(design.crop.width),
+            height: Math.round(design.crop.height)
+        };
+    }
+    return selectOrientedSize(state);
+}
+function selectPreviewContentSize(state) {
+    return selectIsCropping(state) ? selectOrientedSize(state) : selectOutputSize(state);
+}
+const VIEWPORT_PADDING = 44;
+function selectViewportFit(state) {
+    const content = selectPreviewContentSize(state);
+    if (!content || !state.viewport) return null;
+    const avail = {
+        width: Math.max(1, state.viewport.width - VIEWPORT_PADDING * 2),
+        height: Math.max(1, state.viewport.height - VIEWPORT_PADDING * 2)
+    };
+    const base = fitInViewport(content, avail);
+    const scale = base.scale * state.zoom;
+    const width = content.width * scale;
+    const height = content.height * scale;
+    return {
+        scale,
+        width,
+        height,
+        offsetX: (state.viewport.width - width) / 2,
+        offsetY: (state.viewport.height - height) / 2,
+        content
+    };
+}
+function selectCropAngle(state) {
+    return selectDesign(state).angle;
+}
+function selectEffectiveCrop(state) {
+    const design = selectDesign(state);
+    if (design.crop) return design.crop;
+    const size = selectOrientedSize(state);
+    return size ? {
+        x: 0,
+        y: 0,
+        width: size.width,
+        height: size.height
+    } : null;
+}
+const selectors = /*#__PURE__*/ Object.freeze(/*#__PURE__*/ Object.defineProperty({
+    __proto__: null,
+    VIEWPORT_PADDING,
+    selectCanRedo,
+    selectCanUndo,
+    selectCropAngle,
+    selectDesign,
+    selectEffectiveCrop,
+    selectIsCropping,
+    selectIsDirty,
+    selectOrientedSize,
+    selectOutputSize,
+    selectPreviewContentSize,
+    selectPreviewDesign,
+    selectViewportFit
+}, Symbol.toStringTag, {
+    value: 'Module'
+}));
+const DEFAULT_MIN_CROP = 8;
+function moveCrop(rect, dx, dy, bounds) {
+    return clampRectToBounds({
+        ...rect,
+        x: rect.x + dx,
+        y: rect.y + dy
+    }, bounds);
+}
+function resizeCrop(rect, handle, dx, dy, bounds, ratio = null, min = DEFAULT_MIN_CROP) {
+    if (handle === "move") return moveCrop(rect, dx, dy, bounds);
+    const left = handle === "nw" || handle === "sw";
+    const top = handle === "nw" || handle === "ne";
+    let { x, y, width, height } = rect;
+    if (left) {
+        const nx = clamp(x + dx, 0, x + width - min);
+        width += x - nx;
+        x = nx;
+    } else {
+        width = clamp(width + dx, min, bounds.width - x);
+    }
+    if (top) {
+        const ny = clamp(y + dy, 0, y + height - min);
+        height += y - ny;
+        y = ny;
+    } else {
+        height = clamp(height + dy, min, bounds.height - y);
+    }
+    let next = {
+        x,
+        y,
+        width,
+        height
+    };
+    if (ratio !== null && ratio > 0) next = enforceRatio(next, handle, ratio);
+    return clampRectToBounds(next, bounds);
+}
+function enforceRatio(rect, handle, ratio) {
+    const height = rect.width / ratio;
+    const anchorTop = handle === "sw" || handle === "se";
+    const y = anchorTop ? rect.y : rect.y + rect.height - height;
+    return {
+        ...rect,
+        height,
+        y
+    };
+}
+const DEG = Math.PI / 180;
+const SIGNS = {
+    nw: [
+        -1,
+        -1
+    ],
+    ne: [
+        1,
+        -1
+    ],
+    sw: [
+        -1,
+        1
+    ],
+    se: [
+        1,
+        1
+    ]
+};
+function cropCenter(rect) {
+    return {
+        x: rect.x + rect.width / 2,
+        y: rect.y + rect.height / 2
+    };
+}
+function rotatedCorner(rect, angleDeg, sx, sy) {
+    const c = cropCenter(rect);
+    const a = angleDeg * DEG;
+    const cos = Math.cos(a);
+    const sin = Math.sin(a);
+    const hx = sx * rect.width / 2;
+    const hy = sy * rect.height / 2;
+    return {
+        x: c.x + hx * cos - hy * sin,
+        y: c.y + hx * sin + hy * cos
+    };
+}
+function pointerAngle(cx, cy, px, py) {
+    return Math.atan2(py - cy, px - cx) / DEG;
+}
+function moveCropFree(rect, dx, dy) {
+    return {
+        ...rect,
+        x: rect.x + dx,
+        y: rect.y + dy
+    };
+}
+function resizeRotatedCrop(rect, angleDeg, handle, dx, dy, min = DEFAULT_MIN_CROP) {
+    if (handle === "move") return moveCropFree(rect, dx, dy);
+    const [sx, sy] = SIGNS[handle];
+    const dragged = rotatedCorner(rect, angleDeg, sx, sy);
+    const fixed = rotatedCorner(rect, angleDeg, -sx, -sy);
+    const nd = {
+        x: dragged.x + dx,
+        y: dragged.y + dy
+    };
+    const cx = (nd.x + fixed.x) / 2;
+    const cy = (nd.y + fixed.y) / 2;
+    const a = angleDeg * DEG;
+    const ux = Math.cos(a);
+    const uy = Math.sin(a);
+    const diffx = nd.x - fixed.x;
+    const diffy = nd.y - fixed.y;
+    const width = Math.max(min, Math.abs(diffx * ux + diffy * uy));
+    const height = Math.max(min, Math.abs(diffx * -uy + diffy * ux));
+    return {
+        x: cx - width / 2,
+        y: cy - height / 2,
+        width,
+        height
+    };
+}
+const CHANNELS = 4;
+function createRaster(width, height, data) {
+    assertPositiveInt(width, "width");
+    assertPositiveInt(height, "height");
+    const expected = width * height * CHANNELS;
+    if (data && data.length !== expected) {
+        throw new RangeError(`data length ${data.length} does not match ${width}x${height} (${expected})`);
+    }
+    return {
+        width,
+        height,
+        data: data ?? new Uint8ClampedArray(expected)
+    };
+}
+function solidRaster(width, height, [r, g, b, a]) {
+    const img = createRaster(width, height);
+    for(let i = 0; i < img.data.length; i += CHANNELS){
+        img.data[i] = r;
+        img.data[i + 1] = g;
+        img.data[i + 2] = b;
+        img.data[i + 3] = a;
+    }
+    return img;
+}
+function cloneRaster(img) {
+    return createRaster(img.width, img.height, new Uint8ClampedArray(img.data));
+}
+function indexOf(img, x, y) {
+    return (y * img.width + x) * CHANNELS;
+}
+function assertPositiveInt(value, name) {
+    if (!Number.isInteger(value) || value <= 0) {
+        throw new RangeError(`${name} must be a positive integer, got ${value}`);
+    }
+}
+function flip(img, axis) {
+    const out = createRaster(img.width, img.height);
+    const { width, height } = img;
+    for(let y = 0; y < height; y++){
+        for(let x = 0; x < width; x++){
+            const sx = axis === "horizontal" ? width - 1 - x : x;
+            const sy = axis === "vertical" ? height - 1 - y : y;
+            copyPixel(img, indexOf(img, sx, sy), out, indexOf(out, x, y));
+        }
+    }
+    return out;
+}
+function rotate90(img, degrees) {
+    const turns = (Math.round(degrees / 90) % 4 + 4) % 4;
+    if (turns === 0) return createRaster(img.width, img.height, new Uint8ClampedArray(img.data));
+    const { width: w, height: h } = img;
+    const swap = turns === 1 || turns === 3;
+    const out = createRaster(swap ? h : w, swap ? w : h);
+    for(let y = 0; y < h; y++){
+        for(let x = 0; x < w; x++){
+            let dx;
+            let dy;
+            if (turns === 1) {
+                dx = h - 1 - y;
+                dy = x;
+            } else if (turns === 2) {
+                dx = w - 1 - x;
+                dy = h - 1 - y;
+            } else {
+                dx = y;
+                dy = w - 1 - x;
+            }
+            copyPixel(img, indexOf(img, x, y), out, indexOf(out, dx, dy));
+        }
+    }
+    return out;
+}
+function crop(img, rect) {
+    const safe = clampRectToBounds(roundRect(rect), img);
+    const out = createRaster(safe.width, safe.height);
+    for(let y = 0; y < safe.height; y++){
+        const srcStart = indexOf(img, safe.x, safe.y + y);
+        const dstStart = indexOf(out, 0, y);
+        out.data.set(img.data.subarray(srcStart, srcStart + safe.width * CHANNELS), dstStart);
+    }
+    return out;
+}
+function resize(img, size) {
+    const width = Math.max(1, Math.round(size.width));
+    const height = Math.max(1, Math.round(size.height));
+    if (width === img.width && height === img.height) {
+        return createRaster(width, height, new Uint8ClampedArray(img.data));
+    }
+    let cur = img;
+    while(cur.width >= width * 2)cur = halveWidth(cur);
+    while(cur.height >= height * 2)cur = halveHeight(cur);
+    if (cur.width === width && cur.height === height) {
+        return createRaster(width, height, new Uint8ClampedArray(cur.data));
+    }
+    return bilinearResize(cur, width, height);
+}
+function halveWidth(img) {
+    const w = Math.ceil(img.width / 2);
+    const out = createRaster(w, img.height);
+    for(let y = 0; y < img.height; y++){
+        for(let x = 0; x < w; x++){
+            const i0 = indexOf(img, 2 * x, y);
+            const i1 = indexOf(img, Math.min(2 * x + 1, img.width - 1), y);
+            const di = indexOf(out, x, y);
+            for(let c = 0; c < CHANNELS; c++)out.data[di + c] = (img.data[i0 + c] + img.data[i1 + c]) / 2;
+        }
+    }
+    return out;
+}
+function halveHeight(img) {
+    const h = Math.ceil(img.height / 2);
+    const out = createRaster(img.width, h);
+    for(let y = 0; y < h; y++){
+        for(let x = 0; x < img.width; x++){
+            const i0 = indexOf(img, x, 2 * y);
+            const i1 = indexOf(img, x, Math.min(2 * y + 1, img.height - 1));
+            const di = indexOf(out, x, y);
+            for(let c = 0; c < CHANNELS; c++)out.data[di + c] = (img.data[i0 + c] + img.data[i1 + c]) / 2;
+        }
+    }
+    return out;
+}
+function bilinearResize(img, width, height) {
+    const out = createRaster(width, height);
+    const sx = img.width / width;
+    const sy = img.height / height;
+    for(let y = 0; y < height; y++){
+        const fy = (y + 0.5) * sy - 0.5;
+        const y0 = Math.floor(fy);
+        const wy = fy - y0;
+        const y0c = clampIndex(y0, img.height);
+        const y1c = clampIndex(y0 + 1, img.height);
+        for(let x = 0; x < width; x++){
+            const fx = (x + 0.5) * sx - 0.5;
+            const x0 = Math.floor(fx);
+            const wx = fx - x0;
+            const x0c = clampIndex(x0, img.width);
+            const x1c = clampIndex(x0 + 1, img.width);
+            const i00 = indexOf(img, x0c, y0c);
+            const i10 = indexOf(img, x1c, y0c);
+            const i01 = indexOf(img, x0c, y1c);
+            const i11 = indexOf(img, x1c, y1c);
+            const di = indexOf(out, x, y);
+            for(let c = 0; c < CHANNELS; c++){
+                const top = lerp(img.data[i00 + c], img.data[i10 + c], wx);
+                const bottom = lerp(img.data[i01 + c], img.data[i11 + c], wx);
+                out.data[di + c] = lerp(top, bottom, wy);
+            }
+        }
+    }
+    return out;
+}
+function sampleRotatedRect(img, rect, angleDeg) {
+    const w = Math.max(1, Math.round(rect.width));
+    const h = Math.max(1, Math.round(rect.height));
+    const out = createRaster(w, h);
+    const cx = rect.x + rect.width / 2;
+    const cy = rect.y + rect.height / 2;
+    const rad = angleDeg * Math.PI / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    for(let oy = 0; oy < h; oy++){
+        const ly = oy + 0.5 - h / 2;
+        for(let ox = 0; ox < w; ox++){
+            const lx = ox + 0.5 - w / 2;
+            const sx = cx + lx * cos - ly * sin - 0.5;
+            const sy = cy + lx * sin + ly * cos - 0.5;
+            sampleBilinear(img, sx, sy, out, indexOf(out, ox, oy));
+        }
+    }
+    return out;
+}
+function sampleBilinear(img, fx, fy, out, di) {
+    if (fx <= -1 || fy <= -1 || fx >= img.width || fy >= img.height) {
+        out.data[di] = 0;
+        out.data[di + 1] = 0;
+        out.data[di + 2] = 0;
+        out.data[di + 3] = 0;
+        return;
+    }
+    const x0 = Math.floor(fx);
+    const y0 = Math.floor(fy);
+    const wx = fx - x0;
+    const wy = fy - y0;
+    const x0c = clampIndex(x0, img.width);
+    const x1c = clampIndex(x0 + 1, img.width);
+    const y0c = clampIndex(y0, img.height);
+    const y1c = clampIndex(y0 + 1, img.height);
+    const i00 = indexOf(img, x0c, y0c);
+    const i10 = indexOf(img, x1c, y0c);
+    const i01 = indexOf(img, x0c, y1c);
+    const i11 = indexOf(img, x1c, y1c);
+    for(let c = 0; c < CHANNELS; c++){
+        const top = lerp(img.data[i00 + c], img.data[i10 + c], wx);
+        const bottom = lerp(img.data[i01 + c], img.data[i11 + c], wx);
+        out.data[di + c] = lerp(top, bottom, wy);
+    }
+}
+function copyPixel(src, si, dst, di) {
+    dst.data[di] = src.data[si];
+    dst.data[di + 1] = src.data[si + 1];
+    dst.data[di + 2] = src.data[si + 2];
+    dst.data[di + 3] = src.data[si + 3];
+}
+function clampIndex(value, length) {
+    return value < 0 ? 0 : value >= length ? length - 1 : value;
+}
+function lerp(a, b, t) {
+    return a + (b - a) * t;
+}
+const REC_601 = {
+    r: 0.299,
+    g: 0.587,
+    b: 0.114
+};
+function mapRgb(img, fn) {
+    const out = createRaster(img.width, img.height, new Uint8ClampedArray(img.data));
+    for(let i = 0; i < out.data.length; i += CHANNELS){
+        out.data[i] = fn(out.data[i], 0);
+        out.data[i + 1] = fn(out.data[i + 1], 1);
+        out.data[i + 2] = fn(out.data[i + 2], 2);
+    }
+    return out;
+}
+function brightness(img, amount) {
+    if (amount === 0) return clone(img);
+    const delta = amount / 100 * 255;
+    return mapRgb(img, (v1)=>v1 + delta);
+}
+function contrast(img, amount) {
+    if (amount === 0) return clone(img);
+    const c = amount / 100 * 255;
+    const factor = 259 * (c + 255) / (255 * (259 - c));
+    return mapRgb(img, (v1)=>factor * (v1 - 128) + 128);
+}
+function saturation(img, amount) {
+    if (amount === 0) return clone(img);
+    const s = 1 + amount / 100;
+    const out = createRaster(img.width, img.height, new Uint8ClampedArray(img.data));
+    for(let i = 0; i < out.data.length; i += CHANNELS){
+        const r = out.data[i];
+        const g = out.data[i + 1];
+        const b = out.data[i + 2];
+        const lum = REC_601.r * r + REC_601.g * g + REC_601.b * b;
+        out.data[i] = lum + (r - lum) * s;
+        out.data[i + 1] = lum + (g - lum) * s;
+        out.data[i + 2] = lum + (b - lum) * s;
+    }
+    return out;
+}
+function warmth(img, amount) {
+    if (amount === 0) return clone(img);
+    const delta = amount / 100 * 40;
+    return mapRgb(img, (v1, ch)=>ch === 0 ? v1 + delta : ch === 2 ? v1 - delta : v1);
+}
+function blur(img, amount, maxRadius = 20) {
+    const radius = Math.round(Math.max(0, Math.min(100, amount)) / 100 * maxRadius);
+    if (radius <= 0) return clone(img);
+    return boxBlurPass(boxBlurPass(img, radius, "horizontal"), radius, "vertical");
+}
+function applyFinetune(img, finetune) {
+    let out = img;
+    out = brightness(out, finetune.brightness);
+    out = contrast(out, finetune.contrast);
+    out = saturation(out, finetune.saturation);
+    out = warmth(out, finetune.warmth);
+    out = blur(out, finetune.blur);
+    return out;
+}
+function boxBlurPass(img, radius, axis) {
+    const out = createRaster(img.width, img.height);
+    const { width, height, data } = img;
+    const horizontal = axis === "horizontal";
+    const outer = horizontal ? height : width;
+    const inner = horizontal ? width : height;
+    const window1 = radius * 2 + 1;
+    for(let o = 0; o < outer; o++){
+        for(let c = 0; c < CHANNELS; c++){
+            let sum = 0;
+            for(let k = -radius; k <= radius; k++){
+                sum += sampleChannel(data, width, height, horizontal, o, k, c);
+            }
+            for(let i = 0; i < inner; i++){
+                const di = (horizontal ? o * width + i : i * width + o) * CHANNELS + c;
+                out.data[di] = sum / window1;
+                const leaving = sampleChannel(data, width, height, horizontal, o, i - radius, c);
+                const entering = sampleChannel(data, width, height, horizontal, o, i + radius + 1, c);
+                sum += entering - leaving;
+            }
+        }
+    }
+    return out;
+}
+function sampleChannel(data, width, height, horizontal, outer, inner, channel) {
+    const limit = (horizontal ? width : height) - 1;
+    const i = inner < 0 ? 0 : inner > limit ? limit : inner;
+    const idx = (horizontal ? outer * width + i : i * width + outer) * CHANNELS + channel;
+    return data[idx];
+}
+function clone(img) {
+    return createRaster(img.width, img.height, new Uint8ClampedArray(img.data));
+}
+const adjustments = /*#__PURE__*/ Object.freeze(/*#__PURE__*/ Object.defineProperty({
+    __proto__: null,
+    applyFinetune,
+    blur,
+    brightness,
+    contrast,
+    saturation,
+    warmth
+}, Symbol.toStringTag, {
+    value: 'Module'
+}));
+function perPixel(img, fn) {
+    const out = createRaster(img.width, img.height, new Uint8ClampedArray(img.data));
+    for(let i = 0; i < out.data.length; i += CHANNELS){
+        const [r, g, b] = fn(out.data[i], out.data[i + 1], out.data[i + 2]);
+        out.data[i] = r;
+        out.data[i + 1] = g;
+        out.data[i + 2] = b;
+    }
+    return out;
+}
+const original = (img)=>createRaster(img.width, img.height, new Uint8ClampedArray(img.data));
+const invert = (img)=>perPixel(img, (r, g, b)=>[
+            255 - r,
+            255 - g,
+            255 - b
+        ]);
+const grayscale = (img)=>perPixel(img, (r, g, b)=>{
+        const l = 0.299 * r + 0.587 * g + 0.114 * b;
+        return [
+            l,
+            l,
+            l
+        ];
+    });
+const sepia = (img)=>perPixel(img, (r, g, b)=>[
+            0.393 * r + 0.769 * g + 0.189 * b,
+            0.349 * r + 0.686 * g + 0.168 * b,
+            0.272 * r + 0.534 * g + 0.131 * b
+        ]);
+const solarize = (img)=>perPixel(img, (r, g, b)=>[
+            r < 128 ? r : 255 - r,
+            g < 128 ? g : 255 - g,
+            b < 128 ? b : 255 - b
+        ]);
+const clarendon = (img)=>warmth(saturation(contrast(img, 20), 25), -10);
+const gingham = (img)=>warmth(saturation(contrast(img, -10), -15), 12);
+const REGISTRY = /* @__PURE__ */ new Map();
+function registerFilter(def) {
+    REGISTRY.set(def.id, def);
+    return ()=>{
+        if (REGISTRY.get(def.id) === def) REGISTRY.delete(def.id);
+    };
+}
+function getFilter(id) {
+    return REGISTRY.get(id);
+}
+function listFilters() {
+    return [
+        ...REGISTRY.values()
+    ];
+}
+function applyFilter(img, id) {
+    const def = REGISTRY.get(id);
+    return def ? def.apply(img) : original(img);
+}
+const BUILT_INS = [
+    {
+        id: "original",
+        label: "Original",
+        apply: original
+    },
+    {
+        id: "invert",
+        label: "Invert",
+        apply: invert
+    },
+    {
+        id: "grayscale",
+        label: "Black & White",
+        apply: grayscale
+    },
+    {
+        id: "sepia",
+        label: "Sepia",
+        apply: sepia
+    },
+    {
+        id: "solarize",
+        label: "Solarize",
+        apply: solarize
+    },
+    {
+        id: "clarendon",
+        label: "Clarendon",
+        apply: clarendon
+    },
+    {
+        id: "gingham",
+        label: "Gingham",
+        apply: gingham
+    }
+];
+BUILT_INS.forEach(registerFilter);
+function toImageData(raster) {
+    return new ImageData(raster.data, raster.width, raster.height);
+}
+function createTranslator(messages = {}, fallback = {}) {
+    return (message, params)=>{
+        const template = messages[message] ?? fallback[message] ?? message;
+        return params ? interpolate(template, params) : template;
+    };
+}
+function interpolate(template, params) {
+    return template.replace(/\{(\w+)\}/g, (whole, key)=>key in params ? String(params[key]) : whole);
+}
+class LocaleRegistry {
+    /** Add (or merge into) a locale. Returns a disposer restoring the prior state. */ register(locale) {
+        const prev = this.locales.get(locale.id);
+        this.locales.set(locale.id, {
+            ...prev ?? {},
+            ...locale.messages
+        });
+        return ()=>{
+            if (prev) this.locales.set(locale.id, prev);
+            else this.locales.delete(locale.id);
+        };
+    }
+    has(id) {
+        return this.locales.has(id);
+    }
+    get(id) {
+        return this.locales.get(id);
+    }
+    list() {
+        return [
+            ...this.locales.keys()
+        ];
+    }
+    /** Build a translator for `id`; unknown ids yield the identity (English). */ translator(id) {
+        return createTranslator(this.locales.get(id) ?? {});
+    }
+    constructor(){
+        _define_property(this, "locales", /* @__PURE__ */ new Map());
+    }
+}
+const DOM_PROPERTIES = /* @__PURE__ */ new Set([
+    "value",
+    "checked",
+    "disabled",
+    "selected",
+    "innerHTML"
+]);
+function h(tag, props = {}, children = []) {
+    return {
+        kind: "element",
+        tag,
+        key: props.key,
+        props,
+        children: normalizeChildren(children)
+    };
+}
+function text(value) {
+    return {
+        kind: "text",
+        text: String(value)
+    };
+}
+function normalizeChildren(children) {
+    const list = Array.isArray(children) ? children : [
+        children
+    ];
+    const out = [];
+    for (const child of list){
+        if (child === null || child === void 0 || child === false || child === true) continue;
+        out.push(typeof child === "object" ? child : text(child));
+    }
+    return out;
+}
+function isElement(node) {
+    return node.kind === "element";
+}
+const EMPTY_PROPS = {};
+class Renderer {
+    /** Render `next` as the single managed child of the container. */ render(next) {
+        if (this.prev === null) {
+            const node = this.mount(next);
+            this.host.insert(this.container, node, null);
+        } else if (sameVNode(this.prev, next)) {
+            this.patch(this.prev, next);
+        } else {
+            const node = this.mount(next);
+            const old = this.prev.node;
+            this.host.insert(this.container, node, this.host.nextSibling(old));
+            this.host.remove(this.container, old);
+        }
+        this.prev = next;
+    }
+    /** Detach the managed subtree. */ unmount() {
+        if (this.prev) {
+            this.host.remove(this.container, this.prev.node);
+            this.prev = null;
+        }
+    }
+    mount(vnode) {
+        if (!isElement(vnode)) {
+            const node = this.host.createText(vnode.text);
+            vnode.node = node;
+            return node;
+        }
+        const el = this.host.createElement(vnode.tag);
+        vnode.node = el;
+        this.applyProps(el, EMPTY_PROPS, vnode.props);
+        for (const child of vnode.children){
+            this.host.insert(el, this.mount(child), null);
+        }
+        return el;
+    }
+    patch(oldV, newV) {
+        const node = oldV.node;
+        newV.node = node;
+        if (!isElement(newV) || !isElement(oldV)) {
+            if (!isElement(newV) && newV.text !== oldV.text) {
+                this.host.setText(node, newV.text);
+            }
+            return node;
+        }
+        this.applyProps(node, oldV.props, newV.props);
+        this.patchChildren(node, oldV.children, newV.children);
+        return node;
+    }
+    // --- props ---------------------------------------------------------------
+    applyProps(node, oldProps, newProps) {
+        this.applyClass(node, oldProps.class, newProps.class);
+        this.applyStyle(node, oldProps.style ?? {}, newProps.style ?? {});
+        this.applyEvents(node, oldProps.on ?? {}, newProps.on ?? {});
+        for (const name of Object.keys(newProps)){
+            if (isReserved(name)) continue;
+            const value = newProps[name];
+            if (value === oldProps[name]) continue;
+            this.applyAttr(node, name, value);
+        }
+        for (const name of Object.keys(oldProps)){
+            if (isReserved(name) || name in newProps) continue;
+            if (DOM_PROPERTIES.has(name)) this.host.setProperty(node, name, "");
+            else this.host.removeAttribute(node, name);
+        }
+    }
+    applyAttr(node, name, value) {
+        if (DOM_PROPERTIES.has(name)) {
+            this.host.setProperty(node, name, value);
+        } else if (value === false || value === null || value === void 0) {
+            this.host.removeAttribute(node, name);
+        } else {
+            this.host.setAttribute(node, name, value === true ? "" : stringifyAttr(value));
+        }
+    }
+    applyClass(node, oldClass, newClass) {
+        if (oldClass === newClass) return;
+        if (newClass) this.host.setAttribute(node, "class", newClass);
+        else this.host.removeAttribute(node, "class");
+    }
+    applyStyle(node, oldStyle, newStyle) {
+        for (const prop of Object.keys(newStyle)){
+            if (newStyle[prop] !== oldStyle[prop]) this.host.setStyle(node, prop, String(newStyle[prop]));
+        }
+        for (const prop of Object.keys(oldStyle)){
+            if (!(prop in newStyle)) this.host.removeStyle(node, prop);
+        }
+    }
+    applyEvents(node, oldOn, newOn) {
+        let map = this.events.get(node);
+        for (const type of Object.keys(oldOn)){
+            if (!(type in newOn) && map?.has(type)) {
+                this.host.removeEventListener(node, type, map.get(type).wrapper);
+                map.delete(type);
+            }
+        }
+        for (const type of Object.keys(newOn)){
+            const handler = newOn[type];
+            const existing = map?.get(type);
+            if (existing) {
+                existing.handler = handler;
+                continue;
+            }
+            if (!map) {
+                map = /* @__PURE__ */ new Map();
+                this.events.set(node, map);
+            }
+            const binding = {
+                handler,
+                wrapper: (event)=>binding.handler(event)
+            };
+            map.set(type, binding);
+            this.host.addEventListener(node, type, binding.wrapper);
+        }
+    }
+    // --- keyed children diff (snabbdom four-pointer algorithm) ---------------
+    patchChildren(parent, oldCh, newCh) {
+        let oldStart = 0;
+        let oldEnd = oldCh.length - 1;
+        let newStart = 0;
+        let newEnd = newCh.length - 1;
+        let keyMap = null;
+        while(oldStart <= oldEnd && newStart <= newEnd){
+            const os = oldCh[oldStart];
+            const oe = oldCh[oldEnd];
+            const ns = newCh[newStart];
+            const ne = newCh[newEnd];
+            if (!sameVNode(os, ns)) ;
+            else {
+                this.patch(os, ns);
+                oldStart++;
+                newStart++;
+                continue;
+            }
+            if (sameVNode(oe, ne)) {
+                this.patch(oe, ne);
+                oldEnd--;
+                newEnd--;
+                continue;
+            }
+            if (sameVNode(os, ne)) {
+                this.patch(os, ne);
+                this.host.insert(parent, os.node, this.host.nextSibling(oe.node));
+                oldStart++;
+                newEnd--;
+                continue;
+            }
+            if (sameVNode(oe, ns)) {
+                this.patch(oe, ns);
+                this.host.insert(parent, oe.node, os.node);
+                oldEnd--;
+                newStart++;
+                continue;
+            }
+            keyMap ??= buildKeyMap(oldCh, oldStart, oldEnd);
+            const movedIndex = ns.key !== void 0 ? keyMap.get(ns.key) : void 0;
+            if (movedIndex === void 0) {
+                this.host.insert(parent, this.mount(ns), os.node);
+            } else {
+                const moved = oldCh[movedIndex];
+                this.patch(moved, ns);
+                moved.node = void 0;
+                this.host.insert(parent, ns.node, os.node);
+            }
+            newStart++;
+        }
+        if (oldStart > oldEnd) {
+            const anchor = newCh[newEnd + 1]?.node ?? null;
+            for(let i = newStart; i <= newEnd; i++){
+                this.host.insert(parent, this.mount(newCh[i]), anchor);
+            }
+        } else if (newStart > newEnd) {
+            for(let i = oldStart; i <= oldEnd; i++){
+                const node = oldCh[i].node;
+                if (node) this.host.remove(parent, node);
+            }
+        }
+    }
+    constructor(host, container){
+        _define_property(this, "events", /* @__PURE__ */ new WeakMap());
+        _define_property(this, "prev", null);
+        this.host = host;
+        this.container = container;
+    }
+}
+function buildKeyMap(children, start, end) {
+    const map = /* @__PURE__ */ new Map();
+    for(let i = start; i <= end; i++){
+        const key = children[i].key;
+        if (key !== void 0) map.set(key, i);
+    }
+    return map;
+}
+function sameVNode(a, b) {
+    if (a.kind !== b.kind) return false;
+    if (a.kind === "text") return true;
+    return a.tag === b.tag && a.key === b.key;
+}
+function isReserved(name) {
+    return name === "key" || name === "class" || name === "style" || name === "on";
+}
+function stringifyAttr(value) {
+    if (typeof value === "string") return value;
+    if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") {
+        return String(value);
+    }
+    return JSON.stringify(value) ?? "";
+}
+class DomHost {
+    createElement(tag) {
+        return this.doc.createElement(tag);
+    }
+    createText(value) {
+        return this.doc.createTextNode(value);
+    }
+    setText(node, value) {
+        node.textContent = value;
+    }
+    insert(parent, node, anchor) {
+        parent.insertBefore(node, anchor);
+    }
+    remove(parent, node) {
+        if (node.parentNode === parent) parent.removeChild(node);
+    }
+    parent(node) {
+        return node.parentNode;
+    }
+    nextSibling(node) {
+        return node.nextSibling;
+    }
+    setAttribute(node, name, value) {
+        node.setAttribute(name, value);
+    }
+    removeAttribute(node, name) {
+        node.removeAttribute(name);
+    }
+    setProperty(node, name, value) {
+        node[name] = value;
+    }
+    setStyle(node, prop, value) {
+        node.style.setProperty(prop, value);
+    }
+    removeStyle(node, prop) {
+        node.style.removeProperty(prop);
+    }
+    addEventListener(node, type, handler) {
+        node.addEventListener(type, handler);
+    }
+    removeEventListener(node, type, handler) {
+        node.removeEventListener(type, handler);
+    }
+    constructor(doc = document){
+        this.doc = doc;
+    }
+}
+class ToolRegistry {
+    register(tool) {
+        this.tools.set(tool.id, tool);
+        this.order.set(tool.id, tool.order ?? ToolRegistry.UNORDERED_BASE + this.seq++);
+        return ()=>{
+            if (this.tools.get(tool.id) === tool) {
+                this.tools.delete(tool.id);
+                this.order.delete(tool.id);
+            }
+        };
+    }
+    get(id) {
+        return this.tools.get(id);
+    }
+    has(id) {
+        return this.tools.has(id);
+    }
+    /** Tools sorted by their `order`, ties broken by registration sequence. */ list() {
+        return [
+            ...this.tools.values()
+        ].sort((a, b)=>(this.order.get(a.id) ?? 0) - (this.order.get(b.id) ?? 0));
+    }
+    /** The id to fall back to when the active tab is unknown. */ first() {
+        return this.list()[0];
+    }
+    constructor(){
+        _define_property(this, "tools", /* @__PURE__ */ new Map());
+        _define_property(this, "seq", 0);
+        _define_property(this, "order", /* @__PURE__ */ new Map());
+    }
+}
+/** Unordered tools sort after every explicitly-ordered one, by arrival. */ _define_property(ToolRegistry, "UNORDERED_BASE", 1e6);
+function icon(svg) {
+    return h("span", {
+        class: "jie-icon",
+        innerHTML: svg
+    });
+}
+function spinner() {
+    return h("span", {
+        class: "jie-spinner"
+    });
+}
+function button(props) {
+    const classes = [
+        "jie-btn"
+    ];
+    if (props.variant === "primary") classes.push("jie-btn--primary");
+    if (props.variant === "icon") classes.push("jie-btn--icon");
+    if (props.active) classes.push("jie-btn--active");
+    if (props.busy) classes.push("jie-btn--busy");
+    if (props.className) classes.push(props.className);
+    const children = [];
+    if (props.busy) children.push(spinner());
+    else if (props.icon) children.push(icon(props.icon));
+    if (props.label) children.push(h("span", {}, props.label));
+    return h("button", {
+        key: props.key,
+        class: classes.join(" "),
+        type: "button",
+        disabled: props.disabled ?? false,
+        title: props.title ?? props.label ?? "",
+        on: {
+            click: props.onClick
+        }
+    }, children);
+}
+function slider(props) {
+    const onStart = props.onStart;
+    const on = {
+        input: (e)=>props.onInput(Number(e.target.value))
+    };
+    if (onStart) on.pointerdown = ()=>onStart();
+    const span = props.max - props.min || 1;
+    const fill = Math.min(100, Math.max(0, (props.value - props.min) / span * 100));
+    return h("div", {
+        class: "jie-slider"
+    }, [
+        h("span", {
+            class: "jie-slider__label"
+        }, props.label),
+        h("input", {
+            class: "jie-range",
+            type: "range",
+            min: String(props.min),
+            max: String(props.max),
+            step: String(props.step ?? 1),
+            value: String(props.value),
+            style: {
+                "--jie-range-fill": `${fill}%`
+            },
+            on
+        }),
+        h("span", {
+            class: "jie-slider__value"
+        }, String(Math.round(props.value)))
+    ]);
+}
+function numberField(props) {
+    return h("label", {
+        class: "jie-field"
+    }, [
+        h("span", {}, props.label),
+        h("span", {
+            style: {
+                display: "flex",
+                "align-items": "center",
+                gap: "6px"
+            }
+        }, [
+            h("input", {
+                class: "jie-input",
+                type: "number",
+                value: String(props.value),
+                on: {
+                    change: (e)=>{
+                        const v1 = Number(e.target.value);
+                        if (Number.isFinite(v1)) props.onChange(v1);
+                    }
+                }
+            }),
+            props.suffix ? h("span", {}, props.suffix) : null
+        ])
+    ]);
+}
+function segmented(options, active, onSelect) {
+    return h("div", {
+        class: "jie-toolrow"
+    }, options.map((opt)=>button({
+            key: opt.id,
+            label: opt.label,
+            icon: opt.icon,
+            active: opt.id === active,
+            onClick: ()=>onSelect(opt.id)
+        })));
+}
+const svg = (body)=>`<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+const ICONS = {
+    adjust: svg('<path d="M4 8h2M9 8h11M4 16h11M18 16h2"/><circle cx="7.5" cy="8" r="1.6"/><circle cx="16.5" cy="16" r="1.6"/>'),
+    finetune: svg('<path d="M4 7h12M4 12h16M4 17h8"/><circle cx="18" cy="7" r="1.6"/><circle cx="12" cy="17" r="1.6"/>'),
+    filters: svg('<circle cx="9" cy="9" r="5"/><circle cx="15" cy="9" r="5"/><circle cx="12" cy="15" r="5"/>'),
+    watermark: svg('<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 15l5-4 4 3 3-2 6 4"/><circle cx="8.5" cy="9.5" r="1.4"/>'),
+    annotate: svg('<path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/>'),
+    resize: svg('<path d="M9 3H5a2 2 0 0 0-2 2v4M21 15v4a2 2 0 0 1-2 2h-4"/><path d="M8 16l8-8M16 8h-4M16 8v4"/>'),
+    crop: svg('<path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M2 6h14a2 2 0 0 1 2 2v14"/>'),
+    rotate: svg('<path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/>'),
+    flipX: svg('<path d="M12 3v18"/><path d="M8 7 4 12l4 5Z"/><path d="M16 7l4 5-4 5Z"/>'),
+    flipY: svg('<path d="M3 12h18"/><path d="M7 8 12 4l5 4Z"/><path d="M7 16l5 4 5-4Z"/>'),
+    undo: svg('<path d="M9 7 4 12l5 5"/><path d="M4 12h11a5 5 0 0 1 0 10h-1"/>'),
+    redo: svg('<path d="m15 7 5 5-5 5"/><path d="M20 12H9a5 5 0 0 0 0 10h1"/>'),
+    reset: svg('<path d="M3 12a9 9 0 1 1 2.6 6.3"/><path d="M3 21v-5h5"/>'),
+    trash: svg('<path d="M4 7h16M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13M10 11v6M14 11v6"/>'),
+    plus: svg('<path d="M12 5v14M5 12h14"/>'),
+    minus: svg('<path d="M5 12h14"/>'),
+    zoomIn: svg('<circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2M10.5 7.5v6M7.5 10.5h6"/>'),
+    zoomOut: svg('<circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2M7.5 10.5h6"/>'),
+    // 3×3 position anchors (arrows point to the corner/edge)
+    posTopLeft: svg('<path d="M17 17 7 7M7 13V7h6"/>'),
+    posTop: svg('<path d="M12 19V6M7 11l5-5 5 5"/>'),
+    posTopRight: svg('<path d="M7 17 17 7M11 7h6v6"/>'),
+    posLeft: svg('<path d="M19 12H6M11 7l-5 5 5 5"/>'),
+    posCenter: svg('<circle cx="12" cy="12" r="6.5"/><circle cx="12" cy="12" r="2" fill="currentColor" stroke="none"/>'),
+    posRight: svg('<path d="M5 12h13M13 7l5 5-5 5"/>'),
+    posBottomLeft: svg('<path d="M17 7 7 17M7 11v6h6"/>'),
+    posBottom: svg('<path d="M12 5v13M7 13l5 5 5-5"/>'),
+    posBottomRight: svg('<path d="M7 7l10 10M17 11v6h-6"/>'),
+    font: svg('<path d="M4 20 9.5 6h1L16 20M6 15h8M17 20l3-9h.5l3 9M18 17h4"/>'),
+    focus: svg('<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.5"/>'),
+    lock: svg('<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>'),
+    unlock: svg('<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 7.5-2"/>'),
+    text: svg('<path d="M5 5h14M12 5v14M9 19h6"/>'),
+    brightness: svg('<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19"/>'),
+    contrast: svg('<circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18Z" fill="currentColor" stroke="none"/>'),
+    blur: svg('<path d="M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11Z"/>'),
+    book: svg('<path d="M4 5a2 2 0 0 1 2-2h5v18H6a2 2 0 0 1-2-2Z"/><path d="M20 5a2 2 0 0 0-2-2h-5v18h5a2 2 0 0 0 2-2Z"/>')
+};
+const adjustTool = {
+    id: "adjust",
+    label: "Adjust",
+    icon: ICONS.adjust,
+    order: 0,
+    defaultTool: "crop",
+    renderPanel ({ state, update, t }) {
+        const design = selectDesign(state);
+        const cropping = selectIsCropping(state);
+        return h("div", {
+            class: "jie-toolrow"
+        }, [
+            button({
+                label: t("Crop"),
+                icon: ICONS.crop,
+                active: cropping,
+                onClick: ()=>update({
+                        activeTab: "adjust",
+                        activeTool: cropping ? null : "crop"
+                    })
+            }),
+            button({
+                label: t("Rotate"),
+                icon: ICONS.rotate,
+                onClick: ()=>update({
+                        design: {
+                            rotate: design.rotate + 90
+                        }
+                    })
+            }),
+            button({
+                label: t("Flip X"),
+                icon: ICONS.flipX,
+                onClick: ()=>update({
+                        design: {
+                            flip: {
+                                horizontal: !design.flip.horizontal
+                            }
+                        }
+                    })
+            }),
+            button({
+                label: t("Flip Y"),
+                icon: ICONS.flipY,
+                onClick: ()=>update({
+                        design: {
+                            flip: {
+                                vertical: !design.flip.vertical
+                            }
+                        }
+                    })
+            })
+        ]);
+    }
+};
+const FIELDS = [
+    {
+        id: "brightness",
+        label: "Brightness",
+        icon: ICONS.brightness,
+        min: -100,
+        max: 100
+    },
+    {
+        id: "contrast",
+        label: "Contrast",
+        icon: ICONS.contrast,
+        min: -100,
+        max: 100
+    },
+    {
+        id: "saturation",
+        label: "Saturation",
+        icon: ICONS.filters,
+        min: -100,
+        max: 100
+    },
+    {
+        id: "blur",
+        label: "Blur",
+        icon: ICONS.blur,
+        min: 0,
+        max: 100
+    },
+    {
+        id: "warmth",
+        label: "Warmth",
+        icon: ICONS.brightness,
+        min: -100,
+        max: 100
+    }
+];
+function activeField(activeTool) {
+    return FIELDS.find((f)=>f.id === activeTool) ?? FIELDS[0];
+}
+const finetuneTool = {
+    id: "finetune",
+    label: "Finetune",
+    icon: ICONS.finetune,
+    order: 1,
+    defaultTool: "brightness",
+    renderPanel ({ state, update, t }) {
+        const field = activeField(state.activeTool);
+        const finetune = selectDesign(state).finetune;
+        const value = finetune[field.id];
+        const setValue = (v1, commit)=>{
+            const patch = {
+                [field.id]: v1
+            };
+            update({
+                design: {
+                    finetune: patch
+                },
+                commit
+            });
+        };
+        return h("div", {
+            class: "jie-panel-stack",
+            style: {
+                display: "contents"
+            }
+        }, [
+            slider({
+                label: t(field.label),
+                value,
+                min: field.min,
+                max: field.max,
+                onStart: ()=>setValue(value, true),
+                onInput: (v1)=>setValue(v1, false)
+            }),
+            segmented(FIELDS.map((f)=>({
+                    id: f.id,
+                    label: t(f.label),
+                    icon: f.icon
+                })), field.id, (id)=>update({
+                    activeTab: "finetune",
+                    activeTool: id
+                }))
+        ]);
+    }
+};
+const filtersTool = {
+    id: "filters",
+    label: "Filters",
+    icon: ICONS.filters,
+    order: 2,
+    renderPanel ({ state, update, t }) {
+        const active = selectDesign(state).filter;
+        return h("div", {
+            class: "jie-thumbs"
+        }, listFilters().map((f)=>h("button", {
+                key: f.id,
+                class: "jie-thumb",
+                type: "button",
+                "aria-pressed": String(f.id === active),
+                on: {
+                    click: ()=>update({
+                            design: {
+                                filter: f.id
+                            }
+                        })
+                }
+            }, [
+                // The editor paints a live filtered preview onto this canvas after
+                // render (see ImageEditor#paintFilterThumbs).
+                h("canvas", {
+                    class: "jie-thumb__swatch",
+                    "data-jie-filter-thumb": f.id
+                }),
+                h("span", {}, t(f.label))
+            ])));
+    }
+};
+function createDefaultFocus() {
+    return {
+        shape: "radial",
+        x: 0.5,
+        y: 0.5,
+        radius: 0.28,
+        angle: 0,
+        amount: 60
+    };
+}
+function selectiveBlur(img, focus) {
+    if (focus.amount <= 0) return createRaster(img.width, img.height, new Uint8ClampedArray(img.data));
+    const blurred = blur(img, focus.amount, 32);
+    const { width: w, height: h } = img;
+    const out = createRaster(w, h);
+    const minDim = Math.min(w, h);
+    const cx = focus.x * w;
+    const cy = focus.y * h;
+    const sharpR = focus.radius * minDim;
+    const feather = Math.max(minDim * 0.06, sharpR * 0.9);
+    const rad = focus.angle * Math.PI / 180;
+    const nx = -Math.sin(rad);
+    const ny = Math.cos(rad);
+    for(let y = 0; y < h; y++){
+        for(let x = 0; x < w; x++){
+            const dx = x - cx;
+            const dy = y - cy;
+            const dist = focus.shape === "radial" ? Math.hypot(dx, dy) : Math.abs(dx * nx + dy * ny);
+            const t = smoothstep(sharpR, sharpR + feather, dist);
+            const i = indexOf(out, x, y);
+            for(let c = 0; c < CHANNELS; c++){
+                out.data[i + c] = img.data[i + c] + (blurred.data[i + c] - img.data[i + c]) * t;
+            }
+        }
+    }
+    return out;
+}
+function smoothstep(e0, e1, v1) {
+    if (e1 <= e0) return v1 >= e1 ? 1 : 0;
+    const t = Math.min(1, Math.max(0, (v1 - e0) / (e1 - e0)));
+    return t * t * (3 - 2 * t);
+}
+const focusTool = {
+    id: "focus",
+    label: "Focus",
+    icon: ICONS.focus,
+    order: 3,
+    defaultTool: "radial",
+    renderPanel ({ state, update, t }) {
+        const focus = selectDesign(state).focus ?? createDefaultFocus();
+        const enabled = selectDesign(state).focus !== null;
+        const set = (patch, commit)=>update({
+                design: {
+                    focus: {
+                        ...focus,
+                        ...patch
+                    }
+                },
+                commit
+            });
+        return h("div", {
+            class: "jie-panel-stack",
+            style: {
+                display: "contents"
+            }
+        }, [
+            h("div", {
+                class: "jie-toolrow"
+            }, [
+                slider({
+                    label: t("Intensity"),
+                    value: focus.amount,
+                    min: 0,
+                    max: 100,
+                    onStart: ()=>set({
+                            amount: focus.amount
+                        }, true),
+                    onInput: (v1)=>set({
+                            amount: v1
+                        }, false)
+                }),
+                slider({
+                    label: t("Radius"),
+                    value: Math.round(focus.radius * 100),
+                    min: 5,
+                    max: 90,
+                    onStart: ()=>set({
+                            radius: focus.radius
+                        }, true),
+                    onInput: (v1)=>set({
+                            radius: v1 / 100
+                        }, false)
+                }),
+                enabled ? button({
+                    variant: "icon",
+                    icon: ICONS.trash,
+                    title: t("Reset"),
+                    onClick: ()=>update({
+                            design: {
+                                focus: null
+                            }
+                        })
+                }) : null
+            ]),
+            segmented([
+                {
+                    id: "radial",
+                    label: t("Radial")
+                },
+                {
+                    id: "linear",
+                    label: t("Linear")
+                }
+            ], focus.shape, (id)=>set({
+                    shape: id
+                }, true))
+        ]);
+    }
+};
+function colorPicker(props) {
+    const children = [
+        h("button", {
+            class: "jie-color",
+            type: "button",
+            title: props.title ?? "Colour",
+            style: {
+                background: props.value
+            },
+            "aria-haspopup": "true",
+            "aria-expanded": String(props.open),
+            on: {
+                click: ()=>props.onToggle()
+            }
+        })
+    ];
+    if (props.open) {
+        children.push(h("div", {
+            class: "jie-popover__backdrop",
+            on: {
+                click: ()=>props.onToggle()
+            }
+        }), h("div", {
+            class: "jie-popover jie-swatches",
+            role: "listbox"
+        }, props.palette.map((color)=>h("button", {
+                key: color,
+                class: "jie-swatch",
+                type: "button",
+                title: color,
+                style: {
+                    background: color
+                },
+                "aria-pressed": String(color.toLowerCase() === props.value.toLowerCase()),
+                on: {
+                    click: ()=>props.onPick(color)
+                }
+            }))));
+    }
+    return h("div", {
+        class: "jie-colorpicker"
+    }, children);
+}
+function fontSelect(props) {
+    const current = props.fonts.find((f)=>f.value === props.value);
+    const children = [
+        h("button", {
+            class: "jie-fontselect__trigger",
+            type: "button",
+            title: props.title ?? "Font",
+            "aria-haspopup": "listbox",
+            "aria-expanded": String(props.open),
+            on: {
+                click: ()=>props.onToggle()
+            }
+        }, [
+            icon(ICONS.font),
+            h("span", {
+                style: {
+                    "font-family": props.value
+                }
+            }, current?.label ?? "Font"),
+            icon(ICONS.book)
+        ])
+    ];
+    if (props.open) {
+        children.push(h("div", {
+            class: "jie-popover__backdrop",
+            on: {
+                click: ()=>props.onToggle()
+            }
+        }), h("div", {
+            class: "jie-popover jie-fontlist",
+            role: "listbox"
+        }, props.fonts.map((f)=>h("button", {
+                key: f.value,
+                class: "jie-fontlist__item",
+                type: "button",
+                "aria-pressed": String(f.value === props.value),
+                style: {
+                    "font-family": f.value
+                },
+                on: {
+                    click: ()=>props.onPick(f.value)
+                }
+            }, f.label))));
+    }
+    return h("div", {
+        class: "jie-fontselect"
+    }, children);
+}
+const CELLS = [
+    {
+        align: "left",
+        valign: "top",
+        icon: ICONS.posTopLeft
+    },
+    {
+        align: "center",
+        valign: "top",
+        icon: ICONS.posTop
+    },
+    {
+        align: "right",
+        valign: "top",
+        icon: ICONS.posTopRight
+    },
+    {
+        align: "left",
+        valign: "middle",
+        icon: ICONS.posLeft
+    },
+    {
+        align: "center",
+        valign: "middle",
+        icon: ICONS.posCenter
+    },
+    {
+        align: "right",
+        valign: "middle",
+        icon: ICONS.posRight
+    },
+    {
+        align: "left",
+        valign: "bottom",
+        icon: ICONS.posBottomLeft
+    },
+    {
+        align: "center",
+        valign: "bottom",
+        icon: ICONS.posBottom
+    },
+    {
+        align: "right",
+        valign: "bottom",
+        icon: ICONS.posBottomRight
+    }
+];
+function positionGrid(props) {
+    return h("div", {
+        class: "jie-posgrid",
+        role: "group"
+    }, CELLS.map((cell)=>h("button", {
+            key: `${cell.valign}-${cell.align}`,
+            class: "jie-posgrid__cell",
+            type: "button",
+            "data-pos": `${cell.valign}-${cell.align}`,
+            "aria-pressed": String(cell.align === props.align && cell.valign === props.valign),
+            on: {
+                click: ()=>props.onPick(cell.align, cell.valign)
+            }
+        }, [
+            icon(cell.icon)
+        ])));
+}
+function createIdFactory(prefix = "id") {
+    let n = 0;
+    return ()=>`${prefix}-${++n}`;
+}
+const uid = createIdFactory("jie");
+function createTextAnnotation(id, overrides = {}) {
+    return {
+        id,
+        type: "text",
+        text: "Text",
+        x: 0.5,
+        y: 0.5,
+        fontSize: 0.06,
+        fontFamily: DEFAULT_FONTS[0].value,
+        color: "#eb5757",
+        bold: false,
+        italic: false,
+        align: "center",
+        valign: "middle",
+        ...overrides
+    };
+}
+function addAnnotation(list, ann) {
+    return [
+        ...list,
+        ann
+    ];
+}
+function removeAnnotation(list, id) {
+    return list.filter((a)=>a.id !== id);
+}
+function findAnnotation(list, id) {
+    if (id === null) return void 0;
+    return list.find((a)=>a.id === id);
+}
+function updateAnnotation(list, id, patch) {
+    return list.map((a)=>a.id === id ? {
+            ...a,
+            ...patch
+        } : a);
+}
+const COLOR_POPOVER = "text-color";
+const FONT_POPOVER = "text-font";
+const PAD = 0.04;
+function anchorXY(align, valign) {
+    return {
+        x: align === "left" ? PAD : align === "right" ? 1 - PAD : 0.5,
+        y: valign === "top" ? PAD : valign === "bottom" ? 1 - PAD : 0.5
+    };
+}
+const annotateTool = {
+    id: "annotate",
+    label: "Text",
+    icon: ICONS.text,
+    order: 4,
+    defaultTool: "text",
+    renderPanel ({ state, update, t }) {
+        const design = selectDesign(state);
+        const text = design.annotations[0];
+        if (!text) {
+            const addText = ()=>{
+                const ann = createTextAnnotation(uid());
+                update({
+                    design: {
+                        annotations: [
+                            ann
+                        ]
+                    },
+                    selectedAnnotationId: ann.id
+                });
+            };
+            return h("div", {
+                class: "jie-toolrow"
+            }, [
+                button({
+                    label: t("Add text"),
+                    icon: ICONS.text,
+                    variant: "primary",
+                    onClick: addText
+                })
+            ]);
+        }
+        const patch = (p)=>update({
+                design: {
+                    annotations: updateAnnotation(design.annotations, text.id, p)
+                }
+            });
+        return h("div", {
+            class: "jie-toolrow"
+        }, [
+            h("input", {
+                class: "jie-input",
+                type: "text",
+                value: text.text,
+                on: {
+                    input: (e)=>patch({
+                            text: e.target.value
+                        })
+                }
+            }),
+            fontSelect({
+                value: text.fontFamily,
+                fonts: state.fonts,
+                title: t("Font"),
+                open: state.activePopover === FONT_POPOVER,
+                onToggle: ()=>update({
+                        activePopover: state.activePopover === FONT_POPOVER ? null : FONT_POPOVER
+                    }),
+                onPick: (fontFamily)=>{
+                    patch({
+                        fontFamily
+                    });
+                    update({
+                        activePopover: null
+                    });
+                }
+            }),
+            colorPicker({
+                value: text.color,
+                palette: state.palette,
+                title: t("Colour"),
+                open: state.activePopover === COLOR_POPOVER,
+                onToggle: ()=>update({
+                        activePopover: state.activePopover === COLOR_POPOVER ? null : COLOR_POPOVER
+                    }),
+                onPick: (color)=>{
+                    patch({
+                        color
+                    });
+                    update({
+                        activePopover: null
+                    });
+                }
+            }),
+            button({
+                label: "B",
+                className: "jie-btn--bold",
+                active: text.bold,
+                onClick: ()=>patch({
+                        bold: !text.bold
+                    })
+            }),
+            button({
+                label: "I",
+                className: "jie-btn--italic",
+                active: text.italic,
+                onClick: ()=>patch({
+                        italic: !text.italic
+                    })
+            }),
+            slider({
+                label: t("Size"),
+                value: Math.round(text.fontSize * 100),
+                min: 1,
+                max: 40,
+                onInput: (v1)=>patch({
+                        fontSize: v1 / 100
+                    })
+            }),
+            positionGrid({
+                align: text.align,
+                valign: text.valign,
+                onPick: (align, valign)=>patch({
+                        align,
+                        valign,
+                        ...anchorXY(align, valign)
+                    })
+            }),
+            button({
+                variant: "icon",
+                icon: ICONS.trash,
+                title: t("Delete"),
+                onClick: ()=>update({
+                        design: {
+                            annotations: removeAnnotation(design.annotations, text.id)
+                        },
+                        selectedAnnotationId: null
+                    })
+            })
+        ]);
+    }
+};
+const resizeTool = {
+    id: "resize",
+    label: "Resize",
+    icon: ICONS.resize,
+    order: 5,
+    renderPanel ({ state, update, t }) {
+        const size = selectOutputSize(state);
+        if (!size) return null;
+        const locked = state.activeTool !== "unlocked";
+        const apply = (next)=>update({
+                design: {
+                    resize: lockedResize(size, next, locked, state.minResizeSize)
+                }
+            });
+        return h("div", {
+            class: "jie-fieldrow"
+        }, [
+            numberField({
+                label: t("Width"),
+                value: size.width,
+                suffix: t("px"),
+                onChange: (w)=>apply({
+                        width: w
+                    })
+            }),
+            button({
+                variant: "icon",
+                icon: locked ? ICONS.lock : ICONS.unlock,
+                title: locked ? t("Aspect ratio locked") : t("Aspect ratio unlocked"),
+                onClick: ()=>update({
+                        activeTab: "resize",
+                        activeTool: locked ? "unlocked" : "locked"
+                    })
+            }),
+            numberField({
+                label: t("Height"),
+                value: size.height,
+                suffix: t("px"),
+                onChange: (hgt)=>apply({
+                        height: hgt
+                    })
+            }),
+            button({
+                variant: "icon",
+                icon: ICONS.reset,
+                title: t("Reset size"),
+                onClick: ()=>update({
+                        design: {
+                            resize: null
+                        }
+                    })
+            })
+        ]);
+    }
+};
+function createBuiltinTools() {
+    return [
+        adjustTool,
+        finetuneTool,
+        filtersTool,
+        focusTool,
+        annotateTool,
+        resizeTool
+    ];
+}
+function execute(source, design) {
+    let img = source;
+    if (design.flip.horizontal) img = flip(img, "horizontal");
+    if (design.flip.vertical) img = flip(img, "vertical");
+    if (design.rotate !== 0) img = rotate90(img, design.rotate);
+    if (design.angle !== 0) {
+        const rect = design.crop ?? {
+            x: 0,
+            y: 0,
+            width: img.width,
+            height: img.height
+        };
+        img = sampleRotatedRect(img, rect, design.angle);
+    } else if (design.crop) {
+        img = crop(img, design.crop);
+    }
+    if (design.resize) img = resize(img, design.resize);
+    img = applyFinetune(img, design.finetune);
+    img = applyFilter(img, design.filter);
+    if (design.focus) img = selectiveBlur(img, design.focus);
+    return img;
+}
+function isIdentity(design) {
+    return !design.flip.horizontal && !design.flip.vertical && design.rotate === 0 && design.angle === 0 && design.crop === null && design.resize === null && design.filter === "original" && design.focus === null && design.annotations.length === 0 && design.finetune.brightness === 0 && design.finetune.contrast === 0 && design.finetune.saturation === 0 && design.finetune.warmth === 0 && design.finetune.blur === 0;
+}
+function flattenOnBackground(img, [br, bg, bb]) {
+    const out = createRaster(img.width, img.height);
+    for(let i = 0; i < img.data.length; i += CHANNELS){
+        const a = img.data[i + 3] / 255;
+        const ia = 1 - a;
+        out.data[i] = img.data[i] * a + br * ia;
+        out.data[i + 1] = img.data[i + 1] * a + bg * ia;
+        out.data[i + 2] = img.data[i + 2] * a + bb * ia;
+        out.data[i + 3] = 255;
+    }
+    return out;
+}
+function parseHexColor(css) {
+    const hex = css.trim().replace(/^#/, "");
+    if (/^[0-9a-f]{3}$/i.test(hex)) {
+        return [
+            expand(hex[0]),
+            expand(hex[1]),
+            expand(hex[2])
+        ];
+    }
+    if (/^[0-9a-f]{6}$/i.test(hex)) {
+        return [
+            byte(hex, 0),
+            byte(hex, 2),
+            byte(hex, 4)
+        ];
+    }
+    return [
+        255,
+        255,
+        255
+    ];
+}
+function expand(nibble) {
+    return parseInt(nibble + nibble, 16);
+}
+function byte(hex, at) {
+    return parseInt(hex.slice(at, at + 2), 16);
+}
+const ALPHALESS = /image\/(jpe?g|bmp)/i;
+function defaultCanvasFactory(width, height) {
+    if (typeof document === "undefined") {
+        throw new Error("No DOM available: provide a CanvasFactory to the codec");
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    return {
+        get width () {
+            return canvas.width;
+        },
+        set width (v){
+            canvas.width = v;
+        },
+        get height () {
+            return canvas.height;
+        },
+        set height (v){
+            canvas.height = v;
+        },
+        getContext: (t)=>canvas.getContext(t),
+        toBlobAsync: (type, quality)=>new Promise((resolve, reject)=>{
+                canvas.toBlob((blob)=>blob ? resolve(blob) : reject(new Error("canvas.toBlob returned null")), type, quality);
+            })
+    };
+}
+class CanvasImageCodec {
+    async decode(blob) {
+        const bitmap = await this.toBitmap(blob);
+        const scale = fitWithinLimits(bitmap.width, bitmap.height, {
+            maxSize: this.maxSize,
+            maxPixels: this.maxPixels
+        });
+        const w = Math.max(1, Math.round(bitmap.width * scale));
+        const h = Math.max(1, Math.round(bitmap.height * scale));
+        const canvas = this.createCanvas(w, h);
+        const ctx = this.context(canvas);
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = "high";
+        ctx.drawImage(bitmap, 0, 0, w, h);
+        if ("close" in bitmap && typeof bitmap.close === "function") bitmap.close();
+        const imageData = ctx.getImageData(0, 0, w, h);
+        return createRaster(imageData.width, imageData.height, imageData.data);
+    }
+    async encode(raster, options = {}) {
+        const { type = "image/png", quality = 0.92, background } = options;
+        const flat = background !== void 0 || ALPHALESS.test(type) ? flattenOnBackground(raster, parseHexColor(background ?? "#ffffff")) : raster;
+        const canvas = this.createCanvas(flat.width, flat.height);
+        const ctx = this.context(canvas);
+        ctx.putImageData(toImageData(flat), 0, 0);
+        return canvas.toBlobAsync(type, quality);
+    }
+    context(canvas) {
+        const ctx = canvas.getContext("2d");
+        if (!ctx) throw new Error("Unable to acquire a 2D canvas context");
+        return ctx;
+    }
+    async toBitmap(blob) {
+        if (typeof createImageBitmap === "function") {
+            return createImageBitmap(blob, {
+                imageOrientation: "from-image"
+            });
+        }
+        return new Promise((resolve, reject)=>{
+            const url = URL.createObjectURL(blob);
+            const img = new Image();
+            img.style.imageOrientation = "from-image";
+            img.onload = ()=>{
+                URL.revokeObjectURL(url);
+                resolve(img);
+            };
+            img.onerror = ()=>{
+                URL.revokeObjectURL(url);
+                reject(new Error("Failed to decode image blob"));
+            };
+            img.src = url;
+        });
+    }
+    constructor(createCanvas = defaultCanvasFactory, limits = {}){
+        _define_property(this, "maxPixels", void 0);
+        _define_property(this, "maxSize", void 0);
+        this.createCanvas = createCanvas;
+        this.maxPixels = limits.maxPixels ?? 16777216;
+        this.maxSize = limits.maxSize;
+    }
+}
+function resolveText(ann, size) {
+    const fontPx = Math.max(1, Math.round(ann.fontSize * size.height));
+    const weight = ann.bold ? "bold" : "normal";
+    const slant = ann.italic ? "italic" : "normal";
+    return {
+        text: ann.text,
+        x: Math.round(ann.x * size.width),
+        y: Math.round(ann.y * size.height),
+        fontPx,
+        font: `${slant} ${weight} ${fontPx}px ${ann.fontFamily}`,
+        color: ann.color,
+        align: ann.align,
+        baseline: ann.valign
+    };
+}
+function isText(ann) {
+    return ann.type === "text";
+}
+function compositeAnnotations(createCanvas, raster, annotations) {
+    if (annotations.length === 0) return raster;
+    const canvas = createCanvas(raster.width, raster.height);
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Unable to acquire a 2D canvas context");
+    ctx.putImageData(toImageData(raster), 0, 0);
+    for (const ann of annotations){
+        if (!isText(ann)) continue;
+        const r = resolveText(ann, raster);
+        ctx.font = r.font;
+        ctx.fillStyle = r.color;
+        ctx.textAlign = r.align;
+        ctx.textBaseline = r.baseline;
+        drawWrapped(ctx, r);
+    }
+    const out = ctx.getImageData(0, 0, raster.width, raster.height);
+    return createRaster(out.width, out.height, out.data);
+}
+function drawWrapped(ctx, r) {
+    const lines = r.text.split("\n");
+    const lineHeight = r.fontPx * 1.2;
+    const span = (lines.length - 1) * lineHeight;
+    const startY = r.baseline === "middle" ? r.y - span / 2 : r.baseline === "bottom" ? r.y - span : r.y;
+    lines.forEach((line, i)=>ctx.fillText(line, r.x, startY + i * lineHeight));
+}
+class ImageProcessor {
+    /** Decode a blob into the editor's working raster. */ decode(blob) {
+        return this.codec.decode(blob);
+    }
+    /** Apply a full design: pure pipeline first, then annotation compositing. */ render(source, design) {
+        const pixels = execute(source, design);
+        return compositeAnnotations(this.createCanvas, pixels, design.annotations);
+    }
+    /** Render a design and encode the result to a blob. */ async toBlob(source, design, options) {
+        return this.codec.encode(this.render(source, design), options);
+    }
+    constructor(deps){
+        _define_property(this, "codec", void 0);
+        _define_property(this, "createCanvas", void 0);
+        this.codec = deps.codec;
+        this.createCanvas = deps.createCanvas;
+    }
+}
+function createDefaultProcessor(createCanvas = defaultCanvasFactory, limits) {
+    return new ImageProcessor({
+        codec: new CanvasImageCodec(createCanvas, limits),
+        createCanvas
+    });
+}
+function renderApp(state, ctx) {
+    return h("div", {
+        class: "jie",
+        "data-theme": state.theme
+    }, [
+        state.showToolbar ? renderTopBar(state, ctx) : null,
+        h("div", {
+            class: "jie-body"
+        }, [
+            renderRail(state, ctx),
+            renderStage(state, ctx)
+        ])
+    ]);
+}
+function renderTopBar(state, ctx) {
+    const size = selectOutputSize(state);
+    const fit = selectViewportFit(state);
+    const percent = fit ? Math.round(fit.scale * 100) : Math.round(state.zoom * 100);
+    const t = ctx.t;
+    const busy = state.status === "loading" || state.status === "exporting";
+    const spinning = state.status === "exporting" && state.busyVisible;
+    return h("header", {
+        class: "jie-topbar"
+    }, [
+        h("div", {
+            class: "jie-topbar__save"
+        }, [
+            button({
+                label: t("Save"),
+                variant: "primary",
+                onClick: ()=>ctx.onSave(),
+                disabled: !state.source || busy,
+                busy: spinning
+            }),
+            button({
+                label: t("Save as"),
+                onClick: ()=>ctx.onSaveAs(),
+                disabled: !state.source || busy,
+                busy: spinning
+            })
+        ]),
+        h("div", {
+            class: "jie-topbar__meta"
+        }, [
+            size ? h("span", {}, `${size.width} x ${size.height} px`) : null,
+            icon(ICONS.book),
+            h("div", {
+                class: "jie-zoom"
+            }, [
+                button({
+                    variant: "icon",
+                    icon: ICONS.zoomOut,
+                    title: t("Zoom out"),
+                    onClick: ()=>zoom(ctx, state, 1 / 1.2)
+                }),
+                h("span", {}, `${percent}%`),
+                button({
+                    variant: "icon",
+                    icon: ICONS.zoomIn,
+                    title: t("Zoom in"),
+                    onClick: ()=>zoom(ctx, state, 1.2)
+                })
+            ])
+        ]),
+        h("div", {
+            class: "jie-topbar__actions"
+        }, [
+            button({
+                variant: "icon",
+                icon: ICONS.reset,
+                title: t("Reset"),
+                disabled: !selectIsDirty(state),
+                onClick: ()=>ctx.onReset()
+            }),
+            button({
+                variant: "icon",
+                icon: ICONS.undo,
+                title: t("Undo"),
+                disabled: !selectCanUndo(state),
+                onClick: ()=>ctx.update({
+                        history: {
+                            step: -1
+                        }
+                    })
+            }),
+            button({
+                variant: "icon",
+                icon: ICONS.redo,
+                title: t("Redo"),
+                disabled: !selectCanRedo(state),
+                onClick: ()=>ctx.update({
+                        history: {
+                            step: 1
+                        }
+                    })
+            })
+        ])
+    ]);
+}
+function renderRail(state, ctx) {
+    return h("nav", {
+        class: "jie-rail"
+    }, ctx.tools.map((tool)=>h("button", {
+            key: tool.id,
+            class: "jie-tab",
+            type: "button",
+            "aria-selected": String(state.activeTab === tool.id),
+            on: {
+                click: ()=>ctx.update({
+                        activeTab: tool.id,
+                        activeTool: tool.defaultTool ?? null
+                    })
+            }
+        }, [
+            icon(tool.icon),
+            h("span", {}, ctx.t(tool.label))
+        ])));
+}
+function renderStage(state, ctx) {
+    const active = ctx.tools.find((tool)=>tool.id === state.activeTab) ?? ctx.tools[0];
+    const panel = active?.renderPanel({
+        state,
+        update: ctx.update,
+        t: ctx.t
+    }) ?? null;
+    return h("div", {
+        class: "jie-stage"
+    }, [
+        h("div", {
+            class: "jie-canvas-wrap",
+            "data-jie-canvas-wrap": ""
+        }, [
+            // The editor paints pixels onto this canvas imperatively after each render.
+            h("canvas", {
+                class: "jie-canvas",
+                "data-jie-canvas": ""
+            }),
+            renderCropOverlay(state, ctx),
+            renderStatusOverlay(state, ctx)
+        ]),
+        panel ? h("div", {
+            class: "jie-panel"
+        }, [
+            panel
+        ]) : null
+    ]);
+}
+function renderStatusOverlay(state, ctx) {
+    if (state.status === "loading") {
+        return h("div", {
+            class: "jie-overlay",
+            "data-jie-loading": ""
+        }, [
+            spinner()
+        ]);
+    }
+    if (state.status === "error" && state.error) {
+        return h("div", {
+            class: "jie-overlay jie-overlay--error",
+            "data-jie-error": ""
+        }, [
+            h("span", {}, ctx.t("Failed to load the image")),
+            h("span", {
+                class: "jie-overlay__detail"
+            }, state.error)
+        ]);
+    }
+    return null;
+}
+function renderCropOverlay(state, ctx) {
+    if (!selectIsCropping(state)) return null;
+    const fit = selectViewportFit(state);
+    const crop = selectEffectiveCrop(state);
+    if (!fit || !crop) return null;
+    const angle = selectCropAngle(state);
+    const style = {
+        left: `${fit.offsetX + crop.x * fit.scale}px`,
+        top: `${fit.offsetY + crop.y * fit.scale}px`,
+        width: `${crop.width * fit.scale}px`,
+        height: `${crop.height * fit.scale}px`,
+        transform: `rotate(${angle}deg)`
+    };
+    const handles = [
+        "nw",
+        "ne",
+        "sw",
+        "se"
+    ];
+    return h("div", {
+        class: "jie-crop",
+        style,
+        on: {
+            pointerdown: (e)=>ctx.beginCropDrag("move", e)
+        }
+    }, [
+        // rotation knob, centred above the frame
+        h("div", {
+            key: "rotate",
+            class: "jie-crop__rotate",
+            title: "Rotate",
+            on: {
+                pointerdown: (e)=>{
+                    e.stopPropagation();
+                    ctx.beginCropRotate(e);
+                }
+            }
+        }),
+        ...handles.map((handle)=>h("div", {
+                key: handle,
+                class: "jie-crop__handle",
+                "data-h": handle,
+                on: {
+                    pointerdown: (e)=>{
+                        e.stopPropagation();
+                        ctx.beginCropDrag(handle, e);
+                    }
+                }
+            }))
+    ]);
+}
+function zoom(ctx, state, factor) {
+    ctx.update({
+        zoom: state.zoom * factor
+    });
+}
+function paintPreview(canvas, raster, viewport, fit) {
+    const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+    canvas.width = Math.max(1, Math.round(viewport.width * dpr));
+    canvas.height = Math.max(1, Math.round(viewport.height * dpr));
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, viewport.width, viewport.height);
+    const off = document.createElement("canvas");
+    off.width = raster.width;
+    off.height = raster.height;
+    const offCtx = off.getContext("2d");
+    if (!offCtx) return;
+    offCtx.putImageData(toImageData(raster), 0, 0);
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = "high";
+    ctx.drawImage(off, fit.offsetX, fit.offsetY, fit.width, fit.height);
+}
+class ImageEditor {
+    /** The current immutable state snapshot. */ get state() {
+        return this.store.getState();
+    }
+    /** The one universal mutation entry point. Returns `this` for chaining. */ update(patch) {
+        this.store.update(patch);
+        return this;
+    }
+    /**
+   * Programmatically trigger **Save** — exports the current design and invokes
+   * the `onSave` handler (and fires a `jie:save` DOM event). Lets a host that
+   * hides the built-in toolbar (`showToolbar: false`) drive saving from its own
+   * UI. No-op until an image is loaded.
+   */ async save() {
+        return this.handleSave();
+    }
+    /** Programmatically trigger **Save as** — like {@link save} but for `onSaveAs`. */ async saveAs() {
+        return this.handleSaveAs();
+    }
+    /**
+   * Reset every edit back to the original (behind the configured `confirm`
+   * gate). Equivalent to the built-in Reset button.
+   */ reset() {
+        this.handleReset();
+        return this;
+    }
+    /** Apply an extension. Returns `this`. */ use(plugin) {
+        const dispose = plugin.setup(this.api());
+        if (typeof dispose === "function") this.disposers.push(dispose);
+        return this;
+    }
+    /** Load an image blob; resets the design and re-fits the preview. */ async fromBlob(blob) {
+        this.store.update({
+            status: "loading",
+            error: null
+        });
+        try {
+            const raster = await this.processor.decode(blob);
+            if (this.destroyed) return this;
+            this.source = raster;
+            this.previewSource = downscale(raster, this.previewMaxSize);
+            this.thumbSource = downscale(raster, 160);
+            this.thumbVersion++;
+            this.store.update({
+                source: {
+                    width: raster.width,
+                    height: raster.height,
+                    name: blob instanceof File ? blob.name : null,
+                    mimeType: blob.type || "image/png"
+                },
+                resetHistory: true,
+                // a freshly loaded image starts with a clean, empty history
+                status: "ready"
+            });
+        } catch (error) {
+            this.store.update({
+                status: "error",
+                error: error instanceof Error ? error.message : String(error)
+            });
+        }
+        return this;
+    }
+    /** Render the current design at full resolution and encode it to a blob. */ async toBlob(options) {
+        if (!this.source) throw new Error("No image loaded — call fromBlob() first");
+        const design = selectDesign(this.store.getState());
+        this.store.update({
+            status: "exporting"
+        });
+        try {
+            if (design.annotations.length > 0 && typeof document !== "undefined" && document.fonts) {
+                await document.fonts.ready;
+            }
+            return await this.processor.toBlob(this.source, design, options);
+        } finally{
+            this.store.update({
+                status: "ready"
+            });
+        }
+    }
+    /** Tear down listeners, observers, and the rendered tree. */ destroy() {
+        if (this.destroyed) return;
+        this.destroyed = true;
+        this.clearBusyTimer();
+        this.dragCleanup?.();
+        this.resizeObserver?.disconnect();
+        for (const dispose of this.disposers.splice(0))dispose();
+        this.renderer.unmount();
+        this.store.destroy();
+    }
+    // --- internals -----------------------------------------------------------
+    api() {
+        return {
+            registerTool: (tool)=>this.registry.register(tool),
+            registerFilter: (def)=>registerFilter(def),
+            registerLocale: (locale)=>this.locales.register(locale),
+            getState: ()=>this.store.getState(),
+            update: (patch)=>this.store.update(patch)
+        };
+    }
+    /** Translator for the currently active locale. */ translator() {
+        return this.locales.translator(this.store.getState().locale);
+    }
+    appContext() {
+        return {
+            update: (patch)=>this.store.update(patch),
+            tools: this.registry.list(),
+            t: this.translator(),
+            onSave: ()=>void this.handleSave(),
+            onSaveAs: ()=>void this.handleSaveAs(),
+            onReset: ()=>this.handleReset(),
+            beginCropDrag: (handle, event)=>this.beginCropDrag(handle, event),
+            beginCropRotate: (event)=>this.beginCropRotate(event)
+        };
+    }
+    /** Reset every edit, behind a confirmation prompt. */ handleReset() {
+        if (!selectIsDirty(this.store.getState())) return;
+        if (this.confirm(this.translator()("Reset all changes? You can still undo afterwards."))) {
+            this.store.update({
+                resetDesign: true
+            });
+        }
+    }
+    render() {
+        if (this.destroyed) return;
+        this.renderer.render(renderApp(this.store.getState(), this.appContext()));
+        this.ensureViewportObserver();
+        this.paint();
+        this.paintFilterThumbs();
+    }
+    async handleSave() {
+        if (!this.canExport()) return;
+        const blob = await this.toBlob();
+        this.onSaveCb?.(blob, this);
+        this.container.dispatchEvent(new CustomEvent("jie:save", {
+            detail: {
+                blob
+            },
+            bubbles: true
+        }));
+    }
+    async handleSaveAs() {
+        if (!this.canExport()) return;
+        const blob = await this.toBlob();
+        this.onSaveAsCb?.(blob, this);
+        this.container.dispatchEvent(new CustomEvent("jie:saveas", {
+            detail: {
+                blob
+            },
+            bubbles: true
+        }));
+    }
+    /** Saving needs a loaded image and no export/load already in flight. */ canExport() {
+        const { status } = this.store.getState();
+        return this.source !== null && status !== "exporting" && status !== "loading";
+    }
+    /**
+   * Debounce the Save-button spinner: it only appears once an export has been
+   * in flight for `spinnerDelay` ms, so a fast save never flashes the button.
+   * The timer merely *schedules* the `busyVisible` patch (never updates the
+   * store from inside a notification); the reducer clears the flag whenever
+   * `status` leaves `'exporting'`.
+   */ syncBusyTimer(state) {
+        if (state.status !== "exporting") {
+            this.clearBusyTimer();
+            return;
+        }
+        if (state.busyVisible || this.busyTimer !== null) return;
+        this.busyTimer = setTimeout(()=>{
+            this.busyTimer = null;
+            if (!this.destroyed && this.store.getState().status === "exporting") {
+                this.store.update({
+                    busyVisible: true
+                });
+            }
+        }, this.spinnerDelay);
+    }
+    clearBusyTimer() {
+        if (this.busyTimer !== null) {
+            clearTimeout(this.busyTimer);
+            this.busyTimer = null;
+        }
+    }
+    ensureViewportObserver() {
+        const wrap = this.container.querySelector("[data-jie-canvas-wrap]");
+        if (!wrap || wrap === this.observedWrap) return;
+        this.resizeObserver?.disconnect();
+        this.observedWrap = wrap;
+        if (typeof ResizeObserver === "undefined") {
+            this.measureViewport(wrap);
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(()=>this.measureViewport(wrap));
+        this.resizeObserver.observe(wrap);
+        this.measureViewport(wrap);
+    }
+    measureViewport(wrap) {
+        const { clientWidth, clientHeight } = wrap;
+        const current = this.store.getState().viewport;
+        if (clientWidth <= 0 || clientHeight <= 0) return;
+        if (current && current.width === clientWidth && current.height === clientHeight) return;
+        this.store.update({
+            viewport: {
+                width: clientWidth,
+                height: clientHeight
+            }
+        });
+    }
+    /**
+   * Paint the preview canvas — with two layers of memoisation so dragging the
+   * crop box never re-runs the (potentially expensive) filter pipeline:
+   *
+   *  1. The rendered raster is cached by the pixel-affecting design. While
+   *     cropping, `selectPreviewDesign` drops the crop, so every pointer move
+   *     yields the *same* key → the filter is computed once, not per frame.
+   *  2. The canvas blit is skipped when neither the raster nor the viewport/fit
+   *     changed. The crop overlay is plain DOM, so it keeps tracking the pointer
+   *     smoothly regardless.
+   */ paint() {
+        const state = this.store.getState();
+        const canvas = this.container.querySelector("[data-jie-canvas]");
+        if (!canvas || !this.previewSource || !state.viewport) return;
+        const fit = selectViewportFit(state);
+        if (!fit) return;
+        const design = selectPreviewDesign(state);
+        const rasterKey = `${this.thumbVersion}:${JSON.stringify(design)}`;
+        if (rasterKey !== this.cachedRasterKey || !this.cachedRaster) {
+            this.cachedRaster = this.processor.render(this.previewSource, design);
+            this.cachedRasterKey = rasterKey;
+        }
+        const paintKey = `${rasterKey}@${state.viewport.width}x${state.viewport.height}:${fit.scale}:${fit.offsetX},${fit.offsetY}`;
+        if (paintKey === this.lastPaintKey) return;
+        this.lastPaintKey = paintKey;
+        paintPreview(canvas, this.cachedRaster, state.viewport, fit);
+    }
+    /**
+   * Paint each filter-strip thumbnail with the live filtered image. Thumbnails
+   * are keyed by `version:filterId` so they paint once per image (cheap) and
+   * repaint when a new picture is loaded.
+   */ paintFilterThumbs() {
+        const thumb = this.thumbSource;
+        if (!thumb) return;
+        const canvases = this.container.querySelectorAll("canvas[data-jie-filter-thumb]");
+        for (const canvas of canvases){
+            const id = canvas.dataset.jieFilterThumb;
+            if (!id) continue;
+            const key = `${this.thumbVersion}:${id}`;
+            if (canvas.dataset.key === key) continue;
+            const raster = applyFilter(thumb, id);
+            canvas.width = raster.width;
+            canvas.height = raster.height;
+            const ctx = canvas.getContext("2d");
+            if (!ctx) continue;
+            ctx.putImageData(toImageData(raster), 0, 0);
+            canvas.dataset.key = key;
+        }
+    }
+    beginCropDrag(handle, event) {
+        const startState = this.store.getState();
+        const fit = selectViewportFit(startState);
+        const startCrop = selectEffectiveCrop(startState);
+        const oriented = selectOrientedSize(startState);
+        if (!fit || !startCrop || !oriented) return;
+        const angle = selectCropAngle(startState);
+        const min = startState.minCropSize;
+        const startX = event.clientX;
+        const startY = event.clientY;
+        this.runPointerGesture(event, (e)=>{
+            const dx = (e.clientX - startX) / fit.scale;
+            const dy = (e.clientY - startY) / fit.scale;
+            return {
+                crop: angle !== 0 ? resizeRotatedCrop(startCrop, angle, handle, dx, dy, min) : resizeCrop(startCrop, handle, dx, dy, oriented, null, min)
+            };
+        });
+    }
+    beginCropRotate(event) {
+        const startState = this.store.getState();
+        const fit = selectViewportFit(startState);
+        const crop = selectEffectiveCrop(startState);
+        const wrap = this.observedWrap ?? this.container.querySelector("[data-jie-canvas-wrap]");
+        if (!fit || !crop || !wrap) return;
+        const box = wrap.getBoundingClientRect();
+        const center = cropCenter(crop);
+        const cx = box.left + fit.offsetX + center.x * fit.scale;
+        const cy = box.top + fit.offsetY + center.y * fit.scale;
+        const startAngle = selectCropAngle(startState);
+        const grabbed = pointerAngle(cx, cy, event.clientX, event.clientY);
+        this.runPointerGesture(event, (e)=>{
+            let angle = startAngle + (pointerAngle(cx, cy, e.clientX, e.clientY) - grabbed);
+            if (Math.abs(angle) < 2) angle = 0;
+            return {
+                angle: Math.round(angle * 10) / 10
+            };
+        });
+    }
+    /**
+   * Shared pointer-drag loop: `compute` maps each move to a design patch. The
+   * first move opens a history step, the rest replace it (`commit: false`), so
+   * the whole gesture is a single undo.
+   */ runPointerGesture(event, compute) {
+        event.preventDefault();
+        let committed = false;
+        const onMove = (e)=>{
+            this.store.update({
+                design: compute(e),
+                commit: !committed
+            });
+            committed = true;
+        };
+        const onUp = ()=>{
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+            this.dragCleanup = null;
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+        this.dragCleanup = onUp;
+    }
+    constructor(props){
+        _define_property(this, "store", void 0);
+        _define_property(this, "container", void 0);
+        _define_property(this, "renderer", void 0);
+        _define_property(this, "registry", new ToolRegistry());
+        _define_property(this, "locales", new LocaleRegistry());
+        _define_property(this, "processor", void 0);
+        _define_property(this, "previewMaxSize", void 0);
+        _define_property(this, "spinnerDelay", void 0);
+        /** Pending "show the busy spinner" timer — see {@link syncBusyTimer}. */ _define_property(this, "busyTimer", null);
+        _define_property(this, "onSaveCb", void 0);
+        _define_property(this, "onSaveAsCb", void 0);
+        _define_property(this, "confirm", void 0);
+        _define_property(this, "source", null);
+        _define_property(this, "previewSource", null);
+        /** Tiny raster used to paint the filter strip thumbnails. */ _define_property(this, "thumbSource", null);
+        /** Bumped on each image load so thumbnails repaint for the new picture. */ _define_property(this, "thumbVersion", 0);
+        /** Memoised preview render — see {@link paint}. */ _define_property(this, "cachedRaster", null);
+        _define_property(this, "cachedRasterKey", "");
+        _define_property(this, "lastPaintKey", "");
+        _define_property(this, "disposers", []);
+        _define_property(this, "resizeObserver", null);
+        _define_property(this, "observedWrap", null);
+        _define_property(this, "dragCleanup", null);
+        _define_property(this, "destroyed", false);
+        this.container = resolveContainer(props.container);
+        this.processor = props.processor ?? createDefaultProcessor(void 0, {
+            maxPixels: props.maxSourcePixels,
+            maxSize: props.maxSourceSize
+        });
+        this.previewMaxSize = props.previewMaxSize ?? 1600;
+        this.spinnerDelay = Math.max(0, props.spinnerDelay ?? 250);
+        this.onSaveCb = props.onSave;
+        this.onSaveAsCb = props.onSaveAs;
+        this.confirm = props.confirm ?? ((message)=>typeof window !== "undefined" ? window.confirm(message) : true);
+        for (const locale of props.locales ?? [])this.locales.register(locale);
+        this.store = new Store({
+            scheduler: props.scheduler ?? createRafScheduler(),
+            initialState: {
+                ...createInitialState(),
+                ...props.state,
+                ...props.locale ? {
+                    locale: props.locale
+                } : {},
+                ...props.minCropSize !== void 0 ? {
+                    minCropSize: Math.max(1, props.minCropSize)
+                } : {},
+                ...props.minResizeSize !== void 0 ? {
+                    minResizeSize: Math.max(1, props.minResizeSize)
+                } : {},
+                ...props.palette ? {
+                    palette: props.palette
+                } : {},
+                ...props.fonts ? {
+                    fonts: props.fonts
+                } : {}
+            }
+        });
+        for (const tool of props.tools ?? createBuiltinTools())this.registry.register(tool);
+        for (const plugin of props.plugins ?? [])this.use(plugin);
+        this.renderer = new Renderer(new DomHost(document), this.container);
+        this.disposers.push(this.store.subscribe(()=>this.render()));
+        this.disposers.push(this.store.subscribe((state)=>this.syncBusyTimer(state)));
+        this.render();
+        if (props.image) void this.fromBlob(props.image);
+    }
+}
+function resolveContainer(container) {
+    if (typeof container !== "string") return container;
+    const el = document.querySelector(container);
+    if (!el) throw new Error(`Container not found: ${container}`);
+    return el;
+}
+function downscale(raster, maxSize) {
+    const longest = Math.max(raster.width, raster.height);
+    if (longest <= maxSize) return raster;
+    const scale = maxSize / longest;
+    return resize(raster, {
+        width: Math.round(raster.width * scale),
+        height: Math.round(raster.height * scale)
+    });
+}
+function init(props) {
+    return new ImageEditor(props);
+}
+class MemoryHost {
+    createElement(tag) {
+        return this.node("element", {
+            tag
+        });
+    }
+    createText(value) {
+        return this.node("text", {
+            text: value
+        });
+    }
+    setText(node, value) {
+        node.text = value;
+    }
+    insert(parent, node, anchor) {
+        if (node.parent) this.remove(node.parent, node);
+        const at = anchor ? parent.children.indexOf(anchor) : -1;
+        if (at === -1) parent.children.push(node);
+        else parent.children.splice(at, 0, node);
+        node.parent = parent;
+    }
+    remove(parent, node) {
+        const at = parent.children.indexOf(node);
+        if (at !== -1) parent.children.splice(at, 1);
+        node.parent = null;
+    }
+    parent(node) {
+        return node.parent;
+    }
+    nextSibling(node) {
+        if (!node.parent) return null;
+        const at = node.parent.children.indexOf(node);
+        return node.parent.children[at + 1] ?? null;
+    }
+    setAttribute(node, name, value) {
+        node.attrs.set(name, value);
+    }
+    removeAttribute(node, name) {
+        node.attrs.delete(name);
+    }
+    setProperty(node, name, value) {
+        node.props.set(name, value);
+    }
+    setStyle(node, prop, value) {
+        node.style.set(prop, value);
+    }
+    removeStyle(node, prop) {
+        node.style.delete(prop);
+    }
+    addEventListener(node, type, handler) {
+        const set = node.listeners.get(type) ?? /* @__PURE__ */ new Set();
+        set.add(handler);
+        node.listeners.set(type, set);
+    }
+    removeEventListener(node, type, handler) {
+        node.listeners.get(type)?.delete(handler);
+    }
+    /** Fire every listener bound for `type` on `node` (test convenience). */ dispatch(node, type, event) {
+        for (const handler of node.listeners.get(type) ?? [])handler(event);
+    }
+    /** Serialise the subtree to a compact HTML-like string for assertions. */ serialize(node) {
+        if (node.type === "text") return node.text ?? "";
+        const attrs = [
+            ...node.attrs
+        ].map(([k, v1])=>` ${k}="${v1}"`).join("");
+        const inner = node.children.map((c)=>this.serialize(c)).join("");
+        return `<${node.tag}${attrs}>${inner}</${node.tag}>`;
+    }
+    node(type, partial) {
+        return {
+            type,
+            attrs: /* @__PURE__ */ new Map(),
+            props: /* @__PURE__ */ new Map(),
+            style: /* @__PURE__ */ new Map(),
+            listeners: /* @__PURE__ */ new Map(),
+            children: [],
+            parent: null,
+            ...partial
+        };
+    }
+}
+const TOKENS = {
+    /** Crop overlay accent — matches `--jie-accent`. */ accent: "#5b5fc7",
+    /** Dimmed scrim drawn over the cropped-out region. */ scrim: "rgba(17, 24, 39, 0.55)",
+    /** Corner handle radius, in screen pixels. */ handleRadius: 7,
+    /** Canvas backdrop behind the image. */ canvasBackground: "#f3f4f8"
+};
+ //# sourceMappingURL=jodit-image-editor.js.map
+
+
+/***/ })
+
+},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }
+/******/ var __webpack_exports__ = (__webpack_exec__(98270));
+/******/ return __webpack_exports__;
+/******/ }
+]);
+});