vibrant-tool 0.1.9 → 0.1.10

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";
@@ -9102,12 +9123,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 +9270,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 +9351,9 @@ const HISTORY_CUSTOM_PROPERTIES = [
   "lockMovementY",
   "rx",
   "ry",
+  "src",
+  "crossOrigin",
+  "__maskPath",
   "__radiusOfCanvas",
   "__shapeType",
   "__pageSide",
@@ -9265,7 +9364,8 @@ const HISTORY_CUSTOM_PROPERTIES = [
   "__initialZoom",
   "__borderRect",
   "__rotationControlSize",
-  "__showDegree"
+  "__showDegree",
+  "textAlign"
 ];
 const useHistoryStore = create((set, get) => ({
   canvas: null,
@@ -9288,11 +9388,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 +9413,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 +9432,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 +9449,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 +9467,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({
@@ -9663,7 +9768,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(),
@@ -9888,6 +9993,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 +10016,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,
@@ -102390,7 +102496,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 +102578,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();
@@ -102933,6 +103018,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 +103069,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;
@@ -103387,7 +103474,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 +103487,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 +103538,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 +104306,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 +104331,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 +104376,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 +104392,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 +106165,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 +106222,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 +106230,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 +106246,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 +106342,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 +106356,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 +111147,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 +111157,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 +157109,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 +157124,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 +157250,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 +157344,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 +157374,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 +157435,7 @@ function TextToolbar() {
       }
     ),
     /* @__PURE__ */ jsx(
-      TextAlignButton,
+      TextAlignGroup,
       {
         value: align,
         onChange: (v2) => {
@@ -157532,6 +157691,7 @@ class CropService {
   darkOverlay = null;
   focusedImage = null;
   cropZone = null;
+  maskPath = null;
   onEnd = null;
   init(canvas2) {
     this.canvas = canvas2;
@@ -157543,6 +157703,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 +157720,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 +157852,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 +157901,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 +157919,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 +157956,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 +157994,7 @@ class CropService {
     this.fullImage = null;
     this.darkOverlay = null;
     this.targetImage = null;
+    this.maskPath = null;
   }
 }
 const cropService = new CropService();
@@ -157868,7 +158081,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 +158090,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();
@@ -158169,6 +158383,7 @@ function DuplicateButton() {
       );
       const newSelection = clones.length > 1 ? new Qo(clones, { canvas: canvas2 }) : clones[0];
       canvas2.setActiveObject(newSelection);
+      bringOverlaysToFront(canvas2);
       canvas2.requestRenderAll();
       saveState();
       return;
@@ -158184,6 +158399,7 @@ function DuplicateButton() {
     canvas2.discardActiveObject();
     canvas2.add(cloned);
     canvas2.setActiveObject(cloned);
+    bringOverlaysToFront(canvas2);
     canvas2.requestRenderAll();
   };
   return /* @__PURE__ */ jsx(
@@ -158737,44 +158953,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 +159019,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 +159081,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 +159436,7 @@ function GroupButton() {
       canvas2.add(group);
     }
     canvas2.setActiveObject(group);
+    bringOverlaysToFront(canvas2);
     canvas2.requestRenderAll();
     useSelectionStore.getState().setSelection([group]);
     saveState();
@@ -159366,6 +159588,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 +159709,7 @@ function UngroupButton() {
     });
     canvas2.discardActiveObject();
     useSelectionStore.getState().clearSelection();
+    bringOverlaysToFront(canvas2);
     canvas2.requestRenderAll();
     saveState();
   };
@@ -159593,12 +159819,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 +159853,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 +159976,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;
@@ -159918,10 +160326,11 @@ 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 === "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 +160345,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 +160368,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 +160419,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 +160433,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 +160463,7 @@ function setupSelectionHandlers(canvas2, setSelection, clearSelection) {
     }
     updateSelection();
     configureSelectionControls();
+    bringOverlaysToFront(canvas2);
   });
   canvas2.on("object:scaling", configureSelectionControls);
   canvas2.on("object:rotating", (e3) => {
@@ -160049,7 +160480,12 @@ function setupSelectionHandlers(canvas2, setSelection, clearSelection) {
       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", () => {
@@ -160066,6 +160502,7 @@ function setupSelectionHandlers(canvas2, setSelection, clearSelection) {
       }
     }
     hideDegree();
+    bringOverlaysToFront(canvas2);
     clearSelection();
   });
   return () => {
@@ -160073,6 +160510,7 @@ function setupSelectionHandlers(canvas2, setSelection, clearSelection) {
     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");
@@ -160081,7 +160519,9 @@ function setupSelectionHandlers(canvas2, setSelection, clearSelection) {
 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);
   };
@@ -160575,21 +161015,27 @@ function ZoomControls({ onReset }) {
   ] }) });
 }
 const OFFSET = 20;
-function useKeyboardEvents(canvas2) {
+function useKeyboardEvents(canvasParam) {
   const clipboardRef = 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);
   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,
@@ -160600,16 +161046,17 @@ function useKeyboardEvents(canvas2) {
         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 = (e3) => {
@@ -160617,25 +161064,36 @@ 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";
+      if (isZ && !e3.shiftKey) {
         e3.preventDefault();
-        handleCopy();
+        useHistoryStore.getState().undo();
+        return;
       }
-      if (isModifier && e3.key.toLowerCase() === "v") {
+      if (isZ && e3.shiftKey || isY) {
         e3.preventDefault();
-        handlePaste();
+        useHistoryStore.getState().redoAction();
+        return;
       }
-      if (isModifier && e3.key.toLowerCase() === "z") {
+      if (isC) {
         e3.preventDefault();
-        if (e3.shiftKey) {
-          useHistoryStore.getState().redoAction();
-        } else {
-          useHistoryStore.getState().undo();
-        }
+        handleCopy();
+        return;
       }
-      if (isModifier && e3.key.toLowerCase() === "y") {
+      if (isV) {
         e3.preventDefault();
-        useHistoryStore.getState().redoAction();
+        handlePaste();
+        return;
+      }
+      const isQuote = e3.key === "'" || e3.code === "Quote";
+      if (isQuote) {
+        e3.preventDefault();
+        useEditorStore.getState().toggleGrid();
+        return;
       }
     };
     window.addEventListener("keydown", handleKeyDown);
@@ -160651,9 +161109,14 @@ 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");
@@ -160703,20 +161166,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 +161187,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 +161208,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 +161225,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 +161266,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,6 +161300,7 @@ function Workspace() {
     );
     useEditorStore.getState().setPages({ ...pageJSON.current });
     setCurrentPage(page);
+    renderGrid(fabricRef.current);
   };
   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: [
@@ -160856,20 +161327,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" }),