vibrant-tool 0.1.3 → 0.1.5

package/dist/vibrant-tool.umd.js

@@ -8368,9 +8368,15 @@
   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();
@@ -8384,79 +8390,81 @@
     });
     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) {
@@ -98808,15 +98816,18 @@ end`);
     };
   }
   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) => {
@@ -98841,16 +98852,6 @@ end`);
     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) => {
@@ -98953,6 +98954,7 @@ end`);
     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}`, {
@@ -98973,6 +98975,30 @@ end`);
     }
     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(
@@ -99472,7 +99498,7 @@ end`);
               {
                 value: fileType,
                 onChange: (e2) => setFileType(e2.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__ */ jsxRuntime.jsx("option", { value: "png", children: "PNG" }),
                   /* @__PURE__ */ jsxRuntime.jsx("option", { value: "jpeg", children: "JPEG" }),
@@ -99575,7 +99601,7 @@ end`);
         const currentSide = useHistoryStore.getState().currentPage || "front";
         const editorPages = useEditorStore.getState().pages || {};
         const historyPages = useHistoryStore.getState().pages || {};
-        const currentUrl = getWorkareaDataUrl(canvas2);
+        const currentUrl = getWorkareaDataUrl(canvas2, 2);
         const opposingSide = currentSide === "front" ? "back" : "front";
         const opposingJson = editorPages[opposingSide] || historyPages[opposingSide]?.history?.at(-1) || null;
         let opposingUrl = "";
@@ -99613,6 +99639,10 @@ end`);
       setRotY((dragRef.current.rotY + (e2.clientX - dragRef.current.x) * 0.5) % 360);
       setRotX(Math.max(-60, Math.min(60, dragRef.current.rotX - (e2.clientY - dragRef.current.y) * 0.5)));
     };
+    const workarea = canvas2 ? canvas2.getObjects().find((o2) => o2.name === "workarea") : null;
+    const waW = (workarea?.width ?? 1050) * (workarea?.scaleX ?? 1);
+    const waH = (workarea?.height ?? 600) * (workarea?.scaleY ?? 1);
+    const cardAspectRatio = waW && waH ? waW / waH : 1.75;
     const currentProof = activeSide === "front" ? frontUrl : backUrl;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[99999] bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 select-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-4xl bg-white border border-gray-200 rounded-2xl shadow-2xl overflow-hidden flex flex-col h-[85vh]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-3 border-b border-gray-200 bg-gray-50/90", children: [
@@ -99658,7 +99688,7 @@ end`);
           onMouseUp: () => setIsDragging(false),
           onMouseLeave: () => setIsDragging(false),
           className: `flex-1 relative overflow-hidden flex items-center justify-center bg-gradient-to-b from-slate-50 to-slate-100 ${viewMode === "3d" ? "cursor-grab active:cursor-grabbing" : ""}`,
-          children: viewMode === "3d" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full flex items-center justify-center [perspective:1200px]", children: [
+          children: viewMode === "3d" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full flex items-center justify-center [perspective:1200px] p-6", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
@@ -99666,10 +99696,13 @@ end`);
                   transform: `rotateX(${rotX}deg) rotateY(${rotY}deg)`,
                   transformStyle: "preserve-3d",
                   transition: isDragging ? "none" : "transform 0.15s cubic-bezier(0.1, 0.9, 0.2, 1)",
-                  width: "420px",
-                  height: "260px"
+                  aspectRatio: cardAspectRatio,
+                  width: cardAspectRatio >= 1 ? "min(85%, 680px)" : "auto",
+                  height: cardAspectRatio < 1 ? "min(80%, 520px)" : "auto",
+                  maxHeight: "80%",
+                  maxWidth: "85%"
                 },
-                className: "relative will-change-transform shadow-2xl",
+                className: "relative will-change-transform shadow-2xl rounded-xl",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
@@ -99677,12 +99710,12 @@ end`);
                       style: { backfaceVisibility: "hidden" },
                       className: "absolute inset-0 rounded-xl overflow-hidden bg-white shadow-xl border border-gray-200",
                       children: [
-                        frontUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: frontUrl, alt: "Front", className: "w-full h-full object-contain pointer-events-none" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center text-xs text-gray-400", children: "Front Design" }),
+                        frontUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: frontUrl, alt: "Front", className: "w-full h-full object-fill pointer-events-none block" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center text-xs text-gray-400", children: "Front Design" }),
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "div",
                           {
                             style: {
-                              background: `linear-gradient(${120 + rotY * 0.8}deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%)`
+                              background: `linear-gradient(${120 + rotY * 0.8}deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.08) 100%)`
                             },
                             className: "absolute inset-0 pointer-events-none mix-blend-overlay opacity-80"
                           }
@@ -99696,7 +99729,7 @@ end`);
                       style: { transform: "rotateY(180deg)", backfaceVisibility: "hidden" },
                       className: "absolute inset-0 rounded-xl overflow-hidden bg-white shadow-xl border border-gray-200",
                       children: [
-                        isTwoSided ? backUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: backUrl, alt: "Back", className: "w-full h-full object-contain pointer-events-none" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col items-center justify-center text-xs text-gray-400 p-4 text-center", children: [
+                        isTwoSided ? backUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: backUrl, alt: "Back", className: "w-full h-full object-fill pointer-events-none block" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col items-center justify-center text-xs text-gray-400 p-4 text-center", children: [
                           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-gray-600", children: "Back Side" }),
                           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400 mt-1", children: "Design added to Back tab will render here" })
                         ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full bg-slate-50 flex items-center justify-center text-xs text-gray-400", children: "Single-sided Product" }),
@@ -99704,37 +99737,29 @@ end`);
                           "div",
                           {
                             style: {
-                              background: `linear-gradient(${120 - rotY * 0.8}deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%)`
+                              background: `linear-gradient(${120 - rotY * 0.8}deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.08) 100%)`
                             },
                             className: "absolute inset-0 pointer-events-none mix-blend-overlay opacity-80"
                           }
                         )
                       ]
                     }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { transform: "translateZ(-1px)" }, className: "absolute inset-0 rounded-xl bg-gray-300 -z-10 shadow-md" })
+                  )
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: { transform: `rotateX(90deg) translateZ(-150px)` },
-                className: "absolute w-72 h-24 bg-black/20 blur-xl rounded-full pointer-events-none"
-              }
-            ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-4 left-4 bg-white/80 backdrop-blur-md px-3 py-1 rounded-full border border-gray-200 text-[11px] text-gray-600 pointer-events-none flex items-center gap-1.5 shadow-sm", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2 h-2 rounded-full bg-[#02bc71] animate-ping" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Drag to Rotate 360°" })
             ] })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 flex flex-col items-center justify-center", children: [
-            isTwoSided && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-4 bg-gray-200 p-0.5 rounded-lg border border-gray-300 text-xs", children: [
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full flex items-center justify-center p-6", children: [
+            isTwoSided && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-4 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-gray-200/90 backdrop-blur-sm p-1 rounded-xl border border-gray-300 text-xs shadow-sm z-20", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
                   onClick: () => setActiveSide("front"),
-                  className: `px-3 py-1 rounded-md font-semibold cursor-pointer ${activeSide === "front" ? "bg-[#02bc71] text-white shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+                  className: `px-3 py-1 rounded-lg font-semibold cursor-pointer transition-all ${activeSide === "front" ? "bg-[#02bc71] text-white shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
                   children: "Front Proof"
                 }
               ),
@@ -99743,12 +99768,32 @@ end`);
                 {
                   type: "button",
                   onClick: () => setActiveSide("back"),
-                  className: `px-3 py-1 rounded-md font-semibold cursor-pointer ${activeSide === "back" ? "bg-[#02bc71] text-white shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+                  className: `px-3 py-1 rounded-lg font-semibold cursor-pointer transition-all ${activeSide === "back" ? "bg-[#02bc71] text-white shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
                   children: "Back Proof"
                 }
               )
             ] }),
-            currentProof ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-2 shadow-xl max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: currentProof, alt: "2D Proof", className: "max-h-[50vh] w-auto object-contain rounded-lg" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-8 text-center bg-gray-50 rounded-xl border border-gray-200 text-xs text-gray-400", children: [
+            currentProof ? /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  aspectRatio: cardAspectRatio,
+                  width: cardAspectRatio >= 1 ? "min(85%, 680px)" : "auto",
+                  height: cardAspectRatio < 1 ? "min(80%, 520px)" : "auto",
+                  maxHeight: "80%",
+                  maxWidth: "85%"
+                },
+                className: "relative rounded-xl overflow-hidden bg-white shadow-2xl border border-gray-200 flex items-center justify-center",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: currentProof,
+                    alt: `${activeSide} 2D Proof`,
+                    className: "w-full h-full object-fill pointer-events-none block"
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-8 text-center bg-gray-50 rounded-xl border border-gray-200 text-xs text-gray-400", children: [
               "No preview available for ",
               activeSide,
               " side."
