vibrant-tool 0.1.9 → 0.1.11

package/dist/vibrant-tool.umd.js

@@ -1124,11 +1124,25 @@
       back: null
     },
     templateData: null,
+    // Grid state
+    showGrid: false,
+    setShowGrid: (showGrid) => set({ showGrid }),
+    toggleGrid: () => set((state) => ({ showGrid: !state.showGrid })),
     history: [],
     historyIndex: -1,
     // Crop state
     isCropping: false,
-    startCropping: () => set({ isCropping: true }),
+    startCropping: () => {
+      const canvas2 = get().canvas;
+      if (canvas2 && canvas2.isDrawingMode) {
+        canvas2.isDrawingMode = false;
+        canvas2.selection = true;
+        canvas2.defaultCursor = "default";
+        canvas2._isCurrentlyDrawing = false;
+        canvas2.requestRenderAll();
+      }
+      set({ isCropping: true });
+    },
     stopCropping: () => set({ isCropping: false }),
     // Canvas setter (NO history here)
     setCanvas: (canvas2) => {
@@ -8443,6 +8457,7 @@
       originX: "left",
       originY: "top",
       fill: overlayColor,
+      opacity: 0.6,
       strokeWidth: 0,
       selectable: false,
       evented: false,
@@ -8494,6 +8509,7 @@
           originX: "left",
           originY: "top",
           fill: overlayColor,
+          opacity: 0.6,
           strokeWidth: 0,
           selectable: false,
           evented: false,
@@ -8790,6 +8806,7 @@
     const overlayColor = canvas2.backgroundColor || "#F3F4F6";
     const makeOverlay = (props) => new jr({
       fill: overlayColor,
+      opacity: 0.6,
       selectable: false,
       evented: false,
       excludeFromExport: true,
@@ -8863,10 +8880,14 @@
     canvas2.requestRenderAll();
   }
   function bringOverlaysToFront(canvas2) {
+    if (!canvas2) return;
+    canvas2.preserveObjectStacking = true;
+    canvas2.controlsAboveOverlay = true;
     const overlays = canvas2.getObjects().filter((o2) => o2.name?.startsWith("overlay-"));
     const guidelines = canvas2.getObjects().filter((o2) => o2.name?.startsWith("guideline-"));
     overlays.forEach((overlay) => canvas2.bringObjectToFront(overlay));
     guidelines.forEach((g2) => canvas2.bringObjectToFront(g2));
+    canvas2.requestRenderAll();
   }
   const BASE_URL = "https://www.api.vibrantprintshop.com";
   const IMAGE_UPLOAD_URL = "https://upload.vibrantprint.com";
@@ -8997,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();
@@ -9004,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)
@@ -9103,12 +9367,16 @@
         }
       }
       createOverlays(canvas2, workarea, currentSide);
