vibrant-tool 0.1.9 → 0.1.11

package/dist/vibrant-tool.es.js

@@ -1123,11 +1123,25 @@ const useEditorStore = create((set, get) => ({
     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) => {
@@ -8442,6 +8456,7 @@ function createShapeCornerOverlays(shape, bounds, pageSide = "front", overlayCol
     originX: "left",
     originY: "top",
     fill: overlayColor,
+    opacity: 0.6,
     strokeWidth: 0,
     selectable: false,
     evented: false,
@@ -8493,6 +8508,7 @@ function createShapeCornerOverlays(shape, bounds, pageSide = "front", overlayCol
         originX: "left",
         originY: "top",
         fill: overlayColor,
+        opacity: 0.6,
         strokeWidth: 0,
         selectable: false,
         evented: false,
@@ -8789,6 +8805,7 @@ function createOverlays(canvas2, workarea, pageSide) {
   const overlayColor = canvas2.backgroundColor || "#F3F4F6";
   const makeOverlay = (props) => new jr({
     fill: overlayColor,
+    opacity: 0.6,
     selectable: false,
     evented: false,
     excludeFromExport: true,
@@ -8862,10 +8879,14 @@ function createOverlays(canvas2, workarea, pageSide) {
   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";
@@ -8996,6 +9017,248 @@ const useProductStore = create((set) => ({
     }
   }
 }));
+const FontService = {
+  async getAll(data) {
+    const res = await apiFetch(`/api/fonts?page=${data.page}&limit=${data.limit}&status=true`, {
+      method: "GET"
+    });
+    return res;
+  }
+};
+let cachedFontsPromise = null;
+async function fetchAllFontsCached() {
+  if (!cachedFontsPromise) {
+    cachedFontsPromise = FontService.getAll({ page: 1, limit: 1e3 }).then((res) => res?.data || []).catch((err) => {
+      console.warn("Failed to fetch all fonts:", err);
+      cachedFontsPromise = null;
+      return [];
+    });
+  }
+  return cachedFontsPromise;
+}
+async function injectFontFace(fontName, fontUrl) {
+  if (!fontName || !fontUrl || typeof document === "undefined") return;
+  const cleanedName = fontName.trim().replace(/^['"]+|['"]+$/g, "");
+  const id = `font-${cleanedName.replace(/\s+/g, "-").toLowerCase()}`;
+  if (!document.getElementById(id)) {
+    const style = document.createElement("style");
+    style.id = id;
+    style.innerHTML = `
+      @font-face {
+        font-family: '${cleanedName}';
+        src: url('${fontUrl}');
+        font-display: swap;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  try {
+    await document.fonts.load(`16px "${cleanedName}"`);
+    await document.fonts.ready;
+  } catch {
+  }
+}
+async function loadTemplateFontsIntoHead(templateFonts, pagesDesignData) {
+  if (typeof document === "undefined") return;
+  const loadPromises = [];
+  if (Array.isArray(templateFonts) && templateFonts.length > 0) {
+    templateFonts.forEach((f) => {
+      if (f && typeof f === "object") {
+        const fontName = f.fontName || f.fontFamily;
+        const fontUrl = f.fontFile;
+        if (fontName && fontUrl) {
+          loadPromises.push(injectFontFace(fontName, fontUrl));
+        }
+        if (f.fontFamily && f.fontFamily !== fontName && fontUrl) {
+          loadPromises.push(injectFontFace(f.fontFamily, fontUrl));
+        }
+      }
+    });
+  }
+  const designs = Array.isArray(pagesDesignData) ? pagesDesignData : [pagesDesignData];
+  const usedFontNames = /* @__PURE__ */ new Set();
+  designs.forEach((d2) => {
+    if (d2) {
+      const extracted = extractFontFamilies(d2);
+      extracted.forEach((name) => usedFontNames.add(name));
+    }
+  });
+  if (usedFontNames.size > 0) {
+    try {
+      const allFonts = await fetchAllFontsCached();
+      usedFontNames.forEach((name) => {
+        const lower = name.toLowerCase();
+        const matched = allFonts.find((f) => {
+          if (f.fontName && f.fontName.toLowerCase() === lower) return true;
+          if (f.fontFamily && f.fontFamily.toLowerCase() === lower) return true;
+          const children = f.childFonts || f.chieldFonts || [];
+          return children.some(
+            (c2) => c2.fontName && c2.fontName.toLowerCase() === lower || c2.fontFamily && c2.fontFamily.toLowerCase() === lower
+          );
+        });
+        if (matched) {
+          if (matched.fontName && matched.fontFile) {
+            loadPromises.push(injectFontFace(matched.fontName, matched.fontFile));
+          }
+          if (matched.fontFamily && matched.fontFile) {
+            loadPromises.push(injectFontFace(matched.fontFamily, matched.fontFile));
+          }
+          const children = matched.childFonts || matched.chieldFonts || [];
+          children.forEach((c2) => {
+            if (c2.fontName && c2.fontFile) {
+              loadPromises.push(injectFontFace(c2.fontName, c2.fontFile));
+            }
+          });
+        }
+      });
+    } catch (err) {
+      console.warn("Failed to fetch fonts list for font injection:", err);
+    }
+  }
+  await Promise.allSettled(loadPromises);
+  try {
+    await document.fonts.ready;
+  } catch {
+  }
+}
+function extractFontFamilies(designJson) {
+  if (!designJson) return [];
+  const fonts = /* @__PURE__ */ new Set();
+  const traverse = (obj) => {
+    if (!obj) return;
+    if (obj.fontFamily && typeof obj.fontFamily === "string") {
+      const cleaned = obj.fontFamily.trim().replace(/^['"]+|['"]+$/g, "");
+      if (cleaned) fonts.add(cleaned);
+    }
+    if (obj.fontId && typeof obj.fontId === "string") {
+      fonts.add(obj.fontId.trim());
+    }
+    if (obj.styles && typeof obj.styles === "object") {
+      Object.values(obj.styles).forEach((line) => {
+        if (line && typeof line === "object") {
+          Object.values(line).forEach((charStyle) => {
+            if (charStyle?.fontFamily && typeof charStyle.fontFamily === "string") {
+              const cleaned = charStyle.fontFamily.trim().replace(/^['"]+|['"]+$/g, "");
+              if (cleaned) fonts.add(cleaned);
+            }
+          });
+        }
+      });
+    }
+    if (Array.isArray(obj.objects)) {
+      obj.objects.forEach(traverse);
+    }
+  };
+  if (Array.isArray(designJson.objects)) {
+    designJson.objects.forEach(traverse);
+  } else if (Array.isArray(designJson)) {
+    designJson.forEach(traverse);
+  } else {
+    traverse(designJson);
+  }
+  return Array.from(fonts);
+}
+async function resolveFontIds(fontNames) {
+  if (!fontNames || !fontNames.length) return [];
+  try {
+    const allFonts = await fetchAllFontsCached();
+    const matchedIds = /* @__PURE__ */ new Set();
+    for (const rawName of fontNames) {
+      const name = rawName.trim().replace(/^['"]+|['"]+$/g, "");
+      const lower = name.toLowerCase();
+      if (/^[0-9a-fA-F]{24}$/.test(name)) {
+        matchedIds.add(name);
+        continue;
+      }
+      const matchedFont = allFonts.find((f) => {
+        if (f._id === name) return true;
+        if (f.fontFamily && f.fontFamily.toLowerCase() === lower) return true;
+        if (f.fontName && f.fontName.toLowerCase() === lower) return true;
+        const children = f.childFonts || f.chieldFonts || [];
+        return children.some(
+          (c2) => c2._id === name || c2.fontName && c2.fontName.toLowerCase() === lower || c2.fontFamily && c2.fontFamily.toLowerCase() === lower
+        );
+      });
+      if (matchedFont?._id) {
+        matchedIds.add(matchedFont._id);
+      }
+    }
+    return Array.from(matchedIds);
+  } catch (err) {
+    console.warn("Failed to resolve font IDs:", err);
+    return [];
+  }
+}
+async function resolveFontsForExport(designs, templateFonts) {
+  const result = [];
+  const foundNames = /* @__PURE__ */ new Set();
+  if (Array.isArray(templateFonts) && templateFonts.length > 0) {
+    templateFonts.forEach((f) => {
+      if (f && typeof f === "object") {
+        const fontName = f.fontName || f.fontFamily;
+        const fontFile = f.fontFile;
+        if (fontName && fontFile) {
+          result.push({ fontName, fontFamily: f.fontFamily, fontFile });
+          foundNames.add(fontName.toLowerCase());
+          if (f.fontFamily) foundNames.add(f.fontFamily.toLowerCase());
+        }
+      }
+    });
+  }
+  const usedFontNames = /* @__PURE__ */ new Set();
+  const designsArr = Array.isArray(designs) ? designs : [designs];
+  designsArr.forEach((d2) => {
+    if (d2) {
+      const extracted = extractFontFamilies(d2);
+      extracted.forEach((name) => {
+        if (!foundNames.has(name.toLowerCase())) {
+          usedFontNames.add(name);
+        }
+      });
+    }
+  });
+  if (usedFontNames.size > 0) {
+    try {
+      const allFonts = await fetchAllFontsCached();
+      usedFontNames.forEach((name) => {
+        const lower = name.toLowerCase();
+        const matched = allFonts.find((f) => {
+          if (f.fontName && f.fontName.toLowerCase() === lower) return true;
+          if (f.fontFamily && f.fontFamily.toLowerCase() === lower) return true;
+          const children = f.childFonts || f.chieldFonts || [];
+          return children.some(
+            (c2) => c2.fontName && c2.fontName.toLowerCase() === lower || c2.fontFamily && c2.fontFamily.toLowerCase() === lower
+          );
+        });
+        if (matched) {
+          if (matched.fontName && matched.fontFile && !foundNames.has(matched.fontName.toLowerCase())) {
+            result.push({
+              fontName: matched.fontName,
+              fontFamily: matched.fontFamily,
+              fontFile: matched.fontFile
+            });
+            foundNames.add(matched.fontName.toLowerCase());
+          }
+          const children = matched.childFonts || matched.chieldFonts || [];
+          children.forEach((c2) => {
+            const childName = c2.fontName || name;
+            if (c2.fontFile && !foundNames.has(childName.toLowerCase())) {
+              result.push({
+                fontName: childName,
+                fontFamily: c2.fontFamily,
+                fontFile: c2.fontFile
+              });
+              foundNames.add(childName.toLowerCase());
+            }
+          });
+        }
+      });
+    } catch (err) {
+      console.warn("Failed to resolve fonts for export:", err);
+    }
+  }
+  return result;
+}
 async function loadPageToCanvas(canvas2, json, pageSide) {
   if (!canvas2) return;
   canvas2.discardActiveObject();
@@ -9003,6 +9266,7 @@ async function loadPageToCanvas(canvas2, json, pageSide) {
   if (json) {
     try {
       const parsedJson = typeof json === "string" ? JSON.parse(json) : json;
+      await loadTemplateFontsIntoHead(null, parsedJson);
       const loadPromise = canvas2.loadFromJSON(parsedJson);
       const timeoutPromise = new Promise(
         (_2, reject) => setTimeout(() => reject(new Error("Canvas loadFromJSON timeout")), 4e3)
@@ -9102,12 +9366,16 @@ async function loadPageToCanvas(canvas2, json, pageSide) {
       }
     }
     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,
@@ -9245,6 +9513,77 @@ async function renderPageDataUrl(json, baseCanvas, multiplier = 1, targetSide, i
     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",
@@ -9255,6 +9594,9 @@ const HISTORY_CUSTOM_PROPERTIES = [
   "lockMovementY",
   "rx",
   "ry",
+  "src",
+  "crossOrigin",
+  "__maskPath",
   "__radiusOfCanvas",
   "__shapeType",
   "__pageSide",
@@ -9265,7 +9607,24 @@ const HISTORY_CUSTOM_PROPERTIES = [
   "__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,
@@ -9288,11 +9647,12 @@ const useHistoryStore = create((set, get) => ({
   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 ?? [];
@@ -9312,10 +9672,12 @@ const useHistoryStore = create((set, get) => ({
   },
   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({
@@ -9329,8 +9691,8 @@ const useHistoryStore = create((set, get) => ({
       }
     });
     try {
-      await loadPageToCanvas(canvas2, previous, currentPage);
-      canvas2.requestRenderAll();
+      await loadPageToCanvas(targetCanvas, previous, currentPage);
+      targetCanvas.requestRenderAll();
       const editorStore = useEditorStore.getState();
       if (editorStore.pages) {
         editorStore.setPages({
@@ -9346,10 +9708,12 @@ const useHistoryStore = create((set, get) => ({
   },
   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,
@@ -9362,8 +9726,8 @@ const useHistoryStore = create((set, get) => ({
       }
     });
     try {
-      await loadPageToCanvas(canvas2, next, currentPage);
-      canvas2.requestRenderAll();
+      await loadPageToCanvas(targetCanvas, next, currentPage);
+      targetCanvas.requestRenderAll();
       const editorStore = useEditorStore.getState();
       if (editorStore.pages) {
         editorStore.setPages({
@@ -9378,248 +9742,6 @@ const useHistoryStore = create((set, get) => ({
     }
   }
 }));
-const FontService = {
-  async getAll(data) {
-    const res = await apiFetch(`/api/fonts?page=${data.page}&limit=${data.limit}&status=true`, {
-      method: "GET"
-    });
-    return res;
-  }
-};
-let cachedFontsPromise = null;
-async function fetchAllFontsCached() {
-  if (!cachedFontsPromise) {
-    cachedFontsPromise = FontService.getAll({ page: 1, limit: 1e3 }).then((res) => res?.data || []).catch((err) => {
-      console.warn("Failed to fetch all fonts:", err);
-      cachedFontsPromise = null;
-      return [];
-    });
-  }
-  return cachedFontsPromise;
-}
-async function injectFontFace(fontName, fontUrl) {
-  if (!fontName || !fontUrl || typeof document === "undefined") return;
-  const cleanedName = fontName.trim().replace(/^['"]+|['"]+$/g, "");
-  const id = `font-${cleanedName.replace(/\s+/g, "-").toLowerCase()}`;
-  if (!document.getElementById(id)) {
-    const style = document.createElement("style");
-    style.id = id;
-    style.innerHTML = `
-      @font-face {
-        font-family: '${cleanedName}';
-        src: url('${fontUrl}');
-        font-display: swap;
-      }
-    `;
-    document.head.appendChild(style);
-  }
-  try {
-    await document.fonts.load(`16px "${cleanedName}"`);
-    await document.fonts.ready;
-  } catch {
-  }
-}
-async function loadTemplateFontsIntoHead(templateFonts, pagesDesignData) {
-  if (typeof document === "undefined") return;
-  const loadPromises = [];
-  if (Array.isArray(templateFonts) && templateFonts.length > 0) {
-    templateFonts.forEach((f) => {
-      if (f && typeof f === "object") {
-        const fontName = f.fontName || f.fontFamily;
-        const fontUrl = f.fontFile;
-        if (fontName && fontUrl) {
-          loadPromises.push(injectFontFace(fontName, fontUrl));
-        }
-        if (f.fontFamily && f.fontFamily !== fontName && fontUrl) {
-          loadPromises.push(injectFontFace(f.fontFamily, fontUrl));
-        }
-      }
-    });
-  }
-  const designs = Array.isArray(pagesDesignData) ? pagesDesignData : [pagesDesignData];
-  const usedFontNames = /* @__PURE__ */ new Set();
-  designs.forEach((d2) => {
-    if (d2) {
-      const extracted = extractFontFamilies(d2);
-      extracted.forEach((name) => usedFontNames.add(name));
-    }
-  });
-  if (usedFontNames.size > 0) {
-    try {
-      const allFonts = await fetchAllFontsCached();
-      usedFontNames.forEach((name) => {
-        const lower = name.toLowerCase();
-        const matched = allFonts.find((f) => {
-          if (f.fontName && f.fontName.toLowerCase() === lower) return true;
-          if (f.fontFamily && f.fontFamily.toLowerCase() === lower) return true;
-          const children = f.childFonts || f.chieldFonts || [];
-          return children.some(
-            (c2) => c2.fontName && c2.fontName.toLowerCase() === lower || c2.fontFamily && c2.fontFamily.toLowerCase() === lower
-          );
-        });
-        if (matched) {
-          if (matched.fontName && matched.fontFile) {
-            loadPromises.push(injectFontFace(matched.fontName, matched.fontFile));
-          }
-          if (matched.fontFamily && matched.fontFile) {
-            loadPromises.push(injectFontFace(matched.fontFamily, matched.fontFile));
-          }
-          const children = matched.childFonts || matched.chieldFonts || [];
-          children.forEach((c2) => {
-            if (c2.fontName && c2.fontFile) {
-              loadPromises.push(injectFontFace(c2.fontName, c2.fontFile));
-            }
-          });
-        }
-      });
-    } catch (err) {
-      console.warn("Failed to fetch fonts list for font injection:", err);
-    }
-  }
-  await Promise.allSettled(loadPromises);
-  try {
-    await document.fonts.ready;
-  } catch {
-  }
-}
-function extractFontFamilies(designJson) {
-  if (!designJson) return [];
-  const fonts = /* @__PURE__ */ new Set();
-  const traverse = (obj) => {
-    if (!obj) return;
-    if (obj.fontFamily && typeof obj.fontFamily === "string") {
-      const cleaned = obj.fontFamily.trim().replace(/^['"]+|['"]+$/g, "");
-      if (cleaned) fonts.add(cleaned);
-    }
-    if (obj.fontId && typeof obj.fontId === "string") {
-      fonts.add(obj.fontId.trim());
-    }
-    if (obj.styles && typeof obj.styles === "object") {
-      Object.values(obj.styles).forEach((line) => {
-        if (line && typeof line === "object") {
-          Object.values(line).forEach((charStyle) => {
-            if (charStyle?.fontFamily && typeof charStyle.fontFamily === "string") {
-              const cleaned = charStyle.fontFamily.trim().replace(/^['"]+|['"]+$/g, "");
-              if (cleaned) fonts.add(cleaned);
-            }
-          });
-        }
-      });
-    }
-    if (Array.isArray(obj.objects)) {
-      obj.objects.forEach(traverse);
-    }
-  };
-  if (Array.isArray(designJson.objects)) {
-    designJson.objects.forEach(traverse);
-  } else if (Array.isArray(designJson)) {
-    designJson.forEach(traverse);
-  } else {
-    traverse(designJson);
-  }
-  return Array.from(fonts);
-}
-async function resolveFontIds(fontNames) {
-  if (!fontNames || !fontNames.length) return [];
-  try {
-    const allFonts = await fetchAllFontsCached();
-    const matchedIds = /* @__PURE__ */ new Set();
-    for (const rawName of fontNames) {
-      const name = rawName.trim().replace(/^['"]+|['"]+$/g, "");
-      const lower = name.toLowerCase();
-      if (/^[0-9a-fA-F]{24}$/.test(name)) {
-        matchedIds.add(name);
-        continue;
-      }
-      const matchedFont = allFonts.find((f) => {
-        if (f._id === name) return true;
-        if (f.fontFamily && f.fontFamily.toLowerCase() === lower) return true;
-        if (f.fontName && f.fontName.toLowerCase() === lower) return true;
-        const children = f.childFonts || f.chieldFonts || [];
-        return children.some(
-          (c2) => c2._id === name || c2.fontName && c2.fontName.toLowerCase() === lower || c2.fontFamily && c2.fontFamily.toLowerCase() === lower
-        );
-      });
-      if (matchedFont?._id) {
-        matchedIds.add(matchedFont._id);
-      }
-    }
-    return Array.from(matchedIds);
-  } catch (err) {
-    console.warn("Failed to resolve font IDs:", err);
-    return [];
-  }
-}
-async function resolveFontsForExport(designs, templateFonts) {
-  const result = [];
-  const foundNames = /* @__PURE__ */ new Set();
-  if (Array.isArray(templateFonts) && templateFonts.length > 0) {
-    templateFonts.forEach((f) => {
-      if (f && typeof f === "object") {
-        const fontName = f.fontName || f.fontFamily;
-        const fontFile = f.fontFile;
-        if (fontName && fontFile) {
-          result.push({ fontName, fontFamily: f.fontFamily, fontFile });
-          foundNames.add(fontName.toLowerCase());
-          if (f.fontFamily) foundNames.add(f.fontFamily.toLowerCase());
-        }
-      }
-    });
-  }
-  const usedFontNames = /* @__PURE__ */ new Set();
-  const designsArr = Array.isArray(designs) ? designs : [designs];
-  designsArr.forEach((d2) => {
-    if (d2) {
-      const extracted = extractFontFamilies(d2);
-      extracted.forEach((name) => {
-        if (!foundNames.has(name.toLowerCase())) {
-          usedFontNames.add(name);
-        }
-      });
-    }
-  });
-  if (usedFontNames.size > 0) {
-    try {
-      const allFonts = await fetchAllFontsCached();
-      usedFontNames.forEach((name) => {
-        const lower = name.toLowerCase();
-        const matched = allFonts.find((f) => {
-          if (f.fontName && f.fontName.toLowerCase() === lower) return true;
-          if (f.fontFamily && f.fontFamily.toLowerCase() === lower) return true;
-          const children = f.childFonts || f.chieldFonts || [];
-          return children.some(
-            (c2) => c2.fontName && c2.fontName.toLowerCase() === lower || c2.fontFamily && c2.fontFamily.toLowerCase() === lower
-          );
-        });
-        if (matched) {
-          if (matched.fontName && matched.fontFile && !foundNames.has(matched.fontName.toLowerCase())) {
-            result.push({
-              fontName: matched.fontName,
-              fontFamily: matched.fontFamily,
-              fontFile: matched.fontFile
-            });
-            foundNames.add(matched.fontName.toLowerCase());
-          }
-          const children = matched.childFonts || matched.chieldFonts || [];
-          children.forEach((c2) => {
-            const childName = c2.fontName || name;
-            if (c2.fontFile && !foundNames.has(childName.toLowerCase())) {
-              result.push({
-                fontName: childName,
-                fontFamily: c2.fontFamily,
-                fontFile: c2.fontFile
-              });
-              foundNames.add(childName.toLowerCase());
-            }
-          });
-        }
-      });
-    } catch (err) {
-      console.warn("Failed to resolve fonts for export:", err);
-    }
-  }
-  return result;
-}
 const WATERMARK_TEXT = "vibrantprintshop";
 function createWatermark(curWorkarea, pageSide) {
   const curW = curWorkarea.getScaledWidth ? curWorkarea.getScaledWidth() : curWorkarea.width * (curWorkarea.scaleX || 1);
@@ -9663,7 +9785,7 @@ function triggerDownload(url, filename) {
 }
 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(),
@@ -9712,8 +9834,18 @@ function exportDesignJSON(canvas2, workarea) {
 }
 const ShapeService = {
   async getAll(data) {
+    const params = new URLSearchParams();
+    if (data.page) params.append("page", String(data.page));
+    if (data.limit) params.append("limit", String(data.limit));
+    if (data.category && data.category !== "ALL" && data.category !== "null" && data.category !== "undefined") {
+      params.append("category", data.category);
+    }
+    if (data.search && data.search.trim()) {
+      params.append("search", data.search.trim());
+    }
+    params.append("status", "true");
     const res = await apiFetch(
-      `/api/cliparts?page=${data.page}&limit=${data.limit}&category=${data.category}&status=true`,
+      `/api/cliparts?${params.toString()}`,
       {
         method: "GET"
       }
@@ -9723,8 +9855,17 @@ const ShapeService = {
     };
   },
   async getAllExternal(data) {
+    const params = new URLSearchParams();
+    if (data.page) params.append("page", String(data.page));
+    if (data.limit) params.append("limit", String(data.limit));
+    if (data.keyType) params.append("keyType", data.keyType);
+    if (data.isVector) params.append("isVector", "true");
+    if (data.query && data.query.trim()) {
+      params.append("query", data.query.trim());
+    }
+    params.append("status", "true");
     const res = await apiFetch(
-      `/api/external/images?page=${data.page}&limit=${data.limit}&keyType=${data.keyType}&status=true${data.query ? `&query=${data.query}` : ""}`,
+      `/api/external/images?${params.toString()}`,
       {
         method: "GET"
       }
@@ -9888,6 +10029,7 @@ async function addImageToCanvas(url) {
     });
     canvas2.add(img);
     canvas2.setActiveObject(img);
+    bringOverlaysToFront(canvas2);
     canvas2.requestRenderAll();
   }).catch((err) => {
     console.warn("Fabric failed to load image from URL:", url, err);
@@ -9910,7 +10052,7 @@ function captureWorkareaSVG(canvas2, workarea, pageSide) {
   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,
@@ -101804,8 +101946,43 @@ function TemplateMockupModal({
       if (!uploadedImageUrl) {
         throw new Error("Server upload returned empty image URL");
       }
+      const canvas22 = useEditorStore.getState().canvas;
+      if (!templateId || !canvas22) return;
+      const { pages: historyPages, currentPage } = useHistoryStore.getState();
+      const editorPages = useEditorStore.getState().pages || {};
+      const currentJson = canvas22.toObject(["name"]);
+      const currentImage = getWorkareaDataUrl(canvas22, 1, currentPage);
+      const pages = await Promise.all(
+        ["front", "back"].map(async (side, i) => {
+          const isCurrent = currentPage === side;
+          const designData = isCurrent ? currentJson : editorPages[side] || historyPages[side]?.history?.at(-1) || null;
+          if (!designData) return null;
+          const sideImage = isCurrent ? currentImage : await renderPageDataUrl(designData, canvas22, 1, side);
+          const uploadedImageUrl2 = await UploadService.uploadDataUrl(
+            sideImage,
+            `template-${templateId}-${side}-${Date.now()}.png`
+          );
+          return {
+            side,
+            designData,
+            image: uploadedImageUrl2,
+            order: i + 1
+          };
+        })
+      );
+      const validPages = pages.filter(Boolean);
+      const usedFontNames = /* @__PURE__ */ new Set();
+      validPages.forEach((p2) => {
+        if (p2?.designData) {
+          const fontsInPage = extractFontFamilies(p2.designData);
+          fontsInPage.forEach((f) => usedFontNames.add(f));
+        }
+      });
+      const resolvedFontIds = await resolveFontIds(Array.from(usedFontNames));
       const res = await TemplateDesignService.updateTemplateDesign(templateId, {
-        image: uploadedImageUrl
+        image: uploadedImageUrl,
+        pages: validPages,
+        fonts: resolvedFontIds
       });
       if (res && res.success) {
         setGenerateSuccess(true);
@@ -102010,6 +102187,16 @@ function Topbar() {
   const resetTour = useTourStore((s2) => s2.reset);
   const templateId = getQueryParam("templateId") || getQueryParam("id");
   const designType = (getQueryParam("designType") || getQueryParam("designtype") || getQueryParam("type"))?.toLowerCase();
+  const handleLeavePage = () => {
+    if (designType === "text") {
+      spaNavigate("/design-configuration/text-templates");
+      return;
+    }
+    if (designType === "template") {
+      spaNavigate("/design-configuration/template-designs");
+      return;
+    }
+  };
   const handleSaveTextTemplate = async () => {
     const canvas2 = useEditorStore.getState().canvas;
     if (!templateId || !canvas2) return;
@@ -102104,8 +102291,42 @@ function Topbar() {
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "w-full h-14 bg-[#111] text-white flex items-center justify-between px-4 border-b border-gray-800 relative z-[9999] whitespace-nowrap", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 shrink-0", children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold", children: "Vibrant" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 shrink-0", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          id: "topbar-back-button",
+          type: "button",
+          onClick: handleLeavePage,
+          disabled: isSaving,
+          className: `flex items-center gap-1.5 px-2.5 py-1.5 bg-[#222] hover:bg-[#2c2c2c] active:bg-[#1a1a1a] text-gray-300 hover:text-white border border-gray-700/70 hover:border-gray-500 rounded-lg text-xs font-medium transition-all group shadow-sm ${isSaving ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+          title: "Back / Leave page",
+          "aria-label": "Back / Leave page",
+          children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-4 h-4 transition-transform duration-150 group-hover:-translate-x-0.5 text-gray-300 group-hover:text-white",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 2.2,
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M10 19l-7-7m0 0l7-7m-7 7h18"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "font-semibold tracking-wide", children: "Back" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-gray-700/80 hidden sm:block" }),
+      /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "Vibrant" }),
       /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-gray-600 hidden md:block" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 shrink-0 ml-4", children: [
@@ -102390,7 +102611,23 @@ const UploadIcon = () => /* @__PURE__ */ jsx(
 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 }) {
@@ -102456,43 +102693,6 @@ function Panel({ panelName }) {
     ] })
   ] });
 }
-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();
@@ -102500,6 +102700,7 @@ function TemplatesPanel() {
   const [page, setPage] = useState(1);
   const scrollRef = useRef(null);
   const [hasMore, setHasMore] = useState(true);
+  const templateId = getQueryParam("templateId");
   useEffect(() => {
     if (!productData?._id) return;
     startLoading();
@@ -102591,7 +102792,7 @@ function TemplatesPanel() {
       )
     ] }),
     /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "h-[calc(100vh-125px)] overflow-auto custom-scrollbar", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pb-12 mx-4", children: [
-      templates.map((tpl) => /* @__PURE__ */ jsx(
+      templates.filter((t2) => t2.image && t2._id !== templateId).map((tpl) => /* @__PURE__ */ jsx(
         "button",
         {
           className: "rounded overflow-hidden group relative cursor-pointer border border-transparent hover:border-[#02bc71] transition-all",
@@ -102933,6 +103134,7 @@ async function addSVGToCanvas(type = "svg", url) {
   svg.setCoords();
   canvas2.add(svg);
   canvas2.setActiveObject(svg);
+  bringOverlaysToFront(canvas2);
   useSelectionStore.getState().setSelection([svg]);
   canvas2.requestRenderAll();
 }
@@ -102983,6 +103185,7 @@ async function renderSVGStringToCanvas(type = "svg", svg, options = {}) {
   group.setCoords();
   canvas2.add(group);
   canvas2.setActiveObject(group);
+  bringOverlaysToFront(canvas2);
   useSelectionStore.getState().setSelection([group]);
   canvas2.requestRenderAll();
   return group;
@@ -103052,26 +103255,63 @@ function AllElements({
   elements: elements2,
   onBack,
   scrollRef,
-  onSearch
+  onSearch,
+  initialSearch = "",
+  title,
+  backText
 }) {
-  const [search, setSearch] = useState("");
-  const { isLoading } = useLoaderStore.getState();
+  const [search, setSearch] = useState(initialSearch);
+  const { isLoading } = useLoaderStore();
   const { addRecentItem } = useRecentElementsStore();
+  useEffect(() => {
+    setSearch(initialSearch);
+  }, [initialSearch]);
   const clearSearch = () => {
     setSearch("");
     onSearch("");
   };
-  const handleChange = useCallback(
-    (e3) => {
-      const value = e3.target.value;
-      setSearch(value);
-      onSearch(value.trim());
-    },
-    [onSearch]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { onClick: onBack, className: "cursor-pointer mx-4 mb-2", children: "← Back" }),
-    /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800 px-3 py-2 rounded flex items-center gap-2 mb-4 mx-4 relative", children: [
+  const handleSearchSubmit = () => {
+    onSearch(search.trim());
+  };
+  const handleKeyDown = (e3) => {
+    e3.stopPropagation();
+    if (e3.key === "Enter") {
+      handleSearchSubmit();
+    }
+  };
+  const dynamicBackLabel = backText || (title ? title : "Back");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "mx-4 mb-2.5 flex items-center", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        className: "cursor-pointer flex items-center gap-1.5 text-xs font-semibold text-neutral-300 hover:text-white transition-colors group",
+        title: `Back to ${dynamicBackLabel}`,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "group-hover:-translate-x-0.5 transition-transform text-neutral-400 group-hover:text-white",
+              children: [
+                /* @__PURE__ */ jsx("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+                /* @__PURE__ */ jsx("polyline", { points: "12 19 5 12 12 5" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "capitalize truncate max-w-[240px]", children: dynamicBackLabel })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800 px-3 py-2 rounded flex items-center gap-2 mb-4 mx-4 relative focus-within:ring-1 focus-within:ring-neutral-600", children: [
       /* @__PURE__ */ jsxs(
         "svg",
         {
@@ -103079,7 +103319,8 @@ function AllElements({
           stroke: "currentColor",
           fill: "none",
           viewBox: "0 0 24 24",
-          className: "text-gray-300",
+          className: "text-gray-400 shrink-0 cursor-pointer hover:text-white transition-colors",
+          onClick: handleSearchSubmit,
           children: [
             /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
             /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
@@ -103091,9 +103332,10 @@ function AllElements({
         {
           type: "text",
           value: search,
-          onChange: handleChange,
-          onKeyDown: (e3) => e3.stopPropagation(),
-          className: "bg-transparent outline-none text-sm text-gray-300 w-full pr-8"
+          onChange: (e3) => setSearch(e3.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder: title ? `Search in ${title}...` : "Search elements & shapes...",
+          className: "bg-transparent outline-none text-sm text-gray-200 placeholder-gray-500 w-full pr-8"
         }
       ),
       search && /* @__PURE__ */ jsx(
@@ -103101,13 +103343,13 @@ function AllElements({
         {
           type: "button",
           onClick: clearSearch,
-          className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white transition-colors p-1",
+          className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white transition-colors p-1 cursor-pointer",
           "aria-label": "Clear search",
           children: /* @__PURE__ */ jsxs(
             "svg",
             {
-              width: "16",
-              height: "16",
+              width: "14",
+              height: "14",
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
@@ -103121,9 +103363,20 @@ function AllElements({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-    /* @__PURE__ */ jsx("div", { className: "h-[calc(100vh-160px)] overflow-auto", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "mx-4 py-5", children: elements2.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm text-center", children: "No results found" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-5", children: elements2.map((shape, i) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px] border-neutral-800" }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-auto custom-scrollbar", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "mx-4 py-5", children: elements2.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "py-12 text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm", children: search.trim() ? `No results found for "${search}"` : "No elements found" }),
+      search.trim() && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: clearSearch,
+          className: "mt-3 text-xs text-emerald-400 hover:underline cursor-pointer",
+          children: "Clear search"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: elements2.map((shape, i) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -103138,21 +103391,22 @@ function AllElements({
               useSidePanelStore.getState().setActivePanel(null);
             }
           },
-          className: "w-full cursor-pointer flex items-center justify-center",
+          className: "w-full cursor-pointer flex items-center justify-center p-2 rounded-lg bg-neutral-900/40 hover:bg-neutral-800 border border-neutral-800/60 hover:border-neutral-700 transition-colors",
           children: shape.image && /* @__PURE__ */ jsx(
             "img",
             {
               src: shape.image,
-              alt: shape.category,
+              alt: shape.category || "element",
               width: 150,
               height: 150,
-              className: "w-full h-24 object-contain"
+              className: "w-full h-20 object-contain",
+              loading: "lazy"
             }
           )
         },
-        i
+        shape._id || shape.image || i
       )) }),
-      isLoading && /* @__PURE__ */ jsx("div", { className: "text-center py-4 text-sm text-gray-400", children: "Loading more..." })
+      isLoading && /* @__PURE__ */ jsx("div", { className: "text-center py-4 text-xs text-gray-400 animate-pulse", children: "Loading more elements..." })
     ] }) }) })
   ] });
 }
@@ -103185,72 +103439,181 @@ function ElementsPanel() {
   const [page, setPage] = useState(1);
   const [category, setCategory] = useState(null);
   const [keyType, setKeyType] = useState(null);
-  const [error2, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [mainSearch, setMainSearch] = useState("");
+  const [isViewingAll, setIsViewingAll] = useState(false);
+  const [title, setTitle] = useState("");
   const [hasMore, setHasMore] = useState(true);
   const scrollRef = useRef(null);
-  const getSVG = async (type = null, categoryValue, pageNo = 1) => {
+  const getSVG = async (type = null, categoryValue = null, searchVal = null, pageNo = 1) => {
     startLoading();
     if (pageNo === 1) {
       setHasMore(true);
       setPage(1);
       setCategory(categoryValue);
+      setKeyType(type);
+      setSearchQuery(searchVal || "");
+    }
+    if (categoryValue === "Recent items") {
+      const q2 = (searchVal || "").toLowerCase().trim();
+      const filtered = q2 ? recentItems.filter(
+        (item) => item.category?.toLowerCase().includes(q2) || item.tags?.some((t2) => t2.toLowerCase().includes(q2))
+      ) : recentItems;
+      setElementsSVG(filtered);
+      setHasMore(false);
+      stopLoading();
+      return;
     }
-    const request = type ? ShapeService.getAllExternal({
-      isVector: true,
-      page: pageNo,
-      limit: 30,
-      keyType: type,
-      query: categoryValue || null
-    }) : ShapeService.getAll({
-      category: categoryValue,
-      page: pageNo,
-      limit: 30
-    });
-    request.then((res) => {
-      const items = res.items;
+    try {
+      const request = type ? ShapeService.getAllExternal({
+        isVector: true,
+        page: pageNo,
+        limit: 30,
+        keyType: type,
+        query: searchVal || categoryValue || null
+      }) : ShapeService.getAll({
+        category: categoryValue || null,
+        search: searchVal || null,
+        page: pageNo,
+        limit: 30
+      });
+      const res = await request;
+      const items = res.items || [];
       const newItems = items.filter((x2) => x2.status && x2.image);
       setElementsSVG(
         (prev) => pageNo === 1 ? newItems : [...prev, ...newItems]
       );
       if (newItems.length < 20) setHasMore(false);
-    }).catch((err) => setError(err.message)).finally(() => stopLoading());
+      else setHasMore(true);
+    } catch (err) {
+      console.error("Failed to load elements:", err);
+      if (pageNo === 1) setElementsSVG([]);
+      setHasMore(false);
+    } finally {
+      stopLoading();
+    }
   };
   useEffect(() => {
     const el = scrollRef.current;
-    if (!el) return;
+    if (!el || !isViewingAll) return;
     const onScroll = () => {
       if (!hasMore || isLoading) return;
       if (el.scrollTop + el.clientHeight >= el.scrollHeight - 200) {
-        const next = page + 1;
-        setPage(next);
-        getSVG(keyType, category, next);
+        setPage((prev) => {
+          const next = prev + 1;
+          getSVG(keyType, category, searchQuery, next);
+          return next;
+        });
       }
     };
     el.addEventListener("scroll", onScroll);
     return () => el.removeEventListener("scroll", onScroll);
-  }, [hasMore, isLoading]);
-  if (elementsSVG.length > 0) {
+  }, [hasMore, isLoading, isViewingAll, keyType, category, searchQuery]);
+  const handleMainSearch = (val) => {
+    const q2 = val.trim();
+    if (!q2) return;
+    setIsViewingAll(true);
+    setTitle(`Search: "${q2}"`);
+    getSVG(null, null, q2, 1);
+  };
+  const handleBack = () => {
+    if (searchQuery && category && category !== "Recent items") {
+      setSearchQuery("");
+      setPage(1);
+      setTitle(category);
+      getSVG(keyType, category, "", 1);
+      return;
+    }
+    setIsViewingAll(false);
+    setElementsSVG([]);
+    setCategory(null);
+    setKeyType(null);
+    setSearchQuery("");
+    setMainSearch("");
+    setTitle("");
+    setPage(1);
+    setHasMore(true);
+  };
+  if (isViewingAll) {
     return /* @__PURE__ */ jsx(
       AllElements,
       {
         elements: elementsSVG,
         scrollRef,
+        title,
+        backText: title || "Elements",
+        initialSearch: searchQuery,
         onSearch: (value) => {
-          setPage(1);
-          setHasMore(true);
-          getSVG(keyType, value ? value : category, 1);
+          if (value.trim()) {
+            setTitle(category ? `${category} - "${value.trim()}"` : `Search: "${value.trim()}"`);
+          } else {
+            setTitle(
+              category || (keyType === "pixabay" ? "Pixabay Vectors" : keyType === "flat" ? "FlatIcon Icons" : "All Elements")
+            );
+          }
+          getSVG(keyType, category, value, 1);
         },
-        onBack: () => {
-          setElementsSVG([]);
-          setPage(1);
-          setCategory(null);
-          setKeyType(null);
-          setHasMore(true);
-        }
+        onBack: handleBack
       }
     );
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800 px-3 py-2 rounded flex items-center gap-2 mb-4 mx-4 relative focus-within:ring-1 focus-within:ring-neutral-600", children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "18",
+          stroke: "currentColor",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          className: "text-gray-400 shrink-0",
+          children: [
+            /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+            /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search elements & shapes...",
+          value: mainSearch,
+          onChange: (e3) => setMainSearch(e3.target.value),
+          onKeyDown: (e3) => {
+            e3.stopPropagation();
+            if (e3.key === "Enter" && mainSearch.trim()) {
+              handleMainSearch(mainSearch.trim());
+            }
+          },
+          className: "bg-transparent outline-none text-sm text-gray-200 placeholder-gray-500 w-full pr-7"
+        }
+      ),
+      mainSearch && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMainSearch(""),
+          className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors p-1 cursor-pointer",
+          "aria-label": "Clear search",
+          children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [
+                /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ]
+            }
+          )
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "pb-5 mx-4", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-md font-medium mb-3", children: "Upload From Other Media" }),
       /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
@@ -103258,11 +103621,13 @@ function ElementsPanel() {
           "button",
           {
             type: "button",
-            className: "cursor-pointer",
+            className: "cursor-pointer hover:opacity-80 transition-opacity",
             onClick: () => {
-              setKeyType("pixabay");
-              getSVG("pixabay", "", 1);
+              setIsViewingAll(true);
+              setTitle("Pixabay Vectors");
+              getSVG("pixabay", "", "", 1);
             },
+            title: "Search Pixabay Vectors",
             children: /* @__PURE__ */ jsx(PixabayIcon, {})
           }
         ),
@@ -103270,11 +103635,13 @@ function ElementsPanel() {
           "button",
           {
             type: "button",
-            className: "cursor-pointer",
+            className: "cursor-pointer hover:opacity-80 transition-opacity",
             onClick: () => {
-              setKeyType("flat");
-              getSVG("flat", "", 1);
+              setIsViewingAll(true);
+              setTitle("FlatIcon Icons");
+              getSVG("flat", "", "", 1);
             },
+            title: "Search FlatIcon Icons",
             children: /* @__PURE__ */ jsx(
               "img",
               {
@@ -103289,20 +103656,21 @@ function ElementsPanel() {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-    /* @__PURE__ */ jsxs("div", { className: "h-[calc(100dvh-180px)] overflow-auto custom-scrollbar", children: [
+    /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px] border-neutral-800" }),
+    /* @__PURE__ */ jsxs("div", { className: "h-[calc(100dvh-200px)] overflow-auto custom-scrollbar", children: [
       recentItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "py-5", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold mb-3", children: "Recent items" }),
             recentItems.length > 3 && /* @__PURE__ */ jsx(
-              "div",
+              "button",
               {
-                className: "underline cursor-pointer",
+                type: "button",
+                className: "underline text-xs text-neutral-400 hover:text-white cursor-pointer",
                 onClick: () => {
-                  setElementsSVG(recentItems);
-                  setCategory("Recent items");
-                  setHasMore(false);
+                  setIsViewingAll(true);
+                  setTitle("Recent items");
+                  getSVG(null, "Recent items", "", 1);
                 },
                 children: "View all"
               }
@@ -103311,36 +103679,45 @@ function ElementsPanel() {
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: recentItems.slice(0, 3).map((shape, i) => /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               onClick: () => {
                 addSVGToCanvas("svg", shape.image);
                 addRecentItem(shape);
+                if (window.innerWidth < 768) {
+                  useSidePanelStore.getState().setActivePanel(null);
+                }
               },
-              className: "w-full cursor-pointer flex items-center justify-center",
+              className: "w-full cursor-pointer flex items-center justify-center p-2 rounded-lg bg-neutral-900/40 hover:bg-neutral-800 border border-neutral-800/60 hover:border-neutral-700 transition-colors",
               children: /* @__PURE__ */ jsx(
                 "img",
                 {
                   src: shape.image,
-                  alt: shape.category,
+                  alt: shape.category || "recent element",
                   width: 150,
                   height: 150,
-                  className: "w-full h-24 object-contain"
+                  className: "w-full h-20 object-contain"
                 }
               )
             },
             shape._id || shape.image || i
           )) })
         ] }),
-        /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" })
+        /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px] border-neutral-800" })
       ] }),
       elements.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "py-5", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold mb-3", children: item.category }),
             /* @__PURE__ */ jsx(
-              "div",
+              "button",
               {
-                className: "underline cursor-pointer",
-                onClick: () => getSVG(null, item?.category, 1),
+                type: "button",
+                className: "underline text-xs text-neutral-400 hover:text-white cursor-pointer",
+                onClick: () => {
+                  setIsViewingAll(true);
+                  setTitle(item.category);
+                  getSVG(null, item.category, "", 1);
+                },
                 children: "View all"
               }
             )
@@ -103348,6 +103725,7 @@ function ElementsPanel() {
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: item.data.map((shape, j2) => /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               onClick: () => {
                 addSVGToCanvas("svg", shape.image);
                 addRecentItem({
@@ -103358,8 +103736,11 @@ function ElementsPanel() {
                   largeImage: shape.image,
                   tags: []
                 });
+                if (window.innerWidth < 768) {
+                  useSidePanelStore.getState().setActivePanel(null);
+                }
               },
-              className: "w-full cursor-pointer flex items-center justify-center",
+              className: "w-full cursor-pointer flex items-center justify-center p-2 rounded-lg bg-neutral-900/40 hover:bg-neutral-800 border border-neutral-800/60 hover:border-neutral-700 transition-colors",
               children: /* @__PURE__ */ jsx(
                 "img",
                 {
@@ -103367,14 +103748,15 @@ function ElementsPanel() {
                   alt: item.category,
                   width: 150,
                   height: 150,
-                  className: "w-full h-24 object-contain"
+                  className: "w-full h-20 object-contain",
+                  loading: "lazy"
                 }
               )
             },
             j2
           )) })
         ] }),
-        /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" })
+        /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px] border-neutral-800" })
       ] }, i))
     ] })
   ] });
