vibrant-tool 0.1.3 → 0.1.4

package/dist/vibrant-tool.es.js

@@ -8367,9 +8367,15 @@ t(bh, "type", "Vibrance"), t(bh, "defaults", { vibrance: 0 }), t(bh, "uniformLoc
 var Sh = Object.freeze({ __proto__: null, BaseFilter: Va, BlackWhite: nh, BlendColor: Ga, BlendImage: Ua, Blur: qa, Brightness: Ka, Brownie: $a$1, ColorMatrix: Qa, Composed: oh, Contrast: ah, Convolute: ch, Gamma: uh, Grayscale: gh, HueRotation: ph, Invert: mh, Kodachrome: eh, Noise: vh, Pixelate: yh, Polaroid: ih, RemoveColor: _h, Resize: xh, Saturation: Ch, Sepia: rh, Technicolor: sh, Vibrance: bh, Vintage: th });
 function createOverlays(canvas2, workarea) {
   canvas2.getObjects().filter((o2) => o2.name?.startsWith("overlay-") || o2.name?.startsWith("guideline-")).forEach((o2) => canvas2.remove(o2));
-  const zoom = canvas2.getZoom();
-  const cvW = canvas2.getWidth() / zoom;
-  const cvH = canvas2.getHeight() / zoom;
+  const vt2 = canvas2.viewportTransform;
+  const zoom = vt2 ? vt2[0] : canvas2.getZoom() || 1;
+  const panX = vt2 ? vt2[4] : 0;
+  const panY = vt2 ? vt2[5] : 0;
+  const vX0 = -panX / zoom;
+  const vY0 = -panY / zoom;
+  const vX1 = (canvas2.getWidth() - panX) / zoom;
+  const vY1 = (canvas2.getHeight() - panY) / zoom;
+  const cvW = vX1 - vX0;
   const waL = workarea.left ?? 0;
   const waT = workarea.top ?? 0;
   const waW = workarea.getScaledWidth();
@@ -8383,79 +8389,81 @@ function createOverlays(canvas2, workarea) {
   });
   const topOverlay = makeOverlay({
     name: "overlay-top",
-    left: 0,
-    top: 0,
+    left: vX0,
+    top: vY0,
     width: cvW,
-    height: Math.max(0, waT)
+    height: Math.max(0, waT - vY0)
   });
   const bottomOverlay = makeOverlay({
     name: "overlay-bottom",
-    left: 0,
+    left: vX0,
     top: waT + waH,
     width: cvW,
-    height: Math.max(0, cvH - (waT + waH))
+    height: Math.max(0, vY1 - (waT + waH))
   });
   const leftOverlay = makeOverlay({
     name: "overlay-left",
-    left: 0,
+    left: vX0,
     top: waT,
-    width: Math.max(0, waL),
+    width: Math.max(0, waL - vX0),
     height: waH
   });
   const rightOverlay = makeOverlay({
     name: "overlay-right",
     left: waL + waW,
     top: waT,
-    width: Math.max(0, cvW - (waL + waW)),
+    width: Math.max(0, vX1 - (waL + waW)),
     height: waH
   });
-  const printDPI = workarea.__printDPI || 72;
-  const bleedArea = workarea.__bleedArea !== void 0 ? Number(workarea.__bleedArea) : 0.125;
-  const safetyArea = workarea.__safetyArea !== void 0 ? Number(workarea.__safetyArea) : 0.125;
-  const bleedInsetX = Math.max(4, (bleedArea > 0 ? bleedArea : 0.0125) * printDPI * 1);
-  const bleedInsetY = Math.max(4, (bleedArea > 0 ? bleedArea : 0.0125) * printDPI * 1);
-  const safeInsetX = Math.max(6, (safetyArea > 0 ? safetyArea : 0.125) * printDPI * 1);
-  const safeInsetY = Math.max(6, (safetyArea > 0 ? safetyArea : 0.125) * printDPI * 1);
-  const trimLine = new jr({
-    name: "guideline-trim",
-    left: waL + bleedInsetX,
-    top: waT + bleedInsetY,
-    width: Math.max(10, waW - bleedInsetX * 2),
-    height: Math.max(10, waH - bleedInsetY * 2),
-    fill: "transparent",
-    stroke: "#ef4444",
-    // Red dashed trim line
-    strokeWidth: 1.2,
-    strokeDashArray: [4, 4],
-    strokeUniform: true,
-    selectable: false,
-    evented: false,
-    excludeFromExport: true
-  });
-  const safeLine = new jr({
-    name: "guideline-safe",
-    left: waL + bleedInsetX + safeInsetX,
-    top: waT + bleedInsetY + safeInsetY,
-    width: Math.max(10, waW - (bleedInsetX + safeInsetX) * 2),
-    height: Math.max(10, waH - (bleedInsetY + safeInsetY) * 2),
-    fill: "transparent",
-    stroke: "#10b981",
-    // Green dashed safe line
-    strokeWidth: 1.2,
-    strokeDashArray: [4, 4],
-    strokeUniform: true,
-    selectable: false,
-    evented: false,
-    excludeFromExport: true
-  });
-  canvas2.add(trimLine, safeLine, topOverlay, bottomOverlay, leftOverlay, rightOverlay);
+  const isTextTemplate = workarea.__isTextTemplate === true || workarea.__hideGuidelines === true || workarea.__bleedArea === 0 && workarea.__safetyArea === 0 || typeof window !== "undefined" && ["text", "texttemplate", "text-template"].includes(
+    (new URLSearchParams(window.location.search).get("designType") || new URLSearchParams(window.location.search).get("designtype") || new URLSearchParams(window.location.search).get("type") || "")?.toLowerCase()
+  );
+  const objectsToAdd = [topOverlay, bottomOverlay, leftOverlay, rightOverlay];
+  if (!isTextTemplate) {
+    const printDPI = workarea.__printDPI || 72;
+    const bleedArea = workarea.__bleedArea !== void 0 ? Number(workarea.__bleedArea) : 0.125;
+    const safetyArea = workarea.__safetyArea !== void 0 ? Number(workarea.__safetyArea) : 0.125;
+    const bleedInsetX = Math.max(4, (bleedArea > 0 ? bleedArea : 0.0125) * printDPI * 1);
+    const bleedInsetY = Math.max(4, (bleedArea > 0 ? bleedArea : 0.0125) * printDPI * 1);
+    const safeInsetX = Math.max(6, (safetyArea > 0 ? safetyArea : 0.125) * printDPI * 1);
+    const safeInsetY = Math.max(6, (safetyArea > 0 ? safetyArea : 0.125) * printDPI * 1);
+    const trimLine = new jr({
+      name: "guideline-trim",
+      left: waL + bleedInsetX,
+      top: waT + bleedInsetY,
+      width: Math.max(10, waW - bleedInsetX * 2),
+      height: Math.max(10, waH - bleedInsetY * 2),
+      fill: "transparent",
+      stroke: "#ef4444",
+      // Red dashed trim line
+      strokeWidth: 1.2,
+      strokeDashArray: [4, 4],
+      strokeUniform: true,
+      selectable: false,
+      evented: false,
+      excludeFromExport: true
+    });
+    const safeLine = new jr({
+      name: "guideline-safe",
+      left: waL + bleedInsetX + safeInsetX,
+      top: waT + bleedInsetY + safeInsetY,
+      width: Math.max(10, waW - (bleedInsetX + safeInsetX) * 2),
+      height: Math.max(10, waH - (bleedInsetY + safeInsetY) * 2),
+      fill: "transparent",
+      stroke: "#10b981",
+      // Green dashed safe line
+      strokeWidth: 1.2,
+      strokeDashArray: [4, 4],
+      strokeUniform: true,
+      selectable: false,
+      evented: false,
+      excludeFromExport: true
+    });
+    objectsToAdd.unshift(trimLine, safeLine);
+  }
+  canvas2.add(...objectsToAdd);
   canvas2.sendObjectToBack(workarea);
-  canvas2.bringObjectToFront(trimLine);
-  canvas2.bringObjectToFront(safeLine);
-  canvas2.bringObjectToFront(topOverlay);
-  canvas2.bringObjectToFront(bottomOverlay);
-  canvas2.bringObjectToFront(leftOverlay);
-  canvas2.bringObjectToFront(rightOverlay);
+  objectsToAdd.forEach((obj) => canvas2.bringObjectToFront(obj));
   canvas2.requestRenderAll();
 }
 function bringOverlaysToFront(canvas2) {
@@ -98807,15 +98815,18 @@ function rgbToCmyk(r2, g2, b2) {
   };
 }
 function cmykToRgb(c2, m2, y2, k2) {
-  c2 = c2 / 100;
-  m2 = m2 / 100;
-  y2 = y2 / 100;
-  k2 = k2 / 100;
-  return {
-    r: Math.round(255 * (1 - c2) * (1 - k2)),
-    g: Math.round(255 * (1 - m2) * (1 - k2)),
-    b: Math.round(255 * (1 - y2) * (1 - k2))
-  };
+  const cn2 = c2 / 100;
+  const mn2 = m2 / 100;
+  const yn2 = y2 / 100;
+  const kn2 = k2 / 100;
+  const base = 1 - kn2;
+  const rTrans = (1 - cn2 * 0.9 - mn2 * 0.05 - yn2 * 0.02) * base;
+  const gTrans = (1 - mn2 * 0.85 - cn2 * 0.12 - yn2 * 0.03) * base;
+  const bTrans = (1 - yn2 * 0.92 - mn2 * 0.22 - cn2 * 0.02) * base;
+  const r2 = Math.round(Math.max(0, Math.min(255, rTrans * 255)));
+  const g2 = Math.round(Math.max(0, Math.min(255, gTrans * 255)));
+  const b2 = Math.round(Math.max(0, Math.min(255, bTrans * 255)));
+  return { r: r2, g: g2, b: b2 };
 }
 function rgbToHex(r2, g2, b2) {
   const toHex = (n2) => {
@@ -98840,16 +98851,6 @@ function cmykToHex(c2, m2, y2, k2) {
   const rgb2 = cmykToRgb(c2, m2, y2, k2);
   return rgbToHex(rgb2.r, rgb2.g, rgb2.b);
 }
-function isOutOfCmykGamut(hex, threshold = 8) {
-  const rgb2 = hexToRgb(hex);
-  const cmyk2 = rgbToCmyk(rgb2.r, rgb2.g, rgb2.b);
-  const roundTrip = cmykToRgb(cmyk2.c, cmyk2.m, cmyk2.y, cmyk2.k);
-  const dr2 = rgb2.r - roundTrip.r;
-  const dg = rgb2.g - roundTrip.g;
-  const db = rgb2.b - roundTrip.b;
-  const distance = Math.sqrt(dr2 * dr2 + dg * dg + db * db);
-  return distance > threshold;
-}
 function convertSvgColorsToCmyk(svg) {
   if (!svg) return svg;
   const hexToCmykString = (hex) => {
@@ -98952,6 +98953,7 @@ async function convertPdfToDeviceCMYK(rawBuffer) {
   return pdfDoc.save({ useObjectStreams: false });
 }
 const BASE_URL = "https://www.api.vibrantprintshop.com";
+const IMAGE_UPLOAD_URL = "https://upload.vibrantprint.com";
 async function apiFetch(endpoint, options = {}) {
   const token = localStorage.getItem("token");
   const response = await fetch(`${BASE_URL}${endpoint}`, {
@@ -98972,6 +98974,30 @@ async function apiFetch(endpoint, options = {}) {
   }
   return response.json();
 }
+async function apiUploadImage(endpoint, options = {}) {
+  const token = localStorage.getItem("token");
+  const isFormData = options.body instanceof FormData;
+  const headers = {
+    ...token && { Authorization: `Bearer ${token}` },
+    ...options.headers
+  };
+  if (!isFormData && !("Content-Type" in (options.headers || {}))) {
+    headers["Content-Type"] = "application/json";
+  }
+  const response = await fetch(`${IMAGE_UPLOAD_URL}${endpoint}`, {
+    method: options.method ?? "POST",
+    headers,
+    body: isFormData ? options.body : options.body ? JSON.stringify(options.body) : void 0
+  });
+  if (!response.ok) {
+    const message = await response.text();
+    throw {
+      status: response.status,
+      message: message || "Something went wrong"
+    };
+  }
+  return response.json();
+}
 const ProductService = {
   async getProductOptions(id) {
     const res = await apiFetch(
@@ -99471,7 +99497,7 @@ function DownloadPopover({ onClose }) {
             {
               value: fileType,
               onChange: (e3) => setFileType(e3.target.value),
-              className: "w-full bg-[#1e1e1e] border border-gray-600 rounded-lg px-3 py-2 text-sm mb-5 focus:outline-none focus:ring-2 focus:ring-blue-500",
+              className: "w-full bg-[#1e1e1e] border border-gray-600 rounded-lg px-3 py-2 text-sm mb-5 focus:outline-none focus:ring-2 focus:ring-[#02bc71]",
               children: [
                 /* @__PURE__ */ jsx("option", { value: "png", children: "PNG" }),
                 /* @__PURE__ */ jsx("option", { value: "jpeg", children: "JPEG" }),
@@ -99855,8 +99881,13 @@ function setQueryParam(key, value) {
 const TemplateDesignService = {
   async getTemplates(data) {
     try {
+      const params = new URLSearchParams();
+      if (data.product) params.append("product", data.product);
+      params.append("status", "true");
+      params.append("page", String(data.page));
+      params.append("limit", String(data.limit));
       const res = await apiFetch(
-        `/api/template-designs?product=${data.product}&status=true&page=${data.page}&limit=${data.limit}`,
+        `/api/template-designs?${params.toString()}`,
         { method: "GET" }
       );
       return res || null;
@@ -99893,6 +99924,100 @@ const TemplateDesignService = {
     }
   }
 };
+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 dataUrlToFile(dataUrl, filename = `design-${Date.now()}.png`) {
+  const arr = dataUrl.split(",");
+  const mime = arr[0].match(/:(.*?);/)?.[1] || "image/png";
+  const bstr = atob(arr[1]);
+  let n2 = bstr.length;
+  const u8arr = new Uint8Array(n2);
+  while (n2--) {
+    u8arr[n2] = bstr.charCodeAt(n2);
+  }
+  return new File([u8arr], filename, { type: mime });
+}
+const UploadService = {
+  async uploadFileApi(file, filename = `design-${Date.now()}.png`) {
+    const formData = new FormData();
+    formData.append("file", file, file.name || filename);
+    formData.append("name", "vibrantprint");
+    const res = await apiUploadImage(`/upload`, {
+      method: "POST",
+      body: formData
+    });
+    const data = res?.data || res;
+    const url = data?.name || data?.Location || data?.url || data?.data?.name || data?.data?.Location || data?.data?.url || (typeof data === "string" ? data : "");
+    if (!url) {
+      throw new Error(res?.message || "Failed to upload file");
+    }
+    return url;
+  },
+  async uploadDataUrl(dataUrl, filename) {
+    if (!dataUrl) return "";
+    if (dataUrl.startsWith("http://") || dataUrl.startsWith("https://")) {
+      return dataUrl;
+    }
+    const file = dataUrlToFile(dataUrl, filename || `design-${Date.now()}.png`);
+    return await this.uploadFileApi(file, filename);
+  }
+};
 function Topbar() {
   const [open2, setOpen] = useState(false);
   const [previewOpen, setPreviewOpen] = useState(false);
@@ -99900,8 +100025,40 @@ function Topbar() {
   const [saveSuccess, setSaveSuccess] = useState(false);
   const [saveError, setSaveError] = useState(false);
   const resetTour = useTourStore((s2) => s2.reset);
-  const templateId = getQueryParam("templateId");
-  const designType = getQueryParam("design");
+  const templateId = getQueryParam("templateId") || getQueryParam("id");
+  const designType = (getQueryParam("designType") || getQueryParam("designtype") || getQueryParam("type"))?.toLowerCase();
+  const handleSaveTextTemplate = async () => {
+    const canvas2 = useEditorStore.getState().canvas;
+    if (!templateId || !canvas2) return;
+    try {
+      setIsSaving(true);
+      useLoaderStore.getState().startLoading();
+      const currentJson = canvas2.toObject(["name"]);
+      const currentImage = getWorkareaDataUrl(canvas2);
+      const uploadedImageUrl = await UploadService.uploadDataUrl(
+        currentImage,
+        `text-template-${templateId}-${Date.now()}.png`
+      );
+      const res = await ShapeService.updateTextTemplate(templateId, {
+        jsonData: currentJson,
+        image: uploadedImageUrl
+      });
+      if (res && (res.success || res.status || res.data || res._id)) {
+        setSaveSuccess(true);
+        setTimeout(() => setSaveSuccess(false), 3e3);
+        window.location.href = "/design-configuration/text-templates";
+      } else {
+        throw new Error("Save failed");
+      }
+    } catch (err) {
+      console.error("Save text template error:", err);
+      setSaveError(true);
+      setTimeout(() => setSaveError(false), 3e3);
+    } finally {
+      setIsSaving(false);
+      useLoaderStore.getState().stopLoading();
+    }
+  };
   const handleSaveTemplate = async () => {
     const canvas2 = useEditorStore.getState().canvas;
     if (!templateId || !canvas2) return;
@@ -99919,26 +100076,33 @@ function Topbar() {
           const designData = isCurrent ? currentJson : editorPages[side] || historyPages[side]?.history?.at(-1) || null;
           if (!designData) return null;
           const sideImage = isCurrent ? currentImage : await renderPageDataUrl(designData, canvas2);
+          const uploadedImageUrl = await UploadService.uploadDataUrl(
+            sideImage,
+            `template-${templateId}-${side}-${Date.now()}.png`
+          );
           return {
             side,
             designData,
-            image: sideImage,
+            image: uploadedImageUrl,
             order: i + 1
           };
         })
       );
       const validPages = pages.filter(Boolean);
-      const mainImage = validPages[0]?.image || currentImage;
+      const primaryImage = validPages[0]?.image || "";
       const res = await TemplateDesignService.updateTemplateDesign(templateId, {
-        pages: validPages
+        pages: validPages,
+        image: primaryImage
       });
       if (res && res.success) {
         setSaveSuccess(true);
         setTimeout(() => setSaveSuccess(false), 3e3);
+        window.location.href = "/design-configuration/template-designs";
       } else {
         throw new Error("Save failed");
       }
-    } catch {
+    } catch (err) {
+      console.error("Save template error:", err);
       setSaveError(true);
       setTimeout(() => setSaveError(false), 3e3);
     } finally {
@@ -99964,17 +100128,20 @@ function Topbar() {
           ]
         }
       ),
-      templateId && designType == "template" && /* @__PURE__ */ jsx(
+      templateId && (designType === "template" || designType === "text") && /* @__PURE__ */ jsx(
         "button",
         {
           id: "save-template-button",
-          onClick: handleSaveTemplate,
+          onClick: designType === "text" ? handleSaveTextTemplate : handleSaveTemplate,
           disabled: isSaving,
           className: `flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-xs font-semibold cursor-pointer transition-all shadow-sm ${saveSuccess ? "bg-[#02bc71] text-white" : saveError ? "bg-rose-600 text-white" : "bg-[#02bc71] hover:bg-[#03945a] text-white"}`,
           children: isSaving ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
             /* @__PURE__ */ jsx("span", { className: "h-3 w-3 border-2 border-white border-t-transparent rounded-full animate-spin" }),
             "Saving..."
-          ] }) : saveSuccess ? /* @__PURE__ */ jsx("span", { children: "✓ Saved!" }) : saveError ? /* @__PURE__ */ jsx("span", { children: "Save Failed" }) : /* @__PURE__ */ jsx("span", { children: "Save Template" })
+          ] }) : saveSuccess ? /* @__PURE__ */ jsx("span", { children: "✓ Saved!" }) : saveError ? /* @__PURE__ */ jsx("span", { children: "Save Failed" }) : /* @__PURE__ */ jsxs("span", { children: [
+            "Save ",
+            designType === "text" ? "Text Template" : "Template"
+          ] })
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
@@ -100276,20 +100443,39 @@ function Panel({ panelName }) {
 function deriveType(objects) {
   if (objects.length === 0) return "none";
   if (objects.length > 1) return "multiple";
-  const t2 = objects[0].type;
-  if (t2 === "group") return "group";
+  const obj = objects[0];
+  const t2 = obj.type?.toLowerCase();
+  if (t2 === "activeselection") return "multiple";
+  if (t2 === "group") {
+    if (obj.name === "qr") return "qr";
+    if (obj.name === "barcode") return "barcode";
+    return "group";
+  }
   if (t2 === "textbox" || t2 === "i-text" || t2 === "text") return "textbox";
   if (t2 === "image") return "image";
-  return t2;
+  return t2 || "none";
 }
 const useSelectionStore = create((set) => ({
   type: "none",
   objects: [],
+  activeColor: null,
+  activeColorIndex: 0,
   setSelection: (objects) => set({
     objects,
-    type: deriveType(objects)
+    type: deriveType(objects),
+    activeColor: null,
+    activeColorIndex: 0
   }),
-  clearSelection: () => set({ type: "none", objects: [] })
+  setActiveColor: (color, index = 0) => set({
+    activeColor: color,
+    activeColorIndex: index
+  }),
+  clearSelection: () => set({
+    type: "none",
+    objects: [],
+    activeColor: null,
+    activeColorIndex: 0
+  })
 }));
 function TemplatesPanel() {
   const { productData } = useProductStore();
@@ -100851,27 +101037,23 @@ function updateQRObjectColors(qrGroup, darkColor, lightColor) {
   });
   qrGroup.canvas?.requestRenderAll();
 }
-function extractSVGColors(svg) {
-  if (svg.type !== "group") return [];
-  const colors = /* @__PURE__ */ new Set();
-  svg.getObjects().forEach((obj) => {
-    if (typeof obj.fill === "string" && obj.fill !== "none" && obj.fill !== "" && obj.fill !== "transparent") {
-      try {
-        const hex = new Ie(obj.fill).toHex();
-        colors.add(`#${hex}`);
-      } catch (e3) {
-      }
-    }
-    if (typeof obj.stroke === "string" && obj.stroke !== "none" && obj.stroke !== "" && obj.stroke !== "transparent") {
-      try {
-        const hex = new Ie(obj.stroke).toHex();
-        colors.add(`#${hex}`);
-      } catch (e3) {
-      }
+const MAX_RECENT_ELEMENTS = 15;
+const useRecentElementsStore = create()(
+  persist(
+    (set) => ({
+      recentItems: [],
+      addRecentItem: (item) => set((state) => ({
+        recentItems: [
+          item,
+          ...state.recentItems.filter((recent) => recent.image !== item.image)
+        ].slice(0, MAX_RECENT_ELEMENTS)
+      }))
+    }),
+    {
+      name: "vibrant-recent-elements"
     }
-  });
-  return [...colors];
-}
+  )
+);
 function AllElements({
   elements: elements2,
   onBack,
@@ -100880,6 +101062,7 @@ function AllElements({
 }) {
   const [search, setSearch] = useState("");
   const { isLoading } = useLoaderStore.getState();
+  const { addRecentItem } = useRecentElementsStore();
   const clearSearch = () => {
     setSearch("");
     onSearch("");
@@ -100956,6 +101139,7 @@ function AllElements({
             } else {
               addSVGToCanvas("svg", shape.image);
             }
+            addRecentItem(shape);
             if (window.innerWidth < 768) {
               useSidePanelStore.getState().setActivePanel(null);
             }
@@ -100978,50 +101162,6 @@ function AllElements({
     ] }) }) })
   ] });
 }
-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;
-  }
-};
 const PixabayIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -101046,6 +101186,7 @@ const PixabayIcon = () => /* @__PURE__ */ jsx(
 const FlatIcon = "data:image/webp;base64,UklGRhAEAABXRUJQVlA4TAMEAAAvX8AXEFfHoG0bQS5/0Lm7fxAQ2kiSJGX1Dn+Iy2Lv7Uo7bNtGkpi7/vv9LSaSJEXK/38MjSeQOCTsvS0kSKoJb6QA1AFJDYEC0UiSGiAkSEDSRtKmzkf5RO0kGlIhCSGQgKQ7JdAOkIRAYlOnHSCknWCnph0CJe7UEE0CdTTdAdKd7kBGUthgjsE/hLQhDv1HAxJDG/9TQwASAp7T5wcItCEElDYEbPqbMhKAb28hwBP8OpTAT6BIQM5ylM8jkUABYI4cB08Mhr2eDM4xeI5hzzFnz+kVcYhXDBFxiiIiqohoIqKLOCanjJ7er6WUGBxcAOSQj0xAASAFcPCT5cHQZn/0M5KCRAJqt22bkqRTttm2bdu2bdu6+TLqlW3bbHetiOhg27aN+zPinRe452N9iOj/BHi1WizkMDNXKL3h66xkMTdbSfNeHpPz7ypvYvZbCe9h+Ns1ecte995XML3ifda2rK9ifLVoXbFgXSFnXY4tWrt4XDPHJMXjYhfM1OV3X3n5FQ2//OpRNWMfuOrupVMC+fDs3tLU/TYB0cudRXqd+1EQ80+W5nZYFgFrDpPaU+YFMOJRafLpM4H4MUl+dETrzTqmSYM+c8APOynHzGq9FXs26ZrxwMRLRd1reettOrA5u/wCuPf7agcvaL0JFzbn6Qww5yTRrxnXeu6LQc04YhUQLRR92+8IcNwtKfa57do6LxvtgE/2S/FwHAK/7qrJs1PGpR/rgNF3in7QxwSZeTzF7l/TwJ+20Tq91h4GK47W5Ppx9U05X/RT5xBotKiHNvCfWM8kuN+7aQO+dKEw/RxNTn7w/uT77srUbDhG9OvGE+5/Q7W0R84GMk+LvvNvBDz69gb0WtcGfLZHikfikPh0r/oumAKMvVn0w1cTdPtzHerZ+l+AvwdqXZdEYbHp+HruHQnMOFP0s6YTuPure7qDPgaixV21wX8T/KSLUnV6KQLWHCb6rWPD49vt0pw2G4gfFH3PzzBw9D0p+v0PsHLnFM9kLOCjAzR5aCQw+Wzt2A2YGL2QYocfAff18KRufzobmHOSJhdPAsbeknT+FIx03/TX+qx1wFd71mzzM2ZOvESTE+YC7Ztr7hxtBz/sqMmLEbDxaJF9P8HQ+MkUe38KtK3vKc9HlrDmUE3uGA1MO+O4OZgavdJF2+ongDFjMHbmGZqcNwWL3fdDtG5/OIsYd5Mmx2wwiV930+SpjEmZJ1LsscEkVhylnTjDJvfBsKTtv3c20b54fxHpeMjnbVgdrdx84w2vbnAYHo0ZHbGF7Zx1uYJ1haJ1xap1VZ+1Let9xbaK9z5vWd5779+z7L0a/6Zdb/rkd/I25d/zKctZe7IVX2e1WMjZkSsUq14FAA==";
 function ElementsPanel() {
   const { startLoading, stopLoading, isLoading } = useLoaderStore();
+  const { recentItems, addRecentItem } = useRecentElementsStore();
   const [elementsSVG, setElementsSVG] = useState([]);
   const [page, setPage] = useState(1);
   const [category, setCategory] = useState(null);
@@ -101155,45 +101296,96 @@ function ElementsPanel() {
       ] })
     ] }),
     /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-    /* @__PURE__ */ jsx("div", { className: "h-[calc(100dvh-180px)] overflow-auto", children: elements.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "py-5", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold mb-3", children: item.category }),
-          /* @__PURE__ */ jsx(
-            "div",
+    /* @__PURE__ */ jsxs("div", { className: "h-[calc(100dvh-180px)] overflow-auto", children: [
+      recentItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "py-5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold mb-3", children: "Recent items" }),
+            recentItems.length > 3 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "underline cursor-pointer",
+                onClick: () => {
+                  setElementsSVG(recentItems);
+                  setCategory("Recent items");
+                  setHasMore(false);
+                },
+                children: "View all"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: recentItems.slice(0, 3).map((shape, i) => /* @__PURE__ */ jsx(
+            "button",
             {
-              className: "underline cursor-pointer",
-              onClick: () => getSVG(null, item?.category, 1),
-              children: "View all"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: item.data.map((shape, j2) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => {
-              addSVGToCanvas("svg", shape.image);
+              onClick: () => {
+                addSVGToCanvas("svg", shape.image);
+                addRecentItem(shape);
+              },
+              className: "w-full cursor-pointer flex items-center justify-center",
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: shape.image,
+                  alt: shape.category,
+                  width: 150,
+                  height: 150,
+                  className: "w-full h-24 object-contain"
+                }
+              )
             },
-            className: "w-full cursor-pointer flex items-center justify-center",
-            children: /* @__PURE__ */ jsx(
-              "img",
+            shape._id || shape.image || i
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" })
+      ] }),
+      elements.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "py-5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold mb-3", children: item.category }),
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                src: shape.image,
-                alt: item.category,
-                width: 150,
-                height: 150,
-                className: "w-full h-24 object-contain"
+                className: "underline cursor-pointer",
+                onClick: () => getSVG(null, item?.category, 1),
+                children: "View all"
               }
             )
-          },
-          j2
-        )) })
-      ] }),
-      /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" })
-    ] }, i)) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: item.data.map((shape, j2) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                addSVGToCanvas("svg", shape.image);
+                addRecentItem({
+                  _id: shape.image,
+                  status: true,
+                  category: item.category,
+                  image: shape.image,
+                  largeImage: shape.image,
+                  tags: []
+                });
+              },
+              className: "w-full cursor-pointer flex items-center justify-center",
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: shape.image,
+                  alt: item.category,
+                  width: 150,
+                  height: 150,
+                  className: "w-full h-24 object-contain"
+                }
+              )
+            },
+            j2
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" })
+      ] }, i))
+    ] })
   ] });
 }
