@mypixia/simplex-designer 2.1.2 → 2.1.4

package/dist/index.es.js

@@ -57,7 +57,7 @@ function Ze() {
           return "Fragment";
         case E:
           return "Profiler";
-        case z:
+        case B:
           return "StrictMode";
         case W:
           return "Suspense";
@@ -76,7 +76,7 @@ function Ze() {
             return (u.displayName || "Context") + ".Provider";
           case S:
             return (u._context.displayName || "Context") + ".Consumer";
-          case B:
+          case z:
             var A = u.render;
             return u = u.displayName, u || (u = A.displayName || A.name || "", u = u !== "" ? "ForwardRef(" + u + ")" : "ForwardRef"), u;
           case U:
@@ -238,7 +238,7 @@ React keys must be passed directly to JSX without using spread:
     function C(u) {
       typeof u == "object" && u !== null && u.$$typeof === I && u._store && (u._store.validated = 1);
     }
-    var p = _e, I = Symbol.for("react.transitional.element"), T = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), z = Symbol.for("react.strict_mode"), E = Symbol.for("react.profiler"), S = Symbol.for("react.consumer"), $ = Symbol.for("react.context"), B = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), at = Symbol.for("react.suspense_list"), U = Symbol.for("react.memo"), ft = Symbol.for("react.lazy"), q = Symbol.for("react.activity"), rt = Symbol.for("react.client.reference"), Y = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, J = Array.isArray, st = console.createTask ? console.createTask : function() {
+    var p = _e, I = Symbol.for("react.transitional.element"), T = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), B = Symbol.for("react.strict_mode"), E = Symbol.for("react.profiler"), S = Symbol.for("react.consumer"), $ = Symbol.for("react.context"), z = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), at = Symbol.for("react.suspense_list"), U = Symbol.for("react.memo"), ft = Symbol.for("react.lazy"), q = Symbol.for("react.activity"), rt = Symbol.for("react.client.reference"), Y = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, J = Array.isArray, st = console.createTask ? console.createTask : function() {
       return null;
     };
     p = {
@@ -472,9 +472,9 @@ const Ut = {
         light: "#FFFFFF"
       }
     };
