@mypixia/simplex-designer 2.1.0 → 2.1.1

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import Ge, { useState as N, useRef as dt, useEffect as et, useMemo as re, forwardRef as _e, useCallback as ot, useReducer as Ye, useImperativeHandle as qe } from "react";
-import Ve from "qrcode";
-import Xe from "react-barcode";
+import _e, { useState as N, useRef as nt, useEffect as et, useMemo as re, forwardRef as Ye, useCallback as ot, useReducer as qe, useImperativeHandle as Ve } from "react";
+import Xe from "qrcode";
+import Je from "react-barcode";
 import ae from "axios";
 import './index_external.css';var Rt = { exports: {} }, Tt = {};
 /**
@@ -13,23 +13,23 @@ import './index_external.css';var Rt = { exports: {} }, Tt = {};
  * LICENSE file in the root directory of this source tree.
  */
 var se;
-function Je() {
+function Ke() {
   if (se) return Tt;
   se = 1;
   var d = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
-  function a(l, s, f) {
-    var x = null;
-    if (f !== void 0 && (x = "" + f), s.key !== void 0 && (x = "" + s.key), "key" in s) {
-      f = {};
+  function a(l, s, h) {
+    var y = null;
+    if (h !== void 0 && (y = "" + h), s.key !== void 0 && (y = "" + s.key), "key" in s) {
+      h = {};
       for (var c in s)
-        c !== "key" && (f[c] = s[c]);
-    } else f = s;
-    return s = f.ref, {
+        c !== "key" && (h[c] = s[c]);
+    } else h = s;
+    return s = h.ref, {
       $$typeof: d,
       type: l,
-      key: x,
+      key: y,
       ref: s !== void 0 ? s : null,
-      props: f
+      props: h
     };
   }
   return Tt.Fragment = o, Tt.jsx = a, Tt.jsxs = a, Tt;
@@ -45,7 +45,7 @@ var jt = {};
  * LICENSE file in the root directory of this source tree.
  */
 var le;
-function Ke() {
+function Ze() {
   return le || (le = 1, process.env.NODE_ENV !== "production" && function() {
     function d(m) {
       if (m == null) return null;
@@ -125,10 +125,10 @@ function Ke() {
       var m = Y.A;
       return m === null ? null : m.getOwner();
     }
-    function f() {
+    function h() {
       return Error("react-stack-top-frame");
     }
-    function x(m) {
+    function y(m) {
       if (O.call(m, "key")) {
         var A = Object.getOwnPropertyDescriptor(m, "key").get;
         if (A && A.isReactWarning) return !1;
@@ -147,13 +147,13 @@ function Ke() {
         configurable: !0
       });
     }
-    function y() {
+    function u() {
       var m = d(this.type);
       return it[m] || (it[m] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), m = this.props.ref, m !== void 0 ? m : null;
     }
-    function g(m, A, Q, _, Z, V, ht, H) {
+    function x(m, A, Q, _, Z, V, ht, H) {
       return Q = V.ref, m = {
         $$typeof: I,
         type: m,
@@ -162,7 +162,7 @@ function Ke() {
         _owner: Z
       }, (Q !== void 0 ? Q : null) !== null ? Object.defineProperty(m, "ref", {
         enumerable: !1,
-        get: y
+        get: u
       }) : Object.defineProperty(m, "ref", { enumerable: !1, value: null }), m._store = {}, Object.defineProperty(m._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -200,10 +200,10 @@ function Ke() {
         else C(P);
       if (O.call(A, "key")) {
         P = d(m);
-        var nt = Object.keys(A).filter(function(Dt) {
+        var ct = Object.keys(A).filter(function(Dt) {
           return Dt !== "key";
         });
-        _ = 0 < nt.length ? "{key: someKey, " + nt.join(": ..., ") + ": ...}" : "{key: someKey}", j[P + _] || (nt = 0 < nt.length ? "{" + nt.join(": ..., ") + ": ...}" : "{}", console.error(
+        _ = 0 < ct.length ? "{key: someKey, " + ct.join(": ..., ") + ": ...}" : "{key: someKey}", j[P + _] || (ct = 0 < ct.length ? "{" + ct.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -212,11 +212,11 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           _,
           P,
-          nt,
+          ct,
           P
         ), j[P + _] = !0);
       }
-      if (P = null, Q !== void 0 && (a(Q), P = "" + Q), x(A) && (a(A.key), P = "" + A.key), "key" in A) {
+      if (P = null, Q !== void 0 && (a(Q), P = "" + Q), y(A) && (a(A.key), P = "" + A.key), "key" in A) {
         Q = {};
         for (var gt in A)
           gt !== "key" && (Q[gt] = A[gt]);
@@ -224,7 +224,7 @@ React keys must be passed directly to JSX without using spread:
       return P && c(
         Q,
         typeof m == "function" ? m.displayName || m.name || "Unknown" : m
-      ), g(
+      ), x(
         m,
         P,
         V,
@@ -238,7 +238,7 @@ React keys must be passed directly to JSX without using spread:
     function C(m) {
       typeof m == "object" && m !== null && m.$$typeof === I && m._store && (m._store.validated = 1);
     }
-    var p = Ge, I = Symbol.for("react.transitional.element"), T = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), z = Symbol.for("react.strict_mode"), E = Symbol.for("react.profiler"), S = Symbol.for("react.consumer"), $ = Symbol.for("react.context"), B = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), at = Symbol.for("react.suspense_list"), U = Symbol.for("react.memo"), ft = Symbol.for("react.lazy"), q = Symbol.for("react.activity"), rt = Symbol.for("react.client.reference"), Y = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, J = Array.isArray, st = console.createTask ? console.createTask : function() {
+    var p = _e, I = Symbol.for("react.transitional.element"), T = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), z = Symbol.for("react.strict_mode"), E = Symbol.for("react.profiler"), S = Symbol.for("react.consumer"), $ = Symbol.for("react.context"), B = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), at = Symbol.for("react.suspense_list"), U = Symbol.for("react.memo"), ft = Symbol.for("react.lazy"), q = Symbol.for("react.activity"), rt = Symbol.for("react.client.reference"), Y = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, J = Array.isArray, st = console.createTask ? console.createTask : function() {
       return null;
     };
     p = {
@@ -246,10 +246,10 @@ React keys must be passed directly to JSX without using spread:
         return m();
       }
     };
-    var K, it = {}, L = p["react-stack-bottom-frame"].bind(
+    var K, it = {}, M = p["react-stack-bottom-frame"].bind(
       p,
-      f
-    )(), G = st(l(f)), j = {};
+      h
+    )(), G = st(l(h)), j = {};
     jt.Fragment = w, jt.jsx = function(m, A, Q, _, Z) {
       var V = 1e4 > Y.recentlyCreatedOwnerStacks++;
       return F(
@@ -259,7 +259,7 @@ React keys must be passed directly to JSX without using spread:
         !1,
         _,
         Z,
-        V ? Error("react-stack-top-frame") : L,
+        V ? Error("react-stack-top-frame") : M,
         V ? st(l(m)) : G
       );
     }, jt.jsxs = function(m, A, Q, _, Z) {
@@ -271,17 +271,17 @@ React keys must be passed directly to JSX without using spread:
         !0,
         _,
         Z,
-        V ? Error("react-stack-top-frame") : L,
+        V ? Error("react-stack-top-frame") : M,
         V ? st(l(m)) : G
       );
     };
   }()), jt;
 }
 var ne;
-function Ze() {
-  return ne || (ne = 1, process.env.NODE_ENV === "production" ? Rt.exports = Je() : Rt.exports = Ke()), Rt.exports;
+function ti() {
+  return ne || (ne = 1, process.env.NODE_ENV === "production" ? Rt.exports = Ke() : Rt.exports = Ze()), Rt.exports;
 }
-var i = Ze();
+var i = ti();
 const Pt = {
   business: {
     name: "Business & Office",
@@ -378,27 +378,27 @@ const Pt = {
     ...o,
     category: d.name
   }))
-), ti = (d) => de().filter(
+), ei = (d) => de().filter(
   (a) => a.name.toLowerCase().includes(d.toLowerCase()) || a.category.toLowerCase().includes(d.toLowerCase())
-), ei = ({ onSelectIcon: d, disabled: o = !1 }) => {
-  const [a, l] = N(!1), [s, f] = N(""), [x, c] = N("all"), y = dt(null);
+), ii = ({ onSelectIcon: d, disabled: o = !1 }) => {
+  const [a, l] = N(!1), [s, h] = N(""), [y, c] = N("all"), u = nt(null);
   et(() => {
     const p = (I) => {
-      y.current && !y.current.contains(I.target) && l(!1);
+      u.current && !u.current.contains(I.target) && l(!1);
     };
     return document.addEventListener("mousedown", p), () => document.removeEventListener("mousedown", p);
   }, []);
-  const g = (p) => {
-    d(p), l(!1), f("");
+  const x = (p) => {
+    d(p), l(!1), h("");
   }, C = (() => {
     let p = de();
-    if (s.trim() && (p = ti(s)), x !== "all") {
-      const I = Pt[x];
+    if (s.trim() && (p = ei(s)), y !== "all") {
+      const I = Pt[y];
       I && (p = p.filter((T) => T.category === I.name));
     }
     return p;
   })();
-  return /* @__PURE__ */ i.jsxs("div", { className: "icon-selector", ref: y, children: [
+  return /* @__PURE__ */ i.jsxs("div", { className: "icon-selector", ref: u, children: [
     /* @__PURE__ */ i.jsxs(
       "button",
       {
@@ -421,14 +421,14 @@ const Pt = {
             type: "text",
             placeholder: "Search icons...",
             value: s,
-            onChange: (p) => f(p.target.value),
+            onChange: (p) => h(p.target.value),
             className: "icon-search"
           }
         ),
         /* @__PURE__ */ i.jsxs(
           "select",
           {
-            value: x,
+            value: y,
             onChange: (p) => c(p.target.value),
             className: "category-select",
             children: [
@@ -442,7 +442,7 @@ const Pt = {
         "button",
         {
           className: "icon-item",
-          onClick: () => g(p),
+          onClick: () => x(p),
           title: `${p.name} (${p.category})`,
           children: [
             /* @__PURE__ */ i.jsx("span", { className: "icon-symbol", children: p.symbol }),
@@ -458,11 +458,11 @@ const Pt = {
       ] }) })
     ] })
   ] });
-}, ii = ({ isOpen: d, onClose: o, onAddQRCode: a, theme: l }) => {
-  const [s, f] = N(""), [x, c] = N(""), [y, g] = N(200), [F, C] = N("M"), p = () => {
+}, oi = ({ isOpen: d, onClose: o, onAddQRCode: a, theme: l }) => {
+  const [s, h] = N(""), [y, c] = N(""), [u, x] = N(200), [F, C] = N("M"), p = () => {
     if (!s.trim()) return;
     const w = {
-      width: y,
+      width: u,
       errorCorrectionLevel: F,
       type: "image/png",
       quality: 0.92,
@@ -472,7 +472,7 @@ const Pt = {
         light: "#FFFFFF"
       }
     };
-    Ve.toDataURL(s, w, (z, E) => {
+    Xe.toDataURL(s, w, (z, E) => {
       if (z) {
         console.error("QR Code generation error:", z);
         return;
@@ -480,23 +480,23 @@ const Pt = {
       c(E);
     });
   }, I = () => {
-    if (!x) return;
+    if (!y) return;
     const w = new Image();
     w.onload = () => {
       a({
         type: "qrcode",
-        src: x,
+        src: y,
         data: s,
-        width: y,
-        height: y,
+        width: u,
+        height: u,
         x: 100,
         y: 100,
         imageObject: w
         // Store the loaded image object
       }), T();
-    }, w.src = x;
+    }, w.src = y;
   }, T = () => {
-    f(""), c(""), o();
+    h(""), c(""), o();
   };
   return d ? /* @__PURE__ */ i.jsx("div", { className: "qr-modal-overlay", onClick: T, children: /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-content", onClick: (w) => w.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-header", children: [
@@ -519,7 +519,7 @@ const Pt = {
           {
             id: "qr-data",
             value: s,
-            onChange: (w) => f(w.target.value),
+            onChange: (w) => h(w.target.value),
             placeholder: "https://example.com or any text...",
             rows: 3
           }
@@ -533,8 +533,8 @@ const Pt = {
             {
               type: "number",
               id: "qr-size",
-              value: y,
-              onChange: (w) => g(Math.max(50, Math.min(500, parseInt(w.target.value) || 200))),
+              value: u,
+              onChange: (w) => x(Math.max(50, Math.min(500, parseInt(w.target.value) || 200))),
               min: "50",
               max: "500"
             }
@@ -567,9 +567,9 @@ const Pt = {
           children: "Generate QR Code"
         }
       ) }),
-      x && /* @__PURE__ */ i.jsxs("div", { className: "qr-preview", children: [
+      y && /* @__PURE__ */ i.jsxs("div", { className: "qr-preview", children: [
         /* @__PURE__ */ i.jsx("h4", { children: "Preview" }),
-        /* @__PURE__ */ i.jsx("div", { className: "qr-preview-container", children: /* @__PURE__ */ i.jsx("img", { src: x, alt: "QR Code Preview" }) }),
+        /* @__PURE__ */ i.jsx("div", { className: "qr-preview-container", children: /* @__PURE__ */ i.jsx("img", { src: y, alt: "QR Code Preview" }) }),
         /* @__PURE__ */ i.jsx(
           "button",
           {
@@ -585,8 +585,8 @@ const Pt = {
       ] })
     ] })
   ] }) }) : null;
-}, oi = ({ isOpen: d, onClose: o, onAddBarcode: a, theme: l }) => {
-  const [s, f] = N(""), [x, c] = N("CODE128"), [y, g] = N(null), [F, C] = N(2), [p, I] = N(100), [T, w] = N(20), [z, E] = N("center"), [S, $] = N("bottom"), [B, W] = N(10), at = dt(null), U = [
+}, ri = ({ isOpen: d, onClose: o, onAddBarcode: a, theme: l }) => {
+  const [s, h] = N(""), [y, c] = N("CODE128"), [u, x] = N(null), [F, C] = N(2), [p, I] = N(100), [T, w] = N(20), [z, E] = N("center"), [S, $] = N("bottom"), [B, W] = N(10), at = nt(null), U = [
     { value: "CODE128", label: "CODE128 (Most Common)" },
     { value: "EAN13", label: "EAN-13 (European Article Number)" },
     { value: "EAN8", label: "EAN-8 (Short EAN)" },
@@ -599,11 +599,11 @@ const Pt = {
   ], ft = () => {
     if (s.trim())
       try {
-        g(/* @__PURE__ */ i.jsx(
-          Xe,
+        x(/* @__PURE__ */ i.jsx(
+          Je,
           {
             value: s,
-            format: x,
+            format: y,
             width: F,
             height: p,
             fontSize: T,
@@ -619,25 +619,25 @@ const Pt = {
       }
   }, q = () => {
     var O, J, st, K;
-    if (!(!y || !at.current))
+    if (!(!u || !at.current))
       try {
         const it = at.current.querySelector("svg");
         if (!it) {
           console.error("No SVG element found in barcode");
           return;
         }
-        const L = document.createElement("canvas"), G = L.getContext("2d"), j = it.getBoundingClientRect(), m = ((J = (O = it.width) == null ? void 0 : O.baseVal) == null ? void 0 : J.value) || j.width || 200, A = ((K = (st = it.height) == null ? void 0 : st.baseVal) == null ? void 0 : K.value) || j.height || 100;
-        L.width = m, L.height = A;
+        const M = document.createElement("canvas"), G = M.getContext("2d"), j = it.getBoundingClientRect(), m = ((J = (O = it.width) == null ? void 0 : O.baseVal) == null ? void 0 : J.value) || j.width || 200, A = ((K = (st = it.height) == null ? void 0 : st.baseVal) == null ? void 0 : K.value) || j.height || 100;
+        M.width = m, M.height = A;
         const Q = new XMLSerializer().serializeToString(it), _ = new Blob([Q], { type: "image/svg+xml;charset=utf-8" }), Z = URL.createObjectURL(_), V = new Image();
         V.onload = () => {
           G.drawImage(V, 0, 0);
-          const ht = L.toDataURL("image/png"), H = new Image();
+          const ht = M.toDataURL("image/png"), H = new Image();
           H.onload = () => {
             a({
               type: "barcode",
               src: ht,
               data: s,
-              format: x,
+              format: y,
               width: m,
               height: A,
               x: 100,
@@ -650,7 +650,7 @@ const Pt = {
         console.error("Error adding barcode to canvas:", it), alert("Failed to add barcode to canvas. Please try again.");
       }
   }, rt = () => {
-    f(""), g(null), c("CODE128"), C(2), I(100), w(20), o();
+    h(""), x(null), c("CODE128"), C(2), I(100), w(20), o();
   }, Y = (O) => ({
     CODE128: "Supports all ASCII characters. Most versatile format.",
     EAN13: "Requires exactly 12 digits (13th is checksum). Used for retail products.",
@@ -684,7 +684,7 @@ const Pt = {
             type: "text",
             id: "barcode-data",
             value: s,
-            onChange: (O) => f(O.target.value),
+            onChange: (O) => h(O.target.value),
             placeholder: "Enter your data..."
           }
         )
@@ -695,12 +695,12 @@ const Pt = {
           "select",
           {
             id: "barcode-format",
-            value: x,
+            value: y,
             onChange: (O) => c(O.target.value),
             children: U.map((O) => /* @__PURE__ */ i.jsx("option", { value: O.value, children: O.label }, O.value))
           }
         ),
-        /* @__PURE__ */ i.jsx("small", { className: "format-description", children: Y(x) })
+        /* @__PURE__ */ i.jsx("small", { className: "format-description", children: Y(y) })
       ] }),
       /* @__PURE__ */ i.jsxs("div", { className: "barcode-options", children: [
         /* @__PURE__ */ i.jsxs("div", { className: "barcode-form-group", children: [
@@ -783,9 +783,9 @@ const Pt = {
           children: "Generate Barcode"
         }
       ) }),
-      y && /* @__PURE__ */ i.jsxs("div", { className: "barcode-preview", children: [
+      u && /* @__PURE__ */ i.jsxs("div", { className: "barcode-preview", children: [
         /* @__PURE__ */ i.jsx("h4", { children: "Preview" }),
-        /* @__PURE__ */ i.jsx("div", { className: "barcode-preview-container", ref: at, children: y }),
+        /* @__PURE__ */ i.jsx("div", { className: "barcode-preview-container", ref: at, children: u }),
         /* @__PURE__ */ i.jsx(
           "button",
           {
@@ -801,7 +801,7 @@ const Pt = {
       ] })
     ] })
   ] }) }) : null;
-}, ri = ({ theme: d }) => /* @__PURE__ */ i.jsxs("div", { className: "premium-feature-container", style: {
+}, ai = ({ theme: d }) => /* @__PURE__ */ i.jsxs("div", { className: "premium-feature-container", style: {
   padding: "20px",
   backgroundColor: "#f8f9fa",
   borderRadius: "8px",
@@ -864,40 +864,40 @@ const Pt = {
                 100% { transform: rotate(360deg); }
             }
         ` })
-] }), ai = ({ isOpen: d, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: f }) => {
-  const [x, c] = N([]), [y, g] = N(!1), [F, C] = N(null), [p, I] = N(""), [T, w] = N(""), [z, E] = N({});
-  dt(null);
-  const [S, $] = N(!1), [B, W] = N(!1), [at, U] = N(!1), ft = `${f}/api/v1/designer`;
+] }), si = ({ isOpen: d, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: h }) => {
+  const [y, c] = N([]), [u, x] = N(!1), [F, C] = N(null), [p, I] = N(""), [T, w] = N(""), [z, E] = N({});
+  nt(null);
+  const [S, $] = N(!1), [B, W] = N(!1), [at, U] = N(!1), ft = `${h}/api/v1/designer`;
   et(() => {
     d && s && q();
   }, [d, s]);
   const q = async () => {
-    const L = sessionStorage.getItem("apc_x_sub_status");
-    L === "active" ? ($(!0), W(!0), Y()) : L === "inactive" ? ($(!1), W(!0)) : (U(!0), await rt());
+    const M = sessionStorage.getItem("apc_x_sub_status");
+    M === "active" ? ($(!0), W(!0), Y()) : M === "inactive" ? ($(!1), W(!0)) : (U(!0), await rt());
   }, rt = async () => {
     if (!s) {
       $(!1), W(!0), U(!1);
       return;
     }
-    const L = `${ft}/get-subscription-status/${s}`;
+    const M = `${ft}/get-subscription-status/${s}`;
     try {
-      (await ae.get(L)).data.object === "active" ? (sessionStorage.setItem("apc_x_sub_status", "active"), $(!0), Y()) : (sessionStorage.setItem("apc_x_sub_status", "inactive"), $(!1));
+      (await ae.get(M)).data.object === "active" ? (sessionStorage.setItem("apc_x_sub_status", "active"), $(!0), Y()) : (sessionStorage.setItem("apc_x_sub_status", "inactive"), $(!1));
     } catch (G) {
       console.error("Subscription check failed:", G), sessionStorage.setItem("apc_x_sub_status", "inactive"), $(!1);
     } finally {
       U(!1), W(!0);
     }
   }, Y = async () => {
-    const L = sessionStorage.getItem("apc_stickers");
-    if (L)
+    const M = sessionStorage.getItem("apc_stickers");
+    if (M)
       try {
-        const G = JSON.parse(L);
+        const G = JSON.parse(M);
         c(G);
         return;
       } catch {
         console.warn("Failed to parse cached stickers, fetching fresh data");
       }
-    g(!0), C(null);
+    x(!0), C(null);
     try {
       const G = await ae.get(`${ft}/get-stickers`);
       if (G.data && G.data.object && G.data.object.contents) {
@@ -908,43 +908,43 @@ const Pt = {
     } catch (G) {
       console.error("Error fetching stickers:", G), C("Failed to load stickers. Please try again.");
     } finally {
-      g(!1);
+      x(!1);
     }
-  }, O = (L, G) => {
+  }, O = (M, G) => {
     a({
       type: "sticker",
-      src: L,
+      src: M,
       name: G,
       width: 100,
       height: 100,
       x: 100,
       y: 100
     }), o();
-  }, J = (L) => {
+  }, J = (M) => {
     E((G) => ({
       ...G,
-      [L]: !G[L]
+      [M]: !G[M]
     }));
-  }, st = (L) => {
+  }, st = (M) => {
     const G = {};
-    return L.forEach((j) => {
+    return M.forEach((j) => {
       const m = j.name.split("/");
       let A = G;
       m.forEach((Q, _) => {
         A[Q] || (A[Q] = _ === m.length - 1 ? j : {}), A = A[Q];
       });
     }), G;
-  }, K = (L, G = "", j = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${j * 15}px` }, children: Object.keys(L).map((m) => {
+  }, K = (M, G = "", j = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${j * 15}px` }, children: Object.keys(M).map((m) => {
     const A = `${G}/${m}`, Q = z[A];
-    return L[m].type === "image" ? !T || m.toLowerCase().includes(T.toLowerCase()) ? /* @__PURE__ */ i.jsx(
+    return M[m].type === "image" ? !T || m.toLowerCase().includes(T.toLowerCase()) ? /* @__PURE__ */ i.jsx(
       "div",
       {
         className: "sticker-item",
-        onClick: () => O(L[m].url, m),
+        onClick: () => O(M[m].url, m),
         children: /* @__PURE__ */ i.jsx("div", { className: "sticker-preview", children: /* @__PURE__ */ i.jsx(
           "img",
           {
-            src: L[m].url,
+            src: M[m].url,
             alt: m,
             loading: "lazy",
             onError: (Z) => {
@@ -966,12 +966,12 @@ const Pt = {
           ]
         }
       ),
-      Q && K(L[m], A, j + 1)
+      Q && K(M[m], A, j + 1)
     ] }, A);
-  }) }), it = x.filter(
-    (L) => !T || L.name.toLowerCase().includes(T.toLowerCase())
+  }) }), it = y.filter(
+    (M) => !T || M.name.toLowerCase().includes(T.toLowerCase())
   );
-  return d ? /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-content", onClick: (L) => L.stopPropagation(), children: [
+  return d ? /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-content", onClick: (M) => M.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-header", children: [
       /* @__PURE__ */ i.jsx("h3", { children: "Stickers" }),
       /* @__PURE__ */ i.jsx(
@@ -986,7 +986,7 @@ const Pt = {
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-body", children: [
       at && /* @__PURE__ */ i.jsx(ce, {}),
-      !S && !at && B && /* @__PURE__ */ i.jsx(ri, { theme: l }),
+      !S && !at && B && /* @__PURE__ */ i.jsx(ai, { theme: l }),
       S && B && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
         /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-controls", children: /* @__PURE__ */ i.jsx("div", { className: "search-container", children: /* @__PURE__ */ i.jsx(
           "input",
@@ -994,20 +994,20 @@ const Pt = {
             type: "text",
             placeholder: "Search stickers...",
             value: T,
-            onChange: (L) => w(L.target.value),
+            onChange: (M) => w(M.target.value),
             className: "sticker-search"
           }
         ) }) }),
-        y && /* @__PURE__ */ i.jsx(ce, {}),
+        u && /* @__PURE__ */ i.jsx(ce, {}),
         F && /* @__PURE__ */ i.jsxs("div", { className: "sticker-error", children: [
           /* @__PURE__ */ i.jsx("p", { children: F }),
           /* @__PURE__ */ i.jsx("button", { onClick: Y, children: "Retry" })
         ] }),
-        !y && !F && x.length > 0 && /* @__PURE__ */ i.jsx("div", { className: "sticker-grid", children: K(st(it)) })
+        !u && !F && y.length > 0 && /* @__PURE__ */ i.jsx("div", { className: "sticker-grid", children: K(st(it)) })
       ] })
     ] })
   ] }) }) : null;
-}, si = [
+}, li = [
   // FLORAL DESIGNS (40 items)
   {
     id: 1,
@@ -2559,10 +2559,10 @@ const Pt = {
     category: "Geometric",
     description: "Complex mandala flower pattern"
   }
-], li = ({ isOpen: d, onClose: o, onAddEmbroidery: a, theme: l, apiKey: s, apiEndpoint: f }) => {
-  const [x, c] = N([]), [y, g] = N(!1), [F, C] = N(null), [p, I] = N(""), [T, w] = N("All"), z = dt(null), E = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
+], ni = ({ isOpen: d, onClose: o, onAddEmbroidery: a, theme: l, apiKey: s, apiEndpoint: h }) => {
+  const [y, c] = N([]), [u, x] = N(!1), [F, C] = N(null), [p, I] = N(""), [T, w] = N("All"), z = nt(null), E = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
   et(() => {
-    d && c(si);
+    d && c(li);
   }, [d]);
   const S = (B) => {
     a({
@@ -2576,7 +2576,7 @@ const Pt = {
       x: 100,
       y: 100
     }), o();
-  }, $ = x.filter((B) => {
+  }, $ = y.filter((B) => {
     const W = !p || B.name.toLowerCase().includes(p.toLowerCase()) || B.description.toLowerCase().includes(p.toLowerCase()), at = T === "All" || B.category === T;
     return W && at;
   });
@@ -2624,12 +2624,12 @@ const Pt = {
           ] })
         ] }),
         /* @__PURE__ */ i.jsxs("div", { className: "embroidery-modal-body", children: [
-          y && /* @__PURE__ */ i.jsxs("div", { className: "embroidery-loading", children: [
+          u && /* @__PURE__ */ i.jsxs("div", { className: "embroidery-loading", children: [
             /* @__PURE__ */ i.jsx("div", { className: "loading-spinner" }),
             /* @__PURE__ */ i.jsx("p", { children: "Loading embroidery designs..." })
           ] }),
           F && /* @__PURE__ */ i.jsx("div", { className: "embroidery-error", children: /* @__PURE__ */ i.jsx("p", { children: F }) }),
-          !y && !F && /* @__PURE__ */ i.jsx("div", { className: "embroidery-grid", children: $.map((B) => /* @__PURE__ */ i.jsxs(
+          !u && !F && /* @__PURE__ */ i.jsx("div", { className: "embroidery-grid", children: $.map((B) => /* @__PURE__ */ i.jsxs(
             "div",
             {
               className: "embroidery-item",
@@ -2655,7 +2655,7 @@ const Pt = {
             },
             B.id
           )) }),
-          !y && !F && $.length === 0 && /* @__PURE__ */ i.jsx("div", { className: "no-embroideries", children: /* @__PURE__ */ i.jsx("p", { children: "No embroidery designs found matching your search." }) })
+          !u && !F && $.length === 0 && /* @__PURE__ */ i.jsx("div", { className: "no-embroideries", children: /* @__PURE__ */ i.jsx("p", { children: "No embroidery designs found matching your search." }) })
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "embroidery-modal-footer", children: /* @__PURE__ */ i.jsxs("div", { className: "embroidery-disclaimer", children: [
           /* @__PURE__ */ i.jsx("span", { className: "disclaimer-icon", children: "ℹ️" }),
@@ -4601,17 +4601,17 @@ const Pt = {
     fill: "#8B0000",
     textAlign: "center"
   }
-], ni = ({ isOpen: d, onClose: o, onAddText: a, theme: l }) => {
-  const [s, f] = N(""), [x, c] = N("All"), y = re(() => {
+], ci = ({ isOpen: d, onClose: o, onAddText: a, theme: l }) => {
+  const [s, h] = N(""), [y, c] = N("All"), u = re(() => {
     const p = Nt.reduce((I, T) => (I[T.category] = (I[T.category] || 0) + 1, I), {});
     return [
       { name: "All", count: Nt.length },
       ...Object.entries(p).map(([I, T]) => ({ name: I, count: T }))
     ];
-  }, [Nt]), g = re(() => Nt.filter((p) => {
-    const I = !s || p.text.toLowerCase().includes(s.toLowerCase()) || p.category.toLowerCase().includes(s.toLowerCase()), T = x === "All" || p.category === x;
+  }, [Nt]), x = re(() => Nt.filter((p) => {
+    const I = !s || p.text.toLowerCase().includes(s.toLowerCase()) || p.category.toLowerCase().includes(s.toLowerCase()), T = y === "All" || p.category === y;
     return I && T;
-  }), [Nt, s, x]), F = (p) => {
+  }), [Nt, s, y]), F = (p) => {
     const I = {
       ...p,
       x: 100,
@@ -4640,14 +4640,14 @@ const Pt = {
           type: "text",
           placeholder: "Search templates...",
           value: s,
-          onChange: (p) => f(p.target.value),
+          onChange: (p) => h(p.target.value),
           className: "search-input"
         }
       ) }),
-      /* @__PURE__ */ i.jsx("div", { className: "category-tabs", children: y.map((p) => /* @__PURE__ */ i.jsxs(
+      /* @__PURE__ */ i.jsx("div", { className: "category-tabs", children: u.map((p) => /* @__PURE__ */ i.jsxs(
         "button",
         {
-          className: `category-tab ${x === p.name ? "active" : ""}`,
+          className: `category-tab ${y === p.name ? "active" : ""}`,
           onClick: () => c(p.name),
           children: [
             p.name,
@@ -4666,7 +4666,7 @@ const Pt = {
         /* @__PURE__ */ i.jsx("div", { className: "custom-icon", children: "✏️" }),
         /* @__PURE__ */ i.jsx("div", { className: "custom-label", children: "Create Custom Text" })
       ] }) }),
-      g.map((p) => /* @__PURE__ */ i.jsxs(
+      x.map((p) => /* @__PURE__ */ i.jsxs(
         "div",
         {
           className: "template-item",
@@ -4701,23 +4701,23 @@ const Pt = {
       ))
     ] }),
     /* @__PURE__ */ i.jsx("div", { className: "modal-footer", children: /* @__PURE__ */ i.jsxs("div", { className: "results-count", children: [
-      g.length,
+      x.length,
       " template",
-      g.length !== 1 ? "s" : "",
+      x.length !== 1 ? "s" : "",
       " found"
     ] }) })
   ] }) }) : null;
-}, ci = ({
+}, di = ({
   onAddElement: d,
   onDeleteElement: o,
   onDuplicateElement: a,
   onUndo: l,
   onRedo: s,
-  onToggleGrid: f,
-  onToggleRulers: x,
+  onToggleGrid: h,
+  onToggleRulers: y,
   onToggleSnap: c,
-  onImageUpload: y,
-  canUndo: g,
+  onImageUpload: u,
+  canUndo: x,
   canRedo: F,
   showGrid: C,
   showRulers: p,
@@ -4728,9 +4728,9 @@ const Pt = {
   apiKey: E,
   apiEndpoint: S
 }) => {
-  const [$, B] = N(!1), [W, at] = N(!1), [U, ft] = N(!1), [q, rt] = N(!1), [Y, O] = N(!1), [J, st] = N(!1), [K, it] = N(!1), L = (P) => {
-    const nt = P.target.files[0];
-    nt && nt.type.startsWith("image/") && y(nt), P.target.value = "";
+  const [$, B] = N(!1), [W, at] = N(!1), [U, ft] = N(!1), [q, rt] = N(!1), [Y, O] = N(!1), [J, st] = N(!1), [K, it] = N(!1), M = (P) => {
+    const ct = P.target.files[0];
+    ct && ct.type.startsWith("image/") && u(ct), P.target.value = "";
   }, G = (P) => {
     d("icon", {
       iconData: P,
@@ -4747,8 +4747,8 @@ const Pt = {
     d("sticker", P);
   }, Q = (P) => {
     d("embroidery", P);
-  }, _ = (P, nt) => {
-    d(P, nt);
+  }, _ = (P, ct) => {
+    d(P, ct);
   }, Z = () => {
     st(!J), it(!1);
   }, V = () => {
@@ -4766,7 +4766,7 @@ const Pt = {
           {
             className: "toolbar-btn compact",
             onClick: l,
-            disabled: !g || z,
+            disabled: !x || z,
             title: "Undo (Ctrl+Z)",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "↶" }),
@@ -4890,13 +4890,13 @@ const Pt = {
             {
               type: "file",
               accept: "image/*",
-              onChange: L,
+              onChange: M,
               disabled: z
             }
           )
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ i.jsx(ei, { onSelectIcon: G, theme: w, disabled: z }),
+        /* @__PURE__ */ i.jsx(ii, { onSelectIcon: G, theme: w, disabled: z }),
         /* @__PURE__ */ i.jsxs(
           "button",
           {
@@ -4989,7 +4989,7 @@ const Pt = {
           "button",
           {
             className: `toolbar-btn compact ${C ? "active" : ""}`,
-            onClick: f,
+            onClick: h,
             title: "Toggle Grid",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "⚏" }),
@@ -5001,7 +5001,7 @@ const Pt = {
           "button",
           {
             className: `toolbar-btn compact ${p ? "active" : ""}`,
-            onClick: x,
+            onClick: y,
             title: "Toggle Rulers",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "📐" }),
@@ -5024,7 +5024,7 @@ const Pt = {
       ] })
     ] }),
     /* @__PURE__ */ i.jsx(
-      ii,
+      oi,
       {
         isOpen: $,
         onClose: () => B(!1),
@@ -5033,7 +5033,7 @@ const Pt = {
       }
     ),
     /* @__PURE__ */ i.jsx(
-      oi,
+      ri,
       {
         isOpen: W,
         onClose: () => at(!1),
@@ -5042,7 +5042,7 @@ const Pt = {
       }
     ),
     /* @__PURE__ */ i.jsx(
-      ai,
+      si,
       {
         isOpen: U,
         onClose: () => ft(!1),
@@ -5053,7 +5053,7 @@ const Pt = {
       }
     ),
     /* @__PURE__ */ i.jsx(
-      li,
+      ni,
       {
         isOpen: q,
         onClose: () => rt(!1),
@@ -5064,7 +5064,7 @@ const Pt = {
       }
     ),
     /* @__PURE__ */ i.jsx(
-      ni,
+      ci,
       {
         isOpen: Y,
         onClose: () => O(!1),
@@ -5073,14 +5073,14 @@ const Pt = {
       }
     )
   ] });
-}, di = ({
+}, fi = ({
   selectedElement: d,
   onUpdate: o,
   onMoveLayer: a,
   availableFonts: l,
   theme: s
 }) => {
-  const [f, x] = N(!1);
+  const [h, y] = N(!1);
   if (!d)
     return /* @__PURE__ */ i.jsxs("div", { className: "properties-panel", children: [
       /* @__PURE__ */ i.jsx("h3", { children: "Properties" }),
@@ -5088,7 +5088,7 @@ const Pt = {
     ] });
   const c = (w, z) => {
     o(d.id, { [w]: z });
-  }, y = () => {
+  }, u = () => {
     var w, z, E;
     return /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
       /* @__PURE__ */ i.jsx("h4", { children: "Text Content" }),
@@ -5344,7 +5344,7 @@ const Pt = {
           ] })
         ] })
       ] }) }),
-      f && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      h && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
         /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
           /* @__PURE__ */ i.jsxs("div", { className: "input-group", children: [
             /* @__PURE__ */ i.jsx("label", { children: "Letter Spacing" }),
@@ -5552,7 +5552,7 @@ const Pt = {
         ] })
       ] })
     ] });
-  }, g = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
+  }, x = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
     /* @__PURE__ */ i.jsx("h4", { children: "Shape Properties" }),
     /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
       /* @__PURE__ */ i.jsx("label", { children: "Fill Color" }),
@@ -5635,7 +5635,7 @@ const Pt = {
         "%"
       ] })
     ] }),
-    f && /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
+    h && /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
       /* @__PURE__ */ i.jsx("label", { children: "Border Radius" }),
       /* @__PURE__ */ i.jsx(
         "input",
@@ -5803,8 +5803,8 @@ const Pt = {
       /* @__PURE__ */ i.jsx("span", { className: "element-type", children: d.type })
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "panel-content", children: [
-      d.type === "text" && y(),
-      T.includes(d.type) && g(),
+      d.type === "text" && u(),
+      T.includes(d.type) && x(),
       d.type === "image" && F(),
       d.type === "horizontalLine" && p(),
       C(),
@@ -5813,25 +5813,25 @@ const Pt = {
         "button",
         {
           className: "toggle-advanced",
-          onClick: () => x(!f),
+          onClick: () => y(!h),
           children: [
-            f ? "Hide" : "Show",
+            h ? "Hide" : "Show",
             " Advanced Options"
           ]
         }
       ) })
     ] })
   ] });
-}, fi = ({
+}, hi = ({
   elements: d,
   selectedElement: o,
   onSelectElement: a,
   onMoveLayer: l,
   onDeleteElement: s,
-  theme: f
+  theme: h
 }) => {
-  const x = (y, g) => {
-    switch (y) {
+  const y = (u, x) => {
+    switch (u) {
       case "text":
         return "T";
       case "rectangle":
@@ -5871,32 +5871,32 @@ const Pt = {
       default:
         return "?";
     }
-  }, c = (y) => {
-    var g, F;
-    if (y.type === "text")
-      return y.isIcon && y.iconData ? `Icon: ${y.iconData.name}` : ((g = y.text) == null ? void 0 : g.substring(0, 20)) + (((F = y.text) == null ? void 0 : F.length) > 20 ? "..." : "") || "Text";
-    if (y.type === "qrcode")
-      return `QR Code: ${(y.data || "").substring(0, 15) + ((y.data || "").length > 15 ? "..." : "")}`;
-    if (y.type === "barcode") {
-      const C = y.format || "CODE128", p = y.data || "";
+  }, c = (u) => {
+    var x, F;
+    if (u.type === "text")
+      return u.isIcon && u.iconData ? `Icon: ${u.iconData.name}` : ((x = u.text) == null ? void 0 : x.substring(0, 20)) + (((F = u.text) == null ? void 0 : F.length) > 20 ? "..." : "") || "Text";
+    if (u.type === "qrcode")
+      return `QR Code: ${(u.data || "").substring(0, 15) + ((u.data || "").length > 15 ? "..." : "")}`;
+    if (u.type === "barcode") {
+      const C = u.format || "CODE128", p = u.data || "";
       return `Barcode (${C}): ${p.substring(0, 10) + (p.length > 10 ? "..." : "")}`;
     }
-    return y.type === "sticker" ? `Sticker: ${(y.name || "Untitled").substring(0, 15)}` : y.type === "embroidery" ? `Embroidery: ${(y.name || "Design").substring(0, 15)}` : y.type.charAt(0).toUpperCase() + y.type.slice(1);
+    return u.type === "sticker" ? `Sticker: ${(u.name || "Untitled").substring(0, 15)}` : u.type === "embroidery" ? `Embroidery: ${(u.name || "Design").substring(0, 15)}` : u.type.charAt(0).toUpperCase() + u.type.slice(1);
   };
   return /* @__PURE__ */ i.jsxs("div", { className: "layers-panel", children: [
     /* @__PURE__ */ i.jsxs("div", { className: "panel-header", children: [
       /* @__PURE__ */ i.jsx("h3", { children: "Layers" }),
       /* @__PURE__ */ i.jsx("span", { className: "layer-count", children: d.length })
     ] }),
-    /* @__PURE__ */ i.jsx("div", { className: "layers-list", children: d.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-layers", children: "No elements added yet" }) : [...d].reverse().map((y, g) => /* @__PURE__ */ i.jsxs(
+    /* @__PURE__ */ i.jsx("div", { className: "layers-list", children: d.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-layers", children: "No elements added yet" }) : [...d].reverse().map((u, x) => /* @__PURE__ */ i.jsxs(
       "div",
       {
-        className: `layer-item ${(o == null ? void 0 : o.id) === y.id ? "selected" : ""}`,
-        onClick: () => a(y),
+        className: `layer-item ${(o == null ? void 0 : o.id) === u.id ? "selected" : ""}`,
+        onClick: () => a(u),
         children: [
           /* @__PURE__ */ i.jsxs("div", { className: "layer-info", children: [
-            /* @__PURE__ */ i.jsx("span", { className: "layer-icon", children: x(y.type) }),
-            /* @__PURE__ */ i.jsx("span", { className: "layer-name", children: c(y) })
+            /* @__PURE__ */ i.jsx("span", { className: "layer-icon", children: y(u.type) }),
+            /* @__PURE__ */ i.jsx("span", { className: "layer-name", children: c(u) })
           ] }),
           /* @__PURE__ */ i.jsxs("div", { className: "layer-controls", children: [
             /* @__PURE__ */ i.jsx(
@@ -5904,9 +5904,9 @@ const Pt = {
               {
                 className: "layer-btn",
                 onClick: (F) => {
-                  F.stopPropagation(), l(y.id, "up");
+                  F.stopPropagation(), l(u.id, "up");
                 },
-                disabled: g === 0,
+                disabled: x === 0,
                 title: "Move Up",
                 children: "↑"
               }
@@ -5916,9 +5916,9 @@ const Pt = {
               {
                 className: "layer-btn",
                 onClick: (F) => {
-                  F.stopPropagation(), l(y.id, "down");
+                  F.stopPropagation(), l(u.id, "down");
                 },
-                disabled: g === d.length - 1,
+                disabled: x === d.length - 1,
                 title: "Move Down",
                 children: "↓"
               }
@@ -5928,7 +5928,7 @@ const Pt = {
               {
                 className: "layer-btn delete",
                 onClick: (F) => {
-                  F.stopPropagation(), s(y.id);
+                  F.stopPropagation(), s(u.id);
                 },
                 title: "Delete",
                 children: "×"
@@ -5937,26 +5937,26 @@ const Pt = {
           ] })
         ]
       },
-      y.id
+      u.id
     )) })
   ] });
 };
-class hi {
+class gi {
   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, f = "png", x = !0, c = null) {
-    const y = {};
-    for (const g of a) {
-      const F = g.id || g.sectionName, C = o[F];
+  async exportAllSections(o, a, l, s, h = "png", y = !0, c = null) {
+    const u = {};
+    for (const x of a) {
+      const F = x.id || x.sectionName, C = o[F];
       if (!C || !C.elements || C.elements.length === 0) {
         console.log(`Skipping section ${F} - no elements`);
         continue;
       }
-      if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), x) {
-        let I = g.image || g.sectionImage;
-        if (c && c.sectionImage && (g.sectionName === "Front" || c.sections && Object.keys(c.sections).includes(g.sectionName)) && (I = c.sectionImage), I)
+      if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), y) {
+        let I = x.image || x.sectionImage;
+        if (c && c.sectionImage && (x.sectionName === "Front" || c.sections && Object.keys(c.sections).includes(x.sectionName)) && (I = c.sectionImage), I)
           try {
             const T = await this.loadImage(I);
             await this.processImageColor(T, C.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
@@ -5967,13 +5967,13 @@ class hi {
         this.ctx.clearRect(0, 0, l, s);
       for (const I of C.elements)
         await this.drawElement(I);
-      const p = this.canvas.toDataURL(`image/${f}`, f === "jpeg" ? 0.9 : void 0);
-      y[F] = {
+      const p = this.canvas.toDataURL(`image/${h}`, h === "jpeg" ? 0.9 : void 0);
+      u[F] = {
         dataUrl: p,
         blob: await this.dataUrlToBlob(p)
       };
     }
-    return y;
+    return u;
   }
   // Also add a method to download all exports
   async downloadExports(o, a = "design") {
@@ -5983,12 +5983,12 @@ class hi {
       return;
     }
     if (l.length === 1) {
-      const s = l[0], { blob: f } = o[s], x = URL.createObjectURL(f), c = document.createElement("a");
-      c.href = x, c.download = `${a}-${s}.png`, document.body.appendChild(c), c.click(), document.body.removeChild(c), URL.revokeObjectURL(x);
+      const s = l[0], { blob: h } = o[s], y = URL.createObjectURL(h), c = document.createElement("a");
+      c.href = y, c.download = `${a}-${s}.png`, document.body.appendChild(c), c.click(), document.body.removeChild(c), URL.revokeObjectURL(y);
     } else
       for (const s of l) {
-        const { blob: f } = o[s], x = URL.createObjectURL(f), c = document.createElement("a");
-        c.href = x, c.download = `${a}-${s}.png`, document.body.appendChild(c), c.click(), document.body.removeChild(c), URL.revokeObjectURL(x), await new Promise((y) => setTimeout(y, 100));
+        const { blob: h } = o[s], y = URL.createObjectURL(h), c = document.createElement("a");
+        c.href = y, c.download = `${a}-${s}.png`, document.body.appendChild(c), c.click(), document.body.removeChild(c), URL.revokeObjectURL(y), await new Promise((u) => setTimeout(u, 100));
       }
   }
   async loadImage(o) {
@@ -6005,18 +6005,18 @@ class hi {
   async processImageColor(o, a) {
     const l = document.createElement("canvas"), s = l.getContext("2d");
     l.width = o.width, l.height = o.height, s.clearRect(0, 0, l.width, l.height), s.drawImage(o, 0, 0);
-    const f = s.getImageData(0, 0, l.width, l.height), x = f.data, c = this.hexToRgb(a);
+    const h = s.getImageData(0, 0, l.width, l.height), y = h.data, c = this.hexToRgb(a);
     if (!c) {
       console.warn("Invalid target color:", a);
       return;
     }
-    const { r: y, g, b: F } = c;
-    for (let C = 0; C < x.length; C += 4) {
-      if (x[C + 3] === 0) continue;
-      const I = this.getLuma(x[C], x[C + 1], x[C + 2]);
-      x[C] = Math.round(y * I), x[C + 1] = Math.round(g * I), x[C + 2] = Math.round(F * I);
+    const { r: u, g: x, b: F } = c;
+    for (let C = 0; C < y.length; C += 4) {
+      if (y[C + 3] === 0) continue;
+      const I = this.getLuma(y[C], y[C + 1], y[C + 2]);
+      y[C] = Math.round(u * I), y[C + 1] = Math.round(x * I), y[C + 2] = Math.round(F * I);
     }
-    return s.putImageData(f, 0, 0), this.processedImage = new Image(), new Promise((C) => {
+    return s.putImageData(h, 0, 0), this.processedImage = new Image(), new Promise((C) => {
       this.processedImage.onload = () => {
         C();
       }, this.processedImage.onerror = () => {
@@ -6089,9 +6089,9 @@ class hi {
     this.ctx.font = `${o.fontStyle || "normal"} ${o.fontWeight || "normal"} ${o.fontSize || 20}px ${o.fontFamily || "Arial"}`, this.ctx.fillStyle = o.fill || "#000000", this.ctx.textAlign = o.textAlign || "left", this.ctx.textBaseline = "top", o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth);
     const a = (o.text || "Text").split(`
 `), l = (o.fontSize || 20) * 1.2;
-    a.forEach((s, f) => {
-      const x = f * l;
-      o.stroke && o.strokeWidth > 0 && this.ctx.strokeText(s, 0, x), this.ctx.fillText(s, 0, x);
+    a.forEach((s, h) => {
+      const y = h * l;
+      o.stroke && o.strokeWidth > 0 && this.ctx.strokeText(s, 0, y), this.ctx.fillText(s, 0, y);
     });
   }
   drawRectangle(o) {
@@ -6106,10 +6106,10 @@ class hi {
     this.ctx.beginPath(), this.ctx.moveTo(a, 0), this.ctx.lineTo(0, o.height), this.ctx.lineTo(o.width, o.height), this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
   drawStar(o) {
-    const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, f = s * 0.4, x = o.numPoints || 5;
+    const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, h = s * 0.4, y = o.numPoints || 5;
     this.ctx.beginPath();
-    for (let c = 0; c < x * 2; c++) {
-      const y = c % 2 === 0 ? s : f, g = c * Math.PI / x, F = a + Math.cos(g) * y, C = l + Math.sin(g) * y;
+    for (let c = 0; c < y * 2; c++) {
+      const u = c % 2 === 0 ? s : h, x = c * Math.PI / y, F = a + Math.cos(x) * u, C = l + Math.sin(x) * u;
       c === 0 ? this.ctx.moveTo(F, C) : this.ctx.lineTo(F, C);
     }
     this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
@@ -6120,10 +6120,10 @@ class hi {
   }
   async dataUrlToBlob(o) {
     return new Promise((a) => {
-      const l = document.createElement("canvas"), s = l.getContext("2d"), f = new Image();
-      f.onload = () => {
-        l.width = f.width, l.height = f.height, s.drawImage(f, 0, 0), l.toBlob(a);
-      }, f.src = o;
+      const l = document.createElement("canvas"), s = l.getContext("2d"), h = new Image();
+      h.onload = () => {
+        l.width = h.width, l.height = h.height, s.drawImage(h, 0, 0), l.toBlob(a);
+      }, h.src = o;
     });
   }
   hexToRgb(o) {
@@ -6140,67 +6140,67 @@ class hi {
     this.ctx.beginPath(), this.ctx.moveTo(a, 0), this.ctx.lineTo(o.width, l), this.ctx.lineTo(a, o.height), this.ctx.lineTo(0, l), this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
   drawHexagon(o) {
-    const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, f = 6;
+    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 < f; x++) {
-      const c = x * 2 * Math.PI / f - Math.PI / 2, y = a + s * Math.cos(c), g = l + s * Math.sin(c);
-      x === 0 ? this.ctx.moveTo(y, g) : this.ctx.lineTo(y, g);
+    for (let y = 0; y < h; y++) {
+      const c = y * 2 * Math.PI / h - Math.PI / 2, u = a + s * Math.cos(c), x = l + s * Math.sin(c);
+      y === 0 ? this.ctx.moveTo(u, x) : this.ctx.lineTo(u, x);
     }
     this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
   drawPentagon(o) {
-    const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, f = 5;
+    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 < f; x++) {
-      const c = x * 2 * Math.PI / f - Math.PI / 2, y = a + s * Math.cos(c), g = l + s * Math.sin(c);
-      x === 0 ? this.ctx.moveTo(y, g) : this.ctx.lineTo(y, g);
+    for (let y = 0; y < h; y++) {
+      const c = y * 2 * Math.PI / h - Math.PI / 2, u = a + s * Math.cos(c), x = l + s * Math.sin(c);
+      y === 0 ? this.ctx.moveTo(u, x) : this.ctx.lineTo(u, x);
     }
     this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
   drawHeart(o) {
-    const a = o.width, l = o.height, s = 0, f = 0;
+    const a = o.width, l = o.height, s = 0, h = 0;
     this.ctx.beginPath();
-    const x = l * 0.3;
-    this.ctx.moveTo(s + a / 2, f + x), this.ctx.bezierCurveTo(
+    const y = l * 0.3;
+    this.ctx.moveTo(s + a / 2, h + y), this.ctx.bezierCurveTo(
       s + a / 2,
-      f,
+      h,
       s,
-      f,
+      h,
       s,
-      f + x
+      h + y
     ), this.ctx.bezierCurveTo(
       s,
-      f + (l + x) / 2,
+      h + (l + y) / 2,
       s + a / 2,
-      f + (l + x) / 2,
+      h + (l + y) / 2,
       s + a / 2,
-      f + l
+      h + l
     ), this.ctx.bezierCurveTo(
       s + a / 2,
-      f + (l + x) / 2,
+      h + (l + y) / 2,
       s + a,
-      f + (l + x) / 2,
+      h + (l + y) / 2,
       s + a,
-      f + x
+      h + y
     ), this.ctx.bezierCurveTo(
       s + a,
-      f,
+      h,
       s + a / 2,
-      f,
+      h,
       s + a / 2,
-      f + x
+      h + y
     ), this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
   drawOval(o) {
-    const a = o.width / 2, l = o.height / 2, s = o.width / 2, f = o.height / 2;
-    this.ctx.beginPath(), this.ctx.ellipse(a, l, s, f, 0, 0, 2 * Math.PI), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
+    const a = o.width / 2, l = o.height / 2, s = o.width / 2, h = o.height / 2;
+    this.ctx.beginPath(), this.ctx.ellipse(a, l, s, h, 0, 0, 2 * Math.PI), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
   drawRoundedRectangle(o) {
     const a = Math.min(o.width, o.height) * 0.1;
     this.drawRoundedRect(0, 0, o.width, o.height, a), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
   }
-  drawRoundedRect(o, a, l, s, f) {
-    this.ctx.beginPath(), this.ctx.moveTo(o + f, a), this.ctx.lineTo(o + l - f, a), this.ctx.quadraticCurveTo(o + l, a, o + l, a + f), this.ctx.lineTo(o + l, a + s - f), this.ctx.quadraticCurveTo(o + l, a + s, o + l - f, a + s), this.ctx.lineTo(o + f, a + s), this.ctx.quadraticCurveTo(o, a + s, o, a + s - f), this.ctx.lineTo(o, a + f), this.ctx.quadraticCurveTo(o, a, o + f, a), this.ctx.closePath();
+  drawRoundedRect(o, a, l, s, h) {
+    this.ctx.beginPath(), this.ctx.moveTo(o + h, a), this.ctx.lineTo(o + l - h, a), this.ctx.quadraticCurveTo(o + l, a, o + l, a + h), this.ctx.lineTo(o + l, a + s - h), this.ctx.quadraticCurveTo(o + l, a + s, o + l - h, a + s), this.ctx.lineTo(o + h, a + s), this.ctx.quadraticCurveTo(o, a + s, o, a + s - h), this.ctx.lineTo(o, a + h), this.ctx.quadraticCurveTo(o, a, o + h, a), this.ctx.closePath();
   }
   async drawQRCode(o) {
     if (o.imageObject)
@@ -6321,9 +6321,9 @@ class hi {
     });
   }
   // Export all sections as JSON with File objects
-  async exportAllSectionsAsJSON(o, a, l, s, f = "png", x = null) {
+  async exportAllSectionsAsJSON(o, a, l, s, h = "png", y = null) {
     var p, I;
-    const c = [], y = [], g = {};
+    const c = [], u = [], x = {};
     for (const T of a) {
       const w = T.sectionName, z = o[w];
       if (!z || !z.elements || z.elements.length === 0) {
@@ -6331,7 +6331,7 @@ class hi {
         continue;
       }
       let E = T.image || T.sectionImage;
-      x && x.sectionImage && (T.sectionName === "Front" || x.sections && Object.keys(x.sections).includes(T.sectionName)) && (E = x.sectionImage);
+      y && y.sectionImage && (T.sectionName === "Front" || y.sections && Object.keys(y.sections).includes(T.sectionName)) && (E = y.sectionImage);
       const S = {
         ...z,
         // Include background information using the determined image
@@ -6344,22 +6344,22 @@ class hi {
         canvasWidth: l,
         canvasHeight: s
       };
-      g[w] = S;
+      x[w] = S;
       const $ = await this.exportSectionAsBlob(
         z,
         T,
         l,
         s,
-        f,
+        h,
         !0,
-        x
+        y
         // Pass initData to exportSectionAsBlob
       );
       if ($) {
         const W = await this.blobToFile(
           $,
-          `${w}-full.${f}`,
-          `image/${f}`
+          `${w}-full.${h}`,
+          `image/${h}`
         );
         c.push({
           sectionName: w,
@@ -6371,41 +6371,41 @@ class hi {
         T,
         l,
         s,
-        f,
+        h,
         !1,
-        x
+        y
         // Pass initData to exportSectionAsBlob
       );
       if (B) {
         const W = await this.blobToFile(
           B,
-          `${w}-print.${f}`,
-          `image/${f}`
+          `${w}-print.${h}`,
+          `image/${h}`
         );
-        y.push({
+        u.push({
           sectionName: w,
           sectionImage: W
         });
       }
     }
     let F = ((p = a[0]) == null ? void 0 : p.image) || ((I = a[0]) == null ? void 0 : I.sectionImage);
-    if (x && x.sectionImage) {
+    if (y && y.sectionImage) {
       const T = a[0];
-      T && (T.sectionName === "Front" || x.sections && Object.keys(x.sections).includes(T.sectionName)) && (F = x.sectionImage);
+      T && (T.sectionName === "Front" || y.sections && Object.keys(y.sections).includes(T.sectionName)) && (F = y.sectionImage);
     }
     const C = {
-      sections: g,
+      sections: x,
       canvasWidth: l,
       canvasHeight: s,
       sectionImage: F,
-      format: f,
+      format: h,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       version: "1.0",
       // Include initData information if present
-      ...x && {
+      ...y && {
         initData: {
-          sectionImage: x.sectionImage,
-          sections: x.sections ? Object.keys(x.sections) : []
+          sectionImage: y.sectionImage,
+          sections: y.sections ? Object.keys(y.sections) : []
         }
       },
       // Include product information for complete context
@@ -6419,46 +6419,46 @@ class hi {
     };
     return {
       fullDesign: c,
-      printReady: y,
+      printReady: u,
       designFile: JSON.stringify(C)
     };
   }
   // Helper method to export a single section as blob
-  async exportSectionAsBlob(o, a, l, s, f = "png", x = !0, c = null) {
+  async exportSectionAsBlob(o, a, l, s, h = "png", y = !0, c = null) {
     try {
-      if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), x) {
-        let y = a.image || a.sectionImage;
-        if (c && c.sectionImage && (a.sectionName === "Front" || c.sections && Object.keys(c.sections).includes(a.sectionName)) && (y = c.sectionImage), y)
+      if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), y) {
+        let u = a.image || a.sectionImage;
+        if (c && c.sectionImage && (a.sectionName === "Front" || c.sections && Object.keys(c.sections).includes(a.sectionName)) && (u = c.sectionImage), u)
           try {
-            const g = await this.loadImage(y);
-            await this.processImageColor(g, o.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
-          } catch (g) {
-            console.warn("Failed to load background image:", g);
+            const x = await this.loadImage(u);
+            await this.processImageColor(x, o.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
+          } catch (x) {
+            console.warn("Failed to load background image:", x);
           }
       } else
         this.ctx.clearRect(0, 0, l, s);
-      for (const y of o.elements)
-        await this.drawElement(y);
-      return new Promise((y) => {
-        this.canvas.toBlob(y, `image/${f}`, f === "jpeg" ? 0.9 : void 0);
+      for (const u of o.elements)
+        await this.drawElement(u);
+      return new Promise((u) => {
+        this.canvas.toBlob(u, `image/${h}`, h === "jpeg" ? 0.9 : void 0);
       });
-    } catch (y) {
-      return console.error("Error exporting section as blob:", y), null;
+    } catch (u) {
+      return console.error("Error exporting section as blob:", u), null;
     }
   }
   async exportCurrentSectionAsJSON(o, a = "png", l = null) {
     var I, T, w;
     const s = ((I = o.activeSection) == null ? void 0 : I.sectionName) || "main";
-    let f = ((T = o.activeSection) == null ? void 0 : T.sectionImage) || ((w = o.activeSection) == null ? void 0 : w.image);
-    l && l.sectionImage && (s === "Front" || l.sections && Object.keys(l.sections).includes(s)) && (f = l.sectionImage);
-    const x = {
+    let h = ((T = o.activeSection) == null ? void 0 : T.sectionImage) || ((w = o.activeSection) == null ? void 0 : w.image);
+    l && l.sectionImage && (s === "Front" || l.sections && Object.keys(l.sections).includes(s)) && (h = l.sectionImage);
+    const y = {
       elements: o.elements,
       selectedColor: o.selectedColor,
       canvasWidth: o.canvasWidth,
       canvasHeight: o.canvasHeight,
       // Include background information using the determined image
-      backgroundImage: f,
-      sectionImage: f,
+      backgroundImage: h,
+      sectionImage: h,
       sectionName: s,
       zoomLevel: o.zoomLevel,
       showGrid: o.showGrid,
@@ -6466,10 +6466,10 @@ class hi {
     }, c = {
       id: s,
       sectionName: s,
-      image: f,
-      sectionImage: f
-    }, y = [], g = [], F = await this.exportSectionAsBlob(
-      x,
+      image: h,
+      sectionImage: h
+    }, u = [], x = [], F = await this.exportSectionAsBlob(
+      y,
       c,
       o.canvasWidth,
       o.canvasHeight,
@@ -6484,13 +6484,13 @@ class hi {
         `${s}-full.${a}`,
         `image/${a}`
       );
-      y.push({
+      u.push({
         sectionName: s,
         sectionImage: z
       });
     }
     const C = await this.exportSectionAsBlob(
-      x,
+      y,
       c,
       o.canvasWidth,
       o.canvasHeight,
@@ -6505,16 +6505,16 @@ class hi {
         `${s}-print.${a}`,
         `image/${a}`
       );
-      g.push({
+      x.push({
         sectionName: s,
         sectionImage: z
       });
     }
     const p = {
-      sections: { [s]: x },
+      sections: { [s]: y },
       canvasWidth: o.canvasWidth,
       canvasHeight: o.canvasHeight,
-      sectionImage: f,
+      sectionImage: h,
       // Use the determined image here too
       format: a,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
@@ -6530,20 +6530,20 @@ class hi {
       productInfo: {
         sections: [{
           sectionName: s,
-          sectionImage: f,
+          sectionImage: h,
           // Use the determined image here too
           id: s
         }]
       }
     };
     return {
-      fullDesign: y,
-      printReady: g,
+      fullDesign: u,
+      printReady: x,
       designFile: JSON.stringify(p)
     };
   }
 }
-class gi {
+class xi {
   constructor(o = "localStorage") {
     this.storage = o === "sessionStorage" ? sessionStorage : localStorage, this.STORAGE_PREFIX = "mypixia_canvas_", this.DESIGNS_LIST_KEY = "mypixia_saved_designs";
   }
@@ -6551,10 +6551,10 @@ class gi {
   saveDesign(o, a) {
     var l;
     try {
-      const s = this.generateDesignId(o), f = (/* @__PURE__ */ new Date()).toISOString(), x = {
+      const s = this.generateDesignId(o), h = (/* @__PURE__ */ new Date()).toISOString(), y = {
         id: s,
         name: o,
-        timestamp: f,
+        timestamp: h,
         version: "1.0",
         canvasData: {
           elements: a.elements || [],
@@ -6570,11 +6570,11 @@ class gi {
         },
         metadata: {
           elementCount: ((l = a.elements) == null ? void 0 : l.length) || 0,
-          lastModified: f,
+          lastModified: h,
           thumbnail: a.thumbnail || null
         }
       };
-      return this.storage.setItem(this.STORAGE_PREFIX + s, JSON.stringify(x)), this.updateDesignsList(s, o, f), { success: !0, designId: s, message: "Design saved successfully" };
+      return this.storage.setItem(this.STORAGE_PREFIX + s, JSON.stringify(y)), this.updateDesignsList(s, o, h), { success: !0, designId: s, message: "Design saved successfully" };
     } catch (s) {
       return console.error("Error saving design:", s), { success: !1, error: s.message };
     }
@@ -6584,10 +6584,10 @@ class gi {
     try {
       let a = o;
       if (!o.startsWith("design_")) {
-        const x = this.getAllDesigns().find((c) => c.name === o);
-        if (!x)
+        const y = this.getAllDesigns().find((c) => c.name === o);
+        if (!y)
           return { success: !1, error: "Design not found" };
-        a = x.id;
+        a = y.id;
       }
       const l = this.storage.getItem(this.STORAGE_PREFIX + a);
       return l ? { success: !0, data: JSON.parse(l) } : { success: !1, error: "Design not found" };
@@ -6620,8 +6620,8 @@ class gi {
       const a = this.loadDesign(o);
       if (!a.success)
         return a;
-      const l = a.data, s = JSON.stringify(l, null, 2), f = new Blob([s], { type: "application/json" }), x = URL.createObjectURL(f), c = document.createElement("a");
-      return c.href = x, c.download = `${l.name}_${l.id}.json`, document.body.appendChild(c), c.click(), document.body.removeChild(c), URL.revokeObjectURL(x), { success: !0, message: "Design exported successfully" };
+      const l = a.data, s = JSON.stringify(l, null, 2), h = new Blob([s], { type: "application/json" }), y = URL.createObjectURL(h), c = document.createElement("a");
+      return c.href = y, c.download = `${l.name}_${l.id}.json`, document.body.appendChild(c), c.click(), document.body.removeChild(c), URL.revokeObjectURL(y), { success: !0, message: "Design exported successfully" };
     } catch (a) {
       return console.error("Error exporting design:", a), { success: !1, error: a.message };
     }
@@ -6633,13 +6633,13 @@ class gi {
         const l = new FileReader();
         l.onload = (s) => {
           try {
-            const f = JSON.parse(s.target.result);
-            if (!this.validateDesignData(f)) {
+            const h = JSON.parse(s.target.result);
+            if (!this.validateDesignData(h)) {
               a({ success: !1, error: "Invalid design file format" });
               return;
             }
-            const x = this.generateDesignId(f.name + "_imported");
-            f.id = x, f.name += "_imported", f.timestamp = (/* @__PURE__ */ new Date()).toISOString(), f.metadata.lastModified = f.timestamp, this.storage.setItem(this.STORAGE_PREFIX + x, JSON.stringify(f)), this.updateDesignsList(x, f.name, f.timestamp), a({ success: !0, data: f, message: "Design imported successfully" });
+            const y = this.generateDesignId(h.name + "_imported");
+            h.id = y, h.name += "_imported", h.timestamp = (/* @__PURE__ */ new Date()).toISOString(), h.metadata.lastModified = h.timestamp, this.storage.setItem(this.STORAGE_PREFIX + y, JSON.stringify(h)), this.updateDesignsList(y, h.name, h.timestamp), a({ success: !0, data: h, message: "Design imported successfully" });
           } catch {
             a({ success: !1, error: "Failed to parse design file" });
           }
@@ -6707,13 +6707,13 @@ class gi {
     return `design_${a}_${l}`;
   }
   updateDesignsList(o, a, l) {
-    const s = this.getAllDesigns(), f = s.findIndex((c) => c.id === o), x = {
+    const s = this.getAllDesigns(), h = s.findIndex((c) => c.id === o), y = {
       id: o,
       name: a,
       timestamp: l,
       lastModified: l
     };
-    f >= 0 ? s[f] = x : s.push(x), s.sort((c, y) => new Date(y.timestamp) - new Date(c.timestamp)), this.storage.setItem(this.DESIGNS_LIST_KEY, JSON.stringify(s));
+    h >= 0 ? s[h] = y : s.push(y), s.sort((c, u) => new Date(u.timestamp) - new Date(c.timestamp)), this.storage.setItem(this.DESIGNS_LIST_KEY, JSON.stringify(s));
   }
   validateDesignData(o) {
     return o && o.id && o.name && o.canvasData && Array.isArray(o.canvasData.elements);
@@ -6733,7 +6733,7 @@ class gi {
     return "Unknown";
   }
 }
-const xi = _e((d, o) => {
+const yi = Ye((d, o) => {
   const {
     theme: a = {
       primaryColor: "#000000",
@@ -6763,16 +6763,16 @@ const xi = _e((d, o) => {
         }
       ]
     },
-    initFile: f,
-    initDesignContent: x
-  } = d, [c, y] = N([]), [g, F] = N(null), [C, p] = N(!1), [I, T] = N(!1), [w, z] = N(!1), [E, S] = N({ x: 0, y: 0 }), [$, B] = N(null), [W, at] = N(800), [U, ft] = N(600), [q, rt] = N(1), [Y, O] = N(s.colorSettings[0]), [J, st] = N(!1), [K, it] = N(!0), [L, G] = N(!0), [j, m] = N(s.sections[0]), [A, Q] = N(!1), [_, Z] = N({}), [V, ht] = N([]), [H, P] = N(-1), [nt] = N(new gi("localStorage")), gt = dt(null), Dt = dt(null), kt = dt(null), wt = dt(null), Ut = dt(null), Et = dt(new hi()), Bt = dt(!1), [yt, Ot] = N(null), lt = ot(() => {
+    initFile: h,
+    initDesignContent: y
+  } = d, [c, u] = N([]), [x, F] = N(null), [C, p] = N(!1), [I, T] = N(!1), [w, z] = N(!1), [E, S] = N({ x: 0, y: 0 }), [$, B] = N(null), [W, at] = N(800), [U, ft] = N(600), [q, rt] = N(1), [Y, O] = N(s.colorSettings[0]), [J, st] = N(!1), [K, it] = N(!0), [M, G] = N(!0), [j, m] = N(s.sections[0]), [A, Q] = N(!1), [_, Z] = N({}), [V, ht] = N([]), [H, P] = N(-1), [ct] = N(new xi("localStorage")), gt = nt(null), Dt = nt(null), kt = nt(null), wt = nt(null), Ut = nt(null), Et = nt(new gi()), Bt = nt(!1), [yt, Ot] = N(null), lt = ot(() => {
     const e = {
       elements: JSON.parse(JSON.stringify(c)),
-      selectedElement: g ? { ...g } : null,
+      selectedElement: x ? { ...x } : null,
       timestamp: Date.now()
     }, t = V.slice(0, H + 1);
     t.push(e), t.length > 50 ? t.shift() : P(H + 1), ht(t);
-  }, [c, g, V, H]), St = ot(() => ({
+  }, [c, x, V, H]), St = ot(() => ({
     elements: c,
     canvasWidth: W,
     canvasHeight: U,
@@ -6782,16 +6782,16 @@ const xi = _e((d, o) => {
     sectionDesigns: _,
     zoomLevel: q,
     showGrid: J,
-    snapToGrid: L,
-    selectedElement: g ? { ...g } : null,
+    snapToGrid: M,
+    selectedElement: x ? { ...x } : null,
     canvasRef: gt
     // Include reference for thumbnail generation
-  }), [c, W, U, Y, j, s, _, q, J, L, g]), Qt = (e) => {
+  }), [c, W, U, Y, j, s, _, q, J, M, x]), Qt = (e) => {
     if (e.sections && typeof e.sections == "object") {
       const t = Object.keys(e.sections)[0], r = e.sections[t];
       if (r && r.elements) {
-        y(r.elements || []), at(r.canvasWidth || 800), ft(r.canvasHeight || 600), O(r.selectedColor || s.colorSettings[0]), rt(r.zoomLevel || 1), st(r.showGrid || !1), G(r.snapToGrid || !0), F(null), e.sections && Z(e.sections);
-        const n = s.sections.find((h) => h.sectionName === t);
+        u(r.elements || []), at(r.canvasWidth || 800), ft(r.canvasHeight || 600), O(r.selectedColor || s.colorSettings[0]), rt(r.zoomLevel || 1), st(r.showGrid || !1), G(r.snapToGrid || !0), F(null), e.sections && Z(e.sections);
+        const n = s.sections.find((f) => f.sectionName === t);
         n && m(n), ht([]), P(-1), setTimeout(() => {
           lt();
         }, 100);
@@ -6802,21 +6802,21 @@ const xi = _e((d, o) => {
   et(() => {
     const t = setTimeout(async () => {
       if (c.length === 0 && V.length <= 1)
-        if (x)
+        if (y)
           try {
-            const r = JSON.parse(x);
-            console.log("Loading design from content in memory:", r), Ot(r), Qt(r);
+            const r = JSON.parse(y);
+            Ot(r), Qt(r);
           } catch (r) {
             console.error("Error loading design file:", r), console.warn("Using default text instead");
           }
-        else if (f)
+        else if (h)
           try {
-            const r = await fetch(f);
+            const r = await fetch(h);
             if (r.ok) {
               const n = await r.text();
               if (n.trim()) {
-                const h = JSON.parse(n.trim());
-                console.log("Loading design from file:", h), Ot(h), Qt(h);
+                const f = JSON.parse(n.trim());
+                Ot(f), Qt(f);
               }
             } else
               console.warn("Failed to load design file, using default text");
@@ -6824,10 +6824,10 @@ const xi = _e((d, o) => {
             console.error("Error loading design file:", r), console.warn("Using default text instead");
           }
         else {
-          const n = "Arial", h = "Change me", b = document.createElement("canvas").getContext("2d");
+          const n = "Arial", f = "Change me", b = document.createElement("canvas").getContext("2d");
           b.font = `24px ${n}`;
-          const v = b.measureText(h).width, R = {
-            id: ct(),
+          const v = b.measureText(f).width, R = {
+            id: dt(),
             type: "text",
             x: W / 2 - v / 2,
             // Center the actual text width
@@ -6835,7 +6835,7 @@ const xi = _e((d, o) => {
             // Center based on font size
             width: v,
             height: 24,
-            text: h,
+            text: f,
             fontSize: 24,
             fontFamily: n,
             fontWeight: "normal",
@@ -6848,13 +6848,13 @@ const xi = _e((d, o) => {
             rotation: 0,
             opacity: 1
           };
-          y([R]), F(R), setTimeout(() => {
+          u([R]), F(R), setTimeout(() => {
             lt();
           }, 100);
         }
     }, 300);
     return () => clearTimeout(t);
-  }, [f, x, s.colorSettings, s.sections]);
+  }, [h, y, s.colorSettings, s.sections]);
   const zt = ot((e = "png", t = !0) => {
     const r = St();
     return s.sections, Et.current.exportAllSections(
@@ -6897,8 +6897,8 @@ const xi = _e((d, o) => {
   }, [W, U]), et(() => {
     V.length === 0 && lt();
   }, []);
-  const At = (e, t, r, n, h, u) => {
-    e.beginPath(), e.moveTo(t + u, r), e.lineTo(t + n - u, r), e.quadraticCurveTo(t + n, r, t + n, r + u), e.lineTo(t + n, r + h - u), e.quadraticCurveTo(t + n, r + h, t + n - u, r + h), e.lineTo(t + u, r + h), e.quadraticCurveTo(t, r + h, t, r + h - u), e.lineTo(t, r + u), e.quadraticCurveTo(t, r, t + u, r), e.closePath();
+  const At = (e, t, r, n, f, g) => {
+    e.beginPath(), e.moveTo(t + g, r), e.lineTo(t + n - g, r), e.quadraticCurveTo(t + n, r, t + n, r + g), e.lineTo(t + n, r + f - g), e.quadraticCurveTo(t + n, r + f, t + n - g, r + f), e.lineTo(t + g, r + f), e.quadraticCurveTo(t, r + f, t, r + f - g), e.lineTo(t, r + g), e.quadraticCurveTo(t, r, t + g, r), e.closePath();
   }, $t = (e, t) => {
     if (!t.isIcon)
       return {
@@ -6910,11 +6910,11 @@ const xi = _e((d, o) => {
         cy: t.y + t.height / 2
       };
     e.save(), e.font = `${t.fontStyle || ""} ${t.fontWeight || ""} ${t.fontSize}px ${t.fontFamily}`, e.textBaseline = "alphabetic", e.textAlign = "left";
-    const r = e.measureText(t.text), n = r.actualBoundingBoxAscent ?? t.fontSize * 0.8, h = r.actualBoundingBoxDescent ?? t.fontSize * 0.2, u = r.actualBoundingBoxLeft ?? 0, b = r.actualBoundingBoxRight ?? r.width, k = u + b, v = n + h, R = t.x, D = t.y, M = R - k / 2 - u, tt = D - v / 2 - n;
-    return e.restore(), { x: M, y: tt, width: k, height: v, cx: R, cy: D };
+    const r = e.measureText(t.text), n = r.actualBoundingBoxAscent ?? t.fontSize * 0.8, f = r.actualBoundingBoxDescent ?? t.fontSize * 0.2, g = r.actualBoundingBoxLeft ?? 0, b = r.actualBoundingBoxRight ?? r.width, k = g + b, v = n + f, R = t.x, D = t.y, L = R - k / 2 - g, tt = D - v / 2 - n;
+    return e.restore(), { x: L, y: tt, width: k, height: v, cx: R, cy: D };
   }, he = (e, t) => {
     if (!t) return;
-    const r = 8, n = 8, h = 4, u = 30, b = $t(e, t), k = t.isIcon ? Math.max(r, 12) : r, v = {
+    const r = 8, n = 8, f = 4, g = 30, b = $t(e, t), k = t.isIcon ? Math.max(r, 12) : r, v = {
       x: -b.width / 2 - k,
       y: -b.height / 2 - k,
       w: b.width + k * 2,
@@ -6933,8 +6933,8 @@ const xi = _e((d, o) => {
       v.y - 1,
       v.w + 2,
       v.h + 2,
-      h + 1
-    ), e.stroke(), e.strokeStyle = R, e.lineWidth = 2, e.setLineDash([8, 4]), At(e, v.x, v.y, v.w, v.h, h), e.stroke(), e.lineDashOffset = -(Date.now() / 50) % 12, e.strokeStyle = "#ffffff", e.lineWidth = 1, e.setLineDash([4, 8]), At(e, v.x, v.y, v.w, v.h, h), e.stroke(), e.setLineDash([]), e.lineDashOffset = 0, [
+      f + 1
+    ), e.stroke(), e.strokeStyle = R, e.lineWidth = 2, e.setLineDash([8, 4]), At(e, v.x, v.y, v.w, v.h, f), e.stroke(), e.lineDashOffset = -(Date.now() / 50) % 12, e.strokeStyle = "#ffffff", e.lineWidth = 1, e.setLineDash([4, 8]), At(e, v.x, v.y, v.w, v.h, f), e.stroke(), e.setLineDash([]), e.lineDashOffset = 0, [
       { x: v.x, y: v.y },
       { x: v.x + v.w, y: v.y },
       { x: v.x + v.w, y: v.y + v.h },
@@ -6957,11 +6957,11 @@ const xi = _e((d, o) => {
         n
       );
     });
-    const D = 0, M = v.y - u;
-    e.strokeStyle = "#3b82f6", e.lineWidth = 1, e.setLineDash([2, 2]), e.beginPath(), e.moveTo(D, M + 12), e.lineTo(D, v.y), e.stroke(), e.setLineDash([]), e.beginPath(), e.arc(D, M, 12, 0, 2 * Math.PI), e.fillStyle = "#f59e0b", e.fill(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.stroke(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.beginPath(), e.arc(D, M, 6, -Math.PI / 2, Math.PI, !1), e.stroke(), e.beginPath(), e.moveTo(D - 6, M), e.lineTo(D - 3, M - 3), e.lineTo(D - 3, M + 3), e.closePath(), e.fillStyle = "#ffffff", e.fill(), e.restore();
+    const D = 0, L = v.y - g;
+    e.strokeStyle = "#3b82f6", e.lineWidth = 1, e.setLineDash([2, 2]), e.beginPath(), e.moveTo(D, L + 12), e.lineTo(D, v.y), e.stroke(), e.setLineDash([]), e.beginPath(), e.arc(D, L, 12, 0, 2 * Math.PI), e.fillStyle = "#f59e0b", e.fill(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.stroke(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.beginPath(), e.arc(D, L, 6, -Math.PI / 2, Math.PI, !1), e.stroke(), e.beginPath(), e.moveTo(D - 6, L), e.lineTo(D - 3, L - 3), e.lineTo(D - 3, L + 3), e.closePath(), e.fillStyle = "#ffffff", e.fill(), e.restore();
   }, ge = (e, t) => {
     if (!t) return [];
-    const r = $t(e, t), n = t.isIcon ? Math.max(8, 12) : 8, h = 8, u = 30, b = (t.rotation || 0) * Math.PI / 180, k = {
+    const r = $t(e, t), n = t.isIcon ? Math.max(8, 12) : 8, f = 8, g = 30, b = (t.rotation || 0) * Math.PI / 180, k = {
       x: -r.width / 2 - n,
       y: -r.height / 2 - n,
       w: r.width + n * 2,
@@ -6971,20 +6971,20 @@ const xi = _e((d, o) => {
       { x: k.x + k.w, y: k.y, type: "ne-resize" },
       { x: k.x + k.w, y: k.y + k.h, type: "se-resize" },
       { x: k.x, y: k.y + k.h, type: "sw-resize" },
-      { x: 0, y: k.y - u, type: "rotate" }
+      { x: 0, y: k.y - g, type: "rotate" }
     ], R = Math.cos(b), D = Math.sin(b);
-    return v.map((M) => ({
-      x: r.cx + (M.x * R - M.y * D),
-      y: r.cy + (M.x * D + M.y * R),
-      type: M.type,
-      size: M.type === "rotate" ? 24 : h
+    return v.map((L) => ({
+      x: r.cx + (L.x * R - L.y * D),
+      y: r.cy + (L.x * D + L.y * R),
+      type: L.type,
+      size: L.type === "rotate" ? 24 : f
     }));
   }, Ht = (e, t, r) => {
     if (!r) return null;
     const n = gt.current;
     if (!n) return null;
-    const h = n.getContext("2d"), u = ge(h, r);
-    for (const b of u) {
+    const f = n.getContext("2d"), g = ge(f, r);
+    for (const b of g) {
       const k = e - b.x, v = t - b.y;
       if (Math.sqrt(k * k + v * v) <= b.size / 2)
         return b.type;
@@ -6993,19 +6993,19 @@ const xi = _e((d, o) => {
   }, Ft = ot(() => {
     if (H > 0) {
       const e = V[H - 1];
-      y(e.elements), F(e.selectedElement), P(H - 1);
+      u(e.elements), F(e.selectedElement), P(H - 1);
     }
   }, [V, H]), bt = ot(() => {
     if (H < V.length - 1) {
       const e = V[H + 1];
-      y(e.elements), F(e.selectedElement), P(H + 1);
+      u(e.elements), F(e.selectedElement), P(H + 1);
     }
-  }, [V, H]), ut = (e) => L ? Math.round(e / It) * It : e;
+  }, [V, H]), mt = (e) => M ? Math.round(e / It) * It : e;
   et(() => {
     if (j != null && j.sectionImage) {
       kt.current = null, wt.current = null;
       const e = gt.current;
-      if (e && e.getContext("2d").clearRect(0, 0, W, U), f && !yt)
+      if (e && e.getContext("2d").clearRect(0, 0, W, U), h && !yt)
         return;
       const t = new Image();
       t.crossOrigin = "anonymous", t.onload = () => {
@@ -7021,10 +7021,10 @@ const xi = _e((d, o) => {
     const e = (t) => {
       const r = document.activeElement;
       if (!(r && (r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.tagName === "SELECT" || r.isContentEditable))) {
-        if ((t.key === "Delete" || t.key === "Backspace") && g && !l) {
+        if ((t.key === "Delete" || t.key === "Backspace") && x && !l) {
           t.preventDefault();
-          const h = g;
-          y((u) => u.filter((b) => b.id !== h.id)), F(null), lt();
+          const f = x;
+          u((g) => g.filter((b) => b.id !== f.id)), F(null), lt();
         }
         if (t.ctrlKey || t.metaKey)
           switch (t.key) {
@@ -7040,7 +7040,7 @@ const xi = _e((d, o) => {
     return document.addEventListener("keydown", e), () => {
       document.removeEventListener("keydown", e);
     };
-  }, [g, l, Ft, bt, lt]);
+  }, [x, l, Ft, bt, lt]);
   const xe = (e) => {
     const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
     return t ? {
@@ -7048,14 +7048,14 @@ const xi = _e((d, o) => {
       g: parseInt(t[2], 16),
       b: parseInt(t[3], 16)
     } : null;
-  }, ct = () => `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, ye = (e) => {
+  }, dt = () => `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, ye = (e) => {
     e.strokeStyle = "#e0e0e0", e.lineWidth = 1, e.setLineDash([1, 1]);
     for (let t = 0; t <= W; t += It)
       e.beginPath(), e.moveTo(t, 0), e.lineTo(t, U), e.stroke();
     for (let t = 0; t <= U; t += It)
       e.beginPath(), e.moveTo(0, t), e.lineTo(W, t), e.stroke();
     e.setLineDash([]);
-  }, me = (e, t) => {
+  }, ue = (e, t) => {
     e.save();
     const r = t.x + t.width / 2, n = t.y + t.height / 2;
     switch (e.translate(r, n), t.rotation && e.rotate(t.rotation * Math.PI / 180), e.translate(-t.width / 2, -t.height / 2), t.type) {
@@ -7096,41 +7096,41 @@ const xi = _e((d, o) => {
         Ae(e, t);
         break;
       case "image":
-        De(e, t);
+        Ee(e, t);
         break;
       case "qrcode":
         pe(e, t);
         break;
       case "barcode":
-        ue(e, t);
+        me(e, t);
         break;
       case "sticker":
-        Ee(e, t);
+        Be(e, t);
         break;
       case "horizontalLine":
         Re(e, t);
         break;
       case "embroidery":
-        Be(e, t);
+        ze(e, t);
         break;
     }
     e.restore();
-  }, ue = (e, t) => {
+  }, me = (e, t) => {
     if (t.imageObject)
       e.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
       t.imageLoading = !0;
       const r = new Image();
       r.onload = () => {
-        y(
+        u(
           (n) => n.map(
-            (h) => h.id === t.id ? { ...h, imageObject: r, imageLoading: !1 } : h
+            (f) => f.id === t.id ? { ...f, imageObject: r, imageLoading: !1 } : f
           )
         );
       }, r.onerror = () => {
-        y(
+        u(
           (n) => n.map(
-            (h) => h.id === t.id ? { ...h, imageLoading: !1 } : h
+            (f) => f.id === t.id ? { ...f, imageLoading: !1 } : f
           )
         );
       }, r.src = t.src, e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading...", t.width / 2, t.height / 2);
@@ -7142,15 +7142,15 @@ const xi = _e((d, o) => {
       t.imageLoading = !0;
       const r = new Image();
       r.onload = () => {
-        y(
+        u(
           (n) => n.map(
-            (h) => h.id === t.id ? { ...h, imageObject: r, imageLoading: !1 } : h
+            (f) => f.id === t.id ? { ...f, imageObject: r, imageLoading: !1 } : f
           )
         );
       }, r.onerror = () => {
-        y(
+        u(
           (n) => n.map(
-            (h) => h.id === t.id ? { ...h, imageLoading: !1 } : h
+            (f) => f.id === t.id ? { ...f, imageLoading: !1 } : f
           )
         );
       }, r.src = t.src, e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading QR...", t.width / 2, t.height / 2);
@@ -7172,23 +7172,23 @@ const xi = _e((d, o) => {
       }
     e.font = `${t.fontStyle || "normal"} ${t.fontWeight || "normal"} ${t.fontSize || 20}px ${t.fontFamily || "Arial"}`, e.fillStyle = t.fill || "#000000", e.textAlign = t.textAlign || "left", e.textBaseline = "top", t.opacity !== void 0 && (e.globalAlpha = t.opacity), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth);
     const n = r.split(`
-`), h = (t.fontSize || 20) * (t.lineHeight || 1.2), u = Math.max(...n.map((k) => e.measureText(k).width)), b = n.length * h;
+`), f = (t.fontSize || 20) * (t.lineHeight || 1.2), g = Math.max(...n.map((k) => e.measureText(k).width)), b = n.length * f;
     if (t.backgroundColor && t.backgroundColor !== "transparent") {
       e.fillStyle = t.backgroundColor;
       const k = t.backgroundPadding || 4;
       e.fillRect(
         -k,
         -k,
-        u + k * 2,
+        g + k * 2,
         b + k * 2
       ), e.fillStyle = t.fill || "#000000";
     }
     n.forEach((k, v) => {
-      const R = v * h, D = e.measureText(k).width;
+      const R = v * f, D = e.measureText(k).width;
       t.stroke && t.strokeWidth > 0 && e.strokeText(k, 0, R), e.fillText(k, 0, R);
-      const M = t.fontSize || 20, tt = t.decorationColor || t.fill || "#000000", xt = Math.max(1, M / 20);
+      const L = t.fontSize || 20, tt = t.decorationColor || t.fill || "#000000", xt = Math.max(1, L / 20);
       if (e.strokeStyle = tt, e.lineWidth = xt, t.textDecoration === "underline" || t.underline) {
-        const pt = R + M + 2;
+        const pt = R + L + 2;
         e.beginPath(), e.moveTo(0, pt), e.lineTo(D, pt), e.stroke();
       }
       if (t.textDecoration === "overline" || t.overline) {
@@ -7196,13 +7196,13 @@ const xi = _e((d, o) => {
         e.beginPath(), e.moveTo(0, pt), e.lineTo(D, pt), e.stroke();
       }
       if (t.textDecoration === "line-through" || t.strikethrough) {
-        const pt = R + M / 2;
+        const pt = R + L / 2;
         e.beginPath(), e.moveTo(0, pt), e.lineTo(D, pt), e.stroke();
       }
-      typeof t.textDecoration == "string" && t.textDecoration.includes(" ") && t.textDecoration.split(" ").forEach((He) => {
-        switch (He.trim()) {
+      typeof t.textDecoration == "string" && t.textDecoration.includes(" ") && t.textDecoration.split(" ").forEach((Ge) => {
+        switch (Ge.trim()) {
           case "underline":
-            const ee = R + M + 2;
+            const ee = R + L + 2;
             e.beginPath(), e.moveTo(0, ee), e.lineTo(D, ee), e.stroke();
             break;
           case "overline":
@@ -7210,7 +7210,7 @@ const xi = _e((d, o) => {
             e.beginPath(), e.moveTo(0, ie), e.lineTo(D, ie), e.stroke();
             break;
           case "line-through":
-            const oe = R + M / 2;
+            const oe = R + L / 2;
             e.beginPath(), e.moveTo(0, oe), e.lineTo(D, oe), e.stroke();
             break;
         }
@@ -7219,112 +7219,118 @@ const xi = _e((d, o) => {
   }, be = (e, t) => {
     t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fillRect(0, 0, t.width, t.height)), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.strokeRect(0, 0, t.width, t.height));
   }, ve = (e, t) => {
-    const r = Math.min(t.width, t.height) / 2, n = t.width / 2, h = t.height / 2;
-    e.beginPath(), e.arc(n, h, r, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
+    const r = Math.min(t.width, t.height) / 2, n = t.width / 2, f = t.height / 2;
+    e.beginPath(), e.arc(n, f, r, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, ke = (e, t) => {
     const r = t.width / 2;
     t.height / 2, e.beginPath(), e.moveTo(r, 0), e.lineTo(0, t.height), e.lineTo(t.width, t.height), e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Se = (e, t) => {
-    const r = t.width / 2, n = t.height / 2, h = Math.min(t.width, t.height) / 2, u = h * 0.4, b = t.numPoints || 5;
+    const r = t.width / 2, n = t.height / 2, f = Math.min(t.width, t.height) / 2, g = f * 0.4, b = t.numPoints || 5;
     e.beginPath();
     for (let k = 0; k < b * 2; k++) {
-      const v = k % 2 === 0 ? h : u, R = k * Math.PI / b, D = r + Math.cos(R) * v, M = n + Math.sin(R) * v;
-      k === 0 ? e.moveTo(D, M) : e.lineTo(D, M);
+      const v = k % 2 === 0 ? f : g, R = k * Math.PI / b, D = r + Math.cos(R) * v, L = n + Math.sin(R) * v;
+      k === 0 ? e.moveTo(D, L) : e.lineTo(D, L);
     }
     e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Fe = (e, t) => {
-    const r = t.width, n = t.height, h = r * 0.3;
-    e.beginPath(), e.moveTo(r / 2, 0), e.lineTo(r, n * 0.6), e.lineTo(r - h, n * 0.6), e.lineTo(r - h, n), e.lineTo(h, n), e.lineTo(h, n * 0.6), e.lineTo(0, n * 0.6), e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
+    const r = t.width, n = t.height, f = r * 0.3;
+    e.beginPath(), e.moveTo(r / 2, 0), e.lineTo(r, n * 0.6), e.lineTo(r - f, n * 0.6), e.lineTo(r - f, n), e.lineTo(f, n), e.lineTo(f, n * 0.6), e.lineTo(0, n * 0.6), e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Ce = (e, t) => {
     const r = t.width / 2, n = t.height / 2;
     e.beginPath(), e.moveTo(r, 0), e.lineTo(t.width, n), e.lineTo(r, t.height), e.lineTo(0, n), e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Te = (e, t) => {
-    const r = t.width / 2, n = t.height / 2, h = Math.min(t.width, t.height) / 2, u = 6;
+    const r = t.width / 2, n = t.height / 2, f = Math.min(t.width, t.height) / 2, g = 6;
     e.beginPath();
-    for (let b = 0; b < u; b++) {
-      const k = b * 2 * Math.PI / u - Math.PI / 2, v = r + h * Math.cos(k), R = n + h * Math.sin(k);
+    for (let b = 0; b < g; b++) {
+      const k = b * 2 * Math.PI / g - Math.PI / 2, v = r + f * Math.cos(k), R = n + f * Math.sin(k);
       b === 0 ? e.moveTo(v, R) : e.lineTo(v, R);
     }
     e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, je = (e, t) => {
-    const r = t.width / 2, n = t.height / 2, h = Math.min(t.width, t.height) / 2, u = 5;
+    const r = t.width / 2, n = t.height / 2, f = Math.min(t.width, t.height) / 2, g = 5;
     e.beginPath();
-    for (let b = 0; b < u; b++) {
-      const k = b * 2 * Math.PI / u - Math.PI / 2, v = r + h * Math.cos(k), R = n + h * Math.sin(k);
+    for (let b = 0; b < g; b++) {
+      const k = b * 2 * Math.PI / g - Math.PI / 2, v = r + f * Math.cos(k), R = n + f * Math.sin(k);
       b === 0 ? e.moveTo(v, R) : e.lineTo(v, R);
     }
     e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Ne = (e, t) => {
-    const r = t.width, n = t.height, h = 0, u = 0;
+    const r = t.width, n = t.height, f = 0, g = 0;
     e.beginPath();
     const b = n * 0.3;
-    e.moveTo(h + r / 2, u + b), e.bezierCurveTo(
-      h + r / 2,
-      u,
-      h,
-      u,
-      h,
-      u + b
+    e.moveTo(f + r / 2, g + b), e.bezierCurveTo(
+      f + r / 2,
+      g,
+      f,
+      g,
+      f,
+      g + b
     ), e.bezierCurveTo(
-      h,
-      u + (n + b) / 2,
-      h + r / 2,
-      u + (n + b) / 2,
-      h + r / 2,
-      u + n
+      f,
+      g + (n + b) / 2,
+      f + r / 2,
+      g + (n + b) / 2,
+      f + r / 2,
+      g + n
     ), e.bezierCurveTo(
-      h + r / 2,
-      u + (n + b) / 2,
-      h + r,
-      u + (n + b) / 2,
-      h + r,
-      u + b
+      f + r / 2,
+      g + (n + b) / 2,
+      f + r,
+      g + (n + b) / 2,
+      f + r,
+      g + b
     ), e.bezierCurveTo(
-      h + r,
-      u,
-      h + r / 2,
-      u,
-      h + r / 2,
-      u + b
+      f + r,
+      g,
+      f + r / 2,
+      g,
+      f + r / 2,
+      g + b
     ), e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Ie = (e, t) => {
-    const r = t.width / 2, n = t.height / 2, h = t.width / 2, u = t.height / 2;
-    e.beginPath(), e.ellipse(r, n, h, u, 0, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
+    const r = t.width / 2, n = t.height / 2, f = t.width / 2, g = t.height / 2;
+    e.beginPath(), e.ellipse(r, n, f, g, 0, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Ae = (e, t) => {
     const r = Math.min(t.width, t.height) * 0.1;
     At(e, 0, 0, t.width, t.height, r), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Re = (e, t) => {
     e.save(), t.opacity !== void 0 && (e.globalAlpha = t.opacity), e.strokeStyle = t.stroke || t.fill || "#000000", e.lineWidth = t.strokeWidth || t.height || 2, e.lineCap = "round", e.beginPath(), e.moveTo(0, t.height / 2), e.lineTo(t.width, t.height / 2), e.stroke(), e.restore();
-  }, De = (e, t) => {
-    const r = t.src || t.imageData;
-    if (r)
-      try {
-        if (r instanceof HTMLImageElement) {
-          if (r.complete && r.naturalWidth > 0 && r.naturalHeight > 0) {
-            e.drawImage(r, 0, 0, t.width, t.height);
-            return;
-          }
-        } else if (typeof r == "string" && r.length > 0) {
-          if (t._imageElement || (t._imageElement = new Image(), t._imageElement.crossOrigin = "anonymous", t._imageElement.onload = () => {
-            X();
-          }, t._imageElement.onerror = () => {
-            console.error("Failed to load image:", r), t._imageLoadError = !0, X();
-          }, t._imageElement.src = r), t._imageElement.complete && t._imageElement.naturalWidth > 0 && t._imageElement.naturalHeight > 0) {
-            e.drawImage(t._imageElement, 0, 0, t.width, t.height);
-            return;
-          }
-          if (t._imageLoadError) {
-            e.fillStyle = "#ffebee", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#f44336", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#f44336", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Error loading image", t.width / 2, t.height / 2);
-            return;
-          }
-        }
-        e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.lineWidth = 1, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading...", t.width / 2, t.height / 2);
-      } catch (n) {
-        console.error("Error drawing image:", n), e.fillStyle = "#ffebee", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#f44336", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#f44336", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Error loading image", t.width / 2, t.height / 2);
+  }, De = nt(/* @__PURE__ */ new Map()), Ee = (e, t) => {
+    const n = (() => {
+      if (typeof t.src == "string" && t.src.length > 0) return t.src;
+      const f = t.imageData;
+      return f instanceof HTMLImageElement || typeof f == "string" && f.length > 0 ? f : f && typeof f == "object" && typeof f.src == "string" && f.src.length > 0 ? f.src : null;
+    })();
+    if (n instanceof HTMLImageElement) {
+      if (n.complete && n.naturalWidth > 0 && n.naturalHeight > 0) {
+        e.drawImage(n, 0, 0, t.width, t.height);
+        return;
       }
-    else
-      e.fillStyle = "#f8f8f8", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ddd", e.lineWidth = 1, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#999", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("No Image", t.width / 2, t.height / 2);
-  }, Ee = (e, t) => {
+      e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading...", t.width / 2, t.height / 2);
+      return;
+    }
+    if (typeof n == "string" && n.length > 0) {
+      const f = De.current;
+      let g = f.get(t.id);
+      if (g || (g = { img: null, error: null, loading: !1, src: n }, f.set(t.id, g)), g.src !== n && (g.img = null, g.error = null, g.loading = !1, g.src = n), g.img && g.img.complete && g.img.naturalWidth > 0 && g.img.naturalHeight > 0) {
+        e.drawImage(g.img, 0, 0, t.width, t.height);
+        return;
+      }
+      if (!g.loading && !g.error) {
+        g.loading = !0;
+        const b = new Image();
+        n.startsWith("data:") || (b.crossOrigin = "anonymous"), b.onload = () => {
+          g.img = b, g.loading = !1, X();
+        }, b.onerror = () => {
+          g.error = !0, g.loading = !1, console.error("Failed to load image:", n), X();
+        }, b.src = n, typeof b.decode == "function" && b.decode().catch(() => {
+        });
+      }
+      g.error ? (e.fillStyle = "#ffebee", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#f44336", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#f44336", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Error loading image", t.width / 2, t.height / 2)) : (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.lineWidth = 1, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading...", t.width / 2, t.height / 2));
+      return;
+    }
+    e.fillStyle = "#f8f8f8", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ddd", e.lineWidth = 1, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#999", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("No Image", t.width / 2, t.height / 2);
+  }, Be = (e, t) => {
     if (t.src && !t.imageLoading && !t.loadedImage) {
       t.imageLoading = !0;
       const r = new Image();
@@ -7334,7 +7340,7 @@ const xi = _e((d, o) => {
         console.error("Failed to load sticker:", t.src), t.imageLoading = !1, e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.fillText("Failed to load", t.width / 2, t.height / 2);
       }, r.src = t.src;
     } else t.loadedImage ? e.drawImage(t.loadedImage, 0, 0, t.width, t.height) : t.imageLoading && (e.fillStyle = "#f8f9fa", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#dee2e6", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#6c757d", e.font = "12px Arial", e.textAlign = "center", e.fillText("Loading...", t.width / 2, t.height / 2));
-  }, Be = (e, t) => {
+  }, ze = (e, t) => {
     if (t.imageObject && t.imageObject.complete && t.imageObject.naturalHeight !== 0)
       try {
         e.drawImage(t.imageObject, 0, 0, t.width, t.height);
@@ -7354,9 +7360,9 @@ const xi = _e((d, o) => {
     e.fillStyle = "#f9f9f9", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ddd", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#999", e.font = "24px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("🧵", t.width / 2, t.height / 2 - 10), e.fillStyle = "#666", e.font = "12px Arial", e.fillText(r, t.width / 2, t.height / 2 + 15);
   }, Gt = (e, t, r) => {
     if (!r) return !1;
-    const n = r.x + r.width / 2, h = r.y + r.height / 2, u = e - n, b = t - h, k = -(r.rotation || 0) * Math.PI / 180, v = Math.cos(k), R = Math.sin(k), D = u * v - b * R, M = u * R + b * v, tt = r.width / 2, xt = r.height / 2;
-    return D >= -tt && D <= tt && M >= -xt && M <= xt;
-  }, ze = ot(() => {
+    const n = r.x + r.width / 2, f = r.y + r.height / 2, g = e - n, b = t - f, k = -(r.rotation || 0) * Math.PI / 180, v = Math.cos(k), R = Math.sin(k), D = g * v - b * R, L = g * R + b * v, tt = r.width / 2, xt = r.height / 2;
+    return D >= -tt && D <= tt && L >= -xt && L <= xt;
+  }, We = ot(() => {
     (C || I || w) && lt(), p(!1), T(!1), z(!1), B(null);
     const e = gt.current;
     e && (e.style.cursor = "default");
@@ -7365,32 +7371,32 @@ const xi = _e((d, o) => {
     const e = (t) => {
       if (l) return;
       const r = document.activeElement;
-      if (!(r && (r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.tagName === "SELECT" || r.isContentEditable)) && ((t.ctrlKey || t.metaKey) && (t.key === "z" && !t.shiftKey ? (t.preventDefault(), Ft()) : (t.key === "z" && t.shiftKey || t.key === "y") && (t.preventDefault(), bt())), (t.key === "Delete" || t.key === "Backspace") && g && (Wt(g.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && g && (Yt(g.id), t.preventDefault()), g && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key))) {
+      if (!(r && (r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.tagName === "SELECT" || r.isContentEditable)) && ((t.ctrlKey || t.metaKey) && (t.key === "z" && !t.shiftKey ? (t.preventDefault(), Ft()) : (t.key === "z" && t.shiftKey || t.key === "y") && (t.preventDefault(), bt())), (t.key === "Delete" || t.key === "Backspace") && x && (Wt(x.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && x && (Yt(x.id), t.preventDefault()), x && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key))) {
         t.preventDefault();
-        const h = t.shiftKey ? 10 : 1;
-        let u = {};
+        const f = t.shiftKey ? 10 : 1;
+        let g = {};
         switch (t.key) {
           case "ArrowUp":
-            u.y = g.y - h;
+            g.y = x.y - f;
             break;
           case "ArrowDown":
-            u.y = g.y + h;
+            g.y = x.y + f;
             break;
           case "ArrowLeft":
-            u.x = g.x - h;
+            g.x = x.x - f;
             break;
           case "ArrowRight":
-            u.x = g.x + h;
+            g.x = x.x + f;
             break;
         }
-        _t(g.id, u), lt();
+        _t(x.id, g), lt();
       }
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [g, Ft, bt, l]);
-  const We = (e, t = {}) => {
+  }, [x, Ft, bt, l]);
+  const Me = (e, t = {}) => {
     const r = {
-      id: ct(),
+      id: dt(),
       type: e,
       x: 50,
       y: 50,
@@ -7404,28 +7410,28 @@ const xi = _e((d, o) => {
     };
     switch (e) {
       case "text":
-        r.id = ct(), r.text = t.text || "New Text", r.fontSize = t.fontSize || 20, r.fontFamily = t.fontFamily || "Arial", r.fontWeight = t.fontWeight || "normal", r.fontStyle = t.fontStyle || "normal", r.textAlign = t.textAlign || "left", r.width = 150, r.height = 50;
+        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;
         break;
       case "icon":
-        r.id = ct(), r.text = t.text || "🎯", r.fontSize = t.fontSize || 48, r.fontFamily = t.fontFamily || "Arial", r.fontWeight = t.fontWeight || "normal", r.fontStyle = t.fontStyle || "normal", r.textAlign = "center", r.width = 80, r.height = 80, r.iconData = t.iconData || null, r.type = "text", r.isIcon = !0;
+        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;
         break;
       case "image":
-        r.id = ct(), r.imageData = t.imageData || null, r.width = t.width || 200, r.height = t.height || 200;
+        r.id = dt(), r.imageData = t.imageData || null, r.width = t.width || 200, r.height = t.height || 200;
         break;
       case "qrcode":
-        r.id = ct(), r.type = "qrcode", r.x = (t == null ? void 0 : t.x) || W / 2 - ((t == null ? void 0 : t.width) || 100) / 2, r.y = (t == null ? void 0 : t.y) || U / 2 - ((t == null ? void 0 : t.height) || 100) / 2, r.width = (t == null ? void 0 : t.width) || 100, r.height = (t == null ? void 0 : t.height) || 100, r.src = (t == null ? void 0 : t.src) || "", r.data = (t == null ? void 0 : t.data) || "", r.rotation = 0, r.opacity = 1;
+        r.id = dt(), r.type = "qrcode", r.x = (t == null ? void 0 : t.x) || W / 2 - ((t == null ? void 0 : t.width) || 100) / 2, r.y = (t == null ? void 0 : t.y) || U / 2 - ((t == null ? void 0 : t.height) || 100) / 2, r.width = (t == null ? void 0 : t.width) || 100, r.height = (t == null ? void 0 : t.height) || 100, r.src = (t == null ? void 0 : t.src) || "", r.data = (t == null ? void 0 : t.data) || "", r.rotation = 0, r.opacity = 1;
         break;
       case "barcode":
-        r.id = ct(), r.type = "barcode", r.x = (t == null ? void 0 : t.x) || W / 2 - ((t == null ? void 0 : t.width) || 200) / 2, r.y = (t == null ? void 0 : t.y) || U / 2 - ((t == null ? void 0 : t.height) || 100) / 2, r.width = (t == null ? void 0 : t.width) || 200, r.height = (t == null ? void 0 : t.height) || 100, r.src = (t == null ? void 0 : t.src) || "", r.data = (t == null ? void 0 : t.data) || "", r.format = (t == null ? void 0 : t.format) || "CODE128", r.rotation = 0, r.opacity = 1, r.imageObject = (t == null ? void 0 : t.imageObject) || null;
+        r.id = dt(), r.type = "barcode", r.x = (t == null ? void 0 : t.x) || W / 2 - ((t == null ? void 0 : t.width) || 200) / 2, r.y = (t == null ? void 0 : t.y) || U / 2 - ((t == null ? void 0 : t.height) || 100) / 2, r.width = (t == null ? void 0 : t.width) || 200, r.height = (t == null ? void 0 : t.height) || 100, r.src = (t == null ? void 0 : t.src) || "", r.data = (t == null ? void 0 : t.data) || "", r.format = (t == null ? void 0 : t.format) || "CODE128", r.rotation = 0, r.opacity = 1, r.imageObject = (t == null ? void 0 : t.imageObject) || null;
         break;
       case "sticker":
-        r.id = ct(), r.type = "sticker", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
+        r.id = dt(), r.type = "sticker", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
         break;
       case "horizontalLine":
-        r.id = ct(), r.type = "horizontalLine", r.x = W / 2 - 100, r.y = U / 2 - 1, r.width = 200, r.height = 2, r.fill = "#000000", r.stroke = "#000000", r.strokeWidth = 2, r.rotation = 0, r.opacity = 1;
+        r.id = dt(), r.type = "horizontalLine", r.x = W / 2 - 100, r.y = U / 2 - 1, r.width = 200, r.height = 2, r.fill = "#000000", r.stroke = "#000000", r.strokeWidth = 2, r.rotation = 0, r.opacity = 1;
         break;
       case "embroidery":
-        r.id = ct(), r.type = "embroidery", r.imageData = (t == null ? void 0 : t.imageData) || null, r.width = t.width || 200, r.height = t.height || 200;
+        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;
         break;
       case "rectangle":
       case "circle":
@@ -7443,29 +7449,29 @@ const xi = _e((d, o) => {
         console.warn(`Unknown element type: ${e}`);
         return;
     }
-    y((n) => [...n, r]), F(r), lt();
+    u((n) => [...n, r]), F(r), lt();
   }, _t = (e, t) => {
-    y((r) => r.map(
+    u((r) => r.map(
       (n) => n.id === e ? { ...n, ...t } : n
-    )), g && g.id === e && F((r) => ({ ...r, ...t }));
+    )), x && x.id === e && F((r) => ({ ...r, ...t }));
   }, Wt = ot(() => {
-    g && (y((e) => e.filter((t) => t.id !== g.id)), F(null), lt());
-  }, [g, lt]), Yt = (e) => {
+    x && (u((e) => e.filter((t) => t.id !== x.id)), F(null), lt());
+  }, [x, lt]), Yt = (e) => {
     const t = c.find((r) => r.id === e);
     if (t) {
       const r = {
         ...t,
-        id: ct(),
+        id: dt(),
         x: t.x + 20,
         y: t.y + 20
       };
-      y((n) => [...n, r]), F(r), lt();
+      u((n) => [...n, r]), F(r), lt();
     }
   }, qt = (e, t) => {
-    const r = c.findIndex((u) => u.id === e);
+    const r = c.findIndex((g) => g.id === e);
     if (r === -1) return;
-    const n = [...c], h = n[r];
-    t === "up" && r < n.length - 1 ? (n[r] = n[r + 1], n[r + 1] = h) : t === "down" && r > 0 ? (n[r] = n[r - 1], n[r - 1] = h) : t === "top" ? (n.splice(r, 1), n.push(h)) : t === "bottom" && (n.splice(r, 1), n.unshift(h)), y(n), lt();
+    const n = [...c], f = n[r];
+    t === "up" && r < n.length - 1 ? (n[r] = n[r + 1], n[r + 1] = f) : t === "down" && r > 0 ? (n[r] = n[r - 1], n[r - 1] = f) : t === "top" ? (n.splice(r, 1), n.push(f)) : t === "bottom" && (n.splice(r, 1), n.unshift(f)), u(n), lt();
   };
   ot(() => {
     j && Z((e) => ({
@@ -7476,11 +7482,11 @@ const xi = _e((d, o) => {
       }
     }));
   }, [j, c, Y]);
-  const [, Le] = Ye((e) => e + 1, 0);
+  const [, Le] = qe((e) => e + 1, 0);
   setTimeout(() => {
     Le();
   }, 20);
-  const Me = ot(() => {
+  const Pe = ot(() => {
     j && Z((e) => ({
       ...e,
       [j.sectionName]: {
@@ -7489,9 +7495,9 @@ const xi = _e((d, o) => {
       }
     }));
   }, [j, c, Y]);
-  qe(o, () => ({
+  Ve(o, () => ({
     handleSectionChange: Vt,
-    flushCurrentSectionDesign: Me,
+    flushCurrentSectionDesign: Pe,
     // Export methods that return download-ready data
     exportPrintReady: async (e = "png") => await zt(e, !1),
     exportFullDesign: async (e = "png") => await zt(e, !0),
@@ -7507,18 +7513,18 @@ const xi = _e((d, o) => {
           selectedColor: t.selectedColor,
           canvasWidth: t.canvasWidth,
           canvasHeight: t.canvasHeight
-        }, h = {
+        }, f = {
           ...t.sectionDesigns || {},
           [r]: n
-        }, u = s.sections && s.sections.length > 0 ? s.sections : [{
+        }, g = s.sections && s.sections.length > 0 ? s.sections : [{
           id: r,
           sectionName: r,
           image: j == null ? void 0 : j.sectionImage,
           sectionImage: j == null ? void 0 : j.sectionImage
         }];
         return await Et.current.exportAllSectionsAsJSON(
-          h,
-          u,
+          f,
+          g,
           W,
           U,
           e,
@@ -7537,140 +7543,140 @@ const xi = _e((d, o) => {
       }
     }
   }));
-  const mt = dt(null), Lt = dt(!1), X = ot(() => {
+  const ut = nt(null), Mt = nt(!1), X = ot(() => {
     const e = gt.current;
-    if (!e || Lt.current) return;
-    Lt.current = !0;
+    if (!e || Mt.current) return;
+    Mt.current = !0;
     const t = e.getContext("2d");
     t.clearRect(0, 0, W, U), wt.current && t.drawImage(wt.current, 0, 0, W, U), J && ye(t), c.forEach((r) => {
-      t.save(), t.globalAlpha = r.opacity || 1, me(t, r), t.restore();
-    }), g && he(t, g), Lt.current = !1;
-  }, [c, g, W, U, J]), vt = ot(() => {
-    mt.current && cancelAnimationFrame(mt.current), mt.current = requestAnimationFrame(() => {
-      X(), mt.current = null;
+      t.save(), t.globalAlpha = r.opacity || 1, ue(t, r), t.restore();
+    }), x && he(t, x), Mt.current = !1;
+  }, [c, x, W, U, J]), vt = ot(() => {
+    ut.current && cancelAnimationFrame(ut.current), ut.current = requestAnimationFrame(() => {
+      X(), ut.current = null;
     });
   }, [X]);
   et(() => {
     vt();
-  }, [c, g, W, U, J, vt]), et(() => {
+  }, [c, x, W, U, J, vt]), et(() => {
     wt.current && vt();
   }, [wt.current, vt]), et(() => () => {
-    mt.current && cancelAnimationFrame(mt.current);
+    ut.current && cancelAnimationFrame(ut.current);
   }, []);
-  const Mt = ot(() => {
-    X(), (C || I || w) && (mt.current = requestAnimationFrame(Mt));
+  const Lt = ot(() => {
+    X(), (C || I || w) && (ut.current = requestAnimationFrame(Lt));
   }, [X, C, I, w]);
   et(() => {
-    C || I || w ? Mt() : (mt.current && (cancelAnimationFrame(mt.current), mt.current = null), vt());
-  }, [C, I, w, Mt, vt]);
-  const Pe = ot((e) => {
+    C || I || w ? Lt() : (ut.current && (cancelAnimationFrame(ut.current), ut.current = null), vt());
+  }, [C, I, w, Lt, vt]);
+  const Ue = ot((e) => {
     if (l) return;
-    const r = gt.current.getBoundingClientRect(), n = (e.clientX - r.left) / q, h = (e.clientY - r.top) / q;
-    if (S({ x: n, y: h }), g) {
-      const b = Ht(n, h, g);
+    const r = gt.current.getBoundingClientRect(), n = (e.clientX - r.left) / q, f = (e.clientY - r.top) / q;
+    if (S({ x: n, y: f }), x) {
+      const b = Ht(n, f, x);
       if (b) {
         if (b === "rotate") {
           z(!0);
-          const k = g.x + g.width / 2, v = g.y + g.height / 2, R = Math.atan2(h - v, n - k) * 180 / Math.PI;
+          const k = x.x + x.width / 2, v = x.y + x.height / 2, R = Math.atan2(f - v, n - k) * 180 / Math.PI;
           S({
             x: n,
-            y: h,
+            y: f,
             initialAngle: R,
-            initialRotation: g.rotation || 0
+            initialRotation: x.rotation || 0
           });
         } else
           T(!0), B(b), S({
             x: n,
-            y: h,
-            initialWidth: g.width,
-            initialHeight: g.height,
-            initialX: g.x,
-            initialY: g.y
+            y: f,
+            initialWidth: x.width,
+            initialHeight: x.height,
+            initialX: x.x,
+            initialY: x.y
           });
         return;
       }
     }
-    let u = null;
+    let g = null;
     for (let b = c.length - 1; b >= 0; b--)
-      if (Gt(n, h, c[b])) {
-        u = c[b];
+      if (Gt(n, f, c[b])) {
+        g = c[b];
         break;
       }
-    u ? (F(u), p(!0), S({
+    g ? (F(g), p(!0), S({
       x: n,
-      y: h,
-      offsetX: n - u.x,
-      offsetY: h - u.y
+      y: f,
+      offsetX: n - g.x,
+      offsetY: f - g.y
     })) : F(null), X();
-  }, [l, q, g, c, X]), Ue = ot((e) => {
+  }, [l, q, x, c, X]), Oe = ot((e) => {
     if (l) return;
-    const t = gt.current, r = t.getBoundingClientRect(), n = (e.clientX - r.left) / q, h = (e.clientY - r.top) / q;
-    if (g && !C && !I && !w) {
-      const u = Ht(n, h, g);
-      u ? u === "rotate" ? t.style.cursor = "grab" : t.style.cursor = u : Gt(n, h, g) ? t.style.cursor = "move" : t.style.cursor = "default";
+    const t = gt.current, r = t.getBoundingClientRect(), n = (e.clientX - r.left) / q, f = (e.clientY - r.top) / q;
+    if (x && !C && !I && !w) {
+      const g = Ht(n, f, x);
+      g ? g === "rotate" ? t.style.cursor = "grab" : t.style.cursor = g : Gt(n, f, x) ? t.style.cursor = "move" : t.style.cursor = "default";
     } else
       t.style.cursor = C ? "grabbing" : "default";
-    if (w && g) {
-      const u = g.x + g.width / 2, b = g.y + g.height / 2, v = Math.atan2(h - b, n - u) * 180 / Math.PI - E.initialAngle;
+    if (w && x) {
+      const g = x.x + x.width / 2, b = x.y + x.height / 2, v = Math.atan2(f - b, n - g) * 180 / Math.PI - E.initialAngle;
       let R = E.initialRotation + v;
-      e.shiftKey && (R = Math.round(R / 15) * 15), R = (R % 360 + 360) % 360, y(
+      e.shiftKey && (R = Math.round(R / 15) * 15), R = (R % 360 + 360) % 360, u(
         (D) => D.map(
-          (M) => M.id === g.id ? { ...M, rotation: R } : M
+          (L) => L.id === x.id ? { ...L, rotation: R } : L
         )
       ), F((D) => ({ ...D, rotation: R })), X();
       return;
     }
-    if (I && g && $) {
-      const u = n - E.x, b = h - E.y;
+    if (I && x && $) {
+      const g = n - E.x, b = f - E.y;
       let k = E.initialWidth, v = E.initialHeight, R = E.initialX, D = E.initialY;
       switch ($) {
         case "se-resize":
-          k = Math.max(20, E.initialWidth + u), v = Math.max(20, E.initialHeight + b);
+          k = Math.max(20, E.initialWidth + g), v = Math.max(20, E.initialHeight + b);
           break;
         case "sw-resize":
-          k = Math.max(20, E.initialWidth - u), v = Math.max(20, E.initialHeight + b), R = E.initialX + (E.initialWidth - k);
+          k = Math.max(20, E.initialWidth - g), v = Math.max(20, E.initialHeight + b), R = E.initialX + (E.initialWidth - k);
           break;
         case "ne-resize":
-          k = Math.max(20, E.initialWidth + u), v = Math.max(20, E.initialHeight - b), D = E.initialY + (E.initialHeight - v);
+          k = Math.max(20, E.initialWidth + g), v = Math.max(20, E.initialHeight - b), D = E.initialY + (E.initialHeight - v);
           break;
         case "nw-resize":
-          k = Math.max(20, E.initialWidth - u), v = Math.max(20, E.initialHeight - b), R = E.initialX + (E.initialWidth - k), D = E.initialY + (E.initialHeight - v);
+          k = Math.max(20, E.initialWidth - g), v = Math.max(20, E.initialHeight - b), R = E.initialX + (E.initialWidth - k), D = E.initialY + (E.initialHeight - v);
           break;
       }
-      if (e.shiftKey && g.type !== "text") {
+      if (e.shiftKey && x.type !== "text") {
         const tt = E.initialWidth / E.initialHeight;
         $.includes("e"), v = k / tt, $.includes("n") && (D = E.initialY + (E.initialHeight - v));
       }
-      L && (R = ut(R), D = ut(D), k = ut(k), v = ut(v));
-      const M = {
-        ...g,
+      M && (R = mt(R), D = mt(D), k = mt(k), v = mt(v));
+      const L = {
+        ...x,
         x: R,
         y: D,
         width: k,
         height: v
       };
-      y(
+      u(
         (tt) => tt.map(
-          (xt) => xt.id === g.id ? M : xt
+          (xt) => xt.id === x.id ? L : xt
         )
-      ), F(M), X();
+      ), F(L), X();
       return;
     }
-    if (C && g) {
-      let u = n - E.offsetX, b = h - E.offsetY;
-      L && (u = ut(u), b = ut(b)), u = Math.max(0, Math.min(W - g.width, u)), b = Math.max(0, Math.min(U - g.height, b));
+    if (C && x) {
+      let g = n - E.offsetX, b = f - E.offsetY;
+      M && (g = mt(g), b = mt(b)), g = Math.max(0, Math.min(W - x.width, g)), b = Math.max(0, Math.min(U - x.height, b));
       const k = {
-        ...g,
-        x: u,
+        ...x,
+        x: g,
         y: b
       };
-      y(
+      u(
         (v) => v.map(
-          (R) => R.id === g.id ? k : R
+          (R) => R.id === x.id ? k : R
         )
       ), F(k), X();
     }
-  }, [l, q, g, C, I, w, $, E, L, W, U, c, X]), Vt = ot((e) => {
+  }, [l, q, x, C, I, w, $, E, M, W, U, c, X]), Vt = ot((e) => {
     j && Z((r) => ({
       ...r,
       [j.sectionName]: {
@@ -7687,32 +7693,32 @@ const xi = _e((d, o) => {
     if (t) {
       const r = t.elements.map((n) => {
         if (n.type === "image" && n.src && !n.imageData) {
-          const h = new Image();
-          return h.onload = () => {
-            y(
-              (u) => u.map(
-                (b) => b.id === n.id ? { ...b, imageData: h } : b
+          const f = new Image();
+          return f.onload = () => {
+            u(
+              (g) => g.map(
+                (b) => b.id === n.id ? { ...b, imageData: f } : b
               )
             ), X();
-          }, h.src = n.src, { ...n, imageData: h };
+          }, f.src = n.src, { ...n, imageData: f };
         }
         return n;
       });
-      y(r), O(t.selectedColor || Y);
+      u(r), O(t.selectedColor || Y);
     } else
-      y([]);
+      u([]);
     m(e), F(null);
-  }, [j, c, Y, _, X]), Oe = ot((e) => {
+  }, [j, c, Y, _, X]), Qe = ot((e) => {
     if (e && e.type.startsWith("image/")) {
       const t = new FileReader();
       t.onload = (r) => {
         const n = new Image();
         n.onload = () => {
-          const h = {
-            id: ct(),
+          const f = {
+            id: dt(),
             type: "image",
-            x: ut(W / 2 - 100),
-            y: ut(U / 2 - 100),
+            x: mt(W / 2 - 100),
+            y: mt(U / 2 - 100),
             width: Math.min(n.width, 200),
             // Limit initial size
             height: Math.min(n.height, 200),
@@ -7721,8 +7727,8 @@ const xi = _e((d, o) => {
             src: r.target.result,
             originalWidth: n.width,
             originalHeight: n.height
-          }, u = n.width / n.height;
-          h.width / h.height !== u && (h.width / u <= 200 ? h.height = h.width / u : h.width = h.height * u), y((b) => [...b, h]), F(h), lt();
+          }, g = n.width / n.height;
+          f.width / f.height !== g && (f.width / g <= 200 ? f.height = f.width / g : f.width = f.height * g), u((b) => [...b, f]), F(f), lt();
         }, n.onerror = () => {
           console.error("Failed to load uploaded image"), alert("Failed to load the uploaded image. Please try again.");
         }, n.src = r.target.result;
@@ -7731,8 +7737,8 @@ const xi = _e((d, o) => {
       }, t.readAsDataURL(e);
     } else
       alert("Please select a valid image file.");
-  }, [W, U, ut, ct, lt]), Xt = ot(
-    Qe(() => {
+  }, [W, U, mt, dt, lt]), Xt = ot(
+    $e(() => {
       X();
     }, 16),
     // 60fps limit
@@ -7740,14 +7746,14 @@ const xi = _e((d, o) => {
   );
   et(() => {
     Bt.current || Xt();
-  }, [c, g, J, Xt]);
-  function Qe(e, t) {
+  }, [c, x, J, Xt]);
+  function $e(e, t) {
     let r;
-    return function(...h) {
-      const u = () => {
-        clearTimeout(r), e(...h);
+    return function(...f) {
+      const g = () => {
+        clearTimeout(r), e(...f);
       };
-      clearTimeout(r), r = setTimeout(u, t);
+      clearTimeout(r), r = setTimeout(g, t);
     };
   }
   et(() => {
@@ -7755,21 +7761,21 @@ const xi = _e((d, o) => {
   }, [Y]), et(() => {
     X();
   }, [X]);
-  const $e = (e, t, r) => (0.2126 * e + 0.7152 * t + 0.0722 * r) / 255, Jt = ot((e, t) => {
+  const He = (e, t, r) => (0.2126 * e + 0.7152 * t + 0.0722 * r) / 255, Jt = ot((e, t) => {
     const r = Ut.current, n = r.getContext("2d");
     r.width = W, r.height = U, n.clearRect(0, 0, W, U), n.drawImage(e, 0, 0, W, U);
-    const h = n.getImageData(0, 0, W, U), u = h.data, b = xe(t);
+    const f = n.getImageData(0, 0, W, U), g = f.data, b = xe(t);
     if (!b) {
       Bt.current = !1;
       return;
     }
     const { r: k, g: v, b: R } = b;
-    for (let M = 0; M < u.length; M += 4) {
-      if (u[M + 3] === 0) continue;
-      const xt = $e(u[M], u[M + 1], u[M + 2]);
-      u[M] = Math.round(k * xt), u[M + 1] = Math.round(v * xt), u[M + 2] = Math.round(R * xt);
+    for (let L = 0; L < g.length; L += 4) {
+      if (g[L + 3] === 0) continue;
+      const xt = He(g[L], g[L + 1], g[L + 2]);
+      g[L] = Math.round(k * xt), g[L + 1] = Math.round(v * xt), g[L + 2] = Math.round(R * xt);
     }
-    n.putImageData(h, 0, 0);
+    n.putImageData(f, 0, 0);
     const D = new Image();
     D.onload = () => {
       wt.current = s.plainColor === "Y" ? D : e, Bt.current = !1, X();
@@ -7779,9 +7785,9 @@ const xi = _e((d, o) => {
     const t = document.querySelector(".ruler-horizontal"), r = document.querySelector(".ruler-vertical");
     if (!t || !r)
       return { horizontal: [], vertical: [] };
-    const n = t.getBoundingClientRect(), h = r.getBoundingClientRect(), u = n.width, b = h.height, k = 50, v = [], R = [];
-    for (let D = k; D <= u; D += k)
-      D <= u - 20 && v.push({
+    const n = t.getBoundingClientRect(), f = r.getBoundingClientRect(), g = n.width, b = f.height, k = 50, v = [], R = [];
+    for (let D = k; D <= g; D += k)
+      D <= g - 20 && v.push({
         position: D,
         value: Math.round(D / e)
       });
@@ -7817,23 +7823,23 @@ const xi = _e((d, o) => {
     }
   }, [K, A, q]), /* @__PURE__ */ i.jsxs("div", { className: "pure-canvas-designer", children: [
     /* @__PURE__ */ i.jsx("div", { className: "designer-header", children: /* @__PURE__ */ i.jsx(
-      ci,
+      di,
       {
-        onAddElement: We,
-        onDeleteElement: () => g && Wt(g.id),
-        onDuplicateElement: () => g && Yt(g.id),
+        onAddElement: Me,
+        onDeleteElement: () => x && Wt(x.id),
+        onDuplicateElement: () => x && Yt(x.id),
         onUndo: Ft,
         onRedo: bt,
         onToggleGrid: () => st(!J),
         onToggleRulers: () => it(!K),
-        onToggleSnap: () => G(!L),
-        onImageUpload: Oe,
+        onToggleSnap: () => G(!M),
+        onImageUpload: Qe,
         canUndo: H > 0,
         canRedo: H < V.length - 1,
         showGrid: J,
         showRulers: K,
-        snapToGrid: L,
-        selectedElement: g,
+        snapToGrid: M,
+        selectedElement: x,
         theme: a,
         readOnly: l,
         apiKey: d.apiKey,
@@ -7867,9 +7873,9 @@ const xi = _e((d, o) => {
           ref: gt,
           width: W,
           height: U,
-          onMouseDown: Pe,
-          onMouseMove: Ue,
-          onMouseUp: ze,
+          onMouseDown: Ue,
+          onMouseMove: Oe,
+          onMouseUp: We,
           style: {
             border: "1px solid #e2e8f0",
             cursor: C ? "grabbing" : "default",
@@ -7880,9 +7886,9 @@ const xi = _e((d, o) => {
       ) }),
       /* @__PURE__ */ i.jsxs("div", { className: "side-panels", children: [
         /* @__PURE__ */ i.jsx(
-          di,
+          fi,
           {
-            selectedElement: g,
+            selectedElement: x,
             onUpdate: _t,
             onMoveLayer: qt,
             availableFonts: fe,
@@ -7890,10 +7896,10 @@ const xi = _e((d, o) => {
           }
         ),
         /* @__PURE__ */ i.jsx(
-          fi,
+          hi,
           {
             elements: c,
-            selectedElement: g,
+            selectedElement: x,
             onSelectElement: F,
             onMoveLayer: qt,
             onDeleteElement: Wt,
@@ -7916,7 +7922,7 @@ const xi = _e((d, o) => {
               className: `section-thumbnail compact ${j.sectionName === e.sectionName ? "active" : ""}`,
               onClick: (r) => {
                 r.stopPropagation();
-                const n = s.sections.find((h) => h.sectionName === e.sectionName);
+                const n = s.sections.find((f) => f.sectionName === e.sectionName);
                 Vt(n);
               },
               title: e.sectionName,
@@ -8077,7 +8083,7 @@ const xi = _e((d, o) => {
     ] })
   ] });
 });
-xi.displayName = "Mypixia";
+yi.displayName = "Mypixia";
 export {
-  xi as default
+  yi as default
 };