-const isTextbox = (obj) => obj.type === "textbox";
+const isTextbox = (obj) => obj.type === "textbox" || obj.type === "i-text" || obj.type === "text";
 async function addTextToCanvas(fontSize, width, textName) {
   const canvas2 = useEditorStore.getState().canvas;
   if (!canvas2) return;
@@ -101274,13 +101466,10 @@ function TextPanel() {
       page,
       limit: 30
     }).then((res) => {
-      const newItems = res.items.filter(
-        (x2) => x2.status && x2.image
-      );
       setTextElements(
-        (prev) => page === 1 ? newItems : [...prev, ...newItems]
+        (prev) => page === 1 ? res.items : [...prev, ...res.items]
       );
-      if (newItems.length < 20) setHasMore(false);
+      if (res?.items?.length < 20) setHasMore(false);
     }).finally(() => stopLoading());
   }, [page]);
   useEffect(() => {
@@ -101714,10 +101903,19 @@ function PhotosPanel() {
     handleFacebookAuth,
     handleInstagramAuth
   } = useSocialAuth({
-    onImageSelect: (url) => {
-      addImageToCanvas(url);
-      if (window.innerWidth < 768) {
-        useSidePanelStore.getState().setActivePanel(null);
+    onImageSelect: async (url) => {
+      try {
+        startLoading();
+        const image = await ShapeService.convertImages(url);
+        const imageUrl = image?.success ? image?.url : null;
+        if (imageUrl) addImageToCanvas(imageUrl);
+      } catch (error2) {
+        console.error("Failed to convert image:", error2);
+      } finally {
+        stopLoading();
+        if (window.innerWidth < 768) {
+          useSidePanelStore.getState().setActivePanel(null);
+        }
       }
     }
   });
@@ -101842,10 +102040,20 @@ function PhotosPanel() {
         "button",
         {
           className: "relative aspect-square rounded overflow-hidden group cursor-pointer",
-          onClick: () => {
-            addImageToCanvas(item.largeImage);
-            if (window.innerWidth < 768) {
-              useSidePanelStore.getState().setActivePanel(null);
+          onClick: async () => {
+            try {
+              startLoading();
+              const image = await ShapeService.convertImages(item.largeImage);
+              const imageUrl = image?.success ? image?.url : null;
+              if (!imageUrl) return;
+              addImageToCanvas(imageUrl);
+              if (window.innerWidth < 768) {
+                useSidePanelStore.getState().setActivePanel(null);
+              }
+            } catch (error2) {
+              console.error("Failed to convert image:", error2);
+            } finally {
+              stopLoading();
             }
           },
           children: /* @__PURE__ */ jsx(
@@ -101912,319 +102120,281 @@ async function addBackgroundColor(color) {
   workarea.set("fill", color);
   canvas2.requestRenderAll();
 }
+function normalizeHexColor(c2) {
+  if (!c2 || typeof c2 !== "string" || c2 === "none" || c2 === "transparent" || c2.trim() === "") return null;
+  const trimmed = c2.trim();
+  try {
+    const hex = new Ie(trimmed).toHex();
+    if (hex && hex.length === 6) {
+      return `#${hex.toLowerCase()}`;
+    }
+  } catch {
+  }
+  if (trimmed.startsWith("#")) {
+    let raw = trimmed.replace(/^#/, "");
+    if (raw.length === 3) raw = raw[0] + raw[0] + raw[1] + raw[1] + raw[2] + raw[2];
+    if (raw.length === 6) return `#${raw.toLowerCase()}`;
+  }
+  return null;
+}
+function extractAllTargetColors(targets) {
+  if (!targets || !targets.length) return [];
+  const colors = [];
+  const seen = /* @__PURE__ */ new Set();
+  const addColor = (raw) => {
+    const norm = normalizeHexColor(raw);
+    if (norm && !seen.has(norm)) {
+      seen.add(norm);
+      colors.push(norm);
+    }
+  };
+  const traverse = (obj) => {
+    if (!obj || obj.name === "workarea") return;
+    if (obj.type === "image" && obj.name !== "qr" && obj.name !== "barcode" && !obj._objects) {
+      return;
+    }
+    if (obj.type === "group" && obj.name === "qr") {
+      if (obj.__qrDark) addColor(obj.__qrDark);
+      if (obj.__qrLight) addColor(obj.__qrLight);
+      return;
+    }
+    if (obj.type === "group" && obj.name === "barcode") {
+      if (obj.__barcodeForeground) addColor(obj.__barcodeForeground);
+      if (obj.__barcodeBackground) addColor(obj.__barcodeBackground);
+      return;
+    }
+    if (obj.type === "group" || obj._objects) {
+      const children = obj.getObjects ? obj.getObjects() : obj._objects || [];
+      children.forEach(traverse);
+      return;
+    }
+    const fill2 = obj.get?.("fill") ?? obj.fill;
+    if (typeof fill2 === "string" && fill2 !== "none" && fill2 !== "transparent" && fill2 !== "") {
+      addColor(fill2);
+    }
+    const stroke2 = obj.get?.("stroke") ?? obj.stroke;
+    const strokeWidth = obj.get?.("strokeWidth") ?? obj.strokeWidth;
+    if (typeof stroke2 === "string" && stroke2 !== "none" && stroke2 !== "transparent" && stroke2 !== "" && (typeof strokeWidth !== "number" || strokeWidth > 0)) {
+      addColor(stroke2);
+    }
+  };
+  targets.forEach(traverse);
+  return colors;
+}
 function extractTargetColor(targets) {
   if (!targets.length) return {};
+  const allColors = extractAllTargetColors(targets);
+  const primaryColor = allColors[0] || void 0;
   const obj = targets[0];
-  let color;
-  let cmyk2 = obj.__cmyk;
-  if (obj.type === "group") {
-    if (obj.name === "qr" && obj.__qrDark) {
-      color = obj.__qrDark;
-      if (obj.__qrDarkCmyk) cmyk2 = obj.__qrDarkCmyk;
-    } else if (obj.name === "barcode" && obj.__barcodeForeground) {
-      color = obj.__barcodeForeground;
-      if (obj.__barcodeFgCmyk) cmyk2 = obj.__barcodeFgCmyk;
-    } else {
-      const colors = extractSVGColors(obj);
-      if (colors.length > 0) color = colors[0];
-    }
-  } else {
-    const fill2 = obj.get?.("fill") ?? obj.fill;
-    if (typeof fill2 === "string") color = fill2;
+  let cmyk2 = obj?.__cmyk;
+  if (primaryColor && !cmyk2) {
+    cmyk2 = hexToCmyk(primaryColor);
   }
-  if (cmyk2 && !color) {
-    color = cmykToHex(cmyk2.c, cmyk2.m, cmyk2.y, cmyk2.k);
-  } else if (color && !cmyk2) {
-    cmyk2 = hexToCmyk(color);
-  }
-  const opacity = typeof obj.opacity === "number" ? Math.round(obj.opacity * 100) : void 0;
-  return { color, opacity, cmyk: cmyk2 };
+  const opacity = typeof obj?.opacity === "number" ? Math.round(obj.opacity * 100) : void 0;
+  return { color: primaryColor, opacity, cmyk: cmyk2 };
 }
-function applyFillToFabricObjects(objects, newColor, alpha, currentColor, canvas2, cmykValues) {
+function applyFillToFabricObjects(objects, newColor, alpha, targetOldColor, canvas2, cmykValues) {
   if (!canvas2 || !objects.length) return;
-  const resolvedCmyk = cmykValues || hexToCmyk(newColor);
+  const targetNewHex = normalizeHexColor(newColor) || newColor.toLowerCase();
+  const targetOldHex = targetOldColor ? normalizeHexColor(targetOldColor) : null;
+  const resolvedCmyk = cmykValues || hexToCmyk(targetNewHex);
   objects.forEach((obj) => {
-    obj.set("opacity", alpha / 100);
-    obj.set("__cmyk", { ...resolvedCmyk });
-    if (obj.type === "textbox" || obj.type === "i-text") {
-      obj.set("fill", newColor);
-    } else if (obj.type === "group" && obj.name === "qr") {
-      updateQRObjectColors(obj, newColor, obj.__qrLight || "#ffffff");
-    } else if (obj.type === "group" && obj.name === "barcode") {
-      updateBarcodeObjectColors(obj, newColor, obj.__barcodeBackground || "#ffffff");
-    } else if (obj.type === "group") {
-      const applyColorRecursive = (child) => {
-        child.set("fill", newColor);
-        if (child.type === "group" && child._objects) {
-          child._objects.forEach((grandchild) => applyColorRecursive(grandchild));
+    if (typeof alpha === "number") {
+      obj.set("opacity", alpha / 100);
+    }
+    if (obj.type === "group" && obj.name === "qr") {
+      const dark = normalizeHexColor(obj.__qrDark) || "#000000";
+      const light = normalizeHexColor(obj.__qrLight) || "#ffffff";
+      let newDark = dark;
+      let newLight = light;
+      if (targetOldHex) {
+        if (dark === targetOldHex) newDark = targetNewHex;
+        if (light === targetOldHex) newLight = targetNewHex;
+      } else {
+        newDark = targetNewHex;
+      }
+      updateQRObjectColors(obj, newDark, newLight);
+      return;
+    }
+    if (obj.type === "group" && obj.name === "barcode") {
+      const fg = normalizeHexColor(obj.__barcodeForeground) || "#000000";
+      const bg = normalizeHexColor(obj.__barcodeBackground) || "#ffffff";
+      let newFg = fg;
+      let newBg = bg;
+      if (targetOldHex) {
+        if (fg === targetOldHex) newFg = targetNewHex;
+        if (bg === targetOldHex) newBg = targetNewHex;
+      } else {
+        newFg = targetNewHex;
+      }
+      updateBarcodeObjectColors(obj, newFg, newBg);
+      return;
+    }
+    if (obj.type === "textbox" || obj.type === "i-text" || obj.type === "text") {
+      obj.set("fill", targetNewHex);
+      obj.set("__cmyk", { ...resolvedCmyk });
+      obj.setCoords();
+      return;
+    }
+    if (obj.type === "group" || obj._objects) {
+      const replaceRecursive = (child) => {
+        if (!child) return;
+        if (typeof child.fill === "string") {
+          const childFillHex = normalizeHexColor(child.fill);
+          if (!targetOldHex || childFillHex === targetOldHex) {
+            child.set("fill", targetNewHex);
+            child.__cmyk = { ...resolvedCmyk };
+          }
+        }
+        if (typeof child.stroke === "string") {
+          const childStrokeHex = normalizeHexColor(child.stroke);
+          if (targetOldHex && childStrokeHex === targetOldHex) {
+            child.set("stroke", targetNewHex);
+            child.__cmyk = { ...resolvedCmyk };
+          }
+        }
+        if (child.type === "group" || child._objects) {
+          const sub = child.getObjects ? child.getObjects() : child._objects || [];
+          sub.forEach(replaceRecursive);
         }
       };
-      if (obj._objects) {
-        obj._objects.forEach((child) => applyColorRecursive(child));
-      }
+      const children = obj.getObjects ? obj.getObjects() : obj._objects || [];
+      children.forEach(replaceRecursive);
     } else {
-      obj.set("fill", newColor);
+      const currentFillHex = normalizeHexColor(obj.fill);
+      if (!targetOldHex || currentFillHex === targetOldHex) {
+        obj.set("fill", targetNewHex);
+        obj.set("__cmyk", { ...resolvedCmyk });
+      }
+      const currentStrokeHex = normalizeHexColor(obj.stroke);
+      if (targetOldHex && currentStrokeHex === targetOldHex) {
+        obj.set("stroke", targetNewHex);
+        obj.set("__cmyk", { ...resolvedCmyk });
+      }
     }
     obj.setCoords();
   });
   canvas2.requestRenderAll();
 }
-const useDraggable = (onDrag, onEnd) => {
-  return (e3) => {
-    const startX = e3.clientX;
-    const startY = e3.clientY;
-    onDrag(startX, startY);
-    const handleMove = (e22) => onDrag(e22.clientX, e22.clientY);
-    const handleUp = () => {
-      document.removeEventListener("mousemove", handleMove);
-      document.removeEventListener("mouseup", handleUp);
-      onEnd?.();
-    };
-    document.addEventListener("mousemove", handleMove);
-    document.addEventListener("mouseup", handleUp);
-  };
-};
-function GradientSelector({
-  hsv,
-  hueColor,
-  refEl,
-  onChange
-}) {
+const STEP$1 = 1;
+const STEP_LARGE = 10;
+function ChannelSlider({ value, min, max, gradient, ariaLabel, onChange, onCommit, className, thumbClassName }) {
+  const trackRef = useRef(null);
+  function pick(event) {
+    const element = trackRef.current;
+    if (!element) return;
+    const bounds = element.getBoundingClientRect();
+    const positionRatio = Math.max(0, Math.min(1, (event.clientX - bounds.left) / bounds.width));
+    onChange(Math.round(min + positionRatio * (max - min)));
+  }
+  function nudge(event) {
+    let next = value;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next += event.shiftKey ? STEP_LARGE : STEP$1;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next -= event.shiftKey ? STEP_LARGE : STEP$1;
+        break;
+      case "PageUp":
+        next += STEP_LARGE;
+        break;
+      case "PageDown":
+        next -= STEP_LARGE;
+        break;
+      case "Home":
+        next = min;
+        break;
+      case "End":
+        next = max;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    next = Math.max(min, Math.min(max, next));
+    if (next !== value) onChange(next);
+  }
+  const percent = (value - min) / (max - min) * 100;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ref: refEl,
-      className: "w-full h-48 mb-3 rounded cursor-crosshair relative",
-      style: {
-        background: `linear-gradient(to bottom, transparent, black), linear-gradient(to right, white, ${hueColor})`
+      ref: trackRef,
+      className: className ? `pqc-slider ${className}` : "pqc-slider",
+      style: { ["--pqc-_grad"]: gradient },
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": ariaLabel,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      onKeyDown: nudge,
+      onPointerDown: (event) => {
+        event.currentTarget.setPointerCapture(event.pointerId);
+        pick(event);
       },
-      onMouseDown: useDraggable((x2, y2) => {
-        if (!refEl.current) return;
-        const rect = refEl.current.getBoundingClientRect();
-        const s2 = Math.max(0, Math.min(x2 - rect.left, rect.width)) / rect.width * 100;
-        const v2 = 100 - Math.max(0, Math.min(y2 - rect.top, rect.height)) / rect.height * 100;
-        onChange({ ...hsv, s: s2, v: v2 });
-      }),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "absolute w-4 h-4 border-2 border-white rounded-full shadow-lg pointer-events-none",
-          style: {
-            left: `${hsv.s}%`,
-            top: `${100 - hsv.v}%`,
-            transform: "translate(-50%, -50%)"
-          }
-        }
-      )
-    }
-  );
-}
-function HueSlider({ hsv, refEl, onChange }) {
-  return /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: refEl,
-      className: "w-full h-4 rounded-full cursor-pointer relative",
-      style: {
-        background: "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)"
+      onPointerMove: (event) => {
+        if (event.buttons === 0) return;
+        pick(event);
       },
-      onMouseDown: useDraggable((x2) => {
-        if (!refEl.current) return;
-        const rect = refEl.current.getBoundingClientRect();
-        const h2 = Math.max(0, Math.min(x2 - rect.left, rect.width)) / rect.width * 360;
-        onChange({ ...hsv, h: h2 });
-      }),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "absolute top-1/2 w-5 h-5 bg-white border-2 border-gray-400 rounded-full shadow-lg pointer-events-none",
-          style: {
-            left: `${hsv.h / 360 * 100}%`,
-            transform: "translate(-50%, -50%)"
-          }
-        }
-      )
+      onPointerUp: () => onCommit?.(),
+      onBlur: () => onCommit?.(),
+      children: /* @__PURE__ */ jsx("div", { className: thumbClassName ? `pqc-slider-thumb ${thumbClassName}` : "pqc-slider-thumb", style: { ["--pqc-_x"]: `${percent}%` } })
     }
-  ) });
-}
-function AlphaSlider({
-  alpha,
-  color,
-  refEl,
-  setAlpha,
-  canvas: canvas2,
-  targets,
-  saveState
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: refEl,
-      className: "w-full h-4 rounded-full cursor-pointer relative overflow-hidden",
-      onMouseDown: useDraggable(
-        (x2) => {
-          if (!refEl.current) return;
-          const rect = refEl.current.getBoundingClientRect();
-          const newAlpha = Math.round(
-            Math.max(0, Math.min(x2 - rect.left, rect.width)) / rect.width * 100
-          );
-          setAlpha(newAlpha);
-          if (canvas2 && targets.length) {
-            targets.forEach((obj) => {
-              obj.set("opacity", newAlpha / 100);
-              obj.setCoords();
-            });
-            canvas2.requestRenderAll();
-          }
-        },
-        saveState
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute inset-0",
-            style: {
-              backgroundImage: `
-              linear-gradient(45deg, #ccc 25%, transparent 25%),
-              linear-gradient(-45deg, #ccc 25%, transparent 25%),
-              linear-gradient(45deg, transparent 75%, #ccc 75%),
-              linear-gradient(-45deg, transparent 75%, #ccc 75%)
-            `,
-              backgroundSize: "8px 8px",
-              backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute inset-0",
-            style: {
-              background: `linear-gradient(to right, transparent, ${color})`
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute top-1/2 w-5 h-5 bg-white border-2 border-gray-400 rounded-full shadow-lg pointer-events-none",
-            style: {
-              left: `${alpha}%`,
-              transform: "translate(-50%, -50%)"
-            }
-          }
-        )
-      ]
-    }
-  ) });
-}
-function CMYKInputs({
-  cmyk: cmyk2,
-  alpha,
-  setAlpha,
-  updateColor,
-  canvas: canvas2,
-  targets,
-  saveState
-}) {
-  const inputClass = "w-full px-1.5 py-1.5 text-xs border border-gray-300 rounded text-center focus:outline-none focus:ring-1 focus:ring-cyan-500 focus:border-cyan-500";
-  return /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-2", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold tracking-wider text-gray-500 uppercase", children: "CMYK" }),
-      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400", children: "Print Values (0–100%)" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-5 gap-1.5", children: [
-      ["c", "m", "y", "k"].map((key) => /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "number",
-            min: 0,
-            max: 100,
-            value: cmyk2[key],
-            onChange: (e3) => {
-              const val = Math.max(0, Math.min(100, +e3.target.value || 0));
-              updateColor({ ...cmyk2, [key]: val });
-            },
-            className: inputClass
-          }
-        ),
-        /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-500 block mt-0.5 text-center font-semibold", children: key.toUpperCase() })
-      ] }, key)),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "number",
-            min: 0,
-            max: 100,
-            value: alpha,
-            onChange: (e3) => {
-              const newAlpha = Math.max(0, Math.min(100, +e3.target.value));
-              setAlpha(newAlpha);
-              if (canvas2 && targets.length) {
-                targets.forEach((obj) => {
-                  obj.set("opacity", newAlpha / 100);
-                  obj.setCoords();
-                });
-                canvas2.requestRenderAll();
-                saveState();
-              }
-            },
-            className: inputClass
-          }
-        ),
-        /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-500 block mt-0.5 text-center font-semibold", children: "A" })
-      ] })
-    ] })
-  ] });
+  );
 }