@@ -99856,8 +99901,13 @@ end`);
   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;
@@ -99894,6 +99944,100 @@ end`);
       }
     }
   };
+  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] = React.useState(false);
     const [previewOpen, setPreviewOpen] = React.useState(false);
@@ -99901,8 +100045,40 @@ end`);
     const [saveSuccess, setSaveSuccess] = React.useState(false);
     const [saveError, setSaveError] = React.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;
@@ -99920,26 +100096,33 @@ end`);
             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: i2 + 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 {
@@ -99965,17 +100148,20 @@ end`);
             ]
           }
         ),
-        templateId && designType == "template" && /* @__PURE__ */ jsxRuntime.jsx(
+        templateId && (designType === "template" || designType === "text") && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-3 w-3 border-2 border-white border-t-transparent rounded-full animate-spin" }),
               "Saving..."
-            ] }) : saveSuccess ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "✓ Saved!" }) : saveError ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Save Failed" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Save Template" })
+            ] }) : saveSuccess ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "✓ Saved!" }) : saveError ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Save Failed" }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "Save ",
+              designType === "text" ? "Text Template" : "Template"
+            ] })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
@@ -100221,7 +100407,7 @@ end`);
           onClick: () => setActivePanel(null)
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `fixed md:relative bottom-0 left-0 right-0 md:bottom-auto md:left-auto z-50 transition-all duration-300 ease-in-out`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `fixed md:relative bottom-0 left-0 right-0 md:bottom-auto md:left-auto z-50 transition-all duration-300 ease-in-out md:h-full`, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -100241,7 +100427,7 @@ end`);
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto pt-4", children: panelName })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto pt-4 flex flex-col custom-scrollbar", children: panelName })
             ]
           }
         ),
@@ -100277,20 +100463,39 @@ end`);
   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
+    }),
+    setActiveColor: (color, index = 0) => set({
+      activeColor: color,
+      activeColorIndex: index
     }),
-    clearSelection: () => set({ type: "none", objects: [] })
+    clearSelection: () => set({
+      type: "none",
+      objects: [],
+      activeColor: null,
+      activeColorIndex: 0
+    })
   }));
   function TemplatesPanel() {
     const { productData } = useProductStore();
@@ -100387,7 +100592,7 @@ end`);
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "h-[calc(100vh-125px)] overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 pb-12 mx-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "h-[calc(100vh-125px)] overflow-auto custom-scrollbar", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 pb-12 mx-4", children: [
         templates.map((tpl) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -100852,27 +101057,23 @@ end`);
     });
     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 (e2) {
-        }
-      }
-      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 (e2) {
-        }
+  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,
@@ -100881,6 +101082,7 @@ end`);
   }) {
     const [search, setSearch] = React.useState("");
     const { isLoading } = useLoaderStore.getState();
+    const { addRecentItem } = useRecentElementsStore();
     const clearSearch = () => {
       setSearch("");
       onSearch("");
@@ -100957,6 +101159,7 @@ end`);
               } else {
                 addSVGToCanvas("svg", shape.image);
               }
+              addRecentItem(shape);
               if (window.innerWidth < 768) {
                 useSidePanelStore.getState().setActivePanel(null);
               }
@@ -100979,50 +101182,6 @@ end`);
       ] }) }) })
     ] });
   }
-  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__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -101047,6 +101206,7 @@ end`);
   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] = React.useState([]);
     const [page, setPage] = React.useState(1);
     const [category, setCategory] = React.useState(null);
