vibrant-tool 0.1.7 → 0.1.9

package/dist/vibrant-tool.es.js

@@ -1074,9 +1074,9 @@ const useLoaderStore = create((set) => ({
 function GlobalLoader() {
   const { isLoading, text } = useLoaderStore();
   if (!isLoading) return null;
-  return /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "h-9 w-9 animate-spin rounded-full border-3 border-[#02bc71] border-t-transparent" }),
-    text && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-neutral-200", children: text })
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "relative flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-10 w-10 animate-spin rounded-full border-3 border-[#02bc71] border-t-transparent shadow-sm" }) }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-neutral-100 tracking-wide", children: text || "Please wait..." })
   ] }) });
 }
 function DownloadIcon() {
@@ -9026,7 +9026,7 @@ async function loadPageToCanvas(canvas2, json, pageSide) {
       waH,
       isVertical
     );
-    workarea.set({ rx, ry });
+    workarea.set({ rx, ry, strokeWidth: 0, stroke: null });
     workarea.__radiusOfCanvas = radiusOfCanvas;
     workarea.__shapeType = shapeType;
     workarea.__isVertical = isVertical;
@@ -9045,8 +9045,61 @@ async function loadPageToCanvas(canvas2, json, pageSide) {
             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);
@@ -9065,8 +9118,7 @@ async function loadPageToCanvas(canvas2, json, pageSide) {
     } else {
       obj.set({
         selectable: false,
-        evented: false,
-        hasControls: false
+        evented: false
       });
     }
     obj.setCoords();
@@ -9084,69 +9136,89 @@ async function loadPageToCanvas(canvas2, json, pageSide) {
     }, 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, i) => {
+      g2.visible = prevVis[i];
     });
-    cvs.clipPath = prevClip;
+    cvs.backgroundColor = prevBg;
+    cvs.renderAll();
   }
-  guides.forEach((g2, i) => {
-    g2.visible = prevVis[i];
-  });
-  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");
@@ -9164,7 +9236,7 @@ async function renderPageDataUrl(json, baseCanvas, multiplier = 1, targetSide) {
     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;
@@ -9173,6 +9245,28 @@ async function renderPageDataUrl(json, baseCanvas, multiplier = 1, targetSide) {
     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",
@@ -9182,34 +9276,26 @@ const useHistoryStore = create((set, get) => ({
     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;
@@ -9225,9 +9311,11 @@ const useHistoryStore = create((set, get) => ({
     });
   },
   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({
@@ -9240,14 +9328,28 @@ const useHistoryStore = create((set, get) => ({
         }
       }
     });
-    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,
@@ -9259,9 +9361,21 @@ const useHistoryStore = create((set, get) => ({
         }
       }
     });
-    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 = {
@@ -9596,6 +9710,189 @@ function exportDesignJSON(canvas2, workarea) {
   });
   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 (e3) {
+          reject(e3);
+        }
+      };
+      img.onerror = (e3) => {
+        clearTimeout(timer);
+        reject(e3);
+      };
+      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;
@@ -9675,32 +9972,23 @@ async function processSVGWithEmbeds(svg) {
   ];
   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;
@@ -99899,7 +100187,16 @@ async function convertPdfToDeviceCMYK(rawBuffer) {
     });
   };
   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");
@@ -99921,7 +100218,7 @@ async function convertPdfToDeviceCMYK(rawBuffer) {
       } 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"));
       }
@@ -99943,7 +100240,6 @@ async function convertPdfToDeviceCMYK(rawBuffer) {
       p2.node.set(PDFName.of("Resources"), res);
     }
     res.set(PDFName.of("ColorSpace"), context.obj({
-      DefaultRGB: PDFName.of("DeviceCMYK"),
       DefaultCMYK: PDFName.of("DeviceCMYK")
     }));
   }
@@ -100023,6 +100319,20 @@ async function registerFontsInPdfMake(fontList) {
 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}"`;
