vibrant-tool 0.1.10 → 0.1.11

package/dist/vibrant-tool.es.js

@@ -9017,6 +9017,248 @@ const useProductStore = create((set) => ({
     }
   }
 }));
+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();
@@ -9024,6 +9266,7 @@ async function loadPageToCanvas(canvas2, json, pageSide) {
   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)
@@ -9365,7 +9608,23 @@ const HISTORY_CUSTOM_PROPERTIES = [
   "__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,
@@ -9483,248 +9742,6 @@ const useHistoryStore = create((set, get) => ({
     }
   }
 }));
-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);
@@ -9817,8 +9834,18 @@ function exportDesignJSON(canvas2, workarea) {
 }
 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"
       }
@@ -9828,8 +9855,17 @@ const ShapeService = {
     };
   },
   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"
       }
@@ -101910,8 +101946,43 @@ function TemplateMockupModal({
       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, i) => {
+          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: i + 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);
@@ -102116,6 +102187,16 @@ function Topbar() {
   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;
@@ -102210,8 +102291,42 @@ function Topbar() {
     }
   };
   return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-3 shrink-0", children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold", children: "Vibrant" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 shrink-0", children: [
+      /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M10 19l-7-7m0 0l7-7m-7 7h18"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "font-semibold tracking-wide", children: "Back" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-gray-700/80 hidden sm:block" }),
+      /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "Vibrant" }),
       /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-gray-600 hidden md:block" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 shrink-0 ml-4", children: [
@@ -102585,6 +102700,7 @@ function TemplatesPanel() {
   const [page, setPage] = useState(1);
   const scrollRef = useRef(null);
   const [hasMore, setHasMore] = useState(true);
+  const templateId = getQueryParam("templateId");
   useEffect(() => {
     if (!productData?._id) return;
     startLoading();
@@ -102676,7 +102792,7 @@ function TemplatesPanel() {
       )
     ] }),
     /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "h-[calc(100vh-125px)] overflow-auto custom-scrollbar", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pb-12 mx-4", children: [
-      templates.map((tpl) => /* @__PURE__ */ jsx(
+      templates.filter((t2) => t2.image && t2._id !== templateId).map((tpl) => /* @__PURE__ */ jsx(
         "button",
         {
           className: "rounded overflow-hidden group relative cursor-pointer border border-transparent hover:border-[#02bc71] transition-all",
@@ -103139,26 +103255,63 @@ function AllElements({
   elements: elements2,
   onBack,
   scrollRef,
-  onSearch
+  onSearch,
+  initialSearch = "",
+  title,
+  backText
 }) {
-  const [search, setSearch] = useState("");
-  const { isLoading } = useLoaderStore.getState();
+  const [search, setSearch] = useState(initialSearch);
+  const { isLoading } = useLoaderStore();
   const { addRecentItem } = useRecentElementsStore();
+  useEffect(() => {
+    setSearch(initialSearch);
+  }, [initialSearch]);
   const clearSearch = () => {
     setSearch("");
     onSearch("");
   };
-  const handleChange = useCallback(
-    (e3) => {
-      const value = e3.target.value;
-      setSearch(value);
-      onSearch(value.trim());
-    },
-    [onSearch]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { onClick: onBack, className: "cursor-pointer mx-4 mb-2", children: "← Back" }),
-    /* @__PURE__ */ 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 = (e3) => {
+    e3.stopPropagation();
+    if (e3.key === "Enter") {
+      handleSearchSubmit();
+    }
+  };
+  const dynamicBackLabel = backText || (title ? title : "Back");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "mx-4 mb-2.5 flex items-center", children: /* @__PURE__ */ 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__ */ 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__ */ jsx("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+                /* @__PURE__ */ jsx("polyline", { points: "12 19 5 12 12 5" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "capitalize truncate max-w-[240px]", children: dynamicBackLabel })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ 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__ */ jsxs(
         "svg",
         {
@@ -103166,7 +103319,8 @@ function AllElements({
           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__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
             /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
@@ -103178,9 +103332,10 @@ function AllElements({
         {
           type: "text",
           value: search,
-          onChange: handleChange,
-          onKeyDown: (e3) => e3.stopPropagation(),
-          className: "bg-transparent outline-none text-sm text-gray-300 w-full pr-8"
+          onChange: (e3) => setSearch(e3.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__ */ jsx(
@@ -103188,13 +103343,13 @@ function AllElements({
         {
           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__ */ jsxs(
             "svg",
             {
-              width: "16",
-              height: "16",
+              width: "14",
+              height: "14",
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
@@ -103208,9 +103363,20 @@ function AllElements({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-    /* @__PURE__ */ jsx("div", { className: "h-[calc(100vh-160px)] overflow-auto", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "mx-4 py-5", children: elements2.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm text-center", children: "No results found" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-5", children: elements2.map((shape, i) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px] border-neutral-800" }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-auto custom-scrollbar", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "mx-4 py-5", children: elements2.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "py-12 text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm", children: search.trim() ? `No results found for "${search}"` : "No elements found" }),
+      search.trim() && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: clearSearch,
+          className: "mt-3 text-xs text-emerald-400 hover:underline cursor-pointer",
+          children: "Clear search"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: elements2.map((shape, i) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -103225,21 +103391,22 @@ function AllElements({
               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__ */ 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"
             }
           )
         },
-        i
+        shape._id || shape.image || i
       )) }),
-      isLoading && /* @__PURE__ */ jsx("div", { className: "text-center py-4 text-sm text-gray-400", children: "Loading more..." })
+      isLoading && /* @__PURE__ */ jsx("div", { className: "text-center py-4 text-xs text-gray-400 animate-pulse", children: "Loading more elements..." })
     ] }) }) })
   ] });
 }
@@ -103272,72 +103439,181 @@ function ElementsPanel() {
   const [page, setPage] = useState(1);
   const [category, setCategory] = useState(null);
   const [keyType, setKeyType] = useState(null);
-  const [error2, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [mainSearch, setMainSearch] = useState("");
+  const [isViewingAll, setIsViewingAll] = useState(false);
+  const [title, setTitle] = useState("");
   const [hasMore, setHasMore] = useState(true);
   const scrollRef = 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();
+    }
   };
   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__ */ 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ 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__ */ jsxs(
+        "svg",
+        {
+          width: "18",
+          stroke: "currentColor",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          className: "text-gray-400 shrink-0",
+          children: [
+            /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+            /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search elements & shapes...",
+          value: mainSearch,
+          onChange: (e3) => setMainSearch(e3.target.value),
+          onKeyDown: (e3) => {
+            e3.stopPropagation();
+            if (e3.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__ */ 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__ */ jsxs(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [
+                /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ]
+            }
+          )
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "pb-5 mx-4", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-md font-medium mb-3", children: "Upload From Other Media" }),
       /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
@@ -103345,11 +103621,13 @@ function ElementsPanel() {
           "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__ */ jsx(PixabayIcon, {})
           }
         ),
@@ -103357,11 +103635,13 @@ function ElementsPanel() {
           "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__ */ jsx(
               "img",
               {
@@ -103376,20 +103656,21 @@ function ElementsPanel() {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-    /* @__PURE__ */ jsxs("div", { className: "h-[calc(100dvh-180px)] overflow-auto custom-scrollbar", children: [
+    /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px] border-neutral-800" }),
+    /* @__PURE__ */ jsxs("div", { className: "h-[calc(100dvh-200px)] overflow-auto custom-scrollbar", children: [
       recentItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "py-5", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold mb-3", children: "Recent items" }),
             recentItems.length > 3 && /* @__PURE__ */ 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"
               }
@@ -103398,36 +103679,45 @@ function ElementsPanel() {
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: recentItems.slice(0, 3).map((shape, i) => /* @__PURE__ */ 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__ */ 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 || i
           )) })
         ] }),
-        /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" })
+        /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px] border-neutral-800" })
       ] }),
       elements.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "py-5", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold mb-3", children: item.category }),
             /* @__PURE__ */ 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"
               }
             )
@@ -103435,6 +103725,7 @@ function ElementsPanel() {
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: item.data.map((shape, j2) => /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               onClick: () => {
                 addSVGToCanvas("svg", shape.image);
                 addRecentItem({
@@ -103445,8 +103736,11 @@ function ElementsPanel() {
                   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__ */ jsx(
                 "img",
                 {
@@ -103454,14 +103748,15 @@ function ElementsPanel() {
                   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__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" })
+        /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px] border-neutral-800" })
       ] }, i))
     ] })
   ] });
@@ -158363,6 +158658,20 @@ function DuplicateButton() {
   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");
@@ -158370,13 +158679,14 @@ function DuplicateButton() {
       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;
         })
@@ -158389,18 +158699,21 @@ function DuplicateButton() {
       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__ */ jsx(
     "button",
@@ -160320,6 +160633,175 @@ function createWorkarea(canvas2, container, productData, pageSide) {
   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 = (e3) => {
@@ -160482,13 +160964,21 @@ function setupSelectionHandlers(canvas2, setSelection, clearSelection) {
     configureSelectionControls();
     bringOverlaysToFront(canvas2);
   };
-  const handleObjectMoving = () => {
+  const handleObjectMoving = (e3) => {
+    if (e3.target) {
+      handleObjectAlignmentSnap(canvas2, e3.target);
+    }
     bringOverlaysToFront(canvas2);
   };
+  const handleMovementEnd = (e3) => {
+    clearAlignmentGuidelines(canvas2);
+    hideDegree(e3);
+  };
   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({
@@ -160506,13 +160996,14 @@ function setupSelectionHandlers(canvas2, setSelection, clearSelection) {
     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");
   };
 }
@@ -160569,6 +161060,9 @@ const CUSTOM_PROPERTIES = [
   "lockMovementY",
   "rx",
   "ry",
+  "src",
+  "crossOrigin",
+  "__maskPath",
   "__radiusOfCanvas",
   "__shapeType",
   "__pageSide",
@@ -160579,10 +161073,28 @@ const CUSTOM_PROPERTIES = [
   "__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 {
@@ -161015,8 +161527,9 @@ function ZoomControls({ onReset }) {
   ] }) });
 }
 const OFFSET = 20;
+let globalClipboard = null;
+let clipboardSourcePage = null;
 function useKeyboardEvents(canvasParam) {
-  const clipboardRef = useRef(null);
   const storeCanvas = useEditorStore((s2) => s2.canvas);
   const historyCanvas = useHistoryStore((s2) => s2.canvas);
   const canvas2 = canvasParam || storeCanvas || historyCanvas;
@@ -161028,30 +161541,56 @@ function useKeyboardEvents(canvasParam) {
       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);
@@ -161069,6 +161608,7 @@ function useKeyboardEvents(canvasParam) {
       const isY = e3.key?.toLowerCase() === "y" || e3.code === "KeyY";
       const isC = e3.key?.toLowerCase() === "c" || e3.code === "KeyC";
       const isV = e3.key?.toLowerCase() === "v" || e3.code === "KeyV";
+      const isA = e3.key?.toLowerCase() === "a" || e3.code === "KeyA";
       if (isZ && !e3.shiftKey) {
         e3.preventDefault();
         useHistoryStore.getState().undo();
@@ -161089,6 +161629,22 @@ function useKeyboardEvents(canvasParam) {
         handlePaste();
         return;
       }
+      if (isA) {
+        const activeCanvas = getActiveCanvas();
+        if (activeCanvas) {
+          e3.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 = e3.key === "'" || e3.code === "Quote";
       if (isQuote) {
         e3.preventDefault();
@@ -161118,13 +161674,14 @@ function Workspace() {
   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] = useState("front");
-  const [isPanning, setIsPanning] = useState(false);
+  const editorPages = useEditorStore((s2) => s2.pages);
   const pageJSON = useRef({
     front: null,
     back: null
   });
+  const isTwoSided = productData?.optionsMap?.printing === "4/4" || !!pageJSON.current?.back || !!editorPages?.back;
+  const [currentPage, setCurrentPage] = useState("front");
+  const [isPanning, setIsPanning] = useState(false);
   useEffect(() => {
     if (!canvasRef.current || !containerRef.current) return;
     if (fabricRef.current) return;
@@ -161302,9 +161859,48 @@ function Workspace() {
     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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex bg-gray-200/50 p-1 rounded-xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex bg-gray-200/50 p-1 rounded-xl items-center gap-1", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -161320,6 +161916,37 @@ function Workspace() {
             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__ */ 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__ */ 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__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                    /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: "COPY FRONT TO BACK" })
+            ]
+          }
         )
       ] }),
       /* @__PURE__ */ jsx("div", { className: "w-[1px] h-6 bg-gray-300/50 mx-3" }),