@@ -101156,45 +101316,96 @@ end`);
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100dvh-180px)] overflow-auto", children: elements.map((item, i2) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-5", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold mb-3", children: item.category }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[calc(100dvh-180px)] overflow-auto custom-scrollbar", children: [
+        recentItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold mb-3", children: "Recent items" }),
+              recentItems.length > 3 && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "underline cursor-pointer",
+                  onClick: () => {
+                    setElementsSVG(recentItems);
+                    setCategory("Recent items");
+                    setHasMore(false);
+                  },
+                  children: "View all"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: recentItems.slice(0, 3).map((shape, i2) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
               {
-                className: "underline cursor-pointer",
-                onClick: () => getSVG(null, item?.category, 1),
-                children: "View all"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: item.data.map((shape, j2) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                "img",
+              shape._id || shape.image || i2
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px]" })
+        ] }),
+        elements.map((item, i2) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold mb-3", children: item.category }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px]" })
-      ] }, i2)) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3", children: item.data.map((shape, j2) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: shape.image,
+                    alt: item.category,
+                    width: 150,
+                    height: 150,
+                    className: "w-full h-24 object-contain"
+                  }
+                )
+              },
+              j2
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px]" })
+        ] }, i2))
+      ] })
     ] });
   }
-  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;
@@ -101275,13 +101486,10 @@ end`);
         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]);
     React.useEffect(() => {
@@ -101365,7 +101573,7 @@ end`);
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px] my-4" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "h-[calc(100vh-250px)] overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 pb-12 mx-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "h-[calc(100vh-250px)] overflow-auto custom-scrollbar", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 pb-12 mx-4", children: [
         textElements.map((tpl, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -101547,6 +101755,23 @@ end`);
     );
   }
   const VibrantLogo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABGCAMAAAC+PCsEAAAC7lBMVEUAAAAyMjIzMzMwMDAzMzNtmZJxfnoyMjI1NTUwMDBvmpYaGhoaFxdtmZIyMjJtmJIzMzNsmZFum5RtmZJiqJ8xMTEyMjJtmJIyLzAzMzNum5RwmpJtmZJtmZJtmZJtmZImJCVtmZJtmZImJiZtmZJtmpMvLy91pZRtmZJsmZJtmZI2NTYpJidum5QxMTFtmZJvmpUkIiRtmZJtmZJtmZJtmZIsLCwvLy9tmZIzMzMzMzMuLi5tmZIvLy8sLCxtmZL/Uml3qqIyMjL+DQEwMDAkIiPeanUmobj/YXoqKir2aXr2gY0p98tvopkvLy/xeoiS2V/+cI78ZX4F9PQaGhoJ4eYX7+mQ8YQ1NTUB/f32e5L2Y3EB/v4Lv6T4GRkC/fv8Umb57CYH+PME9fPeKjWBuqVUSE3bV2AL7Oxq7XT8OUcA/O0D9/P0R1n8U2T4d4gD9vXuFBo1Ozz+FBBKSUz/+yOiSVtJTE3rJS+Za2kQ7erGXGZXrWV1dEL/PVDhZXtN98fqGyA/aI72jJuA/pH5eIhXmnlvXl9MSk1mYj+//1k8+s0D/fT/rRL/bgv7GiEMkcbQ/1s8o16k/3wzMzM2NjYA//84ODgA//MA/+oA/u//OQMB/+AC/9b/gQv/Wgr/RAf/HwQA//gF/80E/az/dQ3/FAED7aNtm4//vgP/bBn/Xxj/4UX/yAb/KgQD/7z/TgT/R17/TxQC29b/Ywj/5Qb/bAMAztD/oAn/0ggMzMMC5rP/RUv/MkX/8Qb/2AX/BwID1Lf/UTT+3y//Kyn//QUP/OVS6qr/7C7/3R0Cvbz/Xkn/0jD//Sz/6B///h3/rgYA4ekC88w/7bPNTGP/bkjiwhT/jw0HqqkEnp1k55GhgFX/7Dv/NhID8OsWvLA7t62a3Xj/bmzM51mz2VNMTE5JSkz/ey/hWyWFkGrj40y2cUo4TkXDcj/sTDXQvij0xQ1WkHQ74myOr2nJ1l4/qlnNz1FJPUvHai7J1CjznehDAAAAlHRSTlMAzZQW274Fpk8ICWo5xOc3yS4VtA24RxwN8GZc3s/JqkH16I2BeFYR1YudOzkmdVQ/H6FJuKabh2/247+urmqW/ZT5tmQrD/v7el4h/jDWMv710n5hTTj87bmie/b22tnMs6+PWEwuHBn69unStJp8bjf89LezonVzaSj08t/TuKahj4dxRUD67NvWxMKzs66hmIeEWUQ3oQAADLhJREFUaN7UlkloE1EYx19U3JEcVOxNEPSgCF4sWpTgRtDgUq1SkZaqYLUuVRHEi4p6crvMvMyW2coMzkoakpCIJqExTUpXKG2hVsEFFEEUFMGbLyMdzTSJgh4mP0KYvI/M+/75/v83AWB7kQdXrrS13WhubgJ/YOnx5uNtbW1X7m9HtJwELmK7XCQ5WBh6A+FZ8AcOQnhkqDA4zGdkOZO5CNzETVkWMmZqsBA7AuEJUJUmCPOxQmE4nhFkuWUXcBfbZUHIcMNThb48hFXN1X4M9maHpoYTGUGQL58CLmNuiyyYmYnhqWw2AI+1g8qchfBNnz5oCIIpuMxXFrsuC6YpK8N69oMIW6sHBOmI0UiH7KqgT3NRNk2Bjg3qfdVichjC0aw+lYsLtClfBa7kqmDSQjxX0JG54GFQnlZIfdD1XMKkaeEhcCk3BZo3R3K6/oaoZK4TyFhZPZfkadpsmQvcSovJ83wypw9MQniwgrECWX0oJb3g6csuDPo0p57RYV5KDekDXRC2lz2xiLcDQ7kEH+afuTQgPzn5LMxFErm+gVcibJ5Z7kRJH+hLJblI+MU54GrOveA4LZ3qG0B5b5r5KBTJr8lYiuU4/ozbnuhOc52JRLWJVMx4JRKtM5IuinkjnRrRotzT3cDl7H4SlVQllTQCIuwsLV2DJPXNiCUlNd5zHriecz2SxKZjyitIHltaUjlOiKNKOjahSprP5cayzOVTWTURMz73EsTBkqNXJOFbJaaorNTtemMVueBjWVVJK5OOkTRTMKAk06zEjjWCmqBxjFXZtPFJRCMpHch+JZ1Q2Xf+faAm2HfgHasl0sooJDuW/jYQsXfcUFSJfX0U1AhHX7OqZCj7IUF12gMhSJhXkhOaNHagBpJuj0TSEsnxXki12kcWRcD9xogWl/y3QM1w9LUUVRUlDwmiCVi0UxREzmKLA3Hvn94Z7DkwFo9MGEVv3QMWB9FA8sYIF1f9NXH0TnPLr0a1kXFKJKhrALGwg6LQmSVx8f4aOXrtkfTHI6wxCinxBkA0UQRBfE9EojU2EJQSn8pxI6chKQbWWFEnYeCzFIn3H1ho1VesmL0A1AJ7/P3RCPsWkqR4G4BrJMnASTQQzXfBKs/2bF5Sb12t9TjxLqtfDmzWVy7bLFjm8a50LG3xLgZO5nmq0LCg0kg0LjzeSzDiXRT1opD98Ui037/rp5BNGDbPupqPlcNj97WxXNm7FvzOoiBacgipw+s2AAdzsGqsqPAs8fdEeTYAGbJ3DThLMhTxKcxZA7GELMGwWdbVcnQLPBjEEUELHEPg2Hzwk1lW3QaVi1xaDX4xd0lxcXmpkDkYPsfZmte+V3E33HHnCkJAY3c0HJ6EDEMeXkoyIbGL5bl+/54yQvCNhxb9xtZZqDG8bsW0EHxJSXX9vLqi0J3AZoclzusUguENM4TgHnurQxvR11b92vlQpczu9vVw9BfIhJgTnWQoBPPhsNZ9HZQTUmoUVG1Aje2wJ+JxlDcsw7Dgsl89b8awopSVTiFYcItTCNrUZh360gbwZ3b5n3D0R4IJhTo60Bt8RHM9vjvlhCAbOUARwrfYQuaAcma3e9iKPtRvRr+/UwhSUl8qZDqYdjoX/9UJ3K3x71+SoS4GDYSBz2nuSSOoLsQGjcRbRQjqHV89nZDNWHAvqEddL3ZaC61t/Q9C9vl6wvxjKtQVYtCL+shHui/8rZAt1YWstK2HRKFAHQIbtmHBBoeQhjpUmv/vQkDjD9Lr5yWROAoA+JuUbNiQLsJ4Exa8KEEXRSWJ0EKFuuxBkAXPwXbYw16C9rT/wXyxXVcIRqjbJHMYMD0UnropHVpiq2MRdN7jvnnojPMrmr7vIjqOMx/f9/vem8FZ++GooygGRHs8vtyovRWyI8tzS2vRH0IlKyrS91jKBmEfEghppfkhjd5l+/RIUdROR/nZPzvGlfVGSBI/LL6SkRKdZJas4rQzFeyQj1Bpyaxe5obUNgbtp7uJomJKfj3gymr4QBxdWSpuUvn1hwhMzoXMfZ+njGXph+wQyKBEEHkh0By0b8cIUX9P7k7bg17NByKsx+Yjjx+F02BCdpw1LYLLKOLMHaXECYEYw0rNDWn02s9jDSGdyRghTfCEeMY6WJBocilpRWnBgH5dm+YG+6VoDjMs4YSIAkoyvJBab/RP0xW1q2jjp7+9RgCIvLJmQjwil5gmhMlsVmGxcLGCEwKhMEoqnBBojh51faJ2VW18O+rt+kEyxVVbZPAoy0v+kHBqVt0Y7RDLvOyEQDlOWD5IY/jS188NiHY7ai76QVLgtwvo7jbDZhirKh4piXPVrWSdhSmJuSCQaGFjXOKD/Bi+3OsXarerac+jfYC3ll9q7XJ5VrUkUaLAV0xB1NZuVsCKVfpTnBAoYunKlbkgW3t7M8jBsBoEkjYGKI/ym2CUKishK9kFMyL4PuaGQBYl4RAPBJrDh/5Vt3tyrl8Pa0EgkKd7ckFgHSVpKyHuSLsh1E52RB7I/nB7BjmEQBC8qOAxotBGEMyS5REFJ4T4LaOdxN4PqSLk/pwg+8EgAi1/d0ZonZTM/h6xRcaYeZc9IIsCw/cckBpCbhByol9XA0GkHDZFT4gUZ6wuAkAKz6w4n7kQUnBC6EAdj8jvh8DhFNK/3g0EqeB1V70gNCayLNDiq0vgiAijwuWCQHmTyTyQL9tXNxcIuTjY8ockvB44mByyIO6Rkb5SAWeUaZe4INROuDLS2L76Q5Dv4A9JSiFbpHCSpbnCG7KMKckYOzfuSghta7nsBYFPXJAqQj4bkG+vQHLR+FzU47JMjd0HQiX4fztmsupEEIXhH6UKbSxiD9LSU263HdLdNyGxB40SCVdQV0E3oht3DrgVUQTdiDitHPAZzDu48i18AV25URC3Vp30zXAdEnSj4AeVFKmbc853T1d1kpOHaId8z2FZ7okfishvJ38gclaJvH79+s2dZZGLKz40njyKmchxEMtH8K6TOxqy+IteB3uP7xSh28nvi2hn3smOvHn9to8F6MvDkZ+KHNt/9PDix3iO7/63B7CLdsgPWnJM3Wi4FDmCnRx4dWJBhI7qtXl299ylS9evn9GwyN7OxsbhqdI+SWezIx868nlTzjq7F+va6JzCd2zuxt7NvfghpzY6G0BnHyXYwcY8lszc2XcQa3P+09P0/vPP9/Gvwx9deGi//HIZy7hbW1t9AO2WnIwBjK8AXSiMKzC20tYoBoouDBuKBl2aWmyKoYsF9OVOt+S6Q2mdOgFF1KYx4q0tR6312pSG05i/awW3rgMP7p3GElrkMxaqUieMidAFUgGUMeXzuM38CasA34HtkV5VqpUoSQdV5DdQYwvP6y9YeV46yKOkD9ihoARE4kBhRowljMOKdAB9z5JDA3QZ1ck8X8evuXxXv/riHpYxTAvoejrcJoBe0kZLTqpJocphbfUHlLoHPgk1AGkG2BMqzBIxaprMGHjYxgpH1IxhCugmVIIxJP2JCUWzB8AfQBNdAA2m0TDCFIpysOraenLj68c7O0VKQwUt4A5VBZ5NIqNR0iARSjMVsZtNUYtUJnbgDJHn2CZlqKlFkBSQCMek50qJZCNYggNoM0tm4cgY1uTWxw8f6HTQMMMSrZ4rSo4iKRqOl4FEmo1+aKCxLMJQDUlE+0Hz87Di2EYUmNEN3IbrM7VY+HBKANK518uiLrjfzLJsKLjMAgR9rMnmh/c36dofL7TJ9wKRa0A/CifNGLWIgzSBvSwSaPBipDkM36KdmWVxd7vcZOJgBqMEA7muw07CiZlb9PIAluo0RpEQTE54IsqyFEEtYmNN+OP3e4Br7pU2ZrRLHYSbj0MbcxE0c61cFrFhhH0nB59eKKnZDAcg7NBpJwOMLRCBC0ks12PoQ93rTWUnvi8mGYCqftv80iKRAuty8/1BXL3zcHmPdGsRE25kLYiAidxaEjEA3WcxMPIwhekgqlxVZeYGiFaEKWYfOoMeUo7mqFEUhSfnlQNicbNzpD5qP6zi9k3sub1n87BlzUXYdkcYMApUFUOADnMtDFUaoURKKeIbdPCMAC0Sam54GaaIGNDYpIUa37epziGkiAEnUq2NOCR5JZUGtUigTzPQ4JGp0Qk3wCp271EeV6/ap+ciwbgWEQCCEUdsAqaKVZ9agYouXNiJAUkqRWAlUVkNIxM1RTjKvJYezUyCkFVDT2iArhqZMQ1mCkU36k7DUxgd0wx9OWSGqFmVoWlgJQev7j64l3OOGZprgNBd9dCSMXtArzF9TYrYLleaOixHo+QkbsSBH8TzOC0hBoA7E9Fi4Qcp3bddDWjHbTg2CKerwhPcMUAZaMhZGvishf/8hXwDf/LQfNeBDzwAAAAASUVORK5CYII=";
