vibrant-tool 0.1.7 → 0.1.9

package/dist/vibrant-tool.umd.js

@@ -1075,9 +1075,9 @@
   function GlobalLoader() {
     const { isLoading, text } = useLoaderStore();
     if (!isLoading) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[999999] flex flex-col items-center justify-center bg-black/60 backdrop-blur-xs select-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 bg-neutral-900/90 border border-neutral-800 px-6 py-5 rounded-2xl shadow-2xl", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-9 w-9 animate-spin rounded-full border-3 border-[#02bc71] border-t-transparent" }),
-      text && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-neutral-200", children: text })
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[999999] flex flex-col items-center justify-center bg-black/65 backdrop-blur-[2px] select-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3.5 bg-neutral-900/95 border border-neutral-700/80 px-8 py-6 rounded-2xl shadow-2xl min-w-[240px] max-w-[360px] text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 animate-spin rounded-full border-3 border-[#02bc71] border-t-transparent shadow-sm" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-neutral-100 tracking-wide", children: text || "Please wait..." })
     ] }) });
   }
   function DownloadIcon() {
@@ -9027,7 +9027,7 @@
         waH,
         isVertical
       );
-      workarea.set({ rx, ry });
+      workarea.set({ rx, ry, strokeWidth: 0, stroke: null });
       workarea.__radiusOfCanvas = radiusOfCanvas;
       workarea.__shapeType = shapeType;
       workarea.__isVertical = isVertical;
@@ -9046,8 +9046,61 @@
               top: (obj.top ?? 0) + dy
             });
             obj.setCoords();
+            if (obj.clipPath) {
+              obj.clipPath.set({
+                left: (obj.clipPath.left ?? 0) + dx,
+                top: (obj.clipPath.top ?? 0) + dy
+              });
+              obj.clipPath.setCoords();
+            }
           }
         });
+        if (workarea.clipPath) {
+          workarea.clipPath.set({
+            left: (workarea.clipPath.left ?? 0) + dx,
+            top: (workarea.clipPath.top ?? 0) + dy
+          });
+          workarea.clipPath.setCoords();
+        }
+        if (canvas2.backgroundImage) {
+          const bg = canvas2.backgroundImage;
+          bg.set({
+            left: (bg.left ?? 0) + dx,
+            top: (bg.top ?? 0) + dy
+          });
+          bg.setCoords();
+          if (bg.clipPath) {
+            bg.clipPath.set({
+              left: (bg.clipPath.left ?? 0) + dx,
+              top: (bg.clipPath.top ?? 0) + dy
+            });
+            bg.clipPath.setCoords();
+          }
+        }
+      }
+      const bgImg = canvas2.getObjects().find((o2) => o2.name === "bg-image");
+      if (bgImg) {
+        const center = workarea.getCenterPoint();
+        const curWaW = workarea.getScaledWidth();
+        const curWaH = workarea.getScaledHeight();
+        bgImg.set({
+          left: center.x,
+          top: center.y,
+          originX: "center",
+          originY: "center"
+        });
+        bgImg.setCoords();
+        const exportLeft = Math.round(center.x - curWaW / 2);
+        const exportTop = Math.round(center.y - curWaH / 2);
+        const clip2 = createShapeExportClip(
+          shapeType,
+          { left: exportLeft, top: exportTop, width: curWaW, height: curWaH, rx, ry },
+          currentSide
+        );
+        if (clip2) {
+          clip2.absolutePositioned = true;
+          bgImg.clipPath = clip2;
+        }
       }
       createOverlays(canvas2, workarea, currentSide);
       canvas2.sendObjectToBack(workarea);
@@ -9066,8 +9119,7 @@
       } else {
         obj.set({
           selectable: false,
-          evented: false,
-          hasControls: false
+          evented: false
         });
       }
       obj.setCoords();
@@ -9085,69 +9137,89 @@
       }, 40);
     });
   }
