@mypixia/simplex-designer 2.0.4 → 2.0.6

package/dist/index.es.js

@@ -2,7 +2,7 @@ import Qe, { useState as N, useRef as gt, useEffect as ot, useMemo as ie, forwar
 import _e from "qrcode";
 import Ye from "react-barcode";
 import oe from "axios";
-import './index_external.css';var Dt = { exports: {} }, Ct = {};
+import './index_external.css';var Et = { exports: {} }, Tt = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -14,7 +14,7 @@ import './index_external.css';var Dt = { exports: {} }, Ct = {};
  */
 var re;
 function qe() {
-  if (re) return Ct;
+  if (re) return Tt;
   re = 1;
   var f = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
   function a(l, s, h) {
@@ -32,9 +32,9 @@ function qe() {
       props: h
     };
   }
-  return Ct.Fragment = o, Ct.jsx = a, Ct.jsxs = a, Ct;
+  return Tt.Fragment = o, Tt.jsx = a, Tt.jsxs = a, Tt;
 }
-var Tt = {};
+var jt = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -50,7 +50,7 @@ function Ve() {
     function f(u) {
       if (u == null) return null;
       if (typeof u == "function")
-        return u.$$typeof === q ? null : u.displayName || u.name || null;
+        return u.$$typeof === _ ? null : u.displayName || u.name || null;
       if (typeof u == "string") return u;
       switch (u) {
         case b:
@@ -74,7 +74,7 @@ function Ve() {
             return "Portal";
           case O:
             return (u.displayName || "Context") + ".Provider";
-          case C:
+          case T:
             return (u._context.displayName || "Context") + ".Consumer";
           case v:
             var D = u.render;
@@ -149,11 +149,11 @@ function Ve() {
     }
     function d() {
       var u = f(this.type);
-      return _[u] || (_[u] = !0, console.error(
+      return Y[u] || (Y[u] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), u = this.props.ref, u !== void 0 ? u : null;
     }
-    function j(u, D, L, H, G, et, X, Y) {
+    function j(u, D, L, H, G, et, X, q) {
       return L = et.ref, u = {
         $$typeof: E,
         type: u,
@@ -182,10 +182,10 @@ function Ve() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: Y
+        value: q
       }), Object.freeze && (Object.freeze(u.props), Object.freeze(u)), u;
     }
-    function S(u, D, L, H, G, et, X, Y) {
+    function S(u, D, L, H, G, et, X, q) {
       var U = D.children;
       if (U !== void 0)
         if (H)
@@ -218,8 +218,8 @@ React keys must be passed directly to JSX without using spread:
       }
       if (U = null, L !== void 0 && (a(L), U = "" + L), x(D) && (a(D.key), U = "" + D.key), "key" in D) {
         L = {};
-        for (var vt in D)
-          vt !== "key" && (L[vt] = D[vt]);
+        for (var kt in D)
+          kt !== "key" && (L[kt] = D[kt]);
       } else L = D;
       return U && n(
         L,
@@ -232,13 +232,13 @@ React keys must be passed directly to JSX without using spread:
         s(),
         L,
         X,
-        Y
+        q
       );
     }
     function I(u) {
       typeof u == "object" && u !== null && u.$$typeof === E && u._store && (u._store.validated = 1);
     }
-    var y = Qe, E = Symbol.for("react.transitional.element"), B = Symbol.for("react.portal"), b = Symbol.for("react.fragment"), F = Symbol.for("react.strict_mode"), J = Symbol.for("react.profiler"), C = Symbol.for("react.consumer"), O = Symbol.for("react.context"), v = Symbol.for("react.forward_ref"), st = Symbol.for("react.suspense"), W = Symbol.for("react.suspense_list"), xt = Symbol.for("react.memo"), Q = Symbol.for("react.lazy"), ft = Symbol.for("react.activity"), q = Symbol.for("react.client.reference"), at = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, nt = Array.isArray, Z = console.createTask ? console.createTask : function() {
+    var y = Qe, E = Symbol.for("react.transitional.element"), B = Symbol.for("react.portal"), b = Symbol.for("react.fragment"), F = Symbol.for("react.strict_mode"), J = Symbol.for("react.profiler"), T = Symbol.for("react.consumer"), O = Symbol.for("react.context"), v = Symbol.for("react.forward_ref"), st = Symbol.for("react.suspense"), W = Symbol.for("react.suspense_list"), xt = Symbol.for("react.memo"), Q = Symbol.for("react.lazy"), ft = Symbol.for("react.activity"), _ = Symbol.for("react.client.reference"), at = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, nt = Array.isArray, Z = console.createTask ? console.createTask : function() {
       return null;
     };
     y = {
@@ -246,11 +246,11 @@ React keys must be passed directly to JSX without using spread:
         return u();
       }
     };
-    var ct, _ = {}, P = y["react-stack-bottom-frame"].bind(
+    var ct, Y = {}, P = y["react-stack-bottom-frame"].bind(
       y,
       h
-    )(), T = Z(l(h)), tt = {};
-    Tt.Fragment = b, Tt.jsx = function(u, D, L, H, G) {
+    )(), C = Z(l(h)), tt = {};
+    jt.Fragment = b, jt.jsx = function(u, D, L, H, G) {
       var et = 1e4 > at.recentlyCreatedOwnerStacks++;
       return S(
         u,
@@ -260,9 +260,9 @@ React keys must be passed directly to JSX without using spread:
         H,
         G,
         et ? Error("react-stack-top-frame") : P,
-        et ? Z(l(u)) : T
+        et ? Z(l(u)) : C
       );
-    }, Tt.jsxs = function(u, D, L, H, G) {
+    }, jt.jsxs = function(u, D, L, H, G) {
       var et = 1e4 > at.recentlyCreatedOwnerStacks++;
       return S(
         u,
@@ -272,14 +272,14 @@ React keys must be passed directly to JSX without using spread:
         H,
         G,
         et ? Error("react-stack-top-frame") : P,
-        et ? Z(l(u)) : T
+        et ? Z(l(u)) : C
       );
     };
-  }()), Tt;
+  }()), jt;
 }
 var se;
 function Xe() {
-  return se || (se = 1, process.env.NODE_ENV === "production" ? Dt.exports = qe() : Dt.exports = Ve()), Dt.exports;
+  return se || (se = 1, process.env.NODE_ENV === "production" ? Et.exports = qe() : Et.exports = Ve()), Et.exports;
 }
 var i = Xe();
 const Ut = {
@@ -586,7 +586,7 @@ const Ut = {
     ] })
   ] }) }) : null;
 }, ti = ({ isOpen: f, onClose: o, onAddBarcode: a, theme: l }) => {
-  const [s, h] = N(""), [x, n] = N("CODE128"), [d, j] = N(null), [S, I] = N(2), [y, E] = N(100), [B, b] = N(20), [F, J] = N("center"), [C, O] = N("bottom"), [v, st] = N(10), W = gt(null), xt = [
+  const [s, h] = N(""), [x, n] = N("CODE128"), [d, j] = N(null), [S, I] = N(2), [y, E] = N(100), [B, b] = N(20), [F, J] = N("center"), [T, O] = N("bottom"), [v, st] = N(10), W = gt(null), xt = [
     { value: "CODE128", label: "CODE128 (Most Common)" },
     { value: "EAN13", label: "EAN-13 (European Article Number)" },
     { value: "EAN8", label: "EAN-8 (Short EAN)" },
@@ -608,7 +608,7 @@ const Ut = {
             height: y,
             fontSize: B,
             textAlign: F,
-            textPosition: C,
+            textPosition: T,
             margin: v,
             background: "#ffffff",
             lineColor: "#000000"
@@ -621,18 +621,18 @@ const Ut = {
     var M, nt, Z, ct;
     if (!(!d || !W.current))
       try {
-        const _ = W.current.querySelector("svg");
-        if (!_) {
+        const Y = W.current.querySelector("svg");
+        if (!Y) {
           console.error("No SVG element found in barcode");
           return;
         }
-        const P = document.createElement("canvas"), T = P.getContext("2d"), tt = _.getBoundingClientRect(), u = ((nt = (M = _.width) == null ? void 0 : M.baseVal) == null ? void 0 : nt.value) || tt.width || 200, D = ((ct = (Z = _.height) == null ? void 0 : Z.baseVal) == null ? void 0 : ct.value) || tt.height || 100;
+        const P = document.createElement("canvas"), C = P.getContext("2d"), tt = Y.getBoundingClientRect(), u = ((nt = (M = Y.width) == null ? void 0 : M.baseVal) == null ? void 0 : nt.value) || tt.width || 200, D = ((ct = (Z = Y.height) == null ? void 0 : Z.baseVal) == null ? void 0 : ct.value) || tt.height || 100;
         P.width = u, P.height = D;
-        const L = new XMLSerializer().serializeToString(_), H = new Blob([L], { type: "image/svg+xml;charset=utf-8" }), G = URL.createObjectURL(H), et = new Image();
+        const L = new XMLSerializer().serializeToString(Y), H = new Blob([L], { type: "image/svg+xml;charset=utf-8" }), G = URL.createObjectURL(H), et = new Image();
         et.onload = () => {
-          T.drawImage(et, 0, 0);
-          const X = P.toDataURL("image/png"), Y = new Image();
-          Y.onload = () => {
+          C.drawImage(et, 0, 0);
+          const X = P.toDataURL("image/png"), q = new Image();
+          q.onload = () => {
             a({
               type: "barcode",
               src: X,
@@ -642,14 +642,14 @@ const Ut = {
               height: D,
               x: 100,
               y: 100,
-              imageObject: Y
-            }), q();
-          }, Y.src = X, URL.revokeObjectURL(G);
+              imageObject: q
+            }), _();
+          }, q.src = X, URL.revokeObjectURL(G);
         }, et.src = G;
-      } catch (_) {
-        console.error("Error adding barcode to canvas:", _), alert("Failed to add barcode to canvas. Please try again.");
+      } catch (Y) {
+        console.error("Error adding barcode to canvas:", Y), alert("Failed to add barcode to canvas. Please try again.");
       }
-  }, q = () => {
+  }, _ = () => {
     h(""), j(null), n("CODE128"), I(2), E(100), b(20), o();
   }, at = (M) => ({
     CODE128: "Supports all ASCII characters. Most versatile format.",
@@ -662,14 +662,14 @@ const Ut = {
     pharmacode: "Numbers 3-131070. Used in pharmaceutical industry.",
     codabar: "Supports 0-9, A-D, and symbols. Used in libraries."
   })[M] || "";
-  return f ? /* @__PURE__ */ i.jsx("div", { className: "barcode-modal-overlay", onClick: q, children: /* @__PURE__ */ i.jsxs("div", { className: "barcode-modal-content", onClick: (M) => M.stopPropagation(), children: [
+  return f ? /* @__PURE__ */ i.jsx("div", { className: "barcode-modal-overlay", onClick: _, children: /* @__PURE__ */ i.jsxs("div", { className: "barcode-modal-content", onClick: (M) => M.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "barcode-modal-header", children: [
       /* @__PURE__ */ i.jsx("h3", { children: "Generate Barcode" }),
       /* @__PURE__ */ i.jsx(
         "button",
         {
           className: "barcode-modal-close",
-          onClick: q,
+          onClick: _,
           "aria-label": "Close",
           children: "×"
         }
@@ -764,7 +764,7 @@ const Ut = {
             "select",
             {
               id: "text-position",
-              value: C,
+              value: T,
               onChange: (M) => O(M.target.value),
               children: [
                 /* @__PURE__ */ i.jsx("option", { value: "bottom", children: "Bottom" }),
@@ -867,14 +867,14 @@ const Ut = {
 ] }), ii = ({ isOpen: f, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: h }) => {
   const [x, n] = N([]), [d, j] = N(!1), [S, I] = N(null), [y, E] = N(""), [B, b] = N(""), [F, J] = N({});
   gt(null);
-  const [C, O] = N(!1), [v, st] = N(!1), [W, xt] = N(!1), Q = `${h}/api/v1/designer`;
+  const [T, O] = N(!1), [v, st] = N(!1), [W, xt] = N(!1), Q = `${h}/api/v1/designer`;
   ot(() => {
     f && s && ft();
   }, [f, s]);
   const ft = async () => {
     const P = sessionStorage.getItem("apc_x_sub_status");
-    P === "active" ? (O(!0), st(!0), at()) : P === "inactive" ? (O(!1), st(!0)) : (xt(!0), await q());
-  }, q = async () => {
+    P === "active" ? (O(!0), st(!0), at()) : P === "inactive" ? (O(!1), st(!0)) : (xt(!0), await _());
+  }, _ = async () => {
     if (!s) {
       O(!1), st(!0), xt(!1);
       return;
@@ -882,8 +882,8 @@ const Ut = {
     const P = `${Q}/get-subscription-status/${s}`;
     try {
       (await oe.get(P)).data.object === "active" ? (sessionStorage.setItem("apc_x_sub_status", "active"), O(!0), at()) : (sessionStorage.setItem("apc_x_sub_status", "inactive"), O(!1));
-    } catch (T) {
-      console.error("Subscription check failed:", T), sessionStorage.setItem("apc_x_sub_status", "inactive"), O(!1);
+    } catch (C) {
+      console.error("Subscription check failed:", C), sessionStorage.setItem("apc_x_sub_status", "inactive"), O(!1);
     } finally {
       xt(!1), st(!0);
     }
@@ -891,51 +891,51 @@ const Ut = {
     const P = sessionStorage.getItem("apc_stickers");
     if (P)
       try {
-        const T = JSON.parse(P);
-        n(T);
+        const C = JSON.parse(P);
+        n(C);
         return;
       } catch {
         console.warn("Failed to parse cached stickers, fetching fresh data");
       }
     j(!0), I(null);
     try {
-      const T = await oe.get(`${Q}/get-stickers`);
-      if (T.data && T.data.object && T.data.object.contents) {
-        const tt = T.data.object.contents;
+      const C = await oe.get(`${Q}/get-stickers`);
+      if (C.data && C.data.object && C.data.object.contents) {
+        const tt = C.data.object.contents;
         n(tt), sessionStorage.setItem("apc_stickers", JSON.stringify(tt));
       } else
         throw new Error("Invalid response format");
-    } catch (T) {
-      console.error("Error fetching stickers:", T), I("Failed to load stickers. Please try again.");
+    } catch (C) {
+      console.error("Error fetching stickers:", C), I("Failed to load stickers. Please try again.");
     } finally {
       j(!1);
     }
-  }, M = (P, T) => {
+  }, M = (P, C) => {
     a({
       type: "sticker",
       src: P,
-      name: T,
+      name: C,
       width: 100,
       height: 100,
       x: 100,
       y: 100
     }), o();
   }, nt = (P) => {
-    J((T) => ({
-      ...T,
-      [P]: !T[P]
+    J((C) => ({
+      ...C,
+      [P]: !C[P]
     }));
   }, Z = (P) => {
-    const T = {};
+    const C = {};
     return P.forEach((tt) => {
       const u = tt.name.split("/");
-      let D = T;
+      let D = C;
       u.forEach((L, H) => {
         D[L] || (D[L] = H === u.length - 1 ? tt : {}), D = D[L];
       });
-    }), T;
-  }, ct = (P, T = "", tt = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${tt * 15}px` }, children: Object.keys(P).map((u) => {
-    const D = `${T}/${u}`, L = F[D];
+    }), C;
+  }, ct = (P, C = "", tt = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${tt * 15}px` }, children: Object.keys(P).map((u) => {
+    const D = `${C}/${u}`, L = F[D];
     return P[u].type === "image" ? !B || u.toLowerCase().includes(B.toLowerCase()) ? /* @__PURE__ */ i.jsx(
       "div",
       {
@@ -968,7 +968,7 @@ const Ut = {
       ),
       L && ct(P[u], D, tt + 1)
     ] }, D);
-  }) }), _ = x.filter(
+  }) }), Y = x.filter(
     (P) => !B || P.name.toLowerCase().includes(B.toLowerCase())
   );
   return f ? /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-content", onClick: (P) => P.stopPropagation(), children: [
@@ -986,8 +986,8 @@ const Ut = {
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-body", children: [
       W && /* @__PURE__ */ i.jsx(le, {}),
-      !C && !W && v && /* @__PURE__ */ i.jsx(ei, { theme: l }),
-      C && v && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      !T && !W && v && /* @__PURE__ */ i.jsx(ei, { theme: l }),
+      T && v && /* @__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",
           {
@@ -1003,7 +1003,7 @@ const Ut = {
           /* @__PURE__ */ i.jsx("p", { children: S }),
           /* @__PURE__ */ i.jsx("button", { onClick: at, children: "Retry" })
         ] }),
-        !d && !S && x.length > 0 && /* @__PURE__ */ i.jsx("div", { className: "sticker-grid", children: ct(Z(_)) })
+        !d && !S && x.length > 0 && /* @__PURE__ */ i.jsx("div", { className: "sticker-grid", children: ct(Z(Y)) })
       ] })
     ] })
   ] }) }) : null;
@@ -2564,7 +2564,7 @@ const Ut = {
   ot(() => {
     f && n(oi);
   }, [f]);
-  const C = (v) => {
+  const T = (v) => {
     a({
       type: "embroidery",
       src: v.url,
@@ -2633,7 +2633,7 @@ const Ut = {
             "div",
             {
               className: "embroidery-item",
-              onClick: () => C(v),
+              onClick: () => T(v),
               title: v.description,
               children: [
                 /* @__PURE__ */ i.jsx("div", { className: "embroidery-preview", children: /* @__PURE__ */ i.jsx(
@@ -2664,7 +2664,7 @@ const Ut = {
       ]
     }
   ) }) : null;
-}, jt = [
+}, Nt = [
   // MOTIVATIONAL & INSPIRATIONAL (25 items)
   {
     id: 1,
@@ -4603,15 +4603,15 @@ const Ut = {
   }
 ], ai = ({ isOpen: f, onClose: o, onAddText: a, theme: l }) => {
   const [s, h] = N(""), [x, n] = N("All"), d = ie(() => {
-    const y = jt.reduce((E, B) => (E[B.category] = (E[B.category] || 0) + 1, E), {});
+    const y = Nt.reduce((E, B) => (E[B.category] = (E[B.category] || 0) + 1, E), {});
     return [
-      { name: "All", count: jt.length },
+      { name: "All", count: Nt.length },
       ...Object.entries(y).map(([E, B]) => ({ name: E, count: B }))
     ];
-  }, [jt]), j = ie(() => jt.filter((y) => {
+  }, [Nt]), j = ie(() => Nt.filter((y) => {
     const E = !s || y.text.toLowerCase().includes(s.toLowerCase()) || y.category.toLowerCase().includes(s.toLowerCase()), B = x === "All" || y.category === x;
     return E && B;
-  }), [jt, s, x]), S = (y) => {
+  }), [Nt, s, x]), S = (y) => {
     const E = {
       ...y,
       x: 100,
@@ -4726,12 +4726,12 @@ const Ut = {
   theme: b,
   readOnly: F,
   apiKey: J,
-  apiEndpoint: C
+  apiEndpoint: T
 }) => {
-  const [O, v] = N(!1), [st, W] = N(!1), [xt, Q] = N(!1), [ft, q] = N(!1), [at, M] = N(!1), [nt, Z] = N(!1), [ct, _] = N(!1), P = (U) => {
+  const [O, v] = N(!1), [st, W] = N(!1), [xt, Q] = N(!1), [ft, _] = N(!1), [at, M] = N(!1), [nt, Z] = N(!1), [ct, Y] = N(!1), P = (U) => {
     const K = U.target.files[0];
     K && K.type.startsWith("image/") && d(K), U.target.value = "";
-  }, T = (U) => {
+  }, C = (U) => {
     f("icon", {
       iconData: U,
       text: U.symbol,
@@ -4750,13 +4750,13 @@ const Ut = {
   }, H = (U, K) => {
     f(U, K);
   }, G = () => {
-    Z(!nt), _(!1);
+    Z(!nt), Y(!1);
   }, et = () => {
-    _(!ct), Z(!1);
+    Y(!ct), Z(!1);
   }, X = (U) => {
     U === "custom" ? f("text") : U === "templates" && M(!0), Z(!1);
-  }, Y = (U) => {
-    f(U), _(!1);
+  }, q = (U) => {
+    f(U), Y(!1);
   };
   return /* @__PURE__ */ i.jsxs("div", { className: "toolbar", children: [
     /* @__PURE__ */ i.jsxs("div", { className: "toolbar-section", children: [
@@ -4831,51 +4831,51 @@ const Ut = {
             }
           ),
           /* @__PURE__ */ i.jsxs("div", { className: `dropdown-menu ${ct ? "show" : ""}`, children: [
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => Y("rectangle"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => q("rectangle"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "▭" }),
               " Rectangle"
             ] }),
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => Y("circle"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => q("circle"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "●" }),
               " Circle"
             ] }),
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => Y("triangle"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => q("triangle"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "▲" }),
               " Triangle"
             ] }),
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => Y("star"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => q("star"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "★" }),
               " Star"
             ] }),
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => Y("heart"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => q("heart"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "♥" }),
               " Heart"
             ] }),
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => Y("arrow"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => q("arrow"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "➤" }),
               " Arrow"
             ] }),
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => Y("diamond"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => q("diamond"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "◆" }),
               " Diamond"
             ] }),
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => Y("hexagon"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => q("hexagon"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "⬡" }),
               " Hexagon"
             ] }),
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => Y("pentagon"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => q("pentagon"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "⬟" }),
               " Pentagon"
             ] }),
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => Y("oval"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => q("oval"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "⬯" }),
               " Oval"
             ] }),
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => Y("roundedRectangle"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => q("roundedRectangle"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "▢" }),
               " Rounded Rectangle"
             ] }),