+  const VibrantImageService = {
+    async getFolderData(params = {}) {
+      const { item = "Small", page = 1, limit = 30, search = "" } = params;
+      const query = new URLSearchParams();
+      if (item) query.set("item", item);
+      if (page) query.set("page", String(page));
+      if (limit) query.set("limit", String(limit));
+      if (search) query.set("search", search);
+      const res = await apiUploadImage(
+        `/folder-data?${query.toString()}`,
+        {
+          method: "GET"
+        }
+      );
+      return res;
+    }
+  };
   function useSocialAuth({
     onImageSelect
   }) {
@@ -101704,10 +101929,12 @@ end`);
   ];
   function PhotosPanel() {
     const { startLoading, stopLoading, isLoading } = useLoaderStore();
+    const [source, setSource] = React.useState("external");
     const [socialImages, setSocialImages] = React.useState([]);
     const [page, setPage] = React.useState(1);
     const [hasMore, setHasMore] = React.useState(true);
     const [category, setCategory] = React.useState(imageOptions[0]);
+    const [searchQuery, setSearchQuery] = React.useState("");
     const scrollRef = React.useRef(null);
     const {
       handleGoogleAuth,
@@ -101715,40 +101942,74 @@ end`);
       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);
+          }
         }
       }
     });
     const fetchImages = React.useCallback(
-      async (q2, pageNo) => {
+      async (q2, pageNo, currentSource = source) => {
         startLoading();
         try {
-          const res = await ShapeService.getAllExternal({
-            page: pageNo,
-            limit: 30,
-            keyType: "all",
-            isVector: false,
-            query: q2
-          });
-          const newItems = res.items.filter(
-            (x2) => x2.status && x2.image
-          );
-          setSocialImages(
-            (prev) => pageNo === 1 ? newItems : [...prev, ...newItems]
-          );
-          if (newItems.length < 20) setHasMore(false);
+          if (currentSource === "vibrant") {
+            const res = await VibrantImageService.getFolderData({
+              item: "Small",
+              page: pageNo,
+              limit: 30,
+              search: q2 || void 0
+            });
+            const newItems = (res.files || []).map((f) => ({
+              _id: f.key,
+              status: true,
+              category: "vibrant",
+              image: f.smallUrl || f.url,
+              largeImage: f.largeUrl || f.url,
+              tags: [f.name]
+            }));
+            setSocialImages(
+              (prev) => pageNo === 1 ? newItems : [...prev, ...newItems]
+            );
+            if (newItems.length < 20) setHasMore(false);
+            else setHasMore(true);
+          } else {
+            const res = await ShapeService.getAllExternal({
+              page: pageNo,
+              limit: 30,
+              keyType: "all",
+              isVector: false,
+              query: q2
+            });
+            const newItems = res.items.filter(
+              (x2) => x2.status && x2.image
+            );
+            setSocialImages(
+              (prev) => pageNo === 1 ? newItems : [...prev, ...newItems]
+            );
+            if (newItems.length < 20) setHasMore(false);
+            else setHasMore(true);
+          }
+        } catch (err) {
+          console.error("Failed to fetch images:", err);
         } finally {
           stopLoading();
         }
       },
-      [startLoading, stopLoading]
+      [startLoading, stopLoading, source]
     );
     React.useEffect(() => {
-      fetchImages(category, 1);
-    }, []);
+      fetchImages(searchQuery || (source === "vibrant" ? "" : category), 1, source);
+    }, [source]);
     React.useEffect(() => {
       const el = scrollRef.current;
       if (!el) return;
@@ -101757,13 +102018,13 @@ end`);
         if (el.scrollTop + el.clientHeight >= el.scrollHeight - 200) {
           const next = page + 1;
           setPage(next);
-          fetchImages(category, next);
+          fetchImages(searchQuery || (source === "vibrant" ? "" : category), next, source);
         }
       };
       el.addEventListener("scroll", onScroll);
       return () => el.removeEventListener("scroll", onScroll);
-    }, [hasMore, isLoading]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    }, [hasMore, isLoading, page, searchQuery, category, source, fetchImages]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full min-h-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx("script", { src: "https://apis.google.com/js/api.js" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "script",
@@ -101783,70 +102044,166 @@ end`);
           });
         }
       } }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-neutral-800 px-3 py-2 rounded flex items-center gap-2 mb-4 mx-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          className: "bg-transparent outline-none text-sm text-gray-300 w-full",
