@gendive/slide 0.1.4 → 0.1.5

package/dist/devdive-slide.es.js

@@ -45,7 +45,7 @@ const k6 = [
   // 8: text color
   "#0f172a"
   // 9: darkest
-], j7 = y6({
+], q7 = y6({
   /* @Todo vibecode - 기본 컬러 설정 */
   primaryColor: "devdive",
   colors: {
@@ -85,7 +85,7 @@ const k6 = [
       }
     }
   }
-}), q7 = {
+}), K7 = {
   /* 색상 */
   primary: "#5B6EF7",
   bgMain: "#f4f4f5",
@@ -6645,10 +6645,17 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
     keyPoints: i(),
     keywords: o("키워드").split(",").map((c) => c.trim()).filter(Boolean)
   };
-}, Mr = () => `el-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, ow = (t) => {
+}, Mr = () => `el-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, ow = (t, e) => {
+  let n = 0;
+  for (const o of t) {
+    const i = /[가-힣ㄱ-ㅎㅏ-ㅣ]/.test(o);
+    n += i ? e * 1 : e * 0.6;
+  }
+  return Math.ceil(n);
+}, sw = (t) => {
   const e = t.recommendedLayout.toLowerCase(), n = t.visualElements.toLowerCase(), o = ["image", "graph", "chart", "infographic", "diagram", "icon", "그래프", "차트", "이미지", "아이콘", "다이어그램"], i = e.includes("image") || e.includes("graph") || e.includes("chart"), c = o.some((d) => n.includes(d));
   return i || c;
-}, sw = (t) => {
+}, lw = (t) => {
   const e = t.recommendedLayout.toLowerCase();
   return e.includes("image_left") || e.includes("left") ? "left" : e.includes("image_right") || e.includes("right") ? "right" : e.includes("bottom") || e.includes("graph") ? "bottom" : "right";
 }, N2 = (t, e, n, o, i, c = "이미지") => [
@@ -6701,7 +6708,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
     lineHeight: 1
   }
 ], P2 = (t, e = fs.devdive) => {
-  const n = [], o = t.sectionType === "cover" || t.sectionType === "closing", i = ow(t), c = i ? sw(t) : "none";
+  const n = [], o = t.sectionType === "cover" || t.sectionType === "closing", i = sw(t), c = i ? lw(t) : "none";
   if (o)
     n.push({
       id: Mr(),
@@ -6906,14 +6913,14 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
       x = 480;
       let S = d;
       t.keywords.forEach((w) => {
-        const E = w.length * 12 + 24;
+        const E = `#${w}`, R = ow(E, 12) + 24;
         n.push({
           id: Mr(),
           type: "shape",
           shapeType: "rect",
           x: S,
           y: x,
-          width: E,
+          width: R,
           height: 28,
           rotation: 0,
           fill: e.primary + "15",
@@ -6926,7 +6933,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
           content: `#${w}`,
           x: S,
           y: x + 5,
-          width: E,
+          width: R,
           height: 20,
           rotation: 0,
           fontSize: 12,
@@ -6936,17 +6943,17 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
           textStyle: "caption",
           fontWeight: "500",
           lineHeight: 1
-        }), S += E + 8;
+        }), S += R + 8;
       });
     }
   }
   return n;
-}, lw = {
+}, cw = {
   title: "제목",
   subtitle: "소제목",
   body: "본문",
   caption: "캡션"
-}, cw = ({ isOpen: t, onClose: e, onBack: n }) => {
+}, uw = ({ isOpen: t, onClose: e, onBack: n }) => {
   const [o, i] = at(""), [c, d] = at("body"), [h, p] = at(null), { generateText: u, isLoading: A, error: y, reset: x } = IA(), { addElement: S } = Ve(), w = () => `text-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, E = async () => {
     if (o.trim())
       try {
@@ -7015,7 +7022,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
             {
               value: c,
               onChange: (B) => d(B),
-              data: Object.entries(lw).map(([B, I]) => ({
+              data: Object.entries(cw).map(([B, I]) => ({
                 value: B,
                 label: I
               })),
@@ -7067,12 +7074,12 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
       ] })
     }
   );
-}, uw = [
+}, dw = [
   { value: "cover", label: "커버" },
   { value: "content", label: "콘텐츠" },
   { value: "data", label: "데이터/차트" },
   { value: "closing", label: "클로징" }
-], dw = ({
+], fw = ({
   isOpen: t,
   onClose: e,
   slide: n,
@@ -7110,7 +7117,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
           pv,
           {
             label: "섹션 타입",
-            data: uw,
+            data: dw,
             value: d.sectionType,
             onChange: (S) => p("sectionType", S || "content")
           }
@@ -7169,12 +7176,12 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
       ] })
     }
   );
-}, fw = [
+}, hw = [
   { value: "business", label: "비즈니스" },
   { value: "creative", label: "크리에이티브" },
   { value: "minimal", label: "미니멀" },
   { value: "educational", label: "교육" }
-], hw = [
+], pw = [
   { value: "title", label: "표지", icon: "title" },
   { value: "content", label: "본문", icon: "article" },
   { value: "bullets", label: "불릿", icon: "format_list_bulleted" },
@@ -7182,7 +7189,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
   { value: "image-left", label: "이미지 좌", icon: "image" },
   { value: "image-right", label: "이미지 우", icon: "image" },
   { value: "graph", label: "차트", icon: "insert_chart" }
-], pw = ({ isOpen: t, onClose: e, onBack: n }) => {
+], Aw = ({ isOpen: t, onClose: e, onBack: n }) => {
   const [o, i] = at("ai"), [c, d] = at("input"), [h, p] = at(0), [u, A] = at(!1), [y, x] = at(""), [S, w] = at(5), [E, R] = at("business"), [T, M] = at(!0), [B, I] = at([]), [F, Y] = at(null), [q, j] = at(""), [Q, V] = at(null), [me, X] = at(null), [ie, D] = at(null), [te, oe] = at("devdive"), { generateSlides: he, generateSlideContent: K, isLoading: re, error: ne, reset: O } = IA(), $ = async () => {
     if (!(!y.trim() || u)) {
       A(!0);
@@ -7437,7 +7444,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
                       {
                         value: E,
                         onChange: (G) => R(G),
-                        data: fw,
+                        data: hw,
                         fullWidth: !0,
                         color: "devdive"
                       }
@@ -7462,7 +7469,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
                           size: "xs",
                           value: G.layout,
                           onChange: (Z) => Ee(U, Z || "content"),
-                          data: hw.map((Z) => ({ value: Z.value, label: Z.label })),
+                          data: pw.map((Z) => ({ value: Z.value, label: Z.label })),
                           w: 100
                         }
                       ),
@@ -7667,7 +7674,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
           ] })
         ] }),
         Q && ie !== null && /* @__PURE__ */ P(
-          dw,
+          fw,
           {
             isOpen: ie !== null,
             onClose: () => D(null),
@@ -7680,16 +7687,16 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
       ]
     }
   );
-}, Aw = [
+}, mw = [
   { value: "realistic", label: "사실적" },
   { value: "illustration", label: "일러스트" },
   { value: "abstract", label: "추상" },
   { value: "3d", label: "3D" },
   { value: "minimalist", label: "미니멀" }
-], mw = [
+], gw = [
   { value: "512x512", label: "512×512" },
   { value: "1024x1024", label: "1024×1024" }
-], gw = ({ isOpen: t, onClose: e, onBack: n }) => {
+], vw = ({ isOpen: t, onClose: e, onBack: n }) => {
   const [o, i] = at(""), [c, d] = at("illustration"), [h, p] = at("512x512"), [u, A] = at(null), { generateImage: y, isLoading: x, error: S, reset: w } = IA(), { addElement: E } = Ve(), R = () => `image-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, T = async () => {
     if (o.trim())
       try {
@@ -7749,7 +7756,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
             {
               value: c,
               onChange: (F) => d(F),
-              data: Aw,
+              data: mw,
               fullWidth: !0,
               color: "devdive"
             }
@@ -7762,7 +7769,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
             {
               value: h,
               onChange: (F) => p(F),
-              data: mw,
+              data: gw,
               color: "devdive"
             }
           )
@@ -7807,7 +7814,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
       ] })
     }
   );