-  function getWorkareaDataUrl(cvs, multiplier = 1, pageSide) {
+  function getWorkareaDataUrl(cvs, multiplier = 1, pageSide, includeGuidelines = false) {
     const wa2 = cvs.getObjects().find((o2) => o2.name === "workarea");
     cvs.discardActiveObject();
-    const guides = cvs.getObjects().filter(
+    const guidesAndOverlays = cvs.getObjects().filter(
       (o2) => o2.name?.startsWith("guideline-") || o2.name?.startsWith("overlay-") || o2.name === "guideline-trim" || o2.name === "guideline-safe" || o2.excludeFromExport === true
     );
-    const prevVis = guides.map((g2) => g2.visible);
-    guides.forEach((g2) => {
-      g2.visible = false;
+    const prevVis = guidesAndOverlays.map((g2) => g2.visible);
+    guidesAndOverlays.forEach((g2) => {
+      const isGuideline = g2.name?.startsWith("guideline-") || g2.name === "guideline-trim" || g2.name === "guideline-safe";
+      if (includeGuidelines && isGuideline) {
+        g2.visible = true;
+      } else {
+        g2.visible = false;
+      }
     });
+    if (includeGuidelines) {
+      const activeGuides = guidesAndOverlays.filter(
+        (g2) => g2.name?.startsWith("guideline-") || g2.name === "guideline-trim" || g2.name === "guideline-safe"
+      );
+      activeGuides.forEach((g2) => cvs.bringObjectToFront(g2));
+    }
     const prevBg = cvs.backgroundColor;
     cvs.backgroundColor = "";
+    const prevVt = cvs.viewportTransform ? [...cvs.viewportTransform] : [1, 0, 0, 1, 0, 0];
+    const prevZoom = cvs.getZoom();
+    cvs.setViewportTransform([1, 0, 0, 1, 0, 0]);
+    cvs.setZoom(1);
     let dataUrl = "";
-    if (!wa2) {
-      cvs.renderAll();
-      dataUrl = cvs.toDataURL({ format: "png", multiplier });
-    } else {
-      const { left = 0, top = 0, scaleX = 1, scaleY = 1, width = 0, height = 0 } = wa2;
-      const curW = width * scaleX;
-      const curH = height * scaleY;
-      const shapeType = detectShape(wa2.__shapeType);
-      const activeSide = pageSide || wa2.__pageSide || useHistoryStore.getState().currentPage || "front";
-      const baseRx = (wa2.rx || wa2.__radiusOfCanvas || 0) * scaleX;
-      const baseRy = (wa2.ry || wa2.__radiusOfCanvas || 0) * scaleY;
-      let exportLeft = left;
-      let exportTop = top;
-      let exportW = curW;
-      let exportH = curH;
-      if (shapeType === "circle") {
-        const diam = Math.min(curW, curH);
-        exportLeft = left + (curW - diam) / 2;
-        exportTop = top + (curH - diam) / 2;
-        exportW = diam;
-        exportH = diam;
-      }
-      const clipObj = createShapeExportClip(
-        shapeType,
-        { left, top, width: curW, height: curH, rx: baseRx, ry: baseRy },
-        activeSide
-      );
-      const prevClip = cvs.clipPath;
-      if (clipObj) {
-        cvs.clipPath = clipObj;
+    try {
+      if (!wa2) {
+        cvs.renderAll();
+        dataUrl = cvs.toDataURL({ format: "png", multiplier });
+      } else {
+        const center = wa2.getCenterPoint();
+        const scaledW = wa2.getScaledWidth();
+        const scaledH = wa2.getScaledHeight();
+        const shapeType = detectShape(wa2.__shapeType);
+        const activeSide = pageSide || wa2.__pageSide || useHistoryStore.getState().currentPage || "front";
+        const baseRx = (wa2.rx || wa2.__radiusOfCanvas || 0) * (wa2.scaleX || 1);
+        const baseRy = (wa2.ry || wa2.__radiusOfCanvas || 0) * (wa2.scaleY || 1);
+        let exportW = scaledW;
+        let exportH = scaledH;
+        let exportLeft = center.x - exportW / 2;
+        let exportTop = center.y - exportH / 2;
+        if (shapeType === "circle") {
+          const diam = Math.min(scaledW, scaledH);
+          exportW = diam;
+          exportH = diam;
+          exportLeft = center.x - diam / 2;
+          exportTop = center.y - diam / 2;
+        }
+        const clipObj = createShapeExportClip(
+          shapeType,
+          { left: exportLeft, top: exportTop, width: exportW, height: exportH, rx: baseRx, ry: baseRy },
+          activeSide
+        );
+        const prevClip = cvs.clipPath;
+        if (clipObj) {
+          cvs.clipPath = clipObj;
+        }
+        cvs.renderAll();
+        dataUrl = cvs.toDataURL({
+          format: "png",
+          multiplier,
+          left: exportLeft,
+          top: exportTop,
+          width: exportW,
+          height: exportH
+        });
+        cvs.clipPath = prevClip;
       }
-      cvs.renderAll();
-      dataUrl = cvs.toDataURL({
-        format: "png",
-        multiplier,
-        left: exportLeft,
-        top: exportTop,
-        width: exportW,
-        height: exportH
+    } finally {
+      cvs.setViewportTransform(prevVt);
+      cvs.setZoom(prevZoom);
+      guidesAndOverlays.forEach((g2, i2) => {
+        g2.visible = prevVis[i2];
       });
-      cvs.clipPath = prevClip;
+      cvs.backgroundColor = prevBg;
+      cvs.renderAll();
     }
-    guides.forEach((g2, i2) => {
-      g2.visible = prevVis[i2];
-    });
-    cvs.backgroundColor = prevBg;
-    cvs.renderAll();
     return dataUrl;
   }
-  async function renderPageDataUrl(json, baseCanvas, multiplier = 1, targetSide) {
+  async function renderPageDataUrl(json, baseCanvas, multiplier = 1, targetSide, includeGuidelines = false) {
     if (!json) return "";
     try {
       const hiddenEl = document.createElement("canvas");
@@ -9165,7 +9237,7 @@
       hiddenCanvas.requestRenderAll();
       await new Promise((r2) => setTimeout(r2, 60));
       hiddenCanvas.renderAll();
-      const url = getWorkareaDataUrl(hiddenCanvas, multiplier, targetSide);
+      const url = getWorkareaDataUrl(hiddenCanvas, multiplier, targetSide, includeGuidelines);
       hiddenCanvas.dispose();
       hiddenEl.remove();
       return url;
@@ -9174,6 +9246,28 @@
       return "";
     }
   }
+  const HISTORY_CUSTOM_PROPERTIES = [
+    "name",
+    "id",
+    "selectable",
+    "evented",
+    "hasControls",
+    "lockMovementX",
+    "lockMovementY",
+    "rx",
+    "ry",
+    "__radiusOfCanvas",
+    "__shapeType",
+    "__pageSide",
+    "__printWidth",
+    "__printHeight",
+    "__printDPI",
+    "__baseScale",
+    "__initialZoom",
+    "__borderRect",
+    "__rotationControlSize",
+    "__showDegree"
+  ];
   const useHistoryStore = create((set, get) => ({
     canvas: null,
     currentPage: "front",
@@ -9183,34 +9277,26 @@
       back: { history: [], redo: [] }
     },
     setCanvas: (canvas2) => {
-      set((state) => ({
+      set({
         canvas: canvas2,
+        isRestoring: false,
         pages: {
           front: { history: [], redo: [] },
           back: { history: [], redo: [] }
         }
-      }));
+      });
     },
-    // setCanvas: (canvas) => {
-    //   set((state) => ({
-    //     canvas,
-    //     pages: {
-    //       ...state.pages,
-    //       front: {
-    //         history: [
-    //           { objects: [] }
-    //         ],
-    //         redo: [],
-    //       },
-    //     },
-    //   }));
-    // },
     setPage: (page) => set({ currentPage: page }),
     saveState: () => {
       const { canvas: canvas2, currentPage, pages, isRestoring } = get();
       if (!canvas2 || isRestoring) return;
-      const json = canvas2.toObject(["name"]);
-      const history = pages[currentPage].history;
+      const rawJson = canvas2.toObject(HISTORY_CUSTOM_PROPERTIES);
+      const cleanObjects = (rawJson.objects || []).filter((obj) => {
+        const name = obj.name || "";
+        return name !== "watermark" && !name.startsWith("overlay-") && !name.startsWith("guideline-");
+      });
+      const json = { ...rawJson, objects: cleanObjects };
+      const history = pages[currentPage]?.history ?? [];
       const last2 = history[history.length - 1];
       if (last2 && JSON.stringify(last2) === JSON.stringify(json)) {
         return;
@@ -9226,9 +9312,11 @@
       });
     },
     undo: async () => {
-      const { canvas: canvas2, currentPage, pages } = get();
+      const { canvas: canvas2, currentPage, pages, isRestoring } = get();
+      if (!canvas2 || isRestoring) return;
       const page = pages[currentPage];
-      if (!canvas2 || page.history.length <= 1) return;
+      if (!page || page.history.length <= 1) return;
+      canvas2.discardActiveObject();
       const current = page.history.at(-1);
       const previous = page.history.at(-2);
       set({
@@ -9241,14 +9329,28 @@
           }
         }
       });
-      await loadPageToCanvas(canvas2, previous);
-      canvas2.requestRenderAll();
-      set({ isRestoring: false });
+      try {
+        await loadPageToCanvas(canvas2, previous, currentPage);
+        canvas2.requestRenderAll();
+        const editorStore = useEditorStore.getState();
+        if (editorStore.pages) {
+          editorStore.setPages({
+            ...editorStore.pages,
+            [currentPage]: previous
+          });
+        }
+      } finally {
+        setTimeout(() => {
+          set({ isRestoring: false });
+        }, 80);
+      }
     },
     redoAction: async () => {
-      const { canvas: canvas2, currentPage, pages } = get();
+      const { canvas: canvas2, currentPage, pages, isRestoring } = get();
+      if (!canvas2 || isRestoring) return;
       const page = pages[currentPage];
-      if (!canvas2 || page.redo.length === 0) return;
+      if (!page || page.redo.length === 0) return;
+      canvas2.discardActiveObject();
       const next = page.redo[0];
       set({
         isRestoring: true,
@@ -9260,9 +9362,21 @@
           }
         }
       });
-      await loadPageToCanvas(canvas2, next);
-      canvas2.requestRenderAll();
-      set({ isRestoring: false });
+      try {
+        await loadPageToCanvas(canvas2, next, currentPage);
+        canvas2.requestRenderAll();
+        const editorStore = useEditorStore.getState();
+        if (editorStore.pages) {
+          editorStore.setPages({
+            ...editorStore.pages,
+            [currentPage]: next
+          });
+        }
+      } finally {
+        setTimeout(() => {
+          set({ isRestoring: false });
+        }, 80);
+      }
     }
   }));
   const FontService = {
@@ -9597,6 +9711,189 @@
     });
     triggerDownload(URL.createObjectURL(blob), "design.json");
   }
+  const ShapeService = {
+    async getAll(data) {
+      const res = await apiFetch(
+        `/api/cliparts?page=${data.page}&limit=${data.limit}&category=${data.category}&status=true`,
+        {
+          method: "GET"
+        }
+      );
+      return {
+        items: res.data || []
+      };
+    },
+    async getAllExternal(data) {
+      const res = await apiFetch(
+        `/api/external/images?page=${data.page}&limit=${data.limit}&keyType=${data.keyType}&status=true${data.query ? `&query=${data.query}` : ""}`,
+        {
+          method: "GET"
+        }
+      );
+      return {
+        items: res.data || []
+      };
+    },
+    async getTextTemplates(data) {
+      const res = await apiFetch(
+        `/api/text-templates?page=${data.page}&limit=${data.limit}&status=true`,
+        {
+          method: "GET"
+        }
+      );
+      return {
+        items: res.data || []
+      };
+    },
+    async getTextTemplateById(id) {
+      const res = await apiFetch(
+        `/api/text-templates/${id}`,
+        {
+          method: "GET"
+        }
+      );
+      return res.data || null;
+    },
+    async updateTextTemplate(id, body) {
+      const res = await apiFetch(`/api/text-templates/${id}`, {
+        method: "PUT",
+        body
+      });
+      return res;
+    },
+    async convertImages(url) {
+      const res = await apiFetch(`/api/convert-images`, {
+        method: "POST",
+        body: { file: url }
+      });
+      return res;
+    }
+  };
+  async function getBase64ImageFromURL(url) {
+    if (!url) return url;
+    if (url.startsWith("data:image/png") || url.startsWith("data:image/jpeg")) {
+      return url;
+    }
+    const cleanUrl = url.replace(/&amp;/g, "&").trim();
+    const fullUrl = cleanUrl.startsWith("http://") || cleanUrl.startsWith("https://") || cleanUrl.startsWith("blob:") || cleanUrl.startsWith("data:") ? cleanUrl : cleanUrl.startsWith("/") ? `https://upload.vibrantprint.com${cleanUrl}` : `https://upload.vibrantprint.com/${cleanUrl}`;
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return fullUrl;
+    }
+    try {
+      const dataUrl = await new Promise((resolve, reject) => {
+        const timer = setTimeout(() => reject(new Error("Image load timeout")), 4e3);
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.onload = () => {
+          clearTimeout(timer);
+          try {
+            const cvs = document.createElement("canvas");
+            cvs.width = img.naturalWidth || img.width || 1;
+            cvs.height = img.naturalHeight || img.height || 1;
+            const ctx = cvs.getContext("2d");
+            if (!ctx) return reject(new Error("No 2d context"));
+            ctx.drawImage(img, 0, 0);
+            resolve(cvs.toDataURL("image/png"));
+          } catch (e2) {
+            reject(e2);
+          }
+        };
+        img.onerror = (e2) => {
+          clearTimeout(timer);
+          reject(e2);
+        };
+        img.src = fullUrl;
+      });
+      if (dataUrl && (dataUrl.startsWith("data:image/png") || dataUrl.startsWith("data:image/jpeg"))) {
+        return dataUrl;
+      }
+    } catch {
+    }
+    try {
+      const controller = new AbortController();
+      const fetchTimer = setTimeout(() => controller.abort(), 4e3);
+      const res = await fetch(fullUrl, { signal: controller.signal });
+      clearTimeout(fetchTimer);
+      const blob = await res.blob();
+      const dataUrl = await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          const result = reader.result;
+          if (result && !result.startsWith("data:image/png") && !result.startsWith("data:image/jpeg")) {
+            const img = new Image();
+            const imgTimer = setTimeout(() => resolve(result), 3e3);
+            img.onload = () => {
+              clearTimeout(imgTimer);
+              const cvs = document.createElement("canvas");
+              cvs.width = img.naturalWidth || img.width || 1;
+              cvs.height = img.naturalHeight || img.height || 1;
+              const ctx = cvs.getContext("2d");
+              if (ctx) {
+                ctx.drawImage(img, 0, 0);
+                resolve(cvs.toDataURL("image/png"));
+              } else {
+                resolve(result);
+              }
+            };
+            img.onerror = () => {
+              clearTimeout(imgTimer);
+              resolve(result);
+            };
+            img.src = result;
+          } else {
+            resolve(result);
+          }
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+      });
+      return dataUrl;
+    } catch {
+      try {
+        const backendRes = await ShapeService.convertImages(fullUrl);
+        const converted = backendRes?.url || backendRes?.dataUrl;
+        if (converted && (converted.startsWith("data:image/png") || converted.startsWith("data:image/jpeg"))) {
+          return converted;
+        }
+      } catch {
+      }
+      return fullUrl;
+    }
+  }
+  async function addImageToCanvas(url) {
+    const canvas2 = useEditorStore.getState().canvas;
+    if (!canvas2) return;
+    const workarea = canvas2.getObjects().find((o2) => o2.name === "workarea");
+    if (!workarea) return;
+    let finalUrl = url;
+    try {
+      const b64 = await getBase64ImageFromURL(url);
+      if (b64 && (b64.startsWith("data:image/png") || b64.startsWith("data:image/jpeg"))) {
+        finalUrl = b64;
+      }
+    } catch {
+    }
+    oa.fromURL(finalUrl, { crossOrigin: "anonymous" }).then((img) => {
+      const workareaCenter = workarea.getCenterPoint();
+      const workareaBounds = workarea.getBoundingRect();
+      const maxWidth = workareaBounds.width * 0.7;
+      const maxHeight = workareaBounds.height * 0.7;
+      img.scale(Math.min(maxWidth / img.width, maxHeight / img.height));
+      img.set({
+        left: workareaCenter.x,
+        top: workareaCenter.y,
+        originX: "center",
+        originY: "center",
+        selectable: true,
+        hasControls: true
+      });
+      canvas2.add(img);
+      canvas2.setActiveObject(img);
+      canvas2.requestRenderAll();
+    }).catch((err) => {
+      console.warn("Fabric failed to load image from URL:", url, err);
+    });
+  }
   function captureWorkareaSVG(canvas2, workarea, pageSide) {
     const targetWorkarea = workarea || canvas2.getObjects().find((obj) => obj.name === "workarea");
     if (!targetWorkarea) return null;
@@ -9676,32 +9973,23 @@
     ];
     const urls = [
       ...new Set(
-        matches.map((m2) => m2[1]).filter((url) => url && (url.startsWith("http") || url.startsWith("blob:")))
+        matches.map((m2) => m2[1]).filter((url) => url && (url.startsWith("http") || url.startsWith("blob:") || url.startsWith("data:") && !url.startsWith("data:image/png") && !url.startsWith("data:image/jpeg")))
       )
     ];
     if (urls.length === 0) return svg;
     await Promise.all(
       urls.map(async (url) => {
-        const base64 = await fetchImageAsBase64(url);
-        if (base64) result = result.split(`"${url}"`).join(`"${base64}"`);
+        try {
+          const base64 = await getBase64ImageFromURL(url);
+          if (base64 && (base64.startsWith("data:image/png") || base64.startsWith("data:image/jpeg"))) {
+            result = result.split(`"${url}"`).join(`"${base64}"`);
+          }
+        } catch {
+        }
       })
     );
     return result;
   }
-  async function fetchImageAsBase64(url) {
-    try {
-      const res = await fetch(url, { mode: "cors" });
-      const blob = await res.blob();
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onloadend = () => resolve(reader.result);
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
-      });
-    } catch {
-      return null;
-    }
-  }
   var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
   function getDefaultExportFromCjs(x2) {
     return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
@@ -99900,7 +100188,16 @@ end`);
       });
     };
     for (const [, obj] of context.enumerateIndirectObjects()) {
+      const dict = obj.dict || (obj instanceof PDFDict ? obj : null);
+      const subtype = dict?.get(PDFName.of("Subtype"))?.toString();
+      const type = dict?.get(PDFName.of("Type"))?.toString();
+      if (subtype === "/Image") {
+        continue;
+      }
       if (obj && obj.contents && obj.dict) {
+        if (type === "/Font" || type === "/FontDescriptor" || type === "/Metadata") {
+          continue;
+        }
         let rawBytes = obj.contents;
         const filterStr = obj.dict.get(PDFName.of("Filter"))?.toString() || "";
         const isFlate = filterStr.includes("FlateDecode");
@@ -99922,7 +100219,7 @@ end`);
         } catch {
         }
       }