-          onKeyDown: (e2) => {
-            e2.stopPropagation();
-            if (e2.key === "Enter") {
-              fetchImages(e2.target.value, 1);
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 pt-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-neutral-800 px-3 py-2 rounded flex items-center gap-2 mb-3 mx-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            className: "bg-transparent outline-none text-sm text-gray-300 w-full",
+            placeholder: source === "vibrant" ? "Search Vibrant Images..." : "Search Stock Photos...",
+            value: searchQuery,
+            onChange: (e2) => setSearchQuery(e2.target.value),
+            onKeyDown: (e2) => {
+              e2.stopPropagation();
+              if (e2.key === "Enter") {
+                setPage(1);
+                fetchImages(searchQuery, 1, source);
+              }
             }
           }
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "m-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-md font-medium mb-3", children: "Upload From Other Media" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "cursor-pointer", onClick: () => handleGoogleAuth("googledrives"), children: /* @__PURE__ */ jsxRuntime.jsx(GoogleDriveIcon, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "cursor-pointer", onClick: () => handleGoogleAuth("googlephotos"), children: /* @__PURE__ */ jsxRuntime.jsx(GooglePhotoIcon, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "cursor-pointer", onClick: handleDropboxAuth, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: "https://vibrantprintshopimage.s3.amazonaws.com/dropbox.svg",
-              alt: "dropbox",
-              height: 30,
-              width: 30,
-              className: "object-contain"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "cursor-pointer", onClick: handleFacebookAuth, children: /* @__PURE__ */ jsxRuntime.jsx(FacebookIcon, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "cursor-pointer", onClick: handleInstagramAuth, children: /* @__PURE__ */ jsxRuntime.jsx(InstagramIcon, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4 mb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-md font-medium mb-2 text-gray-200", children: "Upload From Other Media" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "cursor-pointer p-1.5 rounded-lg hover:bg-white/10 transition-colors",
+                onClick: () => handleGoogleAuth("googledrives"),
+                title: "Google Drive",
+                children: /* @__PURE__ */ jsxRuntime.jsx(GoogleDriveIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "cursor-pointer p-1.5 rounded-lg hover:bg-white/10 transition-colors",
+                onClick: () => handleGoogleAuth("googlephotos"),
+                title: "Google Photos",
+                children: /* @__PURE__ */ jsxRuntime.jsx(GooglePhotoIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "cursor-pointer p-1.5 rounded-lg hover:bg-white/10 transition-colors",
+                onClick: handleDropboxAuth,
+                title: "Dropbox",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: "https://vibrantprintshopimage.s3.amazonaws.com/dropbox.svg",
+                    alt: "dropbox",
+                    height: 26,
+                    width: 26,
+                    className: "object-contain"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "cursor-pointer p-1.5 rounded-lg hover:bg-white/10 transition-colors",
+                onClick: handleFacebookAuth,
+                title: "Facebook",
+                children: /* @__PURE__ */ jsxRuntime.jsx(FacebookIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "cursor-pointer p-1.5 rounded-lg hover:bg-white/10 transition-colors",
+                onClick: handleInstagramAuth,
+                title: "Instagram",
+                children: /* @__PURE__ */ jsxRuntime.jsx(InstagramIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setSource("vibrant");
+                  setPage(1);
+                  setSearchQuery("");
+                  fetchImages("", 1, "vibrant");
+                },
+                title: "Vibrant Stock Images",
+                className: "cursor-pointer",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: VibrantLogo,
+                    alt: "vibrant",
+                    height: 64,
+                    width: 64,
+                    className: "object-contain"
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px] my-3" }),
+        source === "external" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4 mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 overflow-auto scrollbar-none custom-scrollbar", children: imageOptions.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: `px-2 py-1 rounded-sm shrink-0 text-xs ${item === category ? "bg-[#02bc71] text-white" : "bg-[#8f99a826]"}`,
+            onClick: () => {
+              setCategory(item);
+              setSocialImages([]);
+              setPage(1);
+              fetchImages(item.toLowerCase(), 1, "external");
+            },
+            children: item
+          },
+          item
+        )) }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4 mb-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold text-[#02bc71] flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-2 h-2 rounded-full bg-[#02bc71]" }),
+            "Vibrant Cloud Images"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
             {
-              src: VibrantLogo,
-              alt: "vibrant",
-              height: 60,
-              width: 60,
-              className: "object-contain"
+              type: "button",
+              onClick: () => {
+                setSource("external");
+                setPage(1);
+                setSearchQuery("");
+                fetchImages(category.toLowerCase(), 1, "external");
+              },
+              className: "text-[11px] text-gray-400 hover:text-white cursor-pointer underline",
+              children: "Explore Stock Categories"
             }
-          ) })
+          )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px] my-4" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "m-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 overflow-auto", children: imageOptions.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          className: `px-2 py-1 rounded-sm shrink-0 ${item === category ? "bg-[#02bc71] text-white" : "bg-[#8f99a826]"}`,
-          onClick: () => {
-            setCategory(item);
-            setSocialImages([]);
-            fetchImages(item.toLowerCase(), 1);
-          },
-          children: item
-        },
-        item
-      )) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100vh-288px)] overflow-auto", ref: scrollRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3 mx-4 pb-5", children: socialImages.length > 0 && socialImages.map((item, i2) => {
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto pb-8 custom-scrollbar", ref: scrollRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3 mx-4 pb-5", children: socialImages.length > 0 ? socialImages.map((item, i2) => {
         return /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            className: "relative aspect-square rounded overflow-hidden group cursor-pointer",
-            onClick: () => {
-              addImageToCanvas(item.largeImage);
-              if (window.innerWidth < 768) {
-                useSidePanelStore.getState().setActivePanel(null);
+            className: "relative aspect-square rounded overflow-hidden group cursor-pointer bg-neutral-900  transition-all",
+            onClick: async () => {
+              try {
+                startLoading();
+                const targetUrl = item.largeImage || item.image;
+                if (!targetUrl) return;
+                const image = await ShapeService.convertImages(targetUrl);
+                const imageUrl = image?.success ? image?.url : targetUrl;
+                if (imageUrl) addImageToCanvas(imageUrl);
+                if (window.innerWidth < 768) {
+                  useSidePanelStore.getState().setActivePanel(null);
+                }
+              } catch (error2) {
+                console.error("Failed to convert image:", error2);
+              } finally {
+                stopLoading();
               }
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -101855,14 +102212,14 @@ end`);
                 src: item.image,
                 height: 300,
                 width: 300,
-                alt: "stock",
+                alt: item.tags?.[0] || "stock",
                 className: "object-cover w-full h-full group-hover:scale-105 transition-transform"
               }
             )
           },
           i2
         );
-      }) }) })
+      }) : !isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full py-8 text-center text-xs text-gray-500", children: "No images found" }) : null }) })
     ] });
   }
   async function addBackgroundImage(url) {
@@ -101877,7 +102234,7 @@ end`);
     const bounds = workarea.getBoundingRect();
     const centerX = bounds.left + bounds.width / 2;
     const centerY = bounds.top + bounds.height / 2;
-    oa.fromURL(url, { crossOrigin: "anonymous" }).then((img) => {
+    oa.fromURL(url + "?t=vb", { crossOrigin: "anonymous" }).then((img) => {
       img.set({
         left: centerX,
         top: centerY,
@@ -101913,319 +102270,288 @@ end`);
     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 === "textbox" || obj.type === "i-text" || obj.type === "text") {
+        const fill22 = obj.get?.("fill") ?? obj.fill;
+        if (typeof fill22 === "string" && fill22 !== "none" && fill22 !== "transparent" && fill22 !== "") {
+          addColor(fill22);
+        }
+        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 (e2) => {
-      const startX = e2.clientX;
-      const startY = e2.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 = React.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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%)"
-            }
-          }
-        )
-      }
-    ) });
-  }
-  function AlphaSlider({
-    alpha,
-    color,
-    refEl,
-    setAlpha,
-    canvas: canvas2,
-    targets,
-    saveState
-  }) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "absolute inset-0",
-              style: {
-                background: `linear-gradient(to right, transparent, ${color})`
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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%)"
-              }
-            }
-          )
-        ]
+        onPointerUp: () => onCommit?.(),
+        onBlur: () => onCommit?.(),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: thumbClassName ? `pqc-slider-thumb ${thumbClassName}` : "pqc-slider-thumb", style: { ["--pqc-_x"]: `${percent}%` } })
       }
-    ) });
-  }
-  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__ */ jsxRuntime.jsxs("div", { className: "mt-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 mb-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold tracking-wider text-gray-500 uppercase", children: "CMYK" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400", children: "Print Values (0–100%)" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-5 gap-1.5", children: [
-        ["c", "m", "y", "k"].map((key) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "number",
-              min: 0,
-              max: 100,
-              value: cmyk2[key],
-              onChange: (e2) => {
-                const val = Math.max(0, Math.min(100, +e2.target.value || 0));
-                updateColor({ ...cmyk2, [key]: val });
-              },
-              className: inputClass
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[10px] text-gray-500 block mt-0.5 text-center font-semibold", children: key.toUpperCase() })
-        ] }, key)),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "number",
-              min: 0,
-              max: 100,
-              value: alpha,
-              onChange: (e2) => {
-                const newAlpha = Math.max(0, Math.min(100, +e2.target.value));
-                setAlpha(newAlpha);
-                if (canvas2 && targets.length) {
-                  targets.forEach((obj) => {
-                    obj.set("opacity", newAlpha / 100);
-                    obj.setCoords();
-                  });
-                  canvas2.requestRenderAll();
-                  saveState();
-                }
-              },
-              className: inputClass
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-start gap-3 mb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-12 h-12 rounded border border-gray-300 flex-shrink-0", children: [
-      /* @__PURE__ */ jsxRuntime.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] = React.useState(String(value));
+    React.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__ */ jsxRuntime.jsxs("div", { className: "pqc-channel-row", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pqc-channel-label", style: { color: labelColor }, "aria-hidden": "true", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(ChannelSlider, { value, min, max, gradient, ariaLabel, onChange, onCommit: () => onCommit?.("slider"), className: sliderClassName, thumbClassName: sliderThumbClassName }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "absolute inset-0 rounded",
-          style: {
-            background: color,
-            opacity: alpha / 100
-          }
-        }
-      ),
-      outOfGamut && /* @__PURE__ */ jsxRuntime.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 = React.useMemo(() => objects.filter((o2) => o2.name !== "workarea"), [objects]);
     const isControlled = typeof onChange === "function";
+    const allTargetColors = React.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] = React.useState(initialHex);
@@ -102235,17 +102561,32 @@ end`);
       return rgbToHsv(rgb2.r, rgb2.g, rgb2.b);
     });
     const [alpha, setAlpha] = React.useState(100);
+    const [mode2, setMode] = React.useState("HEX");
     const [open2, setOpen] = React.useState(false);
+    const [copied, setCopied] = React.useState(false);
+    const [recentColors, setRecentColors] = React.useState([
+      "#e11d48",
+      "#9f1239",
+      "#881337",
+      "#a855f7",
+      "#c084fc",
+      "#475569",
+      "#334155",
+      "#22c55e",
+      "#16a34a",
+      "#6366f1",
+      "#d97706"
+    ]);
     const [coords, setCoords] = React.useState({ top: 0, left: 0 });
     const containerRef = React.useRef(null);
     const popoverRef = React.useRef(null);
-    const gradientRef = React.useRef(null);
+    const svRef = React.useRef(null);
     const hueRef = React.useRef(null);
     const alphaRef = React.useRef(null);
     const updatePosition = React.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) {
@@ -102256,29 +102597,23 @@ end`);
     React.useEffect(() => {
       if (!open2) return;
       updatePosition();
+      const close = (e2) => {
+        const t2 = e2.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]);
-    React.useEffect(() => {
-      if (!open2) return;
-      const handleClickOutside = (e2) => {
-        const t2 = e2.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]);
     React.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") {
@@ -102295,35 +102630,32 @@ end`);
         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 = React.useCallback(
+    const applyControlledColor = React.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);
@@ -102331,25 +102663,76 @@ end`);
       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__ */ jsxRuntime.jsx("div", { className: `flex items-center gap-1.5 ${className}`, children: allTargetColors.map((c2, idx2) => {
+        const isSelected = activeColor ? activeColor.toLowerCase() === c2.toLowerCase() : activeColorIndex === idx2 || idx2 === 0 && !activeColor;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setActiveColor(c2, idx2);
+              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 + "-" + idx2
+        );
+      }) });
+    }
     const hueRgb = hsvToRgb(hsv.h, 100, 100);
     const hueColor = rgbToHex(hueRgb.r, hueRgb.g, hueRgb.b);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${className}`, ref: containerRef, children: [
       /* @__PURE__ */ jsxRuntime.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 && reactDom.createPortal(
@@ -102357,47 +102740,204 @@ end`);
           "div",
           {
             ref: popoverRef,
+            "data-cmyk-popover": "true",
             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: "cmyk-picker-popover bg-white rounded-2xl shadow-2xl p-3.5 w-[270px] text-gray-800 border border-gray-100 select-none font-sans",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-gray-800 font-semibold text-sm", children: "Color Picker" }),
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("button", { onClick: () => setOpen(false), className: "text-gray-400 hover:text-gray-600 text-lg leading-none", children: "✕" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(GradientSelector, { hsv, hueColor, refEl: gradientRef, onChange: updateFromHsv }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ColorPreviewBox, { color, alpha }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(HueSlider, { hsv, refEl: hueRef, onChange: updateFromHsv }),
-                  !isControlled && /* @__PURE__ */ jsxRuntime.jsx(
-                    AlphaSlider,
+              /* @__PURE__ */ jsxRuntime.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: (e2) => {
+                    e2.currentTarget.setPointerCapture(e2.pointerId);
+                    const rect = e2.currentTarget.getBoundingClientRect();
+                    updateFromHsv({
+                      ...hsv,
+                      s: Math.round(Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width)) * 100),
+                      v: Math.round((1 - Math.max(0, Math.min(1, (e2.clientY - rect.top) / rect.height))) * 100)
+                    });
+                  },
+                  onPointerMove: (e2) => {
+                    if (e2.buttons === 0) return;
+                    const rect = e2.currentTarget.getBoundingClientRect();
+                    updateFromHsv({
+                      ...hsv,
+                      s: Math.round(Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width)) * 100),
+                      v: Math.round((1 - Math.max(0, Math.min(1, (e2.clientY - rect.top) / rect.height))) * 100)
+                    });
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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: (e2) => {
+                    e2.currentTarget.setPointerCapture(e2.pointerId);
+                    const rect = e2.currentTarget.getBoundingClientRect();
+                    updateFromHsv({ ...hsv, h: Math.round(Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width)) * 360) % 360 });
+                  },
+                  onPointerMove: (e2) => {
+                    if (e2.buttons === 0) return;
+                    const rect = e2.currentTarget.getBoundingClientRect();
+                    updateFromHsv({ ...hsv, h: Math.round(Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width)) * 360) % 360 });
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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: (e2) => {
+                    e2.currentTarget.setPointerCapture(e2.pointerId);
+                    const rect = e2.currentTarget.getBoundingClientRect();
+                    const newAlpha = Math.round(Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width)) * 100);
+                    setAlpha(newAlpha);
+                    if (canvas2 && targets.length) {
+                      targets.forEach((obj) => obj.set("opacity", newAlpha / 100));
+                      canvas2.requestRenderAll();
+                    }
+                  },
+                  onPointerMove: (e2) => {
+                    if (e2.buttons === 0) return;
+                    const rect = e2.currentTarget.getBoundingClientRect();
+                    const newAlpha = Math.round(Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width)) * 100);
+                    setAlpha(newAlpha);
+                    if (canvas2 && targets.length) {
+                      targets.forEach((obj) => obj.set("opacity", newAlpha / 100));
+                      canvas2.requestRenderAll();
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "absolute inset-0",
+                        style: {
+                          background: `linear-gradient(to right, transparent, ${color})`
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 mb-3", children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-gray-400 text-xs font-mono", children: "#" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: color.replace("#", "").toUpperCase(),
+                      onChange: (e2) => updateFromHex(e2.target.value),
+                      className: "w-full bg-transparent text-xs font-mono font-medium focus:outline-none uppercase pl-1 text-gray-800"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m14 7 3 3" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 10 9 20l-4 1 1-4 10-10a2.828 2.828 0 0 1 4 4Z" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 4 2-2 4 4-2 2" })
+                    ] })
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5 mb-3", children: CMYK_CHANNELS$1.map(({ key, label, color: lColor, name }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "pt-2 border-t border-gray-100", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5", children: "Preset Swatches" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-8 gap-1.5", children: DEFAULT_COLORS.map((c2) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "pt-2 mt-2 border-t border-gray-100", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-wider block mb-1.5", children: "Recent Colors" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-8 gap-1.5", children: recentColors.map((c2, i2) => /* @__PURE__ */ jsxRuntime.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 + i2
+                )) })
+              ] })
             ]
           }
         ),
@@ -102493,11 +103033,26 @@ end`);
           hex
         ))
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100vh-122px)] overflow-auto", ref: scrollRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 mx-4 pb-5", children: backgroundImages.map((item, i2) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100vh-165px)] overflow-auto custom-scrollbar", ref: scrollRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 mx-4 pb-5", children: backgroundImages.map((item, i2) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
             "img",
             {
@@ -102515,14 +103070,40 @@ end`);
   }
   function UploadPanel() {
     const [assets, setAssets] = React.useState([]);
-    function handleFileChange(e2) {
+    const { startLoading, stopLoading } = useLoaderStore();
+    async function handleFileChange(e2) {
       const file = e2.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]);
       e2.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__ */ jsxRuntime.jsxs("div", { className: "mx-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold mb-4 mt-2", children: "Upload your assets" }),
       /* @__PURE__ */ jsxRuntime.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: [
@@ -102541,17 +103122,12 @@ end`);
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 mt-3", children: assets.map((asset) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
             "img",
             {
-              src: asset.url,
+              src: asset.uploadedUrl || asset.url,
               alt: "asset",
               height: 300,
               width: 300,
@@ -104837,7 +105413,7 @@ end`);
   <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,
@@ -105044,7 +105620,7 @@ END:VCARD`;
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[calc(100vh-200px)] overflow-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[calc(100vh-200px)] overflow-auto custom-scrollbar", children: [
         type === "url" && /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { label: "Website URL", error: errors.url, children: /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -105642,17 +106218,38 @@ END:VCARD`;
       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);
     React.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,
@@ -106246,7 +106843,6 @@ END:VCARD`;
     const { toggleShadow, setShadow } = useEffectStore();
     useBlurEffect(canvas2, isOpen);
     useBrightnessEffect(canvas2, isOpen);
-    useBrightnessEffect(canvas2, isOpen);
     useTemperatureEffect(canvas2, isOpen);
     useContrastEffect(canvas2, isOpen);
     useShadowEffect(canvas2, isOpen);
@@ -106334,7 +106930,7 @@ END:VCARD`;
       { id: "natural", label: "Natural" },
       { id: "warm", label: "Warm" }
     ];
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto custom-scrollbar overflow-x-hidden px-4", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto custom-scrollbar overflow-x-hidden px-4 custom-scrollbar", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 mb-6", children: PRESETS.map((p2) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -106920,7 +107516,7 @@ END:VCARD`;
       saveState();
       setActivePanel(null);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "bg-neutral-900 border-r border-neutral-800 p-4 text-white h-full overflow-y-auto", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "bg-neutral-900 border-r border-neutral-800 p-4 text-white h-full overflow-y-auto custom-scrollbar", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => setActivePanel(null), className: "cursor-pointer mb-2", children: "← Back" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between items-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold ", children: "Mask image" }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: mask.map((m2, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -107094,7 +107690,7 @@ END:VCARD`;
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100vh-125px)] overflow-auto", ref: scrollRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4 py-5", children: fontData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-400 text-sm text-center", children: "No results found" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100vh-126px)] overflow-auto custom-scrollbar", ref: scrollRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4 py-5", children: fontData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-400 text-sm text-center", children: "No results found" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4", children: fontData.map((item, i2) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -152406,7 +153002,7 @@ ${elements2.join("\n")}
       }
     };
     const stopPropagation = (e2) => e2.stopPropagation();
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col h-full mx-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto space-y-5 pr-2", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col h-full mx-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto space-y-5 pr-2 custom-scrollbar", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-white", children: "Bar Code" }),
       /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Select Bar Code Type", children: /* @__PURE__ */ jsxRuntime.jsx(
         "select",
@@ -152464,82 +153060,99 @@ ${elements2.join("\n")}
       )
     ] }) });
   }
