pixedi 1.2.0 → 1.2.1

package/dist/lib/index.js

@@ -106,7 +106,7 @@ var c = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			return Error("react-stack-top-frame");
 		}
 		function s(e) {
-			if (re.call(e, "key")) {
+			if (O.call(e, "key")) {
 				var t = Object.getOwnPropertyDescriptor(e, "key").get;
 				if (t && t.isReactWarning) return !1;
 			}
@@ -114,7 +114,7 @@ var c = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		}
 		function c(e, t) {
 			function n() {
-				ae || (ae = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
+				ie || (ie = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
 			}
 			n.isReactWarning = !0, Object.defineProperty(e, "key", {
 				get: n,
@@ -123,7 +123,7 @@ var c = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		}
 		function u() {
 			var e = t(this.type);
-			return oe[e] || (oe[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
+			return ae[e] || (ae[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
 		}
 		function d(e, t, n, r, i, a) {
 			var o = n.ref;
@@ -163,17 +163,17 @@ var c = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		}
 		function f(e, n, i, o, l, u) {
 			var f = n.children;
-			if (f !== void 0) if (o) if (ie(f)) {
+			if (f !== void 0) if (o) if (re(f)) {
 				for (o = 0; o < f.length; o++) p(f[o]);
 				Object.freeze && Object.freeze(f);
 			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
 			else p(f);
-			if (re.call(n, "key")) {
+			if (O.call(n, "key")) {
 				f = t(e);
 				var m = Object.keys(n).filter(function(e) {
 					return e !== "key";
 				});
-				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", k[f + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, f, m, f), k[f + o] = !0);
+				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", ce[f + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, f, m, f), ce[f + o] = !0);
 			}
 			if (f = null, i !== void 0 && (r(i), f = "" + i), s(n) && (r(n.key), f = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
 			else i = n;
@@ -185,19 +185,19 @@ var c = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		function m(e) {
 			return typeof e == "object" && !!e && e.$$typeof === g;
 		}
-		var h = l("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), ee = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), te = Symbol.for("react.activity"), ne = Symbol.for("react.client.reference"), D = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, re = Object.prototype.hasOwnProperty, ie = Array.isArray, O = console.createTask ? console.createTask : function() {
+		var h = l("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), ee = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), te = Symbol.for("react.activity"), ne = Symbol.for("react.client.reference"), D = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, re = Array.isArray, k = console.createTask ? console.createTask : function() {
 			return null;
 		};
 		h = { react_stack_bottom_frame: function(e) {
 			return e();
 		} };
-		var ae, oe = {}, se = h.react_stack_bottom_frame.bind(h, o)(), ce = O(i(o)), k = {};
+		var ie, ae = {}, oe = h.react_stack_bottom_frame.bind(h, o)(), se = k(i(o)), ce = {};
 		e.Fragment = v, e.jsx = function(e, t, n) {
 			var r = 1e4 > D.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : se, r ? O(i(e)) : ce);
+			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : oe, r ? k(i(e)) : se);
 		}, e.jsxs = function(e, t, n) {
 			var r = 1e4 > D.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : se, r ? O(i(e)) : ce);
+			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : oe, r ? k(i(e)) : se);
 		};
 	})();
 })), h = (/* @__PURE__ */ c(((e, t) => {
@@ -391,19 +391,19 @@ var T = {
 	...T,
 	...e,
 	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "m12 19-7-7 7-7" }), /* @__PURE__ */ (0, h.jsx)("path", { d: "M19 12H5" })]
-}), re = (e) => /* @__PURE__ */ (0, h.jsx)("svg", {
+}), O = (e) => /* @__PURE__ */ (0, h.jsx)("svg", {
 	...T,
 	...e,
 	children: /* @__PURE__ */ (0, h.jsx)("path", { d: "m6 9 6 6 6-6" })
-}), ie = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
+}), re = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
 	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "M3 7v6h6" }), /* @__PURE__ */ (0, h.jsx)("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })]
-}), O = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
+}), k = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
 	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "M21 7v6h-6" }), /* @__PURE__ */ (0, h.jsx)("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" })]
-}), ae = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
+}), ie = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
 	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }), /* @__PURE__ */ (0, h.jsx)("circle", {
@@ -411,11 +411,11 @@ var T = {
 		cy: "12",
 		r: "3"
 	})]
-}), oe = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
+}), ae = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
 	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "M6 2v14a2 2 0 0 0 2 2h14" }), /* @__PURE__ */ (0, h.jsx)("path", { d: "M18 22V8a2 2 0 0 0-2-2H2" })]
-}), se = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
+}), oe = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
 	children: [
@@ -434,7 +434,7 @@ var T = {
 		}),
 		/* @__PURE__ */ (0, h.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
 	]
-}), ce = (e) => /* @__PURE__ */ (0, h.jsx)("svg", {
+}), se = (e) => /* @__PURE__ */ (0, h.jsx)("svg", {
 	...T,
 	...e,
 	children: /* @__PURE__ */ (0, h.jsx)("rect", {
@@ -444,7 +444,7 @@ var T = {
 		y: "3",
 		rx: "2"
 	})
-}), k = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
+}), ce = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
 	children: [
@@ -490,7 +490,7 @@ var T = {
 	...T,
 	...e,
 	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), /* @__PURE__ */ (0, h.jsx)("path", { d: "M3 3v5h5" })]
