image-beautifier 1.0.1 → 1.0.3

package/lib/image-beautifier.es.js

@@ -0,0 +1,3040 @@
+var hr = Object.defineProperty;
+var pr = (o, t, n) => t in o ? hr(o, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[t] = n;
+var R = (o, t, n) => pr(o, typeof t != "symbol" ? t + "" : t, n);
+import kt, { useState as O, useMemo as le, useEffect as N, Children as it, cloneElement as st, useRef as ne } from "react";
+import { ColorPicker as ur, Button as k, Dropdown as At, Popover as xe, Divider as mr, InputNumber as nt, Tooltip as L, Modal as gr, Switch as at, Input as xr, Radio as P, Segmented as lt, ConfigProvider as Nt, Popconfirm as br, Drawer as wr, Slider as pe, Upload as yr, message as vr, theme as ct } from "antd";
+import { observer as B } from "mobx-react-lite";
+import { Camera as jr, Check as Mr, Square as Cr, Circle as kr, Slash as Ar, MoveDownLeft as Nr, Pencil as Tr, Smile as Sr, Undo as Rr, Redo as Dr, ChevronRight as Hr, ChevronDown as zr, ChevronUp as _r, RotateCcw as Er, ZoomIn as Or, ZoomOut as Br, Hand as Yr, Crop as Ir, FlipHorizontal2 as Pr, FlipVertical2 as Wr, Sunset as Zr, Box as Gr, LayoutGrid as Fr, ImagePlus as Lr, Type as Ur, CodeXml as Vr, ClipboardPaste as Jr, ImagePlay as qr, Maximize as Xr, ListCollapse as Qr, ArrowUpRight as $r, ArrowDownRight as Kr, ImageDown as eo, Copy as to, Settings2 as ro, ChevronLeft as oo, Pipette as io, Trash2 as so, Sun as no, Moon as ao, icons as dt } from "lucide-react";
+import { TinyColor as lo } from "@ctrl/tinycolor";
+import { clsx as co } from "clsx";
+import { twMerge as fo } from "tailwind-merge";
+import { makeAutoObservable as Tt, toJS as St, runInAction as ho, action as po } from "mobx";
+import { maxBy as uo } from "lodash";
+import mo from "@emoji-mart/data";
+import go from "@emoji-mart/react";
+import { Frame as xo, Rect as ae, Box as ft, Ellipse as ht, Line as pt, Text as bo, Cursor as wo, App as yo, ZoomEvent as vo, ResizeEvent as jo, PointerEvent as Mo, DragEvent as De } from "leafer-ui";
+import { addListener as Co, removeListener as ko } from "resize-detector";
+import { Arrow as Ao } from "@leafer-in/arrow";
+import { ScrollBar as No } from "@leafer-in/scroll";
+import { tinykeys as Rt } from "tinykeys";
+import "@leafer-in/editor";
+import "@leafer-in/view";
+import { StyleProvider as To } from "@ant-design/cssinjs";
+import So from "react-cropper";
+var ue = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function Ro(o) {
+  return o && o.__esModule && Object.prototype.hasOwnProperty.call(o, "default") ? o.default : o;
+}
+var ze = { exports: {} }, oe = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ut;
+function Do() {
+  if (ut) return oe;
+  ut = 1;
+  var o = kt, t = Symbol.for("react.element"), n = Symbol.for("react.fragment"), s = Object.prototype.hasOwnProperty, a = o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, l = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function h(f, d, p) {
+    var m, b = {}, C = null, A = null;
+    p !== void 0 && (C = "" + p), d.key !== void 0 && (C = "" + d.key), d.ref !== void 0 && (A = d.ref);
+    for (m in d) s.call(d, m) && !l.hasOwnProperty(m) && (b[m] = d[m]);
+    if (f && f.defaultProps) for (m in d = f.defaultProps, d) b[m] === void 0 && (b[m] = d[m]);
+    return { $$typeof: t, type: f, key: C, ref: A, props: b, _owner: a.current };
+  }
+  return oe.Fragment = n, oe.jsx = h, oe.jsxs = h, oe;
+}
+var ie = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var mt;
+function Ho() {
+  return mt || (mt = 1, process.env.NODE_ENV !== "production" && function() {
+    var o = kt, t = Symbol.for("react.element"), n = Symbol.for("react.portal"), s = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), l = Symbol.for("react.profiler"), h = Symbol.for("react.provider"), f = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), p = Symbol.for("react.suspense"), m = Symbol.for("react.suspense_list"), b = Symbol.for("react.memo"), C = Symbol.for("react.lazy"), A = Symbol.for("react.offscreen"), x = Symbol.iterator, w = "@@iterator";
+    function S(r) {
+      if (r === null || typeof r != "object")
+        return null;
+      var c = x && r[x] || r[w];
+      return typeof c == "function" ? c : null;
+    }
+    var _ = o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function E(r) {
+      {
+        for (var c = arguments.length, u = new Array(c > 1 ? c - 1 : 0), g = 1; g < c; g++)
+          u[g - 1] = arguments[g];
+        ye("error", r, u);
+      }
+    }
+    function ye(r, c, u) {
+      {
+        var g = _.ReactDebugCurrentFrame, j = g.getStackAddendum();
+        j !== "" && (c += "%s", u = u.concat([j]));
+        var T = u.map(function(v) {
+          return String(v);
+        });
+        T.unshift("Warning: " + c), Function.prototype.apply.call(console[r], console, T);
+      }
+    }
+    var ve = !1, $ = !1, D = !1, G = !1, U = !1, K;
+    K = Symbol.for("react.module.reference");
+    function Bt(r) {
+      return !!(typeof r == "string" || typeof r == "function" || r === s || r === l || U || r === a || r === p || r === m || G || r === A || ve || $ || D || typeof r == "object" && r !== null && (r.$$typeof === C || r.$$typeof === b || r.$$typeof === h || r.$$typeof === f || r.$$typeof === d || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      r.$$typeof === K || r.getModuleId !== void 0));
+    }
+    function Yt(r, c, u) {
+      var g = r.displayName;
+      if (g)
+        return g;
+      var j = c.displayName || c.name || "";
+      return j !== "" ? u + "(" + j + ")" : u;
+    }
+    function Ee(r) {
+      return r.displayName || "Context";
+    }
+    function F(r) {
+      if (r == null)
+        return null;
+      if (typeof r.tag == "number" && E("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof r == "function")
+        return r.displayName || r.name || null;
+      if (typeof r == "string")
+        return r;
+      switch (r) {
+        case s:
+          return "Fragment";
+        case n:
+          return "Portal";
+        case l:
+          return "Profiler";
+        case a:
+          return "StrictMode";
+        case p:
+          return "Suspense";
+        case m:
+          return "SuspenseList";
+      }
+      if (typeof r == "object")
+        switch (r.$$typeof) {
+          case f:
+            var c = r;
+            return Ee(c) + ".Consumer";
+          case h:
+            var u = r;
+            return Ee(u._context) + ".Provider";
+          case d:
+            return Yt(r, r.render, "ForwardRef");
+          case b:
+            var g = r.displayName || null;
+            return g !== null ? g : F(r.type) || "Memo";
+          case C: {
+            var j = r, T = j._payload, v = j._init;
+            try {
+              return F(v(T));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var V = Object.assign, ee = 0, Oe, Be, Ye, Ie, Pe, We, Ze;
+    function Ge() {
+    }
+    Ge.__reactDisabledLog = !0;
+    function It() {
+      {
+        if (ee === 0) {
+          Oe = console.log, Be = console.info, Ye = console.warn, Ie = console.error, Pe = console.group, We = console.groupCollapsed, Ze = console.groupEnd;
+          var r = {
+            configurable: !0,
+            enumerable: !0,
+            value: Ge,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: r,
+            log: r,
+            warn: r,
+            error: r,
+            group: r,
+            groupCollapsed: r,
+            groupEnd: r
+          });
+        }
+        ee++;
+      }
+    }
+    function Pt() {
+      {
+        if (ee--, ee === 0) {
+          var r = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: V({}, r, {
+              value: Oe
+            }),
+            info: V({}, r, {
+              value: Be
+            }),
+            warn: V({}, r, {
+              value: Ye
+            }),
+            error: V({}, r, {
+              value: Ie
+            }),
+            group: V({}, r, {
+              value: Pe
+            }),
+            groupCollapsed: V({}, r, {
+              value: We
+            }),
+            groupEnd: V({}, r, {
+              value: Ze
+            })
+          });
+        }
+        ee < 0 && E("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var je = _.ReactCurrentDispatcher, Me;
+    function ce(r, c, u) {
+      {
+        if (Me === void 0)
+          try {
+            throw Error();
+          } catch (j) {
+            var g = j.stack.trim().match(/\n( *(at )?)/);
+            Me = g && g[1] || "";
+          }
+        return `
+` + Me + r;
+      }
+    }
+    var Ce = !1, de;
+    {
+      var Wt = typeof WeakMap == "function" ? WeakMap : Map;
+      de = new Wt();
+    }
+    function Fe(r, c) {
+      if (!r || Ce)
+        return "";
+      {
+        var u = de.get(r);
+        if (u !== void 0)
+          return u;
+      }
+      var g;
+      Ce = !0;
+      var j = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var T;
+      T = je.current, je.current = null, It();
+      try {
+        if (c) {
+          var v = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(v.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(v, []);
+            } catch (I) {
+              g = I;
+            }
+            Reflect.construct(r, [], v);
+          } else {
+            try {
+              v.call();
+            } catch (I) {
+              g = I;
+            }
+            r.call(v.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (I) {
+            g = I;
+          }
+          r();
+        }
+      } catch (I) {
+        if (I && g && typeof I.stack == "string") {
+          for (var y = I.stack.split(`
+`), Y = g.stack.split(`
+`), H = y.length - 1, z = Y.length - 1; H >= 1 && z >= 0 && y[H] !== Y[z]; )
+            z--;
+          for (; H >= 1 && z >= 0; H--, z--)
+            if (y[H] !== Y[z]) {
+              if (H !== 1 || z !== 1)
+                do
+                  if (H--, z--, z < 0 || y[H] !== Y[z]) {
+                    var W = `
+` + y[H].replace(" at new ", " at ");
+                    return r.displayName && W.includes("<anonymous>") && (W = W.replace("<anonymous>", r.displayName)), typeof r == "function" && de.set(r, W), W;
+                  }
+                while (H >= 1 && z >= 0);
+              break;
+            }
+        }
+      } finally {
+        Ce = !1, je.current = T, Pt(), Error.prepareStackTrace = j;
+      }
+      var X = r ? r.displayName || r.name : "", J = X ? ce(X) : "";
+      return typeof r == "function" && de.set(r, J), J;
+    }
+    function Zt(r, c, u) {
+      return Fe(r, !1);
+    }
+    function Gt(r) {
+      var c = r.prototype;
+      return !!(c && c.isReactComponent);
+    }
+    function fe(r, c, u) {
+      if (r == null)
+        return "";
+      if (typeof r == "function")
+        return Fe(r, Gt(r));
+      if (typeof r == "string")
+        return ce(r);
+      switch (r) {
+        case p:
+          return ce("Suspense");
+        case m:
+          return ce("SuspenseList");
+      }
+      if (typeof r == "object")
+        switch (r.$$typeof) {
+          case d:
+            return Zt(r.render);
+          case b:
+            return fe(r.type, c, u);
+          case C: {
+            var g = r, j = g._payload, T = g._init;
+            try {
+              return fe(T(j), c, u);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var te = Object.prototype.hasOwnProperty, Le = {}, Ue = _.ReactDebugCurrentFrame;
+    function he(r) {
+      if (r) {
+        var c = r._owner, u = fe(r.type, r._source, c ? c.type : null);
+        Ue.setExtraStackFrame(u);
+      } else
+        Ue.setExtraStackFrame(null);
+    }
+    function Ft(r, c, u, g, j) {
+      {
+        var T = Function.call.bind(te);
+        for (var v in r)
+          if (T(r, v)) {
+            var y = void 0;
+            try {
+              if (typeof r[v] != "function") {
+                var Y = Error((g || "React class") + ": " + u + " type `" + v + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof r[v] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw Y.name = "Invariant Violation", Y;
+              }
+              y = r[v](c, v, g, u, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (H) {
+              y = H;
+            }
+            y && !(y instanceof Error) && (he(j), E("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", g || "React class", u, v, typeof y), he(null)), y instanceof Error && !(y.message in Le) && (Le[y.message] = !0, he(j), E("Failed %s type: %s", u, y.message), he(null));
+          }
+      }
+    }
+    var Lt = Array.isArray;
+    function ke(r) {
+      return Lt(r);
+    }
+    function Ut(r) {
+      {
+        var c = typeof Symbol == "function" && Symbol.toStringTag, u = c && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        return u;
+      }
+    }
+    function Vt(r) {
+      try {
+        return Ve(r), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function Ve(r) {
+      return "" + r;
+    }
+    function Je(r) {
+      if (Vt(r))
+        return E("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ut(r)), Ve(r);
+    }
+    var re = _.ReactCurrentOwner, Jt = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, qe, Xe, Ae;
+    Ae = {};
+    function qt(r) {
+      if (te.call(r, "ref")) {
+        var c = Object.getOwnPropertyDescriptor(r, "ref").get;
+        if (c && c.isReactWarning)
+          return !1;
+      }
+      return r.ref !== void 0;
+    }
+    function Xt(r) {
+      if (te.call(r, "key")) {
+        var c = Object.getOwnPropertyDescriptor(r, "key").get;
+        if (c && c.isReactWarning)
+          return !1;
+      }
+      return r.key !== void 0;
+    }
+    function Qt(r, c) {
+      if (typeof r.ref == "string" && re.current && c && re.current.stateNode !== c) {
+        var u = F(re.current.type);
+        Ae[u] || (E('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', F(re.current.type), r.ref), Ae[u] = !0);
+      }
+    }
+    function $t(r, c) {
+      {
+        var u = function() {
+          qe || (qe = !0, E("%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://reactjs.org/link/special-props)", c));
+        };
+        u.isReactWarning = !0, Object.defineProperty(r, "key", {
+          get: u,
+          configurable: !0
+        });
+      }
+    }
+    function Kt(r, c) {
+      {
+        var u = function() {
+          Xe || (Xe = !0, E("%s: `ref` 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://reactjs.org/link/special-props)", c));
+        };
+        u.isReactWarning = !0, Object.defineProperty(r, "ref", {
+          get: u,
+          configurable: !0
+        });
+      }
+    }
+    var er = function(r, c, u, g, j, T, v) {
+      var y = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: t,
+        // Built-in properties that belong on the element
+        type: r,
+        key: c,
+        ref: u,
+        props: v,
+        // Record the component responsible for creating this element.
+        _owner: T
+      };
+      return y._store = {}, Object.defineProperty(y._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(y, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: g
+      }), Object.defineProperty(y, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: j
+      }), Object.freeze && (Object.freeze(y.props), Object.freeze(y)), y;
+    };
+    function tr(r, c, u, g, j) {
+      {
+        var T, v = {}, y = null, Y = null;
+        u !== void 0 && (Je(u), y = "" + u), Xt(c) && (Je(c.key), y = "" + c.key), qt(c) && (Y = c.ref, Qt(c, j));
+        for (T in c)
+          te.call(c, T) && !Jt.hasOwnProperty(T) && (v[T] = c[T]);
+        if (r && r.defaultProps) {
+          var H = r.defaultProps;
+          for (T in H)
+            v[T] === void 0 && (v[T] = H[T]);
+        }
+        if (y || Y) {
+          var z = typeof r == "function" ? r.displayName || r.name || "Unknown" : r;
+          y && $t(v, z), Y && Kt(v, z);
+        }
+        return er(r, y, Y, j, g, re.current, v);
+      }
+    }
+    var Ne = _.ReactCurrentOwner, Qe = _.ReactDebugCurrentFrame;
+    function q(r) {
+      if (r) {
+        var c = r._owner, u = fe(r.type, r._source, c ? c.type : null);
+        Qe.setExtraStackFrame(u);
+      } else
+        Qe.setExtraStackFrame(null);
+    }
+    var Te;
+    Te = !1;
+    function Se(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === t;
+    }
+    function $e() {
+      {
+        if (Ne.current) {
+          var r = F(Ne.current.type);
+          if (r)
+            return `
+
+Check the render method of \`` + r + "`.";
+        }
+        return "";
+      }
+    }
+    function rr(r) {
+      return "";
+    }
+    var Ke = {};
+    function or(r) {
+      {
+        var c = $e();
+        if (!c) {
+          var u = typeof r == "string" ? r : r.displayName || r.name;
+          u && (c = `
+
+Check the top-level render call using <` + u + ">.");
+        }
+        return c;
+      }
+    }
+    function et(r, c) {
+      {
+        if (!r._store || r._store.validated || r.key != null)
+          return;
+        r._store.validated = !0;
+        var u = or(c);
+        if (Ke[u])
+          return;
+        Ke[u] = !0;
+        var g = "";
+        r && r._owner && r._owner !== Ne.current && (g = " It was passed a child from " + F(r._owner.type) + "."), q(r), E('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', u, g), q(null);
+      }
+    }
+    function tt(r, c) {
+      {
+        if (typeof r != "object")
+          return;
+        if (ke(r))
+          for (var u = 0; u < r.length; u++) {
+            var g = r[u];
+            Se(g) && et(g, c);
+          }
+        else if (Se(r))
+          r._store && (r._store.validated = !0);
+        else if (r) {
+          var j = S(r);
+          if (typeof j == "function" && j !== r.entries)
+            for (var T = j.call(r), v; !(v = T.next()).done; )
+              Se(v.value) && et(v.value, c);
+        }
+      }
+    }
+    function ir(r) {
+      {
+        var c = r.type;
+        if (c == null || typeof c == "string")
+          return;
+        var u;
+        if (typeof c == "function")
+          u = c.propTypes;
+        else if (typeof c == "object" && (c.$$typeof === d || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        c.$$typeof === b))
+          u = c.propTypes;
+        else
+          return;
+        if (u) {
+          var g = F(c);
+          Ft(u, r.props, "prop", g, r);
+        } else if (c.PropTypes !== void 0 && !Te) {
+          Te = !0;
+          var j = F(c);
+          E("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", j || "Unknown");
+        }
+        typeof c.getDefaultProps == "function" && !c.getDefaultProps.isReactClassApproved && E("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function sr(r) {
+      {
+        for (var c = Object.keys(r.props), u = 0; u < c.length; u++) {
+          var g = c[u];
+          if (g !== "children" && g !== "key") {
+            q(r), E("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", g), q(null);
+            break;
+          }
+        }
+        r.ref !== null && (q(r), E("Invalid attribute `ref` supplied to `React.Fragment`."), q(null));
+      }
+    }
+    var rt = {};
+    function ot(r, c, u, g, j, T) {
+      {
+        var v = Bt(r);
+        if (!v) {
+          var y = "";
+          (r === void 0 || typeof r == "object" && r !== null && Object.keys(r).length === 0) && (y += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var Y = rr();
+          Y ? y += Y : y += $e();
+          var H;
+          r === null ? H = "null" : ke(r) ? H = "array" : r !== void 0 && r.$$typeof === t ? (H = "<" + (F(r.type) || "Unknown") + " />", y = " Did you accidentally export a JSX literal instead of a component?") : H = typeof r, E("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", H, y);
+        }
+        var z = tr(r, c, u, j, T);
+        if (z == null)
+          return z;
+        if (v) {
+          var W = c.children;
+          if (W !== void 0)
+            if (g)
+              if (ke(W)) {
+                for (var X = 0; X < W.length; X++)
+                  tt(W[X], r);
+                Object.freeze && Object.freeze(W);
+              } else
+                E("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
+              tt(W, r);
+        }
+        if (te.call(c, "key")) {
+          var J = F(r), I = Object.keys(c).filter(function(fr) {
+            return fr !== "key";
+          }), Re = I.length > 0 ? "{key: someKey, " + I.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!rt[J + Re]) {
+            var dr = I.length > 0 ? "{" + I.join(": ..., ") + ": ...}" : "{}";
+            E(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`, Re, J, dr, J), rt[J + Re] = !0;
+          }
+        }
+        return r === s ? sr(z) : ir(z), z;
+      }
+    }
+    function nr(r, c, u) {
+      return ot(r, c, u, !0);
+    }
+    function ar(r, c, u) {
+      return ot(r, c, u, !1);
+    }
+    var lr = ar, cr = nr;
+    ie.Fragment = s, ie.jsx = lr, ie.jsxs = cr;
+  }()), ie;
+}
+process.env.NODE_ENV === "production" ? ze.exports = Do() : ze.exports = Ho();
+var e = ze.exports;
+const M = {
+  Camera: jr,
+  Check: Mr,
+  Square: Cr,
+  Circle: kr,
+  Slash: Ar,
+  MoveDownLeft: Nr,
+  Pencil: Tr,
+  Smile: Sr,
+  Undo: Rr,
+  Redo: Dr,
+  ChevronRight: Hr,
+  ChevronDown: zr,
+  ChevronUp: _r,
+  RotateCcw: Er,
+  ZoomIn: Or,
+  ZoomOut: Br,
+  Hand: Yr,
+  Crop: Ir,
+  FlipHorizontal2: Pr,
+  FlipVertical2: Wr,
+  Sunset: Zr,
+  Box: Gr,
+  LayoutGrid: Fr,
+  ImagePlus: Lr,
+  Type: Ur,
+  CodeXml: Vr,
+  ClipboardPaste: Jr,
+  ImagePlay: qr,
+  Maximize: Xr,
+  ListCollapse: Qr,
+  ArrowUpRight: $r,
+  ArrowDownRight: Kr,
+  ImageDown: eo,
+  Copy: to,
+  Settings2: ro,
+  ChevronLeft: oo,
+  Pipette: io,
+  Trash2: so,
+  Sun: no,
+  Moon: ao
+}, be = (o) => {
+  const t = () => {
+    if (!window.EyeDropper) return;
+    new EyeDropper().open().then((s) => {
+      const a = s.sRGBHex;
+      o != null && o.onChange && o.onChange(new lo(a));
+    }).catch((s) => {
+      console.log(s);
+    });
+  };
+  return /* @__PURE__ */ e.jsx(
+    ur,
+    {
+      ...o,
+      panelRender: (n) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        window.EyeDropper && /* @__PURE__ */ e.jsx("div", { className: "mb-1", children: /* @__PURE__ */ e.jsx(k, { type: "text", shape: "circle", size: "small", icon: /* @__PURE__ */ e.jsx(M.Pipette, { size: 16 }), onClick: t }) }),
+        n
+      ] })
+    }
+  );
+}, zo = [
+  {
+    label: /* @__PURE__ */ e.jsx("div", { className: "w-4 h-3 mt-1.5 items-center cursor-pointer", children: /* @__PURE__ */ e.jsx("i", { className: "block w-full origin-center rounded-lg bg-slate-600 -rotate-45 h-[1px]" }) }),
+    key: 1
+  },
+  {
+    label: /* @__PURE__ */ e.jsx("div", { className: "w-4 h-3 mt-1.5 items-center cursor-pointer", children: /* @__PURE__ */ e.jsx("i", { className: "block w-full origin-center rounded-lg bg-slate-600 -rotate-45 h-[2px]" }) }),
+    key: 2
+  },
+  {
+    label: /* @__PURE__ */ e.jsx("div", { className: "w-4 h-3 mt-1.5 items-center cursor-pointer", children: /* @__PURE__ */ e.jsx("i", { className: "block w-full origin-center rounded-lg bg-slate-600 -rotate-45 h-[4px]" }) }),
+    key: 4
+  },
+  {
+    label: /* @__PURE__ */ e.jsx("div", { className: "w-4 h-3 mt-1.5 items-center cursor-pointer", children: /* @__PURE__ */ e.jsx("i", { className: "block w-full origin-center rounded-lg bg-slate-600 -rotate-45 h-[6px]" }) }),
+    key: 6
+  },
+  {
+    label: /* @__PURE__ */ e.jsx("div", { className: "w-4 h-3 mt-1.5 items-center cursor-pointer", children: /* @__PURE__ */ e.jsx("i", { className: "block w-full origin-center rounded-lg bg-slate-600 -rotate-45 h-[8px]" }) }),
+    key: 8
+  }
+], _o = ({ defaultValue: o, onChange: t }) => {
+  const n = ({ key: s }) => {
+    t(s);
+  };
+  return /* @__PURE__ */ e.jsx(
+    At,
+    {
+      menu: { items: zo, onClick: n, selectedKeys: [o] },
+      trigger: ["click"],
+      placement: "bottom",
+      children: /* @__PURE__ */ e.jsx(
+        k,
+        {
+          type: "text",
+          shape: "circle",
+          className: "px-1.5 py-0 flex items-center justify-center",
+          children: /* @__PURE__ */ e.jsx("div", { className: "w-4 h-4 flex items-center cursor-pointer", children: /* @__PURE__ */ e.jsx(
+            "i",
+            {
+              className: "block w-full origin-center rounded-lg bg-slate-600 -rotate-45",
+              style: {
+                height: o + "px"
+              }
+            }
+          ) })
+        }
+      )
+    }
+  );
+};
+let Eo = (o, t = 21) => (n = t) => {
+  let s = "", a = n;
+  for (; a--; )
+    s += o[Math.random() * o.length | 0];
+  return s;
+};
+const Oo = () => {
+  const o = typeof navigator == "object" ? navigator.platform : "";
+  return /Mac|iPod|iPhone|iPad/.test(o);
+}, gt = Oo() ? "⌘" : "Ctrl", Dt = [
+  "image/jpeg",
+  "image/png",
+  "image/bmp",
+  "image/gif",
+  "image/webp"
+];
+function Z(...o) {
+  return fo(co(o));
+}
+const ge = Eo(
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  7
+), Bo = (o, t) => {
+  let n = document.createElement("a");
+  n.href = o, n.download = t, n.style = "position: absolute; z-index: -111; visibility: none;", document.body.appendChild(n), n.click(), document.body.removeChild(n), n = null;
+}, Yo = (o, t, n = 950, s = 450) => {
+  let a = o, l = t;
+  return a > n && (l *= n / a, a = n), l > s && (a *= s / l, l = s), { width: Math.round(a), height: Math.round(l) };
+}, Io = (o) => {
+  const t = new Image();
+  return o.startsWith("data") || (t.crossOrigin = "Anonymous"), new Promise(function(n, s) {
+    t.onload = function() {
+      n(t);
+    };
+    const a = function() {
+      return s(
+        new Error("An error occurred attempting to load image")
+      );
+    };
+    t.onerror = a, t.onabort = a, t.src = o;
+  });
+}, we = (o, t, n = 0.15) => {
+  const s = Math.min(o, t);
+  return Math.round(s * n);
+}, Po = (o, t, n) => o === "top-left" ? {
+  x: 0,
+  y: 0
+} : o === "top" ? {
+  x: t / 2,
+  y: 0
+} : o === "top-right" ? {
+  x: t,
+  y: 0
+} : o === "left" ? {
+  x: 0,
+  y: n / 2
+} : o === "right" ? {
+  x: t,
+  y: n / 2
+} : o === "bottom-left" ? {
+  x: 0,
+  y: n
+} : o === "bottom" ? {
+  x: t / 2,
+  y: n
+} : o === "bottom-right" ? {
+  x: t,
+  y: n
+} : { x: t / 2, y: n / 2 }, Wo = (o, t, n) => {
+  const s = n * (Math.PI / 180), a = Math.abs(o * Math.cos(s)) + Math.abs(t * Math.sin(s)), l = Math.abs(o * Math.sin(s)) + Math.abs(t * Math.cos(s));
+  return {
+    width: Math.round(a),
+    height: Math.round(l)
+  };
+}, _e = (o) => "data:image/svg+xml," + encodeURIComponent(o).replace(/'/g, "%27").replace(/"/g, "%22"), Zo = ({ text: o, color: t, angleDegrees: n }) => {
+  const s = document.createElement("div");
+  s.style = `text-align:center;white-space:nowrap;line-height:100px;transform: rotate(${n}deg);position: absolute;top:0;left:0;opacity: 0;`;
+  const a = document.createElement("span");
+  a.style.color = t, a.style.fontSize = "36px", a.innerText = o, s.append(a), document.body.append(s);
+  const { width: l, height: h } = s.getBoundingClientRect();
+  document.body.removeChild(s);
+  const f = Wo(l, h, n), d = `
+        <div xmlns="http://www.w3.org/1999/xhtml" style="text-align:center;white-space:nowrap;line-height:${f.height}px;transform:rotate(${n}deg);">
+            <span style="color:${t};font-size:36px;">${o}</span>
+        </div>
+    `, p = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${f.width} ${f.height}" width="${f.width}" height="${f.height}">
+                <foreignObject width="100%" height="100%">
+                    ${d}
+                </foreignObject>
+            </svg>`;
+  return _e(p);
+}, Go = (o) => {
+  const t = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+                <foreignObject width="100%" height="100%">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="text-align:center;white-space:nowrap;line-height:32px;">
+                        <span style="color:#ffffff;font-size:18px;">${o}</span>
+                    </div>
+                </foreignObject>
+            </svg>`;
+  return _e(t);
+};
+let xt, Fo = class {
+  constructor() {
+    R(this, "img", {});
+    R(this, "invalid", !1);
+    R(this, "app", null);
+    R(this, "scale", 100);
+    R(this, "useTool", null);
+    R(this, "annotateColor", "#ff0000");
+    R(this, "strokeWidth", 4);
+    R(this, "shapes", /* @__PURE__ */ new Map());
+    R(this, "message", null);
+    R(this, "theme", "light");
+    Tt(this);
+  }
+  get shapesList() {
+    return Array.from(St(this.shapes).values());
+  }
+  get cursor() {
+    return this.useTool === "Pencil" ? "pencil" : this.useTool ? "crosshair" : "auto";
+  }
+  get isEditing() {
+    var n;
+    const t = !!((n = this.app) != null && n.tree);
+    return t || (this.message.info("Please add a image"), this.setInvalid()), t;
+  }
+  get nextStep() {
+    const t = this.shapesList.filter((s) => s.type === "Step"), n = uo(t, (s) => Number(s.text));
+    return n != null && n.text ? Number(n.text) + 1 : 1;
+  }
+  get isDark() {
+    return this.theme === "dark";
+  }
+  setTheme(t) {
+    t !== this.theme && ho(() => {
+      t ? this.theme = t : this.theme = this.isDark ? "light" : "dark";
+    });
+  }
+  setInvalid() {
+    clearTimeout(xt), this.invalid = !0, xt = setTimeout(po(() => {
+      this.invalid = !1;
+    }), 200);
+  }
+  setImg(t) {
+    this.img = t;
+  }
+  setMessage(t) {
+    this.message = t;
+  }
+  getShape(t) {
+    return this.shapes.get(t);
+  }
+  addShape(t) {
+    this.shapes.set(t.id, t);
+  }
+  removeShape(t) {
+    this.shapes.delete(t.id);
+  }
+  setApp(t) {
+    this.app = t;
+  }
+  setScale(t) {
+    this.scale = parseInt(t * 100);
+  }
+  setUseTool(t) {
+    this.useTool = t, t ? this.setSelect(!1) : this.setSelect(!0);
+  }
+  setSelect(t) {
+    this.app && (this.app.editor.app.config.move.drag = !1, this.app.editor.hittable = t);
+  }
+  setAnnotateColor(t) {
+    this.annotateColor = t;
+  }
+  setStrokeWidth(t) {
+    this.strokeWidth = t;
+  }
+  clearImg() {
+    this.img = {};
+  }
+  destroy() {
+    var t;
+    (t = this.app) == null || t.destroy(!0), this.app = null, this.shapes.clear(), this.setUseTool(null);
+  }
+};
+const Lo = new Fo(), Q = {
+  default_1: {
+    class: "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500",
+    fill: {
+      type: "linear",
+      from: "left",
+      to: "right",
+      stops: ["#6366f1", "#a855f7", "#ec4899"]
+    }
+  },
+  default_2: {
+    class: "bg-gradient-to-r from-red-500 via-pink-500 to-violet-500",
+    fill: {
+      type: "linear",
+      from: "left",
+      to: "right",
+      stops: ["#ef4444", "#ec4899", "#8b5cf6"]
+    }
+  },
+  default_3: {
+    class: "bg-gradient-to-r from-violet-800 via-pink-600 to-orange-500",
+    fill: {
+      type: "linear",
+      from: "left",
+      to: "right",
+      stops: ["#5b21b6", "#db2777", "#f97316"]
+    }
+  },
+  default_4: {
+    class: "bg-gradient-to-r from-orange-400 to-rose-400",
+    fill: {
+      type: "linear",
+      from: "left",
+      to: "right",
+      stops: ["#fb923c", "#fb7185"]
+    }
+  },
+  default_5: {
+    class: "bg-gradient-to-r from-[#4284DB] to-[#29EAC4]",
+    fill: {
+      type: "linear",
+      from: "left",
+      to: "right",
+      stops: ["#4284DB", "#29EAC4"]
+    }
+  },
+  default_6: {
+    class: "bg-gradient-to-r from-[#fc00ff] to-[#00dbde]",
+    fill: {
+      type: "linear",
+      from: "left",
+      to: "right",
+      stops: ["#fc00ff", "#00dbde"]
+    }
+  },
+  default_7: {
+    class: "bg-gradient-to-br from-[#eeddf3] via-[#ee92b1] to-[#6330b4]",
+    fill: {
+      type: "linear",
+      from: "left",
+      to: "right",
+      stops: ["#eeddf3", "#ee92b1", "#6330b4"]
+    }
+  },
+  solid_1: {
+    class: "bg-transparent",
+    fill: {
+      type: "solid",
+      color: "#ffffff00"
+    }
+  },
+  solid_2: {
+    class: "bg-slate-400",
+    fill: {
+      type: "solid",
+      color: "#94a3b8"
+    }
+  },
+  solid_3: {
+    class: "bg-gray-400",
+    fill: {
+      type: "solid",
+      color: "#9ca3af"
+    }
+  },
+  solid_4: {
+    class: "bg-stone-400",
+    fill: {
+      type: "solid",
+      color: "#a8a29e"
+    }
+  },
+  solid_5: {
+    class: "bg-red-400",
+    fill: {
+      type: "solid",
+      color: "#f87171"
+    }
+  },
+  solid_6: {
+    class: "bg-orange-400",
+    fill: {
+      type: "solid",
+      color: "#fb923c"
+    }
+  },
+  solid_7: {
+    class: "bg-amber-400",
+    fill: {
+      type: "solid",
+      color: "#facc15"
+    }
+  },
+  solid_8: {
+    class: "bg-yellow-400",
+    fill: {
+      type: "solid",
+      color: "#fbbf24"
+    }
+  },
+  solid_9: {
+    class: "bg-lime-400",
+    fill: {
+      type: "solid",
+      color: "#a3e635"
+    }
+  },
+  solid_10: {
+    class: "bg-green-400",
+    fill: {
+      type: "solid",
+      color: "#4ade80"
+    }
+  },
+  solid_11: {
+    class: "bg-emerald-400",
+    fill: {
+      type: "solid",
+      color: "#34d399"
+    }
+  },
+  solid_12: {
+    class: "bg-teal-400",
+    fill: {
+      type: "solid",
+      color: "#2dd4bf"
+    }
+  },
+  solid_13: {
+    class: "bg-cyan-400",
+    fill: {
+      type: "solid",
+      color: "#22d3ee"
+    }
+  },
+  solid_14: {
+    class: "bg-sky-400",
+    fill: {
+      type: "solid",
+      color: "#38bdf8"
+    }
+  },
+  solid_15: {
+    class: "bg-blue-400",
+    fill: {
+      type: "solid",
+      color: "#60a5fa"
+    }
+  },
+  solid_16: {
+    class: "bg-indigo-400",
+    fill: {
+      type: "solid",
+      color: "#818cf8"
+    }
+  },
+  solid_17: {
+    class: "bg-violet-400",
+    fill: {
+      type: "solid",
+      color: "#a78bfa"
+    }
+  },
+  solid_18: {
+    class: "bg-purple-400",
+    fill: {
+      type: "solid",
+      color: "#c084fc"
+    }
+  },
+  solid_19: {
+    class: "bg-fuchsia-400",
+    fill: {
+      type: "solid",
+      color: "#e879f9"
+    }
+  },
+  solid_20: {
+    class: "bg-pink-400",
+    fill: {
+      type: "solid",
+      color: "#f472b6"
+    }
+  },
+  solid_21: {
+    class: "bg-rose-400",
+    fill: {
+      type: "solid",
+      color: "#fb7185"
+    }
+  },
+  gradient_1: {
+    class: "bg-gradient-to-br from-[#ff6432] from-12.8% via-[#ff0065] via-43.52% to-[#7b2eff] to-84.34%",
+    fill: {
+      type: "linear",
+      from: "top-left",
+      to: "bottom-right",
+      stops: [
+        { offset: 0.12, color: "#ff6432" },
+        { offset: 0.44, color: "#ff0065" },
+        { offset: 0.84, color: "#7b2eff" }
+      ]
+    }
+  },
+  gradient_2: {
+    class: "bg-gradient-to-br from-[#69eacb] from-0% via-[#eaccf8] via-48% to-[#6654f1] to-100%",
+    fill: {
+      type: "linear",
+      from: "top-left",
+      to: "bottom-right",
+      stops: [
+        { offset: 0, color: "#69eacb" },
+        { offset: 0.48, color: "#eaccf8" },
+        { offset: 1, color: "#6654f1" }
+      ]
+    }
+  },
+  gradient_3: {
+    class: "bg-gradient-to-br from-[#f9f047] to-[#0fd850]",
+    fill: {
+      type: "linear",
+      from: "top-left",
+      to: "bottom-right",
+      stops: ["#f9f047", "#0fd850"]
+    }
+  },
+  cosmic_img_1: {
+    class: "https://images.unsplash.com/photo-1579546929518-9e396f3cc809?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxfHxncmFkaWVudHxlbnwwfHx8fDE3MDMwNjAzNjh8MA&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1579546929518-9e396f3cc809?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxfHxncmFkaWVudHxlbnwwfHx8fDE3MDMwNjAzNjh8MA&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_2: {
+    class: "https://images.unsplash.com/photo-1604076913837-52ab5629fba9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwzfHxncmFkaWVudHxlbnwwfHx8fDE3MDMwNjAzNjh8MA&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1604076913837-52ab5629fba9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwzfHxncmFkaWVudHxlbnwwfHx8fDE3MDMwNjAzNjh8MA&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_3: {
+    class: "https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxN3x8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDYwMzY4fDA&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxN3x8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDYwMzY4fDA&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_4: {
+    class: "https://images.unsplash.com/photo-1618397746666-63405ce5d015?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyN3x8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDM3NjcwfDA&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1618397746666-63405ce5d015?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyN3x8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDM3NjcwfDA&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_5: {
+    class: "https://images.unsplash.com/photo-1579548122080-c35fd6820ecb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwzNnx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDM3NjcwfDA&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1579548122080-c35fd6820ecb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwzNnx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDM3NjcwfDA&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_6: {
+    class: "https://images.unsplash.com/photo-1564951434112-64d74cc2a2d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw0Nnx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDMyNzM1fDA&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1564951434112-64d74cc2a2d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw0Nnx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDMyNzM1fDA&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_7: {
+    class: "https://images.unsplash.com/photo-1636990649778-fd699d27c875?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw1Mnx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDMyNzM1fDA&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1636990649778-fd699d27c875?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw1Mnx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDMyNzM1fDA&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_8: {
+    class: "https://images.unsplash.com/photo-1640177155742-835de7b2a9a0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw5MHx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDU0Njg3fDA&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1640177155742-835de7b2a9a0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw5MHx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDU0Njg3fDA&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_9: {
+    class: "https://images.unsplash.com/photo-1523396206913-a003efa7861b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxMTh8fGdyYWRpZW50fGVufDB8fHx8MTcwMzEyMDMzOHww&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1523396206913-a003efa7861b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxMTh8fGdyYWRpZW50fGVufDB8fHx8MTcwMzEyMDMzOHww&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_10: {
+    class: "https://images.unsplash.com/photo-1552152370-fb05b25ff17d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxNjJ8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA3ODE5Mnww&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1552152370-fb05b25ff17d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxNjJ8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA3ODE5Mnww&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_11: {
+    class: "https://images.unsplash.com/photo-1635776063043-ab23b4c226f6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyMjZ8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA4MjI2NHww&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1635776063043-ab23b4c226f6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyMjZ8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA4MjI2NHww&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_12: {
+    class: "https://images.unsplash.com/photo-1640963269654-3fe248c5fba6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyNTZ8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA4NDU3Nnww&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1640963269654-3fe248c5fba6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyNTZ8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA4NDU3Nnww&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_13: {
+    class: "https://images.unsplash.com/photo-1595131264179-84bb2f9e17b9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyNjh8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA2NzI3OXww&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1595131264179-84bb2f9e17b9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyNjh8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA2NzI3OXww&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_14: {
+    class: "https://images.unsplash.com/photo-1642116876554-b17f937ee90b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxNzV8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA3ODE5Mnww&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1642116876554-b17f937ee90b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxNzV8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA3ODE5Mnww&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  cosmic_img_15: {
+    class: "https://images.unsplash.com/photo-1586455122341-927f2dec0691?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw3MHx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDQ3MjE1fDA&ixlib=rb-4.0.3&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1586455122341-927f2dec0691?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw3MHx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDQ3MjE1fDA&ixlib=rb-4.0.3&q=80"
+    }
+  },
+  desktop_img_1: {
+    class: "https://images.unsplash.com/photo-1511860810434-a92f84c6f01e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1511860810434-a92f84c6f01e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80"
+    }
+  },
+  desktop_img_2: {
+    class: "https://images.unsplash.com/photo-1554110397-9bac083977c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1554110397-9bac083977c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80"
+    }
+  },
+  desktop_img_3: {
+    class: "https://images.unsplash.com/photo-1671180881490-8af6e9c3eaf1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1671180881490-8af6e9c3eaf1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80"
+    }
+  },
+  desktop_img_4: {
+    class: "https://images.unsplash.com/photo-1671549296089-88b3a6eb347e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1671549296089-88b3a6eb347e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80"
+    }
+  },
+  desktop_img_5: {
+    class: "https://images.unsplash.com/photo-1668718031554-9c05b5d03750?&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&q=80",
+    fill: {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1668718031554-9c05b5d03750?&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&q=80"
+    }
+  }
+};
+class Uo {
+  constructor() {
+    R(this, "scale", 1);
+    R(this, "scaleX", !1);
+    R(this, "scaleY", !1);
+    R(this, "padding", 0);
+    R(this, "paddingBg", "rgba(255,255,255, 100)");
+    R(this, "round", 10);
+    R(this, "shadow", 3);
+    R(this, "frame", "none");
+    R(this, "background", "default_1");
+    R(this, "align", "center");
+    R(this, "waterImg", null);
+    R(this, "waterIndex", 1);
+    R(this, "size", {
+      type: "auto",
+      title: "Auto"
+    });
+    R(this, "frameConf", {
+      width: 800,
+      height: 600,
+      background: {
+        type: "linear",
+        from: "left",
+        to: "right",
+        stops: ["#6366f1", "#a855f7", "#ec4899"]
+      }
+    });
+    Tt(this);
+  }
+  get waterSvg() {
+    return St(this.waterImg);
+  }
+  setScale(t) {
+    this.scale = t;
+  }
+  setPadding(t) {
+    this.padding = t;
+  }
+  setPaddingBg(t) {
+    this.paddingBg = t;
+  }
+  setRound(t) {
+    this.round = t;
+  }
+  setShadow(t) {
+    this.shadow = t;
+  }
+  setFrame(t) {
+    this.frame = t;
+  }
+  setFrameSize(t, n) {
+    !t || !n || (this.frameConf.width = t, this.frameConf.height = n);
+  }
+  setAlign(t) {
+    this.align = t;
+  }
+  setSize(t) {
+    this.size.type = t.type, this.size.title = t.title, this.setFrameSize(t.width, t.height);
+  }
+  setBackground(t) {
+    this.background = t, this.frameConf.background = Q[t].fill;
+  }
+  toggleFlip(t) {
+    t === "x" && (this.scaleX = !this.scaleX), t === "y" && (this.scaleY = !this.scaleY);
+  }
+  setWaterImg(t) {
+    this.waterImg = t;
+  }
+  setWaterIndex(t) {
+    this.waterIndex = t;
+  }
+}
+const Vo = new Uo(), i = {
+  editor: Lo,
+  option: Vo
+}, Jo = ({ disabled: o = !1, toSelect: t, locale: n = "en", theme: s = "auto" }) => {
+  const [a, l] = O(!1), h = () => {
+    l(!1);
+  }, f = (p) => {
+    l(p);
+  }, d = (p) => {
+    t(p.native), h();
+  };
+  return /* @__PURE__ */ e.jsx(
+    xe,
+    {
+      content: /* @__PURE__ */ e.jsx(go, { data: mo, locale: n, onEmojiSelect: d, previewPosition: "none", theme: s }),
+      title: "",
+      trigger: "click",
+      open: a,
+      onOpenChange: f,
+      children: /* @__PURE__ */ e.jsx(
+        k,
+        {
+          type: "text",
+          shape: "circle",
+          disabled: o,
+          icon: /* @__PURE__ */ e.jsx(M.Smile, { size: 16 })
+        }
+      )
+    }
+  );
+}, qo = () => /* @__PURE__ */ e.jsx("h1", { children: /* @__PURE__ */ e.jsxs("a", { href: "https://shoteasy.fun", target: "_blank", "aria-label": "ShotEasy", className: "flex gap-1 text-gray-700 dark:text-gray-300 items-center text-xs font-semibold", children: [
+  /* @__PURE__ */ e.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 510 510", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ e.jsxs("g", { filter: "url(#filter0_i_40_60)", children: [
+      /* @__PURE__ */ e.jsx("path", { d: "M60.1774 83.172C64.1232 61.4358 84.9426 47.0139 106.679 50.9598L271.777 80.9308C293.513 84.8767 307.935 105.696 303.989 127.432L247.462 438.817C243.516 460.553 222.696 474.975 200.96 471.029L35.8623 441.058C14.1261 437.112 -0.295702 416.293 3.65017 394.557L60.1774 83.172Z", fill: "#812BED" }),
+      /* @__PURE__ */ e.jsx("path", { d: "M179.201 136.846C173.053 115.627 185.269 93.4418 206.488 87.2932L367.654 40.5909C388.872 34.4423 411.058 46.6588 417.206 67.8773L505.29 371.846C511.438 393.065 499.222 415.25 478.003 421.399L316.837 468.101C295.619 474.25 273.433 462.033 267.285 440.815L179.201 136.846Z", fill: "#0DB7FF" }),
+      /* @__PURE__ */ e.jsx("path", { d: "M206.488 87.2932C185.269 93.4418 173.053 115.627 179.201 136.846L254.874 397.986L303.989 127.432C307.935 105.696 293.513 84.8767 271.777 80.9308L245.134 76.0943L206.488 87.2932Z", fill: "#EC83FD" }),
+      /* @__PURE__ */ e.jsx("path", { d: "M401 404C401 416.703 390.703 427 378 427C365.297 427 355 416.703 355 404C355 391.297 365.297 381 378 381C390.703 381 401 391.297 401 404Z", fill: "#0D97D3" }),
+      /* @__PURE__ */ e.jsx("path", { d: "M144 404C144 416.703 133.703 427 121 427C108.297 427 98 416.703 98 404C98 391.297 108.297 381 121 381C133.703 381 144 391.297 144 404Z", fill: "#6616CB" })
+    ] }),
+    /* @__PURE__ */ e.jsx("defs", { children: /* @__PURE__ */ e.jsxs("filter", { id: "filter0_i_40_60", x: "3", y: "39", width: "503.881", height: "432.679", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [
+      /* @__PURE__ */ e.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+      /* @__PURE__ */ e.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+      /* @__PURE__ */ e.jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+      /* @__PURE__ */ e.jsx("feOffset", { dx: "-2" }),
+      /* @__PURE__ */ e.jsx("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
+      /* @__PURE__ */ e.jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0" }),
+      /* @__PURE__ */ e.jsx("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_40_60" })
+    ] }) })
+  ] }),
+  /* @__PURE__ */ e.jsx("span", { children: "ShotEasy" })
+] }) }), Xo = ({ children: o }) => /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex justify-end items-end gap-2 dark:text-gray-300", children: [
+  o,
+  /* @__PURE__ */ e.jsx("a", { href: "https://github.com/CH563/image-beautifier", target: "_blank", "aria-label": "GitHub", className: "block rounded-full p-2 hover:bg-slate-100 dark:hover:bg-slate-700", children: /* @__PURE__ */ e.jsx("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "github", width: "16", height: "16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ e.jsx("path", { d: "M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" }) }) }),
+  /* @__PURE__ */ e.jsx("a", { href: "https://twitter.com/LiWen563", target: "_blank", "aria-label": "twitter:@LiWen563", className: "block rounded-full p-2 dark:hover:bg-slate-700", children: /* @__PURE__ */ e.jsx("svg", { fill: "currentColor", viewBox: "0 0 24 24", width: "16", height: "16", "aria-hidden": "true", children: /* @__PURE__ */ e.jsx("g", { children: /* @__PURE__ */ e.jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) }) }) })
+] }), Qo = ["Square", "SquareFill", "Circle", "Slash", "MoveDownLeft", "Pencil", "Step", "Smile"], $o = B(({ headLeft: o, headRight: t }) => {
+  const [n, s] = O(!1), a = (d) => {
+    if (!i.editor.isEditing) return;
+    const { useTool: p } = i.editor;
+    i.editor.setUseTool(p === d ? null : d), s(!1);
+  }, l = (d) => {
+    if (!i.editor.isEditing) return;
+    const p = i.option.frameConf.width / 2 - 24, m = i.option.frameConf.height / 2 - 24;
+    i.editor.setUseTool(null), s(!1), i.editor.addShape({
+      id: ge(),
+      type: "emoji",
+      text: d,
+      zIndex: i.editor.shapes.size + 1,
+      x: p,
+      y: m,
+      editable: !0
+    });
+  }, h = () => {
+    if (!i.editor.isEditing) return;
+    const d = !n;
+    i.editor.setUseTool(null), s(d), i.editor.app.config.move.drag = d;
+  }, f = () => {
+    i.editor.setTheme(), localStorage.setItem("SHOTEASY_BEAUTIFIER_THEME", i.editor.theme);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-center shrink-0 gap-3 bg-white dark:bg-black py-2 px-5 border-b border-b-gray-50 dark:border-b-gray-700 shadow-sm relative z-[11] select-none", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "flex-1", children: o || /* @__PURE__ */ e.jsx(qo, {}) }),
+    /* @__PURE__ */ e.jsx("div", { className: "flex gap-1 justify-center items-center", children: Qo.map((d) => {
+      if (d === "Smile") return /* @__PURE__ */ e.jsx(Jo, { disabled: !1, theme: i.editor.isDark ? "dark" : "light", toSelect: l }, d);
+      let p;
+      if (d.includes("Fill")) {
+        const m = d.replace("Fill", ""), b = dt[m];
+        p = /* @__PURE__ */ e.jsx(b, { size: 16, fill: "currentColor" });
+      } else if (d === "Step")
+        p = /* @__PURE__ */ e.jsx("div", { className: "border text-xs border-black dark:border-white w-4 h-4 rounded-full text-center leading-4", children: i.editor.nextStep }, d);
+      else {
+        const m = dt[d];
+        p = /* @__PURE__ */ e.jsx(m, { name: d, size: 16 });
+      }
+      return /* @__PURE__ */ e.jsx(
+        k,
+        {
+          type: "text",
+          shape: "circle",
+          icon: p,
+          className: i.editor.useTool === d && "text-[#1a79ff] [&_.border]:border-[#1a79ff] bg-sky-100/50 hover:bg-sky-100 hover:text-[#1a79ff] [&_.border]:hover:text-[#1a79ff]",
+          onClick: () => a(d)
+        },
+        d
+      );
+    }) }),
+    /* @__PURE__ */ e.jsx(mr, { type: "vertical" }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 justify-center items-center", children: [
+      /* @__PURE__ */ e.jsx(
+        be,
+        {
+          size: "small",
+          presets: [
+            {
+              label: "Recommended",
+              colors: [
+                "#ffffff",
+                "#444444",
+                "#df4b26",
+                "#1677ff",
+                "#52C41A",
+                "#FA8C16",
+                "#FADB14",
+                "#EB2F96",
+                "#722ED1"
+              ]
+            }
+          ],
+          value: i.editor.annotateColor,
+          onChange: (d) => i.editor.setAnnotateColor(d.toHexString())
+        }
+      ),
+      /* @__PURE__ */ e.jsx(_o, { defaultValue: i.editor.strokeWidth, onChange: (d) => i.editor.setStrokeWidth(d) }),
+      /* @__PURE__ */ e.jsx(
+        k,
+        {
+          type: "text",
+          shape: "circle",
+          className: n && "text-[#1677ff] bg-sky-100/50 hover:bg-sky-100 hover:text-[#1677ff]",
+          icon: /* @__PURE__ */ e.jsx(M.Hand, { size: 16 }),
+          onClick: h
+        }
+      )
+    ] }),
+    t || /* @__PURE__ */ e.jsx(Xo, { children: /* @__PURE__ */ e.jsx(
+      k,
+      {
+        type: "text",
+        shape: "circle",
+        icon: i.editor.isDark ? /* @__PURE__ */ e.jsx(M.Sun, { size: 16 }) : /* @__PURE__ */ e.jsx(M.Moon, { size: 16 }),
+        onClick: f
+      }
+    ) })
+  ] });
+});
+function Ko(o) {
+  var t = typeof o;
+  return o != null && (t == "object" || t == "function");
+}
+var Ht = Ko, ei = typeof ue == "object" && ue && ue.Object === Object && ue, ti = ei, ri = ti, oi = typeof self == "object" && self && self.Object === Object && self, ii = ri || oi || Function("return this")(), zt = ii, si = zt, ni = function() {
+  return si.Date.now();
+}, ai = ni, li = /\s/;
+function ci(o) {
+  for (var t = o.length; t-- && li.test(o.charAt(t)); )
+    ;
+  return t;
+}
+var di = ci, fi = di, hi = /^\s+/;
+function pi(o) {
+  return o && o.slice(0, fi(o) + 1).replace(hi, "");
+}
+var ui = pi, mi = zt, gi = mi.Symbol, _t = gi, bt = _t, Et = Object.prototype, xi = Et.hasOwnProperty, bi = Et.toString, se = bt ? bt.toStringTag : void 0;
+function wi(o) {
+  var t = xi.call(o, se), n = o[se];
+  try {
+    o[se] = void 0;
+    var s = !0;
+  } catch {
+  }
+  var a = bi.call(o);
+  return s && (t ? o[se] = n : delete o[se]), a;
+}
+var yi = wi, vi = Object.prototype, ji = vi.toString;
+function Mi(o) {
+  return ji.call(o);
+}
+var Ci = Mi, wt = _t, ki = yi, Ai = Ci, Ni = "[object Null]", Ti = "[object Undefined]", yt = wt ? wt.toStringTag : void 0;
+function Si(o) {
+  return o == null ? o === void 0 ? Ti : Ni : yt && yt in Object(o) ? ki(o) : Ai(o);
+}
+var Ri = Si;
+function Di(o) {
+  return o != null && typeof o == "object";
+}
+var Hi = Di, zi = Ri, _i = Hi, Ei = "[object Symbol]";
+function Oi(o) {
+  return typeof o == "symbol" || _i(o) && zi(o) == Ei;
+}
+var Bi = Oi, Yi = ui, vt = Ht, Ii = Bi, jt = NaN, Pi = /^[-+]0x[0-9a-f]+$/i, Wi = /^0b[01]+$/i, Zi = /^0o[0-7]+$/i, Gi = parseInt;
+function Fi(o) {
+  if (typeof o == "number")
+    return o;
+  if (Ii(o))
+    return jt;
+  if (vt(o)) {
+    var t = typeof o.valueOf == "function" ? o.valueOf() : o;
+    o = vt(t) ? t + "" : t;
+  }
+  if (typeof o != "string")
+    return o === 0 ? o : +o;
+  o = Yi(o);
+  var n = Wi.test(o);
+  return n || Zi.test(o) ? Gi(o.slice(2), n ? 2 : 8) : Pi.test(o) ? jt : +o;
+}
+var Li = Fi, Ui = Ht, He = ai, Mt = Li, Vi = "Expected a function", Ji = Math.max, qi = Math.min;
+function Xi(o, t, n) {
+  var s, a, l, h, f, d, p = 0, m = !1, b = !1, C = !0;
+  if (typeof o != "function")
+    throw new TypeError(Vi);
+  t = Mt(t) || 0, Ui(n) && (m = !!n.leading, b = "maxWait" in n, l = b ? Ji(Mt(n.maxWait) || 0, t) : l, C = "trailing" in n ? !!n.trailing : C);
+  function A(D) {
+    var G = s, U = a;
+    return s = a = void 0, p = D, h = o.apply(U, G), h;
+  }
+  function x(D) {
+    return p = D, f = setTimeout(_, t), m ? A(D) : h;
+  }
+  function w(D) {
+    var G = D - d, U = D - p, K = t - G;
+    return b ? qi(K, l - U) : K;
+  }
+  function S(D) {
+    var G = D - d, U = D - p;
+    return d === void 0 || G >= t || G < 0 || b && U >= l;
+  }
+  function _() {
+    var D = He();
+    if (S(D))
+      return E(D);
+    f = setTimeout(_, w(D));
+  }
+  function E(D) {
+    return f = void 0, C && s ? A(D) : (s = a = void 0, h);
+  }
+  function ye() {
+    f !== void 0 && clearTimeout(f), p = 0, s = d = a = f = void 0;
+  }
+  function ve() {
+    return f === void 0 ? h : E(He());
+  }
+  function $() {
+    var D = He(), G = S(D);
+    if (s = arguments, a = this, d = D, G) {
+      if (f === void 0)
+        return x(d);
+      if (b)
+        return clearTimeout(f), f = setTimeout(_, t), A(d);
+    }
+    return f === void 0 && (f = setTimeout(_, t)), h;
+  }
+  return $.cancel = ye, $.flush = ve, $;
+}
+var Qi = Xi;
+const $i = /* @__PURE__ */ Ro(Qi), Ki = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFHGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDI0LTA0LTE1VDEyOjUwOjI3KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wNC0xNVQxMjo1MzowOSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNC0wNC0xNVQxMjo1MzowOSswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxNTY3NDQxZC1lYmQxLWIwNGUtOWUwOS0yMWQ1Mjk3NzAxNzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTU2NzQ0MWQtZWJkMS1iMDRlLTllMDktMjFkNTI5NzcwMTczIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MTU2NzQ0MWQtZWJkMS1iMDRlLTllMDktMjFkNTI5NzcwMTczIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoxNTY3NDQxZC1lYmQxLWIwNGUtOWUwOS0yMWQ1Mjk3NzAxNzMiIHN0RXZ0OndoZW49IjIwMjQtMDQtMTVUMTI6NTA6MjcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7YEaJEAAAFqUlEQVRoge2Z709TVxjHT2kpFMpCLdSWdiWYFVK0IAV0yBqNYQ2CI062ie4PcJq9QZAfmRq0UwQmIRjjFBeXOJfAYHEYZ81ixQUmJhbkBb9aSotcpHDbYltbU0t69+LqXQPa9Nyit0v6zXlx2p7v8zyfe0977jmlYRgG/s+KorqAUBUBoFoRAKoVAaBaEQCqFQGgWhEAqsUIfqjZbG5parI7HLV1dRKJZPUAt9uNoqhucvKfgQGTyYRaLAtmMwBAIpGkpqbKsrJy5PLU1NS4uLg1Kx8AgAWtcy0tdADoANTX1vp8Pv+PrFZrT3f3gf37JRs24GPe2AQ83tcHDvx6/brFYgk+b2BBABytqsLr+PbwYY/Hg7/pdDp/6+r6rLQ0hsEIUPqKVlpc/HtPj9frDR0AYgpFRb36wtBoNBqNBgAYGhpSNTTcvn17eXmZGCaRSKRS6YdisSAlZR2HgyCI0WhEEGTk8WOHw4GPUavVmnv3KioqVKdPC4XC9zSF6mpq8OtXVVmJYVhXZ+dHaWnERWUxmV+Vl/9y7dro6OjS0tLy8jJhdLlc8/Pz9/v6TjY05GRn+9+Kop07dTpdKHeADMA3Bw+ebWzkJibiLxk02u6Skr6+PqfTGTiCz+czm82qU6dEKSkEw+asrIeDg+8VQMDjxcfG4v342NiWpqYXL15AZR0YGMiTy/0ZDAYDZOWvRAaAaHExMa3nzpFLPDo6qigsJEJ9vmePy+UiEYc8ADcx8ceLF0mkJDQ9Pb01Px+PxqTTz7e3kwhCHqCstPTp06cGg2HqtfR6/bNnz6DSa7VakUCAB9wklZpMJsj6YQBqqqv9AVLWr5dt3JiZkUE0aXr67pKSmZkZqArOnjlDxGxpboasHwbgu/r6YBapjsuXoSqw2Wxb8vJwr3zzZgRBoOwQD3OFCkVSUlJCQsIHb1duXt6OHTugFiIOh1N55Ai+Mk7p9dPT01B2iJVYqVT+pdHMPnlCrMT+wjCMwWBIMzNFIhFUBQCAjwsKxGLxzMyMy+XS6XQKhQLCDHW/3pGcTmfFvn34LDp86BCUNyz2A2w2WyaT4X2DXg/lDQsAAACfz8c7iygKZQwXgOTkZBaLBQBAFxehjOECwGazmUwmAOD58+dQxnABWFxcdLvdAIB1XC6UMVwAUBT1er0AAF5yMpQxLABevnw5OTGB95PeHQCGYT9duVJYUHD50iVsTf9ZW1hY0Ny9i/ezs7PhzMEvGWNjY2KhkA4Aj8vVarVQy01g/XHjBvEo1dPdDeWFuANxLFYihwMAsFqt59vb8SkbuhwOx4ULF/C+QCBIz8iA80Ph/vD6aIjFZN5Rq6G8b9PZxkb/PYbD4YCywwGYTCZZZiaeLE8un52dhbKv1uPhYWJDw2axujo7YSNAP8y1t7VFR0XhKUt27VpaWoKNQMhsNn+ybRtx+b/cu9ftdsMGgQaw2+3KoiIia7FSqdfrYYNgGIYgyJ6ysv/2dzzePY2GRBwyj9PDQ0NpYjGRe2t+/t/370NF6O/v35Kb63+60dbauuK8NUiR3A/c7O0V8fn+p7Ynjh+fn5/3P5BbLa/Xq9PpGk6cEItEhJdJpx8/doxcGRhpAAzDBh88WHFOmC2T1dfW3lGrjUaj1Wr1eDw+n8/tdttsNsPU1M3e3qrKSuIrizeRQNDS3BwYO7BoWAhr6uTExNHq6j9v3fJ/k8FgbJLJ+AKBSChMSEhAUdRms80hyMjIyAq7QqFoUKm2b99OugAAQt5S2u32n69e9f8xCaZlSCTfq1SwBxBv1Nrsiefm5q50dHxRXr4+KSlw6bk5OadOnhwfH1+TvFiIU2iFXC6X0Wh8ODioffTIYrFYLBar1RodHR0fH89ms3Pk8k+VyvT0dD6fv/pQg7TWEoAShcV+IBRFAKhWBIBqRQCoVgSAakUAqFYEgGr9C1O6hDD/uqSdAAAAAElFTkSuQmCC", es = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAPqSURBVFiFxdZ/TFVlGMDx7/seLnjFewE3B1xwM62tlGJYSCIBBbv2g8JMakaptZpzi2T2Y/lPqzblnzYG/cVG2tJ+mavl1qZm05rSykEO0QDBgIvA5e4yvRe4F7ic0x90b5d7D4JwWM9f55w9z57P+7xn7zmkHRj4Ie3AQBH/U8SgUrPCohx/97z3aFqiqQ20YdCGhSpvTSqqB5ThSx3t7oOl9zsXAyAAPrkwUptqlRV6CT6fv6dye1HqePL63d6G+sNGAySAzapc023u9/dWbtuY7u5sMo00Hfs09a0L+YsC0ITm0W1elmdz97RKACVppVCWrzmRfnAgx3iApnl1m3ddkcFn5nvtAAlonDISMbU6ZAjg8/t7K5/bOK05QGx6VvDSUMTUBFTVG2q+bVNo7NMSLSnht4YhpgAxije08u6rUc1zcvN446kMMm0mwxESoKWt1bX3hUeT9Vaek5vHiVPn2FOYwqGyJErXmSMRJ1dW9WcvCPDB1szBMVvOTmlO0CITHil4DCmnXFLA+8WWSESipoqf5juJ0IpHztd9Zc4q2yGXWKchfjl7BlVV/yvQR8x7O5TwmwlHU/PSh3e1T7o6tmqBMQHQ1+vgRq+DzU8+gxACACGgYE0cQ6MqV52BYPkSoMxa/PZZz88f35gXAGCip7ElEtHSfIn+oWHsdjv/GhBA3l0LR0QBQogNL3dOujqeDSIuN/6G954yCteuMBShCwD97bjS2o5n9RYKVscZhpgRANHbEXBfp2vZQ7hi0g1D3BYQQoRtx7ijEUd6KU5frCGIWQEwfTsmPf1iou8yDlsJzhHIj0BsWhXHX4MBem5OzgkxJ0DkJCYG20XA/TfdywtxjsrpCAGxMYLT7WPh5TMioo7e28VIQ/3RZdnlO6Q5QRtt/p7BuhK+a+jkozNe1LDjq9Md0CtPQOPkkeoj68MfijsBBCM+b/d2X+PXX6i+W0KaE7DkV/BEeQVbMq1cdweovzjKeCDqVKdeOX5us7iWhWSzeKfm93kDAOJzX3vJ13Tsc9XvEQBKYhrxD76I+b7HMaWui8r/TPn21yLREfylu4mqFYv9tY3zBughgqEkphFrewDFmoqIXcqXhSl/lMS7NkSU96GOZ8z5JdQLvcMKQPN7Cbg6GO/9kzp7RtfzKYHokYAFIX0LAoD+tyMYh19/tWvX3ZZVMxYLEb9gwEyIWZtPhWYIIBJx6JXy7jk0B0Hbgl5CvXhvZ4W9aq38BkicPVt8aDgAQKvam43k9CyIfkwy445OwrmG2F9zEVUrBvpmbK5qT4t91UOLMoFgaFV7kpCmN0GUAMmAE8SPmESt2Fc9BPAP1KEkwmzcLhwAAAAASUVORK5CYII=", ts = (o, t) => t instanceof Array ? t.map((n) => it.toArray(n).map(
+  (s) => st(s, { ...o })
+)) : it.toArray(t).map(
+  (s) => st(s, { ...o })
+), rs = ({ width: o, height: t, background: n, parent: s, children: a, cursor: l }) => {
+  const h = le(() => {
+    const f = new xo({
+      width: o,
+      height: t,
+      overflow: "hide",
+      fill: n,
+      cursor: "auto"
+    });
+    return f.name = "frame", f;
+  }, []);
+  return N(() => {
+    h.width = o, h.height = t, h.fill = n;
+  }, [o, t, n]), N(() => {
+    h.cursor = l || "auto";
+  }, [l]), N(() => (s.add(h), () => {
+    h.remove();
+  }), [s]), /* @__PURE__ */ e.jsx(e.Fragment, { children: ts({ parent: h }, a) });
+}, os = `
+<svg width="43" height="32" viewBox="0 0 52 38" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 24.75C9.17564 24.75 11.75 22.1756 11.75 19C11.75 15.8244 9.17564 13.25 6 13.25C2.82436 13.25 0.25 15.8244 0.25 19C0.25 22.1756 2.82436 24.75 6 24.75Z" fill="#FF5F57" stroke="black" stroke-opacity="0.2" stroke-width="0.5"></path><path d="M26 24.75C29.1756 24.75 31.75 22.1756 31.75 19C31.75 15.8244 29.1756 13.25 26 13.25C22.8244 13.25 20.25 15.8244 20.25 19C20.25 22.1756 22.8244 24.75 26 24.75Z" fill="#FEBC2E" stroke="black" stroke-opacity="0.2" stroke-width="0.5"></path><path d="M46 24.75C49.1756 24.75 51.75 22.1756 51.75 19C51.75 15.8244 49.1756 13.25 46 13.25C42.8244 13.25 40.25 15.8244 40.25 19C40.25 22.1756 42.8244 24.75 46 24.75Z" fill="#28C840" stroke="black" stroke-opacity="0.2" stroke-width="0.5"></path></svg>
+`, is = _e(os), ss = B(({ parent: o }) => {
+  const t = ne(null), [n, s, a] = le(() => {
+    const l = new ae({
+      origin: "center",
+      fill: {
+        type: "image",
+        url: i.editor.img.src
+      }
+    }), h = new ft({
+      overflow: "hide",
+      children: [l]
+    }), f = new ft({
+      overflow: "hide",
+      strokeAlign: "outside",
+      scale: 1,
+      fill: "#ffffff00",
+      children: [h]
+    });
+    return [l, h, f];
+  }, [o]);
+  return N(() => {
+    i.option.padding === 0 ? s.fill = "#ffffff00" : s.fill = i.option.paddingBg;
+  }, [i.option.paddingBg, i.option.padding]), N(() => {
+    const { round: l } = i.option;
+    a.cornerRadius = l, t.current ? (t.current.cornerRadius = [l, l, 0, 0], s.cornerRadius = [0, 0, l, l], n.cornerRadius = [0, 0, l, l]) : (s.cornerRadius = l, n.cornerRadius = l);
+  }, [i.option.round]), N(() => {
+    const { shadow: l } = i.option;
+    l === 0 ? a.shadow = null : a.shadow = {
+      x: l * 4,
+      y: l * 4,
+      blur: l * 3,
+      color: "#00000045",
+      box: !0
+    };
+  }, [i.option.shadow]), N(() => {
+    a.scale = i.option.scale;
+  }, [i.option.scale]), N(() => {
+    n.url = i.editor.img.src;
+  }, [i.editor.img.src]), N(() => {
+    n.scaleX = i.option.scaleX ? -1 : 1;
+  }, [i.option.scaleX]), N(() => {
+    n.scaleY = i.option.scaleY ? -1 : 1;
+  }, [i.option.scaleY]), N(() => {
+    const { align: l, round: h, frame: f, frameConf: d } = i.option, p = we(d.width, d.height), { width: m, height: b } = Yo(i.editor.img.width, i.editor.img.height, d.width - p, d.height - p);
+    let C = b;
+    switch (f) {
+      case "light":
+        a.strokeWidth = 8, a.stroke = "#ffffff80";
+        break;
+      case "dark":
+        a.strokeWidth = 8, a.stroke = "#00000050";
+        break;
+      case "macosBarLight":
+      case "macosBarDark":
+        C += 32, t.current = new ae({
+          x: 0,
+          y: 0,
+          height: 32,
+          width: m,
+          cornerRadius: [h, h, 0, 0],
+          draggable: !0,
+          fill: [
+            { type: "solid", color: f.includes("Dark") ? "#3a3a3b" : "#ffffff" },
+            { type: "image", url: is, format: "svg", mode: "clip", offset: { x: 10, y: 0 } }
+          ]
+        }), a.addAfter(t.current, s), s.cornerRadius = [0, 0, h, h], n.cornerRadius = [0, 0, h, h];
+        break;
+      default:
+        a.strokeWidth = null, a.stroke = null;
+    }
+    const { x: A, y: x } = Po(l, d.width - m, d.height - C);
+    a.width = m, a.height = C, a.origin = l, a.x = A, a.y = x, s.width = m, s.height = b, s.x = 0, s.y = C - b;
+    const w = m - i.option.padding, S = Math.round(w * b / m);
+    return n.width = w + 2, n.height = S + 2, n.x = i.option.padding / 2 - 1, n.y = (b - S) / 2 - 1, () => {
+      var _;
+      a.strokeWidth = null, a.stroke = null, (_ = t.current) == null || _.remove(), t.current = null, s.cornerRadius = i.option.round, n.cornerRadius = i.option.round;
+    };
+  }, [i.option.frameConf.width, i.option.frameConf.height, i.option.padding, i.option.align, i.option.frame]), N(() => (o.add(a), () => {
+    a.remove();
+  }), [o]), null;
+}), ns = B(({ parent: o }) => {
+  const t = le(() => new ae({
+    x: 0,
+    y: 0
+  }), [o]);
+  return N(() => {
+    t.width = i.option.frameConf.width, t.height = i.option.frameConf.height;
+  }, [i.option.frameConf.width, i.option.frameConf.height]), N(() => {
+    t.zIndex = i.option.waterIndex;
+  }, [i.option.waterIndex]), N(() => {
+    t.fill = {
+      type: "image",
+      url: i.option.waterSvg,
+      mode: "repeat",
+      format: "svg",
+      size: Math.round(i.option.frameConf.width / 6)
+    };
+  }, [i.option.waterSvg, i.option.frameConf.width]), N(() => (o.add(t), () => {
+    t.remove();
+  }), []), null;
+}), as = ({ parent: o, type: t, id: n, width: s, height: a, x: l, y: h, fill: f, strokeWidth: d, zIndex: p, points: m, editable: b, text: C }) => {
+  const A = le(() => {
+    const x = { id: n, x: l, y: h, zIndex: p };
+    return t === "SquareFill" ? new ae({
+      cornerRadius: 8,
+      width: s,
+      height: a,
+      fill: f,
+      ...x
+    }) : t === "Circle" ? new ht({
+      stroke: f,
+      strokeWidth: d,
+      width: s,
+      height: a,
+      ...x
+    }) : t === "Slash" ? new pt({
+      id: n,
+      points: m,
+      zIndex: p,
+      stroke: f,
+      strokeWidth: d
+    }) : t === "MoveDownLeft" ? new Ao({
+      id: n,
+      points: m,
+      zIndex: p,
+      strokeCap: "round",
+      strokeJoin: "round",
+      stroke: f,
+      strokeWidth: d
+    }) : t === "Pencil" ? new pt({
+      id: n,
+      points: m,
+      zIndex: p,
+      curve: !0,
+      stroke: f,
+      strokeWidth: d
+    }) : t === "Step" ? new ht({
+      ...x,
+      width: 32,
+      height: 32,
+      stroke: "#ffffff90",
+      strokeWidth: 2,
+      strokeAlign: "outside",
+      lockRatio: !0,
+      shadow: {
+        x: 1,
+        y: 1,
+        blur: 2,
+        color: "#00000045",
+        box: !0
+      },
+      fill: [
+        {
+          type: "solid",
+          color: f
+        },
+        {
+          type: "image",
+          url: Go(C),
+          format: "svg",
+          align: "center"
+        }
+      ]
+    }) : t === "emoji" ? new bo({
+      id: n,
+      zIndex: p,
+      text: C,
+      resizeFontSize: !0,
+      fontSize: 48
+    }) : new ae({
+      cornerRadius: 8,
+      stroke: f,
+      strokeWidth: d,
+      width: s,
+      height: a,
+      ...x
+    });
+  }, [o]);
+  return N(() => {
+    ["Slash", "MoveDownLeft", "Pencil"].includes(t) ? A.points = m : t === "Step" || (A.x = l, A.y = h, A.width = s, A.height = a);
+  }, [l, h, s, a]), N(() => {
+    A.editable = !!b;
+  }, [b]), N(() => (o.add(A), () => {
+    A.remove();
+  }), [o]), null;
+}, ls = B(() => (N(() => {
+  const o = (s) => {
+    var l;
+    const { list: a } = (l = i.editor.app) == null ? void 0 : l.editor;
+    if (a != null && a.length) {
+      for (let h of a)
+        h.remove(), i.editor.removeShape(h);
+      i.editor.app.editor.cancel();
+    }
+  }, t = (s) => {
+    var a, l;
+    s === "fit" ? (a = i.editor.app) == null || a.tree.zoom(s, 100) : (l = i.editor.app) == null || l.tree.zoom(s), i.editor.setScale(i.editor.app.tree.scale);
+  }, n = Rt(window, {
+    Backspace: o,
+    Delete: o,
+    "$mod+Minus": (s) => {
+      s.preventDefault(), t("out");
+    },
+    "$mod+Equal": (s) => {
+      s.preventDefault(), t("in");
+    },
+    "$mod+Digit0": (s) => {
+      s.preventDefault(), t("fit");
+    }
+  });
+  return () => {
+    n();
+  };
+}, [window]), null));
+wo.set("pencil", { url: es });
+const cs = B(({ target: o }) => {
+  var t, n;
+  return N(() => {
+    const s = new yo({
+      view: o,
+      editor: {
+        lockRatio: "corner",
+        stroke: "#3f99f7",
+        skewable: !1,
+        hover: !1,
+        middlePoint: { cornerRadius: 100, width: 20, height: 6 },
+        rotatePoint: {
+          width: 20,
+          height: 20,
+          fill: {
+            type: "image",
+            url: Ki
+          }
+        }
+      },
+      tree: {
+        usePartRender: !0
+      },
+      sky: {
+        type: "draw",
+        usePartRender: !0
+      }
+    });
+    new No(s), i.editor.setApp(s), s.tree.on(vo.ZOOM, () => {
+      i.editor.setScale(s.tree.scale);
+    }), s.tree.on(jo.RESIZE, () => {
+      i.editor.setScale(s.tree.scale);
+    });
+    let a = null;
+    const l = (f) => {
+      if (!i.editor.useTool) return;
+      const { target: d } = f;
+      if (i.editor.getShape(d.id)) return;
+      a = ge();
+      const m = f.getPageBounds ? f.getPageBounds() : f.getPage(), b = i.editor.useTool;
+      return {
+        id: a,
+        type: b,
+        fill: i.editor.annotateColor,
+        strokeWidth: i.editor.strokeWidth,
+        zIndex: i.editor.shapes.size + 1,
+        ...m
+      };
+    };
+    s.tree.on(Mo.DOWN, (f) => {
+      if (i.editor.useTool !== "Step") return;
+      const p = l(f);
+      p && (p.text = i.editor.nextStep, p.editable = !0, i.editor.addShape(p), a = null, i.editor.setUseTool(null));
+    }), s.tree.on(De.START, (f) => {
+      const d = i.editor.useTool;
+      if (d === "Step") return;
+      const p = l(f);
+      p && (["Slash", "MoveDownLeft", "Pencil"].includes(d) && (p.points = [p.x, p.y]), i.editor.addShape(p));
+    }), s.tree.on(De.DRAG, (f) => {
+      if (!i.editor.useTool || !a) return;
+      const d = i.editor.getShape(a);
+      if (!d) return;
+      const p = f.getPageBounds(), m = Object.assign({}, d, p), { points: b, type: C } = m;
+      if (b && b.length) {
+        const { x: A, y: x } = f.getInnerTotal(), w = A > 0 ? p.x + A : p.x, S = x > 0 ? p.y + x : p.y;
+        C === "Pencil" ? m.points = [...b, w, S] : m.points = [b[0], b[1], w, S];
+      }
+      i.editor.addShape(m);
+    }), s.tree.on(De.END, () => {
+      if (!i.editor.useTool || !a) return;
+      const f = i.editor.getShape(a);
+      f && ((f.width === 0 || f.height === 0) && !["Slash", "MoveDownLeft", "Pencil"].includes(f.type) ? i.editor.removeShape(f) : i.editor.addShape(Object.assign({}, f, { editable: !0 }))), a = null, i.editor.useTool !== "Pencil" && i.editor.setUseTool(null);
+    });
+    const h = $i(() => {
+      const { width: f, height: d } = o.getBoundingClientRect();
+      s.tree.zoom("fit", 100), i.option.frameConf.width < f && i.option.frameConf.height < d && s.tree.zoom(1);
+    }, 10);
+    return Co(o, h), () => {
+      ko(o, h), i.editor.destroy();
+    };
+  }, [o]), N(() => {
+    const s = setTimeout(() => {
+      const { width: a, height: l } = o.getBoundingClientRect();
+      i.editor.app.tree.zoom("fit", 100), i.option.frameConf.width < a && i.option.frameConf.height < l && i.editor.app.tree.zoom(1), i.editor.setScale(i.editor.app.tree.scale);
+    }, 20);
+    return () => {
+      clearTimeout(s);
+    };
+  }, [i.option.frameConf.width, i.option.frameConf.height]), (t = i.editor.app) != null && t.tree ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs(rs, { parent: i.editor.app.tree, cursor: i.editor.cursor, ...i.option.frameConf, children: [
+      i.editor.shapesList.map((s) => /* @__PURE__ */ e.jsx(as, { ...s }, s.id)),
+      ((n = i.editor.img) == null ? void 0 : n.src) && /* @__PURE__ */ e.jsx(ss, {}),
+      i.option.waterImg && /* @__PURE__ */ e.jsx(ns, {})
+    ] }),
+    /* @__PURE__ */ e.jsx(ls, {})
+  ] }) : null;
+}), ds = [
+  {
+    key: 0.5,
+    label: "50%"
+  },
+  {
+    key: 1,
+    label: "100%"
+  },
+  {
+    key: 1.5,
+    label: "150%"
+  },
+  {
+    key: 2,
+    label: "200%"
+  }
+], fs = B(() => {
+  const o = (n) => {
+    var s;
+    (s = i.editor.app) == null || s.tree.zoom(n), i.editor.setScale(i.editor.app.tree.scale);
+  }, t = (n) => {
+    var a, l;
+    const s = Number(n.key);
+    s === 4 ? (a = i.editor.app) == null || a.tree.zoom("fit", 100) : (l = i.editor.app) == null || l.tree.zoom(s), i.editor.setScale(i.editor.app.tree.scale);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "absolute z-10 bottom-4 gap-2 right-4 flex items-center ", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex bg-white dark:bg-black overflow-hidden rounded-full shadow-md", children: [
+      /* @__PURE__ */ e.jsx(k, { type: "text", icon: /* @__PURE__ */ e.jsx(M.ZoomIn, { size: 16 }), onClick: () => o("in") }),
+      /* @__PURE__ */ e.jsx(At, { menu: { items: ds, onClick: t }, placement: "top", children: /* @__PURE__ */ e.jsxs(k, { type: "text", children: [
+        i.editor.scale,
+        "%"
+      ] }) }),
+      /* @__PURE__ */ e.jsx(k, { type: "text", icon: /* @__PURE__ */ e.jsx(M.ZoomOut, { size: 16 }), onClick: () => o("out") })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "rounded-full bg-white dark:bg-black shadow-md overflow-hidden", children: /* @__PURE__ */ e.jsx(k, { type: "text", icon: /* @__PURE__ */ e.jsx(M.Maximize, { size: 16 }), onClick: () => t({ key: 4 }) }) })
+  ] });
+}), hs = B(() => {
+  const [o, t] = O(null);
+  return /* @__PURE__ */ e.jsxs("div", { className: "md:w-0 md:flex-1 overflow-hidden select-none relative", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "w-full h-full relative z-0", ref: (n) => t(n), children: o && /* @__PURE__ */ e.jsx(cs, { target: o }) }),
+    /* @__PURE__ */ e.jsx(fs, {})
+  ] });
+}), ps = [
+  {
+    key: "default",
+    title: "Default",
+    lists: [
+      {
+        width: 1920,
+        height: 1080,
+        w: 16,
+        h: 9
+      },
+      {
+        width: 1920,
+        height: 1280,
+        w: 3,
+        h: 2
+      },
+      {
+        width: 1920,
+        height: 1440,
+        w: 4,
+        h: 3
+      },
+      {
+        width: 1920,
+        height: 1536,
+        w: 5,
+        h: 4
+      },
+      {
+        width: 1920,
+        height: 1920,
+        w: 1,
+        h: 1
+      },
+      {
+        width: 1080,
+        height: 1350,
+        w: 4,
+        h: 5
+      },
+      {
+        width: 1080,
+        height: 1440,
+        w: 3,
+        h: 4
+      },
+      {
+        width: 1080,
+        height: 1620,
+        w: 2,
+        h: 3
+      },
+      {
+        width: 1080,
+        height: 1920,
+        w: 9,
+        h: 16
+      }
+    ]
+  },
+  {
+    key: "instagram",
+    title: "Instagram",
+    lists: [
+      {
+        title: "Post",
+        width: 1080,
+        height: 1080,
+        w: 1,
+        h: 1
+      },
+      {
+        title: "Portrait",
+        width: 1080,
+        height: 1350,
+        w: 4,
+        h: 5
+      },
+      {
+        title: "Stroy",
+        width: 1080,
+        height: 1920,
+        w: 9,
+        h: 16
+      }
+    ]
+  },
+  {
+    key: "x",
+    title: "X",
+    lists: [
+      {
+        title: "Tweet",
+        width: 1200,
+        height: 675,
+        w: 16,
+        h: 9
+      },
+      {
+        title: "Cover",
+        width: 1500,
+        height: 500,
+        w: 3,
+        h: 1
+      }
+    ]
+  },
+  {
+    key: "youtube",
+    title: "YouTube",
+    lists: [
+      {
+        title: "Banner",
+        width: 2560,
+        height: 1440,
+        w: 16,
+        h: 9
+      },
+      {
+        title: "Thumbnail",
+        width: 1280,
+        height: 720,
+        w: 16,
+        h: 9
+      },
+      {
+        title: "Video",
+        width: 1920,
+        height: 1080,
+        w: 16,
+        h: 9
+      }
+    ]
+  },
+  {
+    key: "pinterest",
+    title: "Pinterest",
+    lists: [
+      {
+        title: "Long",
+        width: 1e3,
+        height: 2100,
+        w: 10,
+        h: 21
+      },
+      {
+        title: "Optimal",
+        width: 1e3,
+        height: 1500,
+        w: 2,
+        h: 3
+      },
+      {
+        title: "Square",
+        width: 1e3,
+        height: 1e3,
+        w: 1,
+        h: 1
+      }
+    ]
+  }
+], us = ({ frameWidth: o, frameHeight: t, type: n, onSet: s }) => {
+  const [a, l] = O(""), [h, f] = O(""), d = () => {
+    s({ type: "auto", title: "Auto" });
+  }, p = () => {
+    s({ type: "custom", title: "Custom", width: a, height: h });
+  };
+  return N(() => {
+    n === "custom" ? (l(o), f(t)) : (l(""), f(""));
+  }, [n]), /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center py-2 font-normal", children: [
+    /* @__PURE__ */ e.jsx(
+      nt,
+      {
+        min: 1,
+        value: a,
+        onChange: l,
+        placeholder: o,
+        prefix: /* @__PURE__ */ e.jsx("span", { className: "opacity-60 mx-1", children: "W" }),
+        className: "flex-1"
+      }
+    ),
+    /* @__PURE__ */ e.jsx("span", { className: "text-xs opacity-50", children: "x" }),
+    /* @__PURE__ */ e.jsx(
+      nt,
+      {
+        min: 1,
+        value: h,
+        onChange: f,
+        placeholder: t,
+        prefix: /* @__PURE__ */ e.jsx("span", { className: "opacity-60 mx-1", children: "H" }),
+        className: "flex-1"
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      k,
+      {
+        type: "primary",
+        shape: "circle",
+        icon: /* @__PURE__ */ e.jsx(M.Check, { size: 18 }),
+        disabled: !a || !h,
+        onClick: p
+      }
+    ),
+    /* @__PURE__ */ e.jsx(L, { title: "Auto size", children: /* @__PURE__ */ e.jsx(
+      k,
+      {
+        type: "primary",
+        shape: "circle",
+        icon: /* @__PURE__ */ e.jsx(M.Maximize, { size: 18 }),
+        disabled: n === "auto",
+        onClick: d
+      }
+    ) })
+  ] });
+}, ms = B(() => {
+  var A;
+  const o = ne(null), [t, n] = O(!1), [s, a] = O(500), l = () => {
+    n(!1);
+  }, h = (x) => {
+    if (n(x), x && o.current) {
+      const { height: w, y: S } = o.current.getBoundingClientRect(), _ = document.body.clientHeight - w - S - 80;
+      a(_);
+    }
+  }, f = (x, w) => !(x !== i.option.size.type || w.height !== i.option.frameConf.height || w.width !== i.option.frameConf.width), d = (x) => {
+    if (l(), x.type === "auto" && i.editor.img.width) {
+      const w = we(i.editor.img.width, i.editor.img.height);
+      i.option.setSize({ ...x, width: i.editor.img.width + w, height: i.editor.img.height + w });
+      return;
+    }
+    i.option.setSize(x);
+  }, p = (x, w, S) => {
+    l(), i.option.setSize({
+      type: x,
+      title: `${w}${S.title ? ` ${S.title} ` : " "}${S.w} : ${S.h}`,
+      width: S.width,
+      height: S.height
+    });
+  }, m = ((A = i.editor.img) == null ? void 0 : A.src) || i.option.size.type !== "auto", b = /* @__PURE__ */ e.jsx(us, { type: i.option.size.type, frameWidth: i.option.frameConf.width, frameHeight: i.option.frameConf.height, onSet: d }), C = /* @__PURE__ */ e.jsx("div", { className: "border-t border-gray-200 dark:border-gray-800 py-2 divide-y dark:divide-gray-700", "data-mode": i.editor.isDark ? "dark" : "light", children: ps.map((x) => /* @__PURE__ */ e.jsxs("div", { children: [
+    x.key !== "default" && /* @__PURE__ */ e.jsx("div", { className: "font-semibold pt-2", children: x.title }),
+    /* @__PURE__ */ e.jsx("section", { className: "flex flex-wrap items-end pb-2", children: x.lists.map((w, S) => /* @__PURE__ */ e.jsxs(
+      k,
+      {
+        type: "text",
+        className: "flex-[33%] p-3 h-auto flex-col gap-0 disabled:bg-blue-500/5 disabled:border-blue-500 disabled:cursor-default disabled:text-black",
+        disabled: f(x.key, w),
+        onClick: () => p(x.key, x.title, w),
+        children: [
+          /* @__PURE__ */ e.jsx("div", { className: "py-2 px-3 w-full", children: /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              className: "border border-black/50 bg-black/10 dark:bg-white/20 dark:border-white/40 w-full flex items-center justify-center rounded-md opacity-75",
+              style: { aspectRatio: w.w / w.h },
+              children: /* @__PURE__ */ e.jsxs("span", { children: [
+                w.w,
+                " : ",
+                w.h
+              ] })
+            }
+          ) }),
+          w.title && /* @__PURE__ */ e.jsx("div", { className: "text-xs", children: w.title }),
+          /* @__PURE__ */ e.jsxs("div", { className: "text-xs overflow-hidden text-gray-500", children: [
+            w.width,
+            " x ",
+            w.height
+          ] })
+        ]
+      },
+      S
+    )) })
+  ] }, x.key)) });
+  return /* @__PURE__ */ e.jsx(
+    xe,
+    {
+      content: C,
+      title: b,
+      trigger: "click",
+      arrow: !1,
+      placement: "bottomRight",
+      open: t,
+      overlayClassName: Z("shoteasy-components [&_.ant-popover-inner]:h-full [&_.ant-popover-inner]:overflow-x-hidden [&_.ant-popover-inner]:overflow-y-auto [&_.ant-popover-content]:h-full", i.editor.isDark && "dark-mode"),
+      overlayStyle: {
+        width: "400px",
+        height: `${s}px`
+      },
+      onOpenChange: h,
+      children: /* @__PURE__ */ e.jsxs("div", { className: Z("px-3 py-1.5 border shrink-0 border-gray-200 dark:border-gray-700 gap-3 shadow-sm overflow-hidden max-h-12 rounded-md hover:border-blue-500 [&_svg]:hover:text-blue-500 cursor-pointer flex items-center", t && "shadow-md"), ref: o, children: [
+        /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            className: "border border-black/50 bg-black/10 dark:bg-white/20 dark:border-white/40 w-4 rounded-sm",
+            style: { aspectRatio: i.option.frameConf.width / i.option.frameConf.height }
+          }
+        ),
+        /* @__PURE__ */ e.jsxs("div", { className: "text-xs", children: [
+          /* @__PURE__ */ e.jsx("div", { className: "font-semibold leading-3 mb-0.5", children: i.option.size.title }),
+          m ? /* @__PURE__ */ e.jsxs("div", { className: "text-gray-500 leading-3", children: [
+            i.option.frameConf.width,
+            " x ",
+            i.option.frameConf.height,
+            " px"
+          ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-gray-500 leading-3", children: "Adaptive screenshot size" })
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
+        t ? /* @__PURE__ */ e.jsx(M.ChevronUp, { size: 16 }) : /* @__PURE__ */ e.jsx(M.ChevronDown, { size: 16 })
+      ] })
+    }
+  );
+}), gs = B(() => {
+  const o = ne(null), [t, n] = O(!1), s = () => {
+    n(!0);
+  }, a = () => {
+    var h, f;
+    if (typeof ((h = o.current) == null ? void 0 : h.cropper) < "u") {
+      const d = (f = o.current) == null ? void 0 : f.cropper.getCroppedCanvas();
+      if (d) {
+        const { width: p, height: m } = d, b = d.toDataURL();
+        if (i.editor.setImg(Object.assign({}, i.editor.img, {
+          src: b,
+          width: p,
+          height: m
+        })), i.option.size.type === "auto") {
+          const C = we(p, m);
+          i.option.setFrameSize(p + C, m + C);
+        }
+      }
+    }
+    n(!1);
+  }, l = () => {
+    n(!1);
+  };
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(L, { title: "Crop Image", children: /* @__PURE__ */ e.jsx(
+      k,
+      {
+        type: "text",
+        shape: "circle",
+        icon: /* @__PURE__ */ e.jsx(M.Crop, { size: 18 }),
+        onClick: s
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(
+      gr,
+      {
+        title: "Cropper",
+        open: t,
+        onOk: a,
+        onCancel: l,
+        destroyOnClose: !0,
+        children: /* @__PURE__ */ e.jsx(
+          So,
+          {
+            ref: o,
+            style: { height: 400, width: "100%" },
+            zoomTo: 0.5,
+            initialAspectRatio: i.editor.img.width / i.editor.img.height,
+            src: i.editor.img.src,
+            dragMode: "move",
+            viewMode: 1,
+            minCropBoxHeight: 10,
+            minCropBoxWidth: 10,
+            background: !1,
+            responsive: !0,
+            autoCropArea: 1,
+            checkOrientation: !1,
+            guides: !0
+          }
+        )
+      }
+    )
+  ] });
+}), xs = ["top-left", "top", "top-right", "left", "center", "right", "bottom-left", "bottom", "bottom-right"], bs = B(() => {
+  const [o, t] = O(!1), n = (l) => {
+    t(l);
+  }, s = (l) => {
+    i.option.setAlign(l);
+  }, a = /* @__PURE__ */ e.jsx("div", { className: Z("flex flex-wrap w-24 position-block", i.option.align), children: xs.map((l) => /* @__PURE__ */ e.jsx("div", { className: "w-8 h-8 border border-[var(--c-br)] rounded-sm hover:bg-[var(--c-wb)] cursor-pointer", onClick: () => s(l) }, l)) });
+  return /* @__PURE__ */ e.jsx(
+    xe,
+    {
+      content: a,
+      trigger: "click",
+      arrow: !1,
+      placement: "bottomRight",
+      overlayClassName: Z("shoteasy-components", i.editor.isDark && "dark-mode"),
+      open: o,
+      onOpenChange: n,
+      children: /* @__PURE__ */ e.jsx(
+        k,
+        {
+          type: "text",
+          shape: "circle",
+          className: Z(o && "shadow-md"),
+          icon: /* @__PURE__ */ e.jsx(M.LayoutGrid, { size: 18 })
+        }
+      )
+    }
+  );
+}), ws = B(() => {
+  const [o, t] = O(!1), [n, s] = O("ShotEasy"), [a, l] = O("#00000030"), [h, f] = O(45), d = (p) => {
+    l(typeof p == "string" ? p : p.toRgbString());
+  };
+  return N(() => {
+    if (o && n.trim()) {
+      const p = Zo({
+        text: n,
+        color: a,
+        angleDegrees: h
+      });
+      i.option.setWaterImg(p);
+    } else
+      i.option.setWaterImg(null);
+  }, [o, n, a, h]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "[&_label]:font-semibold [&_label]:text-sm flex gap-4 items-center justify-between", children: [
+      /* @__PURE__ */ e.jsx("label", { children: "Watermark" }),
+      /* @__PURE__ */ e.jsx(at, { defaultChecked: o, onChange: t, size: "small", className: "bg-slate-200" })
+    ] }),
+    o && /* @__PURE__ */ e.jsxs("div", { className: "[&_label]:font-semibold [&_label]:text-xs grid gap-3 pl-2 pt-2", children: [
+      /* @__PURE__ */ e.jsx(xr, { defaultValue: n, placeholder: "Watermark content", onChange: (p) => s(p.target.value) }),
+      /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ e.jsx("label", { children: "Color" }),
+        /* @__PURE__ */ e.jsx(be, { value: a, onChange: d, size: "small" })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ e.jsx("label", { children: "Direction" }),
+        /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs(P.Group, { defaultValue: h, onChange: (p) => f(p.target.value), size: "small", children: [
+          /* @__PURE__ */ e.jsx(P.Button, { value: -45, children: /* @__PURE__ */ e.jsx(M.ArrowUpRight, { size: 16, className: "mt-[3px]" }) }),
+          /* @__PURE__ */ e.jsx(P.Button, { value: 45, children: /* @__PURE__ */ e.jsx(M.ArrowDownRight, { size: 16, className: "mt-[3px]" }) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ e.jsx("label", { children: "Only Background" }),
+        /* @__PURE__ */ e.jsx(at, { size: "small", onChange: (p) => i.option.setWaterIndex(p ? -1 : 1), className: "bg-slate-200" })
+      ] })
+    ] })
+  ] });
+});
+function ys(o, t, n) {
+  const s = ne(o), a = ne(t);
+  N(() => {
+    s.current = o, a.current = t;
+  }, [...n]), N(() => {
+    const l = Rt(window, {
+      "$mod+KeyS": (h) => {
+        h.preventDefault(), s.current && s.current();
+      },
+      "$mod+KeyC": (h) => {
+        h.preventDefault(), a && a.current();
+      }
+    });
+    return () => {
+      l();
+    };
+  }, [window]);
+}
+const vs = B(() => {
+  var A;
+  const [o, t] = O(!1), [n, s] = O(!1), [a, l] = O("png"), [h, f] = O(1), d = (x) => {
+    s(x);
+  }, p = async () => {
+    if (!i.editor.isEditing || o) return;
+    const x = {
+      pixelRatio: h
+    };
+    ["jpg", "webp"].includes(a) && (x.quality = 0.9, x.fill = "#ffffff");
+    const w = ge();
+    t(!0), i.editor.message.open({
+      key: w,
+      type: "loading",
+      content: "Downloading..."
+    }), await i.editor.app.tree.export(a, x).then((S) => {
+      let _ = "ShotEasy";
+      h > 1 && (_ += `@${h}`), Bo(S.data, `${_}.${a}`), i.editor.message.open({
+        key: w,
+        type: "success",
+        content: "Download Success!"
+      });
+    }).catch(() => {
+      i.editor.message.open({
+        key: w,
+        type: "error",
+        content: "Download failed!"
+      });
+    }), t(!1);
+  }, m = async () => {
+    if (!i.editor.isEditing || o) return;
+    const x = ge();
+    t(!0), i.editor.message.open({
+      key: x,
+      type: "loading",
+      content: "Copying..."
+    }), await i.editor.app.tree.export("png", { blob: !0, pixelRatio: h }).then(async (w) => {
+      const { data: S } = w;
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          [S.type]: S
+        })
+      ]), i.editor.message.open({
+        key: x,
+        type: "success",
+        content: "Copy Success!"
+      });
+    }).catch(() => {
+      i.editor.message.open({
+        key: x,
+        type: "error",
+        content: "Copy failed!"
+      });
+    }), t(!1);
+  }, b = () => {
+    i.editor.destroy(), i.editor.clearImg();
+  };
+  ys(() => p(), () => m(), [p, m]);
+  const C = /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs("div", { className: "p-2 [&_.ant-segmented]:w-full [&_.ant-segmented-item]:w-[33%]", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "text-xs text-gray-400 mb-2", children: "Format" }),
+    /* @__PURE__ */ e.jsx(
+      lt,
+      {
+        options: ["png", "jpg", "webp"],
+        size: "middle",
+        onChange: l
+      }
+    ),
+    /* @__PURE__ */ e.jsx("div", { className: "text-xs text-gray-400 mt-2 mb-2", children: "Pixel Ratio" }),
+    /* @__PURE__ */ e.jsx(
+      lt,
+      {
+        options: [{ value: 1, icon: "1x" }, { value: 2, icon: "2x" }, { value: 3, icon: "3x" }],
+        size: "middle",
+        onChange: f
+      }
+    ),
+    i.option.frameConf.width && /* @__PURE__ */ e.jsxs("div", { className: "text-xs p-3 mt-4 flex justify-between bg-black/5 rounded-md", children: [
+      /* @__PURE__ */ e.jsx("span", { className: "text-gray-400", children: "Download Size" }),
+      /* @__PURE__ */ e.jsxs("span", { className: "text-gray-700", children: [
+        i.option.frameConf.width * h,
+        " x ",
+        i.option.frameConf.height * h
+      ] })
+    ] })
+  ] }) });
+  return /* @__PURE__ */ e.jsxs("div", { className: "shrink-0 py-4 px-6 flex gap-2 justify-center items-center", children: [
+    /* @__PURE__ */ e.jsx(
+      Nt,
+      {
+        theme: {
+          components: {
+            Button: {
+              colorPrimary: i.editor.isDark ? "#2b4acb" : "#000",
+              algorithm: !0
+              // 启用算法
+            }
+          }
+        },
+        children: /* @__PURE__ */ e.jsxs("div", { className: "ant-space-compact flex flex-1", children: [
+          /* @__PURE__ */ e.jsx(L, { placement: "top", title: /* @__PURE__ */ e.jsxs("span", { children: [
+            "Download ",
+            gt,
+            " + S"
+          ] }), children: /* @__PURE__ */ e.jsx(
+            k,
+            {
+              type: "primary",
+              size: "large",
+              loading: o,
+              icon: /* @__PURE__ */ e.jsx(M.ImageDown, { size: 18 }),
+              className: "rounded-se-none flex-1 rounded-ee-none me-[-1px] hover:z-[1] border-r-white/30",
+              onClick: p,
+              children: /* @__PURE__ */ e.jsxs("div", { className: "leading-4 px-2", children: [
+                /* @__PURE__ */ e.jsx("div", { className: "text-sm leading-4 font-semibold", children: "Download" }),
+                /* @__PURE__ */ e.jsxs("div", { className: "text-xs", children: [
+                  h,
+                  "x as ",
+                  a.toLocaleUpperCase()
+                ] })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ e.jsx(L, { placement: "top", title: /* @__PURE__ */ e.jsxs("span", { children: [
+            "Copy ",
+            gt,
+            " + C"
+          ] }), children: /* @__PURE__ */ e.jsx(
+            k,
+            {
+              type: "primary",
+              size: "large",
+              icon: /* @__PURE__ */ e.jsx(M.Copy, { size: 18 }),
+              loading: o,
+              className: "rounded-ss-none rounded-es-none border-l-white/30",
+              onClick: m
+            }
+          ) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ e.jsx(
+        xe,
+        {
+          content: C,
+          trigger: "click",
+          arrow: !1,
+          placement: "topRight",
+          open: n,
+          overlayStyle: {
+            width: "320px"
+          },
+          onOpenChange: d,
+          children: /* @__PURE__ */ e.jsx(k, { size: "large", icon: /* @__PURE__ */ e.jsx(M.Settings2, { size: 18 }) })
+        }
+      ),
+      ((A = i.editor.img) == null ? void 0 : A.src) && /* @__PURE__ */ e.jsx(
+        br,
+        {
+          title: "Delete the screenshot",
+          description: "Are you sure to delete this screenshot?",
+          placement: "topRight",
+          onConfirm: b,
+          okText: "Yes",
+          cancelText: "No",
+          children: /* @__PURE__ */ e.jsx(k, { size: "large", icon: /* @__PURE__ */ e.jsx(M.Trash2, { size: 18 }) })
+        }
+      )
+    ] })
+  ] });
+}), js = "data:image/svg+xml,%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%3e%3cpath%20d='M311.296%20428.544V40.96C186.368%2094.208%2087.552%20195.072%2036.864%20321.024l274.432%20274.432V428.544z'%20fill='%2337C15C'%3e%3c/path%3e%3cpath%20d='M428.544%20311.296l274.432-274.432C642.048%2012.288%20577.536%200%20512%200%20440.832%200%20372.736%2014.848%20311.296%2040.96v387.584l117.248-117.248z'%20fill='%23A9E247'%3e%3c/path%3e%3cpath%20d='M983.04%20311.296h-387.584l117.248%20117.248%20274.432%20274.432c24.576-60.416%2036.864-125.44%2036.864-190.976%200-71.168-14.848-139.264-40.96-200.704z'%20fill='%23FF7D12'%3e%3c/path%3e%3cpath%20d='M712.704%20595.456V983.04c124.928-53.248%20223.744-154.112%20274.432-280.064l-274.432-274.432v166.912z'%20fill='%23F93B21'%3e%3c/path%3e%3cpath%20d='M595.456%20712.704l-274.432%20274.432c60.928%2024.576%20125.44%2036.864%20190.976%2036.864%2071.168%200%20139.264-14.848%20200.704-40.96v-387.584l-117.248%20117.248z'%20fill='%23846FEF'%3e%3c/path%3e%3cpath%20d='M428.544%20712.704H40.96c53.248%20124.928%20154.112%20223.744%20280.064%20274.432l274.432-274.432H428.544z'%20fill='%231E95FF'%3e%3c/path%3e%3cpath%20d='M311.296%20595.456L36.864%20321.024C12.288%20381.952%200%20446.464%200%20512c0%2071.168%2014.848%20139.264%2040.96%20200.704h387.584l-117.248-117.248z'%20fill='%2314EFEF'%3e%3c/path%3e%3cpath%20d='M595.456%20311.296H983.04c-53.248-124.928-154.112-223.744-280.064-274.432L428.544%20311.296h166.912z'%20fill='%23FFC931'%3e%3c/path%3e%3c/svg%3e", Ct = ["cosmic", "desktop"], me = ({ type: o, options: t, onChange: n, value: s }) => {
+  let a = [];
+  if (t && t.length)
+    a = t;
+  else {
+    const l = [];
+    Object.keys(Q).map((h) => {
+      h.includes(o) && l.push({
+        key: h,
+        value: Q[h]
+      });
+    }), a = l;
+  }
+  return /* @__PURE__ */ e.jsx(
+    P.Group,
+    {
+      onChange: (l) => n(l.target.value),
+      value: s,
+      rootClassName: Z(
+        "grid [&_span]:ps-0",
+        Ct.includes(o) ? "grid-cols-5 gap-y-1.5" : "grid-cols-7 gap-y-3"
+      ),
+      children: a.map((l, h) => /* @__PURE__ */ e.jsx(
+        P,
+        {
+          className: "[&_.ant-radio]:hidden [&_span]:p-0 mr-0",
+          value: l.key,
+          children: Ct.includes(o) ? /* @__PURE__ */ e.jsx("div", { className: Z("w-12 h-8 rounded-md overflow-hidden"), children: /* @__PURE__ */ e.jsx("img", { src: `${l.value.class}&w=48`, className: "w-full h-full object-cover object-center" }) }) : /* @__PURE__ */ e.jsx("div", { className: Z("w-8 h-8 rounded-full overflow-hidden", l.value.class) })
+        },
+        h
+      ))
+    }
+  );
+}, Ms = B(({ showMore: o, onChange: t }) => {
+  const n = () => {
+    t(!1);
+  }, s = (l) => {
+    const h = l.toHexString();
+    i.option.frameConf.background = {
+      type: "solid",
+      color: h
+    };
+  }, a = (l) => {
+    i.option.setBackground(l);
+  };
+  return /* @__PURE__ */ e.jsx(
+    wr,
+    {
+      title: "",
+      placement: "right",
+      closable: !1,
+      mask: !1,
+      onClose: n,
+      open: o,
+      getContainer: !1,
+      width: "100%",
+      className: "[&_.ant-drawer-body]:p-0",
+      children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 h-full overflow-hidden", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "shrink-0 pt-4 px-4", children: /* @__PURE__ */ e.jsx(
+          k,
+          {
+            type: "text",
+            size: "small",
+            className: "text-xs flex items-center opacity-80 m-0",
+            icon: /* @__PURE__ */ e.jsx(M.ChevronRight, { size: 16 }),
+            iconPosition: "end",
+            onClick: () => t(!1),
+            children: "Back"
+          }
+        ) }),
+        /* @__PURE__ */ e.jsxs("div", { className: "h-0 flex-1 overflow-y-auto px-4 py-2", children: [
+          /* @__PURE__ */ e.jsx("h4", { className: "text-sm font-bold py-2", children: "Custom" }),
+          /* @__PURE__ */ e.jsx("div", { className: "py-1", children: /* @__PURE__ */ e.jsx(be, { onChange: s, children: /* @__PURE__ */ e.jsx(k, { type: "default", size: "small", shape: "circle", icon: /* @__PURE__ */ e.jsx("img", { src: js, width: 18 }) }) }) }),
+          /* @__PURE__ */ e.jsx("h4", { className: "text-sm font-bold py-2", children: "Solid Colors" }),
+          /* @__PURE__ */ e.jsx(me, { type: "solid", onChange: a, value: i.option.background }),
+          /* @__PURE__ */ e.jsx("h4", { className: "text-sm font-bold py-2", children: "Gradients" }),
+          /* @__PURE__ */ e.jsx(me, { type: "gradient", onChange: a, value: i.option.background }),
+          /* @__PURE__ */ e.jsx("h4", { className: "text-sm font-bold py-2", children: "Cosmic Gradients" }),
+          /* @__PURE__ */ e.jsx(me, { type: "cosmic", onChange: a, value: i.option.background }),
+          /* @__PURE__ */ e.jsx("h4", { className: "text-sm font-bold py-2", children: "Desktop" }),
+          /* @__PURE__ */ e.jsx(me, { type: "desktop", onChange: a, value: i.option.background })
+        ] })
+      ] })
+    }
+  );
+}), Cs = B(() => {
+  const [o, t] = O(!1), n = (s) => {
+    i.option.setFrame(s.target.value);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "[&_label]:font-semibold [&_label]:text-sm", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ e.jsx("label", { children: "Frame" }),
+      /* @__PURE__ */ e.jsxs(
+        k,
+        {
+          type: "text",
+          size: "small",
+          className: "text-xs flex items-center opacity-80 m-0",
+          disabled: !0,
+          onClick: () => t(!0),
+          children: [
+            "More ",
+            /* @__PURE__ */ e.jsx(M.ChevronRight, { size: 16 })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "py-3 [&_.ant-radio-wrapper_span]:p-0 [&_.ant-radio-wrapper_span]:px-1", children: /* @__PURE__ */ e.jsxs(
+      P.Group,
+      {
+        rootClassName: "grid grid-cols-5",
+        onChange: n,
+        value: i.option.frame,
+        children: [
+          /* @__PURE__ */ e.jsx(P, { className: "[&_.ant-radio]:hidden [&_span]:mr-0 [&_span]:block [&_span]:w-full", value: "none", children: /* @__PURE__ */ e.jsx("div", { className: "bg-gray-300/30 rounded-md h-8 overflow-hidden", children: /* @__PURE__ */ e.jsx("div", { className: "bg-slate-300/40 h-7 w-[85%] rounded-md shadow-md -mt-1 -ml-1" }) }) }),
+          /* @__PURE__ */ e.jsx(P, { className: "[&_.ant-radio]:hidden [&_span]:mr-0 [&_span]:block [&_span]:w-full", value: "light", children: /* @__PURE__ */ e.jsx("div", { className: "bg-gray-300/30 rounded-md h-8 overflow-hidden", children: /* @__PURE__ */ e.jsx("div", { className: "bg-slate-300/40 border-2 border-white/80 h-7 w-[85%] rounded-md shadow-md -mt-1 -ml-1" }) }) }),
+          /* @__PURE__ */ e.jsx(P, { className: "[&_.ant-radio]:hidden [&_span]:mr-0 [&_span]:block [&_span]:w-full", value: "dark", children: /* @__PURE__ */ e.jsx("div", { className: "bg-gray-300/30 rounded-md h-8 overflow-hidden", children: /* @__PURE__ */ e.jsx("div", { className: "bg-slate-300/40 border-2 border-black/40 h-7 w-[85%] rounded-md shadow-md -mt-1 -ml-1" }) }) }),
+          /* @__PURE__ */ e.jsx(P, { className: "[&_.ant-radio]:hidden [&_span]:mr-0 [&_span]:block [&_span]:w-full", value: "macosBarLight", children: /* @__PURE__ */ e.jsx("div", { className: "bg-gray-300/30 rounded-md h-8 overflow-hidden", children: /* @__PURE__ */ e.jsx("div", { className: "bg-slate-300/40 h-7 w-[85%] rounded-sm shadow-md mt-2 ml-3 overflow-hidden", children: /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              className: "h-1.5 bg-white/90 px-0.5 flex items-center gap-[1px] before:block before:rounded-full before:w-0.5 before:h-0.5 before:bg-red-500 after:w-0.5 after:h-0.5 after:bg-green-500",
+              children: /* @__PURE__ */ e.jsx("i", { className: "block w-0.5 h-0.5 bg-yellow-500" })
+            }
+          ) }) }) }),
+          /* @__PURE__ */ e.jsx(P, { className: "[&_.ant-radio]:hidden [&_span]:mr-0 [&_span]:block [&_span]:w-full", value: "macosBarDark", children: /* @__PURE__ */ e.jsx("div", { className: "bg-gray-300/30 rounded-md h-8 overflow-hidden", children: /* @__PURE__ */ e.jsx("div", { className: "bg-slate-300/40 h-7 w-[85%] rounded-sm shadow-md mt-2 ml-3 overflow-hidden", children: /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              className: "h-1.5 bg-black/90 px-0.5 flex items-center gap-[1px] before:block before:rounded-full before:w-0.5 before:h-0.5 before:bg-red-500 after:w-0.5 after:h-0.5 after:bg-green-500",
+              children: /* @__PURE__ */ e.jsx("i", { className: "block w-0.5 h-0.5 bg-yellow-500" })
+            }
+          ) }) }) })
+        ]
+      }
+    ) })
+  ] });
+}), ks = B(() => {
+  const [o, t] = O(!1), n = (s) => {
+    const a = s.target.value;
+    i.option.setBackground(a);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "bg-white dark:bg-black flex flex-col md:w-[340px] border-l border-l-gray-50 dark:border-l-gray-700 dark:text-gray-400 shadow-lg relative z-10 select-none", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex-col gap-2 p-4 overflow-y-auto overflow-x-hidden", children: [
+      /* @__PURE__ */ e.jsx(ms, {}),
+      /* @__PURE__ */ e.jsxs("div", { className: "[&_label]:font-semibold pt-2 [&_label]:text-sm", children: [
+        /* @__PURE__ */ e.jsx("label", { children: "Quick" }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-center py-2", children: [
+          /* @__PURE__ */ e.jsx(gs, {}),
+          /* @__PURE__ */ e.jsx(
+            k,
+            {
+              type: "text",
+              shape: "circle",
+              onClick: () => i.option.toggleFlip("x"),
+              icon: /* @__PURE__ */ e.jsx(M.FlipHorizontal2, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            k,
+            {
+              type: "text",
+              shape: "circle",
+              onClick: () => i.option.toggleFlip("y"),
+              icon: /* @__PURE__ */ e.jsx(M.FlipVertical2, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ e.jsx(bs, {})
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "[&_label]:font-semibold [&_label]:text-sm", children: [
+        /* @__PURE__ */ e.jsx("label", { children: "Scale" }),
+        /* @__PURE__ */ e.jsx(
+          pe,
+          {
+            min: 0.1,
+            max: 2,
+            step: 0.1,
+            onChange: (s) => i.option.setScale(s),
+            value: typeof i.option.scale == "number" ? i.option.scale : 1
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "[&_label]:font-semibold [&_label]:text-sm", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ e.jsx("label", { children: "Padding" }),
+          /* @__PURE__ */ e.jsx(be, { value: i.option.paddingBg, onChange: (s) => i.option.setPaddingBg(s.toRgbString()), size: "small" })
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          pe,
+          {
+            min: 0,
+            max: 60,
+            onChange: (s) => i.option.setPadding(s),
+            value: typeof i.option.padding == "number" ? i.option.padding : 0
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "[&_label]:font-semibold [&_label]:text-sm", children: [
+        /* @__PURE__ */ e.jsx("label", { children: "Rounded" }),
+        /* @__PURE__ */ e.jsx(
+          pe,
+          {
+            min: 0,
+            max: 20,
+            onChange: (s) => i.option.setRound(s),
+            value: typeof i.option.round == "number" ? i.option.round : 0
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "[&_label]:font-semibold [&_label]:text-sm", children: [
+        /* @__PURE__ */ e.jsx("label", { children: "Shadow" }),
+        /* @__PURE__ */ e.jsx(
+          pe,
+          {
+            min: 0,
+            max: 6,
+            onChange: (s) => i.option.setShadow(s),
+            value: typeof i.option.shadow == "number" ? i.option.shadow : 0
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsx(Cs, {}),
+      /* @__PURE__ */ e.jsxs("div", { className: "[&_label]:font-semibold [&_label]:text-sm", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ e.jsx("label", { children: "Background" }),
+          /* @__PURE__ */ e.jsxs(
+            k,
+            {
+              type: "text",
+              size: "small",
+              className: "text-xs flex items-center opacity-80 m-0",
+              onClick: () => t(!0),
+              children: [
+                "More ",
+                /* @__PURE__ */ e.jsx(M.ChevronRight, { size: 16 })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { className: "py-3", children: /* @__PURE__ */ e.jsxs(
+          P.Group,
+          {
+            onChange: n,
+            value: i.option.background,
+            rootClassName: "grid grid-cols-7 [&_span]:ps-0",
+            children: [
+              /* @__PURE__ */ e.jsx(P, { className: "[&_.ant-radio]:hidden [&_span]:p-0 mr-0", value: "default_1", children: /* @__PURE__ */ e.jsx("div", { className: Z("w-8 h-8 rounded-full", Q.default_1.class) }) }),
+              Object.keys(Q).map((s) => {
+                if (s.includes("default") && s !== "default_1") return /* @__PURE__ */ e.jsx(P, { className: "[&_.ant-radio]:hidden [&_span]:p-0 mr-0", value: s, children: /* @__PURE__ */ e.jsx("div", { className: Z("w-8 h-8 rounded-full", Q[s].class) }) }, s);
+              })
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ e.jsx(ws, {})
+    ] }),
+    /* @__PURE__ */ e.jsx(vs, {}),
+    /* @__PURE__ */ e.jsx(Ms, { showMore: o, onChange: t })
+  ] });
+}), As = (o, t = []) => {
+  N(() => {
+    const n = async (s) => {
+      const a = s.clipboardData;
+      if (!a || !a.items) return;
+      const l = Array.from(a.items).filter(
+        (f) => Dt.includes(f.type)
+      );
+      if (!l.length) return;
+      const h = l[0].getAsFile();
+      o && o(h);
+    };
+    return document.addEventListener("paste", n, !1), () => {
+      document.removeEventListener("paste", n);
+    };
+  }, [...t]);
+}, Ot = (o) => async (n, s = "blob") => {
+  const a = window.URL || window.webkitURL || window, l = s === "blob" ? a.createObjectURL(n) : n, h = await Io(l), f = Math.round(h.width), d = Math.round(h.height);
+  if (o.editor.setImg({
+    src: l,
+    width: f,
+    height: d,
+    type: s === "blob" ? n.type : "image/png",
+    name: s === "blob" ? n.name : "ShotEasy.png"
+  }), o.option.size.type === "auto") {
+    const p = we(f, d);
+    o.option.setFrameSize(f + p, d + p);
+  }
+}, Ns = async () => {
+  try {
+    const o = await navigator.mediaDevices.getDisplayMedia(), t = document.createElement("video");
+    t.srcObject = o, t.play(), await new Promise((l) => t.onplaying = l);
+    const n = document.createElement("canvas");
+    n.width = t.videoWidth, n.height = t.videoHeight, n.getContext("2d").drawImage(t, 0, 0);
+    const a = n.toDataURL("image/png");
+    return t.srcObject.getTracks().forEach((l) => l.stop()), a;
+  } catch (o) {
+    console.log("Error capturing screen:", o);
+  }
+}, { Dragger: Ts } = yr, Ss = B(() => {
+  const o = Ot(i), t = async (a) => (await o(a), Promise.reject()), n = async () => {
+    const a = await Ns();
+    a && o(a, "dataURL");
+  }, s = () => {
+    i.editor.message.info("Developing, Coming soon!");
+  };
+  return As((a) => {
+    o(a);
+  }), /* @__PURE__ */ e.jsx("div", { className: "md:w-0 md:flex-1 flex flex-col justify-center items-center overflow-hidden select-none relative", children: /* @__PURE__ */ e.jsxs("div", { className: Z("max-w-[600px]", i.editor.invalid && "invalid"), children: [
+    /* @__PURE__ */ e.jsx(
+      Ts,
+      {
+        accept: Dt.join(","),
+        name: "file",
+        showUploadList: !1,
+        beforeUpload: t,
+        rootClassName: "p-4 rounded-md bg-white dark:bg-black dark:text-gray-400 block shadow-sm",
+        children: /* @__PURE__ */ e.jsxs("div", { className: "text-center p-10", children: [
+          /* @__PURE__ */ e.jsx("p", { className: "text-2xl my-2 opacity-60", children: /* @__PURE__ */ e.jsx(M.ImagePlus, { className: "mx-auto", size: 36 }) }),
+          /* @__PURE__ */ e.jsxs("p", { className: "text-sm px-4", children: [
+            "Click or Drag image to this area",
+            /* @__PURE__ */ e.jsx("br", {}),
+            "or Paste image"
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between mt-2 py-4 px-6 rounded-md bg-white dark:bg-black shadow-sm", children: [
+      /* @__PURE__ */ e.jsx(L, { placement: "top", arrow: !1, title: "Take a screenshot of desktop windows", children: /* @__PURE__ */ e.jsx(k, { shape: "round", type: "default", size: "large", icon: /* @__PURE__ */ e.jsx(M.Camera, { size: 20 }), onClick: n }) }),
+      /* @__PURE__ */ e.jsx(L, { placement: "top", arrow: !1, title: "Beautify text", children: /* @__PURE__ */ e.jsx(k, { shape: "round", type: "default", size: "large", icon: /* @__PURE__ */ e.jsx(M.Type, { size: 20 }), onClick: s }) }),
+      /* @__PURE__ */ e.jsx(L, { placement: "top", arrow: !1, title: "Beautify Code", children: /* @__PURE__ */ e.jsx(k, { shape: "round", type: "default", size: "large", icon: /* @__PURE__ */ e.jsx(M.CodeXml, { size: 20, onClick: s }) }) }),
+      /* @__PURE__ */ e.jsx(L, { placement: "top", arrow: !1, title: "Create gif animate", children: /* @__PURE__ */ e.jsx(k, { shape: "round", type: "default", size: "large", icon: /* @__PURE__ */ e.jsx(M.ImagePlay, { size: 20, onClick: s }) }) })
+    ] })
+  ] }) });
+}), $s = B(({ defaultImg: o, headLeft: t, headRight: n, isDark: s, boxClassName: a = "" }) => {
+  var p;
+  const l = Ot(i), h = (p = i.editor.img) != null && p.src ? /* @__PURE__ */ e.jsx(hs, {}) : /* @__PURE__ */ e.jsx(Ss, {}), [f, d] = vr.useMessage();
+  return i.editor.setMessage(f), le(() => {
+    const m = s || localStorage.getItem("SHOTEASY_BEAUTIFIER_THEME") === "dark" ? "dark" : "light";
+    i.editor.setTheme(m);
+  }, [s]), N(() => {
+    o && l(o, "dataURL");
+  }, [o]), /* @__PURE__ */ e.jsx(To, { children: /* @__PURE__ */ e.jsxs(
+    Nt,
+    {
+      theme: {
+        algorithm: i.editor.isDark ? ct.darkAlgorithm : ct.defaultAlgorithm
+      },
+      children: [
+        d,
+        /* @__PURE__ */ e.jsxs("div", { id: "shoteasy-container", className: Z("polka flex flex-col overflow-hidden antialiased w-full h-[100vh] dark:bg-black", a), "data-mode": i.editor.isDark ? "dark" : "light", children: [
+          /* @__PURE__ */ e.jsx($o, { headLeft: t, headRight: n }),
+          /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col flex-1 h-0 md:flex-row md:items-stretch", children: [
+            h,
+            /* @__PURE__ */ e.jsx(ks, {})
+          ] })
+        ] })
+      ]
+    }
+  ) });
+});
+export {
+  $s as ImageBeautifier
+};