-  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] = React.useState([]);
+    const [page, setPage] = React.useState(1);
+    const [hasMore, setHasMore] = React.useState(true);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const scrollRef = React.useRef(null);
+    const fetchQuotes = React.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);
+      }
+    }, []);
+    React.useEffect(() => {
+      fetchQuotes(1);
+    }, [fetchQuotes]);
+    React.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold text-white", children: "Quotes" }) }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-neutral-800 mx-4 mb-3" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "flex-1 min-h-0 overflow-y-auto flex flex-col gap-3 px-4 py-2",
-          children: QUOTES.map((q2, i2) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-neutral-200 text-[13px] leading-relaxed mb-2 group-hover:text-white transition-colors", children: q2.content }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-right text-[12px] font-semibold text-[#02bc71]", children: q2.author })
-              ]
-            },
-            i2
-          ))
+          ref: scrollRef,
+          className: "flex-1 min-h-0 overflow-y-auto flex flex-col gap-3 px-4 py-2 custom-scrollbar",
+          children: [
+            quotes.map((q2, i2) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-neutral-200 text-[13px] leading-relaxed mb-2 group-hover:text-white transition-colors", children: q2.content }),
+                  q2.author && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-right text-[12px] font-semibold text-[#02bc71]", children: q2.author })
+                ]
+              },
+              q2._id || i2
+            )),
+            isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-4 text-xs text-neutral-500", children: "Loading more quotes..." })
+          ]
         }
       )
     ] });