@@ -103387,7 +103769,7 @@ async function addTextToCanvas(fontSize, width, textName) {
   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,
@@ -103400,19 +103782,26 @@ async function addTextToCanvas(fontSize, width, textName) {
     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 {
@@ -103444,6 +103833,7 @@ async function addTextTemplate(id) {
     canvas2.add(...fabricObjects);
     canvas2.renderOnAddRemove = true;
     canvas2.requestRenderAll();
+    useHistoryStore.getState().saveState();
   } catch (err) {
     console.error("Failed to add text template:", err);
   }
@@ -104211,11 +104601,20 @@ function PhotosPanel() {
     }) : !isLoading ? /* @__PURE__ */ 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);
@@ -104227,7 +104626,16 @@ async function addBackgroundImage(url) {
   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);
@@ -104263,12 +104671,14 @@ async function addBackgroundImage(url) {
     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");
@@ -104277,7 +104687,20 @@ async function addBackgroundColor(color) {
     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;
@@ -106037,11 +106460,11 @@ function BackgroundPanel() {
   const [hasMore, setHasMore] = useState(true);
   const [page, setPage] = useState(1);
   const scrollRef = 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);
@@ -106094,7 +106517,7 @@ function BackgroundPanel() {
         CMYKColorPicker,
         {
           value: "#ffffff",
-          onChange: (hex) => handleApplyBackground("color", hex)
+          onChange: (hex) => handleApplyBackground("color", hex, false)
         }
       ),
       CMYK_SAFE_COLORS.map(({ hex, label }) => /* @__PURE__ */ jsx(
@@ -106102,7 +106525,7 @@ function BackgroundPanel() {
         {
           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
@@ -106118,7 +106541,7 @@ function BackgroundPanel() {
             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);
             }
@@ -106214,24 +106637,6 @@ function UploadPanel() {
     )) })
   ] });
 }