+      if (bgImg) {
+        canvas2.sendObjectToBack(bgImg);
+      }
       canvas2.sendObjectToBack(workarea);
     }
     canvas2.getObjects().forEach((obj) => {
       const isWorkarea = obj.name === "workarea";
       const isOverlayOrGuide = obj.name?.startsWith("overlay-") || obj.name?.startsWith("guideline-");
-      if (!isWorkarea && !isOverlayOrGuide) {
+      const isBgImage = obj.name === "bg-image";
+      if (!isWorkarea && !isOverlayOrGuide && !isBgImage) {
         obj.set({
           selectable: true,
           evented: true,
@@ -9246,6 +9514,77 @@
       return "";
     }
   }
+  const useDrawStore = create((set) => ({
+    drawTool: "select",
+    strokeWidth: 5,
+    opacity: 100,
+    color: "#000000",
+    setDrawTool: (tool) => set(() => {
+      if (tool === "highlighter") {
+        return { drawTool: tool, opacity: 50 };
+      }
+      if (tool === "brush") {
+        return { drawTool: tool, opacity: 100 };
+      }
+      return { drawTool: tool };
+    }),
+    setStrokeWidth: (v2) => set({ strokeWidth: v2 }),
+    setOpacity: (v2) => set({ opacity: v2 }),
+    setColor: (v2) => set({ color: v2 })
+  }));
+  function deriveType(objects) {
+    if (objects.length === 0) return "none";
+    if (objects.length > 1) return "multiple";
+    const obj = objects[0];
+    const t2 = obj.type?.toLowerCase();
+    if (t2 === "activeselection") return "multiple";
+    if (t2 === "group") {
+      if (obj.name === "qr") return "qr";
+      if (obj.name === "barcode") return "barcode";
+      return "group";
+    }
+    if (t2 === "textbox" || t2 === "i-text" || t2 === "text") return "textbox";
+    if (t2 === "image") return "image";
+    return t2 || "none";
+  }
+  const useSelectionStore = create((set) => ({
+    type: "none",
+    objects: [],
+    activeColor: null,
+    activeColorIndex: 0,
+    setSelection: (objects) => {
+      if (objects && objects.length > 0) {
+        const drawState = useDrawStore.getState();
+        if (drawState.drawTool !== "select") {
+          drawState.setDrawTool("select");
+        }
+        const canvas2 = useEditorStore.getState().canvas;
+        if (canvas2 && canvas2.isDrawingMode) {
+          canvas2.isDrawingMode = false;
+          canvas2.selection = true;
+          canvas2.defaultCursor = "default";
+          canvas2._isCurrentlyDrawing = false;
+          canvas2.requestRenderAll();
+        }
+      }
+      set({
+        objects,
+        type: deriveType(objects),
+        activeColor: null,
+        activeColorIndex: 0
+      });
+    },
+    setActiveColor: (color, index = 0) => set({
+      activeColor: color,
+      activeColorIndex: index
+    }),
+    clearSelection: () => set({
+      type: "none",
+      objects: [],
+      activeColor: null,
+      activeColorIndex: 0
+    })
+  }));
   const HISTORY_CUSTOM_PROPERTIES = [
     "name",
     "id",
@@ -9256,6 +9595,9 @@
     "lockMovementY",
     "rx",
     "ry",
+    "src",
+    "crossOrigin",
+    "__maskPath",
     "__radiusOfCanvas",
     "__shapeType",
     "__pageSide",
@@ -9266,7 +9608,24 @@
     "__initialZoom",
     "__borderRect",
     "__rotationControlSize",
-    "__showDegree"
+    "__showDegree",
+    "textAlign",
+    "fontFamily",
+    "fontSize",
+    "fontWeight",
+    "fontStyle",
+    "underline",
+    "linethrough",
+    "overline",
+    "fill",
+    "stroke",
+    "strokeWidth",
+    "lineHeight",
+    "charSpacing",
+    "styles",
+    "paintFirst",
+    "strokeUniform",
+    "objectCaching"
   ];
   const useHistoryStore = create((set, get) => ({
     canvas: null,
@@ -9289,11 +9648,12 @@
     setPage: (page) => set({ currentPage: page }),
     saveState: () => {
       const { canvas: canvas2, currentPage, pages, isRestoring } = get();
-      if (!canvas2 || isRestoring) return;
-      const rawJson = canvas2.toObject(HISTORY_CUSTOM_PROPERTIES);
+      const targetCanvas = canvas2 || useEditorStore.getState().canvas;
+      if (!targetCanvas || isRestoring) return;
+      const rawJson = targetCanvas.toObject(HISTORY_CUSTOM_PROPERTIES);
       const cleanObjects = (rawJson.objects || []).filter((obj) => {
         const name = obj.name || "";
-        return name !== "watermark" && !name.startsWith("overlay-") && !name.startsWith("guideline-");
+        return name !== "watermark" && !name.startsWith("overlay-") && !name.startsWith("guideline-") && name !== "canvas-grid";
       });
       const json = { ...rawJson, objects: cleanObjects };
       const history = pages[currentPage]?.history ?? [];
@@ -9313,10 +9673,12 @@
     },
     undo: async () => {
       const { canvas: canvas2, currentPage, pages, isRestoring } = get();
-      if (!canvas2 || isRestoring) return;
+      const targetCanvas = canvas2 || useEditorStore.getState().canvas;
+      if (!targetCanvas || isRestoring) return;
       const page = pages[currentPage];
       if (!page || page.history.length <= 1) return;
-      canvas2.discardActiveObject();
+      targetCanvas.discardActiveObject();
+      useSelectionStore.getState().clearSelection();
       const current = page.history.at(-1);
       const previous = page.history.at(-2);
       set({
@@ -9330,8 +9692,8 @@
         }
       });
       try {
-        await loadPageToCanvas(canvas2, previous, currentPage);
-        canvas2.requestRenderAll();
+        await loadPageToCanvas(targetCanvas, previous, currentPage);
+        targetCanvas.requestRenderAll();
         const editorStore = useEditorStore.getState();
         if (editorStore.pages) {
           editorStore.setPages({
@@ -9347,10 +9709,12 @@
     },
     redoAction: async () => {
       const { canvas: canvas2, currentPage, pages, isRestoring } = get();
-      if (!canvas2 || isRestoring) return;
+      const targetCanvas = canvas2 || useEditorStore.getState().canvas;
+      if (!targetCanvas || isRestoring) return;
       const page = pages[currentPage];
       if (!page || page.redo.length === 0) return;
-      canvas2.discardActiveObject();
+      targetCanvas.discardActiveObject();
+      useSelectionStore.getState().clearSelection();
       const next = page.redo[0];
       set({
         isRestoring: true,
@@ -9363,8 +9727,8 @@
         }
       });
       try {
-        await loadPageToCanvas(canvas2, next, currentPage);
-        canvas2.requestRenderAll();
+        await loadPageToCanvas(targetCanvas, next, currentPage);
+        targetCanvas.requestRenderAll();
         const editorStore = useEditorStore.getState();
         if (editorStore.pages) {
           editorStore.setPages({
@@ -9379,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);
@@ -9664,7 +9786,7 @@
   }
   function exportDesignJSON(canvas2, workarea) {
     const objects = canvas2.getObjects();
-    const children = objects.filter((obj) => obj.name !== "workarea" && !obj.name?.startsWith("overlay-")).map((obj) => {
+    const children = objects.filter((obj) => obj.name !== "workarea" && !obj.name?.startsWith("overlay-") && !obj.name?.startsWith("guideline-") && obj.name !== "canvas-grid").map((obj) => {
       const base = obj.toObject();
       return {
         id: obj.id || crypto.randomUUID(),
@@ -9713,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"
         }
@@ -9724,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"
         }
@@ -9889,6 +10030,7 @@
       });
       canvas2.add(img);
       canvas2.setActiveObject(img);
+      bringOverlaysToFront(canvas2);
       canvas2.requestRenderAll();
     }).catch((err) => {
       console.warn("Fabric failed to load image from URL:", url, err);
@@ -9911,7 +10053,7 @@
     canvas2.renderAll();
     const originalProps = /* @__PURE__ */ new Map();
     objects.forEach((obj) => {
-      const isExcluded = obj.excludeFromExport || obj.name?.startsWith("overlay-") || obj.name?.startsWith("guide-") || obj.name?.startsWith("guideline-") || obj.name === "crop-grid";
+      const isExcluded = obj.excludeFromExport || obj.name?.startsWith("overlay-") || obj.name?.startsWith("guide-") || obj.name?.startsWith("guideline-") || obj.name === "canvas-grid" || obj.name === "crop-grid";
       if (isExcluded && obj !== targetWorkarea) {
         originalProps.set(obj, {
           visible: obj.visible,
@@ -101805,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);
@@ -102011,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;
@@ -102105,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: [
@@ -102391,7 +102612,23 @@ end`);
   const useSidePanelStore = create(
     (set) => ({
       activePanel: null,
-      setActivePanel: (val) => set({ activePanel: val })
+      setActivePanel: (val) => {
+        if (val !== "draw") {
+          const drawState = useDrawStore.getState();
+          if (drawState.drawTool !== "select") {
+            drawState.setDrawTool("select");
+          }
+          const canvas2 = useEditorStore.getState().canvas;
+          if (canvas2 && canvas2.isDrawingMode) {
+            canvas2.isDrawingMode = false;
+            canvas2.selection = true;
+            canvas2.defaultCursor = "default";
+            canvas2._isCurrentlyDrawing = false;
+            canvas2.requestRenderAll();
+          }
+        }
+        set({ activePanel: val });
+      }
     })
   );
   function Panel({ panelName }) {
@@ -102457,43 +102694,6 @@ end`);
       ] })
     ] });
   }
-  function deriveType(objects) {
-    if (objects.length === 0) return "none";
-    if (objects.length > 1) return "multiple";
-    const obj = objects[0];
-    const t2 = obj.type?.toLowerCase();
-    if (t2 === "activeselection") return "multiple";
-    if (t2 === "group") {
-      if (obj.name === "qr") return "qr";
-      if (obj.name === "barcode") return "barcode";
-      return "group";
-    }
-    if (t2 === "textbox" || t2 === "i-text" || t2 === "text") return "textbox";
-    if (t2 === "image") return "image";
-    return t2 || "none";
-  }
-  const useSelectionStore = create((set) => ({
-    type: "none",
-    objects: [],
-    activeColor: null,
-    activeColorIndex: 0,
-    setSelection: (objects) => set({
-      objects,
-      type: deriveType(objects),
-      activeColor: null,
-      activeColorIndex: 0
-    }),
-    setActiveColor: (color, index = 0) => set({
-      activeColor: color,
-      activeColorIndex: index
-    }),
-    clearSelection: () => set({
-      type: "none",
-      objects: [],
-      activeColor: null,
-      activeColorIndex: 0
-    })
-  }));
   function TemplatesPanel() {
     const { productData } = useProductStore();
     const { startLoading, stopLoading, isLoading } = useLoaderStore();
@@ -102501,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();
@@ -102592,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",
@@ -102934,6 +103135,7 @@ end`);
     svg.setCoords();
     canvas2.add(svg);
     canvas2.setActiveObject(svg);
+    bringOverlaysToFront(canvas2);
     useSelectionStore.getState().setSelection([svg]);
     canvas2.requestRenderAll();
   }
@@ -102984,6 +103186,7 @@ end`);
     group.setCoords();
     canvas2.add(group);
     canvas2.setActiveObject(group);
+    bringOverlaysToFront(canvas2);
     useSelectionStore.getState().setSelection([group]);
     canvas2.requestRenderAll();
     return group;
@@ -103053,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",
           {
@@ -103080,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" })
@@ -103092,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(
@@ -103102,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",
@@ -103122,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",
@@ -103139,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..." })
       ] }) }) })
     ] });
   }
@@ -103186,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: [
@@ -103259,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, {})
             }
           ),
@@ -103271,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",
                 {
@@ -103290,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"
                 }
@@ -103312,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"
                 }
               )
@@ -103349,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({
@@ -103359,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",
                   {
@@ -103368,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))
       ] })
     ] });
@@ -103388,7 +103770,7 @@ end`);
     if (!workarea) return;
     const workareaCenter = workarea.getCenterPoint();
     const workareaBounds = workarea.getBoundingRect();
-    const maxTextWidth = Math.max(40, workareaBounds.width * 0.8);
+    const maxTextWidth = Math.max(40, workareaBounds.width * 0.85);
     const textWidth = Math.min(width, maxTextWidth);
     const text = new Uo(textName, {
       fontSize,
@@ -103401,19 +103783,26 @@ end`);
       strokeWidth: 0,
       hasRotatingPoint: true,
       centerTransform: true,
-      padding: 5,
+      padding: 0,
       strokeUniform: true,
       paintFirst: "stroke",
       objectCaching: false
       // Ensure maximum sharpness
     });
+    const measuredWidth = Math.ceil(text.calcTextWidth());
+    if (measuredWidth > 0 && !textName.includes("\n")) {
+      text.set({ width: Math.min(Math.max(measuredWidth + 4, 20), maxTextWidth) });
+      text.initDimensions();
+    }
     canvas2.add(text);
     text.set({
       left: workareaCenter.x - text.getScaledWidth() / 2,
       top: workareaCenter.y - text.getScaledHeight() / 2
     });
     canvas2.setActiveObject(text);
+    bringOverlaysToFront(canvas2);
     canvas2.requestRenderAll();