-      if (obj instanceof PDFDict) {
+      if (obj instanceof PDFDict && subtype !== "/Image" && type !== "/Font") {
         for (const [k2, v2] of obj.entries()) {
           if (v2?.toString() === "/DeviceRGB") obj.set(k2, PDFName.of("DeviceCMYK"));
         }
@@ -99944,7 +100241,6 @@ end`);
         p2.node.set(PDFName.of("Resources"), res);
       }
       res.set(PDFName.of("ColorSpace"), context.obj({
-        DefaultRGB: PDFName.of("DeviceCMYK"),
         DefaultCMYK: PDFName.of("DeviceCMYK")
       }));
     }
@@ -100024,6 +100320,20 @@ end`);
   function sanitizeSvgForPdf(svg) {
     let result = svg;
     result = result.replace(/<\?xml[^>]*\?>/gi, "").replace(/<!DOCTYPE[^>]*>/gi, "").trim();
+    if (!result.includes("xmlns:xlink=") && (result.includes("xlink:href") || result.includes("<image"))) {
+      result = result.replace(/<svg\b([^>]*)>/i, '<svg$1 xmlns:xlink="http://www.w3.org/1999/xlink">');
+    }
+    result = result.replace(/<image\b([^>]*)>/gi, (match, attrs) => {
+      let newAttrs = attrs;
+      const xlinkMatch = attrs.match(/xlink:href="([^"]*)"/i);
+      const hrefMatch = attrs.match(/\bhref="([^"]*)"/i);
+      if (xlinkMatch && !hrefMatch) {
+        newAttrs += ` href="${xlinkMatch[1]}"`;
+      } else if (hrefMatch && !xlinkMatch) {
+        newAttrs += ` xlink:href="${hrefMatch[1]}"`;
+      }
+      return `<image${newAttrs}>`;
+    });
     result = result.replace(/font-family="([^"]+)"/g, (_2, p1) => {
       const first = p1.split(",")[0].replace(/&quot;/g, "").replace(/['"]/g, "").trim();
       return `font-family="${first}"`;
@@ -100070,17 +100380,114 @@ end`);
         }
       }
       if (rawBuffer && rawBuffer.byteLength > 0) {
-        const cmykBytes = await convertPdfToDeviceCMYK(rawBuffer);
-        const cmykBlob = new Blob([cmykBytes], { type: "application/pdf" });
-        triggerDownload(URL.createObjectURL(cmykBlob), filename);
-      } else {
-        doc.download(filename);
+        try {
+          const cmykBytes = await convertPdfToDeviceCMYK(rawBuffer);
+          const cmykBlob = new Blob([cmykBytes], { type: "application/pdf" });
+          triggerDownload(URL.createObjectURL(cmykBlob), filename);
+          return;
+        } catch (cmykErr) {
+          console.warn("CMYK tagging failed, falling back to direct clean PDF buffer:", cmykErr);
+          const fallbackBlob = new Blob([rawBuffer], { type: "application/pdf" });
+          triggerDownload(URL.createObjectURL(fallbackBlob), filename);
+          return;
+        }
+      }
+      if (typeof doc.getBlob === "function") {
+        const blob = await doc.getBlob();
+        triggerDownload(URL.createObjectURL(blob), filename);
+        return;
       }
+      doc.download(filename);
     } catch (err) {
-      console.error("CMYK tagging error, falling back to direct download:", err);
+      console.error("PDF generation/download error, trying fallback:", err);
+      try {
+        if (typeof doc.getBlob === "function") {
+          const blob = await doc.getBlob();
+          triggerDownload(URL.createObjectURL(blob), filename);
+          return;
+        }
+      } catch {
+      }
       doc.download(filename);
     }
   }
+  function getAllCanvasImages(container) {
+    const list = [];
+    const objs = typeof container.getObjects === "function" ? container.getObjects() : [];
+    for (const o2 of objs) {
+      if (o2.type === "image" || o2.type === "fabricImage") {
+        list.push(o2);
+      } else if (o2.type === "group" && typeof o2.getObjects === "function") {
+        list.push(...getAllCanvasImages(o2));
+      }
+    }
+    return list;
+  }
+  async function inlineImageForExport(obj) {
+    try {
+      const el = obj._element || obj._originalElement;
+      const currentSrc = el?.src || obj.src || (typeof obj.getSrc === "function" ? obj.getSrc() : "");
+      if (currentSrc.startsWith("data:image/png") || currentSrc.startsWith("data:image/jpeg")) {
+        return;
+      }
+      let base64 = null;
+      if (el) {
+        try {
+          if (typeof el.toDataURL === "function") {
+            base64 = el.toDataURL("image/png");
+          } else {
+            const w2 = el.naturalWidth || el.width;
+            const h2 = el.naturalHeight || el.height;
+            if (w2 > 0 && h2 > 0) {
+              const cvs = document.createElement("canvas");
+              cvs.width = w2;
+              cvs.height = h2;
+              const ctx = cvs.getContext("2d");
+              if (ctx) {
+                ctx.drawImage(el, 0, 0);
+                base64 = cvs.toDataURL("image/png");
+              }
+            }
+          }
+        } catch {
+        }
+      }
+      if (!base64 || !base64.startsWith("data:image/png") && !base64.startsWith("data:image/jpeg")) {
+        if (currentSrc) {
+          base64 = await getBase64ImageFromURL(currentSrc);
+        }
+      }
+      if (base64 && (base64.startsWith("data:image/png") || base64.startsWith("data:image/jpeg"))) {
+        if (obj._element) {
+          obj._element.src = base64;
+          if (typeof obj._element.setAttribute === "function") {
+            try {
+              obj._element.setAttribute("src", base64);
+            } catch {
+            }
+          }
+          if (typeof obj._element.decode === "function") {
+            try {
+              await obj._element.decode();
+            } catch {
+            }
+          }
+        }
+        if (obj._originalElement) {
+          obj._originalElement.src = base64;
+          if (typeof obj._originalElement.setAttribute === "function") {
+            try {
+              obj._originalElement.setAttribute("src", base64);
+            } catch {
+            }
+          }
+        }
+        obj.src = base64;
+      }
+    } catch (e2) {
+      console.warn("Failed to inline image for export:", e2);
+    }
+  }
   async function downloadCanvasWorkarea(canvas2, type, scale2 = 1, pages, currentPageSide, dpi) {
     const workarea = canvas2.getObjects().find((obj) => obj.name === "workarea");
     if (!workarea) {
@@ -100091,6 +100498,10 @@ end`);
       exportDesignJSON(canvas2, workarea);
       return;
     }
+    const activeImages = getAllCanvasImages(canvas2);
+    for (const imgObj of activeImages) {
+      await inlineImageForExport(imgObj);
+    }
     const hiddenEl = document.createElement("canvas");
     hiddenEl.width = canvas2.width;
     hiddenEl.height = canvas2.height;
@@ -100112,6 +100523,8 @@ end`);
       "cropY",
       "rx",
       "ry",
+      "crossOrigin",
+      "src",
       "__radiusOfCanvas",
       "__shapeType",
       "__pageSide"
@@ -100121,8 +100534,31 @@ end`);
       const activeSide = pageSide || target?.__pageSide || currentSide;
       const curW = target.getScaledWidth ? target.getScaledWidth() : target.width * (target.scaleX || 1);
       const curH = target.getScaledHeight ? target.getScaledHeight() : target.height * (target.scaleY || 1);
-      const curLeft = target.left || 0;
-      const curTop = target.top || 0;
+      const center = target.getCenterPoint ? target.getCenterPoint() : { x: (target.left || 0) + curW / 2, y: (target.top || 0) + curH / 2 };
+      const bgImg = hiddenCanvas.getObjects().find((o2) => o2.name === "bg-image");
+      if (bgImg) {
+        bgImg.set({
+          left: center.x,
+          top: center.y,
+          originX: "center",
+          originY: "center"
+        });
+        bgImg.setCoords();
+        const shapeType2 = detectShape(target.__shapeType);
+        const baseRx2 = (target.rx || target.__radiusOfCanvas || 0) * (target.scaleX || 1);
+        const baseRy2 = (target.ry || target.__radiusOfCanvas || 0) * (target.scaleY || 1);
+        const exportLeft2 = Math.round(center.x - curW / 2);
+        const exportTop2 = Math.round(center.y - curH / 2);
+        const clip2 = createShapeExportClip(
+          shapeType2,
+          { left: exportLeft2, top: exportTop2, width: curW, height: curH, rx: baseRx2, ry: baseRy2 },
+          activeSide
+        );
+        if (clip2) {
+          clip2.absolutePositioned = true;
+          bgImg.clipPath = clip2;
+        }
+      }
       if (format === "jpeg") hiddenCanvas.backgroundColor = "#ffffff";
       const wm = createWatermark(target, activeSide);
       hiddenCanvas.add(wm);
@@ -100136,35 +100572,40 @@ end`);
       const shapeType = detectShape(target.__shapeType);
       const baseRx = (target.rx || target.__radiusOfCanvas || 0) * (target.scaleX || 1);
       const baseRy = (target.ry || target.__radiusOfCanvas || 0) * (target.scaleY || 1);
-      let exportLeft = curLeft;
-      let exportTop = curTop;
       let exportW = curW;
       let exportH = curH;
+      let exportLeft = center.x - exportW / 2;
+      let exportTop = center.y - exportH / 2;
       if (shapeType === "circle") {
         const diam = Math.min(curW, curH);
-        exportLeft = curLeft + (curW - diam) / 2;
-        exportTop = curTop + (curH - diam) / 2;
         exportW = diam;
         exportH = diam;
+        exportLeft = center.x - diam / 2;
+        exportTop = center.y - diam / 2;
       }
       const exportClip = createShapeExportClip(
         shapeType,
-        { left: curLeft, top: curTop, width: curW, height: curH, rx: baseRx, ry: baseRy },
+        { left: exportLeft, top: exportTop, width: exportW, height: exportH, rx: baseRx, ry: baseRy },
         activeSide
       );
       if (exportClip) {
         hiddenCanvas.clipPath = exportClip;
       }
-      const dataURL = hiddenCanvas.toDataURL({
-        format,
-        quality: 1,
-        multiplier: scale2,
-        left: exportLeft,
-        top: exportTop,
-        width: exportW,
-        height: exportH,
-        enableRetinaScaling: false
-      });
+      let dataURL = "";
+      try {
+        dataURL = hiddenCanvas.toDataURL({
+          format,
+          quality: 1,
+          multiplier: scale2,
+          left: exportLeft,
+          top: exportTop,
+          width: exportW,
+          height: exportH,
+          enableRetinaScaling: false
+        });
+      } catch (taintErr) {
+        console.warn("hiddenCanvas.toDataURL failed (tainted canvas):", taintErr);
+      }
       hiddenCanvas.clipPath = void 0;
       hiddenCanvas.remove(wm);
       if (format === "jpeg") hiddenCanvas.backgroundColor = "";
@@ -100223,18 +100664,41 @@ end`);
           if (curWorkarea) {
             curWorkarea.__pageSide = page.side;
           }
+          const canvasImages = getAllCanvasImages(hiddenCanvas);
+          for (const imgObj of canvasImages) {
+            await inlineImageForExport(imgObj);
+          }
+          hiddenCanvas.renderAll();
           const rawSvg = captureWithWatermark("svg", curWorkarea, page.side);
           if (rawSvg) {
             try {
               const processed = await processSVGWithEmbeds(rawSvg);
               const sanitized = sanitizeSvgForPdf(processed);
-              vectorPages.push({ svg: sanitized });
+              const hasUnembedded = /<image\b[^>]*(?:href="https?:\/\/|href="blob:)[^>]*>/i.test(sanitized);
+              if (hasUnembedded) {
+                const rasterImage = captureWithWatermark("png", curWorkarea, page.side);
+                if (rasterImage) {
+                  vectorPages.push({ image: rasterImage });
+                } else {
+                  vectorPages.push({ svg: sanitized });
+                }
+              } else {
+                vectorPages.push({ svg: sanitized });
+              }
             } catch (err) {
               console.error("Vector SVG processing failed, falling back to image:", err);
-              vectorPages.push({ image: captureWithWatermark("png", curWorkarea, page.side) });
+              const rasterImage = captureWithWatermark("png", curWorkarea, page.side);
+              if (rasterImage) {
+                vectorPages.push({ image: rasterImage });
+              } else {
+                vectorPages.push({ svg: rawSvg });
+              }
             }
           } else {
-            vectorPages.push({ image: captureWithWatermark("png", curWorkarea, page.side) });
+            const rasterImage = captureWithWatermark("png", curWorkarea, page.side);
+            if (rasterImage) {
+              vectorPages.push({ image: rasterImage });
+            }
           }
         }
         await generateAndDownloadPDF(vectorPages, workarea.width, workarea.height);