-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,
@@ -106246,7 +106651,7 @@ function DrawPanel() {
   const isDisabled = drawTool === "select";
   const TOOLS = [
     { key: "select", label: "✦ Selection" },
-    { key: "brush", label: "🖊 Brush" },
+    { key: "brush", label: "✏️ Brush" },
     { key: "highlighter", label: "✎ Highlighter" }
   ];
   return /* @__PURE__ */ jsxs("div", { className: "mx-4 select-none", children: [
@@ -111037,8 +111442,8 @@ function MaskPanel() {
     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,
@@ -111047,6 +111452,8 @@ function MaskPanel() {
       angle: 0
       // Should not inherit angle since the parent handles rotation
     });
+    clipPath.__maskPath = svgPath;
+    obj.__maskPath = svgPath;
     obj.set({ clipPath });
     obj.setCoords();
     canvas2.requestRenderAll();
@@ -156997,7 +157404,7 @@ function SidePanel() {
               id: item.id,
               item,
               isActive: activePanel === item.id,
-              onClick: () => setActivePanel(item.id)
+              onClick: () => setActivePanel(activePanel === item.id ? null : item.id)
             },
             item.id
           )
@@ -157012,7 +157419,7 @@ function SidePanel() {
           item,
           variant: "mobile",
           isActive: activePanel === item.id,
-          onClick: () => setActivePanel(item.id)
+          onClick: () => setActivePanel(activePanel === item.id ? null : item.id)
         },
         item.id
       )
@@ -157138,20 +157545,48 @@ function TextFontSize({
     }
   );
 }
-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__ */ 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__ */ jsx(AlignLeftIcon$1, {}),
-        value === "center" && /* @__PURE__ */ jsx(AlignCenterIcon$1, {}),
-        value === "right" && /* @__PURE__ */ jsx(AlignRightIcon$1, {})
+        /* @__PURE__ */ 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__ */ jsx(AlignLeftIcon$1, {})
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx(AlignCenterIcon$1, {})
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx(AlignRightIcon$1, {})
+          }
+        )
       ]
     }
   );