+    useHistoryStore.getState().saveState();
   }
   async function addTextTemplate(id) {
     try {
@@ -103445,6 +103834,7 @@ end`);
       canvas2.add(...fabricObjects);
       canvas2.renderOnAddRemove = true;
       canvas2.requestRenderAll();
+      useHistoryStore.getState().saveState();
     } catch (err) {
       console.error("Failed to add text template:", err);
     }
@@ -104212,11 +104602,20 @@ end`);
       }) : !isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full py-8 text-center text-xs text-gray-500", children: "No images found" }) : null }) })
     ] });
   }
+  let bgSaveTimer = null;
+  function flushBackgroundSave() {
+    if (bgSaveTimer) {
+      clearTimeout(bgSaveTimer);
+      bgSaveTimer = null;
+      useHistoryStore.getState().saveState();
+    }
+  }
   async function addBackgroundImage(url) {
     const canvas2 = useEditorStore.getState().canvas;
     if (!canvas2) return;
     const workarea = canvas2.getObjects().find((o2) => o2.name === "workarea");
     if (!workarea) return;
+    flushBackgroundSave();
     workarea.set("fill", "#ffffff");
     canvas2.getObjects("image").forEach((o2) => {
       if (o2.name === "bg-image") canvas2.remove(o2);
@@ -104228,7 +104627,16 @@ end`);
     const activeSide = workarea.__pageSide || useHistoryStore.getState().currentPage || "front";
     const baseRx = (workarea.rx || workarea.__radiusOfCanvas || 0) * (workarea.scaleX || 1);
     const baseRy = (workarea.ry || workarea.__radiusOfCanvas || 0) * (workarea.scaleY || 1);
-    oa.fromURL(url + "?t=vb", { crossOrigin: "anonymous" }).then((img) => {
+    let finalUrl = url;
+    try {
+      const b64 = await getBase64ImageFromURL(url);
+      if (b64 && (b64.startsWith("data:image/png") || b64.startsWith("data:image/jpeg"))) {
+        finalUrl = b64;
+      }
+    } catch {
+    }
+    try {
+      const img = await oa.fromURL(finalUrl, { crossOrigin: "anonymous" });
       const imgW = img.width || 1;
       const imgH = img.height || 1;
       const scale2 = Math.max(waW / imgW, waH / imgH);
@@ -104264,12 +104672,14 @@ end`);
       canvas2.add(img);
       canvas2.sendObjectToBack(img);
       canvas2.sendObjectToBack(workarea);
+      bringOverlaysToFront(canvas2);
       canvas2.requestRenderAll();
-    }).catch((err) => {
+      useHistoryStore.getState().saveState();
+    } catch (err) {
       console.warn("Fabric failed to load background image:", url, err);
-    });
+    }
   }
-  async function addBackgroundColor(color) {
+  async function addBackgroundColor(color, immediate = false) {
     const canvas2 = useEditorStore.getState().canvas;
     if (!canvas2) return;
     const workarea = canvas2.getObjects().find((o2) => o2.name === "workarea");
@@ -104278,7 +104688,20 @@ end`);
       if (o2.name === "bg-image") canvas2.remove(o2);
     });
     workarea.set("fill", color);
+    bringOverlaysToFront(canvas2);
     canvas2.requestRenderAll();
+    if (bgSaveTimer) {
+      clearTimeout(bgSaveTimer);
+      bgSaveTimer = null;
+    }
+    if (immediate) {
+      useHistoryStore.getState().saveState();
+    } else {
+      bgSaveTimer = setTimeout(() => {
+        useHistoryStore.getState().saveState();
+        bgSaveTimer = null;
+      }, 120);
+    }
   }
   function normalizeHexColor(c2) {
     if (!c2 || typeof c2 !== "string" || c2 === "none" || c2 === "transparent" || c2.trim() === "") return null;
@@ -106038,11 +106461,11 @@ end`);
     const [hasMore, setHasMore] = React.useState(true);
     const [page, setPage] = React.useState(1);
     const scrollRef = React.useRef(null);
-    const handleApplyBackground = (type, value) => {
+    const handleApplyBackground = async (type, value, immediate = false) => {
       if (type === "color") {
-        addBackgroundColor(value);
+        await addBackgroundColor(value, immediate);
       } else {
-        addBackgroundImage(value);
+        await addBackgroundImage(value);
       }
       if (window.innerWidth < 768) {
         setActivePanel(null);
@@ -106095,7 +106518,7 @@ end`);
           CMYKColorPicker,
           {
             value: "#ffffff",
-            onChange: (hex) => handleApplyBackground("color", hex)
+            onChange: (hex) => handleApplyBackground("color", hex, false)
           }
         ),
         CMYK_SAFE_COLORS.map(({ hex, label }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -106103,7 +106526,7 @@ end`);
           {
             className: "w-8 h-8 rounded border border-neutral-600 cursor-pointer transition-transform hover:scale-110",
             style: { backgroundColor: hex },
-            onClick: () => handleApplyBackground("color", hex),
+            onClick: () => handleApplyBackground("color", hex, true),
             title: label
           },
           hex
@@ -106119,7 +106542,7 @@ end`);
               const image = await ShapeService.convertImages(item.largeImage);
               const imageUrl = image?.success ? image?.url : null;
               if (!imageUrl) return;
-              handleApplyBackground("image", imageUrl);
+              await handleApplyBackground("image", imageUrl);
               if (window.innerWidth < 768) {
                 useSidePanelStore.getState().setActivePanel(null);
               }
@@ -106215,24 +106638,6 @@ end`);
       )) })
     ] });
   }
-  const useDrawStore = create((set) => ({
-    drawTool: "select",
-    strokeWidth: 5,
-    opacity: 100,
-    color: "#000000",
-    setDrawTool: (tool) => set(() => {
-      if (tool === "highlighter") {
-        return { drawTool: tool, opacity: 50 };
-      }
-      if (tool === "brush") {
-        return { drawTool: tool, opacity: 100 };
-      }
-      return { drawTool: tool };
-    }),
-    setStrokeWidth: (v2) => set({ strokeWidth: v2 }),
-    setOpacity: (v2) => set({ opacity: v2 }),
-    setColor: (v2) => set({ color: v2 })
-  }));
   function DrawPanel() {
     const {
       drawTool,
@@ -106247,7 +106652,7 @@ end`);
     const isDisabled = drawTool === "select";
     const TOOLS = [
       { key: "select", label: "✦ Selection" },
-      { key: "brush", label: "🖊 Brush" },
+      { key: "brush", label: "✏️ Brush" },
       { key: "highlighter", label: "✎ Highlighter" }
     ];
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4 select-none", children: [
@@ -111038,8 +111443,8 @@ END:VCARD`;
       const objWidth = obj.width ?? 1;
       const objHeight = obj.height ?? 1;
       const pathDims = clipPath.getBoundingRect();
-      const scaleX = objWidth / pathDims.width;
-      const scaleY = objHeight / pathDims.height;
+      const scaleX = objWidth / (clipPath.width || pathDims.width);
+      const scaleY = objHeight / (clipPath.height || pathDims.height);
       clipPath.set({
         scaleX,
         scaleY,
@@ -111048,6 +111453,8 @@ END:VCARD`;
         angle: 0
         // Should not inherit angle since the parent handles rotation
       });
+      clipPath.__maskPath = svgPath;
+      obj.__maskPath = svgPath;
       obj.set({ clipPath });
       obj.setCoords();
       canvas2.requestRenderAll();
@@ -156998,7 +157405,7 @@ ${elements2.join("\n")}
                 id: item.id,
                 item,
                 isActive: activePanel === item.id,
-                onClick: () => setActivePanel(item.id)
+                onClick: () => setActivePanel(activePanel === item.id ? null : item.id)
               },
               item.id
             )
@@ -157013,7 +157420,7 @@ ${elements2.join("\n")}
             item,
             variant: "mobile",
             isActive: activePanel === item.id,
-            onClick: () => setActivePanel(item.id)
+            onClick: () => setActivePanel(activePanel === item.id ? null : item.id)
           },
           item.id
         )
@@ -157139,20 +157546,48 @@ ${elements2.join("\n")}
       }
     );
   }
-  function TextAlignButton({
+  function TextAlignGroup({
     value,
     onChange
   }) {
-    const next = value === "left" ? "center" : value === "center" ? "right" : "left";
+    const current = value === "center" || value === "right" ? value : "left";
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+      "div",
       {
-        onClick: () => onChange(next),
-        className: "p-1 bg-neutral-800 rounded hover:bg-neutral-700",
+        className: "flex items-center bg-neutral-800 rounded p-0.5 gap-0.5 border border-neutral-700",
+        role: "group",
+        "aria-label": "Text alignment",
         children: [
-          value === "left" && /* @__PURE__ */ jsxRuntime.jsx(AlignLeftIcon$1, {}),
-          value === "center" && /* @__PURE__ */ jsxRuntime.jsx(AlignCenterIcon$1, {}),
-          value === "right" && /* @__PURE__ */ jsxRuntime.jsx(AlignRightIcon$1, {})
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              title: "Align Left",
+              onClick: () => onChange("left"),
+              className: `p-1 rounded transition-colors ${current === "left" ? "bg-neutral-600 text-white shadow-sm" : "text-neutral-400 hover:text-white hover:bg-neutral-700"}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(AlignLeftIcon$1, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              title: "Align Center",
+              onClick: () => onChange("center"),
+              className: `p-1 rounded transition-colors ${current === "center" ? "bg-neutral-600 text-white shadow-sm" : "text-neutral-400 hover:text-white hover:bg-neutral-700"}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(AlignCenterIcon$1, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              title: "Align Right",
+              onClick: () => onChange("right"),
+              className: `p-1 rounded transition-colors ${current === "right" ? "bg-neutral-600 text-white shadow-sm" : "text-neutral-400 hover:text-white hover:bg-neutral-700"}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(AlignRightIcon$1, {})
+            }
+          )
         ]
       }
     );