@@ -100431,15 +100895,17 @@ end`);
       }
     );
   }
-  function PreviewModal({ onClose }) {
+  function PreviewModal({ onClose, onUpload }) {
     const canvas2 = useEditorStore((s2) => s2.canvas);
     const { currentPage } = useHistoryStore();
     const productData = useProductStore((s2) => s2.productData);
     const isTwoSided = productData?.optionsMap?.printing === "4/4";
     const [viewMode, setViewMode] = React.useState("3d");
+    const [showGuidelines, setShowGuidelines] = React.useState(true);
     const [activeSide, setActiveSide] = React.useState(currentPage || "front");
-    const [frontUrl, setFrontUrl] = React.useState("");
-    const [backUrl, setBackUrl] = React.useState("");
+    const [frontSnapshot, setFrontSnapshot] = React.useState("");
+    const [backSnapshot, setBackSnapshot] = React.useState("");
+    const [isLoading, setIsLoading] = React.useState(true);
     const [rotX, setRotX] = React.useState(15);
     const [rotY, setRotY] = React.useState(-25);
     const [isAutoSpin, setIsAutoSpin] = React.useState(true);
@@ -100449,24 +100915,27 @@ end`);
       if (!canvas2) return;
       useHistoryStore.getState().saveState();
       let isMounted = true;
+      setIsLoading(true);
       const loadSides = async () => {
         const currentSide = useHistoryStore.getState().currentPage || "front";
         const editorPages = useEditorStore.getState().pages || {};
         const historyPages = useHistoryStore.getState().pages || {};
-        const currentUrl = getWorkareaDataUrl(canvas2, 2, currentSide);
+        const currentSnapshot = getWorkareaDataUrl(canvas2, 2, currentSide, showGuidelines);
         const opposingSide = currentSide === "front" ? "back" : "front";
         const opposingJson = editorPages[opposingSide] || historyPages[opposingSide]?.history?.at(-1) || null;
-        let opposingUrl = "";
+        let opposingSnapshot = "";
         if (isTwoSided && opposingJson) {
-          opposingUrl = await renderPageDataUrl(opposingJson, canvas2, 2, opposingSide);
+          opposingSnapshot = await renderPageDataUrl(opposingJson, canvas2, 2, opposingSide, showGuidelines);
         }
+        const initialFront = currentSide === "front" ? currentSnapshot : opposingSnapshot;
+        const initialBack = currentSide === "front" ? opposingSnapshot : currentSnapshot;
         if (isMounted) {
-          if (currentSide === "front") {
-            setFrontUrl(currentUrl);
-            setBackUrl(opposingUrl);
-          } else {
-            setBackUrl(currentUrl);
-            setFrontUrl(opposingUrl);
+          setFrontSnapshot(initialFront);
+          setBackSnapshot(initialBack);
+          setIsLoading(false);
+          if (onUpload) {
+            const activeUrl = (activeSide === "front" ? initialFront : initialBack) || initialFront;
+            onUpload({ front: initialFront, back: initialBack || void 0, active: activeUrl });
           }
         }
       };
@@ -100474,7 +100943,7 @@ end`);
       return () => {
         isMounted = false;
       };
-    }, [canvas2, isTwoSided]);
+    }, [canvas2, isTwoSided, showGuidelines]);
     React.useEffect(() => {
       if (!isAutoSpin || isDragging || viewMode !== "3d") return;
       let animId;
@@ -100507,6 +100976,9 @@ end`);
     const isCircle = shapeType === "circle";
     const cardAspectRatio = isCircle ? 1 : waW && waH ? waW / waH : 1.75;
     const getShapeStyle = (side) => {
+      if (showGuidelines) {
+        return {};
+      }
       const baseRadius = workarea?.rx || workarea?.__radiusOfCanvas || 0;
       const rxPct = waW > 0 ? (baseRadius || waW / 8) / waW * 100 : 12.5;
       const ryPct = waH > 0 ? (baseRadius || waH / 8) / waH * 100 : 12.5;
@@ -100548,14 +101020,14 @@ end`);
           return {};
       }
     };
-    const currentProof = activeSide === "front" ? frontUrl : backUrl;
+    const currentProof = activeSide === "front" ? frontSnapshot : backSnapshot;
     const normalizedRotY = (rotY % 360 + 360) % 360;
     const isFrontFacing = normalizedRotY <= 90 || normalizedRotY >= 270;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[99999] bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 select-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-6xl bg-white border border-gray-200 rounded-2xl shadow-2xl overflow-hidden flex flex-col h-[85vh]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-3 border-b border-gray-200 bg-gray-50/90", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-[#02bc71] animate-pulse" }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-bold text-gray-900", children: "3D Design Preview" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-bold text-gray-900", children: "Design Preview" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center bg-gray-200 p-0.5 rounded-lg border border-gray-300 text-xs", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
@@ -100575,7 +101047,23 @@ end`);
                 children: "2D Proof"
               }
             )
-          ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowGuidelines((prev) => !prev),
+              className: `flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-semibold cursor-pointer border transition-all ${showGuidelines ? "bg-emerald-50 text-emerald-800 border-emerald-300 shadow-sm" : "bg-white text-gray-600 border-gray-300 hover:bg-gray-100"}`,
+              title: showGuidelines ? "Click to view finished trimmed cut" : "Click to view bleed, trim & safe line guidelines",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `w-2 h-2 rounded-full ${showGuidelines ? "bg-emerald-500 animate-pulse" : "bg-gray-400"}` }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  "Guidelines: ",
+                  showGuidelines ? "ON" : "OFF"
+                ] })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -100587,6 +101075,27 @@ end`);
           }
         )
       ] }),
+      showGuidelines && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between px-5 py-2 bg-emerald-50/70 border-b border-emerald-100 text-xs text-gray-700 gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 flex-wrap", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-emerald-950 flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-2 h-2 rounded-full bg-emerald-600" }),
+            "Print Guidelines:"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 h-0 border-t-2 border-dashed border-red-500 inline-block" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-red-700", children: "Trim Line (Cut line)" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 h-0 border-t-2 border-dashed border-emerald-600 inline-block" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-emerald-700", children: "Safe Line (Keep text inside)" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-3.5 h-3 rounded-sm border border-dashed border-gray-400 bg-white inline-block" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-600", children: "Bleed Area (Outer edge)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-gray-500 italic hidden md:inline", children: "Toggle Guidelines OFF for finished cut preview" })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -100620,10 +101129,10 @@ end`);
                         ...getShapeStyle("front")
                       },
                       className: "absolute inset-0 overflow-hidden bg-transparent",
-                      children: frontUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                      children: frontSnapshot ? /* @__PURE__ */ jsxRuntime.jsx(
                         "img",
                         {
-                          src: frontUrl,
+                          src: frontSnapshot,
                           alt: "Front",
                           style: getShapeStyle("front"),
                           className: "w-full h-full object-contain pointer-events-none block"
@@ -100632,8 +101141,8 @@ end`);
                         "div",
                         {
                           style: getShapeStyle("front"),
-                          className: "w-full h-full bg-white flex items-center justify-center text-xs text-gray-400",
-                          children: "Front Design"
+                          className: "w-full h-full bg-white flex flex-col items-center justify-center text-xs text-gray-500 gap-2 p-4 text-center",
+                          children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Front Design" })
                         }
                       )
                     }
@@ -100648,10 +101157,10 @@ end`);
                         ...getShapeStyle("back")
                       },
                       className: "absolute inset-0 overflow-hidden bg-transparent",
-                      children: isTwoSided ? backUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                      children: isTwoSided ? backSnapshot ? /* @__PURE__ */ jsxRuntime.jsx(
                         "img",
                         {
-                          src: backUrl,
+                          src: backSnapshot,
                           alt: "Back",
                           style: getShapeStyle("back"),
                           className: "w-full h-full object-contain pointer-events-none block"
@@ -100660,7 +101169,8 @@ end`);
                         "div",
                         {
                           style: getShapeStyle("back"),
-                          className: "w-full h-full bg-white flex flex-col items-center justify-center text-xs text-gray-400 p-4 text-center"
+                          className: "w-full h-full bg-white flex flex-col items-center justify-center text-xs text-gray-500 gap-2 p-4 text-center",
+                          children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Back Design" })
                         }
                       ) : /* @__PURE__ */ jsxRuntime.jsx(
                         "div",
@@ -100711,7 +101221,7 @@ end`);
                   maxWidth: "85%",
                   ...getShapeStyle(activeSide)
                 },
-                className: "relative overflow-hidden bg-transparent flex items-center justify-center",
+                className: `relative overflow-hidden flex items-center justify-center transition-all ${showGuidelines ? "bg-white shadow-xl ring-1 ring-black/10" : "bg-transparent shadow-lg"}`,
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "img",
                   {
@@ -100722,7 +101232,10 @@ end`);
                   }
                 )
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-8 text-center bg-gray-50 rounded-xl border border-gray-200 text-xs text-gray-400", children: [
+            ) : isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-8 text-center bg-white rounded-2xl border border-gray-200 shadow-sm flex flex-col items-center justify-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 border-3 border-[#02bc71] border-t-transparent rounded-full animate-spin" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-gray-800", children: "Generating preview..." })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-8 text-center bg-gray-50 rounded-xl border border-gray-200 text-xs text-gray-400", children: [
               "No preview available for ",
               activeSide,
               " side."
@@ -100780,7 +101293,10 @@ end`);
               children: "Reset"
             }
           )
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500 font-medium", children: "Flat 2D High-Resolution Render" }),
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 text-xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 font-medium", children: "Flat 2D High-Resolution Render" }),
+          showGuidelines ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800 font-semibold text-[11px] border border-emerald-300", children: "Bleed, Trim & Safe Lines" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 py-0.5 rounded-full bg-gray-200 text-gray-700 font-semibold text-[11px]", children: "Finished Trimmed Cut" })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -101473,64 +101989,6 @@ end`);
     }
     window.history.replaceState({}, "", url.toString());
   }
-  const ShapeService = {
-    async getAll(data) {
-      const res = await apiFetch(
-        `/api/cliparts?page=${data.page}&limit=${data.limit}&category=${data.category}&status=true`,
-        {
-          method: "GET"
-        }
-      );
-      return {
-        items: res.data || []
-      };
-    },
-    async getAllExternal(data) {
-      const res = await apiFetch(
-        `/api/external/images?page=${data.page}&limit=${data.limit}&keyType=${data.keyType}&status=true${data.query ? `&query=${data.query}` : ""}`,
-        {
-          method: "GET"
-        }
-      );
-      return {
-        items: res.data || []
-      };
-    },
-    async getTextTemplates(data) {
-      const res = await apiFetch(
-        `/api/text-templates?page=${data.page}&limit=${data.limit}&status=true`,
-        {
-          method: "GET"
-        }
-      );
-      return {
-        items: res.data || []
-      };
-    },
-    async getTextTemplateById(id) {
-      const res = await apiFetch(
-        `/api/text-templates/${id}`,
-        {
-          method: "GET"
-        }
-      );
-      return res.data || null;
-    },
-    async updateTextTemplate(id, body) {
-      const res = await apiFetch(`/api/text-templates/${id}`, {
-        method: "PUT",
-        body
-      });
-      return res;
-    },
-    async convertImages(url) {
-      const res = await apiFetch(`/api/convert-images`, {
-        method: "POST",
-        body: { file: url }
-      });
-      return res;
-    }
-  };
   function spaNavigate(path) {
     if (typeof window === "undefined") return;
     try {
@@ -102437,32 +102895,6 @@ end`);
       ]
     }
   ];
