image-beautifier 1.0.2 → 1.0.4

package/lib/image-beautifier.es.js

@@ -1,29 +1,31 @@
-var si = Object.defineProperty;
-var ni = (o, t, n) => t in o ? si(o, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[t] = n;
-var k = (o, t, n) => ni(o, typeof t != "symbol" ? t + "" : t, n);
-import yt, { useState as O, useMemo as me, useEffect as M, Children as it, cloneElement as ot, useRef as ue } from "react";
-import { ColorPicker as ai, Button as T, Dropdown as vt, Popover as ge, Divider as li, InputNumber as rt, Tooltip as F, Modal as ci, Switch as st, Input as di, Radio as L, Segmented as nt, ConfigProvider as fi, Popconfirm as pi, Drawer as ui, Slider as de, Upload as hi, message as mi } from "antd";
-import { observer as Y } from "mobx-react-lite";
-import { Camera as gi, Check as xi, Square as bi, Circle as wi, Slash as yi, MoveDownLeft as vi, Pencil as ji, Smile as Mi, Undo as Ci, Redo as Ai, ChevronRight as Ti, ChevronDown as Ni, ChevronUp as Si, RotateCcw as ki, ZoomIn as Ri, ZoomOut as Di, Hand as Hi, Crop as zi, FlipHorizontal2 as Ei, FlipVertical2 as Oi, Sunset as _i, Box as Yi, LayoutGrid as Ii, ImagePlus as Bi, Type as Pi, CodeXml as Wi, ClipboardPaste as Zi, ImagePlay as Gi, Maximize as Fi, ListCollapse as Li, ArrowUpRight as Ui, ArrowDownRight as Vi, ImageDown as Ji, Copy as qi, Settings2 as Xi, ChevronLeft as Qi, Pipette as $i, Trash2 as Ki, icons as at } from "lucide-react";
-import { TinyColor as eo } from "@ctrl/tinycolor";
-import { clsx as to } from "clsx";
-import { twMerge as io } from "tailwind-merge";
-import { makeAutoObservable as jt, toJS as Mt, action as oo } from "mobx";
-import ro from "@emoji-mart/data";
-import so from "@emoji-mart/react";
-import { Frame as no, Image as ao, Box as lo, Rect as De, Ellipse as co, Line as lt, Text as fo, Cursor as po, App as uo, ZoomEvent as ho, ResizeEvent as mo, DragEvent as ke } from "leafer-ui";
-import { addListener as go, removeListener as xo } from "resize-detector";
-import { Arrow as bo } from "@leafer-in/arrow";
-import { ScrollBar as wo } from "@leafer-in/scroll";
-import { tinykeys as Ct } from "tinykeys";
+var hr = Object.defineProperty;
+var pr = (i, t, n) => t in i ? hr(i, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[t] = n;
+var R = (i, t, n) => pr(i, typeof t != "symbol" ? t + "" : t, n);
+import kt, { useState as O, useMemo as le, useEffect as N, Children as ot, 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 Fr, LayoutGrid as Gr, 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 ei, Copy as ti, Settings2 as ri, ChevronLeft as ii, Pipette as oi, Trash2 as si, Sun as ni, Moon as ai, icons as dt } from "lucide-react";
+import { TinyColor as li } from "@ctrl/tinycolor";
+import { clsx as ci } from "clsx";
+import { twMerge as di } from "tailwind-merge";
+import { makeAutoObservable as Tt, toJS as St, runInAction as fi, action as hi } from "mobx";
+import { maxBy as pi } from "lodash";
+import ui from "@emoji-mart/data";
+import mi from "@emoji-mart/react";
+import { Frame as gi, Rect as ae, Box as ft, Ellipse as ht, Line as pt, Text as xi, Cursor as bi, App as wi, ZoomEvent as yi, ResizeEvent as vi, PointerEvent as ji, DragEvent as De } from "leafer-ui";
+import { addListener as Mi, removeListener as Ci } from "resize-detector";
+import { Arrow as ki } from "@leafer-in/arrow";
+import { ScrollBar as Ai } from "@leafer-in/scroll";
+import { tinykeys as Rt } from "tinykeys";
 import "@leafer-in/editor";
 import "@leafer-in/view";
-import yo from "react-cropper";
-var fe = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function vo(o) {
-  return o && o.__esModule && Object.prototype.hasOwnProperty.call(o, "default") ? o.default : o;
+import { StyleProvider as Ni } from "@ant-design/cssinjs";
+import Ti from "react-cropper";
+var ue = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function Si(i) {
+  return i && i.__esModule && Object.prototype.hasOwnProperty.call(i, "default") ? i.default : i;
 }
-var He = { exports: {} }, oe = {};
+var ze = { exports: {} }, ie = {};
 /**
  * @license React
  * react-jsx-runtime.production.min.js
@@ -33,21 +35,21 @@ var He = { exports: {} }, oe = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var ct;
-function jo() {
-  if (ct) return oe;
-  ct = 1;
-  var o = yt, 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 d(f, u, h) {
-    var g, y = {}, S = null, N = null;
-    h !== void 0 && (S = "" + h), u.key !== void 0 && (S = "" + u.key), u.ref !== void 0 && (N = u.ref);
-    for (g in u) s.call(u, g) && !l.hasOwnProperty(g) && (y[g] = u[g]);
-    if (f && f.defaultProps) for (g in u = f.defaultProps, u) y[g] === void 0 && (y[g] = u[g]);
-    return { $$typeof: t, type: f, key: S, ref: N, props: y, _owner: a.current };
+var ut;
+function Ri() {
+  if (ut) return ie;
+  ut = 1;
+  var i = kt, t = Symbol.for("react.element"), n = Symbol.for("react.fragment"), s = Object.prototype.hasOwnProperty, a = i.__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 = d, oe.jsxs = d, oe;
+  return ie.Fragment = n, ie.jsx = h, ie.jsxs = h, ie;
 }
-var re = {};
+var oe = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -57,61 +59,61 @@ var re = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var dt;
-function Mo() {
-  return dt || (dt = 1, process.env.NODE_ENV !== "production" && function() {
-    var o = yt, 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"), d = Symbol.for("react.provider"), f = Symbol.for("react.context"), u = Symbol.for("react.forward_ref"), h = Symbol.for("react.suspense"), g = Symbol.for("react.suspense_list"), y = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), N = Symbol.for("react.offscreen"), x = Symbol.iterator, v = "@@iterator";
-    function H(i) {
-      if (i === null || typeof i != "object")
+var mt;
+function Di() {
+  return mt || (mt = 1, process.env.NODE_ENV !== "production" && function() {
+    var i = 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 && i[x] || i[v];
+      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(i) {
+    var _ = i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function E(r) {
       {
-        for (var c = arguments.length, p = new Array(c > 1 ? c - 1 : 0), m = 1; m < c; m++)
-          p[m - 1] = arguments[m];
-        be("error", i, p);
+        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 be(i, c, p) {
+    function ye(r, c, u) {
       {
-        var m = _.ReactDebugCurrentFrame, j = m.getStackAddendum();
-        j !== "" && (c += "%s", p = p.concat([j]));
-        var C = p.map(function(w) {
-          return String(w);
+        var g = _.ReactDebugCurrentFrame, j = g.getStackAddendum();
+        j !== "" && (c += "%s", u = u.concat([j]));
+        var T = u.map(function(v) {
+          return String(v);
         });
-        C.unshift("Warning: " + c), Function.prototype.apply.call(console[i], console, C);
+        T.unshift("Warning: " + c), Function.prototype.apply.call(console[r], console, T);
       }
     }
-    var we = !1, $ = !1, R = !1, W = !1, U = !1, K;
+    var ve = !1, $ = !1, D = !1, F = !1, U = !1, K;
     K = Symbol.for("react.module.reference");
-    function Rt(i) {
-      return !!(typeof i == "string" || typeof i == "function" || i === s || i === l || U || i === a || i === h || i === g || W || i === N || we || $ || R || typeof i == "object" && i !== null && (i.$$typeof === S || i.$$typeof === y || i.$$typeof === d || i.$$typeof === f || i.$$typeof === u || // This needs to include all possible module reference object
+    function Bt(r) {
+      return !!(typeof r == "string" || typeof r == "function" || r === s || r === l || U || r === a || r === p || r === m || F || 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.
-      i.$$typeof === K || i.getModuleId !== void 0));
+      r.$$typeof === K || r.getModuleId !== void 0));
     }
-    function Dt(i, c, p) {
-      var m = i.displayName;
-      if (m)
-        return m;
+    function Yt(r, c, u) {
+      var g = r.displayName;
+      if (g)
+        return g;
       var j = c.displayName || c.name || "";
-      return j !== "" ? p + "(" + j + ")" : p;
+      return j !== "" ? u + "(" + j + ")" : u;
     }
-    function ze(i) {
-      return i.displayName || "Context";
+    function Ee(r) {
+      return r.displayName || "Context";
     }
-    function Z(i) {
-      if (i == null)
+    function G(r) {
+      if (r == null)
         return null;
-      if (typeof i.tag == "number" && E("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof i == "function")
-        return i.displayName || i.name || null;
-      if (typeof i == "string")
-        return i;
-      switch (i) {
+      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:
@@ -120,28 +122,28 @@ function Mo() {
           return "Profiler";
         case a:
           return "StrictMode";
-        case h:
+        case p:
           return "Suspense";
-        case g:
+        case m:
           return "SuspenseList";
       }
-      if (typeof i == "object")
-        switch (i.$$typeof) {
+      if (typeof r == "object")
+        switch (r.$$typeof) {
           case f:
-            var c = i;
-            return ze(c) + ".Consumer";
+            var c = r;
+            return Ee(c) + ".Consumer";
+          case h:
+            var u = r;
+            return Ee(u._context) + ".Provider";
           case d:
-            var p = i;
-            return ze(p._context) + ".Provider";
-          case u:
-            return Dt(i, i.render, "ForwardRef");
-          case y:
-            var m = i.displayName || null;
-            return m !== null ? m : Z(i.type) || "Memo";
-          case S: {
-            var j = i, C = j._payload, w = j._init;
+            return Yt(r, r.render, "ForwardRef");
+          case b:
+            var g = r.displayName || null;
+            return g !== null ? g : G(r.type) || "Memo";
+          case C: {
+            var j = r, T = j._payload, v = j._init;
             try {
-              return Z(w(C));
+              return G(v(T));
             } catch {
               return null;
             }
@@ -149,570 +151,572 @@ function Mo() {
         }
       return null;
     }
-    var V = Object.assign, ee = 0, Ee, Oe, _e, Ye, Ie, Be, Pe;
-    function We() {
+    var V = Object.assign, ee = 0, Oe, Be, Ye, Ie, Pe, We, Ze;
+    function Fe() {
     }
-    We.__reactDisabledLog = !0;
-    function Ht() {
+    Fe.__reactDisabledLog = !0;
+    function It() {
       {
         if (ee === 0) {
-          Ee = console.log, Oe = console.info, _e = console.warn, Ye = console.error, Ie = console.group, Be = console.groupCollapsed, Pe = console.groupEnd;
-          var i = {
+          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: We,
+            value: Fe,
             writable: !0
           };
           Object.defineProperties(console, {
-            info: i,
-            log: i,
-            warn: i,
-            error: i,
-            group: i,
-            groupCollapsed: i,
-            groupEnd: i
+            info: r,
+            log: r,
+            warn: r,
+            error: r,
+            group: r,
+            groupCollapsed: r,
+            groupEnd: r
           });
         }
         ee++;
       }
     }
-    function zt() {
+    function Pt() {
       {
         if (ee--, ee === 0) {
-          var i = {
+          var r = {
             configurable: !0,
             enumerable: !0,
             writable: !0
           };
           Object.defineProperties(console, {
-            log: V({}, i, {
-              value: Ee
-            }),
-            info: V({}, i, {
+            log: V({}, r, {
               value: Oe
             }),
-            warn: V({}, i, {
-              value: _e
+            info: V({}, r, {
+              value: Be
             }),
-            error: V({}, i, {
+            warn: V({}, r, {
               value: Ye
             }),
-            group: V({}, i, {
+            error: V({}, r, {
               value: Ie
             }),
-            groupCollapsed: V({}, i, {
-              value: Be
-            }),
-            groupEnd: V({}, i, {
+            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 ye = _.ReactCurrentDispatcher, ve;
-    function ne(i, c, p) {
+    var je = _.ReactCurrentDispatcher, Me;
+    function ce(r, c, u) {
       {
-        if (ve === void 0)
+        if (Me === void 0)
           try {
             throw Error();
           } catch (j) {
-            var m = j.stack.trim().match(/\n( *(at )?)/);
-            ve = m && m[1] || "";
+            var g = j.stack.trim().match(/\n( *(at )?)/);
+            Me = g && g[1] || "";
           }
         return `
-` + ve + i;
+` + Me + r;
       }
     }
-    var je = !1, ae;
+    var Ce = !1, de;
     {
-      var Et = typeof WeakMap == "function" ? WeakMap : Map;
-      ae = new Et();
+      var Wt = typeof WeakMap == "function" ? WeakMap : Map;
+      de = new Wt();
     }
-    function Ze(i, c) {
-      if (!i || je)
+    function Ge(r, c) {
+      if (!r || Ce)
         return "";
       {
-        var p = ae.get(i);
-        if (p !== void 0)
-          return p;
+        var u = de.get(r);
+        if (u !== void 0)
+          return u;
       }
-      var m;
-      je = !0;
+      var g;
+      Ce = !0;
       var j = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
-      var C;
-      C = ye.current, ye.current = null, Ht();
+      var T;
+      T = je.current, je.current = null, It();
       try {
         if (c) {
-          var w = function() {
+          var v = function() {
             throw Error();
           };
-          if (Object.defineProperty(w.prototype, "props", {
+          if (Object.defineProperty(v.prototype, "props", {
             set: function() {
               throw Error();
             }
           }), typeof Reflect == "object" && Reflect.construct) {
             try {
-              Reflect.construct(w, []);
-            } catch (B) {
-              m = B;
+              Reflect.construct(v, []);
+            } catch (I) {
+              g = I;
             }
-            Reflect.construct(i, [], w);
+            Reflect.construct(r, [], v);
           } else {
             try {
-              w.call();
-            } catch (B) {
-              m = B;
+              v.call();
+            } catch (I) {
+              g = I;
             }
-            i.call(w.prototype);
+            r.call(v.prototype);
           }
         } else {
           try {
             throw Error();
-          } catch (B) {
-            m = B;
+          } catch (I) {
+            g = I;
           }
-          i();
+          r();
         }
-      } catch (B) {
-        if (B && m && typeof B.stack == "string") {
-          for (var b = B.stack.split(`
-`), I = m.stack.split(`
-`), D = b.length - 1, z = I.length - 1; D >= 1 && z >= 0 && b[D] !== I[z]; )
+      } 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 (; D >= 1 && z >= 0; D--, z--)
-            if (b[D] !== I[z]) {
-              if (D !== 1 || z !== 1)
+          for (; H >= 1 && z >= 0; H--, z--)
+            if (y[H] !== Y[z]) {
+              if (H !== 1 || z !== 1)
                 do
-                  if (D--, z--, z < 0 || b[D] !== I[z]) {
-                    var P = `
-` + b[D].replace(" at new ", " at ");
-                    return i.displayName && P.includes("<anonymous>") && (P = P.replace("<anonymous>", i.displayName)), typeof i == "function" && ae.set(i, P), P;
+                  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 (D >= 1 && z >= 0);
+                while (H >= 1 && z >= 0);
               break;
             }
         }
       } finally {
-        je = !1, ye.current = C, zt(), Error.prepareStackTrace = j;
+        Ce = !1, je.current = T, Pt(), Error.prepareStackTrace = j;
       }
-      var X = i ? i.displayName || i.name : "", J = X ? ne(X) : "";
-      return typeof i == "function" && ae.set(i, J), J;
+      var X = r ? r.displayName || r.name : "", J = X ? ce(X) : "";
+      return typeof r == "function" && de.set(r, J), J;
     }
-    function Ot(i, c, p) {
-      return Ze(i, !1);
+    function Zt(r, c, u) {
+      return Ge(r, !1);
     }
-    function _t(i) {
-      var c = i.prototype;
+    function Ft(r) {
+      var c = r.prototype;
       return !!(c && c.isReactComponent);
     }
-    function le(i, c, p) {
-      if (i == null)
+    function fe(r, c, u) {
+      if (r == null)
         return "";
-      if (typeof i == "function")
-        return Ze(i, _t(i));
-      if (typeof i == "string")
-        return ne(i);
-      switch (i) {
-        case h:
-          return ne("Suspense");
-        case g:
-          return ne("SuspenseList");
+      if (typeof r == "function")
+        return Ge(r, Ft(r));
+      if (typeof r == "string")
+        return ce(r);
+      switch (r) {
+        case p:
+          return ce("Suspense");
+        case m:
+          return ce("SuspenseList");
       }
-      if (typeof i == "object")
-        switch (i.$$typeof) {
-          case u:
-            return Ot(i.render);
-          case y:
-            return le(i.type, c, p);
-          case S: {
-            var m = i, j = m._payload, C = m._init;
+      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 le(C(j), c, p);
+              return fe(T(j), c, u);
             } catch {
             }
           }
         }
       return "";
     }
-    var te = Object.prototype.hasOwnProperty, Ge = {}, Fe = _.ReactDebugCurrentFrame;
-    function ce(i) {
-      if (i) {
-        var c = i._owner, p = le(i.type, i._source, c ? c.type : null);
-        Fe.setExtraStackFrame(p);
+    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
-        Fe.setExtraStackFrame(null);
+        Ue.setExtraStackFrame(null);
     }
-    function Yt(i, c, p, m, j) {
+    function Gt(r, c, u, g, j) {
       {
-        var C = Function.call.bind(te);
-        for (var w in i)
-          if (C(i, w)) {
-            var b = void 0;
+        var T = Function.call.bind(te);
+        for (var v in r)
+          if (T(r, v)) {
+            var y = void 0;
             try {
-              if (typeof i[w] != "function") {
-                var I = Error((m || "React class") + ": " + p + " type `" + w + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof i[w] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
-                throw I.name = "Invariant Violation", I;
+              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;
               }
-              b = i[w](c, w, m, p, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (D) {
-              b = D;
+              y = r[v](c, v, g, u, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (H) {
+              y = H;
             }
-            b && !(b instanceof Error) && (ce(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).", m || "React class", p, w, typeof b), ce(null)), b instanceof Error && !(b.message in Ge) && (Ge[b.message] = !0, ce(j), E("Failed %s type: %s", p, b.message), ce(null));
+            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 It = Array.isArray;
-    function Me(i) {
-      return It(i);
+    var Lt = Array.isArray;
+    function ke(r) {
+      return Lt(r);
     }
-    function Bt(i) {
+    function Ut(r) {
       {
-        var c = typeof Symbol == "function" && Symbol.toStringTag, p = c && i[Symbol.toStringTag] || i.constructor.name || "Object";
-        return p;
+        var c = typeof Symbol == "function" && Symbol.toStringTag, u = c && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        return u;
       }
     }
-    function Pt(i) {
+    function Vt(r) {
       try {
-        return Le(i), !1;
+        return Ve(r), !1;
       } catch {
         return !0;
       }
     }
-    function Le(i) {
-      return "" + i;
+    function Ve(r) {
+      return "" + r;
     }
-    function Ue(i) {
-      if (Pt(i))
-        return E("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Bt(i)), Le(i);
+    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 ie = _.ReactCurrentOwner, Wt = {
+    var re = _.ReactCurrentOwner, Jt = {
       key: !0,
       ref: !0,
       __self: !0,
       __source: !0
-    }, Ve, Je, Ce;
-    Ce = {};
-    function Zt(i) {
-      if (te.call(i, "ref")) {
-        var c = Object.getOwnPropertyDescriptor(i, "ref").get;
+    }, 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 i.ref !== void 0;
+      return r.ref !== void 0;
     }
-    function Gt(i) {
-      if (te.call(i, "key")) {
-        var c = Object.getOwnPropertyDescriptor(i, "key").get;
+    function Xt(r) {
+      if (te.call(r, "key")) {
+        var c = Object.getOwnPropertyDescriptor(r, "key").get;
         if (c && c.isReactWarning)
           return !1;
       }
-      return i.key !== void 0;
+      return r.key !== void 0;
     }
-    function Ft(i, c) {
-      if (typeof i.ref == "string" && ie.current && c && ie.current.stateNode !== c) {
-        var p = Z(ie.current.type);
-        Ce[p] || (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', Z(ie.current.type), i.ref), Ce[p] = !0);
+    function Qt(r, c) {
+      if (typeof r.ref == "string" && re.current && c && re.current.stateNode !== c) {
+        var u = G(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', G(re.current.type), r.ref), Ae[u] = !0);
       }
     }
-    function Lt(i, c) {
+    function $t(r, c) {
       {
-        var p = function() {
-          Ve || (Ve = !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));
+        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));
         };
-        p.isReactWarning = !0, Object.defineProperty(i, "key", {
-          get: p,
+        u.isReactWarning = !0, Object.defineProperty(r, "key", {
+          get: u,
           configurable: !0
         });
       }
     }
-    function Ut(i, c) {
+    function Kt(r, c) {
       {
-        var p = function() {
-          Je || (Je = !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));
+        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));
         };
-        p.isReactWarning = !0, Object.defineProperty(i, "ref", {
-          get: p,
+        u.isReactWarning = !0, Object.defineProperty(r, "ref", {
+          get: u,
           configurable: !0
         });
       }
     }
-    var Vt = function(i, c, p, m, j, C, w) {
-      var b = {
+    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: i,
+        type: r,
         key: c,
-        ref: p,
-        props: w,
+        ref: u,
+        props: v,
         // Record the component responsible for creating this element.
-        _owner: C
+        _owner: T
       };
-      return b._store = {}, Object.defineProperty(b._store, "validated", {
+      return y._store = {}, Object.defineProperty(y._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: !1
-      }), Object.defineProperty(b, "_self", {
+      }), Object.defineProperty(y, "_self", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
-        value: m
-      }), Object.defineProperty(b, "_source", {
+        value: g
+      }), Object.defineProperty(y, "_source", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
         value: j
-      }), Object.freeze && (Object.freeze(b.props), Object.freeze(b)), b;
+      }), Object.freeze && (Object.freeze(y.props), Object.freeze(y)), y;
     };
-    function Jt(i, c, p, m, j) {
+    function tr(r, c, u, g, j) {
       {
-        var C, w = {}, b = null, I = null;
-        p !== void 0 && (Ue(p), b = "" + p), Gt(c) && (Ue(c.key), b = "" + c.key), Zt(c) && (I = c.ref, Ft(c, j));
-        for (C in c)
-          te.call(c, C) && !Wt.hasOwnProperty(C) && (w[C] = c[C]);
-        if (i && i.defaultProps) {
-          var D = i.defaultProps;
-          for (C in D)
-            w[C] === void 0 && (w[C] = D[C]);
+        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 (b || I) {
-          var z = typeof i == "function" ? i.displayName || i.name || "Unknown" : i;
-          b && Lt(w, z), I && Ut(w, z);
+        if (y || Y) {
+          var z = typeof r == "function" ? r.displayName || r.name || "Unknown" : r;
+          y && $t(v, z), Y && Kt(v, z);
         }
-        return Vt(i, b, I, j, m, ie.current, w);
+        return er(r, y, Y, j, g, re.current, v);
       }
     }
-    var Ae = _.ReactCurrentOwner, qe = _.ReactDebugCurrentFrame;
-    function q(i) {
-      if (i) {
-        var c = i._owner, p = le(i.type, i._source, c ? c.type : null);
-        qe.setExtraStackFrame(p);
+    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);
+        Qe.setExtraStackFrame(null);
     }
     var Te;
     Te = !1;
-    function Ne(i) {
-      return typeof i == "object" && i !== null && i.$$typeof === t;
+    function Se(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === t;
     }
-    function Xe() {
+    function $e() {
       {
-        if (Ae.current) {
-          var i = Z(Ae.current.type);
-          if (i)
+        if (Ne.current) {
+          var r = G(Ne.current.type);
+          if (r)
             return `
 
-Check the render method of \`` + i + "`.";
+Check the render method of \`` + r + "`.";
         }
         return "";
       }
     }
-    function qt(i) {
+    function rr(r) {
       return "";
     }
-    var Qe = {};
-    function Xt(i) {
+    var Ke = {};
+    function ir(r) {
       {
-        var c = Xe();
+        var c = $e();
         if (!c) {
-          var p = typeof i == "string" ? i : i.displayName || i.name;
-          p && (c = `
+          var u = typeof r == "string" ? r : r.displayName || r.name;
+          u && (c = `
 
-Check the top-level render call using <` + p + ">.");
+Check the top-level render call using <` + u + ">.");
         }
         return c;
       }
     }
-    function $e(i, c) {
+    function et(r, c) {
       {
-        if (!i._store || i._store.validated || i.key != null)
+        if (!r._store || r._store.validated || r.key != null)
           return;
-        i._store.validated = !0;
-        var p = Xt(c);
-        if (Qe[p])
+        r._store.validated = !0;
+        var u = ir(c);
+        if (Ke[u])
           return;
-        Qe[p] = !0;
-        var m = "";
-        i && i._owner && i._owner !== Ae.current && (m = " It was passed a child from " + Z(i._owner.type) + "."), q(i), E('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', p, m), q(null);
+        Ke[u] = !0;
+        var g = "";
+        r && r._owner && r._owner !== Ne.current && (g = " It was passed a child from " + G(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 Ke(i, c) {
+    function tt(r, c) {
       {
-        if (typeof i != "object")
+        if (typeof r != "object")
           return;
-        if (Me(i))
-          for (var p = 0; p < i.length; p++) {
-            var m = i[p];
-            Ne(m) && $e(m, c);
+        if (ke(r))
+          for (var u = 0; u < r.length; u++) {
+            var g = r[u];
+            Se(g) && et(g, c);
           }
-        else if (Ne(i))
-          i._store && (i._store.validated = !0);
-        else if (i) {
-          var j = H(i);
-          if (typeof j == "function" && j !== i.entries)
-            for (var C = j.call(i), w; !(w = C.next()).done; )
-              Ne(w.value) && $e(w.value, 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 Qt(i) {
+    function or(r) {
       {
-        var c = i.type;
+        var c = r.type;
         if (c == null || typeof c == "string")
           return;
-        var p;
+        var u;
         if (typeof c == "function")
-          p = c.propTypes;
-        else if (typeof c == "object" && (c.$$typeof === u || // Note: Memo only checks outer props here.
+          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 === y))
-          p = c.propTypes;
+        c.$$typeof === b))
+          u = c.propTypes;
         else
           return;
-        if (p) {
-          var m = Z(c);
-          Yt(p, i.props, "prop", m, i);
+        if (u) {
+          var g = G(c);
+          Gt(u, r.props, "prop", g, r);
         } else if (c.PropTypes !== void 0 && !Te) {
           Te = !0;
-          var j = Z(c);
+          var j = G(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 $t(i) {
+    function sr(r) {
       {
-        for (var c = Object.keys(i.props), p = 0; p < c.length; p++) {
-          var m = c[p];
-          if (m !== "children" && m !== "key") {
-            q(i), E("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", m), q(null);
+        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;
           }
         }
-        i.ref !== null && (q(i), E("Invalid attribute `ref` supplied to `React.Fragment`."), q(null));
+        r.ref !== null && (q(r), E("Invalid attribute `ref` supplied to `React.Fragment`."), q(null));
       }
     }
-    var et = {};
-    function tt(i, c, p, m, j, C) {
+    var rt = {};
+    function it(r, c, u, g, j, T) {
       {
-        var w = Rt(i);
-        if (!w) {
-          var b = "";
-          (i === void 0 || typeof i == "object" && i !== null && Object.keys(i).length === 0) && (b += " 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 I = qt();
-          I ? b += I : b += Xe();
-          var D;
-          i === null ? D = "null" : Me(i) ? D = "array" : i !== void 0 && i.$$typeof === t ? (D = "<" + (Z(i.type) || "Unknown") + " />", b = " Did you accidentally export a JSX literal instead of a component?") : D = typeof i, E("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", D, b);
+        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 = "<" + (G(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 = Jt(i, c, p, j, C);
+        var z = tr(r, c, u, j, T);
         if (z == null)
           return z;
-        if (w) {
-          var P = c.children;
-          if (P !== void 0)
-            if (m)
-              if (Me(P)) {
-                for (var X = 0; X < P.length; X++)
-                  Ke(P[X], i);
-                Object.freeze && Object.freeze(P);
+        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
-              Ke(P, i);
+              tt(W, r);
         }
         if (te.call(c, "key")) {
-          var J = Z(i), B = Object.keys(c).filter(function(ri) {
-            return ri !== "key";
-          }), Se = B.length > 0 ? "{key: someKey, " + B.join(": ..., ") + ": ...}" : "{key: someKey}";
-          if (!et[J + Se]) {
-            var oi = B.length > 0 ? "{" + B.join(": ..., ") + ": ...}" : "{}";
+          var J = G(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} />`, Se, J, oi, J), et[J + Se] = !0;
+  <%s key={someKey} {...props} />`, Re, J, dr, J), rt[J + Re] = !0;
           }
         }
-        return i === s ? $t(z) : Qt(z), z;
+        return r === s ? sr(z) : or(z), z;
       }
     }
-    function Kt(i, c, p) {
-      return tt(i, c, p, !0);
+    function nr(r, c, u) {
+      return it(r, c, u, !0);
     }
-    function ei(i, c, p) {
-      return tt(i, c, p, !1);
+    function ar(r, c, u) {
+      return it(r, c, u, !1);
     }
-    var ti = ei, ii = Kt;
-    re.Fragment = s, re.jsx = ti, re.jsxs = ii;
-  }()), re;
+    var lr = ar, cr = nr;
+    oe.Fragment = s, oe.jsx = lr, oe.jsxs = cr;
+  }()), oe;
 }
-process.env.NODE_ENV === "production" ? He.exports = jo() : He.exports = Mo();
-var e = He.exports;
-const A = {
-  Camera: gi,
-  Check: xi,
-  Square: bi,
-  Circle: wi,
-  Slash: yi,
-  MoveDownLeft: vi,
-  Pencil: ji,
-  Smile: Mi,
-  Undo: Ci,
-  Redo: Ai,
-  ChevronRight: Ti,
-  ChevronDown: Ni,
-  ChevronUp: Si,
-  RotateCcw: ki,
-  ZoomIn: Ri,
-  ZoomOut: Di,
-  Hand: Hi,
-  Crop: zi,
-  FlipHorizontal2: Ei,
-  FlipVertical2: Oi,
-  Sunset: _i,
-  Box: Yi,
-  LayoutGrid: Ii,
-  ImagePlus: Bi,
-  Type: Pi,
-  CodeXml: Wi,
-  ClipboardPaste: Zi,
-  ImagePlay: Gi,
-  Maximize: Fi,
-  ListCollapse: Li,
-  ArrowUpRight: Ui,
-  ArrowDownRight: Vi,
-  ImageDown: Ji,
-  Copy: qi,
-  Settings2: Xi,
-  ChevronLeft: Qi,
-  Pipette: $i,
-  Trash2: Ki
-}, xe = (o) => {
+process.env.NODE_ENV === "production" ? ze.exports = Ri() : ze.exports = Di();
+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: Fr,
+  LayoutGrid: Gr,
+  ImagePlus: Lr,
+  Type: Ur,
+  CodeXml: Vr,
+  ClipboardPaste: Jr,
+  ImagePlay: qr,
+  Maximize: Xr,
+  ListCollapse: Qr,
+  ArrowUpRight: $r,
+  ArrowDownRight: Kr,
+  ImageDown: ei,
+  Copy: ti,
+  Settings2: ri,
+  ChevronLeft: ii,
+  Pipette: oi,
+  Trash2: si,
+  Sun: ni,
+  Moon: ai
+}, be = (i) => {
   const t = () => {
     if (!window.EyeDropper) return;
     new EyeDropper().open().then((s) => {
       const a = s.sRGBHex;
-      o != null && o.onChange && o.onChange(new eo(a));
+      i != null && i.onChange && i.onChange(new li(a));
     }).catch((s) => {
       console.log(s);
     });
   };
   return /* @__PURE__ */ e.jsx(
-    ai,
+    ur,
     {
-      ...o,
+      ...i,
       panelRender: (n) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        window.EyeDropper && /* @__PURE__ */ e.jsx("div", { className: "mb-1", children: /* @__PURE__ */ e.jsx(T, { type: "text", shape: "circle", size: "small", icon: /* @__PURE__ */ e.jsx(A.Pipette, { size: 16 }), onClick: t }) }),
+        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
       ] })
     }
   );
