vibrant-tool 0.1.10 → 0.1.11

package/dist/vibrant-tool.umd.js

@@ -9018,6 +9018,248 @@
       }
     }
   }));
+  const FontService = {
+    async getAll(data) {
+      const res = await apiFetch(`/api/fonts?page=${data.page}&limit=${data.limit}&status=true`, {
+        method: "GET"
+      });
+      return res;
+    }
+  };
+  let cachedFontsPromise = null;
+  async function fetchAllFontsCached() {
+    if (!cachedFontsPromise) {
+      cachedFontsPromise = FontService.getAll({ page: 1, limit: 1e3 }).then((res) => res?.data || []).catch((err) => {
+        console.warn("Failed to fetch all fonts:", err);
+        cachedFontsPromise = null;
+        return [];
+      });
+    }
+    return cachedFontsPromise;
+  }
+  async function injectFontFace(fontName, fontUrl) {
+    if (!fontName || !fontUrl || typeof document === "undefined") return;
+    const cleanedName = fontName.trim().replace(/^['"]+|['"]+$/g, "");
+    const id = `font-${cleanedName.replace(/\s+/g, "-").toLowerCase()}`;
+    if (!document.getElementById(id)) {
+      const style = document.createElement("style");
+      style.id = id;
+      style.innerHTML = `
+      @font-face {
+        font-family: '${cleanedName}';
+        src: url('${fontUrl}');
+        font-display: swap;
+      }
+    `;
+      document.head.appendChild(style);
+    }
+    try {
+      await document.fonts.load(`16px "${cleanedName}"`);
+      await document.fonts.ready;
+    } catch {
+    }
+  }
+  async function loadTemplateFontsIntoHead(templateFonts, pagesDesignData) {
+    if (typeof document === "undefined") return;
+    const loadPromises = [];
+    if (Array.isArray(templateFonts) && templateFonts.length > 0) {
+      templateFonts.forEach((f) => {
+        if (f && typeof f === "object") {
+          const fontName = f.fontName || f.fontFamily;
+          const fontUrl = f.fontFile;
+          if (fontName && fontUrl) {
+            loadPromises.push(injectFontFace(fontName, fontUrl));
+          }
+          if (f.fontFamily && f.fontFamily !== fontName && fontUrl) {
+            loadPromises.push(injectFontFace(f.fontFamily, fontUrl));
+          }
+        }
+      });
+    }
+    const designs = Array.isArray(pagesDesignData) ? pagesDesignData : [pagesDesignData];
+    const usedFontNames = /* @__PURE__ */ new Set();
+    designs.forEach((d2) => {
+      if (d2) {
+        const extracted = extractFontFamilies(d2);
+        extracted.forEach((name) => usedFontNames.add(name));
+      }
+    });
+    if (usedFontNames.size > 0) {
+      try {
+        const allFonts = await fetchAllFontsCached();
+        usedFontNames.forEach((name) => {
+          const lower = name.toLowerCase();
+          const matched = allFonts.find((f) => {
+            if (f.fontName && f.fontName.toLowerCase() === lower) return true;
+            if (f.fontFamily && f.fontFamily.toLowerCase() === lower) return true;
+            const children = f.childFonts || f.chieldFonts || [];
+            return children.some(
+              (c2) => c2.fontName && c2.fontName.toLowerCase() === lower || c2.fontFamily && c2.fontFamily.toLowerCase() === lower
+            );
+          });
+          if (matched) {
+            if (matched.fontName && matched.fontFile) {
+              loadPromises.push(injectFontFace(matched.fontName, matched.fontFile));
+            }
+            if (matched.fontFamily && matched.fontFile) {
+              loadPromises.push(injectFontFace(matched.fontFamily, matched.fontFile));
+            }
+            const children = matched.childFonts || matched.chieldFonts || [];
+            children.forEach((c2) => {
+              if (c2.fontName && c2.fontFile) {
+                loadPromises.push(injectFontFace(c2.fontName, c2.fontFile));
+              }
+            });
+          }
+        });
+      } catch (err) {
+        console.warn("Failed to fetch fonts list for font injection:", err);
+      }
+    }
+    await Promise.allSettled(loadPromises);
+    try {
+      await document.fonts.ready;
+    } catch {
+    }
+  }
+  function extractFontFamilies(designJson) {
+    if (!designJson) return [];
+    const fonts = /* @__PURE__ */ new Set();
+    const traverse = (obj) => {
+      if (!obj) return;
+      if (obj.fontFamily && typeof obj.fontFamily === "string") {
+        const cleaned = obj.fontFamily.trim().replace(/^['"]+|['"]+$/g, "");
+        if (cleaned) fonts.add(cleaned);
+      }
+      if (obj.fontId && typeof obj.fontId === "string") {
+        fonts.add(obj.fontId.trim());
+      }
+      if (obj.styles && typeof obj.styles === "object") {
+        Object.values(obj.styles).forEach((line) => {
+          if (line && typeof line === "object") {
+            Object.values(line).forEach((charStyle) => {
+              if (charStyle?.fontFamily && typeof charStyle.fontFamily === "string") {
+                const cleaned = charStyle.fontFamily.trim().replace(/^['"]+|['"]+$/g, "");
+                if (cleaned) fonts.add(cleaned);
+              }
+            });
+          }
+        });
+      }
+      if (Array.isArray(obj.objects)) {
+        obj.objects.forEach(traverse);
+      }
+    };
+    if (Array.isArray(designJson.objects)) {
+      designJson.objects.forEach(traverse);
+    } else if (Array.isArray(designJson)) {
+      designJson.forEach(traverse);
+    } else {
+      traverse(designJson);
+    }
+    return Array.from(fonts);
+  }
+  async function resolveFontIds(fontNames) {
+    if (!fontNames || !fontNames.length) return [];
+    try {
+      const allFonts = await fetchAllFontsCached();
+      const matchedIds = /* @__PURE__ */ new Set();
+      for (const rawName of fontNames) {
+        const name = rawName.trim().replace(/^['"]+|['"]+$/g, "");
+        const lower = name.toLowerCase();
+        if (/^[0-9a-fA-F]{24}$/.test(name)) {
+          matchedIds.add(name);
+          continue;
+        }
+        const matchedFont = allFonts.find((f) => {
+          if (f._id === name) return true;
+          if (f.fontFamily && f.fontFamily.toLowerCase() === lower) return true;
+          if (f.fontName && f.fontName.toLowerCase() === lower) return true;
+          const children = f.childFonts || f.chieldFonts || [];
+          return children.some(
+            (c2) => c2._id === name || c2.fontName && c2.fontName.toLowerCase() === lower || c2.fontFamily && c2.fontFamily.toLowerCase() === lower
+          );
+        });
+        if (matchedFont?._id) {
+          matchedIds.add(matchedFont._id);
+        }
+      }
+      return Array.from(matchedIds);
+    } catch (err) {
+      console.warn("Failed to resolve font IDs:", err);
+      return [];
+    }
+  }
+  async function resolveFontsForExport(designs, templateFonts) {
+    const result = [];
+    const foundNames = /* @__PURE__ */ new Set();
+    if (Array.isArray(templateFonts) && templateFonts.length > 0) {
+      templateFonts.forEach((f) => {
+        if (f && typeof f === "object") {
+          const fontName = f.fontName || f.fontFamily;
+          const fontFile = f.fontFile;
+          if (fontName && fontFile) {
+            result.push({ fontName, fontFamily: f.fontFamily, fontFile });
+            foundNames.add(fontName.toLowerCase());
+            if (f.fontFamily) foundNames.add(f.fontFamily.toLowerCase());
+          }
+        }
+      });
+    }
+    const usedFontNames = /* @__PURE__ */ new Set();
+    const designsArr = Array.isArray(designs) ? designs : [designs];
+    designsArr.forEach((d2) => {
+      if (d2) {
+        const extracted = extractFontFamilies(d2);
+        extracted.forEach((name) => {
+          if (!foundNames.has(name.toLowerCase())) {
+            usedFontNames.add(name);
+          }
+        });
+      }
+    });
+    if (usedFontNames.size > 0) {
+      try {
+        const allFonts = await fetchAllFontsCached();
+        usedFontNames.forEach((name) => {
+          const lower = name.toLowerCase();
+          const matched = allFonts.find((f) => {
+            if (f.fontName && f.fontName.toLowerCase() === lower) return true;
+            if (f.fontFamily && f.fontFamily.toLowerCase() === lower) return true;
+            const children = f.childFonts || f.chieldFonts || [];
+            return children.some(
+              (c2) => c2.fontName && c2.fontName.toLowerCase() === lower || c2.fontFamily && c2.fontFamily.toLowerCase() === lower
+            );
+          });
+          if (matched) {
+            if (matched.fontName && matched.fontFile && !foundNames.has(matched.fontName.toLowerCase())) {
+              result.push({
+                fontName: matched.fontName,
+                fontFamily: matched.fontFamily,
+                fontFile: matched.fontFile
+              });
+              foundNames.add(matched.fontName.toLowerCase());
+            }
+            const children = matched.childFonts || matched.chieldFonts || [];
+            children.forEach((c2) => {
+              const childName = c2.fontName || name;
+              if (c2.fontFile && !foundNames.has(childName.toLowerCase())) {
+                result.push({
+                  fontName: childName,
+                  fontFamily: c2.fontFamily,
+                  fontFile: c2.fontFile
+                });
+                foundNames.add(childName.toLowerCase());
+              }
+            });
+          }
+        });
+      } catch (err) {
+        console.warn("Failed to resolve fonts for export:", err);
+      }
+    }
+    return result;
+  }
   async function loadPageToCanvas(canvas2, json, pageSide) {
     if (!canvas2) return;
     canvas2.discardActiveObject();
@@ -9025,6 +9267,7 @@
     if (json) {
       try {
         const parsedJson = typeof json === "string" ? JSON.parse(json) : json;
+        await loadTemplateFontsIntoHead(null, parsedJson);
         const loadPromise = canvas2.loadFromJSON(parsedJson);
         const timeoutPromise = new Promise(
           (_2, reject) => setTimeout(() => reject(new Error("Canvas loadFromJSON timeout")), 4e3)
@@ -9366,7 +9609,23 @@
     "__borderRect",
     "__rotationControlSize",
     "__showDegree",
-    "textAlign"
+    "textAlign",
+    "fontFamily",
+    "fontSize",
+    "fontWeight",
+    "fontStyle",
+    "underline",
+    "linethrough",
+    "overline",
+    "fill",
+    "stroke",
+    "strokeWidth",
+    "lineHeight",
+    "charSpacing",
+    "styles",
+    "paintFirst",
+    "strokeUniform",
+    "objectCaching"
   ];
   const useHistoryStore = create((set, get) => ({
     canvas: null,
@@ -9484,248 +9743,6 @@
       }
     }
   }));
-  const FontService = {
-    async getAll(data) {
-      const res = await apiFetch(`/api/fonts?page=${data.page}&limit=${data.limit}&status=true`, {
-        method: "GET"
-      });
-      return res;
-    }
-  };
-  let cachedFontsPromise = null;
-  async function fetchAllFontsCached() {
-    if (!cachedFontsPromise) {
-      cachedFontsPromise = FontService.getAll({ page: 1, limit: 1e3 }).then((res) => res?.data || []).catch((err) => {
-        console.warn("Failed to fetch all fonts:", err);
-        cachedFontsPromise = null;
-        return [];
-      });
-    }
-    return cachedFontsPromise;
-  }
-  async function injectFontFace(fontName, fontUrl) {
-    if (!fontName || !fontUrl || typeof document === "undefined") return;
-    const cleanedName = fontName.trim().replace(/^['"]+|['"]+$/g, "");
-    const id = `font-${cleanedName.replace(/\s+/g, "-").toLowerCase()}`;
-    if (!document.getElementById(id)) {
-      const style = document.createElement("style");
-      style.id = id;
-      style.innerHTML = `
-      @font-face {
-        font-family: '${cleanedName}';
-        src: url('${fontUrl}');
-        font-display: swap;
-      }
-    `;
-      document.head.appendChild(style);
-    }
-    try {
-      await document.fonts.load(`16px "${cleanedName}"`);
-      await document.fonts.ready;
-    } catch {
-    }
-  }
-  async function loadTemplateFontsIntoHead(templateFonts, pagesDesignData) {
-    if (typeof document === "undefined") return;
-    const loadPromises = [];
-    if (Array.isArray(templateFonts) && templateFonts.length > 0) {
-      templateFonts.forEach((f) => {
-        if (f && typeof f === "object") {
-          const fontName = f.fontName || f.fontFamily;
-          const fontUrl = f.fontFile;
-          if (fontName && fontUrl) {
-            loadPromises.push(injectFontFace(fontName, fontUrl));
-          }
-          if (f.fontFamily && f.fontFamily !== fontName && fontUrl) {
-            loadPromises.push(injectFontFace(f.fontFamily, fontUrl));
-          }
-        }
-      });
-    }
-    const designs = Array.isArray(pagesDesignData) ? pagesDesignData : [pagesDesignData];
-    const usedFontNames = /* @__PURE__ */ new Set();
-    designs.forEach((d2) => {
-      if (d2) {
-        const extracted = extractFontFamilies(d2);
-        extracted.forEach((name) => usedFontNames.add(name));
-      }
-    });
-    if (usedFontNames.size > 0) {
-      try {
-        const allFonts = await fetchAllFontsCached();
-        usedFontNames.forEach((name) => {
-          const lower = name.toLowerCase();
-          const matched = allFonts.find((f) => {
-            if (f.fontName && f.fontName.toLowerCase() === lower) return true;
-            if (f.fontFamily && f.fontFamily.toLowerCase() === lower) return true;
-            const children = f.childFonts || f.chieldFonts || [];
-            return children.some(
-              (c2) => c2.fontName && c2.fontName.toLowerCase() === lower || c2.fontFamily && c2.fontFamily.toLowerCase() === lower
-            );
-          });
-          if (matched) {
-            if (matched.fontName && matched.fontFile) {
-              loadPromises.push(injectFontFace(matched.fontName, matched.fontFile));
-            }
-            if (matched.fontFamily && matched.fontFile) {
-              loadPromises.push(injectFontFace(matched.fontFamily, matched.fontFile));
-            }
-            const children = matched.childFonts || matched.chieldFonts || [];
-            children.forEach((c2) => {
-              if (c2.fontName && c2.fontFile) {
-                loadPromises.push(injectFontFace(c2.fontName, c2.fontFile));
-              }
-            });
-          }
-        });
-      } catch (err) {
-        console.warn("Failed to fetch fonts list for font injection:", err);
-      }
-    }
-    await Promise.allSettled(loadPromises);
-    try {
-      await document.fonts.ready;
-    } catch {
-    }
-  }
-  function extractFontFamilies(designJson) {
-    if (!designJson) return [];
-    const fonts = /* @__PURE__ */ new Set();
-    const traverse = (obj) => {
-      if (!obj) return;
-      if (obj.fontFamily && typeof obj.fontFamily === "string") {
-        const cleaned = obj.fontFamily.trim().replace(/^['"]+|['"]+$/g, "");
-        if (cleaned) fonts.add(cleaned);
-      }
-      if (obj.fontId && typeof obj.fontId === "string") {
-        fonts.add(obj.fontId.trim());
-      }
-      if (obj.styles && typeof obj.styles === "object") {
-        Object.values(obj.styles).forEach((line) => {
-          if (line && typeof line === "object") {
-            Object.values(line).forEach((charStyle) => {
-              if (charStyle?.fontFamily && typeof charStyle.fontFamily === "string") {
-                const cleaned = charStyle.fontFamily.trim().replace(/^['"]+|['"]+$/g, "");
-                if (cleaned) fonts.add(cleaned);
-              }
-            });
-          }
-        });
-      }
-      if (Array.isArray(obj.objects)) {
-        obj.objects.forEach(traverse);
-      }
-    };
-    if (Array.isArray(designJson.objects)) {
-      designJson.objects.forEach(traverse);
-    } else if (Array.isArray(designJson)) {
-      designJson.forEach(traverse);
-    } else {
-      traverse(designJson);
-    }
-    return Array.from(fonts);
-  }
-  async function resolveFontIds(fontNames) {
-    if (!fontNames || !fontNames.length) return [];
-    try {
-      const allFonts = await fetchAllFontsCached();
-      const matchedIds = /* @__PURE__ */ new Set();
-      for (const rawName of fontNames) {
-        const name = rawName.trim().replace(/^['"]+|['"]+$/g, "");
-        const lower = name.toLowerCase();
-        if (/^[0-9a-fA-F]{24}$/.test(name)) {
-          matchedIds.add(name);
-          continue;
-        }
-        const matchedFont = allFonts.find((f) => {
-          if (f._id === name) return true;
-          if (f.fontFamily && f.fontFamily.toLowerCase() === lower) return true;
-          if (f.fontName && f.fontName.toLowerCase() === lower) return true;
-          const children = f.childFonts || f.chieldFonts || [];
-          return children.some(
-            (c2) => c2._id === name || c2.fontName && c2.fontName.toLowerCase() === lower || c2.fontFamily && c2.fontFamily.toLowerCase() === lower
-          );
-        });
-        if (matchedFont?._id) {
-          matchedIds.add(matchedFont._id);
-        }
-      }
-      return Array.from(matchedIds);
-    } catch (err) {
-      console.warn("Failed to resolve font IDs:", err);
-      return [];
-    }
-  }
-  async function resolveFontsForExport(designs, templateFonts) {
-    const result = [];
-    const foundNames = /* @__PURE__ */ new Set();
-    if (Array.isArray(templateFonts) && templateFonts.length > 0) {
-      templateFonts.forEach((f) => {
-        if (f && typeof f === "object") {
-          const fontName = f.fontName || f.fontFamily;
-          const fontFile = f.fontFile;
-          if (fontName && fontFile) {
-            result.push({ fontName, fontFamily: f.fontFamily, fontFile });
-            foundNames.add(fontName.toLowerCase());
-            if (f.fontFamily) foundNames.add(f.fontFamily.toLowerCase());
-          }
-        }
-      });
-    }
-    const usedFontNames = /* @__PURE__ */ new Set();
-    const designsArr = Array.isArray(designs) ? designs : [designs];
-    designsArr.forEach((d2) => {
-      if (d2) {
-        const extracted = extractFontFamilies(d2);
-        extracted.forEach((name) => {
-          if (!foundNames.has(name.toLowerCase())) {
-            usedFontNames.add(name);
-          }
-        });
-      }
-    });
-    if (usedFontNames.size > 0) {
-      try {
-        const allFonts = await fetchAllFontsCached();
-        usedFontNames.forEach((name) => {
-          const lower = name.toLowerCase();
-          const matched = allFonts.find((f) => {
-            if (f.fontName && f.fontName.toLowerCase() === lower) return true;
-            if (f.fontFamily && f.fontFamily.toLowerCase() === lower) return true;
-            const children = f.childFonts || f.chieldFonts || [];
-            return children.some(
-              (c2) => c2.fontName && c2.fontName.toLowerCase() === lower || c2.fontFamily && c2.fontFamily.toLowerCase() === lower
-            );
-          });
-          if (matched) {
-            if (matched.fontName && matched.fontFile && !foundNames.has(matched.fontName.toLowerCase())) {
-              result.push({
-                fontName: matched.fontName,
-                fontFamily: matched.fontFamily,
-                fontFile: matched.fontFile
-              });
-              foundNames.add(matched.fontName.toLowerCase());
-            }
-            const children = matched.childFonts || matched.chieldFonts || [];
-            children.forEach((c2) => {
-              const childName = c2.fontName || name;
-              if (c2.fontFile && !foundNames.has(childName.toLowerCase())) {
-                result.push({
-                  fontName: childName,
-                  fontFamily: c2.fontFamily,
-                  fontFile: c2.fontFile
-                });
-                foundNames.add(childName.toLowerCase());
-              }
-            });
-          }
-        });
-      } catch (err) {
-        console.warn("Failed to resolve fonts for export:", err);
-      }
-    }
-    return result;
-  }
   const WATERMARK_TEXT = "vibrantprintshop";
   function createWatermark(curWorkarea, pageSide) {
     const curW = curWorkarea.getScaledWidth ? curWorkarea.getScaledWidth() : curWorkarea.width * (curWorkarea.scaleX || 1);
@@ -9818,8 +9835,18 @@
   }
   const ShapeService = {
     async getAll(data) {
+      const params = new URLSearchParams();
+      if (data.page) params.append("page", String(data.page));
+      if (data.limit) params.append("limit", String(data.limit));
+      if (data.category && data.category !== "ALL" && data.category !== "null" && data.category !== "undefined") {
+        params.append("category", data.category);
+      }
+      if (data.search && data.search.trim()) {
+        params.append("search", data.search.trim());
+      }
+      params.append("status", "true");
       const res = await apiFetch(
-        `/api/cliparts?page=${data.page}&limit=${data.limit}&category=${data.category}&status=true`,
+        `/api/cliparts?${params.toString()}`,
         {
           method: "GET"
         }
@@ -9829,8 +9856,17 @@
       };
     },
     async getAllExternal(data) {
+      const params = new URLSearchParams();
+      if (data.page) params.append("page", String(data.page));
+      if (data.limit) params.append("limit", String(data.limit));
+      if (data.keyType) params.append("keyType", data.keyType);
+      if (data.isVector) params.append("isVector", "true");
+      if (data.query && data.query.trim()) {
+        params.append("query", data.query.trim());
+      }
+      params.append("status", "true");
       const res = await apiFetch(
-        `/api/external/images?page=${data.page}&limit=${data.limit}&keyType=${data.keyType}&status=true${data.query ? `&query=${data.query}` : ""}`,
+        `/api/external/images?${params.toString()}`,
         {
           method: "GET"
         }
@@ -101911,8 +101947,43 @@ end`);
         if (!uploadedImageUrl) {
           throw new Error("Server upload returned empty image URL");
         }
+        const canvas22 = useEditorStore.getState().canvas;
+        if (!templateId || !canvas22) return;
+        const { pages: historyPages, currentPage } = useHistoryStore.getState();
+        const editorPages = useEditorStore.getState().pages || {};
+        const currentJson = canvas22.toObject(["name"]);
+        const currentImage = getWorkareaDataUrl(canvas22, 1, currentPage);
+        const pages = await Promise.all(
+          ["front", "back"].map(async (side, i2) => {
+            const isCurrent = currentPage === side;
+            const designData = isCurrent ? currentJson : editorPages[side] || historyPages[side]?.history?.at(-1) || null;
+            if (!designData) return null;
+            const sideImage = isCurrent ? currentImage : await renderPageDataUrl(designData, canvas22, 1, side);
+            const uploadedImageUrl2 = await UploadService.uploadDataUrl(
+              sideImage,
+              `template-${templateId}-${side}-${Date.now()}.png`
+            );
+            return {
+              side,
+              designData,
+              image: uploadedImageUrl2,
+              order: i2 + 1
+            };
+          })
+        );
+        const validPages = pages.filter(Boolean);
+        const usedFontNames = /* @__PURE__ */ new Set();
+        validPages.forEach((p2) => {
+          if (p2?.designData) {
+            const fontsInPage = extractFontFamilies(p2.designData);
+            fontsInPage.forEach((f) => usedFontNames.add(f));
+          }
+        });
+        const resolvedFontIds = await resolveFontIds(Array.from(usedFontNames));
         const res = await TemplateDesignService.updateTemplateDesign(templateId, {
-          image: uploadedImageUrl
+          image: uploadedImageUrl,
+          pages: validPages,
+          fonts: resolvedFontIds
         });
         if (res && res.success) {
           setGenerateSuccess(true);
@@ -102117,6 +102188,16 @@ end`);
     const resetTour = useTourStore((s2) => s2.reset);
     const templateId = getQueryParam("templateId") || getQueryParam("id");
     const designType = (getQueryParam("designType") || getQueryParam("designtype") || getQueryParam("type"))?.toLowerCase();
+    const handleLeavePage = () => {
+      if (designType === "text") {
+        spaNavigate("/design-configuration/text-templates");
+        return;
+      }
+      if (designType === "template") {
+        spaNavigate("/design-configuration/template-designs");
+        return;
+      }
+    };
     const handleSaveTextTemplate = async () => {
       const canvas2 = useEditorStore.getState().canvas;
       if (!templateId || !canvas2) return;
@@ -102211,8 +102292,42 @@ end`);
       }
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-14 bg-[#111] text-white flex items-center justify-between px-4 border-b border-gray-800 relative z-[9999] whitespace-nowrap", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 shrink-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold", children: "Vibrant" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            id: "topbar-back-button",
+            type: "button",
+            onClick: handleLeavePage,
+            disabled: isSaving,
+            className: `flex items-center gap-1.5 px-2.5 py-1.5 bg-[#222] hover:bg-[#2c2c2c] active:bg-[#1a1a1a] text-gray-300 hover:text-white border border-gray-700/70 hover:border-gray-500 rounded-lg text-xs font-medium transition-all group shadow-sm ${isSaving ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+            title: "Back / Leave page",
+            "aria-label": "Back / Leave page",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  className: "w-4 h-4 transition-transform duration-150 group-hover:-translate-x-0.5 text-gray-300 group-hover:text-white",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 2.2,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M10 19l-7-7m0 0l7-7m-7 7h18"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold tracking-wide", children: "Back" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-5 bg-gray-700/80 hidden sm:block" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "Vibrant" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-6 bg-gray-600 hidden md:block" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 shrink-0 ml-4", children: [
@@ -102586,6 +102701,7 @@ end`);
     const [page, setPage] = React.useState(1);
     const scrollRef = React.useRef(null);
     const [hasMore, setHasMore] = React.useState(true);
+    const templateId = getQueryParam("templateId");
     React.useEffect(() => {
       if (!productData?._id) return;
       startLoading();
@@ -102677,7 +102793,7 @@ end`);
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "h-[calc(100vh-125px)] overflow-auto custom-scrollbar", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 pb-12 mx-4", children: [
-        templates.map((tpl) => /* @__PURE__ */ jsxRuntime.jsx(
+        templates.filter((t2) => t2.image && t2._id !== templateId).map((tpl) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             className: "rounded overflow-hidden group relative cursor-pointer border border-transparent hover:border-[#02bc71] transition-all",
@@ -103140,26 +103256,63 @@ end`);
     elements: elements2,
     onBack,
     scrollRef,
-    onSearch
+    onSearch,
+    initialSearch = "",
+    title,
+    backText
   }) {
-    const [search, setSearch] = React.useState("");
-    const { isLoading } = useLoaderStore.getState();
+    const [search, setSearch] = React.useState(initialSearch);
+    const { isLoading } = useLoaderStore();
     const { addRecentItem } = useRecentElementsStore();
+    React.useEffect(() => {
+      setSearch(initialSearch);
+    }, [initialSearch]);
     const clearSearch = () => {
       setSearch("");
       onSearch("");
     };
-    const handleChange = React.useCallback(
-      (e2) => {
-        const value = e2.target.value;
-        setSearch(value);
-        onSearch(value.trim());
-      },
-      [onSearch]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: onBack, className: "cursor-pointer mx-4 mb-2", children: "← Back" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-neutral-800 px-3 py-2 rounded flex items-center gap-2 mb-4 mx-4 relative", children: [
+    const handleSearchSubmit = () => {
+      onSearch(search.trim());
+    };
+    const handleKeyDown = (e2) => {
+      e2.stopPropagation();
+      if (e2.key === "Enter") {
+        handleSearchSubmit();
+      }
+    };
+    const dynamicBackLabel = backText || (title ? title : "Back");
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4 mb-2.5 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          className: "cursor-pointer flex items-center gap-1.5 text-xs font-semibold text-neutral-300 hover:text-white transition-colors group",
+          title: `Back to ${dynamicBackLabel}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "group-hover:-translate-x-0.5 transition-transform text-neutral-400 group-hover:text-white",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 19 5 12 12 5" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "capitalize truncate max-w-[240px]", children: dynamicBackLabel })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-neutral-800 px-3 py-2 rounded flex items-center gap-2 mb-4 mx-4 relative focus-within:ring-1 focus-within:ring-neutral-600", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
@@ -103167,7 +103320,8 @@ end`);
             stroke: "currentColor",
             fill: "none",
             viewBox: "0 0 24 24",
-            className: "text-gray-300",
+            className: "text-gray-400 shrink-0 cursor-pointer hover:text-white transition-colors",
+            onClick: handleSearchSubmit,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
               /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
@@ -103179,9 +103333,10 @@ end`);
           {
             type: "text",
             value: search,
-            onChange: handleChange,
-            onKeyDown: (e2) => e2.stopPropagation(),
-            className: "bg-transparent outline-none text-sm text-gray-300 w-full pr-8"
+            onChange: (e2) => setSearch(e2.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder: title ? `Search in ${title}...` : "Search elements & shapes...",
+            className: "bg-transparent outline-none text-sm text-gray-200 placeholder-gray-500 w-full pr-8"
           }
         ),
         search && /* @__PURE__ */ jsxRuntime.jsx(
@@ -103189,13 +103344,13 @@ end`);
           {
             type: "button",
             onClick: clearSearch,
-            className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white transition-colors p-1",
+            className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white transition-colors p-1 cursor-pointer",
             "aria-label": "Clear search",
             children: /* @__PURE__ */ jsxRuntime.jsxs(
               "svg",
               {
-                width: "16",
-                height: "16",
+                width: "14",
+                height: "14",
                 viewBox: "0 0 24 24",
                 fill: "none",
                 stroke: "currentColor",
@@ -103209,9 +103364,20 @@ end`);
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100vh-160px)] overflow-auto", ref: scrollRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4 py-5", children: elements2.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-400 text-sm text-center", children: "No results found" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-5", children: elements2.map((shape, i2) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px] border-neutral-800" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-auto custom-scrollbar", ref: scrollRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4 py-5", children: elements2.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-12 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-400 text-sm", children: search.trim() ? `No results found for "${search}"` : "No elements found" }),
+        search.trim() && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: clearSearch,
+            className: "mt-3 text-xs text-emerald-400 hover:underline cursor-pointer",
+            children: "Clear search"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: elements2.map((shape, i2) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
@@ -103226,21 +103392,22 @@ end`);
                 useSidePanelStore.getState().setActivePanel(null);
               }
             },
-            className: "w-full cursor-pointer flex items-center justify-center",
+            className: "w-full cursor-pointer flex items-center justify-center p-2 rounded-lg bg-neutral-900/40 hover:bg-neutral-800 border border-neutral-800/60 hover:border-neutral-700 transition-colors",
             children: shape.image && /* @__PURE__ */ jsxRuntime.jsx(
               "img",
               {
                 src: shape.image,
-                alt: shape.category,
+                alt: shape.category || "element",
                 width: 150,
                 height: 150,
-                className: "w-full h-24 object-contain"
+                className: "w-full h-20 object-contain",
+                loading: "lazy"
               }
             )
           },
-          i2
+          shape._id || shape.image || i2
         )) }),
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-4 text-sm text-gray-400", children: "Loading more..." })
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-4 text-xs text-gray-400 animate-pulse", children: "Loading more elements..." })
       ] }) }) })
     ] });
   }
@@ -103273,72 +103440,181 @@ end`);
     const [page, setPage] = React.useState(1);
     const [category, setCategory] = React.useState(null);
     const [keyType, setKeyType] = React.useState(null);
-    const [error2, setError] = React.useState(null);
+    const [searchQuery, setSearchQuery] = React.useState("");
+    const [mainSearch, setMainSearch] = React.useState("");
+    const [isViewingAll, setIsViewingAll] = React.useState(false);
+    const [title, setTitle] = React.useState("");
     const [hasMore, setHasMore] = React.useState(true);
     const scrollRef = React.useRef(null);
-    const getSVG = async (type = null, categoryValue, pageNo = 1) => {
+    const getSVG = async (type = null, categoryValue = null, searchVal = null, pageNo = 1) => {
       startLoading();
       if (pageNo === 1) {
         setHasMore(true);
         setPage(1);
         setCategory(categoryValue);
+        setKeyType(type);
+        setSearchQuery(searchVal || "");
+      }
+      if (categoryValue === "Recent items") {
+        const q2 = (searchVal || "").toLowerCase().trim();
+        const filtered = q2 ? recentItems.filter(
+          (item) => item.category?.toLowerCase().includes(q2) || item.tags?.some((t2) => t2.toLowerCase().includes(q2))
+        ) : recentItems;
+        setElementsSVG(filtered);
+        setHasMore(false);
+        stopLoading();
+        return;
       }
-      const request = type ? ShapeService.getAllExternal({
-        isVector: true,
-        page: pageNo,
-        limit: 30,
-        keyType: type,
-        query: categoryValue || null
-      }) : ShapeService.getAll({
-        category: categoryValue,
-        page: pageNo,
-        limit: 30
-      });
-      request.then((res) => {
-        const items = res.items;
+      try {
+        const request = type ? ShapeService.getAllExternal({
+          isVector: true,
+          page: pageNo,
+          limit: 30,
+          keyType: type,
+          query: searchVal || categoryValue || null
+        }) : ShapeService.getAll({
+          category: categoryValue || null,
+          search: searchVal || null,
+          page: pageNo,
+          limit: 30
+        });
+        const res = await request;
+        const items = res.items || [];
         const newItems = items.filter((x2) => x2.status && x2.image);
         setElementsSVG(
           (prev) => pageNo === 1 ? newItems : [...prev, ...newItems]
         );
         if (newItems.length < 20) setHasMore(false);
-      }).catch((err) => setError(err.message)).finally(() => stopLoading());
+        else setHasMore(true);
+      } catch (err) {
+        console.error("Failed to load elements:", err);
+        if (pageNo === 1) setElementsSVG([]);
+        setHasMore(false);
+      } finally {
+        stopLoading();
+      }
     };
     React.useEffect(() => {
       const el = scrollRef.current;
-      if (!el) return;
+      if (!el || !isViewingAll) return;
       const onScroll = () => {
         if (!hasMore || isLoading) return;
         if (el.scrollTop + el.clientHeight >= el.scrollHeight - 200) {
-          const next = page + 1;
-          setPage(next);
-          getSVG(keyType, category, next);
+          setPage((prev) => {
+            const next = prev + 1;
+            getSVG(keyType, category, searchQuery, next);
+            return next;
+          });
         }
       };
       el.addEventListener("scroll", onScroll);
       return () => el.removeEventListener("scroll", onScroll);
-    }, [hasMore, isLoading]);
-    if (elementsSVG.length > 0) {
+    }, [hasMore, isLoading, isViewingAll, keyType, category, searchQuery]);
+    const handleMainSearch = (val) => {
+      const q2 = val.trim();
+      if (!q2) return;
+      setIsViewingAll(true);
+      setTitle(`Search: "${q2}"`);
+      getSVG(null, null, q2, 1);
+    };
+    const handleBack = () => {
+      if (searchQuery && category && category !== "Recent items") {
+        setSearchQuery("");
+        setPage(1);
+        setTitle(category);
+        getSVG(keyType, category, "", 1);
+        return;
+      }
+      setIsViewingAll(false);
+      setElementsSVG([]);
+      setCategory(null);
+      setKeyType(null);
+      setSearchQuery("");
+      setMainSearch("");
+      setTitle("");
+      setPage(1);
+      setHasMore(true);
+    };
+    if (isViewingAll) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         AllElements,
         {
           elements: elementsSVG,
           scrollRef,
+          title,
+          backText: title || "Elements",
+          initialSearch: searchQuery,
           onSearch: (value) => {
-            setPage(1);
-            setHasMore(true);
-            getSVG(keyType, value ? value : category, 1);
+            if (value.trim()) {
+              setTitle(category ? `${category} - "${value.trim()}"` : `Search: "${value.trim()}"`);
+            } else {
+              setTitle(
+                category || (keyType === "pixabay" ? "Pixabay Vectors" : keyType === "flat" ? "FlatIcon Icons" : "All Elements")
+              );
+            }
+            getSVG(keyType, category, value, 1);
           },
-          onBack: () => {
-            setElementsSVG([]);
-            setPage(1);
-            setCategory(null);
-            setKeyType(null);
-            setHasMore(true);
-          }
+          onBack: handleBack
         }
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-neutral-800 px-3 py-2 rounded flex items-center gap-2 mb-4 mx-4 relative focus-within:ring-1 focus-within:ring-neutral-600", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "18",
+            stroke: "currentColor",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            className: "text-gray-400 shrink-0",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search elements & shapes...",
+            value: mainSearch,
+            onChange: (e2) => setMainSearch(e2.target.value),
+            onKeyDown: (e2) => {
+              e2.stopPropagation();
+              if (e2.key === "Enter" && mainSearch.trim()) {
+                handleMainSearch(mainSearch.trim());
+              }
+            },
+            className: "bg-transparent outline-none text-sm text-gray-200 placeholder-gray-500 w-full pr-7"
+          }
+        ),
+        mainSearch && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setMainSearch(""),
+            className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors p-1 cursor-pointer",
+            "aria-label": "Clear search",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ]
+              }
+            )
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-5 mx-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-md font-medium mb-3", children: "Upload From Other Media" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
@@ -103346,11 +103622,13 @@ end`);
             "button",
             {
               type: "button",
-              className: "cursor-pointer",
+              className: "cursor-pointer hover:opacity-80 transition-opacity",
               onClick: () => {
-                setKeyType("pixabay");
-                getSVG("pixabay", "", 1);
+                setIsViewingAll(true);
+                setTitle("Pixabay Vectors");
+                getSVG("pixabay", "", "", 1);
               },
+              title: "Search Pixabay Vectors",
               children: /* @__PURE__ */ jsxRuntime.jsx(PixabayIcon, {})
             }
           ),
@@ -103358,11 +103636,13 @@ end`);
             "button",
             {
               type: "button",
-              className: "cursor-pointer",
+              className: "cursor-pointer hover:opacity-80 transition-opacity",
               onClick: () => {
-                setKeyType("flat");
-                getSVG("flat", "", 1);
+                setIsViewingAll(true);
+                setTitle("FlatIcon Icons");
+                getSVG("flat", "", "", 1);
               },
+              title: "Search FlatIcon Icons",
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "img",
                 {
@@ -103377,20 +103657,21 @@ end`);
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[calc(100dvh-180px)] overflow-auto custom-scrollbar", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px] border-neutral-800" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[calc(100dvh-200px)] overflow-auto custom-scrollbar", children: [
         recentItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-5", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold mb-3", children: "Recent items" }),
               recentItems.length > 3 && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+                "button",
                 {
-                  className: "underline cursor-pointer",
+                  type: "button",
+                  className: "underline text-xs text-neutral-400 hover:text-white cursor-pointer",
                   onClick: () => {
-                    setElementsSVG(recentItems);
-                    setCategory("Recent items");
-                    setHasMore(false);
+                    setIsViewingAll(true);
+                    setTitle("Recent items");
+                    getSVG(null, "Recent items", "", 1);
                   },
                   children: "View all"
                 }
@@ -103399,36 +103680,45 @@ end`);
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: recentItems.slice(0, 3).map((shape, i2) => /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
+                type: "button",
                 onClick: () => {
                   addSVGToCanvas("svg", shape.image);
                   addRecentItem(shape);
+                  if (window.innerWidth < 768) {
+                    useSidePanelStore.getState().setActivePanel(null);
+                  }
                 },
-                className: "w-full cursor-pointer flex items-center justify-center",
+                className: "w-full cursor-pointer flex items-center justify-center p-2 rounded-lg bg-neutral-900/40 hover:bg-neutral-800 border border-neutral-800/60 hover:border-neutral-700 transition-colors",
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "img",
                   {
                     src: shape.image,
-                    alt: shape.category,
+                    alt: shape.category || "recent element",
                     width: 150,
                     height: 150,
-                    className: "w-full h-24 object-contain"
+                    className: "w-full h-20 object-contain"
                   }
                 )
               },
               shape._id || shape.image || i2
             )) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px]" })
+          /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px] border-neutral-800" })
         ] }),
         elements.map((item, i2) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-5", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold mb-3", children: item.category }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+                "button",
                 {
-                  className: "underline cursor-pointer",
-                  onClick: () => getSVG(null, item?.category, 1),
+                  type: "button",
+                  className: "underline text-xs text-neutral-400 hover:text-white cursor-pointer",
+                  onClick: () => {
+                    setIsViewingAll(true);
+                    setTitle(item.category);
+                    getSVG(null, item.category, "", 1);
+                  },
                   children: "View all"
                 }
               )
@@ -103436,6 +103726,7 @@ end`);
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: item.data.map((shape, j2) => /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
+                type: "button",
                 onClick: () => {
                   addSVGToCanvas("svg", shape.image);
                   addRecentItem({
@@ -103446,8 +103737,11 @@ end`);
                     largeImage: shape.image,
                     tags: []
                   });
+                  if (window.innerWidth < 768) {
+                    useSidePanelStore.getState().setActivePanel(null);
+                  }
                 },