@@ -152567,6 +153180,559 @@ ${elements2.join("\n")}
       ) })
     }
   );
+  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(`/api/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 = React.useMemo(
+      () => objects.filter((o2) => o2.name !== "workarea"),
+      [objects]
+    );
+    const objectColors = React.useMemo(() => extractAllTargetColors(targets), [targets, objects]);
+    const targetInfo = React.useMemo(() => extractTargetColor(targets), [targets]);
+    const initialColor = activeColor || (objectColors.length > 0 ? objectColors[0] : targetInfo.color || "#000000");
+    const [currentColor, setCurrentColor] = React.useState(initialColor);
+    const [currentCmyk, setCurrentCmyk] = React.useState(() => hexToCmyk(initialColor));
+    const [hsv, setHsv] = React.useState(() => {
+      const rgb2 = hexToRgb(initialColor);
+      return rgbToHsv(rgb2.r, rgb2.g, rgb2.b);
+    });
+    const [alpha, setAlpha] = React.useState(() => targetInfo.opacity ?? 100);
+    const [colorMode, setColorMode] = React.useState("HEX");
+    const [dbColors, setDbColors] = React.useState([]);
+    const [isLoadingColors, setIsLoadingColors] = React.useState(false);
+    const [copied, setCopied] = React.useState(false);
+    const svRef = React.useRef(null);
+    const hueRef = React.useRef(null);
+    const alphaRef = React.useRef(null);
+    React.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 idx2 = colors.indexOf(chosenColor);
+            setActiveColor(chosenColor, idx2 >= 0 ? idx2 : 0);
+          }
+        }
+      }
+    }, [targets, activeColor, activeColorIndex]);
+    React.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 = React.useMemo(() => {
+      if (!canvas2) return [];
+      const allObjs = canvas2.getObjects ? canvas2.getObjects() : [];
+      return extractAllTargetColors(allObjs);
+    }, [canvas2, objects]);
+    const applyColor = React.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 = React.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 = React.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 = React.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, idx2) => {
+      setActiveColor(hex, idx2);
+      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 = React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 flex flex-col gap-3 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2 h-2 rounded-full bg-[#02bc71] animate-pulse" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-semibold text-sm text-neutral-100", children: "Color Palette" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto space-y-5 p-4 pr-3 custom-scrollbar", children: [
+        objectColors.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] font-bold text-neutral-400 uppercase tracking-wider", children: [
+              "Object Colors (",
+              objectColors.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-neutral-500", children: "Select to customize" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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, idx2) => {
+            const isSelected = currentColor.toLowerCase() === hex.toLowerCase();
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleSelectObjectColor(hex, idx2),
+                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 ${idx2 + 1}: ${hex.toUpperCase()}`,
+                children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-bold mix-blend-difference text-white", children: "✓" })
+              },
+              hex + "-" + idx2
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3.5 bg-neutral-950 border border-neutral-800 rounded-2xl shadow-xl space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pb-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold text-neutral-300", children: "Custom Color" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "w-3.5 h-3.5 rounded-full border border-neutral-700 shadow-inner",
+                  style: { backgroundColor: currentColor }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex bg-neutral-900 rounded-lg p-0.5 border border-neutral-800", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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: (e2) => {
+                e2.currentTarget.setPointerCapture(e2.pointerId);
+                const rect = e2.currentTarget.getBoundingClientRect();
+                updateFromHsv({
+                  ...hsv,
+                  s: Math.round(Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width)) * 100),
+                  v: Math.round((1 - Math.max(0, Math.min(1, (e2.clientY - rect.top) / rect.height))) * 100)
+                });
+              },
+              onPointerMove: (e2) => {
+                if (e2.buttons === 0) return;
+                const rect = e2.currentTarget.getBoundingClientRect();
+                updateFromHsv({
+                  ...hsv,
+                  s: Math.round(Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width)) * 100),
+                  v: Math.round((1 - Math.max(0, Math.min(1, (e2.clientY - rect.top) / rect.height))) * 100)
+                });
+              },
+              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-[10px] text-neutral-400 font-medium", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Hue" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                Math.round(hsv.h),
+                "°"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.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: (e2) => {
+                  e2.currentTarget.setPointerCapture(e2.pointerId);
+                  const rect = e2.currentTarget.getBoundingClientRect();
+                  updateFromHsv({
+                    ...hsv,
+                    h: Math.round(Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width)) * 360) % 360
+                  });
+                },
+                onPointerMove: (e2) => {
+                  if (e2.buttons === 0) return;
+                  const rect = e2.currentTarget.getBoundingClientRect();
+                  updateFromHsv({
+                    ...hsv,
+                    h: Math.round(Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width)) * 360) % 360
+                  });
+                },
+                children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-[10px] text-neutral-400 font-medium", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Opacity" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                alpha,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.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: (e2) => {
+                  e2.currentTarget.setPointerCapture(e2.pointerId);
+                  const rect = e2.currentTarget.getBoundingClientRect();
+                  const newAlpha = Math.round(Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width)) * 100);
+                  setAlpha(newAlpha);
+                  applyColor(currentColor, currentCmyk, newAlpha);
+                },
+                onPointerMove: (e2) => {
+                  if (e2.buttons === 0) return;
+                  const rect = e2.currentTarget.getBoundingClientRect();
+                  const newAlpha = Math.round(Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width)) * 100);
+                  setAlpha(newAlpha);
+                  applyColor(currentColor, currentCmyk, newAlpha);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "absolute inset-0",
+                      style: {
+                        background: `linear-gradient(to right, transparent, ${currentColor})`
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "space-y-2 pt-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2.5 top-2 text-xs font-mono text-neutral-500", children: "#" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  maxLength: 7,
+                  value: currentColor.replace("#", "").toUpperCase(),
+                  onChange: (e2) => {
+                    const val = e2.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-[#02bc71]", children: "Copied!" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Copy" })
+              }
+            ),
+            typeof window !== "undefined" && "EyeDropper" in window && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m14 2 8 8-4 4-8-8 4-4Z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m18 10-4-4" }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "space-y-1.5 pt-1", children: CMYK_CHANNELS.map(({ key, label, color: lColor, name }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-bold text-neutral-400 uppercase tracking-wider", children: "Document Colors" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-neutral-500", children: [
+              documentColors.length,
+              " colors"
+            ] })
+          ] }),
+          documentColors.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 text-center rounded-xl bg-neutral-900/40 border border-dashed border-neutral-800", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-neutral-500", children: "No colors detected in document yet" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: documentColors.map((hex) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-bold mix-blend-difference text-white", children: "✓" })
+            },
+            hex
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-bold text-neutral-400 uppercase tracking-wider block mb-2", children: "Default Colors" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-2", children: DEFAULT_PRESET_COLORS.map((hex) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-bold mix-blend-difference text-white", children: "✓" })
+            },
+            hex
+          )) })
+        ] }),
+        isLoadingColors ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-4 text-xs text-neutral-500", children: "Loading color library..." }) : Array.from(groupedDbColors.entries()).map(([groupName, colors]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-bold text-neutral-400 uppercase tracking-wider", children: groupName }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-neutral-500", children: colors.length })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-2", children: colors.map((c2) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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",
@@ -152628,6 +153794,13 @@ ${elements2.join("\n")}
       Tab: /* @__PURE__ */ jsxRuntime.jsx(QRCodeIcon, {}),
       Panel: /* @__PURE__ */ jsxRuntime.jsx(BarcodePanel, {})
     },
+    {
+      id: "color",
+      name: "Color",
+      Tab: /* @__PURE__ */ jsxRuntime.jsx(ColorPickerIcon, {}),
+      Panel: /* @__PURE__ */ jsxRuntime.jsx(ColorPanel, {}),
+      visibleInList: false
+    },
     {
       id: "effects",
       name: "Effects",
@@ -152821,6 +153994,18 @@ ${elements2.join("\n")}
       }
     );
   }