-}, Co = [
+}, Hi = [
   {
     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
@@ -733,18 +737,18 @@ const A = {
     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
   }
-], Ao = ({ defaultValue: o, onChange: t }) => {
+], zi = ({ defaultValue: i, onChange: t }) => {
   const n = ({ key: s }) => {
     t(s);
   };
   return /* @__PURE__ */ e.jsx(
-    vt,
+    At,
     {
-      menu: { items: Co, onClick: n, selectedKeys: [o] },
+      menu: { items: Hi, onClick: n, selectedKeys: [i] },
       trigger: ["click"],
       placement: "bottom",
       children: /* @__PURE__ */ e.jsx(
-        T,
+        k,
         {
           type: "text",
           shape: "circle",
@@ -754,7 +758,7 @@ const A = {
             {
               className: "block w-full origin-center rounded-lg bg-slate-600 -rotate-45",
               style: {
-                height: o + "px"
+                height: i + "px"
               }
             }
           ) })
@@ -763,37 +767,37 @@ const A = {
     }
   );
 };
-let To = (o, t = 21) => (n = t) => {
+let _i = (i, t = 21) => (n = t) => {
   let s = "", a = n;
   for (; a--; )
-    s += o[Math.random() * o.length | 0];
+    s += i[Math.random() * i.length | 0];
   return s;
 };
-const No = () => {
-  const o = typeof navigator == "object" ? navigator.platform : "";
-  return /Mac|iPod|iPhone|iPad/.test(o);
-}, ft = No() ? "⌘" : "Ctrl", At = [
+const Ei = () => {
+  const i = typeof navigator == "object" ? navigator.platform : "";
+  return /Mac|iPod|iPhone|iPad/.test(i);
+}, gt = Ei() ? "⌘" : "Ctrl", Dt = [
   "image/jpeg",
   "image/png",
   "image/bmp",
   "image/gif",
   "image/webp"
 ];
-function G(...o) {
-  return io(to(o));
+function Z(...i) {
+  return di(ci(i));
 }
-const he = To(
+const ge = _i(
   "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
   7
-), So = (o, t) => {
+), Oi = (i, 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;
-}, ko = (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: a, height: l };
-}, Ro = (o) => {
+  n.href = i, n.download = t, n.style = "position: absolute; z-index: -111; visibility: none;", document.body.appendChild(n), n.click(), document.body.removeChild(n), n = null;
+}, Bi = (i, t, n = 950, s = 450) => {
+  let a = i, 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) };
+}, Yi = (i) => {
   const t = new Image();
-  return o.startsWith("data") || (t.crossOrigin = "Anonymous"), new Promise(function(n, s) {
+  return i.startsWith("data") || (t.crossOrigin = "Anonymous"), new Promise(function(n, s) {
     t.onload = function() {
       n(t);
     };
@@ -802,71 +806,85 @@ const he = To(
         new Error("An error occurred attempting to load image")
       );
     };
-    t.onerror = a, t.onabort = a, t.src = o;
+    t.onerror = a, t.onabort = a, t.src = i;
   });
-}, Do = (o, t, n) => o === "top-left" ? {
+}, we = (i, t, n = 0.15) => {
+  const s = Math.min(i, t);
+  return Math.round(s * n);
+}, Ii = (i, t, n) => i === "top-left" ? {
   x: 0,
   y: 0
-} : o === "top" ? {
+} : i === "top" ? {
   x: t / 2,
   y: 0
-} : o === "top-right" ? {
+} : i === "top-right" ? {
   x: t,
   y: 0
-} : o === "left" ? {
+} : i === "left" ? {
   x: 0,
   y: n / 2
-} : o === "right" ? {
+} : i === "right" ? {
   x: t,
   y: n / 2
-} : o === "bottom-left" ? {
+} : i === "bottom-left" ? {
   x: 0,
   y: n
-} : o === "bottom" ? {
+} : i === "bottom" ? {
   x: t / 2,
   y: n
-} : o === "bottom-right" ? {
+} : i === "bottom-right" ? {
   x: t,
   y: n
-} : { x: t / 2, y: n / 2 }, Ho = (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));
+} : { x: t / 2, y: n / 2 }, Pi = (i, t, n) => {
+  const s = n * (Math.PI / 180), a = Math.abs(i * Math.cos(s)) + Math.abs(t * Math.sin(s)), l = Math.abs(i * Math.sin(s)) + Math.abs(t * Math.cos(s));
   return {
     width: Math.round(a),
     height: Math.round(l)
   };
-}, zo = ({ text: o, color: t, angleDegrees: n }) => {
+}, _e = (i) => "data:image/svg+xml," + encodeURIComponent(i).replace(/'/g, "%27").replace(/"/g, "%22"), Wi = ({ text: i, 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: d } = s.getBoundingClientRect();
+  a.style.color = t, a.style.fontSize = "36px", a.innerText = i, s.append(a), document.body.append(s);
+  const { width: l, height: h } = s.getBoundingClientRect();
   document.body.removeChild(s);
-  const f = Ho(l, d, n), u = `
+  const f = Pi(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>
+            <span style="color:${t};font-size:36px;">${i}</span>
         </div>
-    `, h = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${f.width} ${f.height}" width="${f.width}" height="${f.height}">
+    `, 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);
+}, Zi = (i) => {
+  const t = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
                 <foreignObject width="100%" height="100%">
-                    ${u}
+                    <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;">${i}</span>
+                    </div>
                 </foreignObject>
-            </svg>`, g = new Blob([h], { type: "image/svg+xml;charset=utf-8" });
-  return (window.URL || window.webkitURL || window).createObjectURL(g);
+            </svg>`;
+  return _e(t);
 };
-let pt, Eo = class {
+let xt, Fi = class {
   constructor() {
-    k(this, "img", {});
-    k(this, "invalid", !1);
-    k(this, "app", null);
-    k(this, "scale", 100);
-    k(this, "useTool", null);
-    k(this, "annotateColor", "#ff0000");
-    k(this, "strokeWidth", 4);
-    k(this, "shapes", /* @__PURE__ */ new Map());
-    k(this, "message", null);
-    jt(this);
+    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");
+    R(this, "clearFun", null);
+    Tt(this);
   }
   get shapesList() {
-    return Array.from(Mt(this.shapes).values());
+    return Array.from(St(this.shapes).values());
   }
   get cursor() {
     return this.useTool === "Pencil" ? "pencil" : this.useTool ? "crosshair" : "auto";
@@ -876,8 +894,20 @@ let pt, Eo = class {
     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 = pi(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 && fi(() => {
+      t ? this.theme = t : this.theme = this.isDark ? "light" : "dark";
+    });
+  }
   setInvalid() {
-    clearTimeout(pt), this.invalid = !0, pt = setTimeout(oo(() => {
+    clearTimeout(xt), this.invalid = !0, xt = setTimeout(hi(() => {
       this.invalid = !1;
     }), 200);
   }
@@ -914,15 +944,18 @@ let pt, Eo = class {
   setStrokeWidth(t) {
     this.strokeWidth = t;
   }
+  setClearFun(t) {
+    this.clearFun = t;
+  }
   clearImg() {
     this.img = {};
   }
   destroy() {
     var t;
-    (t = this.app) == null || t.destroy(), this.app = null;
+    (t = this.app) == null || t.destroy(!0), this.app = null, this.shapes.clear(), this.setUseTool(null);
   }
 };
-const Oo = new Eo(), Q = {
+const Gi = new Fi(), Q = {
   default_1: {
     class: "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500",
     fill: {
@@ -1309,25 +1342,25 @@ const Oo = new Eo(), Q = {
     }
   }
 };
-class _o {
+class Li {
   constructor() {
-    k(this, "scale", 1);
-    k(this, "scaleX", !1);
-    k(this, "scaleY", !1);
-    k(this, "padding", 0);
-    k(this, "paddingBg", "rgba(255,255,255, 100)");
-    k(this, "round", 10);
-    k(this, "shadow", 3);
-    k(this, "frame", "none");
-    k(this, "background", "default_1");
-    k(this, "align", "center");
-    k(this, "waterImg", null);
-    k(this, "waterIndex", 1);
-    k(this, "size", {
+    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"
     });
-    k(this, "frameConf", {
+    R(this, "frameConf", {
       width: 800,
       height: 600,
       background: {
@@ -1337,10 +1370,10 @@ class _o {
         stops: ["#6366f1", "#a855f7", "#ec4899"]
       }
     });
-    jt(this);
+    Tt(this);
   }
   get waterSvg() {
-    return Mt(this.waterImg);
+    return St(this.waterImg);
   }
   setScale(t) {
     this.scale = t;
@@ -1357,6 +1390,9 @@ class _o {
   setShadow(t) {
     this.shadow = t;
   }
+  setFrame(t) {
+    this.frame = t;
+  }
   setFrameSize(t, n) {
     !t || !n || (this.frameConf.width = t, this.frameConf.height = n);
   }
@@ -1379,37 +1415,37 @@ class _o {
     this.waterIndex = t;
   }
 }
-const Yo = new _o(), r = {
-  editor: Oo,
-  option: Yo
-}, Io = ({ disabled: o = !1, toSelect: t, locale: n = "en" }) => {
-  const [s, a] = O(!1), l = () => {
-    a(!1);
-  }, d = (u) => {
-    a(u);
-  }, f = (u) => {
-    t(u.native), l();
+const Ui = new Li(), o = {
+  editor: Gi,
+  option: Ui
+}, Vi = ({ disabled: i = !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(
-    ge,
+    xe,
     {
-      content: /* @__PURE__ */ e.jsx(so, { data: ro, locale: n, onEmojiSelect: f, previewPosition: "none" }),
+      content: /* @__PURE__ */ e.jsx(mi, { data: ui, locale: n, onEmojiSelect: d, previewPosition: "none", theme: s }),
       title: "",
       trigger: "click",
-      open: s,
-      onOpenChange: d,
+      open: a,
+      onOpenChange: f,
       children: /* @__PURE__ */ e.jsx(
-        T,
+        k,
         {
           type: "text",
           shape: "circle",
-          disabled: o,
-          icon: /* @__PURE__ */ e.jsx(A.Smile, { size: 16 })
+          disabled: i,
+          icon: /* @__PURE__ */ e.jsx(M.Smile, { size: 16 })
         }
       )
     }
   );
-}, Bo = () => /* @__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 items-center text-xs font-semibold", children: [
+}, Ji = () => /* @__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" }),
@@ -1429,59 +1465,64 @@ const Yo = new _o(), r = {
     ] }) })
   ] }),
   /* @__PURE__ */ e.jsx("span", { children: "ShotEasy" })
-] }) }), Po = () => /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex justify-end items-end gap-2", children: [
-  /* @__PURE__ */ e.jsx("a", { href: "https://github.com/CH563/image-beautifier", target: "_blank", "aria-label": "GitHub", className: "block rounded-full p-1.5 hover:bg-slate-100", 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-1.5 hover:bg-slate-100", 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" }) }) }) })
-] }), Wo = ["Square", "SquareFill", "Circle", "Slash", "MoveDownLeft", "Pencil", "Smile"], Zo = Y(() => {
-  const [o, t] = O(!1), n = (l) => {
-    if (!r.editor.isEditing) return;
-    const { useTool: d } = r.editor;
-    r.editor.setUseTool(d === l ? null : l), t(!1);
-  }, s = (l) => {
-    if (!r.editor.isEditing) return;
-    const d = r.option.frameConf.width / 2 - 24, f = r.option.frameConf.height / 2 - 24;
-    r.editor.setUseTool(null), t(!1), r.editor.addShape({
-      id: he(),
+] }) }), qi = ({ children: i }) => /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex justify-end items-end gap-2 dark:text-gray-300", children: [
+  i,
+  /* @__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" }) }) }) })
+] }), Xi = ["Square", "SquareFill", "Circle", "Slash", "MoveDownLeft", "Pencil", "Step", "Smile"], Qi = B(({ headLeft: i, headRight: t }) => {
+  const [n, s] = O(!1), a = (d) => {
+    if (!o.editor.isEditing) return;
+    const { useTool: p } = o.editor;
+    o.editor.setUseTool(p === d ? null : d), s(!1);
+  }, l = (d) => {
+    if (!o.editor.isEditing) return;
+    const p = o.option.frameConf.width / 2 - 24, m = o.option.frameConf.height / 2 - 24;
+    o.editor.setUseTool(null), s(!1), o.editor.addShape({
+      id: ge(),
       type: "emoji",
-      text: l,
-      zIndex: r.editor.shapes.size + 1,
-      x: d,
-      y: f,
+      text: d,
+      zIndex: o.editor.shapes.size + 1,
+      x: p,
+      y: m,
       editable: !0
     });
-  }, a = () => {
-    if (!r.editor.isEditing) return;
-    const l = !o;
-    r.editor.setUseTool(null), t(l), r.editor.app.config.move.drag = l;
+  }, h = () => {
+    if (!o.editor.isEditing) return;
+    const d = !n;
+    o.editor.setUseTool(null), s(d), o.editor.app.config.move.drag = d;
+  }, f = () => {
+    o.editor.setTheme(), localStorage.setItem("SHOTEASY_BEAUTIFIER_THEME", o.editor.theme);
   };
-  return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-center shrink-0 gap-3 bg-white py-2 px-5 border-b border-b-gray-50 shadow-sm relative z-[11] select-none", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "flex-1", children: /* @__PURE__ */ e.jsx(Bo, {}) }),
-    /* @__PURE__ */ e.jsx("div", { className: "flex gap-1 justify-center items-center", children: Wo.map((l) => {
-      if (l === "Smile") return /* @__PURE__ */ e.jsx(Io, { disabled: !1, toSelect: s }, l);
-      let d;
-      if (l.includes("Fill")) {
-        const f = l.replace("Fill", ""), u = at[f];
-        d = /* @__PURE__ */ e.jsx(u, { size: 16, fill: "currentColor" });
-      } else {
-        const f = at[l];
-        d = /* @__PURE__ */ e.jsx(f, { name: l, size: 16 });
+  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: i || /* @__PURE__ */ e.jsx(Ji, {}) }),
+    /* @__PURE__ */ e.jsx("div", { className: "flex gap-1 justify-center items-center", children: Xi.map((d) => {
+      if (d === "Smile") return /* @__PURE__ */ e.jsx(Vi, { disabled: !1, theme: o.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: o.editor.nextStep }, d);
+      else {
+        const m = dt[d];
+        p = /* @__PURE__ */ e.jsx(m, { name: d, size: 16 });
       }
       return /* @__PURE__ */ e.jsx(
-        T,
+        k,
         {
           type: "text",
           shape: "circle",
-          icon: d,
-          className: r.editor.useTool === l && "text-[#1677ff] bg-sky-100/50 hover:bg-sky-100 hover:text-[#1677ff]",
-          onClick: () => n(l)
+          icon: p,
+          className: o.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)
         },
-        l
+        d
       );
     }) }),
-    /* @__PURE__ */ e.jsx(li, { type: "vertical" }),
+    /* @__PURE__ */ e.jsx(mr, { type: "vertical" }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 justify-center items-center", children: [
       /* @__PURE__ */ e.jsx(
-        xe,
+        be,
         {
           size: "small",
           presets: [
@@ -1500,141 +1541,149 @@ const Yo = new _o(), r = {
               ]
             }
           ],
-          value: r.editor.annotateColor,
-          onChange: (l) => r.editor.setAnnotateColor(l.toHexString())
+          value: o.editor.annotateColor,
+          onChange: (d) => o.editor.setAnnotateColor(d.toHexString())
         }
       ),
-      /* @__PURE__ */ e.jsx(Ao, { defaultValue: r.editor.strokeWidth, onChange: (l) => r.editor.setStrokeWidth(l) }),
+      /* @__PURE__ */ e.jsx(zi, { defaultValue: o.editor.strokeWidth, onChange: (d) => o.editor.setStrokeWidth(d) }),
       /* @__PURE__ */ e.jsx(
-        T,
+        k,
         {
           type: "text",
           shape: "circle",
-          className: o && "text-[#1677ff] bg-sky-100/50 hover:bg-sky-100 hover:text-[#1677ff]",
-          icon: /* @__PURE__ */ e.jsx(A.Hand, { size: 16 }),
-          onClick: a
+          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
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx(Po, {})
+    t || /* @__PURE__ */ e.jsx(qi, { children: /* @__PURE__ */ e.jsx(
+      k,
+      {
+        type: "text",
+        shape: "circle",
+        icon: o.editor.isDark ? /* @__PURE__ */ e.jsx(M.Sun, { size: 16 }) : /* @__PURE__ */ e.jsx(M.Moon, { size: 16 }),
+        onClick: f
+      }
+    ) })
   ] });
 });
-function Go(o) {
-  var t = typeof o;
-  return o != null && (t == "object" || t == "function");
+function $i(i) {
+  var t = typeof i;
+  return i != null && (t == "object" || t == "function");
 }
-var Tt = Go, Fo = typeof fe == "object" && fe && fe.Object === Object && fe, Lo = Fo, Uo = Lo, Vo = typeof self == "object" && self && self.Object === Object && self, Jo = Uo || Vo || Function("return this")(), Nt = Jo, qo = Nt, Xo = function() {
-  return qo.Date.now();
-}, Qo = Xo, $o = /\s/;
-function Ko(o) {
-  for (var t = o.length; t-- && $o.test(o.charAt(t)); )
+var Ht = $i, Ki = typeof ue == "object" && ue && ue.Object === Object && ue, eo = Ki, to = eo, ro = typeof self == "object" && self && self.Object === Object && self, io = to || ro || Function("return this")(), zt = io, oo = zt, so = function() {
+  return oo.Date.now();
+}, no = so, ao = /\s/;
+function lo(i) {
+  for (var t = i.length; t-- && ao.test(i.charAt(t)); )
     ;
   return t;
 }
-var er = Ko, tr = er, ir = /^\s+/;
-function or(o) {
-  return o && o.slice(0, tr(o) + 1).replace(ir, "");
+var co = lo, fo = co, ho = /^\s+/;
+function po(i) {
+  return i && i.slice(0, fo(i) + 1).replace(ho, "");
 }
-var rr = or, sr = Nt, nr = sr.Symbol, St = nr, ut = St, kt = Object.prototype, ar = kt.hasOwnProperty, lr = kt.toString, se = ut ? ut.toStringTag : void 0;
-function cr(o) {
-  var t = ar.call(o, se), n = o[se];
+var uo = po, mo = zt, go = mo.Symbol, _t = go, bt = _t, Et = Object.prototype, xo = Et.hasOwnProperty, bo = Et.toString, se = bt ? bt.toStringTag : void 0;
+function wo(i) {
+  var t = xo.call(i, se), n = i[se];
   try {
-    o[se] = void 0;
+    i[se] = void 0;
     var s = !0;
   } catch {
   }
-  var a = lr.call(o);
-  return s && (t ? o[se] = n : delete o[se]), a;
+  var a = bo.call(i);
+  return s && (t ? i[se] = n : delete i[se]), a;
 }
-var dr = cr, fr = Object.prototype, pr = fr.toString;
-function ur(o) {
-  return pr.call(o);
+var yo = wo, vo = Object.prototype, jo = vo.toString;
+function Mo(i) {
+  return jo.call(i);
 }
-var hr = ur, ht = St, mr = dr, gr = hr, xr = "[object Null]", br = "[object Undefined]", mt = ht ? ht.toStringTag : void 0;
-function wr(o) {
-  return o == null ? o === void 0 ? br : xr : mt && mt in Object(o) ? mr(o) : gr(o);
+var Co = Mo, wt = _t, ko = yo, Ao = Co, No = "[object Null]", To = "[object Undefined]", yt = wt ? wt.toStringTag : void 0;
+function So(i) {
+  return i == null ? i === void 0 ? To : No : yt && yt in Object(i) ? ko(i) : Ao(i);
 }
-var yr = wr;
-function vr(o) {
-  return o != null && typeof o == "object";
+var Ro = So;
+function Do(i) {
+  return i != null && typeof i == "object";
 }
-var jr = vr, Mr = yr, Cr = jr, Ar = "[object Symbol]";
-function Tr(o) {
-  return typeof o == "symbol" || Cr(o) && Mr(o) == Ar;
+var Ho = Do, zo = Ro, _o = Ho, Eo = "[object Symbol]";
+function Oo(i) {
+  return typeof i == "symbol" || _o(i) && zo(i) == Eo;
 }
-var Nr = Tr, Sr = rr, gt = Tt, kr = Nr, xt = NaN, Rr = /^[-+]0x[0-9a-f]+$/i, Dr = /^0b[01]+$/i, Hr = /^0o[0-7]+$/i, zr = parseInt;
-function Er(o) {
-  if (typeof o == "number")
-    return o;
-  if (kr(o))
-    return xt;
-  if (gt(o)) {
-    var t = typeof o.valueOf == "function" ? o.valueOf() : o;
-    o = gt(t) ? t + "" : t;
+var Bo = Oo, Yo = uo, vt = Ht, Io = Bo, jt = NaN, Po = /^[-+]0x[0-9a-f]+$/i, Wo = /^0b[01]+$/i, Zo = /^0o[0-7]+$/i, Fo = parseInt;
+function Go(i) {
+  if (typeof i == "number")
+    return i;
+  if (Io(i))
+    return jt;
+  if (vt(i)) {
+    var t = typeof i.valueOf == "function" ? i.valueOf() : i;
+    i = vt(t) ? t + "" : t;
   }
-  if (typeof o != "string")
-    return o === 0 ? o : +o;
-  o = Sr(o);
-  var n = Dr.test(o);
-  return n || Hr.test(o) ? zr(o.slice(2), n ? 2 : 8) : Rr.test(o) ? xt : +o;
+  if (typeof i != "string")
+    return i === 0 ? i : +i;
+  i = Yo(i);
+  var n = Wo.test(i);
+  return n || Zo.test(i) ? Fo(i.slice(2), n ? 2 : 8) : Po.test(i) ? jt : +i;
 }
-var Or = Er, _r = Tt, Re = Qo, bt = Or, Yr = "Expected a function", Ir = Math.max, Br = Math.min;
-function Pr(o, t, n) {
-  var s, a, l, d, f, u, h = 0, g = !1, y = !1, S = !0;
-  if (typeof o != "function")
-    throw new TypeError(Yr);
-  t = bt(t) || 0, _r(n) && (g = !!n.leading, y = "maxWait" in n, l = y ? Ir(bt(n.maxWait) || 0, t) : l, S = "trailing" in n ? !!n.trailing : S);
-  function N(R) {
-    var W = s, U = a;
-    return s = a = void 0, h = R, d = o.apply(U, W), d;
+var Lo = Go, Uo = Ht, He = no, Mt = Lo, Vo = "Expected a function", Jo = Math.max, qo = Math.min;
+function Xo(i, t, n) {
+  var s, a, l, h, f, d, p = 0, m = !1, b = !1, C = !0;
+  if (typeof i != "function")
+    throw new TypeError(Vo);
+  t = Mt(t) || 0, Uo(n) && (m = !!n.leading, b = "maxWait" in n, l = b ? Jo(Mt(n.maxWait) || 0, t) : l, C = "trailing" in n ? !!n.trailing : C);
+  function A(D) {
+    var F = s, U = a;
+    return s = a = void 0, p = D, h = i.apply(U, F), h;
   }
-  function x(R) {
-    return h = R, f = setTimeout(_, t), g ? N(R) : d;
+  function x(D) {
+    return p = D, f = setTimeout(_, t), m ? A(D) : h;
   }
-  function v(R) {
-    var W = R - u, U = R - h, K = t - W;
-    return y ? Br(K, l - U) : K;
+  function w(D) {
+    var F = D - d, U = D - p, K = t - F;
+    return b ? qo(K, l - U) : K;
   }
-  function H(R) {
-    var W = R - u, U = R - h;
-    return u === void 0 || W >= t || W < 0 || y && U >= l;
+  function S(D) {
+    var F = D - d, U = D - p;
+    return d === void 0 || F >= t || F < 0 || b && U >= l;
   }
   function _() {
-    var R = Re();
-    if (H(R))
-      return E(R);
-    f = setTimeout(_, v(R));
+    var D = He();
+    if (S(D))
+      return E(D);
+    f = setTimeout(_, w(D));
   }
-  function E(R) {
-    return f = void 0, S && s ? N(R) : (s = a = void 0, d);
+  function E(D) {
+    return f = void 0, C && s ? A(D) : (s = a = void 0, h);
   }
-  function be() {
-    f !== void 0 && clearTimeout(f), h = 0, s = u = a = f = void 0;
+  function ye() {
+    f !== void 0 && clearTimeout(f), p = 0, s = d = a = f = void 0;
   }
-  function we() {
-    return f === void 0 ? d : E(Re());
+  function ve() {
+    return f === void 0 ? h : E(He());
   }
   function $() {
-    var R = Re(), W = H(R);
-    if (s = arguments, a = this, u = R, W) {
+    var D = He(), F = S(D);
+    if (s = arguments, a = this, d = D, F) {
       if (f === void 0)
-        return x(u);
-      if (y)
-        return clearTimeout(f), f = setTimeout(_, t), N(u);
+        return x(d);
+      if (b)
+        return clearTimeout(f), f = setTimeout(_, t), A(d);
     }
-    return f === void 0 && (f = setTimeout(_, t)), d;
+    return f === void 0 && (f = setTimeout(_, t)), h;
   }
-  return $.cancel = be, $.flush = we, $;
+  return $.cancel = ye, $.flush = ve, $;
 }
-var Wr = Pr;
-const Zr = /* @__PURE__ */ vo(Wr), Gr = "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", Fr = "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=", Lr = (o, t) => t instanceof Array ? t.map((n) => it.toArray(n).map(
-  (s) => ot(s, { ...o })
-)) : it.toArray(t).map(
-  (s) => ot(s, { ...o })
-), Ur = ({ width: o, height: t, background: n, parent: s, children: a, cursor: l }) => {
-  const d = me(() => {
-    const f = new no({
-      width: o,
+var Qo = Xo;
+const $o = /* @__PURE__ */ Si(Qo), Ko = "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 = (i, t) => t instanceof Array ? t.map((n) => ot.toArray(n).map(
+  (s) => st(s, { ...i })
+)) : ot.toArray(t).map(
+  (s) => st(s, { ...i })
+), rs = ({ width: i, height: t, background: n, parent: s, children: a, cursor: l }) => {
+  const h = le(() => {
+    const f = new gi({
+      width: i,
       height: t,
       overflow: "hide",
       fill: n,
@@ -1642,147 +1691,215 @@ const Zr = /* @__PURE__ */ vo(Wr), Gr = "data:image/png;base64,iVBORw0KGgoAAAANS
     });
     return f.name = "frame", f;
   }, []);
-  return M(() => {
-    d.width = o, d.height = t, d.fill = n;
-  }, [o, t, n]), M(() => {
-    d.cursor = l || "auto";
-  }, [l]), M(() => (s.add(d), () => {
-    d.remove();
-  }), [s]), /* @__PURE__ */ e.jsx(e.Fragment, { children: Lr({ parent: d }, a) });
-}, Vr = Y(({ parent: o }) => {
-  const [t, n] = me(() => {
-    const s = new ao({
-      url: r.editor.img.src,
-      origin: "center"
-    }), a = new lo({
+  return N(() => {
+    h.width = i, h.height = t, h.fill = n;
+  }, [i, 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) });
+}, is = `
+<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>
+`, os = _e(is), ss = B(({ parent: i }) => {
+  const t = ne(null), [n, s, a] = le(() => {
+    const l = new ae({
+      origin: "center",
+      fill: {
+        type: "image",
+        url: o.editor.img.src
+      }
+    }), h = new ft({
+      overflow: "hide",
+      children: [l]
+    }), f = new ft({
       overflow: "hide",
+      strokeAlign: "outside",
       scale: 1,
-      children: [s]
+      fill: "#ffffff00",
+      children: [h]
     });
-    return [s, a];
-  }, [o]);
-  return M(() => {
-    r.option.padding === 0 ? n.fill = "#ffffff00" : n.fill = r.option.paddingBg;
-  }, [r.option.paddingBg, r.option.padding]), M(() => {
-    n.cornerRadius = r.option.round, t.cornerRadius = r.option.round - 2;
-  }, [r.option.round]), M(() => {
-    const { shadow: s } = r.option;
-    s === 0 ? n.shadow = null : n.shadow = {
-      x: s * 4,
-      y: s * 4,
-      blur: s * 3,
+    return [l, h, f];
+  }, [i]);
+  return N(() => {
+    o.option.padding === 0 ? s.fill = "#ffffff00" : s.fill = o.option.paddingBg;
+  }, [o.option.paddingBg, o.option.padding]), N(() => {
+    const { round: l } = o.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);
+  }, [o.option.round]), N(() => {
+    const { shadow: l } = o.option;
+    l === 0 ? a.shadow = null : a.shadow = {
+      x: l * 4,
+      y: l * 4,
+      blur: l * 3,
       color: "#00000045",
       box: !0
     };
-  }, [r.option.shadow]), M(() => {
-    n.scale = r.option.scale;
-  }, [r.option.scale]), M(() => {
-    t.url = r.editor.img.src;
-  }, [r.editor.img.src]), M(() => {
-    t.scaleX = r.option.scaleX ? -1 : 1;
-  }, [r.option.scaleX]), M(() => {
-    t.scaleY = r.option.scaleY ? -1 : 1;
-  }, [r.option.scaleY]), M(() => {
-    const s = Math.round(r.option.frameConf.width * 0.2), { width: a, height: l } = ko(r.editor.img.width, r.editor.img.height, r.option.frameConf.width - s, r.option.frameConf.height - s);
-    t.width = a - r.option.padding, t.height = l - r.option.padding, n.width = a, n.height = l, n.origin = r.option.align;
-    const { x: d, y: f } = Do(r.option.align, r.option.frameConf.width - a, r.option.frameConf.height - l);
-    n.x = d, n.y = f, r.option.padding > 0 && (t.x = r.option.padding / 2, t.y = r.option.padding / 2);
-  }, [r.option.frameConf.width, r.option.frameConf.height, r.option.padding, r.option.align]), M(() => (o.add(n), () => {
-    n.remove();
-  }), [o]), null;
-}), Jr = Y(({ parent: o }) => {
-  const t = me(() => new De({
+  }, [o.option.shadow]), N(() => {
+    a.scale = o.option.scale;
+  }, [o.option.scale]), N(() => {
+    n.url = o.editor.img.src;
+  }, [o.editor.img.src]), N(() => {
+    n.scaleX = o.option.scaleX ? -1 : 1;
+  }, [o.option.scaleX]), N(() => {
+    n.scaleY = o.option.scaleY ? -1 : 1;
+  }, [o.option.scaleY]), N(() => {
+    const { align: l, round: h, frame: f, frameConf: d } = o.option, p = we(d.width, d.height), { width: m, height: b } = Bi(o.editor.img.width, o.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: os, 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 } = Ii(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 - o.option.padding, S = Math.round(w * b / m);
+    return n.width = w + 2, n.height = S + 2, n.x = o.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 = o.option.round, n.cornerRadius = o.option.round;
+    };
+  }, [o.option.frameConf.width, o.option.frameConf.height, o.option.padding, o.option.align, o.option.frame]), N(() => (i.add(a), () => {
+    a.remove();
+  }), [i]), null;
+}), ns = B(({ parent: i }) => {
+  const t = le(() => new ae({
     x: 0,
     y: 0
-  }), [o]);
-  return M(() => {
-    t.width = r.option.frameConf.width, t.height = r.option.frameConf.height;
-  }, [r.option.frameConf.width, r.option.frameConf.height]), M(() => {
-    t.zIndex = r.option.waterIndex;
-  }, [r.option.waterIndex]), M(() => {
+  }), [i]);
+  return N(() => {
+    t.width = o.option.frameConf.width, t.height = o.option.frameConf.height;
+  }, [o.option.frameConf.width, o.option.frameConf.height]), N(() => {
+    t.zIndex = o.option.waterIndex;
+  }, [o.option.waterIndex]), N(() => {
     t.fill = {
       type: "image",
-      url: r.option.waterSvg,
+      url: o.option.waterSvg,
       mode: "repeat",
       format: "svg",
-      size: Math.round(r.option.frameConf.width / 6)
+      size: Math.round(o.option.frameConf.width / 6)
     };
-  }, [r.option.waterSvg, r.option.frameConf.width]), M(() => (o.add(t), () => {
+  }, [o.option.waterSvg, o.option.frameConf.width]), N(() => (i.add(t), () => {
     t.remove();
   }), []), null;
-}), qr = ({ parent: o, type: t, id: n, width: s, height: a, x: l, y: d, fill: f, strokeWidth: u, zIndex: h, points: g, editable: y, text: S }) => {
-  const N = me(() => {
-    const x = { id: n, x: l, y: d, zIndex: h };
-    return t === "SquareFill" ? new De({
+}), as = ({ parent: i, 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 co({
+    }) : t === "Circle" ? new ht({
       stroke: f,
-      strokeWidth: u,
+      strokeWidth: d,
       width: s,
       height: a,
       ...x
-    }) : t === "Slash" ? new lt({
+    }) : t === "Slash" ? new pt({
       id: n,
-      points: g,
-      zIndex: h,
+      points: m,
+      zIndex: p,
       stroke: f,
-      strokeWidth: u
-    }) : t === "MoveDownLeft" ? new bo({
+      strokeWidth: d
+    }) : t === "MoveDownLeft" ? new ki({
       id: n,
-      points: g,
-      zIndex: h,
+      points: m,
+      zIndex: p,
       strokeCap: "round",
       strokeJoin: "round",
       stroke: f,
-      strokeWidth: u
-    }) : t === "Pencil" ? new lt({
+      strokeWidth: d
+    }) : t === "Pencil" ? new pt({
       id: n,
-      points: g,
-      zIndex: h,
+      points: m,
+      zIndex: p,
       curve: !0,
       stroke: f,
-      strokeWidth: u
-    }) : t === "emoji" ? new fo({
+      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: Zi(C),
+          format: "svg",
+          align: "center"
+        }
+      ]
+    }) : t === "emoji" ? new xi({
       id: n,
-      zIndex: h,
-      text: S,
+      zIndex: p,
+      text: C,
       resizeFontSize: !0,
       fontSize: 48
-    }) : new De({
+    }) : new ae({
       cornerRadius: 8,
       stroke: f,
-      strokeWidth: u,
+      strokeWidth: d,
       width: s,
       height: a,
       ...x
     });
-  }, [o]);
-  return M(() => {
-    ["Slash", "MoveDownLeft", "Pencil"].includes(t) ? N.points = g : (N.x = l, N.y = d, N.width = s, N.height = a);
-  }, [l, d, s, a]), M(() => {
-    N.editable = !!y;
-  }, [y]), M(() => (o.add(N), () => {
-    N.remove();
-  }), [o]), null;
-}, Xr = Y(() => (M(() => {
-  const o = (s) => {
+  }, [i]);
+  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(() => (i.add(A), () => {
+    A.remove();
+  }), [i]), null;
+}, ls = B(() => (N(() => {
+  const i = (s) => {
     var l;
-    const { list: a } = (l = r.editor.app) == null ? void 0 : l.editor;
+    const { list: a } = (l = o.editor.app) == null ? void 0 : l.editor;
     if (a != null && a.length) {
-      for (let d of a)
-        d.remove(), r.editor.removeShape(d);
-      r.editor.app.editor.cancel();
+      for (let h of a)
+        h.remove(), o.editor.removeShape(h);
+      o.editor.app.editor.cancel();
     }
   }, t = (s) => {
     var a, l;
-    s === "fit" ? (a = r.editor.app) == null || a.tree.zoom(s, 100) : (l = r.editor.app) == null || l.tree.zoom(s), r.editor.setScale(r.editor.app.tree.scale);
-  }, n = Ct(window, {
-    Backspace: o,
-    Delete: o,
+    s === "fit" ? (a = o.editor.app) == null || a.tree.zoom(s, 100) : (l = o.editor.app) == null || l.tree.zoom(s), o.editor.setScale(o.editor.app.tree.scale);
+  }, n = Rt(window, {
+    Backspace: i,
+    Delete: i,
     "$mod+Minus": (s) => {
       s.preventDefault(), t("out");
     },
@@ -1797,12 +1914,12 @@ const Zr = /* @__PURE__ */ vo(Wr), Gr = "data:image/png;base64,iVBORw0KGgoAAAANS
     n();
   };
 }, [window]), null));
-po.set("pencil", { url: Fr });
-const Qr = Y(({ target: o }) => {
+bi.set("pencil", { url: es });
+const cs = B(({ target: i }) => {
   var t, n;
-  return M(() => {
-    const s = new uo({
-      view: o,
+  return N(() => {
+    const s = new wi({
+      view: i,
       editor: {
         lockRatio: "corner",
         stroke: "#3f99f7",
@@ -1814,7 +1931,7 @@ const Qr = Y(({ target: o }) => {
           height: 20,
           fill: {
             type: "image",
-            url: Gr
+            url: Ko
           }
         }
       },
@@ -1826,65 +1943,75 @@ const Qr = Y(({ target: o }) => {
         usePartRender: !0
       }
     });
-    new wo(s), r.editor.setApp(s), s.tree.on(ho.ZOOM, () => {
-      r.editor.setScale(s.tree.scale);
-    }), s.tree.on(mo.RESIZE, () => {
-      r.editor.setScale(s.tree.scale);
+    new Ai(s), o.editor.setApp(s), s.tree.on(yi.ZOOM, () => {
+      o.editor.setScale(s.tree.scale);
+    }), s.tree.on(vi.RESIZE, () => {
+      o.editor.setScale(s.tree.scale);
     });
     let a = null;
-    s.tree.on(ke.START, (d) => {
-      if (!r.editor.useTool) return;
-      const { target: f } = d;
-      if (r.editor.getShape(f.id)) return;
-      a = he();
-      const h = d.getPageBounds(), g = r.editor.useTool, y = {
+    const l = (f) => {
+      if (!o.editor.useTool) return;
+      const { target: d } = f;
+      if (o.editor.getShape(d.id)) return;
+      a = ge();
+      const m = f.getPageBounds ? f.getPageBounds() : f.getPage(), b = o.editor.useTool;
+      return {
         id: a,
-        type: g,
-        fill: r.editor.annotateColor,
-        strokeWidth: r.editor.strokeWidth,
-        zIndex: r.editor.shapes.size + 1,
-        ...h
+        type: b,
+        fill: o.editor.annotateColor,
+        strokeWidth: o.editor.strokeWidth,
+        zIndex: o.editor.shapes.size + 1,
+        ...m
       };
-      ["Slash", "MoveDownLeft", "Pencil"].includes(g) && (y.points = [h.x, h.y]), r.editor.addShape(y);
-    }), s.tree.on(ke.DRAG, (d) => {
-      if (!r.editor.useTool || !a) return;
-      const f = r.editor.getShape(a);
-      if (!f) return;
-      const u = d.getPageBounds(), h = Object.assign({}, f, u), { points: g, type: y } = h;
-      if (g && g.length) {
-        const { x: S, y: N } = d.getInnerTotal(), x = S > 0 ? u.x + S : u.x, v = N > 0 ? u.y + N : u.y;
-        y === "Pencil" ? h.points = [...g, x, v] : h.points = [g[0], g[1], x, v];
+    };
+    s.tree.on(ji.DOWN, (f) => {
+      if (o.editor.useTool !== "Step") return;
+      const p = l(f);
+      p && (p.text = o.editor.nextStep, p.editable = !0, o.editor.addShape(p), a = null, o.editor.setUseTool(null));
+    }), s.tree.on(De.START, (f) => {
+      const d = o.editor.useTool;
+      if (d === "Step") return;
+      const p = l(f);
+      p && (["Slash", "MoveDownLeft", "Pencil"].includes(d) && (p.points = [p.x, p.y]), o.editor.addShape(p));
+    }), s.tree.on(De.DRAG, (f) => {
+      if (!o.editor.useTool || !a) return;
+      const d = o.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];
       }
-      r.editor.addShape(h);
-    }), s.tree.on(ke.END, () => {
-      if (!r.editor.useTool || !a) return;
-      const d = r.editor.getShape(a);
-      d && ((d.width === 0 || d.height === 0) && !["Slash", "MoveDownLeft", "Pencil"].includes(d.type) ? r.editor.removeShape(d) : r.editor.addShape(Object.assign({}, d, { editable: !0 }))), a = null, r.editor.useTool !== "Pencil" && r.editor.setUseTool(null);
+      o.editor.addShape(m);
+    }), s.tree.on(De.END, () => {
+      if (!o.editor.useTool || !a) return;
+      const f = o.editor.getShape(a);
+      f && ((f.width === 0 || f.height === 0) && !["Slash", "MoveDownLeft", "Pencil"].includes(f.type) ? o.editor.removeShape(f) : o.editor.addShape(Object.assign({}, f, { editable: !0 }))), a = null, o.editor.useTool !== "Pencil" && o.editor.setUseTool(null);
     });
-    const l = Zr(() => {
-      const { width: d, height: f } = o.getBoundingClientRect();
-      s.tree.zoom("fit", 100), r.option.frameConf.width < d && r.option.frameConf.height < f && s.tree.zoom(1);
+    const h = $o(() => {
+      const { width: f, height: d } = i.getBoundingClientRect();
+      s.tree.zoom("fit", 100), o.option.frameConf.width < f && o.option.frameConf.height < d && s.tree.zoom(1);
     }, 10);
-    return go(o, l), () => {
-      xo(o, l), r.editor.destroy();
+    return Mi(i, h), () => {
+      Ci(i, h), o.editor.destroy();
     };
-  }, [o]), M(() => {
+  }, [i]), N(() => {
     const s = setTimeout(() => {
-      const { width: a, height: l } = o.getBoundingClientRect();
-      r.editor.app.tree.zoom("fit", 100), r.option.frameConf.width < a && r.option.frameConf.height < l && r.editor.app.tree.zoom(1), r.editor.setScale(r.editor.app.tree.scale);
+      const { width: a, height: l } = i.getBoundingClientRect();
+      o.editor.app.tree.zoom("fit", 100), o.option.frameConf.width < a && o.option.frameConf.height < l && o.editor.app.tree.zoom(1), o.editor.setScale(o.editor.app.tree.scale);
     }, 20);
     return () => {
       clearTimeout(s);
     };
-  }, [r.option.frameConf.width, r.option.frameConf.height]), (t = r.editor.app) != null && t.tree ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(Ur, { parent: r.editor.app.tree, cursor: r.editor.cursor, ...r.option.frameConf, children: [
-      r.editor.shapesList.map((s) => /* @__PURE__ */ e.jsx(qr, { ...s }, s.id)),
-      ((n = r.editor.img) == null ? void 0 : n.src) && /* @__PURE__ */ e.jsx(Vr, {}),
-      r.option.waterImg && /* @__PURE__ */ e.jsx(Jr, {})
+  }, [o.option.frameConf.width, o.option.frameConf.height]), (t = o.editor.app) != null && t.tree ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs(rs, { parent: o.editor.app.tree, cursor: o.editor.cursor, ...o.option.frameConf, children: [
+      o.editor.shapesList.map((s) => /* @__PURE__ */ e.jsx(as, { ...s }, s.id)),
+      ((n = o.editor.img) == null ? void 0 : n.src) && /* @__PURE__ */ e.jsx(ss, {}),
+      o.option.waterImg && /* @__PURE__ */ e.jsx(ns, {})
     ] }),
-    /* @__PURE__ */ e.jsx(Xr, {})
+    /* @__PURE__ */ e.jsx(ls, {})
   ] }) : null;
-}), $r = [
+}), ds = [
   {
     key: 0.5,
     label: "50%"
@@ -1901,33 +2028,33 @@ const Qr = Y(({ target: o }) => {
     key: 2,
     label: "200%"
   }
-], Kr = Y(() => {
-  const o = (n) => {
+], fs = B(() => {
+  const i = (n) => {
     var s;
-    (s = r.editor.app) == null || s.tree.zoom(n), r.editor.setScale(r.editor.app.tree.scale);
+    (s = o.editor.app) == null || s.tree.zoom(n), o.editor.setScale(o.editor.app.tree.scale);
   }, t = (n) => {
     var a, l;
     const s = Number(n.key);
-    s === 4 ? (a = r.editor.app) == null || a.tree.zoom("fit", 100) : (l = r.editor.app) == null || l.tree.zoom(s), r.editor.setScale(r.editor.app.tree.scale);
+    s === 4 ? (a = o.editor.app) == null || a.tree.zoom("fit", 100) : (l = o.editor.app) == null || l.tree.zoom(s), o.editor.setScale(o.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 overflow-hidden rounded-full shadow-md", children: [
-      /* @__PURE__ */ e.jsx(T, { type: "text", icon: /* @__PURE__ */ e.jsx(A.ZoomIn, { size: 16 }), onClick: () => o("in") }),
-      /* @__PURE__ */ e.jsx(vt, { menu: { items: $r, onClick: t }, placement: "top", children: /* @__PURE__ */ e.jsxs(T, { type: "text", children: [
-        r.editor.scale,
+    /* @__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: () => i("in") }),
+      /* @__PURE__ */ e.jsx(At, { menu: { items: ds, onClick: t }, placement: "top", children: /* @__PURE__ */ e.jsxs(k, { type: "text", children: [
+        o.editor.scale,
         "%"
       ] }) }),
-      /* @__PURE__ */ e.jsx(T, { type: "text", icon: /* @__PURE__ */ e.jsx(A.ZoomOut, { size: 16 }), onClick: () => o("out") })
+      /* @__PURE__ */ e.jsx(k, { type: "text", icon: /* @__PURE__ */ e.jsx(M.ZoomOut, { size: 16 }), onClick: () => i("out") })
     ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "rounded-full bg-white shadow-md overflow-hidden", children: /* @__PURE__ */ e.jsx(T, { type: "text", icon: /* @__PURE__ */ e.jsx(A.Maximize, { size: 16 }), onClick: () => t({ key: 4 }) }) })
+    /* @__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 }) }) })
   ] });
-}), es = Y(() => {
-  const [o, t] = O(null);
+}), hs = B(() => {
+  const [i, 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(Qr, { target: o }) }),
-    /* @__PURE__ */ e.jsx(Kr, {})
+    /* @__PURE__ */ e.jsx("div", { className: "w-full h-full relative z-0", ref: (n) => t(n), children: i && /* @__PURE__ */ e.jsx(cs, { target: i }) }),
+    /* @__PURE__ */ e.jsx(fs, {})
   ] });
-}), ts = [
+}), ps = [
   {
     key: "default",
     title: "Default",
@@ -2089,32 +2216,32 @@ const Qr = Y(({ target: o }) => {
       }
     ]
   }
-], is = ({ frameWidth: o, frameHeight: t, type: n, onSet: s }) => {
-  const [a, l] = O(""), [d, f] = O(""), u = () => {
+], us = ({ frameWidth: i, frameHeight: t, type: n, onSet: s }) => {
+  const [a, l] = O(""), [h, f] = O(""), d = () => {
     s({ type: "auto", title: "Auto" });
-  }, h = () => {
-    s({ type: "custom", title: "Custom", width: a, height: d });
+  }, p = () => {
+    s({ type: "custom", title: "Custom", width: a, height: h });
   };
-  return M(() => {
-    n === "custom" ? (l(o), f(t)) : (l(""), f(""));
+  return N(() => {
+    n === "custom" ? (l(i), f(t)) : (l(""), f(""));
   }, [n]), /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center py-2 font-normal", children: [
     /* @__PURE__ */ e.jsx(
-      rt,
+      nt,
       {
         min: 1,
         value: a,
         onChange: l,
-        placeholder: o,
+        placeholder: i,
         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(
-      rt,
+      nt,
       {
         min: 1,
-        value: d,
+        value: h,
         onChange: f,
         placeholder: t,
         prefix: /* @__PURE__ */ e.jsx("span", { className: "opacity-60 mx-1", children: "H" }),
@@ -2122,135 +2249,135 @@ const Qr = Y(({ target: o }) => {
       }
     ),
     /* @__PURE__ */ e.jsx(
-      T,
+      k,
       {
         type: "primary",
         shape: "circle",
-        icon: /* @__PURE__ */ e.jsx(A.Check, { size: 18 }),
-        disabled: !a || !d,
-        onClick: h
+        icon: /* @__PURE__ */ e.jsx(M.Check, { size: 18 }),
+        disabled: !a || !h,
+        onClick: p
       }
     ),
-    /* @__PURE__ */ e.jsx(F, { title: "Auto size", children: /* @__PURE__ */ e.jsx(
-      T,
+    /* @__PURE__ */ e.jsx(L, { title: "Auto size", children: /* @__PURE__ */ e.jsx(
+      k,
       {
         type: "primary",
         shape: "circle",
-        icon: /* @__PURE__ */ e.jsx(A.Maximize, { size: 18 }),
+        icon: /* @__PURE__ */ e.jsx(M.Maximize, { size: 18 }),
         disabled: n === "auto",
-        onClick: u
+        onClick: d
       }
     ) })
   ] });
-}, os = Y(() => {
-  var N;
-  const o = ue(null), [t, n] = O(!1), [s, a] = O(500), l = () => {
+}, ms = B(() => {
+  var A;
+  const i = ne(null), [t, n] = O(!1), [s, a] = O(500), l = () => {
     n(!1);
-  }, d = (x) => {
-    if (n(x), x && o.current) {
-      const { height: v, y: H } = o.current.getBoundingClientRect(), _ = document.body.clientHeight - v - H - 80;
+  }, h = (x) => {
+    if (n(x), x && i.current) {
+      const { height: w, y: S } = i.current.getBoundingClientRect(), _ = document.body.clientHeight - w - S - 80;
       a(_);
     }
-  }, f = (x, v) => !(x !== r.option.size.type || v.height !== r.option.frameConf.height || v.width !== r.option.frameConf.width), u = (x) => {
-    if (l(), x.type === "auto" && r.editor.img.width) {
-      const v = Math.round(r.editor.img.width * 0.2);
-      r.option.setSize({ ...x, width: r.editor.img.width + v, height: r.editor.img.height + v });
+  }, f = (x, w) => !(x !== o.option.size.type || w.height !== o.option.frameConf.height || w.width !== o.option.frameConf.width), d = (x) => {
+    if (l(), x.type === "auto" && o.editor.img.width) {
+      const w = we(o.editor.img.width, o.editor.img.height);
+      o.option.setSize({ ...x, width: o.editor.img.width + w, height: o.editor.img.height + w });
       return;
     }
-    r.option.setSize(x);
-  }, h = (x, v, H) => {
-    l(), r.option.setSize({
+    o.option.setSize(x);
+  }, p = (x, w, S) => {
+    l(), o.option.setSize({
       type: x,
-      title: `${v}${H.title ? ` ${H.title} ` : " "}${H.w} : ${H.h}`,
-      width: H.width,
-      height: H.height
+      title: `${w}${S.title ? ` ${S.title} ` : " "}${S.w} : ${S.h}`,
+      width: S.width,
+      height: S.height
     });
-  }, g = ((N = r.editor.img) == null ? void 0 : N.src) || r.option.size.type !== "auto", y = /* @__PURE__ */ e.jsx(is, { type: r.option.size.type, frameWidth: r.option.frameConf.width, frameHeight: r.option.frameConf.height, onSet: u }), S = /* @__PURE__ */ e.jsx("div", { className: "border-t border-gray-200 py-2 divide-y", children: ts.map((x) => /* @__PURE__ */ e.jsxs("div", { children: [
+  }, m = ((A = o.editor.img) == null ? void 0 : A.src) || o.option.size.type !== "auto", b = /* @__PURE__ */ e.jsx(us, { type: o.option.size.type, frameWidth: o.option.frameConf.width, frameHeight: o.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": o.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((v, H) => /* @__PURE__ */ e.jsxs(
-      T,
+    /* @__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, v),
-        onClick: () => h(x.key, x.title, v),
+        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 w-full flex items-center justify-center rounded-md opacity-75",
-              style: { aspectRatio: v.w / v.h },
+              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: [
-                v.w,
+                w.w,
                 " : ",
-                v.h
+                w.h
               ] })
             }
           ) }),
-          v.title && /* @__PURE__ */ e.jsx("div", { className: "text-xs", children: v.title }),
+          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: [
-            v.width,
+            w.width,
             " x ",
-            v.height
+            w.height
           ] })
         ]
       },
-      H
+      S
     )) })
   ] }, x.key)) });
   return /* @__PURE__ */ e.jsx(
-    ge,
+    xe,
     {
-      content: S,
-      title: y,
+      content: C,
+      title: b,
       trigger: "click",
       arrow: !1,
       placement: "bottomRight",
       open: t,
-      overlayClassName: "[&_.ant-popover-inner]:h-full [&_.ant-popover-inner]:overflow-x-hidden [&_.ant-popover-inner]:overflow-y-auto [&_.ant-popover-content]:h-full",
+      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", o.editor.isDark && "dark-mode"),
       overlayStyle: {
         width: "400px",
         height: `${s}px`
       },
-      onOpenChange: d,
-      children: /* @__PURE__ */ e.jsxs("div", { className: G("px-3 py-1.5 border shrink-0 border-gray-200 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: [
+      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: i, children: [
         /* @__PURE__ */ e.jsx(
           "div",
           {
-            className: "border border-black/50 bg-black/10 w-4 rounded-sm",
-            style: { aspectRatio: r.option.frameConf.width / r.option.frameConf.height }
+            className: "border border-black/50 bg-black/10 dark:bg-white/20 dark:border-white/40 w-4 rounded-sm",
+            style: { aspectRatio: o.option.frameConf.width / o.option.frameConf.height }
           }
         ),
         /* @__PURE__ */ e.jsxs("div", { className: "text-xs", children: [
-          /* @__PURE__ */ e.jsx("div", { className: "font-semibold leading-3 mb-0.5", children: r.option.size.title }),
-          g ? /* @__PURE__ */ e.jsxs("div", { className: "text-gray-500 leading-3", children: [
-            r.option.frameConf.width,
+          /* @__PURE__ */ e.jsx("div", { className: "font-semibold leading-3 mb-0.5", children: o.option.size.title }),
+          m ? /* @__PURE__ */ e.jsxs("div", { className: "text-gray-500 leading-3", children: [
+            o.option.frameConf.width,
             " x ",
-            r.option.frameConf.height,
+            o.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(A.ChevronUp, { size: 16 }) : /* @__PURE__ */ e.jsx(A.ChevronDown, { size: 16 })
+        t ? /* @__PURE__ */ e.jsx(M.ChevronUp, { size: 16 }) : /* @__PURE__ */ e.jsx(M.ChevronDown, { size: 16 })
       ] })
     }
   );
-}), rs = Y(() => {
-  const o = ue(null), [t, n] = O(!1), s = () => {
+}), gs = B(() => {
+  const i = ne(null), [t, n] = O(!1), s = () => {
     n(!0);
   }, a = () => {
-    var d, f;
-    if (typeof ((d = o.current) == null ? void 0 : d.cropper) < "u") {
-      const u = (f = o.current) == null ? void 0 : f.cropper.getCroppedCanvas();
-      if (u) {
-        const { width: h, height: g } = u, y = u.toDataURL();
-        if (r.editor.setImg(Object.assign({}, r.editor.img, {
-          src: y,
-          width: h,
-          height: g
-        })), r.option.size.type === "auto") {
-          const S = Math.round(h * 0.2);
-          r.option.setFrameSize(h + S, g + S);
+    var h, f;
+    if (typeof ((h = i.current) == null ? void 0 : h.cropper) < "u") {
+      const d = (f = i.current) == null ? void 0 : f.cropper.getCroppedCanvas();
+      if (d) {
+        const { width: p, height: m } = d, b = d.toDataURL();
+        if (o.editor.setImg(Object.assign({}, o.editor.img, {
+          src: b,
+          width: p,
+          height: m
+        })), o.option.size.type === "auto") {
+          const C = we(p, m);
+          o.option.setFrameSize(p + C, m + C);
         }
       }
     }
@@ -2259,17 +2386,17 @@ const Qr = Y(({ target: o }) => {
     n(!1);
   };
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(F, { title: "Crop Image", children: /* @__PURE__ */ e.jsx(
-      T,
+    /* @__PURE__ */ e.jsx(L, { title: "Crop Image", children: /* @__PURE__ */ e.jsx(
+      k,
       {
         type: "text",
         shape: "circle",
-        icon: /* @__PURE__ */ e.jsx(A.Crop, { size: 18 }),
+        icon: /* @__PURE__ */ e.jsx(M.Crop, { size: 18 }),
         onClick: s
       }
     ) }),
     /* @__PURE__ */ e.jsx(
-      ci,
+      gr,
       {
         title: "Cropper",
         open: t,
@@ -2277,13 +2404,13 @@ const Qr = Y(({ target: o }) => {
         onCancel: l,
         destroyOnClose: !0,
         children: /* @__PURE__ */ e.jsx(
-          yo,
+          Ti,
           {
-            ref: o,
+            ref: i,
             style: { height: 400, width: "100%" },
             zoomTo: 0.5,
-            initialAspectRatio: r.editor.img.width / r.editor.img.height,
-            src: r.editor.img.src,
+            initialAspectRatio: o.editor.img.width / o.editor.img.height,
+            src: o.editor.img.src,
             dragMode: "move",
             viewMode: 1,
             minCropBoxHeight: 10,
@@ -2298,82 +2425,83 @@ const Qr = Y(({ target: o }) => {
       }
     )
   ] });
-}), ss = ["top-left", "top", "top-right", "left", "center", "right", "bottom-left", "bottom", "bottom-right"], ns = Y(() => {
-  const [o, t] = O(!1), n = (l) => {
+}), xs = ["top-left", "top", "top-right", "left", "center", "right", "bottom-left", "bottom", "bottom-right"], bs = B(() => {
+  const [i, t] = O(!1), n = (l) => {
     t(l);
   }, s = (l) => {
-    r.option.setAlign(l);
-  }, a = /* @__PURE__ */ e.jsx("div", { className: G("flex flex-wrap w-24 position-block", r.option.align), children: ss.map((l) => /* @__PURE__ */ e.jsx("div", { className: "w-8 h-8 border border-gray-200 rounded-sm hover:bg-gray-100 cursor-pointer", onClick: () => s(l) }, l)) });
+    o.option.setAlign(l);
+  }, a = /* @__PURE__ */ e.jsx("div", { className: Z("flex flex-wrap w-24 position-block", o.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(
-    ge,
+    xe,
     {
       content: a,
       trigger: "click",
       arrow: !1,
       placement: "bottomRight",
-      open: o,
+      overlayClassName: Z("shoteasy-components", o.editor.isDark && "dark-mode"),
+      open: i,
       onOpenChange: n,
       children: /* @__PURE__ */ e.jsx(
-        T,
+        k,
         {
           type: "text",
           shape: "circle",
-          className: G(o && "shadow-md"),
-          icon: /* @__PURE__ */ e.jsx(A.LayoutGrid, { size: 18 })
+          className: Z(i && "shadow-md"),
+          icon: /* @__PURE__ */ e.jsx(M.LayoutGrid, { size: 18 })
         }
       )
     }
   );
-}), as = Y(() => {
-  const [o, t] = O(!1), [n, s] = O("ShotEasy"), [a, l] = O("#00000030"), [d, f] = O(45), u = (h) => {
-    l(typeof h == "string" ? h : h.toRgbString());
+}), ws = B(() => {
+  const [i, 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 M(() => {
-    if (o && n.trim()) {
-      const h = zo({
+  return N(() => {
+    if (i && n.trim()) {
+      const p = Wi({
         text: n,
         color: a,
-        angleDegrees: d
+        angleDegrees: h
       });
-      r.option.setWaterImg(h);
+      o.option.setWaterImg(p);
     } else
-      r.option.setWaterImg(null);
-  }, [o, n, a, d]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      o.option.setWaterImg(null);
+  }, [i, 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(st, { defaultChecked: o, onChange: t, size: "small", className: "bg-slate-200" })
+      /* @__PURE__ */ e.jsx(at, { defaultChecked: i, 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(di, { defaultValue: n, placeholder: "Watermark content", onChange: (h) => s(h.target.value) }),
+    i && /* @__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(xe, { value: a, onChange: u, size: "small" })
+        /* @__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(L.Group, { defaultValue: d, onChange: (h) => f(h.target.value), size: "small", children: [
-          /* @__PURE__ */ e.jsx(L.Button, { value: -45, children: /* @__PURE__ */ e.jsx(A.ArrowUpRight, { size: 16, className: "mt-[3px]" }) }),
-          /* @__PURE__ */ e.jsx(L.Button, { value: 45, children: /* @__PURE__ */ e.jsx(A.ArrowDownRight, { size: 16, className: "mt-[3px]" }) })
+        /* @__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(st, { size: "small", onChange: (h) => r.option.setWaterIndex(h ? -1 : 1), className: "bg-slate-200" })
+        /* @__PURE__ */ e.jsx(at, { size: "small", onChange: (p) => o.option.setWaterIndex(p ? -1 : 1), className: "bg-slate-200" })
       ] })
     ] })
   ] });
 });
-function ls(o, t, n) {
-  const s = ue(o), a = ue(t);
-  M(() => {
-    s.current = o, a.current = t;
-  }, [...n]), M(() => {
-    const l = Ct(window, {
-      "$mod+KeyS": (d) => {
-        d.preventDefault(), s.current && s.current();
+function ys(i, t, n) {
+  const s = ne(i), a = ne(t);
+  N(() => {
+    s.current = i, a.current = t;
+  }, [...n]), N(() => {
+    const l = Rt(window, {
+      "$mod+KeyS": (h) => {
+        h.preventDefault(), s.current && s.current();
       },
-      "$mod+KeyC": (d) => {
-        d.preventDefault(), a && a.current();
+      "$mod+KeyC": (h) => {
+        h.preventDefault(), a && a.current();
       }
     });
     return () => {
@@ -2381,68 +2509,68 @@ function ls(o, t, n) {
     };
   }, [window]);
 }
-const cs = Y(() => {
-  var N;
-  const [o, t] = O(!1), [n, s] = O(!1), [a, l] = O("png"), [d, f] = O(1), u = (x) => {
+const vs = B(() => {
+  var A;
+  const [i, t] = O(!1), [n, s] = O(!1), [a, l] = O("png"), [h, f] = O(1), d = (x) => {
     s(x);
-  }, h = async () => {
-    if (!r.editor.isEditing || o) return;
+  }, p = async () => {
+    if (!o.editor.isEditing || i) return;
     const x = {
-      pixelRatio: d
+      pixelRatio: h
     };
     ["jpg", "webp"].includes(a) && (x.quality = 0.9, x.fill = "#ffffff");
-    const v = he();
-    t(!0), r.editor.message.open({
-      key: v,
+    const w = ge();
+    t(!0), o.editor.message.open({
+      key: w,
       type: "loading",
       content: "Downloading..."
-    }), await r.editor.app.tree.export(a, x).then((H) => {
+    }), await o.editor.app.tree.export(a, x).then((S) => {
       let _ = "ShotEasy";
-      d > 1 && (_ += `@${d}`), So(H.data, `${_}.${a}`), r.editor.message.open({
-        key: v,
+      h > 1 && (_ += `@${h}`), Oi(S.data, `${_}.${a}`), o.editor.message.open({
+        key: w,
         type: "success",
         content: "Download Success!"
       });
     }).catch(() => {
-      r.editor.message.open({
-        key: v,
+      o.editor.message.open({
+        key: w,
         type: "error",
         content: "Download failed!"
       });
     }), t(!1);
-  }, g = async () => {
-    if (!r.editor.isEditing || o) return;
-    const x = he();
-    t(!0), r.editor.message.open({
+  }, m = async () => {
+    if (!o.editor.isEditing || i) return;
+    const x = ge();
+    t(!0), o.editor.message.open({
       key: x,
       type: "loading",
       content: "Copying..."
-    }), await r.editor.app.tree.export("png", { blob: !0, pixelRatio: d }).then(async (v) => {
-      const { data: H } = v;
+    }), await o.editor.app.tree.export("png", { blob: !0, pixelRatio: h }).then(async (w) => {
+      const { data: S } = w;
       await navigator.clipboard.write([
         new ClipboardItem({
-          [H.type]: H
+          [S.type]: S
         })
-      ]), r.editor.message.open({
+      ]), o.editor.message.open({
         key: x,
         type: "success",
         content: "Copy Success!"
       });
     }).catch(() => {
-      r.editor.message.open({
+      o.editor.message.open({
         key: x,
         type: "error",
         content: "Copy failed!"
       });
     }), t(!1);
-  }, y = () => {
-    r.editor.clearImg();
+  }, b = () => {
+    o.editor.destroy(), o.editor.clearImg(), o.editor.clearFun && o.editor.clearFun();
   };
-  ls(() => h(), () => g(), [h, g]);
-  const S = /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs("div", { className: "p-2 [&_.ant-segmented]:w-full [&_.ant-segmented-item]:w-[33%]", children: [
+  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(
-      nt,
+      lt,
       {
         options: ["png", "jpg", "webp"],
         size: "middle",
@@ -2451,72 +2579,72 @@ const cs = Y(() => {
     ),
     /* @__PURE__ */ e.jsx("div", { className: "text-xs text-gray-400 mt-2 mb-2", children: "Pixel Ratio" }),
     /* @__PURE__ */ e.jsx(
-      nt,
+      lt,
       {
         options: [{ value: 1, icon: "1x" }, { value: 2, icon: "2x" }, { value: 3, icon: "3x" }],
         size: "middle",
         onChange: f
       }
     ),
-    r.option.frameConf.width && /* @__PURE__ */ e.jsxs("div", { className: "text-xs p-3 mt-4 flex justify-between bg-black/5 rounded-md", children: [
+    o.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: [
-        r.option.frameConf.width * d,
+        o.option.frameConf.width * h,
         " x ",
-        r.option.frameConf.height * d
+        o.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(
-      fi,
+      Nt,
       {
         theme: {
           components: {
             Button: {
-              colorPrimary: "#000",
+              colorPrimary: o.editor.isDark ? "#2b4acb" : "#000",
               algorithm: !0
               // 启用算法
             }
           }
         },
         children: /* @__PURE__ */ e.jsxs("div", { className: "ant-space-compact flex flex-1", children: [
-          /* @__PURE__ */ e.jsx(F, { placement: "top", title: /* @__PURE__ */ e.jsxs("span", { children: [
+          /* @__PURE__ */ e.jsx(L, { placement: "top", title: /* @__PURE__ */ e.jsxs("span", { children: [
             "Download ",
-            ft,
+            gt,
             " + S"
           ] }), children: /* @__PURE__ */ e.jsx(
-            T,
+            k,
             {
               type: "primary",
               size: "large",
-              loading: o,
-              icon: /* @__PURE__ */ e.jsx(A.ImageDown, { size: 18 }),
+              loading: i,
+              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: h,
+              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: [
-                  d,
+                  h,
                   "x as ",
                   a.toLocaleUpperCase()
                 ] })
               ] })
             }
           ) }),
-          /* @__PURE__ */ e.jsx(F, { placement: "top", title: /* @__PURE__ */ e.jsxs("span", { children: [
+          /* @__PURE__ */ e.jsx(L, { placement: "top", title: /* @__PURE__ */ e.jsxs("span", { children: [
             "Copy ",
-            ft,
+            gt,
             " + C"
           ] }), children: /* @__PURE__ */ e.jsx(
-            T,
+            k,
             {
               type: "primary",
               size: "large",
-              icon: /* @__PURE__ */ e.jsx(A.Copy, { size: 18 }),
-              loading: o,
+              icon: /* @__PURE__ */ e.jsx(M.Copy, { size: 18 }),
+              loading: i,
               className: "rounded-ss-none rounded-es-none border-l-white/30",
-              onClick: g
+              onClick: m
             }
           ) })
         ] })
@@ -2524,9 +2652,9 @@ const cs = Y(() => {
     ),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
       /* @__PURE__ */ e.jsx(
-        ge,
+        xe,
         {
-          content: S,
+          content: C,
           trigger: "click",
           arrow: !1,
           placement: "topRight",
@@ -2534,197 +2662,250 @@ const cs = Y(() => {
           overlayStyle: {
             width: "320px"
           },
-          onOpenChange: u,
-          children: /* @__PURE__ */ e.jsx(T, { size: "large", icon: /* @__PURE__ */ e.jsx(A.Settings2, { size: 18 }) })
+          onOpenChange: d,
+          children: /* @__PURE__ */ e.jsx(k, { size: "large", icon: /* @__PURE__ */ e.jsx(M.Settings2, { size: 18 }) })
         }
       ),
-      ((N = r.editor.img) == null ? void 0 : N.src) && /* @__PURE__ */ e.jsx(
-        pi,
+      ((A = o.editor.img) == null ? void 0 : A.src) && /* @__PURE__ */ e.jsx(
+        br,
         {
           title: "Delete the screenshot",
           description: "Are you sure to delete this screenshot?",
-          onConfirm: y,
+          placement: "topRight",
+          onConfirm: b,
           okText: "Yes",
           cancelText: "No",
-          children: /* @__PURE__ */ e.jsx(T, { size: "large", icon: /* @__PURE__ */ e.jsx(A.Trash2, { size: 18 }) })
+          children: /* @__PURE__ */ e.jsx(k, { size: "large", icon: /* @__PURE__ */ e.jsx(M.Trash2, { size: 18 }) })
         }
       )
     ] })
   ] });
-}), ds = "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", wt = ["cosmic", "desktop"], pe = ({ type: o, options: t, onChange: n, value: s }) => {
+}), 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: i, options: t, onChange: n, value: s }) => {
   let a = [];
   if (t && t.length)
     a = t;
   else {
     const l = [];
-    Object.keys(Q).map((d) => {
-      d.includes(o) && l.push({
-        key: d,
-        value: Q[d]
+    Object.keys(Q).map((h) => {
+      h.includes(i) && l.push({
+        key: h,
+        value: Q[h]
       });
     }), a = l;
   }
   return /* @__PURE__ */ e.jsx(
-    L.Group,
+    P.Group,
     {
       onChange: (l) => n(l.target.value),
       value: s,
-      rootClassName: G(
+      rootClassName: Z(
         "grid [&_span]:ps-0",
-        wt.includes(o) ? "grid-cols-5 gap-y-1.5" : "grid-cols-7 gap-y-3"
+        Ct.includes(i) ? "grid-cols-5 gap-y-1.5" : "grid-cols-7 gap-y-3"
       ),
-      children: a.map((l, d) => /* @__PURE__ */ e.jsx(
-        L,
+      children: a.map((l, h) => /* @__PURE__ */ e.jsx(
+        P,
         {
           className: "[&_.ant-radio]:hidden [&_span]:p-0 mr-0",
           value: l.key,
-          children: wt.includes(o) ? /* @__PURE__ */ e.jsx("div", { className: G("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: G("w-8 h-8 rounded-full overflow-hidden", l.value.class) })
+          children: Ct.includes(i) ? /* @__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) })
         },
-        d
+        h
       ))
     }
   );
-}, fs = Y(({ showMore: o, onChange: t }) => {
+}, Ms = B(({ showMore: i, onChange: t }) => {
   const n = () => {
     t(!1);
   }, s = (l) => {
-    const d = l.toHexString();
-    r.option.frameConf.background = {
+    const h = l.toHexString();
+    o.option.frameConf.background = {
       type: "solid",
-      color: d
+      color: h
     };
   }, a = (l) => {
-    r.option.setBackground(l);
+    o.option.setBackground(l);
   };
   return /* @__PURE__ */ e.jsx(
-    ui,
+    wr,
     {
       title: "",
       placement: "right",
       closable: !1,
       mask: !1,
       onClose: n,
-      open: o,
+      open: i,
       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(
-          T,
+          k,
           {
             type: "text",
             size: "small",
             className: "text-xs flex items-center opacity-80 m-0",
-            icon: /* @__PURE__ */ e.jsx(A.ChevronLeft, { size: 16 }),
+            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(xe, { onChange: s, children: /* @__PURE__ */ e.jsx(T, { type: "default", size: "small", shape: "circle", icon: /* @__PURE__ */ e.jsx("img", { src: ds, width: 18 }) }) }) }),
+          /* @__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(pe, { type: "solid", onChange: a, value: r.option.background }),
+          /* @__PURE__ */ e.jsx(me, { type: "solid", onChange: a, value: o.option.background }),
           /* @__PURE__ */ e.jsx("h4", { className: "text-sm font-bold py-2", children: "Gradients" }),
-          /* @__PURE__ */ e.jsx(pe, { type: "gradient", onChange: a, value: r.option.background }),
+          /* @__PURE__ */ e.jsx(me, { type: "gradient", onChange: a, value: o.option.background }),
           /* @__PURE__ */ e.jsx("h4", { className: "text-sm font-bold py-2", children: "Cosmic Gradients" }),
-          /* @__PURE__ */ e.jsx(pe, { type: "cosmic", onChange: a, value: r.option.background }),
+          /* @__PURE__ */ e.jsx(me, { type: "cosmic", onChange: a, value: o.option.background }),
           /* @__PURE__ */ e.jsx("h4", { className: "text-sm font-bold py-2", children: "Desktop" }),
-          /* @__PURE__ */ e.jsx(pe, { type: "desktop", onChange: a, value: r.option.background })
+          /* @__PURE__ */ e.jsx(me, { type: "desktop", onChange: a, value: o.option.background })
         ] })
       ] })
     }
   );
-}), ps = Y(() => {
-  const [o, t] = O(!1), n = (s) => {
+}), Cs = B(() => {
+  const [i, t] = O(!1), n = (s) => {
+    o.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: o.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 [i, t] = O(!1), n = (s) => {
     const a = s.target.value;
-    r.option.setBackground(a);
+    o.option.setBackground(a);
   };
-  return /* @__PURE__ */ e.jsxs("div", { className: "bg-white flex flex-col md:w-[340px] border-l border-l-gray-50 shadow-lg relative z-10 select-none", children: [
+  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(os, {}),
+      /* @__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(rs, {}),
+          /* @__PURE__ */ e.jsx(gs, {}),
           /* @__PURE__ */ e.jsx(
-            T,
+            k,
             {
               type: "text",
               shape: "circle",
-              onClick: () => r.option.toggleFlip("x"),
-              icon: /* @__PURE__ */ e.jsx(A.FlipHorizontal2, { size: 18 })
+              onClick: () => o.option.toggleFlip("x"),
+              icon: /* @__PURE__ */ e.jsx(M.FlipHorizontal2, { size: 18 })
             }
           ),
           /* @__PURE__ */ e.jsx(
-            T,
+            k,
             {
               type: "text",
               shape: "circle",
-              onClick: () => r.option.toggleFlip("y"),
-              icon: /* @__PURE__ */ e.jsx(A.FlipVertical2, { size: 18 })
+              onClick: () => o.option.toggleFlip("y"),
+              icon: /* @__PURE__ */ e.jsx(M.FlipVertical2, { size: 18 })
             }
           ),
-          /* @__PURE__ */ e.jsx(ns, {})
+          /* @__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(
-          de,
+          pe,
           {
             min: 0.1,
             max: 2,
             step: 0.1,
-            onChange: (s) => r.option.setScale(s),
-            value: typeof r.option.scale == "number" ? r.option.scale : 1
+            onChange: (s) => o.option.setScale(s),
+            value: typeof o.option.scale == "number" ? o.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(xe, { value: r.option.paddingBg, onChange: (s) => r.option.setPaddingBg(s.toRgbString()), size: "small" })
+          /* @__PURE__ */ e.jsx(be, { value: o.option.paddingBg, onChange: (s) => o.option.setPaddingBg(s.toRgbString()), size: "small" })
         ] }),
         /* @__PURE__ */ e.jsx(
-          de,
+          pe,
           {
             min: 0,
             max: 60,
-            onChange: (s) => r.option.setPadding(s),
-            value: typeof r.option.padding == "number" ? r.option.padding : 0
+            onChange: (s) => o.option.setPadding(s),
+            value: typeof o.option.padding == "number" ? o.option.padding : 0
           }
         )
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "[&_label]:font-semibold [&_label]:text-sm", children: [
         /* @__PURE__ */ e.jsx("label", { children: "Rounded" }),
         /* @__PURE__ */ e.jsx(
-          de,
+          pe,
           {
             min: 0,
             max: 20,
-            onChange: (s) => r.option.setRound(s),
-            value: typeof r.option.round == "number" ? r.option.round : 0
+            onChange: (s) => o.option.setRound(s),
+            value: typeof o.option.round == "number" ? o.option.round : 0
           }
         )
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "[&_label]:font-semibold [&_label]:text-sm", children: [
         /* @__PURE__ */ e.jsx("label", { children: "Shadow" }),
         /* @__PURE__ */ e.jsx(
-          de,
+          pe,
           {
             min: 0,
             max: 6,
-            onChange: (s) => r.option.setShadow(s),
-            value: typeof r.option.shadow == "number" ? r.option.shadow : 0
+            onChange: (s) => o.option.setShadow(s),
+            value: typeof o.option.shadow == "number" ? o.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(
-            T,
+            k,
             {
               type: "text",
               size: "small",
@@ -2732,90 +2913,90 @@ const cs = Y(() => {
               onClick: () => t(!0),
               children: [
                 "More ",
-                /* @__PURE__ */ e.jsx(A.ChevronRight, { size: 16 })
+                /* @__PURE__ */ e.jsx(M.ChevronRight, { size: 16 })
               ]
             }
           )
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "py-3", children: /* @__PURE__ */ e.jsxs(
-          L.Group,
+          P.Group,
           {
             onChange: n,
-            value: r.option.background,
+            value: o.option.background,
             rootClassName: "grid grid-cols-7 [&_span]:ps-0",
             children: [
-              /* @__PURE__ */ e.jsx(L, { className: "[&_.ant-radio]:hidden [&_span]:p-0 mr-0", value: "default_1", children: /* @__PURE__ */ e.jsx("div", { className: G("w-8 h-8 rounded-full", Q.default_1.class) }) }),
+              /* @__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(L, { className: "[&_.ant-radio]:hidden [&_span]:p-0 mr-0", value: s, children: /* @__PURE__ */ e.jsx("div", { className: G("w-8 h-8 rounded-full", Q[s].class) }) }, 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(as, {})
+      /* @__PURE__ */ e.jsx(ws, {})
     ] }),
-    /* @__PURE__ */ e.jsx(cs, {}),
-    /* @__PURE__ */ e.jsx(fs, { showMore: o, onChange: t })
+    /* @__PURE__ */ e.jsx(vs, {}),
+    /* @__PURE__ */ e.jsx(Ms, { showMore: i, onChange: t })
   ] });
-}), us = (o, t = []) => {
-  M(() => {
+}), As = (i, t = []) => {
+  N(() => {
     const n = async (s) => {
       const a = s.clipboardData;
       if (!a || !a.items) return;
       const l = Array.from(a.items).filter(
-        (f) => At.includes(f.type)
+        (f) => Dt.includes(f.type)
       );
       if (!l.length) return;
-      const d = l[0].getAsFile();
-      o && o(d);
+      const h = l[0].getAsFile();
+      i && i(h);
     };
     return document.addEventListener("paste", n, !1), () => {
       document.removeEventListener("paste", n);
     };
   }, [...t]);
-}, hs = async () => {
+}, Ot = (i) => async (n, s = "blob") => {
+  const a = window.URL || window.webkitURL || window, l = s === "blob" ? a.createObjectURL(n) : n, h = await Yi(l), f = Math.round(h.width), d = Math.round(h.height);
+  if (i.editor.setImg({
+    src: l,
+    width: f,
+    height: d,
+    type: s === "blob" ? n.type : "image/png",
+    name: s === "blob" ? n.name : "ShotEasy.png"
+  }), i.option.size.type === "auto") {
+    const p = we(f, d);
+    i.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 i = await navigator.mediaDevices.getDisplayMedia(), t = document.createElement("video");
+    t.srcObject = i, 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);
+  } catch (i) {
+    console.log("Error capturing screen:", i);
   }
-}, { Dragger: ms } = hi, gs = Y(() => {
-  const o = async (a, l = "blob") => {
-    const d = window.URL || window.webkitURL || window, f = l === "blob" ? d.createObjectURL(a) : a, u = await Ro(f), h = Math.round(u.width), g = Math.round(u.height);
-    if (r.editor.setImg({
-      src: f,
-      width: h,
-      height: g,
-      type: l === "blob" ? a.type : "image/png",
-      name: l === "blob" ? a.name : "ShotEasy.png"
-    }), r.option.size.type === "auto") {
-      const y = Math.round(h * 0.2);
-      r.option.setFrameSize(h + y, g + y);
-    }
-  }, t = async (a) => (await o(a), Promise.reject()), n = async () => {
-    const a = await hs();
-    a && o(a, "dataURL");
+}, { Dragger: Ts } = yr, Ss = B(() => {
+  const i = Ot(o), t = async (a) => (await i(a), Promise.reject()), n = async () => {
+    const a = await Ns();
+    a && i(a, "dataURL");
   }, s = () => {
-    r.editor.message.info("Developing, Coming soon!");
+    o.editor.message.info("Developing, Coming soon!");
   };
-  return us((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: G("max-w-[600px]", r.editor.invalid && "invalid"), children: [
+  return As((a) => {
+    i(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]", o.editor.invalid && "invalid"), children: [
     /* @__PURE__ */ e.jsx(
-      ms,
+      Ts,
       {
-        accept: At.join(","),
+        accept: Dt.join(","),
         name: "file",
         showUploadList: !1,
         beforeUpload: t,
-        rootClassName: "p-4 rounded-md bg-white block shadow-sm",
+        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(A.ImagePlus, { className: "mx-auto", size: 36 }) }),
+          /* @__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", {}),
@@ -2824,29 +3005,40 @@ const cs = Y(() => {
         ] })
       }
     ),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between mt-4 py-4 px-6 rounded-md bg-white shadow-sm", children: [
-      /* @__PURE__ */ e.jsx(F, { placement: "top", arrow: !1, title: "Take a screenshot of desktop windows", children: /* @__PURE__ */ e.jsx(T, { shape: "round", type: "default", size: "large", icon: /* @__PURE__ */ e.jsx(A.Camera, { size: 20 }), onClick: n }) }),
-      /* @__PURE__ */ e.jsx(F, { placement: "top", arrow: !1, title: "Beautify text", children: /* @__PURE__ */ e.jsx(T, { shape: "round", type: "default", size: "large", icon: /* @__PURE__ */ e.jsx(A.Type, { size: 20 }), onClick: s }) }),
-      /* @__PURE__ */ e.jsx(F, { placement: "top", arrow: !1, title: "Beautify Code", children: /* @__PURE__ */ e.jsx(T, { shape: "round", type: "default", size: "large", icon: /* @__PURE__ */ e.jsx(A.CodeXml, { size: 20, onClick: s }) }) }),
-      /* @__PURE__ */ e.jsx(F, { placement: "top", arrow: !1, title: "Create gif animate", children: /* @__PURE__ */ e.jsx(T, { shape: "round", type: "default", size: "large", icon: /* @__PURE__ */ e.jsx(A.ImagePlay, { size: 20, onClick: s }) }) })
+    /* @__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 }) }) })
     ] })
   ] }) });
-}), Ys = Y(() => {
-  var s;
-  const o = (s = r.editor.img) != null && s.src ? /* @__PURE__ */ e.jsx(es, {}) : /* @__PURE__ */ e.jsx(gs, {}), [t, n] = mi.useMessage();
-  return M(() => {
-    r.editor.setMessage(t);
-  }, [t]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    n,
-    /* @__PURE__ */ e.jsxs("div", { className: "polka flex flex-col overflow-hidden antialiased w-full h-[100vh]", children: [
-      /* @__PURE__ */ e.jsx(Zo, {}),
-      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col flex-1 h-0 md:flex-row md:items-stretch", children: [
-        o,
-        /* @__PURE__ */ e.jsx(ps, {})
-      ] })
-    ] })
-  ] });
+}), $s = B(({ defaultImg: i, headLeft: t, headRight: n, isDark: s, boxClassName: a = "", onClear: l }) => {
+  var m;
+  const h = Ot(o), f = (m = o.editor.img) != null && m.src ? /* @__PURE__ */ e.jsx(hs, {}) : /* @__PURE__ */ e.jsx(Ss, {}), [d, p] = vr.useMessage();
+  return o.editor.setMessage(d), o.editor.setClearFun(l), le(() => {
+    const b = s || localStorage.getItem("SHOTEASY_BEAUTIFIER_THEME") === "dark" ? "dark" : "light";
+    o.editor.setTheme(b);
+  }, [s]), N(() => {
+    i && h(i, "dataURL");
+  }, [i]), /* @__PURE__ */ e.jsx(Ni, { children: /* @__PURE__ */ e.jsxs(
+    Nt,
+    {
+      theme: {
+        algorithm: o.editor.isDark ? ct.darkAlgorithm : ct.defaultAlgorithm
+      },
+      children: [
+        p,
+        /* @__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": o.editor.isDark ? "dark" : "light", children: [
+          /* @__PURE__ */ e.jsx(Qi, { headLeft: t, headRight: n }),
+          /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col flex-1 h-0 md:flex-row md:items-stretch", children: [
+            f,
+            /* @__PURE__ */ e.jsx(ks, {})
+          ] })
+        ] })
+      ]
+    }
+  ) });
 });
 export {
-  Ys as ImageBeautifier
+  $s as ImageBeautifier
 };