@@ -157205,15 +157640,29 @@ ${elements2.join("\n")}
     }, [type, objects]);
     React.useEffect(() => {
       if (!text) return;
-      setFontSize(text.fontSize ?? 18);
-      setLineHeight2((text.lineHeight ?? 1) * 100);
-      setCharSpacing(text.charSpacing ?? 0);
-      setAlign(text.textAlign ?? "left");
-      const dashArray = text.strokeDashArray;
-      const currentStrokeStyle = Array.isArray(dashArray) && dashArray.length === 2 && dashArray[0] === 2 && dashArray[1] === 4 ? "Dotted" : Array.isArray(dashArray) && dashArray.length === 2 && dashArray[0] === 10 && dashArray[1] === 5 ? "Dashed" : "Line";
-      setStrokeColor(typeof text.stroke === "string" && text.stroke ? text.stroke : "#000000");
-      setStrokeSize(Math.max(0, Number(text.strokeWidth ?? 0)));
-      setStrokeStyle(currentStrokeStyle);
+      const syncProps = () => {
+        setFontSize(text.fontSize ?? 18);
+        setLineHeight2((text.lineHeight ?? 1) * 100);
+        setCharSpacing(text.charSpacing ?? 0);
+        setAlign(text.textAlign ?? "left");
+        const dashArray = text.strokeDashArray;
+        const currentStrokeStyle = Array.isArray(dashArray) && dashArray.length === 2 && dashArray[0] === 2 && dashArray[1] === 4 ? "Dotted" : Array.isArray(dashArray) && dashArray.length === 2 && dashArray[0] === 10 && dashArray[1] === 5 ? "Dashed" : "Line";
+        setStrokeColor(typeof text.stroke === "string" && text.stroke ? text.stroke : "#000000");
+        setStrokeSize(Math.max(0, Number(text.strokeWidth ?? 0)));
+        setStrokeStyle(currentStrokeStyle);
+      };
+      syncProps();
+      const canvas2 = text.canvas;
+      if (canvas2) {
+        canvas2.on("object:modified", syncProps);
+        canvas2.on("selection:updated", syncProps);
+      }
+      return () => {
+        if (canvas2) {
+          canvas2.off("object:modified", syncProps);
+          canvas2.off("selection:updated", syncProps);
+        }
+      };
     }, [text]);
     const updateText = React.useCallback(
       (props) => {
@@ -157221,6 +157670,11 @@ ${elements2.join("\n")}
         const canvas2 = text.canvas;
         if (!canvas2) return;
         text.set(props);
+        if (props.textAlign) {
+          text.dirty = true;
+          text.initDimensions?.();
+          text.setCoords();
+        }
         canvas2.requestRenderAll();
         useHistoryStore.getState().saveState();
       },
@@ -157277,7 +157731,7 @@ ${elements2.join("\n")}
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        TextAlignButton,
+        TextAlignGroup,
         {
           value: align,
           onChange: (v2) => {
@@ -157533,6 +157987,7 @@ ${elements2.join("\n")}
     darkOverlay = null;
     focusedImage = null;
     cropZone = null;
+    maskPath = null;
     onEnd = null;
     init(canvas2) {
       this.canvas = canvas2;
@@ -157544,6 +157999,7 @@ ${elements2.join("\n")}
       this.cleanup();
       this.targetImage = image;
       this.onEnd = onEnd || null;
+      this.maskPath = image.__maskPath || image.clipPath?.__maskPath || null;
       const canvas2 = this.canvas;
       canvas2.renderOnAddRemove = false;
       canvas2.discardActiveObject();
@@ -157560,7 +158016,8 @@ ${elements2.join("\n")}
         width: naturalWidth,
         height: naturalHeight,
         selectable: false,
-        evented: false
+        evented: false,
+        clipPath: void 0
       });
       const cropX = image.cropX || 0;
       const cropY = image.cropY || 0;
@@ -157691,14 +158148,31 @@ ${elements2.join("\n")}
       const local = Mn.transformPoint(center, inv);
       const localW = zone.getScaledWidth() / Math.abs(img.scaleX);
       const localH = zone.getScaledHeight() / Math.abs(img.scaleY);
-      img.clipPath = new jr({
-        left: local.x,
-        top: local.y,
-        width: localW,
-        height: localH,
-        originX: "center",
-        originY: "center"
-      });
+      if (this.maskPath) {
+        const maskClip = new no(this.maskPath, {
+          originX: "center",
+          originY: "center"
+        });
+        const pathW = maskClip.width || 1;
+        const pathH = maskClip.height || 1;
+        maskClip.set({
+          left: local.x,
+          top: local.y,
+          scaleX: localW / pathW,
+          scaleY: localH / pathH,
+          angle: 0
+        });
+        img.clipPath = maskClip;
+      } else {
+        img.clipPath = new jr({
+          left: local.x,
+          top: local.y,
+          width: localW,
+          height: localH,
+          originX: "center",
+          originY: "center"
+        });
+      }
       img.dirty = true;
     }
     /* ======================= APPLY CROP ======================= */
@@ -157723,11 +158197,13 @@ ${elements2.join("\n")}
       const minY = Math.min(...ys2);
       const maxX = Math.max(...xs2);
       const maxY = Math.max(...ys2);
+      const newW = Math.min(full.width, maxX - minX);
+      const newH = Math.min(full.height, maxY - minY);
       img.set({
         cropX: Math.max(0, minX),
         cropY: Math.max(0, minY),
-        width: Math.min(full.width, maxX - minX),
-        height: Math.min(full.height, maxY - minY),
+        width: newW,
+        height: newH,
         scaleX: full.scaleX,
         scaleY: full.scaleY,
         angle: full.angle,
@@ -157739,6 +158215,35 @@ ${elements2.join("\n")}
         selectable: true,
         evented: true
       });
+      if (this.maskPath) {
+        const newClip = new no(this.maskPath, {
+          originX: "center",
+          originY: "center"
+        });
+        const pathW = newClip.width || 1;
+        const pathH = newClip.height || 1;
+        newClip.set({
+          scaleX: newW / pathW,
+          scaleY: newH / pathH,
+          left: 0,
+          top: 0,
+          angle: 0
+        });
+        newClip.__maskPath = this.maskPath;
+        img.__maskPath = this.maskPath;
+        img.set({ clipPath: newClip });
+      } else if (img.clipPath && img.clipPath.type === "path") {
+        const pW = img.clipPath.width || 1;
+        const pH = img.clipPath.height || 1;
+        img.clipPath.set({
+          scaleX: newW / pW,
+          scaleY: newH / pH,
+          left: 0,
+          top: 0,
+          originX: "center",
+          originY: "center"
+        });
+      }
       img.setPositionByOrigin(
         new ot(zone.left, zone.top),
         "center",
@@ -157747,7 +158252,9 @@ ${elements2.join("\n")}
       img.setCoords();
       this.cleanup();
       this.canvas.setActiveObject(img);
+      bringOverlaysToFront(this.canvas);
       this.canvas.requestRenderAll();
+      useHistoryStore.getState().saveState();
       this.onEnd?.();
     }
     /* ======================== CANCEL ========================== */
@@ -157783,6 +158290,7 @@ ${elements2.join("\n")}
       this.fullImage = null;
       this.darkOverlay = null;
       this.targetImage = null;
+      this.maskPath = null;
     }
   }
   const cropService = new CropService();
