@pod-os/elements 0.37.0-rc.c8b54d1.0 → 0.37.0

package/dist/esm/{pos-add-new-thing_31.entry.js → pos-add-new-thing_32.entry.js}

@@ -1,10 +1,10 @@
-import { r as registerInstance, h as h$4, e as Host, c as createEvent, a as getElement, i as getRenderingRef, j as forceUpdate } from './index-VMHzF3uY.js';
-import { i as i$5, E as E$2, T as T$3, c as component_styles_default, _ as __decorateClass, n as n$6, S as ShoelaceElement, x as x$1, d as SlIcon, r as r$4, w as watch, e as __yieldStar, f as f$5 } from './chunk.ZGGPD2XJ-BjT6fS1o.js';
-import { c as createStore$1, s as store, B as BrokenFile } from './chunk.XQ2OKYYA-CXNlpYUG.js';
-import { P as PodOS, N as NoOfflineCache, a as LabelIndex, T as TypeIndex2 } from './index-DFqG64hG.js';
+import { r as registerInstance, h as h$4, H as Host, c as createEvent, a as getElement, i as getRenderingRef, j as forceUpdate } from './index-DzbCx-pP.js';
+import { i as i$5, E as E$2, T as T$3, c as component_styles_default, _ as __decorateClass, n as n$6, S as ShoelaceElement, x as x$1, d as SlIcon, r as r$4, w as watch, e as __yieldStar, f as f$5 } from './chunk.ZGGPD2XJ-SJISSXOc.js';
+import { c as createStore$1, s as store, B as BrokenFile } from './chunk.XQ2OKYYA-Cr3bMzqn.js';
+import { P as PodOS, N as NoOfflineCache, a as LabelIndex, T as TypeIndex2 } from './index-CXK32bJz.js';
 import { c as cjsExports } from './index-vFMstSdt.js';
-import { L as LocalizeController, e as e$6, s as setDefaultAnimation, a as stopAnimations, g as getAnimation, b as animateTo, w as waitForEvent, S as SlPopup } from './chunk.URTPIBTY-CNA3-SLq.js';
-import { a as e$4, i as i$6, t as t$2, e as e$5 } from './class-map-CUYFUkXU.js';
+import { L as LocalizeController, e as e$6, s as setDefaultAnimation, a as stopAnimations, g as getAnimation, b as animateTo, w as waitForEvent, S as SlPopup } from './chunk.URTPIBTY-yxgfEQ1K.js';
+import { a as e$4, i as i$6, t as t$2, e as e$5 } from './class-map-DEweE_Cr.js';
 import { s as subscribeResource } from './ResourceAware-BW_CkW1K.js';
 import { s as subscribePodOs } from './PodOsAware-jlzl8vRd.js';
 import { u as usePodOS } from './usePodOS-D0uCfr1-.js';