-}, vw = [
+}, yw = [
   {
     type: "text",
     icon: "edit_note",
@@ -7836,7 +7843,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
     description: "레이아웃과 색상을 자동 추천",
     color: "teal"
   }
-], yw = ({ isOpen: t, onClose: e }) => {
+], xw = ({ isOpen: t, onClose: e }) => {
   const [n, o] = at(null), i = (h) => {
     o(h);
   }, c = () => {
@@ -7868,7 +7875,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
         size: "lg",
         children: /* @__PURE__ */ de(dr, { gap: "md", children: [
           /* @__PURE__ */ P(pt, { size: "sm", c: "dimmed", children: "AI를 활용하여 프레젠테이션을 더 빠르고 쉽게 만들어보세요." }),
-          /* @__PURE__ */ P(nh, { cols: 2, spacing: "md", children: vw.map((h) => /* @__PURE__ */ P(
+          /* @__PURE__ */ P(nh, { cols: 2, spacing: "md", children: yw.map((h) => /* @__PURE__ */ P(
             E6,
             {
               padding: "lg",
@@ -7908,7 +7915,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
       }
     ),
     /* @__PURE__ */ P(
-      cw,
+      uw,
       {
         isOpen: n === "text",
         onClose: c,
@@ -7916,7 +7923,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
       }
     ),
     /* @__PURE__ */ P(
-      pw,
+      Aw,
       {
         isOpen: n === "slide",
         onClose: c,
@@ -7924,7 +7931,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
       }
     ),
     /* @__PURE__ */ P(
-      gw,
+      vw,
       {
         isOpen: n === "image",
         onClose: c,
@@ -7932,7 +7939,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
       }
     )
   ] });
-}, xw = () => {
+}, bw = () => {
   const [t, e] = at("Untitled Presentation"), [n, o] = at(!1), [i, c] = at(!1), [d, h] = at("new"), [p, u] = at(!1), [A, y] = at(!1), x = Ve((F) => F.slides), S = Ve((F) => F.defaultBackground), w = Ve((F) => F.resetPresentation), E = Ve((F) => F.loadSlides), R = Rn(null), T = async () => {
     if (!n) {
       o(!0);
@@ -8156,7 +8163,7 @@ ${t.language === "ko" ? "한국어로 작성하세요." : "Write in English."}`,
             mode: d
           }
         ),
-        /* @__PURE__ */ P(yw, { isOpen: p, onClose: () => u(!1) }),
+        /* @__PURE__ */ P(xw, { isOpen: p, onClose: () => u(!1) }),
         /* @__PURE__ */ P(
           $l,
           {
@@ -8258,19 +8265,19 @@ var eh = function(t, e, n) {
   return Dt.createElement("div", { className: c, style: { top: 100 * i + "%", left: 100 * n + "%" } }, Dt.createElement("div", { className: "react-colorful__pointer-fill", style: { backgroundColor: e } }));
 }, Qr = function(t, e, n) {
   return e === void 0 && (e = 0), n === void 0 && (n = Math.pow(10, e)), Math.round(n * t) / n;
-}, bw = function(t) {
-  return Ew($g(t));
+}, Sw = function(t) {
+  return Rw($g(t));
 }, $g = function(t) {
   return t[0] === "#" && (t = t.substring(1)), t.length < 6 ? { r: parseInt(t[0] + t[0], 16), g: parseInt(t[1] + t[1], 16), b: parseInt(t[2] + t[2], 16), a: t.length === 4 ? Qr(parseInt(t[3] + t[3], 16) / 255, 2) : 1 } : { r: parseInt(t.substring(0, 2), 16), g: parseInt(t.substring(2, 4), 16), b: parseInt(t.substring(4, 6), 16), a: t.length === 8 ? Qr(parseInt(t.substring(6, 8), 16) / 255, 2) : 1 };
-}, Sw = function(t) {
-  return _w(Cw(t));
 }, ww = function(t) {
+  return Ew(_w(t));
+}, Cw = function(t) {
   var e = t.s, n = t.v, o = t.a, i = (200 - e) * n / 100;
   return { h: Qr(t.h), s: Qr(i > 0 && i < 200 ? e * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0), l: Qr(i / 2), a: Qr(o, 2) };
 }, ev = function(t) {
-  var e = ww(t);
+  var e = Cw(t);
   return "hsl(" + e.h + ", " + e.s + "%, " + e.l + "%)";
-}, Cw = function(t) {
+}, _w = function(t) {
   var e = t.h, n = t.s, o = t.v, i = t.a;
   e = e / 360 * 6, n /= 100, o /= 100;
   var c = Math.floor(e), d = o * (1 - n), h = o * (1 - (e - c) * n), p = o * (1 - (1 - e + c) * n), u = c % 6;
@@ -8278,20 +8285,20 @@ var eh = function(t, e, n) {
 }, sA = function(t) {
   var e = t.toString(16);
   return e.length < 2 ? "0" + e : e;
-}, _w = function(t) {
+}, Ew = function(t) {
   var e = t.r, n = t.g, o = t.b, i = t.a, c = i < 1 ? sA(Qr(255 * i)) : "";
   return "#" + sA(e) + sA(n) + sA(o) + c;
-}, Ew = function(t) {
+}, Rw = function(t) {
   var e = t.r, n = t.g, o = t.b, i = t.a, c = Math.max(e, n, o), d = c - Math.min(e, n, o), h = d ? c === e ? (n - o) / d : c === n ? 2 + (o - e) / d : 4 + (e - n) / d : 0;
   return { h: Qr(60 * (h < 0 ? h + 6 : h)), s: Qr(c ? d / c * 100 : 0), v: Qr(c / 255 * 100), a: i };
-}, Rw = Dt.memo(function(t) {
+}, Tw = Dt.memo(function(t) {
   var e = t.hue, n = t.onChange, o = xv(["react-colorful__hue", t.className]);
   return Dt.createElement("div", { className: o }, Dt.createElement(jx, { onMove: function(i) {
     n({ h: 360 * i.left });
   }, onKey: function(i) {
     n({ h: eh(e + 360 * i.left, 0, 360) });
   }, "aria-label": "Hue", "aria-valuenow": Qr(e), "aria-valuemax": "360", "aria-valuemin": "0" }, Dt.createElement(qx, { className: "react-colorful__hue-pointer", left: e / 360, color: ev({ h: e, s: 100, v: 100, a: 1 }) })));
-}), Tw = Dt.memo(function(t) {
+}), Dw = Dt.memo(function(t) {
   var e = t.hsva, n = t.onChange, o = { backgroundColor: ev({ h: e.h, s: 100, v: 100, a: 1 }) };
   return Dt.createElement("div", { className: "react-colorful__saturation", style: o }, Dt.createElement(jx, { onMove: function(i) {
     n({ s: 100 * i.left, v: 100 - 100 * i.top });
@@ -8302,10 +8309,10 @@ var eh = function(t, e, n) {
   if (t === e) return !0;
   for (var n in t) if (t[n] !== e[n]) return !1;
   return !0;
-}, Dw = function(t, e) {
+}, Lw = function(t, e) {
   return t.toLowerCase() === e.toLowerCase() || Kx($g(t), $g(e));
 };
-function Lw(t, e, n) {
+function kw(t, e, n) {
   var o = Jg(n), i = at(function() {
     return t.toHsva(e);
   }), c = i[0], d = i[1], h = Rn({ color: e, hsva: c });
@@ -8325,29 +8332,29 @@ function Lw(t, e, n) {
   }, []);
   return [c, p];
 }
-var kw = typeof window < "u" ? T6 : er, Nw = function() {
+var Nw = typeof window < "u" ? T6 : er, Pw = function() {
   return typeof __webpack_nonce__ < "u" ? __webpack_nonce__ : void 0;
-}, z2 = /* @__PURE__ */ new Map(), Pw = function(t) {
-  kw(function() {
+}, z2 = /* @__PURE__ */ new Map(), Mw = function(t) {
+  Nw(function() {
     var e = t.current ? t.current.ownerDocument : document;
     if (e !== void 0 && !z2.has(e)) {
       var n = e.createElement("style");
       n.innerHTML = `.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`, z2.set(e, n);
-      var o = Nw();
+      var o = Pw();
       o && n.setAttribute("nonce", o), e.head.appendChild(n);
     }
   }, []);
-}, Mw = function(t) {
+}, Bw = function(t) {
   var e = t.className, n = t.colorModel, o = t.color, i = o === void 0 ? n.defaultColor : o, c = t.onChange, d = Vx(t, ["className", "colorModel", "color", "onChange"]), h = Rn(null);
-  Pw(h);
-  var p = Lw(n, i, c), u = p[0], A = p[1], y = xv(["react-colorful", e]);
-  return Dt.createElement("div", OA({}, d, { ref: h, className: y }), Dt.createElement(Tw, { hsva: u, onChange: A }), Dt.createElement(Rw, { hue: u.h, onChange: A, className: "react-colorful__last-control" }));
-}, Bw = { defaultColor: "000", toHsva: bw, fromHsva: function(t) {
-  return Sw({ h: t.h, s: t.s, v: t.v, a: 1 });
-}, equal: Dw }, Jx = function(t) {
-  return Dt.createElement(Mw, OA({}, t, { colorModel: Bw }));
+  Mw(h);
+  var p = kw(n, i, c), u = p[0], A = p[1], y = xv(["react-colorful", e]);
+  return Dt.createElement("div", OA({}, d, { ref: h, className: y }), Dt.createElement(Dw, { hsva: u, onChange: A }), Dt.createElement(Tw, { hue: u.h, onChange: A, className: "react-colorful__last-control" }));
+}, zw = { defaultColor: "000", toHsva: Sw, fromHsva: function(t) {
+  return ww({ h: t.h, s: t.s, v: t.v, a: 1 });
+}, equal: Lw }, Jx = function(t) {
+  return Dt.createElement(Bw, OA({}, t, { colorModel: zw }));
 };
-const zw = () => {
+const Fw = () => {
   var ne;
   const t = Ve((O) => O.mode), e = Ve((O) => O.currentShapeType), n = Ve((O) => O.currentTextStyle), o = Ve((O) => O.currentFontFamily), i = Ve((O) => O.selectedElementId), c = Ve((O) => O.slides), d = Ve((O) => O.currentSlideIndex), h = Ve((O) => O.setMode), p = Ve((O) => O.setShapeType), u = Ve((O) => O.setTextStyle), A = Ve((O) => O.setFontFamily), y = Ve((O) => O.deleteElement), x = Ve((O) => O.addElement), S = Ve((O) => O.updateSlideBackground), w = Ve((O) => O.updateAllSlidesBackground), E = Ve((O) => O.snapSettings), R = Ve((O) => O.toggleSnap), [T, M] = at(!1), B = Rn(null), I = Rn(null), [F, Y] = at({ x: 0, y: 0 }), [q, j] = at({
     isDragging: !1,
@@ -8705,19 +8712,19 @@ const zw = () => {
       )
     }
   );
-}, Fw = Math.PI / 180;
-function Iw() {
+}, Iw = Math.PI / 180;
+function Ow() {
   return typeof window < "u" && ({}.toString.call(window) === "[object Window]" || {}.toString.call(window) === "[object global]");
 }
 const ql = typeof global < "u" ? global : typeof window < "u" ? window : typeof WorkerGlobalScope < "u" ? self : {}, Qe = {
   _global: ql,
   version: "10.2.0",
-  isBrowser: Iw(),
+  isBrowser: Ow(),
   isUnminified: /param/.test((function(t) {
   }).toString()),
   dblClickWindow: 400,
   getAngle(t) {
-    return Qe.angleDeg ? t * Fw : t;
+    return Qe.angleDeg ? t * Iw : t;
   },
   enableTrace: !1,
   pointerEventsEnabled: !0,
@@ -8759,7 +8766,7 @@ const ql = typeof global < "u" ? global : typeof window < "u" ? window : typeof
   Qe[t.prototype.getClassName()] = t;
 };
 Qe._injectGlobal(Qe);
-const Ow = `Konva.js unsupported environment.
+const Uw = `Konva.js unsupported environment.
 
 Looks like you are trying to use Konva.js in Node.js environment. because "document" object is undefined.
 
@@ -8774,7 +8781,7 @@ bash: npm install skia-canvas
 js: import "konva/skia-backend";
 `, F2 = () => {
   if (typeof document > "u")
-    throw new Error(Ow);
+    throw new Error(Uw);
 };
 class ai {
   constructor(e = [1, 0, 0, 1, 0, 0]) {
@@ -8847,7 +8854,7 @@ class ai {
     return p.rotation = fe._getRotation(p.rotation), p;
   }
 }
-const Uw = "[object Array]", Gw = "[object Number]", Hw = "[object String]", Xw = "[object Boolean]", Ww = Math.PI / 180, Qw = 180 / Math.PI, Rf = "#", Yw = "", Vw = "0", jw = "Konva warning: ", I2 = "Konva error: ", qw = "rgb(", Eg = {
+const Gw = "[object Array]", Hw = "[object Number]", Xw = "[object String]", Ww = "[object Boolean]", Qw = Math.PI / 180, Yw = 180 / Math.PI, Rf = "#", Vw = "", jw = "0", qw = "Konva warning: ", I2 = "Konva error: ", Kw = "rgb(", Eg = {
   aliceblue: [240, 248, 255],
   antiquewhite: [250, 235, 215],
   aqua: [0, 255, 255],
@@ -8997,9 +9004,9 @@ const Uw = "[object Array]", Gw = "[object Number]", Hw = "[object String]", Xw
   whitesmoke: [245, 245, 245],
   yellow: [255, 255, 0],
   yellowgreen: [154, 205, 5]
-}, Kw = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;
+}, Jw = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;
 let lA = [], Tf = null;
-const Jw = typeof requestAnimationFrame < "u" && requestAnimationFrame || function(t) {
+const Zw = typeof requestAnimationFrame < "u" && requestAnimationFrame || function(t) {
   setTimeout(t, 16);
 }, fe = {
   _isElement(t) {
@@ -9012,16 +9019,16 @@ const Jw = typeof requestAnimationFrame < "u" && requestAnimationFrame || functi
     return !!t && t.constructor === Object;
   },
   _isArray(t) {
-    return Object.prototype.toString.call(t) === Uw;
+    return Object.prototype.toString.call(t) === Gw;
   },
   _isNumber(t) {
-    return Object.prototype.toString.call(t) === Gw && !isNaN(t) && isFinite(t);
+    return Object.prototype.toString.call(t) === Hw && !isNaN(t) && isFinite(t);
   },
   _isString(t) {
-    return Object.prototype.toString.call(t) === Hw;
+    return Object.prototype.toString.call(t) === Xw;
   },
   _isBoolean(t) {
-    return Object.prototype.toString.call(t) === Xw;
+    return Object.prototype.toString.call(t) === Ww;
   },
   isObject(t) {
     return t instanceof Object;
@@ -9036,7 +9043,7 @@ const Jw = typeof requestAnimationFrame < "u" && requestAnimationFrame || functi
     return t === 0 || t > 0 ? 1 : -1;
   },
   requestAnimFrame(t) {
-    lA.push(t), lA.length === 1 && Jw(function() {
+    lA.push(t), lA.length === 1 && Zw(function() {
       const e = lA;
       lA = [], e.forEach(function(n) {
         n();
@@ -9071,7 +9078,7 @@ const Jw = typeof requestAnimationFrame < "u" && requestAnimationFrame || functi
     return ((1 << 24) + (t << 16) + (e << 8) + n).toString(16).slice(1);
   },
   _hexToRgb(t) {
-    t = t.replace(Rf, Yw);
+    t = t.replace(Rf, Vw);
     const e = parseInt(t, 16);
     return {
       r: e >> 16 & 255,
@@ -9082,7 +9089,7 @@ const Jw = typeof requestAnimationFrame < "u" && requestAnimationFrame || functi
   getRandomColor() {
     let t = (Math.random() * 16777215 << 0).toString(16);
     for (; t.length < 6; )
-      t = Vw + t;
+      t = jw + t;
     return Rf + t;
   },
   isCanvasFarblingActive() {
@@ -9122,7 +9129,7 @@ const Jw = typeof requestAnimationFrame < "u" && requestAnimationFrame || functi
       r: e[0],
       g: e[1],
       b: e[2]
-    }) : t[0] === Rf ? this._hexToRgb(t.substring(1)) : t.substr(0, 4) === qw ? (e = Kw.exec(t.replace(/ /g, "")), {
+    }) : t[0] === Rf ? this._hexToRgb(t.substring(1)) : t.substr(0, 4) === Kw ? (e = Jw.exec(t.replace(/ /g, "")), {
       r: parseInt(e[1], 10),
       g: parseInt(e[2], 10),
       b: parseInt(e[3], 10)
@@ -9240,10 +9247,10 @@ const Jw = typeof requestAnimationFrame < "u" && requestAnimationFrame || functi
     return t.slice(0);
   },
   degToRad(t) {
-    return t * Ww;
+    return t * Qw;
   },
   radToDeg(t) {
-    return t * Qw;
+    return t * Yw;
   },
   _degToRad(t) {
     return fe.warn("Util._degToRad is removed. Please use public Util.degToRad instead."), fe.degToRad(t);
@@ -9264,7 +9271,7 @@ const Jw = typeof requestAnimationFrame < "u" && requestAnimationFrame || functi
     console.error(I2 + t);
   },
   warn(t) {
-    Qe.showWarnings && console.warn(jw + t);
+    Qe.showWarnings && console.warn(qw + t);
   },
   each(t, e) {
     for (const n in t)
@@ -9370,7 +9377,7 @@ const Jw = typeof requestAnimationFrame < "u" && requestAnimationFrame || functi
     }
   }
 };
-function Zw(t) {
+function $w(t) {
   const e = [], n = t.length, o = fe;
   for (let i = 0; i < n; i++) {
     let c = t[i];
@@ -9378,7 +9385,7 @@ function Zw(t) {
   }
   return e;
 }
-const O2 = ",", $w = "(", eC = ")", tC = "([", nC = "])", rC = ";", aC = "()", iC = "=", U2 = [
+const O2 = ",", eC = "(", tC = ")", nC = "([", rC = "])", aC = ";", iC = "()", oC = "=", U2 = [
   "arc",
   "arcTo",
   "beginPath",
@@ -9411,7 +9418,7 @@ const O2 = ",", $w = "(", eC = ")", tC = "([", nC = "])", rC = ";", aC = "()", i
   "strokeText",
   "transform",
   "translate"
-], oC = [
+], sC = [
   "fillStyle",
   "strokeStyle",
   "shadowColor",
@@ -9432,7 +9439,7 @@ const O2 = ",", $w = "(", eC = ")", tC = "([", nC = "])", rC = ";", aC = "()", i
   "globalCompositeOperation",
   "imageSmoothingEnabled",
   "filter"
-], sC = 100;
+], lC = 100;
 let cA = null;
 function G2() {
   if (cA !== null)
@@ -9464,7 +9471,7 @@ class UA {
   getTrace(e, n) {
     let o = this.traceArr, i = o.length, c = "", d, h, p, u;
     for (d = 0; d < i; d++)
-      h = o[d], p = h.method, p ? (u = h.args, c += p, e ? c += aC : fe._isArray(u[0]) ? c += tC + u.join(O2) + nC : (n && (u = u.map((A) => typeof A == "number" ? Math.floor(A) : A)), c += $w + u.join(O2) + eC)) : (c += h.property, e || (c += iC + h.val)), c += rC;
+      h = o[d], p = h.method, p ? (u = h.args, c += p, e ? c += iC : fe._isArray(u[0]) ? c += nC + u.join(O2) + rC : (n && (u = u.map((A) => typeof A == "number" ? Math.floor(A) : A)), c += eC + u.join(O2) + tC)) : (c += h.property, e || (c += oC + h.val)), c += aC;
     return c;
   }
   clearTrace() {
@@ -9472,7 +9479,7 @@ class UA {
   }
   _trace(e) {
     let n = this.traceArr, o;
-    n.push(e), o = n.length, o >= sC && n.shift();
+    n.push(e), o = n.length, o >= lC && n.shift();
   }
   reset() {
     const e = this.getCanvas().getPixelRatio();
@@ -9625,7 +9632,7 @@ class UA {
     const d = function(h) {
       let p = e[h], u;
       e[h] = function() {
-        return c = Zw(Array.prototype.slice.call(arguments, 0)), u = p.apply(e, arguments), e._trace({
+        return c = $w(Array.prototype.slice.call(arguments, 0)), u = p.apply(e, arguments), e._trace({
           method: h,
           args: c
         }), u;
@@ -9648,7 +9655,7 @@ class UA {
     !n || n === "source-over" || this.setAttr("globalCompositeOperation", n);
   }
 }
-oC.forEach(function(t) {
+sC.forEach(function(t) {
   Object.defineProperty(UA.prototype, t, {
     get() {
       return this._context[t];
@@ -9658,7 +9665,7 @@ oC.forEach(function(t) {
     }
   });
 });
-class lC extends UA {
+class cC extends UA {
   constructor(e, { willReadFrequently: n = !1 } = {}) {
     super(e), this._context = e._canvas.getContext("2d", {
       willReadFrequently: n
@@ -9730,7 +9737,7 @@ class lC extends UA {
     this.setAttr("shadowColor", c), this.setAttr("shadowBlur", d * Math.min(Math.abs(A), Math.abs(y))), this.setAttr("shadowOffsetX", h.x * A), this.setAttr("shadowOffsetY", h.y * y);
   }
 }
-class cC extends UA {
+class uC extends UA {
   constructor(e) {
     super(e), this._context = e._canvas.getContext("2d", {
       willReadFrequently: !0
@@ -9757,7 +9764,7 @@ class cC extends UA {
   }
 }
 let uA;
-function uC() {
+function dC() {
   if (uA)
     return uA;
   const t = fe.createCanvasElement(), e = t.getContext("2d");
@@ -9769,7 +9776,7 @@ function uC() {
 class bv {
   constructor(e) {
     this.pixelRatio = 1, this.width = 0, this.height = 0, this.isCache = !1;
-    const o = (e || {}).pixelRatio || Qe.pixelRatio || uC();
+    const o = (e || {}).pixelRatio || Qe.pixelRatio || dC();
     this.pixelRatio = o, this._canvas = fe.createCanvasElement(), this._canvas.style.padding = "0", this._canvas.style.margin = "0", this._canvas.style.border = "0", this._canvas.style.background = "transparent", this._canvas.style.position = "absolute", this._canvas.style.top = "0", this._canvas.style.left = "0";
   }
   getContext() {
@@ -9815,14 +9822,14 @@ class bv {
 }
 class el extends bv {
   constructor(e = { width: 0, height: 0, willReadFrequently: !1 }) {
-    super(e), this.context = new lC(this, {
+    super(e), this.context = new cC(this, {
       willReadFrequently: e.willReadFrequently
     }), this.setSize(e.width, e.height);
   }
 }
 class Sv extends bv {
   constructor(e = { width: 0, height: 0 }) {
-    super(e), this.hitCanvas = !0, this.context = new cC(this), this.setSize(e.width, e.height);
+    super(e), this.hitCanvas = !0, this.context = new uC(this), this.setSize(e.width, e.height);
   }
 }
 const hn = {
@@ -9924,7 +9931,7 @@ function $x() {
       return n || o || fe.warn(rl(t) + ' is a not valid value for "' + e + '" attribute. The value should be a string or a native gradient.'), t;
     };
 }
-function dC() {
+function fC() {
   if (Qe.isUnminified)
     return function(t, e) {
       const n = Int8Array ? Object.getPrototypeOf(Int8Array) : null;
@@ -9939,7 +9946,7 @@ function qi() {
       return t === !0 || t === !1 || fe.warn(rl(t) + ' is a not valid value for "' + e + '" attribute. The value should be a boolean.'), t;
     };
 }
-function fC(t) {
+function hC(t) {
   if (Qe.isUnminified)
     return function(e, n) {
       return e == null || fe.isObject(e) || fe.warn(rl(e) + ' is a not valid value for "' + n + '" attribute. The value should be an object with properties ' + t), e;
@@ -9976,7 +9983,7 @@ const Df = "get", Lf = "set", ee = {
       }
       return A;
     };
-    const u = fC(n);
+    const u = hC(n);
     t.prototype[p] = function(A) {
       const y = this.attrs[e];
       o && (A = o.call(this, A, e)), u && u.call(this, A, e);
@@ -10017,7 +10024,7 @@ const Df = "get", Lf = "set", ee = {
     this._filterUpToDate = !1;
   }
 };
-function hC(t) {
+function pC(t) {
   const e = /(\w+)\(([^)]+)\)/g;
   let n;
   for (; (n = e.exec(t)) !== null; ) {
@@ -10071,7 +10078,7 @@ function hC(t) {
   return () => {
   };
 }
-const RA = "absoluteOpacity", H2 = "allEventListeners", ss = "absoluteTransform", X2 = "absoluteScale", Yl = "canvas", pC = "Change", AC = "children", mC = "konva", tv = "listening", gC = "mouseenter", vC = "mouseleave", yC = "pointerenter", xC = "pointerleave", bC = "touchenter", SC = "touchleave", W2 = "set", Q2 = "Shape", TA = " ", Y2 = "stage", Ks = "transform", wC = "Stage", nv = "visible", CC = [
+const RA = "absoluteOpacity", H2 = "allEventListeners", ss = "absoluteTransform", X2 = "absoluteScale", Yl = "canvas", AC = "Change", mC = "children", gC = "konva", tv = "listening", vC = "mouseenter", yC = "mouseleave", xC = "pointerenter", bC = "pointerleave", SC = "touchenter", wC = "touchleave", W2 = "set", Q2 = "Shape", TA = " ", Y2 = "stage", Ks = "transform", CC = "Stage", nv = "visible", _C = [
   "xChange.konva",
   "yChange.konva",
   "scaleXChange.konva",
@@ -10083,10 +10090,10 @@ const RA = "absoluteOpacity", H2 = "allEventListeners", ss = "absoluteTransform"
   "offsetYChange.konva",
   "transformsEnabledChange.konva"
 ].join(TA);
-let _C = 1;
+let EC = 1;
 class Ge {
   constructor(e) {
-    this._id = _C++, this.eventListeners = {}, this.attrs = {}, this.index = 0, this._allEventListeners = null, this.parent = null, this._cache = /* @__PURE__ */ new Map(), this._attachedDepsListeners = /* @__PURE__ */ new Map(), this._lastPos = null, this._batchingTransformChange = !1, this._needClearTransformCache = !1, this._filterUpToDate = !1, this._isUnderCache = !1, this._dragEventId = null, this._shouldFireChangeEvents = !1, this.setAttrs(e), this._shouldFireChangeEvents = !0;
+    this._id = EC++, this.eventListeners = {}, this.attrs = {}, this.index = 0, this._allEventListeners = null, this.parent = null, this._cache = /* @__PURE__ */ new Map(), this._attachedDepsListeners = /* @__PURE__ */ new Map(), this._lastPos = null, this._batchingTransformChange = !1, this._needClearTransformCache = !1, this._filterUpToDate = !1, this._isUnderCache = !1, this._dragEventId = null, this._shouldFireChangeEvents = !1, this.setAttrs(e), this._shouldFireChangeEvents = !0;
   }
   hasChildren() {
     return !1;
@@ -10215,7 +10222,7 @@ class Ge {
     }
     try {
       for (d = e.length, c.clear(), c.drawImage(o._canvas, 0, 0, o.getWidth() / y, o.getHeight() / y), h = c.getImageData(0, 0, i.getWidth(), i.getHeight()), p = 0; p < d; p++)
-        u = e[p], typeof u == "string" && (u = hC(u)), u.call(this, h), c.putImageData(h, 0, 0);
+        u = e[p], typeof u == "string" && (u = pC(u)), u.call(this, h), c.putImageData(h, 0, 0);
     } catch (x) {
       fe.error("Unable to apply filter. " + x.message + " This post my help you https://konvajs.org/docs/posts/Tainted_Canvas.html.");
     }
@@ -10301,7 +10308,7 @@ class Ge {
       if (!e)
         return this;
       for (n in e)
-        n !== AC && (o = W2 + fe._capitalize(n), fe._isFunction(this[o]) ? this[o](e[n]) : this._setAttr(n, e[n]));
+        n !== mC && (o = W2 + fe._capitalize(n), fe._isFunction(this[o]) ? this[o](e[n]) : this._setAttr(n, e[n]));
     }), this;
   }
   isListening() {
@@ -10350,7 +10357,7 @@ class Ge {
       i.length > 0 && i[0].getDepth() <= e && p(i);
     }
     const u = this.getStage();
-    return n.nodeType !== wC && u && p(u.getChildren()), o;
+    return n.nodeType !== CC && u && p(u.getChildren()), o;
   }
   getDepth() {
     let e = 0, n = this.parent;
@@ -10597,7 +10604,7 @@ class Ge {
     const p = new this.constructor(n);
     for (o in this.eventListeners)
       for (i = this.eventListeners[o], c = i.length, d = 0; d < c; d++)
-        h = i[d], h.name.indexOf(mC) < 0 && (p.eventListeners[o] || (p.eventListeners[o] = []), p.eventListeners[o].push(h));
+        h = i[d], h.name.indexOf(gC) < 0 && (p.eventListeners[o] || (p.eventListeners[o] = []), p.eventListeners[o].push(h));
     return p;
   }
   _toKonvaCanvas(e) {
@@ -10675,7 +10682,7 @@ class Ge {
       }
   }
   _fireChangeEvent(e, n, o) {
-    this._fire(e + pC, {
+    this._fire(e + AC, {
       oldVal: n,
       newVal: o
     });
@@ -10718,12 +10725,12 @@ class Ge {
   _fireAndBubble(e, n, o) {
     n && this.nodeType === Q2 && (n.target = this);
     const i = [
-      gC,
       vC,
       yC,
       xC,
       bC,
-      SC
+      SC,
+      wC
     ];
     if (!(i.indexOf(e) !== -1 && (o && (this === o || this.isAncestorOf && this.isAncestorOf(o)) || this.nodeType === "Stage" && !o))) {
       this._fire(e, n);
@@ -10863,7 +10870,7 @@ Ge.protoListenerMap = /* @__PURE__ */ new Map();
 Ge.prototype.nodeType = "Node";
 Ge.prototype._attrsAffectingSize = [];
 Ge.prototype.eventListeners = {};
-Ge.prototype.on.call(Ge.prototype, CC, function() {
+Ge.prototype.on.call(Ge.prototype, _C, function() {
   if (this._batchingTransformChange) {
     this._needClearTransformCache = !0;
     return;
@@ -11138,7 +11145,7 @@ function Qf(t, e) {
   const o = n.getStage();
   o && o.content, th.delete(t), e5 && n._fire("lostpointercapture", Cv(new PointerEvent("lostpointercapture")));
 }
-const EC = "Stage", RC = "string", V2 = "px", TC = "mouseout", r5 = "mouseleave", a5 = "mouseover", i5 = "mouseenter", o5 = "mousemove", s5 = "mousedown", l5 = "mouseup", Bf = "pointermove", zf = "pointerdown", Wu = "pointerup", Ff = "pointercancel", DC = "lostpointercapture", dA = "pointerout", If = "pointerleave", fA = "pointerover", hA = "pointerenter", rv = "contextmenu", c5 = "touchstart", u5 = "touchend", d5 = "touchmove", f5 = "touchcancel", av = "wheel", LC = 5, kC = [
+const RC = "Stage", TC = "string", V2 = "px", DC = "mouseout", r5 = "mouseleave", a5 = "mouseover", i5 = "mouseenter", o5 = "mousemove", s5 = "mousedown", l5 = "mouseup", Bf = "pointermove", zf = "pointerdown", Wu = "pointerup", Ff = "pointercancel", LC = "lostpointercapture", dA = "pointerout", If = "pointerleave", fA = "pointerover", hA = "pointerenter", rv = "contextmenu", c5 = "touchstart", u5 = "touchend", d5 = "touchmove", f5 = "touchcancel", av = "wheel", kC = 5, NC = [
   [i5, "_pointerenter"],
   [s5, "_pointerdown"],
   [o5, "_pointermove"],
@@ -11156,10 +11163,10 @@ const EC = "Stage", RC = "string", V2 = "px", TC = "mouseout", r5 = "mouseleave"
   [Wu, "_pointerup"],
   [Ff, "_pointercancel"],
   [If, "_pointerleave"],
-  [DC, "_lostpointercapture"]
+  [LC, "_lostpointercapture"]
 ], Tg = {
   mouse: {
-    [dA]: TC,
+    [dA]: DC,
     [If]: r5,
     [fA]: a5,
     [hA]: i5,
@@ -11206,7 +11213,7 @@ const EC = "Stage", RC = "string", V2 = "px", TC = "mouseout", r5 = "mouseleave"
 function j2(t = {}) {
   return (t.clipFunc || t.clipWidth || t.clipHeight) && fe.warn("Stage does not support clipping. Please use clip for Layers or Groups."), t;
 }
-const NC = "Pointer position is missing and not registered by the stage. Looks like it is outside of the stage container. You can set it manually from event: stage.setPointersPositions(event);", Yf = [];
+const PC = "Pointer position is missing and not registered by the stage. Looks like it is outside of the stage container. You can set it manually from event: stage.setPointersPositions(event);", Yf = [];
 let HA = class extends ii {
   constructor(e) {
     super(j2(e)), this._pointerPositions = [], this._changedPointerPositions = [], this._buildDOM(), this._bindContentEvents(), Yf.push(this), this.on("widthChange.konva heightChange.konva", this._resizeDOM), this.on("visibleChange.konva", this._checkVisibility), this.on("clipWidthChange.konva clipHeightChange.konva clipFuncChange.konva", () => {
@@ -11224,7 +11231,7 @@ let HA = class extends ii {
     this.content.style.display = e;
   }
   setContainer(e) {
-    if (typeof e === RC) {
+    if (typeof e === TC) {
       let n;
       if (e.charAt(0) === ".") {
         const o = e.slice(1);
@@ -11260,7 +11267,7 @@ let HA = class extends ii {
     return e ? {
       x: e.x,
       y: e.y
-    } : (fe.warn(NC), null);
+    } : (fe.warn(PC), null);
   }
   _getPointerById(e) {
     return this._pointerPositions.find((n) => n.id === e);
@@ -11313,7 +11320,7 @@ let HA = class extends ii {
     }
     super.add(e);
     const o = this.children.length;
-    return o > LC && fe.warn("The stage has " + o + " layers. Recommended maximum number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree structure, you can use Konva.Group."), e.setSize({ width: this.width(), height: this.height() }), e.draw(), Qe.isBrowser && this.content.appendChild(e.canvas._canvas), this;
+    return o > kC && fe.warn("The stage has " + o + " layers. Recommended maximum number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree structure, you can use Konva.Group."), e.setSize({ width: this.width(), height: this.height() }), e.draw(), Qe.isBrowser && this.content.appendChild(e.canvas._canvas), this;
   }
   getParent() {
     return null;
@@ -11334,7 +11341,7 @@ let HA = class extends ii {
     return this.children;
   }
   _bindContentEvents() {
-    Qe.isBrowser && kC.forEach(([e, n]) => {
+    Qe.isBrowser && NC.forEach(([e, n]) => {
       this.content.addEventListener(e, (o) => {
         this[n](o);
       }, { passive: !1 });
@@ -11572,7 +11579,7 @@ let HA = class extends ii {
     }), this;
   }
 };
-HA.prototype.nodeType = EC;
+HA.prototype.nodeType = RC;
 Xn(HA);
 ee.addGetterSetter(HA, "container");
 Qe.isBrowser && document.addEventListener("visibilitychange", () => {
@@ -11586,33 +11593,33 @@ function Dg() {
   return pA || (pA = fe.createCanvasElement().getContext("2d"), pA);
 }
 const Vf = {};
-function PC(t) {
+function MC(t) {
   const e = this.attrs.fillRule;
   e ? t.fill(e) : t.fill();
 }
-function MC(t) {
+function BC(t) {
   t.stroke();
 }
-function BC(t) {
+function zC(t) {
   const e = this.attrs.fillRule;
   e ? t.fill(e) : t.fill();
 }
-function zC(t) {
+function FC(t) {
   t.stroke();
 }
-function FC() {
+function IC() {
   this._clearCache(h5);
 }
-function IC() {
+function OC() {
   this._clearCache(p5);
 }
-function OC() {
+function UC() {
   this._clearCache(A5);
 }
-function UC() {
+function GC() {
   this._clearCache(m5);
 }
-function GC() {
+function HC() {
   this._clearCache(g5);
 }
 class ze extends Ge {
@@ -11843,19 +11850,19 @@ class ze extends Ge {
     Qf(e);
   }
 }
-ze.prototype._fillFunc = PC;
-ze.prototype._strokeFunc = MC;
-ze.prototype._fillFuncHit = BC;
-ze.prototype._strokeFuncHit = zC;
+ze.prototype._fillFunc = MC;
+ze.prototype._strokeFunc = BC;
+ze.prototype._fillFuncHit = zC;
+ze.prototype._strokeFuncHit = FC;
 ze.prototype._centroid = !1;
 ze.prototype.nodeType = "Shape";
 Xn(ze);
 ze.prototype.eventListeners = {};
-ze.prototype.on.call(ze.prototype, "shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva", FC);
-ze.prototype.on.call(ze.prototype, "shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva", IC);
-ze.prototype.on.call(ze.prototype, "fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva fillPatternOffsetXChange.konva fillPatternOffsetYChange.konva fillPatternXChange.konva fillPatternYChange.konva fillPatternRotationChange.konva", OC);
-ze.prototype.on.call(ze.prototype, "fillPriorityChange.konva fillLinearGradientColorStopsChange.konva fillLinearGradientStartPointXChange.konva fillLinearGradientStartPointYChange.konva fillLinearGradientEndPointXChange.konva fillLinearGradientEndPointYChange.konva", UC);
-ze.prototype.on.call(ze.prototype, "fillPriorityChange.konva fillRadialGradientColorStopsChange.konva fillRadialGradientStartPointXChange.konva fillRadialGradientStartPointYChange.konva fillRadialGradientEndPointXChange.konva fillRadialGradientEndPointYChange.konva fillRadialGradientStartRadiusChange.konva fillRadialGradientEndRadiusChange.konva", GC);
+ze.prototype.on.call(ze.prototype, "shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva", IC);
+ze.prototype.on.call(ze.prototype, "shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva", OC);
+ze.prototype.on.call(ze.prototype, "fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva fillPatternOffsetXChange.konva fillPatternOffsetYChange.konva fillPatternXChange.konva fillPatternYChange.konva fillPatternRotationChange.konva", UC);
+ze.prototype.on.call(ze.prototype, "fillPriorityChange.konva fillLinearGradientColorStopsChange.konva fillLinearGradientStartPointXChange.konva fillLinearGradientStartPointYChange.konva fillLinearGradientEndPointXChange.konva fillLinearGradientEndPointYChange.konva", GC);
+ze.prototype.on.call(ze.prototype, "fillPriorityChange.konva fillRadialGradientColorStopsChange.konva fillRadialGradientStartPointXChange.konva fillRadialGradientStartPointYChange.konva fillRadialGradientEndPointXChange.konva fillRadialGradientEndPointYChange.konva fillRadialGradientStartRadiusChange.konva fillRadialGradientEndRadiusChange.konva", HC);
 ee.addGetterSetter(ze, "stroke", void 0, $x());
 ee.addGetterSetter(ze, "strokeWidth", 2, Xe());
 ee.addGetterSetter(ze, "fillAfterStrokeEnabled", !1);
@@ -11947,13 +11954,13 @@ ee.backCompat(ze, {
   getDrawHitFunc: "getHitFunc",
   setDrawHitFunc: "setHitFunc"
 });
-const HC = "beforeDraw", XC = "draw", v5 = [
+const XC = "beforeDraw", WC = "draw", v5 = [
   { x: 0, y: 0 },
   { x: -1, y: -1 },
   { x: 1, y: -1 },
   { x: 1, y: 1 },
   { x: -1, y: 1 }
-], WC = v5.length;
+], QC = v5.length;
 let tc = class extends ii {
   constructor(e) {
     super(e), this.canvas = new el(), this.hitCanvas = new Sv({
@@ -12066,7 +12073,7 @@ let tc = class extends ii {
       return null;
     let n = 1, o = !1;
     for (; ; ) {
-      for (let i = 0; i < WC; i++) {
+      for (let i = 0; i < QC; i++) {
         const c = v5[i], d = this._getIntersection({
           x: e.x + c.x * n,
           y: e.y + c.y * n
@@ -12099,9 +12106,9 @@ let tc = class extends ii {
   }
   drawScene(e, n, o) {
     const i = this.getLayer(), c = e || i && i.getCanvas();
-    return this._fire(HC, {
+    return this._fire(XC, {
       node: this
-    }), this.clearBeforeDraw() && c.getContext().clear(), ii.prototype.drawScene.call(this, c, n, o), this._fire(XC, {
+    }), this.clearBeforeDraw() && c.getContext().clear(), ii.prototype.drawScene.call(this, c, n, o), this._fire(WC, {
       node: this
     }), this;
   }
@@ -12235,15 +12242,15 @@ class _i {
 _i.animations = [];
 _i.animIdCounter = 0;
 _i.animRunning = !1;
-const QC = {
+const YC = {
   node: 1,
   duration: 1,
   easing: 1,
   onFinish: 1,
   yoyo: 1
-}, YC = 1, q2 = 2, K2 = 3, J2 = ["fill", "stroke", "shadowColor"];
-let VC = 0;
-class jC {
+}, VC = 1, q2 = 2, K2 = 3, J2 = ["fill", "stroke", "shadowColor"];
+let jC = 0;
+class qC {
   constructor(e, n, o, i, c, d, h) {
     this.prop = e, this.propFunc = n, this.begin = i, this._pos = i, this.duration = d, this._change = 0, this.prevPos = 0, this.yoyo = h, this._time = 0, this._position = 0, this._startTime = 0, this._finish = 0, this.func = o, this._change = c - this.begin, this.pause();
   }
@@ -12286,7 +12293,7 @@ class jC {
     this.state === q2 ? this.setTime(e) : this.state === K2 && this.setTime(this.duration - e);
   }
   pause() {
-    this.state = YC, this.fire("onPause");
+    this.state = VC, this.fire("onPause");
   }
   getTimer() {
     return (/* @__PURE__ */ new Date()).getTime();
@@ -12296,15 +12303,15 @@ class kn {
   constructor(e) {
     const n = this, o = e.node, i = o._id, c = e.easing || jf.Linear, d = !!e.yoyo;
     let h, p;
-    typeof e.duration > "u" ? h = 0.3 : e.duration === 0 ? h = 1e-3 : h = e.duration, this.node = o, this._id = VC++;
+    typeof e.duration > "u" ? h = 0.3 : e.duration === 0 ? h = 1e-3 : h = e.duration, this.node = o, this._id = jC++;
     const u = o.getLayer() || (o instanceof Qe.Stage ? o.getLayers() : null);
     u || fe.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."), this.anim = new _i(function() {
       n.tween.onEnterFrame();
-    }, u), this.tween = new jC(p, function(A) {
+    }, u), this.tween = new qC(p, function(A) {
       n._tweenFunc(A);
     }, c, 0, 1, h * 1e3, d), this._addListeners(), kn.attrs[i] || (kn.attrs[i] = {}), kn.attrs[i][this._id] || (kn.attrs[i][this._id] = {}), kn.tweens[i] || (kn.tweens[i] = {});
     for (p in e)
-      QC[p] === void 0 && this._addAttr(p, e[p]);
+      YC[p] === void 0 && this._addAttr(p, e[p]);
     this.reset(), this.onFinish = e.onFinish, this.onReset = e.onReset, this.onUpdate = e.onUpdate;
   }
   _addAttr(e, n) {
@@ -12534,7 +12541,7 @@ function Z2(t, e) {
   }
   return o;
 }
-function qC(t) {
+function KC(t) {
   const e = [
     [t[0], t[2], t[4], t[6]],
     [t[1], t[3], t[5], t[7]]
@@ -12623,7 +12630,7 @@ let ps = class extends ze {
     ] : this.bezier() ? e = [
       e[0],
       e[1],
-      ...qC(this.points()),
+      ...KC(this.points()),
       e[e.length - 2],
       e[e.length - 1]
     ] : e = this.points();
@@ -12644,8 +12651,8 @@ Xn(ps);
 ee.addGetterSetter(ps, "closed", !1);
 ee.addGetterSetter(ps, "bezier", !1);
 ee.addGetterSetter(ps, "tension", 0, Xe());
-ee.addGetterSetter(ps, "points", [], dC());
-const KC = [
+ee.addGetterSetter(ps, "points", [], fC());
+const JC = [
   [],
   [],
   [
@@ -12993,7 +13000,7 @@ const KC = [
     -0.9951872199970213,
     0.9951872199970213
   ]
-], JC = [
+], ZC = [
   [],
   [],
   [1, 1],
@@ -13338,12 +13345,12 @@ const KC = [
     0.0123412297999872,
     0.0123412297999872
   ]
-], ZC = [[1], [1, 1], [1, 2, 1], [1, 3, 3, 1]], $2 = (t, e, n) => {
+], $C = [[1], [1, 1], [1, 2, 1], [1, 3, 3, 1]], $2 = (t, e, n) => {
   let o, i;
   const d = n / 2;
   o = 0;
   for (let h = 0; h < 20; h++)
-    i = d * KC[20][h] + d, o += JC[20][h] * $C(t, e, i);
+    i = d * JC[20][h] + d, o += ZC[20][h] * e8(t, e, i);
   return d * o;
 }, ex = (t, e, n) => {
   n === void 0 && (n = 1);
@@ -13353,7 +13360,7 @@ const KC = [
   const A = p / (2 * h), y = u / h, x = n + A, S = y - A * A, w = x * x + S > 0 ? Math.sqrt(x * x + S) : 0, E = A * A + S > 0 ? Math.sqrt(A * A + S) : 0, R = A + Math.sqrt(A * A + S) !== 0 ? S * Math.log(Math.abs((x + w) / (A + E))) : 0;
   return Math.sqrt(h) / 2 * (x * w - A * E + R);
 };
-function $C(t, e, n) {
+function e8(t, e, n) {
   const o = ov(1, n, t), i = ov(1, n, e), c = o * o + i * i;
   return Math.sqrt(c);
 }
@@ -13365,7 +13372,7 @@ const ov = (t, e, n) => {
   if (t === 0) {
     c = 0;
     for (let d = 0; d <= o; d++)
-      c += ZC[o][d] * Math.pow(1 - e, o - d) * Math.pow(e, d) * n[d];
+      c += $C[o][d] * Math.pow(1 - e, o - d) * Math.pow(e, d) * n[d];
     return c;
   } else {
     i = new Array(o);
@@ -13944,7 +13951,7 @@ const x5 = [
   "pointerDirection",
   "pointerWidth",
   "pointerHeight"
-], e8 = "Change.konva", t8 = "none", sv = "up", lv = "right", cv = "down", uv = "left", n8 = x5.length;
+], t8 = "Change.konva", n8 = "none", sv = "up", lv = "right", cv = "down", uv = "left", r8 = x5.length;
 class Ev extends qu {
   constructor(e) {
     super(e), this.on("add.konva", function(n) {
@@ -13962,8 +13969,8 @@ class Ev extends qu {
     const i = function() {
       n._sync();
     };
-    for (o = 0; o < n8; o++)
-      e.on(x5[o] + e8, i);
+    for (o = 0; o < r8; o++)
+      e.on(x5[o] + t8, i);
   }
   getWidth() {
     return this.getText().width();
@@ -14020,7 +14027,7 @@ class rc extends ze {
 }
 rc.prototype.className = "Tag";
 Xn(rc);
-ee.addGetterSetter(rc, "pointerDirection", t8);
+ee.addGetterSetter(rc, "pointerDirection", n8);
 ee.addGetterSetter(rc, "pointerWidth", 0, Xe());
 ee.addGetterSetter(rc, "pointerHeight", 0, Xe());
 ee.addGetterSetter(rc, "cornerRadius", 0, GA(4));
@@ -14219,7 +14226,7 @@ function Js(t) {
     return e;
   }, []);
 }
-const zu = "auto", r8 = "center", b5 = "inherit", kf = "justify", a8 = "Change.konva", i8 = "2d", rx = "-", S5 = "left", o8 = "text", s8 = "Text", l8 = "top", c8 = "bottom", ax = "middle", w5 = "normal", u8 = "px ", AA = " ", d8 = "right", ix = "rtl", f8 = "word", h8 = "char", ox = "none", kg = "…", C5 = [
+const zu = "auto", a8 = "center", b5 = "inherit", kf = "justify", i8 = "Change.konva", o8 = "2d", rx = "-", S5 = "left", s8 = "text", l8 = "Text", c8 = "top", u8 = "bottom", ax = "middle", w5 = "normal", d8 = "px ", AA = " ", f8 = "right", ix = "rtl", h8 = "word", p8 = "char", ox = "none", kg = "…", C5 = [
   "direction",
   "fontFamily",
   "fontSize",
@@ -14235,8 +14242,8 @@ const zu = "auto", r8 = "center", b5 = "inherit", kf = "justify", a8 = "Change.k
   "wrap",
   "ellipsis",
   "letterSpacing"
-], p8 = C5.length;
-function A8(t) {
+], A8 = C5.length;
+function m8(t) {
   return t.split(",").map((e) => {
     e = e.trim();
     const n = e.indexOf(" ") >= 0, o = e.indexOf('"') >= 0 || e.indexOf("'") >= 0;
@@ -14245,22 +14252,22 @@ function A8(t) {
 }
 let mA;
 function Ng() {
-  return mA || (mA = fe.createCanvasElement().getContext(i8), mA);
+  return mA || (mA = fe.createCanvasElement().getContext(o8), mA);
 }
-function m8(t) {
+function g8(t) {
   t.fillText(this._partialText, this._partialTextX, this._partialTextY);
 }
-function g8(t) {
+function v8(t) {
   t.setAttr("miterLimit", 2), t.strokeText(this._partialText, this._partialTextX, this._partialTextY);
 }
-function v8(t) {
+function y8(t) {
   return t = t || {}, !t.fillLinearGradientColorStops && !t.fillRadialGradientColorStops && !t.fillPatternImage && (t.fill = t.fill || "black"), t;
 }
 let Pn = class extends ze {
   constructor(e) {
-    super(v8(e)), this._partialTextX = 0, this._partialTextY = 0;
-    for (let n = 0; n < p8; n++)
-      this.on(C5[n] + a8, this._setTextData);
+    super(y8(e)), this._partialTextX = 0, this._partialTextY = 0;
+    for (let n = 0; n < A8; n++)
+      this.on(C5[n] + i8, this._setTextData);
     this._setTextData();
   }
   _sceneFunc(e) {
@@ -14277,10 +14284,10 @@ let Pn = class extends ze {
       const Q = (n = j.fontBoundingBoxAscent) !== null && n !== void 0 ? n : j.actualBoundingBoxAscent, V = (o = j.fontBoundingBoxDescent) !== null && o !== void 0 ? o : j.actualBoundingBoxDescent;
       Y = (Q - V) / 2 + p / 2;
     }
-    for (A === ix && e.setAttr("direction", A), e.setAttr("font", this._getContextFont()), e.setAttr("textBaseline", q), e.setAttr("textAlign", S5), u === ax ? y = (this.getHeight() - c * p - d * 2) / 2 : u === c8 && (y = this.getHeight() - c * p - d * 2), e.translate(d, y + d), F = 0; F < c; F++) {
+    for (A === ix && e.setAttr("direction", A), e.setAttr("font", this._getContextFont()), e.setAttr("textBaseline", q), e.setAttr("textAlign", S5), u === ax ? y = (this.getHeight() - c * p - d * 2) / 2 : u === u8 && (y = this.getHeight() - c * p - d * 2), e.translate(d, y + d), F = 0; F < c; F++) {
       let j = 0, Q = 0;
       const V = i[F], me = V.text, X = V.width, ie = V.lastInParagraph;
-      if (e.save(), x === d8 ? j += S - X - d * 2 : x === r8 && (j += (S - X - d * 2) / 2), B) {
+      if (e.save(), x === f8 ? j += S - X - d * 2 : x === a8 && (j += (S - X - d * 2) / 2), B) {
         e.save(), e.beginPath();
         const te = M ?? (Qe.legacyTextRendering ? Math.round(h / 2) : Math.round(h / 4)), oe = j, he = Y + Q + te;
         e.moveTo(oe, he);
@@ -14331,7 +14338,7 @@ let Pn = class extends ze {
   }
   setText(e) {
     const n = fe._isString(e) ? e : e == null ? "" : e + "";
-    return this._setAttr(o8, n), this;
+    return this._setAttr(s8, n), this;
   }
   getWidth() {
     return this.attrs.width === zu || this.attrs.width === void 0 ? this.getTextWidth() + this.padding() * 2 : this.attrs.width;
@@ -14367,7 +14374,7 @@ let Pn = class extends ze {
     };
   }
   _getContextFont() {
-    return this.fontStyle() + AA + this.fontVariant() + AA + (this.fontSize() + u8) + A8(this.fontFamily());
+    return this.fontStyle() + AA + this.fontVariant() + AA + (this.fontSize() + d8) + m8(this.fontFamily());
   }
   _addTextLine(e) {
     this.align() === kf && (e = e.trim());
@@ -14384,7 +14391,7 @@ let Pn = class extends ze {
   }
   _setTextData() {
     let e = this.text().split(`
-`), n = +this.fontSize(), o = 0, i = this.lineHeight() * n, c = this.attrs.width, d = this.attrs.height, h = c !== zu && c !== void 0, p = d !== zu && d !== void 0, u = this.padding(), A = c - u * 2, y = d - u * 2, x = 0, S = this.wrap(), w = S !== ox, E = S !== h8 && w, R = this.ellipsis();
+`), n = +this.fontSize(), o = 0, i = this.lineHeight() * n, c = this.attrs.width, d = this.attrs.height, h = c !== zu && c !== void 0, p = d !== zu && d !== void 0, u = this.padding(), A = c - u * 2, y = d - u * 2, x = 0, S = this.wrap(), w = S !== ox, E = S !== p8 && w, R = this.ellipsis();
     this.textArr = [], Ng().font = this._getContextFont();
     const T = R ? this._getTextWidth(kg) : 0;
     for (let M = 0, B = e.length; M < B; ++M) {
@@ -14442,9 +14449,9 @@ let Pn = class extends ze {
     return e && n ? !0 : super._useBufferCanvas();
   }
 };
-Pn.prototype._fillFunc = m8;
-Pn.prototype._strokeFunc = g8;
-Pn.prototype.className = s8;
+Pn.prototype._fillFunc = g8;
+Pn.prototype._strokeFunc = v8;
+Pn.prototype.className = l8;
 Pn.prototype._attrsAffectingSize = [
   "text",
   "fontSize",
@@ -14463,16 +14470,16 @@ ee.addGetterSetter(Pn, "fontStyle", w5);
 ee.addGetterSetter(Pn, "fontVariant", w5);
 ee.addGetterSetter(Pn, "padding", 0, Xe());
 ee.addGetterSetter(Pn, "align", S5);
-ee.addGetterSetter(Pn, "verticalAlign", l8);
+ee.addGetterSetter(Pn, "verticalAlign", c8);
 ee.addGetterSetter(Pn, "lineHeight", 1, Xe());
-ee.addGetterSetter(Pn, "wrap", f8);
+ee.addGetterSetter(Pn, "wrap", h8);
 ee.addGetterSetter(Pn, "ellipsis", !1, qi());
 ee.addGetterSetter(Pn, "letterSpacing", 0, Xe());
 ee.addGetterSetter(Pn, "text", "", ec());
 ee.addGetterSetter(Pn, "textDecoration", "");
 ee.addGetterSetter(Pn, "underlineOffset", void 0, Xe());
 ee.addGetterSetter(Pn, "charRenderFunc", void 0);
-const y8 = "", _5 = "normal";
+const x8 = "", _5 = "normal";
 function E5(t) {
   t.fillText(this.partialText, 0, 0);
 }
@@ -14642,10 +14649,10 @@ ee.addGetterSetter(_r, "align", "left");
 ee.addGetterSetter(_r, "letterSpacing", 0, Xe());
 ee.addGetterSetter(_r, "textBaseline", "middle");
 ee.addGetterSetter(_r, "fontVariant", _5);
-ee.addGetterSetter(_r, "text", y8);
+ee.addGetterSetter(_r, "text", x8);
 ee.addGetterSetter(_r, "textDecoration", "");
 ee.addGetterSetter(_r, "kerningFunc", void 0);
-const T5 = "tr-konva", x8 = [
+const T5 = "tr-konva", b8 = [
   "resizeEnabledChange",
   "rotateAnchorOffsetChange",
   "rotateAnchorAngleChange",
@@ -14662,7 +14669,7 @@ const T5 = "tr-konva", x8 = [
   "anchorCornerRadiusChange",
   "ignoreStrokeChange",
   "anchorStyleFuncChange"
-].map((t) => t + `.${T5}`).join(" "), sx = "nodesRect", b8 = [
+].map((t) => t + `.${T5}`).join(" "), sx = "nodesRect", S8 = [
   "widthChange",
   "heightChange",
   "scaleXChange",
@@ -14675,7 +14682,7 @@ const T5 = "tr-konva", x8 = [
   "transformsEnabledChange",
   "strokeWidthChange",
   "draggableChange"
-], S8 = {
+], w8 = {
   "top-left": -45,
   "top-center": 0,
   "top-right": 45,
@@ -14684,11 +14691,11 @@ const T5 = "tr-konva", x8 = [
   "bottom-left": -135,
   "bottom-center": 180,
   "bottom-right": 135
-}, w8 = "ontouchstart" in Qe._global;
-function C8(t, e, n) {
+}, C8 = "ontouchstart" in Qe._global;
+function _8(t, e, n) {
   if (t === "rotater")
     return n;
-  e += fe.degToRad(S8[t] || 0);
+  e += fe.degToRad(w8[t] || 0);
   const o = (fe.radToDeg(e) % 360 + 360) % 360;
   return fe._inRange(o, 315 + 22.5, 360) || fe._inRange(o, 0, 22.5) ? "ns-resize" : fe._inRange(o, 45 - 22.5, 45 + 22.5) ? "nesw-resize" : fe._inRange(o, 90 - 22.5, 90 + 22.5) ? "ew-resize" : fe._inRange(o, 135 - 22.5, 135 + 22.5) ? "nwse-resize" : fe._inRange(o, 180 - 22.5, 180 + 22.5) ? "ns-resize" : fe._inRange(o, 225 - 22.5, 225 + 22.5) ? "nesw-resize" : fe._inRange(o, 270 - 22.5, 270 + 22.5) ? "ew-resize" : fe._inRange(o, 315 - 22.5, 315 + 22.5) ? "nwse-resize" : (fe.error("Transformer has unknown angle for cursor detection: " + o), "pointer");
 }
@@ -14702,7 +14709,7 @@ const MA = [
   "bottom-center",
   "bottom-right"
 ];
-function _8(t) {
+function E8(t) {
   return {
     x: t.x + t.width / 2 * Math.cos(t.rotation) + t.height / 2 * Math.sin(-t.rotation),
     y: t.y + t.height / 2 * Math.cos(t.rotation) + t.width / 2 * Math.sin(t.rotation)
@@ -14717,11 +14724,11 @@ function D5(t, e, n) {
     y: i
   };
 }
-function E8(t, e) {
-  const n = _8(t);
+function R8(t, e) {
+  const n = E8(t);
   return D5(t, e, n);
 }
-function R8(t, e, n) {
+function T8(t, e, n) {
   let o = e;
   for (let i = 0; i < t.length; i++) {
     const c = Qe.getAngle(t[i]), d = Math.abs(c - e) % (Math.PI * 2);
@@ -14731,7 +14738,7 @@ function R8(t, e, n) {
 }
 let dv = 0, en = class extends qu {
   constructor(e) {
-    super(e), this._movingAnchorName = null, this._transforming = !1, this._createElements(), this._handleMouseMove = this._handleMouseMove.bind(this), this._handleMouseUp = this._handleMouseUp.bind(this), this.update = this.update.bind(this), this.on(x8, this.update), this.getNode() && this.update();
+    super(e), this._movingAnchorName = null, this._transforming = !1, this._createElements(), this._handleMouseMove = this._handleMouseMove.bind(this), this._handleMouseUp = this._handleMouseUp.bind(this), this.update = this.update.bind(this), this.on(b8, this.update), this.getNode() && this.update();
   }
   attachTo(e) {
     return this.setNode(e), this;
@@ -14756,7 +14763,7 @@ let dv = 0, en = class extends qu {
         const d = i._attrsAffectingSize.map((h) => h + "Change." + this._getEventNamespace()).join(" ");
         i.on(d, c);
       }
-      i.on(b8.map((d) => d + `.${this._getEventNamespace()}`).join(" "), c), i.on(`absoluteTransformChange.${this._getEventNamespace()}`, c), this._proxyDrag(i);
+      i.on(S8.map((d) => d + `.${this._getEventNamespace()}`).join(" "), c), i.on(`absoluteTransformChange.${this._getEventNamespace()}`, c), this._proxyDrag(i);
     }), this._resetTransformCache(), !!this.findOne(".top-left") && this.update(), this;
   }
   _proxyDrag(e) {
@@ -14879,7 +14886,7 @@ let dv = 0, en = class extends qu {
       name: e + " _anchor",
       dragDistance: 0,
       draggable: !0,
-      hitStrokeWidth: w8 ? 10 : "auto"
+      hitStrokeWidth: C8 ? 10 : "auto"
     }), o = this;
     n.on("mousedown touchstart", function(i) {
       o._handleMouseDown(i);
@@ -14888,7 +14895,7 @@ let dv = 0, en = class extends qu {
     }), n.on("dragend", (i) => {
       i.cancelBubble = !0;
     }), n.on("mouseenter", () => {
-      const i = Qe.getAngle(this.rotation()), c = this.rotateAnchorCursor(), d = C8(e, i, c);
+      const i = Qe.getAngle(this.rotation()), c = this.rotateAnchorCursor(), d = _8(e, i, c);
       n.getStage().content && (n.getStage().content.style.cursor = d), this._cursorChange = !0;
     }), n.on("mouseout", () => {
       n.getStage().content && (n.getStage().content.style.cursor = ""), this._cursorChange = !1;
@@ -14961,7 +14968,7 @@ let dv = 0, en = class extends qu {
       const B = Qe.getAngle(this.rotateAnchorAngle());
       let I = Math.atan2(-o, n) + Math.PI / 2 - B;
       M.height < 0 && (I -= Math.PI);
-      const Y = Qe.getAngle(this.rotation()) + I, q = Qe.getAngle(this.rotationSnapTolerance()), Q = R8(this.rotationSnaps(), Y, q) - M.rotation, V = E8(M, Q);
+      const Y = Qe.getAngle(this.rotation()) + I, q = Qe.getAngle(this.rotationSnapTolerance()), Q = T8(this.rotationSnaps(), Y, q) - M.rotation, V = R8(M, Q);
       this._fitNodesInto(V, e);
       return;
     }
@@ -15247,14 +15254,14 @@ let dv = 0, en = class extends qu {
   }
 };
 en.isTransforming = () => dv > 0;
-function T8(t) {
+function D8(t) {
   return t instanceof Array || fe.warn("enabledAnchors value should be an array"), t instanceof Array && t.forEach(function(e) {
     MA.indexOf(e) === -1 && fe.warn("Unknown anchor name: " + e + ". Available names are: " + MA.join(", "));
   }), t || [];
 }
 en.prototype.className = "Transformer";
 Xn(en);
-ee.addGetterSetter(en, "enabledAnchors", MA, T8);
+ee.addGetterSetter(en, "enabledAnchors", MA, D8);
 ee.addGetterSetter(en, "flipEnabled", !0, qi());
 ee.addGetterSetter(en, "resizeEnabled", !0);
 ee.addGetterSetter(en, "anchorSize", 10, Xe());
@@ -15322,7 +15329,7 @@ ee.backCompat(As, {
 function lx() {
   this.r = 0, this.g = 0, this.b = 0, this.a = 0, this.next = null;
 }
-const D8 = [
+const L8 = [
   512,
   512,
   456,
@@ -15578,7 +15585,7 @@ const D8 = [
   263,
   261,
   259
-], L8 = [
+], k8 = [
   9,
   11,
   12,
@@ -15835,10 +15842,10 @@ const D8 = [
   24,
   24
 ];
-function k8(t, e) {
+function N8(t, e) {
   const n = t.data, o = t.width, i = t.height;
   let c, d, h, p, u, A, y, x, S, w, E, R, T, M, B, I, F, Y, q, j;
-  const Q = e + e + 1, V = o - 1, me = i - 1, X = e + 1, ie = X * (X + 1) / 2, D = new lx(), te = D8[e], oe = L8[e];
+  const Q = e + e + 1, V = o - 1, me = i - 1, X = e + 1, ie = X * (X + 1) / 2, D = new lx(), te = L8[e], oe = k8[e];
   let he = null, K = D, re = null, ne = null;
   for (let O = 1; O < Q; O++)
     K = K.next = new lx(), O === X && (he = K);
@@ -15866,29 +15873,29 @@ function k8(t, e) {
       c = d << 2, n[c + 3] = q = y * te >> oe, q > 0 ? (q = 255 / q, n[c] = (p * te >> oe) * q, n[c + 1] = (u * te >> oe) * q, n[c + 2] = (A * te >> oe) * q) : n[c] = n[c + 1] = n[c + 2] = 0, p -= x, u -= S, A -= w, y -= E, x -= re.r, S -= re.g, w -= re.b, E -= re.a, c = O + ((c = _e + X) < me ? c : me) * o << 2, p += R += re.r = n[c], u += T += re.g = n[c + 1], A += M += re.b = n[c + 2], y += B += re.a = n[c + 3], re = re.next, x += I = ne.r, S += F = ne.g, w += Y = ne.b, E += q = ne.a, R -= I, T -= F, M -= Y, B -= q, ne = ne.next, d += o;
   }
 }
-const N8 = function(e) {
+const P8 = function(e) {
   const n = Math.round(this.blurRadius());
-  n > 0 && k8(e, n);
+  n > 0 && N8(e, n);
 };
 ee.addGetterSetter(Ge, "blurRadius", 0, Xe(), ee.afterSetFilter);
-const P8 = function(t) {
+const M8 = function(t) {
   const e = this.brightness() * 255, n = t.data, o = n.length;
   for (let i = 0; i < o; i += 4)
     n[i] += e, n[i + 1] += e, n[i + 2] += e;
 };
 ee.addGetterSetter(Ge, "brightness", 0, Xe(), ee.afterSetFilter);
-const M8 = function(t) {
+const B8 = function(t) {
   const e = this.brightness(), n = t.data, o = n.length;
   for (let i = 0; i < o; i += 4)
     n[i] = Math.min(255, n[i] * e), n[i + 1] = Math.min(255, n[i + 1] * e), n[i + 2] = Math.min(255, n[i + 2] * e);
-}, B8 = function(t) {
+}, z8 = function(t) {
   const e = Math.pow((this.contrast() + 100) / 100, 2), n = t.data, o = n.length;
   let i = 150, c = 150, d = 150;
   for (let h = 0; h < o; h += 4)
     i = n[h], c = n[h + 1], d = n[h + 2], i /= 255, i -= 0.5, i *= e, i += 0.5, i *= 255, c /= 255, c -= 0.5, c *= e, c += 0.5, c *= 255, d /= 255, d -= 0.5, d *= e, d += 0.5, d *= 255, i = i < 0 ? 0 : i > 255 ? 255 : i, c = c < 0 ? 0 : c > 255 ? 255 : c, d = d < 0 ? 0 : d > 255 ? 255 : d, n[h] = i, n[h + 1] = c, n[h + 2] = d;
 };
 ee.addGetterSetter(Ge, "contrast", 0, Xe(), ee.afterSetFilter);
-const z8 = function(t) {
+const F8 = function(t) {
   var e, n, o, i, c, d, h, p, u;
   const A = t.data, y = t.width, x = t.height, S = Math.min(1, Math.max(0, (n = (e = this.embossStrength) === null || e === void 0 ? void 0 : e.call(this)) !== null && n !== void 0 ? n : 0.5)), w = Math.min(1, Math.max(0, (i = (o = this.embossWhiteLevel) === null || o === void 0 ? void 0 : o.call(this)) !== null && i !== void 0 ? i : 0.5)), R = (h = {
     "top-left": 315,
@@ -15938,7 +15945,7 @@ function Pg(t, e, n, o, i) {
   let h = (t - e) / c;
   return h = d * h + o, h;
 }
-const F8 = function(t) {
+const I8 = function(t) {
   const e = t.data, n = e.length;
   let o = e[0], i = o, c, d = e[1], h = d, p, u = e[2], A = u, y;
   const x = this.enhance();
@@ -15962,7 +15969,7 @@ const F8 = function(t) {
     e[B + 0] = Pg(e[B + 0], o, i, w, S), e[B + 1] = Pg(e[B + 1], d, h, R, E), e[B + 2] = Pg(e[B + 2], u, A, M, T);
 };
 ee.addGetterSetter(Ge, "enhance", 0, Xe(), ee.afterSetFilter);
-const I8 = function(t) {
+const O8 = function(t) {
   const e = t.data, n = e.length;
   for (let o = 0; o < n; o += 4) {
     const i = 0.34 * e[o] + 0.5 * e[o + 1] + 0.16 * e[o + 2];
@@ -15972,12 +15979,12 @@ const I8 = function(t) {
 ee.addGetterSetter(Ge, "hue", 0, Xe(), ee.afterSetFilter);
 ee.addGetterSetter(Ge, "saturation", 0, Xe(), ee.afterSetFilter);
 ee.addGetterSetter(Ge, "luminance", 0, Xe(), ee.afterSetFilter);
-const O8 = function(t) {
+const U8 = function(t) {
   const e = t.data, n = e.length, o = 1, i = Math.pow(2, this.saturation()), c = Math.abs(this.hue() + 360) % 360, d = this.luminance() * 127, h = o * i * Math.cos(c * Math.PI / 180), p = o * i * Math.sin(c * Math.PI / 180), u = 0.299 * o + 0.701 * h + 0.167 * p, A = 0.587 * o - 0.587 * h + 0.33 * p, y = 0.114 * o - 0.114 * h - 0.497 * p, x = 0.299 * o - 0.299 * h - 0.328 * p, S = 0.587 * o + 0.413 * h + 0.035 * p, w = 0.114 * o - 0.114 * h + 0.293 * p, E = 0.299 * o - 0.3 * h + 1.25 * p, R = 0.587 * o - 0.586 * h - 1.05 * p, T = 0.114 * o + 0.886 * h - 0.2 * p;
   let M, B, I, F;
   for (let Y = 0; Y < n; Y += 4)
     M = e[Y + 0], B = e[Y + 1], I = e[Y + 2], F = e[Y + 3], e[Y + 0] = u * M + A * B + y * I + d, e[Y + 1] = x * M + S * B + w * I + d, e[Y + 2] = E * M + R * B + T * I + d, e[Y + 3] = F;
-}, U8 = function(t) {
+}, G8 = function(t) {
   const e = t.data, n = e.length, o = Math.pow(2, this.value()), i = Math.pow(2, this.saturation()), c = Math.abs(this.hue() + 360) % 360, d = o * i * Math.cos(c * Math.PI / 180), h = o * i * Math.sin(c * Math.PI / 180), p = 0.299 * o + 0.701 * d + 0.167 * h, u = 0.587 * o - 0.587 * d + 0.33 * h, A = 0.114 * o - 0.114 * d - 0.497 * h, y = 0.299 * o - 0.299 * d - 0.328 * h, x = 0.587 * o + 0.413 * d + 0.035 * h, S = 0.114 * o - 0.114 * d + 0.293 * h, w = 0.299 * o - 0.3 * d + 1.25 * h, E = 0.587 * o - 0.586 * d - 1.05 * h, R = 0.114 * o + 0.886 * d - 0.2 * h;
   for (let T = 0; T < n; T += 4) {
     const M = e[T + 0], B = e[T + 1], I = e[T + 2], F = e[T + 3];
@@ -15987,11 +15994,11 @@ const O8 = function(t) {
 ee.addGetterSetter(Ge, "hue", 0, Xe(), ee.afterSetFilter);
 ee.addGetterSetter(Ge, "saturation", 0, Xe(), ee.afterSetFilter);
 ee.addGetterSetter(Ge, "value", 0, Xe(), ee.afterSetFilter);
-const G8 = function(t) {
+const H8 = function(t) {
   const e = t.data, n = e.length;
   for (let o = 0; o < n; o += 4)
     e[o] = 255 - e[o], e[o + 1] = 255 - e[o + 1], e[o + 2] = 255 - e[o + 2];
-}, H8 = function(t, e, n) {
+}, X8 = function(t, e, n) {
   const o = t.data, i = e.data, c = t.width, d = t.height, h = n.polarCenterX || c / 2, p = n.polarCenterY || d / 2;
   let u = Math.sqrt(h * h + p * p), A = c - h, y = d - p;
   const x = Math.sqrt(A * A + y * y);
@@ -16006,7 +16013,7 @@ const G8 = function(t) {
       I = (R + B * c) * 4, i[I + 0] = F, i[I + 1] = Y, i[I + 2] = q, i[I + 3] = j;
     }
   }
-}, X8 = function(t, e, n) {
+}, W8 = function(t, e, n) {
   const o = t.data, i = e.data, c = t.width, d = t.height, h = n.polarCenterX || c / 2, p = n.polarCenterY || d / 2;
   let u = Math.sqrt(h * h + p * p), A = c - h, y = d - p;
   const x = Math.sqrt(A * A + y * y);
@@ -16022,7 +16029,7 @@ const G8 = function(t) {
       const q = o[Y + 0], j = o[Y + 1], Q = o[Y + 2], V = o[Y + 3];
       Y = (y * c + A) * 4, i[Y + 0] = q, i[Y + 1] = j, i[Y + 2] = Q, i[Y + 3] = V;
     }
-}, W8 = function(t) {
+}, Q8 = function(t) {
   const e = t.width, n = t.height;
   let o, i, c, d, h, p, u, A, y, x, S = Math.round(this.kaleidoscopePower());
   const w = Math.round(this.kaleidoscopeAngle()), E = Math.floor(e * (w % 360) / 360);
@@ -16031,7 +16038,7 @@ const G8 = function(t) {
   const R = fe.createCanvasElement();
   R.width = e, R.height = n;
   const T = R.getContext("2d").getImageData(0, 0, e, n);
-  fe.releaseCanvas(R), H8(t, T, {
+  fe.releaseCanvas(R), X8(t, T, {
     polarCenterX: e / 2,
     polarCenterY: n / 2
   });
@@ -16049,7 +16056,7 @@ const G8 = function(t) {
         y = (e * i + o) * 4, h = T.data[y + 0], p = T.data[y + 1], u = T.data[y + 2], A = T.data[y + 3], x = (e * i + B * 2 - o - 1) * 4, T.data[x + 0] = h, T.data[x + 1] = p, T.data[x + 2] = u, T.data[x + 3] = A;
       B *= 2;
     }
-  X8(T, t, {});
+  W8(T, t, {});
 };
 ee.addGetterSetter(Ge, "kaleidoscopePower", 2, Xe(), ee.afterSetFilter);
 ee.addGetterSetter(Ge, "kaleidoscopeAngle", 0, Xe(), ee.afterSetFilter);
@@ -16061,16 +16068,16 @@ function gA(t, e, n) {
 function Nf(t, e) {
   return Math.sqrt(Math.pow(t[0] - e[0], 2) + Math.pow(t[1] - e[1], 2) + Math.pow(t[2] - e[2], 2));
 }
-function Q8(t) {
+function Y8(t) {
   const e = [0, 0, 0];
   for (let n = 0; n < t.length; n++)
     e[0] += t[n][0], e[1] += t[n][1], e[2] += t[n][2];
   return e[0] /= t.length, e[1] /= t.length, e[2] /= t.length, e;
 }
-function Y8(t, e) {
+function V8(t, e) {
   const n = gA(t, 0, 0), o = gA(t, t.width - 1, 0), i = gA(t, 0, t.height - 1), c = gA(t, t.width - 1, t.height - 1), d = e || 10;
   if (Nf(n, o) < d && Nf(o, c) < d && Nf(c, i) < d && Nf(i, n) < d) {
-    const h = Q8([o, n, c, i]), p = [];
+    const h = Y8([o, n, c, i]), p = [];
     for (let u = 0; u < t.width * t.height; u++) {
       const A = Nf(h, [
         t.data[u * 4],
@@ -16082,11 +16089,11 @@ function Y8(t, e) {
     return p;
   }
 }
-function V8(t, e) {
+function j8(t, e) {
   for (let n = 0; n < t.width * t.height; n++)
     t.data[4 * n + 3] = e[n];
 }
-function j8(t, e, n) {
+function q8(t, e, n) {
   const o = [1, 1, 1, 1, 0, 1, 1, 1, 1], i = Math.round(Math.sqrt(o.length)), c = Math.floor(i / 2), d = [];
   for (let h = 0; h < n; h++)
     for (let p = 0; p < e; p++) {
@@ -16104,7 +16111,7 @@ function j8(t, e, n) {
     }
   return d;
 }
-function q8(t, e, n) {
+function K8(t, e, n) {
   const o = [1, 1, 1, 1, 1, 1, 1, 1, 1], i = Math.round(Math.sqrt(o.length)), c = Math.floor(i / 2), d = [];
   for (let h = 0; h < n; h++)
     for (let p = 0; p < e; p++) {
@@ -16122,7 +16129,7 @@ function q8(t, e, n) {
     }
   return d;
 }
-function K8(t, e, n) {
+function J8(t, e, n) {
   const o = [
     0.1111111111111111,
     0.1111111111111111,
@@ -16150,19 +16157,19 @@ function K8(t, e, n) {
     }
   return d;
 }
-const J8 = function(t) {
+const Z8 = function(t) {
   const e = this.threshold();
-  let n = Y8(t, e);
-  return n && (n = j8(n, t.width, t.height), n = q8(n, t.width, t.height), n = K8(n, t.width, t.height), V8(t, n)), t;
+  let n = V8(t, e);
+  return n && (n = q8(n, t.width, t.height), n = K8(n, t.width, t.height), n = J8(n, t.width, t.height), j8(t, n)), t;
 };
 ee.addGetterSetter(Ge, "threshold", 0, Xe(), ee.afterSetFilter);
-const Z8 = function(t) {
+const $8 = function(t) {
   const e = this.noise() * 255, n = t.data, o = n.length, i = e / 2;
   for (let c = 0; c < o; c += 4)
     n[c + 0] += i - 2 * i * Math.random(), n[c + 1] += i - 2 * i * Math.random(), n[c + 2] += i - 2 * i * Math.random();
 };
 ee.addGetterSetter(Ge, "noise", 0.2, Xe(), ee.afterSetFilter);
-const $8 = function(t) {
+const e9 = function(t) {
   let e = Math.ceil(this.pixelSize()), n = t.width, o = t.height, i = Math.ceil(n / e), c = Math.ceil(o / e), d = t.data;
   if (e <= 0) {
     fe.error("pixelSize value can not be <= 0");
@@ -16193,13 +16200,13 @@ const $8 = function(t) {
     }
 };
 ee.addGetterSetter(Ge, "pixelSize", 8, Xe(), ee.afterSetFilter);
-const e9 = function(t) {
+const t9 = function(t) {
   const e = Math.round(this.levels() * 254) + 1, n = t.data, o = n.length, i = 255 / e;
   for (let c = 0; c < o; c += 1)
     n[c] = Math.floor(n[c] / i) * i;
 };
 ee.addGetterSetter(Ge, "levels", 0.5, Xe(), ee.afterSetFilter);
-const t9 = function(t) {
+const n9 = function(t) {
   const e = t.data, n = e.length, o = this.red(), i = this.green(), c = this.blue();
   for (let d = 0; d < n; d += 4) {
     const h = (0.34 * e[d] + 0.5 * e[d + 1] + 0.16 * e[d + 2]) / 255;
@@ -16213,7 +16220,7 @@ ee.addGetterSetter(Ge, "green", 0, function(t) {
   return this._filterUpToDate = !1, t > 255 ? 255 : t < 0 ? 0 : Math.round(t);
 });
 ee.addGetterSetter(Ge, "blue", 0, Zx, ee.afterSetFilter);
-const n9 = function(t) {
+const r9 = function(t) {
   const e = t.data, n = e.length, o = this.red(), i = this.green(), c = this.blue(), d = this.alpha();
   for (let h = 0; h < n; h += 4) {
     const p = 1 - d;
@@ -16230,20 +16237,20 @@ ee.addGetterSetter(Ge, "blue", 0, Zx, ee.afterSetFilter);
 ee.addGetterSetter(Ge, "alpha", 1, function(t) {
   return this._filterUpToDate = !1, t > 1 ? 1 : t < 0 ? 0 : t;
 });
-const r9 = function(t) {
+const a9 = function(t) {
   const e = t.data, n = e.length;
   for (let o = 0; o < n; o += 4) {
     const i = e[o + 0], c = e[o + 1], d = e[o + 2];
     e[o + 0] = Math.min(255, i * 0.393 + c * 0.769 + d * 0.189), e[o + 1] = Math.min(255, i * 0.349 + c * 0.686 + d * 0.168), e[o + 2] = Math.min(255, i * 0.272 + c * 0.534 + d * 0.131);
   }
-}, a9 = function(t) {
+}, i9 = function(t) {
   const n = t.data;
   for (let o = 0; o < n.length; o += 4) {
     const i = n[o], c = n[o + 1], d = n[o + 2];
     0.2126 * i + 0.7152 * c + 0.0722 * d >= 128 && (n[o] = 255 - i, n[o + 1] = 255 - c, n[o + 2] = 255 - d);
   }
   return t;
-}, i9 = function(t) {
+}, o9 = function(t) {
   const e = this.threshold() * 255, n = t.data, o = n.length;
   for (let i = 0; i < o; i += 1)
     n[i] = n[i] < e ? 0 : 255;
@@ -16269,26 +16276,26 @@ Zl.Util._assign(Zl, {
   Transformer: en,
   Wedge: As,
   Filters: {
-    Blur: N8,
-    Brightness: M8,
-    Brighten: P8,
-    Contrast: B8,
-    Emboss: z8,
-    Enhance: F8,
-    Grayscale: I8,
-    HSL: O8,
-    HSV: U8,
-    Invert: G8,
-    Kaleidoscope: W8,
-    Mask: J8,
-    Noise: Z8,
-    Pixelate: $8,
-    Posterize: e9,
-    RGB: t9,
-    RGBA: n9,
-    Sepia: r9,
-    Solarize: a9,
-    Threshold: i9
+    Blur: P8,
+    Brightness: B8,
+    Brighten: M8,
+    Contrast: z8,
+    Emboss: F8,
+    Enhance: I8,
+    Grayscale: O8,
+    HSL: U8,
+    HSV: G8,
+    Invert: H8,
+    Kaleidoscope: Q8,
+    Mask: Z8,
+    Noise: $8,
+    Pixelate: e9,
+    Posterize: t9,
+    RGB: n9,
+    RGBA: r9,
+    Sepia: a9,
+    Solarize: i9,
+    Threshold: o9
   }
 });
 var vA = { exports: {} }, yA = { exports: {} }, Mg = {};
@@ -16302,7 +16309,7 @@ var vA = { exports: {} }, yA = { exports: {} }, Mg = {};
  * LICENSE file in the root directory of this source tree.
  */
 var cx;
-function o9() {
+function s9() {
   return cx || (cx = 1, (function(t) {
     function e(K, re) {
       var ne = K.length;
@@ -16512,7 +16519,7 @@ var Bg = {};
  * LICENSE file in the root directory of this source tree.
  */
 var ux;
-function s9() {
+function l9() {
   return ux || (ux = 1, (function(t) {
     process.env.NODE_ENV !== "production" && (function() {
       typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
@@ -16777,7 +16784,7 @@ function s9() {
 }
 var dx;
 function Rv() {
-  return dx || (dx = 1, process.env.NODE_ENV === "production" ? yA.exports = o9() : yA.exports = s9()), yA.exports;
+  return dx || (dx = 1, process.env.NODE_ENV === "production" ? yA.exports = s9() : yA.exports = l9()), yA.exports;
 }
 /**
  * @license React
@@ -16789,7 +16796,7 @@ function Rv() {
  * LICENSE file in the root directory of this source tree.
  */
 var zg, fx;
-function l9() {
+function c9() {
   return fx || (fx = 1, zg = function(e) {
     var n = {}, o = Dt, i = Rv(), c = Object.assign;
     function d(s) {
@@ -20549,7 +20556,7 @@ var Fg = { exports: {} };
  * LICENSE file in the root directory of this source tree.
  */
 var hx;
-function c9() {
+function u9() {
   return hx || (hx = 1, process.env.NODE_ENV !== "production" && (Fg.exports = function(e) {
     var n = {}, o = Dt, i = Rv(), c = o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, d = !1;
     function h(r) {
@@ -23772,10 +23779,10 @@ Incoming: %s`, De, "[" + a.join(", ") + "]", "[" + r.join(", ") + "]");
       }
       return [z, C];
     }
-    function H7(r, a, f) {
-    }
     function X7(r, a, f) {
     }
+    function W7(r, a, f) {
+    }
     function U0(r, a, f) {
       var m = An, v = mo(), C, N = l();
       if (N) {
@@ -29737,11 +29744,11 @@ Check the render method of %s.`, it(Ke) || "Unknown"));
   })), Fg.exports;
 }
 var px;
-function u9() {
-  return px || (px = 1, process.env.NODE_ENV === "production" ? vA.exports = l9() : vA.exports = c9()), vA.exports;
+function d9() {
+  return px || (px = 1, process.env.NODE_ENV === "production" ? vA.exports = c9() : vA.exports = u9()), vA.exports;
 }
-var d9 = u9();
-const f9 = /* @__PURE__ */ zA(d9);
+var f9 = d9();
+const h9 = /* @__PURE__ */ zA(f9);
 var xA = { exports: {} }, js = {};
 /**
  * @license React
@@ -29753,7 +29760,7 @@ var xA = { exports: {} }, js = {};
  * LICENSE file in the root directory of this source tree.
  */
 var Ax;
-function h9() {
+function p9() {
   return Ax || (Ax = 1, js.ConcurrentRoot = 1, js.ContinuousEventPriority = 4, js.DefaultEventPriority = 16, js.DiscreteEventPriority = 1, js.IdleEventPriority = 536870912, js.LegacyRoot = 0), js;
 }
 var qs = {};
@@ -29767,7 +29774,7 @@ var qs = {};
  * LICENSE file in the root directory of this source tree.
  */
 var mx;
-function p9() {
+function A9() {
   return mx || (mx = 1, process.env.NODE_ENV !== "production" && (function() {
     var t = (
       /*                        */
@@ -29786,10 +29793,10 @@ function p9() {
   })()), qs;
 }
 var gx;
-function A9() {
-  return gx || (gx = 1, process.env.NODE_ENV === "production" ? xA.exports = h9() : xA.exports = p9()), xA.exports;
+function m9() {
+  return gx || (gx = 1, process.env.NODE_ENV === "production" ? xA.exports = p9() : xA.exports = A9()), xA.exports;
 }
-var L5 = A9();
+var L5 = m9();
 const vx = {
   children: !0,
   ref: !0,
@@ -29800,18 +29807,18 @@ const vx = {
   unstable_applyDrawHitFromCache: !0
 };
 let yx = !1, xx = !1;
-const Tv = ".react-konva-event", m9 = `ReactKonva: You have a Konva node with draggable = true and position defined but no onDragMove or onDragEnd events are handled.
+const Tv = ".react-konva-event", g9 = `ReactKonva: You have a Konva node with draggable = true and position defined but no onDragMove or onDragEnd events are handled.
 Position of a node will be changed during drag&drop, so you should update state of the react app as well.
 Consider to add onDragMove or onDragEnd events.
 For more info see: https://github.com/konvajs/react-konva/issues/256
-`, g9 = `ReactKonva: You are using "zIndex" attribute for a Konva node.
+`, v9 = `ReactKonva: You are using "zIndex" attribute for a Konva node.
 react-konva may get confused with ordering. Just define correct order of elements in your render function of a component.
 For more info see: https://github.com/konvajs/react-konva/issues/194
-`, v9 = {};
-function XA(t, e, n = v9) {
-  if (!yx && "zIndex" in e && (console.warn(g9), yx = !0), !xx && e.draggable) {
+`, y9 = {};
+function XA(t, e, n = y9) {
+  if (!yx && "zIndex" in e && (console.warn(v9), yx = !0), !xx && e.draggable) {
     var o = e.x !== void 0 || e.y !== void 0, i = e.onDragEnd || e.onDragMove;
-    o && !i && (console.warn(m9), xx = !0);
+    o && !i && (console.warn(g9), xx = !0);
   }
   for (var c in n)
     if (!vx[c]) {
@@ -29845,16 +29852,16 @@ function sl(t) {
   }
 }
 var Ig = Rv();
-const k5 = {}, y9 = {};
+const k5 = {}, x9 = {};
 Zl.Node.prototype._applyProps = XA;
-function x9(t, e) {
+function b9(t, e) {
   if (typeof e == "string") {
     console.error(`Do not use plain text as child of Konva.Node. You are using text: ${e}`);
     return;
   }
   t.add(e), sl(t);
 }
-function b9(t, e, n) {
+function S9(t, e, n) {
   let o = Zl[t];
   o || (console.error(`Konva has no node with the type ${t}. Group will be used instead. If you use minimal version of react-konva, just import required nodes into Konva: "import "konva/lib/shapes/${t}"  If you want to render DOM elements as part of canvas tree take a look into this demo: https://konvajs.github.io/docs/react/DOM_Portal.html`), o = Zl.Group);
   const i = {}, c = {};
@@ -29865,132 +29872,132 @@ function b9(t, e, n) {
   const p = new o(i);
   return XA(p, c), p;
 }
-function S9(t, e, n) {
+function w9(t, e, n) {
   console.error(`Text components are not supported for now in ReactKonva. Your text is: "${t}"`);
 }
-function w9(t, e, n) {
+function C9(t, e, n) {
   return !1;
 }
-function C9(t) {
+function _9(t) {
   return t;
 }
-function _9() {
+function E9() {
   return null;
 }
-function E9() {
+function R9() {
   return null;
 }
-function R9(t, e, n, o) {
-  return y9;
+function T9(t, e, n, o) {
+  return x9;
 }
-function T9() {
+function D9() {
 }
-function D9(t) {
+function L9(t) {
 }
-function L9(t, e) {
+function k9(t, e) {
   return !1;
 }
-function k9() {
+function N9() {
   return k5;
 }
-function N9() {
+function P9() {
   return k5;
 }
-const P9 = setTimeout, M9 = clearTimeout, B9 = -1;
-function z9(t, e) {
+const M9 = setTimeout, B9 = clearTimeout, z9 = -1;
+function F9(t, e) {
   return !1;
 }
-const F9 = !1, I9 = !0, O9 = !0;
-function U9(t, e) {
+const I9 = !1, O9 = !0, U9 = !0;
+function G9(t, e) {
   e.parent === t ? e.moveToTop() : t.add(e), sl(t);
 }
-function G9(t, e) {
+function H9(t, e) {
   e.parent === t ? e.moveToTop() : t.add(e), sl(t);
 }
 function N5(t, e, n) {
   e._remove(), t.add(e), e.setZIndex(n.getZIndex()), sl(t);
 }
-function H9(t, e, n) {
+function X9(t, e, n) {
   N5(t, e, n);
 }
-function X9(t, e) {
+function W9(t, e) {
   e.destroy(), e.off(Tv), sl(t);
 }
-function W9(t, e) {
+function Q9(t, e) {
   e.destroy(), e.off(Tv), sl(t);
 }
-function Q9(t, e, n) {
+function Y9(t, e, n) {
   console.error(`Text components are not yet supported in ReactKonva. You text is: "${n}"`);
 }
-function Y9(t, e, n) {
+function V9(t, e, n) {
 }
-function V9(t, e, n, o, i) {
+function j9(t, e, n, o, i) {
   XA(t, i, o);
 }
-function j9(t) {
+function q9(t) {
   t.hide(), sl(t);
 }
-function q9(t) {
+function K9(t) {
 }
-function K9(t, e) {
+function J9(t, e) {
   (e.visible == null || e.visible) && t.show();
 }
-function J9(t, e) {
+function Z9(t, e) {
 }
-function Z9(t) {
+function $9(t) {
 }
-function $9() {
+function e7() {
 }
-const e7 = () => L5.DefaultEventPriority, t7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const t7 = () => L5.DefaultEventPriority, n7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  appendChild: U9,
-  appendChildToContainer: G9,
-  appendInitialChild: x9,
-  cancelTimeout: M9,
-  clearContainer: Z9,
-  commitMount: Y9,
-  commitTextUpdate: Q9,
-  commitUpdate: V9,
-  createInstance: b9,
-  createTextInstance: S9,
-  detachDeletedInstance: $9,
-  finalizeInitialChildren: w9,
-  getChildHostContext: N9,
-  getCurrentEventPriority: e7,
-  getPublicInstance: C9,
-  getRootHostContext: k9,
-  hideInstance: j9,
-  hideTextInstance: q9,
+  appendChild: G9,
+  appendChildToContainer: H9,
+  appendInitialChild: b9,
+  cancelTimeout: B9,
+  clearContainer: $9,
+  commitMount: V9,
+  commitTextUpdate: Y9,
+  commitUpdate: j9,
+  createInstance: S9,
+  createTextInstance: w9,
+  detachDeletedInstance: e7,
+  finalizeInitialChildren: C9,
+  getChildHostContext: P9,
+  getCurrentEventPriority: t7,
+  getPublicInstance: _9,
+  getRootHostContext: N9,
+  hideInstance: q9,
+  hideTextInstance: K9,
   idlePriority: Ig.unstable_IdlePriority,
   insertBefore: N5,
-  insertInContainerBefore: H9,
-  isPrimaryRenderer: F9,
-  noTimeout: B9,
+  insertInContainerBefore: X9,
+  isPrimaryRenderer: I9,
+  noTimeout: z9,
   now: Ig.unstable_now,
-  prepareForCommit: _9,
-  preparePortalMount: E9,
-  prepareUpdate: R9,
-  removeChild: X9,
-  removeChildFromContainer: W9,
-  resetAfterCommit: T9,
-  resetTextContent: D9,
+  prepareForCommit: E9,
+  preparePortalMount: R9,
+  prepareUpdate: T9,
+  removeChild: W9,
+  removeChildFromContainer: Q9,
+  resetAfterCommit: D9,
+  resetTextContent: L9,
   run: Ig.unstable_runWithPriority,
-  scheduleTimeout: P9,
-  shouldDeprioritizeSubtree: L9,
-  shouldSetTextContent: z9,
-  supportsMutation: O9,
-  unhideInstance: K9,
-  unhideTextInstance: J9,
-  warnsIfNotActing: I9
+  scheduleTimeout: M9,
+  shouldDeprioritizeSubtree: k9,
+  shouldSetTextContent: F9,
+  supportsMutation: U9,
+  unhideInstance: J9,
+  unhideTextInstance: Z9,
+  warnsIfNotActing: O9
 }, Symbol.toStringTag, { value: "Module" }));
-var n7 = Object.defineProperty, r7 = Object.defineProperties, a7 = Object.getOwnPropertyDescriptors, bx = Object.getOwnPropertySymbols, i7 = Object.prototype.hasOwnProperty, o7 = Object.prototype.propertyIsEnumerable, Sx = (t, e, n) => e in t ? n7(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, wx = (t, e) => {
+var r7 = Object.defineProperty, a7 = Object.defineProperties, i7 = Object.getOwnPropertyDescriptors, bx = Object.getOwnPropertySymbols, o7 = Object.prototype.hasOwnProperty, s7 = Object.prototype.propertyIsEnumerable, Sx = (t, e, n) => e in t ? r7(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, wx = (t, e) => {
   for (var n in e || (e = {}))
-    i7.call(e, n) && Sx(t, n, e[n]);
+    o7.call(e, n) && Sx(t, n, e[n]);
   if (bx)
     for (var n of bx(e))
-      o7.call(e, n) && Sx(t, n, e[n]);
+      s7.call(e, n) && Sx(t, n, e[n]);
   return t;
-}, s7 = (t, e) => r7(t, a7(e)), Cx, _x;
+}, l7 = (t, e) => a7(t, i7(e)), Cx, _x;
 typeof window < "u" && ((Cx = window.document) != null && Cx.createElement || ((_x = window.navigator) == null ? void 0 : _x.product) === "ReactNative") ? Fa.useLayoutEffect : Fa.useEffect;
 function P5(t, e, n) {
   if (!t)
@@ -30044,7 +30051,7 @@ class B5 extends Fa.Component {
     }, this.props.children);
   }
 }
-function l7() {
+function c7() {
   const t = Fa.useContext(Dv);
   if (t === null)
     throw new Error("its-fine: useFiber must be called within a <FiberProvider />!");
@@ -30066,8 +30073,8 @@ function l7() {
     }
   }, [t, e]);
 }
-function c7() {
-  const t = l7(), [e] = Fa.useState(() => /* @__PURE__ */ new Map());
+function u7() {
+  const t = c7(), [e] = Fa.useState(() => /* @__PURE__ */ new Map());
   e.clear();
   let n = t;
   for (; n; ) {
@@ -30080,10 +30087,10 @@ function c7() {
   return e;
 }
 function z5() {
-  const t = c7();
+  const t = u7();
   return Fa.useMemo(
     () => Array.from(t.keys()).reduce(
-      (e, n) => (o) => /* @__PURE__ */ Fa.createElement(e, null, /* @__PURE__ */ Fa.createElement(n.Provider, s7(wx({}, o), {
+      (e, n) => (o) => /* @__PURE__ */ Fa.createElement(e, null, /* @__PURE__ */ Fa.createElement(n.Provider, l7(wx({}, o), {
         value: t.get(n)
       }))),
       (e) => /* @__PURE__ */ Fa.createElement(B5, wx({}, e))
@@ -30091,7 +30098,7 @@ function z5() {
     [t]
   );
 }
-function u7(t) {
+function d7(t) {
   const e = Dt.useRef({});
   return Dt.useLayoutEffect(() => {
     e.current = t;
@@ -30099,8 +30106,8 @@ function u7(t) {
     e.current = {};
   }, []), e.current;
 }
-const d7 = (t) => {
-  const e = Dt.useRef(null), n = Dt.useRef(null), o = Dt.useRef(null), i = u7(t), c = z5(), d = (h) => {
+const f7 = (t) => {
+  const e = Dt.useRef(null), n = Dt.useRef(null), o = Dt.useRef(null), i = d7(t), c = z5(), d = (h) => {
     const { forwardedRef: p } = t;
     p && (typeof p == "function" ? p(h) : p.current = h);
   };
@@ -30122,7 +30129,7 @@ const d7 = (t) => {
     tabIndex: t.tabIndex,
     title: t.title
   });
-}, F5 = "Layer", wi = "Group", oa = "Rect", Lv = "Ellipse", tl = "Line", DA = "Image", us = "Text", kv = "Arrow", Nv = "Transformer", Uf = f9(t7);
+}, F5 = "Layer", wi = "Group", oa = "Rect", Lv = "Ellipse", tl = "Line", DA = "Image", us = "Text", kv = "Arrow", Nv = "Transformer", Uf = h9(n7);
 Uf.injectIntoDevTools({
   // @ts-ignore
   findHostInstanceByFiber: () => null,
@@ -30130,7 +30137,7 @@ Uf.injectIntoDevTools({
   version: Dt.version,
   rendererPackageName: "react-konva"
 });
-const I5 = Dt.forwardRef((t, e) => Dt.createElement(B5, {}, Dt.createElement(d7, { ...t, forwardedRef: e }))), bA = 960, SA = 540, f7 = (t, e, n) => {
+const I5 = Dt.forwardRef((t, e) => Dt.createElement(B5, {}, Dt.createElement(f7, { ...t, forwardedRef: e }))), bA = 960, SA = 540, h7 = (t, e, n) => {
   if (!n.enabled)
     return { x: t.x, y: t.y, guides: [] };
   let o = t.x, i = t.y;
@@ -30143,7 +30150,7 @@ const I5 = Dt.forwardRef((t, e) => Dt.createElement(B5, {}, Dt.createElement(d7,
   return { x: o, y: i, guides: c };
 };
 var Fu = {}, Rx;
-function h7() {
+function p7() {
   if (Rx) return Fu;
   Rx = 1;
   var t = D6;
@@ -30169,9 +30176,9 @@ function h7() {
   }
   return Fu;
 }
-var p7 = h7();
-const A7 = /* @__PURE__ */ zA(p7);
-var m7 = function(t, e) {
+var A7 = p7();
+const m7 = /* @__PURE__ */ zA(A7);
+var g7 = function(t, e) {
   var n = {};
   for (var o in t) Object.prototype.hasOwnProperty.call(t, o) && e.indexOf(o) < 0 && (n[o] = t[o]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
@@ -30179,23 +30186,23 @@ var m7 = function(t, e) {
       e.indexOf(o[i]) < 0 && Object.prototype.propertyIsEnumerable.call(t, o[i]) && (n[o[i]] = t[o[i]]);
   return n;
 };
-const g7 = (t) => {
+const v7 = (t) => {
   const e = window.getComputedStyle(t).position;
   return !(e === "absolute" || e === "relative");
 };
-function v7(t = () => {
+function y7(t = () => {
 }) {
   const e = Dt.useRef(t);
   return e.current = t, Dt.useCallback((...n) => e.current.apply(null, n), []);
 }
 const fv = ({ children: t, groupProps: e, divProps: n, transform: o, transformFunc: i, parentNodeFunc: c }) => {
-  const d = z5(), h = Dt.useRef(null), [p] = Dt.useState(() => document.createElement("div")), u = Dt.useMemo(() => A7.createRoot(p), [p]), A = o ?? !0, y = v7(() => {
+  const d = z5(), h = Dt.useRef(null), [p] = Dt.useState(() => document.createElement("div")), u = Dt.useMemo(() => m7.createRoot(p), [p]), A = o ?? !0, y = y7(() => {
     if (A && h.current) {
       let R = h.current.getAbsoluteTransform().decompose();
       i && (R = i(R)), p.style.position = "absolute", p.style.zIndex = "10", p.style.top = "0px", p.style.left = "0px", p.style.transform = `translate(${R.x}px, ${R.y}px) rotate(${R.rotation}deg) scaleX(${R.scaleX}) scaleY(${R.scaleY})`, p.style.transformOrigin = "top left";
     } else
       p.style.position = "", p.style.zIndex = "", p.style.top = "", p.style.left = "", p.style.transform = "", p.style.transformOrigin = "";
-    const x = n || {}, { style: S } = x, w = m7(x, ["style"]);
+    const x = n || {}, { style: S } = x, w = g7(x, ["style"]);
     Object.assign(p.style, S), Object.assign(p, w);
   });
   return Dt.useLayoutEffect(() => {
@@ -30205,7 +30212,7 @@ const fv = ({ children: t, groupProps: e, divProps: n, transform: o, transformFu
       return;
     const w = c ? c({ stage: S.getStage() }) : (x = S.getStage()) === null || x === void 0 ? void 0 : x.container();
     if (w)
-      return w.appendChild(p), A && g7(w) && (w.style.position = "relative"), S.on("absoluteTransformChange", y), y(), () => {
+      return w.appendChild(p), A && v7(w) && (w.style.position = "relative"), S.on("absoluteTransformChange", y), y(), () => {
         var E;
         S.off("absoluteTransformChange", y), (E = p.parentNode) === null || E === void 0 || E.removeChild(p);
       };
@@ -30224,7 +30231,7 @@ const fv = ({ children: t, groupProps: e, divProps: n, transform: o, transformFu
   }, []), Dt.createElement(wi, Object.assign({ ref: h }, e));
 };
 var Og, Tx;
-function y7() {
+function x7() {
   if (Tx) return Og;
   Tx = 1;
   var t = Dt;
@@ -30251,8 +30258,8 @@ function y7() {
     ), [d.current, c.current];
   }, Og;
 }
-var x7 = y7();
-const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect: n, onChange: o, onDragStart: i, onDragEnd: c }) => {
+var b7 = x7();
+const S7 = /* @__PURE__ */ zA(b7), w7 = ({ element: t, isSelected: e, onSelect: n, onChange: o, onDragStart: i, onDragEnd: c }) => {
   const d = Rn(null), h = Rn(null), p = Rn(null), [u, A] = at(!1), [y, x] = at(t.fontSize * 2);
   er(() => {
     var M;
@@ -30359,7 +30366,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
         groupProps: { x: t.x, y: t.y },
         divProps: { style: { opacity: 1 } },
         children: /* @__PURE__ */ P(
-          C7,
+          _7,
           {
             element: t,
             onComplete: w,
@@ -30369,13 +30376,13 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
       }
     )
   ] });
-}, w7 = (t) => {
+}, C7 = (t) => {
   let e = t.replace("#", "");
   e.length === 3 && (e = e[0] + e[0] + e[1] + e[1] + e[2] + e[2]);
   const n = parseInt(e.substring(0, 2), 16), o = parseInt(e.substring(2, 4), 16), i = parseInt(e.substring(4, 6), 16);
   return (n * 299 + o * 587 + i * 114) / 1e3 > 180;
-}, C7 = ({ element: t, onComplete: e, onCancel: n }) => {
-  const o = Rn(null), [i, c] = at(t.content), d = w7(t.fill) ? "#1e293b" : t.fill;
+}, _7 = ({ element: t, onComplete: e, onCancel: n }) => {
+  const o = Rn(null), [i, c] = at(t.content), d = C7(t.fill) ? "#1e293b" : t.fill;
   return er(() => {
     const u = o.current;
     u && requestAnimationFrame(() => {
@@ -30414,7 +30421,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
       placeholder: "텍스트를 입력하세요... (마크다운 지원: **굵게**, *기울임*)"
     }
   );
-}, _7 = ({ element: t, isSelected: e, onSelect: n, onChange: o, onDragStart: i, onDragEnd: c, onReplaceWithImage: d }) => {
+}, E7 = ({ element: t, isSelected: e, onSelect: n, onChange: o, onDragStart: i, onDragEnd: c, onReplaceWithImage: d }) => {
   const h = Rn(null), p = Rn(null), u = Rn(null), [A, y] = at(!1);
   er(() => {
     var j;
@@ -30580,7 +30587,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
             }
           ),
           A && /* @__PURE__ */ P(fv, { groupProps: { x: 0, y: 0 }, divProps: { style: { opacity: 1 } }, children: /* @__PURE__ */ P(
-            R7,
+            T7,
             {
               element: t,
               onComplete: M,
@@ -30611,13 +30618,13 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
       }
     )
   ] });
-}, E7 = (t) => {
+}, R7 = (t) => {
   let e = t.replace("#", "");
   e.length === 3 && (e = e[0] + e[0] + e[1] + e[1] + e[2] + e[2]);
   const n = parseInt(e.substring(0, 2), 16), o = parseInt(e.substring(2, 4), 16), i = parseInt(e.substring(4, 6), 16);
   return (n * 299 + o * 587 + i * 114) / 1e3 > 180;
-}, R7 = ({ element: t, onComplete: e, onCancel: n }) => {
-  const o = Rn(null), [i, c] = at(t.text || ""), d = t.textColor || "#1e293b", h = E7(d) ? "#1e293b" : d;
+}, T7 = ({ element: t, onComplete: e, onCancel: n }) => {
+  const o = Rn(null), [i, c] = at(t.text || ""), d = t.textColor || "#1e293b", h = R7(d) ? "#1e293b" : d;
   return er(() => {
     o.current && requestAnimationFrame(() => {
       var A, y;
@@ -30654,7 +30661,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
       placeholder: "텍스트 입력..."
     }
   );
-}, T7 = ({ element: t, isSelected: e, onSelect: n, onChange: o, onDragStart: i, onDragEnd: c }) => {
+}, D7 = ({ element: t, isSelected: e, onSelect: n, onChange: o, onDragStart: i, onDragEnd: c }) => {
   const d = Rn(null), h = Rn(null), p = Rn(null), [u, A] = at(null), [y, x] = at(!1), [S, w] = at({ x: 0, y: 0 }), [E, R] = at(1);
   er(() => {
     const ne = new window.Image();
@@ -31081,7 +31088,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
       }
     )
   ] });
-}, Iu = 960, Ou = 540, D7 = () => {
+}, Iu = 960, Ou = 540, L7 = () => {
   const t = Rn(null), e = Rn(null), [n, o] = at(1);
   er(() => {
     const Ae = () => {
@@ -31343,7 +31350,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
       if (se && R.enabled && "x" in L && "y" in L) {
         const ce = F.elements.find((G) => G.id === Ae);
         if (ce) {
-          const G = "width" in L ? L.width : ce.width, U = "height" in L ? L.height : ce.height, Z = F.elements.filter((Se) => Se.id !== Ae), ve = f7(
+          const G = "width" in L ? L.width : ce.width, U = "height" in L ? L.height : ce.height, Z = F.elements.filter((Se) => Se.id !== Ae), ve = h7(
             { x: L.x, y: L.y, width: G, height: U },
             Z,
             R
@@ -31443,7 +31450,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
                 F.elements.map((Ae) => {
                   const L = d === Ae.id || M.includes(Ae.id);
                   return Ae.type === "text" ? /* @__PURE__ */ P(
-                    S7,
+                    w7,
                     {
                       element: Ae,
                       isSelected: L,
@@ -31454,7 +31461,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
                     },
                     Ae.id
                   ) : Ae.type === "shape" ? /* @__PURE__ */ P(
-                    _7,
+                    E7,
                     {
                       element: Ae,
                       isSelected: L,
@@ -31466,7 +31473,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
                     },
                     Ae.id
                   ) : Ae.type === "image" ? /* @__PURE__ */ P(
-                    T7,
+                    D7,
                     {
                       element: Ae,
                       isSelected: L,
@@ -31488,8 +31495,8 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
       )
     }
   ) });
-}, BA = 142, hv = 80, L7 = 960, ln = BA / L7, k7 = ({ element: t, scale: e }) => {
-  const [n] = b7(t.src);
+}, BA = 142, hv = 80, k7 = 960, ln = BA / k7, N7 = ({ element: t, scale: e }) => {
+  const [n] = S7(t.src);
   return n ? /* @__PURE__ */ P(
     DA,
     {
@@ -31501,7 +31508,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
       rotation: t.rotation
     }
   ) : null;
-}, N7 = ({ slide: t }) => {
+}, P7 = ({ slide: t }) => {
   const e = Lx(() => t.elements.map((n) => {
     if (n.type === "text") {
       const o = n;
@@ -31612,14 +31619,14 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
           return null;
       }
     } else if (n.type === "image")
-      return /* @__PURE__ */ P(k7, { element: n, scale: ln }, n.id);
+      return /* @__PURE__ */ P(N7, { element: n, scale: ln }, n.id);
     return null;
   }), [t.elements]);
   return /* @__PURE__ */ P(I5, { width: BA, height: hv, children: /* @__PURE__ */ de(F5, { children: [
     /* @__PURE__ */ P(oa, { x: 0, y: 0, width: BA, height: hv, fill: t.background }),
     e
   ] }) });
-}, P7 = () => {
+}, M7 = () => {
   const t = Ve((p) => p.slides), e = Ve((p) => p.currentSlideIndex), n = Ve((p) => p.selectSlide), o = Ve((p) => p.addSlide), i = Ve((p) => p.deleteSlide), [c, d] = at(null), h = (p, u) => {
     p.stopPropagation(), t.length > 1 && i(u);
   };
@@ -31680,7 +31687,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
                     boxShadow: e === u ? "0 0 0 4px rgba(91, 110, 247, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1)" : void 0,
                     transition: "all 150ms ease"
                   },
-                  children: /* @__PURE__ */ P(N7, { slide: p })
+                  children: /* @__PURE__ */ P(P7, { slide: p })
                 }
               )
             ]
@@ -31710,7 +31717,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
       ] }) })
     }
   );
-}, M7 = () => {
+}, B7 = () => {
   const [t, e] = at(!1), n = Ve((R) => R.slides), o = Ve((R) => R.currentSlideIndex), i = Ve((R) => R.selectedElementId), c = Ve((R) => R.updateElement), d = Ve((R) => R.updateSlideBackground), h = Ve((R) => R.bringToFront), p = Ve((R) => R.sendToBack), u = Ve((R) => R.bringForward), A = Ve((R) => R.sendBackward), y = Ve((R) => R.copyElement), x = Ve((R) => R.commitElementUpdate), S = n[o], w = i ? S.elements.find((R) => R.id === i) : null;
   if (t)
     return /* @__PURE__ */ P(At, { w: 40, bg: "white", py: "md", style: { borderLeft: "1px solid var(--devdive-border-light)" }, children: /* @__PURE__ */ P(dr, { align: "center", children: /* @__PURE__ */ P($n, { label: "속성 패널 펼치기", position: "left", children: /* @__PURE__ */ P(cn, { variant: "subtle", color: "gray", onClick: () => e(!1), children: /* @__PURE__ */ P("span", { className: "material-symbols-outlined", children: "chevron_left" }) }) }) }) });
@@ -31778,12 +31785,12 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
         }
       )
     ] }),
-    /* @__PURE__ */ P(B7, { element: w, onUpdate: E, onStartEdit: x }),
-    w.type === "text" && /* @__PURE__ */ P(z7, { element: w, onUpdate: E, onStartEdit: x }),
-    w.type === "shape" && /* @__PURE__ */ P(F7, { element: w, onUpdate: E, onStartEdit: x }),
-    w.type === "image" && /* @__PURE__ */ P(I7, { element: w, onUpdate: E, onStartEdit: x })
+    /* @__PURE__ */ P(z7, { element: w, onUpdate: E, onStartEdit: x }),
+    w.type === "text" && /* @__PURE__ */ P(F7, { element: w, onUpdate: E, onStartEdit: x }),
+    w.type === "shape" && /* @__PURE__ */ P(I7, { element: w, onUpdate: E, onStartEdit: x }),
+    w.type === "image" && /* @__PURE__ */ P(O7, { element: w, onUpdate: E, onStartEdit: x })
   ] });
-}, B7 = ({
+}, z7 = ({
   element: t,
   onUpdate: e,
   onStartEdit: n
@@ -31930,7 +31937,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
       )
     ] })
   ] });
-}, z7 = ({
+}, F7 = ({
   element: t,
   onUpdate: e,
   onStartEdit: n
@@ -31977,7 +31984,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
       }
     )
   ] })
-] }), F7 = ({
+] }), I7 = ({
   element: t,
   onUpdate: e,
   onStartEdit: n
@@ -32090,7 +32097,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
       ] })
     ] })
   ] });
-}, I7 = ({
+}, O7 = ({
   element: t,
   onUpdate: e,
   onStartEdit: n
@@ -32218,7 +32225,7 @@ const b7 = /* @__PURE__ */ zA(x7), S7 = ({ element: t, isSelected: e, onSelect:
       )
     ] })
   ] });
-}, O7 = () => {
+}, U7 = () => {
   const [t, e] = at(!1), [n, o] = at([]), [i, c] = at(""), [d, h] = at(!1), [p, u] = at([]), [A, y] = at(-1), [x, S] = at({ x: 0, y: 0 }), [w, E] = at(!1), R = Rn({ x: 0, y: 0, posX: 0, posY: 0 }), T = Rn(null), M = Rn(null), B = Rn(null), { generateSlideContent: I } = IA(), F = Ve((K) => K.slides), Y = Ve((K) => K.currentSlideIndex), q = Ve((K) => K.updateElement), j = F[Y];
   er(() => {
     T.current && t && T.current.scrollTo({ top: T.current.scrollHeight, behavior: "smooth" });
@@ -32404,7 +32411,7 @@ ${Ee.join(`
                 ] })
               ] }) }),
               /* @__PURE__ */ P(Kl, { h: 200, px: "sm", py: "xs", viewportRef: T, children: /* @__PURE__ */ de(dr, { gap: "xs", children: [
-                n.map((K) => /* @__PURE__ */ P(U7, { message: K }, K.id)),
+                n.map((K) => /* @__PURE__ */ P(G7, { message: K }, K.id)),
                 d && /* @__PURE__ */ P(At, { children: /* @__PURE__ */ P(ji, { px: "xs", py: 4, radius: "md", bg: "gray.1", style: { display: "inline-block" }, children: /* @__PURE__ */ de(wt, { gap: "xs", children: [
                   /* @__PURE__ */ P(
                     "span",
@@ -32523,7 +32530,7 @@ ${Ee.join(`
       ]
     }
   );
-}, U7 = ({ message: t }) => {
+}, G7 = ({ message: t }) => {
   const e = t.role === "user";
   return /* @__PURE__ */ P(At, { style: { textAlign: e ? "right" : "left" }, children: /* @__PURE__ */ P(
     ji,
@@ -32540,7 +32547,7 @@ ${Ee.join(`
       children: /* @__PURE__ */ P(pt, { size: "xs", style: { whiteSpace: "pre-wrap", lineHeight: 1.4 }, children: t.content })
     }
   ) });
-}, G7 = () => {
+}, H7 = () => {
   const t = Ve((p) => p.copyElement), e = Ve((p) => p.pasteElement), n = Ve((p) => p.deleteElement), o = Ve((p) => p.selectedElementId), i = Ve((p) => p.bringToFront), c = Ve((p) => p.sendToBack), d = Ve((p) => p.undo), h = Ve((p) => p.redo);
   er(() => {
     const p = (u) => {
@@ -32552,8 +32559,8 @@ ${Ee.join(`
     };
     return window.addEventListener("keydown", p), () => window.removeEventListener("keydown", p);
   }, [t, e, n, o, i, c, d, h]);
-}, i_ = () => (G7(), /* @__PURE__ */ de(v2, { direction: "column", h: "100%", c: "slate.8", children: [
-  /* @__PURE__ */ P(xw, {}),
+}, o_ = () => (H7(), /* @__PURE__ */ de(v2, { direction: "column", h: "100%", c: "slate.8", children: [
+  /* @__PURE__ */ P(bw, {}),
   /* @__PURE__ */ de(v2, { flex: 1, style: { overflow: "hidden" }, children: [
     /* @__PURE__ */ de(
       At,
@@ -32564,15 +32571,15 @@ ${Ee.join(`
         className: "dot-grid",
         style: { display: "flex", flexDirection: "column", overflow: "hidden" },
         children: [
-          /* @__PURE__ */ P(zw, {}),
-          /* @__PURE__ */ P(At, { flex: 1, style: { overflow: "hidden" }, children: /* @__PURE__ */ P(D7, {}) }),
-          /* @__PURE__ */ P(O7, {})
+          /* @__PURE__ */ P(Fw, {}),
+          /* @__PURE__ */ P(At, { flex: 1, style: { overflow: "hidden" }, children: /* @__PURE__ */ P(L7, {}) }),
+          /* @__PURE__ */ P(U7, {})
         ]
       }
     ),
-    /* @__PURE__ */ P(M7, {})
+    /* @__PURE__ */ P(B7, {})
   ] }),
-  /* @__PURE__ */ P(P7, {})
+  /* @__PURE__ */ P(M7, {})
 ] })), Dx = {
   position: "fixed",
   top: "50%",
@@ -32585,7 +32592,7 @@ ${Ee.join(`
   backdropFilter: "blur(12px)",
   border: "1px solid var(--devdive-border-light)",
   boxShadow: "0 10px 25px rgba(0, 0, 0, 0.1)"
-}, o_ = () => {
+}, s_ = () => {
   const t = Ve((h) => h.slides), e = Ve((h) => h.currentSlideIndex), n = Ve((h) => h.selectSlide), o = e > 0, i = e < t.length - 1, c = () => {
     o && n(e - 1);
   }, d = () => {
@@ -32619,26 +32626,26 @@ ${Ee.join(`
   ] });
 };
 export {
-  i_ as Editor,
-  zw as FloatingToolbar,
-  xw as Header,
-  T7 as ImageNode,
+  o_ as Editor,
+  Fw as FloatingToolbar,
+  bw as Header,
+  D7 as ImageNode,
   Px as LAYOUT_TEMPLATES,
-  M7 as PropertiesPanel,
-  _7 as ShapeNode,
-  D7 as SlideCanvas,
-  o_ as SlideNavigation,
-  P7 as SlideThumbnails,
+  B7 as PropertiesPanel,
+  E7 as ShapeNode,
+  L7 as SlideCanvas,
+  s_ as SlideNavigation,
+  M7 as SlideThumbnails,
   Xf as TEXT_STYLE_PRESETS,
   fs as THEME_PRESETS,
   QS as TemplateGallery,
-  S7 as TextNode,
-  f7 as calculateSnap,
-  j7 as devdiveTheme,
+  w7 as TextNode,
+  h7 as calculateSnap,
+  q7 as devdiveTheme,
   Vi as generateId,
   XS as generatePptx,
   b2 as getLayoutTemplate,
-  q7 as themeVars,
+  K7 as themeVars,
   Ve as useEditorStore
 };
 //# sourceMappingURL=devdive-slide.es.js.map