-function ColorPreviewBox({ color, alpha }) {
-  const outOfGamut = isOutOfCmykGamut(color);
-  return /* @__PURE__ */ jsx("div", { className: "flex items-start gap-3 mb-3", children: /* @__PURE__ */ jsxs("div", { className: "relative w-12 h-12 rounded border border-gray-300 flex-shrink-0", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute inset-0 rounded",
-        style: {
-          backgroundImage: `
-              linear-gradient(45deg, #ccc 25%, transparent 25%),
-              linear-gradient(-45deg, #ccc 25%, transparent 25%),
-              linear-gradient(45deg, transparent 75%, #ccc 75%),
-              linear-gradient(-45deg, transparent 75%, #ccc 75%)
-            `,
-          backgroundSize: "8px 8px",
-          backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
-        }
-      }
-    ),
+function ChannelRow({ label, labelColor, ariaLabel, value, min, max, gradient, onChange, onCommit, sliderClassName, sliderThumbClassName }) {
+  const [rawInput, setRawInput] = useState(String(value));
+  useEffect(() => {
+    setRawInput(String(value));
+  }, [value]);
+  function commit(rawValue) {
+    const parsedValue = parseInt(rawValue, 10);
+    if (!isNaN(parsedValue)) onChange(Math.max(min, Math.min(max, parsedValue)));
+    setRawInput(String(value));
+    onCommit?.("input");
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "pqc-channel-row", children: [
+    /* @__PURE__ */ jsx("span", { className: "pqc-channel-label", style: { color: labelColor }, "aria-hidden": "true", children: label }),
+    /* @__PURE__ */ jsx(ChannelSlider, { value, min, max, gradient, ariaLabel, onChange, onCommit: () => onCommit?.("slider"), className: sliderClassName, thumbClassName: sliderThumbClassName }),
     /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute inset-0 rounded",
-        style: {
-          background: color,
-          opacity: alpha / 100
-        }
-      }
-    ),
-    outOfGamut && /* @__PURE__ */ jsx(
-      "div",
+      "input",
       {
-        className: "absolute -top-1.5 -right-1.5 w-4 h-4 bg-amber-500 rounded-full flex items-center justify-center text-white text-[8px] font-bold shadow-sm cursor-help",
-        title: "This color is outside the CMYK gamut. It may look different when printed.",
-        children: "!"
+        type: "text",
+        inputMode: "numeric",
+        "aria-label": ariaLabel,
+        value: rawInput,
+        onChange: (event) => {
+          setRawInput(event.target.value);
+        },
+        onBlur: (event) => commit(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") commit(event.target.value);
+        },
+        className: "pqc-channel-input"
       }
     )
-  ] }) });
+  ] });
 }
+const DEFAULT_COLORS = ["#f97316", "#ef4444", "#22c55e", "#3b82f6", "#a855f7", "#ec4899", "#000000", "#ffffff"];
+const CMYK_CHANNELS$1 = [
+  { key: "c", label: "C", color: "#009fe3", name: "Cyan" },
+  { key: "m", label: "M", color: "#e6007e", name: "Magenta" },
+  { key: "y", label: "Y", color: "#dcb000", name: "Yellow" },
+  { key: "k", label: "K", color: "#222222", name: "Black" }
+];
 function CMYKColorPicker({ value, onChange, className = "" } = {}) {
   const canvas2 = useEditorStore((s2) => s2.canvas);
   const saveState = useHistoryStore((s2) => s2.saveState);
-  const { objects } = useSelectionStore();
-  const targets = objects.filter((o2) => o2.name !== "workarea");
+  const { objects, activeColor, activeColorIndex, setActiveColor } = useSelectionStore();
+  const targets = useMemo(() => objects.filter((o2) => o2.name !== "workarea"), [objects]);
   const isControlled = typeof onChange === "function";
+  const allTargetColors = useMemo(() => {
+    if (isControlled) return [];
+    return extractAllTargetColors(targets);
+  }, [isControlled, targets, objects]);
   const initialCmyk = typeof value === "object" && value !== null ? value : typeof value === "string" ? hexToCmyk(value) : { c: 0, m: 100, y: 100, k: 0 };
   const initialHex = typeof value === "string" ? value : cmykToHex(initialCmyk.c, initialCmyk.m, initialCmyk.y, initialCmyk.k);
   const [color, setColor] = useState(initialHex);
@@ -102234,17 +102404,32 @@ function CMYKColorPicker({ value, onChange, className = "" } = {}) {
     return rgbToHsv(rgb2.r, rgb2.g, rgb2.b);
   });
   const [alpha, setAlpha] = useState(100);
