pixedi 1.0.0 → 1.0.2

package/dist/lib/index.js

@@ -0,0 +1,1602 @@
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.btn{cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;background-color:#0000;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;gap:8px;height:32px;padding-left:8px;padding-right:8px;font-family:inherit;font-size:14px;font-weight:500;transition:background-color .2s,border-color .2s,opacity .2s;display:inline-flex}.btn:disabled{pointer-events:none;opacity:.5}.btn:active{transform:translateY(1px)}.btn svg{flex-shrink:0;width:16px;height:16px}.btn-default{background-color:var(--primary);color:var(--primary-foreground)}.btn-default:hover{opacity:.9}.btn-outline{border-color:var(--border);background-color:var(--background);color:var(--foreground)}.btn-outline:hover{background-color:var(--secondary)}.btn-ghost{color:var(--foreground);padding-left:8px;padding-right:8px}.btn-ghost:hover{background-color:var(--secondary)}.btn-rect{width:32px;height:32px}.btn-crop{border:1px solid var(--border);background-color:var(--background);color:var(--foreground);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:12px;font-family:inherit;font-size:12px;transition:all .2s;display:inline-flex}.btn-crop:hover:not([aria-pressed=true]){background-color:var(--secondary)}.btn-crop[aria-pressed=true]{border-color:var(--accent-blue);background-color:var(--accent-blue-light);color:var(--foreground)}.btn-crop svg{flex-shrink:0;width:20px;height:20px}.btn-crop span{white-space:nowrap}.separator{background-color:var(--border);box-sizing:border-box;border:none;flex-shrink:0;display:block}.separator[data-orientation=horizontal]{width:100%;height:1px}.separator[data-orientation=vertical]{align-self:stretch;width:1px;height:100%;margin:0}.select-wrapper{box-sizing:border-box;width:100%;position:relative}.select-trigger{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--border);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;justify-content:space-between;align-items:center;padding-left:10px;padding-right:8px;font-family:inherit;font-size:14px;transition:border-color .2s;display:flex}.select-trigger:hover,.select-trigger:focus{border-color:var(--muted-foreground)}.select-trigger-arrow{width:16px;height:16px;color:var(--muted-foreground);transition:transform .2s}.select-wrapper[data-state=open] .select-trigger-arrow{transform:rotate(180deg)}.select-content{background-color:var(--background);border:1px solid var(--border);z-index:50;box-sizing:border-box;border-radius:4px;width:100%;max-height:282px;padding:4px;position:absolute;top:calc(100% + 4px);left:0;overflow-y:auto;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.select-content::-webkit-scrollbar{width:4px}.select-content::-webkit-scrollbar-track{background:0 0}.select-content::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:10px}.select-wrapper[data-state=closed] .select-content{display:none}.select-group-label{color:var(--muted-foreground);-webkit-user-select:none;user-select:none;padding:8px 10px;font-size:12px;font-weight:500}.select-item{width:100%;color:var(--foreground);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;background:0 0;border-radius:4px;justify-content:space-between;align-items:center;padding:4px 10px;display:flex}.select-item:hover{background-color:var(--secondary)}.select-item-left{font-size:14px;font-weight:400}.select-item-addon{align-items:center;gap:8px;display:flex}.select-item-addon>span{color:var(--muted-foreground);font-size:12px}.select-item-addon>svg{font-size:14px}.select-item-addon>b{flex-shrink:0;width:16px;height:16px}.select-item-right-container{align-items:center;gap:8px;display:flex}.select-item-right{color:var(--muted-foreground);font-size:14px}.select-item-check{width:16px;height:16px;color:var(--foreground);flex-shrink:0}.input{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--input);box-sizing:border-box;border-radius:4px;outline:none;padding-left:8px;padding-right:8px;font-family:inherit;font-size:14px;line-height:normal;transition:border-color .2s,box-shadow .2s;display:block}.input:hover:not(:disabled):not(:focus){border-color:var(--muted-foreground)}.input:focus{box-shadow:0 0 0 1px var(--ring)}.input:disabled{cursor:not-allowed;opacity:.5;background-color:var(--secondary)}.input::placeholder{color:var(--muted-foreground);opacity:1}.input-number-clean::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-number-clean::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-number-clean[type=number]{-moz-appearance:textfield}.input-pixel-container{position:relative}.input-pixel-legend{color:var(--muted-foreground);background:var(--background);margin-left:8px;padding-left:4px;padding-right:4px;font-size:12px;position:absolute;top:-9px}.input-pixel-suffix{color:var(--muted-foreground);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:14px;position:absolute;bottom:2px;right:8px}.header{box-sizing:border-box;background-color:var(--background);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:48px;padding-left:8px;padding-right:8px;display:flex}.header-tools{gap:8px;display:flex}.header-history{align-items:center;gap:8px;display:flex}.header-history-text{color:var(--muted-foreground);font-size:14px}.crop-image{width:100%;height:100%;position:absolute;inset:0}.crop-box{cursor:move;position:absolute}.crop-tools{background-color:var(--background);box-sizing:border-box;border:1px solid var(--border);border-radius:4px;align-items:center;height:36px;padding-left:12px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.crop-tools-info{min-width:54px;margin-top:-2px;display:inline-block}.crop-tools-info-label{color:var(--muted-foreground);font-size:12px;line-height:12px}.crop-tools-info-value{font-size:14px;line-height:14px}.crop-b{background-color:var(--accent-blue);position:absolute}.crop-b-t{cursor:ns-resize;width:100%;height:2px;top:0;left:0}.crop-b-r{cursor:ew-resize;width:2px;height:100%;top:0;right:0}.crop-b-b{cursor:ns-resize;width:100%;height:2px;bottom:0;left:0;transform:translateY(1px)}.crop-b-l{cursor:ew-resize;width:2px;height:100%;top:0;left:-1px;transform:translate(1px)}.crop-l-box{pointer-events:none;position:absolute;inset:2px}.crop-l{border:1px dashed var(--color-white);opacity:.5;position:absolute}.crop-l-v{border-top:0;border-bottom:0;width:33%;height:100%;top:0;left:33%}.crop-l-h{border-left:0;border-right:0;width:100%;height:33%;top:33%;left:0}.crop-ps{box-sizing:border-box;border:1px solid var(--accent-blue);background-color:var(--overlay-bg-white);border-radius:50%;width:12px;height:12px;position:absolute}.crop-ps-tl{cursor:nwse-resize;top:-5px;left:-5px}.crop-ps-t{cursor:ns-resize;top:-5px;left:50%;transform:translate(-50%)}.crop-ps-tr{cursor:nesw-resize;top:-5px;right:-5px}.crop-ps-r{cursor:ew-resize;top:50%;right:-5px;transform:translateY(-50%)}.crop-ps-br{cursor:nwse-resize;bottom:-5px;right:-5px}.crop-ps-b{cursor:ns-resize;bottom:-5px;left:50%;transform:translate(-50%)}.crop-ps-bl{cursor:nesw-resize;bottom:-5px;left:-5px}.crop-ps-l{cursor:ew-resize;top:50%;left:-5px;transform:translateY(-50%)}.crop-p-b{box-sizing:border-box;border:2px solid var(--accent-blue);position:absolute;inset:0}.crop-p-p{background-color:var(--overlay-bg-white);border:3px solid var(--accent-blue);box-sizing:border-box;border-radius:50%;width:32px;height:32px;position:absolute;bottom:-16px;right:-16px}.frame{box-sizing:border-box;justify-content:center;align-items:center;width:100%;height:100%;min-height:0;padding:16px;display:flex;position:relative;overflow:hidden}.frame--faded{background-color:#00000080}.frame-preview{-webkit-user-select:none;user-select:none;flex-shrink:1;width:auto;min-width:0;max-width:100%;height:auto;min-height:0;max-height:100%;transition:transform .2s;display:block;position:relative}.frame-image{object-fit:contain;width:100%;height:100%}.frame-image--faded{opacity:.4}.resize{background-color:var(--background);border-radius:4px;flex-direction:column;padding:16px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}.resize-text{text-align:center;color:var(--muted-foreground);font-size:14px}.resize-border{border-bottom:1px solid var(--border);width:60px;margin:12px auto 4px;display:inline-block}.resize-tools{align-items:center;gap:6px;margin-top:16px;display:flex}.resize-tools-lock{width:12px;height:12px;color:var(--muted-foreground)}.resize-tools-buttons{margin-left:4px;display:flex}.resize-tools-save{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}.resize-tools-close{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}.sidebar{z-index:10;width:0;transition:transform .15s ease-out;position:relative}@media (width>=768px){.sidebar{width:320px;transition:none}}.sidebar-settings{border-radius:50%;width:40px;height:40px;position:absolute;top:8px;right:8px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}@media (width>=768px){.sidebar-settings{display:none}}.sidebar-container{box-sizing:border-box;border-left:1px solid var(--border);position:absolute;inset:0}.sidebar-content{background-color:var(--background);box-sizing:border-box;flex-direction:column;width:320px;height:100%;padding:16px;display:flex;position:absolute;top:0;left:0;overflow-y:auto}@media (width<=767px){.sidebar-content{padding-top:48px}}.sidebar-close-btn{position:absolute;top:8px;right:8px}.sidebar-separator{margin-top:20px;margin-bottom:12px}.sidebar-resize{justify-content:space-between;align-items:center;display:flex}.sidebar-resize-icon{align-items:center;gap:8px;display:flex}.sidebar-resize-size{color:var(--muted-foreground);font-size:14px}.sidebar-crop{flex-direction:column;gap:8px;display:flex}.sidebar-crop-ratios{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.sidebar-preset{flex-direction:column;gap:8px;display:flex}.picedi{font-size:16px;font-family:var(--font-sans);--font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Helvetica, Arial, sans-serif;--color-white:#fff;--color-black:#000;--color-transparent:transparent;--color-red:oklch(63.7% .237 25.331);--color-green:oklch(76.8% .188 151.716);--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--accent-blue:oklch(60.9% .221 251.687);--accent-blue-light:oklch(96% .02 250);--destructive:oklch(57.7% .245 27.325);--success:oklch(76.8% .188 151.716);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--radius:4px;--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 50%, transparent);--overlay-bg-white:color-mix(in srgb, var(--color-white) 80%, transparent)}:host([data-theme=dark]) .picedi,[data-theme=dark] .picedi,[data-theme=dark].picedi{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(92.2% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--accent-blue-light:oklch(25% .06 250);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 75%, transparent)}.picedi h1,.picedi h2,.picedi h3,.picedi h4,.picedi h5,.picedi h6{margin:0;font-weight:600}.text-red{color:var(--color-red)}.bg-red{background-color:var(--color-red)}.bg-green{background-color:var(--color-green)}.text-green{color:var(--color-green)}.mask{background-color:var(--overlay-bg)}.semibold{letter-spacing:.4px;font-weight:600}.bold{letter-spacing:.4px;font-weight:700}.sys{width:100%;height:100%;color:var(--muted-foreground);justify-content:center;align-items:center;display:flex;position:relative}.main{background-color:var(--background);grid-template-rows:auto 1fr;height:100%;display:grid;overflow:hidden}.grid{grid-template-columns:1fr auto;min-height:0;display:grid;position:relative;overflow:hidden}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
+import { createContext as e, forwardRef as t, useCallback as n, useContext as r, useEffect as i, useLayoutEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+//#region \0rolldown/runtime.js
+var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+}), d = /* @__PURE__ */ l(((e) => {
+	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+	function r(e, n, r) {
+		var i = null;
+		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
+		else r = n;
+		return n = r.ref, {
+			$$typeof: t,
+			type: e,
+			key: i,
+			ref: n === void 0 ? null : n,
+			props: r
+		};
+	}
+	e.Fragment = n, e.jsx = r, e.jsxs = r;
+})), f = /* @__PURE__ */ l(((e) => {
+	process.env.NODE_ENV !== "production" && (function() {
+		function t(e) {
+			if (e == null) return null;
+			if (typeof e == "function") return e.$$typeof === O ? null : e.displayName || e.name || null;
+			if (typeof e == "string") return e;
+			switch (e) {
+				case v: return "Fragment";
+				case b: return "Profiler";
+				case y: return "StrictMode";
+				case w: return "Suspense";
+				case T: return "SuspenseList";
+				case ee: return "Activity";
+			}
+			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
+				case _: return "Portal";
+				case S: return e.displayName || "Context";
+				case x: return (e._context.displayName || "Context") + ".Consumer";
+				case C:
+					var n = e.render;
+					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
+				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
+				case D:
+					n = e._payload, e = e._init;
+					try {
+						return t(e(n));
+					} catch {}
+			}
+			return null;
+		}
+		function n(e) {
+			return "" + e;
+		}
+		function r(e) {
+			try {
+				n(e);
+				var t = !1;
+			} catch {
+				t = !0;
+			}
+			if (t) {
+				t = console;
+				var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+				return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
+			}
+		}
+		function i(e) {
+			if (e === v) return "<>";
+			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
+			try {
+				var n = t(e);
+				return n ? "<" + n + ">" : "<...>";
+			} catch {
+				return "<...>";
+			}
+		}
+		function a() {
+			var e = k.A;
+			return e === null ? null : e.getOwner();
+		}
+		function o() {
+			return Error("react-stack-top-frame");
+		}
+		function s(e) {
+			if (A.call(e, "key")) {
+				var t = Object.getOwnPropertyDescriptor(e, "key").get;
+				if (t && t.isReactWarning) return !1;
+			}
+			return e.key !== void 0;
+		}
+		function c(e, t) {
+			function n() {
+				N || (N = !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,
+				configurable: !0
+			});
+		}
+		function l() {
+			var e = t(this.type);
+			return P[e] || (P[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;
+			return e = {
+				$$typeof: g,
+				type: e,
+				key: t,
+				props: n,
+				_owner: r
+			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				value: null
+			}) : Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				get: l
+			}), e._store = {}, Object.defineProperty(e._store, "validated", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: 0
+			}), Object.defineProperty(e, "_debugInfo", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: null
+			}), Object.defineProperty(e, "_debugStack", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: i
+			}), Object.defineProperty(e, "_debugTask", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: a
+			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+		}
+		function f(e, n, i, o, l, u) {
+			var f = n.children;
+			if (f !== void 0) if (o) if (j(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 (A.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}", L[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), L[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;
+			return f && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, i, a(), l, u);
+		}
+		function p(e) {
+			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+		}
+		function m(e) {
+			return typeof e == "object" && !!e && e.$$typeof === g;
+		}
+		var h = u("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"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), O = Symbol.for("react.client.reference"), k = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, A = Object.prototype.hasOwnProperty, j = Array.isArray, M = console.createTask ? console.createTask : function() {
+			return null;
+		};
+		h = { react_stack_bottom_frame: function(e) {
+			return e();
+		} };
+		var N, P = {}, F = h.react_stack_bottom_frame.bind(h, o)(), I = M(i(o)), L = {};
+		e.Fragment = v, e.jsx = function(e, t, n) {
+			var r = 1e4 > k.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : F, r ? M(i(e)) : I);
+		}, e.jsxs = function(e, t, n) {
+			var r = 1e4 > k.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : F, r ? M(i(e)) : I);
+		};
+	})();
+})), p = (/* @__PURE__ */ l(((e, t) => {
+	process.env.NODE_ENV === "production" ? t.exports = d() : t.exports = f();
+})))();
+function m({ size: e = 36, className: t, style: n, color: r = "currentColor" }) {
+	return /* @__PURE__ */ (0, p.jsxs)("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		x: "0px",
+		y: "0px",
+		viewBox: "0 0 80 80",
+		width: e,
+		height: e,
+		fill: r,
+		className: t,
+		style: n,
+		children: [/* @__PURE__ */ (0, p.jsx)("path", {
+			d: "M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1\n		c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1\n		c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1\n		l0.6-0.1l0.3,0l0.1,0l0.1,0l0,0c0.1,0-0.1,0,0.1,0c1.5,0,2.9-0.1,4.5,0.2c0.8,0.1,1.6,0.1,2.4,0.3c0.8,0.2,1.5,0.3,2.3,0.5\n		c3,0.8,5.9,2,8.5,3.6c2.6,1.6,4.9,3.4,6.8,5.4c1,1,1.8,2.1,2.7,3.1c0.8,1.1,1.5,2.1,2.1,3.2c0.6,1.1,1.2,2.1,1.6,3.1\n		c0.4,1,0.9,2,1.2,3c0.3,1,0.6,1.9,0.8,2.7c0.2,0.9,0.3,1.6,0.5,2.4c0.1,0.4,0.1,0.7,0.2,1c0,0.3,0.1,0.6,0.1,0.9\n		c0.1,0.6,0.1,1,0.1,1.4C74,39.6,74,40,74,40c0.2,2.2-1.5,4.1-3.7,4.3s-4.1-1.5-4.3-3.7c0-0.1,0-0.2,0-0.3l0-0.4c0,0,0-0.3,0-0.9\n		c0-0.3,0-0.7,0-1.1c0-0.2,0-0.5,0-0.7c0-0.2-0.1-0.5-0.1-0.8c-0.1-0.6-0.1-1.2-0.2-1.9c-0.1-0.7-0.3-1.4-0.4-2.2\n		c-0.2-0.8-0.5-1.6-0.7-2.4c-0.3-0.8-0.7-1.7-1.1-2.6c-0.5-0.9-0.9-1.8-1.5-2.7c-0.6-0.9-1.2-1.8-1.9-2.7c-1.4-1.8-3.2-3.4-5.2-4.9\n		c-2-1.5-4.4-2.7-6.9-3.6c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7-0.2-1.3-0.3-1.9-0.4c-1.2-0.3-2.8-0.4-4.2-0.5l-2,0c-0.7,0-1.4,0.1-2.1,0.1\n		c-0.7,0.1-1.4,0.1-2,0.3c-0.7,0.1-1.3,0.3-2,0.4c-2.6,0.7-5.2,1.7-7.5,3.1c-2.2,1.4-4.3,2.9-6,4.7c-0.9,0.8-1.6,1.8-2.4,2.7\n		c-0.7,0.9-1.3,1.9-1.9,2.8c-0.5,1-1,1.9-1.4,2.8c-0.4,0.9-0.8,1.8-1,2.6c-0.3,0.9-0.5,1.6-0.7,2.4c-0.2,0.7-0.3,1.4-0.4,2.1\n		c-0.1,0.3-0.1,0.6-0.2,0.9c0,0.3-0.1,0.6-0.1,0.8c0,0.5-0.1,0.9-0.1,1.3C10,39.6,10,40,10,40z",
+			children: /* @__PURE__ */ (0, p.jsx)("animateTransform", {
+				attributeType: "xml",
+				attributeName: "transform",
+				type: "rotate",
+				from: "0 40 40",
+				to: "360 40 40",
+				dur: "0.8s",
+				repeatCount: "indefinite"
+			})
+		}), /* @__PURE__ */ (0, p.jsx)("path", {
+			fill: "currentColor",
+			d: "M62,40.1c0,0,0,0.2-0.1,0.7c0,0.2,0,0.5-0.1,0.8c0,0.2,0,0.3,0,0.5c0,0.2-0.1,0.4-0.1,0.7\n		c-0.1,0.5-0.2,1-0.3,1.6c-0.2,0.5-0.3,1.1-0.5,1.8c-0.2,0.6-0.5,1.3-0.7,1.9c-0.3,0.7-0.7,1.3-1,2.1c-0.4,0.7-0.9,1.4-1.4,2.1\n		c-0.5,0.7-1.1,1.4-1.7,2c-1.2,1.3-2.7,2.5-4.4,3.6c-1.7,1-3.6,1.8-5.5,2.4c-2,0.5-4,0.7-6.2,0.7c-1.9-0.1-4.1-0.4-6-1.1\n		c-1.9-0.7-3.7-1.5-5.2-2.6c-1.5-1.1-2.9-2.3-4-3.7c-0.6-0.6-1-1.4-1.5-2c-0.4-0.7-0.8-1.4-1.2-2c-0.3-0.7-0.6-1.3-0.8-2\n		c-0.2-0.6-0.4-1.2-0.6-1.8c-0.1-0.6-0.3-1.1-0.4-1.6c-0.1-0.5-0.1-1-0.2-1.4c-0.1-0.9-0.1-1.5-0.1-2c0-0.5,0-0.7,0-0.7\n		s0,0.2,0.1,0.7c0.1,0.5,0,1.1,0.2,2c0.1,0.4,0.2,0.9,0.3,1.4c0.1,0.5,0.3,1,0.5,1.6c0.2,0.6,0.4,1.1,0.7,1.8\n		c0.3,0.6,0.6,1.2,0.9,1.9c0.4,0.6,0.8,1.3,1.2,1.9c0.5,0.6,1,1.3,1.6,1.8c1.1,1.2,2.5,2.3,4,3.2c1.5,0.9,3.2,1.6,5,2.1\n		c1.8,0.5,3.6,0.6,5.6,0.6c1.8-0.1,3.7-0.4,5.4-1c1.7-0.6,3.3-1.4,4.7-2.4c1.4-1,2.6-2.1,3.6-3.3c0.5-0.6,0.9-1.2,1.3-1.8\n		c0.4-0.6,0.7-1.2,1-1.8c0.3-0.6,0.6-1.2,0.8-1.8c0.2-0.6,0.4-1.1,0.5-1.7c0.1-0.5,0.2-1,0.3-1.5c0.1-0.4,0.1-0.8,0.1-1.2\n		c0-0.2,0-0.4,0.1-0.5c0-0.2,0-0.4,0-0.5c0-0.3,0-0.6,0-0.8c0-0.5,0-0.7,0-0.7c0-1.1,0.9-2,2-2s2,0.9,2,2C62,40,62,40.1,62,40.1z",
+			children: /* @__PURE__ */ (0, p.jsx)("animateTransform", {
+				attributeType: "xml",
+				attributeName: "transform",
+				type: "rotate",
+				from: "0 40 40",
+				to: "-360 40 40",
+				dur: "0.6s",
+				repeatCount: "indefinite"
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/shared/components/ImageEditor/provider/initialState.ts
+var h = (e, t, n, r) => ({
+	history: {
+		pointer: 0,
+		items: [{
+			name: "Initial",
+			base64: r,
+			width: t,
+			height: n
+		}]
+	},
+	currentAction: null,
+	extension: e,
+	sidebar: !1
+}), g = e(void 0), _ = ({ children: e, base64: t, width: n, height: r, ext: i }) => {
+	let [a, o] = c(h(i, n, r, t)), s = () => a.currentAction, l = (e) => o((t) => ({
+		...t,
+		currentAction: e
+	})), u = (e) => o((t) => {
+		let n = t.history.pointer + 1, r = [...t.history.items.slice(0, n), e];
+		return {
+			...t,
+			currentAction: null,
+			history: {
+				items: r,
+				pointer: n
+			}
+		};
+	}), d = () => a.history.items.at(a.history.pointer), f = () => o((e) => ({
+		...e,
+		history: h(i, n, r, t).history
+	})), m = () => o((e) => {
+		let t = e.history.items.at(e.history.pointer);
+		return {
+			...e,
+			history: {
+				items: [t],
+				pointer: 0
+			}
+		};
+	}), _ = () => o((e) => e.history.pointer <= 0 ? e : {
+		...e,
+		history: {
+			...e.history,
+			pointer: e.history.pointer - 1
+		}
+	}), v = () => o((e) => e.history.pointer >= e.history.items.length - 1 ? e : {
+		...e,
+		history: {
+			...e.history,
+			pointer: e.history.pointer + 1
+		}
+	}), y = () => a.sidebar, b = (e) => o((t) => ({
+		...t,
+		sidebar: e
+	}));
+	return /* @__PURE__ */ (0, p.jsx)(g, {
+		value: {
+			...a,
+			getCurrentAction: s,
+			setCurrentAction: l,
+			addToHistory: u,
+			resetHistory: f,
+			resetHistoryAfterSave: m,
+			undo: _,
+			redo: v,
+			getLastHistoryItem: d,
+			getSidebar: y,
+			setSidebar: b
+		},
+		children: e
+	});
+}, v = {
+	"image/jpeg": "jpg",
+	"image/jpg": "jpg",
+	"image/png": "png",
+	"image/gif": "gif",
+	"image/webp": "webp"
+}, y = (e) => {
+	let [t, n] = c({
+		loading: !0,
+		error: null,
+		width: 0,
+		height: 0,
+		extension: null,
+		base64: null
+	});
+	return i(() => {
+		let t = !0;
+		return (async () => {
+			try {
+				let r = await fetch(e);
+				if (!r.ok) throw Error(`HTTP error! Status: ${r.status}`);
+				let i = (r.headers.get("content-type") || "").split(";")[0].toLowerCase().trim(), a = i.startsWith("image/"), o = v[i] || "unknown";
+				if (!a) {
+					t && n((e) => ({
+						...e,
+						loading: !1,
+						error: "The requested resource is not a valid image.",
+						extension: o
+					}));
+					return;
+				}
+				let s = await r.blob(), c = await new Promise((e, t) => {
+					let n = new FileReader();
+					n.onloadend = () => e(n.result), n.onerror = () => t(/* @__PURE__ */ Error("Failed to read image data stream")), n.readAsDataURL(s);
+				}), l = await new Promise((e, t) => {
+					let n = new Image();
+					n.src = c, n.onload = () => e({
+						width: n.naturalWidth,
+						height: n.naturalHeight
+					}), n.onerror = () => t(/* @__PURE__ */ Error("Failed to parse image dimensions"));
+				});
+				t && n({
+					loading: !1,
+					error: null,
+					width: l.width,
+					height: l.height,
+					extension: o,
+					base64: c
+				});
+			} catch (e) {
+				t && n((t) => ({
+					...t,
+					loading: !1,
+					error: e instanceof Error ? e.message : "An error occurred during extraction."
+				}));
+			}
+		})(), () => {
+			t = !1;
+		};
+	}, [e]), t;
+}, b = () => {
+	let e = s(null), t = n((e) => {
+		let t = e.match(/^data:(image\/[a-zA-Z+.-]+);base64,(.+)$/);
+		if (!t) throw Error("Invalid Base64 image format");
+		let n = t[1], r = t[2];
+		return n === "image/gif" && (n = "image/png"), {
+			mimeType: n,
+			rawData: r
+		};
+	}, []), r = n(async (e) => {
+		let { mimeType: n, rawData: r } = t(e), i = atob(r), a = new Uint8Array(i.length);
+		for (let e = 0; e < i.length; e++) a[e] = i.charCodeAt(e);
+		let o = new Blob([a], { type: n });
+		return {
+			bitmap: await createImageBitmap(o),
+			mimeType: n
+		};
+	}, [t]), i = n((t) => {
+		e.current ||= document.createElement("canvas");
+		let n = e.current, r = t === "image/png" || t === "image/webp";
+		return {
+			canvas: n,
+			ctx: n.getContext("2d", { alpha: r })
+		};
+	}, []), a = n((e, t) => t === "image/jpeg" || t === "image/webp" ? e.toDataURL(t, .85) : e.toDataURL(t), []);
+	return {
+		resize: n(async (e, t, n) => {
+			let { bitmap: o, mimeType: s } = await r(e), { canvas: c, ctx: l } = i(s);
+			return c.width = t, c.height = n, l && (l.clearRect(0, 0, t, n), l.drawImage(o, 0, 0, t, n)), o.close(), a(c, s);
+		}, [
+			r,
+			i,
+			a
+		]),
+		crop: n(async (e, t, n, o, s) => {
+			let { bitmap: c, mimeType: l } = await r(e), { canvas: u, ctx: d } = i(l);
+			return u.width = o, u.height = s, d && (d.clearRect(0, 0, o, s), d.drawImage(c, t, n, o, s, 0, 0, o, s)), c.close(), a(u, l);
+		}, [
+			r,
+			i,
+			a
+		]),
+		flip: n(async (e, t, n) => {
+			let { bitmap: o, mimeType: s } = await r(e), { canvas: c, ctx: l } = i(s);
+			return c.width = o.width, c.height = o.height, l && (l.clearRect(0, 0, c.width, c.height), l.save(), l.translate(t ? o.width : 0, n ? o.height : 0), l.scale(t ? -1 : 1, n ? -1 : 1), l.drawImage(o, 0, 0), l.restore()), o.close(), a(c, s);
+		}, [
+			r,
+			i,
+			a
+		]),
+		rotate: n(async (e, t) => {
+			let { bitmap: n, mimeType: o } = await r(e), { canvas: s, ctx: c } = i(o);
+			return s.width = n.width, s.height = n.height, c && (c.clearRect(0, 0, s.width, s.height), c.save(), c.translate(n.width / 2, n.height / 2), c.rotate(t * Math.PI / 180), c.drawImage(n, -n.width / 2, -n.height / 2), c.restore()), n.close(), a(s, o);
+		}, [
+			r,
+			i,
+			a
+		]),
+		filter: n(async (e, t) => {
+			let { bitmap: n, mimeType: o } = await r(e), { canvas: s, ctx: c } = i(o);
+			return s.width = n.width, s.height = n.height, c && (c.filter = Object.entries(t).map(([e, t]) => `${e}(${t}%)`).join(" "), c.drawImage(n, 0, 0)), n.close(), a(s, o);
+		}, [
+			r,
+			i,
+			a
+		])
+	};
+}, x = () => {
+	if (typeof window > "u" || !window.navigator) return null;
+	let e = window.navigator.userAgent.toLowerCase();
+	return /android/.test(e) ? "android" : /iphone|ipad|ipod/.test(e) ? "ios" : /windows phone/.test(e) ? "windows-phone" : /blackberry|bb10/.test(e) ? "blackberry" : /opera mini/.test(e) ? "opera-mini" : /mobile/.test(e) ? "mobile" : null;
+}, S = () => {
+	let [e] = c(() => x());
+	return e;
+}, C = {
+	sm: 640,
+	md: 768,
+	lg: 1024,
+	xl: 1280
+};
+//#endregion
+//#region src/shared/components/ImageEditor/hooks/useBellow.tsx
+function w(e) {
+	let [t, n] = c(() => window.innerWidth < C[e]);
+	return i(() => {
+		function t() {
+			n(window.innerWidth < C[e]);
+		}
+		return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+	}, [e]), t;
+}
+//#endregion
+//#region src/shared/components/ImageEditor/assets/icons.tsx
+var T = {
+	xmlns: "http://w3.org",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+}, E = (e) => /* @__PURE__ */ (0, p.jsx)("svg", {
+	...T,
+	...e,
+	children: /* @__PURE__ */ (0, p.jsx)("path", { d: "M20 6 9 17l-5-5" })
+}), D = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	...T,
+	...e,
+	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "m6 6 12 12" })]
+}), ee = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	...T,
+	...e,
+	children: [/* @__PURE__ */ (0, p.jsx)("rect", {
+		width: "18",
+		height: "11",
+		x: "3",
+		y: "11",
+		rx: "2",
+		ry: "2"
+	}), /* @__PURE__ */ (0, p.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })]
+}), O = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	...T,
+	...e,
+	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "m12 19-7-7 7-7" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "M19 12H5" })]
+}), k = (e) => /* @__PURE__ */ (0, p.jsx)("svg", {
+	...T,
+	...e,
+	children: /* @__PURE__ */ (0, p.jsx)("path", { d: "m6 9 6 6 6-6" })
+}), A = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	...T,
+	...e,
+	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M3 7v6h6" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })]
+}), j = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	...T,
+	...e,
+	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M21 7v6h-6" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" })]
+}), M = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	...T,
+	...e,
+	children: [/* @__PURE__ */ (0, p.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, p.jsx)("circle", {
+		cx: "12",
+		cy: "12",
+		r: "3"
+	})]
+}), N = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	...T,
+	...e,
+	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M6 2v14a2 2 0 0 0 2 2h14" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "M18 22V8a2 2 0 0 0-2-2H2" })]
+}), P = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	...T,
+	...e,
+	children: [
+		/* @__PURE__ */ (0, p.jsx)("rect", {
+			width: "18",
+			height: "18",
+			x: "3",
+			y: "3",
+			rx: "2",
+			ry: "2"
+		}),
+		/* @__PURE__ */ (0, p.jsx)("circle", {
+			cx: "9",
+			cy: "9",
+			r: "2"
+		}),
+		/* @__PURE__ */ (0, p.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+	]
+}), F = (e) => /* @__PURE__ */ (0, p.jsx)("svg", {
+	...T,
+	...e,
+	children: /* @__PURE__ */ (0, p.jsx)("rect", {
+		width: "18",
+		height: "18",
+		x: "3",
+		y: "3",
+		rx: "2"
+	})
+}), I = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	...T,
+	...e,
+	children: [
+		/* @__PURE__ */ (0, p.jsx)("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
+		/* @__PURE__ */ (0, p.jsx)("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
+		/* @__PURE__ */ (0, p.jsx)("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
+		/* @__PURE__ */ (0, p.jsx)("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
+		/* @__PURE__ */ (0, p.jsx)("rect", {
+			width: "10",
+			height: "8",
+			x: "7",
+			y: "8",
+			rx: "1"
+		})
+	]
+}), L = (e) => /* @__PURE__ */ (0, p.jsx)("svg", {
+	...T,
+	...e,
+	children: /* @__PURE__ */ (0, p.jsx)("path", {
+		d: "M21 12a9 9 0 1 1-6.219-8.56",
+		children: /* @__PURE__ */ (0, p.jsx)("animateTransform", {
+			attributeType: "xml",
+			attributeName: "transform",
+			type: "rotate",
+			from: "0 12 12",
+			to: "360 12 12",
+			dur: "0.8s",
+			repeatCount: "indefinite"
+		})
+	})
+}), R = () => {
+	let e = r(g);
+	if (!e) throw Error("useImageEditorContext must be used within an ImageEditorProvider");
+	return e;
+}, z = t(({ className: e = "", variant: t = "default", children: n, ...r }, i) => /* @__PURE__ */ (0, p.jsx)("button", {
+	ref: i,
+	className: `btn ${`btn-${t}`} ${e}`.trim(),
+	...r,
+	children: n
+})), B = t(({ className: e = "", active: t = !1, icon: n, label: r, ...i }, a) => /* @__PURE__ */ (0, p.jsxs)("button", {
+	ref: a,
+	type: "button",
+	"aria-pressed": t,
+	className: `btn-crop ${e}`.trim(),
+	...i,
+	children: [n, /* @__PURE__ */ (0, p.jsx)("span", {
+		className: "semibold",
+		children: r
+	})]
+}));
+B.displayName = "ButtonCrop";
+//#endregion
+//#region src/shared/components/ImageEditor/ui/separator/Separator.tsx
+var V = t(({ className: e = "", orientation: t = "horizontal", ...n }, r) => /* @__PURE__ */ (0, p.jsx)("hr", {
+	ref: r,
+	role: "separator",
+	"aria-orientation": t,
+	"data-orientation": t,
+	className: `separator ${e}`.trim(),
+	...n
+}));
+V.displayName = "Separator";
+//#endregion
+//#region src/shared/components/ImageEditor/ui/select/Select.tsx
+var te = ({ items: e, value: t, onChange: n, placeholder: r = "Select an option", className: l = "", renderOption: u }) => {
+	let [d, f] = c(!1), m = s(null), h = s(null), g = s(null), _ = o(() => {
+		let t = (e) => e.reduce((e, n) => n.options ? [...e, ...t(n.options.map((e) => ({
+			...e,
+			fullName: `${n.label} ${e.label}`
+		})))] : [...e, n], []);
+		return t(e);
+	}, [e]).find((e) => e.value === t);
+	i(() => {
+		let e = (e) => {
+			m.current && !m.current.contains(e.target) && f(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []), a(() => {
+		if (!d || !h.current || !g.current) return;
+		let e = m.current?.closest(".picedi.main")?.getBoundingClientRect(), t = h.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) => {
+		n(e), f(!1);
+	};
+	return /* @__PURE__ */ (0, p.jsxs)("div", {
+		ref: m,
+		className: `select-wrapper ${l}`.trim(),
+		"data-state": d ? "open" : "closed",
+		children: [/* @__PURE__ */ (0, p.jsxs)("button", {
+			ref: h,
+			type: "button",
+			className: "select-trigger",
+			onClick: () => f(!d),
+			children: [/* @__PURE__ */ (0, p.jsx)("span", { children: _ ? _.fullName : r }), /* @__PURE__ */ (0, p.jsx)(k, { className: "select-trigger-arrow" })]
+		}), /* @__PURE__ */ (0, p.jsx)("div", {
+			ref: g,
+			className: "select-content",
+			children: e.map((e, n) => e.options ? /* @__PURE__ */ (0, p.jsxs)("div", { children: [/* @__PURE__ */ (0, p.jsx)("div", {
+				className: "select-group-label semibold",
+				children: e.label
+			}), e.options.map((e) => /* @__PURE__ */ (0, p.jsxs)("div", {
+				className: "select-item",
+				onClick: () => v(e.value),
+				children: [u ? u(e) : /* @__PURE__ */ (0, p.jsx)("span", {
+					className: "select-item-left",
+					children: e.label
+				}), /* @__PURE__ */ (0, p.jsxs)("div", {
+					className: "select-item-addon",
+					children: [
+						e.rightLabel && /* @__PURE__ */ (0, p.jsx)("span", { children: e.rightLabel }),
+						t === e.value && /* @__PURE__ */ (0, p.jsx)(E, { className: "select-item-check" }),
+						t !== e.value && /* @__PURE__ */ (0, p.jsx)("b", {})
+					]
+				})]
+			}, e.value))] }, `group-${n}`) : /* @__PURE__ */ (0, p.jsxs)("div", {
+				className: "select-item",
+				onClick: () => v(e.value),
+				children: [u ? u(e) : /* @__PURE__ */ (0, p.jsxs)("span", {
+					className: "select-item-left",
+					children: [e.label, "1"]
+				}), t === e.value && /* @__PURE__ */ (0, p.jsx)(E, { className: "select-item-check" })]
+			}, e.value))
+		})]
+	});
+}, ne = t(({ className: e = "", type: t = "text", hideArrows: n = !0, ...r }, i) => /* @__PURE__ */ (0, p.jsx)("input", {
+	ref: i,
+	type: t,
+	className: `input ${t === "number" && n ? "input-number-clean" : ""} ${e}`.trim(),
+	...r
+}));
+ne.displayName = "Input";
+//#endregion
+//#region src/shared/components/ImageEditor/ui/input-pixel/InputPixel.tsx
+var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ */ (0, p.jsxs)("div", {
+	className: `input-pixel-container ${t}`.trim(),
+	style: n,
+	children: [
+		/* @__PURE__ */ (0, p.jsx)("span", {
+			className: "input-pixel-legend",
+			children: e
+		}),
+		/* @__PURE__ */ (0, p.jsx)(ne, {
+			ref: i,
+			type: "number",
+			...r
+		}),
+		/* @__PURE__ */ (0, p.jsx)("span", {
+			className: "input-pixel-suffix",
+			children: "px"
+		})
+	]
+})), re = ({ onBack: e, onSave: t }) => {
+	let [n, r] = c(!1), { history: i, undo: a, redo: o, resetHistory: s, resetHistoryAfterSave: l, getLastHistoryItem: u } = R(), { base64: d } = u(), f = i.items.length > 1 && !n, m = i.pointer === 0, h = i.pointer === i.items.length - 1, g = i.items.length < 2 || n;
+	return /* @__PURE__ */ (0, p.jsxs)("div", {
+		className: "header",
+		children: [/* @__PURE__ */ (0, p.jsx)(z, {
+			variant: "ghost",
+			className: "btn-rect",
+			onClick: e,
+			children: /* @__PURE__ */ (0, p.jsx)(O, {})
+		}), /* @__PURE__ */ (0, p.jsxs)("div", {
+			className: "header-tools",
+			children: [
+				f && /* @__PURE__ */ (0, p.jsxs)("div", {
+					className: "header-history",
+					children: [
+						/* @__PURE__ */ (0, p.jsx)(z, {
+							variant: "outline",
+							disabled: m,
+							className: "btn-rect",
+							onClick: a,
+							children: /* @__PURE__ */ (0, p.jsx)(A, {})
+						}),
+						/* @__PURE__ */ (0, p.jsxs)("div", {
+							className: "header-history-text",
+							children: [
+								i.pointer + 1,
+								"/",
+								i.items.length
+							]
+						}),
+						/* @__PURE__ */ (0, p.jsx)(z, {
+							variant: "outline",
+							disabled: h,
+							className: "btn-rect",
+							onClick: o,
+							children: /* @__PURE__ */ (0, p.jsx)(j, {})
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, p.jsx)(z, {
+					variant: "outline",
+					disabled: n,
+					onClick: s,
+					children: "Reset"
+				}),
+				/* @__PURE__ */ (0, p.jsxs)(z, {
+					disabled: g,
+					onClick: async () => {
+						if (d) {
+							r(!0);
+							try {
+								await t(d), l();
+							} finally {
+								r(!1);
+							}
+						}
+					},
+					children: [n ? /* @__PURE__ */ (0, p.jsx)(L, {}) : /* @__PURE__ */ (0, p.jsx)(E, {}), "Save"]
+				})
+			]
+		})]
+	});
+}, U = 32, W = (e) => ({
+	x: e.offsetLeft,
+	y: e.offsetTop,
+	w: e.offsetWidth,
+	h: e.offsetHeight
+}), ie = (e, t, n, r, i, a, o, s) => {
+	let { x: c } = o, { y: l, w: u, h: d } = o;
+	if (e) u += r - n, u + c > i && (u = i - c), u < U && (u = U);
+	else {
+		let e = r - n, o = Math.round(e / t);
+		if (u += e, d += o, l -= o / 2, l < 0 || d + l > a || u + c > i || u < U || d < U) return W(s);
+	}
+	return {
+		x: c,
+		y: l,
+		w: u,
+		h: d
+	};
+}, ae = (e, t, n, r, i, a, o, s) => {
+	let { x: c, y: l, w: u, h: d } = o;
+	if (e) {
+		let e = i - o.w - o.x;
+		c += r - n, c < 0 && (c = 0), u = i - c - e, u < U && (u = U, c = i - e - U);
+	} else {
+		let e = r - n, i = Math.round(e / t);
+		if (u -= e, d -= i, c += e, l += i / 2, l < 0 || c < 0 || d + l > a || u < U || d < U) return W(s);
+	}
+	return {
+		x: c,
+		y: l,
+		w: u,
+		h: d
+	};
+}, oe = (e, t, n, r, i, a, o, s) => {
+	let { x: c, y: l, w: u, h: d } = o, f = a - d - l;
+	if (e) l += r - n, l < 0 && (l = 0), d = a - l - f, d < U && (d = U, l = a - f - U);
+	else {
+		let e = r - n, a = Math.round(e * t);
+		if (d -= e, u -= a, c += a / 2, l += e, l < 0 || c < 0 || u + c > i || u < U || d < U) return W(s);
+	}
+	return {
+		x: c,
+		y: l,
+		w: u,
+		h: d
+	};
+}, se = (e, t, n, r, i, a, o, s) => {
+	let { y: c } = o, { x: l, w: u, h: d } = o;
+	if (e) d += r - n, d + c > a && (d = a - c), d < U && (d = U);
+	else {
+		let e = r - n, o = Math.round(e * t);
+		if (d += e, u += o, l -= o / 2, d + c > a || l < 0 || u + l > i || u < U || d < U) return W(s);
+	}
+	return {
+		x: l,
+		y: c,
+		w: u,
+		h: d
+	};
+}, ce = (e, t, n, r, i, a, o, s, c, l) => {
+	let { x: u, y: d, w: f, h: p } = c;
+	if (e) {
+		let e = o - c.w - c.x;
+		u += i - n, u < 0 && (u = 0), f = o - u - e, f < U && (f = U, u = o - e - U);
+		let t = s - p - d;
+		d += a - r, d < 0 && (d = 0), p = s - d - t, p < U && (p = U, d = s - t - U);
+	} else {
+		if (t >= 1) {
+			let e = i - n, r = Math.round(e / t);
+			f -= e, p -= r, u += e, d += r;
+		} else {
+			let e = a - r, n = Math.round(e * t);
+			f -= n, p -= e, u += n, d += e;
+		}
+		if (u < 0 || d < 0 || f < U || p < U) return W(l);
+	}
+	return {
+		x: u,
+		y: d,
+		w: f,
+		h: p
+	};
+}, le = (e, t, n, r, i, a, o, s, c, l) => {
+	let { x: u } = c, { y: d, w: f, h: p } = c;
+	if (e) {
+		f += i - n, f + u > o && (f = o - u), f < U && (f = U);
+		let e = s - p - d;
+		d += a - r, d < 0 && (d = 0), p = s - d - e, p < U && (p = U, d = s - e - U);
+	} else {
+		if (t > 1) {
+			let e = i - n, r = Math.round(e / t);
+			f += e, p += r, d -= r;
+		} else {
+			let e = a - r, n = Math.round(e * t);
+			f -= n, p -= e, d += e;
+		}
+		if (f + u > o || d < 0 || f < U || p < U) return W(l);
+	}
+	return {
+		x: u,
+		y: d,
+		w: f,
+		h: p
+	};
+}, ue = (e, t, n, r, i, a, o, s, c, l) => {
+	let { y: u } = c, { x: d, w: f, h: p } = c;
+	if (e) {
+		p += a - r, p + u > s && (p = s - u), p < U && (p = U);
+		let e = o - c.w - c.x;
+		d += i - n, d < 0 && (d = 0), f = o - d - e, f < U && (f = U, d = o - e - U);
+	} else {
+		if (t >= 1) {
+			let e = i - n, r = Math.round(e / t);
+			f -= e, p -= r, d += e;
+		} else {
+			let e = a - r, n = Math.round(e * t);
+			f += n, p += e, d -= n;
+		}
+		if (p + u > s || d < 0 || f < U || p < U) return W(l);
+	}
+	return {
+		x: d,
+		y: u,
+		w: f,
+		h: p
+	};
+}, de = (e, t, n, r, i, a, o, s, c, l) => {
+	let { x: u, y: d } = c, { w: f, h: p } = c;
+	if (e) f += i - n, f + u > o && (f = o - u), f < U && (f = U), p += a - r, p + d > s && (p = s - d), p < U && (p = U);
+	else {
+		if (t >= 1) {
+			let e = i - n, r = Math.round(e / t);
+			f += e, p += r;
+		} else {
+			let e = a - r, n = Math.round(e * t);
+			f += n, p += e;
+		}
+		if (p + d > s || f + u > o || f < U || p < U) return W(l);
+	}
+	return {
+		x: u,
+		y: d,
+		w: f,
+		h: p
+	};
+}, fe = (e, t, n, r, i, a, o, s, c, l, u) => e === "r" ? ie(t, n, r, a, s, c, l, u) : e === "l" ? ae(t, n, r, a, s, c, l, u) : e === "t" ? oe(t, n, i, o, s, c, l, u) : e === "b" ? se(t, n, i, o, s, c, l, u) : e === "tl" ? ce(t, n, r, i, a, o, s, c, l, u) : e === "tr" ? le(t, n, r, i, a, o, s, c, l, u) : e === "bl" ? ue(t, n, r, i, a, o, s, c, l, u) : e === "br" ? de(t, n, r, i, a, o, s, c, l, u) : {
+	x: 0,
+	y: 0,
+	w: 0,
+	h: 0
+}, G = (e, t, n) => {
+	let r = .1, 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;
+	return {
+		x: (t - a) / 2 / t * 100,
+		y: (n - o) / 2 / n * 100,
+		w: s,
+		h: c,
+		xPx: Math.round((t - a) / 2),
+		yPx: Math.round((n - o) / 2),
+		wPx: a,
+		hPx: o
+	};
+}, pe = () => {
+	let { getCurrentAction: e, getLastHistoryItem: t } = R(), n = e(), r = S(), i = s(null), a = s(null), { handleCropStart: o } = be({
+		imgRef: i,
+		cropRef: a
+	});
+	if (!n || n.name !== "crop") return null;
+	let { width: c, height: l, base64: u } = t(), { x: d, y: f, w: m, h } = G(n.args.ratio, c, l);
+	return /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [/* @__PURE__ */ (0, p.jsx)("img", {
+		ref: i,
+		src: u,
+		alt: "Image",
+		className: "crop-image",
+		style: { clipPath: `xywh(${d}% ${f}% ${m}% ${h}%)` }
+	}), /* @__PURE__ */ (0, p.jsxs)("div", {
+		ref: a,
+		className: "crop-box",
+		style: {
+			width: `${m}%`,
+			height: `${h}%`,
+			top: `${f}%`,
+			left: `${d}%`
+		},
+		children: [/* @__PURE__ */ (0, p.jsx)(ge, {}), r ? /* @__PURE__ */ (0, p.jsx)(xe, { onMouseDown: o }) : /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [/* @__PURE__ */ (0, p.jsx)(he, { onMouseDown: o }), /* @__PURE__ */ (0, p.jsx)(_e, { onMouseDown: o })] })]
+	})] });
+}, K = new EventTarget(), q = (e) => {
+	let t = new CustomEvent("crop-update", { detail: e });
+	K.dispatchEvent(t);
+}, me = () => {
+	let { setCurrentAction: e, getCurrentAction: t, getLastHistoryItem: n, addToHistory: r, setSidebar: a } = R(), { crop: o, resize: l } = b(), [u, d] = c(!1), f = t(), { base64: m, width: h, height: g } = n(), _ = s(null), v = s(null), y = s(null), x = s(null), S = s(null);
+	return i(() => {
+		if (f?.name !== "crop") return;
+		let { x: e, y: t, w: n, h: r } = G(f.args.ratio, h, g), i = Math.round(e / 100 * h), a = Math.round(t / 100 * g), o = Math.round(n / 100 * h), s = Math.round(r / 100 * g);
+		_.current && (_.current.textContent = i.toString()), v.current && (v.current.textContent = a.toString()), y.current && (y.current.textContent = o.toString()), x.current && (x.current.textContent = s.toString()), S.current = {
+			x: i,
+			y: a,
+			w: o,
+			h: s
+		};
+		let c = (e) => {
+			let t = e, { x: n, y: r, w: i, h: a } = t.detail;
+			S.current = t.detail, _.current && (_.current.textContent = n.toString()), v.current && (v.current.textContent = r.toString()), y.current && (y.current.textContent = i.toString()), x.current && (x.current.textContent = a.toString());
+		};
+		return K.addEventListener("crop-update", c), () => {
+			K.removeEventListener("crop-update", c);
+		};
+	}, [
+		f,
+		h,
+		g
+	]), /* @__PURE__ */ (0, p.jsxs)("div", {
+		className: "crop-tools",
+		children: [
+			/* @__PURE__ */ (0, p.jsxs)("div", {
+				className: "crop-tools-info",
+				children: [/* @__PURE__ */ (0, p.jsx)("div", {
+					className: "crop-tools-info-label",
+					children: "left"
+				}), /* @__PURE__ */ (0, p.jsx)("div", {
+					className: "crop-tools-info-value semibold",
+					ref: _
+				})]
+			}),
+			/* @__PURE__ */ (0, p.jsxs)("div", {
+				className: "crop-tools-info",
+				children: [/* @__PURE__ */ (0, p.jsx)("div", {
+					className: "crop-tools-info-label",
+					children: "top"
+				}), /* @__PURE__ */ (0, p.jsx)("div", {
+					className: "crop-tools-info-value semibold",
+					ref: v
+				})]
+			}),
+			/* @__PURE__ */ (0, p.jsxs)("div", {
+				className: "crop-tools-info",
+				children: [/* @__PURE__ */ (0, p.jsx)("div", {
+					className: "crop-tools-info-label",
+					children: "width"
+				}), /* @__PURE__ */ (0, p.jsx)("div", {
+					className: "crop-tools-info-value semibold",
+					ref: y
+				})]
+			}),
+			/* @__PURE__ */ (0, p.jsxs)("div", {
+				className: "crop-tools-info",
+				children: [/* @__PURE__ */ (0, p.jsx)("div", {
+					className: "crop-tools-info-label",
+					children: "height"
+				}), /* @__PURE__ */ (0, p.jsx)("div", {
+					className: "crop-tools-info-value semibold",
+					ref: x
+				})]
+			}),
+			/* @__PURE__ */ (0, p.jsx)(V, { orientation: "vertical" }),
+			/* @__PURE__ */ (0, p.jsx)(z, {
+				variant: "ghost",
+				className: "text-green",
+				style: {
+					height: "36px",
+					width: "36px"
+				},
+				disabled: u,
+				onClick: async () => {
+					if (!(!f || f.name !== "crop")) try {
+						if (d(!0), !S.current) return;
+						let { x: e, y: t, w: n, h: i } = S.current, { preset: s } = f.args, c = await o(m, e, t, n, i);
+						if (s) {
+							let { w: e, h: t } = s;
+							c = await l(c, e, t);
+						}
+						r({
+							name: "Crop",
+							base64: c,
+							width: s ? s.w : S.current.w,
+							height: s ? s.h : S.current.h
+						}), a(!0);
+					} catch (e) {
+						console.error("Failed to process image:", e);
+					} finally {
+						d(!1);
+					}
+				},
+				children: u ? /* @__PURE__ */ (0, p.jsx)(L, {}) : /* @__PURE__ */ (0, p.jsx)(E, {})
+			}),
+			/* @__PURE__ */ (0, p.jsx)(V, { orientation: "vertical" }),
+			/* @__PURE__ */ (0, p.jsx)(z, {
+				variant: "ghost",
+				style: {
+					height: "36px",
+					width: "36px"
+				},
+				disabled: u,
+				onClick: () => {
+					e(null), a(!0);
+				},
+				children: /* @__PURE__ */ (0, p.jsx)(D, { className: "text-red" })
+			})
+		]
+	});
+}, he = ({ onMouseDown: e }) => /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [
+	/* @__PURE__ */ (0, p.jsx)("span", {
+		className: "crop-b crop-b-t",
+		onMouseDown: (t) => e(t, "t", "ns")
+	}),
+	/* @__PURE__ */ (0, p.jsx)("span", {
+		className: "crop-b crop-b-r",
+		onMouseDown: (t) => e(t, "r", "ew")
+	}),
+	/* @__PURE__ */ (0, p.jsx)("span", {
+		className: "crop-b crop-b-b",
+		onMouseDown: (t) => e(t, "b", "ns")
+	}),
+	/* @__PURE__ */ (0, p.jsx)("span", {
+		className: "crop-b crop-b-l",
+		onMouseDown: (t) => e(t, "l", "ew")
+	})
+] }), ge = () => /* @__PURE__ */ (0, p.jsxs)("div", {
+	className: "crop-l-box",
+	children: [/* @__PURE__ */ (0, p.jsx)("span", { className: "crop-l crop-l-v" }), /* @__PURE__ */ (0, p.jsx)("span", { className: "crop-l crop-l-h" })]
+}), _e = ({ onMouseDown: e }) => /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [
+	/* @__PURE__ */ (0, p.jsx)("span", {
+		className: "crop-ps crop-ps-tl",
+		onMouseDown: (t) => e(t, "tl", "nwse")
+	}),
+	/* @__PURE__ */ (0, p.jsx)("span", {
+		className: "crop-ps crop-ps-t",
+		onMouseDown: (t) => e(t, "t", "ns")
+	}),
+	/* @__PURE__ */ (0, p.jsx)("span", {
+		className: "crop-ps crop-ps-tr",
+		onMouseDown: (t) => e(t, "tr", "nesw")
+	}),
+	/* @__PURE__ */ (0, p.jsx)("span", {
+		className: "crop-ps crop-ps-r",
+		onMouseDown: (t) => e(t, "r", "ew")
+	}),
+	/* @__PURE__ */ (0, p.jsx)("span", {
+		className: "crop-ps crop-ps-br",
+		onMouseDown: (t) => e(t, "br", "nwse")
+	}),
+	/* @__PURE__ */ (0, p.jsx)("span", {
+		className: "crop-ps crop-ps-b",
+		onMouseDown: (t) => e(t, "b", "ns")
+	}),
+	/* @__PURE__ */ (0, p.jsx)("span", {
+		className: "crop-ps crop-ps-bl",
+		onMouseDown: (t) => e(t, "bl", "nesw")
+	}),
+	/* @__PURE__ */ (0, p.jsx)("span", {
+		className: "crop-ps crop-ps-l",
+		onMouseDown: (t) => e(t, "l", "ew")
+	})
+] });
+//#endregion
+//#region src/shared/components/ImageEditor/crop/useCropInteraction.ts
+function J(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function Y(e, t) {
+	return e / t * 100;
+}
+function ve(e, t, n, r, i) {
+	e.style.left = `${t}%`, e.style.top = `${n}%`, e.style.width = `${r}%`, e.style.height = `${i}%`;
+}
+function ye(e, t, n, r, i) {
+	e.style.clipPath = `xywh(${t}% ${n}% ${r}% ${i}%)`;
+}
+var be = ({ imgRef: e, cropRef: t }) => {
+	let { getCurrentAction: n, getLastHistoryItem: r } = R(), a = S(), o = s(null), c = s(""), l = s({
+		xPct: 0,
+		yPct: 0
+	}), u = s({
+		x: 0,
+		y: 0,
+		w: 0,
+		h: 0
+	});
+	return i(() => {
+		let i = (e) => {
+			if (t.current) {
+				let e = t.current.parentElement;
+				e && (l.current = {
+					xPct: Y(t.current.offsetLeft, e.offsetWidth),
+					yPct: Y(t.current.offsetTop, e.offsetHeight)
+				});
+			}
+			let n = "clientX" in e ? e.clientX : e.touches[0].clientX, r = "clientY" in e ? e.clientY : e.touches[0].clientY;
+			o.current = {
+				x: n,
+				y: r
+			}, document.body.style.cursor = "move";
+		}, a = (n) => {
+			if (!e.current || !t.current || !o.current) return;
+			let r = t.current, i = e.current, a = r.parentElement;
+			if (!a) return;
+			let l = a.offsetWidth, u = a.offsetHeight;
+			if (c.current) {
+				s(n, r, i, l, u);
+				return;
+			}
+			d(n, r, i, l, u);
+		}, s = (e, t, i, a, s) => {
+			let l = n();
+			if (!l || l.name !== "crop" || !o.current) return;
+			let { isFree: d, ratio: f } = l.args, p = "clientX" in e ? e.clientX : e.touches[0].clientX, m = "clientY" in e ? e.clientY : e.touches[0].clientY, { x: h, y: g, w: _, h: v } = fe(c.current, d, f, o.current.x, o.current.y, p, m, a, s, u.current, t), y = Y(h, a), b = Y(g, s), x = Y(_, a), S = Y(v, s);
+			ve(t, y, b, x, S), ye(i, y, b, x, S);
+			let C = r();
+			if (!C) return;
+			let { width: w, height: T } = C;
+			q({
+				x: Math.round(y / 100 * w),
+				y: Math.round(b / 100 * T),
+				w: Math.round(x / 100 * w),
+				h: Math.round(S / 100 * T)
+			});
+		}, d = (e, t, n, i, a) => {
+			if (!o.current) return;
+			console.log("HandleDrag");
+			let s = t.offsetWidth, c = t.offsetHeight, u = "clientX" in e ? e.clientX : e.touches[0].clientX, d = "clientY" in e ? e.clientY : e.touches[0].clientY, f = Y(u - o.current.x, i), p = Y(d - o.current.y, a);
+			o.current = {
+				x: u,
+				y: d
+			};
+			let m = Y(i - s, i), h = Y(a - c, a), g = J(l.current.xPct + f, 0, m), _ = J(l.current.yPct + p, 0, h), v = Y(s, i), y = Y(c, a);
+			l.current = {
+				xPct: g,
+				yPct: _
+			}, ve(t, g, _, v, y), ye(n, g, _, v, y);
+			let { width: b, height: x } = r();
+			q({
+				x: Math.round(g / 100 * b),
+				y: Math.round(_ / 100 * x),
+				w: Math.round(v / 100 * b),
+				h: Math.round(y / 100 * x)
+			});
+		}, f = () => {
+			t.current && (o.current = null, c.current = "", t.current.style.cursor = "move", document.body.style.cursor = "auto");
+		};
+		if (!t.current) return;
+		let p = new AbortController(), { signal: m } = p;
+		return t.current.addEventListener("mousedown", i, { signal: m }), t.current.addEventListener("touchstart", i, { signal: m }), document.addEventListener("mousemove", a, { signal: m }), document.addEventListener("touchmove", a, { signal: m }), document.addEventListener("mouseup", f, { signal: m }), document.addEventListener("touchend", f, { signal: m }), () => p.abort();
+	}, [
+		n,
+		r,
+		e,
+		t
+	]), { handleCropStart: (e, n, r) => {
+		if (!t.current) return;
+		e.stopPropagation(), u.current = {
+			x: t.current.offsetLeft,
+			y: t.current.offsetTop,
+			w: t.current.offsetWidth,
+			h: t.current.offsetHeight
+		};
+		let i = "clientX" in e ? e.clientX : e.touches[0].clientX, s = "clientY" in e ? e.clientY : e.touches[0].clientY;
+		o.current = {
+			x: i,
+			y: s
+		}, c.current = n, a || (t.current.style.cursor = `${r}-resize`, document.body.style.cursor = `${r}-resize`);
+	} };
+}, xe = ({ onMouseDown: e }) => /* @__PURE__ */ (0, p.jsx)("div", {
+	className: "crop-p-b",
+	children: /* @__PURE__ */ (0, p.jsx)("div", {
+		className: "crop-p-p",
+		onTouchStart: (t) => e(t, "br", "nwse")
+	})
+}), X = 10, Z = 200, Q = (e, t, n) => (e < X && (e = X), e > Z && (e = Z), {
+	updatedScale: e,
+	updatedWidth: Math.round(e / 100 * t),
+	updatedHeight: Math.round(e / 100 * n)
+}), Se = ({ onResizing: e }) => {
+	let { getLastHistoryItem: t, setCurrentAction: n, addToHistory: r, setSidebar: a } = R(), { width: o, height: l, base64: u } = t(), [d, f] = c(!1), [m, h] = c(o), [g, _] = c(l), v = s(0), { resize: y } = b(), x = S(), C = (t) => {
+		let { updatedScale: n, updatedWidth: r, updatedHeight: i } = Q(parseInt(t.target.value) / o * 100, o, l);
+		h(r), _(i), e(n);
+	}, w = (t) => {
+		let { updatedScale: n, updatedWidth: r, updatedHeight: i } = Q(parseInt(t.target.value) / l * 100, o, l);
+		_(i), h(r), e(n);
+	}, T = () => {
+		e(100), n(null), a(!0);
+	}, O = async () => {
+		try {
+			f(!0);
+			let t = await y(u, m, g);
+			r({
+				name: "Resize",
+				base64: t,
+				width: m,
+				height: g
+			}), e(100), a(!0);
+		} catch (e) {
+			console.error("Failed to process image:", e);
+		} finally {
+			f(!1);
+		}
+	};
+	return i(() => {
+		let t = Math.round(m / o * 100), n = (t) => {
+			let { updatedHeight: n, updatedWidth: r } = Q(t, o, l);
+			_(n), h(r), e(t);
+		}, r = (e) => {
+			if (d) return;
+			let r = Math.sign(e.deltaY);
+			t -= r * 2, t <= X && (t = X), t >= Z && (t = Z), n(t);
+		}, i = (e) => {
+			v.current = e.touches[0].clientY;
+		}, a = (e) => {
+			if (d) return;
+			let r = e.touches[0].clientY, i = v.current - r;
+			Math.abs(i) < 10 || (t += Math.sign(i) * 2, t <= X && (t = X), t >= Z && (t = Z), n(t), v.current = r);
+		}, s = new AbortController(), { signal: c } = s;
+		return window.addEventListener("wheel", r, { signal: c }), window.addEventListener("touchstart", i, { signal: c }), window.addEventListener("touchmove", a, { signal: c }), () => s.abort();
+	}, [
+		l,
+		o,
+		d,
+		x,
+		e,
+		m
+	]), /* @__PURE__ */ (0, p.jsxs)("div", {
+		className: "resize",
+		children: [
+			/* @__PURE__ */ (0, p.jsx)("div", {
+				className: "resize-text",
+				children: x ? "Slide UP/Down to Resize" : "Scroll UP/Down to Resize"
+			}),
+			/* @__PURE__ */ (0, p.jsx)("div", { className: "resize-border" }),
+			/* @__PURE__ */ (0, p.jsxs)("div", {
+				className: "resize-tools",
+				children: [
+					/* @__PURE__ */ (0, p.jsx)(H, {
+						value: m,
+						name: "width",
+						label: "Width",
+						disabled: d,
+						style: { width: "88px" },
+						onChange: C
+					}),
+					/* @__PURE__ */ (0, p.jsx)(ee, { className: "resize-tools-lock" }),
+					/* @__PURE__ */ (0, p.jsx)(H, {
+						value: g,
+						name: "height",
+						label: "Height",
+						disabled: d,
+						style: { width: "88px" },
+						onChange: w
+					}),
+					/* @__PURE__ */ (0, p.jsxs)("div", {
+						className: "resize-tools-buttons",
+						children: [/* @__PURE__ */ (0, p.jsx)(z, {
+							variant: "outline",
+							className: "resize-tools-save text-green",
+							disabled: m === o || d,
+							onClick: () => O(),
+							children: d ? /* @__PURE__ */ (0, p.jsx)(L, {}) : /* @__PURE__ */ (0, p.jsx)(E, {})
+						}), /* @__PURE__ */ (0, p.jsx)(z, {
+							variant: "outline",
+							className: "resize-tools-close text-red",
+							disabled: d,
+							onClick: T,
+							children: /* @__PURE__ */ (0, p.jsx)(D, {})
+						})]
+					})
+				]
+			})
+		]
+	});
+}, Ce = () => {
+	let { getLastHistoryItem: e, currentAction: t } = R(), n = s(null), r = s(null), { width: i, height: a, base64: o } = e(), c = t?.name === "crop", l = t?.name === "resize", u = c || l, d = (e) => {
+		n.current && (n.current.style.transform = `scale(${e / 100})`);
+	}, f = `frame ${u ? "mask" : ""}`, m = `frame-image ${u ? "frame-image--faded" : ""}`;
+	return /* @__PURE__ */ (0, p.jsxs)("div", {
+		className: f,
+		children: [
+			/* @__PURE__ */ (0, p.jsxs)("div", {
+				ref: n,
+				style: { aspectRatio: `${i} / ${a}` },
+				className: "frame-preview",
+				children: [/* @__PURE__ */ (0, p.jsx)("img", {
+					ref: r,
+					src: o,
+					alt: "Image",
+					className: m
+				}), c && /* @__PURE__ */ (0, p.jsx)(pe, {}, t?.args?.id)]
+			}),
+			l && /* @__PURE__ */ (0, p.jsx)(Se, { onResizing: d }),
+			c && /* @__PURE__ */ (0, p.jsx)(me, {})
+		]
+	});
+}, we = () => {
+	let { getLastHistoryItem: e, setCurrentAction: t, setSidebar: n } = R(), { width: r, height: i } = e() ?? {
+		width: 0,
+		height: 0
+	};
+	return /* @__PURE__ */ (0, p.jsxs)(z, {
+		variant: "outline",
+		className: "sidebar-resize",
+		onClick: () => {
+			t({
+				name: "resize",
+				args: {
+					width: r,
+					height: i
+				}
+			}), n(!1);
+		},
+		children: [/* @__PURE__ */ (0, p.jsxs)("div", {
+			className: "sidebar-resize-icon",
+			children: [/* @__PURE__ */ (0, p.jsx)(I, {}), "Resize"]
+		}), /* @__PURE__ */ (0, p.jsxs)("div", {
+			className: "sidebar-resize-size",
+			children: [
+				r,
+				" x ",
+				i
+			]
+		})]
+	});
+}, Te = () => {
+	let { currentAction: e, setCurrentAction: t, getLastHistoryItem: n, setSidebar: r } = R(), { 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: {
+				id: e,
+				ratio: e === "1:1" ? 1 : l,
+				isFree: e === "freeform",
+				preset: null
+			}
+		}), r(!1));
+	};
+	return /* @__PURE__ */ (0, p.jsxs)("div", {
+		className: "sidebar-crop",
+		children: [/* @__PURE__ */ (0, p.jsx)("h4", { children: "Crop" }), /* @__PURE__ */ (0, p.jsxs)("div", {
+			className: "sidebar-crop-ratios",
+			children: [
+				/* @__PURE__ */ (0, p.jsx)(B, {
+					label: "Freeform",
+					icon: /* @__PURE__ */ (0, p.jsx)(N, {}),
+					active: o === "freeform",
+					onClick: () => u("freeform")
+				}),
+				/* @__PURE__ */ (0, p.jsx)(B, {
+					label: "Original",
+					icon: /* @__PURE__ */ (0, p.jsx)(P, {}),
+					active: o === "original",
+					onClick: () => u("original")
+				}),
+				/* @__PURE__ */ (0, p.jsx)(B, {
+					label: "1:1",
+					icon: /* @__PURE__ */ (0, p.jsx)(F, {}),
+					active: o === "1:1",
+					onClick: () => u("1:1")
+				})
+			]
+		})]
+	});
+}, $ = [
+	{
+		label: "Facebook",
+		value: "facebook",
+		options: [
+			{
+				value: "facebook-post",
+				label: "Post",
+				w: 1200,
+				h: 630,
+				rightLabel: "1200 x 630"
+			},
+			{
+				value: "facebook-cover",
+				label: "Cover",
+				w: 851,
+				h: 315,
+				rightLabel: "851 x 315"
+			},
+			{
+				value: "facebook-profile",
+				label: "Profile",
+				w: 170,
+				h: 170,
+				rightLabel: "170 x 170"
+			},
+			{
+				value: "facebook-story",
+				label: "Story",
+				w: 1080,
+				h: 1920,
+				rightLabel: "1080 x 1920"
+			}
+		]
+	},
+	{
+		label: "Instagram",
+		value: "instagram",
+		options: [
+			{
+				value: "instagram-landscape",
+				label: "Landscape",
+				w: 1080,
+				h: 566,
+				rightLabel: "1080 x 566"
+			},
+			{
+				value: "instagram-portait",
+				label: "Portait",
+				w: 1080,
+				h: 1350,
+				rightLabel: "1080 x 1350"
+			},
+			{
+				value: "instagram-square",
+				label: "Square",
+				w: 1080,
+				h: 1080,
+				rightLabel: "1080 x 1080"
+			},
+			{
+				value: "instagram-story",
+				label: "Story",
+				w: 1080,
+				h: 1920,
+				rightLabel: "1080 x 1920"
+			},
+			{
+				value: "instagram-thumbnail",
+				label: "Thumbnail",
+				w: 161,
+				h: 161,
+				rightLabel: "161 x 161"
+			}
+		]
+	},
+	{
+		label: "LinkedIn",
+		value: "linkedin",
+		options: [
+			{
+				value: "linkedin-blog-post",
+				label: "Blog Post",
+				w: 1200,
+				h: 627,
+				rightLabel: "1200 x 627"
+			},
+			{
+				value: "linkedin-cover",
+				label: "Cover",
+				w: 1128,
+				h: 191,
+				rightLabel: "1128 x 191"
+			},
+			{
+				value: "linkedin-profile",
+				label: "Profile",
+				w: 400,
+				h: 400,
+				rightLabel: "400 x 400"
+			}
+		]
+	}
+], Ee = $.map((e) => e.options).flat(), De = () => {
+	let { setCurrentAction: e, currentAction: t, setSidebar: n } = R(), r = t?.name === "crop" && Ee.some((e) => e.value === t.args.id) ? t.args.id : "";
+	return /* @__PURE__ */ (0, p.jsxs)("div", {
+		className: "sidebar-preset",
+		children: [/* @__PURE__ */ (0, p.jsx)("h4", { children: "Presets" }), /* @__PURE__ */ (0, p.jsx)("div", {
+			className: "relative",
+			children: /* @__PURE__ */ (0, p.jsx)(te, {
+				value: r,
+				placeholder: "Select a preset",
+				onChange: (t) => {
+					if (!t) return;
+					let r = $.map((e) => e.options).flat().find((e) => e.value === t);
+					if (!r) return;
+					let i = {
+						id: t,
+						ratio: r.w / r.h,
+						isFree: !1,
+						preset: {
+							w: r.w,
+							h: r.h
+						}
+					};
+					e({
+						name: "crop",
+						args: i
+					}), n(!1);
+				},
+				items: $
+			})
+		})]
+	});
+}, Oe = () => {
+	let { getSidebar: e, setSidebar: t } = R(), n = e(), r = w("md");
+	return /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [/* @__PURE__ */ (0, p.jsx)(z, {
+		variant: "outline",
+		className: "sidebar-settings",
+		onClick: () => t(!0),
+		children: /* @__PURE__ */ (0, p.jsx)(M, {})
+	}), /* @__PURE__ */ (0, p.jsx)("div", {
+		className: "sidebar",
+		style: { transform: r && n ? "translateX(-320px)" : "translateX(0%)" },
+		children: /* @__PURE__ */ (0, p.jsx)("div", {
+			className: "sidebar-container",
+			children: /* @__PURE__ */ (0, p.jsxs)("div", {
+				className: "sidebar-content",
+				children: [
+					r && /* @__PURE__ */ (0, p.jsx)(z, {
+						variant: "ghost",
+						className: "sidebar-close-btn btn-rect",
+						onClick: () => t(!1),
+						children: /* @__PURE__ */ (0, p.jsx)(D, {})
+					}),
+					/* @__PURE__ */ (0, p.jsx)(we, {}),
+					/* @__PURE__ */ (0, p.jsx)(V, { className: "sidebar-separator" }),
+					/* @__PURE__ */ (0, p.jsx)(Te, {}),
+					/* @__PURE__ */ (0, p.jsx)(V, { className: "sidebar-separator" }),
+					/* @__PURE__ */ (0, p.jsx)(De, {})
+				]
+			})
+		})
+	})] });
+}, ke = ({ image: e, onSave: t, onBack: n }) => {
+	let { loading: r, error: i, width: a, height: o, base64: s, extension: c } = y(e);
+	return r || i || !s || !c ? /* @__PURE__ */ (0, p.jsxs)("div", {
+		className: "picedi sys",
+		children: [
+			r && /* @__PURE__ */ (0, p.jsx)(m, { size: 48 }),
+			i && /* @__PURE__ */ (0, p.jsx)("div", {
+				className: "text-red",
+				children: i
+			}),
+			!r && !i && (!s || !c) && /* @__PURE__ */ (0, p.jsx)("div", {
+				className: "text-red",
+				children: "Failed to load image."
+			})
+		]
+	}) : /* @__PURE__ */ (0, p.jsx)(_, {
+		base64: s,
+		width: a,
+		height: o,
+		ext: c,
+		children: /* @__PURE__ */ (0, p.jsxs)("div", {
+			className: "picedi main",
+			children: [/* @__PURE__ */ (0, p.jsx)(re, {
+				onSave: t,
+				onBack: n
+			}), /* @__PURE__ */ (0, p.jsxs)("div", {
+				className: "grid",
+				children: [/* @__PURE__ */ (0, p.jsx)(Ce, {}), /* @__PURE__ */ (0, p.jsx)(Oe, {})]
+			})]
+		})
+	});
+};
+//#endregion
+export { ke as ImageEditor };