-}), A = (e) => /* @__PURE__ */ (0, h.jsx)("svg", {
+}), pe = (e) => /* @__PURE__ */ (0, h.jsx)("svg", {
 	...T,
 	...e,
 	children: /* @__PURE__ */ (0, h.jsx)("path", {
@@ -505,22 +505,22 @@ var T = {
 			repeatCount: "indefinite"
 		})
 	})
-}), j = () => {
+}), A = () => {
 	let e = n(f);
 	if (!e) throw Error("usePixediContext must be used within an PixediProvider");
 	return e;
-}, M = {
+}, j = {
 	button: "_button_snd36_1",
 	default: "_default_snd36_32",
 	outline: "_outline_snd36_39",
 	ghost: "_ghost_snd36_47",
 	rect: "_rect_snd36_54"
-}, N = ({ className: e = "", variant: t = "default", children: n, ref: r, ...i }) => /* @__PURE__ */ (0, h.jsx)("button", {
+}, M = ({ className: e = "", variant: t = "default", children: n, ref: r, ...i }) => /* @__PURE__ */ (0, h.jsx)("button", {
 	ref: r,
-	className: `${M.button} ${M[t]} ${e}`.trim(),
+	className: `${j.button} ${j[t]} ${e}`.trim(),
 	...i,
 	children: n
-}), P = {
+}), N = {
 	root: "_root_kw2xl_8",
 	textRed: "_textRed_kw2xl_73",
 	bgRed: "_bgRed_kw2xl_76",
@@ -533,14 +533,14 @@ var T = {
 	wrapper: "_wrapper_kw2xl_105",
 	main: "_main_kw2xl_111",
 	grid: "_grid_kw2xl_119"
-}, pe = { button: "_button_gf7m5_1" }, me = ({ className: e = "", active: t = !1, icon: n, label: r, ref: i, ...a }) => /* @__PURE__ */ (0, h.jsxs)("button", {
+}, me = { button: "_button_gf7m5_1" }, P = ({ className: e = "", active: t = !1, icon: n, label: r, ref: i, ...a }) => /* @__PURE__ */ (0, h.jsxs)("button", {
 	ref: i,
 	type: "button",
 	"aria-pressed": t,
-	className: `${pe.button} ${e}`.trim(),
+	className: `${me.button} ${e}`.trim(),
 	...a,
 	children: [n, /* @__PURE__ */ (0, h.jsx)("span", {
-		className: P.semibold,
+		className: N.semibold,
 		children: r
 	})]
 }), he = { separator: "_separator_rqskq_1" }, F = t(({ className: e = "", orientation: t = "horizontal", ...n }, r) => /* @__PURE__ */ (0, h.jsx)("hr", {
@@ -579,7 +579,7 @@ var I = {
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []), i(() => {
 		if (!d || !m.current || !g.current) return;
-		let e = p.current?.closest(`.${P.main}`)?.getBoundingClientRect(), t = m.current.getBoundingClientRect(), n = g.current.getBoundingClientRect(), r = (e?.bottom ?? window.innerHeight) - 16, i = t.bottom + n.height + 4, a = "calc(100% + 4px)";
+		let e = p.current?.closest(`.${N.main}`)?.getBoundingClientRect(), t = m.current.getBoundingClientRect(), n = g.current.getBoundingClientRect(), r = (e?.bottom ?? window.innerHeight) - 16, i = t.bottom + n.height + 4, a = "calc(100% + 4px)";
 		i > r && (a = `calc(100% + 4px - ${i - r}px)`), g.current.style.top = a;
 	}, [d, e]);
 	let v = (e) => {
@@ -594,12 +594,12 @@ var I = {
 			type: "button",
 			className: I.trigger,
 			onClick: () => f(!d),
-			children: [/* @__PURE__ */ (0, h.jsx)("span", { children: _ ? _.fullName : c }), /* @__PURE__ */ (0, h.jsx)(re, { className: I.triggerArrow })]
+			children: [/* @__PURE__ */ (0, h.jsx)("span", { children: _ ? _.fullName : c }), /* @__PURE__ */ (0, h.jsx)(O, { className: I.triggerArrow })]
 		}), /* @__PURE__ */ (0, h.jsx)("div", {
 			ref: g,
 			className: I.content,
 			children: e.map((e, n) => e.options ? /* @__PURE__ */ (0, h.jsxs)("div", { children: [/* @__PURE__ */ (0, h.jsx)("div", {
-				className: `${I.groupLabel} ${P.semibold}`,
+				className: `${I.groupLabel} ${N.semibold}`,
 				children: e.label
 			}), e.options.map((e) => /* @__PURE__ */ (0, h.jsxs)("div", {
 				className: I.item,
@@ -664,13 +664,13 @@ var I = {
 	close: "_close_qpue1_13"
 }, L = ({ onSave: e, onClose: t, saving: n = !1, disabled: r = !1 }) => /* @__PURE__ */ (0, h.jsxs)("div", {
 	className: xe.group,
-	children: [/* @__PURE__ */ (0, h.jsx)(N, {
+	children: [/* @__PURE__ */ (0, h.jsx)(M, {
 		variant: "outline",
 		className: xe.save,
 		disabled: r || n,
 		onClick: e,
-		children: n ? /* @__PURE__ */ (0, h.jsx)(A, {}) : /* @__PURE__ */ (0, h.jsx)(E, {})
-	}), /* @__PURE__ */ (0, h.jsx)(N, {
+		children: n ? /* @__PURE__ */ (0, h.jsx)(pe, {}) : /* @__PURE__ */ (0, h.jsx)(E, {})
+	}), /* @__PURE__ */ (0, h.jsx)(M, {
 		variant: "outline",
 		className: xe.close,
 		disabled: n,
@@ -905,12 +905,20 @@ var I = {
 		w: f,
 		h: p
 	};
-}, Ae = (e, t, n, r, i, a, o, s, c, l, u) => e === "tl" ? Ee(t, n, r, i, a, o, s, c, l, u) : e === "tr" ? De(t, n, r, i, a, o, s, c, l, u) : e === "bl" ? Oe(t, n, r, i, a, o, s, c, l, u) : e === "br" ? ke(t, n, r, i, a, o, s, c, l, u) : {
+}, Ae = (e, t, n, r, i, a, o, s, c) => {
+	let l = e === "tl" || e === "bl", u = e === "tl" || e === "tr", d = c.x + c.w, f = c.y + c.h, p = i - n, m = a - r, h = t >= 1 ? c.w + (l ? -p : p) : (c.h + (u ? -m : m)) * t, g = l ? d : o - c.x, _ = u ? f : s - c.y, v = Math.min(g, _ * t), y = Math.max(z, z * t), b = Math.min(Math.max(h, y), v), x = b / t;
+	return {
+		x: l ? d - b : c.x,
+		y: u ? f - x : c.y,
+		w: b,
+		h: x
+	};
+}, je = (e, t, n, r, i, a, o, s, c, l, u) => t ? e === "tl" ? Ee(t, n, r, i, a, o, s, c, l, u) : e === "tr" ? De(t, n, r, i, a, o, s, c, l, u) : e === "bl" ? Oe(t, n, r, i, a, o, s, c, l, u) : e === "br" ? ke(t, n, r, i, a, o, s, c, l, u) : {
 	x: 0,
 	y: 0,
 	w: 0,
 	h: 0
-}, je = (e, t, n) => {
+} : Ae(e, n, r, i, a, o, s, c, l), Me = (e, t, n) => {
 	let r = .12, i = t / n, a = 0, o = 0;
 	e === 1 && (a = (i > 1 ? n : t) * (1 - r * 2), o = a), e > 1 && (i > e ? (o = n * (1 - r * 2), a = o * e) : (a = t * (1 - r * 2), o = a / e)), e < 1 && (i > e ? (o = n * (1 - r * 2), a = o * e) : (a = t * (1 - r * 2), o = a / e));
 	let s = a / t * 100, c = o / n * 100;
@@ -920,7 +928,7 @@ var I = {
 		w: s,
 		h: c
 	};
-}, Me = (e, t, n, r) => {
+}, Ne = (e, t, n, r) => {
 	let i = e.w / 100 * n, a = e.h / 100 * r;
 	t >= 1 ? a = i / t : i = a * t;
 	let o = i / n * 100, s = a / r * 100, c = Math.max(o / (100 - e.x), s / (100 - e.y), 1);
@@ -929,13 +937,13 @@ var I = {
 		w: o,
 		h: s
 	};
-}, B = (e) => Math.abs(Math.round(e / 90)) % 2 == 1, Ne = (e, t, n, r) => B(n) === B(r) ? {
+}, B = (e) => Math.abs(Math.round(e / 90)) % 2 == 1, Pe = (e, t, n, r) => B(n) === B(r) ? {
 	width: e,
 	height: t
 } : {
 	width: t,
 	height: e
-}, Pe = async (e) => {
+}, Fe = async (e) => {
 	let { width: t, height: n } = e, r = Math.min(1, Ce / Math.max(t, n)), i = Math.round(t * r), a = Math.round(n * r), o = new OffscreenCanvas(i, a), s = o.getContext("2d");
 	if (!s) throw Error("Failed to get 2D context for preview canvas");
 	return s.drawImage(e, 0, 0, i, a), o.convertToBlob({
@@ -943,7 +951,7 @@ var I = {
 		quality: we
 	});
 };
-function Fe(e) {
+function Ie(e) {
 	let t = new OffscreenCanvas(e.width, e.height), n = t.getContext("2d");
 	if (!n) throw Error("Failed to create 2D context for canvas.");
 	n.drawImage(e, 0, 0);
@@ -957,14 +965,14 @@ function Fe(e) {
 }
 //#endregion
 //#region src/shared/components/Pixedi/utils/imageProcessor.ts
-var Ie = (e) => new Promise((t, n) => {
+var Le = (e) => new Promise((t, n) => {
 	let r = new FileReader();
 	r.onloadend = () => {
 		let e = r.result;
 		typeof e == "string" ? t(e) : n(/* @__PURE__ */ Error("Failed to read blob as base64"));
 	}, r.onerror = () => n(r.error ?? /* @__PURE__ */ Error("FileReader error")), r.readAsDataURL(e);
 });
-async function Le(e) {
+async function Re(e) {
 	let t = await createImageBitmap(e), n = e.type || "image/png", r = n === "image/gif" ? "image/png" : n, i = document.createElement("canvas"), a = i.getContext("2d", { alpha: !0 });
 	i.width = t.width, i.height = t.height, a?.drawImage(t, 0, 0), t.close();
 	let o = () => {
@@ -999,7 +1007,7 @@ async function Le(e) {
 				}, a, t) : i.toBlob((t) => {
 					t ? e(t) : o(/* @__PURE__ */ Error("Failed to encode image as image/png"));
 				}, "image/png");
-			}), s = await createImageBitmap(o), c = await Pe(s), { width: l, height: u } = s, d = Fe(s);
+			}), s = await createImageBitmap(o), c = await Fe(s), { width: l, height: u } = s, d = Ie(s);
 			return s.close(), {
 				newBlob: o,
 				previewBlob: c,
@@ -1013,17 +1021,17 @@ async function Le(e) {
 }
 //#endregion
 //#region src/shared/components/Pixedi/utils/preview.ts
-var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0][0] + e[0][1] * t[1][0], e[0][0] * t[0][1] + e[0][1] * t[1][1]], [e[1][0] * t[0][0] + e[1][1] * t[1][0], e[1][0] * t[0][1] + e[1][1] * t[1][1]]], ze = (e) => (Math.round(e / 90) % 4 + 4) % 4 * 90, Be = (e) => {
-	switch (ze(e)) {
+var V = (e, t, n) => Math.max(t, Math.min(n, e)), ze = (e, t) => [[e[0][0] * t[0][0] + e[0][1] * t[1][0], e[0][0] * t[0][1] + e[0][1] * t[1][1]], [e[1][0] * t[0][0] + e[1][1] * t[1][0], e[1][0] * t[0][1] + e[1][1] * t[1][1]]], Be = (e) => (Math.round(e / 90) % 4 + 4) % 4 * 90, Ve = (e) => {
+	switch (Be(e)) {
 		case 90: return [[0, -1], [1, 0]];
 		case 180: return [[-1, 0], [0, -1]];
 		case 270: return [[0, 1], [-1, 0]];
 		default: return [[1, 0], [0, 1]];
 	}
-}, Ve = (e, t) => [[e ? -1 : 1, 0], [0, t ? -1 : 1]], He = (e, t, n) => Re(Ve(t, n), Be(-e)), Ue = (e) => [+(e[0][0] < 0 || e[0][1] < 0), +(e[1][0] < 0 || e[1][1] < 0)], H = (e, t, n) => {
-	let r = Ue(e);
+}, He = (e, t) => [[e ? -1 : 1, 0], [0, t ? -1 : 1]], Ue = (e, t, n) => ze(He(t, n), Ve(-e)), We = (e) => [+(e[0][0] < 0 || e[0][1] < 0), +(e[1][0] < 0 || e[1][1] < 0)], H = (e, t, n) => {
+	let r = We(e);
 	return [e[0][0] * t + e[0][1] * n + r[0], e[1][0] * t + e[1][1] * n + r[1]];
-}, We = (e) => {
+}, Ge = (e) => {
 	let t = 1, n = 1, r = {
 		x: 0,
 		y: 0,
@@ -1039,7 +1047,7 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 			h: 1
 		}, i = 0, a = !1, o = !1;
 		else if (c.action.name === "crop") {
-			let e = (c.action.args.x ?? 0) / 100, t = (c.action.args.y ?? 0) / 100, n = (c.action.args.w ?? 100) / 100, s = (c.action.args.h ?? 100) / 100, l = He(i, a, o), u = [
+			let e = (c.action.args.x ?? 0) / 100, t = (c.action.args.y ?? 0) / 100, n = (c.action.args.w ?? 100) / 100, s = (c.action.args.h ?? 100) / 100, l = Ue(i, a, o), u = [
 				H(l, e, t),
 				H(l, e + n, t),
 				H(l, e, t + s),
@@ -1071,13 +1079,13 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 		flipH: a,
 		flipV: o
 	};
-}, Ge = (e) => {
-	let { box: t, flipH: n, flipV: r, rotation: i, newWidth: a, newHeight: o, initWidth: s, initHeight: c, viewWidth: l, viewHeight: u } = We(e), d = V(t.x, 0, 1), f = V(t.y, 0, 1), p = {
+}, Ke = (e) => {
+	let { box: t, flipH: n, flipV: r, rotation: i, newWidth: a, newHeight: o, initWidth: s, initHeight: c, viewWidth: l, viewHeight: u } = Ge(e), d = V(t.x, 0, 1), f = V(t.y, 0, 1), p = {
 		x: d,
 		y: f,
 		w: V(t.w, 0, 1 - d),
 		h: V(t.h, 0, 1 - f)
-	}, m = ze(i);
+	}, m = Be(i);
 	return {
 		...p.x === 0 && p.y === 0 && p.w === 1 && p.h === 1 ? {} : { crop: {
 			x: Math.round(s * t.x),
@@ -1095,18 +1103,18 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 			height: o
 		} } : {}
 	};
-}, Ke = (e) => {
-	let [t, n] = s(!1), { setImage: r, settings: i, history: a, originalBlob: o, setCurrentAction: c, resetHistory: l } = j();
+}, qe = (e) => {
+	let [t, n] = s(!1), { setImage: r, settings: i, history: a, originalBlob: o, setCurrentAction: c, resetHistory: l } = A();
 	return {
 		save: async () => {
 			if (!o) return;
 			n(!0);
-			let t = Ge(a.items.slice(0, a.pointer + 1));
+			let t = Ke(a.items.slice(0, a.pointer + 1));
 			try {
-				let n = await Le(o);
+				let n = await Re(o);
 				t.crop && n.crop(t.crop.x, t.crop.y, t.crop.w, t.crop.h), t.flip && n.flip(t.flip.horizontal, t.flip.vertical), t.rotate && n.rotate(t.rotate.degrees), t.resize && n.resize(t.resize.width, t.resize.height);
 				let { newBlob: a, previewBlob: s, mimeType: c, width: l, height: u, isAlpha: d } = await n.get(i), f = "";
-				i.exportAs === "base64" && (f = await Ie(a)), await e(f || a), r({
+				i.exportAs === "base64" && (f = await Le(a)), await e(f || a), r({
 					newBlob: a,
 					previewBlob: s,
 					mimeType: c,
@@ -1130,13 +1138,13 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 	tools: "_tools_msw8l_11",
 	history: "_history_msw8l_15",
 	historyText: "_historyText_msw8l_20"
-}, qe = ({ onBack: e, onSave: t }) => {
-	let { save: n, reset: r, isSaving: i } = Ke(t), { history: a, undo: o, redo: s } = j(), c = a.items.length > 1 && !i, l = a.pointer === 0, u = a.pointer === a.items.length - 1, d = a.items.length < 2 || i, f = d || a.pointer === 0;
+}, Je = ({ onBack: e, onSave: t }) => {
+	let { save: n, reset: r, isSaving: i } = qe(t), { history: a, undo: o, redo: s } = A(), c = a.items.length > 1 && !i, l = a.pointer === 0, u = a.pointer === a.items.length - 1, d = a.items.length < 2 || i, f = d || a.pointer === 0;
 	return /* @__PURE__ */ (0, h.jsxs)("div", {
 		className: U.header,
-		children: [/* @__PURE__ */ (0, h.jsx)(N, {
+		children: [/* @__PURE__ */ (0, h.jsx)(M, {
 			variant: "ghost",
-			className: M.rect,
+			className: j.rect,
 			onClick: e,
 			children: /* @__PURE__ */ (0, h.jsx)(D, {})
 		}), /* @__PURE__ */ (0, h.jsxs)("div", {
@@ -1145,12 +1153,12 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 				c && /* @__PURE__ */ (0, h.jsxs)("div", {
 					className: U.history,
 					children: [
-						/* @__PURE__ */ (0, h.jsx)(N, {
+						/* @__PURE__ */ (0, h.jsx)(M, {
 							variant: "outline",
 							disabled: l,
-							className: M.rect,
+							className: j.rect,
 							onClick: o,
-							children: /* @__PURE__ */ (0, h.jsx)(ie, {})
+							children: /* @__PURE__ */ (0, h.jsx)(re, {})
 						}),
 						/* @__PURE__ */ (0, h.jsxs)("div", {
 							className: U.historyText,
@@ -1160,33 +1168,33 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 								a.items.length
 							]
 						}),
-						/* @__PURE__ */ (0, h.jsx)(N, {
+						/* @__PURE__ */ (0, h.jsx)(M, {
 							variant: "outline",
 							disabled: u,
-							className: M.rect,
+							className: j.rect,
 							onClick: s,
-							children: /* @__PURE__ */ (0, h.jsx)(O, {})
+							children: /* @__PURE__ */ (0, h.jsx)(k, {})
 						})
 					]
 				}),
-				/* @__PURE__ */ (0, h.jsx)(N, {
+				/* @__PURE__ */ (0, h.jsx)(M, {
 					variant: "outline",
 					disabled: d,
 					onClick: r,
 					children: "Reset"
 				}),
-				/* @__PURE__ */ (0, h.jsxs)(N, {
+				/* @__PURE__ */ (0, h.jsxs)(M, {
 					disabled: f,
 					onClick: n,
-					children: [i ? /* @__PURE__ */ (0, h.jsx)(A, {}) : /* @__PURE__ */ (0, h.jsx)(E, {}), "Save"]
+					children: [i ? /* @__PURE__ */ (0, h.jsx)(pe, {}) : /* @__PURE__ */ (0, h.jsx)(E, {}), "Save"]
 				})
 			]
 		})]
 	});
-}, Je = (e, t) => {
+}, Ye = (e, t) => {
 	let n = new CustomEvent("crop-update", { detail: t });
 	e.dispatchEvent(n);
-}, Ye = (e, t) => {
+}, Xe = (e, t) => {
 	let n = new CustomEvent("clip-path-update", { detail: t });
 	e.dispatchEvent(n);
 }, W = (e, t) => {
@@ -1202,8 +1210,8 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 	updatedScale: e,
 	updatedWidth: Math.round(e / 100 * t),
 	updatedHeight: Math.round(e / 100 * n)
-}), Xe = () => {
-	let { getLastHistoryItem: e, setCurrentAction: t, addToHistory: n, setSidebar: i, eventBus: a } = j(), { width: c, height: l } = e(), [u, d] = s(c), [f, p] = s(l), [m, g] = s(100), _ = o(0), v = S(), y = (e) => {
+}), Ze = () => {
+	let { getLastHistoryItem: e, setCurrentAction: t, addToHistory: n, setSidebar: i, eventBus: a } = A(), { width: c, height: l } = e(), [u, d] = s(c), [f, p] = s(l), [m, g] = s(100), _ = o(0), v = S(), y = (e) => {
 		let { updatedScale: t, updatedWidth: n, updatedHeight: r } = J(e, c, l);
 		d(n), p(r), g(t), W(a, t);
 	}, b = (e) => {
@@ -1288,58 +1296,81 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 	rotate: "_rotate_dvanl_12",
 	flip: "_flip_dvanl_24",
 	image: "_image_dvanl_32"
-}, Ze = ({ isClipped: e, style: t = {} }) => {
-	let { history: n, previewUrl: i, currentAction: a, getLastRotation: s, eventBus: c } = j(), l = o(null), u = [];
-	if (a) {
+}, Qe = ({ isClipped: e, style: t = {} }) => {
+	let { history: n, previewUrl: a, currentAction: s, getLastRotation: c, eventBus: l } = A(), u = o(null), d = o(s?.name), f = o(a);
+	i(() => {
+		let e = d.current, t = s?.name, n = f.current !== a;
+		if (d.current = t, f.current = a, !(e && t && e !== t) && !n) return;
+		let r = u.current;
+		if (!r) return;
+		let i = [r, ...r.querySelectorAll("*")];
+		i.forEach((e) => {
+			e.style.transition = "none";
+		}), r.getBoundingClientRect();
+		let o = () => {
+			i.forEach((e) => {
+				e.style.removeProperty("transition");
+			});
+		}, c = requestAnimationFrame(o);
+		return () => {
+			cancelAnimationFrame(c), o();
+		};
+	}, [s?.name, a]);
+	let p = [];
+	if (s) {
 		let { width: e, height: t } = n.items.at(n.pointer);
-		u.push({
-			...a.name === w.ROTATE ? Ne(e, t, s(), a.args.degrees) : {
+		p.push({
+			...s.name === w.ROTATE ? Pe(e, t, c(), s.args.degrees) : {
 				width: e,
 				height: t
 			},
-			action: a
+			action: s
 		});
 	}
-	let { box: d, boxWidth: f, boxHeight: p, viewWidth: m, viewHeight: g, rotation: _, flipH: v, flipV: y } = We([...n.items.slice(0, n.pointer + 1), ...u]);
+	let { box: m, boxWidth: g, boxHeight: _, viewWidth: v, viewHeight: y, rotation: b, flipH: x, flipV: S } = Ge([...n.items.slice(0, n.pointer + 1), ...p]);
 	return r(() => {
-		e && l.current && (l.current.style.transition = "none");
+		e && u.current && (u.current.style.transition = "none"), s?.name !== w.RESIZE && u.current && (u.current.style.transform = "scale(1)");
 		let t = (e) => {
 			let t = e.detail;
-			l.current && (l.current.style.transform = `scale(${t / 100})`);
+			u.current && (u.current.style.transform = `scale(${t / 100})`);
 		}, n = (t) => {
 			if (!e) return;
 			let { x: n, y: r, w: i, h: a } = t.detail;
-			l.current && (l.current.style.clipPath = `xywh(${n}% ${r}% ${i}% ${a}%)`);
+			u.current && (u.current.style.clipPath = `xywh(${n}% ${r}% ${i}% ${a}%)`);
 		};
-		return c.addEventListener("resize-update", t), c.addEventListener("clip-path-update", n), () => {
-			c.removeEventListener("resize-update", t), c.removeEventListener("clip-path-update", n);
+		return l.addEventListener("resize-update", t), l.addEventListener("clip-path-update", n), () => {
+			l.removeEventListener("resize-update", t), l.removeEventListener("clip-path-update", n);
 		};
-	}, [e, c]), /* @__PURE__ */ (0, h.jsx)("div", {
-		ref: l,
+	}, [
+		e,
+		s?.name,
+		l
+	]), /* @__PURE__ */ (0, h.jsx)("div", {
+		ref: u,
 		className: Y.preview,
 		style: {
-			aspectRatio: `${m} / ${g}`,
+			aspectRatio: `${v} / ${y}`,
 			...t
 		},
 		children: /* @__PURE__ */ (0, h.jsx)("div", {
 			className: Y.rotate,
 			style: {
-				width: `${f / m * 100}%`,
-				height: `${p / g * 100}%`,
-				transform: `translate(-50%, -50%) rotate(${_}deg)`
+				width: `${g / v * 100}%`,
+				height: `${_ / y * 100}%`,
+				transform: `translate(-50%, -50%) rotate(${b}deg)`
 			},
 			children: /* @__PURE__ */ (0, h.jsx)("div", {
 				className: Y.flip,
-				style: { transform: `scale(${v ? -1 : 1}, ${y ? -1 : 1})` },
+				style: { transform: `scale(${x ? -1 : 1}, ${S ? -1 : 1})` },
 				children: /* @__PURE__ */ (0, h.jsx)("img", {
 					className: Y.image,
-					src: i,
+					src: a,
 					alt: "Preview Image",
 					style: {
-						width: `${1 / d.w * 100}%`,
-						height: `${1 / d.h * 100}%`,
-						left: `${-(d.x / d.w) * 100}%`,
-						top: `${-(d.y / d.h) * 100}%`
+						width: `${1 / m.w * 100}%`,
+						height: `${1 / m.h * 100}%`,
+						left: `${-(m.x / m.w) * 100}%`,
+						top: `${-(m.y / m.h) * 100}%`
 					}
 				})
 			})
@@ -1363,9 +1394,9 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 	pointerBottomLeft: "_pointerBottomLeft_13nh3_104",
 	mobileBorder: "_mobileBorder_13nh3_111",
 	mobilePointer: "_mobilePointer_13nh3_117"
-}, Qe = () => {
-	let { getLastHistoryItem: e } = j(), t = S(), n = o(null), { handleCropStart: r, initialCrop: i } = st({ boxRef: n }), { width: a, height: s } = e(), { x: c, y: l, w: u, h: d } = i;
-	return /* @__PURE__ */ (0, h.jsxs)(h.Fragment, { children: [/* @__PURE__ */ (0, h.jsx)(Ze, {
+}, $e = () => {
+	let { getLastHistoryItem: e } = A(), t = S(), n = o(null), { handleCropStart: r, initialCrop: i } = ct({ boxRef: n }), { width: a, height: s } = e(), { x: c, y: l, w: u, h: d } = i;
+	return /* @__PURE__ */ (0, h.jsxs)(h.Fragment, { children: [/* @__PURE__ */ (0, h.jsx)(Qe, {
 		isClipped: !0,
 		style: { clipPath: `xywh(${c}% ${l}% ${u}% ${d}%)` }
 	}), /* @__PURE__ */ (0, h.jsx)("div", {
@@ -1380,11 +1411,11 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 				top: `${l}%`,
 				left: `${c}%`
 			},
-			children: [/* @__PURE__ */ (0, h.jsx)(et, {}), t ? /* @__PURE__ */ (0, h.jsx)(ct, { onMouseDown: r }) : /* @__PURE__ */ (0, h.jsx)(tt, { onMouseDown: r })]
+			children: [/* @__PURE__ */ (0, h.jsx)(tt, {}), t ? /* @__PURE__ */ (0, h.jsx)(lt, { onMouseDown: r }) : /* @__PURE__ */ (0, h.jsx)(nt, { onMouseDown: r })]
 		})
 	})] });
-}, $e = () => {
-	let { setCurrentAction: e, currentAction: t, getLastHistoryItem: n, addToHistory: i, setSidebar: a, eventBus: s } = j(), { width: c, height: l } = n(), u = o(null), d = o(null), f = o(null), p = o(null), m = o({
+}, et = () => {
+	let { setCurrentAction: e, currentAction: t, getLastHistoryItem: n, addToHistory: i, setSidebar: a, eventBus: s } = A(), { width: c, height: l } = n(), u = o(null), d = o(null), f = o(null), p = o(null), m = o({
 		x: 0,
 		y: 0,
 		w: 0,
@@ -1392,7 +1423,7 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 	});
 	return r(() => {
 		if (t?.name !== "crop") return;
-		let e = je(t.args.ratio, c, l), { x: n, y: r, w: i, h: a } = e, o = Math.round(n / 100 * c), h = Math.round(r / 100 * l), g = Math.round(i / 100 * c), _ = Math.round(a / 100 * l);
+		let e = Me(t.args.ratio, c, l), { x: n, y: r, w: i, h: a } = e, o = Math.round(n / 100 * c), h = Math.round(r / 100 * l), g = Math.round(i / 100 * c), _ = Math.round(a / 100 * l);
 		m.current = e, u.current && (u.current.textContent = o.toString()), d.current && (d.current.textContent = h.toString()), f.current && (f.current.textContent = g.toString()), p.current && (p.current.textContent = _.toString());
 		let v = (e) => {
 			let { x: t, y: n, w: r, h: i } = e.detail;
@@ -1417,7 +1448,7 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 					className: X.toolsInfoLabel,
 					children: "left"
 				}), /* @__PURE__ */ (0, h.jsx)("div", {
-					className: `${X.toolsInfoValue} ${P.semibold}`,
+					className: `${X.toolsInfoValue} ${N.semibold}`,
 					ref: u
 				})]
 			}),
@@ -1427,7 +1458,7 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 					className: X.toolsInfoLabel,
 					children: "top"
 				}), /* @__PURE__ */ (0, h.jsx)("div", {
-					className: `${X.toolsInfoValue} ${P.semibold}`,
+					className: `${X.toolsInfoValue} ${N.semibold}`,
 					ref: d
 				})]
 			}),
@@ -1437,7 +1468,7 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 					className: X.toolsInfoLabel,
 					children: "width"
 				}), /* @__PURE__ */ (0, h.jsx)("div", {
-					className: `${X.toolsInfoValue} ${P.semibold}`,
+					className: `${X.toolsInfoValue} ${N.semibold}`,
 					ref: f
 				})]
 			}),
@@ -1447,7 +1478,7 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 					className: X.toolsInfoLabel,
 					children: "height"
 				}), /* @__PURE__ */ (0, h.jsx)("div", {
-					className: `${X.toolsInfoValue} ${P.semibold}`,
+					className: `${X.toolsInfoValue} ${N.semibold}`,
 					ref: p
 				})]
 			}),
@@ -1473,10 +1504,10 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 			})
 		]
 	});
-}, et = () => /* @__PURE__ */ (0, h.jsxs)("div", {
+}, tt = () => /* @__PURE__ */ (0, h.jsxs)("div", {
 	className: X.linesBox,
 	children: [/* @__PURE__ */ (0, h.jsx)("span", { className: `${X.line} ${X.lineV}` }), /* @__PURE__ */ (0, h.jsx)("span", { className: `${X.line} ${X.lineH}` })]
-}), tt = ({ onMouseDown: e }) => /* @__PURE__ */ (0, h.jsxs)(h.Fragment, { children: [
+}), nt = ({ onMouseDown: e }) => /* @__PURE__ */ (0, h.jsxs)(h.Fragment, { children: [
 	/* @__PURE__ */ (0, h.jsx)("div", {
 		className: `${X.pointer} ${X.pointerTopLeft}`,
 		onMouseDown: (t) => e(t, "tl", "nwse")
@@ -1496,20 +1527,20 @@ var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0
 ] });
 //#endregion
 //#region src/shared/components/Pixedi/crop/useCropInteraction.ts
-function nt(e, t, n) {
+function rt(e, t, n) {
 	return Math.min(Math.max(e, t), n);
 }
-function rt(e, { x: t, y: n, w: r, h: i }) {
+function it(e, { x: t, y: n, w: r, h: i }) {
 	e.style.left = `${t}%`, e.style.top = `${n}%`, e.style.width = `${r}%`, e.style.height = `${i}%`;
 }
-function it(e) {
+function at(e) {
 	let { width: t, height: n } = e.getBoundingClientRect();
 	return {
 		frameW: t,
 		frameH: n
 	};
 }
-function at({ x: e, y: t, w: n, h: r }, i, a) {
+function ot({ x: e, y: t, w: n, h: r }, i, a) {
 	return {
 		x: e / 100 * i,
 		y: t / 100 * a,
@@ -1517,7 +1548,7 @@ function at({ x: e, y: t, w: n, h: r }, i, a) {
 		h: r / 100 * a
 	};
 }
-function ot({ x: e, y: t, w: n, h: r }, i, a) {
+function st({ x: e, y: t, w: n, h: r }, i, a) {
 	return {
 		x: e / i * 100,
 		y: t / a * 100,
@@ -1525,22 +1556,22 @@ function ot({ x: e, y: t, w: n, h: r }, i, a) {
 		h: r / a * 100
 	};
 }
-var st = ({ boxRef: e }) => {
-	let { currentAction: t, getLastHistoryItem: n, eventBus: i } = j(), s = S(), { width: c, height: l } = n(), u = t?.name === w.CROP, d = u ? t.args.ratio : 1, f = !u || t.args.isFree, p = a(() => je(d, c, l), [
+var ct = ({ boxRef: e }) => {
+	let { currentAction: t, getLastHistoryItem: n, eventBus: i } = A(), s = S(), { width: c, height: l } = n(), u = t?.name === w.CROP, d = u ? t.args.ratio : 1, f = !u || t.args.isFree, p = a(() => Me(d, c, l), [
 		d,
 		c,
 		l
 	]), m = o(null), h = o(""), g = o(p), _ = o(p);
 	return r(() => {
-		g.current = p, Ye(i, p);
+		g.current = p, Xe(i, p);
 	}, [p, i]), r(() => {
 		let t = (e, t) => {
-			g.current = t, rt(e, t), Je(i, {
+			g.current = t, it(e, t), Ye(i, {
 				x: Math.round(t.x / 100 * c),
 				y: Math.round(t.y / 100 * l),
 				w: Math.round(t.w / 100 * c),
 				h: Math.round(t.h / 100 * l)
-			}), Ye(i, t);
+			}), Xe(i, t);
 		}, n = (e) => {
 			e.preventDefault(), _.current = g.current;
 			let t = "clientX" in e ? e.clientX : e.touches[0].clientX, n = "clientY" in e ? e.clientY : e.touches[0].clientY;
@@ -1553,7 +1584,7 @@ var st = ({ boxRef: e }) => {
 			t.preventDefault();
 			let n = e.current, r = n.parentElement;
 			if (!r) return;
-			let { frameW: i, frameH: s } = it(r);
+			let { frameW: i, frameH: s } = at(r);
 			if (h.current) {
 				a(t, n, i, s);
 				return;
@@ -1561,14 +1592,14 @@ var st = ({ boxRef: e }) => {
 			o(t, n, i, s);
 		}, a = (e, n, r, i) => {
 			if (!m.current) return;
-			let a = "clientX" in e ? e.clientX : e.touches[0].clientX, o = "clientY" in e ? e.clientY : e.touches[0].clientY, s = ot(Ae(h.current, f, d, m.current.x, m.current.y, a, o, r, i, at(_.current, r, i), at(g.current, r, i)), r, i);
-			t(n, f ? s : Me(s, d, c, l));
+			let a = "clientX" in e ? e.clientX : e.touches[0].clientX, o = "clientY" in e ? e.clientY : e.touches[0].clientY, s = st(je(h.current, f, d, m.current.x, m.current.y, a, o, r, i, ot(_.current, r, i), ot(g.current, r, i)), r, i);
+			t(n, f ? s : Ne(s, d, c, l));
 		}, o = (e, n, r, i) => {
 			if (!m.current) return;
 			let { x: a, y: o, w: s, h: c } = _.current, l = "clientX" in e ? e.clientX : e.touches[0].clientX, u = "clientY" in e ? e.clientY : e.touches[0].clientY, d = (l - m.current.x) / r * 100, f = (u - m.current.y) / i * 100;
 			t(n, {
-				x: nt(a + d, 0, Math.max(0, 100 - s)),
-				y: nt(o + f, 0, Math.max(0, 100 - c)),
+				x: rt(a + d, 0, Math.max(0, 100 - s)),
+				y: rt(o + f, 0, Math.max(0, 100 - c)),
 				w: s,
 				h: c
 			});
@@ -1603,7 +1634,7 @@ var st = ({ boxRef: e }) => {
 		},
 		initialCrop: p
 	};
-}, ct = ({ onMouseDown: e }) => /* @__PURE__ */ (0, h.jsx)("div", {
+}, lt = ({ onMouseDown: e }) => /* @__PURE__ */ (0, h.jsx)("div", {
 	className: X.mobileBorder,
 	children: /* @__PURE__ */ (0, h.jsx)("div", {
 		className: X.mobilePointer,
@@ -1613,13 +1644,13 @@ var st = ({ boxRef: e }) => {
 	flip: "_flip_17ic5_1",
 	btnH: "_btnH_17ic5_14",
 	btnV: "_btnV_17ic5_20"
-}, lt = () => {
-	let { getLastHistoryItem: e, setCurrentAction: t, addToHistory: n, setSidebar: r } = j(), [i, a] = s(!1), [o, c] = s(!1), { width: l, height: u } = e();
+}, ut = () => {
+	let { getLastHistoryItem: e, setCurrentAction: t, addToHistory: n, setSidebar: r } = A(), [i, a] = s(!1), [o, c] = s(!1), { width: l, height: u } = e();
 	return /* @__PURE__ */ (0, h.jsxs)("div", {
 		className: Z.flip,
 		children: [/* @__PURE__ */ (0, h.jsxs)("div", {
 			className: Z.scGroup,
-			children: [/* @__PURE__ */ (0, h.jsx)(N, {
+			children: [/* @__PURE__ */ (0, h.jsx)(M, {
 				variant: "outline",
 				className: `${Z.btnH}`,
 				onClick: () => {
@@ -1632,7 +1663,7 @@ var st = ({ boxRef: e }) => {
 					});
 				},
 				children: /* @__PURE__ */ (0, h.jsx)(le, { style: { color: i ? "var(--accent-blue)" : "var(--foreground)" } })
-			}), /* @__PURE__ */ (0, h.jsx)(N, {
+			}), /* @__PURE__ */ (0, h.jsx)(M, {
 				variant: "outline",
 				className: `${Z.btnV} `,
 				onClick: () => {
@@ -1670,8 +1701,8 @@ var st = ({ boxRef: e }) => {
 	rotate: "_rotate_gkt07_1",
 	btnH: "_btnH_gkt07_14",
 	btnV: "_btnV_gkt07_20"
-}, ut = () => {
-	let { getLastRotation: e, getLastHistoryItem: t, addToHistory: n, setSidebar: r, setCurrentAction: i } = j(), { width: a, height: s } = t(), c = e(), l = o(c), u = o(c), d = (e) => {
+}, dt = () => {
+	let { getLastRotation: e, getLastHistoryItem: t, addToHistory: n, setSidebar: r, setCurrentAction: i } = A(), { width: a, height: s } = t(), c = e(), l = o(c), u = o(c), d = (e) => {
 		u.current += e, i({
 			name: "rotate",
 			args: { degrees: u.current }
@@ -1681,12 +1712,12 @@ var st = ({ boxRef: e }) => {
 		className: Q.rotate,
 		children: [/* @__PURE__ */ (0, h.jsxs)("div", {
 			className: Q.scGroup,
-			children: [/* @__PURE__ */ (0, h.jsx)(N, {
+			children: [/* @__PURE__ */ (0, h.jsx)(M, {
 				variant: "outline",
 				className: `${Q.btnH}`,
 				onClick: () => d(90),
 				children: /* @__PURE__ */ (0, h.jsx)(de, {})
-			}), /* @__PURE__ */ (0, h.jsx)(N, {
+			}), /* @__PURE__ */ (0, h.jsx)(M, {
 				variant: "outline",
 				className: `${Q.btnV} `,
 				onClick: () => d(-90),
@@ -1695,7 +1726,7 @@ var st = ({ boxRef: e }) => {
 		}), /* @__PURE__ */ (0, h.jsx)(L, {
 			onSave: async () => {
 				n({
-					...Ne(a, s, l.current, u.current),
+					...Pe(a, s, l.current, u.current),
 					action: {
 						name: "rotate",
 						args: { degrees: u.current }
@@ -1707,17 +1738,17 @@ var st = ({ boxRef: e }) => {
 			}
 		})]
 	});
-}, dt = { frame: "_frame_xffug_1" }, ft = () => {
-	let { currentAction: e } = j(), t = e?.name === w.CROP, n = e?.name === w.RESIZE, r = e?.name === w.FLIP, i = e?.name === w.ROTATE, a = t;
+}, ft = { frame: "_frame_xffug_1" }, pt = () => {
+	let { currentAction: e } = A(), t = e?.name === w.CROP, n = e?.name === w.RESIZE, r = e?.name === w.FLIP, i = e?.name === w.ROTATE, a = t;
 	return /* @__PURE__ */ (0, h.jsxs)("div", {
-		className: `${dt.frame} ${a ? P.mask : ""}`,
+		className: `${ft.frame} ${a ? N.mask : ""}`,
 		children: [
-			/* @__PURE__ */ (0, h.jsx)(Ze, { style: t ? { opacity: .4 } : {} }),
-			t && /* @__PURE__ */ (0, h.jsx)(Qe, {}, e?.args?.id),
-			n && /* @__PURE__ */ (0, h.jsx)(Xe, {}),
-			t && /* @__PURE__ */ (0, h.jsx)($e, {}),
-			r && /* @__PURE__ */ (0, h.jsx)(lt, {}),
-			i && /* @__PURE__ */ (0, h.jsx)(ut, {})
+			/* @__PURE__ */ (0, h.jsx)(Qe, { style: t ? { opacity: .4 } : {} }),
+			t && /* @__PURE__ */ (0, h.jsx)($e, {}, e?.args?.id),
+			n && /* @__PURE__ */ (0, h.jsx)(Ze, {}),
+			t && /* @__PURE__ */ (0, h.jsx)(et, {}),
+			r && /* @__PURE__ */ (0, h.jsx)(ut, {}),
+			i && /* @__PURE__ */ (0, h.jsx)(dt, {})
 		]
 	});
 }, $ = {
@@ -1734,12 +1765,12 @@ var st = ({ boxRef: e }) => {
 	ratio: "_ratio_8qtha_75",
 	sidebarPreset: "_sidebarPreset_8qtha_80",
 	flipRotate: "_flipRotate_8qtha_85"
-}, pt = () => {
-	let { getLastHistoryItem: e, setCurrentAction: t, setSidebar: n } = j(), { width: r, height: i } = e() ?? {
+}, mt = () => {
+	let { getLastHistoryItem: e, setCurrentAction: t, setSidebar: n } = A(), { width: r, height: i } = e() ?? {
 		width: 0,
 		height: 0
 	};
-	return /* @__PURE__ */ (0, h.jsxs)(N, {
+	return /* @__PURE__ */ (0, h.jsxs)(M, {
 		variant: "outline",
 		className: $.resize,
 		onClick: () => {
@@ -1753,7 +1784,7 @@ var st = ({ boxRef: e }) => {
 		},
 		children: [/* @__PURE__ */ (0, h.jsxs)("div", {
 			className: $.resizeIcon,
-			children: [/* @__PURE__ */ (0, h.jsx)(k, {}), "Resize"]
+			children: [/* @__PURE__ */ (0, h.jsx)(ce, {}), "Resize"]
 		}), /* @__PURE__ */ (0, h.jsxs)("div", {
 			className: $.resizeSize,
 			children: [
@@ -1763,8 +1794,8 @@ var st = ({ boxRef: e }) => {
 			]
 		})]
 	});
-}, mt = () => {
-	let { currentAction: e, setCurrentAction: t, getLastHistoryItem: n, setSidebar: r } = j(), { name: i, args: a } = e || {}, o = i === "crop" ? a?.id : "", { width: s, height: c } = n(), l = s / c, u = (e) => {
+}, ht = () => {
+	let { currentAction: e, setCurrentAction: t, getLastHistoryItem: n, setSidebar: r } = A(), { name: i, args: a } = e || {}, o = i === "crop" ? a?.id : "", { width: s, height: c } = n(), l = s / c, u = (e) => {
 		e !== o && (t({
 			name: "crop",
 			args: {
@@ -1779,29 +1810,29 @@ var st = ({ boxRef: e }) => {
 		children: [/* @__PURE__ */ (0, h.jsx)("h4", { children: "Crop" }), /* @__PURE__ */ (0, h.jsxs)("div", {
 			className: $.ratio,
 			children: [
-				/* @__PURE__ */ (0, h.jsx)(me, {
+				/* @__PURE__ */ (0, h.jsx)(P, {
 					label: "Freeform",
-					icon: /* @__PURE__ */ (0, h.jsx)(oe, {}),
+					icon: /* @__PURE__ */ (0, h.jsx)(ae, {}),
 					active: o === "freeform",
 					onClick: () => u("freeform")
 				}),
-				/* @__PURE__ */ (0, h.jsx)(me, {
+				/* @__PURE__ */ (0, h.jsx)(P, {
 					label: "Original",
-					icon: /* @__PURE__ */ (0, h.jsx)(se, {}),
+					icon: /* @__PURE__ */ (0, h.jsx)(oe, {}),
 					active: o === "original",
 					onClick: () => u("original")
 				}),
-				/* @__PURE__ */ (0, h.jsx)(me, {
+				/* @__PURE__ */ (0, h.jsx)(P, {
 					label: "1:1",
-					icon: /* @__PURE__ */ (0, h.jsx)(ce, {}),
+					icon: /* @__PURE__ */ (0, h.jsx)(se, {}),
 					active: o === "1:1",
 					onClick: () => u("1:1")
 				})
 			]
 		})]
 	});
-}, ht = Te.map((e) => e.options).flat(), gt = () => {
-	let { setCurrentAction: e, currentAction: t, setSidebar: n } = j(), r = t?.name === "crop" && ht.some((e) => e.value === t.args.id) ? t.args.id : "";
+}, gt = Te.map((e) => e.options).flat(), _t = () => {
+	let { setCurrentAction: e, currentAction: t, setSidebar: n } = A(), r = t?.name === "crop" && gt.some((e) => e.value === t.args.id) ? t.args.id : "";
 	return /* @__PURE__ */ (0, h.jsxs)("div", {
 		className: $.sidebarPreset,
 		children: [/* @__PURE__ */ (0, h.jsx)("h4", { children: "Presets" }), /* @__PURE__ */ (0, h.jsx)("div", { children: /* @__PURE__ */ (0, h.jsx)(ge, {
@@ -1828,9 +1859,9 @@ var st = ({ boxRef: e }) => {
 			items: Te
 		}) })]
 	});
-}, _t = () => {
-	let { setCurrentAction: e, setSidebar: t } = j();
-	return /* @__PURE__ */ (0, h.jsx)(N, {
+}, vt = () => {
+	let { setCurrentAction: e, setSidebar: t } = A();
+	return /* @__PURE__ */ (0, h.jsx)(M, {
 		variant: "outline",
 		className: $.resize,
 		onClick: () => {
@@ -1847,9 +1878,9 @@ var st = ({ boxRef: e }) => {
 			children: [/* @__PURE__ */ (0, h.jsx)(le, {}), "Flip"]
 		})
 	});
-}, vt = () => {
-	let { getLastRotation: e, setCurrentAction: t, setSidebar: n } = j();
-	return /* @__PURE__ */ (0, h.jsx)(N, {
+}, yt = () => {
+	let { getLastRotation: e, setCurrentAction: t, setSidebar: n } = A();
+	return /* @__PURE__ */ (0, h.jsx)(M, {
 		variant: "outline",
 		className: $.resize,
 		onClick: () => {
@@ -1863,13 +1894,13 @@ var st = ({ boxRef: e }) => {
 			children: [/* @__PURE__ */ (0, h.jsx)(de, {}), "Rotate"]
 		})
 	});
-}, yt = () => {
-	let { sidebar: e, setSidebar: t } = j(), n = ee("md");
-	return /* @__PURE__ */ (0, h.jsxs)(h.Fragment, { children: [/* @__PURE__ */ (0, h.jsx)(N, {
+}, bt = () => {
+	let { sidebar: e, setSidebar: t } = A(), n = ee("md");
+	return /* @__PURE__ */ (0, h.jsxs)(h.Fragment, { children: [/* @__PURE__ */ (0, h.jsx)(M, {
 		variant: "outline",
 		className: $.settings,
 		onClick: () => t(!0),
-		children: /* @__PURE__ */ (0, h.jsx)(ae, {})
+		children: /* @__PURE__ */ (0, h.jsx)(ie, {})
 	}), /* @__PURE__ */ (0, h.jsx)("div", {
 		className: $.sidebar,
 		style: { transform: n && e ? "translateX(-320px)" : "translateX(0%)" },
@@ -1878,44 +1909,44 @@ var st = ({ boxRef: e }) => {
 			children: /* @__PURE__ */ (0, h.jsxs)("div", {
 				className: $.content,
 				children: [
-					n && /* @__PURE__ */ (0, h.jsx)(N, {
+					n && /* @__PURE__ */ (0, h.jsx)(M, {
 						variant: "ghost",
-						className: `${$.closeBtn} ${M.rect}`,
+						className: `${$.closeBtn} ${j.rect}`,
 						onClick: () => t(!1),
 						children: /* @__PURE__ */ (0, h.jsx)(te, {})
 					}),
-					/* @__PURE__ */ (0, h.jsx)(pt, {}),
-					/* @__PURE__ */ (0, h.jsx)(F, { className: $.separator }),
 					/* @__PURE__ */ (0, h.jsx)(mt, {}),
 					/* @__PURE__ */ (0, h.jsx)(F, { className: $.separator }),
-					/* @__PURE__ */ (0, h.jsx)(gt, {}),
+					/* @__PURE__ */ (0, h.jsx)(ht, {}),
+					/* @__PURE__ */ (0, h.jsx)(F, { className: $.separator }),
+					/* @__PURE__ */ (0, h.jsx)(_t, {}),
 					/* @__PURE__ */ (0, h.jsx)(F, { className: $.separator }),
 					/* @__PURE__ */ (0, h.jsxs)("div", {
 						className: $.flipRotate,
-						children: [/* @__PURE__ */ (0, h.jsx)(_t, {}), /* @__PURE__ */ (0, h.jsx)(vt, {})]
+						children: [/* @__PURE__ */ (0, h.jsx)(vt, {}), /* @__PURE__ */ (0, h.jsx)(yt, {})]
 					})
 				]
 			})
 		})
 	})] });
-}, bt = ({ image: e, onSave: t, onBack: n, theme: r = "light", settings: i = u }) => {
+}, xt = ({ image: e, onSave: t, onBack: n, theme: r = "light", settings: i = u }) => {
 	let { loading: a, error: o, mimeType: s, width: c, height: l, originalBlob: d, previewUrl: f, isAlpha: p } = b(e);
 	return a || o || !d || !s ? /* @__PURE__ */ (0, h.jsx)("div", {
-		className: `${P.root} ${P.wrapper}`,
+		className: `${N.root} ${N.wrapper}`,
 		"data-theme": r,
 		children: /* @__PURE__ */ (0, h.jsxs)("div", {
-			className: P.system,
+			className: N.system,
 			children: [
-				a && /* @__PURE__ */ (0, h.jsx)(A, { style: {
+				a && /* @__PURE__ */ (0, h.jsx)(pe, { style: {
 					width: 48,
 					height: 48
 				} }),
 				o && /* @__PURE__ */ (0, h.jsx)("div", {
-					className: P.textRed,
+					className: N.textRed,
 					children: o
 				}),
 				!a && !o && (!d || !s) && /* @__PURE__ */ (0, h.jsx)("div", {
-					className: P.textRed,
+					className: N.textRed,
 					children: "Failed to load image."
 				})
 			]
@@ -1932,20 +1963,20 @@ var st = ({ boxRef: e }) => {
 			...i
 		},
 		children: /* @__PURE__ */ (0, h.jsx)("div", {
-			className: `${P.root} ${P.wrapper}`,
+			className: `${N.root} ${N.wrapper}`,
 			"data-theme": r,
 			children: /* @__PURE__ */ (0, h.jsxs)("div", {
-				className: P.main,
-				children: [/* @__PURE__ */ (0, h.jsx)(qe, {
+				className: N.main,
+				children: [/* @__PURE__ */ (0, h.jsx)(Je, {
 					onSave: t,
 					onBack: n
 				}), /* @__PURE__ */ (0, h.jsxs)("div", {
-					className: P.grid,
-					children: [/* @__PURE__ */ (0, h.jsx)(ft, {}), /* @__PURE__ */ (0, h.jsx)(yt, {})]
+					className: N.grid,
+					children: [/* @__PURE__ */ (0, h.jsx)(pt, {}), /* @__PURE__ */ (0, h.jsx)(bt, {})]
 				})]
 			})
 		})
 	});
 };
 //#endregion
-export { bt as Pixedi };
+export { xt as Pixedi };