@mypixia/simplex-designer 2.0.8 → 2.0.9

package/dist/index.es.js

@@ -1,8 +1,8 @@
-import Qe, { useState as N, useRef as gt, useEffect as rt, useMemo as ie, forwardRef as $e, useCallback as at, useReducer as He, useImperativeHandle as Ge } from "react";
-import _e from "qrcode";
-import Ye from "react-barcode";
+import $e, { useState as N, useRef as gt, useEffect as rt, useMemo as ie, forwardRef as He, useCallback as at, useReducer as Ge, useImperativeHandle as _e } from "react";
+import Ye from "qrcode";
+import qe from "react-barcode";
 import oe from "axios";
-import './index_external.css';var Et = { exports: {} }, jt = {};
+import './index_external.css';var Et = { exports: {} }, Tt = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -13,8 +13,8 @@ import './index_external.css';var Et = { exports: {} }, jt = {};
  * LICENSE file in the root directory of this source tree.
  */
 var re;
-function qe() {
-  if (re) return jt;
+function Ve() {
+  if (re) return Tt;
   re = 1;
   var f = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
   function a(l, s, g) {
@@ -32,9 +32,9 @@ function qe() {
       props: g
     };
   }
-  return jt.Fragment = o, jt.jsx = a, jt.jsxs = a, jt;
+  return Tt.Fragment = o, Tt.jsx = a, Tt.jsxs = a, Tt;
 }
-var Tt = {};
+var jt = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -45,12 +45,12 @@ var Tt = {};
  * LICENSE file in the root directory of this source tree.
  */
 var ae;
-function Ve() {
+function Xe() {
   return ae || (ae = 1, process.env.NODE_ENV !== "production" && function() {
     function f(y) {
       if (y == null) return null;
       if (typeof y == "function")
-        return y.$$typeof === _ ? null : y.displayName || y.name || null;
+        return y.$$typeof === G ? null : y.displayName || y.name || null;
       if (typeof y == "string") return y;
       switch (y) {
         case p:
@@ -70,11 +70,11 @@ function Ve() {
         switch (typeof y.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), y.$$typeof) {
-          case T:
+          case j:
             return "Portal";
           case O:
             return (y.displayName || "Context") + ".Provider";
-          case j:
+          case T:
             return (y._context.displayName || "Context") + ".Consumer";
           case k:
             var D = y.render;
@@ -102,11 +102,11 @@ function Ve() {
       }
       if (D) {
         D = console;
-        var L = D.error, H = typeof Symbol == "function" && Symbol.toStringTag && y[Symbol.toStringTag] || y.constructor.name || "Object";
+        var L = D.error, $ = typeof Symbol == "function" && Symbol.toStringTag && y[Symbol.toStringTag] || y.constructor.name || "Object";
         return L.call(
           D,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          H
+          $
         ), o(y);
       }
     }
@@ -153,13 +153,13 @@ function Ve() {
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), y = this.props.ref, y !== void 0 ? y : null;
     }
-    function F(y, D, L, H, G, it, J, q) {
+    function C(y, D, L, $, _, it, J, q) {
       return L = it.ref, y = {
         $$typeof: B,
         type: y,
         key: D,
         props: it,
-        _owner: G
+        _owner: _
       }, (L !== void 0 ? L : null) !== null ? Object.defineProperty(y, "ref", {
         enumerable: !1,
         get: c
@@ -185,13 +185,13 @@ function Ve() {
         value: q
       }), Object.freeze && (Object.freeze(y.props), Object.freeze(y)), y;
     }
-    function I(y, D, L, H, G, it, J, q) {
+    function I(y, D, L, $, _, it, J, q) {
       var U = D.children;
       if (U !== void 0)
-        if (H)
+        if ($)
           if (nt(U)) {
-            for (H = 0; H < U.length; H++)
-              E(U[H]);
+            for ($ = 0; $ < U.length; $++)
+              E(U[$]);
             Object.freeze && Object.freeze(U);
           } else
             console.error(
@@ -203,18 +203,18 @@ function Ve() {
         var K = Object.keys(D).filter(function(pt) {
           return pt !== "key";
         });
-        H = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", et[U + H] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
+        $ = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", et[U + $] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          H,
+          $,
           U,
           K,
           U
-        ), et[U + H] = !0);
+        ), et[U + $] = !0);
       }
       if (U = null, L !== void 0 && (a(L), U = "" + L), h(D) && (a(D.key), U = "" + D.key), "key" in D) {
         L = {};
@@ -224,11 +224,11 @@ React keys must be passed directly to JSX without using spread:
       return U && n(
         L,
         typeof y == "function" ? y.displayName || y.name || "Unknown" : y
-      ), F(
+      ), C(
         y,
         U,
         it,
-        G,
+        _,
         s(),
         L,
         J,
@@ -238,50 +238,50 @@ React keys must be passed directly to JSX without using spread:
     function E(y) {
       typeof y == "object" && y !== null && y.$$typeof === B && y._store && (y._store.validated = 1);
     }
-    var m = Qe, B = Symbol.for("react.transitional.element"), T = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), X = Symbol.for("react.profiler"), j = Symbol.for("react.consumer"), O = Symbol.for("react.context"), k = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), W = Symbol.for("react.suspense_list"), xt = Symbol.for("react.memo"), Q = Symbol.for("react.lazy"), ft = Symbol.for("react.activity"), _ = Symbol.for("react.client.reference"), st = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, nt = Array.isArray, tt = console.createTask ? console.createTask : function() {
+    var u = $e, B = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), X = Symbol.for("react.profiler"), T = Symbol.for("react.consumer"), O = Symbol.for("react.context"), k = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), W = Symbol.for("react.suspense_list"), xt = Symbol.for("react.memo"), Q = Symbol.for("react.lazy"), ft = Symbol.for("react.activity"), G = Symbol.for("react.client.reference"), st = u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, nt = Array.isArray, tt = console.createTask ? console.createTask : function() {
       return null;
     };
-    m = {
+    u = {
       "react-stack-bottom-frame": function(y) {
         return y();
       }
     };
-    var ct, Y = {}, P = m["react-stack-bottom-frame"].bind(
-      m,
+    var ct, Y = {}, P = u["react-stack-bottom-frame"].bind(
+      u,
       g
-    )(), C = tt(l(g)), et = {};
-    Tt.Fragment = p, Tt.jsx = function(y, D, L, H, G) {
+    )(), F = tt(l(g)), et = {};
+    jt.Fragment = p, jt.jsx = function(y, D, L, $, _) {
       var it = 1e4 > st.recentlyCreatedOwnerStacks++;
       return I(
         y,
         D,
         L,
         !1,
-        H,
-        G,
+        $,
+        _,
         it ? Error("react-stack-top-frame") : P,
-        it ? tt(l(y)) : C
+        it ? tt(l(y)) : F
       );
-    }, Tt.jsxs = function(y, D, L, H, G) {
+    }, jt.jsxs = function(y, D, L, $, _) {
       var it = 1e4 > st.recentlyCreatedOwnerStacks++;
       return I(
         y,
         D,
         L,
         !0,
-        H,
-        G,
+        $,
+        _,
         it ? Error("react-stack-top-frame") : P,
-        it ? tt(l(y)) : C
+        it ? tt(l(y)) : F
       );
     };
-  }()), Tt;
+  }()), jt;
 }
 var se;
-function Xe() {
-  return se || (se = 1, process.env.NODE_ENV === "production" ? Et.exports = qe() : Et.exports = Ve()), Et.exports;
+function Je() {
+  return se || (se = 1, process.env.NODE_ENV === "production" ? Et.exports = Ve() : Et.exports = Xe()), Et.exports;
 }
-var i = Xe();
+var i = Je();
 const Ut = {
   business: {
     name: "Business & Office",
@@ -378,25 +378,25 @@ const Ut = {
     ...o,
     category: f.name
   }))
-), Je = (f) => ne().filter(
+), Ke = (f) => ne().filter(
   (a) => a.name.toLowerCase().includes(f.toLowerCase()) || a.category.toLowerCase().includes(f.toLowerCase())
-), Ke = ({ onSelectIcon: f, disabled: o = !1 }) => {
+), Ze = ({ onSelectIcon: f, disabled: o = !1 }) => {
   const [a, l] = N(!1), [s, g] = N(""), [h, n] = N("all"), c = gt(null);
   rt(() => {
-    const m = (B) => {
+    const u = (B) => {
       c.current && !c.current.contains(B.target) && l(!1);
     };
-    return document.addEventListener("mousedown", m), () => document.removeEventListener("mousedown", m);
+    return document.addEventListener("mousedown", u), () => document.removeEventListener("mousedown", u);
   }, []);
-  const F = (m) => {
-    f(m), l(!1), g("");
+  const C = (u) => {
+    f(u), l(!1), g("");
   }, E = (() => {
-    let m = ne();
-    if (s.trim() && (m = Je(s)), h !== "all") {
+    let u = ne();
+    if (s.trim() && (u = Ke(s)), h !== "all") {
       const B = Ut[h];
-      B && (m = m.filter((T) => T.category === B.name));
+      B && (u = u.filter((j) => j.category === B.name));
     }
-    return m;
+    return u;
   })();
   return /* @__PURE__ */ i.jsxs("div", { className: "icon-selector", ref: c, children: [
     /* @__PURE__ */ i.jsxs(
@@ -421,7 +421,7 @@ const Ut = {
             type: "text",
             placeholder: "Search icons...",
             value: s,
-            onChange: (m) => g(m.target.value),
+            onChange: (u) => g(u.target.value),
             className: "icon-search"
           }
         ),
@@ -429,27 +429,27 @@ const Ut = {
           "select",
           {
             value: h,
-            onChange: (m) => n(m.target.value),
+            onChange: (u) => n(u.target.value),
             className: "category-select",
             children: [
               /* @__PURE__ */ i.jsx("option", { value: "all", children: "All Categories" }),
-              Object.entries(Ut).map(([m, B]) => /* @__PURE__ */ i.jsx("option", { value: m, children: B.name }, m))
+              Object.entries(Ut).map(([u, B]) => /* @__PURE__ */ i.jsx("option", { value: u, children: B.name }, u))
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ i.jsx("div", { className: "icon-grid", children: E.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-icons", children: s ? "No icons found" : "No icons in this category" }) : E.map((m, B) => /* @__PURE__ */ i.jsxs(
+      /* @__PURE__ */ i.jsx("div", { className: "icon-grid", children: E.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-icons", children: s ? "No icons found" : "No icons in this category" }) : E.map((u, B) => /* @__PURE__ */ i.jsxs(
         "button",
         {
           className: "icon-item",
-          onClick: () => F(m),
-          title: `${m.name} (${m.category})`,
+          onClick: () => C(u),
+          title: `${u.name} (${u.category})`,
           children: [
-            /* @__PURE__ */ i.jsx("span", { className: "icon-symbol", children: m.symbol }),
-            /* @__PURE__ */ i.jsx("span", { className: "icon-name", children: m.name })
+            /* @__PURE__ */ i.jsx("span", { className: "icon-symbol", children: u.symbol }),
+            /* @__PURE__ */ i.jsx("span", { className: "icon-name", children: u.name })
           ]
         },
-        `${m.name}-${B}`
+        `${u.name}-${B}`
       )) }),
       /* @__PURE__ */ i.jsx("div", { className: "icon-dropdown-footer", children: /* @__PURE__ */ i.jsxs("span", { className: "icon-count", children: [
         E.length,
@@ -458,8 +458,8 @@ const Ut = {
       ] }) })
     ] })
   ] });
-}, Ze = ({ isOpen: f, onClose: o, onAddQRCode: a, theme: l }) => {
-  const [s, g] = N(""), [h, n] = N(""), [c, F] = N(200), [I, E] = N("M"), m = () => {
+}, ti = ({ isOpen: f, onClose: o, onAddQRCode: a, theme: l }) => {
+  const [s, g] = N(""), [h, n] = N(""), [c, C] = N(200), [I, E] = N("M"), u = () => {
     if (!s.trim()) return;
     const p = {
       width: c,
@@ -472,7 +472,7 @@ const Ut = {
         light: "#FFFFFF"
       }
     };
-    _e.toDataURL(s, p, (v, X) => {
+    Ye.toDataURL(s, p, (v, X) => {
       if (v) {
         console.error("QR Code generation error:", v);
         return;
@@ -493,19 +493,19 @@ const Ut = {
         y: 100,
         imageObject: p
         // Store the loaded image object
-      }), T();
+      }), j();
     }, p.src = h;
-  }, T = () => {
+  }, j = () => {
     g(""), n(""), o();
   };
-  return f ? /* @__PURE__ */ i.jsx("div", { className: "qr-modal-overlay", onClick: T, children: /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-content", onClick: (p) => p.stopPropagation(), children: [
+  return f ? /* @__PURE__ */ i.jsx("div", { className: "qr-modal-overlay", onClick: j, children: /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-content", onClick: (p) => p.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-header", children: [
       /* @__PURE__ */ i.jsx("h3", { children: "Generate QR Code" }),
       /* @__PURE__ */ i.jsx(
         "button",
         {
           className: "qr-modal-close",
-          onClick: T,
+          onClick: j,
           "aria-label": "Close",
           children: "×"
         }
@@ -534,7 +534,7 @@ const Ut = {
               type: "number",
               id: "qr-size",
               value: c,
-              onChange: (p) => F(Math.max(50, Math.min(500, parseInt(p.target.value) || 200))),
+              onChange: (p) => C(Math.max(50, Math.min(500, parseInt(p.target.value) || 200))),
               min: "50",
               max: "500"
             }
@@ -562,7 +562,7 @@ const Ut = {
         "button",
         {
           className: "qr-btn qr-btn-generate",
-          onClick: m,
+          onClick: u,
           disabled: !s.trim(),
           children: "Generate QR Code"
         }
@@ -585,8 +585,8 @@ const Ut = {
       ] })
     ] })
   ] }) }) : null;
-}, ti = ({ isOpen: f, onClose: o, onAddBarcode: a, theme: l }) => {
-  const [s, g] = N(""), [h, n] = N("CODE128"), [c, F] = N(null), [I, E] = N(2), [m, B] = N(100), [T, p] = N(20), [v, X] = N("center"), [j, O] = N("bottom"), [k, Z] = N(10), W = gt(null), xt = [
+}, ei = ({ isOpen: f, onClose: o, onAddBarcode: a, theme: l }) => {
+  const [s, g] = N(""), [h, n] = N("CODE128"), [c, C] = N(null), [I, E] = N(2), [u, B] = N(100), [j, p] = N(20), [v, X] = N("center"), [T, O] = N("bottom"), [k, Z] = N(10), W = gt(null), xt = [
     { value: "CODE128", label: "CODE128 (Most Common)" },
     { value: "EAN13", label: "EAN-13 (European Article Number)" },
     { value: "EAN8", label: "EAN-8 (Short EAN)" },
@@ -599,16 +599,16 @@ const Ut = {
   ], Q = () => {
     if (s.trim())
       try {
-        F(/* @__PURE__ */ i.jsx(
-          Ye,
+        C(/* @__PURE__ */ i.jsx(
+          qe,
           {
             value: s,
             format: h,
             width: I,
-            height: m,
-            fontSize: T,
+            height: u,
+            fontSize: j,
             textAlign: v,
-            textPosition: j,
+            textPosition: T,
             margin: k,
             background: "#ffffff",
             lineColor: "#000000"
@@ -626,11 +626,11 @@ const Ut = {
           console.error("No SVG element found in barcode");
           return;
         }
-        const P = document.createElement("canvas"), C = P.getContext("2d"), et = Y.getBoundingClientRect(), y = ((nt = (M = Y.width) == null ? void 0 : M.baseVal) == null ? void 0 : nt.value) || et.width || 200, D = ((ct = (tt = Y.height) == null ? void 0 : tt.baseVal) == null ? void 0 : ct.value) || et.height || 100;
+        const P = document.createElement("canvas"), F = P.getContext("2d"), et = Y.getBoundingClientRect(), y = ((nt = (M = Y.width) == null ? void 0 : M.baseVal) == null ? void 0 : nt.value) || et.width || 200, D = ((ct = (tt = Y.height) == null ? void 0 : tt.baseVal) == null ? void 0 : ct.value) || et.height || 100;
         P.width = y, P.height = D;
-        const L = new XMLSerializer().serializeToString(Y), H = new Blob([L], { type: "image/svg+xml;charset=utf-8" }), G = URL.createObjectURL(H), it = new Image();
+        const L = new XMLSerializer().serializeToString(Y), $ = new Blob([L], { type: "image/svg+xml;charset=utf-8" }), _ = URL.createObjectURL($), it = new Image();
         it.onload = () => {
-          C.drawImage(it, 0, 0);
+          F.drawImage(it, 0, 0);
           const J = P.toDataURL("image/png"), q = new Image();
           q.onload = () => {
             a({
@@ -643,14 +643,14 @@ const Ut = {
               x: 100,
               y: 100,
               imageObject: q
-            }), _();
-          }, q.src = J, URL.revokeObjectURL(G);
-        }, it.src = G;
+            }), G();
+          }, q.src = J, URL.revokeObjectURL(_);
+        }, it.src = _;
       } catch (Y) {
         console.error("Error adding barcode to canvas:", Y), alert("Failed to add barcode to canvas. Please try again.");
       }
-  }, _ = () => {
-    g(""), F(null), n("CODE128"), E(2), B(100), p(20), o();
+  }, G = () => {
+    g(""), C(null), n("CODE128"), E(2), B(100), p(20), o();
   }, st = (M) => ({
     CODE128: "Supports all ASCII characters. Most versatile format.",
     EAN13: "Requires exactly 12 digits (13th is checksum). Used for retail products.",
@@ -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: _, 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: G, 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: _,
+          onClick: G,
           "aria-label": "Close",
           children: "×"
         }
@@ -731,12 +731,12 @@ const Ut = {
               id: "barcode-height",
               min: "50",
               max: "200",
-              value: m,
+              value: u,
               onChange: (M) => B(parseInt(M.target.value))
             }
           ),
           /* @__PURE__ */ i.jsxs("span", { className: "range-value", children: [
-            m,
+            u,
             "px"
           ] })
         ] }),
@@ -749,12 +749,12 @@ const Ut = {
               id: "barcode-fontsize",
               min: "10",
               max: "30",
-              value: T,
+              value: j,
               onChange: (M) => p(parseInt(M.target.value))
             }
           ),
           /* @__PURE__ */ i.jsxs("span", { className: "range-value", children: [
-            T,
+            j,
             "px"
           ] })
         ] }),
@@ -764,7 +764,7 @@ const Ut = {
             "select",
             {
               id: "text-position",
-              value: j,
+              value: T,
               onChange: (M) => O(M.target.value),
               children: [
                 /* @__PURE__ */ i.jsx("option", { value: "bottom", children: "Bottom" }),
@@ -801,7 +801,7 @@ const Ut = {
       ] })
     ] })
   ] }) }) : null;
