vue-cropperjs2 0.0.3 → 0.0.5

package/dist/index.js

@@ -0,0 +1,1458 @@
+import { defineComponent as e, h as t, useTemplateRef as n } from "vue";
+//#region node_modules/.pnpm/@cropper+utils@2.1.1/node_modules/@cropper/utils/dist/utils.esm.raw.js
+var r = typeof window < "u" && window.document !== void 0, i = r ? window : {}, a = r ? "ontouchstart" in i.document.documentElement : !1, o = r ? "PointerEvent" in i : !1, s = "cropper", c = `${s}-canvas`, l = `${s}-crosshair`, u = `${s}-grid`, d = `${s}-handle`, f = `${s}-image`, p = `${s}-selection`, m = `${s}-shade`, h = `${s}-viewer`, g = "select", _ = "move", v = "scale", y = "rotate", b = "transform", x = "none", S = "n-resize", C = "e-resize", ee = "s-resize", te = "w-resize", w = "ne-resize", T = "nw-resize", E = "se-resize", D = "sw-resize", ne = a ? "touchend touchcancel" : "mouseup", re = a ? "touchmove" : "mousemove", ie = o ? "pointerdown" : a ? "touchstart" : "mousedown", ae = o ? "pointermove" : re, oe = o ? "pointerup pointercancel" : ne, se = "error", ce = "keydown", O = "load", le = "resize", ue = "wheel", k = "action", A = "actionend", j = "actionstart", M = "change", de = "transform";
+function N(e) {
+	return typeof e == "string";
+}
+var fe = Number.isNaN || i.isNaN;
+function P(e) {
+	return typeof e == "number" && !fe(e);
+}
+function F(e) {
+	return P(e) && e > 0 && e < Infinity;
+}
+function pe(e) {
+	return e === void 0;
+}
+function me(e) {
+	return typeof e == "object" && !!e;
+}
+var { hasOwnProperty: he } = Object.prototype;
+function I(e) {
+	if (!me(e)) return !1;
+	try {
+		let { constructor: t } = e, { prototype: n } = t;
+		return t && n && he.call(n, "isPrototypeOf");
+	} catch {
+		return !1;
+	}
+}
+function L(e) {
+	return typeof e == "function";
+}
+function R(e) {
+	return typeof e == "object" && !!e && e.nodeType === 1;
+}
+var ge = /([a-z\d])([A-Z])/g;
+function _e(e) {
+	return String(e).replace(ge, "$1-$2").toLowerCase();
+}
+var ve = /-[A-z\d]/g;
+function ye(e) {
+	return e.replace(ve, (e) => e.slice(1).toUpperCase());
+}
+var be = /\s\s*/;
+function z(e, t, n, r) {
+	t.trim().split(be).forEach((t) => {
+		e.removeEventListener(t, n, r);
+	});
+}
+function B(e, t, n, r) {
+	t.trim().split(be).forEach((t) => {
+		e.addEventListener(t, n, r);
+	});
+}
+function xe(e, t, n, r) {
+	B(e, t, n, Object.assign(Object.assign({}, r), { once: !0 }));
+}
+var Se = {
+	bubbles: !0,
+	cancelable: !0,
+	composed: !0
+};
+function Ce(e, t, n, r) {
+	return e.dispatchEvent(new CustomEvent(t, Object.assign(Object.assign(Object.assign({}, Se), { detail: n }), r)));
+}
+function we(e) {
+	return typeof e.composedPath == "function" && e.composedPath().find(R) || e.target;
+}
+var Te = Promise.resolve();
+function Ee(e, t) {
+	return t ? Te.then(e ? t.bind(e) : t) : Te;
+}
+function De(e) {
+	let t = e.getRootNode();
+	switch (t.nodeType) {
+		case 1: return t.ownerDocument;
+		case 9: return t;
+		case 11: return t;
+	}
+	return null;
+}
+function Oe(e) {
+	let { documentElement: t } = e.ownerDocument, n = e.getBoundingClientRect();
+	return {
+		left: n.left + (i.pageXOffset - t.clientLeft),
+		top: n.top + (i.pageYOffset - t.clientTop)
+	};
+}
+var ke = /deg|g?rad|turn$/i;
+function V(e) {
+	let t = parseFloat(e) || 0;
+	if (t !== 0) {
+		let [n = "rad"] = String(e).match(ke) || [];
+		switch (n.toLowerCase()) {
+			case "deg": return t / 360 * (Math.PI * 2);
+			case "grad": return t / 400 * (Math.PI * 2);
+			case "turn": return Math.PI * 2 * t;
+		}
+	}
+	return t;
+}
+var Ae = "contain", je = "cover";
+function H(e, t = Ae) {
+	let { aspectRatio: n } = e, { width: r, height: i } = e, a = F(r), o = F(i);
+	if (a && o) {
+		let e = i * n;
+		t === Ae && e > r || t === je && e < r ? i = r / n : r = i * n;
+	} else a ? i = r / n : o && (r = i * n);
+	return {
+		width: r,
+		height: i
+	};
+}
+function Me(e, ...t) {
+	if (t.length === 0) return e;
+	let [n, r, i, a, o, s] = e, [c, l, u, d, f, p] = t[0];
+	return e = [
+		n * c + i * l,
+		r * c + a * l,
+		n * u + i * d,
+		r * u + a * d,
+		n * f + i * p + o,
+		r * f + a * p + s
+	], Me(e, ...t.slice(1));
+}
+//#endregion
+//#region node_modules/.pnpm/@cropper+element@2.1.1/node_modules/@cropper/element/dist/element.esm.raw.js
+var Ne = ":host([hidden]){display:none!important}", Pe = /left|top|width|height/i, Fe = "open", U = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), Ie = /* @__PURE__ */ new Map(), Le = i.document && Array.isArray(i.document.adoptedStyleSheets) && "replaceSync" in i.CSSStyleSheet.prototype, G = class extends HTMLElement {
+	get $sharedStyle() {
+		return `${this.themeColor ? `:host{--theme-color: ${this.themeColor};}` : ""}${Ne}`;
+	}
+	constructor() {
+		super(), this.shadowRootMode = Fe, this.slottable = !0;
+		let e = Object.getPrototypeOf(this)?.constructor?.$name;
+		e && Ie.set(e, this.tagName.toLowerCase());
+	}
+	static get observedAttributes() {
+		return [
+			"shadow-root-mode",
+			"slottable",
+			"theme-color"
+		];
+	}
+	attributeChangedCallback(e, t, n) {
+		if (Object.is(n, t)) return;
+		let r = ye(e), i = this[r], a = n;
+		switch (typeof i) {
+			case "boolean":
+				a = n !== null && n !== "false";
+				break;
+			case "number":
+				a = Number(n);
+				break;
+		}
+		switch (this[r] = a, e) {
+			case "theme-color": {
+				let e = W.get(this), t = this.$sharedStyle;
+				e && t && (Le ? e.replaceSync(t) : e.textContent = t);
+				break;
+			}
+		}
+	}
+	$propertyChangedCallback(e, t, n) {
+		if (!Object.is(n, t)) switch (e = _e(e), typeof n) {
+			case "boolean":
+				n === !0 ? this.hasAttribute(e) || this.setAttribute(e, "") : this.removeAttribute(e);
+				break;
+			case "number": n = fe(n) ? "" : String(n);
+			default: n ? this.getAttribute(e) !== n && this.setAttribute(e, n) : this.removeAttribute(e);
+		}
+	}
+	connectedCallback() {
+		Object.getPrototypeOf(this).constructor.observedAttributes.forEach((e) => {
+			let t = ye(e), n = this[t];
+			pe(n) || this.$propertyChangedCallback(t, void 0, n), Object.defineProperty(this, t, {
+				enumerable: !0,
+				configurable: !0,
+				get() {
+					return n;
+				},
+				set(e) {
+					let r = n;
+					n = e, this.$propertyChangedCallback(t, r, e);
+				}
+			});
+		});
+		let e = this.shadowRoot || this.attachShadow({ mode: this.shadowRootMode || Fe });
+		if (U.set(this, e), W.set(this, this.$addStyles(this.$sharedStyle)), this.$style && this.$addStyles(this.$style), this.$template) {
+			let t = document.createElement("template");
+			t.innerHTML = this.$template, e.appendChild(t.content);
+		}
+		if (this.slottable) {
+			let t = document.createElement("slot");
+			e.appendChild(t);
+		}
+	}
+	disconnectedCallback() {
+		W.has(this) && W.delete(this), U.has(this) && U.delete(this);
+	}
+	$getTagNameOf(e) {
+		return Ie.get(e) ?? e;
+	}
+	$setStyles(e) {
+		return Object.keys(e).forEach((t) => {
+			let n = e[t];
+			P(n) && (n = n !== 0 && Pe.test(t) ? `${n}px` : String(n)), this.style[t] = n;
+		}), this;
+	}
+	$getShadowRoot() {
+		return this.shadowRoot || U.get(this);
+	}
+	$addStyles(e) {
+		let t, n = this.$getShadowRoot();
+		return Le ? (t = new CSSStyleSheet(), t.replaceSync(e), n.adoptedStyleSheets = n.adoptedStyleSheets.concat(t)) : (t = document.createElement("style"), t.textContent = e, n.appendChild(t)), t;
+	}
+	$emit(e, t, n) {
+		return Ce(this, e, t, n);
+	}
+	$nextTick(e) {
+		return Ee(this, e);
+	}
+	static $define(e, t) {
+		me(e) && (t = e, e = ""), e ||= this.$name || this.name, e = _e(e), r && i.customElements && !i.customElements.get(e) && customElements.define(e, this, t);
+	}
+};
+G.$version = "2.1.1";
+//#endregion
+//#region node_modules/.pnpm/@cropper+element-canvas@2.1.1/node_modules/@cropper/element-canvas/dist/element-canvas.esm.raw.js
+var Re = ":host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);background-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:\"\";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}", K = class extends G {
+	constructor() {
+		super(...arguments), this.$onPointerDown = null, this.$onPointerMove = null, this.$onPointerUp = null, this.$onWheel = null, this.$wheeling = !1, this.$pointers = /* @__PURE__ */ new Map(), this.$style = Re, this.$action = x, this.background = !1, this.disabled = !1, this.scaleStep = .1, this.themeColor = "#39f";
+	}
+	static get observedAttributes() {
+		return super.observedAttributes.concat([
+			"background",
+			"disabled",
+			"scale-step"
+		]);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.disabled || this.$bind();
+	}
+	disconnectedCallback() {
+		this.disabled || this.$unbind(), super.disconnectedCallback();
+	}
+	$propertyChangedCallback(e, t, n) {
+		if (!Object.is(n, t)) switch (super.$propertyChangedCallback(e, t, n), e) {
+			case "disabled":
+				n ? this.$unbind() : this.$bind();
+				break;
+		}
+	}
+	$bind() {
+		this.$onPointerDown || (this.$onPointerDown = this.$handlePointerDown.bind(this), B(this, ie, this.$onPointerDown)), this.$onPointerMove || (this.$onPointerMove = this.$handlePointerMove.bind(this), B(this.ownerDocument, ae, this.$onPointerMove)), this.$onPointerUp || (this.$onPointerUp = this.$handlePointerUp.bind(this), B(this.ownerDocument, oe, this.$onPointerUp)), this.$onWheel || (this.$onWheel = this.$handleWheel.bind(this), B(this, ue, this.$onWheel, {
+			passive: !1,
+			capture: !0
+		}));
+	}
+	$unbind() {
+		this.$onPointerDown &&= (z(this, ie, this.$onPointerDown), null), this.$onPointerMove &&= (z(this.ownerDocument, ae, this.$onPointerMove), null), this.$onPointerUp &&= (z(this.ownerDocument, oe, this.$onPointerUp), null), this.$onWheel &&= (z(this, ue, this.$onWheel, { capture: !0 }), null);
+	}
+	$handlePointerDown(e) {
+		let { buttons: t, button: n, type: r } = e;
+		if (this.disabled || (r === "pointerdown" && e.pointerType === "mouse" || r === "mousedown") && (P(t) && t !== 1 || P(n) && n !== 0 || e.ctrlKey)) return;
+		let { $pointers: i } = this, a = "";
+		if (e.changedTouches) Array.from(e.changedTouches).forEach(({ identifier: e, pageX: t, pageY: n }) => {
+			i.set(e, {
+				startX: t,
+				startY: n,
+				endX: t,
+				endY: n
+			});
+		});
+		else {
+			let { pointerId: t = 0, pageX: n, pageY: r } = e;
+			i.set(t, {
+				startX: n,
+				startY: r,
+				endX: n,
+				endY: r
+			});
+		}
+		i.size > 1 ? a = b : R(e.target) && (a = e.target.action || e.target.getAttribute("action") || ""), this.$emit("actionstart", {
+			action: a,
+			relatedEvent: e
+		}) !== !1 && (e.preventDefault(), this.$action = a, this.style.willChange = "transform");
+	}
+	$handlePointerMove(e) {
+		let { $action: t, $pointers: n } = this;
+		if (this.disabled || t === "none" || n.size === 0 || this.$emit("actionmove", {
+			action: t,
+			relatedEvent: e
+		}) === !1) return;
+		if (e.preventDefault(), e.changedTouches) Array.from(e.changedTouches).forEach(({ identifier: e, pageX: t, pageY: r }) => {
+			let i = n.get(e);
+			i && Object.assign(i, {
+				endX: t,
+				endY: r
+			});
+		});
+		else {
+			let { pointerId: t = 0, pageX: r, pageY: i } = e, a = n.get(t);
+			a && Object.assign(a, {
+				endX: r,
+				endY: i
+			});
+		}
+		let r = {
+			action: t,
+			relatedEvent: e
+		};
+		if (t === "transform") {
+			let t = new Map(n), i = 0, a = 0, o = 0, s = 0, c = e.pageX, l = e.pageY;
+			n.forEach((e, n) => {
+				t.delete(n), t.forEach((t) => {
+					let n = t.startX - e.startX, r = t.startY - e.startY, u = t.endX - e.endX, d = t.endY - e.endY, f = 0, p = 0, m = 0, h = 0;
+					if (n === 0 ? r < 0 ? m = Math.PI * 2 : r > 0 && (m = Math.PI) : n > 0 ? m = Math.PI / 2 + Math.atan(r / n) : n < 0 && (m = Math.PI * 1.5 + Math.atan(r / n)), u === 0 ? d < 0 ? h = Math.PI * 2 : d > 0 && (h = Math.PI) : u > 0 ? h = Math.PI / 2 + Math.atan(d / u) : u < 0 && (h = Math.PI * 1.5 + Math.atan(d / u)), h > 0 || m > 0) {
+						let n = h - m, r = Math.abs(n);
+						r > i && (i = r, o = n, c = (e.startX + t.startX) / 2, l = (e.startY + t.startY) / 2);
+					}
+					if (n = Math.abs(n), r = Math.abs(r), u = Math.abs(u), d = Math.abs(d), n > 0 && r > 0 ? f = Math.sqrt(n * n + r * r) : n > 0 ? f = n : r > 0 && (f = r), u > 0 && d > 0 ? p = Math.sqrt(u * u + d * d) : u > 0 ? p = u : d > 0 && (p = d), f > 0 && p > 0) {
+						let n = (p - f) / f, r = Math.abs(n);
+						r > a && (a = r, s = n, c = (e.startX + t.startX) / 2, l = (e.startY + t.startY) / 2);
+					}
+				});
+			});
+			let u = i > 0, d = a > 0;
+			u && d ? (r.rotate = o, r.scale = s, r.centerX = c, r.centerY = l) : u ? (r.action = y, r.rotate = o, r.centerX = c, r.centerY = l) : d ? (r.action = v, r.scale = s, r.centerX = c, r.centerY = l) : r.action = x;
+		} else {
+			let [e] = Array.from(n.values());
+			Object.assign(r, e);
+		}
+		n.forEach((e) => {
+			e.startX = e.endX, e.startY = e.endY;
+		}), r.action !== "none" && this.$emit(k, r, { cancelable: !1 });
+	}
+	$handlePointerUp(e) {
+		let { $action: t, $pointers: n } = this;
+		if (!(this.disabled || t === "none") && this.$emit("actionend", {
+			action: t,
+			relatedEvent: e
+		}) !== !1) {
+			if (e.preventDefault(), e.changedTouches) Array.from(e.changedTouches).forEach(({ identifier: e }) => {
+				n.delete(e);
+			});
+			else {
+				let { pointerId: t = 0 } = e;
+				n.delete(t);
+			}
+			n.size === 0 && (this.style.willChange = "", this.$action = x);
+		}
+	}
+	$handleWheel(e) {
+		if (this.disabled || (e.preventDefault(), this.$wheeling)) return;
+		this.$wheeling = !0, setTimeout(() => {
+			this.$wheeling = !1;
+		}, 50);
+		let t = (e.deltaY > 0 ? -1 : 1) * this.scaleStep;
+		this.$emit(k, {
+			action: v,
+			scale: t,
+			relatedEvent: e
+		}, { cancelable: !1 });
+	}
+	$setAction(e) {
+		return N(e) && (this.$action = e), this;
+	}
+	$toCanvas(e) {
+		return new Promise((t, n) => {
+			if (!this.isConnected) {
+				n(/* @__PURE__ */ Error("The current element is not connected to the DOM."));
+				return;
+			}
+			let r = document.createElement("canvas"), i = this.offsetWidth, a = this.offsetHeight, o = 1;
+			I(e) && (F(e.width) || F(e.height)) && ({width: i, height: a} = H({
+				aspectRatio: i / a,
+				width: e.width,
+				height: e.height
+			}), o = i / this.offsetWidth), r.width = i, r.height = a;
+			let s = this.querySelector(this.$getTagNameOf(f));
+			if (!s) {
+				t(r);
+				return;
+			}
+			s.$ready().then((n) => {
+				let c = r.getContext("2d");
+				if (c) {
+					let [t, l, u, d, f, p] = s.$getTransform(), m = f, h = p, g = n.naturalWidth, _ = n.naturalHeight;
+					o !== 1 && (m *= o, h *= o, g *= o, _ *= o);
+					let v = g / 2, y = _ / 2;
+					c.fillStyle = "transparent", c.fillRect(0, 0, i, a), I(e) && L(e.beforeDraw) && e.beforeDraw.call(this, c, r), c.save(), c.translate(v, y), c.transform(t, l, u, d, m, h), c.translate(-v, -y), c.drawImage(n, 0, 0, g, _), c.restore();
+				}
+				t(r);
+			}).catch(n);
+		});
+	}
+};
+K.$name = c, K.$version = "2.1.1";
+//#endregion
+//#region node_modules/.pnpm/@cropper+element-image@2.1.1/node_modules/@cropper/element-image/dist/element-image.esm.raw.js
+var ze = ":host{display:inline-block}img{display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}", Be = /* @__PURE__ */ new WeakMap(), Ve = [
+	"alt",
+	"crossorigin",
+	"decoding",
+	"elementtiming",
+	"fetchpriority",
+	"loading",
+	"referrerpolicy",
+	"sizes",
+	"src",
+	"srcset"
+], q = class extends G {
+	constructor() {
+		super(...arguments), this.$isReady = !1, this.$matrix = [
+			1,
+			0,
+			0,
+			1,
+			0,
+			0
+		], this.$onLoad = null, this.$onCanvasAction = null, this.$onCanvasActionEnd = null, this.$onCanvasActionStart = null, this.$actionStartTarget = null, this.$style = ze, this.$image = new Image(), this.initialCenterSize = "contain", this.rotatable = !1, this.scalable = !1, this.skewable = !1, this.slottable = !1, this.translatable = !1, this.alt = "", this.crossorigin = "", this.decoding = "", this.elementtiming = "", this.fetchpriority = "", this.loading = "", this.referrerpolicy = "", this.sizes = "", this.src = "", this.srcset = "";
+	}
+	set $canvas(e) {
+		Be.set(this, e);
+	}
+	get $canvas() {
+		return Be.get(this);
+	}
+	static get observedAttributes() {
+		return super.observedAttributes.concat(Ve, [
+			"initial-center-size",
+			"rotatable",
+			"scalable",
+			"skewable",
+			"translatable"
+		]);
+	}
+	attributeChangedCallback(e, t, n) {
+		Object.is(n, t) || (super.attributeChangedCallback(e, t, n), Ve.includes(e) && this.$image.setAttribute(e, n));
+	}
+	$propertyChangedCallback(e, t, n) {
+		if (!Object.is(n, t)) switch (super.$propertyChangedCallback(e, t, n), e) {
+			case "initialCenterSize":
+				this.$nextTick(() => {
+					this.$center(n);
+				});
+				break;
+			case "src":
+				this.$isReady = !1;
+				break;
+		}
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		let { $image: e } = this, t = this.closest(this.$getTagNameOf(c));
+		t && (this.$canvas = t, this.$setStyles({
+			display: "block",
+			position: "absolute"
+		}), this.$onCanvasActionStart = (e) => {
+			this.$actionStartTarget = e.detail?.relatedEvent?.target;
+		}, this.$onCanvasActionEnd = () => {
+			this.$actionStartTarget = null;
+		}, this.$onCanvasAction = this.$handleAction.bind(this), B(t, j, this.$onCanvasActionStart), B(t, A, this.$onCanvasActionEnd), B(t, k, this.$onCanvasAction)), this.$onLoad = this.$handleLoad.bind(this), B(e, O, this.$onLoad), this.$getShadowRoot().appendChild(e);
+	}
+	disconnectedCallback() {
+		let { $image: e, $canvas: t } = this;
+		t && (this.$onCanvasActionStart &&= (z(t, j, this.$onCanvasActionStart), null), this.$onCanvasActionEnd &&= (z(t, A, this.$onCanvasActionEnd), null), this.$onCanvasAction &&= (z(t, k, this.$onCanvasAction), null)), e && this.$onLoad && (z(e, O, this.$onLoad), this.$onLoad = null), this.$getShadowRoot().removeChild(e), super.disconnectedCallback();
+	}
+	$handleLoad() {
+		let { $image: e } = this;
+		this.$setStyles({
+			width: e.naturalWidth,
+			height: e.naturalHeight
+		}), this.$canvas && this.$center(this.initialCenterSize), this.$isReady = !0;
+	}
+	$handleAction(e) {
+		if (this.hidden || !(this.rotatable || this.scalable || this.translatable)) return;
+		let { $canvas: t } = this, { detail: n } = e;
+		if (n) {
+			let { relatedEvent: e } = n, { action: r } = n;
+			switch (r === "transform" && (!this.rotatable || !this.scalable) && (r = this.rotatable ? y : this.scalable ? v : x), r) {
+				case _:
+					if (this.translatable) {
+						let r = null;
+						e && (r = e.target.closest(this.$getTagNameOf(p))), r ||= t.querySelector(this.$getTagNameOf(p)), r && r.multiple && !r.active && (r = t.querySelector(`${this.$getTagNameOf(p)}[active]`)), (!r || r.hidden || !r.movable || r.dynamic || !(this.$actionStartTarget && r.contains(this.$actionStartTarget))) && this.$move(n.endX - n.startX, n.endY - n.startY);
+					}
+					break;
+				case y:
+					if (this.rotatable) if (e) {
+						let { x: t, y: r } = this.getBoundingClientRect();
+						this.$rotate(n.rotate, e.clientX - t, e.clientY - r);
+					} else this.$rotate(n.rotate);
+					break;
+				case v:
+					if (this.scalable) if (e) {
+						let t = e.target.closest(this.$getTagNameOf(p));
+						if (!t || !t.zoomable || t.zoomable && t.dynamic) {
+							let { x: t, y: r } = this.getBoundingClientRect();
+							this.$zoom(n.scale, e.clientX - t, e.clientY - r);
+						}
+					} else this.$zoom(n.scale);
+					break;
+				case b:
+					if (this.rotatable && this.scalable) {
+						let { rotate: t } = n, { scale: r } = n;
+						r < 0 ? r = 1 / (1 - r) : r += 1;
+						let i = Math.cos(t), a = Math.sin(t), [o, s, c, l] = [
+							i * r,
+							a * r,
+							-a * r,
+							i * r
+						];
+						if (e) {
+							let t = this.getBoundingClientRect(), n = e.clientX - t.x, r = e.clientY - t.y, [i, a, u, d] = this.$matrix, f = t.width / 2, p = t.height / 2, m = n - f, h = r - p, g = (m * d - u * h) / (i * d - u * a), _ = (h * i - a * m) / (i * d - u * a);
+							this.$transform(o, s, c, l, g * (1 - o) + _ * c, _ * (1 - l) + g * s);
+						} else this.$transform(o, s, c, l, 0, 0);
+					}
+					break;
+			}
+		}
+	}
+	$ready(e) {
+		let { $image: t } = this, n = new Promise((e, n) => {
+			let r = /* @__PURE__ */ Error("Failed to load the image source");
+			if (t.complete) t.naturalWidth > 0 && t.naturalHeight > 0 ? e(t) : n(r);
+			else {
+				let i = () => {
+					z(t, se, a), setTimeout(() => {
+						e(t);
+					});
+				}, a = () => {
+					z(t, O, i), n(r);
+				};
+				xe(t, O, i), xe(t, se, a);
+			}
+		});
+		return L(e) && n.then((t) => (e(t), t)), n;
+	}
+	$center(e) {
+		let { parentElement: t } = this;
+		if (!t) return this;
+		let n = t.getBoundingClientRect(), r = n.width, i = n.height, { x: a, y: o, width: s, height: c } = this.getBoundingClientRect(), l = a + s / 2, u = o + c / 2, d = n.x + r / 2, f = n.y + i / 2, { translatable: p } = this;
+		if (!p && !this.$isReady && (this.translatable = !0, this.$nextTick(() => {
+			this.translatable = p;
+		})), this.$move(d - l, f - u), e && (s !== r || c !== i)) {
+			let t = r / s, n = i / c, { scalable: a } = this;
+			switch (e && !a && !this.$isReady && (this.scalable = !0, this.$nextTick(() => {
+				this.scalable = a;
+			})), e) {
+				case "cover":
+					this.$scale(Math.max(t, n));
+					break;
+				case "contain":
+					this.$scale(Math.min(t, n));
+					break;
+			}
+		}
+		return this;
+	}
+	$move(e, t = e) {
+		if (this.translatable && P(e) && P(t)) {
+			let [n, r, i, a] = this.$matrix, o = (e * a - i * t) / (n * a - i * r), s = (t * n - r * e) / (n * a - i * r);
+			this.$translate(o, s);
+		}
+		return this;
+	}
+	$moveTo(e, t = e) {
+		if (this.translatable && P(e) && P(t)) {
+			let [n, r, i, a] = this.$matrix, o = (e * a - i * t) / (n * a - i * r), s = (t * n - r * e) / (n * a - i * r);
+			this.$setTransform(n, r, i, a, o, s);
+		}
+		return this;
+	}
+	$rotate(e, t, n) {
+		if (this.rotatable) {
+			let r = V(e), i = Math.cos(r), a = Math.sin(r), [o, s, c, l] = [
+				i,
+				a,
+				-a,
+				i
+			];
+			if (P(t) && P(n)) {
+				let [e, r, i, a] = this.$matrix, { width: u, height: d } = this.getBoundingClientRect(), f = u / 2, p = d / 2, m = t - f, h = n - p, g = (m * a - i * h) / (e * a - i * r), _ = (h * e - r * m) / (e * a - i * r);
+				this.$transform(o, s, c, l, g * (1 - o) - _ * c, _ * (1 - l) - g * s);
+			} else this.$transform(o, s, c, l, 0, 0);
+		}
+		return this;
+	}
+	$zoom(e, t, n) {
+		if (!this.scalable || e === 0) return this;
+		if (e < 0 ? e = 1 / (1 - e) : e += 1, P(t) && P(n)) {
+			let [r, i, a, o] = this.$matrix, { width: s, height: c } = this.getBoundingClientRect(), l = s / 2, u = c / 2, d = t - l, f = n - u, p = (d * o - a * f) / (r * o - a * i), m = (f * r - i * d) / (r * o - a * i);
+			this.$transform(e, 0, 0, e, p * (1 - e), m * (1 - e));
+		} else this.$scale(e);
+		return this;
+	}
+	$scale(e, t = e) {
+		return this.scalable && this.$transform(e, 0, 0, t, 0, 0), this;
+	}
+	$skew(e, t = 0) {
+		if (this.skewable) {
+			let n = V(e), r = V(t);
+			this.$transform(1, Math.tan(r), Math.tan(n), 1, 0, 0);
+		}
+		return this;
+	}
+	$translate(e, t = e) {
+		return this.translatable && P(e) && P(t) && this.$transform(1, 0, 0, 1, e, t), this;
+	}
+	$transform(e, t, n, r, i, a) {
+		return P(e) && P(t) && P(n) && P(r) && P(i) && P(a) ? this.$setTransform(Me(this.$matrix, [
+			e,
+			t,
+			n,
+			r,
+			i,
+			a
+		])) : this;
+	}
+	$setTransform(e, t, n, r, i, a) {
+		if ((this.rotatable || this.scalable || this.skewable || this.translatable) && (Array.isArray(e) && ([e, t, n, r, i, a] = e), P(e) && P(t) && P(n) && P(r) && P(i) && P(a))) {
+			let o = [...this.$matrix], s = [
+				e,
+				t,
+				n,
+				r,
+				i,
+				a
+			];
+			if (this.$emit("transform", {
+				matrix: s,
+				oldMatrix: o
+			}) === !1) return this;
+			this.$matrix = s, this.style.transform = `matrix(${s.join(", ")})`;
+		}
+		return this;
+	}
+	$getTransform() {
+		return this.$matrix.slice();
+	}
+	$resetTransform() {
+		return this.$setTransform([
+			1,
+			0,
+			0,
+			1,
+			0,
+			0
+		]);
+	}
+};
+q.$name = f, q.$version = "2.1.1";
+//#endregion
+//#region node_modules/.pnpm/@cropper+element-shade@2.1.1/node_modules/@cropper/element-shade/dist/element-shade.esm.raw.js
+var He = ":host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}", Ue = /* @__PURE__ */ new WeakMap(), J = class extends G {
+	constructor() {
+		super(...arguments), this.$onWindowResize = null, this.$onCanvasActionEnd = null, this.$onCanvasActionStart = null, this.$onSelectionChange = null, this.$style = He, this.x = 0, this.y = 0, this.width = 0, this.height = 0, this.slottable = !1, this.themeColor = "rgba(0, 0, 0, 0.65)";
+	}
+	set $canvas(e) {
+		Ue.set(this, e);
+	}
+	get $canvas() {
+		return Ue.get(this);
+	}
+	static get observedAttributes() {
+		return super.observedAttributes.concat([
+			"height",
+			"width",
+			"x",
+			"y"
+		]);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		let e = this.closest(this.$getTagNameOf(c));
+		if (e) {
+			this.$canvas = e, this.style.position = "absolute";
+			let t = e.querySelector(this.$getTagNameOf(p));
+			t && (this.$onWindowResize = this.$render.bind(this), this.$onCanvasActionStart = (e) => {
+				t.hidden && e.detail.action === "select" && (this.hidden = !1);
+			}, this.$onCanvasActionEnd = (e) => {
+				t.hidden && e.detail.action === "select" && (this.hidden = !0);
+			}, this.$onSelectionChange = (e) => {
+				let { x: n, y: r, width: i, height: a } = e.defaultPrevented ? t : e.detail;
+				this.$change(n, r, i, a), (t.hidden || n === 0 && r === 0 && i === 0 && a === 0) && (this.hidden = !0);
+			}, B(window, le, this.$onWindowResize), B(e, j, this.$onCanvasActionStart), B(e, A, this.$onCanvasActionEnd), B(e, M, this.$onSelectionChange));
+		}
+		this.$render();
+	}
+	disconnectedCallback() {
+		let { $canvas: e } = this;
+		e && (this.$onWindowResize &&= (z(window, le, this.$onWindowResize), null), this.$onCanvasActionStart &&= (z(e, j, this.$onCanvasActionStart), null), this.$onCanvasActionEnd &&= (z(e, A, this.$onCanvasActionEnd), null), this.$onSelectionChange &&= (z(e, M, this.$onSelectionChange), null)), super.disconnectedCallback();
+	}
+	$change(e, t, n = this.width, r = this.height) {
+		return !P(e) || !P(t) || !P(n) || !P(r) || e === this.x && t === this.y && n === this.width && r === this.height ? this : (this.hidden &&= !1, this.x = e, this.y = t, this.width = n, this.height = r, this.$render());
+	}
+	$reset() {
+		return this.$change(0, 0, 0, 0);
+	}
+	$render() {
+		return this.$setStyles({
+			transform: `translate(${this.x}px, ${this.y}px)`,
+			width: this.width,
+			height: this.height,
+			outlineWidth: i.innerWidth * i.devicePixelRatio
+		});
+	}
+};
+J.$name = m, J.$version = "2.1.1";
+//#endregion
+//#region node_modules/.pnpm/@cropper+element-handle@2.1.1/node_modules/@cropper/element-handle/dist/element-handle.esm.raw.js
+var We = ":host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:\"\";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;top:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}", Y = class extends G {
+	constructor() {
+		super(...arguments), this.$onCanvasCropEnd = null, this.$onCanvasCropStart = null, this.$style = We, this.action = x, this.plain = !1, this.slottable = !1, this.themeColor = "rgba(51, 153, 255, 0.5)";
+	}
+	static get observedAttributes() {
+		return super.observedAttributes.concat(["action", "plain"]);
+	}
+};
+Y.$name = d, Y.$version = "2.1.1";
+//#endregion
+//#region node_modules/.pnpm/@cropper+element-selection@2.1.1/node_modules/@cropper/element-selection/dist/element-selection.esm.raw.js
+var Ge = ":host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:\"\";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}", Ke = /* @__PURE__ */ new WeakMap(), X = class extends G {
+	constructor() {
+		super(...arguments), this.$onCanvasAction = null, this.$onCanvasActionStart = null, this.$onCanvasActionEnd = null, this.$onDocumentKeyDown = null, this.$action = "", this.$actionStartTarget = null, this.$changing = !1, this.$style = Ge, this.$initialSelection = {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		}, this.x = 0, this.y = 0, this.width = 0, this.height = 0, this.aspectRatio = NaN, this.initialAspectRatio = NaN, this.initialCoverage = NaN, this.active = !1, this.linked = !1, this.dynamic = !1, this.movable = !1, this.resizable = !1, this.zoomable = !1, this.multiple = !1, this.keyboard = !1, this.outlined = !1, this.precise = !1;
+	}
+	set $canvas(e) {
+		Ke.set(this, e);
+	}
+	get $canvas() {
+		return Ke.get(this);
+	}
+	static get observedAttributes() {
+		return super.observedAttributes.concat([
+			"active",
+			"aspect-ratio",
+			"dynamic",
+			"height",
+			"initial-aspect-ratio",
+			"initial-coverage",
+			"keyboard",
+			"linked",
+			"movable",
+			"multiple",
+			"outlined",
+			"precise",
+			"resizable",
+			"width",
+			"x",
+			"y",
+			"zoomable"
+		]);
+	}
+	$propertyChangedCallback(e, t, n) {
+		if (!Object.is(n, t)) switch (super.$propertyChangedCallback(e, t, n), e) {
+			case "x":
+			case "y":
+			case "width":
+			case "height":
+				this.$changing || this.$nextTick(() => {
+					this.$change(this.x, this.y, this.width, this.height, this.aspectRatio, !0);
+				});
+				break;
+			case "aspectRatio":
+			case "initialAspectRatio":
+				this.$nextTick(() => {
+					this.$initSelection();
+				});
+				break;
+			case "initialCoverage":
+				this.$nextTick(() => {
+					F(n) && n <= 1 && this.$initSelection(!0, !0);
+				});
+				break;
+			case "keyboard":
+				this.$nextTick(() => {
+					this.$canvas && (n ? this.$onDocumentKeyDown || (this.$onDocumentKeyDown = this.$handleKeyDown.bind(this), B(this.ownerDocument, ce, this.$onDocumentKeyDown)) : this.$onDocumentKeyDown &&= (z(this.ownerDocument, ce, this.$onDocumentKeyDown), null));
+				});
+				break;
+			case "multiple":
+				this.$nextTick(() => {
+					if (this.$canvas) {
+						let e = this.$getSelections();
+						n ? (e.forEach((e) => {
+							e.active = !1;
+						}), this.active = !0, this.$emit(M, {
+							x: this.x,
+							y: this.y,
+							width: this.width,
+							height: this.height
+						})) : (this.active = !1, e.slice(1).forEach((e) => {
+							this.$removeSelection(e);
+						}));
+					}
+				});
+				break;
+			case "precise":
+				this.$nextTick(() => {
+					this.$change(this.x, this.y);
+				});
+				break;
+			case "linked":
+				n && (this.dynamic = !0);
+				break;
+		}
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		let e = this.closest(this.$getTagNameOf(c));
+		e ? (this.$canvas = e, this.$setStyles({
+			position: "absolute",
+			transform: `translate(${this.x}px, ${this.y}px)`
+		}), this.hidden || this.$render(), this.$initSelection(!0), this.$onCanvasActionStart = this.$handleActionStart.bind(this), this.$onCanvasActionEnd = this.$handleActionEnd.bind(this), this.$onCanvasAction = this.$handleAction.bind(this), B(e, j, this.$onCanvasActionStart), B(e, A, this.$onCanvasActionEnd), B(e, k, this.$onCanvasAction)) : this.$render();
+	}
+	disconnectedCallback() {
+		let { $canvas: e } = this;
+		e && (this.$onCanvasActionStart &&= (z(e, j, this.$onCanvasActionStart), null), this.$onCanvasActionEnd &&= (z(e, A, this.$onCanvasActionEnd), null), this.$onCanvasAction &&= (z(e, k, this.$onCanvasAction), null)), super.disconnectedCallback();
+	}
+	$getSelections() {
+		let e = [];
+		return this.parentElement && (e = Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf(p)))), e;
+	}
+	$initSelection(e = !1, t = !1) {
+		let { initialCoverage: n, parentElement: r } = this;
+		if (F(n) && r) {
+			let i = this.aspectRatio || this.initialAspectRatio, a = (t ? 0 : this.width) || r.offsetWidth * n, o = (t ? 0 : this.height) || r.offsetHeight * n;
+			F(i) && ({width: a, height: o} = H({
+				aspectRatio: i,
+				width: a,
+				height: o
+			})), this.$change(this.x, this.y, a, o), e && this.$center(), this.$initialSelection = {
+				x: this.x,
+				y: this.y,
+				width: this.width,
+				height: this.height
+			};
+		}
+	}
+	$createSelection() {
+		let e = this.cloneNode(!0);
+		return this.hasAttribute("id") && e.removeAttribute("id"), e.initialCoverage = NaN, this.active = !1, this.parentElement && this.parentElement.insertBefore(e, this.nextSibling), e;
+	}
+	$removeSelection(e = this) {
+		if (this.parentElement) {
+			let t = this.$getSelections();
+			if (t.length > 1) {
+				let n = t.indexOf(e), r = t[n + 1] || t[n - 1];
+				r && (e.active = !1, this.parentElement.removeChild(e), r.active = !0, r.$emit(M, {
+					x: r.x,
+					y: r.y,
+					width: r.width,
+					height: r.height
+				}));
+			} else this.$clear();
+		}
+	}
+	$handleActionStart(e) {
+		let t = e.detail?.relatedEvent?.target;
+		this.$action = "", this.$actionStartTarget = t, !this.hidden && this.multiple && !this.active && t === this && this.parentElement && (this.$getSelections().forEach((e) => {
+			e.active = !1;
+		}), this.active = !0, this.$emit(M, {
+			x: this.x,
+			y: this.y,
+			width: this.width,
+			height: this.height
+		}));
+	}
+	$handleAction(e) {
+		let { currentTarget: t, detail: n } = e;
+		if (!t || !n) return;
+		let { relatedEvent: r } = n, { action: i } = n, a = r ? we(r) : null;
+		if (!i && this.multiple && (i = this.$action || a?.action, this.$action = i), !i || this.hidden && i !== "select" || this.multiple && !this.active && i !== "scale") return;
+		let { width: o, height: s } = this, c = n.endX - n.startX, l = n.endY - n.startY, { aspectRatio: u } = this;
+		switch (!F(u) && r.shiftKey && (u = F(o) && F(s) ? o / s : 1), i) {
+			case g:
+				if (c !== 0 || l !== 0) {
+					c === 0 ? c = l : l === 0 && (l = c);
+					let { $canvas: e } = this, r = Oe(t);
+					(this.multiple && !this.hidden ? this.$createSelection() : this).$change(n.startX - r.left, n.startY - r.top, Math.abs(c), Math.abs(l), u), c < 0 ? l < 0 ? i = T : l > 0 && (i = D) : c > 0 && (l < 0 ? i = w : l > 0 && (i = E)), e && (e.$action = i);
+				}
+				break;
+			case _:
+				this.movable && (this.dynamic || this.$actionStartTarget && this.contains(this.$actionStartTarget)) && this.$move(c, l);
+				break;
+			case v:
+				if (r && this.zoomable && (this.dynamic || this.contains(r.target))) {
+					let e = Oe(t);
+					this.$zoom(n.scale, r.pageX - e.left, r.pageY - e.top);
+				}
+				break;
+			default: this.$resize(i, c, l, u);
+		}
+	}
+	$handleActionEnd() {
+		this.$action = "", this.$actionStartTarget = null;
+	}
+	$handleKeyDown(e) {
+		if (this.hidden || !this.keyboard || this.multiple && !this.active || e.defaultPrevented) return;
+		let { activeElement: t } = document;
+		if (!(t && (["INPUT", "TEXTAREA"].includes(t.tagName) || ["true", "plaintext-only"].includes(t.contentEditable)))) switch (e.key) {
+			case "Backspace":
+				e.metaKey && (e.preventDefault(), this.$removeSelection());
+				break;
+			case "Delete":
+				e.preventDefault(), this.$removeSelection();
+				break;
+			case "ArrowLeft":
+				e.preventDefault(), this.$move(-1, 0);
+				break;
+			case "ArrowRight":
+				e.preventDefault(), this.$move(1, 0);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), this.$move(0, -1);
+				break;
+			case "ArrowDown":
+				e.preventDefault(), this.$move(0, 1);
+				break;
+			case "+":
+				e.preventDefault(), this.$zoom(.1);
+				break;
+			case "-":
+				e.preventDefault(), this.$zoom(-.1);
+				break;
+		}
+	}
+	$center() {
+		let { parentElement: e } = this;
+		if (!e) return this;
+		let t = (e.offsetWidth - this.width) / 2, n = (e.offsetHeight - this.height) / 2;
+		return this.$change(t, n);
+	}
+	$move(e, t = e) {
+		return this.$moveTo(this.x + e, this.y + t);
+	}
+	$moveTo(e, t = e) {
+		return this.movable ? this.$change(e, t) : this;
+	}
+	$resize(e, t = 0, n = 0, r = this.aspectRatio) {
+		if (!this.resizable) return this;
+		let i = F(r), { $canvas: a } = this, { x: o, y: s, width: c, height: l } = this;
+		switch (e) {
+			case S:
+				s += n, l -= n, l < 0 && (e = ee, l = -l, s -= l), i && (t = n * r, o += t / 2, c -= t, c < 0 && (c = -c, o -= c));
+				break;
+			case C:
+				c += t, c < 0 && (e = te, c = -c, o -= c), i && (n = t / r, s -= n / 2, l += n, l < 0 && (l = -l, s -= l));
+				break;
+			case ee:
+				l += n, l < 0 && (e = S, l = -l, s -= l), i && (t = n * r, o -= t / 2, c += t, c < 0 && (c = -c, o -= c));
+				break;
+			case te:
+				o += t, c -= t, c < 0 && (e = C, c = -c, o -= c), i && (n = t / r, s += n / 2, l -= n, l < 0 && (l = -l, s -= l));
+				break;
+			case w:
+				i && (n = -t / r), s += n, l -= n, c += t, c < 0 && l < 0 ? (e = D, c = -c, l = -l, o -= c, s -= l) : c < 0 ? (e = T, c = -c, o -= c) : l < 0 && (e = E, l = -l, s -= l);
+				break;
+			case T:
+				i && (n = t / r), o += t, s += n, c -= t, l -= n, c < 0 && l < 0 ? (e = E, c = -c, l = -l, o -= c, s -= l) : c < 0 ? (e = w, c = -c, o -= c) : l < 0 && (e = D, l = -l, s -= l);
+				break;
+			case E:
+				i && (n = t / r), c += t, l += n, c < 0 && l < 0 ? (e = T, c = -c, l = -l, o -= c, s -= l) : c < 0 ? (e = D, c = -c, o -= c) : l < 0 && (e = w, l = -l, s -= l);
+				break;
+			case D:
+				i && (n = -t / r), o += t, c -= t, l += n, c < 0 && l < 0 ? (e = w, c = -c, l = -l, o -= c, s -= l) : c < 0 ? (e = E, c = -c, o -= c) : l < 0 && (e = T, l = -l, s -= l);
+				break;
+		}
+		return a && a.$setAction(e), this.$change(o, s, c, l);
+	}
+	$zoom(e, t, n) {
+		if (!this.zoomable || e === 0) return this;
+		e < 0 ? e = 1 / (1 - e) : e += 1;
+		let { width: r, height: i } = this, a = r * e, o = i * e, s = this.x, c = this.y;
+		return P(t) && P(n) ? (s -= (a - r) * ((t - this.x) / r), c -= (o - i) * ((n - this.y) / i)) : (s -= (a - r) / 2, c -= (o - i) / 2), this.$change(s, c, a, o);
+	}
+	$change(e, t, n = this.width, r = this.height, i = this.aspectRatio, a = !1) {
+		return this.$changing || !P(e) || !P(t) || !P(n) || !P(r) || n < 0 || r < 0 || (F(i) && ({width: n, height: r} = H({
+			aspectRatio: i,
+			width: n,
+			height: r
+		}, "cover")), this.precise || (e = Math.round(e), t = Math.round(t), n = Math.round(n), r = Math.round(r)), e === this.x && t === this.y && n === this.width && r === this.height && Object.is(i, this.aspectRatio) && !a) || (this.hidden &&= !1, this.$emit("change", {
+			x: e,
+			y: t,
+			width: n,
+			height: r
+		}) === !1) ? this : (this.$changing = !0, this.x = e, this.y = t, this.width = n, this.height = r, this.$changing = !1, this.$render());
+	}
+	$reset() {
+		let { x: e, y: t, width: n, height: r } = this.$initialSelection;
+		return this.$change(e, t, n, r);
+	}
+	$clear() {
+		return this.$change(0, 0, 0, 0, NaN, !0), this.hidden = !0, this;
+	}
+	$render() {
+		return this.$setStyles({
+			transform: `translate(${this.x}px, ${this.y}px)`,
+			width: this.width,
+			height: this.height
+		});
+	}
+	$toCanvas(e) {
+		return new Promise((t, n) => {
+			if (!this.isConnected) {
+				n(/* @__PURE__ */ Error("The current element is not connected to the DOM."));
+				return;
+			}
+			let r = document.createElement("canvas"), { width: i, height: a } = this, o = 1;
+			if (I(e) && (F(e.width) || F(e.height)) && ({width: i, height: a} = H({
+				aspectRatio: i / a,
+				width: e.width,
+				height: e.height
+			}), o = i / this.width), r.width = i, r.height = a, !this.$canvas) {
+				t(r);
+				return;
+			}
+			let s = this.$canvas.querySelector(this.$getTagNameOf(f));
+			if (!s) {
+				t(r);
+				return;
+			}
+			s.$ready().then((n) => {
+				let c = r.getContext("2d");
+				if (c) {
+					let [t, l, u, d, f, p] = s.$getTransform(), m = -this.x, h = -this.y, g = (m * d - u * h) / (t * d - u * l), _ = (h * t - l * m) / (t * d - u * l), v = t * g + u * _ + f, y = l * g + d * _ + p, b = n.naturalWidth, x = n.naturalHeight;
+					o !== 1 && (v *= o, y *= o, b *= o, x *= o);
+					let S = b / 2, C = x / 2;
+					c.fillStyle = "transparent", c.fillRect(0, 0, i, a), I(e) && L(e.beforeDraw) && e.beforeDraw.call(this, c, r), c.save(), c.translate(S, C), c.transform(t, l, u, d, v, y), c.translate(-S, -C), c.drawImage(n, 0, 0, b, x), c.restore();
+				}
+				t(r);
+			}).catch(n);
+		});
+	}
+};
+X.$name = p, X.$version = "2.1.1";
+//#endregion
+//#region node_modules/.pnpm/@cropper+element-grid@2.1.1/node_modules/@cropper/element-grid/dist/element-grid.esm.raw.js
+var qe = ":host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}", Z = class extends G {
+	constructor() {
+		super(...arguments), this.$style = qe, this.bordered = !1, this.columns = 3, this.covered = !1, this.rows = 3, this.slottable = !1, this.themeColor = "rgba(238, 238, 238, 0.5)";
+	}
+	static get observedAttributes() {
+		return super.observedAttributes.concat([
+			"bordered",
+			"columns",
+			"covered",
+			"rows"
+		]);
+	}
+	$propertyChangedCallback(e, t, n) {
+		Object.is(n, t) || (super.$propertyChangedCallback(e, t, n), (e === "rows" || e === "columns") && this.$nextTick(() => {
+			this.$render();
+		}));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.$render();
+	}
+	$render() {
+		let e = this.$getShadowRoot(), t = document.createDocumentFragment();
+		for (let e = 0; e < this.rows; e += 1) {
+			let e = document.createElement("span");
+			e.setAttribute("role", "row");
+			for (let t = 0; t < this.columns; t += 1) {
+				let t = document.createElement("span");
+				t.setAttribute("role", "gridcell"), e.appendChild(t);
+			}
+			t.appendChild(e);
+		}
+		e && (e.innerHTML = "", e.appendChild(t));
+	}
+};
+Z.$name = u, Z.$version = "2.1.1";
+//#endregion
+//#region node_modules/.pnpm/@cropper+element-crosshair@2.1.1/node_modules/@cropper/element-crosshair/dist/element-crosshair.esm.raw.js
+var Je = ":host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:\"\";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}", Q = class extends G {
+	constructor() {
+		super(...arguments), this.$style = Je, this.centered = !1, this.slottable = !1, this.themeColor = "rgba(238, 238, 238, 0.5)";
+	}
+	static get observedAttributes() {
+		return super.observedAttributes.concat(["centered"]);
+	}
+};
+Q.$name = l, Q.$version = "2.1.1";
+//#endregion
+//#region node_modules/.pnpm/@cropper+element-viewer@2.1.1/node_modules/@cropper/element-viewer/dist/element-viewer.esm.raw.js
+var Ye = ":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}", Xe = /* @__PURE__ */ new WeakMap(), Ze = /* @__PURE__ */ new WeakMap(), Qe = /* @__PURE__ */ new WeakMap(), $e = /* @__PURE__ */ new WeakMap(), et = "both", tt = "horizontal", nt = "vertical", rt = "none", $ = class extends G {
+	constructor() {
+		super(...arguments), this.$onSelectionChange = null, this.$onSourceImageLoad = null, this.$onSourceImageTransform = null, this.$scale = 1, this.$style = Ye, this.resize = nt, this.selection = "", this.slottable = !1;
+	}
+	set $image(e) {
+		Ze.set(this, e);
+	}
+	get $image() {
+		return Ze.get(this);
+	}
+	set $sourceImage(e) {
+		$e.set(this, e);
+	}
+	get $sourceImage() {
+		return $e.get(this);
+	}
+	set $canvas(e) {
+		Xe.set(this, e);
+	}
+	get $canvas() {
+		return Xe.get(this);
+	}
+	set $selection(e) {
+		Qe.set(this, e);
+	}
+	get $selection() {
+		return Qe.get(this);
+	}
+	static get observedAttributes() {
+		return super.observedAttributes.concat(["resize", "selection"]);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		let e = null;
+		if (e = this.selection ? De(this)?.querySelector(this.selection) ?? null : this.closest(this.$getTagNameOf(p)), R(e)) {
+			this.$selection = e, this.$onSelectionChange = this.$handleSelectionChange.bind(this), B(e, M, this.$onSelectionChange);
+			let t = e.closest(this.$getTagNameOf(c));
+			if (t) {
+				this.$canvas = t;
+				let e = t.querySelector(this.$getTagNameOf(f));
+				e && (this.$sourceImage = e, this.$image = e.cloneNode(!0), this.$getShadowRoot().appendChild(this.$image), this.$onSourceImageLoad = this.$handleSourceImageLoad.bind(this), this.$onSourceImageTransform = this.$handleSourceImageTransform.bind(this), B(e.$image, O, this.$onSourceImageLoad), B(e, de, this.$onSourceImageTransform));
+			}
+			this.$render();
+		}
+	}
+	disconnectedCallback() {
+		let { $selection: e, $sourceImage: t } = this;
+		e && this.$onSelectionChange && (z(e, M, this.$onSelectionChange), this.$onSelectionChange = null), t && this.$onSourceImageLoad && (z(t.$image, O, this.$onSourceImageLoad), this.$onSourceImageLoad = null), t && this.$onSourceImageTransform && (z(t, de, this.$onSourceImageTransform), this.$onSourceImageTransform = null), super.disconnectedCallback();
+	}
+	$handleSelectionChange(e) {
+		this.$render(e.defaultPrevented ? this.$selection : e.detail);
+	}
+	$handleSourceImageLoad() {
+		let { $image: e, $sourceImage: t } = this, n = e.getAttribute("src"), r = t.getAttribute("src");
+		r && r !== n && (e.setAttribute("src", r), e.$ready(() => {
+			this.$render();
+		}));
+	}
+	$handleSourceImageTransform(e) {
+		this.$render(void 0, e.detail.matrix);
+	}
+	$render(e, t) {
+		let { $canvas: n, $selection: r } = this;
+		!e && !r.hidden && (e = r), (!e || e.x === 0 && e.y === 0 && e.width === 0 && e.height === 0) && (e = {
+			x: 0,
+			y: 0,
+			width: n.offsetWidth,
+			height: n.offsetHeight
+		});
+		let { x: i, y: a, width: o, height: s } = e, c = {}, { clientWidth: l, clientHeight: u } = this, d = l, f = u, p = NaN;
+		switch (this.resize) {
+			case et:
+				p = 1, d = o, f = s, c.width = o, c.height = s;
+				break;
+			case tt:
+				p = s > 0 ? u / s : 0, d = o * p, c.width = d;
+				break;
+			case nt:
+				p = o > 0 ? l / o : 0, f = s * p, c.height = f;
+				break;
+			case rt:
+			default: l > 0 ? p = o > 0 ? l / o : 0 : u > 0 && (p = s > 0 ? u / s : 0);
+		}
+		this.$scale = p, this.$setStyles(c), this.$sourceImage && setTimeout(() => {
+			this.$transformImageByOffset(t ?? this.$sourceImage.$getTransform(), -i, -a);
+		});
+	}
+	$transformImageByOffset(e, t, n) {
+		let { $image: r, $scale: i, $sourceImage: a } = this;
+		if (a && r && i >= 0) {
+			let [o, s, c, l, u, d] = e, f = (t * l - c * n) / (o * l - c * s), p = (n * o - s * t) / (o * l - c * s), m = o * f + c * p + u, h = s * f + l * p + d;
+			a.$ready((e) => {
+				this.$setStyles.call(r, {
+					width: e.naturalWidth * i,
+					height: e.naturalHeight * i
+				});
+			}), r.$setTransform(o, s, c, l, m * i, h * i);
+		}
+	}
+};
+$.$name = h, $.$version = "2.1.1";
+//#endregion
+//#region node_modules/.pnpm/cropperjs@2.1.1/node_modules/cropperjs/dist/cropper.esm.raw.js
+var it = "<cropper-canvas background><cropper-image rotatable scalable skewable translatable></cropper-image><cropper-shade hidden></cropper-shade><cropper-handle action=\"select\" plain></cropper-handle><cropper-selection initial-coverage=\"0.5\" movable resizable><cropper-grid role=\"grid\" bordered covered></cropper-grid><cropper-crosshair centered></cropper-crosshair><cropper-handle action=\"move\" theme-color=\"rgba(255, 255, 255, 0.35)\"></cropper-handle><cropper-handle action=\"n-resize\"></cropper-handle><cropper-handle action=\"e-resize\"></cropper-handle><cropper-handle action=\"s-resize\"></cropper-handle><cropper-handle action=\"w-resize\"></cropper-handle><cropper-handle action=\"ne-resize\"></cropper-handle><cropper-handle action=\"nw-resize\"></cropper-handle><cropper-handle action=\"se-resize\"></cropper-handle><cropper-handle action=\"sw-resize\"></cropper-handle></cropper-selection></cropper-canvas>", at = /^img|canvas$/, ot = /<(\/?(?:script|style)[^>]*)>/gi, st = { template: it };
+K.$define(), Q.$define(), Z.$define(), Y.$define(), q.$define(), X.$define(), J.$define(), $.$define();
+var ct = class {
+	constructor(e, t) {
+		if (this.options = st, N(e) && (e = document.querySelector(e)), !R(e) || !at.test(e.localName)) throw Error("The first argument is required and must be an <img> or <canvas> element.");
+		this.element = e, t = Object.assign(Object.assign({}, st), t), this.options = t;
+		let { container: n } = t;
+		if (n && (N(n) && (n = De(e)?.querySelector(n)), !R(n))) throw Error("The `container` option must be an element or a valid selector.");
+		R(n) || (n = e.parentElement ? e.parentElement : e.ownerDocument.body), this.container = n;
+		let r = e.localName, i = "";
+		r === "img" ? {src: i} = e : r === "canvas" && window.HTMLCanvasElement && (i = e.toDataURL());
+		let { template: a } = t;
+		if (a && N(a)) {
+			let t = document.createElement("template"), o = document.createDocumentFragment();
+			t.innerHTML = a.replace(ot, "&lt;$1&gt;"), o.appendChild(t.content), Array.from(o.querySelectorAll(f)).forEach((t) => {
+				t.setAttribute("src", i), t.setAttribute("alt", e.alt || "The image to crop"), r === "img" && [
+					"crossorigin",
+					"decoding",
+					"elementtiming",
+					"fetchpriority",
+					"loading",
+					"referrerpolicy",
+					"sizes",
+					"srcset"
+				].forEach((n) => {
+					e.hasAttribute(n) && t.setAttribute(n, e.getAttribute(n) || "");
+				});
+			}), e.parentElement ? (e.style.display = "none", n.insertBefore(o, e.nextSibling)) : n.appendChild(o);
+		}
+	}
+	getCropperCanvas() {
+		return this.container.querySelector(c);
+	}
+	getCropperImage() {
+		return this.container.querySelector(f);
+	}
+	getCropperSelection() {
+		return this.container.querySelector(p);
+	}
+	getCropperSelections() {
+		return this.container.querySelectorAll(p);
+	}
+	destroy() {
+		var e;
+		let t = this.getCropperCanvas();
+		t && ((e = t.parentElement) == null || e.removeChild(t)), this.element && (this.element.style.display = "");
+	}
+};
+ct.version = "2.1.1";
+//#endregion
+//#region src/components/CropperCanvas.vue
+var lt = e({
+	name: "CropperCanvas",
+	props: { background: {
+		type: Boolean,
+		default: !1
+	} },
+	setup(e, { slots: n }) {
+		return K.$define(), () => t("cropper-canvas", {
+			...e,
+			style: "height: 500px"
+		}, n.default?.());
+	}
+}), ut = e({
+	name: "CropperImage",
+	props: {
+		src: {
+			type: String,
+			required: !0
+		},
+		alt: {
+			type: String,
+			default: ""
+		},
+		initialCenterSize: {
+			type: String,
+			default: "contain"
+		},
+		rotatable: {
+			type: Boolean,
+			default: !1
+		},
+		scalable: {
+			type: Boolean,
+			default: !1
+		},
+		skewable: {
+			type: Boolean,
+			default: !1
+		},
+		slottable: {
+			type: Boolean,
+			default: !1
+		},
+		translatable: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e, { slots: n }) {
+		return q.$define(), () => t("cropper-image", e, n.default?.());
+	}
+}), dt = e({
+	name: "CropperShade",
+	props: {
+		x: {
+			type: Number,
+			default: 0
+		},
+		y: {
+			type: Number,
+			default: 0
+		},
+		width: {
+			type: Number,
+			default: 0
+		},
+		height: {
+			type: Number,
+			default: 0
+		},
+		slottable: {
+			type: Boolean,
+			default: !1
+		},
+		themeColor: {
+			type: String,
+			default: "rgba(0, 0, 0, 0.65)"
+		},
+		hidden: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e, { slots: n }) {
+		return J.$define(), () => t("cropper-shade", e, n.default?.());
+	}
+}), ft = e({
+	name: "CropperHandle",
+	props: {
+		action: {
+			type: String,
+			default: "none"
+		},
+		plain: {
+			type: Boolean,
+			default: !1
+		},
+		slottable: {
+			type: Boolean,
+			default: !1
+		},
+		themeColor: {
+			type: String,
+			default: "rgba(51, 153, 255, 0.5)"
+		}
+	},
+	setup(e, { slots: n }) {
+		return Y.$define(), () => t("cropper-handle", e, n.default?.());
+	}
+}), pt = e({
+	name: "CropperSelection",
+	props: {
+		x: {
+			type: Number,
+			default: 0
+		},
+		y: {
+			type: Number,
+			default: 0
+		},
+		width: {
+			type: Number,
+			default: 0
+		},
+		height: {
+			type: Number,
+			default: 0
+		},
+		aspectRatio: { type: Number },
+		initialAspectRatio: { type: Number },
+		initialCoverage: { type: Number },
+		dynamic: {
+			type: Boolean,
+			default: !1
+		},
+		movable: {
+			type: Boolean,
+			default: !1
+		},
+		resizable: {
+			type: Boolean,
+			default: !1
+		},
+		zoomable: {
+			type: Boolean,
+			default: !1
+		},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		keyboard: {
+			type: Boolean,
+			default: !1
+		},
+		outlined: {
+			type: Boolean,
+			default: !1
+		},
+		precise: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e, { slots: r, expose: i }) {
+		return X.$define(), i({ selection: n("sel") }), () => t("cropper-selection", {
+			ref: "sel",
+			...e
+		}, r.default?.());
+	}
+}), mt = e({
+	name: "CropperCrosshair",
+	props: { centered: {
+		type: Boolean,
+		default: !1
+	} },
+	setup(e, { slots: n }) {
+		return Q.$define(), () => t("cropper-crosshair", e, n.default?.());
+	}
+}), ht = e({
+	name: "CropperGrid",
+	props: {
+		role: {
+			type: String,
+			default: "grid"
+		},
+		covered: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e, { slots: n }) {
+		return Z.$define(), () => t("cropper-grid", e, n.default?.());
+	}
+}), gt = e({
+	name: "CropperViewer",
+	props: {
+		resize: {
+			type: String,
+			default: "vertical"
+		},
+		selection: {
+			type: String,
+			default: ""
+		}
+	},
+	setup(e, { slots: n }) {
+		return $.$define(), () => t("cropper-viewer", e, n.default?.());
+	}
+}), _t = { install: (e) => {
+	e.component("CropperCanvas", lt), e.component("CropperImage", ut), e.component("CropperShade", dt), e.component("CropperHandle", ft), e.component("CropperSelection", pt), e.component("CropperCrosshair", mt), e.component("CropperGrid", ht), e.component("CropperViewer", gt);
+} };
+//#endregion
+export { lt as CropperCanvas, mt as CropperCrosshair, ht as CropperGrid, ft as CropperHandle, ut as CropperImage, pt as CropperSelection, dt as CropperShade, gt as CropperViewer, _t as default };