@mypixia/simplex-designer 2.0.6 → 2.0.7

package/dist/index.es.js

@@ -1,8 +1,8 @@
-import Qe, { useState as N, useRef as gt, useEffect as ot, useMemo as ie, forwardRef as $e, useCallback as rt, useReducer as He, useImperativeHandle as Ge } from "react";
+import Qe, { useState as N, useRef as gt, useEffect as rt, useMemo as ie, forwardRef as $e, useCallback as at, useReducer as He, useImperativeHandle as Ge } from "react";
 import _e from "qrcode";
 import Ye from "react-barcode";
 import oe from "axios";
-import './index_external.css';var Et = { exports: {} }, Tt = {};
+import './index_external.css';var Et = { exports: {} }, jt = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -14,27 +14,27 @@ import './index_external.css';var Et = { exports: {} }, Tt = {};
  */
 var re;
 function qe() {
-  if (re) return Tt;
+  if (re) return jt;
   re = 1;
   var f = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
-  function a(l, s, h) {
-    var x = null;
-    if (h !== void 0 && (x = "" + h), s.key !== void 0 && (x = "" + s.key), "key" in s) {
-      h = {};
+  function a(l, s, g) {
+    var h = null;
+    if (g !== void 0 && (h = "" + g), s.key !== void 0 && (h = "" + s.key), "key" in s) {
+      g = {};
       for (var n in s)
-        n !== "key" && (h[n] = s[n]);
-    } else h = s;
-    return s = h.ref, {
+        n !== "key" && (g[n] = s[n]);
+    } else g = s;
+    return s = g.ref, {
       $$typeof: f,
       type: l,
-      key: x,
+      key: h,
       ref: s !== void 0 ? s : null,
-      props: h
+      props: g
     };
   }
-  return Tt.Fragment = o, Tt.jsx = a, Tt.jsxs = a, Tt;
+  return jt.Fragment = o, jt.jsx = a, jt.jsxs = a, jt;
 }
-var jt = {};
+var Tt = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -47,163 +47,163 @@ var jt = {};
 var ae;
 function Ve() {
   return ae || (ae = 1, process.env.NODE_ENV !== "production" && function() {
-    function f(u) {
-      if (u == null) return null;
-      if (typeof u == "function")
-        return u.$$typeof === _ ? null : u.displayName || u.name || null;
-      if (typeof u == "string") return u;
-      switch (u) {
-        case b:
+    function f(y) {
+      if (y == null) return null;
+      if (typeof y == "function")
+        return y.$$typeof === _ ? null : y.displayName || y.name || null;
+      if (typeof y == "string") return y;
+      switch (y) {
+        case p:
           return "Fragment";
-        case J:
+        case X:
           return "Profiler";
-        case F:
+        case v:
           return "StrictMode";
-        case st:
+        case Z:
           return "Suspense";
         case W:
           return "SuspenseList";
         case ft:
           return "Activity";
       }
-      if (typeof u == "object")
-        switch (typeof u.tag == "number" && console.error(
+      if (typeof y == "object")
+        switch (typeof y.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), u.$$typeof) {
-          case B:
+        ), y.$$typeof) {
+          case j:
             return "Portal";
           case O:
-            return (u.displayName || "Context") + ".Provider";
+            return (y.displayName || "Context") + ".Provider";
           case T:
-            return (u._context.displayName || "Context") + ".Consumer";
-          case v:
-            var D = u.render;
-            return u = u.displayName, u || (u = D.displayName || D.name || "", u = u !== "" ? "ForwardRef(" + u + ")" : "ForwardRef"), u;
+            return (y._context.displayName || "Context") + ".Consumer";
+          case k:
+            var D = y.render;
+            return y = y.displayName, y || (y = D.displayName || D.name || "", y = y !== "" ? "ForwardRef(" + y + ")" : "ForwardRef"), y;
           case xt:
-            return D = u.displayName || null, D !== null ? D : f(u.type) || "Memo";
+            return D = y.displayName || null, D !== null ? D : f(y.type) || "Memo";
           case Q:
-            D = u._payload, u = u._init;
+            D = y._payload, y = y._init;
             try {
-              return f(u(D));
+              return f(y(D));
             } catch {
             }
         }
       return null;
     }
-    function o(u) {
-      return "" + u;
+    function o(y) {
+      return "" + y;
     }
-    function a(u) {
+    function a(y) {
       try {
-        o(u);
+        o(y);
         var D = !1;
       } catch {
         D = !0;
       }
       if (D) {
         D = console;
-        var L = D.error, H = typeof Symbol == "function" && Symbol.toStringTag && u[Symbol.toStringTag] || u.constructor.name || "Object";
+        var L = D.error, H = typeof Symbol == "function" && Symbol.toStringTag && y[Symbol.toStringTag] || y.constructor.name || "Object";
         return L.call(
           D,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           H
-        ), o(u);
+        ), o(y);
       }
     }
-    function l(u) {
-      if (u === b) return "<>";
-      if (typeof u == "object" && u !== null && u.$$typeof === Q)
+    function l(y) {
+      if (y === p) return "<>";
+      if (typeof y == "object" && y !== null && y.$$typeof === Q)
         return "<...>";
       try {
-        var D = f(u);
+        var D = f(y);
         return D ? "<" + D + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function s() {
-      var u = at.A;
-      return u === null ? null : u.getOwner();
+      var y = st.A;
+      return y === null ? null : y.getOwner();
     }
-    function h() {
+    function g() {
       return Error("react-stack-top-frame");
     }
-    function x(u) {
-      if (M.call(u, "key")) {
-        var D = Object.getOwnPropertyDescriptor(u, "key").get;
+    function h(y) {
+      if (M.call(y, "key")) {
+        var D = Object.getOwnPropertyDescriptor(y, "key").get;
         if (D && D.isReactWarning) return !1;
       }
-      return u.key !== void 0;
+      return y.key !== void 0;
     }
-    function n(u, D) {
+    function n(y, D) {
       function L() {
         ct || (ct = !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)",
           D
         ));
       }
-      L.isReactWarning = !0, Object.defineProperty(u, "key", {
+      L.isReactWarning = !0, Object.defineProperty(y, "key", {
         get: L,
         configurable: !0
       });
     }
-    function d() {
-      var u = f(this.type);
-      return Y[u] || (Y[u] = !0, console.error(
+    function c() {
+      var y = f(this.type);
+      return Y[y] || (Y[y] = !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."
-      )), u = this.props.ref, u !== void 0 ? u : null;
+      )), y = this.props.ref, y !== void 0 ? y : null;
     }
-    function j(u, D, L, H, G, et, X, q) {
-      return L = et.ref, u = {
-        $$typeof: E,
-        type: u,
+    function F(y, D, L, H, G, it, J, q) {
+      return L = it.ref, y = {
+        $$typeof: B,
+        type: y,
         key: D,
-        props: et,
+        props: it,
         _owner: G
-      }, (L !== void 0 ? L : null) !== null ? Object.defineProperty(u, "ref", {
+      }, (L !== void 0 ? L : null) !== null ? Object.defineProperty(y, "ref", {
         enumerable: !1,
-        get: d
-      }) : Object.defineProperty(u, "ref", { enumerable: !1, value: null }), u._store = {}, Object.defineProperty(u._store, "validated", {
+        get: c
+      }) : Object.defineProperty(y, "ref", { enumerable: !1, value: null }), y._store = {}, Object.defineProperty(y._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(u, "_debugInfo", {
+      }), Object.defineProperty(y, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(u, "_debugStack", {
+      }), Object.defineProperty(y, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: X
-      }), Object.defineProperty(u, "_debugTask", {
+        value: J
+      }), Object.defineProperty(y, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: q
-      }), Object.freeze && (Object.freeze(u.props), Object.freeze(u)), u;
+      }), Object.freeze && (Object.freeze(y.props), Object.freeze(y)), y;
     }
-    function S(u, D, L, H, G, et, X, q) {
+    function I(y, D, L, H, G, it, J, q) {
       var U = D.children;
       if (U !== void 0)
         if (H)
           if (nt(U)) {
             for (H = 0; H < U.length; H++)
-              I(U[H]);
+              E(U[H]);
             Object.freeze && Object.freeze(U);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else I(U);
+        else E(U);
       if (M.call(D, "key")) {
-        U = f(u);
-        var K = Object.keys(D).filter(function(mt) {
-          return mt !== "key";
+        U = f(y);
+        var K = Object.keys(D).filter(function(pt) {
+          return pt !== "key";
         });
-        H = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", tt[U + H] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
+        H = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", et[U + H] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -214,68 +214,68 @@ React keys must be passed directly to JSX without using spread:
           U,
           K,
           U
-        ), tt[U + H] = !0);
+        ), et[U + H] = !0);
       }
-      if (U = null, L !== void 0 && (a(L), U = "" + L), x(D) && (a(D.key), U = "" + D.key), "key" in D) {
+      if (U = null, L !== void 0 && (a(L), U = "" + L), h(D) && (a(D.key), U = "" + D.key), "key" in D) {
         L = {};
         for (var kt in D)
           kt !== "key" && (L[kt] = D[kt]);
       } else L = D;
       return U && n(
         L,
-        typeof u == "function" ? u.displayName || u.name || "Unknown" : u
-      ), j(
-        u,
+        typeof y == "function" ? y.displayName || y.name || "Unknown" : y
+      ), F(
+        y,
         U,
-        et,
+        it,
         G,
         s(),
         L,
-        X,
+        J,
         q
       );
     }
-    function I(u) {
-      typeof u == "object" && u !== null && u.$$typeof === E && u._store && (u._store.validated = 1);
+    function E(y) {
+      typeof y == "object" && y !== null && y.$$typeof === B && y._store && (y._store.validated = 1);
     }
-    var y = Qe, E = Symbol.for("react.transitional.element"), B = Symbol.for("react.portal"), b = Symbol.for("react.fragment"), F = Symbol.for("react.strict_mode"), J = Symbol.for("react.profiler"), T = Symbol.for("react.consumer"), O = Symbol.for("react.context"), v = Symbol.for("react.forward_ref"), st = Symbol.for("react.suspense"), W = Symbol.for("react.suspense_list"), xt = Symbol.for("react.memo"), Q = Symbol.for("react.lazy"), ft = Symbol.for("react.activity"), _ = Symbol.for("react.client.reference"), at = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, nt = Array.isArray, Z = console.createTask ? console.createTask : function() {
+    var m = Qe, B = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), X = Symbol.for("react.profiler"), T = Symbol.for("react.consumer"), O = Symbol.for("react.context"), k = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), W = Symbol.for("react.suspense_list"), xt = Symbol.for("react.memo"), Q = Symbol.for("react.lazy"), ft = Symbol.for("react.activity"), _ = Symbol.for("react.client.reference"), st = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, nt = Array.isArray, tt = console.createTask ? console.createTask : function() {
       return null;
     };
-    y = {
-      "react-stack-bottom-frame": function(u) {
-        return u();
+    m = {
+      "react-stack-bottom-frame": function(y) {
+        return y();
       }
     };
-    var ct, Y = {}, P = y["react-stack-bottom-frame"].bind(
-      y,
-      h
-    )(), C = Z(l(h)), tt = {};
-    jt.Fragment = b, jt.jsx = function(u, D, L, H, G) {
-      var et = 1e4 > at.recentlyCreatedOwnerStacks++;
-      return S(
-        u,
+    var ct, Y = {}, P = m["react-stack-bottom-frame"].bind(
+      m,
+      g
+    )(), C = tt(l(g)), et = {};
+    Tt.Fragment = p, Tt.jsx = function(y, D, L, H, G) {
+      var it = 1e4 > st.recentlyCreatedOwnerStacks++;
+      return I(
+        y,
         D,
         L,
         !1,
         H,
         G,
-        et ? Error("react-stack-top-frame") : P,
-        et ? Z(l(u)) : C
+        it ? Error("react-stack-top-frame") : P,
+        it ? tt(l(y)) : C
       );
-    }, jt.jsxs = function(u, D, L, H, G) {
-      var et = 1e4 > at.recentlyCreatedOwnerStacks++;
-      return S(
-        u,
+    }, Tt.jsxs = function(y, D, L, H, G) {
+      var it = 1e4 > st.recentlyCreatedOwnerStacks++;
+      return I(
+        y,
         D,
         L,
         !0,
         H,
         G,
-        et ? Error("react-stack-top-frame") : P,
-        et ? Z(l(u)) : C
+        it ? Error("react-stack-top-frame") : P,
+        it ? tt(l(y)) : C
       );
     };
-  }()), jt;
+  }()), Tt;
 }
 var se;
 function Xe() {
@@ -381,24 +381,24 @@ const Ut = {
 ), Je = (f) => ne().filter(
   (a) => a.name.toLowerCase().includes(f.toLowerCase()) || a.category.toLowerCase().includes(f.toLowerCase())
 ), Ke = ({ onSelectIcon: f, disabled: o = !1 }) => {
-  const [a, l] = N(!1), [s, h] = N(""), [x, n] = N("all"), d = gt(null);
-  ot(() => {
-    const y = (E) => {
-      d.current && !d.current.contains(E.target) && l(!1);
+  const [a, l] = N(!1), [s, g] = N(""), [h, n] = N("all"), c = gt(null);
+  rt(() => {
+    const m = (B) => {
+      c.current && !c.current.contains(B.target) && l(!1);
     };
-    return document.addEventListener("mousedown", y), () => document.removeEventListener("mousedown", y);
+    return document.addEventListener("mousedown", m), () => document.removeEventListener("mousedown", m);
   }, []);
-  const j = (y) => {
-    f(y), l(!1), h("");
-  }, I = (() => {
-    let y = ne();
-    if (s.trim() && (y = Je(s)), x !== "all") {
-      const E = Ut[x];
-      E && (y = y.filter((B) => B.category === E.name));
+  const F = (m) => {
+    f(m), l(!1), g("");
+  }, E = (() => {
+    let m = ne();
+    if (s.trim() && (m = Je(s)), h !== "all") {
+      const B = Ut[h];
+      B && (m = m.filter((j) => j.category === B.name));
     }
-    return y;
+    return m;
   })();
-  return /* @__PURE__ */ i.jsxs("div", { className: "icon-selector", ref: d, children: [
+  return /* @__PURE__ */ i.jsxs("div", { className: "icon-selector", ref: c, children: [
     /* @__PURE__ */ i.jsxs(
       "button",
       {
@@ -421,49 +421,49 @@ const Ut = {
             type: "text",
             placeholder: "Search icons...",
             value: s,
-            onChange: (y) => h(y.target.value),
+            onChange: (m) => g(m.target.value),
             className: "icon-search"
           }
         ),
         /* @__PURE__ */ i.jsxs(
           "select",
           {
-            value: x,
-            onChange: (y) => n(y.target.value),
+            value: h,
+            onChange: (m) => n(m.target.value),
             className: "category-select",
             children: [
               /* @__PURE__ */ i.jsx("option", { value: "all", children: "All Categories" }),
-              Object.entries(Ut).map(([y, E]) => /* @__PURE__ */ i.jsx("option", { value: y, children: E.name }, y))
+              Object.entries(Ut).map(([m, B]) => /* @__PURE__ */ i.jsx("option", { value: m, children: B.name }, m))
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ i.jsx("div", { className: "icon-grid", children: I.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-icons", children: s ? "No icons found" : "No icons in this category" }) : I.map((y, E) => /* @__PURE__ */ i.jsxs(
+      /* @__PURE__ */ i.jsx("div", { className: "icon-grid", children: E.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-icons", children: s ? "No icons found" : "No icons in this category" }) : E.map((m, B) => /* @__PURE__ */ i.jsxs(
         "button",
         {
           className: "icon-item",
-          onClick: () => j(y),
-          title: `${y.name} (${y.category})`,
+          onClick: () => F(m),
+          title: `${m.name} (${m.category})`,
           children: [
-            /* @__PURE__ */ i.jsx("span", { className: "icon-symbol", children: y.symbol }),
-            /* @__PURE__ */ i.jsx("span", { className: "icon-name", children: y.name })
+            /* @__PURE__ */ i.jsx("span", { className: "icon-symbol", children: m.symbol }),
+            /* @__PURE__ */ i.jsx("span", { className: "icon-name", children: m.name })
           ]
         },
-        `${y.name}-${E}`
+        `${m.name}-${B}`
       )) }),
       /* @__PURE__ */ i.jsx("div", { className: "icon-dropdown-footer", children: /* @__PURE__ */ i.jsxs("span", { className: "icon-count", children: [
-        I.length,
+        E.length,
         " icon",
-        I.length !== 1 ? "s" : ""
+        E.length !== 1 ? "s" : ""
       ] }) })
     ] })
   ] });
 }, Ze = ({ isOpen: f, onClose: o, onAddQRCode: a, theme: l }) => {
-  const [s, h] = N(""), [x, n] = N(""), [d, j] = N(200), [S, I] = N("M"), y = () => {
+  const [s, g] = N(""), [h, n] = N(""), [c, F] = N(200), [I, E] = N("M"), m = () => {
     if (!s.trim()) return;
-    const b = {
-      width: d,
-      errorCorrectionLevel: S,
+    const p = {
+      width: c,
+      errorCorrectionLevel: I,
       type: "image/png",
       quality: 0.92,
       margin: 1,
@@ -472,40 +472,40 @@ const Ut = {
         light: "#FFFFFF"
       }
     };
-    _e.toDataURL(s, b, (F, J) => {
-      if (F) {
-        console.error("QR Code generation error:", F);
+    _e.toDataURL(s, p, (v, X) => {
+      if (v) {
+        console.error("QR Code generation error:", v);
         return;
       }
-      n(J);
+      n(X);
     });
-  }, E = () => {
-    if (!x) return;
-    const b = new Image();
-    b.onload = () => {
+  }, B = () => {
+    if (!h) return;
+    const p = new Image();
+    p.onload = () => {
       a({
         type: "qrcode",
-        src: x,
+        src: h,
         data: s,
-        width: d,
-        height: d,
+        width: c,
+        height: c,
         x: 100,
         y: 100,
-        imageObject: b
+        imageObject: p
         // Store the loaded image object
-      }), B();
-    }, b.src = x;
-  }, B = () => {
-    h(""), n(""), o();
+      }), j();
+    }, p.src = h;
+  }, j = () => {
+    g(""), n(""), o();
   };
-  return f ? /* @__PURE__ */ i.jsx("div", { className: "qr-modal-overlay", onClick: B, children: /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-content", onClick: (b) => b.stopPropagation(), children: [
+  return f ? /* @__PURE__ */ i.jsx("div", { className: "qr-modal-overlay", onClick: j, children: /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-content", onClick: (p) => p.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-header", children: [
       /* @__PURE__ */ i.jsx("h3", { children: "Generate QR Code" }),
       /* @__PURE__ */ i.jsx(
         "button",
         {
           className: "qr-modal-close",
-          onClick: B,
+          onClick: j,
           "aria-label": "Close",
           children: "×"
         }
@@ -519,7 +519,7 @@ const Ut = {
           {
             id: "qr-data",
             value: s,
-            onChange: (b) => h(b.target.value),
+            onChange: (p) => g(p.target.value),
             placeholder: "https://example.com or any text...",
             rows: 3
           }
@@ -533,8 +533,8 @@ const Ut = {
             {
               type: "number",
               id: "qr-size",
-              value: d,
-              onChange: (b) => j(Math.max(50, Math.min(500, parseInt(b.target.value) || 200))),
+              value: c,
+              onChange: (p) => F(Math.max(50, Math.min(500, parseInt(p.target.value) || 200))),
               min: "50",
               max: "500"
             }
@@ -546,8 +546,8 @@ const Ut = {
             "select",
             {
               id: "qr-error-level",
-              value: S,
-              onChange: (b) => I(b.target.value),
+              value: I,
+              onChange: (p) => E(p.target.value),
               children: [
                 /* @__PURE__ */ i.jsx("option", { value: "L", children: "Low (7%)" }),
                 /* @__PURE__ */ i.jsx("option", { value: "M", children: "Medium (15%)" }),
@@ -562,19 +562,19 @@ const Ut = {
         "button",
         {
           className: "qr-btn qr-btn-generate",
-          onClick: y,
+          onClick: m,
           disabled: !s.trim(),
           children: "Generate QR Code"
         }
       ) }),
-      x && /* @__PURE__ */ i.jsxs("div", { className: "qr-preview", children: [
+      h && /* @__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: x, alt: "QR Code Preview" }) }),
+        /* @__PURE__ */ i.jsx("div", { className: "qr-preview-container", children: /* @__PURE__ */ i.jsx("img", { src: h, alt: "QR Code Preview" }) }),
         /* @__PURE__ */ i.jsx(
           "button",
           {
             className: "qr-btn qr-btn-add",
-            onClick: E,
+            onClick: B,
             style: {
               backgroundColor: (l == null ? void 0 : l.primaryColor) || "#3b82f6",
               borderColor: (l == null ? void 0 : l.primaryColor) || "#3b82f6"
@@ -586,7 +586,7 @@ const Ut = {
     ] })
   ] }) }) : null;
 }, ti = ({ isOpen: f, onClose: o, onAddBarcode: a, theme: l }) => {
-  const [s, h] = N(""), [x, n] = N("CODE128"), [d, j] = N(null), [S, I] = N(2), [y, E] = N(100), [B, b] = N(20), [F, J] = N("center"), [T, O] = N("bottom"), [v, st] = N(10), W = gt(null), xt = [
+  const [s, g] = N(""), [h, n] = N("CODE128"), [c, F] = N(null), [I, E] = N(2), [m, B] = N(100), [j, p] = N(20), [v, X] = N("center"), [T, O] = N("bottom"), [k, Z] = N(10), W = gt(null), xt = [
     { 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 Ut = {
   ], Q = () => {
     if (s.trim())
       try {
-        j(/* @__PURE__ */ i.jsx(
+        F(/* @__PURE__ */ i.jsx(
           Ye,
           {
             value: s,
-            format: x,
-            width: S,
-            height: y,
-            fontSize: B,
-            textAlign: F,
+            format: h,
+            width: I,
+            height: m,
+            fontSize: j,
+            textAlign: v,
             textPosition: T,
-            margin: v,
+            margin: k,
             background: "#ffffff",
             lineColor: "#000000"
           }
@@ -618,40 +618,40 @@ const Ut = {
         console.error("Barcode generation error:", M), alert("Invalid data for selected barcode format. Please check your input.");
       }
   }, ft = () => {
-    var M, nt, Z, ct;
-    if (!(!d || !W.current))
+    var M, nt, tt, ct;
+    if (!(!c || !W.current))
       try {
         const Y = W.current.querySelector("svg");
         if (!Y) {
           console.error("No SVG element found in barcode");
           return;
         }
-        const P = document.createElement("canvas"), C = P.getContext("2d"), tt = Y.getBoundingClientRect(), u = ((nt = (M = Y.width) == null ? void 0 : M.baseVal) == null ? void 0 : nt.value) || tt.width || 200, D = ((ct = (Z = Y.height) == null ? void 0 : Z.baseVal) == null ? void 0 : ct.value) || tt.height || 100;
-        P.width = u, P.height = D;
-        const L = new XMLSerializer().serializeToString(Y), H = new Blob([L], { type: "image/svg+xml;charset=utf-8" }), G = URL.createObjectURL(H), et = new Image();
-        et.onload = () => {
-          C.drawImage(et, 0, 0);
-          const X = P.toDataURL("image/png"), q = new Image();
+        const P = document.createElement("canvas"), C = P.getContext("2d"), et = Y.getBoundingClientRect(), y = ((nt = (M = Y.width) == null ? void 0 : M.baseVal) == null ? void 0 : nt.value) || et.width || 200, D = ((ct = (tt = Y.height) == null ? void 0 : tt.baseVal) == null ? void 0 : ct.value) || et.height || 100;
+        P.width = y, P.height = D;
+        const L = new XMLSerializer().serializeToString(Y), H = new Blob([L], { type: "image/svg+xml;charset=utf-8" }), G = URL.createObjectURL(H), it = new Image();
+        it.onload = () => {
+          C.drawImage(it, 0, 0);
+          const J = P.toDataURL("image/png"), q = new Image();
           q.onload = () => {
             a({
               type: "barcode",
-              src: X,
+              src: J,
               data: s,
-              format: x,
-              width: u,
+              format: h,
+              width: y,
               height: D,
               x: 100,
               y: 100,
               imageObject: q
             }), _();
-          }, q.src = X, URL.revokeObjectURL(G);
-        }, et.src = G;
+          }, q.src = J, URL.revokeObjectURL(G);
+        }, it.src = G;
       } catch (Y) {
         console.error("Error adding barcode to canvas:", Y), alert("Failed to add barcode to canvas. Please try again.");
       }
   }, _ = () => {
-    h(""), j(null), n("CODE128"), I(2), E(100), b(20), o();
-  }, at = (M) => ({
+    g(""), F(null), n("CODE128"), E(2), B(100), p(20), o();
+  }, st = (M) => ({
     CODE128: "Supports all ASCII characters. Most versatile format.",
     EAN13: "Requires exactly 12 digits (13th is checksum). Used for retail products.",
     EAN8: "Requires exactly 7 digits (8th is checksum). Compact version of EAN-13.",
@@ -684,7 +684,7 @@ const Ut = {
             type: "text",
             id: "barcode-data",
             value: s,
-            onChange: (M) => h(M.target.value),
+            onChange: (M) => g(M.target.value),
             placeholder: "Enter your data..."
           }
         )
@@ -695,12 +695,12 @@ const Ut = {
           "select",
           {
             id: "barcode-format",
-            value: x,
+            value: h,
             onChange: (M) => n(M.target.value),
             children: xt.map((M) => /* @__PURE__ */ i.jsx("option", { value: M.value, children: M.label }, M.value))
           }
         ),
-        /* @__PURE__ */ i.jsx("small", { className: "format-description", children: at(x) })
+        /* @__PURE__ */ i.jsx("small", { className: "format-description", children: st(h) })
       ] }),
       /* @__PURE__ */ i.jsxs("div", { className: "barcode-options", children: [
         /* @__PURE__ */ i.jsxs("div", { className: "barcode-form-group", children: [
@@ -713,12 +713,12 @@ const Ut = {
               min: "1",
               max: "4",
               step: "0.5",
-              value: S,
-              onChange: (M) => I(parseFloat(M.target.value))
+              value: I,
+              onChange: (M) => E(parseFloat(M.target.value))
             }
           ),
           /* @__PURE__ */ i.jsxs("span", { className: "range-value", children: [
-            S,
+            I,
             "px"
           ] })
         ] }),
@@ -731,12 +731,12 @@ const Ut = {
               id: "barcode-height",
               min: "50",
               max: "200",
-              value: y,
-              onChange: (M) => E(parseInt(M.target.value))
+              value: m,
+              onChange: (M) => B(parseInt(M.target.value))
             }
           ),
           /* @__PURE__ */ i.jsxs("span", { className: "range-value", children: [
-            y,
+            m,
             "px"
           ] })
         ] }),
@@ -749,12 +749,12 @@ const Ut = {
               id: "barcode-fontsize",
               min: "10",
               max: "30",
-              value: B,
-              onChange: (M) => b(parseInt(M.target.value))
+              value: j,
+              onChange: (M) => p(parseInt(M.target.value))
             }
           ),
           /* @__PURE__ */ i.jsxs("span", { className: "range-value", children: [
-            B,
+            j,
             "px"
           ] })
         ] }),
@@ -783,9 +783,9 @@ const Ut = {
           children: "Generate Barcode"
         }
       ) }),
-      d && /* @__PURE__ */ i.jsxs("div", { className: "barcode-preview", children: [
+      c && /* @__PURE__ */ i.jsxs("div", { className: "barcode-preview", children: [
         /* @__PURE__ */ i.jsx("h4", { children: "Preview" }),
-        /* @__PURE__ */ i.jsx("div", { className: "barcode-preview-container", ref: W, children: d }),
+        /* @__PURE__ */ i.jsx("div", { className: "barcode-preview-container", ref: W, children: c }),
         /* @__PURE__ */ i.jsx(
           "button",
           {
@@ -864,30 +864,30 @@ const Ut = {
                 100% { transform: rotate(360deg); }
             }
         ` })
-] }), ii = ({ isOpen: f, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: h }) => {
-  const [x, n] = N([]), [d, j] = N(!1), [S, I] = N(null), [y, E] = N(""), [B, b] = N(""), [F, J] = N({});
+] }), ii = ({ isOpen: f, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: g }) => {
+  const [h, n] = N([]), [c, F] = N(!1), [I, E] = N(null), [m, B] = N(""), [j, p] = N(""), [v, X] = N({});
   gt(null);
-  const [T, O] = N(!1), [v, st] = N(!1), [W, xt] = N(!1), Q = `${h}/api/v1/designer`;
-  ot(() => {
+  const [T, O] = N(!1), [k, Z] = N(!1), [W, xt] = N(!1), Q = `${g}/api/v1/designer`;
+  rt(() => {
     f && s && ft();
   }, [f, s]);
   const ft = async () => {
     const P = sessionStorage.getItem("apc_x_sub_status");
-    P === "active" ? (O(!0), st(!0), at()) : P === "inactive" ? (O(!1), st(!0)) : (xt(!0), await _());
+    P === "active" ? (O(!0), Z(!0), st()) : P === "inactive" ? (O(!1), Z(!0)) : (xt(!0), await _());
   }, _ = async () => {
     if (!s) {
-      O(!1), st(!0), xt(!1);
+      O(!1), Z(!0), xt(!1);
       return;
     }
     const P = `${Q}/get-subscription-status/${s}`;
     try {
-      (await oe.get(P)).data.object === "active" ? (sessionStorage.setItem("apc_x_sub_status", "active"), O(!0), at()) : (sessionStorage.setItem("apc_x_sub_status", "inactive"), O(!1));
+      (await oe.get(P)).data.object === "active" ? (sessionStorage.setItem("apc_x_sub_status", "active"), O(!0), st()) : (sessionStorage.setItem("apc_x_sub_status", "inactive"), O(!1));
     } catch (C) {
       console.error("Subscription check failed:", C), sessionStorage.setItem("apc_x_sub_status", "inactive"), O(!1);
     } finally {
-      xt(!1), st(!0);
+      xt(!1), Z(!0);
     }
-  }, at = async () => {
+  }, st = async () => {
     const P = sessionStorage.getItem("apc_stickers");
     if (P)
       try {
@@ -897,18 +897,18 @@ const Ut = {
       } catch {
         console.warn("Failed to parse cached stickers, fetching fresh data");
       }
-    j(!0), I(null);
+    F(!0), E(null);
     try {
       const C = await oe.get(`${Q}/get-stickers`);
       if (C.data && C.data.object && C.data.object.contents) {
-        const tt = C.data.object.contents;
-        n(tt), sessionStorage.setItem("apc_stickers", JSON.stringify(tt));
+        const et = C.data.object.contents;
+        n(et), sessionStorage.setItem("apc_stickers", JSON.stringify(et));
       } else
         throw new Error("Invalid response format");
     } catch (C) {
-      console.error("Error fetching stickers:", C), I("Failed to load stickers. Please try again.");
+      console.error("Error fetching stickers:", C), E("Failed to load stickers. Please try again.");
     } finally {
-      j(!1);
+      F(!1);
     }
   }, M = (P, C) => {
     a({
@@ -921,31 +921,31 @@ const Ut = {
       y: 100
     }), o();
   }, nt = (P) => {
-    J((C) => ({
+    X((C) => ({
       ...C,
       [P]: !C[P]
     }));
-  }, Z = (P) => {
+  }, tt = (P) => {
     const C = {};
-    return P.forEach((tt) => {
-      const u = tt.name.split("/");
+    return P.forEach((et) => {
+      const y = et.name.split("/");
       let D = C;
-      u.forEach((L, H) => {
-        D[L] || (D[L] = H === u.length - 1 ? tt : {}), D = D[L];
+      y.forEach((L, H) => {
+        D[L] || (D[L] = H === y.length - 1 ? et : {}), D = D[L];
       });
     }), C;
-  }, ct = (P, C = "", tt = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${tt * 15}px` }, children: Object.keys(P).map((u) => {
-    const D = `${C}/${u}`, L = F[D];
-    return P[u].type === "image" ? !B || u.toLowerCase().includes(B.toLowerCase()) ? /* @__PURE__ */ i.jsx(
+  }, ct = (P, C = "", et = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${et * 15}px` }, children: Object.keys(P).map((y) => {
+    const D = `${C}/${y}`, L = v[D];
+    return P[y].type === "image" ? !j || y.toLowerCase().includes(j.toLowerCase()) ? /* @__PURE__ */ i.jsx(
       "div",
       {
         className: "sticker-item",
-        onClick: () => M(P[u].url, u),
+        onClick: () => M(P[y].url, y),
         children: /* @__PURE__ */ i.jsx("div", { className: "sticker-preview", children: /* @__PURE__ */ i.jsx(
           "img",
           {
-            src: P[u].url,
-            alt: u,
+            src: P[y].url,
+            alt: y,
             loading: "lazy",
             onError: (G) => {
               G.target.style.display = "none";
@@ -962,14 +962,14 @@ const Ut = {
           onClick: () => nt(D),
           children: [
             /* @__PURE__ */ i.jsx("span", { className: `expand-icon ${L ? "expanded" : ""}`, children: "▶" }),
-            /* @__PURE__ */ i.jsx("span", { className: "category-name", children: u })
+            /* @__PURE__ */ i.jsx("span", { className: "category-name", children: y })
           ]
         }
       ),
-      L && ct(P[u], D, tt + 1)
+      L && ct(P[y], D, et + 1)
     ] }, D);
-  }) }), Y = x.filter(
-    (P) => !B || P.name.toLowerCase().includes(B.toLowerCase())
+  }) }), Y = h.filter(
+    (P) => !j || P.name.toLowerCase().includes(j.toLowerCase())
   );
   return f ? /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-content", onClick: (P) => P.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-header", children: [
@@ -986,24 +986,24 @@ const Ut = {
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-body", children: [
       W && /* @__PURE__ */ i.jsx(le, {}),
-      !T && !W && v && /* @__PURE__ */ i.jsx(ei, { theme: l }),
-      T && v && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      !T && !W && k && /* @__PURE__ */ i.jsx(ei, { theme: l }),
+      T && k && /* @__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",
           {
             type: "text",
             placeholder: "Search stickers...",
-            value: B,
-            onChange: (P) => b(P.target.value),
+            value: j,
+            onChange: (P) => p(P.target.value),
             className: "sticker-search"
           }
         ) }) }),
-        d && /* @__PURE__ */ i.jsx(le, {}),
-        S && /* @__PURE__ */ i.jsxs("div", { className: "sticker-error", children: [
-          /* @__PURE__ */ i.jsx("p", { children: S }),
-          /* @__PURE__ */ i.jsx("button", { onClick: at, children: "Retry" })
+        c && /* @__PURE__ */ i.jsx(le, {}),
+        I && /* @__PURE__ */ i.jsxs("div", { className: "sticker-error", children: [
+          /* @__PURE__ */ i.jsx("p", { children: I }),
+          /* @__PURE__ */ i.jsx("button", { onClick: st, children: "Retry" })
         ] }),
-        !d && !S && x.length > 0 && /* @__PURE__ */ i.jsx("div", { className: "sticker-grid", children: ct(Z(Y)) })
+        !c && !I && h.length > 0 && /* @__PURE__ */ i.jsx("div", { className: "sticker-grid", children: ct(tt(Y)) })
       ] })
     ] })
   ] }) }) : null;
@@ -2559,33 +2559,33 @@ const Ut = {
     category: "Geometric",
     description: "Complex mandala flower pattern"
   }
-], ri = ({ isOpen: f, onClose: o, onAddEmbroidery: a, theme: l, apiKey: s, apiEndpoint: h }) => {
-  const [x, n] = N([]), [d, j] = N(!1), [S, I] = N(null), [y, E] = N(""), [B, b] = N("All"), F = gt(null), J = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
-  ot(() => {
+], ri = ({ isOpen: f, onClose: o, onAddEmbroidery: a, theme: l, apiKey: s, apiEndpoint: g }) => {
+  const [h, n] = N([]), [c, F] = N(!1), [I, E] = N(null), [m, B] = N(""), [j, p] = N("All"), v = gt(null), X = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
+  rt(() => {
     f && n(oi);
   }, [f]);
-  const T = (v) => {
+  const T = (k) => {
     a({
       type: "embroidery",
-      src: v.url,
-      name: v.name,
-      description: v.description,
-      category: v.category,
+      src: k.url,
+      name: k.name,
+      description: k.description,
+      category: k.category,
       width: 120,
       height: 120,
       x: 100,
       y: 100
     }), o();
-  }, O = x.filter((v) => {
-    const st = !y || v.name.toLowerCase().includes(y.toLowerCase()) || v.description.toLowerCase().includes(y.toLowerCase()), W = B === "All" || v.category === B;
-    return st && W;
+  }, O = h.filter((k) => {
+    const Z = !m || k.name.toLowerCase().includes(m.toLowerCase()) || k.description.toLowerCase().includes(m.toLowerCase()), W = j === "All" || k.category === j;
+    return Z && W;
   });
   return f ? /* @__PURE__ */ i.jsx("div", { className: "embroidery-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs(
     "div",
     {
       className: "embroidery-modal-content",
-      onClick: (v) => v.stopPropagation(),
-      ref: F,
+      onClick: (k) => k.stopPropagation(),
+      ref: v,
       children: [
         /* @__PURE__ */ i.jsxs("div", { className: "embroidery-modal-header", children: [
           /* @__PURE__ */ i.jsx("h3", { children: "Choose an Embroidery Design" }),
@@ -2605,8 +2605,8 @@ const Ut = {
             {
               type: "text",
               placeholder: "Search embroidery designs...",
-              value: y,
-              onChange: (v) => E(v.target.value),
+              value: m,
+              onChange: (k) => B(k.target.value),
               className: "embroidery-search"
             }
           ) }),
@@ -2615,47 +2615,47 @@ const Ut = {
             /* @__PURE__ */ i.jsx(
               "select",
               {
-                value: B,
-                onChange: (v) => b(v.target.value),
+                value: j,
+                onChange: (k) => p(k.target.value),
                 className: "category-select",
-                children: J.map((v) => /* @__PURE__ */ i.jsx("option", { value: v, children: v }, v))
+                children: X.map((k) => /* @__PURE__ */ i.jsx("option", { value: k, children: k }, k))
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ i.jsxs("div", { className: "embroidery-modal-body", children: [
-          d && /* @__PURE__ */ i.jsxs("div", { className: "embroidery-loading", children: [
+          c && /* @__PURE__ */ i.jsxs("div", { className: "embroidery-loading", children: [
             /* @__PURE__ */ i.jsx("div", { className: "loading-spinner" }),
             /* @__PURE__ */ i.jsx("p", { children: "Loading embroidery designs..." })
           ] }),
-          S && /* @__PURE__ */ i.jsx("div", { className: "embroidery-error", children: /* @__PURE__ */ i.jsx("p", { children: S }) }),
-          !d && !S && /* @__PURE__ */ i.jsx("div", { className: "embroidery-grid", children: O.map((v) => /* @__PURE__ */ i.jsxs(
+          I && /* @__PURE__ */ i.jsx("div", { className: "embroidery-error", children: /* @__PURE__ */ i.jsx("p", { children: I }) }),
+          !c && !I && /* @__PURE__ */ i.jsx("div", { className: "embroidery-grid", children: O.map((k) => /* @__PURE__ */ i.jsxs(
             "div",
             {
               className: "embroidery-item",
-              onClick: () => T(v),
-              title: v.description,
+              onClick: () => T(k),
+              title: k.description,
               children: [
                 /* @__PURE__ */ i.jsx("div", { className: "embroidery-preview", children: /* @__PURE__ */ i.jsx(
                   "img",
                   {
-                    src: v.url,
-                    alt: v.name,
+                    src: k.url,
+                    alt: k.name,
                     loading: "lazy",
-                    onError: (st) => {
-                      console.error("Failed to load embroidery image:", v.url), st.target.style.display = "none";
+                    onError: (Z) => {
+                      console.error("Failed to load embroidery image:", k.url), Z.target.style.display = "none";
                     }
                   }
                 ) }),
                 /* @__PURE__ */ i.jsxs("div", { className: "embroidery-info", children: [
-                  /* @__PURE__ */ i.jsx("div", { className: "embroidery-name", children: v.name }),
-                  /* @__PURE__ */ i.jsx("div", { className: "embroidery-category", children: v.category })
+                  /* @__PURE__ */ i.jsx("div", { className: "embroidery-name", children: k.name }),
+                  /* @__PURE__ */ i.jsx("div", { className: "embroidery-category", children: k.category })
                 ] })
               ]
             },
-            v.id
+            k.id
           )) }),
-          !d && !S && O.length === 0 && /* @__PURE__ */ i.jsx("div", { className: "no-embroideries", children: /* @__PURE__ */ i.jsx("p", { children: "No embroidery designs found matching your search." }) })
+          !c && !I && O.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,23 +4602,23 @@ const Ut = {
     textAlign: "center"
   }
 ], ai = ({ isOpen: f, onClose: o, onAddText: a, theme: l }) => {
-  const [s, h] = N(""), [x, n] = N("All"), d = ie(() => {
-    const y = Nt.reduce((E, B) => (E[B.category] = (E[B.category] || 0) + 1, E), {});
+  const [s, g] = N(""), [h, n] = N("All"), c = ie(() => {
+    const m = Nt.reduce((B, j) => (B[j.category] = (B[j.category] || 0) + 1, B), {});
     return [
       { name: "All", count: Nt.length },
-      ...Object.entries(y).map(([E, B]) => ({ name: E, count: B }))
+      ...Object.entries(m).map(([B, j]) => ({ name: B, count: j }))
     ];
-  }, [Nt]), j = ie(() => Nt.filter((y) => {
-    const E = !s || y.text.toLowerCase().includes(s.toLowerCase()) || y.category.toLowerCase().includes(s.toLowerCase()), B = x === "All" || y.category === x;
-    return E && B;
-  }), [Nt, s, x]), S = (y) => {
-    const E = {
-      ...y,
+  }, [Nt]), F = ie(() => Nt.filter((m) => {
+    const B = !s || m.text.toLowerCase().includes(s.toLowerCase()) || m.category.toLowerCase().includes(s.toLowerCase()), j = h === "All" || m.category === h;
+    return B && j;
+  }), [Nt, s, h]), I = (m) => {
+    const B = {
+      ...m,
       x: 100,
       y: 100
     };
-    a("text", E), o();
-  }, I = () => {
+    a("text", B), o();
+  }, E = () => {
     a("text", {
       text: "Your Text Here",
       fontSize: 24,
@@ -4628,7 +4628,7 @@ const Ut = {
       y: 100
     }), o();
   };
-  return f ? /* @__PURE__ */ i.jsx("div", { className: "text-templates-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs("div", { className: "text-templates-modal", onClick: (y) => y.stopPropagation(), children: [
+  return f ? /* @__PURE__ */ i.jsx("div", { className: "text-templates-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs("div", { className: "text-templates-modal", onClick: (m) => m.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "modal-header", children: [
       /* @__PURE__ */ i.jsx("h2", { children: "Text Templates" }),
       /* @__PURE__ */ i.jsx("button", { className: "close-btn", onClick: o, "aria-label": "Close", children: "×" })
@@ -4640,70 +4640,70 @@ const Ut = {
           type: "text",
           placeholder: "Search templates...",
           value: s,
-          onChange: (y) => h(y.target.value),
+          onChange: (m) => g(m.target.value),
           className: "search-input"
         }
       ) }),
-      /* @__PURE__ */ i.jsx("div", { className: "category-tabs", children: d.map((y) => /* @__PURE__ */ i.jsxs(
+      /* @__PURE__ */ i.jsx("div", { className: "category-tabs", children: c.map((m) => /* @__PURE__ */ i.jsxs(
         "button",
         {
-          className: `category-tab ${x === y.name ? "active" : ""}`,
-          onClick: () => n(y.name),
+          className: `category-tab ${h === m.name ? "active" : ""}`,
+          onClick: () => n(m.name),
           children: [
-            y.name,
+            m.name,
             /* @__PURE__ */ i.jsxs("span", { className: "count", children: [
               "(",
-              y.count,
+              m.count,
               ")"
             ] })
           ]
         },
-        y.name
+        m.name
       )) })
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "templates-grid", children: [
-      /* @__PURE__ */ i.jsx("div", { className: "custom-text-option", onClick: I, children: /* @__PURE__ */ i.jsxs("div", { className: "custom-text-preview", children: [
+      /* @__PURE__ */ i.jsx("div", { className: "custom-text-option", onClick: E, children: /* @__PURE__ */ i.jsxs("div", { className: "custom-text-preview", children: [
         /* @__PURE__ */ i.jsx("div", { className: "custom-icon", children: "✏️" }),
         /* @__PURE__ */ i.jsx("div", { className: "custom-label", children: "Create Custom Text" })
       ] }) }),
-      j.map((y) => /* @__PURE__ */ i.jsxs(
+      F.map((m) => /* @__PURE__ */ i.jsxs(
         "div",
         {
           className: "template-item",
-          onClick: () => S(y),
+          onClick: () => I(m),
           children: [
             /* @__PURE__ */ i.jsx(
               "div",
               {
                 className: "template-preview",
                 style: {
-                  fontFamily: y.fontFamily,
-                  fontSize: `${Math.min(y.fontSize * 0.6, 18)}px`,
-                  fontWeight: y.fontWeight,
-                  fontStyle: y.fontStyle,
-                  color: y.fill,
-                  backgroundColor: y.hasBackground ? y.backgroundColor : "transparent",
-                  textAlign: y.textAlign || "left",
-                  textTransform: y.textTransform || "none",
-                  letterSpacing: y.letterSpacing ? `${y.letterSpacing}px` : "normal",
-                  textShadow: y.hasTextShadow ? `${y.textShadowX}px ${y.textShadowY}px ${y.textShadowBlur}px ${y.textShadowColor}` : "none"
+                  fontFamily: m.fontFamily,
+                  fontSize: `${Math.min(m.fontSize * 0.6, 18)}px`,
+                  fontWeight: m.fontWeight,
+                  fontStyle: m.fontStyle,
+                  color: m.fill,
+                  backgroundColor: m.hasBackground ? m.backgroundColor : "transparent",
+                  textAlign: m.textAlign || "left",
+                  textTransform: m.textTransform || "none",
+                  letterSpacing: m.letterSpacing ? `${m.letterSpacing}px` : "normal",
+                  textShadow: m.hasTextShadow ? `${m.textShadowX}px ${m.textShadowY}px ${m.textShadowBlur}px ${m.textShadowColor}` : "none"
                 },
-                children: y.text
+                children: m.text
               }
             ),
             /* @__PURE__ */ i.jsxs("div", { className: "template-info", children: [
-              /* @__PURE__ */ i.jsx("span", { className: "template-category", children: y.category }),
-              /* @__PURE__ */ i.jsx("span", { className: "template-font", children: y.fontFamily })
+              /* @__PURE__ */ i.jsx("span", { className: "template-category", children: m.category }),
+              /* @__PURE__ */ i.jsx("span", { className: "template-font", children: m.fontFamily })
             ] })
           ]
         },
-        y.id
+        m.id
       ))
     ] }),
     /* @__PURE__ */ i.jsx("div", { className: "modal-footer", children: /* @__PURE__ */ i.jsxs("div", { className: "results-count", children: [
-      j.length,
+      F.length,
       " template",
-      j.length !== 1 ? "s" : "",
+      F.length !== 1 ? "s" : "",
       " found"
     ] }) })
   ] }) }) : null;
@@ -4713,24 +4713,24 @@ const Ut = {
   onDuplicateElement: a,
   onUndo: l,
   onRedo: s,
-  onToggleGrid: h,
-  onToggleRulers: x,
+  onToggleGrid: g,
+  onToggleRulers: h,
   onToggleSnap: n,
-  onImageUpload: d,
-  canUndo: j,
-  canRedo: S,
-  showGrid: I,
-  showRulers: y,
-  snapToGrid: E,
-  selectedElement: B,
-  theme: b,
-  readOnly: F,
-  apiKey: J,
+  onImageUpload: c,
+  canUndo: F,
+  canRedo: I,
+  showGrid: E,
+  showRulers: m,
+  snapToGrid: B,
+  selectedElement: j,
+  theme: p,
+  readOnly: v,
+  apiKey: X,
   apiEndpoint: T
 }) => {
-  const [O, v] = N(!1), [st, W] = N(!1), [xt, Q] = N(!1), [ft, _] = N(!1), [at, M] = N(!1), [nt, Z] = N(!1), [ct, Y] = N(!1), P = (U) => {
+  const [O, k] = N(!1), [Z, W] = N(!1), [xt, Q] = N(!1), [ft, _] = N(!1), [st, M] = N(!1), [nt, tt] = N(!1), [ct, Y] = N(!1), P = (U) => {
     const K = U.target.files[0];
-    K && K.type.startsWith("image/") && d(K), U.target.value = "";
+    K && K.type.startsWith("image/") && c(K), U.target.value = "";
   }, C = (U) => {
     f("icon", {
       iconData: U,
@@ -4739,9 +4739,9 @@ const Ut = {
       fontFamily: "Arial",
       fill: "#000000"
     });
-  }, tt = (U) => {
+  }, et = (U) => {
     f("qrcode", U);
-  }, u = (U) => {
+  }, y = (U) => {
     f("barcode", U);
   }, D = (U) => {
     f("sticker", U);
@@ -4750,11 +4750,11 @@ const Ut = {
   }, H = (U, K) => {
     f(U, K);
   }, G = () => {
-    Z(!nt), Y(!1);
-  }, et = () => {
-    Y(!ct), Z(!1);
-  }, X = (U) => {
-    U === "custom" ? f("text") : U === "templates" && M(!0), Z(!1);
+    tt(!nt), Y(!1);
+  }, it = () => {
+    Y(!ct), tt(!1);
+  }, J = (U) => {
+    U === "custom" ? f("text") : U === "templates" && M(!0), tt(!1);
   }, q = (U) => {
     f(U), Y(!1);
   };
@@ -4766,7 +4766,7 @@ const Ut = {
           {
             className: "toolbar-btn compact",
             onClick: l,
-            disabled: !j || F,
+            disabled: !F || v,
             title: "Undo (Ctrl+Z)",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "↶" }),
@@ -4779,7 +4779,7 @@ const Ut = {
           {
             className: "toolbar-btn compact",
             onClick: s,
-            disabled: !S || F,
+            disabled: !I || v,
             title: "Redo (Ctrl+Y)",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "↷" }),
@@ -4795,7 +4795,7 @@ const Ut = {
             "button",
             {
               className: "toolbar-btn compact dropdown-trigger",
-              disabled: F,
+              disabled: v,
               title: "Add Text",
               onClick: G,
               children: [
@@ -4806,11 +4806,11 @@ const Ut = {
             }
           ),
           /* @__PURE__ */ i.jsxs("div", { className: `dropdown-menu ${nt ? "show" : ""}`, children: [
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => X("custom"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => J("custom"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "𝐓" }),
               " Custom Text"
             ] }),
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => X("templates"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => J("templates"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "📝" }),
               " Text Templates"
             ] })
@@ -4821,8 +4821,8 @@ const Ut = {
             "button",
             {
               className: "toolbar-btn compact dropdown-trigger",
-              disabled: F,
-              onClick: et,
+              disabled: v,
+              onClick: it,
               children: [
                 /* @__PURE__ */ i.jsx("span", { className: "icon", children: "◩" }),
                 /* @__PURE__ */ i.jsx("span", { className: "label", children: "Shapes" }),
@@ -4882,7 +4882,7 @@ const Ut = {
           ] })
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ i.jsxs("label", { className: "toolbar-btn compact file-upload", style: { cursor: F ? "not-allowed" : "pointer" }, children: [
+        /* @__PURE__ */ i.jsxs("label", { className: "toolbar-btn compact file-upload", style: { cursor: v ? "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 Ut = {
               type: "file",
               accept: "image/*",
               onChange: P,
-              disabled: F
+              disabled: v
             }
           )
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ i.jsx(Ke, { onSelectIcon: C, theme: b, disabled: F }),
+        /* @__PURE__ */ i.jsx(Ke, { onSelectIcon: C, theme: p, disabled: v }),
         /* @__PURE__ */ i.jsxs(
           "button",
           {
             className: "toolbar-btn compact",
             onClick: () => Q(!0),
-            disabled: F,
+            disabled: v,
             title: "Add Sticker",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "🎨" }),
@@ -4915,8 +4915,8 @@ const Ut = {
           "button",
           {
             className: "toolbar-btn compact",
-            onClick: () => v(!0),
-            disabled: F,
+            onClick: () => k(!0),
+            disabled: v,
             title: "Add QR Code",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "▦" }),
@@ -4929,7 +4929,7 @@ const Ut = {
           {
             className: "toolbar-btn compact",
             onClick: () => W(!0),
-            disabled: F,
+            disabled: v,
             title: "Add Barcode",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "▤" }),
@@ -4944,7 +4944,7 @@ const Ut = {
         {
           className: "toolbar-btn compact",
           onClick: () => _(!0),
-          disabled: F,
+          disabled: v,
           title: "Add Embroidery Design",
           children: [
             /* @__PURE__ */ i.jsx("span", { className: "icon", children: "🧵" }),
@@ -4952,7 +4952,7 @@ const Ut = {
           ]
         }
       ) }),
-      B && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      j && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
         /* @__PURE__ */ i.jsxs("div", { className: "toolbar-group", children: [
           /* @__PURE__ */ i.jsxs(
@@ -4960,7 +4960,7 @@ const Ut = {
             {
               className: "toolbar-btn compact success",
               onClick: a,
-              disabled: F,
+              disabled: v,
               title: "Duplicate Element (Ctrl+D)",
               children: [
                 /* @__PURE__ */ i.jsx("span", { className: "icon", children: "⧉" }),
@@ -4973,7 +4973,7 @@ const Ut = {
             {
               className: "toolbar-btn compact danger",
               onClick: o,
-              disabled: F,
+              disabled: v,
               title: "Delete Element (Delete)",
               children: [
                 /* @__PURE__ */ i.jsx("span", { className: "icon", children: "🗑️" }),
@@ -4988,8 +4988,8 @@ const Ut = {
         /* @__PURE__ */ i.jsxs(
           "button",
           {
-            className: `toolbar-btn compact ${I ? "active" : ""}`,
-            onClick: h,
+            className: `toolbar-btn compact ${E ? "active" : ""}`,
+            onClick: g,
             title: "Toggle Grid",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "⚏" }),
@@ -5000,8 +5000,8 @@ const Ut = {
         /* @__PURE__ */ i.jsxs(
           "button",
           {
-            className: `toolbar-btn compact ${y ? "active" : ""}`,
-            onClick: x,
+            className: `toolbar-btn compact ${m ? "active" : ""}`,
+            onClick: h,
             title: "Toggle Rulers",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "📐" }),
@@ -5012,7 +5012,7 @@ const Ut = {
         /* @__PURE__ */ i.jsxs(
           "button",
           {
-            className: `toolbar-btn compact ${E ? "active" : ""}`,
+            className: `toolbar-btn compact ${B ? "active" : ""}`,
             onClick: n,
             title: "Snap to Grid",
             children: [
@@ -5027,18 +5027,18 @@ const Ut = {
       Ze,
       {
         isOpen: O,
-        onClose: () => v(!1),
-        onAddQRCode: tt,
-        theme: b
+        onClose: () => k(!1),
+        onAddQRCode: et,
+        theme: p
       }
     ),
     /* @__PURE__ */ i.jsx(
       ti,
       {
-        isOpen: st,
+        isOpen: Z,
         onClose: () => W(!1),
-        onAddBarcode: u,
-        theme: b
+        onAddBarcode: y,
+        theme: p
       }
     ),
     /* @__PURE__ */ i.jsx(
@@ -5047,8 +5047,8 @@ const Ut = {
         isOpen: xt,
         onClose: () => Q(!1),
         onAddSticker: D,
-        theme: b,
-        apiKey: J,
+        theme: p,
+        apiKey: X,
         apiEndpoint: T
       }
     ),
@@ -5058,18 +5058,18 @@ const Ut = {
         isOpen: ft,
         onClose: () => _(!1),
         onAddEmbroidery: L,
-        theme: b,
-        apiKey: J,
+        theme: p,
+        apiKey: X,
         apiEndpoint: T
       }
     ),
     /* @__PURE__ */ i.jsx(
       ai,
       {
-        isOpen: at,
+        isOpen: st,
         onClose: () => M(!1),
         onAddText: H,
-        theme: b
+        theme: p
       }
     )
   ] });
@@ -5080,16 +5080,16 @@ const Ut = {
   availableFonts: l,
   theme: s
 }) => {
-  const [h, x] = N(!1);
+  const [g, h] = N(!1);
   if (!f)
     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 n = (b, F) => {
-    o(f.id, { [b]: F });
-  }, d = () => {
-    var b, F, J;
+  const n = (p, v) => {
+    o(f.id, { [p]: v });
+  }, c = () => {
+    var p, v, X;
     return /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
       /* @__PURE__ */ i.jsx("h4", { children: "Text Content" }),
       /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
@@ -5191,9 +5191,9 @@ const Ut = {
           /* @__PURE__ */ i.jsx(
             "button",
             {
-              className: (b = f.textDecoration) != null && b.includes("underline") ? "active" : "",
+              className: (p = f.textDecoration) != null && p.includes("underline") ? "active" : "",
               onClick: () => {
-                const T = f.textDecoration || "", O = T.split(" ").filter((v) => v && v !== "underline");
+                const T = f.textDecoration || "", O = T.split(" ").filter((k) => k && k !== "underline");
                 T.includes("underline") || O.push("underline"), n("textDecoration", O.join(" ").trim());
               },
               title: "Underline",
@@ -5203,9 +5203,9 @@ const Ut = {
           /* @__PURE__ */ i.jsx(
             "button",
             {
-              className: (F = f.textDecoration) != null && F.includes("overline") ? "active" : "",
+              className: (v = f.textDecoration) != null && v.includes("overline") ? "active" : "",
               onClick: () => {
-                const T = f.textDecoration || "", O = T.split(" ").filter((v) => v && v !== "overline");
+                const T = f.textDecoration || "", O = T.split(" ").filter((k) => k && k !== "overline");
                 T.includes("overline") || O.push("overline"), n("textDecoration", O.join(" ").trim());
               },
               title: "Overline",
@@ -5215,9 +5215,9 @@ const Ut = {
           /* @__PURE__ */ i.jsx(
             "button",
             {
-              className: (J = f.textDecoration) != null && J.includes("line-through") ? "active" : "",
+              className: (X = f.textDecoration) != null && X.includes("line-through") ? "active" : "",
               onClick: () => {
-                const T = f.textDecoration || "", O = T.split(" ").filter((v) => v && v !== "line-through");
+                const T = f.textDecoration || "", O = T.split(" ").filter((k) => k && k !== "line-through");
                 T.includes("line-through") || O.push("line-through"), n("textDecoration", O.join(" ").trim());
               },
               title: "Strikethrough",
@@ -5344,7 +5344,7 @@ const Ut = {
           ] })
         ] })
       ] }) }),
-      h && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      g && /* @__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 Ut = {
         ] })
       ] })
     ] });
-  }, j = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
+  }, F = () => /* @__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" }),
@@ -5561,7 +5561,7 @@ const Ut = {
         {
           type: "color",
           value: f.fill || "#000000",
-          onChange: (b) => n("fill", b.target.value)
+          onChange: (p) => n("fill", p.target.value)
         }
       )
     ] }),
@@ -5572,7 +5572,7 @@ const Ut = {
         {
           type: "color",
           value: f.stroke || "#000000",
-          onChange: (b) => n("stroke", b.target.value)
+          onChange: (p) => n("stroke", p.target.value)
         }
       )
     ] }),
@@ -5583,7 +5583,7 @@ const Ut = {
         {
           type: "number",
           value: f.strokeWidth || 2,
-          onChange: (b) => n("strokeWidth", parseInt(b.target.value)),
+          onChange: (p) => n("strokeWidth", parseInt(p.target.value)),
           min: "0",
           max: "20"
         }
@@ -5596,7 +5596,7 @@ const Ut = {
         {
           type: "number",
           value: f.numPoints || 5,
-          onChange: (b) => n("numPoints", parseInt(b.target.value)),
+          onChange: (p) => n("numPoints", parseInt(p.target.value)),
           min: "3",
           max: "20"
         }
@@ -5609,13 +5609,13 @@ const Ut = {
         {
           type: "number",
           value: f.cornerRadius || 10,
-          onChange: (b) => n("cornerRadius", parseInt(b.target.value)),
+          onChange: (p) => n("cornerRadius", parseInt(p.target.value)),
           min: "0",
           max: "50"
         }
       )
     ] })
-  ] }), S = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
+  ] }), I = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
     /* @__PURE__ */ i.jsx("h4", { children: "Image Properties" }),
     /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
       /* @__PURE__ */ i.jsx("label", { children: "Opacity" }),
@@ -5627,7 +5627,7 @@ const Ut = {
           max: "1",
           step: "0.1",
           value: f.opacity || 1,
-          onChange: (b) => n("opacity", parseFloat(b.target.value))
+          onChange: (p) => n("opacity", parseFloat(p.target.value))
         }
       ),
       /* @__PURE__ */ i.jsxs("span", { children: [
@@ -5635,20 +5635,20 @@ const Ut = {
         "%"
       ] })
     ] }),
-    h && /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
+    g && /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
       /* @__PURE__ */ i.jsx("label", { children: "Border Radius" }),
       /* @__PURE__ */ i.jsx(
         "input",
         {
           type: "number",
           value: f.borderRadius || 0,
-          onChange: (b) => n("borderRadius", parseInt(b.target.value)),
+          onChange: (p) => n("borderRadius", parseInt(p.target.value)),
           min: "0",
           max: "50"
         }
       )
     ] })
-  ] }), I = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
+  ] }), E = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
     /* @__PURE__ */ i.jsx("h4", { children: "Position & Size" }),
     /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
       /* @__PURE__ */ i.jsxs("div", { className: "input-group", children: [
@@ -5658,7 +5658,7 @@ const Ut = {
           {
             type: "number",
             value: Math.round(f.x) || 0,
-            onChange: (b) => n("x", parseInt(b.target.value))
+            onChange: (p) => n("x", parseInt(p.target.value))
           }
         )
       ] }),
@@ -5669,7 +5669,7 @@ const Ut = {
           {
             type: "number",
             value: Math.round(f.y) || 0,
-            onChange: (b) => n("y", parseInt(b.target.value))
+            onChange: (p) => n("y", parseInt(p.target.value))
           }
         )
       ] })
@@ -5682,7 +5682,7 @@ const Ut = {
           {
             type: "number",
             value: Math.round(f.width) || 0,
-            onChange: (b) => n("width", parseInt(b.target.value)),
+            onChange: (p) => n("width", parseInt(p.target.value)),
             min: "1"
           }
         )
@@ -5694,7 +5694,7 @@ const Ut = {
           {
             type: "number",
             value: Math.round(f.height) || 0,
-            onChange: (b) => n("height", parseInt(b.target.value)),
+            onChange: (p) => n("height", parseInt(p.target.value)),
             min: "1"
           }
         )
@@ -5709,7 +5709,7 @@ const Ut = {
           min: "-180",
           max: "180",
           value: f.rotation || 0,
-          onChange: (b) => n("rotation", parseInt(b.target.value))
+          onChange: (p) => n("rotation", parseInt(p.target.value))
         }
       ),
       /* @__PURE__ */ i.jsxs("span", { children: [
@@ -5717,7 +5717,7 @@ const Ut = {
         "°"
       ] })
     ] })
-  ] }), y = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
+  ] }), m = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
     /* @__PURE__ */ i.jsx("h4", { children: "Line Properties" }),
     /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
       /* @__PURE__ */ i.jsxs("div", { className: "input-group", children: [
@@ -5727,9 +5727,9 @@ const Ut = {
           {
             type: "number",
             value: f.strokeWidth || f.height || 2,
-            onChange: (b) => {
-              const F = parseInt(b.target.value);
-              n("strokeWidth", F), n("height", F);
+            onChange: (p) => {
+              const v = parseInt(p.target.value);
+              n("strokeWidth", v), n("height", v);
             },
             min: "1",
             max: "50"
@@ -5743,7 +5743,7 @@ const Ut = {
           {
             type: "number",
             value: f.width || 200,
-            onChange: (b) => n("width", parseInt(b.target.value)),
+            onChange: (p) => n("width", parseInt(p.target.value)),
             min: "10",
             max: "1000"
           }
@@ -5758,8 +5758,8 @@ const Ut = {
           {
             type: "color",
             value: f.stroke || f.fill || "#000000",
-            onChange: (b) => {
-              n("stroke", b.target.value), n("fill", b.target.value);
+            onChange: (p) => {
+              n("stroke", p.target.value), n("fill", p.target.value);
             }
           }
         ),
@@ -5768,15 +5768,15 @@ const Ut = {
           {
             type: "text",
             value: f.stroke || f.fill || "#000000",
-            onChange: (b) => {
-              n("stroke", b.target.value), n("fill", b.target.value);
+            onChange: (p) => {
+              n("stroke", p.target.value), n("fill", p.target.value);
             },
             placeholder: "#000000"
           }
         )
       ] })
     ] })
-  ] }), E = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
+  ] }), B = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
     /* @__PURE__ */ i.jsx("h4", { children: "Layer Controls" }),
     /* @__PURE__ */ i.jsxs("div", { className: "button-group vertical", children: [
       /* @__PURE__ */ i.jsx("button", { onClick: () => a(f.id, "top"), children: "Bring to Front" }),
@@ -5784,7 +5784,7 @@ const Ut = {
       /* @__PURE__ */ i.jsx("button", { onClick: () => a(f.id, "down"), children: "Send Backward" }),
       /* @__PURE__ */ i.jsx("button", { onClick: () => a(f.id, "bottom"), children: "Send to Back" })
     ] })
-  ] }), B = [
+  ] }), j = [
     "rectangle",
     "circle",
     "triangle",
@@ -5803,19 +5803,19 @@ const Ut = {
       /* @__PURE__ */ i.jsx("span", { className: "element-type", children: f.type })
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "panel-content", children: [
-      f.type === "text" && d(),
-      B.includes(f.type) && j(),
-      f.type === "image" && S(),
-      f.type === "horizontalLine" && y(),
-      I(),
+      f.type === "text" && c(),
+      j.includes(f.type) && F(),
+      f.type === "image" && I(),
+      f.type === "horizontalLine" && m(),
       E(),
+      B(),
       /* @__PURE__ */ i.jsx("div", { className: "property-group", children: /* @__PURE__ */ i.jsxs(
         "button",
         {
           className: "toggle-advanced",
-          onClick: () => x(!h),
+          onClick: () => h(!g),
           children: [
-            h ? "Hide" : "Show",
+            g ? "Hide" : "Show",
             " Advanced Options"
           ]
         }
@@ -5828,10 +5828,10 @@ const Ut = {
   onSelectElement: a,
   onMoveLayer: l,
   onDeleteElement: s,
-  theme: h
+  theme: g
 }) => {
-  const x = (d, j) => {
-    switch (d) {
+  const h = (c, F) => {
+    switch (c) {
       case "text":
         return "T";
       case "rectangle":
@@ -5871,42 +5871,42 @@ const Ut = {
       default:
         return "?";
     }
-  }, n = (d) => {
-    var j, S;
-    if (d.type === "text")
-      return d.isIcon && d.iconData ? `Icon: ${d.iconData.name}` : ((j = d.text) == null ? void 0 : j.substring(0, 20)) + (((S = d.text) == null ? void 0 : S.length) > 20 ? "..." : "") || "Text";
-    if (d.type === "qrcode")
-      return `QR Code: ${(d.data || "").substring(0, 15) + ((d.data || "").length > 15 ? "..." : "")}`;
-    if (d.type === "barcode") {
-      const I = d.format || "CODE128", y = d.data || "";
-      return `Barcode (${I}): ${y.substring(0, 10) + (y.length > 10 ? "..." : "")}`;
+  }, n = (c) => {
+    var F, I;
+    if (c.type === "text")
+      return c.isIcon && c.iconData ? `Icon: ${c.iconData.name}` : ((F = c.text) == null ? void 0 : F.substring(0, 20)) + (((I = c.text) == null ? void 0 : I.length) > 20 ? "..." : "") || "Text";
+    if (c.type === "qrcode")
+      return `QR Code: ${(c.data || "").substring(0, 15) + ((c.data || "").length > 15 ? "..." : "")}`;
+    if (c.type === "barcode") {
+      const E = c.format || "CODE128", m = c.data || "";
+      return `Barcode (${E}): ${m.substring(0, 10) + (m.length > 10 ? "..." : "")}`;
     }
-    return d.type === "sticker" ? `Sticker: ${(d.name || "Untitled").substring(0, 15)}` : d.type === "embroidery" ? `Embroidery: ${(d.name || "Design").substring(0, 15)}` : d.type.charAt(0).toUpperCase() + d.type.slice(1);
+    return c.type === "sticker" ? `Sticker: ${(c.name || "Untitled").substring(0, 15)}` : c.type === "embroidery" ? `Embroidery: ${(c.name || "Design").substring(0, 15)}` : c.type.charAt(0).toUpperCase() + c.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: f.length })
     ] }),
-    /* @__PURE__ */ i.jsx("div", { className: "layers-list", children: f.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-layers", children: "No elements added yet" }) : [...f].reverse().map((d, j) => /* @__PURE__ */ i.jsxs(
+    /* @__PURE__ */ i.jsx("div", { className: "layers-list", children: f.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-layers", children: "No elements added yet" }) : [...f].reverse().map((c, F) => /* @__PURE__ */ i.jsxs(
       "div",
       {
-        className: `layer-item ${(o == null ? void 0 : o.id) === d.id ? "selected" : ""}`,
-        onClick: () => a(d),
+        className: `layer-item ${(o == null ? void 0 : o.id) === c.id ? "selected" : ""}`,
+        onClick: () => a(c),
         children: [
           /* @__PURE__ */ i.jsxs("div", { className: "layer-info", children: [
-            /* @__PURE__ */ i.jsx("span", { className: "layer-icon", children: x(d.type) }),
-            /* @__PURE__ */ i.jsx("span", { className: "layer-name", children: n(d) })
+            /* @__PURE__ */ i.jsx("span", { className: "layer-icon", children: h(c.type) }),
+            /* @__PURE__ */ i.jsx("span", { className: "layer-name", children: n(c) })
           ] }),
           /* @__PURE__ */ i.jsxs("div", { className: "layer-controls", children: [
             /* @__PURE__ */ i.jsx(
               "button",
               {
                 className: "layer-btn",
-                onClick: (S) => {
-                  S.stopPropagation(), l(d.id, "up");
+                onClick: (I) => {
+                  I.stopPropagation(), l(c.id, "up");
                 },
-                disabled: j === 0,
+                disabled: F === 0,
                 title: "Move Up",
                 children: "↑"
               }
@@ -5915,10 +5915,10 @@ const Ut = {
               "button",
               {
                 className: "layer-btn",
-                onClick: (S) => {
-                  S.stopPropagation(), l(d.id, "down");
+                onClick: (I) => {
+                  I.stopPropagation(), l(c.id, "down");
                 },
-                disabled: j === f.length - 1,
+                disabled: F === f.length - 1,
                 title: "Move Down",
                 children: "↓"
               }
@@ -5927,8 +5927,8 @@ const Ut = {
               "button",
               {
                 className: "layer-btn delete",
-                onClick: (S) => {
-                  S.stopPropagation(), s(d.id);
+                onClick: (I) => {
+                  I.stopPropagation(), s(c.id);
                 },
                 title: "Delete",
                 children: "×"
@@ -5937,7 +5937,7 @@ const Ut = {
           ] })
         ]
       },
-      d.id
+      c.id
     )) })
   ] });
 };
@@ -5946,34 +5946,34 @@ class ci {
     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", x = !0) {
-    const n = {};
-    for (const d of a) {
-      const j = d.id || d.sectionName, S = o[j];
-      if (!S || !S.elements || S.elements.length === 0) {
-        console.log(`Skipping section ${j} - no elements`);
+  async exportAllSections(o, a, l, s, g = "png", h = !0, n = null) {
+    const c = {};
+    for (const F of a) {
+      const I = F.id || F.sectionName, E = o[I];
+      if (!E || !E.elements || E.elements.length === 0) {
+        console.log(`Skipping section ${I} - no elements`);
         continue;
       }
-      if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), x) {
-        const y = d.image || d.sectionImage;
-        if (y)
+      if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), h) {
+        let B = F.image || F.sectionImage;
+        if (n && n.sectionImage && (F.sectionName === "Front" || n.sections && Object.keys(n.sections).includes(F.sectionName)) && (B = n.sectionImage), B)
           try {
-            const E = await this.loadImage(y);
-            await this.processImageColor(E, S.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
-          } catch (E) {
-            console.warn("Failed to load background image:", E);
+            const j = await this.loadImage(B);
+            await this.processImageColor(j, E.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
+          } catch (j) {
+            console.warn("Failed to load background image:", j);
           }
       } else
         this.ctx.clearRect(0, 0, l, s);
-      for (const y of S.elements)
-        await this.drawElement(y);
-      const I = this.canvas.toDataURL(`image/${h}`, h === "jpeg" ? 0.9 : void 0);
-      n[j] = {
-        dataUrl: I,
-        blob: await this.dataUrlToBlob(I)
+      for (const B of E.elements)
+        await this.drawElement(B);
+      const m = this.canvas.toDataURL(`image/${g}`, g === "jpeg" ? 0.9 : void 0);
+      c[I] = {
+        dataUrl: m,
+        blob: await this.dataUrlToBlob(m)
       };
     }
-    return n;
+    return c;
   }
   // Also add a method to download all exports
   async downloadExports(o, a = "design") {
@@ -5983,12 +5983,12 @@ class ci {
       return;
     }
     if (l.length === 1) {
-      const s = l[0], { blob: h } = o[s], x = URL.createObjectURL(h), n = document.createElement("a");
-      n.href = x, n.download = `${a}-${s}.png`, document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(x);
+      const s = l[0], { blob: g } = o[s], h = URL.createObjectURL(g), n = document.createElement("a");
+      n.href = h, n.download = `${a}-${s}.png`, document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(h);
     } else
       for (const s of l) {
-        const { blob: h } = o[s], x = URL.createObjectURL(h), n = document.createElement("a");
-        n.href = x, n.download = `${a}-${s}.png`, document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(x), await new Promise((d) => setTimeout(d, 100));
+        const { blob: g } = o[s], h = URL.createObjectURL(g), n = document.createElement("a");
+        n.href = h, n.download = `${a}-${s}.png`, document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(h), await new Promise((c) => setTimeout(c, 100));
       }
   }
   async loadImage(o) {
@@ -6005,22 +6005,22 @@ class ci {
   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), x = h.data, n = this.hexToRgb(a);
+    const g = s.getImageData(0, 0, l.width, l.height), h = g.data, n = this.hexToRgb(a);
     if (!n) {
       console.warn("Invalid target color:", a);
       return;
     }
-    const { r: d, g: j, b: S } = n;
-    for (let I = 0; I < x.length; I += 4) {
-      if (x[I + 3] === 0) continue;
-      const E = this.getLuma(x[I], x[I + 1], x[I + 2]);
-      x[I] = Math.round(d * E), x[I + 1] = Math.round(j * E), x[I + 2] = Math.round(S * E);
+    const { r: c, g: F, b: I } = n;
+    for (let E = 0; E < h.length; E += 4) {
+      if (h[E + 3] === 0) continue;
+      const B = this.getLuma(h[E], h[E + 1], h[E + 2]);
+      h[E] = Math.round(c * B), h[E + 1] = Math.round(F * B), h[E + 2] = Math.round(I * B);
     }
-    return s.putImageData(h, 0, 0), this.processedImage = new Image(), new Promise((I) => {
+    return s.putImageData(g, 0, 0), this.processedImage = new Image(), new Promise((E) => {
       this.processedImage.onload = () => {
-        I();
+        E();
       }, this.processedImage.onerror = () => {
-        console.error("Failed to create processed image"), I();
+        console.error("Failed to create processed image"), E();
       }, this.processedImage.src = l.toDataURL("image/png");
     });
   }
@@ -6080,7 +6080,7 @@ class ci {
         await this.drawEmbroidery(o);
         break;
       case "image":
-        o.imageData && this.ctx.drawImage(o.imageData, 0, 0, o.width, o.height);
+        await this.drawImage(o);
         break;
     }
     this.ctx.restore();
@@ -6089,9 +6089,9 @@ class ci {
     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 x = h * l;
-      o.stroke && o.strokeWidth > 0 && this.ctx.strokeText(s, 0, x), this.ctx.fillText(s, 0, x);
+    a.forEach((s, g) => {
+      const h = g * l;
+      o.stroke && o.strokeWidth > 0 && this.ctx.strokeText(s, 0, h), this.ctx.fillText(s, 0, h);
     });
   }
   drawRectangle(o) {
@@ -6106,11 +6106,11 @@ class ci {
     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, x = o.numPoints || 5;
+    const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, g = s * 0.4, h = o.numPoints || 5;
     this.ctx.beginPath();
-    for (let n = 0; n < x * 2; n++) {
-      const d = n % 2 === 0 ? s : h, j = n * Math.PI / x, S = a + Math.cos(j) * d, I = l + Math.sin(j) * d;
-      n === 0 ? this.ctx.moveTo(S, I) : this.ctx.lineTo(S, I);
+    for (let n = 0; n < h * 2; n++) {
+      const c = n % 2 === 0 ? s : g, F = n * Math.PI / h, I = a + Math.cos(F) * c, E = l + Math.sin(F) * c;
+      n === 0 ? this.ctx.moveTo(I, E) : this.ctx.lineTo(I, E);
     }
     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 ci {
   }
   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"), g = new Image();
+      g.onload = () => {
+        l.width = g.width, l.height = g.height, s.drawImage(g, 0, 0), l.toBlob(a);
+      }, g.src = o;
     });
   }
   hexToRgb(o) {
@@ -6140,67 +6140,67 @@ class ci {
     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, g = 6;
     this.ctx.beginPath();
-    for (let x = 0; x < h; x++) {
-      const n = x * 2 * Math.PI / h - Math.PI / 2, d = a + s * Math.cos(n), j = l + s * Math.sin(n);
-      x === 0 ? this.ctx.moveTo(d, j) : this.ctx.lineTo(d, j);
+    for (let h = 0; h < g; h++) {
+      const n = h * 2 * Math.PI / g - Math.PI / 2, c = a + s * Math.cos(n), F = l + s * Math.sin(n);
+      h === 0 ? this.ctx.moveTo(c, F) : this.ctx.lineTo(c, F);
     }
     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, g = 5;
     this.ctx.beginPath();
-    for (let x = 0; x < h; x++) {
-      const n = x * 2 * Math.PI / h - Math.PI / 2, d = a + s * Math.cos(n), j = l + s * Math.sin(n);
-      x === 0 ? this.ctx.moveTo(d, j) : this.ctx.lineTo(d, j);
+    for (let h = 0; h < g; h++) {
+      const n = h * 2 * Math.PI / g - Math.PI / 2, c = a + s * Math.cos(n), F = l + s * Math.sin(n);
+      h === 0 ? this.ctx.moveTo(c, F) : this.ctx.lineTo(c, F);
     }
     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, g = 0;
     this.ctx.beginPath();
-    const x = l * 0.3;
-    this.ctx.moveTo(s + a / 2, h + x), this.ctx.bezierCurveTo(
+    const h = l * 0.3;
+    this.ctx.moveTo(s + a / 2, g + h), this.ctx.bezierCurveTo(
       s + a / 2,
-      h,
+      g,
       s,
-      h,
+      g,
       s,
-      h + x
+      g + h
     ), this.ctx.bezierCurveTo(
       s,
-      h + (l + x) / 2,
+      g + (l + h) / 2,
       s + a / 2,
-      h + (l + x) / 2,
+      g + (l + h) / 2,
       s + a / 2,
-      h + l
+      g + l
     ), this.ctx.bezierCurveTo(
       s + a / 2,
-      h + (l + x) / 2,
+      g + (l + h) / 2,
       s + a,
-      h + (l + x) / 2,
+      g + (l + h) / 2,
       s + a,
-      h + x
+      g + h
     ), this.ctx.bezierCurveTo(
       s + a,
-      h,
+      g,
       s + a / 2,
-      h,
+      g,
       s + a / 2,
-      h + x
+      g + h
     ), 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, g = o.height / 2;
+    this.ctx.beginPath(), this.ctx.ellipse(a, l, s, g, 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, g) {
+    this.ctx.beginPath(), this.ctx.moveTo(o + g, a), this.ctx.lineTo(o + l - g, a), this.ctx.quadraticCurveTo(o + l, a, o + l, a + g), this.ctx.lineTo(o + l, a + s - g), this.ctx.quadraticCurveTo(o + l, a + s, o + l - g, a + s), this.ctx.lineTo(o + g, a + s), this.ctx.quadraticCurveTo(o, a + s, o, a + s - g), this.ctx.lineTo(o, a + g), this.ctx.quadraticCurveTo(o, a, o + g, a), this.ctx.closePath();
   }
   async drawQRCode(o) {
     if (o.imageObject)
@@ -6263,6 +6263,54 @@ class ci {
       console.warn("Failed to draw embroidery:", a), this.ctx.fillStyle = "#ffebee", this.ctx.fillRect(0, 0, o.width, o.height), this.ctx.strokeStyle = "#f44336", this.ctx.strokeRect(0, 0, o.width, o.height), this.ctx.fillStyle = "#f44336", this.ctx.font = "12px Arial", this.ctx.textAlign = "center", this.ctx.textBaseline = "middle", this.ctx.fillText("Error", o.width / 2, o.height / 2);
     }
   }
+  // Add this new method to handle image elements more robustly
+  async drawImage(o) {
+    try {
+      let a = null;
+      if (o.imageObject && o.imageObject instanceof HTMLImageElement)
+        a = o.imageObject;
+      else if (o.imageData) {
+        if (o.imageData instanceof HTMLImageElement)
+          a = o.imageData;
+        else if (typeof o.imageData == "string")
+          try {
+            a = await this.loadImage(o.imageData);
+          } catch (l) {
+            console.warn("Failed to load image from imageData URL:", o.imageData, l), a = await this.loadImageWithFallback(o.imageData);
+          }
+      } else if (o.src)
+        try {
+          a = await this.loadImage(o.src);
+        } catch (l) {
+          console.warn("Failed to load image from src:", o.src, l), a = await this.loadImageWithFallback(o.src);
+        }
+      else if (o.image)
+        try {
+          a = await this.loadImage(o.image);
+        } catch (l) {
+          console.warn("Failed to load image from image property:", o.image, l), a = await this.loadImageWithFallback(o.image);
+        }
+      a ? (o.opacity !== void 0 && (this.ctx.globalAlpha = o.opacity), this.ctx.drawImage(a, 0, 0, o.width, o.height)) : this.drawImagePlaceholder(o);
+    } catch (a) {
+      console.error("Failed to draw image element:", a), this.drawImagePlaceholder(o);
+    }
+  }
+  // Add fallback image loading method
+  async loadImageWithFallback(o) {
+    return new Promise((a) => {
+      const l = new Image();
+      l.onload = () => a(l), l.onerror = () => {
+        const s = new Image();
+        s.crossOrigin = "anonymous", s.onload = () => a(s), s.onerror = () => {
+          console.warn("All image loading attempts failed for:", o), a(null);
+        }, s.src = o;
+      }, l.src = o;
+    });
+  }
+  // Add placeholder drawing method
+  drawImagePlaceholder(o) {
+    this.ctx.fillStyle = "#f0f0f0", this.ctx.fillRect(0, 0, o.width, o.height), this.ctx.strokeStyle = "#ccc", this.ctx.lineWidth = 2, this.ctx.strokeRect(0, 0, o.width, o.height), this.ctx.fillStyle = "#666", this.ctx.font = "12px Arial", this.ctx.textAlign = "center", this.ctx.textBaseline = "middle", this.ctx.fillText("Image", o.width / 2, o.height / 2 - 8), this.ctx.fillText("Not Found", o.width / 2, o.height / 2 + 8);
+  }
   /**Export to JSON formats**/
   // Add these new methods to the ExportManager class
   // Helper method to convert blob to File
@@ -6273,189 +6321,225 @@ class ci {
     });
   }
   // Export all sections as JSON with File objects
-  async exportAllSectionsAsJSON(o, a, l, s, h = "png") {
-    const x = [], n = [], d = {};
-    for (const S of a) {
-      const I = S.id || S.sectionName, y = o[I];
-      if (!y || !y.elements || y.elements.length === 0) {
-        console.log(`Skipping section ${I} - no elements`);
+  async exportAllSectionsAsJSON(o, a, l, s, g = "png", h = null) {
+    var m, B;
+    const n = [], c = [], F = {};
+    for (const j of a) {
+      const p = j.id || j.sectionName, v = o[p];
+      if (!v || !v.elements || v.elements.length === 0) {
+        console.log(`Skipping section ${p} - no elements`);
         continue;
       }
-      const E = {
-        ...y,
-        // Include background information
-        backgroundImage: S.image || S.sectionImage,
-        sectionImage: S.image || S.sectionImage,
-        sectionName: I,
+      let X = j.image || j.sectionImage;
+      h && h.sectionImage && (j.sectionName === "Front" || h.sections && Object.keys(h.sections).includes(j.sectionName)) && (X = h.sectionImage);
+      const T = {
+        ...v,
+        // Include background information using the determined image
+        backgroundImage: X,
+        sectionImage: X,
+        sectionName: p,
         // Ensure we have the selected color
-        selectedColor: y.selectedColor || "#FFFFFF",
+        selectedColor: v.selectedColor || "#FFFFFF",
         // Include canvas dimensions
         canvasWidth: l,
         canvasHeight: s
       };
-      d[I] = E;
-      const B = await this.exportSectionAsBlob(
-        y,
-        S,
+      F[p] = T;
+      const O = await this.exportSectionAsBlob(
+        v,
+        j,
         l,
         s,
-        h,
-        !0
+        g,
+        !0,
+        h
+        // Pass initData to exportSectionAsBlob
       );
-      if (B) {
-        const F = await this.blobToFile(
-          B,
-          `${I}-full.${h}`,
-          `image/${h}`
+      if (O) {
+        const Z = await this.blobToFile(
+          O,
+          `${p}-full.${g}`,
+          `image/${g}`
         );
-        x.push({
-          sectionName: I,
-          sectionImage: F
+        n.push({
+          sectionName: p,
+          sectionImage: Z
         });
       }
-      const b = await this.exportSectionAsBlob(
-        y,
-        S,
+      const k = await this.exportSectionAsBlob(
+        v,
+        j,
         l,
         s,
-        h,
-        !1
+        g,
+        !1,
+        h
+        // Pass initData to exportSectionAsBlob
       );
-      if (b) {
-        const F = await this.blobToFile(
-          b,
-          `${I}-print.${h}`,
-          `image/${h}`
+      if (k) {
+        const Z = await this.blobToFile(
+          k,
+          `${p}-print.${g}`,
+          `image/${g}`
         );
-        n.push({
-          sectionName: I,
-          sectionImage: F
+        c.push({
+          sectionName: p,
+          sectionImage: Z
         });
       }
     }
-    const j = {
-      sections: d,
+    let I = ((m = a[0]) == null ? void 0 : m.image) || ((B = a[0]) == null ? void 0 : B.sectionImage);
+    if (h && h.sectionImage) {
+      const j = a[0];
+      j && (j.sectionName === "Front" || h.sections && Object.keys(h.sections).includes(j.sectionName)) && (I = h.sectionImage);
+    }
+    const E = {
+      sections: F,
       canvasWidth: l,
       canvasHeight: s,
-      sectionImage: a[0].image || a[0].sectionImage,
-      format: h,
+      sectionImage: I,
+      format: g,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       version: "1.0",
+      // Include initData information if present
+      ...h && {
+        initData: {
+          sectionImage: h.sectionImage,
+          sections: h.sections ? Object.keys(h.sections) : []
+        }
+      },
       // Include product information for complete context
       product: {
-        sections: a.map((S) => ({
-          sectionName: S.sectionName || S.id,
-          sectionImage: S.image || S.sectionImage,
-          id: S.id || S.sectionName
+        sections: a.map((j) => ({
+          sectionName: j.sectionName || j.id,
+          sectionImage: j.image || j.sectionImage,
+          id: j.id || j.sectionName
         }))
       }
     };
     return {
-      fullDesign: x,
-      printReady: n,
-      designFile: JSON.stringify(j)
+      fullDesign: n,
+      printReady: c,
+      designFile: JSON.stringify(E)
     };
   }
   // Helper method to export a single section as blob
-  async exportSectionAsBlob(o, a, l, s, h = "png", x = !0) {
+  async exportSectionAsBlob(o, a, l, s, g = "png", h = !0, n = null) {
     try {
-      if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), x) {
-        const n = a.image || a.sectionImage;
-        if (n)
+      if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), h) {
+        let c = a.image || a.sectionImage;
+        if (n && n.sectionImage && (a.sectionName === "Front" || n.sections && Object.keys(n.sections).includes(a.sectionName)) && (c = n.sectionImage), c)
           try {
-            const d = await this.loadImage(n);
-            await this.processImageColor(d, o.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
-          } catch (d) {
-            console.warn("Failed to load background image:", d);
+            const F = await this.loadImage(c);
+            await this.processImageColor(F, o.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
+          } catch (F) {
+            console.warn("Failed to load background image:", F);
           }
       } else
         this.ctx.clearRect(0, 0, l, s);
-      for (const n of o.elements)
-        await this.drawElement(n);
-      return new Promise((n) => {
-        this.canvas.toBlob(n, `image/${h}`, h === "jpeg" ? 0.9 : void 0);
+      for (const c of o.elements)
+        await this.drawElement(c);
+      return new Promise((c) => {
+        this.canvas.toBlob(c, `image/${g}`, g === "jpeg" ? 0.9 : void 0);
       });
-    } catch (n) {
-      return console.error("Error exporting section as blob:", n), null;
+    } catch (c) {
+      return console.error("Error exporting section as blob:", c), null;
     }
   }
-  async exportCurrentSectionAsJSON(o, a = "png") {
-    var I, y, E, B, b, F, J, T, O;
-    const l = ((I = o.activeSection) == null ? void 0 : I.sectionName) || "main", s = {
+  async exportCurrentSectionAsJSON(o, a = "png", l = null) {
+    var B, j, p;
+    const s = ((B = o.activeSection) == null ? void 0 : B.sectionName) || "main";
+    let g = ((j = o.activeSection) == null ? void 0 : j.sectionImage) || ((p = o.activeSection) == null ? void 0 : p.image);
+    l && l.sectionImage && (s === "Front" || l.sections && Object.keys(l.sections).includes(s)) && (g = l.sectionImage);
+    const h = {
       elements: o.elements,
       selectedColor: o.selectedColor,
       canvasWidth: o.canvasWidth,
       canvasHeight: o.canvasHeight,
-      // Include background information
-      backgroundImage: ((y = o.activeSection) == null ? void 0 : y.sectionImage) || ((E = o.activeSection) == null ? void 0 : E.image),
-      sectionImage: ((B = o.activeSection) == null ? void 0 : B.sectionImage) || ((b = o.activeSection) == null ? void 0 : b.image),
-      sectionName: l,
+      // Include background information using the determined image
+      backgroundImage: g,
+      sectionImage: g,
+      sectionName: s,
       zoomLevel: o.zoomLevel,
       showGrid: o.showGrid,
       snapToGrid: o.snapToGrid
-    }, h = {
-      id: l,
-      sectionName: l,
-      image: (F = o.activeSection) == null ? void 0 : F.sectionImage,
-      sectionImage: (J = o.activeSection) == null ? void 0 : J.sectionImage
-    }, x = [], n = [], d = await this.exportSectionAsBlob(
-      s,
+    }, n = {
+      id: s,
+      sectionName: s,
+      image: g,
+      sectionImage: g
+    }, c = [], F = [], I = await this.exportSectionAsBlob(
       h,
+      n,
       o.canvasWidth,
       o.canvasHeight,
       a,
-      !0
+      !0,
+      l
+      // Pass initData to exportSectionAsBlob
     );
-    if (d) {
+    if (I) {
       const v = await this.blobToFile(
-        d,
-        `${l}-full.${a}`,
+        I,
+        `${s}-full.${a}`,
         `image/${a}`
       );
-      x.push({
-        sectionName: l,
+      c.push({
+        sectionName: s,
         sectionImage: v
       });
     }
-    const j = await this.exportSectionAsBlob(
-      s,
+    const E = await this.exportSectionAsBlob(
       h,
+      n,
       o.canvasWidth,
       o.canvasHeight,
       a,
-      !1
+      !1,
+      l
+      // Pass initData to exportSectionAsBlob
     );
-    if (j) {
+    if (E) {
       const v = await this.blobToFile(
-        j,
-        `${l}-print.${a}`,
+        E,
+        `${s}-print.${a}`,
         `image/${a}`
       );
-      n.push({
-        sectionName: l,
+      F.push({
+        sectionName: s,
         sectionImage: v
       });
     }
-    const S = {
-      sections: { [l]: s },
+    const m = {
+      sections: { [s]: h },
       canvasWidth: o.canvasWidth,
       canvasHeight: o.canvasHeight,
+      sectionImage: g,
+      // Use the determined image here too
       format: a,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       version: "1.0",
+      // Include initData information if present
+      ...l && {
+        initData: {
+          sectionImage: l.sectionImage,
+          sections: l.sections ? Object.keys(l.sections) : []
+        }
+      },
       // Include product information for complete context
       productInfo: {
         sections: [{
-          sectionName: l,
-          sectionImage: ((T = o.activeSection) == null ? void 0 : T.sectionImage) || ((O = o.activeSection) == null ? void 0 : O.image),
-          id: l
+          sectionName: s,
+          sectionImage: g,
+          // Use the determined image here too
+          id: s
         }]
       }
     };
     return {
-      fullDesign: x,
-      printReady: n,
-      designFile: JSON.stringify(S)
+      fullDesign: c,
+      printReady: F,
+      designFile: JSON.stringify(m)
     };
   }
 }
@@ -6467,10 +6551,10 @@ class di {
   saveDesign(o, a) {
     var l;
     try {
-      const s = this.generateDesignId(o), h = (/* @__PURE__ */ new Date()).toISOString(), x = {
+      const s = this.generateDesignId(o), g = (/* @__PURE__ */ new Date()).toISOString(), h = {
         id: s,
         name: o,
-        timestamp: h,
+        timestamp: g,
         version: "1.0",
         canvasData: {
           elements: a.elements || [],
@@ -6486,11 +6570,11 @@ class di {
         },
         metadata: {
           elementCount: ((l = a.elements) == null ? void 0 : l.length) || 0,
-          lastModified: h,
+          lastModified: g,
           thumbnail: a.thumbnail || null
         }
       };
-      return this.storage.setItem(this.STORAGE_PREFIX + s, JSON.stringify(x)), this.updateDesignsList(s, o, h), { success: !0, designId: s, message: "Design saved successfully" };
+      return this.storage.setItem(this.STORAGE_PREFIX + s, JSON.stringify(h)), this.updateDesignsList(s, o, g), { success: !0, designId: s, message: "Design saved successfully" };
     } catch (s) {
       return console.error("Error saving design:", s), { success: !1, error: s.message };
     }
@@ -6500,10 +6584,10 @@ class di {
     try {
       let a = o;
       if (!o.startsWith("design_")) {
-        const x = this.getAllDesigns().find((n) => n.name === o);
-        if (!x)
+        const h = this.getAllDesigns().find((n) => n.name === o);
+        if (!h)
           return { success: !1, error: "Design not found" };
-        a = x.id;
+        a = h.id;
       }
       const l = this.storage.getItem(this.STORAGE_PREFIX + a);
       return l ? { success: !0, data: JSON.parse(l) } : { success: !1, error: "Design not found" };
@@ -6536,8 +6620,8 @@ class di {
       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" }), x = URL.createObjectURL(h), n = document.createElement("a");
-      return n.href = x, n.download = `${l.name}_${l.id}.json`, document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(x), { success: !0, message: "Design exported successfully" };
+      const l = a.data, s = JSON.stringify(l, null, 2), g = new Blob([s], { type: "application/json" }), h = URL.createObjectURL(g), n = document.createElement("a");
+      return n.href = h, n.download = `${l.name}_${l.id}.json`, document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(h), { success: !0, message: "Design exported successfully" };
     } catch (a) {
       return console.error("Error exporting design:", a), { success: !1, error: a.message };
     }
@@ -6549,13 +6633,13 @@ class di {
         const l = new FileReader();
         l.onload = (s) => {
           try {
-            const h = JSON.parse(s.target.result);
-            if (!this.validateDesignData(h)) {
+            const g = JSON.parse(s.target.result);
+            if (!this.validateDesignData(g)) {
               a({ success: !1, error: "Invalid design file format" });
               return;
             }
-            const x = this.generateDesignId(h.name + "_imported");
-            h.id = x, h.name += "_imported", h.timestamp = (/* @__PURE__ */ new Date()).toISOString(), h.metadata.lastModified = h.timestamp, this.storage.setItem(this.STORAGE_PREFIX + x, JSON.stringify(h)), this.updateDesignsList(x, h.name, h.timestamp), a({ success: !0, data: h, message: "Design imported successfully" });
+            const h = this.generateDesignId(g.name + "_imported");
+            g.id = h, g.name += "_imported", g.timestamp = (/* @__PURE__ */ new Date()).toISOString(), g.metadata.lastModified = g.timestamp, this.storage.setItem(this.STORAGE_PREFIX + h, JSON.stringify(g)), this.updateDesignsList(h, g.name, g.timestamp), a({ success: !0, data: g, message: "Design imported successfully" });
           } catch {
             a({ success: !1, error: "Failed to parse design file" });
           }
@@ -6623,13 +6707,13 @@ class di {
     return `design_${a}_${l}`;
   }
   updateDesignsList(o, a, l) {
-    const s = this.getAllDesigns(), h = s.findIndex((n) => n.id === o), x = {
+    const s = this.getAllDesigns(), g = s.findIndex((n) => n.id === o), h = {
       id: o,
       name: a,
       timestamp: l,
       lastModified: l
     };
-    h >= 0 ? s[h] = x : s.push(x), s.sort((n, d) => new Date(d.timestamp) - new Date(n.timestamp)), this.storage.setItem(this.DESIGNS_LIST_KEY, JSON.stringify(s));
+    g >= 0 ? s[g] = h : s.push(h), s.sort((n, c) => new Date(c.timestamp) - new Date(n.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);
@@ -6679,17 +6763,17 @@ const fi = $e((f, o) => {
         }
       ]
     },
-    initFile: h
-  } = f, [x, n] = N([]), [d, j] = N(null), [S, I] = N(!1), [y, E] = N(!1), [B, b] = N(!1), [F, J] = N({ x: 0, y: 0 }), [T, O] = N(null), [v, st] = N(800), [W, xt] = N(600), [Q, ft] = N(1), [_, at] = N(s.colorSettings[0]), [M, nt] = N(!1), [Z, ct] = N(!0), [Y, P] = N(!0), [C, tt] = N(s.sections[0]), [u, D] = N(!1), [L, H] = N({}), [G, et] = N([]), [X, q] = N(-1), [U] = N(new di("localStorage")), K = gt(null), kt = gt(null), mt = gt(null), pt = gt(null), Ot = gt(null), Bt = gt(new ci()), zt = gt(!1), [wt, ce] = N(null), lt = rt(() => {
+    initFile: g
+  } = f, [h, n] = N([]), [c, F] = N(null), [I, E] = N(!1), [m, B] = N(!1), [j, p] = N(!1), [v, X] = N({ x: 0, y: 0 }), [T, O] = N(null), [k, Z] = N(800), [W, xt] = N(600), [Q, ft] = N(1), [_, st] = N(s.colorSettings[0]), [M, nt] = N(!1), [tt, ct] = N(!0), [Y, P] = N(!0), [C, et] = N(s.sections[0]), [y, D] = N(!1), [L, H] = N({}), [G, it] = N([]), [J, q] = N(-1), [U] = N(new di("localStorage")), K = gt(null), kt = gt(null), pt = gt(null), wt = gt(null), Ot = gt(null), Bt = gt(new ci()), zt = gt(!1), [yt, ce] = N(null), lt = at(() => {
     const e = {
-      elements: JSON.parse(JSON.stringify(x)),
-      selectedElement: d ? { ...d } : null,
+      elements: JSON.parse(JSON.stringify(h)),
+      selectedElement: c ? { ...c } : null,
       timestamp: Date.now()
-    }, t = G.slice(0, X + 1);
-    t.push(e), t.length > 50 ? t.shift() : q(X + 1), et(t);
-  }, [x, d, G, X]), St = rt(() => ({
-    elements: x,
-    canvasWidth: v,
+    }, t = G.slice(0, J + 1);
+    t.push(e), t.length > 50 ? t.shift() : q(J + 1), it(t);
+  }, [h, c, G, J]), St = at(() => ({
+    elements: h,
+    canvasWidth: k,
     canvasHeight: W,
     selectedColor: _,
     activeSection: C,
@@ -6698,26 +6782,26 @@ const fi = $e((f, o) => {
     zoomLevel: Q,
     showGrid: M,
     snapToGrid: Y,
-    selectedElement: d ? { ...d } : null,
+    selectedElement: c ? { ...c } : null,
     canvasRef: K
     // Include reference for thumbnail generation
-  }), [x, v, W, _, C, s, L, Q, M, Y, d]);
-  ot(() => {
+  }), [h, k, W, _, C, s, L, Q, M, Y, c]);
+  rt(() => {
     const t = setTimeout(async () => {
-      if (x.length === 0 && G.length <= 1) {
-        if (h)
+      if (h.length === 0 && G.length <= 1) {
+        if (g)
           try {
-            const A = await fetch(h);
+            const A = await fetch(g);
             if (A.ok) {
               const z = await A.text();
               if (z.trim()) {
                 const $ = JSON.parse(z.trim());
                 if (console.log("Loading design from file:", $), ce($), $.sections && typeof $.sections == "object") {
-                  const dt = Object.keys($.sections)[0], it = $.sections[dt];
-                  if (it && it.elements) {
-                    n(it.elements || []), st(it.canvasWidth || 800), xt(it.canvasHeight || 600), at(it.selectedColor || s.colorSettings[0]), ft(it.zoomLevel || 1), nt(it.showGrid || !1), P(it.snapToGrid || !0), j(null), $.sections && H($.sections);
+                  const dt = Object.keys($.sections)[0], ot = $.sections[dt];
+                  if (ot && ot.elements) {
+                    n(ot.elements || []), Z(ot.canvasWidth || 800), xt(ot.canvasHeight || 600), st(ot.selectedColor || s.colorSettings[0]), ft(ot.zoomLevel || 1), nt(ot.showGrid || !1), P(ot.snapToGrid || !0), F(null), $.sections && H($.sections);
                     const Rt = s.sections.find((Dt) => Dt.sectionName === dt);
-                    Rt && tt(Rt), et([]), q(-1), setTimeout(() => {
+                    Rt && et(Rt), it([]), q(-1), setTimeout(() => {
                       lt();
                     }, 100);
                     return;
@@ -6729,20 +6813,20 @@ const fi = $e((f, o) => {
           } catch (A) {
             console.error("Error loading design file:", A), console.warn("Using default text instead");
           }
-        const r = 24, c = "Arial", g = "Change me", p = document.createElement("canvas").getContext("2d");
-        p.font = `${r}px ${c}`;
-        const w = p.measureText(g).width, R = {
+        const r = 24, d = "Arial", x = "Change me", w = document.createElement("canvas").getContext("2d");
+        w.font = `${r}px ${d}`;
+        const b = w.measureText(x).width, R = {
           id: ht(),
           type: "text",
-          x: v / 2 - w / 2,
+          x: k / 2 - b / 2,
           // Center the actual text width
           y: W / 2 - r / 2,
           // Center based on font size
-          width: w,
+          width: b,
           height: r,
-          text: g,
+          text: x,
           fontSize: r,
-          fontFamily: c,
+          fontFamily: d,
           fontWeight: "normal",
           fontStyle: "normal",
           textAlign: "left",
@@ -6753,14 +6837,14 @@ const fi = $e((f, o) => {
           rotation: 0,
           opacity: 1
         };
-        n([R]), j(R), setTimeout(() => {
+        n([R]), F(R), setTimeout(() => {
           lt();
         }, 100);
       }
     }, 300);
     return () => clearTimeout(t);
-  }, [h, s.colorSettings, s.sections]);
-  const Wt = rt((e = "png", t = !0) => {
+  }, [g, s.colorSettings, s.sections]);
+  const Wt = at((e = "png", t = !0) => {
     const r = St();
     return s.sections, Bt.current.exportAllSections(
       { [(C == null ? void 0 : C.sectionName) || "main"]: r },
@@ -6770,12 +6854,13 @@ const fi = $e((f, o) => {
         image: C == null ? void 0 : C.sectionImage,
         sectionImage: C == null ? void 0 : C.sectionImage
       }],
-      v,
+      k,
       W,
       e,
-      t
+      t,
+      yt
     );
-  }, [St, s.sections, C, v, W]), de = [
+  }, [St, s.sections, C, k, W]), de = [
     "Arial",
     "Helvetica",
     "Times New Roman",
@@ -6791,18 +6876,18 @@ const fi = $e((f, o) => {
     "Bookman",
     "Avant Garde",
     "Century Gothic"
-  ], At = 20;
-  ot(() => {
+  ], It = 20;
+  rt(() => {
     const e = () => D(window.innerWidth < 768);
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-  }, []), ot(() => {
+  }, []), rt(() => {
     const e = document.createElement("canvas");
-    e.width = v, e.height = W, Ot.current = e;
-  }, [v, W]), ot(() => {
+    e.width = k, e.height = W, Ot.current = e;
+  }, [k, W]), rt(() => {
     G.length === 0 && lt();
   }, []);
-  const It = (e, t, r, c, g, m) => {
-    e.beginPath(), e.moveTo(t + m, r), e.lineTo(t + c - m, r), e.quadraticCurveTo(t + c, r, t + c, r + m), e.lineTo(t + c, r + g - m), e.quadraticCurveTo(t + c, r + g, t + c - m, r + g), e.lineTo(t + m, r + g), e.quadraticCurveTo(t, r + g, t, r + g - m), e.lineTo(t, r + m), e.quadraticCurveTo(t, r, t + m, r), e.closePath();
+  const At = (e, t, r, d, x, u) => {
+    e.beginPath(), e.moveTo(t + u, r), e.lineTo(t + d - u, r), e.quadraticCurveTo(t + d, r, t + d, r + u), e.lineTo(t + d, r + x - u), e.quadraticCurveTo(t + d, r + x, t + d - u, r + x), e.lineTo(t + u, r + x), e.quadraticCurveTo(t, r + x, t, r + x - u), e.lineTo(t, r + u), e.quadraticCurveTo(t, r, t + u, r), e.closePath();
   }, Qt = (e, t) => {
     if (!t.isIcon)
       return {
@@ -6814,120 +6899,121 @@ const fi = $e((f, 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), c = r.actualBoundingBoxAscent ?? t.fontSize * 0.8, g = r.actualBoundingBoxDescent ?? t.fontSize * 0.2, m = r.actualBoundingBoxLeft ?? 0, p = r.actualBoundingBoxRight ?? r.width, k = m + p, w = c + g, R = t.x, A = t.y, z = R - k / 2 - m, $ = A - w / 2 - c;
-    return e.restore(), { x: z, y: $, width: k, height: w, cx: R, cy: A };
+    const r = e.measureText(t.text), d = r.actualBoundingBoxAscent ?? t.fontSize * 0.8, x = r.actualBoundingBoxDescent ?? t.fontSize * 0.2, u = r.actualBoundingBoxLeft ?? 0, w = r.actualBoundingBoxRight ?? r.width, S = u + w, b = d + x, R = t.x, A = t.y, z = R - S / 2 - u, $ = A - b / 2 - d;
+    return e.restore(), { x: z, y: $, width: S, height: b, cx: R, cy: A };
   }, fe = (e, t) => {
     if (!t) return;
-    const r = 8, c = 8, g = 4, m = 30, p = Qt(e, t), k = t.isIcon ? Math.max(r, 12) : r, w = {
-      x: -p.width / 2 - k,
-      y: -p.height / 2 - k,
-      w: p.width + k * 2,
-      h: p.height + k * 2
+    const r = 8, d = 8, x = 4, u = 30, w = Qt(e, t), S = t.isIcon ? Math.max(r, 12) : r, b = {
+      x: -w.width / 2 - S,
+      y: -w.height / 2 - S,
+      w: w.width + S * 2,
+      h: w.height + S * 2
     };
-    e.save(), e.translate(p.cx, p.cy), t.rotation && e.rotate(t.rotation * Math.PI / 180);
+    e.save(), e.translate(w.cx, w.cy), t.rotation && e.rotate(t.rotation * Math.PI / 180);
     const R = e.createLinearGradient(
-      w.x,
-      w.y,
-      w.x + w.w,
-      w.y + w.h
+      b.x,
+      b.y,
+      b.x + b.w,
+      b.y + b.h
     );
-    R.addColorStop(0, "#3b82f6"), R.addColorStop(0.5, "#1d4ed8"), R.addColorStop(1, "#3b82f6"), e.strokeStyle = "rgba(59,130,246,.3)", e.lineWidth = 3, It(
+    R.addColorStop(0, "#3b82f6"), R.addColorStop(0.5, "#1d4ed8"), R.addColorStop(1, "#3b82f6"), e.strokeStyle = "rgba(59,130,246,.3)", e.lineWidth = 3, At(
       e,
-      w.x - 1,
-      w.y - 1,
-      w.w + 2,
-      w.h + 2,
-      g + 1
-    ), e.stroke(), e.strokeStyle = R, e.lineWidth = 2, e.setLineDash([8, 4]), It(e, w.x, w.y, w.w, w.h, g), e.stroke(), e.lineDashOffset = -(Date.now() / 50) % 12, e.strokeStyle = "#ffffff", e.lineWidth = 1, e.setLineDash([4, 8]), It(e, w.x, w.y, w.w, w.h, g), e.stroke(), e.setLineDash([]), e.lineDashOffset = 0, [
-      { x: w.x, y: w.y },
-      { x: w.x + w.w, y: w.y },
-      { x: w.x + w.w, y: w.y + w.h },
-      { x: w.x, y: w.y + w.h }
+      b.x - 1,
+      b.y - 1,
+      b.w + 2,
+      b.h + 2,
+      x + 1
+    ), e.stroke(), e.strokeStyle = R, e.lineWidth = 2, e.setLineDash([8, 4]), At(e, b.x, b.y, b.w, b.h, x), e.stroke(), e.lineDashOffset = -(Date.now() / 50) % 12, e.strokeStyle = "#ffffff", e.lineWidth = 1, e.setLineDash([4, 8]), At(e, b.x, b.y, b.w, b.h, x), e.stroke(), e.setLineDash([]), e.lineDashOffset = 0, [
+      { x: b.x, y: b.y },
+      { x: b.x + b.w, y: b.y },
+      { x: b.x + b.w, y: b.y + b.h },
+      { x: b.x, y: b.y + b.h }
     ].forEach(($) => {
       e.fillStyle = "rgba(0,0,0,.2)", e.fillRect(
-        $.x - c / 2 + 1,
-        $.y - c / 2 + 1,
-        c,
-        c
+        $.x - d / 2 + 1,
+        $.y - d / 2 + 1,
+        d,
+        d
       ), e.fillStyle = "#ffffff", e.fillRect(
-        $.x - c / 2,
-        $.y - c / 2,
-        c,
-        c
+        $.x - d / 2,
+        $.y - d / 2,
+        d,
+        d
       ), e.strokeStyle = "#3b82f6", e.lineWidth = 1, e.strokeRect(
-        $.x - c / 2,
-        $.y - c / 2,
-        c,
-        c
+        $.x - d / 2,
+        $.y - d / 2,
+        d,
+        d
       );
     });
-    const A = 0, z = w.y - m;
-    e.strokeStyle = "#3b82f6", e.lineWidth = 1, e.setLineDash([2, 2]), e.beginPath(), e.moveTo(A, z + 12), e.lineTo(A, w.y), e.stroke(), e.setLineDash([]), e.beginPath(), e.arc(A, z, 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(A, z, 6, -Math.PI / 2, Math.PI, !1), e.stroke(), e.beginPath(), e.moveTo(A - 6, z), e.lineTo(A - 3, z - 3), e.lineTo(A - 3, z + 3), e.closePath(), e.fillStyle = "#ffffff", e.fill(), e.restore();
+    const A = 0, z = b.y - u;
+    e.strokeStyle = "#3b82f6", e.lineWidth = 1, e.setLineDash([2, 2]), e.beginPath(), e.moveTo(A, z + 12), e.lineTo(A, b.y), e.stroke(), e.setLineDash([]), e.beginPath(), e.arc(A, z, 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(A, z, 6, -Math.PI / 2, Math.PI, !1), e.stroke(), e.beginPath(), e.moveTo(A - 6, z), e.lineTo(A - 3, z - 3), e.lineTo(A - 3, z + 3), e.closePath(), e.fillStyle = "#ffffff", e.fill(), e.restore();
   }, he = (e, t) => {
     if (!t) return [];
-    const r = Qt(e, t), c = t.isIcon ? Math.max(8, 12) : 8, g = 8, m = 30, p = (t.rotation || 0) * Math.PI / 180, k = {
-      x: -r.width / 2 - c,
-      y: -r.height / 2 - c,
-      w: r.width + c * 2,
-      h: r.height + c * 2
-    }, w = [
-      { x: k.x, y: k.y, type: "nw-resize" },
-      { 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 - m, type: "rotate" }
-    ], R = Math.cos(p), A = Math.sin(p);
-    return w.map((z) => ({
+    const r = Qt(e, t), d = t.isIcon ? Math.max(8, 12) : 8, x = 8, u = 30, w = (t.rotation || 0) * Math.PI / 180, S = {
+      x: -r.width / 2 - d,
+      y: -r.height / 2 - d,
+      w: r.width + d * 2,
+      h: r.height + d * 2
+    }, b = [
+      { x: S.x, y: S.y, type: "nw-resize" },
+      { x: S.x + S.w, y: S.y, type: "ne-resize" },
+      { x: S.x + S.w, y: S.y + S.h, type: "se-resize" },
+      { x: S.x, y: S.y + S.h, type: "sw-resize" },
+      { x: 0, y: S.y - u, type: "rotate" }
+    ], R = Math.cos(w), A = Math.sin(w);
+    return b.map((z) => ({
       x: r.cx + (z.x * R - z.y * A),
       y: r.cy + (z.x * A + z.y * R),
       type: z.type,
-      size: z.type === "rotate" ? 24 : g
+      size: z.type === "rotate" ? 24 : x
     }));
   }, $t = (e, t, r) => {
     if (!r) return null;
-    const c = K.current;
-    if (!c) return null;
-    const g = c.getContext("2d"), m = he(g, r);
-    for (const p of m) {
-      const k = e - p.x, w = t - p.y;
-      if (Math.sqrt(k * k + w * w) <= p.size / 2)
-        return p.type;
+    const d = K.current;
+    if (!d) return null;
+    const x = d.getContext("2d"), u = he(x, r);
+    for (const w of u) {
+      const S = e - w.x, b = t - w.y;
+      if (Math.sqrt(S * S + b * b) <= w.size / 2)
+        return w.type;
     }
     return null;
-  }, Ft = rt(() => {
-    if (X > 0) {
-      const e = G[X - 1];
-      n(e.elements), j(e.selectedElement), q(X - 1);
+  }, Ft = at(() => {
+    if (J > 0) {
+      const e = G[J - 1];
+      n(e.elements), F(e.selectedElement), q(J - 1);
     }
-  }, [G, X]), bt = rt(() => {
-    if (X < G.length - 1) {
-      const e = G[X + 1];
-      n(e.elements), j(e.selectedElement), q(X + 1);
+  }, [G, J]), bt = at(() => {
+    if (J < G.length - 1) {
+      const e = G[J + 1];
+      n(e.elements), F(e.selectedElement), q(J + 1);
     }
-  }, [G, X]), ut = (e) => Y ? Math.round(e / At) * At : e;
-  ot(() => {
+  }, [G, J]), ut = (e) => Y ? Math.round(e / It) * It : e;
+  rt(() => {
     if (C != null && C.sectionImage) {
-      mt.current = null, pt.current = null;
+      pt.current = null, wt.current = null;
       const e = K.current;
-      e && e.getContext("2d").clearRect(0, 0, v, W);
+      if (e && e.getContext("2d").clearRect(0, 0, k, W), g && !yt)
+        return;
       const t = new Image();
       t.crossOrigin = "anonymous", t.onload = () => {
-        mt.current = t, Xt(t, _);
+        pt.current = t, Xt(t, _);
       }, t.onerror = () => {
         console.error("Failed to load background image:", C.sectionImage), V();
       };
       let r = C.sectionImage;
-      wt && wt.sectionImage && (C.sectionName === "Front" || wt.sections && Object.keys(wt.sections).includes(C.sectionName)) && (r = wt.sectionImage), t.src = r;
+      yt && yt.sectionImage && (C.sectionName === "Front" || yt.sections && Object.keys(yt.sections).includes(C.sectionName)) && (r = yt.sectionImage), t.src = r;
     } else
-      mt.current = null, pt.current = null, V();
-  }, [C, _, wt]), ot(() => {
+      pt.current = null, wt.current = null, V();
+  }, [C, _, yt]), rt(() => {
     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") && d && !l) {
+        if ((t.key === "Delete" || t.key === "Backspace") && c && !l) {
           t.preventDefault();
-          const g = d;
-          n((m) => m.filter((p) => p.id !== g.id)), j(null), lt();
+          const x = c;
+          n((u) => u.filter((w) => w.id !== x.id)), F(null), lt();
         }
         if (t.ctrlKey || t.metaKey)
           switch (t.key) {
@@ -6943,7 +7029,7 @@ const fi = $e((f, o) => {
     return document.addEventListener("keydown", e), () => {
       document.removeEventListener("keydown", e);
     };
-  }, [d, l, Ft, bt, lt]);
+  }, [c, l, Ft, bt, lt]);
   const ge = (e) => {
     const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
     return t ? {
@@ -6953,15 +7039,15 @@ const fi = $e((f, o) => {
     } : null;
   }, ht = () => `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, xe = (e) => {
     e.strokeStyle = "#e0e0e0", e.lineWidth = 1, e.setLineDash([1, 1]);
-    for (let t = 0; t <= v; t += At)
+    for (let t = 0; t <= k; t += It)
       e.beginPath(), e.moveTo(t, 0), e.lineTo(t, W), e.stroke();
-    for (let t = 0; t <= W; t += At)
-      e.beginPath(), e.moveTo(0, t), e.lineTo(v, t), e.stroke();
+    for (let t = 0; t <= W; t += It)
+      e.beginPath(), e.moveTo(0, t), e.lineTo(k, t), e.stroke();
     e.setLineDash([]);
   }, ye = (e, t) => {
     e.save();
-    const r = t.x + t.width / 2, c = t.y + t.height / 2;
-    switch (e.translate(r, c), t.rotation && e.rotate(t.rotation * Math.PI / 180), e.translate(-t.width / 2, -t.height / 2), t.type) {
+    const r = t.x + t.width / 2, d = t.y + t.height / 2;
+    switch (e.translate(r, d), t.rotation && e.rotate(t.rotation * Math.PI / 180), e.translate(-t.width / 2, -t.height / 2), t.type) {
       case "text":
         pe(e, t);
         break;
@@ -6987,38 +7073,38 @@ const fi = $e((f, o) => {
         Ce(e, t);
         break;
       case "pentagon":
-        Te(e, t);
+        je(e, t);
         break;
       case "heart":
-        je(e, t);
+        Te(e, t);
         break;
       case "oval":
         Ne(e, t);
         break;
       case "roundedRectangle":
-        Ae(e, t);
+        Ie(e, t);
         break;
       case "image":
         Re(e, t);
         break;
       case "qrcode":
-        me(e, t);
+        ue(e, t);
         break;
       case "barcode":
-        ue(e, t);
+        me(e, t);
         break;
       case "sticker":
         De(e, t);
         break;
       case "horizontalLine":
-        Ie(e, t);
+        Ae(e, t);
         break;
       case "embroidery":
         Ee(e, t);
         break;
     }
     e.restore();
-  }, ue = (e, t) => {
+  }, me = (e, t) => {
     if (t.imageObject)
       e.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
@@ -7026,19 +7112,19 @@ const fi = $e((f, o) => {
       const r = new Image();
       r.onload = () => {
         n(
-          (c) => c.map(
-            (g) => g.id === t.id ? { ...g, imageObject: r, imageLoading: !1 } : g
+          (d) => d.map(
+            (x) => x.id === t.id ? { ...x, imageObject: r, imageLoading: !1 } : x
           )
         );
       }, r.onerror = () => {
         n(
-          (c) => c.map(
-            (g) => g.id === t.id ? { ...g, imageLoading: !1 } : g
+          (d) => d.map(
+            (x) => x.id === t.id ? { ...x, imageLoading: !1 } : x
           )
         );
       }, 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));
-  }, me = (e, t) => {
+  }, ue = (e, t) => {
     if (t.imageObject)
       e.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
@@ -7046,14 +7132,14 @@ const fi = $e((f, o) => {
       const r = new Image();
       r.onload = () => {
         n(
-          (c) => c.map(
-            (g) => g.id === t.id ? { ...g, imageObject: r, imageLoading: !1 } : g
+          (d) => d.map(
+            (x) => x.id === t.id ? { ...x, imageObject: r, imageLoading: !1 } : x
           )
         );
       }, r.onerror = () => {
         n(
-          (c) => c.map(
-            (g) => g.id === t.id ? { ...g, imageLoading: !1 } : g
+          (d) => d.map(
+            (x) => x.id === t.id ? { ...x, imageLoading: !1 } : x
           )
         );
       }, 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);
@@ -7070,37 +7156,37 @@ const fi = $e((f, o) => {
           r = r.toLowerCase();
           break;
         case "capitalize":
-          r = r.replace(/\b\w/g, (k) => k.toUpperCase());
+          r = r.replace(/\b\w/g, (S) => S.toUpperCase());
           break;
       }
     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 c = r.split(`
-`), g = (t.fontSize || 20) * (t.lineHeight || 1.2), m = Math.max(...c.map((k) => e.measureText(k).width)), p = c.length * g;
+    const d = r.split(`
+`), x = (t.fontSize || 20) * (t.lineHeight || 1.2), u = Math.max(...d.map((S) => e.measureText(S).width)), w = d.length * x;
     if (t.backgroundColor && t.backgroundColor !== "transparent") {
       e.fillStyle = t.backgroundColor;
-      const k = t.backgroundPadding || 4;
+      const S = t.backgroundPadding || 4;
       e.fillRect(
-        -k,
-        -k,
-        m + k * 2,
-        p + k * 2
+        -S,
+        -S,
+        u + S * 2,
+        w + S * 2
       ), e.fillStyle = t.fill || "#000000";
     }
-    c.forEach((k, w) => {
-      const R = w * g, A = e.measureText(k).width;
-      t.stroke && t.strokeWidth > 0 && e.strokeText(k, 0, R), e.fillText(k, 0, R);
+    d.forEach((S, b) => {
+      const R = b * x, A = e.measureText(S).width;
+      t.stroke && t.strokeWidth > 0 && e.strokeText(S, 0, R), e.fillText(S, 0, R);
       const z = t.fontSize || 20, $ = t.decorationColor || t.fill || "#000000", dt = Math.max(1, z / 20);
       if (e.strokeStyle = $, e.lineWidth = dt, t.textDecoration === "underline" || t.underline) {
-        const it = R + z + 2;
-        e.beginPath(), e.moveTo(0, it), e.lineTo(A, it), e.stroke();
+        const ot = R + z + 2;
+        e.beginPath(), e.moveTo(0, ot), e.lineTo(A, ot), e.stroke();
       }
       if (t.textDecoration === "overline" || t.overline) {
-        const it = R - 2;
-        e.beginPath(), e.moveTo(0, it), e.lineTo(A, it), e.stroke();
+        const ot = R - 2;
+        e.beginPath(), e.moveTo(0, ot), e.lineTo(A, ot), e.stroke();
       }
       if (t.textDecoration === "line-through" || t.strikethrough) {
-        const it = R + z / 2;
-        e.beginPath(), e.moveTo(0, it), e.lineTo(A, it), e.stroke();
+        const ot = R + z / 2;
+        e.beginPath(), e.moveTo(0, ot), e.lineTo(A, ot), e.stroke();
       }
       typeof t.textDecoration == "string" && t.textDecoration.includes(" ") && t.textDecoration.split(" ").forEach((Rt) => {
         switch (Rt.trim()) {
@@ -7122,81 +7208,81 @@ const fi = $e((f, o) => {
   }, we = (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));
   }, be = (e, t) => {
-    const r = Math.min(t.width, t.height) / 2, c = t.width / 2, g = t.height / 2;
-    e.beginPath(), e.arc(c, g, 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());
+    const r = Math.min(t.width, t.height) / 2, d = t.width / 2, x = t.height / 2;
+    e.beginPath(), e.arc(d, x, 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());
   }, ve = (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());
   }, ke = (e, t) => {
-    const r = t.width / 2, c = t.height / 2, g = Math.min(t.width, t.height) / 2, m = g * 0.4, p = t.numPoints || 5;
+    const r = t.width / 2, d = t.height / 2, x = Math.min(t.width, t.height) / 2, u = x * 0.4, w = t.numPoints || 5;
     e.beginPath();
-    for (let k = 0; k < p * 2; k++) {
-      const w = k % 2 === 0 ? g : m, R = k * Math.PI / p, A = r + Math.cos(R) * w, z = c + Math.sin(R) * w;
-      k === 0 ? e.moveTo(A, z) : e.lineTo(A, z);
+    for (let S = 0; S < w * 2; S++) {
+      const b = S % 2 === 0 ? x : u, R = S * Math.PI / w, A = r + Math.cos(R) * b, z = d + Math.sin(R) * b;
+      S === 0 ? e.moveTo(A, z) : e.lineTo(A, z);
     }
     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, c = t.height, g = r * 0.3;
-    e.beginPath(), e.moveTo(r / 2, 0), e.lineTo(r, c * 0.6), e.lineTo(r - g, c * 0.6), e.lineTo(r - g, c), e.lineTo(g, c), e.lineTo(g, c * 0.6), e.lineTo(0, c * 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());
+    const r = t.width, d = t.height, x = r * 0.3;
+    e.beginPath(), e.moveTo(r / 2, 0), e.lineTo(r, d * 0.6), e.lineTo(r - x, d * 0.6), e.lineTo(r - x, d), e.lineTo(x, d), e.lineTo(x, d * 0.6), e.lineTo(0, d * 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());
   }, Fe = (e, t) => {
-    const r = t.width / 2, c = t.height / 2;
-    e.beginPath(), e.moveTo(r, 0), e.lineTo(t.width, c), e.lineTo(r, t.height), e.lineTo(0, c), 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());
+    const r = t.width / 2, d = t.height / 2;
+    e.beginPath(), e.moveTo(r, 0), e.lineTo(t.width, d), e.lineTo(r, t.height), e.lineTo(0, d), 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 / 2, c = t.height / 2, g = Math.min(t.width, t.height) / 2, m = 6;
+    const r = t.width / 2, d = t.height / 2, x = Math.min(t.width, t.height) / 2, u = 6;
     e.beginPath();
-    for (let p = 0; p < m; p++) {
-      const k = p * 2 * Math.PI / m - Math.PI / 2, w = r + g * Math.cos(k), R = c + g * Math.sin(k);
-      p === 0 ? e.moveTo(w, R) : e.lineTo(w, R);
+    for (let w = 0; w < u; w++) {
+      const S = w * 2 * Math.PI / u - Math.PI / 2, b = r + x * Math.cos(S), R = d + x * Math.sin(S);
+      w === 0 ? e.moveTo(b, R) : e.lineTo(b, 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());
-  }, Te = (e, t) => {
-    const r = t.width / 2, c = t.height / 2, g = Math.min(t.width, t.height) / 2, m = 5;
+  }, je = (e, t) => {
+    const r = t.width / 2, d = t.height / 2, x = Math.min(t.width, t.height) / 2, u = 5;
     e.beginPath();
-    for (let p = 0; p < m; p++) {
-      const k = p * 2 * Math.PI / m - Math.PI / 2, w = r + g * Math.cos(k), R = c + g * Math.sin(k);
-      p === 0 ? e.moveTo(w, R) : e.lineTo(w, R);
+    for (let w = 0; w < u; w++) {
+      const S = w * 2 * Math.PI / u - Math.PI / 2, b = r + x * Math.cos(S), R = d + x * Math.sin(S);
+      w === 0 ? e.moveTo(b, R) : e.lineTo(b, 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, c = t.height, g = 0, m = 0;
+  }, Te = (e, t) => {
+    const r = t.width, d = t.height, x = 0, u = 0;
     e.beginPath();
-    const p = c * 0.3;
-    e.moveTo(g + r / 2, m + p), e.bezierCurveTo(
-      g + r / 2,
-      m,
-      g,
-      m,
-      g,
-      m + p
+    const w = d * 0.3;
+    e.moveTo(x + r / 2, u + w), e.bezierCurveTo(
+      x + r / 2,
+      u,
+      x,
+      u,
+      x,
+      u + w
     ), e.bezierCurveTo(
-      g,
-      m + (c + p) / 2,
-      g + r / 2,
-      m + (c + p) / 2,
-      g + r / 2,
-      m + c
+      x,
+      u + (d + w) / 2,
+      x + r / 2,
+      u + (d + w) / 2,
+      x + r / 2,
+      u + d
     ), e.bezierCurveTo(
-      g + r / 2,
-      m + (c + p) / 2,
-      g + r,
-      m + (c + p) / 2,
-      g + r,
-      m + p
+      x + r / 2,
+      u + (d + w) / 2,
+      x + r,
+      u + (d + w) / 2,
+      x + r,
+      u + w
     ), e.bezierCurveTo(
-      g + r,
-      m,
-      g + r / 2,
-      m,
-      g + r / 2,
-      m + p
+      x + r,
+      u,
+      x + r / 2,
+      u,
+      x + r / 2,
+      u + w
     ), 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 / 2, c = t.height / 2, g = t.width / 2, m = t.height / 2;
-    e.beginPath(), e.ellipse(r, c, g, 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());
-  }, Ae = (e, t) => {
-    const r = Math.min(t.width, t.height) * 0.1;
-    It(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());
+    const r = t.width / 2, d = t.height / 2, x = t.width / 2, u = t.height / 2;
+    e.beginPath(), e.ellipse(r, d, x, u, 0, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Ie = (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());
+  }, Ae = (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();
   }, Re = (e, t) => {
     const r = t.src || t.imageData;
@@ -7222,8 +7308,8 @@ const fi = $e((f, o) => {
           }
         }
         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);
-      } catch (c) {
-        console.error("Error drawing image:", c), 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);
+      } catch (d) {
+        console.error("Error drawing image:", d), 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);
       }
     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);
@@ -7257,40 +7343,40 @@ const fi = $e((f, o) => {
     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);
   }, Ht = (e, t, r) => {
     if (!r) return !1;
-    const c = r.x + r.width / 2, g = r.y + r.height / 2, m = e - c, p = t - g, k = -(r.rotation || 0) * Math.PI / 180, w = Math.cos(k), R = Math.sin(k), A = m * w - p * R, z = m * R + p * w, $ = r.width / 2, dt = r.height / 2;
+    const d = r.x + r.width / 2, x = r.y + r.height / 2, u = e - d, w = t - x, S = -(r.rotation || 0) * Math.PI / 180, b = Math.cos(S), R = Math.sin(S), A = u * b - w * R, z = u * R + w * b, $ = r.width / 2, dt = r.height / 2;
     return A >= -$ && A <= $ && z >= -dt && z <= dt;
-  }, Be = rt(() => {
-    (S || y || B) && lt(), I(!1), E(!1), b(!1), O(null);
+  }, Be = at(() => {
+    (I || m || j) && lt(), E(!1), B(!1), p(!1), O(null);
     const e = K.current;
     e && (e.style.cursor = "default");
-  }, [S, y, B, lt]);
-  ot(() => {
+  }, [I, m, j, lt]);
+  rt(() => {
     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") && d && (Mt(d.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && d && (_t(d.id), t.preventDefault()), d && ["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") && c && (Mt(c.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && c && (_t(c.id), t.preventDefault()), c && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key))) {
         t.preventDefault();
-        const g = t.shiftKey ? 10 : 1;
-        let m = {};
+        const x = t.shiftKey ? 10 : 1;
+        let u = {};
         switch (t.key) {
           case "ArrowUp":
-            m.y = d.y - g;
+            u.y = c.y - x;
             break;
           case "ArrowDown":
-            m.y = d.y + g;
+            u.y = c.y + x;
             break;
           case "ArrowLeft":
-            m.x = d.x - g;
+            u.x = c.x - x;
             break;
           case "ArrowRight":
-            m.x = d.x + g;
+            u.x = c.x + x;
             break;
         }
-        Gt(d.id, m), lt();
+        Gt(c.id, u), lt();
       }
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [d, Ft, bt, l]);
+  }, [c, Ft, bt, l]);
   const ze = (e, t = {}) => {
     const r = {
       id: ht(),
@@ -7316,16 +7402,16 @@ const fi = $e((f, o) => {
         r.id = ht(), r.imageData = t.imageData || null, r.width = t.width || 200, r.height = t.height || 200;
         break;
       case "qrcode":
-        r.id = ht(), r.type = "qrcode", r.x = (t == null ? void 0 : t.x) || v / 2 - ((t == null ? void 0 : t.width) || 100) / 2, r.y = (t == null ? void 0 : t.y) || W / 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 = ht(), r.type = "qrcode", r.x = (t == null ? void 0 : t.x) || k / 2 - ((t == null ? void 0 : t.width) || 100) / 2, r.y = (t == null ? void 0 : t.y) || W / 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 = ht(), r.type = "barcode", r.x = (t == null ? void 0 : t.x) || v / 2 - ((t == null ? void 0 : t.width) || 200) / 2, r.y = (t == null ? void 0 : t.y) || W / 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 = ht(), r.type = "barcode", r.x = (t == null ? void 0 : t.x) || k / 2 - ((t == null ? void 0 : t.width) || 200) / 2, r.y = (t == null ? void 0 : t.y) || W / 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 = ht(), 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 = ht(), r.type = "horizontalLine", r.x = v / 2 - 100, r.y = W / 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 = ht(), r.type = "horizontalLine", r.x = k / 2 - 100, r.y = W / 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 = ht(), r.type = "embroidery", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
@@ -7346,15 +7432,15 @@ const fi = $e((f, o) => {
         console.warn(`Unknown element type: ${e}`);
         return;
     }
-    n((c) => [...c, r]), j(r), lt();
+    n((d) => [...d, r]), F(r), lt();
   }, Gt = (e, t) => {
     n((r) => r.map(
-      (c) => c.id === e ? { ...c, ...t } : c
-    )), d && d.id === e && j((r) => ({ ...r, ...t }));
-  }, Mt = rt(() => {
-    d && (n((e) => e.filter((t) => t.id !== d.id)), j(null), lt());
-  }, [d, lt]), _t = (e) => {
-    const t = x.find((r) => r.id === e);
+      (d) => d.id === e ? { ...d, ...t } : d
+    )), c && c.id === e && F((r) => ({ ...r, ...t }));
+  }, Mt = at(() => {
+    c && (n((e) => e.filter((t) => t.id !== c.id)), F(null), lt());
+  }, [c, lt]), _t = (e) => {
+    const t = h.find((r) => r.id === e);
     if (t) {
       const r = {
         ...t,
@@ -7362,23 +7448,23 @@ const fi = $e((f, o) => {
         x: t.x + 20,
         y: t.y + 20
       };
-      n((c) => [...c, r]), j(r), lt();
+      n((d) => [...d, r]), F(r), lt();
     }
   }, Yt = (e, t) => {
-    const r = x.findIndex((m) => m.id === e);
+    const r = h.findIndex((u) => u.id === e);
     if (r === -1) return;
-    const c = [...x], g = c[r];
-    t === "up" && r < c.length - 1 ? (c[r] = c[r + 1], c[r + 1] = g) : t === "down" && r > 0 ? (c[r] = c[r - 1], c[r - 1] = g) : t === "top" ? (c.splice(r, 1), c.push(g)) : t === "bottom" && (c.splice(r, 1), c.unshift(g)), n(c), lt();
+    const d = [...h], x = d[r];
+    t === "up" && r < d.length - 1 ? (d[r] = d[r + 1], d[r + 1] = x) : t === "down" && r > 0 ? (d[r] = d[r - 1], d[r - 1] = x) : t === "top" ? (d.splice(r, 1), d.push(x)) : t === "bottom" && (d.splice(r, 1), d.unshift(x)), n(d), lt();
   };
-  rt(() => {
+  at(() => {
     C && H((e) => ({
       ...e,
       [C.sectionName]: {
-        elements: [...x],
+        elements: [...h],
         selectedColor: _
       }
     }));
-  }, [C, x, _]);
+  }, [C, h, _]);
   const [, We] = He((e) => e + 1, 0);
   setTimeout(() => {
     We();
@@ -7396,25 +7482,26 @@ const fi = $e((f, o) => {
       try {
         const t = St();
         console.log("canvas data to export: ", t);
-        const r = {}, c = (C == null ? void 0 : C.sectionName) || "main";
-        r[c] = {
+        const r = {}, d = (C == null ? void 0 : C.sectionName) || "main";
+        r[d] = {
           elements: t.elements,
           selectedColor: t.selectedColor,
           canvasWidth: t.canvasWidth,
           canvasHeight: t.canvasHeight
         }, t.sectionDesigns && typeof t.sectionDesigns == "object" && Object.assign(r, t.sectionDesigns);
-        const g = s.sections && s.sections.length > 0 ? s.sections : [{
-          id: c,
-          sectionName: c,
+        const x = s.sections && s.sections.length > 0 ? s.sections : [{
+          id: d,
+          sectionName: d,
           image: C == null ? void 0 : C.sectionImage,
           sectionImage: C == null ? void 0 : C.sectionImage
         }];
         return await Bt.current.exportAllSectionsAsJSON(
           r,
-          g,
-          v,
+          x,
+          k,
           W,
-          e
+          e,
+          yt
         );
       } catch (t) {
         throw console.error("Export as JSON failed:", t), t;
@@ -7423,272 +7510,272 @@ const fi = $e((f, o) => {
     exportCurrentSectionAsJSON: async (e = "png") => {
       try {
         const t = St();
-        return await Bt.current.exportCurrentSectionAsJSON(t, e);
+        return await Bt.current.exportCurrentSectionAsJSON(t, e, yt);
       } catch (t) {
         throw console.error("Export current section as JSON failed:", t), t;
       }
     }
   }));
-  const yt = gt(null), Lt = gt(!1), V = rt(() => {
+  const mt = gt(null), Lt = gt(!1), V = at(() => {
     const e = K.current;
     if (!e || Lt.current) return;
     Lt.current = !0;
     const t = e.getContext("2d");
-    t.clearRect(0, 0, v, W), pt.current && t.drawImage(pt.current, 0, 0, v, W), M && xe(t), x.forEach((r) => {
+    t.clearRect(0, 0, k, W), wt.current && t.drawImage(wt.current, 0, 0, k, W), M && xe(t), h.forEach((r) => {
       t.save(), t.globalAlpha = r.opacity || 1, ye(t, r), t.restore();
-    }), d && fe(t, d), Lt.current = !1;
-  }, [x, d, v, W, M]), vt = rt(() => {
-    yt.current && cancelAnimationFrame(yt.current), yt.current = requestAnimationFrame(() => {
-      V(), yt.current = null;
+    }), c && fe(t, c), Lt.current = !1;
+  }, [h, c, k, W, M]), vt = at(() => {
+    mt.current && cancelAnimationFrame(mt.current), mt.current = requestAnimationFrame(() => {
+      V(), mt.current = null;
     });
   }, [V]);
-  ot(() => {
+  rt(() => {
     vt();
-  }, [x, d, v, W, M, vt]), ot(() => {
-    pt.current && vt();
-  }, [pt.current, vt]), ot(() => () => {
-    yt.current && cancelAnimationFrame(yt.current);
+  }, [h, c, k, W, M, vt]), rt(() => {
+    wt.current && vt();
+  }, [wt.current, vt]), rt(() => () => {
+    mt.current && cancelAnimationFrame(mt.current);
   }, []);
-  const Pt = rt(() => {
-    V(), (S || y || B) && (yt.current = requestAnimationFrame(Pt));
-  }, [V, S, y, B]);
-  ot(() => {
-    S || y || B ? Pt() : (yt.current && (cancelAnimationFrame(yt.current), yt.current = null), vt());
-  }, [S, y, B, Pt, vt]);
-  const Me = rt((e) => {
+  const Pt = at(() => {
+    V(), (I || m || j) && (mt.current = requestAnimationFrame(Pt));
+  }, [V, I, m, j]);
+  rt(() => {
+    I || m || j ? Pt() : (mt.current && (cancelAnimationFrame(mt.current), mt.current = null), vt());
+  }, [I, m, j, Pt, vt]);
+  const Me = at((e) => {
     if (l) return;
-    const r = K.current.getBoundingClientRect(), c = (e.clientX - r.left) / Q, g = (e.clientY - r.top) / Q;
-    if (J({ x: c, y: g }), d) {
-      const p = $t(c, g, d);
-      if (p) {
-        if (p === "rotate") {
-          b(!0);
-          const k = d.x + d.width / 2, w = d.y + d.height / 2, R = Math.atan2(g - w, c - k) * 180 / Math.PI;
-          J({
-            x: c,
-            y: g,
+    const r = K.current.getBoundingClientRect(), d = (e.clientX - r.left) / Q, x = (e.clientY - r.top) / Q;
+    if (X({ x: d, y: x }), c) {
+      const w = $t(d, x, c);
+      if (w) {
+        if (w === "rotate") {
+          p(!0);
+          const S = c.x + c.width / 2, b = c.y + c.height / 2, R = Math.atan2(x - b, d - S) * 180 / Math.PI;
+          X({
+            x: d,
+            y: x,
             initialAngle: R,
-            initialRotation: d.rotation || 0
+            initialRotation: c.rotation || 0
           });
         } else
-          E(!0), O(p), J({
-            x: c,
-            y: g,
-            initialWidth: d.width,
-            initialHeight: d.height,
-            initialX: d.x,
-            initialY: d.y
+          B(!0), O(w), X({
+            x: d,
+            y: x,
+            initialWidth: c.width,
+            initialHeight: c.height,
+            initialX: c.x,
+            initialY: c.y
           });
         return;
       }
     }
-    let m = null;
-    for (let p = x.length - 1; p >= 0; p--)
-      if (Ht(c, g, x[p])) {
-        m = x[p];
+    let u = null;
+    for (let w = h.length - 1; w >= 0; w--)
+      if (Ht(d, x, h[w])) {
+        u = h[w];
         break;
       }
-    m ? (j(m), I(!0), J({
-      x: c,
-      y: g,
-      offsetX: c - m.x,
-      offsetY: g - m.y
-    })) : j(null), V();
-  }, [l, Q, d, x, V]), Le = rt((e) => {
+    u ? (F(u), E(!0), X({
+      x: d,
+      y: x,
+      offsetX: d - u.x,
+      offsetY: x - u.y
+    })) : F(null), V();
+  }, [l, Q, c, h, V]), Le = at((e) => {
     if (l) return;
-    const t = K.current, r = t.getBoundingClientRect(), c = (e.clientX - r.left) / Q, g = (e.clientY - r.top) / Q;
-    if (d && !S && !y && !B) {
-      const m = $t(c, g, d);
-      m ? m === "rotate" ? t.style.cursor = "grab" : t.style.cursor = m : Ht(c, g, d) ? t.style.cursor = "move" : t.style.cursor = "default";
+    const t = K.current, r = t.getBoundingClientRect(), d = (e.clientX - r.left) / Q, x = (e.clientY - r.top) / Q;
+    if (c && !I && !m && !j) {
+      const u = $t(d, x, c);
+      u ? u === "rotate" ? t.style.cursor = "grab" : t.style.cursor = u : Ht(d, x, c) ? t.style.cursor = "move" : t.style.cursor = "default";
     } else
-      t.style.cursor = S ? "grabbing" : "default";
-    if (B && d) {
-      const m = d.x + d.width / 2, p = d.y + d.height / 2, w = Math.atan2(g - p, c - m) * 180 / Math.PI - F.initialAngle;
-      let R = F.initialRotation + w;
+      t.style.cursor = I ? "grabbing" : "default";
+    if (j && c) {
+      const u = c.x + c.width / 2, w = c.y + c.height / 2, b = Math.atan2(x - w, d - u) * 180 / Math.PI - v.initialAngle;
+      let R = v.initialRotation + b;
       e.shiftKey && (R = Math.round(R / 15) * 15), R = (R % 360 + 360) % 360, n(
         (A) => A.map(
-          (z) => z.id === d.id ? { ...z, rotation: R } : z
+          (z) => z.id === c.id ? { ...z, rotation: R } : z
         )
-      ), j((A) => ({ ...A, rotation: R })), V();
+      ), F((A) => ({ ...A, rotation: R })), V();
       return;
     }
-    if (y && d && T) {
-      const m = c - F.x, p = g - F.y;
-      let k = F.initialWidth, w = F.initialHeight, R = F.initialX, A = F.initialY;
+    if (m && c && T) {
+      const u = d - v.x, w = x - v.y;
+      let S = v.initialWidth, b = v.initialHeight, R = v.initialX, A = v.initialY;
       switch (T) {
         case "se-resize":
-          k = Math.max(20, F.initialWidth + m), w = Math.max(20, F.initialHeight + p);
+          S = Math.max(20, v.initialWidth + u), b = Math.max(20, v.initialHeight + w);
           break;
         case "sw-resize":
-          k = Math.max(20, F.initialWidth - m), w = Math.max(20, F.initialHeight + p), R = F.initialX + (F.initialWidth - k);
+          S = Math.max(20, v.initialWidth - u), b = Math.max(20, v.initialHeight + w), R = v.initialX + (v.initialWidth - S);
           break;
         case "ne-resize":
-          k = Math.max(20, F.initialWidth + m), w = Math.max(20, F.initialHeight - p), A = F.initialY + (F.initialHeight - w);
+          S = Math.max(20, v.initialWidth + u), b = Math.max(20, v.initialHeight - w), A = v.initialY + (v.initialHeight - b);
           break;
         case "nw-resize":
-          k = Math.max(20, F.initialWidth - m), w = Math.max(20, F.initialHeight - p), R = F.initialX + (F.initialWidth - k), A = F.initialY + (F.initialHeight - w);
+          S = Math.max(20, v.initialWidth - u), b = Math.max(20, v.initialHeight - w), R = v.initialX + (v.initialWidth - S), A = v.initialY + (v.initialHeight - b);
           break;
       }
-      if (e.shiftKey && d.type !== "text") {
-        const $ = F.initialWidth / F.initialHeight;
-        T.includes("e"), w = k / $, T.includes("n") && (A = F.initialY + (F.initialHeight - w));
+      if (e.shiftKey && c.type !== "text") {
+        const $ = v.initialWidth / v.initialHeight;
+        T.includes("e"), b = S / $, T.includes("n") && (A = v.initialY + (v.initialHeight - b));
       }
-      Y && (R = ut(R), A = ut(A), k = ut(k), w = ut(w));
+      Y && (R = ut(R), A = ut(A), S = ut(S), b = ut(b));
       const z = {
-        ...d,
+        ...c,
         x: R,
         y: A,
-        width: k,
-        height: w
+        width: S,
+        height: b
       };
       n(
         ($) => $.map(
-          (dt) => dt.id === d.id ? z : dt
+          (dt) => dt.id === c.id ? z : dt
         )
-      ), j(z), V();
+      ), F(z), V();
       return;
     }
-    if (S && d) {
-      let m = c - F.offsetX, p = g - F.offsetY;
-      Y && (m = ut(m), p = ut(p)), m = Math.max(0, Math.min(v - d.width, m)), p = Math.max(0, Math.min(W - d.height, p));
-      const k = {
-        ...d,
-        x: m,
-        y: p
+    if (I && c) {
+      let u = d - v.offsetX, w = x - v.offsetY;
+      Y && (u = ut(u), w = ut(w)), u = Math.max(0, Math.min(k - c.width, u)), w = Math.max(0, Math.min(W - c.height, w));
+      const S = {
+        ...c,
+        x: u,
+        y: w
       };
       n(
-        (w) => w.map(
-          (R) => R.id === d.id ? k : R
+        (b) => b.map(
+          (R) => R.id === c.id ? S : R
         )
-      ), j(k), V();
+      ), F(S), V();
     }
-  }, [l, Q, d, S, y, B, T, F, Y, v, W, x, V]), qt = rt((e) => {
+  }, [l, Q, c, I, m, j, T, v, Y, k, W, h, V]), qt = at((e) => {
     C && H((r) => ({
       ...r,
       [C.sectionName]: {
-        elements: x.map((c) => c.type === "image" ? {
-          ...c,
+        elements: h.map((d) => d.type === "image" ? {
+          ...d,
           // Keep the image data reference
-          imageData: c.imageData,
-          src: c.src
-        } : c),
+          imageData: d.imageData,
+          src: d.src
+        } : d),
         selectedColor: _
       }
     }));
     const t = L[e.sectionName];
     if (t) {
-      const r = t.elements.map((c) => {
-        if (c.type === "image" && c.src && !c.imageData) {
-          const g = new Image();
-          return g.onload = () => {
+      const r = t.elements.map((d) => {
+        if (d.type === "image" && d.src && !d.imageData) {
+          const x = new Image();
+          return x.onload = () => {
             n(
-              (m) => m.map(
-                (p) => p.id === c.id ? { ...p, imageData: g } : p
+              (u) => u.map(
+                (w) => w.id === d.id ? { ...w, imageData: x } : w
               )
             ), V();
-          }, g.src = c.src, { ...c, imageData: g };
+          }, x.src = d.src, { ...d, imageData: x };
         }
-        return c;
+        return d;
       });
-      n(r), at(t.selectedColor || _);
+      n(r), st(t.selectedColor || _);
     } else
       n([]);
-    tt(e), j(null);
-  }, [C, x, _, L, V]), Pe = rt((e) => {
+    et(e), F(null);
+  }, [C, h, _, L, V]), Pe = at((e) => {
     if (e && e.type.startsWith("image/")) {
       const t = new FileReader();
       t.onload = (r) => {
-        const c = new Image();
-        c.onload = () => {
-          const g = {
+        const d = new Image();
+        d.onload = () => {
+          const x = {
             id: ht(),
             type: "image",
-            x: ut(v / 2 - 100),
+            x: ut(k / 2 - 100),
             y: ut(W / 2 - 100),
-            width: Math.min(c.width, 200),
+            width: Math.min(d.width, 200),
             // Limit initial size
-            height: Math.min(c.height, 200),
+            height: Math.min(d.height, 200),
             rotation: 0,
-            imageData: c,
+            imageData: d,
             src: r.target.result,
-            originalWidth: c.width,
-            originalHeight: c.height
-          }, m = c.width / c.height;
-          g.width / g.height !== m && (g.width / m <= 200 ? g.height = g.width / m : g.width = g.height * m), n((p) => [...p, g]), j(g), lt();
-        }, c.onerror = () => {
+            originalWidth: d.width,
+            originalHeight: d.height
+          }, u = d.width / d.height;
+          x.width / x.height !== u && (x.width / u <= 200 ? x.height = x.width / u : x.width = x.height * u), n((w) => [...w, x]), F(x), lt();
+        }, d.onerror = () => {
           console.error("Failed to load uploaded image"), alert("Failed to load the uploaded image. Please try again.");
-        }, c.src = r.target.result;
+        }, d.src = r.target.result;
       }, t.onerror = () => {
         console.error("Failed to read file"), alert("Failed to read the file. Please try again.");
       }, t.readAsDataURL(e);
     } else
       alert("Please select a valid image file.");
-  }, [v, W, ut, ht, lt]), Vt = rt(
+  }, [k, W, ut, ht, lt]), Vt = at(
     Ue(() => {
       V();
     }, 16),
     // 60fps limit
     [V]
   );
-  ot(() => {
+  rt(() => {
     zt.current || Vt();
-  }, [x, d, M, Vt]);
+  }, [h, c, M, Vt]);
   function Ue(e, t) {
     let r;
-    return function(...g) {
-      const m = () => {
-        clearTimeout(r), e(...g);
+    return function(...x) {
+      const u = () => {
+        clearTimeout(r), e(...x);
       };
-      clearTimeout(r), r = setTimeout(m, t);
+      clearTimeout(r), r = setTimeout(u, t);
     };
   }
-  ot(() => {
-    mt.current && Xt(mt.current, _);
-  }, [_]), ot(() => {
+  rt(() => {
+    pt.current && Xt(pt.current, _);
+  }, [_]), rt(() => {
     V();
   }, [V]);
-  const Oe = (e, t, r) => (0.2126 * e + 0.7152 * t + 0.0722 * r) / 255, Xt = rt((e, t) => {
-    const r = Ot.current, c = r.getContext("2d");
-    r.width = v, r.height = W, c.clearRect(0, 0, v, W), c.drawImage(e, 0, 0, v, W);
-    const g = c.getImageData(0, 0, v, W), m = g.data, p = ge(t);
-    if (!p) {
+  const Oe = (e, t, r) => (0.2126 * e + 0.7152 * t + 0.0722 * r) / 255, Xt = at((e, t) => {
+    const r = Ot.current, d = r.getContext("2d");
+    r.width = k, r.height = W, d.clearRect(0, 0, k, W), d.drawImage(e, 0, 0, k, W);
+    const x = d.getImageData(0, 0, k, W), u = x.data, w = ge(t);
+    if (!w) {
       zt.current = !1;
       return;
     }
-    const { r: k, g: w, b: R } = p;
-    for (let z = 0; z < m.length; z += 4) {
-      if (m[z + 3] === 0) continue;
-      const dt = Oe(m[z], m[z + 1], m[z + 2]);
-      m[z] = Math.round(k * dt), m[z + 1] = Math.round(w * dt), m[z + 2] = Math.round(R * dt);
+    const { r: S, g: b, b: R } = w;
+    for (let z = 0; z < u.length; z += 4) {
+      if (u[z + 3] === 0) continue;
+      const dt = Oe(u[z], u[z + 1], u[z + 2]);
+      u[z] = Math.round(S * dt), u[z + 1] = Math.round(b * dt), u[z + 2] = Math.round(R * dt);
     }
-    c.putImageData(g, 0, 0);
+    d.putImageData(x, 0, 0);
     const A = new Image();
     A.onload = () => {
-      pt.current = s.plainColor === "Y" ? A : e, zt.current = !1, V();
+      wt.current = s.plainColor === "Y" ? A : e, zt.current = !1, V();
     }, A.src = r.toDataURL("image/png");
-  }, [v, W, V]), Jt = (e) => {
-    if (!Z) return { horizontal: [], vertical: [] };
+  }, [k, W, V]), Jt = (e) => {
+    if (!tt) return { horizontal: [], vertical: [] };
     const t = document.querySelector(".ruler-horizontal"), r = document.querySelector(".ruler-vertical");
     if (!t || !r)
       return { horizontal: [], vertical: [] };
-    const c = t.getBoundingClientRect(), g = r.getBoundingClientRect(), m = c.width, p = g.height, k = 50, w = [], R = [];
-    for (let A = k; A <= m; A += k)
-      A <= m - 20 && w.push({
+    const d = t.getBoundingClientRect(), x = r.getBoundingClientRect(), u = d.width, w = x.height, S = 50, b = [], R = [];
+    for (let A = S; A <= u; A += S)
+      A <= u - 20 && b.push({
         position: A,
         value: Math.round(A / e)
       });
-    for (let A = k; A <= p; A += k)
-      A <= p - 15 && R.push({
+    for (let A = S; A <= w; A += S)
+      A <= w - 15 && R.push({
         position: A,
         value: Math.round(A / e)
       });
-    return { horizontal: w, vertical: R };
+    return { horizontal: b, vertical: R };
   }, [Kt, Zt] = N({ horizontal: [], vertical: [] });
-  return ot(() => {
+  return rt(() => {
     const e = () => {
       setTimeout(() => {
-        const c = Jt(Q);
-        Zt(c);
+        const d = Jt(Q);
+        Zt(d);
       }, 50);
     };
     e();
@@ -7699,33 +7786,33 @@ const fi = $e((f, o) => {
     return window.addEventListener("resize", r), () => {
       window.removeEventListener("resize", r), clearTimeout(t);
     };
-  }, [Q, Z]), ot(() => {
-    if (Z && !u) {
+  }, [Q, tt]), rt(() => {
+    if (tt && !y) {
       const e = setTimeout(() => {
         const t = Jt(Q);
         Zt(t);
       }, 100);
       return () => clearTimeout(e);
     }
-  }, [Z, u, Q]), /* @__PURE__ */ i.jsxs("div", { className: "pure-canvas-designer", children: [
+  }, [tt, y, Q]), /* @__PURE__ */ i.jsxs("div", { className: "pure-canvas-designer", children: [
     /* @__PURE__ */ i.jsx("div", { className: "designer-header", children: /* @__PURE__ */ i.jsx(
       si,
       {
         onAddElement: ze,
-        onDeleteElement: () => d && Mt(d.id),
-        onDuplicateElement: () => d && _t(d.id),
+        onDeleteElement: () => c && Mt(c.id),
+        onDuplicateElement: () => c && _t(c.id),
         onUndo: Ft,
         onRedo: bt,
         onToggleGrid: () => nt(!M),
-        onToggleRulers: () => ct(!Z),
+        onToggleRulers: () => ct(!tt),
         onToggleSnap: () => P(!Y),
         onImageUpload: Pe,
-        canUndo: X > 0,
-        canRedo: X < G.length - 1,
+        canUndo: J > 0,
+        canRedo: J < G.length - 1,
         showGrid: M,
-        showRulers: Z,
+        showRulers: tt,
         snapToGrid: Y,
-        selectedElement: d,
+        selectedElement: c,
         theme: a,
         readOnly: l,
         apiKey: f.apiKey,
@@ -7733,7 +7820,7 @@ const fi = $e((f, o) => {
       }
     ) }),
     /* @__PURE__ */ i.jsxs("div", { className: "designer-content", children: [
-      Z && !u && /* @__PURE__ */ i.jsxs("div", { className: "rulers", children: [
+      tt && !y && /* @__PURE__ */ i.jsxs("div", { className: "rulers", children: [
         /* @__PURE__ */ i.jsx("div", { className: "ruler-horizontal", children: /* @__PURE__ */ i.jsx("div", { className: "ruler-horizontal-numbers", children: Kt.horizontal.map((e, t) => /* @__PURE__ */ i.jsx(
           "span",
           {
@@ -7757,14 +7844,14 @@ const fi = $e((f, o) => {
         "canvas",
         {
           ref: K,
-          width: v,
+          width: k,
           height: W,
           onMouseDown: Me,
           onMouseMove: Le,
           onMouseUp: Be,
           style: {
             border: "1px solid #e2e8f0",
-            cursor: S ? "grabbing" : "default",
+            cursor: I ? "grabbing" : "default",
             transform: `scale(${Q})`,
             transformOrigin: "top left"
           }
@@ -7774,7 +7861,7 @@ const fi = $e((f, o) => {
         /* @__PURE__ */ i.jsx(
           li,
           {
-            selectedElement: d,
+            selectedElement: c,
             onUpdate: Gt,
             onMoveLayer: Yt,
             availableFonts: de,
@@ -7784,9 +7871,9 @@ const fi = $e((f, o) => {
         /* @__PURE__ */ i.jsx(
           ni,
           {
-            elements: x,
-            selectedElement: d,
-            onSelectElement: j,
+            elements: h,
+            selectedElement: c,
+            onSelectElement: F,
             onMoveLayer: Yt,
             onDeleteElement: Mt,
             theme: a
@@ -7808,8 +7895,8 @@ const fi = $e((f, o) => {
               className: `section-thumbnail compact ${C.sectionName === e.sectionName ? "active" : ""}`,
               onClick: (r) => {
                 r.stopPropagation();
-                const c = s.sections.find((g) => g.sectionName === e.sectionName);
-                qt(c);
+                const d = s.sections.find((x) => x.sectionName === e.sectionName);
+                qt(d);
               },
               title: e.sectionName,
               children: [
@@ -7843,7 +7930,7 @@ const fi = $e((f, o) => {
             {
               className: `color-swatch-enhanced compact ${_ === e ? "active" : ""}`,
               onClick: (r) => {
-                r.stopPropagation(), at(e);
+                r.stopPropagation(), st(e);
               },
               title: `Change product to ${e}`,
               children: [
@@ -7882,7 +7969,7 @@ const fi = $e((f, o) => {
               {
                 className: `color-swatch-dropdown ${_ === e ? "active" : ""}`,
                 onClick: (r) => {
-                  r.stopPropagation(), at(e), r.currentTarget.parentElement.style.display = "none";
+                  r.stopPropagation(), st(e), r.currentTarget.parentElement.style.display = "none";
                 },
                 title: `Change product to ${e}`,
                 children: [