@mypixia/simplex-designer 2.0.0 → 2.0.1

package/dist/index.es.js

@@ -1,8 +1,8 @@
-import Qe, { useState as j, useRef as ft, useEffect as it, useMemo as ee, forwardRef as $e, useCallback as et, useReducer as He, useImperativeHandle as Ge } from "react";
-import _e from "qrcode";
-import Ye from "react-barcode";
-import ie from "axios";
-import './index_external.css';var Dt = { exports: {} }, Ft = {};
+import We, { useState as N, useRef as xt, useEffect as it, useMemo as Xt, forwardRef as Me, useCallback as at, useReducer as Le, useImperativeHandle as Pe } from "react";
+import Ue from "qrcode";
+import Oe from "react-barcode";
+import Jt from "axios";
+import './index_external.css';var At = { exports: {} }, St = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -12,29 +12,29 @@ import './index_external.css';var Dt = { exports: {} }, Ft = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var oe;
-function qe() {
-  if (oe) return Ft;
-  oe = 1;
+var Kt;
+function Qe() {
+  if (Kt) return St;
+  Kt = 1;
   var f = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
-  function a(d, s, h) {
-    var g = null;
-    if (h !== void 0 && (g = "" + h), s.key !== void 0 && (g = "" + s.key), "key" in s) {
+  function a(n, s, h) {
+    var x = null;
+    if (h !== void 0 && (x = "" + h), s.key !== void 0 && (x = "" + s.key), "key" in s) {
       h = {};
       for (var l in s)
         l !== "key" && (h[l] = s[l]);
     } else h = s;
     return s = h.ref, {
       $$typeof: f,
-      type: d,
-      key: g,
+      type: n,
+      key: x,
       ref: s !== void 0 ? s : null,
       props: h
     };
   }
-  return Ft.Fragment = o, Ft.jsx = a, Ft.jsxs = a, Ft;
+  return St.Fragment = o, St.jsx = a, St.jsxs = a, St;
 }
-var Ct = {};
+var Ft = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -44,24 +44,24 @@ var Ct = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var re;
-function Ve() {
-  return re || (re = 1, process.env.NODE_ENV !== "production" && function() {
+var Zt;
+function $e() {
+  return Zt || (Zt = 1, process.env.NODE_ENV !== "production" && function() {
     function f(y) {
       if (y == null) return null;
       if (typeof y == "function")
-        return y.$$typeof === Q ? null : y.displayName || y.name || null;
+        return y.$$typeof === $ ? null : y.displayName || y.name || null;
       if (typeof y == "string") return y;
       switch (y) {
         case S:
           return "Fragment";
-        case J:
+        case K:
           return "Profiler";
-        case T:
+        case j:
           return "StrictMode";
         case st:
           return "Suspense";
-        case M:
+        case W:
           return "SuspenseList";
         case ct:
           return "Activity";
@@ -70,9 +70,9 @@ function Ve() {
         switch (typeof y.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), y.$$typeof) {
-          case B:
+          case z:
             return "Portal";
-          case $:
+          case Q:
             return (y.displayName || "Context") + ".Provider";
           case C:
             return (y._context.displayName || "Context") + ".Consumer";
@@ -102,15 +102,15 @@ function Ve() {
       }
       if (I) {
         I = console;
-        var W = I.error, H = typeof Symbol == "function" && Symbol.toStringTag && y[Symbol.toStringTag] || y.constructor.name || "Object";
-        return W.call(
+        var M = I.error, H = typeof Symbol == "function" && Symbol.toStringTag && y[Symbol.toStringTag] || y.constructor.name || "Object";
+        return M.call(
           I,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           H
         ), o(y);
       }
     }
-    function d(y) {
+    function n(y) {
       if (y === S) return "<>";
       if (typeof y == "object" && y !== null && y.$$typeof === O)
         return "<...>";
@@ -122,47 +122,47 @@ function Ve() {
       }
     }
     function s() {
-      var y = rt.A;
+      var y = ot.A;
       return y === null ? null : y.getOwner();
     }
     function h() {
       return Error("react-stack-top-frame");
     }
-    function g(y) {
-      if (P.call(y, "key")) {
+    function x(y) {
+      if (L.call(y, "key")) {
         var I = Object.getOwnPropertyDescriptor(y, "key").get;
         if (I && I.isReactWarning) return !1;
       }
       return y.key !== void 0;
     }
     function l(y, I) {
-      function W() {
+      function M() {
         nt || (nt = !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)",
           I
         ));
       }
-      W.isReactWarning = !0, Object.defineProperty(y, "key", {
-        get: W,
+      M.isReactWarning = !0, Object.defineProperty(y, "key", {
+        get: M,
         configurable: !0
       });
     }
-    function n() {
+    function d() {
       var y = f(this.type);
       return _[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."
       )), y = this.props.ref, y !== void 0 ? y : null;
     }
-    function F(y, I, W, H, G, Z, q, Y) {
-      return W = Z.ref, y = {
+    function F(y, I, M, H, G, tt, q, Y) {
+      return M = tt.ref, y = {
         $$typeof: E,
         type: y,
         key: I,
-        props: Z,
+        props: tt,
         _owner: G
-      }, (W !== void 0 ? W : null) !== null ? Object.defineProperty(y, "ref", {
+      }, (M !== void 0 ? M : null) !== null ? Object.defineProperty(y, "ref", {
         enumerable: !1,
-        get: n
+        get: d
       }) : Object.defineProperty(y, "ref", { enumerable: !1, value: null }), y._store = {}, Object.defineProperty(y._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -185,25 +185,25 @@ function Ve() {
         value: Y
       }), Object.freeze && (Object.freeze(y.props), Object.freeze(y)), y;
     }
-    function N(y, I, W, H, G, Z, q, Y) {
-      var L = I.children;
-      if (L !== void 0)
+    function T(y, I, M, H, G, tt, q, Y) {
+      var U = I.children;
+      if (U !== void 0)
         if (H)
-          if (lt(L)) {
-            for (H = 0; H < L.length; H++)
-              R(L[H]);
-            Object.freeze && Object.freeze(L);
+          if (lt(U)) {
+            for (H = 0; H < U.length; H++)
+              R(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 R(L);
-      if (P.call(I, "key")) {
-        L = f(y);
-        var ot = Object.keys(I).filter(function(Wt) {
-          return Wt !== "key";
+        else R(U);
+      if (L.call(I, "key")) {
+        U = f(y);
+        var X = Object.keys(I).filter(function(ft) {
+          return ft !== "key";
         });
-        H = 0 < ot.length ? "{key: someKey, " + ot.join(": ..., ") + ": ...}" : "{key: someKey}", K[L + H] || (ot = 0 < ot.length ? "{" + ot.join(": ..., ") + ": ...}" : "{}", console.error(
+        H = 0 < X.length ? "{key: someKey, " + X.join(": ..., ") + ": ...}" : "{key: someKey}", Z[U + H] || (X = 0 < X.length ? "{" + X.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -211,26 +211,26 @@ React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
           H,
-          L,
-          ot,
-          L
-        ), K[L + H] = !0);
+          U,
+          X,
+          U
+        ), Z[U + H] = !0);
       }
-      if (L = null, W !== void 0 && (a(W), L = "" + W), g(I) && (a(I.key), L = "" + I.key), "key" in I) {
-        W = {};
-        for (var jt in I)
-          jt !== "key" && (W[jt] = I[jt]);
-      } else W = I;
-      return L && l(
-        W,
+      if (U = null, M !== void 0 && (a(M), U = "" + M), x(I) && (a(I.key), U = "" + I.key), "key" in I) {
+        M = {};
+        for (var bt in I)
+          bt !== "key" && (M[bt] = I[bt]);
+      } else M = I;
+      return U && l(
+        M,
         typeof y == "function" ? y.displayName || y.name || "Unknown" : y
       ), F(
         y,
-        L,
-        Z,
+        U,
+        tt,
         G,
         s(),
-        W,
+        M,
         q,
         Y
       );
@@ -238,51 +238,51 @@ React keys must be passed directly to JSX without using spread:
     function R(y) {
       typeof y == "object" && y !== null && y.$$typeof === E && y._store && (y._store.validated = 1);
     }
-    var m = Qe, E = Symbol.for("react.transitional.element"), B = Symbol.for("react.portal"), S = Symbol.for("react.fragment"), T = Symbol.for("react.strict_mode"), J = Symbol.for("react.profiler"), C = Symbol.for("react.consumer"), $ = Symbol.for("react.context"), k = Symbol.for("react.forward_ref"), st = Symbol.for("react.suspense"), M = Symbol.for("react.suspense_list"), ht = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), ct = Symbol.for("react.activity"), Q = Symbol.for("react.client.reference"), rt = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, P = Object.prototype.hasOwnProperty, lt = Array.isArray, X = console.createTask ? console.createTask : function() {
+    var u = We, E = Symbol.for("react.transitional.element"), z = Symbol.for("react.portal"), S = Symbol.for("react.fragment"), j = Symbol.for("react.strict_mode"), K = Symbol.for("react.profiler"), C = Symbol.for("react.consumer"), Q = Symbol.for("react.context"), k = Symbol.for("react.forward_ref"), st = Symbol.for("react.suspense"), W = Symbol.for("react.suspense_list"), ht = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), ct = Symbol.for("react.activity"), $ = Symbol.for("react.client.reference"), ot = u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, L = Object.prototype.hasOwnProperty, lt = Array.isArray, J = console.createTask ? console.createTask : function() {
       return null;
     };
-    m = {
+    u = {
       "react-stack-bottom-frame": function(y) {
         return y();
       }
     };
-    var nt, _ = {}, U = m["react-stack-bottom-frame"].bind(
-      m,
+    var nt, _ = {}, P = u["react-stack-bottom-frame"].bind(
+      u,
       h
-    )(), u = X(d(h)), K = {};
-    Ct.Fragment = S, Ct.jsx = function(y, I, W, H, G) {
-      var Z = 1e4 > rt.recentlyCreatedOwnerStacks++;
-      return N(
+    )(), p = J(n(h)), Z = {};
+    Ft.Fragment = S, Ft.jsx = function(y, I, M, H, G) {
+      var tt = 1e4 > ot.recentlyCreatedOwnerStacks++;
+      return T(
         y,
         I,
-        W,
+        M,
         !1,
         H,
         G,
-        Z ? Error("react-stack-top-frame") : U,
-        Z ? X(d(y)) : u
+        tt ? Error("react-stack-top-frame") : P,
+        tt ? J(n(y)) : p
       );
-    }, Ct.jsxs = function(y, I, W, H, G) {
-      var Z = 1e4 > rt.recentlyCreatedOwnerStacks++;
-      return N(
+    }, Ft.jsxs = function(y, I, M, H, G) {
+      var tt = 1e4 > ot.recentlyCreatedOwnerStacks++;
+      return T(
         y,
         I,
-        W,
+        M,
         !0,
         H,
         G,
-        Z ? Error("react-stack-top-frame") : U,
-        Z ? X(d(y)) : u
+        tt ? Error("react-stack-top-frame") : P,
+        tt ? J(n(y)) : p
       );
     };
-  }()), Ct;
+  }()), Ft;
 }
-var ae;
-function Xe() {
-  return ae || (ae = 1, process.env.NODE_ENV === "production" ? Dt.exports = qe() : Dt.exports = Ve()), Dt.exports;
+var te;
+function He() {
+  return te || (te = 1, process.env.NODE_ENV === "production" ? At.exports = Qe() : At.exports = $e()), At.exports;
 }
-var i = Xe();
-const Mt = {
+var i = He();
+const zt = {
   business: {
     name: "Business & Office",
     icons: [
@@ -373,38 +373,38 @@ const Mt = {
       { name: "shield", symbol: "🛡️", unicode: "🛡️" }
     ]
   }
-}, le = () => Object.values(Mt).flatMap(
+}, ie = () => Object.values(zt).flatMap(
   (f) => f.icons.map((o) => ({
     ...o,
     category: f.name
   }))
-), Je = (f) => le().filter(
+), Ge = (f) => ie().filter(
   (a) => a.name.toLowerCase().includes(f.toLowerCase()) || a.category.toLowerCase().includes(f.toLowerCase())
-), Ke = ({ onSelectIcon: f, disabled: o = !1 }) => {
-  const [a, d] = j(!1), [s, h] = j(""), [g, l] = j("all"), n = ft(null);
+), _e = ({ onSelectIcon: f, disabled: o = !1 }) => {
+  const [a, n] = N(!1), [s, h] = N(""), [x, l] = N("all"), d = xt(null);
   it(() => {
-    const m = (E) => {
-      n.current && !n.current.contains(E.target) && d(!1);
+    const u = (E) => {
+      d.current && !d.current.contains(E.target) && n(!1);
     };
-    return document.addEventListener("mousedown", m), () => document.removeEventListener("mousedown", m);
+    return document.addEventListener("mousedown", u), () => document.removeEventListener("mousedown", u);
   }, []);
-  const F = (m) => {
-    f(m), d(!1), h("");
+  const F = (u) => {
+    f(u), n(!1), h("");
   }, R = (() => {
-    let m = le();
-    if (s.trim() && (m = Je(s)), g !== "all") {
-      const E = Mt[g];
-      E && (m = m.filter((B) => B.category === E.name));
+    let u = ie();
+    if (s.trim() && (u = Ge(s)), x !== "all") {
+      const E = zt[x];
+      E && (u = u.filter((z) => z.category === E.name));
     }
-    return m;
+    return u;
   })();
-  return /* @__PURE__ */ i.jsxs("div", { className: "icon-selector", ref: n, children: [
+  return /* @__PURE__ */ i.jsxs("div", { className: "icon-selector", ref: d, children: [
     /* @__PURE__ */ i.jsxs(
       "button",
       {
         className: "toolbar-btn dropdown-trigger",
         disabled: o,
-        onClick: () => d(!a),
+        onClick: () => n(!a),
         title: "Add Icon",
         children: [
           /* @__PURE__ */ i.jsx("span", { className: "icon", children: "🎯" }),
@@ -421,35 +421,35 @@ const Mt = {
             type: "text",
             placeholder: "Search icons...",
             value: s,
-            onChange: (m) => h(m.target.value),
+            onChange: (u) => h(u.target.value),
             className: "icon-search"
           }
         ),
         /* @__PURE__ */ i.jsxs(
           "select",
           {
-            value: g,
-            onChange: (m) => l(m.target.value),
+            value: x,
+            onChange: (u) => l(u.target.value),
             className: "category-select",
             children: [
               /* @__PURE__ */ i.jsx("option", { value: "all", children: "All Categories" }),
-              Object.entries(Mt).map(([m, E]) => /* @__PURE__ */ i.jsx("option", { value: m, children: E.name }, m))
+              Object.entries(zt).map(([u, E]) => /* @__PURE__ */ i.jsx("option", { value: u, children: E.name }, u))
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ i.jsx("div", { className: "icon-grid", children: R.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-icons", children: s ? "No icons found" : "No icons in this category" }) : R.map((m, E) => /* @__PURE__ */ i.jsxs(
+      /* @__PURE__ */ i.jsx("div", { className: "icon-grid", children: R.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-icons", children: s ? "No icons found" : "No icons in this category" }) : R.map((u, E) => /* @__PURE__ */ i.jsxs(
         "button",
         {
           className: "icon-item",
-          onClick: () => F(m),
-          title: `${m.name} (${m.category})`,
+          onClick: () => F(u),
+          title: `${u.name} (${u.category})`,
           children: [
-            /* @__PURE__ */ i.jsx("span", { className: "icon-symbol", children: m.symbol }),
-            /* @__PURE__ */ i.jsx("span", { className: "icon-name", children: m.name })
+            /* @__PURE__ */ i.jsx("span", { className: "icon-symbol", children: u.symbol }),
+            /* @__PURE__ */ i.jsx("span", { className: "icon-name", children: u.name })
           ]
         },
-        `${m.name}-${E}`
+        `${u.name}-${E}`
       )) }),
       /* @__PURE__ */ i.jsx("div", { className: "icon-dropdown-footer", children: /* @__PURE__ */ i.jsxs("span", { className: "icon-count", children: [
         R.length,
@@ -458,12 +458,12 @@ const Mt = {
       ] }) })
     ] })
   ] });
-}, Ze = ({ isOpen: f, onClose: o, onAddQRCode: a, theme: d }) => {
-  const [s, h] = j(""), [g, l] = j(""), [n, F] = j(200), [N, R] = j("M"), m = () => {
+}, Ye = ({ isOpen: f, onClose: o, onAddQRCode: a, theme: n }) => {
+  const [s, h] = N(""), [x, l] = N(""), [d, F] = N(200), [T, R] = N("M"), u = () => {
     if (!s.trim()) return;
     const S = {
-      width: n,
-      errorCorrectionLevel: N,
+      width: d,
+      errorCorrectionLevel: T,
       type: "image/png",
       quality: 0.92,
       margin: 1,
@@ -472,40 +472,40 @@ const Mt = {
         light: "#FFFFFF"
       }
     };
-    _e.toDataURL(s, S, (T, J) => {
-      if (T) {
-        console.error("QR Code generation error:", T);
+    Ue.toDataURL(s, S, (j, K) => {
+      if (j) {
+        console.error("QR Code generation error:", j);
         return;
       }
-      l(J);
+      l(K);
     });
   }, E = () => {
-    if (!g) return;
+    if (!x) return;
     const S = new Image();
     S.onload = () => {
       a({
         type: "qrcode",
-        src: g,
+        src: x,
         data: s,
-        width: n,
-        height: n,
+        width: d,
+        height: d,
         x: 100,
         y: 100,
         imageObject: S
         // Store the loaded image object
-      }), B();
-    }, S.src = g;
-  }, B = () => {
+      }), z();
+    }, S.src = x;
+  }, z = () => {
     h(""), l(""), o();
   };
-  return f ? /* @__PURE__ */ i.jsx("div", { className: "qr-modal-overlay", onClick: B, children: /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-content", onClick: (S) => S.stopPropagation(), children: [
+  return f ? /* @__PURE__ */ i.jsx("div", { className: "qr-modal-overlay", onClick: z, children: /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-content", onClick: (S) => S.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: z,
           "aria-label": "Close",
           children: "×"
         }
@@ -533,7 +533,7 @@ const Mt = {
             {
               type: "number",
               id: "qr-size",
-              value: n,
+              value: d,
               onChange: (S) => F(Math.max(50, Math.min(500, parseInt(S.target.value) || 200))),
               min: "50",
               max: "500"
@@ -546,7 +546,7 @@ const Mt = {
             "select",
             {
               id: "qr-error-level",
-              value: N,
+              value: T,
               onChange: (S) => R(S.target.value),
               children: [
                 /* @__PURE__ */ i.jsx("option", { value: "L", children: "Low (7%)" }),
@@ -562,22 +562,22 @@ const Mt = {
         "button",
         {
           className: "qr-btn qr-btn-generate",
-          onClick: m,
+          onClick: u,
           disabled: !s.trim(),
           children: "Generate QR Code"
         }
       ) }),
-      g && /* @__PURE__ */ i.jsxs("div", { className: "qr-preview", children: [
+      x && /* @__PURE__ */ i.jsxs("div", { className: "qr-preview", children: [
         /* @__PURE__ */ i.jsx("h4", { children: "Preview" }),
-        /* @__PURE__ */ i.jsx("div", { className: "qr-preview-container", children: /* @__PURE__ */ i.jsx("img", { src: g, alt: "QR Code Preview" }) }),
+        /* @__PURE__ */ i.jsx("div", { className: "qr-preview-container", children: /* @__PURE__ */ i.jsx("img", { src: x, alt: "QR Code Preview" }) }),
         /* @__PURE__ */ i.jsx(
           "button",
           {
             className: "qr-btn qr-btn-add",
             onClick: E,
             style: {
-              backgroundColor: (d == null ? void 0 : d.primaryColor) || "#3b82f6",
-              borderColor: (d == null ? void 0 : d.primaryColor) || "#3b82f6"
+              backgroundColor: (n == null ? void 0 : n.primaryColor) || "#3b82f6",
+              borderColor: (n == null ? void 0 : n.primaryColor) || "#3b82f6"
             },
             children: "Add to Canvas"
           }
@@ -585,8 +585,8 @@ const Mt = {
       ] })
     ] })
   ] }) }) : null;
-}, ti = ({ isOpen: f, onClose: o, onAddBarcode: a, theme: d }) => {
-  const [s, h] = j(""), [g, l] = j("CODE128"), [n, F] = j(null), [N, R] = j(2), [m, E] = j(100), [B, S] = j(20), [T, J] = j("center"), [C, $] = j("bottom"), [k, st] = j(10), M = ft(null), ht = [
+}, qe = ({ isOpen: f, onClose: o, onAddBarcode: a, theme: n }) => {
+  const [s, h] = N(""), [x, l] = N("CODE128"), [d, F] = N(null), [T, R] = N(2), [u, E] = N(100), [z, S] = N(20), [j, K] = N("center"), [C, Q] = N("bottom"), [k, st] = N(10), W = xt(null), ht = [
     { value: "CODE128", label: "CODE128 (Most Common)" },
     { value: "EAN13", label: "EAN-13 (European Article Number)" },
     { value: "EAN8", label: "EAN-8 (Short EAN)" },
@@ -600,58 +600,58 @@ const Mt = {
     if (s.trim())
       try {
         F(/* @__PURE__ */ i.jsx(
-          Ye,
+          Oe,
           {
             value: s,
-            format: g,
-            width: N,
-            height: m,
-            fontSize: B,
-            textAlign: T,
+            format: x,
+            width: T,
+            height: u,
+            fontSize: z,
+            textAlign: j,
             textPosition: C,
             margin: k,
             background: "#ffffff",
             lineColor: "#000000"
           }
         ));
-      } catch (P) {
-        console.error("Barcode generation error:", P), alert("Invalid data for selected barcode format. Please check your input.");
+      } catch (L) {
+        console.error("Barcode generation error:", L), alert("Invalid data for selected barcode format. Please check your input.");
       }
   }, ct = () => {
-    var P, lt, X, nt;
-    if (!(!n || !M.current))
+    var L, lt, J, nt;
+    if (!(!d || !W.current))
       try {
-        const _ = M.current.querySelector("svg");
+        const _ = W.current.querySelector("svg");
         if (!_) {
           console.error("No SVG element found in barcode");
           return;
         }
-        const U = document.createElement("canvas"), u = U.getContext("2d"), K = _.getBoundingClientRect(), y = ((lt = (P = _.width) == null ? void 0 : P.baseVal) == null ? void 0 : lt.value) || K.width || 200, I = ((nt = (X = _.height) == null ? void 0 : X.baseVal) == null ? void 0 : nt.value) || K.height || 100;
-        U.width = y, U.height = I;
-        const W = new XMLSerializer().serializeToString(_), H = new Blob([W], { type: "image/svg+xml;charset=utf-8" }), G = URL.createObjectURL(H), Z = new Image();
-        Z.onload = () => {
-          u.drawImage(Z, 0, 0);
-          const q = U.toDataURL("image/png"), Y = new Image();
+        const P = document.createElement("canvas"), p = P.getContext("2d"), Z = _.getBoundingClientRect(), y = ((lt = (L = _.width) == null ? void 0 : L.baseVal) == null ? void 0 : lt.value) || Z.width || 200, I = ((nt = (J = _.height) == null ? void 0 : J.baseVal) == null ? void 0 : nt.value) || Z.height || 100;
+        P.width = y, P.height = I;
+        const M = new XMLSerializer().serializeToString(_), H = new Blob([M], { type: "image/svg+xml;charset=utf-8" }), G = URL.createObjectURL(H), tt = new Image();
+        tt.onload = () => {
+          p.drawImage(tt, 0, 0);
+          const q = P.toDataURL("image/png"), Y = new Image();
           Y.onload = () => {
             a({
               type: "barcode",
               src: q,
               data: s,
-              format: g,
+              format: x,
               width: y,
               height: I,
               x: 100,
               y: 100,
               imageObject: Y
-            }), Q();
+            }), $();
           }, Y.src = q, URL.revokeObjectURL(G);
-        }, Z.src = G;
+        }, tt.src = G;
       } catch (_) {
         console.error("Error adding barcode to canvas:", _), alert("Failed to add barcode to canvas. Please try again.");
       }
-  }, Q = () => {
+  }, $ = () => {
     h(""), F(null), l("CODE128"), R(2), E(100), S(20), o();
-  }, rt = (P) => ({
+  }, ot = (L) => ({
     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.",
@@ -661,15 +661,15 @@ const Mt = {
     MSI: "Numeric only. Used in retail inventory.",
     pharmacode: "Numbers 3-131070. Used in pharmaceutical industry.",
     codabar: "Supports 0-9, A-D, and symbols. Used in libraries."
-  })[P] || "";
-  return f ? /* @__PURE__ */ i.jsx("div", { className: "barcode-modal-overlay", onClick: Q, children: /* @__PURE__ */ i.jsxs("div", { className: "barcode-modal-content", onClick: (P) => P.stopPropagation(), children: [
+  })[L] || "";
+  return f ? /* @__PURE__ */ i.jsx("div", { className: "barcode-modal-overlay", onClick: $, children: /* @__PURE__ */ i.jsxs("div", { className: "barcode-modal-content", onClick: (L) => L.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "barcode-modal-header", children: [
       /* @__PURE__ */ i.jsx("h3", { children: "Generate Barcode" }),
       /* @__PURE__ */ i.jsx(
         "button",
         {
           className: "barcode-modal-close",
-          onClick: Q,
+          onClick: $,
           "aria-label": "Close",
           children: "×"
         }
@@ -684,7 +684,7 @@ const Mt = {
             type: "text",
             id: "barcode-data",
             value: s,
-            onChange: (P) => h(P.target.value),
+            onChange: (L) => h(L.target.value),
             placeholder: "Enter your data..."
           }
         )
@@ -695,12 +695,12 @@ const Mt = {
           "select",
           {
             id: "barcode-format",
-            value: g,
-            onChange: (P) => l(P.target.value),
-            children: ht.map((P) => /* @__PURE__ */ i.jsx("option", { value: P.value, children: P.label }, P.value))
+            value: x,
+            onChange: (L) => l(L.target.value),
+            children: ht.map((L) => /* @__PURE__ */ i.jsx("option", { value: L.value, children: L.label }, L.value))
           }
         ),
-        /* @__PURE__ */ i.jsx("small", { className: "format-description", children: rt(g) })
+        /* @__PURE__ */ i.jsx("small", { className: "format-description", children: ot(x) })
       ] }),
       /* @__PURE__ */ i.jsxs("div", { className: "barcode-options", children: [
         /* @__PURE__ */ i.jsxs("div", { className: "barcode-form-group", children: [
@@ -713,12 +713,12 @@ const Mt = {
               min: "1",
               max: "4",
               step: "0.5",
-              value: N,
-              onChange: (P) => R(parseFloat(P.target.value))
+              value: T,
+              onChange: (L) => R(parseFloat(L.target.value))
             }
           ),
           /* @__PURE__ */ i.jsxs("span", { className: "range-value", children: [
-            N,
+            T,
             "px"
           ] })
         ] }),
@@ -731,12 +731,12 @@ const Mt = {
               id: "barcode-height",
               min: "50",
               max: "200",
-              value: m,
-              onChange: (P) => E(parseInt(P.target.value))
+              value: u,
+              onChange: (L) => E(parseInt(L.target.value))
             }
           ),
           /* @__PURE__ */ i.jsxs("span", { className: "range-value", children: [
-            m,
+            u,
             "px"
           ] })
         ] }),
@@ -749,12 +749,12 @@ const Mt = {
               id: "barcode-fontsize",
               min: "10",
               max: "30",
-              value: B,
-              onChange: (P) => S(parseInt(P.target.value))
+              value: z,
+              onChange: (L) => S(parseInt(L.target.value))
             }
           ),
           /* @__PURE__ */ i.jsxs("span", { className: "range-value", children: [
-            B,
+            z,
             "px"
           ] })
         ] }),
@@ -765,7 +765,7 @@ const Mt = {
             {
               id: "text-position",
               value: C,
-              onChange: (P) => $(P.target.value),
+              onChange: (L) => Q(L.target.value),
               children: [
                 /* @__PURE__ */ i.jsx("option", { value: "bottom", children: "Bottom" }),
                 /* @__PURE__ */ i.jsx("option", { value: "top", children: "Top" })
@@ -783,17 +783,17 @@ const Mt = {
           children: "Generate Barcode"
         }
       ) }),
-      n && /* @__PURE__ */ i.jsxs("div", { className: "barcode-preview", children: [
+      d && /* @__PURE__ */ i.jsxs("div", { className: "barcode-preview", children: [
         /* @__PURE__ */ i.jsx("h4", { children: "Preview" }),
-        /* @__PURE__ */ i.jsx("div", { className: "barcode-preview-container", ref: M, children: n }),
+        /* @__PURE__ */ i.jsx("div", { className: "barcode-preview-container", ref: W, children: d }),
         /* @__PURE__ */ i.jsx(
           "button",
           {
             className: "barcode-btn barcode-btn-add",
             onClick: ct,
             style: {
-              backgroundColor: (d == null ? void 0 : d.primaryColor) || "#3b82f6",
-              borderColor: (d == null ? void 0 : d.primaryColor) || "#3b82f6"
+              backgroundColor: (n == null ? void 0 : n.primaryColor) || "#3b82f6",
+              borderColor: (n == null ? void 0 : n.primaryColor) || "#3b82f6"
             },
             children: "Add to Canvas"
           }
@@ -801,7 +801,7 @@ const Mt = {
       ] })
     ] })
   ] }) }) : null;
-}, ei = ({ theme: f }) => /* @__PURE__ */ i.jsxs("div", { className: "premium-feature-container", style: {
+}, Ve = ({ theme: f }) => /* @__PURE__ */ i.jsxs("div", { className: "premium-feature-container", style: {
   padding: "20px",
   backgroundColor: "#f8f9fa",
   borderRadius: "8px",
@@ -847,7 +847,7 @@ const Mt = {
       children: "Get API Key"
     }
   )
-] }), se = () => /* @__PURE__ */ i.jsxs("div", { style: { textAlign: "center", padding: "40px" }, children: [
+] }), ee = () => /* @__PURE__ */ i.jsxs("div", { style: { textAlign: "center", padding: "40px" }, children: [
   /* @__PURE__ */ i.jsx("div", { style: {
     border: "4px solid #f3f3f3",
     borderTop: "4px solid #3498db",
@@ -864,87 +864,87 @@ const Mt = {
                 100% { transform: rotate(360deg); }
             }
         ` })
-] }), ii = ({ isOpen: f, onClose: o, onAddSticker: a, theme: d, apiKey: s, apiEndpoint: h }) => {
-  const [g, l] = j([]), [n, F] = j(!1), [N, R] = j(null), [m, E] = j(""), [B, S] = j(""), [T, J] = j({});
-  ft(null);
-  const [C, $] = j(!1), [k, st] = j(!1), [M, ht] = j(!1), O = `${h}/api/v1/designer`;
+] }), Xe = ({ isOpen: f, onClose: o, onAddSticker: a, theme: n, apiKey: s, apiEndpoint: h }) => {
+  const [x, l] = N([]), [d, F] = N(!1), [T, R] = N(null), [u, E] = N(""), [z, S] = N(""), [j, K] = N({});
+  xt(null);
+  const [C, Q] = N(!1), [k, st] = N(!1), [W, ht] = N(!1), O = `${h}/api/v1/designer`;
   it(() => {
     f && s && ct();
   }, [f, s]);
   const ct = async () => {
-    const U = sessionStorage.getItem("apc_x_sub_status");
-    U === "active" ? ($(!0), st(!0), rt()) : U === "inactive" ? ($(!1), st(!0)) : (ht(!0), await Q());
-  }, Q = async () => {
+    const P = sessionStorage.getItem("apc_x_sub_status");
+    P === "active" ? (Q(!0), st(!0), ot()) : P === "inactive" ? (Q(!1), st(!0)) : (ht(!0), await $());
+  }, $ = async () => {
     if (!s) {
-      $(!1), st(!0), ht(!1);
+      Q(!1), st(!0), ht(!1);
       return;
     }
-    const U = `${O}/get-subscription-status/${s}`;
+    const P = `${O}/get-subscription-status/${s}`;
     try {
-      (await ie.get(U)).data.object === "active" ? (sessionStorage.setItem("apc_x_sub_status", "active"), $(!0), rt()) : (sessionStorage.setItem("apc_x_sub_status", "inactive"), $(!1));
-    } catch (u) {
-      console.error("Subscription check failed:", u), sessionStorage.setItem("apc_x_sub_status", "inactive"), $(!1);
+      (await Jt.get(P)).data.object === "active" ? (sessionStorage.setItem("apc_x_sub_status", "active"), Q(!0), ot()) : (sessionStorage.setItem("apc_x_sub_status", "inactive"), Q(!1));
+    } catch (p) {
+      console.error("Subscription check failed:", p), sessionStorage.setItem("apc_x_sub_status", "inactive"), Q(!1);
     } finally {
       ht(!1), st(!0);
     }
-  }, rt = async () => {
-    const U = sessionStorage.getItem("apc_stickers");
-    if (U)
+  }, ot = async () => {
+    const P = sessionStorage.getItem("apc_stickers");
+    if (P)
       try {
-        const u = JSON.parse(U);
-        l(u);
+        const p = JSON.parse(P);
+        l(p);
         return;
       } catch {
         console.warn("Failed to parse cached stickers, fetching fresh data");
       }
     F(!0), R(null);
     try {
-      const u = await ie.get(`${O}/get-stickers`);
-      if (u.data && u.data.object && u.data.object.contents) {
-        const K = u.data.object.contents;
-        l(K), sessionStorage.setItem("apc_stickers", JSON.stringify(K));
+      const p = await Jt.get(`${O}/get-stickers`);
+      if (p.data && p.data.object && p.data.object.contents) {
+        const Z = p.data.object.contents;
+        l(Z), sessionStorage.setItem("apc_stickers", JSON.stringify(Z));
       } else
         throw new Error("Invalid response format");
-    } catch (u) {
-      console.error("Error fetching stickers:", u), R("Failed to load stickers. Please try again.");
+    } catch (p) {
+      console.error("Error fetching stickers:", p), R("Failed to load stickers. Please try again.");
     } finally {
       F(!1);
     }
-  }, P = (U, u) => {
+  }, L = (P, p) => {
     a({
       type: "sticker",
-      src: U,
-      name: u,
+      src: P,
+      name: p,
       width: 100,
       height: 100,
       x: 100,
       y: 100
     }), o();
-  }, lt = (U) => {
-    J((u) => ({
-      ...u,
-      [U]: !u[U]
+  }, lt = (P) => {
+    K((p) => ({
+      ...p,
+      [P]: !p[P]
     }));
-  }, X = (U) => {
-    const u = {};
-    return U.forEach((K) => {
-      const y = K.name.split("/");
-      let I = u;
-      y.forEach((W, H) => {
-        I[W] || (I[W] = H === y.length - 1 ? K : {}), I = I[W];
+  }, J = (P) => {
+    const p = {};
+    return P.forEach((Z) => {
+      const y = Z.name.split("/");
+      let I = p;
+      y.forEach((M, H) => {
+        I[M] || (I[M] = H === y.length - 1 ? Z : {}), I = I[M];
       });
-    }), u;
-  }, nt = (U, u = "", K = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${K * 15}px` }, children: Object.keys(U).map((y) => {
-    const I = `${u}/${y}`, W = T[I];
-    return U[y].type === "image" ? !B || y.toLowerCase().includes(B.toLowerCase()) ? /* @__PURE__ */ i.jsx(
+    }), p;
+  }, nt = (P, p = "", Z = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${Z * 15}px` }, children: Object.keys(P).map((y) => {
+    const I = `${p}/${y}`, M = j[I];
+    return P[y].type === "image" ? !z || y.toLowerCase().includes(z.toLowerCase()) ? /* @__PURE__ */ i.jsx(
       "div",
       {
         className: "sticker-item",
-        onClick: () => P(U[y].url, y),
+        onClick: () => L(P[y].url, y),
         children: /* @__PURE__ */ i.jsx("div", { className: "sticker-preview", children: /* @__PURE__ */ i.jsx(
           "img",
           {
-            src: U[y].url,
+            src: P[y].url,
             alt: y,
             loading: "lazy",
             onError: (G) => {
@@ -961,17 +961,17 @@ const Mt = {
           className: "category-header",
           onClick: () => lt(I),
           children: [
-            /* @__PURE__ */ i.jsx("span", { className: `expand-icon ${W ? "expanded" : ""}`, children: "▶" }),
+            /* @__PURE__ */ i.jsx("span", { className: `expand-icon ${M ? "expanded" : ""}`, children: "▶" }),
             /* @__PURE__ */ i.jsx("span", { className: "category-name", children: y })
           ]
         }
       ),
-      W && nt(U[y], I, K + 1)
+      M && nt(P[y], I, Z + 1)
     ] }, I);
-  }) }), _ = g.filter(
-    (U) => !B || U.name.toLowerCase().includes(B.toLowerCase())
+  }) }), _ = x.filter(
+    (P) => !z || P.name.toLowerCase().includes(z.toLowerCase())
   );
-  return f ? /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-content", onClick: (U) => U.stopPropagation(), children: [
+  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: [
       /* @__PURE__ */ i.jsx("h3", { children: "Stickers" }),
       /* @__PURE__ */ i.jsx(
@@ -985,29 +985,29 @@ const Mt = {
       )
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-body", children: [
-      M && /* @__PURE__ */ i.jsx(se, {}),
-      !C && !M && k && /* @__PURE__ */ i.jsx(ei, { theme: d }),
+      W && /* @__PURE__ */ i.jsx(ee, {}),
+      !C && !W && k && /* @__PURE__ */ i.jsx(Ve, { theme: n }),
       C && 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: (U) => S(U.target.value),
+            value: z,
+            onChange: (P) => S(P.target.value),
             className: "sticker-search"
           }
         ) }) }),
-        n && /* @__PURE__ */ i.jsx(se, {}),
-        N && /* @__PURE__ */ i.jsxs("div", { className: "sticker-error", children: [
-          /* @__PURE__ */ i.jsx("p", { children: N }),
-          /* @__PURE__ */ i.jsx("button", { onClick: rt, children: "Retry" })
+        d && /* @__PURE__ */ i.jsx(ee, {}),
+        T && /* @__PURE__ */ i.jsxs("div", { className: "sticker-error", children: [
+          /* @__PURE__ */ i.jsx("p", { children: T }),
+          /* @__PURE__ */ i.jsx("button", { onClick: ot, children: "Retry" })
         ] }),
-        !n && !N && g.length > 0 && /* @__PURE__ */ i.jsx("div", { className: "sticker-grid", children: nt(X(_)) })
+        !d && !T && x.length > 0 && /* @__PURE__ */ i.jsx("div", { className: "sticker-grid", children: nt(J(_)) })
       ] })
     ] })
   ] }) }) : null;
-}, oi = [
+}, Je = [
   // FLORAL DESIGNS (40 items)
   {
     id: 1,
@@ -2559,10 +2559,10 @@ const Mt = {
     category: "Geometric",
     description: "Complex mandala flower pattern"
   }
-], ri = ({ isOpen: f, onClose: o, onAddEmbroidery: a, theme: d, apiKey: s, apiEndpoint: h }) => {
-  const [g, l] = j([]), [n, F] = j(!1), [N, R] = j(null), [m, E] = j(""), [B, S] = j("All"), T = ft(null), J = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
+], Ke = ({ isOpen: f, onClose: o, onAddEmbroidery: a, theme: n, apiKey: s, apiEndpoint: h }) => {
+  const [x, l] = N([]), [d, F] = N(!1), [T, R] = N(null), [u, E] = N(""), [z, S] = N("All"), j = xt(null), K = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
   it(() => {
-    f && l(oi);
+    f && l(Je);
   }, [f]);
   const C = (k) => {
     a({
@@ -2576,16 +2576,16 @@ const Mt = {
       x: 100,
       y: 100
     }), o();
-  }, $ = g.filter((k) => {
-    const st = !m || k.name.toLowerCase().includes(m.toLowerCase()) || k.description.toLowerCase().includes(m.toLowerCase()), M = B === "All" || k.category === B;
-    return st && M;
+  }, Q = x.filter((k) => {
+    const st = !u || k.name.toLowerCase().includes(u.toLowerCase()) || k.description.toLowerCase().includes(u.toLowerCase()), W = z === "All" || k.category === z;
+    return st && W;
   });
   return f ? /* @__PURE__ */ i.jsx("div", { className: "embroidery-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs(
     "div",
     {
       className: "embroidery-modal-content",
       onClick: (k) => k.stopPropagation(),
-      ref: T,
+      ref: j,
       children: [
         /* @__PURE__ */ i.jsxs("div", { className: "embroidery-modal-header", children: [
           /* @__PURE__ */ i.jsx("h3", { children: "Choose an Embroidery Design" }),
@@ -2605,7 +2605,7 @@ const Mt = {
             {
               type: "text",
               placeholder: "Search embroidery designs...",
-              value: m,
+              value: u,
               onChange: (k) => E(k.target.value),
               className: "embroidery-search"
             }
@@ -2615,21 +2615,21 @@ const Mt = {
             /* @__PURE__ */ i.jsx(
               "select",
               {
-                value: B,
+                value: z,
                 onChange: (k) => S(k.target.value),
                 className: "category-select",
-                children: J.map((k) => /* @__PURE__ */ i.jsx("option", { value: k, children: k }, k))
+                children: K.map((k) => /* @__PURE__ */ i.jsx("option", { value: k, children: k }, k))
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ i.jsxs("div", { className: "embroidery-modal-body", children: [
-          n && /* @__PURE__ */ i.jsxs("div", { className: "embroidery-loading", children: [
+          d && /* @__PURE__ */ i.jsxs("div", { className: "embroidery-loading", children: [
             /* @__PURE__ */ i.jsx("div", { className: "loading-spinner" }),
             /* @__PURE__ */ i.jsx("p", { children: "Loading embroidery designs..." })
           ] }),
-          N && /* @__PURE__ */ i.jsx("div", { className: "embroidery-error", children: /* @__PURE__ */ i.jsx("p", { children: N }) }),
-          !n && !N && /* @__PURE__ */ i.jsx("div", { className: "embroidery-grid", children: $.map((k) => /* @__PURE__ */ i.jsxs(
+          T && /* @__PURE__ */ i.jsx("div", { className: "embroidery-error", children: /* @__PURE__ */ i.jsx("p", { children: T }) }),
+          !d && !T && /* @__PURE__ */ i.jsx("div", { className: "embroidery-grid", children: Q.map((k) => /* @__PURE__ */ i.jsxs(
             "div",
             {
               className: "embroidery-item",
@@ -2655,7 +2655,7 @@ const Mt = {
             },
             k.id
           )) }),
-          !n && !N && $.length === 0 && /* @__PURE__ */ i.jsx("div", { className: "no-embroideries", children: /* @__PURE__ */ i.jsx("p", { children: "No embroidery designs found matching your search." }) })
+          !d && !T && Q.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: "ℹ️" }),
@@ -2664,7 +2664,7 @@ const Mt = {
       ]
     }
   ) }) : null;
-}, Tt = [
+}, Ct = [
   // MOTIVATIONAL & INSPIRATIONAL (25 items)
   {
     id: 1,
@@ -4601,19 +4601,19 @@ const Mt = {
     fill: "#8B0000",
     textAlign: "center"
   }
-], ai = ({ isOpen: f, onClose: o, onAddText: a, theme: d }) => {
-  const [s, h] = j(""), [g, l] = j("All"), n = ee(() => {
-    const m = Tt.reduce((E, B) => (E[B.category] = (E[B.category] || 0) + 1, E), {});
+], Ze = ({ isOpen: f, onClose: o, onAddText: a, theme: n }) => {
+  const [s, h] = N(""), [x, l] = N("All"), d = Xt(() => {
+    const u = Ct.reduce((E, z) => (E[z.category] = (E[z.category] || 0) + 1, E), {});
     return [
-      { name: "All", count: Tt.length },
-      ...Object.entries(m).map(([E, B]) => ({ name: E, count: B }))
+      { name: "All", count: Ct.length },
+      ...Object.entries(u).map(([E, z]) => ({ name: E, count: z }))
     ];
-  }, [Tt]), F = ee(() => Tt.filter((m) => {
-    const E = !s || m.text.toLowerCase().includes(s.toLowerCase()) || m.category.toLowerCase().includes(s.toLowerCase()), B = g === "All" || m.category === g;
-    return E && B;
-  }), [Tt, s, g]), N = (m) => {
+  }, [Ct]), F = Xt(() => Ct.filter((u) => {
+    const E = !s || u.text.toLowerCase().includes(s.toLowerCase()) || u.category.toLowerCase().includes(s.toLowerCase()), z = x === "All" || u.category === x;
+    return E && z;
+  }), [Ct, s, x]), T = (u) => {
     const E = {
-      ...m,
+      ...u,
       x: 100,
       y: 100
     };
@@ -4628,7 +4628,7 @@ const Mt = {
       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: (m) => m.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: (u) => u.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,25 +4640,25 @@ const Mt = {
           type: "text",
           placeholder: "Search templates...",
           value: s,
-          onChange: (m) => h(m.target.value),
+          onChange: (u) => h(u.target.value),
           className: "search-input"
         }
       ) }),
-      /* @__PURE__ */ i.jsx("div", { className: "category-tabs", children: n.map((m) => /* @__PURE__ */ i.jsxs(
+      /* @__PURE__ */ i.jsx("div", { className: "category-tabs", children: d.map((u) => /* @__PURE__ */ i.jsxs(
         "button",
         {
-          className: `category-tab ${g === m.name ? "active" : ""}`,
-          onClick: () => l(m.name),
+          className: `category-tab ${x === u.name ? "active" : ""}`,
+          onClick: () => l(u.name),
           children: [
-            m.name,
+            u.name,
             /* @__PURE__ */ i.jsxs("span", { className: "count", children: [
               "(",
-              m.count,
+              u.count,
               ")"
             ] })
           ]
         },
-        m.name
+        u.name
       )) })
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "templates-grid", children: [
@@ -4666,38 +4666,38 @@ const Mt = {
         /* @__PURE__ */ i.jsx("div", { className: "custom-icon", children: "✏️" }),
         /* @__PURE__ */ i.jsx("div", { className: "custom-label", children: "Create Custom Text" })
       ] }) }),
-      F.map((m) => /* @__PURE__ */ i.jsxs(
+      F.map((u) => /* @__PURE__ */ i.jsxs(
         "div",
         {
           className: "template-item",
-          onClick: () => N(m),
+          onClick: () => T(u),
           children: [
             /* @__PURE__ */ i.jsx(
               "div",
               {
                 className: "template-preview",
                 style: {
-                  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"
+                  fontFamily: u.fontFamily,
+                  fontSize: `${Math.min(u.fontSize * 0.6, 18)}px`,
+                  fontWeight: u.fontWeight,
+                  fontStyle: u.fontStyle,
+                  color: u.fill,
+                  backgroundColor: u.hasBackground ? u.backgroundColor : "transparent",
+                  textAlign: u.textAlign || "left",
+                  textTransform: u.textTransform || "none",
+                  letterSpacing: u.letterSpacing ? `${u.letterSpacing}px` : "normal",
+                  textShadow: u.hasTextShadow ? `${u.textShadowX}px ${u.textShadowY}px ${u.textShadowBlur}px ${u.textShadowColor}` : "none"
                 },
-                children: m.text
+                children: u.text
               }
             ),
             /* @__PURE__ */ i.jsxs("div", { className: "template-info", children: [
-              /* @__PURE__ */ i.jsx("span", { className: "template-category", children: m.category }),
-              /* @__PURE__ */ i.jsx("span", { className: "template-font", children: m.fontFamily })
+              /* @__PURE__ */ i.jsx("span", { className: "template-category", children: u.category }),
+              /* @__PURE__ */ i.jsx("span", { className: "template-font", children: u.fontFamily })
             ] })
           ]
         },
-        m.id
+        u.id
       ))
     ] }),
     /* @__PURE__ */ i.jsx("div", { className: "modal-footer", children: /* @__PURE__ */ i.jsxs("div", { className: "results-count", children: [
@@ -4707,56 +4707,56 @@ const Mt = {
       " found"
     ] }) })
   ] }) }) : null;
-}, si = ({
+}, ti = ({
   onAddElement: f,
   onDeleteElement: o,
   onDuplicateElement: a,
-  onUndo: d,
+  onUndo: n,
   onRedo: s,
   onToggleGrid: h,
-  onToggleRulers: g,
+  onToggleRulers: x,
   onToggleSnap: l,
-  onImageUpload: n,
+  onImageUpload: d,
   canUndo: F,
-  canRedo: N,
+  canRedo: T,
   showGrid: R,
-  showRulers: m,
+  showRulers: u,
   snapToGrid: E,
-  selectedElement: B,
+  selectedElement: z,
   theme: S,
-  readOnly: T,
-  apiKey: J,
+  readOnly: j,
+  apiKey: K,
   apiEndpoint: C
 }) => {
-  const [$, k] = j(!1), [st, M] = j(!1), [ht, O] = j(!1), [ct, Q] = j(!1), [rt, P] = j(!1), [lt, X] = j(!1), [nt, _] = j(!1), U = (L) => {
-    const ot = L.target.files[0];
-    ot && ot.type.startsWith("image/") && n(ot), L.target.value = "";
-  }, u = (L) => {
+  const [Q, k] = N(!1), [st, W] = N(!1), [ht, O] = N(!1), [ct, $] = N(!1), [ot, L] = N(!1), [lt, J] = N(!1), [nt, _] = N(!1), P = (U) => {
+    const X = U.target.files[0];
+    X && X.type.startsWith("image/") && d(X), U.target.value = "";
+  }, p = (U) => {
     f("icon", {
-      iconData: L,
-      text: L.symbol,
+      iconData: U,
+      text: U.symbol,
       fontSize: 48,
       fontFamily: "Arial",
       fill: "#000000"
     });
-  }, K = (L) => {
-    f("qrcode", L);
-  }, y = (L) => {
-    f("barcode", L);
-  }, I = (L) => {
-    f("sticker", L);
-  }, W = (L) => {
-    f("embroidery", L);
-  }, H = (L, ot) => {
-    f(L, ot);
+  }, Z = (U) => {
+    f("qrcode", U);
+  }, y = (U) => {
+    f("barcode", U);
+  }, I = (U) => {
+    f("sticker", U);
+  }, M = (U) => {
+    f("embroidery", U);
+  }, H = (U, X) => {
+    f(U, X);
   }, G = () => {
-    X(!lt), _(!1);
-  }, Z = () => {
-    _(!nt), X(!1);
-  }, q = (L) => {
-    L === "custom" ? f("text") : L === "templates" && P(!0), X(!1);
-  }, Y = (L) => {
-    f(L), _(!1);
+    J(!lt), _(!1);
+  }, tt = () => {
+    _(!nt), J(!1);
+  }, q = (U) => {
+    U === "custom" ? f("text") : U === "templates" && L(!0), J(!1);
+  }, Y = (U) => {
+    f(U), _(!1);
   };
   return /* @__PURE__ */ i.jsxs("div", { className: "toolbar", children: [
     /* @__PURE__ */ i.jsxs("div", { className: "toolbar-section", children: [
@@ -4765,8 +4765,8 @@ const Mt = {
           "button",
           {
             className: "toolbar-btn compact",
-            onClick: d,
-            disabled: !F || T,
+            onClick: n,
+            disabled: !F || j,
             title: "Undo (Ctrl+Z)",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "↶" }),
@@ -4779,7 +4779,7 @@ const Mt = {
           {
             className: "toolbar-btn compact",
             onClick: s,
-            disabled: !N || T,
+            disabled: !T || j,
             title: "Redo (Ctrl+Y)",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "↷" }),
@@ -4795,7 +4795,7 @@ const Mt = {
             "button",
             {
               className: "toolbar-btn compact dropdown-trigger",
-              disabled: T,
+              disabled: j,
               title: "Add Text",
               onClick: G,
               children: [
@@ -4821,8 +4821,8 @@ const Mt = {
             "button",
             {
               className: "toolbar-btn compact dropdown-trigger",
-              disabled: T,
-              onClick: Z,
+              disabled: j,
+              onClick: tt,
               children: [
                 /* @__PURE__ */ i.jsx("span", { className: "icon", children: "◩" }),
                 /* @__PURE__ */ i.jsx("span", { className: "label", children: "Shapes" }),
@@ -4882,7 +4882,7 @@ const Mt = {
           ] })
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ i.jsxs("label", { className: "toolbar-btn compact file-upload", style: { cursor: T ? "not-allowed" : "pointer" }, children: [
+        /* @__PURE__ */ i.jsxs("label", { className: "toolbar-btn compact file-upload", style: { cursor: j ? "not-allowed" : "pointer" }, children: [
           /* @__PURE__ */ i.jsx("span", { className: "icon", children: "☁️" }),
           /* @__PURE__ */ i.jsx("span", { className: "label", children: "Upload" }),
           /* @__PURE__ */ i.jsx(
@@ -4890,19 +4890,19 @@ const Mt = {
             {
               type: "file",
               accept: "image/*",
-              onChange: U,
-              disabled: T
+              onChange: P,
+              disabled: j
             }
           )
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ i.jsx(Ke, { onSelectIcon: u, theme: S, disabled: T }),
+        /* @__PURE__ */ i.jsx(_e, { onSelectIcon: p, theme: S, disabled: j }),
         /* @__PURE__ */ i.jsxs(
           "button",
           {
             className: "toolbar-btn compact",
             onClick: () => O(!0),
-            disabled: T,
+            disabled: j,
             title: "Add Sticker",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "🎨" }),
@@ -4916,7 +4916,7 @@ const Mt = {
           {
             className: "toolbar-btn compact",
             onClick: () => k(!0),
-            disabled: T,
+            disabled: j,
             title: "Add QR Code",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "▦" }),
@@ -4928,8 +4928,8 @@ const Mt = {
           "button",
           {
             className: "toolbar-btn compact",
-            onClick: () => M(!0),
-            disabled: T,
+            onClick: () => W(!0),
+            disabled: j,
             title: "Add Barcode",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "▤" }),
@@ -4943,8 +4943,8 @@ const Mt = {
         "button",
         {
           className: "toolbar-btn compact",
-          onClick: () => Q(!0),
-          disabled: T,
+          onClick: () => $(!0),
+          disabled: j,
           title: "Add Embroidery Design",
           children: [
             /* @__PURE__ */ i.jsx("span", { className: "icon", children: "🧵" }),
@@ -4952,7 +4952,7 @@ const Mt = {
           ]
         }
       ) }),
-      B && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      z && /* @__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 Mt = {
             {
               className: "toolbar-btn compact success",
               onClick: a,
-              disabled: T,
+              disabled: j,
               title: "Duplicate Element (Ctrl+D)",
               children: [
                 /* @__PURE__ */ i.jsx("span", { className: "icon", children: "⧉" }),
@@ -4973,7 +4973,7 @@ const Mt = {
             {
               className: "toolbar-btn compact danger",
               onClick: o,
-              disabled: T,
+              disabled: j,
               title: "Delete Element (Delete)",
               children: [
                 /* @__PURE__ */ i.jsx("span", { className: "icon", children: "🗑️" }),
@@ -5000,8 +5000,8 @@ const Mt = {
         /* @__PURE__ */ i.jsxs(
           "button",
           {
-            className: `toolbar-btn compact ${m ? "active" : ""}`,
-            onClick: g,
+            className: `toolbar-btn compact ${u ? "active" : ""}`,
+            onClick: x,
             title: "Toggle Rulers",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "📐" }),
@@ -5024,72 +5024,72 @@ const Mt = {
       ] })
     ] }),
     /* @__PURE__ */ i.jsx(
-      Ze,
+      Ye,
       {
-        isOpen: $,
+        isOpen: Q,
         onClose: () => k(!1),
-        onAddQRCode: K,
+        onAddQRCode: Z,
         theme: S
       }
     ),
     /* @__PURE__ */ i.jsx(
-      ti,
+      qe,
       {
         isOpen: st,
-        onClose: () => M(!1),
+        onClose: () => W(!1),
         onAddBarcode: y,
         theme: S
       }
     ),
     /* @__PURE__ */ i.jsx(
-      ii,
+      Xe,
       {
         isOpen: ht,
         onClose: () => O(!1),
         onAddSticker: I,
         theme: S,
-        apiKey: J,
+        apiKey: K,
         apiEndpoint: C
       }
     ),
     /* @__PURE__ */ i.jsx(
-      ri,
+      Ke,
       {
         isOpen: ct,
-        onClose: () => Q(!1),
-        onAddEmbroidery: W,
+        onClose: () => $(!1),
+        onAddEmbroidery: M,
         theme: S,
-        apiKey: J,
+        apiKey: K,
         apiEndpoint: C
       }
     ),
     /* @__PURE__ */ i.jsx(
-      ai,
+      Ze,
       {
-        isOpen: rt,
-        onClose: () => P(!1),
+        isOpen: ot,
+        onClose: () => L(!1),
         onAddText: H,
         theme: S
       }
     )
   ] });
-}, li = ({
+}, ei = ({
   selectedElement: f,
   onUpdate: o,
   onMoveLayer: a,
-  availableFonts: d,
+  availableFonts: n,
   theme: s
 }) => {
-  const [h, g] = j(!1);
+  const [h, x] = 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 l = (S, T) => {
-    o(f.id, { [S]: T });
-  }, n = () => {
-    var S, T, J;
+  const l = (S, j) => {
+    o(f.id, { [S]: j });
+  }, d = () => {
+    var S, j, K;
     return /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
       /* @__PURE__ */ i.jsx("h4", { children: "Text Content" }),
       /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
@@ -5111,7 +5111,7 @@ const Mt = {
           {
             value: f.fontFamily || "Arial",
             onChange: (C) => l("fontFamily", C.target.value),
-            children: d.map((C) => /* @__PURE__ */ i.jsx("option", { value: C, children: C }, C))
+            children: n.map((C) => /* @__PURE__ */ i.jsx("option", { value: C, children: C }, C))
           }
         )
       ] }),
@@ -5193,8 +5193,8 @@ const Mt = {
             {
               className: (S = f.textDecoration) != null && S.includes("underline") ? "active" : "",
               onClick: () => {
-                const C = f.textDecoration || "", $ = C.split(" ").filter((k) => k && k !== "underline");
-                C.includes("underline") || $.push("underline"), l("textDecoration", $.join(" ").trim());
+                const C = f.textDecoration || "", Q = C.split(" ").filter((k) => k && k !== "underline");
+                C.includes("underline") || Q.push("underline"), l("textDecoration", Q.join(" ").trim());
               },
               title: "Underline",
               children: /* @__PURE__ */ i.jsx("u", { children: "U" })
@@ -5203,10 +5203,10 @@ const Mt = {
           /* @__PURE__ */ i.jsx(
             "button",
             {
-              className: (T = f.textDecoration) != null && T.includes("overline") ? "active" : "",
+              className: (j = f.textDecoration) != null && j.includes("overline") ? "active" : "",
               onClick: () => {
-                const C = f.textDecoration || "", $ = C.split(" ").filter((k) => k && k !== "overline");
-                C.includes("overline") || $.push("overline"), l("textDecoration", $.join(" ").trim());
+                const C = f.textDecoration || "", Q = C.split(" ").filter((k) => k && k !== "overline");
+                C.includes("overline") || Q.push("overline"), l("textDecoration", Q.join(" ").trim());
               },
               title: "Overline",
               children: /* @__PURE__ */ i.jsx("span", { style: { textDecoration: "overline" }, children: "O" })
@@ -5215,10 +5215,10 @@ const Mt = {
           /* @__PURE__ */ i.jsx(
             "button",
             {
-              className: (J = f.textDecoration) != null && J.includes("line-through") ? "active" : "",
+              className: (K = f.textDecoration) != null && K.includes("line-through") ? "active" : "",
               onClick: () => {
-                const C = f.textDecoration || "", $ = C.split(" ").filter((k) => k && k !== "line-through");
-                C.includes("line-through") || $.push("line-through"), l("textDecoration", $.join(" ").trim());
+                const C = f.textDecoration || "", Q = C.split(" ").filter((k) => k && k !== "line-through");
+                C.includes("line-through") || Q.push("line-through"), l("textDecoration", Q.join(" ").trim());
               },
               title: "Strikethrough",
               children: /* @__PURE__ */ i.jsx("s", { children: "S" })
@@ -5615,7 +5615,7 @@ const Mt = {
         }
       )
     ] })
-  ] }), N = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
+  ] }), T = () => /* @__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" }),
@@ -5717,7 +5717,7 @@ const Mt = {
         "°"
       ] })
     ] })
-  ] }), m = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
+  ] }), u = () => /* @__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: [
@@ -5728,8 +5728,8 @@ const Mt = {
             type: "number",
             value: f.strokeWidth || f.height || 2,
             onChange: (S) => {
-              const T = parseInt(S.target.value);
-              l("strokeWidth", T), l("height", T);
+              const j = parseInt(S.target.value);
+              l("strokeWidth", j), l("height", j);
             },
             min: "1",
             max: "50"
@@ -5784,7 +5784,7 @@ const Mt = {
       /* @__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 = [
+  ] }), z = [
     "rectangle",
     "circle",
     "triangle",
@@ -5803,17 +5803,17 @@ const Mt = {
       /* @__PURE__ */ i.jsx("span", { className: "element-type", children: f.type })
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "panel-content", children: [
-      f.type === "text" && n(),
-      B.includes(f.type) && F(),
-      f.type === "image" && N(),
-      f.type === "horizontalLine" && m(),
+      f.type === "text" && d(),
+      z.includes(f.type) && F(),
+      f.type === "image" && T(),
+      f.type === "horizontalLine" && u(),
       R(),
       E(),
       /* @__PURE__ */ i.jsx("div", { className: "property-group", children: /* @__PURE__ */ i.jsxs(
         "button",
         {
           className: "toggle-advanced",
-          onClick: () => g(!h),
+          onClick: () => x(!h),
           children: [
             h ? "Hide" : "Show",
             " Advanced Options"
@@ -5822,16 +5822,16 @@ const Mt = {
       ) })
     ] })
   ] });
-}, ni = ({
+}, ii = ({
   elements: f,
   selectedElement: o,
   onSelectElement: a,
-  onMoveLayer: d,
+  onMoveLayer: n,
   onDeleteElement: s,
   theme: h
 }) => {
-  const g = (n, F) => {
-    switch (n) {
+  const x = (d, F) => {
+    switch (d) {
       case "text":
         return "T";
       case "rectangle":
@@ -5871,40 +5871,40 @@ const Mt = {
       default:
         return "?";
     }
-  }, l = (n) => {
-    var F, N;
-    if (n.type === "text")
-      return n.isIcon && n.iconData ? `Icon: ${n.iconData.name}` : ((F = n.text) == null ? void 0 : F.substring(0, 20)) + (((N = n.text) == null ? void 0 : N.length) > 20 ? "..." : "") || "Text";
-    if (n.type === "qrcode")
-      return `QR Code: ${(n.data || "").substring(0, 15) + ((n.data || "").length > 15 ? "..." : "")}`;
-    if (n.type === "barcode") {
-      const R = n.format || "CODE128", m = n.data || "";
-      return `Barcode (${R}): ${m.substring(0, 10) + (m.length > 10 ? "..." : "")}`;
+  }, l = (d) => {
+    var F, T;
+    if (d.type === "text")
+      return d.isIcon && d.iconData ? `Icon: ${d.iconData.name}` : ((F = d.text) == null ? void 0 : F.substring(0, 20)) + (((T = d.text) == null ? void 0 : T.length) > 20 ? "..." : "") || "Text";
+    if (d.type === "qrcode")
+      return `QR Code: ${(d.data || "").substring(0, 15) + ((d.data || "").length > 15 ? "..." : "")}`;
+    if (d.type === "barcode") {
+      const R = d.format || "CODE128", u = d.data || "";
+      return `Barcode (${R}): ${u.substring(0, 10) + (u.length > 10 ? "..." : "")}`;
     }
-    return n.type === "sticker" ? `Sticker: ${(n.name || "Untitled").substring(0, 15)}` : n.type === "embroidery" ? `Embroidery: ${(n.name || "Design").substring(0, 15)}` : n.type.charAt(0).toUpperCase() + n.type.slice(1);
+    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 /* @__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((n, F) => /* @__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((d, F) => /* @__PURE__ */ i.jsxs(
       "div",
       {
-        className: `layer-item ${(o == null ? void 0 : o.id) === n.id ? "selected" : ""}`,
-        onClick: () => a(n),
+        className: `layer-item ${(o == null ? void 0 : o.id) === d.id ? "selected" : ""}`,
+        onClick: () => a(d),
         children: [
           /* @__PURE__ */ i.jsxs("div", { className: "layer-info", children: [
-            /* @__PURE__ */ i.jsx("span", { className: "layer-icon", children: g(n.type) }),
-            /* @__PURE__ */ i.jsx("span", { className: "layer-name", children: l(n) })
+            /* @__PURE__ */ i.jsx("span", { className: "layer-icon", children: x(d.type) }),
+            /* @__PURE__ */ i.jsx("span", { className: "layer-name", children: l(d) })
           ] }),
           /* @__PURE__ */ i.jsxs("div", { className: "layer-controls", children: [
             /* @__PURE__ */ i.jsx(
               "button",
               {
                 className: "layer-btn",
-                onClick: (N) => {
-                  N.stopPropagation(), d(n.id, "up");
+                onClick: (T) => {
+                  T.stopPropagation(), n(d.id, "up");
                 },
                 disabled: F === 0,
                 title: "Move Up",
@@ -5915,8 +5915,8 @@ const Mt = {
               "button",
               {
                 className: "layer-btn",
-                onClick: (N) => {
-                  N.stopPropagation(), d(n.id, "down");
+                onClick: (T) => {
+                  T.stopPropagation(), n(d.id, "down");
                 },
                 disabled: F === f.length - 1,
                 title: "Move Down",
@@ -5927,8 +5927,8 @@ const Mt = {
               "button",
               {
                 className: "layer-btn delete",
-                onClick: (N) => {
-                  N.stopPropagation(), s(n.id);
+                onClick: (T) => {
+                  T.stopPropagation(), s(d.id);
                 },
                 title: "Delete",
                 children: "×"
@@ -5937,36 +5937,36 @@ const Mt = {
           ] })
         ]
       },
-      n.id
+      d.id
     )) })
   ] });
 };
-class ci {
+class oi {
   constructor() {
     this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d");
   }
   // Add this method to the ExportManager class
-  async exportAllSections(o, a, d, s, h = "png", g = !0) {
+  async exportAllSections(o, a, n, s, h = "png", x = !0) {
     const l = {};
-    for (const n of a) {
-      const F = n.id || n.sectionName, N = o[F];
-      if (!N || !N.elements || N.elements.length === 0) {
+    for (const d of a) {
+      const F = d.id || d.sectionName, T = o[F];
+      if (!T || !T.elements || T.elements.length === 0) {
         console.log(`Skipping section ${F} - no elements`);
         continue;
       }
-      if (this.canvas.width = d, this.canvas.height = s, this.ctx.clearRect(0, 0, d, s), g) {
-        const m = n.image || n.sectionImage;
-        if (m)
+      if (this.canvas.width = n, this.canvas.height = s, this.ctx.clearRect(0, 0, n, s), x) {
+        const u = d.image || d.sectionImage;
+        if (u)
           try {
-            const E = await this.loadImage(m);
-            await this.processImageColor(E, N.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, d, s);
+            const E = await this.loadImage(u);
+            await this.processImageColor(E, T.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, n, s);
           } catch (E) {
             console.warn("Failed to load background image:", E);
           }
       } else
-        this.ctx.clearRect(0, 0, d, s);
-      for (const m of N.elements)
-        await this.drawElement(m);
+        this.ctx.clearRect(0, 0, n, s);
+      for (const u of T.elements)
+        await this.drawElement(u);
       const R = this.canvas.toDataURL(`image/${h}`, h === "jpeg" ? 0.9 : void 0);
       l[F] = {
         dataUrl: R,
@@ -5977,57 +5977,57 @@ class ci {
   }
   // Also add a method to download all exports
   async downloadExports(o, a = "design") {
-    const d = Object.keys(o);
-    if (d.length === 0) {
+    const n = Object.keys(o);
+    if (n.length === 0) {
       alert("No designs to export");
       return;
     }
-    if (d.length === 1) {
-      const s = d[0], { blob: h } = o[s], g = URL.createObjectURL(h), l = document.createElement("a");
-      l.href = g, l.download = `${a}-${s}.png`, document.body.appendChild(l), l.click(), document.body.removeChild(l), URL.revokeObjectURL(g);
+    if (n.length === 1) {
+      const s = n[0], { blob: h } = o[s], x = URL.createObjectURL(h), l = document.createElement("a");
+      l.href = x, l.download = `${a}-${s}.png`, document.body.appendChild(l), l.click(), document.body.removeChild(l), URL.revokeObjectURL(x);
     } else
-      for (const s of d) {
-        const { blob: h } = o[s], g = URL.createObjectURL(h), l = document.createElement("a");
-        l.href = g, l.download = `${a}-${s}.png`, document.body.appendChild(l), l.click(), document.body.removeChild(l), URL.revokeObjectURL(g), await new Promise((n) => setTimeout(n, 100));
+      for (const s of n) {
+        const { blob: h } = o[s], x = URL.createObjectURL(h), l = document.createElement("a");
+        l.href = x, l.download = `${a}-${s}.png`, document.body.appendChild(l), l.click(), document.body.removeChild(l), URL.revokeObjectURL(x), await new Promise((d) => setTimeout(d, 100));
       }
   }
   async loadImage(o) {
-    return new Promise((a, d) => {
+    return new Promise((a, n) => {
       const s = new Image();
-      s.crossOrigin = "anonymous", s.onload = () => a(s), s.onerror = d, s.src = o;
+      s.crossOrigin = "anonymous", s.onload = () => a(s), s.onerror = n, s.src = o;
     });
   }
   // Update the processImageColor method in ExportManager class
   // Add the getLuma utility function at the top of the class
-  getLuma(o, a, d) {
-    return (0.2126 * o + 0.7152 * a + 0.0722 * d) / 255;
+  getLuma(o, a, n) {
+    return (0.2126 * o + 0.7152 * a + 0.0722 * n) / 255;
   }
   async processImageColor(o, a) {
-    const d = document.createElement("canvas"), s = d.getContext("2d");
-    d.width = o.width, d.height = o.height, s.clearRect(0, 0, d.width, d.height), s.drawImage(o, 0, 0);
-    const h = s.getImageData(0, 0, d.width, d.height), g = h.data, l = this.hexToRgb(a);
+    const n = document.createElement("canvas"), s = n.getContext("2d");
+    n.width = o.width, n.height = o.height, s.clearRect(0, 0, n.width, n.height), s.drawImage(o, 0, 0);
+    const h = s.getImageData(0, 0, n.width, n.height), x = h.data, l = this.hexToRgb(a);
     if (!l) {
       console.warn("Invalid target color:", a);
       return;
     }
-    const { r: n, g: F, b: N } = l;
-    for (let R = 0; R < g.length; R += 4) {
-      if (g[R + 3] === 0) continue;
-      const E = this.getLuma(g[R], g[R + 1], g[R + 2]);
-      g[R] = Math.round(n * E), g[R + 1] = Math.round(F * E), g[R + 2] = Math.round(N * E);
+    const { r: d, g: F, b: T } = l;
+    for (let R = 0; R < x.length; R += 4) {
+      if (x[R + 3] === 0) continue;
+      const E = this.getLuma(x[R], x[R + 1], x[R + 2]);
+      x[R] = Math.round(d * E), x[R + 1] = Math.round(F * E), x[R + 2] = Math.round(T * E);
     }
     return s.putImageData(h, 0, 0), this.processedImage = new Image(), new Promise((R) => {
       this.processedImage.onload = () => {
         R();
       }, this.processedImage.onerror = () => {
         console.error("Failed to create processed image"), R();
-      }, this.processedImage.src = d.toDataURL("image/png");
+      }, this.processedImage.src = n.toDataURL("image/png");
     });
   }
   async drawElement(o) {
     this.ctx.save();
-    const a = o.x + o.width / 2, d = o.y + o.height / 2;
-    switch (this.ctx.translate(a, d), o.rotation && this.ctx.rotate(o.rotation * Math.PI / 180), this.ctx.translate(-o.width / 2, -o.height / 2), o.type) {
+    const a = o.x + o.width / 2, n = o.y + o.height / 2;
+    switch (this.ctx.translate(a, n), o.rotation && this.ctx.rotate(o.rotation * Math.PI / 180), this.ctx.translate(-o.width / 2, -o.height / 2), o.type) {
       case "text":
         this.drawText(o);
         break;
@@ -6088,41 +6088,41 @@ class ci {
   drawText(o) {
     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(`
-`), d = (o.fontSize || 20) * 1.2;
+`), n = (o.fontSize || 20) * 1.2;
     a.forEach((s, h) => {
-      const g = h * d;
-      o.stroke && o.strokeWidth > 0 && this.ctx.strokeText(s, 0, g), this.ctx.fillText(s, 0, g);
+      const x = h * n;
+      o.stroke && o.strokeWidth > 0 && this.ctx.strokeText(s, 0, x), this.ctx.fillText(s, 0, x);
     });
   }
   drawRectangle(o) {
     o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fillRect(0, 0, o.width, o.height)), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.strokeRect(0, 0, o.width, o.height));
   }
   drawCircle(o) {
-    const a = Math.min(o.width, o.height) / 2, d = o.width / 2, s = o.height / 2;
-    this.ctx.beginPath(), this.ctx.arc(d, s, a, 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 = Math.min(o.width, o.height) / 2, n = o.width / 2, s = o.height / 2;
+    this.ctx.beginPath(), this.ctx.arc(n, s, a, 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());
   }
   drawTriangle(o) {
     const a = o.width / 2;
     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, d = o.height / 2, s = Math.min(o.width, o.height) / 2, h = s * 0.4, g = o.numPoints || 5;
+    const a = o.width / 2, n = o.height / 2, s = Math.min(o.width, o.height) / 2, h = s * 0.4, x = o.numPoints || 5;
     this.ctx.beginPath();
-    for (let l = 0; l < g * 2; l++) {
-      const n = l % 2 === 0 ? s : h, F = l * Math.PI / g, N = a + Math.cos(F) * n, R = d + Math.sin(F) * n;
-      l === 0 ? this.ctx.moveTo(N, R) : this.ctx.lineTo(N, R);
+    for (let l = 0; l < x * 2; l++) {
+      const d = l % 2 === 0 ? s : h, F = l * Math.PI / x, T = a + Math.cos(F) * d, R = n + Math.sin(F) * d;
+      l === 0 ? this.ctx.moveTo(T, R) : this.ctx.lineTo(T, R);
     }
     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());
   }
   drawArrow(o) {
-    const a = o.width, d = o.height, s = a * 0.3;
-    this.ctx.beginPath(), this.ctx.moveTo(a / 2, 0), this.ctx.lineTo(a, d * 0.6), this.ctx.lineTo(a - s, d * 0.6), this.ctx.lineTo(a - s, d), this.ctx.lineTo(s, d), this.ctx.lineTo(s, d * 0.6), this.ctx.lineTo(0, d * 0.6), 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());
+    const a = o.width, n = o.height, s = a * 0.3;
+    this.ctx.beginPath(), this.ctx.moveTo(a / 2, 0), this.ctx.lineTo(a, n * 0.6), this.ctx.lineTo(a - s, n * 0.6), this.ctx.lineTo(a - s, n), this.ctx.lineTo(s, n), this.ctx.lineTo(s, n * 0.6), this.ctx.lineTo(0, n * 0.6), 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());
   }
   async dataUrlToBlob(o) {
     return new Promise((a) => {
-      const d = document.createElement("canvas"), s = d.getContext("2d"), h = new Image();
+      const n = document.createElement("canvas"), s = n.getContext("2d"), h = new Image();
       h.onload = () => {
-        d.width = h.width, d.height = h.height, s.drawImage(h, 0, 0), d.toBlob(a);
+        n.width = h.width, n.height = h.height, s.drawImage(h, 0, 0), n.toBlob(a);
       }, h.src = o;
     });
   }
@@ -6136,71 +6136,71 @@ class ci {
   }
   // Add the new shape drawing methods to ExportManager
   drawDiamond(o) {
-    const a = o.width / 2, d = o.height / 2;
-    this.ctx.beginPath(), this.ctx.moveTo(a, 0), this.ctx.lineTo(o.width, d), this.ctx.lineTo(a, o.height), this.ctx.lineTo(0, d), 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());
+    const a = o.width / 2, n = o.height / 2;
+    this.ctx.beginPath(), this.ctx.moveTo(a, 0), this.ctx.lineTo(o.width, n), this.ctx.lineTo(a, o.height), this.ctx.lineTo(0, n), 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, d = o.height / 2, s = Math.min(o.width, o.height) / 2, h = 6;
+    const a = o.width / 2, n = o.height / 2, s = Math.min(o.width, o.height) / 2, h = 6;
     this.ctx.beginPath();
-    for (let g = 0; g < h; g++) {
-      const l = g * 2 * Math.PI / h - Math.PI / 2, n = a + s * Math.cos(l), F = d + s * Math.sin(l);
-      g === 0 ? this.ctx.moveTo(n, F) : this.ctx.lineTo(n, F);
+    for (let x = 0; x < h; x++) {
+      const l = x * 2 * Math.PI / h - Math.PI / 2, d = a + s * Math.cos(l), F = n + s * Math.sin(l);
+      x === 0 ? this.ctx.moveTo(d, F) : this.ctx.lineTo(d, 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, d = o.height / 2, s = Math.min(o.width, o.height) / 2, h = 5;
+    const a = o.width / 2, n = o.height / 2, s = Math.min(o.width, o.height) / 2, h = 5;
     this.ctx.beginPath();
-    for (let g = 0; g < h; g++) {
-      const l = g * 2 * Math.PI / h - Math.PI / 2, n = a + s * Math.cos(l), F = d + s * Math.sin(l);
-      g === 0 ? this.ctx.moveTo(n, F) : this.ctx.lineTo(n, F);
+    for (let x = 0; x < h; x++) {
+      const l = x * 2 * Math.PI / h - Math.PI / 2, d = a + s * Math.cos(l), F = n + s * Math.sin(l);
+      x === 0 ? this.ctx.moveTo(d, F) : this.ctx.lineTo(d, 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, d = o.height, s = 0, h = 0;
+    const a = o.width, n = o.height, s = 0, h = 0;
     this.ctx.beginPath();
-    const g = d * 0.3;
-    this.ctx.moveTo(s + a / 2, h + g), this.ctx.bezierCurveTo(
+    const x = n * 0.3;
+    this.ctx.moveTo(s + a / 2, h + x), this.ctx.bezierCurveTo(
       s + a / 2,
       h,
       s,
       h,
       s,
-      h + g
+      h + x
     ), this.ctx.bezierCurveTo(
       s,
-      h + (d + g) / 2,
+      h + (n + x) / 2,
       s + a / 2,
-      h + (d + g) / 2,
+      h + (n + x) / 2,
       s + a / 2,
-      h + d
+      h + n
     ), this.ctx.bezierCurveTo(
       s + a / 2,
-      h + (d + g) / 2,
+      h + (n + x) / 2,
       s + a,
-      h + (d + g) / 2,
+      h + (n + x) / 2,
       s + a,
-      h + g
+      h + x
     ), this.ctx.bezierCurveTo(
       s + a,
       h,
       s + a / 2,
       h,
       s + a / 2,
-      h + g
+      h + x
     ), this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
   drawOval(o) {
-    const a = o.width / 2, d = o.height / 2, s = o.width / 2, h = o.height / 2;
-    this.ctx.beginPath(), this.ctx.ellipse(a, d, 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, n = o.height / 2, s = o.width / 2, h = o.height / 2;
+    this.ctx.beginPath(), this.ctx.ellipse(a, n, 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());
   }
   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, d, s, h) {
-    this.ctx.beginPath(), this.ctx.moveTo(o + h, a), this.ctx.lineTo(o + d - h, a), this.ctx.quadraticCurveTo(o + d, a, o + d, a + h), this.ctx.lineTo(o + d, a + s - h), this.ctx.quadraticCurveTo(o + d, a + s, o + d - 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, n, s, h) {
+    this.ctx.beginPath(), this.ctx.moveTo(o + h, a), this.ctx.lineTo(o + n - h, a), this.ctx.quadraticCurveTo(o + n, a, o + n, a + h), this.ctx.lineTo(o + n, a + s - h), this.ctx.quadraticCurveTo(o + n, a + s, o + n - 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();
   }
   async drawQRCode(o) {
     if (o.imageObject)
@@ -6239,8 +6239,8 @@ class ci {
       else if (o.imageData)
         a = o.imageData;
       else if (o.src || o.image) {
-        const d = o.src || o.image;
-        a = await this.loadImage(d);
+        const n = o.src || o.image;
+        a = await this.loadImage(n);
       } else o.data && o.data.image && (a = await this.loadImage(o.data.image));
       a ? (o.opacity !== void 0 && (this.ctx.globalAlpha = o.opacity), this.ctx.drawImage(a, 0, 0, o.width, o.height)) : (this.ctx.fillStyle = "#f0f0f0", this.ctx.fillRect(0, 0, o.width, o.height), this.ctx.strokeStyle = "#ccc", 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("Sticker", o.width / 2, o.height / 2));
     } catch (a) {
@@ -6255,8 +6255,8 @@ class ci {
       else if (o.imageData)
         a = o.imageData;
       else if (o.src || o.image) {
-        const d = o.src || o.image;
-        a = await this.loadImage(d);
+        const n = o.src || o.image;
+        a = await this.loadImage(n);
       } else o.data && o.data.image && (a = await this.loadImage(o.data.image));
       a ? (o.opacity !== void 0 && (this.ctx.globalAlpha = o.opacity), this.ctx.drawImage(a, 0, 0, o.width, o.height)) : (this.ctx.fillStyle = "#f0f0f0", this.ctx.fillRect(0, 0, o.width, o.height), this.ctx.strokeStyle = "#ccc", 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("Embroidery", o.width / 2, o.height / 2));
     } catch (a) {
@@ -6266,88 +6266,88 @@ class ci {
   /**Export to JSON formats**/
   // Add these new methods to the ExportManager class
   // Helper method to convert blob to File
-  async blobToFile(o, a, d = "image/png") {
+  async blobToFile(o, a, n = "image/png") {
     return new File([o], a, {
-      type: d,
+      type: n,
       lastModified: Date.now()
     });
   }
   // Export all sections as JSON with File objects
-  async exportAllSectionsAsJSON(o, a, d, s, h = "png") {
-    const g = [], l = [];
+  async exportAllSectionsAsJSON(o, a, n, s, h = "png") {
+    const x = [], l = [];
     for (const F of a) {
-      const N = F.id || F.sectionName, R = o[N];
+      const T = F.id || F.sectionName, R = o[T];
       if (!R || !R.elements || R.elements.length === 0) {
-        console.log(`Skipping section ${N} - no elements`);
+        console.log(`Skipping section ${T} - no elements`);
         continue;
       }
-      const m = await this.exportSectionAsBlob(
+      const u = await this.exportSectionAsBlob(
         R,
         F,
-        d,
+        n,
         s,
         h,
         !0
       );
-      if (m) {
-        const B = await this.blobToFile(
-          m,
-          `${N}-full.${h}`,
+      if (u) {
+        const z = await this.blobToFile(
+          u,
+          `${T}-full.${h}`,
           `image/${h}`
         );
-        g.push({
-          sectionName: N,
-          sectionImage: B
+        x.push({
+          sectionName: T,
+          sectionImage: z
         });
       }
       const E = await this.exportSectionAsBlob(
         R,
         F,
-        d,
+        n,
         s,
         h,
         !1
       );
       if (E) {
-        const B = await this.blobToFile(
+        const z = await this.blobToFile(
           E,
-          `${N}-print.${h}`,
+          `${T}-print.${h}`,
           `image/${h}`
         );
         l.push({
-          sectionName: N,
-          sectionImage: B
+          sectionName: T,
+          sectionImage: z
         });
       }
     }
-    const n = {
+    const d = {
       sections: o,
-      canvasWidth: d,
+      canvasWidth: n,
       canvasHeight: s,
       format: h,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       version: "1.0"
     };
     return {
-      fullDesign: g,
+      fullDesign: x,
       printReady: l,
-      designFile: JSON.stringify(n)
+      designFile: JSON.stringify(d)
     };
   }
   // Helper method to export a single section as blob
-  async exportSectionAsBlob(o, a, d, s, h = "png", g = !0) {
+  async exportSectionAsBlob(o, a, n, s, h = "png", x = !0) {
     try {
-      if (this.canvas.width = d, this.canvas.height = s, this.ctx.clearRect(0, 0, d, s), g) {
+      if (this.canvas.width = n, this.canvas.height = s, this.ctx.clearRect(0, 0, n, s), x) {
         const l = a.image || a.sectionImage;
         if (l)
           try {
-            const n = await this.loadImage(l);
-            await this.processImageColor(n, o.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, d, s);
-          } catch (n) {
-            console.warn("Failed to load background image:", n);
+            const d = await this.loadImage(l);
+            await this.processImageColor(d, o.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, n, s);
+          } catch (d) {
+            console.warn("Failed to load background image:", d);
           }
       } else
-        this.ctx.clearRect(0, 0, d, s);
+        this.ctx.clearRect(0, 0, n, s);
       for (const l of o.elements)
         await this.drawElement(l);
       return new Promise((l) => {
@@ -6357,35 +6357,81 @@ class ci {
       return console.error("Error exporting section as blob:", l), null;
     }
   }
-  // Export current section as JSON
+  // Add this method to the ExportManager class
   async exportCurrentSectionAsJSON(o, a = "png") {
-    var h, g, l, n, F;
-    const d = {
-      [((h = o.activeSection) == null ? void 0 : h.sectionName) || "main"]: o
-    }, s = [{
-      id: ((g = o.activeSection) == null ? void 0 : g.sectionName) || "main",
-      sectionName: ((l = o.activeSection) == null ? void 0 : l.sectionName) || "main",
-      image: (n = o.activeSection) == null ? void 0 : n.sectionImage,
-      sectionImage: (F = o.activeSection) == null ? void 0 : F.sectionImage
-    }];
-    return await this.exportAllSectionsAsJSON(
-      d,
+    var R, u, E;
+    const n = ((R = o.activeSection) == null ? void 0 : R.sectionName) || "main", s = {
+      elements: o.elements,
+      selectedColor: o.selectedColor,
+      canvasWidth: o.canvasWidth,
+      canvasHeight: o.canvasHeight
+    }, h = {
+      id: n,
+      sectionName: n,
+      image: (u = o.activeSection) == null ? void 0 : u.sectionImage,
+      sectionImage: (E = o.activeSection) == null ? void 0 : E.sectionImage
+    }, x = [], l = [], d = await this.exportSectionAsBlob(
+      s,
+      h,
+      o.canvasWidth,
+      o.canvasHeight,
+      a,
+      !0
+    );
+    if (d) {
+      const z = await this.blobToFile(
+        d,
+        `${n}-full.${a}`,
+        `image/${a}`
+      );
+      x.push({
+        sectionName: n,
+        sectionImage: z
+      });
+    }
+    const F = await this.exportSectionAsBlob(
       s,
+      h,
       o.canvasWidth,
       o.canvasHeight,
-      a
+      a,
+      !1
     );
+    if (F) {
+      const z = await this.blobToFile(
+        F,
+        `${n}-print.${a}`,
+        `image/${a}`
+      );
+      l.push({
+        sectionName: n,
+        sectionImage: z
+      });
+    }
+    const T = {
+      sections: { [n]: s },
+      canvasWidth: o.canvasWidth,
+      canvasHeight: o.canvasHeight,
+      format: a,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      version: "1.0"
+    };
+    return {
+      fullDesign: x,
+      printReady: l,
+      designFile: JSON.stringify(T)
+    };
   }
 }
-class di {
+class ri {
   constructor(o = "localStorage") {
     this.storage = o === "sessionStorage" ? sessionStorage : localStorage, this.STORAGE_PREFIX = "mypixia_canvas_", this.DESIGNS_LIST_KEY = "mypixia_saved_designs";
   }
   // Save complete canvas design
   saveDesign(o, a) {
-    var d;
+    var n;
     try {
-      const s = this.generateDesignId(o), h = (/* @__PURE__ */ new Date()).toISOString(), g = {
+      const s = this.generateDesignId(o), h = (/* @__PURE__ */ new Date()).toISOString(), x = {
         id: s,
         name: o,
         timestamp: h,
@@ -6403,12 +6449,12 @@ class di {
           snapToGrid: a.snapToGrid || !0
         },
         metadata: {
-          elementCount: ((d = a.elements) == null ? void 0 : d.length) || 0,
+          elementCount: ((n = a.elements) == null ? void 0 : n.length) || 0,
           lastModified: h,
           thumbnail: a.thumbnail || null
         }
       };
-      return this.storage.setItem(this.STORAGE_PREFIX + s, JSON.stringify(g)), this.updateDesignsList(s, o, h), { success: !0, designId: s, message: "Design saved successfully" };
+      return this.storage.setItem(this.STORAGE_PREFIX + s, JSON.stringify(x)), this.updateDesignsList(s, o, h), { success: !0, designId: s, message: "Design saved successfully" };
     } catch (s) {
       return console.error("Error saving design:", s), { success: !1, error: s.message };
     }
@@ -6418,13 +6464,13 @@ class di {
     try {
       let a = o;
       if (!o.startsWith("design_")) {
-        const g = this.getAllDesigns().find((l) => l.name === o);
-        if (!g)
+        const x = this.getAllDesigns().find((l) => l.name === o);
+        if (!x)
           return { success: !1, error: "Design not found" };
-        a = g.id;
+        a = x.id;
       }
-      const d = this.storage.getItem(this.STORAGE_PREFIX + a);
-      return d ? { success: !0, data: JSON.parse(d) } : { success: !1, error: "Design not found" };
+      const n = this.storage.getItem(this.STORAGE_PREFIX + a);
+      return n ? { success: !0, data: JSON.parse(n) } : { success: !1, error: "Design not found" };
     } catch (a) {
       return console.error("Error loading design:", a), { success: !1, error: a.message };
     }
@@ -6442,8 +6488,8 @@ class di {
   deleteDesign(o) {
     try {
       this.storage.removeItem(this.STORAGE_PREFIX + o);
-      const d = this.getAllDesigns().filter((s) => s.id !== o);
-      return this.storage.setItem(this.DESIGNS_LIST_KEY, JSON.stringify(d)), { success: !0, message: "Design deleted successfully" };
+      const n = this.getAllDesigns().filter((s) => s.id !== o);
+      return this.storage.setItem(this.DESIGNS_LIST_KEY, JSON.stringify(n)), { success: !0, message: "Design deleted successfully" };
     } catch (a) {
       return console.error("Error deleting design:", a), { success: !1, error: a.message };
     }
@@ -6454,8 +6500,8 @@ class di {
       const a = this.loadDesign(o);
       if (!a.success)
         return a;
-      const d = a.data, s = JSON.stringify(d, null, 2), h = new Blob([s], { type: "application/json" }), g = URL.createObjectURL(h), l = document.createElement("a");
-      return l.href = g, l.download = `${d.name}_${d.id}.json`, document.body.appendChild(l), l.click(), document.body.removeChild(l), URL.revokeObjectURL(g), { success: !0, message: "Design exported successfully" };
+      const n = a.data, s = JSON.stringify(n, null, 2), h = new Blob([s], { type: "application/json" }), x = URL.createObjectURL(h), l = document.createElement("a");
+      return l.href = x, l.download = `${n.name}_${n.id}.json`, document.body.appendChild(l), l.click(), document.body.removeChild(l), URL.revokeObjectURL(x), { success: !0, message: "Design exported successfully" };
     } catch (a) {
       return console.error("Error exporting design:", a), { success: !1, error: a.message };
     }
@@ -6464,34 +6510,34 @@ class di {
   importDesignFromFile(o) {
     return new Promise((a) => {
       try {
-        const d = new FileReader();
-        d.onload = (s) => {
+        const n = new FileReader();
+        n.onload = (s) => {
           try {
             const h = JSON.parse(s.target.result);
             if (!this.validateDesignData(h)) {
               a({ success: !1, error: "Invalid design file format" });
               return;
             }
-            const g = this.generateDesignId(h.name + "_imported");
-            h.id = g, h.name += "_imported", h.timestamp = (/* @__PURE__ */ new Date()).toISOString(), h.metadata.lastModified = h.timestamp, this.storage.setItem(this.STORAGE_PREFIX + g, JSON.stringify(h)), this.updateDesignsList(g, h.name, h.timestamp), a({ success: !0, data: h, message: "Design imported successfully" });
+            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" });
           } catch {
             a({ success: !1, error: "Failed to parse design file" });
           }
-        }, d.readAsText(o);
-      } catch (d) {
-        a({ success: !1, error: d.message });
+        }, n.readAsText(o);
+      } catch (n) {
+        a({ success: !1, error: n.message });
       }
     });
   }
   // Auto-save functionality
   autoSave(o, a) {
-    const d = this.STORAGE_PREFIX + "autosave_" + o;
+    const n = this.STORAGE_PREFIX + "autosave_" + o;
     try {
       const s = {
         timestamp: (/* @__PURE__ */ new Date()).toISOString(),
         canvasData: a
       };
-      return this.storage.setItem(d, JSON.stringify(s)), !0;
+      return this.storage.setItem(n, JSON.stringify(s)), !0;
     } catch (s) {
       return console.error("Auto-save failed:", s), !1;
     }
@@ -6500,10 +6546,10 @@ class di {
   loadAutoSave(o) {
     const a = this.STORAGE_PREFIX + "autosave_" + o;
     try {
-      const d = this.storage.getItem(a);
-      return d ? JSON.parse(d) : null;
-    } catch (d) {
-      return console.error("Failed to load auto-save:", d), null;
+      const n = this.storage.getItem(a);
+      return n ? JSON.parse(n) : null;
+    } catch (n) {
+      return console.error("Failed to load auto-save:", n), null;
     }
   }
   // Clear auto-save
@@ -6515,8 +6561,8 @@ class di {
   getStorageInfo() {
     const o = this.getAllDesigns();
     let a = 0;
-    return o.forEach((d) => {
-      const s = this.storage.getItem(this.STORAGE_PREFIX + d.id);
+    return o.forEach((n) => {
+      const s = this.storage.getItem(this.STORAGE_PREFIX + n.id);
       s && (a += new Blob([s]).size);
     }), {
       designCount: o.length,
@@ -6537,25 +6583,25 @@ class di {
   }
   // Private helper methods
   generateDesignId(o) {
-    const a = Date.now(), d = Math.random().toString(36).substring(2, 8);
-    return `design_${a}_${d}`;
+    const a = Date.now(), n = Math.random().toString(36).substring(2, 8);
+    return `design_${a}_${n}`;
   }
-  updateDesignsList(o, a, d) {
-    const s = this.getAllDesigns(), h = s.findIndex((l) => l.id === o), g = {
+  updateDesignsList(o, a, n) {
+    const s = this.getAllDesigns(), h = s.findIndex((l) => l.id === o), x = {
       id: o,
       name: a,
-      timestamp: d,
-      lastModified: d
+      timestamp: n,
+      lastModified: n
     };
-    h >= 0 ? s[h] = g : s.push(g), s.sort((l, n) => new Date(n.timestamp) - new Date(l.timestamp)), this.storage.setItem(this.DESIGNS_LIST_KEY, JSON.stringify(s));
+    h >= 0 ? s[h] = x : s.push(x), s.sort((l, d) => new Date(d.timestamp) - new Date(l.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);
   }
   formatBytes(o) {
     if (o === 0) return "0 Bytes";
-    const a = 1024, d = ["Bytes", "KB", "MB", "GB"], s = Math.floor(Math.log(o) / Math.log(a));
-    return parseFloat((o / Math.pow(a, s)).toFixed(2)) + " " + d[s];
+    const a = 1024, n = ["Bytes", "KB", "MB", "GB"], s = Math.floor(Math.log(o) / Math.log(a));
+    return parseFloat((o / Math.pow(a, s)).toFixed(2)) + " " + n[s];
   }
   getStorageLimit() {
     try {
@@ -6567,14 +6613,14 @@ class di {
     return "Unknown";
   }
 }
-const fi = $e((f, o) => {
+const ai = Me((f, o) => {
   const {
     theme: a = {
       primaryColor: "#000000",
       secondaryColor: "#cf7e52",
       tertiaryColor: "#FFFFFF"
     },
-    canvasId: d = null,
+    canvasId: n = null,
     readOnly: s = !1,
     product: h = {
       name: "Premium Crew Neck T-Shirt",
@@ -6598,64 +6644,51 @@ const fi = $e((f, o) => {
         }
       ]
     }
-  } = f, [g, l] = j([]), [n, F] = j(null), [N, R] = j(!1), [m, E] = j(!1), [B, S] = j(!1), [T, J] = j({ x: 0, y: 0 }), [C, $] = j(null), [k, st] = j(800), [M, ht] = j(600), [O, ct] = j(1), [Q, rt] = j(h.colorSettings[0]), [P, lt] = j(!1), [X, nt] = j(!0), [_, U] = j(!0), [u, K] = j(h.sections[0]), [y, I] = j(!1), [W, H] = j({}), [G, Z] = j([]), [q, Y] = j(-1), [L] = j(new di("localStorage")), [ot, jt] = j(!0), [Wt, Lt] = j(null), yt = ft(null), ne = ft(null), xt = ft(null), ut = ft(null), Pt = ft(null), Rt = ft(new ci()), bt = ft(!1), kt = ft(null), at = et(() => {
+  } = f, [x, l] = N([]), [d, F] = N(null), [T, R] = N(!1), [u, E] = N(!1), [z, S] = N(!1), [j, K] = N({ x: 0, y: 0 }), [C, Q] = N(null), [k, st] = N(800), [W, ht] = N(600), [O, ct] = N(1), [$, ot] = N(h.colorSettings[0]), [L, lt] = N(!1), [J, nt] = N(!0), [_, P] = N(!0), [p, Z] = N(h.sections[0]), [y, I] = N(!1), [M, H] = N({}), [G, tt] = N([]), [q, Y] = N(-1), [U] = N(new ri("localStorage")), X = xt(null), bt = xt(null), ft = xt(null), yt = xt(null), Bt = xt(null), It = xt(new oi()), pt = xt(!1), rt = at(() => {
     const e = {
-      elements: JSON.parse(JSON.stringify(g)),
-      selectedElement: n ? { ...n } : null,
+      elements: JSON.parse(JSON.stringify(x)),
+      selectedElement: d ? { ...d } : null,
       timestamp: Date.now()
     }, t = G.slice(0, q + 1);
-    t.push(e), t.length > 50 ? t.shift() : Y(q + 1), Z(t);
-  }, [g, n, G, q]), wt = et(() => ({
-    elements: g,
+    t.push(e), t.length > 50 ? t.shift() : Y(q + 1), tt(t);
+  }, [x, d, G, q]), vt = at(() => ({
+    elements: x,
     canvasWidth: k,
-    canvasHeight: M,
-    selectedColor: Q,
-    activeSection: u,
+    canvasHeight: W,
+    selectedColor: $,
+    activeSection: p,
     product: h,
-    sectionDesigns: W,
+    sectionDesigns: M,
     zoomLevel: O,
-    showGrid: P,
+    showGrid: L,
     snapToGrid: _,
-    selectedElement: n ? { ...n } : null,
-    canvasRef: yt
+    selectedElement: d ? { ...d } : null,
+    canvasRef: X
     // Include reference for thumbnail generation
-  }), [g, k, M, Q, u, h, W, O, P, _, n]);
-  et((e, t) => {
-    Lt((/* @__PURE__ */ new Date()).toISOString()), t && L.clearAutoSave(t), console.log("Design saved:", e, t);
-  }, [L]), et((e, t) => {
-    var r;
+  }), [x, k, W, $, p, h, M, O, L, _, d]);
+  at((e, t) => {
     try {
-      l(e.elements || []), st(e.canvasWidth || 800), ht(e.canvasHeight || 600), rt(e.selectedColor || h.colorSettings[0]), ct(e.zoomLevel || 1), lt(e.showGrid || !1), U(e.snapToGrid || !0), F(null), e.sectionDesigns && H(e.sectionDesigns), e.activeSection && K(e.activeSection), Z([]), Y(-1), setTimeout(() => {
-        at();
-      }, 100), Lt(((r = t.metadata) == null ? void 0 : r.lastModified) || (/* @__PURE__ */ new Date()).toISOString()), console.log("Design loaded successfully:", t.name);
-    } catch (c) {
-      console.error("Error loading design:", c);
+      l(e.elements || []), st(e.canvasWidth || 800), ht(e.canvasHeight || 600), ot(e.selectedColor || h.colorSettings[0]), ct(e.zoomLevel || 1), lt(e.showGrid || !1), P(e.snapToGrid || !0), F(null), e.sectionDesigns && H(e.sectionDesigns), e.activeSection && Z(e.activeSection), tt([]), Y(-1), setTimeout(() => {
+        rt();
+      }, 100);
+    } catch (r) {
+      console.error("Error loading design:", r);
     }
-  }, [h.colorSettings, at]);
-  const Ut = et(() => {
-    if (!ot || g.length === 0) return;
-    const e = `autosave_${(u == null ? void 0 : u.sectionName) || "main"}_${Date.now()}`, t = wt();
-    L.autoSave(e, t) && console.log("Auto-saved at:", (/* @__PURE__ */ new Date()).toLocaleTimeString());
-  }, [ot, g.length, u == null ? void 0 : u.sectionName, wt, L]);
-  it(() => (ot && g.length > 0 && (kt.current && clearTimeout(kt.current), kt.current = setTimeout(() => {
-    Ut();
-  }, 3e4)), () => {
-    kt.current && clearTimeout(kt.current);
-  }), [g, Q, u, ot, Ut]), it(() => {
+  }, [h.colorSettings, rt]), it(() => {
     const t = setTimeout(() => {
-      if (g.length === 0 && G.length <= 1) {
-        const c = "Arial", x = "Change me", w = document.createElement("canvas").getContext("2d");
+      if (x.length === 0 && G.length <= 1) {
+        const c = "Arial", g = "Change me", w = document.createElement("canvas").getContext("2d");
         w.font = `24px ${c}`;
-        const b = w.measureText(x).width, A = {
+        const b = w.measureText(g).width, A = {
           id: dt(),
           type: "text",
           x: k / 2 - b / 2,
           // Center the actual text width
-          y: M / 2 - 24 / 2,
+          y: W / 2 - 24 / 2,
           // Center based on font size
           width: b,
           height: 24,
-          text: x,
+          text: g,
           fontSize: 24,
           fontFamily: c,
           fontWeight: "normal",
@@ -6669,28 +6702,28 @@ const fi = $e((f, o) => {
           opacity: 1
         };
         l([A]), F(A), setTimeout(() => {
-          at();
+          rt();
         }, 100);
       }
     }, 300);
     return () => clearTimeout(t);
   }, []);
-  const Et = et((e = "png", t = !0) => {
-    const r = wt();
-    return h.sections, Rt.current.exportAllSections(
-      { [(u == null ? void 0 : u.sectionName) || "main"]: r },
+  const Rt = at((e = "png", t = !0) => {
+    const r = vt();
+    return h.sections, It.current.exportAllSections(
+      { [(p == null ? void 0 : p.sectionName) || "main"]: r },
       [{
-        id: (u == null ? void 0 : u.sectionName) || "main",
-        sectionName: (u == null ? void 0 : u.sectionName) || "main",
-        image: u == null ? void 0 : u.sectionImage,
-        sectionImage: u == null ? void 0 : u.sectionImage
+        id: (p == null ? void 0 : p.sectionName) || "main",
+        sectionName: (p == null ? void 0 : p.sectionName) || "main",
+        image: p == null ? void 0 : p.sectionImage,
+        sectionImage: p == null ? void 0 : p.sectionImage
       }],
       k,
-      M,
+      W,
       e,
       t
     );
-  }, [wt, h.sections, u, k, M]), ce = [
+  }, [vt, h.sections, p, k, W]), oe = [
     "Arial",
     "Helvetica",
     "Times New Roman",
@@ -6706,19 +6739,19 @@ const fi = $e((f, o) => {
     "Bookman",
     "Avant Garde",
     "Century Gothic"
-  ], Nt = 20;
+  ], jt = 20;
   it(() => {
     const e = () => I(window.innerWidth < 768);
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []), it(() => {
     const e = document.createElement("canvas");
-    e.width = k, e.height = M, Pt.current = e;
-  }, [k, M]), it(() => {
-    G.length === 0 && at();
+    e.width = k, e.height = W, Bt.current = e;
+  }, [k, W]), it(() => {
+    G.length === 0 && rt();
   }, []);
-  const At = (e, t, r, c, x, p) => {
-    e.beginPath(), e.moveTo(t + p, r), e.lineTo(t + c - p, r), e.quadraticCurveTo(t + c, r, t + c, r + p), e.lineTo(t + c, r + x - p), e.quadraticCurveTo(t + c, r + x, t + c - p, r + x), e.lineTo(t + p, r + x), e.quadraticCurveTo(t, r + x, t, r + x - p), e.lineTo(t, r + p), e.quadraticCurveTo(t, r, t + p, r), e.closePath();
-  }, Ot = (e, t) => {
+  const Tt = (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();
+  }, Wt = (e, t) => {
     if (!t.isIcon)
       return {
         x: t.x,
@@ -6729,11 +6762,11 @@ 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, x = r.actualBoundingBoxDescent ?? t.fontSize * 0.2, p = r.actualBoundingBoxLeft ?? 0, w = r.actualBoundingBoxRight ?? r.width, v = p + w, b = c + x, A = t.x, D = t.y, z = A - v / 2 - p, tt = D - b / 2 - c;
-    return e.restore(), { x: z, y: tt, width: v, height: b, cx: A, cy: D };
-  }, de = (e, t) => {
+    const r = e.measureText(t.text), c = r.actualBoundingBoxAscent ?? t.fontSize * 0.8, g = r.actualBoundingBoxDescent ?? t.fontSize * 0.2, m = r.actualBoundingBoxLeft ?? 0, w = r.actualBoundingBoxRight ?? r.width, v = m + w, b = c + g, A = t.x, D = t.y, B = A - v / 2 - m, et = D - b / 2 - c;
+    return e.restore(), { x: B, y: et, width: v, height: b, cx: A, cy: D };
+  }, re = (e, t) => {
     if (!t) return;
-    const r = 8, c = 8, x = 4, p = 30, w = Ot(e, t), v = t.isIcon ? Math.max(r, 12) : r, b = {
+    const r = 8, c = 8, g = 4, m = 30, w = Wt(e, t), v = t.isIcon ? Math.max(r, 12) : r, b = {
       x: -w.width / 2 - v,
       y: -w.height / 2 - v,
       w: w.width + v * 2,
@@ -6746,41 +6779,41 @@ const fi = $e((f, o) => {
       b.x + b.w,
       b.y + b.h
     );
-    A.addColorStop(0, "#3b82f6"), A.addColorStop(0.5, "#1d4ed8"), A.addColorStop(1, "#3b82f6"), e.strokeStyle = "rgba(59,130,246,.3)", e.lineWidth = 3, At(
+    A.addColorStop(0, "#3b82f6"), A.addColorStop(0.5, "#1d4ed8"), A.addColorStop(1, "#3b82f6"), e.strokeStyle = "rgba(59,130,246,.3)", e.lineWidth = 3, Tt(
       e,
       b.x - 1,
       b.y - 1,
       b.w + 2,
       b.h + 2,
-      x + 1
-    ), e.stroke(), e.strokeStyle = A, 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, [
+      g + 1
+    ), e.stroke(), e.strokeStyle = A, e.lineWidth = 2, e.setLineDash([8, 4]), Tt(e, b.x, b.y, b.w, b.h, g), e.stroke(), e.lineDashOffset = -(Date.now() / 50) % 12, e.strokeStyle = "#ffffff", e.lineWidth = 1, e.setLineDash([4, 8]), Tt(e, b.x, b.y, b.w, b.h, g), 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((tt) => {
+    ].forEach((et) => {
       e.fillStyle = "rgba(0,0,0,.2)", e.fillRect(
-        tt.x - c / 2 + 1,
-        tt.y - c / 2 + 1,
+        et.x - c / 2 + 1,
+        et.y - c / 2 + 1,
         c,
         c
       ), e.fillStyle = "#ffffff", e.fillRect(
-        tt.x - c / 2,
-        tt.y - c / 2,
+        et.x - c / 2,
+        et.y - c / 2,
         c,
         c
       ), e.strokeStyle = "#3b82f6", e.lineWidth = 1, e.strokeRect(
-        tt.x - c / 2,
-        tt.y - c / 2,
+        et.x - c / 2,
+        et.y - c / 2,
         c,
         c
       );
     });
-    const D = 0, z = b.y - p;
-    e.strokeStyle = "#3b82f6", e.lineWidth = 1, e.setLineDash([2, 2]), e.beginPath(), e.moveTo(D, z + 12), e.lineTo(D, b.y), e.stroke(), e.setLineDash([]), e.beginPath(), e.arc(D, 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(D, z, 6, -Math.PI / 2, Math.PI, !1), e.stroke(), e.beginPath(), e.moveTo(D - 6, z), e.lineTo(D - 3, z - 3), e.lineTo(D - 3, z + 3), e.closePath(), e.fillStyle = "#ffffff", e.fill(), e.restore();
-  }, fe = (e, t) => {
+    const D = 0, B = b.y - m;
+    e.strokeStyle = "#3b82f6", e.lineWidth = 1, e.setLineDash([2, 2]), e.beginPath(), e.moveTo(D, B + 12), e.lineTo(D, b.y), e.stroke(), e.setLineDash([]), e.beginPath(), e.arc(D, B, 12, 0, 2 * Math.PI), e.fillStyle = "#f59e0b", e.fill(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.stroke(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.beginPath(), e.arc(D, B, 6, -Math.PI / 2, Math.PI, !1), e.stroke(), e.beginPath(), e.moveTo(D - 6, B), e.lineTo(D - 3, B - 3), e.lineTo(D - 3, B + 3), e.closePath(), e.fillStyle = "#ffffff", e.fill(), e.restore();
+  }, ae = (e, t) => {
     if (!t) return [];
-    const r = Ot(e, t), c = t.isIcon ? Math.max(8, 12) : 8, x = 8, p = 30, w = (t.rotation || 0) * Math.PI / 180, v = {
+    const r = Wt(e, t), c = t.isIcon ? Math.max(8, 12) : 8, g = 8, m = 30, w = (t.rotation || 0) * Math.PI / 180, v = {
       x: -r.width / 2 - c,
       y: -r.height / 2 - c,
       w: r.width + c * 2,
@@ -6790,65 +6823,65 @@ const fi = $e((f, o) => {
       { x: v.x + v.w, y: v.y, type: "ne-resize" },
       { x: v.x + v.w, y: v.y + v.h, type: "se-resize" },
       { x: v.x, y: v.y + v.h, type: "sw-resize" },
-      { x: 0, y: v.y - p, type: "rotate" }
+      { x: 0, y: v.y - m, type: "rotate" }
     ], A = Math.cos(w), D = Math.sin(w);
-    return b.map((z) => ({
-      x: r.cx + (z.x * A - z.y * D),
-      y: r.cy + (z.x * D + z.y * A),
-      type: z.type,
-      size: z.type === "rotate" ? 24 : x
+    return b.map((B) => ({
+      x: r.cx + (B.x * A - B.y * D),
+      y: r.cy + (B.x * D + B.y * A),
+      type: B.type,
+      size: B.type === "rotate" ? 24 : g
     }));
-  }, Qt = (e, t, r) => {
+  }, Mt = (e, t, r) => {
     if (!r) return null;
-    const c = yt.current;
+    const c = X.current;
     if (!c) return null;
-    const x = c.getContext("2d"), p = fe(x, r);
-    for (const w of p) {
+    const g = c.getContext("2d"), m = ae(g, r);
+    for (const w of m) {
       const v = e - w.x, b = t - w.y;
       if (Math.sqrt(v * v + b * b) <= w.size / 2)
         return w.type;
     }
     return null;
-  }, St = et(() => {
+  }, kt = at(() => {
     if (q > 0) {
       const e = G[q - 1];
       l(e.elements), F(e.selectedElement), Y(q - 1);
     }
-  }, [G, q]), vt = et(() => {
+  }, [G, q]), wt = at(() => {
     if (q < G.length - 1) {
       const e = G[q + 1];
       l(e.elements), F(e.selectedElement), Y(q + 1);
     }
-  }, [G, q]), mt = (e) => _ ? Math.round(e / Nt) * Nt : e;
+  }, [G, q]), ut = (e) => _ ? Math.round(e / jt) * jt : e;
   it(() => {
-    if (u != null && u.sectionImage) {
-      xt.current = null, ut.current = null;
-      const e = yt.current;
-      e && (e.getContext("2d").clearRect(0, 0, k, M), console.log("cleared canvas"));
+    if (p != null && p.sectionImage) {
+      ft.current = null, yt.current = null;
+      const e = X.current;
+      e && (e.getContext("2d").clearRect(0, 0, k, W), console.log("cleared canvas"));
       const t = new Image();
       t.crossOrigin = "anonymous", t.onload = () => {
-        xt.current = t, It(t, Q);
+        ft.current = t, Nt(t, $);
       }, t.onerror = () => {
-        console.error("Failed to load background image:", u.sectionImage), V();
-      }, t.src = u.sectionImage;
+        console.error("Failed to load background image:", p.sectionImage), V();
+      }, t.src = p.sectionImage;
     } else
-      xt.current = null, ut.current = null, V();
-  }, [u == null ? void 0 : u.sectionImage]), it(() => {
+      ft.current = null, yt.current = null, V();
+  }, [p == null ? void 0 : p.sectionImage]), it(() => {
     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") && n && !s) {
+        if ((t.key === "Delete" || t.key === "Backspace") && d && !s) {
           t.preventDefault();
-          const x = n;
-          l((p) => p.filter((w) => w.id !== x.id)), F(null), at();
+          const g = d;
+          l((m) => m.filter((w) => w.id !== g.id)), F(null), rt();
         }
         if (t.ctrlKey || t.metaKey)
           switch (t.key) {
             case "z":
-              t.shiftKey ? (t.preventDefault(), vt()) : (t.preventDefault(), St());
+              t.shiftKey ? (t.preventDefault(), wt()) : (t.preventDefault(), kt());
               break;
             case "y":
-              t.preventDefault(), vt();
+              t.preventDefault(), wt();
               break;
           }
       }
@@ -6856,82 +6889,82 @@ const fi = $e((f, o) => {
     return document.addEventListener("keydown", e), () => {
       document.removeEventListener("keydown", e);
     };
-  }, [n, s, St, vt, at]);
-  const he = (e) => {
+  }, [d, s, kt, wt, rt]);
+  const se = (e) => {
     const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
     return t ? {
       r: parseInt(t[1], 16),
       g: parseInt(t[2], 16),
       b: parseInt(t[3], 16)
     } : null;
-  }, dt = () => `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, ge = (e) => {
+  }, dt = () => `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, le = (e) => {
     e.strokeStyle = "#e0e0e0", e.lineWidth = 1, e.setLineDash([1, 1]);
-    for (let t = 0; t <= k; t += Nt)
-      e.beginPath(), e.moveTo(t, 0), e.lineTo(t, M), e.stroke();
-    for (let t = 0; t <= M; t += Nt)
+    for (let t = 0; t <= k; t += jt)
+      e.beginPath(), e.moveTo(t, 0), e.lineTo(t, W), e.stroke();
+    for (let t = 0; t <= W; t += jt)
       e.beginPath(), e.moveTo(0, t), e.lineTo(k, t), e.stroke();
     e.setLineDash([]);
-  }, xe = (e, t) => {
+  }, ne = (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) {
       case "text":
-        me(e, t);
+        fe(e, t);
         break;
       case "rectangle":
-        pe(e, t);
+        he(e, t);
         break;
       case "circle":
-        we(e, t);
+        ge(e, t);
         break;
       case "triangle":
-        be(e, t);
+        xe(e, t);
         break;
       case "star":
-        ve(e, t);
+        ye(e, t);
         break;
       case "arrow":
-        ke(e, t);
+        ue(e, t);
         break;
       case "diamond":
-        Se(e, t);
+        me(e, t);
         break;
       case "hexagon":
-        Fe(e, t);
+        pe(e, t);
         break;
       case "pentagon":
-        Ce(e, t);
+        we(e, t);
         break;
       case "heart":
-        Te(e, t);
+        be(e, t);
         break;
       case "oval":
-        je(e, t);
+        ve(e, t);
         break;
       case "roundedRectangle":
-        Ne(e, t);
+        ke(e, t);
         break;
       case "image":
-        Ie(e, t);
+        Fe(e, t);
         break;
       case "qrcode":
-        ue(e, t);
+        de(e, t);
         break;
       case "barcode":
-        ye(e, t);
+        ce(e, t);
         break;
       case "sticker":
-        De(e, t);
+        Ce(e, t);
         break;
       case "horizontalLine":
-        Ae(e, t);
+        Se(e, t);
         break;
       case "embroidery":
-        Re(e, t);
+        je(e, t);
         break;
     }
     e.restore();
-  }, ye = (e, t) => {
+  }, ce = (e, t) => {
     if (t.imageObject)
       e.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
@@ -6940,18 +6973,18 @@ const fi = $e((f, o) => {
       r.onload = () => {
         l(
           (c) => c.map(
-            (x) => x.id === t.id ? { ...x, imageObject: r, imageLoading: !1 } : x
+            (g) => g.id === t.id ? { ...g, imageObject: r, imageLoading: !1 } : g
           )
         );
       }, r.onerror = () => {
         l(
           (c) => c.map(
-            (x) => x.id === t.id ? { ...x, imageLoading: !1 } : x
+            (g) => g.id === t.id ? { ...g, imageLoading: !1 } : g
           )
         );
       }, 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));
-  }, ue = (e, t) => {
+  }, de = (e, t) => {
     if (t.imageObject)
       e.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
@@ -6960,18 +6993,18 @@ const fi = $e((f, o) => {
       r.onload = () => {
         l(
           (c) => c.map(
-            (x) => x.id === t.id ? { ...x, imageObject: r, imageLoading: !1 } : x
+            (g) => g.id === t.id ? { ...g, imageObject: r, imageLoading: !1 } : g
           )
         );
       }, r.onerror = () => {
         l(
           (c) => c.map(
-            (x) => x.id === t.id ? { ...x, imageLoading: !1 } : x
+            (g) => g.id === t.id ? { ...g, imageLoading: !1 } : g
           )
         );
       }, r.src = t.src, e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading QR...", t.width / 2, t.height / 2);
     } else t.imageLoading ? (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading QR...", t.width / 2, t.height / 2)) : (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("No QR Data", t.width / 2, t.height / 2));
-  }, me = (e, t) => {
+  }, fe = (e, t) => {
     e.save();
     let r = t.text || "Text";
     if (t.textTransform)
@@ -6988,137 +7021,137 @@ const fi = $e((f, o) => {
       }
     e.font = `${t.fontStyle || "normal"} ${t.fontWeight || "normal"} ${t.fontSize || 20}px ${t.fontFamily || "Arial"}`, e.fillStyle = t.fill || "#000000", e.textAlign = t.textAlign || "left", e.textBaseline = "top", t.opacity !== void 0 && (e.globalAlpha = t.opacity), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth);
     const c = r.split(`
-`), x = (t.fontSize || 20) * (t.lineHeight || 1.2), p = Math.max(...c.map((v) => e.measureText(v).width)), w = c.length * x;
+`), g = (t.fontSize || 20) * (t.lineHeight || 1.2), m = Math.max(...c.map((v) => e.measureText(v).width)), w = c.length * g;
     if (t.backgroundColor && t.backgroundColor !== "transparent") {
       e.fillStyle = t.backgroundColor;
       const v = t.backgroundPadding || 4;
       e.fillRect(
         -v,
         -v,
-        p + v * 2,
+        m + v * 2,
         w + v * 2
       ), e.fillStyle = t.fill || "#000000";
     }
     c.forEach((v, b) => {
-      const A = b * x, D = e.measureText(v).width;
+      const A = b * g, D = e.measureText(v).width;
       t.stroke && t.strokeWidth > 0 && e.strokeText(v, 0, A), e.fillText(v, 0, A);
-      const z = t.fontSize || 20, tt = t.decorationColor || t.fill || "#000000", gt = Math.max(1, z / 20);
-      if (e.strokeStyle = tt, e.lineWidth = gt, t.textDecoration === "underline" || t.underline) {
-        const pt = A + z + 2;
-        e.beginPath(), e.moveTo(0, pt), e.lineTo(D, pt), e.stroke();
+      const B = t.fontSize || 20, et = t.decorationColor || t.fill || "#000000", gt = Math.max(1, B / 20);
+      if (e.strokeStyle = et, e.lineWidth = gt, t.textDecoration === "underline" || t.underline) {
+        const mt = A + B + 2;
+        e.beginPath(), e.moveTo(0, mt), e.lineTo(D, mt), e.stroke();
       }
       if (t.textDecoration === "overline" || t.overline) {
-        const pt = A - 2;
-        e.beginPath(), e.moveTo(0, pt), e.lineTo(D, pt), e.stroke();
+        const mt = A - 2;
+        e.beginPath(), e.moveTo(0, mt), e.lineTo(D, mt), e.stroke();
       }
       if (t.textDecoration === "line-through" || t.strikethrough) {
-        const pt = A + z / 2;
-        e.beginPath(), e.moveTo(0, pt), e.lineTo(D, pt), e.stroke();
+        const mt = A + B / 2;
+        e.beginPath(), e.moveTo(0, mt), e.lineTo(D, mt), e.stroke();
       }
-      typeof t.textDecoration == "string" && t.textDecoration.includes(" ") && t.textDecoration.split(" ").forEach((Oe) => {
-        switch (Oe.trim()) {
+      typeof t.textDecoration == "string" && t.textDecoration.includes(" ") && t.textDecoration.split(" ").forEach((Be) => {
+        switch (Be.trim()) {
           case "underline":
-            const Kt = A + z + 2;
-            e.beginPath(), e.moveTo(0, Kt), e.lineTo(D, Kt), e.stroke();
+            const Yt = A + B + 2;
+            e.beginPath(), e.moveTo(0, Yt), e.lineTo(D, Yt), e.stroke();
             break;
           case "overline":
-            const Zt = A - 2;
-            e.beginPath(), e.moveTo(0, Zt), e.lineTo(D, Zt), e.stroke();
+            const qt = A - 2;
+            e.beginPath(), e.moveTo(0, qt), e.lineTo(D, qt), e.stroke();
             break;
           case "line-through":
-            const te = A + z / 2;
-            e.beginPath(), e.moveTo(0, te), e.lineTo(D, te), e.stroke();
+            const Vt = A + B / 2;
+            e.beginPath(), e.moveTo(0, Vt), e.lineTo(D, Vt), e.stroke();
             break;
         }
       });
     }), e.restore();
-  }, pe = (e, t) => {
+  }, he = (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));
-  }, we = (e, t) => {
-    const r = Math.min(t.width, t.height) / 2, c = t.width / 2, x = t.height / 2;
-    e.beginPath(), e.arc(c, 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());
-  }, be = (e, t) => {
+  }, ge = (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());
+  }, xe = (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());
-  }, ve = (e, t) => {
-    const r = t.width / 2, c = t.height / 2, x = Math.min(t.width, t.height) / 2, p = x * 0.4, w = t.numPoints || 5;
+  }, ye = (e, t) => {
+    const r = t.width / 2, c = t.height / 2, g = Math.min(t.width, t.height) / 2, m = g * 0.4, w = t.numPoints || 5;
     e.beginPath();
     for (let v = 0; v < w * 2; v++) {
-      const b = v % 2 === 0 ? x : p, A = v * Math.PI / w, D = r + Math.cos(A) * b, z = c + Math.sin(A) * b;
-      v === 0 ? e.moveTo(D, z) : e.lineTo(D, z);
+      const b = v % 2 === 0 ? g : m, A = v * Math.PI / w, D = r + Math.cos(A) * b, B = c + Math.sin(A) * b;
+      v === 0 ? e.moveTo(D, B) : e.lineTo(D, B);
     }
     e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
-  }, ke = (e, t) => {
-    const r = t.width, c = t.height, x = r * 0.3;
-    e.beginPath(), e.moveTo(r / 2, 0), e.lineTo(r, c * 0.6), e.lineTo(r - x, c * 0.6), e.lineTo(r - x, c), e.lineTo(x, c), e.lineTo(x, 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());
-  }, Se = (e, t) => {
+  }, ue = (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());
+  }, me = (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());
-  }, Fe = (e, t) => {
-    const r = t.width / 2, c = t.height / 2, x = Math.min(t.width, t.height) / 2, p = 6;
+  }, pe = (e, t) => {
+    const r = t.width / 2, c = t.height / 2, g = Math.min(t.width, t.height) / 2, m = 6;
     e.beginPath();
-    for (let w = 0; w < p; w++) {
-      const v = w * 2 * Math.PI / p - Math.PI / 2, b = r + x * Math.cos(v), A = c + x * Math.sin(v);
+    for (let w = 0; w < m; w++) {
+      const v = w * 2 * Math.PI / m - Math.PI / 2, b = r + g * Math.cos(v), A = c + g * Math.sin(v);
       w === 0 ? e.moveTo(b, A) : e.lineTo(b, A);
     }
     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, x = Math.min(t.width, t.height) / 2, p = 5;
+  }, we = (e, t) => {
+    const r = t.width / 2, c = t.height / 2, g = Math.min(t.width, t.height) / 2, m = 5;
     e.beginPath();
-    for (let w = 0; w < p; w++) {
-      const v = w * 2 * Math.PI / p - Math.PI / 2, b = r + x * Math.cos(v), A = c + x * Math.sin(v);
+    for (let w = 0; w < m; w++) {
+      const v = w * 2 * Math.PI / m - Math.PI / 2, b = r + g * Math.cos(v), A = c + g * Math.sin(v);
       w === 0 ? e.moveTo(b, A) : e.lineTo(b, A);
     }
     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, c = t.height, x = 0, p = 0;
+  }, be = (e, t) => {
+    const r = t.width, c = t.height, g = 0, m = 0;
     e.beginPath();
     const w = c * 0.3;
-    e.moveTo(x + r / 2, p + w), e.bezierCurveTo(
-      x + r / 2,
-      p,
-      x,
-      p,
-      x,
-      p + w
+    e.moveTo(g + r / 2, m + w), e.bezierCurveTo(
+      g + r / 2,
+      m,
+      g,
+      m,
+      g,
+      m + w
     ), e.bezierCurveTo(
-      x,
-      p + (c + w) / 2,
-      x + r / 2,
-      p + (c + w) / 2,
-      x + r / 2,
-      p + c
+      g,
+      m + (c + w) / 2,
+      g + r / 2,
+      m + (c + w) / 2,
+      g + r / 2,
+      m + c
     ), e.bezierCurveTo(
-      x + r / 2,
-      p + (c + w) / 2,
-      x + r,
-      p + (c + w) / 2,
-      x + r,
-      p + w
+      g + r / 2,
+      m + (c + w) / 2,
+      g + r,
+      m + (c + w) / 2,
+      g + r,
+      m + w
     ), e.bezierCurveTo(
-      x + r,
-      p,
-      x + r / 2,
-      p,
-      x + r / 2,
-      p + w
+      g + r,
+      m,
+      g + r / 2,
+      m,
+      g + r / 2,
+      m + 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());
-  }, je = (e, t) => {
-    const r = t.width / 2, c = t.height / 2, x = t.width / 2, p = t.height / 2;
-    e.beginPath(), e.ellipse(r, c, x, p, 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());
-  }, Ne = (e, t) => {
+  }, ve = (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());
+  }, ke = (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) => {
+    Tt(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());
+  }, Se = (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();
-  }, Ie = (e, t) => {
+  }, Fe = (e, t) => {
     if (t.imageData)
       try {
         t.imageData.complete && t.imageData.naturalHeight !== 0 ? e.drawImage(t.imageData, 0, 0, t.width, t.height) : (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 (r) {
         console.error("Error drawing image:", r), 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);
       }
-  }, De = (e, t) => {
+  }, Ce = (e, t) => {
     if (t.src && !t.imageLoading && !t.loadedImage) {
       t.imageLoading = !0;
       const r = new Image();
@@ -7128,7 +7161,7 @@ const fi = $e((f, o) => {
         console.error("Failed to load sticker:", t.src), t.imageLoading = !1, e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.fillText("Failed to load", t.width / 2, t.height / 2);
       }, r.src = t.src;
     } else t.loadedImage ? e.drawImage(t.loadedImage, 0, 0, t.width, t.height) : t.imageLoading && (e.fillStyle = "#f8f9fa", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#dee2e6", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#6c757d", e.font = "12px Arial", e.textAlign = "center", e.fillText("Loading...", t.width / 2, t.height / 2));
-  }, Re = (e, t) => {
+  }, je = (e, t) => {
     if (t.imageObject)
       e.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
@@ -7137,49 +7170,49 @@ const fi = $e((f, o) => {
       r.crossOrigin = "anonymous", r.onload = () => {
         t.imageObject = r, t.imageLoading = !1, V();
       }, r.onerror = () => {
-        t.imageLoading = !1, console.error("Failed to load embroidery image:", t.src), zt(e, t);
-      }, r.src = t.src, zt(e, t, "Loading...");
+        t.imageLoading = !1, console.error("Failed to load embroidery image:", t.src), Dt(e, t);
+      }, r.src = t.src, Dt(e, t, "Loading...");
     } else
-      zt(e, t);
-  }, zt = (e, t, r = "Embroidery") => {
+      Dt(e, t);
+  }, Dt = (e, t, r = "Embroidery") => {
     e.fillStyle = "#f9f9f9", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ddd", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#999", e.font = "24px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("🧵", t.width / 2, t.height / 2 - 10), e.fillStyle = "#666", e.font = "12px Arial", e.fillText(r, t.width / 2, t.height / 2 + 15);
-  }, $t = (e, t, r) => {
+  }, Lt = (e, t, r) => {
     if (!r) return !1;
-    const c = r.x + r.width / 2, x = r.y + r.height / 2, p = e - c, w = t - x, v = -(r.rotation || 0) * Math.PI / 180, b = Math.cos(v), A = Math.sin(v), D = p * b - w * A, z = p * A + w * b, tt = r.width / 2, gt = r.height / 2;
-    return D >= -tt && D <= tt && z >= -gt && z <= gt;
-  }, Ee = et(() => {
-    (N || m || B) && at(), R(!1), E(!1), S(!1), $(null);
-    const e = yt.current;
+    const c = r.x + r.width / 2, g = r.y + r.height / 2, m = e - c, w = t - g, v = -(r.rotation || 0) * Math.PI / 180, b = Math.cos(v), A = Math.sin(v), D = m * b - w * A, B = m * A + w * b, et = r.width / 2, gt = r.height / 2;
+    return D >= -et && D <= et && B >= -gt && B <= gt;
+  }, Te = at(() => {
+    (T || u || z) && rt(), R(!1), E(!1), S(!1), Q(null);
+    const e = X.current;
     e && (e.style.cursor = "default");
-  }, [N, m, B, at]);
+  }, [T, u, z, rt]);
   it(() => {
     const e = (t) => {
       if (s) 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(), St()) : (t.key === "z" && t.shiftKey || t.key === "y") && (t.preventDefault(), vt())), (t.key === "Delete" || t.key === "Backspace") && n && (Bt(n.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && n && (Gt(n.id), t.preventDefault()), n && ["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(), kt()) : (t.key === "z" && t.shiftKey || t.key === "y") && (t.preventDefault(), wt())), (t.key === "Delete" || t.key === "Backspace") && d && (Et(d.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && d && (Ut(d.id), t.preventDefault()), d && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key))) {
         t.preventDefault();
-        const x = t.shiftKey ? 10 : 1;
-        let p = {};
+        const g = t.shiftKey ? 10 : 1;
+        let m = {};
         switch (t.key) {
           case "ArrowUp":
-            p.y = n.y - x;
+            m.y = d.y - g;
             break;
           case "ArrowDown":
-            p.y = n.y + x;
+            m.y = d.y + g;
             break;
           case "ArrowLeft":
-            p.x = n.x - x;
+            m.x = d.x - g;
             break;
           case "ArrowRight":
-            p.x = n.x + x;
+            m.x = d.x + g;
             break;
         }
-        Ht(n.id, p), at();
+        Pt(d.id, m), rt();
       }
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [n, St, vt, s]);
-  const ze = (e, t = {}) => {
+  }, [d, kt, wt, s]);
+  const Ne = (e, t = {}) => {
     const r = {
       id: dt(),
       type: e,
@@ -7204,16 +7237,16 @@ const fi = $e((f, o) => {
         r.id = dt(), r.imageData = t.imageData || null, r.width = t.width || 200, r.height = t.height || 200;
         break;
       case "qrcode":
-        r.id = dt(), r.type = "qrcode", r.x = (t == null ? void 0 : t.x) || k / 2 - ((t == null ? void 0 : t.width) || 100) / 2, r.y = (t == null ? void 0 : t.y) || M / 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 = dt(), 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 = dt(), 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) || M / 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 = dt(), 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 = dt(), r.type = "sticker", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
         break;
       case "horizontalLine":
-        r.id = dt(), r.type = "horizontalLine", r.x = k / 2 - 100, r.y = M / 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 = dt(), 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 = dt(), r.type = "embroidery", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
@@ -7234,15 +7267,15 @@ const fi = $e((f, o) => {
         console.warn(`Unknown element type: ${e}`);
         return;
     }
-    l((c) => [...c, r]), F(r), at();
-  }, Ht = (e, t) => {
+    l((c) => [...c, r]), F(r), rt();
+  }, Pt = (e, t) => {
     l((r) => r.map(
       (c) => c.id === e ? { ...c, ...t } : c
-    )), n && n.id === e && F((r) => ({ ...r, ...t }));
-  }, Bt = et(() => {
-    n && (l((e) => e.filter((t) => t.id !== n.id)), F(null), at());
-  }, [n, at]), Gt = (e) => {
-    const t = g.find((r) => r.id === e);
+    )), d && d.id === e && F((r) => ({ ...r, ...t }));
+  }, Et = at(() => {
+    d && (l((e) => e.filter((t) => t.id !== d.id)), F(null), rt());
+  }, [d, rt]), Ut = (e) => {
+    const t = x.find((r) => r.id === e);
     if (t) {
       const r = {
         ...t,
@@ -7250,49 +7283,56 @@ const fi = $e((f, o) => {
         x: t.x + 20,
         y: t.y + 20
       };
-      l((c) => [...c, r]), F(r), at();
+      l((c) => [...c, r]), F(r), rt();
     }
-  }, _t = (e, t) => {
-    const r = g.findIndex((p) => p.id === e);
+  }, Ot = (e, t) => {
+    const r = x.findIndex((m) => m.id === e);
     if (r === -1) return;
-    const c = [...g], x = c[r];
-    t === "up" && r < c.length - 1 ? (c[r] = c[r + 1], c[r + 1] = x) : t === "down" && r > 0 ? (c[r] = c[r - 1], c[r - 1] = x) : t === "top" ? (c.splice(r, 1), c.push(x)) : t === "bottom" && (c.splice(r, 1), c.unshift(x)), l(c), at();
+    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)), l(c), rt();
   };
-  et(() => {
-    u && H((e) => ({
+  at(() => {
+    p && H((e) => ({
       ...e,
-      [u.sectionName]: {
-        elements: [...g],
-        selectedColor: Q
+      [p.sectionName]: {
+        elements: [...x],
+        selectedColor: $
       }
     }));
-  }, [u, g, Q]);
-  const [, Be] = He((e) => e + 1, 0);
+  }, [p, x, $]);
+  const [, Ae] = Le((e) => e + 1, 0);
   setTimeout(() => {
-    Be();
-  }, 20), Ge(o, () => ({
-    handleSectionChange: Yt,
+    Ae();
+  }, 20), Pe(o, () => ({
+    handleSectionChange: Qt,
     // Export methods that return download-ready data
-    exportPrintReady: async (e = "png") => await Et(e, !1),
-    exportFullDesign: async (e = "png") => await Et(e, !0),
+    exportPrintReady: async (e = "png") => await Rt(e, !1),
+    exportFullDesign: async (e = "png") => await Rt(e, !0),
     // Access to the existing exportDesign method
-    exportDesign: Et,
+    exportDesign: Rt,
     // Get canvas data for custom exports
-    getCanvasData: () => wt(),
+    getCanvasData: () => vt(),
     // NEW: Export methods that return JSON with File objects
     exportAllDesignsAsJSON: async (e = "png") => {
       try {
-        const t = wt();
-        return await Rt.current.exportAllSectionsAsJSON(
-          t.sectionDesigns || { [(u == null ? void 0 : u.sectionName) || "main"]: t },
-          h.sections || [{
-            id: (u == null ? void 0 : u.sectionName) || "main",
-            sectionName: (u == null ? void 0 : u.sectionName) || "main",
-            image: u == null ? void 0 : u.sectionImage,
-            sectionImage: u == null ? void 0 : u.sectionImage
-          }],
+        const t = vt(), r = {}, c = (p == null ? void 0 : p.sectionName) || "main";
+        r[c] = {
+          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 = h.sections && h.sections.length > 0 ? h.sections : [{
+          id: c,
+          sectionName: c,
+          image: p == null ? void 0 : p.sectionImage,
+          sectionImage: p == null ? void 0 : p.sectionImage
+        }];
+        return await It.current.exportAllSectionsAsJSON(
+          r,
+          g,
           k,
-          M,
+          W,
           e
         );
       } catch (t) {
@@ -7301,182 +7341,182 @@ const fi = $e((f, o) => {
     },
     exportCurrentSectionAsJSON: async (e = "png") => {
       try {
-        const t = wt();
-        return await Rt.current.exportCurrentSectionAsJSON(t, e);
+        const t = vt();
+        return await It.current.exportCurrentSectionAsJSON(t, e);
       } catch (t) {
         throw console.error("Export current section as JSON failed:", t), t;
       }
     }
   })), it(() => {
-    xt.current = null, ut.current = null;
-    const e = yt.current;
-    if (e && e.getContext("2d").clearRect(0, 0, k, M), u != null && u.sectionImage) {
+    ft.current = null, yt.current = null;
+    const e = X.current;
+    if (e && e.getContext("2d").clearRect(0, 0, k, W), p != null && p.sectionImage) {
       const t = new Image();
       t.crossOrigin = "anonymous", t.onload = () => {
-        t.src === u.sectionImage && (xt.current = t, It(t, Q));
+        t.src === p.sectionImage && (ft.current = t, Nt(t, $));
       }, t.onerror = () => {
-        console.error("Failed to load background image:", u.sectionImage), V();
-      }, t.src = u.sectionImage;
+        console.error("Failed to load background image:", p.sectionImage), V();
+      }, t.src = p.sectionImage;
     } else
       V();
-  }, [u == null ? void 0 : u.sectionImage]);
-  const V = et(() => {
-    const e = yt.current;
+  }, [p == null ? void 0 : p.sectionImage]);
+  const V = at(() => {
+    const e = X.current;
     if (!e) return;
     const t = e.getContext("2d");
-    t.clearRect(0, 0, k, M), ut.current && t.drawImage(ut.current, 0, 0, k, M), P && ge(t), g.forEach((r) => {
-      xe(t, r);
-    }), n && de(t, n), requestAnimationFrame(V);
-  }, [g, n, k, M, P, ut]), Me = et((e) => {
+    t.clearRect(0, 0, k, W), yt.current && t.drawImage(yt.current, 0, 0, k, W), L && le(t), x.forEach((r) => {
+      ne(t, r);
+    }), d && re(t, d), requestAnimationFrame(V);
+  }, [x, d, k, W, L, yt]), Ie = at((e) => {
     if (s) return;
-    const r = yt.current.getBoundingClientRect(), c = (e.clientX - r.left) / O, x = (e.clientY - r.top) / O;
-    if (J({ x: c, y: x }), n) {
-      const w = Qt(c, x, n);
+    const r = X.current.getBoundingClientRect(), c = (e.clientX - r.left) / O, g = (e.clientY - r.top) / O;
+    if (K({ x: c, y: g }), d) {
+      const w = Mt(c, g, d);
       if (w) {
         if (w === "rotate") {
           S(!0);
-          const v = n.x + n.width / 2, b = n.y + n.height / 2, A = Math.atan2(x - b, c - v) * 180 / Math.PI;
-          J({
+          const v = d.x + d.width / 2, b = d.y + d.height / 2, A = Math.atan2(g - b, c - v) * 180 / Math.PI;
+          K({
             x: c,
-            y: x,
+            y: g,
             initialAngle: A,
-            initialRotation: n.rotation || 0
+            initialRotation: d.rotation || 0
           });
         } else
-          E(!0), $(w), J({
+          E(!0), Q(w), K({
             x: c,
-            y: x,
-            initialWidth: n.width,
-            initialHeight: n.height,
-            initialX: n.x,
-            initialY: n.y
+            y: g,
+            initialWidth: d.width,
+            initialHeight: d.height,
+            initialX: d.x,
+            initialY: d.y
           });
         return;
       }
     }
-    let p = null;
-    for (let w = g.length - 1; w >= 0; w--)
-      if ($t(c, x, g[w])) {
-        p = g[w];
+    let m = null;
+    for (let w = x.length - 1; w >= 0; w--)
+      if (Lt(c, g, x[w])) {
+        m = x[w];
         break;
       }
-    p ? (F(p), R(!0), J({
+    m ? (F(m), R(!0), K({
       x: c,
-      y: x,
-      offsetX: c - p.x,
-      offsetY: x - p.y
+      y: g,
+      offsetX: c - m.x,
+      offsetY: g - m.y
     })) : F(null), V();
-  }, [s, O, n, g, V]), We = et((e) => {
+  }, [s, O, d, x, V]), Re = at((e) => {
     if (s) return;
-    const t = yt.current, r = t.getBoundingClientRect(), c = (e.clientX - r.left) / O, x = (e.clientY - r.top) / O;
-    if (n && !N && !m && !B) {
-      const p = Qt(c, x, n);
-      p ? p === "rotate" ? t.style.cursor = "grab" : t.style.cursor = p : $t(c, x, n) ? t.style.cursor = "move" : t.style.cursor = "default";
+    const t = X.current, r = t.getBoundingClientRect(), c = (e.clientX - r.left) / O, g = (e.clientY - r.top) / O;
+    if (d && !T && !u && !z) {
+      const m = Mt(c, g, d);
+      m ? m === "rotate" ? t.style.cursor = "grab" : t.style.cursor = m : Lt(c, g, d) ? t.style.cursor = "move" : t.style.cursor = "default";
     } else
-      t.style.cursor = N ? "grabbing" : "default";
-    if (B && n) {
-      const p = n.x + n.width / 2, w = n.y + n.height / 2, b = Math.atan2(x - w, c - p) * 180 / Math.PI - T.initialAngle;
-      let A = T.initialRotation + b;
+      t.style.cursor = T ? "grabbing" : "default";
+    if (z && d) {
+      const m = d.x + d.width / 2, w = d.y + d.height / 2, b = Math.atan2(g - w, c - m) * 180 / Math.PI - j.initialAngle;
+      let A = j.initialRotation + b;
       e.shiftKey && (A = Math.round(A / 15) * 15), A = (A % 360 + 360) % 360, l(
         (D) => D.map(
-          (z) => z.id === n.id ? { ...z, rotation: A } : z
+          (B) => B.id === d.id ? { ...B, rotation: A } : B
         )
       ), F((D) => ({ ...D, rotation: A })), V();
       return;
     }
-    if (m && n && C) {
-      const p = c - T.x, w = x - T.y;
-      let v = T.initialWidth, b = T.initialHeight, A = T.initialX, D = T.initialY;
+    if (u && d && C) {
+      const m = c - j.x, w = g - j.y;
+      let v = j.initialWidth, b = j.initialHeight, A = j.initialX, D = j.initialY;
       switch (C) {
         case "se-resize":
-          v = Math.max(20, T.initialWidth + p), b = Math.max(20, T.initialHeight + w);
+          v = Math.max(20, j.initialWidth + m), b = Math.max(20, j.initialHeight + w);
           break;
         case "sw-resize":
-          v = Math.max(20, T.initialWidth - p), b = Math.max(20, T.initialHeight + w), A = T.initialX + (T.initialWidth - v);
+          v = Math.max(20, j.initialWidth - m), b = Math.max(20, j.initialHeight + w), A = j.initialX + (j.initialWidth - v);
           break;
         case "ne-resize":
-          v = Math.max(20, T.initialWidth + p), b = Math.max(20, T.initialHeight - w), D = T.initialY + (T.initialHeight - b);
+          v = Math.max(20, j.initialWidth + m), b = Math.max(20, j.initialHeight - w), D = j.initialY + (j.initialHeight - b);
           break;
         case "nw-resize":
-          v = Math.max(20, T.initialWidth - p), b = Math.max(20, T.initialHeight - w), A = T.initialX + (T.initialWidth - v), D = T.initialY + (T.initialHeight - b);
+          v = Math.max(20, j.initialWidth - m), b = Math.max(20, j.initialHeight - w), A = j.initialX + (j.initialWidth - v), D = j.initialY + (j.initialHeight - b);
           break;
       }
-      if (e.shiftKey && n.type !== "text") {
-        const tt = T.initialWidth / T.initialHeight;
-        C.includes("e"), b = v / tt, C.includes("n") && (D = T.initialY + (T.initialHeight - b));
+      if (e.shiftKey && d.type !== "text") {
+        const et = j.initialWidth / j.initialHeight;
+        C.includes("e"), b = v / et, C.includes("n") && (D = j.initialY + (j.initialHeight - b));
       }
-      _ && (A = mt(A), D = mt(D), v = mt(v), b = mt(b));
-      const z = {
-        ...n,
+      _ && (A = ut(A), D = ut(D), v = ut(v), b = ut(b));
+      const B = {
+        ...d,
         x: A,
         y: D,
         width: v,
         height: b
       };
       l(
-        (tt) => tt.map(
-          (gt) => gt.id === n.id ? z : gt
+        (et) => et.map(
+          (gt) => gt.id === d.id ? B : gt
         )
-      ), F(z), V();
+      ), F(B), V();
       return;
     }
-    if (N && n) {
-      let p = c - T.offsetX, w = x - T.offsetY;
-      _ && (p = mt(p), w = mt(w)), p = Math.max(0, Math.min(k - n.width, p)), w = Math.max(0, Math.min(M - n.height, w));
+    if (T && d) {
+      let m = c - j.offsetX, w = g - j.offsetY;
+      _ && (m = ut(m), w = ut(w)), m = Math.max(0, Math.min(k - d.width, m)), w = Math.max(0, Math.min(W - d.height, w));
       const v = {
-        ...n,
-        x: p,
+        ...d,
+        x: m,
         y: w
       };
       l(
         (b) => b.map(
-          (A) => A.id === n.id ? v : A
+          (A) => A.id === d.id ? v : A
         )
       ), F(v), V();
     }
-  }, [s, O, n, N, m, B, C, T, _, k, M, g, V]), Yt = et((e) => {
-    u && H((r) => ({
+  }, [s, O, d, T, u, z, C, j, _, k, W, x, V]), Qt = at((e) => {
+    p && H((r) => ({
       ...r,
-      [u.sectionName]: {
-        elements: g.map((c) => c.type === "image" ? {
+      [p.sectionName]: {
+        elements: x.map((c) => c.type === "image" ? {
           ...c,
           // Keep the image data reference
           imageData: c.imageData,
           src: c.src
         } : c),
-        selectedColor: Q
+        selectedColor: $
       }
     }));
-    const t = W[e.sectionName];
+    const t = M[e.sectionName];
     if (t) {
       const r = t.elements.map((c) => {
         if (c.type === "image" && c.src && !c.imageData) {
-          const x = new Image();
-          return x.onload = () => {
+          const g = new Image();
+          return g.onload = () => {
             l(
-              (p) => p.map(
-                (w) => w.id === c.id ? { ...w, imageData: x } : w
+              (m) => m.map(
+                (w) => w.id === c.id ? { ...w, imageData: g } : w
               )
             ), V();
-          }, x.src = c.src, { ...c, imageData: x };
+          }, g.src = c.src, { ...c, imageData: g };
         }
         return c;
       });
-      l(r), rt(t.selectedColor || Q);
+      l(r), ot(t.selectedColor || $);
     } else
       l([]);
-    K(e), F(null);
-  }, [u, g, Q, W, V]), Le = et((e) => {
+    Z(e), F(null);
+  }, [p, x, $, M, V]), De = at((e) => {
     if (e && e.type.startsWith("image/")) {
       const t = new FileReader();
       t.onload = (r) => {
         const c = new Image();
         c.onload = () => {
-          const x = {
+          const g = {
             id: dt(),
             type: "image",
-            x: mt(k / 2 - 100),
-            y: mt(M / 2 - 100),
+            x: ut(k / 2 - 100),
+            y: ut(W / 2 - 100),
             width: Math.min(c.width, 200),
             // Limit initial size
             height: Math.min(c.height, 200),
@@ -7485,8 +7525,8 @@ const fi = $e((f, o) => {
             src: r.target.result,
             originalWidth: c.width,
             originalHeight: c.height
-          }, p = c.width / c.height;
-          x.width / x.height !== p && (x.width / p <= 200 ? x.height = x.width / p : x.width = x.height * p), l((w) => [...w, x]), F(x), at();
+          }, m = c.width / c.height;
+          g.width / g.height !== m && (g.width / m <= 200 ? g.height = g.width / m : g.width = g.height * m), l((w) => [...w, g]), F(g), rt();
         }, c.onerror = () => {
           console.error("Failed to load uploaded image"), alert("Failed to load the uploaded image. Please try again.");
         }, c.src = r.target.result;
@@ -7495,70 +7535,70 @@ const fi = $e((f, o) => {
       }, t.readAsDataURL(e);
     } else
       alert("Please select a valid image file.");
-  }, [k, M, mt, dt, at]);
+  }, [k, W, ut, dt, rt]);
   it(() => {
-    if (u != null && u.sectionImage) {
-      console.log("Loading new section image:", u.sectionImage), bt.current = !0, xt.current = null, ut.current = null;
+    if (p != null && p.sectionImage) {
+      pt.current = !0, ft.current = null, yt.current = null;
       const e = new Image();
       e.crossOrigin = "anonymous", e.onload = () => {
-        console.log("Background image loaded successfully"), xt.current = e, It(e, Q);
+        ft.current = e, Nt(e, $);
       }, e.onerror = () => {
-        console.error("Failed to load background image:", u.sectionImage), bt.current = !1, V();
-      }, e.src = u.sectionImage;
+        console.error("Failed to load background image:", p.sectionImage), pt.current = !1, V();
+      }, e.src = p.sectionImage;
     } else
-      xt.current = null, ut.current = null, bt.current = !1, V();
-  }, [u == null ? void 0 : u.sectionImage, Q]);
-  const qt = et(
-    Pe(() => {
+      ft.current = null, yt.current = null, pt.current = !1, V();
+  }, [p == null ? void 0 : p.sectionImage, $]);
+  const $t = at(
+    Ee(() => {
       V();
     }, 16),
     // 60fps limit
     [V]
   );
   it(() => {
-    bt.current || qt();
-  }, [g, n, P, qt]);
-  function Pe(e, t) {
+    pt.current || $t();
+  }, [x, d, L, $t]);
+  function Ee(e, t) {
     let r;
-    return function(...x) {
-      const p = () => {
-        clearTimeout(r), e(...x);
+    return function(...g) {
+      const m = () => {
+        clearTimeout(r), e(...g);
       };
-      clearTimeout(r), r = setTimeout(p, t);
+      clearTimeout(r), r = setTimeout(m, t);
     };
   }
   it(() => {
-    xt.current && It(xt.current, Q);
-  }, [Q]), it(() => {
+    ft.current && Nt(ft.current, $);
+  }, [$]), it(() => {
     V();
   }, [V]);
-  const Ue = (e, t, r) => (0.2126 * e + 0.7152 * t + 0.0722 * r) / 255, It = et((e, t) => {
-    const r = Pt.current, c = r.getContext("2d");
-    r.width = k, r.height = M, c.clearRect(0, 0, k, M), c.drawImage(e, 0, 0, k, M);
-    const x = c.getImageData(0, 0, k, M), p = x.data, w = he(t);
+  const ze = (e, t, r) => (0.2126 * e + 0.7152 * t + 0.0722 * r) / 255, Nt = at((e, t) => {
+    const r = Bt.current, c = r.getContext("2d");
+    r.width = k, r.height = W, c.clearRect(0, 0, k, W), c.drawImage(e, 0, 0, k, W);
+    const g = c.getImageData(0, 0, k, W), m = g.data, w = se(t);
     if (!w) {
-      bt.current = !1;
+      pt.current = !1;
       return;
     }
     const { r: v, g: b, b: A } = w;
-    for (let z = 0; z < p.length; z += 4) {
-      if (p[z + 3] === 0) continue;
-      const gt = Ue(p[z], p[z + 1], p[z + 2]);
-      p[z] = Math.round(v * gt), p[z + 1] = Math.round(b * gt), p[z + 2] = Math.round(A * gt);
+    for (let B = 0; B < m.length; B += 4) {
+      if (m[B + 3] === 0) continue;
+      const gt = ze(m[B], m[B + 1], m[B + 2]);
+      m[B] = Math.round(v * gt), m[B + 1] = Math.round(b * gt), m[B + 2] = Math.round(A * gt);
     }
-    c.putImageData(x, 0, 0);
+    c.putImageData(g, 0, 0);
     const D = new Image();
     D.onload = () => {
-      ut.current = D, bt.current = !1, V();
+      yt.current = D, pt.current = !1, V();
     }, D.src = r.toDataURL("image/png");
-  }, [k, M, V]), Vt = (e) => {
-    if (!X) return { horizontal: [], vertical: [] };
+  }, [k, W, V]), Ht = (e) => {
+    if (!J) return { horizontal: [], vertical: [] };
     const t = document.querySelector(".ruler-horizontal"), r = document.querySelector(".ruler-vertical");
     if (!t || !r)
       return { horizontal: [], vertical: [] };
-    const c = t.getBoundingClientRect(), x = r.getBoundingClientRect(), p = c.width, w = x.height, v = 50, b = [], A = [];
-    for (let D = v; D <= p; D += v)
-      D <= p - 20 && b.push({
+    const c = t.getBoundingClientRect(), g = r.getBoundingClientRect(), m = c.width, w = g.height, v = 50, b = [], A = [];
+    for (let D = v; D <= m; D += v)
+      D <= m - 20 && b.push({
         position: D,
         value: Math.round(D / e)
       });
@@ -7568,12 +7608,12 @@ const fi = $e((f, o) => {
         value: Math.round(D / e)
       });
     return { horizontal: b, vertical: A };
-  }, [Xt, Jt] = j({ horizontal: [], vertical: [] });
+  }, [Gt, _t] = N({ horizontal: [], vertical: [] });
   return it(() => {
     const e = () => {
       setTimeout(() => {
-        const c = Vt(O);
-        Jt(c);
+        const c = Ht(O);
+        _t(c);
       }, 50);
     };
     e();
@@ -7584,33 +7624,33 @@ const fi = $e((f, o) => {
     return window.addEventListener("resize", r), () => {
       window.removeEventListener("resize", r), clearTimeout(t);
     };
-  }, [O, X]), it(() => {
-    if (X && !y) {
+  }, [O, J]), it(() => {
+    if (J && !y) {
       const e = setTimeout(() => {
-        const t = Vt(O);
-        Jt(t);
+        const t = Ht(O);
+        _t(t);
       }, 100);
       return () => clearTimeout(e);
     }
-  }, [X, y, O]), /* @__PURE__ */ i.jsxs("div", { className: "pure-canvas-designer", children: [
+  }, [J, y, O]), /* @__PURE__ */ i.jsxs("div", { className: "pure-canvas-designer", children: [
     /* @__PURE__ */ i.jsx("div", { className: "designer-header", children: /* @__PURE__ */ i.jsx(
-      si,
+      ti,
       {
-        onAddElement: ze,
-        onDeleteElement: () => n && Bt(n.id),
-        onDuplicateElement: () => n && Gt(n.id),
-        onUndo: St,
-        onRedo: vt,
-        onToggleGrid: () => lt(!P),
-        onToggleRulers: () => nt(!X),
-        onToggleSnap: () => U(!_),
-        onImageUpload: Le,
+        onAddElement: Ne,
+        onDeleteElement: () => d && Et(d.id),
+        onDuplicateElement: () => d && Ut(d.id),
+        onUndo: kt,
+        onRedo: wt,
+        onToggleGrid: () => lt(!L),
+        onToggleRulers: () => nt(!J),
+        onToggleSnap: () => P(!_),
+        onImageUpload: De,
         canUndo: q > 0,
         canRedo: q < G.length - 1,
-        showGrid: P,
-        showRulers: X,
+        showGrid: L,
+        showRulers: J,
         snapToGrid: _,
-        selectedElement: n,
+        selectedElement: d,
         theme: a,
         readOnly: s,
         apiKey: f.apiKey,
@@ -7618,8 +7658,8 @@ const fi = $e((f, o) => {
       }
     ) }),
     /* @__PURE__ */ i.jsxs("div", { className: "designer-content", children: [
-      X && !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: Xt.horizontal.map((e, t) => /* @__PURE__ */ i.jsx(
+      J && !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: Gt.horizontal.map((e, t) => /* @__PURE__ */ i.jsx(
           "span",
           {
             className: "ruler-number horizontal",
@@ -7628,7 +7668,7 @@ const fi = $e((f, o) => {
           },
           t
         )) }) }),
-        /* @__PURE__ */ i.jsx("div", { className: "ruler-vertical", children: /* @__PURE__ */ i.jsx("div", { className: "ruler-vertical-numbers", children: Xt.vertical.map((e, t) => /* @__PURE__ */ i.jsx(
+        /* @__PURE__ */ i.jsx("div", { className: "ruler-vertical", children: /* @__PURE__ */ i.jsx("div", { className: "ruler-vertical-numbers", children: Gt.vertical.map((e, t) => /* @__PURE__ */ i.jsx(
           "span",
           {
             className: "ruler-number vertical",
@@ -7638,18 +7678,18 @@ const fi = $e((f, o) => {
           t
         )) }) })
       ] }),
-      /* @__PURE__ */ i.jsx("div", { className: "canvas-container", ref: ne, children: /* @__PURE__ */ i.jsx(
+      /* @__PURE__ */ i.jsx("div", { className: "canvas-container", ref: bt, children: /* @__PURE__ */ i.jsx(
         "canvas",
         {
-          ref: yt,
+          ref: X,
           width: k,
-          height: M,
-          onMouseDown: Me,
-          onMouseMove: We,
-          onMouseUp: Ee,
+          height: W,
+          onMouseDown: Ie,
+          onMouseMove: Re,
+          onMouseUp: Te,
           style: {
             border: "1px solid #e2e8f0",
-            cursor: N ? "grabbing" : "default",
+            cursor: T ? "grabbing" : "default",
             transform: `scale(${O})`,
             transformOrigin: "top left"
           }
@@ -7657,23 +7697,23 @@ const fi = $e((f, o) => {
       ) }),
       /* @__PURE__ */ i.jsxs("div", { className: "side-panels", children: [
         /* @__PURE__ */ i.jsx(
-          li,
+          ei,
           {
-            selectedElement: n,
-            onUpdate: Ht,
-            onMoveLayer: _t,
-            availableFonts: ce,
+            selectedElement: d,
+            onUpdate: Pt,
+            onMoveLayer: Ot,
+            availableFonts: oe,
             theme: a
           }
         ),
         /* @__PURE__ */ i.jsx(
-          ni,
+          ii,
           {
-            elements: g,
-            selectedElement: n,
+            elements: x,
+            selectedElement: d,
             onSelectElement: F,
-            onMoveLayer: _t,
-            onDeleteElement: Bt,
+            onMoveLayer: Ot,
+            onDeleteElement: Et,
             theme: a
           }
         )
@@ -7686,15 +7726,15 @@ const fi = $e((f, o) => {
           /* @__PURE__ */ i.jsx("u", { children: h.name })
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "thumbnails-container", children: h.sections.map((e) => {
-          const t = W[e.sectionName] && W[e.sectionName].elements && W[e.sectionName].elements.length > 0;
+          const t = M[e.sectionName] && M[e.sectionName].elements && M[e.sectionName].elements.length > 0;
           return /* @__PURE__ */ i.jsxs(
             "div",
             {
-              className: `section-thumbnail compact ${u.sectionName === e.sectionName ? "active" : ""}`,
+              className: `section-thumbnail compact ${p.sectionName === e.sectionName ? "active" : ""}`,
               onClick: (r) => {
                 r.stopPropagation();
-                const c = h.sections.find((x) => x.sectionName === e.sectionName);
-                Yt(c);
+                const c = h.sections.find((g) => g.sectionName === e.sectionName);
+                Qt(c);
               },
               title: e.sectionName,
               children: [
@@ -7726,9 +7766,9 @@ const fi = $e((f, o) => {
           h.colorSettings.slice(0, 3).map((e, t) => /* @__PURE__ */ i.jsxs(
             "div",
             {
-              className: `color-swatch-enhanced compact ${Q === e ? "active" : ""}`,
+              className: `color-swatch-enhanced compact ${$ === e ? "active" : ""}`,
               onClick: (r) => {
-                r.stopPropagation(), rt(e);
+                r.stopPropagation(), ot(e);
               },
               title: `Change product to ${e}`,
               children: [
@@ -7739,7 +7779,7 @@ const fi = $e((f, o) => {
                     style: { backgroundColor: e }
                   }
                 ),
-                Q === e && /* @__PURE__ */ i.jsx("div", { className: "color-selection-ring compact" })
+                $ === e && /* @__PURE__ */ i.jsx("div", { className: "color-selection-ring compact" })
               ]
             },
             e
@@ -7765,9 +7805,9 @@ const fi = $e((f, o) => {
             /* @__PURE__ */ i.jsx("div", { className: "color-dropdown-menu", style: { display: "none" }, children: h.colorSettings.slice(3).map((e, t) => /* @__PURE__ */ i.jsxs(
               "div",
               {
-                className: `color-swatch-dropdown ${Q === e ? "active" : ""}`,
+                className: `color-swatch-dropdown ${$ === e ? "active" : ""}`,
                 onClick: (r) => {
-                  r.stopPropagation(), rt(e), r.currentTarget.parentElement.style.display = "none";
+                  r.stopPropagation(), ot(e), r.currentTarget.parentElement.style.display = "none";
                 },
                 title: `Change product to ${e}`,
                 children: [
@@ -7854,7 +7894,7 @@ const fi = $e((f, o) => {
     ] })
   ] });
 });
-fi.displayName = "Mypixia";
+ai.displayName = "Mypixia";
 export {
-  fi as default
+  ai as default
 };