@@ -5348,7 +5348,7 @@ __decorateClass([
 
 SlMenuItem.define("sl-menu-item");
 
-const posMakeFindableCss = () => `button.main{display:flex;transition:width 200ms,\\n    background-color 500ms,\\n    color 500ms,\\n    border-color 500ms;max-width:var(--size-40);flex-direction:row;overflow:hidden;height:var(--pos-navigation-bar-height);width:var(--pos-navigation-bar-height);align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--pos-subtle-text-color);border:var(--size-px) dashed var(--pos-subtle-text-color);background-color:var(--pos-background-color);p{padding:0;margin:0;display:none;white-space:nowrap}&.success{color:var(--color-green-700);border-color:var(--color-green-700);border-style:solid;background-color:var(--color-green-100)}&:active{transform:scale(0.99);filter:brightness(90%)}&:focus{outline:var(--pos-input-focus-outline)}}svg{display:inline-block;height:var(--size-6);flex-shrink:0;flex-grow:0;width:var(--size-6)}button.main:hover,sl-dropdown[open] button{width:var(--size-full);height:var(--pos-navigation-bar-height);background:var(--pos-background-color);color:var(--pos-normal-text-color);&.success{background:var(--color-green-200);color:var(--color-green-700)}p{display:inline-block}}`;
+const posMakeFindableCss = () => `button.main{display:flex;transition:width 200ms,     background-color 500ms,     color 500ms,     border-color 500ms;max-width:var(--size-40);flex-direction:row;overflow:hidden;height:var(--pos-navigation-bar-height);width:var(--pos-navigation-bar-height);align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--pos-subtle-text-color);border:var(--size-px) dashed var(--pos-subtle-text-color);background-color:var(--pos-background-color);p{padding:0;margin:0;display:none;white-space:nowrap}&.success{color:var(--color-green-700);border-color:var(--color-green-700);border-style:solid;background-color:var(--color-green-100)}&:active{transform:scale(0.99);filter:brightness(90%)}&:focus{outline:var(--pos-input-focus-outline)}}svg{display:inline-block;height:var(--size-6);flex-shrink:0;flex-grow:0;width:var(--size-6)}button.main:hover,sl-dropdown[open] button{width:var(--size-full);height:var(--pos-navigation-bar-height);background:var(--pos-background-color);color:var(--pos-normal-text-color);&.success{background:var(--color-green-200);color:var(--color-green-700)}p{display:inline-block}}`;
 
 const PosMakeFindable = class {
     constructor(hostRef) {
@@ -5578,7 +5578,7 @@ const PosNavigation = class {
 };
 PosNavigation.style = posNavigationCss();
 
-const posNavigationBarCss = () => `section.current{display:flex;height:var(--pos-navigation-bar-height);flex-grow:1;gap:0;background-color:var(--pos-input-background-color);border-radius:var(--radius-md);width:100%;&:focus-within{outline:var(--pos-input-focus-outline)}}section.current button{cursor:pointer;font-size:var(--scale-1);display:flex;align-items:center;justify-content:center;flex-grow:1;background:none;color:var(--pos-normal-text-color);outline:none;border:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:focus{text-decoration:underline}:first-child{flex-grow:1}svg{width:var(--size-6);color:var(--pos-subtle-text-color)}}`;
+const posNavigationBarCss = () => `section.current{display:flex;align-items:center;box-sizing:border-box;padding:0 var(--size-2) 0 0;height:var(--pos-navigation-bar-height);flex-grow:1;gap:0;background-color:var(--pos-input-background-color);border-radius:var(--radius-md);width:100%;&:focus-within{outline:var(--pos-input-focus-outline)}button{cursor:pointer;font-size:var(--scale-1);display:flex;align-items:center;justify-content:center;flex-grow:1;background:none;color:var(--pos-normal-text-color);outline:none;border:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:focus{text-decoration:underline}:first-child{flex-grow:1}svg{width:var(--size-6);color:var(--pos-subtle-text-color)}}pos-share{height:80%;&:hover{&::part(button){color:var(--pos-primary-color);background-color:var(--pos-border-color);border-radius:var(--radius-full)}}&::part(button){font-size:var(--size-4);background:none;outline:none;border:none;color:var(--pos-subtle-text-color)}}}`;
 
 const PosNavigationBar = class {
     constructor(hostRef) {
@@ -5596,7 +5596,7 @@ const PosNavigationBar = class {
     }
     render() {
         const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';
-        return (h$4("section", { key: '5f49aa9dad9d07550ee8ffbee90036cbc1efda55', class: "current" }, this.current && this.searchIndexReady && h$4("pos-make-findable", { key: '85974a4772aaf8cad3a11cdcd49e6df10141bfe3', uri: this.current.uri }), h$4("button", { key: '40660a3455b0f3392c68d7aea0075b102a1762a2', "aria-label": ariaLabel, onClick: () => this.onClick() }, h$4("div", { key: '9ab8922175d701f714f72aefb95745cf5ae4bb95' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
+        return (h$4("section", { key: '5f49aa9dad9d07550ee8ffbee90036cbc1efda55', class: "current" }, this.current && this.searchIndexReady && h$4("pos-make-findable", { key: '85974a4772aaf8cad3a11cdcd49e6df10141bfe3', uri: this.current.uri }), h$4("button", { key: '40660a3455b0f3392c68d7aea0075b102a1762a2', "aria-label": ariaLabel, onClick: () => this.onClick() }, h$4("div", { key: '9ab8922175d701f714f72aefb95745cf5ae4bb95' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon()), this.current && h$4("pos-share", { key: '3b80c1987f9f5138b11b8a106171fc73a236f426', uri: this.current.uri })));
     }
     icon() {
         return (h$4("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h$4("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" })));
@@ -5624,7 +5624,7 @@ const PosNewThingForm = class {
         subscribePodOs(this);
     }
     render() {
-        return (h$4("form", { key: 'a362c5b749dd744123973987ff8b0291485b465e', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h$4("label", { key: '45c78b0b48955cc157d04f547285b4ae4c19c38f', htmlFor: "type" }, "Type"), h$4("pos-select-term", { key: 'e3c3ab9abdbbb585916d95ba1aa14a066dbc5bd0', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h$4("label", { key: 'c696f8ed862d40d3c366ef0ede5e88e574928db3', htmlFor: "name" }, "Name"), h$4("input", { key: '89e6289e24ca9d3969da97c7aeb22224db1c376c', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h$4("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h$4("input", { key: 'b9520afef34177c6f14ab0798c045536d5661a2a', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (h$4("form", { key: '64781cfb0e570d2368325d674c6637c581bb87c2', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h$4("label", { key: '409e04f147430042eb334024fc7061574ab543cf', htmlFor: "type" }, "Type"), h$4("pos-select-term", { key: '8d5d580ee1f1e2e2c60cac0cc06798e94a0d28c3', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h$4("label", { key: 'a45199618751e24b7d4a1bc13ad85c599cc93d1c', htmlFor: "name" }, "Name"), h$4("input", { key: 'bee3be7a680abbffc08caa5c549b68b1e653872d', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h$4("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h$4("input", { key: 'e8fab4d442188f7f2f325ff7bde3dce6d3f772f6', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;
@@ -6211,7 +6211,7 @@ const PosRouter = class {
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h$4("slot", { key: '8b09de3dbbd253665cd541b9f264b0dcdc774354' });
+        return h$4("slot", { key: '2775fc2835158ccd8d540e4f27edfd497eafe7a9' });
     }
 };
 PosRouter.style = posRouterCss();
@@ -6240,7 +6240,7 @@ const PosSelectTerm = class {
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (h$4(Host, { key: '2e995b15a3b76a13cd7e11d09670121a6191b5ce' }, h$4("input", { key: 'ad79f1b410312790d4f5cd1f398b2eec3c04aad7', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h$4("datalist", { key: 'e3cc9ce85b75033bac29a32ca8e55c57535a9659', part: "terms", id: "terms" }, this.terms.map(term => (h$4("option", { value: term.uri }, term.shorthand))))));
+        return (h$4(Host, { key: 'a4050d72acd62d907f0fd4c3b90c54194700871c' }, h$4("input", { key: '99b35c4a14a2623599ba237bb4af0b79c0761196', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h$4("datalist", { key: 'd64ad5ea83200014c6de5cd4720f29922494982c', part: "terms", id: "terms" }, this.terms.map(term => (h$4("option", { value: term.uri }, term.shorthand))))));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {
@@ -6263,7 +6263,104 @@ const PosSettingOfflineCache = class {
 };
 PosSettingOfflineCache.style = posSettingOfflineCacheCss();
 
-const posToolSelectCss = () => `:host {\\n  --button-size: var(--size-16);\\n  display: block;\\n  position: sticky;\\n  align-self: flex-start;\\n  top: 0;\\n  overflow: auto;\\n  min-width: var(--button-size);\\n  z-index: var(--layer-1);\\n}\\n\\n[role='tablist'] {\\n  display: flex;\\n  flex-direction: column;\\n  justify-content: center;\\n\\n  border-right: var(--size-px) solid var(--pos-border-color);\\n\\n  button {\\n    display: flex;\\n    flex-direction: column;\\n    align-items: center;\\n    justify-content: center;\\n    gap: 0;\\n    font-size: var(--size-6);\\n    position: relative;\\n    overflow: hidden;\\n    outline: none;\\n    border: none;\\n    width: var(--button-size);\\n    min-width: var(--button-size);\\n    height: var(--button-size);\\n    min-height: var(--button-size);\\n    color: var(--pos-normal-text-color);\\n    background-color: var(--pos-background-color);\\n\\n    &::after {\\n      content: '';\\n      position: absolute;\\n      top: 50%;\\n      left: 50%;\\n      width: 0;\\n      height: 0;\\n      border-radius: 100%;\\n      background: color-mix(in srgb, var(--pos-primary-color), transparent 50%);\\n      transform: translate(-50%, -50%);\\n      opacity: 1;\\n    }\\n\\n    &:active::after,\\n    &:focus::after {\\n      width: calc(var(--button-size) * 1.5);\\n      height: calc(var(--button-size) * 1.5);\\n      opacity: 0;\\n      transition:\\n        width 0.5s ease-out,\\n        height 0.5s ease-out,\\n        opacity 1s ease-out;\\n    }\\n\\n    &:focus-visible {\\n      border: var(--size-px) solid var(--pos-primary-color);\\n    }\\n\\n    @media (min-width: 640px) {\\n      &[aria-selected] {\\n        border-right: var(--size-1) solid var(--pos-primary-color);\\n      }\\n    }\\n\\n    .text {\\n      font-size: var(--size-3);\\n      white-space: nowrap;\\n      text-overflow: ellipsis;\\n      width: 100%;\\n      overflow: hidden;\\n    }\\n  }\\n}\\n\\n@media (max-width: 640px) {\\n  :host {\\n    position: fixed;\\n    top: unset;\\n    bottom: 0;\\n    width: 100dvw;\\n  }\\n  [role='tablist'] {\\n    flex-direction: row;\\n    background-color: var(--pos-background-color);\\n\\n    border-top: var(--size-px) solid var(--pos-border-color);\\n\\n    button {\\n      &[aria-selected] {\\n        border-top: var(--size-1) solid var(--pos-primary-color);\\n      }\\n    }\\n  }\\n}\\n`;
+// src/components/divider/divider.styles.ts
+var divider_styles_default = i$5`
+  :host {
+    --color: var(--sl-panel-border-color);
+    --width: var(--sl-panel-border-width);
+    --spacing: var(--sl-spacing-medium);
+  }
+
+  :host(:not([vertical])) {
+    display: block;
+    border-top: solid var(--width) var(--color);
+    margin: var(--spacing) 0;
+  }
+
+  :host([vertical]) {
+    display: inline-block;
+    height: 100%;
+    border-left: solid var(--width) var(--color);
+    margin: 0 var(--spacing);
+  }
+`;
+
+var SlDivider = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+  }
+  handleVerticalChange() {
+    this.setAttribute("aria-orientation", this.vertical ? "vertical" : "horizontal");
+  }
+};
+SlDivider.styles = [component_styles_default, divider_styles_default];
+__decorateClass([
+  n$6({ type: Boolean, reflect: true })
+], SlDivider.prototype, "vertical", 2);
+__decorateClass([
+  watch("vertical")
+], SlDivider.prototype, "handleVerticalChange", 1);
+
+SlDivider.define("sl-divider");
+
+function openNewTab(url) {
+    window.open(url.toString(), '_blank');
+}
+
+const posShareCss = () => `:host{display:flex;aspect-ratio:1/1;height:var(--size-8);align-items:center;justify-content:center}sl-dropdown{height:100%;width:100%;display:flex;align-items:center;justify-content:center;&::part(trigger){height:100%;width:100%}button{display:flex;align-items:center;justify-content:center;height:100%;width:100%;cursor:pointer;padding:0;margin:0}}sl-menu-item[disabled]{&::part(base){cursor:default;opacity:1}}`;
+
+const PosShare = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.apps = [];
+    }
+    async resourceLoaded(e) {
+        if (e.detail === this.uri) {
+            await this.updateApps();
+        }
+    }
+    async componentWillLoad() {
+        this.os = await usePodOS(this.el);
+        await this.updateApps();
+    }
+    async updateApps() {
+        const thing = this.os.store.get(this.uri);
+        this.apps = this.os.proposeAppsFor(thing);
+    }
+    onSelect(e) {
+        const { value } = e.detail.item;
+        if (value === 'copy-uri') {
+            navigator.clipboard.writeText(this.uri);
+        }
+        else {
+            openNewTab(value.urlTemplate.expand({ uri: this.uri }));
+        }
+    }
+    render() {
+        return (h$4("sl-dropdown", { key: '67ce5a1f7e5630ff40a6e79eaa9ab7f32b5f1a00' }, h$4("button", { key: '6c946718e7af9f0ef212c3853641f06a24d79474', slot: "trigger", "aria-label": "Share", part: "button" }, h$4("sl-icon", { key: 'effc4e9bdf4236451636f1b4622605c87746d414', name: "share" })), h$4("sl-menu", { key: '2f1c8e707e71a699803c2897fda8f1e79ccd5267' }, h$4("sl-menu-item", { key: '5a59cffe8351c23389620b38b60f8ccd24dce351', value: "copy-uri" }, h$4("sl-icon", { key: 'ab9b9d7f8a2a91e0a4f5ac657b9ff390418948cc', slot: "prefix", name: "copy" }), "Copy URI"), this.apps.length > 0 && h$4(OpenWithApps, { key: '718fbda37b7171df356afe02e6d6f7f1e8e8cd26', apps: this.apps }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "uri": [{
+                "updateApps": 0
+            }]
+    }; }
+};
+function OpenWithApps({ apps }) {
+    return [
+        h$4("sl-divider", null),
+        h$4("sl-menu-item", { disabled: true }, "Open with..."),
+        apps.map(it => h$4("sl-menu-item", { value: it }, it.name)),
+    ];
+}
+PosShare.style = posShareCss();
+
+const posToolSelectCss = () => `:host {   --button-size: var(--size-16);   display: block;   position: sticky;   align-self: flex-start;   top: 0;   overflow: auto;   min-width: var(--button-size);   z-index: var(--layer-1); }  [role='tablist'] {   display: flex;   flex-direction: column;   justify-content: center;    border-right: var(--size-px) solid var(--pos-border-color);    button {     display: flex;     flex-direction: column;     align-items: center;     justify-content: center;     gap: 0;     font-size: var(--size-6);     position: relative;     overflow: hidden;     outline: none;     border: none;     width: var(--button-size);     min-width: var(--button-size);     height: var(--button-size);     min-height: var(--button-size);     color: var(--pos-normal-text-color);     background-color: var(--pos-background-color);      &::after {       content: '';       position: absolute;       top: 50%;       left: 50%;       width: 0;       height: 0;       border-radius: 100%;       background: color-mix(in srgb, var(--pos-primary-color), transparent 50%);       transform: translate(-50%, -50%);       opacity: 1;     }      &:active::after,     &:focus::after {       width: calc(var(--button-size) * 1.5);       height: calc(var(--button-size) * 1.5);       opacity: 0;       transition:         width 0.5s ease-out,         height 0.5s ease-out,         opacity 1s ease-out;     }      &:focus-visible {       border: var(--size-px) solid var(--pos-primary-color);     }      @media (min-width: 640px) {       &[aria-selected] {         border-right: var(--size-1) solid var(--pos-primary-color);       }     }      .text {       font-size: var(--size-3);       white-space: nowrap;       text-overflow: ellipsis;       width: 100%;       overflow: hidden;     }   } }  @media (max-width: 640px) {   :host {     position: fixed;     top: unset;     bottom: 0;     width: 100dvw;   }   [role='tablist'] {     flex-direction: row;     background-color: var(--pos-background-color);      border-top: var(--size-px) solid var(--pos-border-color);      button {       &[aria-selected] {         border-top: var(--size-1) solid var(--pos-primary-color);       }     }   } } `;
 
 const PosToolSelect = class {
     constructor(hostRef) {
@@ -6286,7 +6383,7 @@ const PosToolSelect = class {
 };
 PosToolSelect.style = posToolSelectCss();
 
-const posTypeIndexEntriesCss = () => `dl {\\n  > * {\\n    display: flex;\\n    flex-direction: column;\\n    gap: var(--size-1);\\n  }\\n\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--size-4);\\n  dd {\\n    margin: 0;\\n  }\\n}\\n`;
+const posTypeIndexEntriesCss = () => `dl {   > * {     display: flex;     flex-direction: column;     gap: var(--size-1);   }    display: flex;   flex-direction: column;   gap: var(--size-4);   dd {     margin: 0;   } } `;
 
 const PosTypeIndexEntries = class {
     constructor(hostRef) {
@@ -10740,7 +10837,7 @@ class ThumbnailGenerator extends UIPlugin {
     }
 }
 
-const version$2 = "5.1.0";
+const version$2 = "5.1.1";
 var packageJson$2 = {
 	version: version$2};
 
@@ -13314,8 +13411,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);
         }
@@ -13632,10 +13729,6 @@ class Dashboard extends UIPlugin {
     };
 }
 
-const version$1 = "4.1.0";
-var packageJson$1 = {
-	version: version$1};
-
 var cropper$1 = {exports: {}};
 
 /*!
@@ -16922,6 +17015,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)
 //
@@ -17016,155 +17190,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,
@@ -17195,7 +17227,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,
@@ -17226,9 +17264,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,
@@ -17236,14 +17283,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).
@@ -17262,15 +17310,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({
+            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({
-            currentImage: null,
+            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);
@@ -17282,14 +17509,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 }));
     }
 }
 
@@ -18559,7 +18787,7 @@ const PosUpload = class {
         }
     }
     render() {
-        return h$4("div", { key: '0f77e2cac68f5aaf1d25a429b866015160c5787b', class: "container", ref: el => (this.uppy = el) });
+        return h$4("div", { key: 'bba1889322d2bb688881bcab1797dbc2a325e4e3', class: "container", ref: el => (this.uppy = el) });
     }
 };
 PosUpload.style = posUploadCss();
@@ -18715,51 +18943,6 @@ __decorateClass([
 
 SlAvatar.define("sl-avatar");
 
-// src/components/divider/divider.styles.ts
-var divider_styles_default = i$5`
-  :host {
-    --color: var(--sl-panel-border-color);
-    --width: var(--sl-panel-border-width);
-    --spacing: var(--sl-spacing-medium);
-  }
-
-  :host(:not([vertical])) {
-    display: block;
-    border-top: solid var(--width) var(--color);
-    margin: var(--spacing) 0;
-  }
-
-  :host([vertical]) {
-    display: inline-block;
-    height: 100%;
-    border-left: solid var(--width) var(--color);
-    margin: 0 var(--spacing);
-  }
-`;
-
-var SlDivider = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.vertical = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "separator");
-  }
-  handleVerticalChange() {
-    this.setAttribute("aria-orientation", this.vertical ? "vertical" : "horizontal");
-  }
-};
-SlDivider.styles = [component_styles_default, divider_styles_default];
-__decorateClass([
-  n$6({ type: Boolean, reflect: true })
-], SlDivider.prototype, "vertical", 2);
-__decorateClass([
-  watch("vertical")
-], SlDivider.prototype, "handleVerticalChange", 1);
-
-SlDivider.define("sl-divider");
-
 const posUserMenuCss = () => `button{display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:none;cursor:pointer;border-radius:50%;pos-picture{--width:40px;--height:40px;--border-radius:50%}sl-avatar{--size:40px}}sl-dropdown{display:block}`;
 
 const PosUserMenu = class {
@@ -18785,10 +18968,10 @@ const PosUserMenu = class {
     }
     render() {
         if (!this.webId)
-            return null; //?
+            return null;
         return (h$4("pos-resource", { uri: this.webId }, h$4("sl-dropdown", null, h$4("button", { slot: "trigger", "aria-label": "User menu" }, h$4("pos-picture", { "no-upload": true }, h$4("sl-avatar", null))), h$4("sl-menu", null, h$4("sl-menu-item", { value: "dashboard" }, "Dashboard"), h$4("sl-menu-item", { value: "profile" }, h$4("pos-label", null)), h$4("sl-menu-item", { value: "settings" }, "Settings"), h$4("sl-divider", null), h$4("sl-menu-item", { value: "logout" }, "Logout")))));
     }
 };
 PosUserMenu.style = posUserMenuCss();
 
-export { PosAddNewThing as pos_add_new_thing, PosApp as pos_app, PosAppBrowser as pos_app_browser, PosAppDashboard as pos_app_dashboard, PosAppSettings as pos_app_settings, PosDescription as pos_description, PosDialog as pos_dialog, PosErrorToast as pos_error_toast, PosExampleResources as pos_example_resources, PosGettingStarted as pos_getting_started, PosImage as pos_image, PosInternalRouter as pos_internal_router, PosLabel as pos_label, PosLogin as pos_login, PosLoginForm as pos_login_form, PosMakeFindable as pos_make_findable, PosNavigation as pos_navigation, PosNavigationBar as pos_navigation_bar, PosNewThingForm as pos_new_thing_form, PosPicture as pos_picture, PosPredicate as pos_predicate, PosResource as pos_resource, PosRichLink as pos_rich_link, PosRouter as pos_router, PosSelectTerm as pos_select_term, PosSettingOfflineCache as pos_setting_offline_cache, PosToolSelect as pos_tool_select, PosTypeIndexEntries as pos_type_index_entries, PosTypeRouter as pos_type_router, PosUpload as pos_upload, PosUserMenu as pos_user_menu };
+export { PosAddNewThing as pos_add_new_thing, PosApp as pos_app, PosAppBrowser as pos_app_browser, PosAppDashboard as pos_app_dashboard, PosAppSettings as pos_app_settings, PosDescription as pos_description, PosDialog as pos_dialog, PosErrorToast as pos_error_toast, PosExampleResources as pos_example_resources, PosGettingStarted as pos_getting_started, PosImage as pos_image, PosInternalRouter as pos_internal_router, PosLabel as pos_label, PosLogin as pos_login, PosLoginForm as pos_login_form, PosMakeFindable as pos_make_findable, PosNavigation as pos_navigation, PosNavigationBar as pos_navigation_bar, PosNewThingForm as pos_new_thing_form, PosPicture as pos_picture, PosPredicate as pos_predicate, PosResource as pos_resource, PosRichLink as pos_rich_link, PosRouter as pos_router, PosSelectTerm as pos_select_term, PosSettingOfflineCache as pos_setting_offline_cache, PosShare as pos_share, PosToolSelect as pos_tool_select, PosTypeIndexEntries as pos_type_index_entries, PosTypeRouter as pos_type_router, PosUpload as pos_upload, PosUserMenu as pos_user_menu };