@@ -157869,7 +158377,7 @@ ${elements2.join("\n")}
     const [isRemovingBg, setIsRemovingBg] = React.useState(false);
     const [bgStatus, setBgStatus] = React.useState(null);
     const activeObj = canvas2?.getActiveObject();
-    const hasMask = !!activeObj?.clipPath;
+    const hasMask = !!activeObj?.clipPath || !!activeObj?.__maskPath;
     activeObj && (activeObj.type === "image" || activeObj.isType?.("image"));
     const isBgRemoved = !!activeObj?.__originalSrc || !!activeObj?.__isBgRemoved;
     if (type !== "image" || objects?.[0]?.name === "qr" || objects?.[0]?.name === "barcode")
@@ -157878,8 +158386,9 @@ ${elements2.join("\n")}
       if (!canvas2) return;
       const obj = canvas2.getActiveObject();
       if (!obj) return;
-      if (obj.clipPath) {
+      if (obj.clipPath || obj.__maskPath) {
         obj.set({ clipPath: null });
+        obj.__maskPath = null;
         obj.setCoords();
         canvas2.requestRenderAll();
         saveState();
@@ -158150,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");
@@ -158157,35 +158680,41 @@ ${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;
           })
         );
         const newSelection = clones.length > 1 ? new Qo(clones, { canvas: canvas2 }) : clones[0];
         canvas2.setActiveObject(newSelection);
+        bringOverlaysToFront(canvas2);
         canvas2.requestRenderAll();
         saveState();
         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",
@@ -158738,44 +159267,50 @@ ${elements2.join("\n")}
       if (!active) return [];
       return active.type?.toLowerCase() === "activeselection" ? active.getObjects() : [active];
     };
-    const getWorkarea2 = () => canvas2.getObjects().find((o2) => o2.name === "workarea");
-    const normalizeOrigin = (obj) => {
-      if (obj.originX === "left" && obj.originY === "top") return;
-      const point = obj.getPointByOrigin("left", "top");
-      obj.set({ originX: "left", originY: "top" });
-      obj.setPositionByOrigin(point, "left", "top");
-    };
+    const getAlignmentBoundary = () => canvas2.getObjects().find((o2) => o2.name === "workarea");
     const applyAlign = (align) => {
-      const workarea = getWorkarea2();
-      if (!workarea) return;
-      const left = workarea.left ?? 0;
-      const top = workarea.top ?? 0;
-      const width = workarea.getScaledWidth();
-      const height = workarea.getScaledHeight();
+      const boundary = getAlignmentBoundary();
+      if (!boundary) return;
+      const bBounds = boundary.getBoundingRect();
+      const bLeft = bBounds.left;
+      const bTop = bBounds.top;
+      const bWidth = bBounds.width;
+      const bHeight = bBounds.height;
       getTargets().forEach((obj) => {
-        normalizeOrigin(obj);
-        const w2 = obj.getScaledWidth();
-        const h2 = obj.getScaledHeight();
+        const objBounds = obj.getBoundingRect();
+        const pad = obj.padding || 0;
+        const effLeft = objBounds.left - pad;
+        const effTop = objBounds.top - pad;
+        const effWidth = objBounds.width + pad * 2;
+        const effHeight = objBounds.height + pad * 2;
+        let dx = 0;
+        let dy = 0;
         switch (align) {
           case "left":
-            obj.set({ left });
+            dx = bLeft - effLeft;
             break;
           case "center":
-            obj.set({ left: left + (width - w2) / 2 });
+            dx = bLeft + (bWidth - effWidth) / 2 - effLeft;
             break;
           case "right":
-            obj.set({ left: left + width - w2 });
+            dx = bLeft + bWidth - effWidth - effLeft;
             break;
           case "top":
-            obj.set({ top });
+            dy = bTop - effTop;
             break;
           case "middle":
-            obj.set({ top: top + (height - h2) / 2 });
+            dy = bTop + (bHeight - effHeight) / 2 - effTop;
             break;
           case "bottom":
-            obj.set({ top: top + height - h2 });
+            dy = bTop + bHeight - effHeight - effTop;
             break;
         }
+        if (dx !== 0) {
+          obj.set({ left: (obj.left ?? 0) + dx });
+        }
+        if (dy !== 0) {
+          obj.set({ top: (obj.top ?? 0) + dy });
+        }
         obj.setCoords();
       });
       canvas2.requestRenderAll();
@@ -158798,42 +159333,40 @@ ${elements2.join("\n")}
       const objects = active.getObjects();
       if (objects.length && objects.length > 1) {
         objects.forEach(function(obj) {
-          const itemWidth = obj.getBoundingRect().width;
+          const itemWidth = obj.getScaledWidth();
+          const itemHeight = obj.getScaledHeight();
+          obj.set({ originX: "center", originY: "center" });
           switch (align) {
             case "left":
-              obj.set({ left: -(groupWidth / 2), originX: "left" });
+              obj.set({ left: -groupWidth / 2 + itemWidth / 2 });
               break;
             case "center":
-              obj.set({ left: 0 - itemWidth / 2, originX: "left" });
+              obj.set({ left: 0 });
               break;
             case "right":
-              obj.set({
-                left: groupWidth / 2 - itemWidth / 2,
-                originX: "center"
-              });
+              obj.set({ left: groupWidth / 2 - itemWidth / 2 });
               break;
             case "top":
-              obj.set({ originY: "top", top: -groupHeight / 2 });
-              break;
-            case "bottom":
-              obj.set({ originY: "bottom", top: groupHeight / 2 });
+              obj.set({ top: -groupHeight / 2 + itemHeight / 2 });
               break;
             case "middle":
-              obj.set({
-                originY: "center",
-                top: -groupHeight / 2 + groupHeight / 2
-              });
+              obj.set({ top: 0 });
+              break;
+            case "bottom":
+              obj.set({ top: groupHeight / 2 - itemHeight / 2 });
               break;
           }
           obj.setCoords();
-          canvas2.requestRenderAll();
-          saveState();
         });
+        active.setCoords();
+        canvas2.requestRenderAll();
+        saveState();
       }
     };
     const bringForward = () => {
       const objects = canvas2.getObjects();
       [...getTargets()].sort((a2, b2) => objects.indexOf(a2) - objects.indexOf(b2)).reverse().forEach((obj) => canvas2.bringObjectForward(obj, true));
+      bringOverlaysToFront(canvas2);
       canvas2.requestRenderAll();
       saveState();
     };
@@ -158862,6 +159395,7 @@ ${elements2.join("\n")}
     const bringToFront = () => {
       const objects = canvas2.getObjects();
       [...getTargets()].sort((a2, b2) => objects.indexOf(a2) - objects.indexOf(b2)).reverse().forEach((obj) => canvas2.bringObjectToFront(obj));
+      bringOverlaysToFront(canvas2);
       canvas2.requestRenderAll();
       saveState();
     };
@@ -159216,6 +159750,7 @@ ${elements2.join("\n")}
         canvas2.add(group);
       }
       canvas2.setActiveObject(group);
+      bringOverlaysToFront(canvas2);
       canvas2.requestRenderAll();
       useSelectionStore.getState().setSelection([group]);
       saveState();
@@ -159367,6 +159902,9 @@ ${elements2.join("\n")}
     obj.__rotationControlSize = rotationSize;
     obj.controls.mtr = createRotateControl(rotationSize, rotationOffset);
     const textObject = isTextObject(obj);