+  const [mode2, setMode] = useState("HEX");
   const [open2, setOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [recentColors, setRecentColors] = useState([
+    "#e11d48",
+    "#9f1239",
+    "#881337",
+    "#a855f7",
+    "#c084fc",
+    "#475569",
+    "#334155",
+    "#22c55e",
+    "#16a34a",
+    "#6366f1",
+    "#d97706"
+  ]);
   const [coords, setCoords] = useState({ top: 0, left: 0 });
   const containerRef = useRef(null);
   const popoverRef = useRef(null);
-  const gradientRef = useRef(null);
+  const svRef = useRef(null);
   const hueRef = useRef(null);
   const alphaRef = useRef(null);
   const updatePosition = useCallback(() => {
     if (!containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
-    const pickerW = 300, pickerH = 440;
+    const pickerW = 270, pickerH = 430;
     let left = Math.max(10, Math.min(rect.left, window.innerWidth - pickerW - 10));
     let top = rect.bottom + 6;
     if (top + pickerH > window.innerHeight - 10) {
@@ -102255,29 +102440,23 @@ function CMYKColorPicker({ value, onChange, className = "" } = {}) {
   useEffect(() => {
     if (!open2) return;
     updatePosition();
+    const close = (e3) => {
+      const t2 = e3.target;
+      if (containerRef.current?.contains(t2) || popoverRef.current?.contains(t2)) return;
+      setOpen(false);
+    };
     window.addEventListener("resize", updatePosition);
-    window.addEventListener("scroll", updatePosition, true);
+    document.addEventListener("mousedown", close, { capture: true });
     return () => {
       window.removeEventListener("resize", updatePosition);
-      window.removeEventListener("scroll", updatePosition, true);
+      document.removeEventListener("mousedown", close, { capture: true });
     };
   }, [open2, updatePosition]);
-  useEffect(() => {
-    if (!open2) return;
-    const handleClickOutside = (e3) => {
-      const t2 = e3.target;
-      if (containerRef.current?.contains(t2) || popoverRef.current?.contains(t2)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handleClickOutside, { capture: true });
-    return () => document.removeEventListener("mousedown", handleClickOutside, { capture: true });
-  }, [open2]);
   useEffect(() => {
     if (isControlled && value) {
       if (typeof value === "object") {
         const rgb2 = cmykToRgb(value.c, value.m, value.y, value.k);
-        const hex = rgbToHex(rgb2.r, rgb2.g, rgb2.b);
-        setColor(hex);
+        setColor(rgbToHex(rgb2.r, rgb2.g, rgb2.b));
         setCmyk(value);
         setHsv(rgbToHsv(rgb2.r, rgb2.g, rgb2.b));
       } else if (typeof value === "string") {
@@ -102294,35 +102473,32 @@ function CMYKColorPicker({ value, onChange, className = "" } = {}) {
       setOpen(false);
       return;
     }
-    const { color: targetColor, opacity: targetOpacity, cmyk: targetCmyk } = extractTargetColor(targets);
-    if (targetCmyk) {
-      setCmyk(targetCmyk);
-      const rgb2 = cmykToRgb(targetCmyk.c, targetCmyk.m, targetCmyk.y, targetCmyk.k);
-      const hex = rgbToHex(rgb2.r, rgb2.g, rgb2.b);
-      setColor(hex);
+    const { color: tColor, opacity: tOpacity, cmyk: tCmyk } = extractTargetColor(targets);
+    if (tCmyk) {
+      setCmyk(tCmyk);
+      const rgb2 = cmykToRgb(tCmyk.c, tCmyk.m, tCmyk.y, tCmyk.k);
+      setColor(rgbToHex(rgb2.r, rgb2.g, rgb2.b));
       setHsv(rgbToHsv(rgb2.r, rgb2.g, rgb2.b));
-    } else if (targetColor && targetColor !== color) {
-      const rgb2 = hexToRgb(targetColor);
-      setColor(targetColor);
+    } else if (tColor && tColor !== color) {
+      const rgb2 = hexToRgb(tColor);
+      setColor(tColor);
       setHsv(rgbToHsv(rgb2.r, rgb2.g, rgb2.b));
       setCmyk(rgbToCmyk(rgb2.r, rgb2.g, rgb2.b));
     }
-    if (typeof targetOpacity === "number" && targetOpacity !== alpha) {
-      setAlpha(targetOpacity);
-    }
+    if (typeof tOpacity === "number" && tOpacity !== alpha) setAlpha(tOpacity);
   }, [isControlled, objects]);
-  const applyColor = useCallback(
+  const applyControlledColor = useCallback(
     (newColor, newCmyk) => {
       const finalCmyk = newCmyk || cmyk2;
       setColor(newColor);
       if (isControlled && onChange) {
         onChange(newColor, finalCmyk);
       } else if (canvas2 && targets.length) {
-        applyFillToFabricObjects(targets, newColor, alpha, color, canvas2, finalCmyk);
+        applyFillToFabricObjects(targets, newColor, alpha, activeColor || color, canvas2, finalCmyk);
         saveState();
       }
     },
-    [isControlled, onChange, canvas2, targets, alpha, color, cmyk2, saveState]
+    [isControlled, onChange, canvas2, targets, alpha, color, activeColor, cmyk2, saveState]
   );
   const updateFromHsv = (newHsv) => {
     const rgb2 = hsvToRgb(newHsv.h, newHsv.s, newHsv.v);
@@ -102330,25 +102506,76 @@ function CMYKColorPicker({ value, onChange, className = "" } = {}) {
     const hex = rgbToHex(rgb2.r, rgb2.g, rgb2.b);
     setHsv(newHsv);
     setCmyk(newC);
-    applyColor(hex, newC);
+    applyControlledColor(hex, newC);
   };
   const updateFromCmyk = (newCmyk) => {
     const rgb2 = cmykToRgb(newCmyk.c, newCmyk.m, newCmyk.y, newCmyk.k);
     const hex = rgbToHex(rgb2.r, rgb2.g, rgb2.b);
     setCmyk(newCmyk);
     setHsv(rgbToHsv(rgb2.r, rgb2.g, rgb2.b));
-    applyColor(hex, newCmyk);
+    applyControlledColor(hex, newCmyk);
+  };
+  const updateFromHex = (inputHex) => {
+    let clean = inputHex.trim().replace(/^#/, "");
+    if (clean.length === 3) clean = clean[0] + clean[0] + clean[1] + clean[1] + clean[2] + clean[2];
+    if (/^[0-9a-fA-F]{6}$/.test(clean)) {
+      const hex = `#${clean.toLowerCase()}`;
+      const rgb2 = hexToRgb(hex);
+      const newC = rgbToCmyk(rgb2.r, rgb2.g, rgb2.b);
+      setHsv(rgbToHsv(rgb2.r, rgb2.g, rgb2.b));
+      setCmyk(newC);
+      applyControlledColor(hex, newC);
+      setRecentColors((prev) => [hex, ...prev.filter((c2) => c2.toLowerCase() !== hex)].slice(0, 16));
+    }
   };
-  if (!isControlled && !targets.length) return null;
+  const handleCopy = () => {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(color);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  const handleEyeDropper = async () => {
+    if (typeof window === "undefined" || !("EyeDropper" in window)) return;
+    try {
+      const result = await new window.EyeDropper().open();
+      if (result?.sRGBHex) updateFromHex(result.sRGBHex);
+    } catch {
+    }
+  };
+  if (!isControlled) {
+    if (!targets.length || !allTargetColors.length) return null;
+    return /* @__PURE__ */ jsx("div", { className: `flex items-center gap-1.5 ${className}`, children: allTargetColors.map((c2, idx) => {
+      const isSelected = activeColor ? activeColor.toLowerCase() === c2.toLowerCase() : activeColorIndex === idx || idx === 0 && !activeColor;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setActiveColor(c2, idx);
+            const { activePanel, setActivePanel } = useSidePanelStore.getState();
+            if (activePanel !== "color") {
+              setActivePanel("color");
+            }
+          },
+          className: `w-7 h-7 rounded-md border shadow-xs transition-transform hover:scale-105 cursor-pointer relative ${isSelected ? "border-white ring-2 ring-[#02bc71] scale-105 z-10" : "border-neutral-600 hover:border-neutral-400"}`,
+          style: { backgroundColor: c2 },
+          title: `Edit color ${c2.toUpperCase()}`
+        },
+        c2 + "-" + idx
+      );
+    }) });
+  }
   const hueRgb = hsvToRgb(hsv.h, 100, 100);
   const hueColor = rgbToHex(hueRgb.r, hueRgb.g, hueRgb.b);
   return /* @__PURE__ */ jsxs("div", { className: `relative ${className}`, ref: containerRef, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: "cursor-pointer w-7 h-7 rounded-md border border-neutral-600 shadow-sm",
+        className: "cursor-pointer w-7 h-7 rounded-md border border-neutral-600 shadow-sm transition-transform hover:scale-105",
         style: { background: color },
-        onClick: () => setOpen((v2) => !v2)
+        onClick: () => setOpen((v2) => !v2),
+        title: "Color Picker"
       }
     ),
     open2 && createPortal(
@@ -102357,46 +102584,202 @@ function CMYKColorPicker({ value, onChange, className = "" } = {}) {
         {
           ref: popoverRef,
           style: { position: "fixed", top: `${coords.top}px`, left: `${coords.left}px`, zIndex: 999999 },
-          className: "bg-white border border-gray-300 rounded-lg shadow-2xl p-3 w-[290px] text-gray-800",
+          className: "bg-white rounded-2xl shadow-2xl p-3.5 w-[270px] text-gray-800 border border-gray-100 select-none font-sans",
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-gray-800 font-semibold text-sm", children: "Color Picker" }),
-                /* @__PURE__ */ jsx("span", { className: "text-[9px] font-bold tracking-wider text-cyan-600 bg-cyan-50 px-1.5 py-0.5 rounded uppercase", children: "CMYK" })
-              ] }),
-              /* @__PURE__ */ jsx("button", { onClick: () => setOpen(false), className: "text-gray-400 hover:text-gray-600 text-lg leading-none", children: "✕" })
-            ] }),
-            /* @__PURE__ */ jsx(GradientSelector, { hsv, hueColor, refEl: gradientRef, onChange: updateFromHsv }),
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-              /* @__PURE__ */ jsx(ColorPreviewBox, { color, alpha }),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx(HueSlider, { hsv, refEl: hueRef, onChange: updateFromHsv }),
-                !isControlled && /* @__PURE__ */ jsx(
-                  AlphaSlider,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: svRef,
+                className: "w-full h-[135px] rounded-xl relative cursor-crosshair overflow-hidden touch-none",
+                style: { background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})` },
+                onPointerDown: (e3) => {
+                  e3.currentTarget.setPointerCapture(e3.pointerId);
+                  const rect = e3.currentTarget.getBoundingClientRect();
+                  updateFromHsv({
+                    ...hsv,
+                    s: Math.round(Math.max(0, Math.min(1, (e3.clientX - rect.left) / rect.width)) * 100),
+                    v: Math.round((1 - Math.max(0, Math.min(1, (e3.clientY - rect.top) / rect.height))) * 100)
+                  });
+                },
+                onPointerMove: (e3) => {
+                  if (e3.buttons === 0) return;
+                  const rect = e3.currentTarget.getBoundingClientRect();
+                  updateFromHsv({
+                    ...hsv,
+                    s: Math.round(Math.max(0, Math.min(1, (e3.clientX - rect.left) / rect.width)) * 100),
+                    v: Math.round((1 - Math.max(0, Math.min(1, (e3.clientY - rect.top) / rect.height))) * 100)
+                  });
+                },
+                children: /* @__PURE__ */ jsx(
+                  "div",
                   {
-                    alpha,
-                    color,
-                    refEl: alphaRef,
-                    setAlpha,
-                    canvas: canvas2,
-                    targets,
-                    saveState
+                    className: "w-4 h-4 rounded-full border-2 border-white shadow-md absolute pointer-events-none -translate-x-1/2 -translate-y-1/2",
+                    style: { left: `${hsv.s}%`, top: `${100 - hsv.v}%`, backgroundColor: color }
                   }
                 )
-              ] })
-            ] }),
+              }
+            ),
             /* @__PURE__ */ jsx(
-              CMYKInputs,
+              "div",
               {
-                cmyk: cmyk2,
-                alpha,
-                setAlpha,
-                updateColor: updateFromCmyk,
-                canvas: canvas2,
-                targets,
-                saveState
+                ref: hueRef,
+                className: "w-full h-3 rounded-full relative cursor-pointer mt-3 mb-2 touch-none shadow-inner",
+                style: { background: "linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)" },
+                onPointerDown: (e3) => {
+                  e3.currentTarget.setPointerCapture(e3.pointerId);
+                  const rect = e3.currentTarget.getBoundingClientRect();
+                  updateFromHsv({ ...hsv, h: Math.round(Math.max(0, Math.min(1, (e3.clientX - rect.left) / rect.width)) * 360) % 360 });
+                },
+                onPointerMove: (e3) => {
+                  if (e3.buttons === 0) return;
+                  const rect = e3.currentTarget.getBoundingClientRect();
+                  updateFromHsv({ ...hsv, h: Math.round(Math.max(0, Math.min(1, (e3.clientX - rect.left) / rect.width)) * 360) % 360 });
+                },
+                children: /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full border-2 border-white shadow-md absolute top-1/2 -translate-y-1/2 -translate-x-1/2 pointer-events-none", style: { left: `${hsv.h / 360 * 100}%`, backgroundColor: hueColor } })
               }
-            )
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: alphaRef,
+                className: "w-full h-3 rounded-full relative cursor-pointer mb-3 touch-none pqc-checkerboard shadow-inner overflow-hidden",
+                onPointerDown: (e3) => {
+                  e3.currentTarget.setPointerCapture(e3.pointerId);
+                  const rect = e3.currentTarget.getBoundingClientRect();
+                  const newAlpha = Math.round(Math.max(0, Math.min(1, (e3.clientX - rect.left) / rect.width)) * 100);
+                  setAlpha(newAlpha);
+                  if (canvas2 && targets.length) {
+                    targets.forEach((obj) => obj.set("opacity", newAlpha / 100));
+                    canvas2.requestRenderAll();
+                  }
+                },
+                onPointerMove: (e3) => {
+                  if (e3.buttons === 0) return;
+                  const rect = e3.currentTarget.getBoundingClientRect();
+                  const newAlpha = Math.round(Math.max(0, Math.min(1, (e3.clientX - rect.left) / rect.width)) * 100);
+                  setAlpha(newAlpha);
+                  if (canvas2 && targets.length) {
+                    targets.forEach((obj) => obj.set("opacity", newAlpha / 100));
+                    canvas2.requestRenderAll();
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "absolute inset-0",
+                      style: {
+                        background: `linear-gradient(to right, transparent, ${color})`
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full border-2 border-white shadow-md absolute top-1/2 -translate-y-1/2 -translate-x-1/2 pointer-events-none", style: { left: `${alpha}%` } })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-1.5 mb-3 bg-gray-50 p-1 rounded-xl border border-gray-100", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setMode("HEX"),
+                  className: `flex-1 py-1 text-xs font-semibold rounded-lg transition-all ${mode2 === "HEX" ? "bg-white text-gray-900 shadow-sm" : "text-gray-500 hover:text-gray-900"}`,
+                  children: "HEX"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setMode("CMYK"),
+                  className: `flex-1 py-1 text-xs font-semibold rounded-lg transition-all ${mode2 === "CMYK" ? "bg-white text-gray-900 shadow-sm" : "text-gray-500 hover:text-gray-900"}`,
+                  children: "CMYK"
+                }
+              )
+            ] }),
+            mode2 === "HEX" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center bg-gray-50 border border-gray-200 rounded-xl px-2.5 py-1.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-400 text-xs font-mono", children: "#" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: color.replace("#", "").toUpperCase(),
+                    onChange: (e3) => updateFromHex(e3.target.value),
+                    className: "w-full bg-transparent text-xs font-mono font-medium focus:outline-none uppercase pl-1 text-gray-800"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleCopy,
+                  className: "p-2 rounded-xl bg-gray-50 hover:bg-gray-100 border border-gray-200 text-gray-600 transition-colors cursor-pointer text-xs",
+                  title: "Copy HEX",
+                  children: copied ? "✓" : "Copy"
+                }
+              ),
+              typeof window !== "undefined" && "EyeDropper" in window && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleEyeDropper,
+                  className: "p-2 rounded-xl bg-gray-50 hover:bg-gray-100 border border-gray-200 text-gray-600 hover:text-cyan-600 transition-colors cursor-pointer",
+                  title: "Eyedropper",
+                  children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                    /* @__PURE__ */ jsx("path", { d: "m14 7 3 3" }),
+                    /* @__PURE__ */ jsx("path", { d: "M19 10 9 20l-4 1 1-4 10-10a2.828 2.828 0 0 1 4 4Z" }),
+                    /* @__PURE__ */ jsx("path", { d: "m15 4 2-2 4 4-2 2" })
+                  ] })
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-1.5 mb-3", children: CMYK_CHANNELS$1.map(({ key, label, color: lColor, name }) => /* @__PURE__ */ jsx(
+              ChannelRow,
+              {
+                label,
+                labelColor: lColor,
+                ariaLabel: name,
+                value: cmyk2[key],
+                min: 0,
+                max: 100,
+                gradient: `linear-gradient(to right, ${cmykToHex(
+                  key === "c" ? 0 : cmyk2.c,
+                  key === "m" ? 0 : cmyk2.m,
+                  key === "y" ? 0 : cmyk2.y,
+                  key === "k" ? 0 : cmyk2.k
+                )}, ${cmykToHex(
+                  key === "c" ? 100 : cmyk2.c,
+                  key === "m" ? 100 : cmyk2.m,
+                  key === "y" ? 100 : cmyk2.y,
+                  key === "k" ? 100 : cmyk2.k
+                )})`,
+                onChange: (val) => updateFromCmyk({ ...cmyk2, [key]: val })
+              },
+              key
+            )) }),
+            /* @__PURE__ */ jsxs("div", { className: "pt-2 border-t border-gray-100", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5", children: "Preset Swatches" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-8 gap-1.5", children: DEFAULT_COLORS.map((c2) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "w-6 h-6 rounded-md border border-gray-200 shadow-xs cursor-pointer hover:scale-110 transition-transform",
+                  style: { backgroundColor: c2 },
+                  onClick: () => updateFromHex(c2),
+                  title: c2
+                },
+                c2
+              )) })
+            ] }),
+            recentColors.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pt-2 mt-2 border-t border-gray-100", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5", children: "Recent Colors" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-8 gap-1.5", children: recentColors.map((c2, i) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "w-6 h-6 rounded-md border border-gray-200 shadow-xs cursor-pointer hover:scale-110 transition-transform",
+                  style: { backgroundColor: c2 },
+                  onClick: () => updateFromHex(c2),
+                  title: c2
+                },
+                c2 + i
+              )) })
+            ] })
           ]
         }
       ),
@@ -102492,11 +102875,26 @@ function BackgroundPanel() {
         hex
       ))
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "h-[calc(100vh-122px)] overflow-auto", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 mx-4 pb-5", children: backgroundImages.map((item, i) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "h-[calc(100vh-165px)] overflow-auto", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 mx-4 pb-5", children: backgroundImages.map((item, i) => /* @__PURE__ */ jsx(
       "button",
       {
         className: "relative aspect-square rounded overflow-hidden group cursor-pointer",
-        onClick: () => handleApplyBackground("image", item.largeImage),
+        onClick: async () => {
+          try {
+            startLoading();
+            const image = await ShapeService.convertImages(item.largeImage);
+            const imageUrl = image?.success ? image?.url : null;
+            if (!imageUrl) return;
+            handleApplyBackground("image", imageUrl);
+            if (window.innerWidth < 768) {
+              useSidePanelStore.getState().setActivePanel(null);
+            }
+          } catch (error2) {
+            console.error("Failed to convert image:", error2);
+          } finally {
+            stopLoading();
+          }
+        },
         children: /* @__PURE__ */ jsx(
           "img",
           {
@@ -102514,14 +102912,40 @@ function BackgroundPanel() {
 }
 function UploadPanel() {
   const [assets, setAssets] = useState([]);
-  function handleFileChange(e3) {
+  const { startLoading, stopLoading } = useLoaderStore();
+  async function handleFileChange(e3) {
     const file = e3.target.files?.[0];
     if (!file) return;
     if (!file.type.startsWith("image/")) return;
-    const url = URL.createObjectURL(file);
-    setAssets((prev) => [...prev, { id: crypto.randomUUID(), url }]);
+    const previewUrl = URL.createObjectURL(file);
+    const newAsset = { id: crypto.randomUUID(), url: previewUrl, file };
+    setAssets((prev) => [newAsset, ...prev]);
     e3.target.value = "";
   }
+  async function handleAssetClick(asset) {
+    try {
+      startLoading();
+      let targetUrl = asset.uploadedUrl;
+      if (!targetUrl && asset.file) {
+        targetUrl = await UploadService.uploadFileApi(asset.file);
+        setAssets(
+          (prev) => prev.map((a2) => a2.id === asset.id ? { ...a2, uploadedUrl: targetUrl } : a2)
+        );
+      }
+      const finalUrl = targetUrl || asset.url;
+      if (finalUrl) {
+        addImageToCanvas(finalUrl);
+        if (window.innerWidth < 768) {
+          useSidePanelStore.getState().setActivePanel(null);
+        }
+      }
+    } catch (error2) {
+      console.error("Failed to add image to canvas:", error2);
+      addImageToCanvas(asset.url);
+    } finally {
+      stopLoading();
+    }
+  }
   return /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
     /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold mb-4 mt-2", children: "Upload your assets" }),
     /* @__PURE__ */ jsxs("label", { className: "w-full bg-[#02bc71] border border-neutral-700 hover:bg-[#03945a] py-2 rounded-md font-medium flex items-center justify-center gap-2 cursor-pointer", children: [
@@ -102540,17 +102964,12 @@ function UploadPanel() {
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 mt-3", children: assets.map((asset) => /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => {
-          addImageToCanvas(asset.url);
-          if (window.innerWidth < 768) {
-            useSidePanelStore.getState().setActivePanel(null);
-          }
-        },
+        onClick: () => handleAssetClick(asset),
         className: "rounded-md overflow-hidden transition cursor-pointer",
         children: /* @__PURE__ */ jsx(
           "img",
           {
-            src: asset.url,
+            src: asset.uploadedUrl || asset.url,
             alt: "asset",
             height: 300,
             width: 300,
@@ -104836,7 +105255,7 @@ async function generateQRSVG(value, dark = "#000000", light = "#ffffff") {
   <path fill="${dark}" d="${pathData.trim()}" />
 </svg>`;
 }
-const inputStyle$1 = "w-full bg-neutral-800 border border-neutral-600 rounded-md px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition";
+const inputStyle$1 = "w-full bg-neutral-800 border border-neutral-600 rounded-md px-3 py-2 text-sm outline-none focus:border-[#02bc71] focus:ring-1 focus:ring-[#02bc71] transition";
 const FormField$1 = ({
   label,
   error: error2,
@@ -105641,17 +106060,38 @@ function useBlurEffect(canvas2, active) {
     canvas2.requestRenderAll();
   }, [canvas2, active, blur.enabled, blur.value]);
 }
-function useBrightnessEffect(canvas2, enabled) {
-  const { brightness } = useEffectStore();
+function useBrightnessEffect(canvas2, active) {
+  const brightness = useEffectStore((s2) => s2.brightness);
   useEffect(() => {
-    if (!enabled) return;
-    if (!canvas2) return;
-    if (!brightness.enabled) return;
-    const target = getActiveEffectTarget(canvas2);
-    if (!target) return;
-    target.set("opacity", 1 + brightness.value / 100);
+    if (!canvas2 || !active) return;
+    const obj = getActiveEffectTarget(canvas2);
+    if (!obj) return;
+    if (obj.type !== "image" && obj.type !== "FabricImage") return;
+    const image = obj;
+    image.filters = image.filters || [];
+    const BRIGHTNESS_INDEX = image.filters.findIndex(
+      (f) => f && (f.type === "Brightness" || f instanceof Sh.Brightness)
+    );
+    if (!brightness.enabled || brightness.value === 0) {
+      if (BRIGHTNESS_INDEX !== -1) {
+        image.filters.splice(BRIGHTNESS_INDEX, 1);
+        image.applyFilters();
+        canvas2.requestRenderAll();
+      }
+      return;
+    }
+    const strength = Math.max(-1, Math.min(1, brightness.value / 100));
+    const brightnessFilter = new Sh.Brightness({
+      brightness: strength
+    });
+    if (BRIGHTNESS_INDEX !== -1) {
+      image.filters[BRIGHTNESS_INDEX] = brightnessFilter;
+    } else {
+      image.filters.push(brightnessFilter);
+    }
+    image.applyFilters();
     canvas2.requestRenderAll();
-  }, [canvas2, enabled, brightness.enabled, brightness.value]);
+  }, [canvas2, active, brightness.enabled, brightness.value]);
 }
 function EffectSection({
   label,
@@ -106245,7 +106685,6 @@ function EffectsPanel() {
   const { toggleShadow, setShadow } = useEffectStore();
   useBlurEffect(canvas2, isOpen);
   useBrightnessEffect(canvas2, isOpen);
-  useBrightnessEffect(canvas2, isOpen);
   useTemperatureEffect(canvas2, isOpen);
   useContrastEffect(canvas2, isOpen);
   useShadowEffect(canvas2, isOpen);
@@ -107093,7 +107532,7 @@ function FontPanel() {
       )
     ] }),
     /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-    /* @__PURE__ */ jsx("div", { className: "h-[calc(100vh-125px)] overflow-auto", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "mx-4 py-5", children: fontData.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm text-center", children: "No results found" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "h-[calc(100vh-126px)] overflow-auto", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "mx-4 py-5", children: fontData.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm text-center", children: "No results found" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4", children: fontData.map((item, i) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -152463,82 +152902,99 @@ function BarcodePanel() {
     )
   ] }) });
 }
-const QUOTES = [
-  {
-    content: "There are no absolutes in this world, and there will always be mistakes that are made within brokerage firms; there will always be people who set out to deceive the regulators and even deceive their own senior management.",
-    author: "Mary Schapiro"
-  },
-  {
-    content: "Things will get better if you just hold out long enough.",
-    author: "Desmond Dekker"
-  },
-  {
-    content: "The thing I am attracted to is just good writing and stories that are based somewhat in reality.",
-    author: "Jennifer Aniston"
-  },
-  {
-    content: "Tax reform and expanded trade are going to be so important to the economy of Illinois.",
-    author: "Bill Foster"
-  },
-  {
-    content: "In the middle of every difficulty lies opportunity.",
-    author: "Albert Einstein"
-  },
-  {
-    content: "It does not matter how slowly you go as long as you do not stop.",
-    author: "Confucius"
-  },
-  {
-    content: "Life is what happens when you're busy making other plans.",
-    author: "John Lennon"
-  },
-  {
-    content: "The future belongs to those who believe in the beauty of their dreams.",
-    author: "Eleanor Roosevelt"
-  },
-  {
-    content: "Success is not final, failure is not fatal: it is the courage to continue that counts.",
-    author: "Winston Churchill"
-  },
-  {
-    content: "You miss 100% of the shots you don't take.",
-    author: "Wayne Gretzky"
-  },
-  {
-    content: "Whether you think you can or you think you can't, you're right.",
-    author: "Henry Ford"
-  },
-  {
-    content: "I have not failed. I've just found 10,000 ways that won't work.",
-    author: "Thomas Edison"
+const QuoteService = {
+  async getAllQuotes(params = {}) {
+    try {
+      const query = new URLSearchParams();
+      if (params.page) query.append("page", String(params.page));
+      if (params.limit) query.append("limit", String(params.limit));
+      if (params.search) query.append("search", params.search);
+      query.append("status", "true");
+      const res = await apiFetch(`/api/quotes?${query.toString()}`, {
+        method: "GET"
+      });
+      return Array.isArray(res?.data) ? res.data : [];
+    } catch (err) {
+      console.error("Failed to fetch quotes:", err);
+      return [];
+    }
   }
-];
+};
 function QuotesPanel() {
+  const [quotes, setQuotes] = useState([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const scrollRef = useRef(null);
+  const fetchQuotes = useCallback(async (pageNo) => {
+    setIsLoading(true);
+    try {
+      const data = await QuoteService.getAllQuotes({ page: pageNo, limit: 20 });
+      if (data && data.length > 0) {
+        setQuotes((prev) => pageNo === 1 ? data : [...prev, ...data]);
+        if (data.length < 20) {
+          setHasMore(false);
+        }
+      } else {
+        setHasMore(false);
+      }
+    } catch (err) {
+      console.error("Failed to load quotes:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    fetchQuotes(1);
+  }, [fetchQuotes]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onScroll = () => {
+      if (!hasMore || isLoading) return;
+      if (el.scrollTop + el.clientHeight >= el.scrollHeight - 150) {
+        setPage((prev) => {
+          const next = prev + 1;
+          fetchQuotes(next);
+          return next;
+        });
+      }
+    };
+    el.addEventListener("scroll", onScroll);
+    return () => el.removeEventListener("scroll", onScroll);
+  }, [hasMore, isLoading, fetchQuotes]);
   const addQuote = async (content, author) => {
-    await addTextToCanvas(18, 300, `${content}
+    await addTextToCanvas(18, 300, author ? `${content}
 
-— ${author}`);
+— ${author}` : content);
+    if (window.innerWidth < 768) {
+      useSidePanelStore.getState().setActivePanel(null);
+    }
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsx("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-white", children: "Quotes" }) }),
     /* @__PURE__ */ jsx("hr", { className: "border-neutral-800 mx-4 mb-3" }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: scrollRef,
         className: "flex-1 min-h-0 overflow-y-auto flex flex-col gap-3 px-4 py-2",
-        children: QUOTES.map((q2, i) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => addQuote(q2.content, q2.author),
-            title: "Click to add to canvas",
-            className: "\n            w-full text-left rounded-lg\n            bg-neutral-800 hover:bg-neutral-700\n            border border-neutral-700 hover:border-[#02bc71]/40\n            px-4 py-3.5 cursor-pointer\n            transition-all duration-150 active:scale-[0.98]\n            group\n          ",
-            children: [
-              /* @__PURE__ */ jsx("p", { className: "text-neutral-200 text-[13px] leading-relaxed mb-2 group-hover:text-white transition-colors", children: q2.content }),
-              /* @__PURE__ */ jsx("p", { className: "text-right text-[12px] font-semibold text-[#02bc71]", children: q2.author })
-            ]
-          },
-          i
-        ))
+        children: [
+          quotes.map((q2, i) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => addQuote(q2.content, q2.author),
+              title: "Click to add to canvas",
+              className: "\n              w-full text-left rounded-lg\n              bg-neutral-800 hover:bg-neutral-700\n              border border-neutral-700 hover:border-[#02bc71]/40\n              px-4 py-3.5 cursor-pointer\n              transition-all duration-150 active:scale-[0.98]\n              group\n            ",
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "text-neutral-200 text-[13px] leading-relaxed mb-2 group-hover:text-white transition-colors", children: q2.content }),
+                q2.author && /* @__PURE__ */ jsx("p", { className: "text-right text-[12px] font-semibold text-[#02bc71]", children: q2.author })
+              ]
+            },
+            q2._id || i
+          )),
+          isLoading && /* @__PURE__ */ jsx("div", { className: "text-center py-4 text-xs text-neutral-500", children: "Loading more quotes..." })
+        ]
       }
     )
   ] });
