@pod-os/contacts 0.3.0-rc.56dcc33.0 → 0.3.0

package/dist/esm/pos-app_24.entry.js

@@ -1,15 +1,15 @@
-import { r as registerInstance, c as createEvent, h as h$2, e as Host, a as getElement } from './index-C0nMaA5M.js';
-import { s as store } from './session-D6pii58K.js';
-import { l as localSettings } from './settings-WH1FmNcN.js';
-import { P as PodOS, N as NoOfflineCache } from './index-DFqG64hG.js';
+import { r as registerInstance, c as createEvent, h as h$2, e as Host, a as getElement } from './index-DScSUBy-.js';
+import { s as store } from './session-CtUoUtdF.js';
+import { l as localSettings } from './settings-Cnw1mSJw.js';
+import { P as PodOS, N as NoOfflineCache } from './index-D-Cg1uHv.js';
 import { c as cjsExports } from './index-vFMstSdt.js';
-import { i as i$4, T as T$3, c as component_styles_default, _ as __decorateClass, n as n$3, a as ShoelaceElement, x as x$1 } from './chunk.YHLNUJ7P-Ci86SrOv.js';
+import { i as i$4, T as T$3, c as component_styles_default, _ as __decorateClass, n as n$3, a as ShoelaceElement, x as x$1 } from './chunk.YHLNUJ7P-B10Qbx9i.js';
 import { L as LocalizeController } from './chunk.6CTB5ZDJ-BnGEOH37.js';
-import { a as e$3, i as i$5, t as t$2, e as e$4 } from './class-map-CEX3Xp6h.js';
-import { o as o$4 } from './if-defined-DwqmnOlO.js';
-import './chunk.ZGGPD2XJ-CBFc8fGl.js';
-import { c as createRouter, R as Route, m as match$1 } from './index-DrN7LBTM.js';
-import { B as BrokenFile } from './chunk.XQ2OKYYA-U9jWa1BO.js';
+import { a as e$3, i as i$5, t as t$2, e as e$4 } from './class-map-DcKoKhP0.js';
+import { o as o$4 } from './if-defined-TtuUo8or.js';
+import './chunk.ZGGPD2XJ-CxH68zCl.js';
+import { c as createRouter, R as Route, m as match$1 } from './index-D4tjvI9D.js';
+import { B as BrokenFile } from './chunk.XQ2OKYYA-B0surOUs.js';
 import { s as subscribeResource } from './ResourceAware-BW_CkW1K.js';
 import { u as usePodOS$1 } from './usePodOS-D0uCfr1-.js';
 import { s as subscribePodOs } from './PodOsAware-jlzl8vRd.js';
@@ -3384,7 +3384,7 @@ const OpenAddressBook = class {
     }
     disconnectedCallback() {
         this.disconnected$.next();
-        this.disconnected$.unsubscribe();
+        this.disconnected$.complete();
     }
     openFromLink(event) {
         this.openAddressBook.emit(event.detail);
@@ -3397,7 +3397,7 @@ const OpenAddressBook = class {
     }
     render() {
         var _a;
-        return (h$2("div", { key: '511fb766939b4a89b50ba224d91f1a626c095197', id: "container" }, ((_a = this.sessionInfo) === null || _a === void 0 ? void 0 : _a.isLoggedIn) ? (h$2("pos-contacts-list-address-books", { webId: this.sessionInfo.webId })) : (h$2("div", { id: "sign-in" }, h$2("pos-login", null), "Sign in to list your address books.")), h$2("button", { key: '64cb74a95874d6bd2308df5f39bf12f8e578938b', title: "open any other address book by it's URI", class: "open", onClick: () => this.promptAndOpen() }, h$2("sl-icon", { key: '63648511e2884669c857bb2c531d3aa82fea314c', name: "folder2-open" }), "open other")));
+        return (h$2("div", { key: 'ae7b01a87f8df061fc45a525b9555059d6268f6d', id: "container" }, ((_a = this.sessionInfo) === null || _a === void 0 ? void 0 : _a.isLoggedIn) ? (h$2("pos-contacts-list-address-books", { webId: this.sessionInfo.webId })) : (h$2("div", { id: "sign-in" }, h$2("pos-login", null), "Sign in to list your address books.")), h$2("button", { key: '075716e48f7cf098ee5e118ab8ebe4dce3cbaec2', title: "open any other address book by it's URI", class: "open", onClick: () => this.promptAndOpen() }, h$2("sl-icon", { key: '34bdda19c00947faf3beb46da700127152d18286', name: "folder2-open" }), "open other")));
     }
     get el() { return getElement(this); }
 };
