@mypixia/simplex-designer 2.0.7 → 2.0.8

package/dist/index.es.js

@@ -70,11 +70,11 @@ function Ve() {
         switch (typeof y.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), y.$$typeof) {
-          case j:
+          case T:
             return "Portal";
           case O:
             return (y.displayName || "Context") + ".Provider";
-          case T:
+          case j:
             return (y._context.displayName || "Context") + ".Consumer";
           case k:
             var D = y.render;
@@ -238,7 +238,7 @@ React keys must be passed directly to JSX without using spread:
     function E(y) {
       typeof y == "object" && y !== null && y.$$typeof === B && y._store && (y._store.validated = 1);
     }
-    var m = Qe, B = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), X = Symbol.for("react.profiler"), T = Symbol.for("react.consumer"), O = Symbol.for("react.context"), k = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), W = Symbol.for("react.suspense_list"), xt = Symbol.for("react.memo"), Q = Symbol.for("react.lazy"), ft = Symbol.for("react.activity"), _ = Symbol.for("react.client.reference"), st = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, nt = Array.isArray, tt = console.createTask ? console.createTask : function() {
+    var m = Qe, B = Symbol.for("react.transitional.element"), T = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), X = Symbol.for("react.profiler"), j = Symbol.for("react.consumer"), O = Symbol.for("react.context"), k = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), W = Symbol.for("react.suspense_list"), xt = Symbol.for("react.memo"), Q = Symbol.for("react.lazy"), ft = Symbol.for("react.activity"), _ = Symbol.for("react.client.reference"), st = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, nt = Array.isArray, tt = console.createTask ? console.createTask : function() {
       return null;
     };
     m = {
@@ -394,7 +394,7 @@ const Ut = {
     let m = ne();
     if (s.trim() && (m = Je(s)), h !== "all") {
       const B = Ut[h];
-      B && (m = m.filter((j) => j.category === B.name));
+      B && (m = m.filter((T) => T.category === B.name));
     }
     return m;
   })();
@@ -493,19 +493,19 @@ const Ut = {
         y: 100,
         imageObject: p
         // Store the loaded image object
-      }), j();
+      }), T();
     }, p.src = h;
-  }, j = () => {
+  }, T = () => {
     g(""), n(""), o();
   };
-  return f ? /* @__PURE__ */ i.jsx("div", { className: "qr-modal-overlay", onClick: j, children: /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-content", onClick: (p) => p.stopPropagation(), children: [
+  return f ? /* @__PURE__ */ i.jsx("div", { className: "qr-modal-overlay", onClick: T, children: /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-content", onClick: (p) => p.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "qr-modal-header", children: [
       /* @__PURE__ */ i.jsx("h3", { children: "Generate QR Code" }),
       /* @__PURE__ */ i.jsx(
         "button",
         {
           className: "qr-modal-close",
-          onClick: j,
+          onClick: T,
           "aria-label": "Close",
           children: "×"
         }
@@ -586,7 +586,7 @@ const Ut = {
     ] })
   ] }) }) : null;
 }, ti = ({ isOpen: f, onClose: o, onAddBarcode: a, theme: l }) => {
-  const [s, g] = N(""), [h, n] = N("CODE128"), [c, F] = N(null), [I, E] = N(2), [m, B] = N(100), [j, p] = N(20), [v, X] = N("center"), [T, O] = N("bottom"), [k, Z] = N(10), W = gt(null), xt = [
+  const [s, g] = N(""), [h, n] = N("CODE128"), [c, F] = N(null), [I, E] = N(2), [m, B] = N(100), [T, p] = N(20), [v, X] = N("center"), [j, O] = N("bottom"), [k, Z] = N(10), W = gt(null), xt = [
     { value: "CODE128", label: "CODE128 (Most Common)" },
     { value: "EAN13", label: "EAN-13 (European Article Number)" },
     { value: "EAN8", label: "EAN-8 (Short EAN)" },
@@ -606,9 +606,9 @@ const Ut = {
             format: h,
             width: I,
             height: m,
-            fontSize: j,
+            fontSize: T,
             textAlign: v,
-            textPosition: T,
+            textPosition: j,
             margin: k,
             background: "#ffffff",
             lineColor: "#000000"
@@ -749,12 +749,12 @@ const Ut = {
               id: "barcode-fontsize",
               min: "10",
               max: "30",
-              value: j,
+              value: T,
               onChange: (M) => p(parseInt(M.target.value))
             }
           ),
           /* @__PURE__ */ i.jsxs("span", { className: "range-value", children: [
-            j,
+            T,
             "px"
           ] })
         ] }),