+  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
@@ -152862,6 +154047,40 @@ ${elements2.join("\n")}
     const [charSpacing, setCharSpacing] = React.useState(0);
     const [align, setAlign] = React.useState("left");
     const [showTextPopup, setShowTextPopup] = React.useState(false);
+    const [showStrokeControls, setShowStrokeControls] = React.useState(false);
+    const [strokeColor, setStrokeColor] = React.useState("#000000");
+    const [strokeSize, setStrokeSize] = React.useState(0);
+    const [strokeStyle, setStrokeStyle] = React.useState("Line");
+    const strokeControlsRef = React.useRef(null);
+    const textPopupRef = React.useRef(null);
+    const textPopupButtonRef = React.useRef(null);
+    React.useEffect(() => {
+      if (!showStrokeControls) return;
+      const handleClickOutside = (e2) => {
+        const target = e2.target;
+        if (!target) return;
+        if (strokeControlsRef.current?.contains(target)) return;
+        if (target.closest?.('[data-cmyk-popover="true"], .cmyk-picker-popover')) return;
+        setShowStrokeControls(false);
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [showStrokeControls]);
+    React.useEffect(() => {
+      if (!showTextPopup) return;
+      const handleClickOutside = (e2) => {
+        const target = e2.target;
+        if (!target) return;
+        if (textPopupRef.current?.contains(target) || textPopupButtonRef.current?.contains(target)) return;
+        setShowTextPopup(false);
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [showTextPopup]);
     const text = React.useMemo(() => {
       if (type !== "textbox") return null;
       return isTextbox(objects[0]) ? objects[0] : null;
@@ -152872,6 +154091,11 @@ ${elements2.join("\n")}
       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 = React.useCallback(
       (props) => {
@@ -152884,6 +154108,24 @@ ${elements2.join("\n")}
       },
       [text]
     );
+    const applyTextStroke = React.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;
@@ -152965,7 +154207,10 @@ ${elements2.join("\n")}
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
-          className: "cursor-pointer  p-1 hover:bg-neutral-700 rounded",
+          ref: textPopupButtonRef,
+          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__ */ jsxRuntime.jsx(
             "svg",
@@ -152984,10 +154229,10 @@ ${elements2.join("\n")}
       showTextPopup && /* @__PURE__ */ jsxRuntime.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",
+          ref: textPopupRef,
+          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__ */ jsxRuntime.jsxs("div", { className: "flex justify-between mb-2", children: [
@@ -153076,7 +154321,72 @@ ${elements2.join("\n")}
           },
           children: "Aa"
         }
-      )
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: strokeControlsRef, children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[13px] font-medium text-white", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Color" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CMYKColorPicker,
+              {
+                value: strokeColor,
+                onChange: (hex) => {
+                  const nextColor = typeof hex === "string" ? hex : "#000000";
+                  setStrokeColor(nextColor);
+                  applyTextStroke(nextColor, strokeSize, strokeStyle);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-[13px] font-medium text-white", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Size" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                value: String(strokeSize),
+                onChange: (e2) => {
+                  const nextSize = Math.min(5, Number(e2.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__ */ jsxRuntime.jsx("option", { value: String(size), className: "bg-neutral-800 text-white", children: size }, size))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-[13px] font-medium text-white", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Style" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "select",
+              {
+                value: strokeStyle,
+                onChange: (e2) => {
+                  const nextStyle = e2.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__ */ jsxRuntime.jsx("option", { value: "Dotted", className: "bg-neutral-800 text-white", children: "Dotted" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "Line", className: "bg-neutral-800 text-white", children: "Line" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "Dashed", className: "bg-neutral-800 text-white", children: "Dashed" })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] })
     ] }) });
   }
   function CropIcon() {
@@ -153194,7 +154504,7 @@ ${elements2.join("\n")}
         stroke: "#2196F3",
         strokeWidth: 2,
         cornerColor: "#ffffff",
-        cornerStrokeColor: "#202020",
+        cornerStrokeColor: "#2196F3",
         cornerSize: 12,
         cornerStyle: "circle",
         transparentCorners: false,
@@ -153530,7 +154840,7 @@ ${elements2.join("\n")}
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(EffectIcon, {}),
@@ -153557,7 +154867,7 @@ ${elements2.join("\n")}
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
-          className: "hover:text-blue-400",
+          className: "hover:text-emerald-400 cursor-pointer",
           onClick: () => setActivePanel("animate"),
           children: "Animate"
         }
@@ -153670,7 +154980,7 @@ ${elements2.join("\n")}
     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;
@@ -153797,7 +155107,7 @@ ${elements2.join("\n")}
     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) => {
@@ -153942,7 +155252,7 @@ ${elements2.join("\n")}
     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");
     };
     React.useEffect(() => {
@@ -154035,12 +155345,12 @@ ${elements2.join("\n")}
     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);
       }
@@ -154160,7 +155470,7 @@ ${elements2.join("\n")}
     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) => {
@@ -154208,7 +155518,7 @@ ${elements2.join("\n")}
     const handleAlign = (align) => {
       const active = getActive();
       if (!active) return;
-      if (active.type === "activeselection") {
+      if (active.type?.toLowerCase() === "activeselection") {
         alignInsideSelection(align);
       } else {
         applyAlign(align);
@@ -154375,7 +155685,7 @@ ${elements2.join("\n")}
     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 = () => {
@@ -154449,7 +155759,7 @@ ${elements2.join("\n")}
     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) => {
@@ -154538,13 +155848,19 @@ ${elements2.join("\n")}
     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]);
@@ -154593,6 +155909,14 @@ ${elements2.join("\n")}
   </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();
@@ -154601,7 +155925,7 @@ ${elements2.join("\n")}
         fabricObject.canvas?.requestRenderAll();
       };
     }
-    const size = 24;
+    const size = fabricObject.__rotationControlSize || 24;
     ctx.save();
     ctx.translate(left, top);
     if (rotateImg.complete && rotateImg.naturalHeight !== 0) {
@@ -154609,11 +155933,13 @@ ${elements2.join("\n")}
     }
     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",
@@ -154621,23 +155947,147 @@ ${elements2.join("\n")}
       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() {
@@ -154654,20 +156104,38 @@ ${elements2.join("\n")}
     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, idx2) => {
+        obj.set({
+          selectable: true,
+          evented: true,
+          hasControls: true,
+          hasBorders: true
+        });
+        obj.setCoords();
+        if (groupIndex !== -1) {
+          canvas2.insertAt(groupIndex + idx2, 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__ */ jsxRuntime.jsx(
       "button",
       {
@@ -155013,6 +156481,9 @@ ${elements2.join("\n")}
       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,
@@ -155028,6 +156499,8 @@ ${elements2.join("\n")}
     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;
@@ -155075,27 +156548,63 @@ ${elements2.join("\n")}
         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 = (e2) => {
+    const configureSelectionControls = () => {
       const activeObject = canvas2.getActiveObject();
       if (!activeObject) return;
       configureObjectControls(activeObject);
       canvas2.requestRenderAll();
     };
     canvas2.on("selection:created", (e2) => {
+      if (e2.selected) {
+        e2.selected.forEach((o2) => {
+          o2.__showDegree = false;
+        });
+      }
       updateSelection();
       configureSelectionControls();
     });
     canvas2.on("selection:updated", (e2) => {
+      if (e2.selected) {
+        e2.selected.forEach((o2) => {
+          o2.__showDegree = false;
+        });
+      }
       updateSelection();
       configureSelectionControls();
     });
-    canvas2.on("selection:cleared", clearSelection);
+    canvas2.on("object:scaling", configureSelectionControls);
+    canvas2.on("object:rotating", (e2) => {
+      if (e2.target) {
+        e2.target.__showDegree = true;
+      }
+      configureSelectionControls();
+    });
+    const hideDegree = (e2) => {
+      if (e2?.target) {
+        e2.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");
     };
   }
@@ -155140,6 +156649,23 @@ ${elements2.join("\n")}
       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();
@@ -155148,8 +156674,7 @@ ${elements2.join("\n")}
       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);
@@ -155171,6 +156696,16 @@ ${elements2.join("\n")}
     } 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;
@@ -155183,53 +156718,28 @@ ${elements2.join("\n")}
   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] = React.useState(1);
@@ -155556,7 +157066,7 @@ ${elements2.join("\n")}
           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);
@@ -155612,8 +157122,11 @@ ${elements2.join("\n")}
       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=...)."
@@ -155622,9 +157135,26 @@ ${elements2.join("\n")}
         }
         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();
@@ -155642,11 +157172,20 @@ ${elements2.join("\n")}
             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)) {
@@ -155655,16 +157194,16 @@ ${elements2.join("\n")}
               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 () => {