vibrant-tool 0.1.9 → 0.1.10

package/dist/vibrant-tool.umd.js

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