-                className: "w-full cursor-pointer flex items-center justify-center",
+                className: "w-full cursor-pointer flex items-center justify-center p-2 rounded-lg bg-neutral-900/40 hover:bg-neutral-800 border border-neutral-800/60 hover:border-neutral-700 transition-colors",
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "img",
                   {
@@ -103455,14 +103749,15 @@ end`);
                     alt: item.category,
                     width: 150,
                     height: 150,
-                    className: "w-full h-24 object-contain"
+                    className: "w-full h-20 object-contain",
+                    loading: "lazy"
                   }
                 )
               },
               j2
             )) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px]" })
+          /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px] border-neutral-800" })
         ] }, i2))
       ] })
     ] });
@@ -158364,6 +158659,20 @@ ${elements2.join("\n")}
     const duplicate = async () => {
       const active = canvas2.getActiveObject();
       if (!active) return;
+      const currentSide = useHistoryStore.getState().currentPage;
+      const ensureTextLoaded = async (obj) => {
+        if (obj.type === "textbox" || obj.type === "text" || obj.type === "i-text") {
+          if (obj.fontFamily) {
+            try {
+              await document.fonts.load(`16px "${obj.fontFamily}"`);
+            } catch {
+            }
+          }
+          obj.initDimensions?.();
+          obj.set("dirty", true);
+        }
+        obj.__pageSide = currentSide;
+      };
       if (active.type?.toLowerCase() === "activeselection") {
         const selection = active;
         const originals = selection.getObjects().filter((o2) => o2.name !== "workarea");
@@ -158371,13 +158680,14 @@ ${elements2.join("\n")}
         canvas2.discardActiveObject();
         const clones = await Promise.all(
           originals.map(async (obj) => {
-            const cloned2 = await obj.clone();
+            const cloned2 = await obj.clone(HISTORY_CUSTOM_PROPERTIES);
             cloned2.set({
               left: (obj.left ?? 0) + OFFSET$1,
               top: (obj.top ?? 0) + OFFSET$1,
               selectable: true,
               evented: true
             });
+            await ensureTextLoaded(cloned2);
             canvas2.add(cloned2);
             return cloned2;
           })
@@ -158390,18 +158700,21 @@ ${elements2.join("\n")}
         return;
       }
       if (active.name === "workarea") return;
-      const cloned = await active.clone();
+      const cloned = await active.clone(HISTORY_CUSTOM_PROPERTIES);
       cloned.set({
         left: (active.left ?? 0) + OFFSET$1,
         top: (active.top ?? 0) + OFFSET$1,
         selectable: true,
         evented: true
       });
+      await ensureTextLoaded(cloned);
+      cloned.setCoords();
       canvas2.discardActiveObject();
       canvas2.add(cloned);
       canvas2.setActiveObject(cloned);
       bringOverlaysToFront(canvas2);
       canvas2.requestRenderAll();
+      saveState();
     };
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -160321,6 +160634,175 @@ ${elements2.join("\n")}
     createOverlays(canvas2, workarea, currentSide);
     return workarea;
   }
+  const SNAP_THRESHOLD_PX = 7;
+  const GUIDELINE_COLOR = "#28a128";
+  const GUIDELINE_WIDTH = 1.2;
+  let activeVLine = null;
+  let activeHLine = null;
+  function clearAlignmentGuidelines(canvas2) {
+    if (!canvas2) return;
+    let changed = false;
+    if (activeVLine) {
+      canvas2.remove(activeVLine);
+      activeVLine = null;
+      changed = true;
+    }
+    if (activeHLine) {
+      canvas2.remove(activeHLine);
+      activeHLine = null;
+      changed = true;
+    }
+    canvas2.getObjects().forEach((o2) => {
+      if (o2.name === "guideline-alignment-v" || o2.name === "guideline-alignment-h") {
+        canvas2.remove(o2);
+        changed = true;
+      }
+    });
+    if (changed) {
+      canvas2.requestRenderAll();
+    }
+  }
+  function handleObjectAlignmentSnap(canvas2, target) {
+    if (!canvas2 || !target) return;
+    const targetName = target.name || "";
+    if (targetName === "workarea" || targetName === "bg-image" || targetName === "canvas-grid" || targetName.startsWith("overlay-") || targetName.startsWith("guideline-")) {
+      return;
+    }
+    const workarea = canvas2.getObjects().find((o2) => o2.name === "workarea");
+    if (!workarea) return;
+    const zoom = canvas2.getZoom() || 1;
+    const threshold = SNAP_THRESHOLD_PX / zoom;
+    const waL = workarea.left ?? 0;
+    const waT = workarea.top ?? 0;
+    const waW = workarea.getScaledWidth();
+    const waH = workarea.getScaledHeight();
+    const waCenterX = waL + waW / 2;
+    const waCenterY = waT + waH / 2;
+    const targetCenter = target.getCenterPoint();
+    target.getBoundingRect();
+    const curLeft = target.left ?? 0;
+    target.top ?? 0;
+    let snappedX = false;
+    let snappedY = false;
+    let snapLineX = waCenterX;
+    let snapLineY = waCenterY;
+    const distCenterX = Math.abs(targetCenter.x - waCenterX);
+    if (distCenterX <= threshold) {
+      const diffX = waCenterX - targetCenter.x;
+      target.set("left", curLeft + diffX);
+      target.setCoords();
+      snappedX = true;
+      snapLineX = waCenterX;
+    } else {
+      const otherObjects = canvas2.getObjects().filter(
+        (o2) => o2 !== target && o2.selectable !== false && o2.name !== "workarea" && o2.name !== "bg-image" && !o2.name?.startsWith("overlay-") && !o2.name?.startsWith("guideline-") && o2.name !== "canvas-grid"
+      );
+      for (const other of otherObjects) {
+        const otherCenter = other.getCenterPoint();
+        if (Math.abs(targetCenter.x - otherCenter.x) <= threshold) {
+          const diffX = otherCenter.x - targetCenter.x;
+          target.set("left", curLeft + diffX);
+          target.setCoords();
+          snappedX = true;
+          snapLineX = otherCenter.x;
+          break;
+        }
+      }
+    }
+    const updatedCenter = target.getCenterPoint();
+    const distCenterY = Math.abs(updatedCenter.y - waCenterY);
+    if (distCenterY <= threshold) {
+      const diffY = waCenterY - updatedCenter.y;
+      target.set("top", (target.top ?? 0) + diffY);
+      target.setCoords();
+      snappedY = true;
+      snapLineY = waCenterY;
+    } else {
+      const otherObjects = canvas2.getObjects().filter(
+        (o2) => o2 !== target && o2.selectable !== false && o2.name !== "workarea" && o2.name !== "bg-image" && !o2.name?.startsWith("overlay-") && !o2.name?.startsWith("guideline-") && o2.name !== "canvas-grid"
+      );
+      for (const other of otherObjects) {
+        const otherCenter = other.getCenterPoint();
+        if (Math.abs(updatedCenter.y - otherCenter.y) <= threshold) {
+          const diffY = otherCenter.y - updatedCenter.y;
+          target.set("top", (target.top ?? 0) + diffY);
+          target.setCoords();
+          snappedY = true;
+          snapLineY = otherCenter.y;
+          break;
+        }
+      }
+    }
+    if (snappedX) {
+      const y1 = waT;
+      const y2 = waT + waH;
+      if (!activeVLine) {
+        activeVLine = new vo([snapLineX, y1, snapLineX, y2], {
+          name: "guideline-alignment-v",
+          stroke: GUIDELINE_COLOR,
+          strokeWidth: GUIDELINE_WIDTH / zoom,
+          strokeUniform: true,
+          selectable: false,
+          evented: false,
+          excludeFromExport: true,
+          hasControls: false,
+          hasBorders: false,
+          lockMovementX: true,
+          lockMovementY: true
+        });
+        canvas2.add(activeVLine);
+      } else {
+        activeVLine.set({
+          x1: snapLineX,
+          y1,
+          x2: snapLineX,
+          y2,
+          strokeWidth: GUIDELINE_WIDTH / zoom,
+          visible: true
+        });
+        activeVLine.setCoords();
+      }
+      canvas2.bringObjectToFront(activeVLine);
+    } else if (activeVLine) {
+      canvas2.remove(activeVLine);
+      activeVLine = null;
+    }
+    if (snappedY) {
+      const x1 = waL;
+      const x2 = waL + waW;
+      if (!activeHLine) {
+        activeHLine = new vo([x1, snapLineY, x2, snapLineY], {
+          name: "guideline-alignment-h",
+          stroke: GUIDELINE_COLOR,
+          strokeWidth: GUIDELINE_WIDTH / zoom,
+          strokeUniform: true,
+          selectable: false,
+          evented: false,
+          excludeFromExport: true,
+          hasControls: false,
+          hasBorders: false,
+          lockMovementX: true,
+          lockMovementY: true
+        });
+        canvas2.add(activeHLine);
+      } else {
+        activeHLine.set({
+          x1,
+          y1: snapLineY,
+          x2,
+          y2: snapLineY,
+          strokeWidth: GUIDELINE_WIDTH / zoom,
+          visible: true
+        });
+        activeHLine.setCoords();
+      }
+      canvas2.bringObjectToFront(activeHLine);
+    } else if (activeHLine) {
+      canvas2.remove(activeHLine);
+      activeHLine = null;
+    }
+    canvas2.requestRenderAll();
+  }
   function setupHistoryRecording(canvas2) {
     let modifiedTimer = null;
     const handleObjectAddedOrRemoved = (e2) => {
@@ -160483,13 +160965,21 @@ ${elements2.join("\n")}
       configureSelectionControls();
       bringOverlaysToFront(canvas2);
     };
-    const handleObjectMoving = () => {
+    const handleObjectMoving = (e2) => {
+      if (e2.target) {
+        handleObjectAlignmentSnap(canvas2, e2.target);
+      }
       bringOverlaysToFront(canvas2);
     };
+    const handleMovementEnd = (e2) => {
+      clearAlignmentGuidelines(canvas2);
+      hideDegree(e2);
+    };
     canvas2.on("object:moving", handleObjectMoving);
-    canvas2.on("object:modified", hideDegree);
-    canvas2.on("mouse:up", hideDegree);
+    canvas2.on("object:modified", handleMovementEnd);
+    canvas2.on("mouse:up", handleMovementEnd);
     canvas2.on("selection:cleared", () => {
+      clearAlignmentGuidelines(canvas2);
       const bgImg = canvas2.getObjects().find((o2) => o2.name === "bg-image");
       if (bgImg) {
         bgImg.set({
@@ -160507,13 +160997,14 @@ ${elements2.join("\n")}
       clearSelection();
     });
     return () => {
+      clearAlignmentGuidelines(canvas2);
       canvas2.off("selection:created");
       canvas2.off("selection:updated");
       canvas2.off("object:scaling", configureSelectionControls);
       canvas2.off("object:rotating");
       canvas2.off("object:moving", handleObjectMoving);
-      canvas2.off("object:modified", hideDegree);
-      canvas2.off("mouse:up", hideDegree);
+      canvas2.off("object:modified", handleMovementEnd);
+      canvas2.off("mouse:up", handleMovementEnd);
       canvas2.off("selection:cleared");
     };
   }
@@ -160570,6 +161061,9 @@ ${elements2.join("\n")}
     "lockMovementY",
     "rx",
     "ry",
+    "src",
+    "crossOrigin",
+    "__maskPath",
     "__radiusOfCanvas",
     "__shapeType",
     "__pageSide",
@@ -160580,10 +161074,28 @@ ${elements2.join("\n")}
     "__initialZoom",
     "__borderRect",
     "__rotationControlSize",
-    "__showDegree"
+    "__showDegree",
+    "textAlign",
+    "fontFamily",
+    "fontSize",
+    "fontWeight",
+    "fontStyle",
+    "underline",
+    "linethrough",
+    "overline",
+    "fill",
+    "stroke",
+    "strokeWidth",
+    "lineHeight",
+    "charSpacing",
+    "styles",
+    "paintFirst",
+    "strokeUniform",
+    "objectCaching"
   ];
   async function switchCanvasPage(canvas2, currentPage, targetPage, pageJSON, clearSelection, containerRef) {
     if (targetPage === currentPage) return;
+    clearAlignmentGuidelines(canvas2);
     const historyStore = useHistoryStore.getState();
     useLoaderStore.getState().startLoading();
     try {
@@ -161016,8 +161528,9 @@ ${elements2.join("\n")}
     ] }) });
   }
   const OFFSET = 20;
+  let globalClipboard = null;
+  let clipboardSourcePage = null;
   function useKeyboardEvents(canvasParam) {
-    const clipboardRef = React.useRef(null);
     const storeCanvas = useEditorStore((s2) => s2.canvas);
     const historyCanvas = useHistoryStore((s2) => s2.canvas);
     const canvas2 = canvasParam || storeCanvas || historyCanvas;
@@ -161029,30 +161542,56 @@ ${elements2.join("\n")}
         if (!activeCanvas) return;
         const activeObject = activeCanvas.getActiveObject();
         if (!activeObject || activeObject.name === "workarea") return;
-        const cloned = await activeObject.clone();
-        clipboardRef.current = cloned;
+        const cloned = await activeObject.clone(HISTORY_CUSTOM_PROPERTIES);
+        globalClipboard = cloned;
+        clipboardSourcePage = useHistoryStore.getState().currentPage;
       };
       const handlePaste = async () => {
         const activeCanvas = getActiveCanvas();
-        if (!activeCanvas || !clipboardRef.current) return;
-        const clonedObj = await clipboardRef.current.clone();
+        if (!activeCanvas || !globalClipboard) return;
+        const currentSide = useHistoryStore.getState().currentPage;
+        const isCrossPagePaste = clipboardSourcePage && clipboardSourcePage !== currentSide;
+        const clonedObj = await globalClipboard.clone(HISTORY_CUSTOM_PROPERTIES);
         activeCanvas.discardActiveObject();
+        const offset = isCrossPagePaste ? 0 : OFFSET;
         clonedObj.set({
-          left: (clonedObj.left ?? 0) + OFFSET,
-          top: (clonedObj.top ?? 0) + OFFSET,
-          evented: true
+          left: (clonedObj.left ?? 0) + offset,
+          top: (clonedObj.top ?? 0) + offset,
+          evented: true,
+          selectable: true
         });
-        clipboardRef.current.set({
-          left: (clipboardRef.current.left ?? 0) + OFFSET,
-          top: (clipboardRef.current.top ?? 0) + OFFSET
+        clonedObj.__pageSide = currentSide;
+        globalClipboard.set({
+          left: (globalClipboard.left ?? 0) + OFFSET,
+          top: (globalClipboard.top ?? 0) + OFFSET
         });
+        clipboardSourcePage = currentSide;
+        const ensureTextLoaded = async (obj) => {
+          if (obj.type === "textbox" || obj.type === "text" || obj.type === "i-text") {
+            if (obj.fontFamily) {
+              try {
+                await document.fonts.load(`16px "${obj.fontFamily}"`);
+              } catch {
+              }
+            }
+            obj.initDimensions?.();
+            obj.set("dirty", true);
+          }
+        };
         if (clonedObj.type?.toLowerCase() === "activeselection") {
-          clonedObj.canvas = activeCanvas;
-          clonedObj.forEachObject((obj) => {
-            activeCanvas.add(obj);
-          });
-          clonedObj.setCoords();
+          const selection = clonedObj;
+          selection.canvas = activeCanvas;
+          await Promise.all(
+            selection.getObjects().map(async (obj) => {
+              await ensureTextLoaded(obj);
+              obj.__pageSide = currentSide;
+              activeCanvas.add(obj);
+            })
+          );
+          selection.setCoords();
         } else {
+          await ensureTextLoaded(clonedObj);
+          clonedObj.setCoords();
           activeCanvas.add(clonedObj);
         }
         activeCanvas.setActiveObject(clonedObj);
@@ -161070,6 +161609,7 @@ ${elements2.join("\n")}
         const isY = e2.key?.toLowerCase() === "y" || e2.code === "KeyY";
         const isC = e2.key?.toLowerCase() === "c" || e2.code === "KeyC";
         const isV = e2.key?.toLowerCase() === "v" || e2.code === "KeyV";
+        const isA = e2.key?.toLowerCase() === "a" || e2.code === "KeyA";
         if (isZ && !e2.shiftKey) {
           e2.preventDefault();
           useHistoryStore.getState().undo();
@@ -161090,6 +161630,22 @@ ${elements2.join("\n")}
           handlePaste();
           return;
         }
+        if (isA) {
+          const activeCanvas = getActiveCanvas();
+          if (activeCanvas) {
+            e2.preventDefault();
+            const selectableObjects = activeCanvas.getObjects().filter(
+              (obj) => obj.name !== "workarea" && !obj.name?.startsWith("overlay-") && !obj.name?.startsWith("guideline-") && obj.selectable !== false
+            );
+            if (selectableObjects.length > 0) {
+              activeCanvas.discardActiveObject();
+              const sel = new Qo(selectableObjects, { canvas: activeCanvas });
+              activeCanvas.setActiveObject(sel);
+              activeCanvas.requestRenderAll();
+            }
+          }
+          return;
+        }
         const isQuote = e2.key === "'" || e2.code === "Quote";
         if (isQuote) {
           e2.preventDefault();
@@ -161119,13 +161675,14 @@ ${elements2.join("\n")}
     const drawTool = useDrawStore((s2) => s2.drawTool);
     const setDrawTool = useDrawStore((s2) => s2.setDrawTool);
     const productData = useProductStore((s2) => s2.productData);
-    const isTwoSided = productData?.optionsMap?.printing === "4/4";
-    const [currentPage, setCurrentPage] = React.useState("front");
-    const [isPanning, setIsPanning] = React.useState(false);
+    const editorPages = useEditorStore((s2) => s2.pages);
     const pageJSON = React.useRef({
       front: null,
       back: null
     });
+    const isTwoSided = productData?.optionsMap?.printing === "4/4" || !!pageJSON.current?.back || !!editorPages?.back;
+    const [currentPage, setCurrentPage] = React.useState("front");
+    const [isPanning, setIsPanning] = React.useState(false);
     React.useEffect(() => {
       if (!canvasRef.current || !containerRef.current) return;
       if (fabricRef.current) return;
@@ -161303,9 +161860,48 @@ ${elements2.join("\n")}
       setCurrentPage(page);
       renderGrid(fabricRef.current);
     };
+    const copyFrontToBack = async () => {
+      if (!fabricRef.current) return;
+      useLoaderStore.getState().startLoading();
+      try {
+        if (currentPage === "front") {
+          pageJSON.current.front = fabricRef.current.toObject(CUSTOM_PROPERTIES);
+        }
+        let frontData = pageJSON.current.front || useEditorStore.getState().pages?.front;
+        if (!frontData) {
+          console.warn("No front design found to copy");
+          return;
+        }
+        const clonedFrontJson = JSON.parse(JSON.stringify(frontData));
+        await loadTemplateFontsIntoHead(null, clonedFrontJson);
+        pageJSON.current.back = clonedFrontJson;
+        useEditorStore.getState().setPages({
+          ...useEditorStore.getState().pages,
+          ...pageJSON.current,
+          back: clonedFrontJson
+        });
+        clearSelection();
+        useHistoryStore.getState().setPage("back");
+        setCurrentPage("back");
+        await loadPageToCanvas(fabricRef.current, clonedFrontJson, "back");
+        const workarea = fabricRef.current.getObjects().find((obj) => obj.name === "workarea");
+        if (workarea) {
+          workarea.__pageSide = "back";
+          createOverlays(fabricRef.current, workarea, "back");
+          bringOverlaysToFront(fabricRef.current);
+        }
+        fabricRef.current.requestRenderAll();
+        renderGrid(fabricRef.current);
+        useHistoryStore.getState().saveState();
+      } catch (err) {
+        console.error("Failed to copy front design to back:", err);
+      } finally {
+        useLoaderStore.getState().stopLoading();
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-6 z-50 flex items-center bg-white/80 backdrop-blur-xl rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.12)] px-1.5 py-1.5 border border-white/40 ring-1 ring-black/5", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex bg-gray-200/50 p-1 rounded-xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex bg-gray-200/50 p-1 rounded-xl items-center gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -161321,6 +161917,37 @@ ${elements2.join("\n")}
               className: `px-4 py-2 rounded-lg text-[11px] font-bold tracking-wider transition-all duration-200 cursor-pointer ${currentPage === "back" ? "bg-white text-[#02bc71] shadow-sm" : "text-gray-500 hover:text-gray-700"}`,
               children: "BACK"
             }
+          ),
+          isTwoSided && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              id: "copy-front-to-back-btn",
+              type: "button",
+              onClick: copyFrontToBack,
+              title: "Copy front design to back design",
+              className: "flex items-center gap-1.5 px-3 py-1.5 ml-1 rounded-lg text-[10px] font-bold tracking-wider bg-white/90 hover:bg-white text-gray-700 hover:text-[#02bc71] border border-gray-300/60 shadow-xs transition-all duration-150 cursor-pointer active:scale-95",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "svg",
+                  {
+                    width: "13",
+                    height: "13",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: "text-[#02bc71]",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "COPY FRONT TO BACK" })
+              ]
+            }
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[1px] h-6 bg-gray-300/50 mx-3" }),