@mypixia/simplex-designer 2.1.0 → 2.1.2

package/dist/index.es.js

@@ -1,8 +1,8 @@
-import Ge, { useState as N, useRef as dt, useEffect as et, useMemo as re, forwardRef as _e, useCallback as ot, useReducer as Ye, useImperativeHandle as qe } from "react";
-import Ve from "qrcode";
-import Xe from "react-barcode";
-import ae from "axios";
-import './index_external.css';var Rt = { exports: {} }, Tt = {};
+import _e, { useState as N, useRef as dt, useEffect as et, useMemo as ae, forwardRef as Ye, useCallback as ot, useReducer as qe, useImperativeHandle as Ve } from "react";
+import Xe from "qrcode";
+import Je from "react-barcode";
+import se from "axios";
+import './index_external.css';var Dt = { exports: {} }, Tt = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -12,10 +12,10 @@ import './index_external.css';var Rt = { exports: {} }, Tt = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var se;
-function Je() {
-  if (se) return Tt;
-  se = 1;
+var le;
+function Ke() {
+  if (le) return Tt;
+  le = 1;
   var d = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
   function a(l, s, f) {
     var x = null;
@@ -44,15 +44,15 @@ var jt = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var le;
-function Ke() {
-  return le || (le = 1, process.env.NODE_ENV !== "production" && function() {
-    function d(m) {
-      if (m == null) return null;
-      if (typeof m == "function")
-        return m.$$typeof === rt ? null : m.displayName || m.name || null;
-      if (typeof m == "string") return m;
-      switch (m) {
+var ne;
+function Ze() {
+  return ne || (ne = 1, process.env.NODE_ENV !== "production" && function() {
+    function d(u) {
+      if (u == null) return null;
+      if (typeof u == "function")
+        return u.$$typeof === rt ? null : u.displayName || u.name || null;
+      if (typeof u == "string") return u;
+      switch (u) {
         case w:
           return "Fragment";
         case E:
@@ -66,126 +66,126 @@ function Ke() {
         case q:
           return "Activity";
       }
-      if (typeof m == "object")
-        switch (typeof m.tag == "number" && console.error(
+      if (typeof u == "object")
+        switch (typeof u.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), m.$$typeof) {
+        ), u.$$typeof) {
           case T:
             return "Portal";
           case $:
-            return (m.displayName || "Context") + ".Provider";
+            return (u.displayName || "Context") + ".Provider";
           case S:
-            return (m._context.displayName || "Context") + ".Consumer";
+            return (u._context.displayName || "Context") + ".Consumer";
           case B:
-            var A = m.render;
-            return m = m.displayName, m || (m = A.displayName || A.name || "", m = m !== "" ? "ForwardRef(" + m + ")" : "ForwardRef"), m;
+            var A = u.render;
+            return u = u.displayName, u || (u = A.displayName || A.name || "", u = u !== "" ? "ForwardRef(" + u + ")" : "ForwardRef"), u;
           case U:
-            return A = m.displayName || null, A !== null ? A : d(m.type) || "Memo";
+            return A = u.displayName || null, A !== null ? A : d(u.type) || "Memo";
           case ft:
-            A = m._payload, m = m._init;
+            A = u._payload, u = u._init;
             try {
-              return d(m(A));
+              return d(u(A));
             } catch {
             }
         }
       return null;
     }
-    function o(m) {
-      return "" + m;
+    function o(u) {
+      return "" + u;
     }
-    function a(m) {
+    function a(u) {
       try {
-        o(m);
+        o(u);
         var A = !1;
       } catch {
         A = !0;
       }
       if (A) {
         A = console;
-        var Q = A.error, _ = typeof Symbol == "function" && Symbol.toStringTag && m[Symbol.toStringTag] || m.constructor.name || "Object";
+        var Q = A.error, _ = typeof Symbol == "function" && Symbol.toStringTag && u[Symbol.toStringTag] || u.constructor.name || "Object";
         return Q.call(
           A,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           _
-        ), o(m);
+        ), o(u);
       }
     }
-    function l(m) {
-      if (m === w) return "<>";
-      if (typeof m == "object" && m !== null && m.$$typeof === ft)
+    function l(u) {
+      if (u === w) return "<>";
+      if (typeof u == "object" && u !== null && u.$$typeof === ft)
         return "<...>";
       try {
-        var A = d(m);
+        var A = d(u);
         return A ? "<" + A + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function s() {
-      var m = Y.A;
-      return m === null ? null : m.getOwner();
+      var u = Y.A;
+      return u === null ? null : u.getOwner();
     }
     function f() {
       return Error("react-stack-top-frame");
     }
-    function x(m) {
-      if (O.call(m, "key")) {
-        var A = Object.getOwnPropertyDescriptor(m, "key").get;
+    function x(u) {
+      if (O.call(u, "key")) {
+        var A = Object.getOwnPropertyDescriptor(u, "key").get;
         if (A && A.isReactWarning) return !1;
       }
-      return m.key !== void 0;
+      return u.key !== void 0;
     }
-    function c(m, A) {
+    function c(u, A) {
       function Q() {
         K || (K = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           A
         ));
       }
-      Q.isReactWarning = !0, Object.defineProperty(m, "key", {
+      Q.isReactWarning = !0, Object.defineProperty(u, "key", {
         get: Q,
         configurable: !0
       });
     }
     function y() {
-      var m = d(this.type);
-      return it[m] || (it[m] = !0, console.error(
+      var u = d(this.type);
+      return it[u] || (it[u] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), m = this.props.ref, m !== void 0 ? m : null;
+      )), u = this.props.ref, u !== void 0 ? u : null;
     }
-    function g(m, A, Q, _, Z, V, ht, H) {
-      return Q = V.ref, m = {
+    function g(u, A, Q, _, Z, V, ht, H) {
+      return Q = V.ref, u = {
         $$typeof: I,
-        type: m,
+        type: u,
         key: A,
         props: V,
         _owner: Z
-      }, (Q !== void 0 ? Q : null) !== null ? Object.defineProperty(m, "ref", {
+      }, (Q !== void 0 ? Q : null) !== null ? Object.defineProperty(u, "ref", {
         enumerable: !1,
         get: y
-      }) : Object.defineProperty(m, "ref", { enumerable: !1, value: null }), m._store = {}, Object.defineProperty(m._store, "validated", {
+      }) : Object.defineProperty(u, "ref", { enumerable: !1, value: null }), u._store = {}, Object.defineProperty(u._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(m, "_debugInfo", {
+      }), Object.defineProperty(u, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(m, "_debugStack", {
+      }), Object.defineProperty(u, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: ht
-      }), Object.defineProperty(m, "_debugTask", {
+      }), Object.defineProperty(u, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: H
-      }), Object.freeze && (Object.freeze(m.props), Object.freeze(m)), m;
+      }), Object.freeze && (Object.freeze(u.props), Object.freeze(u)), u;
     }
-    function F(m, A, Q, _, Z, V, ht, H) {
+    function F(u, A, Q, _, Z, V, ht, H) {
       var P = A.children;
       if (P !== void 0)
         if (_)
@@ -199,9 +199,9 @@ function Ke() {
             );
         else C(P);
       if (O.call(A, "key")) {
-        P = d(m);
-        var nt = Object.keys(A).filter(function(Dt) {
-          return Dt !== "key";
+        P = d(u);
+        var nt = Object.keys(A).filter(function(Et) {
+          return Et !== "key";
         });
         _ = 0 < nt.length ? "{key: someKey, " + nt.join(": ..., ") + ": ...}" : "{key: someKey}", j[P + _] || (nt = 0 < nt.length ? "{" + nt.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
@@ -223,9 +223,9 @@ React keys must be passed directly to JSX without using spread:
       } else Q = A;
       return P && c(
         Q,
-        typeof m == "function" ? m.displayName || m.name || "Unknown" : m
+        typeof u == "function" ? u.displayName || u.name || "Unknown" : u
       ), g(
-        m,
+        u,
         P,
         V,
         Z,
@@ -235,54 +235,54 @@ React keys must be passed directly to JSX without using spread:
         H
       );
     }
-    function C(m) {
-      typeof m == "object" && m !== null && m.$$typeof === I && m._store && (m._store.validated = 1);
+    function C(u) {
+      typeof u == "object" && u !== null && u.$$typeof === I && u._store && (u._store.validated = 1);
     }
-    var p = Ge, I = Symbol.for("react.transitional.element"), T = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), z = Symbol.for("react.strict_mode"), E = Symbol.for("react.profiler"), S = Symbol.for("react.consumer"), $ = Symbol.for("react.context"), B = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), at = Symbol.for("react.suspense_list"), U = Symbol.for("react.memo"), ft = Symbol.for("react.lazy"), q = Symbol.for("react.activity"), rt = Symbol.for("react.client.reference"), Y = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, J = Array.isArray, st = console.createTask ? console.createTask : function() {
+    var p = _e, I = Symbol.for("react.transitional.element"), T = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), z = Symbol.for("react.strict_mode"), E = Symbol.for("react.profiler"), S = Symbol.for("react.consumer"), $ = Symbol.for("react.context"), B = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), at = Symbol.for("react.suspense_list"), U = Symbol.for("react.memo"), ft = Symbol.for("react.lazy"), q = Symbol.for("react.activity"), rt = Symbol.for("react.client.reference"), Y = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, J = Array.isArray, st = console.createTask ? console.createTask : function() {
       return null;
     };
     p = {
-      "react-stack-bottom-frame": function(m) {
-        return m();
+      "react-stack-bottom-frame": function(u) {
+        return u();
       }
     };
-    var K, it = {}, L = p["react-stack-bottom-frame"].bind(
+    var K, it = {}, M = p["react-stack-bottom-frame"].bind(
       p,
       f
     )(), G = st(l(f)), j = {};
-    jt.Fragment = w, jt.jsx = function(m, A, Q, _, Z) {
+    jt.Fragment = w, jt.jsx = function(u, A, Q, _, Z) {
       var V = 1e4 > Y.recentlyCreatedOwnerStacks++;
       return F(
-        m,
+        u,
         A,
         Q,
         !1,
         _,
         Z,
-        V ? Error("react-stack-top-frame") : L,
-        V ? st(l(m)) : G
+        V ? Error("react-stack-top-frame") : M,
+        V ? st(l(u)) : G
       );
-    }, jt.jsxs = function(m, A, Q, _, Z) {
+    }, jt.jsxs = function(u, A, Q, _, Z) {
       var V = 1e4 > Y.recentlyCreatedOwnerStacks++;
       return F(
-        m,
+        u,
         A,
         Q,
         !0,
         _,
         Z,
-        V ? Error("react-stack-top-frame") : L,
-        V ? st(l(m)) : G
+        V ? Error("react-stack-top-frame") : M,
+        V ? st(l(u)) : G
       );
     };
   }()), jt;
 }
-var ne;
-function Ze() {
-  return ne || (ne = 1, process.env.NODE_ENV === "production" ? Rt.exports = Je() : Rt.exports = Ke()), Rt.exports;
+var ce;
+function ti() {
+  return ce || (ce = 1, process.env.NODE_ENV === "production" ? Dt.exports = Ke() : Dt.exports = Ze()), Dt.exports;
 }
-var i = Ze();
-const Pt = {
+var i = ti();
+const Ut = {
   business: {
     name: "Business & Office",
     icons: [
@@ -373,14 +373,14 @@ const Pt = {
       { name: "shield", symbol: "🛡️", unicode: "🛡️" }
     ]
   }
-}, de = () => Object.values(Pt).flatMap(
+}, fe = () => Object.values(Ut).flatMap(
   (d) => d.icons.map((o) => ({
     ...o,
     category: d.name
   }))
-), ti = (d) => de().filter(
+), ei = (d) => fe().filter(
   (a) => a.name.toLowerCase().includes(d.toLowerCase()) || a.category.toLowerCase().includes(d.toLowerCase())
-), ei = ({ onSelectIcon: d, disabled: o = !1 }) => {
+), ii = ({ onSelectIcon: d, disabled: o = !1 }) => {
   const [a, l] = N(!1), [s, f] = N(""), [x, c] = N("all"), y = dt(null);
   et(() => {
     const p = (I) => {
@@ -391,9 +391,9 @@ const Pt = {
   const g = (p) => {
     d(p), l(!1), f("");
   }, C = (() => {
-    let p = de();
-    if (s.trim() && (p = ti(s)), x !== "all") {
-      const I = Pt[x];
+    let p = fe();
+    if (s.trim() && (p = ei(s)), x !== "all") {
+      const I = Ut[x];
       I && (p = p.filter((T) => T.category === I.name));
     }
     return p;
@@ -433,7 +433,7 @@ const Pt = {
             className: "category-select",
             children: [
               /* @__PURE__ */ i.jsx("option", { value: "all", children: "All Categories" }),
-              Object.entries(Pt).map(([p, I]) => /* @__PURE__ */ i.jsx("option", { value: p, children: I.name }, p))
+              Object.entries(Ut).map(([p, I]) => /* @__PURE__ */ i.jsx("option", { value: p, children: I.name }, p))
             ]
           }
         )
@@ -458,7 +458,7 @@ const Pt = {
       ] }) })
     ] })
   ] });
-}, ii = ({ isOpen: d, onClose: o, onAddQRCode: a, theme: l }) => {
+}, oi = ({ isOpen: d, onClose: o, onAddQRCode: a, theme: l }) => {
   const [s, f] = N(""), [x, c] = N(""), [y, g] = N(200), [F, C] = N("M"), p = () => {
     if (!s.trim()) return;
     const w = {
@@ -472,7 +472,7 @@ const Pt = {
         light: "#FFFFFF"
       }
     };
-    Ve.toDataURL(s, w, (z, E) => {
+    Xe.toDataURL(s, w, (z, E) => {
       if (z) {
         console.error("QR Code generation error:", z);
         return;
@@ -585,7 +585,7 @@ const Pt = {
       ] })
     ] })
   ] }) }) : null;
-}, oi = ({ isOpen: d, onClose: o, onAddBarcode: a, theme: l }) => {
+}, ri = ({ isOpen: d, onClose: o, onAddBarcode: a, theme: l }) => {
   const [s, f] = N(""), [x, c] = N("CODE128"), [y, g] = N(null), [F, C] = N(2), [p, I] = N(100), [T, w] = N(20), [z, E] = N("center"), [S, $] = N("bottom"), [B, W] = N(10), at = dt(null), U = [
     { value: "CODE128", label: "CODE128 (Most Common)" },
     { value: "EAN13", label: "EAN-13 (European Article Number)" },
@@ -600,7 +600,7 @@ const Pt = {
     if (s.trim())
       try {
         g(/* @__PURE__ */ i.jsx(
-          Xe,
+          Je,
           {
             value: s,
             format: x,
@@ -626,19 +626,19 @@ const Pt = {
           console.error("No SVG element found in barcode");
           return;
         }
-        const L = document.createElement("canvas"), G = L.getContext("2d"), j = it.getBoundingClientRect(), m = ((J = (O = it.width) == null ? void 0 : O.baseVal) == null ? void 0 : J.value) || j.width || 200, A = ((K = (st = it.height) == null ? void 0 : st.baseVal) == null ? void 0 : K.value) || j.height || 100;
-        L.width = m, L.height = A;
+        const M = document.createElement("canvas"), G = M.getContext("2d"), j = it.getBoundingClientRect(), u = ((J = (O = it.width) == null ? void 0 : O.baseVal) == null ? void 0 : J.value) || j.width || 200, A = ((K = (st = it.height) == null ? void 0 : st.baseVal) == null ? void 0 : K.value) || j.height || 100;
+        M.width = u, M.height = A;
         const Q = new XMLSerializer().serializeToString(it), _ = new Blob([Q], { type: "image/svg+xml;charset=utf-8" }), Z = URL.createObjectURL(_), V = new Image();
         V.onload = () => {
           G.drawImage(V, 0, 0);
-          const ht = L.toDataURL("image/png"), H = new Image();
+          const ht = M.toDataURL("image/png"), H = new Image();
           H.onload = () => {
             a({
               type: "barcode",
               src: ht,
               data: s,
               format: x,
-              width: m,
+              width: u,
               height: A,
               x: 100,
               y: 100,
@@ -801,7 +801,7 @@ const Pt = {
       ] })
     ] })
   ] }) }) : null;
-}, ri = ({ theme: d }) => /* @__PURE__ */ i.jsxs("div", { className: "premium-feature-container", style: {
+}, ai = ({ theme: d }) => /* @__PURE__ */ i.jsxs("div", { className: "premium-feature-container", style: {
   padding: "20px",
   backgroundColor: "#f8f9fa",
   borderRadius: "8px",
@@ -847,7 +847,7 @@ const Pt = {
       children: "Get API Key"
     }
   )
-] }), ce = () => /* @__PURE__ */ i.jsxs("div", { style: { textAlign: "center", padding: "40px" }, children: [
+] }), de = () => /* @__PURE__ */ i.jsxs("div", { style: { textAlign: "center", padding: "40px" }, children: [
   /* @__PURE__ */ i.jsx("div", { style: {
     border: "4px solid #f3f3f3",
     borderTop: "4px solid #3498db",
@@ -864,7 +864,7 @@ const Pt = {
                 100% { transform: rotate(360deg); }
             }
         ` })
-] }), ai = ({ isOpen: d, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: f }) => {
+] }), si = ({ isOpen: d, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: f }) => {
   const [x, c] = N([]), [y, g] = N(!1), [F, C] = N(null), [p, I] = N(""), [T, w] = N(""), [z, E] = N({});
   dt(null);
   const [S, $] = N(!1), [B, W] = N(!1), [at, U] = N(!1), ft = `${f}/api/v1/designer`;
@@ -872,26 +872,26 @@ const Pt = {
     d && s && q();
   }, [d, s]);
   const q = async () => {
-    const L = sessionStorage.getItem("apc_x_sub_status");
-    L === "active" ? ($(!0), W(!0), Y()) : L === "inactive" ? ($(!1), W(!0)) : (U(!0), await rt());
+    const M = sessionStorage.getItem("apc_x_sub_status");
+    M === "active" ? ($(!0), W(!0), Y()) : M === "inactive" ? ($(!1), W(!0)) : (U(!0), await rt());
   }, rt = async () => {
     if (!s) {
       $(!1), W(!0), U(!1);
       return;
     }
-    const L = `${ft}/get-subscription-status/${s}`;
+    const M = `${ft}/get-subscription-status/${s}`;
     try {
-      (await ae.get(L)).data.object === "active" ? (sessionStorage.setItem("apc_x_sub_status", "active"), $(!0), Y()) : (sessionStorage.setItem("apc_x_sub_status", "inactive"), $(!1));
+      (await se.get(M)).data.object === "active" ? (sessionStorage.setItem("apc_x_sub_status", "active"), $(!0), Y()) : (sessionStorage.setItem("apc_x_sub_status", "inactive"), $(!1));
     } catch (G) {
       console.error("Subscription check failed:", G), sessionStorage.setItem("apc_x_sub_status", "inactive"), $(!1);
     } finally {
       U(!1), W(!0);
     }
   }, Y = async () => {
-    const L = sessionStorage.getItem("apc_stickers");
-    if (L)
+    const M = sessionStorage.getItem("apc_stickers");
+    if (M)
       try {
-        const G = JSON.parse(L);
+        const G = JSON.parse(M);
         c(G);
         return;
       } catch {
@@ -899,7 +899,7 @@ const Pt = {
       }
     g(!0), C(null);
     try {
-      const G = await ae.get(`${ft}/get-stickers`);
+      const G = await se.get(`${ft}/get-stickers`);
       if (G.data && G.data.object && G.data.object.contents) {
         const j = G.data.object.contents;
         c(j), sessionStorage.setItem("apc_stickers", JSON.stringify(j));
@@ -910,42 +910,42 @@ const Pt = {
     } finally {
       g(!1);
     }
-  }, O = (L, G) => {
+  }, O = (M, G) => {
     a({
       type: "sticker",
-      src: L,
+      src: M,
       name: G,
       width: 100,
       height: 100,
       x: 100,
       y: 100
     }), o();
-  }, J = (L) => {
+  }, J = (M) => {
     E((G) => ({
       ...G,
-      [L]: !G[L]
+      [M]: !G[M]
     }));
-  }, st = (L) => {
+  }, st = (M) => {
     const G = {};
-    return L.forEach((j) => {
-      const m = j.name.split("/");
+    return M.forEach((j) => {
+      const u = j.name.split("/");
       let A = G;
-      m.forEach((Q, _) => {
-        A[Q] || (A[Q] = _ === m.length - 1 ? j : {}), A = A[Q];
+      u.forEach((Q, _) => {
+        A[Q] || (A[Q] = _ === u.length - 1 ? j : {}), A = A[Q];
       });
     }), G;
-  }, K = (L, G = "", j = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${j * 15}px` }, children: Object.keys(L).map((m) => {
-    const A = `${G}/${m}`, Q = z[A];
-    return L[m].type === "image" ? !T || m.toLowerCase().includes(T.toLowerCase()) ? /* @__PURE__ */ i.jsx(
+  }, K = (M, G = "", j = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${j * 15}px` }, children: Object.keys(M).map((u) => {
+    const A = `${G}/${u}`, Q = z[A];
+    return M[u].type === "image" ? !T || u.toLowerCase().includes(T.toLowerCase()) ? /* @__PURE__ */ i.jsx(
       "div",
       {
         className: "sticker-item",
-        onClick: () => O(L[m].url, m),
+        onClick: () => O(M[u].url, u),
         children: /* @__PURE__ */ i.jsx("div", { className: "sticker-preview", children: /* @__PURE__ */ i.jsx(
           "img",
           {
-            src: L[m].url,
-            alt: m,
+            src: M[u].url,
+            alt: u,
             loading: "lazy",
             onError: (Z) => {
               Z.target.style.display = "none";
@@ -962,16 +962,16 @@ const Pt = {
           onClick: () => J(A),
           children: [
             /* @__PURE__ */ i.jsx("span", { className: `expand-icon ${Q ? "expanded" : ""}`, children: "▶" }),
-            /* @__PURE__ */ i.jsx("span", { className: "category-name", children: m })
+            /* @__PURE__ */ i.jsx("span", { className: "category-name", children: u })
           ]
         }
       ),
-      Q && K(L[m], A, j + 1)
+      Q && K(M[u], A, j + 1)
     ] }, A);
   }) }), it = x.filter(
-    (L) => !T || L.name.toLowerCase().includes(T.toLowerCase())
+    (M) => !T || M.name.toLowerCase().includes(T.toLowerCase())
   );
-  return d ? /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-content", onClick: (L) => L.stopPropagation(), children: [
+  return d ? /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-content", onClick: (M) => M.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-header", children: [
       /* @__PURE__ */ i.jsx("h3", { children: "Stickers" }),
       /* @__PURE__ */ i.jsx(
@@ -985,8 +985,8 @@ const Pt = {
       )
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-body", children: [
-      at && /* @__PURE__ */ i.jsx(ce, {}),
-      !S && !at && B && /* @__PURE__ */ i.jsx(ri, { theme: l }),
+      at && /* @__PURE__ */ i.jsx(de, {}),
+      !S && !at && B && /* @__PURE__ */ i.jsx(ai, { theme: l }),
       S && B && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
         /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-controls", children: /* @__PURE__ */ i.jsx("div", { className: "search-container", children: /* @__PURE__ */ i.jsx(
           "input",
@@ -994,11 +994,11 @@ const Pt = {
             type: "text",
             placeholder: "Search stickers...",
             value: T,
-            onChange: (L) => w(L.target.value),
+            onChange: (M) => w(M.target.value),
             className: "sticker-search"
           }
         ) }) }),
-        y && /* @__PURE__ */ i.jsx(ce, {}),
+        y && /* @__PURE__ */ i.jsx(de, {}),
         F && /* @__PURE__ */ i.jsxs("div", { className: "sticker-error", children: [
           /* @__PURE__ */ i.jsx("p", { children: F }),
           /* @__PURE__ */ i.jsx("button", { onClick: Y, children: "Retry" })
@@ -1007,7 +1007,7 @@ const Pt = {
       ] })
     ] })
   ] }) }) : null;
-}, si = [
+}, li = [
   // FLORAL DESIGNS (40 items)
   {
     id: 1,
@@ -2559,10 +2559,10 @@ const Pt = {
     category: "Geometric",
     description: "Complex mandala flower pattern"
   }
-], li = ({ isOpen: d, onClose: o, onAddEmbroidery: a, theme: l, apiKey: s, apiEndpoint: f }) => {
+], ni = ({ isOpen: d, onClose: o, onAddEmbroidery: a, theme: l, apiKey: s, apiEndpoint: f }) => {
   const [x, c] = N([]), [y, g] = N(!1), [F, C] = N(null), [p, I] = N(""), [T, w] = N("All"), z = dt(null), E = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
   et(() => {
-    d && c(si);
+    d && c(li);
   }, [d]);
   const S = (B) => {
     a({
@@ -4601,14 +4601,14 @@ const Pt = {
     fill: "#8B0000",
     textAlign: "center"
   }
-], ni = ({ isOpen: d, onClose: o, onAddText: a, theme: l }) => {
-  const [s, f] = N(""), [x, c] = N("All"), y = re(() => {
+], ci = ({ isOpen: d, onClose: o, onAddText: a, theme: l }) => {
+  const [s, f] = N(""), [x, c] = N("All"), y = ae(() => {
     const p = Nt.reduce((I, T) => (I[T.category] = (I[T.category] || 0) + 1, I), {});
     return [
       { name: "All", count: Nt.length },
       ...Object.entries(p).map(([I, T]) => ({ name: I, count: T }))
     ];
-  }, [Nt]), g = re(() => Nt.filter((p) => {
+  }, [Nt]), g = ae(() => Nt.filter((p) => {
     const I = !s || p.text.toLowerCase().includes(s.toLowerCase()) || p.category.toLowerCase().includes(s.toLowerCase()), T = x === "All" || p.category === x;
     return I && T;
   }), [Nt, s, x]), F = (p) => {
@@ -4707,7 +4707,7 @@ const Pt = {
       " found"
     ] }) })
   ] }) }) : null;
-}, ci = ({
+}, di = ({
   onAddElement: d,
   onDeleteElement: o,
   onDuplicateElement: a,
@@ -4728,7 +4728,7 @@ const Pt = {
   apiKey: E,
   apiEndpoint: S
 }) => {
-  const [$, B] = N(!1), [W, at] = N(!1), [U, ft] = N(!1), [q, rt] = N(!1), [Y, O] = N(!1), [J, st] = N(!1), [K, it] = N(!1), L = (P) => {
+  const [$, B] = N(!1), [W, at] = N(!1), [U, ft] = N(!1), [q, rt] = N(!1), [Y, O] = N(!1), [J, st] = N(!1), [K, it] = N(!1), M = (P) => {
     const nt = P.target.files[0];
     nt && nt.type.startsWith("image/") && y(nt), P.target.value = "";
   }, G = (P) => {
@@ -4741,7 +4741,7 @@ const Pt = {
     });
   }, j = (P) => {
     d("qrcode", P);
-  }, m = (P) => {
+  }, u = (P) => {
     d("barcode", P);
   }, A = (P) => {
     d("sticker", P);
@@ -4890,13 +4890,13 @@ const Pt = {
             {
               type: "file",
               accept: "image/*",
-              onChange: L,
+              onChange: M,
               disabled: z
             }
           )
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ i.jsx(ei, { onSelectIcon: G, theme: w, disabled: z }),
+        /* @__PURE__ */ i.jsx(ii, { onSelectIcon: G, theme: w, disabled: z }),
         /* @__PURE__ */ i.jsxs(
           "button",
           {
@@ -5024,7 +5024,7 @@ const Pt = {
       ] })
     ] }),
     /* @__PURE__ */ i.jsx(
-      ii,
+      oi,
       {
         isOpen: $,
         onClose: () => B(!1),
@@ -5033,16 +5033,16 @@ const Pt = {
       }
     ),
     /* @__PURE__ */ i.jsx(
-      oi,
+      ri,
       {
         isOpen: W,
         onClose: () => at(!1),
-        onAddBarcode: m,
+        onAddBarcode: u,
         theme: w
       }
     ),
     /* @__PURE__ */ i.jsx(
-      ai,
+      si,
       {
         isOpen: U,
         onClose: () => ft(!1),
@@ -5053,7 +5053,7 @@ const Pt = {
       }
     ),
     /* @__PURE__ */ i.jsx(
-      li,
+      ni,
       {
         isOpen: q,
         onClose: () => rt(!1),
@@ -5064,7 +5064,7 @@ const Pt = {
       }
     ),
     /* @__PURE__ */ i.jsx(
-      ni,
+      ci,
       {
         isOpen: Y,
         onClose: () => O(!1),
@@ -5073,7 +5073,7 @@ const Pt = {
       }
     )
   ] });
-}, di = ({
+}, fi = ({
   selectedElement: d,
   onUpdate: o,
   onMoveLayer: a,
@@ -5822,7 +5822,7 @@ const Pt = {
       ) })
     ] })
   ] });
-}, fi = ({
+}, hi = ({
   elements: d,
   selectedElement: o,
   onSelectElement: a,
@@ -5941,7 +5941,7 @@ const Pt = {
     )) })
   ] });
 };
-class hi {
+class gi {
   constructor() {
     this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d");
   }
@@ -6543,7 +6543,7 @@ class hi {
     };
   }
 }
-class gi {
+class xi {
   constructor(o = "localStorage") {
     this.storage = o === "sessionStorage" ? sessionStorage : localStorage, this.STORAGE_PREFIX = "mypixia_canvas_", this.DESIGNS_LIST_KEY = "mypixia_saved_designs";
   }
@@ -6733,7 +6733,7 @@ class gi {
     return "Unknown";
   }
 }
-const xi = _e((d, o) => {
+const yi = Ye((d, o) => {
   const {
     theme: a = {
       primaryColor: "#000000",
@@ -6765,7 +6765,7 @@ const xi = _e((d, o) => {
     },
     initFile: f,
     initDesignContent: x
-  } = d, [c, y] = N([]), [g, F] = N(null), [C, p] = N(!1), [I, T] = N(!1), [w, z] = N(!1), [E, S] = N({ x: 0, y: 0 }), [$, B] = N(null), [W, at] = N(800), [U, ft] = N(600), [q, rt] = N(1), [Y, O] = N(s.colorSettings[0]), [J, st] = N(!1), [K, it] = N(!0), [L, G] = N(!0), [j, m] = N(s.sections[0]), [A, Q] = N(!1), [_, Z] = N({}), [V, ht] = N([]), [H, P] = N(-1), [nt] = N(new gi("localStorage")), gt = dt(null), Dt = dt(null), kt = dt(null), wt = dt(null), Ut = dt(null), Et = dt(new hi()), Bt = dt(!1), [yt, Ot] = N(null), lt = ot(() => {
+  } = d, [c, y] = N([]), [g, F] = N(null), [C, p] = N(!1), [I, T] = N(!1), [w, z] = N(!1), [E, S] = N({ x: 0, y: 0 }), [$, B] = N(null), [W, at] = N(800), [U, ft] = N(600), [q, rt] = N(1), [Y, O] = N(s.colorSettings[0]), [J, st] = N(!1), [K, it] = N(!0), [M, G] = N(!0), [j, u] = N(s.sections[0]), [A, Q] = N(!1), [_, Z] = N({}), [V, ht] = N([]), [H, P] = N(-1), [nt] = N(new xi("localStorage")), gt = dt(null), Et = dt(null), kt = dt(null), wt = dt(null), Ot = dt(null), Bt = dt(new gi()), zt = dt(!1), [yt, Qt] = N(null), lt = ot(() => {
     const e = {
       elements: JSON.parse(JSON.stringify(c)),
       selectedElement: g ? { ...g } : null,
@@ -6782,17 +6782,17 @@ const xi = _e((d, o) => {
     sectionDesigns: _,
     zoomLevel: q,
     showGrid: J,
-    snapToGrid: L,
+    snapToGrid: M,
     selectedElement: g ? { ...g } : null,
     canvasRef: gt
     // Include reference for thumbnail generation
-  }), [c, W, U, Y, j, s, _, q, J, L, g]), Qt = (e) => {
+  }), [c, W, U, Y, j, s, _, q, J, M, g]), $t = (e) => {
     if (e.sections && typeof e.sections == "object") {
       const t = Object.keys(e.sections)[0], r = e.sections[t];
       if (r && r.elements) {
         y(r.elements || []), at(r.canvasWidth || 800), ft(r.canvasHeight || 600), O(r.selectedColor || s.colorSettings[0]), rt(r.zoomLevel || 1), st(r.showGrid || !1), G(r.snapToGrid || !0), F(null), e.sections && Z(e.sections);
         const n = s.sections.find((h) => h.sectionName === t);
-        n && m(n), ht([]), P(-1), setTimeout(() => {
+        n && u(n), ht([]), P(-1), setTimeout(() => {
           lt();
         }, 100);
         return;
@@ -6805,7 +6805,7 @@ const xi = _e((d, o) => {
         if (x)
           try {
             const r = JSON.parse(x);
-            console.log("Loading design from content in memory:", r), Ot(r), Qt(r);
+            Qt(r), $t(r);
           } catch (r) {
             console.error("Error loading design file:", r), console.warn("Using default text instead");
           }
@@ -6816,7 +6816,7 @@ const xi = _e((d, o) => {
               const n = await r.text();
               if (n.trim()) {
                 const h = JSON.parse(n.trim());
-                console.log("Loading design from file:", h), Ot(h), Qt(h);
+                Qt(h), $t(h);
               }
             } else
               console.warn("Failed to load design file, using default text");
@@ -6855,9 +6855,9 @@ const xi = _e((d, o) => {
     }, 300);
     return () => clearTimeout(t);
   }, [f, x, s.colorSettings, s.sections]);
-  const zt = ot((e = "png", t = !0) => {
+  const Wt = ot((e = "png", t = !0) => {
     const r = St();
-    return s.sections, Et.current.exportAllSections(
+    return s.sections, Bt.current.exportAllSections(
       { [(j == null ? void 0 : j.sectionName) || "main"]: r },
       [{
         id: (j == null ? void 0 : j.sectionName) || "main",
@@ -6871,7 +6871,7 @@ const xi = _e((d, o) => {
       t,
       yt
     );
-  }, [St, s.sections, j, W, U]), fe = [
+  }, [St, s.sections, j, W, U]), he = [
     "Arial",
     "Helvetica",
     "Times New Roman",
@@ -6893,13 +6893,13 @@ const xi = _e((d, o) => {
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []), et(() => {
     const e = document.createElement("canvas");
-    e.width = W, e.height = U, Ut.current = e;
+    e.width = W, e.height = U, Ot.current = e;
   }, [W, U]), et(() => {
     V.length === 0 && lt();
   }, []);
-  const At = (e, t, r, n, h, u) => {
-    e.beginPath(), e.moveTo(t + u, r), e.lineTo(t + n - u, r), e.quadraticCurveTo(t + n, r, t + n, r + u), e.lineTo(t + n, r + h - u), e.quadraticCurveTo(t + n, r + h, t + n - u, r + h), e.lineTo(t + u, r + h), e.quadraticCurveTo(t, r + h, t, r + h - u), e.lineTo(t, r + u), e.quadraticCurveTo(t, r, t + u, r), e.closePath();
-  }, $t = (e, t) => {
+  const At = (e, t, r, n, h, m) => {
+    e.beginPath(), e.moveTo(t + m, r), e.lineTo(t + n - m, r), e.quadraticCurveTo(t + n, r, t + n, r + m), e.lineTo(t + n, r + h - m), e.quadraticCurveTo(t + n, r + h, t + n - m, r + h), e.lineTo(t + m, r + h), e.quadraticCurveTo(t, r + h, t, r + h - m), e.lineTo(t, r + m), e.quadraticCurveTo(t, r, t + m, r), e.closePath();
+  }, Ht = (e, t) => {
     if (!t.isIcon)
       return {
         x: t.x,
@@ -6910,11 +6910,11 @@ const xi = _e((d, o) => {
         cy: t.y + t.height / 2
       };
     e.save(), e.font = `${t.fontStyle || ""} ${t.fontWeight || ""} ${t.fontSize}px ${t.fontFamily}`, e.textBaseline = "alphabetic", e.textAlign = "left";
-    const r = e.measureText(t.text), n = r.actualBoundingBoxAscent ?? t.fontSize * 0.8, h = r.actualBoundingBoxDescent ?? t.fontSize * 0.2, u = r.actualBoundingBoxLeft ?? 0, b = r.actualBoundingBoxRight ?? r.width, k = u + b, v = n + h, R = t.x, D = t.y, M = R - k / 2 - u, tt = D - v / 2 - n;
-    return e.restore(), { x: M, y: tt, width: k, height: v, cx: R, cy: D };
-  }, he = (e, t) => {
+    const r = e.measureText(t.text), n = r.actualBoundingBoxAscent ?? t.fontSize * 0.8, h = r.actualBoundingBoxDescent ?? t.fontSize * 0.2, m = r.actualBoundingBoxLeft ?? 0, b = r.actualBoundingBoxRight ?? r.width, k = m + b, v = n + h, R = t.x, D = t.y, L = R - k / 2 - m, tt = D - v / 2 - n;
+    return e.restore(), { x: L, y: tt, width: k, height: v, cx: R, cy: D };
+  }, ge = (e, t) => {
     if (!t) return;
-    const r = 8, n = 8, h = 4, u = 30, b = $t(e, t), k = t.isIcon ? Math.max(r, 12) : r, v = {
+    const r = 8, n = 8, h = 4, m = 30, b = Ht(e, t), k = t.isIcon ? Math.max(r, 12) : r, v = {
       x: -b.width / 2 - k,
       y: -b.height / 2 - k,
       w: b.width + k * 2,
@@ -6957,11 +6957,11 @@ const xi = _e((d, o) => {
         n
       );
     });
-    const D = 0, M = v.y - u;
-    e.strokeStyle = "#3b82f6", e.lineWidth = 1, e.setLineDash([2, 2]), e.beginPath(), e.moveTo(D, M + 12), e.lineTo(D, v.y), e.stroke(), e.setLineDash([]), e.beginPath(), e.arc(D, M, 12, 0, 2 * Math.PI), e.fillStyle = "#f59e0b", e.fill(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.stroke(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.beginPath(), e.arc(D, M, 6, -Math.PI / 2, Math.PI, !1), e.stroke(), e.beginPath(), e.moveTo(D - 6, M), e.lineTo(D - 3, M - 3), e.lineTo(D - 3, M + 3), e.closePath(), e.fillStyle = "#ffffff", e.fill(), e.restore();
-  }, ge = (e, t) => {
+    const D = 0, L = v.y - m;
+    e.strokeStyle = "#3b82f6", e.lineWidth = 1, e.setLineDash([2, 2]), e.beginPath(), e.moveTo(D, L + 12), e.lineTo(D, v.y), e.stroke(), e.setLineDash([]), e.beginPath(), e.arc(D, L, 12, 0, 2 * Math.PI), e.fillStyle = "#f59e0b", e.fill(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.stroke(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.beginPath(), e.arc(D, L, 6, -Math.PI / 2, Math.PI, !1), e.stroke(), e.beginPath(), e.moveTo(D - 6, L), e.lineTo(D - 3, L - 3), e.lineTo(D - 3, L + 3), e.closePath(), e.fillStyle = "#ffffff", e.fill(), e.restore();
+  }, xe = (e, t) => {
     if (!t) return [];
-    const r = $t(e, t), n = t.isIcon ? Math.max(8, 12) : 8, h = 8, u = 30, b = (t.rotation || 0) * Math.PI / 180, k = {
+    const r = Ht(e, t), n = t.isIcon ? Math.max(8, 12) : 8, h = 8, m = 30, b = (t.rotation || 0) * Math.PI / 180, k = {
       x: -r.width / 2 - n,
       y: -r.height / 2 - n,
       w: r.width + n * 2,
@@ -6971,20 +6971,20 @@ const xi = _e((d, o) => {
       { x: k.x + k.w, y: k.y, type: "ne-resize" },
       { x: k.x + k.w, y: k.y + k.h, type: "se-resize" },
       { x: k.x, y: k.y + k.h, type: "sw-resize" },
-      { x: 0, y: k.y - u, type: "rotate" }
+      { x: 0, y: k.y - m, type: "rotate" }
     ], R = Math.cos(b), D = Math.sin(b);
-    return v.map((M) => ({
-      x: r.cx + (M.x * R - M.y * D),
-      y: r.cy + (M.x * D + M.y * R),
-      type: M.type,
-      size: M.type === "rotate" ? 24 : h
+    return v.map((L) => ({
+      x: r.cx + (L.x * R - L.y * D),
+      y: r.cy + (L.x * D + L.y * R),
+      type: L.type,
+      size: L.type === "rotate" ? 24 : h
     }));
-  }, Ht = (e, t, r) => {
+  }, Gt = (e, t, r) => {
     if (!r) return null;
     const n = gt.current;
     if (!n) return null;
-    const h = n.getContext("2d"), u = ge(h, r);
-    for (const b of u) {
+    const h = n.getContext("2d"), m = xe(h, r);
+    for (const b of m) {
       const k = e - b.x, v = t - b.y;
       if (Math.sqrt(k * k + v * v) <= b.size / 2)
         return b.type;
@@ -7000,7 +7000,7 @@ const xi = _e((d, o) => {
       const e = V[H + 1];
       y(e.elements), F(e.selectedElement), P(H + 1);
     }
-  }, [V, H]), ut = (e) => L ? Math.round(e / It) * It : e;
+  }, [V, H]), mt = (e) => M ? Math.round(e / It) * It : e;
   et(() => {
     if (j != null && j.sectionImage) {
       kt.current = null, wt.current = null;
@@ -7009,7 +7009,7 @@ const xi = _e((d, o) => {
         return;
       const t = new Image();
       t.crossOrigin = "anonymous", t.onload = () => {
-        kt.current = t, Jt(t, Y);
+        kt.current = t, Kt(t, Y);
       }, t.onerror = () => {
         console.error("Failed to load background image:", j.sectionImage), X();
       };
@@ -7024,7 +7024,7 @@ const xi = _e((d, o) => {
         if ((t.key === "Delete" || t.key === "Backspace") && g && !l) {
           t.preventDefault();
           const h = g;
-          y((u) => u.filter((b) => b.id !== h.id)), F(null), lt();
+          y((m) => m.filter((b) => b.id !== h.id)), F(null), lt();
         }
         if (t.ctrlKey || t.metaKey)
           switch (t.key) {
@@ -7041,14 +7041,14 @@ const xi = _e((d, o) => {
       document.removeEventListener("keydown", e);
     };
   }, [g, l, Ft, bt, lt]);
-  const xe = (e) => {
+  const ye = (e) => {
     const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
     return t ? {
       r: parseInt(t[1], 16),
       g: parseInt(t[2], 16),
       b: parseInt(t[3], 16)
     } : null;
-  }, ct = () => `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, ye = (e) => {
+  }, ct = () => `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, ue = (e) => {
     e.strokeStyle = "#e0e0e0", e.lineWidth = 1, e.setLineDash([1, 1]);
     for (let t = 0; t <= W; t += It)
       e.beginPath(), e.moveTo(t, 0), e.lineTo(t, U), e.stroke();
@@ -7060,62 +7060,62 @@ const xi = _e((d, o) => {
     const r = t.x + t.width / 2, n = t.y + t.height / 2;
     switch (e.translate(r, n), t.rotation && e.rotate(t.rotation * Math.PI / 180), e.translate(-t.width / 2, -t.height / 2), t.type) {
       case "text":
-        we(e, t);
+        be(e, t);
         break;
       case "rectangle":
-        be(e, t);
+        ve(e, t);
         break;
       case "circle":
-        ve(e, t);
+        ke(e, t);
         break;
       case "triangle":
-        ke(e, t);
+        Se(e, t);
         break;
       case "star":
-        Se(e, t);
+        Fe(e, t);
         break;
       case "arrow":
-        Fe(e, t);
+        Ce(e, t);
         break;
       case "diamond":
-        Ce(e, t);
+        Te(e, t);
         break;
       case "hexagon":
-        Te(e, t);
+        je(e, t);
         break;
       case "pentagon":
-        je(e, t);
+        Ne(e, t);
         break;
       case "heart":
-        Ne(e, t);
+        Ie(e, t);
         break;
       case "oval":
-        Ie(e, t);
+        Ae(e, t);
         break;
       case "roundedRectangle":
-        Ae(e, t);
+        Re(e, t);
         break;
       case "image":
-        De(e, t);
+        Ee(e, t);
         break;
       case "qrcode":
-        pe(e, t);
+        we(e, t);
         break;
       case "barcode":
-        ue(e, t);
+        pe(e, t);
         break;
       case "sticker":
-        Ee(e, t);
+        Be(e, t);
         break;
       case "horizontalLine":
-        Re(e, t);
+        De(e, t);
         break;
       case "embroidery":
-        Be(e, t);
+        ze(e, t);
         break;
     }
     e.restore();
-  }, ue = (e, t) => {
+  }, pe = (e, t) => {
     if (t.imageObject)
       e.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
@@ -7135,7 +7135,7 @@ const xi = _e((d, o) => {
         );
       }, r.src = t.src, e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading...", t.width / 2, t.height / 2);
     } else t.imageLoading ? (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading...", t.width / 2, t.height / 2)) : (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("No Barcode", t.width / 2, t.height / 2));
-  }, pe = (e, t) => {
+  }, we = (e, t) => {
     if (t.imageObject)
       e.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
@@ -7155,7 +7155,7 @@ const xi = _e((d, o) => {
         );
       }, r.src = t.src, e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading QR...", t.width / 2, t.height / 2);
     } else t.imageLoading ? (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading QR...", t.width / 2, t.height / 2)) : (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("No QR Data", t.width / 2, t.height / 2));
-  }, we = (e, t) => {
+  }, be = (e, t) => {
     e.save();
     let r = t.text || "Text";
     if (t.textTransform)
@@ -7172,23 +7172,23 @@ const xi = _e((d, o) => {
       }
     e.font = `${t.fontStyle || "normal"} ${t.fontWeight || "normal"} ${t.fontSize || 20}px ${t.fontFamily || "Arial"}`, e.fillStyle = t.fill || "#000000", e.textAlign = t.textAlign || "left", e.textBaseline = "top", t.opacity !== void 0 && (e.globalAlpha = t.opacity), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth);
     const n = r.split(`
-`), h = (t.fontSize || 20) * (t.lineHeight || 1.2), u = Math.max(...n.map((k) => e.measureText(k).width)), b = n.length * h;
+`), h = (t.fontSize || 20) * (t.lineHeight || 1.2), m = Math.max(...n.map((k) => e.measureText(k).width)), b = n.length * h;
     if (t.backgroundColor && t.backgroundColor !== "transparent") {
       e.fillStyle = t.backgroundColor;
       const k = t.backgroundPadding || 4;
       e.fillRect(
         -k,
         -k,
-        u + k * 2,
+        m + k * 2,
         b + k * 2
       ), e.fillStyle = t.fill || "#000000";
     }
     n.forEach((k, v) => {
       const R = v * h, D = e.measureText(k).width;
       t.stroke && t.strokeWidth > 0 && e.strokeText(k, 0, R), e.fillText(k, 0, R);
-      const M = t.fontSize || 20, tt = t.decorationColor || t.fill || "#000000", xt = Math.max(1, M / 20);
+      const L = t.fontSize || 20, tt = t.decorationColor || t.fill || "#000000", xt = Math.max(1, L / 20);
       if (e.strokeStyle = tt, e.lineWidth = xt, t.textDecoration === "underline" || t.underline) {
-        const pt = R + M + 2;
+        const pt = R + L + 2;
         e.beginPath(), e.moveTo(0, pt), e.lineTo(D, pt), e.stroke();
       }
       if (t.textDecoration === "overline" || t.overline) {
@@ -7196,106 +7196,106 @@ const xi = _e((d, o) => {
         e.beginPath(), e.moveTo(0, pt), e.lineTo(D, pt), e.stroke();
       }
       if (t.textDecoration === "line-through" || t.strikethrough) {
-        const pt = R + M / 2;
+        const pt = R + L / 2;
         e.beginPath(), e.moveTo(0, pt), e.lineTo(D, pt), e.stroke();
       }
-      typeof t.textDecoration == "string" && t.textDecoration.includes(" ") && t.textDecoration.split(" ").forEach((He) => {
-        switch (He.trim()) {
+      typeof t.textDecoration == "string" && t.textDecoration.includes(" ") && t.textDecoration.split(" ").forEach((Ge) => {
+        switch (Ge.trim()) {
           case "underline":
-            const ee = R + M + 2;
-            e.beginPath(), e.moveTo(0, ee), e.lineTo(D, ee), e.stroke();
+            const ie = R + L + 2;
+            e.beginPath(), e.moveTo(0, ie), e.lineTo(D, ie), e.stroke();
             break;
           case "overline":
-            const ie = R - 2;
-            e.beginPath(), e.moveTo(0, ie), e.lineTo(D, ie), e.stroke();
+            const oe = R - 2;
+            e.beginPath(), e.moveTo(0, oe), e.lineTo(D, oe), e.stroke();
             break;
           case "line-through":
-            const oe = R + M / 2;
-            e.beginPath(), e.moveTo(0, oe), e.lineTo(D, oe), e.stroke();
+            const re = R + L / 2;
+            e.beginPath(), e.moveTo(0, re), e.lineTo(D, re), e.stroke();
             break;
         }
       });
     }), e.restore();
-  }, be = (e, t) => {
-    t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fillRect(0, 0, t.width, t.height)), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.strokeRect(0, 0, t.width, t.height));
   }, ve = (e, t) => {
+    t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fillRect(0, 0, t.width, t.height)), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.strokeRect(0, 0, t.width, t.height));
+  }, ke = (e, t) => {
     const r = Math.min(t.width, t.height) / 2, n = t.width / 2, h = t.height / 2;
     e.beginPath(), e.arc(n, h, r, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
-  }, ke = (e, t) => {
+  }, Se = (e, t) => {
     const r = t.width / 2;
     t.height / 2, e.beginPath(), e.moveTo(r, 0), e.lineTo(0, t.height), e.lineTo(t.width, t.height), e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
-  }, Se = (e, t) => {
-    const r = t.width / 2, n = t.height / 2, h = Math.min(t.width, t.height) / 2, u = h * 0.4, b = t.numPoints || 5;
+  }, Fe = (e, t) => {
+    const r = t.width / 2, n = t.height / 2, h = Math.min(t.width, t.height) / 2, m = h * 0.4, b = t.numPoints || 5;
     e.beginPath();
     for (let k = 0; k < b * 2; k++) {
-      const v = k % 2 === 0 ? h : u, R = k * Math.PI / b, D = r + Math.cos(R) * v, M = n + Math.sin(R) * v;
-      k === 0 ? e.moveTo(D, M) : e.lineTo(D, M);
+      const v = k % 2 === 0 ? h : m, R = k * Math.PI / b, D = r + Math.cos(R) * v, L = n + Math.sin(R) * v;
+      k === 0 ? e.moveTo(D, L) : e.lineTo(D, L);
     }
     e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
-  }, Fe = (e, t) => {
+  }, Ce = (e, t) => {
     const r = t.width, n = t.height, h = r * 0.3;
     e.beginPath(), e.moveTo(r / 2, 0), e.lineTo(r, n * 0.6), e.lineTo(r - h, n * 0.6), e.lineTo(r - h, n), e.lineTo(h, n), e.lineTo(h, n * 0.6), e.lineTo(0, n * 0.6), e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
-  }, Ce = (e, t) => {
+  }, Te = (e, t) => {
     const r = t.width / 2, n = t.height / 2;
     e.beginPath(), e.moveTo(r, 0), e.lineTo(t.width, n), e.lineTo(r, t.height), e.lineTo(0, n), e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
-  }, Te = (e, t) => {
-    const r = t.width / 2, n = t.height / 2, h = Math.min(t.width, t.height) / 2, u = 6;
+  }, je = (e, t) => {
+    const r = t.width / 2, n = t.height / 2, h = Math.min(t.width, t.height) / 2, m = 6;
     e.beginPath();
-    for (let b = 0; b < u; b++) {
-      const k = b * 2 * Math.PI / u - Math.PI / 2, v = r + h * Math.cos(k), R = n + h * Math.sin(k);
+    for (let b = 0; b < m; b++) {
+      const k = b * 2 * Math.PI / m - Math.PI / 2, v = r + h * Math.cos(k), R = n + h * Math.sin(k);
       b === 0 ? e.moveTo(v, R) : e.lineTo(v, R);
     }
     e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
-  }, je = (e, t) => {
-    const r = t.width / 2, n = t.height / 2, h = Math.min(t.width, t.height) / 2, u = 5;
+  }, Ne = (e, t) => {
+    const r = t.width / 2, n = t.height / 2, h = Math.min(t.width, t.height) / 2, m = 5;
     e.beginPath();
-    for (let b = 0; b < u; b++) {
-      const k = b * 2 * Math.PI / u - Math.PI / 2, v = r + h * Math.cos(k), R = n + h * Math.sin(k);
+    for (let b = 0; b < m; b++) {
+      const k = b * 2 * Math.PI / m - Math.PI / 2, v = r + h * Math.cos(k), R = n + h * Math.sin(k);
       b === 0 ? e.moveTo(v, R) : e.lineTo(v, R);
     }
     e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
-  }, Ne = (e, t) => {
-    const r = t.width, n = t.height, h = 0, u = 0;
+  }, Ie = (e, t) => {
+    const r = t.width, n = t.height, h = 0, m = 0;
     e.beginPath();
     const b = n * 0.3;
-    e.moveTo(h + r / 2, u + b), e.bezierCurveTo(
+    e.moveTo(h + r / 2, m + b), e.bezierCurveTo(
       h + r / 2,
-      u,
+      m,
       h,
-      u,
+      m,
       h,
-      u + b
+      m + b
     ), e.bezierCurveTo(
       h,
-      u + (n + b) / 2,
+      m + (n + b) / 2,
       h + r / 2,
-      u + (n + b) / 2,
+      m + (n + b) / 2,
       h + r / 2,
-      u + n
+      m + n
     ), e.bezierCurveTo(
       h + r / 2,
-      u + (n + b) / 2,
+      m + (n + b) / 2,
       h + r,
-      u + (n + b) / 2,
+      m + (n + b) / 2,
       h + r,
-      u + b
+      m + b
     ), e.bezierCurveTo(
       h + r,
-      u,
+      m,
       h + r / 2,
-      u,
+      m,
       h + r / 2,
-      u + b
+      m + b
     ), e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
-  }, Ie = (e, t) => {
-    const r = t.width / 2, n = t.height / 2, h = t.width / 2, u = t.height / 2;
-    e.beginPath(), e.ellipse(r, n, h, u, 0, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Ae = (e, t) => {
+    const r = t.width / 2, n = t.height / 2, h = t.width / 2, m = t.height / 2;
+    e.beginPath(), e.ellipse(r, n, h, m, 0, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
+  }, Re = (e, t) => {
     const r = Math.min(t.width, t.height) * 0.1;
     At(e, 0, 0, t.width, t.height, r), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
-  }, Re = (e, t) => {
-    e.save(), t.opacity !== void 0 && (e.globalAlpha = t.opacity), e.strokeStyle = t.stroke || t.fill || "#000000", e.lineWidth = t.strokeWidth || t.height || 2, e.lineCap = "round", e.beginPath(), e.moveTo(0, t.height / 2), e.lineTo(t.width, t.height / 2), e.stroke(), e.restore();
   }, De = (e, t) => {
+    e.save(), t.opacity !== void 0 && (e.globalAlpha = t.opacity), e.strokeStyle = t.stroke || t.fill || "#000000", e.lineWidth = t.strokeWidth || t.height || 2, e.lineCap = "round", e.beginPath(), e.moveTo(0, t.height / 2), e.lineTo(t.width, t.height / 2), e.stroke(), e.restore();
+  }, Ee = (e, t) => {
     const r = t.src || t.imageData;
     if (r)
       try {
@@ -7324,17 +7324,38 @@ const xi = _e((d, o) => {
       }
     else
       e.fillStyle = "#f8f8f8", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ddd", e.lineWidth = 1, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#999", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("No Image", t.width / 2, t.height / 2);
-  }, Ee = (e, t) => {
-    if (t.src && !t.imageLoading && !t.loadedImage) {
-      t.imageLoading = !0;
-      const r = new Image();
-      r.crossOrigin = "anonymous", r.onload = () => {
-        t.loadedImage = r, t.imageLoading = !1, X();
-      }, r.onerror = () => {
-        console.error("Failed to load sticker:", t.src), t.imageLoading = !1, e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.fillText("Failed to load", t.width / 2, t.height / 2);
-      }, r.src = t.src;
-    } else t.loadedImage ? e.drawImage(t.loadedImage, 0, 0, t.width, t.height) : t.imageLoading && (e.fillStyle = "#f8f9fa", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#dee2e6", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#6c757d", e.font = "12px Arial", e.textAlign = "center", e.fillText("Loading...", t.width / 2, t.height / 2));
   }, Be = (e, t) => {
+    const r = t.src;
+    if (r)
+      try {
+        if (r instanceof HTMLImageElement) {
+          if (r.complete && r.naturalWidth > 0 && r.naturalHeight > 0) {
+            e.drawImage(r, 0, 0, t.width, t.height);
+            return;
+          }
+        } else if (typeof r == "string" && r.length > 0) {
+          if (t._stickerElement || (t._stickerElement = new Image(), t._stickerElement.crossOrigin = "anonymous", t._stickerElement.onload = () => {
+            X();
+          }, t._stickerElement.onerror = () => {
+            console.error("Failed to load sticker:", r), t._stickerLoadError = !0, X();
+          }, t._stickerElement.src = r), t._stickerElement.complete && t._stickerElement.naturalWidth > 0 && t._stickerElement.naturalHeight > 0) {
+            e.drawImage(t._stickerElement, 0, 0, t.width, t.height);
+            return;
+          }
+          if (t._stickerLoadError) {
+            Rt(e, t, "Failed to load", !0);
+            return;
+          }
+        }
+        Rt(e, t, "Loading...");
+      } catch (n) {
+        console.error("Error drawing sticker:", n), Rt(e, t, "Error", !0);
+      }
+    else
+      Rt(e, t, "No Sticker");
+  }, Rt = (e, t, r, n = !1) => {
+    e.fillStyle = n ? "#ffebee" : "#f8f9fa", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = n ? "#f44336" : "#dee2e6", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = n ? "#f44336" : "#6c757d", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText(r, t.width / 2, t.height / 2);
+  }, ze = (e, t) => {
     if (t.imageObject && t.imageObject.complete && t.imageObject.naturalHeight !== 0)
       try {
         e.drawImage(t.imageObject, 0, 0, t.width, t.height);
@@ -7352,11 +7373,11 @@ const xi = _e((d, o) => {
     } else t.imageLoading ? Ct(e, t, "Loading...") : Ct(e, t);
   }, Ct = (e, t, r = "Embroidery") => {
     e.fillStyle = "#f9f9f9", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ddd", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#999", e.font = "24px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("🧵", t.width / 2, t.height / 2 - 10), e.fillStyle = "#666", e.font = "12px Arial", e.fillText(r, t.width / 2, t.height / 2 + 15);
-  }, Gt = (e, t, r) => {
+  }, _t = (e, t, r) => {
     if (!r) return !1;
-    const n = r.x + r.width / 2, h = r.y + r.height / 2, u = e - n, b = t - h, k = -(r.rotation || 0) * Math.PI / 180, v = Math.cos(k), R = Math.sin(k), D = u * v - b * R, M = u * R + b * v, tt = r.width / 2, xt = r.height / 2;
-    return D >= -tt && D <= tt && M >= -xt && M <= xt;
-  }, ze = ot(() => {
+    const n = r.x + r.width / 2, h = r.y + r.height / 2, m = e - n, b = t - h, k = -(r.rotation || 0) * Math.PI / 180, v = Math.cos(k), R = Math.sin(k), D = m * v - b * R, L = m * R + b * v, tt = r.width / 2, xt = r.height / 2;
+    return D >= -tt && D <= tt && L >= -xt && L <= xt;
+  }, We = ot(() => {
     (C || I || w) && lt(), p(!1), T(!1), z(!1), B(null);
     const e = gt.current;
     e && (e.style.cursor = "default");
@@ -7365,30 +7386,30 @@ const xi = _e((d, o) => {
     const e = (t) => {
       if (l) return;
       const r = document.activeElement;
-      if (!(r && (r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.tagName === "SELECT" || r.isContentEditable)) && ((t.ctrlKey || t.metaKey) && (t.key === "z" && !t.shiftKey ? (t.preventDefault(), Ft()) : (t.key === "z" && t.shiftKey || t.key === "y") && (t.preventDefault(), bt())), (t.key === "Delete" || t.key === "Backspace") && g && (Wt(g.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && g && (Yt(g.id), t.preventDefault()), g && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key))) {
+      if (!(r && (r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.tagName === "SELECT" || r.isContentEditable)) && ((t.ctrlKey || t.metaKey) && (t.key === "z" && !t.shiftKey ? (t.preventDefault(), Ft()) : (t.key === "z" && t.shiftKey || t.key === "y") && (t.preventDefault(), bt())), (t.key === "Delete" || t.key === "Backspace") && g && (Mt(g.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && g && (qt(g.id), t.preventDefault()), g && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key))) {
         t.preventDefault();
         const h = t.shiftKey ? 10 : 1;
-        let u = {};
+        let m = {};
         switch (t.key) {
           case "ArrowUp":
-            u.y = g.y - h;
+            m.y = g.y - h;
             break;
           case "ArrowDown":
-            u.y = g.y + h;
+            m.y = g.y + h;
             break;
           case "ArrowLeft":
-            u.x = g.x - h;
+            m.x = g.x - h;
             break;
           case "ArrowRight":
-            u.x = g.x + h;
+            m.x = g.x + h;
             break;
         }
-        _t(g.id, u), lt();
+        Yt(g.id, m), lt();
       }
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
   }, [g, Ft, bt, l]);
-  const We = (e, t = {}) => {
+  const Me = (e, t = {}) => {
     const r = {
       id: ct(),
       type: e,
@@ -7444,13 +7465,13 @@ const xi = _e((d, o) => {
         return;
     }
     y((n) => [...n, r]), F(r), lt();
-  }, _t = (e, t) => {
+  }, Yt = (e, t) => {
     y((r) => r.map(
       (n) => n.id === e ? { ...n, ...t } : n
     )), g && g.id === e && F((r) => ({ ...r, ...t }));
-  }, Wt = ot(() => {
+  }, Mt = ot(() => {
     g && (y((e) => e.filter((t) => t.id !== g.id)), F(null), lt());
-  }, [g, lt]), Yt = (e) => {
+  }, [g, lt]), qt = (e) => {
     const t = c.find((r) => r.id === e);
     if (t) {
       const r = {
@@ -7461,8 +7482,8 @@ const xi = _e((d, o) => {
       };
       y((n) => [...n, r]), F(r), lt();
     }
-  }, qt = (e, t) => {
-    const r = c.findIndex((u) => u.id === e);
+  }, Vt = (e, t) => {
+    const r = c.findIndex((m) => m.id === e);
     if (r === -1) return;
     const n = [...c], h = n[r];
     t === "up" && r < n.length - 1 ? (n[r] = n[r + 1], n[r + 1] = h) : t === "down" && r > 0 ? (n[r] = n[r - 1], n[r - 1] = h) : t === "top" ? (n.splice(r, 1), n.push(h)) : t === "bottom" && (n.splice(r, 1), n.unshift(h)), y(n), lt();
@@ -7476,11 +7497,11 @@ const xi = _e((d, o) => {
       }
     }));
   }, [j, c, Y]);
-  const [, Le] = Ye((e) => e + 1, 0);
+  const [, Le] = qe((e) => e + 1, 0);
   setTimeout(() => {
     Le();
   }, 20);
-  const Me = ot(() => {
+  const Pe = ot(() => {
     j && Z((e) => ({
       ...e,
       [j.sectionName]: {
@@ -7489,14 +7510,14 @@ const xi = _e((d, o) => {
       }
     }));
   }, [j, c, Y]);
-  qe(o, () => ({
-    handleSectionChange: Vt,
-    flushCurrentSectionDesign: Me,
+  Ve(o, () => ({
+    handleSectionChange: Xt,
+    flushCurrentSectionDesign: Pe,
     // Export methods that return download-ready data
-    exportPrintReady: async (e = "png") => await zt(e, !1),
-    exportFullDesign: async (e = "png") => await zt(e, !0),
+    exportPrintReady: async (e = "png") => await Wt(e, !1),
+    exportFullDesign: async (e = "png") => await Wt(e, !0),
     // Access to the existing exportDesign method
-    exportDesign: zt,
+    exportDesign: Wt,
     // Get canvas data for custom exports
     getCanvasData: () => St(),
     // NEW: Export methods that return JSON with File objects
@@ -7510,15 +7531,15 @@ const xi = _e((d, o) => {
         }, h = {
           ...t.sectionDesigns || {},
           [r]: n
-        }, u = s.sections && s.sections.length > 0 ? s.sections : [{
+        }, m = s.sections && s.sections.length > 0 ? s.sections : [{
           id: r,
           sectionName: r,
           image: j == null ? void 0 : j.sectionImage,
           sectionImage: j == null ? void 0 : j.sectionImage
         }];
-        return await Et.current.exportAllSectionsAsJSON(
+        return await Bt.current.exportAllSectionsAsJSON(
           h,
-          u,
+          m,
           W,
           U,
           e,
@@ -7531,23 +7552,23 @@ const xi = _e((d, o) => {
     exportCurrentSectionAsJSON: async (e = "png") => {
       try {
         const t = St();
-        return await Et.current.exportCurrentSectionAsJSON(t, e, yt);
+        return await Bt.current.exportCurrentSectionAsJSON(t, e, yt);
       } catch (t) {
         throw console.error("Export current section as JSON failed:", t), t;
       }
     }
   }));
-  const mt = dt(null), Lt = dt(!1), X = ot(() => {
+  const ut = dt(null), Lt = dt(!1), X = ot(() => {
     const e = gt.current;
     if (!e || Lt.current) return;
     Lt.current = !0;
     const t = e.getContext("2d");
-    t.clearRect(0, 0, W, U), wt.current && t.drawImage(wt.current, 0, 0, W, U), J && ye(t), c.forEach((r) => {
+    t.clearRect(0, 0, W, U), wt.current && t.drawImage(wt.current, 0, 0, W, U), J && ue(t), c.forEach((r) => {
       t.save(), t.globalAlpha = r.opacity || 1, me(t, r), t.restore();
-    }), g && he(t, g), Lt.current = !1;
+    }), g && ge(t, g), Lt.current = !1;
   }, [c, g, W, U, J]), vt = ot(() => {
-    mt.current && cancelAnimationFrame(mt.current), mt.current = requestAnimationFrame(() => {
-      X(), mt.current = null;
+    ut.current && cancelAnimationFrame(ut.current), ut.current = requestAnimationFrame(() => {
+      X(), ut.current = null;
     });
   }, [X]);
   et(() => {
@@ -7555,19 +7576,19 @@ const xi = _e((d, o) => {
   }, [c, g, W, U, J, vt]), et(() => {
     wt.current && vt();
   }, [wt.current, vt]), et(() => () => {
-    mt.current && cancelAnimationFrame(mt.current);
+    ut.current && cancelAnimationFrame(ut.current);
   }, []);
-  const Mt = ot(() => {
-    X(), (C || I || w) && (mt.current = requestAnimationFrame(Mt));
+  const Pt = ot(() => {
+    X(), (C || I || w) && (ut.current = requestAnimationFrame(Pt));
   }, [X, C, I, w]);
   et(() => {
-    C || I || w ? Mt() : (mt.current && (cancelAnimationFrame(mt.current), mt.current = null), vt());
-  }, [C, I, w, Mt, vt]);
-  const Pe = ot((e) => {
+    C || I || w ? Pt() : (ut.current && (cancelAnimationFrame(ut.current), ut.current = null), vt());
+  }, [C, I, w, Pt, vt]);
+  const Ue = ot((e) => {
     if (l) return;
     const r = gt.current.getBoundingClientRect(), n = (e.clientX - r.left) / q, h = (e.clientY - r.top) / q;
     if (S({ x: n, y: h }), g) {
-      const b = Ht(n, h, g);
+      const b = Gt(n, h, g);
       if (b) {
         if (b === "rotate") {
           z(!0);
@@ -7590,59 +7611,59 @@ const xi = _e((d, o) => {
         return;
       }
     }
-    let u = null;
+    let m = null;
     for (let b = c.length - 1; b >= 0; b--)
-      if (Gt(n, h, c[b])) {
-        u = c[b];
+      if (_t(n, h, c[b])) {
+        m = c[b];
         break;
       }
-    u ? (F(u), p(!0), S({
+    m ? (F(m), p(!0), S({
       x: n,
       y: h,
-      offsetX: n - u.x,
-      offsetY: h - u.y
+      offsetX: n - m.x,
+      offsetY: h - m.y
     })) : F(null), X();
-  }, [l, q, g, c, X]), Ue = ot((e) => {
+  }, [l, q, g, c, X]), Oe = ot((e) => {
     if (l) return;
     const t = gt.current, r = t.getBoundingClientRect(), n = (e.clientX - r.left) / q, h = (e.clientY - r.top) / q;
     if (g && !C && !I && !w) {
-      const u = Ht(n, h, g);
-      u ? u === "rotate" ? t.style.cursor = "grab" : t.style.cursor = u : Gt(n, h, g) ? t.style.cursor = "move" : t.style.cursor = "default";
+      const m = Gt(n, h, g);
+      m ? m === "rotate" ? t.style.cursor = "grab" : t.style.cursor = m : _t(n, h, g) ? t.style.cursor = "move" : t.style.cursor = "default";
     } else
       t.style.cursor = C ? "grabbing" : "default";
     if (w && g) {
-      const u = g.x + g.width / 2, b = g.y + g.height / 2, v = Math.atan2(h - b, n - u) * 180 / Math.PI - E.initialAngle;
+      const m = g.x + g.width / 2, b = g.y + g.height / 2, v = Math.atan2(h - b, n - m) * 180 / Math.PI - E.initialAngle;
       let R = E.initialRotation + v;
       e.shiftKey && (R = Math.round(R / 15) * 15), R = (R % 360 + 360) % 360, y(
         (D) => D.map(
-          (M) => M.id === g.id ? { ...M, rotation: R } : M
+          (L) => L.id === g.id ? { ...L, rotation: R } : L
         )
       ), F((D) => ({ ...D, rotation: R })), X();
       return;
     }
     if (I && g && $) {
-      const u = n - E.x, b = h - E.y;
+      const m = n - E.x, b = h - E.y;
       let k = E.initialWidth, v = E.initialHeight, R = E.initialX, D = E.initialY;
       switch ($) {
         case "se-resize":
-          k = Math.max(20, E.initialWidth + u), v = Math.max(20, E.initialHeight + b);
+          k = Math.max(20, E.initialWidth + m), v = Math.max(20, E.initialHeight + b);
           break;
         case "sw-resize":
-          k = Math.max(20, E.initialWidth - u), v = Math.max(20, E.initialHeight + b), R = E.initialX + (E.initialWidth - k);
+          k = Math.max(20, E.initialWidth - m), v = Math.max(20, E.initialHeight + b), R = E.initialX + (E.initialWidth - k);
           break;
         case "ne-resize":
-          k = Math.max(20, E.initialWidth + u), v = Math.max(20, E.initialHeight - b), D = E.initialY + (E.initialHeight - v);
+          k = Math.max(20, E.initialWidth + m), v = Math.max(20, E.initialHeight - b), D = E.initialY + (E.initialHeight - v);
           break;
         case "nw-resize":
-          k = Math.max(20, E.initialWidth - u), v = Math.max(20, E.initialHeight - b), R = E.initialX + (E.initialWidth - k), D = E.initialY + (E.initialHeight - v);
+          k = Math.max(20, E.initialWidth - m), v = Math.max(20, E.initialHeight - b), R = E.initialX + (E.initialWidth - k), D = E.initialY + (E.initialHeight - v);
           break;
       }
       if (e.shiftKey && g.type !== "text") {
         const tt = E.initialWidth / E.initialHeight;
         $.includes("e"), v = k / tt, $.includes("n") && (D = E.initialY + (E.initialHeight - v));
       }
-      L && (R = ut(R), D = ut(D), k = ut(k), v = ut(v));
-      const M = {
+      M && (R = mt(R), D = mt(D), k = mt(k), v = mt(v));
+      const L = {
         ...g,
         x: R,
         y: D,
@@ -7651,17 +7672,17 @@ const xi = _e((d, o) => {
       };
       y(
         (tt) => tt.map(
-          (xt) => xt.id === g.id ? M : xt
+          (xt) => xt.id === g.id ? L : xt
         )
-      ), F(M), X();
+      ), F(L), X();
       return;
     }
     if (C && g) {
-      let u = n - E.offsetX, b = h - E.offsetY;
-      L && (u = ut(u), b = ut(b)), u = Math.max(0, Math.min(W - g.width, u)), b = Math.max(0, Math.min(U - g.height, b));
+      let m = n - E.offsetX, b = h - E.offsetY;
+      M && (m = mt(m), b = mt(b)), m = Math.max(0, Math.min(W - g.width, m)), b = Math.max(0, Math.min(U - g.height, b));
       const k = {
         ...g,
-        x: u,
+        x: m,
         y: b
       };
       y(
@@ -7670,7 +7691,7 @@ const xi = _e((d, o) => {
         )
       ), F(k), X();
     }
-  }, [l, q, g, C, I, w, $, E, L, W, U, c, X]), Vt = ot((e) => {
+  }, [l, q, g, C, I, w, $, E, M, W, U, c, X]), Xt = ot((e) => {
     j && Z((r) => ({
       ...r,
       [j.sectionName]: {
@@ -7690,7 +7711,7 @@ const xi = _e((d, o) => {
           const h = new Image();
           return h.onload = () => {
             y(
-              (u) => u.map(
+              (m) => m.map(
                 (b) => b.id === n.id ? { ...b, imageData: h } : b
               )
             ), X();
@@ -7701,8 +7722,8 @@ const xi = _e((d, o) => {
       y(r), O(t.selectedColor || Y);
     } else
       y([]);
-    m(e), F(null);
-  }, [j, c, Y, _, X]), Oe = ot((e) => {
+    u(e), F(null);
+  }, [j, c, Y, _, X]), Qe = ot((e) => {
     if (e && e.type.startsWith("image/")) {
       const t = new FileReader();
       t.onload = (r) => {
@@ -7711,8 +7732,8 @@ const xi = _e((d, o) => {
           const h = {
             id: ct(),
             type: "image",
-            x: ut(W / 2 - 100),
-            y: ut(U / 2 - 100),
+            x: mt(W / 2 - 100),
+            y: mt(U / 2 - 100),
             width: Math.min(n.width, 200),
             // Limit initial size
             height: Math.min(n.height, 200),
@@ -7721,8 +7742,8 @@ const xi = _e((d, o) => {
             src: r.target.result,
             originalWidth: n.width,
             originalHeight: n.height
-          }, u = n.width / n.height;
-          h.width / h.height !== u && (h.width / u <= 200 ? h.height = h.width / u : h.width = h.height * u), y((b) => [...b, h]), F(h), lt();
+          }, m = n.width / n.height;
+          h.width / h.height !== m && (h.width / m <= 200 ? h.height = h.width / m : h.width = h.height * m), y((b) => [...b, h]), F(h), lt();
         }, n.onerror = () => {
           console.error("Failed to load uploaded image"), alert("Failed to load the uploaded image. Please try again.");
         }, n.src = r.target.result;
@@ -7731,57 +7752,57 @@ const xi = _e((d, o) => {
       }, t.readAsDataURL(e);
     } else
       alert("Please select a valid image file.");
-  }, [W, U, ut, ct, lt]), Xt = ot(
-    Qe(() => {
+  }, [W, U, mt, ct, lt]), Jt = ot(
+    $e(() => {
       X();
     }, 16),
     // 60fps limit
     [X]
   );
   et(() => {
-    Bt.current || Xt();
-  }, [c, g, J, Xt]);
-  function Qe(e, t) {
+    zt.current || Jt();
+  }, [c, g, J, Jt]);
+  function $e(e, t) {
     let r;
     return function(...h) {
-      const u = () => {
+      const m = () => {
         clearTimeout(r), e(...h);
       };
-      clearTimeout(r), r = setTimeout(u, t);
+      clearTimeout(r), r = setTimeout(m, t);
     };
   }
   et(() => {
-    kt.current && Jt(kt.current, Y);
+    kt.current && Kt(kt.current, Y);
   }, [Y]), et(() => {
     X();
   }, [X]);
-  const $e = (e, t, r) => (0.2126 * e + 0.7152 * t + 0.0722 * r) / 255, Jt = ot((e, t) => {
-    const r = Ut.current, n = r.getContext("2d");
+  const He = (e, t, r) => (0.2126 * e + 0.7152 * t + 0.0722 * r) / 255, Kt = ot((e, t) => {
+    const r = Ot.current, n = r.getContext("2d");
     r.width = W, r.height = U, n.clearRect(0, 0, W, U), n.drawImage(e, 0, 0, W, U);
-    const h = n.getImageData(0, 0, W, U), u = h.data, b = xe(t);
+    const h = n.getImageData(0, 0, W, U), m = h.data, b = ye(t);
     if (!b) {
-      Bt.current = !1;
+      zt.current = !1;
       return;
     }
     const { r: k, g: v, b: R } = b;
-    for (let M = 0; M < u.length; M += 4) {
-      if (u[M + 3] === 0) continue;
-      const xt = $e(u[M], u[M + 1], u[M + 2]);
-      u[M] = Math.round(k * xt), u[M + 1] = Math.round(v * xt), u[M + 2] = Math.round(R * xt);
+    for (let L = 0; L < m.length; L += 4) {
+      if (m[L + 3] === 0) continue;
+      const xt = He(m[L], m[L + 1], m[L + 2]);
+      m[L] = Math.round(k * xt), m[L + 1] = Math.round(v * xt), m[L + 2] = Math.round(R * xt);
     }
     n.putImageData(h, 0, 0);
     const D = new Image();
     D.onload = () => {
-      wt.current = s.plainColor === "Y" ? D : e, Bt.current = !1, X();
+      wt.current = s.plainColor === "Y" ? D : e, zt.current = !1, X();
     }, D.src = r.toDataURL("image/png");
-  }, [W, U, X]), Kt = (e) => {
+  }, [W, U, X]), Zt = (e) => {
     if (!K) return { horizontal: [], vertical: [] };
     const t = document.querySelector(".ruler-horizontal"), r = document.querySelector(".ruler-vertical");
     if (!t || !r)
       return { horizontal: [], vertical: [] };
-    const n = t.getBoundingClientRect(), h = r.getBoundingClientRect(), u = n.width, b = h.height, k = 50, v = [], R = [];
-    for (let D = k; D <= u; D += k)
-      D <= u - 20 && v.push({
+    const n = t.getBoundingClientRect(), h = r.getBoundingClientRect(), m = n.width, b = h.height, k = 50, v = [], R = [];
+    for (let D = k; D <= m; D += k)
+      D <= m - 20 && v.push({
         position: D,
         value: Math.round(D / e)
       });
@@ -7791,12 +7812,12 @@ const xi = _e((d, o) => {
         value: Math.round(D / e)
       });
     return { horizontal: v, vertical: R };
-  }, [Zt, te] = N({ horizontal: [], vertical: [] });
+  }, [te, ee] = N({ horizontal: [], vertical: [] });
   return et(() => {
     const e = () => {
       setTimeout(() => {
-        const n = Kt(q);
-        te(n);
+        const n = Zt(q);
+        ee(n);
       }, 50);
     };
     e();
@@ -7810,29 +7831,29 @@ const xi = _e((d, o) => {
   }, [q, K]), et(() => {
     if (K && !A) {
       const e = setTimeout(() => {
-        const t = Kt(q);
-        te(t);
+        const t = Zt(q);
+        ee(t);
       }, 100);
       return () => clearTimeout(e);
     }
   }, [K, A, q]), /* @__PURE__ */ i.jsxs("div", { className: "pure-canvas-designer", children: [
     /* @__PURE__ */ i.jsx("div", { className: "designer-header", children: /* @__PURE__ */ i.jsx(
-      ci,
+      di,
       {
-        onAddElement: We,
-        onDeleteElement: () => g && Wt(g.id),
-        onDuplicateElement: () => g && Yt(g.id),
+        onAddElement: Me,
+        onDeleteElement: () => g && Mt(g.id),
+        onDuplicateElement: () => g && qt(g.id),
         onUndo: Ft,
         onRedo: bt,
         onToggleGrid: () => st(!J),
         onToggleRulers: () => it(!K),
-        onToggleSnap: () => G(!L),
-        onImageUpload: Oe,
+        onToggleSnap: () => G(!M),
+        onImageUpload: Qe,
         canUndo: H > 0,
         canRedo: H < V.length - 1,
         showGrid: J,
         showRulers: K,
-        snapToGrid: L,
+        snapToGrid: M,
         selectedElement: g,
         theme: a,
         readOnly: l,
@@ -7842,7 +7863,7 @@ const xi = _e((d, o) => {
     ) }),
     /* @__PURE__ */ i.jsxs("div", { className: "designer-content", children: [
       K && !A && /* @__PURE__ */ i.jsxs("div", { className: "rulers", children: [
-        /* @__PURE__ */ i.jsx("div", { className: "ruler-horizontal", children: /* @__PURE__ */ i.jsx("div", { className: "ruler-horizontal-numbers", children: Zt.horizontal.map((e, t) => /* @__PURE__ */ i.jsx(
+        /* @__PURE__ */ i.jsx("div", { className: "ruler-horizontal", children: /* @__PURE__ */ i.jsx("div", { className: "ruler-horizontal-numbers", children: te.horizontal.map((e, t) => /* @__PURE__ */ i.jsx(
           "span",
           {
             className: "ruler-number horizontal",
@@ -7851,7 +7872,7 @@ const xi = _e((d, o) => {
           },
           t
         )) }) }),
-        /* @__PURE__ */ i.jsx("div", { className: "ruler-vertical", children: /* @__PURE__ */ i.jsx("div", { className: "ruler-vertical-numbers", children: Zt.vertical.map((e, t) => /* @__PURE__ */ i.jsx(
+        /* @__PURE__ */ i.jsx("div", { className: "ruler-vertical", children: /* @__PURE__ */ i.jsx("div", { className: "ruler-vertical-numbers", children: te.vertical.map((e, t) => /* @__PURE__ */ i.jsx(
           "span",
           {
             className: "ruler-number vertical",
@@ -7861,15 +7882,15 @@ const xi = _e((d, o) => {
           t
         )) }) })
       ] }),
-      /* @__PURE__ */ i.jsx("div", { className: "canvas-container", ref: Dt, children: /* @__PURE__ */ i.jsx(
+      /* @__PURE__ */ i.jsx("div", { className: "canvas-container", ref: Et, children: /* @__PURE__ */ i.jsx(
         "canvas",
         {
           ref: gt,
           width: W,
           height: U,
-          onMouseDown: Pe,
-          onMouseMove: Ue,
-          onMouseUp: ze,
+          onMouseDown: Ue,
+          onMouseMove: Oe,
+          onMouseUp: We,
           style: {
             border: "1px solid #e2e8f0",
             cursor: C ? "grabbing" : "default",
@@ -7880,23 +7901,23 @@ const xi = _e((d, o) => {
       ) }),
       /* @__PURE__ */ i.jsxs("div", { className: "side-panels", children: [
         /* @__PURE__ */ i.jsx(
-          di,
+          fi,
           {
             selectedElement: g,
-            onUpdate: _t,
-            onMoveLayer: qt,
-            availableFonts: fe,
+            onUpdate: Yt,
+            onMoveLayer: Vt,
+            availableFonts: he,
             theme: a
           }
         ),
         /* @__PURE__ */ i.jsx(
-          fi,
+          hi,
           {
             elements: c,
             selectedElement: g,
             onSelectElement: F,
-            onMoveLayer: qt,
-            onDeleteElement: Wt,
+            onMoveLayer: Vt,
+            onDeleteElement: Mt,
             theme: a
           }
         )
@@ -7917,7 +7938,7 @@ const xi = _e((d, o) => {
               onClick: (r) => {
                 r.stopPropagation();
                 const n = s.sections.find((h) => h.sectionName === e.sectionName);
-                Vt(n);
+                Xt(n);
               },
               title: e.sectionName,
               children: [
@@ -8077,7 +8098,7 @@ const xi = _e((d, o) => {
     ] })
   ] });
 });
-xi.displayName = "Mypixia";
+yi.displayName = "Mypixia";
 export {
-  xi as default
+  yi as default
 };