-            /* @__PURE__ */ i.jsxs("button", { onClick: () => Y("horizontalLine"), children: [
+            /* @__PURE__ */ i.jsxs("button", { onClick: () => q("horizontalLine"), children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "―" }),
               " Horizontal Line"
             ] })
@@ -4896,7 +4896,7 @@ const Ut = {
           )
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ i.jsx(Ke, { onSelectIcon: T, theme: b, disabled: F }),
+        /* @__PURE__ */ i.jsx(Ke, { onSelectIcon: C, theme: b, disabled: F }),
         /* @__PURE__ */ i.jsxs(
           "button",
           {
@@ -4943,7 +4943,7 @@ const Ut = {
         "button",
         {
           className: "toolbar-btn compact",
-          onClick: () => q(!0),
+          onClick: () => _(!0),
           disabled: F,
           title: "Add Embroidery Design",
           children: [
@@ -5049,18 +5049,18 @@ const Ut = {
         onAddSticker: D,
         theme: b,
         apiKey: J,
-        apiEndpoint: C
+        apiEndpoint: T
       }
     ),
     /* @__PURE__ */ i.jsx(
       ri,
       {
         isOpen: ft,
-        onClose: () => q(!1),
+        onClose: () => _(!1),
         onAddEmbroidery: L,
         theme: b,
         apiKey: J,
-        apiEndpoint: C
+        apiEndpoint: T
       }
     ),
     /* @__PURE__ */ i.jsx(
@@ -5098,7 +5098,7 @@ const Ut = {
           "textarea",
           {
             value: f.text || "",
-            onChange: (C) => n("text", C.target.value),
+            onChange: (T) => n("text", T.target.value),
             rows: 3,
             placeholder: "Enter your text here..."
           }
@@ -5110,8 +5110,8 @@ const Ut = {
           "select",
           {
             value: f.fontFamily || "Arial",
-            onChange: (C) => n("fontFamily", C.target.value),
-            children: l.map((C) => /* @__PURE__ */ i.jsx("option", { value: C, children: C }, C))
+            onChange: (T) => n("fontFamily", T.target.value),
+            children: l.map((T) => /* @__PURE__ */ i.jsx("option", { value: T, children: T }, T))
           }
         )
       ] }),
@@ -5123,7 +5123,7 @@ const Ut = {
             {
               type: "number",
               value: f.fontSize || 20,
-              onChange: (C) => n("fontSize", parseInt(C.target.value)),
+              onChange: (T) => n("fontSize", parseInt(T.target.value)),
               min: "8",
               max: "200"
             }
@@ -5137,7 +5137,7 @@ const Ut = {
               type: "number",
               step: "0.1",
               value: f.lineHeight || 1.2,
-              onChange: (C) => n("lineHeight", parseFloat(C.target.value)),
+              onChange: (T) => n("lineHeight", parseFloat(T.target.value)),
               min: "0.5",
               max: "3"
             }
@@ -5193,8 +5193,8 @@ const Ut = {
             {
               className: (b = f.textDecoration) != null && b.includes("underline") ? "active" : "",
               onClick: () => {
-                const C = f.textDecoration || "", O = C.split(" ").filter((v) => v && v !== "underline");
-                C.includes("underline") || O.push("underline"), n("textDecoration", O.join(" ").trim());
+                const T = f.textDecoration || "", O = T.split(" ").filter((v) => v && v !== "underline");
+                T.includes("underline") || O.push("underline"), n("textDecoration", O.join(" ").trim());
               },
               title: "Underline",
               children: /* @__PURE__ */ i.jsx("u", { children: "U" })
@@ -5205,8 +5205,8 @@ const Ut = {
             {
               className: (F = f.textDecoration) != null && F.includes("overline") ? "active" : "",
               onClick: () => {
-                const C = f.textDecoration || "", O = C.split(" ").filter((v) => v && v !== "overline");
-                C.includes("overline") || O.push("overline"), n("textDecoration", O.join(" ").trim());
+                const T = f.textDecoration || "", O = T.split(" ").filter((v) => v && v !== "overline");
+                T.includes("overline") || O.push("overline"), n("textDecoration", O.join(" ").trim());
               },
               title: "Overline",
               children: /* @__PURE__ */ i.jsx("span", { style: { textDecoration: "overline" }, children: "O" })
@@ -5217,8 +5217,8 @@ const Ut = {
             {
               className: (J = f.textDecoration) != null && J.includes("line-through") ? "active" : "",
               onClick: () => {
-                const C = f.textDecoration || "", O = C.split(" ").filter((v) => v && v !== "line-through");
-                C.includes("line-through") || O.push("line-through"), n("textDecoration", O.join(" ").trim());
+                const T = f.textDecoration || "", O = T.split(" ").filter((v) => v && v !== "line-through");
+                T.includes("line-through") || O.push("line-through"), n("textDecoration", O.join(" ").trim());
               },
               title: "Strikethrough",
               children: /* @__PURE__ */ i.jsx("s", { children: "S" })
@@ -5316,7 +5316,7 @@ const Ut = {
             {
               type: "color",
               value: f.fill || "#000000",
-              onChange: (C) => n("fill", C.target.value)
+              onChange: (T) => n("fill", T.target.value)
             }
           )
         ] }),
@@ -5328,7 +5328,7 @@ const Ut = {
               {
                 type: "color",
                 value: f.backgroundColor || "#ffffff",
-                onChange: (C) => n("backgroundColor", C.target.value),
+                onChange: (T) => n("backgroundColor", T.target.value),
                 disabled: !f.hasBackground
               }
             ),
@@ -5354,7 +5354,7 @@ const Ut = {
                 type: "number",
                 step: "0.1",
                 value: f.letterSpacing || 0,
-                onChange: (C) => n("letterSpacing", parseFloat(C.target.value)),
+                onChange: (T) => n("letterSpacing", parseFloat(T.target.value)),
                 min: "-5",
                 max: "10"
               }
@@ -5368,7 +5368,7 @@ const Ut = {
                 type: "number",
                 step: "0.1",
                 value: f.wordSpacing || 0,
-                onChange: (C) => n("wordSpacing", parseFloat(C.target.value)),
+                onChange: (T) => n("wordSpacing", parseFloat(T.target.value)),
                 min: "-10",
                 max: "20"
               }
@@ -5394,7 +5394,7 @@ const Ut = {
                   {
                     type: "number",
                     value: f.textShadowX || 2,
-                    onChange: (C) => n("textShadowX", parseInt(C.target.value)),
+                    onChange: (T) => n("textShadowX", parseInt(T.target.value)),
                     min: "-20",
                     max: "20"
                   }
@@ -5407,7 +5407,7 @@ const Ut = {
                   {
                     type: "number",
                     value: f.textShadowY || 2,
-                    onChange: (C) => n("textShadowY", parseInt(C.target.value)),
+                    onChange: (T) => n("textShadowY", parseInt(T.target.value)),
                     min: "-20",
                     max: "20"
                   }
@@ -5420,7 +5420,7 @@ const Ut = {
                   {
                     type: "number",
                     value: f.textShadowBlur || 4,
-                    onChange: (C) => n("textShadowBlur", parseInt(C.target.value)),
+                    onChange: (T) => n("textShadowBlur", parseInt(T.target.value)),
                     min: "0",
                     max: "20"
                   }
@@ -5433,7 +5433,7 @@ const Ut = {
                   {
                     type: "color",
                     value: f.textShadowColor || "#000000",
-                    onChange: (C) => n("textShadowColor", C.target.value)
+                    onChange: (T) => n("textShadowColor", T.target.value)
                   }
                 )
               ] })
@@ -5448,7 +5448,7 @@ const Ut = {
               {
                 type: "color",
                 value: f.stroke || "#000000",
-                onChange: (C) => n("stroke", C.target.value)
+                onChange: (T) => n("stroke", T.target.value)
               }
             )
           ] }),
@@ -5459,7 +5459,7 @@ const Ut = {
               {
                 type: "number",
                 value: f.strokeWidth || 0,
-                onChange: (C) => n("strokeWidth", parseInt(C.target.value)),
+                onChange: (T) => n("strokeWidth", parseInt(T.target.value)),
                 min: "0",
                 max: "20"
               }
@@ -5476,7 +5476,7 @@ const Ut = {
               max: "1",
               step: "0.1",
               value: f.opacity || 1,
-              onChange: (C) => n("opacity", parseFloat(C.target.value))
+              onChange: (T) => n("opacity", parseFloat(T.target.value))
             }
           ),
           /* @__PURE__ */ i.jsxs("span", { children: [
@@ -5490,7 +5490,7 @@ const Ut = {
             "select",
             {
               value: f.fontVariant || "normal",
-              onChange: (C) => n("fontVariant", C.target.value),
+              onChange: (T) => n("fontVariant", T.target.value),
               children: [
                 /* @__PURE__ */ i.jsx("option", { value: "normal", children: "Normal" }),
                 /* @__PURE__ */ i.jsx("option", { value: "small-caps", children: "Small Caps" })
@@ -5504,7 +5504,7 @@ const Ut = {
             "select",
             {
               value: f.writingMode || "horizontal-tb",
-              onChange: (C) => n("writingMode", C.target.value),
+              onChange: (T) => n("writingMode", T.target.value),
               children: [
                 /* @__PURE__ */ i.jsx("option", { value: "horizontal-tb", children: "Horizontal" }),
                 /* @__PURE__ */ i.jsx("option", { value: "vertical-rl", children: "Vertical Right-to-Left" }),
@@ -5543,7 +5543,7 @@ const Ut = {
             {
               type: "number",
               value: f.backgroundPadding || 5,
-              onChange: (C) => n("backgroundPadding", parseInt(C.target.value)),
+              onChange: (T) => n("backgroundPadding", parseInt(T.target.value)),
               min: "0",
               max: "50",
               disabled: !f.hasBackground
@@ -6380,7 +6380,7 @@ class ci {
     }
   }
   async exportCurrentSectionAsJSON(o, a = "png") {
-    var I, y, E, B, b, F, J, C, O;
+    var I, y, E, B, b, F, J, T, O;
     const l = ((I = o.activeSection) == null ? void 0 : I.sectionName) || "main", s = {
       elements: o.elements,
       selectedColor: o.selectedColor,
@@ -6447,7 +6447,7 @@ class ci {
       productInfo: {
         sections: [{
           sectionName: l,
-          sectionImage: ((C = o.activeSection) == null ? void 0 : C.sectionImage) || ((O = o.activeSection) == null ? void 0 : O.image),
+          sectionImage: ((T = o.activeSection) == null ? void 0 : T.sectionImage) || ((O = o.activeSection) == null ? void 0 : O.image),
           id: l
         }]
       }
@@ -6680,28 +6680,28 @@ const fi = $e((f, o) => {
       ]
     },
     initFile: h
-  } = f, [x, n] = N([]), [d, j] = N(null), [S, I] = N(!1), [y, E] = N(!1), [B, b] = N(!1), [F, J] = N({ x: 0, y: 0 }), [C, O] = N(null), [v, st] = N(800), [W, xt] = N(600), [Q, ft] = N(1), [q, at] = N(s.colorSettings[0]), [M, nt] = N(!1), [Z, ct] = N(!0), [_, P] = N(!0), [T, tt] = N(s.sections[0]), [u, D] = N(!1), [L, H] = N({}), [G, et] = N([]), [X, Y] = N(-1), [U] = N(new di("localStorage")), K = gt(null), vt = gt(null), mt = gt(null), pt = gt(null), Ot = gt(null), Et = gt(new ci()), Bt = gt(!1), [zt, ce] = N(null), lt = rt(() => {
+  } = f, [x, n] = N([]), [d, j] = N(null), [S, I] = N(!1), [y, E] = N(!1), [B, b] = N(!1), [F, J] = N({ x: 0, y: 0 }), [T, O] = N(null), [v, st] = N(800), [W, xt] = N(600), [Q, ft] = N(1), [_, at] = N(s.colorSettings[0]), [M, nt] = N(!1), [Z, ct] = N(!0), [Y, P] = N(!0), [C, tt] = N(s.sections[0]), [u, D] = N(!1), [L, H] = N({}), [G, et] = N([]), [X, q] = N(-1), [U] = N(new di("localStorage")), K = gt(null), kt = gt(null), mt = gt(null), pt = gt(null), Ot = gt(null), Bt = gt(new ci()), zt = gt(!1), [wt, ce] = N(null), lt = rt(() => {
     const e = {
       elements: JSON.parse(JSON.stringify(x)),
       selectedElement: d ? { ...d } : null,
       timestamp: Date.now()
     }, t = G.slice(0, X + 1);
-    t.push(e), t.length > 50 ? t.shift() : Y(X + 1), et(t);
-  }, [x, d, G, X]), kt = rt(() => ({
+    t.push(e), t.length > 50 ? t.shift() : q(X + 1), et(t);
+  }, [x, d, G, X]), St = rt(() => ({
     elements: x,
     canvasWidth: v,
     canvasHeight: W,
-    selectedColor: q,
-    activeSection: T,
+    selectedColor: _,
+    activeSection: C,
     product: s,
     sectionDesigns: L,
     zoomLevel: Q,
     showGrid: M,
-    snapToGrid: _,
+    snapToGrid: Y,
     selectedElement: d ? { ...d } : null,
     canvasRef: K
     // Include reference for thumbnail generation
-  }), [x, v, W, q, T, s, L, Q, M, _, d]);
+  }), [x, v, W, _, C, s, L, Q, M, Y, d]);
   ot(() => {
     const t = setTimeout(async () => {
       if (x.length === 0 && G.length <= 1) {
@@ -6716,8 +6716,8 @@ const fi = $e((f, o) => {
                   const dt = Object.keys($.sections)[0], it = $.sections[dt];
                   if (it && it.elements) {
                     n(it.elements || []), st(it.canvasWidth || 800), xt(it.canvasHeight || 600), at(it.selectedColor || s.colorSettings[0]), ft(it.zoomLevel || 1), nt(it.showGrid || !1), P(it.snapToGrid || !0), j(null), $.sections && H($.sections);
-                    const It = s.sections.find((Rt) => Rt.sectionName === dt);
-                    It && tt(It), et([]), Y(-1), setTimeout(() => {
+                    const Rt = s.sections.find((Dt) => Dt.sectionName === dt);
+                    Rt && tt(Rt), et([]), q(-1), setTimeout(() => {
                       lt();
                     }, 100);
                     return;
@@ -6761,21 +6761,21 @@ const fi = $e((f, o) => {
     return () => clearTimeout(t);
   }, [h, s.colorSettings, s.sections]);
   const Wt = rt((e = "png", t = !0) => {
-    const r = kt();
-    return s.sections, Et.current.exportAllSections(
-      { [(T == null ? void 0 : T.sectionName) || "main"]: r },
+    const r = St();
+    return s.sections, Bt.current.exportAllSections(
+      { [(C == null ? void 0 : C.sectionName) || "main"]: r },
       [{
-        id: (T == null ? void 0 : T.sectionName) || "main",
-        sectionName: (T == null ? void 0 : T.sectionName) || "main",
-        image: T == null ? void 0 : T.sectionImage,
-        sectionImage: T == null ? void 0 : T.sectionImage
+        id: (C == null ? void 0 : C.sectionName) || "main",
+        sectionName: (C == null ? void 0 : C.sectionName) || "main",
+        image: C == null ? void 0 : C.sectionImage,
+        sectionImage: C == null ? void 0 : C.sectionImage
       }],
       v,
       W,
       e,
       t
     );
-  }, [kt, s.sections, T, v, W]), de = [
+  }, [St, s.sections, C, v, W]), de = [
     "Arial",
     "Helvetica",
     "Times New Roman",
@@ -6791,7 +6791,7 @@ const fi = $e((f, o) => {
     "Bookman",
     "Avant Garde",
     "Century Gothic"
-  ], Nt = 20;
+  ], At = 20;
   ot(() => {
     const e = () => D(window.innerWidth < 768);
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
@@ -6801,7 +6801,7 @@ const fi = $e((f, o) => {
   }, [v, W]), ot(() => {
     G.length === 0 && lt();
   }, []);
-  const At = (e, t, r, c, g, m) => {
+  const It = (e, t, r, c, g, m) => {
     e.beginPath(), e.moveTo(t + m, r), e.lineTo(t + c - m, r), e.quadraticCurveTo(t + c, r, t + c, r + m), e.lineTo(t + c, r + g - m), e.quadraticCurveTo(t + c, r + g, t + c - m, r + g), e.lineTo(t + m, r + g), e.quadraticCurveTo(t, r + g, t, r + g - m), e.lineTo(t, r + m), e.quadraticCurveTo(t, r, t + m, r), e.closePath();
   }, Qt = (e, t) => {
     if (!t.isIcon)
@@ -6831,14 +6831,14 @@ const fi = $e((f, o) => {
       w.x + w.w,
       w.y + w.h
     );
-    R.addColorStop(0, "#3b82f6"), R.addColorStop(0.5, "#1d4ed8"), R.addColorStop(1, "#3b82f6"), e.strokeStyle = "rgba(59,130,246,.3)", e.lineWidth = 3, At(
+    R.addColorStop(0, "#3b82f6"), R.addColorStop(0.5, "#1d4ed8"), R.addColorStop(1, "#3b82f6"), e.strokeStyle = "rgba(59,130,246,.3)", e.lineWidth = 3, It(
       e,
       w.x - 1,
       w.y - 1,
       w.w + 2,
       w.h + 2,
       g + 1
-    ), e.stroke(), e.strokeStyle = R, e.lineWidth = 2, e.setLineDash([8, 4]), At(e, w.x, w.y, w.w, w.h, g), e.stroke(), e.lineDashOffset = -(Date.now() / 50) % 12, e.strokeStyle = "#ffffff", e.lineWidth = 1, e.setLineDash([4, 8]), At(e, w.x, w.y, w.w, w.h, g), e.stroke(), e.setLineDash([]), e.lineDashOffset = 0, [
+    ), e.stroke(), e.strokeStyle = R, e.lineWidth = 2, e.setLineDash([8, 4]), It(e, w.x, w.y, w.w, w.h, g), e.stroke(), e.lineDashOffset = -(Date.now() / 50) % 12, e.strokeStyle = "#ffffff", e.lineWidth = 1, e.setLineDash([4, 8]), It(e, w.x, w.y, w.w, w.h, g), e.stroke(), e.setLineDash([]), e.lineDashOffset = 0, [
       { x: w.x, y: w.y },
       { x: w.x + w.w, y: w.y },
       { x: w.x + w.w, y: w.y + w.h },
@@ -6894,31 +6894,33 @@ const fi = $e((f, o) => {
         return p.type;
     }
     return null;
-  }, St = rt(() => {
+  }, Ft = rt(() => {
     if (X > 0) {
       const e = G[X - 1];
-      n(e.elements), j(e.selectedElement), Y(X - 1);
+      n(e.elements), j(e.selectedElement), q(X - 1);
     }
-  }, [G, X]), wt = rt(() => {
+  }, [G, X]), bt = rt(() => {
     if (X < G.length - 1) {
       const e = G[X + 1];
-      n(e.elements), j(e.selectedElement), Y(X + 1);
+      n(e.elements), j(e.selectedElement), q(X + 1);
     }
-  }, [G, X]), ut = (e) => _ ? Math.round(e / Nt) * Nt : e;
+  }, [G, X]), ut = (e) => Y ? Math.round(e / At) * At : e;
   ot(() => {
-    if (T != null && T.sectionImage) {
+    if (C != null && C.sectionImage) {
       mt.current = null, pt.current = null;
       const e = K.current;
-      e && (e.getContext("2d").clearRect(0, 0, v, W), console.log("cleared canvas"));
+      e && e.getContext("2d").clearRect(0, 0, v, W);
       const t = new Image();
       t.crossOrigin = "anonymous", t.onload = () => {
-        mt.current = t, Xt(t, q);
+        mt.current = t, Xt(t, _);
       }, t.onerror = () => {
-        console.error("Failed to load background image:", T.sectionImage), V();
-      }, t.src = zt ? zt.sectionImage : T.sectionImage;
+        console.error("Failed to load background image:", C.sectionImage), V();
+      };
+      let r = C.sectionImage;
+      wt && wt.sectionImage && (C.sectionName === "Front" || wt.sections && Object.keys(wt.sections).includes(C.sectionName)) && (r = wt.sectionImage), t.src = r;
     } else
       mt.current = null, pt.current = null, V();
-  }, [T, zt]), ot(() => {
+  }, [C, _, wt]), ot(() => {
     const e = (t) => {
       const r = document.activeElement;
       if (!(r && (r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.tagName === "SELECT" || r.isContentEditable))) {
@@ -6930,10 +6932,10 @@ const fi = $e((f, o) => {
         if (t.ctrlKey || t.metaKey)
           switch (t.key) {
             case "z":
-              t.shiftKey ? (t.preventDefault(), wt()) : (t.preventDefault(), St());
+              t.shiftKey ? (t.preventDefault(), bt()) : (t.preventDefault(), Ft());
               break;
             case "y":
-              t.preventDefault(), wt();
+              t.preventDefault(), bt();
               break;
           }
       }
@@ -6941,7 +6943,7 @@ const fi = $e((f, o) => {
     return document.addEventListener("keydown", e), () => {
       document.removeEventListener("keydown", e);
     };
-  }, [d, l, St, wt, lt]);
+  }, [d, l, Ft, bt, lt]);
   const ge = (e) => {
     const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
     return t ? {
@@ -6951,9 +6953,9 @@ const fi = $e((f, o) => {
     } : null;
   }, ht = () => `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, xe = (e) => {
     e.strokeStyle = "#e0e0e0", e.lineWidth = 1, e.setLineDash([1, 1]);
-    for (let t = 0; t <= v; t += Nt)
+    for (let t = 0; t <= v; t += At)
       e.beginPath(), e.moveTo(t, 0), e.lineTo(t, W), e.stroke();
-    for (let t = 0; t <= W; t += Nt)
+    for (let t = 0; t <= W; t += At)
       e.beginPath(), e.moveTo(0, t), e.lineTo(v, t), e.stroke();
     e.setLineDash([]);
   }, ye = (e, t) => {
@@ -7100,11 +7102,11 @@ const fi = $e((f, o) => {
         const it = R + z / 2;
         e.beginPath(), e.moveTo(0, it), e.lineTo(A, it), e.stroke();
       }
-      typeof t.textDecoration == "string" && t.textDecoration.includes(" ") && t.textDecoration.split(" ").forEach((It) => {
-        switch (It.trim()) {
+      typeof t.textDecoration == "string" && t.textDecoration.includes(" ") && t.textDecoration.split(" ").forEach((Rt) => {
+        switch (Rt.trim()) {
           case "underline":
-            const Rt = R + z + 2;
-            e.beginPath(), e.moveTo(0, Rt), e.lineTo(A, Rt), e.stroke();
+            const Dt = R + z + 2;
+            e.beginPath(), e.moveTo(0, Dt), e.lineTo(A, Dt), e.stroke();
             break;
           case "overline":
             const te = R - 2;
@@ -7193,7 +7195,7 @@ const fi = $e((f, o) => {
     e.beginPath(), e.ellipse(r, c, g, m, 0, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Ae = (e, t) => {
     const r = Math.min(t.width, t.height) * 0.1;
-    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());
+    It(e, 0, 0, t.width, t.height, r), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Ie = (e, t) => {
     e.save(), t.opacity !== void 0 && (e.globalAlpha = t.opacity), e.strokeStyle = t.stroke || t.fill || "#000000", e.lineWidth = t.strokeWidth || t.height || 2, e.lineCap = "round", e.beginPath(), e.moveTo(0, t.height / 2), e.lineTo(t.width, t.height / 2), e.stroke(), e.restore();
   }, Re = (e, t) => {
@@ -7240,7 +7242,7 @@ const fi = $e((f, o) => {
       try {
         e.drawImage(t.imageObject, 0, 0, t.width, t.height);
       } catch (r) {
-        console.error("Error drawing embroidery image:", r), Ft(e, t, "Error loading image");
+        console.error("Error drawing embroidery image:", r), Ct(e, t, "Error loading image");
       }
     else if (t.src && !t.imageLoading) {
       t.imageLoading = !0;
@@ -7248,10 +7250,10 @@ const fi = $e((f, o) => {
       r.crossOrigin = "anonymous", r.onload = () => {
         r.complete && r.naturalHeight !== 0 ? (t.imageObject = r, t.imageLoading = !1, V()) : (t.imageLoading = !1, console.error("Image loaded but is invalid:", t.src));
       }, r.onerror = () => {
-        t.imageLoading = !1, console.error("Failed to load embroidery image:", t.src), Ft(e, t, "Failed to load");
-      }, r.src = t.src, Ft(e, t, "Loading...");
-    } else t.imageLoading ? Ft(e, t, "Loading...") : Ft(e, t);
-  }, Ft = (e, t, r = "Embroidery") => {
+        t.imageLoading = !1, console.error("Failed to load embroidery image:", t.src), Ct(e, t, "Failed to load");
+      }, r.src = t.src, Ct(e, t, "Loading...");
+    } else t.imageLoading ? Ct(e, t, "Loading...") : Ct(e, t);
+  }, Ct = (e, t, r = "Embroidery") => {
     e.fillStyle = "#f9f9f9", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ddd", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#999", e.font = "24px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("🧵", t.width / 2, t.height / 2 - 10), e.fillStyle = "#666", e.font = "12px Arial", e.fillText(r, t.width / 2, t.height / 2 + 15);
   }, Ht = (e, t, r) => {
     if (!r) return !1;
@@ -7266,7 +7268,7 @@ const fi = $e((f, 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(), St()) : (t.key === "z" && t.shiftKey || t.key === "y") && (t.preventDefault(), wt())), (t.key === "Delete" || t.key === "Backspace") && d && (Mt(d.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && d && (_t(d.id), t.preventDefault()), d && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key))) {
+      if (!(r && (r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.tagName === "SELECT" || r.isContentEditable)) && ((t.ctrlKey || t.metaKey) && (t.key === "z" && !t.shiftKey ? (t.preventDefault(), Ft()) : (t.key === "z" && t.shiftKey || t.key === "y") && (t.preventDefault(), bt())), (t.key === "Delete" || t.key === "Backspace") && d && (Mt(d.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && d && (_t(d.id), t.preventDefault()), d && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key))) {
         t.preventDefault();
         const g = t.shiftKey ? 10 : 1;
         let m = {};
@@ -7288,7 +7290,7 @@ const fi = $e((f, o) => {
       }
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [d, St, wt, l]);
+  }, [d, Ft, bt, l]);
   const ze = (e, t = {}) => {
     const r = {
       id: ht(),
@@ -7369,14 +7371,14 @@ const fi = $e((f, o) => {
     t === "up" && r < c.length - 1 ? (c[r] = c[r + 1], c[r + 1] = g) : t === "down" && r > 0 ? (c[r] = c[r - 1], c[r - 1] = g) : t === "top" ? (c.splice(r, 1), c.push(g)) : t === "bottom" && (c.splice(r, 1), c.unshift(g)), n(c), lt();
   };
   rt(() => {
-    T && H((e) => ({
+    C && H((e) => ({
       ...e,
-      [T.sectionName]: {
+      [C.sectionName]: {
         elements: [...x],
-        selectedColor: q
+        selectedColor: _
       }
     }));
-  }, [T, x, q]);
+  }, [C, x, _]);
   const [, We] = He((e) => e + 1, 0);
   setTimeout(() => {
     We();
@@ -7388,13 +7390,13 @@ const fi = $e((f, o) => {
     // Access to the existing exportDesign method
     exportDesign: Wt,
     // Get canvas data for custom exports
-    getCanvasData: () => kt(),
+    getCanvasData: () => St(),
     // NEW: Export methods that return JSON with File objects
     exportAllDesignsAsJSON: async (e = "png") => {
       try {
-        const t = kt();
+        const t = St();
         console.log("canvas data to export: ", t);
-        const r = {}, c = (T == null ? void 0 : T.sectionName) || "main";
+        const r = {}, c = (C == null ? void 0 : C.sectionName) || "main";
         r[c] = {
           elements: t.elements,
           selectedColor: t.selectedColor,
@@ -7404,10 +7406,10 @@ const fi = $e((f, o) => {
         const g = s.sections && s.sections.length > 0 ? s.sections : [{
           id: c,
           sectionName: c,
-          image: T == null ? void 0 : T.sectionImage,
-          sectionImage: T == null ? void 0 : T.sectionImage
+          image: C == null ? void 0 : C.sectionImage,
+          sectionImage: C == null ? void 0 : C.sectionImage
         }];
-        return await Et.current.exportAllSectionsAsJSON(
+        return await Bt.current.exportAllSectionsAsJSON(
           r,
           g,
           v,
@@ -7420,8 +7422,8 @@ const fi = $e((f, o) => {
     },
     exportCurrentSectionAsJSON: async (e = "png") => {
       try {
-        const t = kt();
-        return await Et.current.exportCurrentSectionAsJSON(t, e);
+        const t = St();
+        return await Bt.current.exportCurrentSectionAsJSON(t, e);
       } catch (t) {
         throw console.error("Export current section as JSON failed:", t), t;
       }
@@ -7435,24 +7437,24 @@ const fi = $e((f, o) => {
     t.clearRect(0, 0, v, W), pt.current && t.drawImage(pt.current, 0, 0, v, W), M && xe(t), x.forEach((r) => {
       t.save(), t.globalAlpha = r.opacity || 1, ye(t, r), t.restore();
     }), d && fe(t, d), Lt.current = !1;
-  }, [x, d, v, W, M]), bt = rt(() => {
+  }, [x, d, v, W, M]), vt = rt(() => {
     yt.current && cancelAnimationFrame(yt.current), yt.current = requestAnimationFrame(() => {
       V(), yt.current = null;
     });
   }, [V]);
   ot(() => {
-    bt();
-  }, [x, d, v, W, M, bt]), ot(() => {
-    pt.current && bt();
-  }, [pt.current, bt]), ot(() => () => {
+    vt();
+  }, [x, d, v, W, M, vt]), ot(() => {
+    pt.current && vt();
+  }, [pt.current, vt]), ot(() => () => {
     yt.current && cancelAnimationFrame(yt.current);
   }, []);
   const Pt = rt(() => {
     V(), (S || y || B) && (yt.current = requestAnimationFrame(Pt));
   }, [V, S, y, B]);
   ot(() => {
-    S || y || B ? Pt() : (yt.current && (cancelAnimationFrame(yt.current), yt.current = null), bt());
-  }, [S, y, B, Pt, bt]);
+    S || y || B ? Pt() : (yt.current && (cancelAnimationFrame(yt.current), yt.current = null), vt());
+  }, [S, y, B, Pt, vt]);
   const Me = rt((e) => {
     if (l) return;
     const r = K.current.getBoundingClientRect(), c = (e.clientX - r.left) / Q, g = (e.clientY - r.top) / Q;
@@ -7510,10 +7512,10 @@ const fi = $e((f, o) => {
       ), j((A) => ({ ...A, rotation: R })), V();
       return;
     }
-    if (y && d && C) {
+    if (y && d && T) {
       const m = c - F.x, p = g - F.y;
       let k = F.initialWidth, w = F.initialHeight, R = F.initialX, A = F.initialY;
-      switch (C) {
+      switch (T) {
         case "se-resize":
           k = Math.max(20, F.initialWidth + m), w = Math.max(20, F.initialHeight + p);
           break;
@@ -7529,9 +7531,9 @@ const fi = $e((f, o) => {
       }
       if (e.shiftKey && d.type !== "text") {
         const $ = F.initialWidth / F.initialHeight;
-        C.includes("e"), w = k / $, C.includes("n") && (A = F.initialY + (F.initialHeight - w));
+        T.includes("e"), w = k / $, T.includes("n") && (A = F.initialY + (F.initialHeight - w));
       }
-      _ && (R = ut(R), A = ut(A), k = ut(k), w = ut(w));
+      Y && (R = ut(R), A = ut(A), k = ut(k), w = ut(w));
       const z = {
         ...d,
         x: R,
@@ -7548,7 +7550,7 @@ const fi = $e((f, o) => {
     }
     if (S && d) {
       let m = c - F.offsetX, p = g - F.offsetY;
-      _ && (m = ut(m), p = ut(p)), m = Math.max(0, Math.min(v - d.width, m)), p = Math.max(0, Math.min(W - d.height, p));
+      Y && (m = ut(m), p = ut(p)), m = Math.max(0, Math.min(v - d.width, m)), p = Math.max(0, Math.min(W - d.height, p));
       const k = {
         ...d,
         x: m,
@@ -7560,17 +7562,17 @@ const fi = $e((f, o) => {
         )
       ), j(k), V();
     }
-  }, [l, Q, d, S, y, B, C, F, _, v, W, x, V]), qt = rt((e) => {
-    T && H((r) => ({
+  }, [l, Q, d, S, y, B, T, F, Y, v, W, x, V]), qt = rt((e) => {
+    C && H((r) => ({
       ...r,
-      [T.sectionName]: {
+      [C.sectionName]: {
         elements: x.map((c) => c.type === "image" ? {
           ...c,
           // Keep the image data reference
           imageData: c.imageData,
           src: c.src
         } : c),
-        selectedColor: q
+        selectedColor: _
       }
     }));
     const t = L[e.sectionName];
@@ -7588,11 +7590,11 @@ const fi = $e((f, o) => {
         }
         return c;
       });
-      n(r), at(t.selectedColor || q);
+      n(r), at(t.selectedColor || _);
     } else
       n([]);
     tt(e), j(null);
-  }, [T, x, q, L, V]), Pe = rt((e) => {
+  }, [C, x, _, L, V]), Pe = rt((e) => {
     if (e && e.type.startsWith("image/")) {
       const t = new FileReader();
       t.onload = (r) => {
@@ -7629,7 +7631,7 @@ const fi = $e((f, o) => {
     [V]
   );
   ot(() => {
-    Bt.current || Vt();
+    zt.current || Vt();
   }, [x, d, M, Vt]);
   function Ue(e, t) {
     let r;
@@ -7641,8 +7643,8 @@ const fi = $e((f, o) => {
     };
   }
   ot(() => {
-    mt.current && Xt(mt.current, q);
-  }, [q]), ot(() => {
+    mt.current && Xt(mt.current, _);
+  }, [_]), ot(() => {
     V();
   }, [V]);
   const Oe = (e, t, r) => (0.2126 * e + 0.7152 * t + 0.0722 * r) / 255, Xt = rt((e, t) => {
@@ -7650,7 +7652,7 @@ const fi = $e((f, o) => {
     r.width = v, r.height = W, c.clearRect(0, 0, v, W), c.drawImage(e, 0, 0, v, W);
     const g = c.getImageData(0, 0, v, W), m = g.data, p = ge(t);
     if (!p) {
-      Bt.current = !1;
+      zt.current = !1;
       return;
     }
     const { r: k, g: w, b: R } = p;
@@ -7662,7 +7664,7 @@ const fi = $e((f, o) => {
     c.putImageData(g, 0, 0);
     const A = new Image();
     A.onload = () => {
-      pt.current = s.plainColor === "Y" ? A : e, Bt.current = !1, V();
+      pt.current = s.plainColor === "Y" ? A : e, zt.current = !1, V();
     }, A.src = r.toDataURL("image/png");
   }, [v, W, V]), Jt = (e) => {
     if (!Z) return { horizontal: [], vertical: [] };
@@ -7712,17 +7714,17 @@ const fi = $e((f, o) => {
         onAddElement: ze,
         onDeleteElement: () => d && Mt(d.id),
         onDuplicateElement: () => d && _t(d.id),
-        onUndo: St,
-        onRedo: wt,
+        onUndo: Ft,
+        onRedo: bt,
         onToggleGrid: () => nt(!M),
         onToggleRulers: () => ct(!Z),
-        onToggleSnap: () => P(!_),
+        onToggleSnap: () => P(!Y),
         onImageUpload: Pe,
         canUndo: X > 0,
         canRedo: X < G.length - 1,
         showGrid: M,
         showRulers: Z,
-        snapToGrid: _,
+        snapToGrid: Y,
         selectedElement: d,
         theme: a,
         readOnly: l,
@@ -7751,7 +7753,7 @@ const fi = $e((f, o) => {
           t
         )) }) })
       ] }),
-      /* @__PURE__ */ i.jsx("div", { className: "canvas-container", ref: vt, children: /* @__PURE__ */ i.jsx(
+      /* @__PURE__ */ i.jsx("div", { className: "canvas-container", ref: kt, children: /* @__PURE__ */ i.jsx(
         "canvas",
         {
           ref: K,
@@ -7803,7 +7805,7 @@ const fi = $e((f, o) => {
           return /* @__PURE__ */ i.jsxs(
             "div",
             {
-              className: `section-thumbnail compact ${T.sectionName === e.sectionName ? "active" : ""}`,
+              className: `section-thumbnail compact ${C.sectionName === e.sectionName ? "active" : ""}`,
               onClick: (r) => {
                 r.stopPropagation();
                 const c = s.sections.find((g) => g.sectionName === e.sectionName);
@@ -7839,7 +7841,7 @@ const fi = $e((f, o) => {
           s.colorSettings.slice(0, 3).map((e, t) => /* @__PURE__ */ i.jsxs(
             "div",
             {
-              className: `color-swatch-enhanced compact ${q === e ? "active" : ""}`,
+              className: `color-swatch-enhanced compact ${_ === e ? "active" : ""}`,
               onClick: (r) => {
                 r.stopPropagation(), at(e);
               },
@@ -7852,7 +7854,7 @@ const fi = $e((f, o) => {
                     style: { backgroundColor: e }
                   }
                 ),
-                q === e && /* @__PURE__ */ i.jsx("div", { className: "color-selection-ring compact" })
+                _ === e && /* @__PURE__ */ i.jsx("div", { className: "color-selection-ring compact" })
               ]
             },
             e
@@ -7878,7 +7880,7 @@ const fi = $e((f, o) => {
             /* @__PURE__ */ i.jsx("div", { className: "color-dropdown-menu", style: { display: "none" }, children: s.colorSettings.slice(3).map((e, t) => /* @__PURE__ */ i.jsxs(
               "div",
               {
-                className: `color-swatch-dropdown ${q === e ? "active" : ""}`,
+                className: `color-swatch-dropdown ${_ === e ? "active" : ""}`,
                 onClick: (r) => {
                   r.stopPropagation(), at(e), r.currentTarget.parentElement.style.display = "none";
                 },