@@ -100069,17 +100379,114 @@ async function generateAndDownloadPDF(pages, width, height, filename = `design-$
       }
     }
     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 (e3) {
+    console.warn("Failed to inline image for export:", e3);
+  }
+}
 async function downloadCanvasWorkarea(canvas2, type, scale2 = 1, pages, currentPageSide, dpi) {
   const workarea = canvas2.getObjects().find((obj) => obj.name === "workarea");
   if (!workarea) {
@@ -100090,6 +100497,10 @@ async function downloadCanvasWorkarea(canvas2, type, scale2 = 1, pages, currentP
     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;
@@ -100111,6 +100522,8 @@ async function downloadCanvasWorkarea(canvas2, type, scale2 = 1, pages, currentP
     "cropY",
     "rx",
     "ry",
+    "crossOrigin",
+    "src",
     "__radiusOfCanvas",
     "__shapeType",
     "__pageSide"
@@ -100120,8 +100533,31 @@ async function downloadCanvasWorkarea(canvas2, type, scale2 = 1, pages, currentP
     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);
@@ -100135,35 +100571,40 @@ async function downloadCanvasWorkarea(canvas2, type, scale2 = 1, pages, currentP
     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 = "";
@@ -100222,18 +100663,41 @@ async function downloadCanvasWorkarea(canvas2, type, scale2 = 1, pages, currentP
         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);
@@ -100430,15 +100894,17 @@ function DownloadPopover({ onClose }) {
     }
   );
 }
-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] = useState("3d");
+  const [showGuidelines, setShowGuidelines] = useState(true);
   const [activeSide, setActiveSide] = useState(currentPage || "front");
-  const [frontUrl, setFrontUrl] = useState("");
-  const [backUrl, setBackUrl] = useState("");
+  const [frontSnapshot, setFrontSnapshot] = useState("");
+  const [backSnapshot, setBackSnapshot] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
   const [rotX, setRotX] = useState(15);
   const [rotY, setRotY] = useState(-25);
   const [isAutoSpin, setIsAutoSpin] = useState(true);
@@ -100448,24 +100914,27 @@ function PreviewModal({ onClose }) {
     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 });
         }
       }
     };
@@ -100473,7 +100942,7 @@ function PreviewModal({ onClose }) {
     return () => {
       isMounted = false;
     };
-  }, [canvas2, isTwoSided]);
+  }, [canvas2, isTwoSided, showGuidelines]);
   useEffect(() => {
     if (!isAutoSpin || isDragging || viewMode !== "3d") return;
     let animId;
@@ -100506,6 +100975,9 @@ function PreviewModal({ onClose }) {
   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;
@@ -100547,14 +101019,14 @@ function PreviewModal({ onClose }) {
         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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-3 border-b border-gray-200 bg-gray-50/90", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-[#02bc71] animate-pulse" }),
-        /* @__PURE__ */ jsx("h2", { className: "text-sm font-bold text-gray-900", children: "3D Design Preview" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-bold text-gray-900", children: "Design Preview" }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center bg-gray-200 p-0.5 rounded-lg border border-gray-300 text-xs", children: [
           /* @__PURE__ */ jsx(
             "button",
@@ -100574,7 +101046,23 @@ function PreviewModal({ onClose }) {
               children: "2D Proof"
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ 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__ */ jsx("span", { className: `w-2 h-2 rounded-full ${showGuidelines ? "bg-emerald-500 animate-pulse" : "bg-gray-400"}` }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Guidelines: ",
+                showGuidelines ? "ON" : "OFF"
+              ] })
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx(
         "button",
@@ -100586,6 +101074,27 @@ function PreviewModal({ onClose }) {
         }
       )
     ] }),
+    showGuidelines && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-4 flex-wrap", children: [
+        /* @__PURE__ */ jsxs("span", { className: "font-semibold text-emerald-950 flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 rounded-full bg-emerald-600" }),
+          "Print Guidelines:"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-4 h-0 border-t-2 border-dashed border-red-500 inline-block" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-red-700", children: "Trim Line (Cut line)" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-4 h-0 border-t-2 border-dashed border-emerald-600 inline-block" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-emerald-700", children: "Safe Line (Keep text inside)" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-3.5 h-3 rounded-sm border border-dashed border-gray-400 bg-white inline-block" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: "Bleed Area (Outer edge)" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-gray-500 italic hidden md:inline", children: "Toggle Guidelines OFF for finished cut preview" })
+    ] }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -100619,10 +101128,10 @@ function PreviewModal({ onClose }) {
                       ...getShapeStyle("front")
                     },
                     className: "absolute inset-0 overflow-hidden bg-transparent",
-                    children: frontUrl ? /* @__PURE__ */ jsx(
+                    children: frontSnapshot ? /* @__PURE__ */ jsx(
                       "img",
                       {
-                        src: frontUrl,
+                        src: frontSnapshot,
                         alt: "Front",
                         style: getShapeStyle("front"),
                         className: "w-full h-full object-contain pointer-events-none block"
@@ -100631,8 +101140,8 @@ function PreviewModal({ onClose }) {
                       "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__ */ jsx("span", { children: "Front Design" })
                       }
                     )
                   }
@@ -100647,10 +101156,10 @@ function PreviewModal({ onClose }) {
                       ...getShapeStyle("back")
                     },
                     className: "absolute inset-0 overflow-hidden bg-transparent",
-                    children: isTwoSided ? backUrl ? /* @__PURE__ */ jsx(
+                    children: isTwoSided ? backSnapshot ? /* @__PURE__ */ jsx(
                       "img",
                       {
-                        src: backUrl,
+                        src: backSnapshot,
                         alt: "Back",
                         style: getShapeStyle("back"),
                         className: "w-full h-full object-contain pointer-events-none block"
@@ -100659,7 +101168,8 @@ function PreviewModal({ onClose }) {
                       "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__ */ jsx("span", { children: "Back Design" })
                       }
                     ) : /* @__PURE__ */ jsx(
                       "div",
@@ -100710,7 +101220,7 @@ function PreviewModal({ onClose }) {
                 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__ */ jsx(
                 "img",
                 {
@@ -100721,7 +101231,10 @@ function PreviewModal({ onClose }) {
                 }
               )
             }
-          ) : /* @__PURE__ */ jsxs("div", { className: "p-8 text-center bg-gray-50 rounded-xl border border-gray-200 text-xs text-gray-400", children: [
+          ) : isLoading ? /* @__PURE__ */ 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__ */ jsx("div", { className: "w-8 h-8 border-3 border-[#02bc71] border-t-transparent rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-gray-800", children: "Generating preview..." })
+          ] }) : /* @__PURE__ */ 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."
@@ -100779,7 +101292,10 @@ function PreviewModal({ onClose }) {
             children: "Reset"
           }
         )
-      ] }) : /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 font-medium", children: "Flat 2D High-Resolution Render" }),
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-gray-500 font-medium", children: "Flat 2D High-Resolution Render" }),
+        showGuidelines ? /* @__PURE__ */ 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__ */ 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__ */ jsx(
         "button",
         {
@@ -101472,64 +101988,6 @@ function setQueryParam(key, value) {
   }
   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 {
@@ -102436,32 +102894,6 @@ const elements = [
     ]
   }
 ];
-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;
@@ -103488,10 +103920,15 @@ function PhotosPanel() {
       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) {
@@ -103736,14 +104173,24 @@ function PhotosPanel() {
               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();
             }
@@ -103773,17 +104220,21 @@ async function addBackgroundImage(url) {
   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,
@@ -103793,15 +104244,22 @@ async function addBackgroundImage(url) {
       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);
@@ -109452,6 +109910,282 @@ function ShadowControl({
     ] })
   ] });
 }
+function BgRemoveIcon({ size = 16, className = "" }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: `shrink-0 ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 3v3" }),
+        /* @__PURE__ */ jsx("path", { d: "M18.5 5.5l-2.1 2.1" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 12h-3" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 21l9-9" }),
+        /* @__PURE__ */ 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 (e3) {
+      console.warn("Direct data/blob URL fetch failed, trying canvas export:", e3);
+    }
+  }
+  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 (e3) {
+      console.warn("Offscreen canvas render failed (possible CORS):", e3);
+    }
+  }
+  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 (e3) {
+    console.warn("Fabric toDataURL failed:", e3);
+  }
+  if (currentSrc) {
+    try {
+      const res = await fetch(currentSrc, { mode: "cors" });
+      const blob = await res.blob();
+      if (blob && blob.size > 0) return blob;
+    } catch (e3) {
+      console.warn("Remote URL fetch failed:", e3);
+    }
+  }
+  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);
@@ -109473,6 +110207,84 @@ function EffectsPanel() {
   const { objects } = useSelectionStore();
   const replaceState = useEffectStore((s2) => s2.replaceState);
   const activeObject = objects[0];
+  const [isRemovingBg, setIsRemovingBg] = useState(false);
+  const [bgProgress, setBgProgress] = useState("");
+  const [colorRemovalEnabled, setColorRemovalEnabled] = useState(false);
+  const [colorRemovalColor, setColorRemovalColor] = useState("#FFFFFF");
+  const [colorRemovalDistance, setColorRemovalDistance] = 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();
+  };
   useLayoutEffect(() => {
     const newState = {
       ...initialState,
@@ -109501,6 +110313,16 @@ function EffectsPanel() {
             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 {
@@ -109548,6 +110370,105 @@ function EffectsPanel() {
     { id: "warm", label: "Warm" }
   ];
   return /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto custom-scrollbar overflow-x-hidden px-4 custom-scrollbar", children: [
+    isImg && /* @__PURE__ */ jsxs("div", { className: "bg-neutral-850 border border-neutral-700/70 rounded-xl p-3 mb-5 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(BgRemoveIcon, { size: 18, className: "text-[#02bc71]" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-white", children: "Background Removal" })
+        ] }),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-3.5 w-3.5 text-white", viewBox: "0 0 24 24", fill: "none", children: [
+                  /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                  /* @__PURE__ */ 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__ */ jsx("span", { children: "Processing..." })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(BgRemoveIcon, { size: 15 }),
+                /* @__PURE__ */ jsx("span", { children: "Cutout Subject (AI)" })
+              ] })
+            }
+          ),
+          hasOriginal && /* @__PURE__ */ 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__ */ jsx("p", { className: "text-[11px] text-[#02bc71] italic text-center animate-pulse pt-0.5", children: bgProgress })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "pt-2 border-t border-neutral-700/50", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-neutral-300 font-medium", children: "Remove Solid Color" }),
+          /* @__PURE__ */ jsxs("label", { className: "relative inline-flex items-center cursor-pointer", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: colorRemovalEnabled,
+                onChange: (e3) => handleToggleColorRemoval(e3.target.checked),
+                className: "sr-only peer"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-8 h-4 bg-neutral-700 rounded-full peer-checked:bg-[#02bc71] transition" }),
+            /* @__PURE__ */ 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__ */ jsxs("div", { className: "space-y-2.5 pt-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs opacity-70", children: "Target Color" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[11px] text-neutral-400 font-mono", children: colorRemovalColor.toUpperCase() }),
+              /* @__PURE__ */ jsx(
+                CMYKColorPicker,
+                {
+                  value: colorRemovalColor,
+                  onChange: handleColorChange
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-xs", children: [
+              /* @__PURE__ */ jsx("span", { className: "opacity-70", children: "Tolerance / Distance" }),
+              /* @__PURE__ */ jsxs("span", { className: "font-mono text-neutral-400", children: [
+                colorRemovalDistance,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 1,
+                max: 99,
+                value: colorRemovalDistance,
+                onChange: (e3) => handleDistanceChange(Number(e3.target.value)),
+                onMouseUp: handleDistanceCommit,
+                onTouchEnd: handleDistanceCommit,
+                className: "w-full accent-[#02bc71] cursor-pointer"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 mb-6", children: PRESETS.map((p2) => /* @__PURE__ */ jsx(
       "button",
       {
@@ -156143,7 +157064,7 @@ function RedoIcon() {
     }
   );
 }
-function AlignLeftIcon() {
+function AlignLeftIcon$1() {
   return /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: [
     /* @__PURE__ */ jsx("rect", { x: "1", y: "2", width: "10", height: "2" }),
     /* @__PURE__ */ jsx("rect", { x: "1", y: "6", width: "14", height: "2" }),
@@ -156151,7 +157072,7 @@ function AlignLeftIcon() {
     /* @__PURE__ */ jsx("rect", { x: "1", y: "14", width: "14", height: "2" })
   ] });
 }
-function AlignCenterIcon() {
+function AlignCenterIcon$1() {
   return /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: [
     /* @__PURE__ */ jsx("rect", { x: "3", y: "2", width: "10", height: "2" }),
     /* @__PURE__ */ jsx("rect", { x: "1", y: "6", width: "14", height: "2" }),
@@ -156159,7 +157080,7 @@ function AlignCenterIcon() {
     /* @__PURE__ */ jsx("rect", { x: "1", y: "14", width: "14", height: "2" })
   ] });
 }
-function AlignRightIcon() {
+function AlignRightIcon$1() {
   return /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: [
     /* @__PURE__ */ jsx("rect", { x: "5", y: "2", width: "10", height: "2" }),
     /* @__PURE__ */ jsx("rect", { x: "1", y: "6", width: "14", height: "2" }),
@@ -156228,9 +157149,9 @@ function TextAlignButton({
       onClick: () => onChange(next),
       className: "p-1 bg-neutral-800 rounded hover:bg-neutral-700",
       children: [
-        value === "left" && /* @__PURE__ */ jsx(AlignLeftIcon, {}),
-        value === "center" && /* @__PURE__ */ jsx(AlignCenterIcon, {}),
-        value === "right" && /* @__PURE__ */ jsx(AlignRightIcon, {})
+        value === "left" && /* @__PURE__ */ jsx(AlignLeftIcon$1, {}),
+        value === "center" && /* @__PURE__ */ jsx(AlignCenterIcon$1, {}),
+        value === "right" && /* @__PURE__ */ jsx(AlignRightIcon$1, {})
       ]
     }
   );
@@ -156943,8 +157864,13 @@ function PictureToolbar() {
   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] = useState(false);
+  const [bgStatus, setBgStatus] = 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 = () => {
@@ -156967,6 +157893,33 @@ function PictureToolbar() {
     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__ */ jsxs("div", { className: "flex items-center gap-2 text-white py-2 rounded-md shadow-lg z-50", children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -156979,14 +157932,27 @@ function PictureToolbar() {
         ]
       }
     ),
+    /* @__PURE__ */ 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__ */ jsx("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin shrink-0" }) : /* @__PURE__ */ jsx(BgRemoveIcon, { size: 15 }),
+          /* @__PURE__ */ jsx("span", { children: isRemovingBg ? bgStatus || "Processing..." : isBgRemoved ? "Restore BG" : "Remove BG" })
+        ]
+      }
+    ),
     /* @__PURE__ */ 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"
@@ -157000,10 +157966,17 @@ function PictureToolbar() {
         children: hasMask ? "Remove Mask" : "Apply Mask"
       }
     ),
-    /* @__PURE__ */ jsxs("button", { className: "text-sm px-1 py-[5px] hover:bg-[#8f99a826] hover:rounded-sm cursor-pointer flex items-center", onClick: handleCropClick, children: [
-      /* @__PURE__ */ jsx(CropIcon, {}),
-      /* @__PURE__ */ jsx("span", { children: "Crop" })
-    ] })
+    /* @__PURE__ */ 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__ */ jsx(CropIcon, {}),
+          /* @__PURE__ */ jsx("span", { children: "Crop" })
+        ]
+      }
+    )
   ] });
 }
 function QrEffectToolbar() {
@@ -157644,6 +158617,102 @@ const LayersIcon = () => /* @__PURE__ */ jsx(
     )
   }
 );
+const AlignTopIcon = ({ className = "", size = 18 }) => /* @__PURE__ */ 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__ */ jsx("rect", { x: "2", y: "2", width: "14", height: "2", rx: "0.5", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("rect", { x: "4.5", y: "5.5", width: "2.5", height: "7.5", rx: "0.5", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("rect", { x: "10", y: "5.5", width: "2.5", height: "4.5", rx: "0.5", fill: "currentColor" })
+    ]
+  }
+);
+const AlignLeftIcon = ({ className = "", size = 18 }) => /* @__PURE__ */ 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__ */ jsx("rect", { x: "2", y: "2", width: "2", height: "14", rx: "0.5", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("rect", { x: "5.5", y: "4.5", width: "7.5", height: "2.5", rx: "0.5", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("rect", { x: "5.5", y: "10", width: "4.5", height: "2.5", rx: "0.5", fill: "currentColor" })
+    ]
+  }
+);
+const AlignMiddleIcon = ({ className = "", size = 18 }) => /* @__PURE__ */ 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__ */ jsx("line", { x1: "2", y1: "9", x2: "16", y2: "9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx("rect", { x: "4.5", y: "6", width: "2.5", height: "6", rx: "0.5", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("rect", { x: "10", y: "3.5", width: "2.5", height: "11", rx: "0.5", fill: "currentColor" })
+    ]
+  }
+);
+const AlignCenterIcon = ({ className = "", size = 18 }) => /* @__PURE__ */ 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__ */ jsx("line", { x1: "9", y1: "2", x2: "9", y2: "16", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx("rect", { x: "6", y: "4.5", width: "6", height: "2.5", rx: "0.5", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("rect", { x: "3.5", y: "10", width: "11", height: "2.5", rx: "0.5", fill: "currentColor" })
+    ]
+  }
+);
+const AlignBottomIcon = ({ className = "", size = 18 }) => /* @__PURE__ */ 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__ */ jsx("rect", { x: "2", y: "14", width: "14", height: "2", rx: "0.5", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("rect", { x: "4.5", y: "8", width: "2.5", height: "4.5", rx: "0.5", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("rect", { x: "10", y: "5", width: "2.5", height: "7.5", rx: "0.5", fill: "currentColor" })
+    ]
+  }
+);
+const AlignRightIcon = ({ className = "", size = 18 }) => /* @__PURE__ */ 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__ */ jsx("rect", { x: "14", y: "2", width: "2", height: "14", rx: "0.5", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("rect", { x: "8", y: "4.5", width: "4.5", height: "2.5", rx: "0.5", fill: "currentColor" }),
+      /* @__PURE__ */ 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);
@@ -157827,26 +158896,114 @@ function PositionPicker() {
     showPosition && /* @__PURE__ */ 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: (e3) => e3.stopPropagation(),
         onMouseDown: (e3) => e3.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsx("div", { className: "text-xs uppercase opacity-60 mb-2", children: "Layering" }),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 mb-3", children: [
-            /* @__PURE__ */ jsx("button", { onClick: () => bringForward(), children: "Forward" }),
-            /* @__PURE__ */ jsx("button", { onClick: () => sendBackward(), children: "Backward" }),
-            /* @__PURE__ */ jsx("button", { onClick: () => bringToFront(), children: "To Front" }),
-            /* @__PURE__ */ jsx("button", { onClick: () => sendToBack(), children: "To Back" })
+          /* @__PURE__ */ jsx("div", { className: "text-xs uppercase opacity-60 mb-2 font-medium tracking-wide", children: "Layering" }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-1.5 mb-3", children: [
+            /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("hr", { className: "border-neutral-700 my-2" }),
-          /* @__PURE__ */ jsx("div", { className: "text-xs uppercase opacity-60 mb-2", children: "Position" }),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-            /* @__PURE__ */ jsx("button", { onClick: () => handleAlign("left"), children: "Align left" }),
-            /* @__PURE__ */ jsx("button", { onClick: () => handleAlign("top"), children: "Align top" }),
-            /* @__PURE__ */ jsx("button", { onClick: () => handleAlign("center"), children: "Align center" }),
-            /* @__PURE__ */ jsx("button", { onClick: () => handleAlign("middle"), children: "Align middle" }),
-            /* @__PURE__ */ jsx("button", { onClick: () => handleAlign("right"), children: "Align right" }),
-            /* @__PURE__ */ jsx("button", { onClick: () => handleAlign("bottom"), children: "Align bottom" })
+          /* @__PURE__ */ jsx("div", { className: "text-xs uppercase opacity-60 mb-2 font-medium tracking-wide", children: "Alignments" }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1.5", children: [
+            /* @__PURE__ */ 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__ */ jsx(AlignTopIcon, { size: 18 }),
+                  /* @__PURE__ */ jsx("span", { children: "Top" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ 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__ */ jsx(AlignLeftIcon, { size: 18 }),
+                  /* @__PURE__ */ jsx("span", { children: "Left" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ 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__ */ jsx(AlignMiddleIcon, { size: 18 }),
+                  /* @__PURE__ */ jsx("span", { children: "Middle" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ 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__ */ jsx(AlignCenterIcon, { size: 18 }),
+                  /* @__PURE__ */ jsx("span", { children: "Center" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ 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__ */ jsx(AlignBottomIcon, { size: 18 }),
+                  /* @__PURE__ */ jsx("span", { children: "Bottom" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ 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__ */ jsx(AlignRightIcon, { size: 18 }),
+                  /* @__PURE__ */ jsx("span", { children: "Right" })
+                ]
+              }
+            )
           ] })
         ]
       }
@@ -158526,14 +159683,45 @@ function enablePanMode(canvas2) {
       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();
   };
@@ -158559,7 +159747,7 @@ function disablePanMode(canvas2) {
   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 {
@@ -158648,8 +159836,12 @@ function createWorkarea(canvas2, container, productData, pageSide) {
   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;
@@ -158680,7 +159872,6 @@ function createWorkarea(canvas2, container, productData, pageSide) {
   );
   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,
@@ -158691,6 +159882,8 @@ function createWorkarea(canvas2, container, productData, pageSide) {
     width: fullWidth,
     height: fullHeight,
     fill: "#ffffff",
+    strokeWidth: 0,
+    stroke: null,
     selectable: false,
     evented: false,
     name: "workarea",
@@ -158720,22 +159913,48 @@ function createWorkarea(canvas2, container, productData, pageSide) {
   return workarea;
 }
 function setupHistoryRecording(canvas2) {
-  const recordHistory = (e3) => {
+  let modifiedTimer = null;
+  const handleObjectAddedOrRemoved = (e3) => {
     const target = e3?.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 = (e3) => {
+    const target = e3?.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) {
@@ -158947,8 +160166,10 @@ async function switchCanvasPage(canvas2, currentPage, targetPage, pageJSON, clea
         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();
   }
@@ -158988,9 +160209,62 @@ function doZoom(canvas2, newZoom, pivot) {
 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();
@@ -158998,7 +160272,7 @@ function doReset(canvas2, setZoom) {
   canvas2.requestRenderAll();
   setZoom(initialZoom);
 }
-function useCanvasZoom(canvas2) {
+function useCanvasZoom(canvas2, options) {
   const [zoom, setZoom] = useState(1);
   const rafRef = useRef(null);
   const wheelAccum = useRef(0);
@@ -159089,12 +160363,13 @@ function useCanvasZoom(canvas2) {
         } else if (e3.key === "0") {
           e3.preventDefault();
           doReset(canvas2, setZoom);
+          options?.onReset?.();
         }
       }
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [canvas2, applyZoom]);
+  }, [canvas2, applyZoom, options]);
   const zoomIn = useCallback(() => {
     if (!canvas2) return;
     applyZoom(clamp(canvas2.getZoom() + STEP, MIN_ZOOM, MAX_ZOOM));
@@ -159106,7 +160381,8 @@ function useCanvasZoom(canvas2) {
   const zoomReset = useCallback(() => {
     if (!canvas2) return;
     doReset(canvas2, setZoom);
-  }, [canvas2]);
+    options?.onReset?.();
+  }, [canvas2, options]);
   const zoomTo = useCallback(
     (value) => applyZoom(clamp(value, MIN_ZOOM, MAX_ZOOM)),
     [applyZoom]
@@ -159121,9 +160397,9 @@ function useCanvasZoom(canvas2) {
     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] = useState(false);
   const sliderRef = useRef(null);
   useEffect(() => {
@@ -159349,6 +160625,18 @@ function useKeyboardEvents(canvas2) {
         e3.preventDefault();
         handlePaste();
       }
+      if (isModifier && e3.key.toLowerCase() === "z") {
+        e3.preventDefault();
+        if (e3.shiftKey) {
+          useHistoryStore.getState().redoAction();
+        } else {
+          useHistoryStore.getState().undo();
+        }
+      }
+      if (isModifier && e3.key.toLowerCase() === "y") {
+        e3.preventDefault();
+        useHistoryStore.getState().redoAction();
+      }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => {
@@ -159465,6 +160753,9 @@ function Workspace() {
             pageJSON.current.back = backData;
           }
         }
+        if (useHistoryStore.getState().pages.front.history.length === 0) {
+          useHistoryStore.getState().saveState();
+        }
         useEditorStore.getState().setPages({ ...pageJSON.current });
         return () => {
           cleanupHistory();
@@ -159582,7 +160873,7 @@ function Workspace() {
         )
       ] }),
       /* @__PURE__ */ jsx("div", { className: "w-[1px] h-6 bg-gray-300/50 mx-3" }),
-      /* @__PURE__ */ jsx(ZoomControls, {})
+      /* @__PURE__ */ jsx(ZoomControls, { onReset: () => setIsPanning(false) })
     ] }),
     /* @__PURE__ */ jsx(
       "div",