-  async function addImageToCanvas(url) {
-    const canvas2 = useEditorStore.getState().canvas;
-    if (!canvas2) return;
-    const workarea = canvas2.getObjects().find((o2) => o2.name === "workarea");
-    if (!workarea) return;
-    oa.fromURL(url, { crossOrigin: "anonymous" }).then((img) => {
-      const workareaCenter = workarea.getCenterPoint();
-      const workareaBounds = workarea.getBoundingRect();
-      const maxWidth = workareaBounds.width * 0.7;
-      const maxHeight = workareaBounds.height * 0.7;
-      img.scale(Math.min(maxWidth / img.width, maxHeight / img.height));
-      img.set({
-        left: workareaCenter.x,
-        top: workareaCenter.y,
-        originX: "center",
-        originY: "center",
-        selectable: true,
-        hasControls: true
-      });
-      canvas2.add(img);
-      canvas2.setActiveObject(img);
-      canvas2.requestRenderAll();
-    }).catch((err) => {
-      console.warn("Fabric failed to load image from URL:", url, err);
-    });
-  }
   function getWorkareaMetrics(canvas2) {
     const workarea = canvas2.getObjects().find((obj) => obj.name === "workarea");
     if (!workarea) return null;
@@ -103489,10 +103921,15 @@ end`);
         try {
           startLoading();
           const image = await ShapeService.convertImages(url);
-          const imageUrl = image?.success ? image?.url : null;
-          if (imageUrl) addImageToCanvas(imageUrl);
+          const imageUrl = image?.success || image?.status ? image?.url : null;
+          if (imageUrl) {
+            addImageToCanvas(imageUrl);
+          } else {
+            alert(image?.data || image?.message || "Could not load image. Provider rate limit reached (429).");
+          }
         } catch (error2) {
           console.error("Failed to convert image:", error2);
+          alert(error2?.message || "Failed to convert image");
         } finally {
           stopLoading();
           if (window.innerWidth < 768) {
@@ -103737,14 +104174,24 @@ end`);
                 startLoading();
                 const targetUrl = item.largeImage || item.image;
                 if (!targetUrl) return;
-                const image = await ShapeService.convertImages(targetUrl);
-                const imageUrl = image?.success ? image?.url : targetUrl;
-                if (imageUrl) addImageToCanvas(imageUrl);
-                if (window.innerWidth < 768) {
-                  useSidePanelStore.getState().setActivePanel(null);
+                let image = await ShapeService.convertImages(targetUrl);
+                let imageUrl = image?.success || image?.status ? image?.url : null;
+                if (!imageUrl && item.image && item.image !== targetUrl) {
+                  const fallbackRes = await ShapeService.convertImages(item.image);
+                  imageUrl = fallbackRes?.success || fallbackRes?.status ? fallbackRes?.url : item.image;
+                }
+                if (imageUrl) {
+                  await addImageToCanvas(imageUrl);
+                  if (window.innerWidth < 768) {
+                    useSidePanelStore.getState().setActivePanel(null);
+                  }
+                } else {
+                  const errMsg = image?.data || image?.message || "Stock image provider rate limit reached (429). Please try another image.";
+                  alert(`Unable to load image: ${errMsg}`);
                 }
               } catch (error2) {
                 console.error("Failed to convert image:", error2);
+                alert(`Image loading error: ${error2?.message || "Please try another image."}`);
               } finally {
                 stopLoading();
               }
@@ -103774,17 +104221,21 @@ end`);
     canvas2.getObjects("image").forEach((o2) => {
       if (o2.name === "bg-image") canvas2.remove(o2);
     });
-    const bounds = workarea.getBoundingRect();
-    const centerX = bounds.left + bounds.width / 2;
-    const centerY = bounds.top + bounds.height / 2;
+    const center = workarea.getCenterPoint();
+    const waW = workarea.getScaledWidth();
+    const waH = workarea.getScaledHeight();
+    const shapeType = detectShape(workarea.__shapeType);
+    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) => {
       const imgW = img.width || 1;
       const imgH = img.height || 1;
-      const scale2 = Math.max(bounds.width / imgW, bounds.height / imgH);
+      const scale2 = Math.max(waW / imgW, waH / imgH);
       img.scale(scale2);
       img.set({
-        left: centerX,
-        top: centerY,
+        left: center.x,
+        top: center.y,
         originX: "center",
         originY: "center",
         selectable: false,
@@ -103794,15 +104245,22 @@ end`);
         lockMovementY: false,
         name: "bg-image"
       });