@@ -152566,6 +153022,559 @@ const QuotesIcon = () => /* @__PURE__ */ jsx(
     ) })
   }
 );
+const ColorService = {
+  async getAll(params) {
+    try {
+      const searchParams = new URLSearchParams();
+      if (params?.search) searchParams.append("search", params.search);
+      if (params?.status !== void 0) searchParams.append("status", String(params.status));
+      searchParams.append("limit", String(params?.limit || 100));
+      if (params?.page) searchParams.append("page", String(params.page));
+      const res = await apiFetch(`/colors?${searchParams.toString()}`, {
+        method: "GET"
+      });
+      if (Array.isArray(res)) return res;
+      if (Array.isArray(res?.data)) return res.data;
+      return [];
+    } catch (err) {
+      console.error("Failed to fetch colors:", err);
+      return [];
+    }
+  }
+};
+const DEFAULT_PRESET_COLORS = [
+  "#ffffff",
+  "#000000",
+  "#1e293b",
+  "#475569",
+  "#94a3b8",
+  "#e2e8f0",
+  "#ef4444",
+  "#f97316",
+  "#f59e0b",
+  "#eab308",
+  "#84cc16",
+  "#22c55e",
+  "#10b981",
+  "#06b6d4",
+  "#0ea5e9",
+  "#3b82f6",
+  "#6366f1",
+  "#8b5cf6",
+  "#a855f7",
+  "#d946ef",
+  "#ec4899",
+  "#f43f5e"
+];
+const CMYK_CHANNELS = [
+  { key: "c", label: "C", color: "#009fe3", name: "Cyan" },
+  { key: "m", label: "M", color: "#e6007e", name: "Magenta" },
+  { key: "y", label: "Y", color: "#dcb000", name: "Yellow" },
+  { key: "k", label: "K", color: "#222222", name: "Black" }
+];
+function ColorPanel() {
+  const canvas2 = useEditorStore((s2) => s2.canvas);
+  const { objects, activeColor, activeColorIndex, setActiveColor } = useSelectionStore();
+  const { setActivePanel } = useSidePanelStore();
+  const saveState = useHistoryStore((s2) => s2.saveState);
+  const targets = useMemo(
+    () => objects.filter((o2) => o2.name !== "workarea"),
+    [objects]
+  );
+  const objectColors = useMemo(() => extractAllTargetColors(targets), [targets, objects]);
+  const targetInfo = useMemo(() => extractTargetColor(targets), [targets]);
+  const initialColor = activeColor || (objectColors.length > 0 ? objectColors[0] : targetInfo.color || "#000000");
+  const [currentColor, setCurrentColor] = useState(initialColor);
+  const [currentCmyk, setCurrentCmyk] = useState(() => hexToCmyk(initialColor));
+  const [hsv, setHsv] = useState(() => {
+    const rgb2 = hexToRgb(initialColor);
+    return rgbToHsv(rgb2.r, rgb2.g, rgb2.b);
+  });
+  const [alpha, setAlpha] = useState(() => targetInfo.opacity ?? 100);
+  const [colorMode, setColorMode] = useState("HEX");
+  const [dbColors, setDbColors] = useState([]);
+  const [isLoadingColors, setIsLoadingColors] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const svRef = useRef(null);
+  const hueRef = useRef(null);
+  const alphaRef = useRef(null);
+  useEffect(() => {
+    if (targets.length > 0) {
+      const colors = extractAllTargetColors(targets);
+      if (colors.length > 0) {
+        let chosenColor = activeColor;
+        if (!chosenColor || !colors.includes(chosenColor)) {
+          chosenColor = colors[activeColorIndex] || colors[0];
+        }
+        setCurrentColor(chosenColor);
+        const c2 = hexToCmyk(chosenColor);
+        setCurrentCmyk(c2);
+        const rgb2 = hexToRgb(chosenColor);
+        setHsv(rgbToHsv(rgb2.r, rgb2.g, rgb2.b));
+        const info = extractTargetColor(targets);
+        if (info.opacity !== void 0) setAlpha(info.opacity);
+        if (activeColor !== chosenColor) {
+          const idx = colors.indexOf(chosenColor);
+          setActiveColor(chosenColor, idx >= 0 ? idx : 0);
+        }
+      }
+    }
+  }, [targets, activeColor, activeColorIndex]);
+  useEffect(() => {
+    let isMounted = true;
+    const fetchColors = async () => {
+      setIsLoadingColors(true);
+      try {
+        const data = await ColorService.getAll({ status: true, limit: 100 });
+        if (isMounted) setDbColors(data);
+      } finally {
+        if (isMounted) setIsLoadingColors(false);
+      }
+    };
+    fetchColors();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  const documentColors = useMemo(() => {
+    if (!canvas2) return [];
+    const allObjs = canvas2.getObjects ? canvas2.getObjects() : [];
+    return extractAllTargetColors(allObjs);
+  }, [canvas2, objects]);
+  const applyColor = useCallback(
+    (newHex, cmykVal, opacityVal = alpha) => {
+      const resolvedCmyk = cmykVal || hexToCmyk(newHex);
+      const oldTargetColor = currentColor;
+      setCurrentColor(newHex);
+      setCurrentCmyk(resolvedCmyk);
+      if (targets.length > 0) {
+        applyFillToFabricObjects(targets, newHex, opacityVal, oldTargetColor, canvas2, resolvedCmyk);
+        setActiveColor(newHex, activeColorIndex);
+      } else {
+        addBackgroundColor(newHex);
+      }
+      saveState();
+    },
+    [targets, canvas2, alpha, currentColor, activeColorIndex, setActiveColor, saveState]
+  );
+  const updateFromHsv = useCallback(
+    (newHsv) => {
+      const rgb2 = hsvToRgb(newHsv.h, newHsv.s, newHsv.v);
+      const newC = rgbToCmyk(rgb2.r, rgb2.g, rgb2.b);
+      const hex = rgbToHex(rgb2.r, rgb2.g, rgb2.b);
+      setHsv(newHsv);
+      setCurrentCmyk(newC);
+      applyColor(hex, newC, alpha);
+    },
+    [alpha, applyColor]
+  );
+  const updateFromCmyk = useCallback(
+    (newCmyk) => {
+      const rgb2 = cmykToRgb(newCmyk.c, newCmyk.m, newCmyk.y, newCmyk.k);
+      const hex = rgbToHex(rgb2.r, rgb2.g, rgb2.b);
+      setCurrentCmyk(newCmyk);
+      setHsv(rgbToHsv(rgb2.r, rgb2.g, rgb2.b));
+      applyColor(hex, newCmyk, alpha);
+    },
+    [alpha, applyColor]
+  );
+  const updateFromHex = useCallback(
+    (inputHex) => {
+      let clean = inputHex.trim().replace(/^#/, "");
+      if (clean.length === 3) clean = clean[0] + clean[0] + clean[1] + clean[1] + clean[2] + clean[2];
+      if (/^[0-9a-fA-F]{6}$/.test(clean)) {
+        const hex = `#${clean.toLowerCase()}`;
+        const rgb2 = hexToRgb(hex);
+        const newC = rgbToCmyk(rgb2.r, rgb2.g, rgb2.b);
+        setHsv(rgbToHsv(rgb2.r, rgb2.g, rgb2.b));
+        setCurrentCmyk(newC);
+        applyColor(hex, newC, alpha);
+      }
+    },
+    [alpha, applyColor]
+  );
+  const handleSelectObjectColor = (hex, idx) => {
+    setActiveColor(hex, idx);
+    setCurrentColor(hex);
+    const c2 = hexToCmyk(hex);
+    setCurrentCmyk(c2);
+    const rgb2 = hexToRgb(hex);
+    setHsv(rgbToHsv(rgb2.r, rgb2.g, rgb2.b));
+  };
+  const handleCopyHex = () => {
+    navigator.clipboard.writeText(currentColor);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  const handleEyeDropper = async () => {
+    if (typeof window !== "undefined" && "EyeDropper" in window) {
+      try {
+        const eyeDropper = new window.EyeDropper();
+        const result = await eyeDropper.open();
+        if (result?.sRGBHex) {
+          updateFromHex(result.sRGBHex);
+        }
+      } catch (err) {
+        console.error("EyeDropper error:", err);
+      }
+    }
+  };
+  const groupedDbColors = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    dbColors.forEach((c2) => {
+      const group = c2.colorGroup || "Custom Palettes";
+      if (!map.has(group)) map.set(group, []);
+      map.get(group).push(c2);
+    });
+    return map;
+  }, [dbColors]);
+  const hueRgb = hsvToRgb(hsv.h, 100, 100);
+  const hueColor = rgbToHex(hueRgb.r, hueRgb.g, hueRgb.b);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full bg-neutral-900 border-r border-neutral-800 flex flex-col select-none text-white text-xs", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 py-2 flex flex-col gap-3 shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-[#02bc71] animate-pulse" }),
+        /* @__PURE__ */ jsx("h2", { className: "font-semibold text-sm text-neutral-100", children: "Color Palette" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setActivePanel(null),
+          className: "p-1 rounded-md text-neutral-400 hover:text-white hover:bg-neutral-800 transition-colors cursor-pointer",
+          title: "Close Panel",
+          children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto space-y-5 p-4 pr-3", children: [
+      objectColors.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-bold text-neutral-400 uppercase tracking-wider", children: [
+            "Object Colors (",
+            objectColors.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-500", children: "Select to customize" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 p-2.5 bg-neutral-950 border border-neutral-800 rounded-xl", children: objectColors.map((hex, idx) => {
+          const isSelected = currentColor.toLowerCase() === hex.toLowerCase();
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleSelectObjectColor(hex, idx),
+              className: `w-8 h-8 rounded-lg border transition-all cursor-pointer hover:scale-105 shadow-xs relative ${isSelected ? "border-white ring-2 ring-[#02bc71] scale-105 z-10" : "border-neutral-700 hover:border-neutral-500"}`,
+              style: { backgroundColor: hex },
+              title: `Object color ${idx + 1}: ${hex.toUpperCase()}`,
+              children: isSelected && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-bold mix-blend-difference text-white", children: "✓" })
+            },
+            hex + "-" + idx
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "p-3.5 bg-neutral-950 border border-neutral-800 rounded-2xl shadow-xl space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-neutral-300", children: "Custom Color" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "w-3.5 h-3.5 rounded-full border border-neutral-700 shadow-inner",
+                style: { backgroundColor: currentColor }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex bg-neutral-900 rounded-lg p-0.5 border border-neutral-800", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setColorMode("HEX"),
+                className: `px-2 py-0.5 rounded text-[10px] font-bold transition-colors cursor-pointer ${colorMode === "HEX" ? "bg-[#02bc71] text-white" : "text-neutral-400 hover:text-white"}`,
+                children: "HEX"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setColorMode("CMYK"),
+                className: `px-2 py-0.5 rounded text-[10px] font-bold transition-colors cursor-pointer ${colorMode === "CMYK" ? "bg-[#02bc71] text-white" : "text-neutral-400 hover:text-white"}`,
+                children: "CMYK"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: svRef,
+            className: "relative w-full h-36 rounded-xl overflow-hidden cursor-crosshair select-none border border-neutral-800 touch-none",
+            style: {
+              background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})`
+            },
+            onPointerDown: (e3) => {
+              e3.currentTarget.setPointerCapture(e3.pointerId);
+              const rect = e3.currentTarget.getBoundingClientRect();
+              updateFromHsv({
+                ...hsv,
+                s: Math.round(Math.max(0, Math.min(1, (e3.clientX - rect.left) / rect.width)) * 100),
+                v: Math.round((1 - Math.max(0, Math.min(1, (e3.clientY - rect.top) / rect.height))) * 100)
+              });
+            },
+            onPointerMove: (e3) => {
+              if (e3.buttons === 0) return;
+              const rect = e3.currentTarget.getBoundingClientRect();
+              updateFromHsv({
+                ...hsv,
+                s: Math.round(Math.max(0, Math.min(1, (e3.clientX - rect.left) / rect.width)) * 100),
+                v: Math.round((1 - Math.max(0, Math.min(1, (e3.clientY - rect.top) / rect.height))) * 100)
+              });
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute w-4 h-4 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 pointer-events-none ring-1 ring-black/40",
+                style: {
+                  left: `${hsv.s}%`,
+                  top: `${100 - hsv.v}%`,
+                  backgroundColor: currentColor
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[10px] text-neutral-400 font-medium", children: [
+            /* @__PURE__ */ jsx("span", { children: "Hue" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              Math.round(hsv.h),
+              "°"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: hueRef,
+              className: "relative h-4 rounded-lg cursor-pointer select-none border border-neutral-800 touch-none",
+              style: {
+                background: "linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)"
+              },
+              onPointerDown: (e3) => {
+                e3.currentTarget.setPointerCapture(e3.pointerId);
+                const rect = e3.currentTarget.getBoundingClientRect();
+                updateFromHsv({
+                  ...hsv,
+                  h: Math.round(Math.max(0, Math.min(1, (e3.clientX - rect.left) / rect.width)) * 360) % 360
+                });
+              },
+              onPointerMove: (e3) => {
+                if (e3.buttons === 0) return;
+                const rect = e3.currentTarget.getBoundingClientRect();
+                updateFromHsv({
+                  ...hsv,
+                  h: Math.round(Math.max(0, Math.min(1, (e3.clientX - rect.left) / rect.width)) * 360) % 360
+                });
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute top-1/2 w-4 h-4 -translate-y-1/2 -translate-x-1/2 rounded-full border-2 border-white shadow-md pointer-events-none ring-1 ring-black/30",
+                  style: { left: `${hsv.h / 360 * 100}%`, backgroundColor: hueColor }
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[10px] text-neutral-400 font-medium", children: [
+            /* @__PURE__ */ jsx("span", { children: "Opacity" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              alpha,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: alphaRef,
+              className: "relative h-4 rounded-lg cursor-pointer select-none border border-neutral-800 overflow-hidden touch-none pqc-checkerboard",
+              onPointerDown: (e3) => {
+                e3.currentTarget.setPointerCapture(e3.pointerId);
+                const rect = e3.currentTarget.getBoundingClientRect();
+                const newAlpha = Math.round(Math.max(0, Math.min(1, (e3.clientX - rect.left) / rect.width)) * 100);
+                setAlpha(newAlpha);
+                applyColor(currentColor, currentCmyk, newAlpha);
+              },
+              onPointerMove: (e3) => {
+                if (e3.buttons === 0) return;
+                const rect = e3.currentTarget.getBoundingClientRect();
+                const newAlpha = Math.round(Math.max(0, Math.min(1, (e3.clientX - rect.left) / rect.width)) * 100);
+                setAlpha(newAlpha);
+                applyColor(currentColor, currentCmyk, newAlpha);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute inset-0",
+                    style: {
+                      background: `linear-gradient(to right, transparent, ${currentColor})`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute top-1/2 w-4 h-4 -translate-y-1/2 -translate-x-1/2 rounded-full border-2 border-white shadow-md bg-white pointer-events-none ring-1 ring-black/30",
+                    style: { left: `${alpha}%` }
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        colorMode === "HEX" && /* @__PURE__ */ jsx("div", { className: "space-y-2 pt-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "absolute left-2.5 top-2 text-xs font-mono text-neutral-500", children: "#" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                maxLength: 7,
+                value: currentColor.replace("#", "").toUpperCase(),
+                onChange: (e3) => {
+                  const val = e3.target.value.replace(/[^0-9A-Fa-f]/g, "");
+                  if (val.length <= 6) {
+                    const newHex = `#${val}`;
+                    setCurrentColor(newHex);
+                    if (val.length === 6) {
+                      updateFromHex(newHex);
+                    }
+                  }
+                },
+                className: "w-full bg-neutral-900 border border-neutral-800 rounded-lg pl-6 pr-2 py-1.5 text-xs text-white font-mono uppercase focus:outline-none focus:border-[#02bc71]"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleCopyHex,
+              className: "px-2.5 py-1.5 bg-neutral-900 hover:bg-neutral-800 border border-neutral-800 hover:border-neutral-700 rounded-lg text-[11px] text-neutral-300 font-medium flex items-center gap-1 transition-colors cursor-pointer",
+              title: "Copy Hex Code",
+              children: copied ? /* @__PURE__ */ jsx("span", { className: "text-[#02bc71]", children: "Copied!" }) : /* @__PURE__ */ jsx("span", { children: "Copy" })
+            }
+          ),
+          typeof window !== "undefined" && "EyeDropper" in window && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleEyeDropper,
+              className: "p-1.5 bg-neutral-900 hover:bg-neutral-800 border border-neutral-800 hover:border-neutral-700 rounded-lg text-neutral-300 hover:text-white transition-colors cursor-pointer",
+              title: "Eyedropper Tool",
+              children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("path", { d: "m14 2 8 8-4 4-8-8 4-4Z" }),
+                /* @__PURE__ */ jsx("path", { d: "m18 10-4-4" }),
+                /* @__PURE__ */ jsx("path", { d: "m6.5 13.5-3 3c-.8.8-.8 2.2 0 3 .8.8 2.2.8 3 0l3-3" })
+              ] })
+            }
+          )
+        ] }) }),
+        colorMode === "CMYK" && /* @__PURE__ */ jsx("div", { className: "space-y-1.5 pt-1", children: CMYK_CHANNELS.map(({ key, label, color: lColor, name }) => /* @__PURE__ */ jsx(
+          ChannelRow,
+          {
+            label,
+            labelColor: lColor,
+            ariaLabel: name,
+            value: currentCmyk[key],
+            min: 0,
+            max: 100,
+            gradient: `linear-gradient(to right, ${cmykToHex(
+              key === "c" ? 0 : currentCmyk.c,
+              key === "m" ? 0 : currentCmyk.m,
+              key === "y" ? 0 : currentCmyk.y,
+              key === "k" ? 0 : currentCmyk.k
+            )}, ${cmykToHex(
+              key === "c" ? 100 : currentCmyk.c,
+              key === "m" ? 100 : currentCmyk.m,
+              key === "y" ? 100 : currentCmyk.y,
+              key === "k" ? 100 : currentCmyk.k
+            )})`,
+            onChange: (val) => updateFromCmyk({ ...currentCmyk, [key]: val })
+          },
+          key
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold text-neutral-400 uppercase tracking-wider", children: "Document Colors" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-neutral-500", children: [
+            documentColors.length,
+            " colors"
+          ] })
+        ] }),
+        documentColors.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-3 text-center rounded-xl bg-neutral-900/40 border border-dashed border-neutral-800", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-neutral-500", children: "No colors detected in document yet" }) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: documentColors.map((hex) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => updateFromHex(hex),
+            className: `w-8 h-8 rounded-lg border transition-all cursor-pointer hover:scale-105 shadow-xs relative ${currentColor.toLowerCase() === hex.toLowerCase() ? "border-white ring-2 ring-[#02bc71]" : "border-neutral-700/80"}`,
+            style: { backgroundColor: hex },
+            title: hex.toUpperCase(),
+            children: currentColor.toLowerCase() === hex.toLowerCase() && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-bold mix-blend-difference text-white", children: "✓" })
+          },
+          hex
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold text-neutral-400 uppercase tracking-wider block mb-2", children: "Default Colors" }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-6 gap-2", children: DEFAULT_PRESET_COLORS.map((hex) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => updateFromHex(hex),
+            className: `w-full aspect-square rounded-lg border transition-all cursor-pointer hover:scale-105 shadow-xs relative ${currentColor.toLowerCase() === hex.toLowerCase() ? "border-white ring-2 ring-[#02bc71]" : "border-neutral-800"}`,
+            style: { backgroundColor: hex },
+            title: hex,
+            children: currentColor.toLowerCase() === hex.toLowerCase() && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-bold mix-blend-difference text-white", children: "✓" })
+          },
+          hex
+        )) })
+      ] }),
+      isLoadingColors ? /* @__PURE__ */ jsx("div", { className: "text-center py-4 text-xs text-neutral-500", children: "Loading color library..." }) : Array.from(groupedDbColors.entries()).map(([groupName, colors]) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold text-neutral-400 uppercase tracking-wider", children: groupName }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-500", children: colors.length })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-6 gap-2", children: colors.map((c2) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => updateFromHex(c2.hexCode),
+            className: `w-full aspect-square rounded-lg border transition-all cursor-pointer hover:scale-105 shadow-xs relative group ${currentColor.toLowerCase() === c2.hexCode.toLowerCase() ? "border-white ring-2 ring-[#02bc71]" : "border-neutral-800"}`,
+            style: { backgroundColor: c2.hexCode },
+            title: `${c2.colorName} (${c2.hexCode})`,
+            children: currentColor.toLowerCase() === c2.hexCode.toLowerCase() && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-bold mix-blend-difference text-white", children: "✓" })
+          },
+          c2._id || c2.hexCode
+        )) })
+      ] }, groupName))
+    ] })
+  ] });
+}
+const ColorPickerIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
+    width: "80",
+    height: "80",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    style: { mixBlendMode: "difference" },
+    children: /* @__PURE__ */ jsx("path", { d: "M430.1 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 12-36.6.1-47.7zM120 216c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm40 126c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm64-161c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm72 219c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm24-208c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z" })
+  }
+);
 const DEFAULT_SECTIONS = [
   {
     id: "templates",
@@ -152627,6 +153636,13 @@ const DEFAULT_SECTIONS = [
     Tab: /* @__PURE__ */ jsx(QRCodeIcon, {}),
     Panel: /* @__PURE__ */ jsx(BarcodePanel, {})
   },
+  {
+    id: "color",
+    name: "Color",
+    Tab: /* @__PURE__ */ jsx(ColorPickerIcon, {}),
+    Panel: /* @__PURE__ */ jsx(ColorPanel, {}),
+    visibleInList: false
+  },
   {
     id: "effects",
     name: "Effects",
@@ -152820,6 +153836,18 @@ function StrikethroughIcon() {
     }
   );
 }
+const STROKE_WIDTH_OPTIONS = [0, 1, 2, 3, 4, 5];
+const getStrokeDashArray = (style) => {
+  switch (style) {
+    case "Dashed":
+      return [10, 5];
+    case "Dotted":
+      return [2, 4];
+    case "Line":
+    default:
+      return null;
+  }
+};
 function TextFontSize({
   value,
   onChange
@@ -152861,6 +153889,10 @@ function TextToolbar() {
   const [charSpacing, setCharSpacing] = useState(0);
   const [align, setAlign] = useState("left");
   const [showTextPopup, setShowTextPopup] = useState(false);
+  const [showStrokeControls, setShowStrokeControls] = useState(false);
+  const [strokeColor, setStrokeColor] = useState("#000000");
+  const [strokeSize, setStrokeSize] = useState(0);
+  const [strokeStyle, setStrokeStyle] = useState("Line");
   const text = useMemo(() => {
     if (type !== "textbox") return null;
     return isTextbox(objects[0]) ? objects[0] : null;
@@ -152871,6 +153903,11 @@ function TextToolbar() {
     setLineHeight2((text.lineHeight ?? 1) * 100);
     setCharSpacing(text.charSpacing ?? 0);
     setAlign(text.textAlign ?? "left");
+    const dashArray = text.strokeDashArray;
+    const currentStrokeStyle = Array.isArray(dashArray) && dashArray.length === 2 && dashArray[0] === 2 && dashArray[1] === 4 ? "Dotted" : Array.isArray(dashArray) && dashArray.length === 2 && dashArray[0] === 10 && dashArray[1] === 5 ? "Dashed" : "Line";
+    setStrokeColor(typeof text.stroke === "string" && text.stroke ? text.stroke : "#000000");
+    setStrokeSize(Math.max(0, Number(text.strokeWidth ?? 0)));
+    setStrokeStyle(currentStrokeStyle);
   }, [text]);
   const updateText = useCallback(
     (props) => {
@@ -152883,6 +153920,24 @@ function TextToolbar() {
     },
     [text]
   );
+  const applyTextStroke = useCallback(
+    (nextColor, nextSize, nextStyle) => {
+      if (!text) return;
+      const canvas2 = text.canvas;
+      if (!canvas2) return;
+      const normalizedSize = Number.isFinite(nextSize) ? Math.min(5, Math.max(0, Math.round(nextSize))) : 0;
+      text.set({
+        stroke: normalizedSize > 0 ? nextColor : null,
+        strokeWidth: normalizedSize,
+        strokeDashArray: normalizedSize === 0 ? null : getStrokeDashArray(nextStyle),
+        strokeUniform: true,
+        paintFirst: "stroke"
+      });
+      canvas2.requestRenderAll();
+      useHistoryStore.getState().saveState();
+    },
+    [text]
+  );
   const applyTextCase = (mode2) => {
     if (!text?.text) return;
     const anyText = text;
@@ -152964,7 +154019,9 @@ function TextToolbar() {
     /* @__PURE__ */ jsx(
       "button",
       {
-        className: "cursor-pointer  p-1 hover:bg-neutral-700 rounded",
+        type: "button",
+        "aria-expanded": showTextPopup,
+        className: `cursor-pointer rounded p-1 transition-colors duration-150 ${showTextPopup ? "bg-neutral-700 text-white ring-1 ring-neutral-600 shadow-sm" : "hover:bg-neutral-700"}`,
         onClick: () => setShowTextPopup((prev) => !prev),
         children: /* @__PURE__ */ jsx(
           "svg",
@@ -152983,10 +154040,9 @@ function TextToolbar() {
     showTextPopup && /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "fixed md:absolute z-[9999] md:z-50 bg-neutral-900 text-white shadow-xl rounded-lg p-4 top-[112px] md:top-[40px] left-1/2 md:left-auto md:right-0 -translate-x-1/2 md:-translate-x-0",
+        className: "fixed md:absolute z-[9999] md:z-50 bg-[#1d1d1d] text-white shadow-[0_12px_30px_rgba(0,0,0,0.35)] rounded-lg p-4 top-[112px] md:top-[40px] left-1/2 md:left-auto md:right-0 -translate-x-1/2 md:-translate-x-0 border border-neutral-700",
         style: {
-          width: "230px",
-          border: "1px solid #333"
+          width: "230px"
         },
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex justify-between mb-2", children: [
@@ -153075,7 +154131,75 @@ function TextToolbar() {
         },
         children: "Aa"
       }
-    )
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowStrokeControls((prev) => !prev),
+          className: `text-left text-[15px] font-semibold ${text?.fontWeight === "bold" ? "text-blue-400" : ""} transition hover:text-blue-400`,
+          children: "Stroke"
+        }
+      ),
+      showStrokeControls && /* @__PURE__ */ jsxs("div", { className: "absolute left-0 top-full z-50 mt-2 flex items-center gap-3 rounded-md border border-neutral-700 bg-[#1d1d1d] px-3 py-2 text-white shadow-[0_12px_30px_rgba(0,0,0,0.35)]", children: [
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-[13px] font-medium text-white", children: [
+          /* @__PURE__ */ jsx("span", { children: "Color" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "color",
+              value: strokeColor,
+              onChange: (e3) => {
+                const nextColor = e3.target.value;
+                setStrokeColor(nextColor);
+                applyTextStroke(nextColor, strokeSize, strokeStyle);
+              },
+              className: "h-8 w-10 cursor-pointer rounded border border-neutral-600 bg-transparent p-0",
+              "aria-label": "Text stroke color"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-[13px] font-medium text-white", children: [
+          /* @__PURE__ */ jsx("span", { children: "Size" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: String(strokeSize),
+              onChange: (e3) => {
+                const nextSize = Math.min(5, Number(e3.target.value));
+                setStrokeSize(nextSize);
+                applyTextStroke(strokeColor, nextSize, strokeStyle);
+              },
+              className: "h-8 min-w-[72px] rounded border border-neutral-600 bg-neutral-800 px-2 text-[13px] text-white outline-none",
+              "aria-label": "Text stroke size",
+              children: STROKE_WIDTH_OPTIONS.map((size) => /* @__PURE__ */ jsx("option", { value: String(size), className: "bg-neutral-800 text-white", children: size }, size))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-[13px] font-medium text-white", children: [
+          /* @__PURE__ */ jsx("span", { children: "Style" }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: strokeStyle,
+              onChange: (e3) => {
+                const nextStyle = e3.target.value;
+                setStrokeStyle(nextStyle);
+                applyTextStroke(strokeColor, strokeSize, nextStyle);
+              },
+              className: "h-8 min-w-[90px] rounded border border-neutral-600 bg-neutral-800 px-2 text-[13px] text-white outline-none",
+              "aria-label": "Text stroke style",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "Dotted", className: "bg-neutral-800 text-white", children: "Dotted" }),
+                /* @__PURE__ */ jsx("option", { value: "Line", className: "bg-neutral-800 text-white", children: "Line" }),
+                /* @__PURE__ */ jsx("option", { value: "Dashed", className: "bg-neutral-800 text-white", children: "Dashed" })
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
   ] }) });
 }
 function CropIcon() {
@@ -153193,7 +154317,7 @@ class CropService {
       stroke: "#2196F3",
       strokeWidth: 2,
       cornerColor: "#ffffff",
-      cornerStrokeColor: "#202020",
+      cornerStrokeColor: "#2196F3",
       cornerSize: 12,
       cornerStyle: "circle",
       transparentCorners: false,
@@ -153529,7 +154653,7 @@ function QrEffectToolbar() {
     /* @__PURE__ */ jsxs(
       "button",
       {
-        className: "hover:text-blue-400 flex",
+        className: "hover:text-emerald-400 flex items-center gap-1.5 cursor-pointer",
         onClick: () => setActivePanel("effects"),
         children: [
           /* @__PURE__ */ jsx(EffectIcon, {}),
@@ -153556,7 +154680,7 @@ function QrEffectToolbar() {
     /* @__PURE__ */ jsx(
       "button",
       {
-        className: "hover:text-blue-400",
+        className: "hover:text-emerald-400 cursor-pointer",
         onClick: () => setActivePanel("animate"),
         children: "Animate"
       }
@@ -153669,7 +154793,7 @@ function DuplicateButton() {
   const duplicate = async () => {
     const active = canvas2.getActiveObject();
     if (!active) return;
-    if (active.type === "activeselection") {
+    if (active.type?.toLowerCase() === "activeselection") {
       const selection = active;
       const originals = selection.getObjects().filter((o2) => o2.name !== "workarea");
       if (!originals.length) return;
@@ -153796,7 +154920,7 @@ function FlipButton() {
   const getTargets = () => {
     const active = canvas2.getActiveObject();
     if (!active) return [];
-    const objects = active.type === "activeselection" ? active.getObjects() : [active];
+    const objects = active.type?.toLowerCase() === "activeselection" ? active.getObjects() : [active];
     return objects.filter((o2) => o2.name !== "workarea");
   };
   const handleFlip = (flip) => {
@@ -153941,7 +155065,7 @@ function LockButton() {
   const getTargets = () => {
     const active = canvas2?.getActiveObject();
     if (!active) return [];
-    const objects = active.type === "activeselection" ? active.getObjects() : [active];
+    const objects = active.type?.toLowerCase() === "activeselection" ? active.getObjects() : [active];
     return objects.filter((o2) => o2.name !== "workarea");
   };
   useEffect(() => {
@@ -154034,12 +155158,12 @@ function OpacityPicker() {
   const getTargets = () => {
     const active = getActive();
     if (!active) return [];
-    return active.type === "activeselection" ? active.getObjects() : [active];
+    return active.type?.toLowerCase() === "activeselection" ? active.getObjects() : [active];
   };
   const readOpacityFromSelection = () => {
     const active = getActive();
     if (!active) return 100;
-    if (active.type === "activeselection") {
+    if (active.type?.toLowerCase() === "activeselection") {
       const objects = active.getObjects();
       return Math.round((objects[0]?.opacity ?? 1) * 100);
     }
@@ -154159,7 +155283,7 @@ function PositionPicker() {
   const getTargets = () => {
     const active = getActive();
     if (!active) return [];
-    return active.type === "activeselection" ? active.getObjects() : [active];
+    return active.type?.toLowerCase() === "activeselection" ? active.getObjects() : [active];
   };
   const getWorkarea2 = () => canvas2.getObjects().find((o2) => o2.name === "workarea");
   const normalizeOrigin = (obj) => {
@@ -154207,7 +155331,7 @@ function PositionPicker() {
   const handleAlign = (align) => {
     const active = getActive();
     if (!active) return;
-    if (active.type === "activeselection") {
+    if (active.type?.toLowerCase() === "activeselection") {
       alignInsideSelection(align);
     } else {
       applyAlign(align);
@@ -154374,7 +155498,7 @@ function RemoveButton() {
   const getTargets = () => {
     const active = canvas2?.getActiveObject();
     if (!active) return [];
-    const objects = active.type === "activeselection" ? active.getObjects() : [active];
+    const objects = active.type?.toLowerCase() === "activeselection" ? active.getObjects() : [active];
     return objects.filter((o2) => o2.name !== "workarea");
   };
   const deleteObjects = () => {
@@ -154448,7 +155572,7 @@ function RotateButton() {
   const getTargets = () => {
     const active = canvas2.getActiveObject();
     if (!active) return [];
-    const objects = active.type === "activeselection" ? active.getObjects() : [active];
+    const objects = active.type?.toLowerCase() === "activeselection" ? active.getObjects() : [active];
     return objects.filter((o2) => o2.name !== "workarea");
   };
   const handleRotate = (dir, step = 45) => {
@@ -154537,13 +155661,19 @@ function GroupButton() {
   const handleGroup = () => {
     if (!canvas2) return;
     const active = canvas2.getActiveObject();
-    if (!active || active.type !== "activeselection") return;
+    if (!active || active.type?.toLowerCase() !== "activeselection") return;
     const selection = active;
     const objects2 = [...selection.getObjects()];
+    const canvasObjects = canvas2.getObjects();
+    const minZIndex = Math.min(...objects2.map((o2) => canvasObjects.indexOf(o2)));
     canvas2.discardActiveObject();
     objects2.forEach((obj) => canvas2.remove(obj));
     const group = new Ur(objects2);
-    canvas2.add(group);
+    if (minZIndex !== -1 && minZIndex < canvas2.getObjects().length) {
+      canvas2.insertAt(minZIndex, group);
+    } else {
+      canvas2.add(group);
+    }
     canvas2.setActiveObject(group);
     canvas2.requestRenderAll();
     useSelectionStore.getState().setSelection([group]);
@@ -154592,6 +155722,14 @@ const rotateSVG = `
   </g>
 </svg>`;
 let rotateImg = null;
+const SMALL_OBJECT_THRESHOLD = 40;
+const SMALL_CONTROL_SIZE = 6;
+const NORMAL_CONTROL_SIZE = 10;
+const ROTATION_GAP = 6;
+const isTextObject = (obj) => obj.type === "textbox" || obj.type === "i-text" || obj.type === "text";
+function normalizeAngle(angle = 0) {
+  return (Math.round(angle) % 360 + 360) % 360;
+}
 function renderRotateIcon(ctx, left, top, fabricObject) {
   if (!rotateImg) {
     rotateImg = new Image();
@@ -154600,7 +155738,7 @@ function renderRotateIcon(ctx, left, top, fabricObject) {
       fabricObject.canvas?.requestRenderAll();
     };
   }
-  const size = 24;
+  const size = fabricObject.__rotationControlSize || 24;
   ctx.save();
   ctx.translate(left, top);
   if (rotateImg.complete && rotateImg.naturalHeight !== 0) {
@@ -154608,11 +155746,13 @@ function renderRotateIcon(ctx, left, top, fabricObject) {
   }
   ctx.restore();
 }
-function createRotateControl() {
+function createRotateControl(size = 24, offsetY = -30) {
   return new ai({
     x: 0,
     y: -0.5,
-    offsetY: -30,
+    offsetY,
+    sizeX: size,
+    sizeY: size,
     cursorStyle: "crosshair",
     actionHandler: Fa.rotationWithSnapping,
     actionName: "rotate",
@@ -154620,23 +155760,147 @@ function createRotateControl() {
     withConnection: true
   });
 }
+function renderRotationAngle(ctx, left, top, _styleOverride, fabricObject) {
+  if (!fabricObject.__showDegree) {
+    return;
+  }
+  const angle = normalizeAngle(fabricObject.angle);
+  const label = `${angle}°`;
+  const paddingX = 8;
+  const height = 22;
+  const radius = 6;
+  ctx.save();
+  ctx.font = "bold 12px sans-serif";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  const textWidth = ctx.measureText(label).width;
+  const width = Math.max(34, textWidth + paddingX * 2);
+  const x2 = left - width / 2;
+  const y2 = top - height / 2;
+  ctx.beginPath();
+  ctx.fillStyle = "rgba(15, 23, 42, 0.9)";
+  ctx.strokeStyle = "#02bc71";
+  ctx.lineWidth = 1.5;
+  if (typeof ctx.roundRect === "function") {
+    ctx.roundRect(x2, y2, width, height, radius);
+  } else {
+    ctx.rect(x2, y2, width, height);
+  }
+  ctx.fill();
+  ctx.stroke();
+  ctx.fillStyle = "#ffffff";
+  ctx.fillText(label, left, top + 0.5);
+  ctx.restore();
+}
+function createRotationAngleControl() {
+  return new ai({
+    x: -0.5,
+    y: 0,
+    offsetX: -28,
+    offsetY: 0,
+    sizeX: 1,
+    sizeY: 1,
+    cursorStyle: "default",
+    render: renderRotationAngle
+  });
+}
+const isImageObject = (obj) => obj.type === "image" || obj.type === "FabricImage" || typeof obj.isType === "function" && (obj.isType("image") || obj.isType("FabricImage"));
 function configureObjectControls(obj) {
+  const zoom = obj.canvas ? obj.canvas.getZoom() : 1;
+  const scaledWidth = obj.getScaledWidth() * zoom;
+  const scaledHeight = obj.getScaledHeight() * zoom;
+  const renderedSize = Math.min(scaledWidth, scaledHeight);
+  const isSmall = renderedSize < SMALL_OBJECT_THRESHOLD;
+  const cornerSize = isSmall ? Math.min(SMALL_CONTROL_SIZE, Math.max(4, renderedSize * 0.3)) : NORMAL_CONTROL_SIZE;
+  const rotationSize = isSmall ? Math.min(16, Math.max(12, renderedSize * 0.4)) : 24;
+  const rotationOffset = -(rotationSize / 2 + ROTATION_GAP);
   obj.set({
     transparentCorners: false,
     cornerColor: "#ffffff",
     cornerStrokeColor: "#02bc71",
     borderColor: "#02bc71",
-    cornerSize: 10,
+    cornerSize,
     cornerStyle: "rect",
     borderScaleFactor: 1
   });
-  obj.controls.mtr = createRotateControl();
+  obj.__rotationControlSize = rotationSize;
+  obj.controls.mtr = createRotateControl(rotationSize, rotationOffset);
+  const textObject = isTextObject(obj);
+  if (!obj.controls.mb) {
+    obj.controls.mb = new ai({
+      x: 0,
+      y: 0.5,
+      cursorStyleHandler: Fa.scaleSkewCursorStyleHandler,
+      actionHandler: textObject ? Fa.changeWidth : Fa.scalingYOrSkewingX,
+      actionName: "resizing"
+    });
+  }
+  const rotationControl = createRotationAngleControl();
+  obj.controls.rotationAngle = rotationControl;
+  delete obj.controls.bmc;
+  delete obj.controls.textAngle;
+  if (isSmall) {
+    obj.setControlsVisibility({
+      mtr: true,
+      br: true,
+      tl: false,
+      tr: false,
+      bl: false,
+      mb: false,
+      ml: false,
+      mr: false,
+      mt: false,
+      bmc: false,
+      rotationAngle: true
+    });
+    return;
+  }
+  if (isImageObject(obj)) {
+    obj.setControlsVisibility({
+      mtr: true,
+      tl: true,
+      tr: true,
+      bl: true,
+      br: true,
+      ml: false,
+      mr: false,
+      mb: true,
+      mt: false,
+      bmc: false,
+      rotationAngle: true
+    });
+    return;
+  }
+  if (!obj.controls.ml) {
+    obj.controls.ml = new ai({
+      x: -0.5,
+      y: 0,
+      cursorStyleHandler: Fa.scaleSkewCursorStyleHandler,
+      actionHandler: textObject ? Fa.changeWidth : Fa.scalingXOrSkewingY,
+      actionName: "resizing"
+    });
+  }
+  if (!obj.controls.mr) {
+    obj.controls.mr = new ai({
+      x: 0.5,
+      y: 0,
+      cursorStyleHandler: Fa.scaleSkewCursorStyleHandler,
+      actionHandler: textObject ? Fa.changeWidth : Fa.scalingXOrSkewingY,
+      actionName: "resizing"
+    });
+  }
   obj.setControlsVisibility({
     mtr: true,
-    ml: false,
-    mr: false,
+    tl: true,
+    tr: true,
+    bl: true,
+    br: true,
+    ml: true,
+    mr: true,
+    mb: true,
     mt: false,
-    mb: false
+    bmc: false,
+    rotationAngle: true
   });
 }
 function initializeRotateImage() {
@@ -154653,20 +155917,38 @@ function UngroupButton() {
   const handleUngroup = () => {
     if (!canvas2) return;
     const active = canvas2.getActiveObject();
-    if (!active || active.type !== "group") return;
+    if (!active || active.type?.toLowerCase() !== "group") return;
     const group = active;
-    const objects2 = [...group.getObjects()];
-    group.remove(...objects2);
+    const groupIndex = canvas2.getObjects().indexOf(group);
+    const childObjects = [...group.getObjects()];
+    canvas2.discardActiveObject();
+    group.remove(...childObjects);
     canvas2.remove(group);
-    objects2.forEach((obj) => canvas2.add(obj));
-    const sel = new Qo(objects2, { canvas: canvas2 });
-    configureObjectControls(sel);
-    canvas2.setActiveObject(sel);
-    canvas2.renderAll();
-    useSelectionStore.getState().setSelection(objects2);
+    if (typeof group.dispose === "function") {
+      group.dispose();
+    }
+    childObjects.forEach((obj, idx) => {
+      obj.set({
+        selectable: true,
+        evented: true,
+        hasControls: true,
+        hasBorders: true
+      });
+      obj.setCoords();
+      if (groupIndex !== -1) {
+        canvas2.insertAt(groupIndex + idx, obj);
+      } else {
+        canvas2.add(obj);
+      }
+      configureObjectControls(obj);
+    });
+    canvas2.discardActiveObject();
+    useSelectionStore.getState().clearSelection();
+    canvas2.requestRenderAll();
     saveState();
   };
-  if (selectionType !== "multiple" || objects.length !== 1) return null;
+  const isGroupSelected = selectionType === "group" || objects.length === 1 && objects[0]?.type?.toLowerCase() === "group" && objects[0]?.name !== "qr" && objects[0]?.name !== "barcode";
+  if (!isGroupSelected) return null;
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -155012,6 +156294,9 @@ function createWorkarea(canvas2, container, productData) {
     initialZoom = 1;
   }
   const initialScale = baseScale * initialZoom;
+  const isTextTemplate = productData?.isTextTemplate || productData?.hideGuidelines || typeof window !== "undefined" && ["text", "texttemplate", "text-template"].includes(
+    (new URLSearchParams(window.location.search).get("designType") || new URLSearchParams(window.location.search).get("designtype") || new URLSearchParams(window.location.search).get("type") || "")?.toLowerCase()
+  );
   const workarea = new jr({
     width: fullWidth,
     height: fullHeight,
@@ -155027,6 +156312,8 @@ function createWorkarea(canvas2, container, productData) {
   workarea.__printDPI = printDPI;
   workarea.__baseScale = baseScale;
   workarea.__initialZoom = initialZoom;
+  workarea.__hideGuidelines = isTextTemplate || productData?.hideGuidelines;
+  workarea.__isTextTemplate = isTextTemplate;
   workarea.__bleedArea = productData?.bleedArea ?? 0.125;
   workarea.__safetyArea = productData?.safetyArea ?? 0.125;
   workarea.__trimArea = productData?.trimArea ?? 0;
@@ -155074,27 +156361,63 @@ function setupSelectionHandlers(canvas2, setSelection, clearSelection) {
       clearSelection();
       return;
     }
-    const objects = active.type === "activeselection" ? active.getObjects() : [active];
+    const isMulti = active.type?.toLowerCase() === "activeselection";
+    const objects = isMulti ? active.getObjects() : [active];
     setSelection(objects);
   };
-  const configureSelectionControls = (e3) => {
+  const configureSelectionControls = () => {
     const activeObject = canvas2.getActiveObject();
     if (!activeObject) return;
     configureObjectControls(activeObject);
     canvas2.requestRenderAll();
   };
   canvas2.on("selection:created", (e3) => {
+    if (e3.selected) {
+      e3.selected.forEach((o2) => {
+        o2.__showDegree = false;
+      });
+    }
     updateSelection();
     configureSelectionControls();
   });
   canvas2.on("selection:updated", (e3) => {
+    if (e3.selected) {
+      e3.selected.forEach((o2) => {
+        o2.__showDegree = false;
+      });
+    }
     updateSelection();
     configureSelectionControls();
   });
-  canvas2.on("selection:cleared", clearSelection);
+  canvas2.on("object:scaling", configureSelectionControls);
+  canvas2.on("object:rotating", (e3) => {
+    if (e3.target) {
+      e3.target.__showDegree = true;
+    }
+    configureSelectionControls();
+  });
+  const hideDegree = (e3) => {
+    if (e3?.target) {
+      e3.target.__showDegree = false;
+    }
+    canvas2.getObjects().forEach((o2) => {
+      o2.__showDegree = false;
+    });
+    configureSelectionControls();
+  };
+  canvas2.on("object:modified", hideDegree);
+  canvas2.on("mouse:up", hideDegree);
+  canvas2.on("selection:cleared", () => {
+    hideDegree();
+    clearSelection();
+  });
   return () => {
     canvas2.off("selection:created");
     canvas2.off("selection:updated");
+    canvas2.off("object:scaling", configureSelectionControls);
+    canvas2.off("object:rotating");
+    canvas2.off("object:modified", hideDegree);
+    canvas2.off("mouse:up", hideDegree);
     canvas2.off("selection:cleared");
   };
 }
@@ -155139,6 +156462,23 @@ function setupBorderSync(canvas2) {
     canvas2.off("object:rotating", syncBorder);
   };
 }
+const CUSTOM_PROPERTIES = [
+  "name",
+  "id",
+  "selectable",
+  "evented",
+  "hasControls",
+  "lockMovementX",
+  "lockMovementY",
+  "__printWidth",
+  "__printHeight",
+  "__printDPI",
+  "__baseScale",
+  "__initialZoom",
+  "__borderRect",
+  "__rotationControlSize",
+  "__showDegree"
+];
 async function switchCanvasPage(canvas2, currentPage, targetPage, pageJSON, clearSelection, containerRef) {
   if (targetPage === currentPage) return;
   const historyStore = useHistoryStore.getState();
@@ -155147,8 +156487,7 @@ async function switchCanvasPage(canvas2, currentPage, targetPage, pageJSON, clea
     const storePages = useEditorStore.getState().pages || {};
     if (storePages.front && !pageJSON.front) pageJSON.front = storePages.front;
     if (storePages.back && !pageJSON.back) pageJSON.back = storePages.back;
-    const currentObject = canvas2.toObject(["name"]);
-    pageJSON[currentPage] = currentObject;
+    pageJSON[currentPage] = canvas2.toObject(CUSTOM_PROPERTIES);
     useEditorStore.getState().setPages({ ...pageJSON });
     clearSelection();
     historyStore.setPage(targetPage);
@@ -155170,6 +156509,16 @@ async function switchCanvasPage(canvas2, currentPage, targetPage, pageJSON, clea
   } finally {
     useLoaderStore.getState().stopLoading();
   }
+  const currentVt = canvas2.viewportTransform ? [...canvas2.viewportTransform] : [canvas2.getZoom(), 0, 0, canvas2.getZoom(), 0, 0];
+  canvas2.setViewportTransform(currentVt);
+  const workarea = canvas2.getObjects().find((obj) => obj.name === "workarea");
+  if (workarea) {
+    createOverlays(canvas2, workarea);
+    bringOverlaysToFront(canvas2);
+  }
+  canvas2.requestRenderAll();
+  canvas2.fire("after:render");
+  useHistoryStore.setState({ isRestoring: false });
 }
 const MIN_ZOOM = 0.09;
 const MAX_ZOOM = 5;
@@ -155182,53 +156531,28 @@ const fromSlider = (v2) => MIN_ZOOM * Math.pow(MAX_ZOOM / MIN_ZOOM, v2);
 function getWorkarea(canvas2) {
   return canvas2.getObjects().find((o2) => o2.name === "workarea") ?? null;
 }
-function normalizeViewportPan(canvas2) {
-  const vt2 = canvas2.viewportTransform;
-  const zoom = vt2[0];
-  const panX = vt2[4];
-  const panY = vt2[5];
-  if (Math.abs(panX) < 0.01 && Math.abs(panY) < 0.01) return;
-  const dx = panX / zoom;
-  const dy = panY / zoom;
-  canvas2.getObjects().forEach((obj) => {
-    obj.set({
-      left: (obj.left ?? 0) + dx,
-      top: (obj.top ?? 0) + dy
-    });
-    obj.setCoords();
-  });
-  canvas2.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
-}
 function doZoom(canvas2, newZoom, pivot) {
   const clamped = clamp(newZoom, MIN_ZOOM, MAX_ZOOM);
   canvas2.zoomToPoint(pivot, clamped);
-  normalizeViewportPan(canvas2);
   const workarea = getWorkarea(canvas2);
   if (workarea) createOverlays(canvas2, workarea);
+  const activeObject = canvas2.getActiveObject();
+  if (activeObject) configureObjectControls(activeObject);
   canvas2.requestRenderAll();
   return clamped;
 }
 function doReset(canvas2, setZoom) {
-  const center = new ot(canvas2.getWidth() / 2, canvas2.getHeight() / 2);
-  canvas2.zoomToPoint(center, 1);
-  normalizeViewportPan(canvas2);
   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);
   if (workarea) {
-    const waW = workarea.getScaledWidth();
-    const waH = workarea.getScaledHeight();
-    const dx = canvas2.getWidth() / 2 - ((workarea.left ?? 0) + waW / 2);
-    const dy = canvas2.getHeight() / 2 - ((workarea.top ?? 0) + waH / 2);
-    canvas2.getObjects().forEach((obj) => {
-      obj.set({
-        left: (obj.left ?? 0) + dx,
-        top: (obj.top ?? 0) + dy
-      });
-      obj.setCoords();
-    });
-    createOverlays(canvas2, getWorkarea(canvas2));
+    createOverlays(canvas2, workarea);
   }
+  const activeObject = canvas2.getActiveObject();
+  if (activeObject) configureObjectControls(activeObject);
   canvas2.requestRenderAll();
-  setZoom(1);
+  setZoom(initialZoom);
 }
 function useCanvasZoom(canvas2) {
   const [zoom, setZoom] = useState(1);
@@ -155555,7 +156879,7 @@ function useKeyboardEvents(canvas2) {
         left: (clipboardRef.current.left ?? 0) + OFFSET,
         top: (clipboardRef.current.top ?? 0) + OFFSET
       });
-      if (clonedObj.type === "activeselection") {
+      if (clonedObj.type?.toLowerCase() === "activeselection") {
         clonedObj.canvas = canvas2;
         clonedObj.forEachObject((obj) => {
           canvas2.add(obj);
@@ -155611,8 +156935,11 @@ function Workspace() {
     if (fabricRef.current) return;
     let isMounted = true;
     const setupCanvasWithProduct = async () => {
+      const designType = (getQueryParam("designType") || getQueryParam("designtype") || getQueryParam("type"))?.toLowerCase();
+      const isTextDesign = designType === "text";
       const productId = getQueryParam("id") || getQueryParam("productId");
-      if (!productId) {
+      const templateId = getQueryParam("templateId") || (isTextDesign ? getQueryParam("id") : null);
+      if (!productId && !isTextDesign) {
         useProductStore.setState({
           isNotFound: true,
           error: "Product ID is missing from URL query parameters (e.g. ?id=...)."
@@ -155621,9 +156948,26 @@ function Workspace() {
       }
       useLoaderStore.getState().startLoading();
       try {
-        const product = await useProductStore.getState().fetchProduct(productId);
-        if (!product || !product._id) {
-          return;
+        let product = null;
+        if (isTextDesign) {
+          product = {
+            _id: "text-template-product",
+            bleedArea: 0,
+            trimArea: 0,
+            safetyArea: 0,
+            hideGuidelines: true,
+            isTextTemplate: true,
+            optionsMap: {
+              size: '2" x 2"',
+              productorientation: "Horizontal"
+            }
+          };
+          useProductStore.setState({ productData: product, isNotFound: false, error: null });
+        } else if (productId) {
+          product = await useProductStore.getState().fetchProduct(productId);
+          if (!product || !product._id) {
+            return;
+          }
         }
         if (!isMounted || !canvasRef.current || !containerRef.current || fabricRef.current) return;
         initializeRotateImage();
@@ -155641,11 +156985,20 @@ function Workspace() {
           clearSelection
         );
         const cleanupObjectAdded = setupObjectAddedHandler(canvas2);
-        const twoSided = product?.optionsMap?.printing === "4/4";
-        const templateId = getQueryParam("templateId");
-        let frontData = null;
-        let backData = null;
-        if (templateId) {
+        if (isTextDesign && templateId) {
+          const item = await ShapeService.getTextTemplateById(templateId);
+          if (item?.jsonData) {
+            const parsed = typeof item.jsonData === "string" ? JSON.parse(item.jsonData) : item.jsonData;
+            pageJSON.current.front = parsed;
+            useHistoryStore.setState({ isRestoring: true });
+            await loadPageToCanvas(canvas2, parsed);
+            useHistoryStore.setState({ isRestoring: false });
+            useHistoryStore.getState().saveState();
+          }
+        } else if (templateId) {
+          const twoSided = product?.optionsMap?.printing === "4/4";
+          let frontData = null;
+          let backData = null;
           const res = await TemplateDesignService.getTemplateDesignById(templateId);
           const tpl = res?.data;
           if (tpl?.pages && Array.isArray(tpl.pages)) {
@@ -155654,16 +157007,16 @@ function Workspace() {
             if (frontPage?.designData) frontData = frontPage.designData;
             if (backPage?.designData) backData = backPage.designData;
           }
-        }
-        if (frontData) {
-          pageJSON.current.front = frontData;
-          useHistoryStore.setState({ isRestoring: true });
-          await loadPageToCanvas(canvas2, frontData);
-          useHistoryStore.setState({ isRestoring: false });
-          useHistoryStore.getState().saveState();
-        }
-        if (twoSided && backData) {
-          pageJSON.current.back = backData;
+          if (frontData) {
+            pageJSON.current.front = frontData;
+            useHistoryStore.setState({ isRestoring: true });
+            await loadPageToCanvas(canvas2, frontData);
+            useHistoryStore.setState({ isRestoring: false });
+            useHistoryStore.getState().saveState();
+          }
+          if (twoSided && backData) {
+            pageJSON.current.back = backData;
+          }
         }
         useEditorStore.getState().setPages({ ...pageJSON.current });
         return () => {