@mypixia/simplex-designer 2.0.2 → 2.0.3

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import Ue, { useState as A, useRef as gt, useEffect as Z, useMemo as ee, forwardRef as Oe, useCallback as rt, useReducer as Qe, useImperativeHandle as $e } from "react";
-import He from "qrcode";
-import Ge from "react-barcode";
+import Oe, { useState as N, useRef as gt, useEffect as Z, useMemo as ee, forwardRef as Qe, useCallback as rt, useReducer as $e, useImperativeHandle as He } from "react";
+import Ge from "qrcode";
+import _e from "react-barcode";
 import ie from "axios";
 import './index_external.css';var Et = { exports: {} }, Ct = {};
 /**
@@ -13,7 +13,7 @@ import './index_external.css';var Et = { exports: {} }, Ct = {};
  * LICENSE file in the root directory of this source tree.
  */
 var oe;
-function _e() {
+function Ye() {
   if (oe) return Ct;
   oe = 1;
   var f = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
@@ -34,7 +34,7 @@ function _e() {
   }
   return Ct.Fragment = o, Ct.jsx = a, Ct.jsxs = a, Ct;
 }
-var Tt = {};
+var jt = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -45,12 +45,12 @@ var Tt = {};
  * LICENSE file in the root directory of this source tree.
  */
 var re;
-function Ye() {
+function qe() {
   return re || (re = 1, process.env.NODE_ENV !== "production" && function() {
     function f(u) {
       if (u == null) return null;
       if (typeof u == "function")
-        return u.$$typeof === $ ? null : u.displayName || u.name || null;
+        return u.$$typeof === H ? null : u.displayName || u.name || null;
       if (typeof u == "string") return u;
       switch (u) {
         case k:
@@ -59,11 +59,11 @@ function Ye() {
           return "Profiler";
         case C:
           return "StrictMode";
-        case lt:
+        case st:
           return "Suspense";
         case W:
           return "SuspenseList";
-        case ht:
+        case ft:
           return "Activity";
       }
       if (typeof u == "object")
@@ -74,7 +74,7 @@ function Ye() {
             return "Portal";
           case O:
             return (u.displayName || "Context") + ".Provider";
-          case T:
+          case j:
             return (u._context.displayName || "Context") + ".Consumer";
           case v:
             var D = u.render;
@@ -102,11 +102,11 @@ function Ye() {
       }
       if (D) {
         D = console;
-        var L = D.error, H = typeof Symbol == "function" && Symbol.toStringTag && u[Symbol.toStringTag] || u.constructor.name || "Object";
+        var L = D.error, G = typeof Symbol == "function" && Symbol.toStringTag && u[Symbol.toStringTag] || u.constructor.name || "Object";
         return L.call(
           D,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          H
+          G
         ), o(u);
       }
     }
@@ -147,22 +147,22 @@ function Ye() {
         configurable: !0
       });
     }
-    function d() {
+    function c() {
       var u = f(this.type);
       return q[u] || (q[u] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), u = this.props.ref, u !== void 0 ? u : null;
     }
-    function j(u, D, L, H, G, it, X, V) {
+    function T(u, D, L, G, _, it, X, V) {
       return L = it.ref, u = {
-        $$typeof: z,
+        $$typeof: E,
         type: u,
         key: D,
         props: it,
-        _owner: G
+        _owner: _
       }, (L !== void 0 ? L : null) !== null ? Object.defineProperty(u, "ref", {
         enumerable: !1,
-        get: d
+        get: c
       }) : Object.defineProperty(u, "ref", { enumerable: !1, value: null }), u._store = {}, Object.defineProperty(u._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -185,36 +185,36 @@ function Ye() {
         value: V
       }), Object.freeze && (Object.freeze(u.props), Object.freeze(u)), u;
     }
-    function F(u, D, L, H, G, it, X, V) {
+    function F(u, D, L, G, _, it, X, V) {
       var U = D.children;
       if (U !== void 0)
-        if (H)
+        if (G)
           if (nt(U)) {
-            for (H = 0; H < U.length; H++)
-              R(U[H]);
+            for (G = 0; G < U.length; G++)
+              A(U[G]);
             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(U);
+        else A(U);
       if (M.call(D, "key")) {
         U = f(u);
         var K = Object.keys(D).filter(function(xt) {
           return xt !== "key";
         });
-        H = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", et[U + H] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
+        G = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", et[U + G] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          H,
+          G,
           U,
           K,
           U
-        ), et[U + H] = !0);
+        ), et[U + G] = !0);
       }
       if (U = null, L !== void 0 && (a(L), U = "" + L), x(D) && (a(D.key), U = "" + D.key), "key" in D) {
         L = {};
@@ -224,21 +224,21 @@ React keys must be passed directly to JSX without using spread:
       return U && n(
         L,
         typeof u == "function" ? u.displayName || u.name || "Unknown" : u
-      ), j(
+      ), T(
         u,
         U,
         it,
-        G,
+        _,
         s(),
         L,
         X,
         V
       );
     }
-    function R(u) {
-      typeof u == "object" && u !== null && u.$$typeof === z && u._store && (u._store.validated = 1);
+    function A(u) {
+      typeof u == "object" && u !== null && u.$$typeof === E && u._store && (u._store.validated = 1);
     }
-    var y = Ue, z = Symbol.for("react.transitional.element"), B = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), J = Symbol.for("react.profiler"), T = Symbol.for("react.consumer"), O = Symbol.for("react.context"), v = Symbol.for("react.forward_ref"), lt = Symbol.for("react.suspense"), W = Symbol.for("react.suspense_list"), yt = Symbol.for("react.memo"), Q = Symbol.for("react.lazy"), ht = Symbol.for("react.activity"), $ = Symbol.for("react.client.reference"), at = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, nt = Array.isArray, tt = console.createTask ? console.createTask : function() {
+    var y = Oe, E = Symbol.for("react.transitional.element"), B = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), J = Symbol.for("react.profiler"), j = Symbol.for("react.consumer"), O = Symbol.for("react.context"), v = Symbol.for("react.forward_ref"), st = Symbol.for("react.suspense"), W = Symbol.for("react.suspense_list"), yt = Symbol.for("react.memo"), Q = Symbol.for("react.lazy"), ft = Symbol.for("react.activity"), H = Symbol.for("react.client.reference"), at = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, nt = Array.isArray, tt = console.createTask ? console.createTask : function() {
       return null;
     };
     y = {
@@ -250,38 +250,38 @@ React keys must be passed directly to JSX without using spread:
       y,
       h
     )(), p = tt(l(h)), et = {};
-    Tt.Fragment = k, Tt.jsx = function(u, D, L, H, G) {
+    jt.Fragment = k, jt.jsx = function(u, D, L, G, _) {
       var it = 1e4 > at.recentlyCreatedOwnerStacks++;
       return F(
         u,
         D,
         L,
         !1,
-        H,
         G,
+        _,
         it ? Error("react-stack-top-frame") : P,
         it ? tt(l(u)) : p
       );
-    }, Tt.jsxs = function(u, D, L, H, G) {
+    }, jt.jsxs = function(u, D, L, G, _) {
       var it = 1e4 > at.recentlyCreatedOwnerStacks++;
       return F(
         u,
         D,
         L,
         !0,
-        H,
         G,
+        _,
         it ? Error("react-stack-top-frame") : P,
         it ? tt(l(u)) : p
       );
     };
-  }()), Tt;
+  }()), jt;
 }
 var ae;
-function qe() {
-  return ae || (ae = 1, process.env.NODE_ENV === "production" ? Et.exports = _e() : Et.exports = Ye()), Et.exports;
+function Ve() {
+  return ae || (ae = 1, process.env.NODE_ENV === "production" ? Et.exports = Ye() : Et.exports = qe()), Et.exports;
 }
-var e = qe();
+var e = Ve();
 const Ut = {
   business: {
     name: "Business & Office",
@@ -378,27 +378,27 @@ const Ut = {
     ...o,
     category: f.name
   }))
-), Ve = (f) => le().filter(
+), Xe = (f) => le().filter(
   (a) => a.name.toLowerCase().includes(f.toLowerCase()) || a.category.toLowerCase().includes(f.toLowerCase())
-), Xe = ({ onSelectIcon: f, disabled: o = !1 }) => {
-  const [a, l] = A(!1), [s, h] = A(""), [x, n] = A("all"), d = gt(null);
+), Je = ({ onSelectIcon: f, disabled: o = !1 }) => {
+  const [a, l] = N(!1), [s, h] = N(""), [x, n] = N("all"), c = gt(null);
   Z(() => {
-    const y = (z) => {
-      d.current && !d.current.contains(z.target) && l(!1);
+    const y = (E) => {
+      c.current && !c.current.contains(E.target) && l(!1);
     };
     return document.addEventListener("mousedown", y), () => document.removeEventListener("mousedown", y);
   }, []);
-  const j = (y) => {
+  const T = (y) => {
     f(y), l(!1), h("");
-  }, R = (() => {
+  }, A = (() => {
     let y = le();
-    if (s.trim() && (y = Ve(s)), x !== "all") {
-      const z = Ut[x];
-      z && (y = y.filter((B) => B.category === z.name));
+    if (s.trim() && (y = Xe(s)), x !== "all") {
+      const E = Ut[x];
+      E && (y = y.filter((B) => B.category === E.name));
     }
     return y;
   })();
-  return /* @__PURE__ */ e.jsxs("div", { className: "icon-selector", ref: d, children: [
+  return /* @__PURE__ */ e.jsxs("div", { className: "icon-selector", ref: c, children: [
     /* @__PURE__ */ e.jsxs(
       "button",
       {
@@ -433,36 +433,36 @@ const Ut = {
             className: "category-select",
             children: [
               /* @__PURE__ */ e.jsx("option", { value: "all", children: "All Categories" }),
-              Object.entries(Ut).map(([y, z]) => /* @__PURE__ */ e.jsx("option", { value: y, children: z.name }, y))
+              Object.entries(Ut).map(([y, E]) => /* @__PURE__ */ e.jsx("option", { value: y, children: E.name }, y))
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: "icon-grid", children: R.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "no-icons", children: s ? "No icons found" : "No icons in this category" }) : R.map((y, z) => /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsx("div", { className: "icon-grid", children: A.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "no-icons", children: s ? "No icons found" : "No icons in this category" }) : A.map((y, E) => /* @__PURE__ */ e.jsxs(
         "button",
         {
           className: "icon-item",
-          onClick: () => j(y),
+          onClick: () => T(y),
           title: `${y.name} (${y.category})`,
           children: [
             /* @__PURE__ */ e.jsx("span", { className: "icon-symbol", children: y.symbol }),
             /* @__PURE__ */ e.jsx("span", { className: "icon-name", children: y.name })
           ]
         },
-        `${y.name}-${z}`
+        `${y.name}-${E}`
       )) }),
       /* @__PURE__ */ e.jsx("div", { className: "icon-dropdown-footer", children: /* @__PURE__ */ e.jsxs("span", { className: "icon-count", children: [
-        R.length,
+        A.length,
         " icon",
-        R.length !== 1 ? "s" : ""
+        A.length !== 1 ? "s" : ""
       ] }) })
     ] })
   ] });
-}, Je = ({ isOpen: f, onClose: o, onAddQRCode: a, theme: l }) => {
-  const [s, h] = A(""), [x, n] = A(""), [d, j] = A(200), [F, R] = A("M"), y = () => {
+}, Ke = ({ isOpen: f, onClose: o, onAddQRCode: a, theme: l }) => {
+  const [s, h] = N(""), [x, n] = N(""), [c, T] = N(200), [F, A] = N("M"), y = () => {
     if (!s.trim()) return;
     const k = {
-      width: d,
+      width: c,
       errorCorrectionLevel: F,
       type: "image/png",
       quality: 0.92,
@@ -472,14 +472,14 @@ const Ut = {
         light: "#FFFFFF"
       }
     };
-    He.toDataURL(s, k, (C, J) => {
+    Ge.toDataURL(s, k, (C, J) => {
       if (C) {
         console.error("QR Code generation error:", C);
         return;
       }
       n(J);
     });
-  }, z = () => {
+  }, E = () => {
     if (!x) return;
     const k = new Image();
     k.onload = () => {
@@ -487,8 +487,8 @@ const Ut = {
         type: "qrcode",
         src: x,
         data: s,
-        width: d,
-        height: d,
+        width: c,
+        height: c,
         x: 100,
         y: 100,
         imageObject: k
@@ -533,8 +533,8 @@ const Ut = {
             {
               type: "number",
               id: "qr-size",
-              value: d,
-              onChange: (k) => j(Math.max(50, Math.min(500, parseInt(k.target.value) || 200))),
+              value: c,
+              onChange: (k) => T(Math.max(50, Math.min(500, parseInt(k.target.value) || 200))),
               min: "50",
               max: "500"
             }
@@ -547,7 +547,7 @@ const Ut = {
             {
               id: "qr-error-level",
               value: F,
-              onChange: (k) => R(k.target.value),
+              onChange: (k) => A(k.target.value),
               children: [
                 /* @__PURE__ */ e.jsx("option", { value: "L", children: "Low (7%)" }),
                 /* @__PURE__ */ e.jsx("option", { value: "M", children: "Medium (15%)" }),
@@ -574,7 +574,7 @@ const Ut = {
           "button",
           {
             className: "qr-btn qr-btn-add",
-            onClick: z,
+            onClick: E,
             style: {
               backgroundColor: (l == null ? void 0 : l.primaryColor) || "#3b82f6",
               borderColor: (l == null ? void 0 : l.primaryColor) || "#3b82f6"
@@ -585,8 +585,8 @@ const Ut = {
       ] })
     ] })
   ] }) }) : null;
-}, Ke = ({ isOpen: f, onClose: o, onAddBarcode: a, theme: l }) => {
-  const [s, h] = A(""), [x, n] = A("CODE128"), [d, j] = A(null), [F, R] = A(2), [y, z] = A(100), [B, k] = A(20), [C, J] = A("center"), [T, O] = A("bottom"), [v, lt] = A(10), W = gt(null), yt = [
+}, Ze = ({ isOpen: f, onClose: o, onAddBarcode: a, theme: l }) => {
+  const [s, h] = N(""), [x, n] = N("CODE128"), [c, T] = N(null), [F, A] = N(2), [y, E] = N(100), [B, k] = N(20), [C, J] = N("center"), [j, O] = N("bottom"), [v, st] = N(10), W = gt(null), yt = [
     { value: "CODE128", label: "CODE128 (Most Common)" },
     { value: "EAN13", label: "EAN-13 (European Article Number)" },
     { value: "EAN8", label: "EAN-8 (Short EAN)" },
@@ -599,8 +599,8 @@ const Ut = {
   ], Q = () => {
     if (s.trim())
       try {
-        j(/* @__PURE__ */ e.jsx(
-          Ge,
+        T(/* @__PURE__ */ e.jsx(
+          _e,
           {
             value: s,
             format: x,
@@ -608,7 +608,7 @@ const Ut = {
             height: y,
             fontSize: B,
             textAlign: C,
-            textPosition: T,
+            textPosition: j,
             margin: v,
             background: "#ffffff",
             lineColor: "#000000"
@@ -617,9 +617,9 @@ const Ut = {
       } catch (M) {
         console.error("Barcode generation error:", M), alert("Invalid data for selected barcode format. Please check your input.");
       }
-  }, ht = () => {
+  }, ft = () => {
     var M, nt, tt, ct;
-    if (!(!d || !W.current))
+    if (!(!c || !W.current))
       try {
         const q = W.current.querySelector("svg");
         if (!q) {
@@ -628,7 +628,7 @@ const Ut = {
         }
         const P = document.createElement("canvas"), p = P.getContext("2d"), et = q.getBoundingClientRect(), u = ((nt = (M = q.width) == null ? void 0 : M.baseVal) == null ? void 0 : nt.value) || et.width || 200, D = ((ct = (tt = q.height) == null ? void 0 : tt.baseVal) == null ? void 0 : ct.value) || et.height || 100;
         P.width = u, P.height = D;
-        const L = new XMLSerializer().serializeToString(q), H = new Blob([L], { type: "image/svg+xml;charset=utf-8" }), G = URL.createObjectURL(H), it = new Image();
+        const L = new XMLSerializer().serializeToString(q), G = new Blob([L], { type: "image/svg+xml;charset=utf-8" }), _ = URL.createObjectURL(G), it = new Image();
         it.onload = () => {
           p.drawImage(it, 0, 0);
           const X = P.toDataURL("image/png"), V = new Image();
@@ -643,14 +643,14 @@ const Ut = {
               x: 100,
               y: 100,
               imageObject: V
-            }), $();
-          }, V.src = X, URL.revokeObjectURL(G);
-        }, it.src = G;
+            }), H();
+          }, V.src = X, URL.revokeObjectURL(_);
+        }, it.src = _;
       } catch (q) {
         console.error("Error adding barcode to canvas:", q), alert("Failed to add barcode to canvas. Please try again.");
       }
-  }, $ = () => {
-    h(""), j(null), n("CODE128"), R(2), z(100), k(20), o();
+  }, H = () => {
+    h(""), T(null), n("CODE128"), A(2), E(100), k(20), o();
   }, at = (M) => ({
     CODE128: "Supports all ASCII characters. Most versatile format.",
     EAN13: "Requires exactly 12 digits (13th is checksum). Used for retail products.",
@@ -662,14 +662,14 @@ const Ut = {
     pharmacode: "Numbers 3-131070. Used in pharmaceutical industry.",
     codabar: "Supports 0-9, A-D, and symbols. Used in libraries."
   })[M] || "";
-  return f ? /* @__PURE__ */ e.jsx("div", { className: "barcode-modal-overlay", onClick: $, children: /* @__PURE__ */ e.jsxs("div", { className: "barcode-modal-content", onClick: (M) => M.stopPropagation(), children: [
+  return f ? /* @__PURE__ */ e.jsx("div", { className: "barcode-modal-overlay", onClick: H, children: /* @__PURE__ */ e.jsxs("div", { className: "barcode-modal-content", onClick: (M) => M.stopPropagation(), children: [
     /* @__PURE__ */ e.jsxs("div", { className: "barcode-modal-header", children: [
       /* @__PURE__ */ e.jsx("h3", { children: "Generate Barcode" }),
       /* @__PURE__ */ e.jsx(
         "button",
         {
           className: "barcode-modal-close",
-          onClick: $,
+          onClick: H,
           "aria-label": "Close",
           children: "×"
         }
@@ -714,7 +714,7 @@ const Ut = {
               max: "4",
               step: "0.5",
               value: F,
-              onChange: (M) => R(parseFloat(M.target.value))
+              onChange: (M) => A(parseFloat(M.target.value))
             }
           ),
           /* @__PURE__ */ e.jsxs("span", { className: "range-value", children: [
@@ -732,7 +732,7 @@ const Ut = {
               min: "50",
               max: "200",
               value: y,
-              onChange: (M) => z(parseInt(M.target.value))
+              onChange: (M) => E(parseInt(M.target.value))
             }
           ),
           /* @__PURE__ */ e.jsxs("span", { className: "range-value", children: [
@@ -764,7 +764,7 @@ const Ut = {
             "select",
             {
               id: "text-position",
-              value: T,
+              value: j,
               onChange: (M) => O(M.target.value),
               children: [
                 /* @__PURE__ */ e.jsx("option", { value: "bottom", children: "Bottom" }),
@@ -783,14 +783,14 @@ const Ut = {
           children: "Generate Barcode"
         }
       ) }),
-      d && /* @__PURE__ */ e.jsxs("div", { className: "barcode-preview", children: [
+      c && /* @__PURE__ */ e.jsxs("div", { className: "barcode-preview", children: [
         /* @__PURE__ */ e.jsx("h4", { children: "Preview" }),
-        /* @__PURE__ */ e.jsx("div", { className: "barcode-preview-container", ref: W, children: d }),
+        /* @__PURE__ */ e.jsx("div", { className: "barcode-preview-container", ref: W, children: c }),
         /* @__PURE__ */ e.jsx(
           "button",
           {
             className: "barcode-btn barcode-btn-add",
-            onClick: ht,
+            onClick: ft,
             style: {
               backgroundColor: (l == null ? void 0 : l.primaryColor) || "#3b82f6",
               borderColor: (l == null ? void 0 : l.primaryColor) || "#3b82f6"
@@ -801,7 +801,7 @@ const Ut = {
       ] })
     ] })
   ] }) }) : null;
-}, Ze = ({ theme: f }) => /* @__PURE__ */ e.jsxs("div", { className: "premium-feature-container", style: {
+}, ti = ({ theme: f }) => /* @__PURE__ */ e.jsxs("div", { className: "premium-feature-container", style: {
   padding: "20px",
   backgroundColor: "#f8f9fa",
   borderRadius: "8px",
@@ -864,19 +864,19 @@ const Ut = {
                 100% { transform: rotate(360deg); }
             }
         ` })
-] }), ti = ({ isOpen: f, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: h }) => {
-  const [x, n] = A([]), [d, j] = A(!1), [F, R] = A(null), [y, z] = A(""), [B, k] = A(""), [C, J] = A({});
+] }), ei = ({ isOpen: f, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: h }) => {
+  const [x, n] = N([]), [c, T] = N(!1), [F, A] = N(null), [y, E] = N(""), [B, k] = N(""), [C, J] = N({});
   gt(null);
-  const [T, O] = A(!1), [v, lt] = A(!1), [W, yt] = A(!1), Q = `${h}/api/v1/designer`;
+  const [j, O] = N(!1), [v, st] = N(!1), [W, yt] = N(!1), Q = `${h}/api/v1/designer`;
   Z(() => {
-    f && s && ht();
+    f && s && ft();
   }, [f, s]);
-  const ht = async () => {
+  const ft = async () => {
     const P = sessionStorage.getItem("apc_x_sub_status");
-    P === "active" ? (O(!0), lt(!0), at()) : P === "inactive" ? (O(!1), lt(!0)) : (yt(!0), await $());
-  }, $ = async () => {
+    P === "active" ? (O(!0), st(!0), at()) : P === "inactive" ? (O(!1), st(!0)) : (yt(!0), await H());
+  }, H = async () => {
     if (!s) {
-      O(!1), lt(!0), yt(!1);
+      O(!1), st(!0), yt(!1);
       return;
     }
     const P = `${Q}/get-subscription-status/${s}`;
@@ -885,7 +885,7 @@ const Ut = {
     } catch (p) {
       console.error("Subscription check failed:", p), sessionStorage.setItem("apc_x_sub_status", "inactive"), O(!1);
     } finally {
-      yt(!1), lt(!0);
+      yt(!1), st(!0);
     }
   }, at = async () => {
     const P = sessionStorage.getItem("apc_stickers");
@@ -897,7 +897,7 @@ const Ut = {
       } catch {
         console.warn("Failed to parse cached stickers, fetching fresh data");
       }
-    j(!0), R(null);
+    T(!0), A(null);
     try {
       const p = await ie.get(`${Q}/get-stickers`);
       if (p.data && p.data.object && p.data.object.contents) {
@@ -906,9 +906,9 @@ const Ut = {
       } else
         throw new Error("Invalid response format");
     } catch (p) {
-      console.error("Error fetching stickers:", p), R("Failed to load stickers. Please try again.");
+      console.error("Error fetching stickers:", p), A("Failed to load stickers. Please try again.");
     } finally {
-      j(!1);
+      T(!1);
     }
   }, M = (P, p) => {
     a({
@@ -930,8 +930,8 @@ const Ut = {
     return P.forEach((et) => {
       const u = et.name.split("/");
       let D = p;
-      u.forEach((L, H) => {
-        D[L] || (D[L] = H === u.length - 1 ? et : {}), D = D[L];
+      u.forEach((L, G) => {
+        D[L] || (D[L] = G === u.length - 1 ? et : {}), D = D[L];
       });
     }), p;
   }, ct = (P, p = "", et = 0) => /* @__PURE__ */ e.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${et * 15}px` }, children: Object.keys(P).map((u) => {
@@ -947,8 +947,8 @@ const Ut = {
             src: P[u].url,
             alt: u,
             loading: "lazy",
-            onError: (G) => {
-              G.target.style.display = "none";
+            onError: (_) => {
+              _.target.style.display = "none";
             }
           }
         ) })
@@ -986,8 +986,8 @@ const Ut = {
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "sticker-modal-body", children: [
       W && /* @__PURE__ */ e.jsx(se, {}),
-      !T && !W && v && /* @__PURE__ */ e.jsx(Ze, { theme: l }),
-      T && v && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      !j && !W && v && /* @__PURE__ */ e.jsx(ti, { theme: l }),
+      j && v && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsx("div", { className: "sticker-modal-controls", children: /* @__PURE__ */ e.jsx("div", { className: "search-container", children: /* @__PURE__ */ e.jsx(
           "input",
           {
@@ -998,16 +998,16 @@ const Ut = {
             className: "sticker-search"
           }
         ) }) }),
-        d && /* @__PURE__ */ e.jsx(se, {}),
+        c && /* @__PURE__ */ e.jsx(se, {}),
         F && /* @__PURE__ */ e.jsxs("div", { className: "sticker-error", children: [
           /* @__PURE__ */ e.jsx("p", { children: F }),
           /* @__PURE__ */ e.jsx("button", { onClick: at, children: "Retry" })
         ] }),
-        !d && !F && x.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "sticker-grid", children: ct(tt(q)) })
+        !c && !F && x.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "sticker-grid", children: ct(tt(q)) })
       ] })
     ] })
   ] }) }) : null;
-}, ei = [
+}, ii = [
   // FLORAL DESIGNS (40 items)
   {
     id: 1,
@@ -2559,12 +2559,12 @@ const Ut = {
     category: "Geometric",
     description: "Complex mandala flower pattern"
   }
-], ii = ({ isOpen: f, onClose: o, onAddEmbroidery: a, theme: l, apiKey: s, apiEndpoint: h }) => {
-  const [x, n] = A([]), [d, j] = A(!1), [F, R] = A(null), [y, z] = A(""), [B, k] = A("All"), C = gt(null), J = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
+], oi = ({ isOpen: f, onClose: o, onAddEmbroidery: a, theme: l, apiKey: s, apiEndpoint: h }) => {
+  const [x, n] = N([]), [c, T] = N(!1), [F, A] = N(null), [y, E] = N(""), [B, k] = N("All"), C = gt(null), J = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
   Z(() => {
-    f && n(ei);
+    f && n(ii);
   }, [f]);
-  const T = (v) => {
+  const j = (v) => {
     a({
       type: "embroidery",
       src: v.url,
@@ -2577,8 +2577,8 @@ const Ut = {
       y: 100
     }), o();
   }, O = x.filter((v) => {
-    const lt = !y || v.name.toLowerCase().includes(y.toLowerCase()) || v.description.toLowerCase().includes(y.toLowerCase()), W = B === "All" || v.category === B;
-    return lt && W;
+    const st = !y || v.name.toLowerCase().includes(y.toLowerCase()) || v.description.toLowerCase().includes(y.toLowerCase()), W = B === "All" || v.category === B;
+    return st && W;
   });
   return f ? /* @__PURE__ */ e.jsx("div", { className: "embroidery-modal-overlay", onClick: o, children: /* @__PURE__ */ e.jsxs(
     "div",
@@ -2606,7 +2606,7 @@ const Ut = {
               type: "text",
               placeholder: "Search embroidery designs...",
               value: y,
-              onChange: (v) => z(v.target.value),
+              onChange: (v) => E(v.target.value),
               className: "embroidery-search"
             }
           ) }),
@@ -2624,16 +2624,16 @@ const Ut = {
           ] })
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "embroidery-modal-body", children: [
-          d && /* @__PURE__ */ e.jsxs("div", { className: "embroidery-loading", children: [
+          c && /* @__PURE__ */ e.jsxs("div", { className: "embroidery-loading", children: [
             /* @__PURE__ */ e.jsx("div", { className: "loading-spinner" }),
             /* @__PURE__ */ e.jsx("p", { children: "Loading embroidery designs..." })
           ] }),
           F && /* @__PURE__ */ e.jsx("div", { className: "embroidery-error", children: /* @__PURE__ */ e.jsx("p", { children: F }) }),
-          !d && !F && /* @__PURE__ */ e.jsx("div", { className: "embroidery-grid", children: O.map((v) => /* @__PURE__ */ e.jsxs(
+          !c && !F && /* @__PURE__ */ e.jsx("div", { className: "embroidery-grid", children: O.map((v) => /* @__PURE__ */ e.jsxs(
             "div",
             {
               className: "embroidery-item",
-              onClick: () => T(v),
+              onClick: () => j(v),
               title: v.description,
               children: [
                 /* @__PURE__ */ e.jsx("div", { className: "embroidery-preview", children: /* @__PURE__ */ e.jsx(
@@ -2642,8 +2642,8 @@ const Ut = {
                     src: v.url,
                     alt: v.name,
                     loading: "lazy",
-                    onError: (lt) => {
-                      console.error("Failed to load embroidery image:", v.url), lt.target.style.display = "none";
+                    onError: (st) => {
+                      console.error("Failed to load embroidery image:", v.url), st.target.style.display = "none";
                     }
                   }
                 ) }),
@@ -2655,7 +2655,7 @@ const Ut = {
             },
             v.id
           )) }),
-          !d && !F && O.length === 0 && /* @__PURE__ */ e.jsx("div", { className: "no-embroideries", children: /* @__PURE__ */ e.jsx("p", { children: "No embroidery designs found matching your search." }) })
+          !c && !F && O.length === 0 && /* @__PURE__ */ e.jsx("div", { className: "no-embroideries", children: /* @__PURE__ */ e.jsx("p", { children: "No embroidery designs found matching your search." }) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "embroidery-modal-footer", children: /* @__PURE__ */ e.jsxs("div", { className: "embroidery-disclaimer", children: [
           /* @__PURE__ */ e.jsx("span", { className: "disclaimer-icon", children: "ℹ️" }),
@@ -2664,7 +2664,7 @@ const Ut = {
       ]
     }
   ) }) : null;
-}, jt = [
+}, Tt = [
   // MOTIVATIONAL & INSPIRATIONAL (25 items)
   {
     id: 1,
@@ -4601,24 +4601,24 @@ const Ut = {
     fill: "#8B0000",
     textAlign: "center"
   }
-], oi = ({ isOpen: f, onClose: o, onAddText: a, theme: l }) => {
-  const [s, h] = A(""), [x, n] = A("All"), d = ee(() => {
-    const y = jt.reduce((z, B) => (z[B.category] = (z[B.category] || 0) + 1, z), {});
+], ri = ({ isOpen: f, onClose: o, onAddText: a, theme: l }) => {
+  const [s, h] = N(""), [x, n] = N("All"), c = ee(() => {
+    const y = Tt.reduce((E, B) => (E[B.category] = (E[B.category] || 0) + 1, E), {});
     return [
-      { name: "All", count: jt.length },
-      ...Object.entries(y).map(([z, B]) => ({ name: z, count: B }))
+      { name: "All", count: Tt.length },
+      ...Object.entries(y).map(([E, B]) => ({ name: E, count: B }))
     ];
-  }, [jt]), j = ee(() => jt.filter((y) => {
-    const z = !s || y.text.toLowerCase().includes(s.toLowerCase()) || y.category.toLowerCase().includes(s.toLowerCase()), B = x === "All" || y.category === x;
-    return z && B;
-  }), [jt, s, x]), F = (y) => {
-    const z = {
+  }, [Tt]), T = ee(() => Tt.filter((y) => {
+    const E = !s || y.text.toLowerCase().includes(s.toLowerCase()) || y.category.toLowerCase().includes(s.toLowerCase()), B = x === "All" || y.category === x;
+    return E && B;
+  }), [Tt, s, x]), F = (y) => {
+    const E = {
       ...y,
       x: 100,
       y: 100
     };
-    a("text", z), o();
-  }, R = () => {
+    a("text", E), o();
+  }, A = () => {
     a("text", {
       text: "Your Text Here",
       fontSize: 24,
@@ -4644,7 +4644,7 @@ const Ut = {
           className: "search-input"
         }
       ) }),
-      /* @__PURE__ */ e.jsx("div", { className: "category-tabs", children: d.map((y) => /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsx("div", { className: "category-tabs", children: c.map((y) => /* @__PURE__ */ e.jsxs(
         "button",
         {
           className: `category-tab ${x === y.name ? "active" : ""}`,
@@ -4662,11 +4662,11 @@ const Ut = {
       )) })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "templates-grid", children: [
-      /* @__PURE__ */ e.jsx("div", { className: "custom-text-option", onClick: R, children: /* @__PURE__ */ e.jsxs("div", { className: "custom-text-preview", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "custom-text-option", onClick: A, children: /* @__PURE__ */ e.jsxs("div", { className: "custom-text-preview", children: [
         /* @__PURE__ */ e.jsx("div", { className: "custom-icon", children: "✏️" }),
         /* @__PURE__ */ e.jsx("div", { className: "custom-label", children: "Create Custom Text" })
       ] }) }),
-      j.map((y) => /* @__PURE__ */ e.jsxs(
+      T.map((y) => /* @__PURE__ */ e.jsxs(
         "div",
         {
           className: "template-item",
@@ -4701,13 +4701,13 @@ const Ut = {
       ))
     ] }),
     /* @__PURE__ */ e.jsx("div", { className: "modal-footer", children: /* @__PURE__ */ e.jsxs("div", { className: "results-count", children: [
-      j.length,
+      T.length,
       " template",
-      j.length !== 1 ? "s" : "",
+      T.length !== 1 ? "s" : "",
       " found"
     ] }) })
   ] }) }) : null;
-}, ri = ({
+}, ai = ({
   onAddElement: f,
   onDeleteElement: o,
   onDuplicateElement: a,
@@ -4716,21 +4716,21 @@ const Ut = {
   onToggleGrid: h,
   onToggleRulers: x,
   onToggleSnap: n,
-  onImageUpload: d,
-  canUndo: j,
+  onImageUpload: c,
+  canUndo: T,
   canRedo: F,
-  showGrid: R,
+  showGrid: A,
   showRulers: y,
-  snapToGrid: z,
+  snapToGrid: E,
   selectedElement: B,
   theme: k,
   readOnly: C,
   apiKey: J,
-  apiEndpoint: T
+  apiEndpoint: j
 }) => {
-  const [O, v] = A(!1), [lt, W] = A(!1), [yt, Q] = A(!1), [ht, $] = A(!1), [at, M] = A(!1), [nt, tt] = A(!1), [ct, q] = A(!1), P = (U) => {
+  const [O, v] = N(!1), [st, W] = N(!1), [yt, Q] = N(!1), [ft, H] = N(!1), [at, M] = N(!1), [nt, tt] = N(!1), [ct, q] = N(!1), P = (U) => {
     const K = U.target.files[0];
-    K && K.type.startsWith("image/") && d(K), U.target.value = "";
+    K && K.type.startsWith("image/") && c(K), U.target.value = "";
   }, p = (U) => {
     f("icon", {
       iconData: U,
@@ -4747,9 +4747,9 @@ const Ut = {
     f("sticker", U);
   }, L = (U) => {
     f("embroidery", U);
-  }, H = (U, K) => {
+  }, G = (U, K) => {
     f(U, K);
-  }, G = () => {
+  }, _ = () => {
     tt(!nt), q(!1);
   }, it = () => {
     q(!ct), tt(!1);
@@ -4766,7 +4766,7 @@ const Ut = {
           {
             className: "toolbar-btn compact",
             onClick: l,
-            disabled: !j || C,
+            disabled: !T || C,
             title: "Undo (Ctrl+Z)",
             children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: "↶" }),
@@ -4797,7 +4797,7 @@ const Ut = {
               className: "toolbar-btn compact dropdown-trigger",
               disabled: C,
               title: "Add Text",
-              onClick: G,
+              onClick: _,
               children: [
                 /* @__PURE__ */ e.jsx("span", { className: "icon", children: "𝐓" }),
                 /* @__PURE__ */ e.jsx("span", { className: "label", children: "Text" }),
@@ -4896,7 +4896,7 @@ const Ut = {
           )
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ e.jsx(Xe, { onSelectIcon: p, theme: k, disabled: C }),
+        /* @__PURE__ */ e.jsx(Je, { onSelectIcon: p, theme: k, disabled: C }),
         /* @__PURE__ */ e.jsxs(
           "button",
           {
@@ -4943,7 +4943,7 @@ const Ut = {
         "button",
         {
           className: "toolbar-btn compact",
-          onClick: () => $(!0),
+          onClick: () => H(!0),
           disabled: C,
           title: "Add Embroidery Design",
           children: [
@@ -4988,7 +4988,7 @@ const Ut = {
         /* @__PURE__ */ e.jsxs(
           "button",
           {
-            className: `toolbar-btn compact ${R ? "active" : ""}`,
+            className: `toolbar-btn compact ${A ? "active" : ""}`,
             onClick: h,
             title: "Toggle Grid",
             children: [
@@ -5012,7 +5012,7 @@ const Ut = {
         /* @__PURE__ */ e.jsxs(
           "button",
           {
-            className: `toolbar-btn compact ${z ? "active" : ""}`,
+            className: `toolbar-btn compact ${E ? "active" : ""}`,
             onClick: n,
             title: "Snap to Grid",
             children: [
@@ -5024,7 +5024,7 @@ const Ut = {
       ] })
     ] }),
     /* @__PURE__ */ e.jsx(
-      Je,
+      Ke,
       {
         isOpen: O,
         onClose: () => v(!1),
@@ -5033,54 +5033,54 @@ const Ut = {
       }
     ),
     /* @__PURE__ */ e.jsx(
-      Ke,
+      Ze,
       {
-        isOpen: lt,
+        isOpen: st,
         onClose: () => W(!1),
         onAddBarcode: u,
         theme: k
       }
     ),
     /* @__PURE__ */ e.jsx(
-      ti,
+      ei,
       {
         isOpen: yt,
         onClose: () => Q(!1),
         onAddSticker: D,
         theme: k,
         apiKey: J,
-        apiEndpoint: T
+        apiEndpoint: j
       }
     ),
     /* @__PURE__ */ e.jsx(
-      ii,
+      oi,
       {
-        isOpen: ht,
-        onClose: () => $(!1),
+        isOpen: ft,
+        onClose: () => H(!1),
         onAddEmbroidery: L,
         theme: k,
         apiKey: J,
-        apiEndpoint: T
+        apiEndpoint: j
       }
     ),
     /* @__PURE__ */ e.jsx(
-      oi,
+      ri,
       {
         isOpen: at,
         onClose: () => M(!1),
-        onAddText: H,
+        onAddText: G,
         theme: k
       }
     )
   ] });
-}, ai = ({
+}, si = ({
   selectedElement: f,
   onUpdate: o,
   onMoveLayer: a,
   availableFonts: l,
   theme: s
 }) => {
-  const [h, x] = A(!1);
+  const [h, x] = N(!1);
   if (!f)
     return /* @__PURE__ */ e.jsxs("div", { className: "properties-panel", children: [
       /* @__PURE__ */ e.jsx("h3", { children: "Properties" }),
@@ -5088,7 +5088,7 @@ const Ut = {
     ] });
   const n = (k, C) => {
     o(f.id, { [k]: C });
-  }, d = () => {
+  }, c = () => {
     var k, C, J;
     return /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
       /* @__PURE__ */ e.jsx("h4", { children: "Text Content" }),
@@ -5098,7 +5098,7 @@ const Ut = {
           "textarea",
           {
             value: f.text || "",
-            onChange: (T) => n("text", T.target.value),
+            onChange: (j) => n("text", j.target.value),
             rows: 3,
             placeholder: "Enter your text here..."
           }
@@ -5110,8 +5110,8 @@ const Ut = {
           "select",
           {
             value: f.fontFamily || "Arial",
-            onChange: (T) => n("fontFamily", T.target.value),
-            children: l.map((T) => /* @__PURE__ */ e.jsx("option", { value: T, children: T }, T))
+            onChange: (j) => n("fontFamily", j.target.value),
+            children: l.map((j) => /* @__PURE__ */ e.jsx("option", { value: j, children: j }, j))
           }
         )
       ] }),
@@ -5123,7 +5123,7 @@ const Ut = {
             {
               type: "number",
               value: f.fontSize || 20,
-              onChange: (T) => n("fontSize", parseInt(T.target.value)),
+              onChange: (j) => n("fontSize", parseInt(j.target.value)),
               min: "8",
               max: "200"
             }
@@ -5137,7 +5137,7 @@ const Ut = {
               type: "number",
               step: "0.1",
               value: f.lineHeight || 1.2,
-              onChange: (T) => n("lineHeight", parseFloat(T.target.value)),
+              onChange: (j) => n("lineHeight", parseFloat(j.target.value)),
               min: "0.5",
               max: "3"
             }
@@ -5193,8 +5193,8 @@ const Ut = {
             {
               className: (k = f.textDecoration) != null && k.includes("underline") ? "active" : "",
               onClick: () => {
-                const T = f.textDecoration || "", O = T.split(" ").filter((v) => v && v !== "underline");
-                T.includes("underline") || O.push("underline"), n("textDecoration", O.join(" ").trim());
+                const j = f.textDecoration || "", O = j.split(" ").filter((v) => v && v !== "underline");
+                j.includes("underline") || O.push("underline"), n("textDecoration", O.join(" ").trim());
               },
               title: "Underline",
               children: /* @__PURE__ */ e.jsx("u", { children: "U" })
@@ -5205,8 +5205,8 @@ const Ut = {
             {
               className: (C = f.textDecoration) != null && C.includes("overline") ? "active" : "",
               onClick: () => {
-                const T = f.textDecoration || "", O = T.split(" ").filter((v) => v && v !== "overline");
-                T.includes("overline") || O.push("overline"), n("textDecoration", O.join(" ").trim());
+                const j = f.textDecoration || "", O = j.split(" ").filter((v) => v && v !== "overline");
+                j.includes("overline") || O.push("overline"), n("textDecoration", O.join(" ").trim());
               },
               title: "Overline",
               children: /* @__PURE__ */ e.jsx("span", { style: { textDecoration: "overline" }, children: "O" })
@@ -5217,8 +5217,8 @@ const Ut = {
             {
               className: (J = f.textDecoration) != null && J.includes("line-through") ? "active" : "",
               onClick: () => {
-                const T = f.textDecoration || "", O = T.split(" ").filter((v) => v && v !== "line-through");
-                T.includes("line-through") || O.push("line-through"), n("textDecoration", O.join(" ").trim());
+                const j = f.textDecoration || "", O = j.split(" ").filter((v) => v && v !== "line-through");
+                j.includes("line-through") || O.push("line-through"), n("textDecoration", O.join(" ").trim());
               },
               title: "Strikethrough",
               children: /* @__PURE__ */ e.jsx("s", { children: "S" })
@@ -5316,7 +5316,7 @@ const Ut = {
             {
               type: "color",
               value: f.fill || "#000000",
-              onChange: (T) => n("fill", T.target.value)
+              onChange: (j) => n("fill", j.target.value)
             }
           )
         ] }),
@@ -5328,7 +5328,7 @@ const Ut = {
               {
                 type: "color",
                 value: f.backgroundColor || "#ffffff",
-                onChange: (T) => n("backgroundColor", T.target.value),
+                onChange: (j) => n("backgroundColor", j.target.value),
                 disabled: !f.hasBackground
               }
             ),
@@ -5354,7 +5354,7 @@ const Ut = {
                 type: "number",
                 step: "0.1",
                 value: f.letterSpacing || 0,
-                onChange: (T) => n("letterSpacing", parseFloat(T.target.value)),
+                onChange: (j) => n("letterSpacing", parseFloat(j.target.value)),
                 min: "-5",
                 max: "10"
               }
@@ -5368,7 +5368,7 @@ const Ut = {
                 type: "number",
                 step: "0.1",
                 value: f.wordSpacing || 0,
-                onChange: (T) => n("wordSpacing", parseFloat(T.target.value)),
+                onChange: (j) => n("wordSpacing", parseFloat(j.target.value)),
                 min: "-10",
                 max: "20"
               }
@@ -5394,7 +5394,7 @@ const Ut = {
                   {
                     type: "number",
                     value: f.textShadowX || 2,
-                    onChange: (T) => n("textShadowX", parseInt(T.target.value)),
+                    onChange: (j) => n("textShadowX", parseInt(j.target.value)),
                     min: "-20",
                     max: "20"
                   }
@@ -5407,7 +5407,7 @@ const Ut = {
                   {
                     type: "number",
                     value: f.textShadowY || 2,
-                    onChange: (T) => n("textShadowY", parseInt(T.target.value)),
+                    onChange: (j) => n("textShadowY", parseInt(j.target.value)),
                     min: "-20",
                     max: "20"
                   }
@@ -5420,7 +5420,7 @@ const Ut = {
                   {
                     type: "number",
                     value: f.textShadowBlur || 4,
-                    onChange: (T) => n("textShadowBlur", parseInt(T.target.value)),
+                    onChange: (j) => n("textShadowBlur", parseInt(j.target.value)),
                     min: "0",
                     max: "20"
                   }
@@ -5433,7 +5433,7 @@ const Ut = {
                   {
                     type: "color",
                     value: f.textShadowColor || "#000000",
-                    onChange: (T) => n("textShadowColor", T.target.value)
+                    onChange: (j) => n("textShadowColor", j.target.value)
                   }
                 )
               ] })
@@ -5448,7 +5448,7 @@ const Ut = {
               {
                 type: "color",
                 value: f.stroke || "#000000",
-                onChange: (T) => n("stroke", T.target.value)
+                onChange: (j) => n("stroke", j.target.value)
               }
             )
           ] }),
@@ -5459,7 +5459,7 @@ const Ut = {
               {
                 type: "number",
                 value: f.strokeWidth || 0,
-                onChange: (T) => n("strokeWidth", parseInt(T.target.value)),
+                onChange: (j) => n("strokeWidth", parseInt(j.target.value)),
                 min: "0",
                 max: "20"
               }
@@ -5476,7 +5476,7 @@ const Ut = {
               max: "1",
               step: "0.1",
               value: f.opacity || 1,
-              onChange: (T) => n("opacity", parseFloat(T.target.value))
+              onChange: (j) => n("opacity", parseFloat(j.target.value))
             }
           ),
           /* @__PURE__ */ e.jsxs("span", { children: [
@@ -5490,7 +5490,7 @@ const Ut = {
             "select",
             {
               value: f.fontVariant || "normal",
-              onChange: (T) => n("fontVariant", T.target.value),
+              onChange: (j) => n("fontVariant", j.target.value),
               children: [
                 /* @__PURE__ */ e.jsx("option", { value: "normal", children: "Normal" }),
                 /* @__PURE__ */ e.jsx("option", { value: "small-caps", children: "Small Caps" })
@@ -5504,7 +5504,7 @@ const Ut = {
             "select",
             {
               value: f.writingMode || "horizontal-tb",
-              onChange: (T) => n("writingMode", T.target.value),
+              onChange: (j) => n("writingMode", j.target.value),
               children: [
                 /* @__PURE__ */ e.jsx("option", { value: "horizontal-tb", children: "Horizontal" }),
                 /* @__PURE__ */ e.jsx("option", { value: "vertical-rl", children: "Vertical Right-to-Left" }),
@@ -5543,7 +5543,7 @@ const Ut = {
             {
               type: "number",
               value: f.backgroundPadding || 5,
-              onChange: (T) => n("backgroundPadding", parseInt(T.target.value)),
+              onChange: (j) => n("backgroundPadding", parseInt(j.target.value)),
               min: "0",
               max: "50",
               disabled: !f.hasBackground
@@ -5552,7 +5552,7 @@ const Ut = {
         ] })
       ] })
     ] });
-  }, j = () => /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
+  }, T = () => /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
     /* @__PURE__ */ e.jsx("h4", { children: "Shape Properties" }),
     /* @__PURE__ */ e.jsxs("div", { className: "property-row", children: [
       /* @__PURE__ */ e.jsx("label", { children: "Fill Color" }),
@@ -5648,7 +5648,7 @@ const Ut = {
         }
       )
     ] })
-  ] }), R = () => /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
+  ] }), A = () => /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
     /* @__PURE__ */ e.jsx("h4", { children: "Position & Size" }),
     /* @__PURE__ */ e.jsxs("div", { className: "property-row", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "input-group", children: [
@@ -5776,7 +5776,7 @@ const Ut = {
         )
       ] })
     ] })
-  ] }), z = () => /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
+  ] }), E = () => /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
     /* @__PURE__ */ e.jsx("h4", { children: "Layer Controls" }),
     /* @__PURE__ */ e.jsxs("div", { className: "button-group vertical", children: [
       /* @__PURE__ */ e.jsx("button", { onClick: () => a(f.id, "top"), children: "Bring to Front" }),
@@ -5803,12 +5803,12 @@ const Ut = {
       /* @__PURE__ */ e.jsx("span", { className: "element-type", children: f.type })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "panel-content", children: [
-      f.type === "text" && d(),
-      B.includes(f.type) && j(),
+      f.type === "text" && c(),
+      B.includes(f.type) && T(),
       f.type === "image" && F(),
       f.type === "horizontalLine" && y(),
-      R(),
-      z(),
+      A(),
+      E(),
       /* @__PURE__ */ e.jsx("div", { className: "property-group", children: /* @__PURE__ */ e.jsxs(
         "button",
         {
@@ -5822,7 +5822,7 @@ const Ut = {
       ) })
     ] })
   ] });
-}, si = ({
+}, li = ({
   elements: f,
   selectedElement: o,
   onSelectElement: a,
@@ -5830,8 +5830,8 @@ const Ut = {
   onDeleteElement: s,
   theme: h
 }) => {
-  const x = (d, j) => {
-    switch (d) {
+  const x = (c, T) => {
+    switch (c) {
       case "text":
         return "T";
       case "rectangle":
@@ -5871,32 +5871,32 @@ const Ut = {
       default:
         return "?";
     }
-  }, n = (d) => {
-    var j, F;
-    if (d.type === "text")
-      return d.isIcon && d.iconData ? `Icon: ${d.iconData.name}` : ((j = d.text) == null ? void 0 : j.substring(0, 20)) + (((F = d.text) == null ? void 0 : F.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", y = d.data || "";
-      return `Barcode (${R}): ${y.substring(0, 10) + (y.length > 10 ? "..." : "")}`;
+  }, n = (c) => {
+    var T, F;
+    if (c.type === "text")
+      return c.isIcon && c.iconData ? `Icon: ${c.iconData.name}` : ((T = c.text) == null ? void 0 : T.substring(0, 20)) + (((F = c.text) == null ? void 0 : F.length) > 20 ? "..." : "") || "Text";
+    if (c.type === "qrcode")
+      return `QR Code: ${(c.data || "").substring(0, 15) + ((c.data || "").length > 15 ? "..." : "")}`;
+    if (c.type === "barcode") {
+      const A = c.format || "CODE128", y = c.data || "";
+      return `Barcode (${A}): ${y.substring(0, 10) + (y.length > 10 ? "..." : "")}`;
     }
-    return d.type === "sticker" ? `Sticker: ${(d.name || "Untitled").substring(0, 15)}` : d.type === "embroidery" ? `Embroidery: ${(d.name || "Design").substring(0, 15)}` : d.type.charAt(0).toUpperCase() + d.type.slice(1);
+    return c.type === "sticker" ? `Sticker: ${(c.name || "Untitled").substring(0, 15)}` : c.type === "embroidery" ? `Embroidery: ${(c.name || "Design").substring(0, 15)}` : c.type.charAt(0).toUpperCase() + c.type.slice(1);
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "layers-panel", children: [
     /* @__PURE__ */ e.jsxs("div", { className: "panel-header", children: [
       /* @__PURE__ */ e.jsx("h3", { children: "Layers" }),
       /* @__PURE__ */ e.jsx("span", { className: "layer-count", children: f.length })
     ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "layers-list", children: f.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "no-layers", children: "No elements added yet" }) : [...f].reverse().map((d, j) => /* @__PURE__ */ e.jsxs(
+    /* @__PURE__ */ e.jsx("div", { className: "layers-list", children: f.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "no-layers", children: "No elements added yet" }) : [...f].reverse().map((c, T) => /* @__PURE__ */ e.jsxs(
       "div",
       {
-        className: `layer-item ${(o == null ? void 0 : o.id) === d.id ? "selected" : ""}`,
-        onClick: () => a(d),
+        className: `layer-item ${(o == null ? void 0 : o.id) === c.id ? "selected" : ""}`,
+        onClick: () => a(c),
         children: [
           /* @__PURE__ */ e.jsxs("div", { className: "layer-info", children: [
-            /* @__PURE__ */ e.jsx("span", { className: "layer-icon", children: x(d.type) }),
-            /* @__PURE__ */ e.jsx("span", { className: "layer-name", children: n(d) })
+            /* @__PURE__ */ e.jsx("span", { className: "layer-icon", children: x(c.type) }),
+            /* @__PURE__ */ e.jsx("span", { className: "layer-name", children: n(c) })
           ] }),
           /* @__PURE__ */ e.jsxs("div", { className: "layer-controls", children: [
             /* @__PURE__ */ e.jsx(
@@ -5904,9 +5904,9 @@ const Ut = {
               {
                 className: "layer-btn",
                 onClick: (F) => {
-                  F.stopPropagation(), l(d.id, "up");
+                  F.stopPropagation(), l(c.id, "up");
                 },
-                disabled: j === 0,
+                disabled: T === 0,
                 title: "Move Up",
                 children: "↑"
               }
@@ -5916,9 +5916,9 @@ const Ut = {
               {
                 className: "layer-btn",
                 onClick: (F) => {
-                  F.stopPropagation(), l(d.id, "down");
+                  F.stopPropagation(), l(c.id, "down");
                 },
-                disabled: j === f.length - 1,
+                disabled: T === f.length - 1,
                 title: "Move Down",
                 children: "↓"
               }
@@ -5928,7 +5928,7 @@ const Ut = {
               {
                 className: "layer-btn delete",
                 onClick: (F) => {
-                  F.stopPropagation(), s(d.id);
+                  F.stopPropagation(), s(c.id);
                 },
                 title: "Delete",
                 children: "×"
@@ -5937,40 +5937,40 @@ const Ut = {
           ] })
         ]
       },
-      d.id
+      c.id
     )) })
   ] });
 };
-class li {
+class ni {
   constructor() {
     this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d");
   }
   // Add this method to the ExportManager class
   async exportAllSections(o, a, l, s, h = "png", x = !0) {
     const n = {};
-    for (const d of a) {
-      const j = d.id || d.sectionName, F = o[j];
+    for (const c of a) {
+      const T = c.id || c.sectionName, F = o[T];
       if (!F || !F.elements || F.elements.length === 0) {
-        console.log(`Skipping section ${j} - no elements`);
+        console.log(`Skipping section ${T} - no elements`);
         continue;
       }
       if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), x) {
-        const y = d.image || d.sectionImage;
+        const y = c.image || c.sectionImage;
         if (y)
           try {
-            const z = await this.loadImage(y);
-            await this.processImageColor(z, F.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
-          } catch (z) {
-            console.warn("Failed to load background image:", z);
+            const E = await this.loadImage(y);
+            await this.processImageColor(E, F.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
+          } catch (E) {
+            console.warn("Failed to load background image:", E);
           }
       } else
         this.ctx.clearRect(0, 0, l, s);
       for (const y of F.elements)
         await this.drawElement(y);
-      const R = this.canvas.toDataURL(`image/${h}`, h === "jpeg" ? 0.9 : void 0);
-      n[j] = {
-        dataUrl: R,
-        blob: await this.dataUrlToBlob(R)
+      const A = this.canvas.toDataURL(`image/${h}`, h === "jpeg" ? 0.9 : void 0);
+      n[T] = {
+        dataUrl: A,
+        blob: await this.dataUrlToBlob(A)
       };
     }
     return n;
@@ -5988,7 +5988,7 @@ class li {
     } else
       for (const s of l) {
         const { blob: h } = o[s], x = URL.createObjectURL(h), n = document.createElement("a");
-        n.href = x, n.download = `${a}-${s}.png`, document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(x), await new Promise((d) => setTimeout(d, 100));
+        n.href = x, n.download = `${a}-${s}.png`, document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(x), await new Promise((c) => setTimeout(c, 100));
       }
   }
   async loadImage(o) {
@@ -6010,17 +6010,17 @@ class li {
       console.warn("Invalid target color:", a);
       return;
     }
-    const { r: d, g: j, b: F } = n;
-    for (let R = 0; R < x.length; R += 4) {
-      if (x[R + 3] === 0) continue;
-      const z = this.getLuma(x[R], x[R + 1], x[R + 2]);
-      x[R] = Math.round(d * z), x[R + 1] = Math.round(j * z), x[R + 2] = Math.round(F * z);
+    const { r: c, g: T, b: F } = n;
+    for (let A = 0; A < x.length; A += 4) {
+      if (x[A + 3] === 0) continue;
+      const E = this.getLuma(x[A], x[A + 1], x[A + 2]);
+      x[A] = Math.round(c * E), x[A + 1] = Math.round(T * E), x[A + 2] = Math.round(F * E);
     }
-    return s.putImageData(h, 0, 0), this.processedImage = new Image(), new Promise((R) => {
+    return s.putImageData(h, 0, 0), this.processedImage = new Image(), new Promise((A) => {
       this.processedImage.onload = () => {
-        R();
+        A();
       }, this.processedImage.onerror = () => {
-        console.error("Failed to create processed image"), R();
+        console.error("Failed to create processed image"), A();
       }, this.processedImage.src = l.toDataURL("image/png");
     });
   }
@@ -6109,8 +6109,8 @@ class li {
     const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, h = s * 0.4, x = o.numPoints || 5;
     this.ctx.beginPath();
     for (let n = 0; n < x * 2; n++) {
-      const d = n % 2 === 0 ? s : h, j = n * Math.PI / x, F = a + Math.cos(j) * d, R = l + Math.sin(j) * d;
-      n === 0 ? this.ctx.moveTo(F, R) : this.ctx.lineTo(F, R);
+      const c = n % 2 === 0 ? s : h, T = n * Math.PI / x, F = a + Math.cos(T) * c, A = l + Math.sin(T) * c;
+      n === 0 ? this.ctx.moveTo(F, A) : this.ctx.lineTo(F, A);
     }
     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());
   }
@@ -6143,8 +6143,8 @@ class li {
     const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, h = 6;
     this.ctx.beginPath();
     for (let x = 0; x < h; x++) {
-      const n = x * 2 * Math.PI / h - Math.PI / 2, d = a + s * Math.cos(n), j = l + s * Math.sin(n);
-      x === 0 ? this.ctx.moveTo(d, j) : this.ctx.lineTo(d, j);
+      const n = x * 2 * Math.PI / h - Math.PI / 2, c = a + s * Math.cos(n), T = l + s * Math.sin(n);
+      x === 0 ? this.ctx.moveTo(c, T) : this.ctx.lineTo(c, T);
     }
     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());
   }
@@ -6152,8 +6152,8 @@ class li {
     const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, h = 5;
     this.ctx.beginPath();
     for (let x = 0; x < h; x++) {
-      const n = x * 2 * Math.PI / h - Math.PI / 2, d = a + s * Math.cos(n), j = l + s * Math.sin(n);
-      x === 0 ? this.ctx.moveTo(d, j) : this.ctx.lineTo(d, j);
+      const n = x * 2 * Math.PI / h - Math.PI / 2, c = a + s * Math.cos(n), T = l + s * Math.sin(n);
+      x === 0 ? this.ctx.moveTo(c, T) : this.ctx.lineTo(c, T);
     }
     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());
   }
@@ -6274,26 +6274,26 @@ class li {
   }
   // Export all sections as JSON with File objects
   async exportAllSectionsAsJSON(o, a, l, s, h = "png") {
-    const x = [], n = [], d = {};
+    const x = [], n = [], c = {};
     for (const F of a) {
-      const R = F.id || F.sectionName, y = o[R];
+      const A = F.id || F.sectionName, y = o[A];
       if (!y || !y.elements || y.elements.length === 0) {
-        console.log(`Skipping section ${R} - no elements`);
+        console.log(`Skipping section ${A} - no elements`);
         continue;
       }
-      const z = {
+      const E = {
         ...y,
         // Include background information
         backgroundImage: F.image || F.sectionImage,
         sectionImage: F.image || F.sectionImage,
-        sectionName: R,
+        sectionName: A,
         // Ensure we have the selected color
         selectedColor: y.selectedColor || "#FFFFFF",
         // Include canvas dimensions
         canvasWidth: l,
         canvasHeight: s
       };
-      d[R] = z;
+      c[A] = E;
       const B = await this.exportSectionAsBlob(
         y,
         F,
@@ -6305,11 +6305,11 @@ class li {
       if (B) {
         const C = await this.blobToFile(
           B,
-          `${R}-full.${h}`,
+          `${A}-full.${h}`,
           `image/${h}`
         );
         x.push({
-          sectionName: R,
+          sectionName: A,
           sectionImage: C
         });
       }
@@ -6324,19 +6324,20 @@ class li {
       if (k) {
         const C = await this.blobToFile(
           k,
-          `${R}-print.${h}`,
+          `${A}-print.${h}`,
           `image/${h}`
         );
         n.push({
-          sectionName: R,
+          sectionName: A,
           sectionImage: C
         });
       }
     }
-    const j = {
-      sections: d,
+    const T = {
+      sections: c,
       canvasWidth: l,
       canvasHeight: s,
+      sectionImage: a[0].image || a[0].sectionImage,
       format: h,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       version: "1.0",
@@ -6352,7 +6353,7 @@ class li {
     return {
       fullDesign: x,
       printReady: n,
-      designFile: JSON.stringify(j)
+      designFile: JSON.stringify(T)
     };
   }
   // Helper method to export a single section as blob
@@ -6362,10 +6363,10 @@ class li {
         const n = a.image || a.sectionImage;
         if (n)
           try {
-            const d = await this.loadImage(n);
-            await this.processImageColor(d, o.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
-          } catch (d) {
-            console.warn("Failed to load background image:", d);
+            const c = await this.loadImage(n);
+            await this.processImageColor(c, o.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
+          } catch (c) {
+            console.warn("Failed to load background image:", c);
           }
       } else
         this.ctx.clearRect(0, 0, l, s);
@@ -6379,14 +6380,14 @@ class li {
     }
   }
   async exportCurrentSectionAsJSON(o, a = "png") {
-    var R, y, z, B, k, C, J, T, O;
-    const l = ((R = o.activeSection) == null ? void 0 : R.sectionName) || "main", s = {
+    var A, y, E, B, k, C, J, j, O;
+    const l = ((A = o.activeSection) == null ? void 0 : A.sectionName) || "main", s = {
       elements: o.elements,
       selectedColor: o.selectedColor,
       canvasWidth: o.canvasWidth,
       canvasHeight: o.canvasHeight,
       // Include background information
-      backgroundImage: ((y = o.activeSection) == null ? void 0 : y.sectionImage) || ((z = o.activeSection) == null ? void 0 : z.image),
+      backgroundImage: ((y = o.activeSection) == null ? void 0 : y.sectionImage) || ((E = o.activeSection) == null ? void 0 : E.image),
       sectionImage: ((B = o.activeSection) == null ? void 0 : B.sectionImage) || ((k = o.activeSection) == null ? void 0 : k.image),
       sectionName: l,
       zoomLevel: o.zoomLevel,
@@ -6397,7 +6398,7 @@ class li {
       sectionName: l,
       image: (C = o.activeSection) == null ? void 0 : C.sectionImage,
       sectionImage: (J = o.activeSection) == null ? void 0 : J.sectionImage
-    }, x = [], n = [], d = await this.exportSectionAsBlob(
+    }, x = [], n = [], c = await this.exportSectionAsBlob(
       s,
       h,
       o.canvasWidth,
@@ -6405,9 +6406,9 @@ class li {
       a,
       !0
     );
-    if (d) {
+    if (c) {
       const v = await this.blobToFile(
-        d,
+        c,
         `${l}-full.${a}`,
         `image/${a}`
       );
@@ -6416,7 +6417,7 @@ class li {
         sectionImage: v
       });
     }
-    const j = await this.exportSectionAsBlob(
+    const T = await this.exportSectionAsBlob(
       s,
       h,
       o.canvasWidth,
@@ -6424,9 +6425,9 @@ class li {
       a,
       !1
     );
-    if (j) {
+    if (T) {
       const v = await this.blobToFile(
-        j,
+        T,
         `${l}-print.${a}`,
         `image/${a}`
       );
@@ -6446,7 +6447,7 @@ class li {
       productInfo: {
         sections: [{
           sectionName: l,
-          sectionImage: ((T = o.activeSection) == null ? void 0 : T.sectionImage) || ((O = o.activeSection) == null ? void 0 : O.image),
+          sectionImage: ((j = o.activeSection) == null ? void 0 : j.sectionImage) || ((O = o.activeSection) == null ? void 0 : O.image),
           id: l
         }]
       }
@@ -6458,7 +6459,7 @@ class li {
     };
   }
 }
-class ni {
+class ci {
   constructor(o = "localStorage") {
     this.storage = o === "sessionStorage" ? sessionStorage : localStorage, this.STORAGE_PREFIX = "mypixia_canvas_", this.DESIGNS_LIST_KEY = "mypixia_saved_designs";
   }
@@ -6628,7 +6629,7 @@ class ni {
       timestamp: l,
       lastModified: l
     };
-    h >= 0 ? s[h] = x : s.push(x), s.sort((n, d) => new Date(d.timestamp) - new Date(n.timestamp)), this.storage.setItem(this.DESIGNS_LIST_KEY, JSON.stringify(s));
+    h >= 0 ? s[h] = x : s.push(x), s.sort((n, c) => new Date(c.timestamp) - new Date(n.timestamp)), this.storage.setItem(this.DESIGNS_LIST_KEY, JSON.stringify(s));
   }
   validateDesignData(o) {
     return o && o.id && o.name && o.canvasData && Array.isArray(o.canvasData.elements);
@@ -6648,7 +6649,7 @@ class ni {
     return "Unknown";
   }
 }
-const ci = Oe((f, o) => {
+const di = Qe((f, o) => {
   const {
     theme: a = {
       primaryColor: "#000000",
@@ -6679,45 +6680,45 @@ const ci = Oe((f, o) => {
       ]
     },
     initFile: h
-  } = f, [x, n] = A([]), [d, j] = A(null), [F, R] = A(!1), [y, z] = A(!1), [B, k] = A(!1), [C, J] = A({ x: 0, y: 0 }), [T, O] = A(null), [v, lt] = A(800), [W, yt] = A(600), [Q, ht] = A(1), [$, at] = A(s.colorSettings[0]), [M, nt] = A(!1), [tt, ct] = A(!0), [q, P] = A(!0), [p, et] = A(s.sections[0]), [u, D] = A(!1), [L, H] = A({}), [G, it] = A([]), [X, V] = A(-1), [U] = A(new ni("localStorage")), K = gt(null), kt = gt(null), xt = gt(null), ut = gt(null), Ot = gt(null), zt = gt(new li()), wt = gt(!1), st = rt(() => {
+  } = f, [x, n] = N([]), [c, T] = N(null), [F, A] = N(!1), [y, E] = N(!1), [B, k] = N(!1), [C, J] = N({ x: 0, y: 0 }), [j, O] = N(null), [v, st] = N(800), [W, yt] = N(600), [Q, ft] = N(1), [H, at] = N(s.colorSettings[0]), [M, nt] = N(!1), [tt, ct] = N(!0), [q, P] = N(!0), [p, et] = N(s.sections[0]), [u, D] = N(!1), [L, G] = N({}), [_, it] = N([]), [X, V] = N(-1), [U] = N(new ci("localStorage")), K = gt(null), kt = gt(null), xt = gt(null), ut = gt(null), Ot = gt(null), Bt = gt(new ni()), wt = gt(!1), [fi, ne] = N(null), lt = rt(() => {
     const i = {
       elements: JSON.parse(JSON.stringify(x)),
-      selectedElement: d ? { ...d } : null,
+      selectedElement: c ? { ...c } : null,
       timestamp: Date.now()
-    }, t = G.slice(0, X + 1);
+    }, t = _.slice(0, X + 1);
     t.push(i), t.length > 50 ? t.shift() : V(X + 1), it(t);
-  }, [x, d, G, X]), St = rt(() => ({
+  }, [x, c, _, X]), St = rt(() => ({
     elements: x,
     canvasWidth: v,
     canvasHeight: W,
-    selectedColor: $,
+    selectedColor: H,
     activeSection: p,
     product: s,
     sectionDesigns: L,
     zoomLevel: Q,
     showGrid: M,
     snapToGrid: q,
-    selectedElement: d ? { ...d } : null,
+    selectedElement: c ? { ...c } : null,
     canvasRef: K
     // Include reference for thumbnail generation
-  }), [x, v, W, $, p, s, L, Q, M, q, d]);
+  }), [x, v, W, H, p, s, L, Q, M, q, c]);
   Z(() => {
     const t = setTimeout(async () => {
-      if (x.length === 0 && G.length <= 1) {
+      if (x.length === 0 && _.length <= 1) {
         if (h)
           try {
-            const N = await fetch(h);
-            if (N.ok) {
-              const E = await N.text();
-              if (E.trim()) {
-                const Y = JSON.parse(E.trim());
-                if (Y.sections && typeof Y.sections == "object") {
-                  const ft = Object.keys(Y.sections)[0], ot = Y.sections[ft];
+            const I = await fetch(h);
+            if (I.ok) {
+              const z = await I.text();
+              if (z.trim()) {
+                const $ = JSON.parse(z.trim());
+                if (console.log("design data is", $), ne($), $.sections && typeof $.sections == "object") {
+                  const dt = Object.keys($.sections)[0], ot = $.sections[dt];
                   if (ot && ot.elements) {
-                    console.log("Loading design from file:", h), n(ot.elements || []), lt(ot.canvasWidth || 800), yt(ot.canvasHeight || 600), at(ot.selectedColor || s.colorSettings[0]), ht(ot.zoomLevel || 1), nt(ot.showGrid || !1), P(ot.snapToGrid || !0), j(null), Y.sections && H(Y.sections);
-                    const Rt = s.sections.find((Dt) => Dt.sectionName === ft);
+                    console.log("Loading design from file:", h), n(ot.elements || []), st(ot.canvasWidth || 800), yt(ot.canvasHeight || 600), at(ot.selectedColor || s.colorSettings[0]), ft(ot.zoomLevel || 1), nt(ot.showGrid || !1), P(ot.snapToGrid || !0), T(null), $.sections && G($.sections);
+                    const Rt = s.sections.find((Dt) => Dt.sectionName === dt);
                     Rt && et(Rt), it([]), V(-1), setTimeout(() => {
-                      st();
+                      lt();
                     }, 100);
                     return;
                   }
@@ -6725,13 +6726,13 @@ const ci = Oe((f, o) => {
               }
             } else
               console.warn("Failed to load design file, using default text");
-          } catch (N) {
-            console.error("Error loading design file:", N), console.warn("Using default text instead");
+          } catch (I) {
+            console.error("Error loading design file:", I), console.warn("Using default text instead");
           }
-        const r = 24, c = "Arial", g = "Change me", w = document.createElement("canvas").getContext("2d");
-        w.font = `${r}px ${c}`;
-        const b = w.measureText(g).width, I = {
-          id: dt(),
+        const r = 24, d = "Arial", g = "Change me", w = document.createElement("canvas").getContext("2d");
+        w.font = `${r}px ${d}`;
+        const b = w.measureText(g).width, R = {
+          id: ht(),
           type: "text",
           x: v / 2 - b / 2,
           // Center the actual text width
@@ -6741,52 +6742,7 @@ const ci = Oe((f, o) => {
           height: r,
           text: g,
           fontSize: r,
-          fontFamily: c,
-          fontWeight: "normal",
-          fontStyle: "normal",
-          textAlign: "left",
-          // Use left alignment to match positioning
-          fill: "#000000",
-          stroke: "",
-          strokeWidth: 0,
-          rotation: 0,
-          opacity: 1
-        };
-        n([I]), j(I), setTimeout(() => {
-          st();
-        }, 100);
-      }
-    }, 300);
-    return () => clearTimeout(t);
-  }, [h, s.colorSettings, s.sections]), Z(() => {
-    const t = setTimeout(async () => {
-      if (x.length === 0 && G.length <= 1) {
-        let r = "Change me";
-        if (h && f.initFile.length > 0)
-          try {
-            const N = await fetch(h);
-            if (N.ok) {
-              const E = await N.text();
-              console.log("fileContent", E), E.trim() && (r = E.trim());
-            } else
-              console.warn("Failed to load file content, using default text");
-          } catch (N) {
-            console.error("Error loading file content:", N), console.warn("Using default text instead");
-          }
-        const c = 24, g = "Arial", w = document.createElement("canvas").getContext("2d");
-        w.font = `${c}px ${g}`;
-        const b = w.measureText(r).width, I = {
-          id: dt(),
-          type: "text",
-          x: v / 2 - b / 2,
-          // Center the actual text width
-          y: W / 2 - c / 2,
-          // Center based on font size
-          width: b,
-          height: c,
-          text: r,
-          fontSize: c,
-          fontFamily: g,
+          fontFamily: d,
           fontWeight: "normal",
           fontStyle: "normal",
           textAlign: "left",
@@ -6797,16 +6753,16 @@ const ci = Oe((f, o) => {
           rotation: 0,
           opacity: 1
         };
-        n([I]), j(I), setTimeout(() => {
-          st();
+        n([R]), T(R), setTimeout(() => {
+          lt();
         }, 100);
       }
     }, 300);
     return () => clearTimeout(t);
-  }, [h]);
-  const Bt = rt((i = "png", t = !0) => {
+  }, [h, s.colorSettings, s.sections]);
+  const zt = rt((i = "png", t = !0) => {
     const r = St();
-    return s.sections, zt.current.exportAllSections(
+    return s.sections, Bt.current.exportAllSections(
       { [(p == null ? void 0 : p.sectionName) || "main"]: r },
       [{
         id: (p == null ? void 0 : p.sectionName) || "main",
@@ -6819,7 +6775,7 @@ const ci = Oe((f, o) => {
       i,
       t
     );
-  }, [St, s.sections, p, v, W]), ne = [
+  }, [St, s.sections, p, v, W]), ce = [
     "Arial",
     "Helvetica",
     "Times New Roman",
@@ -6843,10 +6799,10 @@ const ci = Oe((f, o) => {
     const i = document.createElement("canvas");
     i.width = v, i.height = W, Ot.current = i;
   }, [v, W]), Z(() => {
-    G.length === 0 && st();
+    _.length === 0 && lt();
   }, []);
-  const It = (i, t, r, c, g, m) => {
-    i.beginPath(), i.moveTo(t + m, r), i.lineTo(t + c - m, r), i.quadraticCurveTo(t + c, r, t + c, r + m), i.lineTo(t + c, r + g - m), i.quadraticCurveTo(t + c, r + g, t + c - m, r + g), i.lineTo(t + m, r + g), i.quadraticCurveTo(t, r + g, t, r + g - m), i.lineTo(t, r + m), i.quadraticCurveTo(t, r, t + m, r), i.closePath();
+  const It = (i, t, r, d, g, m) => {
+    i.beginPath(), i.moveTo(t + m, r), i.lineTo(t + d - m, r), i.quadraticCurveTo(t + d, r, t + d, r + m), i.lineTo(t + d, r + g - m), i.quadraticCurveTo(t + d, r + g, t + d - m, r + g), i.lineTo(t + m, r + g), i.quadraticCurveTo(t, r + g, t, r + g - m), i.lineTo(t, r + m), i.quadraticCurveTo(t, r, t + m, r), i.closePath();
   }, Qt = (i, t) => {
     if (!t.isIcon)
       return {
@@ -6858,80 +6814,80 @@ const ci = Oe((f, o) => {
         cy: t.y + t.height / 2
       };
     i.save(), i.font = `${t.fontStyle || ""} ${t.fontWeight || ""} ${t.fontSize}px ${t.fontFamily}`, i.textBaseline = "alphabetic", i.textAlign = "left";
-    const r = i.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, S = m + w, b = c + g, I = t.x, N = t.y, E = I - S / 2 - m, Y = N - b / 2 - c;
-    return i.restore(), { x: E, y: Y, width: S, height: b, cx: I, cy: N };
-  }, ce = (i, t) => {
+    const r = i.measureText(t.text), d = r.actualBoundingBoxAscent ?? t.fontSize * 0.8, g = r.actualBoundingBoxDescent ?? t.fontSize * 0.2, m = r.actualBoundingBoxLeft ?? 0, w = r.actualBoundingBoxRight ?? r.width, S = m + w, b = d + g, R = t.x, I = t.y, z = R - S / 2 - m, $ = I - b / 2 - d;
+    return i.restore(), { x: z, y: $, width: S, height: b, cx: R, cy: I };
+  }, de = (i, t) => {
     if (!t) return;
-    const r = 8, c = 8, g = 4, m = 30, w = Qt(i, t), S = t.isIcon ? Math.max(r, 12) : r, b = {
+    const r = 8, d = 8, g = 4, m = 30, w = Qt(i, t), S = t.isIcon ? Math.max(r, 12) : r, b = {
       x: -w.width / 2 - S,
       y: -w.height / 2 - S,
       w: w.width + S * 2,
       h: w.height + S * 2
     };
     i.save(), i.translate(w.cx, w.cy), t.rotation && i.rotate(t.rotation * Math.PI / 180);
-    const I = i.createLinearGradient(
+    const R = i.createLinearGradient(
       b.x,
       b.y,
       b.x + b.w,
       b.y + b.h
     );
-    I.addColorStop(0, "#3b82f6"), I.addColorStop(0.5, "#1d4ed8"), I.addColorStop(1, "#3b82f6"), i.strokeStyle = "rgba(59,130,246,.3)", i.lineWidth = 3, It(
+    R.addColorStop(0, "#3b82f6"), R.addColorStop(0.5, "#1d4ed8"), R.addColorStop(1, "#3b82f6"), i.strokeStyle = "rgba(59,130,246,.3)", i.lineWidth = 3, It(
       i,
       b.x - 1,
       b.y - 1,
       b.w + 2,
       b.h + 2,
       g + 1
-    ), i.stroke(), i.strokeStyle = I, i.lineWidth = 2, i.setLineDash([8, 4]), It(i, b.x, b.y, b.w, b.h, g), i.stroke(), i.lineDashOffset = -(Date.now() / 50) % 12, i.strokeStyle = "#ffffff", i.lineWidth = 1, i.setLineDash([4, 8]), It(i, b.x, b.y, b.w, b.h, g), i.stroke(), i.setLineDash([]), i.lineDashOffset = 0, [
+    ), i.stroke(), i.strokeStyle = R, i.lineWidth = 2, i.setLineDash([8, 4]), It(i, b.x, b.y, b.w, b.h, g), i.stroke(), i.lineDashOffset = -(Date.now() / 50) % 12, i.strokeStyle = "#ffffff", i.lineWidth = 1, i.setLineDash([4, 8]), It(i, b.x, b.y, b.w, b.h, g), i.stroke(), i.setLineDash([]), i.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((Y) => {
+    ].forEach(($) => {
       i.fillStyle = "rgba(0,0,0,.2)", i.fillRect(
-        Y.x - c / 2 + 1,
-        Y.y - c / 2 + 1,
-        c,
-        c
+        $.x - d / 2 + 1,
+        $.y - d / 2 + 1,
+        d,
+        d
       ), i.fillStyle = "#ffffff", i.fillRect(
-        Y.x - c / 2,
-        Y.y - c / 2,
-        c,
-        c
+        $.x - d / 2,
+        $.y - d / 2,
+        d,
+        d
       ), i.strokeStyle = "#3b82f6", i.lineWidth = 1, i.strokeRect(
-        Y.x - c / 2,
-        Y.y - c / 2,
-        c,
-        c
+        $.x - d / 2,
+        $.y - d / 2,
+        d,
+        d
       );
     });
-    const N = 0, E = b.y - m;
-    i.strokeStyle = "#3b82f6", i.lineWidth = 1, i.setLineDash([2, 2]), i.beginPath(), i.moveTo(N, E + 12), i.lineTo(N, b.y), i.stroke(), i.setLineDash([]), i.beginPath(), i.arc(N, E, 12, 0, 2 * Math.PI), i.fillStyle = "#f59e0b", i.fill(), i.strokeStyle = "#ffffff", i.lineWidth = 2, i.stroke(), i.strokeStyle = "#ffffff", i.lineWidth = 2, i.beginPath(), i.arc(N, E, 6, -Math.PI / 2, Math.PI, !1), i.stroke(), i.beginPath(), i.moveTo(N - 6, E), i.lineTo(N - 3, E - 3), i.lineTo(N - 3, E + 3), i.closePath(), i.fillStyle = "#ffffff", i.fill(), i.restore();
-  }, de = (i, t) => {
+    const I = 0, z = b.y - m;
+    i.strokeStyle = "#3b82f6", i.lineWidth = 1, i.setLineDash([2, 2]), i.beginPath(), i.moveTo(I, z + 12), i.lineTo(I, b.y), i.stroke(), i.setLineDash([]), i.beginPath(), i.arc(I, z, 12, 0, 2 * Math.PI), i.fillStyle = "#f59e0b", i.fill(), i.strokeStyle = "#ffffff", i.lineWidth = 2, i.stroke(), i.strokeStyle = "#ffffff", i.lineWidth = 2, i.beginPath(), i.arc(I, z, 6, -Math.PI / 2, Math.PI, !1), i.stroke(), i.beginPath(), i.moveTo(I - 6, z), i.lineTo(I - 3, z - 3), i.lineTo(I - 3, z + 3), i.closePath(), i.fillStyle = "#ffffff", i.fill(), i.restore();
+  }, fe = (i, t) => {
     if (!t) return [];
-    const r = Qt(i, t), c = t.isIcon ? Math.max(8, 12) : 8, g = 8, m = 30, w = (t.rotation || 0) * Math.PI / 180, S = {
-      x: -r.width / 2 - c,
-      y: -r.height / 2 - c,
-      w: r.width + c * 2,
-      h: r.height + c * 2
+    const r = Qt(i, t), d = t.isIcon ? Math.max(8, 12) : 8, g = 8, m = 30, w = (t.rotation || 0) * Math.PI / 180, S = {
+      x: -r.width / 2 - d,
+      y: -r.height / 2 - d,
+      w: r.width + d * 2,
+      h: r.height + d * 2
     }, b = [
       { x: S.x, y: S.y, type: "nw-resize" },
       { x: S.x + S.w, y: S.y, type: "ne-resize" },
       { x: S.x + S.w, y: S.y + S.h, type: "se-resize" },
       { x: S.x, y: S.y + S.h, type: "sw-resize" },
       { x: 0, y: S.y - m, type: "rotate" }
-    ], I = Math.cos(w), N = Math.sin(w);
-    return b.map((E) => ({
-      x: r.cx + (E.x * I - E.y * N),
-      y: r.cy + (E.x * N + E.y * I),
-      type: E.type,
-      size: E.type === "rotate" ? 24 : g
+    ], R = Math.cos(w), I = Math.sin(w);
+    return b.map((z) => ({
+      x: r.cx + (z.x * R - z.y * I),
+      y: r.cy + (z.x * I + z.y * R),
+      type: z.type,
+      size: z.type === "rotate" ? 24 : g
     }));
   }, $t = (i, t, r) => {
     if (!r) return null;
-    const c = K.current;
-    if (!c) return null;
-    const g = c.getContext("2d"), m = de(g, r);
+    const d = K.current;
+    if (!d) return null;
+    const g = d.getContext("2d"), m = fe(g, r);
     for (const w of m) {
       const S = i - w.x, b = t - w.y;
       if (Math.sqrt(S * S + b * b) <= w.size / 2)
@@ -6940,15 +6896,15 @@ const ci = Oe((f, o) => {
     return null;
   }, Ft = rt(() => {
     if (X > 0) {
-      const i = G[X - 1];
-      n(i.elements), j(i.selectedElement), V(X - 1);
+      const i = _[X - 1];
+      n(i.elements), T(i.selectedElement), V(X - 1);
     }
-  }, [G, X]), bt = rt(() => {
-    if (X < G.length - 1) {
-      const i = G[X + 1];
-      n(i.elements), j(i.selectedElement), V(X + 1);
+  }, [_, X]), bt = rt(() => {
+    if (X < _.length - 1) {
+      const i = _[X + 1];
+      n(i.elements), T(i.selectedElement), V(X + 1);
     }
-  }, [G, X]), pt = (i) => q ? Math.round(i / Nt) * Nt : i;
+  }, [_, X]), pt = (i) => q ? Math.round(i / Nt) * Nt : i;
   Z(() => {
     if (p != null && p.sectionImage) {
       xt.current = null, ut.current = null;
@@ -6956,20 +6912,20 @@ const ci = Oe((f, o) => {
       i && (i.getContext("2d").clearRect(0, 0, v, W), console.log("cleared canvas"));
       const t = new Image();
       t.crossOrigin = "anonymous", t.onload = () => {
-        xt.current = t, At(t, $);
+        xt.current = t, At(t, H);
       }, t.onerror = () => {
-        console.error("Failed to load background image:", p.sectionImage), _();
+        console.error("Failed to load background image:", p.sectionImage), Y();
       }, t.src = p.sectionImage;
     } else
-      xt.current = null, ut.current = null, _();
+      xt.current = null, ut.current = null, Y();
   }, [p == null ? void 0 : p.sectionImage]), Z(() => {
     const i = (t) => {
       const r = document.activeElement;
       if (!(r && (r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.tagName === "SELECT" || r.isContentEditable))) {
-        if ((t.key === "Delete" || t.key === "Backspace") && d && !l) {
+        if ((t.key === "Delete" || t.key === "Backspace") && c && !l) {
           t.preventDefault();
-          const g = d;
-          n((m) => m.filter((w) => w.id !== g.id)), j(null), st();
+          const g = c;
+          n((m) => m.filter((w) => w.id !== g.id)), T(null), lt();
         }
         if (t.ctrlKey || t.metaKey)
           switch (t.key) {
@@ -6985,82 +6941,82 @@ const ci = Oe((f, o) => {
     return document.addEventListener("keydown", i), () => {
       document.removeEventListener("keydown", i);
     };
-  }, [d, l, Ft, bt, st]);
-  const fe = (i) => {
+  }, [c, l, Ft, bt, lt]);
+  const he = (i) => {
     const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(i);
     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)}`, he = (i) => {
+  }, ht = () => `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, ge = (i) => {
     i.strokeStyle = "#e0e0e0", i.lineWidth = 1, i.setLineDash([1, 1]);
     for (let t = 0; t <= v; t += Nt)
       i.beginPath(), i.moveTo(t, 0), i.lineTo(t, W), i.stroke();
     for (let t = 0; t <= W; t += Nt)
       i.beginPath(), i.moveTo(0, t), i.lineTo(v, t), i.stroke();
     i.setLineDash([]);
-  }, ge = (i, t) => {
+  }, xe = (i, t) => {
     i.save();
-    const r = t.x + t.width / 2, c = t.y + t.height / 2;
-    switch (i.translate(r, c), t.rotation && i.rotate(t.rotation * Math.PI / 180), i.translate(-t.width / 2, -t.height / 2), t.type) {
+    const r = t.x + t.width / 2, d = t.y + t.height / 2;
+    switch (i.translate(r, d), t.rotation && i.rotate(t.rotation * Math.PI / 180), i.translate(-t.width / 2, -t.height / 2), t.type) {
       case "text":
-        ue(i, t);
+        me(i, t);
         break;
       case "rectangle":
-        me(i, t);
+        pe(i, t);
         break;
       case "circle":
-        pe(i, t);
+        we(i, t);
         break;
       case "triangle":
-        we(i, t);
+        be(i, t);
         break;
       case "star":
-        be(i, t);
+        ve(i, t);
         break;
       case "arrow":
-        ve(i, t);
+        ke(i, t);
         break;
       case "diamond":
-        ke(i, t);
+        Se(i, t);
         break;
       case "hexagon":
-        Se(i, t);
+        Fe(i, t);
         break;
       case "pentagon":
-        Fe(i, t);
+        Ce(i, t);
         break;
       case "heart":
-        Ce(i, t);
+        je(i, t);
         break;
       case "oval":
         Te(i, t);
         break;
       case "roundedRectangle":
-        je(i, t);
+        Ne(i, t);
         break;
       case "image":
-        Ie(i, t);
+        Ae(i, t);
         break;
       case "qrcode":
-        ye(i, t);
+        ue(i, t);
         break;
       case "barcode":
-        xe(i, t);
+        ye(i, t);
         break;
       case "sticker":
-        Ae(i, t);
+        Re(i, t);
         break;
       case "horizontalLine":
-        Ne(i, t);
+        Ie(i, t);
         break;
       case "embroidery":
-        Re(i, t);
+        De(i, t);
         break;
     }
     i.restore();
-  }, xe = (i, t) => {
+  }, ye = (i, t) => {
     if (t.imageObject)
       i.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
@@ -7068,19 +7024,19 @@ const ci = Oe((f, o) => {
       const r = new Image();
       r.onload = () => {
         n(
-          (c) => c.map(
+          (d) => d.map(
             (g) => g.id === t.id ? { ...g, imageObject: r, imageLoading: !1 } : g
           )
         );
       }, r.onerror = () => {
         n(
-          (c) => c.map(
+          (d) => d.map(
             (g) => g.id === t.id ? { ...g, imageLoading: !1 } : g
           )
         );
       }, r.src = t.src, i.fillStyle = "#f0f0f0", i.fillRect(0, 0, t.width, t.height), i.strokeStyle = "#ccc", i.strokeRect(0, 0, t.width, t.height), i.fillStyle = "#666", i.font = "12px Arial", i.textAlign = "center", i.textBaseline = "middle", i.fillText("Loading...", t.width / 2, t.height / 2);
     } else t.imageLoading ? (i.fillStyle = "#f0f0f0", i.fillRect(0, 0, t.width, t.height), i.strokeStyle = "#ccc", i.strokeRect(0, 0, t.width, t.height), i.fillStyle = "#666", i.font = "12px Arial", i.textAlign = "center", i.textBaseline = "middle", i.fillText("Loading...", t.width / 2, t.height / 2)) : (i.fillStyle = "#f0f0f0", i.fillRect(0, 0, t.width, t.height), i.strokeStyle = "#ccc", i.strokeRect(0, 0, t.width, t.height), i.fillStyle = "#666", i.font = "12px Arial", i.textAlign = "center", i.textBaseline = "middle", i.fillText("No Barcode", t.width / 2, t.height / 2));
-  }, ye = (i, t) => {
+  }, ue = (i, t) => {
     if (t.imageObject)
       i.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
@@ -7088,19 +7044,19 @@ const ci = Oe((f, o) => {
       const r = new Image();
       r.onload = () => {
         n(
-          (c) => c.map(
+          (d) => d.map(
             (g) => g.id === t.id ? { ...g, imageObject: r, imageLoading: !1 } : g
           )
         );
       }, r.onerror = () => {
         n(
-          (c) => c.map(
+          (d) => d.map(
             (g) => g.id === t.id ? { ...g, imageLoading: !1 } : g
           )
         );
       }, r.src = t.src, i.fillStyle = "#f0f0f0", i.fillRect(0, 0, t.width, t.height), i.strokeStyle = "#ccc", i.strokeRect(0, 0, t.width, t.height), i.fillStyle = "#666", i.font = "12px Arial", i.textAlign = "center", i.textBaseline = "middle", i.fillText("Loading QR...", t.width / 2, t.height / 2);
     } else t.imageLoading ? (i.fillStyle = "#f0f0f0", i.fillRect(0, 0, t.width, t.height), i.strokeStyle = "#ccc", i.strokeRect(0, 0, t.width, t.height), i.fillStyle = "#666", i.font = "12px Arial", i.textAlign = "center", i.textBaseline = "middle", i.fillText("Loading QR...", t.width / 2, t.height / 2)) : (i.fillStyle = "#f0f0f0", i.fillRect(0, 0, t.width, t.height), i.strokeStyle = "#ccc", i.strokeRect(0, 0, t.width, t.height), i.fillStyle = "#666", i.font = "12px Arial", i.textAlign = "center", i.textBaseline = "middle", i.fillText("No QR Data", t.width / 2, t.height / 2));
-  }, ue = (i, t) => {
+  }, me = (i, t) => {
     i.save();
     let r = t.text || "Text";
     if (t.textTransform)
@@ -7116,8 +7072,8 @@ const ci = Oe((f, o) => {
           break;
       }
     i.font = `${t.fontStyle || "normal"} ${t.fontWeight || "normal"} ${t.fontSize || 20}px ${t.fontFamily || "Arial"}`, i.fillStyle = t.fill || "#000000", i.textAlign = t.textAlign || "left", i.textBaseline = "top", t.opacity !== void 0 && (i.globalAlpha = t.opacity), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth);
-    const c = r.split(`
-`), g = (t.fontSize || 20) * (t.lineHeight || 1.2), m = Math.max(...c.map((S) => i.measureText(S).width)), w = c.length * g;
+    const d = r.split(`
+`), g = (t.fontSize || 20) * (t.lineHeight || 1.2), m = Math.max(...d.map((S) => i.measureText(S).width)), w = d.length * g;
     if (t.backgroundColor && t.backgroundColor !== "transparent") {
       i.fillStyle = t.backgroundColor;
       const S = t.backgroundPadding || 4;
@@ -7128,81 +7084,81 @@ const ci = Oe((f, o) => {
         w + S * 2
       ), i.fillStyle = t.fill || "#000000";
     }
-    c.forEach((S, b) => {
-      const I = b * g, N = i.measureText(S).width;
-      t.stroke && t.strokeWidth > 0 && i.strokeText(S, 0, I), i.fillText(S, 0, I);
-      const E = t.fontSize || 20, Y = t.decorationColor || t.fill || "#000000", ft = Math.max(1, E / 20);
-      if (i.strokeStyle = Y, i.lineWidth = ft, t.textDecoration === "underline" || t.underline) {
-        const ot = I + E + 2;
-        i.beginPath(), i.moveTo(0, ot), i.lineTo(N, ot), i.stroke();
+    d.forEach((S, b) => {
+      const R = b * g, I = i.measureText(S).width;
+      t.stroke && t.strokeWidth > 0 && i.strokeText(S, 0, R), i.fillText(S, 0, R);
+      const z = t.fontSize || 20, $ = t.decorationColor || t.fill || "#000000", dt = Math.max(1, z / 20);
+      if (i.strokeStyle = $, i.lineWidth = dt, t.textDecoration === "underline" || t.underline) {
+        const ot = R + z + 2;
+        i.beginPath(), i.moveTo(0, ot), i.lineTo(I, ot), i.stroke();
       }
       if (t.textDecoration === "overline" || t.overline) {
-        const ot = I - 2;
-        i.beginPath(), i.moveTo(0, ot), i.lineTo(N, ot), i.stroke();
+        const ot = R - 2;
+        i.beginPath(), i.moveTo(0, ot), i.lineTo(I, ot), i.stroke();
       }
       if (t.textDecoration === "line-through" || t.strikethrough) {
-        const ot = I + E / 2;
-        i.beginPath(), i.moveTo(0, ot), i.lineTo(N, ot), i.stroke();
+        const ot = R + z / 2;
+        i.beginPath(), i.moveTo(0, ot), i.lineTo(I, ot), i.stroke();
       }
       typeof t.textDecoration == "string" && t.textDecoration.includes(" ") && t.textDecoration.split(" ").forEach((Rt) => {
         switch (Rt.trim()) {
           case "underline":
-            const Dt = I + E + 2;
-            i.beginPath(), i.moveTo(0, Dt), i.lineTo(N, Dt), i.stroke();
+            const Dt = R + z + 2;
+            i.beginPath(), i.moveTo(0, Dt), i.lineTo(I, Dt), i.stroke();
             break;
           case "overline":
-            const Zt = I - 2;
-            i.beginPath(), i.moveTo(0, Zt), i.lineTo(N, Zt), i.stroke();
+            const Zt = R - 2;
+            i.beginPath(), i.moveTo(0, Zt), i.lineTo(I, Zt), i.stroke();
             break;
           case "line-through":
-            const te = I + E / 2;
-            i.beginPath(), i.moveTo(0, te), i.lineTo(N, te), i.stroke();
+            const te = R + z / 2;
+            i.beginPath(), i.moveTo(0, te), i.lineTo(I, te), i.stroke();
             break;
         }
       });
     }), i.restore();
-  }, me = (i, t) => {
-    t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fillRect(0, 0, t.width, t.height)), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.strokeRect(0, 0, t.width, t.height));
   }, pe = (i, t) => {
-    const r = Math.min(t.width, t.height) / 2, c = t.width / 2, g = t.height / 2;
-    i.beginPath(), i.arc(c, g, r, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
+    t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fillRect(0, 0, t.width, t.height)), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.strokeRect(0, 0, t.width, t.height));
   }, we = (i, t) => {
+    const r = Math.min(t.width, t.height) / 2, d = t.width / 2, g = t.height / 2;
+    i.beginPath(), i.arc(d, g, r, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
+  }, be = (i, t) => {
     const r = t.width / 2;
     t.height / 2, i.beginPath(), i.moveTo(r, 0), i.lineTo(0, t.height), i.lineTo(t.width, t.height), i.closePath(), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
-  }, be = (i, 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;
+  }, ve = (i, t) => {
+    const r = t.width / 2, d = t.height / 2, g = Math.min(t.width, t.height) / 2, m = g * 0.4, w = t.numPoints || 5;
     i.beginPath();
     for (let S = 0; S < w * 2; S++) {
-      const b = S % 2 === 0 ? g : m, I = S * Math.PI / w, N = r + Math.cos(I) * b, E = c + Math.sin(I) * b;
-      S === 0 ? i.moveTo(N, E) : i.lineTo(N, E);
+      const b = S % 2 === 0 ? g : m, R = S * Math.PI / w, I = r + Math.cos(R) * b, z = d + Math.sin(R) * b;
+      S === 0 ? i.moveTo(I, z) : i.lineTo(I, z);
     }
     i.closePath(), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
-  }, ve = (i, t) => {
-    const r = t.width, c = t.height, g = r * 0.3;
-    i.beginPath(), i.moveTo(r / 2, 0), i.lineTo(r, c * 0.6), i.lineTo(r - g, c * 0.6), i.lineTo(r - g, c), i.lineTo(g, c), i.lineTo(g, c * 0.6), i.lineTo(0, c * 0.6), i.closePath(), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
   }, ke = (i, t) => {
-    const r = t.width / 2, c = t.height / 2;
-    i.beginPath(), i.moveTo(r, 0), i.lineTo(t.width, c), i.lineTo(r, t.height), i.lineTo(0, c), i.closePath(), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
+    const r = t.width, d = t.height, g = r * 0.3;
+    i.beginPath(), i.moveTo(r / 2, 0), i.lineTo(r, d * 0.6), i.lineTo(r - g, d * 0.6), i.lineTo(r - g, d), i.lineTo(g, d), i.lineTo(g, d * 0.6), i.lineTo(0, d * 0.6), i.closePath(), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
   }, Se = (i, t) => {
-    const r = t.width / 2, c = t.height / 2, g = Math.min(t.width, t.height) / 2, m = 6;
+    const r = t.width / 2, d = t.height / 2;
+    i.beginPath(), i.moveTo(r, 0), i.lineTo(t.width, d), i.lineTo(r, t.height), i.lineTo(0, d), i.closePath(), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
+  }, Fe = (i, t) => {
+    const r = t.width / 2, d = t.height / 2, g = Math.min(t.width, t.height) / 2, m = 6;
     i.beginPath();
     for (let w = 0; w < m; w++) {
-      const S = w * 2 * Math.PI / m - Math.PI / 2, b = r + g * Math.cos(S), I = c + g * Math.sin(S);
-      w === 0 ? i.moveTo(b, I) : i.lineTo(b, I);
+      const S = w * 2 * Math.PI / m - Math.PI / 2, b = r + g * Math.cos(S), R = d + g * Math.sin(S);
+      w === 0 ? i.moveTo(b, R) : i.lineTo(b, R);
     }
     i.closePath(), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
-  }, Fe = (i, t) => {
-    const r = t.width / 2, c = t.height / 2, g = Math.min(t.width, t.height) / 2, m = 5;
+  }, Ce = (i, t) => {
+    const r = t.width / 2, d = t.height / 2, g = Math.min(t.width, t.height) / 2, m = 5;
     i.beginPath();
     for (let w = 0; w < m; w++) {
-      const S = w * 2 * Math.PI / m - Math.PI / 2, b = r + g * Math.cos(S), I = c + g * Math.sin(S);
-      w === 0 ? i.moveTo(b, I) : i.lineTo(b, I);
+      const S = w * 2 * Math.PI / m - Math.PI / 2, b = r + g * Math.cos(S), R = d + g * Math.sin(S);
+      w === 0 ? i.moveTo(b, R) : i.lineTo(b, R);
     }
     i.closePath(), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
-  }, Ce = (i, t) => {
-    const r = t.width, c = t.height, g = 0, m = 0;
+  }, je = (i, t) => {
+    const r = t.width, d = t.height, g = 0, m = 0;
     i.beginPath();
-    const w = c * 0.3;
+    const w = d * 0.3;
     i.moveTo(g + r / 2, m + w), i.bezierCurveTo(
       g + r / 2,
       m,
@@ -7212,16 +7168,16 @@ const ci = Oe((f, o) => {
       m + w
     ), i.bezierCurveTo(
       g,
-      m + (c + w) / 2,
+      m + (d + w) / 2,
       g + r / 2,
-      m + (c + w) / 2,
+      m + (d + w) / 2,
       g + r / 2,
-      m + c
+      m + d
     ), i.bezierCurveTo(
       g + r / 2,
-      m + (c + w) / 2,
+      m + (d + w) / 2,
       g + r,
-      m + (c + w) / 2,
+      m + (d + w) / 2,
       g + r,
       m + w
     ), i.bezierCurveTo(
@@ -7233,38 +7189,38 @@ const ci = Oe((f, o) => {
       m + w
     ), i.closePath(), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
   }, Te = (i, t) => {
-    const r = t.width / 2, c = t.height / 2, g = t.width / 2, m = t.height / 2;
-    i.beginPath(), i.ellipse(r, c, g, m, 0, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
-  }, je = (i, t) => {
+    const r = t.width / 2, d = t.height / 2, g = t.width / 2, m = t.height / 2;
+    i.beginPath(), i.ellipse(r, d, g, m, 0, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
+  }, Ne = (i, t) => {
     const r = Math.min(t.width, t.height) * 0.1;
     It(i, 0, 0, t.width, t.height, r), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
-  }, Ne = (i, t) => {
-    i.save(), t.opacity !== void 0 && (i.globalAlpha = t.opacity), i.strokeStyle = t.stroke || t.fill || "#000000", i.lineWidth = t.strokeWidth || t.height || 2, i.lineCap = "round", i.beginPath(), i.moveTo(0, t.height / 2), i.lineTo(t.width, t.height / 2), i.stroke(), i.restore();
   }, Ie = (i, t) => {
+    i.save(), t.opacity !== void 0 && (i.globalAlpha = t.opacity), i.strokeStyle = t.stroke || t.fill || "#000000", i.lineWidth = t.strokeWidth || t.height || 2, i.lineCap = "round", i.beginPath(), i.moveTo(0, t.height / 2), i.lineTo(t.width, t.height / 2), i.stroke(), i.restore();
+  }, Ae = (i, t) => {
     if (t.imageData)
       try {
         t.imageData.complete && t.imageData.naturalHeight !== 0 ? i.drawImage(t.imageData, 0, 0, t.width, t.height) : (i.fillStyle = "#f0f0f0", i.fillRect(0, 0, t.width, t.height), i.strokeStyle = "#ccc", i.lineWidth = 1, i.strokeRect(0, 0, t.width, t.height), i.fillStyle = "#666", i.font = "14px Arial", i.textAlign = "center", i.textBaseline = "middle", i.fillText("Loading...", t.width / 2, t.height / 2));
       } catch (r) {
         console.error("Error drawing image:", r), i.fillStyle = "#ffebee", i.fillRect(0, 0, t.width, t.height), i.strokeStyle = "#f44336", i.lineWidth = 2, i.strokeRect(0, 0, t.width, t.height), i.fillStyle = "#f44336", i.font = "14px Arial", i.textAlign = "center", i.textBaseline = "middle", i.fillText("Error loading image", t.width / 2, t.height / 2);
       }
-  }, Ae = (i, t) => {
+  }, Re = (i, t) => {
     if (t.src && !t.imageLoading && !t.loadedImage) {
       t.imageLoading = !0;
       const r = new Image();
       r.crossOrigin = "anonymous", r.onload = () => {
-        t.loadedImage = r, t.imageLoading = !1, _();
+        t.loadedImage = r, t.imageLoading = !1, Y();
       }, r.onerror = () => {
         console.error("Failed to load sticker:", t.src), t.imageLoading = !1, i.fillStyle = "#f0f0f0", i.fillRect(0, 0, t.width, t.height), i.strokeStyle = "#ccc", i.strokeRect(0, 0, t.width, t.height), i.fillStyle = "#666", i.font = "12px Arial", i.textAlign = "center", i.fillText("Failed to load", t.width / 2, t.height / 2);
       }, r.src = t.src;
     } else t.loadedImage ? i.drawImage(t.loadedImage, 0, 0, t.width, t.height) : t.imageLoading && (i.fillStyle = "#f8f9fa", i.fillRect(0, 0, t.width, t.height), i.strokeStyle = "#dee2e6", i.strokeRect(0, 0, t.width, t.height), i.fillStyle = "#6c757d", i.font = "12px Arial", i.textAlign = "center", i.fillText("Loading...", t.width / 2, t.height / 2));
-  }, Re = (i, t) => {
+  }, De = (i, t) => {
     if (t.imageObject)
       i.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
       t.imageLoading = !0;
       const r = new Image();
       r.crossOrigin = "anonymous", r.onload = () => {
-        t.imageObject = r, t.imageLoading = !1, _();
+        t.imageObject = r, t.imageLoading = !1, Y();
       }, r.onerror = () => {
         t.imageLoading = !1, console.error("Failed to load embroidery image:", t.src), Wt(i, t);
       }, r.src = t.src, Wt(i, t, "Loading...");
@@ -7274,43 +7230,43 @@ const ci = Oe((f, o) => {
     i.fillStyle = "#f9f9f9", i.fillRect(0, 0, t.width, t.height), i.strokeStyle = "#ddd", i.lineWidth = 2, i.strokeRect(0, 0, t.width, t.height), i.fillStyle = "#999", i.font = "24px Arial", i.textAlign = "center", i.textBaseline = "middle", i.fillText("🧵", t.width / 2, t.height / 2 - 10), i.fillStyle = "#666", i.font = "12px Arial", i.fillText(r, t.width / 2, t.height / 2 + 15);
   }, Ht = (i, t, r) => {
     if (!r) return !1;
-    const c = r.x + r.width / 2, g = r.y + r.height / 2, m = i - c, w = t - g, S = -(r.rotation || 0) * Math.PI / 180, b = Math.cos(S), I = Math.sin(S), N = m * b - w * I, E = m * I + w * b, Y = r.width / 2, ft = r.height / 2;
-    return N >= -Y && N <= Y && E >= -ft && E <= ft;
-  }, De = rt(() => {
-    (F || y || B) && st(), R(!1), z(!1), k(!1), O(null);
+    const d = r.x + r.width / 2, g = r.y + r.height / 2, m = i - d, w = t - g, S = -(r.rotation || 0) * Math.PI / 180, b = Math.cos(S), R = Math.sin(S), I = m * b - w * R, z = m * R + w * b, $ = r.width / 2, dt = r.height / 2;
+    return I >= -$ && I <= $ && z >= -dt && z <= dt;
+  }, Ee = rt(() => {
+    (F || y || B) && lt(), A(!1), E(!1), k(!1), O(null);
     const i = K.current;
     i && (i.style.cursor = "default");
-  }, [F, y, B, st]);
+  }, [F, y, B, lt]);
   Z(() => {
     const i = (t) => {
       if (l) return;
       const r = document.activeElement;
-      if (!(r && (r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.tagName === "SELECT" || r.isContentEditable)) && ((t.ctrlKey || t.metaKey) && (t.key === "z" && !t.shiftKey ? (t.preventDefault(), Ft()) : (t.key === "z" && t.shiftKey || t.key === "y") && (t.preventDefault(), bt())), (t.key === "Delete" || t.key === "Backspace") && d && (Mt(d.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && d && (_t(d.id), t.preventDefault()), d && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key))) {
+      if (!(r && (r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.tagName === "SELECT" || r.isContentEditable)) && ((t.ctrlKey || t.metaKey) && (t.key === "z" && !t.shiftKey ? (t.preventDefault(), Ft()) : (t.key === "z" && t.shiftKey || t.key === "y") && (t.preventDefault(), bt())), (t.key === "Delete" || t.key === "Backspace") && c && (Mt(c.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && c && (_t(c.id), t.preventDefault()), c && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key))) {
         t.preventDefault();
         const g = t.shiftKey ? 10 : 1;
         let m = {};
         switch (t.key) {
           case "ArrowUp":
-            m.y = d.y - g;
+            m.y = c.y - g;
             break;
           case "ArrowDown":
-            m.y = d.y + g;
+            m.y = c.y + g;
             break;
           case "ArrowLeft":
-            m.x = d.x - g;
+            m.x = c.x - g;
             break;
           case "ArrowRight":
-            m.x = d.x + g;
+            m.x = c.x + g;
             break;
         }
-        Gt(d.id, m), st();
+        Gt(c.id, m), lt();
       }
     };
     return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
-  }, [d, Ft, bt, l]);
-  const Ee = (i, t = {}) => {
+  }, [c, Ft, bt, l]);
+  const Be = (i, t = {}) => {
     const r = {
-      id: dt(),
+      id: ht(),
       type: i,
       x: 50,
       y: 50,
@@ -7324,28 +7280,28 @@ const ci = Oe((f, o) => {
     };
     switch (i) {
       case "text":
-        r.id = dt(), r.text = t.text || "New Text", r.fontSize = t.fontSize || 20, r.fontFamily = t.fontFamily || "Arial", r.fontWeight = t.fontWeight || "normal", r.fontStyle = t.fontStyle || "normal", r.textAlign = t.textAlign || "left", r.width = 150, r.height = 50;
+        r.id = ht(), r.text = t.text || "New Text", r.fontSize = t.fontSize || 20, r.fontFamily = t.fontFamily || "Arial", r.fontWeight = t.fontWeight || "normal", r.fontStyle = t.fontStyle || "normal", r.textAlign = t.textAlign || "left", r.width = 150, r.height = 50;
         break;
       case "icon":
-        r.id = dt(), r.text = t.text || "🎯", r.fontSize = t.fontSize || 48, r.fontFamily = t.fontFamily || "Arial", r.fontWeight = t.fontWeight || "normal", r.fontStyle = t.fontStyle || "normal", r.textAlign = "center", r.width = 80, r.height = 80, r.iconData = t.iconData || null, r.type = "text", r.isIcon = !0;
+        r.id = ht(), r.text = t.text || "🎯", r.fontSize = t.fontSize || 48, r.fontFamily = t.fontFamily || "Arial", r.fontWeight = t.fontWeight || "normal", r.fontStyle = t.fontStyle || "normal", r.textAlign = "center", r.width = 80, r.height = 80, r.iconData = t.iconData || null, r.type = "text", r.isIcon = !0;
         break;
       case "image":
-        r.id = dt(), r.imageData = t.imageData || null, r.width = t.width || 200, r.height = t.height || 200;
+        r.id = ht(), 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) || v / 2 - ((t == null ? void 0 : t.width) || 100) / 2, r.y = (t == null ? void 0 : t.y) || W / 2 - ((t == null ? void 0 : t.height) || 100) / 2, r.width = (t == null ? void 0 : t.width) || 100, r.height = (t == null ? void 0 : t.height) || 100, r.src = (t == null ? void 0 : t.src) || "", r.data = (t == null ? void 0 : t.data) || "", r.rotation = 0, r.opacity = 1;
+        r.id = ht(), r.type = "qrcode", r.x = (t == null ? void 0 : t.x) || v / 2 - ((t == null ? void 0 : t.width) || 100) / 2, r.y = (t == null ? void 0 : t.y) || W / 2 - ((t == null ? void 0 : t.height) || 100) / 2, r.width = (t == null ? void 0 : t.width) || 100, r.height = (t == null ? void 0 : t.height) || 100, r.src = (t == null ? void 0 : t.src) || "", r.data = (t == null ? void 0 : t.data) || "", r.rotation = 0, r.opacity = 1;
         break;
       case "barcode":
-        r.id = dt(), r.type = "barcode", r.x = (t == null ? void 0 : t.x) || v / 2 - ((t == null ? void 0 : t.width) || 200) / 2, r.y = (t == null ? void 0 : t.y) || W / 2 - ((t == null ? void 0 : t.height) || 100) / 2, r.width = (t == null ? void 0 : t.width) || 200, r.height = (t == null ? void 0 : t.height) || 100, r.src = (t == null ? void 0 : t.src) || "", r.data = (t == null ? void 0 : t.data) || "", r.format = (t == null ? void 0 : t.format) || "CODE128", r.rotation = 0, r.opacity = 1, r.imageObject = (t == null ? void 0 : t.imageObject) || null;
+        r.id = ht(), r.type = "barcode", r.x = (t == null ? void 0 : t.x) || v / 2 - ((t == null ? void 0 : t.width) || 200) / 2, r.y = (t == null ? void 0 : t.y) || W / 2 - ((t == null ? void 0 : t.height) || 100) / 2, r.width = (t == null ? void 0 : t.width) || 200, r.height = (t == null ? void 0 : t.height) || 100, r.src = (t == null ? void 0 : t.src) || "", r.data = (t == null ? void 0 : t.data) || "", r.format = (t == null ? void 0 : t.format) || "CODE128", r.rotation = 0, r.opacity = 1, r.imageObject = (t == null ? void 0 : t.imageObject) || null;
         break;
       case "sticker":
-        r.id = dt(), r.type = "sticker", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
+        r.id = ht(), r.type = "sticker", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
         break;
       case "horizontalLine":
-        r.id = dt(), r.type = "horizontalLine", r.x = v / 2 - 100, r.y = W / 2 - 1, r.width = 200, r.height = 2, r.fill = "#000000", r.stroke = "#000000", r.strokeWidth = 2, r.rotation = 0, r.opacity = 1;
+        r.id = ht(), r.type = "horizontalLine", r.x = v / 2 - 100, r.y = W / 2 - 1, r.width = 200, r.height = 2, r.fill = "#000000", r.stroke = "#000000", r.strokeWidth = 2, r.rotation = 0, r.opacity = 1;
         break;
       case "embroidery":
-        r.id = dt(), r.type = "embroidery", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
+        r.id = ht(), r.type = "embroidery", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
         break;
       case "rectangle":
       case "circle":
@@ -7363,49 +7319,49 @@ const ci = Oe((f, o) => {
         console.warn(`Unknown element type: ${i}`);
         return;
     }
-    n((c) => [...c, r]), j(r), st();
+    n((d) => [...d, r]), T(r), lt();
   }, Gt = (i, t) => {
     n((r) => r.map(
-      (c) => c.id === i ? { ...c, ...t } : c
-    )), d && d.id === i && j((r) => ({ ...r, ...t }));
+      (d) => d.id === i ? { ...d, ...t } : d
+    )), c && c.id === i && T((r) => ({ ...r, ...t }));
   }, Mt = rt(() => {
-    d && (n((i) => i.filter((t) => t.id !== d.id)), j(null), st());
-  }, [d, st]), _t = (i) => {
+    c && (n((i) => i.filter((t) => t.id !== c.id)), T(null), lt());
+  }, [c, lt]), _t = (i) => {
     const t = x.find((r) => r.id === i);
     if (t) {
       const r = {
         ...t,
-        id: dt(),
+        id: ht(),
         x: t.x + 20,
         y: t.y + 20
       };
-      n((c) => [...c, r]), j(r), st();
+      n((d) => [...d, r]), T(r), lt();
     }
   }, Yt = (i, t) => {
     const r = x.findIndex((m) => m.id === i);
     if (r === -1) return;
-    const c = [...x], g = c[r];
-    t === "up" && r < c.length - 1 ? (c[r] = c[r + 1], c[r + 1] = g) : t === "down" && r > 0 ? (c[r] = c[r - 1], c[r - 1] = g) : t === "top" ? (c.splice(r, 1), c.push(g)) : t === "bottom" && (c.splice(r, 1), c.unshift(g)), n(c), st();
+    const d = [...x], g = d[r];
+    t === "up" && r < d.length - 1 ? (d[r] = d[r + 1], d[r + 1] = g) : t === "down" && r > 0 ? (d[r] = d[r - 1], d[r - 1] = g) : t === "top" ? (d.splice(r, 1), d.push(g)) : t === "bottom" && (d.splice(r, 1), d.unshift(g)), n(d), lt();
   };
   rt(() => {
-    p && H((i) => ({
+    p && G((i) => ({
       ...i,
       [p.sectionName]: {
         elements: [...x],
-        selectedColor: $
+        selectedColor: H
       }
     }));
-  }, [p, x, $]);
-  const [, ze] = Qe((i) => i + 1, 0);
+  }, [p, x, H]);
+  const [, ze] = $e((i) => i + 1, 0);
   setTimeout(() => {
     ze();
-  }, 20), $e(o, () => ({
+  }, 20), He(o, () => ({
     handleSectionChange: qt,
     // Export methods that return download-ready data
-    exportPrintReady: async (i = "png") => await Bt(i, !1),
-    exportFullDesign: async (i = "png") => await Bt(i, !0),
+    exportPrintReady: async (i = "png") => await zt(i, !1),
+    exportFullDesign: async (i = "png") => await zt(i, !0),
     // Access to the existing exportDesign method
-    exportDesign: Bt,
+    exportDesign: zt,
     // Get canvas data for custom exports
     getCanvasData: () => St(),
     // NEW: Export methods that return JSON with File objects
@@ -7413,20 +7369,20 @@ const ci = Oe((f, o) => {
       try {
         const t = St();
         console.log("canvas data to export: ", t);
-        const r = {}, c = (p == null ? void 0 : p.sectionName) || "main";
-        r[c] = {
+        const r = {}, d = (p == null ? void 0 : p.sectionName) || "main";
+        r[d] = {
           elements: t.elements,
           selectedColor: t.selectedColor,
           canvasWidth: t.canvasWidth,
           canvasHeight: t.canvasHeight
         }, t.sectionDesigns && typeof t.sectionDesigns == "object" && Object.assign(r, t.sectionDesigns);
         const g = s.sections && s.sections.length > 0 ? s.sections : [{
-          id: c,
-          sectionName: c,
+          id: d,
+          sectionName: d,
           image: p == null ? void 0 : p.sectionImage,
           sectionImage: p == null ? void 0 : p.sectionImage
         }];
-        return await zt.current.exportAllSectionsAsJSON(
+        return await Bt.current.exportAllSectionsAsJSON(
           r,
           g,
           v,
@@ -7440,7 +7396,7 @@ const ci = Oe((f, o) => {
     exportCurrentSectionAsJSON: async (i = "png") => {
       try {
         const t = St();
-        return await zt.current.exportCurrentSectionAsJSON(t, i);
+        return await Bt.current.exportCurrentSectionAsJSON(t, i);
       } catch (t) {
         throw console.error("Export current section as JSON failed:", t), t;
       }
@@ -7451,231 +7407,231 @@ const ci = Oe((f, o) => {
     if (i && i.getContext("2d").clearRect(0, 0, v, W), p != null && p.sectionImage) {
       const t = new Image();
       t.crossOrigin = "anonymous", t.onload = () => {
-        t.src === p.sectionImage && (xt.current = t, At(t, $));
+        t.src === p.sectionImage && (xt.current = t, At(t, H));
       }, t.onerror = () => {
-        console.error("Failed to load background image:", p.sectionImage), _();
+        console.error("Failed to load background image:", p.sectionImage), Y();
       }, t.src = p.sectionImage;
     } else
-      _();
+      Y();
   }, [p == null ? void 0 : p.sectionImage]);
-  const mt = gt(null), Lt = gt(!1), _ = rt(() => {
+  const mt = gt(null), Lt = gt(!1), Y = rt(() => {
     const i = K.current;
     if (!i || Lt.current) return;
     Lt.current = !0;
     const t = i.getContext("2d");
-    t.clearRect(0, 0, v, W), ut.current && t.drawImage(ut.current, 0, 0, v, W), M && he(t), x.forEach((r) => {
-      t.save(), t.globalAlpha = r.opacity || 1, ge(t, r), t.restore();
-    }), d && ce(t, d), Lt.current = !1;
-  }, [x, d, v, W, M]), vt = rt(() => {
+    t.clearRect(0, 0, v, W), ut.current && t.drawImage(ut.current, 0, 0, v, W), M && ge(t), x.forEach((r) => {
+      t.save(), t.globalAlpha = r.opacity || 1, xe(t, r), t.restore();
+    }), c && de(t, c), Lt.current = !1;
+  }, [x, c, v, W, M]), vt = rt(() => {
     mt.current && cancelAnimationFrame(mt.current), mt.current = requestAnimationFrame(() => {
-      _(), mt.current = null;
+      Y(), mt.current = null;
     });
-  }, [_]);
+  }, [Y]);
   Z(() => {
     vt();
-  }, [x, d, v, W, M, vt]), Z(() => {
+  }, [x, c, v, W, M, vt]), Z(() => {
     ut.current && vt();
   }, [ut.current, vt]), Z(() => () => {
     mt.current && cancelAnimationFrame(mt.current);
   }, []);
   const Pt = rt(() => {
-    _(), (F || y || B) && (mt.current = requestAnimationFrame(Pt));
-  }, [_, F, y, B]);
+    Y(), (F || y || B) && (mt.current = requestAnimationFrame(Pt));
+  }, [Y, F, y, B]);
   Z(() => {
     F || y || B ? Pt() : (mt.current && (cancelAnimationFrame(mt.current), mt.current = null), vt());
   }, [F, y, B, Pt, vt]);
-  const Be = rt((i) => {
+  const We = rt((i) => {
     if (l) return;
-    const r = K.current.getBoundingClientRect(), c = (i.clientX - r.left) / Q, g = (i.clientY - r.top) / Q;
-    if (J({ x: c, y: g }), d) {
-      const w = $t(c, g, d);
+    const r = K.current.getBoundingClientRect(), d = (i.clientX - r.left) / Q, g = (i.clientY - r.top) / Q;
+    if (J({ x: d, y: g }), c) {
+      const w = $t(d, g, c);
       if (w) {
         if (w === "rotate") {
           k(!0);
-          const S = d.x + d.width / 2, b = d.y + d.height / 2, I = Math.atan2(g - b, c - S) * 180 / Math.PI;
+          const S = c.x + c.width / 2, b = c.y + c.height / 2, R = Math.atan2(g - b, d - S) * 180 / Math.PI;
           J({
-            x: c,
+            x: d,
             y: g,
-            initialAngle: I,
-            initialRotation: d.rotation || 0
+            initialAngle: R,
+            initialRotation: c.rotation || 0
           });
         } else
-          z(!0), O(w), J({
-            x: c,
+          E(!0), O(w), J({
+            x: d,
             y: g,
-            initialWidth: d.width,
-            initialHeight: d.height,
-            initialX: d.x,
-            initialY: d.y
+            initialWidth: c.width,
+            initialHeight: c.height,
+            initialX: c.x,
+            initialY: c.y
           });
         return;
       }
     }
     let m = null;
     for (let w = x.length - 1; w >= 0; w--)
-      if (Ht(c, g, x[w])) {
+      if (Ht(d, g, x[w])) {
         m = x[w];
         break;
       }
-    m ? (j(m), R(!0), J({
-      x: c,
+    m ? (T(m), A(!0), J({
+      x: d,
       y: g,
-      offsetX: c - m.x,
+      offsetX: d - m.x,
       offsetY: g - m.y
-    })) : j(null), _();
-  }, [l, Q, d, x, _]), We = rt((i) => {
+    })) : T(null), Y();
+  }, [l, Q, c, x, Y]), Me = rt((i) => {
     if (l) return;
-    const t = K.current, r = t.getBoundingClientRect(), c = (i.clientX - r.left) / Q, g = (i.clientY - r.top) / Q;
-    if (d && !F && !y && !B) {
-      const m = $t(c, g, d);
-      m ? m === "rotate" ? t.style.cursor = "grab" : t.style.cursor = m : Ht(c, g, d) ? t.style.cursor = "move" : t.style.cursor = "default";
+    const t = K.current, r = t.getBoundingClientRect(), d = (i.clientX - r.left) / Q, g = (i.clientY - r.top) / Q;
+    if (c && !F && !y && !B) {
+      const m = $t(d, g, c);
+      m ? m === "rotate" ? t.style.cursor = "grab" : t.style.cursor = m : Ht(d, g, c) ? t.style.cursor = "move" : t.style.cursor = "default";
     } else
       t.style.cursor = F ? "grabbing" : "default";
-    if (B && d) {
-      const m = d.x + d.width / 2, w = d.y + d.height / 2, b = Math.atan2(g - w, c - m) * 180 / Math.PI - C.initialAngle;
-      let I = C.initialRotation + b;
-      i.shiftKey && (I = Math.round(I / 15) * 15), I = (I % 360 + 360) % 360, n(
-        (N) => N.map(
-          (E) => E.id === d.id ? { ...E, rotation: I } : E
+    if (B && c) {
+      const m = c.x + c.width / 2, w = c.y + c.height / 2, b = Math.atan2(g - w, d - m) * 180 / Math.PI - C.initialAngle;
+      let R = C.initialRotation + b;
+      i.shiftKey && (R = Math.round(R / 15) * 15), R = (R % 360 + 360) % 360, n(
+        (I) => I.map(
+          (z) => z.id === c.id ? { ...z, rotation: R } : z
         )
-      ), j((N) => ({ ...N, rotation: I })), _();
+      ), T((I) => ({ ...I, rotation: R })), Y();
       return;
     }
-    if (y && d && T) {
-      const m = c - C.x, w = g - C.y;
-      let S = C.initialWidth, b = C.initialHeight, I = C.initialX, N = C.initialY;
-      switch (T) {
+    if (y && c && j) {
+      const m = d - C.x, w = g - C.y;
+      let S = C.initialWidth, b = C.initialHeight, R = C.initialX, I = C.initialY;
+      switch (j) {
         case "se-resize":
           S = Math.max(20, C.initialWidth + m), b = Math.max(20, C.initialHeight + w);
           break;
         case "sw-resize":
-          S = Math.max(20, C.initialWidth - m), b = Math.max(20, C.initialHeight + w), I = C.initialX + (C.initialWidth - S);
+          S = Math.max(20, C.initialWidth - m), b = Math.max(20, C.initialHeight + w), R = C.initialX + (C.initialWidth - S);
           break;
         case "ne-resize":
-          S = Math.max(20, C.initialWidth + m), b = Math.max(20, C.initialHeight - w), N = C.initialY + (C.initialHeight - b);
+          S = Math.max(20, C.initialWidth + m), b = Math.max(20, C.initialHeight - w), I = C.initialY + (C.initialHeight - b);
           break;
         case "nw-resize":
-          S = Math.max(20, C.initialWidth - m), b = Math.max(20, C.initialHeight - w), I = C.initialX + (C.initialWidth - S), N = C.initialY + (C.initialHeight - b);
+          S = Math.max(20, C.initialWidth - m), b = Math.max(20, C.initialHeight - w), R = C.initialX + (C.initialWidth - S), I = C.initialY + (C.initialHeight - b);
           break;
       }
-      if (i.shiftKey && d.type !== "text") {
-        const Y = C.initialWidth / C.initialHeight;
-        T.includes("e"), b = S / Y, T.includes("n") && (N = C.initialY + (C.initialHeight - b));
+      if (i.shiftKey && c.type !== "text") {
+        const $ = C.initialWidth / C.initialHeight;
+        j.includes("e"), b = S / $, j.includes("n") && (I = C.initialY + (C.initialHeight - b));
       }
-      q && (I = pt(I), N = pt(N), S = pt(S), b = pt(b));
-      const E = {
-        ...d,
-        x: I,
-        y: N,
+      q && (R = pt(R), I = pt(I), S = pt(S), b = pt(b));
+      const z = {
+        ...c,
+        x: R,
+        y: I,
         width: S,
         height: b
       };
       n(
-        (Y) => Y.map(
-          (ft) => ft.id === d.id ? E : ft
+        ($) => $.map(
+          (dt) => dt.id === c.id ? z : dt
         )
-      ), j(E), _();
+      ), T(z), Y();
       return;
     }
-    if (F && d) {
-      let m = c - C.offsetX, w = g - C.offsetY;
-      q && (m = pt(m), w = pt(w)), m = Math.max(0, Math.min(v - d.width, m)), w = Math.max(0, Math.min(W - d.height, w));
+    if (F && c) {
+      let m = d - C.offsetX, w = g - C.offsetY;
+      q && (m = pt(m), w = pt(w)), m = Math.max(0, Math.min(v - c.width, m)), w = Math.max(0, Math.min(W - c.height, w));
       const S = {
-        ...d,
+        ...c,
         x: m,
         y: w
       };
       n(
         (b) => b.map(
-          (I) => I.id === d.id ? S : I
+          (R) => R.id === c.id ? S : R
         )
-      ), j(S), _();
+      ), T(S), Y();
     }
-  }, [l, Q, d, F, y, B, T, C, q, v, W, x, _]), qt = rt((i) => {
-    p && H((r) => ({
+  }, [l, Q, c, F, y, B, j, C, q, v, W, x, Y]), qt = rt((i) => {
+    p && G((r) => ({
       ...r,
       [p.sectionName]: {
-        elements: x.map((c) => c.type === "image" ? {
-          ...c,
+        elements: x.map((d) => d.type === "image" ? {
+          ...d,
           // Keep the image data reference
-          imageData: c.imageData,
-          src: c.src
-        } : c),
-        selectedColor: $
+          imageData: d.imageData,
+          src: d.src
+        } : d),
+        selectedColor: H
       }
     }));
     const t = L[i.sectionName];
     if (t) {
-      const r = t.elements.map((c) => {
-        if (c.type === "image" && c.src && !c.imageData) {
+      const r = t.elements.map((d) => {
+        if (d.type === "image" && d.src && !d.imageData) {
           const g = new Image();
           return g.onload = () => {
             n(
               (m) => m.map(
-                (w) => w.id === c.id ? { ...w, imageData: g } : w
+                (w) => w.id === d.id ? { ...w, imageData: g } : w
               )
-            ), _();
-          }, g.src = c.src, { ...c, imageData: g };
+            ), Y();
+          }, g.src = d.src, { ...d, imageData: g };
         }
-        return c;
+        return d;
       });
-      n(r), at(t.selectedColor || $);
+      n(r), at(t.selectedColor || H);
     } else
       n([]);
-    et(i), j(null);
-  }, [p, x, $, L, _]), Me = rt((i) => {
+    et(i), T(null);
+  }, [p, x, H, L, Y]), Le = rt((i) => {
     if (i && i.type.startsWith("image/")) {
       const t = new FileReader();
       t.onload = (r) => {
-        const c = new Image();
-        c.onload = () => {
+        const d = new Image();
+        d.onload = () => {
           const g = {
-            id: dt(),
+            id: ht(),
             type: "image",
             x: pt(v / 2 - 100),
             y: pt(W / 2 - 100),
-            width: Math.min(c.width, 200),
+            width: Math.min(d.width, 200),
             // Limit initial size
-            height: Math.min(c.height, 200),
+            height: Math.min(d.height, 200),
             rotation: 0,
-            imageData: c,
+            imageData: d,
             src: r.target.result,
-            originalWidth: c.width,
-            originalHeight: c.height
-          }, m = c.width / c.height;
-          g.width / g.height !== m && (g.width / m <= 200 ? g.height = g.width / m : g.width = g.height * m), n((w) => [...w, g]), j(g), st();
-        }, c.onerror = () => {
+            originalWidth: d.width,
+            originalHeight: d.height
+          }, m = d.width / d.height;
+          g.width / g.height !== m && (g.width / m <= 200 ? g.height = g.width / m : g.width = g.height * m), n((w) => [...w, g]), T(g), lt();
+        }, d.onerror = () => {
           console.error("Failed to load uploaded image"), alert("Failed to load the uploaded image. Please try again.");
-        }, c.src = r.target.result;
+        }, d.src = r.target.result;
       }, t.onerror = () => {
         console.error("Failed to read file"), alert("Failed to read the file. Please try again.");
       }, t.readAsDataURL(i);
     } else
       alert("Please select a valid image file.");
-  }, [v, W, pt, dt, st]);
+  }, [v, W, pt, ht, lt]);
   Z(() => {
     if (p != null && p.sectionImage) {
       wt.current = !0, xt.current = null, ut.current = null;
       const i = new Image();
       i.crossOrigin = "anonymous", i.onload = () => {
-        xt.current = i, At(i, $);
+        xt.current = i, At(i, H);
       }, i.onerror = () => {
-        console.error("Failed to load background image:", p.sectionImage), wt.current = !1, _();
+        console.error("Failed to load background image:", p.sectionImage), wt.current = !1, Y();
       }, i.src = p.sectionImage;
     } else
-      xt.current = null, ut.current = null, wt.current = !1, _();
-  }, [p == null ? void 0 : p.sectionImage, $]);
+      xt.current = null, ut.current = null, wt.current = !1, Y();
+  }, [p == null ? void 0 : p.sectionImage, H]);
   const Vt = rt(
-    Le(() => {
-      _();
+    Pe(() => {
+      Y();
     }, 16),
     // 60fps limit
-    [_]
+    [Y]
   );
   Z(() => {
     wt.current || Vt();
-  }, [x, d, M, Vt]);
-  function Le(i, t) {
+  }, [x, c, M, Vt]);
+  function Pe(i, t) {
     let r;
     return function(...g) {
       const m = () => {
@@ -7685,52 +7641,52 @@ const ci = Oe((f, o) => {
     };
   }
   Z(() => {
-    xt.current && At(xt.current, $);
-  }, [$]), Z(() => {
-    _();
-  }, [_]);
-  const Pe = (i, t, r) => (0.2126 * i + 0.7152 * t + 0.0722 * r) / 255, At = rt((i, t) => {
-    const r = Ot.current, c = r.getContext("2d");
-    r.width = v, r.height = W, c.clearRect(0, 0, v, W), c.drawImage(i, 0, 0, v, W);
-    const g = c.getImageData(0, 0, v, W), m = g.data, w = fe(t);
+    xt.current && At(xt.current, H);
+  }, [H]), Z(() => {
+    Y();
+  }, [Y]);
+  const Ue = (i, t, r) => (0.2126 * i + 0.7152 * t + 0.0722 * r) / 255, At = rt((i, t) => {
+    const r = Ot.current, d = r.getContext("2d");
+    r.width = v, r.height = W, d.clearRect(0, 0, v, W), d.drawImage(i, 0, 0, v, W);
+    const g = d.getImageData(0, 0, v, W), m = g.data, w = he(t);
     if (!w) {
       wt.current = !1;
       return;
     }
-    const { r: S, g: b, b: I } = w;
-    for (let E = 0; E < m.length; E += 4) {
-      if (m[E + 3] === 0) continue;
-      const ft = Pe(m[E], m[E + 1], m[E + 2]);
-      m[E] = Math.round(S * ft), m[E + 1] = Math.round(b * ft), m[E + 2] = Math.round(I * ft);
+    const { r: S, g: b, b: R } = w;
+    for (let z = 0; z < m.length; z += 4) {
+      if (m[z + 3] === 0) continue;
+      const dt = Ue(m[z], m[z + 1], m[z + 2]);
+      m[z] = Math.round(S * dt), m[z + 1] = Math.round(b * dt), m[z + 2] = Math.round(R * dt);
     }
-    c.putImageData(g, 0, 0);
-    const N = new Image();
-    N.onload = () => {
-      console.log("plain color: ", s.plainColor), ut.current = s.plainColor === "Y" ? N : i, wt.current = !1, _();
-    }, N.src = r.toDataURL("image/png");
-  }, [v, W, _]), Xt = (i) => {
+    d.putImageData(g, 0, 0);
+    const I = new Image();
+    I.onload = () => {
+      console.log("plain color: ", s.plainColor), ut.current = s.plainColor === "Y" ? I : i, wt.current = !1, Y();
+    }, I.src = r.toDataURL("image/png");
+  }, [v, W, Y]), Xt = (i) => {
     if (!tt) return { horizontal: [], vertical: [] };
     const t = document.querySelector(".ruler-horizontal"), r = document.querySelector(".ruler-vertical");
     if (!t || !r)
       return { horizontal: [], vertical: [] };
-    const c = t.getBoundingClientRect(), g = r.getBoundingClientRect(), m = c.width, w = g.height, S = 50, b = [], I = [];
-    for (let N = S; N <= m; N += S)
-      N <= m - 20 && b.push({
-        position: N,
-        value: Math.round(N / i)
+    const d = t.getBoundingClientRect(), g = r.getBoundingClientRect(), m = d.width, w = g.height, S = 50, b = [], R = [];
+    for (let I = S; I <= m; I += S)
+      I <= m - 20 && b.push({
+        position: I,
+        value: Math.round(I / i)
       });
-    for (let N = S; N <= w; N += S)
-      N <= w - 15 && I.push({
-        position: N,
-        value: Math.round(N / i)
+    for (let I = S; I <= w; I += S)
+      I <= w - 15 && R.push({
+        position: I,
+        value: Math.round(I / i)
       });
-    return { horizontal: b, vertical: I };
-  }, [Jt, Kt] = A({ horizontal: [], vertical: [] });
+    return { horizontal: b, vertical: R };
+  }, [Jt, Kt] = N({ horizontal: [], vertical: [] });
   return Z(() => {
     const i = () => {
       setTimeout(() => {
-        const c = Xt(Q);
-        Kt(c);
+        const d = Xt(Q);
+        Kt(d);
       }, 50);
     };
     i();
@@ -7751,23 +7707,23 @@ const ci = Oe((f, o) => {
     }
   }, [tt, u, Q]), /* @__PURE__ */ e.jsxs("div", { className: "pure-canvas-designer", children: [
     /* @__PURE__ */ e.jsx("div", { className: "designer-header", children: /* @__PURE__ */ e.jsx(
-      ri,
+      ai,
       {
-        onAddElement: Ee,
-        onDeleteElement: () => d && Mt(d.id),
-        onDuplicateElement: () => d && _t(d.id),
+        onAddElement: Be,
+        onDeleteElement: () => c && Mt(c.id),
+        onDuplicateElement: () => c && _t(c.id),
         onUndo: Ft,
         onRedo: bt,
         onToggleGrid: () => nt(!M),
         onToggleRulers: () => ct(!tt),
         onToggleSnap: () => P(!q),
-        onImageUpload: Me,
+        onImageUpload: Le,
         canUndo: X > 0,
-        canRedo: X < G.length - 1,
+        canRedo: X < _.length - 1,
         showGrid: M,
         showRulers: tt,
         snapToGrid: q,
-        selectedElement: d,
+        selectedElement: c,
         theme: a,
         readOnly: l,
         apiKey: f.apiKey,
@@ -7801,9 +7757,9 @@ const ci = Oe((f, o) => {
           ref: K,
           width: v,
           height: W,
-          onMouseDown: Be,
-          onMouseMove: We,
-          onMouseUp: De,
+          onMouseDown: We,
+          onMouseMove: Me,
+          onMouseUp: Ee,
           style: {
             border: "1px solid #e2e8f0",
             cursor: F ? "grabbing" : "default",
@@ -7814,21 +7770,21 @@ const ci = Oe((f, o) => {
       ) }),
       /* @__PURE__ */ e.jsxs("div", { className: "side-panels", children: [
         /* @__PURE__ */ e.jsx(
-          ai,
+          si,
           {
-            selectedElement: d,
+            selectedElement: c,
             onUpdate: Gt,
             onMoveLayer: Yt,
-            availableFonts: ne,
+            availableFonts: ce,
             theme: a
           }
         ),
         /* @__PURE__ */ e.jsx(
-          si,
+          li,
           {
             elements: x,
-            selectedElement: d,
-            onSelectElement: j,
+            selectedElement: c,
+            onSelectElement: T,
             onMoveLayer: Yt,
             onDeleteElement: Mt,
             theme: a
@@ -7850,8 +7806,8 @@ const ci = Oe((f, o) => {
               className: `section-thumbnail compact ${p.sectionName === i.sectionName ? "active" : ""}`,
               onClick: (r) => {
                 r.stopPropagation();
-                const c = s.sections.find((g) => g.sectionName === i.sectionName);
-                qt(c);
+                const d = s.sections.find((g) => g.sectionName === i.sectionName);
+                qt(d);
               },
               title: i.sectionName,
               children: [
@@ -7883,7 +7839,7 @@ const ci = Oe((f, o) => {
           s.colorSettings.slice(0, 3).map((i, t) => /* @__PURE__ */ e.jsxs(
             "div",
             {
-              className: `color-swatch-enhanced compact ${$ === i ? "active" : ""}`,
+              className: `color-swatch-enhanced compact ${H === i ? "active" : ""}`,
               onClick: (r) => {
                 r.stopPropagation(), at(i);
               },
@@ -7896,7 +7852,7 @@ const ci = Oe((f, o) => {
                     style: { backgroundColor: i }
                   }
                 ),
-                $ === i && /* @__PURE__ */ e.jsx("div", { className: "color-selection-ring compact" })
+                H === i && /* @__PURE__ */ e.jsx("div", { className: "color-selection-ring compact" })
               ]
             },
             i
@@ -7922,7 +7878,7 @@ const ci = Oe((f, o) => {
             /* @__PURE__ */ e.jsx("div", { className: "color-dropdown-menu", style: { display: "none" }, children: s.colorSettings.slice(3).map((i, t) => /* @__PURE__ */ e.jsxs(
               "div",
               {
-                className: `color-swatch-dropdown ${$ === i ? "active" : ""}`,
+                className: `color-swatch-dropdown ${H === i ? "active" : ""}`,
                 onClick: (r) => {
                   r.stopPropagation(), at(i), r.currentTarget.parentElement.style.display = "none";
                 },
@@ -7950,7 +7906,7 @@ const ci = Oe((f, o) => {
             "button",
             {
               className: "zoom-button compact zoom-out",
-              onClick: () => ht(Math.max(0.25, Q - 0.25)),
+              onClick: () => ft(Math.max(0.25, Q - 0.25)),
               disabled: Q <= 0.25,
               title: "Zoom Out",
               children: /* @__PURE__ */ e.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
@@ -7973,7 +7929,7 @@ const ci = Oe((f, o) => {
                 max: "4",
                 step: "0.25",
                 value: Q,
-                onChange: (i) => ht(parseFloat(i.target.value)),
+                onChange: (i) => ft(parseFloat(i.target.value)),
                 className: "zoom-slider compact"
               }
             ) })
@@ -7982,7 +7938,7 @@ const ci = Oe((f, o) => {
             "button",
             {
               className: "zoom-button compact zoom-in",
-              onClick: () => ht(Math.min(4, Q + 0.25)),
+              onClick: () => ft(Math.min(4, Q + 0.25)),
               disabled: Q >= 4,
               title: "Zoom In",
               children: /* @__PURE__ */ e.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
@@ -7997,7 +7953,7 @@ const ci = Oe((f, o) => {
             "button",
             {
               className: "zoom-reset compact",
-              onClick: () => ht(1),
+              onClick: () => ft(1),
               title: "Reset Zoom (100%)",
               children: /* @__PURE__ */ e.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
                 /* @__PURE__ */ e.jsx("path", { d: "M3 3l18 18" }),
@@ -8011,7 +7967,7 @@ const ci = Oe((f, o) => {
     ] })
   ] });
 });
-ci.displayName = "Mypixia";
+di.displayName = "Mypixia";
 export {
-  ci as default
+  di as default
 };