@mypixia/simplex-designer 3.0.0 → 3.0.1

package/dist/index.es.js

@@ -1,8 +1,8 @@
-import qo, { useState as E, useRef as dt, useEffect as ct, useMemo as wi, forwardRef as Xo, useCallback as Nt, useReducer as Qo, useImperativeHandle as Zo } from "react";
+import qo, { useState as E, useRef as dt, useEffect as st, useMemo as vi, forwardRef as Xo, useCallback as zt, useReducer as Qo, useImperativeHandle as Zo } from "react";
 import Ko from "qrcode";
 import Jo from "react-barcode";
-import ki from "axios";
-import './index_external.css';var Be = { exports: {} }, we = {};
+import wi from "axios";
+import './index_external.css';var Oe = { exports: {} }, we = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -50,7 +50,7 @@ function ea() {
     function r(g) {
       if (g == null) return null;
       if (typeof g == "function")
-        return g.$$typeof === zt ? null : g.displayName || g.name || null;
+        return g.$$typeof === Tt ? null : g.displayName || g.name || null;
       if (typeof g == "string") return g;
       switch (g) {
         case H:
@@ -81,7 +81,7 @@ function ea() {
             return g = g.displayName, g || (g = M.displayName || M.name || "", g = g !== "" ? "ForwardRef(" + g + ")" : "ForwardRef"), g;
           case J:
             return M = g.displayName || null, M !== null ? M : r(g.type) || "Memo";
-          case bt:
+          case St:
             M = g._payload, g = g._init;
             try {
               return r(g(M));
@@ -102,8 +102,8 @@ function ea() {
       }
       if (M) {
         M = console;
-        var U = M.error, ot = typeof Symbol == "function" && Symbol.toStringTag && g[Symbol.toStringTag] || g.constructor.name || "Object";
-        return U.call(
+        var _ = M.error, ot = typeof Symbol == "function" && Symbol.toStringTag && g[Symbol.toStringTag] || g.constructor.name || "Object";
+        return _.call(
           M,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           ot
@@ -112,7 +112,7 @@ function ea() {
     }
     function s(g) {
       if (g === H) return "<>";
-      if (typeof g == "object" && g !== null && g.$$typeof === bt)
+      if (typeof g == "object" && g !== null && g.$$typeof === St)
         return "<...>";
       try {
         var M = r(g);
@@ -122,7 +122,7 @@ function ea() {
       }
     }
     function l() {
-      var g = _.A;
+      var g = V.A;
       return g === null ? null : g.getOwner();
     }
     function h() {
@@ -136,14 +136,14 @@ function ea() {
       return g.key !== void 0;
     }
     function w(g, M) {
-      function U() {
+      function _() {
         rt || (rt = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           M
         ));
       }
-      U.isReactWarning = !0, Object.defineProperty(g, "key", {
-        get: U,
+      _.isReactWarning = !0, Object.defineProperty(g, "key", {
+        get: _,
         configurable: !0
       });
     }
@@ -153,14 +153,14 @@ function ea() {
         "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."
       )), g = this.props.ref, g !== void 0 ? g : null;
     }
-    function A(g, M, U, ot, St, ft, Rt, Ct) {
-      return U = ft.ref, g = {
+    function A(g, M, _, ot, vt, ft, Rt, Ft) {
+      return _ = ft.ref, g = {
         $$typeof: B,
         type: g,
         key: M,
         props: ft,
-        _owner: St
-      }, (U !== void 0 ? U : null) !== null ? Object.defineProperty(g, "ref", {
+        _owner: vt
+      }, (_ !== void 0 ? _ : null) !== null ? Object.defineProperty(g, "ref", {
         enumerable: !1,
         get: k
       }) : Object.defineProperty(g, "ref", { enumerable: !1, value: null }), g._store = {}, Object.defineProperty(g._store, "validated", {
@@ -182,10 +182,10 @@ function ea() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: Ct
+        value: Ft
       }), Object.freeze && (Object.freeze(g.props), Object.freeze(g)), g;
     }
-    function F(g, M, U, ot, St, ft, Rt, Ct) {
+    function F(g, M, _, ot, vt, ft, Rt, Ft) {
       var xt = M.children;
       if (xt !== void 0)
         if (ot)
@@ -200,10 +200,10 @@ function ea() {
         else T(xt);
       if (O.call(M, "key")) {
         xt = r(g);
-        var Ft = Object.keys(M).filter(function(ee) {
-          return ee !== "key";
+        var Nt = Object.keys(M).filter(function(oe) {
+          return oe !== "key";
         });
-        ot = 0 < Ft.length ? "{key: someKey, " + Ft.join(": ..., ") + ": ...}" : "{key: someKey}", P[xt + ot] || (Ft = 0 < Ft.length ? "{" + Ft.join(": ..., ") + ": ...}" : "{}", console.error(
+        ot = 0 < Nt.length ? "{key: someKey, " + Nt.join(": ..., ") + ": ...}" : "{key: someKey}", P[xt + ot] || (Nt = 0 < Nt.length ? "{" + Nt.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -212,33 +212,33 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           ot,
           xt,
-          Ft,
+          Nt,
           xt
         ), P[xt + ot] = !0);
       }
-      if (xt = null, U !== void 0 && (n(U), xt = "" + U), f(M) && (n(M.key), xt = "" + M.key), "key" in M) {
-        U = {};
-        for (var Gt in M)
-          Gt !== "key" && (U[Gt] = M[Gt]);
-      } else U = M;
+      if (xt = null, _ !== void 0 && (n(_), xt = "" + _), f(M) && (n(M.key), xt = "" + M.key), "key" in M) {
+        _ = {};
+        for (var $t in M)
+          $t !== "key" && (_[$t] = M[$t]);
+      } else _ = M;
       return xt && w(
-        U,
+        _,
         typeof g == "function" ? g.displayName || g.name || "Unknown" : g
       ), A(
         g,
         xt,
         ft,
-        St,
+        vt,
         l(),
-        U,
+        _,
         Rt,
-        Ct
+        Ft
       );
     }
     function T(g) {
       typeof g == "object" && g !== null && g.$$typeof === B && g._store && (g._store.validated = 1);
     }
-    var S = qo, B = Symbol.for("react.transitional.element"), I = Symbol.for("react.portal"), H = Symbol.for("react.fragment"), Q = Symbol.for("react.strict_mode"), N = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), b = Symbol.for("react.context"), L = Symbol.for("react.forward_ref"), j = Symbol.for("react.suspense"), it = Symbol.for("react.suspense_list"), J = Symbol.for("react.memo"), bt = Symbol.for("react.lazy"), pt = Symbol.for("react.activity"), zt = Symbol.for("react.client.reference"), _ = S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, R = Array.isArray, st = console.createTask ? console.createTask : function() {
+    var S = qo, B = Symbol.for("react.transitional.element"), I = Symbol.for("react.portal"), H = Symbol.for("react.fragment"), Q = Symbol.for("react.strict_mode"), N = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), b = Symbol.for("react.context"), L = Symbol.for("react.forward_ref"), j = Symbol.for("react.suspense"), it = Symbol.for("react.suspense_list"), J = Symbol.for("react.memo"), St = Symbol.for("react.lazy"), pt = Symbol.for("react.activity"), Tt = Symbol.for("react.client.reference"), V = S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, R = Array.isArray, lt = console.createTask ? console.createTask : function() {
       return null;
     };
     S = {
@@ -249,37 +249,37 @@ React keys must be passed directly to JSX without using spread:
     var rt, yt = {}, v = S["react-stack-bottom-frame"].bind(
       S,
       h
-    )(), q = st(s(h)), P = {};
-    ke.Fragment = H, ke.jsx = function(g, M, U, ot, St) {
-      var ft = 1e4 > _.recentlyCreatedOwnerStacks++;
+    )(), X = lt(s(h)), P = {};
+    ke.Fragment = H, ke.jsx = function(g, M, _, ot, vt) {
+      var ft = 1e4 > V.recentlyCreatedOwnerStacks++;
       return F(
         g,
         M,
-        U,
+        _,
         !1,
         ot,
-        St,
+        vt,
         ft ? Error("react-stack-top-frame") : v,
-        ft ? st(s(g)) : q
+        ft ? lt(s(g)) : X
       );
-    }, ke.jsxs = function(g, M, U, ot, St) {
-      var ft = 1e4 > _.recentlyCreatedOwnerStacks++;
+    }, ke.jsxs = function(g, M, _, ot, vt) {
+      var ft = 1e4 > V.recentlyCreatedOwnerStacks++;
       return F(
         g,
         M,
-        U,
+        _,
         !0,
         ot,
-        St,
+        vt,
         ft ? Error("react-stack-top-frame") : v,
-        ft ? st(s(g)) : q
+        ft ? lt(s(g)) : X
       );
     };
   }()), ke;
 }
 var Ji;
 function ia() {
-  return Ji || (Ji = 1, process.env.NODE_ENV === "production" ? Be.exports = ta() : Be.exports = ea()), Be.exports;
+  return Ji || (Ji = 1, process.env.NODE_ENV === "production" ? Oe.exports = ta() : Oe.exports = ea()), Oe.exports;
 }
 var e = ia();
 const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
@@ -2424,7 +2424,7 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
   { id: 264, text: "Magnifique", category: "Calligraphy", fontSize: 40, fontFamily: "Allura", fill: "#4338ca", textAlign: "center" },
   { id: 265, text: "Bloom", category: "Calligraphy", fontSize: 52, fontFamily: "Parisienne", fill: "#db2777", textAlign: "center" },
   { id: 266, text: "Bella Vita", category: "Calligraphy", fontSize: 42, fontFamily: "Satisfy", fill: "#0d9488", textAlign: "center" }
-], zi = [
+], Ni = [
   "Arial",
   "Helvetica",
   "Times New Roman",
@@ -2435,10 +2435,10 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
   "Trebuchet MS",
   "Impact",
   "Comic Sans MS"
-], oa = new Set(zi), ji = [
+], oa = new Set(Ni), ki = [
   {
     name: "System",
-    fonts: zi
+    fonts: Ni
   },
   {
     name: "Signage & Display",
@@ -2539,7 +2539,7 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
     name: "Monospace",
     fonts: ["Roboto Mono", "Source Code Pro", "JetBrains Mono", "Space Mono", "IBM Plex Mono"]
   }
-], no = ji.reduce((r, o) => r.concat(o.fonts), []), aa = (r) => oa.has(r), ra = "https://fonts.googleapis.com/css2", to = new Set(zi), na = (r) => `family=${r.trim().replace(/\s+/g, "+")}:wght@400;700`, $e = (r) => {
+], no = ki.reduce((r, o) => r.concat(o.fonts), []), aa = (r) => oa.has(r), ra = "https://fonts.googleapis.com/css2", to = new Set(Ni), na = (r) => `family=${r.trim().replace(/\s+/g, "+")}:wght@400;700`, Ge = (r) => {
   if (typeof document > "u") return;
   const o = (r || []).filter(
     (s) => s && !to.has(s)
@@ -2551,7 +2551,7 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
     h.rel = "stylesheet", h.href = `${ra}?${l.map(na).join("&")}&display=swap`, h.setAttribute("data-simplex-font", "1"), document.head.appendChild(h), l.forEach((f) => to.add(f));
   }
 }, so = async (r) => {
-  if (!(!r || aa(r)) && ($e([r]), !(typeof document > "u" || !document.fonts || !document.fonts.load)))
+  if (!(!r || aa(r)) && (Ge([r]), !(typeof document > "u" || !document.fonts || !document.fonts.load)))
     try {
       await Promise.all([
         document.fonts.load(`400 24px "${r}"`),
@@ -2559,10 +2559,10 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
       ]);
     } catch {
     }
-}, Ti = async (r) => {
+}, zi = async (r) => {
   const o = Array.from(new Set((r || []).filter(Boolean)));
   await Promise.all(o.map(so));
-}, Ci = {
+}, ji = {
   business: {
     name: "Business & Office",
     icons: [
@@ -2653,7 +2653,7 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
       { name: "shield", symbol: "🛡️", unicode: "🛡️" }
     ]
   }
-}, lo = () => Object.values(Ci).flatMap(
+}, lo = () => Object.values(ji).flatMap(
   (r) => r.icons.map((o) => ({
     ...o,
     category: r.name
@@ -2662,7 +2662,7 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
   (n) => n.name.toLowerCase().includes(r.toLowerCase()) || n.category.toLowerCase().includes(r.toLowerCase())
 ), la = ({ onSelectIcon: r, disabled: o = !1 }) => {
   const [n, s] = E(!1), [l, h] = E(""), [f, w] = E("all"), k = dt(null);
-  ct(() => {
+  st(() => {
     const S = (B) => {
       k.current && !k.current.contains(B.target) && s(!1);
     };
@@ -2673,7 +2673,7 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
   }, T = (() => {
     let S = lo();
     if (l.trim() && (S = sa(l)), f !== "all") {
-      const B = Ci[f];
+      const B = ji[f];
       B && (S = S.filter((I) => I.category === B.name));
     }
     return S;
@@ -2713,7 +2713,7 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
             className: "category-select",
             children: [
               /* @__PURE__ */ e.jsx("option", { value: "all", children: "All Categories" }),
-              Object.entries(Ci).map(([S, B]) => /* @__PURE__ */ e.jsx("option", { value: S, children: B.name }, S))
+              Object.entries(ji).map(([S, B]) => /* @__PURE__ */ e.jsx("option", { value: S, children: B.name }, S))
             ]
           }
         )
@@ -2876,7 +2876,7 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
     { value: "MSI", label: "MSI (Retail)" },
     { value: "pharmacode", label: "Pharmacode (Pharmaceutical)" },
     { value: "codabar", label: "Codabar (Libraries/Blood banks)" }
-  ], bt = () => {
+  ], St = () => {
     if (l.trim())
       try {
         A(/* @__PURE__ */ e.jsx(
@@ -2898,7 +2898,7 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
         console.error("Barcode generation error:", O), alert("Invalid data for selected barcode format. Please check your input.");
       }
   }, pt = () => {
-    var O, R, st, rt;
+    var O, R, lt, rt;
     if (!(!k || !it.current))
       try {
         const yt = it.current.querySelector("svg");
@@ -2906,13 +2906,13 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
           console.error("No SVG element found in barcode");
           return;
         }
-        const v = document.createElement("canvas"), q = v.getContext("2d"), P = yt.getBoundingClientRect(), g = ((R = (O = yt.width) == null ? void 0 : O.baseVal) == null ? void 0 : R.value) || P.width || 200, M = ((rt = (st = yt.height) == null ? void 0 : st.baseVal) == null ? void 0 : rt.value) || P.height || 100;
+        const v = document.createElement("canvas"), X = v.getContext("2d"), P = yt.getBoundingClientRect(), g = ((R = (O = yt.width) == null ? void 0 : O.baseVal) == null ? void 0 : R.value) || P.width || 200, M = ((rt = (lt = yt.height) == null ? void 0 : lt.baseVal) == null ? void 0 : rt.value) || P.height || 100;
         v.width = g, v.height = M;
-        const U = new XMLSerializer().serializeToString(yt), ot = new Blob([U], { type: "image/svg+xml;charset=utf-8" }), St = URL.createObjectURL(ot), ft = new Image();
+        const _ = new XMLSerializer().serializeToString(yt), ot = new Blob([_], { type: "image/svg+xml;charset=utf-8" }), vt = URL.createObjectURL(ot), ft = new Image();
         ft.onload = () => {
-          q.drawImage(ft, 0, 0);
-          const Rt = v.toDataURL("image/png"), Ct = new Image();
-          Ct.onload = () => {
+          X.drawImage(ft, 0, 0);
+          const Rt = v.toDataURL("image/png"), Ft = new Image();
+          Ft.onload = () => {
             n({
               type: "barcode",
               src: Rt,
@@ -2922,16 +2922,16 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
               height: M,
               x: 100,
               y: 100,
-              imageObject: Ct
-            }), zt();
-          }, Ct.src = Rt, URL.revokeObjectURL(St);
-        }, ft.src = St;
+              imageObject: Ft
+            }), Tt();
+          }, Ft.src = Rt, URL.revokeObjectURL(vt);
+        }, ft.src = vt;
       } catch (yt) {
         console.error("Error adding barcode to canvas:", yt), alert("Failed to add barcode to canvas. Please try again.");
       }
-  }, zt = () => {
+  }, Tt = () => {
     h(""), A(null), w("CODE128"), T(2), B(100), H(20), o();
-  }, _ = (O) => ({
+  }, V = (O) => ({
     CODE128: "Supports all ASCII characters. Most versatile format.",
     EAN13: "Requires exactly 12 digits (13th is checksum). Used for retail products.",
     EAN8: "Requires exactly 7 digits (8th is checksum). Compact version of EAN-13.",
@@ -2942,14 +2942,14 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
     pharmacode: "Numbers 3-131070. Used in pharmaceutical industry.",
     codabar: "Supports 0-9, A-D, and symbols. Used in libraries."
   })[O] || "";
-  return r ? /* @__PURE__ */ e.jsx("div", { className: "barcode-modal-overlay", onClick: zt, children: /* @__PURE__ */ e.jsxs("div", { className: "barcode-modal-content", onClick: (O) => O.stopPropagation(), children: [
+  return r ? /* @__PURE__ */ e.jsx("div", { className: "barcode-modal-overlay", onClick: Tt, children: /* @__PURE__ */ e.jsxs("div", { className: "barcode-modal-content", onClick: (O) => O.stopPropagation(), children: [
     /* @__PURE__ */ e.jsxs("div", { className: "barcode-modal-header", children: [
       /* @__PURE__ */ e.jsx("h3", { children: "Generate Barcode" }),
       /* @__PURE__ */ e.jsx(
         "button",
         {
           className: "barcode-modal-close",
-          onClick: zt,
+          onClick: Tt,
           "aria-label": "Close",
           children: "×"
         }
@@ -2980,7 +2980,7 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
             children: J.map((O) => /* @__PURE__ */ e.jsx("option", { value: O.value, children: O.label }, O.value))
           }
         ),
-        /* @__PURE__ */ e.jsx("small", { className: "format-description", children: _(f) })
+        /* @__PURE__ */ e.jsx("small", { className: "format-description", children: V(f) })
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "barcode-options", children: [
         /* @__PURE__ */ e.jsxs("div", { className: "barcode-form-group", children: [
@@ -3058,7 +3058,7 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
         "button",
         {
           className: "barcode-btn barcode-btn-generate",
-          onClick: bt,
+          onClick: St,
           disabled: !l.trim(),
           children: "Generate Barcode"
         }
@@ -3147,75 +3147,75 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
 ] }), fa = ({ isOpen: r, onClose: o, onAddSticker: n, theme: s, apiKey: l, apiEndpoint: h }) => {
   const [f, w] = E([]), [k, A] = E(!1), [F, T] = E(null), [S, B] = E(""), [I, H] = E(""), [Q, N] = E({});
   dt(null);
-  const [z, b] = E(!1), [L, j] = E(!1), [it, J] = E(!1), bt = `${h}/api/v1/designer`;
-  ct(() => {
+  const [z, b] = E(!1), [L, j] = E(!1), [it, J] = E(!1), St = `${h}/api/v1/designer`;
+  st(() => {
     r && l && pt();
   }, [r, l]);
   const pt = async () => {
     const v = sessionStorage.getItem("apc_x_sub_status");
-    v === "active" ? (b(!0), j(!0), _()) : v === "inactive" ? (b(!1), j(!0)) : (J(!0), await zt());
-  }, zt = async () => {
+    v === "active" ? (b(!0), j(!0), V()) : v === "inactive" ? (b(!1), j(!0)) : (J(!0), await Tt());
+  }, Tt = async () => {
     if (!l) {
       b(!1), j(!0), J(!1);
       return;
     }
-    const v = `${bt}/get-subscription-status/${l}`;
+    const v = `${St}/get-subscription-status/${l}`;
     try {
-      (await ki.get(v)).data.object === "active" ? (sessionStorage.setItem("apc_x_sub_status", "active"), b(!0), _()) : (sessionStorage.setItem("apc_x_sub_status", "inactive"), b(!1));
-    } catch (q) {
-      console.error("Subscription check failed:", q), sessionStorage.setItem("apc_x_sub_status", "inactive"), b(!1);
+      (await wi.get(v)).data.object === "active" ? (sessionStorage.setItem("apc_x_sub_status", "active"), b(!0), V()) : (sessionStorage.setItem("apc_x_sub_status", "inactive"), b(!1));
+    } catch (X) {
+      console.error("Subscription check failed:", X), sessionStorage.setItem("apc_x_sub_status", "inactive"), b(!1);
     } finally {
       J(!1), j(!0);
     }
-  }, _ = async () => {
+  }, V = async () => {
     const v = sessionStorage.getItem("apc_stickers");
     if (v)
       try {
-        const q = JSON.parse(v);
-        w(q);
+        const X = JSON.parse(v);
+        w(X);
         return;
       } catch {
         console.warn("Failed to parse cached stickers, fetching fresh data");
       }
     A(!0), T(null);
     try {
-      const q = await ki.get(`${bt}/get-stickers`);
-      if (q.data && q.data.object && q.data.object.contents) {
-        const P = q.data.object.contents;
+      const X = await wi.get(`${St}/get-stickers`);
+      if (X.data && X.data.object && X.data.object.contents) {
+        const P = X.data.object.contents;
         w(P), sessionStorage.setItem("apc_stickers", JSON.stringify(P));
       } else
         throw new Error("Invalid response format");
-    } catch (q) {
-      console.error("Error fetching stickers:", q), T("Failed to load stickers. Please try again.");
+    } catch (X) {
+      console.error("Error fetching stickers:", X), T("Failed to load stickers. Please try again.");
     } finally {
       A(!1);
     }
-  }, O = (v, q) => {
+  }, O = (v, X) => {
     n({
       type: "sticker",
       src: v,
-      name: q,
+      name: X,
       width: 100,
       height: 100,
       x: 100,
       y: 100
     }), o();
   }, R = (v) => {
-    N((q) => ({
-      ...q,
-      [v]: !q[v]
+    N((X) => ({
+      ...X,
+      [v]: !X[v]
     }));
-  }, st = (v) => {
-    const q = {};
+  }, lt = (v) => {
+    const X = {};
     return v.forEach((P) => {
       const g = P.name.split("/");
-      let M = q;
-      g.forEach((U, ot) => {
-        M[U] || (M[U] = ot === g.length - 1 ? P : {}), M = M[U];
+      let M = X;
+      g.forEach((_, ot) => {
+        M[_] || (M[_] = ot === g.length - 1 ? P : {}), M = M[_];
       });
-    }), q;
-  }, rt = (v, q = "", P = 0) => /* @__PURE__ */ e.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${P * 15}px` }, children: Object.keys(v).map((g) => {
-    const M = `${q}/${g}`, U = Q[M];
+    }), X;
+  }, rt = (v, X = "", P = 0) => /* @__PURE__ */ e.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${P * 15}px` }, children: Object.keys(v).map((g) => {
+    const M = `${X}/${g}`, _ = Q[M];
     return v[g].type === "image" ? !I || g.toLowerCase().includes(I.toLowerCase()) ? /* @__PURE__ */ e.jsx(
       "div",
       {
@@ -3227,8 +3227,8 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
             src: v[g].url,
             alt: g,
             loading: "lazy",
-            onError: (St) => {
-              St.target.style.display = "none";
+            onError: (vt) => {
+              vt.target.style.display = "none";
             }
           }
         ) })
@@ -3241,12 +3241,12 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
           className: "category-header",
           onClick: () => R(M),
           children: [
-            /* @__PURE__ */ e.jsx("span", { className: `expand-icon ${U ? "expanded" : ""}`, children: "▶" }),
+            /* @__PURE__ */ e.jsx("span", { className: `expand-icon ${_ ? "expanded" : ""}`, children: "▶" }),
             /* @__PURE__ */ e.jsx("span", { className: "category-name", children: g })
           ]
         }
       ),
-      U && rt(v[g], M, P + 1)
+      _ && rt(v[g], M, P + 1)
     ] }, M);
   }) }), yt = f.filter(
     (v) => !I || v.name.toLowerCase().includes(I.toLowerCase())
@@ -3281,9 +3281,9 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
         k && /* @__PURE__ */ e.jsx(eo, {}),
         F && /* @__PURE__ */ e.jsxs("div", { className: "sticker-error", children: [
           /* @__PURE__ */ e.jsx("p", { children: F }),
-          /* @__PURE__ */ e.jsx("button", { onClick: _, children: "Retry" })
+          /* @__PURE__ */ e.jsx("button", { onClick: V, children: "Retry" })
         ] }),
-        !k && !F && f.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "sticker-grid", children: rt(st(yt)) })
+        !k && !F && f.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "sticker-grid", children: rt(lt(yt)) })
       ] })
     ] })
   ] }) }) : null;
@@ -3312,10 +3312,10 @@ const K = ({ name: r, size: o = 24, color: n = "#000000", ...s }) => {
   <filter id="lift" x="-30%" y="-30%" width="160%" height="160%">
     <feDropShadow dx="0.5" dy="1.1" stdDeviation="0.9" flood-color="#1a1208" flood-opacity="0.4"/>
   </filter>
-</defs>`, Ge = 'fill="none" stroke="rgba(20,12,6,0.5)" stroke-width="1.3" stroke-dasharray="2.6 2" stroke-linecap="round"', Y = (r, o, n, s, l = "satin") => `<circle cx="${r}" cy="${o}" r="${n}" fill="${s}"/><circle cx="${r}" cy="${o}" r="${n}" fill="url(#${l})"/><circle cx="${r}" cy="${o}" r="${n}" ${Ge}/>`, Lt = (r, o, n, s, l, h = 0, f = "satin") => {
+</defs>`, Ue = 'fill="none" stroke="rgba(20,12,6,0.5)" stroke-width="1.3" stroke-dasharray="2.6 2" stroke-linecap="round"', U = (r, o, n, s, l = "satin") => `<circle cx="${r}" cy="${o}" r="${n}" fill="${s}"/><circle cx="${r}" cy="${o}" r="${n}" fill="url(#${l})"/><circle cx="${r}" cy="${o}" r="${n}" ${Ue}/>`, Lt = (r, o, n, s, l, h = 0, f = "satin") => {
   const w = h ? ` transform="rotate(${h} ${r} ${o})"` : "";
-  return `<ellipse cx="${r}" cy="${o}" rx="${n}" ry="${s}" fill="${l}"${w}/><ellipse cx="${r}" cy="${o}" rx="${n}" ry="${s}" fill="url(#${f})"${w}/><ellipse cx="${r}" cy="${o}" rx="${n}" ry="${s}" ${Ge}${w}/>`;
-}, Z = (r, o, n = "satin") => `<path d="${r}" fill="${o}"/><path d="${r}" fill="url(#${n})"/><path d="${r}" ${Ge}/>`, Pt = (r, o, n, s, l, h = 2, f = "satin") => `<rect x="${r}" y="${o}" width="${n}" height="${s}" rx="${h}" fill="${l}"/><rect x="${r}" y="${o}" width="${n}" height="${s}" rx="${h}" fill="url(#${f})"/><rect x="${r}" y="${o}" width="${n}" height="${s}" rx="${h}" ${Ge}/>`, ht = (r, o, n = 3) => `<path d="${r}" fill="none" stroke="${o}" stroke-width="${n}" stroke-linecap="round"/><path d="${r}" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="${Math.max(0.8, n * 0.35)}" stroke-linecap="round"/>`;
+  return `<ellipse cx="${r}" cy="${o}" rx="${n}" ry="${s}" fill="${l}"${w}/><ellipse cx="${r}" cy="${o}" rx="${n}" ry="${s}" fill="url(#${f})"${w}/><ellipse cx="${r}" cy="${o}" rx="${n}" ry="${s}" ${Ue}${w}/>`;
+}, Z = (r, o, n = "satin") => `<path d="${r}" fill="${o}"/><path d="${r}" fill="url(#${n})"/><path d="${r}" ${Ue}/>`, Pt = (r, o, n, s, l, h = 2, f = "satin") => `<rect x="${r}" y="${o}" width="${n}" height="${s}" rx="${h}" fill="${l}"/><rect x="${r}" y="${o}" width="${n}" height="${s}" rx="${h}" fill="url(#${f})"/><rect x="${r}" y="${o}" width="${n}" height="${s}" rx="${h}" ${Ue}/>`, ht = (r, o, n = 3) => `<path d="${r}" fill="none" stroke="${o}" stroke-width="${n}" stroke-linecap="round"/><path d="${r}" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="${Math.max(0.8, n * 0.35)}" stroke-linecap="round"/>`;
 let io = 0;
 const tt = (r, o, n, s) => {
   io += 1;
@@ -3327,70 +3327,70 @@ const tt = (r, o, n, s) => {
     description: n,
     url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(l)}`
   };
-}, mi = (r, o, n, s, l, h, f) => [...Array(n)].map((w, k) => {
+}, ui = (r, o, n, s, l, h, f) => [...Array(n)].map((w, k) => {
   const A = 360 / n * k, F = A * Math.PI / 180;
   return Lt(r + Math.cos(F) * s, o + Math.sin(F) * s, l, h, f, A);
-}).join(""), pi = (r, o, n, s, l, h, f = 3) => [...Array(n)].map((w, k) => {
+}).join(""), mi = (r, o, n, s, l, h, f = 3) => [...Array(n)].map((w, k) => {
   const A = 360 / n * k * Math.PI / 180;
   return ht(`M${r + Math.cos(A) * s} ${o + Math.sin(A) * s} L${r + Math.cos(A) * l} ${o + Math.sin(A) * l}`, h, f);
 }).join(""), ua = [
   // ---- Floral ----
-  tt("Rose", "Floral", "Satin rose", Lt(60, 58, 26, 26, "#e23b6d") + Lt(60, 58, 17, 17, "#f06292", 0, "satinV") + Y(60, 58, 8, "#ad1457") + Z("M60 84 q4 16 -6 26", "#2e7d32")),
-  tt("Sunflower", "Floral", "Sunflower", mi(60, 58, 12, 30, 9, 5, "#f4b400") + Y(60, 58, 17, "#8d5524", "satinV")),
+  tt("Rose", "Floral", "Satin rose", Lt(60, 58, 26, 26, "#e23b6d") + Lt(60, 58, 17, 17, "#f06292", 0, "satinV") + U(60, 58, 8, "#ad1457") + Z("M60 84 q4 16 -6 26", "#2e7d32")),
+  tt("Sunflower", "Floral", "Sunflower", ui(60, 58, 12, 30, 9, 5, "#f4b400") + U(60, 58, 17, "#8d5524", "satinV")),
   tt("Tulip", "Floral", "Tulip", Z("M60 28 q18 6 16 30 q-16 -10 -16 -10 q0 0 -16 10 q-2 -24 16 -30 Z", "#e23b6d") + Z("M60 48 q8 4 7 20 q-7 -6 -7 -6 q0 0 -7 6 q-1 -16 7 -20 Z", "#ad1457") + ht("M60 58 L60 96", "#2e7d32", 3) + Z("M60 78 q14 -6 20 4 q-14 8 -20 -4 Z", "#43a047")),
-  tt("Daisy", "Floral", "Daisy", mi(60, 58, 10, 26, 11, 5, "#ffffff") + Y(60, 58, 12, "#ffca28")),
-  tt("Cherry Blossom", "Floral", "Cherry blossom", mi(60, 60, 5, 18, 11, 9, "#f8bbd0") + Y(60, 60, 7, "#fff176") + pi(60, 60, 5, 6, 16, "#fce4ec", 1.4)),
+  tt("Daisy", "Floral", "Daisy", ui(60, 58, 10, 26, 11, 5, "#ffffff") + U(60, 58, 12, "#ffca28")),
+  tt("Cherry Blossom", "Floral", "Cherry blossom", ui(60, 60, 5, 18, 11, 9, "#f8bbd0") + U(60, 60, 7, "#fff176") + mi(60, 60, 5, 6, 16, "#fce4ec", 1.4)),
   tt("Lavender", "Floral", "Lavender sprig", ht("M60 100 C58 70 62 50 60 26", "#5e7d3a", 3) + [...Array(7)].map((r, o) => Lt(60 + (o % 2 ? 6 : -6), 30 + o * 9, 6, 4, "#9575cd", o % 2 ? 25 : -25)).join("")),
   // ---- Nature ----
   tt("Pine Tree", "Nature", "Evergreen", Pt(56, 86, 8, 16, "#795548") + Z("M60 20 L82 56 L38 56 Z", "#2e7d32") + Z("M60 40 L88 82 L32 82 Z", "#388e3c")),
-  tt("Mountain", "Nature", "Mountain", Z("M16 92 L52 36 L72 66 L88 44 L104 92 Z", "#6d8299") + Z("M52 36 L64 54 L40 54 Z", "#ffffff") + Y(92, 30, 9, "#ffd54f")),
-  tt("Sun", "Nature", "Sunburst", pi(60, 60, 12, 26, 40, "#f9a825", 3) + Y(60, 60, 22, "#fbc02d")),
+  tt("Mountain", "Nature", "Mountain", Z("M16 92 L52 36 L72 66 L88 44 L104 92 Z", "#6d8299") + Z("M52 36 L64 54 L40 54 Z", "#ffffff") + U(92, 30, 9, "#ffd54f")),
+  tt("Sun", "Nature", "Sunburst", mi(60, 60, 12, 26, 40, "#f9a825", 3) + U(60, 60, 22, "#fbc02d")),
   tt("Leaf Sprig", "Nature", "Leaf sprig", ht("M60 96 C60 70 60 50 60 28", "#2e7d32", 3) + Z("M60 70 q-22 -6 -26 -22 q24 0 26 22 Z", "#43a047") + Z("M60 52 q22 -6 26 -22 q-24 0 -26 22 Z", "#66bb6a") + Z("M60 38 q-18 -6 -22 -20 q20 0 22 20 Z", "#43a047")),
   tt("Cactus", "Nature", "Potted cactus", Z("M52 92 q-2 -34 8 -34 q10 0 8 34 Z", "#2e7d32") + Z("M52 70 q-16 0 -16 -14 q0 -8 6 -8 q10 0 10 14 Z", "#43a047") + Z("M68 64 q16 0 16 -14 q0 -8 -6 -8 q-10 0 -10 14 Z", "#43a047") + Pt(46, 92, 28, 16, "#c1502e", 3)),
-  tt("Mushroom", "Nature", "Toadstool", Z("M30 64 q0 -34 30 -34 q30 0 30 34 Z", "#e53935") + Pt(50, 64, 20, 34, "#fff8e1", 6) + Y(46, 50, 4, "#fff") + Y(60, 44, 5, "#fff") + Y(74, 52, 4, "#fff")),
+  tt("Mushroom", "Nature", "Toadstool", Z("M30 64 q0 -34 30 -34 q30 0 30 34 Z", "#e53935") + Pt(50, 64, 20, 34, "#fff8e1", 6) + U(46, 50, 4, "#fff") + U(60, 44, 5, "#fff") + U(74, 52, 4, "#fff")),
   tt("Acorn", "Nature", "Acorn", Z("M40 56 q20 30 40 0 q-20 8 -40 0 Z", "#a1683a") + Z("M38 56 q22 -20 44 0 q-22 8 -44 0 Z", "#6d4c2f") + ht("M60 30 L60 38", "#6d4c2f", 3)),
   // ---- Animals ----
   tt("Butterfly", "Animals", "Butterfly", Lt(44, 50, 16, 13, "#7e57c2", -18) + Lt(76, 50, 16, 13, "#7e57c2", 18, "satinV") + Lt(46, 76, 12, 10, "#9575cd", -12) + Lt(74, 76, 12, 10, "#9575cd", 12, "satinV") + Pt(57, 42, 6, 44, "#4527a0", 3) + ht("M60 44 L52 30", "#4527a0", 2) + ht("M60 44 L68 30", "#4527a0", 2)),
   tt("Bee", "Animals", "Bumblebee", Lt(60, 64, 22, 16, "#fbc02d") + Pt(50, 48, 8, 32, "#3e2723", 2) + Pt(64, 48, 8, 32, "#3e2723", 2) + Lt(40, 54, 12, 7, "#e3f2fd", -25) + Lt(80, 54, 12, 7, "#e3f2fd", 25)),
-  tt("Ladybug", "Animals", "Ladybug", Y(60, 62, 24, "#e53935") + ht("M60 38 L60 86", "#3e2723", 2) + Y(60, 40, 9, "#3e2723") + Y(50, 56, 4, "#3e2723") + Y(70, 56, 4, "#3e2723") + Y(50, 72, 4, "#3e2723") + Y(70, 72, 4, "#3e2723")),
-  tt("Cat", "Animals", "Cat face", Y(60, 64, 26, "#9e9e9e") + Z("M40 46 L36 24 L54 40 Z", "#9e9e9e") + Z("M80 46 L84 24 L66 40 Z", "#9e9e9e") + Y(51, 62, 3.4, "#212121") + Y(69, 62, 3.4, "#212121") + Z("M56 72 q4 4 8 0", "#212121")),
-  tt("Bird", "Animals", "Little bird", Lt(58, 62, 22, 17, "#42a5f5") + Y(74, 50, 10, "#42a5f5") + Z("M82 50 L96 54 L82 58 Z", "#fb8c00") + Y(77, 48, 2.4, "#212121") + Z("M40 64 q-16 4 -18 16 q18 -2 22 -8 Z", "#1e88e5")),
-  tt("Fish", "Animals", "Tropical fish", Lt(56, 62, 26, 16, "#26c6da") + Z("M82 62 L100 48 L100 76 Z", "#0097a7") + Y(44, 58, 2.6, "#063") + Z("M56 46 q0 -10 -8 -12 q2 8 8 12 Z", "#0097a7")),
-  tt("Paw", "Animals", "Paw print", Lt(60, 72, 14, 11, "#6d4c41") + Y(44, 52, 6, "#6d4c41") + Y(58, 44, 6, "#6d4c41") + Y(72, 46, 6, "#6d4c41") + Y(82, 58, 5, "#6d4c41")),
+  tt("Ladybug", "Animals", "Ladybug", U(60, 62, 24, "#e53935") + ht("M60 38 L60 86", "#3e2723", 2) + U(60, 40, 9, "#3e2723") + U(50, 56, 4, "#3e2723") + U(70, 56, 4, "#3e2723") + U(50, 72, 4, "#3e2723") + U(70, 72, 4, "#3e2723")),
+  tt("Cat", "Animals", "Cat face", U(60, 64, 26, "#9e9e9e") + Z("M40 46 L36 24 L54 40 Z", "#9e9e9e") + Z("M80 46 L84 24 L66 40 Z", "#9e9e9e") + U(51, 62, 3.4, "#212121") + U(69, 62, 3.4, "#212121") + Z("M56 72 q4 4 8 0", "#212121")),
+  tt("Bird", "Animals", "Little bird", Lt(58, 62, 22, 17, "#42a5f5") + U(74, 50, 10, "#42a5f5") + Z("M82 50 L96 54 L82 58 Z", "#fb8c00") + U(77, 48, 2.4, "#212121") + Z("M40 64 q-16 4 -18 16 q18 -2 22 -8 Z", "#1e88e5")),
+  tt("Fish", "Animals", "Tropical fish", Lt(56, 62, 26, 16, "#26c6da") + Z("M82 62 L100 48 L100 76 Z", "#0097a7") + U(44, 58, 2.6, "#063") + Z("M56 46 q0 -10 -8 -12 q2 8 8 12 Z", "#0097a7")),
+  tt("Paw", "Animals", "Paw print", Lt(60, 72, 14, 11, "#6d4c41") + U(44, 52, 6, "#6d4c41") + U(58, 44, 6, "#6d4c41") + U(72, 46, 6, "#6d4c41") + U(82, 58, 5, "#6d4c41")),
   // ---- Geometric ----
   tt("Diamond", "Geometric", "Diamond", Z("M60 20 L96 60 L60 100 L24 60 Z", "#1e88e5") + Z("M60 38 L78 60 L60 82 L42 60 Z", "#64b5f6", "satinV")),
   tt("Chevron", "Geometric", "Chevrons", [0, 18, 36].map((r, o) => ht(`M24 ${42 + r} L60 ${62 + r} L96 ${42 + r}`, ["#1e88e5", "#26a69a", "#ef6c00"][o], 5)).join("")),
-  tt("Mandala", "Geometric", "Mandala", Y(60, 60, 30, "#8e24aa") + Y(60, 60, 20, "#ab47bc", "satinV") + [...Array(8)].map((r, o) => {
+  tt("Mandala", "Geometric", "Mandala", U(60, 60, 30, "#8e24aa") + U(60, 60, 20, "#ab47bc", "satinV") + [...Array(8)].map((r, o) => {
     const n = o * 45 * Math.PI / 180;
-    return Y(60 + Math.cos(n) * 30, 60 + Math.sin(n) * 30, 5, "#f3e5f5");
-  }).join("") + Y(60, 60, 8, "#f3e5f5")),
+    return U(60 + Math.cos(n) * 30, 60 + Math.sin(n) * 30, 5, "#f3e5f5");
+  }).join("") + U(60, 60, 8, "#f3e5f5")),
   // ---- Symbols ----
   tt("Heart", "Symbols", "Heart", Z("M60 92 C24 66 30 34 50 34 C58 34 60 42 60 46 C60 42 62 34 70 34 C90 34 96 66 60 92 Z", "#e53935")),
   tt("Star", "Symbols", "Star", Z("M60 22 L71 50 L101 50 L77 68 L86 98 L60 80 L34 98 L43 68 L19 50 L49 50 Z", "#fbc02d")),
-  tt("Crown", "Symbols", "Crown", Z("M28 84 L34 46 L48 66 L60 40 L72 66 L86 46 L92 84 Z", "#f9a825") + Pt(28, 84, 64, 10, "#f57f17") + Y(34, 46, 5, "#fdd835") + Y(60, 40, 5, "#fdd835") + Y(86, 46, 5, "#fdd835")),
-  tt("Anchor", "Symbols", "Anchor", Y(60, 30, 7, "#37474f") + ht("M60 36 L60 92", "#455a64", 5) + ht("M40 60 L80 60", "#455a64", 5) + Z("M30 76 q6 22 30 22 q24 0 30 -22 q-12 14 -30 14 q-18 0 -30 -14 Z", "#37474f")),
+  tt("Crown", "Symbols", "Crown", Z("M28 84 L34 46 L48 66 L60 40 L72 66 L86 46 L92 84 Z", "#f9a825") + Pt(28, 84, 64, 10, "#f57f17") + U(34, 46, 5, "#fdd835") + U(60, 40, 5, "#fdd835") + U(86, 46, 5, "#fdd835")),
+  tt("Anchor", "Symbols", "Anchor", U(60, 30, 7, "#37474f") + ht("M60 36 L60 92", "#455a64", 5) + ht("M40 60 L80 60", "#455a64", 5) + Z("M30 76 q6 22 30 22 q24 0 30 -22 q-12 14 -30 14 q-18 0 -30 -14 Z", "#37474f")),
   tt("Lightning", "Symbols", "Lightning bolt", Z("M64 18 L40 64 L56 64 L50 102 L84 50 L66 50 Z", "#ffb300")),
-  tt("Music Note", "Symbols", "Music note", Y(46, 84, 11, "#5e35b1") + Y(82, 76, 11, "#5e35b1") + Pt(54, 30, 6, 54, "#5e35b1", 3) + Pt(85, 22, 6, 54, "#5e35b1", 3) + Z("M57 30 L91 22 L91 34 L57 42 Z", "#5e35b1")),
-  tt("Peace", "Symbols", "Peace sign", Y(60, 60, 30, "#43a047") + ht("M60 30 L60 90", "rgba(255,255,255,0.95)", 4) + ht("M60 60 L38 82", "rgba(255,255,255,0.95)", 4) + ht("M60 60 L82 82", "rgba(255,255,255,0.95)", 4)),
+  tt("Music Note", "Symbols", "Music note", U(46, 84, 11, "#5e35b1") + U(82, 76, 11, "#5e35b1") + Pt(54, 30, 6, 54, "#5e35b1", 3) + Pt(85, 22, 6, 54, "#5e35b1", 3) + Z("M57 30 L91 22 L91 34 L57 42 Z", "#5e35b1")),
+  tt("Peace", "Symbols", "Peace sign", U(60, 60, 30, "#43a047") + ht("M60 30 L60 90", "rgba(255,255,255,0.95)", 4) + ht("M60 60 L38 82", "rgba(255,255,255,0.95)", 4) + ht("M60 60 L82 82", "rgba(255,255,255,0.95)", 4)),
   // ---- Food ----
-  tt("Cupcake", "Food", "Cupcake", Z("M38 64 L82 64 L74 98 L46 98 Z", "#d7a86e") + Z("M34 64 q6 -28 26 -28 q20 0 26 28 Z", "#ec407a") + Y(48, 50, 3, "#fff") + Y(60, 44, 3, "#fff") + Y(72, 50, 3, "#fff") + Y(60, 34, 5, "#e53935")),
-  tt("Cherries", "Food", "Cherries", Y(46, 84, 12, "#e53935") + Y(74, 84, 12, "#c62828") + ht("M46 72 C50 50 60 40 64 30", "#2e7d32", 2.5) + ht("M74 72 C70 52 66 42 64 30", "#2e7d32", 2.5) + Z("M64 30 q14 -8 22 -2 q-12 8 -22 2 Z", "#43a047")),
+  tt("Cupcake", "Food", "Cupcake", Z("M38 64 L82 64 L74 98 L46 98 Z", "#d7a86e") + Z("M34 64 q6 -28 26 -28 q20 0 26 28 Z", "#ec407a") + U(48, 50, 3, "#fff") + U(60, 44, 3, "#fff") + U(72, 50, 3, "#fff") + U(60, 34, 5, "#e53935")),
+  tt("Cherries", "Food", "Cherries", U(46, 84, 12, "#e53935") + U(74, 84, 12, "#c62828") + ht("M46 72 C50 50 60 40 64 30", "#2e7d32", 2.5) + ht("M74 72 C70 52 66 42 64 30", "#2e7d32", 2.5) + Z("M64 30 q14 -8 22 -2 q-12 8 -22 2 Z", "#43a047")),
   tt("Coffee", "Food", "Coffee cup", Z("M34 50 L84 50 L80 92 L38 92 Z", "#6d4c41") + Z("M84 56 q16 0 16 14 q0 14 -18 12", "#6d4c41") + ht("M48 38 q4 -8 0 -14", "#bcaaa4", 2.5) + ht("M60 38 q4 -8 0 -14", "#bcaaa4", 2.5) + ht("M72 38 q4 -8 0 -14", "#bcaaa4", 2.5)),
   // ---- Sports ----
-  tt("Soccer Ball", "Sports", "Soccer ball", Y(60, 60, 32, "#fafafa") + Z("M60 44 L74 54 L69 72 L51 72 L46 54 Z", "#212121") + pi(60, 60, 5, 12, 30, "#212121", 2)),
-  tt("Basketball", "Sports", "Basketball", Y(60, 60, 32, "#ef6c00") + ht("M60 28 L60 92", "#3e2723", 2.5) + ht("M28 60 L92 60", "#3e2723", 2.5) + ht("M36 36 Q60 60 36 84", "#3e2723", 2.5) + ht("M84 36 Q60 60 84 84", "#3e2723", 2.5)),
+  tt("Soccer Ball", "Sports", "Soccer ball", U(60, 60, 32, "#fafafa") + Z("M60 44 L74 54 L69 72 L51 72 L46 54 Z", "#212121") + mi(60, 60, 5, 12, 30, "#212121", 2)),
+  tt("Basketball", "Sports", "Basketball", U(60, 60, 32, "#ef6c00") + ht("M60 28 L60 92", "#3e2723", 2.5) + ht("M28 60 L92 60", "#3e2723", 2.5) + ht("M36 36 Q60 60 36 84", "#3e2723", 2.5) + ht("M84 36 Q60 60 84 84", "#3e2723", 2.5)),
   // ---- Holiday ----
   tt("Snowflake", "Holiday", "Snowflake", [...Array(6)].map((r, o) => {
     const n = o * 60 * Math.PI / 180, s = 60 + Math.cos(n) * 38, l = 60 + Math.sin(n) * 38, h = 60 + Math.cos(n) * 22, f = 60 + Math.sin(n) * 22;
     return ht(`M60 60 L${s} ${l}`, "#4fc3f7", 3) + ht(`M${h} ${f} L${h + Math.cos(n + 0.5) * 10} ${f + Math.sin(n + 0.5) * 10}`, "#4fc3f7", 2) + ht(`M${h} ${f} L${h + Math.cos(n - 0.5) * 10} ${f + Math.sin(n - 0.5) * 10}`, "#4fc3f7", 2);
-  }).join("") + Y(60, 60, 5, "#81d4fa")),
+  }).join("") + U(60, 60, 5, "#81d4fa")),
   tt("Gift", "Holiday", "Gift box", Pt(34, 54, 52, 44, "#e53935", 4) + Pt(54, 54, 12, 44, "#fff", 2) + Pt(34, 50, 52, 12, "#c62828", 3) + Z("M60 50 q-18 -22 -2 -22 q8 0 2 22 Z", "#fbc02d") + Z("M60 50 q18 -22 2 -22 q-8 0 -2 22 Z", "#fbc02d")),
-  tt("Holly", "Holiday", "Holly & berries", Z("M40 60 q10 -22 22 -10 q-2 16 -22 10 Z", "#2e7d32") + Z("M80 60 q-10 -22 -22 -10 q2 16 22 10 Z", "#388e3c") + Z("M50 78 q10 -16 20 -6 q-4 14 -20 6 Z", "#43a047") + Y(56, 64, 5, "#e53935") + Y(64, 64, 5, "#c62828") + Y(60, 72, 5, "#e53935")),
+  tt("Holly", "Holiday", "Holly & berries", Z("M40 60 q10 -22 22 -10 q-2 16 -22 10 Z", "#2e7d32") + Z("M80 60 q-10 -22 -22 -10 q2 16 22 10 Z", "#388e3c") + Z("M50 78 q10 -16 20 -6 q-4 14 -20 6 Z", "#43a047") + U(56, 64, 5, "#e53935") + U(64, 64, 5, "#c62828") + U(60, 72, 5, "#e53935")),
   // ---- Text ----
-  tt("Monogram", "Text", "Initial monogram", Y(60, 60, 34, "#5e35b1") + Y(60, 60, 34, "#5e35b1", "satinV") + '<text x="60" y="75" text-anchor="middle" font-family="Georgia, serif" font-size="46" font-weight="700" fill="#ede7f6">A</text>')
+  tt("Monogram", "Text", "Initial monogram", U(60, 60, 34, "#5e35b1") + U(60, 60, 34, "#5e35b1", "satinV") + '<text x="60" y="75" text-anchor="middle" font-family="Georgia, serif" font-size="46" font-weight="700" fill="#ede7f6">A</text>')
 ], ma = ({ isOpen: r, onClose: o, onAddEmbroidery: n, theme: s, apiKey: l, apiEndpoint: h }) => {
   const [f, w] = E([]), [k, A] = E(!1), [F, T] = E(null), [S, B] = E(""), [I, H] = E("All"), Q = dt(null), N = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
-  ct(() => {
+  st(() => {
     r && w(ua);
   }, [r]);
   const z = (L) => {
@@ -3515,26 +3515,26 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
     width: 300,
     height: 90
   }
-}), ao = ["#b07e4f", "#7d4f28"], Pe = ["#f3e6cf", "#e3cda6"], yi = ["#dfe4ea", "#9aa4b1"], xi = ["#3a4651", "#222a31"], xa = [
+}), ao = ["#b07e4f", "#7d4f28"], He = ["#f3e6cf", "#e3cda6"], pi = ["#dfe4ea", "#9aa4b1"], yi = ["#3a4651", "#222a31"], xa = [
   // ---- Signage ----
-  Ot("Welcome", "Signage", "Bold welcome sign", { text: "WELCOME", font: "Bebas Neue", sysFont: "Impact, sans-serif", ink: "#3a2a1a", card: Pe, size: 46, previewSize: 34 }),
+  Ot("Welcome", "Signage", "Bold welcome sign", { text: "WELCOME", font: "Bebas Neue", sysFont: "Impact, sans-serif", ink: "#3a2a1a", card: He, size: 46, previewSize: 34 }),
   Ot("Open", "Signage", "Shop open sign", { text: "OPEN", font: "Anton", sysFont: "Impact, sans-serif", ink: "#7a3b12", card: ao, size: 54, previewSize: 40 }),
-  Ot("Café", "Signage", "Café script sign", { text: "Café", font: "Pacifico", sysFont: '"Brush Script MT", cursive', ink: "#f5f5f5", card: xi, size: 50, previewSize: 38 }),
-  Ot("Gather", "Signage", "Gather sign", { text: "gather", font: "Playfair Display", sysFont: "Georgia, serif", ink: "#2e2a26", card: Pe, size: 46, style: "italic", previewSize: 36 }),
+  Ot("Café", "Signage", "Café script sign", { text: "Café", font: "Pacifico", sysFont: '"Brush Script MT", cursive', ink: "#f5f5f5", card: yi, size: 50, previewSize: 38 }),
+  Ot("Gather", "Signage", "Gather sign", { text: "gather", font: "Playfair Display", sysFont: "Georgia, serif", ink: "#2e2a26", card: He, size: 46, style: "italic", previewSize: 36 }),
   // ---- Home & Family ----
   Ot("Family Name", "Home", "Family name plaque", { text: "The Smiths", font: "Great Vibes", sysFont: '"Brush Script MT", cursive', ink: "#3a2a1a", card: ao, size: 48, previewSize: 30 }),
-  Ot("Home Sweet Home", "Home", "Home sweet home", { text: "Home Sweet Home", font: "Dancing Script", sysFont: '"Brush Script MT", cursive', ink: "#3a2a1a", card: Pe, size: 40, previewSize: 22 }),
-  Ot("House Number", "Home", "House number", { text: "123", font: "Alfa Slab One", sysFont: "Georgia, serif", ink: "#2b3036", card: yi, size: 64, previewSize: 48 }),
-  Ot("Address", "Home", "Street address", { text: "21 OAK STREET", font: "Oswald", sysFont: "Arial, sans-serif", ink: "#f5f5f5", card: xi, size: 34, previewSize: 18 }),
+  Ot("Home Sweet Home", "Home", "Home sweet home", { text: "Home Sweet Home", font: "Dancing Script", sysFont: '"Brush Script MT", cursive', ink: "#3a2a1a", card: He, size: 40, previewSize: 22 }),
+  Ot("House Number", "Home", "House number", { text: "123", font: "Alfa Slab One", sysFont: "Georgia, serif", ink: "#2b3036", card: pi, size: 64, previewSize: 48 }),
+  Ot("Address", "Home", "Street address", { text: "21 OAK STREET", font: "Oswald", sysFont: "Arial, sans-serif", ink: "#f5f5f5", card: yi, size: 34, previewSize: 18 }),
   // ---- Celebrations ----
-  Ot("Mr & Mrs", "Wedding", "Wedding sign", { text: "Mr & Mrs", font: "Great Vibes", sysFont: '"Brush Script MT", cursive', ink: "#3a2a1a", card: Pe, size: 52, previewSize: 34 }),
-  Ot("Joy", "Celebrations", "Holiday joy", { text: "Joy", font: "Sacramento", sysFont: '"Brush Script MT", cursive', ink: "#f5f5f5", card: xi, size: 60, previewSize: 46 }),
-  Ot("Established", "Celebrations", "Established year", { text: "EST. 2024", font: "Staatliches", sysFont: "Impact, sans-serif", ink: "#2b3036", card: yi, size: 44, previewSize: 30 }),
+  Ot("Mr & Mrs", "Wedding", "Wedding sign", { text: "Mr & Mrs", font: "Great Vibes", sysFont: '"Brush Script MT", cursive', ink: "#3a2a1a", card: He, size: 52, previewSize: 34 }),
+  Ot("Joy", "Celebrations", "Holiday joy", { text: "Joy", font: "Sacramento", sysFont: '"Brush Script MT", cursive', ink: "#f5f5f5", card: yi, size: 60, previewSize: 46 }),
+  Ot("Established", "Celebrations", "Established year", { text: "EST. 2024", font: "Staatliches", sysFont: "Impact, sans-serif", ink: "#2b3036", card: pi, size: 44, previewSize: 30 }),
   // ---- Business ----
-  Ot("Office", "Business", "Office name plate", { text: "OFFICE", font: "Oswald", sysFont: "Arial, sans-serif", ink: "#2b3036", card: yi, size: 40, previewSize: 30 })
+  Ot("Office", "Business", "Office name plate", { text: "OFFICE", font: "Oswald", sysFont: "Arial, sans-serif", ink: "#2b3036", card: pi, size: 40, previewSize: 30 })
 ], ba = ({ isOpen: r, onClose: o, onAddHandcraft: n, theme: s }) => {
   const [l, h] = E([]), [f, w] = E(""), [k, A] = E("All"), F = dt(null), T = ["All", "Signage", "Business", "Home", "Wedding", "Celebrations"];
-  ct(() => {
+  st(() => {
     r && h(xa);
   }, [r]);
   const S = (I) => {
@@ -3598,18 +3598,18 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
   ] }) }) : null;
 }, Sa = ({ isOpen: r, onClose: o, onAddText: n, theme: s }) => {
   const [l, h] = E(""), [f, w] = E("All");
-  ct(() => {
+  st(() => {
     if (!r) return;
     const S = Array.from(new Set(ie.map((B) => B.fontFamily).filter(Boolean)));
-    $e(S);
+    Ge(S);
   }, [r]);
-  const k = wi(() => {
+  const k = vi(() => {
     const S = ie.reduce((B, I) => (B[I.category] = (B[I.category] || 0) + 1, B), {});
     return [
       { name: "All", count: ie.length },
       ...Object.entries(S).map(([B, I]) => ({ name: B, count: I }))
     ];
-  }, [ie]), A = wi(() => ie.filter((S) => {
+  }, [ie]), A = vi(() => ie.filter((S) => {
     const B = !l || S.text.toLowerCase().includes(l.toLowerCase()) || S.category.toLowerCase().includes(l.toLowerCase()), I = f === "All" || S.category === f;
     return B && I;
   }), [ie, l, f]), F = (S) => {
@@ -3719,65 +3719,65 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
   onAIImageGenerate: w
 }) => {
   const [k, A] = E(""), [F, T] = E(null), [S, B] = E(!1), [I, H] = E(null), [Q, N] = E(null), z = dt(null);
-  if (ct(() => {
+  if (st(() => {
     r && (N(null), B(!1));
   }, [r]), !r) return null;
-  const b = (s == null ? void 0 : s.primaryColor) || "#4c5bf2", L = !S && (k.trim().length > 0 || !!F), j = (_) => {
-    var st;
-    const O = (st = _.target.files) == null ? void 0 : st[0];
+  const b = (s == null ? void 0 : s.primaryColor) || "#4c5bf2", L = !S && (k.trim().length > 0 || !!F), j = (V) => {
+    var lt;
+    const O = (lt = V.target.files) == null ? void 0 : lt[0];
     if (!O || !O.type.startsWith("image/")) return;
     const R = new FileReader();
-    R.onload = (rt) => T({ dataUrl: rt.target.result, name: O.name }), R.onerror = () => N("Could not read that image. Please try another file."), R.readAsDataURL(O), _.target.value = "";
-  }, it = () => T(null), J = (_) => {
-    const O = _ && typeof _ == "object" && "object" in _ ? _.object : _;
+    R.onload = (rt) => T({ dataUrl: rt.target.result, name: O.name }), R.onerror = () => N("Could not read that image. Please try another file."), R.readAsDataURL(O), V.target.value = "";
+  }, it = () => T(null), J = (V) => {
+    const O = V && typeof V == "object" && "object" in V ? V.object : V;
     return O ? typeof O == "string" ? O : O.imageUrl || O.url || O.image || (O.imageBase64 ? `data:image/png;base64,${O.imageBase64}` : null) : null;
-  }, bt = async () => {
-    var _, O;
+  }, St = async () => {
+    var V, O;
     N(null), B(!0), H(null);
     try {
       const R = { prompt: k.trim(), imageDataUrl: (F == null ? void 0 : F.dataUrl) || null };
-      let st = null;
+      let lt = null;
       if (typeof w == "function") {
         const rt = await w(R);
-        st = typeof rt == "string" ? rt : J(rt);
+        lt = typeof rt == "string" ? rt : J(rt);
       } else {
         const rt = f || (h ? `${h}/api/v1/designer` : "");
         if (!rt)
           throw new Error("AI image generation is not configured.");
-        const yt = await ki.post(`${rt}/generate-image`, {
+        const yt = await wi.post(`${rt}/generate-image`, {
           prompt: R.prompt,
           image: R.imageDataUrl,
           apiKey: l
         });
-        st = J(yt.data);
+        lt = J(yt.data);
       }
-      if (!st) throw new Error("No image was returned. Please try a different prompt.");
-      H(st);
+      if (!lt) throw new Error("No image was returned. Please try a different prompt.");
+      H(lt);
     } catch (R) {
       console.error("AI image generation failed:", R), N(
-        ((O = (_ = R == null ? void 0 : R.response) == null ? void 0 : _.data) == null ? void 0 : O.message) || (R == null ? void 0 : R.message) || "Image generation failed. Please try again."
+        ((O = (V = R == null ? void 0 : R.response) == null ? void 0 : V.data) == null ? void 0 : O.message) || (R == null ? void 0 : R.message) || "Image generation failed. Please try again."
       );
     } finally {
       B(!1);
     }
   }, pt = () => {
     if (!I) return;
-    const _ = new Image();
-    _.crossOrigin = "anonymous", _.onload = () => {
-      const R = _.naturalWidth || 512, st = _.naturalHeight || 512, rt = Math.min(1, 250 / Math.max(R, st));
+    const V = new Image();
+    V.crossOrigin = "anonymous", V.onload = () => {
+      const R = V.naturalWidth || 512, lt = V.naturalHeight || 512, rt = Math.min(1, 250 / Math.max(R, lt));
       n({
-        imageData: _,
+        imageData: V,
         src: I,
         width: Math.round(R * rt),
-        height: Math.round(st * rt),
+        height: Math.round(lt * rt),
         originalWidth: R,
-        originalHeight: st
+        originalHeight: lt
       }), o();
-    }, _.onerror = () => N("The generated image could not be loaded onto the canvas."), _.src = I;
-  }, zt = () => {
+    }, V.onerror = () => N("The generated image could not be loaded onto the canvas."), V.src = I;
+  }, Tt = () => {
     H(null), N(null);
   };
-  return /* @__PURE__ */ e.jsx("div", { className: "ai-modal-overlay", onClick: o, children: /* @__PURE__ */ e.jsxs("div", { className: "ai-modal-content", onClick: (_) => _.stopPropagation(), children: [
+  return /* @__PURE__ */ e.jsx("div", { className: "ai-modal-overlay", onClick: o, children: /* @__PURE__ */ e.jsxs("div", { className: "ai-modal-content", onClick: (V) => V.stopPropagation(), children: [
     /* @__PURE__ */ e.jsxs("div", { className: "ai-modal-header", children: [
       /* @__PURE__ */ e.jsx("h3", { children: "✨ AI Image Generator" }),
       /* @__PURE__ */ e.jsx("button", { className: "ai-modal-close", onClick: o, "aria-label": "Close", children: "×" })
@@ -3798,7 +3798,7 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
             rows: 4,
             placeholder: "e.g. a minimalist mountain logo · a bold retro sunset · a cute cartoon cat mascot · a seamless floral pattern",
             value: k,
-            onChange: (_) => A(_.target.value)
+            onChange: (V) => A(V.target.value)
           }
         ),
         /* @__PURE__ */ e.jsxs("div", { className: "ai-ref-section", children: [
@@ -3815,8 +3815,8 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
               type: "button",
               className: "ai-upload-btn",
               onClick: () => {
-                var _;
-                return (_ = z.current) == null ? void 0 : _.click();
+                var V;
+                return (V = z.current) == null ? void 0 : V.click();
               },
               children: "+ Upload an image to transform"
             }
@@ -3841,7 +3841,7 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
             className: "ai-generate-btn",
             style: { backgroundColor: b, opacity: L ? 1 : 0.6 },
             disabled: !L,
-            onClick: bt,
+            onClick: St,
             children: S ? /* @__PURE__ */ e.jsxs("span", { className: "ai-generating", children: [
               /* @__PURE__ */ e.jsx("span", { className: "ai-spinner" }),
               " Generating…"
@@ -3853,13 +3853,13 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
         /* @__PURE__ */ e.jsx("div", { className: "ai-result-preview", children: /* @__PURE__ */ e.jsx("img", { src: I, alt: "AI generated result" }) }),
         Q && /* @__PURE__ */ e.jsx("div", { className: "ai-error", children: Q }),
         /* @__PURE__ */ e.jsxs("div", { className: "ai-result-actions", children: [
-          /* @__PURE__ */ e.jsx("button", { type: "button", className: "ai-secondary-btn", onClick: zt, children: "Start over" }),
+          /* @__PURE__ */ e.jsx("button", { type: "button", className: "ai-secondary-btn", onClick: Tt, children: "Start over" }),
           /* @__PURE__ */ e.jsx(
             "button",
             {
               type: "button",
               className: "ai-secondary-btn",
-              onClick: bt,
+              onClick: St,
               disabled: S,
               children: S ? "Regenerating…" : "Regenerate"
             }
@@ -3904,53 +3904,57 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
   apiKey: it,
   apiEndpoint: J,
   // AI image generation: on by default; host can disable.
-  aiEnabled: bt = !0,
+  aiEnabled: St = !0,
   aiEndpoint: pt,
-  onAIImageGenerate: zt,
+  onAIImageGenerate: Tt,
   // Login gate: when not authenticated, the AI button asks the
   // host to send the visitor to sign in instead of opening the modal.
-  isAuthenticated: _ = !0,
+  isAuthenticated: V = !0,
   onRequireAuth: O
 }) => {
-  const R = b === "customize", rt = (L || []).some((V) => String(V).toUpperCase() === "EMBROIDERY") || j === "Y", yt = (L || []).some((V) => String(V).toUpperCase() === "HANDCRAFTED"), [v, q] = E(!1), [P, g] = E(!1), [M, U] = E(!1), [ot, St] = E(!1), [ft, Rt] = E(!1), [Ct, xt] = E(!1), [Ft, Gt] = E(!1), [ee, oe] = E(!1), [ae, de] = E(!1), [vt, re] = E(!1), X = !R || vt, je = (V) => {
-    const Ut = V.target.files[0];
-    Ut && Ut.type.startsWith("image/") && A(Ut), V.target.value = "";
-  }, Qt = (V) => {
+  const R = b === "customize", rt = (L || []).some((q) => String(q).toUpperCase() === "EMBROIDERY") || j === "Y", yt = (L || []).some((q) => String(q).toUpperCase() === "HANDCRAFTED"), [v, X] = E(!1), [P, g] = E(!1), [M, _] = E(!1), [ot, vt] = E(!1), [ft, Rt] = E(!1), [Ft, xt] = E(!1), [Nt, $t] = E(!1), [oe, je] = E(!1), [ae, re] = E(!1), [jt, Zt] = E(!1), [Y, Ce] = E(!1), Vt = !R || Y;
+  st(() => {
+    V && oe && ($t(!0), je(!1));
+  }, [V, oe]);
+  const qe = (q) => {
+    const Yt = q.target.files[0];
+    Yt && Yt.type.startsWith("image/") && A(Yt), q.target.value = "";
+  }, Xe = (q) => {
     r("icon", {
-      iconData: V,
-      text: V.symbol,
+      iconData: q,
+      text: q.symbol,
       fontSize: 48,
       fontFamily: "Arial",
       fill: "#000000"
     });
-  }, Ue = (V) => {
-    r("qrcode", V);
-  }, Ye = (V) => {
-    r("barcode", V);
-  }, he = (V) => {
-    r("sticker", V);
-  }, _t = (V) => {
-    r("embroidery", V);
-  }, ne = (V) => {
-    r("text", V);
-  }, Wt = (V, Ut) => {
-    r(V, Ut);
-  }, Ce = (V) => {
-    r("image", V);
-  }, At = () => {
-    oe(!ee), de(!1);
-  }, se = () => {
-    de(!ae), oe(!1);
-  }, qe = (V) => {
-    V === "custom" ? r("text") : V === "templates" && xt(!0), oe(!1);
+  }, de = (q) => {
+    r("qrcode", q);
+  }, Ut = (q) => {
+    r("barcode", q);
+  }, ne = (q) => {
+    r("sticker", q);
+  }, Wt = (q) => {
+    r("embroidery", q);
+  }, Fe = (q) => {
+    r("text", q);
+  }, Et = (q, Yt) => {
+    r(q, Yt);
+  }, se = (q) => {
+    r("image", q);
+  }, Ti = () => {
+    re(!ae), Zt(!1);
+  }, Bt = () => {
+    Zt(!jt), re(!1);
+  }, Ne = (q) => {
+    q === "custom" ? r("text") : q === "templates" && xt(!0), re(!1);
   };
-  ct(() => {
-    Ti(ro.map((V) => V.fontFamily).filter(Boolean));
+  st(() => {
+    zi(ro.map((q) => q.fontFamily).filter(Boolean));
   }, []);
-  const Bt = (V) => {
-    r("text", { ...V }), oe(!1);
-  }, Et = (V) => {
-    r(V), de(!1);
+  const he = (q) => {
+    r("text", { ...q }), re(!1);
+  }, bt = (q) => {
+    r(q), Zt(!1);
   }, at = "#475569";
   return /* @__PURE__ */ e.jsxs("div", { className: "toolbar", children: [
     /* @__PURE__ */ e.jsxs("div", { className: "toolbar-section", children: [
@@ -3983,17 +3987,17 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
         )
       ] }),
       /* @__PURE__ */ e.jsx("div", { className: "toolbar-separator" }),
-      bt && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      St && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsx("div", { className: "toolbar-group", children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             className: "toolbar-btn compact ai-btn",
             onClick: () => {
-              if (!_) {
-                O && O();
+              if (!V) {
+                je(!0), O && O();
                 return;
               }
-              Gt(!0);
+              $t(!0);
             },
             disabled: z,
             title: "AI: generate artwork, images, logos, icons and much more",
@@ -4017,42 +4021,42 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
               className: "toolbar-btn compact dropdown-trigger",
               disabled: z,
               title: "Add Text",
-              onClick: At,
+              onClick: Ti,
               children: [
                 /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "text", size: 18, color: z ? "#94a3b8" : at }) }),
                 /* @__PURE__ */ e.jsx("span", { className: "label", children: "Text" }),
-                /* @__PURE__ */ e.jsx("span", { className: `dropdown-arrow ${ee ? "open" : ""}`, children: "▾" })
+                /* @__PURE__ */ e.jsx("span", { className: `dropdown-arrow ${ae ? "open" : ""}`, children: "▾" })
               ]
             }
           ),
-          /* @__PURE__ */ e.jsxs("div", { className: `dropdown-menu text-design-menu ${ee ? "show" : ""}`, style: { minWidth: 240 }, children: [
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => qe("custom"), children: [
+          /* @__PURE__ */ e.jsxs("div", { className: `dropdown-menu text-design-menu ${ae ? "show" : ""}`, style: { minWidth: 240 }, children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => Ne("custom"), children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "text", size: 16, color: at }) }),
               " Custom text"
             ] }),
             /* @__PURE__ */ e.jsx("div", { style: { padding: "6px 10px 2px", fontSize: 11, fontWeight: 700, color: "#94a3b8", textTransform: "uppercase", letterSpacing: 0.5 }, children: "Design ideas" }),
-            ro.map((V) => /* @__PURE__ */ e.jsx(
+            ro.map((q) => /* @__PURE__ */ e.jsx(
               "button",
               {
-                onClick: () => Bt(V),
-                title: `Add "${V.text}"`,
+                onClick: () => he(q),
+                title: `Add "${q.text}"`,
                 style: { justifyContent: "flex-start" },
                 children: /* @__PURE__ */ e.jsx("span", { style: {
-                  fontFamily: `'${V.fontFamily}', cursive`,
-                  fontWeight: V.fontWeight || "normal",
-                  fontStyle: V.fontStyle || "normal",
-                  color: V.fill || "#111827",
+                  fontFamily: `'${q.fontFamily}', cursive`,
+                  fontWeight: q.fontWeight || "normal",
+                  fontStyle: q.fontStyle || "normal",
+                  color: q.fill || "#111827",
                   fontSize: 18,
                   lineHeight: 1.2,
                   whiteSpace: "nowrap",
                   overflow: "hidden",
                   textOverflow: "ellipsis",
-                  textTransform: V.textTransform || "none"
-                }, children: V.text })
+                  textTransform: q.textTransform || "none"
+                }, children: q.text })
               },
-              V.id
+              q.id
             )),
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => qe("templates"), style: { borderTop: "1px solid #e2e8f0", marginTop: 4, color: "#2563eb", fontWeight: 600 }, children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => Ne("templates"), style: { borderTop: "1px solid #e2e8f0", marginTop: 4, color: "#2563eb", fontWeight: 600 }, children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "book", size: 16, color: "#2563eb" }) }),
               " More designs…"
             ] })
@@ -4062,76 +4066,76 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
           "button",
           {
             type: "button",
-            className: `toolbar-btn compact ${vt ? "active" : ""}`,
-            onClick: () => re((V) => !V),
+            className: `toolbar-btn compact ${Y ? "active" : ""}`,
+            onClick: () => Ce((q) => !q),
             title: "More tools (shapes, QR code, barcode, grid)",
             children: [
-              /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "gear", size: 18, color: vt ? "#ffffff" : at }) }),
+              /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "gear", size: 18, color: Y ? "#ffffff" : at }) }),
               /* @__PURE__ */ e.jsx("span", { className: "label", children: "More" }),
-              /* @__PURE__ */ e.jsx("span", { className: `dropdown-arrow ${vt ? "open" : ""}`, children: "▾" })
+              /* @__PURE__ */ e.jsx("span", { className: `dropdown-arrow ${Y ? "open" : ""}`, children: "▾" })
             ]
           }
         ),
-        X && /* @__PURE__ */ e.jsxs("div", { className: "toolbar-dropdown", children: [
+        Vt && /* @__PURE__ */ e.jsxs("div", { className: "toolbar-dropdown", children: [
           /* @__PURE__ */ e.jsxs(
             "button",
             {
               className: "toolbar-btn compact dropdown-trigger",
               disabled: z,
-              onClick: se,
+              onClick: Bt,
               children: [
                 /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "shapes", size: 18, color: z ? "#94a3b8" : at }) }),
                 /* @__PURE__ */ e.jsx("span", { className: "label", children: "Shapes" }),
-                /* @__PURE__ */ e.jsx("span", { className: `dropdown-arrow ${ae ? "open" : ""}`, children: "▾" })
+                /* @__PURE__ */ e.jsx("span", { className: `dropdown-arrow ${jt ? "open" : ""}`, children: "▾" })
               ]
             }
           ),
-          /* @__PURE__ */ e.jsxs("div", { className: `dropdown-menu ${ae ? "show" : ""}`, children: [
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => Et("rectangle"), children: [
+          /* @__PURE__ */ e.jsxs("div", { className: `dropdown-menu ${jt ? "show" : ""}`, children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => bt("rectangle"), children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "rectangle", size: 16, color: at }) }),
               " Rectangle"
             ] }),
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => Et("circle"), children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => bt("circle"), children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "circle", size: 16, color: at }) }),
               " Circle"
             ] }),
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => Et("triangle"), children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => bt("triangle"), children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "triangle", size: 16, color: at }) }),
               " Triangle"
             ] }),
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => Et("star"), children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => bt("star"), children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "star", size: 16, color: at }) }),
               " Star"
             ] }),
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => Et("heart"), children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => bt("heart"), children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "heart", size: 16, color: at }) }),
               " Heart"
             ] }),
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => Et("arrow"), children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => bt("arrow"), children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "arrowShape", size: 16, color: at }) }),
               " Arrow"
             ] }),
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => Et("diamond"), children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => bt("diamond"), children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "diamond", size: 16, color: at }) }),
               " Diamond"
             ] }),
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => Et("hexagon"), children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => bt("hexagon"), children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "hexagon", size: 16, color: at }) }),
               " Hexagon"
             ] }),
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => Et("pentagon"), children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => bt("pentagon"), children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "pentagon", size: 16, color: at }) }),
               " Pentagon"
             ] }),
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => Et("oval"), children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => bt("oval"), children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "oval", size: 16, color: at }) }),
               " Oval"
             ] }),
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => Et("roundedRectangle"), children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => bt("roundedRectangle"), children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "roundedRect", size: 16, color: at }) }),
               " Rounded Rectangle"
             ] }),
-            /* @__PURE__ */ e.jsxs("button", { onClick: () => Et("horizontalLine"), children: [
+            /* @__PURE__ */ e.jsxs("button", { onClick: () => bt("horizontalLine"), children: [
               /* @__PURE__ */ e.jsx("span", { className: "icon", children: /* @__PURE__ */ e.jsx(K, { name: "horizontalLine", size: 16, color: at }) }),
               " Horizontal Line"
             ] })
@@ -4146,18 +4150,18 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
             {
               type: "file",
               accept: "image/*",
-              onChange: je,
+              onChange: qe,
               disabled: z
             }
           )
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ e.jsx(la, { onSelectIcon: Qt, theme: N, disabled: z }),
+        /* @__PURE__ */ e.jsx(la, { onSelectIcon: Xe, theme: N, disabled: z }),
         /* @__PURE__ */ e.jsxs(
           "button",
           {
             className: "toolbar-btn compact",
-            onClick: () => U(!0),
+            onClick: () => _(!0),
             disabled: z,
             title: "Add Sticker",
             children: [
@@ -4166,13 +4170,13 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
             ]
           }
         ),
-        X && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        Vt && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
           /* @__PURE__ */ e.jsx("div", { className: "toolbar-separator" }),
           /* @__PURE__ */ e.jsxs(
             "button",
             {
               className: "toolbar-btn compact",
-              onClick: () => q(!0),
+              onClick: () => X(!0),
               disabled: z,
               title: "Add QR Code",
               children: [
@@ -4202,7 +4206,7 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
           "button",
           {
             className: "toolbar-btn compact",
-            onClick: () => St(!0),
+            onClick: () => vt(!0),
             disabled: z,
             title: "Add Embroidery Design",
             children: [
@@ -4259,7 +4263,7 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
           )
         ] })
       ] }),
-      X && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      Vt && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsx("div", { className: "toolbar-separator" }),
         /* @__PURE__ */ e.jsxs("div", { className: "toolbar-group", children: [
           /* @__PURE__ */ e.jsxs(
@@ -4317,8 +4321,8 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
       ca,
       {
         isOpen: v,
-        onClose: () => q(!1),
-        onAddQRCode: Ue,
+        onClose: () => X(!1),
+        onAddQRCode: de,
         theme: N
       }
     ),
@@ -4327,7 +4331,7 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
       {
         isOpen: P,
         onClose: () => g(!1),
-        onAddBarcode: Ye,
+        onAddBarcode: Ut,
         theme: N
       }
     ),
@@ -4335,8 +4339,8 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
       fa,
       {
         isOpen: M,
-        onClose: () => U(!1),
-        onAddSticker: he,
+        onClose: () => _(!1),
+        onAddSticker: ne,
         theme: N,
         apiKey: it,
         apiEndpoint: J
@@ -4346,8 +4350,8 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
       ma,
       {
         isOpen: ot,
-        onClose: () => St(!1),
-        onAddEmbroidery: _t,
+        onClose: () => vt(!1),
+        onAddEmbroidery: Wt,
         theme: N,
         apiKey: it,
         apiEndpoint: J
@@ -4358,30 +4362,30 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
       {
         isOpen: ft,
         onClose: () => Rt(!1),
-        onAddHandcraft: ne,
+        onAddHandcraft: Fe,
         theme: N
       }
     ),
     /* @__PURE__ */ e.jsx(
       Sa,
       {
-        isOpen: Ct,
+        isOpen: Ft,
         onClose: () => xt(!1),
-        onAddText: Wt,
+        onAddText: Et,
         theme: N
       }
     ),
-    bt && /* @__PURE__ */ e.jsx(
+    St && /* @__PURE__ */ e.jsx(
       va,
       {
-        isOpen: Ft,
-        onClose: () => Gt(!1),
-        onAddImage: Ce,
+        isOpen: Nt,
+        onClose: () => $t(!1),
+        onAddImage: se,
         theme: N,
         apiKey: it,
         apiEndpoint: J,
         aiEndpoint: pt,
-        onAIImageGenerate: zt
+        onAIImageGenerate: Tt
       }
     )
   ] });
@@ -4389,9 +4393,9 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
 }, onFontLoaded: n = () => {
 } }) => {
   const [s, l] = E(!1), [h, f] = E(""), w = dt(null);
-  ct(() => {
-    s && $e(no);
-  }, [s]), ct(() => {
+  st(() => {
+    s && Ge(no);
+  }, [s]), st(() => {
     if (!s) return;
     const F = (S) => {
       w.current && !w.current.contains(S.target) && l(!1);
@@ -4402,9 +4406,9 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
       document.removeEventListener("mousedown", F), document.removeEventListener("keydown", T);
     };
   }, [s]);
-  const k = wi(() => {
+  const k = vi(() => {
     const F = h.trim().toLowerCase();
-    return F ? ji.map((T) => ({ ...T, fonts: T.fonts.filter((S) => S.toLowerCase().includes(F)) })).filter((T) => T.fonts.length > 0) : ji;
+    return F ? ki.map((T) => ({ ...T, fonts: T.fonts.filter((S) => S.toLowerCase().includes(F)) })).filter((T) => T.fonts.length > 0) : ki;
   }, [h]), A = async (F) => {
     o(F), l(!1), f(""), await so(F), n();
   };
@@ -4487,7 +4491,7 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
                 "button",
                 {
                   type: "button",
-                  onMouseEnter: () => $e([T]),
+                  onMouseEnter: () => Ge([T]),
                   onClick: () => A(T),
                   style: {
                     width: "100%",
@@ -4516,7 +4520,7 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
       }
     )
   ] });
-}, He = [
+}, Ve = [
   { name: "White", hex: "#FFFFFF" },
   { name: "Ecru", hex: "#F3EAD3" },
   { name: "Cream", hex: "#F7E9C3" },
@@ -4557,7 +4561,7 @@ const Ot = (r, o, n, { text: s, font: l, sysFont: h, ink: f, card: w, size: k =
   { name: "Gold Metallic", hex: "#C8A53B" },
   { name: "Silver Metallic", hex: "#B6BCC4" }
 ];
-function Fi(r) {
+function Ci(r) {
   if (!r) return null;
   let o = String(r).trim().replace("#", "");
   if (o.length === 3 && (o = o.split("").map((s) => s + s).join("")), o.length !== 6) return null;
@@ -4569,19 +4573,19 @@ function Ca(r, o) {
   return (2 + n / 256) * s * s + 4 * l * l + (2 + (255 - n) / 256) * h * h;
 }
 function Fa(r) {
-  const o = Fi(r);
-  if (!o) return He[0];
-  let n = He[0], s = 1 / 0;
-  for (const l of He) {
-    const h = Fi(l.hex), f = Ca(o, h);
+  const o = Ci(r);
+  if (!o) return Ve[0];
+  let n = Ve[0], s = 1 / 0;
+  for (const l of Ve) {
+    const h = Ci(l.hex), f = Ca(o, h);
     f < s && (s = f, n = l);
   }
   return n;
 }
 function Na(r) {
-  return Fi(r) ? Fa(r).hex : r;
+  return Ci(r) ? Fa(r).hex : r;
 }
-const bi = {
+const xi = {
   widthIn: 12,
   // physical print-area width in inches
   dpi: 300,
@@ -4589,24 +4593,24 @@ const bi = {
   safeAreaPct: 5
   // safe-area inset (% of each edge) kept clear of trims/seams
 }, za = 6e3;
-function _e(r) {
+function Ye(r) {
   const o = r || {};
   return {
-    widthIn: Number(o.widthIn) > 0 ? Number(o.widthIn) : bi.widthIn,
-    dpi: Number(o.dpi) > 0 ? Number(o.dpi) : bi.dpi,
-    safeAreaPct: Number.isFinite(Number(o.safeAreaPct)) ? Math.min(40, Math.max(0, Number(o.safeAreaPct))) : bi.safeAreaPct
+    widthIn: Number(o.widthIn) > 0 ? Number(o.widthIn) : xi.widthIn,
+    dpi: Number(o.dpi) > 0 ? Number(o.dpi) : xi.dpi,
+    safeAreaPct: Number.isFinite(Number(o.safeAreaPct)) ? Math.min(40, Math.max(0, Number(o.safeAreaPct))) : xi.safeAreaPct
   };
 }
 function Ta(r, o, n) {
-  const { widthIn: s, dpi: l } = _e(n);
+  const { widthIn: s, dpi: l } = Ye(n);
   if (!(r > 0)) return 1;
   let f = s * l / r;
   f = Math.max(1, f);
   const w = Math.max(r, o || r), k = za / w;
   return Math.min(f, Math.max(1, k));
 }
-function Ni(r, o) {
-  const { widthIn: n } = _e(o);
+function Fi(r, o) {
+  const { widthIn: n } = Ye(o);
   return r > 0 ? n / r : 0;
 }
 function co(r, o, n) {
@@ -4617,11 +4621,11 @@ function co(r, o, n) {
   if (!(l > 0)) return null;
   const h = r.width || 0;
   if (!(h > 0)) return null;
-  const f = h * Ni(o, n);
+  const f = h * Fi(o, n);
   return f > 0 ? l / f : null;
 }
 function ho(r, o) {
-  const { dpi: n } = _e(o);
+  const { dpi: n } = Ye(o);
   return r == null ? null : r >= n ? { level: "good", color: "#16a34a", label: "Print quality: Excellent" } : r >= n / 2 ? { level: "warn", color: "#d97706", label: "Print quality: Acceptable — may look soft" } : { level: "bad", color: "#dc2626", label: "Print quality: Too low — will look blurry" };
 }
 const Ma = ({
@@ -4691,10 +4695,10 @@ const Ma = ({
       /* @__PURE__ */ e.jsx("h3", { children: "Properties" }),
       /* @__PURE__ */ e.jsx("p", { className: "no-selection", children: "Select an element to edit its properties" })
     ] });
-  const j = (v, q) => {
-    n(r.id, { [v]: q });
+  const j = (v, X) => {
+    n(r.id, { [v]: X });
   }, it = () => {
-    var v, q, P;
+    var v, X, P;
     return /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
       /* @__PURE__ */ e.jsx("h4", { children: "Text Content" }),
       /* @__PURE__ */ e.jsxs("div", { className: "property-row", children: [
@@ -4869,7 +4873,7 @@ const Ma = ({
             {
               className: (v = r.textDecoration) != null && v.includes("underline") ? "active" : "",
               onClick: () => {
-                const g = r.textDecoration || "", M = g.split(" ").filter((U) => U && U !== "underline");
+                const g = r.textDecoration || "", M = g.split(" ").filter((_) => _ && _ !== "underline");
                 g.includes("underline") || M.push("underline"), j("textDecoration", M.join(" ").trim());
               },
               title: "Underline",
@@ -4879,9 +4883,9 @@ const Ma = ({
           /* @__PURE__ */ e.jsx(
             "button",
             {
-              className: (q = r.textDecoration) != null && q.includes("overline") ? "active" : "",
+              className: (X = r.textDecoration) != null && X.includes("overline") ? "active" : "",
               onClick: () => {
-                const g = r.textDecoration || "", M = g.split(" ").filter((U) => U && U !== "overline");
+                const g = r.textDecoration || "", M = g.split(" ").filter((_) => _ && _ !== "overline");
                 g.includes("overline") || M.push("overline"), j("textDecoration", M.join(" ").trim());
               },
               title: "Overline",
@@ -4893,7 +4897,7 @@ const Ma = ({
             {
               className: (P = r.textDecoration) != null && P.includes("line-through") ? "active" : "",
               onClick: () => {
-                const g = r.textDecoration || "", M = g.split(" ").filter((U) => U && U !== "line-through");
+                const g = r.textDecoration || "", M = g.split(" ").filter((_) => _ && _ !== "line-through");
                 g.includes("line-through") || M.push("line-through"), j("textDecoration", M.join(" ").trim());
               },
               title: "Strikethrough",
@@ -5000,7 +5004,7 @@ const Ma = ({
             {
               title: "Real thread colours",
               style: { display: "flex", flexWrap: "wrap", gap: 4, marginTop: 6, maxWidth: 200 },
-              children: He.map((g) => /* @__PURE__ */ e.jsx(
+              children: Ve.map((g) => /* @__PURE__ */ e.jsx(
                 "button",
                 {
                   type: "button",
@@ -5316,7 +5320,7 @@ const Ma = ({
         }
       )
     ] })
-  ] }), bt = async () => {
+  ] }), St = async () => {
     if (!(!I || N)) {
       z(!0), L("");
       try {
@@ -5327,13 +5331,13 @@ const Ma = ({
         z(!1);
       }
     }
-  }, pt = ["image", "sticker", "embroidery"], zt = () => !I || !pt.includes(r.type) ? null : /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
+  }, pt = ["image", "sticker", "embroidery"], Tt = () => !I || !pt.includes(r.type) ? null : /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "remove-bg-btn",
-        onClick: bt,
+        onClick: St,
         disabled: N,
         style: {
           width: "100%",
@@ -5354,7 +5358,7 @@ const Ma = ({
       }
     ),
     b && /* @__PURE__ */ e.jsx("div", { style: { marginTop: 6, fontSize: 12, color: "#dc2626" }, children: b })
-  ] }), _ = () => /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
+  ] }), V = () => /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
     /* @__PURE__ */ e.jsx("h4", { children: "Image Properties" }),
     /* @__PURE__ */ e.jsxs("div", { className: "property-row", children: [
       /* @__PURE__ */ e.jsx("label", { children: "Opacity" }),
@@ -5552,8 +5556,8 @@ const Ma = ({
             type: "number",
             value: r.strokeWidth || r.height || 2,
             onChange: (v) => {
-              const q = parseInt(v.target.value);
-              j("strokeWidth", q), j("height", q);
+              const X = parseInt(v.target.value);
+              j("strokeWidth", X), j("height", X);
             },
             min: "1",
             max: "50"
@@ -5600,7 +5604,7 @@ const Ma = ({
         )
       ] })
     ] })
-  ] }), st = () => /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
+  ] }), lt = () => /* @__PURE__ */ e.jsxs("div", { className: "property-group", children: [
     /* @__PURE__ */ e.jsx("h4", { children: "Layer Controls" }),
     /* @__PURE__ */ e.jsxs("div", { className: "button-group vertical", children: [
       /* @__PURE__ */ e.jsx("button", { onClick: () => s(r.id, "top"), children: "Bring to Front" }),
@@ -5623,28 +5627,28 @@ const Ma = ({
   ], yt = () => {
     const v = co(r, T, B);
     if (v == null) return null;
-    const q = ho(v, B);
-    return q ? /* @__PURE__ */ e.jsxs(
+    const X = ho(v, B);
+    return X ? /* @__PURE__ */ e.jsxs(
       "div",
       {
         className: "property-group dpi-meter",
-        style: { borderLeft: `4px solid ${q.color}`, paddingLeft: 10 },
+        style: { borderLeft: `4px solid ${X.color}`, paddingLeft: 10 },
         children: [
           /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
             /* @__PURE__ */ e.jsx("span", { style: {
               width: 9,
               height: 9,
               borderRadius: "50%",
-              background: q.color,
+              background: X.color,
               flex: "0 0 auto"
             } }),
-            /* @__PURE__ */ e.jsxs("strong", { style: { color: q.color, fontSize: 13 }, children: [
+            /* @__PURE__ */ e.jsxs("strong", { style: { color: X.color, fontSize: 13 }, children: [
               Math.round(v),
               " DPI"
             ] })
           ] }),
-          /* @__PURE__ */ e.jsx("div", { style: { fontSize: 12, color: "#475569", marginTop: 2 }, children: q.label }),
-          q.level !== "good" && /* @__PURE__ */ e.jsx("div", { style: { fontSize: 11, color: "#64748b", marginTop: 4 }, children: "Make it smaller on the canvas or upload a higher-resolution image." })
+          /* @__PURE__ */ e.jsx("div", { style: { fontSize: 12, color: "#475569", marginTop: 2 }, children: X.label }),
+          X.level !== "good" && /* @__PURE__ */ e.jsx("div", { style: { fontSize: 11, color: "#64748b", marginTop: 4 }, children: "Make it smaller on the canvas or upload a higher-resolution image." })
         ]
       }
     ) : null;
@@ -5656,13 +5660,13 @@ const Ma = ({
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "panel-content", children: [
       yt(),
-      zt(),
+      Tt(),
       r.type === "text" && it(),
       rt.includes(r.type) && J(),
-      r.type === "image" && _(),
+      r.type === "image" && V(),
       r.type === "horizontalLine" && R(),
       O(),
-      st(),
+      lt(),
       /* @__PURE__ */ e.jsx("div", { className: "property-group", children: /* @__PURE__ */ e.jsxs(
         "button",
         {
@@ -5795,19 +5799,19 @@ const Ma = ({
     )) })
   ] });
 };
-let Si = null;
+let bi = null;
 function Ea() {
-  if (Si) return Si;
+  if (bi) return bi;
   if (typeof document > "u") return null;
   const r = document.createElement("canvas");
   r.width = 6, r.height = 6;
   const o = r.getContext("2d");
-  return o.strokeStyle = "rgba(255,255,255,0.34)", o.lineWidth = 1.7, o.lineCap = "round", o.beginPath(), o.moveTo(-2, 8), o.lineTo(8, -2), o.stroke(), o.strokeStyle = "rgba(0,0,0,0.16)", o.lineWidth = 1.1, o.beginPath(), o.moveTo(1.5, 8), o.lineTo(8, 1.5), o.stroke(), Si = r, r;
+  return o.strokeStyle = "rgba(255,255,255,0.34)", o.lineWidth = 1.7, o.lineCap = "round", o.beginPath(), o.moveTo(-2, 8), o.lineTo(8, -2), o.stroke(), o.strokeStyle = "rgba(0,0,0,0.16)", o.lineWidth = 1.1, o.beginPath(), o.moveTo(1.5, 8), o.lineTo(8, 1.5), o.stroke(), bi = r, r;
 }
-function vi(r) {
+function Si(r) {
   return r ? (r.productionMethods || []).map((n) => String(n).toUpperCase()).includes("EMBROIDERY") || r.supportsEmbroidery === "Y" : !1;
 }
-function Ve(r, o, n, { fontSize: s = 20, color: l = "#1f6feb" } = {}) {
+function _e(r, o, n, { fontSize: s = 20, color: l = "#1f6feb" } = {}) {
   const h = Na(l || "#1f6feb"), f = r.globalAlpha === void 0 ? 1 : r.globalAlpha, w = (() => {
     const k = Ea();
     try {
@@ -5847,7 +5851,7 @@ class Ia {
           B && B.type === "text" && B.fontFamily && F.push(B.fontFamily);
         });
       }
-      await Ti(F), typeof document < "u" && document.fonts && document.fonts.ready && await document.fonts.ready;
+      await zi(F), typeof document < "u" && document.fonts && document.fonts.ready && await document.fonts.ready;
     } catch {
     }
     for (const F of n) {
@@ -6009,7 +6013,7 @@ class Ia {
     }
     s.forEach((f, w) => {
       const k = w * l;
-      h ? Ve(this.ctx, f, k, { fontSize: o.fontSize || 20, color: o.fill || "#000000" }) : (o.stroke && o.strokeWidth > 0 && this.ctx.strokeText(f, 0, k), this.ctx.fillText(f, 0, k));
+      h ? _e(this.ctx, f, k, { fontSize: o.fontSize || 20, color: o.fill || "#000000" }) : (o.stroke && o.strokeWidth > 0 && this.ctx.strokeText(f, 0, k), this.ctx.fillText(f, 0, k));
     });
   }
   // Arc text along a circle — same geometry as the editor's drawCurvedText.
@@ -6026,7 +6030,7 @@ class Ia {
     h.textAlign = "center", h.textBaseline = "middle", h.save(), h.translate(B, I), h.rotate(-S * F / 2);
     for (let j = 0; j < f.length; j++) {
       const it = k[j] / T;
-      if (h.rotate(S * it / 2), h.save(), h.translate(0, -S * T), l ? Ve(h, f[j], 0, { fontSize: w, color: o.fill || "#000000" }) : (H && h.strokeText(f[j], 0, 0), h.fillText(f[j], 0, 0)), z) {
+      if (h.rotate(S * it / 2), h.save(), h.translate(0, -S * T), l ? _e(h, f[j], 0, { fontSize: w, color: o.fill || "#000000" }) : (H && h.strokeText(f[j], 0, 0), h.fillText(f[j], 0, 0)), z) {
         const J = k[j];
         h.strokeStyle = b, h.lineWidth = L, h.setLineDash && h.setLineDash([]), N.underline && (h.beginPath(), h.moveTo(-J / 2, w / 2 + 2), h.lineTo(J / 2, w / 2 + 2), h.stroke()), N.overline && (h.beginPath(), h.moveTo(-J / 2, -(w / 2 + 2)), h.lineTo(J / 2, -(w / 2 + 2)), h.stroke()), N.strike && (h.beginPath(), h.moveTo(-J / 2, 0), h.lineTo(J / 2, 0), h.stroke());
       }
@@ -6683,7 +6687,7 @@ const Wa = (r, o) => {
     };
     clearTimeout(n), n = setTimeout(h, o);
   };
-}, Oe = [
+}, $e = [
   { key: "make-it-yours", title: "Make it yours", body: "Add your text, upload a logo, or drag artwork straight onto the product to bring your design to life." },
   { key: "start-creating", title: "Start creating", body: "Drop in your logo, type a slogan, or add artwork — your custom product takes shape as you go." },
   { key: "design-in-seconds", title: "Design yours in seconds", body: "Add text or upload an image to get started — no design skills needed." }
@@ -6755,8 +6759,8 @@ const Wa = (r, o) => {
     // key) to pin a specific variant from EMPTY_STATE_VARIANTS; the host's
     // experiment framework decides the bucket. Defaults to the first variant.
     emptyStateVariant: Q = 0
-  } = r, [N, z] = E([]), [b, L] = E(null), [j, it] = E([]), [J, bt] = E(!1), [pt, zt] = E(!1), [_, O] = E(!1), [R, st] = E({ x: 0, y: 0 }), [rt, yt] = E(null), [v, q] = E(600), [P, g] = E(600), [M, U] = E(1), [ot, St] = E(h || ((Xi = f.colorSettings) == null ? void 0 : Xi[0])), [ft, Rt] = E(!1), [Ct, xt] = E(l !== "customize"), [Ft, Gt] = E(!0), [ee, oe] = E(!1), [ae, de] = E(l !== "customize"), vt = _e(A), re = Ta(v, P, vt);
-  ct(() => {
+  } = r, [N, z] = E([]), [b, L] = E(null), [j, it] = E([]), [J, St] = E(!1), [pt, Tt] = E(!1), [V, O] = E(!1), [R, lt] = E({ x: 0, y: 0 }), [rt, yt] = E(null), [v, X] = E(600), [P, g] = E(600), [M, _] = E(1), [ot, vt] = E(h || ((Xi = f.colorSettings) == null ? void 0 : Xi[0])), [ft, Rt] = E(!1), [Ft, xt] = E(l !== "customize"), [Nt, $t] = E(!0), [oe, je] = E(!1), [ae, re] = E(l !== "customize"), jt = Ye(A), Zt = Ta(v, P, jt);
+  st(() => {
     if (!b) {
       it((i) => i.length ? [] : i);
       return;
@@ -6765,41 +6769,41 @@ const Wa = (r, o) => {
       (i) => i.length > 1 && i.includes(b.id) ? i : [b.id]
     );
   }, [b]);
-  const [X, je] = E(f.sections[0]), [Qt, Ue] = E(!1), [Ye, he] = E(!1), [_t, ne] = E({}), [Wt, Ce] = E([]), [At, se] = E(-1), [qe] = E(new Ra("localStorage")), Bt = dt(null), Et = dt(null), at = dt(null), V = dt(null), Ut = dt({ v: [], h: [] }), Xe = dt([]), Qe = dt([]), Ze = dt(null), fe = dt(null), ge = dt(null), Mi = dt(null), ue = dt(null), Yt = dt(null), fo = dt(null), me = dt(new Ia()), go = dt(!1), [pe, Ai] = E(null), mt = Nt(() => {
+  const [Y, Ce] = E(f.sections[0]), [Vt, qe] = E(!1), [Xe, de] = E(!1), [Ut, ne] = E({}), [Wt, Fe] = E([]), [Et, se] = E(-1), [Ti] = E(new Ra("localStorage")), Bt = dt(null), Ne = dt(null), he = dt(null), bt = dt(null), at = dt({ v: [], h: [] }), q = dt([]), Yt = dt([]), Qe = dt(null), fe = dt(null), ge = dt(null), Mi = dt(null), ue = dt(null), qt = dt(null), fo = dt(null), me = dt(new Ia()), go = dt(!1), [pe, Ai] = E(null), mt = zt(() => {
     const i = {
       elements: JSON.parse(JSON.stringify(N)),
       selectedElement: b ? { ...b } : null,
       timestamp: Date.now()
-    }, t = Wt.slice(0, At + 1);
-    t.push(i), t.length > 50 ? t.shift() : se(At + 1), Ce(t);
-  }, [N, b, Wt, At]), ye = Nt(() => ({
+    }, t = Wt.slice(0, Et + 1);
+    t.push(i), t.length > 50 ? t.shift() : se(Et + 1), Fe(t);
+  }, [N, b, Wt, Et]), ye = zt(() => ({
     elements: N,
     canvasWidth: v,
     canvasHeight: P,
     selectedColor: ot,
-    activeSection: X,
+    activeSection: Y,
     product: f,
-    sectionDesigns: _t,
+    sectionDesigns: Ut,
     zoomLevel: M,
     showGrid: ft,
-    snapToGrid: Ft,
+    snapToGrid: Nt,
     selectedElement: b ? { ...b } : null,
     canvasRef: Bt
     // Include reference for thumbnail generation
-  }), [N, v, P, ot, X, f, _t, M, ft, Ft, b]), Ei = (i) => {
+  }), [N, v, P, ot, Y, f, Ut, M, ft, Nt, b]), Ei = (i) => {
     if (i.sections && typeof i.sections == "object") {
       const t = Object.keys(i.sections)[0], a = i.sections[t];
       if (a && a.elements) {
-        z(a.elements || []), q(a.canvasWidth || 800), g(a.canvasHeight || 600), St(a.selectedColor || f.colorSettings[0]), U(a.zoomLevel || 1), Rt(a.showGrid || !1), Gt(a.snapToGrid || !0), L(null), i.sections && ne(i.sections);
+        z(a.elements || []), X(a.canvasWidth || 800), g(a.canvasHeight || 600), vt(a.selectedColor || f.colorSettings[0]), _(a.zoomLevel || 1), Rt(a.showGrid || !1), $t(a.snapToGrid || !0), L(null), i.sections && ne(i.sections);
         const c = f.sections.find((m) => m.sectionName === t);
-        c && je(c), Ce([]), se(-1), setTimeout(() => {
+        c && Ce(c), Fe([]), se(-1), setTimeout(() => {
           mt();
         }, 100);
         return;
       }
     }
   };
-  ct(() => {
+  st(() => {
     const t = setTimeout(async () => {
       if (N.length === 0 && Wt.length <= 1) {
         if (k)
@@ -6827,36 +6831,36 @@ const Wa = (r, o) => {
     }, 300);
     return () => clearTimeout(t);
   }, [w, k, f.colorSettings, f.sections]);
-  const Ke = Nt((i = "png", t = !0) => {
+  const Ze = zt((i = "png", t = !0) => {
     const a = ye();
     return f.sections, me.current.exportAllSections(
-      { [(X == null ? void 0 : X.sectionName) || "main"]: a },
+      { [(Y == null ? void 0 : Y.sectionName) || "main"]: a },
       [{
-        id: (X == null ? void 0 : X.sectionName) || "main",
-        sectionName: (X == null ? void 0 : X.sectionName) || "main",
-        image: X == null ? void 0 : X.sectionImage,
-        sectionImage: X == null ? void 0 : X.sectionImage
+        id: (Y == null ? void 0 : Y.sectionName) || "main",
+        sectionName: (Y == null ? void 0 : Y.sectionName) || "main",
+        image: Y == null ? void 0 : Y.sectionImage,
+        sectionImage: Y == null ? void 0 : Y.sectionImage
       }],
       v,
       P,
       i,
       t,
       pe,
-      re
+      Zt
     );
-  }, [ye, f.sections, X, v, P, re]), uo = no, Fe = 20;
-  ct(() => {
-    const i = () => Ue(window.innerWidth < 768);
+  }, [ye, f.sections, Y, v, P, Zt]), uo = no, ze = 20;
+  st(() => {
+    const i = () => qe(window.innerWidth < 768);
     return i(), window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
-  }, []), ct(() => {
+  }, []), st(() => {
     const i = document.createElement("canvas");
     i.width = v, i.height = P, fo.current = i;
-  }, [v, P]), ct(() => {
+  }, [v, P]), st(() => {
     Wt.length === 0 && mt();
   }, []);
-  const Zt = (i, t, a, c, m, u) => {
+  const Kt = (i, t, a, c, m, u) => {
     i.beginPath(), i.moveTo(t + u, a), i.lineTo(t + c - u, a), i.quadraticCurveTo(t + c, a, t + c, a + u), i.lineTo(t + c, a + m - u), i.quadraticCurveTo(t + c, a + m, t + c - u, a + m), i.lineTo(t + u, a + m), i.quadraticCurveTo(t, a + m, t, a + m - u), i.lineTo(t, a + u), i.quadraticCurveTo(t, a, t + u, a), i.closePath();
-  }, Ne = (i, t) => {
+  }, Te = (i, t) => {
     if (t.type === "text" && !t.isIcon) {
       i.save(), i.font = `${t.fontStyle || "normal"} ${t.fontWeight || "normal"} ${t.fontSize || 20}px ${t.fontFamily || "Arial"}`;
       try {
@@ -6872,14 +6876,14 @@ const Wa = (r, o) => {
           et = et.toLowerCase();
           break;
         case "capitalize":
-          et = et.replace(/\b\w/g, (jt) => jt.toUpperCase());
+          et = et.replace(/\b\w/g, (Ct) => Ct.toUpperCase());
           break;
       }
       const gt = et.split(`
-`), W = Math.max(1, ...gt.map((jt) => i.measureText(jt || " ").width)), lt = (t.fontSize || 20) * (t.lineHeight || 1.2), It = Math.max(t.fontSize || 20, gt.length * lt);
+`), W = Math.max(1, ...gt.map((Ct) => i.measureText(Ct || " ").width)), ct = (t.fontSize || 20) * (t.lineHeight || 1.2), It = Math.max(t.fontSize || 20, gt.length * ct);
       i.restore();
-      const wt = t.textAlign || "left", kt = wt === "center" ? t.x - W / 2 : wt === "right" ? t.x - W : t.x, Tt = t.y;
-      return { x: kt, y: Tt, width: W, height: It, cx: kt + W / 2, cy: Tt + It / 2 };
+      const wt = t.textAlign || "left", kt = wt === "center" ? t.x - W / 2 : wt === "right" ? t.x - W : t.x, Mt = t.y;
+      return { x: kt, y: Mt, width: W, height: It, cx: kt + W / 2, cy: Mt + It / 2 };
     }
     if (!t.isIcon)
       return {
@@ -6895,7 +6899,7 @@ const Wa = (r, o) => {
     return i.restore(), { x: D, y: G, width: d, height: p, cx: x, cy: C };
   }, mo = (i, t) => {
     if (!t) return;
-    const a = 8, c = 8, m = 4, u = 30, y = Ne(i, t), d = t.isIcon ? Math.max(a, 12) : a, p = {
+    const a = 8, c = 8, m = 4, u = 30, y = Te(i, t), d = t.isIcon ? Math.max(a, 12) : a, p = {
       x: -y.width / 2 - d,
       y: -y.height / 2 - d,
       w: y.width + d * 2,
@@ -6908,14 +6912,14 @@ const Wa = (r, o) => {
       p.x + p.w,
       p.y + p.h
     );
-    if (x.addColorStop(0, "#3b82f6"), x.addColorStop(0.5, "#1d4ed8"), x.addColorStop(1, "#3b82f6"), i.strokeStyle = "rgba(59,130,246,.3)", i.lineWidth = 3, Zt(
+    if (x.addColorStop(0, "#3b82f6"), x.addColorStop(0.5, "#1d4ed8"), x.addColorStop(1, "#3b82f6"), i.strokeStyle = "rgba(59,130,246,.3)", i.lineWidth = 3, Kt(
       i,
       p.x - 1,
       p.y - 1,
       p.w + 2,
       p.h + 2,
       m + 1
-    ), i.stroke(), i.strokeStyle = x, i.lineWidth = 2, i.setLineDash([8, 4]), Zt(i, p.x, p.y, p.w, p.h, m), i.stroke(), i.lineDashOffset = -(Date.now() / 50) % 12, i.strokeStyle = "#ffffff", i.lineWidth = 1, i.setLineDash([4, 8]), Zt(i, p.x, p.y, p.w, p.h, m), i.stroke(), i.setLineDash([]), i.lineDashOffset = 0, t.locked) {
+    ), i.stroke(), i.strokeStyle = x, i.lineWidth = 2, i.setLineDash([8, 4]), Kt(i, p.x, p.y, p.w, p.h, m), i.stroke(), i.lineDashOffset = -(Date.now() / 50) % 12, i.strokeStyle = "#ffffff", i.lineWidth = 1, i.setLineDash([4, 8]), Kt(i, p.x, p.y, p.w, p.h, m), i.stroke(), i.setLineDash([]), i.lineDashOffset = 0, t.locked) {
       i.restore();
       return;
     }
@@ -6946,7 +6950,7 @@ const Wa = (r, o) => {
     i.strokeStyle = "#3b82f6", i.lineWidth = 1, i.setLineDash([2, 2]), i.beginPath(), i.moveTo(C, D + 12), i.lineTo(C, p.y), i.stroke(), i.setLineDash([]), i.beginPath(), i.arc(C, D, 12, 0, 2 * Math.PI), i.fillStyle = "#f59e0b", i.fill(), i.strokeStyle = "#ffffff", i.lineWidth = 2, i.stroke(), i.strokeStyle = "#ffffff", i.lineWidth = 2, i.beginPath(), i.arc(C, D, 6, -Math.PI / 2, Math.PI, !1), i.stroke(), i.beginPath(), i.moveTo(C - 6, D), i.lineTo(C - 3, D - 3), i.lineTo(C - 3, D + 3), i.closePath(), i.fillStyle = "#ffffff", i.fill(), i.restore();
   }, po = (i, t) => {
     if (!t) return [];
-    const a = Ne(i, t), c = t.isIcon ? Math.max(8, 12) : 8, m = 8, u = 30, y = (t.rotation || 0) * Math.PI / 180, d = {
+    const a = Te(i, t), c = t.isIcon ? Math.max(8, 12) : 8, m = 8, u = 30, y = (t.rotation || 0) * Math.PI / 180, d = {
       x: -a.width / 2 - c,
       y: -a.height / 2 - c,
       w: a.width + c * 2,
@@ -6975,32 +6979,32 @@ const Wa = (r, o) => {
         return y.type;
     }
     return null;
-  }, xe = Nt(() => {
-    if (At > 0) {
-      const i = Wt[At - 1];
-      z(i.elements), L(i.selectedElement), se(At - 1);
+  }, xe = zt(() => {
+    if (Et > 0) {
+      const i = Wt[Et - 1];
+      z(i.elements), L(i.selectedElement), se(Et - 1);
     }
-  }, [Wt, At]), le = Nt(() => {
-    if (At < Wt.length - 1) {
-      const i = Wt[At + 1];
-      z(i.elements), L(i.selectedElement), se(At + 1);
+  }, [Wt, Et]), le = zt(() => {
+    if (Et < Wt.length - 1) {
+      const i = Wt[Et + 1];
+      z(i.elements), L(i.selectedElement), se(Et + 1);
     }
-  }, [Wt, At]), qt = (i) => Ft ? Math.round(i / Fe) * Fe : i;
-  ct(() => {
-    if (X != null && X.sectionImage) {
-      at.current = null, V.current = null;
+  }, [Wt, Et]), Xt = (i) => Nt ? Math.round(i / ze) * ze : i;
+  st(() => {
+    if (Y != null && Y.sectionImage) {
+      he.current = null, bt.current = null;
       const i = Bt.current;
       if (i && i.getContext("2d").clearRect(0, 0, v, P), w && !pe)
         return;
       const t = new Image();
       t.crossOrigin = "anonymous", t.onload = () => {
-        at.current = t, V.current = t, nt();
+        he.current = t, bt.current = t, nt();
       }, t.onerror = () => {
-        console.error("Failed to load background image:", X.sectionImage), nt();
-      }, t.src = X.sectionImage;
+        console.error("Failed to load background image:", Y.sectionImage), nt();
+      }, t.src = Y.sectionImage;
     } else
-      at.current = null, V.current = null, nt();
-  }, [X, pe]), ct(() => {
+      he.current = null, bt.current = null, nt();
+  }, [Y, pe]), st(() => {
     const i = (t) => {
       const a = document.activeElement;
       if (!(a && (a.tagName === "INPUT" || a.tagName === "TEXTAREA" || a.tagName === "SELECT" || a.isContentEditable))) {
@@ -7026,9 +7030,9 @@ const Wa = (r, o) => {
   }, [b, s, xe, le, mt]);
   const Dt = () => `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, yo = (i) => {
     i.strokeStyle = "#e0e0e0", i.lineWidth = 1, i.setLineDash([1, 1]);
-    for (let t = 0; t <= v; t += Fe)
+    for (let t = 0; t <= v; t += ze)
       i.beginPath(), i.moveTo(t, 0), i.lineTo(t, P), i.stroke();
-    for (let t = 0; t <= P; t += Fe)
+    for (let t = 0; t <= P; t += ze)
       i.beginPath(), i.moveTo(0, t), i.lineTo(v, t), i.stroke();
     i.setLineDash([]);
   }, xo = (i, t) => {
@@ -7134,21 +7138,21 @@ const Wa = (r, o) => {
   }, vo = (i, t, a, c, m = !1) => {
     const u = Array.from(t);
     if (u.length === 0) return;
-    const y = a.fontSize || 20, d = u.map((Mt) => i.measureText(Mt).width), p = d.reduce((Mt, Xt) => Mt + Xt, 0) || 1, x = Math.max(1e-4, Math.abs(a.curve) * Math.PI / 180), C = p / x, D = a.curve >= 0 ? 1 : -1, G = (c || p) / 2, et = D * C + y / 2, gt = a.stroke && a.strokeWidth > 0, W = typeof a.textDecoration == "string" ? a.textDecoration : "", lt = {
+    const y = a.fontSize || 20, d = u.map((At) => i.measureText(At).width), p = d.reduce((At, Qt) => At + Qt, 0) || 1, x = Math.max(1e-4, Math.abs(a.curve) * Math.PI / 180), C = p / x, D = a.curve >= 0 ? 1 : -1, G = (c || p) / 2, et = D * C + y / 2, gt = a.stroke && a.strokeWidth > 0, W = typeof a.textDecoration == "string" ? a.textDecoration : "", ct = {
       underline: W.includes("underline") || !!a.underline,
       overline: W.includes("overline") || !!a.overline,
       strike: W.includes("line-through") || !!a.strikethrough
-    }, It = lt.underline || lt.overline || lt.strike, wt = a.decorationColor || a.fill || "#000000", kt = Math.max(1, y / 20), Tt = i.textAlign, jt = i.textBaseline;
+    }, It = ct.underline || ct.overline || ct.strike, wt = a.decorationColor || a.fill || "#000000", kt = Math.max(1, y / 20), Mt = i.textAlign, Ct = i.textBaseline;
     i.textAlign = "center", i.textBaseline = "middle", i.save(), i.translate(G, et), i.rotate(-D * x / 2);
-    for (let Mt = 0; Mt < u.length; Mt++) {
-      const Xt = d[Mt] / C;
-      if (i.rotate(D * Xt / 2), i.save(), i.translate(0, -D * C), m ? Ve(i, u[Mt], 0, { fontSize: y, color: a.fill || "#000000" }) : (gt && i.strokeText(u[Mt], 0, 0), i.fillText(u[Mt], 0, 0)), It) {
-        const Ht = d[Mt];
-        i.strokeStyle = wt, i.lineWidth = kt, i.setLineDash && i.setLineDash([]), lt.underline && (i.beginPath(), i.moveTo(-Ht / 2, y / 2 + 2), i.lineTo(Ht / 2, y / 2 + 2), i.stroke()), lt.overline && (i.beginPath(), i.moveTo(-Ht / 2, -(y / 2 + 2)), i.lineTo(Ht / 2, -(y / 2 + 2)), i.stroke()), lt.strike && (i.beginPath(), i.moveTo(-Ht / 2, 0), i.lineTo(Ht / 2, 0), i.stroke());
+    for (let At = 0; At < u.length; At++) {
+      const Qt = d[At] / C;
+      if (i.rotate(D * Qt / 2), i.save(), i.translate(0, -D * C), m ? _e(i, u[At], 0, { fontSize: y, color: a.fill || "#000000" }) : (gt && i.strokeText(u[At], 0, 0), i.fillText(u[At], 0, 0)), It) {
+        const Ht = d[At];
+        i.strokeStyle = wt, i.lineWidth = kt, i.setLineDash && i.setLineDash([]), ct.underline && (i.beginPath(), i.moveTo(-Ht / 2, y / 2 + 2), i.lineTo(Ht / 2, y / 2 + 2), i.stroke()), ct.overline && (i.beginPath(), i.moveTo(-Ht / 2, -(y / 2 + 2)), i.lineTo(Ht / 2, -(y / 2 + 2)), i.stroke()), ct.strike && (i.beginPath(), i.moveTo(-Ht / 2, 0), i.lineTo(Ht / 2, 0), i.stroke());
       }
-      i.restore(), i.rotate(D * Xt / 2);
+      i.restore(), i.rotate(D * Qt / 2);
     }
-    i.restore(), i.textAlign = Tt, i.textBaseline = jt;
+    i.restore(), i.textAlign = Mt, i.textBaseline = Ct;
   }, wo = (i, t) => {
     i.save();
     let a = t.text || "Text";
@@ -7178,14 +7182,14 @@ const Wa = (r, o) => {
       ), i.fillStyle = t.fill || "#000000";
     }
     (t.hasTextShadow || t.textShadowColor) && (i.shadowColor = t.textShadowColor || "rgba(0,0,0,0.5)", i.shadowBlur = t.textShadowBlur != null ? t.textShadowBlur : 4, i.shadowOffsetX = t.textShadowX != null ? t.textShadowX : 2, i.shadowOffsetY = t.textShadowY != null ? t.textShadowY : 2);
-    const d = vi(f) && t.type === "text" && !t.isIcon;
+    const d = Si(f) && t.type === "text" && !t.isIcon;
     if (t.curve && Math.abs(t.curve) >= 1) {
       vo(i, c.join(" "), t, u, d), i.restore();
       return;
     }
     c.forEach((p, x) => {
       const C = x * m, D = i.measureText(p).width;
-      d ? Ve(i, p, C, { fontSize: t.fontSize || 20, color: t.fill || "#000000" }) : (t.stroke && t.strokeWidth > 0 && i.strokeText(p, 0, C), i.fillText(p, 0, C));
+      d ? _e(i, p, C, { fontSize: t.fontSize || 20, color: t.fill || "#000000" }) : (t.stroke && t.strokeWidth > 0 && i.strokeText(p, 0, C), i.fillText(p, 0, C));
       const G = t.fontSize || 20, et = t.decorationColor || t.fill || "#000000", gt = Math.max(1, G / 20);
       if (i.strokeStyle = et, i.lineWidth = gt, t.textDecoration === "underline" || t.underline) {
         const W = C + G + 2;
@@ -7199,8 +7203,8 @@ const Wa = (r, o) => {
         const W = C + G / 2;
         i.beginPath(), i.moveTo(0, W), i.lineTo(D, W), i.stroke();
       }
-      typeof t.textDecoration == "string" && t.textDecoration.includes(" ") && t.textDecoration.split(" ").forEach((lt) => {
-        switch (lt.trim()) {
+      typeof t.textDecoration == "string" && t.textDecoration.includes(" ") && t.textDecoration.split(" ").forEach((ct) => {
+        switch (ct.trim()) {
           case "underline":
             const It = C + G + 2;
             i.beginPath(), i.moveTo(0, It), i.lineTo(D, It), i.stroke();
@@ -7292,7 +7296,7 @@ const Wa = (r, o) => {
     i.beginPath(), i.ellipse(a, c, m, u, 0, 0, 2 * Math.PI), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
   }, Io = (i, t) => {
     const a = Math.min(t.width, t.height) * 0.1;
-    Zt(i, 0, 0, t.width, t.height, a), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
+    Kt(i, 0, 0, t.width, t.height, a), t.fill && t.fill !== "transparent" && (i.fillStyle = t.fill, i.fill()), t.stroke && t.strokeWidth > 0 && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth, i.stroke());
   }, Lo = (i, t) => {
     i.save(), t.opacity !== void 0 && (i.globalAlpha = t.opacity), i.strokeStyle = t.stroke || t.fill || "#000000", i.lineWidth = t.strokeWidth || t.height || 2, i.lineCap = "round", i.beginPath(), i.moveTo(0, t.height / 2), i.lineTo(t.width, t.height / 2), i.stroke(), i.restore();
   }, Do = (i, t) => {
@@ -7343,17 +7347,17 @@ const Wa = (r, o) => {
             return;
           }
           if (t._stickerLoadError) {
-            ze(i, t, "Failed to load", !0);
+            Me(i, t, "Failed to load", !0);
             return;
           }
         }
-        ze(i, t, "Your customization");
+        Me(i, t, "Your customization");
       } catch (c) {
-        console.error("Error drawing sticker:", c), ze(i, t, "Error", !0);
+        console.error("Error drawing sticker:", c), Me(i, t, "Error", !0);
       }
     else
-      ze(i, t, "No Sticker");
-  }, ze = (i, t, a, c = !1) => {
+      Me(i, t, "No Sticker");
+  }, Me = (i, t, a, c = !1) => {
     i.fillStyle = c ? "#ffebee" : "#f8f9fa", i.fillRect(0, 0, t.width, t.height), i.strokeStyle = c ? "#f44336" : "#dee2e6", i.lineWidth = 2, i.strokeRect(0, 0, t.width, t.height), i.fillStyle = c ? "#f44336" : "#6c757d", i.font = "12px Arial", i.textAlign = "center", i.textBaseline = "middle", i.fillText(a, t.width / 2, t.height / 2);
   }, Wo = (i, t) => {
     if (t.imageObject && t.imageObject.complete && t.imageObject.naturalHeight !== 0)
@@ -7377,10 +7381,10 @@ const Wa = (r, o) => {
     if (!a) return !1;
     const c = a.x + a.width / 2, m = a.y + a.height / 2, u = i - c, y = t - m, d = -(a.rotation || 0) * Math.PI / 180, p = Math.cos(d), x = Math.sin(d), C = u * p - y * x, D = u * x + y * p, G = a.width / 2, et = a.height / 2;
     return C >= -G && C <= G && D >= -et && D <= et;
-  }, Di = Nt(() => {
-    if (Yt.current) {
-      const t = Yt.current;
-      Yt.current = null;
+  }, Di = zt(() => {
+    if (qt.current) {
+      const t = qt.current;
+      qt.current = null;
       const a = Math.min(t.x0, t.x1), c = Math.min(t.y0, t.y1), m = Math.abs(t.x1 - t.x0), u = Math.abs(t.y1 - t.y0);
       if (m > 3 && u > 3) {
         const y = N.filter((p) => {
@@ -7389,13 +7393,13 @@ const Wa = (r, o) => {
         }), d = y.map((p) => p.id);
         it(d), L(d.length ? y[y.length - 1] : null);
       }
-      Vt();
+      _t();
     }
-    (J || pt || _) && mt(), ue.current = null, Ut.current = { v: [], h: [] }, Xe.current = [], Qe.current = [], Ze.current = null, bt(!1), zt(!1), O(!1), yt(null);
+    (J || pt || V) && mt(), ue.current = null, at.current = { v: [], h: [] }, q.current = [], Yt.current = [], Qe.current = null, St(!1), Tt(!1), O(!1), yt(null);
     const i = Bt.current;
     i && (i.style.cursor = "default");
-  }, [J, pt, _, mt, N]);
-  ct(() => {
+  }, [J, pt, V, mt, N]);
+  st(() => {
     const i = (t) => {
       if (s) return;
       const a = document.activeElement;
@@ -7409,7 +7413,7 @@ const Wa = (r, o) => {
         });
         u.length && (z((y) => y.filter((d) => !u.includes(d.id))), L(null), it([]), mt(), t.preventDefault());
       }
-      if ((t.ctrlKey || t.metaKey) && t.key === "d" && b && (ei(b.id), t.preventDefault()), t.key === "Escape" && (b || m.length) && (L(null), it([]), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "c" && m.length && (Mi.current = m.map((u) => N.find((y) => y.id === u)).filter(Boolean).map((u) => ({ ...u })), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "v") {
+      if ((t.ctrlKey || t.metaKey) && t.key === "d" && b && (ti(b.id), t.preventDefault()), t.key === "Escape" && (b || m.length) && (L(null), it([]), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "c" && m.length && (Mi.current = m.map((u) => N.find((y) => y.id === u)).filter(Boolean).map((u) => ({ ...u })), t.preventDefault()), (t.ctrlKey || t.metaKey) && t.key === "v") {
         const u = Mi.current;
         if (u && u.length) {
           const y = u.map((d) => ({ ...d, id: Dt(), x: (d.x || 0) + 20, y: (d.y || 0) + 20 }));
@@ -7440,21 +7444,21 @@ const Wa = (r, o) => {
         });
         if (p.length)
           if (z((x) => x.map((C) => p.includes(C.id) ? { ...C, x: C.x + y, y: C.y + d } : C)), L((x) => x && p.includes(x.id) ? { ...x, x: x.x + y, y: x.y + d } : x), mt(), p.length === 1 && b) {
-            const x = b.x + y, C = b.y + d, D = Ni(v, vt), G = (et) => et >= 10 ? Math.round(et).toString() : et >= 1 ? et.toFixed(1) : et.toFixed(2);
+            const x = b.x + y, C = b.y + d, D = Fi(v, jt), G = (et) => et >= 10 ? Math.round(et).toString() : et >= 1 ? et.toFixed(1) : et.toFixed(2);
             fe.current = {
               cx: x + (b.width || 0) / 2,
               y: C + (b.height || 0) + 8,
               label: D > 0 ? `x ${G(x * D)}"  y ${G(C * D)}"` : `x ${Math.round(x)}  y ${Math.round(C)}`
-            }, Vt(), ge.current && clearTimeout(ge.current), ge.current = setTimeout(() => {
-              fe.current = null, Vt();
+            }, _t(), ge.current && clearTimeout(ge.current), ge.current = setTimeout(() => {
+              fe.current = null, _t();
             }, 1e3);
           } else
-            Vt();
+            _t();
       }
     };
     return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
-  }, [b, j, N, xe, le, s, v, vt]);
-  const Je = (i, t = {}) => {
+  }, [b, j, N, xe, le, s, v, jt]);
+  const Ke = (i, t = {}) => {
     const a = {
       id: Dt(),
       type: i,
@@ -7511,7 +7515,7 @@ const Wa = (r, o) => {
     }
     z((c) => [...c, a]), L(a), mt();
   }, Bo = () => {
-    Je("text", {
+    Ke("text", {
       text: "Your text",
       fontSize: 32,
       width: 220,
@@ -7523,9 +7527,9 @@ const Wa = (r, o) => {
     const i = document.createElement("input");
     i.type = "file", i.accept = "image/*", i.onchange = (t) => {
       const a = t.target.files && t.target.files[0];
-      a && a.type.startsWith("image/") && ri(a);
+      a && a.type.startsWith("image/") && ai(a);
     }, i.click();
-  }, Te = (i, t) => {
+  }, Ae = (i, t) => {
     z((a) => a.map(
       (c) => c.id === i ? { ...c, ...t } : c
     )), b && b.id === i && L((a) => ({ ...a, ...t }));
@@ -7537,7 +7541,7 @@ const Wa = (r, o) => {
     const a = await H(t), c = typeof a == "string" ? a : URL.createObjectURL(a), m = new Image();
     m.crossOrigin = "anonymous", await new Promise((p, x) => {
       m.onload = p, m.onerror = () => x(new Error("Processed image failed to load")), m.src = c;
-    }), Te(i.id, {
+    }), Ae(i.id, {
       src: c,
       image: c,
       imageData: c,
@@ -7551,9 +7555,9 @@ const Wa = (r, o) => {
       originalHeight: m.naturalHeight,
       bgRemoved: !0
     }), mt(), nt();
-  }, ti = Nt(() => {
+  }, Je = zt(() => {
     b && (z((i) => i.filter((t) => t.id !== b.id)), L(null), mt());
-  }, [b, mt]), ei = (i) => {
+  }, [b, mt]), ti = (i) => {
     const t = N.find((a) => a.id === i);
     if (t) {
       const a = {
@@ -7573,11 +7577,11 @@ const Wa = (r, o) => {
       width: Math.max(10, (b.width || 0) * i),
       height: Math.max(10, (b.height || 0) * i)
     };
-    (b.type === "text" || b.isIcon) && (t.fontSize = Math.max(6, Math.round((b.fontSize || 20) * i))), Te(b.id, t), mt();
+    (b.type === "text" || b.isIcon) && (t.fontSize = Math.max(6, Math.round((b.fontSize || 20) * i))), Ae(b.id, t), mt();
   }, Bi = (i) => {
     if (!b || b.locked) return;
     const t = (((b.rotation || 0) + i) % 360 + 360) % 360;
-    Te(b.id, { rotation: t }), mt();
+    Ae(b.id, { rotation: t }), mt();
   }, Pi = (i) => {
     const t = N.filter((c) => j.includes(c.id));
     if (t.length < 2) return;
@@ -7603,28 +7607,28 @@ const Wa = (r, o) => {
     const c = [...N], m = c[a];
     t === "up" && a < c.length - 1 ? (c[a] = c[a + 1], c[a + 1] = m) : t === "down" && a > 0 ? (c[a] = c[a - 1], c[a - 1] = m) : t === "top" ? (c.splice(a, 1), c.push(m)) : t === "bottom" && (c.splice(a, 1), c.unshift(m)), z(c), mt();
   };
-  Nt(() => {
-    X && ne((i) => ({
+  zt(() => {
+    Y && ne((i) => ({
       ...i,
-      [X.sectionName]: {
+      [Y.sectionName]: {
         elements: [...N],
         selectedColor: ot
       }
     }));
-  }, [X, N, ot]);
+  }, [Y, N, ot]);
   const [, Go] = Qo((i) => i + 1, 0);
   setTimeout(() => {
     Go();
   }, 20);
-  const _o = Nt(() => {
-    X && ne((i) => ({
+  const _o = zt(() => {
+    Y && ne((i) => ({
       ...i,
-      [X.sectionName]: {
+      [Y.sectionName]: {
         elements: [...N],
         selectedColor: ot
       }
     }));
-  }, [X, N, ot]);
+  }, [Y, N, ot]);
   Zo(o, () => ({
     handleSectionChange: $i,
     flushCurrentSectionDesign: _o,
@@ -7634,7 +7638,7 @@ const Wa = (r, o) => {
     addImageFromUrl: (i, t = {}) => {
       if (!i) return;
       const a = t.width || 220, c = t.height || 220;
-      Je("image", {
+      Ke("image", {
         imageData: i,
         src: i,
         width: a,
@@ -7644,16 +7648,16 @@ const Wa = (r, o) => {
       });
     },
     // Export methods that return download-ready data
-    exportPrintReady: async (i = "png") => await Ke(i, !1),
-    exportFullDesign: async (i = "png") => await Ke(i, !0),
+    exportPrintReady: async (i = "png") => await Ze(i, !1),
+    exportFullDesign: async (i = "png") => await Ze(i, !0),
     // Access to the existing exportDesign method
-    exportDesign: Ke,
+    exportDesign: Ze,
     // Get canvas data for custom exports
     getCanvasData: () => ye(),
     // NEW: Export methods that return JSON with File objects
     exportAllDesignsAsJSON: async (i = "png") => {
       try {
-        const t = ye(), a = (X == null ? void 0 : X.sectionName) || "main", c = {
+        const t = ye(), a = (Y == null ? void 0 : Y.sectionName) || "main", c = {
           elements: t.elements,
           selectedColor: t.selectedColor,
           canvasWidth: t.canvasWidth,
@@ -7664,8 +7668,8 @@ const Wa = (r, o) => {
         }, u = f.sections && f.sections.length > 0 ? f.sections : [{
           id: a,
           sectionName: a,
-          image: X == null ? void 0 : X.sectionImage,
-          sectionImage: X == null ? void 0 : X.sectionImage
+          image: Y == null ? void 0 : Y.sectionImage,
+          sectionImage: Y == null ? void 0 : Y.sectionImage
         }];
         return await me.current.exportAllSectionsAsJSON(
           m,
@@ -7674,7 +7678,7 @@ const Wa = (r, o) => {
           P,
           i,
           pe,
-          re
+          Zt
         );
       } catch (t) {
         throw console.error("Export as JSON failed:", t), t;
@@ -7683,101 +7687,101 @@ const Wa = (r, o) => {
     exportCurrentSectionAsJSON: async (i = "png") => {
       try {
         const t = ye();
-        return await me.current.exportCurrentSectionAsJSON(t, i, pe, re);
+        return await me.current.exportCurrentSectionAsJSON(t, i, pe, Zt);
       } catch (t) {
         throw console.error("Export current section as JSON failed:", t), t;
       }
     }
   }));
-  const $t = dt(null), ii = dt(!1), nt = Nt(() => {
+  const Gt = dt(null), ei = dt(!1), nt = zt(() => {
     const i = Bt.current;
-    if (!i || ii.current) return;
-    ii.current = !0;
+    if (!i || ei.current) return;
+    ei.current = !0;
     const t = i.getContext("2d");
-    if (t.clearRect(0, 0, v, P), V.current && t.drawImage(V.current, 0, 0, v, P), ft && yo(t), N.forEach((d) => {
+    if (t.clearRect(0, 0, v, P), bt.current && t.drawImage(bt.current, 0, 0, v, P), ft && yo(t), N.forEach((d) => {
       t.save(), t.globalAlpha = d.opacity || 1, xo(t, d), t.restore();
     }), j.length > 1 ? (t.save(), t.strokeStyle = "#3b82f6", t.lineWidth = 1.5, t.setLineDash([4, 3]), j.forEach((d) => {
       const p = N.find((D) => D.id === d);
       if (!p) return;
-      const x = Ne(t, p), C = 4;
+      const x = Te(t, p), C = 4;
       t.save(), t.translate(x.cx, x.cy), p.rotation && t.rotate(p.rotation * Math.PI / 180), t.strokeRect(-x.width / 2 - C, -x.height / 2 - C, x.width + C * 2, x.height + C * 2), t.restore();
-    }), t.restore()) : b && mo(t, b), Yt.current) {
-      const d = Yt.current, p = Math.min(d.x0, d.x1), x = Math.min(d.y0, d.y1), C = Math.abs(d.x1 - d.x0), D = Math.abs(d.y1 - d.y0);
+    }), t.restore()) : b && mo(t, b), qt.current) {
+      const d = qt.current, p = Math.min(d.x0, d.x1), x = Math.min(d.y0, d.y1), C = Math.abs(d.x1 - d.x0), D = Math.abs(d.y1 - d.y0);
       t.save(), t.fillStyle = "rgba(59,130,246,0.12)", t.strokeStyle = "#3b82f6", t.lineWidth = 1, t.setLineDash([4, 3]), t.fillRect(p, x, C, D), t.strokeRect(p, x, C, D), t.restore();
     }
-    const a = Ut.current;
+    const a = at.current;
     a && (a.v && a.v.length || a.h && a.h.length) && (t.save(), t.strokeStyle = "#ec4899", t.lineWidth = 1, t.setLineDash([5, 4]), (a.v || []).forEach((d) => {
       t.beginPath(), t.moveTo(d, 0), t.lineTo(d, P), t.stroke();
     }), (a.h || []).forEach((d) => {
       t.beginPath(), t.moveTo(0, d), t.lineTo(v, d), t.stroke();
     }), t.restore());
-    const c = Xe.current;
+    const c = q.current;
     c && c.length && (t.save(), t.strokeStyle = "#ef4444", t.fillStyle = "#ef4444", t.lineWidth = 1, t.font = "11px sans-serif", t.textAlign = "center", t.textBaseline = "middle", c.forEach((d) => {
       t.beginPath(), t.moveTo(d.x1, d.y1), t.lineTo(d.x2, d.y2), t.stroke();
       const p = d.y1 === d.y2, x = 4;
       t.beginPath(), p ? (t.moveTo(d.x1, d.y1 - x), t.lineTo(d.x1, d.y1 + x), t.moveTo(d.x2, d.y2 - x), t.lineTo(d.x2, d.y2 + x)) : (t.moveTo(d.x1 - x, d.y1), t.lineTo(d.x1 + x, d.y1), t.moveTo(d.x2 - x, d.y2), t.lineTo(d.x2 + x, d.y2)), t.stroke();
       const C = (d.x1 + d.x2) / 2, D = (d.y1 + d.y2) / 2, G = `${d.label}`, gt = t.measureText(G).width + 8, W = 15;
-      t.fillStyle = "#ef4444", Zt(t, C - gt / 2, D - W / 2, gt, W, 3), t.fill(), t.fillStyle = "#ffffff", t.fillText(G, C, D + 0.5), t.fillStyle = "#ef4444";
+      t.fillStyle = "#ef4444", Kt(t, C - gt / 2, D - W / 2, gt, W, 3), t.fill(), t.fillStyle = "#ffffff", t.fillText(G, C, D + 0.5), t.fillStyle = "#ef4444";
     }), t.restore());
-    const m = Qe.current;
+    const m = Yt.current;
     m && m.length && (t.save(), t.strokeStyle = "#a855f7", t.fillStyle = "#a855f7", t.lineWidth = 1, t.font = "11px sans-serif", t.textAlign = "center", t.textBaseline = "middle", m.forEach((d) => {
       t.beginPath(), t.moveTo(d.x1, d.y1), t.lineTo(d.x2, d.y2), t.stroke();
       const p = d.y1 === d.y2, x = 4;
       t.beginPath(), p ? (t.moveTo(d.x1, d.y1 - x), t.lineTo(d.x1, d.y1 + x), t.moveTo(d.x2, d.y2 - x), t.lineTo(d.x2, d.y2 + x)) : (t.moveTo(d.x1 - x, d.y1), t.lineTo(d.x1 + x, d.y1), t.moveTo(d.x2 - x, d.y2), t.lineTo(d.x2 + x, d.y2)), t.stroke();
       const C = (d.x1 + d.x2) / 2, D = (d.y1 + d.y2) / 2, G = `${d.label}`, gt = t.measureText(G).width + 8, W = 15;
-      t.fillStyle = "#a855f7", Zt(t, C - gt / 2, D - W / 2, gt, W, 3), t.fill(), t.fillStyle = "#ffffff", t.fillText(G, C, D + 0.5), t.fillStyle = "#a855f7";
+      t.fillStyle = "#a855f7", Kt(t, C - gt / 2, D - W / 2, gt, W, 3), t.fill(), t.fillStyle = "#ffffff", t.fillText(G, C, D + 0.5), t.fillStyle = "#a855f7";
     }), t.restore());
-    const u = Ze.current;
+    const u = Qe.current;
     if (u) {
       t.save(), t.font = "11px sans-serif", t.textAlign = "center", t.textBaseline = "middle";
       const p = t.measureText(u.label).width + 10, x = 16, C = Math.max(p / 2, Math.min(v - p / 2, u.cx)), D = Math.min(P - x / 2, u.y + x / 2);
-      t.fillStyle = "#1d4ed8", Zt(t, C - p / 2, D - x / 2, p, x, 3), t.fill(), t.fillStyle = "#ffffff", t.fillText(u.label, C, D + 0.5), t.restore();
+      t.fillStyle = "#1d4ed8", Kt(t, C - p / 2, D - x / 2, p, x, 3), t.fill(), t.fillStyle = "#ffffff", t.fillText(u.label, C, D + 0.5), t.restore();
     }
     const y = fe.current;
     if (y) {
       t.save(), t.font = "11px sans-serif", t.textAlign = "center", t.textBaseline = "middle";
       const p = t.measureText(y.label).width + 10, x = 16, C = Math.max(p / 2, Math.min(v - p / 2, y.cx)), D = Math.min(P - x / 2, y.y + x / 2);
-      t.fillStyle = "#1d4ed8", Zt(t, C - p / 2, D - x / 2, p, x, 3), t.fill(), t.fillStyle = "#ffffff", t.fillText(y.label, C, D + 0.5), t.restore();
+      t.fillStyle = "#1d4ed8", Kt(t, C - p / 2, D - x / 2, p, x, 3), t.fill(), t.fillStyle = "#ffffff", t.fillText(y.label, C, D + 0.5), t.restore();
     }
-    ii.current = !1;
-  }, [N, b, j, v, P, ft]), oi = dt(nt);
-  ct(() => {
-    oi.current = nt;
+    ei.current = !1;
+  }, [N, b, j, v, P, ft]), ii = dt(nt);
+  st(() => {
+    ii.current = nt;
   }, [nt]);
   const Hi = dt(!1);
-  ct(() => {
-    Hi.current = J || pt || _;
-  }, [J, pt, _]);
-  const Vt = Nt(() => {
-    $t.current && cancelAnimationFrame($t.current), $t.current = requestAnimationFrame(() => {
-      oi.current(), $t.current = null;
+  st(() => {
+    Hi.current = J || pt || V;
+  }, [J, pt, V]);
+  const _t = zt(() => {
+    Gt.current && cancelAnimationFrame(Gt.current), Gt.current = requestAnimationFrame(() => {
+      ii.current(), Gt.current = null;
     });
   }, []);
-  ct(() => {
-    me.current && (me.current.embroidery = vi(f));
-  }, [f]), ct(() => {
+  st(() => {
+    me.current && (me.current.embroidery = Si(f));
+  }, [f]), st(() => {
     const i = (N || []).filter((a) => a && a.type === "text" && a.fontFamily).map((a) => a.fontFamily);
     if (i.length === 0) return;
     let t = !1;
-    return Ti(i).then(() => {
+    return zi(i).then(() => {
       t || nt();
     }), () => {
       t = !0;
     };
-  }, [N, nt]), ct(() => {
-    Vt();
-  }, [N, b, j, v, P, ft, Vt]), ct(() => {
-    V.current && Vt();
-  }, [V.current, Vt]), ct(() => () => {
-    $t.current && cancelAnimationFrame($t.current);
+  }, [N, nt]), st(() => {
+    _t();
+  }, [N, b, j, v, P, ft, _t]), st(() => {
+    bt.current && _t();
+  }, [bt.current, _t]), st(() => () => {
+    Gt.current && cancelAnimationFrame(Gt.current);
   }, []);
-  const ai = Nt(() => {
-    oi.current(), Hi.current && ($t.current = requestAnimationFrame(ai));
+  const oi = zt(() => {
+    ii.current(), Hi.current && (Gt.current = requestAnimationFrame(oi));
   }, []);
-  ct(() => {
-    J || pt || _ ? ai() : ($t.current && (cancelAnimationFrame($t.current), $t.current = null), Vt());
-  }, [J, pt, _, ai, Vt]);
-  const Uo = Nt((i) => {
+  st(() => {
+    J || pt || V ? oi() : (Gt.current && (cancelAnimationFrame(Gt.current), Gt.current = null), _t());
+  }, [J, pt, V, oi, _t]);
+  const Uo = zt((i) => {
     if (s) return;
     const t = Bt.current, a = t.getBoundingClientRect(), c = (i.clientX - a.left) / M, m = (i.clientY - a.top) / M;
     if (i.pointerId != null && t.setPointerCapture)
@@ -7785,20 +7789,20 @@ const Wa = (r, o) => {
         t.setPointerCapture(i.pointerId);
       } catch {
       }
-    if (fe.current && (fe.current = null, ge.current && clearTimeout(ge.current)), st({ x: c, y: m }), b && !b.locked && j.length <= 1) {
+    if (fe.current && (fe.current = null, ge.current && clearTimeout(ge.current)), lt({ x: c, y: m }), b && !b.locked && j.length <= 1) {
       const d = Ii(c, m, b);
       if (d) {
         if (d === "rotate") {
           O(!0);
           const p = b.x + b.width / 2, x = b.y + b.height / 2, C = Math.atan2(m - x, c - p) * 180 / Math.PI;
-          st({
+          lt({
             x: c,
             y: m,
             initialAngle: C,
             initialRotation: b.rotation || 0
           });
         } else
-          zt(!0), yt(d), st({
+          Tt(!0), yt(d), lt({
             x: c,
             y: m,
             initialWidth: b.width,
@@ -7825,44 +7829,44 @@ const Wa = (r, o) => {
     }
     if (u && y.length > 1 && y.includes(u.id)) {
       const d = N.filter((p) => y.includes(p.id) && !p.locked);
-      d.length && (bt(!0), ue.current = { startX: c, startY: m, items: d.map((p) => ({ id: p.id, x: p.x, y: p.y })) }, st({ x: c, y: m }));
+      d.length && (St(!0), ue.current = { startX: c, startY: m, items: d.map((p) => ({ id: p.id, x: p.x, y: p.y })) }, lt({ x: c, y: m }));
       return;
     }
     if (u) {
-      ue.current = null, L(u), u.locked || (bt(!0), st({ x: c, y: m, offsetX: c - u.x, offsetY: m - u.y })), nt();
+      ue.current = null, L(u), u.locked || (St(!0), lt({ x: c, y: m, offsetX: c - u.x, offsetY: m - u.y })), nt();
       return;
     }
-    L(null), Yt.current = { x0: c, y0: m, x1: c, y1: m }, nt();
-  }, [s, M, b, j, N, nt]), Yo = Nt((i) => {
+    L(null), qt.current = { x0: c, y0: m, x1: c, y1: m }, nt();
+  }, [s, M, b, j, N, nt]), Yo = zt((i) => {
     if (s) return;
     const t = Bt.current, a = t.getBoundingClientRect(), c = (i.clientX - a.left) / M, m = (i.clientY - a.top) / M;
-    if (Yt.current) {
-      Yt.current = { ...Yt.current, x1: c, y1: m }, t.style.cursor = "crosshair", nt();
+    if (qt.current) {
+      qt.current = { ...qt.current, x1: c, y1: m }, t.style.cursor = "crosshair", nt();
       return;
     }
     if (J && ue.current) {
       const u = ue.current;
       let y = c - u.startX, d = m - u.startY;
       const p = (W) => {
-        const lt = N.find((It) => It.id === W);
-        return lt && lt.width || 0;
+        const ct = N.find((It) => It.id === W);
+        return ct && ct.width || 0;
       }, x = (W) => {
-        const lt = N.find((It) => It.id === W);
-        return lt && lt.height || 0;
+        const ct = N.find((It) => It.id === W);
+        return ct && ct.height || 0;
       }, C = Math.min(...u.items.map((W) => W.x)), D = Math.max(...u.items.map((W) => W.x + p(W.id))), G = Math.min(...u.items.map((W) => W.y)), et = Math.max(...u.items.map((W) => W.y + x(W.id)));
       y = Math.max(-C, Math.min(v - D, y)), d = Math.max(-G, Math.min(P - et, d));
       const gt = {};
       u.items.forEach((W) => {
         gt[W.id] = { x: W.x + y, y: W.y + d };
-      }), z((W) => W.map((lt) => gt[lt.id] ? { ...lt, ...gt[lt.id] } : lt)), L((W) => W && gt[W.id] ? { ...W, ...gt[W.id] } : W), t.style.cursor = "grabbing", nt();
+      }), z((W) => W.map((ct) => gt[ct.id] ? { ...ct, ...gt[ct.id] } : ct)), L((W) => W && gt[W.id] ? { ...W, ...gt[W.id] } : W), t.style.cursor = "grabbing", nt();
       return;
     }
-    if (b && !J && !pt && !_) {
+    if (b && !J && !pt && !V) {
       const u = Ii(c, m, b);
       u ? u === "rotate" ? t.style.cursor = "grab" : t.style.cursor = u : Li(c, m, b) ? t.style.cursor = "move" : t.style.cursor = "default";
     } else
       t.style.cursor = J ? "grabbing" : "default";
-    if (_ && b) {
+    if (V && b) {
       const u = b.x + b.width / 2, y = b.y + b.height / 2, p = Math.atan2(m - y, c - u) * 180 / Math.PI - R.initialAngle;
       let x = R.initialRotation + p;
       i.shiftKey && (x = Math.round(x / 15) * 15), x = (x % 360 + 360) % 360, z(
@@ -7893,91 +7897,91 @@ const Wa = (r, o) => {
         const W = R.initialWidth / R.initialHeight;
         rt.includes("e"), p = d / W, rt.includes("n") && (C = R.initialY + (R.initialHeight - p));
       }
-      Ft && (x = qt(x), C = qt(C), d = qt(d), p = qt(p));
+      Nt && (x = Xt(x), C = Xt(C), d = Xt(d), p = Xt(p));
       const D = {
         ...b,
         x,
         y: C,
         width: d,
         height: p
-      }, G = Ni(v, vt), et = (W) => W >= 10 ? Math.round(W).toString() : W >= 1 ? W.toFixed(1) : W.toFixed(2), gt = G > 0 ? `${et(d * G)}" × ${et(p * G)}"` : `${Math.round(d)} × ${Math.round(p)} px`;
-      Ze.current = {
+      }, G = Fi(v, jt), et = (W) => W >= 10 ? Math.round(W).toString() : W >= 1 ? W.toFixed(1) : W.toFixed(2), gt = G > 0 ? `${et(d * G)}" × ${et(p * G)}"` : `${Math.round(d)} × ${Math.round(p)} px`;
+      Qe.current = {
         cx: x + d / 2,
         y: C + p + 8,
         label: gt
       }, z(
         (W) => W.map(
-          (lt) => lt.id === b.id ? D : lt
+          (ct) => ct.id === b.id ? D : ct
         )
       ), L(D), nt();
       return;
     }
     if (J && b) {
       let u = c - R.offsetX, y = m - R.offsetY;
-      Ft && (u = qt(u), y = qt(y));
+      Nt && (u = Xt(u), y = Xt(y));
       const d = 6 / (M || 1), p = b.width, x = b.height, C = N.filter(($) => $.id !== b.id), D = [0, v / 2, v], G = [0, P / 2, P];
       C.forEach(($) => {
         D.push($.x, $.x + ($.width || 0) / 2, $.x + ($.width || 0)), G.push($.y, $.y + ($.height || 0) / 2, $.y + ($.height || 0));
       });
-      const et = ($, Kt, Ie) => {
-        const Le = [0, Kt / 2, Kt];
+      const et = ($, Jt, De) => {
+        const Re = [0, Jt / 2, Jt];
         let ce = null;
-        return Le.forEach((De) => {
-          Ie.forEach((Jt) => {
-            const te = Math.abs($ + De - Jt);
-            te <= d && (!ce || te < ce.d) && (ce = { d: te, snapped: Jt - De, line: Jt });
+        return Re.forEach((We) => {
+          De.forEach((te) => {
+            const ee = Math.abs($ + We - te);
+            ee <= d && (!ce || ee < ce.d) && (ce = { d: ee, snapped: te - We, line: te });
           });
         }), ce;
       }, gt = { v: [], h: [] }, W = et(u, p, D);
       W && (u = W.snapped, gt.v.push(W.line));
-      const lt = et(y, x, G);
-      lt && (y = lt.snapped, gt.h.push(lt.line)), Ut.current = gt, u = Math.max(0, Math.min(v - b.width, u)), y = Math.max(0, Math.min(P - b.height, y));
+      const ct = et(y, x, G);
+      ct && (y = ct.snapped, gt.h.push(ct.line)), at.current = gt, u = Math.max(0, Math.min(v - b.width, u)), y = Math.max(0, Math.min(P - b.height, y));
       const It = () => {
-        const $ = u, Kt = u + p, Ie = y, Le = y + x, ce = (ut) => Math.min(Le, ut.y + (ut.height || 0)) - Math.max(Ie, ut.y), De = (ut) => Math.min(Kt, ut.x + (ut.width || 0)) - Math.max($, ut.x);
-        let Jt = null, te = null, Re = null, We = null;
+        const $ = u, Jt = u + p, De = y, Re = y + x, ce = (ut) => Math.min(Re, ut.y + (ut.height || 0)) - Math.max(De, ut.y), We = (ut) => Math.min(Jt, ut.x + (ut.width || 0)) - Math.max($, ut.x);
+        let te = null, ee = null, Be = null, Pe = null;
         return C.forEach((ut) => {
-          const gi = ut.x + (ut.width || 0), ui = ut.y + (ut.height || 0);
-          ce(ut) > 0 && (gi <= $ && (!Jt || gi > Jt.edge) && (Jt = { edge: gi, el: ut }), ut.x >= Kt && (!te || ut.x < te.edge) && (te = { edge: ut.x, el: ut })), De(ut) > 0 && (ui <= Ie && (!Re || ui > Re.edge) && (Re = { edge: ui, el: ut }), ut.y >= Le && (!We || ut.y < We.edge) && (We = { edge: ut.y, el: ut }));
-        }), { L: Jt, R: te, T: Re, B: We };
+          const fi = ut.x + (ut.width || 0), gi = ut.y + (ut.height || 0);
+          ce(ut) > 0 && (fi <= $ && (!te || fi > te.edge) && (te = { edge: fi, el: ut }), ut.x >= Jt && (!ee || ut.x < ee.edge) && (ee = { edge: ut.x, el: ut })), We(ut) > 0 && (gi <= De && (!Be || gi > Be.edge) && (Be = { edge: gi, el: ut }), ut.y >= Re && (!Pe || ut.y < Pe.edge) && (Pe = { edge: ut.y, el: ut }));
+        }), { L: te, R: ee, T: Be, B: Pe };
       };
-      let { L: wt, R: kt, T: Tt, B: jt } = It();
+      let { L: wt, R: kt, T: Mt, B: Ct } = It();
       if (!W && wt && kt) {
         const $ = (wt.edge + kt.edge - p) / 2;
         Math.abs(u - $) <= d && (u = $);
       }
-      if (!lt && Tt && jt) {
-        const $ = (Tt.edge + jt.edge - x) / 2;
+      if (!ct && Mt && Ct) {
+        const $ = (Mt.edge + Ct.edge - x) / 2;
         Math.abs(y - $) <= d && (y = $);
       }
-      u = Math.max(0, Math.min(v - b.width, u)), y = Math.max(0, Math.min(P - b.height, y)), { L: wt, R: kt, T: Tt, B: jt } = It();
-      const Mt = u, Xt = u + p, Ht = y, Me = y + x, Ae = ($) => (Math.max(Ht, $.y) + Math.min(Me, $.y + ($.height || 0))) / 2, Ee = ($) => (Math.max(Mt, $.x) + Math.min(Xt, $.x + ($.width || 0))) / 2, si = wt ? Math.round(Mt - wt.edge) : null, li = kt ? Math.round(kt.edge - Xt) : null, ci = Tt ? Math.round(Ht - Tt.edge) : null, di = jt ? Math.round(jt.edge - Me) : null, hi = wt && kt && si === li, fi = Tt && jt && ci === di, Se = [];
-      if (wt && !hi) {
-        const $ = Ae(wt.el);
-        Se.push({ x1: wt.edge, y1: $, x2: Mt, y2: $, label: si });
+      u = Math.max(0, Math.min(v - b.width, u)), y = Math.max(0, Math.min(P - b.height, y)), { L: wt, R: kt, T: Mt, B: Ct } = It();
+      const At = u, Qt = u + p, Ht = y, Ee = y + x, Ie = ($) => (Math.max(Ht, $.y) + Math.min(Ee, $.y + ($.height || 0))) / 2, Le = ($) => (Math.max(At, $.x) + Math.min(Qt, $.x + ($.width || 0))) / 2, ni = wt ? Math.round(At - wt.edge) : null, si = kt ? Math.round(kt.edge - Qt) : null, li = Mt ? Math.round(Ht - Mt.edge) : null, ci = Ct ? Math.round(Ct.edge - Ee) : null, di = wt && kt && ni === si, hi = Mt && Ct && li === ci, Se = [];
+      if (wt && !di) {
+        const $ = Ie(wt.el);
+        Se.push({ x1: wt.edge, y1: $, x2: At, y2: $, label: ni });
       }
-      if (kt && !hi) {
-        const $ = Ae(kt.el);
-        Se.push({ x1: Xt, y1: $, x2: kt.edge, y2: $, label: li });
+      if (kt && !di) {
+        const $ = Ie(kt.el);
+        Se.push({ x1: Qt, y1: $, x2: kt.edge, y2: $, label: si });
       }
-      if (Tt && !fi) {
-        const $ = Ee(Tt.el);
-        Se.push({ x1: $, y1: Tt.edge, x2: $, y2: Ht, label: ci });
+      if (Mt && !hi) {
+        const $ = Le(Mt.el);
+        Se.push({ x1: $, y1: Mt.edge, x2: $, y2: Ht, label: li });
       }
-      if (jt && !fi) {
-        const $ = Ee(jt.el);
-        Se.push({ x1: $, y1: Me, x2: $, y2: jt.edge, label: di });
+      if (Ct && !hi) {
+        const $ = Le(Ct.el);
+        Se.push({ x1: $, y1: Ee, x2: $, y2: Ct.edge, label: ci });
       }
-      Xe.current = Se;
+      q.current = Se;
       const ve = [];
-      if (hi) {
-        const $ = (Ae(wt.el) + Ae(kt.el)) / 2;
-        ve.push({ x1: wt.edge, y1: $, x2: Mt, y2: $, label: si }), ve.push({ x1: Xt, y1: $, x2: kt.edge, y2: $, label: li });
+      if (di) {
+        const $ = (Ie(wt.el) + Ie(kt.el)) / 2;
+        ve.push({ x1: wt.edge, y1: $, x2: At, y2: $, label: ni }), ve.push({ x1: Qt, y1: $, x2: kt.edge, y2: $, label: si });
       }
-      if (fi) {
-        const $ = (Ee(Tt.el) + Ee(jt.el)) / 2;
-        ve.push({ x1: $, y1: Tt.edge, x2: $, y2: Ht, label: ci }), ve.push({ x1: $, y1: Me, x2: $, y2: jt.edge, label: di });
+      if (hi) {
+        const $ = (Le(Mt.el) + Le(Ct.el)) / 2;
+        ve.push({ x1: $, y1: Mt.edge, x2: $, y2: Ht, label: li }), ve.push({ x1: $, y1: Ee, x2: $, y2: Ct.edge, label: ci });
       }
-      Qe.current = ve;
+      Yt.current = ve;
       const Qi = {
         ...b,
         x: u,
@@ -7985,14 +7989,14 @@ const Wa = (r, o) => {
       };
       z(
         ($) => $.map(
-          (Kt) => Kt.id === b.id ? Qi : Kt
+          (Jt) => Jt.id === b.id ? Qi : Jt
         )
       ), L(Qi), nt();
     }
-  }, [s, M, b, J, pt, _, rt, R, Ft, v, P, N, nt]), $i = Nt((i) => {
-    X && ne((a) => ({
+  }, [s, M, b, J, pt, V, rt, R, Nt, v, P, N, nt]), $i = zt((i) => {
+    Y && ne((a) => ({
       ...a,
-      [X.sectionName]: {
+      [Y.sectionName]: {
         elements: N.map((c) => c.type === "image" ? {
           ...c,
           // Keep the image data reference
@@ -8002,7 +8006,7 @@ const Wa = (r, o) => {
         selectedColor: ot
       }
     }));
-    const t = _t[i.sectionName];
+    const t = Ut[i.sectionName];
     if (t) {
       const a = t.elements.map((c) => {
         if (c.type === "image" && c.src && !c.imageData) {
@@ -8017,11 +8021,11 @@ const Wa = (r, o) => {
         }
         return c;
       });
-      z(a), St(t.selectedColor || ot);
+      z(a), vt(t.selectedColor || ot);
     } else
       z([]);
-    je(i), L(null);
-  }, [X, N, ot, _t, nt]), ri = Nt((i) => {
+    Ce(i), L(null);
+  }, [Y, N, ot, Ut, nt]), ai = zt((i) => {
     if (i && i.type.startsWith("image/")) {
       const t = new FileReader();
       t.onload = (a) => {
@@ -8030,8 +8034,8 @@ const Wa = (r, o) => {
           const m = {
             id: Dt(),
             type: "image",
-            x: qt(v / 2 - 100),
-            y: qt(P / 2 - 100),
+            x: Xt(v / 2 - 100),
+            y: Xt(P / 2 - 100),
             width: Math.min(c.width, 200),
             // Limit initial size
             height: Math.min(c.height, 200),
@@ -8050,20 +8054,20 @@ const Wa = (r, o) => {
       }, t.readAsDataURL(i);
     } else
       alert("Please select a valid image file.");
-  }, [v, P, qt, Dt, mt]), Vi = Nt(
+  }, [v, P, Xt, Dt, mt]), Vi = zt(
     Wa(() => {
       nt();
     }, 16),
     // 60fps limit
     [nt]
   );
-  ct(() => {
+  st(() => {
     go.current || Vi();
-  }, [N, b, ft, Vi]), ct(() => {
+  }, [N, b, ft, Vi]), st(() => {
     nt();
   }, [nt]);
   const Gi = (i) => {
-    if (!Ct) return { horizontal: [], vertical: [] };
+    if (!Ft) return { horizontal: [], vertical: [] };
     const t = document.querySelector(".ruler-horizontal"), a = document.querySelector(".ruler-vertical");
     if (!t || !a)
       return { horizontal: [], vertical: [] };
@@ -8080,7 +8084,7 @@ const Wa = (r, o) => {
       });
     return { horizontal: p, vertical: x };
   }, [_i, Ui] = E({ horizontal: [], vertical: [] });
-  ct(() => {
+  st(() => {
     const i = () => {
       setTimeout(() => {
         const c = Gi(M);
@@ -8095,33 +8099,33 @@ const Wa = (r, o) => {
     return window.addEventListener("resize", a), () => {
       window.removeEventListener("resize", a), clearTimeout(t);
     };
-  }, [M, Ct]), ct(() => {
-    if (Ct && !Qt) {
+  }, [M, Ft]), st(() => {
+    if (Ft && !Vt) {
       const i = setTimeout(() => {
         const t = Gi(M);
         Ui(t);
       }, 100);
       return () => clearTimeout(i);
     }
-  }, [Ct, Qt, M]);
-  const ni = vi(f), Yi = ni ? Da(N) : [], qi = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  }, [Ft, Vt, M]);
+  const ri = Si(f), Yi = ri ? Da(N) : [], qi = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       Ma,
       {
         selectedElement: b,
         selectedCount: j.length,
-        onUpdate: Te,
+        onUpdate: Ae,
         onMoveLayer: Oi,
         onAlignSelection: Ho,
         onDistributeSelection: $o,
         onDeleteSelection: Vo,
         availableFonts: uo,
         theme: n,
-        isEmbroidery: ni,
+        isEmbroidery: ri,
         onFontLoaded: nt,
         canvasWidth: v,
         canvasHeight: P,
-        printConfig: vt,
+        printConfig: jt,
         onRemoveBackground: H ? Ri : null
       }
     ),
@@ -8134,7 +8138,7 @@ const Wa = (r, o) => {
           it(i ? [i.id] : []), L(i);
         },
         onMoveLayer: Oi,
-        onDeleteElement: ti,
+        onDeleteElement: Je,
         theme: n
       }
     )
@@ -8143,21 +8147,21 @@ const Wa = (r, o) => {
     /* @__PURE__ */ e.jsx("div", { className: "designer-header", children: /* @__PURE__ */ e.jsx(
       ka,
       {
-        onAddElement: Je,
-        onDeleteElement: () => b && ti(b.id),
-        onDuplicateElement: () => b && ei(b.id),
+        onAddElement: Ke,
+        onDeleteElement: () => b && Je(b.id),
+        onDuplicateElement: () => b && ti(b.id),
         onUndo: xe,
         onRedo: le,
         onToggleGrid: () => Rt(!ft),
-        onToggleRulers: () => xt(!Ct),
-        onToggleSnap: () => Gt(!Ft),
-        onTogglePrintGuides: () => de((i) => !i),
-        onImageUpload: ri,
-        canUndo: At > 0,
-        canRedo: At < Wt.length - 1,
+        onToggleRulers: () => xt(!Ft),
+        onToggleSnap: () => $t(!Nt),
+        onTogglePrintGuides: () => re((i) => !i),
+        onImageUpload: ai,
+        canUndo: Et > 0,
+        canRedo: Et < Wt.length - 1,
         showGrid: ft,
-        showRulers: Ct,
-        snapToGrid: Ft,
+        showRulers: Ft,
+        snapToGrid: Nt,
         showPrintGuides: ae,
         selectedElement: b,
         theme: n,
@@ -8174,7 +8178,7 @@ const Wa = (r, o) => {
         onRequireAuth: I
       }
     ) }),
-    ni && !ee && /* @__PURE__ */ e.jsxs(
+    ri && !oe && /* @__PURE__ */ e.jsxs(
       "div",
       {
         role: "note",
@@ -8202,7 +8206,7 @@ const Wa = (r, o) => {
             "button",
             {
               type: "button",
-              onClick: () => oe(!0),
+              onClick: () => je(!0),
               "aria-label": "Dismiss",
               style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, color: "#9a3412", lineHeight: 1 },
               children: "×"
@@ -8212,7 +8216,7 @@ const Wa = (r, o) => {
       }
     ),
     /* @__PURE__ */ e.jsxs("div", { className: "designer-content", children: [
-      Ct && !Qt && /* @__PURE__ */ e.jsxs("div", { className: "rulers", children: [
+      Ft && !Vt && /* @__PURE__ */ e.jsxs("div", { className: "rulers", children: [
         /* @__PURE__ */ e.jsx("div", { className: "ruler-horizontal", children: /* @__PURE__ */ e.jsx("div", { className: "ruler-horizontal-numbers", children: _i.horizontal.map((i, t) => /* @__PURE__ */ e.jsx(
           "span",
           {
@@ -8236,7 +8240,7 @@ const Wa = (r, o) => {
         "div",
         {
           className: "canvas-container",
-          ref: Et,
+          ref: Ne,
           onDragOver: (i) => {
             s || i.preventDefault();
           },
@@ -8245,17 +8249,17 @@ const Wa = (r, o) => {
             if (s) return;
             i.preventDefault();
             const t = [...((a = i.dataTransfer) == null ? void 0 : a.files) || []].find((c) => c.type.startsWith("image/"));
-            t && ri(t);
+            t && ai(t);
           },
           children: [
-            Qt && /* @__PURE__ */ e.jsx(
+            Vt && /* @__PURE__ */ e.jsx(
               "button",
               {
                 type: "button",
                 className: "mobile-panel-toggle",
                 "aria-label": "Open tools & properties",
                 title: "Tools & properties",
-                onClick: () => he((i) => !i),
+                onClick: () => de((i) => !i),
                 style: {
                   position: "absolute",
                   top: 8,
@@ -8276,7 +8280,7 @@ const Wa = (r, o) => {
               }
             ),
             !s && N.length > 0 && (() => {
-              const i = [], t = ((vt == null ? void 0 : vt.safeAreaPct) || 0) / 100;
+              const i = [], t = ((jt == null ? void 0 : jt.safeAreaPct) || 0) / 100;
               if (t) {
                 const c = v * t, m = P * t, u = v * (1 - t), y = P * (1 - t);
                 N.some(
@@ -8285,8 +8289,8 @@ const Wa = (r, o) => {
               }
               return N.some((c) => {
                 var u;
-                const m = co(c, v, vt);
-                return m != null && ((u = ho(m, vt)) == null ? void 0 : u.level) === "bad";
+                const m = co(c, v, jt);
+                return m != null && ((u = ho(m, jt)) == null ? void 0 : u.level) === "bad";
               }) && i.push({ key: "dpi", text: "An image is low-resolution and may print blurry — try a larger file or smaller size." }), i.length ? /* @__PURE__ */ e.jsx("div", { style: {
                 position: "absolute",
                 top: 8,
@@ -8355,7 +8359,7 @@ const Wa = (r, o) => {
                     }
                   ),
                   !s && N.length === 0 && (() => {
-                    const i = Oe[(typeof Q == "number" ? Q : Oe.findIndex((a) => a.key === Q)) % Oe.length] || Oe[0], t = {
+                    const i = $e[(typeof Q == "number" ? Q : $e.findIndex((a) => a.key === Q)) % $e.length] || $e[0], t = {
                       display: "inline-flex",
                       alignItems: "center",
                       gap: 6,
@@ -8447,10 +8451,10 @@ const Wa = (r, o) => {
                         } }),
                         /* @__PURE__ */ e.jsx("div", { style: {
                           position: "absolute",
-                          top: `${vt.safeAreaPct}%`,
-                          left: `${vt.safeAreaPct}%`,
-                          right: `${vt.safeAreaPct}%`,
-                          bottom: `${vt.safeAreaPct}%`,
+                          top: `${jt.safeAreaPct}%`,
+                          left: `${jt.safeAreaPct}%`,
+                          right: `${jt.safeAreaPct}%`,
+                          bottom: `${jt.safeAreaPct}%`,
                           border: "1px dashed rgba(37, 99, 235, 0.9)"
                         }, children: /* @__PURE__ */ e.jsx("span", { style: {
                           position: "absolute",
@@ -8468,7 +8472,7 @@ const Wa = (r, o) => {
                     }
                   ),
                   b && !s && j.length <= 1 && (() => {
-                    const i = Bt.current && Bt.current.getContext("2d"), t = i ? Ne(i, b) : { cx: b.x + (b.width || 0) / 2, y: b.y }, a = t.cx, c = t.y, m = ["image", "sticker", "embroidery"].includes(b.type), u = !!b.locked, y = {
+                    const i = Bt.current && Bt.current.getContext("2d"), t = i ? Te(i, b) : { cx: b.x + (b.width || 0) / 2, y: b.y }, a = t.cx, c = t.y, m = ["image", "sticker", "embroidery"].includes(b.type), u = !!b.locked, y = {
                       width: 30,
                       height: 30,
                       border: "none",
@@ -8508,7 +8512,7 @@ const Wa = (r, o) => {
                               d.stopPropagation(), Wi(1.1);
                             }, children: /* @__PURE__ */ e.jsx(K, { name: "plus", size: 18, color: "#334155" }) }),
                             /* @__PURE__ */ e.jsx("button", { style: y, title: "Duplicate", onClick: (d) => {
-                              d.stopPropagation(), ei(b.id);
+                              d.stopPropagation(), ti(b.id);
                             }, children: /* @__PURE__ */ e.jsx(K, { name: "duplicate", size: 18, color: "#334155" }) }),
                             /* @__PURE__ */ e.jsx("button", { style: y, title: "Rotate left 15°", onClick: (d) => {
                               d.stopPropagation(), Bi(-15);
@@ -8535,7 +8539,7 @@ const Wa = (r, o) => {
                           !u && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
                             /* @__PURE__ */ e.jsx("span", { style: { width: 1, height: 20, background: "#e2e8f0", margin: "0 2px" } }),
                             /* @__PURE__ */ e.jsx("button", { style: y, title: "Delete", onClick: (d) => {
-                              d.stopPropagation(), ti();
+                              d.stopPropagation(), Je();
                             }, children: /* @__PURE__ */ e.jsx(K, { name: "trash", size: 18, color: "#dc2626" }) })
                           ] })
                         ]
@@ -8548,7 +8552,7 @@ const Wa = (r, o) => {
           ]
         }
       ),
-      !Qt && /* @__PURE__ */ e.jsx("div", { className: "side-panels", children: qi })
+      !Vt && /* @__PURE__ */ e.jsx("div", { className: "side-panels", children: qi })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "designer-footer", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "section-thumbnails", children: [
@@ -8557,11 +8561,11 @@ const Wa = (r, o) => {
           /* @__PURE__ */ e.jsx("u", { children: f.name })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "thumbnails-container", children: f.sections.map((i) => {
-          const t = _t[i.sectionName] && _t[i.sectionName].elements && _t[i.sectionName].elements.length > 0;
+          const t = Ut[i.sectionName] && Ut[i.sectionName].elements && Ut[i.sectionName].elements.length > 0;
           return /* @__PURE__ */ e.jsxs(
             "div",
             {
-              className: `section-thumbnail compact ${X.sectionName === i.sectionName ? "active" : ""}`,
+              className: `section-thumbnail compact ${Y.sectionName === i.sectionName ? "active" : ""}`,
               onClick: (a) => {
                 a.stopPropagation();
                 const c = f.sections.find((m) => m.sectionName === i.sectionName);
@@ -8598,7 +8602,7 @@ const Wa = (r, o) => {
             "button",
             {
               className: "zoom-button compact zoom-out",
-              onClick: () => U(Math.max(0.25, M - 0.25)),
+              onClick: () => _(Math.max(0.25, M - 0.25)),
               disabled: M <= 0.25,
               title: "Zoom Out",
               children: /* @__PURE__ */ e.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
@@ -8621,7 +8625,7 @@ const Wa = (r, o) => {
                 max: "4",
                 step: "0.25",
                 value: M,
-                onChange: (i) => U(parseFloat(i.target.value)),
+                onChange: (i) => _(parseFloat(i.target.value)),
                 className: "zoom-slider compact"
               }
             ) })
@@ -8630,7 +8634,7 @@ const Wa = (r, o) => {
             "button",
             {
               className: "zoom-button compact zoom-in",
-              onClick: () => U(Math.min(4, M + 0.25)),
+              onClick: () => _(Math.min(4, M + 0.25)),
               disabled: M >= 4,
               title: "Zoom In",
               children: /* @__PURE__ */ e.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
@@ -8645,7 +8649,7 @@ const Wa = (r, o) => {
             "button",
             {
               className: "zoom-reset compact",
-              onClick: () => U(1),
+              onClick: () => _(1),
               title: "Reset Zoom (100%)",
               children: /* @__PURE__ */ e.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
                 /* @__PURE__ */ e.jsx("path", { d: "M3 3l18 18" }),
@@ -8657,11 +8661,11 @@ const Wa = (r, o) => {
         ] })
       ] })
     ] }),
-    Qt && Ye && /* @__PURE__ */ e.jsx(
+    Vt && Xe && /* @__PURE__ */ e.jsx(
       "div",
       {
         className: "mobile-panel-modal-overlay",
-        onClick: () => he(!1),
+        onClick: () => de(!1),
         style: {
           position: "fixed",
           inset: 0,
@@ -8707,7 +8711,7 @@ const Wa = (r, o) => {
                   {
                     type: "button",
                     "aria-label": "Close",
-                    onClick: () => he(!1),
+                    onClick: () => de(!1),
                     style: {
                       width: 32,
                       height: 32,