+    if (textObject) {
+      obj.set({ padding: 0 });
+    }
     if (!obj.controls.mb) {
       obj.controls.mb = new ai({
         x: 0,
@@ -159485,6 +160023,7 @@ ${elements2.join("\n")}
       });
       canvas2.discardActiveObject();
       useSelectionStore.getState().clearSelection();
+      bringOverlaysToFront(canvas2);
       canvas2.requestRenderAll();
       saveState();
     };
@@ -159594,12 +160133,31 @@ ${elements2.join("\n")}
     ) });
   }
   function applyOpacity(hex, opacity) {
-    const alpha = Math.max(0, Math.min(1, opacity / 100));
-    const r2 = parseInt(hex.slice(1, 3), 16);
-    const g2 = parseInt(hex.slice(3, 5), 16);
-    const b2 = parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r2}, ${g2}, ${b2}, ${alpha})`;
-  }
+    const alpha = Math.max(0, Math.min(1, (opacity ?? 100) / 100));
+    if (!hex) return `rgba(0, 0, 0, ${alpha})`;
+    let clean = hex.trim();
+    if (clean.startsWith("#")) {
+      clean = clean.slice(1);
+      if (clean.length === 3) {
+        clean = clean.split("").map((c2) => c2 + c2).join("");
+      }
+      if (clean.length >= 6) {
+        const r2 = parseInt(clean.slice(0, 2), 16) || 0;
+        const g2 = parseInt(clean.slice(2, 4), 16) || 0;
+        const b2 = parseInt(clean.slice(4, 6), 16) || 0;
+        return `rgba(${r2}, ${g2}, ${b2}, ${alpha})`;
+      }
+    }
+    return clean;
+  }
+  const PENCIL_CURSOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" fill="#ffffff" stroke="#ffffff" stroke-width="2.5" stroke-linejoin="round"/>
+  <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" fill="#1e293b" stroke="#0f172a" stroke-width="1.2" stroke-linejoin="round"/>
+  <polygon points="2,22 5.5,20 4,18.5" fill="#f59e0b"/>
+  <polygon points="2,22 3.2,21.3 2.7,20.8" fill="#000000"/>
+  <path d="m15 5 4 4" stroke="#94a3b8" stroke-width="1.2" stroke-linecap="round"/>
+</svg>`;
+  const PENCIL_CURSOR = `url("data:image/svg+xml;utf8,${encodeURIComponent(PENCIL_CURSOR_SVG)}") 2 22, crosshair`;
   function useFabricDrawing() {
     const { drawTool, strokeWidth, opacity, color } = useDrawStore();
     React.useEffect(() => {
@@ -159609,19 +160167,99 @@ ${elements2.join("\n")}
         canvas2.isDrawingMode = false;
         canvas2.selection = true;
         canvas2.defaultCursor = "default";
+        canvas2.freeDrawingCursor = "default";
+        canvas2.setCursor("default");
+        if (canvas2.upperCanvasEl) {
+          canvas2.upperCanvasEl.style.cursor = "default";
+        }
+        canvas2._isCurrentlyDrawing = false;
         return;
       }
+      if (canvas2.getActiveObject()) {
+        canvas2.discardActiveObject();
+        useSelectionStore.getState().clearSelection();
+        canvas2.requestRenderAll();
+      }
+      const activeCursor = drawTool === "brush" ? PENCIL_CURSOR : "crosshair";
       canvas2.isDrawingMode = true;
       canvas2.selection = false;
-      canvas2.defaultCursor = "crosshair";
+      canvas2.defaultCursor = activeCursor;
+      canvas2.freeDrawingCursor = activeCursor;
+      canvas2.setCursor(activeCursor);
+      if (canvas2.upperCanvasEl) {
+        canvas2.upperCanvasEl.style.cursor = activeCursor;
+      }
       const brush = new oo(canvas2);
-      brush.width = strokeWidth;
-      brush.color = applyOpacity(color, opacity);
       if (drawTool === "highlighter") {
         brush.width = strokeWidth * 1.5;
-        brush.color = applyOpacity(color, 30);
+        brush.color = applyOpacity(color, opacity ?? 50);
+      } else {
+        brush.width = strokeWidth;
+        brush.color = applyOpacity(color, opacity ?? 100);
       }
       canvas2.freeDrawingBrush = brush;
+      const handleMouseDownBefore = (opt) => {
+        if (!canvas2.isDrawingMode) return;
+        const target = opt.target || canvas2.findTarget(opt.e);
+        if (!target) return;
+        const name = target.name || "";
+        if (name === "workarea" || name === "watermark" || name.startsWith("overlay-") || name.startsWith("guideline-")) {
+          return;
+        }
+        if (target.isDrawingPath || name === "drawing-path") {
+          return;
+        }
+        if (target.selectable !== false && target.evented !== false) {
+          canvas2.isDrawingMode = false;
+          canvas2.selection = true;
+          canvas2.defaultCursor = "default";
+          canvas2.freeDrawingCursor = "default";
+          canvas2.setCursor("default");
+          if (canvas2.upperCanvasEl) {
+            canvas2.upperCanvasEl.style.cursor = "default";
+          }
+          canvas2._isCurrentlyDrawing = false;
+          useDrawStore.getState().setDrawTool("select");
+          canvas2.setActiveObject(target);
+          canvas2.requestRenderAll();
+        }
+      };
+      const handlePathCreated = (e2) => {
+        if (e2?.path) {
+          e2.path.name = "drawing-path";
+          e2.path.isDrawingPath = true;
+        }
+      };
+      const handleSelectionChange = () => {
+        if (useDrawStore.getState().drawTool !== "select") {
+          useDrawStore.getState().setDrawTool("select");
+        }
+        if (canvas2.isDrawingMode) {
+          canvas2.isDrawingMode = false;
+          canvas2.selection = true;
+          canvas2.defaultCursor = "default";
+          canvas2.freeDrawingCursor = "default";
+          canvas2.setCursor("default");
+          if (canvas2.upperCanvasEl) {
+            canvas2.upperCanvasEl.style.cursor = "default";
+          }
+          canvas2._isCurrentlyDrawing = false;
+          canvas2.requestRenderAll();
+        }
+      };
+      canvas2.on("mouse:down:before", handleMouseDownBefore);
+      canvas2.on("path:created", handlePathCreated);
+      canvas2.on("selection:created", handleSelectionChange);
+      canvas2.on("selection:updated", handleSelectionChange);
+      return () => {
+        canvas2.off("mouse:down:before", handleMouseDownBefore);
+        canvas2.off("path:created", handlePathCreated);
+        canvas2.off("selection:created", handleSelectionChange);
+        canvas2.off("selection:updated", handleSelectionChange);
+        if (canvas2.upperCanvasEl) {
+          canvas2.upperCanvasEl.style.cursor = "default";
+        }
+      };
     }, [drawTool, strokeWidth, opacity, color]);
   }
   function PointerIcon() {
@@ -159652,6 +160290,89 @@ ${elements2.join("\n")}
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" })
     ] });
   }