@@ -157204,15 +157639,29 @@ function TextToolbar() {
   }, [type, objects]);
   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 = useCallback(
     (props) => {
@@ -157220,6 +157669,11 @@ function TextToolbar() {
       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();
     },
@@ -157276,7 +157730,7 @@ function TextToolbar() {
       }
     ),
     /* @__PURE__ */ jsx(
-      TextAlignButton,
+      TextAlignGroup,
       {
         value: align,
         onChange: (v2) => {
@@ -157532,6 +157986,7 @@ class CropService {
   darkOverlay = null;
   focusedImage = null;
   cropZone = null;
+  maskPath = null;
   onEnd = null;
   init(canvas2) {
     this.canvas = canvas2;
@@ -157543,6 +157998,7 @@ class CropService {
     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();
@@ -157559,7 +158015,8 @@ class CropService {
       width: naturalWidth,
       height: naturalHeight,
       selectable: false,
-      evented: false
+      evented: false,
+      clipPath: void 0
     });
     const cropX = image.cropX || 0;
     const cropY = image.cropY || 0;
@@ -157690,14 +158147,31 @@ class CropService {
     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 ======================= */
@@ -157722,11 +158196,13 @@ class CropService {
     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,
@@ -157738,6 +158214,35 @@ class CropService {
       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",
@@ -157746,7 +158251,9 @@ class CropService {
     img.setCoords();
     this.cleanup();
     this.canvas.setActiveObject(img);
+    bringOverlaysToFront(this.canvas);
     this.canvas.requestRenderAll();
+    useHistoryStore.getState().saveState();
     this.onEnd?.();
   }
   /* ======================== CANCEL ========================== */
@@ -157782,6 +158289,7 @@ class CropService {
     this.fullImage = null;
     this.darkOverlay = null;
     this.targetImage = null;
+    this.maskPath = null;
   }
 }
 const cropService = new CropService();
@@ -157868,7 +158376,7 @@ function PictureToolbar() {
   const [isRemovingBg, setIsRemovingBg] = useState(false);
   const [bgStatus, setBgStatus] = 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")
@@ -157877,8 +158385,9 @@ function PictureToolbar() {
     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();
@@ -158149,6 +158658,20 @@ function DuplicateButton() {
   const duplicate = async () => {
     const active = canvas2.getActiveObject();
     if (!active) return;
+    const currentSide = useHistoryStore.getState().currentPage;
+    const ensureTextLoaded = async (obj) => {
+      if (obj.type === "textbox" || obj.type === "text" || obj.type === "i-text") {
+        if (obj.fontFamily) {
+          try {
+            await document.fonts.load(`16px "${obj.fontFamily}"`);
+          } catch {
+          }
+        }
+        obj.initDimensions?.();
+        obj.set("dirty", true);
+      }
+      obj.__pageSide = currentSide;
+    };
     if (active.type?.toLowerCase() === "activeselection") {
       const selection = active;
       const originals = selection.getObjects().filter((o2) => o2.name !== "workarea");
@@ -158156,35 +158679,41 @@ function DuplicateButton() {
       canvas2.discardActiveObject();
       const clones = await Promise.all(
         originals.map(async (obj) => {
-          const cloned2 = await obj.clone();
+          const cloned2 = await obj.clone(HISTORY_CUSTOM_PROPERTIES);
           cloned2.set({
             left: (obj.left ?? 0) + OFFSET$1,
             top: (obj.top ?? 0) + OFFSET$1,
             selectable: true,
             evented: true
           });
+          await ensureTextLoaded(cloned2);
           canvas2.add(cloned2);
           return cloned2;
         })
       );
       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__ */ jsx(
     "button",
@@ -158737,44 +159266,50 @@ function PositionPicker() {
     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();
@@ -158797,42 +159332,40 @@ function PositionPicker() {
     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();
   };
@@ -158861,6 +159394,7 @@ function PositionPicker() {
   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();
   };
@@ -159215,6 +159749,7 @@ function GroupButton() {
       canvas2.add(group);
     }
     canvas2.setActiveObject(group);
+    bringOverlaysToFront(canvas2);
     canvas2.requestRenderAll();
     useSelectionStore.getState().setSelection([group]);
     saveState();
@@ -159366,6 +159901,9 @@ function configureObjectControls(obj) {
   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,
@@ -159484,6 +160022,7 @@ function UngroupButton() {
     });
     canvas2.discardActiveObject();
     useSelectionStore.getState().clearSelection();
+    bringOverlaysToFront(canvas2);
     canvas2.requestRenderAll();
     saveState();
   };
@@ -159593,12 +160132,31 @@ function Toolbar() {
   ) });
 }
 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();
   useEffect(() => {
@@ -159608,19 +160166,99 @@ function useFabricDrawing() {
       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 = (e3) => {
+      if (e3?.path) {
+        e3.path.name = "drawing-path";
+        e3.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() {
@@ -159651,6 +160289,89 @@ function HandIcon() {
     /* @__PURE__ */ 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__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 9h18" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 15h18" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+        /* @__PURE__ */ 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;
@@ -159912,16 +160633,186 @@ function createWorkarea(canvas2, container, productData, pageSide) {
   createOverlays(canvas2, workarea, currentSide);
   return workarea;
 }
+const SNAP_THRESHOLD_PX = 7;
+const GUIDELINE_COLOR = "#28a128";
+const GUIDELINE_WIDTH = 1.2;
+let activeVLine = null;
+let activeHLine = null;
+function clearAlignmentGuidelines(canvas2) {
+  if (!canvas2) return;
+  let changed = false;
+  if (activeVLine) {
+    canvas2.remove(activeVLine);
+    activeVLine = null;
+    changed = true;
+  }
+  if (activeHLine) {
+    canvas2.remove(activeHLine);
+    activeHLine = null;
+    changed = true;
+  }
+  canvas2.getObjects().forEach((o2) => {
+    if (o2.name === "guideline-alignment-v" || o2.name === "guideline-alignment-h") {
+      canvas2.remove(o2);
+      changed = true;
+    }
+  });
+  if (changed) {
+    canvas2.requestRenderAll();
+  }
+}
+function handleObjectAlignmentSnap(canvas2, target) {
+  if (!canvas2 || !target) return;
+  const targetName = target.name || "";
+  if (targetName === "workarea" || targetName === "bg-image" || targetName === "canvas-grid" || targetName.startsWith("overlay-") || targetName.startsWith("guideline-")) {
+    return;
+  }
+  const workarea = canvas2.getObjects().find((o2) => o2.name === "workarea");
+  if (!workarea) return;
+  const zoom = canvas2.getZoom() || 1;
+  const threshold = SNAP_THRESHOLD_PX / zoom;
+  const waL = workarea.left ?? 0;
+  const waT = workarea.top ?? 0;
+  const waW = workarea.getScaledWidth();
+  const waH = workarea.getScaledHeight();
+  const waCenterX = waL + waW / 2;
+  const waCenterY = waT + waH / 2;
+  const targetCenter = target.getCenterPoint();
+  target.getBoundingRect();
+  const curLeft = target.left ?? 0;
+  target.top ?? 0;
+  let snappedX = false;
+  let snappedY = false;
+  let snapLineX = waCenterX;
+  let snapLineY = waCenterY;
+  const distCenterX = Math.abs(targetCenter.x - waCenterX);
+  if (distCenterX <= threshold) {
+    const diffX = waCenterX - targetCenter.x;
+    target.set("left", curLeft + diffX);
+    target.setCoords();
+    snappedX = true;
+    snapLineX = waCenterX;
+  } else {
+    const otherObjects = canvas2.getObjects().filter(
+      (o2) => o2 !== target && o2.selectable !== false && o2.name !== "workarea" && o2.name !== "bg-image" && !o2.name?.startsWith("overlay-") && !o2.name?.startsWith("guideline-") && o2.name !== "canvas-grid"
+    );
+    for (const other of otherObjects) {
+      const otherCenter = other.getCenterPoint();
+      if (Math.abs(targetCenter.x - otherCenter.x) <= threshold) {
+        const diffX = otherCenter.x - targetCenter.x;
+        target.set("left", curLeft + diffX);
+        target.setCoords();
+        snappedX = true;
+        snapLineX = otherCenter.x;
+        break;
+      }
+    }
+  }
+  const updatedCenter = target.getCenterPoint();
+  const distCenterY = Math.abs(updatedCenter.y - waCenterY);
+  if (distCenterY <= threshold) {
+    const diffY = waCenterY - updatedCenter.y;
+    target.set("top", (target.top ?? 0) + diffY);
+    target.setCoords();
+    snappedY = true;
+    snapLineY = waCenterY;
+  } else {
+    const otherObjects = canvas2.getObjects().filter(
+      (o2) => o2 !== target && o2.selectable !== false && o2.name !== "workarea" && o2.name !== "bg-image" && !o2.name?.startsWith("overlay-") && !o2.name?.startsWith("guideline-") && o2.name !== "canvas-grid"
+    );
+    for (const other of otherObjects) {
+      const otherCenter = other.getCenterPoint();
+      if (Math.abs(updatedCenter.y - otherCenter.y) <= threshold) {
+        const diffY = otherCenter.y - updatedCenter.y;
+        target.set("top", (target.top ?? 0) + diffY);
+        target.setCoords();
+        snappedY = true;
+        snapLineY = otherCenter.y;
+        break;
+      }
+    }
+  }
+  if (snappedX) {
+    const y1 = waT;
+    const y2 = waT + waH;
+    if (!activeVLine) {
+      activeVLine = new vo([snapLineX, y1, snapLineX, y2], {
+        name: "guideline-alignment-v",
+        stroke: GUIDELINE_COLOR,
+        strokeWidth: GUIDELINE_WIDTH / zoom,
+        strokeUniform: true,
+        selectable: false,
+        evented: false,
+        excludeFromExport: true,
+        hasControls: false,
+        hasBorders: false,
+        lockMovementX: true,
+        lockMovementY: true
+      });
+      canvas2.add(activeVLine);
+    } else {
+      activeVLine.set({
+        x1: snapLineX,
+        y1,
+        x2: snapLineX,
+        y2,
+        strokeWidth: GUIDELINE_WIDTH / zoom,
+        visible: true
+      });
+      activeVLine.setCoords();
+    }
+    canvas2.bringObjectToFront(activeVLine);
+  } else if (activeVLine) {
+    canvas2.remove(activeVLine);
+    activeVLine = null;
+  }
+  if (snappedY) {
+    const x1 = waL;
+    const x2 = waL + waW;
+    if (!activeHLine) {
+      activeHLine = new vo([x1, snapLineY, x2, snapLineY], {
+        name: "guideline-alignment-h",
+        stroke: GUIDELINE_COLOR,
+        strokeWidth: GUIDELINE_WIDTH / zoom,
+        strokeUniform: true,
+        selectable: false,
+        evented: false,
+        excludeFromExport: true,
+        hasControls: false,
+        hasBorders: false,
+        lockMovementX: true,
+        lockMovementY: true
+      });
+      canvas2.add(activeHLine);
+    } else {
+      activeHLine.set({
+        x1,
+        y1: snapLineY,
+        x2,
+        y2: snapLineY,
+        strokeWidth: GUIDELINE_WIDTH / zoom,
+        visible: true
+      });
+      activeHLine.setCoords();
+    }
+    canvas2.bringObjectToFront(activeHLine);
+  } else if (activeHLine) {
+    canvas2.remove(activeHLine);
+    activeHLine = null;
+  }
+  canvas2.requestRenderAll();
+}
 function setupHistoryRecording(canvas2) {
   let modifiedTimer = null;
   const handleObjectAddedOrRemoved = (e3) => {
     const target = e3?.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;
@@ -159936,7 +160827,7 @@ function setupHistoryRecording(canvas2) {
     const target = e3?.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;
@@ -159959,6 +160850,12 @@ function setupHistoryRecording(canvas2) {
 }
 function setupDoublClickCrop(canvas2) {
   const handleDoubleClick = (e3) => {
+    const isCropping = useEditorStore.getState().isCropping;
+    if (isCropping) {
+      applyCrop(canvas2);
+      useEditorStore.getState().stopCropping();
+      return;
+    }
     const target = e3.target;
     if (target && target.type === "image" && target.name !== "bg-image") {
       useEditorStore.getState().startCropping();
@@ -160004,6 +160901,13 @@ function setupSelectionHandlers(canvas2, setSelection, clearSelection) {
     canvas2.requestRenderAll();
   };
   canvas2.on("selection:created", (e3) => {
+    if (useDrawStore.getState().drawTool !== "select") {
+      useDrawStore.getState().setDrawTool("select");
+      canvas2.isDrawingMode = false;
+      canvas2.selection = true;
+      canvas2.defaultCursor = "default";
+      canvas2._isCurrentlyDrawing = false;
+    }
     if (e3.selected) {
       e3.selected.forEach((o2) => {
         o2.__showDegree = false;
@@ -160011,8 +160915,16 @@ function setupSelectionHandlers(canvas2, setSelection, clearSelection) {
     }
     updateSelection();
     configureSelectionControls();
+    bringOverlaysToFront(canvas2);
   });
   canvas2.on("selection:updated", (e3) => {
+    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) {
@@ -160033,6 +160945,7 @@ function setupSelectionHandlers(canvas2, setSelection, clearSelection) {
     }
     updateSelection();
     configureSelectionControls();
+    bringOverlaysToFront(canvas2);
   });
   canvas2.on("object:scaling", configureSelectionControls);
   canvas2.on("object:rotating", (e3) => {
@@ -160049,10 +160962,23 @@ function setupSelectionHandlers(canvas2, setSelection, clearSelection) {
       o2.__showDegree = false;
     });
     configureSelectionControls();
+    bringOverlaysToFront(canvas2);
   };
-  canvas2.on("object:modified", hideDegree);
-  canvas2.on("mouse:up", hideDegree);
+  const handleObjectMoving = (e3) => {
+    if (e3.target) {
+      handleObjectAlignmentSnap(canvas2, e3.target);
+    }
+    bringOverlaysToFront(canvas2);
+  };
+  const handleMovementEnd = (e3) => {
+    clearAlignmentGuidelines(canvas2);
+    hideDegree(e3);
+  };
+  canvas2.on("object:moving", handleObjectMoving);
+  canvas2.on("object:modified", 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({
@@ -160066,22 +160992,27 @@ function setupSelectionHandlers(canvas2, setSelection, clearSelection) {
       }
     }
     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 = (e3) => {
     const obj = e3.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);
   };
@@ -160129,6 +161060,9 @@ const CUSTOM_PROPERTIES = [
   "lockMovementY",
   "rx",
   "ry",
+  "src",
+  "crossOrigin",
+  "__maskPath",
   "__radiusOfCanvas",
   "__shapeType",
   "__pageSide",
@@ -160139,10 +161073,28 @@ const CUSTOM_PROPERTIES = [
   "__initialZoom",
   "__borderRect",
   "__rotationControlSize",
-  "__showDegree"
+  "__showDegree",
+  "textAlign",
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "fontStyle",
+  "underline",
+  "linethrough",
+  "overline",
+  "fill",
+  "stroke",
+  "strokeWidth",
+  "lineHeight",
+  "charSpacing",
+  "styles",
+  "paintFirst",
+  "strokeUniform",
+  "objectCaching"
 ];
 async function switchCanvasPage(canvas2, currentPage, targetPage, pageJSON, clearSelection, containerRef) {
   if (targetPage === currentPage) return;
+  clearAlignmentGuidelines(canvas2);
   const historyStore = useHistoryStore.getState();
   useLoaderStore.getState().startLoading();
   try {
@@ -160575,41 +161527,75 @@ function ZoomControls({ onReset }) {
   ] }) });
 }
 const OFFSET = 20;
-function useKeyboardEvents(canvas2) {
-  const clipboardRef = 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);
   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 = (e3) => {
@@ -160617,25 +161603,53 @@ function useKeyboardEvents(canvas2) {
       const isInput = activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement || activeElement?.isContentEditable;
       if (isInput) return;
       const isModifier = e3.ctrlKey || e3.metaKey;
-      if (isModifier && e3.key.toLowerCase() === "c") {
+      if (!isModifier) return;
+      const isZ = e3.key?.toLowerCase() === "z" || e3.code === "KeyZ";
+      const isY = e3.key?.toLowerCase() === "y" || e3.code === "KeyY";
+      const isC = e3.key?.toLowerCase() === "c" || e3.code === "KeyC";
+      const isV = e3.key?.toLowerCase() === "v" || e3.code === "KeyV";
+      const isA = e3.key?.toLowerCase() === "a" || e3.code === "KeyA";
+      if (isZ && !e3.shiftKey) {
+        e3.preventDefault();
+        useHistoryStore.getState().undo();
+        return;
+      }
+      if (isZ && e3.shiftKey || isY) {
+        e3.preventDefault();
+        useHistoryStore.getState().redoAction();
+        return;
+      }
+      if (isC) {
         e3.preventDefault();
         handleCopy();
+        return;
       }
-      if (isModifier && e3.key.toLowerCase() === "v") {
+      if (isV) {
         e3.preventDefault();
         handlePaste();
+        return;
       }
-      if (isModifier && e3.key.toLowerCase() === "z") {
-        e3.preventDefault();
-        if (e3.shiftKey) {
-          useHistoryStore.getState().redoAction();
-        } else {
-          useHistoryStore.getState().undo();
+      if (isA) {
+        const activeCanvas = getActiveCanvas();
+        if (activeCanvas) {
+          e3.preventDefault();
+          const selectableObjects = activeCanvas.getObjects().filter(
+            (obj) => obj.name !== "workarea" && !obj.name?.startsWith("overlay-") && !obj.name?.startsWith("guideline-") && obj.selectable !== false
+          );
+          if (selectableObjects.length > 0) {
+            activeCanvas.discardActiveObject();
+            const sel = new Qo(selectableObjects, { canvas: activeCanvas });
+            activeCanvas.setActiveObject(sel);
+            activeCanvas.requestRenderAll();
+          }
         }
+        return;
       }
-      if (isModifier && e3.key.toLowerCase() === "y") {
+      const isQuote = e3.key === "'" || e3.code === "Quote";
+      if (isQuote) {
         e3.preventDefault();
-        useHistoryStore.getState().redoAction();
+        useEditorStore.getState().toggleGrid();
+        return;
       }
     };
     window.addEventListener("keydown", handleKeyDown);
@@ -160651,17 +161665,23 @@ function Workspace() {
   const workareaRef = useRef(null);
   const panHandlersRef = 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] = useState("front");
-  const [isPanning, setIsPanning] = useState(false);
+  const editorPages = useEditorStore((s2) => s2.pages);
   const pageJSON = useRef({
     front: null,
     back: null
   });
+  const isTwoSided = productData?.optionsMap?.printing === "4/4" || !!pageJSON.current?.back || !!editorPages?.back;
+  const [currentPage, setCurrentPage] = useState("front");
+  const [isPanning, setIsPanning] = useState(false);
   useEffect(() => {
     if (!canvasRef.current || !containerRef.current) return;
     if (fabricRef.current) return;
@@ -160703,20 +161723,20 @@ function Workspace() {
         }
         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) {
@@ -160724,7 +161744,7 @@ function Workspace() {
             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();
           }
@@ -160745,7 +161765,7 @@ function Workspace() {
           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();
           }
@@ -160762,10 +161782,10 @@ function Workspace() {
           cleanupCrop();
           cleanupSelection();
           cleanupObjectAdded();
-          if (canvas2.__cleanupResizeObserver) {
-            canvas2.__cleanupResizeObserver();
+          if (canvas22.__cleanupResizeObserver) {
+            canvas22.__cleanupResizeObserver();
           }
-          canvas2.dispose();
+          canvas22.dispose();
           fabricRef.current = null;
           setCanvas(null);
           clearSelection();
@@ -160803,23 +161823,30 @@ function Workspace() {
     return setupBorderSync(fabricRef.current);
   }, [fabricRef.current]);
   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);
+  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,
@@ -160830,10 +161857,50 @@ function Workspace() {
     );
     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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "absolute bottom-6 z-50 flex items-center bg-white/80 backdrop-blur-xl rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.12)] px-1.5 py-1.5 border border-white/40 ring-1 ring-black/5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex bg-gray-200/50 p-1 rounded-xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex bg-gray-200/50 p-1 rounded-xl items-center gap-1", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -160849,6 +161916,37 @@ function Workspace() {
             className: `px-4 py-2 rounded-lg text-[11px] font-bold tracking-wider transition-all duration-200 cursor-pointer ${currentPage === "back" ? "bg-white text-[#02bc71] shadow-sm" : "text-gray-500 hover:text-gray-700"}`,
             children: "BACK"
           }
+        ),
+        isTwoSided && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            id: "copy-front-to-back-btn",
+            type: "button",
+            onClick: copyFrontToBack,
+            title: "Copy front design to back design",
+            className: "flex items-center gap-1.5 px-3 py-1.5 ml-1 rounded-lg text-[10px] font-bold tracking-wider bg-white/90 hover:bg-white text-gray-700 hover:text-[#02bc71] border border-gray-300/60 shadow-xs transition-all duration-150 cursor-pointer active:scale-95",
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: "13",
+                  height: "13",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "text-[#02bc71]",
+                  children: [
+                    /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                    /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: "COPY FRONT TO BACK" })
+            ]
+          }
         )
       ] }),
       /* @__PURE__ */ jsx("div", { className: "w-[1px] h-6 bg-gray-300/50 mx-3" }),
@@ -160856,20 +161954,35 @@ function Workspace() {
         /* @__PURE__ */ 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__ */ jsx(PointerIcon, {})
           }
         ),
         /* @__PURE__ */ 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__ */ jsx(HandIcon, {})
           }
+        ),
+        /* @__PURE__ */ 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__ */ jsx(GridIcon, {})
+          }
         )
       ] }),
       /* @__PURE__ */ jsx("div", { className: "w-[1px] h-6 bg-gray-300/50 mx-3" }),