-      img.clipPath = new jr({
-        left: centerX,
-        top: centerY,
-        width: bounds.width,
-        height: bounds.height,
+      const exportLeft = Math.round(center.x - waW / 2);
+      const exportTop = Math.round(center.y - waH / 2);
+      const clip2 = createShapeExportClip(
+        shapeType,
+        { left: exportLeft, top: exportTop, width: waW, height: waH, rx: baseRx, ry: baseRy },
+        activeSide
+      ) || new jr({
+        left: center.x,
+        top: center.y,
+        width: waW,
+        height: waH,
         originX: "center",
         originY: "center",
         absolutePositioned: true
       });
+      img.clipPath = clip2;
       canvas2.add(img);
       canvas2.sendObjectToBack(img);
       canvas2.sendObjectToBack(workarea);
@@ -109453,6 +109911,282 @@ END:VCARD`;
       ] })
     ] });
   }
+  function BgRemoveIcon({ size = 16, 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: `shrink-0 ${className}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3v3" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.5 5.5l-2.1 2.1" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12h-3" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 21l9-9" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.2 7.8a2 2 0 0 1 2.8 2.8L6.5 19.1a2 2 0 0 1-1.4.6H3v-2.1a2 2 0 0 1 .6-1.4l8.6-8.4z" })
+        ]
+      }
+    );
+  }
+  const IMGLY_CDN_PATH = "https://staticimgly.com/@imgly/background-removal-data/1.7.0/dist/";
+  let removeBackgroundFn = null;
+  async function getRemoveBackground() {
+    if (!removeBackgroundFn) {
+      const mod = await import("@imgly/background-removal");
+      removeBackgroundFn = mod.removeBackground || mod.default;
+    }
+    return removeBackgroundFn;
+  }
+  function blobToDataUrl(blob) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+  }
+  function loadImageElement(src) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => resolve(img);
+      img.onerror = (err) => reject(err);
+      img.src = src;
+    });
+  }
+  async function extractImageBlob(imageObj) {
+    const currentElement = imageObj.getElement();
+    const currentSrc = imageObj.getSrc() || currentElement?.src;
+    if (currentSrc && (currentSrc.startsWith("data:") || currentSrc.startsWith("blob:"))) {
+      try {
+        const res = await fetch(currentSrc);
+        const blob = await res.blob();
+        if (blob && blob.size > 0) return blob;
+      } catch (e2) {
+        console.warn("Direct data/blob URL fetch failed, trying canvas export:", e2);
+      }
+    }
+    if (currentElement && (currentElement.naturalWidth || currentElement.width)) {
+      try {
+        const w2 = currentElement.naturalWidth || currentElement.width;
+        const h2 = currentElement.naturalHeight || currentElement.height;
+        const offscreen = document.createElement("canvas");
+        offscreen.width = w2;
+        offscreen.height = h2;
+        const ctx = offscreen.getContext("2d");
+        if (ctx) {
+          ctx.drawImage(currentElement, 0, 0, w2, h2);
+          const blob = await new Promise((resolve) => {
+            offscreen.toBlob((b2) => resolve(b2), "image/png");
+          });
+          if (blob && blob.size > 0) return blob;
+        }
+      } catch (e2) {
+        console.warn("Offscreen canvas render failed (possible CORS):", e2);
+      }
+    }
+    try {
+      const dataUrl = imageObj.toDataURL({ format: "png" });
+      if (dataUrl && dataUrl.startsWith("data:")) {
+        const res = await fetch(dataUrl);
+        const blob = await res.blob();
+        if (blob && blob.size > 0) return blob;
+      }
+    } catch (e2) {
+      console.warn("Fabric toDataURL failed:", e2);
+    }
+    if (currentSrc) {
+      try {
+        const res = await fetch(currentSrc, { mode: "cors" });
+        const blob = await res.blob();
+        if (blob && blob.size > 0) return blob;
+      } catch (e2) {
+        console.warn("Remote URL fetch failed:", e2);
+      }
+    }
+    throw new Error("Unable to extract valid image blob from object.");
+  }
+  class BackgroundRemovalService {
+    /**
+     * Automatically cuts out the background of a FabricImage using client-side AI
+     */
+    static async removeBackgroundAI(canvas2, imageObj, onProgress) {
+      if (!canvas2 || !imageObj) return false;
+      const loader = useLoaderStore.getState();
+      try {
+        loader.startLoading("Extracting image data...");
+        onProgress?.("Extracting image data...");
+        const updateProgress = (msg) => {
+          loader.setLoading(true, msg);
+          onProgress?.(msg);
+        };
+        const currentElement = imageObj.getElement();
+        const currentSrc = imageObj.getSrc() || currentElement?.src;
+        if (!currentSrc && !currentElement) {
+          throw new Error("Unable to locate image source");
+        }
+        if (!imageObj.__originalSrc) {
+          imageObj.__originalSrc = currentSrc;
+        }
+        const imageBlob = await extractImageBlob(imageObj);
+        updateProgress("Initializing AI model...");
+        const removeBackground = await getRemoveBackground();
+        let blob;
+        try {
+          blob = await removeBackground(imageBlob, {
+            publicPath: IMGLY_CDN_PATH,
+            model: "isnet_quint8",
+            output: {
+              format: "image/png",
+              quality: 0.95
+            },
+            progress: (key, current, total) => {
+              if (total > 0) {
+                const pct = Math.round(current / total * 100);
+                updateProgress(`Downloading AI model: ${pct}%`);
+              } else {
+                updateProgress("Processing AI model...");
+              }
+            }
+          });
+        } catch (err1) {
+          console.warn("isnet_quint8 failed, attempting isnet_fp16 fallback:", err1);
+          blob = await removeBackground(imageBlob, {
+            publicPath: IMGLY_CDN_PATH,
+            model: "isnet_fp16",
+            output: {
+              format: "image/png",
+              quality: 0.95
+            },
+            progress: (key, current, total) => {
+              if (total > 0) {
+                const pct = Math.round(current / total * 100);
+                updateProgress(`Downloading AI model: ${pct}%`);
+              } else {
+                updateProgress("Processing AI model...");
+              }
+            }
+          });
+        }
+        updateProgress("Applying transparent cutout...");
+        const transparentDataUrl = await blobToDataUrl(blob);
+        const newImgElement = await loadImageElement(transparentDataUrl);
+        const origScaleX = imageObj.scaleX ?? 1;
+        const origScaleY = imageObj.scaleY ?? 1;
+        const origWidth = imageObj.width ?? 1;
+        const origHeight = imageObj.height ?? 1;
+        imageObj.setElement(newImgElement);
+        if (newImgElement.naturalWidth && newImgElement.naturalHeight) {
+          imageObj.set({
+            scaleX: origWidth * origScaleX / newImgElement.naturalWidth,
+            scaleY: origHeight * origScaleY / newImgElement.naturalHeight
+          });
+        }
+        imageObj.__isBgRemoved = true;
+        imageObj.setCoords();
+        canvas2.requestRenderAll();
+        useHistoryStore.getState().saveState();
+        return true;
+      } catch (err) {
+        console.error("Background removal error:", err);
+        throw err;
+      } finally {
+        loader.stopLoading();
+      }
+    }
+    /**
+     * Restores the original image background prior to AI cutout
+     */
+    static async restoreOriginalBackground(canvas2, imageObj) {
+      if (!canvas2 || !imageObj) return false;
+      const originalSrc = imageObj.__originalSrc;
+      if (!originalSrc) return false;
+      const loader = useLoaderStore.getState();
+      try {
+        loader.startLoading("Restoring original background...");
+        const origImgElement = await loadImageElement(originalSrc);
+        const origScaleX = imageObj.scaleX ?? 1;
+        const origScaleY = imageObj.scaleY ?? 1;
+        const origWidth = imageObj.width ?? 1;
+        const origHeight = imageObj.height ?? 1;
+        imageObj.setElement(origImgElement);
+        if (origImgElement.naturalWidth && origImgElement.naturalHeight) {
+          imageObj.set({
+            scaleX: origWidth * origScaleX / origImgElement.naturalWidth,
+            scaleY: origHeight * origScaleY / origImgElement.naturalHeight
+          });
+        }
+        delete imageObj.__originalSrc;
+        imageObj.__isBgRemoved = false;
+        this.removeColorRemovalFilter(canvas2, imageObj, false);
+        imageObj.setCoords();
+        canvas2.requestRenderAll();
+        useHistoryStore.getState().saveState();
+        return true;
+      } catch (err) {
+        console.error("Failed to restore original background:", err);
+        return false;
+      } finally {
+        loader.stopLoading();
+      }
+    }
+    /**
+     * Applies Fabric native RemoveColor filter for instant solid-color transparency
+     */
+    static applyColorRemovalFilter(canvas2, imageObj, color = "#FFFFFF", distance = 0.15, saveHistory = true) {
+      if (!canvas2 || !imageObj) return;
+      const normDistance = Math.max(0.01, Math.min(0.99, distance));
+      let filter = (imageObj.filters || []).find(
+        (f) => f.type === "RemoveColor"
+      );
+      if (!filter) {
+        filter = new Sh.RemoveColor({
+          color,
+          distance: normDistance
+        });
+        imageObj.filters = [...imageObj.filters || [], filter];
+      } else {
+        filter.color = color;
+        filter.distance = normDistance;
+      }
+      imageObj.applyFilters();
+      canvas2.requestRenderAll();
+      if (saveHistory) {
+        useHistoryStore.getState().saveState();
+      }
+    }
+    /**
+     * Removes the solid-color background filter
+     */
+    static removeColorRemovalFilter(canvas2, imageObj, saveHistory = true) {
+      if (!canvas2 || !imageObj || !imageObj.filters) return;
+      imageObj.filters = imageObj.filters.filter(
+        (f) => f.type !== "RemoveColor"
+      );
+      imageObj.applyFilters();
+      canvas2.requestRenderAll();
+      if (saveHistory) {
+        useHistoryStore.getState().saveState();
+      }
+    }
+    /**
+     * Checks if an image has active background removal (AI or color filter)
+     */
+    static hasBackgroundRemoval(imageObj) {
+      if (!imageObj) return false;
+      const hasAI = !!imageObj.__originalSrc || !!imageObj.__isBgRemoved;
+      const hasFilter = !!(imageObj.filters || []).some(
+        (f) => f.type === "RemoveColor"
+      );
+      return hasAI || hasFilter;
+    }
+  }
   function EffectsPanel() {
     const canvas2 = useEditorStore((s2) => s2.canvas);
     const saveState = useHistoryStore((s2) => s2.saveState);
@@ -109474,6 +110208,84 @@ END:VCARD`;
     const { objects } = useSelectionStore();
     const replaceState = useEffectStore((s2) => s2.replaceState);
     const activeObject = objects[0];
+    const [isRemovingBg, setIsRemovingBg] = React.useState(false);
+    const [bgProgress, setBgProgress] = React.useState("");
+    const [colorRemovalEnabled, setColorRemovalEnabled] = React.useState(false);
+    const [colorRemovalColor, setColorRemovalColor] = React.useState("#FFFFFF");
+    const [colorRemovalDistance, setColorRemovalDistance] = React.useState(15);
+    const isImg = !!activeObject && (activeObject.type === "image" || activeObject.type === "FabricImage" || activeObject.isType?.("image") || activeObject.isType?.("FabricImage") || typeof activeObject.getElement === "function");
+    const hasOriginal = !!activeObject?.__originalSrc;
+    const handleRemoveBgAI = async () => {
+      if (!canvas2 || !activeObject || isRemovingBg) return;
+      try {
+        setIsRemovingBg(true);
+        setBgProgress("Starting AI cutout...");
+        await BackgroundRemovalService.removeBackgroundAI(
+          canvas2,
+          activeObject,
+          (msg) => setBgProgress(msg)
+        );
+      } catch (err) {
+        console.error("Failed to remove background:", err);
+        alert("Could not remove background. Please ensure the image is accessible.");
+      } finally {
+        setIsRemovingBg(false);
+        setBgProgress("");
+      }
+    };
+    const handleRestoreBg = async () => {
+      if (!canvas2 || !activeObject || isRemovingBg) return;
+      await BackgroundRemovalService.restoreOriginalBackground(canvas2, activeObject);
+      setColorRemovalEnabled(false);
+    };
+    const handleToggleColorRemoval = (enabled) => {
+      if (!canvas2 || !activeObject) return;
+      setColorRemovalEnabled(enabled);
+      if (enabled) {
+        BackgroundRemovalService.applyColorRemovalFilter(
+          canvas2,
+          activeObject,
+          colorRemovalColor,
+          colorRemovalDistance / 100,
+          true
+        );
+      } else {
+        BackgroundRemovalService.removeColorRemovalFilter(
+          canvas2,
+          activeObject,
+          true
+        );
+      }
+    };
+    const handleColorChange = (hex) => {
+      if (!canvas2 || !activeObject) return;
+      setColorRemovalColor(hex);
+      if (colorRemovalEnabled) {
+        BackgroundRemovalService.applyColorRemovalFilter(
+          canvas2,
+          activeObject,
+          hex,
+          colorRemovalDistance / 100,
+          true
+        );
+      }
+    };
+    const handleDistanceChange = (distPct) => {
+      if (!canvas2 || !activeObject) return;
+      setColorRemovalDistance(distPct);
+      if (colorRemovalEnabled) {
+        BackgroundRemovalService.applyColorRemovalFilter(
+          canvas2,
+          activeObject,
+          colorRemovalColor,
+          distPct / 100,
+          false
+        );
+      }
+    };
+    const handleDistanceCommit = () => {
+      saveState();
+    };
     React.useLayoutEffect(() => {
       const newState = {
         ...initialState,
@@ -109502,6 +110314,16 @@ END:VCARD`;
               newState.contrast = { enabled: true, value: Math.round(val * 100) };
             }
           });
+          const rmFilter = obj.filters.find((f) => f.type === "RemoveColor");
+          if (rmFilter) {
+            setColorRemovalEnabled(true);
+            setColorRemovalColor(rmFilter.color || "#FFFFFF");
+            setColorRemovalDistance(Math.round((rmFilter.distance ?? 0.15) * 100));
+          } else {
+            setColorRemovalEnabled(false);
+          }
+        } else {
+          setColorRemovalEnabled(false);
         }
         if (obj.shadow) {
           try {
@@ -109549,6 +110371,105 @@ END:VCARD`;
       { id: "warm", label: "Warm" }
     ];
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto custom-scrollbar overflow-x-hidden px-4 custom-scrollbar", children: [
+      isImg && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-neutral-850 border border-neutral-700/70 rounded-xl p-3 mb-5 space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(BgRemoveIcon, { size: 18, className: "text-[#02bc71]" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-white", children: "Background Removal" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium tracking-wide uppercase px-1.5 py-0.5 rounded bg-[#02bc71]/20 text-[#02bc71] border border-[#02bc71]/30", children: "AI Powered" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                disabled: isRemovingBg,
+                onClick: handleRemoveBgAI,
+                className: `flex-1 flex items-center justify-center gap-2 py-2 px-3 rounded-lg text-xs font-medium transition-all ${isRemovingBg ? "bg-neutral-700 text-neutral-400 cursor-not-allowed" : "bg-[#02bc71] hover:bg-[#029a5d] text-white shadow active:scale-95 cursor-pointer"}`,
+                children: isRemovingBg ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin h-3.5 w-3.5 text-white", viewBox: "0 0 24 24", fill: "none", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Processing..." })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(BgRemoveIcon, { size: 15 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Cutout Subject (AI)" })
+                ] })
+              }
+            ),
+            hasOriginal && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                disabled: isRemovingBg,
+                onClick: handleRestoreBg,
+                title: "Restore original image background",
+                className: "px-3 py-2 rounded-lg text-xs font-medium bg-neutral-700 hover:bg-neutral-600 text-neutral-200 border border-neutral-600 transition cursor-pointer hover:text-white",
+                children: "Restore"
+              }
+            )
+          ] }),
+          bgProgress && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-[#02bc71] italic text-center animate-pulse pt-0.5", children: bgProgress })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-2 border-t border-neutral-700/50", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-neutral-300 font-medium", children: "Remove Solid Color" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "relative inline-flex items-center cursor-pointer", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: colorRemovalEnabled,
+                  onChange: (e2) => handleToggleColorRemoval(e2.target.checked),
+                  className: "sr-only peer"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-4 bg-neutral-700 rounded-full peer-checked:bg-[#02bc71] transition" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0.5 top-0.5 w-3 h-3 bg-white rounded-full transition peer-checked:left-4.5" })
+            ] })
+          ] }),
+          colorRemovalEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2.5 pt-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs opacity-70", children: "Target Color" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-neutral-400 font-mono", children: colorRemovalColor.toUpperCase() }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CMYKColorPicker,
+                  {
+                    value: colorRemovalColor,
+                    onChange: handleColorChange
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center text-xs", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: "Tolerance / Distance" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-neutral-400", children: [
+                  colorRemovalDistance,
+                  "%"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "range",
+                  min: 1,
+                  max: 99,
+                  value: colorRemovalDistance,
+                  onChange: (e2) => handleDistanceChange(Number(e2.target.value)),
+                  onMouseUp: handleDistanceCommit,
+                  onTouchEnd: handleDistanceCommit,
+                  className: "w-full accent-[#02bc71] cursor-pointer"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 mb-6", children: PRESETS.map((p2) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -156144,7 +157065,7 @@ ${elements2.join("\n")}
       }
     );
   }
-  function AlignLeftIcon() {
+  function AlignLeftIcon$1() {
     return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: [
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "2", width: "10", height: "2" }),
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "6", width: "14", height: "2" }),
@@ -156152,7 +157073,7 @@ ${elements2.join("\n")}
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "14", width: "14", height: "2" })
     ] });
   }
-  function AlignCenterIcon() {
+  function AlignCenterIcon$1() {
     return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: [
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "2", width: "10", height: "2" }),
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "6", width: "14", height: "2" }),
@@ -156160,7 +157081,7 @@ ${elements2.join("\n")}
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "14", width: "14", height: "2" })
     ] });
   }
-  function AlignRightIcon() {
+  function AlignRightIcon$1() {
     return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: [
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "2", width: "10", height: "2" }),
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "6", width: "14", height: "2" }),
@@ -156229,9 +157150,9 @@ ${elements2.join("\n")}
         onClick: () => onChange(next),
         className: "p-1 bg-neutral-800 rounded hover:bg-neutral-700",
         children: [
-          value === "left" && /* @__PURE__ */ jsxRuntime.jsx(AlignLeftIcon, {}),
-          value === "center" && /* @__PURE__ */ jsxRuntime.jsx(AlignCenterIcon, {}),
-          value === "right" && /* @__PURE__ */ jsxRuntime.jsx(AlignRightIcon, {})
+          value === "left" && /* @__PURE__ */ jsxRuntime.jsx(AlignLeftIcon$1, {}),
+          value === "center" && /* @__PURE__ */ jsxRuntime.jsx(AlignCenterIcon$1, {}),
+          value === "right" && /* @__PURE__ */ jsxRuntime.jsx(AlignRightIcon$1, {})
         ]
       }
     );
@@ -156944,8 +157865,13 @@ ${elements2.join("\n")}
     const { type, objects } = useSelectionStore();
     const { canvas: canvas2, startCropping } = useEditorStore();
     const saveState = useHistoryStore((s2) => s2.saveState);
-    const hasMask = !!canvas2?.getActiveObject()?.clipPath;
     const setActivePanel = useSidePanelStore((s2) => s2.setActivePanel);
+    const [isRemovingBg, setIsRemovingBg] = React.useState(false);
+    const [bgStatus, setBgStatus] = React.useState(null);
+    const activeObj = canvas2?.getActiveObject();
+    const hasMask = !!activeObj?.clipPath;
+    activeObj && (activeObj.type === "image" || activeObj.isType?.("image"));
+    const isBgRemoved = !!activeObj?.__originalSrc || !!activeObj?.__isBgRemoved;
     if (type !== "image" || objects?.[0]?.name === "qr" || objects?.[0]?.name === "barcode")
       return null;
     const handleApplyMaskClick = () => {
@@ -156968,6 +157894,33 @@ ${elements2.join("\n")}
       startCrop(canvas2, obj);
       startCropping();
     };
+    const handleRemoveBgClick = async () => {
+      if (!canvas2 || !activeObj || isRemovingBg) return;
+      if (isBgRemoved) {
+        setIsRemovingBg(true);
+        try {
+          await BackgroundRemovalService.restoreOriginalBackground(canvas2, activeObj);
+        } finally {
+          setIsRemovingBg(false);
+        }
+        return;
+      }
+      try {
+        setIsRemovingBg(true);
+        setBgStatus("Removing BG...");
+        await BackgroundRemovalService.removeBackgroundAI(
+          canvas2,
+          activeObj,
+          (status) => setBgStatus(status)
+        );
+      } catch (err) {
+        console.error("BG removal failed:", err);
+        alert("Background removal could not be completed: " + (err.message || err));
+      } finally {
+        setIsRemovingBg(false);
+        setBgStatus(null);
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-white py-2 rounded-md shadow-lg z-50", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -156980,14 +157933,27 @@ ${elements2.join("\n")}
           ]
         }
       ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          className: `text-sm px-2 py-[5px] hover:bg-[#8f99a826] hover:rounded-sm flex gap-1.5 items-center cursor-pointer transition-colors ${isBgRemoved ? "text-emerald-400 font-medium" : ""} ${isRemovingBg ? "opacity-75 cursor-wait" : ""}`,
+          onClick: handleRemoveBgClick,
+          disabled: isRemovingBg,
+          title: isBgRemoved ? "Click to restore original background" : "Automatically remove image background with AI",
+          children: [
+            isRemovingBg ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(BgRemoveIcon, { size: 15 }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: isRemovingBg ? bgStatus || "Processing..." : isBgRemoved ? "Restore BG" : "Remove BG" })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           className: "text-sm px-1 py-[5px] hover:bg-[#8f99a826] hover:rounded-sm cursor-pointer",
           onClick: () => {
-            const canvas22 = useEditorStore.getState().canvas;
-            if (!canvas22) return;
-            fitImageToPage(canvas22);
+            const cvs = useEditorStore.getState().canvas;
+            if (!cvs) return;
+            fitImageToPage(cvs);
             saveState();
           },
           children: "Fit to page"
@@ -157001,10 +157967,17 @@ ${elements2.join("\n")}
           children: hasMask ? "Remove Mask" : "Apply Mask"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "text-sm px-1 py-[5px] hover:bg-[#8f99a826] hover:rounded-sm cursor-pointer flex items-center", onClick: handleCropClick, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CropIcon, {}),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Crop" })
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          className: "text-sm px-1 py-[5px] hover:bg-[#8f99a826] hover:rounded-sm cursor-pointer flex items-center gap-1",
+          onClick: handleCropClick,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CropIcon, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Crop" })
+          ]
+        }
+      )
     ] });
   }
   function QrEffectToolbar() {
@@ -157645,6 +158618,102 @@ ${elements2.join("\n")}
       )
     }
   );