+  function GridIcon({
+    size = 18,
+    className = ""
+  }) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 9h18" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 15h18" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3v18" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 3v18" })
+        ]
+      }
+    );
+  }
+  function getGridStep(width, height) {
+    const minDim = Math.min(width, height);
+    if (minDim <= 200) return 10;
+    if (minDim <= 400) return 20;
+    if (minDim <= 800) return 25;
+    return 40;
+  }
+  function renderGrid(canvas2) {
+    if (!canvas2) return;
+    canvas2.getObjects().forEach((o2) => {
+      if (o2.name === "canvas-grid") {
+        canvas2.remove(o2);
+      }
+    });
+    const showGrid = useEditorStore.getState().showGrid;
+    if (!showGrid) {
+      canvas2.requestRenderAll();
+      return;
+    }
+    const workarea = canvas2.getObjects().find((o2) => o2.name === "workarea");
+    if (!workarea) {
+      canvas2.requestRenderAll();
+      return;
+    }
+    const waL = workarea.left ?? 0;
+    const waT = workarea.top ?? 0;
+    const waW = workarea.getScaledWidth();
+    const waH = workarea.getScaledHeight();
+    if (waW <= 0 || waH <= 0) return;
+    const step = getGridStep(waW, waH);
+    let pathData = "";
+    for (let x2 = step; x2 < waW; x2 += step) {
+      const roundX = Math.round(x2 * 100) / 100;
+      pathData += `M ${roundX} 0 V ${waH} `;
+    }
+    for (let y2 = step; y2 < waH; y2 += step) {
+      const roundY = Math.round(y2 * 100) / 100;
+      pathData += `M 0 ${roundY} H ${waW} `;
+    }
+    if (!pathData) return;
+    const gridPath = new no(pathData, {
+      name: "canvas-grid",
+      left: waL,
+      top: waT,
+      originX: "left",
+      originY: "top",
+      stroke: "rgba(100, 116, 139, 0.28)",
+      strokeWidth: 1,
+      fill: "",
+      selectable: false,
+      evented: false,
+      excludeFromExport: true
+    });
+    canvas2.add(gridPath);
+    bringOverlaysToFront(canvas2);
+    canvas2.requestRenderAll();
+  }
   function enablePanMode(canvas2) {
     let isDragging = false;
     let lastClientX = 0;
@@ -159913,16 +160634,186 @@ ${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) => {
       const target = e2?.target;
       if (!target) return;
       const name = target.name || "";
-      if (name === "workarea" || name === "watermark" || name.startsWith("overlay-") || name.startsWith("guideline-")) {
+      if (name === "workarea" || name === "watermark" || name === "bg-image" || name.startsWith("overlay-") || name.startsWith("guideline-") || name === "canvas-grid") {
         return;
       }
       if (useHistoryStore.getState().isRestoring) return;
+      flushBackgroundSave();
       if (modifiedTimer) {
         clearTimeout(modifiedTimer);
         modifiedTimer = null;
@@ -159937,7 +160828,7 @@ ${elements2.join("\n")}
       const target = e2?.target;
       if (!target) return;
       const name = target.name || "";
-      if (name === "workarea" || name === "watermark" || name.startsWith("overlay-") || name.startsWith("guideline-")) {
+      if (name === "workarea" || name === "watermark" || name.startsWith("overlay-") || name.startsWith("guideline-") || name === "canvas-grid") {
         return;
       }
       if (useHistoryStore.getState().isRestoring) return;
@@ -159960,6 +160851,12 @@ ${elements2.join("\n")}
   }
   function setupDoublClickCrop(canvas2) {
     const handleDoubleClick = (e2) => {
+      const isCropping = useEditorStore.getState().isCropping;
+      if (isCropping) {
+        applyCrop(canvas2);
+        useEditorStore.getState().stopCropping();
+        return;
+      }
       const target = e2.target;
       if (target && target.type === "image" && target.name !== "bg-image") {
         useEditorStore.getState().startCropping();
@@ -160005,6 +160902,13 @@ ${elements2.join("\n")}
       canvas2.requestRenderAll();
     };
     canvas2.on("selection:created", (e2) => {
+      if (useDrawStore.getState().drawTool !== "select") {
+        useDrawStore.getState().setDrawTool("select");
+        canvas2.isDrawingMode = false;
+        canvas2.selection = true;
+        canvas2.defaultCursor = "default";
+        canvas2._isCurrentlyDrawing = false;
+      }
       if (e2.selected) {
         e2.selected.forEach((o2) => {
           o2.__showDegree = false;
@@ -160012,8 +160916,16 @@ ${elements2.join("\n")}
       }
       updateSelection();
       configureSelectionControls();
+      bringOverlaysToFront(canvas2);
     });
     canvas2.on("selection:updated", (e2) => {
+      if (useDrawStore.getState().drawTool !== "select") {
+        useDrawStore.getState().setDrawTool("select");
+        canvas2.isDrawingMode = false;
+        canvas2.selection = true;
+        canvas2.defaultCursor = "default";
+        canvas2._isCurrentlyDrawing = false;
+      }
       const active = canvas2.getActiveObject();
       const bgImg = canvas2.getObjects().find((o2) => o2.name === "bg-image");
       if (bgImg && active !== bgImg) {
@@ -160034,6 +160946,7 @@ ${elements2.join("\n")}
       }
       updateSelection();
       configureSelectionControls();
+      bringOverlaysToFront(canvas2);
     });
     canvas2.on("object:scaling", configureSelectionControls);
     canvas2.on("object:rotating", (e2) => {
@@ -160050,10 +160963,23 @@ ${elements2.join("\n")}
         o2.__showDegree = false;
       });
       configureSelectionControls();
+      bringOverlaysToFront(canvas2);
     };
-    canvas2.on("object:modified", hideDegree);
-    canvas2.on("mouse:up", hideDegree);
+    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", 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({
@@ -160067,22 +160993,27 @@ ${elements2.join("\n")}
         }
       }
       hideDegree();
+      bringOverlaysToFront(canvas2);
       clearSelection();
     });
     return () => {
+      clearAlignmentGuidelines(canvas2);
       canvas2.off("selection:created");
       canvas2.off("selection:updated");
       canvas2.off("object:scaling", configureSelectionControls);
       canvas2.off("object:rotating");
-      canvas2.off("object:modified", hideDegree);
-      canvas2.off("mouse:up", hideDegree);
+      canvas2.off("object:moving", handleObjectMoving);
+      canvas2.off("object:modified", handleMovementEnd);
+      canvas2.off("mouse:up", handleMovementEnd);
       canvas2.off("selection:cleared");
     };
   }
   function setupObjectAddedHandler(canvas2) {
     const handleObjectAdded = (e2) => {
       const obj = e2.target;
-      if (!obj || obj.name === "workarea") return;
+      if (!obj || obj.name === "workarea" || obj.name?.startsWith("overlay-") || obj.name?.startsWith("guideline-")) {
+        return;
+      }
       configureObjectControls(obj);
       bringOverlaysToFront(canvas2);
     };
@@ -160130,6 +161061,9 @@ ${elements2.join("\n")}
     "lockMovementY",
     "rx",
     "ry",
+    "src",
+    "crossOrigin",
+    "__maskPath",
     "__radiusOfCanvas",
     "__shapeType",
     "__pageSide",
@@ -160140,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 {
@@ -160576,41 +161528,75 @@ ${elements2.join("\n")}
     ] }) });
   }
   const OFFSET = 20;