@@ -764,7 +764,7 @@ const Ut = {
             "select",
             {
               id: "text-position",
-              value: T,
+              value: j,
               onChange: (M) => O(M.target.value),
               children: [
                 /* @__PURE__ */ i.jsx("option", { value: "bottom", children: "Bottom" }),
@@ -865,9 +865,9 @@ const Ut = {
             }
         ` })
 ] }), ii = ({ isOpen: f, onClose: o, onAddSticker: a, theme: l, apiKey: s, apiEndpoint: g }) => {
-  const [h, n] = N([]), [c, F] = N(!1), [I, E] = N(null), [m, B] = N(""), [j, p] = N(""), [v, X] = N({});
+  const [h, n] = N([]), [c, F] = N(!1), [I, E] = N(null), [m, B] = N(""), [T, p] = N(""), [v, X] = N({});
   gt(null);
-  const [T, O] = N(!1), [k, Z] = N(!1), [W, xt] = N(!1), Q = `${g}/api/v1/designer`;
+  const [j, O] = N(!1), [k, Z] = N(!1), [W, xt] = N(!1), Q = `${g}/api/v1/designer`;
   rt(() => {
     f && s && ft();
   }, [f, s]);
@@ -936,7 +936,7 @@ const Ut = {
     }), C;
   }, ct = (P, C = "", et = 0) => /* @__PURE__ */ i.jsx("div", { className: "sticker-tree-level", style: { paddingLeft: `${et * 15}px` }, children: Object.keys(P).map((y) => {
     const D = `${C}/${y}`, L = v[D];
-    return P[y].type === "image" ? !j || y.toLowerCase().includes(j.toLowerCase()) ? /* @__PURE__ */ i.jsx(
+    return P[y].type === "image" ? !T || y.toLowerCase().includes(T.toLowerCase()) ? /* @__PURE__ */ i.jsx(
       "div",
       {
         className: "sticker-item",
@@ -969,7 +969,7 @@ const Ut = {
       L && ct(P[y], D, et + 1)
     ] }, D);
   }) }), Y = h.filter(
-    (P) => !j || P.name.toLowerCase().includes(j.toLowerCase())
+    (P) => !T || P.name.toLowerCase().includes(T.toLowerCase())
   );
   return f ? /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-content", onClick: (P) => P.stopPropagation(), children: [
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-header", children: [
@@ -986,14 +986,14 @@ const Ut = {
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "sticker-modal-body", children: [
       W && /* @__PURE__ */ i.jsx(le, {}),
-      !T && !W && k && /* @__PURE__ */ i.jsx(ei, { theme: l }),
-      T && k && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      !j && !W && k && /* @__PURE__ */ i.jsx(ei, { theme: l }),
+      j && k && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
         /* @__PURE__ */ i.jsx("div", { className: "sticker-modal-controls", children: /* @__PURE__ */ i.jsx("div", { className: "search-container", children: /* @__PURE__ */ i.jsx(
           "input",
           {
             type: "text",
             placeholder: "Search stickers...",
-            value: j,
+            value: T,
             onChange: (P) => p(P.target.value),
             className: "sticker-search"
           }
@@ -2560,11 +2560,11 @@ const Ut = {
     description: "Complex mandala flower pattern"
   }
 ], ri = ({ isOpen: f, onClose: o, onAddEmbroidery: a, theme: l, apiKey: s, apiEndpoint: g }) => {
-  const [h, n] = N([]), [c, F] = N(!1), [I, E] = N(null), [m, B] = N(""), [j, p] = N("All"), v = gt(null), X = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
+  const [h, n] = N([]), [c, F] = N(!1), [I, E] = N(null), [m, B] = N(""), [T, p] = N("All"), v = gt(null), X = ["All", "Floral", "Nature", "Geometric", "Traditional", "Sports", "Hobbies", "Food", "Symbols", "Holiday", "Text"];
   rt(() => {
     f && n(oi);
   }, [f]);
-  const T = (k) => {
+  const j = (k) => {
     a({
       type: "embroidery",
       src: k.url,
@@ -2577,7 +2577,7 @@ const Ut = {
       y: 100
     }), o();
   }, O = h.filter((k) => {
-    const Z = !m || k.name.toLowerCase().includes(m.toLowerCase()) || k.description.toLowerCase().includes(m.toLowerCase()), W = j === "All" || k.category === j;
+    const Z = !m || k.name.toLowerCase().includes(m.toLowerCase()) || k.description.toLowerCase().includes(m.toLowerCase()), W = T === "All" || k.category === T;
     return Z && W;
   });
   return f ? /* @__PURE__ */ i.jsx("div", { className: "embroidery-modal-overlay", onClick: o, children: /* @__PURE__ */ i.jsxs(
@@ -2615,7 +2615,7 @@ const Ut = {
             /* @__PURE__ */ i.jsx(
               "select",
               {
-                value: j,
+                value: T,
                 onChange: (k) => p(k.target.value),
                 className: "category-select",
                 children: X.map((k) => /* @__PURE__ */ i.jsx("option", { value: k, children: k }, k))
@@ -2633,7 +2633,7 @@ const Ut = {
             "div",
             {
               className: "embroidery-item",
-              onClick: () => T(k),
+              onClick: () => j(k),
               title: k.description,
               children: [
                 /* @__PURE__ */ i.jsx("div", { className: "embroidery-preview", children: /* @__PURE__ */ i.jsx(
@@ -4603,14 +4603,14 @@ const Ut = {
   }
 ], ai = ({ isOpen: f, onClose: o, onAddText: a, theme: l }) => {
   const [s, g] = N(""), [h, n] = N("All"), c = ie(() => {
-    const m = Nt.reduce((B, j) => (B[j.category] = (B[j.category] || 0) + 1, B), {});
+    const m = Nt.reduce((B, T) => (B[T.category] = (B[T.category] || 0) + 1, B), {});
     return [
       { name: "All", count: Nt.length },
-      ...Object.entries(m).map(([B, j]) => ({ name: B, count: j }))
+      ...Object.entries(m).map(([B, T]) => ({ name: B, count: T }))
     ];
   }, [Nt]), F = ie(() => Nt.filter((m) => {
-    const B = !s || m.text.toLowerCase().includes(s.toLowerCase()) || m.category.toLowerCase().includes(s.toLowerCase()), j = h === "All" || m.category === h;
-    return B && j;
+    const B = !s || m.text.toLowerCase().includes(s.toLowerCase()) || m.category.toLowerCase().includes(s.toLowerCase()), T = h === "All" || m.category === h;
+    return B && T;
   }), [Nt, s, h]), I = (m) => {
     const B = {
       ...m,
@@ -4722,11 +4722,11 @@ const Ut = {
   showGrid: E,
   showRulers: m,
   snapToGrid: B,
-  selectedElement: j,
+  selectedElement: T,
   theme: p,
   readOnly: v,
   apiKey: X,
-  apiEndpoint: T
+  apiEndpoint: j
 }) => {
   const [O, k] = N(!1), [Z, W] = N(!1), [xt, Q] = N(!1), [ft, _] = N(!1), [st, M] = N(!1), [nt, tt] = N(!1), [ct, Y] = N(!1), P = (U) => {
     const K = U.target.files[0];
@@ -4952,7 +4952,7 @@ const Ut = {
           ]
         }
       ) }),
-      j && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      T && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
         /* @__PURE__ */ i.jsx("div", { className: "toolbar-separator" }),
         /* @__PURE__ */ i.jsxs("div", { className: "toolbar-group", children: [
           /* @__PURE__ */ i.jsxs(
@@ -5049,7 +5049,7 @@ const Ut = {
         onAddSticker: D,
         theme: p,
         apiKey: X,
-        apiEndpoint: T
+        apiEndpoint: j
       }
     ),
     /* @__PURE__ */ i.jsx(
@@ -5060,7 +5060,7 @@ const Ut = {
         onAddEmbroidery: L,
         theme: p,
         apiKey: X,
-        apiEndpoint: T
+        apiEndpoint: j
       }
     ),
     /* @__PURE__ */ i.jsx(
@@ -5098,7 +5098,7 @@ const Ut = {
           "textarea",
           {
             value: f.text || "",
-            onChange: (T) => n("text", T.target.value),
+            onChange: (j) => n("text", j.target.value),
             rows: 3,
             placeholder: "Enter your text here..."
           }
@@ -5110,8 +5110,8 @@ const Ut = {
           "select",
           {
             value: f.fontFamily || "Arial",
-            onChange: (T) => n("fontFamily", T.target.value),
-            children: l.map((T) => /* @__PURE__ */ i.jsx("option", { value: T, children: T }, T))
+            onChange: (j) => n("fontFamily", j.target.value),
+            children: l.map((j) => /* @__PURE__ */ i.jsx("option", { value: j, children: j }, j))
           }
         )
       ] }),
@@ -5123,7 +5123,7 @@ const Ut = {
             {
               type: "number",
               value: f.fontSize || 20,
-              onChange: (T) => n("fontSize", parseInt(T.target.value)),
+              onChange: (j) => n("fontSize", parseInt(j.target.value)),
               min: "8",
               max: "200"
             }
@@ -5137,7 +5137,7 @@ const Ut = {
               type: "number",
               step: "0.1",
               value: f.lineHeight || 1.2,
-              onChange: (T) => n("lineHeight", parseFloat(T.target.value)),
+              onChange: (j) => n("lineHeight", parseFloat(j.target.value)),
               min: "0.5",
               max: "3"
             }
@@ -5193,8 +5193,8 @@ const Ut = {
             {
               className: (p = f.textDecoration) != null && p.includes("underline") ? "active" : "",
               onClick: () => {
-                const T = f.textDecoration || "", O = T.split(" ").filter((k) => k && k !== "underline");
-                T.includes("underline") || O.push("underline"), n("textDecoration", O.join(" ").trim());
+                const j = f.textDecoration || "", O = j.split(" ").filter((k) => k && k !== "underline");
+                j.includes("underline") || O.push("underline"), n("textDecoration", O.join(" ").trim());
               },
               title: "Underline",
               children: /* @__PURE__ */ i.jsx("u", { children: "U" })
@@ -5205,8 +5205,8 @@ const Ut = {
             {
               className: (v = f.textDecoration) != null && v.includes("overline") ? "active" : "",
               onClick: () => {
-                const T = f.textDecoration || "", O = T.split(" ").filter((k) => k && k !== "overline");
-                T.includes("overline") || O.push("overline"), n("textDecoration", O.join(" ").trim());
+                const j = f.textDecoration || "", O = j.split(" ").filter((k) => k && k !== "overline");
+                j.includes("overline") || O.push("overline"), n("textDecoration", O.join(" ").trim());
               },
               title: "Overline",
               children: /* @__PURE__ */ i.jsx("span", { style: { textDecoration: "overline" }, children: "O" })
@@ -5217,8 +5217,8 @@ const Ut = {
             {
               className: (X = f.textDecoration) != null && X.includes("line-through") ? "active" : "",
               onClick: () => {
-                const T = f.textDecoration || "", O = T.split(" ").filter((k) => k && k !== "line-through");
-                T.includes("line-through") || O.push("line-through"), n("textDecoration", O.join(" ").trim());
+                const j = f.textDecoration || "", O = j.split(" ").filter((k) => k && k !== "line-through");
+                j.includes("line-through") || O.push("line-through"), n("textDecoration", O.join(" ").trim());
               },
               title: "Strikethrough",
               children: /* @__PURE__ */ i.jsx("s", { children: "S" })
@@ -5316,7 +5316,7 @@ const Ut = {
             {
               type: "color",
               value: f.fill || "#000000",
-              onChange: (T) => n("fill", T.target.value)
+              onChange: (j) => n("fill", j.target.value)
             }
           )
         ] }),
@@ -5328,7 +5328,7 @@ const Ut = {
               {
                 type: "color",
                 value: f.backgroundColor || "#ffffff",
-                onChange: (T) => n("backgroundColor", T.target.value),
+                onChange: (j) => n("backgroundColor", j.target.value),
                 disabled: !f.hasBackground
               }
             ),
@@ -5354,7 +5354,7 @@ const Ut = {
                 type: "number",
                 step: "0.1",
                 value: f.letterSpacing || 0,
-                onChange: (T) => n("letterSpacing", parseFloat(T.target.value)),
+                onChange: (j) => n("letterSpacing", parseFloat(j.target.value)),
                 min: "-5",
                 max: "10"
               }
@@ -5368,7 +5368,7 @@ const Ut = {
                 type: "number",
                 step: "0.1",
                 value: f.wordSpacing || 0,
-                onChange: (T) => n("wordSpacing", parseFloat(T.target.value)),
+                onChange: (j) => n("wordSpacing", parseFloat(j.target.value)),
                 min: "-10",
                 max: "20"
               }
@@ -5394,7 +5394,7 @@ const Ut = {
                   {
                     type: "number",
                     value: f.textShadowX || 2,
-                    onChange: (T) => n("textShadowX", parseInt(T.target.value)),
+                    onChange: (j) => n("textShadowX", parseInt(j.target.value)),
                     min: "-20",
                     max: "20"
                   }
@@ -5407,7 +5407,7 @@ const Ut = {
                   {
                     type: "number",
                     value: f.textShadowY || 2,
-                    onChange: (T) => n("textShadowY", parseInt(T.target.value)),
+                    onChange: (j) => n("textShadowY", parseInt(j.target.value)),
                     min: "-20",
                     max: "20"
                   }
@@ -5420,7 +5420,7 @@ const Ut = {
                   {
                     type: "number",
                     value: f.textShadowBlur || 4,
-                    onChange: (T) => n("textShadowBlur", parseInt(T.target.value)),
+                    onChange: (j) => n("textShadowBlur", parseInt(j.target.value)),
                     min: "0",
                     max: "20"
                   }
@@ -5433,7 +5433,7 @@ const Ut = {
                   {
                     type: "color",
                     value: f.textShadowColor || "#000000",
-                    onChange: (T) => n("textShadowColor", T.target.value)
+                    onChange: (j) => n("textShadowColor", j.target.value)
                   }
                 )
               ] })
@@ -5448,7 +5448,7 @@ const Ut = {
               {
                 type: "color",
                 value: f.stroke || "#000000",
-                onChange: (T) => n("stroke", T.target.value)
+                onChange: (j) => n("stroke", j.target.value)
               }
             )
           ] }),
@@ -5459,7 +5459,7 @@ const Ut = {
               {
                 type: "number",
                 value: f.strokeWidth || 0,
-                onChange: (T) => n("strokeWidth", parseInt(T.target.value)),
+                onChange: (j) => n("strokeWidth", parseInt(j.target.value)),
                 min: "0",
                 max: "20"
               }
@@ -5476,7 +5476,7 @@ const Ut = {
               max: "1",
               step: "0.1",
               value: f.opacity || 1,
-              onChange: (T) => n("opacity", parseFloat(T.target.value))
+              onChange: (j) => n("opacity", parseFloat(j.target.value))
             }
           ),
           /* @__PURE__ */ i.jsxs("span", { children: [
@@ -5490,7 +5490,7 @@ const Ut = {
             "select",
             {
               value: f.fontVariant || "normal",
-              onChange: (T) => n("fontVariant", T.target.value),
+              onChange: (j) => n("fontVariant", j.target.value),
               children: [
                 /* @__PURE__ */ i.jsx("option", { value: "normal", children: "Normal" }),
                 /* @__PURE__ */ i.jsx("option", { value: "small-caps", children: "Small Caps" })
@@ -5504,7 +5504,7 @@ const Ut = {
             "select",
             {
               value: f.writingMode || "horizontal-tb",
-              onChange: (T) => n("writingMode", T.target.value),
+              onChange: (j) => n("writingMode", j.target.value),
               children: [
                 /* @__PURE__ */ i.jsx("option", { value: "horizontal-tb", children: "Horizontal" }),
                 /* @__PURE__ */ i.jsx("option", { value: "vertical-rl", children: "Vertical Right-to-Left" }),
@@ -5543,7 +5543,7 @@ const Ut = {
             {
               type: "number",
               value: f.backgroundPadding || 5,
-              onChange: (T) => n("backgroundPadding", parseInt(T.target.value)),
+              onChange: (j) => n("backgroundPadding", parseInt(j.target.value)),
               min: "0",
               max: "50",
               disabled: !f.hasBackground
@@ -5784,7 +5784,7 @@ const Ut = {
       /* @__PURE__ */ i.jsx("button", { onClick: () => a(f.id, "down"), children: "Send Backward" }),
       /* @__PURE__ */ i.jsx("button", { onClick: () => a(f.id, "bottom"), children: "Send to Back" })
     ] })
-  ] }), j = [
+  ] }), T = [
     "rectangle",
     "circle",
     "triangle",
@@ -5804,7 +5804,7 @@ const Ut = {
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "panel-content", children: [
       f.type === "text" && c(),
-      j.includes(f.type) && F(),
+      T.includes(f.type) && F(),
       f.type === "image" && I(),
       f.type === "horizontalLine" && m(),
       E(),
@@ -5958,10 +5958,10 @@ class ci {
         let B = F.image || F.sectionImage;
         if (n && n.sectionImage && (F.sectionName === "Front" || n.sections && Object.keys(n.sections).includes(F.sectionName)) && (B = n.sectionImage), B)
           try {
-            const j = await this.loadImage(B);
-            await this.processImageColor(j, E.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
-          } catch (j) {
-            console.warn("Failed to load background image:", j);
+            const T = await this.loadImage(B);
+            await this.processImageColor(T, E.selectedColor || "#FFFFFF"), this.ctx.drawImage(this.processedImage, 0, 0, l, s);
+          } catch (T) {
+            console.warn("Failed to load background image:", T);
           }
       } else
         this.ctx.clearRect(0, 0, l, s);
@@ -6324,15 +6324,15 @@ class ci {
   async exportAllSectionsAsJSON(o, a, l, s, g = "png", h = null) {
     var m, B;
     const n = [], c = [], F = {};
-    for (const j of a) {
-      const p = j.id || j.sectionName, v = o[p];
+    for (const T of a) {
+      const p = T.sectionName, v = o[p];
       if (!v || !v.elements || v.elements.length === 0) {
         console.log(`Skipping section ${p} - no elements`);
         continue;
       }
-      let X = j.image || j.sectionImage;
-      h && h.sectionImage && (j.sectionName === "Front" || h.sections && Object.keys(h.sections).includes(j.sectionName)) && (X = h.sectionImage);
-      const T = {
+      let X = T.image || T.sectionImage;
+      h && h.sectionImage && (T.sectionName === "Front" || h.sections && Object.keys(h.sections).includes(T.sectionName)) && (X = h.sectionImage);
+      const j = {
         ...v,
         // Include background information using the determined image
         backgroundImage: X,
@@ -6344,10 +6344,10 @@ class ci {
         canvasWidth: l,
         canvasHeight: s
       };
-      F[p] = T;
+      F[p] = j;
       const O = await this.exportSectionAsBlob(
         v,
-        j,
+        T,
         l,
         s,
         g,
@@ -6368,7 +6368,7 @@ class ci {
       }
       const k = await this.exportSectionAsBlob(
         v,
-        j,
+        T,
         l,
         s,
         g,
@@ -6390,8 +6390,8 @@ class ci {
     }
     let I = ((m = a[0]) == null ? void 0 : m.image) || ((B = a[0]) == null ? void 0 : B.sectionImage);
     if (h && h.sectionImage) {
-      const j = a[0];
-      j && (j.sectionName === "Front" || h.sections && Object.keys(h.sections).includes(j.sectionName)) && (I = h.sectionImage);
+      const T = a[0];
+      T && (T.sectionName === "Front" || h.sections && Object.keys(h.sections).includes(T.sectionName)) && (I = h.sectionImage);
     }
     const E = {
       sections: F,
@@ -6410,10 +6410,10 @@ class ci {
       },
       // Include product information for complete context
       product: {
-        sections: a.map((j) => ({
-          sectionName: j.sectionName || j.id,
-          sectionImage: j.image || j.sectionImage,
-          id: j.id || j.sectionName
+        sections: a.map((T) => ({
+          sectionName: T.sectionName || T.id,
+          sectionImage: T.image || T.sectionImage,
+          id: T.id || T.sectionName
         }))
       }
     };
@@ -6447,9 +6447,9 @@ class ci {
     }
   }
   async exportCurrentSectionAsJSON(o, a = "png", l = null) {
-    var B, j, p;
+    var B, T, p;
     const s = ((B = o.activeSection) == null ? void 0 : B.sectionName) || "main";
-    let g = ((j = o.activeSection) == null ? void 0 : j.sectionImage) || ((p = o.activeSection) == null ? void 0 : p.image);
+    let g = ((T = o.activeSection) == null ? void 0 : T.sectionImage) || ((p = o.activeSection) == null ? void 0 : p.image);
     l && l.sectionImage && (s === "Front" || l.sections && Object.keys(l.sections).includes(s)) && (g = l.sectionImage);
     const h = {
       elements: o.elements,
@@ -6764,7 +6764,7 @@ const fi = $e((f, o) => {
       ]
     },
     initFile: g
-  } = f, [h, n] = N([]), [c, F] = N(null), [I, E] = N(!1), [m, B] = N(!1), [j, p] = N(!1), [v, X] = N({ x: 0, y: 0 }), [T, O] = N(null), [k, Z] = N(800), [W, xt] = N(600), [Q, ft] = N(1), [_, st] = N(s.colorSettings[0]), [M, nt] = N(!1), [tt, ct] = N(!0), [Y, P] = N(!0), [C, et] = N(s.sections[0]), [y, D] = N(!1), [L, H] = N({}), [G, it] = N([]), [J, q] = N(-1), [U] = N(new di("localStorage")), K = gt(null), kt = gt(null), pt = gt(null), wt = gt(null), Ot = gt(null), Bt = gt(new ci()), zt = gt(!1), [yt, ce] = N(null), lt = at(() => {
+  } = f, [h, n] = N([]), [c, F] = N(null), [I, E] = N(!1), [m, B] = N(!1), [T, p] = N(!1), [v, X] = N({ x: 0, y: 0 }), [j, O] = N(null), [k, Z] = N(800), [W, xt] = N(600), [Q, ft] = N(1), [_, st] = N(s.colorSettings[0]), [M, nt] = N(!1), [tt, ct] = N(!0), [Y, P] = N(!0), [C, et] = N(s.sections[0]), [y, D] = N(!1), [L, H] = N({}), [G, it] = N([]), [J, q] = N(-1), [U] = N(new di("localStorage")), K = gt(null), kt = gt(null), pt = gt(null), wt = gt(null), Ot = gt(null), Bt = gt(new ci()), zt = gt(!1), [yt, ce] = N(null), lt = at(() => {
     const e = {
       elements: JSON.parse(JSON.stringify(h)),
       selectedElement: c ? { ...c } : null,
@@ -7346,10 +7346,10 @@ const fi = $e((f, o) => {
     const d = r.x + r.width / 2, x = r.y + r.height / 2, u = e - d, w = t - x, S = -(r.rotation || 0) * Math.PI / 180, b = Math.cos(S), R = Math.sin(S), A = u * b - w * R, z = u * R + w * b, $ = r.width / 2, dt = r.height / 2;
     return A >= -$ && A <= $ && z >= -dt && z <= dt;
   }, Be = at(() => {
-    (I || m || j) && lt(), E(!1), B(!1), p(!1), O(null);
+    (I || m || T) && lt(), E(!1), B(!1), p(!1), O(null);
     const e = K.current;
     e && (e.style.cursor = "default");
-  }, [I, m, j, lt]);
+  }, [I, m, T, lt]);
   rt(() => {
     const e = (t) => {
       if (l) return;
@@ -7537,11 +7537,11 @@ const fi = $e((f, o) => {
     mt.current && cancelAnimationFrame(mt.current);
   }, []);
   const Pt = at(() => {
-    V(), (I || m || j) && (mt.current = requestAnimationFrame(Pt));
-  }, [V, I, m, j]);
+    V(), (I || m || T) && (mt.current = requestAnimationFrame(Pt));
+  }, [V, I, m, T]);
   rt(() => {
-    I || m || j ? Pt() : (mt.current && (cancelAnimationFrame(mt.current), mt.current = null), vt());
-  }, [I, m, j, Pt, vt]);
+    I || m || T ? Pt() : (mt.current && (cancelAnimationFrame(mt.current), mt.current = null), vt());
+  }, [I, m, T, Pt, vt]);
   const Me = at((e) => {
     if (l) return;
     const r = K.current.getBoundingClientRect(), d = (e.clientX - r.left) / Q, x = (e.clientY - r.top) / Q;
@@ -7584,12 +7584,12 @@ const fi = $e((f, o) => {
   }, [l, Q, c, h, V]), Le = at((e) => {
     if (l) return;
     const t = K.current, r = t.getBoundingClientRect(), d = (e.clientX - r.left) / Q, x = (e.clientY - r.top) / Q;
-    if (c && !I && !m && !j) {
+    if (c && !I && !m && !T) {
       const u = $t(d, x, c);
       u ? u === "rotate" ? t.style.cursor = "grab" : t.style.cursor = u : Ht(d, x, c) ? t.style.cursor = "move" : t.style.cursor = "default";
     } else
       t.style.cursor = I ? "grabbing" : "default";
-    if (j && c) {
+    if (T && c) {
       const u = c.x + c.width / 2, w = c.y + c.height / 2, b = Math.atan2(x - w, d - u) * 180 / Math.PI - v.initialAngle;
       let R = v.initialRotation + b;
       e.shiftKey && (R = Math.round(R / 15) * 15), R = (R % 360 + 360) % 360, n(
@@ -7599,10 +7599,10 @@ const fi = $e((f, o) => {
       ), F((A) => ({ ...A, rotation: R })), V();
       return;
     }
-    if (m && c && T) {
+    if (m && c && j) {
       const u = d - v.x, w = x - v.y;
       let S = v.initialWidth, b = v.initialHeight, R = v.initialX, A = v.initialY;
-      switch (T) {
+      switch (j) {
         case "se-resize":
           S = Math.max(20, v.initialWidth + u), b = Math.max(20, v.initialHeight + w);
           break;
@@ -7618,7 +7618,7 @@ const fi = $e((f, o) => {
       }
       if (e.shiftKey && c.type !== "text") {
         const $ = v.initialWidth / v.initialHeight;
-        T.includes("e"), b = S / $, T.includes("n") && (A = v.initialY + (v.initialHeight - b));
+        j.includes("e"), b = S / $, j.includes("n") && (A = v.initialY + (v.initialHeight - b));
       }
       Y && (R = ut(R), A = ut(A), S = ut(S), b = ut(b));
       const z = {
@@ -7649,7 +7649,7 @@ const fi = $e((f, o) => {
         )
       ), F(S), V();
     }
-  }, [l, Q, c, I, m, j, T, v, Y, k, W, h, V]), qt = at((e) => {
+  }, [l, Q, c, I, m, T, j, v, Y, k, W, h, V]), qt = at((e) => {
     C && H((r) => ({
       ...r,
       [C.sectionName]: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mypixia/simplex-designer",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "unpkg": "dist/index.umd.js",