-    Xe.toDataURL(s, w, (z, E) => {
-      if (z) {
-        console.error("QR Code generation error:", z);
+    Xe.toDataURL(s, w, (B, E) => {
+      if (B) {
+        console.error("QR Code generation error:", B);
         return;
       }
       c(E);
@@ -586,7 +586,7 @@ const Ut = {
     ] })
   ] }) }) : null;
 }, ri = ({ isOpen: d, onClose: o, onAddBarcode: a, theme: l }) => {
-  const [s, f] = N(""), [x, c] = N("CODE128"), [y, g] = N(null), [F, C] = N(2), [p, I] = N(100), [T, w] = N(20), [z, E] = N("center"), [S, $] = N("bottom"), [B, W] = N(10), at = dt(null), U = [
+  const [s, f] = N(""), [x, c] = N("CODE128"), [y, g] = N(null), [F, C] = N(2), [p, I] = N(100), [T, w] = N(20), [B, E] = N("center"), [S, $] = N("bottom"), [z, W] = N(10), at = dt(null), U = [
     { value: "CODE128", label: "CODE128 (Most Common)" },
     { value: "EAN13", label: "EAN-13 (European Article Number)" },
     { value: "EAN8", label: "EAN-8 (Short EAN)" },
@@ -607,9 +607,9 @@ const Ut = {
             width: F,
             height: p,
             fontSize: T,
-            textAlign: z,
+            textAlign: B,
             textPosition: S,
-            margin: B,
+            margin: z,
             background: "#ffffff",
             lineColor: "#000000"
           }
@@ -865,9 +865,9 @@ const Ut = {
             }
         ` })
 ] }), si = ({ isOpen: d, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: f }) => {
-  const [x, c] = N([]), [y, g] = N(!1), [F, C] = N(null), [p, I] = N(""), [T, w] = N(""), [z, E] = N({});
+  const [x, c] = N([]), [y, g] = N(!1), [F, C] = N(null), [p, I] = N(""), [T, w] = N(""), [B, E] = N({});
   dt(null);
-  const [S, $] = N(!1), [B, W] = N(!1), [at, U] = N(!1), ft = `${f}/api/v1/designer`;
+  const [S, $] = N(!1), [z, W] = N(!1), [at, U] = N(!1), ft = `${f}/api/v1/designer`;
   et(() => {
     d && s && q();
   }, [d, s]);
@@ -935,7 +935,7 @@ const Ut = {
       });
     }), G;
   }, K = (M, G = "", j = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${j * 15}px` }, children: Object.keys(M).map((u) => {
-    const A = `${G}/${u}`, Q = z[A];
+    const A = `${G}/${u}`, Q = B[A];
     return M[u].type === "image" ? !T || u.toLowerCase().includes(T.toLowerCase()) ? /* @__PURE__ */ i.jsx(
       "div",
       {
@@ -986,8 +986,8 @@ const Ut = {
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-body", children: [
       at && /* @__PURE__ */ i.jsx(de, {}),
-      !S && !at && B && /* @__PURE__ */ i.jsx(ai, { theme: l }),
-      S && B && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      !S && !at && z && /* @__PURE__ */ i.jsx(ai, { theme: l }),
+      S && z && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
         /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-controls", children: /* @__PURE__ */ i.jsx("div", { className: "search-container", children: /* @__PURE__ */ i.jsx(
           "input",
           {
@@ -2560,32 +2560,32 @@ const Ut = {
     description: "Complex mandala flower pattern"
   }
 ], ni = ({ isOpen: d, onClose: o, onAddEmbroidery: a, theme: l, apiKey: s, apiEndpoint: f }) => {
-  const [x, c] = N([]), [y, g] = N(!1), [F, C] = N(null), [p, I] = N(""), [T, w] = N("All"), z = dt(null), E = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
+  const [x, c] = N([]), [y, g] = N(!1), [F, C] = N(null), [p, I] = N(""), [T, w] = N("All"), B = dt(null), E = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
   et(() => {
     d && c(li);
   }, [d]);
-  const S = (B) => {
+  const S = (z) => {
     a({
       type: "embroidery",
-      src: B.url,
-      name: B.name,
-      description: B.description,
-      category: B.category,
+      src: z.url,
+      name: z.name,
+      description: z.description,
+      category: z.category,
       width: 120,
       height: 120,
       x: 100,
       y: 100
     }), o();
-  }, $ = x.filter((B) => {
-    const W = !p || B.name.toLowerCase().includes(p.toLowerCase()) || B.description.toLowerCase().includes(p.toLowerCase()), at = T === "All" || B.category === T;
+  }, $ = x.filter((z) => {
+    const W = !p || z.name.toLowerCase().includes(p.toLowerCase()) || z.description.toLowerCase().includes(p.toLowerCase()), at = T === "All" || z.category === T;
     return W && at;
   });
   return d ? /* @__PURE__ */ i.jsx("div", { className: "embroidery-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs(
     "div",
     {
       className: "embroidery-modal-content",
-      onClick: (B) => B.stopPropagation(),
-      ref: z,
+      onClick: (z) => z.stopPropagation(),
+      ref: B,
       children: [
         /* @__PURE__ */ i.jsxs("div", { className: "embroidery-modal-header", children: [
           /* @__PURE__ */ i.jsx("h3", { children: "Choose an Embroidery Design" }),
@@ -2606,7 +2606,7 @@ const Ut = {
               type: "text",
               placeholder: "Search embroidery designs...",
               value: p,
-              onChange: (B) => I(B.target.value),
+              onChange: (z) => I(z.target.value),
               className: "embroidery-search"
             }
           ) }),
@@ -2616,9 +2616,9 @@ const Ut = {
               "select",
               {
                 value: T,
-                onChange: (B) => w(B.target.value),
+                onChange: (z) => w(z.target.value),
                 className: "category-select",
-                children: E.map((B) => /* @__PURE__ */ i.jsx("option", { value: B, children: B }, B))
+                children: E.map((z) => /* @__PURE__ */ i.jsx("option", { value: z, children: z }, z))
               }
             )
           ] })
@@ -2629,31 +2629,31 @@ const Ut = {
             /* @__PURE__ */ i.jsx("p", { children: "Loading embroidery designs..." })
           ] }),
           F && /* @__PURE__ */ i.jsx("div", { className: "embroidery-error", children: /* @__PURE__ */ i.jsx("p", { children: F }) }),
-          !y && !F && /* @__PURE__ */ i.jsx("div", { className: "embroidery-grid", children: $.map((B) => /* @__PURE__ */ i.jsxs(
+          !y && !F && /* @__PURE__ */ i.jsx("div", { className: "embroidery-grid", children: $.map((z) => /* @__PURE__ */ i.jsxs(
             "div",
             {
               className: "embroidery-item",
-              onClick: () => S(B),
-              title: B.description,
+              onClick: () => S(z),
+              title: z.description,
               children: [
                 /* @__PURE__ */ i.jsx("div", { className: "embroidery-preview", children: /* @__PURE__ */ i.jsx(
                   "img",
                   {
-                    src: B.url,
-                    alt: B.name,
+                    src: z.url,
+                    alt: z.name,
                     loading: "lazy",
                     onError: (W) => {
-                      console.error("Failed to load embroidery image:", B.url), W.target.style.display = "none";
+                      console.error("Failed to load embroidery image:", z.url), W.target.style.display = "none";
                     }
                   }
                 ) }),
                 /* @__PURE__ */ i.jsxs("div", { className: "embroidery-info", children: [
-                  /* @__PURE__ */ i.jsx("div", { className: "embroidery-name", children: B.name }),
-                  /* @__PURE__ */ i.jsx("div", { className: "embroidery-category", children: B.category })
+                  /* @__PURE__ */ i.jsx("div", { className: "embroidery-name", children: z.name }),
+                  /* @__PURE__ */ i.jsx("div", { className: "embroidery-category", children: z.category })
                 ] })
               ]
             },
-            B.id
+            z.id
           )) }),
           !y && !F && $.length === 0 && /* @__PURE__ */ i.jsx("div", { className: "no-embroideries", children: /* @__PURE__ */ i.jsx("p", { children: "No embroidery designs found matching your search." }) })
         ] }),
@@ -4724,11 +4724,11 @@ const Ut = {
   snapToGrid: I,
   selectedElement: T,
   theme: w,
-  readOnly: z,
+  readOnly: B,
   apiKey: E,
   apiEndpoint: S
 }) => {
-  const [$, B] = N(!1), [W, at] = N(!1), [U, ft] = N(!1), [q, rt] = N(!1), [Y, O] = N(!1), [J, st] = N(!1), [K, it] = N(!1), M = (P) => {
+  const [$, z] = N(!1), [W, at] = N(!1), [U, ft] = N(!1), [q, rt] = N(!1), [Y, O] = N(!1), [J, st] = N(!1), [K, it] = N(!1), M = (P) => {
     const nt = P.target.files[0];
     nt && nt.type.startsWith("image/") && y(nt), P.target.value = "";
   }, G = (P) => {
@@ -4766,7 +4766,7 @@ const Ut = {
           {
             className: "toolbar-btn compact",
             onClick: l,
-            disabled: !g || z,
+            disabled: !g || B,
             title: "Undo (Ctrl+Z)",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "↶" }),
@@ -4779,7 +4779,7 @@ const Ut = {
           {
             className: "toolbar-btn compact",
             onClick: s,
-            disabled: !F || z,
+            disabled: !F || B,
             title: "Redo (Ctrl+Y)",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "↷" }),
@@ -4795,7 +4795,7 @@ const Ut = {
             "button",
             {
               className: "toolbar-btn compact dropdown-trigger",
-              disabled: z,
+              disabled: B,
               title: "Add Text",
               onClick: Z,
               children: [
@@ -4821,7 +4821,7 @@ const Ut = {
             "button",
             {
               className: "toolbar-btn compact dropdown-trigger",
-              disabled: z,
+              disabled: B,
               onClick: V,
               children: [
                 /* @__PURE__ */ i.jsx("span", { className: "icon", children: "◩" }),
@@ -4882,7 +4882,7 @@ const Ut = {
           ] })
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ i.jsxs("label", { className: "toolbar-btn compact file-upload", style: { cursor: z ? "not-allowed" : "pointer" }, children: [
+        /* @__PURE__ */ i.jsxs("label", { className: "toolbar-btn compact file-upload", style: { cursor: B ? "not-allowed" : "pointer" }, children: [
           /* @__PURE__ */ i.jsx("span", { className: "icon", children: "☁️" }),
           /* @__PURE__ */ i.jsx("span", { className: "label", children: "Upload" }),
           /* @__PURE__ */ i.jsx(
@@ -4891,18 +4891,18 @@ const Ut = {
               type: "file",
               accept: "image/*",
               onChange: M,
-              disabled: z
+              disabled: B
             }
           )
         ] }),
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
-        /* @__PURE__ */ i.jsx(ii, { onSelectIcon: G, theme: w, disabled: z }),
+        /* @__PURE__ */ i.jsx(ii, { onSelectIcon: G, theme: w, disabled: B }),
         /* @__PURE__ */ i.jsxs(
           "button",
           {
             className: "toolbar-btn compact",
             onClick: () => ft(!0),
-            disabled: z,
+            disabled: B,
             title: "Add Sticker",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "🎨" }),
@@ -4915,8 +4915,8 @@ const Ut = {
           "button",
           {
             className: "toolbar-btn compact",
-            onClick: () => B(!0),
-            disabled: z,
+            onClick: () => z(!0),
+            disabled: B,
             title: "Add QR Code",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "▦" }),
@@ -4929,7 +4929,7 @@ const Ut = {
           {
             className: "toolbar-btn compact",
             onClick: () => at(!0),
-            disabled: z,
+            disabled: B,
             title: "Add Barcode",
             children: [
               /* @__PURE__ */ i.jsx("span", { className: "icon", children: "▤" }),
@@ -4944,7 +4944,7 @@ const Ut = {
         {
           className: "toolbar-btn compact",
           onClick: () => rt(!0),
-          disabled: z,
+          disabled: B,
           title: "Add Embroidery Design",
           children: [
             /* @__PURE__ */ i.jsx("span", { className: "icon", children: "🧵" }),
@@ -4960,7 +4960,7 @@ const Ut = {
             {
               className: "toolbar-btn compact success",
               onClick: a,
-              disabled: z,
+              disabled: B,
               title: "Duplicate Element (Ctrl+D)",
               children: [
                 /* @__PURE__ */ i.jsx("span", { className: "icon", children: "⧉" }),
@@ -4973,7 +4973,7 @@ const Ut = {
             {
               className: "toolbar-btn compact danger",
               onClick: o,
-              disabled: z,
+              disabled: B,
               title: "Delete Element (Delete)",
               children: [
                 /* @__PURE__ */ i.jsx("span", { className: "icon", children: "🗑️" }),
@@ -5027,7 +5027,7 @@ const Ut = {
       oi,
       {
         isOpen: $,
-        onClose: () => B(!1),
+        onClose: () => z(!1),
         onAddQRCode: j,
         theme: w
       }
@@ -5086,10 +5086,10 @@ const Ut = {
       /* @__PURE__ */ i.jsx("h3", { children: "Properties" }),
       /* @__PURE__ */ i.jsx("p", { className: "no-selection", children: "Select an element to edit its properties" })
     ] });
-  const c = (w, z) => {
-    o(d.id, { [w]: z });
+  const c = (w, B) => {
+    o(d.id, { [w]: B });
   }, y = () => {
-    var w, z, E;
+    var w, B, E;
     return /* @__PURE__ */ i.jsxs("div", { className: "property-group", children: [
       /* @__PURE__ */ i.jsx("h4", { children: "Text Content" }),
       /* @__PURE__ */ i.jsxs("div", { className: "property-row", children: [
@@ -5193,7 +5193,7 @@ const Ut = {
             {
               className: (w = d.textDecoration) != null && w.includes("underline") ? "active" : "",
               onClick: () => {
-                const S = d.textDecoration || "", $ = S.split(" ").filter((B) => B && B !== "underline");
+                const S = d.textDecoration || "", $ = S.split(" ").filter((z) => z && z !== "underline");
                 S.includes("underline") || $.push("underline"), c("textDecoration", $.join(" ").trim());
               },
               title: "Underline",
@@ -5203,9 +5203,9 @@ const Ut = {
           /* @__PURE__ */ i.jsx(
             "button",
             {
-              className: (z = d.textDecoration) != null && z.includes("overline") ? "active" : "",
+              className: (B = d.textDecoration) != null && B.includes("overline") ? "active" : "",
               onClick: () => {
-                const S = d.textDecoration || "", $ = S.split(" ").filter((B) => B && B !== "overline");
+                const S = d.textDecoration || "", $ = S.split(" ").filter((z) => z && z !== "overline");
                 S.includes("overline") || $.push("overline"), c("textDecoration", $.join(" ").trim());
               },
               title: "Overline",
@@ -5217,7 +5217,7 @@ const Ut = {
             {
               className: (E = d.textDecoration) != null && E.includes("line-through") ? "active" : "",
               onClick: () => {
-                const S = d.textDecoration || "", $ = S.split(" ").filter((B) => B && B !== "line-through");
+                const S = d.textDecoration || "", $ = S.split(" ").filter((z) => z && z !== "line-through");
                 S.includes("line-through") || $.push("line-through"), c("textDecoration", $.join(" ").trim());
               },
               title: "Strikethrough",
@@ -5728,8 +5728,8 @@ const Ut = {
             type: "number",
             value: d.strokeWidth || d.height || 2,
             onChange: (w) => {
-              const z = parseInt(w.target.value);
-              c("strokeWidth", z), c("height", z);
+              const B = parseInt(w.target.value);
+              c("strokeWidth", B), c("height", B);
             },
             min: "1",
             max: "50"
@@ -6325,28 +6325,28 @@ class gi {
     var p, I;
     const c = [], y = [], g = {};
     for (const T of a) {
-      const w = T.sectionName, z = o[w];
-      if (!z || !z.elements || z.elements.length === 0) {
+      const w = T.sectionName, B = o[w];
+      if (!B || !B.elements || B.elements.length === 0) {
         console.log(`Skipping section ${w} - no elements`);
         continue;
       }
       let E = T.image || T.sectionImage;
       x && x.sectionImage && (T.sectionName === "Front" || x.sections && Object.keys(x.sections).includes(T.sectionName)) && (E = x.sectionImage);
       const S = {
-        ...z,
+        ...B,
         // Include background information using the determined image
         backgroundImage: E,
         sectionImage: E,
         sectionName: w,
         // Ensure we have the selected color
-        selectedColor: z.selectedColor || "#FFFFFF",
+        selectedColor: B.selectedColor || "#FFFFFF",
         // Include canvas dimensions
         canvasWidth: l,
         canvasHeight: s
       };
       g[w] = S;
       const $ = await this.exportSectionAsBlob(
-        z,
+        B,
         T,
         l,
         s,
@@ -6366,8 +6366,8 @@ class gi {
           sectionImage: W
         });
       }
-      const B = await this.exportSectionAsBlob(
-        z,
+      const z = await this.exportSectionAsBlob(
+        B,
         T,
         l,
         s,
@@ -6376,9 +6376,9 @@ class gi {
         x
         // Pass initData to exportSectionAsBlob
       );
-      if (B) {
+      if (z) {
         const W = await this.blobToFile(
-          B,
+          z,
           `${w}-print.${f}`,
           `image/${f}`
         );
@@ -6479,14 +6479,14 @@ class gi {
       // Pass initData to exportSectionAsBlob
     );
     if (F) {
-      const z = await this.blobToFile(
+      const B = await this.blobToFile(
         F,
         `${s}-full.${a}`,
         `image/${a}`
       );
       y.push({
         sectionName: s,
-        sectionImage: z
+        sectionImage: B
       });
     }
     const C = await this.exportSectionAsBlob(
@@ -6500,14 +6500,14 @@ class gi {
       // Pass initData to exportSectionAsBlob
     );
     if (C) {
-      const z = await this.blobToFile(
+      const B = await this.blobToFile(
         C,
         `${s}-print.${a}`,
         `image/${a}`
       );
       g.push({
         sectionName: s,
-        sectionImage: z
+        sectionImage: B
       });
     }
     const p = {
@@ -6765,7 +6765,7 @@ const yi = Ye((d, o) => {
     },
     initFile: f,
     initDesignContent: x
-  } = d, [c, y] = N([]), [g, F] = N(null), [C, p] = N(!1), [I, T] = N(!1), [w, z] = N(!1), [E, S] = N({ x: 0, y: 0 }), [$, B] = N(null), [W, at] = N(800), [U, ft] = N(600), [q, rt] = N(1), [Y, O] = N(s.colorSettings[0]), [J, st] = N(!1), [K, it] = N(!0), [M, G] = N(!0), [j, u] = N(s.sections[0]), [A, Q] = N(!1), [_, Z] = N({}), [V, ht] = N([]), [H, P] = N(-1), [nt] = N(new xi("localStorage")), gt = dt(null), Et = dt(null), kt = dt(null), wt = dt(null), Ot = dt(null), Bt = dt(new gi()), zt = dt(!1), [yt, Qt] = N(null), lt = ot(() => {
+  } = d, [c, y] = N([]), [g, F] = N(null), [C, p] = N(!1), [I, T] = N(!1), [w, B] = N(!1), [E, S] = N({ x: 0, y: 0 }), [$, z] = N(null), [W, at] = N(600), [U, ft] = N(600), [q, rt] = N(1), [Y, O] = N(s.colorSettings[0]), [J, st] = N(!1), [K, it] = N(!0), [M, G] = N(!0), [j, u] = N(s.sections[0]), [A, Q] = N(!1), [_, Z] = N({}), [V, ht] = N([]), [H, P] = N(-1), [nt] = N(new xi("localStorage")), gt = dt(null), Et = dt(null), kt = dt(null), wt = dt(null), Ot = dt(null), zt = dt(new gi()), Bt = dt(!1), [yt, Qt] = N(null), lt = ot(() => {
     const e = {
       elements: JSON.parse(JSON.stringify(c)),
       selectedElement: g ? { ...g } : null,
@@ -6857,7 +6857,7 @@ const yi = Ye((d, o) => {
   }, [f, x, s.colorSettings, s.sections]);
   const Wt = ot((e = "png", t = !0) => {
     const r = St();
-    return s.sections, Bt.current.exportAllSections(
+    return s.sections, zt.current.exportAllSections(
       { [(j == null ? void 0 : j.sectionName) || "main"]: r },
       [{
         id: (j == null ? void 0 : j.sectionName) || "main",
@@ -7105,13 +7105,13 @@ const yi = Ye((d, o) => {
         pe(e, t);
         break;
       case "sticker":
-        Be(e, t);
+        ze(e, t);
         break;
       case "horizontalLine":
         De(e, t);
         break;
       case "embroidery":
-        ze(e, t);
+        Be(e, t);
         break;
     }
     e.restore();
@@ -7133,8 +7133,8 @@ const yi = Ye((d, o) => {
             (h) => h.id === t.id ? { ...h, imageLoading: !1 } : h
           )
         );
-      }, r.src = t.src, e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading...", t.width / 2, t.height / 2);
-    } else t.imageLoading ? (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading...", t.width / 2, t.height / 2)) : (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("No Barcode", t.width / 2, t.height / 2));
+      }, r.src = t.src, e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Your customization", t.width / 2, t.height / 2);
+    } else t.imageLoading ? (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Your customization", t.width / 2, t.height / 2)) : (e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("No Barcode", t.width / 2, t.height / 2));
   }, we = (e, t) => {
     if (t.imageObject)
       e.drawImage(t.imageObject, 0, 0, t.width, t.height);
@@ -7318,13 +7318,13 @@ const yi = Ye((d, o) => {
             return;
           }
         }
-        e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.lineWidth = 1, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Loading...", t.width / 2, t.height / 2);
+        e.fillStyle = "#f0f0f0", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ccc", e.lineWidth = 1, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#666", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Your customization", t.width / 2, t.height / 2);
       } catch (n) {
         console.error("Error drawing image:", n), e.fillStyle = "#ffebee", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#f44336", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#f44336", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("Error loading image", t.width / 2, t.height / 2);
       }
     else
       e.fillStyle = "#f8f8f8", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ddd", e.lineWidth = 1, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#999", e.font = "14px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("No Image", t.width / 2, t.height / 2);
-  }, Be = (e, t) => {
+  }, ze = (e, t) => {
     const r = t.src;
     if (r)
       try {
@@ -7347,7 +7347,7 @@ const yi = Ye((d, o) => {
             return;
           }
         }
-        Rt(e, t, "Loading...");
+        Rt(e, t, "Your customization");
       } catch (n) {
         console.error("Error drawing sticker:", n), Rt(e, t, "Error", !0);
       }
@@ -7355,7 +7355,7 @@ const yi = Ye((d, o) => {
       Rt(e, t, "No Sticker");
   }, Rt = (e, t, r, n = !1) => {
     e.fillStyle = n ? "#ffebee" : "#f8f9fa", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = n ? "#f44336" : "#dee2e6", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = n ? "#f44336" : "#6c757d", e.font = "12px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText(r, t.width / 2, t.height / 2);
-  }, ze = (e, t) => {
+  }, Be = (e, t) => {
     if (t.imageObject && t.imageObject.complete && t.imageObject.naturalHeight !== 0)
       try {
         e.drawImage(t.imageObject, 0, 0, t.width, t.height);
@@ -7369,8 +7369,8 @@ const yi = Ye((d, o) => {
         r.complete && r.naturalHeight !== 0 ? (t.imageObject = r, t.imageLoading = !1, X()) : (t.imageLoading = !1, console.error("Image loaded but is invalid:", t.src));
       }, r.onerror = () => {
         t.imageLoading = !1, console.error("Failed to load embroidery image:", t.src), Ct(e, t, "Failed to load");
-      }, r.src = t.src, Ct(e, t, "Loading...");
-    } else t.imageLoading ? Ct(e, t, "Loading...") : Ct(e, t);
+      }, r.src = t.src, Ct(e, t, "Your customization");
+    } else t.imageLoading ? Ct(e, t, "Your customization") : Ct(e, t);
   }, Ct = (e, t, r = "Embroidery") => {
     e.fillStyle = "#f9f9f9", e.fillRect(0, 0, t.width, t.height), e.strokeStyle = "#ddd", e.lineWidth = 2, e.strokeRect(0, 0, t.width, t.height), e.fillStyle = "#999", e.font = "24px Arial", e.textAlign = "center", e.textBaseline = "middle", e.fillText("🧵", t.width / 2, t.height / 2 - 10), e.fillStyle = "#666", e.font = "12px Arial", e.fillText(r, t.width / 2, t.height / 2 + 15);
   }, _t = (e, t, r) => {
@@ -7378,7 +7378,7 @@ const yi = Ye((d, o) => {
     const n = r.x + r.width / 2, h = r.y + r.height / 2, m = e - n, b = t - h, k = -(r.rotation || 0) * Math.PI / 180, v = Math.cos(k), R = Math.sin(k), D = m * v - b * R, L = m * R + b * v, tt = r.width / 2, xt = r.height / 2;
     return D >= -tt && D <= tt && L >= -xt && L <= xt;
   }, We = ot(() => {
-    (C || I || w) && lt(), p(!1), T(!1), z(!1), B(null);
+    (C || I || w) && lt(), p(!1), T(!1), B(!1), z(null);
     const e = gt.current;
     e && (e.style.cursor = "default");
   }, [C, I, w, lt]);
@@ -7537,7 +7537,7 @@ const yi = Ye((d, o) => {
           image: j == null ? void 0 : j.sectionImage,
           sectionImage: j == null ? void 0 : j.sectionImage
         }];
-        return await Bt.current.exportAllSectionsAsJSON(
+        return await zt.current.exportAllSectionsAsJSON(
           h,
           m,
           W,
@@ -7552,7 +7552,7 @@ const yi = Ye((d, o) => {
     exportCurrentSectionAsJSON: async (e = "png") => {
       try {
         const t = St();
-        return await Bt.current.exportCurrentSectionAsJSON(t, e, yt);
+        return await zt.current.exportCurrentSectionAsJSON(t, e, yt);
       } catch (t) {
         throw console.error("Export current section as JSON failed:", t), t;
       }
@@ -7591,7 +7591,7 @@ const yi = Ye((d, o) => {
       const b = Gt(n, h, g);
       if (b) {
         if (b === "rotate") {
-          z(!0);
+          B(!0);
           const k = g.x + g.width / 2, v = g.y + g.height / 2, R = Math.atan2(h - v, n - k) * 180 / Math.PI;
           S({
             x: n,
@@ -7600,7 +7600,7 @@ const yi = Ye((d, o) => {
             initialRotation: g.rotation || 0
           });
         } else
-          T(!0), B(b), S({
+          T(!0), z(b), S({
             x: n,
             y: h,
             initialWidth: g.width,
@@ -7760,7 +7760,7 @@ const yi = Ye((d, o) => {
     [X]
   );
   et(() => {
-    zt.current || Jt();
+    Bt.current || Jt();
   }, [c, g, J, Jt]);
   function $e(e, t) {
     let r;
@@ -7781,7 +7781,7 @@ const yi = Ye((d, o) => {
     r.width = W, r.height = U, n.clearRect(0, 0, W, U), n.drawImage(e, 0, 0, W, U);
     const h = n.getImageData(0, 0, W, U), m = h.data, b = ye(t);
     if (!b) {
-      zt.current = !1;
+      Bt.current = !1;
       return;
     }
     const { r: k, g: v, b: R } = b;
@@ -7793,7 +7793,7 @@ const yi = Ye((d, o) => {
     n.putImageData(h, 0, 0);
     const D = new Image();
     D.onload = () => {
-      wt.current = s.plainColor === "Y" ? D : e, zt.current = !1, X();
+      wt.current = s.plainColor === "Y" ? D : e, Bt.current = !1, X();
     }, D.src = r.toDataURL("image/png");
   }, [W, U, X]), Zt = (e) => {
     if (!K) return { horizontal: [], vertical: [] };