-}, ei = ({ theme: f }) => /* @__PURE__ */ i.jsxs("div", { className: "premium-feature-container", style: {
+}, ii = ({ theme: f }) => /* @__PURE__ */ i.jsxs("div", { className: "premium-feature-container", style: {
   padding: "20px",
   backgroundColor: "#f8f9fa",
   borderRadius: "8px",
@@ -864,17 +864,17 @@ const Ut = {
                 100% { transform: rotate(360deg); }
             }
         ` })
-] }), ii = ({ isOpen: f, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: g }) => {
-  const [h, n] = N([]), [c, F] = N(!1), [I, E] = N(null), [m, B] = N(""), [T, p] = N(""), [v, X] = N({});
+] }), oi = ({ isOpen: f, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: g }) => {
+  const [h, n] = N([]), [c, C] = N(!1), [I, E] = N(null), [u, B] = N(""), [j, p] = N(""), [v, X] = N({});
   gt(null);
-  const [j, O] = N(!1), [k, Z] = N(!1), [W, xt] = N(!1), Q = `${g}/api/v1/designer`;
+  const [T, O] = N(!1), [k, Z] = N(!1), [W, xt] = N(!1), Q = `${g}/api/v1/designer`;
   rt(() => {
     f && s && ft();
   }, [f, s]);
   const ft = async () => {
     const P = sessionStorage.getItem("apc_x_sub_status");
-    P === "active" ? (O(!0), Z(!0), st()) : P === "inactive" ? (O(!1), Z(!0)) : (xt(!0), await _());
-  }, _ = async () => {
+    P === "active" ? (O(!0), Z(!0), st()) : P === "inactive" ? (O(!1), Z(!0)) : (xt(!0), await G());
+  }, G = async () => {
     if (!s) {
       O(!1), Z(!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), st()) : (sessionStorage.setItem("apc_x_sub_status", "inactive"), O(!1));
-    } catch (C) {
-      console.error("Subscription check failed:", C), sessionStorage.setItem("apc_x_sub_status", "inactive"), O(!1);
+    } catch (F) {
+      console.error("Subscription check failed:", F), sessionStorage.setItem("apc_x_sub_status", "inactive"), O(!1);
     } finally {
       xt(!1), Z(!0);
     }
@@ -891,52 +891,52 @@ const Ut = {
     const P = sessionStorage.getItem("apc_stickers");
     if (P)
       try {
-        const C = JSON.parse(P);
-        n(C);
+        const F = JSON.parse(P);
+        n(F);
         return;
       } catch {
         console.warn("Failed to parse cached stickers, fetching fresh data");
       }
-    F(!0), E(null);
+    C(!0), E(null);
     try {
-      const C = await oe.get(`${Q}/get-stickers`);
-      if (C.data && C.data.object && C.data.object.contents) {
-        const et = C.data.object.contents;
+      const F = await oe.get(`${Q}/get-stickers`);
+      if (F.data && F.data.object && F.data.object.contents) {
+        const et = F.data.object.contents;
         n(et), sessionStorage.setItem("apc_stickers", JSON.stringify(et));
       } else
         throw new Error("Invalid response format");
-    } catch (C) {
-      console.error("Error fetching stickers:", C), E("Failed to load stickers. Please try again.");
+    } catch (F) {
+      console.error("Error fetching stickers:", F), E("Failed to load stickers. Please try again.");
     } finally {
-      F(!1);
+      C(!1);
     }
-  }, M = (P, C) => {
+  }, M = (P, F) => {
     a({
       type: "sticker",
       src: P,
-      name: C,
+      name: F,
       width: 100,
       height: 100,
       x: 100,
       y: 100
     }), o();
   }, nt = (P) => {
-    X((C) => ({
-      ...C,
-      [P]: !C[P]
+    X((F) => ({
+      ...F,
+      [P]: !F[P]
     }));
   }, tt = (P) => {
-    const C = {};
+    const F = {};
     return P.forEach((et) => {
       const y = et.name.split("/");
-      let D = C;
-      y.forEach((L, H) => {
-        D[L] || (D[L] = H === y.length - 1 ? et : {}), D = D[L];
+      let D = F;
+      y.forEach((L, $) => {
+        D[L] || (D[L] = $ === y.length - 1 ? et : {}), D = D[L];
       });
-    }), C;
-  }, ct = (P, C = "", et = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${et * 15}px` }, children: Object.keys(P).map((y) => {
-    const D = `${C}/${y}`, L = v[D];
-    return P[y].type === "image" ? !T || y.toLowerCase().includes(T.toLowerCase()) ? /* @__PURE__ */ i.jsx(
+    }), F;
+  }, ct = (P, F = "", et = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${et * 15}px` }, children: Object.keys(P).map((y) => {
+    const D = `${F}/${y}`, L = v[D];
+    return P[y].type === "image" ? !j || y.toLowerCase().includes(j.toLowerCase()) ? /* @__PURE__ */ i.jsx(
       "div",
       {
         className: "sticker-item",
@@ -947,8 +947,8 @@ const Ut = {
             src: P[y].url,
             alt: y,
             loading: "lazy",
-            onError: (G) => {
-              G.target.style.display = "none";
+            onError: (_) => {
+              _.target.style.display = "none";
             }
           }
         ) })
@@ -969,7 +969,7 @@ const Ut = {
       L && ct(P[y], D, et + 1)
     ] }, D);
   }) }), Y = h.filter(
-    (P) => !T || P.name.toLowerCase().includes(T.toLowerCase())
+    (P) => !j || P.name.toLowerCase().includes(j.toLowerCase())
   );
   return f ? /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-content", onClick: (P) => P.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-header", children: [
@@ -986,14 +986,14 @@ const Ut = {
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-body", children: [
       W && /* @__PURE__ */ i.jsx(le, {}),
-      !j && !W && k && /* @__PURE__ */ i.jsx(ei, { theme: l }),
-      j && k && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      !T && !W && k && /* @__PURE__ */ i.jsx(ii, { theme: l }),
+      T && k && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
         /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-controls", children: /* @__PURE__ */ i.jsx("div", { className: "search-container", children: /* @__PURE__ */ i.jsx(
           "input",
           {
             type: "text",
             placeholder: "Search stickers...",
-            value: T,
+            value: j,
             onChange: (P) => p(P.target.value),
             className: "sticker-search"
           }
@@ -1007,7 +1007,7 @@ const Ut = {
       ] })
     ] })
   ] }) }) : null;
-}, oi = [
+}, ri = [
   // FLORAL DESIGNS (40 items)
   {
     id: 1,
@@ -2559,12 +2559,12 @@ const Ut = {
     category: "Geometric",
     description: "Complex mandala flower pattern"
   }
-], ri = ({ isOpen: f, onClose: o, onAddEmbroidery: a, theme: l, apiKey: s, apiEndpoint: g }) => {
-  const [h, n] = N([]), [c, F] = N(!1), [I, E] = N(null), [m, B] = N(""), [T, p] = N("All"), v = gt(null), X = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
+], ai = ({ isOpen: f, onClose: o, onAddEmbroidery: a, theme: l, apiKey: s, apiEndpoint: g }) => {
+  const [h, n] = N([]), [c, C] = N(!1), [I, E] = N(null), [u, B] = N(""), [j, p] = N("All"), v = gt(null), X = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
   rt(() => {
-    f && n(oi);
+    f && n(ri);
   }, [f]);
-  const j = (k) => {
+  const T = (k) => {
     a({
       type: "embroidery",
       src: k.url,
@@ -2577,7 +2577,7 @@ const Ut = {
       y: 100
     }), o();
   }, O = h.filter((k) => {
-    const Z = !m || k.name.toLowerCase().includes(m.toLowerCase()) || k.description.toLowerCase().includes(m.toLowerCase()), W = T === "All" || k.category === T;
+    const Z = !u || k.name.toLowerCase().includes(u.toLowerCase()) || k.description.toLowerCase().includes(u.toLowerCase()), W = j === "All" || k.category === j;
     return Z && W;
   });
   return f ? /* @__PURE__ */ i.jsx("div", { className: "embroidery-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs(
@@ -2605,7 +2605,7 @@ const Ut = {
             {
               type: "text",
               placeholder: "Search embroidery designs...",
-              value: m,
+              value: u,
               onChange: (k) => B(k.target.value),
               className: "embroidery-search"
             }
@@ -2615,7 +2615,7 @@ const Ut = {
             /* @__PURE__ */ i.jsx(
               "select",
               {
-                value: T,
+                value: j,
                 onChange: (k) => p(k.target.value),
                 className: "category-select",
                 children: X.map((k) => /* @__PURE__ */ i.jsx("option", { value: k, children: k }, k))
@@ -2633,7 +2633,7 @@ const Ut = {
             "div",
             {
               className: "embroidery-item",
-              onClick: () => j(k),
+              onClick: () => T(k),
               title: k.description,
               children: [
                 /* @__PURE__ */ i.jsx("div", { className: "embroidery-preview", children: /* @__PURE__ */ i.jsx(
@@ -4601,19 +4601,19 @@ const Ut = {
     fill: "#8B0000",
     textAlign: "center"
   }
-], ai = ({ isOpen: f, onClose: o, onAddText: a, theme: l }) => {
+], si = ({ isOpen: f, onClose: o, onAddText: a, theme: l }) => {
   const [s, g] = N(""), [h, n] = N("All"), c = ie(() => {
-    const m = Nt.reduce((B, T) => (B[T.category] = (B[T.category] || 0) + 1, B), {});
+    const u = Nt.reduce((B, j) => (B[j.category] = (B[j.category] || 0) + 1, B), {});
     return [
       { name: "All", count: Nt.length },
-      ...Object.entries(m).map(([B, T]) => ({ name: B, count: T }))
+      ...Object.entries(u).map(([B, j]) => ({ name: B, count: j }))
     ];
-  }, [Nt]), F = ie(() => Nt.filter((m) => {
-    const B = !s || m.text.toLowerCase().includes(s.toLowerCase()) || m.category.toLowerCase().includes(s.toLowerCase()), T = h === "All" || m.category === h;
-    return B && T;
-  }), [Nt, s, h]), I = (m) => {
+  }, [Nt]), C = ie(() => Nt.filter((u) => {
+    const B = !s || u.text.toLowerCase().includes(s.toLowerCase()) || u.category.toLowerCase().includes(s.toLowerCase()), j = h === "All" || u.category === h;
+    return B && j;
+  }), [Nt, s, h]), I = (u) => {
     const B = {
-      ...m,
+      ...u,
       x: 100,
       y: 100
     };
@@ -4628,7 +4628,7 @@ const Ut = {
       y: 100
     }), o();
   };
-  return f ? /* @__PURE__ */ i.jsx("div", { className: "text-templates-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs("div", { className: "text-templates-modal", onClick: (m) => m.stopPropagation(), children: [
+  return f ? /* @__PURE__ */ i.jsx("div", { className: "text-templates-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs("div", { className: "text-templates-modal", onClick: (u) => u.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "modal-header", children: [
       /* @__PURE__ */ i.jsx("h2", { children: "Text Templates" }),
       /* @__PURE__ */ i.jsx("button", { className: "close-btn", onClick: o, "aria-label": "Close", children: "×" })
@@ -4640,25 +4640,25 @@ const Ut = {
           type: "text",
           placeholder: "Search templates...",
           value: s,
-          onChange: (m) => g(m.target.value),
+          onChange: (u) => g(u.target.value),
           className: "search-input"
         }
       ) }),
-      /* @__PURE__ */ i.jsx("div", { className: "category-tabs", children: c.map((m) => /* @__PURE__ */ i.jsxs(
+      /* @__PURE__ */ i.jsx("div", { className: "category-tabs", children: c.map((u) => /* @__PURE__ */ i.jsxs(
         "button",
         {
-          className: `category-tab ${h === m.name ? "active" : ""}`,
-          onClick: () => n(m.name),
+          className: `category-tab ${h === u.name ? "active" : ""}`,
+          onClick: () => n(u.name),
           children: [
-            m.name,
+            u.name,
             /* @__PURE__ */ i.jsxs("span", { className: "count", children: [
               "(",
-              m.count,
+              u.count,
               ")"
             ] })
           ]
         },
-        m.name
+        u.name
       )) })
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "templates-grid", children: [
@@ -4666,48 +4666,48 @@ const Ut = {
         /* @__PURE__ */ i.jsx("div", { className: "custom-icon", children: "✏️" }),
         /* @__PURE__ */ i.jsx("div", { className: "custom-label", children: "Create Custom Text" })
       ] }) }),
-      F.map((m) => /* @__PURE__ */ i.jsxs(
+      C.map((u) => /* @__PURE__ */ i.jsxs(
         "div",
         {
           className: "template-item",
-          onClick: () => I(m),
+          onClick: () => I(u),
           children: [
             /* @__PURE__ */ i.jsx(
               "div",
               {
                 className: "template-preview",
                 style: {
-                  fontFamily: m.fontFamily,
-                  fontSize: `${Math.min(m.fontSize * 0.6, 18)}px`,
-                  fontWeight: m.fontWeight,
-                  fontStyle: m.fontStyle,
-                  color: m.fill,
-                  backgroundColor: m.hasBackground ? m.backgroundColor : "transparent",
-                  textAlign: m.textAlign || "left",
-                  textTransform: m.textTransform || "none",
-                  letterSpacing: m.letterSpacing ? `${m.letterSpacing}px` : "normal",
-                  textShadow: m.hasTextShadow ? `${m.textShadowX}px ${m.textShadowY}px ${m.textShadowBlur}px ${m.textShadowColor}` : "none"
+                  fontFamily: u.fontFamily,
+                  fontSize: `${Math.min(u.fontSize * 0.6, 18)}px`,
+                  fontWeight: u.fontWeight,
+                  fontStyle: u.fontStyle,
+                  color: u.fill,
+                  backgroundColor: u.hasBackground ? u.backgroundColor : "transparent",
+                  textAlign: u.textAlign || "left",
+                  textTransform: u.textTransform || "none",
+                  letterSpacing: u.letterSpacing ? `${u.letterSpacing}px` : "normal",
+                  textShadow: u.hasTextShadow ? `${u.textShadowX}px ${u.textShadowY}px ${u.textShadowBlur}px ${u.textShadowColor}` : "none"
                 },
-                children: m.text
+                children: u.text
               }
             ),
             /* @__PURE__ */ i.jsxs("div", { className: "template-info", children: [
-              /* @__PURE__ */ i.jsx("span", { className: "template-category", children: m.category }),
-              /* @__PURE__ */ i.jsx("span", { className: "template-font", children: m.fontFamily })
+              /* @__PURE__ */ i.jsx("span", { className: "template-category", children: u.category }),
+              /* @__PURE__ */ i.jsx("span", { className: "template-font", children: u.fontFamily })
             ] })
           ]
         },
-        m.id
+        u.id
       ))
     ] }),
     /* @__PURE__ */ i.jsx("div", { className: "modal-footer", children: /* @__PURE__ */ i.jsxs("div", { className: "results-count", children: [
-      F.length,
+      C.length,
       " template",
-      F.length !== 1 ? "s" : "",
+      C.length !== 1 ? "s" : "",
       " found"
     ] }) })
   ] }) }) : null;
-}, si = ({
+}, li = ({
   onAddElement: f,
   onDeleteElement: o,
   onDuplicateElement: a,
@@ -4717,21 +4717,21 @@ const Ut = {
   onToggleRulers: h,
   onToggleSnap: n,
   onImageUpload: c,
-  canUndo: F,
+  canUndo: C,
   canRedo: I,
   showGrid: E,
-  showRulers: m,
+  showRulers: u,
   snapToGrid: B,
-  selectedElement: T,
+  selectedElement: j,
   theme: p,
   readOnly: v,
   apiKey: X,
-  apiEndpoint: j
+  apiEndpoint: T
 }) => {
-  const [O, k] = N(!1), [Z, W] = N(!1), [xt, Q] = N(!1), [ft, _] = N(!1), [st, M] = N(!1), [nt, tt] = N(!1), [ct, Y] = N(!1), P = (U) => {
+  const [O, k] = N(!1), [Z, W] = N(!1), [xt, Q] = N(!1), [ft, G] = N(!1), [st, M] = N(!1), [nt, tt] = N(!1), [ct, Y] = N(!1), P = (U) => {
     const K = U.target.files[0];
     K && K.type.startsWith("image/") && c(K), U.target.value = "";
-  }, C = (U) => {
+  }, F = (U) => {
     f("icon", {
       iconData: U,
       text: U.symbol,
@@ -4747,9 +4747,9 @@ const Ut = {
     f("sticker", U);
   }, L = (U) => {
     f("embroidery", U);
-  }, H = (U, K) => {
+  }, $ = (U, K) => {
     f(U, K);
-  }, G = () => {
+  }, _ = () => {
     tt(!nt), Y(!1);
   }, it = () => {
     Y(!ct), tt(!1);
@@ -4766,7 +4766,7 @@ const Ut = {
           {
             className: "toolbar-btn compact",
             onClick: l,
-            disabled: !F || v,
+            disabled: !C || v,
             title: "Undo (Ctrl+Z)",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "↶" }),
@@ -4797,7 +4797,7 @@ const Ut = {
               className: "toolbar-btn compact dropdown-trigger",
               disabled: v,
               title: "Add Text",
-              onClick: G,
+              onClick: _,
               children: [
                 /* @__PURE__ */ i.jsx("span", { className: "icon", children: "𝐓" }),
                 /* @__PURE__ */ i.jsx("span", { className: "label", children: "Text" }),
@@ -4896,7 +4896,7 @@ const Ut = {
           )
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ i.jsx(Ke, { onSelectIcon: C, theme: p, disabled: v }),
+        /* @__PURE__ */ i.jsx(Ze, { onSelectIcon: F, theme: p, disabled: v }),
         /* @__PURE__ */ i.jsxs(
           "button",
           {
@@ -4943,7 +4943,7 @@ const Ut = {
         "button",
         {
           className: "toolbar-btn compact",
-          onClick: () => _(!0),
+          onClick: () => G(!0),
           disabled: v,
           title: "Add Embroidery Design",
           children: [
@@ -4952,7 +4952,7 @@ const Ut = {
           ]
         }
       ) }),
-      T && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      j && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
         /* @__PURE__ */ i.jsxs("div", { className: "toolbar-group", children: [
           /* @__PURE__ */ i.jsxs(
@@ -5000,7 +5000,7 @@ const Ut = {
         /* @__PURE__ */ i.jsxs(
           "button",
           {
-            className: `toolbar-btn compact ${m ? "active" : ""}`,
+            className: `toolbar-btn compact ${u ? "active" : ""}`,
             onClick: h,
             title: "Toggle Rulers",
             children: [
@@ -5024,7 +5024,7 @@ const Ut = {
       ] })
     ] }),
     /* @__PURE__ */ i.jsx(
-      Ze,
+      ti,
       {
         isOpen: O,
         onClose: () => k(!1),
@@ -5033,7 +5033,7 @@ const Ut = {
       }
     ),
     /* @__PURE__ */ i.jsx(
-      ti,
+      ei,
       {
         isOpen: Z,
         onClose: () => W(!1),
@@ -5042,38 +5042,38 @@ const Ut = {
       }
     ),
     /* @__PURE__ */ i.jsx(
-      ii,
+      oi,
       {
         isOpen: xt,
         onClose: () => Q(!1),
         onAddSticker: D,
         theme: p,
         apiKey: X,
-        apiEndpoint: j
+        apiEndpoint: T
       }
     ),
     /* @__PURE__ */ i.jsx(
-      ri,
+      ai,
       {
         isOpen: ft,
-        onClose: () => _(!1),
+        onClose: () => G(!1),
         onAddEmbroidery: L,
         theme: p,
         apiKey: X,
-        apiEndpoint: j
+        apiEndpoint: T
       }
     ),
     /* @__PURE__ */ i.jsx(
-      ai,
+      si,
       {
         isOpen: st,
         onClose: () => M(!1),
-        onAddText: H,
+        onAddText: $,
         theme: p
       }
     )
   ] });
-}, li = ({
+}, ni = ({
   selectedElement: f,
   onUpdate: o,
   onMoveLayer: a,
@@ -5098,7 +5098,7 @@ const Ut = {
           "textarea",
           {
             value: f.text || "",
-            onChange: (j) => n("text", j.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: (j) => n("fontFamily", j.target.value),
-            children: l.map((j) => /* @__PURE__ */ i.jsx("option", { value: j, children: j }, j))
+            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: (j) => n("fontSize", parseInt(j.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: (j) => n("lineHeight", parseFloat(j.target.value)),
+              onChange: (T) => n("lineHeight", parseFloat(T.target.value)),
               min: "0.5",
               max: "3"
             }
@@ -5193,8 +5193,8 @@ const Ut = {
             {
               className: (p = f.textDecoration) != null && p.includes("underline") ? "active" : "",
               onClick: () => {
-                const j = f.textDecoration || "", O = j.split(" ").filter((k) => k && k !== "underline");
-                j.includes("underline") || O.push("underline"), n("textDecoration", O.join(" ").trim());
+                const T = f.textDecoration || "", O = T.split(" ").filter((k) => k && k !== "underline");
+                T.includes("underline") || O.push("underline"), n("textDecoration", O.join(" ").trim());
               },
               title: "Underline",
               children: /* @__PURE__ */ i.jsx("u", { children: "U" })
@@ -5205,8 +5205,8 @@ const Ut = {
             {
               className: (v = f.textDecoration) != null && v.includes("overline") ? "active" : "",
               onClick: () => {
-                const j = f.textDecoration || "", O = j.split(" ").filter((k) => k && k !== "overline");
-                j.includes("overline") || O.push("overline"), n("textDecoration", O.join(" ").trim());
+                const T = f.textDecoration || "", O = T.split(" ").filter((k) => k && k !== "overline");
+                T.includes("overline") || O.push("overline"), n("textDecoration", O.join(" ").trim());
               },
               title: "Overline",
               children: /* @__PURE__ */ i.jsx("span", { style: { textDecoration: "overline" }, children: "O" })
@@ -5217,8 +5217,8 @@ const Ut = {
             {
               className: (X = f.textDecoration) != null && X.includes("line-through") ? "active" : "",
               onClick: () => {
-                const j = f.textDecoration || "", O = j.split(" ").filter((k) => k && k !== "line-through");
-                j.includes("line-through") || O.push("line-through"), n("textDecoration", O.join(" ").trim());
+                const T = f.textDecoration || "", O = T.split(" ").filter((k) => k && k !== "line-through");
+                T.includes("line-through") || O.push("line-through"), n("textDecoration", O.join(" ").trim());
               },
               title: "Strikethrough",
               children: /* @__PURE__ */ i.jsx("s", { children: "S" })
@@ -5316,7 +5316,7 @@ const Ut = {
             {
               type: "color",
               value: f.fill || "#000000",
-              onChange: (j) => n("fill", j.target.value)
+              onChange: (T) => n("fill", T.target.value)
             }
           )
         ] }),
@@ -5328,7 +5328,7 @@ const Ut = {
               {
                 type: "color",
                 value: f.backgroundColor || "#ffffff",
-                onChange: (j) => n("backgroundColor", j.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: (j) => n("letterSpacing", parseFloat(j.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: (j) => n("wordSpacing", parseFloat(j.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: (j) => n("textShadowX", parseInt(j.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: (j) => n("textShadowY", parseInt(j.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: (j) => n("textShadowBlur", parseInt(j.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: (j) => n("textShadowColor", j.target.value)
+                    onChange: (T) => n("textShadowColor", T.target.value)
                   }
                 )
               ] })
@@ -5448,7 +5448,7 @@ const Ut = {
               {
                 type: "color",
                 value: f.stroke || "#000000",
-                onChange: (j) => n("stroke", j.target.value)
+                onChange: (T) => n("stroke", T.target.value)
               }
             )
           ] }),
@@ -5459,7 +5459,7 @@ const Ut = {
               {
                 type: "number",
                 value: f.strokeWidth || 0,
-                onChange: (j) => n("strokeWidth", parseInt(j.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: (j) => n("opacity", parseFloat(j.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: (j) => n("fontVariant", j.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: (j) => n("writingMode", j.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: (j) => n("backgroundPadding", parseInt(j.target.value)),
+              onChange: (T) => n("backgroundPadding", parseInt(T.target.value)),
               min: "0",
               max: "50",
               disabled: !f.hasBackground
@@ -5552,7 +5552,7 @@ const Ut = {
         ] })
       ] })
     ] });
-  }, F = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
+  }, C = () => /* @__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" }),
@@ -5717,7 +5717,7 @@ const Ut = {
         "°"
       ] })
     ] })
-  ] }), m = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
+  ] }), u = () => /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
     /* @__PURE__ */ i.jsx("h4", { children: "Line Properties" }),
     /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
       /* @__PURE__ */ i.jsxs("div", { className: "input-group", children: [
@@ -5784,7 +5784,7 @@ const Ut = {
       /* @__PURE__ */ i.jsx("button", { onClick: () => a(f.id, "down"), children: "Send Backward" }),
       /* @__PURE__ */ i.jsx("button", { onClick: () => a(f.id, "bottom"), children: "Send to Back" })
     ] })
-  ] }), T = [
+  ] }), j = [
     "rectangle",
     "circle",
     "triangle",
@@ -5804,9 +5804,9 @@ const Ut = {
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "panel-content", children: [
       f.type === "text" && c(),
-      T.includes(f.type) && F(),
+      j.includes(f.type) && C(),
       f.type === "image" && I(),
-      f.type === "horizontalLine" && m(),
+      f.type === "horizontalLine" && u(),
       E(),
       B(),
       /* @__PURE__ */ i.jsx("div", { className: "property-group", children: /* @__PURE__ */ i.jsxs(
@@ -5822,7 +5822,7 @@ const Ut = {
       ) })
     ] })
   ] });
-}, ni = ({
+}, ci = ({
   elements: f,
   selectedElement: o,
   onSelectElement: a,
@@ -5830,7 +5830,7 @@ const Ut = {
   onDeleteElement: s,
   theme: g
 }) => {
-  const h = (c, F) => {
+  const h = (c, C) => {
     switch (c) {
       case "text":
         return "T";
@@ -5872,14 +5872,14 @@ const Ut = {
         return "?";
     }
   }, n = (c) => {
-    var F, I;
+    var C, I;
     if (c.type === "text")
-      return c.isIcon && c.iconData ? `Icon: ${c.iconData.name}` : ((F = c.text) == null ? void 0 : F.substring(0, 20)) + (((I = c.text) == null ? void 0 : I.length) > 20 ? "..." : "") || "Text";
+      return c.isIcon && c.iconData ? `Icon: ${c.iconData.name}` : ((C = c.text) == null ? void 0 : C.substring(0, 20)) + (((I = c.text) == null ? void 0 : I.length) > 20 ? "..." : "") || "Text";
     if (c.type === "qrcode")
       return `QR Code: ${(c.data || "").substring(0, 15) + ((c.data || "").length > 15 ? "..." : "")}`;
     if (c.type === "barcode") {
-      const E = c.format || "CODE128", m = c.data || "";
-      return `Barcode (${E}): ${m.substring(0, 10) + (m.length > 10 ? "..." : "")}`;
+      const E = c.format || "CODE128", u = c.data || "";
+      return `Barcode (${E}): ${u.substring(0, 10) + (u.length > 10 ? "..." : "")}`;
     }
     return c.type === "sticker" ? `Sticker: ${(c.name || "Untitled").substring(0, 15)}` : c.type === "embroidery" ? `Embroidery: ${(c.name || "Design").substring(0, 15)}` : c.type.charAt(0).toUpperCase() + c.type.slice(1);
   };
@@ -5888,7 +5888,7 @@ const Ut = {
       /* @__PURE__ */ i.jsx("h3", { children: "Layers" }),
       /* @__PURE__ */ i.jsx("span", { className: "layer-count", children: f.length })
     ] }),
-    /* @__PURE__ */ i.jsx("div", { className: "layers-list", children: f.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-layers", children: "No elements added yet" }) : [...f].reverse().map((c, F) => /* @__PURE__ */ i.jsxs(
+    /* @__PURE__ */ i.jsx("div", { className: "layers-list", children: f.length === 0 ? /* @__PURE__ */ i.jsx("div", { className: "no-layers", children: "No elements added yet" }) : [...f].reverse().map((c, C) => /* @__PURE__ */ i.jsxs(
       "div",
       {
         className: `layer-item ${(o == null ? void 0 : o.id) === c.id ? "selected" : ""}`,
@@ -5906,7 +5906,7 @@ const Ut = {
                 onClick: (I) => {
                   I.stopPropagation(), l(c.id, "up");
                 },
-                disabled: F === 0,
+                disabled: C === 0,
                 title: "Move Up",
                 children: "↑"
               }
@@ -5918,7 +5918,7 @@ const Ut = {
                 onClick: (I) => {
                   I.stopPropagation(), l(c.id, "down");
                 },
-                disabled: F === f.length - 1,
+                disabled: C === f.length - 1,
                 title: "Move Down",
                 children: "↓"
               }
@@ -5941,36 +5941,36 @@ const Ut = {
     )) })
   ] });
 };
-class ci {
+class di {
   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, g = "png", h = !0, n = null) {
     const c = {};
-    for (const F of a) {
-      const I = F.id || F.sectionName, E = o[I];
+    for (const C of a) {
+      const I = C.id || C.sectionName, E = o[I];
       if (!E || !E.elements || E.elements.length === 0) {
         console.log(`Skipping section ${I} - no elements`);
         continue;
       }
       if (this.canvas.width = l, this.canvas.height = s, this.ctx.clearRect(0, 0, l, s), h) {
-        let B = F.image || F.sectionImage;
-        if (n && n.sectionImage && (F.sectionName === "Front" || n.sections && Object.keys(n.sections).includes(F.sectionName)) && (B = n.sectionImage), B)
+        let B = C.image || C.sectionImage;
+        if (n && n.sectionImage && (C.sectionName === "Front" || n.sections && Object.keys(n.sections).includes(C.sectionName)) && (B = n.sectionImage), B)
           try {
-            const T = await this.loadImage(B);
-            await this.processImageColor(T, E.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
-          } catch (T) {
-            console.warn("Failed to load background image:", T);
+            const j = await this.loadImage(B);
+            await this.processImageColor(j, E.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
+          } catch (j) {
+            console.warn("Failed to load background image:", j);
           }
       } else
         this.ctx.clearRect(0, 0, l, s);
       for (const B of E.elements)
         await this.drawElement(B);
-      const m = this.canvas.toDataURL(`image/${g}`, g === "jpeg" ? 0.9 : void 0);
+      const u = this.canvas.toDataURL(`image/${g}`, g === "jpeg" ? 0.9 : void 0);
       c[I] = {
-        dataUrl: m,
-        blob: await this.dataUrlToBlob(m)
+        dataUrl: u,
+        blob: await this.dataUrlToBlob(u)
       };
     }
     return c;
@@ -6010,11 +6010,11 @@ class ci {
       console.warn("Invalid target color:", a);
       return;
     }
-    const { r: c, g: F, b: I } = n;
+    const { r: c, g: C, b: I } = n;
     for (let E = 0; E < h.length; E += 4) {
       if (h[E + 3] === 0) continue;
       const B = this.getLuma(h[E], h[E + 1], h[E + 2]);
-      h[E] = Math.round(c * B), h[E + 1] = Math.round(F * B), h[E + 2] = Math.round(I * B);
+      h[E] = Math.round(c * B), h[E + 1] = Math.round(C * B), h[E + 2] = Math.round(I * B);
     }
     return s.putImageData(g, 0, 0), this.processedImage = new Image(), new Promise((E) => {
       this.processedImage.onload = () => {
@@ -6109,7 +6109,7 @@ class ci {
     const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, g = s * 0.4, h = o.numPoints || 5;
     this.ctx.beginPath();
     for (let n = 0; n < h * 2; n++) {
-      const c = n % 2 === 0 ? s : g, F = n * Math.PI / h, I = a + Math.cos(F) * c, E = l + Math.sin(F) * c;
+      const c = n % 2 === 0 ? s : g, C = n * Math.PI / h, I = a + Math.cos(C) * c, E = l + Math.sin(C) * c;
       n === 0 ? this.ctx.moveTo(I, E) : this.ctx.lineTo(I, E);
     }
     this.ctx.closePath(), o.fill && o.fill !== "transparent" && (this.ctx.fillStyle = o.fill, this.ctx.fill()), o.stroke && o.strokeWidth > 0 && (this.ctx.strokeStyle = o.stroke, this.ctx.lineWidth = o.strokeWidth, this.ctx.stroke());
@@ -6143,8 +6143,8 @@ class ci {
     const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, g = 6;
     this.ctx.beginPath();
     for (let h = 0; h < g; h++) {
-      const n = h * 2 * Math.PI / g - Math.PI / 2, c = a + s * Math.cos(n), F = l + s * Math.sin(n);
-      h === 0 ? this.ctx.moveTo(c, F) : this.ctx.lineTo(c, F);
+      const n = h * 2 * Math.PI / g - Math.PI / 2, c = a + s * Math.cos(n), C = l + s * Math.sin(n);
+      h === 0 ? this.ctx.moveTo(c, C) : this.ctx.lineTo(c, 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());
   }
@@ -6152,8 +6152,8 @@ class ci {
     const a = o.width / 2, l = o.height / 2, s = Math.min(o.width, o.height) / 2, g = 5;
     this.ctx.beginPath();
     for (let h = 0; h < g; h++) {
-      const n = h * 2 * Math.PI / g - Math.PI / 2, c = a + s * Math.cos(n), F = l + s * Math.sin(n);
-      h === 0 ? this.ctx.moveTo(c, F) : this.ctx.lineTo(c, F);
+      const n = h * 2 * Math.PI / g - Math.PI / 2, c = a + s * Math.cos(n), C = l + s * Math.sin(n);
+      h === 0 ? this.ctx.moveTo(c, C) : this.ctx.lineTo(c, 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());
   }
@@ -6322,17 +6322,17 @@ class ci {
   }
   // Export all sections as JSON with File objects
   async exportAllSectionsAsJSON(o, a, l, s, g = "png", h = null) {
-    var m, B;
-    const n = [], c = [], F = {};
-    for (const T of a) {
-      const p = T.sectionName, v = o[p];
+    var u, B;
+    const n = [], c = [], C = {};
+    for (const j of a) {
+      const p = j.sectionName, v = o[p];
       if (!v || !v.elements || v.elements.length === 0) {
         console.log(`Skipping section ${p} - no elements`);
         continue;
       }
-      let X = T.image || T.sectionImage;
-      h && h.sectionImage && (T.sectionName === "Front" || h.sections && Object.keys(h.sections).includes(T.sectionName)) && (X = h.sectionImage);
-      const j = {
+      let X = j.image || j.sectionImage;
+      h && h.sectionImage && (j.sectionName === "Front" || h.sections && Object.keys(h.sections).includes(j.sectionName)) && (X = h.sectionImage);
+      const T = {
         ...v,
         // Include background information using the determined image
         backgroundImage: X,
@@ -6344,10 +6344,10 @@ class ci {
         canvasWidth: l,
         canvasHeight: s
       };
-      F[p] = j;
+      C[p] = T;
       const O = await this.exportSectionAsBlob(
         v,
-        T,
+        j,
         l,
         s,
         g,
@@ -6368,7 +6368,7 @@ class ci {
       }
       const k = await this.exportSectionAsBlob(
         v,
-        T,
+        j,
         l,
         s,
         g,
@@ -6388,13 +6388,13 @@ class ci {
         });
       }
     }
-    let I = ((m = a[0]) == null ? void 0 : m.image) || ((B = a[0]) == null ? void 0 : B.sectionImage);
+    let I = ((u = a[0]) == null ? void 0 : u.image) || ((B = a[0]) == null ? void 0 : B.sectionImage);
     if (h && h.sectionImage) {
-      const T = a[0];
-      T && (T.sectionName === "Front" || h.sections && Object.keys(h.sections).includes(T.sectionName)) && (I = h.sectionImage);
+      const j = a[0];
+      j && (j.sectionName === "Front" || h.sections && Object.keys(h.sections).includes(j.sectionName)) && (I = h.sectionImage);
     }
     const E = {
-      sections: F,
+      sections: C,
       canvasWidth: l,
       canvasHeight: s,
       sectionImage: I,
@@ -6410,10 +6410,10 @@ class ci {
       },
       // Include product information for complete context
       product: {
-        sections: a.map((T) => ({
-          sectionName: T.sectionName || T.id,
-          sectionImage: T.image || T.sectionImage,
-          id: T.id || T.sectionName
+        sections: a.map((j) => ({
+          sectionName: j.sectionName || j.id,
+          sectionImage: j.image || j.sectionImage,
+          id: j.id || j.sectionName
         }))
       }
     };
@@ -6430,10 +6430,10 @@ class ci {
         let c = a.image || a.sectionImage;
         if (n && n.sectionImage && (a.sectionName === "Front" || n.sections && Object.keys(n.sections).includes(a.sectionName)) && (c = n.sectionImage), c)
           try {
-            const F = await this.loadImage(c);
-            await this.processImageColor(F, o.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
-          } catch (F) {
-            console.warn("Failed to load background image:", F);
+            const C = await this.loadImage(c);
+            await this.processImageColor(C, o.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
+          } catch (C) {
+            console.warn("Failed to load background image:", C);
           }
       } else
         this.ctx.clearRect(0, 0, l, s);
@@ -6447,9 +6447,9 @@ class ci {
     }
   }
   async exportCurrentSectionAsJSON(o, a = "png", l = null) {
-    var B, T, p;
+    var B, j, p;
     const s = ((B = o.activeSection) == null ? void 0 : B.sectionName) || "main";
-    let g = ((T = o.activeSection) == null ? void 0 : T.sectionImage) || ((p = o.activeSection) == null ? void 0 : p.image);
+    let g = ((j = o.activeSection) == null ? void 0 : j.sectionImage) || ((p = o.activeSection) == null ? void 0 : p.image);
     l && l.sectionImage && (s === "Front" || l.sections && Object.keys(l.sections).includes(s)) && (g = l.sectionImage);
     const h = {
       elements: o.elements,
@@ -6468,7 +6468,7 @@ class ci {
       sectionName: s,
       image: g,
       sectionImage: g
-    }, c = [], F = [], I = await this.exportSectionAsBlob(
+    }, c = [], C = [], I = await this.exportSectionAsBlob(
       h,
       n,
       o.canvasWidth,
@@ -6505,12 +6505,12 @@ class ci {
         `${s}-print.${a}`,
         `image/${a}`
       );
-      F.push({
+      C.push({
         sectionName: s,
         sectionImage: v
       });
     }
-    const m = {
+    const u = {
       sections: { [s]: h },
       canvasWidth: o.canvasWidth,
       canvasHeight: o.canvasHeight,
@@ -6538,12 +6538,12 @@ class ci {
     };
     return {
       fullDesign: c,
-      printReady: F,
-      designFile: JSON.stringify(m)
+      printReady: C,
+      designFile: JSON.stringify(u)
     };
   }
 }
-class di {
+class fi {
   constructor(o = "localStorage") {
     this.storage = o === "sessionStorage" ? sessionStorage : localStorage, this.STORAGE_PREFIX = "mypixia_canvas_", this.DESIGNS_LIST_KEY = "mypixia_saved_designs";
   }
@@ -6733,7 +6733,7 @@ class di {
     return "Unknown";
   }
 }
-const fi = $e((f, o) => {
+const hi = He((f, o) => {
   const {
     theme: a = {
       primaryColor: "#000000",
@@ -6764,19 +6764,19 @@ const fi = $e((f, o) => {
       ]
     },
     initFile: g
-  } = f, [h, n] = N([]), [c, F] = N(null), [I, E] = N(!1), [m, B] = N(!1), [T, p] = N(!1), [v, X] = N({ x: 0, y: 0 }), [j, O] = N(null), [k, Z] = N(800), [W, xt] = N(600), [Q, ft] = N(1), [_, st] = N(s.colorSettings[0]), [M, nt] = N(!1), [tt, ct] = N(!0), [Y, P] = N(!0), [C, et] = N(s.sections[0]), [y, D] = N(!1), [L, H] = N({}), [G, it] = N([]), [J, q] = N(-1), [U] = N(new di("localStorage")), K = gt(null), kt = gt(null), pt = gt(null), wt = gt(null), Ot = gt(null), Bt = gt(new ci()), zt = gt(!1), [yt, ce] = N(null), lt = at(() => {
+  } = f, [h, n] = N([]), [c, C] = N(null), [I, E] = N(!1), [u, B] = N(!1), [j, p] = N(!1), [v, X] = N({ x: 0, y: 0 }), [T, O] = N(null), [k, Z] = N(800), [W, xt] = N(600), [Q, ft] = N(1), [G, st] = N(s.colorSettings[0]), [M, nt] = N(!1), [tt, ct] = N(!0), [Y, P] = N(!0), [F, et] = N(s.sections[0]), [y, D] = N(!1), [L, $] = N({}), [_, it] = N([]), [J, q] = N(-1), [U] = N(new fi("localStorage")), K = gt(null), kt = gt(null), pt = gt(null), wt = gt(null), Ot = gt(null), Bt = gt(new di()), zt = gt(!1), [yt, ce] = N(null), lt = at(() => {
     const e = {
       elements: JSON.parse(JSON.stringify(h)),
       selectedElement: c ? { ...c } : null,
       timestamp: Date.now()
-    }, t = G.slice(0, J + 1);
+    }, t = _.slice(0, J + 1);
     t.push(e), t.length > 50 ? t.shift() : q(J + 1), it(t);
-  }, [h, c, G, J]), St = at(() => ({
+  }, [h, c, _, J]), St = at(() => ({
     elements: h,
     canvasWidth: k,
     canvasHeight: W,
-    selectedColor: _,
-    activeSection: C,
+    selectedColor: G,
+    activeSection: F,
     product: s,
     sectionDesigns: L,
     zoomLevel: Q,
@@ -6785,21 +6785,21 @@ const fi = $e((f, o) => {
     selectedElement: c ? { ...c } : null,
     canvasRef: K
     // Include reference for thumbnail generation
-  }), [h, k, W, _, C, s, L, Q, M, Y, c]);
+  }), [h, k, W, G, F, s, L, Q, M, Y, c]);
   rt(() => {
     const t = setTimeout(async () => {
-      if (h.length === 0 && G.length <= 1) {
+      if (h.length === 0 && _.length <= 1) {
         if (g)
           try {
             const A = await fetch(g);
             if (A.ok) {
               const z = await A.text();
               if (z.trim()) {
-                const $ = JSON.parse(z.trim());
-                if (console.log("Loading design from file:", $), ce($), $.sections && typeof $.sections == "object") {
-                  const dt = Object.keys($.sections)[0], ot = $.sections[dt];
+                const H = JSON.parse(z.trim());
+                if (console.log("Loading design from file:", H), ce(H), H.sections && typeof H.sections == "object") {
+                  const dt = Object.keys(H.sections)[0], ot = H.sections[dt];
                   if (ot && ot.elements) {
-                    n(ot.elements || []), Z(ot.canvasWidth || 800), xt(ot.canvasHeight || 600), st(ot.selectedColor || s.colorSettings[0]), ft(ot.zoomLevel || 1), nt(ot.showGrid || !1), P(ot.snapToGrid || !0), F(null), $.sections && H($.sections);
+                    n(ot.elements || []), Z(ot.canvasWidth || 800), xt(ot.canvasHeight || 600), st(ot.selectedColor || s.colorSettings[0]), ft(ot.zoomLevel || 1), nt(ot.showGrid || !1), P(ot.snapToGrid || !0), C(null), H.sections && $(H.sections);
                     const Rt = s.sections.find((Dt) => Dt.sectionName === dt);
                     Rt && et(Rt), it([]), q(-1), setTimeout(() => {
                       lt();
@@ -6837,7 +6837,7 @@ const fi = $e((f, o) => {
           rotation: 0,
           opacity: 1
         };
-        n([R]), F(R), setTimeout(() => {
+        n([R]), C(R), setTimeout(() => {
           lt();
         }, 100);
       }
@@ -6847,12 +6847,12 @@ const fi = $e((f, o) => {
   const Wt = at((e = "png", t = !0) => {
     const r = St();
     return s.sections, Bt.current.exportAllSections(
-      { [(C == null ? void 0 : C.sectionName) || "main"]: r },
+      { [(F == null ? void 0 : F.sectionName) || "main"]: r },
       [{
-        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
+        id: (F == null ? void 0 : F.sectionName) || "main",
+        sectionName: (F == null ? void 0 : F.sectionName) || "main",
+        image: F == null ? void 0 : F.sectionImage,
+        sectionImage: F == null ? void 0 : F.sectionImage
       }],
       k,
       W,
@@ -6860,7 +6860,7 @@ const fi = $e((f, o) => {
       t,
       yt
     );
-  }, [St, s.sections, C, k, W]), de = [
+  }, [St, s.sections, F, k, W]), de = [
     "Arial",
     "Helvetica",
     "Times New Roman",
@@ -6884,10 +6884,10 @@ const fi = $e((f, o) => {
     const e = document.createElement("canvas");
     e.width = k, e.height = W, Ot.current = e;
   }, [k, W]), rt(() => {
-    G.length === 0 && lt();
+    _.length === 0 && lt();
   }, []);
-  const At = (e, t, r, d, x, u) => {
-    e.beginPath(), e.moveTo(t + u, r), e.lineTo(t + d - u, r), e.quadraticCurveTo(t + d, r, t + d, r + u), e.lineTo(t + d, r + x - u), e.quadraticCurveTo(t + d, r + x, t + d - u, r + x), e.lineTo(t + u, r + x), e.quadraticCurveTo(t, r + x, t, r + x - u), e.lineTo(t, r + u), e.quadraticCurveTo(t, r, t + u, r), e.closePath();
+  const At = (e, t, r, d, x, m) => {
+    e.beginPath(), e.moveTo(t + m, r), e.lineTo(t + d - m, r), e.quadraticCurveTo(t + d, r, t + d, r + m), e.lineTo(t + d, r + x - m), e.quadraticCurveTo(t + d, r + x, t + d - m, r + x), e.lineTo(t + m, r + x), e.quadraticCurveTo(t, r + x, t, r + x - m), e.lineTo(t, r + m), e.quadraticCurveTo(t, r, t + m, r), e.closePath();
   }, Qt = (e, t) => {
     if (!t.isIcon)
       return {
@@ -6899,11 +6899,11 @@ const fi = $e((f, o) => {
         cy: t.y + t.height / 2
       };
     e.save(), e.font = `${t.fontStyle || ""} ${t.fontWeight || ""} ${t.fontSize}px ${t.fontFamily}`, e.textBaseline = "alphabetic", e.textAlign = "left";
-    const r = e.measureText(t.text), d = r.actualBoundingBoxAscent ?? t.fontSize * 0.8, x = r.actualBoundingBoxDescent ?? t.fontSize * 0.2, u = r.actualBoundingBoxLeft ?? 0, w = r.actualBoundingBoxRight ?? r.width, S = u + w, b = d + x, R = t.x, A = t.y, z = R - S / 2 - u, $ = A - b / 2 - d;
-    return e.restore(), { x: z, y: $, width: S, height: b, cx: R, cy: A };
+    const r = e.measureText(t.text), d = r.actualBoundingBoxAscent ?? t.fontSize * 0.8, x = r.actualBoundingBoxDescent ?? t.fontSize * 0.2, m = r.actualBoundingBoxLeft ?? 0, w = r.actualBoundingBoxRight ?? r.width, S = m + w, b = d + x, R = t.x, A = t.y, z = R - S / 2 - m, H = A - b / 2 - d;
+    return e.restore(), { x: z, y: H, width: S, height: b, cx: R, cy: A };
   }, fe = (e, t) => {
     if (!t) return;
-    const r = 8, d = 8, x = 4, u = 30, w = Qt(e, t), S = t.isIcon ? Math.max(r, 12) : r, b = {
+    const r = 8, d = 8, x = 4, m = 30, w = Qt(e, t), S = t.isIcon ? Math.max(r, 12) : r, b = {
       x: -w.width / 2 - S,
       y: -w.height / 2 - S,
       w: w.width + S * 2,
@@ -6928,29 +6928,29 @@ const fi = $e((f, o) => {
       { x: b.x + b.w, y: b.y },
       { x: b.x + b.w, y: b.y + b.h },
       { x: b.x, y: b.y + b.h }
-    ].forEach(($) => {
+    ].forEach((H) => {
       e.fillStyle = "rgba(0,0,0,.2)", e.fillRect(
-        $.x - d / 2 + 1,
-        $.y - d / 2 + 1,
+        H.x - d / 2 + 1,
+        H.y - d / 2 + 1,
         d,
         d
       ), e.fillStyle = "#ffffff", e.fillRect(
-        $.x - d / 2,
-        $.y - d / 2,
+        H.x - d / 2,
+        H.y - d / 2,
         d,
         d
       ), e.strokeStyle = "#3b82f6", e.lineWidth = 1, e.strokeRect(
-        $.x - d / 2,
-        $.y - d / 2,
+        H.x - d / 2,
+        H.y - d / 2,
         d,
         d
       );
     });
-    const A = 0, z = b.y - u;
+    const A = 0, z = b.y - m;
     e.strokeStyle = "#3b82f6", e.lineWidth = 1, e.setLineDash([2, 2]), e.beginPath(), e.moveTo(A, z + 12), e.lineTo(A, b.y), e.stroke(), e.setLineDash([]), e.beginPath(), e.arc(A, z, 12, 0, 2 * Math.PI), e.fillStyle = "#f59e0b", e.fill(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.stroke(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.beginPath(), e.arc(A, z, 6, -Math.PI / 2, Math.PI, !1), e.stroke(), e.beginPath(), e.moveTo(A - 6, z), e.lineTo(A - 3, z - 3), e.lineTo(A - 3, z + 3), e.closePath(), e.fillStyle = "#ffffff", e.fill(), e.restore();
   }, he = (e, t) => {
     if (!t) return [];
-    const r = Qt(e, t), d = t.isIcon ? Math.max(8, 12) : 8, x = 8, u = 30, w = (t.rotation || 0) * Math.PI / 180, S = {
+    const r = Qt(e, t), d = t.isIcon ? Math.max(8, 12) : 8, x = 8, m = 30, w = (t.rotation || 0) * Math.PI / 180, S = {
       x: -r.width / 2 - d,
       y: -r.height / 2 - d,
       w: r.width + d * 2,
@@ -6960,7 +6960,7 @@ const fi = $e((f, o) => {
       { x: S.x + S.w, y: S.y, type: "ne-resize" },
       { x: S.x + S.w, y: S.y + S.h, type: "se-resize" },
       { x: S.x, y: S.y + S.h, type: "sw-resize" },
-      { x: 0, y: S.y - u, type: "rotate" }
+      { x: 0, y: S.y - m, type: "rotate" }
     ], R = Math.cos(w), A = Math.sin(w);
     return b.map((z) => ({
       x: r.cx + (z.x * R - z.y * A),
@@ -6972,8 +6972,8 @@ const fi = $e((f, o) => {
     if (!r) return null;
     const d = K.current;
     if (!d) return null;
-    const x = d.getContext("2d"), u = he(x, r);
-    for (const w of u) {
+    const x = d.getContext("2d"), m = he(x, r);
+    for (const w of m) {
       const S = e - w.x, b = t - w.y;
       if (Math.sqrt(S * S + b * b) <= w.size / 2)
         return w.type;
@@ -6981,39 +6981,39 @@ const fi = $e((f, o) => {
     return null;
   }, Ft = at(() => {
     if (J > 0) {
-      const e = G[J - 1];
-      n(e.elements), F(e.selectedElement), q(J - 1);
+      const e = _[J - 1];
+      n(e.elements), C(e.selectedElement), q(J - 1);
     }
-  }, [G, J]), bt = at(() => {
-    if (J < G.length - 1) {
-      const e = G[J + 1];
-      n(e.elements), F(e.selectedElement), q(J + 1);
+  }, [_, J]), bt = at(() => {
+    if (J < _.length - 1) {
+      const e = _[J + 1];
+      n(e.elements), C(e.selectedElement), q(J + 1);
     }
-  }, [G, J]), ut = (e) => Y ? Math.round(e / It) * It : e;
+  }, [_, J]), mt = (e) => Y ? Math.round(e / It) * It : e;
   rt(() => {
-    if (C != null && C.sectionImage) {
+    if (F != null && F.sectionImage) {
       pt.current = null, wt.current = null;
       const e = K.current;
       if (e && e.getContext("2d").clearRect(0, 0, k, W), g && !yt)
         return;
       const t = new Image();
       t.crossOrigin = "anonymous", t.onload = () => {
-        pt.current = t, Xt(t, _);
+        pt.current = t, Xt(t, G);
       }, t.onerror = () => {
-        console.error("Failed to load background image:", C.sectionImage), V();
+        console.error("Failed to load background image:", F.sectionImage), V();
       };
-      let r = C.sectionImage;
-      yt && yt.sectionImage && (C.sectionName === "Front" || yt.sections && Object.keys(yt.sections).includes(C.sectionName)) && (r = yt.sectionImage), t.src = r;
+      let r = F.sectionImage;
+      yt && yt.sectionImage && (F.sectionName === "Front" || yt.sections && Object.keys(yt.sections).includes(F.sectionName)) && (r = yt.sectionImage), t.src = r;
     } else
       pt.current = null, wt.current = null, V();
-  }, [C, _, yt]), rt(() => {
+  }, [F, G, yt]), rt(() => {
     const e = (t) => {
       const r = document.activeElement;
       if (!(r && (r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.tagName === "SELECT" || r.isContentEditable))) {
         if ((t.key === "Delete" || t.key === "Backspace") && c && !l) {
           t.preventDefault();
           const x = c;
-          n((u) => u.filter((w) => w.id !== x.id)), F(null), lt();
+          n((m) => m.filter((w) => w.id !== x.id)), C(null), lt();
         }
         if (t.ctrlKey || t.metaKey)
           switch (t.key) {
@@ -7073,10 +7073,10 @@ const fi = $e((f, o) => {
         Ce(e, t);
         break;
       case "pentagon":
-        je(e, t);
+        Te(e, t);
         break;
       case "heart":
-        Te(e, t);
+        je(e, t);
         break;
       case "oval":
         Ne(e, t);
@@ -7088,10 +7088,10 @@ const fi = $e((f, o) => {
         Re(e, t);
         break;
       case "qrcode":
-        ue(e, t);
+        me(e, t);
         break;
       case "barcode":
-        me(e, t);
+        ue(e, t);
         break;
       case "sticker":
         De(e, t);
@@ -7104,7 +7104,7 @@ const fi = $e((f, o) => {
         break;
     }
     e.restore();
-  }, me = (e, t) => {
+  }, ue = (e, t) => {
     if (t.imageObject)
       e.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
@@ -7124,7 +7124,7 @@ const fi = $e((f, o) => {
         );
       }, r.src = t.src, e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading...", t.width / 2, t.height / 2);
     } else t.imageLoading ? (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading...", t.width / 2, t.height / 2)) : (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("No Barcode", t.width / 2, t.height / 2));
-  }, ue = (e, t) => {
+  }, me = (e, t) => {
     if (t.imageObject)
       e.drawImage(t.imageObject, 0, 0, t.width, t.height);
     else if (t.src && !t.imageLoading) {
@@ -7161,22 +7161,22 @@ const fi = $e((f, o) => {
       }
     e.font = `${t.fontStyle || "normal"} ${t.fontWeight || "normal"} ${t.fontSize || 20}px ${t.fontFamily || "Arial"}`, e.fillStyle = t.fill || "#000000", e.textAlign = t.textAlign || "left", e.textBaseline = "top", t.opacity !== void 0 && (e.globalAlpha = t.opacity), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth);
     const d = r.split(`
-`), x = (t.fontSize || 20) * (t.lineHeight || 1.2), u = Math.max(...d.map((S) => e.measureText(S).width)), w = d.length * x;
+`), x = (t.fontSize || 20) * (t.lineHeight || 1.2), m = Math.max(...d.map((S) => e.measureText(S).width)), w = d.length * x;
     if (t.backgroundColor && t.backgroundColor !== "transparent") {
       e.fillStyle = t.backgroundColor;
       const S = t.backgroundPadding || 4;
       e.fillRect(
         -S,
         -S,
-        u + S * 2,
+        m + S * 2,
         w + S * 2
       ), e.fillStyle = t.fill || "#000000";
     }
     d.forEach((S, b) => {
       const R = b * x, A = e.measureText(S).width;
       t.stroke && t.strokeWidth > 0 && e.strokeText(S, 0, R), e.fillText(S, 0, R);
-      const z = t.fontSize || 20, $ = t.decorationColor || t.fill || "#000000", dt = Math.max(1, z / 20);
-      if (e.strokeStyle = $, e.lineWidth = dt, t.textDecoration === "underline" || t.underline) {
+      const z = t.fontSize || 20, H = t.decorationColor || t.fill || "#000000", dt = Math.max(1, z / 20);
+      if (e.strokeStyle = H, e.lineWidth = dt, t.textDecoration === "underline" || t.underline) {
         const ot = R + z + 2;
         e.beginPath(), e.moveTo(0, ot), e.lineTo(A, ot), e.stroke();
       }
@@ -7214,10 +7214,10 @@ const fi = $e((f, o) => {
     const r = t.width / 2;
     t.height / 2, e.beginPath(), e.moveTo(r, 0), e.lineTo(0, t.height), e.lineTo(t.width, t.height), e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, ke = (e, t) => {
-    const r = t.width / 2, d = t.height / 2, x = Math.min(t.width, t.height) / 2, u = x * 0.4, w = t.numPoints || 5;
+    const r = t.width / 2, d = t.height / 2, x = Math.min(t.width, t.height) / 2, m = x * 0.4, w = t.numPoints || 5;
     e.beginPath();
     for (let S = 0; S < w * 2; S++) {
-      const b = S % 2 === 0 ? x : u, R = S * Math.PI / w, A = r + Math.cos(R) * b, z = d + Math.sin(R) * b;
+      const b = S % 2 === 0 ? x : m, R = S * Math.PI / w, A = r + Math.cos(R) * b, z = d + Math.sin(R) * b;
       S === 0 ? e.moveTo(A, z) : e.lineTo(A, z);
     }
     e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
@@ -7228,57 +7228,57 @@ const fi = $e((f, o) => {
     const r = t.width / 2, d = t.height / 2;
     e.beginPath(), e.moveTo(r, 0), e.lineTo(t.width, d), e.lineTo(r, t.height), e.lineTo(0, d), e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Ce = (e, t) => {
-    const r = t.width / 2, d = t.height / 2, x = Math.min(t.width, t.height) / 2, u = 6;
+    const r = t.width / 2, d = t.height / 2, x = Math.min(t.width, t.height) / 2, m = 6;
     e.beginPath();
-    for (let w = 0; w < u; w++) {
-      const S = w * 2 * Math.PI / u - Math.PI / 2, b = r + x * Math.cos(S), R = d + x * Math.sin(S);
+    for (let w = 0; w < m; w++) {
+      const S = w * 2 * Math.PI / m - Math.PI / 2, b = r + x * Math.cos(S), R = d + x * Math.sin(S);
       w === 0 ? e.moveTo(b, R) : e.lineTo(b, R);
     }
     e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
-  }, je = (e, t) => {
-    const r = t.width / 2, d = t.height / 2, x = Math.min(t.width, t.height) / 2, u = 5;
+  }, Te = (e, t) => {
+    const r = t.width / 2, d = t.height / 2, x = Math.min(t.width, t.height) / 2, m = 5;
     e.beginPath();
-    for (let w = 0; w < u; w++) {
-      const S = w * 2 * Math.PI / u - Math.PI / 2, b = r + x * Math.cos(S), R = d + x * Math.sin(S);
+    for (let w = 0; w < m; w++) {
+      const S = w * 2 * Math.PI / m - Math.PI / 2, b = r + x * Math.cos(S), R = d + x * Math.sin(S);
       w === 0 ? e.moveTo(b, R) : e.lineTo(b, R);
     }
     e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
-  }, Te = (e, t) => {
-    const r = t.width, d = t.height, x = 0, u = 0;
+  }, je = (e, t) => {
+    const r = t.width, d = t.height, x = 0, m = 0;
     e.beginPath();
     const w = d * 0.3;
-    e.moveTo(x + r / 2, u + w), e.bezierCurveTo(
+    e.moveTo(x + r / 2, m + w), e.bezierCurveTo(
       x + r / 2,
-      u,
+      m,
       x,
-      u,
+      m,
       x,
-      u + w
+      m + w
     ), e.bezierCurveTo(
       x,
-      u + (d + w) / 2,
+      m + (d + w) / 2,
       x + r / 2,
-      u + (d + w) / 2,
+      m + (d + w) / 2,
       x + r / 2,
-      u + d
+      m + d
     ), e.bezierCurveTo(
       x + r / 2,
-      u + (d + w) / 2,
+      m + (d + w) / 2,
       x + r,
-      u + (d + w) / 2,
+      m + (d + w) / 2,
       x + r,
-      u + w
+      m + w
     ), e.bezierCurveTo(
       x + r,
-      u,
+      m,
       x + r / 2,
-      u,
+      m,
       x + r / 2,
-      u + w
+      m + w
     ), e.closePath(), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
   }, Ne = (e, t) => {
-    const r = t.width / 2, d = t.height / 2, x = t.width / 2, u = t.height / 2;
-    e.beginPath(), e.ellipse(r, d, x, u, 0, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
+    const r = t.width / 2, d = t.height / 2, x = t.width / 2, m = t.height / 2;
+    e.beginPath(), e.ellipse(r, d, x, 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());
   }, Ie = (e, t) => {
     const r = Math.min(t.width, t.height) * 0.1;
     At(e, 0, 0, t.width, t.height, r), t.fill && t.fill !== "transparent" && (e.fillStyle = t.fill, e.fill()), t.stroke && t.strokeWidth > 0 && (e.strokeStyle = t.stroke, e.lineWidth = t.strokeWidth, e.stroke());
@@ -7343,13 +7343,13 @@ const fi = $e((f, o) => {
     e.fillStyle = "#f9f9f9", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ddd", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#999", e.font = "24px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("🧵", t.width / 2, t.height / 2 - 10), e.fillStyle = "#666", e.font = "12px Arial", e.fillText(r, t.width / 2, t.height / 2 + 15);
   }, Ht = (e, t, r) => {
     if (!r) return !1;
-    const d = r.x + r.width / 2, x = r.y + r.height / 2, u = e - d, w = t - x, S = -(r.rotation || 0) * Math.PI / 180, b = Math.cos(S), R = Math.sin(S), A = u * b - w * R, z = u * R + w * b, $ = r.width / 2, dt = r.height / 2;
-    return A >= -$ && A <= $ && z >= -dt && z <= dt;
+    const d = r.x + r.width / 2, x = r.y + r.height / 2, m = e - d, w = t - x, S = -(r.rotation || 0) * Math.PI / 180, b = Math.cos(S), R = Math.sin(S), A = m * b - w * R, z = m * R + w * b, H = r.width / 2, dt = r.height / 2;
+    return A >= -H && A <= H && z >= -dt && z <= dt;
   }, Be = at(() => {
-    (I || m || T) && lt(), E(!1), B(!1), p(!1), O(null);
+    (I || u || j) && lt(), E(!1), B(!1), p(!1), O(null);
     const e = K.current;
     e && (e.style.cursor = "default");
-  }, [I, m, T, lt]);
+  }, [I, u, j, lt]);
   rt(() => {
     const e = (t) => {
       if (l) return;
@@ -7357,22 +7357,22 @@ const fi = $e((f, o) => {
       if (!(r && (r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.tagName === "SELECT" || r.isContentEditable)) && ((t.ctrlKey || t.metaKey) && (t.key === "z" && !t.shiftKey ? (t.preventDefault(), Ft()) : (t.key === "z" && t.shiftKey || t.key === "y") && (t.preventDefault(), bt())), (t.key === "Delete" || t.key === "Backspace") && c && (Mt(c.id), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "d" && c && (_t(c.id), t.preventDefault()), c && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key))) {
         t.preventDefault();
         const x = t.shiftKey ? 10 : 1;
-        let u = {};
+        let m = {};
         switch (t.key) {
           case "ArrowUp":
-            u.y = c.y - x;
+            m.y = c.y - x;
             break;
           case "ArrowDown":
-            u.y = c.y + x;
+            m.y = c.y + x;
             break;
           case "ArrowLeft":
-            u.x = c.x - x;
+            m.x = c.x - x;
             break;
           case "ArrowRight":
-            u.x = c.x + x;
+            m.x = c.x + x;
             break;
         }
-        Gt(c.id, u), lt();
+        Gt(c.id, m), lt();
       }
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
@@ -7432,13 +7432,13 @@ const fi = $e((f, o) => {
         console.warn(`Unknown element type: ${e}`);
         return;
     }
-    n((d) => [...d, r]), F(r), lt();
+    n((d) => [...d, r]), C(r), lt();
   }, Gt = (e, t) => {
     n((r) => r.map(
       (d) => d.id === e ? { ...d, ...t } : d
-    )), c && c.id === e && F((r) => ({ ...r, ...t }));
+    )), c && c.id === e && C((r) => ({ ...r, ...t }));
   }, Mt = at(() => {
-    c && (n((e) => e.filter((t) => t.id !== c.id)), F(null), lt());
+    c && (n((e) => e.filter((t) => t.id !== c.id)), C(null), lt());
   }, [c, lt]), _t = (e) => {
     const t = h.find((r) => r.id === e);
     if (t) {
@@ -7448,28 +7448,39 @@ const fi = $e((f, o) => {
         x: t.x + 20,
         y: t.y + 20
       };
-      n((d) => [...d, r]), F(r), lt();
+      n((d) => [...d, r]), C(r), lt();
     }
   }, Yt = (e, t) => {
-    const r = h.findIndex((u) => u.id === e);
+    const r = h.findIndex((m) => m.id === e);
     if (r === -1) return;
     const d = [...h], x = d[r];
     t === "up" && r < d.length - 1 ? (d[r] = d[r + 1], d[r + 1] = x) : t === "down" && r > 0 ? (d[r] = d[r - 1], d[r - 1] = x) : t === "top" ? (d.splice(r, 1), d.push(x)) : t === "bottom" && (d.splice(r, 1), d.unshift(x)), n(d), lt();
   };
   at(() => {
-    C && H((e) => ({
+    F && $((e) => ({
       ...e,
-      [C.sectionName]: {
+      [F.sectionName]: {
         elements: [...h],
-        selectedColor: _
+        selectedColor: G
       }
     }));
-  }, [C, h, _]);
-  const [, We] = He((e) => e + 1, 0);
+  }, [F, h, G]);
+  const [, We] = Ge((e) => e + 1, 0);
   setTimeout(() => {
     We();
-  }, 20), Ge(o, () => ({
+  }, 20);
+  const Me = at(() => {
+    F && $((e) => ({
+      ...e,
+      [F.sectionName]: {
+        elements: [...h],
+        selectedColor: G
+      }
+    }));
+  }, [F, h, G]);
+  _e(o, () => ({
     handleSectionChange: qt,
+    flushCurrentSectionDesign: Me,
     // Export methods that return download-ready data
     exportPrintReady: async (e = "png") => await Wt(e, !1),
     exportFullDesign: async (e = "png") => await Wt(e, !0),
@@ -7480,24 +7491,23 @@ const fi = $e((f, o) => {
     // NEW: Export methods that return JSON with File objects
     exportAllDesignsAsJSON: async (e = "png") => {
       try {
-        const t = St();
-        console.log("canvas data to export: ", t);
-        const r = {}, d = (C == null ? void 0 : C.sectionName) || "main";
-        r[d] = {
+        const t = St(), r = (F == null ? void 0 : F.sectionName) || "main", d = {
           elements: t.elements,
           selectedColor: t.selectedColor,
           canvasWidth: t.canvasWidth,
           canvasHeight: t.canvasHeight
-        }, t.sectionDesigns && typeof t.sectionDesigns == "object" && Object.assign(r, t.sectionDesigns);
-        const x = s.sections && s.sections.length > 0 ? s.sections : [{
-          id: d,
-          sectionName: d,
-          image: C == null ? void 0 : C.sectionImage,
-          sectionImage: C == null ? void 0 : C.sectionImage
+        }, x = {
+          ...t.sectionDesigns || {},
+          [r]: d
+        }, m = s.sections && s.sections.length > 0 ? s.sections : [{
+          id: r,
+          sectionName: r,
+          image: F == null ? void 0 : F.sectionImage,
+          sectionImage: F == null ? void 0 : F.sectionImage
         }];
         return await Bt.current.exportAllSectionsAsJSON(
-          r,
           x,
+          m,
           k,
           W,
           e,
@@ -7516,7 +7526,7 @@ const fi = $e((f, o) => {
       }
     }
   }));
-  const mt = gt(null), Lt = gt(!1), V = at(() => {
+  const ut = gt(null), Lt = gt(!1), V = at(() => {
     const e = K.current;
     if (!e || Lt.current) return;
     Lt.current = !0;
@@ -7525,8 +7535,8 @@ const fi = $e((f, o) => {
       t.save(), t.globalAlpha = r.opacity || 1, ye(t, r), t.restore();
     }), c && fe(t, c), Lt.current = !1;
   }, [h, c, k, W, M]), vt = at(() => {
-    mt.current && cancelAnimationFrame(mt.current), mt.current = requestAnimationFrame(() => {
-      V(), mt.current = null;
+    ut.current && cancelAnimationFrame(ut.current), ut.current = requestAnimationFrame(() => {
+      V(), ut.current = null;
     });
   }, [V]);
   rt(() => {
@@ -7534,15 +7544,15 @@ const fi = $e((f, o) => {
   }, [h, c, k, W, M, vt]), rt(() => {
     wt.current && vt();
   }, [wt.current, vt]), rt(() => () => {
-    mt.current && cancelAnimationFrame(mt.current);
+    ut.current && cancelAnimationFrame(ut.current);
   }, []);
   const Pt = at(() => {
-    V(), (I || m || T) && (mt.current = requestAnimationFrame(Pt));
-  }, [V, I, m, T]);
+    V(), (I || u || j) && (ut.current = requestAnimationFrame(Pt));
+  }, [V, I, u, j]);
   rt(() => {
-    I || m || T ? Pt() : (mt.current && (cancelAnimationFrame(mt.current), mt.current = null), vt());
-  }, [I, m, T, Pt, vt]);
-  const Me = at((e) => {
+    I || u || j ? Pt() : (ut.current && (cancelAnimationFrame(ut.current), ut.current = null), vt());
+  }, [I, u, j, Pt, vt]);
+  const Le = at((e) => {
     if (l) return;
     const r = K.current.getBoundingClientRect(), d = (e.clientX - r.left) / Q, x = (e.clientY - r.top) / Q;
     if (X({ x: d, y: x }), c) {
@@ -7569,58 +7579,58 @@ const fi = $e((f, o) => {
         return;
       }
     }
-    let u = null;
+    let m = null;
     for (let w = h.length - 1; w >= 0; w--)
       if (Ht(d, x, h[w])) {
-        u = h[w];
+        m = h[w];
         break;
       }
-    u ? (F(u), E(!0), X({
+    m ? (C(m), E(!0), X({
       x: d,
       y: x,
-      offsetX: d - u.x,
-      offsetY: x - u.y
-    })) : F(null), V();
-  }, [l, Q, c, h, V]), Le = at((e) => {
+      offsetX: d - m.x,
+      offsetY: x - m.y
+    })) : C(null), V();
+  }, [l, Q, c, h, V]), Pe = at((e) => {
     if (l) return;
     const t = K.current, r = t.getBoundingClientRect(), d = (e.clientX - r.left) / Q, x = (e.clientY - r.top) / Q;
-    if (c && !I && !m && !T) {
-      const u = $t(d, x, c);
-      u ? u === "rotate" ? t.style.cursor = "grab" : t.style.cursor = u : Ht(d, x, c) ? t.style.cursor = "move" : t.style.cursor = "default";
+    if (c && !I && !u && !j) {
+      const m = $t(d, x, c);
+      m ? m === "rotate" ? t.style.cursor = "grab" : t.style.cursor = m : Ht(d, x, c) ? t.style.cursor = "move" : t.style.cursor = "default";
     } else
       t.style.cursor = I ? "grabbing" : "default";
-    if (T && c) {
-      const u = c.x + c.width / 2, w = c.y + c.height / 2, b = Math.atan2(x - w, d - u) * 180 / Math.PI - v.initialAngle;
+    if (j && c) {
+      const m = c.x + c.width / 2, w = c.y + c.height / 2, b = Math.atan2(x - w, d - m) * 180 / Math.PI - v.initialAngle;
       let R = v.initialRotation + b;
       e.shiftKey && (R = Math.round(R / 15) * 15), R = (R % 360 + 360) % 360, n(
         (A) => A.map(
           (z) => z.id === c.id ? { ...z, rotation: R } : z
         )
-      ), F((A) => ({ ...A, rotation: R })), V();
+      ), C((A) => ({ ...A, rotation: R })), V();
       return;
     }
-    if (m && c && j) {
-      const u = d - v.x, w = x - v.y;
+    if (u && c && T) {
+      const m = d - v.x, w = x - v.y;
       let S = v.initialWidth, b = v.initialHeight, R = v.initialX, A = v.initialY;
-      switch (j) {
+      switch (T) {
         case "se-resize":
-          S = Math.max(20, v.initialWidth + u), b = Math.max(20, v.initialHeight + w);
+          S = Math.max(20, v.initialWidth + m), b = Math.max(20, v.initialHeight + w);
           break;
         case "sw-resize":
-          S = Math.max(20, v.initialWidth - u), b = Math.max(20, v.initialHeight + w), R = v.initialX + (v.initialWidth - S);
+          S = Math.max(20, v.initialWidth - m), b = Math.max(20, v.initialHeight + w), R = v.initialX + (v.initialWidth - S);
           break;
         case "ne-resize":
-          S = Math.max(20, v.initialWidth + u), b = Math.max(20, v.initialHeight - w), A = v.initialY + (v.initialHeight - b);
+          S = Math.max(20, v.initialWidth + m), b = Math.max(20, v.initialHeight - w), A = v.initialY + (v.initialHeight - b);
           break;
         case "nw-resize":
-          S = Math.max(20, v.initialWidth - u), b = Math.max(20, v.initialHeight - w), R = v.initialX + (v.initialWidth - S), A = v.initialY + (v.initialHeight - b);
+          S = Math.max(20, v.initialWidth - m), b = Math.max(20, v.initialHeight - w), R = v.initialX + (v.initialWidth - S), A = v.initialY + (v.initialHeight - b);
           break;
       }
       if (e.shiftKey && c.type !== "text") {
-        const $ = v.initialWidth / v.initialHeight;
-        j.includes("e"), b = S / $, j.includes("n") && (A = v.initialY + (v.initialHeight - b));
+        const H = v.initialWidth / v.initialHeight;
+        T.includes("e"), b = S / H, T.includes("n") && (A = v.initialY + (v.initialHeight - b));
       }
-      Y && (R = ut(R), A = ut(A), S = ut(S), b = ut(b));
+      Y && (R = mt(R), A = mt(A), S = mt(S), b = mt(b));
       const z = {
         ...c,
         x: R,
@@ -7629,37 +7639,37 @@ const fi = $e((f, o) => {
         height: b
       };
       n(
-        ($) => $.map(
+        (H) => H.map(
           (dt) => dt.id === c.id ? z : dt
         )
-      ), F(z), V();
+      ), C(z), V();
       return;
     }
     if (I && c) {
-      let u = d - v.offsetX, w = x - v.offsetY;
-      Y && (u = ut(u), w = ut(w)), u = Math.max(0, Math.min(k - c.width, u)), w = Math.max(0, Math.min(W - c.height, w));
+      let m = d - v.offsetX, w = x - v.offsetY;
+      Y && (m = mt(m), w = mt(w)), m = Math.max(0, Math.min(k - c.width, m)), w = Math.max(0, Math.min(W - c.height, w));
       const S = {
         ...c,
-        x: u,
+        x: m,
         y: w
       };
       n(
         (b) => b.map(
           (R) => R.id === c.id ? S : R
         )
-      ), F(S), V();
+      ), C(S), V();
     }
-  }, [l, Q, c, I, m, T, j, v, Y, k, W, h, V]), qt = at((e) => {
-    C && H((r) => ({
+  }, [l, Q, c, I, u, j, T, v, Y, k, W, h, V]), qt = at((e) => {
+    F && $((r) => ({
       ...r,
-      [C.sectionName]: {
+      [F.sectionName]: {
         elements: h.map((d) => d.type === "image" ? {
           ...d,
           // Keep the image data reference
           imageData: d.imageData,
           src: d.src
         } : d),
-        selectedColor: _
+        selectedColor: G
       }
     }));
     const t = L[e.sectionName];
@@ -7669,7 +7679,7 @@ const fi = $e((f, o) => {
           const x = new Image();
           return x.onload = () => {
             n(
-              (u) => u.map(
+              (m) => m.map(
                 (w) => w.id === d.id ? { ...w, imageData: x } : w
               )
             ), V();
@@ -7677,11 +7687,11 @@ const fi = $e((f, o) => {
         }
         return d;
       });
-      n(r), st(t.selectedColor || _);
+      n(r), st(t.selectedColor || G);
     } else
       n([]);
-    et(e), F(null);
-  }, [C, h, _, L, V]), Pe = at((e) => {
+    et(e), C(null);
+  }, [F, h, G, L, V]), Ue = at((e) => {
     if (e && e.type.startsWith("image/")) {
       const t = new FileReader();
       t.onload = (r) => {
@@ -7690,8 +7700,8 @@ const fi = $e((f, o) => {
           const x = {
             id: ht(),
             type: "image",
-            x: ut(k / 2 - 100),
-            y: ut(W / 2 - 100),
+            x: mt(k / 2 - 100),
+            y: mt(W / 2 - 100),
             width: Math.min(d.width, 200),
             // Limit initial size
             height: Math.min(d.height, 200),
@@ -7700,8 +7710,8 @@ const fi = $e((f, o) => {
             src: r.target.result,
             originalWidth: d.width,
             originalHeight: d.height
-          }, u = d.width / d.height;
-          x.width / x.height !== u && (x.width / u <= 200 ? x.height = x.width / u : x.width = x.height * u), n((w) => [...w, x]), F(x), lt();
+          }, m = d.width / d.height;
+          x.width / x.height !== m && (x.width / m <= 200 ? x.height = x.width / m : x.width = x.height * m), n((w) => [...w, x]), C(x), lt();
         }, d.onerror = () => {
           console.error("Failed to load uploaded image"), alert("Failed to load the uploaded image. Please try again.");
         }, d.src = r.target.result;
@@ -7710,8 +7720,8 @@ const fi = $e((f, o) => {
       }, t.readAsDataURL(e);
     } else
       alert("Please select a valid image file.");
-  }, [k, W, ut, ht, lt]), Vt = at(
-    Ue(() => {
+  }, [k, W, mt, ht, lt]), Vt = at(
+    Oe(() => {
       V();
     }, 16),
     // 60fps limit
@@ -7720,33 +7730,33 @@ const fi = $e((f, o) => {
   rt(() => {
     zt.current || Vt();
   }, [h, c, M, Vt]);
-  function Ue(e, t) {
+  function Oe(e, t) {
     let r;
     return function(...x) {
-      const u = () => {
+      const m = () => {
         clearTimeout(r), e(...x);
       };
-      clearTimeout(r), r = setTimeout(u, t);
+      clearTimeout(r), r = setTimeout(m, t);
     };
   }
   rt(() => {
-    pt.current && Xt(pt.current, _);
-  }, [_]), rt(() => {
+    pt.current && Xt(pt.current, G);
+  }, [G]), rt(() => {
     V();
   }, [V]);
-  const Oe = (e, t, r) => (0.2126 * e + 0.7152 * t + 0.0722 * r) / 255, Xt = at((e, t) => {
+  const Qe = (e, t, r) => (0.2126 * e + 0.7152 * t + 0.0722 * r) / 255, Xt = at((e, t) => {
     const r = Ot.current, d = r.getContext("2d");
     r.width = k, r.height = W, d.clearRect(0, 0, k, W), d.drawImage(e, 0, 0, k, W);
-    const x = d.getImageData(0, 0, k, W), u = x.data, w = ge(t);
+    const x = d.getImageData(0, 0, k, W), m = x.data, w = ge(t);
     if (!w) {
       zt.current = !1;
       return;
     }
     const { r: S, g: b, b: R } = w;
-    for (let z = 0; z < u.length; z += 4) {
-      if (u[z + 3] === 0) continue;
-      const dt = Oe(u[z], u[z + 1], u[z + 2]);
-      u[z] = Math.round(S * dt), u[z + 1] = Math.round(b * dt), u[z + 2] = Math.round(R * dt);
+    for (let z = 0; z < m.length; z += 4) {
+      if (m[z + 3] === 0) continue;
+      const dt = Qe(m[z], m[z + 1], m[z + 2]);
+      m[z] = Math.round(S * dt), m[z + 1] = Math.round(b * dt), m[z + 2] = Math.round(R * dt);
     }
     d.putImageData(x, 0, 0);
     const A = new Image();
@@ -7758,9 +7768,9 @@ const fi = $e((f, o) => {
     const t = document.querySelector(".ruler-horizontal"), r = document.querySelector(".ruler-vertical");
     if (!t || !r)
       return { horizontal: [], vertical: [] };
-    const d = t.getBoundingClientRect(), x = r.getBoundingClientRect(), u = d.width, w = x.height, S = 50, b = [], R = [];
-    for (let A = S; A <= u; A += S)
-      A <= u - 20 && b.push({
+    const d = t.getBoundingClientRect(), x = r.getBoundingClientRect(), m = d.width, w = x.height, S = 50, b = [], R = [];
+    for (let A = S; A <= m; A += S)
+      A <= m - 20 && b.push({
         position: A,
         value: Math.round(A / e)
       });
@@ -7796,7 +7806,7 @@ const fi = $e((f, o) => {
     }
   }, [tt, y, Q]), /* @__PURE__ */ i.jsxs("div", { className: "pure-canvas-designer", children: [
     /* @__PURE__ */ i.jsx("div", { className: "designer-header", children: /* @__PURE__ */ i.jsx(
-      si,
+      li,
       {
         onAddElement: ze,
         onDeleteElement: () => c && Mt(c.id),
@@ -7806,9 +7816,9 @@ const fi = $e((f, o) => {
         onToggleGrid: () => nt(!M),
         onToggleRulers: () => ct(!tt),
         onToggleSnap: () => P(!Y),
-        onImageUpload: Pe,
+        onImageUpload: Ue,
         canUndo: J > 0,
-        canRedo: J < G.length - 1,
+        canRedo: J < _.length - 1,
         showGrid: M,
         showRulers: tt,
         snapToGrid: Y,
@@ -7846,8 +7856,8 @@ const fi = $e((f, o) => {
           ref: K,
           width: k,
           height: W,
-          onMouseDown: Me,
-          onMouseMove: Le,
+          onMouseDown: Le,
+          onMouseMove: Pe,
           onMouseUp: Be,
           style: {
             border: "1px solid #e2e8f0",
@@ -7859,7 +7869,7 @@ const fi = $e((f, o) => {
       ) }),
       /* @__PURE__ */ i.jsxs("div", { className: "side-panels", children: [
         /* @__PURE__ */ i.jsx(
-          li,
+          ni,
           {
             selectedElement: c,
             onUpdate: Gt,
@@ -7869,11 +7879,11 @@ const fi = $e((f, o) => {
           }
         ),
         /* @__PURE__ */ i.jsx(
-          ni,
+          ci,
           {
             elements: h,
             selectedElement: c,
-            onSelectElement: F,
+            onSelectElement: C,
             onMoveLayer: Yt,
             onDeleteElement: Mt,
             theme: a
@@ -7892,7 +7902,7 @@ const fi = $e((f, o) => {
           return /* @__PURE__ */ i.jsxs(
             "div",
             {
-              className: `section-thumbnail compact ${C.sectionName === e.sectionName ? "active" : ""}`,
+              className: `section-thumbnail compact ${F.sectionName === e.sectionName ? "active" : ""}`,
               onClick: (r) => {
                 r.stopPropagation();
                 const d = s.sections.find((x) => x.sectionName === e.sectionName);
@@ -7928,7 +7938,7 @@ const fi = $e((f, o) => {
           s.colorSettings.slice(0, 3).map((e, t) => /* @__PURE__ */ i.jsxs(
             "div",
             {
-              className: `color-swatch-enhanced compact ${_ === e ? "active" : ""}`,
+              className: `color-swatch-enhanced compact ${G === e ? "active" : ""}`,
               onClick: (r) => {
                 r.stopPropagation(), st(e);
               },
@@ -7941,7 +7951,7 @@ const fi = $e((f, o) => {
                     style: { backgroundColor: e }
                   }
                 ),
-                _ === e && /* @__PURE__ */ i.jsx("div", { className: "color-selection-ring compact" })
+                G === e && /* @__PURE__ */ i.jsx("div", { className: "color-selection-ring compact" })
               ]
             },
             e
@@ -7967,7 +7977,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 ${_ === e ? "active" : ""}`,
+                className: `color-swatch-dropdown ${G === e ? "active" : ""}`,
                 onClick: (r) => {
                   r.stopPropagation(), st(e), r.currentTarget.parentElement.style.display = "none";
                 },
@@ -8056,7 +8066,7 @@ const fi = $e((f, o) => {
     ] })
   ] });
 });
-fi.displayName = "Mypixia";
+hi.displayName = "Mypixia";
 export {
-  fi as default
+  hi as default
 };