+  const AlignTopIcon = ({ className = "", size = 18 }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: `shrink-0 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "2", width: "14", height: "2", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4.5", y: "5.5", width: "2.5", height: "7.5", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "5.5", width: "2.5", height: "4.5", rx: "0.5", fill: "currentColor" })
+      ]
+    }
+  );
+  const AlignLeftIcon = ({ className = "", size = 18 }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: `shrink-0 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "2", width: "2", height: "14", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5.5", y: "4.5", width: "7.5", height: "2.5", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5.5", y: "10", width: "4.5", height: "2.5", rx: "0.5", fill: "currentColor" })
+      ]
+    }
+  );
+  const AlignMiddleIcon = ({ className = "", size = 18 }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: `shrink-0 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2", y1: "9", x2: "16", y2: "9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4.5", y: "6", width: "2.5", height: "6", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "3.5", width: "2.5", height: "11", rx: "0.5", fill: "currentColor" })
+      ]
+    }
+  );
+  const AlignCenterIcon = ({ className = "", size = 18 }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: `shrink-0 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "2", x2: "9", y2: "16", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "4.5", width: "6", height: "2.5", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3.5", y: "10", width: "11", height: "2.5", rx: "0.5", fill: "currentColor" })
+      ]
+    }
+  );
+  const AlignBottomIcon = ({ className = "", size = 18 }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: `shrink-0 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "14", width: "14", height: "2", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4.5", y: "8", width: "2.5", height: "4.5", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "5", width: "2.5", height: "7.5", rx: "0.5", fill: "currentColor" })
+      ]
+    }
+  );
+  const AlignRightIcon = ({ className = "", size = 18 }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: `shrink-0 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "2", width: "2", height: "14", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "4.5", width: "4.5", height: "2.5", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "10", width: "7.5", height: "2.5", rx: "0.5", fill: "currentColor" })
+      ]
+    }
+  );
   function PositionPicker() {
     const canvas2 = useEditorStore((s2) => s2.canvas);
     const saveState = useHistoryStore((s2) => s2.saveState);
@@ -157828,26 +158897,114 @@ ${elements2.join("\n")}
       showPosition && /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "fixed md:absolute top-[112px] md:top-10 left-1/2 -translate-x-1/2 bg-neutral-800 text-white rounded-xl shadow-xl p-4 w-[260px] z-[9999]",
+          className: "fixed md:absolute top-[112px] md:top-10 left-1/2 -translate-x-1/2 bg-neutral-800 text-white rounded-xl shadow-xl p-4 w-[280px] z-[9999]",
           onClick: (e2) => e2.stopPropagation(),
           onMouseDown: (e2) => e2.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase opacity-60 mb-2", children: "Layering" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2 mb-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => bringForward(), children: "Forward" }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => sendBackward(), children: "Backward" }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => bringToFront(), children: "To Front" }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => sendToBack(), children: "To Back" })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase opacity-60 mb-2 font-medium tracking-wide", children: "Layering" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-1.5 mb-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => bringForward(),
+                  className: "flex items-center px-2 py-1.5 rounded text-sm text-gray-200 hover:text-white hover:bg-white/10 transition-colors text-left",
+                  children: "Forward"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => sendBackward(),
+                  className: "flex items-center px-2 py-1.5 rounded text-sm text-gray-200 hover:text-white hover:bg-white/10 transition-colors text-left",
+                  children: "Backward"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => bringToFront(),
+                  className: "flex items-center px-2 py-1.5 rounded text-sm text-gray-200 hover:text-white hover:bg-white/10 transition-colors text-left",
+                  children: "To Front"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => sendToBack(),
+                  className: "flex items-center px-2 py-1.5 rounded text-sm text-gray-200 hover:text-white hover:bg-white/10 transition-colors text-left",
+                  children: "To Back"
+                }
+              )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-neutral-700 my-2" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase opacity-60 mb-2", children: "Position" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => handleAlign("left"), children: "Align left" }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => handleAlign("top"), children: "Align top" }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => handleAlign("center"), children: "Align center" }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => handleAlign("middle"), children: "Align middle" }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => handleAlign("right"), children: "Align right" }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => handleAlign("bottom"), children: "Align bottom" })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase opacity-60 mb-2 font-medium tracking-wide", children: "Alignments" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => handleAlign("top"),
+                  className: "flex items-center gap-2.5 px-2 py-1.5 rounded text-sm text-gray-200 hover:text-white hover:bg-white/10 transition-colors text-left",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(AlignTopIcon, { size: 18 }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Top" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => handleAlign("left"),
+                  className: "flex items-center gap-2.5 px-2 py-1.5 rounded text-sm text-gray-200 hover:text-white hover:bg-white/10 transition-colors text-left",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(AlignLeftIcon, { size: 18 }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Left" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => handleAlign("middle"),
+                  className: "flex items-center gap-2.5 px-2 py-1.5 rounded text-sm text-gray-200 hover:text-white hover:bg-white/10 transition-colors text-left",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(AlignMiddleIcon, { size: 18 }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Middle" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => handleAlign("center"),
+                  className: "flex items-center gap-2.5 px-2 py-1.5 rounded text-sm text-gray-200 hover:text-white hover:bg-white/10 transition-colors text-left",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(AlignCenterIcon, { size: 18 }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Center" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => handleAlign("bottom"),
+                  className: "flex items-center gap-2.5 px-2 py-1.5 rounded text-sm text-gray-200 hover:text-white hover:bg-white/10 transition-colors text-left",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(AlignBottomIcon, { size: 18 }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Bottom" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => handleAlign("right"),
+                  className: "flex items-center gap-2.5 px-2 py-1.5 rounded text-sm text-gray-200 hover:text-white hover:bg-white/10 transition-colors text-left",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(AlignRightIcon, { size: 18 }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Right" })
+                  ]
+                }
+              )
             ] })
           ]
         }
@@ -158527,14 +159684,45 @@ ${elements2.join("\n")}
         top: (workarea.top ?? 0) + dy
       });
       workarea.setCoords();
+      if (workarea.clipPath) {
+        workarea.clipPath.set({
+          left: (workarea.clipPath.left ?? 0) + dx,
+          top: (workarea.clipPath.top ?? 0) + dy
+        });
+        workarea.clipPath.setCoords();
+      }
       canvas2.getObjects().forEach((obj) => {
-        if (obj.name === "workarea" || obj.name?.startsWith("overlay-")) return;
+        if (obj.name === "workarea" || obj.name?.startsWith("overlay-") || obj.name?.startsWith("guideline-")) {
+          return;
+        }
         obj.set({
           left: (obj.left ?? 0) + dx,
           top: (obj.top ?? 0) + dy
         });
         obj.setCoords();
+        if (obj.clipPath) {
+          obj.clipPath.set({
+            left: (obj.clipPath.left ?? 0) + dx,
+            top: (obj.clipPath.top ?? 0) + dy
+          });
+          obj.clipPath.setCoords();
+        }
       });