@@ -8084,7 +8084,7 @@ class ThumbnailGenerator extends UIPlugin {
     }
 }
 
-const version$2 = "5.1.0";
+const version$2 = "5.1.1";
 var packageJson$2 = {
 	version: version$2};
 
@@ -10658,8 +10658,8 @@ class Dashboard extends UIPlugin {
         this.uppy.off('complete', this.handleComplete);
         this.uppy.off('files-added', this.#generateLargeThumbnailIfSingleFile);
         this.uppy.off('file-removed', this.#generateLargeThumbnailIfSingleFile);
-        document.removeEventListener('focus', this.recordIfFocusedOnUppyRecently);
-        document.removeEventListener('click', this.recordIfFocusedOnUppyRecently);
+        document.removeEventListener('focus', this.recordIfFocusedOnUppyRecently, true);
+        document.removeEventListener('click', this.recordIfFocusedOnUppyRecently, true);
         if (this.opts.inline) {
             this.el.removeEventListener('keydown', this.handleKeyDownInInline);
         }
@@ -10976,10 +10976,6 @@ class Dashboard extends UIPlugin {
     };
 }
 
-const version$1 = "4.1.0";
-var packageJson$1 = {
-	version: version$1};
-
 var cropper$1 = {exports: {}};
 
 /*!
@@ -14266,6 +14262,87 @@ function requireCropper () {
 var cropperExports = requireCropper();
 var Cropper = /*@__PURE__*/getDefaultExportFromCjs(cropperExports);
 
+const version$1 = "4.2.0";
+var packageJson$1 = {
+	version: version$1};
+
+class Editor extends x {
+    imgElement;
+    componentDidMount() {
+        const { initCropper } = this.props;
+        if (this.imgElement) {
+            initCropper(this.imgElement);
+        }
+    }
+    onRotate90Deg = () => {
+        this.props.rotateBy(-90);
+    };
+    onRotateGranular = (ev) => {
+        const newGranularAngle = Number(ev.target.value);
+        this.props.rotateGranular(newGranularAngle);
+    };
+    renderGranularRotate() {
+        const { i18n } = this.props;
+        const { angleGranular } = this.props;
+        return (u$2("label", { role: "tooltip", "aria-label": `${angleGranular}º`, "data-microtip-position": "top", className: "uppy-ImageCropper-rangeWrapper", children: u$2("input", { className: "uppy-ImageCropper-range uppy-u-reset", type: "range", onInput: this.onRotateGranular, onChange: this.onRotateGranular, value: angleGranular, min: "-45", max: "45", "aria-label": i18n('rotate') }) }));
+    }
+    renderRevert() {
+        const { i18n } = this.props;
+        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('revert'), onClick: () => {
+                this.props.reset();
+            }, children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M0 0h24v24H0z", fill: "none" }), u$2("path", { d: "M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" })] }) }));
+    }
+    renderRotate() {
+        const { i18n } = this.props;
+        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('rotate'), onClick: this.onRotate90Deg, children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M0 0h24v24H0V0zm0 0h24v24H0V0z", fill: "none" }), u$2("path", { d: "M14 10a2 2 0 012 2v7a2 2 0 01-2 2H6a2 2 0 01-2-2v-7a2 2 0 012-2h8zm0 1.75H6a.25.25 0 00-.243.193L5.75 12v7a.25.25 0 00.193.243L6 19.25h8a.25.25 0 00.243-.193L14.25 19v-7a.25.25 0 00-.193-.243L14 11.75zM12 .76V4c2.3 0 4.61.88 6.36 2.64a8.95 8.95 0 012.634 6.025L21 13a1 1 0 01-1.993.117L19 13h-.003a6.979 6.979 0 00-2.047-4.95 6.97 6.97 0 00-4.652-2.044L12 6v3.24L7.76 5 12 .76z" })] }) }));
+    }
+    renderFlip() {
+        const { i18n } = this.props;
+        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('flipHorizontal'), onClick: () => this.props.flipHorizontal(), children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M0 0h24v24H0z", fill: "none" }), u$2("path", { d: "M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z" })] }) }));
+    }
+    renderZoomIn() {
+        const { i18n } = this.props;
+        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('zoomIn'), onClick: () => this.props.zoom(0.1), children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [u$2("path", { d: "M0 0h24v24H0V0z", fill: "none" }), u$2("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }), u$2("path", { d: "M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z" })] }) }));
+    }
+    renderZoomOut() {
+        const { i18n } = this.props;
+        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('zoomOut'), onClick: () => this.props.zoom(-0.1), children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M0 0h24v24H0V0z", fill: "none" }), u$2("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z" })] }) }));
+    }
+    renderCropSquare() {
+        const { i18n } = this.props;
+        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('aspectRatioSquare'), onClick: () => this.props.setAspectRatio('1:1'), children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M0 0h24v24H0z", fill: "none" }), u$2("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })] }) }));
+    }
+    renderCropWidescreen() {
+        const { i18n } = this.props;
+        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('aspectRatioLandscape'), onClick: () => this.props.setAspectRatio('16:9'), children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M 19,4.9999992 V 17.000001 H 4.9999998 V 6.9999992 H 19 m 0,-2 H 4.9999998 c -1.0999999,0 -1.9999999,0.9000001 -1.9999999,2 V 17.000001 c 0,1.1 0.9,2 1.9999999,2 H 19 c 1.1,0 2,-0.9 2,-2 V 6.9999992 c 0,-1.0999999 -0.9,-2 -2,-2 z" }), u$2("path", { fill: "none", d: "M0 0h24v24H0z" })] }) }));
+    }
+    renderCropWidescreenVertical() {
+        const { i18n } = this.props;
+        return (u$2("button", { "data-microtip-position": "top", type: "button", "aria-label": i18n('aspectRatioPortrait'), className: "uppy-u-reset uppy-c-btn", onClick: () => this.props.setAspectRatio('9:16'), children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M 19.000001,19 H 6.999999 V 5 h 10.000002 v 14 m 2,0 V 5 c 0,-1.0999999 -0.9,-1.9999999 -2,-1.9999999 H 6.999999 c -1.1,0 -2,0.9 -2,1.9999999 v 14 c 0,1.1 0.9,2 2,2 h 10.000002 c 1.1,0 2,-0.9 2,-2 z" }), u$2("path", { d: "M0 0h24v24H0z", fill: "none" })] }) }));
+    }
+    render() {
+        const { currentImage, objectUrl, opts } = this.props;
+        const { actions } = opts;
+        return (u$2("div", { className: "uppy-ImageCropper", children: [u$2("div", { className: "uppy-ImageCropper-container", children: u$2("img", { className: "uppy-ImageCropper-image", alt: currentImage.name, src: objectUrl, ref: (ref) => {
+                            this.imgElement = ref;
+                        } }) }), u$2("div", { className: "uppy-ImageCropper-controls", children: [actions.revert && this.renderRevert(), actions.rotate && this.renderRotate(), actions.granularRotate && this.renderGranularRotate(), actions.flip && this.renderFlip(), actions.zoomIn && this.renderZoomIn(), actions.zoomOut && this.renderZoomOut(), actions.cropSquare && this.renderCropSquare(), actions.cropWidescreen && this.renderCropWidescreen(), actions.cropWidescreenVertical &&
+                            this.renderCropWidescreenVertical()] })] }));
+    }
+}
+
+var locale$1 = {
+    strings: {
+        revert: 'Reset',
+        rotate: 'Rotate 90°',
+        zoomIn: 'Zoom in',
+        zoomOut: 'Zoom out',
+        flipHorizontal: 'Flip horizontally',
+        aspectRatioSquare: 'Crop square',
+        aspectRatioLandscape: 'Crop landscape (16:9)',
+        aspectRatioPortrait: 'Crop portrait (9:16)',
+    },
+};
+
 // See this cropperjs image to understand how container/image/canavas/cropbox relate to each other.
 // (https://github.com/fengyuanchen/cropperjs/blob/9b528a8baeaae876dc090085e37992a1683c6f34/docs/images/layers.jpg)
 //
@@ -14360,155 +14437,13 @@ function limitCropboxMovementOnResize(canvas, cropboxData, prevCropbox) {
     return null;
 }
 
-class Editor extends x {
-    imgElement;
-    cropper;
-    constructor(props) {
-        super(props);
-        this.state = {
-            angle90Deg: 0,
-            angleGranular: 0,
-            prevCropboxData: null,
-        };
-        this.storePrevCropboxData = this.storePrevCropboxData.bind(this);
-        this.limitCropboxMovement = this.limitCropboxMovement.bind(this);
-    }
-    componentDidMount() {
-        const { opts, storeCropperInstance } = this.props;
-        this.cropper = new Cropper(this.imgElement, opts.cropperOptions);
-        this.imgElement.addEventListener('cropstart', this.storePrevCropboxData);
-        // @ts-expect-error custom cropper event but DOM API does not understand
-        this.imgElement.addEventListener('cropend', this.limitCropboxMovement);
-        storeCropperInstance(this.cropper);
-    }
-    componentWillUnmount() {
-        this.cropper.destroy();
-        this.imgElement.removeEventListener('cropstart', this.storePrevCropboxData);
-        // @ts-expect-error custom cropper event but DOM API does not understand
-        this.imgElement.removeEventListener('cropend', this.limitCropboxMovement);
-    }
-    storePrevCropboxData() {
-        this.setState({ prevCropboxData: this.cropper.getCropBoxData() });
-    }
-    limitCropboxMovement(event) {
-        const canvasData = this.cropper.getCanvasData();
-        const cropboxData = this.cropper.getCropBoxData();
-        const { prevCropboxData } = this.state;
-        // 1. When we grab the cropbox in the middle and move it
-        if (event.detail.action === 'all') {
-            const newCropboxData = limitCropboxMovementOnMove(canvasData, cropboxData, prevCropboxData);
-            if (newCropboxData)
-                this.cropper.setCropBoxData(newCropboxData);
-            // 2. When we stretch the cropbox by one of its sides
-        }
-        else {
-            const newCropboxData = limitCropboxMovementOnResize(canvasData, cropboxData, prevCropboxData);
-            if (newCropboxData)
-                this.cropper.setCropBoxData(newCropboxData);
-        }
-    }
-    onRotate90Deg = () => {
-        // 1. Set state
-        const { angle90Deg } = this.state;
-        const newAngle = angle90Deg - 90;
-        this.setState({
-            angle90Deg: newAngle,
-            angleGranular: 0,
-        });
-        // 2. Rotate the image
-        // Important to reset scale here, or cropper will get confused on further rotations
-        this.cropper.scale(1);
-        this.cropper.rotateTo(newAngle);
-        // 3. Fit the rotated image into the view
-        const canvasData = this.cropper.getCanvasData();
-        const containerData = this.cropper.getContainerData();
-        const newCanvasData = getCanvasDataThatFitsPerfectlyIntoContainer(containerData, canvasData);
-        this.cropper.setCanvasData(newCanvasData);
-        // 4. Make cropbox fully wrap the image
-        this.cropper.setCropBoxData(newCanvasData);
-    };
-    onRotateGranular = (ev) => {
-        // 1. Set state
-        const newGranularAngle = Number(ev.target.value);
-        this.setState({ angleGranular: newGranularAngle });
-        // 2. Rotate the image
-        const { angle90Deg } = this.state;
-        const newAngle = angle90Deg + newGranularAngle;
-        this.cropper.rotateTo(newAngle);
-        // 3. Scale the image so that it fits into the cropbox
-        const image = this.cropper.getImageData();
-        const scaleFactor = getScaleFactorThatRemovesDarkCorners(image.naturalWidth, image.naturalHeight, newGranularAngle);
-        // Preserve flip
-        const scaleFactorX = this.cropper.getImageData().scaleX < 0 ? -scaleFactor : scaleFactor;
-        this.cropper.scale(scaleFactorX, scaleFactor);
-    };
-    renderGranularRotate() {
-        const { i18n } = this.props;
-        const { angleGranular } = this.state;
-        return (u$2("label", { role: "tooltip", "aria-label": `${angleGranular}º`, "data-microtip-position": "top", className: "uppy-ImageCropper-rangeWrapper", children: u$2("input", { className: "uppy-ImageCropper-range uppy-u-reset", type: "range", onInput: this.onRotateGranular, onChange: this.onRotateGranular, value: angleGranular, min: "-45", max: "45", "aria-label": i18n('rotate') }) }));
-    }
-    renderRevert() {
-        const { i18n, opts } = this.props;
-        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('revert'), onClick: () => {
-                this.cropper.reset();
-                this.cropper.setAspectRatio(opts.cropperOptions.initialAspectRatio);
-                this.setState({ angle90Deg: 0, angleGranular: 0 });
-            }, children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M0 0h24v24H0z", fill: "none" }), u$2("path", { d: "M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" })] }) }));
-    }
-    renderRotate() {
-        const { i18n } = this.props;
-        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('rotate'), onClick: this.onRotate90Deg, children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M0 0h24v24H0V0zm0 0h24v24H0V0z", fill: "none" }), u$2("path", { d: "M14 10a2 2 0 012 2v7a2 2 0 01-2 2H6a2 2 0 01-2-2v-7a2 2 0 012-2h8zm0 1.75H6a.25.25 0 00-.243.193L5.75 12v7a.25.25 0 00.193.243L6 19.25h8a.25.25 0 00.243-.193L14.25 19v-7a.25.25 0 00-.193-.243L14 11.75zM12 .76V4c2.3 0 4.61.88 6.36 2.64a8.95 8.95 0 012.634 6.025L21 13a1 1 0 01-1.993.117L19 13h-.003a6.979 6.979 0 00-2.047-4.95 6.97 6.97 0 00-4.652-2.044L12 6v3.24L7.76 5 12 .76z" })] }) }));
-    }
-    renderFlip() {
-        const { i18n } = this.props;
-        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('flipHorizontal'), onClick: () => this.cropper.scaleX(-this.cropper.getData().scaleX || -1), children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M0 0h24v24H0z", fill: "none" }), u$2("path", { d: "M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z" })] }) }));
-    }
-    renderZoomIn() {
-        const { i18n } = this.props;
-        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('zoomIn'), onClick: () => this.cropper.zoom(0.1), children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [u$2("path", { d: "M0 0h24v24H0V0z", fill: "none" }), u$2("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }), u$2("path", { d: "M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z" })] }) }));
-    }
-    renderZoomOut() {
-        const { i18n } = this.props;
-        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('zoomOut'), onClick: () => this.cropper.zoom(-0.1), children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M0 0h24v24H0V0z", fill: "none" }), u$2("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z" })] }) }));
-    }
-    renderCropSquare() {
-        const { i18n } = this.props;
-        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('aspectRatioSquare'), onClick: () => this.cropper.setAspectRatio(1), children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M0 0h24v24H0z", fill: "none" }), u$2("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })] }) }));
-    }
-    renderCropWidescreen() {
-        const { i18n } = this.props;
-        return (u$2("button", { "data-microtip-position": "top", type: "button", className: "uppy-u-reset uppy-c-btn", "aria-label": i18n('aspectRatioLandscape'), onClick: () => this.cropper.setAspectRatio(16 / 9), children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M 19,4.9999992 V 17.000001 H 4.9999998 V 6.9999992 H 19 m 0,-2 H 4.9999998 c -1.0999999,0 -1.9999999,0.9000001 -1.9999999,2 V 17.000001 c 0,1.1 0.9,2 1.9999999,2 H 19 c 1.1,0 2,-0.9 2,-2 V 6.9999992 c 0,-1.0999999 -0.9,-2 -2,-2 z" }), u$2("path", { fill: "none", d: "M0 0h24v24H0z" })] }) }));
-    }
-    renderCropWidescreenVertical() {
-        const { i18n } = this.props;
-        return (u$2("button", { "data-microtip-position": "top", type: "button", "aria-label": i18n('aspectRatioPortrait'), className: "uppy-u-reset uppy-c-btn", onClick: () => this.cropper.setAspectRatio(9 / 16), children: u$2("svg", { "aria-hidden": "true", className: "uppy-c-icon", width: "24", height: "24", viewBox: "0 0 24 24", children: [u$2("path", { d: "M 19.000001,19 H 6.999999 V 5 h 10.000002 v 14 m 2,0 V 5 c 0,-1.0999999 -0.9,-1.9999999 -2,-1.9999999 H 6.999999 c -1.1,0 -2,0.9 -2,1.9999999 v 14 c 0,1.1 0.9,2 2,2 h 10.000002 c 1.1,0 2,-0.9 2,-2 z" }), u$2("path", { d: "M0 0h24v24H0z", fill: "none" })] }) }));
-    }
-    render() {
-        const { currentImage, opts } = this.props;
-        const { actions } = opts;
-        if (currentImage.data == null)
-            throw new Error('File data is empty');
-        const imageURL = URL.createObjectURL(currentImage.data);
-        return (u$2("div", { className: "uppy-ImageCropper", children: [u$2("div", { className: "uppy-ImageCropper-container", children: u$2("img", { className: "uppy-ImageCropper-image", alt: currentImage.name, src: imageURL, ref: (ref) => {
-                            this.imgElement = ref;
-                        } }) }), u$2("div", { className: "uppy-ImageCropper-controls", children: [actions.revert && this.renderRevert(), actions.rotate && this.renderRotate(), actions.granularRotate && this.renderGranularRotate(), actions.flip && this.renderFlip(), actions.zoomIn && this.renderZoomIn(), actions.zoomOut && this.renderZoomOut(), actions.cropSquare && this.renderCropSquare(), actions.cropWidescreen && this.renderCropWidescreen(), actions.cropWidescreenVertical &&
-                            this.renderCropWidescreenVertical()] })] }));
-    }
-}
-
-var locale$1 = {
-    strings: {
-        revert: 'Reset',
-        rotate: 'Rotate 90°',
-        zoomIn: 'Zoom in',
-        zoomOut: 'Zoom out',
-        flipHorizontal: 'Flip horizontally',
-        aspectRatioSquare: 'Crop square',
-        aspectRatioLandscape: 'Crop landscape (16:9)',
-        aspectRatioPortrait: 'Crop portrait (9:16)',
-    },
+const defaultEditorState = {
+    angle: 0,
+    angleGranular: 0,
+    isFlippedHorizontally: false,
+    aspectRatio: 'free',
+    cropperReady: false,
 };
-
 const defaultCropperOptions = {
     viewMode: 0,
     background: false,
@@ -14539,7 +14474,13 @@ const defaultOptions$1 = {
 };
 class ImageEditor extends UIPlugin {
     static VERSION = packageJson$1.version;
-    cropper;
+    cropper = null;
+    objectUrl = null;
+    prevCropboxData = null;
+    imgElement = null;
+    cropstartHandler = null;
+    cropendHandler = null;
+    cropperReadyHandler = null;
     constructor(uppy, opts) {
         super(uppy, {
             ...defaultOptions$1,
@@ -14570,9 +14511,18 @@ class ImageEditor extends UIPlugin {
         return false;
     }
     save = () => {
+        const { currentImage } = this.getPluginState();
+        if (!currentImage)
+            return;
+        if (!this.cropper)
+            return;
         const saveBlobCallback = (blob) => {
-            const { currentImage } = this.getPluginState();
-            this.uppy.setFileState(currentImage.id, {
+            if (!blob)
+                return;
+            const fileId = currentImage.id;
+            if (!this.uppy.getFile(fileId))
+                return;
+            this.uppy.setFileState(fileId, {
                 // Reinserting image's name and type, because .toBlob loses both.
                 data: new File([blob], currentImage.name ?? this.i18n('unnamed'), {
                     type: blob.type,
@@ -14580,14 +14530,15 @@ class ImageEditor extends UIPlugin {
                 size: blob.size,
                 preview: undefined,
             });
-            const updatedFile = this.uppy.getFile(currentImage.id);
+            const updatedFile = this.uppy.getFile(fileId);
+            if (!updatedFile)
+                return;
             this.uppy.emit('thumbnail:request', updatedFile);
             this.setPluginState({
                 currentImage: updatedFile,
             });
             this.uppy.emit('file-editor:complete', updatedFile);
         };
-        const { currentImage } = this.getPluginState();
         // Fixes black 1px lines on odd-width images.
         // This should be removed when cropperjs fixes this issue.
         // (See https://github.com/transloadit/uppy/issues/4305 and https://github.com/fengyuanchen/cropperjs/issues/551).
@@ -14606,15 +14557,194 @@ class ImageEditor extends UIPlugin {
         this.cropper = cropper;
     };
     selectFile = (file) => {
-        this.uppy.emit('file-editor:start', file);
+        this.start(file);
+    };
+    resetEditorState = (currentImage = this.getPluginState().currentImage) => {
         this.setPluginState({
-            currentImage: file,
+            currentImage,
+            ...defaultEditorState,
+            // Preserve cropperReady if cropper instance exists
+            cropperReady: !!this.cropper,
         });
     };
-    install() {
+    rotateBy = (degrees) => {
+        if (!this.cropper)
+            return;
+        const { angle, angleGranular, isFlippedHorizontally } = this.getPluginState();
+        const base90 = angle - angleGranular;
+        const newAngle = base90 + degrees;
+        this.cropper.scale(isFlippedHorizontally ? -1 : 1);
+        this.cropper.rotateTo(newAngle);
+        const canvasData = this.cropper.getCanvasData();
+        const containerData = this.cropper.getContainerData();
+        const newCanvasData = getCanvasDataThatFitsPerfectlyIntoContainer(containerData, canvasData);
+        this.cropper.setCanvasData(newCanvasData);
+        this.cropper.setCropBoxData(newCanvasData);
+        this.setPluginState({
+            angle: newAngle,
+            angleGranular: 0,
+        });
+    };
+    rotateGranular = (granularAngle) => {
+        if (!this.cropper)
+            return;
+        const { angle, angleGranular, isFlippedHorizontally } = this.getPluginState();
+        const base90 = angle - angleGranular;
+        const newAngle = base90 + granularAngle;
+        this.cropper.rotateTo(newAngle);
+        const image = this.cropper.getImageData();
+        const scaleFactor = getScaleFactorThatRemovesDarkCorners(image.naturalWidth, image.naturalHeight, granularAngle);
+        const scaleFactorX = isFlippedHorizontally ? -scaleFactor : scaleFactor;
+        this.cropper.scale(scaleFactorX, scaleFactor);
         this.setPluginState({
-            currentImage: null,
+            angle: newAngle,
+            angleGranular: granularAngle,
+        });
+    };
+    flipHorizontal = () => {
+        if (!this.cropper)
+            return;
+        const { isFlippedHorizontally } = this.getPluginState();
+        this.cropper.scaleX(-this.cropper.getData().scaleX || -1);
+        this.setPluginState({
+            isFlippedHorizontally: !isFlippedHorizontally,
+        });
+    };
+    zoom = (ratio) => {
+        if (!this.cropper)
+            return;
+        this.cropper.zoom(ratio);
+    };
+    setAspectRatio = (newRatio) => {
+        if (!this.cropper)
+            return;
+        const ratioMap = {
+            free: 0,
+            '1:1': 1,
+            '16:9': 16 / 9,
+            '9:16': 9 / 16,
+        };
+        this.cropper.setAspectRatio(ratioMap[newRatio]);
+        this.setPluginState({
+            aspectRatio: newRatio,
+        });
+    };
+    reset = () => {
+        if (!this.cropper)
+            return;
+        this.cropper.reset();
+        this.cropper.setAspectRatio(this.opts.cropperOptions.initialAspectRatio || 0);
+        this.resetEditorState();
+    };
+    /**
+     * Start editing a file - creates object URL and prepares state.
+     * Called by hook's start() or when user opens editor.
+     */
+    start = (file) => {
+        // Clean up any previous editing session
+        if (this.objectUrl) {
+            URL.revokeObjectURL(this.objectUrl);
+            this.objectUrl = null;
+        }
+        // Get file data - first try the passed file, then try fetching from Uppy state
+        let fileData = file.data;
+        if (!(fileData instanceof Blob)) {
+            const uppyFile = this.uppy.getFile(file.id);
+            fileData = uppyFile?.data;
+        }
+        if (fileData instanceof Blob) {
+            this.objectUrl = URL.createObjectURL(fileData);
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.warn('[Uppy ImageEditor] Cannot edit file: file.data is not a Blob.', 'File:', file, 'file.data:', file.data, 'typeof file.data:', typeof file.data);
+        }
+        this.uppy.emit('file-editor:start', file);
+        this.resetEditorState(file);
+    };
+    /**
+     * Stop editing - destroys cropper, revokes object URL, cleans up listeners.
+     */
+    stop = () => {
+        this.destroyCropper();
+        if (this.objectUrl) {
+            URL.revokeObjectURL(this.objectUrl);
+            this.objectUrl = null;
+        }
+        this.resetEditorState(null);
+    };
+    /**
+     * Initialize cropper on the image element. Called lazily when first edit action is triggered.
+     * For headless use, the hook provides the image element.
+     */
+    initCropper = (imgElement) => {
+        if (this.cropper)
+            return; // Already initialized
+        this.imgElement = imgElement;
+        this.cropper = new Cropper(imgElement, this.opts.cropperOptions);
+        // Store handlers so we can remove them later
+        this.cropstartHandler = () => {
+            if (this.cropper) {
+                this.prevCropboxData = this.cropper.getCropBoxData();
+            }
+        };
+        this.cropendHandler = ((event) => {
+            if (!this.cropper || !this.prevCropboxData)
+                return;
+            const canvasData = this.cropper.getCanvasData();
+            const cropboxData = this.cropper.getCropBoxData();
+            if (event.detail.action === 'all') {
+                const newCropboxData = limitCropboxMovementOnMove(canvasData, cropboxData, this.prevCropboxData);
+                if (newCropboxData)
+                    this.cropper.setCropBoxData(newCropboxData);
+            }
+            else {
+                const newCropboxData = limitCropboxMovementOnResize(canvasData, cropboxData, this.prevCropboxData);
+                if (newCropboxData)
+                    this.cropper.setCropBoxData(newCropboxData);
+            }
         });
+        this.cropperReadyHandler = () => {
+            this.setPluginState({ cropperReady: true });
+        };
+        imgElement.addEventListener('cropstart', this.cropstartHandler);
+        imgElement.addEventListener('cropend', this.cropendHandler);
+        imgElement.addEventListener('ready', this.cropperReadyHandler, {
+            once: true,
+        });
+    };
+    /**
+     * Destroy cropper and clean up event listeners.
+     */
+    destroyCropper = () => {
+        if (!this.cropper)
+            return;
+        this.setPluginState({ cropperReady: false });
+        if (this.cropstartHandler && this.imgElement) {
+            this.imgElement.removeEventListener('cropstart', this.cropstartHandler);
+        }
+        if (this.cropendHandler && this.imgElement) {
+            this.imgElement.removeEventListener('cropend', this.cropendHandler);
+        }
+        if (this.cropperReadyHandler && this.imgElement) {
+            this.imgElement.removeEventListener('ready', this.cropperReadyHandler);
+        }
+        this.cropper.destroy();
+        this.cropper = null;
+        this.imgElement = null;
+        this.cropstartHandler = null;
+        this.cropendHandler = null;
+        this.cropperReadyHandler = null;
+        this.prevCropboxData = null;
+    };
+    /**
+     * Get object URL for the current image (used by headless hook).
+     */
+    getObjectUrl = () => {
+        return this.objectUrl;
+    };
+    install() {
+        this.resetEditorState(null);
         const { target } = this.opts;
         if (target) {
             this.mount(target, this);
@@ -14626,14 +14756,15 @@ class ImageEditor extends UIPlugin {
             const file = this.uppy.getFile(currentImage.id);
             this.uppy.emit('file-editor:cancel', file);
         }
+        this.stop();
         this.unmount();
     }
     render() {
-        const { currentImage } = this.getPluginState();
+        const { currentImage, angleGranular } = this.getPluginState();
         if (currentImage === null || currentImage.isRemote) {
             return null;
         }
-        return (u$2(Editor, { currentImage: currentImage, storeCropperInstance: this.storeCropperInstance, save: this.save, opts: this.opts, i18n: this.i18n }));
+        return (u$2(Editor, { currentImage: currentImage, objectUrl: this.objectUrl ?? '', initCropper: this.initCropper, save: this.save, opts: this.opts, i18n: this.i18n, angleGranular: angleGranular, rotateBy: this.rotateBy, rotateGranular: this.rotateGranular, flipHorizontal: this.flipHorizontal, zoom: this.zoom, setAspectRatio: this.setAspectRatio, reset: this.reset }));
     }
 }
 

package/dist/esm/pos-attachments.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, e as Host, a as getElement } from './index-C0nMaA5M.js';
+import { r as registerInstance, h, e as Host, a as getElement } from './index-DScSUBy-.js';
 import { u as useResource } from './useResource-yVO4JQ9P.js';
 
 const posAttachmentsCss = () => `:host{--background-base-color:color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);--background-color-even:hsl(from var(--background-base-color) h s calc(l + 7));--background-color-odd:hsl(from var(--background-base-color) h s calc(l + 10));--border-color:var(--background-base-color);ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--size-1);li{padding:var(--size-1);&:nth-child(even){background-color:var(--background-color-even)}&:nth-child(odd){background-color:var(--background-color-odd)}&.new{animation:newItemBounce 0.8s ease-out,           highlightFlash 2.5s ease-in-out}}}}@keyframes newItemBounce{0%{transform:scale(0.95);opacity:0}60%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}@keyframes highlightFlash{0%{box-shadow:0 0 20px var(--pos-primary-color)}100%{box-shadow:0 0 0 transparent}}`;

package/dist/esm/pos-container-contents.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, e as Host } from './index-C0nMaA5M.js';
-import { L as LdpContainer } from './index-DFqG64hG.js';
+import { r as registerInstance, c as createEvent, h, e as Host } from './index-DScSUBy-.js';
+import { L as LdpContainer } from './index-D-Cg1uHv.js';
 import { s as subscribeResource } from './ResourceAware-BW_CkW1K.js';
 
 const posContainerContentsCss = () => `ul{list-style:none;padding:0;margin:0}li{padding:0;margin:0}`;

package/dist/esm/pos-container-item_3.entry.js

@@ -1,12 +1,12 @@
-import { r as registerInstance, c as createEvent, h, e as Host, a as getElement } from './index-C0nMaA5M.js';
+import { r as registerInstance, c as createEvent, h, e as Host, a as getElement } from './index-DScSUBy-.js';
 import { s as subscribeResource } from './ResourceAware-BW_CkW1K.js';
-import './chunk.ZGGPD2XJ-CBFc8fGl.js';
-import './chunk.YHLNUJ7P-Ci86SrOv.js';
-import './chunk.URTPIBTY-CgZBKlLz.js';
-import './chunk.5JY5FUCG-B52nDptl.js';
+import './chunk.ZGGPD2XJ-CxH68zCl.js';
+import './chunk.YHLNUJ7P-B10Qbx9i.js';
+import './chunk.URTPIBTY-C1YI_wtI.js';
+import './chunk.5JY5FUCG-B58l5Mdn.js';
 import './chunk.6CTB5ZDJ-BnGEOH37.js';
 import { u as usePodOS } from './usePodOS-D0uCfr1-.js';
-import './class-map-CEX3Xp6h.js';
+import './class-map-DcKoKhP0.js';
 
 function selectIconForTypes(types) {
     if (containsType(types, 'http://www.w3.org/ns/ldp#Container')) {

package/dist/esm/pos-description_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-C0nMaA5M.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DScSUBy-.js';
 import { s as subscribeResource } from './ResourceAware-BW_CkW1K.js';
 
 const PosDescription = class {