@mypixia/simplex-designer 2.1.1 → 2.1.3

package/dist/index.es.js

@@ -1,8 +1,8 @@
-import _e, { useState as N, useRef as nt, useEffect as et, useMemo as re, forwardRef as Ye, useCallback as ot, useReducer as qe, useImperativeHandle as Ve } from "react";
+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 ae from "axios";
-import './index_external.css';var Rt = { exports: {} }, Tt = {};
+import se from "axios";
+import './index_external.css';var Dt = { exports: {} }, Tt = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -12,24 +12,24 @@ 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;
+var le;
 function Ke() {
-  if (se) return Tt;
-  se = 1;
+  if (le) return Tt;
+  le = 1;
   var d = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
-  function a(l, s, h) {
-    var y = null;
-    if (h !== void 0 && (y = "" + h), s.key !== void 0 && (y = "" + s.key), "key" in s) {
-      h = {};
+  function a(l, s, f) {
+    var x = null;
+    if (f !== void 0 && (x = "" + f), s.key !== void 0 && (x = "" + s.key), "key" in s) {
+      f = {};
       for (var c in s)
-        c !== "key" && (h[c] = s[c]);
-    } else h = s;
-    return s = h.ref, {
+        c !== "key" && (f[c] = s[c]);
+    } else f = s;
+    return s = f.ref, {
       $$typeof: d,
       type: l,
-      key: y,
+      key: x,
       ref: s !== void 0 ? s : null,
-      props: h
+      props: f
     };
   }
   return Tt.Fragment = o, Tt.jsx = a, Tt.jsxs = a, Tt;
@@ -44,20 +44,20 @@ 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;
+var ne;
 function Ze() {
-  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) {
+  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:
           return "Profiler";
-        case z:
+        case B:
           return "StrictMode";
         case W:
           return "Suspense";
@@ -66,126 +66,126 @@ function Ze() {
         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";
-          case B:
-            var A = m.render;
-            return m = m.displayName, m || (m = A.displayName || A.name || "", m = m !== "" ? "ForwardRef(" + m + ")" : "ForwardRef"), m;
+            return (u._context.displayName || "Context") + ".Consumer";
+          case z:
+            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 h() {
+    function f() {
       return Error("react-stack-top-frame");
     }
-    function y(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 u() {
-      var m = d(this.type);
-      return it[m] || (it[m] = !0, console.error(
+    function y() {
+      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 x(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: u
-      }) : Object.defineProperty(m, "ref", { enumerable: !1, value: null }), m._store = {}, Object.defineProperty(m._store, "validated", {
+        get: y
+      }) : 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,11 +199,11 @@ function Ze() {
             );
         else C(P);
       if (O.call(A, "key")) {
-        P = d(m);
-        var ct = Object.keys(A).filter(function(Dt) {
-          return Dt !== "key";
+        P = d(u);
+        var nt = Object.keys(A).filter(function(Et) {
+          return Et !== "key";
         });
-        _ = 0 < ct.length ? "{key: someKey, " + ct.join(": ..., ") + ": ...}" : "{key: someKey}", j[P + _] || (ct = 0 < ct.length ? "{" + ct.join(": ..., ") + ": ...}" : "{}", console.error(
+        _ = 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:
   let props = %s;
   <%s {...props} />
@@ -212,20 +212,20 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           _,
           P,
-          ct,
+          nt,
           P
         ), j[P + _] = !0);
       }
-      if (P = null, Q !== void 0 && (a(Q), P = "" + Q), y(A) && (a(A.key), P = "" + A.key), "key" in A) {
+      if (P = null, Q !== void 0 && (a(Q), P = "" + Q), x(A) && (a(A.key), P = "" + A.key), "key" in A) {
         Q = {};
         for (var gt in A)
           gt !== "key" && (Q[gt] = A[gt]);
       } else Q = A;
       return P && c(
         Q,
-        typeof m == "function" ? m.displayName || m.name || "Unknown" : m
-      ), x(
-        m,
+        typeof u == "function" ? u.displayName || u.name || "Unknown" : u
+      ), g(
+        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 = _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() {
+    var p = _e, I = Symbol.for("react.transitional.element"), T = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), B = Symbol.for("react.strict_mode"), E = Symbol.for("react.profiler"), S = Symbol.for("react.consumer"), $ = Symbol.for("react.context"), z = 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 = {}, M = p["react-stack-bottom-frame"].bind(
       p,
-      h
-    )(), G = st(l(h)), j = {};
-    jt.Fragment = w, jt.jsx = function(m, A, Q, _, Z) {
+      f
+    )(), G = st(l(f)), j = {};
+    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") : M,
-        V ? st(l(m)) : G
+        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") : M,
-        V ? st(l(m)) : G
+        V ? st(l(u)) : G
       );
     };
   }()), jt;
 }
-var ne;
+var ce;
 function ti() {
-  return ne || (ne = 1, process.env.NODE_ENV === "production" ? Rt.exports = Ke() : Rt.exports = Ze()), Rt.exports;
+  return ce || (ce = 1, process.env.NODE_ENV === "production" ? Dt.exports = Ke() : Dt.exports = Ze()), Dt.exports;
 }
 var i = ti();
-const Pt = {
+const Ut = {
   business: {
     name: "Business & Office",
     icons: [
@@ -373,32 +373,32 @@ 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
   }))
-), ei = (d) => de().filter(
+), ei = (d) => fe().filter(
   (a) => a.name.toLowerCase().includes(d.toLowerCase()) || a.category.toLowerCase().includes(d.toLowerCase())
 ), ii = ({ onSelectIcon: d, disabled: o = !1 }) => {
-  const [a, l] = N(!1), [s, h] = N(""), [y, c] = N("all"), u = nt(null);
+  const [a, l] = N(!1), [s, f] = N(""), [x, c] = N("all"), y = dt(null);
   et(() => {
     const p = (I) => {
-      u.current && !u.current.contains(I.target) && l(!1);
+      y.current && !y.current.contains(I.target) && l(!1);
     };
     return document.addEventListener("mousedown", p), () => document.removeEventListener("mousedown", p);
   }, []);
-  const x = (p) => {
-    d(p), l(!1), h("");
+  const g = (p) => {
+    d(p), l(!1), f("");
   }, C = (() => {
-    let p = de();
-    if (s.trim() && (p = ei(s)), y !== "all") {
-      const I = Pt[y];
+    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;
   })();
-  return /* @__PURE__ */ i.jsxs("div", { className: "icon-selector", ref: u, children: [
+  return /* @__PURE__ */ i.jsxs("div", { className: "icon-selector", ref: y, children: [
     /* @__PURE__ */ i.jsxs(
       "button",
       {
@@ -421,19 +421,19 @@ const Pt = {
             type: "text",
             placeholder: "Search icons...",
             value: s,
-            onChange: (p) => h(p.target.value),
+            onChange: (p) => f(p.target.value),
             className: "icon-search"
           }
         ),
         /* @__PURE__ */ i.jsxs(
           "select",
           {
-            value: y,
+            value: x,
             onChange: (p) => c(p.target.value),
             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))
             ]
           }
         )
@@ -442,7 +442,7 @@ const Pt = {
         "button",
         {
           className: "icon-item",
-          onClick: () => x(p),
+          onClick: () => g(p),
           title: `${p.name} (${p.category})`,
           children: [
             /* @__PURE__ */ i.jsx("span", { className: "icon-symbol", children: p.symbol }),
@@ -459,10 +459,10 @@ const Pt = {
     ] })
   ] });
 }, oi = ({ isOpen: d, onClose: o, onAddQRCode: a, theme: l }) => {
-  const [s, h] = N(""), [y, c] = N(""), [u, x] = N(200), [F, C] = N("M"), p = () => {
+  const [s, f] = N(""), [x, c] = N(""), [y, g] = N(200), [F, C] = N("M"), p = () => {
     if (!s.trim()) return;
     const w = {
-      width: u,
+      width: y,
       errorCorrectionLevel: F,
       type: "image/png",
       quality: 0.92,
@@ -472,31 +472,31 @@ const Pt = {
         light: "#FFFFFF"
       }
     };
-    Xe.toDataURL(s, w, (z, E) => {
-      if (z) {
-        console.error("QR Code generation error:", z);
+    Xe.toDataURL(s, w, (B, E) => {
+      if (B) {
+        console.error("QR Code generation error:", B);
         return;
       }
       c(E);
     });
   }, I = () => {
-    if (!y) return;
+    if (!x) return;
     const w = new Image();
     w.onload = () => {
       a({
         type: "qrcode",
-        src: y,
+        src: x,
         data: s,
-        width: u,
-        height: u,
+        width: y,
+        height: y,
         x: 100,
         y: 100,
         imageObject: w
         // Store the loaded image object
       }), T();
-    }, w.src = y;
+    }, w.src = x;
   }, T = () => {
-    h(""), c(""), o();
+    f(""), c(""), o();
   };
   return d ? /* @__PURE__ */ i.jsx("div", { className: "qr-modal-overlay", onClick: T, children: /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-content", onClick: (w) => w.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-header", children: [
@@ -519,7 +519,7 @@ const Pt = {
           {
             id: "qr-data",
             value: s,
-            onChange: (w) => h(w.target.value),
+            onChange: (w) => f(w.target.value),
             placeholder: "https://example.com or any text...",
             rows: 3
           }
@@ -533,8 +533,8 @@ const Pt = {
             {
               type: "number",
               id: "qr-size",
-              value: u,
-              onChange: (w) => x(Math.max(50, Math.min(500, parseInt(w.target.value) || 200))),
+              value: y,
+              onChange: (w) => g(Math.max(50, Math.min(500, parseInt(w.target.value) || 200))),
               min: "50",
               max: "500"
             }
@@ -567,9 +567,9 @@ const Pt = {
           children: "Generate QR Code"
         }
       ) }),
-      y && /* @__PURE__ */ i.jsxs("div", { className: "qr-preview", children: [
+      x && /* @__PURE__ */ i.jsxs("div", { className: "qr-preview", children: [
         /* @__PURE__ */ i.jsx("h4", { children: "Preview" }),
-        /* @__PURE__ */ i.jsx("div", { className: "qr-preview-container", children: /* @__PURE__ */ i.jsx("img", { src: y, alt: "QR Code Preview" }) }),
+        /* @__PURE__ */ i.jsx("div", { className: "qr-preview-container", children: /* @__PURE__ */ i.jsx("img", { src: x, alt: "QR Code Preview" }) }),
         /* @__PURE__ */ i.jsx(
           "button",
           {
@@ -586,7 +586,7 @@ const Pt = {
     ] })
   ] }) }) : null;
 }, ri = ({ isOpen: d, onClose: o, onAddBarcode: a, theme: l }) => {
-  const [s, h] = N(""), [y, c] = N("CODE128"), [u, x] = 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 = nt(null), U = [
+  const [s, f] = N(""), [x, c] = N("CODE128"), [y, g] = N(null), [F, C] = N(2), [p, I] = N(100), [T, w] = N(20), [B, E] = N("center"), [S, $] = N("bottom"), [z, W] = N(10), at = dt(null), U = [
     { value: "CODE128", label: "CODE128 (Most Common)" },
     { value: "EAN13", label: "EAN-13 (European Article Number)" },
     { value: "EAN8", label: "EAN-8 (Short EAN)" },
@@ -599,17 +599,17 @@ const Pt = {
   ], ft = () => {
     if (s.trim())
       try {
-        x(/* @__PURE__ */ i.jsx(
+        g(/* @__PURE__ */ i.jsx(
           Je,
           {
             value: s,
-            format: y,
+            format: x,
             width: F,
             height: p,
             fontSize: T,
-            textAlign: z,
+            textAlign: B,
             textPosition: S,
-            margin: B,
+            margin: z,
             background: "#ffffff",
             lineColor: "#000000"
           }
@@ -619,15 +619,15 @@ const Pt = {
       }
   }, q = () => {
     var O, J, st, K;
-    if (!(!u || !at.current))
+    if (!(!y || !at.current))
       try {
         const it = at.current.querySelector("svg");
         if (!it) {
           console.error("No SVG element found in barcode");
           return;
         }
-        const M = document.createElement("canvas"), G = M.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;
-        M.width = m, M.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);
@@ -637,8 +637,8 @@ const Pt = {
               type: "barcode",
               src: ht,
               data: s,
-              format: y,
-              width: m,
+              format: x,
+              width: u,
               height: A,
               x: 100,
               y: 100,
@@ -650,7 +650,7 @@ const Pt = {
         console.error("Error adding barcode to canvas:", it), alert("Failed to add barcode to canvas. Please try again.");
       }
   }, rt = () => {
-    h(""), x(null), c("CODE128"), C(2), I(100), w(20), o();
+    f(""), g(null), c("CODE128"), C(2), I(100), w(20), o();
   }, Y = (O) => ({
     CODE128: "Supports all ASCII characters. Most versatile format.",
     EAN13: "Requires exactly 12 digits (13th is checksum). Used for retail products.",
@@ -684,7 +684,7 @@ const Pt = {
             type: "text",
             id: "barcode-data",
             value: s,
-            onChange: (O) => h(O.target.value),
+            onChange: (O) => f(O.target.value),
             placeholder: "Enter your data..."
           }
         )
@@ -695,12 +695,12 @@ const Pt = {
           "select",
           {
             id: "barcode-format",
-            value: y,
+            value: x,
             onChange: (O) => c(O.target.value),
             children: U.map((O) => /* @__PURE__ */ i.jsx("option", { value: O.value, children: O.label }, O.value))
           }
         ),
-        /* @__PURE__ */ i.jsx("small", { className: "format-description", children: Y(y) })
+        /* @__PURE__ */ i.jsx("small", { className: "format-description", children: Y(x) })
       ] }),
       /* @__PURE__ */ i.jsxs("div", { className: "barcode-options", children: [
         /* @__PURE__ */ i.jsxs("div", { className: "barcode-form-group", children: [
@@ -783,9 +783,9 @@ const Pt = {
           children: "Generate Barcode"
         }
       ) }),
-      u && /* @__PURE__ */ i.jsxs("div", { className: "barcode-preview", children: [
+      y && /* @__PURE__ */ i.jsxs("div", { className: "barcode-preview", children: [
         /* @__PURE__ */ i.jsx("h4", { children: "Preview" }),
-        /* @__PURE__ */ i.jsx("div", { className: "barcode-preview-container", ref: at, children: u }),
+        /* @__PURE__ */ i.jsx("div", { className: "barcode-preview-container", ref: at, children: y }),
         /* @__PURE__ */ i.jsx(
           "button",
           {
@@ -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,10 +864,10 @@ const Pt = {
                 100% { transform: rotate(360deg); }
             }
         ` })
-] }), si = ({ isOpen: d, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: h }) => {
-  const [y, c] = N([]), [u, x] = N(!1), [F, C] = N(null), [p, I] = N(""), [T, w] = N(""), [z, E] = N({});
-  nt(null);
-  const [S, $] = N(!1), [B, W] = N(!1), [at, U] = N(!1), ft = `${h}/api/v1/designer`;
+] }), 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(""), [B, E] = N({});
+  dt(null);
+  const [S, $] = N(!1), [z, W] = N(!1), [at, U] = N(!1), ft = `${f}/api/v1/designer`;
   et(() => {
     d && s && q();
   }, [d, s]);
@@ -881,7 +881,7 @@ const Pt = {
     }
     const M = `${ft}/get-subscription-status/${s}`;
     try {
-      (await ae.get(M)).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 {
@@ -897,9 +897,9 @@ const Pt = {
       } catch {
         console.warn("Failed to parse cached stickers, fetching fresh data");
       }
-    x(!0), C(null);
+    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));
@@ -908,7 +908,7 @@ const Pt = {
     } catch (G) {
       console.error("Error fetching stickers:", G), C("Failed to load stickers. Please try again.");
     } finally {
-      x(!1);
+      g(!1);
     }
   }, O = (M, G) => {
     a({
@@ -928,24 +928,24 @@ const Pt = {
   }, st = (M) => {
     const G = {};
     return M.forEach((j) => {
-      const m = j.name.split("/");
+      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 = (M, G = "", j = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${j * 15}px` }, children: Object.keys(M).map((m) => {
-    const A = `${G}/${m}`, Q = z[A];
-    return M[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 = B[A];
+    return M[u].type === "image" ? !T || u.toLowerCase().includes(T.toLowerCase()) ? /* @__PURE__ */ i.jsx(
       "div",
       {
         className: "sticker-item",
-        onClick: () => O(M[m].url, m),
+        onClick: () => O(M[u].url, u),
         children: /* @__PURE__ */ i.jsx("div", { className: "sticker-preview", children: /* @__PURE__ */ i.jsx(
           "img",
           {
-            src: M[m].url,
-            alt: m,
+            src: M[u].url,
+            alt: u,
             loading: "lazy",
             onError: (Z) => {
               Z.target.style.display = "none";
@@ -962,13 +962,13 @@ 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(M[m], A, j + 1)
+      Q && K(M[u], A, j + 1)
     ] }, A);
-  }) }), it = y.filter(
+  }) }), it = x.filter(
     (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: (M) => M.stopPropagation(), children: [
@@ -985,9 +985,9 @@ const Pt = {
       )
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-body", children: [
-      at && /* @__PURE__ */ i.jsx(ce, {}),
-      !S && !at && B && /* @__PURE__ */ i.jsx(ai, { theme: l }),
-      S && B && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      at && /* @__PURE__ */ i.jsx(de, {}),
+      !S && !at && z && /* @__PURE__ */ i.jsx(ai, { theme: l }),
+      S && z && /* @__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",
           {
@@ -998,12 +998,12 @@ const Pt = {
             className: "sticker-search"
           }
         ) }) }),
-        u && /* @__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" })
         ] }),
-        !u && !F && y.length > 0 && /* @__PURE__ */ i.jsx("div", { className: "sticker-grid", children: K(st(it)) })
+        !y && !F && x.length > 0 && /* @__PURE__ */ i.jsx("div", { className: "sticker-grid", children: K(st(it)) })
       ] })
     ] })
   ] }) }) : null;
@@ -2559,33 +2559,33 @@ const Pt = {
     category: "Geometric",
     description: "Complex mandala flower pattern"
   }
-], ni = ({ isOpen: d, onClose: o, onAddEmbroidery: a, theme: l, apiKey: s, apiEndpoint: h }) => {
-  const [y, c] = N([]), [u, x] = N(!1), [F, C] = N(null), [p, I] = N(""), [T, w] = N("All"), z = nt(null), E = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
+], 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"), B = dt(null), E = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
   et(() => {
     d && c(li);
   }, [d]);
-  const S = (B) => {
+  const S = (z) => {
     a({
       type: "embroidery",
-      src: B.url,
-      name: B.name,
-      description: B.description,
-      category: B.category,
+      src: z.url,
+      name: z.name,
+      description: z.description,
+      category: z.category,
       width: 120,
       height: 120,
       x: 100,
       y: 100
     }), o();
-  }, $ = y.filter((B) => {
-    const W = !p || B.name.toLowerCase().includes(p.toLowerCase()) || B.description.toLowerCase().includes(p.toLowerCase()), at = T === "All" || B.category === T;
+  }, $ = x.filter((z) => {
+    const W = !p || z.name.toLowerCase().includes(p.toLowerCase()) || z.description.toLowerCase().includes(p.toLowerCase()), at = T === "All" || z.category === T;
     return W && at;
   });
   return d ? /* @__PURE__ */ i.jsx("div", { className: "embroidery-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs(
     "div",
     {
       className: "embroidery-modal-content",
-      onClick: (B) => B.stopPropagation(),
-      ref: z,
+      onClick: (z) => z.stopPropagation(),
+      ref: B,
       children: [
         /* @__PURE__ */ i.jsxs("div", { className: "embroidery-modal-header", children: [
           /* @__PURE__ */ i.jsx("h3", { children: "Choose an Embroidery Design" }),
@@ -2606,7 +2606,7 @@ const Pt = {
               type: "text",
               placeholder: "Search embroidery designs...",
               value: p,
-              onChange: (B) => I(B.target.value),
+              onChange: (z) => I(z.target.value),
               className: "embroidery-search"
             }
           ) }),
@@ -2616,46 +2616,46 @@ const Pt = {
               "select",
               {
                 value: T,
-                onChange: (B) => w(B.target.value),
+                onChange: (z) => w(z.target.value),
                 className: "category-select",
-                children: E.map((B) => /* @__PURE__ */ i.jsx("option", { value: B, children: B }, B))
+                children: E.map((z) => /* @__PURE__ */ i.jsx("option", { value: z, children: z }, z))
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ i.jsxs("div", { className: "embroidery-modal-body", children: [
-          u && /* @__PURE__ */ i.jsxs("div", { className: "embroidery-loading", children: [
+          y && /* @__PURE__ */ i.jsxs("div", { className: "embroidery-loading", children: [
             /* @__PURE__ */ i.jsx("div", { className: "loading-spinner" }),
             /* @__PURE__ */ i.jsx("p", { children: "Loading embroidery designs..." })
           ] }),
           F && /* @__PURE__ */ i.jsx("div", { className: "embroidery-error", children: /* @__PURE__ */ i.jsx("p", { children: F }) }),
-          !u && !F && /* @__PURE__ */ i.jsx("div", { className: "embroidery-grid", children: $.map((B) => /* @__PURE__ */ i.jsxs(
+          !y && !F && /* @__PURE__ */ i.jsx("div", { className: "embroidery-grid", children: $.map((z) => /* @__PURE__ */ i.jsxs(
             "div",
             {
               className: "embroidery-item",
-              onClick: () => S(B),
-              title: B.description,
+              onClick: () => S(z),
+              title: z.description,
               children: [
                 /* @__PURE__ */ i.jsx("div", { className: "embroidery-preview", children: /* @__PURE__ */ i.jsx(
                   "img",
                   {
-                    src: B.url,
-                    alt: B.name,
+                    src: z.url,
+                    alt: z.name,
                     loading: "lazy",
                     onError: (W) => {
-                      console.error("Failed to load embroidery image:", B.url), W.target.style.display = "none";
+                      console.error("Failed to load embroidery image:", z.url), W.target.style.display = "none";
                     }
                   }
                 ) }),
                 /* @__PURE__ */ i.jsxs("div", { className: "embroidery-info", children: [
-                  /* @__PURE__ */ i.jsx("div", { className: "embroidery-name", children: B.name }),
-                  /* @__PURE__ */ i.jsx("div", { className: "embroidery-category", children: B.category })
+                  /* @__PURE__ */ i.jsx("div", { className: "embroidery-name", children: z.name }),
+                  /* @__PURE__ */ i.jsx("div", { className: "embroidery-category", children: z.category })
                 ] })
               ]
             },
-            B.id
+            z.id
           )) }),
-          !u && !F && $.length === 0 && /* @__PURE__ */ i.jsx("div", { className: "no-embroideries", children: /* @__PURE__ */ i.jsx("p", { children: "No embroidery designs found matching your search." }) })
+          !y && !F && $.length === 0 && /* @__PURE__ */ i.jsx("div", { className: "no-embroideries", children: /* @__PURE__ */ i.jsx("p", { children: "No embroidery designs found matching your search." }) })
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "embroidery-modal-footer", children: /* @__PURE__ */ i.jsxs("div", { className: "embroidery-disclaimer", children: [
           /* @__PURE__ */ i.jsx("span", { className: "disclaimer-icon", children: "ℹ️" }),
@@ -4602,16 +4602,16 @@ const Pt = {
     textAlign: "center"
   }
 ], ci = ({ isOpen: d, onClose: o, onAddText: a, theme: l }) => {
-  const [s, h] = N(""), [y, c] = N("All"), u = re(() => {
+  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]), x = re(() => Nt.filter((p) => {
-    const I = !s || p.text.toLowerCase().includes(s.toLowerCase()) || p.category.toLowerCase().includes(s.toLowerCase()), T = y === "All" || p.category === y;
+  }, [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, y]), F = (p) => {
+  }), [Nt, s, x]), F = (p) => {
     const I = {
       ...p,
       x: 100,
@@ -4640,14 +4640,14 @@ const Pt = {
           type: "text",
           placeholder: "Search templates...",
           value: s,
-          onChange: (p) => h(p.target.value),
+          onChange: (p) => f(p.target.value),
           className: "search-input"
         }
       ) }),
-      /* @__PURE__ */ i.jsx("div", { className: "category-tabs", children: u.map((p) => /* @__PURE__ */ i.jsxs(
+      /* @__PURE__ */ i.jsx("div", { className: "category-tabs", children: y.map((p) => /* @__PURE__ */ i.jsxs(
         "button",
         {
-          className: `category-tab ${y === p.name ? "active" : ""}`,
+          className: `category-tab ${x === p.name ? "active" : ""}`,
           onClick: () => c(p.name),
           children: [
             p.name,
@@ -4666,7 +4666,7 @@ const Pt = {
         /* @__PURE__ */ i.jsx("div", { className: "custom-icon", children: "✏️" }),
         /* @__PURE__ */ i.jsx("div", { className: "custom-label", children: "Create Custom Text" })
       ] }) }),
-      x.map((p) => /* @__PURE__ */ i.jsxs(
+      g.map((p) => /* @__PURE__ */ i.jsxs(
         "div",
         {
           className: "template-item",
@@ -4701,9 +4701,9 @@ const Pt = {
       ))
     ] }),
     /* @__PURE__ */ i.jsx("div", { className: "modal-footer", children: /* @__PURE__ */ i.jsxs("div", { className: "results-count", children: [
-      x.length,
+      g.length,
       " template",
-      x.length !== 1 ? "s" : "",
+      g.length !== 1 ? "s" : "",
       " found"
     ] }) })
   ] }) }) : null;
@@ -4713,24 +4713,24 @@ const Pt = {
   onDuplicateElement: a,
   onUndo: l,
   onRedo: s,
-  onToggleGrid: h,
-  onToggleRulers: y,
+  onToggleGrid: f,
+  onToggleRulers: x,
   onToggleSnap: c,
-  onImageUpload: u,
-  canUndo: x,
+  onImageUpload: y,
+  canUndo: g,
   canRedo: F,
   showGrid: C,
   showRulers: p,
   snapToGrid: I,
   selectedElement: T,
   theme: w,
-  readOnly: z,
+  readOnly: B,
   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), M = (P) => {
-    const ct = P.target.files[0];
-    ct && ct.type.startsWith("image/") && u(ct), P.target.value = "";
+  const [$, z] = 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) => {
     d("icon", {
       iconData: P,
@@ -4741,14 +4741,14 @@ const Pt = {
     });
   }, j = (P) => {
     d("qrcode", P);
-  }, m = (P) => {
+  }, u = (P) => {
     d("barcode", P);
   }, A = (P) => {
     d("sticker", P);
   }, Q = (P) => {
     d("embroidery", P);
-  }, _ = (P, ct) => {
-    d(P, ct);
+  }, _ = (P, nt) => {
+    d(P, nt);
   }, Z = () => {
     st(!J), it(!1);
   }, V = () => {
@@ -4766,7 +4766,7 @@ const Pt = {
           {
             className: "toolbar-btn compact",
             onClick: l,
-            disabled: !x || z,
+            disabled: !g || B,
             title: "Undo (Ctrl+Z)",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "↶" }),
@@ -4779,7 +4779,7 @@ const Pt = {
           {
             className: "toolbar-btn compact",
             onClick: s,
-            disabled: !F || z,
+            disabled: !F || B,
             title: "Redo (Ctrl+Y)",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "↷" }),
@@ -4795,7 +4795,7 @@ const Pt = {
             "button",
             {
               className: "toolbar-btn compact dropdown-trigger",
-              disabled: z,
+              disabled: B,
               title: "Add Text",
               onClick: Z,
               children: [
@@ -4821,7 +4821,7 @@ const Pt = {
             "button",
             {
               className: "toolbar-btn compact dropdown-trigger",
-              disabled: z,
+              disabled: B,
               onClick: V,
               children: [
                 /* @__PURE__ */ i.jsx("span", { className: "icon", children: "◩" }),
@@ -4882,7 +4882,7 @@ const Pt = {
           ] })
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ i.jsxs("label", { className: "toolbar-btn compact file-upload", style: { cursor: z ? "not-allowed" : "pointer" }, children: [
+        /* @__PURE__ */ i.jsxs("label", { className: "toolbar-btn compact file-upload", style: { cursor: B ? "not-allowed" : "pointer" }, children: [
           /* @__PURE__ */ i.jsx("span", { className: "icon", children: "☁️" }),
           /* @__PURE__ */ i.jsx("span", { className: "label", children: "Upload" }),
           /* @__PURE__ */ i.jsx(
@@ -4891,18 +4891,18 @@ const Pt = {
               type: "file",
               accept: "image/*",
               onChange: M,
-              disabled: z
+              disabled: B
             }
           )
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ i.jsx(ii, { onSelectIcon: G, theme: w, disabled: z }),
+        /* @__PURE__ */ i.jsx(ii, { onSelectIcon: G, theme: w, disabled: B }),
         /* @__PURE__ */ i.jsxs(
           "button",
           {
             className: "toolbar-btn compact",
             onClick: () => ft(!0),
-            disabled: z,
+            disabled: B,
             title: "Add Sticker",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "🎨" }),
@@ -4915,8 +4915,8 @@ const Pt = {
           "button",
           {
             className: "toolbar-btn compact",
-            onClick: () => B(!0),
-            disabled: z,
+            onClick: () => z(!0),
+            disabled: B,
             title: "Add QR Code",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "▦" }),
@@ -4929,7 +4929,7 @@ const Pt = {
           {
             className: "toolbar-btn compact",
             onClick: () => at(!0),
-            disabled: z,
+            disabled: B,
             title: "Add Barcode",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "▤" }),
@@ -4944,7 +4944,7 @@ const Pt = {
         {
           className: "toolbar-btn compact",
           onClick: () => rt(!0),
-          disabled: z,
+          disabled: B,
           title: "Add Embroidery Design",
           children: [
             /* @__PURE__ */ i.jsx("span", { className: "icon", children: "🧵" }),
@@ -4960,7 +4960,7 @@ const Pt = {
             {
               className: "toolbar-btn compact success",
               onClick: a,
-              disabled: z,
+              disabled: B,
               title: "Duplicate Element (Ctrl+D)",
               children: [
                 /* @__PURE__ */ i.jsx("span", { className: "icon", children: "⧉" }),
@@ -4973,7 +4973,7 @@ const Pt = {
             {
               className: "toolbar-btn compact danger",
               onClick: o,
-              disabled: z,
+              disabled: B,
               title: "Delete Element (Delete)",
               children: [
                 /* @__PURE__ */ i.jsx("span", { className: "icon", children: "🗑️" }),
@@ -4989,7 +4989,7 @@ const Pt = {
           "button",
           {
             className: `toolbar-btn compact ${C ? "active" : ""}`,
-            onClick: h,
+            onClick: f,
             title: "Toggle Grid",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "⚏" }),
@@ -5001,7 +5001,7 @@ const Pt = {
           "button",
           {
             className: `toolbar-btn compact ${p ? "active" : ""}`,
-            onClick: y,
+            onClick: x,
             title: "Toggle Rulers",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "📐" }),
@@ -5027,7 +5027,7 @@ const Pt = {
       oi,
       {
         isOpen: $,
-        onClose: () => B(!1),
+        onClose: () => z(!1),
         onAddQRCode: j,
         theme: w
       }
@@ -5037,7 +5037,7 @@ const Pt = {
       {
         isOpen: W,
         onClose: () => at(!1),
-        onAddBarcode: m,
+        onAddBarcode: u,
         theme: w
       }
     ),
@@ -5080,16 +5080,16 @@ const Pt = {
   availableFonts: l,
   theme: s
 }) => {
-  const [h, y] = N(!1);
+  const [f, x] = N(!1);
   if (!d)
     return /* @__PURE__ */ i.jsxs("div", { className: "properties-panel", children: [
       /* @__PURE__ */ i.jsx("h3", { children: "Properties" }),
       /* @__PURE__ */ i.jsx("p", { className: "no-selection", children: "Select an element to edit its properties" })
     ] });
-  const c = (w, z) => {
-    o(d.id, { [w]: z });
-  }, u = () => {
-    var w, z, E;
+  const c = (w, B) => {
+    o(d.id, { [w]: B });
+  }, y = () => {
+    var w, B, E;
     return /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
       /* @__PURE__ */ i.jsx("h4", { children: "Text Content" }),
       /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
@@ -5193,7 +5193,7 @@ const Pt = {
             {
               className: (w = d.textDecoration) != null && w.includes("underline") ? "active" : "",
               onClick: () => {
-                const S = d.textDecoration || "", $ = S.split(" ").filter((B) => B && B !== "underline");
+                const S = d.textDecoration || "", $ = S.split(" ").filter((z) => z && z !== "underline");
                 S.includes("underline") || $.push("underline"), c("textDecoration", $.join(" ").trim());
               },
               title: "Underline",
@@ -5203,9 +5203,9 @@ const Pt = {
           /* @__PURE__ */ i.jsx(
             "button",
             {
-              className: (z = d.textDecoration) != null && z.includes("overline") ? "active" : "",
+              className: (B = d.textDecoration) != null && B.includes("overline") ? "active" : "",
               onClick: () => {
-                const S = d.textDecoration || "", $ = S.split(" ").filter((B) => B && B !== "overline");
+                const S = d.textDecoration || "", $ = S.split(" ").filter((z) => z && z !== "overline");
                 S.includes("overline") || $.push("overline"), c("textDecoration", $.join(" ").trim());
               },
               title: "Overline",
@@ -5217,7 +5217,7 @@ const Pt = {
             {
               className: (E = d.textDecoration) != null && E.includes("line-through") ? "active" : "",
               onClick: () => {
-                const S = d.textDecoration || "", $ = S.split(" ").filter((B) => B && B !== "line-through");
+                const S = d.textDecoration || "", $ = S.split(" ").filter((z) => z && z !== "line-through");
                 S.includes("line-through") || $.push("line-through"), c("textDecoration", $.join(" ").trim());
               },
               title: "Strikethrough",
@@ -5344,7 +5344,7 @@ const Pt = {
           ] })
         ] })
       ] }) }),
-      h && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      f && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
         /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
           /* @__PURE__ */ i.jsxs("div", { className: "input-group", children: [
             /* @__PURE__ */ i.jsx("label", { children: "Letter Spacing" }),
@@ -5552,7 +5552,7 @@ const Pt = {
         ] })
       ] })
     ] });
-  }, x = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
+  }, g = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
     /* @__PURE__ */ i.jsx("h4", { children: "Shape Properties" }),
     /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
       /* @__PURE__ */ i.jsx("label", { children: "Fill Color" }),
@@ -5635,7 +5635,7 @@ const Pt = {
         "%"
       ] })
     ] }),
-    h && /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
+    f && /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
       /* @__PURE__ */ i.jsx("label", { children: "Border Radius" }),
       /* @__PURE__ */ i.jsx(
         "input",
@@ -5728,8 +5728,8 @@ const Pt = {
             type: "number",
             value: d.strokeWidth || d.height || 2,
             onChange: (w) => {
-              const z = parseInt(w.target.value);
-              c("strokeWidth", z), c("height", z);
+              const B = parseInt(w.target.value);
+              c("strokeWidth", B), c("height", B);
             },
             min: "1",
             max: "50"
@@ -5803,8 +5803,8 @@ const Pt = {
       /* @__PURE__ */ i.jsx("span", { className: "element-type", children: d.type })
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "panel-content", children: [
-      d.type === "text" && u(),
-      T.includes(d.type) && x(),
+      d.type === "text" && y(),
+      T.includes(d.type) && g(),
       d.type === "image" && F(),
       d.type === "horizontalLine" && p(),
       C(),
@@ -5813,9 +5813,9 @@ const Pt = {
         "button",
         {
           className: "toggle-advanced",
-          onClick: () => y(!h),
+          onClick: () => x(!f),
           children: [
-            h ? "Hide" : "Show",
+            f ? "Hide" : "Show",
             " Advanced Options"
           ]
         }
@@ -5828,10 +5828,10 @@ const Pt = {
   onSelectElement: a,
   onMoveLayer: l,
   onDeleteElement: s,
-  theme: h
+  theme: f
 }) => {
-  const y = (u, x) => {
-    switch (u) {
+  const x = (y, g) => {
+    switch (y) {
       case "text":
         return "T";
       case "rectangle":
@@ -5871,32 +5871,32 @@ const Pt = {
       default:
         return "?";
     }
-  }, c = (u) => {
-    var x, F;
-    if (u.type === "text")
-      return u.isIcon && u.iconData ? `Icon: ${u.iconData.name}` : ((x = u.text) == null ? void 0 : x.substring(0, 20)) + (((F = u.text) == null ? void 0 : F.length) > 20 ? "..." : "") || "Text";
-    if (u.type === "qrcode")
-      return `QR Code: ${(u.data || "").substring(0, 15) + ((u.data || "").length > 15 ? "..." : "")}`;
-    if (u.type === "barcode") {
-      const C = u.format || "CODE128", p = u.data || "";
+  }, c = (y) => {
+    var g, F;
+    if (y.type === "text")
+      return y.isIcon && y.iconData ? `Icon: ${y.iconData.name}` : ((g = y.text) == null ? void 0 : g.substring(0, 20)) + (((F = y.text) == null ? void 0 : F.length) > 20 ? "..." : "") || "Text";
+    if (y.type === "qrcode")
+      return `QR Code: ${(y.data || "").substring(0, 15) + ((y.data || "").length > 15 ? "..." : "")}`;
+    if (y.type === "barcode") {
+      const C = y.format || "CODE128", p = y.data || "";
       return `Barcode (${C}): ${p.substring(0, 10) + (p.length > 10 ? "..." : "")}`;
     }
-    return u.type === "sticker" ? `Sticker: ${(u.name || "Untitled").substring(0, 15)}` : u.type === "embroidery" ? `Embroidery: ${(u.name || "Design").substring(0, 15)}` : u.type.charAt(0).toUpperCase() + u.type.slice(1);
+    return y.type === "sticker" ? `Sticker: ${(y.name || "Untitled").substring(0, 15)}` : y.type === "embroidery" ? `Embroidery: ${(y.name || "Design").substring(0, 15)}` : y.type.charAt(0).toUpperCase() + y.type.slice(1);
   };
   return /* @__PURE__ */ i.jsxs("div", { className: "layers-panel", children: [
     /* @__PURE__ */ i.jsxs("div", { className: "panel-header", children: [
       /* @__PURE__ */ i.jsx("h3", { children: "Layers" }),
       /* @__PURE__ */ i.jsx("span", { className: "layer-count", children: d.length })
     ] }),
-    /* @__PURE__ */ i.jsx("div", { className: "layers-list", children: d.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-layers", children: "No elements added yet" }) : [...d].reverse().map((u, x) => /* @__PURE__ */ i.jsxs(
+    /* @__PURE__ */ i.jsx("div", { className: "layers-list", children: d.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-layers", children: "No elements added yet" }) : [...d].reverse().map((y, g) => /* @__PURE__ */ i.jsxs(
       "div",
       {
-        className: `layer-item ${(o == null ? void 0 : o.id) === u.id ? "selected" : ""}`,
-        onClick: () => a(u),
+        className: `layer-item ${(o == null ? void 0 : o.id) === y.id ? "selected" : ""}`,
+        onClick: () => a(y),
         children: [
           /* @__PURE__ */ i.jsxs("div", { className: "layer-info", children: [
-            /* @__PURE__ */ i.jsx("span", { className: "layer-icon", children: y(u.type) }),
-            /* @__PURE__ */ i.jsx("span", { className: "layer-name", children: c(u) })
+            /* @__PURE__ */ i.jsx("span", { className: "layer-icon", children: x(y.type) }),
+            /* @__PURE__ */ i.jsx("span", { className: "layer-name", children: c(y) })
           ] }),
           /* @__PURE__ */ i.jsxs("div", { className: "layer-controls", children: [
             /* @__PURE__ */ i.jsx(
@@ -5904,9 +5904,9 @@ const Pt = {
               {
                 className: "layer-btn",
                 onClick: (F) => {
-                  F.stopPropagation(), l(u.id, "up");
+                  F.stopPropagation(), l(y.id, "up");
                 },
-                disabled: x === 0,
+                disabled: g === 0,
                 title: "Move Up",
                 children: "↑"
               }
@@ -5916,9 +5916,9 @@ const Pt = {
               {
                 className: "layer-btn",
                 onClick: (F) => {
-                  F.stopPropagation(), l(u.id, "down");
+                  F.stopPropagation(), l(y.id, "down");
                 },
-                disabled: x === d.length - 1,
+                disabled: g === d.length - 1,
                 title: "Move Down",
                 children: "↓"
               }
@@ -5928,7 +5928,7 @@ const Pt = {
               {
                 className: "layer-btn delete",
                 onClick: (F) => {
-                  F.stopPropagation(), s(u.id);
+                  F.stopPropagation(), s(y.id);
                 },
                 title: "Delete",
                 children: "×"
@@ -5937,7 +5937,7 @@ const Pt = {
           ] })
         ]
       },
-      u.id
+      y.id
     )) })
   ] });
 };
@@ -5946,17 +5946,17 @@ class gi {
     this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d");
   }
   // Add this method to the ExportManager class
-  async exportAllSections(o, a, l, s, h = "png", y = !0, c = null) {
-    const u = {};
-    for (const x of a) {
-      const F = x.id || x.sectionName, C = o[F];
+  async exportAllSections(o, a, l, s, f = "png", x = !0, c = null) {
+    const y = {};
+    for (const g of a) {
+      const F = g.id || g.sectionName, C = o[F];
       if (!C || !C.elements || C.elements.length === 0) {
         console.log(`Skipping section ${F} - no elements`);
         continue;
       }
-      if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), y) {
-        let I = x.image || x.sectionImage;
-        if (c && c.sectionImage && (x.sectionName === "Front" || c.sections && Object.keys(c.sections).includes(x.sectionName)) && (I = c.sectionImage), I)
+      if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), x) {
+        let I = g.image || g.sectionImage;
+        if (c && c.sectionImage && (g.sectionName === "Front" || c.sections && Object.keys(c.sections).includes(g.sectionName)) && (I = c.sectionImage), I)
           try {
             const T = await this.loadImage(I);
             await this.processImageColor(T, C.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
@@ -5967,13 +5967,13 @@ class gi {
         this.ctx.clearRect(0, 0, l, s);
       for (const I of C.elements)
         await this.drawElement(I);
-      const p = this.canvas.toDataURL(`image/${h}`, h === "jpeg" ? 0.9 : void 0);
-      u[F] = {
+      const p = this.canvas.toDataURL(`image/${f}`, f === "jpeg" ? 0.9 : void 0);
+      y[F] = {
         dataUrl: p,
         blob: await this.dataUrlToBlob(p)
       };
     }
-    return u;
+    return y;
   }
   // Also add a method to download all exports
   async downloadExports(o, a = "design") {
@@ -5983,12 +5983,12 @@ class gi {
       return;
     }
     if (l.length === 1) {
-      const s = l[0], { blob: h } = o[s], y = URL.createObjectURL(h), c = document.createElement("a");
-      c.href = y, c.download = `${a}-${s}.png`, document.body.appendChild(c), c.click(), document.body.removeChild(c), URL.revokeObjectURL(y);
+      const s = l[0], { blob: f } = o[s], x = URL.createObjectURL(f), c = document.createElement("a");
+      c.href = x, c.download = `${a}-${s}.png`, document.body.appendChild(c), c.click(), document.body.removeChild(c), URL.revokeObjectURL(x);
     } else
       for (const s of l) {
-        const { blob: h } = o[s], y = URL.createObjectURL(h), c = document.createElement("a");
-        c.href = y, c.download = `${a}-${s}.png`, document.body.appendChild(c), c.click(), document.body.removeChild(c), URL.revokeObjectURL(y), await new Promise((u) => setTimeout(u, 100));
+        const { blob: f } = o[s], x = URL.createObjectURL(f), c = document.createElement("a");
+        c.href = x, c.download = `${a}-${s}.png`, document.body.appendChild(c), c.click(), document.body.removeChild(c), URL.revokeObjectURL(x), await new Promise((y) => setTimeout(y, 100));
       }
   }
   async loadImage(o) {
@@ -6005,18 +6005,18 @@ class gi {
   async processImageColor(o, a) {
     const l = document.createElement("canvas"), s = l.getContext("2d");
     l.width = o.width, l.height = o.height, s.clearRect(0, 0, l.width, l.height), s.drawImage(o, 0, 0);
-    const h = s.getImageData(0, 0, l.width, l.height), y = h.data, c = this.hexToRgb(a);
+    const f = s.getImageData(0, 0, l.width, l.height), x = f.data, c = this.hexToRgb(a);
     if (!c) {
       console.warn("Invalid target color:", a);
       return;
     }
-    const { r: u, g: x, b: F } = c;
-    for (let C = 0; C < y.length; C += 4) {
-      if (y[C + 3] === 0) continue;
-      const I = this.getLuma(y[C], y[C + 1], y[C + 2]);
-      y[C] = Math.round(u * I), y[C + 1] = Math.round(x * I), y[C + 2] = Math.round(F * I);
+    const { r: y, g, b: F } = c;
+    for (let C = 0; C < x.length; C += 4) {
+      if (x[C + 3] === 0) continue;
+      const I = this.getLuma(x[C], x[C + 1], x[C + 2]);
+      x[C] = Math.round(y * I), x[C + 1] = Math.round(g * I), x[C + 2] = Math.round(F * I);
     }
-    return s.putImageData(h, 0, 0), this.processedImage = new Image(), new Promise((C) => {
+    return s.putImageData(f, 0, 0), this.processedImage = new Image(), new Promise((C) => {
       this.processedImage.onload = () => {
         C();
       }, this.processedImage.onerror = () => {
@@ -6089,9 +6089,9 @@ class gi {
     this.ctx.font = `${o.fontStyle || "normal"} ${o.fontWeight || "normal"} ${o.fontSize || 20}px ${o.fontFamily || "Arial"}`, this.ctx.fillStyle = o.fill || "#000000", this.ctx.textAlign = o.textAlign || "left", this.ctx.textBaseline = "top", o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth);
     const a = (o.text || "Text").split(`
 `), l = (o.fontSize || 20) * 1.2;
-    a.forEach((s, h) => {
-      const y = h * l;
-      o.stroke && o.strokeWidth > 0 && this.ctx.strokeText(s, 0, y), this.ctx.fillText(s, 0, y);
+    a.forEach((s, f) => {
+      const x = f * l;
+      o.stroke && o.strokeWidth > 0 && this.ctx.strokeText(s, 0, x), this.ctx.fillText(s, 0, x);
     });
   }
   drawRectangle(o) {
@@ -6106,10 +6106,10 @@ class gi {
     this.ctx.beginPath(), this.ctx.moveTo(a, 0), this.ctx.lineTo(0, o.height), this.ctx.lineTo(o.width, o.height), this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
   drawStar(o) {
-    const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, h = s * 0.4, y = o.numPoints || 5;
+    const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, f = s * 0.4, x = o.numPoints || 5;
     this.ctx.beginPath();
-    for (let c = 0; c < y * 2; c++) {
-      const u = c % 2 === 0 ? s : h, x = c * Math.PI / y, F = a + Math.cos(x) * u, C = l + Math.sin(x) * u;
+    for (let c = 0; c < x * 2; c++) {
+      const y = c % 2 === 0 ? s : f, g = c * Math.PI / x, F = a + Math.cos(g) * y, C = l + Math.sin(g) * y;
       c === 0 ? this.ctx.moveTo(F, C) : this.ctx.lineTo(F, C);
     }
     this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
@@ -6120,10 +6120,10 @@ class gi {
   }
   async dataUrlToBlob(o) {
     return new Promise((a) => {
-      const l = document.createElement("canvas"), s = l.getContext("2d"), h = new Image();
-      h.onload = () => {
-        l.width = h.width, l.height = h.height, s.drawImage(h, 0, 0), l.toBlob(a);
-      }, h.src = o;
+      const l = document.createElement("canvas"), s = l.getContext("2d"), f = new Image();
+      f.onload = () => {
+        l.width = f.width, l.height = f.height, s.drawImage(f, 0, 0), l.toBlob(a);
+      }, f.src = o;
     });
   }
   hexToRgb(o) {
@@ -6140,67 +6140,67 @@ class gi {
     this.ctx.beginPath(), this.ctx.moveTo(a, 0), this.ctx.lineTo(o.width, l), this.ctx.lineTo(a, o.height), this.ctx.lineTo(0, l), this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
   drawHexagon(o) {
-    const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, h = 6;
+    const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, f = 6;
     this.ctx.beginPath();
-    for (let y = 0; y < h; y++) {
-      const c = y * 2 * Math.PI / h - Math.PI / 2, u = a + s * Math.cos(c), x = l + s * Math.sin(c);
-      y === 0 ? this.ctx.moveTo(u, x) : this.ctx.lineTo(u, x);
+    for (let x = 0; x < f; x++) {
+      const c = x * 2 * Math.PI / f - Math.PI / 2, y = a + s * Math.cos(c), g = l + s * Math.sin(c);
+      x === 0 ? this.ctx.moveTo(y, g) : this.ctx.lineTo(y, g);
     }
     this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
   drawPentagon(o) {
-    const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, h = 5;
+    const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, f = 5;
     this.ctx.beginPath();
-    for (let y = 0; y < h; y++) {
-      const c = y * 2 * Math.PI / h - Math.PI / 2, u = a + s * Math.cos(c), x = l + s * Math.sin(c);
-      y === 0 ? this.ctx.moveTo(u, x) : this.ctx.lineTo(u, x);
+    for (let x = 0; x < f; x++) {
+      const c = x * 2 * Math.PI / f - Math.PI / 2, y = a + s * Math.cos(c), g = l + s * Math.sin(c);
+      x === 0 ? this.ctx.moveTo(y, g) : this.ctx.lineTo(y, g);
     }
     this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
   drawHeart(o) {
-    const a = o.width, l = o.height, s = 0, h = 0;
+    const a = o.width, l = o.height, s = 0, f = 0;
     this.ctx.beginPath();
-    const y = l * 0.3;
-    this.ctx.moveTo(s + a / 2, h + y), this.ctx.bezierCurveTo(
+    const x = l * 0.3;
+    this.ctx.moveTo(s + a / 2, f + x), this.ctx.bezierCurveTo(
       s + a / 2,
-      h,
+      f,
       s,
-      h,
+      f,
       s,
-      h + y
+      f + x
     ), this.ctx.bezierCurveTo(
       s,
-      h + (l + y) / 2,
+      f + (l + x) / 2,
       s + a / 2,
-      h + (l + y) / 2,
+      f + (l + x) / 2,
       s + a / 2,
-      h + l
+      f + l
     ), this.ctx.bezierCurveTo(
       s + a / 2,
-      h + (l + y) / 2,
+      f + (l + x) / 2,
       s + a,
-      h + (l + y) / 2,
+      f + (l + x) / 2,
       s + a,
-      h + y
+      f + x
     ), this.ctx.bezierCurveTo(
       s + a,
-      h,
+      f,
       s + a / 2,
-      h,
+      f,
       s + a / 2,
-      h + y
+      f + x
     ), this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
   drawOval(o) {
-    const a = o.width / 2, l = o.height / 2, s = o.width / 2, h = o.height / 2;
-    this.ctx.beginPath(), this.ctx.ellipse(a, l, s, h, 0, 0, 2 * Math.PI), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
+    const a = o.width / 2, l = o.height / 2, s = o.width / 2, f = o.height / 2;
+    this.ctx.beginPath(), this.ctx.ellipse(a, l, s, f, 0, 0, 2 * Math.PI), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
   drawRoundedRectangle(o) {
     const a = Math.min(o.width, o.height) * 0.1;
     this.drawRoundedRect(0, 0, o.width, o.height, a), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
-  drawRoundedRect(o, a, l, s, h) {
-    this.ctx.beginPath(), this.ctx.moveTo(o + h, a), this.ctx.lineTo(o + l - h, a), this.ctx.quadraticCurveTo(o + l, a, o + l, a + h), this.ctx.lineTo(o + l, a + s - h), this.ctx.quadraticCurveTo(o + l, a + s, o + l - h, a + s), this.ctx.lineTo(o + h, a + s), this.ctx.quadraticCurveTo(o, a + s, o, a + s - h), this.ctx.lineTo(o, a + h), this.ctx.quadraticCurveTo(o, a, o + h, a), this.ctx.closePath();
+  drawRoundedRect(o, a, l, s, f) {
+    this.ctx.beginPath(), this.ctx.moveTo(o + f, a), this.ctx.lineTo(o + l - f, a), this.ctx.quadraticCurveTo(o + l, a, o + l, a + f), this.ctx.lineTo(o + l, a + s - f), this.ctx.quadraticCurveTo(o + l, a + s, o + l - f, a + s), this.ctx.lineTo(o + f, a + s), this.ctx.quadraticCurveTo(o, a + s, o, a + s - f), this.ctx.lineTo(o, a + f), this.ctx.quadraticCurveTo(o, a, o + f, a), this.ctx.closePath();
   }
   async drawQRCode(o) {
     if (o.imageObject)
@@ -6321,91 +6321,91 @@ class gi {
     });
   }
   // Export all sections as JSON with File objects
-  async exportAllSectionsAsJSON(o, a, l, s, h = "png", y = null) {
+  async exportAllSectionsAsJSON(o, a, l, s, f = "png", x = null) {
     var p, I;
-    const c = [], u = [], x = {};
+    const c = [], y = [], g = {};
     for (const T of a) {
-      const w = T.sectionName, z = o[w];
-      if (!z || !z.elements || z.elements.length === 0) {
+      const w = T.sectionName, B = o[w];
+      if (!B || !B.elements || B.elements.length === 0) {
         console.log(`Skipping section ${w} - no elements`);
         continue;
       }
       let E = T.image || T.sectionImage;
-      y && y.sectionImage && (T.sectionName === "Front" || y.sections && Object.keys(y.sections).includes(T.sectionName)) && (E = y.sectionImage);
+      x && x.sectionImage && (T.sectionName === "Front" || x.sections && Object.keys(x.sections).includes(T.sectionName)) && (E = x.sectionImage);
       const S = {
-        ...z,
+        ...B,
         // Include background information using the determined image
         backgroundImage: E,
         sectionImage: E,
         sectionName: w,
         // Ensure we have the selected color
-        selectedColor: z.selectedColor || "#FFFFFF",
+        selectedColor: B.selectedColor || "#FFFFFF",
         // Include canvas dimensions
         canvasWidth: l,
         canvasHeight: s
       };
-      x[w] = S;
+      g[w] = S;
       const $ = await this.exportSectionAsBlob(
-        z,
+        B,
         T,
         l,
         s,
-        h,
+        f,
         !0,
-        y
+        x
         // Pass initData to exportSectionAsBlob
       );
       if ($) {
         const W = await this.blobToFile(
           $,
-          `${w}-full.${h}`,
-          `image/${h}`
+          `${w}-full.${f}`,
+          `image/${f}`
         );
         c.push({
           sectionName: w,
           sectionImage: W
         });
       }
-      const B = await this.exportSectionAsBlob(
-        z,
+      const z = await this.exportSectionAsBlob(
+        B,
         T,
         l,
         s,
-        h,
+        f,
         !1,
-        y
+        x
         // Pass initData to exportSectionAsBlob
       );
-      if (B) {
+      if (z) {
         const W = await this.blobToFile(
-          B,
-          `${w}-print.${h}`,
-          `image/${h}`
+          z,
+          `${w}-print.${f}`,
+          `image/${f}`
         );
-        u.push({
+        y.push({
           sectionName: w,
           sectionImage: W
         });
       }
     }
     let F = ((p = a[0]) == null ? void 0 : p.image) || ((I = a[0]) == null ? void 0 : I.sectionImage);
-    if (y && y.sectionImage) {
+    if (x && x.sectionImage) {
       const T = a[0];
-      T && (T.sectionName === "Front" || y.sections && Object.keys(y.sections).includes(T.sectionName)) && (F = y.sectionImage);
+      T && (T.sectionName === "Front" || x.sections && Object.keys(x.sections).includes(T.sectionName)) && (F = x.sectionImage);
     }
     const C = {
-      sections: x,
+      sections: g,
       canvasWidth: l,
       canvasHeight: s,
       sectionImage: F,
-      format: h,
+      format: f,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       version: "1.0",
       // Include initData information if present
-      ...y && {
+      ...x && {
         initData: {
-          sectionImage: y.sectionImage,
-          sections: y.sections ? Object.keys(y.sections) : []
+          sectionImage: x.sectionImage,
+          sections: x.sections ? Object.keys(x.sections) : []
         }
       },
       // Include product information for complete context
@@ -6419,46 +6419,46 @@ class gi {
     };
     return {
       fullDesign: c,
-      printReady: u,
+      printReady: y,
       designFile: JSON.stringify(C)
     };
   }
   // Helper method to export a single section as blob
-  async exportSectionAsBlob(o, a, l, s, h = "png", y = !0, c = null) {
+  async exportSectionAsBlob(o, a, l, s, f = "png", x = !0, c = null) {
     try {
-      if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), y) {
-        let u = a.image || a.sectionImage;
-        if (c && c.sectionImage && (a.sectionName === "Front" || c.sections && Object.keys(c.sections).includes(a.sectionName)) && (u = c.sectionImage), u)
+      if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), x) {
+        let y = a.image || a.sectionImage;
+        if (c && c.sectionImage && (a.sectionName === "Front" || c.sections && Object.keys(c.sections).includes(a.sectionName)) && (y = c.sectionImage), y)
           try {
-            const x = await this.loadImage(u);
-            await this.processImageColor(x, o.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
-          } catch (x) {
-            console.warn("Failed to load background image:", x);
+            const g = await this.loadImage(y);
+            await this.processImageColor(g, o.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
+          } catch (g) {
+            console.warn("Failed to load background image:", g);
           }
       } else
         this.ctx.clearRect(0, 0, l, s);
-      for (const u of o.elements)
-        await this.drawElement(u);
-      return new Promise((u) => {
-        this.canvas.toBlob(u, `image/${h}`, h === "jpeg" ? 0.9 : void 0);
+      for (const y of o.elements)
+        await this.drawElement(y);
+      return new Promise((y) => {
+        this.canvas.toBlob(y, `image/${f}`, f === "jpeg" ? 0.9 : void 0);
       });
-    } catch (u) {
-      return console.error("Error exporting section as blob:", u), null;
+    } catch (y) {
+      return console.error("Error exporting section as blob:", y), null;
     }
   }
   async exportCurrentSectionAsJSON(o, a = "png", l = null) {
     var I, T, w;
     const s = ((I = o.activeSection) == null ? void 0 : I.sectionName) || "main";
-    let h = ((T = o.activeSection) == null ? void 0 : T.sectionImage) || ((w = o.activeSection) == null ? void 0 : w.image);
-    l && l.sectionImage && (s === "Front" || l.sections && Object.keys(l.sections).includes(s)) && (h = l.sectionImage);
-    const y = {
+    let f = ((T = o.activeSection) == null ? void 0 : T.sectionImage) || ((w = o.activeSection) == null ? void 0 : w.image);
+    l && l.sectionImage && (s === "Front" || l.sections && Object.keys(l.sections).includes(s)) && (f = l.sectionImage);
+    const x = {
       elements: o.elements,
       selectedColor: o.selectedColor,
       canvasWidth: o.canvasWidth,
       canvasHeight: o.canvasHeight,
       // Include background information using the determined image
-      backgroundImage: h,
-      sectionImage: h,
+      backgroundImage: f,
+      sectionImage: f,
       sectionName: s,
       zoomLevel: o.zoomLevel,
       showGrid: o.showGrid,
@@ -6466,10 +6466,10 @@ class gi {
     }, c = {
       id: s,
       sectionName: s,
-      image: h,
-      sectionImage: h
-    }, u = [], x = [], F = await this.exportSectionAsBlob(
-      y,
+      image: f,
+      sectionImage: f
+    }, y = [], g = [], F = await this.exportSectionAsBlob(
+      x,
       c,
       o.canvasWidth,
       o.canvasHeight,
@@ -6479,18 +6479,18 @@ class gi {
       // Pass initData to exportSectionAsBlob
     );
     if (F) {
-      const z = await this.blobToFile(
+      const B = await this.blobToFile(
         F,
         `${s}-full.${a}`,
         `image/${a}`
       );
-      u.push({
+      y.push({
         sectionName: s,
-        sectionImage: z
+        sectionImage: B
       });
     }
     const C = await this.exportSectionAsBlob(
-      y,
+      x,
       c,
       o.canvasWidth,
       o.canvasHeight,
@@ -6500,21 +6500,21 @@ class gi {
       // Pass initData to exportSectionAsBlob
     );
     if (C) {
-      const z = await this.blobToFile(
+      const B = await this.blobToFile(
         C,
         `${s}-print.${a}`,
         `image/${a}`
       );
-      x.push({
+      g.push({
         sectionName: s,
-        sectionImage: z
+        sectionImage: B
       });
     }
     const p = {
-      sections: { [s]: y },
+      sections: { [s]: x },
       canvasWidth: o.canvasWidth,
       canvasHeight: o.canvasHeight,
-      sectionImage: h,
+      sectionImage: f,
       // Use the determined image here too
       format: a,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
@@ -6530,15 +6530,15 @@ class gi {
       productInfo: {
         sections: [{
           sectionName: s,
-          sectionImage: h,
+          sectionImage: f,
           // Use the determined image here too
           id: s
         }]
       }
     };
     return {
-      fullDesign: u,
-      printReady: x,
+      fullDesign: y,
+      printReady: g,
       designFile: JSON.stringify(p)
     };
   }
@@ -6551,10 +6551,10 @@ class xi {
   saveDesign(o, a) {
     var l;
     try {
-      const s = this.generateDesignId(o), h = (/* @__PURE__ */ new Date()).toISOString(), y = {
+      const s = this.generateDesignId(o), f = (/* @__PURE__ */ new Date()).toISOString(), x = {
         id: s,
         name: o,
-        timestamp: h,
+        timestamp: f,
         version: "1.0",
         canvasData: {
           elements: a.elements || [],
@@ -6570,11 +6570,11 @@ class xi {
         },
         metadata: {
           elementCount: ((l = a.elements) == null ? void 0 : l.length) || 0,
-          lastModified: h,
+          lastModified: f,
           thumbnail: a.thumbnail || null
         }
       };
-      return this.storage.setItem(this.STORAGE_PREFIX + s, JSON.stringify(y)), this.updateDesignsList(s, o, h), { success: !0, designId: s, message: "Design saved successfully" };
+      return this.storage.setItem(this.STORAGE_PREFIX + s, JSON.stringify(x)), this.updateDesignsList(s, o, f), { success: !0, designId: s, message: "Design saved successfully" };
     } catch (s) {
       return console.error("Error saving design:", s), { success: !1, error: s.message };
     }
@@ -6584,10 +6584,10 @@ class xi {
     try {
       let a = o;
       if (!o.startsWith("design_")) {
-        const y = this.getAllDesigns().find((c) => c.name === o);
-        if (!y)
+        const x = this.getAllDesigns().find((c) => c.name === o);
+        if (!x)
           return { success: !1, error: "Design not found" };
-        a = y.id;
+        a = x.id;
       }
       const l = this.storage.getItem(this.STORAGE_PREFIX + a);
       return l ? { success: !0, data: JSON.parse(l) } : { success: !1, error: "Design not found" };
@@ -6620,8 +6620,8 @@ class xi {
       const a = this.loadDesign(o);
       if (!a.success)
         return a;
-      const l = a.data, s = JSON.stringify(l, null, 2), h = new Blob([s], { type: "application/json" }), y = URL.createObjectURL(h), c = document.createElement("a");
-      return c.href = y, c.download = `${l.name}_${l.id}.json`, document.body.appendChild(c), c.click(), document.body.removeChild(c), URL.revokeObjectURL(y), { success: !0, message: "Design exported successfully" };
+      const l = a.data, s = JSON.stringify(l, null, 2), f = new Blob([s], { type: "application/json" }), x = URL.createObjectURL(f), c = document.createElement("a");
+      return c.href = x, c.download = `${l.name}_${l.id}.json`, document.body.appendChild(c), c.click(), document.body.removeChild(c), URL.revokeObjectURL(x), { success: !0, message: "Design exported successfully" };
     } catch (a) {
       return console.error("Error exporting design:", a), { success: !1, error: a.message };
     }
@@ -6633,13 +6633,13 @@ class xi {
         const l = new FileReader();
         l.onload = (s) => {
           try {
-            const h = JSON.parse(s.target.result);
-            if (!this.validateDesignData(h)) {
+            const f = JSON.parse(s.target.result);
+            if (!this.validateDesignData(f)) {
               a({ success: !1, error: "Invalid design file format" });
               return;
             }
-            const y = this.generateDesignId(h.name + "_imported");
-            h.id = y, h.name += "_imported", h.timestamp = (/* @__PURE__ */ new Date()).toISOString(), h.metadata.lastModified = h.timestamp, this.storage.setItem(this.STORAGE_PREFIX + y, JSON.stringify(h)), this.updateDesignsList(y, h.name, h.timestamp), a({ success: !0, data: h, message: "Design imported successfully" });
+            const x = this.generateDesignId(f.name + "_imported");
+            f.id = x, f.name += "_imported", f.timestamp = (/* @__PURE__ */ new Date()).toISOString(), f.metadata.lastModified = f.timestamp, this.storage.setItem(this.STORAGE_PREFIX + x, JSON.stringify(f)), this.updateDesignsList(x, f.name, f.timestamp), a({ success: !0, data: f, message: "Design imported successfully" });
           } catch {
             a({ success: !1, error: "Failed to parse design file" });
           }
@@ -6707,13 +6707,13 @@ class xi {
     return `design_${a}_${l}`;
   }
   updateDesignsList(o, a, l) {
-    const s = this.getAllDesigns(), h = s.findIndex((c) => c.id === o), y = {
+    const s = this.getAllDesigns(), f = s.findIndex((c) => c.id === o), x = {
       id: o,
       name: a,
       timestamp: l,
       lastModified: l
     };
-    h >= 0 ? s[h] = y : s.push(y), s.sort((c, u) => new Date(u.timestamp) - new Date(c.timestamp)), this.storage.setItem(this.DESIGNS_LIST_KEY, JSON.stringify(s));
+    f >= 0 ? s[f] = x : s.push(x), s.sort((c, y) => new Date(y.timestamp) - new Date(c.timestamp)), this.storage.setItem(this.DESIGNS_LIST_KEY, JSON.stringify(s));
   }
   validateDesignData(o) {
     return o && o.id && o.name && o.canvasData && Array.isArray(o.canvasData.elements);
@@ -6763,16 +6763,16 @@ const yi = Ye((d, o) => {
         }
       ]
     },
-    initFile: h,
-    initDesignContent: y
-  } = d, [c, u] = N([]), [x, 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, m] = N(s.sections[0]), [A, Q] = N(!1), [_, Z] = N({}), [V, ht] = N([]), [H, P] = N(-1), [ct] = N(new xi("localStorage")), gt = nt(null), Dt = nt(null), kt = nt(null), wt = nt(null), Ut = nt(null), Et = nt(new gi()), Bt = nt(!1), [yt, Ot] = N(null), lt = ot(() => {
+    initFile: f,
+    initDesignContent: x
+  } = d, [c, y] = N([]), [g, F] = N(null), [C, p] = N(!1), [I, T] = N(!1), [w, B] = N(!1), [E, S] = N({ x: 0, y: 0 }), [$, z] = N(null), [W, at] = N(600), [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), zt = dt(new gi()), Bt = dt(!1), [yt, Qt] = N(null), lt = ot(() => {
     const e = {
       elements: JSON.parse(JSON.stringify(c)),
-      selectedElement: x ? { ...x } : null,
+      selectedElement: g ? { ...g } : null,
       timestamp: Date.now()
     }, t = V.slice(0, H + 1);
     t.push(e), t.length > 50 ? t.shift() : P(H + 1), ht(t);
-  }, [c, x, V, H]), St = ot(() => ({
+  }, [c, g, V, H]), St = ot(() => ({
     elements: c,
     canvasWidth: W,
     canvasHeight: U,
@@ -6783,16 +6783,16 @@ const yi = Ye((d, o) => {
     zoomLevel: q,
     showGrid: J,
     snapToGrid: M,
-    selectedElement: x ? { ...x } : null,
+    selectedElement: g ? { ...g } : null,
     canvasRef: gt
     // Include reference for thumbnail generation
-  }), [c, W, U, Y, j, s, _, q, J, M, x]), 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) {
-        u(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((f) => f.sectionName === t);
-        n && m(n), ht([]), P(-1), setTimeout(() => {
+        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 && u(n), ht([]), P(-1), setTimeout(() => {
           lt();
         }, 100);
         return;
@@ -6802,21 +6802,21 @@ const yi = Ye((d, o) => {
   et(() => {
     const t = setTimeout(async () => {
       if (c.length === 0 && V.length <= 1)
-        if (y)
+        if (x)
           try {
-            const r = JSON.parse(y);
-            Ot(r), Qt(r);
+            const r = JSON.parse(x);
+            Qt(r), $t(r);
           } catch (r) {
             console.error("Error loading design file:", r), console.warn("Using default text instead");
           }
-        else if (h)
+        else if (f)
           try {
-            const r = await fetch(h);
+            const r = await fetch(f);
             if (r.ok) {
               const n = await r.text();
               if (n.trim()) {
-                const f = JSON.parse(n.trim());
-                Ot(f), Qt(f);
+                const h = JSON.parse(n.trim());
+                Qt(h), $t(h);
               }
             } else
               console.warn("Failed to load design file, using default text");
@@ -6824,10 +6824,10 @@ const yi = Ye((d, o) => {
             console.error("Error loading design file:", r), console.warn("Using default text instead");
           }
         else {
-          const n = "Arial", f = "Change me", b = document.createElement("canvas").getContext("2d");
+          const n = "Arial", h = "Change me", b = document.createElement("canvas").getContext("2d");
           b.font = `24px ${n}`;
-          const v = b.measureText(f).width, R = {
-            id: dt(),
+          const v = b.measureText(h).width, R = {
+            id: ct(),
             type: "text",
             x: W / 2 - v / 2,
             // Center the actual text width
@@ -6835,7 +6835,7 @@ const yi = Ye((d, o) => {
             // Center based on font size
             width: v,
             height: 24,
-            text: f,
+            text: h,
             fontSize: 24,
             fontFamily: n,
             fontWeight: "normal",
@@ -6848,16 +6848,16 @@ const yi = Ye((d, o) => {
             rotation: 0,
             opacity: 1
           };
-          u([R]), F(R), setTimeout(() => {
+          y([R]), F(R), setTimeout(() => {
             lt();
           }, 100);
         }
     }, 300);
     return () => clearTimeout(t);
-  }, [h, y, s.colorSettings, s.sections]);
-  const zt = ot((e = "png", t = !0) => {
+  }, [f, x, s.colorSettings, s.sections]);
+  const Wt = ot((e = "png", t = !0) => {
     const r = St();
-    return s.sections, Et.current.exportAllSections(
+    return s.sections, zt.current.exportAllSections(
       { [(j == null ? void 0 : j.sectionName) || "main"]: r },
       [{
         id: (j == null ? void 0 : j.sectionName) || "main",
@@ -6871,7 +6871,7 @@ const yi = Ye((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 yi = Ye((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, f, g) => {
-    e.beginPath(), e.moveTo(t + g, r), e.lineTo(t + n - g, r), e.quadraticCurveTo(t + n, r, t + n, r + g), e.lineTo(t + n, r + f - g), e.quadraticCurveTo(t + n, r + f, t + n - g, r + f), e.lineTo(t + g, r + f), e.quadraticCurveTo(t, r + f, t, r + f - g), e.lineTo(t, r + g), e.quadraticCurveTo(t, r, t + g, 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 yi = Ye((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, f = r.actualBoundingBoxDescent ?? t.fontSize * 0.2, g = r.actualBoundingBoxLeft ?? 0, b = r.actualBoundingBoxRight ?? r.width, k = g + b, v = n + f, R = t.x, D = t.y, L = R - k / 2 - g, tt = D - v / 2 - n;
+    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 };
-  }, he = (e, t) => {
+  }, ge = (e, t) => {
     if (!t) return;
-    const r = 8, n = 8, f = 4, g = 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,
@@ -6933,8 +6933,8 @@ const yi = Ye((d, o) => {
       v.y - 1,
       v.w + 2,
       v.h + 2,
-      f + 1
-    ), e.stroke(), e.strokeStyle = R, e.lineWidth = 2, e.setLineDash([8, 4]), At(e, v.x, v.y, v.w, v.h, f), e.stroke(), e.lineDashOffset = -(Date.now() / 50) % 12, e.strokeStyle = "#ffffff", e.lineWidth = 1, e.setLineDash([4, 8]), At(e, v.x, v.y, v.w, v.h, f), e.stroke(), e.setLineDash([]), e.lineDashOffset = 0, [
+      h + 1
+    ), e.stroke(), e.strokeStyle = R, e.lineWidth = 2, e.setLineDash([8, 4]), At(e, v.x, v.y, v.w, v.h, h), e.stroke(), e.lineDashOffset = -(Date.now() / 50) % 12, e.strokeStyle = "#ffffff", e.lineWidth = 1, e.setLineDash([4, 8]), At(e, v.x, v.y, v.w, v.h, h), e.stroke(), e.setLineDash([]), e.lineDashOffset = 0, [
       { x: v.x, y: v.y },
       { x: v.x + v.w, y: v.y },
       { x: v.x + v.w, y: v.y + v.h },
@@ -6957,11 +6957,11 @@ const yi = Ye((d, o) => {
         n
       );
     });
-    const D = 0, L = v.y - g;
+    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();
-  }, ge = (e, t) => {
+  }, xe = (e, t) => {
     if (!t) return [];
-    const r = $t(e, t), n = t.isIcon ? Math.max(8, 12) : 8, f = 8, g = 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 yi = Ye((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 - g, type: "rotate" }
+      { x: 0, y: k.y - m, type: "rotate" }
     ], R = Math.cos(b), D = Math.sin(b);
     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 : f
+      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 f = n.getContext("2d"), g = ge(f, r);
-    for (const b of g) {
+    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;
@@ -6993,23 +6993,23 @@ const yi = Ye((d, o) => {
   }, Ft = ot(() => {
     if (H > 0) {
       const e = V[H - 1];
-      u(e.elements), F(e.selectedElement), P(H - 1);
+      y(e.elements), F(e.selectedElement), P(H - 1);
     }
   }, [V, H]), bt = ot(() => {
     if (H < V.length - 1) {
       const e = V[H + 1];
-      u(e.elements), F(e.selectedElement), P(H + 1);
+      y(e.elements), F(e.selectedElement), P(H + 1);
     }
   }, [V, H]), mt = (e) => M ? Math.round(e / It) * It : e;
   et(() => {
     if (j != null && j.sectionImage) {
       kt.current = null, wt.current = null;
       const e = gt.current;
-      if (e && e.getContext("2d").clearRect(0, 0, W, U), h && !yt)
+      if (e && e.getContext("2d").clearRect(0, 0, W, U), f && !yt)
         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();
       };
@@ -7021,10 +7021,10 @@ const yi = Ye((d, o) => {
     const e = (t) => {
       const r = document.activeElement;
       if (!(r && (r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.tagName === "SELECT" || r.isContentEditable))) {
-        if ((t.key === "Delete" || t.key === "Backspace") && x && !l) {
+        if ((t.key === "Delete" || t.key === "Backspace") && g && !l) {
           t.preventDefault();
-          const f = x;
-          u((g) => g.filter((b) => b.id !== f.id)), F(null), lt();
+          const h = g;
+          y((m) => m.filter((b) => b.id !== h.id)), F(null), lt();
         }
         if (t.ctrlKey || t.metaKey)
           switch (t.key) {
@@ -7040,122 +7040,122 @@ const yi = Ye((d, o) => {
     return document.addEventListener("keydown", e), () => {
       document.removeEventListener("keydown", e);
     };
-  }, [x, l, Ft, bt, lt]);
-  const xe = (e) => {
+  }, [g, l, Ft, bt, lt]);
+  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;
-  }, dt = () => `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();
     for (let t = 0; t <= U; t += It)
       e.beginPath(), e.moveTo(0, t), e.lineTo(W, t), e.stroke();
     e.setLineDash([]);
-  }, ue = (e, t) => {
+  }, me = (e, t) => {
     e.save();
     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":
         Ee(e, t);
         break;
       case "qrcode":
-        pe(e, t);
+        we(e, t);
         break;
       case "barcode":
-        me(e, t);
+        pe(e, t);
         break;
       case "sticker":
-        Be(e, t);
+        ze(e, t);
         break;
       case "horizontalLine":
-        Re(e, t);
+        De(e, t);
         break;
       case "embroidery":
-        ze(e, t);
+        Be(e, t);
         break;
     }
     e.restore();
-  }, me = (e, t) => {
+  }, pe = (e, t) => {
     if (t.imageObject)
       e.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
       t.imageLoading = !0;
       const r = new Image();
       r.onload = () => {
-        u(
+        y(
           (n) => n.map(
-            (f) => f.id === t.id ? { ...f, imageObject: r, imageLoading: !1 } : f
+            (h) => h.id === t.id ? { ...h, imageObject: r, imageLoading: !1 } : h
           )
         );
       }, r.onerror = () => {
-        u(
+        y(
           (n) => n.map(
-            (f) => f.id === t.id ? { ...f, imageLoading: !1 } : f
+            (h) => h.id === t.id ? { ...h, imageLoading: !1 } : h
           )
         );
-      }, 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) => {
+      }, 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("Your customization", 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("Your customization", 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));
+  }, we = (e, t) => {
     if (t.imageObject)
       e.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
       t.imageLoading = !0;
       const r = new Image();
       r.onload = () => {
-        u(
+        y(
           (n) => n.map(
-            (f) => f.id === t.id ? { ...f, imageObject: r, imageLoading: !1 } : f
+            (h) => h.id === t.id ? { ...h, imageObject: r, imageLoading: !1 } : h
           )
         );
       }, r.onerror = () => {
-        u(
+        y(
           (n) => n.map(
-            (f) => f.id === t.id ? { ...f, imageLoading: !1 } : f
+            (h) => h.id === t.id ? { ...h, imageLoading: !1 } : h
           )
         );
       }, 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,19 +7172,19 @@ const yi = Ye((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(`
-`), f = (t.fontSize || 20) * (t.lineHeight || 1.2), g = Math.max(...n.map((k) => e.measureText(k).width)), b = n.length * f;
+`), 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,
-        g + k * 2,
+        m + k * 2,
         b + k * 2
       ), e.fillStyle = t.fill || "#000000";
     }
     n.forEach((k, v) => {
-      const R = v * f, D = e.measureText(k).width;
+      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 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) {
@@ -7202,145 +7202,160 @@ const yi = Ye((d, o) => {
       typeof t.textDecoration == "string" && t.textDecoration.includes(" ") && t.textDecoration.split(" ").forEach((Ge) => {
         switch (Ge.trim()) {
           case "underline":
-            const ee = R + L + 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 + L / 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) => {
-    const r = Math.min(t.width, t.height) / 2, n = t.width / 2, f = t.height / 2;
-    e.beginPath(), e.arc(n, f, 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());
+    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());
+  }, 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, f = Math.min(t.width, t.height) / 2, g = f * 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 ? f : g, R = k * Math.PI / b, D = r + Math.cos(R) * v, L = n + Math.sin(R) * v;
+      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) => {
-    const r = t.width, n = t.height, f = r * 0.3;
-    e.beginPath(), e.moveTo(r / 2, 0), e.lineTo(r, n * 0.6), e.lineTo(r - f, n * 0.6), e.lineTo(r - f, n), e.lineTo(f, n), e.lineTo(f, 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) => {
+    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());
+  }, 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, f = Math.min(t.width, t.height) / 2, g = 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 < g; b++) {
-      const k = b * 2 * Math.PI / g - Math.PI / 2, v = r + f * Math.cos(k), R = n + f * 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, f = Math.min(t.width, t.height) / 2, g = 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 < g; b++) {
-      const k = b * 2 * Math.PI / g - Math.PI / 2, v = r + f * Math.cos(k), R = n + f * 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, f = 0, g = 0;
+  }, Ie = (e, t) => {
+    const r = t.width, n = t.height, h = 0, m = 0;
     e.beginPath();
     const b = n * 0.3;
-    e.moveTo(f + r / 2, g + b), e.bezierCurveTo(
-      f + r / 2,
-      g,
-      f,
-      g,
-      f,
-      g + b
+    e.moveTo(h + r / 2, m + b), e.bezierCurveTo(
+      h + r / 2,
+      m,
+      h,
+      m,
+      h,
+      m + b
     ), e.bezierCurveTo(
-      f,
-      g + (n + b) / 2,
-      f + r / 2,
-      g + (n + b) / 2,
-      f + r / 2,
-      g + n
+      h,
+      m + (n + b) / 2,
+      h + r / 2,
+      m + (n + b) / 2,
+      h + r / 2,
+      m + n
     ), e.bezierCurveTo(
-      f + r / 2,
-      g + (n + b) / 2,
-      f + r,
-      g + (n + b) / 2,
-      f + r,
-      g + b
+      h + r / 2,
+      m + (n + b) / 2,
+      h + r,
+      m + (n + b) / 2,
+      h + r,
+      m + b
     ), e.bezierCurveTo(
-      f + r,
-      g,
-      f + r / 2,
-      g,
-      f + r / 2,
-      g + b
+      h + r,
+      m,
+      h + r / 2,
+      m,
+      h + r / 2,
+      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, f = t.width / 2, g = t.height / 2;
-    e.beginPath(), e.ellipse(r, n, f, g, 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) => {
+  }, 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();
-  }, De = nt(/* @__PURE__ */ new Map()), Ee = (e, t) => {
-    const n = (() => {
-      if (typeof t.src == "string" && t.src.length > 0) return t.src;
-      const f = t.imageData;
-      return f instanceof HTMLImageElement || typeof f == "string" && f.length > 0 ? f : f && typeof f == "object" && typeof f.src == "string" && f.src.length > 0 ? f.src : null;
-    })();
-    if (n instanceof HTMLImageElement) {
-      if (n.complete && n.naturalWidth > 0 && n.naturalHeight > 0) {
-        e.drawImage(n, 0, 0, t.width, t.height);
-        return;
-      }
-      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 = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading...", t.width / 2, t.height / 2);
-      return;
-    }
-    if (typeof n == "string" && n.length > 0) {
-      const f = De.current;
-      let g = f.get(t.id);
-      if (g || (g = { img: null, error: null, loading: !1, src: n }, f.set(t.id, g)), g.src !== n && (g.img = null, g.error = null, g.loading = !1, g.src = n), g.img && g.img.complete && g.img.naturalWidth > 0 && g.img.naturalHeight > 0) {
-        e.drawImage(g.img, 0, 0, t.width, t.height);
-        return;
+  }, Ee = (e, t) => {
+    const r = t.src || t.imageData;
+    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._imageElement || (t._imageElement = new Image(), t._imageElement.crossOrigin = "anonymous", t._imageElement.onload = () => {
+            X();
+          }, t._imageElement.onerror = () => {
+            console.error("Failed to load image:", r), t._imageLoadError = !0, X();
+          }, t._imageElement.src = r), t._imageElement.complete && t._imageElement.naturalWidth > 0 && t._imageElement.naturalHeight > 0) {
+            e.drawImage(t._imageElement, 0, 0, t.width, t.height);
+            return;
+          }
+          if (t._imageLoadError) {
+            e.fillStyle = "#ffebee", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#f44336", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#f44336", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Error loading image", t.width / 2, t.height / 2);
+            return;
+          }
+        }
+        e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.lineWidth = 1, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Your customization", t.width / 2, t.height / 2);
+      } catch (n) {
+        console.error("Error drawing image:", n), e.fillStyle = "#ffebee", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#f44336", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#f44336", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Error loading image", t.width / 2, t.height / 2);
       }
-      if (!g.loading && !g.error) {
-        g.loading = !0;
-        const b = new Image();
-        n.startsWith("data:") || (b.crossOrigin = "anonymous"), b.onload = () => {
-          g.img = b, g.loading = !1, X();
-        }, b.onerror = () => {
-          g.error = !0, g.loading = !1, console.error("Failed to load image:", n), X();
-        }, b.src = n, typeof b.decode == "function" && b.decode().catch(() => {
-        });
+    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);
+  }, ze = (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, "Your customization");
+      } catch (n) {
+        console.error("Error drawing sticker:", n), Rt(e, t, "Error", !0);
       }
-      g.error ? (e.fillStyle = "#ffebee", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#f44336", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#f44336", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Error loading image", t.width / 2, t.height / 2)) : (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.lineWidth = 1, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading...", t.width / 2, t.height / 2));
-      return;
-    }
-    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);
+    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);
   }, Be = (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));
-  }, ze = (e, t) => {
     if (t.imageObject && t.imageObject.complete && t.imageObject.naturalHeight !== 0)
       try {
         e.drawImage(t.imageObject, 0, 0, t.width, t.height);
@@ -7354,16 +7369,16 @@ const yi = Ye((d, o) => {
         r.complete && r.naturalHeight !== 0 ? (t.imageObject = r, t.imageLoading = !1, X()) : (t.imageLoading = !1, console.error("Image loaded but is invalid:", t.src));
       }, r.onerror = () => {
         t.imageLoading = !1, console.error("Failed to load embroidery image:", t.src), Ct(e, t, "Failed to load");
-      }, r.src = t.src, Ct(e, t, "Loading...");
-    } else t.imageLoading ? Ct(e, t, "Loading...") : Ct(e, t);
+      }, r.src = t.src, Ct(e, t, "Your customization");
+    } else t.imageLoading ? Ct(e, t, "Your customization") : 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, f = r.y + r.height / 2, g = e - n, b = t - f, k = -(r.rotation || 0) * Math.PI / 180, v = Math.cos(k), R = Math.sin(k), D = g * v - b * R, L = g * R + b * v, tt = r.width / 2, xt = r.height / 2;
+    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);
+    (C || I || w) && lt(), p(!1), T(!1), B(!1), z(null);
     const e = gt.current;
     e && (e.style.cursor = "default");
   }, [C, I, w, lt]);
@@ -7371,32 +7386,32 @@ const yi = Ye((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") && x && (Wt(x.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && x && (Yt(x.id), t.preventDefault()), x && ["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 f = t.shiftKey ? 10 : 1;
-        let g = {};
+        const h = t.shiftKey ? 10 : 1;
+        let m = {};
         switch (t.key) {
           case "ArrowUp":
-            g.y = x.y - f;
+            m.y = g.y - h;
             break;
           case "ArrowDown":
-            g.y = x.y + f;
+            m.y = g.y + h;
             break;
           case "ArrowLeft":
-            g.x = x.x - f;
+            m.x = g.x - h;
             break;
           case "ArrowRight":
-            g.x = x.x + f;
+            m.x = g.x + h;
             break;
         }
-        _t(x.id, g), lt();
+        Yt(g.id, m), lt();
       }
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [x, Ft, bt, l]);
+  }, [g, Ft, bt, l]);
   const Me = (e, t = {}) => {
     const r = {
-      id: dt(),
+      id: ct(),
       type: e,
       x: 50,
       y: 50,
@@ -7410,28 +7425,28 @@ const yi = Ye((d, o) => {
     };
     switch (e) {
       case "text":
-        r.id = dt(), r.text = t.text || "New Text", r.fontSize = t.fontSize || 20, r.fontFamily = t.fontFamily || "Arial", r.fontWeight = t.fontWeight || "normal", r.fontStyle = t.fontStyle || "normal", r.textAlign = t.textAlign || "left", r.width = 150, r.height = 50;
+        r.id = ct(), r.text = t.text || "New Text", r.fontSize = t.fontSize || 20, r.fontFamily = t.fontFamily || "Arial", r.fontWeight = t.fontWeight || "normal", r.fontStyle = t.fontStyle || "normal", r.textAlign = t.textAlign || "left", r.width = 150, r.height = 50;
         break;
       case "icon":
-        r.id = dt(), r.text = t.text || "🎯", r.fontSize = t.fontSize || 48, r.fontFamily = t.fontFamily || "Arial", r.fontWeight = t.fontWeight || "normal", r.fontStyle = t.fontStyle || "normal", r.textAlign = "center", r.width = 80, r.height = 80, r.iconData = t.iconData || null, r.type = "text", r.isIcon = !0;
+        r.id = ct(), r.text = t.text || "🎯", r.fontSize = t.fontSize || 48, r.fontFamily = t.fontFamily || "Arial", r.fontWeight = t.fontWeight || "normal", r.fontStyle = t.fontStyle || "normal", r.textAlign = "center", r.width = 80, r.height = 80, r.iconData = t.iconData || null, r.type = "text", r.isIcon = !0;
         break;
       case "image":
-        r.id = dt(), r.imageData = t.imageData || null, r.width = t.width || 200, r.height = t.height || 200;
+        r.id = ct(), r.imageData = t.imageData || null, r.width = t.width || 200, r.height = t.height || 200;
         break;
       case "qrcode":
-        r.id = dt(), r.type = "qrcode", r.x = (t == null ? void 0 : t.x) || W / 2 - ((t == null ? void 0 : t.width) || 100) / 2, r.y = (t == null ? void 0 : t.y) || U / 2 - ((t == null ? void 0 : t.height) || 100) / 2, r.width = (t == null ? void 0 : t.width) || 100, r.height = (t == null ? void 0 : t.height) || 100, r.src = (t == null ? void 0 : t.src) || "", r.data = (t == null ? void 0 : t.data) || "", r.rotation = 0, r.opacity = 1;
+        r.id = ct(), r.type = "qrcode", r.x = (t == null ? void 0 : t.x) || W / 2 - ((t == null ? void 0 : t.width) || 100) / 2, r.y = (t == null ? void 0 : t.y) || U / 2 - ((t == null ? void 0 : t.height) || 100) / 2, r.width = (t == null ? void 0 : t.width) || 100, r.height = (t == null ? void 0 : t.height) || 100, r.src = (t == null ? void 0 : t.src) || "", r.data = (t == null ? void 0 : t.data) || "", r.rotation = 0, r.opacity = 1;
         break;
       case "barcode":
-        r.id = dt(), r.type = "barcode", r.x = (t == null ? void 0 : t.x) || W / 2 - ((t == null ? void 0 : t.width) || 200) / 2, r.y = (t == null ? void 0 : t.y) || U / 2 - ((t == null ? void 0 : t.height) || 100) / 2, r.width = (t == null ? void 0 : t.width) || 200, r.height = (t == null ? void 0 : t.height) || 100, r.src = (t == null ? void 0 : t.src) || "", r.data = (t == null ? void 0 : t.data) || "", r.format = (t == null ? void 0 : t.format) || "CODE128", r.rotation = 0, r.opacity = 1, r.imageObject = (t == null ? void 0 : t.imageObject) || null;
+        r.id = ct(), r.type = "barcode", r.x = (t == null ? void 0 : t.x) || W / 2 - ((t == null ? void 0 : t.width) || 200) / 2, r.y = (t == null ? void 0 : t.y) || U / 2 - ((t == null ? void 0 : t.height) || 100) / 2, r.width = (t == null ? void 0 : t.width) || 200, r.height = (t == null ? void 0 : t.height) || 100, r.src = (t == null ? void 0 : t.src) || "", r.data = (t == null ? void 0 : t.data) || "", r.format = (t == null ? void 0 : t.format) || "CODE128", r.rotation = 0, r.opacity = 1, r.imageObject = (t == null ? void 0 : t.imageObject) || null;
         break;
       case "sticker":
-        r.id = dt(), r.type = "sticker", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
+        r.id = ct(), r.type = "sticker", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
         break;
       case "horizontalLine":
-        r.id = dt(), r.type = "horizontalLine", r.x = W / 2 - 100, r.y = U / 2 - 1, r.width = 200, r.height = 2, r.fill = "#000000", r.stroke = "#000000", r.strokeWidth = 2, r.rotation = 0, r.opacity = 1;
+        r.id = ct(), r.type = "horizontalLine", r.x = W / 2 - 100, r.y = U / 2 - 1, r.width = 200, r.height = 2, r.fill = "#000000", r.stroke = "#000000", r.strokeWidth = 2, r.rotation = 0, r.opacity = 1;
         break;
       case "embroidery":
-        r.id = dt(), r.type = "embroidery", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
+        r.id = ct(), r.type = "embroidery", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
         break;
       case "rectangle":
       case "circle":
@@ -7449,29 +7464,29 @@ const yi = Ye((d, o) => {
         console.warn(`Unknown element type: ${e}`);
         return;
     }
-    u((n) => [...n, r]), F(r), lt();
-  }, _t = (e, t) => {
-    u((r) => r.map(
+    y((n) => [...n, r]), F(r), lt();
+  }, Yt = (e, t) => {
+    y((r) => r.map(
       (n) => n.id === e ? { ...n, ...t } : n
-    )), x && x.id === e && F((r) => ({ ...r, ...t }));
-  }, Wt = ot(() => {
-    x && (u((e) => e.filter((t) => t.id !== x.id)), F(null), lt());
-  }, [x, lt]), Yt = (e) => {
+    )), g && g.id === e && F((r) => ({ ...r, ...t }));
+  }, Mt = ot(() => {
+    g && (y((e) => e.filter((t) => t.id !== g.id)), F(null), lt());
+  }, [g, lt]), qt = (e) => {
     const t = c.find((r) => r.id === e);
     if (t) {
       const r = {
         ...t,
-        id: dt(),
+        id: ct(),
         x: t.x + 20,
         y: t.y + 20
       };
-      u((n) => [...n, r]), F(r), lt();
+      y((n) => [...n, r]), F(r), lt();
     }
-  }, qt = (e, t) => {
-    const r = c.findIndex((g) => g.id === e);
+  }, Vt = (e, t) => {
+    const r = c.findIndex((m) => m.id === e);
     if (r === -1) return;
-    const n = [...c], f = n[r];
-    t === "up" && r < n.length - 1 ? (n[r] = n[r + 1], n[r + 1] = f) : t === "down" && r > 0 ? (n[r] = n[r - 1], n[r - 1] = f) : t === "top" ? (n.splice(r, 1), n.push(f)) : t === "bottom" && (n.splice(r, 1), n.unshift(f)), u(n), lt();
+    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();
   };
   ot(() => {
     j && Z((e) => ({
@@ -7496,13 +7511,13 @@ const yi = Ye((d, o) => {
     }));
   }, [j, c, Y]);
   Ve(o, () => ({
-    handleSectionChange: Vt,
+    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
@@ -7513,18 +7528,18 @@ const yi = Ye((d, o) => {
           selectedColor: t.selectedColor,
           canvasWidth: t.canvasWidth,
           canvasHeight: t.canvasHeight
-        }, f = {
+        }, h = {
           ...t.sectionDesigns || {},
           [r]: n
-        }, g = 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(
-          f,
-          g,
+        return await zt.current.exportAllSectionsAsJSON(
+          h,
+          m,
           W,
           U,
           e,
@@ -7537,146 +7552,146 @@ const yi = Ye((d, o) => {
     exportCurrentSectionAsJSON: async (e = "png") => {
       try {
         const t = St();
-        return await Et.current.exportCurrentSectionAsJSON(t, e, yt);
+        return await zt.current.exportCurrentSectionAsJSON(t, e, yt);
       } catch (t) {
         throw console.error("Export current section as JSON failed:", t), t;
       }
     }
   }));
-  const ut = nt(null), Mt = nt(!1), X = ot(() => {
+  const ut = dt(null), Lt = dt(!1), X = ot(() => {
     const e = gt.current;
-    if (!e || Mt.current) return;
-    Mt.current = !0;
+    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.save(), t.globalAlpha = r.opacity || 1, ue(t, r), t.restore();
-    }), x && he(t, x), Mt.current = !1;
-  }, [c, x, W, U, J]), vt = ot(() => {
+    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 && ge(t, g), Lt.current = !1;
+  }, [c, g, W, U, J]), vt = ot(() => {
     ut.current && cancelAnimationFrame(ut.current), ut.current = requestAnimationFrame(() => {
       X(), ut.current = null;
     });
   }, [X]);
   et(() => {
     vt();
-  }, [c, x, W, U, J, vt]), et(() => {
+  }, [c, g, W, U, J, vt]), et(() => {
     wt.current && vt();
   }, [wt.current, vt]), et(() => () => {
     ut.current && cancelAnimationFrame(ut.current);
   }, []);
-  const Lt = ot(() => {
-    X(), (C || I || w) && (ut.current = requestAnimationFrame(Lt));
+  const Pt = ot(() => {
+    X(), (C || I || w) && (ut.current = requestAnimationFrame(Pt));
   }, [X, C, I, w]);
   et(() => {
-    C || I || w ? Lt() : (ut.current && (cancelAnimationFrame(ut.current), ut.current = null), vt());
-  }, [C, I, w, Lt, vt]);
+    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, f = (e.clientY - r.top) / q;
-    if (S({ x: n, y: f }), x) {
-      const b = Ht(n, f, x);
+    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 = Gt(n, h, g);
       if (b) {
         if (b === "rotate") {
-          z(!0);
-          const k = x.x + x.width / 2, v = x.y + x.height / 2, R = Math.atan2(f - v, n - k) * 180 / Math.PI;
+          B(!0);
+          const k = g.x + g.width / 2, v = g.y + g.height / 2, R = Math.atan2(h - v, n - k) * 180 / Math.PI;
           S({
             x: n,
-            y: f,
+            y: h,
             initialAngle: R,
-            initialRotation: x.rotation || 0
+            initialRotation: g.rotation || 0
           });
         } else
-          T(!0), B(b), S({
+          T(!0), z(b), S({
             x: n,
-            y: f,
-            initialWidth: x.width,
-            initialHeight: x.height,
-            initialX: x.x,
-            initialY: x.y
+            y: h,
+            initialWidth: g.width,
+            initialHeight: g.height,
+            initialX: g.x,
+            initialY: g.y
           });
         return;
       }
     }
-    let g = null;
+    let m = null;
     for (let b = c.length - 1; b >= 0; b--)
-      if (Gt(n, f, c[b])) {
-        g = c[b];
+      if (_t(n, h, c[b])) {
+        m = c[b];
         break;
       }
-    g ? (F(g), p(!0), S({
+    m ? (F(m), p(!0), S({
       x: n,
-      y: f,
-      offsetX: n - g.x,
-      offsetY: f - g.y
+      y: h,
+      offsetX: n - m.x,
+      offsetY: h - m.y
     })) : F(null), X();
-  }, [l, q, x, c, X]), Oe = 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, f = (e.clientY - r.top) / q;
-    if (x && !C && !I && !w) {
-      const g = Ht(n, f, x);
-      g ? g === "rotate" ? t.style.cursor = "grab" : t.style.cursor = g : Gt(n, f, x) ? t.style.cursor = "move" : t.style.cursor = "default";
+    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 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 && x) {
-      const g = x.x + x.width / 2, b = x.y + x.height / 2, v = Math.atan2(f - b, n - g) * 180 / Math.PI - E.initialAngle;
+    if (w && g) {
+      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, u(
+      e.shiftKey && (R = Math.round(R / 15) * 15), R = (R % 360 + 360) % 360, y(
         (D) => D.map(
-          (L) => L.id === x.id ? { ...L, rotation: R } : L
+          (L) => L.id === g.id ? { ...L, rotation: R } : L
         )
       ), F((D) => ({ ...D, rotation: R })), X();
       return;
     }
-    if (I && x && $) {
-      const g = n - E.x, b = f - E.y;
+    if (I && g && $) {
+      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 + g), 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 - g), 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 + g), 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 - g), 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 && x.type !== "text") {
+      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));
       }
       M && (R = mt(R), D = mt(D), k = mt(k), v = mt(v));
       const L = {
-        ...x,
+        ...g,
         x: R,
         y: D,
         width: k,
         height: v
       };
-      u(
+      y(
         (tt) => tt.map(
-          (xt) => xt.id === x.id ? L : xt
+          (xt) => xt.id === g.id ? L : xt
         )
       ), F(L), X();
       return;
     }
-    if (C && x) {
-      let g = n - E.offsetX, b = f - E.offsetY;
-      M && (g = mt(g), b = mt(b)), g = Math.max(0, Math.min(W - x.width, g)), b = Math.max(0, Math.min(U - x.height, b));
+    if (C && g) {
+      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 = {
-        ...x,
-        x: g,
+        ...g,
+        x: m,
         y: b
       };
-      u(
+      y(
         (v) => v.map(
-          (R) => R.id === x.id ? k : R
+          (R) => R.id === g.id ? k : R
         )
       ), F(k), X();
     }
-  }, [l, q, x, C, I, w, $, E, M, 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]: {
@@ -7693,29 +7708,29 @@ const yi = Ye((d, o) => {
     if (t) {
       const r = t.elements.map((n) => {
         if (n.type === "image" && n.src && !n.imageData) {
-          const f = new Image();
-          return f.onload = () => {
-            u(
-              (g) => g.map(
-                (b) => b.id === n.id ? { ...b, imageData: f } : b
+          const h = new Image();
+          return h.onload = () => {
+            y(
+              (m) => m.map(
+                (b) => b.id === n.id ? { ...b, imageData: h } : b
               )
             ), X();
-          }, f.src = n.src, { ...n, imageData: f };
+          }, h.src = n.src, { ...n, imageData: h };
         }
         return n;
       });
-      u(r), O(t.selectedColor || Y);
+      y(r), O(t.selectedColor || Y);
     } else
-      u([]);
-    m(e), F(null);
+      y([]);
+    u(e), F(null);
   }, [j, c, Y, _, X]), Qe = ot((e) => {
     if (e && e.type.startsWith("image/")) {
       const t = new FileReader();
       t.onload = (r) => {
         const n = new Image();
         n.onload = () => {
-          const f = {
-            id: dt(),
+          const h = {
+            id: ct(),
             type: "image",
             x: mt(W / 2 - 100),
             y: mt(U / 2 - 100),
@@ -7727,8 +7742,8 @@ const yi = Ye((d, o) => {
             src: r.target.result,
             originalWidth: n.width,
             originalHeight: n.height
-          }, g = n.width / n.height;
-          f.width / f.height !== g && (f.width / g <= 200 ? f.height = f.width / g : f.width = f.height * g), u((b) => [...b, f]), F(f), 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;
@@ -7737,7 +7752,7 @@ const yi = Ye((d, o) => {
       }, t.readAsDataURL(e);
     } else
       alert("Please select a valid image file.");
-  }, [W, U, mt, dt, lt]), Xt = ot(
+  }, [W, U, mt, ct, lt]), Jt = ot(
     $e(() => {
       X();
     }, 16),
@@ -7745,49 +7760,49 @@ const yi = Ye((d, o) => {
     [X]
   );
   et(() => {
-    Bt.current || Xt();
-  }, [c, x, J, Xt]);
+    Bt.current || Jt();
+  }, [c, g, J, Jt]);
   function $e(e, t) {
     let r;
-    return function(...f) {
-      const g = () => {
-        clearTimeout(r), e(...f);
+    return function(...h) {
+      const m = () => {
+        clearTimeout(r), e(...h);
       };
-      clearTimeout(r), r = setTimeout(g, 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 He = (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 f = n.getImageData(0, 0, W, U), g = f.data, b = xe(t);
+    const h = n.getImageData(0, 0, W, U), m = h.data, b = ye(t);
     if (!b) {
       Bt.current = !1;
       return;
     }
     const { r: k, g: v, b: R } = b;
-    for (let L = 0; L < g.length; L += 4) {
-      if (g[L + 3] === 0) continue;
-      const xt = He(g[L], g[L + 1], g[L + 2]);
-      g[L] = Math.round(k * xt), g[L + 1] = Math.round(v * xt), g[L + 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(f, 0, 0);
+    n.putImageData(h, 0, 0);
     const D = new Image();
     D.onload = () => {
       wt.current = s.plainColor === "Y" ? D : e, Bt.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(), f = r.getBoundingClientRect(), g = n.width, b = f.height, k = 50, v = [], R = [];
-    for (let D = k; D <= g; D += k)
-      D <= g - 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)
       });
@@ -7797,12 +7812,12 @@ const yi = Ye((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();
@@ -7816,8 +7831,8 @@ const yi = Ye((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);
     }
@@ -7826,8 +7841,8 @@ const yi = Ye((d, o) => {
       di,
       {
         onAddElement: Me,
-        onDeleteElement: () => x && Wt(x.id),
-        onDuplicateElement: () => x && Yt(x.id),
+        onDeleteElement: () => g && Mt(g.id),
+        onDuplicateElement: () => g && qt(g.id),
         onUndo: Ft,
         onRedo: bt,
         onToggleGrid: () => st(!J),
@@ -7839,7 +7854,7 @@ const yi = Ye((d, o) => {
         showGrid: J,
         showRulers: K,
         snapToGrid: M,
-        selectedElement: x,
+        selectedElement: g,
         theme: a,
         readOnly: l,
         apiKey: d.apiKey,
@@ -7848,7 +7863,7 @@ const yi = Ye((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",
@@ -7857,7 +7872,7 @@ const yi = Ye((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",
@@ -7867,7 +7882,7 @@ const yi = Ye((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,
@@ -7888,10 +7903,10 @@ const yi = Ye((d, o) => {
         /* @__PURE__ */ i.jsx(
           fi,
           {
-            selectedElement: x,
-            onUpdate: _t,
-            onMoveLayer: qt,
-            availableFonts: fe,
+            selectedElement: g,
+            onUpdate: Yt,
+            onMoveLayer: Vt,
+            availableFonts: he,
             theme: a
           }
         ),
@@ -7899,10 +7914,10 @@ const yi = Ye((d, o) => {
           hi,
           {
             elements: c,
-            selectedElement: x,
+            selectedElement: g,
             onSelectElement: F,
-            onMoveLayer: qt,
-            onDeleteElement: Wt,
+            onMoveLayer: Vt,
+            onDeleteElement: Mt,
             theme: a
           }
         )
@@ -7922,8 +7937,8 @@ const yi = Ye((d, o) => {
               className: `section-thumbnail compact ${j.sectionName === e.sectionName ? "active" : ""}`,
               onClick: (r) => {
                 r.stopPropagation();
-                const n = s.sections.find((f) => f.sectionName === e.sectionName);
-                Vt(n);
+                const n = s.sections.find((h) => h.sectionName === e.sectionName);
+                Xt(n);
               },
               title: e.sectionName,
               children: [