+      if (canvas2.backgroundImage) {
+        const bg = canvas2.backgroundImage;
+        bg.set({
+          left: (bg.left ?? 0) + dx,
+          top: (bg.top ?? 0) + dy
+        });
+        bg.setCoords();
+        if (bg.clipPath) {
+          bg.clipPath.set({
+            left: (bg.clipPath.left ?? 0) + dx,
+            top: (bg.clipPath.top ?? 0) + dy
+          });
+          bg.clipPath.setCoords();
+        }
+      }
       createOverlays(canvas2, workarea);
       canvas2.requestRenderAll();
     };
@@ -158560,7 +159748,7 @@ ${elements2.join("\n")}
     canvas2.selection = true;
     canvas2.defaultCursor = "default";
     canvas2.forEachObject((obj) => {
-      if (obj.name !== "workarea" && !obj.name?.startsWith("overlay-")) {
+      if (obj.name !== "workarea" && obj.name !== "bg-image" && !obj.name?.startsWith("overlay-") && !obj.name?.startsWith("guideline-")) {
         obj.selectable = true;
         obj.evented = true;
       } else {
@@ -158649,8 +159837,12 @@ ${elements2.join("\n")}
     const containerWidth = container.clientWidth;
     const containerHeight = container.clientHeight;
     const size = productData?.optionsMap?.size?.split(" x ") || ["0", "0"];
-    const printWidth = productData?.optionsMap?.productorientation === "Vertical" ? Number(size[0].replace('"', "")) : Number(size[1].replace('"', "")) + Number(productData?.bleedArea || 0);
-    const printHeight = productData?.optionsMap?.productorientation === "Vertical" ? Number(size[1].replace('"', "")) : Number(size[0].replace('"', "")) + Number(productData?.bleedArea || 0);
+    const bleed = Number(productData?.bleedArea || 0);
+    const rawW = Number(size[0].replace('"', "")) || 3.5;
+    const rawH = Number(size[1].replace('"', "")) || 2;
+    const isVertical = productData?.optionsMap?.productorientation === "Vertical" || productData?.optionsMap?.orientation === "Vertical";
+    const printWidth = (isVertical ? rawW : rawH) + bleed;
+    const printHeight = (isVertical ? rawH : rawW) + bleed;
     const printDPI = 72;
     const fullWidth = printWidth * printDPI;
     const fullHeight = printHeight * printDPI;
@@ -158681,7 +159873,6 @@ ${elements2.join("\n")}
     );
     const rawShape = productData?.optionsMap?.shape || productData?.optionsMap?.Shape || productData?.shape || "";
     const shapeType = detectShape(rawShape);
-    const isVertical = productData?.optionsMap?.productorientation === "Vertical" || productData?.optionsMap?.orientation === "Vertical";
     const { rx, ry, radiusOfCanvas } = calculateShapeRadius(
       shapeType,
       fullWidth,
@@ -158692,6 +159883,8 @@ ${elements2.join("\n")}
       width: fullWidth,
       height: fullHeight,
       fill: "#ffffff",
+      strokeWidth: 0,
+      stroke: null,
       selectable: false,
       evented: false,
       name: "workarea",
@@ -158721,22 +159914,48 @@ ${elements2.join("\n")}
     return workarea;
   }
   function setupHistoryRecording(canvas2) {
-    const recordHistory = (e2) => {
+    let modifiedTimer = null;
+    const handleObjectAddedOrRemoved = (e2) => {
       const target = e2?.target;
       if (!target) return;
-      if (target.name === "workarea") return;
+      const name = target.name || "";
+      if (name === "workarea" || name === "watermark" || name.startsWith("overlay-") || name.startsWith("guideline-")) {
+        return;
+      }
       if (useHistoryStore.getState().isRestoring) return;
+      if (modifiedTimer) {
+        clearTimeout(modifiedTimer);
+        modifiedTimer = null;
+      }
       requestAnimationFrame(() => {
-        useHistoryStore.getState().saveState();
+        if (!useHistoryStore.getState().isRestoring) {
+          useHistoryStore.getState().saveState();
+        }
       });
     };
-    canvas2.on("object:added", recordHistory);
-    canvas2.on("object:modified", recordHistory);
-    canvas2.on("object:removed", recordHistory);
+    const handleObjectModified = (e2) => {
+      const target = e2?.target;
+      if (!target) return;
+      const name = target.name || "";
+      if (name === "workarea" || name === "watermark" || name.startsWith("overlay-") || name.startsWith("guideline-")) {
+        return;
+      }
+      if (useHistoryStore.getState().isRestoring) return;
+      clearTimeout(modifiedTimer);
+      modifiedTimer = setTimeout(() => {
+        if (!useHistoryStore.getState().isRestoring) {
+          useHistoryStore.getState().saveState();
+        }
+      }, 150);
+    };
+    canvas2.on("object:added", handleObjectAddedOrRemoved);
+    canvas2.on("object:removed", handleObjectAddedOrRemoved);
+    canvas2.on("object:modified", handleObjectModified);
     return () => {
-      canvas2.off("object:added", recordHistory);
-      canvas2.off("object:modified", recordHistory);
-      canvas2.off("object:removed", recordHistory);
+      if (modifiedTimer) clearTimeout(modifiedTimer);
+      canvas2.off("object:added", handleObjectAddedOrRemoved);
+      canvas2.off("object:removed", handleObjectAddedOrRemoved);
+      canvas2.off("object:modified", handleObjectModified);
     };
   }
   function setupDoublClickCrop(canvas2) {
@@ -158948,8 +160167,10 @@ ${elements2.join("\n")}
           createWorkarea(canvas2, containerRef.current, productData, targetPage);
         }
       }
-      historyStore.saveState();
       useHistoryStore.setState({ isRestoring: false });
+      if ((useHistoryStore.getState().pages[targetPage]?.history?.length ?? 0) === 0) {
+        historyStore.saveState();
+      }
     } finally {
       useLoaderStore.getState().stopLoading();
     }
@@ -158989,9 +160210,62 @@ ${elements2.join("\n")}
   function doReset(canvas2, setZoom) {
     const workarea = getWorkarea(canvas2);
     const initialZoom = workarea ? workarea.__initialZoom || 1 : 1;
-    const center = new ot(canvas2.getWidth() / 2, canvas2.getHeight() / 2);
-    canvas2.zoomToPoint(center, initialZoom);
+    const canvasW = canvas2.getWidth();
+    const canvasH = canvas2.getHeight();
+    canvas2.setViewportTransform([1, 0, 0, 1, 0, 0]);
+    canvas2.setZoom(1);
     if (workarea) {
+      const prevLeft = workarea.left ?? 0;
+      const prevTop = workarea.top ?? 0;
+      canvas2.centerObject(workarea);
+      workarea.setCoords();
+      const dx = (workarea.left ?? 0) - prevLeft;
+      const dy = (workarea.top ?? 0) - prevTop;
+      if (Math.abs(dx) > 1e-3 || Math.abs(dy) > 1e-3) {
+        canvas2.getObjects().forEach((obj) => {
+          if (obj.name === "workarea" || obj.name?.startsWith("overlay-") || obj.name?.startsWith("guideline-")) {
+            return;
+          }
+          obj.set({
+            left: (obj.left ?? 0) + dx,
+            top: (obj.top ?? 0) + dy
+          });
+          obj.setCoords();
+          if (obj.clipPath) {
+            obj.clipPath.set({
+              left: (obj.clipPath.left ?? 0) + dx,
+              top: (obj.clipPath.top ?? 0) + dy
+            });
+            obj.clipPath.setCoords();
+          }
+        });
+        if (workarea.clipPath) {
+          workarea.clipPath.set({
+            left: (workarea.clipPath.left ?? 0) + dx,
+            top: (workarea.clipPath.top ?? 0) + dy
+          });
+          workarea.clipPath.setCoords();
+        }
+        if (canvas2.backgroundImage) {
+          const bg = canvas2.backgroundImage;
+          bg.set({
+            left: (bg.left ?? 0) + dx,
+            top: (bg.top ?? 0) + dy
+          });
+          bg.setCoords();
+          if (bg.clipPath) {
+            bg.clipPath.set({
+              left: (bg.clipPath.left ?? 0) + dx,
+              top: (bg.clipPath.top ?? 0) + dy
+            });
+            bg.clipPath.setCoords();
+          }
+        }
+      }
+      if (initialZoom !== 1) {
+        const center = new ot(canvasW / 2, canvasH / 2);
+        canvas2.zoomToPoint(center, initialZoom);
+      }
       createOverlays(canvas2, workarea);
     }
     const activeObject = canvas2.getActiveObject();
@@ -158999,7 +160273,7 @@ ${elements2.join("\n")}
     canvas2.requestRenderAll();
     setZoom(initialZoom);
   }
-  function useCanvasZoom(canvas2) {
+  function useCanvasZoom(canvas2, options) {
     const [zoom, setZoom] = React.useState(1);
     const rafRef = React.useRef(null);
     const wheelAccum = React.useRef(0);
@@ -159090,12 +160364,13 @@ ${elements2.join("\n")}
           } else if (e2.key === "0") {
             e2.preventDefault();
             doReset(canvas2, setZoom);
+            options?.onReset?.();
           }
         }
       };
       window.addEventListener("keydown", onKey);
       return () => window.removeEventListener("keydown", onKey);
-    }, [canvas2, applyZoom]);
+    }, [canvas2, applyZoom, options]);
     const zoomIn = React.useCallback(() => {
       if (!canvas2) return;
       applyZoom(clamp(canvas2.getZoom() + STEP, MIN_ZOOM, MAX_ZOOM));
@@ -159107,7 +160382,8 @@ ${elements2.join("\n")}
     const zoomReset = React.useCallback(() => {
       if (!canvas2) return;
       doReset(canvas2, setZoom);
-    }, [canvas2]);
+      options?.onReset?.();
+    }, [canvas2, options]);
     const zoomTo = React.useCallback(
       (value) => applyZoom(clamp(value, MIN_ZOOM, MAX_ZOOM)),
       [applyZoom]
@@ -159122,9 +160398,9 @@ ${elements2.join("\n")}
       zoomTo
     };
   }
-  function ZoomControls() {
+  function ZoomControls({ onReset }) {
     const canvas2 = useEditorStore((s2) => s2.canvas);
-    const { zoom, atMin, atMax, zoomIn, zoomOut, zoomReset, zoomTo } = useCanvasZoom(canvas2);
+    const { zoom, atMin, atMax, zoomIn, zoomOut, zoomReset, zoomTo } = useCanvasZoom(canvas2, { onReset });
     const [sliderOpen, setSliderOpen] = React.useState(false);
     const sliderRef = React.useRef(null);
     React.useEffect(() => {
@@ -159350,6 +160626,18 @@ ${elements2.join("\n")}
           e2.preventDefault();
           handlePaste();
         }
+        if (isModifier && e2.key.toLowerCase() === "z") {
+          e2.preventDefault();
+          if (e2.shiftKey) {
+            useHistoryStore.getState().redoAction();
+          } else {
+            useHistoryStore.getState().undo();
+          }
+        }
+        if (isModifier && e2.key.toLowerCase() === "y") {
+          e2.preventDefault();
+          useHistoryStore.getState().redoAction();
+        }
       };
       window.addEventListener("keydown", handleKeyDown);
       return () => {
@@ -159466,6 +160754,9 @@ ${elements2.join("\n")}
               pageJSON.current.back = backData;
             }
           }
+          if (useHistoryStore.getState().pages.front.history.length === 0) {
+            useHistoryStore.getState().saveState();
+          }
           useEditorStore.getState().setPages({ ...pageJSON.current });
           return () => {
             cleanupHistory();
@@ -159583,7 +160874,7 @@ ${elements2.join("\n")}
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[1px] h-6 bg-gray-300/50 mx-3" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ZoomControls, {})
+        /* @__PURE__ */ jsxRuntime.jsx(ZoomControls, { onReset: () => setIsPanning(false) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",