-  function useKeyboardEvents(canvas2) {
-    const clipboardRef = React.useRef(null);
+  let globalClipboard = null;
+  let clipboardSourcePage = null;
+  function useKeyboardEvents(canvasParam) {
+    const storeCanvas = useEditorStore((s2) => s2.canvas);
+    const historyCanvas = useHistoryStore((s2) => s2.canvas);
+    const canvas2 = canvasParam || storeCanvas || historyCanvas;
     const saveState = useHistoryStore((s2) => s2.saveState);
     React.useEffect(() => {
-      if (!canvas2) return;
+      const getActiveCanvas = () => canvas2 || useEditorStore.getState().canvas || useHistoryStore.getState().canvas;
       const handleCopy = async () => {
-        const activeObject = canvas2.getActiveObject();
+        const activeCanvas = getActiveCanvas();
+        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 () => {
-        if (!clipboardRef.current) return;
-        const clonedObj = await clipboardRef.current.clone();
-        canvas2.discardActiveObject();
+        const activeCanvas = getActiveCanvas();
+        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 = canvas2;
-          clonedObj.forEachObject((obj) => {
-            canvas2.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 {
-          canvas2.add(clonedObj);
+          await ensureTextLoaded(clonedObj);
+          clonedObj.setCoords();
+          activeCanvas.add(clonedObj);
         }
-        canvas2.setActiveObject(clonedObj);
-        canvas2.requestRenderAll();
+        activeCanvas.setActiveObject(clonedObj);
+        bringOverlaysToFront(activeCanvas);
+        activeCanvas.requestRenderAll();
         saveState();
       };
       const handleKeyDown = (e2) => {
@@ -160618,25 +161604,53 @@ ${elements2.join("\n")}
         const isInput = activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement || activeElement?.isContentEditable;
         if (isInput) return;
         const isModifier = e2.ctrlKey || e2.metaKey;
-        if (isModifier && e2.key.toLowerCase() === "c") {
+        if (!isModifier) return;
+        const isZ = e2.key?.toLowerCase() === "z" || e2.code === "KeyZ";
+        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();
+          return;
+        }
+        if (isZ && e2.shiftKey || isY) {
+          e2.preventDefault();
+          useHistoryStore.getState().redoAction();
+          return;
+        }
+        if (isC) {
           e2.preventDefault();
           handleCopy();
+          return;
         }
-        if (isModifier && e2.key.toLowerCase() === "v") {
+        if (isV) {
           e2.preventDefault();
           handlePaste();
+          return;
         }
-        if (isModifier && e2.key.toLowerCase() === "z") {
-          e2.preventDefault();
-          if (e2.shiftKey) {
-            useHistoryStore.getState().redoAction();
-          } else {
-            useHistoryStore.getState().undo();
+        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;
         }
-        if (isModifier && e2.key.toLowerCase() === "y") {
+        const isQuote = e2.key === "'" || e2.code === "Quote";
+        if (isQuote) {
           e2.preventDefault();
-          useHistoryStore.getState().redoAction();
+          useEditorStore.getState().toggleGrid();
+          return;
         }
       };
       window.addEventListener("keydown", handleKeyDown);
@@ -160652,17 +161666,23 @@ ${elements2.join("\n")}
     const workareaRef = React.useRef(null);
     const panHandlersRef = React.useRef(null);
     const isCropping = useEditorStore((s2) => s2.isCropping);
+    const canvas2 = useEditorStore((s2) => s2.canvas);
     const setCanvas = useEditorStore((s2) => s2.setCanvas);
+    const showGrid = useEditorStore((s2) => s2.showGrid);
+    const toggleGrid = useEditorStore((s2) => s2.toggleGrid);
     const setSelection = useSelectionStore((s2) => s2.setSelection);
     const clearSelection = useSelectionStore((s2) => s2.clearSelection);
+    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;
@@ -160704,20 +161724,20 @@ ${elements2.join("\n")}
           }
           if (!isMounted || !canvasRef.current || !containerRef.current || fabricRef.current) return;
           initializeRotateImage();
-          const canvas2 = initializeCanvas(canvasRef.current, containerRef.current);
-          fabricRef.current = canvas2;
-          setCanvas(canvas2);
-          useHistoryStore.getState().setCanvas(canvas2);
-          const workarea = createWorkarea(canvas2, containerRef.current, product);
+          const canvas22 = initializeCanvas(canvasRef.current, containerRef.current);
+          fabricRef.current = canvas22;
+          setCanvas(canvas22);
+          useHistoryStore.getState().setCanvas(canvas22);
+          const workarea = createWorkarea(canvas22, containerRef.current, product);
           workareaRef.current = workarea;
-          const cleanupHistory = setupHistoryRecording(canvas2);
-          const cleanupCrop = setupDoublClickCrop(canvas2);
+          const cleanupHistory = setupHistoryRecording(canvas22);
+          const cleanupCrop = setupDoublClickCrop(canvas22);
           const cleanupSelection = setupSelectionHandlers(
-            canvas2,
+            canvas22,
             setSelection,
             clearSelection
           );
-          const cleanupObjectAdded = setupObjectAddedHandler(canvas2);
+          const cleanupObjectAdded = setupObjectAddedHandler(canvas22);
           if (isTextDesign && templateId) {
             const item = await ShapeService.getTextTemplateById(templateId);
             if (item?.jsonData) {
@@ -160725,7 +161745,7 @@ ${elements2.join("\n")}
               pageJSON.current.front = parsed;
               await loadTemplateFontsIntoHead(null, parsed);
               useHistoryStore.setState({ isRestoring: true });
-              await loadPageToCanvas(canvas2, parsed);
+              await loadPageToCanvas(canvas22, parsed);
               useHistoryStore.setState({ isRestoring: false });
               useHistoryStore.getState().saveState();
             }
@@ -160746,7 +161766,7 @@ ${elements2.join("\n")}
             if (frontData) {
               pageJSON.current.front = frontData;
               useHistoryStore.setState({ isRestoring: true });
-              await loadPageToCanvas(canvas2, frontData);
+              await loadPageToCanvas(canvas22, frontData);
               useHistoryStore.setState({ isRestoring: false });
               useHistoryStore.getState().saveState();
             }
@@ -160763,10 +161783,10 @@ ${elements2.join("\n")}
             cleanupCrop();
             cleanupSelection();
             cleanupObjectAdded();
-            if (canvas2.__cleanupResizeObserver) {
-              canvas2.__cleanupResizeObserver();
+            if (canvas22.__cleanupResizeObserver) {
+              canvas22.__cleanupResizeObserver();
             }
-            canvas2.dispose();
+            canvas22.dispose();
             fabricRef.current = null;
             setCanvas(null);
             clearSelection();
@@ -160804,23 +161824,30 @@ ${elements2.join("\n")}
       return setupBorderSync(fabricRef.current);
     }, [fabricRef.current]);
     React.useEffect(() => {
-      const canvas2 = fabricRef.current;
-      if (!canvas2) return;
-      removePanHandlers(canvas2, panHandlersRef.current);
+      const canvas22 = fabricRef.current;
+      if (!canvas22) return;
+      removePanHandlers(canvas22, panHandlersRef.current);
       panHandlersRef.current = null;
       if (isPanning) {
-        panHandlersRef.current = enablePanMode(canvas2);
+        panHandlersRef.current = enablePanMode(canvas22);
       } else {
-        disablePanMode(canvas2);
+        disablePanMode(canvas22);
       }
       return () => {
-        removePanHandlers(canvas2, panHandlersRef.current);
+        removePanHandlers(canvas22, panHandlersRef.current);
       };
     }, [isPanning]);
     useFabricDrawing();
-    useKeyboardEvents(fabricRef.current);
+    useKeyboardEvents(canvas2 || fabricRef.current);
+    React.useEffect(() => {
+      const activeCanvas = canvas2 || fabricRef.current;
+      if (activeCanvas) {
+        renderGrid(activeCanvas);
+      }
+    }, [showGrid, canvas2, currentPage]);
     const switchPage = async (page) => {
       if (!fabricRef.current) return;
+      setDrawTool("select");
       await switchCanvasPage(
         fabricRef.current,
         currentPage,
@@ -160831,10 +161858,50 @@ ${elements2.join("\n")}
       );
       useEditorStore.getState().setPages({ ...pageJSON.current });
       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",
             {
@@ -160850,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" }),
@@ -160857,20 +161955,35 @@ ${elements2.join("\n")}
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
-              onClick: () => setIsPanning(false),
+              onClick: () => {
+                setIsPanning(false);
+                setDrawTool("select");
+              },
               title: "Selection Mode",
-              className: `p-2 rounded-xl transition-all duration-200 ${!isPanning ? "bg-[#02bc71] text-white shadow-lg shadow-blue-200" : "text-gray-400 hover:bg-gray-100 hover:text-gray-600"}`,
+              className: `p-2 rounded-xl transition-all duration-200 cursor-pointer ${!isPanning && drawTool === "select" ? "bg-[#02bc71] text-white shadow-lg shadow-green-200" : "text-gray-400 hover:bg-gray-100 hover:text-gray-600"}`,
               children: /* @__PURE__ */ jsxRuntime.jsx(PointerIcon, {})
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
-              onClick: () => setIsPanning(true),
+              onClick: () => {
+                setIsPanning(true);
+                setDrawTool("select");
+              },
               title: "Hand Mode",
-              className: `p-2 rounded-xl transition-all duration-200 ${isPanning ? "bg-[#02bc71] text-white shadow-lg shadow-blue-200" : "text-gray-400 hover:bg-gray-100 hover:text-gray-600"}`,
+              className: `p-2 rounded-xl transition-all duration-200 cursor-pointer ${isPanning ? "bg-[#02bc71] text-white shadow-lg shadow-green-200" : "text-gray-400 hover:bg-gray-100 hover:text-gray-600"}`,
               children: /* @__PURE__ */ jsxRuntime.jsx(HandIcon, {})
             }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => toggleGrid(),
+              title: showGrid ? "Hide Grid (Ctrl+')" : "Show Grid (Ctrl+')",
+              className: `p-2 rounded-xl transition-all duration-200 cursor-pointer ${showGrid ? "bg-[#02bc71] text-white shadow-lg shadow-green-200" : "text-gray-400 hover:bg-gray-100 hover:text-gray-600"}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(GridIcon, {})
+            }
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[1px] h-6 bg-gray-300/50 mx-3" }),